@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0d0d0f;font-family:JetBrains Mono,Fira Code,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#ffffff05}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}::selection{background:#00ffff4d;color:#fff}html,body{overscroll-behavior:none}button,input,select{touch-action:manipulation}button{-webkit-tap-highlight-color:transparent}.canvas-container{position:fixed;inset:0;background:#0d0d0f;overflow:hidden;display:flex;align-items:center;justify-content:center}.canvas-container.has-frame{background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),#08080a;background-size:20px 20px}.canvas-wrapper{position:relative;background:#0d0d0f}.canvas-wrapper.canvas-fullscreen{width:100%;height:100%}.canvas-wrapper.canvas-square,.canvas-wrapper.canvas-portrait,.canvas-wrapper.canvas-landscape{overflow:hidden;box-shadow:0 0 0 1px #ffffff26,0 0 60px #000c,0 0 80px #00ffff14,0 0 80px #ff00ff14}.canvas-wrapper.canvas-square{width:min(85vw,85vh);height:min(85vw,85vh)}.canvas-wrapper.canvas-portrait{width:min(55vw,63.75vh);height:min(73.315vw,85vh);aspect-ratio:3 / 4}.canvas-wrapper.canvas-landscape{width:min(85vw,128vh);height:min(53.125vw,80vh);aspect-ratio:16 / 10}.drawing-canvas{width:100%;height:100%;cursor:crosshair;touch-action:none;display:block}.drawing-canvas:focus{outline:none}.canvas-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 0%,transparent 60%,rgba(0,0,0,.3) 100%)}.path-guide,.path-recorder{position:absolute;inset:0;width:100%;height:100%;fill:none}.path-guide{pointer-events:none}.path-editor{position:absolute;inset:0;pointer-events:none}.path-editor.is-resizing{pointer-events:auto;touch-action:none}.path-resize-frame{position:absolute;border:1px solid #b9a4ff70;pointer-events:none}.path-resize-handle{position:absolute;display:grid;place-items:center;width:36px;height:36px;padding:0;background:transparent;border:0;outline:none;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}.path-resize-handle span{width:11px;height:11px;border:2px solid #ede5ff;background:#8563ce;border-radius:2px;box-shadow:0 1px 6px #0009}.path-resize-handle:hover span,.path-resize-handle:focus-visible span{background:#d5c7ff;border-color:#fff}.path-resize-handle:focus-visible{outline:2px solid #d5c7ff;outline-offset:-4px;border-radius:8px}.corner-nw{left:0;top:0;transform:translate(-50%,-50%);cursor:nwse-resize}.corner-ne{right:0;top:0;transform:translate(50%,-50%);cursor:nesw-resize}.corner-sw{left:0;bottom:0;transform:translate(-50%,50%);cursor:nesw-resize}.corner-se{right:0;bottom:0;transform:translate(50%,50%);cursor:nwse-resize}.path-recorder{cursor:crosshair;touch-action:none;background:#b9a4ff06}.path-guide polyline,.path-recorder polyline{stroke:#d5c7ff;stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.path-guide polyline{stroke-dasharray:4 7;opacity:.4}.path-guide .path-dot{fill:#d5c7ff;opacity:.5}.path-record-hint{position:absolute;bottom:20%;left:10%;width:80%;text-align:center;color:#d5c7ff;font-size:14px;pointer-events:none}.canvas-wrapper.canvas-square:before,.canvas-wrapper.canvas-portrait:before,.canvas-wrapper.canvas-landscape:before{content:"";position:absolute;inset:-1px;background:linear-gradient(135deg,rgba(0,255,255,.4) 0%,transparent 15%,transparent 85%,rgba(255,0,255,.4) 100%);z-index:-1;opacity:.6}@media(max-width:900px){.canvas-container{inset:0;--canvas-space-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px) ;--canvas-space-height: calc(100dvh - var(--mobile-header-height) - env(safe-area-inset-bottom) - 24px)}.canvas-wrapper.canvas-square{width:min(var(--canvas-space-width),var(--canvas-space-height));height:auto;aspect-ratio:1}.canvas-wrapper.canvas-portrait{width:min(var(--canvas-space-width),calc(var(--canvas-space-height) * .75));height:auto;aspect-ratio:3 / 4}.canvas-wrapper.canvas-landscape{width:min(var(--canvas-space-width),calc(var(--canvas-space-height) * 1.6));height:auto;aspect-ratio:16 / 10}.path-resize-handle{width:44px;height:44px}.drawing-canvas,.path-recorder{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}}.dice-icon-spin{flex-shrink:0;transform-origin:center;transition:transform .56s cubic-bezier(.2,.75,.25,1)}@media(prefers-reduced-motion:reduce){.dice-icon-spin{transition:none;transform:none!important}}.toolbar-popover.brush-colors-panel{overflow:clip}.color-selector{display:flex;flex-direction:column;gap:12px;font-family:system-ui,sans-serif}.selector-current{display:flex;align-items:center;gap:9px}.selector-color-square{display:block;flex-shrink:0;width:32px;height:32px;padding:0;border:1px solid #ffffff30;border-radius:50%;cursor:pointer}.selector-hex-field{position:relative;display:flex;align-items:center;gap:4px;flex:1;min-width:0;height:36px;padding:0 10px;border:1px solid #ffffff14;border-radius:10px;background:#00000018;color:#878295;font:11px JetBrains Mono,monospace}.selector-hex-field:focus-within{border-color:#d7c7a070;background:#ffffff05}.selector-hex-field:has([aria-invalid=true]){border-color:#fa9898}.selector-hex-field input{min-width:0;width:100%;height:100%;padding:0;border:0;background:transparent;color:#eeeaf3;font:inherit;letter-spacing:.5px;text-transform:uppercase}.toolbar-popover .selector-hex-field input:focus-visible{outline:0}.selector-hex-caption{font-size:9px;letter-spacing:.8px;color:#a19aaa}.selector-hex-error{position:absolute;z-index:2;top:calc(100% + 5px);left:0;padding:6px 8px;border:1px solid #fa989860;border-radius:6px;background:#30252d;color:#ffc0c0;white-space:nowrap;font:11px system-ui,sans-serif}.selector-random{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff04;color:#b5aebf;cursor:pointer;transition:color .15s,background .15s}.selector-random:hover{background:#ffffff0d;color:#f4dfb1}.selector-random svg{width:17px;height:17px}.selector-swatch-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.selector-swatch{display:grid;place-items:center;min-width:0;height:32px;padding:3px;border:0;border-radius:50%;background:transparent;cursor:pointer}.selector-swatch>span{display:grid;place-items:center;width:26px;height:26px;border-radius:inherit;background:var(--swatch);color:var(--swatch-ink);box-shadow:inset 0 0 0 1px #ffffff18;transition:transform .15s,box-shadow .15s}.selector-swatch:hover>span{transform:scale(1.13);box-shadow:inset 0 0 0 1px #ffffff30,0 3px 9px #0005}.selector-swatch[aria-pressed=true]>span{outline:1px solid #eee9f3;outline-offset:3px}.selector-swatch svg{width:16px;height:16px}.selector-spectrum{display:flex;flex-direction:column;gap:9px}.selector-color-space{position:relative;height:126px;flex-shrink:0;border-radius:10px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,#fff0);box-shadow:inset 0 0 0 1px #ffffff12;cursor:crosshair;touch-action:none}.selector-color-space:focus-visible{outline:2px solid var(--toolbar-accent, #ffda57);outline-offset:3px}.selector-color-cursor{position:absolute;width:13px;height:13px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0009,inset 0 0 0 1px #0004;pointer-events:none}.selector-hue{appearance:none;-webkit-appearance:none;width:100%;height:22px;margin:0;padding:0;border:0;border-radius:12px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red) center / 100% 10px no-repeat;cursor:pointer}.selector-hue::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:2px solid white;border-radius:50%;background:var(--selector-hue);box-shadow:0 1px 4px #0008}.selector-hue::-moz-range-thumb{width:12px;height:12px;border:2px solid white;border-radius:50%;background:var(--selector-hue);box-shadow:0 1px 4px #0008}.selector-spectrum-caption{display:flex;justify-content:space-between;color:#aaa1b7;font:10px JetBrains Mono,monospace}.selector-spectrum-caption>span{display:flex;align-items:center;gap:8px}.selector-spectrum-caption i{width:2px;height:2px;border-radius:50%;background:#8f879f}.selector-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.brush-colors-panel .property-item:last-child{margin-bottom:0}@media(max-width:900px),(pointer:coarse){.selector-color-square{width:40px;height:40px}.selector-random{width:44px;height:44px}.selector-hex-field{height:44px}.selector-hex-field input{font-size:16px}.selector-hex-caption{display:none}.selector-swatch-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.selector-swatch{height:44px}.selector-swatch>span{width:30px;height:30px}.selector-hue{height:44px;background-size:100% 12px}.selector-hue::-webkit-slider-thumb{width:24px;height:24px}.selector-hue::-moz-range-thumb{width:20px;height:20px}}@media(prefers-reduced-motion:reduce){.selector-swatch>span,.selector-random{transition:none}}.toolbar-popover.brush-colors-panel .panel-content{padding:0}.brush-colors-panel .panel-fields{padding:20px 22px}.brush-palette-picker{flex-shrink:0;min-width:0;padding:18px 22px 14px;border-bottom:1px solid #ffffff10;font-family:system-ui,sans-serif}.brush-palette-grid{display:flex;flex-direction:column;gap:7px;overflow-x:auto;overflow-y:hidden;padding:3px 3px 8px;margin:-3px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#ffffff25 transparent}.brush-palette-row{display:flex;gap:7px;width:max-content}.brush-palette-grid::-webkit-scrollbar{height:4px}.brush-palette-card{display:flex;align-items:center;gap:10px;width:max-content;padding:9px;border:1px solid #ffffff16;border-radius:9px;background:#ffffff04;color:#c6c1d2;font:11px/1.3 system-ui,sans-serif;text-align:left;white-space:nowrap;cursor:pointer;scroll-snap-align:start;transition:background .15s,border-color .15s}.brush-palette-card:hover{border-color:#ffffff36;background:#ffffff0b;color:#fff}.brush-palette-card[aria-pressed=true]{border-color:var(--toolbar-accent, #ffda57);background:#ffda570c;color:#fff1bd}.brush-palette-pie{display:block;flex-shrink:0;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff18,0 1px 4px #0002}.brush-palette-generate-icon{display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border:1px solid #ffffff20;border-radius:50%;background:#ffffff06;color:#d5c8a8}.brush-palette-generate-icon svg{width:16px;height:16px}.panel-footer-actions{display:flex;flex:1;gap:10px;width:100%}.brush-colors-panel .panel-footer.color-panel-footer{flex-direction:column;gap:16px}.color-panel-footer-opacity{min-width:0}@media(max-width:640px){.brush-colors-panel .panel-fields{padding:16px 18px}.brush-palette-picker{padding:16px 18px 12px}.brush-colors-panel .panel-footer.color-panel-footer{gap:10px}}@media(prefers-reduced-motion:reduce){.brush-palette-card{transition:none}}.slider-control{min-width:0;width:100%}.slider-control-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.slider-control-heading label{min-width:0;color:var(--toolbar-ink, #e7e5f3);font:13px/1.4 system-ui,sans-serif}.slider-control-heading output{flex-shrink:0;color:#d2d9e2;font:12px/1.4 JetBrains Mono,monospace;font-variant-numeric:tabular-nums;text-align:right}.slider-control input[type=range]{display:block;appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:24px;margin:5px 0 0;padding:0;border:0;background:transparent;cursor:pointer}.slider-control input[type=range]::-webkit-slider-runnable-track{height:4px;border:0;border-radius:2px;background:#ffffff1a}.slider-control input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:var(--toolbar-accent, #ffda57);box-shadow:none}.slider-control input[type=range]::-moz-range-track,.slider-control input[type=range]::-moz-range-progress{height:4px;border:0;border-radius:2px;background:#ffffff1a}.slider-control input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--toolbar-accent, #ffda57);box-shadow:none}@media(max-width:900px),(pointer:coarse){.slider-control input[type=range]{height:44px}.slider-control input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}.slider-control input[type=range]::-moz-range-thumb{width:24px;height:24px}}.footer-btn.randomize-btn{position:relative;isolation:isolate;border:1px solid rgba(255,255,255,.1);background:transparent;color:#ffffffb3;transition:border-color .25s,color .25s;-webkit-tap-highlight-color:transparent}.randomize-btn .randomize-surface{position:absolute;z-index:-1;inset:0;overflow:hidden;border-radius:7px;background:#ffffff0d;pointer-events:none;transition:background .22s}.randomize-surface:before{content:"";position:absolute;inset:-70% -45%;background:radial-gradient(ellipse at 35% 65%,#ffdf65 0%,transparent 55%),radial-gradient(ellipse at 80% 30%,#ffeeb2 0%,transparent 45%);filter:blur(15px);opacity:0;transition:opacity .35s}.randomize-content{display:inline-flex;align-items:center;justify-content:center;gap:6px;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1)}.randomize-content .dice-icon{flex-shrink:0}.randomize-btn:disabled{opacity:.4;cursor:default}.footer-btn.randomize-btn:is(:hover,:focus-visible):not(:disabled){border-color:#ffda57;background:transparent;color:#fff0b3}.randomize-btn:is(:hover,:focus-visible):not(:disabled) .randomize-surface{background:#ffda570c}.randomize-btn:is(:hover,:focus-visible):not(:disabled) .randomize-surface:before{opacity:.2;animation:randomize-gold-flow 9s ease-in-out infinite alternate}.footer-btn.randomize-btn:focus-visible{outline:none}.randomize-btn:focus-visible .randomize-label{text-decoration:underline;text-underline-offset:3px}.randomize-btn:active:not(:disabled) .randomize-content{transform:translateY(1px) scale(.98)}@keyframes randomize-gold-flow{0%{transform:translate(-10%,8%) scale(1)}to{transform:translate(12%,-10%) scale(1.15)}}@media(prefers-reduced-motion:reduce){.footer-btn.randomize-btn,.randomize-btn *,.randomize-btn *:before{animation:none!important;transition:none!important;transform:none!important}}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.06)}.panel-title{display:flex;align-items:center;gap:10px;margin:0;font-family:JetBrains Mono,Fira Code,monospace;font-size:16px;font-weight:500;color:#fff}.panel-title .brush-icon{font-size:20px}.panel-title{min-width:0;flex:1}.panel-brush-selector{display:flex;align-items:center;gap:10px;max-width:100%;padding:8px 10px;margin-left:-10px;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.panel-brush-selector:hover{background:#ffffff08;border-color:#ffffff14}.panel-brush-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel-brush-selector svg{width:14px;height:14px;flex-shrink:0;color:#aaa3b9}.panel-content{flex:1;overflow-y:auto;padding:20px 24px;min-height:0}.property-item{margin-bottom:24px}.property-label{display:block;font-family:JetBrains Mono,Fira Code,monospace;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#ffffff80;margin-bottom:10px}.control-options{display:flex;flex-wrap:wrap;gap:8px}.option-btn{padding:10px 16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffffb3;font-family:JetBrains Mono,Fira Code,monospace;font-size:12px;cursor:pointer;transition:all .2s ease}.option-btn:hover{background:#ffffff1a;border-color:#fff3;color:#fff}.option-btn.active{background:linear-gradient(135deg,#00ffff26,#ff00ff26);border-color:#0ff6;color:#0ff;box-shadow:0 0 15px #0ff3,0 0 0 1px #00ffff1a inset}.control-select{width:100%;padding:10px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-family:JetBrains Mono,Fira Code,monospace;font-size:13px;cursor:pointer;transition:all .2s ease}.control-select:hover{border-color:#fff3}.control-select:focus{outline:none;border-color:#00ffff80}.control-select option{background:#1a1a1f;color:#fff}.control-toggle{position:relative;display:inline-block;width:48px;height:26px}.control-toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#ffffff1a;border-radius:26px;transition:all .3s ease}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background:#ffffff80;border-radius:50%;transition:all .3s ease}.control-toggle input:checked+.toggle-slider{background:linear-gradient(135deg,#0ff6,#f0f6)}.control-toggle input:checked+.toggle-slider:before{transform:translate(22px);background:#fff;box-shadow:0 0 10px #0ffc}.control-text{width:100%}.control-text input[type=text]{width:100%;padding:12px 14px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-family:JetBrains Mono,Fira Code,monospace;font-size:14px;transition:all .2s ease;box-sizing:border-box}.control-text input[type=text]::placeholder{color:#ffffff4d}.control-text input[type=text]:hover{border-color:#fff3}.control-text input[type=text]:focus{outline:none;border-color:#00ffff80;background:#ffffff14;box-shadow:0 0 15px #00ffff1a}.panel-footer{display:flex;gap:10px;padding:20px 24px;padding-bottom:max(20px,env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}:is(.panel-footer,.panel-footer-actions):has(>:is(.randomize-btn,.path-repeat)):has(>.reset-btn){display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffffb3;font-family:JetBrains Mono,Fira Code,monospace;font-size:11px;cursor:pointer;transition:all .2s ease}.footer-btn:hover{background:#ffffff14;border-color:#ffffff26;color:#fff}.footer-btn svg{width:14px;height:14px}@media(max-width:768px){.panel-header{padding:16px 20px;flex-shrink:0}.panel-content{padding:16px 20px;min-height:0}.panel-footer{padding:16px 20px;padding-bottom:max(16px,env(safe-area-inset-bottom));flex-shrink:0}.footer-btn{padding:14px 12px;font-size:12px}.option-btn{padding:8px 12px;font-size:11px}}@media(max-width:900px),(pointer:coarse){.panel-brush-selector{min-height:44px}.option-btn{min-height:44px;font-size:12px}.control-text input[type=text],.control-select{min-height:44px;font-size:16px}.control-toggle{box-sizing:content-box;border-block:10px solid transparent;background-clip:padding-box}}.brush-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:8px;padding:20px 22px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}.brush-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:8px 4px 12px;color:#aaa3b9;background:#ffffff04;border:1px solid #ffffff12;border-radius:10px;font:inherit;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.brush-card:hover{background:#ffffff08;border-color:#ffffff30;color:#eee7ff}.brush-card[aria-pressed=true]{color:var(--toolbar-accent);border-color:#ffda5755;background:#ffda570c}.brush-card-name{font-size:12px;line-height:1.4;overflow-wrap:anywhere}.brush-preview{position:relative;display:block;width:100%;aspect-ratio:16 / 9;pointer-events:none}.brush-preview-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}@media(max-width:640px){.brush-grid{padding:16px 18px}.brush-card{min-height:72px}}@media(prefers-reduced-motion:reduce){.brush-card{transition:none}}.toolbar-dock{--toolbar-accent: #ffda57;--toolbar-ink: #f0f3f7;--toolbar-surface: linear-gradient(160deg, #5d626d70, #21252c80 55%, #3d424c66);--toolbar-border: #e1e4ea1c;--toolbar-shadow: 0 14px 38px #00000030, inset 0 1px 0 #ffffff0e;--toolbar-line: #ffffff12;--toolbar-hover: #ffffff0d;--toolbar-active: #ffda5712;--toolbar-button-shadow: inset 0 1px 0 #ffffff30, 0 2px 8px #00000012;position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:max-content;max-width:calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));z-index:280;color:var(--toolbar-ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.bottom-toolbar{position:relative;padding:10px 12px;border:1px solid var(--toolbar-border);border-radius:24px;background:var(--toolbar-surface);box-shadow:var(--toolbar-shadow);backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%)}.toolbar-main{display:flex;align-items:center;gap:8px;transition:opacity .18s ease,transform .18s ease,visibility .18s}.has-path-session .toolbar-main{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none}.toolbar-path-session{position:absolute;inset:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:16px;animation:toolbar-session-enter .2s ease both}.toolbar-session-info{display:flex;align-items:center;gap:10px;min-width:0}.toolbar-session-icon{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;color:var(--toolbar-accent)}.toolbar-session-icon svg{width:25px;height:25px}.toolbar-session-copy{display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.4}.toolbar-session-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.bottom-toolbar .toolbar-session-button{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 14px;border:1px solid var(--toolbar-line);border-radius:14px;background:var(--toolbar-hover);color:var(--toolbar-ink);font-size:13px;transition:background .15s,opacity .15s}.toolbar-session-button svg{width:18px;height:18px}.bottom-toolbar .toolbar-session-button:hover:not(:disabled){background:var(--toolbar-active)}.toolbar-session-button:disabled{opacity:.3;cursor:default}.bottom-toolbar .toolbar-session-confirm{background:var(--toolbar-accent);color:#282336;border-color:transparent;box-shadow:var(--toolbar-button-shadow)}.bottom-toolbar .toolbar-session-confirm:hover:not(:disabled){background:var(--toolbar-accent);color:#282336;filter:brightness(1.12)}@keyframes toolbar-session-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.toolbar-selectors,.toolbar-group,.toolbar-actions,.toolbar-history{display:flex;align-items:center;gap:2px}.toolbar-selectors{gap:8px}.toolbar-actions{gap:4px}.toolbar-history{gap:2px}.toolbar-divider{display:block;width:1px;height:28px;background:var(--toolbar-line);flex-shrink:0}.bottom-toolbar button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.toolbar-button,.toolbar-selection{border:0;color:var(--toolbar-ink);background:transparent;border-radius:14px;text-shadow:0 1px 0 #ffffff1a;transition:background .15s,color .15s}.toolbar-button{position:relative;display:grid;place-items:center;width:48px;height:48px;flex-shrink:0}.toolbar-button svg{width:23px;height:23px}.toolbar-button:not(.toolbar-play)>svg{filter:drop-shadow(0 1px 1px #0c152866)}.toolbar-button:hover:not(:disabled),.toolbar-selection:hover{background:var(--toolbar-hover);color:#fff}.toolbar-button[aria-expanded=true],.toolbar-selection[aria-expanded=true],.toolbar-button[aria-expanded=true]:hover:not(:disabled){background:var(--toolbar-active);color:var(--toolbar-accent)}.toolbar-button:disabled{color:#ccd1dc;opacity:.4;cursor:default}.bottom-toolbar button:focus-visible{outline:2px solid var(--toolbar-accent);outline-offset:3px}.toolbar-button.toolbar-play{color:#282336;background:var(--toolbar-accent);box-shadow:var(--toolbar-button-shadow)}.toolbar-button.toolbar-play:hover:not(:disabled){background:var(--toolbar-accent);color:#282336;filter:brightness(1.12)}.toolbar-button.toolbar-play:disabled{color:#282336;opacity:.45}.toolbar-selection{padding:0}.toolbar-button.toolbar-brush{width:88px}.toolbar-brush-preview{width:calc(100% - 8px);height:calc(100% - 4px);min-width:0;object-fit:contain}.toolbar-color-preview{display:block;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff30,0 0 0 1px #00000020}.toolbar-path>.toolbar-path-preview{width:32px;height:32px}.toolbar-path-preview polyline{stroke:currentColor;stroke-width:1.5px;stroke-dasharray:4 2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.toolbar-path-preview .path-dot{fill:currentColor}.toolbar-tooltip{position:absolute;bottom:calc(100% + 18px);left:50%;transform:translate(-50%) translateY(3px);display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--toolbar-border);border-radius:12px;background:var(--toolbar-surface);color:var(--toolbar-ink);font-size:12px;line-height:1.4;text-shadow:none;white-space:nowrap;box-shadow:var(--toolbar-shadow);backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s}.toolbar-button:hover .toolbar-tooltip,.toolbar-button:focus-visible .toolbar-tooltip,.toolbar-session-button:hover .toolbar-tooltip,.toolbar-session-button:focus-visible .toolbar-tooltip{opacity:1;visibility:visible;transform:translate(-50%)}.toolbar-dock:has(.toolbar-popover.open) .toolbar-tooltip{display:none}.toolbar-dock kbd{font:10px JetBrains Mono,monospace;color:#aaa4bd}.toolbar-tooltip kbd{color:#d2d9e2}.toolbar-popover{position:absolute;bottom:calc(100% + 14px);left:clamp(calc(12px + env(safe-area-inset-left) - var(--popover-dock-left, 0px)),var(--popover-centered-left, 0px),calc(100vw - 12px - env(safe-area-inset-right) - var(--popover-dock-left, 0px) - var(--popover-measured-width, 350px)));display:flex;flex-direction:column;width:350px;max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:min(620px,calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));border:1px solid var(--toolbar-border);border-radius:22px;background:var(--toolbar-surface);backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%);box-shadow:var(--toolbar-shadow);overflow:hidden;visibility:hidden;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .16s,transform .16s,visibility 0s linear .16s}.toolbar-popover.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}.toolbar-popover:focus{outline:none}.toolbar-popover button:focus-visible,.toolbar-popover a:focus-visible,.toolbar-popover input:focus-visible,.toolbar-popover select:focus-visible{outline:2px solid var(--toolbar-accent);outline-offset:3px}.toolbar-popover .panel-header{flex-shrink:0;height:65px;min-height:65px;padding:12px 18px 12px 22px;border-bottom:1px solid var(--toolbar-line)}.toolbar-popover h2{font:600 11px/1.4 JetBrains Mono,monospace;text-transform:uppercase;letter-spacing:2px;color:#d2d9e2}.toolbar-popover .panel-content,.toolbar-popover .path-panel-content{padding:20px 22px;overscroll-behavior:contain}.toolbar-popover .panel-footer{padding:14px 22px}.toolbar-popover :is(.panel-footer,.path-selector-footer){border-color:var(--toolbar-line)}.toolbar-popover .path-selector-footer .path-settings+.panel-footer{padding-top:0}.toolbar-popover .property-label{font:13px system-ui,sans-serif;text-transform:none;letter-spacing:0;color:var(--toolbar-ink)}.toolbar-popover .option-btn.active{color:var(--toolbar-accent);background:#ffda5710;border-color:#ffda5760;box-shadow:none}.toolbar-popover .control-toggle input:checked+.toggle-slider{background:#ffda5780}.toolbar-popover .control-toggle input:checked+.toggle-slider:before{background:var(--toolbar-accent);box-shadow:none}.toolbar-popover .path-panel-content{font-family:system-ui,sans-serif}.toolbar-popover .path-preset:hover{background:#ffffff08;border-color:#ffffff30}.toolbar-popover .path-preset[aria-pressed=true]{color:var(--toolbar-accent);border-color:#ffda5755;background:#ffda570c}.toolbar-popover .path-preset span{font-size:12px}.toolbar-popover :is(.brush-card,.path-preset):not([aria-pressed=true]){color:#d2d9e2}.brush-picker-panel{width:370px}.properties-empty{font-size:13px;line-height:1.6;color:#d2d9e2}.path-picker-panel{width:370px}.help-panel{width:360px}.toolbar-popover.help-panel .panel-header{padding:10px 22px}.help-panel .help-brand{font-size:14px;font-weight:600;letter-spacing:3px;color:#d2d9e2}.help-panel .help-brand:hover{background-image:linear-gradient(90deg,#70ffff,#b798ff,#ff8fd8,#ffe58f,#70ffff);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 8px #ae8fff50);animation:help-brand-gradient 3s linear infinite}@keyframes help-brand-gradient{0%{background-position:0% 50%}to{background-position:200% 50%}}.help-arena-link{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:12px;background:transparent;color:#a69eb8;line-height:0;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}.help-arena-link:hover,.help-arena-link:focus-visible{background:#ffffff10;color:#fff}.help-arena-link svg{display:block;width:26px;height:16px;pointer-events:none}.help-content{padding:18px 22px 22px;overflow-y:auto;overscroll-behavior:contain}.help-section-title{margin:0 0 12px;font:500 10px/1.4 JetBrains Mono,monospace;text-transform:uppercase;letter-spacing:1px;color:#d2d9e2}.help-canvas-sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:24px}.help-canvas-size{display:grid;place-items:center;min-width:0;min-height:48px;padding:10px;border:1px solid #ffffff16;border-radius:10px;background:#ffffff04;color:#d9d4e4;cursor:pointer}.help-canvas-size svg{width:24px;height:24px;flex-shrink:0}.help-canvas-size:hover{background:#ffffff0c;border-color:#ffffff30}.help-canvas-size[aria-pressed=true]{color:var(--toolbar-accent);border-color:#ffda5755;background:#ffda570c}.help-shortcuts{margin:0}.help-shortcuts>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #ffffff08;font-size:12px;color:#d9d4e4}.help-shortcuts dd{display:flex;gap:5px}.toolbar-tooltip kbd,.help-shortcuts kbd{padding:3px 5px;background:#ffffff08;border:1px solid #ffffff0d;border-radius:4px}.drawer-close{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:#a69eb8;font:24px/1 system-ui,sans-serif!important;cursor:pointer}.drawer-close:hover{background:#ffffff0b;color:#fff}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.toolbar-dock{--toolbar-surface: linear-gradient(145deg, #465462d9, #27313ed9)}}@media(max-width:1000px){.bottom-toolbar{padding:8px;border-radius:20px}.toolbar-main{gap:6px}.toolbar-path-session{inset:8px}.toolbar-selectors{gap:6px}.toolbar-actions{gap:2px}}@media(max-width:640px){.toolbar-dock{bottom:calc(12px + env(safe-area-inset-bottom));width:min(480px,calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-width:none}.bottom-toolbar{padding:10px}.toolbar-main,.toolbar-path-session{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pinch-zoom;scrollbar-width:none;padding:5px;margin:-5px}.toolbar-main::-webkit-scrollbar,.toolbar-path-session::-webkit-scrollbar{display:none}.toolbar-main{gap:8px}.toolbar-path-session{inset:10px;gap:12px}.toolbar-session-info{flex-shrink:0;gap:4px}.toolbar-session-copy{font-size:13px;white-space:nowrap}.bottom-toolbar .toolbar-session-button{flex-shrink:0;min-height:44px;padding-inline:10px;gap:6px;border-radius:12px}.toolbar-selectors,.toolbar-actions,.toolbar-group,.toolbar-history{display:contents}.toolbar-button{width:44px;height:44px}.toolbar-button.toolbar-brush{width:80px}.toolbar-divider{display:none}.toolbar-popover{bottom:calc(100% + 10px);max-height:calc(100dvh - 130px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.toolbar-popover .panel-header{padding-inline:18px 12px}.toolbar-popover .drawer-close{width:44px;height:44px}.toolbar-popover .panel-content,.toolbar-popover .path-panel-content{padding:16px 18px}.toolbar-popover .panel-footer{padding:12px 18px}.toolbar-popover .footer-btn{min-height:44px}.toolbar-tooltip{display:none}}@media(prefers-reduced-motion:reduce){.help-panel .help-brand:hover{animation:none}.toolbar-popover,.toolbar-button,.toolbar-selection,.toolbar-tooltip,.toolbar-main,.toolbar-session-button,.help-arena-link{transition:none}.toolbar-path-session{animation:none}}.path-panel button:not(.footer-btn){font:inherit;cursor:pointer}.path-panel button:focus-visible{outline:2px solid #c0abff;outline-offset:3px}.path-panel-content{flex:1;padding:20px;overflow-y:auto;min-height:0}.path-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.path-preset-item{position:relative;min-width:0}.path-preset-item .path-preset{width:100%;height:100%}.path-preset{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 12px;color:#aaa3b9;background:#ffffff04;border:1px solid #ffffff12;border-radius:10px}.path-preset svg{width:54px;height:54px}.path-preset polyline{stroke:currentColor;stroke-width:1.6px;stroke-dasharray:4 2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.path-preset span{font-size:14px}.path-preset .path-dot{fill:currentColor}.path-selector-footer{flex-shrink:0;border-top:1px solid #ffffff10}.path-settings{display:flex;flex-direction:column;gap:12px;padding:14px 22px}.path-counts{display:flex;align-items:flex-end;gap:16px}.path-counts .slider-control{flex:1}.path-panel .path-preset:hover{border-color:#b9a4ff80;color:#eee7ff}.path-panel [aria-pressed=true]{color:#d5c7ff;background:#b9a4ff18;border-color:#b9a4ff80}.path-add{border-style:dashed;border-color:#ffffff30;background:transparent}.path-panel .path-shuffle{position:absolute;top:3px;right:3px;display:grid;place-items:center;width:26px;height:26px;padding:0;color:#d2d9e2;border:1px solid transparent;border-radius:6px;background:transparent}.path-panel .path-shuffle:hover{color:var(--toolbar-accent);border-color:#ffffff20;background:#ffffff0d}.path-panel .path-shuffle:focus-visible{outline-color:var(--toolbar-accent);outline-offset:1px}.path-shuffle .dice-icon{width:14px;height:14px;flex-shrink:0}.path-switch{position:relative;display:inline-block;width:26px;height:14px;flex-shrink:0;border-radius:20px;background:#ffffff16;transition:background .15s}.path-switch:before{content:"";position:absolute;width:10px;height:10px;top:2px;left:2px;border-radius:50%;background:#aaa3b9;transition:transform .15s}.path-repeat[aria-checked=true] .path-switch{background:var(--toolbar-accent)}.path-repeat[aria-checked=true] .path-switch:before{transform:translate(12px);background:#282336}.path-panel .path-repeat{gap:10px}.path-panel .path-repeat[aria-checked=true]{color:var(--toolbar-accent);border-color:#ffda5755;background:#ffda570c}.path-selector-footer .panel-footer{border-top:0}@media(max-width:600px){.path-panel-content{padding:16px}.path-preset{padding:4px 2px 8px}.path-preset svg{width:42px;height:42px}}@media(max-width:640px){.path-settings{padding:12px 18px;gap:8px}.path-counts{gap:12px}}@media(prefers-reduced-motion:reduce){.path-switch,.path-switch:before{transition:none}}@media(max-width:900px){.path-preset{min-height:72px}.path-preset span{font-size:12px}}.app{width:100%;height:100vh;height:100dvh;overflow:hidden;background:#0d0d0f}:root{--mobile-header-height: calc(76px + env(safe-area-inset-top)) }.path-session,.path-session.path-resize-session{top:64px;bottom:auto;max-width:calc(100% - 32px)}@media(max-width:800px){.path-session,.path-session.path-resize-session{top:calc(68px + env(safe-area-inset-top));bottom:auto}}