/* Shared by every page of the Pochita site (tools/make_docs.py copies it to docs_site/assets/site.css):
   brand tokens, the living background, the base type, the top bar and the site navigation. */
:root {
  color-scheme: dark;
  --bg: #0b0c0f;
  --bg-2: #111318;
  --surface: #15171d;
  --surface-2: #1b1e25;
  --line: #262a33;
  --line-2: #323744;
  --fg: #eceef3;
  --fg-2: #a4aab8;
  --fg-3: #6f7686;
  --accent: #dfe6f5;
  --accent-ink: #0b0c0f;
  --glow: rgba(214, 226, 255, .55);
  --grad: linear-gradient(120deg, #ffffff 0%, #c9d4ea 45%, #8d9ab5 100%);
  --grad-soft: linear-gradient(120deg, rgba(255,255,255,.10), rgba(141,154,181,.04));
  --dept: #c9d1e0;
  --dept2: #8d9ab5;
  --dept-ink: #c9d1e0;   /* the brighter of the two, for text and small marks on the dark surfaces */
  --dept-on: #0b0c0f;    /* text on a --dept → --dept2 fill */
  --dept-grad: linear-gradient(120deg, var(--dept), var(--dept2));
  --aura-1: rgba(255, 255, 255, .09);
  --aura-2: rgba(141, 154, 181, .10);
  --aura-3: rgba(201, 212, 234, .07);
  --display: "Gabarito", "Segoe UI", system-ui, sans-serif;
  --body: "Onest", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --radius: 14px;
  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.75rem; --t-2xl: clamp(2.2rem, 5vw, 3.6rem);
}
html[data-brand="watch"] {
  --bg: #19191c;
  --bg-2: #1e1e22;
  --surface: #232327;
  --surface-2: #2a2a2f;
  --line: #34343b;
  --line-2: #42424a;
  --fg: #f4f1f6;
  --fg-2: #b6b1bd;
  --fg-3: #7e7987;
  --accent: #f3b4d9;
  --accent-ink: #1b1420;
  --glow: rgba(243, 180, 217, .45);
  --grad: linear-gradient(120deg, #f7a8d8 0%, #f6b89c 32%, #c5b1f5 66%, #9cc4ff 100%);
  --grad-soft: linear-gradient(120deg, rgba(247,168,216,.16), rgba(156,196,255,.10));
  --aura-1: rgba(247, 168, 216, .13);
  --aura-2: rgba(156, 196, 255, .11);
  --aura-3: rgba(197, 177, 245, .10);
}
/* The aura colors and the department colors animate when a section changes. */
@property --dept { syntax: "<color>"; inherits: true; initial-value: #c9d1e0; }
@property --dept2 { syntax: "<color>"; inherits: true; initial-value: #8d9ab5; }
/* Emoji art is never square-cropped or stretched (some department emojis are 120×128). */
img { object-fit: contain; }

/* ── living background: a few slow, soft color fields behind everything ── */
.aura { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aura i { position: absolute; width: 72vmax; height: 72vmax; border-radius: 50%; will-change: transform, opacity; }
.aura i:nth-child(1) { left: -24vmax; top: -22vmax; background: radial-gradient(closest-side, var(--aura-1), transparent); animation: aura1 19s ease-in-out infinite alternate, breathe-a 7s ease-in-out infinite; }
.aura i:nth-child(2) { right: -28vmax; top: 14vh; background: radial-gradient(closest-side, var(--aura-2), transparent); animation: aura2 23s ease-in-out infinite alternate, breathe-a 9s ease-in-out -3s infinite; }
.aura i:nth-child(3) { left: 6vw; bottom: -38vmax; background: radial-gradient(closest-side, var(--aura-3), transparent); animation: aura3 27s ease-in-out infinite alternate, breathe-a 11s ease-in-out -5s infinite; }
.aura i:nth-child(4) { right: -8vmax; bottom: -22vmax; width: 58vmax; height: 58vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--dept) 16%, transparent), transparent); animation: aura4 21s ease-in-out infinite alternate, breathe-a 8s ease-in-out -2s infinite; transition: --dept .8s; }
.aura i:nth-child(5) { left: -14vmax; top: 30vh; width: 54vmax; height: 54vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--dept2) 13%, transparent), transparent); animation: aura5 25s ease-in-out infinite alternate, breathe-a 10s ease-in-out -6s infinite; transition: --dept2 .8s; }
/* a faint, very slow sweep of the brand gradient across the whole page */
.aura::after { content: ""; position: absolute; inset: -50%; background: conic-gradient(from 0deg at 50% 50%, transparent 0 20%, var(--aura-1) 30%, transparent 45%, var(--aura-2) 62%, transparent 78%); opacity: .35; filter: blur(40px); animation: sweep 60s linear infinite; }
@keyframes aura1 { 50% { transform: translate3d(22vw, 10vh, 0) scale(1.2); } to { transform: translate3d(8vw, 30vh, 0) scale(.95); } }
@keyframes aura2 { 50% { transform: translate3d(-24vw, 16vh, 0) scale(.85); } to { transform: translate3d(-10vw, -12vh, 0) scale(1.15); } }
@keyframes aura3 { 50% { transform: translate3d(18vw, -26vh, 0) scale(1.15); } to { transform: translate3d(-12vw, -14vh, 0) scale(.9); } }
@keyframes aura4 { 50% { transform: translate3d(-20vw, -24vh, 0) scale(1.18); } to { transform: translate3d(-34vw, 6vh, 0) scale(.92); } }
@keyframes aura5 { 50% { transform: translate3d(26vw, -18vh, 0) scale(.9); } to { transform: translate3d(36vw, 12vh, 0) scale(1.2); } }
@keyframes breathe-a { 50% { opacity: .7; } }
@keyframes sweep { to { transform: rotate(1turn); } }
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg); }
body {
  background: transparent;
  color: var(--fg);
  font: 400 var(--t-md)/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* ── top bar ── */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 14px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 var(--t-lg)/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.brand small { font: 600 var(--t-xs)/1 var(--body); color: var(--fg-3); letter-spacing: .08em; text-transform: uppercase; }

/* ── site navigation (same on every page) ── */
.site-nav { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); flex: none; }
.site-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 999px; text-decoration: none; color: var(--fg-2); font: 600 var(--t-sm)/1 var(--body); white-space: nowrap; transition: color .2s, background .2s; }
.site-nav a:hover { color: var(--fg); background: var(--surface-2); }
.site-nav a img, .site-nav a svg { width: 20px; height: 20px; flex: none; border-radius: 50%; }
.site-nav a svg { padding: 1px; }
.site-nav a[aria-current="page"] { color: var(--accent-ink); background: var(--grad); }
.site-nav a.watch[aria-current="page"] { background: linear-gradient(120deg, #f7a8d8 0%, #f6b89c 32%, #c5b1f5 66%, #9cc4ff 100%); color: #1b1420; }
.site-nav a.pochita[aria-current="page"] { background: linear-gradient(120deg, #ffffff 0%, #c9d4ea 45%, #8d9ab5 100%); color: #0b0c0f; }
/* Pages with a search box in the bar move the nav to its own row sooner. */
@media (max-width: 960px) {
  .bar:has(.search) .wrap { flex-wrap: wrap; row-gap: 8px; }
  .bar:has(.search) .site-nav { order: 3; width: 100%; }
  .bar:has(.search) .site-nav a { flex: 1 1 auto; }
}
@media (max-width: 360px) {
  .site-nav a img { display: none; }
}
@media (max-width: 760px) {
  .bar .wrap { flex-wrap: wrap; row-gap: 8px; }
  .site-nav { order: 3; width: 100%; }
  .site-nav a { flex: 1 1 auto; min-width: 0; gap: 6px; padding: 6px 8px; font-size: 13px; }
  .site-nav a img, .site-nav a svg { width: 18px; height: 18px; }
}

footer { border-top: 1px solid var(--line); color: var(--fg-3); font-size: var(--t-sm); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 22px; }
footer a { color: var(--fg-2); text-decoration: none; }
footer a:hover { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* A gradient starts at the padding edge by default and repeats into the border, so an element
   with a border shows a thin sliver of the gradient's far end along one side (white on the
   panel's switches). Start every background at the border edge instead. !important because a
   later `background:` shorthand would quietly reset it. tests/e2e/panel.e2e.js checks every page. */
*, *::before, *::after { background-origin: border-box !important; }