:root {
  --c-bg: #ffffff;
  --c-surface: #f6f6f8;
  --c-panel: #f1fae3;
  --c-panel-line: #d9e9bf;
  --c-panel-2: #f6eefa;
  --c-panel-2-line: #e6d3ee;
  --c-border: #e6e6ea;
  --c-border-strong: #cfcfd6;
  --c-accent: #b52ac0;
  --c-accent-dark: #7d1a87;
  --c-highlight: #d9f24f;
  --c-text: #141416;
  --c-muted: #6b6b72;
  --c-faint: #a6a6ae;
  --c-success: #1f9e6e;
  --c-warn: #f08a24;
  --c-error: #d6343f;
  --c-on-accent: #ffffff;
  --c-veil: rgba(255,255,255,.2);
  --c-veil-line: rgba(255,255,255,.55);
  --c-success-halo: rgba(31,158,110,.2);
  --c-scrim: rgba(20,20,22,.25);
  --c-clear: transparent;

  --f-display: 'Inter','Noto Sans SC','Noto Sans JP','Noto Sans KR',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans','Apple SD Gothic Neo',sans-serif;
  --f-body: 'Inter','Noto Sans SC','Noto Sans JP','Noto Sans KR',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans','Apple SD Gothic Neo','Microsoft YaHei',sans-serif;
  --f-mono: 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --fs-h1: clamp(34px, calc(2.2vw + 16px), 48px);
  --fs-h2: clamp(26px, 3vw, 38px);
  --fs-h3: 24px;
  --fs-tab: 26px;
  --fs-body: 16px;
  --fs-lede: 17px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-micro: 12px;
  --fs-nav: 15px;
  --fs-rule: 13.5px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --tracking-display: -.03em;
  --tracking-cjk: -.02em;
  --tracking-ui: -.01em;
  --tracking-meta: .06em;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-logo: 8px;
  --r-btn: 14px;
  --r-card: 20px;
  --r-slab: 36px;
  --r-panel: 40px;
  --r-phone: 48px;
  --r-screen: 39px;
  --r-tiny: 3px;
  --r-pill: 999px;
  --r-circle: 50%;

  --wrap: 1440px;
  --reading: 840px;
  --gutter: 64px;
  --nav-h: 72px;
  --peek-h: 40px;
  --section-space: 112px;
  --grid-gap: 24px;
  --line: 1px;
  --focus-width: 2px;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --time-ui: .2s;
  --time-reveal: .6s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
html.nav-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main, section, article, aside, nav, header, footer, div, li, dl, dd, figure { min-width: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  padding: 0;
  border: 0;
  background: var(--c-clear);
  cursor: pointer;
}
button:disabled { cursor: not-allowed; }
img { max-width: 100%; }
svg { display: block; flex-shrink: 0; }
ul, ol { margin: 0; padding: 0; }
p, h1, h2, h3, h4, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-cjk);
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
strong { font-weight: var(--weight-strong); }
small { font-size: var(--fs-caption); }
code, pre, kbd { font-family: var(--f-mono); }
code { overflow-wrap: anywhere; }
pre {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 20px;
  border: var(--line) solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-small);
  line-height: 1.8;
  overscroll-behavior-inline: contain;
}
pre code { white-space: pre; overflow-wrap: normal; word-break: normal; }
[hidden] { display: none !important; }
:focus-visible {
  outline: var(--focus-width) solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
::selection { background: var(--c-highlight); color: var(--c-text); }
.nowrap { white-space: nowrap; }
.muted { color: var(--c-muted); }
.mono { font-family: var(--f-mono); }
.text-link { color: var(--c-accent-dark); text-decoration: underline; text-underline-offset: 4px; }
.text-link:hover { color: var(--c-accent); }
.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: absolute;
  z-index: 100;
  left: var(--gutter);
  top: 8px;
  padding: 10px 16px;
  border-radius: var(--r-xs);
  background: var(--c-accent);
  color: var(--c-on-accent);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.wrap {
  width: 100%;
  max-width: var(--wrap);
  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-heading { margin-bottom: 40px; max-width: 760px; }
.section-heading p { margin-top: 18px; color: var(--c-muted); }
.eyebrow {
  margin-bottom: 16px;
  color: var(--c-accent-dark);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-meta);
}
.grid-two, .grid-three { display: grid; gap: var(--grid-gap); }
.grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-two > *, .grid-three > * { min-width: 0; }
.stack > * + * { margin-top: 24px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.card {
  padding: 28px;
  border: var(--line) solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-bg);
  color: var(--c-text);
}
.card h3 + p { margin-top: 16px; }
.card p { color: var(--c-muted); }
.panel {
  margin-inline: 24px;
  border-radius: var(--r-panel);
  background: var(--c-panel);
  color: var(--c-text);
  overflow-x: clip;
}
.panel--lilac { background: var(--c-panel-2); color: var(--c-text); }
.panel .wrap { padding-top: 72px; padding-bottom: 72px; }
.decorated { position: relative; overflow-x: clip; }

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: var(--line) solid var(--c-clear);
  border-radius: var(--r-btn);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-ui);
  line-height: 1.3;
  text-align: center;
  transition: background-color var(--time-ui), border-color var(--time-ui), color var(--time-ui);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--c-accent-dark); color: var(--c-on-accent); }
