@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
html,body{margin:0;background:#080e19;color:#edf4ff}#flight{--mint:#a8f3d0;--red:#ff647b;max-width:860px;margin:0 auto;padding:24px 22px 28px;font:15px 'DM Sans',sans-serif}#flight *{box-sizing:border-box}#flight button,#flight select{font:inherit;color:inherit;background:#142131;border:1px solid #314052;border-radius:10px;min-height:44px;cursor:pointer}#flight button:focus-visible,#flight select:focus-visible{outline:3px solid var(--mint);outline-offset:3px}#flight button:hover{border-color:var(--mint)}.flight-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.eyebrow{font-size:10px;letter-spacing:.17em;color:var(--mint);margin:0 0 7px}#flight h1{font:500 32px 'Space Grotesk',sans-serif;letter-spacing:-1.5px;margin:0}#flight h1 span{font-size:14px;color:#73869e;vertical-align:top;margin-left:10px;letter-spacing:0}#help{font-size:12px!important;padding:0 12px}.flight-heading .bh-setup-sharing{margin:0}#instructions{line-height:1.6;color:#b4c4d8;background:#142131;padding:16px;border-radius:12px}.flight-controls{display:flex;align-items:center;gap:16px;margin:22px 0 18px}.flight-controls label{display:flex;align-items:center;gap:8px;color:#a4b6cd;font-size:12px}#key{padding:0 27px 0 12px}.instrument-choice{display:flex;gap:4px;margin-left:auto}.instrument-choice button{padding:0 14px;font-size:12px!important}.instrument-choice button[aria-pressed=true]{background:#244638!important;border-color:#568e75!important;color:#baffdb!important}.motion-choice input{accent-color:#a8f3d0;width:17px;height:17px}.flight-stats{display:grid;grid-template-columns:repeat(4,1fr);padding:14px 0;border-top:1px solid #223044;border-bottom:1px solid #223044}.flight-stats div{display:flex;flex-direction:column;gap:4px;text-align:center;border-right:1px solid #223044}.flight-stats div:last-child{border:0}.flight-stats span{font:500 23px 'Space Grotesk',sans-serif}.flight-stats small{font-size:9px;color:#869ab4;letter-spacing:.12em}#scene{position:relative;height:390px;overflow:hidden;background:radial-gradient(ellipse at 50% 25%,#183344 0%,#0a1526 40%,#080e19 78%);margin-top:16px;border:1px solid #23334a;border-radius:18px}.starfield{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(1px 1px at 12% 18%,#e4edff 99%,transparent),radial-gradient(1px 1px at 78% 32%,#e4edff 99%,transparent),radial-gradient(1px 1px at 43% 12%,#e4edff 99%,transparent),radial-gradient(1px 1px at 90% 65%,#e4edff 99%,transparent);background-size:180px 137px}.horizon{position:absolute;left:-30%;right:-30%;height:400px;top:150px;transform:perspective(180px) rotateX(54deg);transform-origin:center top;background:repeating-linear-gradient(90deg,transparent 0 69px,#28465755 70px 71px),repeating-linear-gradient(0deg,transparent 0 49px,#28465755 50px 51px);mask-image:linear-gradient(transparent,#000)}.scene-title{position:absolute;z-index:3;top:18px;left:20px;display:flex;flex-direction:column;gap:5px}.scene-title span:first-child{font:500 27px 'Space Grotesk',sans-serif}.scene-title span:last-child{font-size:9px;letter-spacing:.13em;color:#9bb4c9}#runway{position:absolute;inset:0;perspective:650px;pointer-events:none}#voicing{width:min(88%,480px);position:absolute;left:50%;top:85px;transform-origin:50% 100%;will-change:transform;filter:drop-shadow(0 12px 20px #0008)}#voicing svg{display:block;width:100%;overflow:visible}.arrival-line{position:absolute;bottom:32px;left:8%;right:8%;height:1px;background:#b6f8db55;text-align:right}.arrival-line span{position:relative;top:7px;font-size:8px;letter-spacing:.2em;color:#638776}#overlay{position:absolute;inset:0;background:#081020b8;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;z-index:4}#overlay[hidden]{display:none}#overlay strong{font:500 29px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.8px}#overlay p{color:#a9bfd0;font-size:13px}.time-track{position:absolute;bottom:0;left:0;right:0;height:4px;background:#243346}#time-left{height:100%;width:100%;background:var(--mint)}.flight-feedback{min-height:65px;display:flex;flex-direction:column;justify-content:center;gap:5px}#feedback{margin:0;font-weight:600;font-size:15px}#round-label{font-size:11px;color:#96aac0}.answers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.answers button{min-height:76px!important;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px}.answers strong{font:500 28px 'Space Grotesk',sans-serif}.answers span{font-size:10px;color:#a8bbd2}.answers button:disabled{cursor:default;opacity:.55}.answers button.correct{background:#285d46!important;border-color:var(--mint)!important;opacity:1}.answers button.wrong{background:#5b2432!important;border-color:var(--red)!important;opacity:1}.flight-actions{display:flex;gap:10px;margin-top:15px}.flight-actions button{padding:0 24px}#start{flex:1;background:var(--mint)!important;color:#102a20!important;font-weight:700!important;border:0!important}.flight-footnote{font-size:11px;color:#8195ae;text-align:center;line-height:1.5;margin-bottom:0}@media(min-width:1000px){#flight{padding-top:28px}#scene{height:410px}#voicing{top:95px}}@media(max-width:480px){#flight{padding:16px 14px 22px}.flight-heading{gap:8px;flex-wrap:wrap}#flight h1{font-size:28px}.flight-controls{gap:8px;margin:16px 0 12px}.flight-controls label{gap:5px}.instrument-choice{gap:3px}.instrument-choice button{padding:0 9px}.motion-choice{font-size:11px!important}#key{padding:0 14px 0 8px}#scene{height:315px;margin-top:12px}#voicing{top:87px;width:90%}.scene-title{top:13px;left:14px}.answers{gap:7px}.answers button{min-height:68px!important}.answers span{font-size:9px}.flight-stats{padding:10px 0}.flight-stats span{font-size:21px}.flight-feedback{min-height:61px}#overlay strong{font-size:26px}}

.flight-controls{flex-wrap:wrap}#strings{padding:0 8px} @media(max-width:480px){.flight-controls{justify-content:space-between;gap:8px}.instrument-choice{margin-left:0}.flight-controls>label:nth-child(2){margin-left:auto}.flight-controls>.instrument-choice{flex-basis:72%}.instrument-choice button{min-width:75px}}

/* Keep the complete exercise and answer pads reachable on a phone. */
.flight-heading{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}.bh-tool-shell ~ #flight .instrument-choice{display:none}.flight-heading .bh-setup-sharing button{padding:0 10px!important;min-height:44px!important;font-size:12px!important} @media(max-width:480px){#flight h1{font-size:25px;letter-spacing:-1px}.eyebrow{font-size:8px}.flight-controls>label:nth-child(2){margin-left:0}.flight-controls{margin:12px 0;flex-wrap:nowrap}#scene{height:clamp(210px,30svh,270px)}#voicing{top:59px}.flight-stats span{font-size:19px}.flight-stats small{font-size:8px}.flight-feedback{min-height:55px}.flight-footnote{font-size:10px}.flight-actions{margin-top:10px}.flight-heading .bh-setup-sharing button{font-size:11px!important}#help{padding:0 10px;font-size:11px!important}}

/* The instrument is the world: a continuous neck converging on the horizon. */
#runway{perspective:none}#voicing{inset:0;width:100%;height:100%;transform:none!important;filter:none;will-change:auto}#voicing svg{width:100%;height:100%;overflow:hidden}.horizon{display:none}.arrival-line{bottom:19px;opacity:.55}.scene-title{pointer-events:none}.starfield{opacity:.65} @media(max-width:480px){#scene{height:clamp(250px,34svh,310px)}#voicing{top:0;width:100%}.scene-title span:first-child{font-size:23px}.scene-title span:last-child{font-size:8px}}

.arrival-line{bottom:8%;background:none}.arrival-line span{color:#c7dbce;font-size:7px;top:0;text-shadow:0 1px 3px #000}.scene-title span:last-child{color:#a7bacb}

#scene-result{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:5;white-space:nowrap;padding:12px 20px;border:1px solid #ff647b99;border-radius:12px;background:#201522ee;color:#fff;font:600 20px 'Space Grotesk',sans-serif;box-shadow:0 8px 32px #0008;pointer-events:none}#scene-result:empty{display:none}.flight-note{transition:opacity .25s}.flight-vanish .active-voicing .flight-note{opacity:0}.flight-impact{animation:flight-quake .42s ease-out;box-shadow:inset 0 0 55px #ff456033!important;border-color:#ff647b!important}.flight-impact.flight-still{animation:flight-flash .4s ease-out}@keyframes flight-quake{0%,100%{transform:translate(0,0)}12%{transform:translate(-7px,3px) rotate(-.4deg)}28%{transform:translate(7px,-4px) rotate(.4deg)}44%{transform:translate(-5px,2px)}60%{transform:translate(4px,-2px)}78%{transform:translate(-2px,1px)}}@keyframes flight-flash{0%,100%{box-shadow:inset 0 0 20px #ff456022}50%{box-shadow:inset 0 0 80px #ff456055}}@media(prefers-reduced-motion:reduce){.flight-impact{animation:flight-flash .4s ease-out}.flight-note{transition:none}}

/* A taller playing surface, with both questions visible on the same neck. */
#scene{height:clamp(420px,55svh,620px)}
.queued-voicing{opacity:.68}.active-voicing{opacity:1}
@media(max-width:640px){
 #flight{padding-top:10px;padding-bottom:12px}
 .flight-controls{margin:8px 0}
 .flight-stats{padding:7px 0}
 #scene{height:clamp(300px,calc(100svh - 405px),560px);margin-top:10px}
 .flight-feedback{min-height:48px}
 .answers button{min-height:64px!important}
 .flight-actions{margin-top:8px}
 .flight-footnote{display:none}
}
@media(max-height:500px) and (orientation:landscape){#scene{height:330px}}

#sound-cue{position:absolute;z-index:6;right:12px;top:14px;padding:7px 10px;border:1px solid #a8f3d0;border-radius:8px;background:#0a1b20ee;color:#d9ffec;font-size:12px;font-weight:600;pointer-events:none}
#sound-cue:empty{display:none}
#scene[data-playing="current"] .active-voicing,#scene[data-playing="next"] .queued-voicing{opacity:1;filter:drop-shadow(0 0 5px #e5fff5)}
#scene[data-playing="current"] .active-voicing .flight-note{opacity:1}
#scene[data-playing="current"] .quiz-key.current-note{stroke:#fff;stroke-width:1.8}
#scene[data-instrument="piano"] .arrival-line{bottom:22%;left:0;right:0}
#scene[data-instrument="piano"] .arrival-line span{padding-right:8px}
@media(max-width:640px){#sound-cue{top:12px;right:9px;font-size:10px;padding:6px 8px}}

/* Compact arcade scoreboard and three-character score entry. */
.flight-stats{grid-template-columns:repeat(5,minmax(0,1fr))}.flight-stats #high-scores{font-size:9px;min-height:22px;padding:2px 4px;margin:auto;border:0;background:transparent;color:var(--mint)}
#scores-dialog{color:#edf4ff;background:#101c2a;border:1px solid #456477;border-radius:16px;width:min(420px,calc(100vw - 28px));max-height:85svh;padding:20px}#scores-dialog::backdrop{background:#030914b8}#scores-dialog header{display:flex;align-items:center;justify-content:space-between}#scores-dialog h2{margin:0;font:500 25px 'Space Grotesk',sans-serif}#scores-close{min-width:44px}#scores-scope,.score-note{font-size:12px;color:#a9bfd0}#score-entry{display:flex;gap:12px;align-items:end}#score-entry[hidden]{display:none}#score-entry label{font-size:10px;letter-spacing:.15em}#score-name{display:block;width:100px;margin-top:7px;background:#06101b;color:#a8f3d0;border:1px solid #678477;border-radius:7px;padding:8px;font:700 26px monospace;letter-spacing:.2em}#score-entry button{padding:0 12px}#score-list{padding-left:28px}#score-list li{padding:9px 0;font:18px monospace}#score-list li span{float:right;color:var(--mint)}#score-status{font-size:12px;color:var(--mint)}

#score-list li small{display:block;font:10px 'DM Sans',sans-serif;color:#9bb4c9;margin-top:4px}

#flight .flight-actions #high-scores{padding:0 10px;font-size:12px;min-width:58px}

/* Catalog controls wrap without pushing phone content wider. */
#flight .flight-controls{flex-wrap:wrap;gap:8px 12px}#flight .flight-controls select{max-width:170px;padding:0 8px}#flight .flight-controls label{min-width:0}#flight .answers{grid-template-columns:repeat(4,minmax(0,1fr))}#flight .answers button[hidden]{display:none}#flight .answers span{text-wrap:balance} @media(max-width:480px){#flight .flight-controls{display:grid;grid-template-columns:1fr 1fr}#flight .flight-controls label{flex-direction:column;align-items:stretch;gap:3px}#flight .flight-controls select{width:100%;max-width:none}#flight .flight-controls .motion-choice{flex-direction:row;align-items:center}#flight .flight-controls .instrument-choice{grid-column:1/-1}#flight .flight-controls>label:nth-child(2){margin:0}}

@media(max-width:640px){#flight #scene{height:clamp(200px,calc(100svh - 540px),460px)}}

/* Keep the answer pads above the fold on desktop, including shorter laptops. */
@media(min-width:641px){
 #flight{padding-top:12px;padding-bottom:16px}
 #flight .eyebrow{display:none}
 #flight .flight-controls{margin:12px 0}
 #flight .flight-stats{padding:8px 0}
 #flight #scene{height:clamp(180px,calc(100svh - 480px),620px);margin-top:10px}
 #flight .flight-feedback{min-height:48px}
}

/* Let the neck flare beyond its centered SVG; the scene clips its outer edge. */
#scene[data-instrument="guitar"] #voicing svg{overflow:visible}