:root{color-scheme:light dark;--paper: #fbf3e8;--card: #fffaf1;--ink: #2c1a12;--muted: #7d5a45;--line: #dfc6ab;--ring-major: #f3e2cd;--ring-minor: #ecd6ba;--ring-dim: #e4c8a7;--ring-sign: #dbba95;--tonic: #b8371a;--tonic-ink: #fff4ea;--near: #e8883c;--lit: #fbe6cd;--second: #f0d3d3;--second-line: #a95f60;--focus: #8a3b12;--radius: 14px}@media (prefers-color-scheme: dark){:root{--paper: #180f0b;--card: #241811;--ink: #f2e5d6;--muted: #ab8b74;--line: #462f22;--ring-major: #38251a;--ring-minor: #2f1e15;--ring-dim: #281911;--ring-sign: #21140e;--tonic: #e0662f;--tonic-ink: #1d0f08;--near: #a65c2c;--lit: #3d271b;--second: #43242a;--second-line: #c78a8c;--focus: #f0a878}}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none;-webkit-text-size-adjust:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.app{min-height:100%;display:flex;flex-direction:column;gap:9px;padding:max(10px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));max-width:1040px;margin:0 auto;width:100%}.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.brand{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:.02em}.switches{display:flex;gap:8px}.seg{display:flex;margin:0;padding:2px;border:1px solid var(--line);border-radius:999px;background:var(--card)}.seg-opt{padding:4px 12px;border-radius:999px;font-size:.82rem;font-weight:500;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap;transition:background .14s ease,color .14s ease}.seg-opt.is-on{background:var(--tonic);color:var(--tonic-ink)}.seg-opt:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}.stage{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1}.wheel-wrap{position:relative;width:min(100%,560px,max(210px,calc(100vh - 455px)));width:min(100%,560px,max(210px,calc(100dvh - 455px)));aspect-ratio:1;flex-shrink:0;container-type:inline-size}.wheel{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:grab;border-radius:50%}.wheel:active{cursor:grabbing}.wheel:focus{outline:none}.wheel:focus-visible{outline:2px solid var(--focus);outline-offset:4px}.wheel-spin{transform-box:view-box;transform-origin:50% 50%}.label{transform-box:fill-box;transform-origin:50% 50%}.wheel-spin.is-settling,.label.is-settling{transition:transform .34s cubic-bezier(.22,.68,.32,1)}@media (prefers-reduced-motion: reduce){.wheel-spin.is-settling,.label.is-settling{transition-duration:1ms}}.sector{stroke:var(--paper);stroke-width:.6;transition:fill .2s ease}.sector.major{fill:var(--ring-major)}.sector.minor{fill:var(--ring-minor)}.sector.dim{fill:var(--ring-dim)}.sector.sign{fill:var(--ring-sign)}.sector.is-second{fill:var(--second)}.sector.role-lit{fill:var(--lit)}.sector.role-sub,.sector.role-dom{fill:var(--near)}.sector.role-tonic{fill:var(--tonic)}text{text-anchor:middle;dominant-baseline:central;pointer-events:none;fill:var(--ink);font-family:inherit}.t-major{font-size:11.2px;font-weight:600}.t-minor{font-size:8.3px;font-weight:500}.t-dim{font-size:6.3px;font-weight:500;fill:var(--muted)}.t-sign{font-size:5.4px;font-weight:500;fill:var(--muted)}.t-alt{font-size:6px;font-weight:400;fill:var(--muted)}.lbl-tonic .t-major,.lbl-tonic .t-minor,.lbl-tonic .t-dim{fill:var(--tonic-ink)}.lbl-tonic .t-alt{fill:var(--tonic-ink);opacity:.75}.win-frame{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;opacity:.9}.win-second{fill:none;stroke:var(--second-line);stroke-width:1;stroke-dasharray:3 2.5}.centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center;padding:0 30%}.centre-key{font-size:clamp(1.15rem,6.2cqw,1.7rem);font-weight:650;letter-spacing:-.01em;line-height:1.1}.centre-alt{font-size:.68rem;color:var(--muted);line-height:1.25}.centre-alt-tag{opacity:.7}.centre-sig{margin-top:4px;display:flex;flex-direction:column;align-items:center;line-height:1.15}.centre-sig-glyph{font-size:.95rem;font-weight:600}.centre-sig-word{font-size:.62rem;color:var(--muted)}.detail{width:100%;display:flex;flex-direction:column;gap:10px}.block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:9px 11px}.block-h{margin:0 0 7px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}.chords,.scale{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}.chords::-webkit-scrollbar,.scale::-webkit-scrollbar{display:none}.chip{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 3px;border-radius:10px;background:var(--lit)}.chip-roman{font-size:.62rem;color:var(--muted);font-weight:600;letter-spacing:.04em}.chip-name{font-size:.95rem;font-weight:600;white-space:nowrap}.chip-second{background:var(--second)}.block-sub{margin:9px 0 6px;font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.chords-second{display:grid;grid-template-columns:repeat(7,1fr);overflow:visible}.block-note{margin:5px 0 0;font-size:.64rem;color:var(--muted);line-height:1.3}.step{flex:1 1 0;min-width:0;text-align:center;padding:5px 4px;border-radius:8px;background:var(--lit);font-size:.92rem;font-weight:500}.foot{text-align:center}.foot-note{margin:0;font-size:.72rem;color:var(--muted)}@media (min-width: 860px) and (min-height: 560px){.stage{flex-direction:row;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}.wheel-wrap{width:min(52vw,72vh,620px)}.detail{width:min(340px,34vw)}.throw{order:3;width:100%}}.update{position:fixed;left:50%;transform:translate(-50%);bottom:max(12px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--ink);color:var(--paper);box-shadow:0 6px 24px #00000038;font-size:.82rem;max-width:calc(100vw - 24px)}.update-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.update-go{flex:none;border:0;border-radius:999px;padding:5px 13px;background:var(--tonic);color:var(--tonic-ink);font:inherit;font-weight:600;cursor:pointer}.update-go:focus-visible{outline:2px solid var(--paper);outline-offset:2px}.build{margin:4px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:.68rem;color:var(--muted)}.build-stamp{border:0;background:none;padding:2px 6px;border-radius:6px;font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer}.build-stamp:hover{background:var(--lit)}.build-stamp:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.build-note{opacity:.85}.build-offline{padding:1px 8px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;letter-spacing:.03em}.wheel-spin.is-spinning,.label.is-spinning{transition-property:transform;transition-timing-function:cubic-bezier(.15,.72,.12,1)}.throw{display:flex;flex-direction:column;align-items:center;gap:4px}.throw-said{margin:0;min-height:1.25em;font-size:.76rem;color:var(--muted);text-align:center}