:root {
  --c-field:#3A57FB;
  --c-field-deep:#2E46D8;
  --c-field-ink:#2437C9;
  --c-field-ring:rgba(58,87,251,.16);
  --c-paper:#3A57FB;
  --c-paper-2:#2E46D8;
  --c-line:rgba(255,255,255,.24);
  --c-line-strong:rgba(255,255,255,.48);
  --c-link:#C8F3FF;
  --c-on-accent:#11142B;
  --c-accent:#FF8A00;
  --c-accent-dark:#D96C00;
  --c-accent-soft:#2437A8;
  --c-cyan:#3FD2F2;
  --c-cyan-pale:#9BE6FA;
  --c-peach:#FFD9A8;
  --c-ink:#FFFFFF;
  --c-ink-muted:#E2E8FF;
  --c-ink-faint:#C9D3FF;
  --c-white:#FFFFFF;
  --c-white-88:rgba(255,255,255,.88);
  --c-white-72:rgba(255,255,255,.72);
  --c-white-56:rgba(255,255,255,.56);
  --c-white-36:rgba(255,255,255,.36);
  --c-white-24:rgba(255,255,255,.24);
  --c-white-14:rgba(255,255,255,.14);
  --c-white-08:rgba(255,255,255,.08);
  --c-glow-orange:rgba(255,138,0,.22);
  --c-glow-cyan:rgba(63,210,242,.22);
  --c-shade-06:rgba(17,20,43,.06);
  --c-shade-14:rgba(17,20,43,.14);
  --c-shade-30:rgba(17,20,43,.30);
  --c-shade-42:rgba(17,20,43,.42);
  --c-success:#1FA971;
  --c-warn:#E0A100;
  --c-error:#E5484D;
  --c-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','Yu Gothic','Apple SD Gothic Neo','Malgun Gothic','Microsoft YaHei',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  --fs-body:16px;
  --fs-small:14px;
  --fs-caption:12px;
  --fs-h1:clamp(34px,3.4vw,48px);
  --fs-h2:clamp(30px,4vw,52px);
  --fs-h3:24px;
  --weight-normal:400;
  --weight-medium:500;
  --weight-strong:600;
  --leading-body:1.8;
  --leading-title:1.14;

  --r-sq:4px;
  --r-ctl:6px;
  --r-win:8px;
  --r-card:10px;
  --r-frame:14px;
  --r-pill:999px;
  --r-round:50%;
  --sh-window:0 1px 2px var(--c-shade-06),0 14px 36px var(--c-shade-14);
  --sh-frame:0 44px 80px -40px var(--c-shade-42);
  --sh-menu:0 1px 2px var(--c-shade-06),0 18px 40px var(--c-shade-14);
  --sh-card:0 1px 2px var(--c-shade-06),0 6px 18px var(--c-shade-06);
  --focus-ring:0 0 0 3px var(--c-field-ring);
  --wrap:1280px;
  --reading:800px;
  --gutter:24px;
  --header-height:72px;
  --section-space:88px;
  --motion-fast:180ms;
  --motion-reveal:650ms;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
html,body { margin:0; padding:0; }
html.nav-open { overflow:hidden; }
body {
  color:var(--c-ink);
  background:var(--c-paper);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body,main,section,article,aside,nav,header,footer,div { min-width:0; }
img,svg,video { max-width:100%; }
img { display:block; height:auto; }
svg { vertical-align:middle; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button {
  color:inherit;
  background:var(--c-clear);
  border:0;
  padding:0;
  cursor:pointer;
}
button:disabled { cursor:not-allowed; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:var(--c-field-ring); }
:focus-visible { outline:2px solid var(--c-field); outline-offset:4px; }
.field :focus-visible,.topbar :focus-visible { outline-color:var(--c-white); }
[hidden] { display:none !important; }
p,ul,ol,dl,blockquote,figure { margin:0; }
ul,ol { padding-left:1.5em; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-normal); margin:0; text-wrap:balance; }
h1 { font-size:var(--fs-h1); line-height:var(--leading-title); letter-spacing:-.005em; }
h2 { font-size:var(--fs-h2); line-height:1.2; }
h3 { font-size:var(--fs-h3); line-height:1.4; }
h4 { font-size:var(--fs-body); line-height:1.5; }
strong { font-weight:var(--weight-strong); }
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:20px;
  color:var(--c-ink);
  background:var(--c-paper-2);
  border:1px solid var(--c-line);
  border-radius:var(--r-ctl);
  font-size:var(--fs-small);
  line-height:1.7;
}
pre code { overflow-wrap:normal; white-space:pre; font-size:inherit; }
hr { border:0; border-top:1px solid var(--c-line); margin-block:32px; }
.wrap {
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.reading { max-width:calc(var(--reading) + var(--gutter) * 2); }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space); }
.section--muted { color:var(--c-ink); background:var(--c-paper-2); }
.section__head { margin-bottom:36px; max-width:850px; }
.section__head p { margin-top:18px; color:var(--c-ink-muted); }
.nowrap { white-space:nowrap; }
h2 > .nowrap { white-space:normal; overflow-wrap:break-word; }
.muted { color:var(--c-ink-muted); }
.mono { font-family:var(--font-mono); }
.text-link { color:var(--c-link); text-decoration:underline; text-underline-offset:4px; }
.text-link:hover { color:var(--c-white); }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  top:8px;
  left:var(--gutter);
  transform:translateY(-160%);
  padding:10px 16px;
  background:var(--c-paper);
  color:var(--c-ink);
  z-index:200;
  border-radius:var(--r-ctl);
}
.skip-link:focus { transform:none; }
.prose { min-width:0; overflow-wrap:break-word; }
.prose :where(h2,h3,h4) { margin-top:1.8em; margin-bottom:.65em; }
.prose :where(p,ul,ol,dl,pre,blockquote,table) { margin-bottom:1.25em; }
.prose li + li { margin-top:.45em; }
.prose a:not(.button):not(.btn-main) { color:var(--c-link); text-decoration:underline; text-underline-offset:3px; }
.prose :where(h2,h3)[id] { scroll-margin-top:32px; }

