/* Legal pages (terms, privacy, aup, security, subprocessors, 404): the homepage's tokens and type, a reading column. */
:root{
  --sun:#FFC800; --sun-2:#FFE27A; --sun-3:#FFF3C2;
  --ink:#3A2E1F;
  --bg:#FFFDF5; --bg-2:#FFFFFF; --bg-3:#FFF7D6;
  --fg:#3A2E1F; --muted:#6F6150; --line:#EFE6CF; --line-2:#E3D6B4;
  --card:#FFFFFF; --card-line:#EFE6CF;
  --band:#2E2418; --on-band:#FFF3C2; --on-band2:rgba(255,243,194,.74);
  --display:"Fredoka","Nunito",ui-rounded,system-ui,sans-serif;
  --body:"Nunito","Helvetica Neue",Arial,system-ui,sans-serif;
  --pop:cubic-bezier(.34,1.56,.64,1);
  --max:1160px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1E1810; --bg-2:#28211A; --bg-3:#332A1E;
    --fg:#FFF7D6; --muted:#B5A893; --line:#3A3124; --line-2:#4D4232;
    --card:#28211A; --card-line:#3D3428; --sun-3:#3D3416;
    --band:#0D0905; --on-band2:rgba(255,243,194,.72);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1E1810; --bg-2:#28211A; --bg-3:#332A1E;
  --fg:#FFF7D6; --muted:#B5A893; --line:#3A3124; --line-2:#4D4232;
  --card:#28211A; --card-line:#3D3428; --sun-3:#3D3416;
  --band:#0D0905; --on-band2:rgba(255,243,194,.72);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font:500 18px/1.65 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:-.015em;margin:0;text-wrap:balance}
/* short pages: the footer stays at the bottom of the screen */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body > main{flex:1 0 auto;width:100%}
a{color:inherit}
img{display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 max(20px,env(safe-area-inset-left))}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:10px}
::selection{background:var(--sun);color:var(--ink)}

.btn{display:inline-flex;white-space:nowrap;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;
  font:600 16px/1 var(--display);text-decoration:none;background:var(--sun);color:var(--ink);box-shadow:0 4px 0 #C99A00;
  transition:transform .18s var(--pop)}
.btn:hover{transform:translateY(-2px)}
.btn .tri{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}

.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1.5px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:600 23px/1 var(--display)}
.brand img{width:36px;height:36px;transition:transform .6s var(--pop)}
.brand:hover img{transform:rotate(90deg)}
.nav .btn{margin-left:auto}

.level{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.level b{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:9px;background:var(--sun);color:var(--ink);letter-spacing:0;font-size:15px;box-shadow:0 3px 0 #C99A00}

.doc{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(64px,9vw,112px)}
.doc>*{max-width:760px}
.doc h1{font-size:clamp(40px,6vw,64px)}
.doc .updated{margin:14px 0 0;color:var(--muted);font-weight:700;font-size:15px}
.doc .intro{font-size:clamp(19px,1.9vw,21px);color:var(--muted);margin:24px 0 0;line-height:1.55}
.doc .intro strong{color:var(--fg);font-weight:800}
.pages{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 8px;padding:0;list-style:none}
.pages a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700;font-size:15px;padding:7px 14px;border-radius:999px;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.pages a:hover{color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.pages a[aria-current="page"]{background:var(--sun);color:var(--ink);box-shadow:none}
.doc h2{font-size:clamp(25px,2.6vw,30px);margin:48px 0 12px;scroll-margin-top:90px}
.doc h3{font-size:21px;margin:26px 0 8px}
.doc p{margin:12px 0 0}
.doc ul,.doc ol{margin:12px 0 0;padding-left:1.3em}
.doc li{margin:6px 0 0}
.doc .pages{padding-left:0}
.doc .pages li{margin:0}
.doc li::marker{color:#C99A00}
.doc a{text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.doc a:hover{text-decoration-color:currentColor}
.doc strong,.doc b{font-weight:800}
.doc .note{background:var(--bg-3);border:1.5px solid var(--card-line);border-radius:18px;padding:18px 22px;margin:24px 0 0}
.doc .note p:first-child{margin-top:0}
.doc table{width:100%;border-collapse:collapse;margin:16px 0 0;font-size:16px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px 12px 12px 0;border-bottom:1.5px solid var(--line)}
.doc th{font:600 15px/1.3 var(--display);color:var(--muted);letter-spacing:.02em}
.doc td:first-child{font-weight:800}

/* the same footer as the home page (site.css) */
footer{background:var(--band);color:var(--on-band2);padding:26px 0 calc(26px + env(safe-area-inset-bottom));font-size:14.5px;font-weight:600;line-height:1.5}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:0 4px}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--on-band);text-decoration:none}
@media (hover:hover){footer a:hover{text-decoration:underline;text-underline-offset:4px}}
@media (max-width:700px){footer .wrap{justify-content:flex-start}footer nav,footer .wrap > a{margin-left:-8px}}
footer .wrap > a{white-space:nowrap}

@media (max-width:640px){
  body{font-size:17px}
  .brand{font-size:20px}
  .nav .btn{padding:0 14px;font-size:15px}
  .doc table,.doc thead,.doc tbody,.doc tr,.doc th,.doc td{display:block}
  .doc thead{display:none}
  .doc tr{border-bottom:1.5px solid var(--line);padding:10px 0}
  .doc td{border:0;padding:2px 0}
}
@media (prefers-reduced-motion:reduce){*{transition-property:opacity,color,background-color,border-color,box-shadow!important;transition-duration:.2s!important}}
.doc code{font:700 .9em/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg-3);border:1px solid var(--card-line);border-radius:6px;padding:.1em .35em;overflow-wrap:anywhere}