/* VoidVision · design tokens (themes lane). Loaded after themes.css.
   One token set for every theme: colour, surface, type, space, shape, motion.
   - Psychedelic (signature) defines --vv-* directly on :root.
   - Every other theme defines its palette once as --t-* (themes.css); the
     block below maps --t-* onto --vv-*, so components only ever read --vv-*.
   - themes.js writes the resolved accent (--vv-accent, --vv-accent-ink,
     --vv-focus, --vv-accent-text) inline on <html>; the values here are fallbacks.
   - Motion durations scale with <html data-vv-motion-level> (full | calm | off).
   - Text sizes scale with --vv-text-scale (Settings → Text size, 100–130%). */

/* ---------- fonts: swap + metric-matched fallbacks so headings never jump ---------- */
@font-face{font-family:'Street Fallback';src:local('Arial'),local('Liberation Sans'),local('Helvetica');size-adjust:86.2%;ascent-override:109%;descent-override:36%;line-gap-override:0%}
@font-face{font-family:'Anton Fallback';src:local('Arial'),local('Liberation Sans'),local('Helvetica');size-adjust:88%;ascent-override:134%;descent-override:37.5%;line-gap-override:0%}
@font-face{font-family:VVAnton;src:url(anton.woff2) format('woff2');font-display:swap}

:root{
 /* colour (psychedelic) */
 --vv-bg:#030308;--vv-surface:#08071a;--vv-surface-2:#0e0c22;--vv-raised:#15122e;
 --vv-ink:#f3f0ff;--vv-ink-2:#cdc8ec;--vv-ink-3:#a9a3d0;
 --vv-edge:rgba(138,92,255,.32);--vv-edge-strong:rgba(138,92,255,.62);
 --vv-accent:#ff3cd7;--vv-accent-ink:#000;--vv-accent-2:#2ec5ff;--vv-accent-text:#ff6be0;--vv-focus:#ff3cd7;
 --vv-danger:#ff7a9c;--vv-ok:#5ef2c0;--vv-warn:#ffc864;--vv-scrim:rgba(3,3,8,.72);
 --vv-field:#05050c;
 /* type */
 --vv-font-brand:Street,'Street Fallback','Arial Black',sans-serif;
 --vv-font-display:VVAnton,'Anton Fallback',Impact,sans-serif;
 --vv-font-ui:system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
 --vv-font-mono:'Cascadia Mono',Consolas,ui-monospace,Menlo,monospace;
 --vv-ts:var(--vv-text-scale,1);
 --vv-fs-1:calc(11px*var(--vv-ts));--vv-fs-2:calc(12.5px*var(--vv-ts));--vv-fs-3:calc(14px*var(--vv-ts));--vv-fs-4:calc(16px*var(--vv-ts));
 --vv-fs-5:calc(20px*var(--vv-ts));--vv-fs-6:calc(26px*var(--vv-ts));--vv-fs-7:calc(34px*var(--vv-ts));
 --vv-lh-tight:1.15;--vv-lh-body:1.5;--vv-track-caps:.08em;
 /* space + shape */
 --vv-sp-1:4px;--vv-sp-2:8px;--vv-sp-3:12px;--vv-sp-4:16px;--vv-sp-5:20px;--vv-sp-6:24px;--vv-sp-7:32px;--vv-sp-8:48px;
 --vv-radius-s:6px;--vv-radius-m:10px;--vv-radius-l:16px;
 --vv-shadow-1:0 2px 8px rgba(0,0,0,.35);--vv-shadow-2:0 12px 32px -8px rgba(0,0,0,.55);--vv-shadow-3:0 28px 80px -12px rgba(0,0,0,.7);
 --vv-focus-ring:0 0 0 2px var(--vv-bg),0 0 0 4px var(--vv-focus);
 /* motion (scaled by level below) */
 --vv-motion-scale:1;--vv-dur-1:120ms;--vv-dur-2:200ms;--vv-dur-3:320ms;
 --vv-ease-out:cubic-bezier(.16,1,.3,1);--vv-ease-in-out:cubic-bezier(.65,0,.35,1);
}
html[data-vv-motion-level=calm]{--vv-dur-1:80ms;--vv-dur-2:120ms;--vv-dur-3:160ms}
html[data-vv-motion-level=off]{--vv-dur-1:0ms;--vv-dur-2:0ms;--vv-dur-3:0ms}

