:root {
  --bg: #f6f6f8;
  --paper: #fff;
  --ink: #202024;
  --muted: #61616b;
  --line: #dedee3;
  --border: #c6c6ce;
  --accent: #4076c8;
  --accent-dark: #3c6fbc;
  --tint: #ededf1;
  --radius: 10px;
  --selection: #d1e0f6;
  --on-accent: #fff;
  --accent-active: #3868b0;
  --outline: #414147;
  --hover: #f6f6f6;
  --active: #ededed;
  --header-bg: rgba(246, 246, 248, 0.97);
  --switch-hover: #e6e6e6;
  --switch-active: #d1d1d1;
  /* Ink panel: the dark code showcase, intentionally dark in both themes. */
  --ink-panel: #202024;
  --ink-panel-fg: #ececee;
  --ink-panel-muted: #b8b8c2;
  --ink-panel-link: #8db6f1;
  --ink-panel-line: #55555f;
  --ink-panel-deep: #18181c;
  --ink-panel-toolbar-line: #414147;
  --ink-panel-toolbar: #28282d;
  --ink-panel-button: #323238;
  --ink-panel-button-hover: #39393f;
  color-scheme: light dark;
}
/* Dark palette: applied by the inline theme script (data-theme) or, without
   JavaScript, by the system preference when no explicit choice exists. */
html[data-theme="dark"] {
  --bg: #101014;
  --paper: #1a1a1e;
  --ink: #ececee;
  --muted: #a2a2ac;
  --line: #2c2c32;
  --border: #3c3c44;
  --accent: #3d72c4;
  --accent-dark: #3568b8;
  --tint: #1e1e22;
  --selection: #2a4066;
  --on-accent: #fff;
  --accent-active: #2d5cae;
  --outline: #6a6a74;
  --hover: #242428;
  --active: #2c2c32;
  --header-bg: rgba(16, 16, 20, 0.97);
  --switch-hover: #242428;
  --switch-active: #2e2e34;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #101014;
    --paper: #1a1a1e;
    --ink: #ececee;
    --muted: #a2a2ac;
    --line: #2c2c32;
    --border: #3c3c44;
    --accent: #3d72c4;
    --accent-dark: #3568b8;
    --tint: #1e1e22;
    --selection: #2a4066;
    --on-accent: #fff;
    --accent-active: #2d5cae;
    --outline: #6a6a74;
    --hover: #242428;
    --active: #2c2c32;
    --header-bg: rgba(16, 16, 20, 0.97);
    --switch-hover: #242428;
    --switch-active: #2e2e34;
    color-scheme: dark;
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    16px/1.7 system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button {
  font: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.035em;
}
h1 {
  font-size: clamp(2.8rem, 4.7vw, 4.25rem);
  font-weight: 750;
}
h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.55rem);
  font-weight: 700;
}
h3 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
p {
  color: var(--muted);
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
::selection {
  background: var(--selection);
  color: var(--ink);
}
.container {
  width: min(1320px, calc(100% - 64px));
  margin-inline: auto;
}
.section {
  padding-block: 82px;
}
.section-white {
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.section-heading {
  max-width: 740px;
  margin-bottom: 38px;
}
.section-heading h2 {
  margin-bottom: 16px;
}
.section-heading > p:last-child {
  font-size: 1.06rem;
  margin-bottom: 0;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 10;
  background: var(--paper);
  padding: 12px 20px;
  border: 2px solid var(--accent);
}
.skip-link:focus {
  top: 10px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  flex: none;
}
.brand img {
  width: 122px;
}
.header-inner nav {
  display: flex;
  align-items: center;
  gap: 27px;
  font-size: 0.88rem;
  font-weight: 600;
}
.header-inner nav > a:not(.button) {
  color: var(--muted);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lang-switch {
  position: relative;
}
.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang-switch-btn:hover {
  background: var(--hover);
  color: var(--ink);
}
.lang-switch-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}
.lang-switch-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 144px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  z-index: 20;
  display: none;
}
.lang-switch.open .lang-switch-list {
  display: block;
}
.lang-switch-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
}
.lang-switch-list a:hover {
  background: var(--hover);
  text-decoration: none;
}
.lang-switch-list a.current {
  color: var(--accent);
}
.lang-switch-list a.current::after {
  content: "✓";
  font-weight: 700;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}