.button,.btn-main,.btn-ghost,.btn-frame {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 26px;
  border-radius:var(--r-ctl);
  font-size:var(--fs-body);
  font-weight:var(--weight-medium);
  line-height:1.4;
  text-align:center;
  transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast);
}
.button { background:var(--c-field); color:var(--c-white); border:1px solid var(--c-field); }
.button:hover,.button.is-hover { background:var(--c-field-deep); border-color:var(--c-link); color:var(--c-white); }
.btn-main { background:var(--c-accent); color:var(--c-on-accent); border:1px solid var(--c-accent); }
.btn-main:hover,.btn-main.is-hover { background:var(--c-accent-dark); color:var(--c-on-accent); border-color:var(--c-accent-dark); }
.button--outline { background:var(--c-paper); color:var(--c-link); border:1px solid var(--c-line-strong); }
.button--outline:hover { background:var(--c-paper-2); color:var(--c-white); border-color:var(--c-field); }
.btn-ghost { background:var(--c-clear); color:var(--c-white); border:1px solid var(--c-white-88); font-weight:var(--weight-normal); }
.btn-ghost:hover { background:var(--c-white-14); color:var(--c-white); }
.btn-frame {
  min-height:40px;
  padding:0 18px;
  background:var(--c-clear);
  color:var(--c-white);
  border:1px solid var(--c-white);
  border-radius:var(--r-sq);
  font-size:var(--fs-small);
}
.btn-frame:hover { background:var(--c-white-14); color:var(--c-white); }
.button:disabled,.button[aria-disabled="true"] { background:var(--c-paper-2); color:var(--c-ink-muted); border-color:var(--c-line); }
.button.is-focus { box-shadow:var(--focus-ring); outline:2px solid var(--c-field); outline-offset:3px; }
.button svg,.btn-main svg,.btn-ghost svg { width:18px; height:18px; flex-shrink:0; }
.card,.panel {
  padding:28px;
  background:var(--c-paper);
  color:var(--c-ink);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
}
.card p,.panel p { margin-top:14px; color:var(--c-ink-muted); }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.card-grid > * { min-width:0; }

