:root{color-scheme:dark;--bg:#070d13;--panel:#0b151e;--line:rgba(150,185,204,.15);--cyan:#6dcfc9;--text:#e9f1f5;--muted:#8195a4;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 0%,#173e4640,transparent 55%),var(--bg)}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}button,a,select,input{touch-action:manipulation}button,select{border:1px solid var(--line);background:#0d1b25;border-radius:7px}button{cursor:pointer}button:hover,button:focus-visible,select:focus-visible,.download:focus-visible{border-color:var(--cyan);outline:none}button:disabled{opacity:.45;cursor:wait}#app{height:100dvh;min-height:580px;display:flex;flex-direction:column;padding:0 30px}.topbar{height:58px;flex-shrink:0;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.wordmark{font-weight:800;font-size:23px;letter-spacing:.025em}.topbar>span{font-size:9px;letter-spacing:.19em;color:var(--muted)}.back{margin-left:auto;font-size:11px;color:var(--muted)}.back:hover{color:var(--cyan)}.toolbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:14px}.eyebrow{font-size:9px;letter-spacing:.19em;font-weight:650;color:var(--cyan)}h1{font-size:20px;font-weight:500;line-height:1.35;letter-spacing:-.035em;margin:5px 0 0}h1 em{font-style:normal;color:var(--cyan)}.download{font-size:11px;border:1px solid var(--line);padding:10px 13px;border-radius:7px;white-space:nowrap}.download:hover{border-color:var(--cyan);background:#10232c}.download span{color:var(--cyan);padding-left:14px}#workspace{display:grid;grid-template-columns:216px minmax(0,1fr);gap:16px;flex:1;min-height:0;padding-bottom:14px}.library{display:flex;flex-direction:column;min-height:0;overflow:auto;scrollbar-width:thin}.library-heading{display:flex;justify-content:space-between;align-items:center;padding:4px 0 15px}.library-count{font-size:11px;color:#49606e;font-variant-numeric:tabular-nums}#samples{display:flex;flex-direction:column;gap:8px}.sample{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 12px;width:100%;background:#0a141d;transition:border-color .15s,background .15s}.sample[aria-pressed=true]{border-color:#6dcfc966;background:linear-gradient(110deg,#153a405c,#0c1822);box-shadow:inset 2px 0 0 var(--cyan)}.sample-number{font-size:13px;font-variant-numeric:tabular-nums;color:#6f8e9a}.sample[aria-pressed=true] .sample-number{color:var(--cyan)}.sample-copy{display:flex;flex-direction:column;gap:6px}.sample-title{font-size:12px;font-weight:500}.sample-meta{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.sample-indicator{margin-left:auto;width:5px;height:5px;border-radius:50%;background:#2b414b;flex-shrink:0}.sample[aria-pressed=true] .sample-indicator{background:var(--cyan);box-shadow:0 0 12px #6dcfc944}.source-note{margin-top:auto;padding:22px 1px 3px}.small-label{font-size:8px;letter-spacing:.16em;color:#637e8d}.source-note p{font-size:11px;line-height:1.8;color:#97a9b6;margin:8px 0 0}.source-divider{height:1px;background:var(--line);margin:17px 0}dl{margin:10px 0 0;display:flex;justify-content:space-between;gap:8px}dl div{display:flex;flex-direction:column;gap:6px}dt{font-size:9px;color:#6b8393}dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums;color:#becfd9}#viewport{position:relative;min-height:0;min-width:0;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:#081019;outline:none}#viewport:focus-visible{border-color:#6dcfc966}#viewport canvas{display:block;touch-action:none}.viewport-heading{position:absolute;top:20px;left:20px;z-index:2;display:flex;flex-direction:column;gap:8px;pointer-events:none}.viewport-heading>span:last-child{font-size:10px;color:#7c94a4}.view-controls{position:absolute;top:15px;right:15px;z-index:3;display:flex;gap:6px}.view-controls button{height:30px;font-size:10px;padding:0 10px;background:#0a1620cc;backdrop-filter:blur(10px)}.view-controls button[aria-pressed=true]{color:#a8ded9;border-color:#335553}.viewport-footer{position:absolute;bottom:17px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;z-index:2;pointer-events:none}.legend{display:flex;gap:14px;color:#8fa6b4;font-size:9px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:4px;height:4px;border-radius:50%;display:inline-block}.legend .left{background:#6dcfc9}.legend .center{background:#b4e5dd}.legend .right{background:#dbe9fa}.orbit-hint{font-size:9px;color:#5d788a}#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;background:#071018e8;z-index:5;font-size:12px;color:#9eb7c4}#loading[hidden]{display:none}#retry{padding:9px 14px}.spinner{width:30px;height:30px;border:2px solid #233b45;border-top-color:var(--cyan);border-radius:50%;animation:spin 1s linear infinite}#loading.error .spinner{display:none}@keyframes spin{to{transform:rotate(360deg)}}#playback{flex-shrink:0;min-height:72px;display:flex;align-items:center;gap:20px;border-top:1px solid var(--line)}.play{height:42px;width:42px;flex-shrink:0;background:var(--cyan);border-color:var(--cyan);color:#07252a;display:grid;place-items:center}.play svg{width:20px;height:20px;fill:currentColor}.timeline{flex:1;min-width:50px;padding-top:6px}#timeline{width:100%;margin:0;accent-color:var(--cyan);height:16px;cursor:pointer}.timeline-caption{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#688697;margin-top:5px;white-space:nowrap}#status{overflow:hidden;text-overflow:ellipsis}.time{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#c5d9e1}.time-total{font-size:11px;color:#6f8797}.speed-label{display:flex;align-items:center;gap:8px;font-size:9px;color:#7993a3}.speed-label select{height:32px;min-width:63px;padding:0 8px;font-size:11px;color:#c4d5de}.embedded #app{padding:0 18px;min-height:0}.embedded .topbar{display:none}.embedded .toolbar{padding:10px 0}.embedded h1{font-size:17px;margin-top:4px}.embedded .toolbar .eyebrow{font-size:8px}.embedded #workspace{gap:14px}.embedded #playback{min-height:64px}.embedded .source-note{padding-top:13px}.embedded .source-divider{margin:13px 0}
@media(max-width:950px){#app{padding:0 18px}#workspace{grid-template-columns:190px minmax(0,1fr)}.sample{padding:13px 10px;gap:9px}.sample-title{font-size:11px}.view-controls{top:51px;left:17px;right:auto}.viewport-heading{top:17px;left:17px;flex-direction:row;align-items:center;gap:12px}.source-note p{font-size:10px}#playback{gap:14px}.speed-label>span{display:none}}
@media(max-width:700px){#app,.embedded #app{padding:0 14px;min-height:580px}.topbar{height:47px;gap:14px}.wordmark{font-size:21px}.topbar>span{display:none}.back{font-size:10px}.toolbar,.embedded .toolbar{padding:12px 0}h1,.embedded h1{font-size:17px}.download{font-size:10px;padding:9px 10px}.download span{padding-left:6px}#workspace{display:flex;flex-direction:column;gap:10px;padding-bottom:12px}.library{flex-shrink:0;overflow:visible}.library-heading,.source-note{display:none}#samples{flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:thin}.sample{flex:0 0 calc((100% - 12px)/3);min-width:112px;display:block;position:relative;padding:10px 8px}.sample-number{font-size:10px;position:absolute;top:11px;left:9px}.sample-copy{padding-left:21px;gap:5px}.sample-title{font-size:10px;white-space:nowrap}.sample-meta{font-size:9px}.sample-indicator{display:none}#viewport{flex:1;min-height:270px}.viewport-heading{gap:8px}.viewport-heading .eyebrow{font-size:8px}.viewport-heading>span:last-child{font-size:9px}.view-controls{gap:5px;top:46px;left:14px}.view-controls button{height:28px;font-size:9px;padding:0 8px}.viewport-footer{left:15px;right:15px;bottom:15px}.legend{gap:10px;font-size:8px}.orbit-hint{font-size:8px;width:102px;text-align:right;line-height:1.6}#playback,.embedded #playback{min-height:82px;gap:11px;flex-wrap:wrap;position:relative;padding:10px 0 26px}.play{height:37px;width:37px}.timeline{padding-top:3px}.timeline-caption{font-size:8px;gap:5px}#status{max-width:94px}#frame-info{font-size:8px}.time{position:absolute;right:0;bottom:9px;font-size:11px}.time-total{font-size:9px}.speed-label select{height:30px;min-width:52px;padding:0 5px;font-size:10px}.timeline-caption{position:absolute;left:48px;right:62px;margin-top:5px}.timeline{margin-bottom:5px}.speed-label{margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.sample{transition:none}}

.downloads{display:flex;gap:7px;align-items:center}.sample-copy{min-width:0}.sample-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.toolbar{gap:9px}.downloads{gap:5px}.download{padding:8px 8px}.download span{padding-left:3px}.toolbar h1{font-size:16px}}

.library{overflow:hidden}#samples{min-height:0;flex:1;overflow-y:auto;scrollbar-width:thin}.sample{flex-shrink:0}.source-note{flex-shrink:0}.library.compact .source-note{padding-top:14px}.library.compact .source-note>.small-label:first-child,.library.compact .source-note>p,.library.compact .source-note>.source-divider{display:none}
@media(max-width:700px){#samples{overflow-y:hidden;flex:initial}.library{overflow:visible}}