/* Fonts are served from this site (public/fonts), not from Google: nothing is loaded from another site, visitors' addresses aren't shared
   with Google, and the Content-Security-Policy names no outside host. Sora (headlines), Montserrat (titles) and Manrope (body and UI),
   SIL Open Font License 1.1 (licences beside the files). Latin and Latin Extended only: other scripts use the system font. */
@font-face { font-family: "Sora"; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/fonts/sora-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/fonts/sora-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/montserrat-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/montserrat-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/fonts/manrope-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* The look of every page: a deep night ground, one hot pink for the brand, electric yellow for what you press, a little blue and
   purple for detail (60 / 18 / 12 / 6 / 4). The landing page, the app, the sign-in page and the legal pages all draw from this file;
   polish.css and brand.css finish it. The old pastel names stay as names, now deep tints of the brand colours, so every page that
   used them keeps its rhythm of coloured blocks without leaving the palette. */

:root {
  color-scheme: dark;
  --bg: #0B0B17; --surface: #15152B; --surface-2: #1D1D38; --surface-3: #26264A;
  --paper: var(--bg); --paper-2: var(--surface); --ink: #F5F3FF; --muted: #ABA7C9; --night: #07070F;
  --edge: rgba(190,160,255,.26); --edge-strong: rgba(214,196,255,.55); --on-accent: #0B0B17;
  --brand: #FF00B8; --accent: #FFFF00; --blue: #00B6FF; --violet: #A855F7;
  --fg-rgb: 244,242,255; --sh-rgb: 0 0 0; --sh-k: 1; /* light-on-dark tints and shadows, as numbers so a light theme can swap them */
  --t-blue: #8FE0FF; --t-pink: #FFD6F1; --t-yellow: #FFFFA8; --pink-text: #FF6AD5; --pic-bg: #12324A; --frame: #2C2C52; --on-night: #F5F3FF;
  --lilac: #1E1538; --lime: #0E1631; --peach: #2A1027; --mint: #0B2032; --sky: #171033; --rose: #331031;
  --purple: #A855F7; --purple-deep: #9333EA; --orange: #FF00B8; --yellow: #FFFF00; --pink: #FF4FCB;
  --black: #000; --cream: #1F1F10;
  --ig: linear-gradient(100deg, #D6009D 0%, #B61FC9 55%, #9333EA 100%); --brand-deep: #D6009D;
  --shadow: 0 0 0 1.5px var(--edge), 0 22px 44px -26px rgba(0,0,0,.9);
  --shadow-sm: 0 0 0 1.5px var(--edge), 0 10px 22px -14px rgba(0,0,0,.8);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --glide: cubic-bezier(.2, .8, .2, 1);
  --radius: var(--r-l);
  --display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --title: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--body); color: var(--ink); background: var(--paper); overflow-x: hidden; line-height: 1.45; -webkit-font-smoothing: antialiased; }
/* the glow behind everything: lilac up in the corner, a little orange and lime low down */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 60% at 88% 4%, rgba(201,139,255,.38), transparent 70%), radial-gradient(45% 55% at 0% 100%, rgba(255,138,91,.2), transparent 70%), radial-gradient(40% 40% at 55% 55%, rgba(217,236,169,.22), transparent 70%); }
body.is-landing::before { display: none; } /* the landing page paints its own */
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.03em; margin: 0; line-height: 1.02; }
button, input, select, textarea { font: inherit; color: inherit; }
button, .btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--edge); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: var(--lilac); }
.spk { fill: currentColor; }

/* ---------- the pill at the top of every page ---------- */
.topbar { position: sticky; top: 12px; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: min(1180px, calc(100% - 28px)); margin: 12px auto 0; padding: 8px 8px 8px 16px; border-radius: var(--r-pill); background: rgba(11,11,23,.74); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 30px -18px rgb(var(--sh-rgb) / calc(0.70 * var(--sh-k))); overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.04em; min-width: 0; }
.logo-mark { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 4px 6px rgb(var(--sh-rgb) / calc(0.35 * var(--sh-k)))); transition: transform .5s var(--spring); }
.brand:hover .logo-mark { transform: rotate(-10deg) scale(1.12); }
.top-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.top-link { color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: none; padding: 9px 14px; border-radius: var(--r-pill); transition: background .2s, transform .3s var(--spring); }
.top-link:hover { background: rgba(var(--fg-rgb),.07); transform: scale(1.05); }
.top-link.solid { background: var(--yellow); color: var(--on-accent); padding: 10px 20px; }
.top-link.solid:hover { background: var(--yellow); transform: scale(1.06); color: var(--on-accent); }

