:root {
  --bg: #000000;
  --bg-panel: #0A0A0A;
  --bg-panel-2: #141414;
  --border: #262626;
  --border-strong: #383838;
  --accent: #23E0A1;
  --accent-dark: #0E9C6E;
  --text: #EDEDED;
  --text-muted: #8A8A8A;
  --text-dim: #5A5A5A;
  --success: #3FD68A;
  --warn: #F29A4A;
  --error: #F0524D;
  --spec-teal: #1FC9B4;
  --spec-cyan: #2AB4D9;
  --beam-core: #F5F5F5;
  --shade: rgb(0 0 0 / .88);
  --rim: rgb(255 255 255 / .06);
  --veil: rgb(0 0 0 / .8);
  --font-display: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: "Inter", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --radius: 0;
  --radius-dot: 50%;
  --header-h: 64px;
  --peek: 56px;
  --gutter: 48px;
  --content-w: 1344px;
  --reading-w: 800px;
  --nav-w: 1344px;
  --space-section: 96px;
  --time-fast: .2s;
  --time-reveal: .65s;
  --ease: cubic-bezier(.2, .65, .3, 1);
  --size-body: 15px;
  --size-small: 13px;
  --size-label: 12px;
  --size-h1: clamp(34px, 1.2rem + 2.4vw, 48px);
  --size-h2: clamp(26px, 2.6vw, 40px);
  --size-h3: 22px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 84px; }
html.nav-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
  font-weight: var(--weight-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; }
