/* OCTA — anodised graphite, antique brass, one ink stamp.
 * Mobile-first. The whole interface is one physical object: a pressed insignia case. */

:root{
  --plate-0:#0B0C10;      /* deepest anodised */
  --plate-1:#12141A;      /* body */
  --plate-2:#191C24;      /* raised */
  --plate-3:#22262F;      /* raised + */
  --edge-hi:rgba(255,255,255,.10);
  --edge-lo:rgba(0,0,0,.65);
  --ink:#EEF0F4;
  --ink-2:#A3A9B6;
  --ink-3:#6C7383;
  --brass:#C79A3B;
  --brass-hi:#F0D68C;
  --brass-lo:#8A6721;
  --stamp:#B4392E;
  --steel:#6E86A8;
  --ok:#7FA86B;
  --r:14px;
  --pad:18px;
  --tab-h:calc(58px + env(safe-area-inset-bottom));
  --f-disp:'Archivo',system-ui,sans-serif;
  --f-body:'Archivo',system-ui,sans-serif;
  --f-mono:'DM Mono',ui-monospace,monospace;
  --f-serif:'Instrument Serif',Georgia,serif;
}
:root[data-mode="light"]{
  --plate-0:#E7E4DD; --plate-1:#F2F0EA; --plate-2:#FBFAF7; --plate-3:#FFFFFF;
  --edge-hi:rgba(255,255,255,.9); --edge-lo:rgba(31,28,22,.14);
  --ink:#1A1C22; --ink-2:#575D69; --ink-3:#8A9099;
  --brass:#8A6721; --brass-hi:#B98F35; --brass-lo:#6A4E14;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--plate-1); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
/* machined ground + vignette */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(199,154,59,.10), transparent 60%),
    radial-gradient(100% 70% at 50% 110%, rgba(0,0,0,.5), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px);
}
:root[data-mode="light"] body::before{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(199,154,59,.16), transparent 60%),
    radial-gradient(100% 70% at 50% 110%, rgba(31,28,22,.10), transparent 60%),
    repeating-linear-gradient(115deg, rgba(31,28,22,.02) 0 1px, transparent 1px 4px);
}
/* film grain */
#grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(2) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-1.5%,1%)}100%{transform:translate(1%,-1.5%)}}

h1,h2,h3,.disp{font-family:var(--f-disp);font-weight:700;font-stretch:112%;letter-spacing:-.01em;margin:0}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum"}
.eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.rank .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:.01em}
.brass{color:var(--brass)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------- STRUCTURE */
#app{position:relative;z-index:2;max-width:520px;margin:0 auto;min-height:100%;
  padding:0 var(--pad) calc(var(--tab-h) + 28px);}
header.top{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 0 10px;
  background:linear-gradient(var(--plate-1) 62%,transparent);
}
.mark{width:26px;height:26px;flex:0 0 auto}
.top .name{font-family:var(--f-disp);font-weight:700;font-stretch:118%;font-size:15px;letter-spacing:.02em;text-transform:uppercase}
.top .sub{font-family:var(--f-mono);font-size:10px;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase}
.top .sp{flex:1}
.iconbtn{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:var(--ink-2);
  border:1px solid transparent}
.iconbtn:active{background:var(--plate-2);border-color:var(--edge-hi)}

/* the plate: every raised surface in the app */
.plate{
  position:relative;background:linear-gradient(180deg,var(--plate-3),var(--plate-2));
  border-radius:var(--r);padding:16px;margin:0 0 12px;
  box-shadow:inset 0 1px 0 var(--edge-hi), 0 1px 0 var(--edge-lo), 0 10px 26px -18px rgba(0,0,0,.9);
  border:1px solid rgba(255,255,255,.045);
}
:root[data-mode="light"] .plate{border-color:rgba(31,28,22,.09)}
.plate.flat{background:transparent;box-shadow:none;border:1px dashed rgba(255,255,255,.09)}
.plate h3{font-size:13.5px;text-transform:uppercase;letter-spacing:.08em;font-stretch:118%}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.muted{color:var(--ink-2);font-size:13.5px}
.tiny{font-size:11.5px;color:var(--ink-3)}
hr.hair{border:0;border-top:1px solid rgba(255,255,255,.06);margin:14px -16px}
:root[data-mode="light"] hr.hair{border-color:rgba(31,28,22,.08)}

