:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--font-primary:"Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--space-1:.25rem;--space-1h:.375rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--fs-3xs:.625rem;--fs-2xs:.6875rem;--fs-xs:.75rem;--fs-sm:.8125rem;--fs-md:.875rem;--fs-base:.9375rem;--fs-lg:1rem;--fs-xl:1.125rem;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-pill:999px;--dur-fast:.15s;--dur-base:.25s;--dur-slow:.3s;--bg-canvas:#15181f;--bg-panel:#232731bf;--bg-overlay:#232731f2;--border-trim:#2e3440b3;--color-text-primary:#eceff4;--color-text-muted:#d8dee9;--color-text-dim:#8e96a5;--color-on-accent:#15181f;--color-focus:#fff;--neck-wood-start:#2e2624;--neck-wood-end:#1e1918;--neck-edge:#0f0c0c;--neck-nut:#c3b091;--color-accent:#a59390;--color-accent-light:#c2b1af;--color-accent-opaque:#a5939026;--scale-pos-1-color:#e63946;--scale-pos-2-color:#e8c53a;--scale-pos-3-color:#2a9d8f;--scale-pos-4-color:#9d4edd;--scale-pos-5-color:#f4a261;--color-success:#a3be8c;--color-success-bg:#a3be8c26;--color-error:#bf616a;--color-error-text:#e8909a;--color-error-bg:#bf616a26;--glass-border:1px solid #ffffff0d;--glass-shadow:0 8px 32px 0 #0000005e;--glass-blur:blur(14px);--fret-open-col-width:60px;--fret-track-list:var(--fret-open-col-width) 1.25fr 1.18fr 1.11fr 1.05fr .99fr .93fr .88fr .83fr .78fr .74fr .7fr .66fr .62fr .59fr .55fr;--fret-row-height:2.875rem;--note-node-size:1.75rem;--neck-min-width:1000px;--neck-border-width:3px;--fret-wire-width:2px;--fret-nut-width:6px;--fret-marker-size:10px;--z-neck-svg:-1;--z-neck-inlay:5;--z-neck-wire:10;--z-neck-nut:15;--z-neck-string:20;--z-neck-selection:25;--z-neck-ring:30;--z-neck-note:31}*{box-sizing:border-box;font-family:var(--font-primary);margin:0;padding:0}.fret-cell,.answer-node,.switch-slider,.fret-number-label,.stat-pill,.btn-primary,.btn-secondary{-webkit-user-select:none;user-select:none}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-canvas)}::-webkit-scrollbar-thumb{background:var(--border-trim);border-radius:var(--radius-xs)}::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}body{background-color:var(--bg-canvas);color:var(--color-text-primary);min-height:100dvh;overflow-x:hidden}.app-viewport{width:100%;max-width:1400px;padding:var(--space-5) var(--space-6);gap:var(--space-5);flex-direction:column;margin:0 auto;display:flex}.app-viewport>.glass-panel{flex-shrink:0}.stat-pill{align-items:center;gap:var(--space-2);background:var(--bg-canvas);border:1px solid var(--border-trim);padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);font-size:var(--fs-md);font-weight:600;display:flex}.stat-pill svg{width:16px;height:16px;fill:var(--color-accent)}.stat-pill.is-clearable{cursor:pointer;color:var(--color-accent-light);border-color:var(--color-accent);min-height:2.75rem;transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease}.stat-pill.is-clearable:hover{background:var(--color-accent-opaque)}.glass-panel{background:var(--bg-panel);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--radius-xl);padding:var(--space-5)}.fretboard-container{gap:var(--space-3);flex-direction:column;display:flex}.fretboard-controlbar{justify-content:space-between;align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;display:flex}.controlbar-status{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.controlbar-controls{align-items:center;gap:var(--space-2);flex-wrap:wrap;flex:1 1 0;min-width:0;display:flex}.fretboard-scroll-frame{position:relative}.fretboard-wrapper{border-radius:var(--radius-lg);width:100%;scroll-padding-inline:var(--space-4);overflow-x:auto}.fretboard-scroll-frame:after{content:"";width:var(--space-6);border-radius:0 var(--radius-lg) var(--radius-lg) 0;pointer-events:none;position:absolute;top:0;bottom:0;right:0}.guitar-neck{grid-template-rows:repeat(6, var(--fret-row-height));grid-template-columns:var(--fret-track-list);background:radial-gradient(circle at center, var(--neck-wood-start) 0%, var(--neck-wood-end) 100%);border-radius:var(--radius-md);border:var(--neck-border-width) solid var(--neck-edge);isolation:isolate;min-width:var(--neck-min-width);display:grid;position:relative;box-shadow:inset 0 0 15px #000000e6}.guitar-neck:before{content:"";width:var(--fret-nut-width);background:var(--neck-nut);pointer-events:none;z-index:var(--z-neck-nut);grid-area:1/2/-1/3;position:absolute;top:0;bottom:0;left:0;box-shadow:2px 0 5px #00000080}.marker-dot{width:var(--fret-marker-size);height:var(--fret-marker-size);pointer-events:none;z-index:var(--z-neck-inlay);background-color:#fff6;border-radius:50%;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%)}.fret-cell{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;justify-content:center;align-items:center;transition:background-color .15s;display:flex;position:relative}.fret-cell.open-string-cell{background-color:#00000040}.fret-wire{width:var(--fret-wire-width);pointer-events:none;z-index:var(--z-neck-wire);background:linear-gradient(#cfd2d4 0%,#fff 30%,#6e7275 100%);position:absolute;top:0;bottom:0;right:0;transform:translate(50%);box-shadow:1px 0 2px #0009}.neck-string{height:var(--string-thickness,2px);pointer-events:none;z-index:var(--z-neck-string);background:linear-gradient(#dcdcdc 0%,#a9a9a9 50%,#696969 100%);position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);box-shadow:0 1px 2px #0009}.fret-cell:hover{background-color:#ffffff0a}.fret-numbers-row{grid-template-columns:var(--fret-track-list);padding:8px var(--neck-border-width);min-width:var(--neck-min-width);display:grid}.fret-number-label{text-align:center;font-size:var(--fs-sm);color:var(--color-text-dim);font-weight:600}.note-ring{z-index:var(--z-neck-ring);border-radius:50%;justify-content:center;align-items:center;padding:4px;display:inline-flex;position:relative}.note-node{width:var(--note-node-size);height:var(--note-node-size);font-size:var(--fs-xs);color:var(--note-fg,var(--bg-canvas));z-index:var(--z-neck-note);pointer-events:none;border-radius:50%;justify-content:center;align-items:center;font-weight:700;transition:transform .15s cubic-bezier(.175,.885,.32,1.275),box-shadow .15s;display:flex;position:relative;transform:scale(1);box-shadow:0 4px 10px #0009,inset 0 1px 1px #fff6}.note-node.root-note{border:2px solid #fff;box-shadow:0 4px 12px #000000b3,inset 0 1px 1px #fff6}.note-node.root-note:before{content:"👑";font-size:11px;position:absolute;top:-13px}[data-mode=notes] .note-node.accidental-note{width:1.375rem;height:1.375rem;font-size:var(--fs-2xs)}.note-c{background-color:var(--color-note-c);--note-fg:var(--color-note-c-fg)}.note-d{background-color:var(--color-note-d);--note-fg:var(--color-note-d-fg)}.note-e{background-color:var(--color-note-e);--note-fg:var(--color-note-e-fg)}.note-f{background-color:var(--color-note-f);--note-fg:var(--color-note-f-fg)}.note-g{background-color:var(--color-note-g);--note-fg:var(--color-note-g-fg)}.note-a{background-color:var(--color-note-a);--note-fg:var(--color-note-a-fg)}.note-b{background-color:var(--color-note-b);--note-fg:var(--color-note-b-fg)}.fret-cell.pin-anchor:before{content:"";border:2.5px solid var(--color-accent-light);width:30px;height:30px;box-shadow:0 0 10px var(--color-accent);z-index:var(--z-neck-selection);background-color:#ffffff26;border-radius:50%;animation:.2s cubic-bezier(.175,.885,.32,1.275) forwards popIn;position:absolute}.fret-cell.is-charging:before{content:"";border:2.5px solid var(--color-accent-light);width:30px;height:30px;box-shadow:none;z-index:var(--z-neck-selection);animation:pressCharge var(--press-duration,.5s) linear forwards;background-color:#0000;border-radius:50%;position:absolute}@keyframes popIn{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes pressCharge{0%{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}#quiz-controls{flex:1;min-width:0}.controls-layout{gap:var(--space-4);flex-wrap:wrap;align-items:flex-start;display:flex}.controls-layout .token-switch{flex-shrink:0}.control-label{font-size:var(--fs-sm);color:var(--color-text-dim);font-weight:500}:where(a,button,select,input,summary,[tabindex]):focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.token-row{align-items:center;gap:var(--space-2);flex-wrap:wrap;min-width:0;display:flex}.token{align-items:center;gap:var(--space-2);background:var(--bg-canvas);border:1px solid var(--border-trim);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);min-height:2.75rem;font-size:var(--fs-lg);color:var(--color-text-primary);transition:border-color var(--dur-fast) ease;font-weight:600;display:inline-flex;position:relative}.token-lead{background:var(--color-accent-opaque);border-color:var(--color-accent);color:var(--color-accent-light)}.token:hover{border-color:var(--color-accent)}.token:after{content:"";width:.4375rem;height:.4375rem;margin-left:var(--space-1);border-right:2px solid var(--color-text-dim);border-bottom:2px solid var(--color-text-dim);flex-shrink:0;transform:translateY(-2px)rotate(45deg)}.token-text{white-space:nowrap}.token-badge-slot:empty{display:none}.token-select{opacity:0;cursor:pointer;appearance:none;border:none;outline:none;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}.token:has(.token-select:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px}.token-switch{align-items:center;gap:var(--space-2);min-height:2.75rem;display:inline-flex}.token-switch>label:first-child{font-size:var(--fs-sm);color:var(--color-text-dim);font-weight:500}#focus-strip-row{align-items:center;gap:var(--space-2);min-width:0;display:flex}.focus-group{align-items:center;gap:var(--space-1);min-width:0;display:flex}.focus-state-select{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.focus-strip{align-items:center;gap:var(--space-1);scrollbar-width:none;padding:2px;display:flex;overflow-x:auto}.focus-strip::-webkit-scrollbar{display:none}.focus-segment{justify-content:center;align-items:center;gap:var(--space-2);min-width:2.75rem;min-height:2.75rem;padding:0 var(--space-3);background:var(--bg-canvas);border:1px solid var(--border-trim);border-radius:var(--radius-md);color:var(--color-text-muted);font-family:inherit;font-size:var(--fs-md);cursor:pointer;transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;flex-shrink:0;font-weight:600;display:inline-flex}.focus-segment:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-text-primary)}.focus-segment:disabled{opacity:.35;cursor:not-allowed}.focus-segment.has-color:before{content:"";border-radius:var(--radius-pill);background:var(--segment-color);flex-shrink:0;width:.5rem;height:.5rem}.focus-segment.is-active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.focus-segment.has-color.is-active{background:var(--segment-color);border-color:var(--segment-color);color:var(--color-on-accent)}.focus-segment.has-color.is-active:before{background:var(--color-on-accent)}.styled-select{background:var(--bg-canvas);border:1px solid var(--border-trim);color:var(--color-text-primary);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--fs-base);cursor:pointer;outline:none;font-weight:500;transition:border-color .2s}.styled-select:focus{border-color:var(--color-accent)}.styled-select:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.styled-select:disabled{opacity:.35;pointer-events:none;cursor:not-allowed;background-color:#00000026}.fret-cell:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px;box-shadow:inset 0 0 0 4px #000000b3}.info-icon-container{width:2.75rem;height:2.75rem;margin:-.875rem -.875rem -.875rem calc(var(--space-1h) - .875rem);color:var(--color-text-dim);cursor:help;vertical-align:middle;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex;position:relative}.info-icon-container:hover,.info-icon-container:focus-visible{color:var(--color-text-primary)}.info-tooltip{visibility:hidden;opacity:0;width:max-content;max-width:min(15rem, calc(100vw - var(--space-6)));background:var(--bg-canvas);border:1px solid var(--border-trim);-webkit-backdrop-filter:blur(12px);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--fs-xs);text-align:center;z-index:100;-webkit-user-select:text;user-select:text;font-weight:400;line-height:1.4;transition:opacity .2s,visibility .2s;position:absolute;bottom:calc(100% - .5rem);left:50%;transform:translate(-50%);box-shadow:0 4px 15px #0006}.info-icon-container:hover .info-tooltip,.info-icon-container:focus-within .info-tooltip{visibility:visible;opacity:1}.switch-container{width:50px;height:28px;display:inline-block;position:relative}.switch-container:after{content:"";position:absolute;inset:-8px 0}.switch-container input{opacity:0;width:0;height:0}.switch-slider{cursor:pointer;background-color:var(--bg-canvas);border:1px solid var(--border-trim);transition:var(--dur-base) ease;border-radius:var(--radius-pill);position:absolute;inset:0}.switch-container input:focus-visible+.switch-slider{outline:2px solid var(--color-focus);outline-offset:2px}.switch-slider:before{content:"";background-color:var(--color-text-dim);width:18px;height:18px;transition:var(--dur-base) ease;border-radius:50%;position:absolute;bottom:4px;left:4px}.switch-container input:checked+.switch-slider{background-color:var(--color-accent-opaque);border-color:var(--color-accent)}.switch-container input:checked+.switch-slider:before{background-color:var(--color-accent);transform:translate(22px)}.neck-svg-overlay{pointer-events:none;width:100%;height:100%;z-index:var(--z-neck-svg);position:absolute;top:0;left:0}.scale-box-path,.chord-box-path{fill-opacity:0;stroke-opacity:0;stroke-width:1.5px;stroke-linejoin:round;transition:fill-opacity .3s,stroke-opacity .3s}.scale-box-path.visible,.chord-box-path.visible{fill-opacity:.18;stroke-opacity:.7}.scale-box-path.visible.hovered,.chord-box-path.visible.hovered{fill-opacity:.35;stroke-opacity:1}#neck-tooltip{pointer-events:none;background:var(--bg-overlay);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--color-text-primary);padding:var(--space-1h) var(--space-3);border-radius:var(--radius-sm);font-size:var(--fs-xs);z-index:1000;opacity:0;border:1px solid #ffffff26;font-weight:600;transition:opacity .2s;position:absolute;box-shadow:0 4px 16px #00000080}.note-node.dimmed{filter:grayscale(40%);transition:opacity .3s,filter .3s,transform .3s;transform:scale(.9);opacity:.25!important}.note-node.pc-match{outline-offset:2px;outline:2px solid #ffffffeb;transform:scale(1.12)}.guitar-neck.has-pin .note-node:not(.pc-match){filter:grayscale(70%);opacity:.12!important}.btn-primary{background:var(--color-accent);color:var(--color-on-accent);padding:var(--space-3) var(--space-6);font-size:var(--fs-base);border-radius:var(--radius-lg);cursor:pointer;align-items:center;gap:var(--space-2);border:none;font-weight:600;transition:background-color .2s,box-shadow .2s,transform .2s;display:inline-flex;box-shadow:0 4px 14px #a5939033}.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn-primary:disabled:hover{background:var(--color-accent);transform:none}.btn-primary:hover{background:var(--color-accent-light);transform:translateY(-1px);box-shadow:0 6px 20px #a5939059}.btn-primary:active{transform:translateY(0)}.btn-secondary{color:var(--color-text-primary);border:1px solid var(--border-trim);padding:var(--space-3) var(--space-6);font-size:var(--fs-base);border-radius:var(--radius-lg);cursor:pointer;background:0 0;font-weight:600;transition:background-color .2s,border-color .2s}.btn-secondary:hover{border-color:var(--color-text-muted);background:#ffffff08}.icon-button{background:var(--bg-canvas);border:1px solid var(--border-trim);border-radius:var(--radius-lg);width:2.75rem;height:2.75rem;color:var(--color-text-dim);cursor:pointer;justify-content:center;align-items:center;padding:0;transition:color .2s,border-color .2s;display:inline-flex}.icon-button:hover{color:var(--color-text-primary);border-color:var(--color-accent)}.icon-button .icon-muted,.icon-button.is-muted .icon-unmuted{display:none}.icon-button.is-muted .icon-muted{color:var(--color-error-text);display:block}.pin-clear-button{padding:0 0 0 var(--space-1);color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;margin:0;line-height:1}.fret-range-row{align-items:flex-start;gap:var(--space-2);flex:0 auto;min-width:0;display:flex}.fret-range-row .control-label{flex-shrink:0;align-items:center;min-height:2.75rem;display:flex}.dual-range{cursor:pointer;touch-action:none;width:380px;min-width:240px;height:52px;position:relative}.dual-range-rail{background:var(--border-trim);border-radius:var(--radius-pill);height:6px;position:absolute;top:19px;left:0;right:0}.dual-range-fill{top:0;bottom:0;left:calc(var(--thumb) / 2 + var(--t-min,0) * (100% - var(--thumb)));right:calc(100% - (var(--thumb) / 2 + var(--t-max,1) * (100% - var(--thumb))));background:var(--color-accent);border-radius:var(--radius-pill);position:absolute}.dual-range .range-slider{appearance:none;pointer-events:none;background:0 0;width:100%;height:44px;margin:0;padding:0;position:absolute;top:0;left:0}.range-slider::-webkit-slider-runnable-track{background:0 0;height:6px}.range-slider::-moz-range-track{background:0 0;height:6px}.range-slider::-webkit-slider-thumb{appearance:none;width:var(--thumb);height:var(--thumb);background:var(--color-accent);border:2px solid var(--bg-canvas);border-radius:50%;margin-top:-7px}.range-slider::-moz-range-thumb{width:var(--thumb);height:var(--thumb);background:var(--color-accent);border:2px solid var(--bg-canvas);border-radius:50%}.dual-range .range-slider:focus-visible{outline:none}.range-slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--color-focus);outline-offset:2px}.range-slider:focus-visible::-moz-range-thumb{outline:2px solid var(--color-focus);outline-offset:2px}.dual-range-readout{top:34px;left:calc(var(--thumb) / 2 + var(--t) * (100% - var(--thumb)));font-size:var(--fs-md);color:var(--color-text-dim);font-variant-numeric:tabular-nums;font-weight:600;position:absolute;transform:translate(-50%)}.dual-range-readout--min{--t:var(--t-min,0)}.dual-range-readout--max{--t:var(--t-max,1)}.dual-range-readout--merged{--t:calc((var(--t-min,0) + var(--t-max,1)) / 2);display:none}.dual-range.is-merged .dual-range-readout--min,.dual-range.is-merged .dual-range-readout--max{display:none}.dual-range.is-merged .dual-range-readout--merged{display:block}.dual-range.is-disabled{opacity:.4;cursor:not-allowed}.quiz-config-warning{margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--color-error-text);flex-basis:100%;line-height:1.4}.quiz-prompt-text{font-size:var(--fs-xl);letter-spacing:.2px;align-items:center;min-height:2.75rem;font-weight:600;display:flex}.quiz-summary-title{font-size:var(--fs-lg);margin-bottom:var(--space-3);font-weight:600}.quiz-summary-stats{gap:var(--space-3) var(--space-6);flex-wrap:wrap;display:flex}.quiz-summary-stats dt{font-size:var(--fs-sm);color:var(--color-text-dim)}.quiz-summary-stats dd{font-size:var(--fs-xl);margin-right:var(--space-5);font-weight:700}.quiz-answer-panel{justify-content:center;align-items:center;display:flex}.quiz-answer-strip{justify-content:center;gap:var(--space-3);flex-wrap:wrap;width:100%;display:flex}.answer-node{width:48px;height:48px;font-size:var(--fs-lg);color:var(--note-fg,var(--bg-canvas));cursor:pointer;transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color .2s ease, border-color .2s ease;border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;font-family:inherit;font-weight:700;display:flex;position:relative;box-shadow:0 4px 10px #0000004d}.answer-node:hover:not(:disabled){transform:scale(1.1)}.answer-node:disabled{cursor:not-allowed;opacity:.25}.answer-node.accidental{width:38px;height:38px;font-size:var(--fs-sm);margin:5px 0}.answer-node.accidental:after{content:"";border-radius:50%;position:absolute;inset:-3px}.answer-node.correct-flash{animation:.5s ease-out correctScale;background-color:var(--color-success)!important;color:var(--color-on-accent)!important;border-color:var(--color-success)!important;box-shadow:0 0 20px #a3be8ccc!important}.answer-node.wrong-flash{animation:.5s ease-in-out shakeNode;background-color:var(--color-error)!important;color:#fff!important;border-color:var(--color-error)!important;box-shadow:0 0 20px #bf616acc!important}.answer-node.reveal{animation:.8s infinite alternate pulseReveal;border-color:#fff!important;box-shadow:0 0 15px #fffc!important}@keyframes correctScale{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes shakeNode{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@keyframes pulseReveal{0%{transform:scale(1);box-shadow:0 0 5px #ffffff80}to{transform:scale(1.1);box-shadow:0 0 20px #ffffffe6}}.quiz-target-node{animation:1.2s infinite alternate pulseTarget;border:2px solid #fff!important}@keyframes pulseTarget{0%{transform:scale(1);box-shadow:0 0 4px #fff6}to{transform:scale(1.15);box-shadow:0 0 16px #ffffffe6}}#quiz-controls,#quiz-prompt-text,#quiz-answer-panel,#btn-quiz-begin,#btn-quiz-back,#btn-quiz-stop,body.is-quiz-mode #explore-controls,body.is-quiz-mode #focus-strip-row,body.is-quiz-mode #fretboard-title,body.is-quiz-mode #notes-found-badge,body.is-quiz-mode #btn-quiz-start,body:not(.quiz-available) #btn-quiz-start{display:none}body.is-quiz-mode:not(.is-quiz-active) #quiz-controls{display:flex}body.is-quiz-mode:not(.is-quiz-active) #btn-quiz-begin,body.is-quiz-mode:not(.is-quiz-active) #btn-quiz-back{display:inline-block}body.is-quiz-active #quiz-prompt-text{display:block}body.is-quiz-active #quiz-answer-panel{display:flex}body.is-quiz-active #btn-quiz-stop{display:inline-block}[hidden]{display:none!important}.beta-badge{background:var(--color-accent);color:var(--color-on-accent);font-size:var(--fs-3xs);padding:2px var(--space-1h);border-radius:var(--radius-xs);margin-left:var(--space-2);vertical-align:middle;letter-spacing:.5px;font-weight:700;line-height:1.2;display:inline-block}.toast-notification{bottom:var(--space-5);right:var(--space-5);max-width:min(28rem, calc(100vw - var(--space-6)));padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);overflow-wrap:anywhere;align-items:center;gap:var(--space-3);z-index:500;font-weight:600;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards slideInUp;display:flex;position:fixed;box-shadow:0 10px 30px #00000080}.toast-success{background-color:var(--color-success-bg);border:1px solid var(--color-success);color:var(--color-success)}.toast-error{background-color:var(--color-error-bg);border:1px solid var(--color-error);color:var(--color-error-text)}@keyframes slideInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.quiz-target-node{box-shadow:0 0 0 3px var(--color-focus)!important;animation:none!important}.answer-node.reveal{border-color:var(--color-focus)!important;animation:none!important;box-shadow:0 0 0 3px #fff9!important}.answer-node:hover:not(:disabled){transform:none}}@media (width<=1024px){:root{--neck-min-width:880px}}@media (width<=768px){:root{--fret-open-col-width:44px;--fret-row-height:2.5rem;--neck-min-width:760px}.app-viewport,.glass-panel{padding:var(--space-4)}.controls-layout{gap:var(--space-3)}.fret-range-row{flex-basis:100%}.dual-range{min-width:0}body.is-quiz-mode:not(.is-quiz-active) .controlbar-controls{flex-basis:100%}}@media (width<=480px){:root{--fret-open-col-width:36px;--neck-min-width:640px}.token{font-size:var(--fs-base);padding:var(--space-2);gap:var(--space-1)}.token-switch>label:first-child{font-size:var(--fs-xs)}.focus-segment{padding:0 var(--space-2);font-size:var(--fs-sm)}.answer-node{width:44px;height:44px}.toast-notification{left:var(--space-3);right:var(--space-3);bottom:var(--space-3);max-width:none}}