@font-face{font-family:Pixel;src:url('../../assets/frontier/press-start-2p.woff') format('woff');font-display:swap}
:root{color-scheme:dark;--bg:#111925;--panel:#182331;--line:#364556;--ink:#ecf1f3;--muted:#afbdc9;--amber:#ffc36b;--mint:#78d9c5;--red:#ffac9a;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}a{color:var(--amber);text-underline-offset:.2em}button,input,textarea,select{font:inherit}button,.button{min-height:44px;border:1px solid #536478;background:#202e3f;color:var(--ink);padding:.65rem 1rem;cursor:pointer;border-radius:5px;font-weight:650}button:hover:not(:disabled),.button:hover{border-color:var(--amber);background:#2c3949}button:disabled{opacity:.45;cursor:not-allowed}button.primary,.button.primary{background:var(--amber);color:#182331;border-color:var(--amber);box-shadow:3px 3px 0 #725236}.button{display:inline-block;text-decoration:none}.quiet{background:transparent;border-color:var(--line);font-size:.875rem;box-shadow:none!important}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,pre:focus-visible{outline:3px solid var(--mint);outline-offset:3px}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}h1{font-family:Pixel,var(--mono);font-size:clamp(1.2rem,2.5vw,2rem);line-height:1.65;letter-spacing:-.04em;margin-bottom:.35rem}h2{font-size:1.12rem;line-height:1.4}h3{font-size:1.2rem;line-height:1.4}p{margin-bottom:1rem}.topbar{border-bottom:1px solid var(--line);padding:1.05rem max(1rem,calc((100vw - 1440px)/2));display:flex;justify-content:space-between;gap:1rem;align-items:center;background:#131e2c}.brand{font-family:var(--mono);font-weight:800;letter-spacing:.14em;color:var(--ink);text-decoration:none}.brand span{margin:0 .65rem;color:var(--amber)}.topbar nav{display:flex;gap:1.25rem;font-size:.875rem}.topbar nav a{color:var(--muted);text-decoration:none}main{max-width:1472px;margin:auto;padding:0 1rem}.intro{padding:2rem 0 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}.intro p:last-child{color:var(--muted);margin-bottom:0}.eyebrow{font:700 .75rem/1.6 var(--mono);letter-spacing:.1em;color:var(--amber);margin-bottom:.65rem}.cursor{color:var(--amber)}.mode{max-width:340px;border-left:3px solid var(--mint);padding:.15rem 0 .15rem 1rem;font-size:.875rem}.mode strong,.mode span{display:block}.mode span{color:var(--muted);margin-top:.25rem}.view-tabs{display:flex;border-bottom:1px solid var(--line);gap:.25rem}.view-tabs button{background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;color:var(--muted);font:700 .875rem var(--mono);padding:1rem 1.4rem}.view-tabs button span{margin-left:.65rem;font:650 1rem system-ui}.view-tabs button[aria-selected=true]{color:var(--amber);border-bottom-color:var(--amber);background:#1b2938}.runbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 0}.run-actions{display:flex;flex-wrap:wrap;gap:.55rem}.runbar p{margin:0;color:var(--mint);font:.875rem/1.5 var(--mono);max-width:490px}.workbench{display:grid;grid-template-columns:270px minmax(320px,1.2fr) minmax(300px,1fr);gap:1rem;align-items:stretch}.panel{border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:1.2rem;min-width:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.8rem;margin-bottom:1rem}.panel-heading h2{margin:0;font-size:1rem}.panel-heading>span{font:.75rem var(--mono);color:var(--muted);text-align:right}.small{font-size:.875rem;color:var(--muted)}label{display:block;font-size:.875rem;font-weight:650;margin:.9rem 0 .4rem}label span{float:right;color:var(--muted);font-weight:400}input,select,textarea{width:100%;padding:.65rem;border:1px solid #506174;border-radius:4px;background:#101b29;color:var(--ink);min-height:44px}textarea{resize:vertical;line-height:1.5}summary{min-height:44px;display:list-item;align-content:center;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink)}details{border-top:1px solid var(--line);margin-top:1rem;padding-top:.4rem}details p{margin-top:.6rem}.knobs{margin-bottom:1rem}.source-list{padding-left:1.15rem;font-size:.875rem}.source-list li{margin-bottom:.5rem}.config-panel .quiet{width:100%;margin-top:.65rem}.legend{display:flex;flex-wrap:wrap;gap:.8rem;font:.75rem var(--mono);color:var(--muted)}.legend-done{color:var(--mint)}.legend-next{color:var(--amber)}.graph{position:relative;height:570px;margin:.5rem 0 0;background-image:radial-gradient(#384453 .8px,transparent .8px);background-size:16px 16px}.wires{position:absolute;width:100%;height:100%;overflow:visible}.wires>path{fill:none;stroke:#748598;stroke-width:1.5;marker-end:url(#arrow)}.wires marker path{fill:#748598}.wires .conditional{stroke-dasharray:5 4}.wires text{fill:#b8c4d0;font:12px var(--mono)}.node{position:absolute;left:0;width:45%;height:60px;padding:.45rem .55rem;background:#14212f;text-align:left;border-color:#617284;border-left:3px solid #617284;line-height:1.25;display:flex;flex-direction:column;justify-content:center;border-radius:4px}.node small{font:.75rem/1.4 var(--mono);color:var(--muted);white-space:normal}.node strong{font-size:.875rem}.node-status{font:.75rem var(--mono);position:absolute;bottom:-18px;left:1px;color:var(--mint);white-space:nowrap}.node[aria-pressed=true]{outline:2px solid var(--amber);outline-offset:3px}.node.executed{border-left-color:var(--mint);background:#1b3236}.node.next{border-color:var(--amber);background:#343128}.node.next .node-status{color:var(--amber)}.node-intake{top:15px}.node-retrieve{top:105px}.node-draft{top:195px}.node-check{top:285px}.node-review{top:385px}.node-finish{top:480px}.node-revise{left:55%;top:195px}.node-blocked{left:55%;top:385px}.graph-note{font-size:.875rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1rem;margin:0}.inspector>h3{color:var(--amber);margin-bottom:.6rem}.inspector>p{color:var(--muted)}.inspector-tabs{display:flex;margin:1.2rem 0 1.3rem;border-bottom:1px solid var(--line)}.inspector-tabs button{flex:1;border:0;border-radius:0;border-bottom:2px solid transparent;background:transparent;padding:.6rem .3rem;font-size:.875rem}.inspector-tabs button[aria-selected=true]{border-color:var(--mint);color:var(--mint)}.try-this{border-left:3px solid var(--mint);background:#132a31;padding:1rem;margin:1.25rem 0}.try-this strong{color:var(--mint);font:.8rem var(--mono);text-transform:uppercase}.try-this p{margin:.4rem 0 0}pre{font:.82rem/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;background:#0f1823;border:1px solid #334253;padding:1rem;border-radius:4px;max-height:620px;overflow:auto;tab-size:4}code{font:.87em var(--mono);color:var(--mint);overflow-wrap:anywhere}.trace-panel{margin-top:1rem}.metrics{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.875rem;color:var(--muted);margin-bottom:1rem}.metrics strong{color:var(--ink);font:700 1.15rem var(--mono);margin-right:.25rem}#result-status{margin-left:auto;color:var(--amber)}#trace{display:flex;flex-wrap:wrap;gap:.5rem}#trace button{font:.8rem/1.6 var(--mono);min-height:44px;text-align:left}#trace button small{display:block;color:var(--muted)}#trace button.failed{border-color:var(--red)}#trace button[aria-pressed=true]{border-color:var(--amber)}.empty{color:var(--muted);padding:.5rem 0}.decision{border-color:var(--amber);margin-top:1rem}.decision h2{font-size:1.5rem}.decision .run-actions{margin-top:1rem}.claim{background:#111e2b;border-left:2px solid var(--mint);padding:.8rem 1rem;margin:.8rem 0}.claim p{margin:0}.claim small{color:var(--mint)}#result{border-top:1px solid var(--line);margin-top:1rem;padding-top:1.2rem}#result-text{white-space:pre-wrap;color:var(--muted)}.reading-panel{max-width:1120px;margin:auto}.section-intro{padding:2.5rem 0 1rem;max-width:800px}.section-intro h2{font-size:2rem}.section-intro p{color:var(--muted)}.section-intro .eyebrow{color:var(--amber)}.build-grid,.blueprint-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.25rem 0}.prose{margin-bottom:1rem}.prose h3{color:var(--ink)}.prose p,.prose li{color:var(--muted)}.prose li{margin:.6rem 0}.prose pre{font-size:.875rem;color:var(--ink)}.lesson-number{font-family:Pixel,var(--mono);font-size:1.1rem;color:var(--amber);display:block;margin:.5rem 0 1.2rem}.notice{padding:1rem;border:1px solid #776346;background:#332e27;color:#f8deba!important;border-radius:4px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.9rem}th,td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:.8rem}th{color:var(--amber)}td{color:var(--muted)}.sources{padding:1rem 0}.sources a{display:inline-block;margin:0 1rem 1rem 0;font-size:.875rem}.bottom{border-top:1px solid var(--line);margin-top:2.5rem;padding:1.5rem 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--muted);font:.75rem/1.7 var(--mono)}.skip{position:absolute;top:-100px;left:1rem;background:var(--amber);color:#111925;padding:1rem;z-index:5}.skip:focus{top:1rem}
@media(min-width:1500px){main{padding:0 2rem}}
@media(max-width:1150px){.workbench{grid-template-columns:245px minmax(280px,1fr)}.inspector{grid-column:1/-1}.inspector pre{max-height:420px}.intro{gap:1rem}.mode{max-width:300px}.graph{max-width:500px;margin-inline:auto}}
@media(max-width:720px){main{padding:0 .8rem}.topbar{padding:1rem .8rem}.topbar nav{gap:.7rem;font-size:.8rem}.brand{font-size:.875rem}.intro{display:block;padding:1.6rem 0 1.1rem}.mode{margin-top:1rem;max-width:100%;font-size:.82rem}.view-tabs button{padding:.8rem .5rem;flex:1;font-size:.7rem}.view-tabs button span{display:block;margin:.4rem 0 0;font-size:.82rem}.runbar{display:block;padding:1rem 0}.runbar p{margin-top:1rem;min-height:2.6em}.run-actions button{padding:.65rem .8rem}.workbench{grid-template-columns:1fr}.inspector{grid-column:auto}.panel{padding:1rem}.graph-panel{order:1}.config-panel{order:0}.inspector{order:2}.config-panel .knobs:not([open]){margin-bottom:.2rem}.graph{max-width:440px}.build-grid,.blueprint-grid{grid-template-columns:1fr}.section-intro{padding-top:1.8rem}.section-intro h2{font-size:1.6rem}.bottom{display:block}.bottom span,.bottom a{display:block;margin:.5rem 0}.metrics{gap:1rem}.node strong{font-size:.9rem}.node small{font-size:.75rem}.node-status{font-size:.75rem}.legend{font-size:.75rem}.panel-heading>span{font-size:.7rem}#result-status{margin-left:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.runbar{position:sticky;top:0;z-index:3;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:1rem}.inspector,.decision{scroll-margin-top:11rem}
/* Keep enlarged text readable instead of squeezing it into fixed diagram boxes. */
main{container-name:workshop;container-type:inline-size}.topbar{flex-wrap:wrap}.view-tabs button{min-width:0;overflow-wrap:anywhere}.graph-panel{container-name:flow;container-type:inline-size}.compact-guide{display:none;font-size:.875rem;color:var(--muted)}.graph{height:35.625rem}.node{height:3.75rem}.node-intake{top:.9375rem}.node-retrieve{top:6.5625rem}.node-draft,.node-revise{top:12.1875rem}.node-check{top:17.8125rem}.node-review,.node-blocked{top:24.0625rem}.node-finish{top:30rem}
@container flow (max-width:16rem){.graph{display:grid;grid-template-columns:1fr;height:auto;gap:.75rem;margin-bottom:1rem;background:none}.wires{display:none}.node{position:static;width:100%;height:auto;min-height:4.5rem;gap:.3rem}.node-status{position:static;white-space:normal}.compact-guide{display:block}}
@container workshop (max-width:16rem){.runbar{position:static}}
.panel-heading{flex-wrap:wrap}.inspector-tabs button{min-width:0;overflow-wrap:anywhere}
h1{overflow-wrap:anywhere}.panel-heading>*{max-width:100%;overflow-wrap:anywhere}

/* Keep all three workshop wayfinding links accessible even at 200% text
   enlargement on a 320px viewport; wrapping, not clipping, is intentional. */
@media(max-width:720px){
  .topbar{min-width:0;align-items:flex-start}
  .topbar nav{display:flex;flex-wrap:wrap;flex:1 1 100%;min-width:0;max-width:100%;gap:.45rem .8rem}
  .topbar nav a{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}
}
