/* Desk's look (moon jellies in a tank), lit from above by sunlight instead of blue tank light,
   with Binance yellow in place of coral. */
:root{
  --bg:#0f0a02;
  /* three clear steps: near-white headings, muted sand body, quiet notes. Gold is kept for accents. */
  --ink:#fff9ef; --ink-dim:#b9ab97; --ink-faint:#7f7366; --ink-rgb:255,249,239;
  --edge:rgba(255,222,170,.12); --edge-2:rgba(255,222,170,.22);
  --ghost:0 0 1px rgba(255,244,222,.55), 0 0 14px rgba(255,206,140,.32), 0 0 38px rgba(255,170,40,.22);
  --ghost-soft:0 0 10px rgba(255,206,140,.15), 0 0 28px rgba(255,170,40,.08);
  --accent:#f0b90b; --accent-rgb:240,185,11; --accent-ink:#1a1300; --accent-soft:#f8d33a;
  --good:#9fd4a8; --high:#ff6f7d; --high-rgb:255,111,125; --med:#ff9d5c; --med-rgb:255,157,92;
  /* the water: dark amber with sunlit gold, used by motion.js */
  /* the jellyfish colours (motion.js J_BASE), for the headline's second line */
  --j-wh:255,250,236; --j-jw:255,232,180; --j-jl:255,210,120; --j-jb:255,170,30;
  --tank-a:240,185,11; --tank-b:255,140,30; --mote:255,236,190;
  --gf-font:'Lexend',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; }
body{ margin:0; background:transparent; color:var(--ink); font:300 15px/1.55 var(--gf-font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:hidden; }
h1, h2, h3, .brand, .gf-val, .gf-out .v{ text-shadow:var(--ghost); }
/* second line is lit like a jellyfish: pale glow at the top of each letter, warm amber at the bottom */
.hero h1 .dim{ display:inline-block; filter:drop-shadow(0 0 14px rgba(var(--j-jb),.28)) drop-shadow(0 0 40px rgba(var(--j-jb),.14)); }
/* painted per letter: the letters are split into their own boxes by play.js, and a gradient
   clipped across them breaks; each letter gets the same top-to-bottom light instead */
.hero h1 .dim .ch{ color:transparent; -webkit-background-clip:text; background-clip:text; text-shadow:none;
  background-image:linear-gradient(180deg, rgb(var(--j-wh)) 12%, rgb(var(--j-jw)) 38%, rgb(var(--j-jl)) 64%, rgba(var(--j-jb),.92) 96%); }
/* warm light pooled in the water, behind the moving tank */
body::before{ content:""; position:fixed; inset:-20vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vmax 38vmax at 35% -10%, rgba(var(--tank-a),.30), transparent 70%),
    radial-gradient(40vmax 34vmax at 100% 30%, rgba(var(--tank-b),.16), transparent 70%),
    radial-gradient(38vmax 34vmax at -5% 55%, rgba(var(--tank-a),.12), transparent 70%),
    radial-gradient(60vmax 40vmax at 50% 115%, rgba(var(--tank-b),.08), transparent 70%); }
a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(var(--ink-rgb),.25); text-underline-offset:4px; }
a:hover{ text-decoration-color:var(--accent); }
b{ font-weight:400; }
code{ font:300 .92em var(--mono); color:var(--ink); }

.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
@media (max-width:480px){ .wrap{ padding:0 16px; } }

/* ---------- motion (Desk) ---------- */
.tank{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
[data-float]{ opacity:0; transform:translate3d(0,18px,0); filter:blur(4px);
  transition:opacity 1.3s cubic-bezier(.16,1,.3,1) var(--d,0ms), transform 1.6s cubic-bezier(.16,1,.3,1) var(--d,0ms), filter 1.3s cubic-bezier(.16,1,.3,1) var(--d,0ms); }
[data-float].in{ opacity:1; transform:none; filter:none; }
.hero h1 .w{ display:inline-block; opacity:0; transform:translate3d(0,.35em,0) rotate(1.5deg); filter:blur(6px);
  animation:drift-in 1.8s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--i) * 110ms + 150ms); }
