:root {
				color-scheme: light;
				--ink: #172b42;
				--muted: #52677d;
				--soft-muted: #647a90;
				--paper: #f4f7fb;
				--surface: #ffffff;
				--teal: #087e78;
				--teal-soft: #e5f5f1;
				--blue-soft: #eaf2fb;
				--amber: #8a5a13;
				--amber-soft: #fff4df;
				--line: #d8e2ec;
				--shadow: 0 14px 38px rgba(24, 47, 71, .08);
				--radius: 18px;
				font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
				font-synthesis: none;
				text-rendering: optimizeLegibility;
			}

			* { box-sizing: border-box; }
			html { scroll-behavior: smooth; scroll-padding-top: 84px; }
			body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.65; }
			a { color: #086b70; text-underline-offset: .18em; }
			a:hover { color: #064e58; }
			a:focus-visible, button:focus-visible { outline: 3px solid #d79038; outline-offset: 3px; border-radius: 4px; }
			code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
			code { font-size: .92em; }

			.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; background: #fff; color: var(--ink); border: 2px solid var(--teal); border-radius: 8px; }
			.skip-link:focus { top: 12px; }
			.topbar { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
			.topbar-inner { width: min(1180px, calc(100% - 40px)); min-height: 66px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
			.brand { color: var(--ink); font-weight: 800; letter-spacing: -.03em; text-decoration: none; white-space: nowrap; }
			.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }
			.nav a { color: #334b63; text-decoration: none; font-size: .9rem; font-weight: 650; }
			.nav a:hover { color: var(--teal); }

			main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
			.hero { padding: 48px 0 36px; }
			.hero-copy { max-width: 830px; margin-bottom: 26px; }
			.eyebrow { color: var(--teal); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
			h1, h2, h3 { color: var(--ink); line-height: 1.2; }
			h1 { margin: 10px 0 14px; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -.055em; }
			h2 { margin: 0 0 12px; font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -.035em; }
			h3 { margin: 0 0 8px; font-size: 1.12rem; }
			p { margin: 0 0 14px; color: var(--muted); }
			.lead { max-width: 760px; font-size: clamp(1.05rem, 2vw, 1.2rem); }
			.hero-banner { display: block; width: 100%; height: auto; border: 1px solid #d8e3ee; border-radius: 20px; box-shadow: var(--shadow); }
			.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
			.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 17px; border: 1px solid #087e78; border-radius: 10px; background: #087e78; color: white; text-decoration: none; font-weight: 750; }
			.button:hover { color: white; background: #066963; }
			.button.secondary { background: #fff; color: #075e62; border-color: #a8cbc8; }
			.button.secondary:hover { background: var(--teal-soft); }

			section { margin: 24px 0; padding: clamp(22px, 4vw, 38px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 7px 24px rgba(24,47,71,.045); }
			.section-intro { max-width: 820px; margin-bottom: 22px; }
			.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
			.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
			.grid.one { grid-template-columns: minmax(0, 1fr); }
			.card { min-width: 0; padding: 19px; background: #fbfdff; border: 1px solid var(--line); border-radius: 14px; }
			.card.teal { background: var(--teal-soft); border-color: #c7e7df; }
			.card.blue { background: var(--blue-soft); border-color: #d0dfef; }
			.card.amber { background: var(--amber-soft); border-color: #f0ddb7; }
			.card p:last-child, .card ul:last-child { margin-bottom: 0; }
			.card ul { padding-left: 20px; color: var(--muted); margin: 8px 0 0; }
			.card li + li { margin-top: 5px; }

			.notice { margin: 18px 0; padding: 16px 18px; border-left: 4px solid #c5872b; border-radius: 8px; background: var(--amber-soft); color: #553c17; }
			.notice strong { color: #49310d; }
			.steps { counter-reset: guide; list-style: none; display: grid; gap: 12px; padding: 0; margin: 0; }
			.steps li { counter-increment: guide; display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: start; color: var(--muted); }
			.steps li::before { content: counter(guide); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #075e62; background: var(--teal-soft); font-weight: 800; }

			pre { margin: 14px 0; padding: 17px 18px; overflow-x: auto; background: #13243a; color: #eaf1fa; border: 1px solid #273e59; border-radius: 12px; font-size: .88rem; line-height: 1.55; tab-size: 2; }
			pre code { color: inherit; }
			kbd { display: inline-block; padding: 1px 6px; color: #23384f; background: #f4f7fb; border: 1px solid #bdcbd9; border-bottom-width: 2px; border-radius: 5px; font-size: .88em; }
			.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
			table { width: 100%; border-collapse: collapse; min-width: 590px; }
			th, td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
			th { color: #2e4962; background: #f2f6fa; font-size: .86rem; }
			td { color: var(--muted); }
			tr:last-child td { border-bottom: 0; }

			.diagram-frame { padding: 14px; background: #f7fafc; border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; }
			.mermaid { min-width: 900px; margin: 0; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
			.diagram-status { margin: 10px 2px 0; font-size: .86rem; }
			.diagram-links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 14px; }
			.feature-preview { margin: 18px 0 0; padding: 12px; background: #f7fafc; border: 1px solid var(--line); border-radius: 14px; }
			.feature-preview img, .feature-preview video { display: block; width: 100%; height: auto; border-radius: 8px; }
			.feature-preview figcaption { padding: 10px 4px 2px; color: var(--muted); font-size: .88rem; }
			.card .tui-shot { display: block; width: 100%; height: auto; margin-top: 4px; border-radius: 8px; border: 1px solid var(--line); }
			.cli-option { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f7fafc; }
			.cli-option summary { padding: 10px 14px; color: #2e4962; font-weight: 700; cursor: pointer; }
			.cli-option[open] summary { border-bottom: 1px solid var(--line); }
			.cli-option > :not(summary) { margin: 12px 14px; }
			.cli-option pre { overflow-x: auto; }
			.feature-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
			.status { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #edf2f7; color: #304a62; font-size: .82rem; font-weight: 750; white-space: nowrap; }
			.status.error { background: #fff0ed; color: #8a3829; }
			.status.done { background: #e7f6ec; color: #25613a; }
			.status.active { background: #e5f5f1; color: #08635f; }
			.small { font-size: .9rem; }
			.muted { color: var(--muted); }
			.path { overflow-wrap: anywhere; }
			footer { width: min(1180px, calc(100% - 40px)); margin: 34px auto 0; padding: 22px 0 42px; color: var(--soft-muted); font-size: .9rem; border-top: 1px solid var(--line); }
			footer a { color: #255f67; }

			@media (max-width: 800px) {
				.topbar-inner { align-items: flex-start; flex-direction: column; padding: 12px 0; gap: 6px; }
				.nav { justify-content: flex-start; gap: 8px 14px; }
				.grid, .grid.two { grid-template-columns: 1fr; }
				.hero { padding-top: 32px; }
				section { margin: 16px 0; }
			}
			@media (max-width: 480px) {
				main, .topbar-inner, footer { width: min(100% - 24px, 1180px); }
				.nav a { font-size: .84rem; }
				.hero-banner { border-radius: 12px; }
				section { padding: 19px 15px; border-radius: 14px; }
				.button { width: 100%; }
			}
			@media (prefers-reduced-motion: reduce) {
				html { scroll-behavior: auto; }
				*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
			}
			@media print {
				.topbar, .hero-actions, .feature-actions { display: none; }
				body { background: white; }
				section { break-inside: avoid; box-shadow: none; }
			}

			.reference-main { width: min(920px, calc(100% - 40px)); }
			.reference-main .hero { padding: 38px 0 18px; }
			.reference-content { padding: clamp(22px, 4vw, 38px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 7px 24px rgba(24,47,71,.045); overflow-wrap: anywhere; }
			.reference-content h2 { margin: 2rem 0 .7rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
			.reference-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
			.reference-content h3 { margin-top: 1.5rem; }
			.reference-content ul, .reference-content ol { padding-left: 1.5rem; margin: .5rem 0 1rem; color: var(--muted); }
			.reference-content li + li { margin-top: .4rem; }
			.reference-content blockquote { margin: 1rem 0; padding: 12px 18px; border-left: 4px solid var(--teal); background: var(--teal-soft); border-radius: 8px; }
			.reference-content blockquote p:last-child { margin-bottom: 0; }
			.reference-content table { display: block; max-width: 100%; overflow-x: auto; }
			.reference-content img { max-width: 100%; height: auto; }
			.reference-actions { margin: 24px 0 10px; }
			@media (max-width: 800px) {
				.reference-main { width: min(100% - 40px, 920px); }
			}
			@media (max-width: 480px) {
				.reference-main { width: min(100% - 24px, 920px); }
				.reference-content { padding: 19px 15px; border-radius: 14px; }
			}