*{box-sizing:border-box;margin:0;padding:0}body{background:#1a0d1e;color:#fff;font-family:system-ui,sans-serif;min-height:100vh;position:relative;display:flex;flex-direction:column;overflow-x:hidden}.scene-layer{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;height:100dvh;min-height:100lvh;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:-2;opacity:0;transition:opacity 1.2s ease-in-out;will-change:opacity}.scene-layer.active{opacity:1}.scene-overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;height:100dvh;min-height:100lvh;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#00000040,#00000059 40%,#00000080)}@media (prefers-reduced-motion: reduce){.scene-layer{transition:none}}header{display:flex;align-items:center;gap:14px;padding:14px 28px;border-bottom:1px solid rgba(255,255,255,.08);background:#ffffff0d;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}.header-spacer{flex:1}.logo img{width:40px;height:40px;display:block}header h1{gap:4px;font-size:22px;font-weight:700;color:#fffffff2;letter-spacing:-.5px;display:flex;align-items:center}.hub-badge{background:#129649;color:#0e1a10;padding:2px 8px;border-radius:5px;font-size:18px;font-weight:700;margin-left:4px;display:inline-flex;gap:0;transition:transform .6s}.logo:hover img{transform:rotate(360deg);transition:transform .6s}.logo img{transition:transform .6s}.hub-letter{display:inline-block}.hub-letter.wave{animation:hub-wave .6s ease-out}@keyframes hub-wave{0%,to{transform:translateY(0)}40%{transform:translateY(-6px)}}.status-badge{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.5px;font-variant-numeric:tabular-nums}.status-badge.offline{background:#18181880;border:1px solid rgba(255,255,255,.12);color:#888;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.status-badge.live{background:#0f2b1a80;border:1px solid rgba(29,158,117,.6);color:#6fcf8a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.status-dot{width:6px;height:6px;border-radius:50%;background:#555}.status-badge.live .status-dot{background:#6fcf8a;animation:pulse-live 1.6s infinite}@keyframes pulse-live{0%,to{opacity:1}50%{opacity:.4}}.theme-toggle{background:#18181899;border:1px solid #333;border-radius:50%;width:34px;height:34px;margin-left:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .3s;flex-shrink:0;padding:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.theme-toggle:hover{background:#ffffff1f;border-color:#ffffff4d;transform:rotate(30deg)}.theme-icon{width:16px;height:16px;display:block;background:currentColor;color:#a3e6b4;-webkit-mask:var(--icon) center / contain no-repeat;mask:var(--icon) center / contain no-repeat;transition:color .3s}body[data-theme=morning] .theme-icon{--icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v2m0 14v2M4.2 4.2l1.5 1.5m12.6 12.6l1.5 1.5M3 12h2m14 0h2M4.2 19.8l1.5-1.5m12.6-12.6l1.5-1.5"/><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2"/></svg>');color:#d8e7e0}body[data-theme=day] .theme-icon{--icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="5" fill="currentColor"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>');color:#ffe082}body[data-theme=evening] .theme-icon{--icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 18a5 5 0 0 0-10 0"/><line x1="12" y1="2" x2="12" y2="9"/><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"/><line x1="1" y1="18" x2="3" y2="18"/><line x1="21" y1="18" x2="23" y2="18"/><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"/><line x1="23" y1="22" x2="1" y2="22"/><polyline points="8 6 12 2 16 6"/></svg>');color:#ffb37a}body[data-theme=night] .theme-icon{--icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>');color:#e8dcbe}main{max-width:920px;width:100%;margin:0 auto;padding:18px 20px calc(48px + env(safe-area-inset-bottom));flex:1}.player-shell{background:#ffffff0d;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:14px;border:1px solid rgba(255,255,255,.1);overflow:hidden;margin-bottom:12px;aspect-ratio:16 / 9;position:relative}.player-shell video{width:100%;height:100%;display:block;background:#000;object-fit:contain}.player-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(circle at center,#1296492e,#000000b8 62%)}.player-loading:before{content:"";width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.22);border-top-color:#6fcf8a;animation:player-spin .8s linear infinite}.player-shell.loading .player-loading{display:flex}@keyframes player-spin{to{transform:rotate(360deg)}}.player-shell.ios-fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;height:100dvh;margin:0;border:0;border-radius:0;z-index:2000;background:#000;aspect-ratio:auto}.player-shell.ios-fullscreen .player-controls{opacity:1;pointer-events:auto;padding-bottom:calc(14px + env(safe-area-inset-bottom))}body.ios-player-fullscreen header,body.ios-player-fullscreen footer,body.ios-player-fullscreen .below-player{visibility:hidden}.player-controls{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;display:flex;align-items:center;gap:12px;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);opacity:0;pointer-events:none;transition:opacity .25s ease .5s}.player-shell:hover .player-controls,.player-shell.controls-visible .player-controls,.player-shell.paused .player-controls{opacity:1;pointer-events:auto;transition-delay:0s}.ctrl-btn{background:transparent;border:none;color:#ffffffeb;padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,transform .15s;flex-shrink:0;position:relative}.ctrl-btn:hover{color:#fff;transform:scale(1.1)}.ctrl-btn.copied{color:#6fcf8a}.ctrl-btn svg{width:22px;height:22px;display:block}.copy-toast{position:absolute;right:50%;bottom:calc(100% + 10px);transform:translate(50%) translateY(4px);padding:4px 8px;border-radius:4px;background:#141414eb;border:1px solid rgba(255,255,255,.12);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}.ctrl-btn.copied .copy-toast{opacity:1;transform:translate(50%) translateY(0)}#play-btn .icon-pause,.player-shell.playing #play-btn .icon-play{display:none}.player-shell.playing #play-btn .icon-pause{display:block}.dvr-bar{flex:1;min-width:0}.dvr-track{position:relative;height:5px;background:#ffffff2e;border-radius:3px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:height .15s}.dvr-bar:hover .dvr-track,.dvr-bar.scrubbing .dvr-track{height:7px}.dvr-track:focus-visible{outline:2px solid rgba(111,207,138,.85);outline-offset:6px}.dvr-segments{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3px;overflow:hidden}.dvr-segments .segment{position:absolute;top:0;bottom:0;background:#fff6}.dvr-progress{position:absolute;left:0;top:0;bottom:0;background:#6fcf8a;border-radius:3px;width:100%;pointer-events:none}.dvr-playhead{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:#fff;border-radius:50%;pointer-events:none;left:100%;box-shadow:0 0 #6fcf8a00;transition:box-shadow .2s}.dvr-bar:hover .dvr-playhead,.dvr-bar.scrubbing .dvr-playhead{box-shadow:0 0 0 4px #6fcf8a4d}.dvr-tooltip{position:absolute;bottom:100%;margin-bottom:8px;background:#141414eb;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap;transform:translate(-50%);border:1px solid rgba(255,255,255,.1)}.dvr-bar:hover .dvr-tooltip,.dvr-bar.scrubbing .dvr-tooltip{opacity:1}.dvr-time{font-size:12px;font-weight:600;color:#ffffffeb;font-variant-numeric:tabular-nums;min-width:50px;text-align:right;display:none}.player-shell.archive .dvr-time{display:block}.live-btn{background:#0006;border:1px solid rgba(255,255,255,.2);color:#ffffff8c;padding:4px 10px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.6px;cursor:pointer;display:flex;align-items:center;gap:6px;flex-shrink:0;transition:all .2s}.live-btn:hover{color:#fff;border-color:#fff6}.live-btn.active{color:#6fcf8a;border-color:#6fcf8a99;background:#0f2b1a73}.live-dot{width:6px;height:6px;background:#555;border-radius:50%}.live-btn.active .live-dot{background:#6fcf8a;animation:pulse-live 1.6s infinite}.below-player{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:0 4px}.viewer-badge{display:flex;align-items:center;gap:6px;background:#18181880;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:600;color:#fff9;letter-spacing:.3px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:color .3s,border-color .3s;font-variant-numeric:tabular-nums}.viewer-badge.has-viewers{color:#ffffffeb;border-color:#fff3}.viewer-badge svg{display:block;opacity:.8}.viewer-label{font-size:11px;color:#ffffff80;font-weight:500;letter-spacing:.3px;margin-left:2px}.frogs-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;align-items:start}.frog-card{background:#111f138c;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .2s,background .2s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.frog-card.open .frog-details-inner{display:flex}.frog-card:hover{border-color:#ffffff40;background:#111f13a6}.frog-card.open{border-color:#ffffff59;background:#111f13b3}.frog-card-header{padding:14px 16px;display:flex;align-items:center;gap:12px;min-height:72px}.frog-avatar{width:42px;height:42px;background:#ffffff1a;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}.frog-avatar img{width:100%;height:100%;object-fit:cover}.frog-info{flex:1;min-width:0}.frog-info .fname{font-size:15px;font-weight:600;color:#fffffff2}.frog-info .fspecies{font-size:12px;color:#ffffff80;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chevron{width:16px;height:16px;flex-shrink:0;transition:transform .2s}.frog-card.open .chevron{transform:rotate(180deg)}.frog-details-inner{border-top:1px solid rgba(255,255,255,.08);padding:14px 16px;display:none;flex-direction:column;gap:10px}.detail-row{display:flex;justify-content:space-between;font-size:13px}.dl{color:#ffffff80;flex-shrink:0;font-size:12px}.dv{color:#ffffffe6;text-align:right}.tag-section{display:flex;flex-direction:column;gap:5px}.tag-label{font-size:12px;color:#ffffff80}.tag-row{display:flex;flex-wrap:wrap;gap:5px}.tag{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:3px 10px;font-size:11px;color:#ffffffd9}.tag.dislike{background:#c47c7c1f;border-color:#c47c7c59;color:#e0a8a8}.personality{font-size:12px;color:#fff9;font-style:italic;line-height:1.6;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}footer{position:fixed;left:0;right:0;bottom:0;text-align:center;padding:12px 20px calc(12px + env(safe-area-inset-bottom));margin-top:0;font-size:11px;color:#ffffff8c;line-height:1.5;pointer-events:none;z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.6)}footer a,footer .heart{pointer-events:auto}.heart{color:#e74c3c;display:inline-block;animation:heartbeat 1.5s infinite}@keyframes heartbeat{0%,to{transform:scale(1)}10%,30%{transform:scale(1.2)}20%{transform:scale(1)}}.frog-avatars{display:flex;align-items:center;gap:8px}.frog-avatar-btn{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.18);background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:0;cursor:pointer;position:relative;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;flex-shrink:0}.frog-avatar-btn img{width:100%;height:100%;object-fit:cover;display:block}.frog-avatar-btn:hover{transform:scale(1.08);border-color:#ffffff80;box-shadow:0 0 0 4px #ffffff1a}.frog-avatar-btn:focus-visible{outline:none;border-color:#ffffffb3;box-shadow:0 0 0 4px #ffffff26}.frog-avatar-btn:after{content:attr(data-name);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#141414eb;color:#fff;font-size:11px;font-weight:600;padding:4px 8px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;border:1px solid rgba(255,255,255,.08)}.frog-avatar-btn:hover:after{opacity:1}.frog-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.frog-modal[hidden]{display:none}.frog-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000a6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:backdropFade .2s ease}@keyframes backdropFade{0%{opacity:0}to{opacity:1}}.frog-modal-card{position:relative;background:#ffffff14;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.15);border-radius:16px;max-width:420px;width:100%;max-height:85vh;overflow-y:auto;animation:modalRise .25s cubic-bezier(.16,1,.3,1);box-shadow:0 20px 60px #00000080}@keyframes modalRise{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.frog-modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#ffffffb3;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .15s,color .15s,transform .15s}.frog-modal-close:hover{background:#ffffff26;color:#fff;transform:rotate(90deg)}.frog-modal-close svg{width:16px;height:16px}.frog-modal-body{padding:28px 24px 24px}.frog-modal-photo{width:88px;height:88px;border-radius:50%;overflow:hidden;margin:0 auto 16px;border:3px solid rgba(255,255,255,.25);background:#ffffff0d}.frog-modal-photo img{width:100%;height:100%;object-fit:cover;display:block}.frog-modal-name{font-size:22px;font-weight:700;text-align:center;color:#fff;margin-bottom:4px}.frog-modal-species{font-size:13px;text-align:center;color:#fff9;margin-bottom:20px}.frog-modal-details{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}@media (max-width: 900px){main{padding:12px 14px 10px}header{padding:12px 18px;gap:10px}header h1{font-size:18px}.hub-badge{font-size:16px;padding:1px 6px}.status-badge{padding:4px 10px;font-size:11px}.theme-toggle{width:30px;height:30px}.theme-icon{width:14px;height:14px}}@media (max-width: 600px){main{padding:10px 10px 6px}header{padding:10px 14px;gap:8px}.logo img{width:32px;height:32px}header h1{font-size:16px;gap:3px}.hub-badge{font-size:14px;padding:1px 5px}.status-badge{padding:3px 8px;font-size:10px;gap:4px}.status-badge .status-dot{width:5px;height:5px}.theme-toggle{width:28px;height:28px}.theme-icon{width:13px;height:13px}.player-shell{border-radius:10px}.player-controls{padding:8px 10px;gap:8px}.ctrl-btn svg{width:18px;height:18px}.live-btn{font-size:10px;padding:3px 7px}.frog-avatar-btn{width:32px;height:32px}.viewer-badge{padding:4px 10px;font-size:11px}.below-player{gap:8px;margin-bottom:8px}footer{padding:12px 14px;font-size:11px}.frog-modal{padding:14px}.frog-modal-body{padding:22px 18px 18px}.frog-modal-photo{width:72px;height:72px}.frog-modal-name{font-size:18px}.frog-modal-species{font-size:12px;margin-bottom:16px}}@media (max-width: 380px){header{padding:8px 12px;gap:6px}.logo img{width:28px;height:28px}header h1{font-size:15px}.hub-badge{font-size:13px}.frog-avatar-btn{width:28px;height:28px}}