.flow-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;font:inherit}
.flow-controls button{border:1px solid var(--line2);background:transparent;color:var(--ink);padding:.65rem 1rem;min-width:5rem;cursor:pointer;font:inherit}
.flow-controls input{flex:1;min-width:120px;accent-color:var(--accent)}
.flow-controls output{font-size:.8rem;font-variant-numeric:tabular-nums}
.work-grid>*{min-width:0}
/* Let the tide caption and live theme readout share space without squeezing controls. */
.hero-foot{gap:.75rem 2rem;line-height:1.65;padding-block:.85rem}
.hero-foot .hf-fig{flex:1 1 24rem;min-width:0;overflow-wrap:anywhere}
.hero-foot .hf-right{flex:1 1 30rem;min-width:0;margin-left:0;gap:.6rem .75rem}
.hero-foot .hf-theme{flex:1 1 18rem;min-width:0;overflow-wrap:anywhere}
.hero-foot button{flex:0 0 auto;min-height:44px;justify-content:center;white-space:nowrap}
@media(max-width:640px){
  .hero-foot{flex-direction:column;align-items:stretch;gap:.75rem;font-size:.72rem}
  .hero-foot .hf-fig,.hero-foot .hf-right{flex-basis:auto}
  .hero-foot .hf-right{border-top:1px solid var(--line2);padding-top:.75rem}
  .hero-foot .hf-theme{flex-basis:100%}
}
/* Scene controls: instructions first, actions second, diagnostics on request.
   Scoped to the new source; the retained historical index is not restyled. */
.hero-foot--controls{display:grid;grid-template-columns:minmax(15rem,1fr) minmax(0,1.6fr);align-items:start;gap:1.5rem 2.5rem;padding-block:1.3rem;background:#0a100d;border-bottom:1px solid var(--line2);font-size:.8rem;letter-spacing:0;line-height:1.5}
.hero-foot--controls .hf-caption{min-width:0}
.hero-foot--controls .hf-eyebrow{display:block;color:var(--soft);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem}
.hero-foot--controls .hf-instruction{margin:0;color:var(--ink);font-size:.85rem;line-height:1.6;max-width:37ch}
.hero-foot--controls .hf-keyboard{display:block;color:var(--soft);font-size:.7rem;margin-top:.3rem}
.hero-foot--controls .hf-keyboard[hidden]{display:none}
.hero-foot--controls .hf-right{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:start;gap:1rem 1.5rem;min-width:0;border:0;padding:0;margin:0}
.hero-foot--controls .hf-scene{min-width:0}
.hero-foot--controls .hf-scene-name{display:block;color:var(--ink);font-size:.85rem;overflow-wrap:anywhere}
.hero-foot--controls .hf-details{margin-top:.1rem}
.hero-foot--controls .hf-details summary{display:flex;align-items:center;gap:.55rem;min-height:44px;width:fit-content;cursor:pointer;list-style:none;color:var(--soft);font-size:.72rem}
.hero-foot--controls .hf-details summary::-webkit-details-marker{display:none}
.hero-foot--controls .hf-details summary::before{content:none}
.hero-foot--controls .hf-details summary::after{content:'+';font-size:1rem;line-height:1;margin-left:.1rem}
.hero-foot--controls .hf-details[open] summary::after{content:'−'}
.hero-foot--controls .hf-swatch{width:.6rem;height:.6rem;flex:none;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px #1b2922}
.hero-foot--controls .hf-theme{padding:.55rem .75rem;border-left:2px solid var(--accent);color:var(--soft);font-size:.7rem;line-height:1.75;overflow-wrap:anywhere}
.hero-foot--controls .hf-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:.6rem;align-items:start;padding-top:.25rem;min-width:0}
.hero-foot--controls button{align-items:center;gap:.55rem;min-height:44px;border:1px solid #52685b;border-radius:5px;padding:.65rem .85rem;font:inherit;font-size:.75rem;letter-spacing:0;color:var(--ink);background:transparent}
.hero-foot--controls .shuffle-btn{background:#1b2922;border-color:#668a75}
.hero-foot--controls button:hover:not(:disabled){border-color:var(--accent);background:#24372d;color:var(--ink)}
.hero-foot--controls button:disabled{opacity:.65;cursor:default}
.hero-foot--controls .hf-action-hint{grid-column:1/-1;color:var(--soft);font-size:.65rem;text-align:right}
.hero-foot--controls .hf-motion-icon{display:block;width:.7rem;height:.7rem;border-inline:2px solid currentColor;box-sizing:border-box}
.motion-paused .hero-foot--controls .hf-motion-icon{width:0;height:0;border:0;border-top:.35rem solid transparent;border-bottom:.35rem solid transparent;border-left:.55rem solid currentColor}
.hero-foot--controls :is(button,summary):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.hero-foot--controls summary:hover{color:var(--ink)}
@media(max-width:1050px){
  .hero-foot--controls{grid-template-columns:1fr;gap:1rem}
  .hero-foot--controls .hf-instruction{max-width:none}
  .hero-foot--controls .hf-right{border-top:1px solid var(--line2);padding-top:1rem}
}
@media(max-width:560px){
  .hero-foot--controls .hf-right{grid-template-columns:1fr;gap:.5rem}
  .hero-foot--controls .hf-actions{width:100%}
  .hero-foot--controls button{white-space:normal;padding-inline:.6rem;min-width:0}
  .hero-foot--controls .hf-action-hint{text-align:left}
}
html:not(.js) .hero-foot--controls :is(.hf-actions,#tide-instruction,#tide-keyboard){display:none}
.hero-foot--controls .hf-static{margin:0;color:var(--ink);font-size:.85rem}
@media print{.hero-foot--controls{display:none!important}}
.fig-box{max-width:100%;overflow-x:auto}
.work-body pre{max-width:100%;overflow-x:auto}
.flow-controls :focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.controlled-graph *, .controlled-graph.graph-live *{animation:none!important}
.controlled-graph .graph-stage,.controlled-graph .graph-arrow{opacity:1!important;transform:none!important}
.controlled-graph .graph-link{stroke-dashoffset:0!important}
.approach li{grid-template-columns:minmax(0,7fr) minmax(0,3fr);align-items:center}
.approach li>div{grid-column:1;grid-row:1}
.approach .ap-ic{grid-column:2;grid-row:1;justify-self:stretch;align-self:center;width:100%;height:6rem;border:0;background:none;display:flex;align-items:center;justify-content:center}
.approach .ap-ic .fe{width:3.8rem;height:3.8rem;stroke-width:1.2}
@media(max-width:600px){.approach li{grid-template-columns:minmax(0,1fr) 4rem;gap:1rem}.approach .ap-ic{width:4rem;height:4rem}.approach .ap-ic .fe{width:3rem;height:3rem}.flow-controls label{font-size:.8rem}}