/* Balanced crystallization panels with a shared experiment-control row.
   Out of scope: hero visuals and site-wide typography. */
.matter-heading { max-width: 58rem; margin-bottom: calc(clamp(3rem, 2rem + 3vw, 5rem) - var(--fs-lede) * 1.68); }
.matter-heading .h2 { max-width: 27ch; font-size: clamp(2rem, 3.5vw, 2.7rem); letter-spacing: -.045em; text-wrap: balance; }
.matter-heading .lede { max-width: 44rem; }
@media (min-width: 1021px) {
  .matter-heading { max-width: none; }
  .matter-heading .h2,
  .matter-heading .lede { max-width: none; white-space: nowrap; }
}
.matter-explore-prompt { display: block; margin-top: 1.68em; }
.matter-lab { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; background: var(--paper-soft); box-shadow: 0 24px 70px rgba(114,70,86,.05); }
.matter-dialogue, .matter-stage { min-width: 0; padding: clamp(1.4rem, 2.6vw, 2.3rem); }
.matter-dialogue { display: flex; flex-direction: column; background: #fffcfa; }
.matter-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.6rem; }
.matter-kicker { font-size: .65rem; font-weight: 650; letter-spacing: .13em; color: var(--coral-deep); }
.matter-small, .matter-live { font-size: .68rem; color: var(--muted); }
.matter-dialogue h3, .matter-stage h3 { font-family: var(--font-display); font-size: clamp(1.22rem, 1.65vw, 1.6rem); line-height: 1.4; font-weight: 400; }
.matter-panel-intro { margin-top: .7rem; font-size: .85rem; color: var(--muted); line-height: 1.65; max-width: 30rem; }
.matter-question { margin-top: 1.5rem; display: flex; gap: .7rem; }
.matter-question > span { font-family: var(--font-display); font-size: 2.8rem; line-height: 1.1; color: var(--rose); }
.matter-question p { font-size: 1.1rem; line-height: 1.55; color: var(--ink-2); }
.matter-reading { margin-top: 1.1rem; padding-left: 1.15rem; border-left: 2px solid #ecd9df; }
.matter-reading p { font-size: .9rem; line-height: 1.85; color: var(--muted); margin-top: .85rem; }
.matter-reading p:first-child { margin-top: 0; }
.matter-type-line { position: relative; }
.matter-type-ink { position: absolute; inset: 0; }
.matter-type-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.matter-language-path { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-top: 2rem; font-size: .68rem; color: var(--aqua-deep); }
.matter-language-path i { font-style: normal; color: var(--faint); }
.matter-language-ending { padding-top: 3rem; margin-top: auto; font-size: .8rem; line-height: 1.8; color: var(--muted); }
.matter-language-ending em { font-style: normal; color: var(--ink-2); }
.matter-stage { display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #faf9f8; }
.matter-live { display: inline-flex; align-items: center; gap: .4rem; }
.matter-live i { width: 5px; height: 5px; background: var(--aqua-deep); border-radius: 50%; }
.matter-viewport { position: relative; height: 370px; margin: 1.25rem -1rem 1rem; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 30% 20%, #fff 0%, #f7f4f0 50%, #e7e8e6 100%); }
#matterCanvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
#matterCanvas:active { cursor: grabbing; }
.matter-stage-caption { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; pointer-events: none; font-size: .66rem; color: var(--muted); }
#matterState { color: var(--aqua-deep); background: rgba(255,255,255,.75); border: 1px solid rgba(52,127,135,.12); border-radius: 20px; padding: .22rem .6rem; }
.matter-presets { display: flex; gap: .4rem; flex-wrap: wrap; }
.matter-presets button, .matter-stage-actions button { min-height: 40px; padding: .5rem .7rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.65); font: inherit; font-size: .73rem; cursor: pointer; transition: background .2s, border-color .2s; }
.matter-presets button[data-matter-preset][aria-pressed="true"], .matter-presets button:hover { border-color: #81b0b3; background: #eaf4f3; }
.matter-controls { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.25rem; gap: 1.2rem; }
.matter-controls label { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: .75rem; color: var(--ink-2); }
.matter-controls output { color: var(--aqua-deep); font-size: .7rem; }
.matter-controls input[type="range"] { width: 100%; height: 24px; padding: 0; margin: .4rem 0 0; accent-color: var(--aqua-deep); cursor: pointer; }
.matter-range-ends { display: flex; justify-content: space-between; font-size: .6rem; color: var(--faint); }
.matter-observation { min-height: 3em; margin-top: 1.2rem; font-size: .74rem; color: var(--muted); line-height: 1.6; }
.matter-stage-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; border-top: 1px solid var(--line); margin-top: .7rem; padding-top: .7rem; }
.matter-stage-actions { display: flex; gap: .35rem; }
.matter-note { font-size: .6rem; color: var(--muted); line-height: 1.6; margin-top: .8rem; }
.matter-lab button:focus-visible, .matter-lab input:focus-visible { outline: 2px solid var(--aqua-deep); outline-offset: 4px; }
@media (max-width: 820px) {
  .matter-lab { grid-template-columns: 1fr; }
  .matter-stage { border-left: 0; border-top: 1px solid var(--line); }
  .matter-question { margin-top: 1.25rem; }
  .matter-language-ending { padding-top: 1.6rem; }
  .matter-viewport { height: 350px; margin-inline: -.5rem; }
}
@media (max-width: 380px) { .matter-controls { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .matter-presets button { transition: none; } }