:root{--paper: #ffffff;--grid: #eef0f4;--sheet: #ffffff;--ink: #2d3340;--muted: #7a8293;--line: #dfe3ea;--accent: #3a66db;--accent-ink: #ffffff;--sel: #3a66db;--sel-bg: #eaf0fd;--good: #23955a;--good-bg: #e6f5ec;--bad: #d64545;--bad-bg: #fcebeb;--f-display: "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;--f-num: "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;--c1: #e2574c;--c2: #3a66db;--c3: #2fae6b;--c4: #f2b632;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--paper);color:var(--ink);font-family:var(--f-display);font-size:16px;line-height:1.5;min-height:100vh;padding-block:20px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.wrap{max-width:640px;margin:0 auto;display:grid;gap:18px}header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}h1{font-size:1.15rem;margin:0;font-weight:700;color:var(--ink)}.brand{display:flex;align-items:center;gap:14px;line-height:1}.brand-name{color:var(--ink)}.brand-hire{font-weight:800}.brand-poo{font-weight:400}.brand-icon{width:32px;height:32px;object-fit:cover;flex-shrink:0}.best{font-size:.82rem;color:var(--muted)}.sheet{background:var(--sheet);padding:8px 0;display:grid;gap:22px}.label{font-size:.78rem;color:var(--muted);font-weight:600}.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}.stat{display:grid;gap:0}.stat b{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}.timebar{height:4px;background:var(--grid);border-radius:2px;overflow:hidden}.timebar i{display:block;height:100%;background:var(--accent);width:100%;transition:width .25s linear}.timebar.low i{background:var(--bad)}.puzzle{display:grid;justify-items:center;gap:26px;padding-block:18px 6px}.eq{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}.slot{width:3.4rem;height:3.4rem;border:2px dashed var(--line);border-radius:50%;display:grid;place-items:center;font-size:1.15rem;font-weight:700;color:var(--sel);font-variant-numeric:tabular-nums}.slot.filled{border-style:solid;border-color:var(--sel);background:var(--sel-bg)}.op{width:2.6rem;height:2.6rem;background:var(--grid);color:var(--ink);border-radius:50%;display:grid;place-items:center;font-size:1.5rem;font-weight:700}.equals{font-size:1.4rem;color:var(--muted)}.target{width:6.2rem;height:6.2rem;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:2.2rem;font-weight:800;font-variant-numeric:tabular-nums}.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;width:100%;max-width:560px;justify-items:stretch}.tile{position:relative;font-family:var(--f-num);font-weight:700;font-size:1.35rem;font-variant-numeric:tabular-nums;width:100%;max-width:104px;height:76px;border-radius:14px;border:2px solid var(--line);background:var(--sheet);color:var(--ink);cursor:pointer;transition:transform .08s,background .12s,border-color .12s;padding:0;box-shadow:0 2px 6px #2d334014}.tile:hover{border-color:var(--sel)}.tile:active{transform:scale(.95)}.tile:focus-visible,.btn:focus-visible,.chip:focus-within{outline:3px solid var(--sel);outline-offset:2px}.tile kbd{position:absolute;top:5px;left:8px;font-size:.62rem;color:var(--muted);font-family:var(--f-num);font-weight:600}.tile.sel{border-color:var(--sel);background:var(--sel);color:var(--accent-ink)}.tile.sel kbd,.tile.right kbd,.tile.wrong kbd{color:#fffc}.tile.right{border-color:var(--good);background:var(--good);color:#fff}.tile.wrong{border-color:var(--bad);background:var(--bad);color:#fff}.feedback{min-height:1.5em;font-weight:700;text-align:center;font-size:.95rem}.feedback.ok{color:var(--good)}.feedback.no{color:var(--bad)}.hint{font-size:.85rem;color:var(--muted);text-align:center}.opeq{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.numbox{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;min-width:1.6ch;text-align:center}.opslot{width:56px;height:56px;border-radius:14px;border:2px dashed var(--line);background:var(--sheet);font-family:var(--f-display);font-size:1.6rem;font-weight:800;color:var(--sel);cursor:pointer;display:grid;place-items:center;padding:0}.opslot.active{border-color:var(--sel);border-style:dashed;background:var(--sel-bg)}.opslot.filled{border-style:solid;border-color:var(--sel)}.opslot.right{border-color:var(--good);background:var(--good-bg);color:var(--good);border-style:solid}.opslot.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad);border-style:solid}.opslot:focus-visible{outline:3px solid var(--sel);outline-offset:2px}.opkeys{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:440px}.opkeys .tile{font-size:1.8rem}.precedence{font-size:.82rem;color:var(--muted);text-align:center;min-height:1.3em;margin:-10px 0 0}.example .opslot{width:44px;height:44px;font-size:1.3rem;cursor:default}.example .numbox{font-size:1.5rem}.how{display:grid;gap:8px;margin:0;padding-left:1.2em}.how li::marker{color:var(--accent);font-weight:700}.example{display:grid;gap:14px;background:#f6f7fa;border-radius:12px;padding:16px;justify-items:center}.example .label{justify-self:start}.example .tiles .tile{font-size:1rem;height:48px;cursor:default}.example .target{width:4.2rem;height:4.2rem;font-size:1.5rem}.example .slot{width:2.6rem;height:2.6rem;font-size:1rem}.settings{display:grid;gap:10px}.settings .label{margin-top:6px}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.chip{position:relative}.chip input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}.chip span{display:inline-block;padding:7px 16px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;font-size:.9rem;color:var(--ink)}.chip input:checked+span{border-color:var(--accent);background:var(--sel-bg);color:var(--accent)}.btn{font-family:var(--f-display);font-weight:700;font-size:1rem;padding:12px 30px;border-radius:999px;border:2px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer}.btn:hover{filter:brightness(1.06)}.btn.ghost{background:transparent;color:var(--muted);border-color:var(--line)}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.big{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.big div{background:#f6f7fa;border-radius:12px;padding:14px;display:grid;gap:2px;text-align:center}.big b{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums}.tbl-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.92rem}th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-weight:600;font-size:.82rem}td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}.misses{display:grid;gap:6px;font-size:.9rem;font-variant-numeric:tabular-nums}.misses div{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:6px}.misses .yours{color:var(--bad)}.misses .ans{color:var(--good);font-weight:700}.verdict{font-size:1.05rem;text-align:center;margin:0}.tabs{display:flex;gap:18px}.tabs a{font-weight:700;text-decoration:none;color:var(--muted);padding:4px 2px;font-size:.95rem;border-bottom:2px solid transparent}.tabs a[aria-current=page]{color:var(--accent);border-bottom-color:var(--accent)}.tabs a:focus-visible{outline:3px solid var(--sel);outline-offset:2px}.view{display:grid;gap:14px}.bestrow{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}.bestrow .label{font-size:1.05rem;color:var(--ink);font-weight:700}.stage{display:grid;justify-items:center;gap:14px;padding-block:10px 4px}.rule{font-weight:600;text-align:center;min-height:1.5em;color:var(--muted)}.rule b{color:var(--ink)}.card{width:min(240px,64vw);aspect-ratio:1;max-width:100%;border:3px solid transparent;border-radius:50%;display:grid;place-items:center;background:var(--sheet);transition:border-color .12s,background .12s}.card.ok{border-color:var(--good)}.card.no{border-color:var(--bad)}.card svg{width:64%;height:64%}.card .banner{font-weight:800;font-size:1.15rem;text-align:center;padding:10px;line-height:1.35;color:var(--ink)}.depth{display:flex;gap:6px;align-items:center;font-size:.78rem;color:var(--muted);min-height:1.2em}.depth i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted)}.depth i.now{background:var(--accent);border-color:var(--accent)}.respond{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:420px}.respond .btn{padding:14px 10px;font-size:1.05rem;display:grid;gap:0}.respond .btn small{font-weight:600;font-size:.7rem;opacity:.8}.respond .btn:disabled{opacity:.35;cursor:default;filter:none}.btn.no-btn{background:var(--sheet);color:var(--accent)}.mini{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}.mini span{width:44px;height:44px;border:2px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--sheet)}.mini span.hit{border-color:var(--good)}.mini svg{width:62%;height:62%}.mini em{font-style:normal;font-size:.85rem;color:var(--muted);flex-basis:100%;text-align:center}.cubes{display:grid;gap:14px;width:100%;grid-template-columns:repeat(var(--cols, 3),1fr);max-width:560px}.cube{position:relative;aspect-ratio:1;max-width:100%;border:2px solid var(--line);border-radius:16px;background:var(--sheet);cursor:pointer;padding:10%;display:grid;box-shadow:0 2px 8px #2d334014;transition:border-color .12s,background .12s}.cube:hover{border-color:var(--sel)}.cube:focus-visible{outline:3px solid var(--sel);outline-offset:2px}.cube kbd{position:absolute;top:5px;left:8px;font-size:.62rem;color:var(--muted);font-family:var(--f-num);font-weight:600}.cube.sel{border-color:var(--sel);background:var(--sel-bg)}.cube.right{border-color:var(--good);background:var(--good-bg)}.cube.wrong{border-color:var(--bad);background:var(--bad-bg)}.cube svg{width:100%;height:100%;transition:transform .3s}.cube.spin svg{animation:cubespin var(--spin, 9s) linear infinite}@keyframes cubespin{to{transform:rotate(var(--spin-to, 360deg))}}.example .cubes{max-width:340px}.example .cube{cursor:default}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.shake{animation:shake .25s}@media(prefers-reduced-motion:reduce){.shake{animation:none}.timebar i,.tile{transition:none}.cube.spin svg{animation:none}}@media(max-width:460px){.opslot{width:46px;height:46px;font-size:1.35rem}.numbox{font-size:1.6rem}.opeq{gap:6px}.tiles{gap:7px}.tile{font-size:1.15rem;height:64px;border-radius:12px}.target{width:5.2rem;height:5.2rem;font-size:1.8rem}.slot{width:2.8rem;height:2.8rem}.cubes{gap:8px}.cube{border-radius:12px}}
