@import url('/fonts.css');
:root{color-scheme:dark;--bg:#15151c;--panel:#202029;--line:#373740;--text:#f7f7f2;--muted:#ababba;--lime:#d4ff62;--purple:#c1a3ff;--orange:#ffb18b;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--lime);outline-offset:5px}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}.site-header{max-width:1480px;margin:auto;padding:28px 48px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px}.brand-mark{font-weight:900;font-size:52px;line-height:.75;letter-spacing:-7px}.brand-mark span{color:var(--lime)}.brand-name{font-size:13px;font-weight:800;letter-spacing:2.5px;line-height:1.25}.brand-name>span{display:block;font-weight:400;letter-spacing:4px}.brand-logo{width:175px;max-height:64px;object-fit:contain}.header-right{display:flex;align-items:center;gap:32px}.header-caption{color:var(--muted);font-size:12px;letter-spacing:2px}.icon-button{width:44px;height:44px;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:50%;font-size:26px}main{max-width:1384px;margin:auto;padding:48px 48px 42px;min-height:calc(100vh - 208px)}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:12px}.eyebrow:before{content:'';width:22px;height:2px;background:currentColor}h1{font-size:clamp(38px,4.5vw,66px);font-weight:600;letter-spacing:-3px;line-height:1.05;margin:19px 0 16px}h1 em{font-style:normal;color:var(--lime)}.intro{color:var(--muted);font-size:18px;line-height:1.6;margin:0}.home-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:40px;gap:30px}.home-heading .intro{max-width:310px;padding-bottom:7px}.station-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.station-card{position:relative;overflow:hidden;padding:30px;border:1px solid var(--line);border-radius:22px;background:var(--panel);display:flex;flex-direction:column;transition:transform .2s,border-color .2s}.station-card:hover{transform:translateY(-4px);border-color:var(--muted)}.card-top{display:flex;justify-content:space-between;align-items:center}.station-no{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}.pill{font-size:12px;border:1px solid currentColor;border-radius:30px;padding:7px 12px;letter-spacing:.5px}.hearing-card .pill{color:var(--lime)}.piano-card .pill{color:var(--purple)}.card-visual{height:165px;display:flex;align-items:center;justify-content:center;margin:10px 0 5px}.wave{width:100%;height:130px;color:var(--lime)}.mini-piano{display:flex;gap:4px;width:80%;height:117px;position:relative;transform:rotate(-7deg)}.mini-piano i{height:100%;background:#eeeaf5;flex:1;border-radius:3px 3px 9px 9px}.mini-piano i.active{background:var(--purple);box-shadow:0 0 32px #c1a3ff38}.mini-piano b{position:absolute;top:0;width:8%;height:63%;background:#272230;border:3px solid var(--panel);border-radius:0 0 5px 5px}.station-card h2{font-size:clamp(26px,2.7vw,37px);font-weight:600;letter-spacing:-1.3px;margin:12px 0}.station-card p{font-size:16px;line-height:1.6;color:var(--muted);max-width:420px;margin:0 0 27px}.card-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px;margin-top:auto;gap:15px}.card-meta{font-size:13px;color:var(--muted)}.card-action{background:var(--lime);color:#16191a;border-radius:40px;padding:13px 19px;font-weight:700;font-size:14px}.piano-card .card-action{background:var(--purple)}.home-note{display:flex;justify-content:space-between;margin-top:26px;color:var(--muted);font-size:13px}.home-note span:first-child{color:var(--text)}footer{max-width:1384px;margin:auto;border-top:1px solid var(--line);padding:24px 48px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;color:var(--muted)}footer p{margin:0;line-height:1.5}footer strong{color:var(--text)}footer a{color:var(--lime);white-space:nowrap}footer a span{margin-left:10px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:90vw;background:var(--text);color:var(--bg);padding:15px 24px;border-radius:12px;box-shadow:0 10px 40px #0005;z-index:20}.back{color:var(--muted);font-size:14px;display:inline-flex;align-items:center;gap:12px;margin-bottom:28px}.back:hover{color:var(--text)}.station-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}.station-heading h1{font-size:clamp(32px,3vw,44px);margin:10px 0 8px;letter-spacing:-1.6px}.station-heading .intro{font-size:16px}.button{border:0;border-radius:40px;padding:15px 24px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--lime);color:#171b12;font-weight:700}.button.secondary{border:1px solid var(--line);background:transparent;color:var(--text)}.button.purple{background:var(--purple)}.button.danger{background:var(--orange)}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.muted{color:var(--muted)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px}.small{font-size:13px;line-height:1.5}.instruction-list{display:grid;gap:22px;padding:0;list-style:none;counter-reset:step}.instruction-list li{counter-increment:step;display:flex;gap:15px;font-size:15px;line-height:1.6;color:var(--muted)}.instruction-list li:before{content:counter(step,decimal-leading-zero);font-size:12px;color:var(--lime);padding-top:3px}.instruction-list strong{display:block;color:var(--text);font-size:16px}.station-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px}.station-layout h2{font-size:19px;margin:0 0 25px}.hearing-stage{position:relative;text-align:center;padding:35px;overflow:hidden}.frequency{font-size:clamp(55px,7vw,90px);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-4px;margin:8px 0 3px}.frequency small{font-size:24px;letter-spacing:-1px;color:var(--muted);margin-left:6px}.readout-label{text-transform:uppercase;font-size:12px;letter-spacing:2px;color:var(--muted)}.hearing-age{margin-top:20px;font-size:20px}.hearing-age strong{color:var(--lime);font-size:27px}.sweep-track{height:8px;background:#363640;border-radius:10px;margin:28px 0 12px;position:relative}.sweep-progress{width:0;height:100%;border-radius:10px;background:var(--lime)}.range-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.hearing-stage .wave{height:95px;margin-top:10px}.hearing-stage .actions{justify-content:center;margin-top:28px}.volume{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;font-size:13px;color:var(--muted)}input[type=range]{accent-color:var(--lime);width:140px}.notice{background:#ffffff05;border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--muted);font-size:13px;line-height:1.6;margin-top:20px}.status{font-size:13px;color:var(--lime);min-height:21px;margin-bottom:15px}.station-footer-note{font-size:13px;color:var(--muted);line-height:1.6;margin-top:22px}.result{padding:20px;border-radius:14px;margin-top:20px;border:1px solid var(--lime);background:#d4ff620a}.result strong{color:var(--lime)}.piano-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:22px}.device-status{font-size:14px;color:var(--muted);margin-right:auto}.device-status.connected{color:var(--lime)}select{max-width:100%;background:var(--bg);border:1px solid var(--line);padding:10px 12px;border-radius:8px;color:var(--text)}.piano-stage{padding:26px}.song-header{display:flex;align-items:start;justify-content:space-between;gap:20px}.song-header h2{font-size:23px;margin:0 0 7px;letter-spacing:-.5px}.song-header p{margin:0;color:var(--muted);font-size:14px}.song-count{text-align:right;color:var(--purple);font-size:24px;font-variant-numeric:tabular-nums}.song-count small{color:var(--muted);font-size:14px}.song-progress{height:4px;background:var(--line);margin:22px 0;border-radius:8px;overflow:hidden}.song-progress>span{display:block;background:var(--purple);height:100%;transition:width .2s}.piano-guide{display:flex;gap:20px;align-items:center;padding:0 0 24px;min-height:115px}.next-note{background:var(--purple);color:var(--bg);font-size:48px;font-weight:700;line-height:1;border-radius:18px;width:84px;height:84px;display:grid;place-items:center;flex-shrink:0}.guide-title{font-size:21px;margin-bottom:7px}.guide-description{font-size:14px;color:var(--muted);line-height:1.5}.note-road{display:flex;gap:8px;min-height:73px;align-items:center;overflow:hidden;padding:8px 0 18px}.note-chip{background:#34303f;color:#d1c5e9;border-radius:9px;min-width:49px;height:44px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:17px;font-weight:bold}.note-chip small{font-weight:normal;font-size:11px;opacity:.7}.note-chip.current{background:var(--purple);color:var(--bg);height:54px;border:2px solid #f3eaff}.keyboard{display:flex;position:relative;height:184px;gap:5px;isolation:isolate}.key{border:0;border-radius:0 0 9px 9px;display:flex;flex-direction:column;justify-content:end;align-items:center;font-weight:bold;padding-bottom:15px;user-select:none}.key.white{flex:1;min-width:0;background:#f4f2f7;color:#26222d;box-shadow:inset 0 -5px #cdcbd3}.key.black{position:absolute;top:0;height:62%;width:8%;background:#111018;box-shadow:inset 0 -4px #09080d;color:#c3bbc9;z-index:2;border:3px solid var(--panel);padding-bottom:12px;font-size:12px}.key.white.expected{background:var(--purple);box-shadow:inset 0 -5px #8e6bc9,0 0 25px #c1a3ff25}.key.pressed{background:var(--lime)!important;color:var(--bg)!important;transform:translateY(2px)}.key.wrong{background:var(--orange)!important}.key small{font-size:11px;margin-top:6px;font-weight:normal;color:#635b72}.key .finger{font-size:12px;margin-bottom:9px;border:1px solid #746584;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}.keyboard-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);gap:12px;line-height:1.5;margin-top:15px}.piano-sidebar h2{margin-bottom:16px}.piano-sidebar .instruction-list{gap:17px}.piano-sidebar .instruction-list li:before{color:var(--purple)}.setting{display:flex;align-items:center;gap:10px;margin:20px 0 0;font-size:13px;color:var(--muted)}.setting input{accent-color:var(--purple);width:18px;height:18px}.success-panel{text-align:center;padding:24px 15px}.success-panel .celebration{font-size:55px;color:var(--lime)}.success-panel h2{font-size:32px;margin:10px 0}.success-panel p{color:var(--muted);line-height:1.6}.success-panel .actions{justify-content:center;margin-top:25px}.piano-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}.inline-hint{font-size:13px;color:var(--muted)}
@media(min-width:1600px){main{padding-top:65px}.card-visual{height:210px}.station-card{padding:35px}}
@media(max-width:1000px){.station-layout{grid-template-columns:minmax(0,1fr)}.piano-sidebar .instruction-list{grid-template-columns:repeat(3,1fr)}.station-layout>aside .instruction-list{grid-template-columns:repeat(3,1fr)}.station-layout>aside h2{margin-bottom:15px}.home-heading{display:block}.home-heading .intro{max-width:none}.header-caption{display:none}.home-heading{margin-bottom:30px}}
@media(max-width:650px){.site-header{padding:20px 22px}main{padding:30px 20px}.brand-name{font-size:11px}.brand-mark{font-size:46px}h1{letter-spacing:-1.6px}.station-grid{grid-template-columns:1fr;gap:18px}.station-card{padding:24px}.card-visual{height:145px}.home-heading .intro{font-size:16px}.home-note{display:block;line-height:1.8}.home-note span{display:block}footer{padding:22px;flex-direction:column;align-items:start;font-size:12px;gap:10px}.station-heading{align-items:start;flex-direction:column;gap:8px}.station-heading h1{font-size:32px}.station-layout>aside .instruction-list,.piano-sidebar .instruction-list{grid-template-columns:1fr}.hearing-stage{padding:24px 18px}.panel{padding:23px 19px}.song-header h2{font-size:19px}.song-count{font-size:20px;white-space:nowrap}.song-header{gap:12px}.piano-toolbar .button{padding:12px 17px}.device-status{flex-basis:100%;order:3}.keyboard{height:155px;gap:3px}.key.black{border-width:2px}.keyboard-labels{flex-direction:column;gap:3px}.next-note{width:64px;height:64px;font-size:38px}.guide-title{font-size:18px}.piano-guide{gap:14px}.note-chip{min-width:38px}.button{padding:14px 20px;font-size:14px}.card-action{font-size:13px;padding:12px 16px}.card-meta{font-size:12px}.hearing-age{font-size:17px}.hearing-age strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.setup-note{margin-top:20px;line-height:1.6}.staff-controls{display:none;align-items:center;gap:12px;flex-wrap:wrap;padding:15px;margin-bottom:24px;border:1px solid var(--orange);border-radius:14px}.staff-controls>span{color:var(--orange);margin-right:auto}.kiosk .setup-only,.kiosk .operator-only,.kiosk .header-right{display:none!important}.kiosk.staff-open .operator-only{display:flex!important}.kiosk.staff-open .setup-note.operator-only{display:block!important}.kiosk.staff-open .staff-controls{display:flex}.kiosk .brand{cursor:default;user-select:none;touch-action:none}.kiosk #brand-link{pointer-events:none}.kiosk main{padding-top:30px}.kiosk .station-heading{margin-bottom:26px}.kiosk .hearing-stage{padding-top:40px;padding-bottom:40px}.kiosk .hearing-stage .frequency{font-size:clamp(75px,10vw,135px)}.kiosk .hearing-age strong{font-size:37px}.kiosk .hearing-stage .wave{height:115px}.audio-resume{margin-top:25px}.brand-logo{max-height:68px;width:150px;height:auto;border-radius:9px}.keyboard-background{display:none}
body{padding-bottom:112px}.site-header{padding-top:18px;padding-bottom:18px}.brand-logo{width:185px;max-height:84px}.header-caption{font-size:15px;line-height:1.5;letter-spacing:2px}.header-caption strong{color:var(--text);font-size:19px}.kiosk .header-right{display:flex!important}.kiosk .header-right .icon-button{display:none}.kiosk.staff-open .header-right .icon-button{display:block}footer{position:fixed;bottom:0;left:0;right:0;max-width:none;padding:23px max(36px,calc((100vw - 1288px)/2));background:var(--lime);border:0;color:#20251a;z-index:8;min-height:105px;box-shadow:0 -8px 35px #0002}.ad-copy>strong{display:block;letter-spacing:1.8px;font-size:14px;color:#20251a;margin-bottom:7px}.ad-copy p{font-size:16px;font-weight:500}.ad-copy p span{opacity:.5;padding:0 8px}footer a{color:#15151c;font-size:clamp(20px,2.5vw,32px);font-weight:800;letter-spacing:-1px}main{min-height:calc(100vh - 233px)}.toast{bottom:130px}@media(max-width:800px){footer{padding:17px 22px;gap:8px;align-items:start;flex-direction:column}.ad-copy>strong{font-size:12px;margin-bottom:5px}.ad-copy p{font-size:13px}.ad-copy p span{padding:0 3px}footer a{font-size:21px}.brand-logo{width:142px;max-height:65px}.header-caption{font-size:11px;display:block;letter-spacing:1px}.header-caption strong{font-size:13px}.header-right{gap:15px}.site-header{padding:15px 22px}body{padding-bottom:121px}.kiosk main{padding-top:25px}}
@media(min-width:1001px) and (max-height:900px){.kiosk .site-header{padding-top:10px;padding-bottom:10px}.kiosk .brand-logo{width:128px;max-height:58px}.kiosk main{padding-top:17px;padding-bottom:22px}.kiosk .station-heading{margin-bottom:16px}.kiosk .station-heading h1{font-size:32px;margin:7px 0}.kiosk .station-heading .intro{font-size:14px}.kiosk .panel{padding:20px}.kiosk .song-header h2{font-size:20px}.kiosk .song-header p{font-size:13px}.kiosk .song-progress{margin:14px 0}.kiosk .piano-guide{min-height:75px;padding-bottom:10px}.kiosk .next-note{width:62px;height:62px;font-size:38px}.kiosk .guide-title{font-size:19px}.kiosk .note-road{min-height:58px;padding:5px 0 12px}.kiosk .note-chip{height:36px}.kiosk .note-chip.current{height:43px}.kiosk .keyboard{height:143px}.kiosk .keyboard-labels{margin-top:10px}.kiosk .notice{margin-top:12px;padding:10px 13px}.kiosk .instruction-list{gap:14px}.kiosk .instruction-list li{font-size:14px;line-height:1.5}.kiosk .instruction-list strong{font-size:15px}.kiosk .hearing-stage .frequency{font-size:84px}.kiosk .hearing-stage .wave{height:62px;margin-top:0}.kiosk .hearing-age{margin-top:9px}.kiosk .hearing-age strong{font-size:28px}.kiosk .sweep-track{margin-top:22px}.kiosk .station-footer-note{margin-top:14px}.kiosk .piano-sidebar .instruction-list{gap:15px}}
@media(min-width:1001px) and (max-height:900px){body:has(main[data-view=home]) .site-header{padding-top:10px;padding-bottom:10px}body:has(main[data-view=home]) .brand-logo{width:138px;max-height:62px}main[data-view=home]{padding-top:22px;padding-bottom:20px}.home-heading{margin-bottom:22px}.home-heading h1{font-size:38px;letter-spacing:-1.6px;margin:11px 0 9px}.home-heading .intro{font-size:15px}.station-card{padding:20px}.station-card .pill{padding:5px 10px}.station-card .card-visual{height:80px;margin:6px 0}.station-card .wave{height:80px}.station-card .mini-piano{height:75px;width:67%}.station-card h2{font-size:27px;margin:12px 0 9px}.station-card p{font-size:14px;line-height:1.5;margin-bottom:17px}.station-card .card-bottom{padding-top:16px}.station-card .card-action{padding:11px 16px;font-size:13px}.home-note{margin-top:16px}}
@media(min-width:1001px) and (max-height:900px){.station-card .mini-piano{height:65px;transform:rotate(-3deg)}}