@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;700&display=swap";html{font-size:16px}body{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0000;background-image:linear-gradient(#fff7ec 0%,#f5ebdc 46%,#f1e4d1 100%),linear-gradient(#43352808 1px,#0000 1px),linear-gradient(90deg,#43352808 1px,#0000 1px);background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:auto,auto,22px 22px,22px 22px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-width:320px;min-height:100vh;margin:0;font-family:Space Grotesk,Avenir Next,Segoe UI,sans-serif}*{box-sizing:border-box}button,input,textarea,select{font:inherit}#root{min-height:100vh}:root{--ink-strong:#1f1812;--ink:#4d4032;--ink-soft:#7a6b5d;--paper:#fff9f0d6;--paper-strong:#fffdf8f5;--line:#624c3624;--shadow:0 22px 60px #2d1c0f1f;--accent:#c65c2b;--accent-soft:#f7b16a;--accent-ink:#fff;--green:#3a7865;--green-soft:#3a78651f;--error:#b73424;--error-soft:#b734241f;--checker-a:#f8efdf;--checker-b:#efe3cd;--font-body:"Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;--font-mono:"IBM Plex Mono", "SFMono-Regular", Consolas, monospace}.app-shell{min-height:100vh;color:var(--ink);padding:32px;position:relative}.halo{pointer-events:none;filter:blur(10px);opacity:.65;width:32rem;height:32rem;position:fixed;inset:auto}.halo--one{background:radial-gradient(circle,#f4b06c7a,#0000 62%);top:-10rem;right:-8rem}.halo--two{background:radial-gradient(circle,#4c797738,#0000 60%);bottom:-12rem;left:-6rem}.hero,.workspace{z-index:1;position:relative}.hero{grid-template-columns:minmax(0,1.7fr) minmax(16rem,.9fr);align-items:end;gap:1.5rem;max-width:1500px;margin:0 auto 1.5rem;display:grid}.eyebrow{letter-spacing:.24em;text-transform:uppercase;font-family:var(--font-mono);color:var(--green);margin:0 0 .6rem;font-size:.78rem}.eyebrow--small{margin-bottom:.4rem}.hero h1,.stage-header h2,.panel h2{color:var(--ink-strong);margin:0}.hero h1{letter-spacing:-.05em;max-width:12ch;font-size:clamp(2.4rem,4vw,4.8rem);line-height:.94}.hero-copy{max-width:60ch;color:var(--ink-soft);margin-top:1rem;font-size:1.05rem}.hero-badge{flex-wrap:wrap;justify-content:flex-end;gap:.75rem;display:flex}.hero-badge span,.status-pill{color:var(--green);background:#fffdf7eb;border:1px solid #3a78652e;border-radius:999px;align-items:center;padding:.7rem .95rem;font-size:.82rem;display:inline-flex;box-shadow:0 10px 24px #44321e0f}.status-pill{padding:.55rem .85rem}.status-pill--good{background:var(--green-soft)}.workspace{grid-template-columns:minmax(18rem,25rem) minmax(0,1fr);gap:1.25rem;max-width:1500px;margin:0 auto;display:grid}.control-rail,.stage-panel{flex-direction:column;gap:1rem;display:flex}.panel,.stage-panel{border:1px solid var(--line);background:linear-gradient(180deg, var(--paper-strong), var(--paper));box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:28px}.panel{padding:1.1rem}.panel-heading,.stage-header{justify-content:space-between;align-items:start;gap:1rem;margin-bottom:.95rem;display:flex}.hint,.helper,.stage-footer p,.dropzone small,.swatch-card small,.meta-grid label,.stats label{color:var(--ink-soft)}.ghost-button,.segmented button,.dropzone,.export-button,.stage-controls button{border:1px solid #0000;transition:transform .18s,background-color .18s,border-color .18s,box-shadow .18s}.ghost-button{font:inherit;color:var(--ink-strong);border-color:var(--line);cursor:pointer;background:#ffffffb8;border-radius:999px;padding:.55rem .9rem}.ghost-button:hover,.segmented button:hover,.dropzone:hover,.export-button:hover,.stage-controls button:hover{transform:translateY(-1px)}.dropzone{width:100%;color:var(--ink-strong);text-align:left;cursor:pointer;background:linear-gradient(135deg,#f8e8cedb,#fffcf7eb),linear-gradient(135deg,#3a786514,#0000);border:1px dashed #c65c2b66;border-radius:24px;gap:.35rem;padding:1.4rem;display:grid}.dropzone--active{border-color:var(--green);box-shadow:0 0 0 4px #3a78651f}.meta-grid,.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:.95rem;display:grid}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.meta-grid div,.stats div{background:#fff9;border:1px solid #5d482f14;border-radius:18px;padding:.85rem}.meta-grid strong,.stats strong,.swatch-card strong{color:var(--ink-strong);margin-top:.25rem;display:block}.segmented{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;display:grid}.segmented--wide{grid-template-columns:repeat(4,minmax(0,1fr))}.segmented button{font:inherit;cursor:pointer;color:var(--ink);background:#ffffffad;border-color:#5d482f14;border-radius:16px;padding:.8rem .9rem}.segmented button.is-active{background:linear-gradient(135deg, var(--accent), #d78347);color:var(--accent-ink);box-shadow:0 12px 24px #c65c2b38}.segmented button:disabled{cursor:not-allowed;opacity:.45}.swatch-stack{gap:.75rem;display:grid}.swatch-card{background:#ffffff9e;border:1px solid #5d482f14;border-radius:18px;grid-template-columns:auto minmax(0,1fr);gap:.85rem;padding:.85rem;display:grid}.swatch-card--subtle{background:#f8f3ebad}.swatch{border:2px solid #ffffffd1;border-radius:16px;width:2.8rem;height:2.8rem;box-shadow:inset 0 0 0 1px #2d21121f}input[type=range]{width:100%;accent-color:var(--accent)}.range-copy{color:var(--ink-soft);justify-content:space-between;margin-top:.4rem;font-size:.88rem;display:flex}.helper{margin:.85rem 0 0;font-size:.92rem}.export-button{width:100%;font:inherit;background:linear-gradient(135deg, var(--green), #4d9b80);color:#fff;cursor:pointer;border-radius:18px;margin-top:.95rem;padding:.95rem 1rem;font-weight:600;box-shadow:0 16px 34px #3a78652e}.export-button:disabled{cursor:not-allowed;opacity:.6;box-shadow:none}.error-banner{background:var(--error-soft);color:var(--error);border:1px solid #b734242e;border-radius:18px;padding:.95rem 1rem}.stage-panel{min-height:75vh;padding:1.2rem}.status-pills{flex-wrap:wrap;justify-content:flex-end;gap:.5rem;display:flex}.stage-shell{background:radial-gradient(circle at 0 0,#f7b16924,#0000 24%),radial-gradient(circle at 100% 100%,#3a78651f,#0000 26%),linear-gradient(#ffffff8f,#f5ebddb8);border:1px solid #5d482f1f;border-radius:26px;flex:1;min-height:32rem;position:relative;overflow:hidden}.stage-canvas{touch-action:none;width:100%;height:100%;display:block}.stage-canvas--pick{cursor:crosshair}.stage-canvas--pan{cursor:grab}.stage-controls{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffdf8eb;border:1px solid #5d482f1f;border-radius:999px;align-items:center;gap:.5rem;padding:.5rem;display:inline-flex;position:absolute;bottom:1rem;left:1rem;box-shadow:0 12px 24px #251c1214}.stage-controls button{font:inherit;color:var(--ink-strong);cursor:pointer;background:0 0;border-color:#5d482f1f;border-radius:999px;min-width:2.4rem;height:2.4rem}.stage-controls span{text-align:center;min-width:3.8rem;font-family:var(--font-mono);color:var(--ink-soft)}.stage-footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem;display:grid}.stage-footer p{background:#ffffff8f;border:1px solid #5d482f14;border-radius:18px;margin:0;padding:.9rem 1rem}@media (width<=1100px){.hero,.workspace{grid-template-columns:1fr}.hero-badge,.status-pills{justify-content:flex-start}}@media (width<=720px){.app-shell{padding:16px}.panel,.stage-panel{border-radius:22px}.stage-shell{min-height:22rem}.stage-footer,.stats,.meta-grid,.segmented--wide{grid-template-columns:1fr}.hero h1{max-width:none}}