:root{--bg:#f6f7fb;--ink:#1b2432;--ink-dim:#5d6980;--panel:#fff;--panel-soft:#f2f4f9;--accent:#3a7afe;--accent-2:#8a5cff}*{box-sizing:border-box}body,html{padding:0;margin:0;background:var(--bg);color:var(--ink)}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:radial-gradient(900px 600px at -10% -10%,rgba(138,92,255,.11),transparent 55%),radial-gradient(900px 600px at 120% 10%,rgba(58,122,254,.12),transparent 55%),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(0deg,rgba(0,0,0,.03) 1px,transparent 1px),var(--bg);background-size:auto,auto,28px 28px,28px 28px,auto;min-height:100svh}a{color:inherit;text-decoration:none}nav{position:-webkit-sticky;position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:12px 16px;background:linear-gradient(180deg,hsla(0,0%,100%,.85),hsla(0,0%,100%,.55));border-bottom:1px solid rgba(0,0,0,.06);-webkit-backdrop-filter:saturate(140%) blur(6px);backdrop-filter:saturate(140%) blur(6px)}.container{max-width:980px;margin:0 auto;padding:24px}.footer{color:var(--ink-dim);font-size:13px;padding:24px;opacity:.85}.header{font-size:34px;font-weight:800;margin:8px 0 4px;letter-spacing:.2px}.sub{color:var(--ink-dim);margin-top:0}.card{background:linear-gradient(180deg,var(--panel),var(--panel-soft));border:1px solid rgba(0,0,0,.06);border-radius:14px;box-shadow:0 10px 24px rgba(26,35,57,.06)}.grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:16px;gap:16px}.grid,.pill{display:grid}.pill{border:1px solid rgba(0,0,0,.08);background:#fff;border-radius:12px;padding:8px 12px;grid-gap:2px;gap:2px;min-width:110px}.pill .label{font-size:11px;color:var(--ink-dim);letter-spacing:.8px}.pill .value{font-weight:800;font-size:22px}.btn{border:1px solid rgba(0,0,0,.12);background:linear-gradient(180deg,#fff,#eef2ff);color:#1f2a44;padding:10px 16px;border-radius:12px;font-weight:700;cursor:pointer;transition:transform .08s ease,box-shadow .2s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(37,99,235,.15)}.btn:active{transform:translateY(0)}.board{width:min(92vw,480px);margin:10px auto 0;padding:14px;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;gap:12px;border-radius:16px;background:linear-gradient(180deg,#fff,#f5f7fc);border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 24px rgba(26,35,57,.08);-webkit-user-select:none;-moz-user-select:none;user-select:none}.tile{height:clamp(62px,16vw,92px);display:grid;place-items:center;font-weight:900;font-size:clamp(18px,5vw,28px);border-radius:12px;border:1px solid rgba(0,0,0,.05);transition:background-color .18s ease,color .18s ease,transform .12s ease}.tile.appear{animation:pop .16s ease-out}@keyframes pop{0%{transform:scale(.7);opacity:.2}to{transform:scale(1);opacity:1}}.pad{display:grid;width:min(92vw,420px);grid-template-areas:".   up   ." "left ctr right" ".  down  .";grid-gap:10px;gap:10px;margin:18px auto 0}.pad .ctr{grid-area:ctr}.pad .up{grid-area:up}.pad .down{grid-area:down}.pad .left{grid-area:left}.pad .right{grid-area:right}.pad .key{display:grid;place-items:center;height:54px;border-radius:12px;background:linear-gradient(180deg,#fff,#eef2ff);border:1px solid rgba(0,0,0,.1);font-weight:800;color:#1f2a44}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.center{display:grid;place-items:center}.m1{margin:8px 0}.m2{margin:16px 0}.modal-backdrop{position:fixed;inset:0;display:grid;place-items:center;background:rgba(15,23,42,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100}.modal{width:min(92vw,540px);background:linear-gradient(180deg,#fff,#f5f7fc);border:1px solid rgba(0,0,0,.1);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.25);padding:24px;text-align:center}.modal h2{font-size:clamp(28px,4.5vw,38px);margin:0 0 8px}.modal p{color:var(--ink-dim);margin:0 0 16px}.modal .btn{background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;border-color:rgba(37,99,235,.4)}