@keyframes drift-in{ to{ opacity:1; transform:none; filter:none; } }
.drift{ overflow:hidden; margin:0 -28px; padding:14px 0; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.drift div{ display:flex; gap:44px; width:max-content; animation:drift 90s linear infinite; font-size:13px; color:var(--ink-faint); }
.drift span::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:rgba(var(--accent-rgb),.85); margin-right:12px; vertical-align:middle;
  box-shadow:0 0 10px rgba(var(--accent-rgb),.9); animation:bob 6s ease-in-out infinite; }
@keyframes drift{ to{ transform:translate3d(-50%,0,0); } }
@media (max-width:480px){ .drift{ margin:0 -16px; } }
@keyframes bob{ 50%{ opacity:.35; transform:translateY(-2px); } }
.brand i{ animation:breathe 7s ease-in-out infinite; }
@keyframes breathe{ 50%{ transform:scale(.8); box-shadow:0 0 26px rgba(var(--accent-rgb),.5); } }
.hero{ will-change:transform, opacity; }
[data-rise]{ position:relative; display:inline-block; clip-path:inset(0 100% 0 0); opacity:.2; transition:clip-path 1.9s cubic-bezier(.16,1,.3,1), opacity 1.6s ease; }
[data-rise].in{ clip-path:inset(-20% -10% -20% 0); opacity:1; }
[data-rise]::after{ content:""; position:absolute; inset:-10% auto -10% 0; width:40%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,236,200,.3), transparent); mix-blend-mode:screen; transform:translateX(-120%); opacity:0; }
[data-rise].in::after{ animation:glint 2.6s cubic-bezier(.4,0,.2,1) .5s; }
@keyframes glint{ 0%{ transform:translateX(-120%); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateX(320%); opacity:0; } }
.gf-btn{ will-change:transform; }

/* ---------- play (Desk, toned down) ---------- */
.eyebrow{ font:400 11.5px/1 var(--gf-font); letter-spacing:.22em; text-transform:uppercase; color:var(--accent-soft); margin:0 0 12px; opacity:.85;
  text-shadow:0 0 12px rgba(var(--accent-rgb),.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero .eyebrow{ margin-bottom:20px; }
.wd{ display:inline-block; white-space:nowrap; }
.ch{ display:inline-block; will-change:transform; }
.wd.shine{ animation:shine 2.8s cubic-bezier(.4,0,.2,1); }
@keyframes shine{ 40%{ text-shadow:0 0 2px rgba(255,248,230,.9), 0 0 22px rgba(var(--accent-rgb),.75), 0 0 60px rgba(255,170,40,.45); color:#fff6e4; } }
.bubble{ position:fixed; z-index:5; pointer-events:none; border-radius:50%; border:1px solid rgba(255,240,210,.55);
  box-shadow:0 0 8px rgba(255,200,110,.45), inset 0 0 4px rgba(255,255,255,.35); }
.gf-cell.breath{ animation:fieldbreath 4.5s ease-in-out; }
@keyframes fieldbreath{ 45%{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),.22), 0 0 40px -6px rgba(var(--accent-rgb),.35); } }
button.gf-btn:not(:disabled){ background:radial-gradient(90px circle at var(--bx,50%) var(--by,50%), rgba(255,246,214,.5), transparent 70%), var(--accent); }
.receipt{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:56px; align-items:center; padding:46px 0 40px; border-top:1px solid var(--edge); }
@media (max-width:900px){ .receipt{ grid-template-columns:1fr; gap:24px; } }
.pane{ border:1px solid var(--edge-2); border-radius:16px; background:linear-gradient(180deg, rgba(48,32,8,.5), rgba(18,12,3,.4));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(255,170,40,.3), inset 0 1px 0 rgba(255,236,200,.08); overflow:hidden; }
.pane-top{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--edge); font-size:12px; color:var(--ink-faint); }
.pane-top i{ width:8px; height:8px; border-radius:50%; background:rgba(var(--ink-rgb),.18); }
.pane-top i:first-child{ background:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),.8); }
.pane-top span{ margin-left:10px; }
#trace{ margin:0; padding:18px 20px 22px; min-height:212px; font:300 13px/1.75 var(--mono); color:var(--ink-dim); white-space:pre; overflow-x:auto; }
#trace i{ font-style:normal; color:var(--ink-faint); }
#trace u{ text-decoration:none; color:rgb(var(--j-jw)); }
#trace b{ font-weight:400; color:var(--ink); text-shadow:var(--ghost); } #trace em{ font-style:normal; color:var(--high); } #trace s{ text-decoration:none; color:var(--good); }
.caret{ display:inline-block; width:7px; height:1.05em; vertical-align:-2px; margin-left:2px; background:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),.9); animation:blink 1.2s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
#boot{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgba(15,10,2,.74); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); cursor:pointer;
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1), filter 1.4s cubic-bezier(.16,1,.3,1), transform 1.6s cubic-bezier(.16,1,.3,1); }
#boot.out{ opacity:0; filter:blur(14px); transform:translate3d(0,-30px,0) scale(1.02); pointer-events:none; }
#boot .pane{ width:min(460px, calc(100vw - 32px)); }
#boot pre{ margin:0; padding:18px 20px 20px; min-height:190px; font:300 12.5px/1.8 var(--mono); color:var(--ink-dim); white-space:pre-wrap; }
#boot pre b{ color:var(--ink); font-weight:400; text-shadow:var(--ghost); } #boot pre s{ text-decoration:none; color:var(--good); }
#boot small{ display:block; text-align:center; margin-top:14px; font-size:11.5px; color:var(--ink-faint); letter-spacing:.08em; }
@media (prefers-reduced-motion:reduce){
  [data-rise]{ clip-path:none; opacity:1; transition:none; } [data-rise]::after{ display:none; }
  [data-float], .hero h1 .w{ opacity:1; transform:none; filter:none; transition:none; animation:none; }
  .drift div, .drift span::before, .brand i, .wd.shine{ animation:none; }
  #boot{ display:none; }
}

