:root{--bg: #FCF9EE;--bg-raised: #FFFFFF;--bg-sunken: #F4EFDF;--bg-tint: #F8F3E1;--ink: #1A1A1A;--ink-muted: rgba(26, 26, 26, .55);--ink-dim: rgba(26, 26, 26, .3);--ink-faint: rgba(26, 26, 26, .08);--clay: #D97757;--clay-hover: #C8623F;--clay-soft: rgba(217, 119, 87, .18);--clay-faint: rgba(217, 119, 87, .08);--correct: #4A7F4E;--wrong: #B7472A;--shadow-paper: 0 1px 2px rgba(26, 26, 26, .04), 0 1px 3px rgba(26, 26, 26, .06);--shadow-lift: 0 2px 6px rgba(26, 26, 26, .06), 0 4px 12px rgba(26, 26, 26, .08)}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-feature-settings:"cv02","cv03","cv04","cv11";-webkit-font-smoothing:antialiased;color-scheme:light;min-height:100vh}#app,.picker,.quiz,.finish{position:relative}.font-serif{font-family:ui-serif,New York,Charter,Georgia,Times New Roman,serif}.display{font-family:ui-serif,New York,Charter,Georgia,Times New Roman,serif;font-weight:600;font-style:normal;letter-spacing:-.015em;line-height:1.08}.display-xl{font-family:ui-serif,New York,Charter,Georgia,Times New Roman,serif;font-weight:600;font-size:clamp(2.25rem,5.5vw,4rem);line-height:1.05;letter-spacing:-.02em}.eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--clay)}.muted{color:var(--ink-muted)}.dim{color:var(--ink-dim)}.paper{background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:10px;box-shadow:var(--shadow-paper)}.paper-hover{transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}.paper-hover:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift);border-color:var(--clay-soft)}.btn-clay{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:1px solid var(--clay);border-radius:8px;background:var(--clay);color:#fff;font-family:inherit;font-weight:600;font-size:15px;letter-spacing:.01em;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .05s ease;text-decoration:none}.btn-clay:hover{background:var(--clay-hover);border-color:var(--clay-hover);color:#fff}.btn-clay:active{transform:translateY(1px)}.btn-clay:disabled{opacity:.4;cursor:not-allowed}.btn-paper{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:1px solid var(--ink-faint);border-radius:8px;background:var(--bg-raised);color:var(--ink);font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:border-color .15s ease,background .15s ease;text-decoration:none}.btn-paper:hover{border-color:var(--clay-soft);background:var(--bg-tint);color:var(--ink)}.app-header{position:fixed;top:0;left:0;right:0;z-index:50;height:56px;padding:0 18px;display:flex;align-items:center;gap:10px;background:#fcf9eed9;backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);border-bottom:1px solid var(--ink-faint)}.app-header-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.app-header-icon{width:32px;height:32px;border-radius:8px;box-shadow:0 1px 2px #1a1a1a1f}.app-header-name{font-family:ui-serif,New York,Charter,Georgia,serif;font-weight:600;font-size:17px;letter-spacing:-.005em;color:var(--ink)}.with-app-header{padding-top:56px}a{color:var(--clay);text-decoration:none}a:hover{color:var(--clay-hover);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}::selection{background:var(--clay-soft);color:var(--ink)}input,select,textarea,button{font-family:inherit}.picker{max-width:1080px;margin:0 auto;padding:24px 20px 64px}.landing-hero{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;text-align:left;padding:56px 0 48px;max-width:100%}@media (min-width: 800px){.landing-hero{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px}}.landing-hero .eyebrow{margin-bottom:18px}.landing-headline{margin:0 0 18px;color:var(--ink)}.landing-tagline{margin:0;font-size:17px;line-height:1.6;color:var(--ink-muted);max-width:600px}.landing-cta-row{display:flex;flex-wrap:wrap;gap:12px}.composer-parade{font-family:ui-serif,New York,Charter,Georgia,serif;font-style:italic;font-size:15px;color:var(--ink-muted);margin:18px 0 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0}.composer-parade span{margin:0 6px;white-space:nowrap}.composer-dot{color:var(--clay);font-style:normal;font-weight:700;opacity:.6}.stats-strip{font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim);display:flex;flex-wrap:wrap;gap:0 4px;margin-bottom:28px}.stats-strip>span{white-space:nowrap}.stats-strip .stats-dot{color:var(--clay);opacity:.6;margin:0 8px}.hero-vignette{display:flex;flex-direction:column;align-items:center;width:100%}.hero-video-frame{margin:0;width:100%;max-width:280px;background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:12px;padding:10px 10px 8px;box-shadow:0 1px 2px #1a1a1a0a,0 4px 16px #1a1a1a14,0 12px 40px #1a1a1a0f;position:relative;display:flex;flex-direction:column;gap:8px}.hero-video-frame:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;background:radial-gradient(ellipse at top left,rgba(217,119,87,.04),transparent 60%),radial-gradient(ellipse at bottom right,rgba(217,119,87,.04),transparent 60%);pointer-events:none}.hero-video{width:100%;aspect-ratio:9 / 16;object-fit:cover;display:block;border-radius:6px;background:#000}.hero-video-caption{font-family:ui-serif,New York,Charter,Georgia,serif;font-size:13px;color:var(--ink-muted);text-align:center;letter-spacing:.005em;padding:2px 0}.hero-video-piece{color:var(--ink);font-style:italic;font-weight:500}.hero-video-sep{color:var(--clay);margin:0 6px}.hero-video-composer{font-style:italic}@media (max-width: 799px){.hero-video-frame{max-width:220px}}.landing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:56px 0 0}.landing-card{background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:10px;padding:22px;box-shadow:var(--shadow-paper);transition:border-color .2s ease,transform .15s ease}.landing-card:hover{border-color:var(--clay-soft);transform:translateY(-1px)}.landing-card h2{font-family:ui-serif,New York,Charter,Georgia,serif;font-size:18px;font-weight:600;letter-spacing:-.005em;margin:0 0 10px;color:var(--ink);display:flex;align-items:center;gap:10px}.landing-card .landing-icon{font-size:20px;opacity:.85}.landing-card p,.landing-card li{color:var(--ink-muted);font-size:14.5px;line-height:1.6}.landing-card ol{padding-left:18px;margin:0}.landing-card ol li{margin-bottom:6px}.landing-card strong{color:var(--ink);font-weight:600}.landing-card em{font-style:italic;color:var(--ink)}.picker-corpus,.picker-upload,.picker-config{margin-top:56px}.picker-corpus h2,.picker-upload h2,.picker-config h2{font-family:ui-serif,New York,Charter,Georgia,serif;font-size:26px;font-weight:600;letter-spacing:-.01em;margin:0 0 24px;color:var(--ink)}.composer-section{margin-bottom:36px}.composer-header{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--ink-faint);padding-bottom:8px;margin-bottom:14px}.composer-name{font-family:ui-serif,New York,Charter,Georgia,serif;font-weight:600;font-size:22px;color:var(--ink);margin:0;letter-spacing:-.005em}.composer-count{font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.composer-pieces.picker-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.picker-card{background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:10px;padding:16px 18px;cursor:pointer;transition:border-color .15s ease,transform .1s ease,box-shadow .15s ease;text-align:left}.picker-card:hover{border-color:var(--clay);transform:translateY(-1px);box-shadow:var(--shadow-lift)}.picker-card .picker-card-title{font-family:ui-serif,New York,Charter,Georgia,serif;font-weight:600;font-size:16px;color:var(--ink);margin:0;letter-spacing:-.005em}.picker-card.picker-card-on{border-color:var(--clay);background:var(--clay-faint)}.picker-upload input[type=file]{color:var(--ink-muted);font-family:inherit;font-size:14px}.picker-filename{font-size:12px;color:var(--ink-dim);margin-top:4px}.picker-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;position:fixed;left:0;right:0;bottom:0;background:#fcf9eeeb;backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);padding:12px 16px;border-top:1px solid var(--ink-faint);box-shadow:0 -1px 0 var(--ink-faint),0 -4px 12px #1a1a1a0a;z-index:10;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.picker-controls-inner{max-width:1080px;margin:0 auto;width:100%;display:flex;flex-wrap:wrap;gap:12px;align-items:center}.picker-controls input[type=number]{width:64px;background:var(--bg-raised);color:var(--ink);border:1px solid var(--ink-faint);border-radius:8px;padding:6px 8px;font-family:inherit;font-size:14px;outline:none;transition:border-color .15s ease}.picker-controls input[type=number]:focus{border-color:var(--clay)}.picker-controls label{color:var(--ink-muted);font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px}.picker-drill{display:flex;gap:6px;flex-wrap:wrap}.drill-chip{padding:8px 14px;border:1px solid var(--ink-faint);border-radius:999px;background:var(--bg-raised);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s;font-family:inherit}.drill-chip:hover{border-color:var(--clay-soft)}.drill-chip.is-selected{background:var(--clay);border-color:var(--clay);color:#fff}.picker-budget{display:flex;gap:6px;flex-wrap:wrap}.picker-chip{background:var(--bg-raised);color:var(--ink-muted);border:1px solid var(--ink-faint);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}.picker-chip:hover{border-color:var(--clay-soft);color:var(--ink)}.picker-chip-on{background:var(--clay);border-color:var(--clay);color:#fff}#pk-start{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:1px solid var(--clay);border-radius:8px;background:var(--clay);color:#fff;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .05s ease}#pk-start:hover{background:var(--clay-hover);border-color:var(--clay-hover)}#pk-start:active{transform:translateY(1px)}#pk-start[disabled]{opacity:.35;cursor:not-allowed}.picker-err{color:var(--wrong);font-size:13px;flex-basis:100%}.sibling-card{display:flex;gap:20px;align-items:flex-start;margin-top:48px;padding:24px 26px;text-decoration:none;color:#e8ecf5;background:linear-gradient(135deg,#0a0e1a,#10162a);border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 1px #0006 inset,0 1px 3px #1a1a1a0a,0 4px 16px #1a1a1a14;position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease}.sibling-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at top left,rgba(34,211,238,.15),transparent 55%),radial-gradient(ellipse at bottom right,rgba(217,70,239,.1),transparent 55%);pointer-events:none}.sibling-card:hover{transform:translateY(-1px);box-shadow:0 1px #0006 inset,0 4px 16px #1a1a1a1a,0 12px 40px #22d3ee26;border-color:#ffffff29}.sibling-card-icon{flex-shrink:0;width:56px;height:56px;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:28px;position:relative;z-index:1}.sibling-card-body{flex:1;min-width:0;position:relative;z-index:1}.sibling-card-eyebrow{font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:#22d3ee;margin-bottom:6px}.sibling-card-title{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:26px;letter-spacing:-.015em;margin:0 0 8px;background:linear-gradient(135deg,#22d3ee,#d946ef);-webkit-background-clip:text;background-clip:text;color:transparent}.sibling-card-desc{font-family:Inter,system-ui,sans-serif;font-size:14.5px;line-height:1.55;color:#e8ecf5b3;margin:0 0 14px;max-width:580px}.sibling-card-link{font-family:JetBrains Mono,ui-monospace,monospace;font-size:13px;color:#22d3ee;display:inline-flex;align-items:center;gap:6px}.sibling-card-arrow{transition:transform .15s ease}.sibling-card:hover .sibling-card-arrow{transform:translate(3px)}@media (max-width: 600px){.sibling-card{flex-direction:column;gap:14px;padding:20px}.sibling-card-title{font-size:22px}}.landing-footer{margin-top:64px;padding-top:32px;border-top:1px solid var(--ink-faint);text-align:center;font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px;color:var(--ink-dim)}.landing-footer p{margin:0 0 8px}.landing-footer a{color:var(--ink-muted);text-decoration:none}.landing-footer a:hover{color:var(--clay);text-decoration:underline;text-underline-offset:3px}.landing-footer-links span{margin:0 8px;color:var(--clay);opacity:.5}@media (max-width: 600px){.picker{padding:16px 12px 120px}.landing-hero{padding:32px 0 40px}.landing-tagline{font-size:15px}.landing-grid{grid-template-columns:1fr;gap:12px}.landing-card{padding:18px}.picker-grid,.composer-pieces.picker-grid{grid-template-columns:1fr}.picker-card{padding:10px 12px}.picker-card .picker-card-title{font-size:14px}}.quiz{max-width:960px;margin:0 auto;padding:12px;color:var(--ink);display:flex;flex-direction:column;gap:8px;min-height:100dvh;box-sizing:border-box}.quiz-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:10px;box-shadow:var(--shadow-paper)}.quiz-title{font-family:ui-serif,New York,Charter,Georgia,serif;font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.005em}.quiz-composer{color:var(--ink-muted);font-weight:400;font-family:inherit}.quiz-progress{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;color:var(--ink-muted);font-size:13px}.quiz-banner{background:var(--clay-faint);border:1px solid var(--clay-soft);color:var(--clay);padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500}.quiz-score{background:var(--bg-raised);border-radius:10px;padding:6px;min-height:180px;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ink-faint);box-shadow:var(--shadow-paper)}.quiz-score svg{display:block}.quiz-feedback{display:flex;align-items:center;gap:12px;font-size:13px;padding:6px 12px;background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:8px}.quiz-fb-hand{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-weight:600}.quiz-fb-hand.ok{color:var(--correct)}.quiz-fb-hand.err{color:var(--wrong)}.quiz-ring{width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--clay) calc(var(--p) * 360deg),var(--ink-faint) 0)}.quiz-keys{display:flex;flex-direction:column;gap:6px}#qz-finish{background:var(--bg-raised);color:var(--ink-muted);border:1px solid var(--ink-faint);padding:5px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-family:inherit;transition:border-color .15s ease,background .15s ease,color .15s ease}#qz-finish:hover{border-color:var(--clay-soft);background:var(--bg-tint);color:var(--ink)}.quiz-icon-btn{background:var(--bg-raised);color:var(--ink-muted);border:1px solid var(--ink-faint);padding:5px 12px;border-radius:8px;cursor:pointer;font-size:16px;font-family:inherit;line-height:1;transition:border-color .15s ease,background .15s ease,color .15s ease}.quiz-icon-btn:hover{background:var(--bg-tint);border-color:var(--clay-soft);color:var(--ink)}@media (max-width: 600px){.quiz{padding:8px;gap:6px}.quiz-title{font-size:13px}.quiz-score{min-height:140px}}.finish{max-width:480px;margin:48px auto;padding:40px 32px 36px;color:var(--ink);text-align:center;background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:16px;box-shadow:var(--shadow-lift)}.finish h1{font-family:ui-serif,New York,Charter,Georgia,serif;margin:0 0 8px;font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.1;color:var(--ink)}.finish-piece{color:var(--ink-muted);margin-bottom:28px;font-size:14px}.finish-score{font-family:ui-serif,New York,Charter,Georgia,serif;font-size:80px;font-weight:600;color:var(--ink);line-height:1;margin-bottom:4px;letter-spacing:-.03em;position:relative;display:inline-block}.finish-score:after{content:"";position:absolute;left:10%;right:10%;bottom:-6px;height:3px;background:var(--clay);border-radius:2px}.finish-stats{color:var(--ink-muted);margin:16px 0 28px;font-size:14px}.finish-buttons{display:flex;flex-direction:column;gap:10px;align-items:stretch}.finish-buttons input[type=text],.finish-buttons input{background:var(--bg-raised);color:var(--ink);border:1px solid var(--ink-faint);border-radius:8px;padding:10px 14px;font-family:inherit;font-size:14px;outline:none;transition:border-color .15s ease}.finish-buttons input:focus{border-color:var(--clay)}.finish-buttons input::placeholder{color:var(--ink-dim)}.finish-buttons button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid var(--clay);border-radius:8px;background:var(--clay);color:#fff;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .05s ease}.finish-buttons button:hover{background:var(--clay-hover);border-color:var(--clay-hover)}.finish-buttons button:active{transform:translateY(1px)}.finish-buttons button:disabled{opacity:.4;cursor:not-allowed}.finish-buttons #fn-again,.finish-buttons #fn-pick{background:var(--bg-raised);color:var(--ink);border:1px solid var(--ink-faint);font-weight:600;transition:border-color .15s ease,background .15s ease}.finish-buttons #fn-again:hover,.finish-buttons #fn-pick:hover{background:var(--bg-tint);border-color:var(--clay-soft);color:var(--ink);transform:none}.finish-no-share{color:var(--ink-dim);font-size:13px;margin-top:12px}.kb{display:flex;flex-direction:column;gap:4px}.kb-label{font-size:12px;color:#aaa}.kb-lane{position:relative;display:flex;height:130px;width:100%;max-width:420px;margin:0 auto;background:#1a1a1a;border-radius:6px;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;box-shadow:0 2px 6px #0006,inset 0 -3px #00000040}.kb-key{cursor:pointer;transition:background 80ms ease}.kb-white{position:relative;flex:1 1 0;background:linear-gradient(to bottom,#fbf5e6,#f1e6cd);border-right:1px solid #c8b890;box-shadow:inset 0 -8px 8px -6px #0000002e}.kb-white:last-child{border-right:none}.kb-black{position:absolute;top:0;height:62%;background:linear-gradient(to bottom,#2a2a2a,#050505 95%);border:1px solid #000;border-radius:0 0 3px 3px;z-index:2;box-shadow:0 2px 4px #0009,inset 0 -3px #ffffff14}.kb-white.kb-hi{background:#6cd06c}.kb-white.kb-err{background:#ff7a7a}.kb-black.kb-hi{background:#2e7a2e}.kb-black.kb-err{background:#a33}.kb-key-label{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:11px;color:#1a1a1a;font-family:ui-sans-serif,system-ui,sans-serif;pointer-events:none;-webkit-user-select:none;user-select:none}@media (max-width: 600px){.kb-lane{height:110px}.kb-label{font-size:11px}}.snq{max-width:960px;margin:0 auto;padding:12px;color:var(--ink);display:flex;flex-direction:column;gap:8px;min-height:100dvh;box-sizing:border-box}.snq-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:10px;box-shadow:var(--shadow-paper)}.snq-title{font-family:ui-serif,New York,Charter,Georgia,serif;font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.005em}.snq-composer{color:var(--ink-muted);font-weight:400;font-family:inherit}.snq-progress{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;color:var(--ink-muted);font-size:13px}.snq-drill-badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--clay);background:var(--clay-faint);border:1px solid var(--clay-soft);border-radius:999px;padding:2px 8px;white-space:nowrap}.snq-banner{background:var(--clay-faint);border:1px solid var(--clay-soft);color:var(--clay);padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500}.snq-score{background:var(--bg-raised);border-radius:10px;padding:6px;min-height:180px;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ink-faint);box-shadow:var(--shadow-paper)}.snq-score svg{display:block}.snq-feedback{display:flex;align-items:center;gap:12px;font-size:13px;padding:6px 12px;background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:8px}.snq-fb-note{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-weight:600}.snq-fb-note.ok{color:var(--correct)}.snq-fb-note.err{color:var(--wrong)}.snq-ring{width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--clay) calc(var(--p) * 360deg),var(--ink-faint) 0)}.snq-keys{display:flex;flex-direction:column;gap:6px}#snq-finish{background:var(--bg-raised);color:var(--ink-muted);border:1px solid var(--ink-faint);padding:5px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-family:inherit;transition:border-color .15s ease,background .15s ease,color .15s ease}#snq-finish:hover{border-color:var(--clay-soft);background:var(--bg-tint);color:var(--ink)}.snq-icon-btn{background:var(--bg-raised);color:var(--ink-muted);border:1px solid var(--ink-faint);padding:5px 12px;border-radius:8px;cursor:pointer;font-size:16px;font-family:inherit;line-height:1;transition:border-color .15s ease,background .15s ease,color .15s ease}.snq-icon-btn:hover{background:var(--bg-tint);border-color:var(--clay-soft);color:var(--ink)}@media (max-width: 600px){.snq{padding:8px;gap:6px}.snq-title{font-size:13px}.snq-score{min-height:140px}}.hq{max-width:960px;margin:0 auto;padding:12px;color:var(--ink);display:flex;flex-direction:column;gap:8px;min-height:100dvh;box-sizing:border-box}.hq-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:10px;box-shadow:var(--shadow-paper)}.hq-title{font-family:ui-serif,New York,Charter,Georgia,serif;font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.005em}.hq-composer{color:var(--ink-muted);font-weight:400;font-family:inherit}.hq-progress{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;color:var(--ink-muted);font-size:13px}.hq-drill-badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--clay);background:var(--clay-faint);border:1px solid var(--clay-soft);border-radius:999px;padding:2px 8px;white-space:nowrap}.hq-banner{background:var(--clay-faint);border:1px solid var(--clay-soft);color:var(--clay);padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500}.hq-score{background:var(--bg-raised);border-radius:10px;padding:6px;min-height:180px;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ink-faint);box-shadow:var(--shadow-paper)}.hq-score svg{display:block}.hq-feedback{display:flex;align-items:center;gap:12px;font-size:13px;padding:6px 12px;background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:8px}.hq-fb-status{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-weight:600}.hq-fb-status.ok{color:var(--correct)}.hq-fb-status.err{color:var(--wrong)}.hq-chord-progress{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:12px;color:var(--ink-muted)}.hq-ring{width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--clay) calc(var(--p) * 360deg),var(--ink-faint) 0)}.hq-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}.hq-choice{background:var(--bg-raised);color:var(--ink);border:1px solid var(--ink-faint);border-radius:12px;padding:18px 12px;font-family:ui-serif,New York,Charter,Georgia,serif;font-size:28px;font-weight:600;letter-spacing:-.01em;cursor:pointer;box-shadow:var(--shadow-paper);transition:border-color .12s ease,background .12s ease,transform .08s ease;min-height:72px}.hq-choice:hover:not(:disabled){border-color:var(--clay-soft);background:var(--bg-tint)}.hq-choice:active:not(:disabled){transform:scale(.98)}.hq-choice:disabled{cursor:default}.hq-choice.ok{background:color-mix(in srgb,var(--correct) 18%,var(--bg-raised));border-color:var(--correct);color:var(--correct)}.hq-choice.err{background:color-mix(in srgb,var(--wrong) 18%,var(--bg-raised));border-color:var(--wrong);color:var(--wrong)}.hq-choice.dim{opacity:.45}@media (min-width: 720px){.hq-choices{grid-template-columns:repeat(4,1fr)}}#hq-finish{background:var(--bg-raised);color:var(--ink-muted);border:1px solid var(--ink-faint);padding:5px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-family:inherit;transition:border-color .15s ease,background .15s ease,color .15s ease}#hq-finish:hover{border-color:var(--clay-soft);background:var(--bg-tint);color:var(--ink)}.hq-icon-btn{background:var(--bg-raised);color:var(--ink-muted);border:1px solid var(--ink-faint);padding:5px 12px;border-radius:8px;cursor:pointer;font-size:16px;font-family:inherit;line-height:1;transition:border-color .15s ease,background .15s ease,color .15s ease}.hq-icon-btn:hover{background:var(--bg-tint);border-color:var(--clay-soft);color:var(--ink)}@media (max-width: 600px){.hq{padding:8px;gap:6px}.hq-title{font-size:13px}.hq-score{min-height:140px}}.rq{max-width:960px;margin:0 auto;padding:12px;color:var(--ink);display:flex;flex-direction:column;gap:8px;min-height:100dvh;box-sizing:border-box}.rq-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;background:var(--bg-raised);border:1px solid var(--ink-faint);border-radius:10px;box-shadow:var(--shadow-paper)}.rq-title{font-family:ui-serif,New York,Charter,Georgia,serif;font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.005em}.rq-composer{color:var(--ink-muted);font-weight:400;font-family:inherit}.rq-progress{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;color:var(--ink-muted);font-size:13px}.rq-drill-badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--clay);background:var(--clay-faint);border:1px solid var(--clay-soft);border-radius:999px;padding:2px 8px;white-space:nowrap}.rq-banner{background:var(--clay-faint);border:1px solid var(--clay-soft);color:var(--clay);padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500}.rq-score-wrap{position:relative}.rq-score{background:var(--bg-raised);border-radius:10px;padding:6px;min-height:200px;overflow-x:auto;overflow-y:auto;border:1px solid var(--ink-faint);box-shadow:var(--shadow-paper)}.rq-score svg{display:block}.rq-playhead{position:absolute;width:2px;background:var(--clay);box-shadow:0 0 8px color-mix(in srgb,var(--clay) 55%,transparent);pointer-events:none;transform:translate(-1px);border-radius:1px;z-index:5}.rq-status{text-align:center;font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:14px;color:var(--ink-muted);padding:6px 0}.rq-status.ok{color:var(--correct);font-weight:600}.rq-status.err{color:var(--wrong);font-weight:600}.rq-status.count{color:var(--clay);font-weight:600}.rq-dots{display:flex;gap:10px;justify-content:center;align-items:center;min-height:28px;flex-wrap:wrap}.rq-dot{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--ink-faint);background:var(--bg-raised);color:var(--ink-muted);font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:13px}.rq-dot.ok{background:color-mix(in srgb,var(--correct) 22%,var(--bg-raised));border-color:var(--correct);color:var(--correct)}.rq-dot.err{background:color-mix(in srgb,var(--wrong) 22%,var(--bg-raised));border-color:var(--wrong);color:var(--wrong)}.rq-extras{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:12px;color:var(--wrong);margin-left:8px}.rq-actions{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:4px}.rq-tap{flex:1;max-width:560px;background:var(--bg-raised);color:var(--ink);border:1px solid var(--ink-faint);border-radius:14px;padding:28px 16px;font-family:ui-serif,New York,Charter,Georgia,serif;font-size:22px;font-weight:600;letter-spacing:-.01em;cursor:pointer;box-shadow:var(--shadow-paper);transition:transform .05s ease,background .12s ease,border-color .12s ease;-webkit-user-select:none;user-select:none}.rq-tap:not(:disabled):hover{border-color:var(--clay-soft);background:var(--bg-tint)}.rq-tap:not(:disabled):active{transform:scale(.97);background:color-mix(in srgb,var(--clay) 18%,var(--bg-raised));border-color:var(--clay)}.rq-tap:disabled{opacity:.45;cursor:not-allowed}.rq-play{background:var(--clay);color:var(--bg-paper);border:1px solid var(--clay);border-radius:12px;padding:14px 22px;font-family:ui-serif,New York,Charter,Georgia,serif;font-size:18px;font-weight:600;cursor:pointer;transition:background .12s ease,transform .08s ease}.rq-play:hover{background:color-mix(in srgb,var(--clay) 80%,black)}.rq-play:active{transform:scale(.97)}#rq-finish{background:var(--bg-raised);color:var(--ink-muted);border:1px solid var(--ink-faint);padding:5px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-family:inherit}#rq-finish:hover{border-color:var(--clay-soft);background:var(--bg-tint);color:var(--ink)}.rq-icon-btn{background:var(--bg-raised);color:var(--ink-muted);border:1px solid var(--ink-faint);padding:5px 12px;border-radius:8px;cursor:pointer;font-size:16px;line-height:1}.rq-icon-btn:hover{background:var(--bg-tint);border-color:var(--clay-soft);color:var(--ink)}@media (max-width: 600px){.rq{padding:8px;gap:6px}.rq-title{font-size:13px}.rq-score{min-height:120px}.rq-tap{padding:22px 14px;font-size:18px}}