/* DMT presentation only. Canonical data, geometry and interaction remain frozen. */
.dmt{border-top:1px solid var(--line);background:#000}
/* Cancel the document’s 1rem anchor inset for the full-height introduction. */
#dmt{padding-top:0;scroll-margin-top:-1rem}
.dmt__header{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;padding:3rem 0;text-align:center;margin:0 auto}
.dmt__badge{width:min(48vw,220px);margin:0 auto 1.5rem;flex-shrink:0}
.dmt__identity{width:100%;text-align:center}
/* Georgia on macOS lacks lining alternates; this existing serif uses lining digits. */
.dmt__identity h2{font-family:'Times New Roman',Times,serif;font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"lnum" 1,"onum" 0;font-size:clamp(1.375rem,2vw,1.625rem);line-height:1.25;letter-spacing:-.015em;color:#f6f4f8}
.dmt__subtitle{margin-top:.5rem;font-size:.875rem;line-height:1.5;color:#c9c1d6}
.dmt__description{width:100%;max-width:50rem;margin-top:1.75rem;text-align:left;color:#e9e6ef;font-size:.9375rem;line-height:1.65}
.dmt__description p+p{margin-top:1.15em}
.dmt__header>.dmt__references:empty{display:none}
.dmt__references{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 4rem;margin-top:2.5rem;font-variant-numeric:tabular-nums}
.dmt__references p{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.125rem,2vw,1.8rem);color:#fff;white-space:nowrap}
.dmt__instrument[hidden]{display:none}
.dmt__instrument{max-width:1500px;margin:auto}
.dmt__toolbar{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.75rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dmt__toolbar .eyebrow{color:var(--accent);font-size:.875rem}
.dmt__toolbar p{margin-top:.65rem;font-size:.875rem}
.dmt__reset{flex-shrink:0;display:flex;align-items:center;gap:1rem;min-height:44px;padding:.5rem 0 .5rem 1rem;color:#eee5f6;font-size:.875rem;cursor:pointer}
.dmt__reset span{color:var(--accent);font-size:1.3rem}
.dmt__reset:hover{color:var(--accent)}
.dmt__workspace{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:2rem;align-items:start}
.dmt__figure{min-width:0;padding:1rem 0 2rem}
#dmt-map{display:block;width:100%;height:auto;overflow:visible}
.dmt__figure figcaption{max-width:38rem;margin:0 auto;text-align:center;color:var(--muted);font-size:.8125rem;line-height:1.6}
.dmt__scaffold{fill:none;stroke:#9182ae;stroke-width:1;opacity:.76;vector-effect:non-scaling-stroke;pointer-events:none}
.dmt__edge{fill:none;stroke:var(--interval);stroke-width:1.4;opacity:.28;vector-effect:non-scaling-stroke;transition:opacity .22s ease,stroke-width .22s ease,filter .22s ease;pointer-events:none}
.dmt__edge.is-active{opacity:1;stroke-width:2.3;filter:drop-shadow(0 0 2px var(--interval)) drop-shadow(0 0 5px #673cff70)}
.dmt__edge.is-dim{opacity:.025}
.dmt__node{cursor:pointer;outline:none;transition:opacity .22s ease}
.dmt__node .dmt__node-hit{fill:transparent;stroke:none}
.dmt__node .dmt__node-disc{fill:#0b0713;stroke:#a88cde;stroke-width:1.2;vector-effect:non-scaling-stroke}
.dmt__node .dmt__node-core{fill:#f3edff}
/* Emphasis changes paint only: preserve all node and label geometry. */
.dmt__node .dmt__node-disc,.dmt__node .dmt__node-core,.dmt__node .dmt__node-hit{transition:fill .22s ease,stroke .22s ease,stroke-width .22s ease,filter .22s ease}
.dmt__node .dmt__node-anchor{font-size:12px;fill:#c2b6d9;stroke-width:4px}
#dmt-selection-value,#dmt-tooltip-value{white-space:pre-line}
.dmt__node text{fill:#f3edff;font-family:Arial,Helvetica,sans-serif;font-size:21px;text-anchor:middle;paint-order:stroke;stroke:#000;stroke-width:5px;stroke-linejoin:round;pointer-events:none}
.dmt__node.is-dim{opacity:.6}
.dmt__node.is-active .dmt__node-disc,.dmt__node:focus-visible .dmt__node-disc{stroke:#e9dcff;stroke-width:2;filter:drop-shadow(0 0 2px #a855ff) drop-shadow(0 0 6px #8f00ff80)}
.dmt__node:focus-visible .dmt__node-hit{stroke:#c58aff;stroke-width:2;stroke-dasharray:3 4}
.dmt__node.is-selected .dmt__node-core{fill:#fff;filter:drop-shadow(0 0 3px #a855ff)}
.dmt__legend-panel{padding:2rem 0}
.dmt__legend-panel h3{font-family:Georgia,'Times New Roman',serif;font-size:1.7rem;font-weight:400;margin-bottom:1.25rem}
.dmt__legend{display:grid}
.dmt__interval{display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:.2rem .65rem;align-items:center;min-height:64px;padding:.6rem .65rem;border-bottom:1px solid #30263f;text-align:left;font-size:.875rem;cursor:pointer;transition:opacity .22s ease,color .22s ease,background-color .22s ease,box-shadow .22s ease}
.dmt__swatch{grid-row:1;height:2px;background:var(--interval);box-shadow:0 0 5px color-mix(in srgb,var(--interval) 40%,transparent)}
.dmt__ratio{grid-column:2;grid-row:1;font-variant-numeric:tabular-nums;color:#fff}
.dmt__interval-name{grid-column:2;grid-row:1;font-size:.875rem}
.dmt__interval-count{grid-column:3;grid-row:1/3;color:#cbb8db;font-size:.75rem;white-space:nowrap}
.dmt__interval-status{margin-top:1rem;min-height:7rem;font-size:.8125rem;line-height:1.6}
.dmt__interval.is-active,.dmt__interval:hover{color:#fff;background:#10091c;box-shadow:inset 2px 0 #a855ff}
.dmt__interval.is-dim{opacity:.72}
.dmt__interval[aria-pressed=true]{background:#160b26;box-shadow:inset 2px 0 #bc7aff,inset 0 -1px #8f00ff55}
.dmt__readout{display:grid;grid-template-rows:3rem 10rem 12rem;align-content:start;row-gap:.6rem;padding:1rem .9rem;margin-bottom:2rem;border:1px solid #3c2c54;background:#09060f;box-shadow:inset 0 1px #bc7aff12;transition:border-color .22s ease,box-shadow .22s ease}
.dmt__readout .eyebrow{font-size:.8125rem;color:var(--accent)}
#dmt-selection-value{margin:0;line-height:1.5;font-size:1.125rem;color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#dmt-selection-note{white-space:pre-line;overflow:auto;overflow-wrap:anywhere;max-width:65rem;font-size:.875rem;line-height:1.7}
.dmt__readout.is-pinned{border-color:#8650c4;box-shadow:inset 2px 0 #8f00ff,0 0 16px #8f00ff0c}
.dmt__tooltip[hidden]{display:none}
.dmt__tooltip{position:fixed;z-index:20;max-width:min(22rem,calc(100vw - 1rem));padding:.8rem 1rem;border:1px solid #8650c4;background:#0b0712;box-shadow:0 6px 24px #000c,inset 2px 0 #8f00ff;pointer-events:none;overflow-wrap:anywhere}
.dmt__tooltip span,.dmt__tooltip strong{display:block}
.dmt__tooltip span{margin-bottom:.35rem;color:#c9a6ff;font-size:.8125rem}
.dmt__tooltip strong{color:#fff;font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums}
.dmt__membership-note{margin-top:1.5rem;color:var(--muted);font-size:.8125rem;line-height:1.6}
.dmt__frequencies{margin-top:1rem;border:1px solid #673cff80;background:#020104}
.dmt__frequencies summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;padding:1.25rem 1.2rem;font-size:1rem;list-style:none;transition:background-color .22s ease}
.dmt__frequencies summary::-webkit-details-marker{display:none}
.dmt__frequencies summary span{font-size:.875rem;color:#b58aff;text-shadow:0 0 6px #8f00ff45;transition:color .22s ease,text-shadow .22s ease}
.dmt__frequencies summary span::after{content:' +';font-size:1.25rem;margin-left:.6rem;color:#a855ff}
.dmt__frequencies[open] summary span::after{content:' −'}
.dmt__frequencies summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.dmt__frequency-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem 1.75rem;margin:0 1.2rem 1.2rem;padding-top:.5rem;border-top:1px solid #673cff55}
.dmt__frequency{display:grid;grid-template-columns:minmax(0,1fr);gap:.25rem;text-align:left;padding:1rem .5rem;border-bottom:1px solid #673cff40;cursor:pointer;transition:opacity .22s ease,background .22s ease}
.dmt__frequency-note{color:#b994ff;font-size:.875rem}
.dmt__frequency-value{color:#fff;font-size:1rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.dmt__frequency.is-dim{opacity:.72}
.dmt__frequency.is-active,.dmt__frequency:hover,.dmt__frequency:focus-visible{background:#0b0320}
.dmt__frequency[aria-pressed=true]{border-color:#8F00FF}
.dmt__chords{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;padding-top:2rem;margin-top:1rem;border-top:1px solid var(--line)}
.dmt__chords h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:1.4rem;margin-bottom:10px}
.dmt__chords ul{list-style:none;display:flex;flex-wrap:wrap;gap:.65rem 1.5rem;margin:0;padding:0;color:#ded4ed;font-size:.875rem;line-height:1.8}
.dmt__no-script{text-align:center}
@media(min-width:1500px){.dmt__workspace{grid-template-columns:minmax(0,1fr) 270px;gap:4rem}}
@media(max-width:1050px){.dmt__workspace{grid-template-columns:1fr}.dmt__legend-panel{padding:0 0 2rem}.dmt__legend{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 1.25rem}.dmt__interval{grid-template-columns:1rem minmax(0,1fr);gap:.25rem .5rem}.dmt__frequency-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.dmt__badge{width:min(48vw,200px)}.dmt__references{flex-direction:column;gap:.8rem}.dmt__toolbar{gap:1rem;align-items:flex-start}.dmt__toolbar p{max-width:16rem}.dmt__toolbar .eyebrow{font-size:.75rem}.dmt__reset{gap:.6rem;padding-left:0;font-size:.8125rem}.dmt__figure{margin:0 -1rem}.dmt__figure figcaption{padding:0 1rem;font-size:.8125rem}.dmt__node text{font-size:25px;stroke-width:5px}.dmt__node .dmt__node-anchor{font-size:13px}.dmt__node .dmt__node-disc{r:19}.dmt__legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.25rem}.dmt__interval{grid-template-columns:.7rem minmax(0,1fr);gap:.25rem .4rem;font-size:.8125rem}.dmt__frequency-grid{grid-template-columns:1fr;gap:0}.dmt__frequency{min-height:72px}.dmt__chords{grid-template-columns:1fr;gap:2rem}.dmt__readout .eyebrow{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.dmt__edge,.dmt__node,.dmt__node .dmt__node-disc,.dmt__node .dmt__node-core,.dmt__node .dmt__node-hit,.dmt__interval,.dmt__frequency{transition:none}}

/* Canonical path hit areas change no layout or musical geometry. */
.dmt__path{cursor:pointer;outline:none}
.dmt__path-hit{fill:none;stroke:transparent;stroke-width:12;vector-effect:non-scaling-stroke;pointer-events:stroke}
.dmt__path.is-filtered-out .dmt__path-hit{pointer-events:none}
.dmt__path:focus-visible .dmt__edge{opacity:1;stroke-width:2.3;filter:drop-shadow(0 0 2px var(--interval)) drop-shadow(0 0 5px #673cff70)}
.dmt__edge[data-kind=local],.dmt__edge[data-kind=octave-cross]{opacity:0}
.dmt__edge.is-active[data-kind=local],.dmt__edge.is-active[data-kind=octave-cross]{opacity:1}
#dmt-selection-value{overflow:auto}

/* Paint-only illumination and a contained, readable frequency catalog. */
.dmt__interval{color:#ddd3ed}
.dmt__interval:focus-visible,.dmt__frequency:focus-visible{outline:2px solid #bc7aff;outline-offset:2px}
.dmt__interval.is-active .dmt__swatch{box-shadow:0 0 6px var(--interval)}
.dmt__frequencies summary:hover,.dmt__frequencies summary:focus-visible{background:#080217}
.dmt__frequencies summary:hover span,.dmt__frequencies summary:focus-visible span{color:#d8c5ff;text-shadow:0 0 2px #9d24ff,0 0 8px #8f00ff80}
.dmt__frequencies summary:hover span::after,.dmt__frequencies summary:focus-visible span::after{color:#e9ddff}
.dmt__chords li{padding:.3rem 0 .35rem;border-bottom:1px solid #44305f}
.dmt__reset{transition:color .22s ease}
@media(max-width:600px){.dmt__frequencies summary{flex-wrap:wrap;gap:.5rem;padding:1rem}.dmt__frequency-grid{margin:0 1rem 1rem}.dmt__frequency{padding:1rem 0}}

/* v1.4 shared side controls: stationary, compact, paint-only emphasis. */
.dmt__geometry-header{padding:0 0 1.75rem;text-align:center}
.dmt__geometry-header h3{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:400;line-height:1.3}
.dmt__geometry-header p{max-width:44rem;margin:.8rem auto 1.25rem;color:#c9c1d6;font-size:.875rem;line-height:1.6}
.dmt__sides{display:inline-flex;flex-wrap:wrap;max-width:100%;border:1px solid #673cff80;background:#020104}
.dmt__sides button{min-height:44px;padding:.65rem 1.4rem;color:#c9c1d6;cursor:pointer;transition:color .2s ease-out,background-color .2s ease-out,box-shadow .2s ease-out}
.dmt__sides button+button{border-left:1px solid #673cff50}
.dmt__sides button[aria-pressed=true]{color:#fff;background:#160b26;box-shadow:inset 0 -2px #8f00ff}
.dmt__sides button:hover{color:#e9ddff;background:#10091c}
.dmt__sides button:focus-visible{outline:2px solid #bc7aff;outline-offset:3px}
@media(max-width:600px){.dmt__geometry-header p{max-width:30rem}.dmt__sides button{padding:.65rem 1.2rem}}
@media(prefers-reduced-motion:reduce){.dmt__sides button{transition:none}}

/* Isolated layout review, based on the approved v1.5 transition.
   Only composition and CTA paint: no SVG sizing cap, transforms, or data changes. */
.dmt__header{min-height:0;padding:3rem 0 2rem}
#dmt-instrument{scroll-margin-top:.5rem}
.dmt__stage{position:relative;border-top:1px solid var(--line);padding-top:1.25rem}
.dmt__geometry-header{padding-bottom:.75rem}
.dmt__geometry-header p{margin:.45rem auto 0;line-height:1.5}
.dmt__side-dock{display:flex;justify-content:center;padding:0 0 .65rem}
.dmt__side-dock .dmt__sides{background:#050209}
.dmt__explore{margin-top:1.25rem;gap:.85rem;padding:.25rem 0;color:#c99bff;letter-spacing:.045em;transition:color .2s ease-out,text-shadow .2s ease-out}
.dmt__explore::before{content:"";width:1.7rem;height:1px;background:linear-gradient(90deg,transparent,#8f00ff);transition:box-shadow .2s ease-out}
.dmt__explore span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #8f00ff80;border-radius:50%;color:#c99bff;transition:color .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out}
.dmt__explore:hover,.dmt__explore:focus-visible{color:#e6ceff;text-shadow:0 0 3px #8f00ffb0,0 0 10px #673cff80}
.dmt__explore:hover::before,.dmt__explore:focus-visible::before{box-shadow:0 0 4px #8f00ff90}
.dmt__explore:hover span,.dmt__explore:focus-visible span{color:#f4eaff;border-color:#bc7aff;box-shadow:0 0 0 1px #8f00ff80,0 0 4px #8f00ff90,0 0 12px #673cff60}
.player-nav a{position:relative}
.player-nav a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:#8f00ff;opacity:0;transition:opacity .2s ease-out,box-shadow .2s ease-out}
.player-nav a:hover,.player-nav a:focus-visible{color:#c999ff;text-shadow:0 0 3px #8f00ffcc,0 0 10px #673cff88}
.player-nav a:hover::after,.player-nav a:focus-visible::after{opacity:1;box-shadow:0 0 3px #8f00ff,0 0 9px #673cff99}
.player-nav a:hover span,.player-nav a:focus-visible span{color:#e7d2ff}
@media(min-width:1051px){
  .dmt__stage{--inspector-width:240px;--stage-gap:1.5rem}
  .dmt__geometry-header{width:calc(100% - var(--inspector-width) - var(--stage-gap));padding-bottom:.6rem}
  .dmt__geometry-header h3{font-size:1.65rem}
  .dmt__geometry-header p{max-width:43rem;font-size:.8125rem}
  .dmt__side-dock{position:absolute;top:1.25rem;bottom:0;right:0;width:var(--inspector-width);display:block;padding:0;pointer-events:none;z-index:3}
  .dmt__side-dock .dmt__sides{display:flex;position:sticky;top:.75rem;width:max-content;margin:0 auto;pointer-events:auto;box-shadow:0 0 0 6px #000}
  .dmt__workspace{grid-template-columns:minmax(0,1fr) var(--inspector-width);gap:var(--stage-gap)}
  .dmt__figure{padding:0}
  .dmt__legend-panel{padding:0}
  .dmt__toolbar{align-items:start;gap:.6rem;padding:0 0 .65rem;margin-bottom:.75rem;border-top:0}
  .dmt__toolbar .eyebrow{font-size:.625rem;letter-spacing:.1em}
  .dmt__toolbar p{margin-top:.3rem;font-size:.75rem;line-height:1.45}
  .dmt__reset{gap:.4rem;padding:0;font-size:.75rem}
  .dmt__readout{grid-template-rows:2rem 8rem 6rem;row-gap:.4rem;padding:.8rem .75rem;margin-bottom:1rem}
  #dmt-selection-value{font-size:1rem;line-height:1.45}
  #dmt-selection-note{font-size:.8125rem;line-height:1.55}
  .dmt__legend-panel h3{font-size:1.35rem;margin-bottom:.5rem}
  .dmt__legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 .6rem}
  .dmt__interval{grid-template-columns:.6rem minmax(0,1fr);gap:.35rem;min-height:44px;padding:.5rem .25rem}
  .dmt__interval-name{font-size:.75rem}
}
@media(min-width:1500px){.dmt__stage{--inspector-width:270px}}
@media(max-width:1050px){.dmt__legend-panel .dmt__toolbar{margin-bottom:1.25rem}}
@media(prefers-reduced-motion:reduce){.dmt__explore,.dmt__explore::before,.dmt__explore span,.player-nav a::after{transition:none}}

/* Three-screen presentation: existing renderer and transition remain untouched. */
.dmt__header{min-height:100svh;padding:3rem 0}
#dmt-instrument,#dmt-frequencies{scroll-margin-top:-1rem}
.dmt__stage{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:1.25rem 0}
.dmt__diagram-column{min-width:0}
.dmt__stage-next{text-align:center}
.dmt__stage-next .dmt__explore{margin-top:.5rem}
.dmt__catalog-screen{min-height:100svh;max-width:1100px;margin:auto;padding:2.5rem 0;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line)}
.dmt__catalog-header{text-align:center;margin-bottom:1rem}
.dmt__catalog-header h3{font-family:Georgia,'Times New Roman',serif;font-size:1.8rem;font-weight:400}
.dmt__catalog-header p{color:#b994ff;font-size:.875rem;margin:.5rem 0 1rem}
.dmt__catalog-header .dmt__sides{position:static}
.dmt__catalog-screen .dmt__frequencies{margin-top:0}
.dmt__catalog-screen .dmt__frequency-grid{border-top:0;margin:.5rem 1.2rem;padding:0;gap:0 1.75rem}
.dmt__catalog-screen .dmt__frequency{padding:.65rem .5rem}
.dmt__catalog-screen .dmt__chords{padding-top:1rem}
.dmt__sides button{font-size:1.0625rem;padding:.75rem 1.5rem}
@media(min-width:1051px){
 .dmt__stage{--inspector-width:280px}
 .dmt__side-dock{top:1.25rem;bottom:auto}
 .dmt__side-dock .dmt__sides{position:static}
 .dmt__toolbar .eyebrow{font-size:.6875rem}
 .dmt__toolbar p,.dmt__reset{font-size:.8125rem}
 .dmt__readout{padding:1rem;grid-template-rows:2rem 8rem 6.5rem}
 .dmt__readout .eyebrow{font-size:.875rem}
 #dmt-selection-value{font-size:1.0625rem}
 #dmt-selection-note{font-size:.875rem}
 .dmt__legend-panel h3{font-size:1.5rem}
 .dmt__interval-name{font-size:.875rem}
 .dmt__interval{min-height:46px}
}
@media(max-width:600px){
 .dmt__header{padding:2.5rem 0}
 .dmt__catalog-screen{padding:2.5rem 0}
 .dmt__catalog-screen .dmt__frequency-grid{margin:.5rem 1rem}
 .dmt__stage-next{padding-bottom:1.5rem}
}

/* Separate screens without constraining the diagram or inspector. */
.dmt__stage{margin-bottom:4rem}

/* Anchor the existing CTA inside the left column; retain its prior flow space. */
.dmt__diagram-column{position:relative;padding-bottom:52px}
.dmt__stage-next{position:static;padding:1rem 0 0;text-align:center;white-space:nowrap}
.dmt__stage-next .dmt__explore{margin-top:0}
@media(max-width:600px){.dmt__diagram-column{padding-bottom:76px}}

/* Reserved rail action; the diagram retains its existing natural dimensions. */
.dmt__rail-content{min-width:0;min-height:0}
@media(min-width:1051px){
 .dmt__legend-panel{display:grid;grid-template-rows:minmax(0,1fr) auto;height:calc(100svh - 9rem);min-height:24rem}
 .dmt__rail-content{overflow:auto;scrollbar-width:thin}
}
.dmt__catalog-tools{display:flex;justify-content:flex-end;flex-shrink:0}
.dmt__catalog-nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:18px}
.dmt__catalog-nav .dmt__explore{margin-top:0}

/* Reset belongs to the frequency panel; preserve its existing grid dimensions. */
.dmt__catalog-screen .dmt__frequencies{position:relative}
.dmt__catalog-screen .dmt__catalog-tools{position:absolute;top:.25rem;right:.75rem;z-index:1}

/* Side A has eight desktop rows: reclaim 5px per row, 40px total. */
@media(min-width:1051px){
 #dmt-instrument[data-active-side="a"] .dmt__catalog-screen .dmt__frequency{padding-top:calc(.65rem - 2.5px);padding-bottom:calc(.65rem - 2.5px)}
}

/* Frequency Set is framed in JavaScript from its heading through its footer navigation. */
@media(min-width:1051px){#dmt-frequencies{scroll-margin-top:0}}

/* 2026-10-02 geometry centering correction:
   Explore Frequencies now lives in the right rail, so the old 52px desktop
   reservation under the left diagram is dead space. Removing it lets the
   complete geometry composition fit inside a 15-inch laptop viewport and
   allows measured JS centering to work without scaling the SVG. */
@media(min-width:1051px){
  .dmt__diagram-column{padding-bottom:0}
}


/* 2026-10-02 Geometry Center V3 — top-row alignment only.
   The Side A/B control box sat slightly above the visible Geometry title.
   Move that dock down 8px on desktop BEFORE framing the full composition.
   No SVG, data, route, inspector, or frequency-set dimensions change. */
@media(min-width:1051px){
  .dmt__side-dock{top:calc(1.25rem + 8px)}
}


/* 2026-10-10 Mobile Optimization v1 — touch + geometry hierarchy.
   Mobile only: enlarge the Musical Geometry by cropping unused SVG side-space,
   reduce Side A/B visual dominance, and increase invisible touch targets.
   Desktop geometry, data, routes, and hover behavior remain unchanged. */
@media(max-width:600px){
  .dmt__geometry-header{padding-bottom:.35rem}
  .dmt__geometry-header p{margin-top:.4rem}
  .dmt__side-dock{padding-bottom:.25rem}
  .dmt__side-dock .dmt__sides button{
    min-height:40px;
    padding:.45rem .9rem;
    font-size:.8125rem;
    letter-spacing:.01em;
  }
  .dmt__diagram-column{padding-bottom:0}
  .dmt__figure{
    margin:0 -1rem;
    padding:1rem 0 .75rem;
    overflow:hidden;
  }
  #dmt-map{
    width:132.5%;
    max-width:none;
    margin-left:-16.25%;
  }
  .dmt__toolbar{padding:1rem 0}
  .dmt__readout{margin-bottom:1.25rem}
  .dmt__readout.is-empty{
    grid-template-rows:auto auto;
    row-gap:.35rem;
    padding:.75rem .8rem;
  }
  .dmt__readout.is-empty #dmt-selection-value{display:none}
  .dmt__readout.is-empty #dmt-selection-note{
    margin:0;
    max-height:none;
    overflow:visible;
    line-height:1.5;
  }
  .dmt__node,.dmt__path{touch-action:manipulation}
  .dmt__node .dmt__node-hit{r:44px}
  .dmt__path-hit{stroke-width:24}
  .dmt__tooltip{
    max-width:min(18rem,calc(100vw - 1.5rem));
    padding:.6rem .75rem;
  }
  .dmt__tooltip span{font-size:.71875rem;margin-bottom:.25rem}
  .dmt__tooltip strong{font-size:.875rem;line-height:1.4}
}

/* 2026-10-11 Mobile Optimization v1.2 — compact Frequency Set.
   Mobile only. Preserves every canonical note/frequency value and desktop layout. */
@media(max-width:600px){
  .dmt__catalog-screen{padding:2rem 0}
  .dmt__catalog-header{margin-bottom:.65rem}
  .dmt__catalog-header p{margin:.35rem 0 .65rem}
  .dmt__catalog-header .dmt__sides button{
    min-height:38px;
    padding:.4rem .8rem;
    font-size:.78125rem;
  }
  .dmt__catalog-screen .dmt__frequency-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 .55rem;
    margin:.35rem .5rem .65rem;
  }
  .dmt__catalog-screen .dmt__frequency{
    min-height:58px;
    padding:.5rem .42rem;
    gap:.15rem;
  }
  .dmt__frequency-note{font-size:.75rem;line-height:1.15}
  .dmt__frequency-value{
    font-size:.75rem;
    line-height:1.25;
    letter-spacing:-.01em;
    white-space:nowrap;
  }
  .dmt__catalog-screen .dmt__chords{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
    padding-top:.75rem;
    margin-top:.5rem;
  }
  .dmt__catalog-screen .dmt__chords h3{font-size:1.05rem;margin-bottom:.35rem}
  .dmt__catalog-screen .dmt__chords ul{gap:.25rem .65rem;font-size:.75rem;line-height:1.45}
  .dmt__catalog-screen .dmt__chords li{padding:.22rem 0 .25rem}
  .dmt__catalog-nav{gap:.75rem 1.5rem;margin-top:12px}
}