:root {
  --bg: #FFFFFF;
  --panel: #F7F7F7;
  --lavender: #F0E7FC;
  --border: #DEDEDE;
  --accent: #7027D8;
  --accent-dark: #49158E;
  --text: #151515;
  --muted: #595959;
  --orange: #E87524;
  --success: #24764D;
  --error: #A52632;
  --clear: transparent;

  --display: 'Inter', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --body: 'Inter', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Noto Sans SC', monospace;
  --regular: 400;
  --medium: 500;
  --semibold: 600;
  --radius: 0;
  --rule: 1px;
  --focus: 2px;

  --page-width: 1248px;
  --header-width: 1280px;
  --reading-width: 800px;
  --gutter: 48px;
  --header-height: 88px;
  --peek: 88px;
  --hero-gap: 36px;
  --section-space: 96px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 48px;
  --s10: 64px;

  --text-micro: 9px;
  --text-tiny: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-caption: 13px;
  --text-base: 14px;
  --text-nav: 15px;
  --text-body: 17px;
  --text-brand: 20px;
  --text-section: 23px;
  --text-heading: 32px;
  --title: clamp(38px, 3.34vw, 48px);
  --title-leading: 1.32;
  --heading-leading: 1.4;
  --body-leading: 1.85;
  --code-leading: 1.75;
  --caption-leading: 1.8;
  --letter-label: .1em;

  --icon: 20px;
  --logo: 36px;
  --client-icon: 56px;
  --button-height: 56px;
  --touch: 44px;
  --menu-width: 176px;
  --language-width: 192px;
  --description-width: 450px;
  --platform-width: 480px;
  --diagram-width: 620px;
  --diagram-height: 470px;
  --grid-cell: 52px;
  --evaluation-top: 142px;
  --entry-time: 600ms;
  --transition-time: 180ms;
  --entry-offset: 12px;
  --table-width: 640px;
  --fab-width: 252px;
  --swatch-height: 72px;
  --z-veil: 20;
  --z-header: 30;
  --z-dropdown: 5;
  --z-fab: 10;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  scroll-padding-top: var(--s7);
}
html.nav-open {
  overflow: hidden;
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--text-base);
  font-weight: var(--regular);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}