.theme-toggle:hover {
  background: var(--hover);
}
.theme-toggle:active {
  background: var(--active);
}
.theme-toggle svg {
  display: block;
}
.theme-toggle [data-theme-icon="dark"] {
  display: block;
}
.theme-toggle [data-theme-icon="light"] {
  display: none;
}
html[data-theme="dark"] .theme-toggle [data-theme-icon="dark"] {
  display: none;
}
html[data-theme="dark"] .theme-toggle [data-theme-icon="light"] {
  display: block;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-toggle [data-theme-icon="dark"] {
    display: none;
  }
  html:not([data-theme]) .theme-toggle [data-theme-icon="light"] {
    display: block;
  }
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.4;
  transition: background 0.15s;
}
.button:hover {
  background: var(--accent-dark);
  text-decoration: none;
}
.button:active {
  background: var(--accent-active);
}
.button:focus-visible {
  outline-color: var(--outline);
}
.button-small {
  min-height: 38px;
  padding: 8px 15px;
  font-size: 0.83rem;
}
.button-outline {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--border);
}
.button-outline:hover {
  background: var(--hover);
}
.button-outline:active {
  background: var(--active);
}
.button-outline:focus-visible {
  outline-color: var(--accent);
}
.text-link {
  font-weight: 650;
  font-size: 0.94rem;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 48px;
  padding-block: 48px 64px;
}
.hero h1 {
  font-size: clamp(2.65rem, 4vw, 3.65rem);
  white-space: pre-line;
  margin-bottom: 23px;
}
.hero-lead {
  font-size: 1.08rem;
  line-height: 1.8;
  max-width: 620px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 29px;
}
.showcase {
  min-width: 0;
  width: 100%;
  max-width: 824px;
  margin-inline: auto;
}
.platform-switch {
  display: flex;
  gap: 3px;
}
.platform-switch button {
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  min-height: 32px;
  padding: 5px 10px;
  font-size: 0.8rem;
  line-height: 1.4;
  transition: background 0.15s;
}
.platform-switch button:hover {
  background: var(--switch-hover);
}
.platform-switch button:active {
  background: var(--switch-active);
}
.platform-switch button[aria-pressed="true"] {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
}
.screenshots {
  display: grid;
  gap: 20px;
  align-content: start;
  touch-action: pan-y pinch-zoom;
}
.screenshots figure {
  margin: 0;
  min-width: 0;
}
.screenshot-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 824 / 779;
}
.screenshots img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallery-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.gallery-ready .screenshots figure:not([hidden]) {
  animation: screenshot-enter 0.35s ease-out;
}
.gallery-ready figcaption {
  display: none;
}
@keyframes screenshot-enter {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.screenshots figcaption {
  font-size: 0.75rem;
  text-align: center;
  color: var(--muted);
  margin-top: 6px;
}
.gallery-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.gallery-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 32px;
  min-height: 32px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s;
}
.gallery-control:hover {
  background: var(--hover);
}
.gallery-control:active {
  background: var(--active);
}
.gallery-control svg {
  display: block;
}
.reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
}
.reasons h3 {
  margin-bottom: 13px;
}
.reasons p {
  font-size: 0.94rem;
  margin-bottom: 0;
}
.ai-prompt {
  margin-bottom: 44px;
}
.ai-prompt code {
  font-size: 0.86rem;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.feature h3 {
  font-size: 1.12rem;
  margin-bottom: 12px;
}
.feature p {
  font-size: 0.91rem;
  margin-bottom: 0;
}
.architecture {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  margin-top: 34px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint);
}
.architecture h3 {
  margin-bottom: 12px;
}
.architecture p {
  font-size: 0.88rem;
  margin-bottom: 0;
}
.architecture dl {
  margin: 0;
}
.architecture dl > div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.architecture dl > div:last-child {
  border: 0;
}
.architecture dt {
  font:
    600 0.85rem/1.6 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  color: var(--accent-dark);
}
.architecture dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}
.section-ink {
  background: var(--ink-panel);
  color: var(--ink-panel-fg);
}
.section-ink h2 {
  color: var(--ink-panel-fg);
}
.section-ink p {
  color: var(--ink-panel-muted);
}
.section-ink .text-link {
  color: var(--ink-panel-link);
}
.code-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: center;
}
.install-line {
  margin: 26px 0 18px;
  border: 1px solid var(--ink-panel-line);
  border-radius: 6px;
  padding: 14px;
  color: var(--ink-panel-fg);
  overflow: auto;
}
.install-line code {
  font-size: 0.78rem;
  white-space: nowrap;
}
.code-block {
  border: 1px solid var(--ink-panel-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-panel-deep);
  color: var(--ink-panel-fg);
  text-align: left;
}
.code-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 39px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ink-panel-toolbar-line);
  background: var(--ink-panel-toolbar);
  color: var(--ink-panel-muted);
  font:
    500 0.72rem/1.5 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
}
.code-toolbar button {
  background: var(--ink-panel-button);
  border: 1px solid var(--ink-panel-line);
  color: var(--ink-panel-fg);
  cursor: pointer;
  font: inherit;
  border-radius: 6px;
  padding: 2px 10px;
}
.code-toolbar button:hover {
  background: var(--ink-panel-button-hover);
}
.code-block pre {
  margin: 0;
  padding: 21px;
  overflow: auto;
  tab-size: 4;
}
.code-block code {
  font:
    400 0.78rem/1.8 ui-monospace,
    SFMono-Regular,
    Consolas,
    "Liberation Mono",
    monospace;
}
.code-section .code-block pre {
  max-height: 420px;
}
.downloads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.download-card {
  padding: 25px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.download-platform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.download-platform h3 {
  margin: 0;
  font-size: 1.3rem;
}
.download-card > p {
  font-size: 0.82rem;
  margin: 10px 0 25px;
}
.download-size strong {
  display: block;
  font-size: 1.85rem;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.3;
  color: var(--ink);
}
.download-size span {
  display: block;
  font-size: 0.72rem;
  margin-top: 5px;
}
.download-card .button {
  width: 100%;
  font-size: 0.85rem;
}
.download-details {
  margin-top: 22px;
  font-size: 0.8rem;
}
.download-details p {
  margin-bottom: 12px;
  max-width: 940px;
}
.download-details > div {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--muted);
}
.measurement {
  margin-top: 34px;
  padding: 25px 28px;
  border: 1px solid var(--line);
  background: var(--tint);
  border-radius: var(--radius);
}
.measurement h3 {
  font-size: 1.06rem;
  margin-bottom: 12px;
}
.measurement p {
  font-size: 0.87rem;
  max-width: 1000px;
  margin-bottom: 12px;
}
.measurement .text-link {
  font-size: 0.8rem;
}
.platform-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 75px;
  align-items: start;
}
.platform-section .section-heading {
  margin: 0;
}
.platform-list article {
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}
.platform-list article:first-child {
  padding-top: 0;
}
.platform-list article:last-child {
  border: 0;
  padding-bottom: 0;
}
.platform-list h3 {
  font-size: 1rem;
  margin-bottom: 9px;
}
.platform-list p {
  font-size: 0.89rem;
  margin-bottom: 0;
}
.limitations {
  margin-top: 32px;
  margin-bottom: 0;
  padding-top: 23px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}
