/* Layout concept: a night-ocean atlas. One hero planet bleeding off the right edge, then a pinned globe that turns region by region as the story scrolls, then a map-legend of features and a cartouche to download. */
:root{
  /* color */
  --abyss:#020C26;      /* deepest water, footer */
  --deep:#06194A;       /* page ground */
  --ocean:#0D2F78;      /* glow behind the globes */
  --sky:#2763B3;        /* listing blue, highlights */
  --foam:#EEF3FF;       /* primary text */
  --mist:#A3B7DE;       /* secondary text */
  --gold:#F6C744;       /* the one accent: stats, active states */
  --paper:#FFFFFF;      /* app UI cards */
  --ink:#0F1D36;        /* text on cards */
  --ink-soft:#5B6B87;
  --leaf:#1E7A3C;       /* the app's own action green */
  --leaf-tint:#E7F3EA;
  --hair:rgba(238,243,255,.14);
  --hair-ink:#E3E8F1;
  /* type */
  --display:"Bricolage Grotesque", "Bricolage Grotesque Fallback", "Bricolage Grotesque Fallback Roboto", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Figtree Fallback", "Figtree Fallback Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --label:"Instrument Serif", "Instrument Serif Fallback", "Instrument Serif Fallback Noto", "Iowan Old Style", Georgia, serif; /* cartographic italic, for region names */
  /* scale */
  --t-hero:clamp(2.5rem, 1.3rem + 2.65vw, 3.75rem);
  --t-h2:clamp(2rem, 1.2rem + 3vw, 3.6rem);
  --t-h3:clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --t-lead:clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --gutter:clamp(16px, 4vw, 56px);
  --max:1240px;
  --header-height:72px;
  --stage-caption-height:140px;
  color-scheme:dark;
}

/* Readable app guide; the landing page keeps its existing atlas layout. */
.guide-content.wrap{max-width:960px;padding-block:32px 72px}
.breadcrumbs{font-size:.875rem;color:var(--mist);margin-bottom:40px;overflow-wrap:anywhere}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:44px}
.guide-intro{display:grid;gap:22px}
.guide-intro h1{font-size:var(--t-hero);line-height:1.08}
.guide-intro .lead{font-size:var(--t-lead);color:var(--mist)}
.guide-contents{display:flex;flex-wrap:wrap;gap:8px 24px;padding:24px 0;margin-top:24px;border-block:1px solid var(--hair)}
.guide-contents a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold)}
.guide-content section{padding-top:44px;display:grid;gap:18px}
.guide-content section h2{font-size:clamp(1.625rem,1.2rem + 1.4vw,2.3rem);line-height:1.15}
.guide-content section p,.guide-content li{color:var(--mist)}
.guide-content section a{color:var(--foam);text-underline-offset:3px}
.guide-content .store{color:#fff}
.guide-content ul,.guide-content ol{margin:0;padding-left:1.4em}
.guide-content li+li{margin-top:10px}
.guide-facts{margin:0;display:grid;gap:0;border:1px solid var(--hair);border-radius:16px;padding:8px 20px}
.guide-facts div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;padding:16px 0}
.guide-facts div+div{border-top:1px solid var(--hair)}
.guide-facts dt{font-weight:700}
.guide-facts dd{margin:0;color:var(--mist)}
.guide-updated{font-size:.875rem;color:var(--mist);margin-top:40px}
.discovery-links{display:flex;gap:20px;flex-wrap:wrap}
@media (max-width:520px){.guide-facts div{grid-template-columns:1fr;gap:6px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--deep);color:var(--foam);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;margin:0;text-wrap:balance;overflow-wrap:anywhere}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.wrap > *, .c-head > div, .appline > div{min-width:0}
[hidden]{display:none!important}
.skip-link{position:fixed;top:8px;left:16px;z-index:100;padding:12px 18px;background:var(--gold);color:var(--abyss);border-radius:8px;transform:translateY(-160%);font-weight:700}
.skip-link:focus{transform:none}
/* A quiet utility control: an icon disc plus label, so it reads as a setting rather than a second call to action. */
.motion-toggle{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px 8px 8px;justify-self:start;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--mist);font:600 .8125rem var(--body);cursor:pointer;transition:color .2s,background .2s,border-color .2s}
/* The pause control needs scripts, so the HTML ships it hidden and site.js reveals it. Where scripting is on, hold its
   place from the first paint (invisible until revealed), so the hero no longer grows and shifts when it appears. */
@media (scripting:enabled){.hero .motion-toggle[hidden]{display:inline-flex!important;visibility:hidden}} /* outranks the global [hidden] rule */
.motion-toggle::before{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:rgba(238,243,255,.06);box-shadow:inset 0 0 0 1px var(--hair)}
.motion-toggle::after{content:"";position:absolute;left:8px;top:50%;width:28px;height:28px;margin-top:-14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.2' y='1.8' width='2.5' height='8.4' rx='.8'/%3E%3Crect x='7.3' y='1.8' width='2.5' height='8.4' rx='.8'/%3E%3C/svg%3E") center/11px 11px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.2' y='1.8' width='2.5' height='8.4' rx='.8'/%3E%3Crect x='7.3' y='1.8' width='2.5' height='8.4' rx='.8'/%3E%3C/svg%3E") center/11px 11px no-repeat}
.motion-toggle[aria-pressed="true"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 1.9v8.2c0 .5.5.8.9.5l6.1-4.1c.4-.3.4-.8 0-1.1L4.3 1.4c-.4-.3-.9 0-.9.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 1.9v8.2c0 .5.5.8.9.5l6.1-4.1c.4-.3.4-.8 0-1.1L4.3 1.4c-.4-.3-.9 0-.9.5z'/%3E%3C/svg%3E")}
.motion-toggle:hover:not(:disabled){color:var(--foam);background:rgba(238,243,255,.06);border-color:var(--hair)}
.motion-toggle:disabled{cursor:default;opacity:.75}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.maplabel{font-family:var(--label);font-style:italic;font-weight:400;letter-spacing:.14em;color:var(--mist)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;transition:background .3s, box-shadow .3s}
.nav.scrolled{background:rgba(4,18,56,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px}
.nav{background:rgba(6,25,74,.94)}
.nav-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.nav-links a{position:relative;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-size:.875rem;font-weight:600;color:var(--mist);transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.15,1)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--foam)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
/* Where the inline links give way to Menu, keep it beside "Get the app" instead of floating mid-bar. */
.nav-menu{position:static;flex:none;margin-left:auto}
.nav-menu summary{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;min-height:44px;padding:10px 14px;border:1px solid var(--hair);border-radius:999px;font-weight:600;font-size:.875rem;transition:background .2s,color .2s}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-menu[open] summary{background:var(--foam);border-color:var(--foam);color:var(--abyss)}
.nav-menu[open] summary::after{transform:translateY(2px) rotate(-135deg)}
/* Dim the page while the menu is open so tapping outside to close it is obvious. Sized explicitly: the scrolled header's backdrop-filter re-anchors fixed children to the header. */
.nav-menu[open]::before{content:"";position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;background:rgba(2,12,38,.6)}
/* The sticky header is the containing block: 100% is its actual height, including
   wrapped translations. Menus remain correctly placed without JavaScript. */
.nav-menu nav{display:none;position:absolute;z-index:1;right:max(var(--gutter),env(safe-area-inset-right,0px));top:calc(100% + 8px);width:min(260px,calc(100vw - 32px));max-height:calc(100svh - 100% - 24px);overflow-y:auto;overscroll-behavior:contain;padding:10px;border:1px solid var(--hair);border-radius:16px;background:var(--abyss);box-shadow:0 16px 32px rgba(0,0,0,.3)}
.nav-menu[open] nav{display:grid}
.nav-menu a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:8px;text-decoration:none;font-size:.9375rem;font-weight:600}
.nav-menu a:hover{background:var(--ocean)}
.nav-menu-label{margin:6px 12px 2px;padding-top:12px;border-top:1px solid var(--hair);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;min-width:0;min-height:44px}
.brand img{width:40px;height:40px;flex:none;border-radius:10px;box-shadow:0 6px 18px rgba(0,40,140,.55)}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-cta{flex:none;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:.9375rem;color:var(--abyss);background:var(--gold);padding:10px 18px;border-radius:999px;box-shadow:0 6px 20px -8px rgba(246,199,68,.6);transition:transform .2s,box-shadow .2s,background .2s}
.nav-cta:hover{transform:translateY(-1px);background:#FFD45C;box-shadow:0 10px 26px -8px rgba(246,199,68,.75)}

/* ---------- store buttons ---------- */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:12px;min-width:196px;padding:10px 20px 10px 16px;border-radius:14px;background:#000;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.32);transition:transform .2s, border-color .2s, box-shadow .2s}
.store:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.7);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.store svg{width:28px;height:28px;flex:none}
.store small{display:block;font-size:.72rem;line-height:1.1;letter-spacing:.02em;opacity:.85}
.store b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:700;line-height:1.1;letter-spacing:-.01em}
html[data-platform="android"] .store.apple{order:2}
.free{margin-top:14px;max-width:31rem;font-size:.9375rem;color:var(--mist)}

