@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap";
.slice-viewer{--mark-sub:var(--brand-violet);--mark-key:var(--brand-violet);--mark-note:var(--state-ok);--player-h:min(60vh,640px);color:var(--ink);min-height:calc(100dvh - 52px);padding:1.5rem;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:1.5}.slice-viewer *{box-sizing:border-box}.slice-viewer.landing-demo{min-height:0;padding:0;font-size:13px}.slice-viewer.landing-demo .layout{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) minmax(15rem,20rem);gap:1rem}.slice-viewer.landing-demo .layout>.frame-grid-section{border-radius:10px;padding:14px}.slice-viewer.landing-demo .sidebar{border-radius:10px;position:relative}.slice-viewer.landing-demo .sidebar-body{position:absolute;inset:0}.slice-viewer.landing-demo .transcript-pane{padding:14px}.slice-viewer.landing-demo .pane-title{min-height:26px;margin-bottom:10px}.slice-viewer.landing-demo .frame-grid.gallery{scrollbar-width:thin;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px;max-height:480px;overflow:hidden auto}.slice-viewer.landing-demo .frame-card{border-radius:8px}.slice-viewer.landing-demo .frame-card .thumb{max-height:min(32vh,260px)}.slice-viewer.landing-demo .vp,.slice-viewer.landing-demo .vp-video{border-radius:10px;max-height:none}.slice-viewer.landing-demo .vp{aspect-ratio:16/9}.slice-viewer.landing-demo .vp-center{border-radius:14px;width:52px;height:52px}.slice-viewer.landing-demo .utterance{padding:7px 9px}@media (max-width:1023px){.slice-viewer.landing-demo .layout{grid-template-columns:1fr;grid-template-areas:"video""transcript""frames"}.slice-viewer.landing-demo .sidebar-body{position:static}}.slice-viewer .pill{background:var(--surface-muted);color:var(--ink-2);border:1px solid var(--line);text-transform:uppercase;letter-spacing:.06em;border-radius:999px;align-items:center;padding:2px 8px;font-size:12px;font-weight:500;display:inline-flex}.slice-viewer .layout{grid-template-columns:minmax(0,1fr) 21rem;grid-template-rows:var(--player-h)auto;grid-template-areas:"video transcript""frames frames";gap:1.25rem 1.5rem;display:grid}.slice-viewer .layout[data-transcript=closed]{grid-template-columns:minmax(0,1fr);grid-template-areas:"video""frames"}.slice-viewer .layout>.vp{grid-area:video}.slice-viewer .layout>.frame-grid-section{border:1px solid var(--line);background:var(--surface);border-radius:12px;grid-area:frames;min-width:0;padding:16px 20px 20px}.slice-viewer .sidebar{border:1px solid var(--line);background:var(--surface);border-radius:12px;flex-direction:column;grid-area:transcript;min-height:0;display:flex;overflow:hidden}@media (max-width:1023px){.slice-viewer .layout{grid-template-columns:1fr;grid-template-areas:"video""transcript""frames"}.slice-viewer .layout[data-transcript=closed]{grid-template-areas:"video""frames"}.slice-viewer .sidebar{max-height:360px}}.slice-viewer .vp,.slice-viewer .vp-video{max-height:var(--player-h)}.slice-viewer .vp .subtitle{z-index:2;text-align:center;color:#fff;pointer-events:none;text-shadow:0 1px 4px #000000d9;padding:6px 20px;font-size:13px;position:absolute;bottom:60px;left:0;right:0}.slice-viewer .timeline-block{margin-bottom:14px}.slice-viewer .timeline-block .notes-strip{margin-bottom:3px;position:relative}.slice-viewer .timeline-block .notes-strip .note-marker{background:color-mix(in srgb,75% var(--mark-note),transparent);cursor:pointer;border-radius:2px;height:6px;transition:background-color .12s;position:absolute}.slice-viewer .timeline-block .notes-strip .note-marker:hover{background:var(--mark-note)}.slice-viewer .timeline-block .notes-strip .note-marker.selected{background:var(--mark-note);outline:2px solid color-mix(in srgb,55% var(--mark-note),transparent);outline-offset:1px}.slice-viewer .timeline-block .rail{background:color-mix(in srgb,14% var(--mark-key),var(--surface));border:1px solid color-mix(in srgb,35% var(--mark-key),var(--line));cursor:pointer;border-radius:6px;height:22px;position:relative;overflow:hidden}.slice-viewer .timeline-block .rail .frame-block{background:color-mix(in srgb,52% var(--mark-key),var(--surface));border-right:1px solid color-mix(in srgb,16% var(--mark-key),var(--surface));position:absolute;top:0;bottom:0}.slice-viewer .timeline-block .rail .frame-block:last-child{border-right:none}.slice-viewer .timeline-block .rail .frame-block.current{background:var(--mark-key)}.slice-viewer .timeline-block .rail .drag-band{background:color-mix(in srgb,14% var(--ink),transparent);border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink);z-index:2;pointer-events:none;position:absolute;top:0;bottom:0}.slice-viewer .timeline-block .rail .playhead{background:var(--ink);z-index:3;width:2px;position:absolute;top:0;bottom:0}.slice-viewer .timeline-block .rail .playhead:before{content:"";background:var(--ink);border-radius:50%;width:8px;height:8px;position:absolute;top:0;left:-3px}.slice-viewer .timeline-block .legend{color:var(--ink-3);justify-content:space-between;margin-top:6px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px;display:flex}.slice-viewer .pane-title{justify-content:space-between;align-items:center;gap:12px;min-height:28px;margin-bottom:12px;display:flex}.slice-viewer .pane-title .title-group{align-items:center;gap:8px;display:inline-flex}.slice-viewer .pane-title .h{color:var(--ink);text-transform:uppercase;letter-spacing:.06em;font-size:14px;font-weight:600}.slice-viewer .pane-title .meta{color:var(--ink-3);font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px}.slice-viewer .pane-title .title-actions{align-items:center;gap:10px;display:inline-flex}.slice-viewer .view-toggle{border:1px solid var(--line-strong);border-radius:6px;height:32px;display:inline-flex;overflow:hidden}.slice-viewer .view-toggle button{width:32px;height:100%;color:var(--ink-3);background:0 0;border:0;justify-content:center;align-items:center;transition:color .12s,background .12s;display:inline-flex}.slice-viewer .view-toggle button+button{border-left:1px solid var(--line-strong)}.slice-viewer .view-toggle button:hover{color:var(--ink)}.slice-viewer .view-toggle button.active{background:var(--surface-muted);color:var(--ink)}.slice-viewer .export-btn{border:1px solid var(--brand-violet);background:var(--brand-violet);color:#fff;cursor:pointer;border-radius:6px;align-items:center;gap:6px;height:32px;padding:0 12px;font-family:inherit;font-size:14px;font-weight:500;transition:filter .12s,opacity .12s;display:inline-flex}.slice-viewer .export-btn:hover:not(:disabled){filter:brightness(.92)}.slice-viewer .export-btn:disabled{opacity:.5;cursor:default}.slice-viewer .pane-title .select-actions{align-items:center;gap:8px;display:inline-flex}.slice-viewer .pane-title .sel-count{color:var(--ink-2);font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px}.slice-viewer .pane-title .sel-btn{background:var(--ink);height:28px;color:var(--bg);cursor:pointer;border:none;border-radius:6px;align-items:center;gap:5px;padding:0 10px;font-family:inherit;font-size:12px;font-weight:500;display:inline-flex}.slice-viewer .pane-title .sel-btn.ghost{color:var(--ink-2);border:1px solid var(--line-strong);background:0 0}.slice-viewer .pane-title .sel-btn.ghost:hover{color:var(--ink)}.slice-viewer .frame-grid{scroll-snap-type:x proximity;scrollbar-width:thin;flex-wrap:nowrap;align-items:flex-start;gap:12px;padding-bottom:6px;display:flex;overflow:auto hidden}.slice-viewer .frame-grid.gallery{scroll-snap-type:none;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));padding-bottom:0;display:grid;overflow:visible}.slice-viewer .frame-grid.gallery .frame-card{flex:initial;scroll-snap-align:none;width:auto}.slice-viewer .frame-card{scroll-snap-align:start;background:var(--surface);cursor:pointer;border-radius:10px;flex-direction:column;flex:0 0 min(20rem,100vw - 3rem);transition:opacity .15s;display:flex;position:relative;overflow:hidden}.slice-viewer .frame-card .thumb-wrap{background:#000;justify-content:center;width:100%;display:flex;position:relative}.slice-viewer .frame-card .thumb{object-fit:contain;width:100%;height:auto;max-height:min(50vh,420px);display:block}.slice-viewer .frame-card div.thumb{aspect-ratio:16/9;background-color:var(--surface-muted)}.slice-viewer .frame-card .caption-scrim{inset-inline:0;pointer-events:none;background:linear-gradient(#0000 0%,#00000073 45%,#000000d1 100%);padding:22px 12px 8px;position:absolute;bottom:0}.slice-viewer .frame-card .caption-scrim .t{color:#ffffffd1;font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px}.slice-viewer .frame-card .frame-actions{z-index:2;opacity:0;gap:6px;transition:opacity .15s;display:inline-flex;position:absolute;top:8px;right:8px}.slice-viewer .frame-card:hover .frame-actions{opacity:1}.slice-viewer .frame-card .frame-action-btn{border:1px solid color-mix(in srgb,55% var(--line-strong),transparent);background:color-mix(in srgb,82% var(--surface),transparent);-webkit-backdrop-filter:blur(6px);width:28px;height:28px;color:var(--ink-2);border-radius:7px;justify-content:center;align-items:center;padding:0;transition:color .15s,border-color .15s;display:inline-flex}.slice-viewer .frame-card .frame-action-btn:hover:not(:disabled){color:var(--ink);border-color:var(--ink-3)}.slice-viewer .frame-card .frame-action-btn:disabled{opacity:.5}.slice-viewer .frame-card .note-badge{background:var(--mark-note);border:1.5px solid var(--surface);box-sizing:content-box;z-index:2;border-radius:999px;width:8px;height:8px;position:absolute;top:6px;left:6px}.slice-viewer .frame-card.current:after{content:"";border:2px solid var(--brand-violet);border-radius:inherit;pointer-events:none;z-index:3;position:absolute;inset:0}.slice-viewer .frame-card.in-selected-note{outline:2px solid color-mix(in srgb,70% var(--mark-note),transparent);outline-offset:-1px}.slice-viewer .frame-card.selecting-for-note{outline:2px dashed var(--ink);outline-offset:-1px;background:color-mix(in srgb,4% var(--ink),var(--surface))}.slice-viewer .note-popover{background:color-mix(in srgb,5% var(--mark-note),var(--surface));border-bottom:1px solid var(--line);flex-direction:column;flex-shrink:0;gap:10px;margin:-16px -20px 12px;padding:14px;display:flex;position:relative}.slice-viewer .note-popover .pop-meta{color:var(--ink-3);align-items:center;gap:8px;font-size:12px;display:flex}.slice-viewer .note-popover .pop-meta .pill{background:color-mix(in srgb,14% var(--mark-note),var(--surface));color:var(--mark-note);border-color:color-mix(in srgb,40% var(--mark-note),transparent)}.slice-viewer .note-popover textarea{border:1px solid var(--line-strong);width:100%;min-height:80px;color:var(--ink);background:var(--surface);resize:vertical;border-radius:8px;outline:none;padding:10px;font-family:inherit;font-size:13px;line-height:1.55}.slice-viewer .note-popover textarea:focus{border-color:var(--ink)}.slice-viewer .note-popover textarea:disabled{opacity:.6}.slice-viewer .note-popover .pop-error{color:var(--state-error);margin:0;font-size:12px}.slice-viewer .note-popover .pop-actions{justify-content:flex-end;gap:8px;display:flex}.slice-viewer .sidebar-tabs{border-bottom:1px solid var(--line);background:var(--surface);flex-shrink:0;align-items:stretch;display:flex}.slice-viewer .sidebar-tabs .tab{cursor:pointer;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-family:inherit;font-size:12px;font-weight:600;transition:color .15s;display:inline-flex;position:relative}.slice-viewer .sidebar-tabs .tab:hover:not(:disabled):not(.active){color:var(--ink-2)}.slice-viewer .sidebar-tabs .tab.active{color:var(--ink)}.slice-viewer .sidebar-tabs .tab.active:after{content:"";background:var(--ink);height:2px;position:absolute;bottom:-1px;left:0;right:0}.slice-viewer .sidebar-tabs .tab:disabled{opacity:.35;cursor:default}.slice-viewer .sidebar-tabs .tab .count{background:var(--surface-muted);min-width:18px;height:16px;color:var(--ink-2);letter-spacing:0;text-transform:none;border-radius:999px;justify-content:center;align-items:center;padding:0 5px;font-size:12px;font-weight:600;display:inline-flex}.slice-viewer .sidebar-tabs .tab.active .count{background:color-mix(in srgb,10% var(--ink),var(--surface-muted));color:var(--ink)}.slice-viewer .sidebar-body{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.slice-viewer .transcript-pane,.slice-viewer .notes-pane{flex-direction:column;height:100%;min-height:0;padding:16px 20px 20px;display:flex}.slice-viewer .transcript-pane .pane-title,.slice-viewer .notes-pane .pane-title{flex-shrink:0}.slice-viewer .transcript-list,.slice-viewer .notes-pane .notes-list{flex:1;min-height:0;overflow-y:auto}.slice-viewer .transcript-list{flex-direction:column;display:flex}.slice-viewer .utterance{cursor:pointer;border-radius:6px;flex-direction:column;gap:3px;padding:8px 10px;display:flex}.slice-viewer .utterance:hover{background:var(--surface-muted)}.slice-viewer .utterance.current{background:color-mix(in srgb,10% var(--mark-sub),var(--surface))}.slice-viewer .utterance .t{color:var(--ink-3);font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px}.slice-viewer .utterance.current .t{color:var(--mark-sub);font-weight:500}.slice-viewer .utterance .text{color:var(--ink);font-size:13px;line-height:1.55}.slice-viewer .notes-list{flex-direction:column;display:flex}.slice-viewer .note-item{cursor:pointer;border-radius:6px;flex-direction:column;gap:4px;padding:10px 32px 10px 10px;display:flex;position:relative}.slice-viewer .note-item:hover{background:var(--surface-muted)}.slice-viewer .note-item.selected{background:color-mix(in srgb,9% var(--mark-note),var(--surface))}.slice-viewer .note-item .note-head{align-items:center;gap:8px;display:flex}.slice-viewer .note-item .dot{background:var(--mark-note);border-radius:999px;flex-shrink:0;width:8px;height:8px}.slice-viewer .note-item.range .dot{border-radius:2px;width:12px;height:4px}.slice-viewer .note-item .time{color:var(--ink-3);font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px}.slice-viewer .note-item.selected .time{color:var(--ink);font-weight:500}.slice-viewer .note-item .text{color:var(--ink);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.55;display:-webkit-box;overflow:hidden}.slice-viewer .note-item.selected .text{-webkit-line-clamp:unset}.slice-viewer .note-item .delete-btn{width:22px;height:22px;color:var(--ink-3);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;padding:0;transition:opacity .15s,color .15s,background-color .15s;display:inline-flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.slice-viewer .note-item:hover .delete-btn{opacity:1}.slice-viewer .note-item .delete-btn:hover{color:var(--state-error);background:color-mix(in srgb,10% var(--state-error),transparent)}