/* ---------- top and hero ---------- */
.top{ display:flex; align-items:center; gap:18px; padding:22px 0; }
.brand{ font:400 19px var(--gf-font); letter-spacing:-.01em; display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none; color:var(--ink); }
.brand i{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px rgba(var(--accent-rgb),.8); }
.brand span{ font-weight:300; font-size:15px; color:var(--ink-faint); text-shadow:none; }
.toplink{ font-size:14px; color:var(--ink-dim); }
.hero{ padding:56px 0 34px; max-width:820px; }
.hero h1{ font:200 clamp(36px,5.6vw,64px)/1.04 var(--gf-font); letter-spacing:-.035em; margin:0 0 18px; }
.hero h1 .dim{ color:rgb(var(--j-jl)); }
.hero p{ color:var(--ink-dim); font-size:17px; max-width:600px; margin:0; }

.cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:56px; padding:26px 0 40px; border-top:1px solid var(--edge); }
@media (max-width:900px){ .cols{ grid-template-columns:1fr; gap:34px; } }
h2{ font:300 22px var(--gf-font); letter-spacing:-.01em; margin:0 0 4px; }
.sub{ color:var(--ink-faint); font-size:13.5px; margin:0 0 14px; }

/* ---------- glow fields (Desk's stronger version) ---------- */
.gf-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px 10px; margin:0 -18px; }
.gf-cell.c2{ grid-column:span 2; } .gf-cell.c3{ grid-column:span 3; } .gf-cell.c6{ grid-column:span 6; }
@media (max-width:480px){ .gf-grid{ grid-template-columns:1fr; margin:0 -14px; } .gf-cell.c2,.gf-cell.c3,.gf-cell.c6{ grid-column:auto; } }
.gf-cell{ --mx:50%; --my:50%; position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; padding:16px 18px; border-radius:16px; cursor:text; border:1px solid transparent; background:transparent;
  transition:border-color .7s cubic-bezier(.16,1,.3,1), box-shadow .9s cubic-bezier(.16,1,.3,1), background-color .9s cubic-bezier(.16,1,.3,1); }
@media (max-width:480px){ .gf-cell{ padding:14px; } }
.gf-cell::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .9s cubic-bezier(.16,1,.3,1);
  background:radial-gradient(340px circle at var(--mx) var(--my), rgba(var(--accent-rgb),.3), rgba(var(--accent-rgb),.07) 45%, rgba(var(--accent-rgb),0) 75%); }
