:root{--bg: #0e1115;--bg-2: #161b22;--bg-3: #1c232c;--bg-4: #232c37;--line: #2a333d;--line-2: #36424f;--text: #e9eef3;--muted: #8a97a6;--muted-2: #6b7684;--brass: #e6ad53;--brass-bright: #f4bf66;--brass-deep: #c0863a;--teal: #51b0ad;--good: #62c281;--press-text: #20160a;--radius: 14px;--radius-sm: 10px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 80% -10%,#1a222c 0%,var(--bg) 55%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.app{max-width:1100px;margin:0 auto;padding:20px clamp(14px,3vw,28px) 60px;min-height:100%}.app-header{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:18px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{font-size:34px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}.brand h1{margin:0;font-size:26px;letter-spacing:-.02em;background:linear-gradient(180deg,#fff,var(--brass));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.tagline{margin:2px 0 0;color:var(--muted);font-size:13px}.header-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.spelling-toggle{background:var(--bg-3);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}.spelling-toggle:hover{border-color:var(--brass)}.inst-picker{display:flex;gap:6px;background:var(--bg-2);padding:5px;border-radius:999px;border:1px solid var(--line)}.inst{display:flex;flex-direction:column;align-items:center;border:none;background:transparent;color:var(--muted);padding:6px 13px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;line-height:1.15}.inst-name{font-size:13px;font-weight:650}.inst-pitch{font-size:10px;opacity:.8}.inst:hover{color:var(--text)}.inst.on{background:linear-gradient(180deg,var(--brass-bright),var(--brass));color:var(--press-text)}.inst.on .inst-pitch{opacity:.7}.tabs{display:flex;gap:8px;margin:8px 0 22px;flex-wrap:wrap}.tab{display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);padding:11px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;font-weight:600;transition:all .15s;flex:1 1 auto;justify-content:center}.tab:hover{color:var(--text);border-color:var(--line-2)}.tab.on{color:var(--text);border-color:var(--brass);background:linear-gradient(180deg,#e6ad5324,#e6ad530d);box-shadow:inset 0 0 0 1px #e6ad5340}.tab-icon{font-size:15px}.mode-head h2{margin:0 0 4px;font-size:21px;letter-spacing:-.01em}.mode-head p{margin:0 0 18px;color:var(--muted);font-size:14px;max-width:64ch}.notepicker{display:flex;gap:4px;overflow-x:auto;padding:6px 2px 12px;scrollbar-width:thin;scroll-snap-type:x proximity}.np-note{flex:0 0 auto;width:44px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-3);border:1px solid var(--line);color:var(--text);border-radius:9px;cursor:pointer;transition:all .12s;scroll-snap-align:center}.np-note.black{background:#11161c;color:var(--muted)}.np-note:hover{border-color:var(--line-2)}.np-note.on{background:linear-gradient(180deg,var(--brass-bright),var(--brass));color:var(--press-text);border-color:var(--brass-bright)}.np-name{font-size:15px;font-weight:700}.np-oct{font-size:10px;opacity:.7}.fcard{display:grid;grid-template-columns:230px 1fr;gap:24px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-top:12px;box-shadow:var(--shadow)}.fcard-info{display:flex;flex-direction:column;gap:16px}.fcard-names{display:flex;align-items:center;gap:18px}.name-block{display:flex;flex-direction:column}.name-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)}.name-big{font-size:40px;font-weight:800;line-height:1;letter-spacing:-.02em}.name-oct{font-size:13px;color:var(--muted)}.name-arrow{font-size:22px;color:var(--brass)}.name-block:last-of-type .name-big{color:var(--teal)}.play-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--brass-bright),var(--brass-deep));color:var(--press-text);border:none;border-radius:999px;padding:11px 20px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px #e6ad5340;transition:transform .1s,box-shadow .15s}.play-btn:hover{transform:translateY(-1px)}.play-btn:active{transform:translateY(0)}.hz{font-size:11px;font-weight:600;opacity:.6}.fcard-tip{margin:0;color:var(--muted);font-size:14px;line-height:1.5}.alt-row{display:flex;flex-direction:column;gap:8px}.alt-label,.ss-label,.kp-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)}.alt-btns{display:flex;gap:8px;flex-wrap:wrap}.alt{background:var(--bg-3);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:all .12s}.alt:hover{border-color:var(--line-2)}.alt.on{background:var(--brass);color:var(--press-text);border-color:var(--brass)}.keymap{display:flex;flex-direction:column;align-items:center;gap:8px}.keymap-svg{width:100%;max-width:220px;height:auto}.km-body{fill:#ffffff06;stroke:var(--line);stroke-width:1.5}.km-link{stroke:var(--line);stroke-width:2}.km-key circle{fill:#0c1015;stroke:var(--line-2);stroke-width:2;transition:fill .12s,stroke .12s}.km-key text{fill:var(--muted);font-weight:700;font-size:12px;font-family:inherit}.km-key .km-label.sm{font-size:8.5px}.km-key.on circle{fill:var(--brass);stroke:var(--brass-bright)}.km-key.on text{fill:var(--press-text)}.km-section{fill:var(--muted-2);font-size:8px;letter-spacing:.04em}.keymap-legend{display:flex;gap:14px;font-size:11px;color:var(--muted)}.keymap-legend .lg{display:inline-flex;align-items:center;gap:6px}.keymap-legend .dot{width:11px;height:11px;border-radius:50%;background:#0c1015;border:2px solid var(--line-2);display:inline-block}.keymap-legend .dot.on{background:var(--brass);border-color:var(--brass-bright)}.keymap-caption{margin:2px 0 0;font-size:12px;color:var(--muted)}.seg{display:inline-flex;gap:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:16px;flex-wrap:wrap}.seg.sub{margin:6px 0 14px}.seg-btn{border:none;background:transparent;color:var(--muted);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:all .12s}.seg-btn:hover{color:var(--text)}.seg-btn.on{background:var(--bg-4);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}.keypicker{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}.kp-row{display:flex;gap:6px;flex-wrap:wrap}.kp-key{display:flex;flex-direction:column;align-items:center;min-width:52px;background:var(--bg-3);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 10px;cursor:pointer;transition:all .12s;line-height:1.2}.kp-key:hover{border-color:var(--line-2)}.kp-key.on{background:linear-gradient(180deg,#e6ad532e,#e6ad530f);border-color:var(--brass)}.kp-name{font-size:15px;font-weight:700}.kp-badge{font-size:10px;color:var(--muted)}.kp-key.on .kp-badge{color:var(--brass-bright)}.key-summary{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:18px}.ks-block{display:flex;flex-direction:column}.ks-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)}.ks-key{font-size:24px;font-weight:800}.ks-sig{font-size:14px;color:var(--brass)}.ks-note{font-size:13px;color:var(--muted);max-width:40ch}.ks-note strong{color:var(--teal)}.scale-strip{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}.ss-notes{display:flex;gap:6px;flex-wrap:wrap}.ss-note{background:var(--bg-3);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:10px 14px;font-size:16px;font-weight:700;cursor:pointer;transition:all .12s}.ss-note:hover{border-color:var(--brass)}.ss-note.static{cursor:default}.ss-note.static:hover{border-color:var(--line)}.scale-fing{display:flex;flex-direction:column;gap:16px;margin-bottom:26px}.sf-staff{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;overflow-x:auto}.staff-svg{width:100%;min-width:360px;max-width:560px;height:auto;display:block;margin:0 auto}.staff-line{stroke:var(--line-2);stroke-width:1.2}.staff-line.faint{stroke:var(--line);stroke-width:1}.staff-ledger{stroke:var(--line-2);stroke-width:1.2}.staff-clef{fill:var(--text);font-size:52px;dominant-baseline:alphabetic}.staff-acc{fill:var(--brass);font-size:17px;font-weight:700;text-anchor:middle}.staff-note{cursor:pointer}.staff-hit{fill:transparent}.staff-head{fill:var(--text);stroke:none;transition:fill .12s}.staff-stem{stroke:var(--text);stroke-width:1.6;transition:stroke .12s}.staff-note:hover .staff-head,.staff-note:hover .staff-stem{fill:var(--brass-bright);stroke:var(--brass-bright)}.staff-note.on .staff-head{fill:var(--brass)}.staff-note.on .staff-stem{stroke:var(--brass)}.staff-note.on .staff-acc{fill:var(--brass-bright)}.sf-notes{display:flex;gap:8px;flex-wrap:wrap}.sf-note{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;background:var(--bg-3);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 12px;cursor:pointer;transition:all .12s}.sf-note:hover{border-color:var(--brass)}.sf-note.on{background:linear-gradient(180deg,#e6ad532e,#e6ad530f);border-color:var(--brass)}.sf-deg{font-size:10px;font-weight:700;color:var(--muted-2)}.sf-note.on .sf-deg{color:var(--brass-bright)}.sf-name{font-size:18px;font-weight:800}.sf-diagram{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.sf-diagram .keymap-svg{max-width:200px}.sf-tip{margin:0;font-size:13px;color:var(--muted);text-align:center;max-width:44ch;line-height:1.45}.acc-head{margin:6px 0 2px;font-size:17px}.acc-sub{margin:0 0 16px;color:var(--muted);font-size:13px}.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.acc-tile{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px}.acc-tile-head{display:flex;align-items:center;justify-content:space-between}.acc-name{font-size:22px;font-weight:800;display:inline-flex;align-items:baseline;gap:7px}.acc-tag{font-size:11px;font-weight:700;color:var(--press-text);background:var(--brass);border-radius:6px;padding:2px 6px;line-height:1.2}.acc-play{background:var(--bg-4);border:1px solid var(--line);color:var(--brass);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:12px;transition:all .12s}.acc-play:hover{border-color:var(--brass)}.acc-tile .keymap-svg{max-width:150px}.acc-tile .keymap-legend{display:none}.acc-tip{margin:0;font-size:12px;color:var(--muted);line-height:1.45}.walker{display:grid;grid-template-columns:230px 1fr;gap:26px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.walker-side{display:flex;flex-direction:column;gap:10px}.walker-count{font-size:12px;color:var(--muted-2);letter-spacing:.05em}.walker-name{font-size:64px;font-weight:800;line-height:.95;letter-spacing:-.03em}.wn-oct{font-size:26px;color:var(--muted);font-weight:600;margin-left:4px}.walker-concert{font-size:15px;color:var(--teal)}.walker-flabel{font-size:13px;color:var(--muted)}.walker-controls{display:flex;align-items:center;gap:10px;margin-top:8px}.wc-btn{background:var(--bg-3);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px 16px;font-size:18px;cursor:pointer;transition:all .12s}.wc-btn:hover:not(:disabled){border-color:var(--brass)}.wc-btn:disabled{opacity:.35;cursor:default}.wc-btn.play{background:linear-gradient(180deg,var(--brass-bright),var(--brass-deep));color:var(--press-text);border:none;font-size:15px;font-weight:700;padding:12px 22px}.walker-slider{width:100%;margin-top:6px;accent-color:var(--brass)}.seg.three{width:100%;justify-content:space-between;flex-wrap:nowrap}.seg.three .seg-btn{flex:1 1 0;white-space:nowrap}.tool{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.tool-hint{margin:0 0 16px;color:var(--muted);font-size:14px}.transpose-result{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:20px 0}.tr-col{display:flex;flex-direction:column;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:16px 22px;min-width:150px}.tr-col.accent{border-color:var(--brass);background:linear-gradient(180deg,#e6ad531a,#e6ad5308)}.tr-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)}.tr-key{font-size:26px;font-weight:800}.tr-sig{font-size:14px;color:var(--brass)}.tr-arrow{display:flex;flex-direction:column;align-items:center;color:var(--muted);font-size:12px}.tr-arrow-mark{font-size:26px;color:var(--brass)}.counter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}.cnt{width:44px;height:44px;border-radius:10px;background:var(--bg-3);border:1px solid var(--line);color:var(--text);font-size:16px;font-weight:700;cursor:pointer;transition:all .12s}.cnt:hover{border-color:var(--line-2)}.cnt.on{background:var(--brass);color:var(--press-text);border-color:var(--brass)}.sig-result{text-align:center;padding:18px;background:var(--bg-3);border-radius:var(--radius);border:1px solid var(--line)}.sr-key{font-size:30px;font-weight:800}.sr-detail{font-size:14px;color:var(--brass);margin-top:4px}.sr-scale{font-size:15px;color:var(--muted);margin-top:10px;letter-spacing:.02em}.pc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px}.pc{padding:14px 0;border-radius:10px;background:var(--bg-3);border:1px solid var(--line);color:var(--text);font-size:16px;font-weight:700;cursor:pointer;transition:all .12s}.pc:hover{border-color:var(--line-2)}.pc.on{background:linear-gradient(180deg,var(--brass-bright),var(--brass));color:var(--press-text);border-color:var(--brass-bright)}.clear-btn{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:7px 16px;font-size:13px;cursor:pointer;margin-bottom:16px}.clear-btn:hover{border-color:var(--brass);color:var(--text)}.empty-hint{color:var(--muted-2);font-size:14px;font-style:italic}.guesses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.guess{display:grid;grid-template-columns:90px 1fr auto auto;align-items:center;gap:12px;background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:12px 16px}.guess.top{border-color:var(--brass);background:linear-gradient(90deg,rgba(230,173,83,.1),transparent)}.g-rank{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2)}.guess.top .g-rank{color:var(--brass-bright)}.g-key{font-size:18px;font-weight:700}.g-sig{font-size:14px;color:var(--brass)}.g-fit{font-size:12px;color:var(--muted);text-align:right}.app-footer{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted-2);font-size:12px;text-align:center}@media (max-width: 720px){.fcard,.walker{grid-template-columns:1fr}.fcard-diagram,.walker-diagram{display:flex;justify-content:center}.name-big{font-size:34px}.walker-name{font-size:52px}.tab-label{display:none}.tab{flex:1 1 0}.tab-icon{font-size:18px}.pc-grid{grid-template-columns:repeat(4,1fr)}.guess{grid-template-columns:1fr auto;row-gap:4px}.g-fit{grid-column:1 / -1;text-align:left}.app-header{gap:14px;padding-bottom:14px}.header-controls{width:100%;justify-content:space-between;gap:10px}.inst-picker{flex:1 1 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.inst-picker::-webkit-scrollbar{display:none}.inst,.spelling-toggle{flex:0 0 auto}.seg{display:flex;width:100%}.seg:not(.three) .seg-btn{flex:1 1 0}.seg.three{flex-direction:column;border-radius:16px}.seg.three .seg-btn{width:100%;flex:1 1 auto;border-radius:12px;padding:12px 14px;white-space:normal}.transpose-result{flex-direction:column;align-items:stretch;gap:12px;margin:16px 0}.tr-col{min-width:0}.tr-arrow{flex-direction:row;justify-content:center;gap:8px}.tr-arrow-mark{transform:rotate(90deg);display:inline-block}}@media (max-width: 420px){.brand h1{font-size:23px}.name-big{font-size:30px}.walker-name{font-size:46px}.acc-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}.pc-grid{grid-template-columns:repeat(3,1fr)}}