:root {
  color-scheme: dark;
  --ink: #e9edf0;
  --muted: #97a4ae;
  /* WCAG AA on the darkest and secondary panels for small technical copy. */
  --faint: #84919b;
  --panel: #111a23;
  --panel-2: #15212b;
  --line: rgba(181, 199, 210, .16);
  --line-strong: rgba(181, 199, 210, .28);
  --blue: #4ea1cf;
  --blue-soft: rgba(78, 161, 207, .14);
  --orange: #d98332;
  --orange-soft: rgba(217, 131, 50, .13);
  --green: #72a58a;
  --red: #c97066;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0c141c; }
body { color: var(--ink); font-family: var(--sans); font-size: 14px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
#scene-canvas:focus-visible { outline: 3px solid var(--blue); outline-offset: -5px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 10001; background: #fff; color: #111; padding: 10px 14px; }
.skip-link:focus { top: 12px; }

.app-shell { width: 100%; height: 100vh; min-height: 0; display: grid; grid-template-rows: 70px minmax(0, 1fr) 34px; overflow: hidden; background: radial-gradient(circle at 56% -20%, #23313b 0, #0f1821 40%, #0b1219 100%); }
.product-header { display: grid; grid-template-columns: 270px 1fr auto; align-items: center; gap: 24px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(12, 20, 28, .92); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--mono); letter-spacing: .18em; }
.brand-mark { font-weight: 760; font-size: 15px; }
.brand-rule { width: 34px; height: 1px; background: var(--faint); }
.brand-sub { color: var(--muted); font-size: 9px; }
.product-title { justify-self: center; display: flex; align-items: baseline; gap: 14px; font-family: var(--mono); }
.product-title span { color: var(--blue); font-size: 9px; letter-spacing: .18em; }
.product-title strong { font-size: 14px; letter-spacing: .11em; }
.product-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(217, 131, 50, .1); }
.header-tools { justify-self: end; display: flex; align-items: center; gap: 16px; }
.language-switch { display: flex; align-items: center; gap: 5px; color: var(--faint); font: 9px var(--mono); letter-spacing: .12em; }
.language-switch a { padding: 8px 3px; color: inherit; text-decoration: none; }
.language-switch a:hover, .language-switch a[aria-current="true"] { color: var(--blue); }

.workspace { min-height: 0; display: grid; grid-template-columns: minmax(215px, 16vw) minmax(520px, 1fr) minmax(300px, 24vw); }
.method-rail, .intelligence-panel { min-width: 0; background: rgba(14, 23, 31, .94); }
.method-rail { border-right: 1px solid var(--line); padding: 26px 18px 18px; display: flex; flex-direction: column; overflow: auto; }
.rail-head h1, .panel-head h2, .player-heading h2 { margin: 7px 0 0; font-weight: 520; }
.rail-head h1 { font-size: 19px; line-height: 1.2; }
.rail-head p { margin: 10px 0 0; color: var(--muted); line-height: 1.55; font-size: 12px; }
.micro-label { color: var(--blue); font: 9px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.method-list { display: grid; gap: 7px; margin-top: 22px; }
.method-button { position: relative; width: 100%; min-width: 0; min-height: 70px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.018); border-radius: 3px; padding: 12px 12px 11px 45px; text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.method-button:hover { border-color: var(--line-strong); background: rgba(255,255,255,.035); transform: translateX(2px); }
.method-button[aria-current="true"] { border-color: rgba(78,161,207,.65); background: var(--blue-soft); }
.method-index { position: absolute; left: 12px; top: 14px; color: var(--faint); font: 10px var(--mono); }
.method-button[aria-current="true"] .method-index { color: var(--blue); }
.method-name { display: block; min-width: 0; font-size: 12px; font-weight: 620; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.method-meta { display: block; min-width: 0; color: var(--muted); margin-top: 7px; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.scope-note { display: flex; gap: 10px; margin-top: auto; padding: 15px 2px 2px; color: var(--muted); border-top: 1px solid var(--line); }
.scope-icon { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--blue); font: 10px var(--mono); }
.scope-note strong { display: block; color: var(--ink); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.scope-note p { margin: 6px 0 0; font-size: 10px; line-height: 1.5; }

.visual-workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(360px, 1fr) auto; background: #101923; }
.scene-frame { position: relative; width: 100%; min-width: 0; min-height: 0; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(#9aa8ae 0 44%, #6f7c62 44% 100%); }
#scene-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#scene-canvas:active { cursor: grabbing; }
.scene-loading { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; gap: 13px; text-align: center; color: #c9d1d7; background: #16212a; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: opacity .4s; }
.scene-loading.is-hidden { opacity: 0; pointer-events: none; }
.loader-line { display: block; width: 160px; height: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.loader-line::after { content: ""; display: block; height: 100%; width: 50%; background: var(--blue); animation: loading 1.15s ease-in-out infinite alternate; }
@keyframes loading { from { transform: translateX(-100%); } to { transform: translateX(200%); } }
.scene-topline { position: absolute; z-index: 3; top: 18px; left: 20px; right: 18px; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.scene-topline h2 { margin: 5px 0 0; font-size: 21px; font-weight: 520; letter-spacing: -.01em; color: #15232d; text-shadow: 0 1px 10px rgba(230,238,240,.45); }
.scene-topline .micro-label { color: #215f7d; }
.scene-actions { display: flex; gap: 7px; pointer-events: auto; }
.icon-button, .view-button { height: 34px; border: 1px solid rgba(15,35,46,.25); background: rgba(236,240,239,.78); color: #1b2b35; backdrop-filter: blur(8px); border-radius: 3px; cursor: pointer; }
.icon-button { width: 34px; display: grid; place-items: center; }
.icon-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.view-button { display: flex; align-items: center; gap: 7px; padding: 0 10px; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.button-led { width: 6px; height: 6px; border-radius: 50%; background: #68747a; }
.view-button[aria-pressed="true"] .button-led { background: var(--blue); box-shadow: 0 0 0 3px rgba(78,161,207,.15); }
.scene-legend { position: absolute; z-index: 3; right: 18px; bottom: 67px; display: flex; gap: 14px; padding: 8px 10px; border: 1px solid rgba(22,38,46,.2); border-radius: 3px; background: rgba(235,239,237,.76); color: #263842; backdrop-filter: blur(8px); font: 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.scene-legend > span { display: flex; align-items: center; gap: 5px; }
.scene-legend i { display: block; width: 12px; height: 3px; }
.environment-hud { position: absolute; z-index: 6; top: 70px; right: 14px; width: min(244px, calc(100% - 28px)); display: grid; gap: 5px; border: 1px solid rgba(218,230,234,.42); border-radius: 4px; padding: 7px; background: rgba(10,20,28,.82); color: var(--ink); box-shadow: 0 12px 30px rgba(6,12,17,.22); backdrop-filter: blur(12px); }
.environment-hud-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.environment-hud-head > b { color: #d8e2e6; font: 8px/1.3 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.environment-hud-actions { display: flex; align-items: center; gap: 4px; }
.environment-hud-body { display: grid; gap: 5px; }
.environment-hud-toggle { width: 28px; min-width: 28px; height: 28px; border: 1px solid rgba(116,180,214,.46); border-radius: 3px; background: rgba(16,35,46,.76); color: #b9d9e9; cursor: pointer; }
.environment-hud-toggle span { display: inline-block; font: 16px/1 var(--mono); transform: translateY(2px); }
.environment-hud[data-collapsed="true"] { width: auto; min-width: 0; }
.environment-hud[data-collapsed="true"] .environment-hud-body,
.environment-hud[data-collapsed="true"] .environment-info-button { display: none; }
.environment-hud[data-collapsed="true"] .environment-hud-toggle span { transform: translateY(-1px) rotate(180deg); }
.environment-hud .environment-slider-list { gap: 5px; padding: 6px 7px; background: rgba(2,9,14,.35); }
.environment-hud .environment-slider { gap: 2px; }
.environment-hud .environment-slider small,
.environment-hud .environment-info-copy { display: none; }
.environment-hud .environment-info-button { justify-self: end; min-height: 28px; padding: 2px; }
.environment-hud .environment-reference-details { position: absolute; top: calc(100% + 5px); right: 0; width: min(360px, calc(100vw - 28px)); max-height: 190px; overflow: auto; box-shadow: 0 14px 32px rgba(3,8,12,.36); }
.environment-event-play { position: absolute; z-index: 7; right: 18px; bottom: 17px; min-width: 154px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(78,161,207,.58); border-radius: 4px; background: rgba(10,22,31,.88); color: #dce6e9; box-shadow: 0 8px 22px rgba(3,9,14,.25); cursor: pointer; backdrop-filter: blur(10px); }
.environment-event-play span { color: var(--blue); }
.environment-event-play b { font: 8px/1.2 var(--mono); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.environment-event-play[aria-pressed="true"] { border-color: rgba(217,131,50,.7); background: rgba(58,37,22,.9); }
.environment-event-play[aria-pressed="true"] span { color: var(--orange); }
.environment-event-callout { position: absolute; z-index: 8; left: 18px; bottom: 69px; width: min(340px, calc(100% - 36px)); border: 1px solid rgba(217,131,50,.64); border-left-width: 4px; border-radius: 4px; padding: 11px 12px; background: rgba(10,19,27,.94); color: var(--ink); box-shadow: 0 14px 34px rgba(3,8,12,.35); }
.environment-event-callout[hidden] { display: none; }
.environment-event-callout b { color: var(--orange); font: 9px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.environment-event-callout p { margin: 6px 0 0; color: #c6d0d4; font-size: 10px; line-height: 1.45; }
.legend-final { background: #3e4d53; }
.legend-temp { background: #c6762d; }
.legend-action { background: #287ba5; }
.scene-readout { position: absolute; z-index: 3; left: 19px; bottom: 49px; max-width: 330px; padding: 8px 10px; border-left: 2px solid var(--blue); background: rgba(17,26,35,.84); color: #dbe4e8; font: 9px/1.45 var(--mono); letter-spacing: .04em; opacity: 0; transform: translateY(5px); transition: opacity .2s, transform .2s; }
.scene-readout.is-visible { opacity: 1; transform: none; }
.scene-help { position: absolute; z-index: 3; left: 19px; bottom: 17px; color: rgba(25,43,52,.75); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.state-player { width: 100%; min-width: 0; overflow: hidden; padding: 16px 20px 17px; background: rgba(16,25,35,.98); }
.player-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.player-heading h2 { font: 14px var(--mono); letter-spacing: .06em; }
.severity { flex: 0 0 auto; border: 1px solid; border-radius: 2px; padding: 5px 7px; font: 8px var(--mono); letter-spacing: .13em; }
.severity-normal { color: var(--green); border-color: rgba(114,165,138,.4); background: rgba(114,165,138,.08); }
.severity-attention { color: #dfa15d; border-color: rgba(223,161,93,.5); background: rgba(223,161,93,.09); }
.severity-critical { color: #dc7a6d; border-color: rgba(220,122,109,.55); background: rgba(220,122,109,.1); }
.state-description { min-height: 34px; max-width: 860px; margin: 9px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.state-context { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 0 12px; color: var(--faint); font: 8px/1.4 var(--mono); }
.state-context span { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.state-context b { color: var(--blue); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.state-context i { overflow: hidden; color: var(--muted); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.transition-status { display: flex; align-items: center; gap: 9px; min-height: 34px; margin: -2px 0 10px; border: 1px solid rgba(217,131,50,.38); border-left-width: 3px; border-radius: 2px; padding: 7px 9px; background: rgba(217,131,50,.08); color: #d9e1e5; }
.transition-status[hidden] { display: none; }
.transition-status-mark { flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--orange); font: 9px var(--mono); }
.transition-status-copy { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; font: 8px/1.45 var(--mono); }
.transition-status-copy strong { color: var(--orange); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.transition-status-copy > span { color: var(--muted); }
.transition-status[data-transition-mode="DIDACTIC_TRANSITION"] { border-color: rgba(78,161,207,.34); background: rgba(78,161,207,.07); }
.transition-status[data-transition-mode="DIDACTIC_TRANSITION"] .transition-status-mark,
.transition-status[data-transition-mode="DIDACTIC_TRANSITION"] .transition-status-copy strong { color: var(--blue); }
.state-track { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.state-node { min-width: 0; border: 0; border-top: 2px solid var(--line-strong); background: rgba(255,255,255,.018); padding: 8px 6px 7px; color: var(--faint); text-align: left; cursor: pointer; }
.state-node { flex: 0 0 min(126px, 18vw); }
.state-node span { display: block; font: 8px var(--mono); letter-spacing: .08em; }
.state-node strong { display: block; overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.state-node.is-past { border-top-color: rgba(78,161,207,.55); }
.state-node[aria-selected="true"] { border-top-color: var(--blue); background: var(--blue-soft); }
.state-node[aria-selected="true"] span, .state-node[aria-selected="true"] strong { color: var(--ink); }
.transport { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.transport button { border-radius: 3px; cursor: pointer; }
.transport-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: transparent; }
.transport-icon:disabled { opacity: .35; cursor: default; }
.transport-icon svg { width: 15px; fill: currentColor; }
.play-button, .explore-button { height: 34px; border: 1px solid rgba(78,161,207,.45); background: var(--blue-soft); padding: 0 14px; display: flex; align-items: center; gap: 8px; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.play-button { min-width: 118px; }
.play-symbol { color: var(--blue); font-size: 11px; }
.play-button[aria-pressed="true"] { border-color: rgba(217,131,50,.55); background: var(--orange-soft); }
.play-button[aria-pressed="true"] .play-symbol { color: var(--orange); }
.explore-button { margin-left: 5px; border-color: var(--line); background: transparent; }
.explore-button[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); }
.crosshair { width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%; position: relative; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: currentColor; }
.crosshair::before { width: 16px; height: 1px; left: -3px; top: 5px; }
.crosshair::after { width: 1px; height: 16px; left: 5px; top: -3px; }
.progress-copy { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font: 9px var(--mono); }
.progress-copy i { width: 38px; height: 1px; background: var(--line-strong); }

.intelligence-panel { border-left: 1px solid var(--line); padding: 24px 18px 15px; overflow: auto; }
.panel-head h2 { font-size: 18px; }
.risk-card { margin-top: 17px; border: 1px solid var(--line); border-radius: 3px; background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.005)); }
.risk-empty { padding: 28px 18px; text-align: center; }
.risk-check { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 12px; border: 1px solid rgba(114,165,138,.38); border-radius: 50%; color: var(--green); }
.risk-empty h3 { margin: 0; font-size: 14px; font-weight: 550; }
.risk-empty p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
#risk-content { padding: 15px; }
.risk-selector { display: flex; gap: 5px; overflow-x: auto; margin: 0 0 13px; padding: 0 0 9px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.risk-selector[hidden] { display: none; }
.risk-selector button { flex: 0 0 auto; max-width: 170px; min-height: 30px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 2px; background: rgba(255,255,255,.018); color: var(--muted); cursor: pointer; font: 7.5px/1.25 var(--mono); letter-spacing: .035em; text-align: left; }
.risk-selector button:hover, .risk-selector button[aria-selected="true"] { border-color: rgba(201,112,102,.6); background: rgba(201,112,102,.09); color: var(--ink); }
.risk-kicker { display: flex; justify-content: space-between; gap: 10px; color: var(--orange); font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.risk-kicker b { color: var(--muted); font-weight: 500; }
#risk-title { margin: 9px 0 8px; font-size: 18px; line-height: 1.18; font-weight: 540; }
.risk-status { display: flex; flex-wrap: wrap; gap: 5px; }
.risk-status span { border: 1px solid var(--line); color: var(--muted); padding: 4px 6px; font: 7px var(--mono); letter-spacing: .1em; }
.risk-sections { margin: 15px 0 0; }
.risk-sections > div { border-top: 1px solid var(--line); padding: 10px 0; }
.risk-sections dt { color: var(--blue); font: 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.risk-sections dd { margin: 5px 0 0; color: #c0c9cf; font-size: 10.5px; line-height: 1.47; }
.risk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.risk-actions button { min-height: 46px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.02); display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); cursor: pointer; font: 8px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.risk-actions button:hover, .risk-actions button[aria-pressed="true"] { border-color: rgba(78,161,207,.5); color: var(--ink); background: var(--blue-soft); }
.vector-icon { color: var(--orange); font-size: 16px; }
.brace-icon { color: var(--blue); font-size: 14px; }
.scope-limit { margin: 11px 0 0; padding-left: 8px; border-left: 1px solid var(--orange); color: var(--faint); font: 8px/1.45 var(--mono); }
.environment-section, .evidence-section, .calculation-section { margin-top: 12px; border-top: 1px solid var(--line); }
.environment-section { padding-top: 13px; }
.environment-heading { display: grid; gap: 4px; }
.environment-heading h3 { margin: 0; font-size: 12px; font-weight: 540; }
.environment-scenario { display: grid; gap: 9px; margin-top: 10px; }
.scenario-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.scenario-mode button { min-height: 31px; border: 1px solid var(--line); border-radius: 2px; background: rgba(255,255,255,.018); color: var(--faint); cursor: pointer; font: 7.5px/1.25 var(--mono); letter-spacing: .055em; text-transform: uppercase; }
.scenario-mode button[aria-pressed="true"] { border-color: rgba(78,161,207,.56); background: var(--blue-soft); color: var(--ink); }
.environment-slider-list { display: grid; gap: 8px; padding: 9px; border: 1px solid var(--line); background: rgba(17,29,39,.52); }
.environment-slider { display: grid; gap: 5px; }
.environment-slider > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.environment-slider b { color: var(--muted); font: 8px/1.3 var(--mono); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.environment-slider output { color: var(--ink); font: 8px/1.3 var(--mono); }
.environment-slider input { --likely-start: 20%; --likely-end: 80%; width: 100%; height: 18px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.environment-slider input::-webkit-slider-runnable-track { height: 5px; border-radius: 2px; background: linear-gradient(90deg, #34414a 0 var(--likely-start), rgba(78,161,207,.55) var(--likely-start) var(--likely-end), #34414a var(--likely-end) 100%); }
.environment-slider input::-moz-range-track { height: 5px; border-radius: 2px; background: linear-gradient(90deg, #34414a 0 var(--likely-start), rgba(78,161,207,.55) var(--likely-start) var(--likely-end), #34414a var(--likely-end) 100%); }
.environment-slider input::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -4.5px; appearance: none; border: 2px solid #dce4e7; border-radius: 50%; background: #277aa4; box-shadow: 0 0 0 2px rgba(12,20,28,.7); }
.environment-slider input::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #dce4e7; border-radius: 50%; background: #277aa4; box-shadow: 0 0 0 2px rgba(12,20,28,.7); }
.environment-slider input[data-plausibility="OUTSIDE_LIKELY_RANGE"]::-webkit-slider-thumb { background: var(--orange); }
.environment-slider input[data-plausibility="OUTSIDE_LIKELY_RANGE"]::-moz-range-thumb { background: var(--orange); }
.environment-slider small { color: var(--faint); font: 7px/1.35 var(--mono); }
.environment-info-button { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; border: 0; background: none; padding: 7px 0; color: var(--blue); cursor: pointer; font: 8px/1.3 var(--mono); }
.environment-info-button > span:first-child { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; }
.environment-reference-details { padding: 9px; border: 1px solid var(--line); background: rgba(8,14,20,.42); color: var(--muted); font: 8px/1.5 var(--mono); }
.environment-reference-details p { margin: 0 0 7px; }
.environment-reference-details p:last-child { margin: 7px 0 0; }
.environment-reference-links { display: flex; flex-wrap: wrap; gap: 5px; }
.environment-reference-links a { color: var(--blue); text-decoration: none; }
.environment-reference-limitation { padding-left: 7px; border-left: 1px solid var(--orange); color: var(--faint); }
.environment-thermal-calculation-info { display: grid; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.environment-thermal-calculation-info > h3 { margin: 0; color: var(--ink); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.environment-thermal-calculation-info p { margin: 0; }
.environment-thermal-formula { color: #c8d1d6; }
.environment-response-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-left: 3px solid var(--faint); background: rgba(255,255,255,.018); }
.environment-response-card[data-status="WITHIN_REFERENCE"] { border-left-color: var(--green); }
.environment-response-card[data-status="INCREASED_SENSITIVITY"], .environment-response-card[data-status="CASE_SPECIFIC_WIND"] { border-left-color: var(--orange); }
.environment-response-card[data-status="REFERENCE_LIMIT_EXCEEDED"] { border-left-color: var(--red); }
.environment-response-head { display: flex; align-items: center; gap: 8px; }
.environment-response-head > span { flex: 0 0 22px; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; color: var(--orange); font: 9px var(--mono); }
.environment-response-head > div { display: grid; gap: 2px; }
.environment-response-head b { font-size: 10px; font-weight: 560; }
.environment-response-head small { color: var(--faint); font: 7px/1.3 var(--mono); text-transform: uppercase; }
.environment-response-card dl { display: grid; gap: 4px; margin: 0; }
.environment-response-card dl > div { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.environment-response-card dt, .environment-response-card dd { font: 7.5px/1.35 var(--mono); }
.environment-response-card dt { color: var(--faint); }
.environment-response-card dd { margin: 0; color: #c7d0d5; text-align: right; }
.environment-response-card > p { margin: 0; color: var(--muted); font: 8px/1.45 var(--mono); }
.environment-evidence { display: grid; gap: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
.environment-evidence > small { color: var(--blue); font: 7px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.environment-evidence-list { display: grid; gap: 5px; }
.environment-evidence-list .source-card { padding: 6px; }
.environment-evidence-list .source-card strong { font-size: 7.5px; }
.environment-evidence-list .source-card small { font-size: 6.5px; }
.environment-amplification { color: var(--orange) !important; }
#environment-shading { min-height: 38px; border: 1px solid rgba(78,161,207,.42); border-radius: 2px; background: var(--blue-soft); color: #d7e2e7; cursor: pointer; font: 7.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
#environment-shading:disabled { opacity: .35; cursor: not-allowed; }
#environment-shading[aria-pressed="true"] { border-color: var(--green); background: rgba(114,165,138,.13); }
.environment-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.environment-before-after > div { display: grid; gap: 3px; padding: 7px; border: 1px solid var(--line); font: 7.5px/1.35 var(--mono); }
.environment-before-after b { color: var(--blue); font-weight: 600; }
.environment-before-after span { color: var(--muted); }
.environment-secondary-effect { padding-left: 7px; border-left: 1px solid var(--orange); color: var(--faint) !important; }
.environment-status-grid { display: grid; gap: 6px; margin: 10px 0 0; }
.environment-status-grid div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 7px 8px; border: 1px solid var(--line); background: rgba(17, 29, 39, .52); }
.environment-status-grid dt { color: var(--muted); font: 8px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.environment-status-grid dd { margin: 0; color: var(--faint); font: 8px/1.3 var(--mono); letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.environment-scope { margin: 9px 0 0; padding-left: 8px; border-left: 1px solid var(--orange); color: var(--faint); font: 8px/1.55 var(--mono); }
.section-toggle { width: 100%; border: 0; background: transparent; padding: 13px 0 9px; display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; }
.section-toggle > span { display: grid; gap: 4px; }
.section-toggle strong { font-size: 12px; font-weight: 540; }
.section-toggle svg { width: 16px; fill: none; stroke: var(--muted); stroke-width: 1.5; transition: transform .2s; }
.section-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.evidence-list { display: grid; gap: 6px; padding-bottom: 4px; }
.source-card { display: grid; grid-template-columns: 31px 1fr auto; gap: 8px; align-items: start; padding: 9px; border: 1px solid var(--line); border-radius: 3px; color: inherit; text-decoration: none; transition: border-color .18s; }
.source-card:hover { border-color: rgba(78,161,207,.45); }
.source-level { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(78,161,207,.35); color: var(--blue); font: 9px var(--mono); }
.source-card strong { display: block; font-size: 9.5px; line-height: 1.4; font-weight: 540; }
.source-card small { display: block; margin-top: 3px; color: var(--faint); font: 8px/1.35 var(--mono); }
.source-link { color: var(--blue); font-size: 12px; }
.calculation-content { padding: 2px 0 4px; }
.calc-notice { margin: 0 0 9px; color: var(--orange); font: 8px/1.45 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.calc-result { border: 1px solid var(--line); padding: 10px; background: rgba(255,255,255,.018); }
.calc-result h3 { margin: 0 0 7px; font: 10px var(--mono); color: var(--ink); }
.calc-table { width: 100%; border-collapse: collapse; font: 8px/1.45 var(--mono); }
.calc-table th, .calc-table td { padding: 4px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.calc-table th { width: 42%; color: var(--faint); font-weight: 400; }
.calc-table td { color: #c3ccd1; word-break: break-word; }
.calc-valid { color: var(--green); }

.product-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px; border-top: 1px solid var(--line); color: var(--faint); background: #0b131a; font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.product-footer b { color: var(--muted); font-weight: 500; }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 190px minmax(480px,1fr) 285px; }
  .method-rail { padding-inline: 12px; }
  .intelligence-panel { padding-inline: 13px; }
  .product-title span { display: none; }
  .scene-legend { display: none; }
}

@media (max-width: 900px) {
  html, body { height: auto; min-height: 100%; overflow: auto; }
  .app-shell { display: block; height: auto; min-height: 100vh; overflow: visible; }
  .product-header { position: sticky; top: 0; z-index: 20; height: 60px; grid-template-columns: auto 1fr; padding: 0 14px; }
  .brand-sub, .brand-rule, .product-status { display: none; }
  .header-tools { gap: 0; }
  .product-title { justify-self: end; }
  .product-title strong { font-size: 11px; }
  .workspace { display: flex; flex-direction: column; }
  .method-rail { border: 0; padding: 18px 14px 12px; overflow: visible; }
  .rail-head p, .scope-note { display: none; }
  .rail-head h1 { font-size: 17px; }
  .method-list { grid-template-columns: repeat(4, minmax(0,1fr)); overflow-x: visible; margin-top: 12px; padding-bottom: 4px; }
  .method-button { min-height: 70px; padding-inline: 40px 9px; }
  .visual-workspace { min-height: auto; }
  .scene-frame { min-height: 56vh; }
  .intelligence-panel { border: 0; border-top: 1px solid var(--line); overflow: visible; padding: 20px 14px; }
  .product-footer { min-height: 38px; padding: 7px 14px; }
}

@media (max-width: 620px) {
  .product-title { display: none; }
  .method-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .method-button { min-height: 76px; padding: 10px 8px 9px 38px; }
  .method-index { left: 10px; top: 12px; }
  .method-name { font-size: clamp(10px, 3vw, 12px); }
  .scene-frame { min-height: 430px; }
  .scene-topline { top: 14px; left: 14px; right: 12px; }
  .scene-topline h2 { max-width: 220px; font-size: 17px; }
  .environment-hud { top: 62px; right: 8px; width: min(216px, calc(100% - 16px)); padding: 6px; }
  .environment-hud-head > b { font-size: 7px; }
  .environment-hud .scenario-mode button { min-height: 34px; padding-inline: 3px; }
  .environment-hud .environment-slider-list { gap: 5px; padding: 6px; }
  .environment-hud .environment-slider small { display: none; }
  .environment-hud .environment-info-copy { display: none; }
  .environment-hud .environment-info-button { min-width: 44px; min-height: 44px; justify-content: center; }
  .environment-hud .environment-hud-toggle { min-width: 44px; width: 44px; min-height: 44px; height: 44px; }
  .environment-reference-details .environment-reference-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .environment-hud[data-collapsed="true"] { width: 56px; padding: 5px; }
  .environment-hud[data-collapsed="true"] .environment-hud-head > b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #environment-shading { min-height: 44px; }
  .environment-event-play { right: 10px; bottom: 10px; min-width: 48px; width: 48px; min-height: 48px; padding: 0; border-radius: 50%; }
  .environment-event-play b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .environment-event-callout { left: 10px; right: 70px; bottom: 68px; width: auto; padding: 9px 10px; }
  .view-button span:last-child { display: none; }
  .scene-help { display: none; }
  .scene-readout { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .state-player { padding: 14px 12px; }
  .state-description { min-height: 50px; }
  .state-context { display: grid; gap: 3px; }
  .state-track { gap: 2px; }
  .state-node { padding-inline: 4px; }
  .state-node strong { display: none; }
  .explore-button { margin-left: 0; padding-inline: 10px; }
  .progress-copy { display: none; }
  .product-footer { flex-direction: column; align-items: flex-start; gap: 3px; }
}

@media (pointer: coarse) {
  .language-switch a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .icon-button, .view-button, .transport-icon, .play-button, .explore-button,
  .state-node, .risk-selector button, .section-toggle, .scenario-mode button,
  #environment-shading, .environment-info-button, .environment-event-play,
  .environment-reference-links a { min-height: 44px; }
  .environment-reference-links a { display: inline-flex; align-items: center; }
  .icon-button, .transport-icon { min-width: 44px; width: 44px; }
}

/* Compact, non-intercepting landing-page preview. The full route keeps the
   complete engineering workspace; only ?preview=1 activates this projection. */
html.preview,
html.preview body { height: 100%; min-height: 0; overflow: hidden; }
html.preview .app-shell { display: block; height: 100%; min-height: 0; }
html.preview .product-header,
html.preview .method-rail,
html.preview .intelligence-panel,
html.preview .product-footer,
html.preview .scene-legend,
html.preview .scene-help,
html.preview .scene-readout,
html.preview .environment-hud,
html.preview .environment-event-play,
html.preview .environment-event-callout,
html.preview .state-player > :not(.transport),
html.preview .transport > :not(#play-state),
html.preview .sawa-i18n-bar,
html.preview .sawa-i18n-banner { display: none !important; }
html.preview .workspace,
html.preview .visual-workspace,
html.preview .scene-frame { display: block; width: 100%; height: 100%; min-height: 0; }
html.preview .visual-workspace { position: relative; }
html.preview .scene-frame { border: 0; }
html.preview .scene-topline { top: 12px; left: 14px; right: 12px; }
html.preview .scene-topline h2 { max-width: min(68vw, 420px); font-size: clamp(15px, 3vw, 20px); }
html.preview .scene-actions { display: none; }
html.preview .state-player {
  position: absolute;
  z-index: 9;
  right: 12px;
  bottom: 12px;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
html.preview .transport { display: block; }
html.preview #play-state {
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(3, 9, 14, .34);
}
html.preview #play-state [data-copy] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}