.btn--ghost {
  background: var(--c-bg);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.btn--ghost:hover, .btn--ghost.is-hover { border-color: var(--c-text); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--c-surface);
  color: var(--c-muted);
  border-color: var(--c-border);
}
.btn.is-focus { outline: var(--focus-width) solid var(--c-accent); outline-offset: 3px; }
.btn__arrow { font-family: var(--f-mono); font-size: var(--fs-nav); }

.masthead {
  position: relative;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: var(--line) solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text);
}
.masthead__inner {
  position: relative;
  width: 100%;
  max-width: min(100%, calc(1280px + var(--gutter) * 2));
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-ui);
  white-space: nowrap;
}
.brand__mark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-logo);
  border: var(--line) solid var(--c-border);
  background: var(--c-panel-2);
  color: var(--c-text);
}
img.brand__mark { display: block; }
.primary-nav { min-width: 0; margin-left: auto; }
.primary-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}
.primary-nav__link, .nav-more__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-nav);
  color: var(--c-text);
  white-space: nowrap;
  transition: background-color var(--time-ui);
}
.primary-nav__link:hover, .nav-more__toggle:hover {
  background: var(--c-surface);
  color: var(--c-text);
}
.primary-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1.5px;
  border-radius: var(--r-tiny);
  background: var(--c-accent);
}
.nav-more { position: relative; list-style: none; }
.nav-more__toggle svg { width: 10px; height: 10px; color: var(--c-muted); }
.nav-more__toggle[data-current="true"] { color: var(--c-accent-dark); }
.nav-more__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 292px;
  padding: 10px;
  border: var(--line) solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-bg);
  color: var(--c-text);
}
.nav-more__panel ul { list-style: none; }
.nav-more__group {
  padding: 8px 12px 6px;
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-meta);
}
.nav-more__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
}
.nav-more__item:hover, .nav-more__item[aria-current="page"] {
  background: var(--c-surface);
  color: var(--c-text);
}
.nav-more__item span { font-size: var(--fs-nav); }
.nav-more__item small { font-size: var(--fs-caption); color: var(--c-muted); }
.header-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.language { position: relative; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: var(--line) solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  color: var(--c-muted);
  white-space: nowrap;
}
.lang-switch:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.lang-short { display: none; }
.language__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 190px;
  padding: 8px;
  border: var(--line) solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-bg);
  color: var(--c-text);
  list-style: none;
}
.language__panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
  padding: 8px 14px;
  border-radius: var(--r-sm);
}
.language__panel a:hover, .language__panel a[aria-current] {
  background: var(--c-surface);
  color: var(--c-text);
}
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: var(--line) solid var(--c-border);
  border-radius: var(--r-sm);
}
.menu-toggle svg { width: 20px; height: 20px; }
.mobile-drawer {
  position: absolute;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 52;
  padding: 20px var(--gutter) 28px;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-bg);
  color: var(--c-text);
  border-bottom: var(--line) solid var(--c-border);
}
.mobile-drawer ul { list-style: none; }
.mobile-drawer a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border-radius: var(--r-sm);
}
.mobile-drawer a:hover, .mobile-drawer a[aria-current] {
  background: var(--c-panel-2);
  color: var(--c-text);
}
.mobile-drawer__languages {
  padding-top: 16px;
  margin-top: 16px;
  border-top: var(--line) solid var(--c-border);
}
.nav-veil {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 51;
  background: var(--c-scrim);
  color: var(--c-text);
}
.preview-more > summary { list-style: none; cursor: pointer; }
.preview-more > summary::-webkit-details-marker { display: none; }
.preview-mobile { display: none; }
.preview-mobile > summary { list-style: none; }
.preview-mobile > summary::-webkit-details-marker { display: none; }

