:root{--text: #262c52;--secondary: #5f6689;--muted: #9194ad;--background: #f2efe9;--element: #fbfaf7;--selected: #e6e0d3;--border: #d9d3c6;--tint: #3e5581;--tint-text: #ffffff;--danger: #b3412f;--lucid: #5f7a2e;--warn: #a8742f;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--text: #f2efe9;--secondary: #b9bcd2;--muted: #7d83a6;--background: #11152c;--element: #1c2244;--selected: #2a3360;--border: rgba(185, 188, 210, .16);--tint: #8fa8f0;--tint-text: #11152c;--danger: #ff8a78;--lucid: #c9d6a8;--warn: #e8c79a}}*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{max-width:960px;margin:0 auto;padding:0 20px 64px}.top{display:flex;align-items:center;gap:10px;padding:16px 0;flex-wrap:wrap}.brand{font-weight:700;font-size:18px}.sub,.hint{color:var(--secondary);font-size:14px}.spacer,.grow{flex:1}.badge{background:var(--warn);color:var(--background);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.panel{background:var(--element);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:16px}h2,h3{margin:0 0 8px;line-height:1.25}h2{font-size:24px}h3{font-size:18px}p{margin:8px 0}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}button,.filebutton,select,input[type=text],input[type=number],textarea{font:inherit;color:var(--text);background:var(--background);border:1px solid var(--border);border-radius:10px;padding:7px 14px}button,.filebutton{cursor:pointer}button:hover:not(:disabled),.filebutton:hover{background:var(--selected)}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.choice:focus-within{outline:2px solid var(--tint);outline-offset:2px}button.primary{background:var(--tint);border-color:var(--tint);color:var(--tint-text);font-weight:600}button.primary:hover:not(:disabled){background:var(--tint);filter:brightness(1.08)}button.danger{color:var(--danger)}button.link{border:0;background:none;padding:0;color:var(--tint);font-weight:600;text-align:left}input[type=text]{min-width:260px}input[type=number]{width:96px}textarea{display:block;width:100%;margin-top:6px;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:14px;resize:vertical}label.block{display:block;margin:12px 0}.filebutton input,.choice input{display:none}.list{list-style:none;margin:8px 0 14px;padding:0}.list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border)}.list li:first-child{border-top:0}.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0}.choice{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--background);cursor:pointer}.choice span{color:var(--secondary);font-size:14px}.wave{display:block;width:100%;height:140px;background:var(--background);border:1px solid var(--border);border-radius:10px;touch-action:none;cursor:ew-resize}.player{display:block;width:100%;margin:10px 0}.hidden{display:none}.steps{margin:8px 0;padding-left:22px}.steps li{margin:8px 0}.steps .hint{display:block}.result{border-radius:12px;padding:12px 16px;margin:12px 0;border:1px solid var(--border)}.result.good{border-color:var(--lucid)}.result.bad{border-color:var(--danger)}.explanation{white-space:pre-wrap;font:inherit;margin:8px 0;padding:10px 14px;background:var(--background);border-radius:10px}.code{font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:40px;font-weight:700;letter-spacing:.08em;margin:6px 0;-webkit-user-select:all;user-select:all}.error{color:var(--danger)}.warn{color:var(--warn)}.ok{color:var(--lucid);font-weight:600}@media(max-width:600px){.code{font-size:28px}input[type=text]{min-width:0;width:100%}}