:root{
  --paper:#fff;--soft:#f8faf9;--ink:#172a35;--muted:#607381;--line:#d7e3e5;
  --shadow:0 24px 80px rgba(15,39,49,.22);--evidence:#168c81;--evidence-soft:#e2f4ef;
  --inference:#8061bd;--inference-soft:#f0eafa;--simulation:#347eb5;--simulation-soft:#e7f2fb;
  --interface:#64718c;--interface-soft:#edf0f6;--validation:#b87929;--validation-soft:#fff2db;--focus:#1775da;
  --card-shadow:0 1px 2px rgba(20,45,55,.06),0 4px 14px rgba(20,45,55,.06);
}
html[data-theme="dark"]{
  --paper:#182a35;--soft:#1e303b;--ink:#edf5f6;--muted:#b0c0c8;--line:#344a55;
  --shadow:0 24px 80px rgba(0,0,0,.52);--evidence:#58d6be;--evidence-soft:#173d3c;
  --inference:#c4a5fb;--inference-soft:#302944;--simulation:#86bffa;--simulation-soft:#203e59;
  --interface:#b3bed6;--interface-soft:#2a3447;--validation:#f2c177;--validation-soft:#443624;--focus:#8fc7ff;
  --card-shadow:0 1px 2px rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
button,a{font:inherit}button{cursor:pointer}
button:focus-visible,a:focus-visible,.map-viewport:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
a{color:var(--simulation)}
mjx-container{margin:0!important}

/* Toolbar */
.canvas-app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.map-toolbar{position:relative;flex:none;min-height:66px;padding:9px clamp(12px,1.6vw,28px);display:flex;align-items:center;justify-content:space-between;gap:10px 19px;background:var(--paper);border-bottom:1px solid var(--line);z-index:10}
.brand,.app-brand{display:flex;align-items:center;flex:none}
.app-brand{gap:11px}
.brand strong{display:block;font-size:15px;letter-spacing:-.02em}
.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.brand-mark{display:block;flex:none;width:40px;height:40px}
.map-legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 13px}
.legend-item{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;color:var(--muted)}
.shape-legend{font-weight:650;color:var(--ink)}
.legend-shape{display:inline-block;width:17px;height:12px;border:2px solid var(--muted);border-radius:4px;background:var(--paper)}
.optional-shape{border-style:dashed}
.chip-shape{width:20px;height:10px;border-width:1.5px;border-radius:999px}
.legend-swatch{width:11px;height:11px;border:2px solid var(--legend-color);background:var(--legend-soft);border-radius:3px}
.legend-line{width:20px;border-top:2px solid var(--muted)}
.legend-line.feedback{border-top-style:dashed;border-top-color:var(--validation)}
.toolbar-actions{display:flex;align-items:center;gap:9px;flex:none}
.map-controls{display:flex;align-items:center;gap:3px;white-space:nowrap}
.map-controls button{height:31px;min-width:31px;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:8px;font-size:15px;font-weight:700}
.map-controls button:hover,.toolbar-button:hover{border-color:var(--simulation)}
.map-controls span{min-width:42px;text-align:center;font-size:12px;color:var(--muted)}
.map-controls .fit-button{font-size:12px;padding:0 9px;font-weight:650;margin-left:5px}
.toolbar-button{height:31px;padding:0 10px;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:8px;font-size:12px;font-weight:700}
.toolbar-button[aria-expanded="true"]{border-color:var(--simulation);background:var(--simulation-soft)}
.toolbar-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.toolbar-button.with-icon{display:inline-flex;align-items:center;gap:6px;padding:0 10px 0 8px}
.toolbar-button .toolbar-icon,.fit-button .toolbar-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fit-button .toolbar-icon{display:none}
.mobile-only{display:none}
.popover{display:none;position:absolute;top:calc(100% + 6px);right:10px;left:10px;z-index:30;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--shadow)}
#legendPanel{display:none;flex-wrap:wrap;gap:8px 14px}
/* Settings menu (display-settings skill), sized and colored like the other toolbar buttons. */
.ds-menu{--ds-trigger-size:31px;--ds-trigger-radius:8px;--ds-icon-stroke:2;--ds-trigger-bg:var(--soft);--ds-trigger-border:var(--line);--ds-trigger-ink:var(--ink);--ds-hover:var(--soft);--ds-surface:var(--paper);--ds-border:var(--line);--ds-track:color-mix(in srgb,var(--line) 55%,var(--paper));--ds-selected:var(--paper);--ds-ink:var(--ink);--ds-ink-dim:var(--muted);--ds-ink-faint:var(--muted);--ds-focus:var(--focus)}
html[data-theme="dark"] .ds-menu{--ds-selected:color-mix(in srgb,var(--muted) 28%,var(--paper))}
.ds-trigger:hover{border-color:var(--simulation)}
.ds-trigger[aria-expanded="true"]{border-color:var(--simulation);background:var(--simulation-soft)}

