:root{--bg-primary:#08080c;--bg-secondary:#12121a;--bg-tertiary:#1a1a26;--bg-card:#14141f;--bg-hover:#1f1f2e;--text-primary:#f0f0f5;--text-secondary:#a0a0b0;--text-muted:#6b6b7b;--accent-magenta:#ff00a0;--accent-cyan:#00f0ff;--accent-lime:#ccff00;--accent-purple:#7d00ff;--border-color:rgba(255, 255, 255, 0.08);--glow-magenta:0 0 12px rgba(255, 0, 160, 0.45);--glow-cyan:0 0 12px rgba(0, 240, 255, 0.45);--gap-xs:4px;--gap-sm:8px;--gap-md:16px;--gap-lg:24px;--gap-xl:32px;--gap-xxl:48px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;--sidebar-width:260px;--font-display:'Arial',sans-serif;--font-body:'Helvetica Neue', Helvetica, Arial, sans-serif;--transition-fast:0.15s ease;--transition-base:0.25s ease}
*,::after,::before{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;display:flex;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit;font-size:inherit;border:none;outline:0;background:0 0;color:inherit}
ol,ul{list-style:none}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 15% 20%,rgba(125,0,255,.12) 0,transparent 35%),radial-gradient(circle at 85% 80%,rgba(255,0,160,.1) 0,transparent 35%),repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(255,255,255,.02) 1px,rgba(255,255,255,.02) 2px)}
.mb0{margin-bottom:0!important}
.all-beta-box,.play-beta-box{position:absolute;width:0;height:0;overflow:hidden}
.site-header{width:var(--sidebar-width);flex-shrink:0;background:linear-gradient(180deg,var(--bg-secondary) 0,var(--bg-primary) 100%);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:var(--gap-xl) var(--gap-lg);min-height:100vh}
.brand{display:block;font-family:var(--font-display);font-size:1.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-primary);margin-bottom:var(--gap-xxl);position:relative}
.brand span{color:var(--accent-cyan);text-shadow:var(--glow-cyan)}
.brand::after{content:'';display:block;width:40px;height:3px;background:linear-gradient(90deg,var(--accent-magenta),var(--accent-cyan));margin-top:var(--gap-sm)}
.main-nav{display:flex;flex-direction:column;gap:var(--gap-xs);margin-bottom:var(--gap-xl)}
.nav-link{display:flex;align-items:center;gap:var(--gap-md);padding:var(--gap-md);border-radius:var(--radius-md);color:var(--text-secondary);font-weight:500;position:relative;transition:color var(--transition-fast),background var(--transition-fast)}
.nav-link .nav-icon{width:20px;height:20px;flex-shrink:0;color:var(--text-muted);transition:color var(--transition-fast)}
.nav-link.active,.nav-link:hover{color:var(--text-primary);background:var(--bg-hover)}
.nav-link.active .nav-icon,.nav-link:hover .nav-icon{color:var(--accent-cyan)}
.nav-link::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:60%;background:var(--accent-magenta);box-shadow:var(--glow-magenta);border-radius:0 var(--radius-sm) var(--radius-sm) 0;transition:transform var(--transition-base)}
.nav-link.active::before,.nav-link:hover::before{transform:translateY(-50%) scaleY(1)}
.category-shortcuts{margin-bottom:var(--gap-xl)}
.category-shortcuts .shortcuts-title{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:var(--gap-md)}
.shortcuts-list{display:flex;flex-direction:column;gap:var(--gap-xs)}
.shortcut-link{display:flex;align-items:center;justify-content:space-between;padding:var(--gap-sm) var(--gap-md);color:var(--text-secondary);border-radius:var(--radius-md);transition:background var(--transition-fast),color var(--transition-fast)}
.shortcut-link:hover{background:var(--bg-hover);color:var(--text-primary)}
.shortcut-link .count{font-size:.75rem;color:var(--text-muted);background:var(--bg-tertiary);padding:var(--gap-xs) var(--gap-sm);border-radius:var(--radius-pill)}
.search-box{position:relative;margin-bottom:10px}
.search-input{width:100%;padding:var(--gap-md) var(--gap-md) var(--gap-md) 40px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.search-input:focus{border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}
.search-input::placeholder{color:var(--text-muted)}
.search-icon{position:absolute;left:var(--gap-md);top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-muted);pointer-events:none}
.mobile-bar{display:none;align-items:center;justify-content:space-between;padding:var(--gap-md) var(--gap-lg);background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}
.menu-toggle{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary)}
.menu-toggle svg{width:24px;height:24px}
.site-main{flex:1;min-width:0;padding:var(--gap-xl) var(--gap-xxl);display:flex;flex-direction:column}
.section{margin-bottom:var(--gap-xxl);}
.section:first-child{animation-delay:.1s}
.section:nth-child(2){animation-delay:.2s}
.section:nth-child(3){animation-delay:.3s}
.section:nth-child(4){animation-delay:.4s}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--gap-lg)}
.section-title{font-family:var(--font-display);font-size:1.5rem;font-weight:300;letter-spacing:.5px;text-transform:uppercase;position:relative;padding-left:var(--gap-md)}
.section-title::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:70%;background:linear-gradient(180deg,var(--accent-magenta),var(--accent-cyan));border-radius:var(--radius-sm)}
.view-more{display:inline-flex;align-items:center;gap:var(--gap-sm);font-size:.875rem;color:var(--accent-cyan);font-weight:300;transition:gap var(--transition-fast)}
.view-more:hover{gap:var(--gap-md)}
.video-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap-lg)}
@media (max-width:1199px){.video-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:991px){.video-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){.video-grid{grid-template-columns:repeat(2,1fr);gap:var(--gap-md)}
}
.video-card{display:block;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;transition:transform var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base)}
.video-card:hover{transform:translateY(-4px);border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}
.video-cover{position:relative;aspect-ratio:16/9;overflow:hidden}
.video-cover img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-base)}
.video-card:hover .video-cover img{transform:scale(1.06)}
.video-updatedAt{position:absolute;top:var(--gap-xs);right:var(--gap-xs);background:rgba(8,8,12,.85);border:1px solid var(--accent-lime);color:var(--accent-lime);font-size:.75rem;font-weight:300;padding:0 var(--gap-xs);border-radius:var(--radius-pill)}
.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);opacity:0;transition:opacity var(--transition-base)}
.video-card:hover .play-overlay{opacity:1}
.play-overlay svg{width:48px;height:48px;color:var(--accent-cyan);filter:drop-shadow(var(--glow-cyan))}
.video-info{padding:var(--gap-md)}
.video-title{font-size:.9375rem;font-weight:300;line-height:1.45;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;transition:color var(--transition-fast)}
.video-card:hover .video-title{color:var(--accent-cyan)}
.genre-cloud{display:flex;flex-wrap:wrap;gap:var(--gap-md)}
.genre-pill{display:inline-flex;align-items:center;gap:var(--gap-sm);padding:var(--gap-sm) var(--gap-md);border:1px solid var(--border-color);border-radius:var(--radius-pill);color:var(--text-secondary);font-size:.875rem;font-weight:500;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}
.genre-pill:hover{color:var(--bg-primary);background:var(--accent-cyan);border-color:var(--accent-cyan);transform:translateY(-2px);box-shadow:var(--glow-cyan)}
.genre-pill svg{width:16px;height:16px}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--gap-sm);font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--gap-lg)}
.breadcrumb a{color:var(--text-secondary);transition:color var(--transition-fast)}
.breadcrumb a:hover{color:var(--accent-cyan)}
.breadcrumb .sep{color:var(--text-muted)}
.breadcrumb .current{color:var(--text-primary);font-weight:500}
.pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--gap-sm);margin-top:var(--gap-xl)}
.page-link{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--gap-md);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.875rem;font-weight:500;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast)}
.page-link:hover{color:var(--text-primary);background:var(--bg-hover);border-color:var(--accent-cyan)}
.page-link.current{color:var(--bg-primary);background:var(--accent-cyan);border-color:var(--accent-cyan);font-weight:300;box-shadow:var(--glow-cyan)}
.page-link.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.page-link svg{width:18px;height:18px}
.watch-stage{margin-bottom:var(--gap-xl)}
.player-frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}
.player-frame img{width:100%;height:100%;object-fit:cover}
.player-trigger{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);transition:background var(--transition-base)}
.player-trigger:hover{background:rgba(0,0,0,.25)}
.player-trigger svg{width:80px;height:80px;color:var(--accent-cyan);filter:drop-shadow(var(--glow-cyan));transition:transform var(--transition-base),color var(--transition-base)}
.player-trigger:hover svg{transform:scale(1.1);color:var(--accent-magenta);filter:drop-shadow(var(--glow-magenta))}
.detail-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--gap-xl);margin-bottom:var(--gap-xxl)}
.detail-title{font-family:var(--font-display);font-size:2rem;font-weight:700;text-transform:uppercase;margin-bottom:var(--gap-md);line-height:1.2}
.media-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-md);color:var(--text-secondary);font-size:.875rem;margin-bottom:var(--gap-lg)}
.media-meta .meta-score{display:inline-flex;align-items:center;gap:var(--gap-xs);color:var(--accent-lime);font-weight:700}
.media-meta .meta-score svg{width:16px;height:16px}
.media-meta .meta-dot{width:4px;height:4px;border-radius:50%;background:var(--text-muted)}
.genre-bar{display:flex;flex-wrap:wrap;gap:var(--gap-sm);align-items:center;margin-bottom:var(--gap-lg)}
.genre-bar a{display:inline-block;padding:var(--gap-xs) var(--gap-md);border:1px solid var(--border-color);border-radius:var(--radius-pill);color:var(--text-secondary);font-size:.8125rem;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast)}
.genre-bar a:hover{color:var(--bg-primary);background:var(--accent-magenta);border-color:var(--accent-magenta)}
.story-block{margin-bottom:var(--gap-lg)}
.story-block .story-heading,.obj-label{font-size:.875rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:var(--gap-sm)}
.story-block p{color:var(--text-secondary);font-size:.9375rem;line-height:1.75}
.tag-cloud{display:flex;flex-wrap:wrap;gap:var(--gap-sm);align-items:center;margin-bottom:var(--gap-lg)}
.tag-cloud a{display:inline-block;padding:var(--gap-xs) var(--gap-md);background:var(--bg-tertiary);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.8125rem;transition:color var(--transition-fast),background var(--transition-fast)}
.tag-cloud a:hover{color:var(--accent-cyan);background:var(--bg-hover)}
.action-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--gap-md);padding:var(--gap-md) 0;border-top:1px solid var(--border-color)}
.url-display{display:flex;align-items:center;gap:var(--gap-sm);font-size:.8125rem;color:var(--text-muted);word-break:break-all}
.url-display svg{width:16px;height:16px;flex-shrink:0}
.share-btn{display:inline-flex;align-items:center;gap:var(--gap-sm);padding:var(--gap-sm) var(--gap-md);border:1px solid var(--accent-cyan);border-radius:var(--radius-md);color:var(--accent-cyan);font-size:.875rem;font-weight:500;cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast)}
.share-btn:hover{color:var(--bg-primary);background:var(--accent-cyan);box-shadow:var(--glow-cyan)}
.share-btn svg{width:18px;height:18px}
.source-list{display:flex;flex-wrap:wrap;gap:var(--gap-md)}
.source-list .source-item{display:inline-flex;align-items:center;gap:var(--gap-sm);padding:var(--gap-sm) var(--gap-md);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.875rem;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast)}
.source-list .source-item.active,.source-list .source-item:hover{color:var(--text-primary);background:var(--bg-hover);border-color:var(--accent-lime)}
.source-list .source-item svg{width:16px;height:16px;color:var(--accent-lime)}
.site-footer{padding:var(--gap-xl) 0;text-align:center;color:var(--text-muted);font-size:.8125rem;border-top:1px solid var(--border-color);margin-top:auto}
.site-footer a{color:var(--text-secondary);transition:color var(--transition-fast)}
.site-footer a:hover{color:var(--accent-cyan)}
.toast{position:fixed;bottom:var(--gap-xl);left:50%;transform:translateX(-50%) translateY(120%);background:var(--bg-secondary);border:1px solid var(--accent-cyan);color:var(--text-primary);padding:var(--gap-md) var(--gap-xl);border-radius:var(--radius-md);box-shadow:var(--glow-cyan);z-index:1000;opacity:0;transition:transform .35s ease,opacity .35s ease;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
@media (max-width:991px){body{display:block}
.mobile-bar{display:flex}
.mobile-bar .brand{margin-bottom:0}
.site-header{position:fixed;inset:0 auto 0 0;z-index:200;transform:translateX(-100%);transition:transform var(--transition-base);min-height:auto;overflow-y:auto}
body.menu-open .site-header{transform:translateX(0)}
body.menu-open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:150}
.site-main{padding:var(--gap-lg)}
.detail-title{font-size:1.325rem}
}
@media (max-width:767px){.site-main{padding:var(--gap-md)}
.section-title{font-size:1.125rem}
.detail-panel{padding:var(--gap-md)}
.action-bar{flex-direction:column;align-items:flex-start}
.url-display{width:100%}
}
@media only screen and (max-width:768px){
.obj-hidden,.genre-pill svg{display:none}
.share-btn{justify-content:center;width:100%}
.genre-cloud{display:grid;grid-template-columns:repeat(3, 1fr)}
.genre-pill{justify-content:center}
}
@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}
}