header{padding:24px 28px}.wordmark{font-size:13px}.header-actions .icon{width:44px;height:44px}.invitation{inset:auto auto 125px 28px;width:auto;display:flex;align-items:center;gap:18px;padding:0;background:none;backdrop-filter:none}.invitation .primary{min-height:44px}.invitation .text-button{margin:0}.chord-dock{bottom:28px;width:min(650px,calc(100% - 56px));gap:8px}.chord{display:flex;align-items:center;gap:12px;min-height:64px;padding:14px 16px}.chord-top{display:block;min-height:0;margin:0}.gesture{display:block;width:auto;margin:0;font:400 18px/1 system-ui,sans-serif;opacity:.7}.chord-label{min-height:0;margin:0;font-size:15px}.variant,.key-hint,.chord-notes{display:none}.playback-actions{display:flex;flex-wrap:wrap;gap:10px}.playback-actions button{padding:10px 12px;min-height:42px;font-size:12px}.drawer .mode-pill{position:static;width:fit-content;margin-top:16px}.drawer .hand-readouts{position:static;display:block;width:100%;pointer-events:auto}.drawer .hand-readouts small{display:none}.drawer .hand-readouts strong{font-size:12px}.drawer .hand-readouts p{display:block;font-size:11px}.drawer #concepts-button{margin-top:20px;padding:12px 0;background:none}.drawer #concepts-button svg{width:14px;height:14px;display:inline-block}@media(width<=760px){header{padding:16px}.wordmark{font-size:11px}.invitation{inset:auto 16px 110px;flex-wrap:wrap;gap:12px}.invitation .primary,.invitation .text-button{font-size:12px}.chord-dock{bottom:20px;width:calc(100% - 32px);gap:5px}.chord{flex-direction:column;justify-content:center;gap:8px;padding:10px 4px;min-height:68px}.chord-label{font-size:12px;white-space:nowrap}.gesture{font-size:14px}}@media(height<=500px)and (orientation:landscape){.invitation{inset:auto auto 100px 20px}.chord-dock{bottom:16px}.chord{min-height:54px}}.all-chords fieldset{margin:0 0 16px;padding:12px;border:1px solid var(--line);border-radius:6px;min-width:0}.all-chords legend{padding:0 6px;font-size:12px;color:#d8cbae}.chord-fields{display:grid;grid-template-columns:65px minmax(0,1fr) 65px;gap:8px}.all-chords .chord-fields label{margin:0}.all-chords .chord-fields select{margin-top:8px;padding:8px 5px}.all-chords details{margin-top:12px;font-size:11px;color:var(--muted)}.all-chords summary{cursor:pointer}.chord-dock{display:none!important}#performance-light{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}#performance-hud{position:absolute;z-index:4;left:50%;bottom:42px;transform:translate(-50%);width:calc(100% - 140px);text-align:center;pointer-events:none}.performance-kicker{font:500 9px/1.5 system-ui,sans-serif;letter-spacing:.28em;color:#93a2a2}#performance-hud h1{margin:10px 0 16px;font:300 clamp(18px,2.1vw,27px)/1.3 system-ui,sans-serif;letter-spacing:-.025em;color:#e3e4dd}.performance-progress{display:flex;justify-content:center;gap:7px}.performance-progress i{width:21px;height:2px;border-radius:2px;background:#71808033;transition:background 1s,width 1s}.performance-progress i:first-child{background:#d8d3bb;width:34px}body:is([data-performance=choosing],[data-performance=focusing],[data-performance=playing]) .performance-progress i:first-child{width:21px;background:#71808066}body:is([data-performance=choosing],[data-performance=focusing],[data-performance=playing]) .performance-progress i:nth-child(2){width:34px;background:#d8d3bb}#performance-actions{position:absolute;z-index:5;bottom:36px;right:28px;display:flex;align-items:center;gap:12px}#performance-actions button{color:#d9ddce;background:#17222599;border:1px solid #b3c6be26;backdrop-filter:blur(12px);font:400 11px system-ui,sans-serif;padding:12px 17px;border-radius:30px;transition:background .2s}#performance-actions button:hover{background:#354340bb}#performance-actions #restart-performance{width:42px;height:42px;padding:0;font-size:21px}#gather-moons span{margin-left:10px;opacity:.5}.moon-pick{position:absolute;z-index:4;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;padding:0;cursor:pointer}.moon-pick span{position:absolute;width:140px;left:50%;top:calc(100% + 37px);transform:translate(-50%);opacity:0;color:#d9ddd6;font:400 10px system-ui,sans-serif;letter-spacing:.06em;transition:opacity .25s}.moon-pick:hover span,.moon-pick:focus-visible span,.moon-pick.hovered span{opacity:1}.moon-pick:focus-visible{outline:1px solid #e1dac4;outline-offset:5px}.invitation{bottom:38px;gap:16px}body:has(.invitation:not([hidden])) #performance-hud{bottom:112px}body[data-performance=playing] .atmosphere{background:radial-gradient(ellipse at center,#03060a10,#02060888);transition:background 2s}@media(width<=760px){#performance-hud{bottom:94px;width:calc(100% - 32px)}#performance-actions{bottom:24px;right:16px}.invitation{bottom:26px;right:70px}.moon-pick span{font-size:8px;width:65px}body:has(.invitation:not([hidden])) #performance-hud{bottom:132px}}@media(prefers-reduced-motion:reduce){.moon-pick span,.performance-progress i{transition:none}}body[data-performance=playing] #performance-hud{bottom:18px}body[data-performance=playing] #performance-hud h1{margin:0;font-size:16px}body[data-performance=playing] .performance-kicker,body[data-performance=playing] .performance-progress{display:none}header{justify-content:flex-end}.wordmark,#performance-hud,.moon-pick span{display:none!important}#performance-actions #gather-moons{width:42px;height:42px;padding:0;font-size:23px}body:is([data-performance=finale],[data-performance=finished]) .camera-active #camera{opacity:1}body:is([data-performance=finale],[data-performance=finished]) .atmosphere{opacity:0;transition:opacity 1.8s}body:is([data-performance=finale],[data-performance=finished]) #notice,body:is([data-performance=finale],[data-performance=finished]) .invitation,body:is([data-performance=finale],[data-performance=finished]) #landmarks{display:none!important}body[data-performance=finished] #instrument{background:#0a1013}body[data-performance=finished] #performance-light{visibility:hidden}#guide-button svg{width:18px;height:18px}body:is([data-performance=finale],[data-performance=finished]) #guide-button{display:none}.guide-dialog{border-radius:12px;width:min(880px,calc(100% - 32px));max-height:90dvh;overflow-y:auto;padding-bottom:24px}.guide-dialog .drawer-heading .eyebrow{letter-spacing:.32em;color:#b9ab8c}.guide-acts{list-style:none;margin:0;padding:24px 24px 4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.guide-acts li{border:1px solid var(--line);border-radius:8px;padding:20px 18px 14px;background:#111c1f99}.guide-act-no{display:grid;place-items:center;width:32px;height:32px;margin-bottom:16px;border:1px solid #d8cbae59;border-radius:50%;color:#e4dac3;font:400 15px/1 Georgia,serif}.guide-acts h3{margin:0 0 12px;font:400 19px/1.3 Georgia,serif;letter-spacing:.06em;color:var(--ink)}.guide-acts p{margin:0 0 9px;font-size:13px;line-height:1.8;color:#c7d0c6}.guide-acts b{font-weight:500;color:#eadfc6}.guide-note{margin:14px 24px 0;padding:13px 15px;border:1px solid var(--line);border-radius:6px;font-size:12px;line-height:1.9;color:#a5b8ae}.guide-note kbd{font:inherit;padding:0 6px;border:1px solid var(--line);border-radius:4px;color:#e4dac3}.guide-steps{margin:4px 0 16px;padding:0;list-style:none}.guide-steps li{display:flex;gap:12px;padding:7px 0;font-size:12px;line-height:1.7;color:#c7d0c6}.guide-steps b{flex:none;width:18px;color:#e4dac3;font:400 13px/1.7 Georgia,serif}@media(width<=760px){.guide-acts{grid-template-columns:1fr;padding:16px 16px 4px;gap:10px}.guide-note{margin:12px 16px 0}}
