:root{--bg:#05060f;--bg2:#0a0d1f;--cell:#080c1e;--c1:#19f0ff;--c2:#ff2bd6;--c1-soft:#19f0ff24;--c2-soft:#ff2bd62e;--err:#ff3b5c;--err-soft:#ff3b5c33;--text:#d8f6ff;--dim:#d8f6ff73;--font-display:"Orbitron", "Segoe UI", system-ui, sans-serif;--font-mono:"Share Tech Mono", ui-monospace, Consolas, monospace;--board:max(260px, min(calc(100vw - 32px), calc(76vh - 190px), 480px));--theme-background-image:none}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(ellipse at 50% 0%, var(--c2-soft), transparent 55%), radial-gradient(ellipse at 50% 100%, var(--c1-soft), transparent 60%), var(--theme-background-image) center / cover no-repeat, linear-gradient(var(--bg), var(--bg2));color:var(--text);font-family:var(--font-display);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background-attachment:fixed;overflow-x:hidden}body:before{content:"";background-image:linear-gradient(var(--c1-soft) 1px, transparent 1px), linear-gradient(90deg, var(--c1-soft) 1px, transparent 1px);opacity:.35;pointer-events:none;background-size:32px 32px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(#000 30%,#0000 80%);mask-image:radial-gradient(#000 30%,#0000 80%)}button{font:inherit;color:inherit;cursor:pointer}.app{max-width:520px;padding:max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:100dvh;margin:0 auto;display:flex;position:relative}.title-wrap{width:var(--board);grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;display:grid}.title{text-align:center;letter-spacing:.04em;margin:0;font-size:clamp(34px,11vw,64px);font-weight:900;line-height:1}.title span{animation:6s infinite flicker}.t1{color:color-mix(in srgb, var(--c1) 55%, white);text-shadow:0 0 4px var(--c1), 0 0 12px var(--c1), 0 0 28px var(--c1)}.t2{color:color-mix(in srgb, var(--c2) 55%, white);text-shadow:0 0 4px var(--c2), 0 0 12px var(--c2), 0 0 28px var(--c2);animation-delay:1.3s!important}@keyframes flicker{0%,92%,96%,to{opacity:1}93%{opacity:.55}95%{opacity:.8}}.board-frame{width:var(--board);position:relative}.micro{font-family:var(--font-mono);letter-spacing:.12em;color:var(--dim);justify-content:space-between;padding:3px 2px;font-size:10px;display:flex}.board{width:var(--board);height:var(--board);background:var(--c1);box-shadow:0 0 8px var(--c1), 0 0 24px color-mix(in srgb, var(--c1) 50%, transparent), inset 0 0 6px var(--c1);border-radius:6px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;display:grid}.box{background:color-mix(in srgb, var(--c1) 45%, transparent);grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:1px;display:grid}.box:first-child{border-top-left-radius:4px;overflow:hidden}.box:nth-child(3){border-top-right-radius:4px;overflow:hidden}.box:nth-child(7){border-bottom-left-radius:4px;overflow:hidden}.box:nth-child(9){border-bottom-right-radius:4px;overflow:hidden}.cell{background:var(--cell);font-family:var(--font-display);font-weight:700;font-size:calc(var(--board) / 16);color:var(--c1);text-shadow:0 0 6px var(--c1);border:0;outline:none;place-items:center;padding:0;transition:background .12s;display:grid;position:relative}.cell.user{color:var(--c2);text-shadow:0 0 6px var(--c2), 0 0 12px var(--c2);font-weight:500}.cell.peer{background:color-mix(in srgb, var(--c1) 9%, var(--cell))}.cell.same{background:color-mix(in srgb, var(--c2) 22%, var(--cell))}.cell.error{color:var(--err);text-shadow:0 0 6px var(--err), 0 0 14px var(--err);background:var(--err-soft)}.cell.selected{background:color-mix(in srgb, var(--c2) 26%, var(--cell));box-shadow:inset 0 0 0 2px var(--c2), inset 0 0 12px var(--c2), 0 0 14px var(--c2);z-index:2}.cell.pop{animation:.25s ease-out pop}@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}to{transform:scale(1)}}.cell.shake{animation:.3s shake}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.cell.flash{animation:.6s ease-out flash}@keyframes flash{0%{background:var(--c1)}to{}}.notes{font-family:var(--font-mono);font-size:calc(var(--board) / 38);color:var(--dim);text-shadow:none;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);font-weight:400;display:grid;position:absolute;inset:2px}.notes span{place-items:center;display:grid}.notes span.hl{color:var(--c2);text-shadow:0 0 4px var(--c2)}.status{width:var(--board);grid-template-columns:1.15fr 1fr 1.2fr;gap:8px;display:grid}.pill{--pc:var(--c1);border:1.5px solid var(--pc);letter-spacing:.04em;text-align:center;white-space:nowrap;color:color-mix(in srgb, var(--pc) 70%, white);background:color-mix(in srgb, var(--pc) 8%, transparent);box-shadow:0 0 8px color-mix(in srgb, var(--pc) 60%, transparent), inset 0 0 8px color-mix(in srgb, var(--pc) 30%, transparent);text-shadow:0 0 6px var(--pc);border-radius:999px;padding:7px 6px;font-size:clamp(9px,2.6vw,12px);font-weight:700}.pill-level{--pc:var(--c2)}.pill-level:hover{background:color-mix(in srgb, var(--pc) 20%, transparent)}.pill-mistakes{--pc:var(--err)}.pill-time span,.pill-mistakes span{font-family:var(--font-mono);font-size:1.15em}.pad{width:var(--board);grid-template-columns:repeat(10,1fr);row-gap:4px;display:grid}.hex{--hc:var(--c1);aspect-ratio:1.1;width:86%;color:color-mix(in srgb, var(--hc) 65%, white);text-shadow:0 0 8px var(--hc);filter:drop-shadow(0 0 5px var(--hc));background:0 0;border:0;grid-column:span 2;justify-self:center;padding:0;font-size:clamp(20px,6vw,28px);font-weight:500;transition:transform 80ms,filter .15s;position:relative}.hex:nth-child(6){grid-column:2/span 2}.hex:before,.hex:after{content:"";clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);position:absolute;inset:0}.hex:before{background:var(--hc)}.hex:after{background:color-mix(in srgb, var(--hc) 10%, var(--bg));inset:2px}.hex span{z-index:1;position:relative}.hex small{z-index:1;font-family:var(--font-mono);color:var(--dim);text-shadow:none;font-size:9px;position:absolute;bottom:14%;left:0;right:0}.hex:hover{filter:drop-shadow(0 0 9px var(--hc))}.hex:active{transform:scale(.93)}.hex.active{--hc:var(--c2)}.hex.active:after{background:color-mix(in srgb, var(--c2) 22%, var(--bg))}.hex.done{opacity:.25;filter:none}.notes-mode .hex{--hc:color-mix(in srgb, var(--c1) 55%, var(--c2))}.actions{width:var(--board);grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.act{--ac:var(--c1);border:1.5px solid var(--ac);background:color-mix(in srgb, var(--ac) 8%, transparent);letter-spacing:.06em;color:color-mix(in srgb, var(--ac) 65%, white);text-shadow:0 0 6px var(--ac);box-shadow:0 0 8px color-mix(in srgb, var(--ac) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--ac) 25%, transparent);border-radius:10px;padding:9px 2px;font-size:clamp(9px,2.6vw,12px);font-weight:700;transition:background .15s,transform 80ms;position:relative}.act-c2{--ac:var(--c2)}.act:hover{background:color-mix(in srgb, var(--ac) 20%, transparent)}.act:active{transform:scale(.95)}.act[aria-pressed=true]{background:var(--ac);color:var(--bg);text-shadow:none;box-shadow:0 0 14px var(--ac)}.act:disabled{opacity:.35;cursor:default}.toast{border:1px solid var(--c1);background:color-mix(in srgb, var(--c1) 12%, var(--bg));color:var(--text);letter-spacing:.08em;box-shadow:0 0 12px var(--c1);opacity:0;pointer-events:none;border-radius:999px;padding:8px 16px;font-size:12px;transition:opacity .2s,transform .2s;position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px)}.toast.show{opacity:1;transform:translate(-50%)}.overlay{z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#02030ac7;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.overlay[hidden]{display:none}.modal{border:1.5px solid var(--c2);background:color-mix(in srgb, var(--c2) 6%, var(--bg));width:min(360px,100%);box-shadow:0 0 20px var(--c2), inset 0 0 20px color-mix(in srgb, var(--c2) 25%, transparent);text-align:center;border-radius:14px;padding:24px 20px;animation:.25s ease-out pop}.modal-title{letter-spacing:.08em;color:color-mix(in srgb, var(--c2) 55%, white);text-shadow:0 0 8px var(--c2), 0 0 20px var(--c2);margin:0 0 6px;font-size:26px;font-weight:900}.modal-text{font-family:var(--font-mono);color:var(--dim);margin:0 0 18px;font-size:14px;line-height:1.5}.modal-levels[hidden]{display:none}.modal-levels{grid-template-columns:1fr 1fr;gap:10px;display:grid}.modal-levels .act{padding:12px 4px;font-size:13px}.modal-extra{gap:10px;margin-top:12px;display:grid}.modal-extra:empty{display:none}.theme-list{gap:8px;max-height:min(52vh,360px);margin:0 -4px 14px;padding:4px;display:grid;overflow-y:auto}.theme-opt{text-align:left;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;font-size:13px;display:flex}.theme-opt .mark{font-family:var(--font-mono);opacity:0;font-size:11px}.theme-opt[aria-checked=true]{background:color-mix(in srgb, var(--ac) 24%, transparent)}.theme-opt[aria-checked=true] .mark{opacity:1}.theme-status{font-family:var(--font-mono);color:var(--err);margin:0 0 12px;font-size:12px}.theme-status:empty{display:none}.modal-extra .act{padding:12px 4px;font-size:13px}@media (height<=700px){.app{gap:10px}.title{font-size:clamp(32px,min(11vw,10vh),56px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.menu-btn{border:1.5px solid var(--c1);background:color-mix(in srgb, var(--c1) 8%, transparent);width:40px;height:40px;box-shadow:0 0 8px color-mix(in srgb, var(--c1) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--c1) 25%, transparent);border-radius:10px;align-content:center;justify-items:center;gap:5px;padding:0;transition:background .15s,transform 80ms;display:grid}.menu-btn span{background:color-mix(in srgb, var(--c1) 65%, white);width:20px;height:2px;box-shadow:0 0 6px var(--c1);border-radius:1px}.menu-btn:hover{background:color-mix(in srgb, var(--c1) 20%, transparent)}.menu-btn:active{transform:scale(.94)}.drawer-backdrop{z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;background:#02030a99;transition:opacity .2s;position:fixed;inset:0}.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer{z-index:21;width:min(300px,85vw);padding:max(16px, env(safe-area-inset-top)) 16px 16px max(16px, env(safe-area-inset-left));background:color-mix(in srgb, var(--c1) 5%, var(--bg));border-right:1.5px solid var(--c1);box-shadow:0 0 24px color-mix(in srgb, var(--c1) 45%, transparent);flex-direction:column;transition:transform .22s ease-out;display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-105%)}.drawer.open{transform:none}.drawer-head{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.drawer-title{letter-spacing:.1em;color:color-mix(in srgb, var(--c1) 55%, white);text-shadow:0 0 8px var(--c1), 0 0 18px var(--c1);margin:0;font-size:22px;font-weight:900}.drawer-close{border:1.5px solid var(--c2);width:36px;height:36px;color:color-mix(in srgb, var(--c2) 65%, white);text-shadow:0 0 6px var(--c2);box-shadow:0 0 8px color-mix(in srgb, var(--c2) 55%, transparent);background:0 0;border-radius:50%;padding:0;font-size:22px;line-height:1}.drawer-close:hover{background:color-mix(in srgb, var(--c2) 18%, transparent)}.drawer-section{font-family:var(--font-mono);letter-spacing:.2em;color:var(--dim);margin:0 0 10px;font-size:12px;font-weight:400}.drawer .theme-list{max-height:none;margin:0;overflow:visible}.drawer-section{margin-top:18px}.drawer-head+.drawer-section{margin-top:0}.drawer-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.drawer-actions .act{padding:11px 4px}.stats table{border-collapse:collapse;width:100%;font-family:var(--font-mono);font-size:13px}.stats th,.stats td{text-align:right;padding:5px 4px;font-weight:400}.stats thead th{letter-spacing:.14em;color:var(--dim);font-size:10px}.stats tbody th{text-align:left;font-family:var(--font-display);letter-spacing:.06em;color:color-mix(in srgb, var(--c1) 65%, white);text-shadow:0 0 6px var(--c1);font-size:11px;font-weight:700}.stats tbody tr+tr{border-top:1px solid var(--c1-soft)}.stats .streak{font-family:var(--font-mono);letter-spacing:.08em;color:var(--dim);margin:10px 0 0;font-size:12px}.stats .streak b{color:color-mix(in srgb, var(--c2) 60%, white);text-shadow:0 0 6px var(--c2);font-weight:400}.how{font-family:var(--font-mono);color:var(--dim);-webkit-user-select:text;user-select:text;font-size:13px;line-height:1.5}.how p{margin:0 0 8px}.how b{color:color-mix(in srgb, var(--c1) 65%, white);font-weight:400}.how .keys{font-size:11px}.cell:focus-visible,.act:focus-visible,.hex:focus-visible,.pill:focus-visible,.menu-btn:focus-visible,.drawer-close:focus-visible{outline:2px solid var(--c2);outline-offset:2px}