/* ------------------------------------------------------------------ VIEWS */
.view{display:none;animation:rise .42s cubic-bezier(.16,1,.3,1) both}
.view.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stagger>*{animation:rise .5s cubic-bezier(.16,1,.3,1) both}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.07s}
.stagger>*:nth-child(3){animation-delay:.12s}
.stagger>*:nth-child(4){animation-delay:.17s}
.stagger>*:nth-child(5){animation-delay:.22s}
.stagger>*:nth-child(6){animation-delay:.27s}

/* ------------------------------------------------------------------- RANK */
.rank{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
.ringwrap{position:relative;width:96px;height:96px}
.ringwrap svg{transform:rotate(-90deg)}
.ringwrap .lvl{position:absolute;inset:0;display:grid;place-items:center;gap:0}
.ringwrap .lvl b{font-family:var(--f-disp);font-size:30px;font-stretch:118%;line-height:.9;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass) 55%,var(--brass-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ringwrap .lvl i{font-family:var(--f-mono);font-style:normal;font-size:8.5px;letter-spacing:.18em;color:var(--ink-3)}
.rank .title{font-family:var(--f-disp);font-size:25px;font-stretch:118%;line-height:1.02;text-transform:uppercase}
.xpline{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);margin-top:5px}

/* CTA — the one glowing choice */
.cta{
  position:relative;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:17px;border-radius:13px;font-family:var(--f-disp);font-weight:700;font-stretch:118%;
  text-transform:uppercase;letter-spacing:.06em;font-size:15px;color:#20180A;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass) 48%,var(--brass-lo));
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -1px 0 rgba(0,0,0,.35) inset,
             0 12px 30px -14px rgba(199,154,59,.75);
  transition:transform .12s cubic-bezier(.16,1,.3,1),box-shadow .2s;
}
.cta:active{transform:translateY(2px) scale(.994);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 16px -12px rgba(199,154,59,.6)}
.cta svg{width:19px;height:19px;flex:0 0 auto}
:root[data-mode="light"] .cta:not(.ghost){background:linear-gradient(180deg,#F4DE9E,#D2A63F 46%,#A87F27);color:#241A05;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -1px 0 rgba(0,0,0,.22) inset,0 12px 30px -16px rgba(138,103,33,.7)}
.cta.ghost{background:none;color:var(--ink);border:1px solid rgba(255,255,255,.14);box-shadow:none}
:root[data-mode="light"] .cta.ghost{border-color:rgba(31,28,22,.16)}
.cta.sm{padding:12px;font-size:13px}

/* ---------------------------------------------------------------- LEDGER */
.led{display:flex;gap:11px;padding:11px 0;border-top:1px solid rgba(255,255,255,.055)}
:root[data-mode="light"] .led{border-color:rgba(31,28,22,.07)}
.led:first-of-type{border-top:0}
.led .dot{width:8px;height:8px;border-radius:2px;margin-top:6px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass-lo))}
.led .d{flex:1;min-width:0}
.led .d b{display:block;font-weight:600;font-size:14px}
.led .x{font-family:var(--f-mono);font-size:11.5px;color:var(--brass)}

/* ------------------------------------------------------------------- CASE */
.panelhead{display:flex;align-items:baseline;gap:9px;margin:2px 0 3px}
.panelhead b{font-family:var(--f-disp);font-size:38px;font-stretch:118%;line-height:1;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass) 55%,var(--brass-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.panelhead span{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);letter-spacing:.1em}
.case{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.slot{
  position:relative;aspect-ratio:1;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(0,0,0,.42),rgba(255,255,255,.02));
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 -1px 0 var(--edge-hi);
  border:1px solid rgba(255,255,255,.03);cursor:pointer;
}
:root[data-mode="light"] .slot{background:linear-gradient(160deg,rgba(31,28,22,.10),rgba(255,255,255,.5))}
/* the seat is square to the case; the mark is applied by hand, so it sits crooked */
.slot svg{width:58%;height:58%;opacity:.14;color:var(--ink);transform:rotate(var(--rot,0deg))}
:root[data-mode="light"] .slot svg{opacity:.22}
.slot.got{background:linear-gradient(155deg,#2C2C2E,#161719)}
:root[data-mode="light"] .slot.got{background:linear-gradient(155deg,#FFF,#E4DFD3)}
.slot.got svg{opacity:1;color:var(--brass);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.3)) drop-shadow(0 -1px 1px rgba(0,0,0,.5))}
.slot.got::after{content:'';position:absolute;inset:0;border-radius:11px;
  background:linear-gradient(140deg,rgba(255,255,255,.15),transparent 44%);pointer-events:none}
.slot.got{animation:seat .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes seat{from{transform:scale(.86) rotate(-5deg);opacity:0}to{transform:none;opacity:1}}
/* the next three: the quest, said in words */
.quest{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid rgba(255,255,255,.055)}
:root[data-mode="light"] .quest{border-color:rgba(31,28,22,.08)}
.quest:first-of-type{border-top:0}
.quest .g{width:42px;height:42px;flex:0 0 42px;border-radius:11px;display:grid;place-items:center;
  background:rgba(0,0,0,.32);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 -1px 0 var(--edge-hi)}
:root[data-mode="light"] .quest .g{background:rgba(31,28,22,.08)}
.quest .g svg{width:24px;height:24px;color:var(--ink-3);opacity:.5}
.quest .b{flex:1;min-width:0}
.quest .b b{display:block;font-size:14.5px}
.quest .b span{font-size:12px;color:var(--ink-3)}
.quest .n{font-family:var(--f-mono);font-size:11px;color:var(--brass);text-align:right;white-space:nowrap}
.qbar{height:4px;border-radius:3px;background:rgba(0,0,0,.4);overflow:hidden;margin-top:6px}
:root[data-mode="light"] .qbar{background:rgba(31,28,22,.1)}
.qbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi))}

/* chevrons + pins strip */
.ladder{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:2px}
.pip{width:100%;aspect-ratio:1;border-radius:9px;display:grid;place-items:center;
  background:rgba(0,0,0,.3);box-shadow:inset 0 1px 3px rgba(0,0,0,.5),inset 0 -1px 0 var(--edge-hi)}
:root[data-mode="light"] .pip{background:rgba(31,28,22,.07)}
.member .pip{width:38px;height:38px;aspect-ratio:auto;flex:0 0 38px}
.pip svg{width:60%;max-width:22px;height:auto;aspect-ratio:1;color:var(--ink-3);opacity:.35}
.pip.got svg{color:var(--brass);opacity:1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.25))}
.pip.now{box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 0 1.5px var(--brass)}

