:root{
  --bg:#0a0a0b;
  --fg:#f2f1ee;
  --dim:rgba(242,241,238,.66);
  --faint:rgba(242,241,238,.16);
  --red:#ff3b30;
  --blue:#4a63ff;
  --violet:#9a5cff;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --osd:"VT323","JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100svh;color:var(--fg);background:#161a17;
  background:radial-gradient(90% 60% at 50% 20%,#34423a,#161a17 70%),#161a17;
  background-attachment:fixed;
  font:400 16px/1.5 var(--display);-webkit-font-smoothing:antialiased;overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
::selection{background:var(--fg);color:var(--bg)}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
.mono{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sq{display:inline-block;width:7px;height:7px;background:currentColor}
.nojs{position:fixed;left:0;right:0;bottom:0;padding:12px;text-align:center;background:#000}

/* ---------- screen ---------- */
.room{position:fixed;inset:0;z-index:1;pointer-events:none}
#bg{position:fixed;left:0;top:0;z-index:0;display:block;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.hot{position:absolute;z-index:3;transform:translate(-50%,-50%);border-radius:50%;pointer-events:auto;cursor:pointer;background:transparent;-webkit-tap-highlight-color:transparent}
.hot{outline:0}
.hot:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.4)}
.hot:hover{box-shadow:none}
.hot-slot{border-radius:6px}
.led{position:absolute;z-index:2;transform:translate(-50%,-50%);border-radius:50%;background:#1b2420;pointer-events:none;transition:background .2s,box-shadow .2s}
.led.on{background:#7dffb4;box-shadow:0 0 6px 1px #3dff95,0 0 16px 3px rgba(60,255,150,.45)}
.room.off .hot-power{animation:beckon 1.8s ease-in-out infinite}
@keyframes beckon{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 4px rgba(255,255,255,.5),0 0 22px rgba(255,255,255,.3)}}
.screen{
  position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:auto;
  width:min(90vw,520px);height:calc(min(90vw,520px) * .75);
  --tw:38cqw;--step:33cqw;
  --fg:#d4f6e8;--dim:rgba(180,232,212,.64);--faint:rgba(170,230,208,.2);
  container-type:size;position:relative;overflow:hidden;
  border-radius:5.5% / 7.5%;background:#050607;
  box-shadow:inset 0 0 50px rgba(0,0,0,.95);
  isolation:isolate;
}
.crt{
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:radial-gradient(90% 70% at 50% 45%,#0f2420 0%,#04100e 78%);text-shadow:0 0 7px rgba(140,255,215,.22);
  transform-origin:center;transition:transform .35s ease-in,opacity .2s .2s,filter .3s;
}
.screen.bw .crt{filter:grayscale(1) contrast(1.12)}
.screen.off .crt{transform:scale(1,.012);opacity:0;filter:brightness(4)}
.screen.off .scan,.screen.off .boot{display:none}
.screen.off{background:#040505}
.scan{
  position:absolute;inset:0;pointer-events:none;z-index:7;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
  animation:flicker 5s infinite steps(1);
}
.scan::after{
  content:"";position:absolute;left:0;right:0;height:22%;top:-25%;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.035),transparent);
  animation:roll 9s linear infinite;
}
.glass{
  position:absolute;inset:0;pointer-events:none;z-index:8;
  background:
    radial-gradient(120% 100% at 50% 45%,transparent 52%,rgba(0,0,0,.6) 100%),
    radial-gradient(16% 11% at 23% 72%,rgba(255,255,255,.045),transparent 72%),
    radial-gradient(9% 15% at 72% 36%,rgba(255,255,255,.035),transparent 72%),
    radial-gradient(34% 5% at 42% 90%,rgba(255,255,255,.03),transparent 72%),
    linear-gradient(158deg,rgba(255,255,255,.09),transparent 26%);
}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:.93}50%{opacity:1}83%{opacity:.96}}
@keyframes roll{to{top:115%}}

/* boot */
.boot{
  position:absolute;inset:0;z-index:6;background:#000;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1.4cqw;
  font:400 max(22px,3.8cqw)/1 var(--osd);letter-spacing:.12em;
}
.screen.booting .boot{display:flex}
.boot-bar{display:block;width:30cqw;height:max(6px,1.1cqw);border:1px solid rgba(255,255,255,.6)}
.boot-bar b{display:block;height:100%;width:0;background:#fff}

/* header */
.s-head{
  display:flex;align-items:center;gap:2cqw;
  padding:2cqw 3cqw;border-bottom:1px solid var(--faint);
  font-size:max(11px,1.4cqw);flex:0 0 auto;
}
.s-logo{border:1px solid var(--fg);border-radius:999px;padding:.4em 1.1em;font-weight:600;font-size:1.1em;letter-spacing:.02em;white-space:nowrap}
.s-logo sup{font-size:.55em;margin-left:2px}
.s-year{color:var(--dim);font-size:.95em}
.s-nav{margin-left:auto;display:flex;gap:1.8cqw}
.s-nav button{
  font-size:1em;color:var(--dim);padding:.5em .2em;position:relative;
  white-space:nowrap;display:inline-flex;align-items:center;
}
.s-nav button:hover{color:var(--fg)}
.s-nav button[aria-current="page"]{color:var(--fg)}
.s-nav button[aria-current="page"]::before{content:"";display:inline-block;flex:none;width:.5em;height:.5em;background:var(--fg);margin-right:.55em}
.s-timer{color:var(--dim);font-size:.95em;min-width:6.5em;text-align:right}

/* stage + views */
.stage{flex:1 1 auto;min-height:0;position:relative}
.view{position:absolute;inset:0;display:none;flex-direction:column}
.view.active{display:flex;animation:tune .5s ease-out}
@keyframes tune{from{opacity:0;filter:brightness(2.4) blur(2px)}to{opacity:1;filter:none}}

/* tapes */
.tapes{
  position:relative;flex:0 0 47%;perspective:90cqw;touch-action:pan-y;
}
.tapes::after{
  content:"";position:absolute;left:4cqw;right:4cqw;top:calc(50% + var(--tw) * 8.5 / 28);
  height:max(3px,.5cqw);background:linear-gradient(#4a4a50,#1b1b1e);border-radius:2px;
  box-shadow:0 10px 24px rgba(0,0,0,.9);
}
.tape{
  position:absolute;left:50%;top:50%;z-index:1;
  width:var(--tw);height:calc(var(--tw) * 16 / 28);
  margin-left:calc(var(--tw) / -2);margin-top:calc(var(--tw) * -8 / 28);
  font-size:calc(var(--tw) / 28);
  display:block;text-align:left;
  border-radius:.9em;
  background:linear-gradient(180deg,#2c2c31,#151517 42%,#0d0d0f);
  box-shadow:0 1.2em 2.4em rgba(0,0,0,.7),inset 0 .1em 0 rgba(255,255,255,.14),inset 0 0 0 1px #000;
  transform:translateX(calc(var(--d,0) * var(--step))) rotateY(calc(var(--d,0) * -32deg)) scale(calc(1 - var(--ad,0) * .24));
  opacity:calc(1 - var(--ad,0) * .45);
  transition:transform .65s cubic-bezier(.2,.7,.1,1),opacity .65s,box-shadow .4s;
  -webkit-tap-highlight-color:transparent;
}
.tape.active{box-shadow:0 1.2em 2.4em rgba(0,0,0,.7),0 0 4em hsl(var(--h) 90% 55% / .22),inset 0 .1em 0 rgba(255,255,255,.18),inset 0 0 0 1px #000}
.tape.far{pointer-events:none}
.tape span,.tape i{display:block}
.sticker{position:absolute;left:2em;right:2em;top:1.3em;height:8.4em;background:#ebe6d6;color:#111;border-radius:.35em;padding:.7em .9em;overflow:hidden}
.t-meta{display:flex!important;justify-content:space-between;font:500 .85em var(--mono);letter-spacing:.08em;color:#5a564b}
.t-name{margin-top:.5em;font:850 2.15em/.95 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em;overflow-wrap:anywhere}
.stripe{position:absolute;left:0;right:0;bottom:0;height:1.5em;background:linear-gradient(90deg,hsl(var(--h) 85% 52%),hsl(calc(var(--h) + 50) 85% 56%))}
.window{position:absolute;left:6em;right:6em;bottom:1em;height:4.2em;background:#08080a;border-radius:.5em;border:1px solid #2c2c30}
.reel{position:absolute;top:50%;width:3em;height:3em;margin-top:-1.5em;border-radius:50%;
  background:radial-gradient(circle,#0a0a0b 0 24%,transparent 25%),repeating-conic-gradient(#cfcfcf 0 22deg,#333 22deg 60deg)}
.reel:first-child{left:.6em}.reel:last-child{right:.6em}
.tape.playing .reel{animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.screw{position:absolute;top:.35em;width:.8em;height:.8em;border-radius:50%;background:#050506;box-shadow:inset 0 .1em 0 rgba(255,255,255,.12)}
.screw.s1{left:.6em}.screw.s2{right:.6em}

.arrow{
  position:absolute;top:calc(47% / 2 - 2.6cqw);z-index:3;width:5.2cqw;height:5.2cqw;min-width:34px;min-height:34px;
  border:1px solid var(--faint);border-radius:50%;display:grid;place-items:center;
  font-size:max(11px,1.4cqw);color:var(--fg);background:rgba(0,0,0,.4);
  transition:background .2s,color .2s;
}
.arrow:hover{background:var(--fg);color:#000}
.arrow.prev{left:2.2cqw}.arrow.next{right:2.2cqw}

.now{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 8cqw;gap:max(5px,.9cqw);
}
.n-count{font-size:max(10px,1.3cqw);color:var(--dim)}
.n-name{
  font:850 max(26px,5cqw)/.95 var(--display);font-stretch:118%;text-transform:uppercase;letter-spacing:-.025em;
  text-shadow:-1px 0 rgba(255,40,70,.5),1px 0 rgba(0,190,255,.5);
}
.n-blurb{max-width:46ch;color:var(--dim);font-size:max(13px,1.7cqw);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.n-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip{
  display:inline-flex;align-items:center;gap:7px;font:400 max(9.5px,1.2cqw) var(--mono);
  letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--faint);border-radius:999px;padding:.35em .9em;color:var(--dim);
}
.chip.status{color:var(--fg)}
.chip.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fg);opacity:.5}
.chip.status.live::before{background:var(--red);opacity:1;box-shadow:0 0 8px var(--red)}
.n-hint{margin-top:auto;padding-bottom:1.6cqw;color:var(--dim);font-size:max(9.5px,1.15cqw)}
.k-touch{display:none}
@media (hover:none){.k-desk{display:none}.k-touch{display:inline}}

/* about / contact */
#view-about,#view-contact{justify-content:center;padding:0 6cqw;gap:2.4cqw}
.label{display:flex;align-items:center;gap:10px;color:var(--dim);font:400 max(10px,1.3cqw) var(--mono);letter-spacing:.08em;text-transform:uppercase}
.big-text{font-size:max(17px,3.1cqw);line-height:1.22;font-weight:500;letter-spacing:-.01em;max-width:28em}
.big-text strong{font-weight:800}
.big-text .serif{font-size:1.12em}
.c-title{font:850 max(34px,7.4cqw)/.92 var(--display);font-stretch:118%;text-transform:uppercase;letter-spacing:-.025em}
.c-title .serif{display:block;font-size:.5em;margin-top:.1em}
.c-links{color:var(--dim);font-size:max(10.5px,1.3cqw)}
.c-links a:hover{color:var(--fg)}
.pill{
  align-self:flex-start;display:inline-flex;align-items:center;gap:1.4em;
  background:var(--fg);color:#0a0a0b;border-radius:999px;padding:.55em .55em .55em 1.3em;
  font-weight:600;font-size:max(14px,2.1cqw);transition:transform .25s;
}
.pill svg{background:#0a0a0b;color:var(--fg);border-radius:50%;padding:.5em;width:1.9em;height:1.9em}
.pill:hover{transform:translateY(-2px)}
.pill.ghost{background:transparent;color:var(--fg);border:1px solid var(--faint)}

/* footer status bar */
.s-foot{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:2cqw;
  padding:1.5cqw 3cqw;border-top:1px solid var(--faint);color:var(--dim);
  font-size:max(9.5px,1.2cqw);
}
.s-foot button{color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.s-foot button:hover,.s-foot a:hover{color:var(--fg)}
.s-foot b{font-weight:500;color:var(--fg)}
#source{max-width:30cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* gameplay loop behind the selected tape (projects with a preview) */
.n-preview{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease}
.n-preview.on{opacity:1}
.n-preview video{width:100%;height:100%;object-fit:cover;opacity:.34;filter:saturate(1.15) contrast(1.05)}
.n-preview::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 66%,rgba(3,6,6,.86),rgba(3,6,6,.35) 70%,rgba(3,6,6,.15)),
  linear-gradient(rgba(3,6,6,.25),rgba(3,6,6,.1) 30%,rgba(3,6,6,.55))}
#view-work>.tapes,#view-work>.now,#view-work>.arrow{position:relative;z-index:1}
#view-work>.arrow{position:absolute;z-index:3}
.chip.watch{color:var(--fg);border-color:rgba(255,255,255,.4);background:none;cursor:pointer;transition:background .2s,color .2s}
.chip.watch:hover{background:var(--fg);color:#000}
.chip.watch .ico{width:1em;height:1em}

/* OSD / player */
.osd{
  position:absolute;inset:0;z-index:5;background:#030406;
  display:none;flex-direction:column;padding:3cqw 4cqw;font-family:var(--osd);
}
.osd.open{display:flex;animation:tune .45s ease-out}
.o-top{display:flex;justify-content:space-between;font-size:max(20px,3.2cqw);letter-spacing:.1em;text-shadow:0 0 6px rgba(255,255,255,.6)}
.o-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:max(8px,1.4cqw)}
.o-title{
  font:850 max(32px,7.4cqw)/.92 var(--display);font-stretch:122%;text-transform:uppercase;letter-spacing:-.03em;
  text-shadow:-2px 0 rgba(255,40,70,.5),2px 0 rgba(0,190,255,.5);overflow-wrap:anywhere;
}
.o-blurb{font:400 max(13px,1.8cqw)/1.4 var(--display);color:var(--dim);max-width:44ch}
.o-chips{display:flex;flex-wrap:wrap;gap:6px}
.o-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--display);margin-top:.4cqw}
.o-note{font:400 max(10px,1.3cqw) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.o-bar{height:max(6px,.9cqw);border:1px solid rgba(255,255,255,.55);margin-top:1cqw}
.o-bar b{display:block;height:100%;width:0;background:#fff;animation:scrub 90s linear forwards}
@keyframes scrub{to{width:100%}}
.osd.has-video{padding:2cqw 2.4cqw 1.6cqw}
.o-video{flex:1;min-height:0;position:relative;margin:1cqw 0 .6cqw;background:#000;cursor:pointer}
.o-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.o-video .o-paused{position:absolute;inset:0;display:none;place-items:center;font-size:max(28px,6cqw);text-shadow:0 0 12px rgba(255,255,255,.6)}
.o-video.paused .o-paused{display:grid}
.o-meta{display:flex;align-items:center;gap:1.4cqw;flex-wrap:wrap}
.o-meta .o-title{font-size:max(18px,3.2cqw);margin-right:auto}
.osd.has-video .o-bar{cursor:pointer;margin-top:.8cqw}
.osd.has-video .o-bar b{animation:none;transition:width .25s linear}
.o-foot{display:flex;justify-content:space-between;font-size:max(15px,2.2cqw);color:var(--dim);letter-spacing:.08em;padding-top:.8cqw}

/* ---------- phone / portrait (class set from JS when the tall backdrop is used) ---------- */
html.tall .screen{--tw:66cqw;--step:50cqw}
html.tall .s-year,html.tall .hide-m{display:none}
html.tall .s-head{gap:3cqw;padding:3cqw 4cqw}
html.tall .s-nav{gap:3.2cqw}
html.tall .s-timer{min-width:0}
html.tall .s-foot{padding:2.6cqw 4cqw}
html.tall .arrow{top:calc(47% / 2 - 17px)}
html.tall .arrow.prev{left:1.5cqw}html.tall .arrow.next{right:1.5cqw}
html.tall .tapes{flex-basis:44%}
html.tall .n-blurb{-webkit-line-clamp:2;font-size:13px;line-height:1.35}
html.tall .n-name{font-size:max(24px,8.5cqw)}
html.tall .now{padding:0 7cqw}
html.tall .osd{padding:5cqw}
html.tall .n-hint{padding-bottom:2.2cqw}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .scan,.scan::after{animation:none}
}


.power{color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.power:hover{color:var(--fg)}
.nojs{position:fixed;left:16px;bottom:16px;z-index:5;font:12px var(--mono);color:#fff}

/* ---------- snake ---------- */
.snake{position:absolute;inset:0;z-index:5;background:#02070a;display:none;flex-direction:column;padding:2.4cqw 3cqw 1.6cqw;font-family:var(--osd)}
.snake.open{display:flex;animation:tune .45s ease-out}
.sn-top{display:flex;justify-content:space-between;align-items:center;gap:2cqw;font:400 max(11px,1.45cqw) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-bottom:1.2cqw}
.sn-top span:first-child{color:var(--fg)}
.sn-top button{font:inherit;letter-spacing:inherit;text-transform:inherit;border:1px solid var(--faint);padding:.3em .8em;border-radius:99px}
.sn-top button:hover{color:var(--fg);border-color:var(--dim)}
.sn-field{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:none}
#snCanvas{display:block;border:1px solid rgba(170,230,208,.35);box-shadow:0 0 22px rgba(120,255,200,.08) inset}
.sn-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-line;font:400 max(16px,2.6cqw)/1.5 var(--osd);letter-spacing:.14em;color:var(--fg);text-shadow:0 0 8px rgba(140,255,215,.5);pointer-events:none}
.sn-hint{font:400 max(10px,1.2cqw) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:center;padding-top:1cqw}
.egg{margin-top:2.2cqw;font:400 max(10px,1.25cqw) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.egg b{color:var(--fg);font-weight:500}
.sn-msg:not(:empty){background:rgba(2,7,10,.74)}

/* ---------- power knob push + floppy disk ---------- */
.knob{position:absolute;z-index:2;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 38% 34%,var(--k0,#4a3a34),var(--k1,#231c1a) 78%);
  box-shadow:0 1px 2px rgba(0,0,0,.35)}
.knob.press{opacity:1;animation:push .34s cubic-bezier(.3,0,.3,1)}
@keyframes push{
  0%{transform:translate(-50%,-50%) scale(1);box-shadow:0 1px 2px rgba(0,0,0,.35)}
  30%{transform:translate(-50%,-47%) scale(.84);filter:brightness(.78);box-shadow:inset 0 2px 4px rgba(0,0,0,.65),0 0 0 2px rgba(0,0,0,.28)}
  60%{transform:translate(-50%,-47%) scale(.86);filter:brightness(.8);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 2px rgba(0,0,0,.25)}
  100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 1px 2px rgba(0,0,0,.35)}
}
.floppy-clip{position:absolute;z-index:2;overflow:hidden;pointer-events:none}
.floppy{position:absolute;left:0;right:0;bottom:0;aspect-ratio:1/1.04;opacity:0;
  background:linear-gradient(160deg,#35508a,#1f3262);border-radius:3% 3% 5% 5%;
  box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.12);will-change:transform}
.floppy::before{content:"";position:absolute;right:0;top:0;width:11%;height:9%;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%);filter:brightness(.6)}
.floppy .fl-label{position:absolute;left:9%;right:9%;top:7%;height:38%;background:#f1ead6;border-radius:2px;box-shadow:inset 0 -3px 0 #e8553a;display:flex;flex-direction:column;justify-content:center;padding:0 7%;font-family:Caveat,cursive;color:#1b2a52;line-height:1}
.floppy .fl-label b{font-size:calc(var(--fw,60px)*.2);font-weight:700}
.floppy .fl-label i{font:normal calc(var(--fw,60px)*.075)/1 var(--mono,monospace);letter-spacing:.08em;opacity:.7;margin-top:6%}
.floppy .fl-shutter{position:absolute;left:24%;right:24%;bottom:0;height:34%;background:linear-gradient(90deg,#9ea3aa,#e7eaee 40%,#aab0b7);border-radius:0 0 2px 2px}
.floppy .fl-shutter::after{content:"";position:absolute;right:16%;top:16%;width:20%;height:56%;background:#12161d;border-radius:1px}
.floppy.in{animation:fl-in .95s cubic-bezier(.45,0,.35,1) forwards}
.floppy.out{animation:fl-out .8s cubic-bezier(.3,0,.25,1) forwards}
@keyframes fl-in{
  0%{opacity:0;transform:translateY(-20%) scale(1.08)}
  22%{opacity:1;transform:translateY(-18%) scale(1)}
  38%{opacity:1;transform:translateY(-18%) scale(1)}
  100%{opacity:1;transform:translateY(104%) scale(1)}
}
@keyframes fl-out{
  0%{opacity:1;transform:translateY(104%)}
  55%{opacity:1;transform:translateY(-18%)}
  80%{opacity:1;transform:translateY(-18%) scale(1)}
  100%{opacity:0;transform:translateY(-26%) scale(1.06)}
}
.led.read{animation:ledread .18s steps(2) 5}
@keyframes ledread{50%{background:#ffb23d;box-shadow:0 0 6px 1px #ff9d1a,0 0 14px 3px rgba(255,160,30,.4)}}

/* ---------- icons + steam ---------- */
.ico{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.ico.fill{fill:currentColor;stroke:none}
.arrow .ico{width:52%;height:52%;min-width:14px;min-height:14px}
.ico-pair{display:inline-flex;gap:.15em;margin-right:.35em;vertical-align:-.05em}
.ico-pair .ico{width:1.05em;height:1.05em}
.steam{position:absolute;z-index:1;pointer-events:none}
@media (prefers-reduced-motion:reduce){.steam{display:none}}