/* Preferences use shared tokens so every page keeps its original hierarchy. */
:root{--settings-bg:#171819;--settings-text:#f5f4f0;--settings-muted:#a9aaa6;--settings-line:#ffffff24;--site-accent:#e8b65e;--palette-color:#e8b65e}
:root[data-mode=light]{--settings-bg:#fafaf7;--settings-text:#20221f;--settings-muted:#64665f;--settings-line:#20221f28}
html body{--accent:var(--site-accent)}
.settings-trigger,.settings-menu-link{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:inherit;padding:8px;cursor:pointer}.settings-trigger{width:40px;height:40px;flex-shrink:0;border-radius:6px}.settings-trigger:hover{background:var(--settings-line)}.settings-trigger svg,.settings-menu-link svg{width:21px;height:21px}.settings-menu-link{gap:9px;font:inherit}.settings-open{overflow:hidden}
.site-settings{background:var(--settings-bg);color:var(--settings-text);width:min(460px,calc(100vw - 28px));max-height:calc(100dvh - 32px);margin:auto;padding:32px;border:1px solid var(--settings-line);border-radius:12px;overflow:auto;overscroll-behavior:contain;box-shadow:0 24px 80px #0006;animation:settings-in .22s ease-out}.site-settings::backdrop{background:#0009}.site-settings svg{width:22px;height:22px;flex-shrink:0}.settings-heading{display:flex;justify-content:space-between;align-items:center}.settings-kicker{font-size:9px;letter-spacing:2px;color:var(--settings-muted)}.settings-heading h2{font-size:30px;letter-spacing:-1px;margin:10px 0 0}.settings-close{display:grid;place-items:center;width:40px;height:40px;background:none;border:1px solid var(--settings-line);border-radius:50%;color:inherit}.settings-intro{font-size:13px;color:var(--settings-muted);margin:16px 0 30px}.site-settings fieldset{padding:0;margin:0 0 24px;border:0;min-width:0}.site-settings legend{font-size:12px;font-weight:600;margin-bottom:12px}.settings-segment{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--settings-line);padding:4px;gap:4px;border-radius:6px}.settings-segment button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--settings-muted);font-size:13px}.settings-segment [aria-pressed=true]{background:color-mix(in srgb,var(--site-accent) 12%,var(--settings-bg));border-color:color-mix(in srgb,var(--site-accent) 45%,transparent);color:var(--settings-text)}.settings-segment [aria-pressed=true] svg{color:var(--site-accent)}.settings-help,.settings-color-label{font-size:11px;color:var(--settings-muted);line-height:1.6;margin:10px 0 0}.settings-swatches{display:flex;gap:12px}.settings-swatches button{width:44px;height:44px;padding:4px;background:none;border:1px solid transparent;border-radius:50%}.settings-swatches button span{display:block;width:100%;height:100%;background:var(--swatch);border:1px solid #8885;border-radius:50%}.settings-swatches [aria-pressed=true]{border-color:var(--settings-text)}.settings-color-label{min-height:18px}.settings-haptic{display:flex;gap:20px;align-items:center;padding:22px 0;border-top:1px solid var(--settings-line);border-bottom:1px solid var(--settings-line)}.settings-haptic-label{display:flex;gap:13px;align-items:flex-start;flex:1}.settings-haptic h3{font-size:13px;margin:0 0 6px}.settings-haptic p{font-size:11px;line-height:1.6;margin:0;color:var(--settings-muted)}.settings-switch{width:46px;height:28px;flex-shrink:0;border:1px solid var(--settings-line);background:var(--settings-line);padding:3px;border-radius:30px}.settings-switch span{display:block;width:20px;height:20px;border-radius:50%;background:var(--settings-muted);transition:transform .18s}.settings-switch[aria-checked=true]{background:var(--site-accent)}.settings-switch[aria-checked=true] span{transform:translateX(18px);background:var(--settings-bg)}.settings-saved{margin:18px 0 0;font-size:10px;color:var(--settings-muted)}
html[data-theme=gtav] body{--bg:color-mix(in srgb,var(--palette-color) 8%,var(--settings-bg));background:var(--bg)}
html[data-theme=gtav] .site-header{border-bottom-color:color-mix(in srgb,var(--palette-color) 45%,transparent)}
html .button.primary,html #onboarding-next,html .start-progress span{background:var(--site-accent);border-color:var(--site-accent)}
html[data-mode=dark] .button.primary,html[data-mode=dark] #onboarding-next{color:#171717}
html[data-mode=light] .button.primary,html[data-mode=light] #onboarding-next{color:#fff}
html .start-nav [aria-current]>span,html .start-nav [aria-current] svg,html .start-resource{color:var(--site-accent)}
html[data-mode=light] body{color:#252620}
html[data-mode=light] body[data-page=home] .site-header{background:linear-gradient(#fafaf5e8,transparent)}
html[data-mode=light] .home-hero .hero-overlay{background:linear-gradient(90deg,#fafaf5f0,#fafaf59c 50%,#fafaf530),linear-gradient(0deg,#fafaf5,transparent 65%)}
html[data-mode=light] .home-hero{background-color:#dad8ce}
html[data-mode=light] .home-content h1,html[data-mode=light] .home-content h1 span{color:#20221f;background-image:none;-webkit-text-fill-color:currentColor}
html[data-mode=light] body[data-page=home] :is(.home-content p,.home-content .eyebrow,.home-device-link,.home-bottom,.home-bottom>a,.desktop-nav a,.header-actions .button){color:#43463d}
html[data-mode=light] body[data-page=home] .header-actions .button{background:#fafaf580;border-color:#3335}
html[data-mode=light] .home-actions .button.outline{color:#30322c;border-color:#3336;background:#fafaf570}
html[data-mode=light] .credit-apple img{filter:brightness(0)}
html[data-mode=light] .welcome-scene{color:#f5f5f5}
@keyframes settings-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:600px){.site-settings{padding:24px}.header-actions{gap:10px!important}body[data-page=home] .header-inner{gap:12px}.header-actions .settings-trigger{width:34px;padding:6px}.header-actions .button.compact{padding:10px;font-size:10px}body[data-page=home] .header-actions .button{padding:10px;font-size:10px;gap:8px}.settings-swatches{gap:10px}}
@media(prefers-reduced-motion:reduce){.site-settings{animation:none}.settings-switch span{transition:none}}
html body[data-page=home] .home-actions .button.primary,html body[data-page=home] .home-actions .button.primary:hover{background:var(--site-accent);border-color:var(--site-accent)}
html[data-mode=light] body[data-page=home] .home-actions .button.primary{color:#fff}
html[data-mode=dark] body[data-page=home] .home-actions .button.primary{color:#171717}
html .community-toast-action{background:var(--site-accent);color:var(--settings-bg)}
@media(max-width:380px){body[data-page=home] .header-inner,.header-inner{padding-left:16px;padding-right:16px}.header-actions{gap:6px!important}.site-brand{font-size:14px!important;gap:7px!important}.site-brand img{width:26px!important;height:26px!important}.header-actions .button .icon{display:none}}
/* Semantic foregrounds stay readable with every accent palette. */
html[data-mode=light] body{--muted:#51564e;--line:#292d2433}
html[data-mode=dark] body{--muted:#b4b7af}
html[data-mode=light] :is(.credits-heading h2,.credit-item .credit-name,.credit-apple span,.saved-device-card h2){color:#252923}
html[data-mode=dark] :is(.credits-heading h2,.credit-item .credit-name,.credit-apple span,.saved-device-card h2){color:#eeeae2}
html .technical-section code{color:var(--settings-text);background:var(--settings-line);border-color:var(--settings-line)}
html :is(.technical-result strong,.technical-number,.chip-core .icon,.chip-core>span,.review-state,.saved-phone svg){color:var(--site-accent)}
html :is(.gameplay-controls button,.gameplay-slide figcaption strong){color:var(--settings-text)}
html .gameplay-controls button{border-color:var(--settings-muted)}
html[data-mode=light] .technical-result{background:#ffffff75;border-color:var(--site-accent)}
html[data-mode=light] [data-shine].shine-running{background-image:linear-gradient(105deg,#252923 0%,#252923 38%,#606750 46%,#34402b 50%,#606750 54%,#252923 62%,#252923 100%)}
html[data-mode=light] .gameplay-thumb{opacity:.85}
html[data-mode=light] .gameplay-thumb[aria-current=true]{opacity:1;border-color:var(--site-accent)}
html .saved-phone svg{stroke:var(--site-accent)}
html[data-mode=light] .saved-phone>span{background:#426237}
html[data-mode=light] .chip-core{border-color:var(--site-accent)}
/* Page palettes must inherit the saved accent, including the navigation dialog. */
html body[data-page]{--accent:var(--site-accent)}
html .menu-dialog{--accent:var(--site-accent)}
html .drawer-nav a[aria-current=page] .menu-arrow,
html .drawer-nav a:hover .menu-arrow,
html .drawer-nav a:focus-visible .menu-arrow{color:var(--site-accent)}
/* Navigation footer has two clear items, with consistent mobile typography. */
.menu-bottom{align-items:center;flex-wrap:wrap}.menu-bottom>span{line-height:1.6}.menu-bottom>a{white-space:nowrap}.drawer-nav a{line-height:1.25}.menu-panel .drawer-nav{gap:0 24px}
@media(max-width:750px){.menu-panel .drawer-nav a{font-size:clamp(23px,6.4vw,29px);padding:16px 0;gap:20px}.menu-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px}.menu-bottom>span{font-size:10px}.menu-bottom>a{font-size:11px}}