/* ------------------------------------------------------------------- LENS */
#octagon{width:100%;max-width:340px;margin:2px auto -4px;display:block;touch-action:none}
.drivebars{display:grid;gap:7px;margin-top:6px}
.db{display:grid;grid-template-columns:16px 1fr 30px;gap:9px;align-items:center;font-size:12.5px}
.db i{font-family:var(--f-mono);font-style:normal;color:var(--ink-3);font-size:11px}
.db .t{position:relative;height:7px;border-radius:4px;background:rgba(0,0,0,.42);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
:root[data-mode="light"] .db .t{background:rgba(31,28,22,.10)}
.db .f{position:absolute;inset:0 auto 0 0;border-radius:4px;
  background:linear-gradient(90deg,var(--brass-lo),var(--brass) 60%,var(--brass-hi));
  transition:width .7s cubic-bezier(.16,1,.3,1)}
.db.black .f{background:linear-gradient(90deg,#3C4A60,var(--steel))}
.db .v{font-family:var(--f-mono);font-size:11px;color:var(--ink-2);text-align:right}
.db .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}

.gauge{margin-top:2px}
.gauge .big{font-family:var(--f-disp);font-size:46px;font-stretch:118%;line-height:.95;letter-spacing:-.02em;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass) 50%,var(--brass-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gauge .of{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em}
.bar10k{position:relative;height:10px;border-radius:5px;margin:10px 0 0;background:rgba(0,0,0,.42);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.65);overflow:hidden}
:root[data-mode="light"] .bar10k{background:rgba(31,28,22,.10)}
.bar10k .f{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi));
  transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.bar10k .tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.22)}

