:root{--house:#0d1226;--riser:#161d3a;--rail:#34407a;--light:#fff6e5;--haze:#aab2da;--gel:#ffb13d;--gel-ground:#33250c;--gel-ink:#ffd99a;--display:"DIN Condensed", "Bahnschrift Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;--text:"Avenir Next", "Segoe UI", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--text);font-size:100%;line-height:1.5}*{box-sizing:border-box}body{background:var(--house);color:var(--light);margin:0}h1,h2,h3,p{margin:0}a{color:var(--gel);text-underline-offset:.15em}button,select,input{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--light);outline-offset:3px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.page{grid-template-rows:auto 1fr auto;min-height:100vh;display:grid;overflow-x:clip}.masthead,main,.rig{width:100%;max-width:76rem;margin:0 auto;padding-inline:clamp(1rem,4vw,3rem)}.masthead{justify-content:space-between;align-items:center;padding-block:clamp(.75rem,2.5vh,1.25rem);display:flex}.masthead h1{font-family:var(--display);letter-spacing:.02em;font-size:1.75rem;font-weight:700;line-height:1}main{flex-direction:column;gap:1.5rem;padding-block:clamp(.75rem,3vh,3rem);display:flex}button{cursor:pointer}button:disabled{cursor:progress;opacity:.55}.big{border:2px solid var(--gel);background:var(--riser);width:100%;min-height:5rem;font-family:var(--display);text-align:left;border-radius:14px;padding:.75rem 1.5rem;font-size:clamp(1.75rem,3.5vw,2.25rem);font-weight:700;line-height:1.1}.big:hover:not(:disabled){background:color-mix(in srgb, var(--gel) 18%, var(--riser))}.quiet{border:1px solid var(--rail);background:0 0;border-radius:999px;min-height:2.75rem;padding:.4rem 1.1rem}.quiet:hover{border-color:var(--haze)}.quiet[aria-pressed=true]{border-color:var(--gel);color:var(--gel-ink)}.ways{gap:1.5rem;max-width:52rem;display:grid}.ways h2{font-family:var(--display);font-size:clamp(2.75rem,7vw,5rem);font-weight:700;line-height:.95}.lede{max-width:34em;color:var(--haze);font-size:1.25rem}.doors{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem;display:grid}.door{align-content:start;gap:.5rem;display:grid}.door p{color:var(--haze)}.door.demo{margin-top:1.25rem}.door.demo button{justify-self:start}.notice-slot:empty{display:none}.notice{max-width:40em;font-size:1.125rem}.notice.problem,.warning{border-left:4px solid var(--gel);background:var(--gel-ground);color:var(--gel-ink);border-radius:4px;padding:.9rem 1.1rem}.warning{max-width:48em;font-size:1.125rem}.inline-action{border:1px solid var(--gel);min-height:2.75rem;color:var(--light);background:0 0;border-radius:999px;margin-left:.75rem;padding:.3rem 1rem}.heard{text-align:center;isolation:isolate;flex:1;align-content:center;justify-items:center;gap:.6rem;display:grid;position:relative}.heard:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(45% 50% at 50% 52%,#ffb13d2b,#0000 70%);position:absolute;inset:-10% -20%}.source{color:var(--haze);flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem 1.25rem;font-size:1.125rem;display:flex}.song-state{font-variant-numeric:tabular-nums;align-items:baseline;gap:.5rem;display:flex}.song-state.known,.song-state.tapping{color:var(--gel-ink)}.song-state.known .lamp{border-color:var(--gel);background:var(--gel);box-shadow:0 0 .6rem var(--gel)}.song-state.tapping span:focus{outline:none}.key{font-family:var(--display);font-variant-numeric:tabular-nums;margin-top:1rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1}.key-label{color:var(--haze)}.chord{font-family:var(--display);letter-spacing:-.01em;text-shadow:0 0 .25em #ffb13d4d;margin-top:.06em;font-size:clamp(7rem,min(32vh,30vw),26rem);font-weight:700;line-height:1}.chord.none{color:var(--haze);text-shadow:none;padding-block:.3em;font-size:clamp(3rem,8vw,5rem)}.song-file{border:0;align-items:center;gap:1rem;width:min(100%,36rem);margin:.5rem 0 0;padding:0;display:flex}.song-file:has(>.quiet){flex-wrap:wrap;justify-content:center;width:min(100%,50rem)}.transport{border:2px solid var(--gel);background:var(--riser);border-radius:10px;min-width:6rem;min-height:3rem;font-weight:600}.song-file input[type=range]{min-height:2.75rem;accent-color:var(--gel);flex:10rem}.time{color:var(--haze);font-variant-numeric:tabular-nums}.rig{border-top:1px solid var(--rail);background:var(--riser);grid-template-columns:1fr 1.25fr 1.25fr;gap:1.5rem 2.5rem;max-width:none;padding-block:1.25rem 1.5rem;padding-inline:max(clamp(1rem,4vw,3rem),50% - 35rem);display:grid}.rig-stack{align-content:start;gap:1.5rem;min-width:0;display:grid}.rig-part{border:0;align-content:start;gap:.6rem;min-width:0;margin:0;padding:0;display:grid}.rig-part h3,.rig-part legend{font-family:var(--display);color:var(--haze);margin-bottom:.6rem;padding:0;font-size:1.35rem;font-weight:700;line-height:1}.keyboard{align-items:baseline;gap:.6rem;font-size:1.125rem;display:flex}.lamp{border:2px solid var(--haze);border-radius:50%;flex:none;width:.7rem;height:.7rem}.keyboard.on .lamp{border-color:var(--gel);background:var(--gel);box-shadow:0 0 .6rem var(--gel)}.trouble{color:var(--gel-ink)}.rocker{border:2px solid var(--rail);border-radius:12px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.rocker-side{cursor:pointer;gap:.15rem;min-height:3.75rem;padding:.5rem .9rem;display:grid}.rocker-side+.rocker-side{border-left:2px solid var(--rail)}.rocker-side input{opacity:0;width:1px;height:1px;position:absolute}.rocker-name{font-family:var(--display);font-size:1.6rem;font-weight:700;line-height:1.1}.rocker-hint{color:var(--haze);font-size:.875rem}.rocker-side:has(input:checked){background:var(--gel);color:var(--house)}.rocker-side:has(input:checked) .rocker-hint{color:var(--house)}.rocker-side:has(input:focus-visible){outline:3px solid var(--light);outline-offset:-5px}.rig-wide{grid-column:1/-1}.choices{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem 2rem;display:grid}.choice{border:0;gap:.4rem;min-width:0;margin:0;padding:0;display:grid}.choice legend{color:var(--haze);margin-bottom:.4rem;font-family:inherit;font-size:1rem;font-weight:400}.rocker.small .rocker-side{justify-items:center;min-height:2.5rem;padding:.4rem .75rem}.rocker.small .rocker-name{font-size:1.1rem}.split{flex-wrap:wrap;align-items:center;gap:.6rem .75rem;display:flex}.split select{border:1px solid var(--rail);background:var(--house);border-radius:8px;min-height:2.75rem;padding:.3rem .6rem;font-size:1.125rem}.early{flex-wrap:wrap;align-items:center;gap:.6rem .75rem;display:flex}.early input[type=range]{min-height:2.75rem;accent-color:var(--gel);flex:10rem}.rig-note{color:var(--haze);font-size:.95rem}.about{border:1px solid var(--rail);background:var(--riser);width:min(42rem,100vw - 2rem);max-height:calc(100vh - 2rem);color:var(--light);border-radius:14px;padding:clamp(1.25rem,4vw,2.25rem)}.about::backdrop{background:#050814c7}.about h2{font-family:var(--display);margin-bottom:1rem;font-size:2.25rem;font-weight:700;line-height:1}.about h3{font-family:var(--display);margin:1.5rem 0 .5rem;font-size:1.5rem;font-weight:700}.about p,.about li{max-width:38em;margin-bottom:.75rem}.about ul{margin:0 0 .75rem;padding-left:1.25rem}.about form{margin-top:1.5rem}.about .big{width:auto;min-height:3.5rem;font-size:1.5rem}.masthead-actions{flex-wrap:wrap;gap:.5rem;display:flex}.songs .songs-list{padding:0;list-style:none}.songs .songs-list li{border-bottom:1px solid var(--rail);grid-template-columns:1fr auto;align-items:center;gap:.15rem 1rem;max-width:none;padding:.6rem 0;display:grid}.songs-name{overflow-wrap:anywhere;font-weight:600}.songs-details{color:var(--haze);grid-column:1;font-size:.95rem}.songs .songs-list button{grid-area:1/2/span 2}.songs-note{color:var(--haze);font-size:.95rem}.songs-sure{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;display:flex}.songs-said{margin-bottom:.75rem;display:block}.songs-said:empty{display:none}@media (prefers-reduced-motion:no-preference){.listening .heard:before{animation:.9s ease-out house-to-stage}}@keyframes house-to-stage{0%{opacity:0}}@media (width<=52rem){.rig{grid-template-columns:1fr}}.in-panel .ways{gap:1rem}.in-panel .ways h2{font-size:2.25rem}.in-panel .lede{font-size:1.05rem}.keyboard-tab{gap:1rem;max-width:34rem;padding:clamp(1rem,4vw,3rem);display:grid}.keyboard-tab h1{font-family:var(--display);font-size:2rem}.keyboard-tab p{font-size:1.25rem}.also{align-items:center;gap:.6rem;min-height:2.75rem;display:flex}.also input{width:1.25rem;height:1.25rem;accent-color:var(--gel)}.plan-left{margin-top:.5rem}.plan-buy{flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:.75rem;display:flex}.plan-buy a.big,.plan-buy a.quiet{text-decoration:none;display:inline-block}.plan-small{color:var(--haze);font-size:.9rem}.plan-key{gap:.4rem;margin-top:1rem;display:grid}.plan-key-row{flex-wrap:wrap;gap:.5rem;display:flex}.plan-key input{border:1px solid var(--rail);background:var(--house);border-radius:.4rem;flex:16rem;min-width:0;padding:.55rem .7rem;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}.plan-said:empty{display:none}.song-state.locked .lamp{background:var(--haze)}.welcome{gap:1.25rem;max-width:44rem;margin:0 auto;padding:3rem clamp(1rem,4vw,3rem);display:grid}.welcome h1{font-family:var(--display);font-size:clamp(2.5rem,6vw,3.5rem);line-height:1.05}.welcome-steps{gap:1rem;padding-left:1.5rem;display:grid}.welcome-steps li::marker{color:var(--gel);font-family:var(--display);font-size:1.5rem}.welcome-steps h2{font-size:1.25rem}.welcome-steps p{color:var(--haze)}a.welcome-try{color:var(--light);text-decoration:none;display:block}.guide{border:1px solid var(--rail);border-left:4px solid var(--gel);background:var(--riser);border-radius:.6rem;justify-items:start;gap:.6rem;margin-top:1.25rem;padding:1rem 1.25rem;display:grid}.guide h3{font-size:1.15rem}.guide ol{gap:.35rem;margin:0;padding-left:1.4rem;display:grid}.guide p{color:var(--haze)}