.gf-cell > *{ position:relative; }
.gf-cell:hover{ border-color:rgba(var(--accent-rgb),.32); background:rgba(var(--accent-rgb),.035); box-shadow:inset 0 0 24px -8px rgba(var(--accent-rgb),.35), 0 0 46px -10px rgba(var(--accent-rgb),.7); }
.gf-cell:hover::before, .gf-cell:focus-within::before{ opacity:1; }
.gf-cell:focus-within{ border-color:rgba(var(--accent-rgb),.75); background:rgba(var(--accent-rgb),.05); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2), inset 0 0 28px -8px rgba(var(--accent-rgb),.4), 0 0 56px -8px rgba(var(--accent-rgb),.8); }
.gf-cell.out{ cursor:default; }
.gf-lbl{ font:300 13px/1.3 var(--gf-font); color:var(--ink-dim); }
.gf-hint{ font:300 12.5px/1.45 var(--gf-font); color:var(--ink-faint); min-height:1.45em; overflow-wrap:anywhere; }
.gf-hint.ok{ color:var(--ink-dim); } .gf-hint.ok b{ color:var(--ink); }
.gf-val{ font:200 clamp(24px,2.6vw,30px)/1.2 var(--gf-font); letter-spacing:-.01em; color:var(--ink); background:transparent; border:0; outline:none; padding:0; margin:0; width:100%; min-width:0; border-radius:0;
  font-variant-numeric:tabular-nums; -webkit-appearance:none; appearance:none; }
.gf-val.url{ font-size:clamp(19px,2.2vw,25px); }
.gf-val::placeholder{ color:var(--ink-faint); opacity:.8; }
.gf-out .v{ font:200 clamp(22px,2.4vw,28px)/1.2 var(--gf-font); letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink); }
.gf-out .v.high{ color:var(--high); } .gf-out .v.med{ color:var(--med); } .gf-out .v.zero{ color:var(--ink-faint); }
.gf-outs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px 10px; margin:22px -18px 0; }
@media (max-width:640px){ .gf-outs{ grid-template-columns:repeat(2,minmax(0,1fr)); margin:22px -14px 0; } }
.gf-cell.pulse{ animation:gf-pulse 1.8s cubic-bezier(.16,1,.3,1); }
@keyframes gf-pulse{ 0%{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),.22), 0 0 44px -10px rgba(var(--accent-rgb),.45); } 100%{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),0), 0 0 36px -10px rgba(var(--accent-rgb),0); } }
@media (prefers-reduced-motion:reduce){ .gf-cell.pulse{ animation:none; } }
.gf-btn{ text-shadow:none; font:400 15px var(--gf-font); color:var(--accent-ink); background:var(--accent); border:0; border-radius:999px; padding:13px 26px; cursor:pointer;
  transition:filter .6s ease, box-shadow .9s cubic-bezier(.16,1,.3,1), opacity .2s; white-space:nowrap; }
.gf-btn:hover{ filter:brightness(1.08); box-shadow:0 6px 22px -8px rgba(var(--accent-rgb),.8); }
.gf-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.3); }
.gf-btn[disabled]{ opacity:.55; cursor:progress; }
button.lnk{ font:300 14px var(--gf-font); color:var(--ink-dim); background:none; border:0; padding:2px 0; cursor:pointer;
  text-decoration:underline; text-decoration-color:rgba(var(--ink-rgb),.25); text-underline-offset:4px; }
button.lnk:hover{ color:var(--ink); text-decoration-color:var(--accent); }
button.lnk:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; border-radius:4px; }

.actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:16px; }
.status{ color:var(--ink-dim); font-size:14px; min-height:22px; margin:14px 0 0; }
.status.err{ color:var(--high); }
.status .spin{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:9px; background:var(--accent); box-shadow:0 0 14px rgba(var(--accent-rgb),.8); animation:breathe2 1.1s ease-in-out infinite; vertical-align:1px; }
@keyframes breathe2{ 0%,100%{ opacity:.3; transform:scale(.8);} 50%{ opacity:1; transform:scale(1);} }

