:root{--ink:#f4f3f1;--mist:#09090b;--pool:#d9ff77;--muted:#aaa3b6;--line:#ffffff26;color-scheme:dark}
body{background:#09090b;color:#f4f3f1}
h1,h2,h3{font-family:'Space Grotesk','DM Sans',sans-serif}
header{max-width:1400px;border-bottom:1px solid var(--line)}
header .wordmark{font-weight:600}
header .beta{background:#ffffff14;color:#d6cee1}
header nav{color:#c8c0d3;font-weight:400}
.button{background:#d9ff77;color:#14180f;border-radius:9px;font-size:13px}
.button:hover{background:#e7ffa5}
.button.secondary{background:#ffffff06;color:#eee7f6;border-color:#ffffff2c}
.button.secondary:hover{background:#ffffff12}
.button.light{background:#f4f3f1;color:#14180f}
.button.danger{background:#301b26;color:#ffd5db;border-color:#613648}
.guide .button{color:#14180f}
.guide a{color:#d9ff77}
.controls,.download-panel{background:#15141b;border-color:#ffffff26}
.controls input[type=text]{background:#0c0b12;color:#f4f3f1;border-color:#ffffff2e}
.controls input[type=file]{color:#bcb2ca}
.controls h2{font-weight:500;font-size:21px}
.notice{background:#191720;color:#c7bbd7;border-color:#b8c58d}
.studio{grid-template-columns:minmax(0,1fr) 330px;align-items:start}
.controls{grid-column:2;grid-row:1}
.preview-area{grid-column:1;grid-row:1;align-self:start;position:sticky;top:24px;min-height:570px;background:radial-gradient(ellipse at 50% 35%,#3b2d51,#17131e 65%,#111016);border:1px solid #ffffff1d;padding:50px 32px}
.preview-frame>canvas{box-shadow:0 35px 45px #0007}
.featured-swatches button{color:#e4dceb}
.featured-swatches span{font-size:10px}
.empty{background:#15141b;border-color:#ffffff36}
.skip{background:#d9ff77;color:#14180f}
#toast{background:#d9ff77;color:#14180f;z-index:80}
footer{max-width:1400px}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline-color:#d9ff77}
@media(max-width:1000px){.studio{grid-template-columns:minmax(0,1fr) 290px}.preview-area{padding:32px 22px;min-height:480px}.studio-actions .button{font-size:11px;padding:12px 14px}}
@media(max-width:700px){.studio{display:flex;flex-direction:column;gap:24px}.preview-area{position:static;top:auto;order:0;width:100%;min-height:330px;padding:28px 20px}.controls{order:1;width:100%}.featured-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.controls input[type=file]{font-size:11px}.page-title h1{font-size:37px}.preview-area .micro{font-size:10px!important}.studio-actions{gap:8px}.studio-actions .button{font-size:10px;padding:11px 12px}}
:root{--ink:#f4f7f6;--mist:#111b21;--pool:#9cdef0;--muted:#a6b8c0;--line:#d1e7f224}
body{background:#111b21;color:#f4f7f6}
header .wordmark img{width:40px;height:32px}
.button{background:#9cdef0;color:#10232e;border-radius:50px}
.button:hover{background:#c1effb}
.guide a{color:#9cdef0}
.controls,.download-panel,.empty{background:#18272f;border-color:#d1e7f224}
.controls input[type=text],.controls input[type=email],.controls input[type=password]{background:#101c23;color:#f4f7f6;border-color:#d1e7f235}
.preview-area{background:#dce5e8;border-color:#d1e7f224;color:#17313f;border-radius:22px}
.preview-area .micro{color:#536a76}
.preview-area .button.secondary{background:#10232e0a;color:#16313f;border-color:#16313f35}
.notice{background:#1c2d36;color:#c1d5df;border-color:#9cdef0}
#toast{background:#9cdef0;color:#10232e}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline-color:#9cdef0}