.field { position:relative; background:var(--c-field); color:var(--c-white); overflow-x:clip; }
.topbar {
  position:relative;
  z-index:50;
  height:var(--header-height);
  background:var(--c-field);
  color:var(--c-white);
}
.topbar__row {
  position:relative;
  display:flex;
  align-items:center;
  gap:44px;
  height:100%;
  width:100%;
  max-width:min(100%,calc(1280px + var(--gutter) * 2));
  padding-inline:var(--gutter);
  margin-inline:auto;
}
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; }
.brand__mark { width:32px; height:32px; flex-shrink:0; }
.brand__name { font-family:var(--font-display); font-size:17px; font-weight:var(--weight-medium); letter-spacing:.01em; }
.mainnav { flex:1; min-width:0; }
.mainnav__list { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:30px; }
.mainnav__link,.more__toggle {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  color:var(--c-white-88);
  font-size:15px;
  white-space:nowrap;
}
.mainnav__link:hover,.more__toggle:hover,.mainnav__link.is-current { color:var(--c-white); }
.mainnav__link.is-current::after,.more__toggle.is-current::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:2px;
  background:var(--c-accent);
  border-radius:var(--r-pill);
}
.chev { width:12px; height:12px; flex-shrink:0; }
.more { position:relative; }
.more__toggle { list-style:none; cursor:pointer; }
.more__toggle::-webkit-details-marker { display:none; }
.more__panel {
  position:absolute;
  top:calc(100% + 8px);
  left:-18px;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(2,200px);
  gap:4px 18px;
  padding:16px 18px;
  background:var(--c-paper);
  color:var(--c-ink);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-menu);
}
.more__head { font-family:var(--font-mono); font-size:11px; color:var(--c-ink-muted); padding:2px 10px 8px; letter-spacing:.04em; }
.more__item { display:block; min-height:44px; padding:8px 10px; border-radius:var(--r-ctl); }
.more__item:hover { background:var(--c-paper-2); color:var(--c-ink); }
.more__item.is-current { background:var(--c-accent-soft); color:var(--c-ink); box-shadow:inset 3px 0 var(--c-accent); }
.more__name { display:block; font-size:14px; }
.more__hint { display:block; margin-top:2px; font-size:12px; color:var(--c-ink-muted); }
.topbar__tools { display:flex; align-items:center; gap:22px; flex-shrink:0; margin-left:auto; }
.language { position:relative; }
.lang {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  font-size:14px;
  color:var(--c-white-88);
  white-space:nowrap;
}
.lang__globe { width:16px; height:16px; flex-shrink:0; }
.lang__short { display:none; }
.language__panel {
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:180px;
  padding:8px;
  background:var(--c-paper);
  color:var(--c-ink);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-menu);
  z-index:6;
}
.language__panel a { display:flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:var(--r-ctl); }
.language__panel a:hover { color:var(--c-ink); background:var(--c-paper-2); }
.language__panel a[aria-current] { color:var(--c-ink); background:var(--c-accent-soft); }
.hamburger { display:none; min-width:44px; min-height:44px; align-items:center; justify-content:center; color:var(--c-white); border:1px solid var(--c-white-36); border-radius:var(--r-ctl); }
.hamburger svg { width:22px; height:22px; flex-shrink:0; }
.mobile-nav { display:none; }
.nav-veil { position:fixed; inset:var(--header-height) 0 0; z-index:1; background:var(--c-shade-42); color:var(--c-white); }
.preview-mobile { display:none; }

