:root{color-scheme:light;--color-bg:#f8f1e3;--color-panel-bg:#fdf9ef;--color-wood:#ecd8ab;--color-wood-shade:#dcbe88;--color-wood-edge:#c9a86e;--color-gold:#b8933f;--color-gold-bright:#d9a94a;--color-jade:#2f7d63;--color-jade-soft:#cfe8dc;--color-coral:#d9614a;--color-coral-glow:#eb9468;--color-text:#4a3524;--color-text-muted:#8a7458;--shadow-soft:0 8px 24px #4a352424}*{box-sizing:border-box}html,body{background:var(--color-bg);min-height:100%;color:var(--color-text);margin:0;font-family:system-ui,sans-serif}.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}header{justify-content:space-between;align-items:baseline;gap:.75rem;padding:1rem 1.25rem 0;display:flex}.brand-block{flex-direction:column;gap:.15rem;display:flex}.brand{letter-spacing:.02em;color:var(--color-text);margin:0;font-family:Georgia,Iowan Old Style,Palatino Linotype,serif;font-size:1.15rem}.subtitle{color:var(--color-text-muted);margin:0;font-size:.75rem}header nav a{color:var(--color-text-muted);font-size:.75rem;text-decoration:none}header nav a:hover,header nav a:focus-visible{color:var(--color-gold-bright);text-decoration:underline}main{justify-content:center;align-items:center;padding:1.5rem;display:flex}.stage{justify-content:center;align-items:center;gap:2rem;width:100%;max-width:720px;display:flex}.instrument{flex-direction:column;flex:none;align-items:center;width:min(92vw,420px,35vh);display:flex}.instrument-frame{aspect-ratio:3/5;flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.pipa-silhouette{z-index:0;width:100%;height:100%;filter:drop-shadow(var(--shadow-soft));position:absolute;inset:0}.instrument-neck{z-index:1;touch-action:none;flex:0 0 62%;width:30%;display:block;position:relative}.fret-row--open{position:absolute;left:0;right:0}.fret-rows-stopped{flex-direction:column;display:flex;position:absolute;left:0;right:0}.fret-row{position:relative}.fret-rows-stopped .fret-row{flex:1}.fret{appearance:none;cursor:pointer;touch-action:none;user-select:none;background:0 0;border:none;width:2rem;margin:0;padding:0;position:absolute;top:0;bottom:0;transform:translate(-50%)}.fret:after{content:"";background:0 0;border-radius:50%;width:14px;height:14px;transition:background .12s,box-shadow .12s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.fret:hover:not(:disabled):after{background:var(--color-gold-bright)}.fret[aria-pressed=true]:after{background:var(--color-jade);box-shadow:0 0 0 6px var(--color-jade-soft)}.fret--open:after{border-radius:0;width:11px;height:11px;transform:translate(-50%,-50%)rotate(45deg)}.fret:focus-visible{outline:3px solid var(--color-gold-bright);outline-offset:2px}.instrument-body{z-index:1;flex:38%;width:100%;position:relative}.playfield{touch-action:none;user-select:none;cursor:pointer;outline-offset:-6px;width:100%;height:100%;position:relative}.playfield:focus-visible{outline:3px solid var(--color-gold-bright)}.string-lane{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.plucks{justify-content:space-around;width:100%;margin-top:.6rem;display:flex}.pluck{border:1px solid var(--color-wood-edge);background:var(--color-panel-bg);width:2.25rem;height:2.25rem;color:var(--color-text);touch-action:none;user-select:none;cursor:pointer;border-radius:50%;font-size:.9rem}.pluck:focus-visible{outline:3px solid var(--color-gold-bright);outline-offset:2px}.pluck:disabled{opacity:.4;cursor:not-allowed}.layers{flex-wrap:wrap;justify-content:center;gap:.4rem;width:100%;margin-top:.6rem;display:flex}.layer{border:1px solid var(--color-wood-edge);background:var(--color-panel-bg);min-height:2.75rem;color:var(--color-text);touch-action:manipulation;user-select:none;cursor:pointer;border-radius:999px;padding:.3rem .85rem;font-size:.8rem;transition:background .12s,color .12s,border-color .12s}.layer[aria-pressed=true]{background:var(--color-jade);border-color:var(--color-jade);color:#fff}.layer:focus-visible{outline:3px solid var(--color-gold-bright);outline-offset:2px}@keyframes layer-refused-flash{0%,to{box-shadow:none}50%{box-shadow:0 0 0 4px var(--color-coral-glow)}}.layer.refused{animation:.26s ease-out layer-refused-flash}.panel{border:1px solid var(--color-wood-edge);background:var(--color-panel-bg);width:240px;box-shadow:var(--shadow-soft);color:var(--color-text-muted);border-radius:1rem;flex:0 0 240px;padding:.9rem 1rem;font-size:.8rem}.panel h2{text-transform:uppercase;letter-spacing:.06em;color:var(--color-text);margin:0 0 .5rem;font-size:.75rem}.panel dl{grid-template-columns:auto 1fr;gap:.25rem .6rem;margin:0;display:grid}.panel dt{color:var(--color-text);font-weight:600}.panel dd{margin:0}.dev-readout{color:var(--color-text-muted);margin:.5rem 0 0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.72rem}@media (width>=701px){.stage{flex-direction:row}}@media (width<=700px){.stage{flex-direction:column;gap:1rem}.panel{flex:none;width:100%;max-width:360px}.instrument{width:min(92vw,420px,30vh)}.song-guide{flex:none;width:100%;max-width:260px}}.song-guide{flex-direction:column;flex:0 0 200px;align-items:center;gap:.6rem;width:200px;display:flex}.song-guide-book{appearance:none;cursor:pointer;touch-action:manipulation;background:0 0;border:none;width:82px;height:92px;padding:0;display:flex;position:relative}.song-guide-book-spine{background:var(--color-wood-edge);border-radius:5px 0 0 5px;flex:0 0 12px;width:12px;box-shadow:inset -3px 0 4px #4a35244d}.song-guide-book-cover{background:linear-gradient(135deg, var(--color-wood), var(--color-wood-shade));box-shadow:var(--shadow-soft);border-radius:0 10px 10px 0;flex:1;justify-content:center;align-items:center;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.song-guide-book-cover{transition:transform .15s,box-shadow .15s}.song-guide-book:hover .song-guide-book-cover,.song-guide-book:focus-visible .song-guide-book-cover{transform:translateY(-3px)}}.song-guide-book:hover .song-guide-book-cover,.song-guide-book:focus-visible .song-guide-book-cover{box-shadow:0 10px 18px #4a35243d}.song-guide-book:active .song-guide-book-cover{box-shadow:inset 0 2px 5px #4a35244d}.song-guide-book[aria-expanded=true] .song-guide-book-cover{background:linear-gradient(135deg, var(--color-jade-soft), var(--color-wood));box-shadow:0 0 0 3px var(--color-jade-soft)}.song-guide-book:focus-visible{outline:3px solid var(--color-gold-bright);outline-offset:3px;border-radius:10px}.song-guide-book-page{background:var(--color-panel-bg);border-radius:0 3px 3px 0;width:4px;position:absolute;top:5px;bottom:5px;right:2px;box-shadow:1px 0 #4a35242e}.song-guide-book-label{text-align:center;letter-spacing:.02em;color:var(--color-text);font-family:Georgia,Iowan Old Style,Palatino Linotype,serif;font-size:.72rem;line-height:1.25;position:relative}.song-guide-invitation,#song-guide-panel{border:1px solid var(--color-wood-edge);background:var(--color-panel-bg);width:100%;box-shadow:var(--shadow-soft);color:var(--color-text-muted);border-radius:.85rem;padding:.8rem .9rem;font-size:.78rem}.song-guide-invitation{text-align:center}.song-guide-invitation-title{color:var(--color-text);margin:0 0 .3rem;font-weight:600}.song-guide-invitation p{margin:0 0 .6rem}.song-guide-invitation-controls{justify-content:center;gap:.4rem;display:flex}#song-guide-title{color:var(--color-text);margin:0 0 .4rem;font-size:.85rem}#song-guide-layer-note{margin:0 0 .6rem}#song-guide-step-label{color:var(--color-text);margin:0 0 .6rem;font-weight:600}.song-guide-controls{flex-wrap:wrap;gap:.35rem;display:flex}.song-guide-invitation-controls button,#song-guide-panel button{border:1px solid var(--color-wood-edge);background:var(--color-panel-bg);min-height:2.2rem;color:var(--color-text);cursor:pointer;border-radius:999px;padding:.3rem .7rem;font-size:.75rem}#song-guide-invitation-start,#song-guide-start{background:var(--color-jade);border-color:var(--color-jade);color:#fff}.song-guide-invitation-controls button:focus-visible,#song-guide-panel button:focus-visible{outline:3px solid var(--color-gold-bright);outline-offset:2px}.song-guide-highlight{z-index:3;pointer-events:none;position:absolute}.song-guide-highlight--tap,.song-guide-highlight--hold{border-radius:50%;width:22px;height:22px;transform:translate(-50%,-50%)}.song-guide-highlight--tap{background:radial-gradient(circle, var(--color-coral-glow), transparent 70%)}@media (prefers-reduced-motion:no-preference){.song-guide-highlight--tap:not(.song-guide-highlight--reduced){animation:.9s ease-out infinite song-guide-pulse}}.song-guide-highlight--tap.song-guide-highlight--reduced{border:3px solid var(--color-coral);background:0 0}.song-guide-highlight--hold{background:var(--color-coral-glow);box-shadow:0 0 0 8px #d9614a40}.song-guide-highlight--verticalMove{background:linear-gradient(to bottom, var(--color-coral-glow), transparent);border-radius:6px;width:10px;transform:translate(-50%)}.song-guide-highlight--verticalMove.song-guide-highlight--up{background:linear-gradient(to top, var(--color-coral-glow), transparent)}.song-guide-highlight--sweep{background:linear-gradient(90deg, transparent, var(--color-coral-glow), transparent);border-radius:6px;height:10px;transform:translateY(-50%)}@keyframes song-guide-pulse{0%,to{opacity:.6;transform:translate(-50%,-50%)scale(.9)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.15)}}