.reading-stories{--demo-space-1:6px;--demo-space-2:12px;--demo-space-3:20px;--demo-space-4:28px;--demo-radius:18px;--demo-control-radius:10px;--demo-target:44px;--demo-caption-size:12px;--demo-label-size:13px;--demo-chord-size:25px;--demo-lyric-size:19px}.feature-demo{width:100%;min-width:0;color:var(--foreground);background:var(--card);border:1px solid var(--border);border-radius:var(--demo-radius);overflow:hidden}.feature-demo button,.feature-demo select{font:inherit;-webkit-tap-highlight-color:transparent}.feature-demo button{cursor:pointer;transition:background-color .16s,color .16s,box-shadow .16s}.feature-demo button:disabled{cursor:default;opacity:.3}.feature-demo button:not(:disabled):active{transform:scale(.96)}.feature-demo button:focus-visible{outline:3px solid var(--ring);outline-offset:3px}.feature-demo select:focus-visible{outline:3px solid var(--ring);outline-offset:3px}.pace-reader:focus-visible{outline:3px solid var(--ring);outline-offset:3px}.feature-demo button:disabled:active{transform:none}.demo-round-button{border:1px solid var(--input);background:var(--card);width:54px;height:54px;color:var(--primary);border-radius:50%;place-items:center;display:grid}.demo-round-button svg{width:24px;height:24px}.demo-caption{color:var(--muted-foreground);font-size:var(--demo-caption-size);text-align:center;line-height:1.5;display:block}.demo-chords{gap:var(--demo-space-1);text-align:center;grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.demo-chords b{font-family:var(--font-heading);font-weight:700;font-size:var(--demo-chord-size);color:var(--primary);line-height:1.5;display:block}.key-demo{padding:var(--demo-space-4);gap:var(--demo-space-3);display:grid}.key-stepper{justify-content:center;align-items:center;gap:var(--demo-space-4);display:flex}.key-current{text-align:center;min-width:76px;display:grid}.key-current span{font-size:var(--demo-label-size);color:var(--muted-foreground)}.key-current b{font:650 56px/1.3 var(--font-heading);color:var(--primary)}.key-chord-result{padding:var(--demo-space-2);background:var(--secondary);border-radius:var(--demo-control-radius);perspective:450px}.capo-demo{padding:var(--demo-space-3) var(--demo-space-4);background:var(--secondary)}.capo-demo-setting{gap:var(--demo-space-2);margin-bottom:var(--demo-space-3);font-size:var(--demo-label-size);justify-content:center;align-items:center;display:flex}.capo-demo-setting label{font-weight:650}.capo-demo-setting select{min-height:var(--demo-target);border:1px solid var(--input);background:var(--card);border-radius:var(--demo-control-radius);color:var(--primary);padding:8px 28px 8px 12px;font-size:16px;font-weight:650}.capo-mapping{gap:8px;display:grid}.capo-play,.capo-hear{align-items:center;gap:var(--demo-space-2);grid-template-columns:122px minmax(0,1fr);display:grid}.capo-play>span,.capo-hear>span{font-size:var(--demo-caption-size);color:var(--muted-foreground);line-height:1.5}.capo-play strong,.capo-hear strong{color:var(--foreground);font-size:16px;font-weight:650;display:block}.capo-play .demo-chords{background:var(--card);border-radius:var(--demo-control-radius);padding-block:6px}.capo-hear .demo-chords b{color:var(--muted-foreground);font-size:21px}.capo-mapping-arrow{color:var(--primary);margin-inline:auto}.capo-demo>.demo-caption{margin-top:var(--demo-space-3);display:block}.pace-demo{background:var(--card)}.pace-song-title{justify-content:space-between;align-items:center;gap:var(--demo-space-2);padding:14px var(--demo-space-3);border-bottom:1px solid var(--border);font-size:var(--demo-label-size);font-weight:650;display:flex}.pace-song-title>span{font-size:var(--demo-caption-size);color:var(--primary);white-space:nowrap}.pace-reader{overscroll-behavior:auto;scrollbar-width:thin;scrollbar-color:var(--input) transparent;height:192px;overflow-y:auto}.pace-reader-content{padding:var(--demo-space-3) var(--demo-space-4)}.pace-reader-content>section+section{margin-top:var(--demo-space-4)}.demo-chart-lines{gap:var(--demo-space-3);display:grid}.demo-chart-line{flex-wrap:wrap;gap:4px 12px;margin:0;display:flex}.demo-chart-token{flex-direction:column;min-width:0;display:inline-flex}.demo-chart-token b{color:var(--primary);font-size:14px;font-weight:700;line-height:1.5}.demo-chart-token>span{font-size:var(--demo-lyric-size);line-height:1.45}.pace-reader h3,.section-demo-preview h3{letter-spacing:.09em;color:var(--muted-foreground);text-transform:uppercase;margin:0 0 12px;font-size:10px;font-weight:650}.pace-end{font-size:var(--demo-caption-size);color:var(--muted-foreground);padding-block:var(--demo-space-4) 6px}.pace-controls{justify-content:space-between;align-items:center;gap:var(--demo-space-2);padding:var(--demo-space-2) var(--demo-space-3);border-top:1px solid var(--border);background:var(--secondary);display:flex}.demo-play-button{min-height:var(--demo-target);background:var(--primary);min-width:91px;color:var(--primary-foreground);border:1px solid var(--primary);border-radius:var(--demo-control-radius);justify-content:center;align-items:center;gap:8px;padding-inline:14px;display:inline-flex;font-size:13px!important;font-weight:650!important}.pace-tempo{border:1px solid var(--input);border-radius:var(--demo-control-radius);align-items:center;min-width:0;padding:2px;display:flex}.pace-tempo button{min-height:var(--demo-target);color:var(--muted-foreground);border-radius:7px;padding:0 10px;font-size:11px}.pace-tempo button[aria-pressed=true]{background:var(--card);color:var(--primary);font-weight:650}.sections-demo{padding:var(--demo-space-3)}.section-demo-toolbar{justify-content:space-between;gap:var(--demo-space-2);margin-bottom:var(--demo-space-3);color:var(--muted-foreground);font-size:var(--demo-caption-size);align-items:center;display:flex}.section-demo-toolbar>span:first-child{color:var(--foreground);font-weight:650}.section-demo-toolbar>span:last-child{font-size:11px}.section-demo-layout{align-items:start;gap:var(--demo-space-3);grid-template-columns:minmax(220px,1fr) minmax(0,1fr);display:grid}.section-order{gap:var(--demo-space-1);margin:0;padding:0;list-style:none;display:grid;position:relative}.section-order li{background:var(--background);border-radius:var(--demo-control-radius);grid-template-columns:44px minmax(0,1fr) 88px;align-items:center;display:grid;position:relative}.section-order li:has(.section-select[aria-pressed=true]){background:var(--secondary)}.section-order li[data-dragging=true]{box-shadow:0 6px 14px color-mix(in srgb, var(--primary) 16%, transparent);outline:1px solid var(--input)}.section-drag-handle{width:44px;min-height:48px;color:var(--muted-foreground);touch-action:none;place-items:center;display:grid;cursor:grab!important}.section-drag-handle:active{cursor:grabbing!important}.section-select{text-align:left;min-width:0;min-height:48px;color:var(--muted-foreground);justify-content:space-between;align-items:center;gap:2px;display:flex;font-size:12px!important}.section-select[aria-pressed=true]{color:var(--primary);font-weight:650!important}.section-select>svg{flex:none}.section-move-buttons{display:flex}.section-move-buttons button{width:44px;height:44px;color:var(--primary);border-radius:6px;place-items:center;display:grid}.section-demo-preview{min-width:0;min-height:194px;padding-top:5px}.section-demo-preview .demo-chart-lines{gap:14px}.section-demo-preview .demo-chart-token>span{font-size:16px}.sections-demo>.demo-caption{margin-top:var(--demo-space-3);display:block}.demo-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (hover:hover){.demo-round-button:hover,.section-move-buttons button:not(:disabled):hover{background:var(--secondary)}.demo-play-button:hover{background:var(--accent-foreground)}.pace-tempo button:hover,.section-select:hover{color:var(--primary)}}@media (max-width:1100px) and (min-width:801px){.reading-stories{--demo-space-4:20px}.capo-play,.capo-hear{grid-template-columns:91px minmax(0,1fr)}.capo-play .demo-chords b{font-size:22px}.section-demo-layout{gap:var(--demo-space-3);grid-template-columns:1fr}.section-order li{grid-template-columns:44px minmax(0,1fr) 88px}.section-drag-handle{width:44px;min-height:48px}.section-select{min-height:48px;padding-right:8px}.section-move-buttons{display:flex}.section-move-buttons button{width:44px;height:44px}.section-demo-preview{min-height:158px}}@media (max-width:800px){.feature-demo{max-width:460px;margin-inline:auto}.reading-stories{--demo-space-4:24px;--demo-chord-size:26px}.capo-play,.capo-hear{grid-template-columns:108px minmax(0,1fr)}.capo-play .demo-chords b{font-size:23px}.capo-hear .demo-chords b{font-size:19px}.section-demo-layout{gap:var(--demo-space-3);grid-template-columns:1fr}.section-order li{grid-template-columns:44px minmax(0,1fr) 88px}.section-drag-handle{width:44px;min-height:48px}.section-select{min-height:48px;padding-right:8px;font-size:14px!important}.section-move-buttons{display:flex}.section-move-buttons button{width:44px;height:44px}.section-demo-preview{min-height:172px;padding:var(--demo-space-3) 4px 0;border-top:1px solid var(--border)}.section-demo-preview .demo-chart-token>span{font-size:18px}.pace-reader{height:210px}}@media (max-width:380px){.reading-stories{--demo-space-3:16px;--demo-space-4:18px;--demo-chord-size:24px}.key-stepper{gap:24px}.capo-play,.capo-hear{grid-template-columns:85px minmax(0,1fr);gap:6px}.capo-play strong,.capo-hear strong{font-size:14px}.capo-play .demo-chords b{font-size:20px}.capo-hear .demo-chords b{font-size:18px}.pace-controls{flex-wrap:wrap;justify-content:center}.demo-play-button{flex:1}.pace-tempo{flex:1;justify-content:center;min-width:0}.pace-tempo button{flex:1}}@media (prefers-reduced-motion:reduce){.feature-demo button{transition:none}}@media (max-width:380px){.capo-play,.capo-hear{grid-template-columns:minmax(0,1fr);gap:5px}.capo-play>span,.capo-hear>span{justify-content:center;align-items:baseline;gap:5px;display:flex}.pace-controls{grid-template-columns:minmax(0,1fr);gap:10px;display:grid}.demo-play-button,.pace-tempo{width:100%}.pace-tempo button{white-space:nowrap;min-width:44px;padding-inline:8px}}