:root{color:#22231f;font-synthesis:none;--shell:#d8d4c7;--paper:#ede9dc;--ink:#22231f;--muted:#67675f;--line:#2a2a26;--orange:#f45128;--yellow:#f6d335;--blue:#5484ae;--mint:#91bea9;--pink:#d3869d;--screen:#cbd3b8;background:#b9b8b1;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}*{box-sizing:border-box}body{background:#b9b8b1;min-width:320px;min-height:100vh;margin:0}button{font:inherit;color:inherit}button:focus-visible{outline-offset:2px;outline:3px solid #fff;box-shadow:0 0 0 5px #111}[hidden]{display:none!important}#app{padding:clamp(10px,2vw,28px)}.instrument-shell{border:2px solid var(--line);background:var(--shell);border-radius:18px;max-width:1180px;margin:0 auto;padding:20px;box-shadow:0 12px #555650}.topbar{border-bottom:1px solid #8c8a80;justify-content:space-between;align-items:center;gap:20px;padding-bottom:14px;display:flex}.brand-block{flex-wrap:wrap;align-items:baseline;gap:12px;display:flex}.brand{letter-spacing:-.08em;font-size:clamp(1.25rem,2.4vw,1.55rem);font-weight:900}.descriptor{color:var(--muted);letter-spacing:.04em;font-size:.7rem}.mic-button{border:2px solid var(--line);background:var(--orange);cursor:pointer;border-radius:5px;min-height:46px;padding:0 20px;font-weight:900;box-shadow:0 4px #272722}.mic-button:active,.mic-button.is-active{transform:translateY(2px);box-shadow:0 2px #272722}.mode-switch{border:1.5px solid var(--line);background:#c8c5bb;border-radius:9px;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;padding:6px;display:grid}.mode-switch button{min-height:45px;color:var(--muted);letter-spacing:.08em;cursor:pointer;background:0 0;border:1.5px solid #0000;border-radius:5px;font-size:.78rem;font-weight:900}.mode-switch button[aria-selected=true]{border-color:var(--line);background:var(--paper);color:var(--ink);box-shadow:0 3px 0 var(--line);transform:translateY(-1px)}.function-row{grid-template-columns:2.5fr repeat(5,1fr);gap:9px;margin:16px 0 13px;display:grid}.input-label,.function-pad{border:1.5px solid var(--line);text-align:left;border-radius:6px;min-height:64px;padding:10px;box-shadow:0 5px #262723}.input-label{color:#f7f3e8;background:#1f211e;flex-direction:column;justify-content:center;display:flex}.input-label strong{font-size:1.1rem}.function-pad{cursor:default;flex-direction:column;justify-content:space-between;display:flex}button.function-pad{cursor:pointer}.function-pad strong{font-size:.69rem}.function-pad small,.input-label small{letter-spacing:.04em;font-size:.57rem}.yellow{background:var(--yellow)}.orange{background:var(--orange)}.blue{background:var(--blue)}.mint{background:var(--mint)}.pink{background:var(--pink)}.octave-pad{gap:5px}.octave-key-status{justify-content:space-between;align-items:center;gap:6px;display:flex}.octave-key-status>small:first-child{font-size:.7rem;font-weight:900}.octave-key-hint{white-space:nowrap;color:#33463d}.octave-key-hint kbd,.pitch-mod-key-hint kbd{min-width:18px;font:inherit;background:#ffffff57;border:1px solid;border-radius:2px;place-items:center;padding:1px 3px;font-weight:900;display:inline-grid}.panel{border:1.5px solid var(--line);background:var(--paper);border-radius:12px;overflow:hidden}.panel-head{border-bottom:1px solid var(--line);letter-spacing:.03em;background:#d4d0c4;justify-content:space-between;align-items:center;min-height:36px;padding:0 13px;font-size:.68rem;display:flex}.panel-head h2{font:inherit;margin:0;font-weight:900}.piano-meta{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;min-height:62px;padding:10px 13px;display:flex}.piano-meta div{flex-direction:column;gap:4px;display:flex}.piano-meta small{color:var(--muted);font-size:.65rem}.pill{color:#fff;white-space:nowrap;background:#2b2c28;border-radius:999px;padding:5px 8px;font-size:.64rem}.piano-performance{--white-key-height:224px;--black-key-height:144px;grid-template-columns:96px minmax(0,1fr);min-width:0;display:grid}.pitch-modulation{border-right:1px solid var(--line);background:#d3d0c5;flex-direction:column;align-items:center;gap:7px;min-height:158px;padding:9px 8px 8px;display:flex}.pitch-mod-heading{letter-spacing:.02em;justify-content:space-between;align-items:flex-start;gap:4px;width:100%;font-size:.59rem;line-height:.95;display:flex}.pitch-mod-heading span{color:var(--muted);writing-mode:vertical-rl;font-size:.47rem}.pitch-mod-ranges{grid-template-columns:1fr 1fr;gap:3px;width:100%;display:grid}.pitch-mod-ranges button{border:1px solid var(--line);background:var(--paper);cursor:pointer;border-radius:2px;min-height:25px;padding:0 2px;font-size:.49rem;font-weight:900}.pitch-mod-ranges button[aria-pressed=true]{background:var(--blue);color:#fff;box-shadow:inset 0 -3px #345f84}.pitch-mod-wheel-stage{border:1.5px solid var(--line);background:#a9a79f;border-radius:24px;flex:0 0 112px;width:48px;height:112px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 5px #c5c2b8,inset 0 7px 10px #0000002e,inset 0 -7px 10px #ffffff3d}.pitch-mod-wheel-stage:before{content:"";z-index:1;pointer-events:none;border-top:1px solid #6f6e68;position:absolute;top:50%;left:4px;right:4px}.wheel-mark{z-index:3;color:#565750;pointer-events:none;font-size:.55rem;font-weight:900;line-height:1;position:absolute;right:5px}.wheel-mark-up{top:8px}.wheel-mark-center{color:var(--orange);top:50%;transform:translateY(-50%)}.wheel-mark-down{bottom:8px}#pitch-mod-control{--pitch-mod-low:50%;--pitch-mod-high:50%;z-index:2;appearance:none;touch-action:none;cursor:ns-resize;background:0 0;width:94px;height:30px;margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-90deg)}#pitch-mod-control:focus-visible{outline-offset:2px;filter:drop-shadow(0 0 .5px #111)drop-shadow(0 0 2px #111);outline:2px solid #fff}#pitch-mod-control::-webkit-slider-runnable-track{border:1px solid var(--line);background:linear-gradient(90deg, #696a63 0 var(--pitch-mod-low), var(--orange) var(--pitch-mod-low) var(--pitch-mod-high), #696a63 var(--pitch-mod-high) 100%);border-radius:8px;height:12px;box-shadow:inset 0 0 0 3px #3d3e39}#pitch-mod-control::-webkit-slider-thumb{appearance:none;background:repeating-linear-gradient(90deg,#20211e 0 3px,#41423c 3px 5px);border:1.5px solid #10110f;border-radius:4px;width:25px;height:31px;margin-top:-10.5px;box-shadow:2px 0 #10110f,inset 0 0 0 2px #52534c}#pitch-mod-control::-moz-range-track{border:1px solid var(--line);background:linear-gradient(90deg, #696a63 0 var(--pitch-mod-low), var(--orange) var(--pitch-mod-low) var(--pitch-mod-high), #696a63 var(--pitch-mod-high) 100%);border-radius:8px;height:10px;box-shadow:inset 0 0 0 3px #3d3e39}#pitch-mod-control::-moz-range-thumb{background:repeating-linear-gradient(90deg,#20211e 0 3px,#41423c 3px 5px);border:1.5px solid #10110f;border-radius:4px;width:25px;height:29px;box-shadow:2px 0 #10110f,inset 0 0 0 2px #52534c}#pitch-mod-value{background:var(--screen);color:#263126;text-align:center;border:1px solid #77776f;border-radius:2px;min-width:76px;padding:4px 3px;font-size:.56rem;font-weight:900}.pitch-mod-key-hint{color:var(--muted);white-space:nowrap;align-items:center;gap:3px;font-size:.48rem;display:flex}.piano-scroll{overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-color:#595b53 #cbc8bd;padding:10px;overflow-x:auto}.piano-surface{width:calc(var(--white-count) * 68px);min-width:calc(var(--white-count) * 68px);height:var(--white-key-height);position:relative}.white-keys{height:100%;display:flex}.piano-key{-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y;cursor:pointer}.white-key{border:1px solid var(--line);background:#f0ecdf;border-radius:0 0 5px 5px;flex-direction:column;flex:0 0 68px;justify-content:flex-end;align-items:center;gap:3px;width:68px;height:100%;padding:10px 2px;font-size:.68rem;display:flex}.black-key-slot{width:40px;height:var(--black-key-height);z-index:2;position:absolute;top:0}.black-key{color:#fff;background:#242521;border:1px solid #111;border-radius:0 0 4px 4px;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;width:40px;height:100%;padding:8px 1px;font-size:.58rem;display:flex;box-shadow:0 3px #111}.piano-key kbd{min-width:17px;font:inherit;text-align:center;opacity:.72;background:0 0;border:1px solid;border-radius:2px;padding:1px 3px;font-size:.52rem;line-height:1.15}.piano-key.is-active{background:var(--orange);color:#151612;box-shadow:none;transform:translateY(2px)}.piano-key.is-chord-tone:not(.is-active){box-shadow:inset 0 -7px 0 var(--blue)}.black-key.is-chord-tone:not(.is-active){box-shadow:inset 0 -7px #86b2d1,0 3px #111}.piano-key.is-chord-root:not(.is-active){box-shadow:inset 0 -11px 0 var(--orange)}.black-key.is-chord-root:not(.is-active){box-shadow:inset 0 -11px 0 var(--orange), 0 3px 0 #111}.main-grid{grid-template-columns:minmax(0,1.82fr) minmax(280px,1fr);gap:14px;margin-top:14px;display:grid}.pitch-display{background:var(--screen);border-bottom:1px solid var(--line);grid-template-rows:1fr auto;grid-template-columns:34% 66%;min-height:310px;padding:18px;display:grid}.note-readout{letter-spacing:-.08em;align-self:center;font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;font-size:clamp(6rem,14vw,9.5rem);line-height:.8}.note-readout sup{vertical-align:top;margin-left:.04em;font-family:inherit;font-size:.34em}.meter-wrap{align-items:flex-end;display:flex;position:relative}.meter{width:100%;height:auto;color:var(--ink);overflow:visible}.meter text{font-family:inherit;font-size:12px}.meter-needle{stroke:var(--orange);stroke-width:4px;transform-origin:200px 158px;transition:transform 70ms linear}.tuning-state{z-index:2;color:#28563e;white-space:nowrap;background:#e1e7d6;border:1px solid #4f7e67;padding:4px 8px;font-size:.65rem;font-weight:900;position:absolute;top:0;left:50%;transform:translate(-50%)}.pitch-numbers{grid-column:1/-1;gap:26px;margin:0;display:flex}.pitch-numbers div{min-width:80px}dt{color:var(--muted);font-size:.66rem}dd{overflow-wrap:anywhere;margin:4px 0 0;font-size:1.08rem;font-weight:900}.trail-block{padding:12px 18px 14px}.trail-block>span{color:var(--muted);font-size:.66rem}#pitch-trail{background:#eeeadf;border:1px solid #99968b;width:100%;height:150px;margin-top:2px;display:block}.trail-axis{color:var(--muted);justify-content:space-between;margin-top:5px;display:flex}.engine-panel{padding-bottom:14px}.engine-controls{grid-template-columns:1fr 1fr;gap:8px;padding:14px;display:grid}.engine-button{border:1.5px solid var(--line);cursor:pointer;opacity:.78;border-radius:5px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;min-height:64px;padding:9px;display:flex;box-shadow:0 3px #353631}.engine-button strong{font-size:1rem}.engine-button small{font-size:.58rem}.engine-button.light{background:var(--yellow)}.engine-button.neural{background:var(--blue)}.engine-button.is-selected{opacity:1;outline:2px solid var(--ink);transform:translateY(2px);box-shadow:0 1px #353631}.neural-progress{background:#e7e3d7;border:1px dashed #88867d;margin:0 14px 12px;padding:12px}.progress-head{justify-content:space-between;gap:8px;display:flex}.progress-head button{border:1px solid var(--line);cursor:pointer;background:#eeeadd;font-size:.65rem}.progress-track,.level-track{border:1px solid var(--line);background:#f8f5ed;height:12px;margin:10px 0 6px;overflow:hidden}.progress-track span,.level-track span{background:var(--blue);width:0;height:100%;transition:width .1s linear;display:block}.neural-progress small{color:var(--muted);font-size:.58rem}.level-block{margin:0 14px 12px}.level-label{color:var(--muted);justify-content:space-between;font-size:.65rem;display:flex}.level-track span{background:var(--orange)}.diagnostic-grid{grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0 14px;display:grid}.diagnostic-grid div{border:1px solid #98958a;min-height:63px;padding:10px}.diagnostic-grid dd{font-size:.85rem}.processing-note{color:var(--muted);border:1px solid #aaa79c;margin:10px 14px 0;padding:7px;font-size:.6rem}.privacy-copy,.model-copy{color:var(--muted);margin:12px 14px 0;font-size:.59rem;line-height:1.5}.model-copy{margin-top:5px}footer{color:var(--muted);justify-content:space-between;gap:15px;margin-top:14px;font-size:.63rem;display:flex}.sr-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.is-in-tune .tuning-state{background:#dce8d3}.is-reference-playing .pitch-display{background:#d8cbbb}@media (max-width:860px){#app{padding:8px}.instrument-shell{border-radius:12px;padding:12px;box-shadow:0 7px #555650}.function-row{grid-template-columns:2fr repeat(3,1fr)}.input-label{grid-column:span 3}.main-grid{grid-template-columns:1fr}.pitch-display{min-height:270px}.engine-panel{order:2}}@media (max-width:540px){.topbar{flex-direction:column;align-items:stretch}.brand-block{justify-content:space-between}.mic-button{width:100%}.function-row{grid-template-columns:repeat(3,1fr);gap:7px}.input-label{grid-column:1/-1}.function-pad{min-height:58px}.mode-switch button{min-height:42px}.pitch-display{grid-template-columns:40% 60%;min-height:235px;padding:12px}.note-readout{font-size:clamp(5.4rem,28vw,7.4rem)}.meter-wrap{align-items:center}.tuning-state{top:14px}.pitch-numbers{gap:14px}#pitch-trail{height:120px}.engine-controls{padding:10px}.diagnostic-grid{padding:0 10px}.piano-meta{align-items:flex-start}.piano-meta small{max-width:220px}.piano-performance{--white-key-height:260px;--black-key-height:168px;grid-template-columns:82px minmax(0,1fr)}.pitch-modulation{padding-inline:6px}.pitch-mod-ranges{grid-template-columns:1fr}.pitch-mod-ranges button{min-height:27px}footer{flex-direction:column;gap:3px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}@media (forced-colors:active){.function-pad,.engine-button,.mic-button,.piano-key,.pitch-mod-ranges button,#pitch-mod-control{forced-color-adjust:auto}.progress-track span,.level-track span,.meter-needle{stroke:highlight;background:highlight}}