*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080814;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit;color:inherit;border:0;cursor:pointer}
#app{height:100dvh;display:flex;flex-direction:column}
header{height:58px;flex:none;background:#11111e;border-bottom:1px solid #2c2940;display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.brand{font-size:17px;font-weight:900;letter-spacing:2px}.brand b{color:#a875ff}
.top-actions{display:flex;gap:6px}.top-actions button{background:#211d31;border:1px solid #3d3454;border-radius:10px;padding:8px 11px;font-size:12px}
#stage{position:relative;flex:1;min-height:0;background:#101020}
#scene{width:100%;height:100%;display:block;touch-action:none}
.hud{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;pointer-events:none}
.hud span{background:#090914cc;border:1px solid #3c3552;padding:7px 10px;border-radius:10px;font-size:10px}
.camera-tools{position:absolute;top:52px;left:50%;transform:translateX(-50%);display:flex;gap:5px;background:#0b0b15dd;border:1px solid #39334b;border-radius:12px;padding:5px}
.camera-tools button{background:#1b1927;border-radius:8px;padding:8px 10px;font-size:10px}
.tabs{height:54px;flex:none;background:#11111e;border-top:1px solid #2c2940;display:flex;justify-content:space-around;z-index:8}
.tab{background:none;color:#aaa;min-width:18%;font-size:18px;padding:5px;display:flex;flex-direction:column;align-items:center;gap:1px}.tab small{font-size:9px}.tab.active{color:#c18cff}
#drawer{position:absolute;z-index:10;left:0;right:0;bottom:54px;max-height:60%;background:#13131f;border-top:1px solid #39334b;border-radius:18px 18px 0 0;padding:13px;transform:translateY(110%);transition:transform .22s ease;overflow:auto}
#drawer.open{transform:translateY(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center}.drawer-head h2{font-size:16px;margin:0 0 10px}.drawer-head button{background:#242132;border-radius:9px;padding:7px 10px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.card{background:#1c1a2a;border:1px solid #302b42;border-radius:10px;padding:9px;text-align:center;font-size:10px}.card.selected{border-color:#a875ff;box-shadow:0 0 0 1px #a875ff55 inset}.emoji{font-size:27px;margin-bottom:4px}
.row{display:flex;align-items:center;gap:8px;margin:10px 0}.row label{font-size:10px;color:#aaa;min-width:76px}input[type=range]{width:100%;accent-color:#a875ff}
.primary{background:#7138c9;border-radius:10px;padding:10px 13px;font-weight:700}.secondary{background:#272335;border-radius:10px;padding:10px 13px}
.actions{display:flex;gap:7px;margin-top:10px}.timeline{display:flex;gap:7px;overflow:auto;padding-bottom:5px}.scene-card{min-width:92px}.scene-card .emoji{font-size:24px}
#toast{position:absolute;z-index:30;left:50%;bottom:72px;transform:translate(-50%,20px);opacity:0;background:#f0ecff;color:#171321;padding:9px 13px;border-radius:12px;font-size:11px;font-weight:800;transition:.2s;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:700px){#drawer{left:18%;right:18%;max-height:52%}.grid{grid-template-columns:repeat(6,1fr)}}