:root{--bg:#0d0f12;--panel:#15181d;--panel2:#1b1f26;--line:#2b3038;--text:#f0eee8;--muted:#8a8d94;--accent:#d5ff4a;--accent2:#a7d21e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif}button{font:inherit;color:inherit;border:0;cursor:pointer}.app-shell{max-width:1600px;margin:auto;padding:28px 42px 20px;min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.14em}.brand-mark{color:var(--accent);font-size:24px}.brand small{font-size:9px;color:var(--muted);border-left:1px solid var(--line);padding-left:12px;letter-spacing:.18em}.top-actions{display:flex;align-items:center;gap:10px;color:var(--muted);font:10px 'DM Mono';letter-spacing:.08em}.status-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px var(--accent)}.icon-button{background:none;color:var(--muted);font-size:23px;margin-left:18px}.workspace{display:grid;grid-template-columns:370px minmax(400px,1fr) 300px;gap:25px;flex:1}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:30px 27px}.eyebrow{font:10px 'DM Mono';letter-spacing:.14em;color:var(--muted);margin-bottom:14px}.controls-panel h1{font-size:33px;line-height:1.08;margin:0 0 13px;letter-spacing:-.06em}.controls-panel h1 em{color:var(--accent);font-style:normal}.intro{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 24px;max-width:240px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset{background:var(--panel2);border:1px solid transparent;border-radius:7px;text-align:left;padding:13px 11px;min-height:78px;transition:.2s}.preset:hover{border-color:#5a6241;transform:translateY(-1px)}.preset.active{background:rgba(213,255,74,.11);border-color:var(--accent)}.preset span{display:block;color:var(--accent);font-size:19px;line-height:1;margin-bottom:9px}.preset b{display:block;font-size:11px}.preset small{color:var(--muted);font-size:9px}.handheld{width:100%;background:none;border:1px dashed var(--line);border-radius:7px;text-align:left;padding:12px;margin-top:12px;color:var(--muted);font-size:11px}.handheld span{color:var(--accent);margin-right:8px}.handheld i{float:right;font:9px 'DM Mono';color:var(--muted);font-style:normal}.handheld.on{border-color:var(--accent);color:var(--text)}.handheld.on i{color:var(--accent)}.preview-column{min-width:0;padding:3px 5px}.preview-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:19px}.preview-head h2{font-size:18px;margin:0;letter-spacing:-.03em}.preview-head h2 span{color:var(--accent)}.format-chip{border:1px solid var(--line);padding:7px 9px;border-radius:5px;font:11px 'DM Mono'}.format-chip span{color:var(--muted);font-size:8px;margin-left:5px}.stage-wrap{display:flex;justify-content:center}.stage{height:min(70vh,650px);aspect-ratio:9/16;max-width:100%;position:relative;overflow:hidden;border-radius:10px;background:#080c14;box-shadow:0 18px 55px #0008}.scene{position:absolute;inset:-5%;background:linear-gradient(#101c35 0%,#202d4a 55%,#0b1119 56%,#0a0c10);transition:transform 1s ease,filter 1s ease}.moon{position:absolute;width:80px;height:80px;border-radius:50%;background:#e7f0d1;right:18%;top:11%;box-shadow:0 0 35px #e7f0d166}.skyline{position:absolute;bottom:39%;width:100%;height:32%;display:flex;align-items:end;gap:3%;padding:0 5%}.skyline i{display:block;width:14%;background:#111828;position:relative}.skyline i:after{content:'▪ ▪\A▪ ▪';white-space:pre;position:absolute;color:#d5ff4a55;line-height:2;font-size:9px;left:30%;top:15%}.skyline i:nth-child(1){height:50%}.skyline i:nth-child(2){height:82%}.skyline i:nth-child(3){height:65%}.skyline i:nth-child(4){height:100%}.skyline i:nth-child(5){height:58%}.skyline i:nth-child(6){height:73%}.floor{position:absolute;inset:61% 0 0;background:linear-gradient(120deg,#14191e,#080a0e);clip-path:polygon(0 25%,100% 0,100% 100%,0 100%)}.actor{position:absolute;left:50%;bottom:17%;width:24%;height:38%;transform:translateX(-50%);filter:drop-shadow(0 13px 8px #0008)}.head{position:absolute;top:0;left:33%;width:34%;aspect-ratio:1;border-radius:50%;background:#c28d6d}.body{position:absolute;top:18%;left:22%;width:56%;height:48%;background:#c9d5dd;border-radius:35% 35% 15% 15%}.arm,.leg{position:absolute;background:#b2c0ca;border-radius:20px}.arm{height:42%;width:14%;top:23%}.arm-left{left:9%;transform:rotate(12deg)}.arm-right{right:9%;transform:rotate(-12deg)}.leg{height:40%;width:18%;top:60%}.leg-left{left:25%;transform:rotate(5deg)}.leg-right{right:25%;transform:rotate(-5deg)}.caption-card{position:absolute;left:10%;top:8%;border-left:2px solid var(--accent);padding-left:9px}.caption-card span,.caption-card small{display:block;color:#b5bac1;font:8px 'DM Mono';letter-spacing:.1em}.caption-card strong{display:block;font-size:14px;letter-spacing:.08em;margin:4px 0}.safe-frame{position:absolute;z-index:3;inset:7%;border:1px solid #ffffff18;pointer-events:none}.grid-lines{position:absolute;z-index:3;inset:0;background:linear-gradient(90deg,transparent 49.8%,#fff2 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#fff2 50%,transparent 50.2%);pointer-events:none}.play-overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:5}.play-overlay button{width:57px;height:57px;border-radius:50%;background:#e9eddf;color:#111;font-size:18px;padding-left:4px;box-shadow:0 5px 25px #0008;transition:.2s}.play-overlay button:hover{transform:scale(1.08)}.stage-meta{position:absolute;z-index:5;bottom:15px;left:17px;right:17px;display:flex;justify-content:space-between;font:8px 'DM Mono';color:#d8ded8}.stage-meta span:last-child{color:var(--accent)}.timeline{display:flex;align-items:center;gap:12px;margin:18px auto 0;width:min(100%,430px);font:9px 'DM Mono';color:var(--muted)}.timeline-label{white-space:nowrap}.timeline-label span{color:var(--text);margin-left:4px}.track{height:4px;background:var(--line);border-radius:5px;flex:1;position:relative}.track-fill{height:100%;background:var(--accent);width:0;border-radius:5px}.playhead{position:absolute;top:50%;left:0;width:10px;height:10px;background:var(--accent);border-radius:50%;transform:translate(-50%,-50%)}.settings-panel{padding:30px 24px;display:flex;flex-direction:column}.settings-panel h3{font-size:21px;margin:0 0 38px;letter-spacing:-.04em}.control{margin-bottom:29px}.control label{display:flex;justify-content:space-between;margin-bottom:12px;font-size:12px}.control output{font:12px 'DM Mono';color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent);height:4px}.divider{border-top:1px solid var(--line);margin:4px 0 23px}.start-image{display:flex;align-items:center;justify-content:space-between;background:var(--panel2);border-radius:7px;padding:12px}.start-image strong,.start-image small{display:block}.start-image strong{font-size:11px}.start-image small{color:var(--muted);font-size:9px;margin-top:3px}.start-image button{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#15181d;font-size:20px}.tip{display:flex;gap:10px;margin:22px 0 25px;color:var(--muted);font-size:10px;line-height:1.5}.tip span{color:var(--accent);font-size:20px}.tip p{margin:0}.tip b{color:var(--text);font-weight:600}.play-button,.save-button{border-radius:6px;padding:14px;font-size:11px;font-weight:700}.play-button{background:var(--accent);color:#131612;margin-top:auto}.play-button span{margin-right:7px}.play-button kbd{float:right;background:#b5da38;border-radius:3px;padding:2px 5px;font:9px 'DM Mono'}.save-button{background:none;border:1px solid var(--line);color:var(--muted);margin-top:9px}.save-button.saved{border-color:var(--accent);color:var(--accent)}footer{display:flex;justify-content:space-between;color:#50545b;font:9px 'DM Mono';margin-top:19px}footer b{color:var(--accent);margin:0 5px}@media(max-width:1100px){.workspace{grid-template-columns:300px minmax(300px,1fr) 270px}.panel{padding:22px 18px}}@media(max-width:850px){.app-shell{padding:20px}.workspace{grid-template-columns:1fr}.controls-panel{order:2}.preview-column{order:1}.settings-panel{order:3}.stage{height:60vh}footer{display:none}}