:root{font-family:Inter,ui-sans-serif,system-ui,Arial,sans-serif;color:#f0eeec;background:#141414}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}.app{min-height:100dvh}.header{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;border-bottom:1px solid #343434;background:#181818}.brand{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:800;letter-spacing:.16em;min-width:260px}.brand b{font-size:10px;color:#a7a29e}.brand-glyph{font-size:24px;font-weight:400}.header-center{font-size:10px;color:#96918e;letter-spacing:.15em}.header-actions{min-width:260px;display:flex;justify-content:flex-end;gap:8px}.ghost,.solid{border-radius:4px;padding:9px 15px;font-weight:650;font-size:13px}.ghost{color:#c9c5c2;border:1px solid #494747;background:transparent}.solid{background:#fff6f4;color:#171717;border:1px solid #fff6f4}.layout{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;min-height:calc(100dvh - 66px)}.panel{padding:24px;background:#1d1d1e;overflow-y:auto;max-height:calc(100dvh - 66px);scrollbar-width:thin}.left{border-right:1px solid #3a3939}.right{border-left:1px solid #3a3939}.panel-heading{margin-bottom:20px}.panel-heading>span,.source-note>span,.stage-top span,.status,.stage-foot{font-size:10px;letter-spacing:.15em;color:#aaa39e}.panel-heading h1,.panel-heading h2{font-weight:550;font-size:26px;line-height:1.08;letter-spacing:-.04em;margin:13px 0 9px}.panel-heading p,details p{color:#a7a19c;font-size:13px;line-height:1.45;margin:0}.panel section{border-top:1px solid #3c3a39;padding:19px 0}.panel h2,.panel h3,.export h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 18px;font-weight:650}.control{margin-bottom:18px}.control label{display:flex;justify-content:space-between;color:#ddd8d5;font-size:13px;margin-bottom:10px}.control output{font-variant-numeric:tabular-nums;color:#b0aaa5}.control input[type=range],.tip-input{appearance:none;display:block;width:100%;height:3px;background:#62605e;margin:0;cursor:pointer}.control input[type=range]::-webkit-slider-thumb,.tip-input::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#fff6f4}.control input[type=range]::-moz-range-thumb,.tip-input::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff6f4;border:0}details{border:1px solid #4c4948;border-radius:5px;padding:12px;margin-top:5px}summary{list-style:none;display:flex;justify-content:space-between;cursor:pointer;font-size:13px}summary::-webkit-details-marker{display:none}details p{font-size:12px;margin:11px 0}.tip-group{border-top:1px solid #444140;padding-top:10px;margin-top:10px}.tip-group strong{font-size:11px;color:#aaa4a0;font-weight:600}.tip-row{margin:10px 0}.tip-row label{display:flex;justify-content:space-between;font-size:11px;color:#c7c2bf;margin-bottom:8px}.tip-row output{color:#96908b}.subtle{border:1px solid #55504d;border-radius:4px;background:#323031;color:#ece7e3;padding:9px 12px;width:100%;font-size:12px;margin-top:7px}.colors,.export-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.colors label,.export-row label,.select-label{font-size:11px;color:#aaa39e}.colors input{display:block;width:100%;height:39px;border:0;padding:0;background:none;margin-top:7px;cursor:pointer}.palette{display:flex;gap:10px;margin-top:14px}.palette button{width:29px;height:29px;border-radius:50%;border:2px solid #1d1d1e;outline:1px solid transparent;background:linear-gradient(135deg,var(--fg) 50%,var(--bg) 50%)}.palette button.selected{outline-color:#fff6f4}.source-note{border-top:1px solid #3c3a39;padding-top:18px;display:flex;flex-direction:column;gap:9px}.source-note a{color:#e4deda;text-decoration:none;font-size:12px}.source-note a:hover{text-decoration:underline}.main{display:flex;flex-direction:column;padding:22px;min-width:0;background:#151515}.stage-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.stage-top strong{display:block;font-weight:550;font-size:17px;margin-top:4px}.status{display:flex;align-items:center;gap:7px}.status i{width:6px;height:6px;border-radius:50%;background:#cbf3aa}.stage{position:relative;flex:1;min-height:470px;background:#111;border:1px solid #393838;overflow:hidden;touch-action:none}.stage canvas{display:block;width:100%;height:100%}.stage-badge{position:absolute;left:18px;bottom:16px;font-size:10px;letter-spacing:.14em;color:#ffffffaa;pointer-events:none}.stage-controls{position:absolute;right:16px;bottom:15px;display:flex;gap:6px}.stage-controls button{background:#ffffffd9;color:#181818;border:0;border-radius:4px;padding:7px 10px;font-size:12px}.stage-foot{display:flex;justify-content:space-between;margin-top:13px;gap:10px}.check{display:flex;align-items:center;gap:9px;color:#d6d0cb;font-size:13px;margin-bottom:18px;cursor:pointer}.check input{accent-color:#fff6f4}.select-label{display:block;margin-top:6px}.select-label select,.export-row select{display:block;width:100%;background:#2c2b2c;border:1px solid #565250;color:#f0edeb;padding:8px;border-radius:4px;margin-top:7px;font-size:12px}.export{border-top:1px solid #3c3a39;padding-top:20px;margin-top:4px}.wide{width:100%;margin-top:12px;padding:11px}.source-svg{position:absolute;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none}@media(max-width:1120px){.layout{grid-template-columns:300px minmax(0,1fr)}.right{grid-column:1/-1;max-height:none;border-left:0;border-top:1px solid #3a3939;display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}.right .panel-heading{grid-column:1/-1}.right .export{align-self:end}.panel.left{max-height:calc(100dvh - 66px)}}@media(max-width:720px){.header{padding:0 15px;height:58px}.brand,.header-actions{min-width:0}.brand{font-size:12px}.brand-glyph{font-size:19px}.header-center{display:none}.layout{display:flex;flex-direction:column}.main{order:0;padding:14px}.stage{min-height:360px;height:57vh;flex:none}.stage-foot{font-size:9px}.panel{max-height:none;padding:21px}.left{order:1;border-right:0}.right{order:2;display:block}.panel-heading h1,.panel-heading h2{font-size:24px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.panel .panel-heading h2{font-size:26px;line-height:1.08;letter-spacing:-.04em;text-transform:none;font-weight:550;margin:13px 0 9px}
/* A quiet floating control surface over a full-bleed canvas. */
:root{color:#222;background:#111;font-family:Arial,Helvetica,sans-serif}.header{position:fixed;z-index:4;top:0;left:0;right:0;height:68px;background:transparent;border:0;color:#fff6f4;padding:0 28px;pointer-events:none}.header>*{pointer-events:auto}.brand{min-width:0;font-size:14px;letter-spacing:.04em}.brand b{font-size:14px;color:inherit;font-weight:400}.header-center{display:none}.header-actions{min-width:0}.ghost,.solid{font-size:14px;font-weight:400;border-radius:20px;padding:9px 16px}.ghost{background:#ffffff12;border-color:#ffffff35;color:#fff}.layout{display:block;min-height:100dvh}.main{position:relative;padding:0;height:100dvh;background:#111}.stage{position:absolute;inset:0;border:0;min-height:0}.stage-top{position:absolute;z-index:1;left:28px;top:88px;color:#fff;pointer-events:none}.stage-top>div:first-child{display:none}.status{font-size:12px;letter-spacing:.04em}.status i{display:none}.stage-foot{position:absolute;left:28px;bottom:28px;z-index:1;font-size:12px;letter-spacing:0;color:#ffffff80}.stage-foot>span:first-child{display:none}.stage-badge{left:28px;bottom:58px;font-size:12px;letter-spacing:0}.stage-controls{right:auto;left:28px;bottom:86px}.stage-controls button{border-radius:50px;font-size:14px;padding:9px 14px;background:#ffffff16;color:#fff;border:1px solid #ffffff35}.panel.left{position:fixed;z-index:3;right:28px;top:88px;bottom:28px;width:286px;max-height:none;border:1px solid #ffffff65;border-radius:22px;padding:22px;background:#e7e7e7ed;backdrop-filter:blur(24px);box-shadow:0 14px 40px #0003;scrollbar-width:thin;scrollbar-color:#b3b3b3 transparent}.panel-heading{margin-bottom:16px}.panel-heading>span{display:none}.panel-heading h1{font-size:16px;font-weight:400;letter-spacing:0;margin:0}.panel-heading p:empty{display:none}.panel section{padding:16px 0 0;border-color:#ccc}.panel h2,.panel h3,.export h3{font-size:12px;font-weight:400;letter-spacing:.04em;color:#777;margin-bottom:18px}.control{margin-bottom:21px}.control label{color:#222;font-size:14px;margin-bottom:12px}.control output{color:#777;font-size:12px}.control input[type=range],.tip-input{height:1px;background:#aaa}.control input[type=range]::-webkit-slider-thumb,.tip-input::-webkit-slider-thumb{width:9px;height:9px;background:#333}.control input[type=range]::-moz-range-thumb,.tip-input::-moz-range-thumb{width:9px;height:9px;background:#333}.colors label,.export-row label,.select-label{font-size:14px;color:#444}.colors input{height:24px}.palette button{border-color:#ddd;width:25px;height:25px}.palette button.selected{outline-color:#444}details{border-color:#ccc;padding:12px 0;border-radius:0;border-left:0;border-right:0;margin-bottom:16px}summary{font-size:14px}details p{font-size:14px;color:#777}.tip-group{border-color:#ccc}.tip-group strong,.tip-row label{font-size:12px;color:#555}.tip-row output{color:#777}.subtle{color:#222;background:#fff8;border-color:#ccc;border-radius:18px;font-size:14px}.check{color:#222;font-size:14px}.check input{accent-color:#222}.select-label select,.export-row select{color:#222;background:#fff5;border-color:#bbb;font-size:14px;border-radius:6px}.export{border-color:#ccc;padding-top:16px}.export-note{font-size:12px;color:#777;line-height:1.5}.export .solid{background:#222;border-color:#222;color:#fff}.source-note{border-color:#ccc;margin-top:22px}.source-note>span{font-size:12px;color:#777;letter-spacing:.04em}.source-note a{font-size:14px;color:#555}.controls-hidden .panel.left{display:none}.header-actions .solid{display:none}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #7289fc;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}
@media(min-width:900px){.stage{right:310px}.controls-hidden .stage{right:0}}
@media(max-width:720px){.header{height:64px;padding:0 16px}.panel.left{position:relative;top:auto;right:auto;bottom:auto;width:auto;margin:0 12px 16px;max-height:none;border-radius:20px;padding:22px}.main{height:62dvh;min-height:360px}.stage-top{top:74px;left:16px}.stage-badge{left:16px;bottom:44px}.stage-controls{left:auto;right:16px;bottom:16px}.stage-foot{left:16px;bottom:16px}.layout{display:flex;flex-direction:column}.main{order:0}.panel.left{order:1}.brand-glyph{font-size:23px}.brand,.brand b{font-size:12px}.ghost{font-size:12px;padding:8px 12px}.controls-hidden .main{height:100dvh}.header{background:linear-gradient(#111a,transparent)}}

.recording-tools{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #ccc}.recording-tools .subtle{margin:0}.recording-tools p{font-size:12px;line-height:1.5;color:#777;margin:9px 0 0}.recording-tools .is-recording{background:#aa2424;color:#fff;border-color:#aa2424}.recording-tools:has(.is-recording) p{color:#aa2424}

:root{background:#c7d3dc}.main{background:#c7d3dc}.header{color:#263440}.ghost{color:#263440;background:#ffffff80;border-color:#fff9}.stage-top .status span,.stage-foot,.stage-badge{color:#344653}.stage-controls button{color:#263440;background:#ffffffa8;border-color:#fff8}.panel.left{background:#f0f3f4ed;width:302px}.brand b{font-size:12px;letter-spacing:.1em}.material .colors{margin-bottom:24px}.material-presets{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:2px 0 18px}.material-presets button{border:1px solid #bbc2c7;background:#fff8;border-radius:16px;padding:8px;font-size:14px;color:#29353e}.material-presets button.selected{border-color:#29353e;background:#dce6eb}.control input[type=range]{height:3px}.control input[type=range]::-webkit-slider-thumb{width:13px;height:13px}.control{margin-bottom:23px}.export-note{color:#59656d}@media(min-width:900px){.stage{right:332px}}@media(max-width:720px){.panel.left{width:auto}.header{background:linear-gradient(#c7d3dcdd,transparent)}.brand{gap:6px}.brand b{font-size:10px}}@media(min-width:721px) and (max-width:899px){.stage{right:318px}.panel.left{right:12px;width:294px}.header{padding:0 16px}.brand{font-size:12px}.header-actions{gap:5px}.ghost{padding:8px 12px}}.controls-hidden .stage{right:0}

:root,.main{background:#0b0d10;color:#e5e8ee}.header{color:#e5e8ee}.ghost,.stage-controls button{background:#ffffff08;border-color:#ffffff20;color:#e5e8ee}.stage-top .status span,.stage-foot,.stage-badge{color:#8a929f}.panel.left{background:#16191eea;border-color:#ffffff18;box-shadow:0 20px 70px #0008;scrollbar-color:#41464e transparent;color:#e6e8ed}.panel section,details,.tip-group,.export,.source-note,.recording-tools{border-color:#ffffff18}.control label,.colors label,.export-row label,.select-label,.check{color:#d4d8df}.control output,.panel h2,.panel h3,.export h3,.tip-row output,.recording-tools p,.export-note{color:#9199a5}.control input[type=range],.tip-input{background:#4b515c}.control input[type=range]::-webkit-slider-thumb,.tip-input::-webkit-slider-thumb{background:#d3ddec}.control input[type=range]::-moz-range-thumb,.tip-input::-moz-range-thumb{background:#d3ddec}.subtle,.material-presets button,.select-label select,.export-row select{background:#ffffff07;color:#d8dde6;border-color:#ffffff20}.material-presets button.selected{background:#ffffff19;border-color:#a2b2c9}.check input{accent-color:#b1c6e8}.palette{display:none}.source-note a,.tip-row label,summary{color:#c4cbd5}.export .solid{background:#d5deeb;color:#141920;border-color:#d5deeb}.brand b{color:#8993a2}.panel-heading h1{color:#eef1f7}@media(max-width:720px){.header{background:linear-gradient(#0b0d10dd,transparent)}}

.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid #ffffff25;border-radius:12px;margin:18px 0 10px;background:#ffffff05}.mode-switch button{padding:10px 5px;border:0;border-radius:8px;background:transparent;color:#aab3c0;font-size:14px}.mode-switch button[aria-pressed=true]{background:#d5deeb;color:#141920}.mode-description{font-size:12px;line-height:1.5;color:#9199a5;margin:0 0 16px}.flat-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:18px}.flat-palette button{height:42px;border-radius:6px;border:1px solid #ffffff22;background:var(--bg);color:var(--fg);font-size:31px;line-height:1}.flat-palette button[aria-pressed=true]{outline:2px solid #d5deeb;outline-offset:2px}body[data-mode=flat] .material{display:none}[hidden]{display:none!important}body[data-mode=flat] .header{color:var(--ui-ink,#fff)}body[data-mode=flat] .brand b,body[data-mode=flat] .stage-badge,body[data-mode=flat] .stage-foot,body[data-mode=flat] .stage-top .status span{color:var(--ui-ink,#fff)}body[data-mode=flat] .ghost,body[data-mode=flat] .stage-controls button{color:var(--ui-ink,#fff);background:#88888820;border-color:#88888860}

.randomize-shape{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:4px 0 20px;padding:11px 15px;border-radius:12px;background:#ffffff10;border-color:#ffffff38}.randomize-shape:hover{background:#ffffff1c;border-color:#ffffff70}.randomize-shape span{font-size:20px;line-height:1}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}