:root {
    --bg: #101114;
    --surface: #191b20;
    --surface-soft: #23262d;
    --surface-strong: rgba(25,27,32,.78);
    --fill: rgba(244,246,251,.055);
    --fill-hover: rgba(244,246,251,.095);
    --border: rgba(244,246,251,.12);
    --divider: rgba(244,246,251,.085);
    --text: #f4f6fb;
    --muted: #aeb4c2;
    --faint: rgba(244,246,251,.43);
    --accent: #65d6ad;
    --accent-ink: #0e1917;
    --danger: #ff7583;
    --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --header-height: 66px;
    --sidebar-width: 240px;
    --toc-width: 180px;
    --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 28px); }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); font-family: var(--font); line-height: 1.65; -webkit-font-smoothing: antialiased; }
button, select { font: inherit; } a { color: inherit; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 9px 13px; border-radius: 8px; color: var(--accent-ink); background: var(--accent); transform: translateY(-150%); transition: transform 220ms var(--ease); }.skip-link:focus { transform: none; }

.docs-header { position: fixed; z-index: 100; inset: 0 0 auto; height: var(--header-height); border-bottom: 1px solid var(--divider); background: rgba(16,17,20,.9); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.header-inner { display: flex; width: min(calc(100% - 40px), 1440px); height: 100%; align-items: center; justify-content: space-between; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }.brand i { margin-left: 3px; padding-left: 11px; border-left: 1px solid var(--border); color: var(--faint); font-size: 9px; font-style: normal; font-weight: 600; text-transform: uppercase; }.brand-mark { display: block; overflow: hidden; width: 31px; height: 31px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.header-links { display: flex; align-items: center; gap: 23px; }.header-links > a { color: var(--muted); font-size: 10px; font-weight: 600; text-decoration: none; }.header-links > a:hover { color: var(--text); }.language-switch { display: flex; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: rgba(0,0,0,.14); }.language-switch button { min-width: 32px; padding: 4px 5px; border: 0; border-radius: 6px; color: var(--faint); background: transparent; font-size: 8px; font-weight: 700; cursor: pointer; }.language-switch button.is-active { color: var(--text); background: var(--fill-hover); }

.docs-layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 800px) var(--toc-width); gap: 58px; width: min(calc(100% - 40px), 1380px); margin: var(--header-height) auto 0; }
.sidebar { position: relative; border-right: 1px solid var(--divider); }.sidebar-inner { position: sticky; top: var(--header-height); display: flex; height: calc(100vh - var(--header-height)); flex-direction: column; padding: 34px 25px 25px 0; }.side-nav { overflow-y: auto; scrollbar-width: thin; }.side-nav p { margin: 23px 0 7px 10px; color: var(--faint); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.side-nav p:first-child { margin-top: 0; }.side-nav a { display: flex; align-items: center; gap: 9px; margin: 2px 0; padding: 8px 10px; border-radius: 9px; color: rgba(244,246,251,.57); font-size: 10px; font-weight: 550; text-decoration: none; transition: color 220ms ease, background 220ms ease; }.side-nav a:hover { color: var(--text); background: var(--fill); }.side-nav a.is-active { color: var(--text); background: rgba(101,214,173,.095); }.nav-icon { display: grid; width: 18px; height: 18px; place-items: center; color: var(--faint); font-family: var(--mono); font-size: 8px; font-weight: 700; }.side-nav a.is-active .nav-icon { color: var(--accent); }
.sidebar-help { display: flex; gap: 10px; align-items: flex-start; margin-top: auto; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--fill); }.sidebar-help > span { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: var(--accent-ink); background: var(--accent); font-size: 9px; font-weight: 700; }.sidebar-help strong { display: block; font-size: 9px; }.sidebar-help a { display: block; margin-top: 2px; color: var(--accent); font-size: 8px; text-decoration: none; }.mobile-nav-label, .mobile-nav { display: none; }

.docs-content { min-width: 0; padding: 58px 0 90px; }.doc-section { padding: 50px 0 78px; border-bottom: 1px solid var(--divider); }.doc-section:first-child { padding-top: 0; }.doc-section:last-of-type { border-bottom: 0; }.breadcrumb { display: flex; gap: 8px; align-items: center; margin-bottom: 49px; color: var(--faint); font-size: 9px; }.breadcrumb a { color: var(--accent); text-decoration: none; }.eyebrow { margin: 0 0 10px; color: var(--accent) !important; font-size: 8px !important; font-weight: 700; letter-spacing: .12em; }.doc-section h1 { margin: 0; font-size: clamp(40px,5vw,57px); font-weight: 740; letter-spacing: -.055em; line-height: 1.08; }.doc-section h2 { margin: 0; font-size: clamp(31px,4vw,43px); font-weight: 720; letter-spacing: -.05em; line-height: 1.12; }.doc-section > p { max-width: 720px; margin: 16px 0 0; color: var(--muted); font-size: 12px; }.doc-section .lead { max-width: 680px; margin-top: 20px; font-size: 14px; }.section-label { display: flex; gap: 9px; align-items: center; margin-bottom: 16px; color: var(--faint); font-size: 8px; font-weight: 700; letter-spacing: .1em; }

