@font-face{font-family:__GeistSans_245d8d;src:url(/_next/static/media/27834908180db20f-s.p.woff2) format("woff2");font-display:swap;font-weight:100 900}@font-face{font-family:__GeistSans_Fallback_245d8d;src:local("Arial");ascent-override:94.56%;descent-override:27.76%;line-gap-override:0.00%;size-adjust:106.28%}.__className_245d8d{font-family:__GeistSans_245d8d,__GeistSans_Fallback_245d8d}.__variable_245d8d{--font-geist-sans:"__GeistSans_245d8d","__GeistSans_Fallback_245d8d"}@font-face{font-family:__GeistMono_97c177;src:url(/_next/static/media/78fec81b34c4a365.p.woff2) format("woff2");font-display:swap;font-weight:100 900}.__className_97c177{font-family:__GeistMono_97c177,ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Monaco,Liberation Mono,DejaVu Sans Mono,Courier New,monospace}.__variable_97c177{--font-geist-mono:"__GeistMono_97c177",ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Monaco,Liberation Mono,DejaVu Sans Mono,Courier New,monospace}:root,[data-theme=dark]{color-scheme:dark;--bg:#0a0a0a;--surface:#0e0e0e;--surface-2:#131313;--surface-3:#181818;--line:#1c1c1c;--line-2:#262626;--text:#f5f5f5;--text-2:#9b9b9b;--text-3:#666;--accent:#f5f5f5;--accent-2:#e4e4e4;--accent-soft:#131313;--on-accent:#0a0a0a;--danger:#f87171;--ok:#4ade80;--checker-1:#141414;--checker-2:transparent;--bg-primary:var(--bg);--bg-card:var(--surface);--text-primary:var(--text)}[data-theme=light]{color-scheme:light;--bg:#fff;--surface:#fbfbfb;--surface-2:#f6f6f6;--surface-3:#efefef;--line:#ececec;--line-2:#dcdcdc;--text:#111;--text-2:#6a6a6a;--text-3:#a8a8a8;--accent:#111;--accent-2:#2a2a2a;--accent-soft:#f6f6f6;--on-accent:#fff;--danger:#dc2626;--ok:#16a34a;--checker-1:#f3f3f3;--checker-2:transparent;--bg-primary:var(--bg);--bg-card:var(--surface);--text-primary:var(--text)}:root{--font-sans:var(--font-geist-mono),ui-monospace,"SF Mono",Menlo,monospace;--font-mono:var(--font-geist-mono),ui-monospace,"SF Mono",Menlo,monospace;--radius:4px}*{box-sizing:border-box}#root,body,html{height:100%;margin:0}body{font:400 12px/1.45 var(--font-mono);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:0;transition:background .18s,color .18s}button,input,select,textarea{font-family:var(--font-mono);color:inherit}button{cursor:pointer}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}kbd{background:var(--surface-2);border:1px solid var(--line);border-radius:3px;padding:1px 5px;font:400 10.5px var(--font-mono);color:var(--text-2)}.mono{font-family:var(--font-mono)}.muted{color:var(--text-2)}.dim{color:var(--text-3)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}::view-transition-group(root){animation-duration:.6s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-old(root){animation:none;z-index:-1}[data-theme=dark]::view-transition-new(root){animation:wipe-up .6s cubic-bezier(.4,0,.2,1) forwards}[data-theme=light]::view-transition-new(root){animation:wipe-down .6s cubic-bezier(.4,0,.2,1) forwards}@keyframes wipe-up{0%{-webkit-clip-path:inset(100% 0 0 0);clip-path:inset(100% 0 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes wipe-down{0%{-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}.app{grid-template-rows:40px 1fr 24px;height:100vh}.app,.app main{display:grid;overflow:hidden}.app main{grid-template-columns:280px 1fr 360px}.app-header{background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 14px;gap:10px}.brand{gap:8px;font:500 12px var(--font-mono);color:var(--text)}.brand,.brand .mark{display:inline-flex;align-items:center}.brand .mark{width:20px;height:20px;background:var(--text);color:var(--bg);border-radius:var(--radius);justify-content:center}.brand .mark svg{display:block}.header-divider{width:1px;height:14px;background:var(--line)}.header-spacer{flex:1 1}.header-file{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line);border-radius:var(--radius);padding:4px 9px;color:var(--text-2);font:400 11px var(--font-mono);transition:all .12s}.header-file:hover{background:var(--surface);color:var(--text)}.header-file .pulse{width:6px;height:6px;border-radius:50%;background:var(--text-2)}.header-share{background:transparent;color:var(--text-2);border:1px solid var(--line);padding:4px 10px;border-radius:var(--radius);display:inline-flex;align-items:center;gap:6px;font:400 11px var(--font-mono);transition:all .12s}.header-share:hover{color:var(--text);background:var(--surface)}.theme-toggle{background:transparent;border:1px solid var(--line);color:var(--text-2);width:26px;height:26px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;transition:all .12s}.theme-toggle:hover{color:var(--text);background:var(--surface)}.header-upload{background:var(--text);color:var(--bg);border:none;font:500 11.5px var(--font-mono);padding:5px 12px;border-radius:var(--radius);display:inline-flex;align-items:center;gap:6px;transition:background .12s}.header-upload:hover{background:var(--text-2)}.preview-pane{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px 24px;background:var(--bg);overflow:auto}.preview-frame{padding:32px;border-radius:var(--radius);border:1px solid var(--line);background-color:var(--bg);background-image:linear-gradient(45deg,var(--checker-1) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-1) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-1) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-1) 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}.preview-frame.backdrop-light{background-image:none;background-color:#fdfcf5}.preview-frame.backdrop-dark{background-image:none;background-color:#0a0d11}.preview-frame svg{display:block}.timeline{width:100%;max-width:460px;display:grid;grid-template-columns:1fr auto;grid-gap:10px;gap:10px;align-items:center}.timeline .time{font:400 11px var(--font-mono);color:var(--text-2);white-space:nowrap}.transport{display:inline-flex;gap:4px}.transport button{background:transparent;color:var(--text);border:1px solid var(--line);padding:4px 10px;border-radius:var(--radius);font:400 11.5px var(--font-mono);display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:26px;transition:all .12s}.transport button:hover{background:var(--surface);border-color:var(--line-2)}.transport .play-btn{min-width:78px}.transport button svg{flex-shrink:0}.backdrop-pills{display:inline-flex;gap:2px;align-items:center;font-size:11px;color:var(--text-2);background:transparent;border:1px solid var(--line);border-radius:var(--radius);padding:2px}.backdrop-pills>span:first-child{padding:0 8px;color:var(--text-3);font-size:11px}.backdrop-pills button{background:transparent;color:var(--text-2);border:none;padding:3px 9px;border-radius:var(--radius);font:400 11px var(--font-mono);transition:all .12s}.backdrop-pills button:hover{color:var(--text)}.backdrop-pills button.active{background:var(--surface-3);color:var(--text)}.backdrop-pills input[type=color]{width:20px;height:20px;padding:0;border-radius:var(--radius);border:1px solid var(--line);background:transparent;margin-left:4px}.phase-bar{position:relative;width:100%;height:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:flex;overflow:hidden}.phase-bar .seg{height:100%;display:flex;align-items:center;justify-content:center;font:400 10px var(--font-mono);color:var(--text-3);transition:flex-basis .2s;border-right:1px solid var(--line)}.phase-bar .seg:last-child{border-right:none}.phase-bar .seg.trace{background:var(--surface-2);color:var(--text-2)}.phase-bar .seg.fill{background:var(--surface-3);color:var(--text)}.phase-bar .seg.hold{background:transparent}.phase-bar .playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--text);pointer-events:none;will-change:left}.left-sidebar{overflow-y:auto;border-right:1px solid var(--line)}.left-sidebar,.right-sidebar{background:var(--surface);min-height:0}.right-sidebar{border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}.rs-tabs{display:flex;align-items:stretch;border-bottom:1px solid var(--line);padding:0 10px;height:36px;flex-shrink:0;background:var(--surface)}.rs-tab{background:transparent;color:var(--text-3);border:none;padding:0 14px;font:500 11.5px var(--font-mono);letter-spacing:.02em;text-transform:lowercase;cursor:pointer;position:relative;transition:color .12s}.rs-tab:hover{color:var(--text-2)}.rs-tab.active{color:var(--text)}.rs-tab.active:after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:1.5px;background:var(--text)}.rs-tabs-trailing{margin-left:auto;display:flex;align-items:center}.rs-tabs-action{background:transparent;border:none;padding:5px;color:var(--text-3);border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s}.rs-tabs-action:hover{color:var(--text);background:var(--surface-2)}.rs-tab-body{flex:1 1;min-height:0;overflow-y:auto;padding:14px}.nsection{border-bottom:1px solid var(--line)}.nsection:last-child{border-bottom:none}.nsection-toggle{width:100%;background:transparent;border:none;display:flex;align-items:center;gap:8px;height:32px;padding:0 14px;color:var(--text-3);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-align:left;transition:color .12s}.nsection-toggle:hover,.nsection.open .nsection-toggle{color:var(--text-2)}.nsection-title{display:inline-block}.nsection-spacer{flex:1 1}.nsection-toggle .chev{color:var(--text-3);transition:transform .15s;flex-shrink:0}.nsection-toggle .chev.open{transform:rotate(180deg)}.nsection-trailing{display:inline-flex;align-items:center;gap:6px;color:var(--text-3);font:400 10px var(--font-mono);text-transform:lowercase;letter-spacing:0}.nsection-meta{background:var(--surface-2);border:1px solid var(--line);padding:1px 7px;border-radius:var(--radius)}.nsection-body{padding:4px 14px 16px}.block-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}.block-title{font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}.block-meta{font:400 10.5px var(--font-mono);color:var(--text-3)}.tab-content{padding:0}.tab-block{display:block}.tab-divider{display:none}.row-stack>*+*{margin-top:6px}.block-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:8px}.block-card:last-child{margin-bottom:0}.block-card>.block-head:first-child{margin-bottom:10px}.block-card>.block-head:first-child .block-title{color:var(--text-2)}.block-card .block-card{background:var(--surface);border-color:var(--line)}.row{display:grid;grid-template-columns:124px 1fr;grid-gap:10px;gap:10px;align-items:center;margin-bottom:6px;min-height:24px}.row.row-range{grid-template-columns:124px 1fr 52px}.row>label{color:var(--text-2);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row>input[type=number]{font:400 11px var(--font-mono);color:var(--text);text-align:right}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);border-radius:var(--radius);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:var(--text);border-radius:50%;border:none;cursor:pointer;-webkit-transition:transform .12s;transition:transform .12s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}input[type=number],input[type=text]{background:var(--bg);border:1px solid var(--line);color:var(--text);padding:4px 7px;border-radius:var(--radius);font:400 11px var(--font-mono);width:100%;outline:none;transition:border-color .12s}input[type=number]:focus,input[type=text]:focus,textarea:focus{border-color:var(--text-3)}.select-trigger{background:var(--bg);border:1px solid var(--line);color:var(--text);padding:4px 9px;border-radius:var(--radius);font:400 11px var(--font-mono);width:100%;height:24px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;transition:border-color .12s,background .12s;outline:none}.select-trigger:hover{border-color:var(--line-2)}.select-trigger.open,.select-trigger:focus{border-color:var(--text-3)}.select-value{flex:1 1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-chev{color:var(--text-3);transition:transform .15s;flex-shrink:0}.select-chev.open{transform:rotate(180deg)}.select-popover{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:3px;display:flex;flex-direction:column;max-height:240px;overflow-y:auto}.select-option{background:transparent;color:var(--text);border:none;padding:5px 8px;border-radius:var(--radius);font:400 11px var(--font-mono);text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;white-space:nowrap}.select-option.hover,.select-option:hover{background:var(--surface-2)}.select-option.active{background:var(--surface-3);color:var(--text)}.select-option svg{color:var(--text-2);flex-shrink:0}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);width:100%;height:24px;padding:0;border-radius:var(--radius);background:transparent}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border-radius:3px;border:none}input[type=checkbox]{accent-color:var(--text);width:13px;height:13px}.pill-group{display:flex;gap:1px;background:var(--surface-2);border-radius:var(--radius);padding:2px;border:1px solid var(--line)}.pill-group button{flex:1 1;background:transparent;color:var(--text-3);border:none;padding:3px 6px;border-radius:var(--radius);font:400 10.5px var(--font-mono);text-transform:lowercase;transition:all .1s}.pill-group button:hover{color:var(--text-2)}.pill-group button.active{background:var(--surface-3);color:var(--text)}.seg-ctrl{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.seg-ctrl button{flex:1 1;background:transparent;border:none;border-right:1px solid var(--line);color:var(--text-2);font:400 11px var(--font-mono);padding:5px 0;transition:background .12s,color .12s}.seg-ctrl button:last-child{border-right:none}.seg-ctrl button:hover{background:var(--surface-2);color:var(--text)}.seg-ctrl button.active{background:var(--surface-3);color:var(--text)}.preset-chips{display:flex;flex-wrap:wrap;gap:4px}.preset-chips button{background:var(--bg);border:1px solid var(--line);color:var(--text-2);padding:3px 9px;border-radius:var(--radius);font:400 11px var(--font-mono);transition:all .12s}.preset-chips button:hover{border-color:var(--line-2);color:var(--text)}.style-picker{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:4px;gap:4px}.style-card{background:var(--bg);border:1px solid var(--line);padding:8px 4px 6px;border-radius:var(--radius);color:var(--text-3);display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;transition:all .12s}.style-card:hover{border-color:var(--line-2);color:var(--text-2)}.style-card.active{background:var(--surface-3);border-color:var(--text-3);color:var(--text)}.style-icon{display:inline-flex}.style-name{font:400 9.5px var(--font-mono);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.style-loop{position:absolute;top:3px;right:3px;font:400 8px var(--font-mono);background:transparent;color:var(--text-3);padding:0 3px;border:1px solid var(--line);border-radius:var(--radius);text-transform:lowercase}.style-card.active .style-loop{color:var(--text-2);border-color:var(--text-3)}.style-blurb{font:400 11px var(--font-mono);color:var(--text-3);margin-top:10px;line-height:1.5}.fill-toggle{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font:400 10px var(--font-mono);color:var(--text-3)}.fill-toggle input[type=checkbox]{accent-color:var(--accent);cursor:pointer}.fill-off-hint{font:400 10px var(--font-mono);color:var(--text-3);margin:4px 0 6px;font-style:italic}.easing-picker{margin-bottom:10px}.easing-picker:last-child{margin-bottom:0}.easing-label{font:400 11px var(--font-mono);color:var(--text-2);margin-bottom:4px}.easing-options{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:3px;gap:3px}.easing-chip{background:var(--bg);border:1px solid var(--line);padding:5px 3px 3px;border-radius:var(--radius);color:var(--text-3);display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .12s}.easing-chip:hover{color:var(--text-2);border-color:var(--line-2)}.easing-chip.active{background:var(--surface-3);border-color:var(--text-3);color:var(--text)}.easing-chip svg{display:block}.easing-name{font:400 8.5px var(--font-mono)}.bezier-editor{margin-top:8px;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;gap:8px}.bezier-svg{width:100%;height:auto;max-width:220px;align-self:center}.bezier-frame{fill:var(--surface-2);stroke:var(--line);rx:4}.bezier-baseline{stroke:var(--line-2);stroke-dasharray:2 3}.bezier-handle{stroke:var(--text-3);stroke-width:1}.bezier-curve{fill:none;stroke:var(--text);stroke-width:1.5;stroke-linecap:round}.bezier-cp{fill:var(--text);stroke:var(--bg);stroke-width:1.5;cursor:-webkit-grab;cursor:grab}.bezier-cp:active{cursor:-webkit-grabbing;cursor:grabbing}.bezier-anchor{fill:var(--text-3)}.bezier-fields{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:4px;gap:4px}.bezier-fields input{font-size:10.5px;padding:3px 5px;text-align:center}.bezier-presets{display:flex;flex-wrap:wrap;gap:3px}.bezier-presets button{background:transparent;color:var(--text-3);border:1px solid var(--line);padding:2px 7px;border-radius:var(--radius);font:400 9.5px var(--font-mono)}.bezier-presets button:hover{color:var(--text);border-color:var(--line-2)}.bezier-css{font:400 10px var(--font-mono);color:var(--text-3);text-align:center;background:var(--surface-2);padding:4px 8px;border-radius:var(--radius)}.color-field{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);padding:3px 10px 3px 3px;color:var(--text);width:100%;height:24px}.color-field,.color-swatch{border-radius:var(--radius)}.color-swatch{width:16px;height:16px;border:1px solid var(--line)}.color-hex{font:400 11px var(--font-mono);color:var(--text)}.upload-tabs{display:flex;gap:1px;background:var(--surface-2);border-radius:var(--radius);padding:2px;border:1px solid var(--line);margin-bottom:10px}.upload-tabs button{flex:1 1;background:transparent;color:var(--text-3);border:none;padding:4px 8px;border-radius:var(--radius);font:400 11px var(--font-mono);transition:all .12s}.upload-tabs button:hover{color:var(--text-2)}.upload-tabs button.active,.upload-zone{background:var(--bg);color:var(--text)}.upload-zone{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px dashed var(--line);border-radius:var(--radius);padding:18px 12px;text-align:center;transition:all .15s}.upload-zone.drag,.upload-zone:hover{border-color:var(--text-3);background:var(--surface)}.upload-zone .upload-icon{width:28px;height:28px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);display:grid;place-items:center}.upload-zone .upload-icon svg{color:var(--text-2)}.upload-zone .upload-title{font:400 11.5px var(--font-mono)}.upload-zone .upload-sub{font:400 10.5px var(--font-mono);color:var(--text-3)}.upload-zone .upload-current{margin-top:4px;padding:2px 8px;background:var(--surface);border-radius:var(--radius);font:400 10.5px var(--font-mono);color:var(--text-2)}.paste-area{display:flex;flex-direction:column;gap:6px}.paste-area textarea{background:var(--bg);border:1px solid var(--line);color:var(--text);padding:8px 10px;border-radius:var(--radius);font:400 11px var(--font-mono);resize:vertical;min-height:120px;width:100%;outline:none}.paste-area textarea:focus{border-color:var(--text-3)}.paste-area .paste-actions{display:flex;gap:6px}.paste-area .btn-primary,.paste-area .btn-secondary{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius);font:500 11px var(--font-mono);transition:all .12s}.paste-area .btn-primary{background:var(--text);color:var(--bg);border:none}.paste-area .btn-primary:hover{background:var(--text-2)}.paste-area .btn-secondary{background:transparent;color:var(--text-2);border:1px solid var(--line);font-weight:400}.paste-area .btn-secondary:hover{color:var(--text);border-color:var(--line-2)}.paste-area button svg{flex-shrink:0}.uploader .error{margin-top:8px;padding:6px 10px;border-radius:var(--radius);background:hsla(0,91%,71%,.08);color:var(--danger);border:1px solid hsla(0,91%,71%,.25);font-size:11px}.path-picker{margin-top:8px}.path-row{display:flex;align-items:center;gap:8px;padding:4px;border-radius:var(--radius);margin:2px 0;min-height:30px;transition:background .1s}.path-row:hover{background:var(--surface-2)}.path-eye{background:transparent;border:none;padding:0;width:20px;height:20px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;color:var(--text);flex-shrink:0;transition:background .12s,color .12s}.path-eye:hover{background:var(--surface-3)}.path-eye.hidden{color:var(--text-3)}.path-eye.hidden:hover{color:var(--text-2)}.path-color-dot{width:12px;height:12px;border-radius:50%;border:1px solid var(--text-3);flex-shrink:0}.path-name{flex:1 1;min-width:0;font:400 11.5px var(--font-mono);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.path-len{font:400 10.5px var(--font-mono)}.path-len,.path-trace-toggle{color:var(--text-3);flex-shrink:0}.path-trace-toggle{background:transparent;border:1px solid var(--line);width:22px;height:22px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;transition:all .12s}.path-trace-toggle:hover:not(:disabled){color:var(--text-2);border-color:var(--line-2)}.path-trace-toggle.active{background:var(--text);color:var(--bg);border-color:var(--text)}.path-trace-toggle:disabled{opacity:.4;cursor:not-allowed}.path-chevron{background:transparent;border:none;padding:0;width:22px;height:22px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);flex-shrink:0;transition:all .12s}.path-chevron:hover:not(:disabled){color:var(--text);background:var(--surface-3)}.path-chevron:disabled{opacity:.4;cursor:not-allowed}.path-chevron.has-override{color:var(--text)}.path-chevron svg{transition:transform .15s}.path-chevron.open svg{transform:rotate(180deg)}.path-item{border-radius:var(--radius)}.path-item.expanded{background:var(--surface-2);padding:6px 4px 4px}.path-item.expanded .path-row{background:transparent;margin:0 0 2px}.path-item.expanded .path-row:hover{background:transparent}.path-advanced{display:flex;flex-direction:column;gap:6px;padding:6px 10px 10px 36px}.path-advanced-row{display:grid;grid-template-columns:56px 1fr;grid-gap:10px;gap:10px;align-items:center}.path-advanced-row label{font:400 11px var(--font-mono);color:var(--text-2)}.path-advanced-input{position:relative;display:block}.path-advanced-input input{width:100%;padding-right:20px}.path-advanced-input .unit{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:400 10.5px var(--font-mono);color:var(--text-3);pointer-events:none}.path-advanced-field{display:flex;align-items:center;gap:4px}.path-advanced-field .color-field{flex:1 1;min-width:0}.path-advanced-clear{width:16px;height:16px;background:transparent;border:1px solid var(--line);border-radius:var(--radius);color:var(--text-3);display:inline-flex;align-items:center;justify-content:center;font:500 11px var(--font-mono);line-height:1;flex-shrink:0}.path-advanced-clear:hover{color:var(--danger);border-color:var(--line-2)}.path-clear-all{width:100%;margin-top:4px;background:transparent;border:1px solid var(--line);color:var(--text-3);padding:5px 10px;border-radius:var(--radius);font:400 10.5px var(--font-mono)}.path-clear-all:hover{color:var(--danger);border-color:var(--line-2)}.swatch-picker{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}.swatch-trigger{background:transparent;border:none;padding:0;width:16px;height:16px;display:inline-block;cursor:pointer;flex-shrink:0}.swatch-trigger .swatch-fill{display:block;width:100%;height:100%;border-radius:var(--radius);border:1px solid var(--text-3)}.swatch-trigger:hover .swatch-fill{border-color:var(--text-2)}.swatch-picker .swatch-clear{background:transparent;color:var(--text-3);border:1px solid var(--line);width:16px;height:16px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;font:600 11px var(--font-mono);line-height:1}.swatch-picker .swatch-clear:hover{color:var(--danger);border-color:var(--line-2)}.cp-popover{background:var(--bg);border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cp-popover,.cp-sv{border-radius:var(--radius)}.cp-sv{position:relative;width:100%;height:144px;cursor:crosshair;overflow:hidden}.cp-sv-handle{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none}.cp-strip-row{display:flex;align-items:center;gap:8px}.cp-eyedropper{background:transparent;border:1px solid var(--line);color:var(--text-2);width:24px;height:18px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.cp-eyedropper:hover{color:var(--text);border-color:var(--line-2)}.cp-hue{position:relative;flex:1 1;height:12px;border-radius:var(--radius);background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);cursor:ew-resize}.cp-hue-handle{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none}.cp-fields{display:grid;grid-template-columns:1.6fr .8fr .8fr .8fr;grid-gap:4px;gap:4px}.cp-field{display:flex;flex-direction:column;gap:2px}.cp-field span{font:400 9px var(--font-mono);color:var(--text-3);text-align:center;text-transform:uppercase;letter-spacing:.06em}.cp-field input{background:var(--surface);border:1px solid var(--line);color:var(--text);padding:4px;border-radius:var(--radius);font:400 10.5px var(--font-mono);text-align:center;width:100%;outline:none}.cp-field input:focus{border-color:var(--text-3)}.cp-field-hex input{text-align:left;padding:4px 7px}.cp-field span{order:2}.cp-field input{order:1}.cp-palette{display:flex;flex-direction:column;gap:6px;padding-top:4px;border-top:1px solid var(--line)}.cp-palette-title{font:500 9px var(--font-mono);color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}.cp-palette-grid{display:grid;grid-template-columns:repeat(8,1fr);grid-gap:3px;gap:3px}.cp-swatch{aspect-ratio:1/1;width:100%;border-radius:var(--radius);border:1px solid var(--line);padding:0;cursor:pointer;transition:transform .1s,border-color .1s}.cp-swatch:hover{transform:scale(1.1);border-color:var(--text-3)}.cp-swatch.selected{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--text)}.export-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:4px;gap:4px;margin-top:8px}.export-btn{background:var(--bg);border:1px solid var(--line);color:var(--text);padding:7px 10px;border-radius:var(--radius);font:400 11.5px var(--font-mono);display:flex;align-items:center;justify-content:space-between;min-height:30px;white-space:nowrap;transition:all .12s}.export-btn .btn-leading,.export-btn>span:first-child{overflow:hidden;text-overflow:ellipsis}.export-btn .btn-leading{display:inline-flex;align-items:center;gap:8px}.export-btn .btn-leading svg{flex-shrink:0}.export-btn:hover{background:var(--surface);border-color:var(--line-2)}.export-btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);grid-column:1/-1;width:100%;justify-content:center;padding:8px;font-weight:500}.export-btn.span-full{grid-column:1/-1}.export-btn.primary:hover{background:var(--text-2);border-color:var(--text-2)}.export-btn .ext{color:var(--text-3);font:400 10px var(--font-mono)}.export-btn.primary .ext{color:var(--bg);opacity:.6}.export-btn:disabled{opacity:.45;cursor:not-allowed}.status{margin-top:10px;padding:7px 10px;border-radius:var(--radius);font-size:11px;color:var(--text-3);min-height:28px;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;gap:10px;font-family:var(--font-mono)}.status.active{color:var(--text)}.status .progress{flex:1 1;height:2px;background:var(--surface-3);border-radius:var(--radius);overflow:hidden}.status .progress>div{height:100%;background:var(--text);transition:width .15s}.hint-small{color:var(--text-3);font-size:10.5px;margin-top:8px;line-height:1.5}.status-bar{display:flex;align-items:center;gap:8px;padding:0 14px;border-top:1px solid var(--line);background:var(--bg);font:400 11px var(--font-mono);color:var(--text-3);white-space:nowrap;overflow:hidden}.status-segment{display:inline-flex;align-items:center;gap:6px}.status-key{color:var(--text-3);text-transform:lowercase}.status-val{color:var(--text-2)}.status-sep{color:var(--text-3);opacity:.5}.status-spacer{flex:1 1}.status-kbd{gap:12px;color:var(--text-3)}.status-kbd,.status-kbd span{display:inline-flex;align-items:center}.status-kbd span{gap:4px}.status-kbd kbd{background:var(--surface);border:1px solid var(--line);font:400 10px var(--font-mono);padding:1px 4px;border-radius:var(--radius)}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}.modal{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);width:min(720px,100%);max-height:80vh;display:flex;flex-direction:column}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}.modal-title{font:500 12px var(--font-mono);letter-spacing:0;margin:0;text-transform:lowercase}.modal-close{background:transparent;border:none;color:var(--text-3);width:22px;height:22px;border-radius:var(--radius);display:grid;place-items:center}.modal-close:hover{background:var(--surface-2);color:var(--text)}.modal-tabs{display:flex;gap:2px;padding:8px 16px;border-bottom:1px solid var(--line);overflow-x:auto}.modal-tabs button{background:transparent;color:var(--text-3);border:1px solid transparent;padding:4px 9px;border-radius:var(--radius);font:400 11px var(--font-mono);white-space:nowrap;transition:all .12s}.modal-tabs button:hover{color:var(--text-2)}.modal-tabs button.active{background:var(--surface-2);color:var(--text);border-color:var(--line)}.modal-body{flex:1 1;overflow:auto;padding:12px 16px}.modal-code{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:11px 14px;font:400 11px var(--font-mono);color:var(--text);line-height:1.5;overflow:auto;max-height:50vh;white-space:pre}.modal-foot{display:flex;gap:6px;align-items:center;padding:10px 16px;border-top:1px solid var(--line)}.modal-foot .spacer{flex:1 1}.modal-foot .lang-hint{font:400 10.5px var(--font-mono);color:var(--text-3)}.modal-btn{background:var(--text);color:var(--bg);border:none;padding:5px 12px;border-radius:var(--radius);font:500 11px var(--font-mono);display:inline-flex;align-items:center;gap:6px;transition:background .12s}.modal-btn:hover{background:var(--text-2)}.modal-btn.secondary{background:transparent;color:var(--text-2);border:1px solid var(--line)}.modal-btn.secondary:hover{color:var(--text);border-color:var(--line-2)}.modal-btn svg{flex-shrink:0}.left-sidebar::-webkit-scrollbar,.modal-body::-webkit-scrollbar,.preview-pane::-webkit-scrollbar,.right-sidebar::-webkit-scrollbar{width:8px;height:8px}.left-sidebar::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb,.preview-pane::-webkit-scrollbar-thumb,.right-sidebar::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:var(--radius)}.header-menu-btn{display:none;background:transparent;border:1px solid var(--line);color:var(--text-2);width:32px;height:32px;border-radius:var(--radius);align-items:center;justify-content:center;transition:all .12s}.header-menu-btn:hover{color:var(--text);background:var(--surface)}.mobile-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;z-index:8900;transition:opacity .22s ease-out}.mobile-drawer-backdrop.open{opacity:1;pointer-events:auto}.mobile-drawer{position:fixed;left:0;right:0;bottom:0;height:82vh;max-height:82dvh;background:var(--surface);border-top:1px solid var(--line);border-radius:12px 12px 0 0;z-index:9000;transform:translateY(100%);transition:transform .26s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;overflow:hidden}.mobile-drawer.open{transform:translateY(0)}.mobile-drawer-handle-btn{background:transparent;border:none;padding:8px 0 4px;display:flex;justify-content:center;width:100%}.mobile-drawer-handle{width:40px;height:4px;background:var(--line-2);border-radius:2px}.mobile-drawer-tabs{display:flex;align-items:stretch;border-bottom:1px solid var(--line);padding:4px 10px;flex-shrink:0}.mobile-drawer-tab{flex:1 1;background:transparent;color:var(--text-3);border:none;padding:8px 0;font:500 12px var(--font-mono);letter-spacing:.02em;text-transform:lowercase;position:relative;transition:color .12s}.mobile-drawer-tab:hover{color:var(--text-2)}.mobile-drawer-tab.active{color:var(--text)}.mobile-drawer-tab.active:after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:2px;background:var(--text);border-radius:2px 2px 0 0}.mobile-drawer-body{flex:1 1;min-height:0;overflow-y:auto;padding:14px;-webkit-overflow-scrolling:touch}@media (max-width:1180px){.app main{grid-template-columns:240px 1fr 320px}}@media (max-width:820px){.app main{grid-template-columns:1fr}.left-sidebar,.right-sidebar{display:none}.preview-pane{border-right:none;padding:20px 16px;gap:14px}.preview-frame{padding:22px;border-radius:var(--radius)}.preview-frame svg{width:280px;height:280px;max-width:100%;max-height:100%}.app-header{padding:0 12px;gap:8px}.header-file,.header-share .header-share-label{display:none}.header-share{padding:4px 8px}.header-hint,.header-upload-label{display:none}.header-upload{padding:6px 10px}.header-menu-btn{display:inline-flex}.transport button{min-height:36px;padding:8px 14px;font-size:13px}.backdrop-pills button{padding:6px 12px;font-size:12px}input[type=range]{height:4px}input[type=range]::-webkit-slider-thumb{width:18px;height:18px}input[type=number],input[type=text],select,textarea{font-size:16px}.row>input[type=number]{font-size:14px}.status-bar{font-size:10.5px;padding:0 10px;gap:6px}.status-kbd{display:none}}@media (max-width:480px){.app-header{padding:0 10px;gap:6px}.brand-name{display:none}.preview-pane{padding:16px 12px;gap:12px}.preview-frame svg{width:240px;height:240px}.mobile-drawer{height:88vh;max-height:88dvh}}