:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f5f2ec;--surface:#fff;--raised:#fff;--track:#e6e0d4;--text:#1c1813;--secondary:#6b6257;--border:#e0d9cb;--accent:#8a5a1c;--on-accent:#fff;--good:#1b7f45;--warning:#b3560a;--bad:#b83227;--panel-light:#2a2118;--panel-dark:#0a0704;--rim:#8a6e33;--key-label:#17130e}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#14110d;--surface:#211c16;--raised:#3a3128;--track:#2c251d;--text:#f2ece2;--secondary:#a89e90;--border:#382f25;--accent:#e0a85a;--on-accent:#1c1813;--good:#4ccb81;--warning:#f0a04b;--bad:#ff7b6b}}*{box-sizing:border-box}html,body,#app{height:100%}body{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font:16px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}h1,h2,h3,p,ul,dl,dd{margin:0}ul{padding:0;list-style:none}button,select,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.45}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon{flex:none}.secondary{color:var(--secondary);font-size:14px}.is-good{color:var(--good)}.is-warning,.is-alert{color:var(--warning)}.is-bad{color:var(--bad)}.app{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);flex-direction:column;display:flex}.screen{flex-direction:column;flex:1;min-height:0;display:flex}.header{flex:none;grid-template-columns:1fr auto 1fr;align-items:center;height:44px;padding:0 6px;display:grid}.header h1{text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:650;overflow:hidden}.header-side{min-width:40px;display:flex}.header-actions{justify-content:flex-end}.tabs{padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--border);background:var(--surface);flex:none;display:flex}.tabs a{color:var(--secondary);flex-direction:column;flex:1;align-items:center;gap:1px;padding:6px 0 5px;font-size:11px;font-weight:600;text-decoration:none;display:flex}.tabs a.is-selected{color:var(--accent)}.button{border:1px solid var(--border);background:var(--surface);border-radius:10px;justify-content:center;align-items:center;gap:6px;min-height:40px;padding:0 14px;font-weight:600;display:inline-flex}.button.is-primary{background:var(--accent);color:var(--on-accent);border-color:#0000}.button.is-compact{min-height:32px;padding:0 10px;font-size:14px}.button.is-plain{color:var(--accent);background:0 0;border:0}.button-row{justify-content:center;gap:8px;display:flex}.button-row .button{flex:1;max-width:220px}.icon-button{width:40px;height:40px;color:var(--accent);background:0 0;border:0;border-radius:10px;place-items:center;padding:0;display:grid}.icon-button.is-small{width:30px;height:30px;color:var(--secondary)}.segmented{background:var(--track);border-radius:9px;flex:1;min-width:0;padding:2px;display:flex}.segmented button{text-overflow:ellipsis;white-space:nowrap;background:0 0;border:0;border-radius:7px;flex:1;min-width:0;min-height:30px;padding:0 4px;font-size:13px;font-weight:600;overflow:hidden}.segmented button.is-selected{background:var(--raised);box-shadow:0 1px 2px #00000038}.panel-pickers{flex:none;gap:8px;display:flex}.hint{min-height:2.6em;color:var(--secondary);flex:none;align-items:flex-start;gap:6px;font-size:13px;line-height:1.3;display:flex}.hint .icon{margin-top:1px}.hint span{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.hint-row .hint{flex:1;min-width:0}.hint-row{flex:none;align-items:flex-start;gap:8px;display:flex}.menu{position:relative}.menu-list{z-index:20;border:1px solid var(--border);background:var(--surface);border-radius:12px;min-width:230px;padding:4px;position:absolute;top:100%;right:0;box-shadow:0 8px 28px #00000047}.menu-section+.menu-section{border-top:1px solid var(--border);margin-top:4px;padding-top:4px}.menu-list button{text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 10px;display:flex}.menu-list button .icon{color:var(--accent)}.notice{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;padding:32px;display:flex;overflow-y:auto}.notice>.icon{color:var(--warning)}.notice h2{font-size:18px}.notice-body{max-width:420px;color:var(--secondary);gap:10px;font-size:15px;display:grid}progress{background:var(--track);width:100%;height:6px;accent-color:var(--accent);appearance:none;border:0;border-radius:3px;overflow:hidden}progress::-webkit-progress-bar{background:var(--track)}progress::-webkit-progress-value{background:var(--accent);border-radius:3px;transition:width .2s ease-out}progress::-moz-progress-bar{background:var(--accent);border-radius:3px}.keyboard-screen{flex-direction:column;flex:1;min-height:0;display:flex;overflow:auto}.readout{min-height:var(--readout-min,200px);flex:1 1 0;display:flex;container:readout/size}.readout-content{flex-direction:column;flex:1;gap:10px;min-width:0;padding:8px 16px;display:flex;overflow-y:auto}.dock{border-top:1px solid var(--border);background:var(--surface);flex-direction:column;flex:0 auto;gap:8px;min-height:0;padding:10px 16px 6px;display:flex}.keyboard-fit{width:100%;min-height:110px;aspect-ratio:var(--panel-ratio);flex:0 auto;place-items:center;display:grid;container-type:size}.keyboard{width:min(100cqw, calc(100cqh * var(--panel-ratio)));aspect-ratio:var(--panel-ratio);background:radial-gradient(circle at 50% 38%, var(--panel-light), var(--panel-dark));border-radius:12px;position:relative;container-type:size}.key{border:max(1px, .28cqw) solid var(--rim);width:6.2cqw;height:6.2cqw;color:var(--key-label);letter-spacing:-.03em;border-radius:50%;place-items:center;padding:0;font-size:2.1cqw;font-weight:800;line-height:1;transition:transform .15s ease-out,opacity .15s ease-out,box-shadow .15s ease-out;display:grid;position:absolute;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 .2cqw .4cqw #00000073}.key:disabled,.key[tabindex="-1"]{cursor:default;opacity:1}.key.is-related{box-shadow:inset 0 0 0 max(1px,.28cqw) #ffffff8c,0 .2cqw .4cqw #00000073}.key.is-ringed{box-shadow:inset 0 0 0 max(1.5px,.56cqw) #fff,0 .2cqw .4cqw #00000073}.key.is-highlighted{z-index:1;transform:translate(-50%,-50%)scale(1.18);box-shadow:inset 0 0 0 max(1.5px,.56cqw) #fff,0 0 1.5cqw #ffffffb3}.key.is-dimmed{opacity:.4}.listening-strip{min-height:32px;color:var(--secondary);flex:none;justify-content:center;align-items:center;gap:8px;font-size:14px;display:flex}.listening-strip.is-detecting{color:var(--warning)}.listening-strip.is-confirmed{color:var(--good)}.listening-text{min-width:7.5em;font-weight:600}.level-meter{background:var(--track);border-radius:3px;flex:1;max-width:220px;height:6px;overflow:hidden}.level-meter div{transform-origin:0;background:currentColor;border-radius:3px;height:100%;transition:transform 80ms linear}.note-face{width:var(--face,110px);height:var(--face,110px);border:calc(var(--face,110px) * .035) solid var(--rim);color:var(--key-label);font-size:calc(var(--face,110px) * .26);letter-spacing:-.02em;border-radius:50%;flex:none;place-items:center;font-weight:800;transition:opacity .15s ease-out;display:grid;box-shadow:0 2px 6px #0000004d}.note-face.is-empty{background:var(--panel-light);color:#ffffff73}.note-face.is-ringed{box-shadow:inset 0 0 0 calc(var(--face,110px) * .04) #fff, 0 2px 8px #00000059}.note-face.is-dimmed{opacity:.55}.is-tuner{--readout-min:176px}.tuner-body{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;min-height:0;display:flex}.is-tuner .note-face{--face:clamp(92px, calc(100cqh - 196px), 150px)}.measurements{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;gap:8px;width:100%;max-width:380px;padding:10px 14px;display:flex}.measurement-numbers{font-variant-numeric:tabular-nums;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 8px;font-weight:700;display:flex}.measurements.is-idle .measurement-numbers{color:var(--secondary)}.measurements.is-in-tune .measurement-numbers{color:var(--good)}.measurements.is-off .measurement-numbers{color:var(--warning)}.measurements.is-provisional .measurement-numbers{opacity:.6}.frequency{font-size:22px}.deviation{font-size:16px}@container readout (height<=300px) and (width>=330px){.tuner-body{flex-direction:row;gap:14px}.is-tuner .note-face{--face:clamp(84px, calc(100cqh - 68px), 120px)}.measurements{flex:1}}@container readout (height<=300px) and (width<=329px){.is-tuner .note-face{--face:clamp(60px, calc(100cqh - 190px), 110px)}}.tuning-meter{gap:4px;display:grid}.meter-track{height:30px;position:relative}.meter-track:before{background:var(--track);content:"";border-radius:5px;height:10px;position:absolute;top:10px;left:0;right:0}.meter-zone{background:#3caa6959;background:color-mix(in srgb, var(--good) 35%, transparent);border-radius:5px;height:10px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.meter-tick,.meter-centre,.meter-needle{position:absolute;transform:translate(-50%)}.meter-tick{background:var(--secondary);opacity:.45;width:1px;height:12px;top:9px}.meter-centre{background:var(--text);opacity:.6;width:2px;height:22px;top:4px;left:50%}.meter-needle{border-radius:3px;width:6px;height:30px;transition:left .12s ease-out;top:0}.meter-needle.is-in-tune{background:var(--good);box-shadow:0 0 6px color-mix(in srgb, var(--good) 60%, transparent)}.meter-needle.is-off{background:var(--warning);box-shadow:0 0 6px color-mix(in srgb, var(--warning) 60%, transparent)}.meter-labels{color:var(--secondary);justify-content:space-between;font-size:11px;display:flex}.is-practice{--readout-min:252px}.progress-row{flex:none;gap:5px;display:grid}.progress-labels{align-items:center;gap:10px;font-size:14px;font-weight:600;display:flex}.progress-title{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.pulse,.mistakes{font-variant-numeric:tabular-nums;flex:none;align-items:center;gap:5px;display:inline-flex}.pulse{color:var(--secondary)}.mistakes{color:var(--warning)}.pulse-dot{background:var(--accent);border-radius:50%;width:11px;height:11px;animation:.3s ease-out pulse-flash}.pulse-dot.is-strong{background:var(--good);animation-name:pulse-flash-strong}@keyframes pulse-flash{0%{opacity:1;transform:scale(1.5)}to{opacity:.45;transform:scale(1)}}@keyframes pulse-flash-strong{0%{opacity:1;transform:scale(2.1)}to{opacity:.55;transform:scale(1)}}.target-row{flex:92px;align-items:center;gap:10px;min-height:92px;max-height:170px;display:flex}.target-row .note-face{--face:clamp(72px, calc(100cqh - 180px), 110px)}.staff{min-width:0;color:var(--text);flex:1;align-self:stretch}.staff svg{display:block}.staff-line{stroke:currentColor;stroke-width:1px;opacity:.5}.staff-clef{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px;vector-effect:non-scaling-stroke}.staff-dot{fill:currentColor}.staff-note ellipse{fill:var(--secondary)}.staff-note.is-played ellipse,.staff-note.is-played .staff-accidental{opacity:.38}.staff-note.is-current ellipse{fill:var(--accent)}.staff-accidental{fill:currentColor;dominant-baseline:central;text-anchor:middle}@container readout (width<=330px){.target-row .note-face{display:none}}.verdict{flex:none;gap:2px;min-height:46px;display:grid}.verdict-line{align-items:center;gap:6px;font-weight:600;display:flex}.finished{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;display:flex}.finished-title{color:var(--good);align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}.finished .button-row{align-self:stretch;margin-top:4px}.is-chords{--readout-min:214px}.is-chords.is-browse,.is-chords.is-practice{--readout-min:252px}.is-chords .readout .segmented{flex:none}.chord-top{flex-direction:column;flex:none;gap:4px;display:flex}.is-browse .chord-top{flex-direction:row-reverse;justify-content:space-between;align-items:center}.chord-name{letter-spacing:-.02em;text-align:center;font-size:44px;font-weight:800;line-height:1.1}.quality-picker{color:var(--secondary);gap:2px;font-size:12px;display:grid}.quality-picker select{border:1px solid var(--border);background:var(--surface);max-width:200px;min-height:36px;color:var(--text);border-radius:9px;padding:0 8px;font-size:14px;font-weight:600}.root-picker{flex:none;grid-template-columns:repeat(6,1fr);gap:4px;display:grid}.root-picker button{border:1px solid var(--border);background:var(--surface);border-radius:8px;min-height:32px;padding:0;font-size:13px;font-weight:700}.root-picker button.is-selected{background:var(--accent);color:var(--on-accent);border-color:#0000}@container readout (width>=540px){.root-picker{grid-template-columns:repeat(12,1fr)}}.chord-detail{text-align:center;flex:none;gap:2px;display:grid}.chord-headline{font-size:17px;font-weight:650}.chord-detail .secondary{min-height:1.35em}.is-map{--readout-min:150px}.is-map .readout-content{justify-content:center;align-items:center}.map-intro{max-width:300px;color:var(--secondary);text-align:center}.legend{min-height:2.6em;color:var(--secondary);flex:none;justify-content:space-between;align-items:center;font-size:13px;display:flex}.legend-octaves{gap:5px;display:flex}.legend-chip{border:1.5px solid var(--rim);width:22px;height:22px;color:var(--key-label);border-radius:50%;place-items:center;font-size:11px;font-weight:800;display:grid}.button-detail{text-align:center;gap:8px;width:100%;max-width:360px;padding:12px 16px;display:grid}.button-detail h2{font-size:17px}.button-detail-notes{justify-content:center;gap:28px;display:flex}.button-detail-notes>div{opacity:.7;justify-items:center;gap:4px;display:grid}.button-detail-notes>div.is-current{opacity:1}.button-detail .note-face{--face:clamp(52px, calc(100cqh - 120px), 84px)}.button-detail .hint{justify-content:center;min-height:0}.page{flex:1;width:100%;max-width:720px;margin:0 auto;padding:4px 16px 28px;overflow-y:auto}.group{margin-top:18px}.group h3{color:var(--secondary);letter-spacing:.03em;text-transform:uppercase;margin:0 4px 6px;font-size:13px;font-weight:650}.footnote{color:var(--secondary);margin:6px 4px 0;font-size:13px}.page>.footnote{margin-top:14px}.card{border:1px solid var(--border);background:var(--surface);border-radius:12px}.rows li+li,.issues li+li,.facts div+div{border-top:1px solid var(--border)}.row{text-align:left;background:0 0;border:0;align-items:center;gap:10px;width:100%;padding:10px 12px 10px 14px;display:flex}.row:disabled{opacity:1}.row:disabled strong,.row>.icon{color:var(--secondary)}.row-text{flex:1;gap:2px;min-width:0;display:grid}.row-warning{color:var(--warning);align-items:center;gap:5px;font-size:14px;display:flex}.row-progress{color:var(--accent);font-size:13px;font-weight:600}.today{justify-content:space-around;padding:12px 8px;display:flex}.today div{text-align:center;display:grid}.today strong{font-variant-numeric:tabular-nums;font-size:22px}.today span{color:var(--secondary);font-size:12px}.facts div{justify-content:space-between;gap:12px;padding:10px 14px;display:flex}.facts dd{color:var(--secondary);text-align:right}.issues li{gap:2px;padding:10px 14px;font-size:14px;display:grid}.issues code{color:var(--secondary);font-size:12px}.group>.verdict-line{margin:8px 4px 0;font-size:14px}.sheet-backdrop{z-index:30;background:#00000073;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{width:100%;max-width:560px;max-height:92dvh;padding:8px 16px calc(20px + env(safe-area-inset-bottom));background:var(--bg);border-radius:16px 16px 0 0;overflow-y:auto}.sheet-header{justify-content:space-between;align-items:center;display:flex}.sheet-header h2{font-size:18px}.sheet .group{margin-top:12px}.sheet .card{gap:10px;padding:12px 14px;display:grid}.tuning-value{font-variant-numeric:tabular-nums;font-size:30px;font-weight:800}.tuning-proposal{font-size:18px;font-weight:700}.slider-row{align-items:center;gap:8px;display:flex}.slider-row input{min-width:0;accent-color:var(--accent);flex:1}.slider-row small{color:var(--secondary)}@media (orientation:portrait) and (height<=620px){.header{height:36px}.tabs a{gap:0;padding:3px 0 2px}.readout-content{gap:6px;padding:4px 16px}.dock{gap:6px;padding:8px 16px 4px}.listening-strip{min-height:28px}.hint,.legend{min-height:1.3em}.hint span{-webkit-line-clamp:1;line-clamp:1}.is-practice,.is-chords.is-browse{--readout-min:214px}.is-chords.is-practice{--readout-min:224px}.target-row{flex-basis:76px;min-height:76px}.verdict{min-height:42px}.chord-name{font-size:36px}.root-picker{scrollbar-width:none;display:flex;overflow-x:auto}.root-picker button{flex:none;min-width:46px}}@media (orientation:landscape) and (height<=540px){.app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;flex-direction:row}.tabs{width:calc(62px + env(safe-area-inset-left));padding:0 0 0 env(safe-area-inset-left);border-top:0;border-right:1px solid var(--border);flex-direction:column;order:-1;justify-content:center}.tabs a{flex:none;padding:8px 0;font-size:10px}.header{height:36px}.keyboard-screen{flex-direction:row}.readout{flex:0 0 max(230px,36%);min-height:0}.readout-content{gap:8px;padding:4px 12px}.dock{border-top:0;border-left:1px solid var(--border);flex:1 1 0;min-width:0;padding:6px 12px 4px}.keyboard-fit{aspect-ratio:auto;flex:1 1 0;min-height:0}.chord-name{font-size:34px}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}