:root{color-scheme:light;--paper: #f4f4f4;--surface: #ffffff;--ink: #101010;--graphite: #242424;--muted: #6b7280;--stone: #898989;--border: #e5e7eb;--accent: #0099ff;--info-bg: #eff6fe;--danger: #b42318;--shadow-card: rgba(34, 42, 53, .05) 0px 4px 8px 0px;--radius-card: 12px;--radius-input: 8px;--radius-pill: 9999px;--font-display: "Cal Sans", Poppins, "Segoe UI", sans-serif;--font-body: Inter, "Cal Sans UI Variable Light", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--paper);color:var(--graphite);font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.5}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{max-width:1440px;margin:0 auto;padding:32px 24px 96px}.app-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}.header-spacer{flex:1}.header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.header-actions .file-label,.header-actions .btn{padding:8px 16px}.editor-grid{display:grid;grid-template-columns:272px minmax(0,1fr) 296px;gap:24px;align-items:start;margin-bottom:32px}.editor-grid.no-inspector{grid-template-columns:272px minmax(0,1fr)}@media(max-width:1024px){.editor-grid,.editor-grid.no-inspector{grid-template-columns:1fr}}.bin,.inspector{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px}.left-col{display:flex;flex-direction:column;gap:16px;min-width:0}.fit-block{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px}.fit-drop,.bin-drop{border:2px dashed var(--border);border-radius:var(--radius-input);padding:20px 12px;text-align:center;font-size:14px;color:var(--muted);cursor:pointer;margin-bottom:12px}.fit-drop:hover,.fit-drop.over,.bin-drop:hover{border-color:var(--accent);color:var(--ink);background:var(--info-bg)}.fit-drop:focus-visible,.bin-drop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.fit-drop input,.bin-drop input{display:none}.bin.over{outline:2px dashed var(--accent);outline-offset:-2px}.fit-block .phase-badge{display:block;text-align:center;white-space:normal;overflow-wrap:anywhere}.fit-stats{display:flex;flex-direction:column;gap:6px;margin-top:12px}.fit-stat{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}.fit-stat-v{color:var(--graphite);font-weight:600;white-space:nowrap}.bin-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}.bin-head h2{margin:0}.bin .file-label{width:100%;text-align:center;margin-bottom:12px;cursor:pointer}.bin-list{display:flex;flex-direction:column;gap:8px}.clip-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"dot title remove" "dot meta remove";column-gap:8px;align-items:center;width:100%;background:var(--paper);border:2px solid transparent;border-radius:var(--radius-input);padding:8px 10px;cursor:pointer;font-family:inherit;text-align:left}.clip-row:hover{border-color:var(--border)}.clip-row.selected{border-color:var(--ink);background:var(--surface)}.clip-dot{grid-area:dot;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--stone)}.clip-dot-renderizando{background:var(--accent)}.clip-dot-hecho{background:var(--ink)}.clip-dot-error{background:var(--danger)}.clip-title{grid-area:title;font-size:14px;color:var(--graphite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip-meta{grid-area:meta;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip-remove{grid-area:remove;color:var(--stone);font-size:18px;line-height:1;padding:0 2px;border-radius:var(--radius-input)}.clip-remove:hover{color:var(--danger)}.center{min-width:0}.template-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.template-head h2{margin:0}.inspector .clip-name{font-size:14px;font-weight:500;color:var(--ink);word-break:break-word;margin:0 0 12px}.recorded-banner{background:var(--info-bg);border:1px solid var(--accent);border-radius:var(--radius-input);padding:8px 12px;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 12px}.recorded-banner.warn{background:#fdf1f0;border-color:var(--danger);color:var(--danger)}.inspector .editor-row{margin-bottom:12px}.inspector .check{margin-bottom:16px}.inspector h2{margin-top:8px}.result-line{font-size:14px;margin:8px 0 0;word-break:break-word}.header-logo{width:30px;height:30px}.app-header h1{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:.24px;line-height:1.3;color:var(--ink);margin:0}.phase-badge{font-size:12px;line-height:1.4;color:var(--graphite);background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px 12px;white-space:nowrap}.local-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--radius-pill);padding:5px 14px;white-space:nowrap}.local-badge:before{content:"";width:8px;height:8px;border-radius:var(--radius-pill);background:var(--accent)}.status{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:24px}.status-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}.status-row:last-child{border-bottom:none}.muted{color:var(--muted);font-size:14px}a{color:var(--accent)}.file-label,.btn{display:inline-block;background:transparent;border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--graphite);padding:12px 24px;font-size:14px;font-weight:400;font-family:var(--font-body);cursor:pointer;line-height:1.4}.file-label:hover,.btn:hover{border-color:var(--graphite)}.file-label input{display:none}.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}.btn-primary:hover{border-color:var(--ink);opacity:.88}.btn:disabled{opacity:.45;cursor:default}.btn-small{padding:8px 16px;font-size:14px}.stage{margin:0 0 32px}.source-video{display:none}.live-preview{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:48vh;background:#000;border-radius:var(--radius-card);box-shadow:var(--shadow-card);cursor:pointer;touch-action:none}.timeline{width:100%;margin:12px 0 8px;accent-color:var(--ink)}.clocks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted)}.clocks strong{color:var(--ink);font-weight:600}.out-of-range{color:var(--danger);font-weight:500}.offset-box h2,.bin h2,.fit-block h2,.inspector h2,.timeline-box h2,.template-box h2{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:.2px;line-height:1.3;color:var(--ink);margin:0 0 12px}.offset-box,.timeline-box,.template-box{margin-bottom:32px}.activity-overview{display:block;width:100%;height:auto;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);cursor:ew-resize;touch-action:none;margin-bottom:8px}.offset-btns{display:flex;flex-wrap:wrap;gap:8px}.editor-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:8px}.trim-group{display:flex;align-items:center;gap:8px;font-size:14px}.trim-input{width:88px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-input);color:var(--graphite);padding:8px;font-size:14px;font-family:inherit;font-variant-numeric:tabular-nums}.color-input{width:44px;height:30px;padding:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-input);cursor:pointer}.range-input{flex:1;min-width:80px;accent-color:var(--ink)}.font-select{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-input);color:var(--graphite);padding:7px 8px;font-size:14px;font-family:inherit;max-width:104px}.pct{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:40px}.op-group{display:inline-flex;flex:1;align-items:center;gap:8px;font-size:14px}.btn-danger{border-color:var(--danger);color:var(--danger)}.btn-danger:hover{border-color:var(--danger);background:var(--danger);color:#fff}.widget-panel .editor-row{margin-bottom:12px}.widget-panel .btn-danger{width:100%}.kind-select,.metric-select,.format-select,.tz-select{max-width:none;flex:1;min-width:0}.add-dialog{background:var(--surface);border:none;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:24px;width:min(340px,calc(100vw - 48px));color:var(--graphite);font-family:var(--font-body)}.add-dialog::backdrop{background:#10101073}.add-dialog h2{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--ink);margin:0 0 16px}.add-dialog .editor-row{margin-bottom:12px}.add-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:16px}.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.check input{accent-color:var(--ink)}.seg-switch{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px;gap:2px}.seg-opt{border:none;background:none;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;font-family:inherit;line-height:1;color:var(--muted);cursor:pointer}.seg-opt:hover{color:var(--ink)}.seg-opt.active{background:var(--ink);color:#fff}.seg-switch.fill{flex:1;min-width:0}.seg-switch.fill .seg-opt{flex:1;min-width:0;padding:5px 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-sep{width:1px;height:24px;background:var(--border)}.render-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}.template-cards{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;margin-bottom:16px;padding-bottom:8px}.template-card{position:relative;background:var(--surface);border:2px solid transparent;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:8px;font-family:inherit;flex-shrink:0}.template-open{display:block;width:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;text-align:left}.card-export{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:8px;background:var(--surface);color:var(--graphite);border:1px solid var(--border);cursor:pointer}.card-export:hover{border-color:var(--ink);color:var(--ink)}.play-btn{display:inline-flex;align-items:center;justify-content:center}.play-btn .icon{width:16px;height:16px;background:currentColor}.play-btn .icon-play{-webkit-mask:url(/icons/play.svg) no-repeat center / contain;mask:url(/icons/play.svg) no-repeat center / contain}.play-btn .icon-pause{-webkit-mask:url(/icons/pause.svg) no-repeat center / contain;mask:url(/icons/pause.svg) no-repeat center / contain}.card-export .icon{width:14px;height:14px;background:currentColor;-webkit-mask:url(/icons/download.svg) no-repeat center / contain;mask:url(/icons/download.svg) no-repeat center / contain}.template-card:hover{border-color:var(--border)}.template-card.selected{border-color:var(--ink)}.template-thumb{display:block;height:108px;width:auto;border-radius:var(--radius-input);background:#0d0d0d}.template-name{display:block;font-size:14px;color:var(--graphite);padding:8px 40px 4px 4px;text-align:left}.template-card.new-template{background:#fff;border:2px solid #000;cursor:pointer}.template-card.new-template:hover{border-color:#000}.new-plus{display:flex;align-items:center;justify-content:center;height:108px;font-size:64px;line-height:1;color:#000}.template-card.new-template .template-name{color:#000}.name-input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-input);color:var(--graphite);padding:7px 8px;font-size:14px;font-family:inherit}.import-err{color:var(--danger);font-size:14px;margin:4px 0 0}.render-progress{width:100%;accent-color:var(--ink)}.unsupported{min-height:100vh;display:grid;place-items:center;padding:20px}.unsupported-card{max-width:560px;background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:24px}.unsupported-card h1{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:.24px;line-height:1.3;color:var(--ink);margin:0 0 16px}.unsupported-card p,.unsupported-card ul{font-size:14px}.unsupported-card ul{margin:4px 0 16px;padding-left:20px;color:var(--muted)}