/* scripts General Sans doesn't cover fall back to the system's own font for them */
:root:lang(zh-Hans) { --font: "General Sans", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif; }
:root:lang(ja) { --font: "General Sans", "Yu Gothic UI", "Meiryo UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; }
:root:lang(ko) { --font: "General Sans", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; }
:root:lang(hi) { --font: "General Sans", "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", system-ui, sans-serif; }
:root {
  --bg: #050607;
  --panel: #111315;
  --tile: #181a1d;
  --tile-2: #222428;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --fg: #f6f6f6;
  --fg-2: #d4d6d9;
  --muted: #9a9ca0;
  --ink: #07101c;
  --g1: #8fdcff;
  --g2: #4fa6f5;
  --g3: #3561e8;
  --yellow: #f3e04a;
  --rare: #b48cff;
  --r: 24px;
  --font: "General Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-logo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--g1); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--g1); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--font); font-weight: 500; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(36px, 5vw, 56px); line-height: 1.02; letter-spacing: -.04em; }
h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0; }
p, li, figcaption { text-wrap: pretty; }
code { font: 500 .9em/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--tile-2); padding: 2px 7px; border-radius: 7px; color: var(--fg); overflow-wrap: anywhere; }
[hidden] { display: none !important; }

.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* ---------- pill buttons ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; text-decoration: none; font-weight: 600; white-space: nowrap; transition: transform .15s, background-color .15s, color .15s; }
/* download buttons: black, never a border, text and icon both in the brand colour */
.pill.dark { background: #000; color: var(--g1); border: 0; }
.pill.dark:hover { background: #10151c; color: var(--g1); transform: translateY(-1px); }
.pill.small { height: 40px; padding: 0 18px; font-size: 15.5px; }
.pill.big { height: 60px; padding: 0 30px 0 26px; font-size: 20px; letter-spacing: -.01em; }
.pill .os-ic { width: 20px; height: 20px; fill: currentColor; }

/* ---------- header (sits on the hero gradient) ---------- */
.top { --t: .5s cubic-bezier(.22, 1, .36, 1); position: fixed; inset: 0 0 auto; z-index: 10; pointer-events: none; }
/* on phones scrolling down slides the header away, scrolling up brings it back (site.js) */
.top { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.top.hide { transform: translateY(calc(-100% - 24px)); }
/* the header sits bare on the page at the top; once the page scrolls it becomes a dark floating
   glass pill, exactly as wide as the content below it */
.top-in { pointer-events: auto; height: 64px; margin-top: 14px; padding: 0 10px 0 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  border-radius: 999px; background: rgba(17, 19, 21, 0); border: 1px solid transparent; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0);
  transition: background-color var(--t), border-color var(--t), box-shadow var(--t); }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 25px/1 var(--font-logo); letter-spacing: .06em; text-transform: uppercase; justify-self: start;
  transition: color var(--t), padding var(--t); }
.logo:hover { color: var(--ink); }
.nav { display: flex; gap: 28px; }
.nav a { color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; transition: color var(--t); }
.nav a:hover { color: #000; text-decoration: underline; }
.top-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
/* language menu: a button that opens a small dark list */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink); font: 600 13px/1 var(--font); letter-spacing: .04em; transition: background-color var(--t), color var(--t); }
.lang-btn:hover { background: rgba(255, 255, 255, .6); }
.lang-btn svg { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* one column; with fourteen languages it scrolls if the window is short */
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; display: grid; gap: 2px; min-width: 230px; max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; list-style: none;
  background: rgba(17, 19, 21, .92); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.lang-menu li { display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 8px 12px; border-radius: 10px; color: var(--fg-2); font-size: 15px; font-weight: 500; cursor: pointer; outline: none; }
.lang-menu li:hover, .lang-menu li:focus-visible { background: var(--tile-2); color: #fff; }
.lang-menu li .fl { width: 21px; height: 14px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.lang-menu li .tick { margin-left: auto; flex: none; width: 12px; height: 10px; fill: none; stroke: var(--g1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.lang-menu li[aria-selected="true"] { color: #fff; }
.lang-menu li[aria-selected="true"] .tick { visibility: visible; }
.top .pill.dark { transition: transform .15s, background-color var(--t), color var(--t); }

/* scrolled: the same pill turns dark */
.top.scrolled .top-in { -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); background: rgba(17, 19, 21, .72); border-color: var(--line-2); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); }
.top.scrolled .logo, .top.scrolled .logo:hover { color: var(--fg); }
.top.scrolled .nav a { color: var(--fg-2); }
.top.scrolled .nav a:hover, .top.scrolled .nav a[aria-current] { color: #fff; }
.top.scrolled .lang-btn { background: rgba(255, 255, 255, .08); color: var(--fg); }
.top.scrolled .lang-btn:hover { background: rgba(255, 255, 255, .14); }
/* scrolled, the download button turns light so it stands out on the dark pill */
.top.scrolled .pill.dark { background: #fff; color: var(--ink); }
.top.scrolled .pill.dark:hover { background: var(--g1); color: var(--ink); }
@media (max-width: 860px) { .nav { display: none; } .top-in { grid-template-columns: 1fr auto; } }
/* on phones the pill is lower and the buttons sit the same 6px from its top, bottom and right edge;
   no backdrop blur there (it costs a lot while scrolling), a more solid fill instead */
@media (max-width: 600px) {
  .top-in { height: 56px; margin-top: 10px; padding: 0 6px 0 20px; gap: 8px; }
  .top-right { gap: 4px; }
  /* bigger tap targets: the language and menu buttons fill the pill's height bar 6px, and reach a little
     further than they show */
  .top-right .lang-btn, .top-right .menu-btn, .menu-sheet .menu-x { position: relative; height: 44px; }
  .lang-btn { padding: 0 16px 0 18px; }
  .top-right .menu-btn, .menu-sheet .menu-x { width: 44px; }
  .lang-btn::after, .menu-btn::after, .menu-x::after { content: ""; position: absolute; inset: -6px -2px; }
  .top.scrolled .top-in { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(17, 19, 21, .94); }
}
@media (max-width: 420px) { .top-right > .pill { display: none; } }
/* phones: a menu button in the header opens a full-screen menu (built in site.js) */
.menu { display: none; }
.menu-btn, .menu-x { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink); transition: background-color var(--t, .2s), color var(--t, .2s); }
.menu-btn:hover { background: rgba(255, 255, 255, .6); }
.menu-btn svg { width: 18px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.top.scrolled .menu-btn { background: rgba(255, 255, 255, .08); color: var(--fg); }
.top.scrolled .menu-btn:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 860px) { .menu { display: block; } }
/* the menu: the page blurred and darkened behind it, a soft cyan and lilac glow at the top, big links,
   the download button and two stickers */
.menu-sheet { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; overflow: hidden auto; overscroll-behavior: contain;
  background: radial-gradient(70% 36% at 12% 0%, rgba(143, 224, 255, .2), rgba(143, 224, 255, 0) 70%), radial-gradient(70% 36% at 92% 8%, rgba(201, 160, 255, .22), rgba(201, 160, 255, 0) 70%), rgba(5, 6, 7, .84);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.menu-sheet.open { opacity: 1; visibility: visible; transition: opacity .25s; }
html.menu-open { overflow: hidden; }
.menu-sheet .top-in { flex: none; border-color: transparent; }
.menu-sheet .logo, .menu-sheet .logo:hover { color: var(--fg); }
.menu-x { justify-self: end; background: rgba(255, 255, 255, .08); color: var(--fg); }
.menu-x:hover { background: rgba(255, 255, 255, .16); }
.menu-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sheet-nav { display: grid; margin-top: 12px; }
/* each link is a whole row wide, so the full row is the tap target */
.sheet-nav a { display: block; padding: 12px 25px; color: var(--fg); text-decoration: none; font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.sheet-nav a:hover, .sheet-nav a:focus-visible { color: var(--g1); }
/* the download button and its version label sit at the bottom of the menu */
.sheet-end { margin-top: auto; padding-top: 28px; padding-bottom: 40px; display: grid; justify-items: start; }
/* link text and button start where the logo does (the header's side padding plus its 1px border) */
.sheet-end { padding-inline: 25px; }
@media (max-width: 600px) { .sheet-end { padding-inline: 21px; } .sheet-nav a { padding-inline: 21px; } }
.pill.dark.sheet-dl { height: 40px; padding: 0 22px; font-size: 16px; background: var(--g1); color: var(--ink); }
.pill.dark.sheet-dl:hover { background: #fff; color: var(--ink); }
/* two stickers stuck in the corner, above the version label */
.menu-sheet .stk { position: absolute; z-index: -1; pointer-events: none; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); }
.sheet-s1 { width: 96px; right: 26px; bottom: 150px; rotate: 12deg; }
.sheet-s2 { width: 64px; right: 116px; bottom: 112px; rotate: -14deg; }
/* the links come in one after another */
@media (prefers-reduced-motion: no-preference) {
  .sheet-nav a, .sheet-end { opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .45s cubic-bezier(.22, 1, .36, 1); }
  .menu-sheet.open .sheet-nav a, .menu-sheet.open .sheet-end { opacity: 1; transform: none; }
  .menu-sheet.open .sheet-nav a { transition-delay: calc(.05s + var(--i) * .05s); }
  .menu-sheet.open .sheet-end { transition-delay: .22s; }
}

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; padding-top: clamp(150px, 18vw, 200px); }
/* the gradient ends with the hero, so it never covers the section below; no-repeat, or at a fractional
   height the top of the gradient shows again as a thin light line at the bottom edge */
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background:
  radial-gradient(60% 46% at 50% 20%, #d4f1ff 0%, rgba(212, 241, 255, 0) 70%),
  radial-gradient(70% 50% at 8% 0%, var(--g2) 0%, rgba(79, 166, 245, 0) 70%),
  radial-gradient(70% 50% at 92% 0%, var(--g3) 0%, rgba(53, 97, 232, 0) 70%),
  linear-gradient(180deg, var(--g1) 0%, #7ccbfb 46%, #5aa0f2 62%, #22408f 76%, #0b1430 87%, var(--bg) 97%); background-repeat: no-repeat; }
/* animated ASCII field over the gradient; faded out behind the copy and towards the dark bottom */
.hero-ascii { position: absolute; z-index: -1; inset: 0 0 auto; width: 100%; height: 820px; pointer-events: none;
  -webkit-mask-image: radial-gradient(40% 36% at 50% 30%, transparent 25%, #000 90%), linear-gradient(180deg, transparent 40px, #000 150px, #000 55%, transparent 100%);
  mask-image: radial-gradient(40% 36% at 50% 30%, transparent 25%, #000 90%), linear-gradient(180deg, transparent 40px, #000 150px, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.hero { --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; }
.hero { padding-bottom: 0; }
.hero-copy { display: grid; justify-items: center; text-align: center; }
.hero-copy .cta-row { justify-content: center; }

@media (max-width: 900px) { .hero-in { grid-template-columns: 1fr; } }
h1 { color: var(--ink); font-size: clamp(42px, 6.4vw, 80px); line-height: .98; letter-spacing: -.045em; max-width: 17ch; }
.lead { text-wrap: balance; margin-top: 24px; color: #0c1a2c; font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; max-width: 31em; }
.cta-row { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.outro .cta-row, .outro-in { justify-content: center; }
/* version and size under the big download button: a little label stuck on, like the one in the install step */
.dl-ver { display: inline-block; margin-top: 18px; padding: 6px 12px; border-radius: 6px; background: #fff; rotate: -2deg; font: 500 12.5px/1.2 var(--mono); color: #3a4150; box-shadow: 0 6px 14px -8px rgba(7, 16, 28, .4); }
.dl-ver .js-ver { font-weight: 600; color: var(--ink); }


/* ---------- photos: cut-outs of the app with a white border, held by tape (the hero gallery) ---------- */
.photo { position: relative; padding: clamp(6px, .8vw, 10px); border-radius: clamp(14px, 1.8vw, 22px); background: #f6f6f6; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .95); }
.photo::before { content: ""; position: absolute; z-index: 2; top: -12px; left: 50%; width: 84px; height: 24px; margin-left: -42px; background: rgba(255, 255, 255, .5); rotate: -3deg; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
/* a cut-out of a screenshot: site.js sets --ratio, --pad, --size and --pos from data-crop */
.cut { position: relative; aspect-ratio: var(--ratio, 1.6); padding: var(--pad, 0); overflow: hidden;
  background: var(--img) var(--pos, 0 0) / var(--size, 100%) auto no-repeat content-box, #101113; }
.cut.fade-bottom::after { content: ""; position: absolute; inset: auto 0 0; height: 36%; background: linear-gradient(rgba(16, 17, 19, 0), #101113 92%); }

/* ---------- install ---------- */
/* ---------- the lower sections: left-aligned heads,
   dashed slots instead of filled cards, the launch screen taped in as a photo ---------- */
.install { padding: clamp(96px, 12vw, 160px) 0 0; }
.inst { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
/* the title stays in view while the steps scroll past */
.inst-copy { position: sticky; top: 120px; }
.kicker { font-size: 17px; font-weight: 500; color: var(--fg-2); margin-bottom: 8px; }
.inst-copy h2 { max-width: 12ch; }
.inst-sub { margin-top: 16px; color: var(--muted); font-size: 19px; }
/* small print under the title: requirements, the SmartScreen warning, uninstalling */
.inst-info { margin: 36px 0 0; display: grid; gap: 18px; max-width: 30em; font-size: 14.5px; }
.inst-info dt { color: var(--fg); font-weight: 600; margin-bottom: 4px; }
.inst-info dd { margin: 0; color: var(--muted); }
.inst-info b { color: var(--fg-2); font-weight: 600; }
.ticks-sm { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ticks-sm li { display: flex; gap: 8px; align-items: baseline; }
.ticks-sm svg { width: 12px; height: 10px; flex: none; fill: none; stroke: var(--g1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.note { margin-top: 14px; color: var(--muted); font-size: 14px; }
.note b { color: var(--fg); font-weight: 600; }
.inst-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 8vw, 104px); }
.iscene { position: relative; display: grid; place-items: center; height: 230px; border-radius: 22px; background: #121417; border: 1px solid var(--line); overflow: hidden; }
.ilabel { margin-top: 20px; display: flex; align-items: center; gap: 8px; color: var(--g1); font-size: 14.5px; font-weight: 600; }
/* step number: a plain brand dot */
.ilabel > span:first-child { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--g1); color: var(--ink); font: 600 12px/1 var(--mono); }
.pill.istep-cta { gap: 9px; padding-left: 16px; }
.istep-cta .os-ic { width: 15px; height: 15px; }
.itext { margin-top: 8px; color: var(--fg-2); font-size: 18px; line-height: 1.5; max-width: 32em; }
/* on the dark page a black button would vanish, so this one is filled with the brand colour */
.istep-cta { margin-top: 18px; }
.pill.dark.istep-cta { background: var(--g1); color: var(--ink); }
.pill.dark.istep-cta:hover { background: #fff; color: var(--ink); }

/* 1 · download: the app icon as a sticker, the file name on a little tag under it */
.sc-dl { align-content: center; gap: 18px; }
.dl-stk { width: 96px; height: 96px; padding: 7px; border-radius: 28px; background: #fff; rotate: -7deg; box-shadow: 0 14px 24px -10px rgba(7, 16, 28, .45); }
.dl-tag { padding: 6px 12px; border-radius: 6px; background: #fff; rotate: 2deg; font: 500 12.5px/1.2 var(--mono); color: #3a4150; box-shadow: 0 6px 14px -8px rgba(7, 16, 28, .4); }
.dl-tag b { font-weight: 600; color: var(--ink); }
/* the real launch screen, framed like the photos elsewhere */
.sc-run .cut { height: 72%; width: auto; aspect-ratio: 1.6; border-radius: 12px; background-position: 50% 50%; background-size: cover; outline: 7px solid #f6f6f6; box-shadow: 0 24px 44px -20px rgba(7, 16, 28, .6); }

@media (prefers-reduced-motion: no-preference) {
  .dl-stk { opacity: 0; transform: scale(1.4) rotate(14deg); transition: opacity .25s, transform .55s cubic-bezier(.34, 1.56, .64, 1); }
  .dl-tag { opacity: 0; transform: translateY(8px); transition: opacity .3s .5s, transform .45s cubic-bezier(.34, 1.56, .64, 1) .5s; }
  .in .dl-stk, .in .dl-tag { opacity: 1; transform: none; }
  .sc-run .cut { transform: scale(.82); opacity: .4; transition: transform 1.6s cubic-bezier(.22, 1, .36, 1), opacity .8s; }
  .in .sc-run .cut { transform: none; opacity: 1; }
}
@media (max-width: 900px) { .inst { grid-template-columns: 1fr; } .inst-copy { position: static; } }

.bento { padding: clamp(96px, 12vw, 160px) 0 0; }
.install + .bento { padding-top: 16px; }
.bento-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.bento.two .bento-in { grid-template-columns: 1fr 1fr; }
.tile { margin: 0; padding: 22px 24px 24px; }
.tile-stk { width: 48px; height: 48px; margin: -4px 0 14px -4px; rotate: -6deg; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.tile h3 { font-size: 20px; margin-bottom: 8px; }
.tile p { color: var(--muted); }
/* bento: tiles of different sizes, each naming one thing Trophist does; where the app has something to
   show, a real cut-out of it sits in the tile like a panel and runs off the edge */
.bento-grid { list-style: none; padding: 0; margin-block: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(290px, 26vw, 350px); gap: 16px; }
/* every tile: the picture fills the space above, the title and one line of text sit at the bottom */
.bt { --text-h: 104px; position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; }
.span-3 { grid-column: span 3; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; }
.bt-text { position: relative; z-index: 2; display: grid; gap: 6px; }
.bt h3 { font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -.02em; line-height: 1.15; }
.bt-text p { font-size: 15px; line-height: 1.4; color: var(--muted); max-width: 30em; }
.bt.blue .bt-text p, .bt.sky .bt-text p, .bt.purple .bt-text p, .bt.light .bt-text p, .bt.glow .bt-text p { color: rgba(7, 16, 28, .68); }
.bt.dark { background: #16181b; }
.bt.blue { background: linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3)); color: var(--ink); }
.bt.sky { background: var(--g1); color: var(--ink); }
.bt.purple { background: linear-gradient(160deg, #c9b8ff, var(--rare)); color: var(--ink); }
.bt.light { background: #eef2f5; color: var(--ink); }
/* the picture area: the cut-out is centred in it at the largest size that fits, never cropped by the tile */
.bt-shot { position: absolute; z-index: 1; inset: 24px 24px var(--text-h); display: grid; place-items: center; container-type: size; }
.bt-shot .cut { width: min(100cqw, 100cqh * var(--ratio, 1.6)); border-radius: 12px; outline: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .75); }
.bt.light .bt-shot .cut, .bt.sky .bt-shot .cut, .bt.blue .bt-shot .cut, .bt.purple .bt-shot .cut { box-shadow: 0 24px 44px -22px rgba(7, 16, 28, .55); }
/* tiles without a screenshot: one big sticker, tilted, top right */
.bt-big { position: absolute; top: 24px; right: 24px; width: 40%; max-width: 120px; rotate: 10deg; filter: drop-shadow(0 14px 16px rgba(7, 16, 28, .3)); transition: rotate .4s cubic-bezier(.34, 1.56, .64, 1); }
.bt:hover .bt-big { rotate: -4deg; }
/* the advantages bento: a wide and two small tiles on the left, one big tile on the right */
.adv-sec { padding-top: 16px; }
.bento-grid.adv { grid-template-areas: "port port port port port port safe safe safe safe safe safe" "free free free open open open safe safe safe safe safe safe"; }
.adv-port { grid-area: port; } .adv-free { grid-area: free; } .adv-open { grid-area: open; } .adv-safe { grid-area: safe; }
/* the launch screen sits on the right half, the text on the left */
.adv-port .bt-shot { inset: 24px 24px 24px 50%; }
.adv-port .bt-text { max-width: 46%; }
.bt.glow { background: radial-gradient(70% 60% at 50% 45%, #dfe6ff 0%, rgba(223, 230, 255, 0) 70%), linear-gradient(150deg, var(--g1), #9fb6ff 50%, var(--rare)); color: var(--ink); }
.adv-stack { position: absolute; inset: 24px 24px var(--text-h); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; container-type: inline-size; }
.adv-bar { width: 100cqw; border-radius: 999px; outline: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 20px 40px -18px rgba(7, 16, 28, .6); }
.adv-card { width: 60cqw; align-self: flex-end; border-radius: 18px; outline: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 50px -20px rgba(7, 16, 28, .7); }
.adv-sec .bt-big { max-width: 110px; }
@media (max-width: 1000px) {
  .bento-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .span-7, .span-6, .span-5 { grid-column: span 6; } .span-3 { grid-column: span 3; }
}
@media (max-width: 560px) { .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } .bt { grid-column: 1 !important; min-height: 300px; } .bt:has(.bt-big) { min-height: 200px; } .bt-big { width: 84px; } }
@media (max-width: 1000px) { .bento-grid.adv { grid-template-areas: "port port port port port port" "free free free open open open" "safe safe safe safe safe safe"; } }
@media (max-width: 560px) { .bento-grid.adv { grid-template-areas: "port" "free" "open" "safe"; } .adv-safe { min-height: 340px; } .adv-port .bt-shot { inset: 24px 24px var(--text-h); } .adv-port .bt-text { max-width: none; } }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--fg-2); font-size: 15.5px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border: solid var(--g1); border-width: 0 0 2px 2px; transform: translateY(-3px) rotate(-45deg) scale(.8); }
@media (max-width: 900px) { .bento-in, .bento.two .bento-in { grid-template-columns: 1fr; } }

.faq { padding: clamp(96px, 12vw, 160px) 0 0; }
.faq-in { max-width: 860px; }
.faq-head .sub { margin-top: 16px; }
.faq-head .sub a { color: var(--fg); }
.qa { margin-top: clamp(40px, 5vw, 64px); }
.qa-item { border-bottom: 1px solid var(--line-2); }
.qa-item:last-child { border-bottom: 0; }
.qa-item summary { display: flex; align-items: center; gap: 14px; padding: 28px 0; cursor: pointer; list-style: none; font-size: clamp(19px, 1.7vw, 22px); font-weight: 500; letter-spacing: -.015em; }
.qa-item:first-child summary { padding-top: 0; }
.qa-item summary::-webkit-details-marker { display: none; }
.qa-q { flex: 1; }
.qa-item summary:hover .qa-q { color: #fff; }
.qa-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s, stroke .3s; }
.qa-item[open] .qa-ic { transform: rotate(180deg); stroke: var(--fg); }
.qa-item p { margin: 0; padding: 0 40px 32px 0; color: var(--muted); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; }
/* the risk question: a small yellow flag; its answer in full contrast */
.qa-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--yellow); color: #1c1a05; font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.qa-item.warn p { color: var(--fg-2); }
@media (prefers-reduced-motion: no-preference) {
  .qa-item p { transition: opacity .3s, transform .38s cubic-bezier(.22, 1, .36, 1); }
  .qa-item:not([open]) p, .qa-item.closing p { opacity: 0; transform: translateY(-6px); }
  @starting-style { .qa-item[open] p { opacity: 0; transform: translateY(-6px); } }
}
@media (max-width: 600px) { .qa-item p { padding-right: 0; } }

/* ---------- outro ---------- */
.outro { position: relative; isolation: isolate; margin-top: clamp(56px, 7vw, 96px); padding: clamp(96px, 10vw, 140px) 0 clamp(48px, 5vw, 72px); }
.outro::before { content: ""; position: absolute; z-index: -1; inset: 0; background:
  radial-gradient(55% 60% at 50% 70%, #d4f1ff 0%, rgba(212, 241, 255, 0) 70%),
  linear-gradient(0deg, var(--g1) 0%, #6dbdf8 30%, #3e7fe8 55%, #10204a 75%, var(--bg) 100%); background-repeat: no-repeat; }
.outro-in { text-align: center; display: grid; justify-items: center; margin-block: clamp(40px, 5vw, 80px); }
.outro h2 { color: var(--ink); font-size: clamp(40px, 6.4vw, 80px); max-width: 13ch; }
.outro .pill.big { margin-top: 36px; }
.sticker-big { width: 120px; height: auto; rotate: -8deg; margin-bottom: 20px; filter: drop-shadow(0 14px 16px rgba(7, 16, 28, .35)); }

/* ---------- footer: light sheet under the dark page, mono link columns ---------- */
.foot { --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --seam-to: #f3f5f6;
  position: relative; color: var(--ink); padding: 0 0 32px; background: linear-gradient(transparent var(--seam-h), var(--seam-to) var(--seam-h)); }
/* torn ASCII edge into the footer (drawn in site.js). The canvas is transparent above the edge and
   pulled up over the end of the page, so whatever is there (dark page, outro gradient) runs into it */
:root { --seam-h: 126px; }
main { padding-bottom: var(--seam-h); }
.outro { margin-bottom: calc(-1 * var(--seam-h)); padding-bottom: calc(clamp(48px, 5vw, 72px) + var(--seam-h)); }
.foot-seam { position: relative; display: block; width: 100%; height: var(--seam-h); margin-top: calc(-1 * var(--seam-h)); }
.foot-top { padding-top: clamp(40px, 5vw, 64px); }
.foot a { color: inherit; text-decoration: none; }
.foot-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px 16px; padding-bottom: clamp(24px, 3vw, 40px); }
.foot-brand { display: grid; justify-items: start; gap: 10px; align-content: start; }
.foot .logo { font-size: clamp(32px, 3.6vw, 44px); letter-spacing: .03em; }
.foot-brand p { max-width: 22em; color: #4a5560; font-size: 16px; }
/* translations: a flag per language, all alike (no marking of the current one) */
.foot-langs { display: flex; flex-wrap: wrap; gap: 10px 12px; max-width: 300px; margin-top: 8px; }
.foot-langs .flag { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: 4px; transition: transform .2s; }
.foot-langs .flag svg { width: 30px; height: 20px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(7, 16, 28, .12), 0 3px 6px -3px rgba(7, 16, 28, .4); }
.foot-langs .flag:hover { transform: translateY(-2px); }
.foot-langs .flag:focus-visible { outline: 2px solid var(--g2, #3561e8); outline-offset: 3px; }
.foot-nav { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 16px; font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .02em; }
.foot-nav > div > p { color: #6b7680; text-transform: none; letter-spacing: 0; margin-bottom: 16px; }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid rgba(7, 16, 28, .15); padding-top: 18px;
  font: 500 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .02em; color: #6b7680; }
/* the legal line is a sentence, so it stays in normal case to be readable; only the short © label is in caps */
.foot-bottom p:last-child { text-transform: none; letter-spacing: 0; }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr; } .foot-nav { grid-column: 1; } }
@media (max-width: 520px) { .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: the flags fill the width in two even rows of seven */
@media (max-width: 520px) {
  .foot-langs { justify-self: stretch; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; max-width: 380px; }
  .foot-langs .flag svg { width: 100%; height: auto; aspect-ratio: 3 / 2; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* footer links: just an underline on hover */
.foot-nav a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.foot-nav a:hover, .foot-nav a:focus-visible { text-decoration: underline; }


/* ---------- sub pages (help, feedback, feature) ---------- */
.page-hero { position: relative; isolation: isolate; padding: clamp(120px, 13vw, 150px) 0 clamp(28px, 3vw, 44px); text-align: center; }
/* the gradient runs on past the hero into the page, so it fades out softly instead of ending in a hard band */
.page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -240px; background:
  radial-gradient(60% 46% at 50% 14%, #d4f1ff 0%, rgba(212, 241, 255, 0) 70%),
  linear-gradient(180deg, var(--g1) 0%, #7ccbfb 32%, #5aa0f2 50%, #2f5bc4 64%, #16285e 78%, #0b1430 89%, var(--bg) 100%); background-repeat: no-repeat; }
.page-hero h1 { margin-inline: auto; font-size: clamp(40px, 6vw, 72px); }
.page-hero .lead { margin-inline: auto; }
.page-hero .sticker-big { width: 80px; margin: 0 auto 12px; }
/* 404: an empty slot in the album where the page should be, its sticker fallen off beside it */
.page-hero.nf { min-height: min(78svh, 720px); display: grid; align-content: center; padding-bottom: clamp(56px, 8vw, 96px); }
.nf-art { position: relative; width: 132px; margin: 0 auto 28px; }
.nf-slot { display: grid; place-items: center; aspect-ratio: 1; border-radius: 30px; outline: 3px dashed rgba(35, 36, 74, .3); outline-offset: -3px; background: rgba(255, 255, 255, .28);
  rotate: -5deg; font: 500 30px/1 var(--mono); letter-spacing: .02em; color: rgba(35, 36, 74, .6); }
.nf-stk { position: absolute; width: 58px; right: -40px; bottom: -14px; rotate: 24deg; filter: drop-shadow(0 10px 12px rgba(40, 36, 90, .3)); }
.nf-home { margin-top: 32px; justify-self: center; }

.page { position: relative; padding: clamp(16px, 2vw, 32px) 0 clamp(96px, 12vw, 140px); }
.help-in { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
/* the contents sit on their own dark panel, so they read the same over the gradient and over the dark page */
.toc { position: sticky; top: 96px; display: grid; gap: 2px; padding: 10px; border-radius: var(--r); background: var(--tile); }
.toc a { color: var(--fg-2); text-decoration: none; padding: 9px 14px; border-radius: 12px; font-size: 15.5px; font-weight: 500; }
.toc a { position: relative; transition: color .2s, background-color .2s; }
.toc a:hover { color: #fff; background: var(--tile-2); }
/* the section in view: lit, with a brand bar on the left */
.toc a[aria-current] { color: #fff; background: var(--tile-2); }
.toc a[aria-current]::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--g1); }
.prose { display: grid; gap: 16px; }
.prose section { background: var(--tile); border-radius: var(--r); padding: clamp(24px, 3vw, 32px); scroll-margin-top: 24px; }
.prose h2 { font-size: clamp(26px, 3vw, 32px); letter-spacing: -.03em; margin-bottom: 14px; }
.prose h3 { margin: 20px 0 6px; }
.prose p, .prose li { color: var(--fg-2); }
.prose p + p, .prose ul + p, .prose ol + p { margin-top: 10px; }
.prose ul, .prose ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.prose b { color: var(--fg); font-weight: 600; }
/* legal pages: tables, and the operator details still to fill in */
.prose .table { margin-top: 12px; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line-2); color: var(--fg-2); }
.prose th { color: var(--fg); font-weight: 600; }
.prose a { color: var(--g1); }
.legal .toc a { font-size: 14.5px; }
mark.todo { background: rgba(243, 224, 74, .2); color: var(--yellow); border-radius: 4px; padding: 0 3px; }
.prose .warn { background: var(--yellow); }
.prose .warn h2, .prose .warn p, .prose .warn b { color: #1c1a05; }
/* narrow screens: one column and no table of contents (the sections simply follow each other) */
@media (max-width: 860px) { .help-in { grid-template-columns: 1fr; } .toc { display: none; } }

/* ---------- news ---------- */
.news-list { max-width: 980px; display: grid; gap: 20px; }
.news-card { position: relative; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: center;
  background: var(--tile); border-radius: var(--r); padding: 14px; transition: background-color .2s, transform .2s; }
.news-card:hover { background: var(--tile-2); transform: translateY(-2px); }
.news-thumb { display: block; border-radius: calc(var(--r) - 8px); overflow: hidden; aspect-ratio: 16 / 10; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-body { padding: 8px 12px 8px 0; display: grid; gap: 10px; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 500; }
.news-tag { padding: 4px 10px; border-radius: 999px; background: rgba(143, 220, 255, .12); color: var(--g1); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.news-card h2 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.03em; line-height: 1.1; }
.news-card h2 a { color: var(--fg); text-decoration: none; }
/* the whole card is clickable through the title link */
.news-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.news-excerpt { color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 700px) { .news-card { grid-template-columns: 1fr; } .news-body { padding: 4px 8px 10px; } }

.post-hero .news-meta { justify-content: center; color: #1d3349; margin-bottom: 18px; }
.post-hero .news-tag { background: rgba(7, 16, 28, .1); color: var(--ink); }
.post-hero h1 { max-width: 20ch; }
.post-in { max-width: 860px; display: grid; gap: 28px; }
.post .prose { max-width: none; }
.post .shot { margin: 0; border-radius: var(--r); overflow: hidden; outline: 1px solid rgba(255, 255, 255, .1); outline-offset: -1px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.post .shot img { display: block; width: 100%; height: auto; }
.post-back { justify-self: start; color: var(--muted); text-decoration: none; font-weight: 500; }
.post-back:hover { color: var(--fg); }

/* feedback: one tile per kind of message, each opening an email with the subject (and questions) filled in */
.ct-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ct-grid > li { display: flex; }
.ct { flex: 1; padding: 28px 30px 30px; justify-content: flex-start; color: inherit; text-decoration: none; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.ct:hover { transform: translateY(-4px); }
.ct:focus-visible { outline: 2px solid var(--g1); outline-offset: 3px; }
/* the sticker leads the column like an icon, so every heading starts at the same height and the link stays at the bottom */
.ct .bt-big { position: static; align-self: flex-start; width: 76px; max-width: none; margin: 0 0 22px -6px; rotate: -8deg; }
.ct:hover .bt-big { rotate: 6deg; }
.ct .bt-text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ct h2 { font-size: clamp(21px, 2vw, 26px); letter-spacing: -.02em; line-height: 1.15; }
.ct .bt-text p { font-size: 16px; max-width: none; }
.ct-go { margin-top: auto; padding-top: 22px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.ct-arr { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--ink); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .25s cubic-bezier(.22, 1, .36, 1); }
.ct:hover .ct-arr { translate: 4px 0; }
.mail-strip { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; background: var(--tile); border-radius: 24px; padding: 24px 28px; }
.mail-stk { width: 72px; height: auto; rotate: -8deg; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .35)); transition: rotate .4s cubic-bezier(.34, 1.56, .64, 1); }
.mail-strip:hover .mail-stk { rotate: 4deg; }
.mail-who { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.mail-who p { margin: 0; color: var(--muted); font-size: 15px; }
.mail-addr { justify-self: start; color: var(--fg); font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
.mail-addr:hover { color: var(--g1); }
/* the same strip at the end of the help page, inside a section card */
.prose .mail-strip { background: var(--tile-2); padding: 18px 22px; }
.prose .mail-addr { color: var(--fg); font-size: clamp(22px, 2.4vw, 28px); }
.prose .mail-addr:hover { color: var(--g1); }
.prose .mail-stk { width: 56px; }
.pill.mail-copy { height: 44px; padding: 0 22px; font-size: 16px; border: 0; cursor: pointer; font-family: inherit; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
.pill.mail-copy:hover { background: var(--tile-2); }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } .bt.ct { min-height: 0; padding: 24px; } .ct .bt-big { width: 64px; margin-bottom: 18px; } }
@media (max-width: 520px) { .mail-strip .pill { flex: 1 1 100%; } .mail-stk { width: 56px; } }
.form-alt { text-align: center; color: var(--muted); font-size: 15px; margin-top: 20px; }
/* a short page: the closing call to action follows closely instead of after a screenful of black */
.page.page-short { padding-bottom: clamp(32px, 4vw, 48px); }
.page-short + .outro { margin-top: 0; }

/* ---------- stickers from the app's set, used across the site ---------- */
.stk { display: inline-block; height: auto; rotate: -8deg; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }

/* a sentence with stickers stuck into it */
.statement-sec { padding: clamp(96px, 12vw, 160px) 0 0; }
.statement { max-width: 21em; margin: 0 auto; text-align: center; text-wrap: balance; font-size: clamp(28px, 4vw, 50px); font-weight: 500; line-height: 1.4; letter-spacing: -.025em; }
.chip { display: inline-block; white-space: nowrap; padding: 0 .4em 0 .12em; border-radius: 999px; background: rgba(255, 255, 255, .08); line-height: 1.25; }
.chip .stk { width: 1.25em; margin-right: .18em; vertical-align: -.28em; }

/* hero: stickers in the headline and slapped on around it */
/* words in pills keep the headline's size. The pill is centred on the letters (cap height to baseline)
   with ~.17em above and below; the headline gets enough leading that pills on neighbouring lines keep a gap */
.hero h1 { line-height: 1.14; font-size: clamp(34px, 4.2vw, 48px); max-width: none; }
h1 .chip { position: relative; isolation: isolate; background: none; padding: 0 .32em 0 .1em; line-height: inherit; }
/* rotating words: the pill eases its width, the word and sticker slide out and back in */
h1 .chip[data-words] { white-space: nowrap; vertical-align: bottom; transition: width .5s cubic-bezier(.22, 1, .36, 1); }
h1 .chip .chip-w, h1 .chip .stk { display: inline-block; transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .26s; }
h1 .chip.swap-out .chip-w, h1 .chip.swap-out .stk { opacity: 0; transform: translateY(-.25em); }
h1 .chip.swap-in .chip-w, h1 .chip.swap-in .stk { opacity: 0; transform: translateY(.25em); transition: none; }
/* the same rounded pill as the sticker sentence lower down, with the sticker inside it */
h1 .chip::before { content: ""; position: absolute; z-index: -1; inset: .1em 0 .02em; border-radius: 999px; background: rgba(255, 255, 255, .42); }
/* the sticker is bigger than the pill and hangs out over its left and top edges, as if slapped on */
h1 .chip .stk { width: 1.2em; margin: -.12em .06em -.12em -.18em; vertical-align: -.2em; rotate: -10deg; filter: drop-shadow(0 .03em .05em rgba(40, 36, 90, .25)); }

/* footer: the name as a die-cut sticker (like the app's launch screen), with a few stickers stuck around it */
.foot-mark { position: relative; display: block; width: min(170px, 60%); margin: 6px 0 2px; rotate: -4deg; transition: rotate .4s cubic-bezier(.2, .8, .2, 1.4); }
.foot-mark:hover { rotate: -1deg; }
.foot-mark svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 16px rgba(7, 16, 28, .22)); }
.foot-mark text { font: 800 120px "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 4px; text-transform: uppercase; }
.foot-mark .rim { fill: #fff; stroke: #fff; stroke-width: 22px; stroke-linejoin: round; }
.foot-mark .ink { fill: url(#foot-word-g); }
.foot-mark .stk { position: absolute; filter: drop-shadow(0 8px 10px rgba(7, 16, 28, .25)); }
.fm-1 { width: 40px; right: -8%; top: -12px; rotate: 16deg; }
.fm-2 { width: 32px; left: -6%; bottom: -8px; rotate: -12deg; }
.fm-3 { width: 36px; right: 16%; bottom: -18px; rotate: 8deg; }
/* the home page ends with its own download button right above, so the footer doesn't repeat it there */


/* hero: achievement icons from many games burst out from behind the app and pile up along the bottom (site.js) */
.hero-burst { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
/* the hero fills the first screen with the copy in the middle and the achievements scattered around it */
.hero { min-height: max(720px, 100svh); }
.hero { display: grid; align-content: center; padding-bottom: clamp(80px, 10vw, 140px); }
/* shelf tile: game covers as tilted sticker cards (white rim, progress ring or Platinum label) sliding past in a loop.
   The covers come from one strip (assets/img/covers.jpg, 240x360 each); site.js builds the cards. The ?v= is the
   number of covers in it, so browsers holding a shorter strip fetch the new one. */
.shelf-run { position: absolute; z-index: 1; inset: 14px 0 calc(var(--text-h) - 6px); display: flex; align-items: center; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.shelf-track { display: flex; gap: 18px; padding-left: 18px; width: max-content; animation: shelf-slide var(--dur, 40s) linear infinite; }
.bt-shelf:hover .shelf-track { animation-play-state: paused; }
@keyframes shelf-slide { to { transform: translateX(-50%); } }
.cover { position: relative; flex: none; width: clamp(84px, 8vw, 106px); aspect-ratio: 2 / 3; padding: 5px; border-radius: 12px; background: #fff;
  rotate: var(--r, 0deg); box-shadow: 0 16px 26px -14px rgba(7, 16, 28, .6); transition: rotate .3s cubic-bezier(.34, 1.56, .64, 1), translate .3s; }
.cover:hover { rotate: 0deg; translate: 0 -6px; }
.cover i { display: block; width: 100%; height: 100%; border-radius: 8px; background: url("/assets/img/covers.jpg?v=13") var(--x) 0 / var(--n) 100% no-repeat; }
/* progress ring, bottom right */
.cover .ring { position: absolute; right: -8px; bottom: -8px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--g2) calc(var(--p) * 1%), #2a2d33 0) ; box-shadow: 0 0 0 3px #fff, 0 6px 12px -4px rgba(7, 16, 28, .5); }
.cover .ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #101113; }
.cover .ring b { position: relative; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: -.02em; }
/* finished games: the Platinum label stuck across the bottom */
.cover .plat { position: absolute; left: 50%; bottom: -9px; translate: -50% 0; rotate: -4deg; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(110deg, #a8e6ff, #c9b8ff 35%, #ffd6f0 60%, #fff3c4 80%, #b8ffe4); box-shadow: 0 0 0 2.5px #fff, 0 6px 12px -4px rgba(7, 16, 28, .5);
  color: #2a2550; font: 800 12px/1 var(--font-logo, "Barlow Condensed", sans-serif); letter-spacing: .04em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .shelf-track { animation: none; } }
/* ---------- bento scenes: small live pictures made of the app's pieces (achievement icons, covers,
   stickers) instead of screenshots; site.js builds and animates them ---------- */
.bt-vis { position: absolute; z-index: 1; inset: 24px 24px var(--text-h); display: grid; place-items: center; container-type: size; }
.adv-port .bt-vis { inset: 24px 24px 24px 48%; }
/* an achievement icon as a sticker: icon from the sprite sheet, white rim */
.ach { position: relative; display: block; width: var(--s, 56px); aspect-ratio: 1; padding: 3px; border-radius: 12px; background: #fff; rotate: var(--r, 0deg);
  box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .8); transition: rotate .4s cubic-bezier(.34, 1.56, .64, 1), opacity .3s, filter .3s; }
.ach i { display: block; width: 100%; height: 100%; border-radius: 9px; background: url("/assets/img/achievements.jpg") var(--x) var(--y) / 800% 800% no-repeat; }
.ach.rare { background: linear-gradient(135deg, #a8e6ff, #c9b8ff 50%, #ffd6f0); }
/* a locked slot: dashed outline, the icon greyed out and faint */
.ach.off { background: none; box-shadow: none; outline: 2px dashed rgba(255, 255, 255, .22); outline-offset: -2px; rotate: 0deg; }
.ach.off i { filter: grayscale(1); opacity: .25; }
.ach.pop { animation: ach-stick .5s cubic-bezier(.2, .8, .2, 1.3); }
@keyframes ach-stick { from { scale: 1.6; opacity: 0; } 60% { scale: .94; opacity: 1; } }

/* album: two rows of slots that fill up with stickers, one after another */
.vis-album .grid { display: grid; grid-template-columns: repeat(var(--cols, 6), auto); gap: clamp(10px, 2.4cqw, 18px); }
.vis-album .ach { --s: clamp(44px, 12cqw, 64px); }

/* calendar: a year of days; a wave of new unlocks runs across it */
/* the grid is as wide as 132px of height allows, but never wider than the tile (the height follows) */
.vis-cal .weeks { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; width: min(100%, var(--ratio, 4) * 132px); max-height: 100%; aspect-ratio: var(--ratio, 4); --ratio: var(--ratio-l, 4); }
.vis-cal .weeks b { border-radius: 3px; background: rgba(143, 220, 255, var(--a)); outline: 1px solid rgba(255, 255, 255, .04); }
.vis-cal .weeks b.lit { animation: lit 4.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes lit { 0%, 60%, 100% { background: rgba(143, 220, 255, var(--a)); } 20% { background: #e7f8ff; box-shadow: 0 0 0 1px #fff; } }
.vis-cal .legend { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.vis-cal .legend .ach { --s: 30px; --r: 8deg; }

/* several games: running covers fanned out, each with its own count of unsaved changes */
.vis-multi .fan { position: relative; width: 100%; height: 100%; }
.vis-multi .cover { position: absolute; left: 50%; top: 50%; width: clamp(64px, 30cqw, 92px); translate: calc(-50% + var(--dx)) -54%; }
.vis-multi .cover .count { position: absolute; right: -9px; top: -9px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: var(--yellow); color: #1c1a05; font-size: 13px; font-weight: 700; box-shadow: 0 0 0 2.5px #fff; transition: scale .25s; }
.vis-multi .cover .count.bump { scale: 1.3; }
/* three cards fanned: the middle one on top, the left one's counter on its left corner, so every counter shows */
.vis-multi .cover:nth-child(2) { z-index: 2; }
.vis-multi .cover:first-child .count { right: auto; left: -9px; }
.vis-multi .cover .live { position: absolute; left: 8px; bottom: 8px; width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 2px #fff; }

/* unlock, lock, save: Lock all / Invert / Unlock all get pressed and the whole row flips at once;
   the changes count up on the Commit pill, then get saved */
.vis-edit .stage { display: grid; justify-items: center; gap: clamp(18px, 5cqh, 30px); }
.vis-edit .row { display: flex; gap: clamp(10px, 2.5cqw, 18px); align-items: center; perspective: 600px; }
.vis-edit .ach { --s: clamp(46px, 11cqw, 66px); }
.vis-edit .ach.flip { animation: ach-flip .36s ease-in-out; }
@keyframes ach-flip { 50% { transform: rotateY(90deg) scale(.92); } }
.vis-edit .ach .dot { position: absolute; right: -4px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px #16181b; opacity: 0; transition: opacity .2s; }
.vis-edit .ach.dirty .dot { opacity: 1; }
.vis-edit .bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.vis-edit .tool, .vis-edit .commit { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background-color .3s, color .3s; }
.vis-edit .tool { background: rgba(255, 255, 255, .08); color: var(--fg-2); }
.vis-edit .tool.press { animation: tool-press .7s ease; }
@keyframes tool-press { 0%, 100% { background: rgba(255, 255, 255, .08); color: var(--fg-2); } 15%, 55% { background: rgba(255, 255, 255, .22); color: #fff; transform: scale(.94); } 30% { transform: none; } }
.vis-edit .commit { margin-left: 6px; padding-right: 6px; background: #fff; color: var(--ink); }
.vis-edit .commit.press { animation: pill-press .35s ease; }
@keyframes pill-press { 35% { transform: scale(.92); } }
.vis-edit .commit b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 12px; }
.vis-edit .commit.saved { background: #4ade80; }

/* launch: the name as a die-cut sticker, with sticker slots filling under it */
.vis-port .stage { display: grid; justify-items: center; gap: clamp(12px, 4cqh, 22px); }
.vis-port svg.word { width: min(100cqw, 300px); height: auto; overflow: visible; rotate: -4deg; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); }
.vis-port .word text { font: 800 120px "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 4px; text-transform: uppercase; }
.vis-port .word .rim { fill: #f6f6f6; stroke: #f6f6f6; stroke-width: 22px; stroke-linejoin: round; }
.vis-port .word .ink { fill: url(#port-word-g); }
.vis-port .slots { display: flex; gap: clamp(6px, 2cqw, 12px); }
.vis-port .slot { width: clamp(32px, 11cqw, 46px); aspect-ratio: 1; border-radius: 11px; border: 2px dashed rgba(255, 255, 255, .18); display: grid; place-items: center; }
.vis-port .slot img { width: 118%; max-width: none; opacity: 0; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .5)); }
.vis-port .slot img.on { opacity: 1; animation: ach-stick .5s cubic-bezier(.2, .8, .2, 1.3); }
@media (max-width: 560px) { .adv-port .bt-vis { inset: 24px 24px var(--text-h); } }
@media (prefers-reduced-motion: reduce) { .vis-cal .weeks b.lit { animation: none; } .ach.pop, .ach.flip, .vis-edit .tool.press, .vis-port .slot img.on { animation: none; } }
/* nothing changes until you commit: a card of pending changes, each sticker marked; Discard or Commit */
.vis-safe .card { width: min(100cqw, 380px); padding: 18px; border-radius: 20px; background: #0e0f12; box-shadow: 0 30px 50px -20px rgba(7, 16, 28, .7); display: grid; gap: 14px; }
.vis-safe .head { display: flex; justify-content: space-between; align-items: center; color: var(--fg); font-size: 14px; font-weight: 600; }
.vis-safe .head span { color: var(--muted); font-weight: 500; }
.vis-safe .row { display: flex; gap: 10px; }
.vis-safe .ach { --s: clamp(44px, 13cqw, 58px); }
.vis-safe .ach .dot { position: absolute; right: -4px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px #0e0f12; }
.vis-safe .btns { display: flex; gap: 8px; justify-content: flex-end; }
.vis-safe .btns > span { height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; background: rgba(255, 255, 255, .08); color: var(--fg); }
.vis-safe .btns .go { background: #fff; color: var(--ink); padding-right: 6px; }
.vis-safe .btns .go b { min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 12px; }
/* the album tile: the grid always fits inside its area */
.vis-album .grid { max-height: 100cqh; }
.vis-album .ach { --s: clamp(36px, min(11cqw, 40cqh), 64px); }
/* phones: six in a row came out tiny and packed together; two rows of four bigger ones instead */
@media (max-width: 560px) {
  .bt:has(.vis-album) { min-height: 330px; }
  .vis-album .grid { --cols: 4; gap: 14px 18px; }
  .vis-album .ach { --s: clamp(44px, min(17cqw, 40cqh), 60px); }
  .vis-album .ach:nth-child(n + 9) { display: none; }
  /* calendar: only the first 14 of the 26 weeks (7 days each) */
  .vis-cal .weeks { --ratio: var(--ratio-s, 2); }
  .vis-cal .weeks b:nth-child(n + 99) { display: none; }
}