/* ---------- result ---------- */
#result{ border-top:1px solid var(--edge); margin-top:26px; padding-top:30px; }
.verdict{ display:flex; align-items:center; gap:14px; }
.verdict h2{ margin:0; font-weight:300; font-size:clamp(23px,3vw,30px); line-height:1.2; letter-spacing:-.015em; }
.verdict .dot{ flex:none; width:14px; height:14px; border-radius:50%; background:var(--ink-faint); }
.verdict.red .dot{ background:var(--high); box-shadow:0 0 22px rgba(var(--high-rgb),.8); }
.verdict.amber .dot{ background:var(--med); box-shadow:0 0 22px rgba(var(--med-rgb),.6); }
.verdict.clear .dot{ background:var(--ink-dim); box-shadow:0 0 18px rgba(255,234,203,.3); }
.note{ color:var(--ink-dim); margin:12px 0 0; max-width:40em; }
.summary{ list-style:none; padding:0; margin:18px 0 0; }
.summary li{ position:relative; padding-left:18px; margin:7px 0; }
.summary li::before{ content:""; position:absolute; left:2px; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--ink-faint); }
.verdict.red ~ .summary li::before{ background:var(--high); }
.src{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 24px; margin:24px 0 0; padding:16px 0 0; border-top:1px solid var(--edge); }
.src .fact{ min-width:0; }
.src dt{ font-size:12.5px; color:var(--ink-faint); margin:0 0 3px; }
.src dd{ margin:0; font-size:14.5px; line-height:1.4; color:var(--ink); overflow-wrap:anywhere; text-shadow:none; }
.src a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(var(--accent-rgb),.45); text-underline-offset:4px; }
.src a:hover{ text-decoration-color:var(--accent); }
.res-actions{ display:flex; gap:22px; margin-top:8px; flex-wrap:wrap; }
.group{ margin-top:34px; }
.group h3{ font:300 13px var(--gf-font); color:var(--ink-dim); margin:0 0 4px; text-shadow:none; }
.row{ display:grid; grid-template-columns:12px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--edge); }
.row:first-of-type{ border-top:1px solid var(--edge); }
.row .sev{ width:8px; height:8px; border-radius:50%; margin-top:.55em; background:var(--ink-faint); }
.row.high .sev{ background:var(--high); box-shadow:0 0 12px rgba(var(--high-rgb),.65); }
.row.medium .sev{ background:var(--med); }
.row.low .sev{ background:var(--ink-dim); opacity:.6; }
.row .t{ font-weight:400; }
.row .m{ font-size:13px; color:var(--ink-faint); margin-top:2px; word-break:break-all; }
.row .x{ color:var(--ink-dim); font-size:14.5px; margin:8px 0 0; }
.row .snip{ display:block; margin-top:10px; font:300 12.5px/1.5 var(--mono); color:var(--ink-dim); background:rgba(20,13,3,.7); border:1px solid var(--edge);
  padding:9px 11px; border-radius:8px; white-space:pre-wrap; word-break:break-all; max-height:9em; overflow:auto; text-shadow:none; }
.more{ color:var(--ink-faint); font-size:13px; margin-top:6px; }

/* ---------- side list, how, footer ---------- */
.checks{ list-style:none; padding:0; margin:0; }
.checks{ container-type:inline-size; }
/* name on its own line, the detail under it in quieter text; side by side when there's room */
.checks li{ display:grid; grid-template-columns:1fr; gap:3px; padding:12px 0; border-top:1px solid var(--edge); }
.checks li:last-child{ border-bottom:1px solid var(--edge); }
.checks li b{ color:var(--ink); font-weight:400; font-size:15px; line-height:1.35; }
.checks li span{ color:var(--ink-dim); font-size:13.5px; line-height:1.5; }
@container (min-width:620px){
  .checks li{ padding:14px 0; }
}
.how{ border-top:1px solid var(--edge); padding:34px 0 20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; }
@media (max-width:760px){ .how{ grid-template-columns:1fr; gap:18px; } }
.how h3{ font:300 16px var(--gf-font); margin:0 0 6px; }
.how h3 > span:first-child{ color:var(--accent-soft); margin-right:8px; }
.how p{ color:var(--ink-dim); margin:0; font-size:14px; }
.foot{ border-top:1px solid var(--edge); padding:22px 0 40px; color:var(--ink-faint); font-size:13px; }
.foot p{ margin:4px 0; }

#drop{ position:fixed; inset:12px; z-index:60; border-radius:24px; display:none; align-items:center; justify-content:center;
  border:1px solid rgba(var(--accent-rgb),.5); background:rgba(15,10,2,.9); box-shadow:inset 0 0 120px -30px rgba(var(--accent-rgb),.5); }
#drop span{ font-weight:300; font-size:24px; }
body.dragging #drop{ display:flex; }

/* light demo controls (?demo=light only) */
.demo-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:40; display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center;
  padding:12px 20px; border-radius:999px; background:rgba(15,10,2,.72); border:1px solid var(--edge-2); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); max-width:calc(100vw - 32px); }
