@property --bite {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --s {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

:root {
  --sun-1: #ffd84a;
  --sun-2: #eead00;
  --rim: 156 100 0;
  --shadow: 107 66 0;
  --umber: #5a3700;
  --ink: #1a1d21;
  --ground: #121417;
  --text: #f2f3f5;
  --text-2: #aab1bb;
  --accent: #f0b000;
  --accent-text: #8a5a00;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

:root:lang(zh) {
  --font: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --display: var(--font);
}

:root:lang(ja) {
  --font: "Yu Gothic UI", "Meiryo UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --display: var(--font);
}

:root:lang(ko) {
  --font: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --display: var(--font);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  scrollbar-color: #3a3f47 var(--ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sun-1); color: var(--ink); }
.yellow ::selection { background: var(--ink); color: var(--sun-1); }

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:is(:lang(de), :lang(ru), :lang(uk), :lang(pl)) :is(h1, h2, h3) { hyphens: auto; }
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
:lang(ko) { word-break: keep-all; }

:focus-visible {
  outline: 3px solid var(--sun-1);
  outline-offset: 3px;
}

.yellow :focus-visible { outline-color: var(--ink); }

code {
  padding: .1em .4em;
  border-radius: 6px;
  font: .88em/1.5 var(--mono);
  background: rgb(255 255 255 / .08);
  overflow-wrap: anywhere;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.9em;
  height: 1.8em;
  margin: 0 .1em;
  padding: 0 .45em;
  border-radius: .42em;
  font: 600 .8em/1 var(--font);
  vertical-align: .1em;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(#41464f, #1d2024);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 2px 0 #0b0c0e;
}

.features kbd, .install kbd, .faq kbd {
  background: linear-gradient(#4f555e, #2a2e34);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 2px 0 #0b0c0e, 0 0 0 1px rgb(255 255 255 / .05);
}

.i {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.i .fill { fill: currentColor; stroke: none; }

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

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--sun-1);
}

.skip:focus { top: 16px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 54px;
  padding: 0 1.5em;
  border-radius: 999px;
  font: 600 1.0625rem/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  transition: translate .25s var(--ease), box-shadow .25s var(--ease);
}

.btn:hover { translate: 0 -2px; }
.btn:active { translate: 0 1px; }

.btn.steel {
  color: #fff;
  background: linear-gradient(#3a3f47, #1a1d21);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 12px 24px -8px rgb(var(--shadow) / .6);
}

.btn.steel:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 18px 32px -8px rgb(var(--shadow) / .65); }

.btn.sun {
  color: var(--ink);
  background: linear-gradient(var(--sun-1), var(--sun-2));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -2px 0 rgb(var(--rim) / .35);
}

.btn.small { min-height: 42px; padding: 0 1.15em; font-size: .9375rem; }

.btn.outline { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.outline:hover { background: rgb(26 29 33 / .07); }

.get { position: relative; }
.get[open] { z-index: 20; }
.get summary { cursor: pointer; list-style: none; }
.get summary::-webkit-details-marker { display: none; }
.get summary .i:last-child { width: 1em; height: 1em; margin-left: -.2em; transition: rotate .25s var(--ease); }
.get[open] summary .i:last-child { rotate: 180deg; }

.get-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  display: grid;
  grid-template-columns: repeat(2, minmax(10.5rem, auto));
  gap: 4px;
  padding: 8px;
  border-radius: 20px;
  text-align: left;
  background: #1d2024;
  box-shadow: 0 28px 56px -16px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08);
}
.get-menu div { display: grid; align-content: start; gap: 2px; }
.get-menu b { padding: 8px 12px 6px; font-size: .8125rem; font-weight: 600; color: var(--sun-1); }
.get-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .9375rem;
  font-weight: 500;
  color: #e7e9ec;
  text-decoration: none;
}
.get-menu a:hover { color: #fff; background: rgb(255 255 255 / .07); }
.get-menu div:last-child a:first-of-type {
  color: var(--ink);
  background: linear-gradient(var(--sun-1), var(--sun-2));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55);
}
.nav .get-menu { left: auto; right: 0; }
/* The tile clips what overflows it, and the outro's button sits near its bottom. */
.outro .get-menu { top: auto; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; }

.nav {
  position: sticky;
  top: 12px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(1200px, 100% - 24px);
  margin: 12px auto;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: rgb(24 26 30 / .96);
  box-shadow: 0 14px 32px -10px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .07), 0 0 0 1px rgb(255 255 255 / .05);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font: 700 1.0625rem/1 var(--display);
  letter-spacing: -.01em;
  text-decoration: none;
}

.links { display: flex; gap: 2px; }

.links a, .lang summary {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color .2s, background .2s;
}

.links a:hover, .lang summary:hover, .lang[open] summary {
  color: #fff;
  background: rgb(255 255 255 / .07);
}

.lang { position: relative; }

.lang summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
}

.lang summary::-webkit-details-marker { display: none; }
.lang summary .i:last-child { width: 1em; height: 1em; transition: rotate .25s var(--ease); }
.lang[open] summary .i:last-child { rotate: 180deg; }

.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  display: grid;
  grid-template-columns: repeat(2, minmax(9.5rem, 1fr));
  gap: 2px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 18px;
  background: #1d2024;
  box-shadow: 0 28px 56px -16px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08);
}

