:root{color-scheme:light;--blue:#2879ee;--blue-light:#eef5ff;--ink:#172b46;--muted:#728097;--bg:#f7f9fc;--card:#fff;--line:#e5ebf3;--surface:#f3f6fa;--shadow:0 14px 35px rgba(29,50,94,.05);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer;white-space:nowrap}button:disabled{opacity:.43;cursor:not-allowed}[tabindex]:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #83b7ff;outline-offset:2px}button{border-radius:10px;border:1px solid transparent;padding:11px 15px;background:0 0;color:inherit;font-weight:600;transition:background .16s,border .16s}button:hover:not(:disabled){background:var(--surface)}.primary{background:var(--blue);color:#fff;box-shadow:0 4px 10px rgba(40,121,238,.16)}.primary:hover:not(:disabled){background:#1664d1}.soft{border-color:var(--line);background:var(--card)}.small{padding:6px 10px;border-radius:8px;border-color:var(--line);background:var(--card);font-size:12px}.quiet{font-size:12px;font-weight:600;color:var(--muted)}.full{width:100%}.app{min-height:100vh}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 clamp(20px,4vw,65px);background:var(--card);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;white-space:nowrap;font-weight:800;letter-spacing:-.5px;font-size:17px}.brandmark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#2777ea;color:#fff;font-size:19px}.breadcrumb{color:#bec8d6;margin:0 3px}.brandtool{color:#50617a;font-size:13px;font-weight:600;letter-spacing:0}.topactions{display:flex;align-items:center;gap:10px}.localpill{padding:7px 10px;border:1px solid #cbeada;color:#248758;background:#f1faf6;border-radius:99px;font-size:11px;font-weight:700}.dot,.live-dot{display:inline-block;background:#27ba80;width:7px;height:7px;border-radius:50%;margin-right:5px}main{padding:28px clamp(16px,3vw,52px) 45px;max-width:1800px;margin:auto}.hero{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}.eyebrow{letter-spacing:2px;color:var(--blue);font-weight:850;font-size:10px;margin:0 0 9px}h1{font-size:clamp(27px,3vw,40px);letter-spacing:-1.6px;line-height:1.09;margin:0 0 12px;font-weight:780}h1 em{color:var(--blue);font-style:normal}.subtitle{margin:0;color:var(--muted);max-width:620px;font-size:13px;line-height:1.65}.heroactions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.studio{display:grid;grid-template-columns:224px minmax(0,1fr) 252px;gap:14px;align-items:start}.inspector,.sidebar,.workspace{border:1px solid var(--line);background:var(--card);border-radius:15px;box-shadow:var(--shadow);min-width:0}.inspector,.sidebar{padding:17px;min-height:650px}.panelhead{display:flex;justify-content:space-between;align-items:center;color:#718099;font-size:10px;letter-spacing:1.15px;font-weight:850;margin-bottom:15px}.mini{background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:10px;padding:3px 7px;letter-spacing:0;color:#7b8da8}.tools{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tool{height:71px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid var(--line);border-radius:11px;background:var(--card);font-size:11px;color:#53647d;gap:6px}.tool .glyph{font-size:25px;line-height:1;color:#4d6078;font-weight:400}.tool.active{color:var(--blue);border-color:#a8cafa;background:#edf5ff}.tool.active .glyph{color:var(--blue)}.hr{border-top:1px solid var(--line);margin:20px 0}.field{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;color:#455a75;margin:14px 0}.field input[type=color]{border:1px solid var(--line);width:44px;height:30px;padding:3px;border-radius:7px;background:var(--card);cursor:pointer}.field input[type=range]{width:100%;accent-color:var(--blue);cursor:pointer}.field .value{font-size:11px;color:var(--blue)}.field input:not([type=color]):not([type=range]),.field select,.field textarea{width:100%;border:1px solid var(--line);padding:10px;border-radius:9px;color:var(--ink);background:var(--card);min-width:0}.field textarea{resize:vertical}.templates{display:grid;gap:7px}.preset{text-align:left;font-size:11px;border:1px solid var(--line);padding:11px;background:var(--card);color:#526987}.workspace{overflow:hidden}.workspacebar{height:53px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;gap:12px;border-bottom:1px solid var(--line)}.seg{display:flex;align-items:center;gap:10px;font-size:12px}.dim{color:#9ba9b9;font-size:10px;font-weight:600}.stageactions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.canvaswrap{position:relative;padding:23px 20px;background:#f2f5f9;display:flex;align-items:center;justify-content:center;min-height:180px;overflow:hidden}.canvaswrap.grid{background-image:linear-gradient(#dbe3f0 1px,transparent 1px),linear-gradient(90deg,#dbe3f0 1px,transparent 1px);background-size:20px 20px}canvas#stage{display:block;width:100%;max-width:1080px;aspect-ratio:16/9;height:auto;border-radius:5px;background:#fff;box-shadow:0 9px 30px rgba(18,39,79,.15);touch-action:none;cursor:crosshair}#stage.select{cursor:move}.canvasHint{pointer-events:none;position:absolute;bottom:34px;left:50%;transform:translateX(-50%);padding:7px 13px;background:rgba(21,42,75,.78);border-radius:99px;color:#fff;font-size:11px;white-space:nowrap}.playbar{height:57px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;padding:0 17px}.play{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;padding:0;flex-shrink:0}.playbar input[type=range]{flex:1;min-width:20px;accent-color:var(--blue)}.time{font-size:11px;color:#698099;font-variant-numeric:tabular-nums}.playbar select{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:5px;font-size:11px;color:var(--ink)}.timelinehead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 17px 9px;font-size:13px}.timelinehead>div{display:flex;gap:6px;flex-wrap:wrap}.timeline{min-height:153px;max-height:226px;overflow-y:auto;padding:0 16px 14px;display:grid;align-content:start;gap:6px}.empty{padding:35px 15px;text-align:center;border:1px dashed var(--line);border-radius:9px;font-size:12px;color:#9cabc0}.layer{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:var(--card);min-width:0}.layer.selected{border-color:#a5c8fb;background:#f4f8ff}.layer .icon{width:27px;height:27px;border-radius:7px;background:#edf5ff;color:#2478ef;display:grid;place-items:center;flex-shrink:0}.layer .description{flex:1;min-width:0;cursor:pointer}.layer strong{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer small{color:#91a0b4;font-size:10px}.layer .track{height:5px;border-radius:10px;background:#eaf1fc;margin-top:5px;overflow:hidden}.layer .track div{height:100%;background:var(--blue);border-radius:10px}.layer button{font-size:11px;padding:5px;flex-shrink:0}.statusline{padding:10px 17px;border-top:1px solid var(--line);color:#8190a5;font-size:10px;min-height:32px}.inspectorcard{background:var(--surface);border-radius:13px;text-align:center;padding:24px 13px}.insicon{font-size:29px;color:var(--blue);margin-bottom:9px}.inspectorcard h3{font-size:14px;letter-spacing:-.3px;margin:0 0 9px}.ai-card p,.inspectorcard p,.tip p{font-size:11px;color:#7f91a7;line-height:1.65;margin:0}.inspectorcard .field{text-align:left}.inspectorcard .field input[type=number]{max-width:100%;width:100%}.inspectorcard .row{display:flex;gap:6px}.inspectorcard .row button{flex:1}.inspectorcard .field input[type=range]{width:100%}.ai-label{color:#5673b6;border-radius:6px;background:#eef2ff;padding:4px 6px;letter-spacing:0;font-size:9px}.ai-card{border:1px solid #dce6ff;background:linear-gradient(145deg,#f5f8ff,#fcfdff);padding:15px;border-radius:13px}.sparkle{color:#6a70ef;font-size:22px}.ai-card strong{display:block;font-size:12px;margin:8px 0}.ai-card button{margin-top:14px;font-size:11px}.tip{background:#f3f7fc;border-radius:10px;padding:12px}.tip strong{font-size:12px}.tip p{margin-top:6px}.beneath{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:29px 3px 0}.beneath div{padding:6px 12px;border-left:2px solid #dceafe}.beneath strong{font-size:12px}.beneath p{font-size:11px;color:var(--muted);line-height:1.7}footer{font-size:11px;color:#9caabd;text-align:center;padding:20px;border-top:1px solid var(--line)}.modalback{position:fixed;inset:0;z-index:40;background:rgba(19,31,52,.49);display:grid;place-items:center;padding:18px}.hidden{display:none!important}.modal{background:var(--card);color:var(--ink);width:min(100%,450px);border-radius:17px;box-shadow:0 40px 100px rgba(6,24,53,.2);padding:24px;max-height:min(91dvh,900px);overflow:auto}.modal.wide{width:min(100%,600px)}.modal h2{font-size:20px;letter-spacing:-.6px;margin:0 0 10px}.modal p{font-size:12px;line-height:1.7;color:var(--muted)}.modalTitle{display:flex;align-items:start;justify-content:space-between;gap:8px}.modalActions{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:20px}.exportchoices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:19px 0}.exportchoices button{border:1px solid var(--line);text-align:left;white-space:normal;min-height:76px}.exportchoices strong{font-size:12px;display:block}.exportchoices small{display:block;color:var(--muted);font-size:10px;margin-top:7px}.smallnote{font-size:11px!important;color:#758aa5!important;line-height:1.55}.suggestions{border-top:1px solid var(--line);margin-top:17px;padding-top:12px}.suggestions h3{font-size:14px}.suggestions label{display:flex;gap:9px;align-items:center;border:1px solid var(--line);padding:9px;margin:6px 0;border-radius:8px;font-size:12px}.suggestions button{margin-top:12px}.processing{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.spinner{border:4px solid #e3eefd;border-top-color:var(--blue);width:52px;height:52px;border-radius:50%;animation:spin .8s linear infinite;margin:5px 0 12px}.progress{height:8px;width:100%;background:#e9eff8;border-radius:10px;overflow:hidden;margin:13px 0 6px}.progress div{width:0%;height:100%;background:var(--blue);transition:width .2s}.processing>button{margin-top:17px}@keyframes spin{to{transform:rotate(360deg)}}[data-theme=dark]{color-scheme:dark;--ink:#e4edf9;--muted:#a2b0c5;--bg:#0c1422;--card:#152135;--line:#2c3e56;--surface:#1d2d44;--blue-light:#193b63;--shadow:none}[data-theme=dark] .canvaswrap{background:#1c2a3e}[data-theme=dark] .layer.selected,[data-theme=dark] .sidebar .tool.active{background:#1c385a}[data-theme=dark] .inspectorcard,[data-theme=dark] .tip{background:#22344a}[data-theme=dark] .ai-card{background:#1b2c49;border-color:#344869}[data-theme=dark] .ai-label{background:#263a60;color:#b8c8ff}[data-theme=dark] .localpill{background:#153d33;border-color:#2d6452;color:#b1f7d1}[data-theme=dark] .brandtool{color:#b0c0d7}[data-theme=dark] .tool{color:#a9bad1}[data-theme=dark] .tool .glyph{color:#b7cee6}[data-theme=dark] .ai-card p,[data-theme=dark] .inspectorcard p,[data-theme=dark] .tip p{color:#9baec9}[data-theme=dark] .field{color:#b4c6db}@media(max-width:1160px){.studio{grid-template-columns:200px minmax(0,1fr)}.inspector{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:0 25px}.inspector>.hr{display:none}.inspector>.panelhead{grid-column:auto}.inspector .inspectorcard{grid-row:span 5}.sidebar{min-height:650px}.ai-card{grid-column:2}.tip{grid-column:2}}@media(max-width:760px){.topbar{padding:0 14px}.brand{font-size:15px}.brandtool{font-size:11px}.localpill{display:none}main{padding:21px 12px}.hero{align-items:start;flex-direction:column;gap:18px}.heroactions{justify-content:flex-start}.studio{display:flex;flex-direction:column}.inspector,.sidebar,.workspace{width:100%;min-height:0}.sidebar{padding:13px}.tools{display:grid;grid-template-columns:repeat(4,1fr)}.tool{height:60px}.sidebar>.field,.sidebar>.hr,.sidebar>.panelhead:not(:first-child),.templates{display:none}.workspacebar{height:auto;min-height:52px;flex-wrap:wrap;padding:10px 12px}.stageactions{width:100%;justify-content:flex-start}.canvaswrap{padding:13px 9px}.playbar{padding:0 9px;gap:5px}.time{font-size:10px}.timelinehead{flex-wrap:wrap;padding:12px}.timeline{padding:0 10px 12px}.inspector{display:block}.inspector>.hr{display:block}.inspector .inspectorcard{grid-row:auto}.beneath{grid-template-columns:1fr;gap:10px}.topactions #helpBtn{display:none}}@media(max-width:375px){.brandtool{max-width:130px;overflow:hidden;text-overflow:ellipsis}.heroactions button{font-size:11px;padding:9px}.tools{grid-template-columns:repeat(4,1fr)}.tool{font-size:10px}.tool .glyph{font-size:20px}.stageactions button{font-size:10px;padding:5px}.canvasHint{font-size:9px}.exportchoices{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,::after,::before{scroll-behavior:auto!important;animation-duration:NaNs!important;transition-duration:NaNs!important}}@media(max-width:375px){.topbar{gap:4px}.brand{gap:5px;min-width:0}.brandtool{max-width:92px}.topactions{flex-shrink:0}.topactions .quiet{padding:7px 9px}}.projectname-label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--muted);font-weight:700}.projectname-label input{width:170px;max-width:100%;border:1px solid var(--line);padding:9px 11px;border-radius:9px;background:var(--card);color:var(--ink);font-size:12px}.projectname-label input:disabled{opacity:.6}@media(max-width:420px){.projectname-label{width:100%}.projectname-label input{width:100%}}