@font-face{font-family:LoopSystem;src:local("Arial");font-display:swap}
:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",LoopSystem,sans-serif;color:#fff;background:#090a0c;color-scheme:dark;font-synthesis:none;-webkit-text-size-adjust:100%}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{display:flex;justify-content:center;background:radial-gradient(ellipse at 50% 38%,#1b1e24 0,#090a0c 66%)}
[hidden]{display:none!important}
.viewer{--drag-y:0px;position:relative;isolation:isolate;width:100%;max-width:520px;height:100vh;height:100dvh;overflow:hidden;background:#0b0c0f;touch-action:pan-x pinch-zoom;user-select:none;-webkit-user-select:none;outline:none}
.viewer:focus-visible{outline:2px solid #c8f36b;outline-offset:-3px}
.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 80% 0,rgba(148,169,103,.08),transparent 50%),radial-gradient(ellipse at 20% 100%,rgba(77,93,104,.1),transparent 50%);pointer-events:none}
.video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;transform:translateY(var(--drag-y));transition:transform .23s cubic-bezier(.16,1,.3,1),opacity .17s ease;opacity:1;pointer-events:none}
.still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.viewer.dragging .video{transition:none}
.viewer.switching .video{opacity:.3;transform:translateY(calc(var(--direction,1)*-16px))}
.scrim{position:absolute;left:0;right:0;pointer-events:none}
.scrim-top{top:0;height:calc(110px + env(safe-area-inset-top));background:linear-gradient(#090a0cb3,transparent)}
.scrim-bottom{bottom:0;height:calc(150px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#090a0cbd 70%,#090a0ce8)}
.header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(22px + env(safe-area-inset-top)) 24px 16px;pointer-events:none}
.brand{display:flex;align-items:center;gap:7px;font-size:25px;line-height:1;font-weight:760;letter-spacing:-1.15px}
.brand-mark{width:28px;height:28px;color:#c8f36b}
.brand-dot{color:#c8f36b}
.edition{display:flex;align-items:center;gap:6px;font-size:8px;font-weight:600;letter-spacing:1.2px;color:#ffffffe0;white-space:nowrap}
.live-dot{width:4px;height:4px;border-radius:50%;background:#c8f36b;box-shadow:0 0 8px #c8f36b36}
.footer{position:absolute;bottom:0;left:0;right:0;padding:16px 24px calc(21px + env(safe-area-inset-bottom));pointer-events:none}
.clip-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.section-label{font-size:10px;font-weight:650;letter-spacing:2.3px;color:#ffffffd9}
.clip-count{display:flex;align-items:center;gap:8px;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#ffffff6e}
.clip-count strong{font-weight:600;color:#fff;font-size:14px}
.count-divider{color:#ffffff38}
.bottom-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.sound-hint{display:flex;align-items:center;gap:8px;color:#ffffffb8;font-size:11px;font-weight:450;letter-spacing:.1px}
.sound-hint svg{width:15px;height:15px;flex-shrink:0}
.loop-label{display:flex;align-items:center;gap:4px;color:#ffffff63;font-size:8px;font-weight:600;letter-spacing:1.2px}
.loop-label svg{width:14px;height:14px}
.progress{display:flex;gap:5px;width:100%;height:3px}
.progress-track{flex:1;background:#ffffff2a;overflow:hidden;border-radius:3px}
.progress-track>span{display:block;width:100%;height:100%;background:#c8f36b;transform-origin:left;transform:scaleX(0);will-change:transform}
.gesture-hint{position:absolute;bottom:calc(133px + env(safe-area-inset-bottom));left:50%;display:flex;align-items:center;gap:3px;flex-direction:column;transform:translateX(-50%);width:max-content;font-size:10px;letter-spacing:.35px;color:#ffffffe0;opacity:1;transition:opacity .5s;pointer-events:none;text-shadow:0 1px 12px #000}
.gesture-hint svg{width:21px;height:21px;animation:nudge 1.8s ease-in-out infinite}
.gesture-hint.dismissed{opacity:0}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;font-size:11px;letter-spacing:.7px;color:#ffffffa6;pointer-events:none;background:#0b0c0f66}
.loading-bars{display:flex;gap:4px;align-items:center;height:24px}
.loading-bars i{width:3px;height:12px;border-radius:3px;background:#c8f36b;animation:bars 1s ease-in-out infinite}
.loading-bars i:nth-child(2){animation-delay:.15s}.loading-bars i:nth-child(3){animation-delay:.3s}
.resume{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;width:100%;border:0;background:#06070b66;color:#fff;font:500 13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;letter-spacing:.4px}
.resume-circle{display:grid;place-items:center;width:70px;height:70px;border:1px solid #ffffff70;border-radius:50%;background:#ffffff12;backdrop-filter:blur(12px)}
.resume-circle svg{width:27px;height:27px;margin-left:-3px}
.resume:focus-visible{outline:2px solid #c8f36b;outline-offset:-5px}
.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}
.noscript{position:absolute;inset:0;display:grid;place-items:center;background:#0b0c0f;padding:28px;text-align:center;font-size:14px}
@keyframes bars{0%,100%{transform:scaleY(.6);opacity:.6}50%{transform:scaleY(1.5);opacity:1}}
@keyframes nudge{0%,100%{transform:translateY(2px);opacity:.65}50%{transform:translateY(-3px);opacity:1}}
@media(min-width:600px){.viewer{box-shadow:0 0 100px #0009;border-left:1px solid #ffffff0a;border-right:1px solid #ffffff0a}}
@media(max-width:360px){.header{padding-left:19px;padding-right:19px}.footer{padding-left:19px;padding-right:19px}.brand{font-size:23px}.edition{font-size:7px;letter-spacing:.8px}.sound-hint{font-size:10px}.loop-label{font-size:7px}}
@media(orientation:landscape) and (max-height:500px){.viewer{max-width:none}.header{padding-top:calc(13px + env(safe-area-inset-top))}.footer{padding-top:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.clip-meta{margin-bottom:8px}.bottom-row{margin-bottom:10px}.gesture-hint{bottom:100px}.scrim-bottom{height:120px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}