/* the site links: in the bar on a wide screen; on a small one they fold into a button and open as a card under the bar (nav.js) */
.top-nav { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; flex: none; position: relative; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--fg-rgb),.07); color: var(--ink); cursor: pointer; transition: background .2s, transform .3s var(--spring); }
.menu-btn:hover { background: rgba(var(--fg-rgb),.12); }
.menu-btn:active { transform: scale(.92); }
.menu-btn span { position: absolute; left: 11px; width: 18px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .35s var(--spring), opacity .2s; }
.menu-btn span:nth-child(1) { top: 13px; } .menu-btn span:nth-child(2) { top: 19px; } .menu-btn span:nth-child(3) { top: 25px; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 759.98px) {
  .topbar:not(.menu-ready) .top-nav { display: none; }
  .topbar.menu-ready { overflow: visible; } /* the card hangs below the bar */
  .topbar.menu-ready .menu-btn { display: block; }
  .topbar.menu-ready .top-nav { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: grid; gap: 2px; padding: 8px; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 26px 44px -22px rgb(var(--sh-rgb) / calc(0.84 * var(--sh-k))); transform-origin: 100% 0; visibility: hidden; opacity: 0; transform: translateY(-8px) scale(.97); pointer-events: none; transition: opacity .2s, transform .35s var(--spring), visibility 0s .35s; }
  .topbar.menu-open .top-nav { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .2s, transform .35s var(--spring), visibility 0s; }
  .top-nav .top-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: var(--r-l); font-size: 1.05rem; }
  .top-nav .top-link::after { content: ""; flex: none; width: .5em; height: .5em; border: solid currentColor; border-width: 2px 2px 0 0; rotate: 45deg; opacity: .35; }
  .top-nav .top-link:hover { transform: none; }
  .story-top.menu-ready::after { left: 26px; right: 26px; border-radius: 3px; } /* the bar no longer clips it, so it stays clear of the rounded ends */
}
@media (max-width: 759.98px) { .topbar.menu-ready .top-link.solid { white-space: nowrap; } }
@media (max-width: 400px) { .topbar.menu-ready .top-link.solid { padding: 10px 15px; } }
@media (max-width: 360px) {
  .topbar.menu-ready { gap: 8px; padding-left: 12px; }
  .topbar.menu-ready .brand { gap: 8px; font-size: 1.15rem; }
  .topbar.menu-ready .logo-mark { width: 32px; height: 32px; }
  .topbar.menu-ready .top-actions { gap: 6px; }
}

