*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f4f1ec;--border: rgba(0,0,0,.09);--border-focus: rgba(212,130,10,.5);--text: #1c1a17;--text-mid: #6b6760;--text-dim: #85827e;--accent: #d4820a;--accent-bg: rgba(212,130,10,.08);--accent-border: rgba(212,130,10,.25);--ok: #1a9456;--ok-bg: rgba(26,148,86,.09);--ok-border: rgba(26,148,86,.25);--dist-bar: rgba(26,148,86,.55);--err: #c02828;--err-bg: rgba(192,40,40,.09);--err-border: rgba(192,40,40,.25);--dot: rgba(0,0,0,.055);--header-bg: rgba(244,241,236,.93);--input-bg: rgba(0,0,0,.04);--code-bg: rgba(0,0,0,.055);--mono: "IBM Plex Mono", "Courier New", monospace;--serif: "EB Garamond", Georgia, serif}:root.dark{--bg: #0c0c0e;--border: rgba(255,255,255,.07);--border-focus: rgba(232,168,48,.55);--text: #e0ddd6;--text-mid: #9a9690;--text-dim: #746f6a;--accent: #e8a830;--accent-bg: rgba(232,168,48,.09);--accent-border: rgba(232,168,48,.25);--ok: #2eb870;--ok-bg: rgba(46,184,112,.1);--ok-border: rgba(46,184,112,.28);--dist-bar: rgba(46,184,112,.6);--err: #d04848;--err-bg: rgba(208,72,72,.1);--err-border: rgba(208,72,72,.28);--dot: rgba(255,255,255,.028);--header-bg: rgba(12,12,14,.93);--input-bg: rgba(255,255,255,.035);--code-bg: rgba(255,255,255,.06)}html,body{height:100%;background:var(--bg)}body{color:var(--text);font-family:var(--serif);font-size:17px;line-height:1.55;background-color:var(--bg);background-image:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0);background-size:32px 32px;transition:background-color .25s,color .25s}#root{min-height:100vh}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes flashOk{0%{background:#1a94564d}to{background:var(--ok-bg)}}@keyframes flashErr{0%{background:#c028284d}to{background:var(--err-bg)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes ruleScaleIn{0%{opacity:0;transform:scale(.88)}65%{transform:scale(1.04)}82%{transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes springPop{0%{opacity:0;transform:scale(.6)}65%{transform:scale(1.1)}82%{transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes goldFlash{0%{border-color:var(--accent);background:var(--accent-bg)}to{border-color:var(--border);background:var(--input-bg)}}.num-input{font-family:var(--mono);background:var(--input-bg);border:1px solid var(--border);color:var(--text);text-align:center;outline:none;caret-color:transparent;transition:border-color .15s,background .15s}.num-input:focus{border-color:var(--border-focus);background:var(--accent-bg)}.num-input::placeholder{color:var(--text-dim)}.code-input{font-family:var(--mono);font-size:15px;background:var(--code-bg);border:1px solid var(--border);color:var(--text);outline:none;padding:14px 16px;width:100%;line-height:1.5;transition:border-color .15s;caret-color:var(--accent)}.code-input:focus{border-color:var(--border-focus)}.code-input::placeholder{color:var(--text-dim);font-style:italic}.code-input.shake,.num-inputs.shake{animation:shake .35s ease}.btn-play{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:#fff;border:none;padding:15px 48px;cursor:pointer;font-weight:500;transition:opacity .15s,transform .1s}.btn-play:hover{opacity:.88}.btn-play:active{transform:scale(.98)}.btn-accent{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid var(--accent);color:var(--accent);padding:13px 24px;cursor:pointer;transition:background .15s;width:100%}.btn-accent:hover{background:var(--accent-bg)}.btn-accent:disabled{opacity:.3;cursor:default;pointer-events:none}.btn-submit{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:#fff;border:none;padding:15px;cursor:pointer;font-weight:500;width:100%;transition:opacity .15s;display:flex;align-items:center;justify-content:center;gap:9px}.btn-submit:hover{opacity:.88}.btn-submit:disabled{opacity:.4;cursor:default;pointer-events:none}.btn-copy{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:transparent;border:1px solid var(--border);color:var(--text-mid);padding:12px;cursor:pointer;width:100%;transition:all .15s}.btn-copy:hover{border-color:var(--text-mid);color:var(--text)}.btn-copy.copied{border-color:var(--ok-border);color:var(--ok)}.theme-toggle{background:transparent;border:1px solid var(--border);color:var(--text-mid);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s,color .25s;flex-shrink:0}.theme-toggle:hover{border-color:var(--text-mid);color:var(--text)}.theme-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.icon-btn{background:transparent;border:1px solid var(--border);color:var(--text-mid);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s,color .25s;flex-shrink:0;font-family:var(--mono);font-size:14px;position:relative}.icon-btn:hover{border-color:var(--text-mid);color:var(--text)}.overlay-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .18s ease-out}.overlay-panel{background:var(--bg);border:1px solid var(--border);width:100%;max-width:400px;max-height:80vh;overflow-y:auto;scrollbar-width:none;animation:slideUp .22s ease-out}.overlay-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1}.overlay-close{background:transparent;border:none;color:var(--text-mid);cursor:pointer;font-size:20px;line-height:1;padding:0;transition:color .15s}.overlay-close:hover{color:var(--text)}.screen{display:flex;flex-direction:column;height:100vh;max-width:440px;margin:0 auto;width:100%;overflow:hidden}.screen>div::-webkit-scrollbar{display:none}.sticky-header{position:sticky;top:0;z-index:20;background:var(--header-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background-color .25s,border-color .25s,color .25s}.header-left{display:flex;align-items:center;gap:8px}.header-right{display:flex;align-items:center;gap:12px}.history-item{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid var(--border);transition:background .2s}.history-item.flash-ok,.flash-ok{animation:flashOk .9s ease-out forwards}.history-item.flash-err,.flash-err{animation:flashErr .9s ease-out forwards}.history-item.tint-ok{background:#1a94561c}.history-item.tint-err{background:#c028281c}.attempt-row{padding:12px 14px;border:1px solid var(--border);display:flex;flex-direction:column;gap:8px;animation:slideDown .25s ease-out}.attempt-row.correct{border-color:var(--ok-border);background:var(--ok-bg)}.attempt-row.wrong{border-color:var(--err-border);background:var(--err-bg)}.cheatsheet{border:1px solid var(--border);background:var(--input-bg);padding:14px 16px;min-height:0}.cheatsheet-wrapper{overflow:hidden;pointer-events:none;transition:height .35s ease,opacity .25s ease}.cheatsheet-wrapper.open{pointer-events:auto}.cheatsheet-grid{display:flex;flex-direction:column;gap:0}.cs-item{display:flex;align-items:baseline;gap:0;padding:3px 0;line-height:1.5;overflow:hidden}.cs-code{font-family:var(--mono);font-size:12px;color:var(--accent);white-space:nowrap;flex-shrink:0;width:120px;min-width:120px}.cs-desc{font-family:var(--mono);font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.cs-section{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}.normalizer-preview{font-family:var(--mono);font-size:12px;padding:7px 12px;border:1px solid var(--border);background:var(--input-bg);color:var(--text-mid);display:flex;align-items:center;gap:8px;transition:border-color .2s;min-height:34px}.normalizer-preview.active{border-color:var(--border-focus);color:var(--text)}