:root {
  --bg:#FFFFFF;
  --bg-panel:#F6F6F7;
  --bg-panel-2:#EEEEF0;
  --border:#E5E5E8;
  --accent:#B0277F;
  --accent-dark:#7E1A5B;
  --accent-glow:#E06AB8;
  --text:#16151A;
  --text-muted:#6B6A72;
  --success:#1F8A5B;
  --warn:#B7791F;
  --error:#C2362F;
  --frame-bg:#0D0C10;
  --frame-line:#26232C;
  --sky-top:#0D0C10;
  --sky-horizon:#1C1622;
  --ridge-far:#2A2531;
  --ridge-near:#17141B;
  --ground-top:#121015;
  --ground:#08070A;
  --headlight:#F4F2F7;
  --on-dark:#FFFFFF;
  --on-dark-soft:rgba(244,242,247,.66);
  --on-dark-faint:rgba(244,242,247,.46);
  --on-dark-line:rgba(244,242,247,.16);
  --on-dark-line-strong:rgba(244,242,247,.34);
  --on-dark-wash:rgba(244,242,247,.045);
  --letterbox:rgba(0,0,0,.52);
  --letterbox-edge:rgba(244,242,247,.06);
  --clear:transparent;
  --font-display:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Hiragino Kaku Gothic ProN","Apple SD Gothic Neo","Malgun Gothic","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Hiragino Kaku Gothic ProN","Apple SD Gothic Neo","Malgun Gothic","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --r-ctl:6px;
  --r-card:10px;
  --r-pill:999px;
  --r-round:50%;
  --weight-normal:400;
  --weight-medium:500;
  --nav-h:64px;
  --gutter:24px;
  --below-frame:104px;
  --bar-h:40px;
  --reading-width:1120px;
  --header-width:1280px;
  --ease:cubic-bezier(.4,0,.2,1);
  --duration:.2s;
  --section-space:96px;
  --focus-width:2px;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.nav-open { overflow:hidden; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden] { display:none !important; }
img,svg { max-width:100%; vertical-align:middle; }
img { height:auto; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:var(--clear); }
button { cursor:pointer; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-dark); }
:focus-visible { outline:var(--focus-width) solid var(--accent); outline-offset:3px; border-radius:var(--r-ctl); }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-normal); text-wrap:balance; }
h1 { font-size:clamp(34px,3.3vw,48px); line-height:1.12; letter-spacing:-.02em; }
h2 { margin:0 0 24px; font-size:clamp(26px,2.8vw,38px); line-height:1.2; letter-spacing:-.015em; }
h3 { margin:0 0 16px; font-size:24px; line-height:1.35; }
h4 { font-size:19px; }
p { margin:0 0 20px; }
strong { font-weight:var(--weight-medium); }
small,.small { font-size:12.5px; }
.muted { color:var(--text-muted); }
.nowrap { white-space:nowrap; }
code,kbd,pre { font-family:var(--font-mono); }
code { overflow-wrap:anywhere; font-size:.9em; }
pre { max-width:100%; min-width:0; overflow-x:auto; padding:24px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); line-height:1.75; font-size:13px; }
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; font-size:inherit; }
ul,ol { padding-inline-start:1.5em; }
.list-reset { list-style:none; margin:0; padding:0; }
.wrap { width:100%; max-width:calc(var(--reading-width) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space); }
.section-heading { max-width:720px; margin-bottom:40px; }
.section-heading p { color:var(--text-muted); }
.grid { display:grid; gap:24px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid > *, .frame > *, .feature-panel > *, .footer-grid > * { min-width:0; }
.card,.panel { min-width:0; padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); }
.panel { background:var(--bg-panel); color:var(--text); }
.card p:last-child,.panel p:last-child { margin-bottom:0; }
.icon { width:20px; height:20px; flex-shrink:0; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:10px 20px; border-radius:var(--r-ctl);
  border:1px solid var(--clear); font-size:15px; font-weight:var(--weight-medium);
  letter-spacing:.005em; line-height:1.6; text-align:center;
  transition:border-color var(--duration) var(--ease),background-color var(--duration) var(--ease),color var(--duration) var(--ease);
}
.btn svg { width:16px; height:16px; flex-shrink:0; }
.btn-primary { background:var(--on-dark); color:var(--text); box-shadow:inset 0 0 0 0 var(--accent); }
.btn-primary:hover,.btn-primary.is-hover { color:var(--text); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.btn-solid { background:var(--text); color:var(--on-dark); }
.btn-solid:hover,.btn-solid.is-hover { background:var(--text); color:var(--on-dark); border-color:var(--accent); }
.btn-secondary { border-color:var(--border); background:var(--bg-panel); color:var(--text); }
.btn-secondary:hover { border-color:var(--text-muted); color:var(--text); }
.btn-ghost { color:var(--on-dark); border-color:var(--on-dark-line-strong); background:var(--clear); }
.btn-ghost:hover { border-color:var(--on-dark); background:var(--on-dark-wash); color:var(--on-dark); }
.btn:disabled,.btn[aria-disabled="true"] { cursor:not-allowed; background:var(--bg-panel-2); color:var(--text-muted); border-color:var(--border); box-shadow:none; }
.btn.is-focus { outline:var(--focus-width) solid var(--accent); outline-offset:3px; }
.masthead {
  position:relative; z-index:40; height:var(--nav-h);
  max-width:min(100%,calc(var(--header-width) + var(--gutter) * 2));
  margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--bg); color:var(--text);
}
.brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; font-size:15px; font-weight:var(--weight-medium); letter-spacing:-.005em; color:var(--text); }
.brand:hover { color:var(--text); }
.brand-mark { width:30px; height:30px; flex-shrink:0; display:block; }
.topnav { display:flex; align-items:center; min-width:0; margin-left:auto; }
.topnav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:30px; }
.topnav a { display:block; white-space:nowrap; font-size:14.5px; letter-spacing:.01em; color:var(--text-muted); transition:color var(--duration) var(--ease); }
.topnav a:hover { color:var(--text); }
.topnav a[aria-current="page"] { color:var(--text); font-weight:var(--weight-medium); }
.header-tools { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.language-picker { position:relative; }
.lang { appearance:none; border:0; border-left:1px solid var(--border); background:var(--clear); color:var(--text-muted); margin:0; padding:2px 0 2px 26px; font-size:14.5px; letter-spacing:.01em; min-height:44px; }
.lang:hover { color:var(--text); }
.lang-caret { font-size:11px; margin-left:4px; }
.lang-short { display:none; }
.language-menu { position:absolute; z-index:45; top:100%; right:0; min-width:180px; padding:8px; border:1px solid var(--border); border-radius:var(--r-ctl); background:var(--bg); color:var(--text); list-style:none; margin:0; }
.language-menu a { display:block; padding:11px 14px; min-height:44px; color:var(--text-muted); }
.language-menu a:hover,.language-menu a[aria-current] { background:var(--bg-panel); color:var(--text); }
.menu-toggle { display:none; min-width:44px; min-height:44px; padding:10px; border:1px solid var(--border); border-radius:var(--r-ctl); background:var(--bg); color:var(--text); }
.menu-toggle svg { display:block; width:22px; height:22px; }
.mobile-drawer { display:none; }
.nav-veil { position:fixed; inset:var(--nav-h) 0 0; z-index:30; border:0; background:var(--letterbox); color:var(--on-dark); }
.hero { padding-inline:var(--gutter); overflow-x:clip; }
.frame {
  position:relative; height:clamp(540px,calc(100vh - var(--nav-h) - var(--below-frame)),820px);
  display:grid; grid-template-columns:44fr 56fr; background:var(--frame-bg); color:var(--on-dark);
  border:1px solid var(--frame-line); border-radius:var(--r-card); overflow:hidden; isolation:isolate;
}
.matte { position:absolute; left:0; right:0; height:var(--bar-h); z-index:3; display:flex; align-items:center; justify-content:space-between; padding:0 28px 0 56px; background:var(--letterbox); color:var(--on-dark-faint); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.05em; pointer-events:none; }
.matte--top { top:0; border-bottom:1px solid var(--letterbox-edge); }
.matte--bottom { bottom:0; border-top:1px solid var(--letterbox-edge); justify-content:flex-end; }
.matte-key { color:var(--on-dark-soft); }
.matte-arrow { color:var(--accent-glow); padding-inline:6px; }
.copy { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:calc(var(--bar-h) + 40px) 48px calc(var(--bar-h) + 46px) 56px; color:var(--on-dark); }
.tag { align-self:flex-start; display:inline-flex; align-items:center; gap:10px; min-height:28px; padding:3px 13px 3px 11px; border:1px solid var(--on-dark-line); border-radius:var(--r-pill); background:var(--on-dark-wash); color:var(--on-dark-soft); font-size:12.5px; letter-spacing:.02em; }
.tag-dot { position:relative; width:7px; height:7px; flex-shrink:0; border-radius:var(--r-round); background:var(--accent-glow); color:var(--text); }
.tag-dot::after { content:""; position:absolute; inset:-4px; border-radius:var(--r-round); border:1px solid var(--accent); opacity:.55; }
.hero-title { margin:24px 0 0; font-family:var(--font-display); font-weight:var(--weight-normal); font-size:clamp(30px,3.1vw,46px); line-height:1.1; letter-spacing:-.02em; }
.ht-line { display:block; }
.ht-a { color:var(--on-dark); }
.ht-sep { color:var(--on-dark-faint); }
.ht-b { color:var(--on-dark-soft); }
.lede { margin:28px 0 0; max-width:30em; font-size:15px; line-height:1.72; color:var(--on-dark-soft); }
.lede strong { color:var(--on-dark); font-weight:var(--weight-medium); }
.protocols { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none; }
.protocols li { min-height:26px; display:inline-flex; align-items:center; padding:3px 11px; border:1px solid var(--on-dark-line); border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; color:var(--on-dark-soft); }
.scene { position:relative; z-index:1; border-left:1px solid var(--frame-line); overflow:hidden; }
.scene-svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.s-sky-top { stop-color:var(--sky-top); }
.s-sky-hz { stop-color:var(--sky-horizon); }
.s-gr-top { stop-color:var(--ground-top); }
.s-gr-low { stop-color:var(--ground); }
.s-hz-0 { stop-color:var(--headlight); stop-opacity:0; }
.s-hz-1 { stop-color:var(--headlight); stop-opacity:.42; }
.s-head-far { stop-color:var(--headlight); stop-opacity:1; }
.s-head-near { stop-color:var(--headlight); stop-opacity:.42; }
.s-tail-near { stop-color:var(--accent); }
.s-tail-far { stop-color:var(--accent-glow); }
.s-glow-a { stop-color:var(--headlight); stop-opacity:.34; }
.s-glow-b { stop-color:var(--headlight); stop-opacity:0; }
.s-vig-a { stop-color:var(--frame-bg); stop-opacity:0; }
.s-vig-b { stop-color:var(--frame-bg); stop-opacity:.62; }
.ridge-far { fill:var(--ridge-far); }
.ridge-near { fill:var(--ridge-near); }
.road { fill:var(--on-dark-wash); }
.glow-core { fill:var(--headlight); opacity:.5; }
.trail { opacity:1; }
.platforms { height:var(--below-frame); display:flex; align-items:center; justify-content:center; padding-inline:var(--gutter); }
.platforms ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; }
.platforms li+li { border-left:1px solid var(--border); }
.platforms a { display:inline-flex; align-items:center; gap:10px; padding:6px 30px; font-size:14px; letter-spacing:.01em; color:var(--text-muted); transition:color var(--duration) var(--ease); }
.platforms a:hover { color:var(--accent); }
.pf-ico { width:17px; height:17px; flex-shrink:0; color:var(--text); }
.pf-ico--tux { width:15px; height:17px; }
.platforms a:hover .pf-ico { color:var(--accent); }
.prose { min-width:0; max-width:800px; line-height:1.9; }
.prose h2 { margin-top:64px; scroll-margin-top:32px; }
.prose h3 { margin-top:36px; scroll-margin-top:32px; }
.prose p,.prose li { overflow-wrap:break-word; }
.prose :where(div,section,article) { min-width:0; max-width:100%; }
.site-footer { margin-top:64px; border-top:1px solid var(--border); padding-top:64px; padding-bottom:24px; background:var(--bg); color:var(--text); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1fr; gap:40px; }
.footer-brand p { margin-top:20px; max-width:25em; color:var(--text-muted); font-size:14px; }
.footer-heading { margin:0 0 18px; font-size:14px; font-weight:var(--weight-medium); }
.footer-links { list-style:none; margin:0; padding:0; }
.footer-links a { display:inline-block; padding-top:5px; padding-bottom:5px; color:var(--text-muted); font-size:13px; }
.footer-links a:hover { color:var(--accent); }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; border-top:1px solid var(--border); margin-top:48px; padding-top:24px; color:var(--text-muted); font-size:12px; }
.footer-bottom a { color:var(--text-muted); }
.reveal { opacity:1; transform:none; }
.reveal-pending .reveal:not(.shown) { opacity:0; transform:translateY(16px); }
.reveal-pending .reveal { transition:opacity .55s var(--ease),transform .55s var(--ease); }
.reveal.shown { opacity:1; transform:none; }
@media (max-width:1280px) {
  .masthead { gap:18px; }
  .topnav ul { gap:22px; }
}
@media (max-width:1180px) {
  .frame { grid-template-columns:1fr 1fr; }
  .copy { padding-left:40px; padding-right:36px; }
  .matte { padding-left:40px; }
  .topnav { display:none; }
  .header-tools { margin-left:auto; }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .mobile-drawer:not([hidden]) { display:block; position:absolute; top:100%; left:0; right:0; z-index:44; padding:16px var(--gutter) 24px; max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain; border-top:1px solid var(--border); background:var(--bg); color:var(--text); }
  .mobile-drawer ul { list-style:none; margin:0; padding:0; }
  .mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:11px 12px; color:var(--text-muted); }
  .mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--bg-panel); color:var(--text); }
  .drawer-languages { margin-top:16px !important; padding-top:16px !important; border-top:1px solid var(--border); }
}
@media (max-width:900px) {
  :root { --gutter:16px; --section-space:64px; }
  .frame { height:auto; grid-template-columns:1fr; }
  .scene { order:-1; height:62vw; min-height:280px; border-left:0; border-bottom:1px solid var(--frame-line); }
  .copy { padding:32px 24px calc(var(--bar-h) + 32px); }
  .matte { padding-inline:16px; font-size:10.5px; }
  .hero-title { font-size:clamp(24px,6.6vw,30px); }
  .lede { font-size:14.5px; }
  .platforms { height:auto; padding-top:22px; padding-bottom:26px; }
  .platforms ul { flex-wrap:wrap; justify-content:center; row-gap:10px; }
  .platforms a { padding:6px 16px; }
  .grid-3,.grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  h1 { font-size:clamp(24px,5vw,30px); }
}
@media (max-width:640px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:minmax(0,1fr); }
  .tilt,[data-tilt] { transform:none !important; }
  .card,.panel { padding:22px; }
  pre { padding:18px; }
  .masthead { gap:10px; }
  .brand { font-size:13px; gap:8px; }
  .brand-mark { width:26px; height:26px; }
  .header-tools { margin-left:auto; gap:6px; }
  .lang { padding-left:10px; font-size:13px; }
  .lang-long { display:none; }
  .lang-short { display:inline; }
  .footer-grid { gap:32px 20px; }
}
@media (max-width:520px) {
  .matte--top span:last-child { display:none; }
  .platforms li+li { border-left:0; }
  .copy { padding-inline:20px; }
  .hero-title { font-size:24px; }
  .scene { height:240px; min-height:240px; }
  .footer-brand { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal-pending .reveal:not(.shown) { opacity:1; transform:none; }
}