:root{--bg:#14171d;--panel:#1b1f27;--raised:#252b36;--line:#2d3440;--text:#d5dbe5;--muted:#8a94a6;--accent:#4da3ff;--error:#ff7b72;--warn:#ffb020;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;font:13px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.app{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:42px minmax(0,1fr) 320px;height:100%;display:grid}.menubar{background:var(--panel);border-bottom:1px solid var(--line);white-space:nowrap;grid-column:1/-1;grid-template-columns:1fr auto 1fr;align-items:center;height:32px;padding:0 8px 0 12px;display:grid}.menubar .left{align-items:center;gap:10px;display:flex}.menubar .brand{letter-spacing:.08em;color:var(--accent);font-weight:700}.menubar .menus{display:flex}.menubar .menu{position:relative}.menubar .shade{z-index:30;position:fixed;inset:0}.menubar .menu>button{z-index:31;border-radius:5px;height:24px;padding:0 9px;position:relative}.menubar .menu>button:hover,.menubar .menu>button.open{background:var(--raised)}.menubar .dropdown{z-index:31;background:var(--raised);border:1px solid var(--line);border-radius:8px;min-width:220px;padding:5px;display:grid;position:absolute;top:27px;left:0;box-shadow:0 12px 32px #00000080}.menubar .dropdown button{text-align:left;border-radius:5px;justify-content:space-between;align-items:center;gap:28px;height:26px;padding:0 10px;display:flex}.menubar .dropdown.ticks button{padding-left:28px;position:relative}.menubar .dropdown .tick{position:absolute;left:10px}.menubar .dropdown button.at{background:var(--accent);color:#08111f}.menubar .dropdown button:disabled{color:color-mix(in srgb, var(--muted) 55%, transparent);cursor:default}.menubar .dropdown kbd{font:inherit;color:var(--muted);font-size:12px}.menubar .dropdown button.at kbd,.menubar .dropdown button:disabled kbd{color:inherit}.menubar .dropdown hr{border:0;border-top:1px solid var(--line);width:100%;margin:5px 0}.menubar .title{align-items:center;gap:8px;min-width:0;display:flex}.menubar .name,.menubar .account{border-radius:5px;height:24px;padding:0 9px}.menubar .name:hover,.menubar .account:hover{background:var(--raised)}.menubar .name{text-overflow:ellipsis;max-width:36vw;font-weight:600;overflow:hidden}.menubar .state{color:var(--muted);font-size:11px}.menubar .state.dirty:before{content:"";background:var(--warn);border-radius:50%;width:6px;height:6px;margin-right:5px;display:inline-block}.menubar .right{justify-self:end;display:inline-flex;position:relative}.menubar .account{align-items:center;gap:7px;padding-left:4px;display:inline-flex}.menubar .account img,.menubar .account .initial{border-radius:50%;width:20px;height:20px}.menubar .account .initial{background:var(--accent);color:#08111f;place-items:center;font-size:11px;font-weight:700;display:grid}.menubar .popover{background:var(--raised);border:1px solid var(--line);z-index:10;border-radius:8px;gap:2px;min-width:180px;padding:10px 12px;display:grid;position:absolute;top:28px;right:0;box-shadow:0 12px 32px #00000080}.menubar .popover span{color:var(--muted);font-size:12px}.menubar .popover button{border-top:1px solid var(--line);color:var(--accent);text-align:left;margin-top:8px;padding:5px 0}.toolbar{background:var(--panel);border-right:1px solid var(--line);scrollbar-width:none;flex-direction:column;grid-row:2;align-items:center;padding:2px 0;display:flex;overflow-y:auto}.toolbar .group{flex-direction:column;gap:1px;padding:4px 0;display:flex}.toolbar .group+.group{border-top:1px solid var(--line)}.toolbar button{width:32px;height:28px;color:var(--muted);border-radius:6px;place-items:center;display:grid}.toolbar button:hover{background:var(--raised);color:var(--text)}.toolbar button.active{background:color-mix(in srgb, var(--accent) 22%, transparent);color:var(--accent)}.stage{grid-row:2;min-width:0;min-height:0;position:relative;overflow:hidden}.canvas{cursor:none;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.side{background:var(--panel);border-left:1px solid var(--line);flex-direction:column;grid-row:2;min-height:0;display:flex}.side h2{border-bottom:1px solid var(--line);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;align-items:center;margin:0;padding:7px 12px 6px;font:600 11px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;display:flex}.side .fold{letter-spacing:inherit;text-transform:inherit;border-radius:4px;align-items:center;gap:5px;margin:-3px 0 -3px -7px;padding:3px 7px 3px 3px;display:flex}.side .fold:hover{color:var(--text)}.side .fold[aria-expanded=false] svg{transform:rotate(-90deg)}.layers{border-bottom:1px solid var(--line);flex-direction:column;max-height:40%;display:flex}.layers.folded h2{border-bottom:0}.side:has(.console.folded) .layers{flex:1;min-height:0;max-height:none}.console.folded{flex:none}.console.folded .log{display:none}.console.folded .prompt{padding-top:8px}.layers h2 span{gap:2px;margin:-3px -4px -3px 0;display:flex}.layers h2 span button{border-radius:4px;place-items:center;width:20px;height:20px;display:grid}.layers ul{scrollbar-width:thin;scrollbar-color:var(--line) transparent;margin:0;padding:4px 6px;list-style:none;overflow-y:auto}.layers li{border-radius:5px;align-items:center;gap:2px;min-height:26px;display:flex}.layers li:hover{background:var(--raised)}.layers li.current .name{color:var(--text);font-weight:600}.layers li.off .name,.layers li.off .swatch{opacity:.45}.layers .mark{width:14px;color:var(--accent);text-align:center;font-size:11px}.layers .swatch{border:1px solid #ffffff40;border-radius:3px;flex:none;width:12px;height:12px;margin-right:4px}.layers .name{min-width:0;height:22px;color:var(--muted);font:inherit;text-align:left;text-overflow:ellipsis;white-space:nowrap;flex:1;padding:0 4px;overflow:hidden}.layers .count{min-width:18px;color:var(--muted);text-align:right;padding-right:4px;font-size:11px}.layers li>button:not(.name):not(.swatch),.layers h2 span button{color:var(--muted)}.layers li>button:not(.name):not(.swatch){border-radius:4px;place-items:center;width:22px;height:22px;display:grid}.layers li>button:not(.name):not(.swatch):hover,.layers h2 span button:hover{background:var(--line);color:var(--text)}.layers li>button[aria-pressed=false]{color:color-mix(in srgb, var(--muted) 55%, transparent)}.layers li>button[aria-pressed=true][aria-label^=Lock]{color:var(--warn)}.layers li:not(:hover):not(:focus-within) .quiet{visibility:hidden}.layers .hint{border-top:1px solid var(--line);color:var(--accent);margin:0;padding:5px 12px 7px;font-size:11px}.console{cursor:text;flex-direction:column;flex:1;min-height:0;display:flex}.console .log{min-height:0;color:var(--muted);-webkit-user-select:text;user-select:text;white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:var(--line) transparent;flex-direction:column;flex:1;gap:10px;padding:10px 12px 12px;font-size:12px;line-height:18px;display:flex;overflow-y:auto}.console .log>*{flex:none}.console .log .error{color:var(--error)}.console .run h3,.console .ask b{background:var(--raised);color:var(--muted);letter-spacing:.04em;border-radius:4px;margin:0;padding:0 7px;font:600 11px/20px system-ui,-apple-system,Segoe UI,sans-serif;display:inline-block}.console .run.live h3,.console .ask b{background:color-mix(in srgb, var(--accent) 24%, transparent);color:var(--accent)}.console .steps{border-left:1px solid var(--line);color:var(--text);font-family:var(--mono);margin-left:3px;padding-left:10px}.console h3+.steps{margin-top:5px}.console .run.live .steps{border-left-color:color-mix(in srgb, var(--accent) 50%, transparent)}.console .steps .info,.console .steps .error{text-indent:-14px;padding-left:14px}.console .log .echo{color:var(--muted);font-family:var(--mono);justify-content:space-between;align-items:baseline;gap:12px;display:flex}.console .log .reply{color:var(--text);text-align:right}.console .log .question,.console .log .answer{color:var(--text);font-size:13px;line-height:1.45}.console .log .question{border:1px solid var(--line);background:var(--raised);border-radius:10px 10px 3px;align-self:flex-end;max-width:92%;padding:5px 10px}.console .log .answer{gap:8px;display:flex}.console .log .answer svg{color:var(--accent);flex:none;margin-top:3px}.console .log .thinking{color:var(--muted)}.console .log .thinking svg{animation:1.4s ease-in-out infinite thinking}@keyframes thinking{50%{opacity:.3}}@media (prefers-reduced-motion:reduce){.console .log .thinking svg{animation:none}}.console .prompt{padding:0 10px 8px}.console .box{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:2px 10px}.console .box:focus-within{border-color:color-mix(in srgb, var(--accent) 55%, var(--line))}.console .ask{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 0;font-size:12px;display:flex}.console .ask button{border:1px solid var(--line);background:var(--panel);color:var(--accent);border-radius:4px;padding:0 7px;line-height:18px}.console .ask button:hover{border-color:var(--accent)}.console .hint{color:var(--muted)}.console .entry{font:12px/18px var(--mono);align-items:center;gap:6px;display:flex}.console .chevron{color:var(--accent);font-weight:700}.console input{color:#fff;min-width:0;height:30px;font:inherit;caret-color:var(--accent);background:0 0;border:0;outline:0;flex:1}.console input::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent)}.console .keys{color:var(--muted);cursor:default;gap:12px;margin:6px 2px 0;font-size:11px;display:flex}.console kbd{border:1px solid var(--line);font:inherit;border-radius:3px;margin-right:4px;padding:0 4px;line-height:14px;display:inline-block}.status{background:var(--panel);border-top:1px solid var(--line);height:28px;color:var(--muted);white-space:nowrap;grid-column:1/-1;align-items:center;gap:14px;padding:0 12px;font-size:11px;display:flex}.status .coords{min-width:150px;color:var(--text);font-family:var(--mono)}.status .spacer{flex:1}.status .toggles{align-items:center;gap:4px;display:inline-flex}.status .toggles button{background:var(--raised);height:20px;color:var(--muted);letter-spacing:.04em;border-radius:4px;padding:0 8px;font-weight:600}.status .toggles button:hover{color:var(--text)}.status .toggles button.on{background:color-mix(in srgb, var(--accent) 24%, transparent);color:var(--accent)}.status .menu{display:inline-flex;position:relative}.status .toggles .caret{margin-left:-2px;padding:0 5px}.status .popover{background:var(--raised);border:1px solid var(--line);color:var(--text);z-index:10;border-radius:8px;gap:2px;padding:8px 12px 8px 8px;font-size:12px;display:grid;position:absolute;bottom:26px;left:-60px;box-shadow:0 8px 24px #00000073}.status .popover label{cursor:pointer;align-items:center;gap:8px;padding:2px 4px;display:flex}.status .popover input{accent-color:var(--accent);margin:0}.backdrop{z-index:20;background:#080a0e8c;place-items:start center;padding-top:12vh;display:grid;position:fixed;inset:0}.dialog{background:var(--panel);border:1px solid var(--line);border-radius:10px;flex-direction:column;width:min(520px,100vw - 32px);max-height:60vh;display:flex;box-shadow:0 18px 50px #0000008c}.dialog header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:10px 10px 10px 16px;display:flex}.dialog h2{margin:0;font-size:13px;font-weight:600}.dialog header button{width:26px;height:26px;color:var(--muted);border-radius:5px;font-size:18px;line-height:1}.dialog header button:hover,.dialog .delete:hover{background:var(--raised);color:var(--text)}.dialog ul{margin:0;padding:6px;list-style:none;overflow-y:auto}.dialog li{align-items:center;gap:4px;display:flex}.dialog .row{text-align:left;border-radius:6px;flex:1;align-items:baseline;gap:10px;min-width:0;padding:8px 10px;display:flex}.dialog .row:hover{background:var(--raised)}.dialog .number{width:18px;color:var(--muted);font:11px var(--mono);text-align:right}.dialog .name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600;overflow:hidden}.dialog .meta{color:var(--muted);white-space:nowrap;font-size:11px}.dialog .delete{min-width:30px;height:30px;color:var(--muted);border-radius:6px;place-items:center;display:grid}.dialog .delete.sure{background:color-mix(in srgb, var(--error) 18%, transparent);color:var(--error);padding:0 10px;font-weight:600}.dialog.layerprops{width:min(640px,100vw - 32px);height:min(656px,100vh - 32px);max-height:none;color:var(--text);padding:0;overflow:hidden}.layerprops::backdrop{background:#080a0e8c}.layerprops .body{grid-template-columns:190px minmax(0,1fr);min-height:0;display:grid}.layerprops .list{border-right:1px solid var(--line);flex-direction:column;min-height:0;display:flex}.layerprops .items,.layerprops .options{scrollbar-width:thin;scrollbar-color:var(--line) transparent;position:relative;overflow-y:auto}.layerprops .items{flex:1;padding:6px}.layerprops .items button,.layerprops .options button,.layerprops .add{width:100%;color:var(--muted);text-align:left;border-radius:5px;align-items:center;display:flex}.layerprops .items button,.layerprops .add{gap:6px;height:28px;padding:0 8px 0 4px}.layerprops .items button:hover,.layerprops .options button:hover,.layerprops .add:hover{background:var(--raised);color:var(--text)}.layerprops .items button[aria-selected=true],.layerprops .options button[aria-selected=true]{background:color-mix(in srgb, var(--accent) 22%, transparent);color:var(--text)}.layerprops .items .mark{width:12px;color:var(--accent);text-align:center;flex:none;font-size:11px}.layerprops .items .chip{border:1px solid #ffffff40;border-radius:3px;flex:none;width:12px;height:12px}.layerprops .items .label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.layerprops .items svg{width:13px;height:13px;color:var(--muted);flex:none}.layerprops .items .off .chip,.layerprops .items .off .label{opacity:.45}.layerprops .add{width:auto;color:var(--accent);margin:0 6px 6px;padding-left:6px}.layerprops .props{flex-direction:column;gap:14px;min-width:0;padding:14px 16px 16px;display:flex;overflow-y:auto}.layerprops h3{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;margin:0 0 6px;font:600 11px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;display:flex}.layerprops h3 span,.layerprops output{color:var(--text);font:11px/1.4 var(--mono);letter-spacing:0;text-transform:none}.layerprops .naming,.layerprops .fade,.layerprops .state{align-items:center;gap:10px;display:flex}.layerprops .naming input{border:1px solid var(--line);background:var(--bg);min-width:0;height:28px;color:var(--text);font:inherit;-webkit-user-select:text;user-select:text;border-radius:6px;flex:1;padding:0 8px;font-weight:600}.layerprops .naming input:disabled{color:var(--muted)}.layerprops .current{color:var(--accent);white-space:nowrap;font-size:12px}.layerprops .problem{color:var(--error);margin:5px 0 0;font-size:12px}.layerprops .plain{border:1px solid var(--line);background:var(--raised);white-space:nowrap;border-radius:6px;height:28px;padding:0 12px}.layerprops .plain:hover{border-color:var(--muted)}.layerprops .plain:disabled{color:color-mix(in srgb, var(--muted) 55%, transparent);border-color:var(--line);cursor:default}.layerprops .plain.danger:enabled{color:var(--error)}.layerprops .plain.primary{background:var(--accent);color:#08111f;border-color:#0000;font-weight:600}.layerprops .preview{border:1px solid var(--line);background:var(--bg);border-radius:6px;flex:none;width:100%;height:36px}.layerprops .basics{justify-content:space-between;margin-bottom:8px;display:flex}.layerprops .swatches{grid-auto-columns:18px;grid-auto-flow:column;gap:4px;display:grid}.layerprops .swatches.wheel{grid-template-columns:repeat(24,minmax(0,1fr));grid-auto-flow:row;gap:1px}.layerprops .swatches button{aspect-ratio:1;border-radius:2px;box-shadow:inset 0 0 0 1px #ffffff24}.layerprops .swatches button:hover,.layerprops .swatches button:focus-visible,.layerprops .swatches button[aria-selected=true]{outline:2px solid var(--text);outline-offset:1px;position:relative}.layerprops .swatches button:hover:not([aria-selected=true]){outline-color:var(--muted)}.layerprops .pair{grid-template-columns:1fr 1fr;gap:14px;display:grid}.layerprops .options{border:1px solid var(--line);background:var(--bg);border-radius:6px;height:130px;padding:3px}.layerprops .options button{white-space:nowrap;gap:8px;height:24px;padding:0 6px;font-size:12px}.layerprops .sample{flex:none}.layerprops .fade h3{margin:0}.layerprops .fade input{min-width:0;accent-color:var(--accent);flex:1;margin:0}.layerprops .fade output{text-align:right;width:30px}.layerprops .state label{cursor:pointer;align-items:center;gap:6px;display:flex}.layerprops .state input{accent-color:var(--accent);margin:0}.layerprops .state .spacer{flex:1}.wall{background:linear-gradient(#ffffff09 1px, transparent 1px) 0 0 / 100% 40px, linear-gradient(90deg, #ffffff09 1px, transparent 1px) 0 0 / 40px 100%, var(--bg);place-items:center;height:100%;padding:24px;display:grid}.wall .card{background:var(--panel);border:1px solid var(--line);text-align:center;border-radius:14px;width:min(380px,100%);padding:32px 32px 28px;box-shadow:0 24px 60px #00000080}.wall h1{color:var(--accent);letter-spacing:.14em;margin:0 0 10px;font-size:30px}.wall p{color:var(--muted);margin:0 0 22px;line-height:1.55}.wall .google{color:#1f2328;background:#fff;border-radius:8px;justify-content:center;align-items:center;gap:10px;width:100%;height:40px;font-size:14px;font-weight:600;display:inline-flex}.wall .google:hover{background:#eef1f5}.wall .google:disabled,.wall .submit:disabled{opacity:.7;cursor:default}.wall .or{color:var(--muted);align-items:center;gap:10px;margin:16px 0;font-size:12px;display:flex}.wall .or:before,.wall .or:after{content:"";border-top:1px solid var(--line);flex:1}.wall form{gap:10px;display:grid}.wall input{border:1px solid var(--line);background:var(--bg);height:40px;color:var(--text);font:inherit;-webkit-user-select:text;user-select:text;border-radius:8px;padding:0 12px;font-size:14px}.wall input::placeholder{color:var(--muted)}.wall .submit{background:var(--accent);color:#08111f;border-radius:8px;height:40px;font-size:14px;font-weight:600}.wall .submit:enabled:hover{background:color-mix(in srgb, var(--accent) 88%, #fff)}.wall .error{color:var(--error);margin:16px 0 0}.wall .notice{color:var(--text);margin:16px 0 0}.wall .links{justify-content:space-between;margin-top:16px;display:flex}.wall .links button{color:var(--accent)}.wall .links button:hover{text-decoration:underline}.wall .note{margin:0}