*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  :root{
    --bg:#06070e; --panel:rgba(255,255,255,.045); --panel-solid:#11131f;
    --line:rgba(255,255,255,.09); --txt:#eceefb; --muted:#878fa6;
    --v:#7c5cff; --b:#38bdf8; --g:#34d399; --y:#fbbf24; --p:#f472b6;
    --maxw:1080px;
  }
  html{scroll-behavior:smooth}
  body{
    font-family:"Space Grotesk",system-ui,sans-serif;color:var(--txt);
    background:
      radial-gradient(1000px 700px at 15% -10%, rgba(124,92,255,.22), transparent 55%),
      radial-gradient(900px 600px at 95% 0%, rgba(56,189,248,.16), transparent 50%),
      radial-gradient(800px 800px at 50% 120%, rgba(244,114,182,.14), transparent 55%),
      var(--bg);
    min-height:100dvh;overflow-x:hidden;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  a{color:inherit;text-decoration:none}
  .grad{background:linear-gradient(90deg,var(--v),var(--b) 45%,var(--g) 75%,var(--y));-webkit-background-clip:text;background-clip:text;color:transparent}

  /* nav */
  header{position:fixed;inset:0 0 auto 0;z-index:100;transition:.35s;padding:18px 0}
  header.scrolled{background:rgba(6,7,14,.78);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:12px 0}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .brand{font-weight:700;letter-spacing:.26em;font-size:1.15rem}
  .navlinks{display:flex;gap:22px;align-items:center;margin-left:auto}
  .navlinks a{font-size:.9rem;color:var(--muted);transition:.2s;font-weight:500}
  .navlinks a:hover{color:var(--txt)}
  .cta{padding:.6em 1.2em;border-radius:50px;background:linear-gradient(135deg,var(--v),#5b8cff);color:#fff!important;font-weight:600;box-shadow:0 10px 26px -10px rgba(124,92,255,.7);transition:transform .15s}
  .cta:active{transform:scale(.96)}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .theme-control{position:relative;flex:none;font-size:.85rem}
  .theme-control summary{min-height:40px;min-width:108px;padding:9px 12px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--txt);font-weight:500;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .theme-control summary::-webkit-details-marker{display:none}
  .theme-control summary>svg{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:1.5;transition:transform .15s}
  .theme-control[open] summary>svg{transform:rotate(180deg)}
  .theme-control summary:hover,.theme-control[open] summary{border-color:var(--v)}
  .theme-menu{position:absolute;right:0;top:calc(100% + 8px);width:160px;padding:5px;border:1px solid var(--line);border-radius:5px;background:var(--panel-solid);box-shadow:0 12px 28px #0002;display:grid;gap:2px}
  .theme-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:9px 10px;border:0;border-radius:2px;background:transparent;color:var(--muted);font:inherit;text-align:left;cursor:pointer}
  .theme-menu button:hover{background:var(--panel);color:var(--txt)}
  .theme-menu button[aria-pressed="true"]{background:color-mix(in srgb,var(--v) 14%,transparent);color:var(--txt)}
  .theme-menu button>svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
  .theme-check{margin-left:auto;color:var(--v);visibility:hidden}
  .theme-menu button[aria-pressed="true"] .theme-check{visibility:visible}
  @media(max-width:800px){.navlinks a:not(.cta){display:none}}
  @media(max-width:480px){.navlinks{display:none}.nav{gap:16px}}

  /* hero */
  .hero{position:relative;padding:150px 0 70px;text-align:center;overflow:hidden}
  .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
  .floater{position:absolute;width:46px;height:46px;border-radius:8px;opacity:.16;filter:blur(.4px);animation:fall linear infinite}
  @keyframes fall{0%{transform:translateY(-120px) rotate(0)}100%{transform:translateY(115vh) rotate(220deg)}}
  .hero .inner{position:relative;z-index:2}
  .tag{display:inline-block;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
    border:1px solid var(--line);border-radius:50px;padding:.5em 1.2em;margin-bottom:24px;background:var(--panel)}
  .hero h1{font-size:clamp(3rem,11vw,6.5rem);font-weight:700;line-height:.95;letter-spacing:-.02em;margin-bottom:.22em}
  .hero p{color:var(--muted);font-size:1.12rem;max-width:30ch;margin:0 auto 32px}
  .hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .btn{border:none;border-radius:50px;padding:.95em 2em;font-family:inherit;font-weight:600;font-size:1rem;cursor:pointer;transition:transform .15s,box-shadow .15s;letter-spacing:.01em}
  .btn-primary{background:linear-gradient(135deg,var(--v),#5b8cff);color:#fff;box-shadow:0 14px 34px -12px rgba(124,92,255,.8)}
  .btn-ghost{background:var(--panel);color:var(--txt);border:1px solid var(--line)}
  .btn:active{transform:scale(.96)}

  /* sections */
  section{position:relative;z-index:2;padding:64px 0}
  .sec-title{text-align:center;font-size:clamp(1.8rem,5vw,2.6rem);font-weight:700;margin-bottom:8px}
  .sec-sub{text-align:center;color:var(--muted);margin-bottom:40px}

  /* GAME */
  .game-shell{display:flex;justify-content:center}
  .game{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}
  .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .pill{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:9px 13px;text-align:center;min-width:62px;backdrop-filter:blur(8px)}
  .pill .k{font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .pill .v{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
  .hud{display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px}
  .next{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;backdrop-filter:blur(8px)}
  .next .k{font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .stage{position:relative;border-radius:20px;padding:11px;
    background:linear-gradient(160deg,rgba(124,92,255,.16),rgba(56,189,248,.08));
    border:1px solid var(--line);
    box-shadow:0 40px 90px -40px rgba(124,92,255,.6), inset 0 0 0 1px rgba(255,255,255,.03)}
  #board{display:block;width:100%;height:auto;border-radius:12px;background:radial-gradient(circle at 50% 32%,#0d1124,#05060d 78%);touch-action:none}
  .overlay{position:absolute;inset:11px;border-radius:12px;background:rgba(5,6,13,.9);backdrop-filter:blur(8px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:22px;
    opacity:0;pointer-events:none;transition:opacity .3s}
  .overlay.show{opacity:1;pointer-events:auto}
  .overlay h2{font-size:1.9rem}
  .overlay p{color:var(--muted);font-size:.92rem;max-width:90%}
  #nameentry{display:none;flex-direction:column;gap:10px;width:100%;max-width:240px}
  #nameentry.show{display:flex}
  #playername{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;color:var(--txt);
    padding:.7em 1em;font-family:inherit;font-size:1rem;text-align:center;outline:none}
  #playername:focus{border-color:var(--v)}
  .row-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

  /* on-screen pad */
  .pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .key{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:14px;padding:15px 0;font-size:1.3rem;cursor:pointer;transition:.1s;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
  .key:active{background:rgba(255,255,255,.1);transform:translateY(1px)}
  .key.accent{color:#b9acff}
  .legend{font-size:.76rem;color:var(--muted);text-align:center;line-height:1.6}
  .legend b{color:#b9acff;font-weight:500}

  /* how-to cards */
  .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px 20px;text-align:center;backdrop-filter:blur(8px);transition:transform .25s,border-color .25s}
  .card:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.5)}
  .card .ic{font-size:1.8rem;margin-bottom:10px}
  .card h4{font-size:1.05rem;margin-bottom:6px}
  .card p{color:var(--muted);font-size:.86rem;line-height:1.5}
  @media(max-width:760px){.cards{grid-template-columns:1fr 1fr}}

  /* leaderboard */
  .lb-wrap{max-width:560px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:14px;backdrop-filter:blur(10px)}
  .lb-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
  .lb-head h3{font-size:1.1rem;letter-spacing:.04em}
  .lb-refresh{background:none;border:1px solid var(--line);color:var(--muted);border-radius:50px;padding:.4em 1em;font-family:inherit;font-size:.78rem;cursor:pointer;transition:.2s}
  .lb-refresh:hover{color:var(--txt);border-color:var(--v)}
  .lb-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;transition:background .2s}
  .lb-row+.lb-row{border-top:1px solid var(--line)}
  .lb-row .rank{font-weight:700;font-size:1.05rem;text-align:center;color:var(--muted)}
  .lb-row.r1 .rank{color:var(--y)} .lb-row.r2 .rank{color:#cfd6e6} .lb-row.r3 .rank{color:#e8a06b}
  .lb-row.top{background:rgba(124,92,255,.06)}
  .lb-row .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lb-row .meta{font-size:.72rem;color:var(--muted)}
  .lb-row .sc{font-weight:700;font-variant-numeric:tabular-nums;font-size:1.05rem}
  .lb-row.me{background:rgba(52,211,153,.1);box-shadow:inset 0 0 0 1px rgba(52,211,153,.35)}
  .lb-empty{padding:30px;text-align:center;color:var(--muted)}
  .lb-note{text-align:center;color:var(--muted);font-size:.74rem;margin-top:14px;opacity:.8}

  footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:34px 0;text-align:center;color:var(--muted);font-size:.84rem;margin-top:30px}
  @media(max-height:730px) and (max-width:680px){.legend{display:none}}

/* Local theme studies. Original layout and game sizing remain unchanged. */
html[data-theme="aurora"]{--bg:#061111;--panel:#b6f6df09;--panel-solid:#0b1f1d;--line:#b4ead51c;--txt:#e4f5ed;--muted:#91ada7;--v:#52cfa4;--b:#5cdbdf;--g:#a8db99;--y:#e8c98a;--p:#9eafdc}
[data-theme="aurora"] body{background:radial-gradient(1000px 700px at 15% -10%,#52cfa425,transparent 55%),radial-gradient(900px 600px at 95% 0%,#5cdbdf1d,transparent 50%),radial-gradient(800px 800px at 50% 120%,#a8db9911,transparent 55%),var(--bg)}
[data-theme="aurora"] .btn-primary,[data-theme="aurora"] .cta{background:linear-gradient(135deg,#72e3b5,#7fd7df);color:#06241e!important;box-shadow:0 14px 34px -12px #39b49060}
[data-theme="aurora"] .stage{background:linear-gradient(160deg,#52cfa41c,#5cdbdf0b);box-shadow:0 40px 90px -40px #52cfa450,inset 0 0 0 1px #ffffff05}
[data-theme="aurora"] #board{background:radial-gradient(circle at 50% 32%,#0c2422,#040d0d 78%)}
[data-theme="aurora"] .overlay{background:#04100ee8}
[data-theme="aurora"] header.scrolled{background:#061111d9}
[data-theme="aurora"] .key.accent,[data-theme="aurora"] .legend b{color:#8de1c4}
[data-theme="aurora"] .card:hover{border-color:#52cfa470}
[data-theme="aurora"] .lb-row.top{background:#52cfa40a}
html[data-theme="titanium"]{--bg:#0e1013;--panel:#e1e7f10a;--panel-solid:#181c22;--line:#c7d3e01c;--txt:#f0f1f3;--muted:#9ba5b3;--v:#b8c7d7;--b:#e0e7ee;--g:#8da6b8;--y:#ded2bb;--p:#a6b4d0}
[data-theme="titanium"] body{background:radial-gradient(1000px 700px at 15% -10%,#b1c3db1c,transparent 55%),radial-gradient(900px 600px at 95% 0%,#c2d8e612,transparent 50%),var(--bg)}
[data-theme="titanium"] .btn-primary,[data-theme="titanium"] .cta{background:linear-gradient(135deg,#eef2f6,#bac9d9);color:#202833!important;box-shadow:0 14px 34px -12px #bfcee52c}
[data-theme="titanium"] .stage{background:linear-gradient(160deg,#9aaaba1c,#c8d5e10a);box-shadow:0 40px 90px -40px #000c,inset 0 1px 0 #dfeaff1a}
[data-theme="titanium"] #board{background:radial-gradient(circle at 50% 32%,#1b212a,#090c11 78%)}
[data-theme="titanium"] .overlay{background:#0d1117e8}
[data-theme="titanium"] header.scrolled{background:#0e1013dc}
[data-theme="titanium"] .key.accent,[data-theme="titanium"] .legend b{color:#d0e1f3}
[data-theme="titanium"] .card:hover{border-color:#c0d5ea66}
[data-theme="titanium"] .lb-row.top{background:#c0d5ea08}
html[data-theme="daylight"]{--bg:#f5f1e9;--panel:#ffffff9c;--panel-solid:#fffdf9;--line:#83715b29;--txt:#332e29;--muted:#786c60;--v:#b86640;--b:#9b6852;--g:#4c8779;--y:#ad8333;--p:#b27991}
[data-theme="daylight"] body{background:radial-gradient(1000px 700px at 15% -10%,#edc29442,transparent 55%),radial-gradient(900px 600px at 95% 0%,#bbd5c634,transparent 50%),var(--bg)}
[data-theme="daylight"] .btn-primary,[data-theme="daylight"] .cta{background:linear-gradient(135deg,#b96f45,#9a5939);color:#fff!important;box-shadow:0 14px 34px -12px #a4774545}
[data-theme="daylight"] .stage{background:linear-gradient(160deg,#fdfaf3,#e6ded1);box-shadow:0 25px 65px -35px #71604755,inset 0 1px 0 #fff}
[data-theme="daylight"] #board{background:radial-gradient(circle at 50% 32%,#fffcf7,#eee6d9 78%)}
[data-theme="daylight"] .overlay{background:#f9f4e9ed}
[data-theme="daylight"] header.scrolled{background:#f5f1e9e8}
[data-theme="daylight"] .key.accent,[data-theme="daylight"] .legend b{color:#a1603e}
[data-theme="daylight"] .key:active{background:#c5a68430}
[data-theme="daylight"] .card:hover{border-color:#b56a4266}
[data-theme="daylight"] .lb-row.top{background:#c48a4810}
[data-theme="daylight"] #playername{background:#fff9}
[data-theme="daylight"] .lb-row.r2 .rank{color:#707b87}
[data-theme="daylight"] .lb-row.r3 .rank{color:#99623d}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.floater{animation:none}.btn,.cta,.card{transition:none}}

/* Separate visual study: preserve game dimensions, layout, and controls. */
:root{--radius-small:3px;--radius-panel:5px}
.grad{background:none;color:var(--txt)}
.hero h1{letter-spacing:-.055em}
.brand{letter-spacing:.16em}
.tag,.cta,.btn,.lb-refresh{border-radius:var(--radius-small)}
.pill,.next,.key,.card,.lb-wrap,.lb-row,#playername{border-radius:var(--radius-panel);backdrop-filter:none}
html[data-theme] .stage{border-radius:6px;background:var(--panel-solid);box-shadow:0 24px 50px -35px #0008,inset 0 1px 0 #ffffff05;padding:11px}
html[data-theme] #board{border-radius:2px;background:var(--bg)}
.overlay{border-radius:2px;backdrop-filter:none}
html[data-theme] .btn-primary,html[data-theme] .cta{box-shadow:none;background:var(--v);color:var(--bg)!important}
html[data-theme="daylight"] .btn-primary,html[data-theme="daylight"] .cta{color:#fff!important}
html[data-theme="original"] .btn-primary,html[data-theme="original"] .cta{color:#fff!important}
.floater{border-radius:2px!important;filter:none;opacity:.07}
.card:hover{transform:none}
.key{font-size:1.15rem}
.pill .k,.next .k{font-size:.59rem;letter-spacing:.14em}
.pill .v{font-size:1.12rem}
#tile-sample{display:block;width:252px;max-width:100%;height:70px;margin:7px 0 3px}
.geometry-choices{display:flex;gap:4px;padding-right:17px;border-right:1px solid #ffffff25}
.geometry-choices button{min-height:44px;padding:10px 12px;border:1px solid transparent;border-radius:4px;font:inherit;color:#cbd4e2;background:transparent;cursor:pointer}
.geometry-choices button:hover{background:#ffffff0c}
.geometry-choices button[aria-pressed="true"]{border-color:#a2afc4;background:#bacde018;color:#f8fbff}
.geometry-choices button:focus-visible{outline:2px solid #87dff2;outline-offset:3px}
.card .ic svg{width:28px;height:28px;fill:none;stroke:var(--v);stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
@media(max-width:680px){.overlay{gap:12px}}

/* A warm dark counterpart to Daylight. The selected contour geometry is shared. */
html[data-theme="nightfall"]{--bg:#171513;--panel:#fbf0df08;--panel-solid:#211e1b;--line:#e5d3b826;--txt:#efe7dd;--muted:#b1a598;--v:#d99970;--b:#bb9b87;--g:#86ad97;--y:#d3b76c;--p:#bf9bae;color-scheme:dark}
html[data-theme="daylight"]{color-scheme:light}
[data-theme="nightfall"] body{background:radial-gradient(1000px 700px at 15% -10%,#d9997014,transparent 55%),radial-gradient(900px 600px at 95% 0%,#86ad970a,transparent 50%),var(--bg)}
[data-theme="nightfall"] .overlay{background:#1c1916f5}
[data-theme="nightfall"] header.scrolled{background:#171513ed}
[data-theme="nightfall"] .key.accent,[data-theme="nightfall"] .legend b{color:#e1ad87}
[data-theme="nightfall"] .key:active{background:#e0b58c18}
[data-theme="nightfall"] .card:hover{border-color:#d9997066}
[data-theme="nightfall"] .lb-row.top{background:#d999700a}
[data-theme="nightfall"] #playername{background:#eee3d408}
[data-theme="nightfall"] .lb-row.r2 .rank{color:#c5c2bd}
[data-theme="nightfall"] .lb-row.r3 .rank{color:#c49370}

:focus-visible{outline:2px solid var(--v);outline-offset:4px}.status{min-height:1.3em;font-size:.8rem;color:var(--muted)}#submitscore:disabled{opacity:.65;cursor:wait}@font-face{font-family:"Space Grotesk";src:url('/space-grotesk.woff2') format('woff2');font-weight:300 700;font-display:swap}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.floater{animation:none}*{transition:none!important}}