/* ---------- buttons ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 0; border-radius: var(--r-pill); padding: 14px 24px; font-weight: 700; font-size: 1rem; line-height: 1.1; cursor: pointer; text-decoration: none; transition: transform .3s var(--spring), box-shadow .3s, background .2s, opacity .2s; }
.btn:hover:not(:disabled):not(.disabled) { transform: translateY(-2px) scale(1.02); }
.btn:active:not(:disabled):not(.disabled) { transform: scale(.96); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }
.btn-black { background: var(--yellow); color: var(--on-accent); box-shadow: 0 16px 26px -16px rgb(var(--sh-rgb) / calc(.8 * var(--sh-k))); }
.btn-yellow { background: var(--yellow); color: var(--on-accent); box-shadow: 0 16px 26px -16px rgba(255,150,0,.8); }
.btn-soft { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn.wide { width: 100%; }
.btn-ig { background: var(--ig); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 20px 34px -14px rgba(225,48,108,.75); }
.btn-ig::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.btn-ig:hover:not(:disabled)::after { animation: shine 1.1s var(--glide); }
.ig-glyph { width: 22px; height: 22px; flex: none; }
.ig-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite; }
.ig-spinner.dark { display: inline-block; border-color: rgba(var(--fg-rgb),.2); border-top-color: var(--edge); vertical-align: -3px; margin-right: 6px; }
.btn-ig.connecting { pointer-events: none; }
.btn-ig.connecting .ig-spinner { display: inline-block; }
.btn-ig.connecting .ig-glyph { display: none; }
.chip { border: 0; border-radius: var(--r-pill); padding: 8px 16px; cursor: pointer; font-weight: 700; font-size: .88rem; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .3s var(--spring), background .2s; }
.chip:hover { transform: scale(1.07); }
.chip:active { transform: scale(.93); }
.linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- forms and notes ---------- */
.field { display: grid; gap: 7px; font-weight: 700; font-size: .9rem; margin-bottom: 14px; }
.field input, .input { width: 100%; border: 0; border-radius: var(--r-m); padding: 14px 16px; background: var(--surface); font-weight: 500; font-size: 16px; box-shadow: 0 0 0 1.5px rgba(var(--fg-rgb),.13) inset; transition: box-shadow .25s; } /* 16px stops iOS zooming in on focus */
.field input:focus, .input:focus { outline: none; box-shadow: 0 0 0 2.5px var(--edge) inset, 0 0 0 7px rgba(201,139,255,.35); }
.lede { margin: 0 0 16px; line-height: 1.45; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.check b { display: block; font-size: .95rem; }
.check small { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.4; color: var(--muted); font-weight: 500; }
.note { font-size: .92rem; background: var(--surface); padding: 12px 14px; border-radius: var(--r-m); margin: 16px 0 0; line-height: 1.45; }
.note.error { background: #ffe1d6; box-shadow: 0 0 0 1.5px rgba(214,41,118,.3) inset; }
.note.warn { background: #fff4c9; font-size: .85rem; color: var(--on-accent); }
.fine { font-size: .82rem; margin: 14px 0 0; color: var(--muted); }
.fine a { color: inherit; font-weight: 700; }

/* ---------- people ---------- */
.avatar { flex: none; width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--ink); box-shadow: 0 0 0 2.5px #fff, 0 8px 14px -8px rgb(var(--sh-rgb) / calc(0.77 * var(--sh-k))); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.has-photo { background: #ddd; }
.avatar.mini { width: 30px; height: 30px; font-size: .8rem; box-shadow: 0 0 0 2px #fff; }
.avatar.mini.gap { visibility: hidden; }
.avatar.big { width: 64px; height: 64px; font-size: 1.5rem; }

/* ---------- placeholders and progress ---------- */
.skel-avatar, .skel-line { background: linear-gradient(100deg, rgba(255,255,255,.06) 30%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.progress { height: 14px; border-radius: var(--r-pill); background: rgba(var(--fg-rgb),.08); overflow: hidden; position: relative; margin: 6px 0 16px; }
.progress span { position: absolute; inset: 0 auto 0 -40%; width: 40%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--yellow), var(--orange), var(--purple-deep)); animation: slide 1.3s ease-in-out infinite; }

/* ---------- the little message at the bottom ---------- */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px; background: var(--yellow); color: var(--on-accent); padding: 13px 22px 13px 18px; border-radius: var(--r-pill); font-weight: 600; box-shadow: 0 18px 34px -14px rgb(var(--sh-rgb) / calc(.75 * var(--sh-k))); width: max-content; max-width: calc(100vw - 32px); text-align: center; animation: toast-in .45s var(--spring); }
.toast::before { content: "✦"; color: var(--yellow); }

/* ---------- a strip of outlined words, sliding by ---------- */
.marquee { overflow: hidden; pointer-events: none; }
.track { display: flex; width: max-content; font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -0.05em; white-space: pre; color: transparent; -webkit-text-stroke: 2px rgba(var(--fg-rgb),.2); }

/* ---------- movement shared by every page ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 18px) scale(.9); } }
@keyframes bob { 50% { transform: translateY(-7px); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .55; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,223,61,.55); } 60% { box-shadow: 0 0 0 7px rgba(255,223,61,0); } }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-.45em); opacity: 1; } }

/* ---------- Settings > Look and feel, and the browser's own "less motion" ---------- */
html[data-text="large"] { font-size: 112.5%; }
html[data-motion="reduced"], html[data-motion="reduced"] body { scroll-behavior: auto; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}