*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{color:#f5f5f5;background:#080808;font-family:Inter,ui-sans-serif,system-ui,sans-serif}button{color:inherit;cursor:pointer;font:inherit;background:0 0;border:0}button:focus-visible,input:focus-visible{outline-offset:2px;outline:1px solid #fff}.app{background:#0b0b0b;flex-direction:column;height:100%;display:flex}.app header{background:#090909;border-bottom:1px solid #262626;flex:none;align-items:center;gap:12px;height:62px;padding:0 18px;display:flex}.brand{align-items:center;gap:12px;min-width:230px;display:flex}.logoMark{letter-spacing:1px;justify-content:center;align-items:center;gap:3px;width:42px;height:42px;font-size:14px;font-weight:800;display:flex;position:relative}.logoMark span{font-size:29px;font-weight:300;line-height:1}.logoMark small{letter-spacing:2px;font-size:5px;position:absolute;bottom:-1px;left:8px}.brandText{letter-spacing:1.5px;font-size:13px;font-weight:800}.brandText span{color:#8d8d8d;letter-spacing:1.5px;margin-top:3px;font-size:8px;display:block}.project{text-align:center;color:#ddd;flex:1;font-size:13px}.project small{color:#777;margin-top:3px;font-size:10px;display:block}header>button{color:#aaa;border-radius:7px;padding:8px 12px;font-size:12px}header>button:hover{color:#fff;background:#171717}.export{align-items:center;gap:7px;font-weight:700;display:flex;color:#080808!important;background:#fff!important}.app main{flex:1;min-height:0;display:flex}.tools{background:#0b0b0b;border-right:1px solid #262626;flex-direction:column;flex:none;align-items:center;gap:4px;width:72px;padding:10px 7px;display:flex}.tool{color:#858585;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:56px;height:55px;display:flex}.tool svg{width:18px;height:18px}.tool small{font-size:8px}.tool:hover,.tool:first-child{color:#fff;background:#171717}.workspace{background:#101010;flex-direction:column;flex:1;min-width:0;display:flex}.stageWrap{background:radial-gradient(circle,#171717 0,#0d0d0d 55%,#090909 100%);flex:1;place-items:center;min-height:0;display:grid;position:relative;overflow:hidden}.stage{aspect-ratio:16/9;transform-origin:50%;background:#000;border:1px solid #292929;width:min(78%,900px);transition:transform .15s;position:relative;box-shadow:0 18px 60px #000}.object{z-index:2;-webkit-user-select:none;user-select:none;touch-action:none;cursor:pointer;padding:4px;position:absolute}.object.selected{outline-offset:8px;outline:1px dashed #fff}.textObj{letter-spacing:4px;white-space:nowrap;font-size:62px;font-weight:800}.shape{background:#fff;border-radius:50%;width:90px;height:90px;box-shadow:0 0 30px #fff3}.object img{max-width:280px;max-height:220px;display:block}.stageTools{color:#aaa;background:#151515;border:1px solid #2b2b2b;border-radius:8px;align-items:center;gap:9px;padding:4px 7px;font-size:11px;display:flex;position:absolute;bottom:16px;right:16px}.stageTools button{border-radius:5px;width:25px;height:25px}.stageTools button:hover{color:#fff;background:#292929}.timeline{background:#0b0b0b;border-top:1px solid #292929;flex:none;height:235px;overflow:auto}.timelineTop{border-bottom:1px solid #242424;justify-content:space-between;align-items:center;height:48px;padding:0 14px;display:flex}.timelineTop b{font-size:12px}.timelineTop span{color:#666;margin-top:4px;font-size:9px;display:block}.controls{align-items:center;gap:5px;display:flex}.controls button{color:#aaa;background:#141414;border:1px solid #292929;border-radius:5px;width:30px;height:28px}.controls button:hover{color:#fff}.controls b{color:#888;margin-left:5px;font-size:10px}.ruler,.row{min-width:720px;display:flex}.ruler{border-bottom:1px solid #242424;height:28px}.ruler>span,.rowName{flex:none;width:105px}.ruler>span{color:#777;padding:9px 10px;font-size:9px}.ruler button,.cells button{color:#4d4d4d;border-left:1px solid #181818;flex:none;width:28px;font-size:8px}.ruler button{height:28px}.ruler button.playhead{color:#fff;background:#242424}.row{border-bottom:1px solid #181818;height:34px}.rowName{text-align:left;color:#bbb;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid #242424;align-items:center;gap:7px;padding:0 10px;font-size:10px;display:flex;overflow:hidden}.rowName:hover{color:#fff}.cells{display:flex}.cells button{height:34px;position:relative}.cells button:hover{background:#202020}.cells button.now{box-shadow:inset 1px 0 #fff}.cells button.key{color:#fff;font-size:9px}.timelineActions{gap:7px;padding:8px 10px;display:flex}.timelineActions button{color:#999;border:1px solid #292929;border-radius:5px;align-items:center;gap:5px;padding:6px 9px;font-size:10px;display:flex}.timelineActions button:hover{color:#fff;background:#171717}.properties{background:#0b0b0b;border-left:1px solid #262626;flex:none;width:265px;padding:0 14px;overflow:auto}.tabs{color:#777;border-bottom:1px solid #242424;align-items:center;gap:19px;height:49px;font-size:10px;display:flex}.tabs b{color:#fff;border-bottom:2px solid #fff;align-items:center;height:49px;display:flex}.propTitle{align-items:center;gap:7px;margin:18px 0;font-size:12px;font-weight:700;display:flex}.dot{background:#fff;border-radius:50%;width:8px;height:8px}.properties label{color:#777;grid-template-columns:52px 1fr;align-items:center;gap:7px;margin:9px 0;font-size:9px;display:grid}.properties input{color:#ddd;background:#151515;border:1px solid #292929;border-radius:5px;width:100%;height:30px;padding:0 8px;font-size:10px}.properties input[type=color]{height:30px;padding:3px}.wide{color:#ccc;background:#151515;border:1px solid #303030;border-radius:6px;justify-content:center;align-items:center;gap:7px;width:100%;height:34px;margin-top:12px;font-size:10px;display:flex}.wide:hover{color:#fff;background:#222}.hint{color:#666;margin-top:18px;font-size:11px;line-height:1.6}@media (width<=900px){.properties{width:220px}.brand{min-width:180px}.brandText{display:none}.tools{width:60px}.tool{width:48px}.stage{width:90%}}@media (width<=700px){.properties,.project{display:none}.timeline{height:210px}.tools{width:54px;padding:8px 4px}.tool{width:46px;height:48px}.stage{width:94%}.app header{height:54px;padding:0 9px}.brand{min-width:auto}.logoMark{width:38px}.logoMark small{display:none}header>button{padding:7px 8px}.timelineTop{padding:0 9px}}