.demo-lbl{ font-size:12.5px; color:var(--ink-faint); }
.demo-b{ font:300 14px var(--gf-font); color:var(--ink-faint); background:none; border:0; padding:2px 0; cursor:pointer; transition:color .3s, text-shadow .3s; }
.demo-b:hover{ color:var(--ink-dim); }
.demo-b[aria-pressed="true"]{ color:var(--ink); text-shadow:0 0 18px rgba(var(--accent-rgb),.8); }

/* results start folded; this opens the full breakdown */
.expand{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:0; background:none; border:0; cursor:pointer;
  font:400 15px var(--gf-font); color:var(--ink); text-shadow:var(--ghost-soft); }
.expand i{ width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .5s cubic-bezier(.16,1,.3,1); }
.expand[aria-expanded="true"] i{ transform:rotate(225deg) translate(-2px,-2px); }
.expand:hover{ color:var(--accent-soft); }
.expand:focus-visible{ outline:1px solid var(--accent); outline-offset:6px; border-radius:4px; }
#details{ margin-top:6px; }
#details .summary{ margin-top:18px; }

.verdict.red ~ #details .summary li::before{ background:var(--high); }

/* ---------- text follows the verdict light ----------
   motion.js eases --ink, --ink-dim, --ink-faint, --accent-soft, --glow and --glow-core along with the
   water, so words and light change together. The Scan button keeps $SNIFF yellow. */
:root{ --glow:rgba(255,170,40,.22); --glow-core:rgba(255,206,140,.32);
  --ghost:0 0 1px rgba(255,244,222,.55), 0 0 14px var(--glow-core), 0 0 38px var(--glow); }
.eyebrow{ text-shadow:0 0 12px color-mix(in srgb, var(--accent-soft) 45%, transparent); }

/* ---------- count tiles open a typed list ---------- */
button.tile{ -webkit-appearance:none; appearance:none; font:inherit; color:inherit; text-align:left; width:100%; text-shadow:inherit; }
.gf-cell.out.tile{ cursor:pointer; }
button.tile .gf-lbl{ display:flex; align-items:center; gap:8px; }
button.tile .gf-lbl i{ width:6px; height:6px; border-right:1.3px solid currentColor; border-bottom:1.3px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.6; transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .3s; }
button.tile:hover .gf-lbl i{ opacity:1; }
button.tile[aria-expanded="true"]{ border-color:rgba(var(--accent-rgb),.6); background:rgba(var(--accent-rgb),.05); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12), 0 0 44px -10px rgba(var(--accent-rgb),.7); }
button.tile[aria-expanded="true"] .gf-lbl i{ transform:rotate(225deg) translate(-2px,-1px); opacity:1; }
button.tile:focus-visible{ outline:none; border-color:rgba(var(--accent-rgb),.75); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2); }
/* the opened list is glow fields too: invisible rows that light up under the pointer */
.tile-panel{ margin:14px -18px 0; }
@media (max-width:480px){ .tile-panel{ margin:14px -14px 0; } }
.tile-panel .row.gf-cell{ display:grid; grid-template-columns:12px minmax(0,1fr); gap:14px; padding:16px 18px; border-radius:16px; border:1px solid transparent; margin-bottom:2px; }
.tile-panel .row.gf-cell:hover{ border-color:rgba(var(--accent-rgb),.32); }
.tile-panel .tile-none{ padding:0 18px; }
.tile-none{ color:var(--ink-dim); margin:14px 0 0; min-height:1.5em; }
.typing::after{ content:""; display:inline-block; width:6px; height:1em; margin-left:2px; vertical-align:-2px; background:var(--accent); box-shadow:0 0 8px rgba(var(--accent-rgb),.8); }
.fade{ animation:tfade .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes tfade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.filelist{ list-style:none; margin:0; padding:4px 0; font:300 13px/1.5 var(--mono); max-height:440px; overflow:auto; }
.filelist li.gf-cell{ display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:12px; align-items:center; padding:8px 18px; border-radius:12px; color:var(--ink-dim); text-shadow:none; }
.filelist li.gf-cell::before{ background:radial-gradient(220px circle at var(--mx) var(--my), rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),0) 70%); }
.filelist .fname{ min-width:0; overflow-wrap:anywhere; }
.filelist .fsize{ color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap; }
.filelist .fdot{ width:6px; height:6px; border-radius:50%; background:rgba(var(--ink-rgb),.18); }
.filelist .has.high .fdot{ background:var(--high); box-shadow:0 0 8px rgba(var(--high-rgb),.7); }
.filelist .has.medium .fdot{ background:var(--med); }
.filelist .has.low .fdot, .filelist .has.info .fdot{ background:var(--ink-dim); }
.filelist .has.high .fname{ color:var(--ink); }
@media (prefers-reduced-motion:reduce){ .fade{ animation:none; } .typing::after{ display:none; } }

