/* ==========================================================================
   OMNIPOTEMP — interactive desktop
   XP's structure (title bars, taskbar, start menu, draggable windows) rebuilt
   in temp's palette rather than Microsoft blue. Static: no build, no runtime.
   ========================================================================== */

:root{
  --ink:#07060B;
  --hot:#FF3D7F; --acid:#7CFF4F; --cyan:#3DE0FF; --violet:#A96BFF; --amber:#FFC12E;
  --steel:#9FB8D6;         /* the silver the whole 2000s web was built out of */
  --face:#E8E4F2;          /* window body, XP's grey warmed toward violet */
  --face-dk:#B9B2CC;
  --bar-a:#7A2BD6; --bar-b:#FF3D7F;
  --gold-l:#FFE9A8; --gold:#C99A22; --gold-d:#8A5A0E;
  /* Kingdom Hearts' menus are set in a flared humanist face, not a grotesque.
     Optima is the closest thing installed on every Mac; Palatino / Book Antiqua
     cover Windows. Still period-correct -- KH1 shipped in 2002. */
  --font-display:'Optima','Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
  --font-ui:'Optima','Avenir Next','Segoe UI',Tahoma,sans-serif;
  --taskbar-h:44px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--ink);color:#fff;font-family:var(--font-ui);
  overflow:hidden;
  cursor:url('assets/cursor-32.png') 4 2, auto;
}
button,a,.icon,.titlebar,.tab{cursor:url('assets/cursor-32.png') 4 2, pointer}
/* the JS spinning-logo cursor takes over on fine pointers */
html.has-tcur,html.has-tcur body,html.has-tcur button,html.has-tcur a,
html.has-tcur .icon,html.has-tcur .titlebar,html.has-tcur .tab{cursor:none}

/* ---------- shared background ------------------------------------------- */
.bg-aurora,.bg-grid,.bg-scan,.bg-grain{position:absolute;inset:0}
/* Same deep-blue ground as the landing, so entering the desktop reads as going
   deeper into one place rather than arriving somewhere unrelated. */
.bg-aurora{
  background:
    radial-gradient(90% 62% at 50% 22%,rgba(46,110,220,.26),transparent 68%),
    radial-gradient(70% 50% at 14% 92%,rgba(120,60,220,.16),transparent 66%),
    radial-gradient(70% 50% at 88% 84%,rgba(30,120,190,.14),transparent 66%),
    radial-gradient(120% 100% at 50% 40%,#16305F 0%,#0A1636 46%,#050C22 76%,#02060F 100%);
}
/* edge falloff, matching the landing's vignette */
.desktop__bg::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 74% 76% at 50% 44%,transparent 56%,
      rgba(2,6,15,.30) 80%,rgba(2,6,15,.72) 100%),
    linear-gradient(180deg,rgba(2,6,15,.55) 0,transparent 16%);
}
/* Same flat technical grid as the landing. A receding perspective floor reads
   vaporwave, which is a 2015 idea about the 80s -- not this site. */
.bg-grid{
  inset:-8%;
  background-image:
    radial-gradient(circle at 0 0,rgba(226,208,246,.20) 1.3px,transparent 1.7px),
    linear-gradient(90deg,rgba(180,160,215,.07) 1px,transparent 1px),
    linear-gradient(180deg,rgba(180,160,215,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,172,208,.05) 1px,transparent 1px),
    linear-gradient(180deg,rgba(140,172,208,.05) 1px,transparent 1px);
  background-size:104px 104px,104px 104px,104px 104px,26px 26px,26px 26px;
  animation:drift 22s linear infinite;
}
@keyframes drift{
  to{background-position:104px 104px,104px 104px,104px 104px,26px 26px,26px 26px}
}
.bg-scan{opacity:.20;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.55) 0 1px,transparent 1px 3px)}
.bg-grain{
  inset:-10%;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(4) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}

/* ---------- chrome text -------------------------------------------------- */
.chrome{
  background:linear-gradient(180deg,#FFF 0%,#EEF4FF 22%,#6E7C94 47%,#2B3345 52%,
    #C8D4E4 61%,#FFF 82%,#6E7C94 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(61,224,255,.35));
}
/* ==========================================================================
   OPENING DISCLAIMER
   Black field, centred icon, left-set body copy beneath it. Fades up, holds,
   fades out. Every duration is a variable so the whole beat can be retimed
   without touching the keyframes.
   ========================================================================== */
/* The beat, in order:
     1. black
     2. icon fades up, copy follows a moment later
     3. hold
     4. copy and icon fade back OUT to black
     5. a beat of pure black
     6. only then does the black veil itself lift onto the site
   The first pass faded the whole overlay, which cross-dissolved the copy
   straight into the landing. Separating the CONTENT from the VEIL is what
   makes it read as a title card instead of a transition. */
:root{
  --intro-in:2900ms;      /* orb arrives, copy follows */
  --intro-hold:5200ms;    /* you read it               */
  --intro-out:1300ms;     /* copy fades back to black  */
  --intro-black:900ms;    /* held on PURE black        */
  --intro-veil:1700ms;    /* black lifts to the site   */
}
.intro{
  position:fixed;inset:0;z-index:200;background:#000;
  display:grid;place-items:center;padding:24px;
  -webkit-font-smoothing:none;
  animation:introVeil var(--intro-veil) cubic-bezier(.4,0,.2,1)
            calc(var(--intro-in) + var(--intro-hold) + var(--intro-out) + var(--intro-black))
            forwards;
}
@keyframes introVeil{from{opacity:1} to{opacity:0}}

.intro__in{
  animation:
    introCopyIn  var(--intro-in)  cubic-bezier(.16,.8,.24,1) both,
    introCopyOut var(--intro-out) cubic-bezier(.5,0,.75,0)
                 calc(var(--intro-in) + var(--intro-hold)) forwards;
}
/* it rises and settles rather than snapping on */
@keyframes introCopyIn {
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to  {opacity:1;transform:none}
}
@keyframes introCopyOut{from{opacity:1} to{opacity:0}}

/* The orb is a photograph of a sphere, so extruding it would smear. Depth comes
   from parallax instead: it arrives THROUGH Z, then never stops turning
   slightly, and carries its own shadow. Arrival lives on the wrapper and the
   float on the image, because both want the transform property. */
.intro__orb{
  position:relative;width:fit-content;margin:0 auto 34px;
  perspective:760px;
  animation:orbArrive calc(var(--intro-in) * .9) cubic-bezier(.24,.62,.2,1) both;
}
@keyframes orbArrive{
  0%  {opacity:0;transform:translateZ(-320px) translateY(26px) rotateY(-24deg) scale(.72)}
  62% {opacity:1}
  78% {transform:translateZ(0) translateY(0) rotateY(4deg) scale(1.045)}
  100%{opacity:1;transform:translateZ(0) translateY(0) rotateY(0) scale(1)}
}
/* pool of shadow under it, so it reads as hanging in space rather than pasted */
.intro__orb::after{
  content:'';position:absolute;left:8%;right:8%;bottom:-11%;height:15%;
  background:radial-gradient(closest-side,rgba(0,0,0,.92),rgba(0,0,0,.5) 50%,transparent 78%);
  filter:blur(11px);z-index:-1;
  animation:orbShadow 9s ease-in-out infinite alternate;
}
@keyframes orbShadow{
  from{transform:scale(1);opacity:.85}
  to  {transform:scale(.88);opacity:.6}
}
.intro__copy{
  animation:introCopyLine calc(var(--intro-in) * .42)
            cubic-bezier(.16,.8,.24,1) calc(var(--intro-in) * .3) both;
}
@keyframes introCopyLine{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:none}
}

.intro.is-skipped{animation:introVeil 420ms ease forwards}
.intro.is-skipped .intro__in{animation:introCopyOut 260ms ease forwards}

