:root {
  --ink: #111210;
  --paper: #f4f6f2;
  --white: #ffffff;
  --line: #c9cec7;
  --muted: #6b736d;
  --yellow: #e8ff35;
  --blue: #3158ee;
  --coral: #ff6d5f;
  --mint: #69e8b2;
  --header-h: 58px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
button, textarea, input { font: inherit; letter-spacing: 0; }
[hidden] { display: none !important; }
.site-header { position: sticky; top: 0; z-index: 40; min-height: var(--header-h); display: grid; grid-template-columns: minmax(250px,1fr) auto minmax(210px,1fr); align-items: center; gap: 16px; padding: 0 28px; border-bottom: 1px solid var(--ink); background: rgba(244,246,242,.96); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 900; white-space: nowrap; }
.brand-mark { width: 20px; height: 20px; background: var(--yellow); border: 1px solid var(--ink); box-shadow: inset 7px 0 0 var(--blue); }
.runtime,.live-status { font: 700 9px/1.25 "SFMono-Regular",Consolas,monospace; white-space: nowrap; }
.runtime { text-align: center; color: var(--muted); }
.live-status { justify-self: end; text-align: right; }
.live-status::before { content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border:1px solid var(--ink); background:var(--yellow); }
.live-status[data-level="error"]::before { background:var(--coral); }
main { width: 100%; max-width: 100%; }
.compiler-shell { min-height: calc(100vh - var(--header-h)); padding: 24px 28px 34px; }
.mast,.command-row,.editor-panel,.proof-field { width: min(1180px,100%); margin-inline:auto; }
.mast { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr); border:1px solid var(--ink); }
.mast-main { padding:18px 20px; }
.kicker { margin:0 0 8px; color:var(--muted); font:800 9px "SFMono-Regular",Consolas,monospace; }
h1 { max-width:760px; margin:0; font-size:50px; line-height:.96; font-weight:900; }
.mast aside { display:flex; flex-direction:column; justify-content:flex-end; padding:18px 20px; border-left:1px solid var(--ink); background:var(--yellow); }
.mast aside strong { font-size:17px; }
.mast aside p { margin:7px 0 0; font-size:12px; line-height:1.4; }
.command-row,.result-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.command-row { margin-top:10px; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border:1px solid var(--ink); border-radius:4px; color:var(--ink); cursor:pointer; font-size:11px; font-weight:900; line-height:1; white-space:nowrap; text-decoration:none; transition:transform 180ms ease,background 180ms ease,color 180ms ease; }
.button:hover { transform:translateY(-2px); }
.button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.button-strong { color:var(--white); background:var(--ink); }
.button-strong:hover { color:var(--ink); background:var(--yellow); }
.button-light { background:var(--white); }
.button-quiet { border-color:var(--line); background:transparent; }
.button-counter { background:var(--mint); }
.file-button { cursor:pointer; }
.editor-panel { margin-top:10px; padding:14px; border:1px solid var(--ink); background:var(--white); }
.editor-panel label { display:block; margin-bottom:8px; font-size:12px; font-weight:900; }
.editor-panel textarea { width:100%; min-height:220px; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:0; background:#fbfcfa; color:var(--ink); font:10px/1.45 "SFMono-Regular",Consolas,monospace; }
.editor-panel p { margin:8px 0 0; color:var(--muted); font-size:10px; }
.proof-field { margin-top:10px; border:1px solid var(--ink); background:var(--white); outline:none; }
.proof-topline { min-height:52px; display:flex; justify-content:space-between; align-items:end; gap:20px; padding:9px 13px; border-bottom:1px solid var(--line); }
.proof-product { margin:0 0 2px; color:var(--muted); font:800 8px "SFMono-Regular",Consolas,monospace; }
.proof-topline h2 { margin:0; font-size:19px; line-height:1.05; }
.proof-state { max-width:560px; margin:0; color:var(--muted); font:700 9px/1.35 "SFMono-Regular",Consolas,monospace; text-align:right; }
.proof-state.error { color:#b02e24; }
.metric-grid { display:grid; grid-template-columns:1.25fr repeat(3,minmax(0,1fr)); grid-auto-flow:dense; border-bottom:1px solid var(--ink); }
.metric-cell { min-width:0; min-height:82px; padding:10px 12px; border-right:1px solid var(--line); }
.metric-cell:last-child { border-right:0; }
.metric-cell span,.metric-cell small { display:block; }
.metric-cell span { font-size:8px; font-weight:900; text-transform:uppercase; }
.metric-cell strong { display:block; margin:4px 0 2px; font-size:23px; line-height:1; overflow-wrap:anywhere; }
.verdict-cell strong { font-size:15px; line-height:1.08; }
.metric-cell small { color:var(--muted); font:8px "SFMono-Regular",Consolas,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.boundary-cell { background:#ffe0dc; }
.path-head { display:flex; justify-content:space-between; align-items:end; gap:20px; padding:9px 13px; background:#eff1ed; border-bottom:1px solid var(--line); }
.path-head span { display:block; color:var(--muted); font:800 8px "SFMono-Regular",Consolas,monospace; }
.path-head strong { display:block; margin-top:3px; font-size:11px; overflow-wrap:anywhere; }
.path-facts { display:flex; gap:8px; }
.path-facts span { padding:5px 7px; border:1px solid var(--line); color:var(--ink); background:var(--white); white-space:nowrap; }
.tape-scroller { overflow-x:auto; overscroll-behavior-inline:contain; }
.state-tape { min-height:138px; display:flex; align-items:stretch; justify-content:center; gap:0; padding:16px 13px; background:#f7f8f5; }
.tape-empty { align-self:center; color:var(--muted); font-size:11px; text-align:center; }
.state-node { width:min(190px,24%); min-width:150px; display:flex; flex-direction:column; justify-content:space-between; padding:11px; border:1px solid var(--ink); background:var(--white); }
.state-node.exit { color:var(--white); background:var(--blue); }
.state-node .node-id { font:800 8px "SFMono-Regular",Consolas,monospace; overflow-wrap:anywhere; }
.state-node strong { margin:22px 0 4px; font-size:13px; line-height:1.15; }
.state-node small { font:8px "SFMono-Regular",Consolas,monospace; }
.transition-edge { width:132px; min-width:110px; display:grid; grid-template-rows:1fr auto 1fr; align-items:center; padding:0 7px; text-align:center; }
.transition-edge::before { content:""; align-self:end; height:1px; background:var(--ink); }
.transition-edge::after { content:""; align-self:start; height:1px; background:var(--ink); }
.transition-edge strong { display:block; padding:5px; border:1px solid var(--ink); background:var(--yellow); font:800 8px/1.25 "SFMono-Regular",Consolas,monospace; overflow-wrap:anywhere; }
.transition-edge.buyer strong { color:var(--white); background:var(--coral); }
.evidence-grid { display:grid; grid-template-columns:.8fr 1.2fr; border-top:1px solid var(--line); }
.evidence-grid > div { min-width:0; padding:9px 13px; }
.evidence-grid > div+div { border-left:1px solid var(--line); }
.evidence-grid span { display:block; color:var(--muted); font:800 8px "SFMono-Regular",Consolas,monospace; }
.evidence-grid strong { display:block; margin-top:4px; font-size:10px; line-height:1.35; overflow-wrap:anywhere; }
.result-actions { min-height:61px; padding:8px 13px; border-top:1px solid var(--ink); }
#export-status { margin-left:auto; color:var(--muted); font:8px "SFMono-Regular",Consolas,monospace; }
.method-section { width:min(1180px,calc(100% - 56px)); margin:0 auto; padding:150px 0 180px; display:grid; grid-template-columns:.75fr 1.25fr; gap:76px; }
.method-head h2 { max-width:460px; margin:0; font-size:43px; line-height:1; }
.method-head>p:last-child { max-width:420px; font-size:15px; line-height:1.5; }
.method-stack { display:grid; gap:90px; padding-top:15px; }
.method-step { position:sticky; top:86px; min-height:240px; padding:25px; border:1px solid var(--ink); border-radius:6px; background:var(--white); box-shadow:0 12px 0 var(--ink); }
.method-step:nth-child(2) { background:#ffe0dc; }
.method-step:nth-child(3) { background:#dff8ed; }
.method-step>span { font:800 9px "SFMono-Regular",Consolas,monospace; }
.method-step h3 { margin:38px 0 10px; font-size:27px; }
.method-step p { max-width:560px; font-size:15px; line-height:1.5; }
.method-step code { display:block; margin-top:22px; font-size:11px; white-space:normal; }
.term-marquee { overflow:hidden; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--yellow); }
.term-marquee div { width:max-content; padding:18px 0; font-size:17px; font-weight:900; animation:marquee 24s linear infinite; }
@keyframes marquee { to { transform:translateX(-50%); } }
footer { min-height:180px; display:grid; grid-template-columns:1fr auto auto; align-items:end; gap:30px; padding:38px 28px; color:var(--white); background:var(--ink); }
footer span,footer a { color:#bbc2bc; font-size:11px; }
footer a { color:var(--yellow); }
@media(max-width:720px){
  :root{--header-h:64px}
  .site-header{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:34px 22px;gap:0 10px;padding:3px 14px 5px}
  .brand{grid-column:1;grid-row:1;font-size:8px}.live-status{grid-column:2;grid-row:1;max-width:130px;overflow:hidden;text-overflow:ellipsis;font-size:8px}.runtime{grid-column:1/-1;grid-row:2;justify-self:start;font-size:7px;text-align:left}
  .compiler-shell{padding:14px 14px 24px}.mast{grid-template-columns:1fr}.mast-main{padding:14px}.mast aside{display:none}h1{font-size:36px;line-height:.98}
  .command-row{display:grid;grid-template-columns:1fr 1fr}.button{width:100%;padding:0 8px}
  .proof-topline{align-items:start;padding:8px 9px}.proof-topline h2{font-size:16px}.proof-state{max-width:150px;font-size:7px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-cell{min-height:72px;padding:8px 9px;border-bottom:1px solid var(--line)}.metric-cell:nth-child(2){border-right:0}.metric-cell:nth-child(n+3){border-bottom:0}.metric-cell strong{font-size:20px}.verdict-cell strong{font-size:12px}
  .path-head{align-items:start;padding:8px 9px}.path-head strong{font-size:9px}.path-facts{display:grid;gap:3px}.path-facts span{padding:3px;font-size:7px}
  .state-tape{min-height:236px;display:flex;flex-direction:column;align-items:stretch;padding:10px}.state-node{width:100%;min-width:0;min-height:50px;padding:7px}.state-node strong{margin:7px 0 2px;font-size:11px}.transition-edge{width:100%;min-width:0;min-height:42px;grid-template-rows:1fr auto 1fr;padding:0 24px}.transition-edge::before,.transition-edge::after{width:1px;height:auto;justify-self:center;background:var(--ink)}
  .evidence-grid{grid-template-columns:1fr}.evidence-grid>div+div{border-left:0;border-top:1px solid var(--line)}
  .result-actions{display:grid;grid-template-columns:1fr 1fr;padding:8px 9px}.button-counter{grid-column:1/-1}#export-status{grid-column:1/-1;margin:0}
  .method-section{width:calc(100% - 28px);padding:110px 0 130px;display:block}.method-head h2{font-size:34px}.method-stack{margin-top:60px;gap:70px}.method-step{top:76px;min-height:220px}
  footer{min-height:220px;grid-template-columns:1fr;align-content:end;align-items:start;gap:10px;padding:28px 14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.term-marquee div{animation:none}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
