:root{color-scheme:dark;--bg:#10251f;--panel:#19342c;--line:#ffffff13;--muted:#93a89b;--cream:#f0eddb;--lime:#d5ee9c;--orange:#e9b881;--cyan:#86d7c0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font:14px 'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif}button,input,select{font:inherit}button,a,select,input{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}button{color:var(--cream);background:transparent;border:1px solid #ffffff23;border-radius:7px;padding:8px 13px}button:hover{background:#ffffff0c}.instrument{max-width:1440px;height:100svh;min-height:340px;margin:auto;padding:max(10px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:12px}.topbar{height:42px;flex-shrink:0;display:flex;align-items:center;gap:30px}.back{font-size:26px;display:flex;align-items:center;gap:8px}.back span{font-size:19px;font-weight:600}.title{font-size:13px}.title>span{font-size:9px;letter-spacing:2px;margin-left:14px;color:var(--muted)}.toolbar{margin-left:auto;display:flex;gap:8px;align-items:center}.toolbar button{font-size:11px;min-height:34px}.mic{display:flex;gap:7px;align-items:center}.mic i{height:6px;width:6px;border-radius:50%;background:#6b8073}.mic.enabled{border-color:#bada88;color:var(--lime)}.mic.enabled i{background:var(--lime);box-shadow:0 0 8px #d5ee9c55}.rotate-hint{display:none;font-size:11px;color:var(--lime);background:#d5ee9c0b;border:1px solid #d5ee9c22;padding:10px;border-radius:6px}.display{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 20px 9px;flex:1;min-height:150px;display:flex;flex-direction:column;overflow:hidden}.readouts{display:grid;grid-template-columns:125px 1fr 140px;align-items:center;flex-shrink:0;gap:15px}.label{color:var(--muted);font-size:9px;letter-spacing:1px}.target,.live{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline}.target .label,.live .label{grid-column:1/3}.target strong,.live strong{font-size:32px;font-weight:500;font-variant-numeric:tabular-nums}.target small,.live small{font-size:10px;color:var(--muted)}.target strong{color:var(--lime)}.live{text-align:right;grid-template-columns:1fr}.live .label{grid-column:1}.live strong{font-size:28px}.live small{grid-column:1}.phase{text-align:center}.phase h1{font-size:21px;font-weight:500;margin:5px 0}.phase p{font-size:10px;color:var(--muted);margin:5px 0;line-height:1.5}.chart-wrap{position:relative;flex:1;min-height:85px;margin-top:9px}.chart-wrap canvas{display:block;width:100%;height:100%}.chart-legend{position:absolute;left:64px;top:4px;display:flex;gap:17px;font-size:9px;color:#a4b7aa;pointer-events:none}.chart-legend span{display:flex;align-items:center;gap:5px}.chart-legend i{display:inline-block;width:13px;height:2px}.target-dot{background:var(--lime)}.voice-dot{background:var(--cyan)}.wave-legend{opacity:.7}#countdown{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font:500 52px Georgia,serif;color:var(--lime);text-shadow:0 2px 30px var(--bg)}[hidden]{display:none!important}.feedback{min-height:37px;display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);font-size:10px}.feedback>span{color:var(--muted);flex:1;line-height:1.5}.feedback button{font-size:10px;padding:6px 10px;flex-shrink:0}.feedback #repeat{background:var(--lime);border-color:var(--lime);color:#2a422c}.piano{flex-shrink:0;display:flex;flex-direction:column;gap:10px}.piano-controls{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:10px}.piano-controls label{display:flex;align-items:center;gap:7px;white-space:nowrap}.piano-controls select{background:#1f392e;color:var(--cream);border:1px solid #ffffff1b;border-radius:5px;padding:5px 7px;font-size:10px}.piano-caption{font-size:10px;color:#738e7d}.volume{margin-left:auto}.volume input{width:82px;accent-color:var(--lime)}.keyboard-scroll{overflow-x:auto;border-radius:0 0 9px 9px}#keyboard{height:clamp(90px,22svh,190px);position:relative;display:flex;isolation:isolate;background:#0c1915;border-top:5px solid #82926e;gap:2px;padding:0 2px 3px;user-select:none;-webkit-user-select:none}#keyboard button{border-radius:0 0 6px 6px;border:0;position:relative;display:flex;justify-content:flex-end;align-items:center;flex-direction:column;padding:0 0 12px;transition:background .1s;gap:2px;touch-action:manipulation}#keyboard .white-key{flex:1;min-width:0;background:linear-gradient(#f9f7ee,#e4e1d5);color:#738070;box-shadow:inset 0 -4px #c3c3b4}#keyboard .black-key{position:absolute;top:0;height:61%;width:4.3%;z-index:2;background:linear-gradient(100deg,#273b33,#14221c);box-shadow:inset 0 -4px #0b1812,2px 3px 4px #0005;color:#92a497;padding-bottom:8px;border:1px solid #0b1815;border-top:0}#keyboard .selected.white-key{background:linear-gradient(#e3f4b8,#b7d17f);box-shadow:inset 0 -4px #839f53;color:#294529}#keyboard .selected.black-key{background:linear-gradient(#739558,#3b633a);color:#efffd6}#keyboard .white-key:active{background:#c6d8aa}#keyboard .black-key:active{background:#607c49}.key-note{font-size:11px;font-weight:500}.key-solfege{font-size:9px;opacity:.55}.key-dot{width:5px;height:5px;border-radius:50%;background:currentColor;margin-bottom:auto;margin-top:12px;opacity:0}#keyboard .selected .key-dot{opacity:1}.bottom-line{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9px;color:#7f9988;min-height:13px}.bottom-line b{margin:0 7px;color:#4e6b58;font-weight:400}.bottom-line #mic-detail{max-width:48%;line-height:1.4}.good{color:var(--lime)!important}.off{color:var(--orange)!important}@media(orientation:landscape) and (max-height:540px){.instrument{gap:6px;padding-top:max(5px,env(safe-area-inset-top));padding-bottom:max(5px,env(safe-area-inset-bottom))}.topbar{height:31px}.back{font-size:23px}.back span{font-size:16px}.toolbar button{padding:5px 10px;min-height:29px}.display{padding:8px 14px 3px;border-radius:9px}.readouts{grid-template-columns:108px 1fr 108px;gap:8px}.target strong,.live strong{font-size:24px}.phase h1{font-size:16px;margin:3px 0}.phase p{margin:2px 0;font-size:9px}.label{font-size:8px}.chart-wrap{margin-top:3px;min-height:65px}.feedback{min-height:30px;font-size:9px}.feedback button{padding:4px 9px;font-size:9px}.piano{gap:5px}.piano-controls{gap:13px}.piano-controls select{padding:3px 6px}#keyboard{height:clamp(79px,23svh,125px)}#keyboard button{padding-bottom:7px}.key-note{font-size:10px}.key-solfege{font-size:8px}.key-dot{margin-top:5px;width:4px;height:4px}.bottom-line{font-size:8px}.chart-legend{font-size:8px;left:58px}.title>span{font-size:8px;letter-spacing:1px}.volume input{width:65px}.headphone{display:none}}@media(orientation:portrait) and (max-width:700px){.instrument{padding:10px 14px max(14px,env(safe-area-inset-bottom));gap:12px;min-height:620px}.rotate-hint{display:block}.title{display:none}.topbar{gap:12px}.display{padding:15px 12px 9px}.readouts{grid-template-columns:65px 1fr 65px;gap:8px}.target,.live{display:flex;flex-direction:column;gap:5px}.live{align-items:flex-end}.target strong,.live strong{font-size:25px}.target small,.live small{font-size:9px}.phase .label{font-size:7px;letter-spacing:0}.phase h1{font-size:17px}.phase p{font-size:9px}.chart-legend{left:52px;gap:11px;font-size:8px}.wave-legend{display:none!important}.piano-controls{gap:10px;flex-wrap:wrap}.piano-caption{display:none}.volume{margin-left:auto}.volume input{width:50px}.keyboard-scroll{margin-right:-3px}#keyboard{min-width:570px;height:155px}.bottom-line{font-size:8px;flex-wrap:wrap}.bottom-line #mic-detail{max-width:100%}.headphone{display:none}.feedback{flex-wrap:wrap;padding:8px 0;gap:8px}.feedback>span{flex-basis:100%}.feedback button{flex:1;padding:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
kbd{font:9px monospace;opacity:.35;position:absolute;top:9px;left:9px}.selected kbd{opacity:.65}@media(pointer:coarse){kbd{display:none}}@media(min-height:750px) and (min-width:900px){.instrument{padding:20px 36px 16px;gap:18px}.display{padding:24px 28px 12px}.phase h1{font-size:26px}.target strong,.live strong{font-size:40px}.chart-wrap{margin-top:18px}.piano{gap:12px}.feedback{min-height:47px}.piano-controls{font-size:12px}.piano-controls select{font-size:12px}.key-note{font-size:14px}.key-solfege{font-size:11px}.bottom-line{font-size:10px}}