.site-footer {
  margin-top: 80px;
  padding-top: 64px;
  padding-bottom: 32px;
  border-top: var(--line) solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .8fr);
  gap: 40px;
}
.footer-brand p {
  max-width: 30em;
  margin-top: 20px;
  color: var(--c-muted);
  font-size: var(--fs-small);
}
.footer-title { margin-bottom: 18px; font-size: var(--fs-small); }
.footer-links { list-style: none; }
.footer-links a {
  display: block;
  padding-top: 6px;
  padding-bottom: 6px;
  color: var(--c-muted);
  font-size: var(--fs-small);
  overflow-wrap: break-word;
}
.footer-links a:hover, .footer-links a[aria-current] { color: var(--c-accent-dark); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: var(--line) solid var(--c-border);
  color: var(--c-muted);
  font-size: var(--fs-micro);
}
.prose { min-width: 0; overflow-wrap: break-word; }
.prose > * + * { margin-top: 24px; }
.prose h2 { margin-top: 64px; scroll-margin-top: 32px; }
.prose h3 { margin-top: 36px; scroll-margin-top: 32px; }
.prose p { line-height: 1.9; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li + li { margin-top: 10px; }
.prose a:not(.btn):not(.appstore-button) {
  color: var(--c-accent-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.reveal { opacity: 1; transform: none; }
.reveal-ready .reveal:not(.shown) { opacity: 0; transform: translateY(12px); }
.reveal-ready .reveal {
  transition: opacity var(--time-reveal) var(--ease-out), transform var(--time-reveal) var(--ease-out);
}
.reveal-ready .reveal.shown { opacity: 1; transform: none; }

@media (max-width: 1280px) {
  .masthead__inner { gap: 16px; }
  .primary-nav__link, .nav-more__toggle { padding-inline: 10px; }
}
@media (max-width: 1080px) {
  :root { --gutter: 40px; --section-space: 80px; }
  .primary-nav { display: none; }
  .header-tools { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-mobile { display: block; }
}
@media (max-width: 768px) {
  :root { --fs-h1: 30px; --fs-h2: 28px; --fs-h3: 22px; }
  .grid-three { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --nav-h: 64px;
    --fs-h1: 28px;
    --section-space: 64px;
    --grid-gap: 16px;
  }
  .masthead__inner { gap: 8px; }
  .brand { gap: 8px; }
  .brand__name { font-size: var(--fs-small); }
  .header-tools { gap: 6px; margin-left: auto; }
  .lang-switch { min-height: 44px; padding-inline: 10px; font-size: var(--fs-caption); }
  .lang-full { display: none; }
  .lang-short { display: inline; }
  .btn { min-height: 48px; padding-inline: 20px; }
  .grid-two { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .panel { margin-inline: 24px; }
  .panel .wrap { padding-top: 44px; padding-bottom: 44px; }
  .section-heading { margin-bottom: 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { margin-top: 56px; padding-top: 40px; }
  .tilt, [data-tilt] { transform: none !important; }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .brand__name { font-size: var(--fs-caption); }
  .masthead__inner { gap: 6px; }
  .brand__mark { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-ready .reveal:not(.shown) { opacity: 1; transform: none; }
}
@media print {
  .masthead, .dl-fab, .toc, .site-footer { display: none !important; }
  .reveal-ready .reveal:not(.shown) { opacity: 1; transform: none; }
  .wrap { max-width: 100%; }
}