/* Shared monochrome refraction layer; visual effects only. */
:root{--accent-cool:#d0d0d5;--accent-warm:#a2a2a8;--surface:#131315;--surface-2:#19191c;--glass-ease:cubic-bezier(.22,1,.36,1);--glass-prism:radial-gradient(ellipse at 8% 0%,rgba(255,255,255,.28),transparent 48%),linear-gradient(122deg,rgba(255,255,255,.15) 0%,rgba(230,230,234,.045) 28%,rgba(255,255,255,.018) 52%,rgba(198,198,204,.08) 76%,rgba(255,255,255,.11) 100%);--glass-edge:rgba(242,242,246,.36);--glass-shadow:inset 0 1px 0 rgba(255,255,255,.68),inset 1px 0 0 rgba(255,255,255,.18),inset -1px 0 0 rgba(205,205,211,.15),inset 0 -1px 0 rgba(190,190,196,.28),inset 0 0 24px rgba(255,255,255,.045),0 14px 38px rgba(0,0,0,.30);--glass:var(--glass-prism);--stage-glass:var(--glass-prism);--taste-glass:var(--glass-prism);--liquid-surface:var(--glass-prism);--taste-edge:var(--glass-shadow);--liquid-edge:var(--glass-shadow)}
body:not(.white-bg){background-color:#09090b;background-image:radial-gradient(ellipse at 12% 8%,rgba(255,255,255,.105),transparent 34%),radial-gradient(ellipse at 88% 22%,rgba(190,190,198,.075),transparent 31%),radial-gradient(ellipse at 60% 100%,rgba(130,130,138,.07),transparent 36%)}
:is(.nav,.nav.scrolled,#sidebar,#controls,.contact-card,.welcome-card,.room-entry,.fan-item,.pill-btn,.toc-item,.unit,.genre,.topic,.sub,.card,.q,.notice,details,.track,.formula span,.opt,.btn.ghost,.back,.tag,.ctl,#info,#infModel,.tab,.dev,.chip,.panel,.glass-panel){background-image:var(--glass-prism);background-color:rgba(24,24,27,.38);background-size:180% 180%;border-color:var(--glass-edge);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(18px) saturate(155%) contrast(108%);backdrop-filter:blur(18px) saturate(155%) contrast(108%)}
:is(.room-entry,.fan-item,.pill-btn,.toc-item,.unit,.genre,.topic,.sub,.card,.q,.notice,details,.track,.formula span,.opt,.btn.ghost,.back,.tag,.ctl,#info,#infModel,.tab,.dev,.chip,.panel,.glass-panel):hover{background-position:100% 0;border-color:rgba(255,255,255,.66);box-shadow:inset 0 1px 0 rgba(255,255,255,.76),inset 1px 0 0 rgba(255,255,255,.22),inset -1px 0 0 rgba(205,205,211,.18),inset 0 -1px 0 rgba(190,190,196,.36),inset 0 0 32px rgba(255,255,255,.075),0 18px 46px rgba(0,0,0,.36)}
.nav,.nav.scrolled{background-color:rgba(14,14,16,.52);border-bottom-color:rgba(235,235,239,.28);box-shadow:inset 0 -1px 0 rgba(210,210,216,.16),0 8px 32px rgba(0,0,0,.14)}
#sidebar{background-color:rgba(16,16,18,.56);border-right-color:rgba(235,235,239,.25)}
:is(.unit,.genre,.topic,.card,#info,.contact-card,.welcome-card){border-color:rgba(235,235,239,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.60),inset 0 0 42px rgba(255,255,255,.045),0 22px 60px rgba(0,0,0,.36)}
:is(.toc-item.active,.fan-item.fan-home,.opt.sel,.btn:not(.ghost),.tag.pink,.ctl.live){background-image:linear-gradient(135deg,rgba(255,255,255,.97),rgba(228,228,232,.78) 48%,rgba(196,196,202,.86));background-color:rgba(228,228,232,.84);color:#111113;border-color:rgba(255,255,255,.92);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(170,170,176,.58),0 6px 22px rgba(0,0,0,.25)}
:is(.room-link,.page-title,.hero-title,.brand h1){text-shadow:0 1px 22px rgba(235,235,240,.14)}
.welcome-card.kfc{color:#f2f2f4;text-shadow:0 2px 14px rgba(255,255,255,.18)}
:focus-visible{outline:2px solid rgba(225,225,230,.95);outline-offset:3px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:is(.nav,.nav.scrolled,#sidebar,#controls,.contact-card,.welcome-card,.room-entry,.fan-item,.pill-btn,.toc-item,.unit,.genre,.topic,.sub,.card,.q,.notice,details,.track,.formula span,.opt,.btn.ghost,.back,.tag,.ctl,#info,#infModel,.tab,.dev,.chip,.panel,.glass-panel){background-color:rgba(24,24,27,.94)}}
@media(prefers-reduced-motion:reduce){:is(.nav,.nav.scrolled,#sidebar,#controls,.contact-card,.welcome-card,.room-entry,.fan-item,.pill-btn,.toc-item,.unit,.genre,.topic,.sub,.card,.q,.notice,details,.track,.formula span,.opt,.btn.ghost,.back,.tag,.ctl,#info,#infModel,.tab,.dev,.chip,.panel,.glass-panel){transition:none!important}}
:is(.knowledge-item,.detail-content,.toc-panel,.back-btn,.contact-item,.soundstage-wrap,.taste-wrap){background-image:var(--glass-prism);background-color:rgba(235,235,238,.76);border-color:rgba(255,255,255,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.94),inset 1px 0 0 rgba(255,255,255,.56),inset 0 -1px 0 rgba(145,145,152,.15),0 16px 42px rgba(0,0,0,.12);-webkit-backdrop-filter:blur(14px) saturate(110%);backdrop-filter:blur(14px) saturate(110%)}
body.white-bg{--ink:#151517;--ink-soft:#343438;--ink-faint:#737379;--paper:#fff;--paper-soft:#f4f4f5;--line:#dedee1;--line-strong:#c8c8cd;--accent:#66666d;--accent-soft:#ececef;--accent-warm:#a2a2a8;--shadow-soft:0 10px 30px rgba(0,0,0,.08);--shadow-lift:0 18px 42px rgba(0,0,0,.14);background:#f3f3f4}
body.white-bg .nav-item:hover,body.white-bg .toc-item:hover,body.white-bg .toc-item.active{background:rgba(100,100,106,.10);color:#29292d}
body.white-bg .knowledge-item:hover{border-color:rgba(120,120,126,.62)}
body.white-bg .toc-toggle{background:#66666d}
@media(prefers-reduced-motion:reduce){:is(.knowledge-item,.detail-content,.toc-panel,.back-btn,.contact-item,.soundstage-wrap,.taste-wrap){-webkit-backdrop-filter:none;backdrop-filter:none}}
#sideHint .fan-item{transition:transform .62s var(--ease),opacity .32s ease,border-color .3s ease}