@font-face {
  font-family: Atkinson;
  src: url('/assets/atkinson.woff2?v=18b2a1a39a2fa298') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --ink: #111313;
  --surface: #151718;
  --surface-raised: #1b1e1f;
  --line: #343938;
  --text: #ecece6;
  --muted: #929893;
  --acid: #b9f568;
  --acid-ink: #b9f568;
  --hero-outline: rgba(185, 245, 104, .27);
  --hero-rule: #65715e;
  --paper: #e7e5da;
  --on-ink: #ecece6;
  --frame: #111313;
  --hero-a: #191c1c;
  --hero-b: #121415;
  --bar: #171919;
  --card: #191c1d;
  --card-alt: #1a1d1e;
  --raised: #1b1e1f;
  --topbar: rgba(21, 23, 24, .96);
  --line-soft: #303435;
  --line-faq: #3a3f3e;
  --line-brand: #3f4443;
  --line-button: #414746;
  --line-marker: #4a514d;
  --line-frame: #535b56;
  --line-dot: #555b57;
  --line-acid: #596550;
  --line-acid-2: #65715e;
  --line-hover: #69716c;
  --text-2: #d7d9d3;
  --text-3: #b5b9b4;
  --text-4: #a5aaa5;
  --text-5: #a1a6a1;
  --text-6: #9ca19d;
  --text-7: #969c97;
  --text-8: #8b918c;
  --text-9: #898f8a;
  --text-10: #858b86;
  --text-11: #7f8580;
  --text-12: #777d78;
  --text-13: #717872;
  --text-14: #6e746f;
  --text-15: #6c726e;
  --text-17: #686e6a;
  --veil: rgba(255, 255, 255, .04);
  --veil-soft: rgba(255, 255, 255, .018);
  --veil-strong: rgba(255, 255, 255, .08);
  --shadow-hero: rgba(0, 0, 0, .44);
  --shadow-frame: rgba(0, 0, 0, .36);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface);
  color: var(--text);
  font-family: Atkinson, Arial, sans-serif;
  font-size: 16px;
}
a { color: inherit; text-decoration: none; }
button, a { outline-offset: 4px; }
.skip-link {
  position: fixed;
  z-index: 30;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: 10px 14px;
  background: var(--acid);
  color: #11150e;
}
.skip-link:focus { transform: none; }

.topbar {
  position: relative;
  z-index: 10;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(22px, 5vw, 76px);
  border-bottom: 1px solid var(--line-soft);
  background: var(--topbar);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { object-fit: contain; }
.brand strong { font-size: 22px; letter-spacing: -.04em; }
.brand strong span { color: var(--acid-ink); }
.brand small {
  margin-left: 4px;
  border: 1px solid var(--line-brand);
  border-radius: 30px;
  padding: 3px 6px;
  color: var(--text-12);
  font-size: 8px;
  letter-spacing: .12em;
}
.topbar nav { display: flex; align-items: center; margin-left: auto; gap: 28px; color: var(--text-6); font-size: 12px; }
.topbar nav a:hover { color: var(--text); }
.topbar .nav-download { border: 1px solid var(--line-acid); padding: 10px 14px; color: var(--acid-ink); }
.theme-switch {
  margin-left: 22px;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}
.switch-track {
  position: relative;
  display: block;
  width: 56px;
  height: 30px;
  border: 1px solid var(--line-brand);
  border-radius: 30px;
  background: var(--raised);
  transition: background .3s ease, border-color .3s ease;
}
.theme-switch:hover .switch-track { border-color: var(--line-hover); }
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 1px 4px var(--shadow-frame);
  color: #11150e;
  /* A short spring: the knob barely overshoots before settling. */
  transition: transform .34s cubic-bezier(.34, 1.4, .5, 1), background .3s ease;
}
.switch-knob svg { grid-area: 1 / 1; width: 13px; height: 13px; transition: opacity .22s ease, transform .34s ease; }
/* Day: the knob sits on the left and the sun turns in place; at night the moon takes over. */
[data-glyph="moon"] { opacity: 0; transform: rotate(-70deg) scale(.6); }
.theme-switch[aria-checked="true"] .switch-knob { transform: translateX(26px); background: var(--paper); }
.theme-switch[aria-checked="true"] [data-glyph="sun"] { opacity: 0; transform: rotate(70deg) scale(.6); }
.theme-switch[aria-checked="true"] [data-glyph="moon"] { opacity: 1; transform: rotate(0) scale(1); }
.theme-switch:active .switch-knob { width: 26px; }
/* The fade is armed only during the flip, so hovers stay light the rest of the time.
   The knob keeps its own animation: it slides, it does not fade. */
html.theme-switching *:not(.switch-knob):not(.switch-knob *) {
  transition-property: background-color, border-color, color, fill, box-shadow !important;
  transition-duration: .32s !important;
  transition-timing-function: ease !important;
}