.rx{display:flex;gap:9px;padding:10px 0;border-top:1px solid rgba(255,255,255,.055);font-size:13px;color:var(--ink-2)}
:root[data-mode="light"] .rx{border-color:rgba(31,28,22,.07)}
.rx b{color:var(--ink)}
.rx .g{color:var(--ok)}
.rx .w{color:var(--stamp)}

/* locks */
.lock{display:flex;gap:10px;padding:9px 0;font-size:13px;border-top:1px solid rgba(255,255,255,.055)}
:root[data-mode="light"] .lock{border-color:rgba(31,28,22,.07)}
.lock:first-of-type{border-top:0}
.lock svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--brass)}
.lock b{display:block;font-size:13.5px}
.lock span{color:var(--ink-3);font-size:12px}

/* mechanic chips */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.chip{padding:7px 11px;border-radius:999px;font-size:12.5px;border:1px solid rgba(255,255,255,.1);
  color:var(--ink-2);display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.02)}
:root[data-mode="light"] .chip{border-color:rgba(31,28,22,.13)}
.chip.on{color:#20180A;background:linear-gradient(180deg,var(--brass-hi),var(--brass));border-color:transparent;font-weight:600}
.chip.no{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.chip i{font-family:var(--f-mono);font-style:normal;font-size:10px;opacity:.7}

/* --------------------------------------------------------------- THE ROOM */
.member{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid rgba(255,255,255,.055)}
:root[data-mode="light"] .member{border-color:rgba(31,28,22,.07)}
.member:first-of-type{border-top:0}
.av{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-family:var(--f-mono);
  font-size:12px;color:var(--brass);background:rgba(199,154,59,.10);border:1px solid rgba(199,154,59,.22)}
.call{padding:12px 0;border-top:1px solid rgba(255,255,255,.055)}
:root[data-mode="light"] .call{border-color:rgba(31,28,22,.07)}
.call:first-of-type{border-top:0}
.call .need{font-size:14.5px;font-weight:600}
.call .meta{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);margin-top:3px}
.call.open .need::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--stamp);margin-right:7px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(180,57,46,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(180,57,46,0)}100%{box-shadow:0 0 0 0 rgba(180,57,46,0)}}
.denom{text-align:center;padding:6px 0 2px}
.denom b{font-family:var(--f-disp);font-size:40px;font-stretch:118%;line-height:1;color:var(--stamp)}
.denom.zero b{color:var(--ok)}

/* ------------------------------------------------------------------- TABS */
nav.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--tab-h);
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb,var(--plate-1) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(255,255,255,.07);
}
:root[data-mode="light"] nav.tabs{border-top-color:rgba(31,28,22,.1)}
nav.tabs button{display:grid;place-items:center;gap:3px;color:var(--ink-3);position:relative;padding-top:4px}
nav.tabs button svg{width:21px;height:21px}
nav.tabs button span{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
nav.tabs button.on{color:var(--brass)}
nav.tabs button.on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:22px;height:2px;background:var(--brass);box-shadow:0 0 10px var(--brass)}

