.phase-input{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;align-items:end;margin-top:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.phase-keep-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px}.phase-keep-row label{display:flex;align-items:center;gap:8px;color:var(--ink);cursor:pointer}.phase-keep-row input{width:auto;height:auto;accent-color:var(--accent)}.phase-keep-row button{padding:4px 9px;border:1px solid var(--line-dark);background:var(--paper);color:var(--muted);font:12px var(--sans);cursor:pointer}.phase-keep-row button:hover,.phase-keep-row button:focus-visible{color:var(--ink);border-color:var(--ink);outline:0}
.phase-input-main{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;align-items:center;gap:10px}.phase-input label{color:var(--muted);font-size:13px}.phase-input input,.phase-input select{height:40px;border:1px solid var(--line-dark);background:var(--paper);color:var(--ink);padding:0 12px}.phase-input-main input{font-size:16px}.phase-input .button{height:40px}.phase-axis-pair{display:grid;grid-template-columns:repeat(2,minmax(102px,1fr));gap:8px}.phase-axis-pair label{display:grid;grid-template-columns:auto 66px;align-items:center;gap:7px}.phase-axis-pair select{width:66px}.phase-input .error-text{grid-column:1/-1;min-height:0;margin:0}
.phase-family-config{grid-column:1/-1;display:flex;align-items:end;gap:12px;padding-top:0}.phase-family-config>label,.phase-custom-families label{display:grid;gap:4px}.phase-family-config select{min-width:170px}.phase-custom-families{display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:10px;flex:1}.phase-custom-families[hidden]{display:none}.phase-custom-families input{width:100%;font-family:var(--num)}
.phase-stages{display:grid;grid-template-columns:repeat(3,1fr);max-width:680px;margin:28px auto 0;border:1px solid var(--line-dark)}.phase-stages button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border:0;border-right:1px solid var(--line-dark);background:var(--paper);color:var(--muted);font:inherit;cursor:pointer}.phase-stages button:last-child{border-right:0}.phase-stages button b{display:grid;place-items:center;width:21px;height:21px;border:1px solid currentColor;border-radius:50%;font:600 11px var(--num)}.phase-stages button[aria-pressed="true"]{background:var(--accent-dark);color:#fff}.phase-stages button:hover,.phase-stages button:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--accent)}
.phase-visual{margin-top:22px;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line);padding:18px 0 12px}.phase-visual-head{display:flex;justify-content:space-between;align-items:start;gap:20px}.phase-visual-head h2{margin:0;font:600 21px var(--font-cjk)}:lang(en) .phase-visual-head h2{font-family:var(--font-display)}.phase-visual-head p{margin:6px 0 0;color:var(--muted);font-size:13px}.phase-triad-toggle{display:none;align-items:center;gap:7px;color:var(--muted);font-size:13px;white-space:nowrap}.phase-triad-toggle.visible{display:flex}.phase-triad-toggle input{accent-color:var(--accent)}
.phase-visual-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}.phase-zoom-buttons{display:flex}.phase-zoom-buttons button{min-width:38px;height:36px;padding:0 10px;border:1px solid var(--line-dark);border-right:0;background:var(--paper);color:var(--ink);font:14px var(--sans);cursor:pointer;touch-action:manipulation}.phase-zoom-buttons button:last-child{border-right:1px solid var(--line-dark)}
.phase-visual svg{display:block;width:100%;height:auto;min-height:410px;overflow:visible;touch-action:none;user-select:none;cursor:default}.phase-visual svg.is-draggable{cursor:grab}.phase-visual svg.is-dragging{cursor:grabbing}.phase-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;min-height:24px;margin-top:10px;color:var(--muted);font-size:12px}.phase-legend span{display:inline-flex;align-items:center;gap:7px}.phase-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--accent)}.phase-legend i.minor{background:var(--coral)}.phase-legend i.current{background:#fff;border:3px solid #111}.phase-legend i.edge,.phase-legend i.path{width:20px;height:2px;border-radius:0;background:#9099a7}.phase-legend i.path{height:3px;background:var(--accent)}.phase-legend i.cluster{display:grid;place-items:center;width:17px;height:17px;background:var(--paper);border:2px solid var(--ink);font:600 9px var(--num)}
.phase-values{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:0;margin-top:28px;border:1px solid var(--line-dark)}.phase-value{min-height:112px;padding:17px 20px;border-right:1px solid var(--line-dark)}.phase-value:last-child{border-right:0}.phase-value h3{margin:0 0 11px;font:600 13px var(--sans);color:var(--muted)}.phase-value strong{font:600 17px var(--num);color:var(--ink)}.phase-value dl{display:grid;grid-template-columns:auto 1fr;gap:7px 13px;margin:12px 0 0;font-size:12px}.phase-value dt{color:var(--muted)}.phase-value dd{margin:0;font-family:var(--num)}.phase-coordinate strong{color:var(--accent-dark)}
.phase-grid{stroke:var(--line);stroke-width:1}.phase-axis{stroke:var(--line-dark);stroke-width:1.2}.phase-label{fill:var(--muted);font:11px var(--num)}.phase-set-label{fill:var(--muted);font:13px var(--sans);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}.phase-set-label.phase-music-label{font-family:"MusGlyphs",var(--sans)}.phase-axis-title{fill:var(--ink);font:600 13px var(--sans)}.phase-note{fill:var(--ink);font:600 13px "MusGlyphs",var(--sans)}.phase-muted{fill:var(--muted);font:12px var(--sans)}.phase-vector-unit{stroke:var(--line-dark);stroke-width:1.25}.phase-vector-sum{stroke:var(--accent);stroke-width:3}.phase-vector-dot{fill:var(--accent)}.phase-angle{fill:none;stroke:var(--coral);stroke-width:2}.phase-triad-edge{stroke:#9aa3b0;stroke-width:1;opacity:.52}.phase-triad-major{fill:var(--accent);stroke:var(--paper);stroke-width:1.5}.phase-triad-minor{fill:var(--coral);stroke:var(--paper);stroke-width:1.5}.phase-selected{fill:#fff;stroke:#111;stroke-width:3}.phase-selected-halo{fill:none;stroke:var(--accent);stroke-width:2;opacity:.5}.phase-torus-line{fill:none;stroke:var(--line-dark);stroke-width:1;opacity:.5}.phase-torus-back{opacity:.18}.phase-seam{stroke:var(--accent);stroke-width:2;stroke-dasharray:5 5;opacity:.7}
.phase-seam{fill:none}.phase-torus-edge{fill:none;stroke:#858f9d;stroke-width:1.35;opacity:.62}
.phase-cluster{fill:var(--paper);stroke:var(--ink);stroke-width:2}.phase-cluster-count{fill:var(--ink);font:600 9px var(--num);text-anchor:middle;dominant-baseline:central;pointer-events:none}.phase-path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.phase-path-point{fill:var(--paper);stroke:var(--accent);stroke-width:2}.phase-path-index{fill:var(--accent-dark);font:600 10px var(--num);paint-order:stroke;stroke:var(--paper);stroke-width:3}.phase-collision-note{fill:var(--coral);font:12px var(--sans)}
@media(max-width:780px){.phase-input{grid-template-columns:1fr}.phase-axis-pair{justify-self:start}.phase-family-config{align-items:stretch;flex-direction:column}.phase-values{grid-template-columns:1fr}.phase-value{border-right:0;border-bottom:1px solid var(--line-dark)}.phase-value:last-child{border-bottom:0}.phase-visual svg{min-height:330px}.phase-stages button span{font-size:12px}}
@media(max-width:520px){.phase-input-main{grid-template-columns:1fr}.phase-input-main label{margin-bottom:-4px}.phase-input-main .button{width:100%}.phase-axis-pair{width:100%;grid-template-columns:1fr 1fr}.phase-axis-pair label{grid-template-columns:1fr}.phase-axis-pair select{width:100%}.phase-custom-families{grid-template-columns:1fr}.phase-stages{grid-template-columns:1fr}.phase-stages button{border-right:0;border-bottom:1px solid var(--line-dark)}.phase-stages button:last-child{border-bottom:0}.phase-visual-head{flex-direction:column}.phase-visual-controls{width:100%;justify-content:space-between}.phase-visual svg{min-height:280px}}