:root{--bg:#0b0b0d;--panel:#111114;--panel-2:#17171b;--line:#ffffff14;--text:#f2f2f5;--muted:#8b8b94;--soft:#c5c5cc;--accent:#f4f4f6;--blue:#6d8dff;--danger:#ff5d5d;--shadow:0 18px 50px #00000059;--sans:Inter, "SF Pro Display", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);font-family:var(--sans);margin:0;overflow:hidden}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.app{background:var(--bg);grid-template-rows:48px 1fr 236px;height:100%;display:grid}.topbar{border-bottom:1px solid var(--line);background:#0e0e11;justify-content:space-between;align-items:center;padding:0 12px 0 14px;display:flex}.top-left,.top-right,.top-mid{align-items:center;gap:8px;display:flex}.logo{letter-spacing:-.03em;align-items:center;gap:8px;margin-right:8px;font-weight:650;display:flex}.mark{border:1.5px solid #fff;border-radius:4px;width:16px;height:22px;position:relative}.mark:after{content:"";background:linear-gradient(#7aa0ff,#c07bff);border-radius:2px;position:absolute;inset:3px 2px}.ghost,.primary,.text-btn,.icon-btn{color:var(--soft);background:0 0;border:1px solid #0000;border-radius:8px;padding:6px 10px;font-size:13px}.ghost:hover,.text-btn:hover{color:#fff;background:#ffffff0d}.ghost em{color:var(--muted);margin-left:4px;font-style:normal}.primary{color:#111;background:#f3f3f5;font-weight:600}.primary:hover{background:#fff}.primary:disabled,.ghost:disabled{opacity:.5;cursor:default}.fill-wrap{position:relative}.fill-wrap>.ghost{align-items:center;gap:8px;display:flex}.fill-wrap>.ghost i{border:1px solid #fff3;border-radius:3px;width:12px;height:12px;display:block}.fill-pop,.menu-pop{overscroll-behavior:contain;border:1px solid var(--line);z-index:40;min-width:220px;max-height:420px;box-shadow:var(--shadow);background:#16161a;border-radius:10px;padding:6px;display:none;position:absolute;top:calc(100% + 6px);left:0;overflow-y:auto}.fill-wrap.open .fill-pop,.fill-wrap:hover .fill-pop,.menu:hover .menu-pop{gap:2px;display:grid}.fill-label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 8px 4px;font-size:10px;display:block}.fill-pop button,.menu-pop button{text-align:left;background:0 0;border:0;border-radius:7px;align-items:center;gap:8px;width:100%;padding:7px 8px;font-size:13px;display:flex}.fill-pop button:hover,.menu-pop button:hover{background:#ffffff0f}.swatch{border:1px solid #ffffff1f;border-radius:4px;width:16px;height:16px}.workspace{grid-template-columns:1fr 300px;min-height:0;display:grid}.viewport{background:radial-gradient(1000px 500px at 50% 30%,#50608c14,#0000 55%),#0b0b0d;min-width:0;position:relative;overflow:hidden}.viewport-stage{width:100%;height:100%;min-height:100%;position:relative;overflow:hidden}.viewport-border{pointer-events:none;z-index:2;position:absolute}.viewport canvas{width:100%;height:100%;display:block}.drop-hint,.export-veil{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.drop-hint{color:#fff;background:#0a0c1273;border:1px dashed #ffffff47;border-radius:16px;margin:16px;font-weight:600}.export-veil{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#08080a8c}.export-veil div{text-align:center;gap:6px;display:grid}.export-veil i{background:#fff;border-radius:99px;width:0;height:3px;display:block}.panel{border-left:1px solid var(--line);background:var(--panel);overflow:auto}.sec{border-bottom:1px solid var(--line)}.sec-h{letter-spacing:.01em;justify-content:space-between;align-items:center;padding:10px 14px 8px;font-size:12px;font-weight:600;display:flex}.sec-b{gap:8px;padding:0 14px 12px;display:grid}.dropzone{min-height:92px;color:var(--soft);background:#0d0d10;border:1px dashed #ffffff24;border-radius:12px;place-items:center;gap:4px;display:grid}.dropzone strong{font-size:13px}.dropzone span{color:var(--muted);text-align:center;padding:0 8px;font-size:12px}.shot-list{gap:4px;display:grid}.shot-row{text-align:left;width:100%;color:inherit;background:#141418;border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;padding:6px;display:flex}.shot-row.on{background:#1a1c24;border-color:#9db4ff66}.shot-thumb{background:#0d0d10 50%/cover no-repeat;border:1px solid #ffffff1a;border-radius:4px;flex:none;width:22px;height:38px}.shot-thumb.is-video{box-shadow:inset 0 0 0 1px #6eb0e473}.shot-row span{gap:1px;min-width:0;display:grid}.shot-row em{color:var(--muted);font-size:11px;font-style:normal}.shot-remove{width:20px;height:20px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:none;margin-left:auto;font-size:14px;line-height:1}.shot-remove:hover{color:#ff6b6b;background:#ff5a5a2e}.shot-actions{gap:6px;display:flex}.shot-actions .ghost{flex:1;font-size:12px}.device-line{align-items:center;gap:10px;display:flex}.device-thumb{background:linear-gradient(#2a2d36,#111216);border:1px solid #ffffff29;border-radius:8px;width:34px;height:54px}.device-thumb[data-kind=laptop]{border-radius:6px;width:54px;height:34px}.device-thumb[data-kind=tablet]{width:40px;height:54px}.device-line strong{font-size:13px;display:block}.device-line span,.hint,.device-count,.muted{color:var(--muted);font-size:12px}.swatches{gap:8px;display:flex}.swatches button{border:1px solid #ffffff2e;border-radius:99px;width:22px;height:22px;padding:0}.swatches button.on{outline-offset:2px;outline:2px solid #fff}.slider-row{gap:4px;display:grid}.slider-meta{color:var(--soft);justify-content:space-between;font-size:12px;display:flex}.slider-meta em{color:var(--muted);margin-left:6px;font-size:11px;font-style:normal}.slider-meta b{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:500}input[type=range]{appearance:none;background:0 0;height:16px}input[type=range]::-webkit-slider-runnable-track{background:#2a2a30;border-radius:99px;height:3px}input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;border-radius:99px;width:12px;height:12px;margin-top:-4.5px}.seg{border:1px solid var(--line);background:#0d0d10;border-radius:8px;flex-wrap:wrap;display:flex;overflow:hidden}.seg button{color:var(--muted);background:0 0;border:0;flex:1;padding:6px;font-size:11px}.seg button.on{color:#fff;background:#222228}.preset-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.preset-grid button,.device-grid button{border:1px solid var(--line);background:#19191e;border-radius:8px;padding:8px;font-size:12px}.preset-grid button:hover,.device-grid button:hover,.device-grid button.on{border-color:#ffffff47}.mesh-colors label{text-transform:uppercase;letter-spacing:.04em;color:#8b8d97;font-size:10px}.color-row{gap:10px;display:flex}.color-row label,.field{color:var(--muted);gap:4px;font-size:12px;display:grid}.field-label{color:var(--muted);margin:12px 0 6px;font-size:12px}.css-phone-stage{pointer-events:none;z-index:0;opacity:0;visibility:hidden;perspective:1400px;place-items:center;display:grid;position:absolute;inset:0}.css-phone-stage[data-visible=true]{opacity:1;visibility:visible;z-index:3}.css-phone,.css-laptop{transform-style:preserve-3d;background:linear-gradient(160deg, var(--band), var(--metal) 46%, var(--accent));border-radius:36px;position:relative;box-shadow:0 38px 70px #1c181447,0 12px 28px #1c181429,inset 0 0 0 1px #ffffff47,inset 0 -8px 18px #00000038}.css-laptop{border-radius:18px}.css-phone-bezel{background:#000;border-radius:30px;position:absolute;inset:7px;overflow:hidden}.css-laptop .css-phone-bezel{border-radius:12px;inset:14px 14px 28px}.css-phone-screen{border-radius:inherit;background:#000;position:absolute;inset:1px;overflow:hidden}.css-phone-screen img,.css-phone-screen video{object-fit:cover;object-position:center;background:#000;width:100%;height:100%;display:block}.css-island{background:#000;border-radius:20px;width:78px;height:22px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.css-punch{background:#050506;border-radius:50%;width:12px;height:12px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.css-btn{background:var(--accent);border-radius:2px;position:absolute;box-shadow:inset 0 0 0 1px #ffffff1f}.css-btn-silent{width:3px;height:22px;top:18%;left:-3px}.css-btn-vol{width:3px;height:52px;top:28%;left:-3px}.css-btn-power{width:3px;height:64px;top:32%;right:-3px}.frame-guide{pointer-events:none;z-index:2;position:absolute;inset:0}.frame-guide i{border:1px solid #ffffff29;position:absolute;box-shadow:0 0 0 999px #04050866}.frame-guide span{letter-spacing:.04em;text-transform:uppercase;color:#ffffff6b;font-size:10px;position:absolute}input[type=color]{background:0 0;border:0;width:100%;height:28px;padding:0}.check{align-items:center;gap:8px;font-size:12px;display:flex}.wide{width:100%}.mini{border:1px solid var(--line);background:#19191e;border-radius:6px;padding:3px 6px;font-size:11px}.text-btn{padding:2px 6px;font-size:12px}.device-count{padding:12px 14px 18px}.timeline{border-top:1px solid var(--line);background:#101013;grid-template-rows:44px 1fr;min-height:0;display:grid}.preset-drawer{border-bottom:1px solid var(--line);background:#121216;max-height:220px;padding:10px 12px 12px;overflow:auto}.preset-drawer-head{align-items:center;gap:10px;margin-bottom:10px;display:flex}.preset-drawer-head strong{letter-spacing:.04em;text-transform:uppercase;color:#c8c9d0;font-size:12px}.preset-cards{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;display:grid}.preset-card{text-align:left;border:1px solid var(--line);color:inherit;background:#19191e;border-radius:10px;padding:10px 11px}.preset-card b{margin-bottom:3px;font-size:13px;display:block}.preset-card span{color:#8b8d97;font-size:11px;line-height:1.35;display:block}.preset-card:hover,.preset-card.on{background:#1f1e22;border-color:#ead7a873}.tl-toolbar{border-bottom:1px solid var(--line);grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;display:grid}.tl-left,.tl-right,.tl-center{align-items:center;gap:8px;display:flex}.tl-right{justify-content:flex-end}.menu{position:relative}.rec i{background:#5a5a62;border-radius:99px;width:8px;height:8px;margin-right:6px;display:inline-block}.rec.on{color:#fff}.rec.on i{background:var(--danger);box-shadow:0 0 0 4px #ff5d5d26}.auto-pilot{color:#ead7a8;border-color:#ead7a838;align-items:center;gap:6px;display:inline-flex}.auto-hint-inline{color:#8b8d97;font-size:11px;font-style:normal;font-weight:400}.auto-pilot:hover{background:#ead7a814}.auto-hint{color:#8b8d97;margin-top:1px;font-size:11px;font-style:normal;font-weight:400;display:block}.menu-pop strong{font-weight:600}.play{border:1px solid var(--line);background:#1a1a1f;border-radius:99px;width:30px;height:30px}.tc{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:.04em;font-size:12px;font-weight:500}.tc em{color:var(--muted);font-style:normal;font-weight:400}.tl-fps{font-variant-numeric:tabular-nums;color:var(--muted);letter-spacing:.04em;font-size:11px}.tl-scroll{position:relative;overflow:auto}.tl-inner{align-items:stretch;min-height:100%;padding-bottom:8px;display:flex}.tl-labels{flex-direction:column;flex:none;display:flex}.tl-label-spacer{border-bottom:1px solid var(--line);height:26px}.tl-labels>span{height:30px;color:var(--muted);letter-spacing:.01em;align-items:center;padding-left:12px;font-size:11px;display:flex}.tl-lanes{flex:none;position:relative}.ruler{border-bottom:1px solid var(--line);cursor:ew-resize;height:26px;position:relative}.tick{pointer-events:none;width:1px;position:absolute;bottom:0;left:0}.tick-minor{background:#ffffff14;height:4px}.tick-mid{background:#ffffff2e;height:8px}.tick-label{color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap;padding-left:5px;font-size:10px;position:absolute;top:3px}.tick-label:before{content:"";background:#ffffff47;width:1px;height:12px;position:absolute;bottom:-15px;left:0}.lane{cursor:ew-resize;background:#141417;border-bottom:1px solid #ffffff0a;height:30px;position:relative}.clip{color:#d7def0;text-align:left;background:#2a3144;border:0;border-radius:0;align-items:center;gap:8px;height:18px;padding:0 8px;font-size:11px;display:flex;position:absolute;top:6px;overflow:hidden;box-shadow:inset -1px 0 #00000073}.clip b{font-weight:600}.clip em{font-variant-numeric:tabular-nums;color:#d7def09e;font-size:10px;font-style:normal}.clip.on{color:#fff;background:#3b4c73}.clip.has-media{color:#fff;text-shadow:0 1px 2px #000000a6;background-position:50%;background-size:cover}.clip.is-video:after{content:"VIDEO";letter-spacing:.08em;color:#d7ecff;background:#0c1c308c;border-radius:3px;margin-left:auto;padding:1px 4px;font-size:8px}.clip-handle{cursor:ew-resize;width:8px;height:100%;position:absolute;top:0;right:0}.key{background:#9db4ff;border:0;border-radius:1px;width:8px;height:8px;margin-left:-4px;padding:0;position:absolute;top:11px;transform:rotate(45deg);box-shadow:0 0 0 1px #080a108c}.key:hover,.key.on{z-index:2;background:#fff}.playhead{pointer-events:none;z-index:4;background:#f4f4f6;width:1px;margin-left:-.5px;position:absolute;top:0;bottom:0}.playhead:before{content:"";clip-path:polygon(0 0,100% 0,50% 100%);background:#f4f4f6;width:9px;height:8px;position:absolute;top:0;left:-4px}.overlay{z-index:40;background:#0000008c;place-items:center;display:grid;position:fixed;inset:0}.modal{border:1px solid var(--line);width:min(520px,100vw - 32px);box-shadow:var(--shadow);background:#141418;border-radius:16px;padding:20px}.modal h2{letter-spacing:-.03em;margin:0 0 8px;font-size:20px}.modal h3{color:var(--muted);margin:16px 0 8px;font-size:13px;font-weight:600}.modal p{color:var(--soft);margin:0 0 14px;font-size:14px;line-height:1.5}.plain{color:var(--soft);margin:0 0 16px;padding-left:18px;font-size:14px}.keys{gap:8px;margin:0 0 16px;display:grid}.keys div{justify-content:space-between;gap:16px;font-size:13px;display:flex}.keys dt{color:#fff;font-weight:600}.keys dd{color:var(--muted);margin:0}.device-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.device-grid button{text-align:left;gap:4px;display:grid}.device-grid span,.captures a{color:var(--muted);font-size:12px}.captures{gap:6px;display:grid}.field select{border:1px solid var(--line);background:#0f0f13;border-radius:8px;padding:8px}.row-end{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.progress{font-variant-numeric:tabular-nums;color:var(--muted)}.error{color:#ff8d8d!important}@media (width<=980px){.app{grid-template-rows:48px 1fr 180px}.workspace{grid-template-columns:1fr 260px}}