.intro__in{max-width:470px;width:100%}
.intro__icon{
  display:block;width:168px;height:auto;object-fit:contain;
  image-rendering:pixelated;            /* baked low-res, keep the blocks hard */
  transform-style:preserve-3d;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.72))
         drop-shadow(0 8px 10px rgba(0,0,0,.55))
         drop-shadow(0 2px 3px rgba(0,0,0,.5))
         drop-shadow(0 0 34px rgba(120,160,255,.16));
  animation:orbLook 13s cubic-bezier(.6,0,.3,1) infinite;
}
/* Real eyes do not drift sinusoidally -- they HOLD, then dart. Paired
   percentages give each pose a long hold and a ~400ms saccade between, which
   is what stops a flat photo reading as a flat photo. The squash at 52% is a
   blink, folded in here because two animations cannot both own transform. */
@keyframes orbLook{
  0%,13%   {transform:rotateY(-10deg) rotateX(4deg)  translateY(-5px) scaleY(1)}
  16%,29%  {transform:rotateY(8deg)   rotateX(-2deg) translateY(-1px) scaleY(1)}
  32%,44%  {transform:rotateY(-5deg)  rotateX(-5deg) translateY(4px)  scaleY(1)}
  48%      {transform:rotateY(-2deg)  rotateX(-2deg) translateY(2px)  scaleY(1)}
  52%      {transform:rotateY(-1deg)  rotateX(-1deg) translateY(2px)  scaleY(.82)}
  56%,68%  {transform:rotateY(13deg)  rotateX(3deg)  translateY(-4px) scaleY(1)}
  71%,84%  {transform:rotateY(-13deg) rotateX(1deg)  translateY(2px)  scaleY(1)}
  87%,97%  {transform:rotateY(4deg)   rotateX(-4deg) translateY(-3px) scaleY(1)}
  100%     {transform:rotateY(-10deg) rotateX(4deg)  translateY(-5px) scaleY(1)}
}

/* wet specular drifting across the sphere -- sells the curvature more than any
   amount of rotation does, because a real highlight slides as the ball turns */
.intro__gloss{
  position:absolute;inset:0;
  overflow:hidden;pointer-events:none;
}
.intro__gloss::before{
  content:'';position:absolute;left:0;top:0;width:58%;height:44%;
  background:radial-gradient(closest-side,rgba(255,255,255,.20),
             rgba(255,250,245,.05) 54%,transparent 78%);
  animation:glossDrift 13s cubic-bezier(.6,0,.3,1) infinite;
}
/* transform, not left/top: the latter runs layout on every frame */
@keyframes glossDrift{
  0%,13%   {transform:translate(10%,14%)}
  16%,29%  {transform:translate(46%,6%)}
  32%,44%  {transform:translate(24%,28%)}
  56%,68%  {transform:translate(60%,18%)}
  71%,84%  {transform:translate(4%,22%)}
  87%,100% {transform:translate(32%,9%)}
}
/* rim light on the shadow side, so the ball has a lit edge from behind */
.intro__orb::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 26px rgba(0,0,0,.5);
}
.intro__copy{
  text-align:left;
  font:400 17px/1.5 'Courier New',ui-monospace,Menlo,monospace;
  letter-spacing:.02em;color:#fff;
}
.intro__copy p + p{margin-top:1.42em}

/* ==========================================================================
   LANDING SPLASH
   ========================================================================== */
.boot{
  position:fixed;inset:0;z-index:100;overflow:hidden;background:#02060F;
  display:grid;place-items:center;text-align:center;
  /* PS2 output was 640x448 upscaled to a CRT: sharp but ALIASED, never smooth.
     Killing font smoothing gets hard-edged glyphs; the art is authored small
     and scaled up nearest-neighbour below, which produces the real thing
     rather than a filter pretending to be it. */
  -webkit-font-smoothing:none;
  -moz-osx-font-smoothing:grayscale;
}
.boot img,.station img,.tcur img{image-rendering:pixelated}
/* the mark is the one thing that stays clean */
.spin img,.refl img{image-rendering:auto}
/* Every entrance below is timed from page load, so behind a 10s title card
   they all finish unseen and the landing is revealed fully assembled and
   mid-motion. Holding them paused means they play AS the black lifts. */
.boot.is-held,.boot.is-held *{animation-play-state:paused !important}
.boot.is-out{animation:bootOut .55s ease forwards}
.boot.is-back{animation:bootBack .45s ease both}
@keyframes bootBack{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes bootOut{to{opacity:0;visibility:hidden;transform:scale(1.06)}}

/* ---------- background ---------------------------------------------------- */
.boot__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* PS2-era menu ground: one deep blue vertical wash, lit from behind the
     centre. The console's own menus and KH's title screen are both this. */
  background:
    radial-gradient(96% 68% at 50% 40%,#1E3E86 0%,#132A5E 30%,#0A1638 58%,#050C22 82%,#02060F 100%);
  animation:crtOn .5s cubic-bezier(.2,.9,.25,1) both;
}
/* the old CRT switch-on: a hairline that snaps open vertically */
@keyframes crtOn{
  0%  {transform:scaleY(.004) scaleX(.55);filter:brightness(3.4)}
  55% {transform:scaleY(.04)  scaleX(1);  filter:brightness(2.2)}
  100%{transform:scaleY(1)    scaleX(1);  filter:brightness(1)}
}

/* Station of Awakening: the rose window the composition stands on.
   Tilted back and extruded, because a dive platform is a SLAB you look down at,
   not a flat disc. Depth is faked the same way the wordmark's is -- copies of
   the same art stacked along Z, dark through the middle so the edge reads solid. */
.station3d{
  position:absolute;left:50%;top:52%;width:min(104vh,88vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  perspective:1150px;
  opacity:.46;
  animation:stationIn 2.1s cubic-bezier(.16,1,.3,1) .28s both;
}
.station__cast{
  position:absolute;left:50%;top:57%;width:96%;height:30%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side,rgba(0,0,0,.92),rgba(0,0,0,.55) 46%,transparent 74%),
    radial-gradient(closest-side,rgba(0,0,0,.7),transparent 62%);
  background-size:100% 100%,64% 62%;
  background-position:50% 50%,50% 42%;
  background-repeat:no-repeat;
  filter:blur(26px);
}
.station{
  position:absolute;inset:0;transform-style:preserve-3d;
  animation:stationTurn 72s linear infinite;
}
.station img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  transform:translateZ(calc(var(--z) * 1px));
}
/* rotateX stays put while rotateZ carries the spin */
@keyframes stationTurn{
  from{transform:rotateX(60deg) rotateZ(0deg)}
  to  {transform:rotateX(60deg) rotateZ(360deg)}
}
@keyframes stationIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.74)}
  to  {opacity:.46;transform:translate(-50%,-50%) scale(1)}
}

/* soft translucent orbs drifting, the thing PS2 menus idle on */
.bokeh{position:absolute;inset:-10%;animation:fadeIn 2.4s ease .5s both}
.bokeh i{
  position:absolute;border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,205,255,.22),rgba(90,150,255,.09) 58%,transparent 78%);
  animation:bokehFloat var(--t) ease-in-out infinite alternate;
}
.bokeh i:nth-child(1){width:26vmin;height:26vmin;left:8%; top:14%;--t:19s;animation-delay:-2s}
.bokeh i:nth-child(2){width:16vmin;height:16vmin;left:74%;top:10%;--t:24s;animation-delay:-7s}
.bokeh i:nth-child(3){width:34vmin;height:34vmin;left:60%;top:58%;--t:29s;animation-delay:-4s}
.bokeh i:nth-child(4){width:12vmin;height:12vmin;left:22%;top:66%;--t:17s;animation-delay:-11s}
.bokeh i:nth-child(5),.bokeh i:nth-child(6){display:none}
/* transform only -- animating opacity on a big soft layer forces a repaint */
@keyframes bokehFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(3vmin,-5vmin,0) scale(1.14)}
}

