:root{color-scheme:dark;--ink: #f1f3ed;--muted: #98a39c;--line: rgba(255, 255, 255, .1);--panel: rgba(25, 29, 27, .94);--panel-2: #202522;--accent: #d8ff62;--accent-ink: #11150b;--warm: #ffae68}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 77% 7%,rgba(118,148,102,.2),transparent 30rem),linear-gradient(145deg,#0e1110,#171b18 58%,#0d100f);font:14px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select{font:inherit}button,select{color:inherit}.animation-lab{width:min(1800px,100%);margin:0 auto;padding:28px}.lab-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin-bottom:22px}.brand{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--line);border-radius:50%;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.12em;text-decoration:none}h1,h2,h3,p{margin:0}h1{font-size:clamp(25px,3vw,42px);line-height:1;letter-spacing:-.045em}h2{font-size:18px;letter-spacing:-.02em}h3{font-size:15px}.eyebrow{margin-bottom:4px;color:var(--accent);font-size:10px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}.snapshot{align-self:end;max-width:300px;color:var(--muted);font-size:12px;text-align:right}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}.metrics article{display:flex;align-items:baseline;gap:10px;min-height:70px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#1c211eb8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.metrics strong{color:var(--accent);font-size:28px;line-height:1;letter-spacing:-.04em}.metrics span{color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(280px,370px) minmax(0,1fr);min-height:calc(100vh - 186px);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);box-shadow:0 35px 80px #00000052}.library-panel{display:flex;min-height:0;flex-direction:column;border-right:1px solid var(--line)}.panel-heading,.viewer-toolbar,.clip-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px}.result-count{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:10px;background:var(--panel-2);color:var(--muted);font-size:12px}.search-field{padding:0 14px 12px}input[type=search]{width:100%;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;outline:none;color:var(--ink);background:#121614}input[type=search]:focus{border-color:#d8ff628c;box-shadow:0 0 0 3px #d8ff6214}.filters{display:flex;gap:6px;padding:0 14px 14px;overflow-x:auto;scrollbar-width:none}.filter{flex:0 0 auto;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer}.filter.active{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.source-list{min-height:0;overflow-y:auto;border-top:1px solid var(--line)}.source-row{width:100%;padding:13px 15px;border:0;border-bottom:1px solid rgba(255,255,255,.065);color:inherit;background:transparent;text-align:left;cursor:pointer}.source-row:hover{background:#ffffff09}.source-row.active{background:linear-gradient(90deg,rgba(216,255,98,.15),transparent);box-shadow:inset 3px 0 var(--accent)}.source-name{display:block;margin-bottom:4px;overflow:hidden;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.source-detail{display:flex;gap:8px;color:var(--muted);font-size:11px}.source-detail span:last-child{margin-left:auto}.empty-list{padding:28px 18px;color:var(--muted);text-align:center}.viewer-panel{display:grid;min-width:0;grid-template-rows:auto minmax(390px,1fr) auto minmax(175px,30vh)}.viewer-toolbar{border-bottom:1px solid var(--line)}#source-meta{margin-top:5px;color:var(--muted);font-size:12px}.viewer-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.badge{padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.badge.warning{border-color:#ffae6861;color:var(--warm)}.stage{position:relative;min-height:390px;overflow:hidden;background:radial-gradient(circle at 50% 37%,#303933,#171b19 58%,#111412)}#animation-canvas{display:block;width:100%;height:100%;touch-action:none}.stage-message{position:absolute;inset:50% auto auto 50%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;transform:translate(-50%,-50%);color:var(--muted);background:#0d100fc7;pointer-events:none}.stage-message:empty{display:none}.transport{display:grid;grid-template-columns:auto minmax(120px,1fr) auto auto;align-items:center;gap:12px;padding:10px 15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#171b19}.play-button{min-width:70px;padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);cursor:pointer}.play-button:disabled{cursor:default;opacity:.45}.timeline input{width:100%;accent-color:var(--accent)}.timecode,.speed-control{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.speed-control{display:flex;align-items:center;gap:7px}.speed-control select{padding:5px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}.clip-panel{min-height:0;overflow:hidden;background:#151917}.clip-heading{padding-bottom:11px}.clip-search{width:min(220px,42%)}.clip-grid{display:flex;align-content:flex-start;flex-wrap:wrap;gap:7px;height:calc(100% - 70px);padding:0 18px 18px;overflow-y:auto}.clip-button{padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:#cbd1cc;font-size:11px;cursor:pointer}.clip-button:hover{border-color:#d8ff6273}.clip-button.active{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.animation-lab{padding:16px}.metrics{grid-template-columns:repeat(2,1fr)}.workspace{grid-template-columns:1fr}.library-panel{max-height:390px;border-right:0;border-bottom:1px solid var(--line)}.viewer-panel{grid-template-rows:auto minmax(350px,55vh) auto 250px}}@media(max-width:560px){.lab-header{grid-template-columns:auto 1fr}.snapshot{display:none}.metrics article{display:block;min-height:64px}.metrics span{display:block;margin-top:5px;font-size:11px}.viewer-toolbar{align-items:flex-start}.viewer-badges{display:none}.transport{grid-template-columns:auto 1fr}.timecode,.speed-control{justify-self:end}}