/* ============================================================
   TOKENS — two rooms: engineer (white) / creative (black)
   ============================================================ */
:root{
  --bg:#ffffff; --bg2:#fafafa; --card:#ffffff;
  --ink:#0f0f12; --gray:#6b6f76; --faint:#9aa0a8;
  --hair:rgba(15,15,18,.08); --hair2:rgba(15,15,18,.045);
  --acc:#e2551f; --ok:#22a35c; --amber:#e8a013;
  --pond:226,85,31;
  --dock-bg:rgba(255,255,255,.72);
  --grain-op:.03; --grain-blend:multiply;
  --vig:rgba(15,15,18,.06);
  --shadow-s:0 1px 2px rgba(15,15,18,.05),0 4px 14px -4px rgba(15,15,18,.06);
  --shadow-m:0 2px 4px rgba(15,15,18,.04),0 24px 48px -20px rgba(15,15,18,.14);
  --shadow-l:0 4px 8px rgba(15,15,18,.05),0 40px 80px -32px rgba(15,15,18,.2);
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --hand:'Caveat',cursive;
  --mono:'DM Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
  --dur-1:150ms; --dur-2:300ms; --dur-3:600ms;
}
body.creative{
  --bg:#0A1211; --bg2:#0F1B19; --card:#111D1B;
  --ink:#E6EDE7; --gray:#9FB3AA; --faint:#7F938A;
  --hair:rgba(230,237,231,.14); --hair2:rgba(230,237,231,.06);
  --acc:#FF6B35; --ok:#2DD4BF; --amber:#FF6B35;
  --pond:255,107,53;
  --dock-bg:rgba(10,18,17,.66);
  --grain-op:.09; --grain-blend:overlay;
  --vig:rgba(0,0,0,.30);
  --shadow-s:0 1px 2px rgba(0,0,0,.4),0 4px 14px -4px rgba(0,0,0,.5);
  --shadow-m:0 2px 4px rgba(0,0,0,.4),0 24px 48px -20px rgba(0,0,0,.6);
  --shadow-l:0 4px 8px rgba(0,0,0,.45),0 40px 90px -32px rgba(0,0,0,.75);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
  transition:background-color .55s var(--ease),color .55s var(--ease);
}
::selection{background:var(--acc);color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.wrap{max-width:720px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.skip{position:fixed;top:-60px;left:16px;z-index:200;background:var(--ink);color:var(--bg);
  padding:8px 14px;border-radius:8px;font-size:13px;transition:top .2s}
.skip:focus{top:12px}
/* ---------- fixed atmosphere layers ---------- */
#pond{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(720px 500px at 50% 8%,rgba(226,85,31,.045),transparent 70%);
  transition:background .55s;
}
body.creative #pond{background:radial-gradient(780px 540px at 50% 6%,rgba(255,107,53,.10),transparent 72%),radial-gradient(900px 600px at 85% 100%,rgba(45,212,191,.07),transparent 70%)}
/* vignette: quiet edges so the content carries the room */
body::after{
  content:'';position:fixed;inset:0;z-index:65;pointer-events:none;
  background:radial-gradient(130% 108% at 50% 42%,transparent 56%,var(--vig));
  transition:background .55s;
}
.grain{
  position:fixed;inset:-100px;z-index:70;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transition:opacity .55s;
}
body.creative .grain{animation:grainShift .5s steps(2) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}50%{transform:translate(-3px,2px)}100%{transform:translate(2px,-2px)}}

/* ---------- custom cursor ---------- */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:120;pointer-events:none;border-radius:50%}
.cur-dot{width:7px;height:7px;background:var(--acc);transform:translate(-50%,-50%)}
.cur-ring{
  width:34px;height:34px;border:1.5px solid var(--faint);
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  transition:width .3s var(--spring),height .3s var(--spring),border-color .3s,background-color .3s;
}
.cur-ring .cur-label{
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);opacity:0;transition:opacity .2s;white-space:nowrap;
}
.cur-ring.hov{width:52px;height:52px;border-color:var(--acc)}
.cur-ring.tag{width:64px;height:64px;background:var(--ink);border-color:var(--ink)}
.cur-ring.tag .cur-label{color:var(--bg);opacity:1}
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor [role="button"],
html.has-cursor input,html.has-cursor select,html.has-cursor textarea{cursor:none}
@media(pointer:coarse){.cur-dot,.cur-ring{display:none}}

