:root{--ink:#263c3b;--muted:#657572;--paper:#f9f6ed;--line:#e4e4d6;--teal:#276d67;--orange:#d97342;--cream:#f0e9d6;--radius:20px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-rounded,"Avenir Next",Avenir,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #d97342;outline-offset:4px}button:disabled{opacity:.55;cursor:default}button[hidden],div[hidden]{display:none!important}a{color:inherit}button{border:0}h1,h2,h3,p{margin:0}.topbar{height:96px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(5%,calc((100vw - 1320px)/2))}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:31px;font-weight:850;line-height:.94;letter-spacing:-1.4px}.brand-icon{font-size:42px;transform:rotate(-12deg);color:var(--orange)}.brand-sub{display:block;font-size:8px;letter-spacing:2.4px;margin-top:7px}.top-right{display:flex;align-items:center;gap:18px}.prototype{font-size:9px;letter-spacing:2px;color:#7b8175;border:1px solid #dcded1;border-radius:20px;padding:8px 11px}.icon-button{width:33px;height:33px;border-radius:50%;background:transparent;border:1px solid #dddeda;color:#63726b;font-size:16px}main{max-width:1320px;margin:auto;padding:37px 32px 0}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow,.section-label{font-size:10px;font-weight:800;letter-spacing:1.8px;color:#778078}.eyebrow{color:#a96a3e;margin-bottom:13px}h1{font-family:Georgia,"Times New Roman",serif;font-size:42px;letter-spacing:-1.5px;font-weight:500;line-height:1.13}.heading p{color:#7c8276;font-size:13px;margin-top:11px}.mobile-break{display:none}.journey-badge{display:flex;align-items:center;gap:14px;margin-top:19px}.journey-badge>span{font:italic 40px Georgia;color:#b1bb9f}.journey-badge>div{font-size:9px;letter-spacing:1.5px;font-weight:750}.journey-badge small{display:block;font-size:11px;font-weight:400;letter-spacing:0;margin-top:7px;color:#8a8c7d}.app-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:27px}.adventure{min-width:0;border-radius:var(--radius);overflow:hidden;background:#fffefa;border:1px solid var(--line)}.scene-head{height:47px;display:flex;justify-content:space-between;align-items:center;background:#ebf3ed;padding:0 22px}.location{font-size:9px;letter-spacing:1.8px;font-weight:750;color:#5d7c70;display:flex;align-items:center;gap:8px}.live-dot{width:6px;height:6px;background:#7ca88d;border-radius:50%}.stars{display:flex;gap:8px;align-items:center;font-size:12px;color:#657c64;font-weight:700}.stars>span:first-child{color:#d78b41;font-size:18px}.score-sep,#totalNotes{color:#a0ad99}.scene{position:relative;height:345px;overflow:hidden;background:#d7e9df}#world{width:100%;height:100%;display:block}.scene-message{position:absolute;left:0;right:0;top:37px;text-align:center;pointer-events:none}.scene-message button{pointer-events:auto}.scene-message h2{font:500 38px Georgia;letter-spacing:-1px;margin:8px 0 9px;color:#295b50}.scene-kicker{font-size:8px;letter-spacing:2.1px;color:#70917d;font-weight:800}.scene-message p{font-size:12px;color:#64816e}.primary{padding:13px 21px;border-radius:30px;background:var(--orange);color:#fff9ed;font-size:12px;box-shadow:0 5px 0 #bc613b;letter-spacing:.1px;font-weight:650;min-height:44px}.primary span{margin-left:16px}.scene-message .primary{margin-top:21px}.scene-toast{position:absolute;top:22px;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:30px;background:#fffcE8ed;color:#597459;box-shadow:0 3px 14px #53784e0d;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .25s}.scene-toast.show{opacity:1}.scene-bottom{position:absolute;bottom:15px;left:21px;right:20px;display:flex;justify-content:space-between;align-items:center}.scene-bottom>span{font-size:8px;letter-spacing:1.5px;color:#496847;background:#fff9e2aa;padding:6px 9px;border-radius:7px;font-weight:800}.scene-pause{font-size:11px;padding:7px 11px;border-radius:20px;background:#fff9e2dd;color:#375943}.path-progress{display:flex;align-items:center;gap:13px;padding:14px 23px;background:#fffdf5;font-size:10px;color:#969784;border-bottom:1px solid var(--line)}.progress-track{height:5px;border-radius:5px;background:#eceede;flex:1;overflow:hidden}.progress-track>div{height:100%;width:0;background:#7caa8c;transition:width .4s}.scoreboard{padding:22px 23px 18px}.score-topline{display:flex;align-items:center;justify-content:space-between}.score-topline>div{display:flex;align-items:center;gap:17px}.score-topline .section-label{font-size:8px}.score-topline strong{font-size:25px;font-weight:700}.score-topline strong small{font-size:11px;font-weight:400;color:#929780;margin-left:7px}.hold-instruction{font-size:10px;background:#f3f4ea;padding:6px 9px;border-radius:6px;color:#8d947d}.music-area{display:flex;align-items:center;margin-top:7px}.music-area svg{width:calc(100% - 105px);height:108px}.valve-guide{border-left:1px solid #e8e9df;min-width:105px;text-align:center}.valve-guide>span{font-size:7px;letter-spacing:1.5px;color:#97a08a;display:block}.valve-guide>div{display:flex;gap:6px;justify-content:center;margin:10px 0 5px}.valve-guide i{font-style:normal;width:20px;height:20px;border-radius:50%;border:1.5px solid #bec8b1;color:#9da890;font-size:10px;display:grid;place-items:center}.valve-guide i.down{background:var(--teal);color:white;border-color:var(--teal)}.valve-guide small{font-size:10px;color:#8d967f}.beat-line{display:flex;justify-content:space-between;align-items:center;gap:15px}.beat-line>span{font-size:10px;color:#8f9880}.beat-track{width:100px;flex-shrink:0;height:4px;border-radius:5px;background:#ebeee2;overflow:hidden}.beat-track>div{height:100%;width:0;background:var(--orange)}.practice-panel{padding:17px 23px 20px;border-top:1px solid var(--line);background:#f9faf4}.practice-title{display:flex;align-items:center;gap:12px}.practice-title strong{font-size:11px}.practice-title span{font-size:10px;color:#929b86}.note-keys{display:flex;gap:9px;margin-top:13px}.note-key{flex:1;display:flex;align-items:center;justify-content:space-between;background:#fffefa;border:1px solid #dfe5d6;box-shadow:0 3px 0 #e0e4d6;border-radius:10px;height:48px;padding:0 12px;color:#66785d;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}.note-key.active{background:#deeddd;transform:translateY(2px);box-shadow:0 1px 0 #c7d9c4}.note-key>span{font-size:19px;font-weight:650}.note-key small{font-size:8px;color:#9caa8f}.note-key:disabled{opacity:.6}.panel{border:1px solid var(--line);border-radius:16px;background:#fffefa;padding:22px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:6px}.panel-heading .section-label{font-size:8px;letter-spacing:1.3px}.count-pill{font-size:9px;background:#f1f3e7;border-radius:15px;padding:5px 7px;color:#9a9e87}.song-list{display:flex;flex-direction:column;gap:10px;margin:17px 0}.song-card{border:1px solid #e4e6d9;background:#fffefa;text-align:left;border-radius:11px;padding:12px;display:flex;gap:11px;align-items:center;min-height:66px;color:var(--ink)}.song-card.selected{border:1.5px solid #77a48a;background:#eef5e9;padding:11.5px}.song-symbol{width:31px;height:35px;background:#f2eddb;border-radius:8px;display:grid;place-items:center;color:#aa935f;font:24px Georgia}.song-card.selected .song-symbol{background:#dceacf;color:#66916b}.song-info{flex:1}.song-info strong{display:block;font-size:12px;letter-spacing:.1px}.song-info small{display:block;font-size:9px;color:#949c85;margin-top:6px;letter-spacing:1px}.song-check{color:#729a7c;font-size:15px}.listen-button{border:1px solid #e0e5d8;width:100%;height:42px;border-radius:9px;background:#fafbf5;color:#61775a;font-size:11px;font-weight:600;display:flex;gap:9px;align-items:center;padding:0 12px}.listen-button>span:first-child{font-size:20px}.listen-meta{font-size:6px;letter-spacing:.9px;margin-left:auto;color:#a5aa94}.tempo-row{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.tempo-row label{font-size:9px;color:#939c84}.tempo-row select{font-size:10px;border:0;background:transparent;color:#6e805e;max-width:85px;padding:5px}.input-panel{margin-top:17px}.input-panel .section-label{font-size:8px;letter-spacing:1.3px}.input-panel h3{font:23px Georgia;letter-spacing:-.6px;margin:11px 0 10px}.input-panel p{font-size:11px;line-height:1.7;color:#929882}.secondary{border:1px solid #aabfa9;background:#edf4e8;border-radius:9px;color:#547750;font-size:11px;padding:12px 9px;width:100%;margin-top:16px;min-height:44px}.privacy-note{font-size:8px;color:#a1a793;text-align:center;margin-top:12px;display:flex;gap:6px;justify-content:center}.tip{display:flex;gap:13px;padding:22px 11px}.tip-star{color:#c99755;font-size:23px}.tip strong{font-size:11px;color:#7c8969}.tip p{font-size:10px;color:#a0a48d;line-height:1.7;margin-top:6px}.prototype-note{text-align:center;font-size:9px;line-height:1.7;color:#a1a58e}.text-button{display:block;margin:8px auto 0;padding:5px 0;background:transparent;color:#64815e;font-size:10px;text-decoration:underline;text-underline-offset:3px}footer{max-width:1320px;margin:29px auto 0;padding:0 32px 25px;display:flex;justify-content:space-between;font-size:9px;color:#a8ad96}footer>span:last-child{font-size:7px;letter-spacing:1.4px}.mic-live{padding:15px 0 2px}.mic-live>div:first-child{font-size:12px;display:flex;align-items:center;gap:8px}.mic-dot{width:7px;height:7px;background:#6e9e70;border-radius:50%}.mic-live small{display:block;font-size:9px;color:#89957d;margin-top:8px}.volume-track{height:5px;background:#e0e5d6;border-radius:4px;margin-top:12px;overflow:hidden}.volume-track span{height:100%;width:0;display:block;background:#6e9e70}dialog{border:1px solid #e4e3d4;border-radius:23px;padding:33px;max-width:480px;width:calc(100% - 32px);background:var(--paper);color:var(--ink);box-shadow:0 20px 80px #18352f33}dialog::backdrop{background:#173c3355;backdrop-filter:blur(4px)}.modal-close{position:absolute;right:15px;top:12px;font-size:25px;color:#8c9983;background:transparent;width:35px;height:35px}dialog h2{font:30px Georgia;letter-spacing:-.5px;margin:11px 20px 13px 0}dialog p,dialog li{font-size:13px;line-height:1.7;color:#7e8b75}dialog ul{padding-left:20px}dialog .primary{display:block;margin-top:23px;width:100%}dialog .secondary{margin-top:10px}dialog .section-label{font-size:9px}dialog a{color:#496e4c}.calibration-status{padding:20px;background:#eaf0e1;border-radius:11px;margin:17px 0;color:#637b55;font-size:13px;line-height:1.7}.stars-big{color:#d39a50;font-size:39px;letter-spacing:9px;margin:16px 0}.finish-metrics{display:flex;gap:25px;margin-top:18px;font-size:13px}.finish-metrics strong{font-size:23px;display:block}.finish-metrics small{font-size:10px;color:#94a084}@media(min-width:1400px){.scene{height:385px}}@media(max-width:1050px){main{padding:28px 25px 0}.app-grid{grid-template-columns:minmax(0,1fr) 250px;gap:18px}.panel{padding:18px}.scene{height:310px}.scoreboard{padding:18px}.practice-panel{padding:16px 18px}.score-topline>div{gap:9px}.score-topline strong small{display:none}.note-key{padding:0 8px}.journey-badge{display:none}h1{font-size:39px}.music-area svg{width:calc(100% - 90px)}.valve-guide{min-width:90px}.scene-message h2{font-size:34px}}@media(max-width:780px){.topbar{height:78px;padding:0 20px}.brand{font-size:27px}.brand-sub{font-size:7px}.top-right{gap:10px}.prototype{display:none}main{padding:25px 17px 0}.heading{margin-bottom:22px}.eyebrow{font-size:8px;letter-spacing:1.4px}h1{font-size:35px}.heading p{font-size:12px}.app-grid{grid-template-columns:1fr;gap:19px}.scene{height:310px}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:14px}.input-panel{margin:0}.tip{padding:8px;align-self:center}.prototype-note{align-self:center}.score-topline strong small{display:inline}.scoreboard{padding:20px}.practice-panel{padding:17px 20px}footer{padding:0 20px 22px;gap:15px;font-size:8px}.practice-title{align-items:flex-start;gap:8px}.practice-title span{line-height:1.5}.note-key{height:52px}.scene-head{padding:0 20px}}@media(max-width:480px){.sidebar{grid-template-columns:1fr}.input-panel{display:none}.tip,.prototype-note{padding:0 15px}.input-panel.mobile-mic{display:block}.heading h1{font-size:33px}.scene{height:290px}.scene-message h2{font-size:31px}.scene-message{top:30px}.scene-kicker{font-size:7px}.score-topline .section-label{font-size:7px;letter-spacing:.8px}.score-topline strong{font-size:24px}.score-topline strong small{display:none}.hold-instruction{font-size:9px}.scoreboard{padding:17px 15px}.practice-panel{padding:17px 15px}.note-keys{gap:6px}.note-key{padding:0 8px}.note-key small{font-size:7px}.music-area svg{width:calc(100% - 75px)}.valve-guide{min-width:75px}.valve-guide>div{gap:4px}.valve-guide i{width:18px;height:18px}.scene-bottom>span{font-size:6px}.scene-toast{font-size:10px;max-width:95%;white-space:normal;text-align:center}.path-progress{padding:12px 15px}.beat-line>span{font-size:9px}.beat-track{width:70px}footer>span:last-child{display:none}.panel{padding:20px}.input-panel{display:block}.tip{margin-top:4px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Keep the note and instrument controls on screen during a tablet adventure. */
body.playing .heading{display:none}body.playing .topbar{height:64px}body.playing main{padding-top:16px}body.playing .scene{height:260px}body.playing .scoreboard{padding-top:15px;padding-bottom:13px}body.playing .music-area svg{height:94px}body.playing .practice-panel{padding-top:13px;padding-bottom:15px}body.playing footer{margin-top:18px}@media(max-width:780px){body.playing .scene{height:250px}body.playing .sidebar{margin-top:0}body.playing main{padding-top:12px}}@media(max-height:720px) and (min-width:781px){body.playing .scene{height:215px}body.playing .music-area svg{height:85px}}

#sceneMessage .secondary{margin:8px} .song-list{max-height:390px;overflow:auto} footer a{color:inherit} :focus-visible{outline:3px solid #a26d20;outline-offset:4px}

body{background:#e6ebef;color:#25364b} .topbar{background:#25364b;color:#f5dfad}.brand,.brand-sub{color:#f5dfad}.heading h1{font-family:Georgia,serif;font-weight:500;font-size:clamp(35px,4.8vw,64px)}.primary{background:#334f77;color:white}.scene-head{background:#25364b;color:#f5dfad}.scene{background:#354762}.scene-message{background:#edf0f2f2}.panel{background:#f5f7f8}.note-key{color:#25364b;border-color:#8fa1b5}.note-key.active{background:#334f77;color:white}.song-card.selected{background:#dce5ed;border-color:#567496}.valve-guide{min-width:155px}.valve-guide i{width:22px;height:22px;font-size:10px}.valve-guide i.down{background:#334f77}.valve-guide #keys{display:flex;flex-wrap:wrap;justify-content:center;gap:3px}.input-panel select{display:block;width:100%;padding:10px;margin:10px 0;background:white;border:1px solid #8fa1b5;border-radius:8px}a{color:inherit}.prototype-note{color:#475b71}@media(max-width:480px){.music-area{flex-direction:column}.valve-guide{width:100%}.heading h1{font-size:36px}}

.heading h1{max-width:700px;font-size:clamp(32px,4vw,48px)}.scene-head .location,.scene-head .stars{color:#e9d3a6}.scene-message h2{color:#25364b}.scene-message p,.scene-kicker{color:#425573}.topbar .icon-button{color:#f5dfad}.brand{font-size:27px}@media(max-width:480px){.music-area svg{width:100%}.brand{font-size:24px}}

.import-dialog{width:min(760px,94vw);max-height:90vh;overflow:auto;padding:26px}.import-dialog label{display:block;margin:12px 0 6px;font-weight:600}.import-dialog input,.import-dialog select,.import-dialog textarea{width:100%;padding:10px;border:1px solid #8b9e98;border-radius:6px;background:white;color:#243b3a;font:inherit}.import-dialog textarea{font-family:monospace}.import-dialog p{line-height:1.6;font-size:13px;color:#3e5753;margin:12px 0}.import-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}#musicDrop{border:2px dashed #6f9587;padding:15px;margin-top:18px}#musicDrop.over{background:#e0efe5}#importStatus{padding:12px;background:#edf2e9}#uploadMusic{width:100%;margin:10px 0 15px}.note-keys{flex-wrap:wrap}.note-key{min-width:52px;flex:1}body:has(#musicImport[open]){overflow:hidden}@media(max-width:480px){.import-options{grid-template-columns:1fr}.import-dialog{padding:18px}}