:root{color-scheme:dark;--ink:#f9f3ff;--muted:#b8adc9;--panel:#20192e;--line:#40334f;--mint:#d8ff9e;--violet:#dabaff;font:16px/1.5 'Trebuchet MS',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 76% 12%,#342147 0,transparent 45%),#110d1b;color:var(--ink)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}header,footer{max-width:1320px;margin:auto;padding:24px 32px;display:flex;gap:24px;align-items:center;justify-content:space-between}header{border-bottom:1px solid var(--line)}header>a:last-child{font-size:13px;color:var(--muted)}.brand{font-size:29px;font-weight:900;letter-spacing:-1.5px;display:flex;align-items:center;gap:12px}.brand span{font-size:11px;letter-spacing:.12em;font-weight:400;color:var(--muted)}.local{font-size:10px;letter-spacing:.13em;color:var(--mint);border:1px solid #515b3a;padding:5px 9px;border-radius:5px}main{max-width:1260px;margin:auto;padding:44px 24px}.intro{margin-bottom:36px}.eyebrow{font-size:11px;letter-spacing:.19em;color:var(--mint);font-weight:bold;margin:0 0 12px}h1{font-size:clamp(34px,4.2vw,58px);letter-spacing:-2px;line-height:1.08;margin:0 0 15px}h1 em{font-family:Georgia,serif;color:var(--violet);font-weight:400}p{margin:0}.intro>p:last-child{color:var(--muted);max-width:670px;font-size:16px}h2{font-size:18px;margin:0;letter-spacing:-.3px}h3{font-size:16px;margin:0 0 8px}.editor{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}.controls{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}.section-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}.section-head:not(:first-child){border-top:1px solid var(--line);padding-top:24px;margin-top:24px}.step{display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;border:1px solid #79648e;font:11px monospace;color:var(--violet);flex-shrink:0}label,legend{font-size:12px;color:#e1d6eb;display:block;margin-bottom:7px}label>span,output{float:right;color:var(--muted);font-size:11px}textarea,select,input[type=number]{font:14px 'Trebuchet MS',sans-serif;width:100%;color:var(--ink);background:#151020;border:1px solid #665574;border-radius:8px;padding:11px;min-height:43px;margin-bottom:17px}textarea{font-size:18px;resize:vertical;max-height:180px}input[type=range]{width:100%;accent-color:#d8b7ff;margin:4px 0 20px;min-height:20px}input[type=color]{display:block;width:100%;height:38px;border:1px solid #665574;background:transparent;padding:4px;border-radius:8px;margin-top:7px}input[type=checkbox]{accent-color:var(--violet);width:16px;height:16px}.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:13px}.split input[type=range]{margin-top:15px;margin-bottom:0}.check{display:flex;gap:8px;align-items:center;line-height:1.5;margin:15px 0}fieldset{border:0;margin:0;padding:0}.palettes{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:20px}button{font:inherit;cursor:pointer;border:1px solid #665574;color:var(--ink);background:#302440;padding:10px 14px;border-radius:9px;min-height:40px}button:hover{border-color:#e5c6ff;background:#3c2c50}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}.palette{padding:9px 3px 6px;font-size:10px;min-height:65px}.palette span{display:block;width:27px;height:27px;border-radius:50%;margin:0 auto 5px;border:1px solid #ffffff40}.palette[aria-pressed=true]{border-color:#dcbbff;background:#463155}.controls details{margin-top:20px;border-top:1px solid var(--line);padding-top:17px}.controls summary{font-size:13px;cursor:pointer;min-height:32px}.controls details[open] summary{margin-bottom:13px}.hint{font-size:12px;color:var(--muted);line-height:1.6}.preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;padding:4px 0}.preview-head>div{display:flex;align-items:center;gap:10px}.preview-head button{font-size:12px}.stage{min-height:310px;display:flex;align-items:center;justify-content:center;padding:40px 24px;border-radius:17px;border:1px solid #635375;overflow:hidden;background-color:#ded7e7;background-image:conic-gradient(#eee8f4 25%,transparent 0 50%,#eee8f4 0 75%,transparent 0);background-size:24px 24px}.stage[data-view=dark]{background:#15101f}.stage[data-view=light]{background:#fff}canvas#art{display:block;max-width:100%;height:auto;object-fit:contain}.preview-bottom{display:flex;align-items:center;justify-content:space-between;margin:12px 0 5px;color:var(--muted);font-size:12px}.view{display:flex;gap:5px}.view button{font-size:11px;padding:5px 10px;min-height:32px}.view button[aria-pressed=true]{background:var(--violet);color:#281736}.surface-note{font-size:11px;color:var(--muted);margin-bottom:25px}.export{border:1px solid #584468;background:linear-gradient(120deg,#30223f,#21192e);border-radius:16px;padding:23px;display:grid;grid-template-columns:1fr 110px;gap:15px}.export p{color:var(--muted);font-size:13px;margin-top:5px}.export label{margin:0}.export select{margin:6px 0 0}.download-row{display:flex;gap:10px;flex-wrap:wrap;grid-column:1/-1}.download-row button{font-size:13px;font-weight:bold}.primary{background:var(--mint);border-color:var(--mint);color:#223011;flex:1}.primary:hover{background:#e7ffc7;color:#223011;border-color:#fff}.export #status{grid-column:1/-1;color:var(--mint);margin:0;min-height:20px;font-size:12px}.export>.hint{grid-column:1/-1;margin:0;font-size:11px}.examples{margin-top:32px}.examples .eyebrow{font-size:9px;margin-bottom:6px}#examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:15px}.example{padding:12px 8px 10px;background:#211a2d;overflow:hidden;font-size:11px;color:var(--muted)}.example canvas{width:100%;height:auto;display:block;margin-bottom:8px}.privacy{display:flex;gap:10px;margin-top:26px;color:var(--muted);font-size:12px}.privacy>span{font-size:27px;color:var(--violet)}.help{margin-top:48px;border-top:1px solid var(--line);padding-top:28px}.help>div{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:24px}.help p{font-size:13px;color:var(--muted)}footer{border-top:1px solid var(--line);font-size:12px;color:var(--muted)}footer strong{font-size:21px;color:var(--violet)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}@media(max-width:800px){header{padding:16px 20px;gap:10px}.brand{font-size:24px}.brand span,header>a:last-child{display:none}main{padding:28px 16px}.intro{margin-bottom:26px}.editor{grid-template-columns:1fr;gap:22px}.workspace{display:contents}.preview-head{grid-row:1;margin:0}.stage{grid-row:2;min-height:170px;padding:24px 12px}.preview-bottom{grid-row:3;margin:-12px 0}.surface-note{grid-row:4;margin:-6px 0;font-size:10px}.controls{grid-row:5;padding:20px}.export{grid-row:6;padding:18px;grid-template-columns:1fr 92px}.examples{grid-row:7;margin-top:3px}.privacy{grid-row:8;margin-top:0}.help{margin-top:32px}.help>div{grid-template-columns:1fr;gap:22px}h1{letter-spacing:-1px}.preview-head h2{font-size:16px}.preview-head button{padding:8px;font-size:11px}footer{flex-wrap:wrap;padding:20px}#examples{gap:6px}.download-row button{padding:12px 10px}.export h2{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
.site-embedded>header,.site-embedded>footer{display:none}