:root {
  --ink: #11110f;
  --void: #090909;
  --bone: #e9e6dc;
  --bone-2: #dedacf;
  --paper: #f4f1e8;
  --muted: #73716a;
  --line: rgba(17, 17, 15, .17);
  --line-dark: rgba(244, 241, 232, .14);
  --orange: #ff4d00;
  --orange-soft: #ff743d;
  --white: #faf8f1;
  --display: "Archivo Black", Impact, sans-serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--bone); color: var(--ink); }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: var(--bone); font-family: var(--sans); font-variant-numeric: tabular-nums; }
button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 500; transform: translateY(-150%); padding: 10px 13px; color: var(--white); background: var(--orange); text-decoration: none; }
.skip-link:focus { transform: translateY(0); }

.app { min-height: 100vh; display: grid; grid-template-rows: 58px 1fr 62px; }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; color: var(--white); background: var(--void); border-bottom: 1px solid rgba(255,255,255,.13); }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 700 14px/1 var(--sans); letter-spacing: -.05em; }
.brand svg { width: 25px; height: 25px; fill: var(--white); }
.topnav { height: 100%; display: flex; align-items: stretch; }
.topnav button { position: relative; min-width: 84px; border: 0; padding: 0 16px; color: #77776f; background: transparent; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.topnav button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; transform: scaleX(0); background: var(--orange); transition: transform 180ms ease; }
.topnav button:hover, .topnav button.active { color: var(--white); }
.topnav button.active::after { transform: scaleX(1); }
.topnav sup { display: inline-grid; min-width: 15px; height: 15px; margin-left: 3px; place-items: center; border: 1px solid #3b3b38; border-radius: 50%; color: #8f8f87; font-size: 7px; }
.topmeta { justify-self: end; display: flex; align-items: center; gap: 12px; }
.live { display: inline-flex; align-items: center; gap: 6px; color: #85857d; font: 500 8px/1 var(--mono); letter-spacing: .1em; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px rgba(255,77,0,.8); }
.demo { padding: 4px 7px; border: 1px solid #3b3b38; color: #aaa9a0; font: 600 8px/1 var(--mono); letter-spacing: .12em; }
.avatar { width: 29px; height: 29px; border: 1px solid #494944; border-radius: 50%; color: var(--white); background: #161615; font: 600 8px/1 var(--mono); }

.command-trigger { justify-self: center; min-width: 310px; height: 34px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; border: 1px solid #353532; padding: 0 9px; color: #8e8e86; background: #141413; text-align: left; font: 500 9px/1 var(--mono); }
.command-trigger span { color: var(--orange); font-size: 14px; }.command-trigger kbd { padding: 4px 6px; border: 1px solid #3d3d39; color: #777770; background: #0d0d0c; font: 500 7px/1 var(--mono); }.command-trigger:hover { border-color: #575750; color: var(--white); }
.workspace-shell { min-height: 0; display: grid; grid-template-columns: 190px minmax(0,1fr); }
.workspace-rail { min-height: 0; display: flex; flex-direction: column; gap: 3px; padding: 13px 9px 10px; color: var(--white); background: #0c0c0b; border-right: 1px solid #282825; }
.rail-label { padding: 0 9px 8px; color: #53534e; font: 600 7px/1 var(--mono); letter-spacing: .14em; }
.workspace-button { position: relative; min-height: 57px; display: grid; grid-template-columns: 35px 1fr; grid-template-rows: 1fr 1fr; align-items: end; border: 0; padding: 9px; color: #6d6d66; background: transparent; text-align: left; }
.workspace-button > span { grid-row: 1/3; align-self: center; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #2b2b29; color: #686862; font: 600 6px/1 var(--mono); }.workspace-button strong { color: #adaca3; font-size: 12px; line-height: 1.15; }.workspace-button small { align-self: start; color: #686862; font-size: 8px; line-height: 1.2; }.workspace-button:hover { background: #131312; }.workspace-button.active { background: #181816; }.workspace-button.active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; background:var(--orange); }.workspace-button.active > span { color: var(--orange-soft); border-color: rgba(255,77,0,.4); }.workspace-button.active strong { color: var(--white); }
.rail-spacer { flex: 1; }.all-tools-button { min-height: 58px; display: grid; grid-template-columns: 1fr auto; border: 1px solid #2b2b28; padding: 9px; color: var(--white); background: #121211; text-align: left; }.all-tools-button strong { font-size: 9px; }.all-tools-button small { grid-column: 1; margin-top: 4px; color: #63635d; font-size: 7px; }.all-tools-button i { grid-column: 2; grid-row: 1/3; align-self: center; color: var(--orange); font-style: normal; }.all-tools-button:hover { background: #181816; }
.product-area { min-width: 0; min-height: 0; display: grid; grid-template-rows: 43px minmax(0,1fr); }
.context-bar { min-width: 0; display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--paper); overflow: hidden; }.context-bar > div { min-width: 175px; display: flex; flex-direction: column; justify-content: center; padding: 0 13px; border-right: 1px solid var(--line); }.context-bar > div span { color: var(--muted); font: 500 6px/1 var(--mono); letter-spacing: .1em; }.context-bar > div strong { margin-top: 4px; font-size: 10px; }.context-bar button { flex: 0 0 auto; border: 0; border-right: 1px solid var(--line); padding: 0 13px; color: var(--muted); background: transparent; font-size: 8px; }.context-bar button:hover,.context-bar button.active { color: var(--ink); background: rgba(17,17,15,.04); }.context-bar button.active { box-shadow: inset 0 -3px var(--orange); }.context-bar .more-tools { margin-left: auto; color: var(--orange); }

.review { min-height: 0; display: grid; grid-template-columns: minmax(245px, 23vw) minmax(0, 1fr) minmax(250px, 20vw); }
.book-stack { min-width: 0; display: grid; grid-template-rows: 1fr 1fr; color: var(--white); background: var(--void); border-right: 1px solid #2a2a27; }
.book-panel { position: relative; min-width: 0; overflow: hidden; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto auto; gap: 5px 14px; padding: clamp(18px, 2.2vw, 35px); border: 0; border-bottom: 1px solid var(--line-dark); color: #777770; background: #0c0c0b; text-align: left; isolation: isolate; transition: color 240ms ease, background 240ms ease; }
.book-panel:last-child { border-bottom: 0; }
.book-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(circle at 22% 80%, rgba(255,77,0,.14), transparent 45%); transition: opacity 240ms ease; }
.book-panel:hover, .book-panel.active { color: var(--white); background: #11110f; }
.book-panel.active::before { opacity: 1; }
.book-panel.active::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 4px; background: var(--orange); }
.book-topline { grid-column: 1/-1; display: flex; justify-content: space-between; color: currentColor; font: 500 8px/1 var(--mono); letter-spacing: .14em; }
.book-topline b { color: var(--orange-soft); font-weight: 600; }
.book-grade { grid-column: 2; grid-row: 2/4; display: grid; grid-template-columns: auto auto; align-content: start; align-items: flex-start; }
.book-grade small { grid-column: 1/-1; margin: 12px 0 6px; color: #686862; font: 500 6px/1 var(--mono); letter-spacing: .1em; text-align: right; }
.book-grade strong { font: 400 clamp(42px, 4vw, 67px)/.8 var(--display); letter-spacing: -.09em; }
.book-grade span { margin: 2px 0 0 3px; font: 500 8px/1 var(--mono); }
.book-panel h2 { grid-column: 1; margin: 15px 0 4px; color: currentColor; font: 400 clamp(20px, 2vw, 31px)/.95 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.mini-chart { grid-column: 1/-1; width: 100%; height: clamp(70px, 9vw, 108px); overflow: visible; }
.mini-chart path:not(.range-band) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.range-band { fill: rgba(244,241,232,.055); stroke: rgba(244,241,232,.15); stroke-width: .8; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.book-panel.active .mini-chart path:not(.range-band) { stroke: var(--orange); filter: drop-shadow(0 0 6px rgba(255,77,0,.35)); }
.book-metrics { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.book-metrics span { display: block; padding: 9px 8px 9px 0; border-right: 1px solid var(--line-dark); font: 500 clamp(11px, 1vw, 14px)/1 var(--mono); }
.book-metrics span:last-child { border-right: 0; padding-left: 8px; }
.book-metrics span:nth-child(2) { padding-left: 8px; }
.book-metrics small { display: block; margin-bottom: 6px; color: #62625d; font-size: 6px; letter-spacing: .1em; }
.book-panel p { grid-column: 1/-1; margin: 4px 0 0; color: #696963; font: 500 7px/1 var(--mono); letter-spacing: .08em; }

.size-stage { position: relative; min-width: 0; overflow: hidden; background:
  linear-gradient(rgba(17,17,15,.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(17,17,15,.045) 1px, transparent 1px),
  var(--bone);
  background-size: 34px 34px;
}
.size-stage::before { content: ""; position: absolute; width: min(64vw, 760px); aspect-ratio: 1; left: 54%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(17,17,15,.09); border-radius: 50%; box-shadow: 0 0 0 70px rgba(17,17,15,.018), 0 0 0 140px rgba(17,17,15,.014); }
.transfer-map { position: absolute; inset: 5% 0 4%; width: 100%; height: 91%; overflow: visible; }
.transfer-map .guide { fill: none; stroke: rgba(17,17,15,.16); stroke-width: 1; stroke-dasharray: 4 7; vector-effect: non-scaling-stroke; }
.transfer-map .signal { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(255,77,0,.28)); }
.transfer-map .tested-signal { animation: signal-draw 1.05s cubic-bezier(.16,1,.3,1) .15s forwards; }
.transfer-map .observed-signal { animation: signal-draw 1.05s cubic-bezier(.16,1,.3,1) .42s forwards; }
.transfer-map .cleared-signal { animation: signal-draw .85s cubic-bezier(.16,1,.3,1) 1s forwards; }
.transfer-map .node { fill: var(--orange); stroke: var(--bone); stroke-width: 5; opacity: 0; animation: node-pop .35s cubic-bezier(.2,1.7,.3,1) forwards; }
.transfer-map .n1 { animation-delay: .15s; }.transfer-map .n2 { animation-delay: .42s; }.transfer-map .n3 { animation-delay: 1s; }
.stage-controls { position: absolute; top: 18px; left: 18px; display: flex; border: 1px solid var(--line); background: rgba(233,230,220,.82); backdrop-filter: blur(10px); }
.flow-label { position: absolute; padding: 4px 6px; border: 1px solid var(--line); color: var(--muted); background: rgba(233,230,220,.86); font: 600 6px/1 var(--mono); letter-spacing: .1em; }
.tested-label { left: 2%; top: 24%; }.observed-label { left: 2%; top: 75%; }.merge-label { left: 45%; top: 47%; color: var(--orange); border-color: rgba(255,77,0,.26); }
.stage-controls button { min-height: 34px; border: 0; border-right: 1px solid var(--line); padding: 0 12px; color: var(--muted); background: transparent; font: 500 7px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.stage-controls button:last-child { border-right: 0; }
.stage-controls button.active { color: var(--white); background: var(--ink); }
.decision { position: absolute; left: 50%; top: 45%; width: min(590px, 78%); transform: translate(-50%,-50%); text-align: center; }
.decision-kicker { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 0 13px; color: var(--muted); font: 600 8px/1 var(--mono); letter-spacing: .17em; }
.decision-kicker span { width: 7px; height: 7px; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,77,0,.11); }
.decision-number { display: flex; justify-content: center; align-items: flex-start; color: var(--ink); }
.decision-number span { font: 400 clamp(92px, 12vw, 190px)/.78 var(--display); letter-spacing: -.115em; }
.decision-number i { margin: 4px 0 0 9px; color: var(--orange); font: normal 600 clamp(10px, 1.1vw, 15px)/1 var(--mono); letter-spacing: .08em; }
.decision h1 { margin: 19px 0 8px; font: 400 clamp(29px, 3.6vw, 55px)/.9 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.decision > p:last-child { max-width: 430px; margin: 0 auto; color: var(--muted); font-size: clamp(10px, .9vw, 13px); line-height: 1.55; }
.evidence-tape { position: absolute; left: 8%; right: 8%; bottom: 9%; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(233,230,220,.64); backdrop-filter: blur(8px); }
.evidence-tape div { padding: 11px 12px; border-right: 1px solid var(--line); }
.evidence-tape div:last-child { border-right: 0; }
.evidence-tape small { display: block; margin-bottom: 6px; color: var(--muted); font: 500 6px/1 var(--mono); letter-spacing: .11em; }
.evidence-tape strong { font: 600 clamp(10px, .9vw, 13px)/1 var(--mono); }
.replay { position: absolute; right: 17px; top: 18px; min-height: 35px; border: 1px solid var(--line); padding: 0 11px; color: var(--muted); background: rgba(233,230,220,.65); font: 500 7px/1 var(--mono); letter-spacing: .08em; }
.replay span { color: var(--orange); font-size: 12px; }
.replay:hover { color: var(--ink); background: var(--paper); }
.scan { position: absolute; top: 0; bottom: 0; width: 1px; left: -2%; background: linear-gradient(transparent, var(--orange), transparent); box-shadow: 0 0 14px rgba(255,77,0,.55); opacity: .45; animation: scan 5.5s ease-in-out infinite; }

.decision-docket { min-width: 0; display: flex; flex-direction: column; background: var(--paper); border-left: 1px solid var(--line); }
.docket-head { min-height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--line); }
.docket-head span, .docket-head strong { font: 600 8px/1 var(--mono); letter-spacing: .12em; }
.docket-head span { color: var(--muted); }.docket-head strong { color: var(--orange); }
.position-block { padding: clamp(21px,2.2vw,35px) 18px; border-bottom: 1px solid var(--line); }
.position-block small { color: var(--muted); font: 500 7px/1 var(--mono); letter-spacing: .13em; }
.position-block > strong { display: block; margin: 14px 0 23px; font: 400 clamp(42px,4vw,66px)/.8 var(--display); letter-spacing: -.08em; }
.risk-scale { position: relative; height: 4px; background: #c8c4ba; }
.risk-scale i { position: absolute; inset: 0 50% 0 0; background: var(--orange); }
.risk-scale b { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; transform: translate(-50%,-50%); border: 4px solid var(--paper); border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.scale-labels { display: flex; justify-content: space-between; margin-top: 9px; color: var(--muted); font: 500 6px/1 var(--mono); }
.reason-list { flex: 1; }
.reason-list > div { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-height: 86px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.reason-list span { color: var(--muted); font: 500 7px/1 var(--mono); }
.reason-list p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.reason-list p b { color: var(--ink); font-weight: 700; }
.reason-list i { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(255,77,0,.35); border-radius: 50%; color: var(--orange); font-size: 9px; font-style: normal; }
.next-review { min-height: 67px; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-content: center; border: 0; border-top: 1px solid var(--line); padding: 10px 18px; color: var(--white); background: var(--ink); text-align: left; }
.next-review span { color: #8a8981; font: 500 7px/1 var(--mono); letter-spacing: .11em; }.next-review strong { font: 600 10px/1 var(--mono); }.next-review i { grid-column: 2; grid-row: 1/3; align-self: center; color: var(--orange); font-style: normal; }
.next-review:hover { background: #1a1a17; }

.module-dock { display: grid; grid-template-columns: repeat(3,1fr) 1.3fr; color: var(--white); background: var(--void); border-top: 1px solid #2e2e2a; }
.module-dock > button, .support { min-width: 0; border: 0; border-right: 1px solid #292927; padding: 10px 17px; background: transparent; }
.module-dock > button { display: grid; grid-template-columns: 1fr auto; text-align: left; }
.module-dock button span { font: 600 8px/1 var(--mono); letter-spacing: .11em; }.module-dock button strong { grid-column: 1; margin-top: 5px; color: #696963; font-size: 8px; font-weight: 400; }.module-dock button i { grid-column: 2; grid-row: 1/3; align-self: center; color: #4d4d49; font-style: normal; }.module-dock button:hover { background: #11110f; }.module-dock button:hover i { color: var(--orange); }
.support { display: flex; justify-content: flex-end; align-items: center; gap: 11px; border-right: 0; color: #666660; font: 500 8px/1 var(--mono); }.support a { color: #9c9b93; text-decoration: none; }.support a:hover { color: var(--orange-soft); }
.mobile-nav { display: none; }
.toast { position: fixed; z-index: 400; right: max(16px,env(safe-area-inset-right)); bottom: max(75px,calc(16px + env(safe-area-inset-bottom))); max-width: min(360px,calc(100vw - 32px)); transform: translateY(18px); opacity: 0; padding: 11px 14px; color: var(--white); background: var(--ink); border-left: 3px solid var(--orange); box-shadow: 0 18px 50px rgba(0,0,0,.3); font-size: 10px; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }.toast.visible { opacity: 1; transform: translateY(0); }
.command-palette { width: min(920px,calc(100vw - 30px)); max-height: min(760px,calc(100vh - 30px)); margin: auto; border: 0; padding: 0; color: var(--white); background: transparent; overflow: visible; }.command-palette::backdrop { background: rgba(4,4,4,.75); backdrop-filter: blur(7px); }.command-box { max-height: min(760px,calc(100vh - 30px)); display: grid; grid-template-rows: 58px 39px minmax(0,1fr); border: 1px solid #3d3d39; background: #0c0c0b; box-shadow: 0 30px 100px rgba(0,0,0,.55); overflow: hidden; }.command-box header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 0 14px; border-bottom: 1px solid #2c2c29; }.command-box header > span { color: var(--orange); font-size: 19px; }.command-box input { width: 100%; border: 0; outline: 0; color: var(--white); background: transparent; font: 500 15px/1 var(--sans); }.command-box input::placeholder { color: #575752; }.command-box kbd { padding: 5px 7px; border: 1px solid #373733; color: #71716b; font: 500 7px/1 var(--mono); }.command-summary { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #252523; }.command-summary strong { font-size: 9px; }.command-summary span { color: #6e6e67; font: 500 7px/1 var(--mono); }.tool-results { overflow-y: auto; padding: 8px; }.tool-group-title { padding: 11px 8px 6px; color: #5e5e58; font: 600 7px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }.tool-result { width: 100%; min-height: 44px; display: grid; grid-template-columns: 1fr auto; border: 0; padding: 7px 9px; color: #b7b6ad; background: transparent; text-align: left; }.tool-result:hover,.tool-result:focus { color: var(--white); background: #1b1b18; outline: 1px solid #393934; }.tool-result strong { font-size: 10px; }.tool-result small { grid-column: 1; margin-top: 4px; color: #5d5d57; font: 500 7px/1 var(--mono); }.tool-result i { grid-column: 2; grid-row: 1/3; align-self: center; color: #595954; font: normal 500 7px/1 var(--mono); }.tool-empty { padding: 60px 20px; color: #6d6d66; text-align: center; font-size: 11px; }

body[data-focus="tested"] .observed-signal,
body[data-focus="tested"] .cleared-signal,
body[data-focus="tested"] .n2,
body[data-focus="observed"] .tested-signal,
body[data-focus="observed"] .cleared-signal,
body[data-focus="observed"] .n1 { opacity: .14; }
body[data-focus="tested"] .tested-signal,
body[data-focus="observed"] .observed-signal { stroke-width: 3.4; }
body.replaying .transfer-map .signal { animation: none; stroke-dashoffset: 1; }
body.replaying .tested-signal { animation: signal-draw .62s cubic-bezier(.16,1,.3,1) .05s forwards; }
body.replaying .observed-signal { animation: signal-draw .62s cubic-bezier(.16,1,.3,1) .28s forwards; }
body.replaying .cleared-signal { animation: signal-draw .58s cubic-bezier(.16,1,.3,1) .72s forwards; }
body.replaying .decision { animation: decision-pulse .65s cubic-bezier(.16,1,.3,1) .78s both; }

@keyframes signal-draw { to { stroke-dashoffset: 0; } }
@keyframes node-pop { to { opacity: 1; } }
@keyframes scan { 0%,100% { left: -2%; opacity: 0; } 10%,90% { opacity: .38; } 50% { left: 102%; opacity: .52; } }
@keyframes decision-pulse { from { opacity: .35; transform: translate(-50%,-50%) scale(.94); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

@media (max-width: 1120px) {
  .workspace-shell { grid-template-columns: 70px minmax(0,1fr); }.workspace-rail { padding-inline: 7px; }.rail-label,.workspace-button strong,.workspace-button small,.all-tools-button small,.all-tools-button i { display:none; }.workspace-button { min-height: 52px; display:grid; place-items:center; padding:6px; }.workspace-button > span { grid-row:auto; }.all-tools-button { min-height:52px; display:grid; place-items:center; padding:5px; }.all-tools-button strong { font-size:7px; text-align:center; }.review { grid-template-columns: 255px minmax(0,1fr); }
  .decision-docket { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1.4fr .8fr; border-left: 0; border-top: 1px solid var(--line); }
  .docket-head { display: none; }.position-block { border-right: 1px solid var(--line); border-bottom: 0; }.reason-list { display: grid; grid-template-columns: repeat(3,1fr); }.reason-list > div { min-height: 100%; }.next-review { min-height: 100%; border-top: 0; border-left: 1px solid var(--line); }
}

@media (max-width: 760px) {
  body { padding-bottom: calc(59px + env(safe-area-inset-bottom)); }
  .app { display: block; min-height: auto; }
  .topbar { height: 54px; grid-template-columns: 1fr auto; padding: 0 13px; }.topnav, .live { display: none; }.brand { font-size: 13px; }
  .command-trigger { min-width: 0; width: 38px; height: 34px; grid-template-columns:1fr; place-items:center; padding:0; font-size:0; }.command-trigger span { font-size:16px; }.command-trigger kbd { display:none; }
  .workspace-shell { display:block; }.workspace-rail { display:none; }.product-area { display:block; }.context-bar { height:42px; overflow-x:auto; }.context-bar > div { min-width:130px; }.context-bar button { padding:0 11px; }.context-bar .more-tools { margin-left:0; }
  .review { display: flex; flex-direction: column; }
  .size-stage { order: 1; min-height: 590px; border-bottom: 1px solid var(--line); }
  .book-stack { order: 2; grid-template-rows: auto; }
  .book-panel { min-height: 380px; padding: 23px 17px; }
  .decision-docket { order: 3; display: block; }
  .docket-head { display: flex; }
  .position-block { border-right: 0; border-bottom: 1px solid var(--line); }
  .reason-list { display: block; }.reason-list > div { min-height: 82px; }.next-review { min-height: 67px; border-left: 0; border-top: 1px solid var(--line); }
  .decision { top: 42%; width: 90%; }.decision-number span { font-size: clamp(98px,34vw,145px); }.decision h1 { font-size: clamp(33px,10vw,46px); }
  .decision-number { padding: 0 18px; }
  .decision-number i { flex: 0 0 auto; margin-left: 5px; font-size: 10px; }
  .decision h1 { padding: 0 10px; overflow-wrap: anywhere; }
  .transfer-map { inset: 4% -12%; width: 124%; }.stage-controls { top: 12px; left: 12px; }.stage-controls button { padding: 0 9px; }.replay { top: 12px; right: 12px; font-size: 0; }.replay span { font-size: 15px; }
  .flow-label { font-size: 5px; }.tested-label { left: 1%; top: 22%; }.observed-label { left: 1%; top: 75%; }.merge-label { left: 39%; top: 50%; }
  .evidence-tape { left: 11px; right: 11px; bottom: 34px; grid-template-columns: repeat(2,1fr); }.evidence-tape div:nth-child(2) { border-right: 0; }.evidence-tape div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .module-dock { grid-template-columns: 1fr; }.module-dock > button, .support { min-height: 50px; border-right: 0; border-bottom: 1px solid #292927; }.support { justify-content: flex-start; border-bottom: 0; }
  .mobile-nav { position: fixed; z-index: 300; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4,1fr); padding: 5px 5px max(5px,env(safe-area-inset-bottom)); color: var(--white); background: rgba(8,8,8,.95); border-top: 1px solid #33332f; backdrop-filter: blur(18px); }
  .mobile-nav button { min-height: 48px; display: grid; place-items: center; gap: 3px; border: 0; color: #686862; background: transparent; font: 500 8px/1 var(--mono); }.mobile-nav button span { font-size: 13px; }.mobile-nav button.active { color: var(--white); background: #171715; box-shadow: inset 0 3px var(--orange); }
}

@media (max-width: 380px) {
  .demo { display: none; }.topmeta { gap: 7px; }
  .stage-controls button { min-height: 32px; padding: 0 7px; font-size: 6px; }
  .decision-number span { font-size: 88px; }.decision h1 { font-size: 28px; }
  .book-panel { min-height: 370px; }.book-grade strong { font-size: 47px; }.book-panel h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .transfer-map .signal { stroke-dashoffset: 0; }.transfer-map .node { opacity: 1; }.scan { display: none; }
}