/* port0r.com, third draft (16/10/2026). Guillaume on the second one: « pas bien beau, trop simple, blanc et noir, la police
   un peu étirée, on dirait un premier site WordPress avec le thème de base ... on peut faire beaucoup mieux », « on a de la
   matière ». The identity now comes from the material he likes, our YouTube thumbnails: a tall Anton headline whose second
   line wears the game's colour (here a coloured block, so it reads on a light page too), the red OUT NOW chip, the PORT0R
   wordmark's two eyes, red and cyan. The page stays light (13/10: « pas noir, ça fait nébuleux et underground ») and its colour
   comes from the games: each one owns the hue of its thumbnail. Media first: every video we made plays right here, the
   numbers are live, the players' words turn in big. No border anywhere: surfaces are told apart by their background. */

@property --stereo { syntax: "<length>"; inherits: true; initial-value: 0em; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  color-scheme: light;
  --paper: #f3f5f9;          /* the page: a cool light grey, not white */
  --paper-2: #e9edf4;        /* the alternate band */
  --card: #ffffff;
  --ink: #0d1322;            /* text: a deep night blue, not black */
  --ink-2: #485266;
  --ink-3: #6f798c;
  --night: #0b0f19;          /* behind videos and thumbnails */
  --red: #e8392f;            /* the OUT NOW chip */
  --red-eye: #ff3d55;        /* the wordmark's two eyes */
  --cyan-eye: #29e3ff;
  /* the games' own hues, from their thumbnails' second line */
  --yellow: #ffc928;  --on-yellow: #0d1322;    /* Rally VR, Sega Rally */
  --blue: #2f6bff;    --on-blue: #ffffff;      /* Cop VR */
  --amber: #ff9f1c;   --on-amber: #0d1322;     /* Time Crisis VR */
  --cyan: #16c3ea;    --on-cyan: #0d1322;      /* Switch */
  --green: #22d47b;   --on-green: #0d1322;     /* Android */
  --violet: #8a6cf6;  --on-violet: #ffffff;    /* Steam Deck & Linux */
  --sky: #3fb5ff;     --on-sky: #0d1322;       /* Mac */
  --display: "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  --text: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 48px);
  --top-h: 64px;
  --r-media: 22px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-media: 0 34px 70px -28px rgb(11 15 25 / .55), 0 10px 24px -12px rgb(11 15 25 / .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.55 var(--text); -webkit-font-smoothing: antialiased;
  overflow-x: hidden; }
img, video, svg, iframe { display: block; max-width: 100%; }
figure, blockquote { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px;
  border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }

/* ---- type: the thumbnails' headline ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .004em;
  line-height: .94; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(44px, 6.4vw, 92px); }
h3 { font-size: clamp(34px, 3.6vw, 54px); }
p { margin: 0; text-wrap: pretty; }
/* the second line, in the game's colour: a block, like a sticker on the cabinet */
.hl { display: inline; color: var(--on, var(--ink)); padding: 0 .14em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  /* the colour block hugs the capitals (Anton's line box is far taller than its caps: a plain background bit into the line above) */
  background: linear-gradient(var(--c, var(--yellow)), var(--c, var(--yellow))) 0 var(--hl-top, .3em) / 100% var(--hl-h, .9em) no-repeat; }
h1:has(.hl), h2:has(.hl), h3:has(.hl) { line-height: 1.04; }
.chip { display: inline-flex; align-items: center; gap: 8px; width: fit-content; background: var(--red); color: #fff;
  font: 700 13px/1 var(--text); letter-spacing: .09em; text-transform: uppercase; padding: 8px 11px 7px; border-radius: 5px; }
.chip.soft { background: color-mix(in oklch, var(--ink) 8%, transparent); color: var(--ink-2); }
.chip.on-dark { background: rgb(255 255 255 / .14); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.eyes { display: inline-flex; gap: 4px; flex: none; }
.eyes i { width: 9px; height: 9px; border-radius: 50%; background: var(--red-eye); }
.eyes i + i { background: var(--cyan-eye); }
.kicker { font: 700 14px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lead { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

/* the stereo word: the two eyes drift apart once, then hold */
.stereo { --stereo: .045em; text-shadow: calc(var(--stereo) * -1) 0 0 var(--cyan-eye), var(--stereo) 0 0 var(--red-eye);
  animation: stereo 1.4s var(--ease-out) 1.1s both; }
@keyframes stereo { from { --stereo: 0em; } }
/* section titles converge as they scroll in: two eyes apart, then one sharp title */
@supports (animation-timeline: view()) {
  .converge { animation: converge linear both; animation-timeline: view(); animation-range: entry 5% cover 32%; }
  @keyframes converge {
    from { text-shadow: -.09em 0 0 color-mix(in oklch, var(--cyan-eye) 80%, transparent), .09em 0 0 color-mix(in oklch, var(--red-eye) 80%, transparent); }
    to { text-shadow: 0 0 0 transparent, 0 0 0 transparent; }
  }
}

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 16px/1 var(--text); letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgb(11 15 25 / .6); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn.yellow { background: var(--yellow); color: var(--on-yellow); }
.btn.white { background: #fff; color: var(--ink); }
.btn.glass { background: rgb(255 255 255 / .16); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn.glass:hover { background: rgb(255 255 255 / .26); }
.btn.soft { background: color-mix(in oklch, var(--ink) 8%, transparent); color: var(--ink); }
.btn.soft:hover { background: color-mix(in oklch, var(--ink) 13%, transparent); box-shadow: none; }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); transition: text-decoration-color .18s; }
.link:hover { text-decoration-color: currentColor; }

/* ---- the top bar ---- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(var(--top-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px); transition: background-color .25s, box-shadow .25s, color .25s; }
.top .wrap { height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top .mark img { height: 24px; width: auto; }
.top nav { display: flex; align-items: center; gap: 4px; }
.top nav a { text-decoration: none; font: 700 14px/1 var(--text); letter-spacing: .08em; text-transform: uppercase;
  padding: 12px; border-radius: 999px; transition: background-color .18s; }
.top nav a:not(.btn):hover, .top nav a[aria-current="page"] { background: color-mix(in oklch, currentColor 12%, transparent); }
.top nav .btn { min-height: 42px; margin-left: 6px; padding: 0 16px; }
.top.over { color: #fff; }
.top .mark .on-dark, .top.over .mark .on-light { display: none; }
.top.over .mark .on-dark { display: block; filter: drop-shadow(0 1px 8px rgb(0 0 0 / .35)); }
.top.over nav .btn { background: #fff; color: var(--ink); }
.top.solid { background: color-mix(in oklch, var(--paper) 88%, transparent); color: var(--ink);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 30px -22px rgb(11 15 25 / .5); }
@media (max-width: 900px) { .top nav .opt { display: none; } }
@media (max-width: 420px) { .top nav a:not(.btn) { padding: 12px 8px; font-size: 13px; } .top .mark img { height: 20px; } }

/* ---- the header: the race behind the title, its two eyes converging at load ---- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: #fff;
  /* the whole window, whatever its height (16/10/2026, Guillaume: « le header ne prend pas automatiquement toute la page,
     on a une ligne blanche »: it was capped at 980 px) */
  min-height: 100vh; min-height: 100svh; display: grid; align-content: end; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media video, .hero-media .eye { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% var(--focus-y, 56%); }
.hero-media video { background: var(--night) center / cover no-repeat; }
.hero-eyes { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.hero-eyes .eye { mix-blend-mode: screen; will-change: transform; }
.hero-eyes .l { filter: url(#eye-red); transform: translateX(-2.6%); }
.hero-eyes .r { filter: url(#eye-cyan); transform: translateX(2.6%); }
.hero.intro .hero-eyes { opacity: 1; }
.hero.intro.fuse .hero-eyes .eye { transform: translateX(0); transition: transform 1.15s var(--ease-out); }
.hero.fused .hero-eyes { opacity: 0; transition: opacity .45s ease; }
.hero-media::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(11 15 25 / .55) 0%, transparent 20%),
    linear-gradient(0deg, rgb(11 15 25 / .92) 0%, rgb(11 15 25 / .35) 40%, transparent 62%),
    radial-gradient(110% 80% at 0% 100%, rgb(11 15 25 / .6) 0%, transparent 55%); }
.hero-copy { padding-block: calc(var(--top-h) + 48px) 34px; display: grid; gap: 22px; justify-items: start; }
.hero h1 { font-size: clamp(50px, 7vw, 108px); max-width: 19ch; text-shadow: 0 4px 40px rgb(0 0 0 / .35); }
.hero h1 .hl { text-shadow: none; }
.hero .lead { color: rgb(255 255 255 / .86); max-width: 40ch; }
.hero .row { margin-top: 4px; }
.rec { display: inline-flex; align-items: center; gap: 9px; font: 600 13px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase;
  color: rgb(255 255 255 / .8); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .25; } }
@media (max-width: 600px) {
  .hero-copy { gap: 18px; }
  .hero .lead { font-size: 18px; }
  .hero .row .btn { flex: 1 1 auto; }
  /* the phone's cut puts the white car right behind the text: a deeper veil under the copy */
  .hero-media::after { background:
    linear-gradient(180deg, rgb(11 15 25 / .6) 0%, transparent 16%),
    linear-gradient(0deg, rgb(11 15 25 / .96) 0%, rgb(11 15 25 / .82) 42%, rgb(11 15 25 / .35) 66%, transparent 80%); }
}

/* the live strip at the foot of the header: the numbers, now */
.strip { background: rgb(11 15 25 / .55); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.strip a { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: center; gap: clamp(12px, 2.4vw, 36px);
  padding-block: 18px; text-decoration: none; color: #fff; }
.strip .live { display: inline-flex; align-items: center; gap: 9px; font: 700 13px/1 var(--text); letter-spacing: .14em; }
.strip .n { display: grid; gap: 4px; min-width: 0; }
.strip .n b { font: 400 clamp(26px, 2.8vw, 40px)/1 var(--display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.strip .n small { font: 600 12px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
@media (max-width: 760px) {
  .strip a { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding-block: 16px; }
  .strip .live { grid-column: 1 / -1; }
}

/* ---- bands ---- */
.band { padding-block: clamp(72px, 9vw, 132px); }
.band.alt { background: var(--paper-2); }
.head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 980px; justify-items: start; }
.head .lead { max-width: 52ch; }

/* ---- a YouTube video, played right here (our own thumbnail first, the player on a click) ---- */
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; margin: 0;
  border-radius: var(--r-media); overflow: hidden; background: var(--night); cursor: pointer; box-shadow: var(--shadow-media);
  isolation: isolate; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.yt .play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 22px 0 16px; height: 58px; border-radius: 999px; background: var(--red); color: #fff;
  font: 700 15px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 16px 34px -12px rgb(0 0 0 / .6);
  transition: transform .2s var(--ease-out); }
.yt .play svg { width: 26px; height: 26px; }
.yt .views { position: absolute; right: 12px; bottom: 12px; font: 700 12px/1 var(--text); letter-spacing: .08em; color: #fff;
  background: rgb(11 15 25 / .72); padding: 7px 9px; border-radius: 6px; text-transform: uppercase; }
.yt .views:empty { display: none; }
.yt:hover img { transform: scale(1.035); }
.yt:hover .play { transform: scale(1.06); }
.yt:active .play { transform: scale(.97); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt.on { cursor: default; }
@media (max-width: 560px) { .yt .play { height: 50px; font-size: 13px; padding: 0 18px 0 13px; } .yt .play svg { width: 22px; height: 22px; } }

/* ---- the three cabinets ---- */
.games { display: grid; gap: clamp(28px, 4vw, 48px); }
.game { --c: var(--yellow); --on: var(--on-yellow); position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "stage info" "extra info"; gap: 0 clamp(28px, 4vw, 64px); align-items: start; padding: clamp(22px, 3vw, 44px); border-radius: 32px;
  background: color-mix(in oklch, var(--c) 18%, var(--card)); }
.game.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "info stage" "info extra"; }
.stage { grid-area: stage; }
.info { grid-area: info; }
.extra { grid-area: extra; display: grid; gap: 14px; padding-top: clamp(44px, 5vw, 72px); }
.game[data-game="timecris"] { --c: var(--amber); --on: var(--on-amber); }
.game[data-game="cop"] { --c: var(--blue); --on: var(--on-blue); }
.stage { position: relative; z-index: 1; }
/* the clip recorded in the headset, as a window over the corner of the video */
.pip { position: absolute; z-index: 2; width: 36%; right: -2%; bottom: -10%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: var(--night); box-shadow: 0 24px 40px -18px rgb(11 15 25 / .7); outline: 5px solid color-mix(in oklch, var(--c) 18%, var(--card)); }
.game.flip .pip { right: auto; left: -2%; }
.pip video { width: 100%; height: 100%; object-fit: cover; }
.pip .tag { position: absolute; left: 9px; top: 8px; display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 var(--text);
  letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgb(11 15 25 / .6); padding: 6px 8px; border-radius: 6px; }
.pip .tag .dot { width: 7px; height: 7px; }
.info { display: grid; gap: 18px; align-content: start; }
.info .meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.info h3 { font-size: clamp(44px, 4.6vw, 70px); }
.new { display: grid; gap: 4px; background: var(--card); border-radius: 14px; padding: 14px 16px; font-size: 16px; line-height: 1.45; }
.new b { font: 700 13px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feat li { position: relative; padding-left: 38px; min-height: 26px; font-weight: 500; }   /* not a grid: inline code and links stay in the sentence */
.feat li::before { content: ""; position: absolute; left: 0; top: .05em; width: 26px; height: 26px; border-radius: 8px; background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230d1322' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 18px no-repeat; }
.game[data-game="cop"] .feat li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
/* its numbers, live */
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nums div { background: var(--card); border-radius: 14px; padding: 12px 14px 11px; display: grid; gap: 3px; min-width: 0; }
.nums b { font: 400 clamp(26px, 2.4vw, 34px)/1 var(--display); font-variant-numeric: tabular-nums; }
.nums small { font: 600 12px/1.25 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
/* one of its players' words, turning */
.said { position: relative; background: var(--card); border-radius: 16px; padding: 18px 18px 14px; min-height: 118px;
  display: grid; align-content: space-between; gap: 10px; margin-top: 10px; }
.said q { quotes: none; font: italic 600 17px/1.42 var(--text); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; transition: opacity .35s, transform .35s var(--ease-out); }
.said cite { font: 600 13px/1.3 var(--text); font-style: normal; color: var(--ink-3); letter-spacing: .02em; transition: opacity .35s; }
.said.out q, .said.out cite { opacity: 0; transform: translateY(6px); }
.said::before { content: ""; position: absolute; left: 18px; top: -10px; width: 30px; height: 20px; border-radius: 6px;
  background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath fill='%230d1322' d='M3 17V10Q3 3 10 1L11 3.5Q7 5 7 9H11V17ZM15 17V10Q15 3 22 1L23 3.5Q19 5 19 9H23V17Z'/%3E%3C/svg%3E") center / 17px no-repeat; }
.game[data-game="cop"] .said::before, .plat[data-game="linux"] .said::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath fill='%23ffffff' d='M3 17V10Q3 3 10 1L11 3.5Q7 5 7 9H11V17ZM15 17V10Q15 3 22 1L23 3.5Q19 5 19 9H23V17Z'/%3E%3C/svg%3E"); }
.said:empty, .said[hidden] { display: none; }
@media (max-width: 1020px) {
  .game, .game.flip { grid-template-columns: 1fr; grid-template-areas: "stage" "info" "extra"; }
  .pip { width: 40%; bottom: -12%; }
  .info { margin-top: 44px; }
  .extra { padding-top: 22px; }
}
@media (max-width: 560px) {
  .game { border-radius: 24px; padding: 12px 12px 22px; gap: 22px; }
  .pip { width: 44%; right: 8px; bottom: -16%; border-radius: 12px; outline-width: 4px; }
  .game.flip .pip { left: 8px; }
  .info { padding-inline: 6px; }
  .nums { gap: 6px; }
  .nums div { padding: 10px 10px 9px; }
  .nums small { font-size: 11px; letter-spacing: .05em; }
}

/* the coming-next card */
.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; padding: clamp(24px, 3vw, 40px);
  border-radius: 32px; background: var(--ink); color: #fff; }
.next h3 { font-size: clamp(36px, 4vw, 60px); }
.next p { color: rgb(255 255 255 / .78); margin-top: 12px; }
.queue { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.queue li { font: 600 14px/1 var(--text); letter-spacing: .05em; padding: 9px 12px; border-radius: 999px; background: rgb(255 255 255 / .1); }
.queue li:first-child { background: var(--red); }
@media (max-width: 760px) { .next { grid-template-columns: 1fr; } }

/* ---- LIVE: the numbers, big, on the arcade's yellow ---- */
.live-band { background: var(--yellow); color: var(--ink); padding-block: clamp(64px, 8vw, 112px); }
.live-band .head { margin-bottom: clamp(28px, 4vw, 52px); }
.live-band .kicker { color: color-mix(in oklch, var(--ink) 72%, transparent); display: inline-flex; align-items: center; gap: 10px; }
.live-band .lead { color: color-mix(in oklch, var(--ink) 78%, transparent); }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3vw, 44px) clamp(20px, 3vw, 48px); }
.stat { display: grid; gap: 10px; align-content: start; min-width: 0; }
.stat .lbl { font: 700 14px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in oklch, var(--ink) 74%, transparent); }
.stat .big { font: 400 clamp(64px, 8.6vw, 132px)/.86 var(--display); letter-spacing: .005em; font-variant-numeric: tabular-nums; }
.stat .trend { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.delta { font: 700 14px/1 var(--text); letter-spacing: .04em; background: var(--ink); color: var(--yellow); padding: 7px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta:empty { display: none; }
.spark { flex: 1; height: 32px; min-width: 60px; overflow: visible; }
.spark .line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .area { fill: color-mix(in oklch, var(--ink) 12%, transparent); }
.live-note { margin-top: clamp(30px, 4vw, 48px); font: 500 15px/1.5 var(--text); color: color-mix(in oklch, var(--ink) 74%, transparent); }
.live-note b { font-weight: 700; color: var(--ink); }
@media (max-width: 760px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .stat .big { font-size: clamp(46px, 13vw, 72px); }
  .stat .trend { flex-wrap: wrap; gap: 8px; }
  .spark { flex-basis: 100%; }
}

/* ---- VOICES: the players' words, big, turning ---- */
.voices { background: var(--blue); color: #fff; padding-block: clamp(64px, 8vw, 112px); overflow: hidden; }
.voices .kicker { color: rgb(255 255 255 / .78); }
.voices .lead { color: rgb(255 255 255 / .82); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 3vw, 40px); }
.filters button { border: 0; cursor: pointer; font: 700 14px/1 var(--text); letter-spacing: .06em; text-transform: uppercase;
  padding: 0 14px; border-radius: 999px; background: rgb(255 255 255 / .13); color: #fff; min-height: 42px;
  transition: background-color .18s; }
.filters button:hover { background: rgb(255 255 255 / .22); }
.filters button[aria-pressed="true"] { background: #fff; color: var(--blue); }
.filters button small { font-weight: 600; opacity: .7; margin-left: 4px; }
.quote { min-height: clamp(260px, 34vw, 440px); display: grid; align-content: center; gap: clamp(20px, 2.4vw, 32px); }
@media (max-width: 600px) {
  .filters { gap: 6px; }
  .filters button { padding: 0 12px; font-size: 13px; }
  .quote { min-height: 300px; align-content: start; padding-top: 10px; }
}
.quote blockquote { margin: 0; font: italic 600 clamp(30px, 4.3vw, 64px)/1.12 var(--text); letter-spacing: -.012em; text-wrap: balance;
  max-width: 24ch; transition: opacity .24s, transform .32s var(--ease-out), filter .24s; }
.quote blockquote.long { font-size: clamp(24px, 3vw, 42px); max-width: 36ch; }
.quote blockquote::before { content: "\201C"; display: block; font: 400 1.6em/.62 var(--display); color: var(--yellow); margin-bottom: .1em; }
.quote .who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 600 17px/1.3 var(--text); color: rgb(255 255 255 / .92);
  transition: opacity .24s; }
.quote .who a { text-decoration: none; }
.quote .who a:hover { text-decoration: underline; text-underline-offset: 4px; }
.quote .who .chip { font-size: 12px; padding: 7px 9px 6px; }
.quote.out blockquote { opacity: 0; transform: translateY(18px); filter: blur(4px); }
.quote.out .who { opacity: 0; }
.qbar { display: flex; align-items: center; gap: 12px; margin-top: clamp(26px, 3vw, 40px); }
.qbar button { width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / .14); color: #fff; transition: background-color .18s, transform .18s var(--ease-out); flex: none; }
.qbar button:hover { background: rgb(255 255 255 / .26); }
.qbar button:active { transform: scale(.94); }
.qbar svg { width: 22px; height: 22px; }
.qbar .track { flex: 1; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .2); overflow: hidden; min-width: 40px; }
.qbar .track i { display: block; height: 100%; width: 100%; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.qbar .count { font: 600 14px/1 var(--text); color: rgb(255 255 255 / .8); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }

/* ---- EVERYWHERE: Sega Rally on a screen ---- */
.plats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.plat { --c: var(--cyan); --on: var(--on-cyan); display: grid; gap: 18px; align-content: start; background: var(--card);
  border-radius: 28px; padding: 12px 12px 24px; }
.plat[data-game="android"] { --c: var(--green); --on: var(--on-green); }
.plat[data-game="linux"] { --c: var(--violet); --on: var(--on-violet); }
.plat[data-game="mac"] { --c: var(--sky); --on: var(--on-sky); }
.plat .yt { border-radius: 18px; box-shadow: none; }
.plat .body { display: grid; gap: 14px; padding-inline: 12px; }
.plat h3 { font-size: clamp(32px, 3.2vw, 46px); }
.plat .spec { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 14px/1.3 var(--text); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.plat .spec b { color: var(--ink); font-weight: 700; }
.plat .said { background: color-mix(in oklch, var(--c) 16%, var(--card)); min-height: 0; }
@media (max-width: 860px) { .plats { grid-template-columns: 1fr; } }

/* ---- the leaderboards, live ---- */
.lbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.lb { --c: var(--yellow); background: var(--card); border-radius: 26px; padding: 22px 22px 18px; display: grid; gap: 14px; align-content: start; }
.lb[data-game="vcop"] { --c: var(--blue); }
.lb[data-game="timecris"] { --c: var(--amber); }
.lb h3 { font-size: 34px; display: flex; align-items: center; gap: 12px; }
.lb h3::before { content: ""; width: 12px; height: 28px; border-radius: 4px; background: var(--c); flex: none; }
.lb .rule { font: 500 15px/1.45 var(--text); color: var(--ink-2); }
.lb .rule b { color: var(--ink); }
.lb .tbl { display: grid; gap: 8px; }
.lb .tbl h4 { margin: 6px 0 0; font: 700 13px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lb ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lb li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px;
  background: var(--paper); font-weight: 600; font-size: 16px; }
.lb li:first-child { background: color-mix(in oklch, var(--c) 24%, var(--card)); }
.lb li .rk { font: 400 18px/1 var(--display); color: var(--ink-3); }
.lb li:first-child .rk { color: var(--ink); }
.lb li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb li .sc { font: 700 16px/1 var(--text); font-variant-numeric: tabular-nums; }
.lb li.empty { grid-template-columns: 1fr; color: var(--ink-3); font-weight: 500; }
@media (max-width: 1020px) { .lbs { grid-template-columns: 1fr; } }

/* ---- the last row: Discord, support ---- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.panel { border-radius: 32px; padding: clamp(26px, 3.4vw, 48px); display: grid; gap: 18px; align-content: start; }
.panel h3 { font-size: clamp(38px, 4.2vw, 64px); }
.panel.discord { background: #5865f2; color: #fff; }
.panel.discord p { color: rgb(255 255 255 / .88); }
.panel.discord .big { font: 400 clamp(72px, 8vw, 120px)/.86 var(--display); font-variant-numeric: tabular-nums; }
.panel.give { background: var(--card); }
.panel.give p { color: var(--ink-2); }
.gives { display: grid; gap: 10px; }
.gives a { display: grid; grid-template-columns: 48px 1fr 24px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px;
  background: var(--paper); text-decoration: none; transition: background-color .18s, transform .18s var(--ease-out); }
.gives a:hover { background: var(--paper-2); transform: translateX(3px); }
.gives .ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.gives .ic svg, .gives .go { width: 24px; height: 24px; }
.gives b { display: block; font-size: 18px; }
.gives small { color: var(--ink-3); font-size: 14px; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* install */
.steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.steps li { counter-increment: s; background: var(--card); border-radius: 20px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.steps li::before { content: counter(s); font: 400 44px/1 var(--display); color: var(--blue); }
.steps b { font-size: 19px; }
.steps span { color: var(--ink-2); font-size: 16px; }
.steps code { font: 600 14px/1.4 ui-monospace, monospace; background: var(--paper); padding: 2px 6px; border-radius: 6px; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---- footer ---- */
footer.foot { background: var(--ink); color: rgb(255 255 255 / .8); padding-block: 48px calc(48px + env(safe-area-inset-bottom, 0px)); }
.foot .wrap { display: grid; gap: 22px; }
.foot img { height: 22px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot nav a { text-decoration: none; font-weight: 600; padding: 6px 0; }
.foot nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot .legal { font-size: 14px; color: rgb(255 255 255 / .55); }

/* ---- a page of its own (a game, the leaderboards) ---- */
.page-head { padding-block: calc(var(--top-h) + 56px) clamp(36px, 5vw, 60px); }
.page-head h1 { font-size: clamp(56px, 8vw, 120px); }
.page-head .lead { margin-top: 18px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tabs button { border: 0; cursor: pointer; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--card);
  font: 700 15px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; transition: background-color .18s; }
.tabs button:hover { background: var(--paper-2); }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.grid-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.prize { background: var(--ink); color: #fff; border-radius: 22px; padding: 20px 24px; margin-bottom: 18px; font-size: 18px; line-height: 1.5; }
.prize b { color: var(--yellow); }
.prose { display: grid; gap: 16px; max-width: 70ch; }
.prose h3 { font-size: clamp(30px, 3vw, 42px); margin-top: 18px; }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.ctl { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 16px; }
.ctl td { background: var(--card); padding: 12px 16px; }
.ctl td:first-child { border-radius: 12px 0 0 12px; font-weight: 600; }
.ctl td:last-child { border-radius: 0 12px 12px 0; color: var(--ink-2); }

/* entrance: from a visible state, never parked at opacity 0 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    @keyframes rise { from { transform: translateY(36px); } to { transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stereo, .converge, .dot, .rise { animation: none; }
  .hero-eyes { display: none; }
  .quote blockquote, .said q { transition: none; }
}

/* the video window (the header's button): the player over a dimmed page */
.watch { border: 0; padding: 0; background: transparent; width: min(1200px, 100vw - 2 * var(--gut)); max-width: none; max-height: none; overflow: visible; }
.watch::backdrop { background: rgb(11 15 25 / .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.watch-in { position: relative; }
.watch-frame { aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: var(--night); box-shadow: var(--shadow-media); }
.watch-frame iframe { width: 100%; height: 100%; border: 0; }
.watch-x { position: absolute; right: 0; top: -60px; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgb(255 255 255 / .16); color: #fff; transition: background-color .18s; }
.watch-x:hover { background: rgb(255 255 255 / .28); }
.watch-x svg { width: 24px; height: 24px; }

/* ---- contact (16/10/2026, Guillaume: « une page contact protégée contre le spam ... quelque chose de moderne ») ----
   A form that needs no captcha (contact.js: a proof of work in a worker, a field nobody sees), the address shown on a real
   click only, and the other places to find us. Surfaces told apart by their background, as everywhere. */
.c-head { padding-bottom: clamp(28px, 4vw, 48px); }
.c-promises { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.c-promises li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px 10px 11px; border-radius: 999px; background: var(--card);
  font: 600 15px/1.2 var(--text); color: var(--ink-2); }
.c-promises svg { width: 19px; height: 19px; flex: none; color: var(--blue); }
.c-form[hidden], .c-done[hidden] { display: none; }
.c-band { padding-top: 0; }
.c-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 36px); align-items: start; }
.c-main { min-width: 0; }
.c-form, .c-done { background: var(--card); border-radius: 32px; padding: clamp(22px, 3.4vw, 48px); display: grid; gap: clamp(28px, 3.4vw, 40px);
  box-shadow: 0 30px 60px -44px rgb(11 15 25 / .45); }
.c-set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 16px; }
.c-step { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 4px; font: 700 14px/1.2 var(--text); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); }
.c-step span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff;
  font: 400 18px/1 var(--display); letter-spacing: 0; }
/* what it is about: big chips that take the topic's colour */
.c-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.c-topic { --c: var(--ink); --on: #fff; position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 54px;
  padding: 0 18px 0 8px; border-radius: 999px; background: var(--paper); cursor: pointer; font: 700 16px/1 var(--text); letter-spacing: .01em;
  transition: background-color .2s, color .2s, transform .18s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.c-topic[data-t="bug"] { --c: var(--red); }
.c-topic[data-t="wish"] { --c: var(--yellow); --on: var(--ink); }
.c-topic[data-t="press"] { --c: var(--blue); }
.c-topic[data-t="partner"] { --c: var(--violet); }
.c-topic input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.c-topic .ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink);
  flex: none; transition: background-color .2s, color .2s, transform .3s var(--ease-out); }
.c-topic .ic svg { width: 21px; height: 21px; }
.c-topic:hover { background: var(--paper-2); }
.c-topic:active { transform: scale(.97); }
.c-topic:has(input:checked) { background: var(--c); color: var(--on); }
.c-topic:has(input:checked) .ic { background: color-mix(in oklch, var(--on) 18%, transparent); color: var(--on); transform: rotate(-8deg); }
.c-topic:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.c-hint { display: flex; gap: 14px; align-items: flex-start; background: color-mix(in oklch, var(--blue) 8%, var(--card)); border-radius: 18px;
  padding: 15px 18px; font: 500 16px/1.5 var(--text); color: var(--ink-2); animation: c-in .35s var(--ease-out); }
.c-hint svg { width: 24px; height: 24px; flex: none; margin-top: 1px; color: #5865f2; }
.c-hint[data-hint="press"] svg { color: var(--blue); }
.c-hint[hidden] { display: none; }
@keyframes c-in { from { opacity: 0; transform: translateY(-6px); } }
/* the fields: a soft surface, a ring when it has the focus */
.c-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.c-field { display: grid; gap: 9px; min-width: 0; }
.c-lbl { font: 700 13px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.c-lbl i { font: 500 14px/1.2 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink-3); margin-left: 6px; }
.c-field :is(input, select, textarea) { width: 100%; border: 0; border-radius: 16px; background: var(--paper); color: var(--ink);
  font: 500 18px/1.45 var(--text); padding: 15px 18px; min-height: 56px; transition: background-color .18s, box-shadow .25s var(--ease-out);
  -webkit-appearance: none; appearance: none; }
.c-field textarea { resize: vertical; min-height: 200px; line-height: 1.55; }
.c-field select { cursor: pointer; padding-right: 48px; text-overflow: ellipsis;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23485266' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") right 16px center / 22px no-repeat; }
.c-field :is(input, select, textarea)::placeholder { color: color-mix(in oklch, var(--ink-3) 80%, transparent); }
.c-field :is(input, select, textarea):hover { background-color: var(--paper-2); }
.c-field :is(input, select, textarea):focus { outline: 3px solid var(--blue); outline-offset: 2px; background-color: var(--card);
  box-shadow: 0 14px 30px -20px rgb(11 15 25 / .5); }
.c-field.bad :is(input, select, textarea) { background-color: color-mix(in oklch, var(--red) 9%, var(--card)); }
.c-err { font: 600 14px/1.35 var(--text); font-style: normal; color: var(--red); }
.c-err:empty, .c-field:not(.bad) .c-err { display: none; }
.c-under { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.c-count { margin-left: auto; font: 600 13px/1 var(--text); font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.c-count.near { color: var(--red); }
.c-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* sending */
.c-send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.c-go { min-height: 60px; padding: 0 30px; font-size: 17px; }
.c-go svg { transition: transform .3s var(--ease-out); }
.c-go:hover svg { transform: translateX(3px) rotate(-12deg); }
.c-go[aria-busy="true"] { pointer-events: none; }
.c-go[aria-busy="true"] svg { animation: c-fly 1s var(--ease-out) infinite; }
@keyframes c-fly { 50% { transform: translateX(6px) rotate(-12deg); opacity: .4; } }
.c-proof { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1.4 var(--text); color: var(--ink-3); }
.c-led { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in oklch, var(--ink-3) 50%, transparent); flex: none; }
.c-led.work { background: var(--amber); animation: rec 1s ease-in-out infinite; }
.c-led.ok { background: var(--green); box-shadow: 0 0 0 4px color-mix(in oklch, var(--green) 22%, transparent); }
.c-status { font: 600 16px/1.45 var(--text); color: var(--red); margin-top: -12px; }
.c-status:empty { display: none; }
/* sent */
.c-done { align-content: center; justify-items: start; min-height: 460px; gap: 22px; }
.c-done h2 { font-size: clamp(60px, 7.4vw, 112px); outline: none; }
.c-done .lead { max-width: 40ch; }
.c-done .chip { background: var(--ink); }
.c-done:not([hidden]) h2 { animation: c-focus 1.2s var(--ease-out) both; }
/* the side: the address, then the other places */
.c-side { display: grid; gap: clamp(16px, 2vw, 24px); position: sticky; top: calc(var(--top-h) + 24px); min-width: 0; }
.c-mail { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: #fff; border-radius: 32px;
  padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px; }
.c-mail::before { content: ""; position: absolute; z-index: -1; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--blue) 55%, transparent), transparent); opacity: .55; }
.c-mail .kicker { color: rgb(255 255 255 / .62); }
.c-addr { min-height: 58px; display: flex; align-items: center; font: 700 clamp(24px, 2.3vw, 31px)/1.15 var(--text); letter-spacing: -.01em;
  overflow-wrap: anywhere; }
.c-addr .on { animation: c-focus 1.1s var(--ease-out) both; user-select: all; }
@keyframes c-focus { from { text-shadow: -.16em 0 0 var(--cyan-eye), .16em 0 0 var(--red-eye); letter-spacing: .06em; opacity: .4; } }
.c-mask { display: flex; align-items: center; gap: 10px; width: 100%; }
.c-mask i { height: 24px; border-radius: 7px; background: linear-gradient(90deg, rgb(255 255 255 / .1), rgb(255 255 255 / .22), rgb(255 255 255 / .1)) 0 0 / 200% 100%;
  animation: c-shine 2.4s linear infinite; }
.c-mask i:nth-child(1) { width: 38%; }
.c-mask i:nth-child(2) { width: 24px; height: 24px; border-radius: 50%; }
.c-mask i:nth-child(3) { width: 44%; }
@keyframes c-shine { to { background-position: -200% 0; } }
.c-acts { gap: 10px; }
.c-acts .btn.copied { background: var(--green); color: var(--ink); }
.c-note { font-size: 14px; line-height: 1.45; color: rgb(255 255 255 / .55); }
.c-else { background: var(--card); border-radius: 32px; padding: clamp(22px, 3vw, 32px); display: grid; gap: 18px; }
.c-else h2 { font-size: clamp(34px, 3.2vw, 46px); }
.c-else .gives .ic svg { width: 24px; height: 24px; }
@media (max-width: 1000px) {
  .c-grid { grid-template-columns: 1fr; }
  .c-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 760px) { .c-side { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .c-form, .c-done { border-radius: 24px; padding: 20px 16px 22px; }
  .c-pair { grid-template-columns: 1fr; }
  .c-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .c-promises li { font-size: 14px; padding: 9px 13px 9px 10px; }
  .c-topic { min-height: 52px; padding-right: 12px; font-size: 15px; }
  .c-topic:last-child { grid-column: 1 / -1; }
  .c-go { width: 100%; }
  .c-mail, .c-else { border-radius: 24px; }
  .c-field :is(input, select, textarea) { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .c-addr .on, .c-done:not([hidden]) h2, .c-hint, .c-mask i, .c-led.work, .c-go[aria-busy="true"] svg { animation: none; }
}