:root{
  font-family:Inter,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:var(--background);
  font-synthesis:none;
  --accent:#58796e;
  --tint:#e8efeb;
  --edge:#d9dfd9
}
*{
  box-sizing:border-box
}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden
}
body{
  height:100dvh;
  isolation:isolate;
  touch-action:pinch-zoom
}
body > .ambient-orb {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  left: 0;
  top: 0;
  width: var(--orb-size, 58vmax);
  height: var(--orb-size, 58vmax);
  border-radius: 48%;
  filter: blur(clamp(40px, 6vmax, 90px));
  opacity: .55;
  transform: translate(var(--orb-x), var(--orb-y)) translate(-50%, -50%);
  transition: background-color 500ms;
}
body > .ambient-orb--one { background: #cdddc8; }
body > .ambient-orb--two { background: #e6d6c1; }
body > .ambient-orb--three { background: #d0dbe5; }
body[data-page=app]{
  --accent:#617669;
  --tint:#e9eee8
}
body[data-page=tool]{
  --accent:#587386;
  --tint:#e8eef1;
  --edge:#d4dfe4
}
body[data-page=music]{
  --accent:#87715e;
  --tint:#f0eae2;
  --edge:#e5d9ca
}
body[data-page=blog]{
  --accent:#756b84;
  --tint:#ece8f0
}
body[data-page=tool] > .ambient-orb--one{
  background:#dbe5ed
}
body[data-page=music] > .ambient-orb--one{
  background:#eee0cf
}
body[data-page=blog] > .ambient-orb--one{
  background:#e5dfed
}
a{
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent
}
a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:5px
}
.navigation{
  position:fixed;
  z-index:10;
  top:calc(100% - max(30px, env(safe-area-inset-bottom)) - var(--nav-height));
  height:var(--nav-height);
  transition:top 450ms cubic-bezier(.22,.68,.2,1);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:4px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:40px;
  background:var(--nav-surface);
  backdrop-filter:blur(16px)
}
.navigation a{
  font-size:13px;
  letter-spacing:.025em;
  padding:11px 22px;
  border-radius:30px;
  color:var(--muted);
  transition:background 180ms,color 180ms
}
/* Reserve the pill background for the active page, even when the pointer
   remains over a previously clicked item during wheel navigation. */
.navigation a:hover{
  color:var(--text)
}
.navigation a[aria-current]{
  background:var(--selected);
  color:var(--text)
}
main{
  height:100%;
  position:relative
}
.panel{
  position:absolute;
  inset:max(36px,env(safe-area-inset-top)) 36px calc(100px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:center
}
.panel[hidden]{
  display:none
}
.collection{
  width:min(100%,960px)
}
h1,h2{
  margin:0;
  font-weight:500
}
h1{
  font-size:clamp(55px,10.2vw,148px);
  letter-spacing:-.075em;
  line-height:1.12;
  white-space:nowrap
}
.intro{
  text-align:center;
  padding-bottom:0
}
h2{
  font-size:clamp(32px,4vw,46px);
  letter-spacing:-.05em;
  margin-bottom:32px;
  display:flex;
  align-items:center;
  gap:16px
}
.count{
  font-size:11px;
  letter-spacing:.03em;
  font-weight:400;
  border:1px solid var(--edge);
  border-radius:30px;
  padding:5px 9px;
  color:var(--accent)
}
.grid{
  display:grid;
  gap:18px
}
.grid-app{
  grid-template-columns:repeat(2,1fr)
}
.grid-tool,.grid-music{
  grid-template-columns:repeat(3,1fr)
}
.card{
  position:relative;
  background:var(--card-surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:27px;
  min-width:0;
  display:flex;
  flex-direction:column;
  transition:background 180ms,border-color 180ms
}
.card:hover{
  background:var(--hover-surface);
  border-color:var(--accent)
}
.art{
  display:flex;
  color:var(--accent);
  align-items:center;
  justify-content:center;
  background:var(--tint);
  border-radius:12px;
  width:64px;
  height:64px;
  margin-bottom:25px;
  transition:background 180ms
}
.art svg{
  width:48px;
  height:48px
}
.art .fill{
  fill:currentColor;
  stroke:none
}
.art .soft{
  opacity:.25
}
.card-copy{
  display:flex;
  flex-direction:column;
  gap:8px
}
.card-name{
  font-size:19px;
  letter-spacing:-.025em;
  font-weight:500
}
.card-description{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.035em
}
.arrow{
  position:absolute;
  right:26px;
  top:29px;
  color:var(--muted);
  transition:color 180ms;
  width:16px;
  height:16px;
  pointer-events:none
}
.arrow::before,.arrow::after{
  content:"";
  position:absolute;
  right:2px;
  top:2px
}
.arrow::before{
  width:10px;
  height:10px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor
}
.arrow::after{
  width:16px;
  height:1.5px;
  background:currentColor;
  transform-origin:right center;
  transform:translateY(-.75px) rotate(-45deg)
}
.card:hover .arrow{
  color:var(--accent)
}
.grid-app .card{
  min-height:265px;
  padding:30px
}
.grid-app .art{
  width:100%;
  height:130px;
  background:transparent;
  margin-bottom:30px
}
.grid-app .art svg{
  height:116px;
  width:116px
}
.grid-app .art-skyview svg{
  width:150px;
  height:150px
}
.grid-app .card-name{
  font-size:24px
}
.grid-music .card{
  min-height:250px
}
.grid-music .art{
  height:112px;
  width:100%;
  background:transparent
}
.grid-music .art svg{
  width:96px;
  height:96px
}
.blog-content{
  text-align:center
}
.blog-art{
  color:var(--accent);
  width:108px;
  height:108px;
  margin:0 auto 24px
}
.blog-art svg{
  width:100%;
  height:100%
}
.blog-content h2{
  justify-content:center;
  font-size:clamp(58px,7vw,90px);
  margin-bottom:28px
}
.blog-link{
  display:inline-flex;
  gap:42px;
  align-items:center;
  padding:15px 24px;
  border:1px solid var(--edge);
  border-radius:40px;
  background:var(--card-surface);
  font-size:14px;
  transition:background 180ms
}
.blog-link:hover{
  background:var(--hover-surface)
}
.panel .reveal,.panel .card{
  opacity:0;
  transition:background 180ms,border-color 180ms
}
.panel.is-visible .reveal,.panel.is-visible .card{
  opacity:1;
  animation:element-enter 420ms cubic-bezier(.25,.1,.25,1) both;
  transition:background 180ms,border-color 180ms
}
.panel.is-leaving .reveal,.panel.is-leaving .card{
  animation:element-leave 420ms cubic-bezier(.25,.1,.25,1) both;
}
@keyframes element-leave {
  from { opacity:1; }
  to { opacity:0; }
}
@keyframes element-enter {
  from {
    opacity:0;
    transform:translate(var(--enter-x, 0px), var(--enter-y, 0px));
  }
  to {
    opacity:1;
    transform:none;
  }
}
.fallback{
  position:fixed;
  inset:auto 20px calc(100px + env(safe-area-inset-bottom));
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:12px
}
@media(max-width:650px){
  .navigation{
    top:calc(100% - max(20px, env(safe-area-inset-bottom)) - var(--nav-height));
    gap:0;
    padding:5px
  }
  .navigation a{
    padding:10px 15px;
    font-size:12px
  }
  .panel{
    inset:max(24px,env(safe-area-inset-top)) 23px calc(90px + env(safe-area-inset-bottom))
  }
  h2{
    margin-bottom:24px
  }
  .grid{
    gap:12px
  }
  .grid-tool{
    grid-template-columns:repeat(2,1fr)
  }
  .card{
    padding:19px;
    border-radius:14px
  }
  .art{
    width:44px;
    height:44px;
    margin-bottom:16px
  }
  .art svg{
    width:36px;
    height:36px
  }
  .card-name{
    font-size:16px
  }
  .card-description{
    font-size:11px;
    letter-spacing:0
  }
  .arrow{
    right:17px;
    top:20px
  }
  .grid-app .card{
    padding:20px;
    min-height:230px
  }
  .grid-app .art{
    height:100px;
    margin-bottom:25px
  }
  .grid-app .art svg,.grid-app .art-skyview svg{
    width:95px;
    height:95px
  }
  .grid-app .card-name{
    font-size:20px
  }
  .grid-music{
    grid-template-columns:1fr
  }
  .grid-music .card{
    min-height:100px;
    flex-direction:row;
    align-items:center;
    gap:20px
  }
  .grid-music .art{
    width:65px;
    height:60px;
    margin:0
  }
  .grid-music .art svg{
    width:60px;
    height:60px
  }
}
@media(max-height:700px){
  .panel{
    inset:max(24px,env(safe-area-inset-top)) 24px calc(100px + env(safe-area-inset-bottom))
  }
  h2{
    margin-bottom:20px;
    font-size:32px
  }
  .card{
    padding:18px
  }
  .art{
    width:42px;
    height:42px;
    margin-bottom:14px
  }
  .art svg{
    width:34px;
    height:34px
  }
  .grid-app .card{
    min-height:205px
  }
  .grid-app .art{
    height:90px;
    margin-bottom:18px
  }
  .grid-music .card{
    min-height:180px
  }
  .grid-music .art{
    height:75px
  }
  .grid-music .art svg{
    width:70px;
    height:70px
  }
  .arrow{
    top:21px;
    right:18px
  }
}
@media(max-width:650px) and (max-height:700px){
  .grid{
    gap:10px
  }
  .card{
    padding:14px
  }
  .art{
    height:34px;
    width:34px;
    margin-bottom:10px
  }
  .art svg{
    width:29px;
    height:29px
  }
  .card-name{
    font-size:15px
  }
  .card-copy{
    gap:6px
  }
  .grid-music .card{
    min-height:85px
  }
  .grid-music .art{
    height:48px
  }
  .arrow{
    top:17px;
    right:13px
  }
  .grid-app .card{
    padding:18px
  }
}
@media(max-height:500px){
  .navigation{
    top:calc(100% - max(12px, env(safe-area-inset-bottom)) - var(--nav-height))
  }
  .navigation a{
    padding:8px 20px
  }
  .panel{
    inset:max(20px,env(safe-area-inset-top)) 24px calc(68px + env(safe-area-inset-bottom))
  }
  .collection{
    max-width:900px
  }
  h2{
    font-size:25px;
    margin-bottom:12px
  }
  .grid{
    gap:10px
  }
  .grid-tool{
    grid-template-columns:repeat(3,1fr)
  }
  .card{
    padding:13px;
    flex-direction:row;
    align-items:center;
    gap:12px
  }
  .card .art{
    width:36px;
    height:36px;
    margin:0;
    flex-shrink:0
  }
  .card .art svg{
    width:32px;
    height:32px
  }
  .card-description{
    display:none
  }
  .card-name{
    font-size:14px
  }
  .arrow{
    right:12px;
    top:16px
  }
  .card-copy{
    padding-right:13px
  }
  .grid-app .card{
    min-height:130px;
    padding:20px
  }
  .grid-app .art{
    width:70px;
    height:70px;
    margin:0
  }
  .grid-app .art svg,.grid-app .art-skyview svg{
    width:65px;
    height:65px
  }
  .grid-music{
    grid-template-columns:repeat(3,1fr)
  }
  .grid-music .card{
    min-height:120px;
    flex-direction:column;
    gap:15px;
    align-items:flex-start
  }
  .grid-music .art{
    width:40px;
    height:40px
  }
  .grid-music .art svg{
    width:40px;
    height:40px
  }
  .intro{
    padding:0
  }
  h1{
    font-size:76px
  }
  .blog-content{
    display:grid;
    grid-template-columns:75px auto;
    align-items:center;
    gap:14px 25px;
    text-align:left
  }
  .blog-art{
    grid-row:span 2;
    width:75px;
    height:90px;
    margin:0
  }
  .blog-content h2{
    font-size:48px;
    margin:0;
    justify-content:flex-start
  }
  .blog-link{
    padding:9px 17px;
    font-size:12px
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important
  }
}

.home-logo {
  display: block;
  width: var(--home-logo-width);
  height: auto;
  aspect-ratio: 2 / 1;
}

/* Center the logo and its navigation as one composition on Home.
   The same fixed navigation moves between this position and the bottom. */
:root {
  --nav-height: 52px;
  --home-logo-width: min(420px, 66vw, 60vh);
  --home-logo-width: min(420px, 66vw, 60dvh);
  --home-nav-gap: clamp(28px, 5vh, 48px);
}
#home {
  inset: 0;
}
#home .intro {
  transform: translateY(calc((var(--home-nav-gap) + var(--nav-height)) / -2));
}
body[data-page="home"] .navigation {
  top: calc(50% + var(--home-logo-width) / 4 + var(--home-nav-gap) / 2 - var(--nav-height) / 2);
}
@media (max-width: 650px) {
  :root { --nav-height: 46px; }
}
@media (max-height: 500px) {
  :root { --nav-height: 44px; }
}

:root {
  color-scheme: light;
  --text: #272d32;
  --background: #f6f5f2;
  --border: #dedfd9;
  --nav-surface: #fafaf7d9;
  --card-surface: #ffffff80;
  --hover-surface: #ffffffd9;
  --selected: #e5eae4;
  --muted: #747875;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --text: #e2e5e3;
  --background: #191b1d;
  --border: #42474a;
  --nav-surface: #272b2d;
  --card-surface: #272b2d;
  --hover-surface: #33383b;
  --selected: #3c4441;
  --muted: #adb4b0;
}
[data-theme="dark"] body {
  --accent: #a4b8ae;
  --tint: #2e3532;
  --edge: #454f49;
}
[data-theme="dark"] body[data-page="tool"] {
  --accent: #a2bfd2;
  --tint: #3b4d59;
  --edge: #405461;
}
[data-theme="dark"] body[data-page="music"] {
  --accent: #d4bda0;
  --tint: #39332b;
  --edge: #5a4d3c;
}
[data-theme="dark"] body[data-page="blog"] {
  --accent: #c2b4d2;
  --tint: #35303c;
  --edge: #50455c;
}
[data-theme="dark"] body > .ambient-orb--one { background: #272c2b; }
[data-theme="dark"] body > .ambient-orb--two { background: #2c2b29; }
[data-theme="dark"] body > .ambient-orb--three { background: #272b30; }
[data-theme="dark"] body[data-page="tool"] > .ambient-orb--one { background: #252e35; }
[data-theme="dark"] body[data-page="music"] > .ambient-orb--one { background: #302b25; }
[data-theme="dark"] body[data-page="blog"] > .ambient-orb--one { background: #2b2832; }

.theme-toggle {
  position: fixed;
  z-index: 20;
  top: max(18px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--nav-surface);
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { color: var(--text); background: var(--hover-surface); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.theme-toggle svg { width: 22px; height: 22px; }
.theme-toggle .sun-icon { display: none; }
[data-theme="dark"] .theme-toggle .moon-icon { display: none; }
[data-theme="dark"] .theme-toggle .sun-icon { display: block; }

/* A shared duration keeps all theme colors in sync. */
[data-theme-switching],
[data-theme-switching] *,
[data-theme-switching] *::before,
[data-theme-switching] *::after {
  transition: background-color 400ms ease-in-out,
    border-color 400ms ease-in-out, filter 400ms ease-in-out,
    top 450ms cubic-bezier(.22,.68,.2,1) !important;
}

/* Animate color only at its source. Descendants such as card titles inherit
   the interpolated color directly, rather than starting another transition. */
[data-theme-switching],
[data-theme-switching] .navigation a,
[data-theme-switching] .count,
[data-theme-switching] .art,
[data-theme-switching] .card-description,
[data-theme-switching] .arrow,
[data-theme-switching] .blog-art,
[data-theme-switching] .theme-toggle {
  transition: background-color 400ms ease-in-out, color 400ms ease-in-out,
    border-color 400ms ease-in-out, filter 400ms ease-in-out !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme-switching], [data-theme-switching] *,
  [data-theme-switching] *::before, [data-theme-switching] *::after {
    transition: none !important;
  }
}

body[data-page="game"] {
  --accent: #897449;
  --tint: #efeade;
  --edge: #dfd5be;
}
body[data-page="game"] > .ambient-orb--one { background: #e8e2cd; }
[data-theme="dark"] body[data-page="game"] {
  --accent: #d4c08e;
  --tint: #423e2e;
  --edge: #60583f;
}
[data-theme="dark"] body[data-page="game"] > .ambient-orb--one { background: #2d2c24; }
.grid-game { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.grid-game .game-card {
  min-height: 132px;
  padding: 36px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.grid-game .game-card[hidden] { display: none; }
.game-number { position: absolute; top: 14px; left: 16px; font-size: 11px; letter-spacing: .06em; opacity: .6; font-variant-numeric: tabular-nums; }
.grid-game .card-name { font-size: 20px; line-height: 1.35; padding: 0; text-align: center; overflow-wrap: anywhere; }
.grid-game .arrow { top: 19px; right: 15px; }
.game-pagination { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 22px; }
.game-pagination button {
  width: 48px; height: 36px; padding: 0;
  border: 1px solid var(--edge); border-radius: 9px;
  background: var(--card-surface); color: inherit;
  font: inherit; cursor: pointer;
}
.game-pagination button:hover:not(:disabled) { background: var(--hover-surface); }
.game-pagination button:disabled { opacity: .3; cursor: default; }
.game-pagination button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 650px) {
  .navigation a { padding-left: 10px; padding-right: 10px; }
  .grid-game { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 10px; }
  .grid-game .game-card { min-height: 104px; padding: 28px 14px; }
  .grid-game .card-name { font-size: 16px; }
  .grid-game .arrow { top: 11px; right: 10px; }
  .game-number { top: 10px; left: 12px; font-size: 10px; }
  .game-pagination { margin-top: 14px; }
}
@media (max-height: 500px) {
  .grid-game { gap: 8px; }
  .grid-game .game-card { min-height: 94px; padding: 28px 14px; }
  .grid-game .card-name { font-size: 16px; }
  .grid-game .arrow { top: 12px; right: 10px; }
  .game-pagination { margin-top: 10px; }
  .game-pagination .game-page-arrow { width: 42px; height: 32px; }
}

.game-page-arrow { display: grid; place-items: center; }
.game-page-arrow svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
#games-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; min-width: 0; }
.game-pagination .game-page-dot {
  display: grid; place-items: center;
  width: 30px; height: 36px; border: none; background: transparent;
}
.game-page-dot::before {
  content: ""; width: 10px; height: 10px; border-radius: 2px;
  background: var(--border); border: 1px solid var(--edge);
}
.game-page-dot[aria-current="page"]::before {
  background: var(--accent); border-color: var(--accent);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.game-pagination .game-page-arrow { flex: 0 0 auto; }
@media (max-width: 400px) {
  .game-pagination { gap: 8px; }
  .game-pagination .game-page-dot { width: 24px; height: 30px; }
}

.game-pagination[hidden] { display: none; }

.game-status { text-align: center; color: var(--muted); }
#games-retry[hidden], .game-status[hidden] { display: none; }

.grid-game .card-description {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 650px), (max-height: 500px) {
  .grid-game .card-description { font-size: 11px; margin-top: 6px; }
}

.ambient-orb { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .ambient-orb { will-change: auto; }
}

/* Fine, stationary dither breaks up gradient bands, behind all UI content. */
.ambient-dither {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/home/noise.png') repeat;
  background-size: 256px 256px;
  opacity: .035;
}