/* ---------- every non-psychedelic theme: --t-* palette → --vv-* tokens ---------- */
html.vv-alt{
 --vv-bg:var(--t-base);--vv-surface:var(--t-solid);--vv-surface-2:var(--t-surface-2,color-mix(in srgb,var(--t-solid) 90%,var(--t-ink)));--vv-raised:var(--t-raised,color-mix(in srgb,var(--t-solid) 84%,var(--t-ink)));
 --vv-ink:var(--t-ink);--vv-ink-2:var(--t-dim);--vv-ink-3:var(--t-meta,var(--t-dim));
 --vv-edge:var(--t-edge);--vv-edge-strong:var(--t-edge-strong,color-mix(in srgb,var(--t-ink) 34%,transparent));
 --vv-accent-2:var(--t-b);--vv-field:var(--t-field-solid,color-mix(in srgb,var(--t-solid) 92%,var(--t-ink)));
 --vv-danger:var(--t-danger,#ff8aa5);--vv-ok:var(--t-ok,#6fe3b5);--vv-warn:var(--t-warn,#ffcb6b);--vv-scrim:var(--t-scrim,rgba(0,0,0,.6));
}
/* Paper is the light scheme: everything that defaults to dark flips with it. */
html.vv-light{color-scheme:light;--vv-shadow-1:0 1px 3px rgba(60,40,20,.14);--vv-shadow-2:0 10px 28px -10px rgba(60,40,20,.28);--vv-shadow-3:0 24px 60px -16px rgba(60,40,20,.32);--vv-danger:#b4233c;--vv-ok:#1d7a4f;--vv-warn:#8a5a00;--vv-scrim:rgba(40,30,20,.38)}
html:not(.vv-light){color-scheme:dark}

/* ---------- focus: one ring, always contrast-safe (computed per accent + surface) ---------- */
:where(button,input,select,textarea,summary,a,[role=button],[role=radio],[tabindex]):focus-visible{outline:2px solid var(--vv-focus)!important;outline-offset:2px}
.login-box input:not([type=checkbox]):focus-visible{outline:2px solid var(--vv-focus)!important;outline-offset:1px}
::selection{background:color-mix(in srgb,var(--vv-focus) 45%,transparent);color:var(--vv-ink)}

/* ---------- typography: readable UI stack for everything you read or operate ---------- */
body{font-family:var(--vv-font-ui)}
button,input,select,textarea{font-family:var(--vv-font-ui)}
button{font-size:var(--vv-fs-2);line-height:1.25}
.muted,.social-panel p,.inbox-panel p{font-size:var(--vv-fs-2);line-height:var(--vv-lh-body)}
/* Sign-in: keep the terminal frame, make the form itself plain and legible. */
.login-box{font-family:var(--vv-font-ui)}
.login-box h2{font:600 var(--vv-fs-5)/1.2 var(--vv-font-ui);letter-spacing:.01em}
.login-box label{font:500 var(--vv-fs-2)/1.3 var(--vv-font-ui)}
.login-box input:not([type=checkbox]){font:var(--vv-fs-3)/1.3 var(--vv-font-ui)}
.login-box button,.login-box .primary,.login-box .google-button{font-family:var(--vv-font-ui);font-size:var(--vv-fs-2)}
.login-box .primary{font-weight:600}
.login-box .text-button,.login-box .offline-button{font-size:var(--vv-fs-2)}
.login-box #account-status{font:var(--vv-fs-2)/1.5 var(--vv-font-ui)}
.login-box .remember,.login-box .auth-divider{font:var(--vv-fs-1)/1.4 var(--vv-font-ui)}
.login-box label:not(.remember):before{display:none}
/* Sidebar navigation */
.library-sidebar summary{font:600 var(--vv-fs-1)/1.2 var(--vv-font-ui)!important;letter-spacing:var(--vv-track-caps)!important}
.library-utilities summary{font-size:var(--vv-fs-1)!important}
.library-app{font:var(--vv-fs-2)/1.25 var(--vv-font-ui)!important;min-width:0}
.library-app>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.library-app img{flex:0 0 auto}
.home-button{font:600 var(--vv-fs-2)/1.2 var(--vv-font-ui)!important;letter-spacing:.06em}
.sidebar-account strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal;min-width:0}
.sidebar-account button,.sidebar-account #avatar-edit,.sidebar-account #account-signout,.sidebar-account #return-login{font-family:var(--vv-font-ui)!important;font-size:var(--vv-fs-1)!important}
.sidebar-account .account-actions{flex-wrap:wrap!important}
/* Home */
#service-status,.home-content #service-status{font:var(--vv-fs-1)/1.5 var(--vv-font-ui)!important;letter-spacing:.01em}
footer{font-family:var(--vv-font-ui);letter-spacing:.02em}
#status{font-size:var(--vv-fs-2)!important;letter-spacing:0}
.panel-title h3 span{font:600 var(--vv-fs-2) var(--vv-font-ui)!important}
.panel-title button,#friends-search button{font-size:var(--vv-fs-1)}
#friends-search label{font-size:var(--vv-fs-1)!important}
#friends-query{font-size:var(--vv-fs-2)!important}
.friend-row strong,.inbox-thread strong{font-size:var(--vv-fs-2)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.friend-row small,.inbox-thread span{font-size:var(--vv-fs-1)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.friend-row button{font-size:var(--vv-fs-1)!important}
.friends-hint{font-size:var(--vv-fs-1)!important}
.console-welcome>span{font:600 var(--vv-fs-1)/1.3 var(--vv-font-ui)!important;letter-spacing:.06em!important}
.message{font-size:var(--vv-fs-2);line-height:1.45}
.poster-stamp{font-family:var(--vv-font-ui)!important;font-weight:600}
#game-launch-menu button{font:var(--vv-fs-2)/1.3 var(--vv-font-ui)}
#game-launch-path{font-size:var(--vv-fs-1)}
.home-promo-status{font-size:var(--vv-fs-1)!important}
/* Dialogs & settings */
.account-settings{font-family:var(--vv-font-ui);font-size:var(--vv-fs-3)}
.account-settings #settings-identity{font:var(--vv-fs-2)/1.4 var(--vv-font-ui)}
.account-tabs button{font-size:var(--vv-fs-2)}
.account-provider label{font-size:var(--vv-fs-2)}
.account-provider small{font:var(--vv-fs-1)/1.4 var(--vv-font-ui)}
#account-ai-settings h3 small{font:600 var(--vv-fs-1) var(--vv-font-ui)}
.sidekick-card p{font:var(--vv-fs-2)/1.5 var(--vv-font-ui)}
.sidekick-card small{font:600 var(--vv-fs-1) var(--vv-font-ui)}
.sidekick-card h4{font-style:normal}
#sidekick-assignments p{font:var(--vv-fs-2) var(--vv-font-ui)}
.avatar-onboarding .avatar-heading{font:600 var(--vv-fs-1)/1.3 var(--vv-font-ui)!important;letter-spacing:.06em}
.avatar-field,.avatar-instructions,.avatar-message{font-size:var(--vv-fs-2)}
.profile-tuning label{font-size:var(--vv-fs-2)}
.vc-app,.vc-app button,.vc-app input{font-family:var(--vv-font-ui)}
.vc-app button{font-size:var(--vv-fs-2)}
.vc-message{font-size:var(--vv-fs-3)}
.vc-status{font-size:var(--vv-fs-2)}
/* Brand and major headings keep Street (with a metric-matched fallback); the logo is untouched. */
.sidebar-brand strong,.home-top h2,.settings-heading h2,.panel-title h3,.console-welcome h4,.feature-copy h2,.vc-app h2,.phone-pair-dialog h2,.phone-install-guide h2,.profile-design h1,.profile-identity h2,.profile-facts h3,.sidekick-alter-ego h3{font-family:var(--vv-font-brand)}
#play-game{font-family:var(--vv-font-display)}

/* ---------- surfaces for every non-psychedelic theme: dialogs, dropdowns, profile, vChat ---------- */
html.vv-alt :is(.account-settings,.phone-pair-dialog,.phone-install-guide,.vc-app,.vv-mobile-sheet){background:var(--vv-surface)!important;color:var(--vv-ink)!important;border-color:var(--vv-edge-strong)!important;box-shadow:var(--vv-shadow-3)!important}
html.vv-alt :is(.account-settings,.phone-pair-dialog,.phone-install-guide,.vc-app,.vv-mobile-sheet,.profile-design)::backdrop{background:var(--vv-scrim);backdrop-filter:none}
html.vv-alt .settings-heading h2,html.vv-alt .vc-app h2,html.vv-alt .phone-pair-dialog h2,html.vv-alt .phone-install-guide h2,html.vv-alt .vv-mobile-sheet h2{color:var(--vv-ink)!important;text-shadow:none!important}
html.vv-alt :is(.account-settings,.vc-app,.phone-pair-dialog,.vv-mobile-sheet,.profile-design,.avatar-onboarding,#game-launch-menu) :is(p,label,small,li,span:not([class*=dot])){color:inherit}
html.vv-alt :is(.account-settings,.vc-app,.profile-design,.avatar-onboarding) .muted,html.vv-alt .vc-status,html.vv-alt .vc-empty,html.vv-alt .vc-conversations p{color:var(--vv-ink-2)!important}
html.vv-alt :is(.account-settings,.vc-app,.vv-mobile-sheet,.phone-pair-dialog,.profile-design,.avatar-onboarding) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){background:var(--vv-field)!important;color:var(--vv-ink)!important;border:1px solid var(--vv-edge-strong)!important}
html.vv-alt :is(.account-settings,.vc-app,.vv-mobile-sheet,.phone-pair-dialog,.phone-install-guide,.profile-design,.avatar-onboarding,.sidekick-card) button:not(.primary):not(.vvp-tile):not(.vvp-acc):not(.vvp-segb){background:var(--vv-surface-2)!important;color:var(--vv-ink)!important;border-color:var(--vv-edge-strong)!important;text-shadow:none!important}
html.vv-alt :is(.account-settings,.vc-app,.vv-mobile-sheet,.profile-design,.avatar-onboarding) button:not(:disabled):hover{border-color:var(--vv-focus)!important}
html.vv-alt :is(.account-settings,.vc-app,.vv-mobile-sheet,.profile-design,.avatar-onboarding,.phone-pair-dialog) .primary,html.vv-alt .avatar-onboarding .avatar-save{background:var(--vv-accent)!important;color:var(--vv-accent-ink)!important;border-color:transparent!important;text-shadow:none!important;box-shadow:none!important}
html.vv-alt .vc-app button[aria-selected=true],html.vv-alt .vc-app button[aria-pressed=true],html.vv-alt .account-tabs button[aria-selected=true]{background:color-mix(in srgb,var(--vv-accent) 18%,var(--vv-surface))!important;border-color:var(--vv-focus)!important;color:var(--vv-ink)!important}
html.vv-alt .vc-message{background:var(--vv-surface-2);color:var(--vv-ink)}
html.vv-alt .vc-message.own{background:color-mix(in srgb,var(--vv-accent) 22%,var(--vv-surface))}
html.vv-alt .vc-content,html.vv-alt .vc-conversations{border-color:var(--vv-edge)!important}
html.vv-alt .account-settings #settings-identity,html.vv-alt #project-status,html.vv-alt #account-ai-status{color:var(--vv-ink-2)!important}
html.vv-alt :is(.account-project,.account-provider,.sidekick-card,#sidekick-form,.sidekick-alter-ego,.account-mission){background:var(--vv-surface-2)!important;border-color:var(--vv-edge)!important;color:var(--vv-ink)!important;box-shadow:none!important}
html.vv-alt :is(.account-project h4,.sidekick-card h4,.sidekick-alter-ego h3){color:var(--vv-ink)!important}
html.vv-alt :is(.account-project>span,.sidekick-card small,.account-provider small,#account-ai-settings h3 small,.sidekick-alter-ego small){color:var(--vv-ink-3)!important}
html.vv-alt #game-launch-menu{background:var(--vv-surface)!important;border-color:var(--vv-edge-strong)!important;box-shadow:var(--vv-shadow-2)!important}
html.vv-alt #game-launch-menu button{background:transparent!important;color:var(--vv-ink)!important}
html.vv-alt #game-launch-menu button:not(:disabled):hover,html.vv-alt #game-launch-menu button:focus-visible{background:var(--vv-surface-2)!important}
html.vv-alt #game-launch-path{color:var(--vv-ink-2)!important}
html.vv-alt select option{background:var(--vv-surface);color:var(--vv-ink)}
/* Profile page */
html.vv-alt .profile-design{background:var(--vv-bg)!important;color:var(--vv-ink)!important}
html.vv-alt .profile-design>header{background:color-mix(in srgb,var(--vv-surface) 94%,transparent)!important;border-bottom:1px solid var(--vv-edge)!important;backdrop-filter:none!important}
html.vv-alt .profile-design h1,html.vv-alt .profile-identity h2,html.vv-alt .profile-facts h3{color:var(--vv-ink)!important}
html.vv-alt .profile-stage{background:var(--vv-surface-2)!important}
html.vv-alt .profile-identity{background:linear-gradient(90deg,color-mix(in srgb,var(--vv-surface) 94%,transparent),color-mix(in srgb,var(--vv-surface) 55%,transparent))!important;border-left-color:var(--vv-accent)!important;text-shadow:none!important;color:var(--vv-ink)}
html.vv-alt .profile-identity p,html.vv-alt .profile-people .muted,html.vv-alt .profile-connections>.muted,html.vv-alt .profile-tuning label{color:var(--vv-ink-2)!important}
html.vv-alt :is(.profile-facts,.profile-info){background:var(--vv-surface)!important;border-color:var(--vv-edge)!important}
html.vv-alt .profile-design .profile-notice:not(:empty){background:var(--vv-raised)!important;color:var(--vv-ink)!important;border-color:var(--vv-edge-strong)!important}
html.vv-alt :is(.profile-preset,.portrait-art,.profile-person){background:var(--vv-surface-2)!important;color:var(--vv-ink)!important;border-color:var(--vv-edge)!important}
html.vv-alt :is(.profile-preset,.portrait-art)[aria-pressed=true]{border-color:var(--vv-focus)!important;box-shadow:0 0 0 1px var(--vv-focus)!important}
html.vv-alt .profile-person small,html.vv-alt .profile-tuning output{color:var(--vv-accent-text)!important}
html.vv-alt a.profile-link{color:var(--vv-accent-text)}
/* Character studio (avatar onboarding) */
html.vv-alt .avatar-onboarding{background:var(--vv-bg)!important;color:var(--vv-ink)!important}
html.vv-alt .avatar-onboarding h2{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--vv-ink)!important}
html.vv-alt .avatar-onboarding .avatar-heading,html.vv-alt .avatar-onboarding .avatar-heading>div{color:var(--vv-ink-2)!important}
html.vv-alt .avatar-onboarding .avatar-step{color:var(--vv-ink)!important;background:var(--vv-surface-2)!important;border-color:var(--vv-edge)!important}
html.vv-alt .avatar-view{background:radial-gradient(ellipse at 50% 30%,var(--vv-raised),var(--vv-surface) 75%)!important;border-color:var(--vv-edge)!important}
html.vv-alt .avatar-field,html.vv-alt .avatar-instructions,html.vv-alt .avatar-onboarding .avatar-message{color:var(--vv-ink-2)!important}
html.vv-alt .avatar-onboarding .avatar-actions{background:linear-gradient(transparent,var(--vv-bg) 35%)!important}
html.vv-alt .avatar-onboarding .avatar-section[open]{background:var(--vv-surface)!important;border-color:var(--vv-edge)!important}

/* ---------- first run (.vvfr-*) on non-psychedelic themes ---------- */
html.vv-alt .vvfr{background:var(--vv-bg)!important;color:var(--vv-ink)!important}
html.vv-alt .vvfr::after{background:radial-gradient(ellipse at 50% 55%,transparent 0,color-mix(in srgb,var(--vv-bg) 80%,transparent) 75%)}
html.vv-alt .vvfr-card{background:var(--vv-surface)!important;border-color:var(--vv-edge)!important;box-shadow:var(--vv-shadow-3)!important}
html.vv-alt .vvfr-head h1,html.vv-alt .vvfr-field>span,html.vv-alt .vvfr-pcard b,html.vv-alt .vvfr-theme b{color:var(--vv-ink)!important}
html.vv-alt :is(.vvfr-head p,.vvfr-field small,.vvfr-theme small,.vvfr-later,.vvfr-pcard p,.vvfr-rail li){color:var(--vv-ink-2)!important}
html.vv-alt .vvfr-kicker,html.vv-alt .vvfr-pcard>span,html.vv-alt .vvfr-handle,html.vv-alt .vvfr-at span,html.vv-alt .vvfr-bid span{color:var(--vv-accent-text)!important}
html.vv-alt .vvfr-rail li{background:var(--vv-surface-2)!important;border-color:var(--vv-edge)!important}
html.vv-alt .vvfr-rail li.on{color:var(--vv-ink)!important;background:color-mix(in srgb,var(--vv-accent) 20%,var(--vv-surface))!important;border-color:var(--vv-focus)!important}
html.vv-alt .vvfr-rail b{background:var(--vv-raised)!important;color:var(--vv-ink)!important}
html.vv-alt .vvfr-rail li.on b{background:var(--vv-accent)!important;color:var(--vv-accent-ink)!important}
html.vv-alt .vvfr button.primary{background:var(--vv-accent)!important;color:var(--vv-accent-ink)!important;box-shadow:none!important}
html.vv-alt .vvfr button.ghost{background:var(--vv-surface-2)!important;border-color:var(--vv-edge-strong)!important;color:var(--vv-ink)!important}
html.vv-alt .vvfr :is(input:not([type=color]),textarea),html.vv-alt .vvfr-at{background:var(--vv-field)!important;border-color:var(--vv-edge-strong)!important;color:var(--vv-ink)!important}
html.vv-alt .vvfr-theme,html.vv-alt .vvfr-bthumb,html.vv-alt .vvfr-pcard{background:var(--vv-surface-2)!important;border-color:var(--vv-edge)!important;color:var(--vv-ink)!important}
html.vv-alt .vvfr-theme[aria-checked=true],html.vv-alt .vvfr-bthumb[aria-pressed=true]{border-color:var(--vv-focus)!important;box-shadow:0 0 0 2px var(--vv-focus)!important}
html.vv-alt .vvfr-plinks span{background:var(--vv-raised)!important;color:var(--vv-ink)!important}
html.vv-alt .vvfr-error{color:var(--vv-danger)!important}
html.vv-alt .vvfr-bid{background:color-mix(in srgb,var(--vv-surface) 88%,transparent)!important;color:var(--vv-ink)}
html.vv-alt .vvfr :focus-visible{outline-color:var(--vv-focus)!important}
html.vv-alt .vvfr-aura{opacity:.22}
html.vv-light .vvfr-aura{opacity:.14}
html.vv-light .vvfr-aura i{mix-blend-mode:multiply}
html.vv-alt .vvfr-brand{background:none!important;color:var(--vv-ink)!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;animation:none!important}

/* ---------- state hooks ---------- */
[aria-disabled=true]{cursor:not-allowed}
[data-state=error]{color:var(--vv-danger)}
[data-state=ok]{color:var(--vv-ok)}
.is-busy,[aria-busy=true]{cursor:progress}

/* ---------- dialogs & dropdowns: short, interruptible entrances (CSS on state, never queued) ---------- */
dialog[open]:is(.account-settings,.vv-settings,.phone-pair-dialog,.vc-app,.profile-design){animation-duration:var(--vv-dur-3)!important}
#game-launch-menu:not([hidden]){animation:vv-pop var(--vv-dur-2) var(--vv-ease-out)}
@keyframes vv-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.library-groups details[open]>div{animation:vv-pop var(--vv-dur-2) var(--vv-ease-out)!important}

/* ---------- motion levels: global safety net for files outside the themes lane ---------- */
/* calm: no ambient loops (decorative infinite animations) and no pointer parallax. */
html[data-vv-motion-level=calm] :is(.login-box,.featured-game:after,.logo-orbits i,.login-box h2:after,.vvfr-aura i,.vvfr-brand,.vvfr-pbanner,.vvfr-done .vvfr-ppic.big,.library-app.vvfr-glow,.vv-mobile-backdrop:before,.vv-mobile-backdrop:after,#play-game:before,.aura){animation:none!important}
html[data-vv-motion-level=calm] .login-art h1,html[data-vv-motion-level=off] .login-art h1{animation:none!important}
html[data-vv-motion-level=calm] .login-art h1 span,html[data-vv-motion-level=off] .login-art h1 span{animation:none!important}
html[data-vv-motion-level=calm] #play-game{transform:none!important}
/* off: no decorative animation, instant state changes (events still fire, so nothing waits forever). */
html[data-vv-motion-level=off] *,html[data-vv-motion-level=off] *::before,html[data-vv-motion-level=off] *::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
html[data-vv-motion-level=off] .psy-click{display:none!important}

/* ---------- phone home: the corner orb never covers the dock or sheets (Settings ⚙ owns themes there) ---------- */
body.vv-phone-home .vvt-orb,body.vv-phone-home .vvt-deck,body:has(dialog[open]) .vvt-orb{display:none!important}
/* Leave room under Home content so the floating theme orb never hides the last row. */
.home-content{padding-bottom:max(18px,76px)}
@media(max-width:700px){.home-content{padding-bottom:12px}}
/* Unavailable apps stay focusable: dim the icon and use meta ink, never element opacity (it would fade the focus ring). */
.library-app.unavailable{opacity:1!important;color:var(--vv-ink-3)!important}.library-app.unavailable img{opacity:.55}
/* The featured poster is dark in every theme: its focus ring must be light. */
html.vv-light .featured-game{--vv-focus:#ffffff}
/* Device settings (vcam.css) on token themes. */
html.vv-alt .vv-settings-body h3{color:var(--vv-ink)!important}
html.vv-alt .vv-settings-body p{color:var(--vv-ink-2)}
html.vv-alt .vv-settings-body input[type=range]{accent-color:var(--vv-accent)}
.vv-settings-body h3{font-size:var(--vv-fs-5)}.vv-settings-body label{font-size:var(--vv-fs-3)}.vv-settings-body p{font-size:var(--vv-fs-2)}
/* Field boundaries: every text field gets a 3:1 edge against its surroundings. */
:root{--vv-field-edge:#8f6cffcc}
html.vv-alt{--vv-field-edge:color-mix(in srgb,var(--vv-ink) 48%,transparent)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){border-color:var(--vv-field-edge)}
.login-box input:not([type=checkbox]),#friends-query,html.vv-alt .login-box input:not([type=checkbox]){border-bottom:1px solid var(--vv-field-edge)!important}
#friends-query,html.vv-alt input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),html.vv-alt select{border-color:var(--vv-field-edge)!important}
/* Scenic themes: a quiet, dark zone behind the logo and the Home title so type never sits on bright art. */
html[data-vv-group=scenic] .login-art:before{inset:0 -10% -6%!important;border-radius:0!important;transform:none!important;background:radial-gradient(ellipse 46% 30% at 50% 74%,color-mix(in srgb,color-mix(in srgb,var(--t-base) 55%,#000) 74%,transparent),color-mix(in srgb,color-mix(in srgb,var(--t-base) 55%,#000) 34%,transparent) 62%,transparent 100%)!important;animation:none!important}
html[data-vv-theme=marble] .login-art:before{background:radial-gradient(closest-side,#f4f1ece6 0 52%,#f4f1ec99 78%,transparent)!important}
html[data-vv-group=scenic] .home-top:before{content:'';position:absolute;inset:-26px -40px -18px -30px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 320px 84px at 140px 50%,color-mix(in srgb,var(--t-base) 88%,transparent),transparent 100%),radial-gradient(ellipse 300px 64px at calc(100% - 140px) 50%,color-mix(in srgb,var(--t-base) 86%,transparent),transparent 100%)!important}
html[data-vv-group=scenic] .home-top{position:relative}
html:is([data-vv-theme=mountain],[data-vv-theme=storybook]) .login-tag{color:var(--t-c)!important}
/* calm: every decorative loop plays at most once (loading indicators keep running so progress stays visible). */
html[data-vv-motion-level=calm] *,html[data-vv-motion-level=calm] *::before,html[data-vv-motion-level=calm] *::after{animation-iteration-count:1!important}
html[data-vv-motion-level=calm] :is([aria-busy=true]>.panel-title,.is-busy,img[data-thumb-pending],.profile-live-avatar[data-loading]::before){animation-iteration-count:infinite!important}

/* Brand tagline sits at the large-text size (24px) so its 3:1 rule applies honestly. */
.login-tag{font-size:24px}
/* Focus on controls that sit directly on art (header, phone home): a halo in the panel surface colour
   sits under the ring, so the ring keeps 3:1 whatever the scene behind it. */
@media(max-width:700px){html[data-vv-group=scenic] .vv-mobile-clock p{display:inline-block;padding:2px 10px;border-radius:99px;background:color-mix(in srgb,var(--vv-bg) 72%,transparent)}html[data-vv-group=scenic] .vv-mobile-tile strong{padding:1px 7px;border-radius:7px;background:color-mix(in srgb,var(--vv-bg) 78%,transparent)}}

/* Focus halo: on art and on the phone wallpaper the ring sits on a band of the colour that contrasts
   most with it (black or white), so it stays visible on any scene. */
:is(body>header,.vv-mobile-home,.home-top,.login-art) :focus-visible,.vvt-orb:focus-visible{box-shadow:0 0 0 8px var(--vv-focus-halo,#000)!important}
.login-box h2{font-style:normal!important}

html.vv-alt .sidebar-brand strong{font-family:var(--vv-font-brand)!important;white-space:nowrap}
/* Scenic Home: the title and the service line sit on small plates of the theme base colour. */
html[data-vv-group=scenic] .home-top h2{display:inline-block;padding:2px 14px 4px;border-radius:12px;background:color-mix(in srgb,var(--t-base) 72%,transparent)}
html[data-vv-group=scenic] #service-status{padding:4px 10px;border-radius:10px;background:color-mix(in srgb,var(--t-base) 78%,transparent)}