.hero {
  min-height: 740px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, .78fr) minmax(650px, 1.22fr);
  align-items: center;
  gap: clamp(30px, 4vw, 70px);
  padding: 64px clamp(24px, 7vw, 112px) 72px;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 76% 38%, rgba(185, 245, 104, .11), transparent 31%),
    repeating-linear-gradient(90deg, transparent 0, transparent 79px, var(--veil-soft) 80px),
    linear-gradient(145deg, var(--hero-a), var(--hero-b) 72%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, var(--veil) 4px);
}
.hero::after {
  content: "IRC / TLS / HLS / MACOS /";
  position: absolute;
  left: 0;
  bottom: 17px;
  color: var(--veil-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .52em;
  white-space: nowrap;
}
.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 570px;
  padding-bottom: 24px;
}
.eyebrow { margin: 0; color: var(--text-11); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.eyebrow i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 5px rgba(185, 245, 104, .07);
}
h1 {
  max-width: 760px;
  margin: 24px 0 28px;
  font-size: clamp(58px, 6.3vw, 96px);
  line-height: .9;
  letter-spacing: -.065em;
}
h1 span { color: var(--text-5); font-weight: 400; }
.lead { max-width: 555px; margin: 0; color: var(--text-4); font-size: 18px; line-height: 1.58; }
.hero-actions { display: flex; gap: 10px; margin-top: 36px; }
.button {
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--acid); color: #11150e; }
.button.primary:hover { background: #c9ff84; }
.os-sprite { position: absolute; width: 0; height: 0; }
.notfound {
  min-height: calc(100vh - 171px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 90px clamp(24px, 7vw, 110px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(185, 245, 104, .09), transparent 46%),
    repeating-linear-gradient(90deg, transparent 0, transparent 79px, var(--veil-soft) 80px);
}
.notfound .eyebrow { display: flex; align-items: center; gap: 9px; }
.notfound .eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--acid-ink); }
.notfound-code {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 26px 0 8px;
  font-size: clamp(96px, 17vw, 210px);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .8;
  color: var(--text-5);
}
/* The zero reuses the brand's green dot: the 404 stays a Twichat object. */
.notfound-code b {
  display: grid;
  place-items: center;
  width: .78em;
  height: .78em;
  border-radius: 50%;
  background: var(--acid);
  color: #11150e;
  font-size: .82em;
}
.notfound h1 { margin: 22px 0 0; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -.045em; }
.notfound h1 span { color: var(--text-5); font-weight: 400; }
.notfound .lead { max-width: 480px; margin: 20px 0 0; font-size: 16px; }
.notfound .hero-actions { justify-content: center; margin-top: 34px; }
.button.ghost { border: 1px solid var(--line-button); color: var(--text-3); }
.button.ghost:hover { border-color: var(--line-hover); color: var(--text); }
.platforms {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--text-12);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.os-list { display: flex; align-items: center; gap: 9px; }
.os { width: 15px; height: 15px; fill: var(--text-6); transition: fill .2s ease; }
.platforms:hover .os { fill: var(--text-2); }
.download-band .platforms { margin: 16px 0 0; color: #5c6357; }
.download-band .os { fill: #414b39; }
.download-band .platforms:hover .os { fill: var(--ink); }
.release-note { margin: 10px 0 0; color: var(--text-17); font-size: 9px; letter-spacing: .11em; }
.release-note span { color: var(--acid-ink); }

.hero-visual {
  position: relative;
  z-index: 2;
  justify-self: start;
  width: min(990px, 68vw);
  min-width: 760px;
  margin-right: -15vw;
  filter: drop-shadow(0 45px 55px var(--shadow-hero));
  animation: visual-arrival .8s cubic-bezier(.2, .78, .2, 1) both;
}
.hero-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34px 12% 18% -34px;
  border: 1px solid var(--hero-outline);
}
.hero-window {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-frame);
  background: var(--frame);
  box-shadow: 0 28px 80px var(--shadow-frame);
  transform: rotate(-.45deg);
}
.window-bar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bar);
}
.window-bar span { width: 7px; height: 7px; border: 1px solid var(--line-dot); border-radius: 50%; }
.window-bar b { margin-left: auto; color: var(--text-15); font-size: 8px; letter-spacing: .14em; }
.hero-window img { display: block; width: 100%; height: auto; }
.hero-shot { position: relative; display: block; }
/* On hovering the switch, the other theme covers the screenshot on a diagonal.
   At rest, the clip is folded onto the right edge: nothing sticks out. */
.hero-peek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path .55s cubic-bezier(.32, .75, .2, 1);
}
.hero-window.peeking .hero-peek { clip-path: polygon(62% 0, 100% 0, 100% 100%, 22% 100%); }
/* On click, the diagonal finishes its run and covers the whole screenshot: it is what brings the new theme. */
.hero-window.peek-full .hero-peek { clip-path: polygon(-30% 0, 100% 0, 100% 100%, -70% 100%); transition-duration: .5s; }
/* The fold back after the flip is not animated: both images are identical by then. */
.hero-window.peek-instant .hero-peek { transition: none; }
.visual-index {
  position: absolute;
  z-index: 4;
  top: -62px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--acid-ink);
}
.visual-index > span { font-size: 12px; font-weight: 800; }
.visual-index > i { width: 46px; height: 1px; background: var(--hero-rule); }
.visual-index > small { color: var(--text-13); font-size: 8px; line-height: 1.35; letter-spacing: .14em; }
/* La fenêtre de message privé, posée au coin de la capture principale : elle dit qu'une
   conversation vit à côté du salon, sans manger la capture qu'elle accompagne. */
