:root{--ink:#181a1a;--paper:#eeeae0;--panel:#f8f6f0;--line:#cbc7bd;--orange:#e75b2b;--muted:#686b68}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif}header{height:64px;padding:0 max(20px,calc((100% - 1280px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}header a{color:var(--ink);text-decoration:none;font-weight:850;font-size:.8rem}header span{font:800 .68rem ui-monospace,monospace;letter-spacing:.12em;color:var(--orange)}main{width:min(1280px,calc(100% - 32px));margin:auto;padding:60px 0 90px}.intro{max-width:920px}.eyebrow,.control-head small{font:800 .72rem ui-monospace,monospace;letter-spacing:.14em;color:var(--orange)}h1{font-size:clamp(3.2rem,7vw,7rem);line-height:.9;letter-spacing:-.075em;margin:20px 0}.intro>p:not(.eyebrow){font-size:1.1rem;line-height:1.65;color:var(--muted);max-width:700px}.studio{display:grid;grid-template-columns:360px 1fr;gap:18px;margin-top:48px}.controls,.preview{border:1px solid var(--line);background:var(--panel);border-radius:6px}.controls{padding:24px;align-self:start;position:sticky;top:15px}.control-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.control-head button{border:0;background:none;color:var(--orange);font-weight:850;cursor:pointer}.controls>label:not(.check),fieldset{display:grid;gap:8px;margin:0 0 20px;font-weight:800;font-size:.79rem;border:0;padding:0}.controls select,.controls input[type=text],.controls>label input{border:1px solid var(--line);background:white;border-radius:4px;padding:12px;font:500 .83rem ui-monospace,monospace;outline:none}.controls select:focus,.controls input:focus{border-color:var(--orange)}legend{margin-bottom:10px}.swatches{display:grid;grid-template-columns:1fr 1fr;gap:7px}.swatch{border:1px solid var(--line);background:white;border-radius:4px;padding:8px;display:flex;gap:8px;align-items:center;font-weight:750;cursor:pointer}.swatch i{width:20px;height:20px;border-radius:50%;background:#131c1e;border:4px solid #d8a93c}.swatch:nth-child(2) i{background:#e8e2d5;border-color:#1f4141}.swatch:nth-child(3) i{background:#481a20;border-color:#f06552}.swatch:nth-child(4) i{background:#0a3448;border-color:#61d5c8}.swatch.active,.segments button.active{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}.segments{display:flex}.segments button{flex:1;padding:10px;border:1px solid var(--line);background:white;font-weight:750;cursor:pointer}.check{display:flex;gap:9px;align-items:center;font-weight:750;font-size:.8rem;margin:10px 0 22px}.primary{width:100%;padding:14px;border:0;background:var(--ink);color:white;border-radius:4px;font-weight:900;display:flex;justify-content:space-between;cursor:pointer}.primary:hover{background:var(--orange)}.hint{font-size:.68rem;color:var(--muted);line-height:1.5}.preview{padding:34px;display:grid;place-items:center;background:#dedbd2}.poster-frame{background:#b7b4ad;padding:13px;box-shadow:0 22px 44px #29282424}canvas{display:block;width:min(100%,540px);height:auto;background:white}.pipeline{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}.pipeline span{background:#eeeae0;border:1px solid #bcb8af;padding:7px 9px;border-radius:3px;font:700 .63rem ui-monospace,monospace}.pipeline b{color:var(--orange)}@media(max-width:900px){.studio{grid-template-columns:1fr}.controls{position:static}.preview{padding:17px}}@media(max-width:520px){.swatches{grid-template-columns:1fr}.pipeline{display:none}}