src/styles.css

:root { font-family: Inter, "Yu Gothic", sans-serif; color:#151512; background:#bfc0b9; --ink:#151512; --paper:#efeee7; --white:#fffef8; --acid:#dfff2f; --blue:#2145ff; --orange:#ff623d; --line:#aaa99f; }
* { box-sizing:border-box; min-width:0; } body { margin:0; background:radial-gradient(circle,#a8aaa3 1px,transparent 1px) 0 0/20px 20px,#c7c8c2; } button,input,textarea,select{font:inherit} button{cursor:pointer}
main{width:min(calc(100% - 24px),1500px);margin:12px auto;border:1px solid var(--ink);background:var(--paper);box-shadow:10px 10px 0 #15151220}
header{display:grid;grid-template-columns:1.5fr .5fr;gap:50px;min-height:410px;padding:48px;background:var(--acid);border-bottom:1px solid var(--ink)}
.serial,.kicker,.budget span,nav button,.project span,footer{font:600 10px/1.3 ui-monospace,monospace;letter-spacing:.12em}h1{margin:42px 0 25px;font-size:clamp(66px,9vw,136px);line-height:.77;letter-spacing:-.085em}h1 em{font-style:normal;color:var(--blue)}header p{max-width:690px;font-size:18px;line-height:1.7}.budget{align-self:end;padding:24px;border:1px solid var(--ink);background:var(--white)}.budget strong{display:block;margin:24px 0 8px;font-size:52px;letter-spacing:-.06em}.budget small{display:block;color:#66645d;line-height:1.5}.budget i{display:block;max-width:100%;height:8px;margin-top:24px;background:var(--blue)}
.provider-state{display:inline-flex;margin-top:24px;padding:8px 10px;border:1px solid var(--ink);background:#fff;font:700 9px/1 ui-monospace,monospace;letter-spacing:.08em}.provider-state.connected{background:#dfff59}.provider-state.offline,.provider-state.error{background:#ffb4a7}.engine-ready{padding:12px;border-left:4px solid #45a329;background:#e9ffd6;font-size:11px;font-weight:700;line-height:1.5}
nav{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--ink)}nav button{min-height:66px;border:0;border-right:1px solid var(--line);background:var(--white);color:#77756e}nav button.active{background:var(--ink);color:var(--acid)}
.workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(340px,.75fr)}section{padding:clamp(35px,5vw,75px);border-right:1px solid var(--ink)}aside{padding:35px;background:var(--white)}h2{margin:18px 0 34px;font-size:clamp(38px,5vw,70px);line-height:.95;letter-spacing:-.06em}h3{margin:45px 0 14px;font-size:18px}.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.wide{grid-column:1/-1}label{display:grid;gap:8px;font-size:12px;font-weight:700}input,textarea,select{width:100%;padding:14px;border:1px solid var(--ink);border-radius:0;background:var(--white);outline:0}textarea{resize:vertical;line-height:1.6}input:focus,textarea:focus,select:focus{box-shadow:inset 0 0 0 2px var(--blue)}
.source-bank{display:grid;grid-template-columns:repeat(3,1fr) auto;margin:-10px 0 10px;border:1px solid var(--ink);background:var(--white)}.source-bank>div{display:grid;gap:4px;padding:18px;border-right:1px solid var(--ink)}.source-bank b{font-size:30px;letter-spacing:-.06em}.source-bank span{font-size:9px;font-weight:700}.source-bank button{border:0;background:var(--blue);color:white}.source-note{margin:0 0 26px;padding:12px 14px;border-left:4px solid var(--orange);background:#fff3df;font-size:11px;line-height:1.6}
button{border:1px solid var(--ink);border-radius:0;background:var(--ink);color:white;padding:13px 16px;font-weight:800}.choices{display:grid;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.brands{grid-template-columns:repeat(3,1fr)}.formats{grid-template-columns:repeat(5,1fr)}.choices button{display:grid;gap:8px;min-height:92px;border:0;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--white);color:var(--ink);text-align:left}.choices button.selected{background:var(--blue);color:white}.choices small{color:inherit;font-size:10px;font-weight:500;line-height:1.4}.patterns{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.patterns button{min-height:180px;background:var(--white);color:var(--ink);text-align:left}.patterns button.selected{background:var(--orange)}.patterns span{font-size:16px}.patterns p{font-size:11px;line-height:1.6;font-weight:500}.patterns small{font:500 9px/1 ui-monospace,monospace}.provider{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:end;margin:35px 0;padding:24px;border:1px solid var(--ink);background:#dad8cf}.provider p{margin:0;font-size:12px;line-height:1.6}.create{padding:18px 26px;background:var(--blue)}button:disabled{opacity:.35;cursor:not-allowed}
.empty{padding:22px;border:1px dashed var(--line);color:#74726b;font-size:12px;line-height:1.7}.project{display:grid;gap:10px;width:100%;margin-bottom:10px;background:var(--paper);color:var(--ink);text-align:left}.project.selected{background:var(--acid);box-shadow:5px 5px 0 var(--ink)}.project span{color:var(--blue)}.project small{font-size:10px;color:#66645d}.inspector{margin-top:36px;padding-top:28px;border-top:1px solid var(--ink)}.inspector h3{margin:16px 0 24px;font-size:25px}.inspector dl{display:grid;grid-template-columns:1fr 1fr;font-size:11px}.inspector dt,.inspector dd{margin:0;padding:9px 0;border-bottom:1px solid #ccc9bd}.inspector dd{text-align:right;font-weight:700}.inspector pre{max-height:280px;overflow:auto;padding:14px;background:var(--ink);color:#d8ff4a;font:10px/1.6 ui-monospace,monospace;white-space:pre-wrap}.offline{padding:12px;border:1px solid #a4392a;background:#fff0ec;color:#a4392a;font-size:11px;font-weight:700;line-height:1.5}footer{display:flex;justify-content:space-between;padding:18px 24px;border-top:1px solid var(--ink);color:#66645d}
@media(max-width:900px){header,.workspace{grid-template-columns:1fr}section{border-right:0;border-bottom:1px solid var(--ink)}.formats,.patterns{grid-template-columns:repeat(2,1fr)}.brands{grid-template-columns:repeat(2,1fr)}.source-bank{grid-template-columns:repeat(3,1fr)}.source-bank button{grid-column:1/-1}}@media(max-width:620px){main{width:calc(100% - 12px);margin:6px}header{padding:28px 20px}h1{font-size:58px}.form,.provider{grid-template-columns:1fr}.wide{grid-column:auto}nav{grid-template-columns:1fr}nav button{min-height:40px}.brands,.formats,.patterns,.source-bank{grid-template-columns:1fr}.source-bank>div{border-right:0;border-bottom:1px solid var(--ink)}section,aside{padding:30px 20px}footer{display:grid;gap:8px}}