/* Map canvas */
.map-viewport{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;background-color:var(--paper);background-image:radial-gradient(var(--line) .7px,transparent .7px);background-size:20px 20px}
.map-viewport.dragging{cursor:grabbing}
.map-plane{position:absolute;left:0;top:0;transform-origin:0 0}
.connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.connection{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:opacity .15s}
.connection.feedback{stroke-dasharray:8 7;stroke-width:2.2}
.connection.highlighted{stroke-width:3.4;opacity:1}
.connection.dimmed{opacity:.12}

/* Simulation environment group */
.env-box{position:absolute;z-index:0;border:2px dashed color-mix(in srgb,var(--simulation) 55%,transparent);border-radius:28px;background:color-mix(in srgb,var(--simulation-soft) 45%,transparent)}
.env-title{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);min-width:240px;max-width:calc(100% - 24px);padding:9px 16px 9px;border:2px solid var(--node-color);border-radius:14px;background:var(--paper);color:var(--ink);text-align:center;box-shadow:var(--card-shadow);transition:box-shadow .15s,opacity .15s}
.env-title .node-title{margin-top:3px;white-space:nowrap}
.map-plane:not(.layout-wide) .env-reads{display:none}
.env-title .node-short{margin-top:3px}
.env-title:hover,.env-title.active{box-shadow:0 0 0 3px var(--node-soft),0 10px 24px rgba(26,48,58,.14)}
.env-title.dimmed{opacity:.5}

/* Data tags on edges */
.edge-labels{position:absolute;inset:0;z-index:4;pointer-events:none}
.chip-group{position:absolute;display:flex;gap:6px;transform:translate(-50%,-50%);transition:opacity .15s}
.chip-group.dimmed .data-chip{border-color:color-mix(in srgb,var(--node-color) 22%,var(--paper));color:color-mix(in srgb,var(--ink) 28%,var(--paper));box-shadow:none}
.chip-group.dimmed .chip-sym{color:color-mix(in srgb,var(--node-color) 30%,var(--paper))}
.data-chip{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 9px;border:1.5px solid var(--node-color);border-radius:999px;background:var(--paper);color:var(--ink);box-shadow:0 2px 8px rgba(20,45,55,.1);font-size:12px;font-weight:650;line-height:1.1;white-space:nowrap;transition:background .15s,box-shadow .15s,color .15s,border-color .15s}
.data-chip:hover,.data-chip.active{background:var(--node-soft);box-shadow:0 0 0 3px var(--node-soft),0 4px 12px rgba(20,45,55,.16)}
.chip-sym{font-size:14px;color:var(--node-color)}
/* The wide layout sizes cards so each title and description fits on one line. */
.layout-wide .map-node .node-title,.layout-wide .map-node .node-short{white-space:nowrap}
.map-plane:not(.layout-wide) .chip-name{display:none}
.map-plane:not(.layout-wide) .data-chip{padding:4px 9px}