.hero-dm {
  position: absolute;
  z-index: 5;
  /* Ancrée au bord de l'écran, pas à la capture : celle-ci déborde sur un écran étroit et
     rentre sur un large, ce qui promènerait la fenêtre du bord vers le milieu. */
  right: clamp(18px, 4vw, 72px);
  bottom: 40px;
  width: clamp(250px, 24vw, 340px);
  margin: 0;
  border: 1px solid var(--line-frame);
  background: var(--frame);
  box-shadow: 0 22px 54px var(--shadow-frame);
  transform: rotate(1.2deg);
  overflow: hidden;
}
.hero-dm img { display: block; width: 100%; height: auto; }
/* Sous cette largeur, le badge de la capture et la fenêtre se disputent le même bas de cadre. */
@media (max-width: 1180px) { .hero-dm { display: none; } }

.visual-caption {
  position: absolute;
  z-index: 4;
  /* À gauche : le coin droit revient à la fenêtre de message privé. */
  left: 3%;
  bottom: -36px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border: 1px solid var(--line-acid-2);
  background: var(--acid);
  color: #11150e;
  transform: rotate(.5deg);
}
.visual-caption b { font-size: 23px; letter-spacing: -.04em; }
.visual-caption span { padding-left: 13px; border-left: 1px solid rgba(17, 21, 14, .28); font-size: 8px; font-weight: 800; line-height: 1.3; letter-spacing: .12em; }
@keyframes visual-arrival {
  from { opacity: 0; transform: translate3d(45px, 12px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.product { padding: 110px clamp(24px, 7vw, 110px); background: var(--acid); color: var(--ink); }
.section-heading {
  display: grid;
  grid-template-columns: .65fr 1.35fr 1fr;
  align-items: end;
  gap: 38px;
  margin-bottom: 55px;
}
.section-heading h2, .download-band h2 { margin: 0; font-size: clamp(42px, 5vw, 72px); line-height: .94; letter-spacing: -.055em; }
.section-heading > p:last-child { margin: 0; color: #44503a; font-size: 15px; line-height: 1.6; }
.product .eyebrow { color: #4c593f; }
.experience-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(17, 19, 19, .35); }
.experience-grid article {
  min-height: 235px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  padding: 30px 30px 30px 0;
  border-right: 1px solid rgba(17, 19, 19, .25);
}
.experience-grid article + article { padding-left: 30px; }
.experience-grid article:last-child { border-right: 0; }
.experience-number { font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.experience-grid h3 { max-width: 240px; margin: 48px 0 12px; font-size: 24px; line-height: 1.05; letter-spacing: -.035em; }
.experience-grid p { max-width: 310px; margin: 0; color: #47513f; font-size: 14px; line-height: 1.55; }

.why {
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(620px, 1.22fr);
  gap: clamp(55px, 8vw, 135px);
  padding: 118px clamp(24px, 7vw, 110px);
  background: var(--paper);
  color: var(--ink);
}
.why-intro { align-self: center; }
.why .eyebrow { color: #637055; }
.why h2, .faq h2 {
  margin: 22px 0 28px;
  font-size: clamp(46px, 5vw, 74px);
  line-height: .92;
  letter-spacing: -.06em;
}
.why h2 span { color: #71766e; font-weight: 400; }
.why-intro > p:not(.eyebrow) {
  max-width: 540px;
  margin: 0;
  color: #5c615a;
  font-size: 16px;
  line-height: 1.65;
}
.why-intro > p:not(.eyebrow) + p { margin-top: 18px; font-size: 15px; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #a4a69d; }
.comparison article { min-height: 430px; display: flex; flex-direction: column; padding: 32px; background: var(--ink); color: var(--on-ink); }
.comparison article > span { font-size: 9px; font-weight: 800; letter-spacing: .16em; color: var(--acid); }
.comparison h3 { max-width: 280px; margin: 90px 0 30px; font-size: 30px; line-height: 1.02; letter-spacing: -.045em; }
.comparison ul { display: grid; gap: 15px; margin: auto 0 0; padding: 0; list-style: none; }
.comparison li { position: relative; padding: 0 0 0 18px; color: #a9aea8; font-size: 13px; line-height: 1.45; }
.comparison li::before { content: "·"; position: absolute; left: 0; color: var(--acid); font-weight: 800; }
.layout-chat { border-left: 1px solid #4a514d; }

.principles {
  padding: 105px clamp(24px, 7vw, 110px);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.principles .section-heading h2 { color: var(--text); }
.section-heading.compact { grid-template-columns: .65fr 2.35fr; margin-bottom: 48px; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.principle-grid article { min-height: 250px; padding: 30px; border-right: 1px solid var(--line); background: var(--card); }
.principle-grid article:last-child { border-right: 0; }
.principle-grid article > span { color: var(--acid-ink); font-size: 9px; letter-spacing: .16em; }
.principle-grid h3 { margin: 56px 0 12px; font-size: 23px; letter-spacing: -.025em; }
.principle-grid p { margin: 0; color: var(--text-10); font-size: 13px; line-height: 1.55; }

.faq {
  display: grid;
  grid-template-columns: minmax(300px, .75fr) minmax(580px, 1.25fr);
  gap: clamp(55px, 9vw, 145px);
  padding: 115px clamp(24px, 7vw, 110px);
  background: var(--card-alt);
}
.faq-heading { align-self: start; position: sticky; top: 36px; }
.faq-heading .eyebrow { color: var(--acid-ink); }
.faq-heading > p {
  max-width: 470px;
  margin: 0;
  color: var(--text-9);
  font-size: 14px;
  line-height: 1.6;
}
.faq-list { border-top: 1px solid var(--line-faq); }
.faq details { border-bottom: 1px solid var(--line-faq); }
.faq summary {
  position: relative;
  cursor: pointer;
  padding: 27px 54px 27px 0;
  color: var(--text-2);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.025em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 22px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-marker);
  color: var(--acid);
  font-size: 17px;
  font-weight: 400;
  transition: transform .18s ease, background .18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--acid); color: var(--ink); }
.faq details p { max-width: 680px; margin: -4px 60px 28px 0; color: var(--text-7); font-size: 15px; line-height: 1.65; }
.faq details[open] p { animation: answer-in .22s ease both; }
@keyframes answer-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.download-band {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  align-items: end;
  gap: 50px;
  padding: 100px clamp(24px, 8vw, 130px);
  background: var(--paper);
  color: var(--ink);
}
.download-band .eyebrow { margin-bottom: 14px; color: #556448; }
.button.large { min-height: 54px; width: 100%; font-size: 14px; }
.download-band .button.primary { background: var(--ink); color: var(--acid); }
.download-band .button.primary:hover { background: #252928; }
.download-band > div:last-child p { margin: 12px 0 0; color: #696d66; font-size: 10px; line-height: 1.45; }

footer { min-height: 95px; display: flex; align-items: center; gap: 35px; padding: 20px clamp(24px, 5vw, 76px); color: var(--text-14); font-size: 10px; }
footer p { margin: 0; }
footer > span { margin-left: auto; letter-spacing: .12em; }
footer > span i { display: inline-block; width: 4px; height: 4px; margin: 0 8px; border-radius: 50%; background: var(--acid-ink); }
.footer-brand strong { font-size: 17px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-nav a { padding: 8px 0; color: var(--text-8); }
.footer-nav a:hover { color: var(--acid-ink); }

@media (max-width: 1120px) {
  .why, .faq { grid-template-columns: 1fr; }
  .faq-heading { position: static; }
  .hero { grid-template-columns: minmax(380px, .72fr) minmax(560px, 1fr); padding-left: 48px; padding-right: 48px; }
  .hero-visual { width: 820px; min-width: 820px; margin-right: -260px; }
  h1 { font-size: clamp(58px, 7vw, 80px); }
}

@media (max-width: 900px) {
  .topbar nav a:not(.nav-download) { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 90px; padding: 80px 34px 100px; }
  .hero-copy { max-width: 680px; padding: 0; }
  .hero-visual { width: calc(100% + 90px); min-width: 0; margin: 0 -90px 0 0; }
  .visual-index { top: -48px; left: 0; }
  
.visual-caption { left: auto; right: 25px; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading h2 { margin-top: 14px; }
  .experience-grid, .principle-grid { grid-template-columns: 1fr; }
  .experience-grid article { min-height: 175px; padding: 25px 0; border-right: 0; border-bottom: 1px solid rgba(17, 19, 19, .25); }
  .experience-grid article + article { padding-left: 0; }
  .experience-grid article:last-child { border-bottom: 0; }
  .experience-grid h3 { margin-top: 24px; }
  .principle-grid article { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }
  .principle-grid article:last-child { border-bottom: 0; }
  .principle-grid h3 { margin-top: 36px; }
  .why, .faq { grid-template-columns: 1fr; }
  .comparison article { min-height: 330px; }
  .comparison h3 { margin-top: 55px; }
  .faq-heading { position: static; }
  .download-band { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 560px) {
  .topbar { height: 66px; }
  .topbar nav { gap: 0; }
  .topbar .nav-download { padding: 14px 12px; }
  .theme-switch { margin-left: 12px; }
  .brand small { display: none; }
  .hero { gap: 70px; padding: 66px 22px 82px; }
  .hero h1 { font-size: clamp(48px, 14vw, 58px); }
  .lead { font-size: 16px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-visual { width: calc(100% + 22px); margin-right: -22px; }
  .hero-window { height: 430px; }
  .hero-window img { width: 645px; max-width: none; }
  .window-bar b { display: none; }
  .visual-index { display: none; }
  
.visual-caption { left: auto; right: 12px; bottom: -28px; padding: 10px 13px; }
  .visual-caption b { font-size: 19px; }
  .product, .why, .principles, .faq { padding: 72px 20px; }
  .section-heading { margin-bottom: 34px; }
  .section-heading h2, .download-band h2 { font-size: 43px; }
  .section-heading > p:last-child { font-size: 14px; }
  .eyebrow { font-size: 11px; }
  .comparison article > span, .principle-grid article > span { font-size: 10px; }
  .experience-number { font-size: 12px; }
  .download-band > div:last-child p { font-size: 13px; }
  .experience-grid article { grid-template-columns: 34px 1fr; gap: 10px; }
  .comparison { grid-template-columns: 1fr; }
  .layout-chat { border-left: 0; border-top: 1px solid #4a514d; }
  .comparison article { min-height: 285px; padding: 25px; }
  .comparison h3 { margin: 42px 0 24px; font-size: 27px; }
  .why h2, .faq h2 { font-size: 45px; }
  .faq { gap: 42px; }
  .faq summary { padding: 23px 48px 23px 0; font-size: 18px; }
  .faq summary::after { top: 18px; }
  .faq details p { margin-right: 8px; font-size: 14px; }
  .principle-grid article { padding: 24px; }
  .download-band { padding: 72px 22px; }
  footer { align-items: flex-start; flex-direction: column; gap: 15px; padding-bottom: 30px; font-size: 12px; }
  footer > span { margin-left: 0; }
  .footer-nav { gap: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-visual { animation: none; }
  .button, .switch-track, .switch-knob, .switch-knob svg, .hero-peek { transition: none; }
  html.theme-switching *:not(.switch-knob):not(.switch-knob *) { transition-duration: 0s !important; }
}

/* The light theme: the green and paper bands do not move, they are light by construction.
   The `:not([data-theme=dark])` guard lets the explicit setting win over the system one. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) { 
    color-scheme: light;
    --acid-ink: #3f6b18;
    --hero-outline: rgba(17, 19, 19, .32);
    --hero-rule: rgba(17, 19, 19, .45);
    --surface: #f2f5f6;
    --surface-raised: #ffffff;
    --line: #d5dad9;
    --text: #191c1b;
    --muted: #5d625e;
    --frame: #e9edee;
    --hero-a: #f7f9f9;
    --hero-b: #eceff0;
    --bar: #eaeeee;
    --card: #ffffff;
    --card-alt: #f7f9f9;
    --raised: #ffffff;
    --topbar: rgba(242, 245, 246, .96);
    --line-soft: #dde1e1;
    --line-faq: #dfe3e3;
    --line-brand: #cdd2d1;
    --line-button: #ccd1d0;
    --line-marker: #c5cbc8;
    --line-frame: #b7bfba;
    --line-dot: #bcc2be;
    --line-acid: #7f9268;
    --line-acid-2: #93a487;
    --line-hover: #a4aba7;
    --text-2: #232726;
    --text-3: #2f3432;
    --text-4: #383d3b;
    --text-5: #3e4341;
    --text-6: #464b49;
    --text-7: #4b504e;
    --text-8: #4f5452;
    --text-9: #545956;
    --text-10: #585d5a;
    --text-11: #5e635f;
    --text-12: #626763;
    --text-13: #656a66;
    --text-14: #676c68;
    --text-15: #696e6a;
    --text-17: #6b706c;
    --veil: rgba(17, 19, 19, .05);
    --veil-soft: rgba(17, 19, 19, .028);
    --veil-strong: rgba(17, 19, 19, .10);
    --shadow-hero: rgba(31, 38, 33, .22);
    --shadow-frame: rgba(31, 38, 33, .15);
   }
}
:root[data-theme=light] { 
  color-scheme: light;
  --acid-ink: #3f6b18;
  --hero-outline: rgba(17, 19, 19, .32);
  --hero-rule: rgba(17, 19, 19, .45);
  --surface: #f2f5f6;
  --surface-raised: #ffffff;
  --line: #d5dad9;
  --text: #191c1b;
  --muted: #5d625e;
  --frame: #e9edee;
  --hero-a: #f7f9f9;
  --hero-b: #eceff0;
  --bar: #eaeeee;
  --card: #ffffff;
  --card-alt: #f7f9f9;
  --raised: #ffffff;
  --topbar: rgba(242, 245, 246, .96);
  --line-soft: #dde1e1;
  --line-faq: #dfe3e3;
  --line-brand: #cdd2d1;
  --line-button: #ccd1d0;
  --line-marker: #c5cbc8;
  --line-frame: #b7bfba;
  --line-dot: #bcc2be;
  --line-acid: #7f9268;
  --line-acid-2: #93a487;
  --line-hover: #a4aba7;
  --text-2: #232726;
  --text-3: #2f3432;
  --text-4: #383d3b;
  --text-5: #3e4341;
  --text-6: #464b49;
  --text-7: #4b504e;
  --text-8: #4f5452;
  --text-9: #545956;
  --text-10: #585d5a;
  --text-11: #5e635f;
  --text-12: #626763;
  --text-13: #656a66;
  --text-14: #676c68;
  --text-15: #696e6a;
  --text-17: #6b706c;
  --veil: rgba(17, 19, 19, .05);
  --veil-soft: rgba(17, 19, 19, .028);
  --veil-strong: rgba(17, 19, 19, .10);
  --shadow-hero: rgba(31, 38, 33, .22);
  --shadow-frame: rgba(31, 38, 33, .15);
   }

/* The logo swaps its black and its green on a light background, as it does in the app. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) .brand img { content: url(/assets/twichat-logo-light.png?v=fad20a1baa704be3); }
}
:root[data-theme=light] .brand img { content: url(/assets/twichat-logo-light.png?v=fad20a1baa704be3); }

/* The language switcher, next to the theme toggle and built like it: a rounded track, two
   segments, the one of the current page sitting on the raised background. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 22px;
  padding: 2px;
  border: 1px solid var(--line-brand);
  border-radius: 30px;
  background: var(--bar);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.lang-switch span,
.lang-switch a {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 30px;
  color: var(--text-12);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}
.lang-switch [aria-current] {
  background: var(--raised);
  color: var(--text);
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a:focus-visible { outline: 2px solid var(--acid-ink); outline-offset: 2px; }

/* A banner at the bottom, never a panel over the content: an interstitial on arrival
   is penalized on mobile, and this page is the one that is indexed. */
.lang-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--line-brand);
  border-radius: 30px;
  background: var(--raised);
  box-shadow: 0 10px 30px var(--shadow-frame);
  font-size: 13px;
}
.lang-banner[hidden] { display: none; }
.lang-banner-action {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--acid-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.lang-banner button {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 30px;
  background: transparent;
  color: var(--text-6);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.lang-banner button:hover { background: var(--surface); color: var(--text); }

@media (max-width: 900px) {
  .lang-switch { margin-left: 12px; }
}
/* The top bar is full at this width: the switcher tightens so the theme toggle keeps its
   right margin. */
@media (max-width: 560px) {
  .lang-switch { margin-left: 8px; font-size: 10px; letter-spacing: .06em; }
  .lang-switch span,
  .lang-switch a { padding: 0 7px; }
  /* The hero repeats the stage two lines below; the badge is what the bar can give up. */
  .brand small { display: none; }
  .topbar { padding: 0 14px; }
}
@media (max-width: 520px) {
  .lang-banner { left: 12px; right: 12px; transform: none; max-width: none; }
}

/* Split download button: the main click takes the detected build,
   the arrow opens the list to force another format (the User-Agent does not
   name the Linux distribution, so deb and rpm are both offered). */
.download-split { position: relative; display: inline-flex; }
.download-split > .button { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.download-split-toggle {
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  border-left: 1px solid rgba(17, 21, 14, .22);
  border-radius: 0 3px 3px 0;
  background: var(--acid);
  color: #11150e;
  cursor: pointer;
  transition: background .18s ease;
}
.download-split-toggle:hover { background: #c9ff84; }
.download-split-toggle svg { transition: transform .18s ease; }
.download-split-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.download-split-toggle.large { min-height: 54px; }

.download-band .download-split { width: 100%; }
.download-band .download-split > .button { flex: 1; width: auto; }
.download-band .download-split-toggle { background: var(--ink); color: var(--acid); border-left-color: rgba(185, 245, 104, .22); }
.download-band .download-split-toggle:hover { background: #252928; }

.download-split-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 212px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}
.download-split-menu[hidden] { display: none; }
.download-split-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 12px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.download-split-menu a:hover { background: var(--card-alt); }
.download-split-menu a span { color: var(--text-3); font-weight: 500; }
.download-split-menu a[aria-current="true"], .download-split-menu a[aria-current="true"] span { color: var(--acid); }

.github-cta { gap: 8px; }
.github-cta svg { flex: none; }

/* The band repeats the hero's pair: the split button, and the source next to it. The ghost
   variant is redrawn here because its own colors are meant for the dark page, not this one. */
.download-actions { display: flex; gap: 10px; align-items: stretch; }
.download-actions .download-split { flex: 1; width: auto; }
.download-band .button.ghost { border-color: rgba(17, 19, 19, .3); color: #2c331f; }
.download-band .button.ghost:hover { border-color: var(--ink); color: var(--ink); }
.download-actions .button.ghost.large { flex: none; width: auto; }
@media (max-width: 560px) {
  .download-actions { flex-direction: column; }
  .download-actions .button.ghost.large { width: 100%; }
}

/* A filmstrip of actual app captures, with enough of the next frame to invite a swipe. */
.preview-link { display: inline-flex; align-items: center; gap: 22px; margin-top: 22px; font-size: 14px; color: var(--text-3); text-decoration: underline; text-underline-offset: 5px; }
.preview-link:hover { color: var(--acid-ink); }
.screenshots { padding: 72px 0 56px; border-bottom: 1px solid var(--line); background: var(--surface); }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding: 0 clamp(22px, 7vw, 112px); margin-bottom: 32px; }
.gallery-heading .eyebrow { color: var(--acid-ink); }
.gallery-heading h2 { margin: 12px 0 0; font-size: clamp(32px, 3.5vw, 52px); line-height: 1.05; letter-spacing: -.045em; }
.gallery-aside { display: flex; align-items: end; gap: 28px; }
.gallery-aside p { max-width: 280px; margin: 0; color: var(--text-4); font-size: 14px; line-height: 1.5; }
.gallery-controls, .lightbox-navigation { display: flex; align-items: center; gap: 8px; flex: none; }
.gallery-controls[hidden] { display: none; }
.gallery-arrow { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--line-frame); border-radius: 50%; background: transparent; color: var(--text); font: 22px Atkinson, sans-serif; cursor: pointer; transition: background .18s, color .18s; }
.gallery-arrow:hover:not(:disabled) { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.gallery-arrow:disabled { opacity: .3; cursor: default; }
.screenshot-strip { display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(22px, 7vw, 112px); padding: 4px clamp(22px, 7vw, 112px) 22px; margin: 0; list-style: none; scrollbar-width: thin; scrollbar-color: var(--line-frame) var(--surface); }
.screenshot-card { flex: 0 0 clamp(300px, 36vw, 580px); min-width: 0; scroll-snap-align: start; }
.screenshot-link { display: block; }
.screenshot-frame { position: relative; overflow: hidden; border: 1px solid var(--line-frame); border-radius: 5px; background: var(--frame); transition: border-color .2s, transform .2s; }
.screenshot-frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.screenshot-expand { position: absolute; display: grid; place-items: center; right: 12px; bottom: 12px; width: 36px; height: 36px; border: 1px solid #69716c; border-radius: 50%; background: #151718; color: #ecece6; font-size: 22px; }
.screenshot-link:hover .screenshot-frame { border-color: var(--acid-ink); transform: translateY(-3px); }
.screenshot-link:hover .screenshot-expand, .screenshot-link:focus-visible .screenshot-expand { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.screenshot-link:focus-visible, .gallery-arrow:focus-visible, .lightbox-zoom:focus-visible, .screenshot-strip:focus-visible, .lightbox-stage:focus-visible { outline: 2px solid var(--acid-ink); outline-offset: 4px; }
.screenshot-caption { display: flex; align-items: center; gap: 12px; padding-top: 16px; }
.screenshot-number { color: var(--text-7); font-size: 12px; font-variant-numeric: tabular-nums; }
.screenshot-caption h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
html.lightbox-open { overflow: hidden; scrollbar-gutter: stable; }
.lightbox { position: fixed; inset: 0; width: calc(100% - 40px); max-width: 1600px; height: calc(100% - 40px); height: calc(100dvh - 40px); max-height: none; margin: auto; padding: 0 20px; overflow: hidden; border: 1px solid var(--line-frame); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 24px 100px #0008; }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: rgba(5, 8, 7, .9); backdrop-filter: blur(8px); }
.lightbox-toolbar { display: flex; align-items: center; gap: 20px; min-height: 76px; flex: none; }
.lightbox-brand { font-size: 22px; font-weight: 800; letter-spacing: -.05em; }
.lightbox-brand span { color: var(--acid-ink); }
.lightbox-toolbar p { margin: 0; color: var(--text-4); font-size: 14px; }
.lightbox-zoom { margin-left: auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-frame); border-radius: 4px; background: var(--raised); color: var(--text); font: 14px Atkinson, sans-serif; cursor: pointer; }
.lightbox-zoom:hover { border-color: var(--acid-ink); }
.lightbox-stage { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; border-radius: 3px; background: var(--frame); }
.lightbox-image { display: block; flex: none; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.lightbox-stage.is-zoomed { display: block; }
.lightbox-stage.is-zoomed .lightbox-image { width: max(100%, 1320px); max-width: none; max-height: none; cursor: zoom-out; }
.lightbox-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 80px; flex: none; }
.lightbox-caption { font-size: 16px; }
.lightbox-count { min-width: 48px; text-align: center; color: var(--text-4); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .gallery-heading { align-items: start; flex-direction: column; gap: 20px; }
  .gallery-aside { justify-content: space-between; width: 100%; }
  .gallery-aside p { max-width: 440px; }
  .screenshot-card { flex-basis: 64vw; }
  .hero-visual { width: 100%; margin-right: 0; }
}
@media (max-width: 560px) {
  .screenshots { padding-top: 44px; padding-bottom: 32px; }
  .gallery-heading { gap: 16px; margin-bottom: 24px; }
  .gallery-aside { gap: 16px; }
  .gallery-aside p { font-size: 13px; }
  .screenshot-strip { gap: 16px; }
  .screenshot-card { flex-basis: 85vw; }
  .screenshot-caption { gap: 8px; }
  .screenshot-caption h3 { font-size: 14px; }
  .hero-window { height: auto; }
  .hero-window img { width: 100%; max-width: 100%; }
  .hero-visual::before { inset: -16px 12% 18% -12px; }
  .hero-actions .download-split > .button { flex: 1; }
  .lightbox { width: 100%; height: 100%; height: 100dvh; padding: 0 12px; border: 0; border-radius: 0; }
  .lightbox-toolbar { gap: 12px; min-height: 68px; }
  .lightbox-toolbar p { display: none; }
  .lightbox-footer { gap: 12px; min-height: 88px; }
  .lightbox-caption { font-size: 14px; }
  .lightbox-navigation { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .screenshot-frame, .gallery-arrow { transition: none; }
}
@media (max-width: 380px) {
  .topbar .brand strong { display: none; }
}

/* Shown only on a phone, in place of the buttons: the same room in the layout, said plainly. */
.download-mobile { margin: 0; max-width: 34ch; color: var(--text-3); font-size: 13px; line-height: 1.5; }
.download-band .download-mobile { color: #3f4736; }
.download-mobile[hidden] { display: none; }

/* The support block. Each card is one paper tile, so the code sits on the card's own ground
   instead of on a plate inside it, and the modules stay dark on light: the polarity every
   scanner was built for. The card is not the button; the button is. */
.donate { padding: 96px 22px 104px; border-top: 1px solid var(--line); }
.donate > * { max-width: 1040px; margin-left: auto; margin-right: auto; }
.donate .eyebrow { margin-left: auto; margin-right: auto; }
.donate h2 { margin: 10px auto 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.02; letter-spacing: -.04em; }
.donate-list { list-style: none; margin: 34px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.donate-card {
  display: grid; justify-items: center; gap: 12px; padding: 22px 20px 20px;
  border-radius: 4px; background: var(--paper); color: #1b1e17;
}
.donate-qr { display: block; width: 100%; height: auto; max-width: 190px; }
.donate-name { display: flex; align-items: center; gap: 9px; margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.donate-name em { font-style: normal; font-weight: 400; letter-spacing: .1em; color: #6a6f60; }
.donate-mark { display: block; width: 20px; height: 20px; border-radius: 50%; }
.donate-card code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.5; color: #5d6355; word-break: break-all; text-align: center; }
.donate-copy {
  width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid #c3bfae; border-radius: 3px;
  background: transparent; color: #1b1e17; font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.donate-copy:hover { background: var(--ink); border-color: var(--ink); color: var(--acid); }
.donate-status { margin: 16px auto 0; min-height: 1.2em; color: var(--acid-ink); font-size: 12px; }
@media (max-width: 900px) { .donate-list { grid-template-columns: 1fr; max-width: 360px; } }
@media (max-width: 560px) { .donate { padding: 64px 22px 72px; } }

/* The hero screenshot bleeds past the hero's right edge on purpose, and the hero clipped it
   itself. That clip also cut any menu opened near its bottom edge, so it moves up to the page:
   the bleed still stops at the viewport, and nothing inside the hero is cropped any more. */
html { overflow-x: hidden; }

/* Six Linux packages read as six choices when they are two machines, each in three formats. */
/* Padding, weight and alignment are copied from the single rows above, so a group reads as one
   more row and not as a different kind of thing. The format links carry their own padding for a
   comfortable target, and cancel it in margin so it never lengthens the row. */
.download-group { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 12px; }
.download-group-label { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.download-group-formats { display: flex; gap: 2px; margin-right: -7px; }
.download-split-menu .download-group-formats a {
  padding: 3px 7px; margin: -3px 0; border-radius: 3px; font-size: 11px; font-weight: 500; color: var(--text-3);
}
.download-split-menu .download-group-formats a:hover { background: var(--card-alt); color: var(--text); }

/* Guides share the app's type and palette, with a quieter reading layout. */
.resource-links { display: flex; flex-wrap: wrap; gap: 12px 24px; line-height: 1.65; }
.resource-links a { text-decoration: underline; text-underline-offset: 4px; }
.site-resources { padding: 40px max(24px, calc((100vw - 1240px) / 2)); border-top: 1px solid var(--line); }
.site-resources > p { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.learning-section { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 80px; padding: 80px max(24px, calc((100vw - 1240px) / 2)); border-top: 1px solid var(--line); }
.learning-section h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; line-height: 1.12; margin: 20px 0; }
.learning-section p:not(.eyebrow) { color: var(--text-3); line-height: 1.7; max-width: 580px; }
.learning-link { display: inline-block; margin-top: 18px; text-decoration: underline; text-underline-offset: 5px; line-height: 1.7; }
.learning-install h3 { font-size: 22px; margin: 0; }
.learning-install > a { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .learning-section { grid-template-columns: 1fr; gap: 44px; padding: 48px 22px; } }