/* ------------------------------------------------------------------ SHEET */
.scrim{position:fixed;inset:0;z-index:54;background:rgba(4,5,7,.72);opacity:0;pointer-events:none;
  transition:opacity .3s;backdrop-filter:blur(3px)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:55;max-width:520px;margin:0 auto;
  background:linear-gradient(180deg,var(--plate-3),var(--plate-1) 40%);
  border-radius:20px 20px 0 0;padding:8px var(--pad) calc(20px + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .42s cubic-bezier(.16,1,.3,1);
  box-shadow:0 -1px 0 var(--edge-hi) inset,0 -24px 60px -20px rgba(0,0,0,.9);
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.sheet.on{transform:none}
.grab{width:40px;height:4px;border-radius:3px;background:rgba(255,255,255,.16);margin:6px auto 14px}
.sheet h2{font-size:20px;font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:3px}
.opt{width:100%;text-align:left;padding:14px 0;border-top:1px solid rgba(255,255,255,.06);display:flex;
  align-items:center;gap:12px}
:root[data-mode="light"] .opt{border-color:rgba(31,28,22,.08)}
.opt .n{flex:1}
.opt .n b{display:block;font-weight:600}
.opt.sel{color:var(--brass)}
.opt .x{font-family:var(--f-mono);font-size:11px;color:var(--brass)}
label.fld{display:block;margin:14px 0 0}
label.fld span{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
input[type=text],input[type=date],select,textarea{
  width:100%;margin-top:6px;padding:13px 14px;border-radius:11px;font:inherit;font-size:16px;color:var(--ink);
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);appearance:none;
}
:root[data-mode="light"] input,:root[data-mode="light"] select,:root[data-mode="light"] textarea{
  background:#fff;border-color:rgba(31,28,22,.16);box-shadow:inset 0 1px 2px rgba(31,28,22,.06)}
::placeholder{color:var(--ink-3)}

/* ------------------------------------------------------------- THE PRESS */
#press{position:fixed;inset:0;z-index:60;display:none;place-items:center;background:rgba(3,4,6,.94)}
#press.on{display:grid}
#press .die{
  position:relative;width:168px;height:168px;display:grid;place-items:center;
  animation:strike 1.05s cubic-bezier(.5,0,.2,1) both;
}
@keyframes strike{
  0%{transform:translateY(-56vh) scale(2.4);opacity:0;filter:blur(6px)}
  38%{opacity:1;filter:blur(0)}
  52%{transform:translateY(0) scale(1)}
  58%{transform:translateY(0) scale(.93)}
  70%{transform:translateY(0) scale(1.02)}
  100%{transform:translateY(0) scale(1)}
}
#press .die svg{width:100%;height:100%;color:var(--brass);
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.3)) drop-shadow(0 -2px 3px rgba(0,0,0,.7))}
#press .shock{position:absolute;width:168px;height:168px;border-radius:50%;border:2px solid var(--brass-hi);
  animation:shock .8s .5s cubic-bezier(.16,1,.3,1) both}
@keyframes shock{from{transform:scale(.5);opacity:.85}to{transform:scale(3.1);opacity:0}}
#press .cap{position:absolute;bottom:16vh;left:0;right:0;text-align:center;padding:0 24px;
  animation:rise .6s .62s cubic-bezier(.16,1,.3,1) both}
#press .cap .eyebrow{color:var(--brass)}
#press .cap h2{font-size:29px;font-stretch:118%;text-transform:uppercase;margin:6px 0 6px}
#press .cap p{color:var(--ink-2);font-size:14px;margin:0}

/* ------------------------------------------------------------------- GATE */
#gate{position:fixed;inset:0;z-index:50;background:var(--plate-1);display:grid;
  grid-template-rows:1fr auto;padding:calc(24px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto}
#gate.off{display:none}
#gate .hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0}
#gate canvas{width:min(72vw,290px);height:min(72vw,290px);touch-action:none;margin-bottom:-6px}
#gate h1{font-size:clamp(46px,17vw,74px);font-stretch:125%;line-height:.86;letter-spacing:-.035em;text-transform:uppercase;
  background:linear-gradient(175deg,var(--ink) 30%,var(--ink-3));-webkit-background-clip:text;background-clip:text;color:transparent}
#gate .tag{max-width:23ch;font-size:17.5px;line-height:1.32;color:var(--ink-2);margin:10px auto 0}
#gate .tag em{color:var(--brass);font-style:normal}
#gate .foot{display:grid;gap:11px}
#gate .credit{text-align:center}
.up{animation:rise .8s cubic-bezier(.16,1,.3,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.24s}.d3{animation-delay:.4s}.d4{animation-delay:.54s}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 14px);transform:translate(-50%,20px);z-index:45;
  padding:11px 16px;border-radius:11px;background:var(--plate-3);border:1px solid rgba(255,255,255,.1);
  font-size:13.5px;opacity:0;transition:.3s cubic-bezier(.16,1,.3,1);pointer-events:none;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.9);max-width:88vw}
#toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  #grain{display:none}
}