:root{color-scheme:dark light;--bg: #0f1218;--panel: #171c26;--border: #2a3344;--text: #e8ecf4;--muted: #8b96ab;--accent: #6ea8fe;--accent-dim: #4a7bc8;--danger: #f07178;--ok: #7fd99a;font-family:IBM Plex Sans,Segoe UI,system-ui,sans-serif;line-height:1.45}@media(prefers-color-scheme:light){:root{--bg: #f4f6fa;--panel: #ffffff;--border: #cfd6e6;--text: #1a2233;--muted: #5c6b82;--accent: #2b6cb0;--accent-dim: #255a94;--danger: #c53030;--ok: #2f855a}}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}#app{max-width:40rem;margin:0 auto;padding:1.25rem 1rem 2.5rem}#app:focus{outline:none}h1{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin:0 0 .25rem}.sub{color:var(--muted);font-size:.9rem;margin:0 0 1.5rem}.tagline{margin-bottom:.85rem}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;margin-bottom:.85rem}.panel.practice{border-color:var(--accent-dim);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}.panel h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .75rem;font-weight:600}.practice-play-reveal{display:flex;align-items:stretch;gap:.5rem;margin-bottom:.5rem;border-radius:10px}.practice-play-reveal .btn-lg{flex-shrink:0;align-self:center}.practice-play-reveal.practice-line-refreshed{animation:practice-line-refreshed .52s ease-out}@keyframes practice-line-refreshed{0%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 32%,transparent)}to{box-shadow:0 0 0 0 transparent}}@media(prefers-reduced-motion:reduce){.practice-play-reveal.practice-line-refreshed{animation-duration:.22s}}.cw-time{font-size:.78rem;color:var(--muted);font-feature-settings:"tnum" 1}.reveal-stack{position:relative;flex:1;min-width:0;align-self:stretch}.reveal-stack .cw-time-overlay{position:absolute;top:.38rem;right:.48rem;z-index:2;pointer-events:none;font-size:.72rem;line-height:1.25;padding:.1rem .32rem;border-radius:5px;background:color-mix(in srgb,var(--bg) 88%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--border) 70%,transparent);font-variant-numeric:tabular-nums}.practice-next-source{display:flex;flex-wrap:nowrap;align-items:center;gap:.5rem .65rem;overflow-x:auto;padding-bottom:.15rem}.practice-next-source .btn-lg{flex-shrink:0}.source-strip{display:flex;flex-wrap:nowrap;align-items:center;gap:.35rem .55rem;flex:1;min-width:0}.source-select{flex-shrink:0;font-size:.8rem;min-width:10.5rem;max-width:100%;padding:.32rem .4rem;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer}.source-sep{flex-shrink:0;width:1px;align-self:stretch;min-height:1.6rem;margin:0 .1rem;background:var(--border);cursor:default}.source-bank-row{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;flex-shrink:0}.source-compact{display:flex;align-items:center;gap:.25rem;font-size:.8rem;white-space:nowrap;cursor:pointer}.source-compact input[type=number]{font-size:.8rem}.source-ham-opt{font-size:.8rem;white-space:nowrap;flex-shrink:0}.source-paste-row{display:flex;flex-wrap:nowrap;align-items:center;gap:.4rem;flex:1;min-width:0}#bank-controls[hidden],#paste-controls[hidden]{display:none!important}.paste-target--strip{flex:1;min-width:6.5rem;min-height:2.4rem;padding:.35rem .55rem}.paste-target--strip .paste-hint{font-size:.8rem}.btn-lg{min-height:2.75rem;padding:.5rem 1rem;font-size:.95rem;font-weight:600}.btn-lg.btn-icon{min-width:2.85rem;padding-left:.65rem;padding-right:.65rem;font-size:1.15rem;line-height:1;font-weight:700}.audio-details summary,.bank-contents-details summary{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.88rem;font-weight:600;color:var(--text);list-style-position:outside}.audio-details summary::-webkit-details-marker,.bank-contents-details summary::-webkit-details-marker{color:var(--muted)}.audio-details[open] summary,.bank-contents-details[open] summary{margin-bottom:0;color:var(--muted)}.details-body{padding-top:.65rem}.bank-contents-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.6rem}.bank-bulk-row{display:flex;flex-wrap:wrap;gap:.65rem 1rem;align-items:center}.bank-bulk-cb{font-size:.82rem}.bank-contents-toolbar .bank-contents-hint{font-size:.78rem;color:var(--muted);flex:1 1 12rem;line-height:1.35}.bank-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.35rem .65rem;max-height:min(50vh,22rem);overflow:auto;padding:.35rem .45rem;border-radius:8px;border:1px solid var(--border);background:var(--bg)}label.bank-item{display:flex;align-items:flex-start;gap:.35rem;font-size:.78rem;line-height:1.35;cursor:pointer;color:var(--text);min-width:0}label.bank-item .bank-item-label{word-break:break-word;flex:1;min-width:0}label.bank-item input[type=checkbox]{flex-shrink:0;margin-top:.12rem}.audio-subpanel{margin:.35rem 0 .65rem;padding:.35rem 0 .15rem .65rem;border-left:2px solid color-mix(in srgb,var(--accent) 30%,var(--border))}#panel-extra-letters[hidden],#panel-extra-words[hidden]{display:none!important}.audio-field{margin-bottom:.85rem}.audio-field-tight{margin-bottom:0}.audio-field-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem}.audio-field-head label{font-size:.92rem;font-weight:500;cursor:pointer}.audio-value{font-size:.88rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.audio-field input[type=range]{display:block;width:100%;margin:.4rem 0 0;cursor:pointer}.audio-field input[type=range]::-webkit-slider-thumb{cursor:pointer}.audio-field input[type=range]::-moz-range-thumb{cursor:pointer}.audio-hint{margin:.35rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.4}.audio-hint code{font-family:ui-monospace,monospace;font-size:.92em}.lbl-inline{margin:0;min-width:2rem;text-align:right;font-variant-numeric:tabular-nums}.row{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-bottom:.65rem}.row:last-child{margin-bottom:0}label.inline{display:flex;align-items:center;gap:.35rem;font-size:.92rem;cursor:pointer}input[type=number]{width:4rem;padding:.35rem .45rem;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.92rem;cursor:text}input[type=checkbox]{cursor:pointer}select{padding:.35rem .5rem;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.92rem;cursor:pointer}button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:.45rem .85rem;font-size:.9rem}button.primary{background:var(--accent);border-color:var(--accent-dim);color:#fff}button.primary:hover{filter:brightness(1.06)}.btn-lg.stop-mode{background:color-mix(in srgb,var(--danger) 85%,var(--panel));border-color:var(--danger);color:#fff}.btn-lg.stop-mode:hover{filter:brightness(1.08)}button.danger{border-color:var(--danger);color:var(--danger);background:transparent}button:disabled{opacity:.45;cursor:not-allowed}.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.paste-target{border:2px dashed var(--border);border-radius:10px;padding:1rem;text-align:center;color:var(--muted);outline:none;cursor:pointer;min-height:3.5rem;display:flex;align-items:center;justify-content:center}.paste-target:focus{border-color:var(--accent);color:var(--text)}.paste-target.paste-target--has-content{border-style:solid;border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 10%,var(--bg));color:var(--text);cursor:pointer}.paste-target.paste-target--has-content:focus{border-color:var(--accent)}.paste-hint{font-size:.88rem}.reveal-box{margin-top:.75rem;padding:.75rem .85rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.95rem;white-space:pre-wrap;word-break:break-word;min-height:2.5rem}.reveal-box.empty{color:var(--muted);font-family:inherit}.reveal-box.reveal-in-row{width:100%;min-width:0;margin-top:0;min-height:3rem}.reveal-interactive{user-select:none;-webkit-user-select:none;touch-action:none;min-height:3rem;display:flex;align-items:center}.reveal-interactive:not(.has-challenge){cursor:default}.reveal-interactive.has-challenge{cursor:pointer}.reveal-interactive.has-challenge:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.reveal-box.reveal-peek{border-color:var(--accent-dim);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}footer{margin-top:2rem;font-size:.78rem;color:var(--muted)}footer a{color:var(--accent);cursor:pointer}