/* Module cards */
.map-node{position:absolute;z-index:3;transform:translate(-50%,-50%);width:var(--node-w,250px);text-align:left;color:var(--ink);border:2px solid var(--node-color);border-radius:14px;padding:12px 15px 11px;background:var(--paper);box-shadow:var(--card-shadow);transition:box-shadow .15s,opacity .15s,background .15s;user-select:none}
.map-node.optional{border-style:dashed}
.map-node:hover,.map-node.active{box-shadow:0 0 0 3px var(--node-soft),0 10px 24px rgba(26,48,58,.14);z-index:5}
.map-node.dimmed{opacity:.45}
.node-category{display:block;font-size:10.5px;letter-spacing:.05em;font-weight:750;color:var(--node-color);white-space:nowrap}
:lang(en) .node-category{font-size:11px;letter-spacing:.01em;font-weight:700}
.node-title{display:block;margin-top:6px;font-size:17px;line-height:1.2;letter-spacing:-.02em;font-weight:850}
.node-short{display:block;margin-top:4px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.node-formula{display:block;margin-top:9px;padding-top:7px;border-top:1px solid var(--line);font-size:12px;line-height:1.1;color:var(--node-color);white-space:nowrap}

/* Detail popup */
/* The popup is centered by a grid layer rather than a transform, and the backdrop is not blurred:
   both kept a large composited layer that flickered on scroll and hover. */
.modal-layer{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.modal-layer[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(8,22,31,.55)}
.detail-modal{position:relative;width:min(900px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);animation:modal-in .18s ease-out}
.detail-modal.wide{width:min(1180px,100%)}
@keyframes modal-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal-header{flex:none;padding:18px 22px 16px 26px;border-bottom:1px solid var(--line);background:radial-gradient(circle at top right,var(--detail-soft,var(--inference-soft)),transparent 62%)}
.modal-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-kicker{font-size:12px;font-weight:750;letter-spacing:.05em;color:var(--detail-accent,var(--inference))}
:lang(en) .modal-kicker{font-size:12.5px;letter-spacing:.01em;font-weight:700}
.modal-header h2{font-size:26px;letter-spacing:-.04em;margin:4px 0 6px}
.modal-title-symbol{font-size:.8em;color:var(--detail-accent,var(--inference));white-space:nowrap}
.modal-header p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}
.modal-actions{flex:none;display:flex;gap:6px}
.modal-button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:22px;line-height:1}
.modal-button:hover:not(:disabled){border-color:var(--detail-accent)}
.modal-button:disabled{opacity:.35;cursor:default}
.modal-content{min-height:0;padding:21px 26px 26px;overflow:auto;overscroll-behavior:contain}
.detail-section{margin:0 0 22px}
.detail-section:last-child{margin-bottom:0}
.detail-section h3{font-size:12px;letter-spacing:.04em;color:var(--muted);margin:0 0 9px}
:lang(en) .detail-section h3{font-size:12.5px;letter-spacing:.01em}
.detail-section ul{margin:0;padding-left:20px}
.detail-section li{font-size:14px;line-height:1.55;margin:6px 0}
.challenge-section li::marker{color:var(--validation)}
.detail-formula{padding:12px 15px;border-radius:12px;background:var(--soft);border:1px solid var(--line);font-size:17px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.example-tags{display:flex;flex-wrap:wrap;gap:8px}
.example-tags span{padding:6px 11px;border-radius:999px;background:var(--detail-soft,var(--soft));border:1px solid color-mix(in srgb,var(--detail-accent) 30%,transparent);font-size:13.5px;line-height:1.3}
.io-terms{display:flex;flex-direction:column;gap:6px}
.io-term{display:grid;grid-template-columns:88px minmax(0,1fr) 14px;gap:12px;align-items:center;width:100%;padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--term-color,var(--line));border-radius:8px;background:var(--paper);color:var(--ink);font-size:14px;line-height:1.5;text-align:left}
.io-term.is-link{transition:border-color .15s,box-shadow .15s}
.io-term.is-link:hover{border-color:var(--term-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--term-color) 22%,transparent)}
.io-symbol{color:var(--term-color,var(--ink));font-size:15px;white-space:nowrap}
.io-description{min-width:0}
.io-go{color:var(--muted);font-size:17px;line-height:1}
.io-sub{display:flex;flex-direction:column;gap:6px;margin:0 0 4px 28px;padding-left:12px;border-left:2px solid var(--line)}
.term-examples{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.term-examples i{font-style:normal;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--soft);border:1px solid var(--line);color:var(--muted)}
.origin-evidence{--term-color:var(--evidence)}.origin-inference{--term-color:var(--inference)}.origin-simulation{--term-color:var(--simulation)}.origin-interface{--term-color:var(--interface)}.origin-validation{--term-color:var(--validation)}
.flow-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.flow-top{margin:0 0 20px;padding:10px 12px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.flow-col{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.flow-col b{font-size:12px;color:var(--muted);margin-right:2px}
.flow-arrow{color:var(--muted);font-size:18px}
.link-chip{padding:6px 11px;border:1.5px solid var(--node-color);border-radius:10px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:700;transition:background .15s}
.link-chip:hover{background:var(--node-soft)}
.card-table{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card-row{display:grid;grid-template-columns:var(--cols);gap:16px;padding:11px 15px;font-size:13.5px;line-height:1.5}
.card-row+.card-row{border-top:1px solid var(--line)}
.card-head{background:var(--soft);font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--muted);padding-top:9px;padding-bottom:9px}
.row-name{font-weight:800;overflow-wrap:anywhere}
.row-name a{font-size:14.5px;text-decoration:none}
.row-name a:hover{text-decoration:underline}

/* Harness levels. One blue ramp marks the level everywhere: stronger fill, more trust. */
.lv-1{--lv-mix:9%}.lv-2{--lv-mix:18%}.lv-3{--lv-mix:30%}.lv-4{--lv-mix:43%}.lv-5{--lv-mix:58%}
.lv-1,.lv-2,.lv-3,.lv-4,.lv-5{--lv-fill:color-mix(in srgb,var(--simulation) var(--lv-mix),var(--paper))}
.levels-table .card-row{gap:14px;align-items:center}
.levels-table .card-head{align-items:end}
.level-tag{display:flex;align-items:center;gap:10px}
.level-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--lv-fill);color:var(--ink)}
.level-icon svg,.task-chip svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.level-icon .fill,.task-chip .fill{fill:currentColor}
.lv-1 .level-icon{border:1.5px dashed color-mix(in srgb,var(--simulation) 45%,var(--line))}
.level-name{display:flex;flex-direction:column;gap:1px;line-height:1.2}
.level-name b{font-size:12px;font-weight:800;color:var(--simulation)}
.level-name span{font-size:14.5px;font-weight:800;white-space:nowrap}
.trust-words{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.levels-note{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
/* Each band is a trapezoid inset by one step per level, so the stacked bands form a pyramid. */
.pyramid{display:flex;flex-direction:column;gap:3px}
.tier{display:grid;grid-template-columns:136px minmax(0,1fr);gap:14px;align-items:center}
.tier-slot{container-type:inline-size}
.tier-band{--step:clamp(6px,4.2cqw,42px);margin-inline:calc((var(--k) - 1) * var(--step));min-height:60px;padding:10px calc(var(--step) + 10px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;background:var(--lv-fill);clip-path:polygon(var(--step) 0,calc(100% - var(--step)) 0,100% 100%,0 100%)}
.task-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border:1px solid color-mix(in srgb,var(--simulation) 35%,var(--line));border-radius:999px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:650;line-height:1.25}
.task-chip svg{flex:none;width:18px;height:18px;color:var(--simulation)}

/* Phone layout */
.layout-compact .map-node{padding:9px 10px 8px;border-width:1.5px}
.layout-compact .node-category{font-size:9px}
.layout-compact .node-title{font-size:14px;margin-top:4px}
.layout-compact .node-short{font-size:10.5px;margin-top:3px}
.layout-compact .node-formula{font-size:10.5px;margin-top:6px;padding-top:5px}
.layout-compact .data-chip{padding:3px 8px}
.layout-compact .chip-sym{font-size:12.5px}
.layout-tall .env-title{min-width:220px}
.layout-compact .env-title{min-width:170px;padding:7px 10px;border-width:1.5px}

@media(max-width:1320px) and (min-width:651px){.map-toolbar{flex-wrap:wrap}.map-legend{order:3;width:100%;justify-content:flex-start}.toolbar-actions{margin-left:auto}}
/* Tables fold into cards on narrow screens. */
@media(max-width:700px){
  .card-table{border:0;border-radius:0;overflow:visible;display:flex;flex-direction:column;gap:9px}
  .card-row{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
  .card-row+.card-row{border-top:1px solid var(--line)}
  .card-row [data-label]{display:block;margin-top:8px}
  .card-row [data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--muted)}
  .card-row.card-head{display:none}
}
@media(max-width:650px){
  .map-toolbar{flex-wrap:nowrap;padding:8px 10px;gap:8px}.app-brand{gap:8px}.brand strong{font-size:13px}.brand small{font-size:10px}.brand-mark{width:32px;height:32px}
  .map-legend,.zoom-step{display:none}
  .mobile-only{display:inline-flex;align-items:center}
  /* Phone toolbar buttons show icons only; their names stay in title and aria-label. */
  .toolbar-label{display:none}
  .map-controls .fit-button,.toolbar-button.with-icon,.toolbar-button.mobile-only{width:31px;padding:0;display:grid;place-items:center}
  .fit-button .toolbar-icon{display:block}
  .toolbar-actions{gap:6px;margin-left:auto}.map-controls .fit-button{margin-left:0}
  #legendPanel:not([hidden]){display:flex}
  .detail-modal{max-height:calc(100dvh - 18px);border-radius:15px}.modal-layer{padding:9px}
  .modal-header{padding:14px 14px 14px 18px}.modal-header h2{font-size:23px}.modal-content{padding:16px 16px 20px}
  .io-term{grid-template-columns:70px minmax(0,1fr) 12px;gap:10px;padding:9px 10px}
  .io-sub{margin-left:10px;padding-left:8px}
  .example-tags span{font-size:13px}
  .detail-formula{font-size:15px;padding:11px 12px}
  /* The pyramid keeps its width: each level shrinks to its tile over its number, and the taper flattens. */
  .tier{grid-template-columns:32px minmax(0,1fr);gap:8px}
  .tier .level-tag{flex-direction:column;gap:3px}
  .tier .level-icon{width:30px;height:30px;border-radius:9px}
  .tier .level-icon svg{width:18px;height:18px}
  .tier .level-name b{font-size:11px}
  .tier .level-name span{display:none}
  .tier-band{--step:clamp(5px,3cqw,42px);min-height:52px;padding:8px calc(var(--step) + 4px);gap:6px}
  .task-chip{font-size:12px;padding:4px 9px 4px 7px;gap:5px}
  .task-chip svg{width:16px;height:16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}