.platform-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 37px; }.platform-summary a { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--fill); text-decoration: none; transition: transform 260ms var(--ease), background 260ms ease; }.platform-summary a:hover { transform: translateY(-2px); background: var(--fill-hover); }.platform-summary strong { display: block; font-size: 11px; }.platform-summary small { display: block; overflow: hidden; margin-top: 1px; color: var(--faint); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.platform-summary b { color: var(--accent); font-size: 12px; }.summary-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: var(--accent-ink) !important; background: var(--accent) !important; font-family: var(--mono); font-size: 9px; font-weight: 700; }

.callout { display: grid; grid-template-columns: 31px 1fr; gap: 12px; margin-top: 30px; padding: 15px 16px; border: 1px solid rgba(101,214,173,.15); border-radius: 12px; background: rgba(101,214,173,.05); }.callout-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: var(--accent-ink); background: var(--accent); font-size: 9px; font-weight: 700; }.callout strong { display: block; font-size: 10px; }.callout p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }.callout.warning { border-color: rgba(255,154,93,.16); background: rgba(255,154,93,.045); }.callout.warning .callout-icon { color: #24150b; background: #ffb26b; }.callout.tip { border-color: rgba(101,214,173,.15); }

.requirements { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 28px 0; }.requirements div { display: flex; align-items: center; gap: 9px; padding: 11px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: var(--fill); font-size: 8px; }.requirements span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; color: var(--accent-ink); background: var(--accent); font-size: 7px; }.requirements strong { font-weight: 650; }
.os-tabs { display: inline-flex; gap: 3px; margin-top: 7px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0,0,0,.14); }.os-tabs button { padding: 6px 11px; border: 0; border-radius: 7px; color: var(--faint); background: transparent; font-size: 8px; font-weight: 650; cursor: pointer; }.os-tabs button.is-active { color: var(--accent-ink); background: var(--text); }.os-content[hidden] { display: none; }

.steps { margin: 33px 0 0; padding: 0; list-style: none; }.steps > li { position: relative; display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 16px; padding-bottom: 33px; }.steps > li:last-child { padding-bottom: 4px; }.steps > li:not(:last-child)::before { content: ""; position: absolute; top: 35px; bottom: 0; left: 16px; width: 1px; background: var(--divider); }.step-number { position: relative; z-index: 1; display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; color: var(--accent-ink); background: var(--accent); font-size: 9px; font-weight: 700; }.steps h3 { margin: 2px 0 4px; font-size: 14px; letter-spacing: -.015em; }.steps p { margin: 0; color: var(--muted); font-size: 10px; }.steps.compact > li { padding-bottom: 38px; }
.code-block { overflow: hidden; min-width: 0; margin-top: 13px; border: 1px solid var(--border); border-radius: 11px; background: rgba(0,0,0,.23); }.code-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 7px 12px; border-bottom: 1px solid var(--divider); color: var(--faint); font-family: var(--mono); font-size: 7px; }.code-header button { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: var(--fill); font-size: 7px; font-weight: 700; cursor: pointer; }.code-header button:hover { color: var(--text); background: var(--fill-hover); }.code-block code { display: block; overflow-x: auto; padding: 13px; color: rgba(244,246,251,.75); font-family: var(--mono); font-size: 8px; line-height: 1.65; white-space: nowrap; scrollbar-width: thin; }.doc-button { display: inline-flex; min-height: 37px; align-items: center; gap: 6px; margin-top: 13px; padding: 0 13px; border-radius: 9px; color: var(--accent-ink); background: var(--accent); font-size: 8px; font-weight: 700; text-decoration: none; transition: transform 220ms var(--ease); }.doc-button:hover { transform: translateY(-1px); }.doc-button.secondary { border: 1px solid var(--border); color: var(--text); background: var(--fill); }

.setup-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 32px; }.setup-grid article, .tips-grid article { padding: 19px; border: 1px solid var(--border); border-radius: 13px; background: var(--fill); }.setup-grid article > span { color: var(--accent); font-size: 7px; font-weight: 700; letter-spacing: .08em; }.setup-grid h3, .tips-grid h3 { margin: 10px 0 6px; font-size: 12px; line-height: 1.4; }.setup-grid p, .tips-grid p { margin: 0; color: var(--muted); font-size: 8px; }.tips-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 29px; }.tips-grid article > span { color: var(--accent); font-family: var(--mono); font-size: 8px; }

