:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#050708;color:#e9e0cb}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow:hidden}#field{position:fixed;inset:0;width:100vw;height:100vh}.stage{position:relative;z-index:1;display:grid;min-height:100vh;padding:clamp(20px,5vw,56px);place-items:center}.workbench{display:grid;grid-template-columns:minmax(260px,54vh) minmax(260px,360px);gap:clamp(22px,4vw,64px);align-items:end;width:min(980px,100%)}.render-shell{position:relative;display:grid;aspect-ratio:1;min-width:0;place-items:center}.steg-output{grid-area:1 / 1;width:min(100%,72vh);aspect-ratio:1;border-radius:18px;filter:drop-shadow(0 0 26px rgba(245,194,102,.13));overflow:hidden}.steg-particles{z-index:1;grid-area:1 / 1;display:block;width:min(100%,72vh);aspect-ratio:1;pointer-events:none}.steg-particles[hidden]{display:none}.render-shell.particle-rendering .steg-output path{opacity:0}.steg-output svg{display:block;width:100%;height:100%}.steg-output.no-antialiasing svg{shape-rendering:crispEdges}.controls{display:grid;gap:18px;align-self:center}label{display:grid;gap:8px;color:#e9e0cb94;font-size:11px;letter-spacing:.16em;text-transform:lowercase}textarea{width:100%;min-height:116px;resize:vertical;border:1px solid rgba(233,224,203,.14);border-radius:8px;outline:none;padding:16px;background:#0507088c;color:#f3ead6;font:inherit;font-size:17px;line-height:1.45;letter-spacing:0;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}textarea:focus{border-color:#f5c2668a;box-shadow:0 0 0 3px #f5c26614}.control-row{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;align-items:end}.toggle-control{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 12px;border:1px solid rgba(233,224,203,.14);border-radius:8px;background:#05070861}.toggle-control input{width:38px;height:20px;margin:0;accent-color:#f5c266;cursor:pointer}input[type=color],select{width:100%;height:44px;border:1px solid rgba(233,224,203,.14);border-radius:8px;background:#0507088c;color:#f3ead6;font:inherit}input[type=color]{padding:4px}.color-control{position:relative;display:block}.color-trigger{position:relative;width:100%;min-width:0;padding:0;overflow:hidden;border-color:#e9e0cb2e;background:linear-gradient(45deg,rgba(233,224,203,.12) 25%,transparent 25% 75%,rgba(233,224,203,.12) 75%),linear-gradient(45deg,rgba(233,224,203,.12) 25%,transparent 25% 75%,rgba(233,224,203,.12) 75%);background-position:0 0,6px 6px;background-size:12px 12px}.color-trigger:after{content:"";position:absolute;inset:1px;border-radius:6px;background:var(--swatch, #f5c266)}.color-popover{position:absolute;right:0;bottom:calc(100% + 8px);z-index:4;display:grid;grid-template-columns:56px minmax(120px,1fr);gap:10px;width:min(220px,72vw);padding:10px;border:1px solid rgba(233,224,203,.14);border-radius:8px;background:#050708db;box-shadow:0 16px 42px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.color-popover[hidden]{display:none}.color-popover input[type=color]{width:56px}.download-control{position:relative;display:block}.download-control>button{width:100%}.png-popover{position:absolute;right:0;bottom:calc(100% + 8px);z-index:4;display:grid;gap:10px;width:min(286px,calc(100vw - 32px));padding:12px;border:1px solid rgba(233,224,203,.14);border-radius:8px;background:#050708eb;box-shadow:0 16px 42px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.png-popover[hidden]{display:none}.png-aa-toggle{display:flex;align-items:center;justify-content:space-between;min-height:32px}.png-aa-toggle input{width:38px;height:20px;margin:0;accent-color:#f5c266;cursor:pointer}.png-note{color:#e9e0cb6b;font-size:11px;line-height:1.45;letter-spacing:0;text-transform:none}.png-popover button{width:100%}input[type=range]{width:100%;accent-color:#f5c266;cursor:pointer}select{appearance:none;padding:0 14px;cursor:pointer}button{height:44px;min-width:68px;border:1px solid rgba(233,224,203,.18);border-radius:8px;background:#e9e0cb0f;color:#f3ead6;font:inherit;font-size:12px;letter-spacing:.12em;cursor:pointer}button:hover{border-color:#f5c2666b;background:#f5c2661a}.ignored-note{margin:-6px 0 0;color:#e9e0cb66;font-size:12px}.notes{position:fixed;right:22px;bottom:18px;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:14px;max-width:min(720px,calc(100vw - 44px));color:#e9e0cb57;font-size:12px}.social{display:flex;gap:14px}.notes a{color:#e9e0cb6b;text-decoration:none}.notes a:hover{color:#f5c266d1}@media(max-width:760px){body{overflow:auto}.stage{align-items:start;min-height:auto;padding-bottom:28px}.workbench{grid-template-columns:1fr;gap:24px}.control-row{grid-template-columns:1fr 1fr}.controls{align-self:start}textarea{min-height:96px}.notes{position:relative;right:auto;bottom:auto;justify-content:flex-start;max-width:none;padding:0 20px 22px;gap:8px 12px}}