/* Download milestone: one readable phrase, so translations can move the count and localize its units. */
.download-proof{justify-self:start;width:fit-content;max-width:100%;padding:6px 14px;border:1px solid rgba(246,199,68,.32);border-radius:999px;background:rgba(246,199,68,.07);color:var(--foam);font-size:.875rem;font-weight:600;line-height:1.65;overflow-wrap:break-word}
.download-proof strong{display:inline-block;color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.download-proof--quiet{margin-bottom:14px;padding:0;border:0;border-radius:0;background:none;color:var(--mist)}

/* ---------- hero ---------- */
/* The glow is still mid-fade at the hero's bottom edge; the top layer settles it into the page colour so there is no seam with the next section. */
.hero{position:relative;overflow:clip;background:linear-gradient(180deg,rgba(6,25,74,0) 70%,var(--deep)),radial-gradient(60% 75% at 72% 48%, #164190 0%, var(--ocean) 38%, var(--deep) 78%);background-color:var(--deep);background-repeat:no-repeat}
/* The globe artwork is vertically centred and its "drag to spin" hint hangs ~11% below it, so the hero must be tall enough for both: on wide screens a fixed cap clipped the hint to a stray hairline. */
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:max(min(50vw,760px),calc(min(63vw,1100px) * .5777 + 184px));padding-block:clamp(24px,4vw,56px) clamp(40px,5vw,72px)}
.hero-copy{position:relative;z-index:3;display:grid;gap:26px;max-width:36rem}
.hero h1{font-size:var(--t-hero);line-height:.94;letter-spacing:-.04em}
.hero h1 .line{display:block}
.hero h1 .gold{color:var(--gold)}
.hero .lead{font-size:var(--t-lead);color:var(--mist);max-width:31rem}
.hero .lead strong{color:var(--foam);font-weight:600}
.hero-art{position:absolute;z-index:1;right:calc(-1 * clamp(24px,4vw,90px));top:50%;width:min(63vw,1100px);transform:translateY(-50%);pointer-events:none}
.hero-art picture{display:contents} /* the AVIF/WebP choice must not add a layout box */
.hero-art img{width:100%;height:auto;aspect-ratio:2600/1502;animation:drift 14s ease-in-out infinite}
/* Keep the static artwork in the free column when graphics or scripts are unavailable. */
@media (min-width:901px){
  .hero-art img.fallback{width:calc((min(100vw,var(--max)) - 2 * var(--gutter)) / 2);margin-left:auto}
}
/* The artwork is painted on a bright card with a pale rim a few percent in. Start the fade inside the rim, round off the empty corners with an ellipse that keeps the flag ring, and feather all four edges so it melts into the hero rather than reading as a box while the live globe loads, or permanently without WebGL. */
.hero-art img.fallback{-webkit-mask-image:radial-gradient(64% 72% at 50% 55%,#000 74%,transparent 100%),linear-gradient(90deg,transparent 3%,#000 16%,#000 84%,transparent 97%),linear-gradient(180deg,transparent 2.5%,#000 10%,#000 88%,transparent 97.5%);-webkit-mask-composite:source-in,source-in;mask-image:radial-gradient(64% 72% at 50% 55%,#000 74%,transparent 100%),linear-gradient(90deg,transparent 3%,#000 16%,#000 84%,transparent 97%),linear-gradient(180deg,transparent 2.5%,#000 10%,#000 88%,transparent 97.5%);mask-composite:intersect,intersect}
@keyframes drift{50%{transform:translateY(-1.4%) scale(1.012)}}

/* scale bar: stats drawn like a map's scale */
.scalebar{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;margin-top:8px}
.scalebar div{padding:12px 22px 0 0;position:relative;min-width:0}
.scalebar div::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border:1.5px solid var(--foam);border-right:none}
.scalebar div:nth-child(odd)::before{background:var(--foam)}
.scalebar div:last-child::before{border-right:1.5px solid var(--foam)}
.scalebar b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);line-height:1.1;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.scalebar span{display:block;font-size:.8125rem;line-height:1.3;color:var(--mist)}

/* ---------- globe chapters ---------- */
.turn{position:relative;overflow-x:clip;background:linear-gradient(180deg,var(--deep) 0%, #041440 100%) no-repeat #041440}
.turn-intro{padding-block:clamp(48px,7vw,96px) clamp(28px,4vw,48px);display:grid;gap:18px;max-width:46rem}
.turn-intro h2,.ai h2,.legend-head h2,.langs h2,.get h2{font-size:var(--t-h2)}
.turn-intro p{font-size:var(--t-lead);color:var(--mist);max-width:38rem}
.turn-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.stage{position:sticky;top:calc(var(--header-height) + 12px);height:calc(100svh - var(--header-height) - 24px);max-height:860px;display:grid;place-items:center;align-content:center;gap:18px;align-self:start}
.stage.compact-stage{position:relative;top:auto;height:auto;max-height:none;padding-block:24px}
.stage.compact-stage .globe-box{width:min(100%,420px)}
.globe-box{position:relative;width:min(100%,600px,max(1px,calc(100svh - var(--header-height) - var(--stage-caption-height) - 42px)));aspect-ratio:1}
.globe-box::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(39,99,179,.55),transparent 68%);filter:blur(30px)}
.orbit{position:absolute;inset:-6% -10%;width:120%;height:112%;pointer-events:none}
.orbit ellipse{fill:none;stroke:rgba(238,243,255,.22);stroke-width:1;stroke-dasharray:2 6}
.globe-box img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:translateX(16%) scale(.9);transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.15,1)}
.globe-box img.past{transform:translateX(-16%) scale(.9)}
.globe-box img.on{opacity:1;transform:none}
.stage-caption{position:relative;z-index:3;text-align:center;display:grid;gap:4px}
.stage-caption .maplabel{font-size:1.5rem;color:var(--foam)}
.tally{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;justify-self:center;max-width:100%;padding:4px;border:1px solid var(--hair);border-radius:26px;background:rgba(2,12,38,.42);font-family:var(--display);font-weight:700;font-size:.875rem;color:var(--mist)}
/* One segmented control rather than three loose pills; the active region is filled. */
.tally button{font:inherit;color:inherit;background:none;border:0;min-height:44px;padding:9px 16px;border-radius:999px;white-space:nowrap;cursor:pointer;transition:color .3s, background .25s}
.tally button:hover{background:rgba(238,243,255,.08);color:var(--foam)}
.tally button.on{color:var(--abyss);background:var(--gold)}
.preview-note{font-size:.8125rem;color:var(--mist);text-align:center}
.tally .sum{color:var(--foam)}

