:root { --ink:#17251f; --paper:#f2efe6; --panel:#fbfaf5; --line:#cfcbbd; --moss:#244d3e; --acid:#c8e85a; --coral:#df6b4d; --muted:#68736c; --sand:#e4dfd1; --shadow:0 22px 48px rgba(24,37,31,.10); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 84% 5%,#d8e8bb 0 10%,transparent 28%),var(--paper); font:15px/1.55 Georgia,"Noto Serif SC",serif; }
button,input { font:inherit; } .topbar { height:70px; display:flex; justify-content:space-between; align-items:center; padding:0 clamp(22px,5vw,76px); border-bottom:1px solid rgba(23,37,31,.18); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); letter-spacing:.11em; font:700 13px/1 Arial,sans-serif; } .brand b { color:var(--moss); } .brand-mark { display:grid; place-items:center; width:27px; height:27px; color:var(--acid); background:var(--moss); border-radius:50% 50% 50% 8%; font-weight:900; }
.mode-chip { display:flex; align-items:center; gap:8px; font:700 11px/1 Arial,sans-serif; color:var(--moss); letter-spacing:.08em; text-transform:uppercase; } .mode-chip span { width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px rgba(200,232,90,.3); }
.shell { max-width:1440px; margin:auto; padding:0 clamp(22px,5vw,76px) 54px; }.masthead { min-height:330px; display:grid; grid-template-columns:1.4fr .8fr; gap:36px; align-content:center; }.eyebrow { margin:0 0 8px; color:var(--moss); font:700 10px/1.2 Arial,sans-serif; letter-spacing:.15em; }.masthead h1 { margin:0; max-width:760px; font-size:clamp(42px,6.2vw,82px); line-height:.95; letter-spacing:-.065em; font-weight:600; }.masthead em { color:var(--moss); font-weight:400; }.lead { max-width:675px; margin:24px 0 0; color:#445149; font-size:17px; }.run-meta { align-self:end; border-left:1px solid var(--moss); margin:0 0 8px; padding:10px 0 10px 20px; font:12px/1.8 Arial,sans-serif; }.run-meta dt { color:var(--muted); float:left; width:76px; }.run-meta dd { margin-left:82px; overflow:hidden; text-overflow:ellipsis; }
.workbench { display:grid; grid-template-columns:minmax(270px,.38fr) minmax(0,1fr); background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); }.config-panel { padding:31px; border-right:1px solid var(--line); background:linear-gradient(155deg,#e9e3d2, #f8f6ef 65%); }.panel-heading h2,.results-head h2 { margin:0; font-size:28px; letter-spacing:-.04em; }.panel-heading p:not(.eyebrow) { color:var(--muted); margin:10px 0 24px; font-size:13px; }.config-panel form { display:grid; gap:14px; }.config-panel label { display:grid; gap:5px; color:#405047; font:700 11px/1.2 Arial,sans-serif; letter-spacing:.04em; }.config-panel input[type=number] { width:100%; border:1px solid #b7b5a9; background:rgba(255,255,255,.45); padding:10px; color:var(--ink); }.toggle-row { grid-template-columns:17px 1fr; align-items:center; padding:3px 0; }.toggle-row input { accent-color:var(--moss); }.config-panel button { margin-top:8px; display:flex; justify-content:space-between; align-items:center; border:0; padding:13px 15px; background:var(--moss); color:white; cursor:pointer; font:700 12px Arial,sans-serif; letter-spacing:.05em; }.config-panel button:hover { background:#173b2e; }.config-panel button span { color:var(--acid); font-size:17px; }.boundary-note { display:grid; gap:5px; margin-top:28px; padding:13px 0 0; border-top:1px solid #c9c3b4; color:var(--muted); font-size:12px; }.boundary-note strong { color:var(--moss); font:700 10px Arial,sans-serif; letter-spacing:.12em; }
.results-panel { min-width:0; padding:31px; }.results-head { display:flex; justify-content:space-between; align-items:start; gap:18px; }.secondary { border:1px solid var(--moss); background:transparent; color:var(--moss); padding:9px 12px; cursor:pointer; font:700 11px Arial,sans-serif; letter-spacing:.05em; }.secondary:hover { background:var(--moss); color:white; }.status-banner { margin:22px 0 17px; padding:10px 13px; background:#e7f0d5; color:#27513c; border-left:4px solid var(--acid); font:700 12px Arial,sans-serif; }.status-banner.blocked { background:#f8dfd7; color:#84311f; border-color:var(--coral); }.stage-rail { display:grid; grid-template-columns:repeat(9,minmax(58px,1fr)); margin:0 -5px 26px; overflow:auto; }.stage { min-width:76px; padding:12px 8px 10px; border-top:3px solid #a9aea7; position:relative; }.stage.complete { border-color:var(--moss); }.stage.blocked { border-color:var(--coral); }.stage b { display:block; color:var(--muted); font:700 9px Arial,sans-serif; letter-spacing:.08em; }.stage span { display:block; margin-top:5px; font-size:12px; white-space:nowrap; }.stage:not(:last-child)::after { content:""; position:absolute; right:-5px; top:-2px; width:9px; height:9px; border-radius:50%; background:currentColor; color:var(--moss); }.stage.blocked:not(:last-child)::after { color:var(--coral); }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }.metric { min-height:112px; padding:17px; border-right:1px solid var(--line); }.metric:last-child { border:0; }.metric p { margin:0; color:var(--muted); font:700 10px Arial,sans-serif; letter-spacing:.08em; }.metric strong { display:block; margin-top:10px; font-size:27px; letter-spacing:-.06em; }.metric small { color:var(--muted); font:11px Arial,sans-serif; }.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }.detail-card,.effect-ledger,.impact-card { border:1px solid var(--line); padding:18px; }.detail-card h3,.effect-ledger h3,.impact-card h3 { margin:0 0 12px; font-size:19px; letter-spacing:-.03em; }.task,.exception,.effect { padding:10px 0; border-top:1px solid #e1ded5; }.task:first-child,.exception:first-child,.effect:first-child { border:0; }.task b,.exception b { display:block; font:700 12px Arial,sans-serif; }.task span,.exception span,.effect span { display:block; color:var(--muted); font-size:12px; }.exception .tag { color:#8a321e; font:700 9px Arial,sans-serif; letter-spacing:.09em; }.effect-ledger { display:grid; grid-template-columns:.5fr 1fr; gap:18px; margin-top:18px; background:#f7f8ee; }.effect { display:flex; justify-content:space-between; gap:12px; font:11px Arial,sans-serif; }.effect b { color:var(--moss); text-transform:uppercase; }.impact-card { margin-top:18px; background:#eaf0da; }.impact-item { padding:9px 0; border-top:1px solid #c7d1ae; font:12px Arial,sans-serif; }.impact-item strong { color:var(--moss); } footer { padding:20px; text-align:center; color:var(--muted); font:700 9px Arial,sans-serif; letter-spacing:.18em; }
@media (max-width:900px) { .masthead,.workbench { grid-template-columns:1fr; }.masthead { padding:50px 0; }.run-meta { align-self:start; }.config-panel { border-right:0; border-bottom:1px solid var(--line); }.metric-grid { grid-template-columns:repeat(2,1fr); }.metric:nth-child(2) { border-right:0; }.metric:nth-child(-n+2) { border-bottom:1px solid var(--line); } } @media (max-width:570px) { .topbar { padding:0 18px; }.mode-chip { font-size:8px; }.shell { padding:0 14px 35px; }.masthead h1 { font-size:47px; }.results-panel,.config-panel { padding:22px; }.detail-grid,.effect-ledger { grid-template-columns:1fr; }.results-head { display:block; }.secondary { margin-top:14px; }.stage-rail { grid-template-columns:repeat(9,80px); } }