/* Home, FAQ and guide hub experiment. Console pages and articles are unchanged. */
:root {
    --n-page: #f5f6f7;
    --n-surface: #fff;
    --n-tint: #eef1f3;
    --n-text: #24272b;
    --n-muted: #626971;
    --n-border: #d9dde1;
    --n-accent: #c90012;
    --n-active: #fff1f2;
}
:root[data-site-theme="dark"] {
    --n-page: #17191b;
    --n-surface: #222527;
    --n-tint: #2b2e31;
    --n-text: #f2f3f4;
    --n-muted: #b3bbc3;
    --n-border: #42474c;
    --n-accent: #ff5968;
    --n-active: #402126;
}
body.home-theme, body.faq-theme { background: #f5f6f7; color: #24272b; }
body.home-theme::before, body.home-theme::after, body.faq-theme::before, body.faq-theme::after,
body.home-theme .pixel-bg, body.faq-theme .pixel-bg { display: none !important; }
.n-home { color: #24272b; font-family: var(--font-reading); padding-bottom: 90px; }
.n-home *, body.faq-theme * { letter-spacing: 0; }
.n-shell { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.n-brand-band { background: #e60012; color: #fff; }
.n-brand-inner { display: flex; align-items: center; gap: 20px; min-height: 160px; }
.n-brand-logo { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 16px; }
.n-brand-inner h1 { font: 700 42px/1.15 var(--font-display); }
.n-channel-link { margin-left: auto; display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; min-height: 44px; padding: 10px 14px; border: 1px solid #ffffff80; border-radius: 8px; font-size: 14px; }
.n-home-main { padding-top: 28px; }
.n-home-identity { padding: 8px 0 28px; max-width: 720px; }
.n-home-identity h2 { font: 700 26px/1.3 var(--font-display); color: var(--n-text); margin-bottom: 12px; }
.n-home-identity p { font-size: 15px; line-height: 1.7; color: var(--n-muted); }
.n-home .n-channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.n-home .n-channel--main { grid-column: 1 / -1; border-left: 4px solid #c90012; }
.n-home .n-channel--main small { max-width: 680px; }
.n-home .n-channel:not(.n-channel--main) { grid-template-columns: 40px minmax(0, 1fr) 18px; padding: 16px; gap: 12px; }
.n-home .n-channel:not(.n-channel--main) img { width: 40px; height: 40px; }
.n-home-footer { display: flex; justify-content: flex-start; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--n-border); }
.n-home-footer a { color: var(--n-muted); text-decoration: none; }
@media (max-width: 900px) {
    .n-home .n-channel-grid { grid-template-columns: 1fr; }
    .n-home-identity { padding-top: 16px; padding-bottom: 20px; }
    .n-home-identity h2 { font-size: 24px; }
}
.n-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #d9dde1; padding-bottom: 28px; gap: 24px; }
.n-shortcut { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; padding: 16px 0; min-height: 100px; }
.n-shortcut-icon { font-size: 28px; color: #e60012; flex: 0 0 38px; }
.n-shortcut > span:not(.n-faq-mark) { min-width: 0; flex: 1; }
.n-shortcut strong { display: block; font: 700 20px/1.25 var(--font-display); }
.n-shortcut small { display: block; margin-top: 6px; color: #626971; font-size: 13px; line-height: 1.5; }
.n-shortcut > .bi:last-child { color: #69727b; }
.n-shortcut:hover strong, .n-request-link:hover strong { color: #e60012; }
.n-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.n-section-heading h2 { font: 700 24px/1.25 var(--font-display); text-transform: none; }
.n-section-heading > a { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #59616a; text-decoration: none; }
.n-console-section { padding: 32px 0; }
.n-console-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.n-console { border: 1px solid #dde1e5; border-radius: 8px; background: #fff; color: inherit; text-decoration: none; overflow: hidden; transition: border-color 150ms, box-shadow 150ms; }
.n-console-image { aspect-ratio: 1.5; display: grid; place-items: center; padding: 20px; background: #f0f2f4; }
.n-console-image img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.n-console > span { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px; font: 700 15px/1.4 var(--font-display); }
.n-console:hover { border-color: #e60012; box-shadow: 0 3px 0 #e60012; }
.n-console > span > i { color: #e60012; }
.n-community { border-top: 1px solid #d9dde1; padding: 32px 0; }
.n-home .n-community { border-top: 0; }
.n-community .n-section-heading > i { color: #626971; font-size: 20px; }
.n-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.n-channel { display: grid; grid-template-columns: 54px minmax(0, 1fr) 20px; gap: 16px; align-items: center; min-height: 108px; padding: 20px; background: #fff; border: 1px solid #dde1e5; border-radius: 8px; color: inherit; text-decoration: none; }
.n-channel img { width: 54px; height: 54px; border-radius: 8px; object-fit: contain; }
.n-channel strong { display: block; font-size: 15px; line-height: 1.4; }
.n-channel small { display: block; font-size: 13px; line-height: 1.5; margin-top: 4px; color: #626971; }
.n-channel > i { color: #e60012; }
.n-channel:hover { border-color: #e60012; }
.n-channel--support:hover { border-color: #ef8500; }
.n-channel--support > i { color: #cc6900; }
.n-request-link { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-block: 1px solid #d9dde1; color: inherit; text-decoration: none; }
.n-request-link > span { flex: 1; min-width: 0; }
.n-request-link strong, .n-request-link small { display: block; }
.n-request-link strong { font-size: 14px; }
.n-request-link small { margin-top: 4px; font-size: 13px; color: #626971; }
.n-home-footer { padding-block: 28px; color: #737b84; font-size: 12px; text-align: left; background: none; border: 0; animation: none; }
.n-home a:focus-visible { outline: 3px solid #1676b5; outline-offset: 4px; }

.faq-page { color: #24272b; }
.faq-header { position: relative; min-height: 80px; background: #e60012; border: 0; backdrop-filter: none; padding: 16px max(24px, calc((100% - 1120px) / 2)); }
.faq-brand { font: 700 20px var(--font-display); }
.faq-brand img { border-radius: 8px; width: 44px; height: 44px; }
.faq-home-link { color: #fff; border-color: #ffffff80; font-family: var(--font-reading); font-size: 13px; min-height: 44px; }
.faq-home-link:hover { background: #ffffff18; border-color: #fff; }
.faq-main { width: min(1120px, calc(100% - 48px)); padding: 40px 0 120px; }
.faq-hero { grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; }
.faq-hero h1 { font: 700 40px/1.2 var(--font-display); text-transform: none; }
.faq-hero-copy > p { color: #626971; font-size: 15px; line-height: 1.7; max-width: 720px; margin-top: 10px; }
.faq-search-wrap { background: #fff; border-color: #cbd1d7; min-height: 58px; color: #e60012; max-width: 720px; }
.faq-search-wrap input { color: #24272b; font-size: 16px; }
.faq-search-wrap input::placeholder { color: #69727b; }
.faq-search-wrap:focus-within { background: #fff; border-color: #e60012; box-shadow: 0 0 0 3px #e6001212; }
.faq-search-wrap button { color: #626971; }
.faq-search-wrap button:hover { color: #24272b; background: #eef1f3; }
.faq-search-wrap button[hidden] { display: none; }
.faq-toolbar { top: 0; background: #f5f6f7; border-bottom: 1px solid #d9dde1; padding: 12px 0; }
.faq-tabs { gap: 8px; padding: 3px; }
.faq-tabs button { min-height: 44px; color: #59616a; background: #fff; border-color: #d9dde1; font: 600 13px var(--font-reading); padding: 0 14px; }
.faq-tabs button:hover { color: #e60012; background: #fff; border-color: #e60012; }
.faq-tabs button.active { color: #fff; border-color: #e60012; background: #e60012; }
.faq-tabs button:focus-visible, .faq-item summary:focus-visible, .faq-home-link:focus-visible { outline: 3px solid #1676b5; outline-offset: 3px; }
.faq-result-count { font-size: 13px; color: #626971; margin-top: 16px; }
.faq-result-count:empty { display: none; }
.faq-content { gap: 36px; padding-top: 28px; }
.faq-section-heading { gap: 12px; margin-bottom: 16px; }
.faq-section-heading > i { color: #e60012; font-size: 22px; }
.faq-section-heading h2 { color: #24272b; font: 700 22px/1.25 var(--font-display); text-transform: none; }
.faq-section-heading div span { color: #69727b; font-size: 12px; }
.faq-list { border-color: #d9dde1; }
.faq-item { border-color: #d9dde1; }
.faq-item summary { min-height: 72px; padding: 14px 12px; }
.faq-item summary:hover { background: #eceff2; }
.faq-item-number { color: #828b95; font-size: 12px; }
.faq-item-question { color: #24272b; font-size: 15px; line-height: 1.55; }
.faq-item-toggle { border: 0; color: #69727b; background: #e8ecef; border-radius: 50%; }
.faq-item[open] { background: #fff; }
.faq-item[open] .faq-item-toggle { background: #e60012; color: #fff; border: 0; }
.faq-answer { max-width: 940px; color: #59616a; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.faq-answer strong { color: #24272b; }
.faq-answer a { color: #b90010; text-decoration-color: #b9001060; }
.faq-answer code { color: #24272b; background: #eef1f3; border-color: #d9dde1; font-size: 13px; }
.faq-note { border-color: #b8d8c2; background: #f0f8f3; }
.faq-note > i { color: #258346; }
.faq-warning { background: #fff9eb; border-color: #ead59d; }
.faq-warning > i { color: #9a7100; }
.faq-example, .faq-format-grid > div, .faq-definitions > div { border-color: #d9dde1; background: #f5f6f7; }
.faq-example span { color: #626971; }
.faq-install-order span { color: #24272b; border-color: #d9dde1; }
.faq-password { background: #f5f6f7; border-color: #d9dde1; }
.faq-password code { color: #24272b; }
.faq-password button { background: #e8ecef; color: #24272b; }
.faq-empty h2 { color: #24272b; font-size: 24px; text-transform: none; }
.faq-empty p { color: #626971; font-size: 14px; }
.faq-empty button { background: #e60012; color: #fff; min-height: 44px; }
.faq-support { padding: 28px 0; gap: 20px; border-color: #d9dde1; }
.faq-support > img { width: 64px; height: 64px; border-radius: 8px; flex: 0 0 64px; }
.faq-support > div { flex: 1; min-width: 0; }
.faq-support h2 { color: #24272b; font: 700 22px/1.3 var(--font-display); text-transform: none; }
.faq-support span { color: #a75600; font-size: 12px; }
.faq-support p { color: #626971; font-size: 13px; line-height: 1.6; }
.faq-support > a { background: #e87a00; color: #fff; border: 0; font: 700 13px var(--font-reading); min-height: 46px; }
.faq-support > a:hover { background: #c96400; }
.n-home-footer { opacity: 1; transform: none; }
.n-language-slot { flex: 0 0 44px; min-width: 44px; }
body.home-theme .n-language-slot .lang-floating, body.faq-theme .n-language-slot .lang-floating { position: relative; top: auto; right: auto; bottom: auto; left: auto; }
.n-language-slot .lang-floating-toggle { width: 44px; height: 44px; }
.n-language-slot .lang-floating-menu { top: calc(100% + 8px); bottom: auto; right: 0; }
.faq-header { gap: 12px; }
.faq-header .faq-brand { margin-right: auto; }
.faq-support > a { background: #f08a00; color: #24272b; }
.faq-support > a:hover { background: #e77b00; }

body.home-theme .app-bottom-nav, body.faq-theme .app-bottom-nav { background: #fff; border-color: #d9dde1; box-shadow: 0 4px 24px #24272b12; backdrop-filter: none; }
body.home-theme .app-bottom-nav-item, body.faq-theme .app-bottom-nav-item { color: #69727b; }
body.home-theme .app-bottom-nav-item.active, body.faq-theme .app-bottom-nav-item.active { color: #e60012; background: #fff1f2; }
body.home-theme .lang-floating-toggle, body.faq-theme .lang-floating-toggle { background: #fff; border-color: #d9dde1; box-shadow: 0 3px 12px #24272b12; }
@media (max-width: 900px) {
    .n-brand-inner h1 { font-size: 34px; }
    .n-shortcuts { gap: 16px; }
    .n-shortcut { gap: 10px; }
    .n-shortcut strong { font-size: 18px; }
    .n-console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .n-console-image { aspect-ratio: 1.8; }
    .faq-support { flex-wrap: wrap; }
    .faq-support > a { margin-left: 84px; }
}
@media (max-width: 600px) {
    .n-shell { width: calc(100% - 32px); }
    .n-brand-inner { min-height: 120px; gap: 12px; }
    .n-brand-logo { width: 64px; height: 64px; flex-basis: 64px; border-radius: 12px; }
    .n-brand-inner h1 { font-size: 26px; max-width: 190px; }
    .n-channel-link { padding: 0; justify-content: center; border: 0; min-width: 36px; font-size: 22px; }
    .n-channel-link span, .n-channel-link .bi-arrow-up-right { display: none; }
    .n-channel-link { display: none; }
    .n-brand-inner h1 { flex: 1; min-width: 0; max-width: none; }
    .n-home-main { padding-top: 8px; }
    .n-shortcuts { grid-template-columns: 1fr; gap: 0; padding-bottom: 12px; }
    .n-shortcut { min-height: 84px; padding: 12px 4px; border-bottom: 1px solid #e2e5e8; gap: 14px; }
    .n-shortcut:last-child { border: 0; }
    .n-shortcut strong { font-size: 18px; }
    .n-shortcut small { margin-top: 3px; }
    .n-section-heading h2 { font-size: 21px; }
    .n-section-heading > a span { display: none; }
    .n-console-grid { gap: 12px; }
    .n-console-image { aspect-ratio: 1.35; padding: 12px; }
    .n-console > span { padding: 12px; font-size: 13px; gap: 4px; }
    .n-channel-grid { grid-template-columns: 1fr; gap: 12px; }
    .n-channel { padding: 16px; grid-template-columns: 46px minmax(0, 1fr) 18px; gap: 12px; min-height: 96px; }
    .n-channel img { width: 46px; height: 46px; }
    .n-console-section, .n-community { padding-block: 26px; }
    .n-home-footer { font-size: 11px; }
    .faq-header { padding: 14px 16px; min-height: 72px; }
    .faq-brand { font-size: 17px; gap: 10px; }
    .faq-brand img { width: 40px; height: 40px; }
    .faq-main { width: calc(100% - 32px); padding-top: 28px; }
    .faq-hero h1 { font-size: 32px; }
    .faq-hero-copy > p { font-size: 14px; }
    .faq-toolbar { margin-inline: -16px; padding: 10px 16px; background: #f5f6f7; }
    .faq-tabs button { font-size: 12px; }
    .faq-item summary { grid-template-columns: 22px minmax(0, 1fr) 32px; gap: 8px; padding-inline: 0; }
    .faq-item-question { font-size: 14px; }
    .faq-item-toggle { width: 30px; height: 30px; }
    .faq-answer { padding: 0 12px 22px 30px; font-size: 14px; }
    .faq-support { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
    .faq-support > img { width: 48px; height: 48px; }
    .faq-support h2 { font-size: 20px; }
    .faq-support > a { grid-column: 1 / -1; width: 100%; margin-left: 0; white-space: normal; text-align: center; padding: 12px; }
}
@media (max-width: 360px) {
    .n-brand-inner h1 { font-size: 23px; }
    .n-brand-logo { width: 56px; height: 56px; flex-basis: 56px; }
    .n-console > span { font-size: 12px; padding: 10px; }
    .faq-brand { font-size: 14px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .n-home *, .n-home *::before, .n-home *::after { transition: none !important; animation: none !important; }
}

/* Shared palettes only affect the two pages in this experiment. */
body.home-theme, body.faq-theme, body.games-theme { background: var(--n-page); color: var(--n-text); color-scheme: light; }
:root[data-site-theme="dark"] body.home-theme, :root[data-site-theme="dark"] body.faq-theme, :root[data-site-theme="dark"] body.games-theme { color-scheme: dark; }
.n-home, .faq-page, .faq-item-question, .faq-section-heading h2, .faq-support h2, .faq-empty h2,
.faq-answer strong, .faq-install-order span { color: var(--n-text); }
.n-shortcut small, .n-section-heading > a, .n-channel small, .n-request-link small,
.n-community .n-section-heading > i, .faq-hero-copy > p, .faq-section-heading div span,
.faq-result-count, .faq-answer, .faq-support p, .faq-empty p, .faq-example span { color: var(--n-muted); }
.n-shortcuts, .n-community, .n-request-link, .faq-toolbar, .faq-list, .faq-item,
.faq-support, .faq-definitions > div, .faq-install-order span { border-color: var(--n-border); }
.n-console, .n-channel, .faq-search-wrap, .faq-search-wrap:focus-within,
.faq-tabs button, .faq-item[open] { background: var(--n-surface); border-color: var(--n-border); }
.n-console-image, .faq-example, .faq-format-grid > div, .faq-password { background: var(--n-tint); border-color: var(--n-border); }
.n-shortcut > .bi:last-child, .faq-search-wrap button, .faq-tabs button, .faq-item-number { color: var(--n-muted); }
.n-shortcut:hover strong, .n-request-link:hover strong, .n-console > span > i,
.n-channel > i, .faq-section-heading > i, .faq-search-wrap, .faq-answer a,
.faq-definitions dt, .faq-install-order b, .faq-example > i { color: var(--n-accent); }
.faq-search-wrap input, .faq-password code, .faq-answer code { color: var(--n-text); }
.faq-search-wrap input::placeholder { color: var(--n-muted); }
.faq-search-wrap button:hover, .faq-password button, .faq-item-toggle,
.faq-item summary:hover, .faq-answer code { background: var(--n-tint); color: var(--n-text); border-color: var(--n-border); }
.faq-toolbar { background: var(--n-page); }
.faq-tabs button.active, .faq-tabs button.active:hover, .faq-item[open] .faq-item-toggle { background: #e60012; color: #fff; border-color: #e60012; }
.faq-tabs button:hover { background: var(--n-surface); color: var(--n-accent); border-color: var(--n-accent); }
.faq-search-wrap:focus-within { border-color: var(--n-accent); }
.n-channel--support > i { color: #cc6900; }
:root[data-site-theme="dark"] .n-channel--support > i, :root[data-site-theme="dark"] .faq-support span { color: #ffb05c; }
:root[data-site-theme="dark"] .faq-note { background: #1b3023; border-color: #3b6850; }
:root[data-site-theme="dark"] .faq-note > i { color: #7bdfa0; }
:root[data-site-theme="dark"] .faq-warning { background: #332b1b; border-color: #766036; }
:root[data-site-theme="dark"] .faq-warning > i { color: #f9cd6c; }

.n-shortcuts { gap: 16px; padding: 4px 0 28px; }
.n-shortcut { padding: 20px; background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 8px; min-height: 116px; position: relative; transition: border-color 150ms; }
.n-shortcut:hover { border-color: var(--n-accent); }
.n-shortcut-image { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; border-radius: 8px; }
.n-shortcut strong { font-size: 18px; }
.n-faq-mark { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border: 2px solid var(--n-accent); border-radius: 50%; color: var(--n-accent); font: 700 30px/1 var(--font-display); }
.n-brand-logo, .faq-brand img { outline: 3px solid #fff; outline-offset: 2px; }
.n-brand-inner h1 { flex: 1; min-width: 0; }
.n-theme-toggle { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid #ffffff80; border-radius: 8px; background: transparent; color: #fff; font-size: 20px; cursor: pointer; }
.n-theme-toggle:hover { background: #ffffff20; }
.n-theme-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.n-theme-toggle:hover::after { content: attr(title); position: absolute; top: calc(100% + 6px); right: 0; padding: 8px 10px; background: var(--n-surface); color: var(--n-text); border: 1px solid var(--n-border); border-radius: 6px; font: 12px var(--font-reading); white-space: nowrap; z-index: 100; pointer-events: none; }
.n-theme-toggle { position: relative; }

.n-other-guides { padding: 6px 0 32px; }
.n-other-guide { display: grid; grid-template-columns: 200px minmax(0, 1fr) 24px; align-items: center; gap: 24px; background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 8px; color: var(--n-text); text-decoration: none; padding: 16px 24px 16px 16px; }
.n-other-guide:hover { border-color: var(--n-accent); }
.n-other-image { display: grid; place-items: center; aspect-ratio: 1.8; background: var(--n-tint); border-radius: 4px; padding: 12px; }
.n-other-image img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.n-other-guide strong { display: block; font: 700 20px/1.4 var(--font-display); }
.n-other-guide small { display: block; color: var(--n-muted); font-size: 14px; line-height: 1.6; margin-top: 6px; }
.n-other-guide > i { color: var(--n-accent); }

.n-reading { padding: 24px 0; border-bottom: 1px solid var(--n-border); }
.n-last-guide { display: flex; gap: 16px; align-items: center; }
.n-bookmark { width: 18px; height: 27px; flex: 0 0 18px; background: var(--n-accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
#app .n-bookmark { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%) !important; }
.n-last-guide > div { min-width: 0; flex: 1; }
.n-last-guide small { display: block; font-size: 12px; color: var(--n-muted); margin-bottom: 4px; }
.n-last-guide > div > a { color: var(--n-text); font-size: 15px; line-height: 1.5; font-weight: 600; text-decoration: none; }
.n-last-guide > div > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.n-resume-link { display: flex; gap: 8px; align-items: center; min-height: 44px; color: var(--n-accent); font-size: 14px; font-weight: 600; text-decoration: none; }
.n-saved-guides { display: flex; align-items: center; gap: 10px; color: var(--n-muted); text-decoration: none; font-size: 13px; margin-top: 16px; }
.n-saved-guides > i:last-child { margin-left: auto; }
.n-site-footer { padding: 24px 0 96px; background: none; border: 0; color: var(--n-muted); font: 12px/1.6 var(--font-reading); text-align: left; opacity: 1; transform: none; animation: none; }
.n-home .n-home-main { padding-bottom: 0; }
.n-site-footer.n-home-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid var(--n-border); padding: 24px 0 104px; text-align: center; }
.n-home-footer a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-transform: none; }
.n-home-footer a:hover { color: var(--n-accent); text-decoration: underline; }
.n-home { padding-bottom: 0; }
.faq-main { padding-bottom: 0; }
.n-shortcuts + #pwaInstallSlot:empty { display: none; }

body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-bottom-nav,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .lang-floating-toggle,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .lang-floating-menu,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-launcher,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-faq-launcher { background: var(--n-surface); border-color: var(--n-border); color: var(--n-text); box-shadow: 0 3px 12px #00000012; }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-bottom-nav-item { color: var(--n-muted); }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-bottom-nav-item.active,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-faq-launcher.active { color: var(--n-accent); background: var(--n-active); border-color: var(--n-accent); }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-launcher:hover,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-faq-launcher:hover { color: var(--n-accent); border-color: var(--n-accent); }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .lang-floating-option { color: var(--n-text); }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .lang-floating-option:hover,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .lang-floating-option.active { background: var(--n-active); color: var(--n-accent); }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-dialog { background: var(--n-surface); border-color: var(--n-border); border-radius: 8px; }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-head { border-color: var(--n-border); color: var(--n-accent); }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-head input,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-result { color: var(--n-text); }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-result:hover { background: var(--n-active); border-color: var(--n-accent); }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-result-icon { background: var(--n-tint); color: var(--n-accent); border-color: var(--n-border); }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-head input::placeholder,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-close,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-result-copy small,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-result-kind,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-result-arrow,
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-meta { color: var(--n-muted); }
body:is(.home-theme, .faq-theme, .games-theme, .guide-theme) .app-search-close:hover { background: var(--n-tint); color: var(--n-text); }
.n-home .pwa-install-card { background: var(--n-surface); border-color: var(--n-border); }
.n-home .pwa-install-copy strong { color: var(--n-text); }
.n-home .pwa-install-copy small { color: var(--n-muted); }
.n-home .pwa-install-action { color: var(--n-accent); background: var(--n-active); }

@media (max-width: 900px) {
    .n-shortcut { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .n-shortcut > span:not(.n-faq-mark) { flex-basis: calc(100% - 72px); }
    .n-shortcut > .bi:last-child { position: absolute; right: 12px; top: 16px; }
}
@media (max-width: 600px) {
    .n-brand-inner { gap: 10px; }
    .n-theme-toggle { width: 40px; height: 44px; flex-basis: 40px; }
    .n-brand-inner h1 { font-size: 24px; }
    .n-shortcuts { gap: 10px; padding: 12px 0 20px; }
    .n-shortcut, .n-shortcut:last-child { flex-wrap: nowrap; min-height: 92px; padding: 16px; border: 1px solid var(--n-border); }
    .n-shortcut > span:not(.n-faq-mark) { flex-basis: auto; }
    .n-shortcut > .bi:last-child { position: static; }
    .n-other-guide { grid-template-columns: 100px minmax(0, 1fr) 16px; gap: 12px; padding: 12px; }
    .n-other-image { aspect-ratio: 1; padding: 8px; }
    .n-other-guide strong { font-size: 16px; }
    .n-other-guide small { font-size: 12px; }
    .n-last-guide { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; }
    .n-bookmark { margin-top: 4px; }
    .n-resume-link { grid-column: 2; min-height: 36px; }
    .n-site-footer { font-size: 12px; }
    .faq-header { gap: 8px; }
    .faq-brand { font-size: 15px; gap: 8px; }
    .faq-home-link { width: 32px; min-width: 32px; border: 0; }
}
@media (max-width: 360px) {
    .n-brand-logo { width: 48px; height: 48px; flex-basis: 48px; }
    .n-brand-inner h1 { font-size: 21px; }
    .faq-brand { font-size: 13px; }
    .faq-brand img { width: 32px; height: 32px; }
}

/* One header keeps logo, text and controls identical across the three pages. */
.n-site-header { background: #e60012; color: #fff; }
.n-site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; padding-block: 18px; }
.n-site-brand { display: flex; align-items: center; gap: 18px; min-width: 0; color: #fff; text-decoration: none; }
.n-site-brand img { width: 64px; height: 64px; flex: 0 0 64px; outline: 2px solid #fff; outline-offset: 2px; border-radius: 12px; }
.n-site-brand > :is(h1, span) { font: 700 28px/1.2 var(--font-display); letter-spacing: 0; }
.n-site-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.n-header-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 100px; padding: 0 12px; color: #fff; text-decoration: none; font-size: 13px; border: 1px solid #ffffff80; border-radius: 8px; }
.n-header-link:hover { background: #ffffff20; }
.n-site-header .n-language-slot { flex: 0 0 44px; width: 44px; }
.n-site-header .lang-floating { position: relative; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; }
.n-site-header .lang-floating-toggle { width: 44px; height: 44px; }
.n-site-brand:focus-visible, .n-header-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.n-other-image .n-device-image--dark { display: none; }
.n-other-image .n-device-image--light { display: block; }
:root[data-site-theme="dark"] .n-other-image .n-device-image--light { display: none; }
:root[data-site-theme="dark"] .n-other-image .n-device-image--dark { display: block; }

body.guide-hub-theme { background: var(--n-page); color: var(--n-text); color-scheme: light; --n-accent: #087a2d; --n-active: #e7f5eb; }
:root[data-site-theme="dark"] body.guide-hub-theme { color-scheme: dark; --n-accent: #70dc90; --n-active: #1c3826; }
body.guide-hub-theme::before, body.guide-hub-theme::after, body.guide-hub-theme .pixel-bg { display: none !important; }
body.guide-hub-theme .n-site-header { background: #118333; }
.n-guide-hub { font-family: var(--font-reading); color: var(--n-text); }
.n-guide-hub * { letter-spacing: 0; }
.n-guide-hub-main { padding-top: 36px; }
.n-hub-intro { margin-bottom: 28px; }
.n-hub-intro h1 { font: 700 32px/1.25 var(--font-display); }
.n-hub-intro p { margin-top: 10px; color: var(--n-muted); font-size: 15px; line-height: 1.6; }
.n-guide-hub .n-reading { margin-bottom: 28px; }
.n-hub-console-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.n-hub-console { display: flex; flex-direction: column; border: 1px solid var(--n-border); border-radius: 8px; overflow: hidden; background: var(--n-surface); color: var(--n-text); text-decoration: none; transition: border-color 150ms, box-shadow 150ms; }
.n-hub-console:hover { border-color: var(--n-accent); box-shadow: 0 3px 0 var(--n-accent); }
.n-hub-console[aria-disabled="true"] { opacity: 0.6; }
.n-hub-console-image { position: relative; width: 100%; aspect-ratio: 1.5; flex: 0 0 auto; background: var(--n-tint); }
.n-hub-console-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.n-hub-console-copy { padding: 18px; flex: 1; }
.n-hub-console-copy h2 { font: 700 19px/1.3 var(--font-display); }
.n-hub-console-copy p { margin-top: 8px; font-size: 13px; line-height: 1.65; color: var(--n-muted); }
.n-hub-console-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--n-border); font-size: 12px; color: var(--n-muted); }
.n-hub-console-footer > i { color: var(--n-accent); }
.n-guide-hub .n-other-guides { padding-top: 32px; }
.n-hub-channel { display: flex; align-items: center; gap: 18px; padding: 26px 0; border-block: 1px solid var(--n-border); }
.n-hub-channel > img { width: 48px; height: 48px; border-radius: 8px; flex: 0 0 48px; }
.n-hub-channel > div { flex: 1; min-width: 0; }
.n-hub-channel h2 { font: 700 18px/1.35 var(--font-display); }
.n-hub-channel p { margin-top: 6px; color: var(--n-muted); font-size: 13px; line-height: 1.6; max-width: 680px; }
.n-hub-channel > a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 8px; background: #118333; color: #fff; text-decoration: none; font-size: 14px; }
.n-hub-channel > a:hover { background: #09652a; }
.n-guide-hub a:focus-visible { outline: 3px solid var(--n-accent); outline-offset: 4px; }
.n-guide-hub .n-site-header a:focus-visible { outline-color: #fff; }

body.guide-hub-theme :is(.app-bottom-nav, .lang-floating-toggle, .lang-floating-menu, .app-search-launcher, .app-faq-launcher, .app-search-dialog) { background: var(--n-surface); border-color: var(--n-border); color: var(--n-text); box-shadow: 0 3px 12px #00000012; }
body.guide-hub-theme :is(.app-bottom-nav-item, .app-search-close, .app-search-meta, .app-search-result-copy small, .app-search-result-kind, .app-search-result-arrow) { color: var(--n-muted); }
body.guide-hub-theme :is(.app-bottom-nav-item.active, .lang-floating-option.active, .lang-floating-option:hover, .app-search-result:hover) { background: var(--n-active); color: var(--n-accent); border-color: var(--n-accent); }
body.guide-hub-theme :is(.lang-floating-option, .app-search-head input, .app-search-result) { color: var(--n-text); }
body.guide-hub-theme .app-search-head { color: var(--n-accent); border-color: var(--n-border); }
body.guide-hub-theme .app-search-head input::placeholder { color: var(--n-muted); }
body.guide-hub-theme .app-search-result-icon { background: var(--n-tint); color: var(--n-accent); border-color: var(--n-border); }
body.guide-hub-theme :is(.app-faq-launcher:hover, .app-search-launcher:hover) { color: var(--n-accent); border-color: var(--n-accent); }
body.guide-hub-theme .app-search-close:hover { background: var(--n-tint); color: var(--n-text); }
body.guide-hub-theme .app-search-dialog { border-radius: 8px; }

@media (max-width: 900px) {
    .n-hub-console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .n-site-header-inner { min-height: 88px; gap: 12px; padding-block: 16px; }
    .n-site-brand { gap: 12px; }
    .n-site-brand img { width: 48px; height: 48px; flex-basis: 48px; border-radius: 10px; }
    .n-site-brand > :is(h1, span) { font-size: 21px; }
    .n-site-header-actions { gap: 8px; }
    .n-header-link { display: none; }
    .n-site-header .n-language-slot { flex-basis: 40px; width: 40px; min-width: 40px; }
    .n-site-header .lang-floating-toggle { width: 40px; height: 44px; }
    .n-guide-hub-main { padding-top: 28px; }
    .n-hub-intro h1 { font-size: 26px; }
    .n-hub-intro p { font-size: 14px; }
    .n-hub-console-grid { gap: 12px; }
    .n-hub-console-image { aspect-ratio: 1.35; }
    .n-hub-console-image img { padding: 12px; }
    .n-hub-console-copy { padding: 12px; }
    .n-hub-console-copy h2 { font-size: 16px; }
    .n-hub-console-copy p { font-size: 12px; }
    .n-hub-console-footer { padding: 12px; font-size: 11px; }
    .n-hub-channel { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
    .n-hub-channel > a { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 360px) {
    .n-site-header-inner { gap: 8px; }
    .n-site-brand { gap: 10px; }
    .n-site-brand img { width: 40px; height: 40px; flex-basis: 40px; }
    .n-site-brand > :is(h1, span) { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .n-guide-hub * { animation: none !important; transition: none !important; }
}

/* Catalog surfaces share the portal palette without changing catalog logic. */
body.games-theme::before, body.games-theme::after,
body.games-theme .pixel-bg { display: none !important; }
body.games-theme .games-container { width: min(1120px, calc(100% - 48px)); padding: 32px 0; min-height: 60vh; overflow: visible; }
.n-games-title { font: 700 28px/1.3 var(--font-display); margin: 0 0 24px; color: var(--n-text); }
body.games-theme .stats-bar { background: transparent; border: 0; border-bottom: 1px solid var(--n-border); border-radius: 0; margin-bottom: 0; padding-bottom: 20px; }
body.games-theme .stat-item { padding: 0 24px 0 0; }
body.games-theme .stat-item + .stat-item { padding-left: 24px; border-color: var(--n-border); }
body.games-theme .stat-number { color: var(--n-accent); text-shadow: none; }
body.games-theme .stat-label, body.games-theme .games-progress { color: var(--n-muted); letter-spacing: 0; }
body.games-theme .games-controls { background: transparent; border: 0; padding: 20px 0 24px; gap: 16px; }
body.games-theme .console-tabs-wrap::after { display: none; }
body.games-theme .console-tab { background: var(--n-surface); color: var(--n-text); border: 1px solid var(--n-border); border-radius: 6px; box-shadow: none; transform: none; }
body.games-theme .console-tab.active { background: var(--n-active); color: var(--n-accent); border-color: var(--n-accent); }
body.games-theme .console-tab .count { color: var(--n-muted); background: var(--n-tint); }
body.games-theme .console-tab.active .count { color: var(--n-accent); background: var(--n-surface); }
body.games-theme .console-icon { filter: none; width: 28px; height: 24px; object-fit: contain; }
body.games-theme .search-box input, body.games-theme .sort-box select { background: var(--n-surface); color: var(--n-text); border: 1px solid var(--n-border); border-radius: 6px; box-shadow: none; letter-spacing: 0; }
body.games-theme .search-box input::placeholder { color: var(--n-muted); }
body.games-theme .search-box > i, body.games-theme .sort-box > i { color: var(--n-muted); }
body.games-theme .search-box input:focus, body.games-theme .sort-box select:focus { border-color: var(--n-accent); outline: 2px solid var(--n-accent); outline-offset: 2px; }
body.games-theme .game-card { background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 8px; color: var(--n-text); }
body.games-theme .game-card:hover { background: var(--n-surface); border-color: var(--n-accent); }
body.games-theme .game-cover, body.games-theme .game-card[data-console="switch"] .game-cover { background: var(--n-tint); }
body.games-theme .game-cover img { width: 100%; height: auto; object-fit: initial; }
body.games-theme .game-title h3 { color: var(--n-text); text-shadow: none; letter-spacing: 0; }
body.games-theme .game-card:hover .game-title h3 { color: var(--n-accent); }
body.games-theme .badge { color: var(--n-muted); background: var(--n-tint); border-color: var(--n-border); }
body.games-theme .skeleton-card { background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 8px; }
body.games-theme .skeleton-cover, body.games-theme .skeleton-line { background: var(--n-tint); }
body.games-theme .loading-text, body.games-theme .no-results, body.games-theme .no-results p { color: var(--n-muted); }
body.games-theme .load-more-button, body.games-theme .scroll-top { background: var(--n-surface); border-color: var(--n-border); color: var(--n-accent); }
body.games-theme .load-more-button:hover { background: var(--n-active); border-color: var(--n-accent); }
body.games-theme .games-footer { width: min(1120px, calc(100% - 48px)); max-width: 1120px; margin: 0 auto; background: transparent; border: 0; border-top: 1px solid var(--n-border); padding: 24px 0 96px; border-radius: 0; box-shadow: none; text-align: center; animation: none; opacity: 1; }
body.games-theme .games-footer-inner { border: 0; padding: 0; }
body.games-theme .games-footer .n-site-footer { padding: 16px 0 0; text-align: center; background: transparent; }
body.games-theme .games-footer-link, body.games-theme .games-footer-sep { color: var(--n-muted); }
img[src="/assets/nroms_guide.webp"] { border-radius: 8px; }
@media (max-width: 600px) {
    body.games-theme .games-footer { width: calc(100% - 32px); }
    body.games-theme .games-container { width: calc(100% - 32px); padding-top: 24px; }
    .n-games-title { font-size: 24px; margin-bottom: 20px; }
    body.games-theme .stat-item { flex: 1; }
    body.games-theme .games-grid, body.games-theme .skeleton-grid { gap: 12px; }
}