.chapters{display:grid}
.chapter{min-height:82vh;display:grid;align-content:center;gap:22px;padding-block:48px}
.chapter .region{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.chapter .region .maplabel{font-size:1.625rem;color:var(--foam)}
.chapter .region small{font-size:.875rem;color:var(--mist)}
.chapter h3{font-size:var(--t-h3);letter-spacing:-.025em;line-height:1.05}
.chapter p{color:var(--mist);max-width:30rem}
.chapter .inline-globe{display:none}
.chapter .card p{color:var(--ink-soft);max-width:none}
.chapter .card .q{color:var(--ink)}

/* ---------- app cards (rebuilt from the listing UI) ---------- */
.card{background:var(--paper);color:var(--ink);border-radius:22px;box-shadow:0 30px 60px -20px rgba(0,8,40,.65),0 2px 0 rgba(255,255,255,.6) inset;width:min(100%,400px);font-size:.9375rem;line-height:1.4}
.card button{font:inherit;cursor:pointer}
.flag{display:block;border-radius:4px;box-shadow:0 0 0 1px rgba(15,29,54,.12);flex:none}
.c-head{display:flex;align-items:center;gap:14px;padding:18px 18px 10px}
.c-head .flag{width:48px;height:auto}
.c-head h4{margin:0;font-family:var(--display);font-size:1.25rem;font-weight:700;letter-spacing:-.015em;line-height:1.1}
.c-head .meta{color:var(--ink-soft);font-size:.875rem}
.c-head .coords{font-variant-numeric:tabular-nums;font-size:.8125rem;color:var(--ink-soft);letter-spacing:.04em}
.icon-btn{margin-left:auto;width:44px;height:44px;border-radius:50%;border:none;background:#EEF2F8;color:var(--ink-soft);display:grid;place-items:center;flex:none}
.c-row{display:flex;gap:10px;align-items:baseline;padding:0 18px 14px;font-weight:700}
.c-row span{font-weight:600;font-size:.8125rem;color:var(--ink-soft);letter-spacing:.06em}
.c-btn{display:flex;width:calc(100% - 28px);margin:0 14px 14px;justify-content:center;align-items:center;gap:8px;border:none;border-radius:14px;background:var(--leaf);color:#fff;font-weight:700;padding:14px;transition:filter .2s}
.c-btn:hover{filter:brightness(1.1)}
.c-btn svg{transition:transform .3s}
.c-btn[aria-expanded="true"] svg{transform:rotate(90deg)}
.facts{display:grid;grid-template-columns:1fr 1fr;margin:0 14px 14px;border:1px solid var(--hair-ink);border-radius:14px;overflow:hidden}
.facts div{padding:12px 14px;display:grid;gap:2px;min-width:0}
.facts div:nth-child(odd){border-right:1px solid var(--hair-ink)}
.facts div:nth-child(n+3){border-top:1px solid var(--hair-ink)}
.facts dt{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--ink-soft)}
.facts dt svg{width:15px;height:15px;color:var(--leaf)}
.facts dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.facts-title{margin:4px 18px 10px;padding-left:10px;border-left:3px solid var(--leaf);font-size:.8125rem;font-weight:700;letter-spacing:.02em}
.details{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.15,1)}
.details.open{grid-template-rows:1fr}
.details > div{overflow:hidden}

/* quiz: four rounds, four styles. Every panel shares one grid cell, so the card is always as tall as its tallest
   round and the chapter (vertically centred) never shifts between rounds. --qa is the round's accent. */
.quiz{--qa:#1E7A3C;--qa-tint:#E7F3EA;--qa-glow:rgba(46,160,90,.55);position:relative;width:min(100%,440px);padding:16px 18px 14px;box-shadow:0 30px 60px -20px rgba(0,8,40,.65),0 0 90px -18px var(--qa-glow),0 2px 0 rgba(255,255,255,.6) inset;transition:box-shadow .6s ease}
.quiz:focus{outline:none}
.quiz :focus-visible{outline-color:var(--ink)}
.quiz .quiz-progress{margin:0;font-size:.75rem;font-weight:600;color:var(--ink-soft);letter-spacing:.02em}
.qz-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.qz-top .quiz-progress{margin-left:auto}
.qz-mode{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:999px;background:var(--qa-tint);color:var(--qa);font:800 .6875rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase;transition:background .4s,color .4s}
.qz-mode-icon,.qz-mode-icon svg{display:block;width:15px;height:15px}
.qz-score{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:46px;padding:5px 10px;border-radius:999px;background:var(--ink);color:#fff;font:800 .8125rem/1 var(--display);font-variant-numeric:tabular-nums}
.qz-score svg{width:13px;height:13px;color:var(--gold);fill:var(--gold)}
.qz-plus{position:absolute;right:2px;top:-6px;color:var(--leaf);font:800 .75rem/1 var(--display);pointer-events:none}
.qz-segs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:16px}
.qz-segs i{position:relative;height:5px;border-radius:3px;background:#E3E8F1;overflow:hidden}
.qz-segs b{position:absolute;inset:0;border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1),background .3s}
.qz-segs .now b{transform:scaleX(1);background:var(--qa);opacity:.35;animation:qz-seg 1.6s ease-in-out 3}
.qz-segs .ok b{transform:none;background:var(--leaf)}
.qz-segs .miss b{transform:none;background:#C9473F}
@keyframes qz-seg{50%{opacity:.75}}
.qz-stage{display:grid}
.qz-panel{grid-area:1/1;min-width:0;display:grid;align-content:start;gap:14px}
/* !important: revealed names and badges set visibility:visible, which would otherwise show through a hidden panel. */
.qz-panel.qz-off,.qz-panel.qz-off *{visibility:hidden!important;pointer-events:none}
.chapter .quiz .q{margin:0;font-family:var(--display);font-weight:700;font-size:1.3125rem;letter-spacing:-.015em;line-height:1.15;color:var(--ink);border-radius:6px}
.quiz .q:focus:not(:focus-visible){outline:none}
.quiz button[data-k]{position:relative;color:var(--ink);-webkit-tap-highlight-color:transparent}
.quiz button[data-k]:disabled{cursor:default}
.quiz .is-dim{opacity:.55;transition:opacity .4s}
/* Flag tiles reveal every name as a learning aid, so only the artwork steps back; the names stay readable. */
.quiz .qz-tile.is-dim{opacity:1}
.qz-tile.is-dim .qz-flag{opacity:.45;transition:opacity .4s}
.qz-pulse{position:absolute;inset:-3px;border:3px solid var(--leaf);border-radius:inherit;pointer-events:none}
.qz-hold .qz-panel:not(.qz-off) .q,.qz-hold .qz-panel:not(.qz-off) .qz-tile{opacity:0}

/* 1 · flag match */
.qz-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qz-tile{display:grid;justify-items:center;gap:7px;padding:12px 10px 8px;border:2px solid #8190A8;border-radius:16px;background:#F6F8FC;transition:border-color .2s,background .2s,box-shadow .2s}
.qz-tile:not(:disabled):hover{border-color:var(--qa);box-shadow:0 12px 22px -14px rgba(15,29,54,.55)}
.qz-flag{position:relative;display:block;width:100%;max-width:136px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(15,29,54,.12),0 7px 14px -9px rgba(15,29,54,.65);transform:perspective(520px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease}
.qz-flag img{display:block;width:100%;height:100%;object-fit:cover}
.qz-flag::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 65%);transform:translateX(-130%);pointer-events:none}
.qz-shine .qz-flag::after{animation:qz-sheen 2.8s cubic-bezier(.4,0,.2,1) .2s 2}
.qz-shine .qz-tile:nth-child(2) .qz-flag::after{animation-delay:.5s}
.qz-shine .qz-tile:nth-child(3) .qz-flag::after{animation-delay:.8s}
.qz-shine .qz-tile:nth-child(4) .qz-flag::after{animation-delay:1.1s}
@keyframes qz-sheen{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
.qz-name{min-height:1.25em;font-size:.8125rem;font-weight:700;line-height:1.25;color:var(--ink-soft);text-align:center;visibility:hidden}
.qz-done .qz-name{visibility:visible}
.qz-badge{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;opacity:0;box-shadow:0 0 0 3px #fff,0 6px 12px -4px rgba(0,0,0,.45)}
.qz-badge svg{width:17px;height:17px}
.qz-tile.is-right{border-color:var(--leaf);background:#E7F3EA}
.qz-tile.is-right .qz-name{color:var(--leaf)}
.qz-tile.is-right .qz-badge{opacity:1;background:var(--leaf)}
.qz-tile.is-wrong{border-color:#B3261E;background:#FCEDEB}
.qz-tile.is-wrong .qz-name{color:#B3261E}
.qz-tile.is-wrong .qz-badge{opacity:1;background:#B3261E}

/* 2 · capital city */
.qz-banner{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid #D3E0F4;border-radius:18px;background:linear-gradient(135deg,#E9F1FD 0%,#F7FAFF 70%)}
.qz-cloth{position:relative;flex:none;width:108px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(15,29,54,.12),0 10px 18px -10px rgba(15,29,54,.7);transform-origin:0 50%}
.qz-cloth img{display:block;width:100%;height:100%;object-fit:cover}
.qz-cloth::after{content:"";position:absolute;inset:0 -100% 0 0;background:linear-gradient(90deg,rgba(0,0,0,.14),rgba(255,255,255,.3) 18%,rgba(0,0,0,.1) 36%,rgba(255,255,255,.26) 56%,rgba(0,0,0,.12) 76%,rgba(255,255,255,.22) 92%);transform:translateX(-25%);pointer-events:none}
.qz-wave .qz-cloth{animation:qz-sway 3.4s ease-in-out 3}
.qz-wave .qz-cloth::after{animation:qz-silk 3.4s ease-in-out 3}
@keyframes qz-sway{0%,100%{transform:none}25%{transform:perspective(420px) rotateY(-9deg) skewY(-1.2deg)}75%{transform:perspective(420px) rotateY(7deg) skewY(1deg)}}
@keyframes qz-silk{0%,100%{transform:translateX(-25%)}50%{transform:translateX(-45%)}}
.qz-banner-text{display:grid;gap:6px;min-width:0}
.qz-eyebrow{font:800 .6875rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--qa)}
.qz-rows{display:grid;gap:8px}
.qz-row{display:flex;align-items:center;gap:12px;min-height:50px;padding:7px 14px 7px 8px;overflow:hidden;border:2px solid #8190A8;border-radius:14px;background:#F6F8FC;text-align:left;font-weight:700;transition:border-color .2s,transform .2s,box-shadow .2s}
.qz-row:not(:disabled):hover{border-color:var(--qa);transform:translateX(4px);box-shadow:0 10px 18px -14px rgba(15,29,54,.6)}
.qz-row > *{position:relative}
.qz-row .qz-row-fill{position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%}
.qz-letter{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1.5px solid #8190A8;border-radius:10px;background:#fff;color:var(--qa);font:800 .875rem/1 var(--display)}
.qz-letter svg{width:18px;height:18px}
.qz-city{flex:1;font-size:1.0625rem}
.qz-row.is-right{border-color:var(--leaf)}
.qz-row.is-right .qz-row-fill{transform:none;background:#E7F3EA}
.qz-row.is-right .qz-letter{border-color:var(--leaf);background:var(--leaf);color:#fff}
.qz-row.is-wrong{border-color:#B3261E}
.qz-row.is-wrong .qz-row-fill{transform:none;background:#FCEDEB}
.qz-row.is-wrong .qz-letter{border-color:#B3261E;background:#B3261E;color:#fff}

/* 3 · size duel */
.qz-p-duel{grid-template-rows:auto 1fr}
.qz-duel{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:6px 0 4px}
.qz-fighter{padding:0;border:0;border-radius:18px;background:none;perspective:900px;text-align:center}
.qz-3d{position:relative;display:grid;height:100%;transform-style:preserve-3d}
.qz-fighter.is-flipped .qz-3d{transform:rotateY(180deg)}
.qz-face{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:220px;padding:14px 10px;border:2px solid #C9A869;border-radius:18px;background:linear-gradient(180deg,#FFFCF4,#FBEFD5);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:border-color .2s,box-shadow .3s}
.qz-front .qz-flag{max-width:140px;margin-bottom:8px}
.qz-fighter:not(:disabled):hover .qz-front{border-color:var(--qa);box-shadow:0 14px 24px -16px rgba(80,50,0,.7)}
.qz-fname{font:800 1.0625rem/1.1 var(--display);letter-spacing:-.01em}
.qz-freg{font-size:.75rem;color:var(--ink-soft)}
.qz-back{transform:rotateY(180deg);gap:6px;border-color:#24468F;background:radial-gradient(120% 90% at 50% 30%,#123A8C,#06194A);color:#fff}
.qz-sil{display:block;flex:1 1 0;width:100%;height:0;min-height:96px;max-height:170px}
.qz-nosil .qz-sil{display:none}
.qz-area{font:800 1.125rem/1 var(--display);font-variant-numeric:tabular-nums;color:#FFD666}
.qz-bar{display:block;width:84%;height:6px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.qz-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#F6C744,#FFE59A);transform:scaleX(0);transform-origin:0 50%}
.qz-fighter.is-winner .qz-back{border-color:#F6C744;box-shadow:0 0 0 2px #F6C744,0 0 30px -4px rgba(246,199,68,.85)}
.qz-fighter.is-wrong .qz-front,.qz-fighter.is-wrong .qz-back{border-color:#B3261E}
/* The loser stays a dark card; only its contents step back, so it reads as second place rather than as disabled. */
.quiz .qz-fighter.is-dim{opacity:1}
.qz-fighter.is-dim .qz-back > *{opacity:.62}
.qz-crown{position:absolute;top:-17px;left:50%;z-index:4;display:grid;place-items:center;width:36px;height:36px;margin-left:-18px;border-radius:50%;background:#F6C744;color:#5A3A00;opacity:0;box-shadow:0 0 0 3px #fff,0 8px 16px -6px rgba(0,0,0,.5)}
.qz-crown svg{width:20px;height:20px}
.qz-fighter.is-winner .qz-crown{opacity:1}
.qz-vs{position:absolute;left:50%;top:calc(50% + 3px);z-index:3;width:46px;height:46px;margin:-23px 0 0 -23px;pointer-events:none}
.qz-vs b{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--ink);color:var(--gold);font:900 .9375rem/1 var(--display);letter-spacing:.04em;box-shadow:0 0 0 4px #fff,0 10px 20px -8px rgba(0,0,0,.6)}
.qz-shock{position:absolute;inset:0;border:3px solid var(--gold);border-radius:50%;opacity:0}

/* 4 · map spotter */
.qz-map{position:relative;aspect-ratio:2/1;overflow:hidden;border-radius:16px;background:radial-gradient(120% 95% at 50% 38%,#133D92 0%,#0A2462 52%,#041440 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -40px 60px -40px rgba(0,0,0,.6)}
.qz-map canvas{display:block;width:100%;height:100%}
.qz-map-off::before{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:800 4.5rem/1 var(--display);color:rgba(246,199,68,.85)}
.qz-ping{position:absolute;left:var(--x,50%);top:var(--y,50%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#FFE59A;box-shadow:0 0 14px 4px rgba(255,214,102,.75);opacity:0;transition:opacity .4s}
.qz-ping.on{opacity:1}
.qz-ping::before,.qz-ping::after{content:"";position:absolute;inset:-7px;border:2px solid rgba(255,214,102,.85);border-radius:50%;opacity:0}
.qz-ping.on::before{animation:qz-ping 1.9s cubic-bezier(.2,.6,.3,1) 4}
.qz-ping.on::after{animation:qz-ping 1.9s cubic-bezier(.2,.6,.3,1) .6s 4}
@keyframes qz-ping{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
.qz-maplabel{position:absolute;left:var(--x,50%);top:var(--y,50%);opacity:0;pointer-events:none}
.qz-maplabel.on{opacity:1}
.qz-maplabel span{position:absolute;bottom:10px;left:0;display:inline-flex;width:max-content;align-items:center;gap:6px;padding:4px 11px 4px 4px;border-radius:999px;background:#fff;color:var(--ink);font:800 .8125rem/1 var(--display);white-space:nowrap;transform:translateX(-50%);box-shadow:0 10px 20px -8px rgba(0,0,0,.7)}
.qz-maplabel img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.qz-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.qz-chip{display:grid;justify-items:center;gap:6px;min-width:0;padding:10px 4px 9px;border:2px solid #8190A8;border-radius:14px;background:#F6F8FC;font-size:.8125rem;font-weight:700;line-height:1.15;transition:border-color .2s,transform .2s,background .2s}
.qz-chip span{max-width:100%;overflow-wrap:anywhere}
.qz-chip:not(:disabled):hover{border-color:var(--qa);transform:translateY(-2px)}
.qz-coin{display:block;width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(15,29,54,.18)}
.qz-chip.is-right{border-color:var(--leaf);background:#E7F3EA;color:var(--leaf)}
.qz-chip.is-wrong{border-color:#B3261E;background:#FCEDEB;color:#B3261E}

/* results */
.qz-results{justify-items:center;align-content:center;gap:6px;text-align:center}
.qz-medal{width:76px;height:87px}
.qz-medal svg{display:block;width:100%;height:100%;overflow:visible}
.chapter .quiz p.qz-eyebrow{margin:4px 0 0;color:#8A5A00}
.chapter .quiz p.qz-final{margin:0;font:800 2.75rem/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.qz-count{display:inline-block;font-variant-numeric:tabular-nums}
.qz-of{font-size:1.125rem;color:var(--ink-soft)}
.qz-recap{display:grid;gap:6px;width:100%;margin:8px 0 0;padding:0;list-style:none}
.qz-recap li{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;background:#F6F8FC;font-size:.875rem;text-align:left}
.qz-tick{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--leaf);color:#fff}
.qz-tick svg{width:13px;height:13px}
.qz-recap .miss .qz-tick{background:#B3261E}
.qz-r-mode{color:var(--ink-soft);font-weight:600}
.qz-recap b{display:inline-flex;align-items:center;gap:7px;margin-left:auto}
.qz-recap .qz-coin{width:20px;height:20px;box-shadow:0 0 0 1px rgba(15,29,54,.18)}

/* feedback, the countdown pill and the auto-advance switch */
.quiz .fb{margin:14px 0 0;min-height:4.35em;font-size:.875rem;line-height:1.45;color:var(--ink-soft)}
.quiz .fb strong{color:var(--ink)}
.quiz .fb.is-right strong{color:var(--leaf)}
.quiz .fb.is-wrong strong{color:#B3261E}
/* One row at every width, so the card keeps its height: the small labels wrap inside themselves instead. */
.quiz .quiz-actions{display:flex;align-items:center;gap:16px;min-height:48px;margin-top:4px}
.qz-next{position:relative;flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 7px 0 20px;overflow:hidden;border:0;border-radius:999px;background:var(--leaf);color:#fff;font-weight:700;box-shadow:0 10px 20px -12px rgba(30,122,60,.95);transition:filter .2s,transform .15s}
.qz-next:hover{filter:brightness(1.1)}
.qz-next:active{transform:scale(.97)}
.qz-next.is-hidden{visibility:hidden}
.qz-next:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.qz-next-fill{position:absolute;inset:0;background:rgba(2,12,38,.3);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.qz-next-label{position:relative}
.qz-ring{position:relative;display:grid;place-items:center;width:1.875rem;height:1.875rem;border-radius:50%;background:rgba(255,255,255,.16)}
.qz-ring > svg{position:absolute;inset:0;width:100%;height:100%}
.qz-ring .qz-ring-track{transform:rotate(-90deg);opacity:0}
.qz-ring circle{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.qz-ring b{position:relative;font:800 .75rem/1 var(--display);font-variant-numeric:tabular-nums;opacity:0}
.qz-ring > svg:last-child{inset:22%;width:56%;height:56%}
.qz-next.is-counting .qz-ring-track,.qz-next.is-counting .qz-ring b{opacity:1}
.qz-next.is-counting .qz-ring > svg:last-child{opacity:0}
.qz-again{flex:none;white-space:nowrap;min-height:44px;padding:0 18px;border:2px solid var(--leaf);border-radius:999px;background:#fff;color:var(--leaf);font-weight:700}
.qz-again:hover{background:var(--leaf-tint)}
.quiz .quiz-more{min-width:0;margin-top:0;line-height:1.25}
.qz-auto{display:inline-flex;align-items:center;gap:8px;min-width:0;min-height:44px;margin-left:auto;padding:0 2px;border:0;background:none;color:var(--ink-soft);font-size:.8125rem;font-weight:600;line-height:1.2;text-align:left}
.qz-switch{position:relative;flex:none;width:32px;height:19px;border-radius:999px;background:#8190A8;transition:background .2s}
.qz-switch i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
.qz-auto[aria-pressed="true"] .qz-switch{background:var(--leaf)}
.qz-auto[aria-pressed="true"] .qz-switch i{transform:translateX(13px)}
.qz-auto:disabled{cursor:default;opacity:.6}
.qz-fx{position:absolute;inset:0;z-index:5;pointer-events:none}
.qz-bit{position:absolute;left:0;top:0;border-radius:2px}
@media (max-width:420px){
  .quiz{padding:14px 14px 12px}
  .chapter .quiz .q{font-size:1.1875rem}
  .qz-tiles,.qz-chips{gap:7px}
  .qz-banner{gap:12px;padding:12px}
  .qz-cloth{width:88px}
  .qz-duel{gap:14px}
  .qz-face{min-height:190px}
  .qz-top .quiz-progress{font-size:.6875rem}
  .qz-again{padding:0 14px}
  .quiz .quiz-actions{gap:12px}
  .qz-next{padding-left:16px}
}
.motion-paused .quiz *,.motion-paused .quiz *::before,.motion-paused .quiz *::after{animation:none!important}
@media (prefers-reduced-motion:reduce){.quiz *,.quiz *::before,.quiz *::after{animation:none!important}}
.quiz-more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;min-height:44px;font-size:.875rem;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(15,29,54,.3);text-underline-offset:4px}
.quiz-more:hover{text-decoration-color:var(--ink)}

/* ---------- Atlas AI ---------- */
.ai{position:relative;padding-block:clamp(72px,10vw,140px);background:radial-gradient(50% 60% at 78% 50%, rgba(30,122,60,.18), transparent 70%) no-repeat, #041440}
.ai .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.ai-copy{display:grid;gap:22px;max-width:34rem}
.ai-copy .lead{font-size:var(--t-lead);color:var(--mist)}
.ai-copy ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ai-copy li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border:1px solid var(--hair);border-radius:999px;font-size:.9375rem;font-weight:500}
.ai-copy li svg{width:18px;height:18px;color:var(--gold)}
.ai-copy .note{font-size:.875rem;color:var(--mist)}
.chat{justify-self:center;width:min(100%,440px)}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--hair-ink)}
.avatar{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4FB36A,#1E7A3C 70%);display:grid;place-items:center;flex:none}
.chat-head h3{margin:0;font-family:var(--display);font-size:1.125rem;font-weight:700}
.online{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--ink-soft)}
.online::before{content:"";width:7px;height:7px;border-radius:50%;background:#2DB25A}
.reset{margin-left:auto}
.log{display:flex;flex-direction:column;gap:12px;padding:18px;height:320px;overflow-y:auto;scroll-behavior:smooth;background:linear-gradient(180deg,#FFFFFF,#F7F9FD)}
/* margin-top:auto (not justify-content:flex-end) keeps the earliest messages scrollable once the log overflows. */
.log > :first-child{margin-top:auto}
.msg{max-width:84%;padding:11px 14px;border-radius:18px;font-size:.9375rem;line-height:1.45;animation:pop .35s cubic-bezier(.2,.8,.2,1)}
.msg.me{align-self:flex-end;background:var(--leaf);color:#fff;border-bottom-right-radius:6px}
.msg.bot{align-self:flex-start;background:#F2F5FA;border:1px solid var(--hair-ink);border-bottom-left-radius:6px}
.msg.typing{display:flex;gap:4px;padding:14px 16px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:#9AA8BF;animation:blink 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px 18px;border-top:1px solid var(--hair-ink)}
.chip{border:1px solid #CFE5D6;background:var(--leaf-tint);color:var(--leaf);border-radius:999px;min-height:44px;padding:8px 14px;font-weight:600;font-size:.875rem}
.chip:hover{background:#D7ECDD}
.chip:disabled,.chip[aria-disabled="true"]{opacity:.5;cursor:default}
.chat-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;background:var(--gold);color:var(--abyss);font-weight:700;font-size:.875rem;text-decoration:none;box-shadow:0 6px 18px -8px rgba(246,199,68,.75);transition:background .2s,transform .2s}
.chat-more:hover{background:#FFD45C;transform:translateY(-1px)}
.log:focus-visible{outline-offset:-3px;border-radius:0}
.chat-caption{margin-top:12px;text-align:center;font-size:.8125rem;color:var(--mist)}

/* ---------- legend ---------- */
.legend-sec{padding-block:clamp(72px,10vw,140px);background:#041440}
.legend{border:1.5px solid var(--hair);border-radius:4px;padding:clamp(24px,4vw,48px);position:relative}
.legend::before{content:"";position:absolute;inset:6px;border:1px solid rgba(238,243,255,.07);border-radius:2px;pointer-events:none}
.legend-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.legend-head .maplabel{font-size:1.375rem}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(24px,4vw,56px);margin:0;padding:0;list-style:none}
.keys li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.keys .sym{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;color:var(--gold)}
.keys .sym svg{width:22px;height:22px}
.keys h3{font-size:1.1875rem;letter-spacing:-.01em;line-height:1.2;margin-bottom:4px;font-weight:700}
.keys p{font-size:.9375rem;color:var(--mist);line-height:1.5}

/* ---------- languages ---------- */
.langs{padding-block:clamp(72px,9vw,120px) clamp(72px,9vw,120px);background:linear-gradient(180deg,#041440,var(--deep)) no-repeat var(--deep);overflow:clip}
.langs .wrap{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,56px)}
.langs .wrap p{color:var(--mist);font-size:var(--t-lead);max-width:36rem}
.marquee{display:flex;width:max-content;gap:12px;animation:slide 70s linear infinite;padding-block:6px}
.marquee.rev{animation-direction:reverse;animation-duration:80s;margin-top:12px}
.marquee:hover{animation-play-state:paused}
@keyframes slide{to{transform:translateX(calc(-50% - 6px))}}
.tag{display:grid;gap:2px;padding:14px 22px;border:1px solid var(--hair);border-radius:16px;background:rgba(13,47,120,.35);white-space:nowrap}
.tag b{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
.tag span{font-family:var(--label);font-style:italic;font-size:1rem;color:var(--mist);letter-spacing:.04em}

/* ---------- download ---------- */
.get{position:relative;padding-block:clamp(80px,10vw,150px);background:radial-gradient(55% 70% at 50% 100%, var(--ocean), rgba(13,47,120,0) 75%),linear-gradient(180deg,#041440,var(--deep) 45%);background-color:var(--deep);background-repeat:no-repeat;overflow:clip}
/* Section grounds never tile: a fractional section height otherwise wraps the gradient's bright bottom row onto its top edge as a 1px seam. */
.get .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.get-copy{display:grid;gap:24px}
.get-copy .appline{display:flex;align-items:center;gap:16px}
.get-copy .appline img{width:76px;height:76px;border-radius:18px;box-shadow:0 14px 40px rgba(20,80,200,.55)}
.get-copy .appline b{display:block;font-family:var(--display);font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.get-copy .appline span{color:var(--mist);font-size:.9375rem}
.get-copy .lead{font-size:var(--t-lead);color:var(--mist);max-width:32rem}
.qrs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qr{background:var(--paper);color:var(--ink);border-radius:20px;padding:18px;display:grid;gap:12px;text-align:center;text-decoration:none;transition:transform .2s}
.qr:hover{transform:translateY(-3px)}
.qr svg.code{width:100%;height:auto;aspect-ratio:1}
.qr svg.code path{stroke:var(--ink)}
.qr b{font-family:var(--display);font-size:1rem;font-weight:700}
.qr-note{grid-column:1/-1;text-align:center;font-size:.875rem;color:var(--mist)}

footer{background:var(--abyss);padding-block:36px calc(36px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;font-size:.875rem;color:var(--mist)}
footer nav{display:flex;gap:24px;flex-wrap:wrap}
footer nav a,footer .support{display:inline-flex;align-items:center;min-height:44px}
footer a{text-decoration:none}
footer .platform-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
footer .platform-links b{flex-basis:100%;color:var(--foam)}
footer a:hover{color:var(--foam)}
footer .brand img{width:32px;height:32px;border-radius:8px}
footer .credits{flex-basis:100%;font-size:.75rem;opacity:.7}


/* ---------- live flag globe ---------- */
/* pan-y: vertical swipes keep scrolling the page; globe.js turns the rest into rotation, taps and pinch-zoom. */
.globe-cv{display:none;touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.globe-cv:focus-visible{outline:3px solid var(--gold);outline-offset:-4px}
.globe-box.kbd-focus{outline:3px solid var(--gold);outline-offset:5px;border-radius:18px}
.hero-art.kbd-focus{box-shadow:inset 0 0 0 3px var(--gold);border-radius:18px}
.globe-cv.pointing{cursor:pointer}
.globe-cv.grabbing{cursor:grabbing}
.gl .globe-cv{display:block}
.globe-ready img.fallback,.globe-ready > img[data-g],.turn.interactive-globe .chapter .inline-globe{display:none}
.gl .hero-art{aspect-ratio:2600/1502}
.gl .hero-art .globe-cv{position:absolute;inset:-15% -7% -15% -1%;width:108%;height:130%;opacity:0;transition:opacity 1.2s ease}
.gl .hero-art .globe-cv.live,.gl .globe-box .globe-cv.live{opacity:1;pointer-events:auto}
.gl .globe-box .globe-cv{position:absolute;inset:-11%;width:122%;height:122%;z-index:1;opacity:0;transition:opacity 1s ease}
.gl .globe-box::before{inset:2%;background:radial-gradient(circle,rgba(39,99,179,.5),transparent 70%)}
.gl .orbit{z-index:0}
.ghint.kbd{border-color:var(--gold)}
.hero-copy > *{animation:rise .9s cubic-bezier(.2,.7,.15,1) both}
.hero-copy > :nth-child(2){animation-delay:.12s}.hero-copy > :nth-child(3){animation-delay:.24s}.hero-copy > :nth-child(4){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* hover label */
.gtip{position:absolute;left:0;top:0;z-index:6;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(2,12,38,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--hair);color:var(--foam);font-weight:600;font-size:.875rem;white-space:nowrap;pointer-events:none;opacity:0;transform:translate3d(0,0,0) scale(.92);transition:opacity .18s, transform .18s;will-change:transform}
.gtip.on{opacity:1}
.gflag{display:block;flex:none;width:28px;aspect-ratio:4/3;border-radius:4px;background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.25)}

/* country card, pinned to the globe with a leader line */
.gline{position:absolute;left:0;top:0;z-index:6;height:1.5px;background:linear-gradient(90deg,var(--gold),rgba(246,199,68,.35));transform-origin:0 50%;pointer-events:none;opacity:0;transition:opacity .25s}
.gline.on{opacity:1}
.gcard{position:absolute;left:0;top:0;z-index:7;pointer-events:auto;width:min(272px,calc(100% - 16px));max-height:calc(100% - 16px);overflow:auto;background:var(--paper);color:var(--ink);border-radius:18px;padding:14px 14px 12px;box-shadow:0 26px 50px -18px rgba(0,8,40,.75),0 2px 0 rgba(255,255,255,.6) inset;font-size:.875rem;line-height:1.35;opacity:0;visibility:hidden;transform:scale(.9);transform-origin:var(--ox,0) var(--oy,100%);transition:opacity .28s, transform .45s cubic-bezier(.2,.9,.25,1.15), visibility 0s .3s}
.gcard.on{opacity:1;visibility:visible;transform:none;transition:opacity .28s, transform .45s cubic-bezier(.2,.9,.25,1.15), visibility 0s}
.gc-top{display:flex;align-items:center;gap:12px;padding-right:30px}
.gc-top .gflag{width:52px;border-radius:6px;box-shadow:0 0 0 1px rgba(15,29,54,.12),0 4px 10px rgba(15,29,54,.18)}
.gc-name{display:block;font-family:var(--display);font-size:1.1875rem;font-weight:700;letter-spacing:-.015em;line-height:1.1;overflow-wrap:anywhere}
.gc-sub{display:block;color:var(--ink-soft);font-size:.8125rem;margin-top:2px}
.gc-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;border:0;background:#EEF2F8;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer}
.gc-top{padding-right:40px}
.gcard.occluded{visibility:hidden;pointer-events:none}
.globe-details{display:none}
.gc-x:hover{background:#E1E7F1}
.gc-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--hair-ink)}
.gc-facts dt{font-size:.75rem;font-weight:600;color:var(--ink-soft);align-self:center}
.gc-facts dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.gc-link{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-top:10px;padding:0 12px;border-radius:12px;background:var(--leaf-tint);color:var(--leaf);font-weight:700;font-size:.8125rem;text-decoration:none;transition:background .2s}
.gc-link:hover{background:#D7ECDD}
.gcard :focus-visible{outline-color:var(--leaf)}
.ghint{position:absolute;left:50%;bottom:4%;z-index:5;transform:translateX(-50%);display:none;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 32px);padding:7px 14px 7px 10px;border-radius:999px;background:rgba(2,12,38,.55);border:1px solid var(--hair);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.8125rem;font-weight:600;color:var(--foam);text-align:center;pointer-events:none;transition:opacity .5s, transform .5s}
.globe-ready .ghint{display:flex}
.ghint svg{width:18px;height:18px;flex:none;color:var(--gold);animation:nudge 2.4s ease-in-out infinite}
.ghint.gone{opacity:0;transform:translate(-50%,8px)}
@keyframes nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}}
.hero-art .ghint{bottom:-11%}

/* ---------- country lookup and launch information ---------- */
.country-explorer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(460px,52%));gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(28px,4vw,52px);margin:0 0 36px;border:1px solid var(--hair);border-radius:28px;background:radial-gradient(70% 60% at 0% 0%,rgba(39,99,179,.3),transparent 70%),rgba(13,47,120,.26);box-shadow:inset 0 1px 0 rgba(238,243,255,.06);scroll-margin-top:calc(var(--header-height) + 24px)}
.country-controls{display:grid;gap:14px;min-width:0;max-width:30rem}
.country-controls h3{font-size:clamp(1.625rem,1.2rem + 1.2vw,2.25rem);line-height:1.08;letter-spacing:-.03em}
.country-controls p,.country-controls small{color:var(--mist);font-size:.9375rem}
.country-controls small{font-size:.8125rem}
.country-controls .explorer-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.country-controls label{font-size:.8125rem;font-weight:600;letter-spacing:.01em;color:var(--foam)}
.country-controls form{display:grid;gap:8px;margin-top:6px}
.country-controls form label:not(:first-child){margin-top:8px}
.country-controls input,.country-controls select{width:100%;min-height:50px;border:1px solid rgba(163,183,222,.45);border-radius:14px;padding:12px 14px;color:var(--foam);background-color:rgba(2,12,38,.55);font:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s,background-color .2s}
.country-controls input:hover,.country-controls select:hover{border-color:rgba(163,183,222,.7)}
.country-controls input:focus,.country-controls select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,199,68,.22);background-color:rgba(2,12,38,.75)}
.country-controls input::placeholder{color:var(--mist);opacity:1}
.country-controls input{-webkit-appearance:none;appearance:none;padding-left:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3B7DE' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px 50%;background-size:18px}
.country-controls select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEF3FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.country-controls input::-webkit-search-decoration{-webkit-appearance:none}
.country-controls select option{background:var(--deep);color:var(--foam)}
.country-controls select:disabled{opacity:.6;cursor:default}
.explore-submit{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:fit-content;min-height:48px;margin-top:10px;padding:12px 22px 12px 18px;border:0;border-radius:999px;background:var(--gold);color:var(--abyss);font:700 .9375rem var(--body);cursor:pointer;box-shadow:0 8px 24px -10px rgba(246,199,68,.65);transition:transform .2s,background .2s,box-shadow .2s}
.explore-submit svg{width:18px;height:18px;flex:none}
.explore-submit:hover:not(:disabled){background:#FFD45C;transform:translateY(-1px);box-shadow:0 12px 28px -10px rgba(246,199,68,.8)}
.explore-submit:disabled{opacity:.5;cursor:default;box-shadow:none}
.quick-picks{display:grid;gap:10px;margin-top:6px;padding-top:18px;border-top:1px solid var(--hair)}
.quick-picks > span{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.quick-picks > div{display:flex;flex-wrap:wrap;gap:8px}
.quick-picks button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 8px;border:1px solid var(--hair);border-radius:999px;background:rgba(238,243,255,.05);color:var(--foam);font:600 .875rem var(--body);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.quick-picks button img{width:22px;height:16px;flex:none;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.quick-picks button:hover{background:rgba(238,243,255,.1);border-color:rgba(238,243,255,.3)}
.quick-picks button[aria-pressed="true"]{border-color:var(--gold);background:rgba(246,199,68,.12);color:var(--gold)}
.country-result{width:100%;min-width:0;max-width:460px;justify-self:end;padding:22px;border:1px solid rgba(255,255,255,.7);border-radius:22px;background:var(--paper);color:var(--ink);color-scheme:light;box-shadow:0 24px 64px -24px rgba(0,7,29,.65);scroll-margin-top:calc(var(--header-height) + 24px)}
.country-result h4{font:700 1.5rem/1.2 var(--display);margin:0;overflow-wrap:anywhere}
.country-result .country-sub{color:var(--ink-soft);font-size:.875rem;margin:4px 0 16px}

/* Country Guide: a three-chapter app preview grounded in the atlas artwork. */
.country-result-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.country-result-heading > div{min-width:0}
.country-result-heading .country-sub{margin-bottom:0}
.country-facts{margin-top:14px;border-top:1px solid var(--hair-ink)}
.country-facts summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 2px;cursor:pointer;color:var(--ink);font:600 .875rem/1.4 var(--body)}
.country-facts[open] summary{color:var(--leaf)}
.country-facts dl{display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);gap:8px 14px;margin:8px 0 2px;font-size:.875rem;line-height:1.5}
.country-facts dt{min-width:0;font-weight:600;color:var(--ink-soft);overflow-wrap:anywhere;hyphens:auto}
.country-facts dd{margin:0;overflow-wrap:anywhere}
.country-flag{position:relative;display:block;flex:none;width:48px;aspect-ratio:4/3;overflow:hidden;border:1px solid #DDE3EC;border-radius:6px;background-color:white;background-repeat:no-repeat}
.country-flag img,.discovery-flag img{display:block;width:100%;height:100%;object-fit:contain;background:white}
/* Transforms and opacity keep chapter changes quiet and fluid. */
.discovery-scene{position:relative;isolation:isolate;container-type:inline-size;width:100%;aspect-ratio:1;min-height:350px;overflow:hidden;border:1px solid #344767;border-radius:15px;background:radial-gradient(ellipse at 90% 10%,#2B4161,transparent 70%),#08192C;color:var(--foam)}
.discovery-scene::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,rgba(5,16,40,.05),rgba(2,12,38,.7));pointer-events:none}
.discovery-glow{position:absolute;width:100%;height:100%;inset:0;background:radial-gradient(ellipse at 40% 65%,rgba(57,130,151,.3),transparent 65%)}
.discovery-planet{position:absolute;width:110%;max-width:none;left:-47%;top:14%;opacity:.35;filter:saturate(.75);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity 1.2s}
[data-guide-stage="read"] .discovery-planet{transform:translate(12%,3%) rotate(-10deg);opacity:.2}
[data-guide-stage="watch"] .discovery-planet{transform:translate(18%,-5%) rotate(-18deg);opacity:.13}
.discovery-scene-label{position:absolute;z-index:4;top:6%;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#D0DBE6;font:600 .6875rem/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase}
.discovery-scene-label span:last-child{color:#F6D78A;letter-spacing:.12em}
.guide-pane{position:absolute;z-index:2;inset:14% 6% 12%;display:flex;align-items:center;justify-content:center;opacity:0;transform:translate3d(0,18px,0) scale(.95) rotate(2deg);transition:opacity .6s ease,transform .75s cubic-bezier(.2,.75,.2,1);pointer-events:none}
.guide-pane.is-active{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0)}
.guide-flag-card,.guide-reading-card{width:88%;padding:4cqw;border:1px solid #FFFFFA;border-radius:3cqw;background:linear-gradient(145deg,#FFFFFA,#EDF1EB);color:var(--ink);box-shadow:0 3cqw 9cqw rgba(0,6,23,.35)}
.guide-flag-card{width:76%;padding:3cqw;transform:rotate(-3deg);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.guide-pane.is-active .guide-flag-card{transform:rotate(-2deg)}
.guide-card-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3cqw;color:#526874;font:700 .6875rem/1.2 var(--body);letter-spacing:.09em;text-transform:uppercase}
.guide-card-eyebrow img{width:4.2cqw;height:4.2cqw;min-width:14px;min-height:14px;opacity:.55}
.discovery-flag-mount{position:relative;perspective:600px;border:1px solid #D4DED9;border-radius:1.5cqw;padding:1.3cqw;background:#E5EAE4}
.discovery-flag{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:.7cqw;background-color:white;background-repeat:no-repeat;transform-origin:8% 50%;box-shadow:0 .7cqw 1.5cqw rgba(18,43,55,.12);animation:discovery-flag-sway 6s ease-in-out infinite}
.discovery-flag::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 16%,rgba(255,255,255,.3) 42%,rgba(12,30,46,.045) 60%,transparent 80%);background-size:200% 100%;animation:discovery-silk 6s ease-in-out infinite;pointer-events:none}
.guide-country{display:block;margin-top:3cqw;font:700 clamp(1rem,5.6cqw,1.5rem)/1.12 var(--display);overflow-wrap:anywhere}
.guide-region{display:block;margin-top:1cqw;color:var(--ink-soft);font:.75rem/1.3 var(--body)}
.guide-reading-card{width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:4.5cqw;transform:rotate(1deg);pointer-events:none}
.guide-pane.is-active .guide-reading-card{pointer-events:auto}
.guide-story-title{display:block;font:700 clamp(1.125rem,6.6cqw,1.75rem)/1.08 var(--display);letter-spacing:-.035em;margin-bottom:3cqw}
.guide-reading-card p{color:#41536A;font:400 clamp(.8125rem,3.45cqw,.9375rem)/1.55 var(--body);overflow-wrap:anywhere}
.guide-reading-fact{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #D6DED7;padding-top:3cqw;margin-top:3cqw;font:.75rem/1.3 var(--body)}
.guide-reading-fact span{color:var(--ink-soft)}
.guide-reading-fact b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.guide-reading-footnote{margin-top:3cqw;color:#607568;font:italic .6875rem/1.35 var(--body)}
.guide-video-card{position:relative;isolation:isolate;width:100%;height:100%;min-height:240px;overflow:hidden;border:1px solid #61738B;border-radius:3cqw;background:#0B2447;box-shadow:0 3cqw 9cqw rgba(0,6,23,.35)}
.guide-video-art{position:absolute;z-index:-2;max-width:none;width:115%;height:115%;left:2%;top:-9%;object-fit:cover;animation:guide-film-drift 8s ease-in-out infinite alternate}
.guide-video-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(2,12,38,.3),rgba(2,12,38,.05) 35%,rgba(2,12,38,.92) 90%)}
.guide-video-tag{position:absolute;left:5%;top:6%;padding:6px 9px;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:rgba(2,12,38,.65);font:600 .6875rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase}
.guide-play{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);display:grid;place-items:center;width:17cqw;height:17cqw;min-width:50px;min-height:50px;border:1px solid #FFE8A4;border-radius:50%;background:#F6D16D;box-shadow:0 0 0 2cqw rgba(246,199,68,.1);animation:guide-play-pulse 3s ease-in-out infinite;transition:transform .2s ease,background .2s}
.guide-play img{width:7cqw;height:7cqw;min-width:24px;min-height:24px;margin-left:3px}
.guide-pane.is-active .guide-play{pointer-events:auto;cursor:pointer}
.guide-play:hover{transform:translate(-50%,-50%) scale(1.08);background:#FFD45C}
.country-result .guide-play:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:50%}
.guide-video-title{position:absolute;left:5%;right:5%;bottom:21%;display:grid;gap:6px}
.guide-video-title span{color:#D3DEEF;font:.75rem/1.2 var(--body)}
.guide-video-title b{font:700 clamp(1.125rem,6cqw,1.625rem)/1.12 var(--display);overflow-wrap:anywhere}
.guide-video-footer{position:absolute;left:5%;right:5%;bottom:7%;display:flex;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,.2);padding-top:10px;font:.6875rem/1.2 var(--body);color:#D8E3F3}
.guide-video-footer img{filter:invert(1)}
.guide-scene-caption{position:absolute;z-index:4;left:6%;right:6%;bottom:4.5%;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#B7C9D9;font:.6875rem/1.3 var(--body)}
.guide-scene-caption span:last-child{flex:none;color:#F6D78A;font-variant-numeric:tabular-nums}
.guide-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px}
.guide-step{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 7px;min-width:0;min-height:44px;padding:10px 8px;border:1px solid #E0E5EB;border-radius:10px;background:#F7F8FA;color:#627187;font:600 .8125rem/1.2 var(--body);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.guide-step img{flex:none;width:16px;height:16px;opacity:.6}
.guide-step span{min-width:0;max-width:100%;overflow-wrap:anywhere}
.guide-step[aria-pressed="true"]{border-color:#EBD69C;background:#FFF5DB;color:#3E3524}
.guide-step[aria-pressed="true"] img{opacity:1}
.guide-step:hover{border-color:#B6C0CC;color:var(--ink)}
.guide-step::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:#D2A332;transform:scaleX(var(--guide-progress,0));transform-origin:left}
.guide-preview-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-height:34px;margin-top:5px;color:var(--ink-soft);font:.75rem/1.3 var(--body)}
.guide-preview-footer > p{flex:1 1 8rem;min-width:0;overflow-wrap:anywhere}
.guide-motion{display:flex;flex:none;align-items:center;gap:5px;max-width:100%;min-width:0;min-height:44px;margin-inline-start:auto;padding:8px 4px;border:0;border-radius:6px;background:transparent;color:#465872;font:600 .75rem/1.2 var(--body);cursor:pointer}
.guide-motion img{flex:none;width:14px;height:14px;opacity:.65}
.guide-motion span{min-width:0;overflow-wrap:anywhere}
.guide-motion:disabled{cursor:default;color:var(--ink-soft)}
.country-result .country-facts{margin-top:0}
@keyframes discovery-flag-sway{0%,100%{transform:rotateY(-3deg) rotateZ(-.3deg)}50%{transform:rotateY(3deg) rotateZ(.3deg)}}
@keyframes discovery-silk{0%,100%{background-position:85% 50%;opacity:.5}50%{background-position:15% 50%;opacity:.85}}
@keyframes guide-film-drift{from{transform:scale(1) rotate(-5deg)}to{transform:scale(1.12) rotate(3deg)}}
@keyframes guide-play-pulse{0%,100%{box-shadow:0 0 0 2cqw rgba(246,199,68,.1)}50%{box-shadow:0 0 0 4cqw rgba(246,199,68,.03)}}
.discovery-scene *,.discovery-scene *::after{animation-play-state:paused}
.discovery-scene.is-playing .is-active *,.discovery-scene.is-playing .is-active *::after{animation-play-state:running}
.motion-paused .discovery-scene *,.motion-paused .discovery-scene *::after{animation:none!important}
@media (prefers-reduced-motion:reduce){.discovery-scene *,.discovery-scene *::after{animation:none!important;transition:none!important}}
@media (max-width:380px){.discovery-scene{min-height:380px}.guide-flag-card{width:88%}.guide-reading-card{padding:14px}.guide-card-eyebrow{letter-spacing:.04em}.guide-step{flex-direction:column;padding-inline:4px}}
/* The decorative tagline cannot fit a narrow phone at a readable size; keep the step counter and drop the tagline rather than shrink it. */
@container (max-width:340px){.guide-scene-caption{justify-content:flex-end}.guide-scene-caption span:first-child{display:none}}
.sample-label{color:var(--ink-soft);font-size:.8125rem;padding:0 18px 14px}
.estimate{color:var(--ink-soft);font-size:.75rem;font-weight:400}
.faq{padding-block:clamp(64px,8vw,112px);background:#041440}
.faq .wrap{max-width:960px}
.faq-intro{margin-bottom:28px;display:grid;gap:14px}
.faq h2{font-size:var(--t-h2)}
.faq-intro p{color:var(--mist);max-width:28rem}
.faq-intro a{color:var(--foam);text-underline-offset:4px}
/* Wide screens: the heading holds the left column while the questions take the right, instead of one narrow centred strip. */
@media (min-width:1000px){
  .faq .wrap{max-width:var(--max);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);column-gap:clamp(48px,6vw,96px);align-items:start}
  .faq-intro{grid-column:1;grid-row:1 / span 20;position:sticky;top:calc(var(--header-height) + 32px);margin-bottom:0}
  .faq h2{font-size:clamp(2.25rem,1.2rem + 1.7vw,3rem);line-height:1.02}
  .faq details{grid-column:2}
}
.faq details{border-top:1px solid var(--hair);padding-block:4px}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;cursor:pointer;padding:14px 4px;font:700 1.125rem/1.4 var(--display);transition:color .2s}
.faq summary:hover,.faq details[open] summary{color:var(--gold)}
/* Disclosure rows: a drawn plus/minus at the end replaces the browser triangle, which sat awkwardly in front of long, wrapping questions. */
.faq summary,.country-facts summary{list-style:none}
.faq summary::-webkit-details-marker,.country-facts summary::-webkit-details-marker{display:none}
.faq summary::after,.country-facts summary::after{content:"";flex:none;width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%;background:linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat;transition:background-size .2s}
.faq summary::after{color:var(--gold)}
.faq details[open] summary::after,.country-facts[open] summary::after{background-size:11px 1.5px,1.5px 0}
.country-facts summary::after{width:24px;height:24px;background-size:9px 1.5px,1.5px 9px}
.country-facts[open] summary::after{background-size:9px 1.5px,1.5px 0}
.faq details p{padding:0 4px 20px;color:var(--mist);max-width:48rem}
.faq details a{color:var(--foam);text-underline-offset:4px}
.language-toggle{min-height:44px;width:fit-content;border:1px solid var(--hair);background:transparent;border-radius:999px;color:var(--foam);padding:10px 18px;font:600 .9375rem var(--body);cursor:pointer}
.language-toggle:hover{background:rgba(238,243,255,.08)}
.langs.languages-expanded .marquee{animation:none;flex-wrap:wrap;justify-content:center;width:auto;padding-inline:var(--gutter)}
.langs.languages-expanded .marquee [aria-hidden="true"]{display:none}
.langs.languages-expanded .tag{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.no-script{padding:16px;border:1px solid var(--hair);border-radius:12px;color:var(--mist);font-size:.9375rem}
.card{color-scheme:light}
.card :focus-visible,.country-result :focus-visible{outline-color:var(--leaf)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .keys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-links{display:none}
}
@media (min-width:1081px){.nav-menu{display:none}}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:20px 8px;row-gap:22px}
  /* Phones: bring the globe up to sit right under the download buttons, so the first screen is not a wall of text. The facts and motion control follow it. */
  .hero-copy{display:contents}
  .hero-copy > *{position:relative;z-index:3}
  .hero-art,.hero .globe-details{order:1}
  .hero .scalebar{order:2}
  .hero .motion-toggle{order:3}
  .hero-art{position:relative;right:auto;top:auto;transform:none;width:auto;margin:-2vw calc(-1 * var(--gutter)) 0;overflow:clip;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%)}
  /* The glow travels with the globe (its position depends on the copy above it) and fades out before any edge. */
  .hero{background:var(--deep)}
  .hero-art{background:radial-gradient(closest-side,#164190,rgba(13,47,120,.55) 60%,rgba(6,25,74,0))}
  .hero-art img{width:150vw;max-width:none;margin-left:-25vw}
  .hero-copy{gap:22px}
  .turn-grid{grid-template-columns:1fr}
  .stage{display:none}
  .chapter{min-height:0;padding-block:24px 64px}
  .chapter .inline-globe{display:block;width:min(88vw,460px);justify-self:center;margin-bottom:-8px}
  .chapter .card{justify-self:center}

  .gl .hero-art{aspect-ratio:1/0.96;margin-top:-9vw}
  .gl .hero-art{-webkit-mask-image:none;mask-image:none}
  .gl .hero-art .globe-cv{inset:-8% 0 -8% 0;width:100%;height:116%;-webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 18%,#000 80%,transparent 94%);mask-image:linear-gradient(180deg,transparent 4%,#000 18%,#000 80%,transparent 94%)}
  .gl .stage{display:grid;position:relative;top:auto;height:auto;max-height:none;gap:18px;padding:12px 0 32px;margin:0}
  .gl .stage.globe-unavailable{display:none}
  .gl .stage .ghint{display:none}
  .hero-art .ghint{bottom:1%}
  .gl .stage .globe-box{width:min(100%,460px)}
  .gl .stage-caption .maplabel{font-size:1.2rem}
  .globe-details{display:block;width:min(100%,440px);justify-self:center}
  .hero .globe-details{margin-bottom:28px}
  .globe-details .gcard{position:relative;inset:auto!important;width:100%;max-height:none;overflow:visible;opacity:1!important;visibility:visible;transform:none!important;transition:none;scroll-margin:calc(var(--header-height) + 12px) 0 16px}
  .gline{display:none}
  .gl .chapter{padding-block:28px 72px}
  .gcard{width:244px;padding:12px 12px 10px;font-size:.8125rem}
  .gc-top .gflag{width:44px}
  .gc-name{font-size:1.0625rem}
  .ai .wrap,.get .wrap{grid-template-columns:1fr}
  .qrs{display:none}
  .country-explorer{grid-template-columns:minmax(0,1fr);padding:28px;gap:28px}
  .country-controls{max-width:460px;width:100%;justify-self:center}
  .country-result{justify-self:center}
}
@media (max-width:700px){
  /* One readable column: brand, link groups, support, credits, then the copyright line last. */
  footer .wrap{display:grid;justify-content:stretch;gap:12px}
  footer nav{gap:16px 20px}
  footer .discovery-links{gap:0 20px}
  footer .support{order:1}
  footer .credits{order:2}
  footer .wrap > span{order:3}
}
@media (max-width:560px){
  /* Two rows of two on phones; tablets keep the single scale bar. */
  .scalebar{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));justify-content:stretch;row-gap:18px}
  .scalebar div:nth-child(2)::before{border-right:1.5px solid var(--foam)}
  .keys{grid-template-columns:1fr}
  /* "country by country." is ~8.75em wide: size the headline to the column so each line stays whole instead of breaking into three or four ragged lines on small phones. */
  .hero h1{font-size:max(1.75rem,min(2.5rem,calc((100vw - 2 * var(--gutter)) / 8.95)))}
  .free{font-size:.875rem}
  .brand span{font-size:.9375rem}
  .brand .amp{display:none}
  .nav-cta{padding:9px 12px;min-height:44px}
  .nav-menu summary{padding-inline:10px;gap:5px}
  /* Side by side like the official badges when both fit (most phones); each takes the full row below ~350px. */
  .store{flex:1 1 9.5rem;min-width:0;justify-content:center;gap:8px;padding:10px 12px}
  .store svg{width:24px;height:24px}
  .store b{font-size:clamp(1rem,4.6vw,1.125rem);white-space:nowrap}
  .log{height:clamp(240px,42svh,320px)}
  .nav .wrap{gap:8px;flex-wrap:wrap}
.nav .brand{flex:1;gap:8px}
  .nav .brand span{font-size:.8125rem}
  .nav .brand img{width:32px;height:32px}
  .country-explorer{padding:20px 16px;border-radius:22px;margin-inline:calc(-1 * min(var(--gutter),8px))}
  .explore-submit{width:100%}
  .country-result{padding:18px}
  .tag{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .legend{padding:28px 20px}
  .tally{font-size:clamp(.75rem,3.3vw,.875rem)}
  .tally button{padding-inline:clamp(8px,2.4vw,16px)}
  .legend::before{display:none}
}
/* Narrow phones (incl. 360px Android): the name can't fit beside Menu and Get the app, and "Smart …" reads worse than the icon alone. The link keeps its accessible name. */
@media (max-width:374px){.nav .brand > span{display:none}}
html.motion-paused{scroll-behavior:auto}
.motion-paused *, .motion-paused *::before, .motion-paused *::after{transition-duration:0s!important}
.motion-paused .hero-art img,.motion-paused .marquee,.motion-paused .hero-copy > *,.motion-paused .ghint svg,.motion-paused .msg,.motion-paused .typing i{animation:none}
.motion-paused .marquee{flex-wrap:wrap;justify-content:center;width:auto;padding-inline:var(--gutter)}
.motion-paused .marquee [aria-hidden="true"]{display:none}
.motion-paused .tag{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.motion-paused .log{scroll-behavior:auto}
.motion-paused .globe-box img{transition:none;transform:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-art img,.marquee{animation:none}
  .marquee{flex-wrap:wrap;width:auto;padding-inline:var(--gutter)}
  .marquee [aria-hidden="true"]{display:none}
  .globe-box img{transition:opacity .3s;transform:none!important}
  .msg{animation:none}
  .hero-copy > *,.ghint svg{animation:none}
  .tag{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .log{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important}
}

/* ======================= LANGUAGE VERSIONS =======================
   The language menu shares the header's pill-and-panel vocabulary with Menu: a globe, the current language's own
   name (its short code once space runs out), and a panel of every language version of the same page. Each entry
   is set in its own script and direction; the line under it names the language in the visitor's current one. */
.nav-links{margin-inline:auto}
.lang-menu{position:static;flex:none}
.lang-menu summary{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;min-height:44px;padding:9px 14px 9px 11px;border:1px solid var(--hair);border-radius:999px;font-weight:600;font-size:.875rem;color:var(--foam);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s;opacity:.8}
.lang-menu summary:hover{background:rgba(238,243,255,.08);border-color:rgba(238,243,255,.3)}
.lang-menu[open] summary{background:var(--foam);border-color:var(--foam);color:var(--abyss)}
.lang-menu[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.lang-globe{width:18px;height:18px;flex:none}
.lang-short{display:none;font-weight:700;letter-spacing:.04em}
.lang-menu[open]::before{content:"";position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;background:rgba(2,12,38,.6)}
.lang-panel{display:none;position:absolute;z-index:1;right:max(var(--gutter),env(safe-area-inset-right,0px));top:calc(100% + 8px);width:min(620px,calc(100vw - 32px));max-height:calc(100svh - 100% - 24px);overflow-y:auto;overscroll-behavior:contain;padding:20px 18px 16px;border:1px solid var(--hair);border-radius:20px;background:var(--abyss);box-shadow:0 24px 60px rgba(0,0,0,.5);color:var(--foam)}
.lang-menu[open] .lang-panel{display:block;animation:lang-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes lang-in{from{opacity:0;transform:translateY(-6px)}}
.lang-title{margin:0 4px 12px;font:400 1.375rem/1.2 var(--label);font-style:italic;letter-spacing:.02em;color:var(--mist)}
.lang-filter{display:block;width:100%;min-height:44px;margin:0 0 12px;padding:10px 16px 10px 42px;border:1px solid var(--hair);border-radius:999px;background:rgba(238,243,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3B7DE' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center/17px;color:var(--foam);font:500 .9375rem var(--body)}
.lang-filter::placeholder{color:var(--mist);opacity:.85}
.lang-filter:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.lang-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:4px;margin:0;padding:0;list-style:none}
.lang-list a{position:relative;display:grid;align-content:center;gap:1px;min-height:54px;padding:8px 34px 8px 14px;border:1px solid transparent;border-radius:12px;text-decoration:none;transition:background .15s,border-color .15s}
.lang-list a:hover,.lang-list a:focus-visible{background:var(--ocean)}
.lang-list a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.lang-list b{font:700 1rem/1.25 var(--display);letter-spacing:-.005em;overflow-wrap:anywhere}
.lang-list b[dir="rtl"]{text-align:start}
.lang-list span{font-size:.75rem;line-height:1.35;color:var(--mist)}
.lang-list a[aria-current="true"]{border-color:rgba(246,199,68,.55);background:rgba(246,199,68,.08)}
.lang-list a[aria-current="true"]::after{content:"";position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.lang-empty{margin:10px 4px 4px;color:var(--mist);font-size:.875rem}
/* Footer: every language version, quietly. */
.lang-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;flex-basis:100%;width:100%;padding-top:12px;border-top:1px solid var(--hair);font-size:.8125rem}
.lang-links svg{width:16px;height:16px;flex:none;color:var(--mist);margin-inline-end:2px}
footer nav.lang-links a{min-height:36px;color:var(--mist);text-decoration:none}
footer nav.lang-links a:hover{color:var(--foam)}
footer nav.lang-links a[aria-current="true"]{color:var(--gold)}
/* Homepage language section: the app's languages above, and a way into this website's own. */
.langs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.language-site{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px 10px 14px;border:1px solid rgba(246,199,68,.45);border-radius:999px;color:var(--gold);font:600 .9375rem var(--body);text-decoration:none;transition:background .2s,border-color .2s}
.language-site:hover{background:rgba(246,199,68,.1);border-color:var(--gold)}
.language-site svg{width:18px;height:18px;flex:none}
.motion-paused .lang-menu[open] .lang-panel{transition:none;animation:none}

/* Compact header: the inline links give way to Menu, and the language pill shows its short code. header.js also
   switches here whenever translated links would not fit beside the language pill and "Get the app". */
@media (max-width:1080px){.lang-menu{margin-inline-start:auto}.nav-menu{margin-left:0}.lang-now{display:none}.lang-short{display:inline}}
html.nav-compact .nav-links{display:none}
html.nav-compact .nav-menu{display:block;margin-left:0}
html.nav-compact .lang-menu{margin-inline-start:auto}
html.nav-compact .lang-now{display:none}
html.nav-compact .lang-short{display:inline}
@media (max-width:560px){
  .lang-menu summary{padding-inline:10px;gap:6px}
  .lang-menu summary::after{display:none}
  .lang-panel{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));width:auto;padding:16px 12px 12px;border-radius:18px}
  .lang-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lang-list a{min-height:52px;padding-inline:12px 30px}
}
@media (max-width:374px){.lang-short{display:none}.lang-menu summary{padding-inline:11px}}
@media (prefers-reduced-motion:reduce){.lang-menu[open] .lang-panel{animation:none}}

/* ---------- typography per script ----------
   Fonts: Google's Noto families load only on the language versions that need them (tools/i18n/languages.json);
   CJK uses each platform's own fonts. Scripts without case or italics drop tracking, capitals and slanted labels;
   tall scripts get room between lines. */
:root:lang(ar){--display:"Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;--body:"Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;--label:"Noto Sans Arabic","Segoe UI",system-ui,sans-serif}
:root:lang(hi){--display:"Bricolage Grotesque","Bricolage Grotesque Fallback","Bricolage Grotesque Fallback Roboto","Noto Sans Devanagari","Nirmala UI",system-ui,sans-serif;--body:"Figtree","Figtree Fallback","Figtree Fallback Roboto","Noto Sans Devanagari","Nirmala UI",system-ui,sans-serif;--label:"Noto Sans Devanagari","Nirmala UI",system-ui,sans-serif}
:root:lang(bn){--display:"Bricolage Grotesque","Bricolage Grotesque Fallback","Bricolage Grotesque Fallback Roboto","Noto Sans Bengali","Nirmala UI",system-ui,sans-serif;--body:"Figtree","Figtree Fallback","Figtree Fallback Roboto","Noto Sans Bengali","Nirmala UI",system-ui,sans-serif;--label:"Noto Sans Bengali","Nirmala UI",system-ui,sans-serif}
:root:lang(my){--display:"Bricolage Grotesque","Bricolage Grotesque Fallback","Bricolage Grotesque Fallback Roboto","Noto Sans Myanmar","Myanmar Text",system-ui,sans-serif;--body:"Figtree","Figtree Fallback","Figtree Fallback Roboto","Noto Sans Myanmar","Myanmar Text",system-ui,sans-serif;--label:"Noto Sans Myanmar","Myanmar Text",system-ui,sans-serif}
:root:lang(th){--display:"Bricolage Grotesque","Bricolage Grotesque Fallback","Bricolage Grotesque Fallback Roboto","Noto Sans Thai","Leelawadee UI",system-ui,sans-serif;--body:"Figtree","Figtree Fallback","Figtree Fallback Roboto","Noto Sans Thai","Leelawadee UI",system-ui,sans-serif;--label:"Noto Sans Thai","Leelawadee UI",system-ui,sans-serif}
:root:lang(el),:root:lang(ru),:root:lang(uk){--display:"Bricolage Grotesque","Bricolage Grotesque Fallback","Bricolage Grotesque Fallback Roboto","Noto Sans","Segoe UI",system-ui,sans-serif;--body:"Figtree","Figtree Fallback","Figtree Fallback Roboto","Noto Sans","Segoe UI",system-ui,sans-serif}
:root:lang(vi){--body:"Noto Sans","Segoe UI",system-ui,-apple-system,sans-serif}
:root:lang(ja){--display:"Bricolage Grotesque","Bricolage Grotesque Fallback","Bricolage Grotesque Fallback Roboto","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",system-ui,sans-serif;--body:"Figtree","Figtree Fallback","Figtree Fallback Roboto","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",system-ui,sans-serif;--label:"Hiragino Sans","Yu Gothic UI","Meiryo","Noto Sans JP",sans-serif}
:root:lang(ko){--display:"Bricolage Grotesque","Bricolage Grotesque Fallback","Bricolage Grotesque Fallback Roboto","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;--body:"Figtree","Figtree Fallback","Figtree Fallback Roboto","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;--label:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
:root:lang(zh-Hans){--display:"Bricolage Grotesque","Bricolage Grotesque Fallback","Bricolage Grotesque Fallback Roboto","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;--body:"Figtree","Figtree Fallback","Figtree Fallback Roboto","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;--label:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
:root:lang(zh-Hant){--display:"Bricolage Grotesque","Bricolage Grotesque Fallback","Bricolage Grotesque Fallback Roboto","PingFang TC","Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;--body:"Figtree","Figtree Fallback","Figtree Fallback Roboto","PingFang TC","Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;--label:"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif}
:root:is(:lang(ar),:lang(hi),:lang(bn),:lang(my),:lang(th),:lang(ja),:lang(ko),:lang(zh)) *{letter-spacing:0!important}
:root:is(:lang(ar),:lang(hi),:lang(bn),:lang(my),:lang(th),:lang(ja),:lang(ko),:lang(zh)) :is(.maplabel,.tag span,.lang-title,.globe-caption,.country-guide-art>span,.numbered-grid article>span,.day-label){font-style:normal}
:root:lang(el) *{text-transform:none!important}
:root:is(:lang(hi),:lang(bn),:lang(my),:lang(th)) body{line-height:1.75}
:root:is(:lang(hi),:lang(bn),:lang(my),:lang(th)) :is(h1,h2,h3,h4,.hero h1,.lang-list b,.store b,.brand){line-height:1.4}
:root:is(:lang(ar),:lang(ja),:lang(ko),:lang(zh)) :is(h1,h2,h3,h4){line-height:1.25}
:root:lang(ar) .hero h1{line-height:1.2}
:root:is(:lang(ja),:lang(zh)){line-break:strict}
:root:lang(ko) :is(h1,h2,h3,h4,p,li,summary,dd){word-break:keep-all}
:root:is(:lang(de),:lang(nl),:lang(sv),:lang(pl),:lang(cs),:lang(fil),:lang(ms),:lang(id)) :is(h1,h2,h3){-webkit-hyphens:auto;hyphens:auto}

/* ---------- right-to-left (Arabic) ----------
   Layout mirrors with the document; these rules flip what CSS positions physically. The globe artwork itself
   is a picture of the Earth and is never mirrored; site.js places the hero globe on the free (left) side. */
[dir="rtl"] .hero{background:linear-gradient(180deg,rgba(6,25,74,0) 70%,var(--deep)),radial-gradient(60% 75% at 28% 48%, #164190 0%, var(--ocean) 38%, var(--deep) 78%);background-color:var(--deep);background-repeat:no-repeat}
[dir="rtl"] .hero-art{right:auto;left:calc(-1 * clamp(24px,4vw,90px))}
@media (min-width:901px){[dir="rtl"] .hero-art img.fallback{margin-left:0;margin-right:auto}}
@media (max-width:900px){[dir="rtl"] .hero-art img{margin-left:0;margin-right:-25vw}}
[dir="rtl"] .scalebar div{padding:12px 0 0 22px}
[dir="rtl"] .scalebar div::before{border-right:1.5px solid var(--foam);border-left:none}
[dir="rtl"] .scalebar div:last-child::before{border-left:1.5px solid var(--foam)}
@media (max-width:560px){[dir="rtl"] .scalebar div:nth-child(2)::before{border-left:1.5px solid var(--foam)}}
[dir="rtl"] .nav-links a::after,[dir="rtl"] .qz-segs b,[dir="rtl"] .guide-step::after{transform-origin:right}
[dir="rtl"] .nav-menu{margin-left:0;margin-right:auto}
[dir="rtl"] .nav-menu nav,[dir="rtl"] .lang-panel{right:auto;left:max(var(--gutter),env(safe-area-inset-left,0px))}
@media (max-width:560px){[dir="rtl"] .lang-panel{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px))}}
[dir="rtl"] .lang-list a{padding:8px 14px 8px 34px}
[dir="rtl"] .lang-list a[aria-current="true"]::after{right:auto;left:12px}
[dir="rtl"] .motion-toggle{padding:8px 8px 8px 14px}
[dir="rtl"] .motion-toggle::after{left:auto;right:8px}
[dir="rtl"] .globe-box img{transform:translateX(-16%) scale(.9)}
[dir="rtl"] .globe-box img.past{transform:translateX(16%) scale(.9)}
[dir="rtl"] .globe-box img.on{transform:none}
/* The language previews scroll as one continuous ribbon; each tag keeps its own direction. */
[dir="rtl"] .marquee{direction:ltr}
[dir="rtl"] .icon-btn,[dir="rtl"] .reset,[dir="rtl"] .qz-top .quiz-progress,[dir="rtl"] .qz-auto,[dir="rtl"] .qz-recap b{margin-left:0;margin-right:auto}
[dir="rtl"] .facts-title{padding-left:0;padding-right:10px;border-left:0;border-right:3px solid var(--leaf)}
[dir="rtl"] .qz-row{padding:7px 8px 7px 14px;text-align:right}
[dir="rtl"] .qz-recap li{text-align:right}
@media (max-width:560px){[dir="rtl"] .qz-next{padding-left:0;padding-right:16px}}
[dir="rtl"] .msg.me{border-bottom-right-radius:18px;border-bottom-left-radius:6px}
[dir="rtl"] .msg.bot{border-bottom-left-radius:18px;border-bottom-right-radius:6px}
[dir="rtl"] .gc-top{padding-right:0;padding-left:40px}
[dir="rtl"] .gc-x{right:auto;left:8px}
[dir="rtl"] .country-controls input{padding-left:14px;padding-right:44px;background-position:right 14px center}
[dir="rtl"] .country-controls select{padding-right:14px;padding-left:44px;background-position:left 14px center}
[dir="rtl"] .lang-filter{padding:10px 42px 10px 16px;background-position:right 15px center}
[dir="rtl"] .guide-reading-fact b{text-align:left}
[dir="rtl"] .guide-video-tag{left:auto;right:5%}
[dir="rtl"] .store{padding:10px 16px 10px 20px}
[dir="rtl"] .guide-content ul,[dir="rtl"] .guide-content ol{padding-left:0;padding-right:1.4em}
/* Arrows that point "onward" point left in a right-to-left page. */
[dir="rtl"] :is(.c-btn,.qz-ring,.qz-next) svg{transform:scaleX(-1)}

/* ---------- long words ----------
   Some languages build long single words ("Центральноафриканская", "Großbritannien", "Kabiserang-bayan") that cannot
   wrap. Grid tracks must be allowed to shrink below them, and names in tight cells may break inside the word. */
.qz-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.qz-tile,.qz-row,.qz-face{min-width:0}
.qz-name,.qz-chip span,.qz-city,.qz-fname,.qz-freg,.qz-r-mode,.qz-recap b{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.directory-name,.directory-group li a,.directory-group li small,.flag-gallery figcaption,.capital-art-row span,.table-country,.lang-list b,.gc-name,.c-head h4,.legend h3,.keys h3{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.resource-article p,.resource-article li,.resource-article dd,.faq details p,.guide-content p{overflow-wrap:break-word}
/* Longer button labels (Следующий вопрос + Автопереход) wrap the quiz controls instead of widening the card. */
.quiz-actions{flex-wrap:wrap;row-gap:8px}
.qz-auto{min-width:0}