/* Companion article additions; loaded only by primer.html. */
.stack-engine { box-shadow:none; border-color:transparent; background:color-mix(in srgb,var(--olive) 12%,var(--paper-raised)); }
.loop-overview { margin:1.5rem 0 2rem; }
.loop-scene { position:relative; border:1px solid var(--line); background:var(--paper-raised); }
.loop-scene img { display:block; width:100%; height:auto; }
.loop-scene svg { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.loop-scene path { fill:none; vector-effect:non-scaling-stroke; }
.loop-scene .hidden { stroke-dasharray:4 3; opacity:.6; }
.loop-scene .leader { stroke:var(--ink); stroke-width:1.25; }
.loop-scene .ring,.loop-scene .force { stroke:#b65335; stroke-width:2.5; }
.loop-scene .axis { stroke:#3d4635; stroke-width:1.5; }
.loop-scene .outline { stroke:#b65335; stroke-width:1.75; }
.loop-scene .pt { fill:#b65335; stroke:var(--paper-raised); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.loop-scene .pt.hidden { fill:var(--paper-raised); stroke:#b65335; opacity:1; }
.loop-scene .mark circle { fill:#b65335; }
.loop-scene .mark text { fill:#fff; font:600 20px var(--body); text-anchor:middle; dominant-baseline:central; }
.loop-label { position:absolute; left:var(--x); top:var(--y); transform:translateY(-50%); padding:.1rem .45rem; background:var(--paper-raised); font-size:.78rem; font-weight:600; line-height:1.4; white-space:nowrap; }
.loop-label.end { transform:translate(-100%,-50%); }
.loop-strip { margin:.7rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; font-size:.8rem; }
.loop-strip li { display:flex; align-items:center; gap:.4rem; }
.loop-strip li:not(:last-child)::after { content:"→"; color:var(--muted); margin-left:.1rem; }
.loop-strip li:last-child::after { content:"↻ repeat"; color:var(--muted); margin-left:.4rem; }
.loop-strip span,.term-mark { display:inline-grid; place-items:center; min-width:1.35rem; height:1.35rem; padding:0 .3rem; border-radius:999px; background:#b65335; color:#fff; font-size:.7rem; font-weight:600; line-height:1; }
.term-mark { margin-right:.4rem; vertical-align:.1em; }
.loop-overview figcaption { margin-top:.5rem; font-size:.8rem; line-height:1.55; color:var(--muted); }
.primer-panel { float:right; width:min(44%,330px); margin:.9rem 0 1rem 1.6rem; }
.primer-panel>svg { display:block; width:100%; height:auto; aspect-ratio:4/3; border:1px solid var(--line); background:var(--paper-raised); }
.primer-panel figcaption { margin-top:.45rem; font-size:.76rem; line-height:1.5; color:var(--muted); }
.primer-panel.wide { float:none; width:100%; margin:.9rem 0 1.4rem; }
.panel-pair { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.panel-tag { margin:0 0 .2rem; font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
/* Optional physics-engine primer, collapsed by default inside section 1. */
.primer-collapse { margin:2rem 0 2.5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.primer-collapse>summary { cursor:pointer; padding:1rem 0; font-family:var(--display); font-size:1.25rem; line-height:1.4; }
.primer-collapse>summary::marker { color:var(--olive); }
.primer-collapse-note { display:block; padding-left:1.2rem; font-family:var(--body); font-size:.8rem; color:var(--muted); }
.primer-collapse-body { padding:.5rem 0 1rem; }
.primer-details>h3 { clear:both; }
.primer-details::after { content:""; display:block; clear:both; }
@media(max-width:640px) { .loop-label { display:none; } .primer-panel { float:none; width:100%; margin:.8rem 0 1rem; } }
/* Simulation landscape: framework comparison table. */
.landscape-compare { margin:1.5rem 0 2rem; }
.landscape-compare table { min-width:900px; font-size:.76rem; }
.landscape-compare th,.landscape-compare td { padding:.65rem .6rem; }
.landscape-compare th[scope="row"] { position:sticky; left:0; z-index:1; min-width:8.5rem; background:var(--paper-raised); font-size:.85rem; }
.landscape-compare th[scope="row"] small { display:block; margin-top:.2rem; font-size:.7rem; font-weight:400; line-height:1.4; color:var(--muted); }
.landscape-compare thead th:first-child { position:sticky; left:0; z-index:2; }
.landscape-compare td:nth-child(2) { min-width:11rem; }
.landscape-compare td:last-child { min-width:7rem; }
.landscape-compare figcaption { margin-top:.6rem; font-size:.75rem; color:var(--muted); }
/* Optional math notes and the contact deep dive. */
.primer-details>details.math-note,.math-note { margin:.2rem 0 1.4rem; border-bottom:0; padding:.55rem .9rem; border-radius:6px; background:color-mix(in srgb,var(--olive) 7%,var(--paper-raised)); }
.math-note>summary { cursor:pointer; font-size:.86rem; font-weight:600; color:var(--accent); }
.math-note[open]>summary { margin-bottom:.4rem; }
.math-note p { margin:.5rem 0; font-size:.86rem; line-height:1.6; }
.math-note math[display="block"] { margin:.7rem 0; font-size:1.05rem; overflow-x:auto; overflow-y:hidden; }
.code-excerpt { margin:1rem 0 1.25rem; }
.code-excerpt figcaption { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.3rem; font-size:.72rem; color:var(--muted); }
.code-excerpt pre { margin:0; padding:.8rem 1rem; overflow-x:auto; border-radius:6px; background:color-mix(in srgb,var(--ink) 5%,var(--paper-raised)); font:.74rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink); }
.contact-pipeline th[scope="row"] { white-space:nowrap; }
.law-chart { margin:1.25rem 0 1.5rem; }
.law-legend { display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; margin:0 0 .4rem; padding:0; list-style:none; font-size:.76rem; color:var(--muted); }
.law-legend li { display:flex; align-items:center; gap:.35rem; }
.law-legend svg { width:14px; height:14px; overflow:visible; }
.law-legend li:nth-last-child(-n+2) svg { width:22px; }
.law-plot { position:relative; }
.law-plot>svg { display:block; width:100%; height:auto; }
.law-plot .grid { stroke:var(--line); stroke-width:1; }
.law-plot .tick { font:11px var(--body); fill:var(--muted); }
.law-plot .axis { font:12px var(--body); fill:var(--muted); }
.law-plot .dl { font:600 12px var(--body); fill:var(--ink); paint-order:stroke; stroke:var(--paper); stroke-width:4px; stroke-linejoin:round; }
.law-plot .lead { stroke:var(--muted); stroke-width:1; }
.law-plot .crosshair { stroke:var(--ink); stroke-width:1; stroke-dasharray:3 3; }
.law-plot .hit { fill:transparent; cursor:crosshair; }
.law-mjcf,.law-genesis { fill:none; stroke:var(--ink); stroke-width:1.5; }
.law-genesis { stroke-dasharray:5 4; }
.s-mujoco circle,circle.s-mujoco { fill:#548344; stroke:var(--paper); stroke-width:1.5; }
.s-newton path,path.s-newton { fill:none; stroke:#b65335; stroke-width:2; }
.s-genesis rect,rect.s-genesis { fill:#88599a; stroke:var(--paper); stroke-width:1.5; }
.s-physx path,path.s-physx { fill:#315d9e; stroke:var(--paper); stroke-width:1; }
.law-tip { position:absolute; top:.5rem; display:grid; grid-template-columns:auto auto; gap:.1rem .8rem; padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px; background:var(--paper-raised); font-size:.72rem; pointer-events:none; box-shadow:0 2px 8px rgb(0 0 0 / .08); }
.law-tip[hidden] { display:none; }
.law-tip b { grid-column:1 / -1; }
.law-tip span:nth-child(odd) { color:var(--muted); }
.source-findings li { margin:.55rem 0; }
/* Coupling deep dive: one step per setup. */
.coupling-lanes { margin:1.5rem 0 2rem; display:grid; gap:1rem; }
.coupling-lanes .lane { display:grid; grid-template-columns:11rem 1fr; gap:.4rem 1rem; align-items:start; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.coupling-lanes .lane-name { margin:0; font-size:.86rem; font-weight:600; line-height:1.35; }
.coupling-lanes .lane-name small { display:block; margin-top:.2rem; font-size:.72rem; font-weight:400; color:var(--muted); }
.coupling-lanes .lane-steps { display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; counter-reset:step; }
.coupling-lanes .lane-steps li { position:relative; flex:1 1 8.5rem; padding:.45rem .6rem; border-radius:6px; background:var(--paper-raised); font-size:.74rem; line-height:1.4; }
.coupling-lanes .lane-steps li b { display:block; font-size:.78rem; }
.coupling-lanes .lane-steps li span { color:var(--muted); }
.coupling-lanes .lane-steps li.couple { background:color-mix(in srgb,#b65335 14%,var(--paper-raised)); }
.coupling-lanes .lane-steps li:not(:last-child)::after { content:"→"; position:absolute; right:-.42rem; top:50%; transform:translateY(-50%); font-size:.7rem; color:var(--muted); }
.coupling-lanes .lane-loop { grid-column:2; margin:0; font-size:.74rem; color:#b65335; }
.coupling-lanes figcaption { font-size:.76rem; line-height:1.5; color:var(--muted); }
.coupling-stability td,.coupling-stability th { white-space:nowrap; }
.coupling-stability td:nth-child(5) { white-space:normal; }
@media(max-width:640px) { .coupling-lanes .lane { grid-template-columns:1fr; } .coupling-lanes .lane-loop { grid-column:1; } .coupling-lanes .lane-steps li:not(:last-child)::after { content:none; } }