body { min-width:0; }
.map-hero { padding-block: 4.5rem 4rem; }
.map-hero h1 { font-size:clamp(3rem,7vw,5.8rem); margin-bottom:1.4rem; }
.map-intro { max-width:65ch; font-size:1.1rem; }
.map-hero-links { display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; margin-top:2rem; }
.map-primer h2, #explorer h2, #mechanics-title { font-size:clamp(2rem,4vw,3.1rem); }
.map-toolbar { display:grid; grid-template-columns:1.35fr 1.35fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.map-toolbar label, .playback label { font-weight:650; color:var(--ink); }
.map-toolbar select, .playback select { display:block; width:100%; padding:.7rem; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:4px; margin-top:.35rem; }
.replay-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; background:var(--surface); }
.map-stage { padding:1.4rem; background:#fffdf8; min-width:0; }
.map-stage-heading { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; justify-content:space-between; font-size:.85rem; }
#concept-graph { width:100%; max-height:430px; }
#concept-graph .edge { stroke:#9ca8ae; stroke-width:2; }
#concept-graph .node { cursor:pointer; }
#concept-graph .node:focus { outline:none; }
#concept-graph .node:focus .focus-ring { stroke:#17201e; stroke-width:3; }
#concept-graph text { fill:#17201e; text-anchor:middle; font-family:var(--font-sans); pointer-events:none; }
#concept-graph .node-name { font-size:18px; font-weight:750; }
#concept-graph .node-value { font-size:17px; font-weight:750; }
#concept-graph .node-count { font-size:14px; }
.map-legend { max-width:460px; margin-inline:auto; font-size:.85rem; }
.estimate-gradient { height:16px; margin-top:.6rem; border:1px solid #8d9395; background:linear-gradient(90deg,#b64c00,#fff6e5 50%,#0868ac); }
.legend-ticks { display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; margin-top:.15rem; }
.map-legend p { margin:.7rem 0 0; }
.map-inspector { padding:1.6rem; border-left:1px solid var(--line); background:var(--paper); }
.map-inspector h3 { font-size:1.65rem; }
.event-note { min-height:3.3em; padding-left:.8rem; border-left:3px solid var(--rust); }
.state-details { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.state-details div { padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.state-details dt { font-size:.8rem; color:var(--muted); }
.state-details dd { margin:0; color:var(--ink); font-size:1.05rem; font-weight:650; font-variant-numeric:tabular-nums; }
.calculation { padding:.9rem; border:1px solid var(--line-strong); background:var(--surface); border-radius:6px; font-size:.9rem; }
.calculation p { margin:.4rem 0 0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.map-small { font-size:.85rem; margin-top:.8rem; }
.playback { padding:1.4rem; border:1px solid var(--line-strong); border-top:0; border-radius:0 0 12px 12px; background:var(--surface); }
.playback-buttons { display:flex; align-items:end; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; }
.playback button { background:var(--surface-strong); border:1px solid var(--line-strong); border-radius:5px; min-height:46px; padding:.5rem 1rem; color:var(--ink); font-weight:650; cursor:pointer; }
.playback button:hover:enabled { background:var(--teal-soft); }
.playback button:disabled { opacity:.5; cursor:default; }
.playback #play { background:var(--teal-dark); border-color:var(--teal-dark); color:white; min-width:100px; }
.playback #play:hover:enabled { background:var(--teal); }
.playback-buttons label { font-size:.8rem; margin-left:auto; }
.playback select { padding:.45rem; margin:0; min-height:46px; }
.playback > label { display:flex; justify-content:space-between; }
#scrub { display:block; width:100%; min-height:44px; margin:0; accent-color:var(--teal-dark); cursor:pointer; }
.replay-status { margin:.7rem 0 0; font-weight:600; min-height:3.3em; }
.trajectory-panel { margin-top:2rem; border:1px solid var(--line); border-radius:10px; padding:1.5rem; background:var(--surface); }
.trajectory-panel h3 { margin-bottom:.7rem; }
#trajectory { width:100%; max-height:300px; }
#trajectory text { font-size:15px; font-family:var(--font-sans); fill:var(--ink); }
.chart-key { display:flex; flex-wrap:wrap; gap:1.3rem; font-size:.85rem; margin-bottom:0; }
.chart-key span:nth-child(1) { color:#084f7b; }.chart-key span:nth-child(2) { color:#984200; }
.map-data { padding:1.2rem; margin-top:1rem; border:1px solid var(--line); background:var(--surface); border-radius:6px; }
.map-data summary { cursor:pointer; font-weight:650; color:var(--ink); }
.map-data ol { margin-top:1rem; margin-bottom:0; }
.map-data li { padding:.25rem; }
.map-data li[aria-current="step"] { background:var(--teal-soft); font-weight:650; }
.table-scroll { overflow-x:auto; margin-top:1rem; }
.map-data table { width:100%; border-collapse:collapse; font-size:.9rem; font-variant-numeric:tabular-nums; }
.map-data th,.map-data td { padding:.65rem; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.map-data caption { text-align:left; margin-bottom:.6rem; font-weight:650; }
.map-data tr[data-selected="true"] { background:var(--teal-soft); }
.map-notice { padding:1rem; border:1px solid var(--rust); }
@media(max-width:800px) {
  .replay-layout { grid-template-columns:1fr; }.map-inspector { border-left:0; border-top:1px solid var(--line); }
  .map-toolbar { grid-template-columns:1fr; }.map-stage { padding:1rem; }
  .map-stage-heading { font-size:.8rem; } .map-hero { padding-block:3rem; }
  .trajectory-panel { padding:1rem .6rem; }.trajectory-panel > div { padding-inline:.4rem; }
  .map-inspector { padding:1.2rem; } .playback { padding:1rem; }
  .playback-buttons label { margin-left:0; }.playback button { padding:.5rem .7rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.real-graph .real-edge{stroke:#aeb9be;stroke-width:1;opacity:.28}
.real-graph .real-node{stroke:#35413e;stroke-width:1.2;cursor:pointer}
.real-graph .real-node-label{font-size:21px;font-weight:750;text-anchor:start!important;paint-order:stroke;stroke:#fffdf8;stroke-width:5px;fill:#17201e}
.real-graph{min-height:280px}
.guided-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem;font-size:.9rem}
.guided-actions button{padding:.6rem .8rem;min-height:44px;border:1px solid var(--line-strong);border-radius:5px;background:var(--surface);color:var(--ink);cursor:pointer;font-weight:650}
.guided-actions button:hover{background:var(--teal-soft)}
@media(max-width:800px){.real-graph{min-height:250px}.real-toolbar>div{margin-bottom:0}.real-graph .real-node-label{font-size:27px}}