/* ---------- compact finding rows ---------- */
.row .head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.row .cnt{ font:300 12.5px var(--gf-font); color:var(--ink-faint); }
.row .x{ margin:4px 0 0; font-size:14px; line-height:1.5; }
.locs{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.loc{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font:300 13px/1.45 var(--gf-font); min-width:0; }
.loc .where{ font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); overflow-wrap:anywhere; }
.loc .meta{ color:var(--ink-faint); font-size:12.5px; }
.loc .lx{ flex-basis:100%; color:var(--ink-faint); font-size:13px; }
.loc .snip1{ flex-basis:100%; display:block; min-width:0; font:300 12px/1.5 var(--mono); color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; border-left:1px solid var(--edge-2, rgba(255,234,203,.2)); padding-left:10px; }
.loc .snip1:hover{ color:var(--ink-dim); border-left-color:rgba(var(--accent-rgb),.6); }
.loc .snip1.open{ white-space:pre-wrap; overflow-wrap:anywhere; }
.tile-panel .row.gf-cell{ padding:12px 18px; margin-bottom:0; }
#details .row{ padding:12px 0; }

/* ---------- jellyfish gradient on the small gold labels and step numbers ----------
   Same light as the headline's second line: cream at the top, amber at the bottom.
   Step numbers are split into letters by play.js, so they're painted per letter. */
.eyebrow, .how h3 > span:first-child .ch{
  color:transparent; -webkit-background-clip:text; background-clip:text; text-shadow:none;
  background-image:linear-gradient(180deg, rgb(var(--j-wh)) 8%, rgb(var(--j-jw)) 34%, rgb(var(--j-jl)) 62%, rgb(var(--j-jb)) 96%); }
.eyebrow{ opacity:1; filter:drop-shadow(0 0 8px rgba(var(--j-jb),.35)); }
.how h3 > span:first-child{ color:rgb(var(--j-jl)); filter:drop-shadow(0 0 8px rgba(var(--j-jb),.35)); }

.hero p.hero-small{ margin-top:12px; font-size:14px; color:var(--ink-faint); }

/* ---------- Scan it: lit like a jellyfish bell ----------
   Cream at the top fading to amber, a bright rim along the top edge, a soft halo
   that breathes slowly, and the cursor highlight still riding on top. */
button.gf-btn:not(:disabled){
  color:#2a1600;
  background:
    radial-gradient(90px circle at var(--bx,50%) var(--by,50%), rgba(255,250,236,.55), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, rgba(var(--j-wh),.95) 0%, rgba(var(--j-jw),.9) 30%, rgba(var(--j-jl),.92) 58%, rgb(var(--j-jb)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,252,240,.9),
    inset 0 -6px 14px -6px rgba(180,95,0,.45),
    0 0 0 1px rgba(var(--j-jl),.55),
    0 0 18px -2px rgba(var(--j-jb),.55),
    0 0 46px -6px rgba(var(--j-jb),.4);
  animation:bell-glow 4.5s ease-in-out infinite;
}
button.gf-btn:not(:disabled):hover{ filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,252,240,.95), inset 0 -6px 14px -6px rgba(180,95,0,.45), 0 0 0 1px rgba(var(--j-jl),.75), 0 0 24px 0 rgba(var(--j-jb),.7), 0 0 70px -4px rgba(var(--j-jb),.5); }
button.gf-btn:not(:disabled):focus-visible{ box-shadow:inset 0 1px 0 rgba(255,252,240,.9), 0 0 0 3px rgba(var(--j-jl),.45), 0 0 30px 0 rgba(var(--j-jb),.6); }
@keyframes bell-glow{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.09) saturate(1.08); } }
@media (prefers-reduced-motion:reduce){ button.gf-btn:not(:disabled){ animation:none; } }
.src + .res-actions{ margin-top:20px; }

