.mechanism-explorer{min-height:clamp(620px,82vh,880px);padding:clamp(1rem,2vw,1.5rem);border:1px solid var(--rx-line);border-radius:18px;background:#fffefa;box-shadow:var(--rx-shadow);overflow:hidden}.mechanism-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}.mechanism-heading h2{margin:.28rem 0 .38rem;font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.22;letter-spacing:0}.mechanism-heading p:not(.section-index){max-width:850px;margin:0;color:var(--rx-muted);font:500 .86rem/1.55 var(--rx-sans)}.mechanism-status-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}.mechanism-renderer-status{padding:.28rem .48rem;border:1px solid var(--rx-line);background:var(--rx-surface-2);color:var(--rx-muted);font:700 .67rem var(--rx-sans)}.mechanism-renderer-status.is-live{border-color:#8dc2bc;background:var(--rx-teal-soft);color:#225f5d}.mechanism-renderer-status.is-fallback{border-color:#ddb37f;background:var(--rx-orange-soft);color:#7a4a25}.mechanism-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);gap:1rem;min-height:0}.mechanism-visual-column{display:grid;grid-template-rows:minmax(430px,1fr) auto;gap:.75rem;min-width:0}.mechanism-scene{position:relative;min-height:430px;overflow:hidden;border:1px solid #cfd8dc;border-radius:8px;background:#f4f7f8}.mechanism-scene canvas{display:block;width:100%;height:100%;min-height:430px}.mechanism-fallback{display:grid;align-content:center;gap:.6rem;height:100%;min-height:430px;padding:1.25rem;background:#f4f7f8}.mechanism-fallback svg{width:100%;height:auto}.mechanism-fallback h4,.mechanism-fallback p{margin:0}.mechanism-fallback p{color:var(--rx-muted);font:500 .78rem/1.5 var(--rx-sans)}.mechanism-scene-labels span{position:absolute;padding:.25rem .42rem;border:1px solid rgba(95,112,122,.3);background:rgba(255,254,250,.9);color:#43515a;font:700 .65rem var(--rx-sans);pointer-events:none}.mechanism-axis-label{left:.7rem;bottom:.7rem}.mechanism-step-label{right:.7rem;top:.7rem}.mechanism-projection-label{left:.7rem;top:.7rem}.mechanism-timeline{display:grid;gap:.55rem;padding:.7rem;border:1px solid var(--rx-line);background:#fbfaf7}.mechanism-transport{display:flex;align-items:center;gap:.38rem;flex-wrap:wrap}.mechanism-transport button{border-radius:6px;min-height:36px}.mechanism-timeline input[type=range]{width:100%;accent-color:var(--rx-blue)}.mechanism-stage-rail{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.3rem}.mechanism-stage-button{display:grid;place-items:center;min-height:34px;border:1px solid var(--rx-line);border-radius:4px;background:#fff;color:var(--rx-muted);font:800 .66rem var(--rx-sans)}.mechanism-stage-button.active{border-color:var(--rx-blue);background:var(--rx-blue-soft);color:var(--rx-blue)}.mechanism-stage-button.locked{border-style:dashed;color:#89939a}.mechanism-panel{display:grid;align-content:start;gap:.75rem;min-width:0;padding:.9rem;border:1px solid var(--rx-line);border-radius:8px;background:#fbfaf7;font-family:var(--rx-sans)}.mechanism-stage-header{display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:baseline;border-bottom:1px solid var(--rx-line);padding-bottom:.55rem}.mechanism-stage-header span{color:var(--rx-blue);font:800 .7rem var(--mono,"Cascadia Mono",Consolas,monospace)}.mechanism-stage-header h3{margin:0;font:800 1rem/1.35 var(--rx-sans)}.mechanism-stage-copy{min-height:72px;margin:0;color:var(--rx-muted);font:500 .78rem/1.52 var(--rx-sans)}.mechanism-formula{min-height:70px;display:grid;place-items:center;padding:.55rem;border:1px solid var(--rx-line);background:#fff;overflow:auto}.mechanism-formula .katex{font-size:.92em}.mechanism-ldl-result{display:grid;grid-template-columns:1fr auto;gap:.15rem .5rem;padding:.55rem;border-left:3px solid var(--rx-teal);background:var(--rx-teal-soft)}.mechanism-ldl-result span,.mechanism-ldl-result small{color:var(--rx-muted);font-size:.68rem}.mechanism-ldl-result strong{font:800 1rem var(--mono,"Cascadia Mono",Consolas,monospace);color:var(--rx-teal)}.mechanism-ldl-result small{grid-column:1/-1}.mechanism-inspector{border:1px solid var(--rx-line);background:#fff}.mechanism-inspector summary{cursor:pointer;padding:.48rem .55rem;font:800 .72rem var(--rx-sans)}.mechanism-inspector dl{display:grid;margin:0;border-top:1px solid var(--rx-line)}.mechanism-inspector dl>div{display:grid;grid-template-columns:minmax(105px,.72fr) minmax(0,1.28fr);gap:.45rem;padding:.35rem .5rem;border-bottom:1px solid #ebe8e1}.mechanism-inspector dl>div:last-child{border-bottom:0}.mechanism-inspector dt{color:var(--rx-muted);font-size:.65rem}.mechanism-inspector dd{margin:0;font:700 .68rem/1.4 var(--rx-sans);overflow-wrap:anywhere}.mechanism-inspector .mechanism-not-row{background:var(--rx-orange-soft)}.mechanism-guardrail{display:grid;gap:.2rem;padding:.6rem;border:1px solid #ddb37f;background:#fff9ef;color:#694921;font:600 .7rem/1.45 var(--rx-sans)}.mechanism-guardrail strong{color:#8a5124}.mechanism-gate-note{padding:.55rem;border:1px dashed #98a7af;background:#f4f7f8;color:var(--rx-muted);font:600 .68rem/1.45 var(--rx-sans)}
.mechanism-variable-chips{display:flex;gap:.35rem;flex-wrap:wrap}.mechanism-variable-chip{padding:.24rem .4rem;border:1px solid var(--rx-line);border-radius:4px;background:#fff;color:var(--rx-blue);font:700 .65rem var(--rx-sans)}.mechanism-loss-panel{display:grid;gap:.4rem;padding:.55rem;border:1px solid var(--rx-line);background:#fff}.mechanism-loss-panel>strong{display:flex;justify-content:space-between;gap:.4rem;font-size:.72rem}.mechanism-loss-panel small{color:var(--rx-muted);font-size:.62rem}.mechanism-loss-row{display:grid;grid-template-columns:1fr auto;gap:.45rem;align-items:center;color:var(--rx-muted);font:700 .66rem var(--rx-sans)}.mechanism-loss-row span:last-child{padding:.15rem .3rem;border:1px solid var(--rx-line);background:var(--rx-surface-2);font-size:.61rem}.mechanism-loss-row.active{color:var(--rx-teal)}.mechanism-loss-row.active span:last-child{border-color:#8dc2bc;background:var(--rx-teal-soft)}.mechanism-scene-caption{position:absolute;left:50%;bottom:2.7rem;display:grid;gap:.12rem;min-width:min(420px,calc(100% - 2rem));padding:.45rem .6rem;transform:translateX(-50%);border:1px solid rgba(95,112,122,.3);background:rgba(255,254,250,.92);text-align:center;pointer-events:none}.mechanism-scene-caption strong{color:var(--rx-ink);font:800 .74rem var(--rx-sans)}.mechanism-scene-caption span{color:var(--rx-muted);font:600 .66rem var(--rx-sans)}
@media(max-width:1100px){.mechanism-layout{grid-template-columns:1fr}.mechanism-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.mechanism-stage-header,.mechanism-stage-copy,.mechanism-formula,.mechanism-gate-note{grid-column:1/-1}.mechanism-heading{align-items:flex-start}}
@media(max-width:760px){.mechanism-explorer{min-height:0;padding:.9rem;border-radius:14px}.mechanism-heading{display:grid}.mechanism-status-row{justify-content:flex-start}.mechanism-layout{grid-template-columns:1fr}.mechanism-visual-column{grid-template-rows:auto auto}.mechanism-scene,.mechanism-scene canvas,.mechanism-fallback{min-height:310px}.mechanism-panel{grid-template-columns:1fr}.mechanism-stage-header,.mechanism-stage-copy,.mechanism-formula,.mechanism-gate-note{grid-column:auto}.mechanism-transport{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.mechanism-transport button{width:100%}.mechanism-stage-rail{grid-template-columns:repeat(4,minmax(0,1fr))}.mechanism-scene-labels span{font-size:.57rem}.mechanism-axis-label{max-width:190px}.mechanism-projection-label{max-width:210px}}
@media(prefers-reduced-motion:reduce){.mechanism-renderer-status::after{content:" · Reduced motion"}.mechanism-play-pulse{display:none!important}}

/* Keep the WebGL canvas from feeding its intrinsic backing height back into the grid. */
.mechanism-visual-column{grid-template-rows:auto auto}
.mechanism-layout{align-items:start}
.mechanism-visual-column{align-content:start}
.mechanism-scene{height:clamp(430px,55vh,620px);min-height:0}
.mechanism-scene canvas,.mechanism-fallback{min-height:0}
.mechanism-scene canvas[hidden],.mechanism-fallback[hidden]{display:none!important}
.mechanism-ldl-result[hidden]{display:none!important}
.mechanism-scene.is-fallback .mechanism-scene-caption{display:none}
.mechanism-scene.is-fallback .mechanism-scene-labels{display:none}
.mechanism-fallback h4{font:800 clamp(.78rem,2.8vw,.95rem)/1.35 var(--rx-sans);overflow-wrap:anywhere}
.mechanism-fallback p{font-size:clamp(.68rem,2.45vw,.78rem)}

@media(max-width:760px){
  .mechanism-scene{height:330px}
  .mechanism-projection-label{top:2.6rem;max-width:180px}
  .mechanism-fallback{padding:.9rem;gap:.45rem}
}