/* Presentation-only: does not change age permissions or user roles */
:root{--age-accent:#2cecff;--age-surface:rgba(21,39,100,.94)}
body{background-color:#07112a}
button,.btn,[role=button]{touch-action:manipulation}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #ffe66c;outline-offset:2px}
[data-age-variant=orbit] body{background-image:radial-gradient(ellipse at 65% 12%,#213f87 0,transparent 52%),linear-gradient(140deg,#020a1b,#101b43)!important}
[data-age-variant=garden] body{background-image:radial-gradient(ellipse at 75% 15%,#238c9a 0,transparent 55%),linear-gradient(140deg,#072d3b,#11304a)!important}
[data-age-variant=aurora] body{background-image:radial-gradient(ellipse at 25% 10%,#6328a2 0,transparent 50%),linear-gradient(145deg,#07183f,#163b75)!important}
[data-age-theme=discover] button{border-radius:22px!important;min-height:52px}
[data-age-theme=adventure] button{border-radius:15px}
[data-age-theme=creator] button{border-radius:11px}
[data-age-theme=future] button{border-radius:7px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* 12.8 readability: the age-theme backgrounds above are dark on every screen, but grown-up page titles were dark text drawn straight on them
   (unreadable). Titles and their lines that sit on the background itself are light; everything inside white cards keeps its own colors. */
[data-age-variant] body:not(.kid-mode) .pagehead h1,[data-age-variant] body:not(.kid-mode) .pagehead .title h1{color:#f4f8ff!important;text-shadow:0 2px 10px rgba(0,0,0,.35)}
[data-age-variant] body:not(.kid-mode) .pagehead p,[data-age-variant] body:not(.kid-mode) .pagehead .title p{color:#d3e0ff!important}
[data-age-variant] body:not(.kid-mode) #view>h1,[data-age-variant] body:not(.kid-mode) #view>h2,[data-age-variant] body:not(.kid-mode) #view>div>h1,[data-age-variant] body:not(.kid-mode) #view>div>h2{color:#f4f8ff}
[data-age-variant] body:not(.kid-mode) #view>p,[data-age-variant] body:not(.kid-mode) #view>div>p.muted{color:#d3e0ff}