.library{gap:clamp(14px,2vw,18px);display:grid}.libraryPanel{gap:clamp(12px,1.6vw,14px);min-width:0;display:grid}.libraryPanel.is-entering{animation:.25s both panelSlideIn}.libraryPanel.is-leaving{animation:.2s both panelSlideOut;display:grid!important}.libraryDivider{opacity:.8;background:linear-gradient(90deg,#6778a800,#6778a899,#6778a800);width:100%;height:1px}.panelHeader{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;display:flex}.panelHint{color:#e0ebffa6;letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:6px;font-size:.75rem;display:inline-flex}.topRow{top:var(--top-row-sticky-top);z-index:9;backdrop-filter:blur(12px);box-shadow:var(--shadow-soft);background:#080c18d9;border:1px solid #6778a866;border-radius:16px;flex-direction:column;gap:0;margin:8px 0 clamp(12px,2vw,14px);display:flex;position:sticky;overflow:hidden}.topRow-nav{flex-wrap:wrap;align-items:center;gap:clamp(6px,1vw,8px);padding:clamp(8px,1.5vw,10px) clamp(10px,1.8vw,12px);display:flex}.topRow-filters{background:#04081266;border-top:1px solid #6778a833;flex-wrap:wrap;align-items:center;gap:clamp(6px,1vw,8px);padding:clamp(8px,1.2vw,9px) clamp(10px,1.8vw,12px);display:flex}.topRow-filterIcon{color:#e0ebff59;flex-shrink:0;font-size:.9rem}.btn{appearance:none;min-height:36px;color:var(--text);font-family:var(--font-body,"Rajdhani", "Segoe UI", sans-serif), sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#47ff9a2e,#54b9ff1f);border:1px solid #6778a873;border-radius:12px;max-width:100%;padding:0 14px;font-size:.8rem;font-weight:700;transition:transform .16s,border-color .16s,box-shadow .16s;position:relative;overflow:hidden}.btn:after{content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,#54b9ff73,#0000 70%);border-radius:50%;position:absolute;inset:-40%;transform:scale(.2)}.btn:hover{box-shadow:var(--glow);border-color:#47ff9ab3;transform:translateY(-1px)}.btn:active{transform:translateY(1px)scale(.98)}.btn:active:after{animation:.6s btnRipple}.btn:focus-visible{outline:none;box-shadow:0 0 0 2px #54b9ff59}.btn--primary{color:#ffd166f2;text-shadow:0 0 12px #ffd16666;background:linear-gradient(135deg,#ffd1664d,#ff6bd633);border-color:#ffd16699}.btn--shuffle{color:#e0b4fff2;text-shadow:0 0 10px #e060ff59;background:linear-gradient(135deg,#e060ff38,#8c50ff24);border-color:#e060ff80}.btn--shuffle:hover{border-color:#e060ffbf;box-shadow:0 0 16px #e060ff4d}.btn.is-copied{background:linear-gradient(135deg,#47ff9a4d,#47ff9a1f);border-color:#47ff9a99}.btn.is-copied:after{content:" ✓";font-weight:700}.clipControls{flex:none;align-items:center;gap:6px;min-width:0;display:inline-flex}.clipControls--search{flex:999 1 var(--search-control-min-width);min-width:0}.controlLabel{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;align-items:center;gap:6px;font-size:.7rem;font-weight:700;display:inline-flex}.select,.textInput{appearance:none;min-height:34px;color:var(--text);font-family:var(--font-body,"Rajdhani", "Segoe UI", sans-serif), sans-serif;letter-spacing:.04em;background:linear-gradient(135deg,#080c18f2,#0c1224d9) 0 0/200% 200%;border:1px solid #6778a873;border-radius:12px;padding:0 30px 0 12px;font-size:.78rem;font-weight:600;transition:border-color .2s,box-shadow .2s}.select{background-image:linear-gradient(135deg,#080c18f2,#0c1224d9),linear-gradient(45deg,#0000 50%,#47ff9ab3 50%),linear-gradient(135deg,#47ff9ab3 50%,#0000 50%);background-position:0 0,calc(100% - 16px) calc(50% - 2px),calc(100% - 12px) calc(50% - 2px);background-repeat:no-repeat;background-size:100% 100%,4px 4px,4px 4px}.select option{background:var(--bg-2);color:var(--text);font-weight:600}.textInput{width:min(320px,100%)}.topRow-filters .select{flex:1 1 var(--control-min-width);min-width:min(100%, var(--control-min-width))}.topRow-filters .textInput{width:100%;min-width:0}.select--compact{padding-right:26px}.textInput::placeholder{color:#99a9c9bf}.select:hover,.textInput:hover{border-color:#47ff9a99}.select:focus-visible,.textInput:focus-visible{border-color:#47ff9ab3;outline:none;animation:2.4s infinite controlShift;box-shadow:0 0 0 2px #47ff9a40}.albumMeta{flex-wrap:wrap;flex:1 1 0;align-items:center;gap:4px 8px;min-width:0;display:flex}.albumMetaDot{background:#e0ebff4d;border-radius:50%;flex-shrink:0;width:3px;height:3px}#albumTitle{letter-spacing:.02em;white-space:nowrap;text-overflow:ellipsis;flex:12rem;min-width:0;font-size:.92rem;font-weight:700;overflow:hidden}.albumCount{letter-spacing:.1em;text-transform:uppercase;color:#e0ebff8c;white-space:nowrap;background:#6778a81a;border:1px solid #6778a859;border-radius:999px;flex-shrink:0;padding:3px 8px;font-size:.62rem;font-weight:700}.mediaGrid{grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--card-grid-min)), 1fr));gap:clamp(12px,2vw,18px);display:grid}#albumsGrid{grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--card-grid-min)), 1fr))}#clipsGrid{--clip-card-min:var(--clip-card-min-md);grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--clip-card-min)), 1fr))}#clipsGrid.size-sm{--clip-card-min:var(--clip-card-min-sm)}#clipsGrid.size-md{--clip-card-min:var(--clip-card-min-md)}#clipsGrid.size-lg{--clip-card-min:var(--clip-card-min-lg)}.mediaCard{content-visibility:auto;contain-intrinsic-size:320px 240px;--raise:0px;--enter-y:20px;--stagger:0;--mx:50%;--my:30%;border-radius:calc(var(--radius) - 2px);text-align:left;min-width:0;color:inherit;cursor:pointer;background:radial-gradient(circle at var(--mx,50%) var(--my,30%), #54b9ff2e, #47ff9a0f 45%, transparent 65%), var(--card);opacity:0;transform:translateY(calc(var(--enter-y) + var(--raise)));transform-style:preserve-3d;perspective:1200px;box-shadow:var(--shadow-soft);transition:opacity .55s cubic-bezier(.23,1,.32,1),transform .55s cubic-bezier(.23,1,.32,1),border-color .3s,box-shadow .35s,background .35s;transition-delay:calc(var(--stagger) * 30ms);will-change:transform;border:1px solid #6778a866;padding:0;position:relative;overflow:hidden}.clipSentinel{width:100%;height:1px}.clipLoadIndicator{color:#e0ebffc7;letter-spacing:.08em;text-transform:uppercase;text-align:center;opacity:0;border:1px dashed #47ff9a73;border-radius:999px;margin:18px 0 0;padding:12px 16px;font-size:.82rem;font-weight:600;transition:opacity .2s,transform .2s;transform:translateY(6px)}.clipLoadIndicator.is-visible{opacity:1;transform:translateY(0)}.clipEmptyState{border-radius:calc(var(--radius) - 2px);text-align:center;background:radial-gradient(circle at 50% 0,#3dc8ff24,#0000 55%),#080c18b3;border:1px dashed #54b9ff57;place-items:center;gap:10px;margin-top:20px;padding:28px 20px;display:grid}.clipEmptyStateTitle{font-family:var(--font-display,"Oxanium", sans-serif);letter-spacing:.08em;text-transform:uppercase;font-size:1rem;font-weight:700}.clipEmptyStateText{color:#e0ebffbd;max-width:44ch;font-size:.92rem;line-height:1.5}.mediaCard:before,.mediaCard:after{content:"";pointer-events:none;position:absolute;inset:0}.mediaCard:before{opacity:.9;mix-blend-mode:screen;background:linear-gradient(135deg,#47ff9a24,#54b9ff1f,#ff6bd60f 55%,#0000 75%);transition:opacity .3s}.mediaCard:after{opacity:0;background:linear-gradient(#ffffff0a 12%,#0a1020eb 92%);transition:opacity .2s}.mediaCard.is-visible{opacity:1;--enter-y:0px;animation:.5s cubic-bezier(.23,1,.32,1) both cardReveal;animation-delay:calc(var(--stagger) * 30ms)}.mediaCard:hover{--raise:-6px;transform:translateY(calc(var(--enter-y) + var(--raise))) rotateX(2deg) rotateY(-2deg) scale(1.03);border-color:#00ffaab3;box-shadow:0 0 0 1px #00ffaa26,0 0 20px #00ffaa4d,0 0 40px #3dc8ff33,0 24px 60px #03060ebf}.mediaCard:hover:after{opacity:1}.mediaCard:focus-visible{box-shadow:0 0 0 2px #47ff9a4d, var(--glow);border-color:#47ff9acc;outline:none}.mediaThumb{aspect-ratio:16/9;background:radial-gradient(circle at 30% 20%,#54b9ff40,#0000 55%),#060a16f2;position:relative;overflow:hidden}.mediaThumb:before{content:"";pointer-events:none;z-index:1;background:linear-gradient(#060a16d9,#060a1633),radial-gradient(470px 240px at -8% 0,#47ff9a4d,#0000 68%);position:absolute;inset:0}.mediaThumb:after{content:"";opacity:0;z-index:2;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(115deg,#0000 30%,#00ffaa40 45%,#3dc8ff4d 50%,#00ffaa40 55%,#0000 70%);position:absolute;inset:-40% -60%;transform:translate(-140%)skew(-15deg)}.mediaCard:hover .mediaThumb:after{animation:1s thumbSweep}.mediaThumbImage{object-fit:cover;width:100%;height:100%;transition:transform .4s cubic-bezier(.23,1,.32,1),filter .3s;display:block}.mediaCard:hover .mediaThumbImage{filter:saturate(1.15)brightness(1.1)contrast(1.04);transform:scale(1.06)}.mediaThumbBadge{z-index:2;letter-spacing:.12em;text-transform:uppercase;color:#ffd166f2;background:#ffd16633;border:1px solid #ffd1668c;border-radius:999px;padding:5px 10px;font-size:.75rem;font-weight:700;position:absolute;top:10px;left:10px}.mediaMeta{z-index:1;padding:clamp(12px,1.8vw,14px) clamp(12px,1.8vw,14px) clamp(14px,2vw,16px);position:relative}.mediaMeta:before{letter-spacing:.16em;text-transform:uppercase;color:#47ff9af2;border:1px solid #47ff9a80;border-radius:999px;justify-content:center;align-items:center;margin-bottom:8px;padding:4px 10px;font-size:.68rem;font-weight:700;display:inline-flex}.mediaCard--album .mediaMeta:before{content:"Album";background:#47ff9a29}.mediaCard--clip .mediaMeta:before{content:"Clip";color:#ff6bd6f2;background:#ff6bd633;border-color:#ff6bd68c}.mediaTitle{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:1rem;font-weight:700;line-height:1.34;display:-webkit-box;overflow:hidden}.mediaSubtitle{color:#e0ebffb8;margin-top:7px;font-size:.84rem;font-weight:500}#viewer{--viewer-overlay-padding:24px;--viewer-shell-gap:16px;--viewer-panel-width:clamp(280px, 16vw, 340px);--viewer-nav-btn-size:44px;--viewer-nav-gap:10px;--viewer-frame-max-width:calc(100vw - var(--viewer-overlay-padding) - var(--viewer-panel-width) - var(--viewer-shell-gap) - (var(--viewer-nav-btn-size) * 2) - (var(--viewer-nav-gap) * 2));z-index:9999;backdrop-filter:blur(20px);background:radial-gradient(800px 500px at -5% -5%,#00ffaa2e,#0000 60%),radial-gradient(600px 400px at 105% 5%,#3dc8ff29,#0000 55%),radial-gradient(500px 350px at 50% 105%,#e060ff1a,#0000 60%),#03050ceb;justify-content:center;align-items:center;padding:12px;display:flex;position:fixed;inset:0}#viewer:not(.is-hidden){animation:.25s fadeIn}#viewer.is-closing{animation:.2s reverse forwards fadeIn}#viewerInner{width:fit-content;max-width:calc(100vw - var(--viewer-overlay-padding));grid-template-columns:max-content var(--viewer-panel-width);gap:var(--viewer-shell-gap);pointer-events:none;justify-content:center;align-items:center;margin-inline:auto;display:grid}.viewerResizeHandle{cursor:nwse-resize;pointer-events:auto;user-select:none;touch-action:none;z-index:3;color:#6778a880;background:#060c1a99;border-radius:14px 0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.8rem;transition:color .2s,background .2s,box-shadow .2s;display:flex;position:absolute;bottom:0;right:0}.viewerResizeHandle:hover,.viewerResizeHandle.is-dragging{color:#00ffaaf2;background:#060c1ad9;box-shadow:0 0 12px #00ffaa40}body.is-resizing-viewer{user-select:none;cursor:nwse-resize!important}#viewer:not(.is-hidden) #viewerInner{animation:.35s cubic-bezier(.23,1,.32,1) popIn}#viewer.is-closing #viewerInner{animation:.2s forwards viewerOut}#viewer:not(.is-hidden) #viewerFrameWrap{animation:.5s cubic-bezier(.23,1,.32,1) viewerFocus}#viewer:not(.is-hidden) #viewerInfo{animation:.5s cubic-bezier(.23,1,.32,1) 80ms viewerFocus}#viewerFrameWrap,#viewerFrame,#viewerInfo{pointer-events:auto}.viewerNavWrap{justify-content:center;align-items:center;gap:var(--viewer-nav-gap);pointer-events:none;width:fit-content;min-width:0;display:flex}.viewerNavWrap>*{pointer-events:auto}.viewerNavBtn{appearance:none;width:var(--viewer-nav-btn-size);height:var(--viewer-nav-btn-size);backdrop-filter:blur(10px);color:var(--text);cursor:pointer;background:#060c1ad9;border:1px solid #5a6ea059;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.4rem;transition:border-color .2s,box-shadow .2s,opacity .2s,transform .2s cubic-bezier(.23,1,.32,1),color .2s;display:flex}.viewerNavBtn:hover{color:#00ffaaf2;border-color:#00ffaab3;transform:scale(1.1);box-shadow:0 0 14px #00ffaa4d,0 0 32px #00ffaa1a}.viewerNavBtn:active{transform:scale(.92)}.viewerNavBtn:focus-visible{border-color:#00ffaab3;outline:none;box-shadow:0 0 0 3px #3dc8ff38,0 0 18px #00ffaa29}.viewerNavBtn:disabled{opacity:.2;cursor:default;pointer-events:none}.viewerPosition{text-align:center;font-family:var(--font-display,"Oxanium", sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#e0ebff80;border-bottom:1px solid #6778a82e;padding:8px 16px;font-size:.72rem;font-weight:600}#viewerFrameWrap{--viewer-aspect-ratio:16 / 9;width:min(var(--viewer-width,var(--viewer-frame-max-width)), calc((100vh - 24px) * var(--viewer-aspect-ratio,16 / 9)));max-width:100%;aspect-ratio:var(--viewer-aspect-ratio,16 / 9);background:#000;border:1px solid #00ffaa59;border-radius:14px;margin-inline:auto;position:relative;overflow:hidden;box-shadow:0 0 0 1px #3dc8ff1f,0 24px 72px #02040cd9,0 0 40px #00ffaa1a}body.viewer-open #viewerFrameWrap{animation:4s ease-in-out infinite glowPulse}#viewerFrame{width:100%;height:100%;transform:scale(var(--viewer-frame-scale,1));transform-origin:50%;background:#000;border:0;border-radius:0;transition:transform .22s}#viewerLoading{color:#e0ebffe6;text-transform:uppercase;letter-spacing:.14em;background:radial-gradient(circle,#00ffaa0a,#0000 60%),radial-gradient(circle,#0a1020bf,#060812eb);flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:.7rem;display:flex;position:absolute;inset:0;overflow:hidden}#viewerLoading:after{content:"";mix-blend-mode:screen;opacity:.7;background:linear-gradient(115deg,#0000 25%,#0fa3 40%,#3dc8ff40 50%,#0fa3 60%,#0000 75%) 0 0/300% 100%;animation:1.8s linear infinite loadingSweep;position:absolute;inset:-40% -60%}.viewerLoadingSpinner{border:2px solid #00ffaae6;border-color:#00ffaae6 #3dc8ff66 #e0ebff26 #e0ebff26;border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin;box-shadow:0 0 16px #00ffaa59,inset 0 0 8px #00ffaa1a}#viewerInfo{width:min(100%, var(--viewer-panel-width));backdrop-filter:blur(16px);box-shadow:0 0 0 1px #3dc8ff14, var(--shadow-soft);background:linear-gradient(160deg,#060c1afa,#0a1020f2);border:1px solid #00ffaa38;border-radius:16px;flex-direction:column;justify-self:end;max-height:calc(100vh - 24px);display:flex;position:relative;overflow:hidden auto}#viewerInfo:before{content:"";background:linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--accent-2) 50%, var(--accent-3) 80%, transparent 100%);opacity:.85;pointer-events:none;z-index:2;background-size:200% 100%;height:2px;animation:4s linear infinite borderTrace;position:absolute;inset:0 0 auto}#viewerInfo:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(at 0 0,#00ffaa14,#0000 55%);position:absolute;inset:0}.viewerConsole{z-index:1;flex-direction:column;display:flex;position:relative}.viewerHeader{border-bottom:1px solid #6778a82e;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px 12px;display:flex}.viewerHeaderKicker{color:var(--accent);letter-spacing:.2em;text-transform:uppercase;background:#00ffaa1f;border:1px solid #00ffaa80;border-radius:999px;align-items:center;gap:6px;padding:3px 9px;font-size:.65rem;font-weight:700;display:inline-flex}.viewerStatus{color:#e0ebffa6;letter-spacing:.16em;text-transform:uppercase;background:#3dc8ff12;border:1px solid #3dc8ff4d;border-radius:999px;align-items:center;gap:5px;padding:3px 9px;font-size:.62rem;display:inline-flex}#viewerName{background:#00ffaa0a;border-bottom:1px solid #6778a82e;flex-direction:column;gap:5px;padding:14px 16px;display:flex}#viewerName .viewerStatLabel{letter-spacing:.18em;text-transform:uppercase;color:var(--accent);opacity:.8;font-size:.62rem}#viewerName .viewerStatValue{font-family:var(--font-display,"Oxanium", sans-serif);color:var(--text);letter-spacing:.02em;white-space:normal;text-overflow:unset;text-align:left;overflow-wrap:anywhere;max-width:100%;font-size:.95rem;font-weight:700;line-height:1.35;overflow:visible}.viewerStats{flex-direction:column;gap:6px;padding:12px 16px;display:flex}.viewerStatRow{background:#060a1699;border-left:2px solid #3dc8ff66;border-radius:8px;grid-template-columns:auto 1fr;gap:8px;min-width:0;padding:9px 10px 9px 12px;transition:border-color .18s,background .18s;display:grid}.viewerStatRow:hover{border-left-color:var(--accent);background:#00ffaa0d}.viewerStatLabel{letter-spacing:.12em;text-transform:uppercase;color:#e0ebff80;white-space:nowrap;align-items:center;gap:6px;font-size:.68rem;display:inline-flex}.viewerStatValue{font-family:var(--font-display,"Oxanium", sans-serif);letter-spacing:.06em;color:#e0ebfff2;text-align:right;overflow-wrap:anywhere;min-width:0;font-size:.86rem}.viewerActions{border-top:1px solid #6778a82e;flex-direction:column;gap:8px;margin-top:auto;padding:12px 16px;display:flex}.viewerFrameModes{background:linear-gradient(160deg,#060a16d6,#0a1020b8);border:1px solid #54b9ff33;border-radius:12px;gap:10px;padding:12px;display:grid}.viewerFrameModesHeader{gap:4px;display:grid}.viewerFrameModesLabel{color:#e0ebffd6;letter-spacing:.16em;text-transform:uppercase;align-items:center;gap:6px;font-size:.72rem;font-weight:700;display:inline-flex}.viewerFrameModesHint{color:#e0ebff94;font-size:.74rem;line-height:1.4}.viewerModeGroup{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.viewerModeBtn{appearance:none;color:#e0ebffd6;min-height:34px;font-family:var(--font-body,"Rajdhani", "Segoe UI", sans-serif), sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:#080c18d9;border:1px solid #6778a866;border-radius:10px;padding:0 10px;font-size:.74rem;font-weight:700;transition:border-color .16s,color .16s,box-shadow .16s,transform .16s,background .16s}.viewerModeBtn:hover{color:#fffffff5;border-color:#47ff9a94;transform:translateY(-1px)}.viewerModeBtn:focus-visible{border-color:#47ff9ab3;outline:none;box-shadow:0 0 0 2px #3dc8ff2e}.viewerModeBtn.is-active{color:#fffffffa;background:linear-gradient(135deg,#47ff9a2e,#54b9ff29);border-color:#47ff9ab3;box-shadow:inset 0 0 0 1px #3dc8ff1a,0 0 18px #47ff9a1a}.viewerActions .btn{width:100%;min-height:38px;font-size:.78rem}.viewerHint{color:#e0ebff61;text-align:right;letter-spacing:.06em;padding:0 16px 12px;font-size:.68rem}.viewerInfoToggle{appearance:none;color:#e0ebffd9;min-height:28px;font-family:var(--font-body,"Rajdhani", "Segoe UI", sans-serif), sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:#54b9ff1f;border:1px solid #54b9ff66;border-radius:999px;margin-left:auto;padding:0 10px;font-size:.7rem;font-weight:700;transition:border-color .18s,color .18s,background .18s;display:none}.viewerInfoToggle:hover{color:#fffffff2;background:#47ff9a24;border-color:#47ff9ab3}.viewerInfoToggle:focus-visible{border-color:#47ff9abf;outline:none;box-shadow:0 0 0 2px #3dc8ff33}@media (width<=1000px){.viewerResizeHandle{display:none}.viewerInfoToggle{justify-content:center;align-items:center;display:inline-flex}#viewer{--viewer-overlay-padding:10px;--viewer-shell-gap:0px;--viewer-nav-btn-size:42px;--viewer-nav-gap:0px;--viewer-mobile-sheet-collapsed-height:68px;--viewer-mobile-sheet-expanded-height:min(62dvh, 460px);--viewer-mobile-stage-reserve:calc(var(--viewer-mobile-sheet-collapsed-height) + 12px);padding:calc(env(safe-area-inset-top) + 8px) max(8px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 8px) max(8px, env(safe-area-inset-left));-webkit-overflow-scrolling:touch;align-items:flex-start;overflow-y:auto}#viewer.viewer--info-expanded{--viewer-mobile-stage-reserve:calc(var(--viewer-mobile-sheet-expanded-height) + 12px)}#viewerInner{grid-template-columns:minmax(0,1fr);align-content:start;justify-items:center;gap:12px;width:100%;max-width:none}.viewerNavWrap{justify-content:center;width:100%;max-width:100%;position:relative}.viewerNavBtn{z-index:10;background:#03050cb8;width:40px;height:40px;font-size:1.2rem;position:absolute;top:50%;transform:translateY(-50%)}.viewerNavBtn--prev{left:8px}.viewerNavBtn--next{right:8px}.viewerNavBtn:hover{transform:translateY(-50%)scale(1.08)}#viewerFrameWrap{width:min(var(--viewer-width,calc(100vw - (var(--viewer-overlay-padding) * 2))), calc(100vw - (var(--viewer-overlay-padding) * 2)), calc(( 100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px - var(--viewer-mobile-stage-reserve) ) * var(--viewer-aspect-ratio,16 / 9)));max-width:100%;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px - var(--viewer-mobile-stage-reserve));margin-inline:auto}#viewerInfo{width:min(640px,100vw - 16px);max-width:calc(100vw - 16px);max-height:var(--viewer-mobile-sheet-expanded-height);overscroll-behavior:contain;justify-self:center;overflow:hidden auto}#viewerInfo.viewerInfo--collapsed{max-height:var(--viewer-mobile-sheet-collapsed-height);overflow:clip}#viewerInfo.viewerInfo--collapsed>:not(.viewerHeader){display:none}#viewerInfo.viewerInfo--collapsed .viewerHeader{border-bottom:0;padding-bottom:14px}.viewerHeader{gap:10px;padding:12px 14px}.viewerStatus{display:none}.viewerPosition{font-size:.8rem}.viewerStats,.viewerActions{padding-left:14px;padding-right:14px}.viewerStats{gap:10px}.viewerStatRow{grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 12px 12px 14px}.viewerStatLabel,.viewerStatValue{text-align:left}.viewerStatLabel{font-size:.76rem}.viewerStatValue{font-size:1rem}.viewerActions{gap:10px}.viewerModeGroup{grid-template-columns:repeat(3,minmax(0,1fr))}.viewerActions .btn{min-height:44px;font-size:.82rem}}@media (width<=480px){.viewerHeader{flex-wrap:wrap;align-items:center}.viewerInfoToggle{letter-spacing:.04em;text-transform:none;background:#0c1220e6;border-color:#6778a873;min-height:40px;margin-left:auto;padding:0 16px;font-size:.78rem}.viewerModeGroup{grid-template-columns:1fr}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;filter:blur(4px);transform:translateY(14px)scale(.97)}60%{opacity:1;filter:blur();transform:translateY(-2px)scale(1.01)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}@keyframes drift{0%{transform:translate(0,0)rotate(0)scale(1)}20%{transform:translate(40px,-30px)rotate(6deg)scale(1.05)}40%{transform:translate(-20px,-50px)rotate(-3deg)scale(.95)}60%{transform:translate(30px,10px)rotate(4deg)scale(1.08)}80%{transform:translate(-35px,-15px)rotate(-5deg)scale(.97)}to{transform:translate(0,0)rotate(0)scale(1)}}@keyframes riseIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes bootIn{0%{opacity:0;filter:blur(12px);transform:translateY(-22px)scale(.92)}30%{opacity:.7;filter:blur(1px);transform:translateY(4px)scale(1.03)}50%{opacity:1;filter:blur();transform:translateY(-2px)scale(.99)}65%{opacity:.9;transform:translateY(1px)scale(1.005)}80%{opacity:1;transform:translateY(-.5px)scale(.998)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}@keyframes headerSweep{0%{background-position:-100%}to{background-position:300%}}@keyframes scanline{0%{opacity:0;transform:translate(-150%)skew(-8deg)}10%{opacity:.8}30%{opacity:.5}50%{opacity:.7}70%{opacity:.3}to{opacity:0;transform:translate(150%)skew(-8deg)}}@keyframes statPulse{0%{border-color:#6778a866;box-shadow:0 0 #47ff9a00}30%{border-color:#47ff9a99;box-shadow:0 0 28px #47ff9a66,inset 0 0 12px #47ff9a14}to{border-color:#6778a866;box-shadow:0 0 #47ff9a00}}@keyframes thumbSweep{0%{opacity:0;transform:translate(-140%)skew(-15deg)}15%{opacity:.8}50%{opacity:.4}to{opacity:0;transform:translate(140%)skew(-15deg)}}@keyframes viewerFocus{0%{opacity:0;filter:blur(14px);transform:translateY(12px)scale(.97)}50%{opacity:.9;filter:blur(2px)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}@keyframes loadingSweep{0%{background-position:-100%}to{background-position:300%}}@keyframes btnRipple{0%{opacity:.5;transform:scale(.15)}50%{opacity:.25}to{opacity:0;transform:scale(1.6)}}@keyframes controlShift{0%{background-position:0}50%{background-position:100%}to{background-position:0}}@keyframes noiseShift{0%{transform:translate(0,0)scale(1)}14%{transform:translate(-1.5%,.8%)scale(1.01)}28%{transform:translate(.5%,-1.2%)scale(.99)}42%{transform:translate(1.8%,.4%)scale(1.005)}57%{transform:translate(-.8%,-1.5%)scale(.995)}71%{transform:translate(1.2%,1%)scale(1.01)}85%{transform:translate(-1.8%,-.5%)scale(.99)}to{transform:translate(0,0)scale(1)}}@keyframes viewerOut{0%{opacity:1;filter:blur();transform:translateY(0)scale(1)}to{opacity:0;filter:blur(8px);transform:translateY(10px)scale(.97)}}@keyframes glowPulse{0%{box-shadow:0 24px 62px #03060eb3,0 0 18px #00ffaa1f,0 0 30px #3dc8ff14}33%{box-shadow:0 24px 62px #03060eb3,0 0 32px #00ffaa73,0 0 56px #3dc8ff2e,0 0 80px #00ffaa14}66%{box-shadow:0 24px 62px #03060eb3,0 0 24px #3dc8ff66,0 0 48px #e060ff33,0 0 70px #3dc8ff0f}to{box-shadow:0 24px 62px #03060eb3,0 0 18px #00ffaa1f,0 0 30px #3dc8ff14}}@keyframes modePulse{0%{opacity:.3;transform:translate(-20%)}50%{opacity:.9}to{opacity:.3;transform:translate(20%)}}@keyframes colorShift{0%{filter:hue-rotate()blur(22px)saturate()}25%{filter:hue-rotate(15deg)blur(26px)saturate(1.2)}50%{filter:hue-rotate(-10deg)blur(20px)saturate(.9)}75%{filter:hue-rotate(20deg)blur(28px)saturate(1.3)}to{filter:hue-rotate()blur(22px)saturate()}}@keyframes panelSlideIn{0%{opacity:0;filter:blur(3px);transform:translate(24px)}to{opacity:1;filter:blur();transform:translate(0)}}@keyframes panelSlideOut{0%{opacity:1;filter:blur();transform:translate(0)}to{opacity:0;filter:blur(3px);transform:translate(-24px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ambientPulse{0%,to{opacity:.55;transform:scale(1)}50%{opacity:.75;transform:scale(1.06)}}@keyframes borderTrace{0%{background-position:0 0}to{background-position:200% 200%}}@keyframes cardReveal{0%{opacity:0;transform:translateY(var(--enter-y,20px)) scale(.96);filter:blur(6px)}60%{opacity:1;filter:blur()}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.toastContainer{z-index:10001;pointer-events:none;flex-direction:column-reverse;gap:8px;display:flex;position:fixed;bottom:24px;right:24px}.toast{pointer-events:auto;backdrop-filter:blur(14px);color:var(--text);font-family:var(--font-body);letter-spacing:.04em;opacity:0;background:#060c1af2;border:1px solid #5a6ea066;border-radius:12px;max-width:360px;padding:12px 20px;font-size:.82rem;font-weight:600;transition:opacity .28s,transform .28s;transform:translateY(12px)scale(.95);box-shadow:0 12px 36px #02040c99}.toast.is-visible{opacity:1;transform:translateY(0)scale(1)}.toast.is-leaving{opacity:0;transform:translateY(-8px)scale(.95)}.toast--ok{background:linear-gradient(135deg,#001e12f2,#060c1af2);border-color:#00ffaa80}.toast--err{background:linear-gradient(135deg,#1e060ef2,#060c1af2);border-color:#ff4d6d80}.toast--info{background:linear-gradient(135deg,#060e1ef2,#060c1af2);border-color:#3dc8ff80}.shortcutsOverlay{z-index:10001;backdrop-filter:blur(14px);background:#03050cd9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.shortcutsOverlay:not(.is-hidden){animation:.2s fadeIn}.shortcutsPanel{background:linear-gradient(160deg,#060c1afa,#0a1020f2);border:1px solid #00ffaa4d;border-radius:16px;width:min(420px,90%);animation:.28s popIn;overflow:hidden;box-shadow:0 28px 64px #02040cbf}.shortcutsHeader{border-bottom:1px solid #6778a833;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.shortcutsTitle{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--text);align-items:center;gap:8px;font-size:.85rem;font-weight:700;display:inline-flex}.shortcutsList{flex-direction:column;gap:10px;padding:16px 20px;display:flex}.shortcutRow{align-items:center;gap:8px;display:flex}.shortcutRow kbd{min-width:34px;height:30px;font-family:var(--font-display);color:var(--accent);background:#060a16cc;border:1px solid #5a6ea080;border-radius:8px;justify-content:center;align-items:center;padding:0 8px;font-size:.74rem;font-weight:600;display:inline-flex;box-shadow:0 2px 4px #02040c4d}.shortcutRow span{color:#e0ebffb3;letter-spacing:.02em;font-size:.84rem}