/* Black / silver alternative. The v4 spacing and mascot docks stay in styles.css. */
:root{
  --chrome-bg:#101115;
  --chrome-surface:#191b21;
  --chrome-text:#eeedf3;
  --chrome-muted:#b0b0c0;
  --chrome-line:rgba(235,233,255,.15);
  --chrome-lilac:#cabef3;
}
html{color-scheme:dark}
body{color:var(--chrome-text);background:var(--chrome-bg)}
::selection{color:#15131c;background:#d3c6fa}
button:focus-visible,a:focus-visible{outline-color:#d0c0ff}
.skip-link{background:#e6e3ee;color:#16151c}
.reading-progress{background:linear-gradient(90deg,#9396ac,#e4dcfb,#c0b1ed)}
.brand-symbol{color:#e7e2f4;background:#ffffff0c;border:1px solid #ffffff25}
.brand-dot{background:#c2b3f0;box-shadow:0 0 10px #b4a0ed45}
.desktop-nav span{opacity:.55}
.desktop-nav a:after{background:#cfc2f2}
.pill,.pill-white{color:#1b1b23;background:linear-gradient(145deg,#f1eff5 0%,#d2d1dc 53%,#e5e3ec 100%);box-shadow:inset 0 1px 0 #fff9}
.pill:hover,.pill-white:hover{color:#131219;background:linear-gradient(145deg,#fff,#e3dcef);box-shadow:0 7px 26px #b7a3e721,inset 0 1px 0 #fff}
.pill-outline{color:#e5e1ee;background:#ffffff03;border-color:#ede9ff48;box-shadow:inset 0 1px 0 #ffffff08}
.pill-outline:hover{color:#fff;background:#ffffff0b;box-shadow:0 7px 25px #0004}
.round-link{border-color:#f0ecff44;color:#e9e5f3;background:#ffffff04}
.round-link:hover{color:#17151e;background:#e5dfef}
.mobile-nav{color:#e9e6f0;background:#1a1b24f7;border:1px solid #ffffff20;box-shadow:0 20px 70px #0009;backdrop-filter:blur(16px)}
.mobile-nav a,.mobile-nav button{border-color:#ffffff1c}
.eyebrow,.tiny-label{color:#c6c2d1}

/* The image fields are atmospheric layers, below all readable content. */
.hero,.intro-dialog{background:#0e1015;color:var(--chrome-text)}
.hero{isolation:isolate}
.chrome-light-field,.chrome-dot-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:paint}
.chrome-light-field{inset:-12px;background-image:url('assets/chrome-light-trails.jpg');background-position:center 53%;background-size:cover;opacity:.48;filter:saturate(.56);transform:translate3d(var(--light-x,0px),var(--light-y,0px),0)}
.chrome-light-field:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 57%,#0e1015ed 0%,#0e1015c9 34%,#0e10156b 65%,#0e10154d 100%),linear-gradient(180deg,#0e101580,transparent 35%,#0e1015 100%)}
.chrome-horizon{position:absolute;left:0;right:0;bottom:4%;height:24%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 88%,#a596c82b,transparent 68%);opacity:.55}
.hero-heading{z-index:3}
h1,.contact-display,.intro-display{color:#eeedf4;text-shadow:0 1px 1px #ffffff10}
.hero-heading .eyebrow{color:#c2b5e0}
.hero-left>p:nth-child(2){color:#f2eff7}
.hero-right>p{color:#e9e5f0}
.hero-facts{border-color:#cfc7e441;color:#bdb9cb}
.hero-hint{color:#aaa5ba}
.hero-caption{color:#d9d4e4;margin-right:195px}
.hero-caption span{opacity:1;color:#9992ab}
.hero-sticker{display:none}
.scene-mark{color:#c8c1d6;opacity:.46;z-index:2}
.hero-bottom{z-index:12}

/* A single physical object gives the abstract light a useful point of focus. */
.chrome-orbit{position:absolute;right:4.6%;bottom:68px;width:clamp(140px,12vw,180px);padding:0;z-index:13;isolation:isolate;background:none;border-radius:50%;transform:rotate(-12deg);transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .4s;cursor:pointer}
.chrome-orbit:before{content:'';position:absolute;inset:17%;border-radius:50%;background:#a69ac02b;filter:blur(24px);z-index:-1}
.chrome-orbit img{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 5px 16px #0008)}
.chrome-orbit>span{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%) rotate(12deg);display:flex;align-items:center;gap:5px;color:#c5bed3;font:600 7px/1.3 Manrope,sans-serif;letter-spacing:.12em;white-space:nowrap}
.chrome-orbit>span .icon{width:11px;height:11px}
.chrome-orbit:hover{transform:translateY(-5px) rotate(-5deg) scale(1.06);filter:brightness(1.14)}
.chrome-orbit:focus-visible{outline-offset:8px}
.chrome-orbit.is-spinning img{animation:chromeDiscTurn 1.05s cubic-bezier(.2,.65,.2,1) both}
@keyframes chromeDiscTurn{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Large works remain the most prominent elements in the second chapter. */
.work{background:#121318}
.work-shell,.about-copy,.resume-shell{position:relative;z-index:1}
.chrome-dot-field{background-image:url('assets/chrome-dot-texture.jpg');background-size:cover;background-position:center 62%;opacity:.13;filter:saturate(.35);mask-image:linear-gradient(115deg,transparent 7%,#0008 38%,#000 100%)}
.work .chrome-dot-field:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#121318a6 0%,#12131875 68%,transparent)}
.section-heading h2 span{color:#c9b9ee}
.section-number{color:#ffffff12}
.section-intro{color:#b4aebf}
.filter{color:#c2bdcf;background:#ffffff03;border-color:#e7dfff30}
.filter:hover{color:#f3eaff;background:#ffffff0b;border-color:#d2c0ff60}
.filter.active{background:#cbbdf1;color:#211a31;border-color:#d0c2f3;box-shadow:0 0 18px #bba6ed13}
.view-switch{background:#24252e;border:1px solid #ffffff0b}
.view-switch button{color:#bfb9cb}
.view-switch button.active{background:#d5cce8;color:#211c2b}
.card-open{color:#eeeaf5;background:linear-gradient(135deg,#23252e,#191b22 65%);border:1px solid #ffffff18;box-shadow:0 12px 24px #0004,inset 0 1px 0 #ffffff06}
.card-open:hover{border-color:#cab9f050;box-shadow:0 22px 38px #0006,0 0 30px #ac91e20d}
.card-image{background:#24222c}
.card-image:after{background:linear-gradient(transparent 52%,#090911a6)}
.card-corner,.card-bottom{color:#fff}
.sample-chip{background:#e7e2edeb;color:#292431;border:1px solid #fff5}
.card-play{color:#211c2b;background:linear-gradient(145deg,#f1edf8,#d4cbe4);box-shadow:0 3px 20px #0004}
.card-open:hover .card-play{color:#21172e;background:#e6d9ff;box-shadow:0 0 26px #d3c2f04d}
.card-info h3{color:#f0edf6}
.card-info p{color:#b4aabc}
.card-arrow{border-color:#d1c5e62e;color:#d9cfec;background:#ffffff03}
.card-roles{color:#b3a9c0}
.card-roles span{border-color:#d8c9ee20;background:#ffffff02}
.gallery-note,.profile-note{color:#9d94ad}
.side-scribble{z-index:1;color:#bbb1d1}

.about{background:#16171d}
.about .chrome-dot-field{background-position:left center;opacity:.075;mask-image:linear-gradient(90deg,#000,transparent 76%)}
.about-copy .eyebrow{color:#c4b4e5}
.about-role{color:#d8ccec}
.about-text{color:#b9b1c5}
.capabilities>div{border-color:#d9d0ee24}
.capabilities>div>span:last-child{opacity:1;color:#948ba5}
.skill-icon{border-color:#d0c1ee45;color:#d1c0f0;background:#ffffff03}
.capabilities>div:hover .skill-icon{color:#e4d5ff;background:#a888e522;border-color:#c8aceb70}
.capabilities h3{color:#eee8f6}
.capabilities p{color:#aea3bd}
.resume{background:radial-gradient(ellipse at 85% 28%,#30264030,transparent 55%),#111318}
.timeline-item{border-color:#d0c6e52b}
.timeline-year{color:#b1a3c9}
.timeline-tag{border-color:#cab7ec38;color:#bba8d5;background:#a88bc10a}
.timeline h3{color:#ece6f4}
.timeline p{color:#b0a6bd}
.pending-resume,.outline-button{border-color:#cab9e748;color:#d6c8eb;background:#ffffff03}
.outline-button:hover{background:#cab9e717;border-color:#cab9e77a}
.contact{background:radial-gradient(ellipse at 50% 85%,#5e496837,transparent 58%),#19151d}
.contact>.eyebrow{position:relative;z-index:1;color:#c8b5da}
.contact-display{color:#eae2ef}
.contact-lead{color:#d2c0df}
.contact-item small{color:#a595b3}
.contact-item>span,.contact-item>a,.copy-contact{color:#e4d8ed}
.contact-helper{color:#aa98b7}
.contact-item>a:hover,.copy-contact:hover{color:#fff}
footer{color:#d6cedf;background:#0c0e12;border-top:1px solid #ffffff0e}
footer>p{color:#9992a6}
.back-top{color:#c6bace}

/* The warm avatar remains warm; only its separation from the dark stage changes. */
.mascot-art{filter:drop-shadow(0 0 1px #e3dcff9c) drop-shadow(0 0 24px #a79ac630) drop-shadow(0 20px 16px #0005)}
.mascot-character:hover .mascot-art{filter:drop-shadow(0 0 1px #eee7ffbf) drop-shadow(0 0 30px #c2a9ed42) drop-shadow(0 22px 18px #0006)}
.mascot-pupil{background:radial-gradient(ellipse at 40% 40%,#57402e 0%,#39251d 68%,#251b19 100%);box-shadow:inset 1px -2px 2px #1e1319aa}
.mascot-pupil:before{background:#fff8ed}
.mascot-pupil:after{background:#ffffff70}
.mascot-lid{background:linear-gradient(#d89a73,#f3bf98)}
.mascot-speech{color:#ede6f6;background:#302837;border:1px solid #d9c5ec3b;box-shadow:0 10px 30px #0006}
.mascot-speech:after{background:#302837}

.project-dialog{color:#eee8f6;background:#1a1b23;border:1px solid #ece1ff26;box-shadow:0 25px 100px #000a}
.project-dialog::backdrop{background:#040408cf;backdrop-filter:blur(12px)}
.dialog-close{color:#25202c;background:#e4ddecf5}
.dialog-close:hover{background:#f5ecff}
.player-wrap{background:#08090d}
.dialog-content .eyebrow{color:#c6afeb}
.dialog-content>p:not(.eyebrow){color:#b9afc6}
.dialog-meta span{color:#d2c4e1;border-color:#d6c3ed35;background:#b397d20a}
.toast{color:#efe7fa;background:#31283d;border:1px solid #dbc3fb45;box-shadow:0 12px 40px #0008}

.intro-dialog::backdrop{background:#0e1015}
.intro-dialog .chrome-light-field{opacity:.55}
.intro-display{position:relative;z-index:1}
.intro-actor{z-index:1}
.intro-credit{z-index:2;color:#ddd4e8}
.intro-credit span:last-child{opacity:1;color:#aaa0ba}
.intro-wave{z-index:2;color:#2c2336;background:linear-gradient(145deg,#efedf5,#c4b4d8);border:1px solid #f4eaff73;box-shadow:0 12px 24px #0004}
.intro-progress{z-index:3;background:#d2c1e714}
.intro-progress span{background:linear-gradient(90deg,#9a8cb9,#e6d7ff)}

@media(max-height:800px) and (min-width:768px){
  .hero-hint{display:none}
  .chrome-orbit{width:140px;bottom:55px}
}
@media(max-width:1050px) and (min-width:768px){
  .chrome-orbit{width:140px;right:4%;bottom:55px}
  .hero-caption{margin-right:165px}
}
@media(max-width:767px){
  .menu-toggle{border-color:#d1c3eb50;background:#ffffff03}
  .menu-toggle span{background:#e3d9f0}
  .chrome-light-field{opacity:.32;background-position:38% center}
  .chrome-light-field:after{background:radial-gradient(ellipse at 50% 46%,#0e1015de 0%,#0e1015bd 37%,#0e1015a3 70%,#0e1015c9 100%),linear-gradient(180deg,#0e101547,transparent 50%,#0e1015)}
  .hero-caption{margin-right:0}
  .hero .chrome-orbit{width:70px;top:375px;right:20px;bottom:auto}
  .chrome-orbit>span{font-size:5px;letter-spacing:.04em;bottom:-6px;gap:2px}
  .chrome-orbit>span .icon{width:8px;height:8px}
  .chrome-orbit:before{filter:blur(15px)}
  .chrome-dot-field{opacity:.075;background-position:right center}
  .about .chrome-dot-field{opacity:.045}
  .card-open{box-shadow:0 10px 20px #0004}
  .mascot-art{filter:drop-shadow(0 0 1px #e3dcff99) drop-shadow(0 0 15px #b3a0da29) drop-shadow(0 15px 12px #0004)}
  .contact{background:radial-gradient(ellipse at 50% 56%,#5e49682b,transparent 62%),#19151d}
  .intro-dialog .chrome-light-field{opacity:.38}
}
.motion-reduced .chrome-orbit,.motion-reduced .chrome-orbit:hover{transform:rotate(-12deg);filter:none}
.motion-reduced .chrome-orbit.is-spinning img{animation:none}
.motion-reduced .chrome-light-field{transform:none}

/* Final visual tuning after the first browser pass. */
.chrome-light-field{opacity:.65;filter:saturate(.85)}
.chrome-light-field:after{background:radial-gradient(ellipse at 50% 62%,#0e1015ea 0%,#0e1015b8 30%,#0e101547 62%,#0e101526 100%),linear-gradient(180deg,#0e101580,transparent 35%,#0e1015 100%)}
.intro-dialog .chrome-light-field{animation:chromeLightEnter 2.4s ease-out both}
@keyframes chromeLightEnter{from{opacity:.9;transform:scale(1.18) translateY(18px)}to{opacity:.65;transform:scale(1)}}
@media(min-width:768px) and (max-width:1050px){.header-actions .intro-replay{display:inline-flex;min-height:36px;padding:8px 13px;font-size:10px;gap:10px}.header-actions .intro-replay .icon{width:13px;height:13px}.desktop-nav{gap:18px}.header-actions{gap:8px}}
.motion-reduced .intro-dialog .chrome-light-field{animation:none;transform:none}