*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;background:#121316;font-family:Arial,Helvetica,sans-serif}#app{flex-direction:column;max-width:1200px;min-height:100vh;margin:auto;display:flex}.toolbar{background:#202124;border-bottom:1px solid #323438;align-items:center;gap:12px;padding:16px 24px;display:flex}.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{background:#000;border-radius:14px;width:auto;max-width:100%;max-height:70vh;box-shadow:0 12px 40px #00000073}.timeline-container{background:#242528;border-top:1px solid #323438;padding:22px 30px}.time-labels{color:#d8e9ff;justify-content:space-between;margin-bottom:12px;font-size:14px;font-weight:600;display:flex}.timeline{height:42px;position:relative}.track{background:#55585e;border-radius:999px;height:10px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.selection{background:#f5c542;border-radius:999px;height:10px;position:absolute;top:50%;transform:translateY(-50%)}.handle{cursor:grab;background:#fafafa;border-radius:50%;width:22px;height:22px;transition:transform .15s,box-shadow .15s;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #00000059}.handle:hover{transform:translate(-50%,-50%)scale(1.12);box-shadow:0 4px 12px #00000073}.handle:active{cursor:grabbing;transform:translate(-50%,-50%)scale(1.18)}footer{background:#202124;border-top:1px solid #323438;justify-content:space-between;align-items:center;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;width:80px;padding:8px 10px}input[type=number]:focus{border-color:#4fc3f7;outline:none}button{color:#f2f2f2;cursor:pointer;background:#303236;border:1px solid #444;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;transition:background .2s,transform .15s}button:hover{background:#3b3d42;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;background:#ff5252;width:2px;height:28px;position:absolute;top:50%;transform:translate(-50%,-50%)}.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;max-width:500px}.welcomeIcon{margin-bottom:20px;font-size:72px}.welcomeBox h2{margin-bottom:12px;font-size:30px}.welcomeBox p{color:#aab2be;margin-bottom:28px;line-height:1.6}#welcome button{padding:14px 30px;font-size:16px}