.lang ul a {
  display: block;
  padding: 9px 14px;
  border-radius: 12px;
  color: var(--text-2);
  text-decoration: none;
}

.lang ul a:hover { color: #fff; background: rgb(255 255 255 / .07); }

.lang ul a[aria-current], .langwall a[aria-current] {
  color: var(--ink);
  background: linear-gradient(var(--sun-1), var(--sun-2));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55);
}

/* 1200px of content plus the 72px max padding on each side, so it lines up with .wrap. */
.tile {
  position: relative;
  width: min(1344px, 100% - 24px);
  margin-inline: auto;
  border-radius: clamp(28px, 4vw, 56px);
  overflow: clip;
}

.yellow {
  color: var(--ink);
  background:
    radial-gradient(90% 70% at 8% 0%, rgb(255 255 255 / .34), transparent 60%),
    linear-gradient(180deg, var(--sun-1), var(--sun-2));
}

/* The logo's rim gradient, as a 2px ring. */
.yellow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(rgb(255 255 255 / .65), rgb(255 255 255 / .08) 45%, rgb(var(--rim) / .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.yellow code { background: rgb(var(--rim) / .14); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(32px, 4.5vw, 72px);
  min-height: min(880px, calc(100svh - 92px));
  padding: clamp(56px, 7vw, 104px) clamp(24px, 5vw, 72px) clamp(40px, 5vw, 72px);
}

.hero h1 {
  font-size: clamp(2.75rem, 5.3vw, 5.5rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
}

:is(:lang(zh), :lang(ja), :lang(ko)) .hero h1 { font-size: clamp(2.3rem, 4.3vw, 4.4rem); line-height: 1.2; letter-spacing: 0; }

.lead {
  max-width: 36ch;
  margin-top: 24px;
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  line-height: 1.55;
  color: var(--umber);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 34px;
}

.meta {
  margin-top: 22px;
  font-size: .9375rem;
  color: var(--umber);
  font-variant-numeric: tabular-nums;
}

.demo { min-width: 0; container-type: inline-size; }

/* Keep every length inside the desk in cqw, or the scene stops scaling as one picture. */
.desk {
  --ball: 15cqw;
  --bx: -1.5cqw;
  --by: -1.5cqw;
  position: relative;
  container-type: inline-size;
  border-radius: 16px;
}

.desk:focus-visible { outline: 3px solid var(--ink); outline-offset: 12px; }

/* Oversized by --pad so the monitors' shadows stay inside the mask. */
.screens {
  --pad: 6cqw;
  margin: calc(var(--pad) * -1);
  padding: var(--pad);
  -webkit-mask-image: radial-gradient(circle at calc(var(--pad) + var(--bx)) calc(var(--pad) + var(--by)), transparent var(--bite), #000 calc(var(--bite) + .5px));
  mask-image: radial-gradient(circle at calc(var(--pad) + var(--bx)) calc(var(--pad) + var(--by)), transparent var(--bite), #000 calc(var(--bite) + .5px));
  transition: --bite .6s var(--ease);
}

.screens.bitten { --bite: calc(var(--ball) * 2 / 3); }

.stage { position: relative; height: 52cqw; }
.desk.hit .stage { animation: jolt .45s ease-out; }

@keyframes jolt {
  20% { translate: .6cqw 0; }
  45% { translate: -.35cqw 0; }
  70% { translate: .15cqw 0; }
}

.monitor {
  position: absolute;
  left: 0;
  top: 0;
  width: 72cqw;
  height: 45cqw;
  padding: 1cqw;
  border-radius: 1.4cqw;
  background: linear-gradient(160deg, #3a3f47, #16181b 60%);
  box-shadow: 0 2.6cqw 3.6cqw -1.2cqw rgb(var(--shadow) / .6), inset 0 .12cqw 0 rgb(255 255 255 / .14);
}

.monitor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 9cqw;
  height: 6cqw;
  translate: -50% 0;
  background: linear-gradient(90deg, #16181b, #4a5058 50%, #16181b);
  clip-path: polygon(40% 0, 60% 0, 66% 80%, 100% 86%, 100% 100%, 0 100%, 0 86%, 34% 80%);
}

.monitor.side {
  left: 75cqw;
  top: 29.375cqw;
  width: 25cqw;
  height: 15.625cqw;
  padding: .5cqw;
  border-radius: .8cqw;
}

.monitor.side::after { width: 5cqw; }

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: .5cqw;
  background:
    radial-gradient(80% 90% at 82% 112%, rgb(255 196 40 / .6), transparent 62%),
    radial-gradient(70% 80% at 8% -24%, rgb(149 156 166 / .45), transparent 60%),
    linear-gradient(165deg, #353a42, #15171a);
}

.side .screen { border-radius: .3cqw; }
.work { flex: 1; }

.taskbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4cqw;
  background: rgb(22 24 28 / .84);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
}

.taskbar .apps { display: flex; gap: .55cqw; }

.taskbar i {
  width: 1.25cqw;
  height: 1.25cqw;
  border-radius: .3cqw;
  background: linear-gradient(#6a717b, #474d55);
}

.taskbar .start {
  background:
    linear-gradient(90deg, transparent 45%, rgb(22 24 28) 45% 55%, transparent 55%),
    linear-gradient(transparent 45%, rgb(22 24 28) 45% 55%, transparent 55%),
    linear-gradient(135deg, #4cc2ff, #0067c0);
}

.taskbar .find { width: 4.2cqw; border-radius: .7cqw; background: rgb(255 255 255 / .14); }
.taskbar .tray { position: absolute; right: .9cqw; display: flex; align-items: center; gap: .6cqw; }
.taskbar .tray img { width: 1.2cqw; height: 1.2cqw; }
.taskbar .tray i { width: 2.4cqw; height: .45cqw; border-radius: .25cqw; background: rgb(255 255 255 / .5); }

.side .taskbar { height: .85cqw; }
.side .taskbar .apps { gap: .22cqw; }
.side .taskbar i { width: .45cqw; height: .45cqw; border-radius: .12cqw; }
.side .taskbar .find { width: 1.5cqw; border-radius: .25cqw; }

.win {
  position: absolute;
  z-index: 2;
  left: 3cqw;
  top: 5cqw;
  width: 35cqw;
  height: 27cqw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(.8cqw * var(--s));
  background: linear-gradient(#fff, #e4e8ee);
  box-shadow: 0 1.4cqw 2.6cqw -.8cqw rgb(0 0 0 / .55), 0 0 0 1px rgb(18 18 18 / .28);
  /* Layout properties, not transform: scaling would stretch the title bar mid-move. */
  transition: left .6s var(--ease), top .6s var(--ease), width .6s var(--ease), height .6s var(--ease), border-radius .3s, --s .6s var(--ease);
}

.win.idle { z-index: 1; left: 33cqw; top: 13cqw; width: 34cqw; height: 24cqw; filter: saturate(.5) brightness(.9); }
.win.active { z-index: 3; }
.win.max { border-radius: 0; }
.win.far { --s: .35; }
.desk.instant .win { transition: none; }

.titlebar {
  display: flex;
  flex: none;
  align-items: center;
  height: calc(2.3cqw * var(--s));
  padding-left: calc(1cqw * var(--s));
  background: linear-gradient(#3a3f47, #1a1d21);
}

.idle .titlebar { background: linear-gradient(#5b616a, #3c4148); }

.titlebar > i {
  width: calc(6cqw * var(--s));
  height: calc(.45cqw * var(--s));
  border-radius: 1cqw;
  background: rgb(201 206 214 / .45);
}

.ctl { display: flex; height: 100%; margin-left: auto; }

.win .ctl .i {
  width: calc(2.4cqw * var(--s));
  height: 100%;
  padding: calc(.65cqw * var(--s));
  stroke: #c9ced6;
  stroke-width: 2;
}

.body {
  display: grid;
  align-content: start;
  gap: calc(.8cqw * var(--s));
  padding: calc(1.3cqw * var(--s));
}

.body i { height: calc(.7cqw * var(--s)); border-radius: 1cqw; background: #d3d8df; }
.body i:nth-child(1) { width: 55%; height: calc(1.1cqw * var(--s)); background: #aeb5bf; }
.body i:nth-child(2) { width: 92%; }
.body i:nth-child(3) { width: 78%; }
.body i.hl { width: 40%; background: #f5c400; }
.body i:nth-child(5) { width: 66%; }

.ghost {
  position: absolute;
  z-index: 2;
  border-radius: .8cqw;
  background: rgb(255 255 255 / .2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6);
  opacity: 0;
  pointer-events: none;
}

.ghost.show { animation: ghost .65s var(--ease); }

@keyframes ghost {
  0% { opacity: 0; scale: .97; }
  25% { opacity: 1; scale: 1; }
  100% { opacity: 0; }
}

.flyout {
  position: absolute;
  z-index: 4;
  left: 36cqw;
  top: 40.4cqw;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .5em .85em .5em .55em;
  border-radius: .8em;
  font-size: max(11px, 1.35cqw);
  white-space: nowrap;
  color: #fff;
  background: rgb(30 32 36 / .95);
  box-shadow: 0 .8em 1.6em -.5em rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .08);
  opacity: 0;
  translate: -50% -80%;
  transition: opacity .25s, translate .45s var(--ease);
  pointer-events: none;
}

.flyout.show { opacity: 1; translate: -50% -100%; }
.flyout kbd { margin: 0; font-size: .85em; background: rgb(255 255 255 / .13); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.flyout b { margin-left: .3em; font-weight: 600; }
.flyout span { color: #c9ced6; font-variant-numeric: tabular-nums; }

.ball {
  --u: calc(var(--ball) / 156);
  position: absolute;
  z-index: 5;
  left: calc(var(--bx) - 817 * var(--u));
  top: calc(var(--by) - 2088 * var(--u));
  width: calc(895 * var(--u));
  height: calc(2166 * var(--u));
  max-width: none;
  transform-origin: calc(17 * var(--u)) 0;
  filter: drop-shadow(.8cqw 1.5cqw 1.3cqw rgb(90 55 0 / .45));
  pointer-events: none;
  animation: swing 1.6s .35s both;
}

/* Pivots on the far end of the chain, which hangs at the logo's 21deg. 32deg puts the ball past the tile's left
   edge at every width; site.js times the hit from the 62% and 79% stops. */
@keyframes swing {
  0% { rotate: 32deg; animation-timing-function: cubic-bezier(.4, 0, .75, .95); }
  62% { rotate: 0deg; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  76% { rotate: 1.1deg; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  89% { rotate: -.2deg; }
  100% { rotate: 0deg; }
}

.ball .hit { pointer-events: visiblePainted; cursor: pointer; outline: none; }
.ball .ring { fill: none; stroke: var(--ink); stroke-width: 7; opacity: 0; }
.ball .hit:focus-visible .ring { opacity: 1; }
.ball .rider { opacity: 0; transition: opacity .2s; }
.desk.riding .ball .rider { opacity: 1; }

/* Headroom above the ball for the rider. */
@media (min-width: 961px) {
  .desk { margin-top: 6cqw; }
}
.desk.replay .ball { animation: reswing 2.4s both; }

/* Out past the tile's edge, a beat out of sight, then the entrance swing again. */
@keyframes reswing {
  0% { rotate: 0deg; animation-timing-function: cubic-bezier(.3, 0, .5, 1); }
  38% { rotate: 32deg; }
  46% { rotate: 32deg; animation-timing-function: cubic-bezier(.4, 0, .75, .95); }
  79% { rotate: 0deg; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  88% { rotate: 1.1deg; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  95% { rotate: -.2deg; }
  100% { rotate: 0deg; }
}

.keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px clamp(16px, 2vw, 28px);
  margin-top: clamp(22px, 3vw, 40px);
}

.kgroup { display: grid; justify-items: center; gap: 6px; }
.krow { display: flex; gap: 6px; }
.krow.stagger { translate: 14px 0; }

.key {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  font: 600 .875rem/1 var(--font);
  color: #f2f3f5;
  background: linear-gradient(#41464f, #1d2024);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 3px 0 #0b0c0e, 0 9px 16px -6px rgb(var(--shadow) / .6);
  transition: translate .08s, box-shadow .08s, background .25s, color .25s, opacity .25s;
  user-select: none;
  -webkit-user-select: none;
}

button.key { cursor: pointer; }
button.key:hover { background: linear-gradient(#4b515a, #262a2f); }

.key.down, button.key:active {
  translate: 0 2px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 0 #0b0c0e, 0 4px 10px -6px rgb(var(--shadow) / .6);
}

.key.lit, .key[aria-pressed="true"] { color: var(--ink); background: linear-gradient(#fff7cf, #ffe27a); }
.key.mod { min-width: 54px; }
.arrows .key { min-width: 44px; padding: 0; font-size: 1rem; }
.keys.win-on button.key:not([data-a="left"], [data-a="right"], #win-key) { opacity: .4; }

.cap {
  margin-top: 4px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--umber);
}

@container (max-width: 560px) {
  .keys { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; justify-items: center; }
}

.hint {
  margin-top: 20px;
  text-align: center;
  font-size: .9375rem;
  color: var(--umber);
}

.features { padding-block: clamp(88px, 11vw, 152px); }

.head { display: grid; gap: 18px; max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }

.head h2, .install h2, .faq h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #fff;
}

.head p { max-width: 40em; font-size: 1.125rem; color: var(--text-2); }

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.cell {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px 28px;
  border-radius: 28px;
  background: linear-gradient(180deg, #1f2226, #17191c);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 0 0 1px rgb(255 255 255 / .045);
}

.c7 { grid-column: span 7; }
.c5 { grid-column: span 5; }
.cell h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; color: #fff; }
.cell p { font-size: .96875rem; color: var(--text-2); }

.viz {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 176px;
  margin-bottom: 14px;
}

.glyph { flex: none; width: 28px; height: 20px; }
.glyph .frame { fill: currentColor; fill-opacity: .04; stroke: currentColor; stroke-opacity: .5; }
.glyph > rect:not(.frame) { fill: var(--mark, var(--accent)); }
.glyph path { fill: none; stroke: var(--mark, var(--accent)); stroke-linecap: round; stroke-linejoin: round; }
.fluent .glyph path { stroke: var(--accent-line, #d49a00); stroke-width: 1.5; }

.spots {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  gap: 16px 22px;
}

.spot { display: grid; justify-items: center; gap: 9px; }
.spot .glyph { --mark: var(--sun-1); width: 60px; height: 43px; color: #c9ced6; }
.spots .prefix { order: -1; grid-column: 1 / -1; justify-self: center; font-size: .875rem; color: var(--text-2); }

.mini {
  display: block;
  width: 96px;
  aspect-ratio: 16 / 10;
  padding: 5px;
  border-radius: 8px;
  background: linear-gradient(160deg, #353a42, #15171a);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 12px 24px -12px rgb(0 0 0 / .8);
}

.mini i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(var(--sun-1), var(--sun-2));
}

.cycle { gap: 14px; }
.step { display: grid; justify-items: center; gap: 12px; }
.step b { font-size: .9375rem; color: #fff; font-variant-numeric: tabular-nums; }

.monitors { flex-wrap: wrap; gap: 14px; }
.monitors .mini { width: 92px; }
.monitors .mini.wide { width: 124px; }
.monitors .mini i { width: 50%; }
.monitors .mini i.ghosted { background: rgb(255 216 74 / .12); box-shadow: inset 0 0 0 1.5px rgb(255 216 74 / .8); }
.monitors > .i { width: 22px; height: 22px; color: var(--text-2); }
.monitors p { flex-basis: 100%; text-align: center; }

.exact { flex-direction: column; align-items: stretch; gap: 16px; }

.seam {
  position: relative;
  display: flex;
  height: 58px;
  overflow: hidden;
  border-radius: 10px;
  background: repeating-linear-gradient(-45deg, rgb(255 216 74 / .85) 0 3px, rgb(255 216 74 / .2) 3px 7px);
}

.seam.gap { gap: 12px; }
.seam.flush { background: none; }
.seam .pane { position: relative; flex: 1; background: linear-gradient(#fff, #e4e8ee); }
.seam .pane::before { content: ""; position: absolute; inset: 0 0 auto; height: 14px; background: linear-gradient(#3a3f47, #1a1d21); }
.seam.flush .pane + .pane { box-shadow: -1px 0 0 rgb(18 18 18 / .3); }

.seam em {
  position: absolute;
  left: 50%;
  bottom: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  translate: -50% 0;
  font-size: .75rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: var(--ink);
}

.seam.flush em { color: var(--ink); background: var(--sun-1); }
.seam em .i { width: 1.1em; height: 1.1em; stroke-width: 2.2; }

/* Sizes follow the app's Settings window; the yellow is its "Use Wrecktangle colors" mode. */
.fluent {
  --mark: var(--accent);
  --f-text: #1b1b1b;
  --f-2: rgb(0 0 0 / .62);
  --f-line: rgb(0 0 0 / .08);
  color: var(--f-text);
  font-family: var(--font);
  text-align: start;
}

.card {
  border-radius: 6px;
  background: #fbfbfb;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .1);
}

.srow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 3px 8px 3px 14px;
}

.srow + .srow { border-top: 1px solid var(--f-line); }
.srow .glyph { color: var(--f-text); }

.slabel {
  display: grid;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.slabel small { font-size: 11px; color: var(--accent-text); }
.slabel small.warn { color: #b54708; }

.pill {
  display: flex;
  flex: none;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgb(0 0 0 / .04);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14);
}

.fluent kbd {
  min-width: 22px;
  height: auto;
  margin: 0;
  padding: 2px 6px;
  border-radius: 3px;
  font: 600 11px/1.35 var(--font);
  vertical-align: baseline;
  color: var(--f-text);
  background: rgb(0 0 0 / .07);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14);
}

.clear { display: grid; flex: none; place-items: center; width: 24px; height: 24px; color: var(--f-2); }
.clear .i { width: 10px; height: 10px; stroke-width: 1.7; }

.takeover .card { width: min(100%, 380px); box-shadow: 0 0 0 1px rgb(0 0 0 / .1), 0 20px 40px -14px rgb(0 0 0 / .7); }

.langwall {
  flex-wrap: wrap;
  align-content: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.langwall a {
  display: block;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  color: #e7e9ec;
  background: rgb(255 255 255 / .05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
  transition: background .2s;
}

.langwall a:hover { background: rgb(255 255 255 / .1); }

.toast {
  width: min(100%, 360px);
  padding: 14px 16px 16px;
  border-radius: 8px;
  background: #f9f9f9;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 24px 48px -16px rgb(0 0 0 / .75);
}

.toast-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--f-2); }
.toast-head img { width: 16px; height: 16px; }
.toast-head .i { width: 12px; height: 12px; margin-left: auto; }
.toast p { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--f-text); }

.admin { flex-direction: column; gap: 18px; text-align: center; }
.admin .i { width: 68px; height: 68px; stroke-width: 1.1; color: var(--sun-1); }
.admin code { font-size: .8125rem; color: #e1e4e8; }

.tray { flex-direction: column; align-items: flex-end; gap: 10px; width: min(100%, 340px); margin-inline: auto; }

.menu {
  display: grid;
  min-width: 230px;
  padding: 4px;
  border-radius: 8px;
  font-size: 13px;
  background: #f9f9f9;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 20px 40px -14px rgb(0 0 0 / .7);
}

.menu span { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 36px; border-radius: 4px; }
.menu span:first-child { background: rgb(0 0 0 / .05); }
.menu span.on { padding-left: 12px; }
.menu span.on .i { width: 14px; height: 14px; stroke-width: 2; }
.menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--f-line); }

.traybar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  color: #e6e8eb;
  background: #222428;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
}

.traybar img { box-sizing: content-box; width: 18px; height: 18px; padding: 4px; border-radius: 6px; background: rgb(255 255 255 / .1); }
.traybar .i { width: 16px; height: 16px; }
.clock { display: grid; gap: 4px; }
.clock i { width: 34px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .6); }
.clock i + i { justify-self: end; width: 26px; opacity: .6; }

.settings {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: start;
  gap: clamp(36px, 5vw, 88px);
  padding: clamp(56px, 7vw, 104px) clamp(24px, 5vw, 72px);
}

.settings h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -.03em; }
.settings-copy { position: sticky; top: 120px; }
.settings-copy p { max-width: 32em; margin-top: 20px; font-size: 1.125rem; color: var(--umber); }
.settings-copy .try { font-weight: 600; color: var(--ink); }
.settings-mock { margin: 0; }
.settings-mock figcaption { margin-top: 16px; text-align: center; font-size: .875rem; color: var(--umber); }

.appwin {
  max-width: 640px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 8px;
  background: #f3f3f3;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .14), 0 44px 88px -28px rgb(var(--shadow) / .75), 0 16px 32px -16px rgb(var(--shadow) / .5);
}

.appbar { display: flex; align-items: center; gap: 10px; height: 32px; padding-left: 12px; font-size: 12px; }
.appbar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar .ctl { flex: none; }
.appbar .ctl .i { width: 46px; height: 32px; padding: 10px 16px; stroke-width: 1.3; }

.tabs { display: flex; gap: 4px; padding: 6px 12px 0; border-bottom: 1px solid var(--f-line); }

.tab {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 0;
  font: 400 14px/34px var(--font);
  color: rgb(0 0 0 / .72);
  background: none;
  cursor: pointer;
}

.tab::after { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
.tab:hover, .tab[aria-selected="true"] { color: var(--f-text); }
.tab[aria-selected="true"] { font-weight: 700; }

.tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 1.5px;
  background: var(--accent);
}

.tab:focus-visible { outline: 2px solid var(--f-text); outline-offset: -2px; border-radius: 4px; }

.pane { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; min-height: 690px; padding: 8px 24px 22px; }
.pane[hidden] { display: none; }
.pane .intro { margin-bottom: 4px; font-size: 12px; color: var(--f-2); }
.stitle { margin-top: 6px; font-size: 13px; font-weight: 600; }
.pane .card + .stitle { margin-top: 10px; }
.pane > .fbtn { justify-self: start; margin-top: 10px; }

.fbtn {
  padding: 7px 12px;
  border: 0;
  border-radius: 4px;
  font: 400 13px/1.2 var(--font);
  color: var(--f-text);
  background: #fdfdfd;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1), inset 0 -1px 0 rgb(0 0 0 / .14);
  cursor: pointer;
}

.fbtn:hover { background: #f6f6f6; }
.fbtn:disabled { color: rgb(0 0 0 / .36); cursor: default; }
.fbtn:focus-visible, .fluent a:focus-visible, #mock-lang:focus-visible { outline: 2px solid var(--f-text); outline-offset: 2px; }

.setrow { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 9px 16px; }
.setrow.divided { border-top: 1px solid var(--f-line); }
.st { display: grid; flex: 1; gap: 2px; min-width: 0; }
.st b { font-size: 14px; font-weight: 400; }
.st span { font-size: 12px; color: var(--f-2); }

#mock-lang {
  flex: none;
  width: 190px;
  height: 32px;
  padding: 0 32px 0 11px;
  border: 0;
  border-radius: 4px;
  font: 14px var(--font);
  color: var(--f-text);
  background: #fdfdfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%231b1b1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1), inset 0 -1px 0 rgb(0 0 0 / .14);
  appearance: none;
  cursor: pointer;
}

.checks { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0 16px 14px; }
.check { position: relative; display: flex; align-items: center; gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; }
.check input, .switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.check .box {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .45);
}

.check .box .i { width: 14px; height: 14px; stroke-width: 2.2; color: var(--on-accent, var(--ink)); opacity: 0; }
.check input:checked + .box { background: var(--accent); box-shadow: none; }
.check input:checked + .box .i { opacity: 1; }
.check input:focus-visible + .box, .switch input:focus-visible ~ .track { outline: 2px solid var(--f-text); outline-offset: 2px; }

.switch { position: relative; display: flex; flex: none; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; }
.switch:has(input:checked) .off, .switch:not(:has(input:checked)) .on { display: none; }

.switch .track {
  position: relative;
  width: 40px;
  height: 20px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .6);
  transition: background .2s;
}

.switch .track::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(0 0 0 / .62);
  transition: translate .25s var(--ease), scale .25s var(--ease), background .2s;
}

.switch input:checked ~ .track { background: var(--accent); box-shadow: none; }
.switch input:checked ~ .track::after { translate: 20px 0; scale: 1.2; background: var(--on-accent, var(--ink)); }

/* Off, like the app's own switch, the window goes back to the Windows blue. */
.appwin:has(#mock-colors:not(:checked)) { --accent: #005fb8; --accent-text: #005fb8; --accent-line: #005fb8; --on-accent: #fff; }

.pane.about { justify-items: center; gap: 6px; padding-top: 28px; text-align: center; }
.pane.about img { width: 128px; height: 128px; margin-bottom: 8px; }
.pane.about .fbtn { margin-top: 16px; }
.appname { font-size: 24px; font-weight: 700; }
.soft { font-size: 13px; color: var(--f-2); }
#about-status { min-height: 1.5em; font-size: 12px; }
.fluent a { color: var(--accent-text); text-decoration: none; }
.fluent a:hover { text-decoration: underline; }

.install {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
  padding-block: clamp(88px, 11vw, 152px);
}

.steps { display: grid; gap: 30px; margin: 40px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 52px 1fr; gap: 6px 20px; counter-increment: step; }

.steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font: 700 1.375rem/1 var(--display);
  color: var(--ink);
  background: linear-gradient(var(--sun-1), var(--sun-2));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -2px 0 rgb(var(--rim) / .4);
}

.steps h3 { align-self: end; font-size: 1.25rem; line-height: 1.35; color: #fff; }
.steps p, .aside { color: var(--text-2); }
.steps b, .aside b, .qa b { font-weight: 600; color: #fff; }
.aside { max-width: 60ch; margin-top: 24px; font-size: .9375rem; }
.aside + .aside { margin-top: 8px; }
.aside a { color: #fff; }

.smartscreen {
  justify-self: center;
  width: 100%;
  max-width: 440px;
  padding: 30px 30px 24px;
  border-radius: 4px;
  font-family: var(--font);
  color: #fff;
  background: #0067c0;
  box-shadow: 0 44px 88px -28px rgb(0 0 0 / .85), 0 0 0 1px rgb(255 255 255 / .08);
}

.ss-title { margin-bottom: 20px; font-size: 1.6rem; font-weight: 300; line-height: 1.2; }
.smartscreen > i { display: block; height: 7px; margin-bottom: 10px; border-radius: 4px; background: rgb(255 255 255 / .5); }
.smartscreen > i.short { width: 62%; }
.ss-more { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: .9375rem; }
.ss-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 64px; }
.ss-btn { position: relative; padding: 7px 18px; font-size: .875rem; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .85); }

.badge {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font: 700 .875rem/1 var(--display);
  color: var(--ink);
  background: linear-gradient(var(--sun-1), var(--sun-2));
  box-shadow: 0 4px 10px -2px rgb(0 0 0 / .5);
}

.ss-btn .badge { position: absolute; right: -12px; top: -14px; }

.faq {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(32px, 5vw, 88px);
  padding-bottom: clamp(88px, 11vw, 152px);
}

.faq h2 { position: sticky; top: 104px; }
.qa details { border-bottom: 1px solid rgb(255 255 255 / .09); }
.qa details:first-child { border-top: 1px solid rgb(255 255 255 / .09); }

.qa summary {
  position: relative;
  padding: 22px 52px 22px 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  list-style: none;
  cursor: pointer;
  transition: color .2s;
}

.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--sun-1); }

.qa summary::before, .qa summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--sun-1);
  transition: rotate .35s var(--ease);
}

.qa summary::after { rotate: 90deg; }
.qa details[open] summary::after { rotate: 0deg; }
.qa p { max-width: 65ch; padding: 0 52px 26px 0; color: var(--text-2); }

.outro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: clamp(64px, 8vw, 120px) 24px;
  text-align: center;
}

/* A steel plate, so the yellow icon reads on the yellow tile. */
.outro img {
  box-sizing: content-box;
  width: 112px;
  height: 112px;
  padding: 18px;
  border-radius: 36px;
  background: linear-gradient(#3a3f47, #16181b);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 24px 40px -14px rgb(var(--shadow) / .7);
}
.outro :is(h1, h2) { max-width: 15em; margin-top: 30px; font-size: clamp(2.1rem, 4.4vw, 3.75rem); line-height: 1.02; letter-spacing: -.035em; }
.lost { min-height: calc(100svh - 220px); align-content: center; }
.outro p { margin-top: 16px; font-size: 1.125rem; color: var(--umber); }
.outro .cta { justify-content: center; }

.foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 48px 0 56px;
  font-size: .9375rem;
  color: var(--text-2);
}
.foot .langs { grid-column: 1 / -1; margin: 0; padding-bottom: 28px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.foot p:last-child { text-align: right; }

.foot a { color: #fff; }
.foot .i { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; color: var(--sun-1); }
.langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 10px 0; padding: 0; list-style: none; }
.langs a { color: var(--text-2); text-decoration: none; }
.langs a:hover { color: #fff; }
.langs a[aria-current] { color: var(--sun-1); }

@media (max-width: 1080px) {
  .cell, .c7, .c5 { grid-column: span 6; }
  .cell:last-child { grid-column: 1 / -1; }
  .settings { grid-template-columns: minmax(0, 1fr); }
  .settings-copy { position: static; }
}

@media (max-width: 960px) {
  .links { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .desk { --ball: 12cqw; --bx: 4cqw; }
  .demo { margin-top: calc(12vw + 8px); }
  .ball { clip-path: inset(89% -60% -20% -60%); }
  .install, .faq { grid-template-columns: minmax(0, 1fr); }
  .faq h2 { position: static; }
}

@media (max-width: 680px) {
  .cell, .c7, .c5 { grid-column: 1 / -1; }
  .foot { grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: center; }
  .foot .langs { margin-bottom: 12px; }
  .foot p:last-child { text-align: center; }
  .lang summary span { display: none; }
  .brand { font-size: 1rem; }
  .spots { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 8px; }
  .spot .glyph { width: 48px; height: 34px; }
  .cycle .mini { width: 76px; }
  .key { min-width: 40px; height: 40px; padding: 0 10px; }
  .key.mod { min-width: 48px; }
  .arrows .key { min-width: 40px; }
  .krow.stagger { translate: 10px 0; }
  .pane { min-height: 0; padding-inline: 16px; }
  .appbar .ctl .i { width: 34px; padding: 10px; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .srow { gap: 8px; padding-left: 10px; }
  .srow .clear { display: none; }
  .tab { flex: none; padding: 0 10px; }
  .tab[aria-selected="true"]::before { left: 10px; right: 10px; }
  .setrow { flex-wrap: wrap; }
  .qa p { padding-right: 0; }
}

@media (max-width: 480px) {
  .get-menu { grid-template-columns: minmax(12rem, auto); }
  .nav .get { position: static; }
  .nav .get-menu { left: 6px; right: 6px; }
}

@media (max-width: 400px) {
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .btn { white-space: normal; text-align: center; line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ball, .desk.replay .ball, .desk.hit .stage, .ghost.show { animation: none; }
  .win, .screens, .flyout { transition: none; }
}