/* light shafts falling through, the way KH's dive sequence is lit */
.shafts{
  position:absolute;inset:-20% -10%;
  background:
    linear-gradient(172deg,transparent 40%,rgba(180,220,255,.13) 47%,transparent 54%),
    linear-gradient(188deg,transparent 44%,rgba(140,190,255,.11) 50%,transparent 57%),
    linear-gradient(200deg,transparent 46%,rgba(255,214,150,.07) 51%,transparent 58%);
  animation:fadeIn 2s ease .6s both;
}

/* starfield — three parallax layers, dots painted as box-shadows by app.js */
.stars{position:absolute;inset:0;overflow:hidden;
  animation:fadeIn 1.4s ease .40s both}
.stars i{
  position:absolute;top:0;left:0;width:var(--sz);height:var(--sz);
  background:transparent;box-shadow:var(--dots);
  animation:starDrift var(--dur) linear infinite;
}
/* every star is emitted twice, 100vh apart, so a 100vh shift wraps seamlessly */
@keyframes starDrift{to{transform:translateY(-100vh)}}

/* flat technical grid: major cells with node dots + a fine minor grid, drifting
   diagonally. Blueprint / CAD viewport, which is where the era actually lived. */
.tgrid{
  position:absolute;inset:-8%;
  background-image:
    radial-gradient(circle at 0 0,rgba(226,208,246,.20) 1.3px,transparent 1.7px),
    linear-gradient(90deg,rgba(180,160,215,.07) 1px,transparent 1px),
    linear-gradient(180deg,rgba(180,160,215,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(180,160,215,.03) 1px,transparent 1px),
    linear-gradient(180deg,rgba(180,160,215,.03) 1px,transparent 1px);
  background-size:104px 104px,104px 104px,104px 104px,26px 26px,26px 26px;
  animation:tgridRun 22s linear infinite,fadeIn 1s ease .5s both;
  opacity:.55;
}
/* transform, not background-position: the latter repaints a full-screen
   element on every single frame */
@keyframes tgridRun{to{transform:translate3d(104px,104px,0)}}

/* chrome spotlight pooled behind the mark */
.spot{
  position:absolute;left:50%;top:44%;width:min(120vw,1180px);height:min(80vh,660px);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse 40% 34% at 50% 50%,rgba(190,225,255,.20),transparent 66%),
    radial-gradient(ellipse 62% 44% at 50% 52%,rgba(70,130,240,.16),transparent 68%);
  filter:blur(6px);
  animation:fadeIn 1.2s ease .45s both;
}

/* the four-point specular star every chrome logo in 2001 had bolted to it */
.flare{
  position:absolute;left:50%;top:42%;width:min(96vw,900px);height:min(52vh,430px);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,.25) 24%,transparent 62%),
    linear-gradient(90deg,transparent 0,rgba(180,214,255,.5) 44%,#fff 50%,
      rgba(180,214,255,.5) 56%,transparent 100%),
    linear-gradient(180deg,transparent 0,rgba(180,214,255,.4) 40%,rgba(255,255,255,.95) 50%,
      rgba(180,214,255,.4) 60%,transparent 100%);
  background-size:120px 120px,100% 2px,2px 62%;
  background-position:50% 50%,50% 50%,50% 50%;
  background-repeat:no-repeat;
  filter:blur(.6px) drop-shadow(0 0 24px rgba(160,200,255,.6));
  opacity:.62;
  animation:flareIn 1.4s cubic-bezier(.16,1,.3,1) .5s both,flarePulse 7s ease-in-out 2s infinite;
}
@keyframes flareIn{from{opacity:0;transform:translate(-50%,-50%) scaleX(.12) scaleY(.3)}
  to{opacity:.62;transform:translate(-50%,-50%) scale(1)}}
@keyframes flarePulse{50%{opacity:.85}}

.boot__scan{
  position:absolute;inset:0;opacity:.26;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.72) 0 1px,transparent 1px 3px);
}

.boot__grain{
  /* -200% meant 5x the viewport in BOTH axes = 25 screens of animated noise,
     which was 40 of the 59 megapixels being composited every frame. The jitter
     only moves 3%, so 10% of overhang is all it ever needed. */
  position:absolute;inset:-10%;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(4) infinite;
}
/* holds the grid off the edges of the screen */
.vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 68% 72% at 50% 46%,transparent 54%,
      rgba(2,6,15,.24) 78%,rgba(2,6,15,.72) 94%,#02060F 100%),
    linear-gradient(90deg,#02060F 0,rgba(2,6,15,.40) 8%,transparent 24%,
      transparent 76%,rgba(2,6,15,.40) 92%,#02060F 100%),
    linear-gradient(180deg,#02060F 0,transparent 18%,transparent 82%,#02060F 100%);
}

/* ---------- stage --------------------------------------------------------- */
.boot__stage{position:relative;z-index:1;display:grid;justify-items:center;padding:20px;
  /* The stage is a column of [mark, menu, socials] and grid centres the WHOLE
     column, which leaves the mark high. Pushing down by half the height of
     everything below it puts the mark itself on the frame's centre line. */
  transform:translateY(clamp(38px,5.9vh,66px));}

/* ---------- spinning wordmark --------------------------------------------- */
.boot__logo{
  width:clamp(300px,60vw,760px);aspect-ratio:880/211;position:relative;
  perspective:620px;perspective-origin:50% 44%;
  translate:var(--mark-nudge-x,0) var(--mark-nudge-y,30px);
  perspective:1400px;
  animation:markIn 1.05s cubic-bezier(.18,1.15,.35,1) .72s both;
}
@keyframes markIn{
  0%  {opacity:0;transform:translateY(26px) scale(.42)}
  60% {opacity:1}
  78% {transform:translateY(0) scale(1.055)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.boot__logo .loop{width:100%;height:100%;object-fit:contain;display:block}
.spin{
  position:absolute;inset:0;transform-style:preserve-3d;
  animation:spinY 9s linear infinite;
}
.boot__logo:has(.loop) .spin{display:none}
.spin img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  /* --z: depth of this slice, --b: how lit it is (mid-slices are the dark edge) */
  transform:translateZ(calc(var(--z) * 1px));
}
.spin img.sl-face{filter:brightness(var(--b)) saturate(calc(.15 + var(--b) * .85))}
/* back plate turned to face the other way, so the mark is never mirrored */
.spin img.sl-back{transform:translateZ(calc(var(--z) * 1px)) rotateY(180deg)}
.spin img:first-child{
  filter:drop-shadow(0 18px 16px rgba(0,0,0,.62))
         drop-shadow(0 3px 2px rgba(0,0,0,.55))
         drop-shadow(0 0 26px rgba(150,200,255,.28));
}
/* Dead constant speed, 0 to 360, linear. No ease at either end, so the loop
   point is invisible -- it never ramps up or down. */
@keyframes spinY{to{transform:rotateY(360deg)}}

/* wet-floor reflection — the one detail every chrome logo of the era had.
   Same markup, same animation clock, so it stays locked to the real mark. */
/* Same box as the mark, flipped about its own baseline, so the perspective
   geometry is identical and the reflection lands exactly under the letters.
   A separately-positioned box gets a different vanishing point and drifts. */
.refl{
  position:absolute;inset:0;pointer-events:none;opacity:.22;
  perspective:620px;perspective-origin:50% 44%;
  transform:scaleY(-1);transform-origin:50% 100%;
  /* mask is in local space, i.e. before the flip: local-bottom = nearest the
     real mark, so it fades upward from there */
  mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.22) 34%,transparent 62%);
  -webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.22) 34%,transparent 62%);
}
.refl .spin{position:absolute;inset:0}