.site-footer { background:var(--c-paper-2); color:var(--c-ink); border-top:1px solid var(--c-line); padding-top:64px; padding-bottom:28px; }
.footer__grid { display:grid; grid-template-columns:1.25fr .8fr 1.4fr .75fr; gap:40px; }
.footer__intro p { margin-top:18px; max-width:320px; font-size:var(--fs-small); color:var(--c-ink-muted); }
.footer__heading { font-size:var(--fs-small); font-weight:var(--weight-medium); margin-bottom:14px; }
.footer__links { list-style:none; padding:0; margin:0; }
.footer__links a { display:block; padding-block:5px; font-size:var(--fs-small); color:var(--c-ink-muted); overflow-wrap:break-word; }
.footer__links a:hover { color:var(--c-link); text-decoration:underline; text-underline-offset:3px; }
.footer__bottom { margin-top:44px; padding-top:22px; border-top:1px solid var(--c-line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 28px; color:var(--c-ink-muted); font-size:var(--fs-caption); }
.footer__legal { display:flex; flex-wrap:wrap; gap:20px; }
.reveal { opacity:1; transform:none; }
html.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(18px); }
html.reveal-ready .reveal { transition:opacity var(--motion-reveal) ease,transform var(--motion-reveal) ease; }
@media (max-width:1180px) {
  .topbar__row { gap:28px; }
  .mainnav__list { gap:22px; }
  .topbar__tools { gap:16px; }
}
@media (max-width:1024px) {
  .mainnav,.topbar__tools > .btn-frame { display:none; }
  .topbar__tools { margin-left:auto; gap:12px; }
  .hamburger { display:inline-flex; }
  .mobile-nav {
    display:block;
    position:fixed;
    top:var(--header-height);
    left:0;
    right:0;
    z-index:3;
    max-height:calc(100dvh - var(--header-height));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:16px var(--gutter) 24px;
    color:var(--c-ink);
    background:var(--c-paper);
    border-bottom:1px solid var(--c-line);
    box-shadow:var(--sh-menu);
  }
  .mobile-nav ul { list-style:none; padding:0; margin:0; }
  .mobile-nav a { display:flex; align-items:center; width:100%; min-height:48px; padding:10px 16px; border-radius:var(--r-ctl); }
  .mobile-nav a:hover { background:var(--c-paper-2); color:var(--c-ink); }
  .mobile-nav a[aria-current] { background:var(--c-accent-soft); color:var(--c-ink); box-shadow:inset 3px 0 var(--c-accent); }
  .mobile-nav__languages { margin-top:16px; padding-top:16px; border-top:1px solid var(--c-line); }
  .mobile-nav__label { padding:8px 16px; color:var(--c-ink-muted); font-size:var(--fs-caption); }
  .preview-mobile { display:block; position:static; }
  .preview-mobile > summary { list-style:none; }
  .preview-mobile > summary::-webkit-details-marker { display:none; }
  .preview-mobile .mobile-nav { position:absolute; }
  .footer__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  :root { --fs-h1:clamp(24px,7vw,30px); --fs-h2:clamp(28px,6vw,36px); --section-space:56px; }
}
@media (max-width:640px) {
  :root { --gutter:16px; }
  .topbar__row { gap:12px; }
  .brand { gap:8px; }
  .brand__name { font-size:14px; }
  .brand__mark { width:28px; height:28px; }
  .lang__full,.lang__globe { display:none; }
  .lang__short { display:inline; }
  .topbar__tools { gap:8px; margin-left:auto; }
  .card-grid,.footer__grid { grid-template-columns:minmax(0,1fr); }
  .card,.panel { padding:22px; }
  .footer__grid { gap:28px; }
  .footer__bottom { margin-top:28px; }
  .tilt,.stage__tilt,[class$="__tilt"] { transform:none !important; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  html.reveal-ready .reveal:not(.shown) { opacity:1; transform:none; }
}