:root { color-scheme: dark; --muted:#a1a1aa; --surface:#17171d; --line:#ffffff18; --accent:#fb7185; }
html.light { color-scheme:light; --muted:#52525b; --surface:#fff; --line:#18181b20; --accent:#be123c; }
* { box-sizing:border-box; }
body { margin:0; }
main, header > div, .flex-1 { min-width:0; }
button, a, input { -webkit-tap-highlight-color:transparent; }
button, a { touch-action:manipulation; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
input::placeholder { color:var(--muted); opacity:1; }
html.light .text-zinc-400, html.light .text-zinc-500 { color:#52525b; }
html.light .text-rose-500, html.light .text-rose-400 { color:#be123c; }
html.light .text-amber-400 { color:#92400e; }
html.light .glass-panel { background:rgba(255,255,255,.92); }
html.light .glass-card { background:#fff; box-shadow:0 4px 18px #18181b08; }
html.light .nav-tab:not(.text-white):hover { color:#be123c; background:#fff1f2; }
html.light .glass-card .bg-black\/20, html.light .glass-card > .bg-black\/30 { background:#f4f4f5; }
html.light .voice-btn:not(.text-white) { background:#f4f4f5; color:#3f3f46; border-color:#d4d4d8; }
html.light #animeKind, html.light #animeStatus, html.light #animeGenresBox > span { background:#fff1f2; color:#9f1239; border-color:#fecdd3; }
html.light #animeMpaa { background:#fffbeb; color:#92400e; }
html.light .border-white\/10, html.light .border-white\/5 { border-color:#18181b12; }
header .site-header-layout { display:grid; grid-template-columns:auto minmax(220px,1fr) auto; gap:24px; }
.site-header-layout > :nth-child(2) { max-width:440px; justify-self:center; }
.telegram-banner { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 200px; min-height:154px; padding:0; margin-top:16px; margin-bottom:28px; border:1px solid #fb71852b; border-radius:22px; overflow:visible; background:#211827; color:white; }
.banner-art { position:relative; min-width:0; align-self:stretch; overflow:visible; background:transparent; pointer-events:none; }
.banner-art img { position:absolute; right:8px; bottom:0; width:auto; max-width:none; height:calc(100% + 34px); object-fit:contain; object-position:center bottom; }
.banner-copy { min-width:0; padding:20px 28px; }
.banner-label { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fda4af; margin-bottom:7px; }
.telegram-banner h2 { font-size:22px; line-height:1.25; font-weight:800; color:#fff; margin-bottom:6px; }
.telegram-banner p { font-size:12px; line-height:1.5; color:#e4e4e7; }
.banner-cta { display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:8px 14px; border-radius:10px; background:#e11d48; color:#fff; font-size:11px; font-weight:700; }
.telegram-banner:hover .banner-cta { background:#be123c; }
html.light .telegram-banner { background:#fff1f2; border-color:#fecdd3; color:#4c172b; }
html.light .telegram-banner h2 { color:#4c172b; }
html.light .telegram-banner p { color:#694451; }
html.light .banner-label { color:#be123c; }
.carousel-section { margin-bottom:28px; min-width:0; }
.carousel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.carousel-heading h2 { font-size:17px; font-weight:750; }
.carousel-heading h2::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#f43f5e; margin-right:10px; vertical-align:middle; }
.carousel-controls { display:flex; gap:6px; flex-shrink:0; }
.carousel-arrow { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--accent); }
.carousel-arrow:hover:enabled { border-color:var(--accent); }
.carousel-arrow:disabled { opacity:.3; cursor:default; }
.anime-carousel { display:flex; gap:16px; overflow-x:auto; padding:5px 2px 12px; scroll-snap-type:x mandatory; scroll-padding:2px; scrollbar-width:thin; scrollbar-color:#f43f5e66 transparent; overscroll-behavior-x:contain; }
.anime-carousel::-webkit-scrollbar, #voiceSwitcher::-webkit-scrollbar { height:5px; }
.anime-carousel::-webkit-scrollbar-thumb, #voiceSwitcher::-webkit-scrollbar-thumb { background:#f43f5e66; border-radius:8px; }
.anime-carousel > .glass-card { flex:0 0 200px; width:200px; scroll-snap-align:start; }
#mainContainer .grid > .glass-card { width:100%; min-width:0; }
.anime-card { display:flex; text-decoration:none; color:inherit; }
html.light .anime-card span.text-rose-400 { color:#fda4af; }
html.light .anime-card:hover .group-hover\:text-white { color:white; }
.glass-card h3 { min-height:2.7em; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; }
#voiceSwitcher { min-width:0; max-width:100%; scrollbar-width:thin; scrollbar-color:#f43f5e66 transparent; }
.voice-btn { flex-shrink:0; }
#animeTitle { overflow-wrap:anywhere; line-height:1.15; }
#animeDesc { overflow-wrap:anywhere; }
@media (min-width:768px) and (max-width:1099px) {
 header .site-header-layout { grid-template-columns:auto 1fr; gap:12px 24px; }
 .site-header-layout > nav { grid-column:1 / -1; justify-self:center; }
 .site-header-layout > :nth-child(2) { justify-self:end; }
}
@media(max-width:767px) {
 header .site-header-layout { display:flex; gap:10px; padding-top:12px; padding-bottom:10px; }
 .site-header-layout > :nth-child(2) { max-width:none; }
 .site-header-layout nav { justify-content:space-between; }
 .site-header-layout .nav-tab { flex:1; padding-left:9px; padding-right:9px; }
 .telegram-banner { grid-template-columns:minmax(0,1fr) clamp(88px,28vw,150px); min-height:148px; padding:0; margin-bottom:22px; border-radius:18px; }
 .banner-copy { padding:16px 14px; }
 .banner-art img { right:0; height:calc(100% + 30px); }
 .telegram-banner h2 { font-size:18px; }
 .telegram-banner p { font-size:11px; }
 .banner-label { font-size:9px; letter-spacing:.06em; }
 .anime-carousel { gap:12px; }
 .anime-carousel > .glass-card { flex-basis:156px; width:156px; }
 .carousel-heading h2 { font-size:16px; }
 .carousel-arrow { width:34px; height:34px; }
 .carousel-section { margin-bottom:22px; }
 .watch-header { gap:10px; flex-wrap:wrap; }
 .watch-header > a { font-size:20px; }
 .watch-header > div { gap:6px; }
 .watch-header > div > a { padding:10px; font-size:11px; }
 main .watch-details { padding:18px; gap:20px; }
 main .watch-poster { width:150px; }
 #animeTitle { font-size:24px; }
 #voiceSwitcher { padding-bottom:8px; }
}
@media(max-width:380px) {
 .watch-header .back-label { display:none; }
 .watch-header .back-link { width:36px; height:36px; justify-content:center; padding:0; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }

/* Repeated translucent layers are expensive while scrolling on mobile GPUs. */
body .glass-card, body .glass-card * { backdrop-filter:none; -webkit-backdrop-filter:none; }
body .glass-card { background:#18171d; }
html.light body .glass-card { background:#fff; }
.carousel-section { content-visibility:auto; contain-intrinsic-size:auto 470px; }
#mainContainer .grid > .anime-card { content-visibility:auto; contain-intrinsic-size:auto 390px; }
.poster-frame, .watch-poster { background:#29262f; }
html.light .poster-frame, html.light .watch-poster { background:#e4e4e7; }
.poster-frame img:not(.image-ready), .watch-poster img:not(.image-ready) { opacity:0; }
.poster-frame img.image-failed, .watch-poster img.image-failed { visibility:hidden; }
.skeleton { background:#302a36; border-radius:7px; }
html.light .skeleton { background:#e1dce4; }
.skeleton-heading { width:180px; height:20px; margin-bottom:18px; }
.skeleton-layout { margin-bottom:28px; animation:skeleton-pulse 1.6s ease-in-out infinite alternate; }
.skeleton-row { display:flex; gap:16px; overflow:hidden; }
.skeleton-card { flex:0 0 200px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--surface); }
.skeleton-poster { aspect-ratio:2/3; border-radius:0; }
.skeleton-lines { padding:14px; }
.skeleton-line { height:12px; margin-bottom:10px; }
.skeleton-line.short { width:65%; }
.skeleton-button { height:32px; margin-top:18px; }
.skeleton-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; }
.skeleton-grid .skeleton-card { min-width:0; }
.watch-details.is-loading #animeTitle, .watch-details.is-loading #animeOrigTitle,
.watch-details.is-loading #animeDesc, .watch-details.is-loading .watch-poster { color:transparent; background:#302a36; border-radius:8px; animation:skeleton-pulse 1.6s ease-in-out infinite alternate; }
html.light .watch-details.is-loading #animeTitle, html.light .watch-details.is-loading #animeOrigTitle,
html.light .watch-details.is-loading #animeDesc, html.light .watch-details.is-loading .watch-poster { background:#e1dce4; }
.watch-details.is-loading #animeTitle { min-height:40px; }
.watch-details.is-loading #animeOrigTitle { min-height:14px; width:60%; }
.watch-details.is-loading #animeDesc { min-height:120px; }
.watch-details.is-loading #animeKind, .watch-details.is-loading #animeStatus { visibility:hidden; }
@keyframes skeleton-pulse { from { opacity:.55; } to { opacity:1; } }
@media(max-width:1023px) { .skeleton-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:767px) {
 body .glass-panel { backdrop-filter:none; -webkit-backdrop-filter:none; background:#15131a; }
 html.light body .glass-panel { background:#faf9fb; }
 body .glass-card { box-shadow:none; }
 body .glass-card, body .glass-card img { transition:none; }
 body .glass-card:hover, body .glass-card:hover img { transform:none; }
 .carousel-section { contain-intrinsic-size:auto 395px; }
 .skeleton-row { gap:12px; }
 .skeleton-card { flex-basis:156px; }
 .skeleton-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
}
@media(max-width:639px) { .skeleton-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .skeleton-layout, .watch-details.is-loading * { animation:none !important; } }