/* twinkles that pop around the mark, 2001-chrome-logo style */
.tw{
  position:absolute;width:var(--s,26px);height:var(--s,26px);pointer-events:none;
  background:radial-gradient(closest-side,#fff 0,#DCEBFF 40%,rgba(190,220,255,.85) 100%);
  /* a proper tapered four-point sparkle, not a crossed pair of bars */
  clip-path:polygon(50% 0%,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0% 50%,43% 43%);
  filter:drop-shadow(0 0 6px rgba(210,232,255,.95));
  opacity:0;animation:twinkle 4.6s ease-in-out infinite;
}
.tw--1{left:-3%;top:14%;--s:30px;animation-delay:2.1s}
.tw--2{right:-2%;top:64%;--s:22px;animation-delay:3.6s}
.tw--3{left:46%;top:-16%;--s:17px;animation-delay:5.0s}
@keyframes twinkle{
  0%,72%,100%{opacity:0;transform:scale(.3) rotate(0)}
  80%{opacity:1;transform:scale(1.15) rotate(45deg)}
  88%{opacity:0;transform:scale(.4) rotate(90deg)}
}

/* ---------- nav: real 2000s web buttons ----------------------------------- */
/* Hard 1px keyline, bevel, and the gloss split at the midpoint that every gel
   button of the era had. Verdana bold caps -- not a modern condensed display. */
.boot__nav{position:relative}
.boot__nav::before{
  content:'';position:absolute;left:-8%;right:-8%;top:-42%;bottom:-160%;
  z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(3,8,22,.72),rgba(3,8,22,.42) 46%,transparent 74%);
  filter:blur(10px);
}
.boot__nav{                            /* clears the reflection under the mark */
  margin-top:clamp(40px,8.4vh,92px);display:flex;gap:clamp(10px,1.6vw,18px);
  flex-wrap:wrap;justify-content:center;
}
/* Modern Final Fantasy menu (FFX through FFXV), not the pixel-era boxes:
   genuinely TRANSPARENT glass rather than a painted panel, 1px hairlines
   instead of bevels, a bright accent rail down the leading edge, and light,
   wide-tracked type. The gloss is a single top highlight, not an Aqua dome. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  min-width:clamp(158px,19vw,214px);padding:0;
  border-radius:4px;
  border:1px solid rgba(158,208,255,.52);
  background:
    linear-gradient(180deg,rgba(160,212,255,.24) 0 12%,rgba(126,186,246,.14) 12% 24%,
                    rgba(150,205,255,.05) 24% 34%,transparent 34%),
    linear-gradient(180deg,rgba(26,72,146,.46) 0 26%,rgba(18,52,112,.54) 26% 52%,
                    rgba(10,32,78,.62) 52% 78%,rgba(6,18,52,.68) 78% 100%);
  box-shadow:
    inset 0 1px 0 rgba(214,238,255,.55),
    inset 0 0 34px rgba(70,140,235,.16),
    0 0 0 1px rgba(2,10,28,.55),
    0 0 26px var(--glow),
    0 10px 30px rgba(0,0,0,.5);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  animation:btnIn .5s cubic-bezier(.2,1.3,.4,1) both;
}
.btn span{
  display:block;padding:15px 26px 16px 30px;
  font:300 clamp(12.5px,1.45vw,16px)/1 var(--font-display);
  letter-spacing:.32em;text-indent:.32em;color:#E6F4FF;
  text-shadow:0 0 14px rgba(140,200,255,.75),0 1px 2px rgba(0,6,24,.8);
}
/* the accent rail down the leading edge -- FF's selected-item cue */
.btn::before{
  content:'';position:absolute;left:0;top:8%;bottom:8%;width:2px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(190,230,255,.95) 22%,
             rgba(190,230,255,.95) 78%,transparent);
  opacity:.42;transition:opacity .16s ease,box-shadow .16s ease;
}
/* a single hairline sweep, standing in for the old gel dome */
.btn::after{
  content:'';position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(105deg,transparent 44%,rgba(220,242,255,.42) 50%,transparent 56%);
  transform:translateX(-120%);
}
.btn:hover::after{transition:transform .6s ease;transform:translateX(120%)}
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(200,232,255,.85);
  background:
    linear-gradient(180deg,rgba(196,232,255,.34) 0 12%,rgba(150,206,255,.20) 12% 24%,
                    rgba(150,205,255,.07) 24% 34%,transparent 34%),
    linear-gradient(180deg,rgba(40,100,190,.54) 0 26%,rgba(26,70,140,.60) 26% 52%,
                    rgba(14,42,98,.68) 52% 78%,rgba(8,24,62,.72) 78% 100%);
  box-shadow:
    inset 0 1px 0 rgba(236,248,255,.8),
    inset 0 0 44px rgba(96,170,255,.26),
    0 0 0 1px rgba(2,10,28,.55),
    0 0 40px var(--glow),
    0 14px 36px rgba(0,0,0,.5);
}
.btn:hover::before{opacity:1;box-shadow:0 0 12px rgba(180,225,255,.95)}
.btn:active{transform:translateY(1px);filter:brightness(.94)}
.btn:nth-child(1){animation-delay:1.52s}
.btn:nth-child(2){animation-delay:1.64s}
.btn:nth-child(3){animation-delay:1.76s}
@keyframes btnIn{
  0%  {opacity:0;transform:translateY(16px) scale(.86)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
/* thin FF-style pointer, cool white rather than gold */
.btn__mark{
  position:absolute;left:13px;top:50%;width:7px;height:10px;
  transform:translate(-12px,-50%);opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#FFFFFF,#AFDCFF);
  clip-path:polygon(0 0,100% 50%,0 100%);
  filter:drop-shadow(0 0 6px rgba(180,225,255,.95));
  transition:transform .18s cubic-bezier(.2,1.4,.4,1),opacity .18s ease;
}
.btn:hover .btn__mark,.btn:focus-visible .btn__mark{transform:translate(0,-50%);opacity:1}
.btn__out{
  font-style:normal;font-size:.78em;margin-left:.45em;opacity:.6;
  vertical-align:.08em;letter-spacing:0;
}
.btn:hover .btn__out{opacity:1}

/* identity lives in the halo, not the fill */
.btn--acid  {--glow:rgba(124,255,79,.24)}
.btn--violet{--glow:rgba(169,107,255,.30)}
.btn--hot   {--glow:rgba(255,61,127,.24)}

/* ---------- socials ------------------------------------------------------- */
.boot__social{
  list-style:none;margin-top:clamp(30px,5.2vh,52px);
  display:flex;gap:16px;justify-content:center;align-items:center;
}
.boot__social li{animation:socIn .5s cubic-bezier(.2,1.3,.4,1) both}
.boot__social li:nth-child(1){animation-delay:1.98s}
.boot__social li:nth-child(2){animation-delay:2.08s}
@keyframes socIn{from{opacity:0;transform:translateY(12px) scale(.8)}
  to{opacity:1;transform:none}}
.soc{                                    /* same panel language, square */
  position:relative;display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;color:#FFFFFF;text-decoration:none;
  border:1px solid rgba(150,216,255,.9);
  background:
    linear-gradient(180deg,rgba(226,244,255,.42) 0,rgba(150,206,255,.10) 44%,
                    rgba(255,255,255,0) 46%),
    linear-gradient(180deg,rgba(30,86,190,.78) 0,rgba(12,38,110,.86) 52%,
                    rgba(6,18,62,.92) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),
             inset 0 -10px 16px rgba(4,12,48,.55),
             inset 0 0 18px rgba(90,170,255,.26),
             0 0 0 1px rgba(2,8,26,.8),0 9px 20px rgba(0,0,0,.6);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.soc::before{
  content:'';position:absolute;inset:3px;pointer-events:none;
  border-radius:50%;border:1px solid var(--gold);opacity:.5;
}
.soc svg{width:19px;height:19px;display:block;position:relative;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.soc:hover{transform:translateY(-2px);
  filter:brightness(1.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 -10px 16px rgba(4,12,48,.45),
  inset 0 0 24px rgba(130,200,255,.4),
  0 0 0 1px rgba(2,8,26,.8),0 12px 26px rgba(0,0,0,.6),
  0 0 30px var(--socglow,rgba(140,205,255,.7))}
.soc:hover::before{opacity:1;border-color:var(--gold-l)}
.soc:active{transform:translateY(1px)}
.boot__social li:nth-child(1) .soc{--socglow:rgba(228,64,150,.7)}    /* IG */
.boot__social li:nth-child(2) .soc{--socglow:rgba(61,224,255,.65)}   /* TikTok */
.soc svg{color:#FFFFFF}

/* keyboard users get the same affordance as the mouse */
.btn:focus-visible,.soc:focus-visible{
  outline:2px solid #EAF2FF;outline-offset:3px;
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- HUD corner brackets ------------------------------------------- */
/* Frames the composition so it reads as an interface, not art floating in a void */
.brackets{position:absolute;left:clamp(9px,1.5vw,20px);right:clamp(9px,1.5vw,20px);
  top:clamp(9px,1.5vw,20px);bottom:calc(56px + clamp(9px,1.5vw,20px));
  z-index:1;pointer-events:none}
/* Three parts per corner: a heavy gold outer rule, a pale inner rule set in
   from it, and a small gem at the elbow. A single flat border read as a plain
   crop-mark, which is what looked unfinished. */
.brackets i{
  position:absolute;width:clamp(26px,3.4vw,44px);height:clamp(26px,3.4vw,44px);
  border:2px solid transparent;
  border-image:linear-gradient(135deg,var(--gold-l),var(--gold) 42%,var(--gold-d)) 1;
  filter:drop-shadow(0 0 8px rgba(255,206,110,.5));
  animation:brIn .6s ease 1.9s both;
}
/* pale inner rule */
.brackets i::before{
  content:'';position:absolute;inset:5px;
  border:1px solid rgba(255,233,168,.5);
}
/* gem at the elbow */
.brackets i::after{
  content:'';position:absolute;width:7px;height:7px;
  background:linear-gradient(135deg,#FFF6DA,var(--gold) 55%,var(--gold-d));
  transform:rotate(45deg);
  box-shadow:0 0 8px rgba(255,220,140,.85);
}
.brackets i:nth-child(1){top:0;left:0;  border-right:0;border-bottom:0}
.brackets i:nth-child(2){top:0;right:0; border-left:0; border-bottom:0}
.brackets i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.brackets i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.brackets i:nth-child(1)::before{border-right:0;border-bottom:0}
.brackets i:nth-child(2)::before{border-left:0; border-bottom:0}
.brackets i:nth-child(3)::before{border-right:0;border-top:0}
.brackets i:nth-child(4)::before{border-left:0; border-top:0}
.brackets i:nth-child(1)::after{top:-4px; left:-4px}
.brackets i:nth-child(2)::after{top:-4px; right:-4px}
.brackets i:nth-child(3)::after{bottom:-4px;left:-4px}
.brackets i:nth-child(4)::after{bottom:-4px;right:-4px}
@keyframes brIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* ---------- sound toggle -------------------------------------------------- */
/* Bare glyph in the corner, no button chrome, matching the bracket gold. */
.snd{
  flex:0 0 auto;display:grid;place-items:center;
  width:30px;height:30px;padding:0;border:0;background:none;
  color:rgba(255,255,255,.78);
  filter:drop-shadow(0 0 6px rgba(190,220,255,.4));
  transition:color .14s ease,filter .14s ease,transform .12s ease;
}
.snd:hover{color:#fff;filter:drop-shadow(0 0 10px rgba(210,235,255,.9));transform:scale(1.08)}
.snd:active{transform:scale(.94)}
.snd svg{width:100%;height:100%;display:block}
.snd .wave{transition:opacity .16s ease}
.snd[aria-pressed="false"] .wave{opacity:0}
.snd .slash{
  stroke-dasharray:34;stroke-dashoffset:34;
  transition:stroke-dashoffset .2s cubic-bezier(.2,1,.3,1);
}
.snd[aria-pressed="false"] .slash{stroke-dashoffset:0}
.snd:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
/* the tray copy sits against the clock, so it runs a little smaller */
.snd--tray{width:22px;height:22px;color:rgba(255,255,255,.72)}
.snd--tray:hover{color:#fff}

/* ---------- status bar ---------------------------------------------------- */
/* Period furniture: beveled strip, live dot, marquee. Fills the floor and
   makes the page feel like a site rather than a single hero image. */
.sbar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;height:56px;
  display:flex;align-items:center;gap:26px;padding:0 16px;
  font:bold 10px/1 var(--font-ui);letter-spacing:.17em;color:#B8CCE4;
  text-transform:uppercase;
  background:linear-gradient(180deg,#2A3348 0,#161C2C 48%,#0D111C 52%,#080B14 100%);
  border-top:1px solid rgba(176,204,238,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 -6px 20px rgba(0,0,0,.6);
  animation:sbarIn .55s cubic-bezier(.2,1,.3,1) 2.15s both;
}
@keyframes sbarIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.sbar__live{display:flex;align-items:center;gap:7px;color:#B8F5A0;flex:0 0 auto}
.sbar__live i{width:8px;height:8px;border-radius:50%;background:#7CFF4F;
  box-shadow:0 0 7px #7CFF4F,inset 0 -1px 1px rgba(0,0,0,.4);animation:blink 1.6s infinite}
.sbar__marq{flex:1;overflow:hidden;white-space:nowrap;
  font:400 22px/1 var(--font-display);letter-spacing:.14em;color:#EAF3FF;
  text-shadow:0 0 12px rgba(140,200,255,.45);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 88%,transparent)}
.sbar__marq span{display:inline-block;padding-left:100%;animation:marq 22s linear infinite}


/* ==========================================================================
   DESKTOP
   Same system as the landing: deep blue ground, glass panels with a bright
   keyline and a gold hairline inside it, Optima set wide, gold for anything
   that reads as trim. The XP-purple/acid-green kit it replaces belonged to the
   old direction and clashed with everything the front door now does.
   ========================================================================== */
.desktop{position:fixed;inset:0;overflow:hidden}
.desktop__bg{position:absolute;inset:0;z-index:0}

/* ---------- desktop icons ------------------------------------------------ */
.icons{position:absolute;top:22px;left:20px;z-index:1;list-style:none;
  display:flex;flex-direction:column;gap:10px}
.icon{
  width:96px;padding:8px 4px;border-radius:6px;
  display:grid;justify-items:center;gap:9px;
  text-align:center;color:#EAF3FF;background:transparent;border:0;
  transition:transform .12s ease;
}
.icon img{
  width:50px;height:50px;padding:13px;object-fit:contain;
  border-radius:4px 13px 4px 13px;
  border:1px solid rgba(158,208,255,.55);
  background:
    linear-gradient(180deg,rgba(226,244,255,.22) 0 44%,rgba(150,205,255,0) 44%),
    linear-gradient(180deg,rgba(30,86,190,.6),rgba(8,26,68,.75));
  box-shadow:inset 0 1px 0 rgba(214,238,255,.45),
             inset 0 0 16px rgba(90,170,255,.2),
             0 0 0 1px rgba(2,8,26,.6),0 8px 18px rgba(0,0,0,.55);
  transition:border-color .12s ease,box-shadow .12s ease,filter .12s ease;
}
.icon span{
  font:400 11.5px/1.3 var(--font-display);letter-spacing:.13em;
  text-shadow:0 1px 3px #000,0 0 12px rgba(120,180,255,.5);
}
.icon:hover,.icon:focus-visible{outline:none;transform:translateY(-2px)}
.icon:hover img,.icon:focus-visible img{
  border-color:var(--gold-l);filter:brightness(1.16);
  box-shadow:inset 0 1px 0 rgba(236,248,255,.7),
             inset 0 0 22px rgba(130,200,255,.32),
             0 0 0 1px rgba(2,8,26,.6),0 10px 22px rgba(0,0,0,.55),
             0 0 24px rgba(201,154,34,.4);
}
.icon:active{transform:translateY(1px)}

/* ---------- windows ------------------------------------------------------ */
.win{
  position:absolute;z-index:10;min-width:280px;
  border-radius:5px 14px 5px 14px;        /* the nav's asymmetric cut, larger */
  background:linear-gradient(180deg,rgba(14,34,74,.97),rgba(6,16,44,.98));
  border:1px solid rgba(158,208,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(214,238,255,.5),
    inset 0 0 40px rgba(60,130,230,.10),
    0 0 0 1px rgba(2,8,26,.7),
    0 26px 70px rgba(0,0,0,.7);
  display:flex;flex-direction:column;overflow:hidden;
}
.win::before{                              /* gold hairline inside the keyline */
  content:'';position:absolute;inset:3px;pointer-events:none;z-index:5;
  border:1px solid rgba(201,154,34,.34);border-radius:3px 11px 3px 11px;
}
.win.is-active{
  border-color:rgba(200,232,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(236,248,255,.7),
    inset 0 0 46px rgba(96,170,255,.16),
    0 0 0 1px rgba(2,8,26,.7),
    0 0 40px rgba(90,150,255,.22),
    0 26px 70px rgba(0,0,0,.7);
}
.win.is-active::before{border-color:rgba(201,154,34,.7)}
.win.is-min{display:none}
.win.is-max{border-radius:0}
.win.is-max::before{border-radius:0}
.win{animation:winIn .22s cubic-bezier(.2,1.2,.4,1)}
@keyframes winIn{
  from{opacity:0;transform:scale(.9) translateY(16px)}
  to  {opacity:1;transform:none}
}
.win.is-closing{animation:winOut .15s ease forwards;pointer-events:none}
@keyframes winOut{to{opacity:0;transform:scale(.93) translateY(10px)}}

.titlebar{
  height:38px;flex:0 0 38px;display:flex;align-items:center;gap:9px;
  padding:0 7px 0 12px;position:relative;
  background:
    linear-gradient(180deg,rgba(196,232,255,.20) 0 42%,rgba(150,205,255,0) 42%),
    linear-gradient(180deg,rgba(24,70,144,.95),rgba(8,24,64,.95));
  border-bottom:1px solid rgba(2,8,26,.8);
  box-shadow:inset 0 1px 0 rgba(214,238,255,.45),0 1px 0 rgba(158,208,255,.22);
  user-select:none;
}
.win.is-active .titlebar{
  background:
    linear-gradient(180deg,rgba(226,244,255,.30) 0 42%,rgba(150,205,255,0) 42%),
    linear-gradient(180deg,rgba(40,104,196,.96),rgba(12,36,92,.96));
}
.titlebar img{width:17px;height:17px;object-fit:contain;opacity:.9}
.titlebar b{
  flex:1;font:400 13px/1 var(--font-display);font-weight:400;
  letter-spacing:.22em;color:#F2FAFF;
  text-shadow:0 0 10px rgba(140,200,255,.7),0 1px 2px rgba(0,6,24,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* thin glyph buttons rather than gel candy */
.tbtn{
  width:24px;height:22px;border-radius:3px;
  border:1px solid rgba(158,208,255,.42);
  background:linear-gradient(180deg,rgba(150,205,255,.16),rgba(10,30,74,.5));
  font:400 12px/1 var(--font-ui);color:#DCEEFF;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.tbtn:hover{background:linear-gradient(180deg,rgba(190,226,255,.3),rgba(20,54,120,.6));
  border-color:rgba(214,238,255,.8);color:#fff}
.tbtn--x:hover{background:linear-gradient(180deg,rgba(255,150,170,.4),rgba(140,14,40,.7));
  border-color:rgba(255,190,200,.9)}

.winbody{position:relative;flex:1;overflow:auto;background:transparent;color:#DCEAFA}
.winbody::-webkit-scrollbar{width:12px}
.winbody::-webkit-scrollbar-track{background:rgba(4,12,34,.6)}
.winbody::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(150,205,255,.5),rgba(30,80,160,.6));
  border-radius:6px;border:2px solid rgba(4,12,34,.6);
}
.winbody::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(200,232,255,.7),rgba(50,110,200,.7))}

.statusbar{
  flex:0 0 24px;display:flex;align-items:center;gap:10px;padding:0 12px;
  font:400 9.5px/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;
  color:#8FA9C8;background:rgba(4,12,34,.75);
  border-top:1px solid rgba(158,208,255,.2);
}

.grip{position:absolute;right:2px;bottom:2px;width:15px;height:15px;cursor:nwse-resize;z-index:6;
  background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(158,208,255,.45) 3px 4px)}

/* ---------- taskbar ------------------------------------------------------ */
.taskbar{
  position:absolute;left:0;right:0;bottom:0;height:var(--taskbar-h);z-index:60;
  display:flex;align-items:center;gap:9px;padding:0 10px 0 0;
  background:linear-gradient(180deg,#2A3348 0,#161C2C 46%,#0D111C 52%,#080B14 100%);
  border-top:1px solid rgba(176,204,238,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 -8px 26px rgba(0,0,0,.65);
}
.startbtn{
  height:calc(100% - 8px);margin-left:6px;
  display:flex;align-items:center;gap:9px;padding:0 20px 0 13px;
  border:1px solid rgba(158,208,255,.6);border-radius:4px 13px 4px 13px;
  font:400 15px/1 var(--font-display);letter-spacing:.2em;color:#F2FAFF;
  text-shadow:0 0 10px rgba(140,200,255,.8),0 1px 2px rgba(0,6,24,.9);
  background:
    linear-gradient(180deg,rgba(196,232,255,.24) 0 42%,rgba(150,205,255,0) 42%),
    linear-gradient(180deg,rgba(30,86,190,.8),rgba(8,26,68,.9));
  box-shadow:inset 0 1px 0 rgba(214,238,255,.5),0 0 18px rgba(90,170,255,.22);
  transition:filter .12s ease,box-shadow .12s ease;
}
.startbtn img{width:20px;height:20px;image-rendering:pixelated}
.startbtn:hover{filter:brightness(1.16);box-shadow:inset 0 1px 0 rgba(236,248,255,.7),0 0 28px rgba(120,190,255,.4)}
.startbtn.is-open{filter:brightness(.92)}

.tasks{flex:1;display:flex;gap:7px;overflow:hidden}
.tab{
  min-width:130px;max-width:200px;height:30px;display:flex;align-items:center;gap:8px;
  padding:0 12px;border-radius:3px 10px 3px 10px;
  border:1px solid rgba(158,208,255,.28);
  background:linear-gradient(180deg,rgba(150,205,255,.12),rgba(10,28,66,.4));
  color:#CFE2F7;font:400 11px/1 var(--font-ui);letter-spacing:.13em;
  white-space:nowrap;overflow:hidden;
  transition:border-color .12s ease,background .12s ease,color .12s ease;
}
.tab img{width:15px;height:15px;flex:0 0 auto;opacity:.9}
.tab span{overflow:hidden;text-overflow:ellipsis}
.tab:hover{border-color:rgba(200,232,255,.6);color:#fff}
.tab.is-active{
  border-color:rgba(201,154,34,.75);color:#FFF6E2;
  background:linear-gradient(180deg,rgba(196,232,255,.22),rgba(24,66,140,.5));
  box-shadow:inset 0 1px 0 rgba(236,248,255,.5),0 0 16px rgba(201,154,34,.28);
}
.tab{animation:tabIn .22s cubic-bezier(.2,1.2,.4,1)}
@keyframes tabIn{from{opacity:0;transform:translateY(10px) scaleX(.7)}to{opacity:1;transform:none}}

.tray{
  display:flex;align-items:center;gap:11px;padding:0 13px;height:30px;
  border-radius:3px 10px 3px 10px;
  background:rgba(2,8,26,.55);border:1px solid rgba(158,208,255,.22);
  font:400 11px/1 var(--font-ui);letter-spacing:.14em;color:#CFE2F7;
}
.tray__ico{width:15px;height:15px;image-rendering:pixelated}

/* ---------- start menu --------------------------------------------------- */
.startmenu{
  position:absolute;left:10px;bottom:calc(var(--taskbar-h) + 8px);z-index:70;width:280px;
  border-radius:5px 14px 5px 14px;overflow:hidden;
  border:1px solid rgba(158,208,255,.6);
  background:linear-gradient(180deg,rgba(14,34,74,.98),rgba(6,16,44,.99));
  box-shadow:inset 0 1px 0 rgba(214,238,255,.4),0 26px 70px rgba(0,0,0,.75),
             0 0 34px rgba(70,140,235,.16);
  animation:menuIn .18s cubic-bezier(.2,1.2,.4,1);
}
@keyframes menuIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.startmenu__head{
  display:flex;align-items:center;gap:11px;padding:13px 15px;color:#F2FAFF;
  font:400 17px/1 var(--font-display);letter-spacing:.2em;
  background:
    linear-gradient(180deg,rgba(226,244,255,.26) 0 42%,rgba(150,205,255,0) 42%),
    linear-gradient(180deg,rgba(40,104,196,.9),rgba(12,36,92,.9));
  border-bottom:1px solid rgba(201,154,34,.4);
  text-shadow:0 0 12px rgba(140,200,255,.7);
}
.startmenu__head img{width:28px;height:28px;image-rendering:pixelated}
.startmenu ul{list-style:none;padding:8px}
.startmenu li{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:3px 9px 3px 9px;
  font:400 12.5px/1 var(--font-ui);letter-spacing:.14em;color:#CFE2F7;
  border:1px solid transparent;
  transition:background .1s ease,border-color .1s ease,color .1s ease;
}
.startmenu li img{width:20px;height:20px;padding:1px}
.startmenu li:hover{
  background:linear-gradient(180deg,rgba(196,232,255,.2),rgba(24,66,140,.5));
  border-color:rgba(201,154,34,.6);color:#FFF6E2;
}
.startmenu__back{
  margin-top:6px;border-top:1px solid rgba(158,208,255,.2)!important;
  border-radius:0 0 3px 9px;color:var(--gold-l)!important;
}
.startmenu__back:hover{border-color:var(--gold)!important}
.startmenu__foot{
  padding:10px 15px;font:400 9px/1 var(--font-ui);letter-spacing:.24em;
  text-transform:uppercase;color:#7C8FAC;
  background:rgba(2,8,26,.6);border-top:1px solid rgba(158,208,255,.18);
}

/* ==========================================================================
   WINDOW CONTENT
   ========================================================================== */

/* ---------- shop --------------------------------------------------------- */
.shop{padding:16px}
.shop__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.prod{
  position:relative;padding:10px;border-radius:3px 11px 3px 11px;
  border:1px solid rgba(158,208,255,.3);
  background:linear-gradient(180deg,rgba(150,205,255,.09),rgba(4,14,40,.5));
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
.prod:hover{border-color:rgba(201,154,34,.75);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.5),0 0 22px rgba(201,154,34,.2)}
.prod__shot{
  aspect-ratio:1;border-radius:2px 8px 2px 8px;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,rgba(150,205,255,.07) 0 11px,rgba(6,18,48,.5) 11px 22px);
  border:1px solid rgba(158,208,255,.22);
}
.prod__shot img{width:62%;image-rendering:pixelated;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.prod h4{font:400 12.5px/1.25 var(--font-display);letter-spacing:.12em;
  margin-top:10px;color:#EAF3FF}
.prod .p{font:400 12px/1 var(--font-ui);letter-spacing:.1em;color:var(--gold-l);margin-top:5px}
.prod .flag{
  position:absolute;top:8px;right:8px;
  font:400 8.5px/1 var(--font-ui);letter-spacing:.18em;
  padding:4px 9px;border-radius:999px;color:#1A1206;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
  border:1px solid rgba(2,8,26,.6);box-shadow:0 0 12px rgba(201,154,34,.5);
}
.buy{
  margin-top:10px;width:100%;padding:9px;border-radius:3px 9px 3px 9px;
  border:1px solid rgba(158,208,255,.5);
  font:400 10px/1 var(--font-ui);letter-spacing:.2em;color:#EAF3FF;
  background:
    linear-gradient(180deg,rgba(196,232,255,.2) 0 44%,rgba(150,205,255,0) 44%),
    linear-gradient(180deg,rgba(26,72,146,.6),rgba(8,24,62,.7));
  transition:filter .12s ease,border-color .12s ease;
}
.buy:hover:not([disabled]){filter:brightness(1.2);border-color:var(--gold-l)}
.buy[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
html.has-tcur .buy[disabled]{cursor:none}

/* ---------- player ------------------------------------------------------- */
.amp{background:transparent;color:#BFE3FF;font-family:var(--font-ui);padding:0}
.amp__lcd{
  margin:12px;padding:13px 15px;border-radius:2px 10px 2px 10px;
  background:rgba(2,10,30,.75);border:1px solid rgba(158,208,255,.3);
  box-shadow:inset 0 0 26px rgba(60,130,230,.14);
}
/* Static, not a marquee: the old one started its cycle off-screen so a title
   was clipped for most of every pass. Ellipsis is honest and always legible. */
.amp__now{display:flex;align-items:center;gap:12px;min-width:0}
.amp__art{
  width:54px;height:54px;flex:0 0 auto;border-radius:2px;
  image-rendering:pixelated;border:1px solid rgba(2,8,26,.7);
  box-shadow:0 4px 12px rgba(0,0,0,.6);
}
.amp__nowtxt{min-width:0;display:flex;flex-direction:column;gap:5px}
.amp__t{font:400 14px/1.15 var(--font-display);letter-spacing:.1em;color:#F2FAFF;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 12px rgba(140,200,255,.45)}
.amp__a{font-size:9.5px;letter-spacing:.16em;color:#7FA8D4;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes marq{to{transform:translateX(-100%)}}
.amp__meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;
  letter-spacing:.14em;color:#7FA8D4;margin-top:9px}
.amp__note{font-size:8.5px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.viz{display:flex;align-items:flex-end;gap:2px;height:36px;margin-top:11px}
.viz i{flex:1;background:linear-gradient(180deg,var(--gold-l),var(--gold) 45%,rgba(120,70,6,.6));
  height:12%;border-radius:1px}
.amp__seek{margin:0 12px}
.amp__seek input[type=range]{width:100%;accent-color:var(--gold)}
.amp__ctl{display:flex;gap:7px;padding:12px;align-items:center}
.amp__ctl button{
  width:40px;height:30px;border-radius:2px 8px 2px 8px;
  border:1px solid rgba(158,208,255,.4);color:#DCEEFF;font-size:12px;
  background:linear-gradient(180deg,rgba(150,205,255,.14),rgba(8,24,62,.6));
}
.amp__ctl button:hover{filter:brightness(1.25);border-color:var(--gold-l)}
.amp__ctl .vol{flex:1;accent-color:var(--gold)}
.amp__albums{position:relative;margin:0 12px 12px;max-height:230px;overflow-y:auto;overflow-x:hidden}
.alb + .alb{margin-top:14px}
.alb__head{
  display:flex;align-items:center;gap:11px;padding:8px 10px;
  border:1px solid rgba(158,208,255,.28);border-radius:2px 10px 2px 10px;
  /* Sticky, so it MUST be opaque -- a translucent fill let the tracklist
     scroll visibly through it. Solid base first, tint layered on top. */
  background:
    linear-gradient(180deg,rgba(150,205,255,.12),rgba(150,205,255,.02)),
    linear-gradient(180deg,#132A57,#0A1836);
  position:sticky;top:0;z-index:3;
  box-shadow:0 6px 14px rgba(2,8,26,.75);
}
.alb__cover{
  width:42px;height:42px;flex:0 0 auto;border-radius:2px;
  image-rendering:pixelated;               /* baked low-res, keep it blocky */
  border:1px solid rgba(2,8,26,.7);
  box-shadow:0 3px 9px rgba(0,0,0,.6);
}
.alb__meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.alb__meta b{font:400 12px/1 var(--font-display);letter-spacing:.16em;color:#EAF3FF;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alb__meta span{font-size:9px;letter-spacing:.14em;color:#7FA8D4;text-transform:uppercase}
.amp__list{list-style:none;position:relative;z-index:1;margin:6px 0 0;
  border:1px solid rgba(158,208,255,.18);border-radius:2px 8px 2px 8px;
  overflow:hidden;background:#060F28}
.amp__list li{display:flex;gap:10px;padding:8px 11px;font-size:11px;letter-spacing:.1em;
  border-bottom:1px solid rgba(158,208,255,.12)}
.amp__list li:hover{background:rgba(150,205,255,.09)}
.amp__list li.is-playing{background:rgba(201,154,34,.16);color:#FFF6E2}
.amp__list .n{color:var(--gold);min-width:20px}
.amp__list .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amp__empty{padding:26px 20px;font-size:12px;line-height:1.8;color:#8FA9C8;
  letter-spacing:.06em;text-align:center}
.amp__empty-h{font:400 15px/1 var(--font-display);letter-spacing:.26em;
  color:#EAF3FF;margin-bottom:12px;text-shadow:0 0 14px rgba(140,200,255,.5)}


/* ---------- twitch ------------------------------------------------------- */
.twp{position:absolute;inset:0;padding:0;background:transparent;color:#DCEAFA;
  display:flex;flex-direction:column}
.twp__player{
  flex:1;min-height:0;position:relative;
  background:#05060C;border-bottom:1px solid rgba(158,208,255,.25);
}
.twp__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.twp__bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 14px;
}
.twp__live{display:inline-flex;align-items:center;gap:9px;
  font:400 12px/1 var(--font-display);letter-spacing:.2em;color:#EAF3FF}
.twp__live i{width:8px;height:8px;border-radius:50%;background:#E21A3C;
  box-shadow:0 0 9px #E21A3C;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.3}}
.twp__cta{
  padding:10px 20px;border-radius:3px 11px 3px 11px;
  border:1px solid rgba(158,208,255,.55);
  font:400 10px/1 var(--font-ui);letter-spacing:.2em;color:#F2FAFF;text-decoration:none;
  background:linear-gradient(180deg,rgba(30,86,190,.75),rgba(8,26,68,.85));
}
.twp__cta:hover{filter:brightness(1.2);border-color:var(--gold-l)}

/* ---------- generic note window ------------------------------------------ */
.pad{padding:18px;font:400 12.5px/1.8 var(--font-ui);letter-spacing:.04em;color:#CFE2F7}
.pad h3{font:400 22px/1 var(--font-display);letter-spacing:.18em;margin-bottom:12px;
  color:#F2FAFF;text-shadow:0 0 14px rgba(140,200,255,.5)}
.pad b{color:#EAF3FF;font-weight:400;letter-spacing:.12em}
.pad code{background:rgba(150,205,255,.12);padding:2px 6px;border-radius:3px;
  font-size:11.5px;color:var(--gold-l)}
.pad a{color:#9FD0FF;text-decoration:none;border-bottom:1px solid rgba(159,208,255,.4)}
.pad a:hover{color:var(--gold-l);border-bottom-color:var(--gold-l)}
.links{list-style:none;margin-top:16px;border-top:1px solid rgba(158,208,255,.22)}
.links li{display:flex;align-items:baseline;gap:12px;padding:11px 2px;
  border-bottom:1px solid rgba(158,208,255,.22)}
.links li a{font:400 13px/1 var(--font-display);letter-spacing:.18em;
  text-decoration:none;flex:0 0 138px;border:0;color:#EAF3FF}
.links li a:hover{color:var(--gold-l)}
.links li span{font-size:11px;color:#7C93B4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ---------- floating-eyeball cursor + trail ------------------------------- */
/* .tcur = position (JS) · __inner = click press · ball/iris/glint are layered
   so the iris can drift inside the sphere while the cornea highlight stays put,
   which is the whole reason it reads as a ball and not a sticker. */
.tcur{
  position:fixed;left:0;top:0;z-index:9999;pointer-events:none;
  width:42px;aspect-ratio:1;
  will-change:transform;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(255,45,110,.45));
  transition:opacity .15s ease;
}
.tcur__inner{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .1s ease}
.tcur.is-down .tcur__inner{transform:scale(.84)}
.tcur__ball{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Trail: a short chain of translucent orbs lagging behind the pointer. Each one
   scales with how fast you are actually moving, so it is a thin whisper when you
   drift and a real comet when you throw the mouse. */
.ttrail{position:fixed;inset:0;z-index:9998;pointer-events:none}
/* the title card is cinematic -- nothing follows the pointer over it */
html.intro-up .tcur,html.intro-up .ttrail{display:none}
.ttrail i{
  position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;opacity:0;
  /* blood red, to match the eyeball it trails from */
  background:radial-gradient(closest-side,
    rgba(255,86,96,.72) 0,rgba(226,20,58,.46) 40%,rgba(150,8,36,.20) 66%,transparent 82%);
  will-change:transform,opacity;
}

/* ---------- mobile ------------------------------------------------------- */
/* Phones are most of a streamer's traffic, so the landing has to hold up at
   360px with a notch and a browser chrome bar eating the viewport. */
@media (max-width:760px){
  .icons{flex-direction:row;flex-wrap:wrap;width:calc(100% - 28px)}
  .win{left:2vw !important;top:2vh !important;width:96vw !important;
       height:calc(100vh - var(--taskbar-h) - 8vh) !important}
  .grip{display:none}
  .tab{min-width:0;flex:1}
  .tab span{display:none}

  /* same trick as desktop: push down by half the height of what sits below
     the mark, so the mark itself lands on the frame's centre line */
  .boot__stage{transform:translateY(clamp(30px,6vh,60px));padding:16px}
  .boot__logo{width:min(88vw,420px)}
  /* the reflection costs a second 22-slice stack and is the first thing to go */
  .refl{display:none}
  .boot__nav{margin-top:clamp(46px,10vh,86px);gap:10px;width:100%;
             flex-direction:column;align-items:center}
  .btn{width:min(84vw,340px);min-width:0}
  .btn span{padding:14px 18px 15px 26px;font-size:14px;letter-spacing:.26em;text-indent:.26em}
  .boot__social{margin-top:30px;gap:16px}
  .soc{width:42px;height:42px}
  .soc svg{width:20px;height:20px}
  /* the slab is the heaviest thing on the page: fewer slices, gentler tilt */
  .station3d{width:min(150vw,150vh);top:50%}
  .station img:nth-child(n+7){display:none}
  .brackets{display:none}
  .intro__in{max-width:none}
  .intro__icon{width:96px;height:96px;margin-bottom:22px}
  .intro__copy{font-size:13.5px}
  .sbar{height:44px;gap:10px;padding:0 10px;font-size:8.5px;letter-spacing:.1em}
  .sbar__marq{display:none}             /* no room for it next to the two labels */
}
/* very small phones */
@media (max-width:400px){
  .boot__logo{width:92vw}
  .btn{width:88vw}
  .sbar__est{display:none}
}
/* landscape phones: almost no height, so drop the vertical stacking */
@media (max-height:520px) and (orientation:landscape){
  .boot__logo{width:min(52vw,380px)}
  .boot__nav{flex-direction:row;margin-top:18px}
  .btn{width:auto;min-width:118px}
  .btn span{padding:10px 14px 11px 22px;font-size:12px}
  .boot__social{margin-top:12px}
  .soc{width:42px;height:42px}
  .refl{display:none}
}
/* pointer:coarse never gets the JS cursor, so it keeps the real one */
@media (pointer:coarse){
  .tcur,.ttrail{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bg-grid,.bg-grain,.boot__grain,.tgrid,.stars i,.spin,.tcur__spin,.tw,
  .flare,.amp__title span,.win,.tab{animation:none}
  .boot__bg,.stars,.spot,.boot__logo,.btn,.boot__social li{animation:none;opacity:1}
}