:root{color-scheme:dark;--bg: #0b0d10;--panel: #14171c;--border: #262b33;--text: #f2f4f7;--text-dim: #8a92a1;--accent: #5ee0a0;--accent-dim: #2d6b52;--scale-color: #7aa2ff;--warn: #e0a95e}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;-webkit-tap-highlight-color:transparent}#app{height:100dvh;overflow:hidden;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.midi-panel{align-items:center;justify-content:center;gap:.75rem}.status{font-size:.85rem;color:var(--text-dim);display:flex;align-items:center;gap:.5rem}.status:before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--text-dim);flex:none}.status--pending:before{background:var(--warn)}.status--ok:before{background:var(--accent)}.status--error:before{background:#e05e5e}.device-select{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:.5rem;padding:.35rem .5rem;font-size:.85rem;max-width:60vw}.display{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.4rem,2.5vh,1.5rem);padding:clamp(.5rem,2.5vh,1.5rem) 1rem;text-align:center}.chord{min-height:0}.chord-name{font-size:clamp(1.75rem,min(16vw,9vh),7rem);font-weight:700;line-height:1;letter-spacing:-.02em;word-break:break-word}.chord-notes{margin-top:.4rem;font-size:clamp(.7rem,min(4.5vw,3vh),1.5rem);color:var(--text-dim);letter-spacing:.02em}.chord--live .chord-name{color:var(--accent)}.info-column{display:flex;flex-direction:column;align-items:center;gap:clamp(.3rem,1.5vh,.75rem);min-height:0}.pills{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem}.pill{-moz-appearance:none;appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;display:flex;align-items:baseline;gap:.6rem;padding:clamp(.3rem,1vh,.6rem) clamp(.7rem,3vw,1.25rem);background:var(--panel);border:1px solid var(--border);border-radius:999px;transition:background-color .15s ease,border-color .15s ease}.pill--active{background:var(--accent-dim);border-color:var(--accent)}.pill-label{font-size:clamp(.65rem,2vh,.85rem);text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.pill--active .pill-label{color:var(--text)}.pill-value{font-size:clamp(.9rem,min(4vw,3.5vh),1.5rem);font-weight:600;color:var(--accent)}.scale-notes{min-height:1.2em;font-size:clamp(.65rem,min(3.5vw,2.5vh),1.1rem);color:var(--text-dim);letter-spacing:.02em}.bottom-panel{border-top:1px solid var(--border);background:var(--panel);max-height:45vh;min-height:0;display:flex;flex-direction:column}.tab-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--border)}.tab-buttons{display:flex;gap:.35rem}.tab-btn{background:transparent;color:var(--text-dim);border:1px solid transparent;border-radius:.5rem;padding:.4rem .85rem;font-size:.9rem;font-weight:600}.tab-btn--active{color:var(--text);background:var(--bg);border-color:var(--border)}.tab-panel{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding:.75rem 1rem 1rem}.tab-panel[hidden]{display:none}.piano{display:flex;width:100%;height:clamp(120px,28vh,200px);flex:none;background:#05060a;border-radius:.75rem;overflow:hidden}.piano-octave{--wk: calc(100% / 7);--bk-width: calc(var(--wk) * .62);position:relative;display:flex;flex:1;height:100%}.piano-white{flex:1;position:relative;background:#eef0f3;border-right:1px solid #b9bdc6;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.3rem;padding-bottom:.4rem;transition:background-color .1s ease}.piano-white .piano-label{color:#2a2e35;font-size:.7rem;font-weight:600}.piano-black{position:absolute;top:0;width:var(--bk-width);height:62%;background:#14171c;border:1px solid #05060a;border-top:none;border-radius:0 0 .3rem .3rem;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.2rem;padding-bottom:.3rem;transition:background-color .1s ease}.piano-black .piano-label{color:var(--text);font-size:.6rem;font-weight:600}.piano-black--1{left:calc(var(--wk) * 1 - var(--bk-width) / 2)}.piano-black--2{left:calc(var(--wk) * 2 - var(--bk-width) / 2)}.piano-black--4{left:calc(var(--wk) * 4 - var(--bk-width) / 2)}.piano-black--5{left:calc(var(--wk) * 5 - var(--bk-width) / 2)}.piano-black--6{left:calc(var(--wk) * 6 - var(--bk-width) / 2)}.piano-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--scale-color);box-shadow:0 0 0 2px #00000059;visibility:hidden}.piano-key--in-scale .piano-dot{visibility:visible}.piano-key--in-chord{background:var(--accent)}.piano-key--in-chord .piano-label{color:#062018}.piano:not(.piano--live) .piano-key--in-chord{background:var(--accent-dim)}.piano:not(.piano--live) .piano-key--in-chord .piano-label{color:#dff7ea}.reset-btn{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:.5rem;padding:.3rem .7rem;font-size:.8rem;text-transform:none;letter-spacing:normal}.reset-btn:active{background:var(--border)}.log-list{list-style:none;margin:0;padding:.25rem 1rem .75rem;overflow-y:auto;font-size:.9rem;font-variant-numeric:tabular-nums}.log-list li{display:flex;gap:.75rem;padding:.3rem 0;border-bottom:1px solid var(--border);color:var(--text-dim)}.log-list li:first-child{color:var(--text)}.log-list .log-time{color:var(--text-dim);flex:none;width:4.5rem}@media (orientation: landscape) and (max-height: 500px){.display{flex-direction:row;gap:clamp(.75rem,4vw,2rem);padding:.35rem 1rem}.chord{flex:1 1 55%;min-width:0}.info-column{flex:1 1 40%;min-width:0;gap:clamp(.4rem,2vh,1rem)}.chord-name{font-size:clamp(1.75rem,13vh,4.5rem)}.chord-notes{margin-top:.3rem;font-size:clamp(.75rem,3.2vh,1.3rem)}.pills{gap:.5rem}.pill{padding:.35rem .8rem;gap:.45rem}.pill-label{font-size:clamp(.7rem,2.4vh,.95rem)}.pill-value{font-size:clamp(1rem,4.2vh,1.75rem)}.scale-notes{font-size:clamp(.7rem,2.6vh,1.05rem);min-height:0}.tab-bar{padding:.3rem .5rem}.tab-btn{padding:.3rem .6rem;font-size:.8rem}.tab-panel{padding:.4rem .6rem .5rem}.piano{height:clamp(70px,24vh,150px)}}