:root{--bg:#020504;--ink:#d8f5e6;--muted:#7fa592;--line:#7dffb024;--panel:#040c099e;--phosphor:#6dffb0;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Space Grotesk,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;margin:0}button,input,select{font:inherit;color:inherit}.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.app{--accent:var(--phosphor);height:100%;position:relative;overflow:hidden}.stage{position:absolute;inset:0}.panel{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);border-radius:14px;position:absolute}.intro{width:min(380px,100% - 40px);padding:18px 20px 14px;top:20px;left:20px}h1{letter-spacing:.02em;margin:0;font-size:22px;font-weight:600}h1 em{color:var(--accent);text-shadow:0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);font-style:normal;transition:color .6s}.sub{color:var(--muted);margin:4px 0 14px;font-size:13px;line-height:1.45}.name-field input{letter-spacing:.04em;border:1px solid var(--line);width:100%;caret-color:var(--accent);background:#00000073;border-radius:10px;outline:none;padding:10px 14px;font-size:26px;font-weight:500;transition:border-color .2s,box-shadow .2s}.name-field input:focus{border-color:color-mix(in srgb, var(--accent) 60%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent)}.letters{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.letter{border:1px solid var(--line);cursor:pointer;background:#00000059;border-radius:8px;justify-items:center;min-width:42px;padding:6px 6px 5px;font-family:JetBrains Mono,ui-monospace,monospace;transition:border-color .15s,transform .15s;display:grid}.letter:hover{border-color:var(--accent);transform:translateY(-1px)}.letter .ch{font-size:16px;font-weight:600}.letter .nt{color:var(--muted);font-size:10px}.letter .rt{color:var(--accent);font-size:10px}.letter.side-0{border-bottom:2px solid #6dffb08c}.letter.side-1{border-bottom:2px solid #78beff99}.how{color:var(--muted);margin-top:12px;font-size:12.5px;line-height:1.55}.how summary{cursor:pointer;color:var(--ink);opacity:.8}.how p{margin:8px 0 0}.how b{color:var(--ink)}.how .fine{opacity:.7;font-style:italic}.result{width:300px;max-height:calc(100% - 130px);padding:18px 18px 12px;top:20px;right:20px;overflow:auto}.score{align-items:center;gap:14px;display:flex}.score .num{color:var(--accent);text-shadow:0 0 24px color-mix(in srgb, var(--accent) 60%, transparent);font-variant-numeric:tabular-nums;font-family:JetBrains Mono,ui-monospace,monospace;font-size:56px;font-weight:600;line-height:1;transition:color .6s}.score .meta{gap:2px;display:grid}.score .of{color:var(--muted);font-size:12px}.score .verdict{font-size:15px;font-weight:500}.bars{gap:6px;margin:16px 0 6px;display:grid}.bar{color:var(--muted);grid-template-columns:62px 1fr 26px;align-items:center;gap:8px;font-size:12px;display:grid}.bar .track{background:#ffffff0f;border-radius:2px;height:4px;overflow:hidden}.bar .fill{border-radius:2px;height:100%;transition:width .5s,background .5s;display:block}.bar .bv{text-align:right;color:var(--ink);font-family:JetBrains Mono,ui-monospace,monospace}.result h2{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;font-size:11px;font-weight:500}.intervals{gap:2px;margin:0;padding:0;list-style:none;display:grid}.intervals button{cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:8px;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;width:100%;padding:7px 8px 9px;font-size:13px;display:grid;position:relative}.intervals button:hover{background:#ffffff0a}.intervals button.on{border-color:var(--line);background:#6dffb00f}.intervals .pair,.intervals .ratio{font-family:JetBrains Mono,ui-monospace,monospace}.intervals .ratio{color:var(--muted);font-size:12px}.intervals .mini{background:linear-gradient(90deg, var(--c) var(--v), #ffffff0d var(--v));border-radius:1px;height:2px;position:absolute;bottom:3px;left:8px;right:8px}.controls{white-space:nowrap;align-items:center;gap:14px;padding:10px 14px;display:flex;bottom:20px;left:50%;transform:translate(-50%)}.play{background:var(--accent);color:#02130a;cursor:pointer;box-shadow:0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);border:none;border-radius:9px;padding:9px 16px;font-weight:600;transition:background .6s,transform .1s}.play:active{transform:scale(.97)}.play:disabled{opacity:.4;cursor:default}.play.is-playing{animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{box-shadow:0 0 36px color-mix(in srgb, var(--accent) 80%, transparent)}}.segmented{border:1px solid var(--line);background:#0006;border-radius:9px;padding:3px;display:flex}.segmented button{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 11px;font-size:13px}.segmented button.on{color:var(--ink);background:#6dffb021}.slider,.select{color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.slider input{width:90px;accent-color:var(--phosphor)}.select select{border:1px solid var(--line);background:#00000073;border-radius:7px;padding:5px 8px;font-size:13px}.select option{background:#07120d}.fig-label{white-space:nowrap;color:var(--ink);border:1px solid var(--line);pointer-events:none;background:#00000080;border-radius:6px;gap:8px;padding:3px 9px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px;transition:opacity .3s;display:flex}.fig-label b{color:var(--phosphor);font-weight:500}@media (width<=900px){.app{flex-direction:column;gap:12px;height:auto;min-height:100%;padding:0 16px 24px;display:flex;overflow:visible}.stage{z-index:0;height:52vh;margin:0 -16px;position:sticky;top:0}.panel{z-index:1;width:auto;max-height:none;position:relative;inset:auto;transform:none}.intro{order:1}.controls{order:2}.result{order:3}.controls{white-space:normal;flex-wrap:wrap;justify-content:center;bottom:auto;left:auto}}