.accordion-list { margin-top: 29px; border-top: 1px solid var(--divider); }.accordion-list details { border-bottom: 1px solid var(--divider); }.accordion-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 2px; color: rgba(244,246,251,.86); font-size: 10px; font-weight: 650; cursor: pointer; list-style: none; }.accordion-list summary::-webkit-details-marker { display: none; }.accordion-list summary b { color: var(--accent); font-size: 15px; font-weight: 400; transition: transform 220ms ease; }.accordion-list details[open] summary b { transform: rotate(45deg); }.accordion-list details div { padding: 0 34px 17px 2px; }.accordion-list details p { margin: 0; color: var(--muted); font-size: 9px; }.support-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 36px; padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(130deg,rgba(101,214,173,.09),var(--fill)); }.support-card strong { font-size: 12px; }.support-card p { max-width: 510px; margin: 4px 0 0; color: var(--muted); font-size: 8px; }.support-card > div:last-child { display: flex; gap: 7px; flex: 0 0 auto; }.support-card .doc-button { margin: 0; }

.subheading { margin: 37px 0 0; font-size: 16px; letter-spacing: -.02em; }.subheading + p { margin-top: 8px; }.two-code-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }.two-code-grid .code-block { margin: 0; }
.on-this-page { padding-top: 58px; }.on-this-page > div { position: sticky; top: calc(var(--header-height) + 34px); }.on-this-page p { margin: 0 0 11px; color: var(--faint); font-size: 7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.on-this-page nav { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--divider); }.on-this-page a { margin-left: -1px; padding: 5px 0 5px 12px; border-left: 1px solid transparent; color: var(--faint); font-size: 8px; line-height: 1.35; text-decoration: none; }.on-this-page a:hover { color: var(--text); }.on-this-page a.is-active { border-left-color: var(--accent); color: var(--accent); }
.docs-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; padding-top: 29px; border-top: 1px solid var(--divider); color: var(--faint); font-size: 7px; }.docs-footer div { display: flex; gap: 18px; }.docs-footer a { text-decoration: none; }.toast { position: fixed; z-index: 300; right: 20px; bottom: 20px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface-strong); box-shadow: 0 18px 45px rgba(0,0,0,.3); backdrop-filter: blur(18px); font-size: 8px; font-weight: 650; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 200ms ease, transform 200ms ease; }.toast.is-visible { opacity: 1; transform: none; }

@media (max-width: 1180px) { :root { --sidebar-width: 215px; }.docs-layout { grid-template-columns: var(--sidebar-width) minmax(0,800px); gap: 44px; }.on-this-page { display: none; } }
@media (max-width: 850px) { .docs-layout { display: block; width: min(calc(100% - 32px),800px); }.sidebar { position: sticky; z-index: 50; top: var(--header-height); border: 0; background: rgba(16,17,20,.94); backdrop-filter: blur(16px); }.sidebar-inner { position: static; display: block; height: auto; padding: 9px 0; }.side-nav, .sidebar-help { display: none; }.mobile-nav-label { display: block; margin-bottom: 3px; color: var(--faint); font-size: 7px; font-weight: 700; }.mobile-nav { display: block; width: 100%; padding: 8px 9px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface); font-size: 9px; }.docs-content { padding-top: 38px; } }
@media (max-width: 650px) { .header-inner { width: calc(100% - 28px); }.header-links > a { display: none; }.docs-layout { width: calc(100% - 28px); }.doc-section { padding-block: 40px 63px; }.breadcrumb { margin-bottom: 35px; }.doc-section h1 { font-size: 40px; }.doc-section h2 { font-size: 32px; }.doc-section .lead { font-size: 13px; }.platform-summary, .requirements, .setup-grid, .tips-grid, .two-code-grid { grid-template-columns: 1fr; }.support-card { align-items: flex-start; flex-direction: column; }.support-card > div:last-child { width: 100%; }.support-card .doc-button { flex: 1; justify-content: center; } }
@media (max-width: 430px) { .brand i { display: none; }.doc-section h1 { font-size: 36px; }.doc-section h2 { font-size: 29px; }.os-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }.steps > li { grid-template-columns: 29px minmax(0,1fr); gap: 10px; }.step-number { width: 27px; height: 27px; }.steps > li:not(:last-child)::before { top: 29px; left: 13px; }.code-block code { font-size: 7px; }.support-card > div:last-child { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }