.chord-stage{gap:18px;padding-top:var(--space-3);--key-w: #E9E7E1;--key-w-hover: #FFFFFF;--key-b: #1A1917;--key-b-hover: #2E2D28;--key-stroke: #121212;--key-flash-w: #FFFFFF;--key-flash-b: #9AF0DA;--key-label: #121212}:root[data-theme=light] .chord-stage{--key-w: #FFFFFF;--key-w-hover: #F1EFEA;--key-b: #2A2925;--key-b-hover: #45433C;--key-stroke: #B9B5AA;--key-flash-w: #9AF0DA}.chord-head{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:var(--space-2);width:100%;max-width:560px}.chord-dice.is-roll svg{animation:chord-roll .5s var(--ease)}@keyframes chord-roll{0%{transform:rotate(0)}60%{transform:rotate(250deg) scale(1.15)}to{transform:rotate(360deg)}}.chord-title{text-align:center}.chord-title p{margin:0}.chord-title__symbol{font-family:var(--font-heading);font-weight:700;font-size:clamp(3.6rem,11vw,6rem);line-height:.95;letter-spacing:-.02em}.chord-title__name{margin-top:10px!important;font-weight:700;color:var(--color-ink-soft);font-size:var(--fs-md);min-height:1.5em}.chord-notes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:83px}.chord-note{display:flex;flex-direction:column;align-items:center;min-width:68px;padding:8px 10px 10px;border-radius:var(--radius-media);background:var(--color-surface-2);border:1px solid var(--color-hairline)}.chord-note__deg{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;color:var(--color-gray)}.chord-note__lat{font-family:var(--font-heading);font-weight:700;font-size:1.4rem;line-height:1.15}.chord-note__en{font-size:var(--fs-xs);font-weight:700;color:var(--color-gray)}.chord-note.is-root{border-color:var(--color-accent);background:var(--color-accent-dim)}.chord-note.is-root .chord-note__lat,.chord-note.is-root .chord-note__deg{color:var(--color-accent-ink)}.chord-note{box-shadow:var(--shadow-sm);transition:transform .15s var(--ease),background .15s ease}.chord-note.is-flash{transform:translateY(-4px);background:var(--color-surface-3);transition:none}.chord-note.is-root.is-flash{background:var(--color-accent-glow)}.chord-formula{margin:-4px 0 0;display:flex;align-items:center;justify-content:center;gap:10px;font-size:var(--fs-sm);color:var(--color-gray);min-height:22px}#formula{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:2px 16px}.chord-formula b{color:var(--color-ink-soft);margin-right:4px}.chord-piano{width:100%;max-width:620px;aspect-ratio:420 / 150}.chord-piano svg{width:100%;height:100%;touch-action:manipulation;user-select:none;-webkit-user-select:none}.chord-piano .key{cursor:pointer}.chord-piano .key--white rect{fill:var(--key-w);stroke:var(--key-stroke);stroke-width:1.5;transition:fill .12s ease}.chord-piano .key--black rect{fill:var(--key-b);stroke:var(--key-stroke);stroke-width:1;transition:fill .12s ease}.chord-piano .key--white:hover rect{fill:var(--key-w-hover)}.chord-piano .key--black:hover rect{fill:var(--key-b-hover)}.chord-piano .key--white.is-chord rect{fill:#7fe6cd}.chord-piano .key--white.is-root rect{fill:var(--color-accent)}.chord-piano .key--black.is-chord rect{fill:#0e7f63}.chord-piano .key--black.is-root rect{fill:var(--color-accent)}.chord-piano .key text{font:700 12px var(--font-body);fill:var(--key-label);text-anchor:middle;pointer-events:none}.chord-piano .key circle{fill:#f2f1ed;pointer-events:none}.chord-piano .key.is-flash rect{fill:var(--key-flash-w)!important;transition:none}.chord-piano .key--black.is-flash rect{fill:var(--key-flash-b)!important}.chord-roots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.chord-root{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;padding:4px 2px;border-radius:var(--radius-media);border:1px solid var(--color-hairline);background:var(--color-surface-2);color:var(--color-ink);touch-action:manipulation;transition:border-color .15s ease,background .15s ease,color .15s ease}.chord-root{box-shadow:var(--shadow-sm)}.chord-root:hover{border-color:var(--color-accent)}.chord-root:active{transform:scale(.96)}.chord-root__lat{font-family:var(--font-heading);font-weight:700;font-size:1.1rem;line-height:1.1;white-space:nowrap}.chord-root__alt{font-size:var(--fs-xs);font-weight:700;color:var(--color-gray);white-space:nowrap}.chord-root[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent);box-shadow:var(--shadow-glow)}.chord-root[aria-pressed=true] .chord-root__alt{color:inherit;opacity:.75}.chord-group__label{margin:0;font-size:var(--fs-xs);font-weight:700;color:var(--color-gray)}.panel>.seg+.chord-group__label{margin-top:14px}.panel>.chord-group__label+.seg{margin-top:8px}#mode button,#inv button{padding:0 8px}@media (max-width: 600px){.chord-stage{gap:12px;padding-top:14px}.chord-head{grid-template-columns:48px minmax(0,1fr) 64px;gap:8px}.chord-dice.icon-btn--lg{width:48px;height:48px}.chord-stage .play{width:64px;height:64px}.chord-stage .play svg{width:26px;height:26px}.chord-title__symbol{font-size:clamp(2.6rem,13vw,3.4rem)}.chord-title__name{margin-top:4px!important;font-size:.82rem;line-height:1.3}.chord-notes{gap:6px;min-height:62px}.chord-note{min-width:52px;padding:4px 6px 6px}.chord-note__deg{font-size:var(--fs-xs)}.chord-note__lat{font-size:1.1rem}.chord-note__en{font-size:var(--fs-xs)}.chord-formula{font-size:var(--fs-xs);margin:0}.chord-root{min-height:46px}.chord-root__lat{font-size:1rem}.chord-roots{gap:7px}.chord-title__name{min-height:2.6em}}.acc{font-family:Segoe UI Symbol,Apple Symbols,Noto Music,"Noto Sans Symbols 2",DejaVu Sans,sans-serif;font-weight:400;font-size:.72em;vertical-align:.3em;line-height:0;margin-left:.04em;letter-spacing:0}svg .acc{font-size:.9em}.chord-inv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.chord-title__symbol .acc{font-size:.55em;vertical-align:.55em}.chord-stage:fullscreen,.chord-stage.is-stage-mode{padding-top:max(68px,env(safe-area-inset-top))}.chord-stage:fullscreen .chord-head,.chord-stage.is-stage-mode .chord-head{max-width:900px}.chord-stage:fullscreen .chord-title__symbol,.chord-stage.is-stage-mode .chord-title__symbol{font-size:clamp(5rem,16vw,11rem)}.chord-stage:fullscreen .chord-title__name,.chord-stage.is-stage-mode .chord-title__name{font-size:1.4rem}.chord-stage:fullscreen .chord-piano,.chord-stage.is-stage-mode .chord-piano{max-width:min(1100px,92vw)}.chord-stage:fullscreen .chord-note__lat,.chord-stage.is-stage-mode .chord-note__lat{font-size:2rem}.chord-midi .btn{justify-self:start}.chord-stage{--key-stroke: #121212}:root[data-theme=light] .chord-stage{--key-stroke: #77756E}.chord-piano .key--white.is-chord rect,.chord-piano .key--black.is-chord rect{fill:var(--blue)}.chord-piano .key--white.is-root rect,.chord-piano .key--black.is-root rect{fill:var(--plum-fill)}.chord-piano .key.is-chord text{fill:#0e0e0d}.chord-piano .key.is-root text{fill:#fff}.chord-piano .key.is-flash rect,.chord-piano .key--black.is-flash rect{fill:var(--orange)!important}.chord-piano .key.is-flash text{fill:#121212}@media (hover: hover){.chord-piano .key--white:hover rect{stroke:var(--color-ink);stroke-width:2}}.ptl-ico{display:inline-block;width:16px;height:16px;margin:0 6px 0 0;vertical-align:-3px;color:var(--g-ink, var(--color-accent-ink));flex:0 0 auto}[role=tab] .ptl-ico{margin-right:6px}[role=tab][aria-selected=true] .ptl-ico{color:inherit}@media (max-width: 600px){[role=tab] .ptl-ico{display:none}}
