.studio{position:fixed;inset:0;display:grid;grid-template-rows:var(--header-height) 1fr auto;background:var(--canvas-soft);color:var(--ink);overflow:hidden}#panelsBtn,.drawer-scrim{display:none}@media (max-width: 980px){.drawer-scrim{display:block}}.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}.ic-sm{width:14px;height:14px}@media (max-width: 720px){.hide-sm{display:none}}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);padding:0 var(--s-sm);background:var(--canvas);border-bottom:1px solid var(--hairline);z-index:30}.tb-group{display:flex;align-items:center;gap:4px}.tb-brand{display:flex;align-items:center;padding:0 var(--s-xs)}.brand-mark{width:22px;height:22px;border-radius:var(--r-sm);background:var(--primary);position:relative;flex:none}.brand-mark:after{content:"";position:absolute;inset:5px;border-radius:3px;background:var(--mesh);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px}.project-name{border:1px solid transparent;background:transparent;font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--ink);padding:5px var(--s-xs);border-radius:var(--r-sm);width:180px;outline:none}.project-name:hover{background:var(--canvas-soft-2)}.project-name:focus{border-color:var(--hairline);background:var(--canvas)}.tb-sep{width:1px;height:20px;background:var(--hairline);margin:0 4px}.kbd{margin-left:4px}.menu-wrap{position:relative}.menu{position:absolute;top:calc(100% + 6px);right:0;width:260px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);box-shadow:var(--shadow-5);padding:6px;z-index:60}.menu button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;padding:8px 10px;border:none;background:transparent;border-radius:var(--r-sm);cursor:pointer;color:var(--ink);font-family:var(--font-sans)}.menu button b{font-size:14px;font-weight:500}.menu button span{font-size:12px;color:var(--mute)}.menu button:hover{background:var(--canvas-soft-2)}.workbench{display:grid;grid-template-columns:var(--toolbar-width) 1fr var(--panel-width);min-height:0;overflow:hidden}.toolbar{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--s-xs) 0;background:var(--canvas);border-right:1px solid var(--hairline);overflow-y:auto}.tool{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--body);cursor:pointer;transition:background .12s,color .12s,border-color .12s}.tool:hover{background:var(--canvas-soft-2);color:var(--ink)}.tool[data-active=true]{background:var(--primary);color:var(--on-primary)}.tool[data-key]:after{content:attr(data-key);position:absolute;bottom:2px;right:3px;font-family:var(--font-mono);font-size:8px;opacity:.5;pointer-events:none}.tool[data-active=true][data-key]:after{opacity:.7}.tool-sep{width:24px;height:1px;background:var(--hairline);margin:4px 0}.tool-spring{flex:1}.stage-wrap{display:flex;flex-direction:column;min-width:0;background:var(--stage-bg);position:relative}.stage{position:relative;flex:1;overflow:hidden;background:linear-gradient(var(--stage-grid) 1px,transparent 1px) 0 0 / 24px 24px,linear-gradient(90deg,var(--stage-grid) 1px,transparent 1px) 0 0 / 24px 24px,var(--stage-bg);background-position:center}.media-layer{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;pointer-events:none}.media-layer img,.media-layer video{display:block;image-rendering:auto;user-select:none;-webkit-user-drag:none}.media-layer iframe{display:block;border:none;background:#fff;pointer-events:none}.overlay{position:absolute;inset:0;z-index:2;touch-action:none}.stage[data-html-live=true] .media-layer{pointer-events:auto}.stage[data-html-live=true] .media-layer iframe{pointer-events:auto;touch-action:auto;-webkit-overflow-scrolling:touch}.stage[data-html-live=true] .overlay{pointer-events:none;touch-action:auto}.empty{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;overflow:hidden}.empty-mesh{position:absolute;width:600px;height:400px;background:var(--mesh);filter:blur(70px) saturate(140%);opacity:.28}.empty-card{position:relative;text-align:center;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:var(--s-3xl) var(--s-2xl);box-shadow:var(--shadow-5);max-width:360px}.empty-ic{width:36px;height:36px;color:var(--ink);margin-bottom:var(--s-sm)}.empty-card h2{margin-bottom:6px}.empty-card p{color:var(--body);margin-bottom:var(--s-md)}.empty-card .hint{color:var(--mute);margin-top:var(--s-sm)}.brush-hud{position:absolute;bottom:var(--s-md);left:50%;transform:translate(-50%);z-index:6;display:flex;align-items:center;gap:var(--s-xs);background:#171717e6;color:#fff;padding:5px 8px;border-radius:var(--r-full);font-size:13px;backdrop-filter:blur(6px);box-shadow:0 6px 20px #0006}.brush-readout{min-width:48px;text-align:center}.brush-readout b{font-variant-numeric:tabular-nums}.brush-step{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--r-full);background:#ffffff1f;color:#fff;cursor:pointer;transition:background .12s}.brush-step:hover{background:#ffffff3d}.brush-step:active{background:#ffffff52}.brush-step .ic{stroke-width:2.5}.html-lock{position:absolute;top:var(--s-md);left:50%;transform:translate(-50%);z-index:7;display:inline-flex;align-items:center;gap:var(--s-xs);height:34px;padding:0 var(--s-sm);border:1px solid transparent;border-radius:var(--r-full);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;backdrop-filter:blur(8px);box-shadow:0 4px 16px #00000040;transition:background .14s,color .14s,border-color .14s}.html-lock[data-locked=true]{background:#171717e6;color:#fff}.html-lock[data-locked=true]:hover{background:#171717}.html-lock[data-locked=false]{background:#0cce6b29;color:#0cce6b;border-color:#0cce6b80}.html-lock[data-locked=false]:hover{background:#0cce6b42}.html-lock .ic{stroke-width:2}.timeline{display:flex;align-items:center;gap:var(--s-xs);padding:var(--s-xs) var(--s-sm);background:var(--canvas);border-top:1px solid var(--hairline)}.timeline .time{color:var(--body);white-space:nowrap;font-size:12px}.track{position:relative;flex:1;height:28px;cursor:pointer;display:flex;align-items:center}.track:before{content:"";position:absolute;left:0;right:0;height:4px;background:var(--canvas-soft-2);border-radius:var(--r-full)}.track-fill{position:absolute;left:0;height:4px;width:0;background:var(--link);border-radius:var(--r-full)}.track-head{position:absolute;left:0;width:12px;height:12px;background:var(--canvas);border:2px solid var(--link);border-radius:50%;transform:translate(-50%);box-shadow:var(--shadow-2)}.track-marks{position:absolute;inset:0;pointer-events:none}.track-mark{position:absolute;top:50%;width:3px;height:14px;transform:translate(-50%,-50%);border-radius:2px}.rate{width:72px;flex:none}.statusbar{display:flex;align-items:center;justify-content:space-between;padding:5px var(--s-sm);background:var(--canvas);border-top:1px solid var(--hairline);font-size:12px;color:var(--mute)}.statusbar .mono{color:var(--body)}.status-right{display:flex;gap:6px}.sidebar{display:flex;flex-direction:column;background:var(--canvas);border-left:1px solid var(--hairline);overflow:hidden}.panel{border-bottom:1px solid var(--hairline);padding:var(--s-sm);display:flex;flex-direction:column;min-height:0}.panel--grow{flex:1;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-xs)}.panel-head-right{display:flex;align-items:center;gap:4px}#clearAnnsBtn:hover:not(:disabled){color:var(--error);background:var(--error-soft)}.mini{width:24px;height:24px}.panel-empty{color:var(--mute);padding:var(--s-sm) 0;line-height:18px}.label-list{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto}.label-row{display:flex;align-items:center;gap:var(--s-xs);padding:6px var(--s-xs);border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent}.label-row:hover{background:var(--canvas-soft-2)}.label-row[data-active=true]{background:var(--canvas-soft-2);border-color:var(--hairline)}.label-swatch{width:14px;height:14px;border-radius:var(--r-xs);flex:none;box-shadow:inset 0 0 0 1px #0000001f;cursor:pointer}.label-name{flex:1;font-size:14px;border:none;background:transparent;color:var(--ink);outline:none;padding:2px 0;min-width:0}.label-key{font-family:var(--font-mono);font-size:10px;color:var(--mute);background:var(--canvas-soft-2);border-radius:var(--r-xs);padding:2px 5px;min-width:16px;text-align:center}.label-del{opacity:0;border:none;background:transparent;cursor:pointer;color:var(--mute);display:flex;padding:2px}.label-row:hover .label-del{opacity:1}.label-del:hover{color:var(--error)}.label-add{display:flex;gap:4px;margin-top:6px}.layer-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1px}.layer-row{display:flex;align-items:center;gap:var(--s-xs);padding:6px var(--s-xs);border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent;font-size:13px}.layer-row:hover{background:var(--canvas-soft-2)}.layer-row[data-selected=true]{background:var(--link-bg-soft);border-color:#b6d6ff}.layer-dot{width:9px;height:9px;border-radius:2px;flex:none}.layer-type{color:var(--mute);font-size:11px;font-family:var(--font-mono)}.layer-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-actions{display:flex;gap:1px;opacity:0}.layer-row:hover .layer-actions,.layer-row[data-selected=true] .layer-actions{opacity:1}.layer-btn{border:none;background:transparent;cursor:pointer;color:var(--mute);display:flex;padding:3px;border-radius:var(--r-xs)}.layer-btn:hover{color:var(--ink);background:var(--canvas)}.layer-btn[data-on=true]{color:var(--ink)}.panel--props{max-height:42%;overflow-y:auto}.prop-field{margin-bottom:var(--s-sm)}.prop-label{display:block;font-size:11px;color:var(--mute);margin-bottom:4px;font-family:var(--font-mono);text-transform:uppercase}.prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.attr-row{display:flex;gap:4px;margin-bottom:4px}.attr-row .input{font-size:12px;height:28px}.prop-note{width:100%;min-height:60px;resize:vertical;font-family:var(--font-sans)}.assetrail{display:flex;align-items:center;gap:var(--s-xs);padding:var(--s-xs) var(--s-sm);background:var(--canvas);border-top:1px solid var(--hairline);min-height:76px;overflow-x:auto}.rail-add{width:60px;height:60px;flex:none;border:1.5px dashed var(--hairline-strong);border-radius:var(--r-md);background:transparent;color:var(--mute);display:flex;align-items:center;justify-content:center;cursor:pointer}.rail-add:hover{border-color:var(--ink);color:var(--ink)}.rail-items{display:flex;gap:var(--s-xs)}.rail-item{position:relative;width:96px;height:60px;flex:none;border-radius:var(--r-md);overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--canvas-soft-2)}.rail-item[data-active=true]{border-color:var(--link)}.rail-thumb{width:100%;height:100%;object-fit:cover;display:block}.rail-thumb-wrap{position:absolute;inset:0;overflow:hidden}.rail-thumb--html{width:1280px;height:1024px;border:none;transform:scale(.075);transform-origin:top left;pointer-events:none;background:#fff}.rail-meta{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,#000000bf);color:#fff;font-size:10px;padding:10px 5px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rail-kind{position:absolute;top:3px;left:3px;font-family:var(--font-mono);font-size:8px;text-transform:uppercase;background:#0009;color:#fff;padding:1px 4px;border-radius:var(--r-xs)}.rail-del{position:absolute;top:3px;right:3px;opacity:0;width:18px;height:18px;border-radius:50%;background:#000000b3;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}.rail-item:hover .rail-del{opacity:1}.rail-item .rail-count{position:absolute;top:3px;right:3px;background:var(--link);color:#fff;font-size:9px;font-weight:600;padding:1px 5px;border-radius:var(--r-full)}.dropzone{position:fixed;inset:0;z-index:200;background:#0a0a0ab3;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}.dropzone-inner{border:2px dashed rgba(255,255,255,.4);border-radius:var(--r-xl);padding:var(--s-5xl) var(--s-6xl);color:#fff;text-align:center}.dropzone-inner .ic{width:48px;height:48px;margin-bottom:var(--s-md)}.palette-scrim{position:fixed;inset:0;z-index:300;background:#0a0a0a66;backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding-top:14vh}.palette{width:560px;max-width:92vw;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-5);overflow:hidden}.palette-input{width:100%;border:none;outline:none;padding:var(--s-md);font-size:16px;font-family:var(--font-sans);border-bottom:1px solid var(--hairline)}.palette-list{max-height:380px;overflow-y:auto;padding:6px}.palette-item{display:flex;align-items:center;gap:var(--s-sm);padding:9px var(--s-sm);border-radius:var(--r-sm);cursor:pointer;font-size:14px}.palette-item[data-active=true]{background:var(--canvas-soft-2)}.palette-item .pi-key{margin-left:auto}.palette-item .ic{width:16px;height:16px;color:var(--body)}.palette-cat{font-size:11px;color:var(--mute);padding:8px var(--s-sm) 4px;font-family:var(--font-mono);text-transform:uppercase}.sheet-scrim{position:fixed;inset:0;z-index:250;background:#0a0a0a66;backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}.sheet{width:520px;max-width:92vw;max-height:84vh;background:var(--canvas);border-radius:var(--r-lg);box-shadow:var(--shadow-5);display:flex;flex-direction:column;overflow:hidden}.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s-md) var(--s-lg);border-bottom:1px solid var(--hairline)}.sheet-body{padding:var(--s-lg);overflow-y:auto}.sheet-foot{display:flex;align-items:center;justify-content:space-between;padding:var(--s-md) var(--s-lg);border-top:1px solid var(--hairline);gap:var(--s-md)}.set-row{display:flex;align-items:center;justify-content:space-between;padding:var(--s-sm) 0;border-bottom:1px solid var(--hairline);gap:var(--s-md)}.set-row:last-child{border-bottom:none}.set-label{font-size:14px}.set-label small{display:block;color:var(--mute);font-size:12px}.toggle{position:relative;width:38px;height:22px;flex:none;background:var(--hairline-strong);border-radius:var(--r-full);cursor:pointer;transition:background .15s;border:none}.toggle[data-on=true]{background:var(--link)}.toggle:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:var(--shadow-2)}.toggle[data-on=true]:after{transform:translate(16px)}.shortcuts-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px var(--s-xl)}.sc-item{display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-size:13px;color:var(--body);border-bottom:1px solid var(--hairline)}.range{width:120px}.toasts{position:fixed;bottom:var(--s-lg);left:50%;transform:translate(-50%);z-index:400;display:flex;flex-direction:column;gap:var(--s-xs);align-items:center}.toast{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);padding:10px var(--s-md);box-shadow:var(--shadow-4);font-size:14px;color:var(--ink);display:flex;align-items:center;gap:var(--s-xs);animation:toast-in .18s ease}.toast[data-kind=error]{border-color:var(--error-soft);color:var(--error-deep)}.toast[data-kind=success]{border-color:#b6e6c8}.toast .ic{width:16px;height:16px}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.muted{color:var(--mute)}@media (max-width: 980px){.workbench{grid-template-columns:var(--toolbar-width) 1fr}.sidebar{position:fixed;top:var(--header-height);right:0;bottom:0;width:min(340px,86vw);z-index:120;transform:translate(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-5);border-left:1px solid var(--hairline)}.studio[data-drawer=open] .sidebar{transform:translate(0)}.drawer-scrim{position:fixed;inset:0;z-index:110;background:#0006;opacity:0;pointer-events:none;transition:opacity .24s ease}.studio[data-drawer=open] .drawer-scrim{opacity:1;pointer-events:auto}#panelsBtn{display:inline-flex}}@media (max-width: 600px){:root{--header-height: 52px;--toolbar-width: 52px}.project-name{width:110px}.tb-sep,#zoomOut,#zoomIn{display:none}.topbar{gap:var(--s-xs);padding:0 var(--s-xs)}.assetrail{min-height:64px;padding:var(--s-xxs) var(--s-xs)}.rail-item{width:76px;height:48px}.rail-add{width:48px;height:48px}.sidebar{width:100vw}.empty-card{padding:var(--s-2xl) var(--s-lg);max-width:88vw}}@media (pointer: coarse){.tool{width:46px;height:46px}.btn{height:38px}.btn--icon{width:38px}.toggle{width:46px;height:28px}.toggle:after{width:24px;height:24px}.toggle[data-on=true]:after{transform:translate(18px)}.layer-btn,.label-del{padding:8px}.layer-actions,.label-row .label-del,.rail-del{opacity:1}.track{height:36px}.track-head{width:16px;height:16px}}.studio[data-present=true]{grid-template-rows:1fr}.studio[data-present=true] .topbar,.studio[data-present=true] .toolbar,.studio[data-present=true] .sidebar,.studio[data-present=true] .assetrail,.studio[data-present=true] .statusbar,.studio[data-present=true] .timeline{display:none!important}.studio[data-present=true] .workbench{grid-template-columns:1fr}.studio[data-present=true] .stage{background:var(--stage-bg)}.present-bar{position:fixed;bottom:var(--s-lg);left:50%;transform:translate(-50%);z-index:500;display:flex;align-items:center;gap:4px;padding:6px;background:#141414d1;backdrop-filter:saturate(160%) blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-full);box-shadow:0 8px 28px #00000080;opacity:.35;transition:opacity .25s ease}.present-bar:hover{opacity:1}.pbtn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#e0e0e0;border-radius:var(--r-full);cursor:pointer;transition:background .12s,color .12s}.pbtn:hover{background:#ffffff1f;color:#fff}.pbtn[data-active=true]{background:#fff;color:#171717}.pbtn--wide{width:auto;min-width:52px;padding:0 var(--s-xs);font-size:12px;color:silver}.pbtn--wide:hover{color:#fff}.pbtn--exit:hover{background:var(--error);color:#fff}.pbar-sep{width:1px;height:22px;background:#ffffff2e;margin:0 4px}.pbar-counter{color:silver;font-size:12px;padding:0 var(--s-xs);min-width:52px;text-align:center}.studio[data-present=true] .stage{cursor:default}