main,
section,
article,
aside,
nav,
header,
footer,
div,
figure {
  min-width: 0;
}
[hidden] {
  display: none !important;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--accent);
}
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus) solid var(--accent);
  outline-offset: var(--s1);
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
button,
input,
select,
textarea,
fieldset {
  border-radius: var(--radius);
}
button:disabled {
  cursor: not-allowed;
}
img,
svg,
video {
  max-width: 100%;
}
img,
svg {
  display: block;
  flex-shrink: 0;
}
img {
  height: auto;
}
svg {
  overflow: visible;
}
figure {
  margin: 0;
}
p {
  margin: 0 0 var(--s5);
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: var(--regular);
  line-height: var(--heading-leading);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 {
  margin: 0 0 var(--s7);
  font-size: var(--title);
  line-height: var(--title-leading);
  letter-spacing: normal;
}
h2 {
  margin: 0 0 var(--s6);
  font-size: var(--text-heading);
}
h3 {
  margin: 0 0 var(--s4);
  font-size: var(--text-section);
}
h4 {
  margin: 0 0 var(--s3);
  font-size: var(--text-brand);
}
strong,
b {
  font-weight: var(--semibold);
}
small {
  font-size: var(--text-caption);
}
code,
kbd,
samp,
pre {
  font-family: var(--mono);
}
code {
  overflow-wrap: anywhere;
}
pre {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: var(--s6);
  margin: var(--s6) 0;
  background: var(--panel);
  color: var(--text);
  border: var(--rule) solid var(--border);
  font-size: var(--text-caption);
  line-height: var(--code-leading);
}
pre code {
  white-space: pre;
  overflow-wrap: normal;
}
ul,
ol {
  padding-left: var(--s6);
}
li + li {
  margin-top: var(--s2);
}
hr {
  border: 0;
  border-top: var(--rule) solid var(--border);
  margin-block: var(--s8);
}
.wrap {
  width: 100%;
  max-width: calc(var(--page-width) + var(--gutter) * 2);
  padding-inline: var(--gutter);
  margin-inline: auto;
}
.reading-wrap {
  width: 100%;
  max-width: calc(var(--reading-width) + var(--gutter) * 2);
  padding-inline: var(--gutter);
  margin-inline: auto;
}
.section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}
.section-lined {
  border-top: var(--rule) solid var(--border);
}
.section-tinted {
  background: linear-gradient(110deg, var(--bg), var(--lavender));
  color: var(--text);
}
.decorated,
.hero,
[data-hero-visual] {
  overflow-x: clip;
}
.nowrap {
  white-space: nowrap;
}
.title-line {
  display: block;
}
.title-keyword,
.text-accent {
  color: var(--accent);
}
.text-muted {
  color: var(--muted);
}
.text-success {
  color: var(--success);
}
.text-error {
  color: var(--error);
}
.prose {
  font-size: var(--text-body);
  line-height: var(--body-leading);
  overflow-wrap: anywhere;
}
.prose h2 {
  margin-top: var(--s10);
}
.prose h3 {
  margin-top: var(--s8);
}
.prose > :first-child {
  margin-top: 0;
}
.prose a:not(.button) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: var(--s1);
}
.prose :not(pre) > code {
  font-size: .88em;
  background: var(--panel);
  color: var(--accent-dark);
  padding: var(--s1);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s6);
  min-height: var(--button-height);
  max-width: 100%;
  padding: var(--s4) var(--s6);
  border: var(--rule) solid var(--text);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-nav);
  font-weight: var(--medium);
  line-height: var(--heading-leading);
  text-align: center;
  transition: background-color var(--transition-time), border-color var(--transition-time), color var(--transition-time);
}
.button-main {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.button-main:hover,
.button-main.is-hover {
  background: var(--accent-dark);
  color: var(--bg);
  border-color: var(--accent-dark);
}
.button-secondary:hover,
.button-secondary.is-hover {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--accent);
}
.button:active,
.button.is-active {
  background: var(--lavender);
  color: var(--accent-dark);
  border-color: var(--accent-dark);
}
.button:disabled,
.button[aria-disabled="true"] {
  background: var(--panel);
  color: var(--muted);
  border-color: var(--border);
}
.button.is-focus {
  outline: var(--focus) solid var(--accent);
  outline-offset: var(--s1);
}
.button svg {
  width: var(--s4);
  height: var(--s4);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.panel,
.card {
  padding: var(--s7);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}
.panel-soft {
  background: var(--panel);
  color: var(--text);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
}
.stack > * + * {
  margin-top: var(--s6);
}
.masthead {
  position: relative;
  z-index: var(--z-header);
  height: var(--header-height);
  border-bottom: var(--rule) solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: var(--s8);
  width: 100%;
  max-width: min(100%, calc(var(--header-width) + var(--gutter) * 2));
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--text-brand);
  font-weight: var(--medium);
  line-height: var(--heading-leading);
  white-space: nowrap;
}
.brand-mark {
  width: var(--logo);
  height: var(--logo);
  flex-shrink: 0;
}
.navigation {
  display: flex;
  align-items: center;
  gap: var(--s8);
  margin-left: auto;
  font-size: var(--text-nav);
}
.navigation > a,
.more > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}
[aria-current="page"] {
  color: var(--accent);
}
.nav-current {
  position: relative;
}
.navigation > .nav-current::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc((var(--header-height) - var(--touch)) / -2);
  height: var(--focus);
  background: var(--accent);
  color: var(--bg);
}
.more {
  position: relative;
}
summary {
  cursor: pointer;
}
.more > summary,
.preview-mobile > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.more > summary::-webkit-details-marker,
.preview-mobile > summary::-webkit-details-marker {
  display: none;
}
.chevron {
  width: var(--s3);
  height: var(--s3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.more-menu,
.language-menu {
  position: absolute;
  top: calc(100% + var(--s5));
  right: 0;
  width: var(--menu-width);
  padding: var(--s2);
  border: var(--rule) solid var(--border);
  background: var(--bg);
  color: var(--text);
  z-index: var(--z-dropdown);
}
.more-menu a,
.language-menu a {
  display: block;
  width: 100%;
  min-height: var(--touch);
  padding: var(--s3);
}
.more-menu a:hover,
.language-menu a:hover {
  background: var(--panel);
  color: var(--accent);
}
.header-tools {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.language-control {
  position: relative;
  border-left: var(--rule) solid var(--border);
  padding-left: var(--s7);
}
.language-button,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-width: var(--touch);
  min-height: var(--touch);
  padding: var(--s2);
  background: var(--bg);
  color: var(--muted);
  border: 0;
  border-radius: var(--radius);
  white-space: nowrap;
  font-size: var(--text-nav);
}
.language-menu {
  width: var(--language-width);
}
.language-short,
.menu-toggle,
.mobile-drawer,
.preview-mobile {
  display: none;
}
.menu-toggle svg {
  width: var(--s5);
  height: var(--s5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.nav-veil {
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: var(--z-veil);
  border: 0;
  background: var(--panel);
  color: var(--text);
  opacity: .8;
}
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: var(--s2);
  transform: translateY(-200%);
  padding: var(--s3) var(--s4);
  background: var(--bg);
  color: var(--accent);
  z-index: var(--z-dropdown);
}
.skip-link:focus {
  transform: none;
}
.site-footer {
  border-top: var(--rule) solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding-top: var(--s10);
  padding-bottom: var(--s7);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.35fr 1fr;
  gap: var(--s8);
}
.footer-brand p {
  color: var(--muted);
  margin-top: var(--s5);
  max-width: var(--description-width);
}
.footer-heading {
  margin: 0 0 var(--s5);
  font-size: var(--text-nav);
  font-weight: var(--medium);
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li + li {
  margin-top: var(--s2);
}
.footer-links a {
  display: inline-block;
  padding-block: var(--s1);
  color: var(--muted);
}
.footer-links a:hover {
  color: var(--accent);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s5);
  margin-top: var(--s9);
  padding-top: var(--s6);
  border-top: var(--rule) solid var(--border);
  color: var(--muted);
  font-size: var(--text-caption);
}
.footer-bottom p {
  margin: 0;
}
.footer-legal {
  display: flex;
  gap: var(--s6);
  flex-wrap: wrap;
}
.reveal {
  opacity: 1;
  transform: none;
}
.reveal-pending .reveal:not(.shown) {
  opacity: 0;
  transform: translateY(var(--entry-offset));
}
.reveal-pending .reveal {
  transition: opacity var(--entry-time) ease-out, transform var(--entry-time) ease-out;
}
.reveal.shown {
  opacity: 1;
  transform: none;
}
@media (min-width: 1600px) {
  :root {
    --page-width: 1360px;
    --header-width: 1400px;
    --hero-gap: 64px;
  }
}
@media (max-width: 1100px) {
  :root {
    --gutter: 32px;
    --hero-gap: 24px;
    --title: 40px;
    --text-body: 16px;
  }
  .masthead-inner {
    gap: var(--s6);
  }
  .navigation {
    gap: var(--s6);
  }
  .language-control {
    padding-left: var(--s6);
  }
  .button {
    padding-inline: var(--s4);
    gap: var(--s3);
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  :root {
    --gutter: 24px;
    --header-height: 72px;
    --title: 30px;
    --peek: 80px;
    --section-space: 64px;
  }
  .masthead-inner {
    gap: var(--s4);
  }
  .brand {
    font-size: var(--text-body);
  }
  .navigation {
    display: none;
  }
  .header-tools {
    margin-left: auto;
  }
  .language-control {
    border-left: 0;
    padding-left: 0;
  }
  .language-long {
    display: none;
  }
  .language-short {
    display: inline;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .mobile-drawer {
    position: absolute;
    inset: var(--header-height) 0 auto;
    display: block;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s4) var(--gutter) var(--s6);
    background: var(--bg);
    color: var(--text);
    border-bottom: var(--rule) solid var(--border);
  }
  .mobile-drawer a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--touch);
    padding: var(--s3) var(--s4);
  }
  .mobile-drawer a:hover {
    background: var(--panel);
    color: var(--accent);
  }
  .drawer-label {
    margin: var(--s5) var(--s4) var(--s2);
    color: var(--muted);
    font-size: var(--text-caption);
  }
  .preview-mobile {
    display: block;
    margin-left: auto;
  }
  .preview-mobile > summary {
    min-height: var(--touch);
    padding: var(--s2);
  }
  .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --text-heading: 26px;
  }
  .tilt,
  [data-tilt] {
    transform: none !important;
  }
  .footer-grid {
    gap: var(--s7);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .panel,
  .card {
    padding: var(--s5);
  }
}
@media (max-width: 480px) {
  :root {
    --diagram-height: 452px;
    --button-height: 50px;
    --evaluation-top: 136px;
  }
  .brand {
    gap: var(--s2);
  }
  .brand-mark {
    width: var(--s7);
    height: var(--s7);
  }
  .masthead-inner,
  .header-tools {
    gap: var(--s1);
  }
  .button {
    font-size: var(--text-base);
  }
  .actions {
    gap: var(--s2);
  }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal-pending .reveal:not(.shown),
  .reveal-pending .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .button {
    transition: none;
  }
}