:root{
  --bg:#07070c; --fg:#ecebf5; --muted:#8c8aa3;
  --a1:#7c5cff; --a2:#00d4ff;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
body{background:radial-gradient(1200px 700px at 50% 40%,color-mix(in srgb,var(--a1) 14%,transparent),transparent 70%),var(--bg)}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#field{touch-action:none}
#confetti{pointer-events:none;z-index:30}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-3rem;z-index:50;background:var(--fg);color:var(--bg);padding:.5rem .8rem;border-radius:.5rem}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--a2);outline-offset:3px;border-radius:6px}
a{color:inherit;text-decoration:none;background:linear-gradient(90deg,var(--a1),var(--a2));background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%}
a:hover{color:#fff;background-size:100% 2px}
.top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:clamp(1rem,3vw,1.75rem);z-index:10;pointer-events:none}
.top>*{pointer-events:auto}
.brand{font-weight:700;letter-spacing:.02em;font-size:.95rem;color:var(--muted)}
.brand .dot{color:var(--a2);padding:0 .15em}
.kbd-btn{display:flex;gap:.25rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:.35rem .45rem;border-radius:.6rem;cursor:pointer;color:var(--fg);transition:background .2s,border-color .2s}
.kbd-btn:hover{background:rgba(255,255,255,.08);border-color:color-mix(in srgb,var(--a2) 50%,transparent)}
kbd{font-family:var(--mono);font-size:.75rem;min-width:1.4em;text-align:center;padding:.15rem .35rem;border-radius:.35rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--fg)}
main{position:relative;z-index:5;height:100%;pointer-events:none}
.copy{position:absolute;left:0;right:0;bottom:clamp(5rem,16vh,9rem);text-align:center;padding:0 1.25rem}
.copy a{pointer-events:auto}
.tagline{margin:0;font-size:clamp(1.25rem,3.2vw,2rem);font-weight:650;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--fg),color-mix(in srgb,var(--a2) 70%,var(--fg)),var(--fg));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:.6rem 0 0;color:var(--muted);font-size:.95rem}
.hint{opacity:.7}
@media (hover:none){.hint{display:none}}
.fallback-title{position:absolute;top:30%;width:100%;text-align:center;font-size:clamp(3rem,15vw,9rem);font-weight:800;margin:0}
.foot{position:fixed;bottom:0;left:0;right:0;text-align:center;padding:1rem;font-family:var(--mono);font-size:.72rem;color:var(--muted);z-index:10;opacity:.8}
.palette[hidden]{display:none}
.palette{position:fixed;inset:0;z-index:40;display:flex;justify-content:center;align-items:flex-start;padding-top:15vh}
.palette-backdrop{position:absolute;inset:0;background:rgba(3,3,8,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.palette-panel{position:relative;width:min(560px,92vw);background:rgba(18,18,28,.92);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--a1) 25%,transparent);overflow:hidden;animation:pop .16s ease-out}
@keyframes pop{from{transform:translateY(-6px) scale(.98);opacity:0}}
#paletteInput{width:100%;border:0;outline:0;background:transparent;color:var(--fg);font:500 1.05rem var(--font);padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.08)}
#paletteList{list-style:none;margin:0;padding:.4rem;max-height:50vh;overflow:auto}
#paletteList li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .75rem;border-radius:.55rem;cursor:pointer}
#paletteList li .d{color:var(--muted);font-size:.85rem}
#paletteList li[aria-selected="true"]{background:linear-gradient(90deg,color-mix(in srgb,var(--a1) 30%,transparent),color-mix(in srgb,var(--a2) 18%,transparent))}
#paletteList li.empty{color:var(--muted);cursor:default}
.palette-out{padding:0 1.1rem;color:var(--fg);font-size:.92rem;line-height:1.55}
.palette-out:not(:empty){padding:.75rem 1.1rem;border-top:1px solid rgba(255,255,255,.08)}
.palette-foot{margin:0;padding:.55rem 1.1rem;font-size:.75rem;color:var(--muted);border-top:1px solid rgba(255,255,255,.06)}
.palette-foot kbd{font-size:.68rem}
@media (prefers-reduced-motion:reduce){.palette-panel{animation:none}}