:root{color-scheme:light dark}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}.container{max-width:960px;margin:0 auto;padding:16px}.card{background:color-mix(in srgb,Canvas 92%,transparent);border:1px solid color-mix(in srgb,CanvasText 12%,transparent);border-radius:12px;padding:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.spacer{height:12px}.btn{padding:10px 14px;border-radius:10px;border:1px solid color-mix(in srgb,CanvasText 16%,transparent);background:color-mix(in srgb,Canvas 92%,transparent);cursor:pointer}.btn.primary{background:#2563eb;color:#fff;border-color:#2563eb}.grid{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width: 900px){.grid{grid-template-columns:1fr 1fr}}input[type=range]{width:100%}video,canvas,img{max-width:100%;border-radius:8px}.progress{height:8px;background:color-mix(in srgb,CanvasText 10%,transparent);border-radius:999px;overflow:hidden}.progress>div{height:100%;background:#10b981;width:0%}.timeline-container{margin:16px 0}.timeline-labels{display:flex;justify-content:space-between;margin-bottom:8px;font-size:12px;color:color-mix(in srgb,CanvasText 70%,transparent)}.timeline{position:relative;height:40px;cursor:pointer;user-select:none}.timeline-track{position:relative;height:8px;background:color-mix(in srgb,CanvasText 15%,transparent);border-radius:4px;margin:16px 0}.timeline-selected{position:absolute;top:0;height:100%;background:#2563eb;border-radius:4px;pointer-events:none}.timeline-handle{position:absolute;top:-6px;width:20px;height:20px;background:#2563eb;border:2px solid white;border-radius:50%;cursor:grab;transform:translate(-50%);box-shadow:0 2px 4px #0003}.timeline-handle:active{cursor:grabbing}.timeline-handle:hover{transform:translate(-50%) scale(1.1);transition:transform .1s ease}.timeline-handle-start,.timeline-handle-end{z-index:2}.timeline-info{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:color-mix(in srgb,CanvasText 70%,transparent)}.timeline-info span{font-weight:500}.timeline-preview{margin-top:12px;text-align:center}.timeline-preview .btn{font-size:14px;padding:8px 12px}.timeline-text-marker{position:absolute;top:-8px;transform:translate(-50%);cursor:pointer;z-index:3}.timeline-text-marker-icon{background:#ff6b6b;color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 2px 4px #0003}.timeline-text-marker-label{background:#000c;color:#fff;padding:2px 6px;border-radius:4px;font-size:10px;white-space:nowrap;margin-top:2px;max-width:100px;overflow:hidden;text-overflow:ellipsis}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:color-mix(in srgb,Canvas 100%,transparent);border:1px solid color-mix(in srgb,CanvasText 20%,transparent);border-radius:12px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto}.modal-content h3{margin:0 0 16px;color:color-mix(in srgb,CanvasText 100%,transparent)}.text-editor .row{margin-bottom:12px}.text-editor label{min-width:100px;font-weight:500;color:color-mix(in srgb,CanvasText 90%,transparent)}.app-header{text-align:center;margin-bottom:24px}.app-logo{height:60px;width:auto;max-width:100%;object-fit:contain}