/* TOKENS (locked off the approved art; ui-ux-pro-max: flat design, bold colour, no heavy shadows)
   wall blue  #0067bd / #0074cf   (sampled from avatar background #006dcd)
   deep blue  #003a78  ink #00162e
   turquoise  #1fe0cf  (hair streaks)   white #ffffff   ice #cfe9ff
   type: M PLUS Rounded 1c 900/800/400 (display+body), Fira Code 500 (CA only)
   spacing: 8 / 16 / 24 / 40 px   radius: 6px frame, 999px button   motion: one press, one burst */
@font-face{font-family:"M PLUS Rounded 1c";font-weight:400;font-display:swap;src:url(assets/fonts/m-plus-rounded-1c-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"M PLUS Rounded 1c";font-weight:800;font-display:swap;src:url(assets/fonts/m-plus-rounded-1c-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"M PLUS Rounded 1c";font-weight:900;font-display:swap;src:url(assets/fonts/m-plus-rounded-1c-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Fira Code";font-weight:500;font-display:swap;src:url(assets/fonts/fira-code-latin-500-normal.woff2) format("woff2")}

:root{
  --wall:#0067bd; --wall-hi:#0a82dc; --deep:#003a78; --ink:#00162e;
  --teal:#1fe0cf; --white:#fff; --ice:#cfe9ff;
  --display:"M PLUS Rounded 1c","Arial Rounded MT Bold",system-ui,sans-serif;
  --mono:"Fira Code",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
img{max-width:100%;height:auto;display:block}
body{
  font-family:var(--display);color:var(--white);background:var(--wall);
  overflow-x:hidden;
}
.wall{
  min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;
  background:
    radial-gradient(circle at center,rgba(255,255,255,.10) 1.6px,transparent 2.2px) 0 0/14px 14px,
    radial-gradient(ellipse 70% 80% at 62% 45%,var(--wall-hi),var(--wall) 70%);
}

/* top LED bar */
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 24px;background:var(--ink);font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.06em;color:var(--ice);min-height:40px}
.bar__ticker{flex:1;overflow:hidden;white-space:nowrap;color:var(--teal);text-transform:uppercase}
.bar__ticker span{display:inline-block;will-change:transform}
.bar__status{white-space:nowrap}
.bar__status b{color:var(--white);font-weight:500}
body.is-open .bar__status b{color:var(--teal)}

/* stage: asymmetric, text left and low, screen right and high */
.stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:40px;padding:24px 40px 24px 56px;max-width:1280px;width:100%;margin:0 auto}
.copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:24px}
.kicker{font-weight:800;font-size:.95rem;background:var(--ink);color:var(--ice);padding:6px 12px;border-radius:6px;transform:rotate(-1.5deg)}
.hero{font-weight:900;font-size:clamp(2.7rem,6vw,5.4rem);line-height:.95;letter-spacing:-.02em;text-transform:lowercase}
.hero__name{color:var(--teal);display:inline-block}
.sub{font-weight:400;font-size:clamp(1rem,1.7vw,1.35rem);color:var(--ice);max-width:34ch}

.bell{display:flex;align-items:center;gap:24px;margin-top:16px}
.bell__btn{
  width:128px;height:128px;border-radius:999px;border:0;cursor:pointer;flex:none;
  background:var(--teal);padding:8px;
  box-shadow:0 0 0 6px var(--white),0 0 0 12px var(--deep),0 0 44px 12px rgba(31,224,207,.65);
  transition:transform .12s ease,box-shadow .12s ease;
  animation:glow 2.4s ease-in-out infinite;
}
.bell__face{display:grid;place-items:center;width:100%;height:100%;border-radius:999px;background:var(--white);color:var(--deep);font-weight:900;font-size:1.5rem;letter-spacing:.04em;border:6px solid var(--teal)}
.bell__btn:hover{transform:scale(1.04)}
.bell__btn:active,.bell__btn.is-hit{transform:scale(.93);box-shadow:0 0 0 6px var(--white),0 0 0 12px var(--deep),0 0 70px 24px rgba(31,224,207,.9)}
.bell__btn:focus-visible{outline:4px solid var(--white);outline-offset:14px}
.bell__cap{font-weight:800;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ice);max-width:16ch;line-height:1.3}
@keyframes glow{0%,100%{box-shadow:0 0 0 6px var(--white),0 0 0 12px var(--deep),0 0 30px 6px rgba(31,224,207,.45)}50%{box-shadow:0 0 0 6px var(--white),0 0 0 12px var(--deep),0 0 52px 16px rgba(31,224,207,.75)}}

.screen{justify-self:center;width:min(100%,560px,calc(100dvh - 190px));border:10px solid var(--white);border-radius:6px;background:var(--wall);box-shadow:16px 16px 0 var(--deep);transform:rotate(1.2deg)}
.screen img{width:100%;aspect-ratio:1/1}

/* bottom listing crawl */
.crawl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 24px;background:var(--ink);border-top:4px solid var(--teal)}
.crawl__tag{font-weight:900;font-size:.8rem;letter-spacing:.12em;background:var(--teal);color:var(--ink);padding:4px 10px;border-radius:4px}
.crawl__ca{flex:1 1 280px;min-width:0;text-align:left;background:transparent;border:1px dashed rgba(207,233,255,.45);border-radius:4px;color:var(--white);padding:8px 12px;cursor:pointer;font:inherit;display:flex;gap:12px;align-items:center}
.crawl__ca:hover{border-color:var(--teal)}
.crawl__ca:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.crawl__lbl{font-weight:800;font-size:.75rem;color:var(--teal);letter-spacing:.1em}
.crawl__ca code{font-family:var(--mono);font-weight:500;font-size:clamp(.85rem,1.4vw,1.05rem);overflow-wrap:anywhere;text-transform:none}
.crawl__ca.is-copied code{color:var(--teal)}
.crawl__links{display:flex;gap:8px;align-items:center}
.crawl__links a{font-weight:900;font-size:.82rem;letter-spacing:.06em;color:var(--white);text-decoration:none;padding:8px 14px;border-radius:4px;border:2px solid var(--white);white-space:nowrap}
.crawl__links a:first-child{background:var(--white);color:var(--deep)}
.crawl__links a:hover{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.crawl__links a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.xlink{display:grid;place-items:center;padding:8px 10px!important}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.noscript{position:fixed;left:0;right:0;bottom:64px;text-align:center;background:var(--ink);padding:8px;font-size:.85rem;z-index:60}

@media (max-width:820px){
  .bar{padding:8px 16px;font-size:.7rem}
  .bar__status{font-size:.7rem}
  .stage{grid-template-columns:1fr;gap:16px;padding:16px 16px 24px;align-content:start}
  .screen{order:-1;justify-self:center;width:clamp(180px,calc(100dvh - 560px),min(86vw,420px));box-shadow:10px 10px 0 var(--deep);border-width:8px;transform:rotate(1.2deg)}
  .copy{padding-top:0;align-items:flex-start;gap:12px}
  .kicker{font-size:.74rem;padding:5px 10px}
  .hero{font-size:clamp(2.3rem,11.5vw,3.6rem)}
  .sub{font-size:.95rem;max-width:none}
  .bell{margin-top:12px;gap:20px}
  .bell__btn{width:96px;height:96px;margin-left:8px}
  .bell__face{font-size:1.1rem;border-width:5px}
  .crawl{padding:12px 16px;gap:10px}
  .crawl__ca{order:1;flex:1 1 100%}
  .crawl__tag{display:none}
  .crawl__links{order:3;flex:1}
  .crawl__links a:first-child{flex:1;text-align:center}
}
@media (max-width:380px){.crawl__links a{padding:8px 10px;font-size:.75rem}}
@media (prefers-reduced-motion:reduce){
  .bell__btn{animation:none}
  .bell__btn,.bell__btn:hover,.bell__btn:active{transition:none}
}