:root{color-scheme:dark;--bg: #1e1e20;--panel: #262628;--panel-raised: #2e2e31;--line: #3a3a3e;--text: #e6e6e8;--muted: #9a9aa0;--faint: #6c6c72;--accent: #3d8bfd;--accent-soft: rgba(61, 139, 253, .22);--danger: #ff6b6b;--canvas: #161617;font:12px/1.35 -apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Inter,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden;overscroll-behavior:none}button,input,select{font:inherit;color:inherit}button{background:var(--panel-raised);border:1px solid var(--line);border-radius:6px;padding:4px 10px;cursor:pointer}button:hover:not(:disabled){border-color:#55555b}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.icon{background:none;border:none;padding:4px 6px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center}button.icon:hover:not(:disabled){background:var(--panel-raised)}button.icon.on{background:var(--accent-soft);color:#9cc3ff}input[type=number],input[type=text],select{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:3px 6px;min-width:0}input[type=range]{accent-color:var(--accent);min-width:0}input[type=color]{width:26px;height:22px;padding:0;border:1px solid var(--line);border-radius:4px;background:none}label{display:inline-flex;align-items:center;gap:6px}.muted{color:var(--muted)}.app{display:grid;grid-template-rows:36px 40px 1fr;grid-template-columns:44px 1fr var(--side, 280px);height:100%}.menubar{grid-column:1 / -1;display:flex;align-items:center;gap:2px;padding:0 8px;background:var(--panel);border-bottom:1px solid var(--line)}.menubar .title{margin:0 12px 0 6px;font-weight:600;display:flex;align-items:center;gap:8px}.menubar .title img{width:18px;height:18px}.menubar .doc{margin-left:auto;color:var(--muted);padding-right:8px}.menu{position:relative}.menu>button{background:none;border:none;padding:4px 9px}.menu>button:hover,.menu.open>button{background:var(--panel-raised)}.menu-list{position:absolute;top:100%;left:0;z-index:50;min-width:240px;background:#2b2b2e;border:1px solid var(--line);border-radius:8px;padding:5px;box-shadow:0 12px 32px #00000073}.menu-list button{display:flex;width:100%;justify-content:space-between;gap:24px;background:none;border:none;border-radius:5px;padding:5px 10px;text-align:left}.menu-list button:hover:not(:disabled){background:var(--accent);color:#fff}.menu-list button:hover:not(:disabled) kbd{color:#fff}.menu-list hr{border:none;border-top:1px solid var(--line);margin:4px 6px}.menu-list .sub{position:relative}.menu-list.context{position:fixed;z-index:150}.menu-list.submenu{top:-6px;left:100%;margin-left:2px}.menu-list.submenu.flip{left:auto;right:100%;margin:0 2px 0 0}kbd{font:inherit;color:var(--muted)}.toolheader{grid-row:2;grid-column:2 / -1;display:flex;align-items:center;gap:14px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line);white-space:nowrap;overflow-x:auto}.toolheader .name{font-weight:600;min-width:84px}.toolheader input[type=range]{width:110px}.toolheader input[type=number]{width:64px}.toolrail{grid-row:2 / -1;grid-column:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;background:var(--panel);border-right:1px solid var(--line)}.toolrail button.icon{width:32px;height:30px}.toolrail .swatches{position:relative;width:34px;height:34px;margin-top:10px}.toolrail .swatches input{position:absolute;width:22px;height:22px;border:2px solid var(--panel);border-radius:4px;cursor:pointer}.toolrail .swatches input.fg{left:0;top:0;z-index:1}.toolrail .swatches input.bg{right:0;bottom:0}.stage{position:absolute;inset:0;overflow:hidden;background:var(--canvas);outline:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.stage .status{position:absolute;left:10px;bottom:8px;color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:0 1px 2px #000}.stage .drop{position:absolute;inset:12px;border:2px dashed var(--accent);border-radius:12px;background:#3d8bfd14;pointer-events:none}.welcome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.welcome .card{width:420px;padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:14px;text-align:center}.welcome .card img{width:64px;height:64px}.welcome h1{font-size:20px;margin:10px 0 4px}.welcome .actions{display:flex;flex-direction:column;gap:8px;margin-top:20px}.welcome .actions button{padding:8px}.side{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--panel);border-left:1px solid var(--line)}.side h2{font-size:12px;margin:0;padding:12px 14px;display:flex;justify-content:space-between}.side section{border-bottom:1px solid var(--line)}.appearance{padding:10px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:8px 10px;align-items:center}.appearance select{grid-column:2 / -1}.layers{flex:1;overflow-y:auto;padding:4px 0;min-height:80px}.layer{display:flex;align-items:center;gap:6px;height:40px;padding-right:8px;border-top:2px solid transparent;border-bottom:2px solid transparent;cursor:default;user-select:none}.layer.active{background:var(--accent-soft)}.layer.selected:not(.active){background:#3d8bfd1a}.layer.drop-above{border-top-color:var(--accent)}.layer.drop-below{border-bottom-color:var(--accent)}.layer.drop-into{outline:2px solid var(--accent);outline-offset:-2px}.layer .eye{width:22px;color:var(--muted)}.layer .eye.off{opacity:.35}.layer .thumb{width:30px;height:30px;border-radius:3px;flex:none;object-fit:contain;background:repeating-conic-gradient(#3a3a3e 0 25%,#2a2a2d 0 50%) 0 0 / 8px 8px;border:2px solid transparent}.layer .thumb.target{border-color:#d0d0d4}.layer .thumb.mask{background:#000}.layer .thumb.disabled{opacity:.35}.layer .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer .name input{width:100%}.layer .clip{color:var(--muted);font-size:14px;width:12px}.layer .chevron{width:14px;color:var(--muted);cursor:pointer}.layer .badge{color:var(--muted);font-size:10px}.layer.hidden-by-parent .name{color:var(--faint)}.footer{display:flex;align-items:center;gap:2px;padding:6px 8px;border-top:1px solid var(--line)}.footer .spacer{flex:1}.inspector{padding:10px 14px 14px;display:flex;flex-direction:column;gap:8px;max-height:46%;overflow-y:auto}.inspector h3{margin:2px 0;font-size:12px}.row{display:grid;grid-template-columns:92px 1fr 52px;gap:8px;align-items:center}.row input[type=number]{width:52px}.curves-editor{width:100%;aspect-ratio:1;background:#1a1a1c;border:1px solid var(--line);border-radius:6px;touch-action:none}.modal-back{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:100}.modal{min-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 20px 60px #00000080;display:flex;flex-direction:column;gap:12px}.modal h2{margin:0;font-size:14px}.modal .buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.modal .grid{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%);background:#3b2324;border:1px solid #6b3b3d;color:#ffd7d7;padding:8px 14px;border-radius:8px;z-index:200;max-width:70vw}.toast.info{background:#22303f;border-color:#35506d;color:#d7e8ff}.tabbar{display:flex;gap:1px;height:30px;background:var(--bg);border-bottom:1px solid var(--line);overflow-x:auto;flex:none}.tab{display:flex;align-items:center;gap:6px;max-width:220px;padding:0 6px 0 12px;background:var(--panel);color:var(--muted);cursor:default;user-select:none;border-right:1px solid var(--line)}.tab.active{background:var(--canvas);color:var(--text)}.tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-dot{font-size:8px;color:var(--muted)}.tab-close{opacity:0;font-size:10px;padding:2px 4px}.tab:hover .tab-close,.tab.active .tab-close{opacity:1}.modal-back.filter-back{background:transparent;pointer-events:none;justify-content:flex-end;align-items:flex-start;padding:90px 300px 0 0}.modal.filter{pointer-events:auto;width:340px;max-height:calc(100vh - 120px);overflow-y:auto}.layer.effect-row{height:24px;color:var(--muted);font-size:11px}.layer.effect-row .eye.off+.name{opacity:.5}.scrub{cursor:ew-resize;user-select:none;touch-action:none}.tab.overflow{border:none;color:var(--muted);padding:0 12px;border-radius:0;flex:none}.tab.drop-target{background:var(--accent-soft);outline:2px solid var(--accent);outline-offset:-2px}.tab.new-slot{border:1px dashed var(--line);color:var(--muted);padding:0 14px}.tab{width:auto;min-width:0;flex:0 1 170px}.color-picker{position:fixed;z-index:160;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 20px 20px;box-shadow:0 20px 60px #00000080;user-select:none}.color-picker .picker-title{font-weight:600;margin-bottom:12px;cursor:move}.color-picker .sb{position:relative;width:256px;height:256px;border:1px solid rgba(0,0,0,.6);cursor:crosshair;touch-action:none}.color-picker .marker{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 .75px #000;pointer-events:none}.color-picker .hue{position:relative;width:20px;height:256px;margin:0 7px;background:linear-gradient(to bottom,red,#f0f,#00f,#0ff,#0f0,#ff0,red);cursor:ns-resize;touch-action:none}.color-picker .arrow{position:absolute;left:-7px;right:-7px;height:0;border-top:1px solid #fff;box-shadow:0 0 0 1px #000;pointer-events:none}.swatch{padding:0;border-radius:4px;border:1px solid #000;box-shadow:inset 0 0 0 1px #fffc}.toolrail .swatches .swatch{position:absolute;width:22px;height:22px;border-radius:5px;border:1px solid #000;box-shadow:inset 0 0 0 1.5px #fff;cursor:pointer;padding:0}.toolrail .swatches .swatch.fg{left:0;top:0;z-index:1}.toolrail .swatches .swatch.bg{right:0;bottom:0}.toolheader .divider{width:1px;align-self:stretch;margin:8px 0;background:var(--line)}.workspace{grid-row:3;grid-column:2;position:relative;min-width:0;min-height:0;display:flex;flex-direction:column}.panels{grid-row:3;grid-column:3;display:flex;flex-direction:column;min-height:0}.app.phone{display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}.phonebar{flex:none;display:flex;align-items:center;gap:2px;height:48px;padding:env(safe-area-inset-top) max(6px,env(safe-area-inset-right)) 0 max(6px,env(safe-area-inset-left));box-sizing:content-box;background:var(--panel);border-bottom:1px solid var(--line)}.phonebar button.icon{width:40px;height:40px;font-size:19px}.phonebar .doc{flex:1;min-width:0;text-align:center;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.app.phone .workspace{flex:1}.app.phone .toolheader{flex:none;height:48px;gap:10px;padding:0 10px;border-top:1px solid var(--line);border-bottom:none;scrollbar-width:none}.app.phone .toolheader .name,.app.phone .toolheader>.muted,.app.phone .toolheader .divider{display:none}.app.phone .toolheader input[type=range]{width:120px}.app.phone .toolheader input[type=number]{width:52px}.app.phone .toolrail{flex:none;flex-direction:row;height:56px;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));gap:2px;overflow-x:auto;overflow-y:hidden;border-right:none;border-top:1px solid var(--line);scrollbar-width:none}.app.phone .toolrail button.icon{flex:none;width:44px;height:44px}.app.phone .toolrail .swatches{flex:none;width:40px;height:40px;margin:0 4px 0 10px}.app.phone .toolrail .swatches .swatch{width:26px;height:26px}.app.phone .toolrail .swatches .menu-list{position:fixed!important;left:8px!important;top:auto!important;bottom:calc(110px + env(safe-area-inset-bottom))}.app.phone .welcome .card{width:calc(100vw - 32px);padding:22px}.app.phone .tabbar,.app.phone .stage .status{display:none}.sheet{position:fixed;left:0;right:0;bottom:0;height:55%;z-index:90;display:flex;flex-direction:column;background:var(--panel);border-top:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:0 -12px 40px #00000073;padding-bottom:env(safe-area-inset-bottom);transition:height .2s}.sheet.full{height:calc(100% - 56px - env(safe-area-inset-top))}.sheet-handle{flex:none;height:26px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}.sheet-handle span{width:40px;height:5px;border-radius:3px;background:#5a5a60}.sheet-body{flex:1;min-height:0;display:flex;flex-direction:column}.sheet .panels{flex:1;min-height:0}.sheet .side{border-left:none}.sheet .inspector{max-height:50%;border-top:1px solid var(--line)}.phone-menu{position:fixed;inset:0;z-index:140;display:flex;flex-direction:column;background:var(--bg);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.phone-menu header{flex:none;display:flex;align-items:center;justify-content:space-between;height:50px;padding:0 8px;border-bottom:1px solid var(--line);font-weight:600;font-size:15px}.phone-menu header button.icon{font-size:15px;color:var(--accent);min-width:64px;justify-content:flex-start}.phone-menu-list{flex:1;overflow-y:auto;padding:4px 0 24px}.phone-menu-list button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:0 18px;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.05);border-radius:0;font-size:15px;text-align:left}.phone-menu-list hr{border:none;height:10px;margin:0}@media(pointer:coarse){button{min-height:34px}button.icon{min-width:38px;min-height:38px}input[type=number],input[type=text],select{font-size:16px;min-height:34px}input[type=range]{height:30px}input[type=checkbox]{width:20px;height:20px}.layer{height:50px}.layer.effect-row{height:34px}.layer .eye{width:36px}.layer .thumb{width:36px;height:36px}.row{grid-template-columns:84px 1fr 60px;min-height:38px}.row input[type=number]{width:60px}.menu-list button{min-height:42px;align-items:center;font-size:14px}.footer{gap:6px}.tab{min-height:34px}}.app.phone .modal-back{align-items:flex-end;padding:0}.app.phone .modal{width:100%;min-width:0;max-height:85%;overflow-y:auto;border-radius:14px 14px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}.app.phone .modal-back.filter-back{padding:0;justify-content:stretch;align-items:flex-end}.app.phone .modal.filter{width:100%;max-height:48%}.app.phone .modal .grid{grid-template-columns:auto minmax(0,1fr)}.app.phone .modal .buttons button{flex:1;min-height:42px}.app.phone .color-picker{left:0!important;right:0;top:auto!important;bottom:0;border-radius:14px 14px 0 0;padding:12px 16px calc(16px + env(safe-area-inset-bottom));max-height:80%;overflow-y:auto}.app.phone .color-picker .picker-title{cursor:default}.app.phone .color-picker .picker-body{flex-wrap:wrap;justify-content:center}.app.phone .color-picker .sb{width:min(300px,calc(100vw - 96px));height:min(220px,calc(100vw - 150px))}.app.phone .color-picker .hue{height:min(220px,calc(100vw - 150px));width:28px;margin:0}.app.phone .color-picker .picker-controls{width:100%!important}.modifier-pad{position:absolute;left:max(8px,env(safe-area-inset-left));top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:8px}.modifier-pad button{min-width:46px;min-height:46px;padding:0 6px;border-radius:12px;background:#262628d9;border:1px solid var(--line);font-size:15px;backdrop-filter:blur(6px)}.modifier-pad button.once{border-color:var(--accent);color:#9cc3ff}.modifier-pad button.locked{background:var(--accent);border-color:var(--accent);color:#fff}.app:not(.phone){padding-top:env(safe-area-inset-top);grid-template-rows:36px 40px 1fr;box-sizing:border-box}.welcome .actions .muted{margin-top:6px}.touch-tooltip{position:fixed;z-index:300;transform:translate(-50%,calc(-100% - 10px));white-space:nowrap;padding:6px 10px;border-radius:8px;background:#f2f2f4;color:#1e1e20;font-size:13px;font-weight:500;text-align:center;pointer-events:none;box-shadow:0 6px 20px #0006}@media(pointer:coarse){button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}