/* ---------- entrance / reveal ---------- */
.blur-in{opacity:0;filter:blur(10px);transform:translateY(14px);animation:blurIn .9s var(--ease) forwards}
@keyframes blurIn{to{opacity:1;filter:blur(0);transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}
.d4{animation-delay:.35s}.d5{animation-delay:.45s}.d6{animation-delay:.55s}.d7{animation-delay:.68s}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- mode crossfade ---------- */
.page{transition:filter .32s var(--ease),opacity .32s var(--ease),transform .32s var(--ease)}
body.switching .page{filter:blur(16px);opacity:0;transform:scale(.985)}
.only-art{display:none!important}
body.creative .only-art{display:block!important}
body.creative .only-eng{display:none!important}
span.only-art{display:none!important}
body.creative span.only-art{display:inline!important}
body.creative span.only-eng{display:none!important}

/* ---------- header ---------- */
.site-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:24px 0 10px;position:relative;z-index:5;
}
.wordmark{
  font-weight:600;font-size:15px;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:9px;
}
.wordmark .pxl{width:16px;height:16px;flex:none}
.wordmark .pxl rect{fill:var(--acc)}
.head-right{display:flex;align-items:center;gap:10px}
.clock-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray);border:1px solid var(--hair);border-radius:100px;padding:7px 13px;
  background:var(--card);box-shadow:var(--shadow-s);
}
.clock-pill i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.icon-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-s);
  transition:transform .3s var(--spring),border-color .25s;
}
.icon-btn:hover{transform:translateY(-2px);border-color:var(--acc)}
.icon-btn svg{width:15px;height:15px;stroke:var(--gray);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.muted svg{stroke:var(--faint)}
@media(max-width:560px){.clock-pill .lbl{display:none}}

/* ---------- hero (lakshmanan-style) ---------- */
.hero{padding:72px 0 64px}
.avatar{
  width:76px;height:76px;border-radius:50%;position:relative;margin-bottom:34px;
  background:conic-gradient(from 210deg,#ff6b35,#e2551f,#c026d3,#3b82f6,#ff6b35);
  box-shadow:var(--shadow-m);display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--spring);cursor:default;
}
body.creative .avatar{background:conic-gradient(from 210deg,#FF6B35,#0E3B34,#0A1211,#FF6B35)}
.avatar::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.35),transparent 55%)}
.avatar:hover{transform:rotate(-8deg) scale(1.06)}
.avatar.spin{animation:avatarFlip .7s var(--spring)}
@keyframes avatarFlip{to{transform:rotate(360deg)}}
.avatar svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}
.hero h1{
  font-size:clamp(30px,5.6vw,42px);line-height:1.32;font-weight:600;
  letter-spacing:-.03em;text-wrap:balance;margin-bottom:18px;
}
.hero h1 .dim{color:var(--faint);font-weight:500}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.role-wrap{position:relative;display:inline-block}
.role-btn{
  display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:600;letter-spacing:-.02em;
  color:var(--acc);border-bottom:2px dashed color-mix(in srgb,var(--acc) 45%,transparent);
  padding:0 2px 2px;transition:border-color .25s;
}
.role-btn:hover{border-bottom-color:var(--acc)}
.role-btn .chev{
  width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .35s var(--spring);vertical-align:middle;
}
.role-btn .chev svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.role-wrap.open .role-btn .chev{transform:rotate(180deg)}
.role-pop{
  position:absolute;top:calc(100% + 12px);left:0;z-index:50;min-width:250px;
  background:var(--dock-bg);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--hair);border-radius:18px;box-shadow:var(--shadow-l);padding:7px;
  opacity:0;transform:translateY(-8px) scale(.96);filter:blur(6px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .35s var(--spring),filter .3s;
}
.role-wrap.open .role-pop{opacity:1;transform:none;filter:blur(0);pointer-events:auto}
.role-opt{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;
  padding:11px 13px;border-radius:12px;font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  transition:background .2s;
}
.role-opt:hover{background:var(--hair2)}
.role-opt .sw{width:9px;height:9px;border-radius:50%;flex:none;margin-right:2px}
.role-opt .sw.light{background:#fff;box-shadow:0 0 0 1px rgba(15,15,18,.2)}
.role-opt .sw.dark{background:#12100d;box-shadow:0 0 0 1px rgba(236,229,216,.3)}
.role-opt .hint{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.role-opt .you{font-family:var(--hand);font-size:14px;color:var(--acc)}

/* role backdrop: hover opens the menu, the room behind melts away */
.role-veil{
  position:fixed;inset:0;z-index:65;pointer-events:none;opacity:0;
  background:color-mix(in srgb,var(--ink) 10%,transparent);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);backdrop-filter:blur(9px) saturate(1.1);
  transition:opacity .35s var(--ease);
}
body.role-open .role-veil{opacity:1;pointer-events:auto}
body.role-open .page{position:relative;z-index:70} /* lift the page above the veil — menu stays clickable */
body.role-open .hero .sub,body.role-open .hero .facts2{filter:blur(7px)!important} /* !important beats the blur-in fill */
.hero .sub,.facts2{transition:filter .35s var(--ease)}
.hero .sub{font-size:16.5px;line-height:1.75;color:var(--gray);max-width:56ch}
.hero .sub b{color:var(--ink);font-weight:500}
.hero .hand-note{font-family:var(--hand);font-size:19px;color:var(--faint);margin-top:16px;
  display:inline-block;transform:rotate(-1.6deg)}

/* currently / know more */
.facts2{
  display:grid;grid-template-columns:1.4fr 1fr;gap:20px 32px;margin-top:44px;
  padding-top:26px;border-top:1px solid var(--hair2);
}
.facts2 .fk{font-size:15px;color:var(--faint);margin-bottom:7px}
.facts2 .fv{font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.5}
.facts2 .fv a{border-bottom:1px dotted var(--faint);transition:color .2s,border-color .2s;display:inline-flex;align-items:center;gap:7px}
.facts2 .fv a:hover{color:var(--acc);border-color:var(--acc)}
.facts2 .fv a .arr{
  width:22px;height:22px;border-radius:50%;background:var(--hair2);flex:none;
  display:inline-flex;align-items:center;justify-content:center;transition:transform .3s var(--spring),background .25s;
}
.facts2 .fv a:hover .arr{transform:translate(2px,-2px);background:var(--acc)}
.facts2 .fv a .arr svg{width:10px;height:10px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round}
.facts2 .fv a:hover .arr svg{stroke:#fff}
@media(max-width:560px){.facts2{grid-template-columns:1fr}}

/* social circles */
.socials{display:flex;gap:12px;margin-top:36px}
.soc{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--hair);background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-s);
  transition:transform .35s var(--spring),box-shadow .35s,border-color .25s;will-change:transform;
}
.soc:hover{box-shadow:var(--shadow-m);border-color:var(--acc)}
.soc svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- frosted dock ---------- */
.dock{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:2px;padding:6px;
  background:var(--dock-bg);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--hair);border-radius:100px;box-shadow:var(--shadow-m);
}
.dock a{
  position:relative;z-index:1;font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--gray);padding:8px 14px;border-radius:100px;transition:color .25s;white-space:nowrap;
}
.dock a:hover{color:var(--ink)}
.dock a.on{color:var(--ink)}
.dock .pill{
  position:absolute;top:6px;bottom:6px;border-radius:100px;background:var(--bg2);
  border:1px solid var(--hair);transition:left .45s var(--spring),width .45s var(--spring);
  pointer-events:none;
}
.dock .sep{width:1px;height:18px;background:var(--hair);margin:0 6px}
.dock .flip-btn{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);padding:8px 13px;border-radius:100px;transition:background .25s;
}
.dock .flip-btn:hover{background:var(--hair2)}
.dock .flip-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.dock a{padding:8px 9px;font-size:11px}.dock .flip-btn span{display:none}}

