*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b0e10;color:#f4efe6;font-family:Inter,system-ui,sans-serif}button,input,select{font:inherit}.app-header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #22272b;background:#0a0d0f;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#1b1712;color:#e3b86f;border:1px solid #4a3825;font-weight:800}.brand strong{display:block;font-size:15px}.brand small{display:block;color:#8f8a81;font-size:9px;letter-spacing:.16em;margin-top:2px}.header-actions{display:flex;align-items:center;gap:8px}.segmented{display:flex;gap:3px;padding:3px;border:1px solid #282d30;border-radius:10px;background:#0d1113}.segmented button,.button{border:1px solid #30363a;background:#14191c;color:#d8d1c7;border-radius:8px;padding:8px 11px;cursor:pointer}.segmented button{border-color:transparent;background:transparent;padding:7px 10px}.segmented button.active,.button.accent{background:linear-gradient(135deg,#d2a15b,#8d6237);border-color:#d9ae6e;color:#17120d;font-weight:700}.button.ghost{background:#0e1214}.button.mini{padding:6px 8px;font-size:11px}.button:disabled{opacity:.45;cursor:not-allowed}.app-shell{height:calc(100vh - 64px);display:grid;grid-template-columns:76px 390px minmax(0,1fr);overflow:hidden}.tool-rail{background:#090c0e;border-right:1px solid #202529;padding:10px 7px;display:flex;flex-direction:column;gap:6px}.tool{border:1px solid transparent;background:transparent;color:#8e8a82;border-radius:12px;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}.tool span{font-size:22px;line-height:1}.tool b{font-size:10px}.tool.active{background:#211a13;border-color:#7d5a32;color:#f0c77f;box-shadow:inset 3px 0 #d7a45c}.inspector{background:#0f1315;border-right:1px solid #202529;overflow-y:auto;padding:12px;scrollbar-width:thin}.inspector::-webkit-scrollbar{width:7px}.inspector::-webkit-scrollbar-thumb{background:#3b4044;border-radius:99px}.inspector-head{position:sticky;top:0;z-index:5;background:linear-gradient(#0f1315 82%,rgba(15,19,21,0));padding:2px 2px 14px}.inspector-head small{font-size:9px;color:#8f887d;letter-spacing:.17em}.inspector-head h1{margin:4px 0 0;font-size:26px}.panel{display:none}.panel.active{display:block}.card{border:1px solid #272d31;background:#111619;border-radius:14px;padding:12px;margin-bottom:10px}.card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.card-title strong{display:block;font-size:13px}.card-title small{display:block;color:#8e887e;font-size:9px;margin-top:2px}.badge{font-size:8px;letter-spacing:.12em;color:#d8b478;border:1px solid #604a31;border-radius:999px;padding:4px 7px}.upload-zone{display:flex;min-height:126px;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #5a4934;border-radius:12px;background:#161616;cursor:pointer;text-align:center;padding:14px}.upload-zone.compact{min-height:94px}.upload-zone input{display:none}.upload-zone .upload-icon{font-size:25px;color:#d4a55c;margin-bottom:4px}.upload-zone b{font-size:12px}.upload-zone small{font-size:9px;color:#989187;margin-top:5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transport-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.range{width:100%;accent-color:#d3a05a}.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.meta-grid div{background:#0b0f11;border:1px solid #202629;border-radius:10px;padding:10px}.meta-grid small{display:block;color:#807b73;font-size:8px;letter-spacing:.1em}.meta-grid strong{display:block;margin-top:5px;font-size:12px}.hint{color:#817b73;font-size:9px;line-height:1.45;margin:10px 0 0}.control-grid{display:grid;gap:8px}.control-grid.two{grid-template-columns:1fr 1fr}.card label{display:block;color:#b6afa4;font-size:10px;margin:7px 0}.card label span{float:right;color:#8d857a}.card select,.card input[type=text]{width:100%;margin-top:5px;background:#0a0f11;border:1px solid #2a3034;border-radius:8px;color:#eee6da;padding:9px}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.template-card{min-height:76px;border:1px solid #293034;background:#0f1416;color:#cfc5b7;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:8px}.template-card b{font-size:22px;font-weight:500}.template-card span{font-size:9px}.template-card:hover,.template-card.active{border-color:#bd8c4d;background:#21190f;color:#f0cc8f}.choice-row{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:end;margin-bottom:6px}.choice-icon{width:44px;height:42px;border-radius:10px;background:#0b0f11;border:1px solid #30363a;display:grid;place-items:center;font-size:22px;color:#e8c988;margin-bottom:7px}.choice-row label{margin:0}.react-section{margin:12px 0;padding:10px;border:1px solid #2b3033;border-radius:11px;background:#0c1113}.section-label{font-size:8px;letter-spacing:.15em;color:#d1a467;margin:4px 0 8px;font-weight:700}.sync-meter{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.sync-meter div{display:grid;grid-template-columns:40px 1fr;gap:6px;align-items:center}.sync-meter span{font-size:7px;color:#8f887e;letter-spacing:.08em}.sync-meter i{height:7px;border-radius:99px;background:#1b2023;overflow:hidden;display:block}.sync-meter b{display:block;height:100%;width:0;background:linear-gradient(90deg,#7d8d87,#d5a25d);border-radius:inherit;transition:width .035s linear}.sync-meter .beat-meter b{background:linear-gradient(90deg,#d36e52,#f0b85f)}.color-row{display:grid;grid-template-columns:52px 1fr 72px;gap:7px;margin-top:10px}.color-row input[type=color]{width:52px;height:36px;border:1px solid #30363a;border-radius:8px;background:#0b0f11;padding:3px}.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.toggle-grid label{display:flex;align-items:center;gap:7px;background:#0b0f11;border:1px solid #23292d;border-radius:8px;padding:8px;margin:0}.toggle-grid input{margin:0}.text-scope-note{font-size:9px;line-height:1.45;color:#9a9184;padding:9px;border:1px solid #2a3034;border-radius:9px;background:#0b0f11;margin-bottom:8px}.text-scope-note b{color:#e5c58e}.text-list{display:grid;gap:8px}.text-card{border:1px solid #252b2f;border-radius:11px;background:#0c1113;padding:10px}.text-card header{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}.text-card header strong{font-size:11px}.text-card .delete-text{border:0;background:transparent;color:#9b7468;cursor:pointer;font-size:18px}.text-card .row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.workspace{padding:12px;overflow:hidden;display:flex;flex-direction:column;background:#0c0f11}.workspace-head{height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto}.workspace-head small{color:#d29468;font-size:9px;letter-spacing:.15em}.workspace-head h2{margin:3px 0 0;font-size:19px}.status-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.status-row span{font-size:9px;color:#aaa49a;padding:6px 9px;border:1px solid #292e31;border-radius:999px}.stage-wrap{flex:1;min-height:0;background:#080b0d;border:1px solid #22282c;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden}.stage-wrap canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:4px;box-shadow:0 18px 50px rgba(0,0,0,.35);touch-action:none}.timeline{flex:0 0 auto;margin-top:9px;border:1px solid #252b2f;border-radius:13px;background:#0f1417;padding:8px;display:grid;grid-template-columns:36px 40px auto minmax(140px,1fr) auto;align-items:center;gap:8px}.compact-timeline{min-height:54px}.circle-button{width:36px;height:36px;border-radius:50%;border:1px solid #30363a;background:#151a1d;color:#d6cec1;cursor:pointer}.circle-button.accent{background:linear-gradient(135deg,#d2a15b,#916337);color:#16110d;border-color:#d0a15f}.timeline>span{font-size:10px}.timeline-hint{font-size:8px;color:#6f6a63;white-space:nowrap}.toast{position:fixed;right:18px;bottom:18px;z-index:50;background:#181d20;border:1px solid #3b4348;color:#efe7da;padding:10px 14px;border-radius:10px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.app-shell{grid-template-columns:68px 340px minmax(0,1fr)}.tool-rail{padding:8px 5px}.template-grid{grid-template-columns:repeat(2,1fr)}.control-grid.two{grid-template-columns:1fr}.timeline-hint{display:none}.timeline{grid-template-columns:36px 40px auto 1fr}}
@media(max-width:820px){.app-header{height:auto;min-height:58px;padding:9px 10px;gap:8px}.brand small{display:none}.header-actions{gap:5px}.header-actions .button{padding:7px 8px;font-size:10px}.app-shell{height:auto;min-height:calc(100vh - 58px);grid-template-columns:1fr;overflow:visible}.tool-rail{position:sticky;top:58px;z-index:15;display:grid;grid-template-columns:repeat(4,1fr);border-right:0;border-bottom:1px solid #202529;padding:6px}.tool{min-height:44px;flex-direction:row}.tool span{font-size:16px}.inspector{overflow:visible;border-right:0;padding:9px}.inspector-head{position:relative}.workspace{min-height:70vh;overflow:visible}.stage-wrap{min-height:52vh}.status-row{display:none}.timeline{grid-template-columns:34px 38px auto 1fr}.timeline-hint{display:none}}