button { color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
img, svg { vertical-align: middle; max-width: 100%; }
img { height: auto; }
svg, .dot { flex-shrink: 0; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-normal); text-wrap: balance; }
h1 { font-size: var(--size-h1); line-height: 1.14; letter-spacing: -.012em; }
h2 { font-size: var(--size-h2); line-height: 1.25; letter-spacing: -.012em; }
h3 { font-size: var(--size-h3); line-height: 1.4; }
strong { font-weight: var(--weight-strong); }
code, pre, kbd { font-family: var(--font-mono); }
code { overflow-wrap: anywhere; }
pre {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: var(--size-small);
  line-height: 1.8;
  tab-size: 2;
}
pre code { overflow-wrap: normal; white-space: pre; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
:where(main, section, article, aside, nav, div, li, dl) { min-width: 0; }
:where([id]) { scroll-margin-top: 84px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 100; padding: 8px 14px; background: var(--text); color: var(--bg); font-size: var(--size-small); }
.skip:focus { top: 12px; color: var(--bg); }
.wrap { width: 100%; max-width: calc(var(--content-w) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.reading { width: 100%; max-width: calc(var(--reading-w) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.section + .section { border-top: 1px solid var(--border); }
.section-head { margin-bottom: 40px; }
.section-head p { margin-top: 16px; max-width: 680px; color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.stack { display: grid; gap: 24px; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.panel, .card { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); color: var(--text); }
.card h3 + p, .panel h3 + p { margin-top: 14px; color: var(--text-muted); }
.card > .actions { margin-top: 24px; }
.prose { min-width: 0; line-height: 1.85; }
.prose p + p { margin-top: 20px; }
.prose h2 { margin-top: 64px; margin-bottom: 24px; }
.prose h3 { margin-top: 36px; margin-bottom: 16px; }
.prose ul, .prose ol { padding-left: 1.5em; margin-block: 20px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose a { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.prose code:not(pre code) { padding: 2px 5px; background: var(--bg-panel-2); color: var(--text); font-size: .9em; }
.prose pre { margin-block: 24px; }
.prose img { max-width: 100%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color var(--time-fast), color var(--time-fast), border-color var(--time-fast);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--solid { background: var(--text); color: var(--bg); }
.btn--solid:hover, .btn--solid.is-hover { background: var(--accent); color: var(--bg); }
.btn--line { border-color: var(--border-strong); background: transparent; color: var(--text); }
.btn--line:hover, .btn--line.is-hover { border-color: var(--text); color: var(--text); }
.btn--quiet { color: var(--text-muted); background: transparent; }
.btn--quiet:hover { color: var(--accent); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--bg-panel-2); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; }
.btn.is-focus { outline: 1px solid var(--accent); outline-offset: 3px; }
.topbar, #site-header { position: relative; z-index: 40; height: var(--header-h); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--text); }
.topbar__in {
  position: relative;
  width: 100%;
  max-width: min(100%, calc(var(--nav-w) + var(--gutter) * 2));
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 56px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: var(--size-body); font-weight: var(--weight-medium); letter-spacing: .01em; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.brand img { width: 28px; height: 28px; flex: none; }
.mainnav { min-width: 0; }
.mainnav > ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 30px; }
.mainnav a, .more > button, .more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: var(--header-h); font-size: 14px; color: var(--text-muted); white-space: nowrap; transition: color var(--time-fast); }
.mainnav a:hover, .more > button:hover, .more > summary:hover { color: var(--accent); }
.mainnav a[aria-current="page"], .more > button.is-current { color: var(--text); }
.mainnav a[aria-current="page"]::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: var(--radius-dot); background: var(--accent); color: var(--bg); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
.more { position: relative; }
.more > summary { cursor: pointer; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more__caret, .lang__caret { font-size: 11px; color: var(--text-muted); }
.more__menu, .language-menu {
  position: absolute;
  top: calc(var(--header-h) - 6px);
  left: -14px;
  min-width: 168px;
  padding: 6px 0;
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 24px 40px -18px var(--shade), inset 0 1px 0 var(--rim);
  z-index: 4;
}
.more__menu a, .language-menu a { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; font-size: 14px; color: var(--text-muted); }
.more__menu a:hover, .language-menu a:hover { background: var(--bg-panel-2); color: var(--accent); }
.language-menu a[aria-current] { color: var(--text); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.language { position: relative; }
.lang { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px; font-size: var(--size-small); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); background: transparent; white-space: nowrap; }
.lang:hover { color: var(--text); border-color: var(--border-strong); }
.lang svg { width: 15px; height: 15px; }
.language-menu { top: calc(100% + 8px); right: 0; left: auto; }
.lang-short { display: none; }
.menu-toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.menu-toggle svg { width: 20px; height: 20px; }
.mobile-drawer { display: none; }
.nav-veil { position: fixed; inset: var(--header-h) 0 0; z-index: 1; background: var(--veil); color: var(--text); }
.site-footer { border-top: 1px solid var(--border); padding-top: 64px; padding-bottom: 28px; background: var(--bg); color: var(--text); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr .8fr; gap: 48px; }
.footer-brand p { margin-top: 20px; max-width: 300px; color: var(--text-muted); font-size: 14px; }
.footer-title { font-size: var(--size-small); font-weight: var(--weight-medium); margin-bottom: 16px; }
.footer-links { display: grid; gap: 10px; font-size: var(--size-small); color: var(--text-muted); }
.footer-links a { display: inline-block; padding-block: 3px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--size-small); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.reveal { opacity: 1; transform: none; }
.reveal-pending { opacity: 0; transform: translateY(16px); transition: opacity var(--time-reveal) var(--ease), transform var(--time-reveal) var(--ease); }
.reveal.shown { opacity: 1; transform: none; }
.screen { position: relative; isolation: isolate; overflow-x: clip; }
.screen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 780px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 50% at 72% 24%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%),
    radial-gradient(ellipse 26% 30% at 95% 56%, color-mix(in srgb, var(--warn) 8%, transparent), transparent 72%),
    radial-gradient(ellipse 30% 36% at 12% 30%, color-mix(in srgb, var(--accent-dark) 7%, transparent), transparent 70%);
}
.hero { position: relative; min-height: calc(100svh - var(--header-h) - var(--peek)); display: grid; align-content: center; padding-top: 8px; padding-bottom: 12px; overflow-x: clip; }
.spectrum { position: relative; height: clamp(240px, calc(100svh - 540px), 560px); overflow: hidden; pointer-events: none; }
.spectrum__bands { position: absolute; inset: 0; mask-image: linear-gradient(to bottom, transparent 0, var(--bg) 20%, var(--bg) 84%, transparent 100%); }
.beam { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); filter: blur(var(--blur, 1.5px)); transform-origin: 50% 100%; opacity: .86; }
.beam i { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0, var(--c1) 22%, var(--c2) 80%, transparent 100%); mask-image: repeating-linear-gradient(to right, var(--bg) 0 var(--sw), transparent var(--sw) var(--sp)); opacity: var(--o); }
.beam i + i { inset: 14% 0 -8% calc(var(--sp) / 2); mask-image: repeating-linear-gradient(to right, var(--bg) 0 calc(var(--sw) / 2), transparent calc(var(--sw) / 2) calc(var(--sp) * 1.7)); opacity: calc(var(--o) * .65); }
.b1 { --x: 2.5%; --y: 40%; --h: 50%; --w: 96px; --sw: 3px; --sp: 11px; --c1: var(--accent); --c2: var(--spec-teal); --o: .5; --blur: 2px; }
.b2 { --x: 8.5%; --y: 6%; --h: 48%; --w: 72px; --sw: 4px; --sp: 13px; --c1: var(--spec-teal); --c2: var(--accent); --o: .55; --blur: 1.5px; }
.b3 { --x: 15%; --y: 28%; --h: 64%; --w: 140px; --sw: 3px; --sp: 10px; --c1: var(--accent); --c2: var(--accent-dark); --o: .42; --blur: 2.5px; }
.b4 { --x: 24%; --y: 2%; --h: 38%; --w: 58px; --sw: 2px; --sp: 9px; --c1: var(--accent); --c2: var(--spec-teal); --o: .38; --blur: 1px; }
.b5 { --x: 29%; --y: 46%; --h: 48%; --w: 160px; --sw: 5px; --sp: 14px; --c1: var(--spec-teal); --c2: var(--accent); --o: .55; --blur: 2px; }
.b6 { --x: 40%; --y: 14%; --h: 54%; --w: 112px; --sw: 3px; --sp: 12px; --c1: var(--spec-cyan); --c2: var(--spec-teal); --o: .48; --blur: 1.5px; }
.b7 { --x: 48%; --y: 0%; --h: 32%; --w: 76px; --sw: 4px; --sp: 12px; --c1: var(--spec-cyan); --c2: var(--accent); --o: .42; --blur: 1px; }
.b8 { --x: 50.5%; --y: 40%; --h: 54%; --w: 150px; --sw: 4px; --sp: 10px; --c1: var(--accent); --c2: var(--spec-cyan); --o: .5; --blur: 2px; }
.b9 { --x: 59%; --y: 16%; --h: 58%; --w: 104px; --sw: 6px; --sp: 15px; --c1: var(--spec-teal); --c2: var(--accent); --o: .7; --blur: 1.5px; }
.b10 { --x: 71%; --y: 24%; --h: 68%; --w: 160px; --sw: 7px; --sp: 16px; --c1: var(--accent); --c2: var(--spec-teal); --o: .78; --blur: 2px; }
.b11 { --x: 80%; --y: 4%; --h: 42%; --w: 94px; --sw: 3px; --sp: 10px; --c1: var(--spec-cyan); --c2: var(--accent); --o: .46; --blur: 1.5px; }
.b12 { --x: 83.5%; --y: 44%; --h: 52%; --w: 190px; --sw: 8px; --sp: 18px; --c1: var(--accent); --c2: var(--warn); --o: .7; --blur: 2.5px; }
.b13 { --x: 94%; --y: 28%; --h: 64%; --w: 110px; --sw: 5px; --sp: 13px; --c1: var(--spec-teal); --c2: var(--warn); --o: .6; --blur: 3px; }
.core { position: absolute; left: 68%; top: 0; bottom: 0; width: 30px; transform: translateX(-50%); mask-image: linear-gradient(to bottom, transparent 0, var(--bg) 18%, var(--bg) 100%); }
.core::before { content: ""; position: absolute; inset: 0 -90px; background: radial-gradient(ellipse 46% 62% at 50% 58%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%); }
.core i { position: absolute; inset: 0; background: linear-gradient(to right, transparent 0, color-mix(in srgb, var(--spec-cyan) 55%, transparent) 33%, var(--beam-core) 44%, var(--beam-core) 56%, color-mix(in srgb, var(--error) 45%, transparent) 67%, transparent 100%); filter: blur(1.2px); }
.core b { position: absolute; left: 50%; top: 22%; width: 4px; height: 46%; transform: translateX(-50%); background: var(--beam-core); color: var(--bg); filter: blur(3px); opacity: .9; }
.axis { position: relative; border-top: 1px solid var(--border-strong); }
.axis::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: repeating-linear-gradient(to right, var(--border-strong) 0 1px, transparent 1px 24px); }
.axis__ticks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding-top: 14px; }
.axis__ticks li { position: relative; font-family: var(--font-mono); font-size: 11px; line-height: 1; letter-spacing: .06em; color: var(--text-muted); white-space: nowrap; }
.axis__ticks li::before { content: ""; position: absolute; left: 0; top: -14px; width: 1px; height: 9px; background: var(--text-muted); }
.axis__ticks li:last-child { color: var(--text); }
.axis__ticks li:last-child::before { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.hero__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 468px); gap: 72px; align-items: center; margin-top: 30px; }
.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: var(--size-label); line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.eyebrow__mark { display: inline-flex; gap: 2px; flex: none; }
.eyebrow__mark i { width: 2px; height: 13px; background: var(--accent); }
.eyebrow__mark i:nth-child(2) { height: 9px; background: var(--spec-teal); }
.eyebrow__mark i:nth-child(3) { height: 11px; background: var(--spec-cyan); }
.hero h1 { margin-top: 20px; }
.hero h1 span { display: block; }
.lede { max-width: 560px; margin-top: 22px; font-size: var(--size-body); line-height: 1.72; color: var(--text-muted); }
.lede strong { font-weight: var(--weight-medium); color: var(--text); }
.platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.platforms a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; padding: 6px 11px; font-size: var(--size-small); line-height: 1; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--bg-panel) 70%, transparent); }
.platforms a:hover { color: var(--accent); border-color: var(--accent-dark); }
.platforms svg { width: 14px; height: 14px; flex: none; }
.mock { position: relative; justify-self: end; width: 100%; }
.halftone { position: absolute; inset: -34px -40px -44px 64px; pointer-events: none; mask-image: radial-gradient(ellipse 66% 64% at 62% 52%, var(--bg) 26%, transparent 76%); }
.halftone i { position: absolute; inset: 0; background: linear-gradient(120deg, var(--accent) 0%, var(--spec-teal) 46%, var(--warn) 100%); mask-image: radial-gradient(circle at center, var(--bg) 1.3px, transparent 1.8px); mask-size: 7px 7px; opacity: .34; }
.stage { position: relative; transform: perspective(1600px) rotateY(-7deg) rotateX(3deg); transform-origin: 0% 50%; }
.plate { position: absolute; inset: 0; transform: translate(12px, 12px); background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); box-shadow: 0 44px 70px -30px var(--shade); }
.console { position: relative; background: linear-gradient(to bottom, var(--bg-panel-2), var(--bg-panel) 140px); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: inset 0 1px 0 var(--rim), 0 28px 52px -18px var(--shade); }
.console::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 1px; background: linear-gradient(to right, transparent 0, color-mix(in srgb, var(--accent) 70%, transparent) 5%, var(--beam-core) 15%, color-mix(in srgb, var(--accent) 50%, transparent) 34%, transparent 72%); }
.console::after { content: ""; position: absolute; left: 0; top: -36px; width: 60%; height: 72px; pointer-events: none; background: radial-gradient(ellipse 55% 50% at 24% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%); }
.console__bar { display: flex; align-items: center; gap: 14px; min-height: 38px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.dots { display: inline-flex; gap: 6px; flex: none; }
.dots i { width: 8px; height: 8px; border-radius: var(--radius-dot); background: var(--border-strong); }
.console__title { flex: 1; text-align: center; font-family: var(--font-mono); font-size: var(--size-label); color: var(--text-muted); }
.console__tag { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: .06em; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; padding: 8px 18px; }
.row + .row { border-top: 1px solid var(--border); }
.row dt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; min-width: 0; }
.row__name { font-size: var(--size-small); color: var(--text); }
.row dt code { font-size: 11px; color: var(--text-muted); }
.row dd { flex-shrink: 0; }
.seg { display: inline-flex; border: 1px solid var(--border); }
.seg span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--size-label); line-height: 1.3; color: var(--text-muted); }
.seg span + span { border-left: 1px solid var(--border); }
.seg .seg__on { background: var(--bg-panel-2); color: var(--text); }
.seg .seg__on::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: var(--radius-dot); background: var(--accent); }
.field { display: inline-block; min-width: 68px; padding: 4px 10px; font-family: var(--font-mono); font-size: var(--size-label); line-height: 1.3; text-align: right; color: var(--text); border: 1px solid var(--border); background: var(--bg); }
.field--select { color: var(--text-muted); }
.switch { position: relative; display: inline-block; width: 32px; height: 18px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; background: var(--text-muted); }
.switch.is-on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.switch.is-on::after { left: 16px; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
.brief { position: relative; z-index: 1; }
.brief__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px; padding-top: 24px; padding-bottom: 96px; border-top: 1px solid var(--border); }
.brief p { font-size: var(--size-body); line-height: 1.66; color: var(--text-muted); }
.brief strong { font-weight: var(--weight-medium); color: var(--text); }
.fact-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding-block: 20px; border-block: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--size-label); color: var(--text-muted); }
.fact-strip strong { color: var(--text); font-weight: var(--weight-normal); }
@media (max-width: 1280px) {
  .topbar__in { gap: 32px; }
  .mainnav > ul { gap: 22px; }
}
@media (max-width: 1180px) {
  .hero__body { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 48px; }
  .mainnav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-tools { margin-left: auto; }
  .mobile-drawer:not([hidden]) { display: block; position: absolute; top: var(--header-h); left: 0; right: 0; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; z-index: 3; padding: 16px var(--gutter) 24px; background: var(--bg-panel); color: var(--text); border-bottom: 1px solid var(--border-strong); }
  .mobile-drawer a { display: flex; width: 100%; align-items: center; min-height: 44px; padding: 11px 12px; font-size: 14px; }
  .mobile-drawer a[aria-current] { color: var(--text); background: var(--bg-panel-2); }
  .mobile-languages { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 16px; }
}
@media (max-width: 980px) {
  :root { --gutter: 28px; --space-section: 72px; }
  .hero__body { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .mock { justify-self: start; max-width: 480px; }
  .brief__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .axis__ticks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .axis__ticks li:nth-child(n+5):not(:last-child) { display: none; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  :root { --size-h1: clamp(24px, 5vw, 30px); --size-h2: 28px; }
  .hero { min-height: auto; padding-top: 0; padding-bottom: 32px; }
  .spectrum { height: 220px; }
  .brand span { font-size: 14px; }
  .stage { transform: none; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; --space-section: 56px; }
  .topbar__in { gap: 12px; }
  .brand { gap: 8px; }
  .brand img { width: 26px; height: 26px; }
  .brand span { font-size: var(--size-small); }
  .lang-long { display: none; }
  .lang-short { display: inline; }
  .lang { padding-inline: 9px; }
  .lang svg { display: none; }
  .header-tools { gap: 6px; margin-left: auto; }
  .tilt, .stage { transform: none !important; }
  .hero__body { gap: 38px; }
  .brief__grid, .card-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .brief__grid { gap: 20px; padding-bottom: 48px; }
  .axis__ticks { grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
  .axis__ticks li:nth-child(2) { display: none; }
  .axis__ticks li { font-size: 9px; letter-spacing: 0; }
  .row { padding-inline: 12px; gap: 8px; }
  .row dt { gap: 4px; }
  .seg span { padding-inline: 6px; }
  .console__bar { gap: 8px; }
  .card, .panel { padding: 22px; }
  .platforms { gap: 6px; }
  .platforms a { padding-inline: 8px; }
  .footer-grid { gap: 32px; }
  .footer-bottom { align-items: flex-start; }
  pre { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-pending { opacity: 1; transform: none; }
}