/* ---------- the scanner is the point: give it more presence ---------- */
.scanbox{ position:relative; }
.scanbox::before{ content:""; position:absolute; inset:-40px -24px -30px -24px; z-index:-1; pointer-events:none; border-radius:40px;
  background:radial-gradient(60% 55% at 30% 45%, rgba(var(--j-jl),.10), rgba(var(--j-jb),.04) 55%, transparent 80%); }
.scanbox h2{ font-size:clamp(28px,3.2vw,36px); font-weight:250; letter-spacing:-.02em; margin-bottom:6px; }
.scanbox .sub{ font-size:15px; color:var(--ink-dim); margin-bottom:20px; max-width:520px; }
.scanbox .gf-val.url{ font-size:clamp(26px,3vw,34px); }
.scanbox .gf-cell{ padding-top:20px; padding-bottom:20px; }
.scanbox .actions{ margin-top:18px; }
.scanbox .gf-btn{ font-size:16.5px; padding:16px 34px; }
.samples{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; margin-top:22px; font-size:14px; }
.samples-lbl{ color:var(--ink-faint); }
.sample{ display:inline-flex; align-items:center; gap:8px; }
.sample .sd{ width:7px; height:7px; border-radius:50%; flex:none; }
.sample .sd.clear{ background:#7fd6a4; box-shadow:0 0 8px rgba(127,214,164,.7); }
.sample .sd.amber{ background:var(--med); box-shadow:0 0 8px rgba(255,157,92,.7); }
.sample .sd.red{ background:var(--high); box-shadow:0 0 8px rgba(255,111,125,.7); }
@media (max-width:640px){ .scanbox::before{ inset:-30px 0 -20px 0; } }
.checks li span.wait{ opacity:0; }

/* ---------- layout: the scanner centred on its own, the tricks underneath in two columns ---------- */
.cols{ grid-template-columns:1fr; gap:64px; padding-top:44px; }
.scanbox{ width:100%; max-width:780px; margin:0 auto; }
.scanbox > .eyebrow, .scanbox > h2, .scanbox > .sub{ text-align:center; margin-left:auto; margin-right:auto; }
.scanbox .actions, .scanbox .samples{ justify-content:center; }
.scanbox .status{ text-align:center; }
.scanbox::before{ inset:-50px -40px -30px -40px; background:radial-gradient(55% 60% at 50% 45%, rgba(var(--j-jl),.10), rgba(var(--j-jb),.04) 55%, transparent 80%); }
@media (max-width:640px){ .scanbox::before{ inset:-30px 0 -20px 0; } }
#how{ width:100%; max-width:1000px; margin:0 auto; padding-top:44px; border-top:1px solid var(--edge); }
#how > .eyebrow, #how > h2, #how > .sub{ text-align:center; margin-left:auto; margin-right:auto; }
#how > .sub{ max-width:560px; margin-bottom:26px; }
.checks{ display:grid; grid-template-columns:1fr; column-gap:56px; }
@media (min-width:760px){
  .checks{ grid-template-columns:1fr 1fr; }
  .checks li:nth-last-child(2){ border-bottom:1px solid var(--edge); }
}
.scanbox > h2, #how > h2{ display:block; width:100%; }
.scanbox .gf-cell{ align-items:center; text-align:center; }
.scanbox .gf-val.url{ text-align:center; }
.checks li{ align-content:start; }
@media (max-width:480px){ .scanbox .gf-val.url{ font-size:20px; } }

/* "Scan a repo" styled like $SNIFF on the banner: light Lexend, jellyfish gradient per letter, golden glow */
.scanbox > h2{ font-weight:300; font-size:clamp(52px,8vw,112px); line-height:1.08; letter-spacing:-.02em; margin:6px 0 14px; padding-bottom:4px;
  color:rgb(var(--j-jl)); text-shadow:none;
  filter:drop-shadow(0 0 2px rgba(var(--j-wh),.7)) drop-shadow(0 0 22px rgba(var(--j-jb),.5)) drop-shadow(0 0 60px rgba(var(--j-jb),.3)); }
.scanbox > h2 .ch{ color:transparent; -webkit-background-clip:text; background-clip:text; text-shadow:none;
  background-image:linear-gradient(180deg, rgb(var(--j-wh)) 8%, rgb(var(--j-jw)) 34%, rgb(var(--j-jl)) 62%, rgb(var(--j-jb)) 96%); }
.scanbox > h2[data-rise].in{ clip-path:inset(-40% -10% -40% -10%); }