:root{--bg:#121316;--panel:#1d1f23;--panel-light:#24272c;--surface:#2b2f36;--border:#383c44;--text:#f5f5f5;--muted:#aab2be;--accent:#ffc72b;--radius:12px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif}#app{width:100%;max-width:1200px;min-height:100vh;margin:auto}.toolbar{background:var(--panel);border-bottom:1px solid var(--border);padding:16px 24px}.toolbar button:last-child{margin-left:auto}main{flex-direction:column;flex:1;display:flex}.viewer{background:#111;flex:1;justify-content:center;align-items:center;padding:30px;display:flex}.viewer video{border-radius:var(--radius);background:#000;width:auto;max-width:100%;max-height:70vh;box-shadow:0 15px 45px #00000080}.timeline-container{background:var(--panel);border-top:1px solid var(--border);padding:22px 30px}.time-labels{color:#d8e9ff;justify-content:space-between;margin-bottom:12px;font-size:14px;font-weight:600;display:flex}.timeline{touch-action:none;border:1px solid var(--border);background:#111317;border-radius:8px;height:70px;position:relative;overflow:visible}.thumbnailStrip{z-index:2;opacity:0;border-radius:var(--radius);transition:opacity .2s;display:flex;position:absolute;inset:0}.thumbnail-skeleton{z-index:1;display:flex;position:absolute;inset:0;overflow:hidden}.skeleton-thumb{background:linear-gradient(90deg,#2a2c31 25%,#3b3d43 50%,#2a2c31 75%) 0 0/200% 100%;border-right:1px solid #2d2f34;flex:1;min-width:80px;animation:1.2s linear infinite skeletonMove}@keyframes skeletonMove{0%{background-position:200% 0}to{background-position:-200% 0}}.timeline-thumb{object-fit:cover;flex-shrink:0;width:80px;height:100%}.thumbnailStrip.ready{opacity:1}.selection{box-sizing:border-box;z-index:4;background:0 0;border:2px solid #ffc72b;border-radius:3px;height:100%;position:absolute;top:0}.shade{pointer-events:none;z-index:3;background:#00000073;height:100%;position:absolute;top:0}.handle{cursor:ew-resize;z-index:6;background:#ffc72b;width:12px;height:100%;position:absolute;top:0;transform:translate(-50%)}.start-handle{border-radius:6px 0 0 6px}.end-handle{border-radius:0 6px 6px 0}.handle:before{content:"";background:#f5c542;border-radius:3px;width:3px;position:absolute;top:8px;bottom:8px;left:2px}.handle:after{content:"";background:#8a6a00;width:2px;height:18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.handle:active{cursor:grabbing}footer{background:var(--panel);border-top:1px solid #323438;border-radius:0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:18px 30px;display:flex}.timeBox{align-items:center;gap:16px;display:flex}label{color:#fff;align-items:center;gap:8px;font-weight:600;display:flex}input[type=number]{color:#fff;text-align:center;background:#303236;border:1px solid #555;border-radius:10px;width:80px;padding:8px 10px}input[type=number]:focus{border-color:#4fc3f7;outline:none}button{background:var(--surface);color:#f2f2f2;cursor:pointer;border:1px solid #444;border-radius:12px;padding:10px 18px;font-size:14px;font-weight:600;transition:background .2s,transform .15s}button:hover{background:#3a3f47;transform:translateY(-1px)}button:active{background:#4a4c52;transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed}.toolbar h2{text-align:center;color:#fff;flex:1;font-size:22px;font-weight:600}.timeline-controls{justify-content:space-between;align-items:center;margin-top:20px;display:flex}.playhead{pointer-events:none;z-index:5;width:10px;height:calc(100% + 16px);position:absolute;top:-10px;left:0;transform:translate(-4.5px)}.playhead-icon{width:100%;height:100%;display:block}.leftControls{align-items:center;gap:10px;display:flex}.leftControls button{min-width:120px}#editor{display:none}#welcome{flex:1;justify-content:center;align-items:center;padding:40px;display:flex}.welcomeBox{text-align:center;background:var(--panel);border:1px solid var(--border);border-radius:20px;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:520px;padding:40px 32px;display:flex;box-shadow:0 20px 50px #00000059}.welcomeIcon{margin-bottom:20px;font-size:72px}.welcomeBox h2{margin-bottom:12px;font-size:30px;font-weight:600}.welcomeBox p{max-width:420px;color:var(--muted);margin-bottom:28px;line-height:1.6}#welcome button{border-radius:12px;padding:14px 32px;font-size:16px}@media (width<=768px){.viewer{padding:16px}.viewer video{width:100%;height:auto;max-height:50vh}.timeline-container{padding:16px}footer{flex-wrap:wrap;gap:14px;padding:16px}.timeBox{order:-1;justify-content:center;width:100%}.leftControls{justify-content:center;gap:8px;width:100%}.leftControls button{flex:1;min-width:0}}