:root{color-scheme:dark;--bg:#080d18;--surface:#101827;--panel:#111a2c;--line:#253249;--ink:#eff4fd;--muted:#8694ac;--blue:#687dff;--cyan:#66c6ed;--font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #91a4ff;outline-offset:2px}.app{display:grid;grid-template-columns:248px minmax(480px,1fr) 288px;grid-template-rows:70px minmax(640px,1fr) minmax(210px,auto);min-height:100vh;max-width:1920px;margin:auto}.topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#11192a;border-bottom:1px solid var(--line);padding:0 24px}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}.brand-logo{width:38px;height:38px;background:#2c3e74;display:grid;place-items:center;border:1px solid #4d66b7;border-radius:11px;font-size:19px;font-weight:800}.brand-logo span{color:#77e2df}.brand strong,.brand small{display:block}.brand strong{font-size:15px;letter-spacing:-.3px}.brand small{color:var(--muted);font-size:11px}.top-center{font-size:12px;color:var(--muted);white-space:nowrap}.sep{padding:0 10px;color:#53627c}.live-dot,.tiny-circle{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ed0a3;margin-right:5px}.top-actions{display:flex;align-items:center;gap:8px}.btn{border:1px solid var(--line);background:#1b2941;color:var(--ink);padding:9px 12px;border-radius:9px;font-size:12px;font-weight:650;white-space:nowrap}.btn:hover{background:#263754}.btn.subtle{background:transparent;color:#acbad0}.btn.subtle:hover{background:#1d293e}.btn.secondary{background:#202f48}.btn.primary{background:#6677fa;color:white;border-color:#6677fa;padding:10px 15px;box-shadow:0 2px 15px #6177ed30}.btn.primary:hover{background:#7b8aff}.btn:disabled{opacity:.55;cursor:wait}.palette,.inspector{background:#0e1625;padding:25px 18px;border-right:1px solid var(--line)}.inspector{border-right:0;border-left:1px solid var(--line)}.section-label{font-size:10px;letter-spacing:1.4px;font-weight:800;color:#7d91b8}.palette h3,.object-heading h3{font-size:13px;margin:16px 0 10px;letter-spacing:-.2px}.palette .muted{color:#62718b;float:right;font-size:11px}.shape-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.shape-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:70px;background:#172237;color:#c2ccde;border:1px solid #27364f;border-radius:9px;font-size:11px}.shape-button:hover,.wide-item:hover{border-color:#6f85ee;background:#21304e}.shape-glyph{font-size:27px;line-height:1;color:#a1b2ff}.divider{height:1px;background:var(--line);margin:24px 0 17px}.stack-buttons{display:grid;gap:7px}.wide-item{background:#172237;border:1px solid #27364f;color:#d8e1ef;border-radius:9px;padding:10px;display:flex;align-items:center;gap:10px;text-align:left}.wide-item>b{width:29px;height:29px;border-radius:6px;background:#263752;display:grid;place-items:center;color:#a6b6ff;font-size:16px}.wide-item>span:nth-child(2){flex:1;font-size:12px;font-weight:700}.wide-item small{display:block;color:var(--muted);font-size:10px;font-weight:400}.wide-item>span:last-child{color:#99aac9}.setting{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:17px 0;color:#b9c7dc;font-size:12px}.setting input[type=color]{background:#202b42;width:34px;height:28px;border:1px solid #455571;border-radius:5px;padding:2px}.setting input[type=checkbox]{accent-color:#6e80ff;width:16px;height:16px}.setting select{max-width:140px}.palette-help{font-size:11px;background:#172136;color:#92a1bc;border:1px solid #27334b;line-height:1.7;padding:12px;border-radius:9px;margin-top:27px}.workspace{padding:26px 28px 16px;min-width:0;background:radial-gradient(ellipse at top,#111d32 0%,#0b111e 65%)}.workspace-title,.timeline-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}.workspace-title h2,.inspector h2,.timeline h2{font-size:19px;letter-spacing:-.5px;margin:5px 0 0}.toolbar{display:flex;align-items:center;gap:8px}.icon-btn{border:1px solid var(--line);background:#182339;color:#c3d1e5;border-radius:8px;min-width:32px;height:32px;display:grid;place-items:center;font-size:19px}.icon-btn:hover{background:#2c3a53}.toolbar-separator{height:23px;width:1px;background:#2b3b55;margin:0 4px}.view-tag{font-size:11px;color:#8495b0}.stage-wrap{background:#0c1221;padding:10px 10px 0;border:1px solid #2c3a54;border-radius:13px;box-shadow:0 15px 40px #0004}.canvas-frame{border:1px solid #2a3751;box-shadow:0 5px 17px #0004;line-height:0;overflow:hidden}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.canvas-footer{display:flex;justify-content:space-between;align-items:center;color:#8191aa;font-size:11px;padding:12px 4px}.work-hint{color:#7f92b0;font-size:11px;margin:15px 0 18px}.object-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #20304a;padding-top:9px}.counter{color:#8695b1;font-size:11px;font-weight:500;margin-left:7px}.object-list{display:flex;flex-wrap:wrap;gap:8px;min-height:38px}.object-chip{border:1px solid #2c3b55;background:#18243a;color:#bdcbe0;border-radius:8px;padding:8px 10px;font-size:11px;max-width:210px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.object-chip.active{border-color:#7690ff;background:#283b65;color:#f4f7ff}.object-chip .chip-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}.inspector h2{margin-bottom:20px}.empty-state{border:1px dashed #354159;background:#111e30;padding:22px 14px;text-align:center;border-radius:12px;color:#8395b2;font-size:12px;line-height:1.8}.empty-state .empty-icon{font-size:29px;color:#506b97;display:block;margin-bottom:8px}.property-group{border-top:1px solid #27364b;padding-top:15px;margin-top:17px}.property-group h4{margin:0 0 12px;font-size:12px;color:#d6e0f0}.property-line{margin:0 0 11px}.property-line label{display:block;font-size:11px;color:#9aabc5;margin-bottom:6px}.property-line input,.property-line select,.setting select{background:#19263c;border:1px solid #30405b;color:#e7eef9;border-radius:7px;padding:8px;width:100%;min-width:0;font-size:12px}.property-line input[type=color]{height:36px;padding:3px}.property-line input[type=range]{padding:0;accent-color:#6e82ff}.prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.property-note{font-size:10px;color:#7e8fa9}.timeline{grid-column:2/-1;border-top:1px solid #263752;background:#0e1727;padding:18px 27px 26px;min-width:0}.timeline-head{margin-bottom:15px}.timeline h2{margin-top:4px;font-size:17px}.timeline-list{display:flex;gap:11px;overflow-x:auto;padding:2px 1px 9px;align-items:stretch}.timeline-step{flex:0 0 220px;background:#19253b;border:1px solid #324260;border-radius:11px;padding:11px}.timeline-step .step-top{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:9px}.step-number{background:#314675;color:#b9c9ff;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:700}.step-controls{display:flex;gap:3px}.small-btn{background:transparent;color:#a9bad4;border:0;padding:3px 5px;font-size:14px}.small-btn:hover{color:white}.timeline-step select,.timeline-step input{border:1px solid #3a4960;background:#111d31;color:#dce6f5;border-radius:6px;padding:7px;font-size:11px;min-width:0;width:100%;margin-top:6px}.step-secondary{display:grid;grid-template-columns:1fr 1fr;gap:7px}.step-secondary label,.step-row label{font-size:10px;color:#8da0bc}.step-row{margin-top:7px}.timeline-empty{padding:18px;font-size:12px;color:#8797b0;border:1px dashed #30405b;border-radius:9px;width:100%}#toast{position:fixed;bottom:20px;right:22px;padding:12px 16px;background:#263b60;border:1px solid #5372a8;border-radius:10px;box-shadow:0 10px 40px #0008;opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s;z-index:50;color:white;font-size:12px;max-width:460px}#toast.show{opacity:1;transform:translateY(0)}dialog{width:min(820px,90vw);max-height:88vh;overflow:auto;border:1px solid #3a4b66;border-radius:15px;background:#121e30;color:var(--ink);padding:20px;box-shadow:0 24px 90px #000b}dialog::backdrop{background:#030814bd}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.modal-head h2{margin:0;font-size:18px}dialog pre{white-space:pre;overflow:auto;background:#070e19;border:1px solid #283850;padding:15px;max-height:60vh;border-radius:8px;font-size:12px;color:#a9e3e0}dialog video{width:100%;max-height:58vh;background:black;border-radius:8px}.modal-actions{margin-top:15px;display:flex;gap:9px}.error-text{white-space:pre-wrap;color:#ffaca8;font-size:12px;background:#2a1823;padding:15px;border-radius:8px;overflow-wrap:anywhere}
@media(max-width:1100px){.app{grid-template-columns:204px minmax(360px,1fr) 248px}.palette,.inspector{padding:20px 12px}.workspace{padding:22px 16px}.top-center{display:none}.topbar{padding:0 12px}.top-actions{gap:4px}.btn{padding:8px}.view-tag{display:none}}
@media(max-width:790px){.app{grid-template-columns:1fr;grid-template-rows:auto}.topbar{grid-column:1;flex-wrap:wrap;padding:14px;gap:12px}.top-actions{width:100%;flex-wrap:wrap}.palette,.workspace,.inspector,.timeline{grid-column:1}.palette{border-bottom:1px solid var(--line)}.palette .shape-grid{grid-template-columns:repeat(4,1fr)}.palette .stack-buttons{grid-template-columns:repeat(3,1fr)}.wide-item{padding:8px 5px}.wide-item b{display:none}.inspector{border-left:0;border-top:1px solid var(--line)}.timeline{grid-column:1}.palette-help{display:none}}
.brand-logo {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}