/* ---------- dock depth-of-field: blurred floor the dock floats over ---------- */
.dock-fade{
  position:fixed;left:0;right:0;bottom:0;height:132px;z-index:59;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 12%,color-mix(in srgb,var(--bg) 55%,transparent),transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 100%);
  mask-image:linear-gradient(to top,#000 30%,transparent 100%);
}

/* ---------- section frame ---------- */
.sec{padding:20px 0 78px}
.shead{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px;
  padding-bottom:14px;border-bottom:1px solid var(--hair2);
}
.shead .l{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);display:flex;align-items:baseline;gap:12px;
}
.shead .l .hand{font-family:var(--hand);font-size:16px;letter-spacing:0;text-transform:none;color:var(--gray)}
.shead .r{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint);font-variant-numeric:tabular-nums}

/* ---------- shelf: small machines ---------- */
.shelf{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.obj-card{
  position:relative;overflow:hidden;background:var(--card);border:1px solid var(--hair);
  border-radius:24px;padding:22px;box-shadow:var(--shadow-s);
  transition:box-shadow .5s var(--ease),border-color .5s,background-color .55s;
  transform-style:preserve-3d;will-change:transform;
}
.obj-card:hover{box-shadow:var(--shadow-l);border-color:color-mix(in srgb,var(--ink) 18%,transparent)}
.obj-card:active{transform:scale(.99)}
.obj-card .sheen{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--ink) 5%,transparent),transparent 45%);
  transition:opacity .4s;
}
.obj-card:hover .sheen{opacity:1}
.obj-card .oc-top{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.obj-card .oc-top b{color:var(--gray);font-weight:500}
.obj-card .stage{min-height:150px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.obj-card .oc-note{font-family:var(--hand);font-size:15px;color:var(--faint);text-align:center}
@media(max-width:620px){.shelf{grid-template-columns:1fr}}

/* vinyl — me-and-j label, single JS spin driver */
.vinyl{position:relative;width:118px;height:118px}
.vinyl .disc{
  width:100%;height:100%;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#17171a 0 2px,#232327 2px 3px);
  box-shadow:0 14px 28px -12px rgba(15,15,18,.45),inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.vinyl .disc::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 40deg,rgba(255,255,255,.09) 55deg,transparent 75deg 100%)}
.tt-label{
  width:52px;height:52px;border-radius:50%;object-fit:cover;display:block;position:relative;z-index:1;
  box-shadow:inset 0 0 0 2px #f6f4ef,0 0 0 1px rgba(0,0,0,.4);
  -webkit-mask:radial-gradient(circle,transparent 0 4px,#000 5px);
  mask:radial-gradient(circle,transparent 0 4px,#000 5px);
}
.vinyl .arm{
  position:absolute;top:-8px;right:-14px;width:52px;height:3px;border-radius:2px;
  background:#c9cdd4;transform-origin:top right;transform:rotate(-6deg);
  transition:transform .35s cubic-bezier(.3,1.4,.4,1);box-shadow:0 2px 4px rgba(15,15,18,.2);z-index:3;
}
.vinyl.playing .arm{transform:rotate(-32deg)}
.vinyl.cueing .arm{animation:needleDrop .45s cubic-bezier(.3,1.5,.4,1)}
@keyframes needleDrop{0%{transform:rotate(-6deg)}55%{transform:rotate(-35deg)}75%{transform:rotate(-29deg)}100%{transform:rotate(-32deg)}}

/* radio knob (circular drag) + signal bars */
.radio2{display:flex;flex-direction:column;align-items:center;gap:13px}
.knob{
  width:70px;height:70px;border-radius:50%;touch-action:none;user-select:none;
  background:radial-gradient(circle at 34% 28%,var(--card),var(--bg2) 72%);
  border:1px solid var(--hair);position:relative;
  box-shadow:0 10px 20px -8px rgba(15,15,18,.28),inset 0 -3px 6px rgba(15,15,18,.07),
    inset 0 2px 2px rgba(255,255,255,.12);
}
.knob::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:3px;height:15px;border-radius:2px;background:var(--acc)}
.freq{
  font-family:var(--mono);font-size:14px;letter-spacing:.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;background:var(--bg2);border:1px solid var(--hair);
  border-radius:8px;padding:5px 12px;transition:color .25s,border-color .25s;
}
.freq.locked{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.freq small{font-size:8.5px;letter-spacing:.14em;color:var(--faint);margin-left:5px;text-transform:uppercase}
.bars{display:flex;align-items:flex-end;gap:3px;height:26px}
.bars i{width:3px;height:4px;border-radius:1.5px;background:var(--faint);transition:height .12s}
.radio2.locked .bars i{background:var(--acc)}

/* router */
.router2{
  width:158px;background:#1c1d1f;border-radius:14px;padding:15px 15px 11px;
  box-shadow:0 18px 34px -16px rgba(15,15,18,.5),inset 0 1px 0 rgba(255,255,255,.09);
}
.router2 .rface{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.port{position:relative;background:#101112;border-radius:5px;height:26px}
.port::after{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:#33363c;transition:background .3s}
.port.up::after{background:#22a35c;box-shadow:0 0 7px rgba(34,163,92,.9);animation:led 1.9s steps(2) infinite}
.port.up:nth-child(2)::after{animation-duration:1.15s}
.port.up:nth-child(3)::after{animation-duration:2.7s;background:#e8a013;box-shadow:0 0 7px rgba(232,160,19,.9)}
@keyframes led{50%{opacity:.4}}
.router2 .rname{margin-top:10px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:#61646b;text-align:center}
.port .tip{
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:9px;letter-spacing:.05em;
  padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s var(--ease);z-index:5;
}
.port:hover .tip{opacity:1;transform:translateX(-50%) translateY(0)}

/* mini terminal (ginti counts this page) */
.term{
  grid-column:1/-1;background:#111214;border:1px solid rgba(255,255,255,.07);border-radius:24px;
  padding:22px;box-shadow:var(--shadow-m);position:relative;overflow:hidden;
}
.term .t-bar{display:flex;align-items:center;gap:6px;margin-bottom:16px}
.term .t-bar i{width:9px;height:9px;border-radius:50%;background:#2c2e33}
.term .t-bar i:first-child{background:var(--acc)}
.term .t-name{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#565b63}
.term .t-line{font-family:var(--mono);font-size:13px;color:#9aa0a8;line-height:2}
.term .t-line .p{color:var(--acc)}
.term .t-out{font-family:var(--mono);font-size:13px;color:#e8e9eb;display:flex;gap:26px;flex-wrap:wrap;margin-top:4px}
.term .t-out b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.term .t-out .k{color:#71767f;font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:block}
.term .caret{display:inline-block;width:8px;height:15px;background:var(--acc);vertical-align:-2px;
  animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.term .t-foot{margin-top:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:#565b63}

/* ---------- cases (shipped systems) ---------- */
.cases{display:flex;flex-direction:column;gap:18px}
.case{
  position:relative;overflow:hidden;display:block;background:var(--card);
  border:1px solid var(--hair);border-radius:26px;padding:30px 30px 26px;
  box-shadow:var(--shadow-s);
  transition:box-shadow .5s var(--ease),border-color .5s,transform .5s var(--ease),background-color .55s;
}
.case:hover{box-shadow:var(--shadow-l);border-color:color-mix(in srgb,var(--ink) 18%,transparent);transform:translateY(-3px)}
.case:active{transform:translateY(-1px) scale(.995)}
.case .sheen{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--ink) 5%,transparent),transparent 45%);transition:opacity .4s;
}
.case:hover .sheen{opacity:1}
.case .c-top{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.case .c-top .go{
  display:inline-flex;align-items:center;gap:6px;color:var(--gray);
  border:1px solid var(--hair);border-radius:100px;padding:5px 12px;background:var(--card);
  transition:color .25s,border-color .25s,transform .35s var(--spring);
}
.case:hover .c-top .go{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,transparent);transform:translateX(2px)}
.case .c-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.case h3{font-size:26px;font-weight:600;letter-spacing:-.025em}
.case .c-note{font-family:var(--hand);font-size:18px;color:var(--faint)}
.case .c-metric{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--acc);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.case .pri{display:grid;grid-template-columns:64px 1fr;gap:4px 18px;margin-top:20px;
  padding-top:20px;border-top:1px solid var(--hair2)}
.case .pri dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding-top:3px}
.case .pri dd{font-size:14px;line-height:1.65;color:var(--gray)}
.case .pri dd b{color:var(--ink);font-weight:500}
.case .c-foot{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.case .c-foot span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray);background:var(--bg2);border:1px solid var(--hair2);
  padding:5px 11px;border-radius:100px;
}

/* ---------- creative: sounds ---------- */
.albums{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.album{
  position:relative;overflow:hidden;background:var(--card);border:1px solid var(--hair);
  border-radius:24px;padding:22px;box-shadow:var(--shadow-s);display:block;
  transition:box-shadow .5s var(--ease),border-color .5s,transform .5s var(--ease);
}
.album:hover{box-shadow:var(--shadow-l);transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.album .a-art{
  width:100%;aspect-ratio:1;border-radius:16px;margin-bottom:16px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:14px;
}
.album .a-art .a-tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);padding:4px 9px;border-radius:100px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.album h3{font-size:16.5px;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.album .a-meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.album .a-play{
  position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;
  background:var(--acc);display:flex;align-items:center;justify-content:center;
  transform:scale(.6);opacity:0;transition:transform .35s var(--spring),opacity .25s;
}
.album:hover .a-play{transform:scale(1);opacity:1}
.album .a-play svg{width:12px;height:12px;fill:#fff;stroke:none}
@media(max-width:620px){.albums{grid-template-columns:1fr}}

/* track rows */
.tracks{border-top:1px solid var(--hair2)}
.track{
  display:flex;align-items:center;gap:16px;padding:14px 6px;border-bottom:1px solid var(--hair2);
  transition:padding-left .35s var(--spring),background .25s;position:relative;
}
.track:hover{padding-left:14px;background:var(--hair2)}
.track .t-no{font-family:var(--mono);font-size:10px;color:var(--faint);width:22px;font-variant-numeric:tabular-nums}
.track .t-name{font-size:15px;font-weight:500;letter-spacing:-.01em;flex:1}
.track .t-alb{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.track .eq{display:flex;align-items:flex-end;gap:2px;height:14px;width:20px;opacity:0;transition:opacity .25s}
.track:hover .eq{opacity:1}
.track .eq i{width:3px;background:var(--acc);border-radius:1px;animation:eq .7s ease-in-out infinite}
.track .eq i:nth-child(2){animation-delay:.18s}
.track .eq i:nth-child(3){animation-delay:.36s}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}
.track .t-arr{font-family:var(--mono);font-size:11px;color:var(--faint);transition:color .2s,transform .3s var(--spring)}
.track.previewing{background:var(--hair2);padding-left:14px}
.track.previewing .eq{opacity:1}
.track:hover .t-arr{color:var(--acc);transform:translate(2px,-2px)}

/* sequencer toy */
.seq{
  margin-top:16px;background:var(--card);border:1px solid var(--hair);border-radius:24px;
  padding:22px;box-shadow:var(--shadow-s);position:relative;overflow:hidden;
}
.seq .q-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.seq .q-top b{color:var(--gray);font-weight:500}
.pads{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.pad{
  aspect-ratio:1;border:1px solid var(--hair);border-radius:8px;background:var(--bg);
  padding:0;transition:background .15s,border-color .15s,transform .1s;
}
.pad:hover{border-color:var(--faint)}
.pad.on{background:var(--acc);border-color:var(--acc)}
.pad.on:hover{background:var(--acc)}
.pad.play{transform:scale(.86)}
.seq .q-foot{display:flex;align-items:center;gap:12px;margin-top:16px}
.seqbtn{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);border:1px solid var(--hair);border-radius:100px;padding:7px 18px;
  transition:color .2s,border-color .2s,background .2s;
}
.seqbtn:hover{color:var(--ink);border-color:var(--ink)}
.seqbtn.playing{color:var(--acc);border-color:var(--acc)}
.seq .q-note{margin-left:auto;font-family:var(--hand);font-size:15px;color:var(--faint)}

/* ---------- creative: verses ---------- */
.poem-card{
  background:var(--card);border:1px solid var(--hair);border-radius:24px;padding:30px;
  box-shadow:var(--shadow-s);position:relative;overflow:hidden;
}
.poem-card .p-kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:18px;display:flex;justify-content:space-between;gap:10px}
.poem-card .p-kicker button{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);border-bottom:1px dashed color-mix(in srgb,var(--acc) 50%,transparent);padding-bottom:2px;
  transition:border-color .2s}
.poem-card .p-kicker button:hover{border-color:var(--acc)}
.poem-card blockquote{
  font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.75;color:var(--ink);
  letter-spacing:-.005em;white-space:pre-line;min-height:120px;
  transition:opacity .3s var(--ease),filter .3s;
}
.poem-card blockquote.fading{opacity:0;filter:blur(6px)}
.poem-card cite{display:block;margin-top:16px;font-style:normal;font-family:var(--mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ---------- creative: pinned wall (shwn steal) ---------- */
.wall{position:relative;height:330px;margin-top:6px}
.pin-card{
  position:absolute;width:230px;border-radius:14px;padding:18px 18px 16px;
  background:linear-gradient(160deg,#1d1c1a,#121110);border:1px solid rgba(236,229,216,.1);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.55);color:#ece5d8;
  transition:transform .5s var(--spring),box-shadow .5s;will-change:transform;
  touch-action:none;user-select:none;
}
.pin-card:hover{box-shadow:0 34px 70px -20px rgba(0,0,0,.7)}
.pin-card .pc-k{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#7a7264;margin-bottom:10px}
.pin-card .pc-t{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.pin-card .pc-s{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:#9c9484;margin-top:6px}
.pin-card .pc-art{height:64px;border-radius:9px;margin-bottom:12px;position:relative;overflow:hidden}
.pin-card .pc-arr{position:absolute;bottom:12px;right:14px;font-family:var(--mono);font-size:12px;color:#7a7264;
  transition:color .2s,transform .3s var(--spring)}
.pin-card:hover .pc-arr{color:var(--acc);transform:translate(2px,-2px)}
/* push pin */
.pushpin{
  position:absolute;top:-11px;left:22px;width:22px;height:22px;z-index:3;pointer-events:none;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));
}
/* binder clip */
.binder{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:38px;height:30px;z-index:3;pointer-events:none;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));
}
.wall-note{position:absolute;right:0;bottom:-6px;font-family:var(--hand);font-size:17px;color:var(--faint);
  transform:rotate(-2deg)}
@media(max-width:640px){.wall{height:auto;display:flex;flex-direction:column;gap:14px}
  .pin-card{position:relative;width:100%!important;left:auto!important;top:auto!important;transform:none!important;touch-action:pan-y}}

/* ---------- creative: frames (cinema) ---------- */
.frames{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.frame{
  aspect-ratio:3/4;border-radius:14px;border:1px solid var(--hair);
  display:block;position:relative;background:var(--bg2);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  transition:border-color .3s,transform .4s var(--spring);
}
.frame:hover{border-color:var(--acc);transform:translateY(-4px)}
.frame .f-no{font-size:15px;color:var(--faint);font-family:var(--serif);font-style:italic}
.frames-note{margin-top:14px;font-size:14px;color:var(--gray)}
.frames-note a{border-bottom:1px dotted var(--faint);transition:color .2s,border-color .2s}
.frames-note a:hover{color:var(--acc);border-color:var(--acc)}

/* ---------- elsewhere rows ---------- */
.rows{border-top:1px solid var(--hair2)}
.row{
  display:flex;align-items:center;gap:18px;padding:19px 6px;border-bottom:1px solid var(--hair2);
  transition:padding-left .35s var(--spring),background .25s;
}
.row:hover{padding-left:16px;background:var(--hair2)}
.row .r-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);width:86px;flex:none}
.row .r-t{font-size:16.5px;font-weight:500;letter-spacing:-.015em;flex:1}
.row .r-s{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--faint)}
.row .r-arr{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--hair);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .35s var(--spring),background .25s,border-color .25s;
}
.row .r-arr svg{width:11px;height:11px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.row:hover .r-arr{transform:translate(3px,-3px);background:var(--acc);border-color:var(--acc)}
.row:hover .r-arr svg{stroke:#fff}
@media(max-width:560px){.row .r-s{display:none}.row .r-k{width:70px}}

/* ---------- contact ---------- */
.contact{padding:34px 0 90px;text-align:center}
.contact .hand-k{font-family:var(--hand);font-size:21px;color:var(--faint);margin-bottom:16px;display:inline-block;transform:rotate(-2deg)}
.contact h2{font-size:clamp(28px,5vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.25;max-width:20ch;margin:0 auto 30px}
.contact h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--acc)}
.mailbtn{
  display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;border-radius:100px;padding:16px 30px;
  box-shadow:var(--shadow-m);transition:background .3s;will-change:transform;
}
.mailbtn:hover{background:var(--acc)}
.mailbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact .c-sub{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--hair2);padding:30px 0 110px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.footer .f-l{font-size:13.5px;color:var(--gray)}
.footer .f-l b{color:var(--ink);font-weight:500}
.footer .f-quote{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--faint);
  transition:opacity .4s,filter .4s}
.footer .f-quote.fading{opacity:0;filter:blur(4px)}
.footer .f-r{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.footer .f-r kbd{border:1px solid var(--hair);border-radius:5px;padding:2px 7px;font-family:inherit;background:var(--bg2)}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:86px;left:50%;transform:translateX(-50%) translateY(12px);z-index:95;
  background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  padding:11px 20px;border-radius:100px;box-shadow:var(--shadow-l);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .35s var(--spring);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- touch devices: backdrop blur is expensive — swap for opacity ---------- */
@media(pointer:coarse){
  body{--dock-bg:rgba(255,255,255,.94)}
  body.creative{--dock-bg:rgba(10,18,17,.94)}
  .dock,.role-pop{-webkit-backdrop-filter:none;backdrop-filter:none}
  .dock-fade{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;
    animation-delay:0s!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  .blur-in{opacity:1;filter:none;transform:none;animation:none}
  .rv{opacity:1;transform:none}
}

/* ---------- late additions: js-driven states ---------- */
.bars i.on{background:var(--gray)}
.radio2.locked .bars i.on{background:var(--acc)}
.pin-card{transition:box-shadow .35s,transform .55s var(--spring)}
.pin-card.dragging{transition:box-shadow .2s;z-index:30;box-shadow:0 40px 80px -18px rgba(0,0,0,.75)}
.poem-card .p-kicker span,.poem-card cite{transition:opacity .3s var(--ease),filter .3s}
.poem-card .p-kicker span.fading,.poem-card cite.fading{opacity:0;filter:blur(4px)}

/* ============================================================
   ROUND 3 — "unfold" pass: hot orange, gradient role, dot art
   ============================================================ */

/* ---------- bloom layer removed: grain + vignette carry the atmosphere ---------- */

/* ---------- gradient role word (engineer room only) ---------- */
.role-btn .only-eng{
  background:linear-gradient(92deg,#e2551f 0%,#d6458f 38%,#8b5cf6 68%,#3b82f6 100%);
  background-size:230% 100%;background-position:0% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  transition:background-position .7s var(--ease);
}
.role-btn:hover .only-eng{background-position:96% 0}

/* ---------- case pixel thumbs: cream tiles, crisp pixels ---------- */
.c-px{
  margin-left:auto;align-self:flex-start;width:48px;height:48px;flex:none;
  background:#f6f1e4;border:1px solid var(--hair);border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-s);transition:transform .4s var(--spring);
}
.case:hover .c-px{transform:rotate(-4deg) scale(1.07)}
.c-px svg{width:30px;height:30px;shape-rendering:crispEdges}

/* ---------- pin-card dot-dither headers ---------- */
.pc-art.d-sc{background:#171310}
.pc-art.d-lb{background:#141214}
.pc-art.d-wr{background:#17140f}
.pc-dither{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- real artwork: album covers + cinema posters ---------- */
.a-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.album .a-art .a-tag{position:relative;z-index:1}
.frame{overflow:visible;padding:0}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;transition:transform .6s var(--ease)}
.frame:hover img{transform:scale(1.045)}


/* ============================================================
   ROUND 4 — motion spec + micro pass
   one easing language · entrances cascade · links slide · presses compress
   ============================================================ */

/* hairlines draw themselves in on reveal */
.rv .shead{border-bottom-color:transparent;position:relative}
.rv .shead::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--hair2);transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s var(--ease) .12s;
}
.rv.in .shead::after{transform:scaleX(1)}

/* underline slide — links wipe on, not blink */
.row .r-t,.fv a,.case .go{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--dur-2) var(--ease),color .25s,letter-spacing var(--dur-2) var(--ease),
    transform .25s var(--ease),border-color .25s;
}
.row:hover .r-t,.fv a:hover,.case .go:hover{background-size:100% 1px}
.case .go:hover{letter-spacing:.1em}

/* presses need a transform channel to feel like springs, not snaps */
.dock .flip-btn{transition:background .25s,transform var(--dur-1) var(--ease)}
.seqbtn{transition:transform var(--dur-1) var(--ease),background .25s,color .25s,border-color .25s}

/* press states — everything compresses a little */
.dock a:active,.flip-btn:active,.icon-btn:active,.seqbtn:active,
.role-opt:active,.row:active,.track:active{transform:scale(.96)}
.album:active{transform:scale(.985)}

/* letter-track on dock labels */
.dock a{transition:color .25s,letter-spacing var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.dock a:hover{letter-spacing:.05em}

/* stagger cascades — entrance runs as keyframes so resting transforms stay free for hover/JS */
.rv .case,.rv .row,.rv .track,.rv .album,.rv .obj-card{opacity:0}
.rv.in .case,.rv.in .row,.rv.in .track,.rv.in .album,.rv.in .obj-card{
  opacity:1;animation:casIn var(--dur-3) var(--ease) backwards;
}
.rv.in .obj-card{animation-name:casFade}
@keyframes casIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes casFade{from{opacity:0}to{opacity:1}}
.rv.in :is(.case,.row,.track,.album,.obj-card):nth-child(1){animation-delay:.02s}
.rv.in :is(.case,.row,.track,.album,.obj-card):nth-child(2){animation-delay:.08s}
.rv.in :is(.case,.row,.track,.album,.obj-card):nth-child(3){animation-delay:.14s}
.rv.in :is(.case,.row,.track,.album,.obj-card):nth-child(4){animation-delay:.20s}
.rv.in :is(.case,.row,.track,.album,.obj-card):nth-child(5){animation-delay:.26s}
.rv.in :is(.case,.row,.track,.album,.obj-card):nth-child(n+6){animation-delay:.32s}

/* ---------- mail: plain mailto anchor (copy theatre removed) ---------- */
.mailbtn .i-mail{transition:transform .4s var(--spring)}
.mailbtn:hover .i-mail{transform:translateY(-1px)}

/* ---------- keymap overlay ---------- */
.keymap{
  position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:90;
  transform:translateX(-50%) translateY(14px) scale(.97);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--spring);
}
.keymap.on{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto}
.km-card{
  background:var(--card);border:1px solid var(--hair);border-radius:18px;
  box-shadow:var(--shadow-l);padding:15px 18px 12px;min-width:232px;
}
.km-top{
  display:flex;justify-content:space-between;gap:18px;margin-bottom:9px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.km-top b{color:var(--gray);font-weight:500}
.km-row{display:flex;align-items:center;gap:12px;padding:4px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--gray)}
.km-row kbd{
  min-width:28px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--ink);
  background:var(--bg2);border:1px solid var(--hair);border-bottom-width:2px;border-radius:6px;padding:2px 7px;
}
.footer kbd{
  font-family:var(--mono);font-size:9.5px;color:var(--ink);
  background:var(--bg2);border:1px solid var(--hair);border-bottom-width:2px;border-radius:5px;padding:1px 6px;
}

/* ---------- split-flap clock ---------- */
#clock .flap{display:inline-block}
#clock .flap.tick{animation:flapTick .22s steps(2) backwards}
@keyframes flapTick{from{transform:rotateX(80deg);opacity:.2}to{transform:rotateX(0);opacity:1}}

/* ---------- turntable: real music ---------- */
.vinyl.playing .disc{animation:none} /* spin-up is eased in JS, not CSS */
.oc-note.live{color:var(--acc)}
.oc-note .tt-t{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}

/* ---------- camera: photo prints ---------- */
.cam{width:104px;cursor:pointer;transition:transform .3s var(--spring)}
.cam:hover{transform:translateY(-2px)}
.cam:active{transform:scale(.95)}
.cam svg{width:100%;height:auto;display:block;overflow:visible}
.cam svg rect,.cam svg circle{fill:none;stroke:var(--gray);stroke-width:2.4}
.cam svg rect.flash-win{fill:var(--gray);stroke:none}
.cam .lens-in{stroke:var(--faint);transform-box:fill-box;transform-origin:center}
.cam .lens-dot{fill:var(--acc);stroke:none}
.cam.shooting .lens-in{animation:aperture .5s steps(3) 1}
@keyframes aperture{0%{transform:scale(1)}40%{transform:scale(.4)}100%{transform:scale(1)}}
.cam-stage{flex-direction:column;gap:10px;min-height:190px}
.prints{position:relative;width:132px;height:108px;flex:none}
.print{
  position:absolute;left:0;top:0;width:132px;background:#f6f4ef;border:1px solid var(--hair);
  border-radius:6px;padding:7px 7px 20px;box-shadow:var(--shadow-m);
  transform:translateY(-14px) rotate(-3deg);opacity:0;
  transition:transform .6s var(--spring),opacity .4s;
  pointer-events:none;
}
.print.developed{transform:translateY(0) rotate(-3deg);opacity:1}
.print canvas,.print img{width:100%;height:74px;display:block;border-radius:3px;background:#17171a;image-rendering:pixelated;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 45%,#000 62%,transparent 98%);
  mask-image:radial-gradient(120% 120% at 50% 45%,#000 62%,transparent 98%)}
.print img{object-fit:cover;image-rendering:auto}
.print figcaption{
  position:absolute;left:0;right:0;bottom:4px;text-align:center;
  font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;color:#6b6f76;text-transform:uppercase;
}
.print:nth-child(2){transform:translateY(-14px) rotate(2.5deg)}
.print:nth-child(2).developed{transform:translateY(-6px) rotate(2.5deg)}
.print:nth-child(3){transform:translateY(-14px) rotate(-6deg)}
.print:nth-child(3).developed{transform:translateY(-12px) rotate(-6deg)}
.cam-flash{
  position:fixed;inset:0;z-index:110;background:#fff;opacity:0;pointer-events:none;
}
.cam-flash.go{animation:camflash .45s steps(3) 1}
@keyframes camflash{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}

/* ---------- projector: cinema posters only ---------- */
.frames{margin-top:64px} /* room for the hovering rig */
.frame{perspective:480px;overflow:visible}
.frame img{border-radius:12px} /* keep corners clipped now that the frame itself is open */
.frame .beam{
  position:absolute;left:50%;top:-46px;width:120px;height:64px;z-index:3;pointer-events:none;
  transform:translateX(-50%) perspective(220px) rotateX(42deg) scaleY(.55);transform-origin:50% 0;
  background:linear-gradient(to bottom,rgba(255,244,214,.5),rgba(255,244,214,.06) 75%,transparent);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  opacity:0;transition:opacity .45s var(--ease),transform .5s var(--ease);
}
.frame .rig{
  position:absolute;left:50%;top:-58px;width:64px;height:26px;z-index:4;pointer-events:none;
  transform:translateX(-50%) translateZ(40px);
  opacity:0;transition:opacity .45s var(--ease),transform .45s var(--spring);
}
.frame .rig svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4))}
.frame .rig rect,.frame .rig circle{fill:none;stroke:var(--gray);stroke-width:2.4}
.frame .rig .proj-lens{fill:var(--acc);stroke:none}
.frame:hover .beam,.frame:focus-within .beam{opacity:1;transform:translateX(-50%) perspective(220px) rotateX(42deg) scaleY(1)}
.frame:hover .rig,.frame:focus-within .rig{opacity:1;transform:translateX(-50%) translateZ(58px)}
.frame:hover img{animation:projFlick .55s steps(3) 1}
@keyframes projFlick{
  0%{filter:brightness(1.6) saturate(0)}
  30%{filter:brightness(.65)}
  55%{filter:brightness(1.25) saturate(.4)}
  100%{filter:none}
}