.faq-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
}
.faq-section .section-heading {
  margin-bottom: 0;
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.faq details:first-child {
  padding-top: 0;
}
.faq summary {
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
}
.faq details p {
  font-size: 0.9rem;
  margin: 15px 0 0;
}
.final-cta {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 80px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint);
  padding: 30px 35px;
}
.final-cta img {
  width: 76px;
  flex: none;
}
.final-cta > div {
  flex: 1;
}
.final-cta h2 {
  font-size: 1.65rem;
  margin-bottom: 9px;
}
.final-cta p {
  font-size: 0.86rem;
  margin-bottom: 0;
}
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--tint);
  padding: 35px 0 22px;
}
.footer-main {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
}
.footer-brand {
  font-weight: 750;
  color: var(--ink);
  font-size: 1rem;
}
.footer-main p {
  margin: 6px 0 0;
  font-size: 0.8rem;
}
.footer-dependencies {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 0.84rem;
}
.footer-links {
  display: flex;
  gap: 24px;
  font-size: 0.82rem;
}
.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  font-size: 0.67rem;
}
.footer-legal p {
  margin: 0;
}
.footer-legal a {
  color: var(--muted);
}
.tutorial {
  max-width: 860px;
  padding-block: 64px 80px;
}
.tutorial-header h1 {
  font-size: clamp(2.5rem, 4.5vw, 3.7rem);
  margin-bottom: 21px;
}
.tutorial-header {
  margin-bottom: 35px;
}
.notice {
  padding: 24px 28px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.notice h2 {
  font-size: 1.22rem;
  margin-bottom: 12px;
}
.notice p {
  font-size: 0.94rem;
  margin-bottom: 0;
}
.notice .button {
  margin-top: 17px;
}
.tutorial-step {
  padding-top: 46px;
}
.tutorial-step h2 {
  font-size: 1.6rem;
  margin-bottom: 17px;
}
.tutorial-step h3 {
  font-size: 1.08rem;
  margin-top: 26px;
}
.tutorial-step > p {
  font-size: 0.95rem;
}
.tutorial-step .code-block {
  margin-top: 20px;
}
.tutorial-step .code-block pre {
  max-height: none;
}
.step-number {
  display: block;
  color: var(--accent);
  font:
    600 0.77rem ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  margin-bottom: 12px;
}
.resource-links {
  padding-left: 20px;
  margin-bottom: 0;
}
.resource-links li {
  padding: 5px 0;
}
.tutorial > .notice:last-child {
  margin-top: 44px;
}
.not-found {
  padding-block: 100px;
  min-height: 60vh;
}
.not-found h1 {
  font-size: 3.5rem;
}
.not-found p {
  max-width: 650px;
}
.code-section > * {
  min-width: 0;
}
.hero-copy {
  min-width: 0;
}
.hero h1:lang(zh-CN) {
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  line-height: 1.3;
}
@media (max-width: 1080px) {
  .container {
    width: calc(100% - 48px);
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-copy {
    max-width: 720px;
  }
  .hero h1 {
    font-size: 3.1rem;
  }
  .reasons {
    gap: 25px;
  }
  .code-section {
    gap: 30px;
  }
  .platform-section,
  .faq-section {
    gap: 40px;
  }
  .feature {
    padding: 22px;
  }
  .architecture {
    gap: 30px;
  }
}
@media (max-width: 760px) {
  .container {
    width: calc(100% - 36px);
  }
  .header-inner {
    min-height: 70px;
    gap: 10px;
  }
  .brand img {
    width: 99px;
  }
  .header-inner nav {
    gap: 16px;
    font-size: 0.78rem;
  }
  .nav-actions {
    gap: 10px;
  }
  .nav-secondary {
    display: none;
  }
  .header-inner .button-small {
    font-size: 0.73rem;
    padding: 8px 11px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-block: 35px 48px;
  }
  .hero h1 {
    font-size: clamp(2.75rem, 7vw, 3.5rem);
  }
  .hero-copy {
    max-width: 600px;
  }
  .hero-lead {
    font-size: 1rem;
  }
  .hero-actions {
    margin-top: 24px;
  }
  .platform-switch button,
  .gallery-control {
    min-height: 44px;
  }
  .gallery-control {
    min-width: 44px;
  }
  .section {
    padding-block: 52px;
  }
  .section-heading {
    margin-bottom: 27px;
  }
  .reasons {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .reasons h3 {
    margin-bottom: 10px;
  }
  .feature-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .architecture,
  .code-section,
  .platform-section,
  .faq-section {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .architecture {
    padding: 23px;
  }
  .architecture dl > div {
    grid-template-columns: 74px 1fr;
    gap: 13px;
  }
  .code-copy {
    max-width: 620px;
  }
  .downloads {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .download-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 15px;
    padding: 21px;
  }
  .download-platform {
    grid-column: 1/3;
  }
  .download-card > p {
    margin: 0;
  }
  .download-card .download-size {
    grid-row: 2/4;
    grid-column: 2;
    text-align: right;
  }
  .download-size strong {
    font-size: 1.5rem;
  }
  .download-card .button {
    width: fit-content;
    min-height: 38px;
    padding: 8px 13px;
    grid-column: 1;
  }
  .download-details > div {
    gap: 12px 22px;
  }
  .measurement {
    padding: 22px;
  }
  .final-cta {
    padding: 25px;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 50px;
  }
  .final-cta img {
    width: 58px;
  }
  .final-cta h2 {
    font-size: 1.35rem;
  }
  .final-cta > .button {
    margin-left: 74px;
  }
  .footer-main {
    align-items: flex-start;
  }
  .footer-links {
    gap: 13px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .footer-legal {
    flex-direction: column;
    gap: 8px;
  }
  .tutorial {
    padding-block: 40px 55px;
  }
  .tutorial-step {
    padding-top: 35px;
  }
  .notice {
    padding: 20px;
  }
  .not-found h1 {
    font-size: 2.6rem;
  }
}
@media (max-width: 400px) {
  .header-inner nav {
    gap: 10px;
  }
  .nav-actions {
    gap: 8px;
  }
  .brand img {
    width: 86px;
  }
  .header-inner .button-small {
    padding: 7px 8px;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 2.6rem;
  }
  .footer-main {
    flex-direction: column;
    gap: 18px;
  }
  .footer-links {
    justify-content: flex-start;
  }
  .final-cta > div {
    min-width: 0;
  }
  .final-cta > .button {
    margin-left: 0;
  }
  .platform-switch {
    margin-left: 0;
  }
  .platform-switch button {
    padding: 5px 8px;
  }
  .gallery-toolbar {
    justify-content: center;
    gap: 8px;
  }
  .gallery-controls {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .button,
  .platform-switch button,
  .gallery-control,
  .lang-switch-btn {
    transition: none;
  }
  .gallery-ready .screenshots figure:not([hidden]) {
    animation: none;
  }
}

/* ---- Code highlighting: chroma github-dark tokens, generated via
   `go run ./cmd/site -highlight-css`; class prefix tok- under
   .code-block and .install-line. ---- */
/* Error */ .code-block .tok-err, .install-line .tok-err { color: #f85149 }
/* Keyword */ .code-block .tok-k, .install-line .tok-k { color: #ff7b72 }
/* KeywordConstant */ .code-block .tok-kc, .install-line .tok-kc { color: #79c0ff }
/* KeywordDeclaration */ .code-block .tok-kd, .install-line .tok-kd { color: #ff7b72 }
/* KeywordNamespace */ .code-block .tok-kn, .install-line .tok-kn { color: #ff7b72 }
/* KeywordPseudo */ .code-block .tok-kp, .install-line .tok-kp { color: #79c0ff }
/* KeywordReserved */ .code-block .tok-kr, .install-line .tok-kr { color: #ff7b72 }
/* KeywordType */ .code-block .tok-kt, .install-line .tok-kt { color: #ff7b72 }
/* NameClass */ .code-block .tok-nc, .install-line .tok-nc { color: #f0883e; font-weight: bold }
/* NameConstant */ .code-block .tok-no, .install-line .tok-no { color: #79c0ff; font-weight: bold }
/* NameDecorator */ .code-block .tok-nd, .install-line .tok-nd { color: #d2a8ff; font-weight: bold }
/* NameEntity */ .code-block .tok-ni, .install-line .tok-ni { color: #ffa657 }
/* NameException */ .code-block .tok-ne, .install-line .tok-ne { color: #f0883e; font-weight: bold }
/* NameLabel */ .code-block .tok-nl, .install-line .tok-nl { color: #79c0ff; font-weight: bold }
/* NameNamespace */ .code-block .tok-nn, .install-line .tok-nn { color: #ff7b72 }
/* NameProperty */ .code-block .tok-py, .install-line .tok-py { color: #79c0ff }
/* NameTag */ .code-block .tok-nt, .install-line .tok-nt { color: #7ee787 }
/* NameVariable */ .code-block .tok-nv, .install-line .tok-nv { color: #79c0ff }
/* NameVariableClass */ .code-block .tok-vc, .install-line .tok-vc { color: #79c0ff }
/* NameVariableGlobal */ .code-block .tok-vg, .install-line .tok-vg { color: #79c0ff }
/* NameVariableInstance */ .code-block .tok-vi, .install-line .tok-vi { color: #79c0ff }
/* NameVariableMagic */ .code-block .tok-vm, .install-line .tok-vm { color: #79c0ff }
/* NameFunction */ .code-block .tok-nf, .install-line .tok-nf { color: #d2a8ff; font-weight: bold }
/* NameFunctionMagic */ .code-block .tok-fm, .install-line .tok-fm { color: #d2a8ff; font-weight: bold }
/* Literal */ .code-block .tok-l, .install-line .tok-l { color: #a5d6ff }
/* LiteralDate */ .code-block .tok-ld, .install-line .tok-ld { color: #79c0ff }
/* LiteralString */ .code-block .tok-s, .install-line .tok-s { color: #a5d6ff }
/* LiteralStringAffix */ .code-block .tok-sa, .install-line .tok-sa { color: #79c0ff }
/* LiteralStringBacktick */ .code-block .tok-sb, .install-line .tok-sb { color: #a5d6ff }
/* LiteralStringChar */ .code-block .tok-sc, .install-line .tok-sc { color: #a5d6ff }
/* LiteralStringDelimiter */ .code-block .tok-dl, .install-line .tok-dl { color: #79c0ff }
/* LiteralStringDoc */ .code-block .tok-sd, .install-line .tok-sd { color: #a5d6ff }
/* LiteralStringDouble */ .code-block .tok-s2, .install-line .tok-s2 { color: #a5d6ff }
/* LiteralStringEscape */ .code-block .tok-se, .install-line .tok-se { color: #79c0ff }
/* LiteralStringHeredoc */ .code-block .tok-sh, .install-line .tok-sh { color: #79c0ff }
/* LiteralStringInterpol */ .code-block .tok-si, .install-line .tok-si { color: #a5d6ff }
/* LiteralStringOther */ .code-block .tok-sx, .install-line .tok-sx { color: #a5d6ff }
/* LiteralStringRegex */ .code-block .tok-sr, .install-line .tok-sr { color: #79c0ff }
/* LiteralStringSingle */ .code-block .tok-s1, .install-line .tok-s1 { color: #a5d6ff }
/* LiteralStringSymbol */ .code-block .tok-ss, .install-line .tok-ss { color: #a5d6ff }
/* LiteralNumber */ .code-block .tok-m, .install-line .tok-m { color: #a5d6ff }
/* LiteralNumberBin */ .code-block .tok-mb, .install-line .tok-mb { color: #a5d6ff }
/* LiteralNumberFloat */ .code-block .tok-mf, .install-line .tok-mf { color: #a5d6ff }
/* LiteralNumberHex */ .code-block .tok-mh, .install-line .tok-mh { color: #a5d6ff }
/* LiteralNumberInteger */ .code-block .tok-mi, .install-line .tok-mi { color: #a5d6ff }
/* LiteralNumberIntegerLong */ .code-block .tok-il, .install-line .tok-il { color: #a5d6ff }
/* LiteralNumberOct */ .code-block .tok-mo, .install-line .tok-mo { color: #a5d6ff }
/* Operator */ .code-block .tok-o, .install-line .tok-o { color: #ff7b72; font-weight: bold }
/* OperatorWord */ .code-block .tok-ow, .install-line .tok-ow { color: #ff7b72; font-weight: bold }
/* OperatorReserved */ .code-block .tok-or, .install-line .tok-or { color: #ff7b72; font-weight: bold }
/* Comment */ .code-block .tok-c, .install-line .tok-c { color: #8b949e; font-style: italic }
/* CommentHashbang */ .code-block .tok-ch, .install-line .tok-ch { color: #8b949e; font-style: italic }
/* CommentMultiline */ .code-block .tok-cm, .install-line .tok-cm { color: #8b949e; font-style: italic }
/* CommentSingle */ .code-block .tok-c1, .install-line .tok-c1 { color: #8b949e; font-style: italic }
/* CommentSpecial */ .code-block .tok-cs, .install-line .tok-cs { color: #8b949e; font-weight: bold; font-style: italic }
/* CommentPreproc */ .code-block .tok-cp, .install-line .tok-cp { color: #8b949e; font-weight: bold; font-style: italic }
/* CommentPreprocFile */ .code-block .tok-cpf, .install-line .tok-cpf { color: #8b949e; font-weight: bold; font-style: italic }
/* GenericDeleted */ .code-block .tok-gd, .install-line .tok-gd { color: #ffa198; background-color: #490202 }
/* GenericEmph */ .code-block .tok-ge, .install-line .tok-ge { font-style: italic }
/* GenericError */ .code-block .tok-gr, .install-line .tok-gr { color: #ffa198 }
/* GenericHeading */ .code-block .tok-gh, .install-line .tok-gh { color: #79c0ff; font-weight: bold }
/* GenericInserted */ .code-block .tok-gi, .install-line .tok-gi { color: #56d364; background-color: #0f5323 }
/* GenericOutput */ .code-block .tok-go, .install-line .tok-go { color: #8b949e }
/* GenericPrompt */ .code-block .tok-gp, .install-line .tok-gp { color: #8b949e }
/* GenericStrong */ .code-block .tok-gs, .install-line .tok-gs { font-weight: bold }
/* GenericSubheading */ .code-block .tok-gu, .install-line .tok-gu { color: #79c0ff }
/* GenericTraceback */ .code-block .tok-gt, .install-line .tok-gt { color: #ff7b72 }
/* GenericUnderline */ .code-block .tok-gl, .install-line .tok-gl { text-decoration: underline }
/* TextWhitespace */ .code-block .tok-w, .install-line .tok-w { color: #6e7681 }


/* Manual additions: github-dark omits NameBuiltin and NameAttribute, which
   the shell tokenizer uses for command words and flags. */
.code-block .tok-nb, .install-line .tok-nb { color: #d2a8ff }
.code-block .tok-na, .install-line .tok-na { color: #ffa657 }