*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:root, [data-theme="dark"] {
  --gold: #c9a84c; --gold-l: #ddb95a; --bg: #08090d; --bg2: #0d0f15; --bg3: #12141c;
  --nav-bg: rgba(8,9,13,.96); --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.12);
  --heading: #fff; --heading2: #e4eaf4; --body: rgba(210,220,234,.78); --dim: rgba(200,208,222,.7); --faint: rgba(200,208,222,.55);
  --tag: rgba(255,255,255,.1); --green: #4ade80; --red: #f87171; --mono: 'DM Mono', monospace;
  --col: 860px; --pad: 60px; --site-max: 1040px; --side: max(var(--pad), calc((100vw - var(--site-max)) / 2));
}
[data-theme="light"] { --bg: #f4f2ee; --bg2: #eceae5; --bg3: #e4e2de; --nav-bg: rgba(244,242,238,.96); --line: rgba(0,0,0,.08); --line2: rgba(0,0,0,.14); --heading: #0a0909; --heading2: #1c1a17; --body: rgba(18,16,12,.72); --dim: rgba(18,16,12,.64); --faint: rgba(18,16,12,.52); --tag: rgba(0,0,0,.12); --green: #16a34a; --red: #dc2626; }
body { margin: 0; background: var(--bg); color: var(--body); font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background .25s, color .25s; }
a { color: inherit; }
.top-stripe { height: 3px; background: var(--gold); }
.site-nav { height: 60px; padding: 0 var(--side); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 200; background: var(--nav-bg); backdrop-filter: none; }
.nav-left, .nav-actions, .nav-logo, .footer-links { display: flex; align-items: center; }
.nav-left { gap: 32px; }.nav-actions { gap: 18px; }.nav-logo { gap: 12px; text-decoration: none; }.nav-logo-box { width: 26px; height: 26px; border: 1px solid var(--gold); display: grid; place-items: center; }.nav-logo-box span, .footer-mark { color: var(--gold); font-family: var(--mono); font-weight: 700; font-size: 10px; }.nav-wordmark { color: var(--heading); font-size: 14px; font-weight: 700; letter-spacing: .12em; }.nav-back, .nav-guide, .theme-toggle { font-size: 12px; text-decoration: none; letter-spacing: .06em; transition: color .2s, border-color .2s, background .2s; }.nav-back { color: var(--faint); }.nav-back::before { content: '← '; }.nav-back:hover, .footer-links a:hover { color: var(--heading); }.nav-guide { color: var(--gold); border: 1px solid rgba(201,168,76,.3); padding: 5px 12px; }.nav-guide:hover { background: rgba(201,168,76,.08); }.theme-toggle { display: flex; align-items: center; gap: 8px; color: var(--faint); background: none; border: 1px solid var(--line); padding: 7px 14px; font-family: var(--mono); cursor: pointer; }.theme-toggle:hover { color: var(--heading); border-color: var(--faint); }.theme-toggle-icon { width: 14px; height: 14px; position: relative; }.icon-sun, .icon-moon { position: absolute; inset: 0; }.icon-moon { opacity: 0; }[data-theme="light"] .icon-sun { opacity: 0; }[data-theme="light"] .icon-moon { opacity: 1; }
.toc-bar { position: sticky; top: 60px; z-index: 100; background: var(--nav-bg); border-bottom: 1px solid var(--line); backdrop-filter: none; }.toc-bar-inner { display: flex; padding: 0 var(--side); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }.toc-bar-inner::-webkit-scrollbar { display: none; }.toc-btn { display: flex; gap: 8px; align-items: center; padding: 14px 20px; color: var(--faint); border-bottom: 2px solid transparent; text-decoration: none; font-size: 12px; letter-spacing: .08em; transition: color .2s, border-color .2s; }.toc-btn:hover, .toc-btn.active { color: var(--heading); }.toc-btn.active { border-bottom-color: var(--gold); }.toc-btn-num { color: var(--gold); font-family: var(--mono); font-size: 10px; opacity: .65; }.toc-btn.active .toc-btn-num { opacity: 1; }.toc-arrow { display: none; position: absolute; top: 50%; z-index: 3; width: 24px; height: 24px; transform: translateY(-50%); color: var(--faint); background: var(--bg2); border: 1px solid var(--line2); cursor: pointer; font-size: 20px; line-height: 1; }.toc-arrow-left { left: 10px; }.toc-arrow-right { right: 10px; }
.hero { padding: 72px var(--side) 68px; border-bottom: 1px solid var(--line); }.hero-platform { display: inline-block; margin-bottom: 20px; padding: 4px 10px; border: 1px solid rgba(201,168,76,.3); color: var(--gold); font-family: var(--mono); font-size: 10px; letter-spacing: .2em; }.hero-title { margin: 0 0 22px; color: var(--heading); font-size: clamp(56px, 8vw, 82px); line-height: 1.05; font-weight: 900; letter-spacing: -.04em; }.hero-subtitle { max-width: 590px; margin: 0 0 28px; color: var(--body); font-size: 17px; line-height: 1.85; letter-spacing: .04em; }.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }.hero-tag { padding: 5px 12px; border: 1px solid var(--tag); color: var(--dim); font-size: 11px; letter-spacing: .04em; }.hero-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }.btn-dl { display: inline-flex; gap: 10px; align-items: center; padding: 15px 36px; color: var(--bg); background: var(--gold); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .08em; transition: filter .2s; }.btn-dl:hover { filter: brightness(1.08); }.hero-note { color: var(--faint); font-family: var(--mono); font-size: 11px; }
.sections-wrap { padding: 0 var(--side); }.section { max-width: var(--col); padding: 72px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 115px; }.section:last-child { border-bottom: 0; }.section-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }.section-num { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--gold); font-family: var(--mono); font-size: 11px; font-weight: 700; }.section-label { color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: .25em; }.section-title { margin: 0 0 28px; color: var(--heading); font-size: 28px; font-weight: 700; letter-spacing: -.01em; }.section-h3 { display: flex; align-items: center; gap: 10px; margin: 32px 0 14px; color: var(--heading2); font-size: 14px; }.section-h3::before { content: ''; width: 3px; height: 13px; background: var(--gold); }.section p { margin: 0 0 14px; color: var(--body); line-height: 1.9; letter-spacing: .025em; }code { padding: 2px 6px; color: var(--gold); background: var(--bg2); border: 1px solid var(--line2); font-family: var(--mono); font-size: 12px; }
.note, .tip, .warn { margin: 16px 0; padding: 14px 18px; color: var(--body); font-size: 14px; line-height: 1.85; }.note { border-left: 2px solid rgba(201,168,76,.5); background: rgba(201,168,76,.06); }.tip { border-left: 2px solid var(--line2); background: rgba(255,255,255,.03); }.warn { border-left: 2px solid rgba(248,114,114,.4); background: rgba(248,114,114,.05); }
.performance-note { display: grid; grid-template-columns: 128px 1fr; gap: 18px; align-items: center; margin: 18px 0 22px; padding: 18px 20px; border: 1px solid rgba(201,168,76,.32); background: rgba(201,168,76,.08); }.performance-badge { color: var(--gold); font: 11px var(--mono); letter-spacing: .14em; }.performance-note h3 { margin: 0 0 4px; color: var(--heading2); font-size: 15px; }.performance-note p { margin: 0 !important; font-size: 14px; line-height: 1.75 !important; }
.intro-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; margin: 30px 0; padding: 20px; border: 1px solid var(--line); background: var(--bg2); }.flow-item { display: grid; gap: 3px; }.flow-index { color: var(--gold); font: 10px var(--mono); letter-spacing: .1em; }.flow-item strong { color: var(--heading2); font-size: 15px; }.flow-item span:last-child { color: var(--faint); font-size: 12px; }.flow-arrow { color: var(--gold); font-family: var(--mono); }.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 28px; background: var(--line); }.feat-card { padding: 24px 28px; background: var(--bg); transition: background .2s; }.feat-card:hover { background: var(--bg2); }.feat-icon { margin-bottom: 10px; color: var(--gold); font: 22px var(--mono); }.feat-title { margin: 0 0 8px; color: var(--heading2); font-size: 14px; font-weight: 600; }.feat-desc { margin: 0 !important; color: var(--body); font-size: 14px; line-height: 1.75 !important; }.feat-grid--compact { margin-top: 28px; }.steps { margin: 8px 0 0; padding: 0; list-style: none; }.steps li { display: grid; grid-template-columns: 36px 1fr; gap: 20px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }.steps li:last-child { border-bottom: none; }.snum { width: 32px; height: 32px; display: grid; place-items: center; color: var(--bg); background: var(--gold); font: 12px var(--mono); font-weight: 700; }.sbody { padding-top: 4px; }.stitle { margin: 0 0 6px; color: var(--heading2); font-size: 14px; }.sdesc { margin: 0 !important; font-size: 14px; line-height: 1.85 !important; }
.ui-preview { max-width: 620px; margin: 30px auto; overflow: hidden; color: #d2dcea; background: #0b0e14; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.28); font-family: var(--mono); }.ui-top, .ui-tabs, .ui-connection, .ui-folder, .ui-log-head, .ui-log-row { display: flex; align-items: center; }.ui-top { justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }.ui-brand { color: #fff; font-size: 15px; font-weight: 600; }.ui-brand small { color: #798394; font-size: 10px; font-weight: 400; }.ui-status { display: flex; gap: 6px; align-items: center; color: #798394; font-size: 10px; letter-spacing: .08em; }.ui-status i { width: 7px; height: 7px; border-radius: 50%; background: #798394; }.ui-tabs { gap: 22px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.08); }.ui-tabs span { padding: 11px 2px 9px; color: #798394; font-size: 10px; letter-spacing: .08em; }.ui-tabs .is-active { color: #ddb95a; border-bottom: 2px solid #ddb95a; }.ui-connection { justify-content: space-between; gap: 20px; padding: 24px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }.ui-connection small, .ui-folder small { display: block; margin-bottom: 7px; color: #798394; font-size: 9px; letter-spacing: .12em; }.ui-connection strong { display: block; color: #fff; font-size: 21px; letter-spacing: .02em; }.ui-connection strong span { color: #798394; }.ui-connection em { display: block; margin-top: 4px; color: #798394; font-size: 10px; font-style: normal; }.ui-connection button { padding: 9px 18px; color: #0b0e14; background: #c9a84c; border: 0; font: 12px var(--mono); font-weight: 600; }.ui-folder { gap: 18px; padding: 13px 20px; background: #10141c; border-bottom: 1px solid rgba(255,255,255,.08); }.ui-folder small { margin: 0; }.ui-folder span { color: #aeb8c7; font-size: 11px; }.ui-log-head { gap: 20px; padding: 14px 20px 8px; color: #798394; font-size: 9px; letter-spacing: .1em; }.ui-log-head b { margin-left: 5px; padding: 2px 6px; color: #ddb95a; background: rgba(201,168,76,.12); border-radius: 10px; }.ui-log-row { justify-content: space-between; padding: 10px 20px; border-top: 1px solid rgba(255,255,255,.05); }.ui-log-row strong { color: #e4eaf4; font-size: 11px; font-weight: 400; }.ui-log-row span { margin-left: auto; margin-right: 18px; color: #798394; font-size: 10px; }.ui-log-row i { color: #4ade80; font-style: normal; }.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 28px; margin-top: 30px; }.feature-list > div { padding: 16px 0; border-top: 1px solid var(--line); }.list-key { color: var(--gold); font: 10px var(--mono); letter-spacing: .12em; }.feature-list p { margin: 6px 0 0 !important; font-size: 14px; }.viewer-flow { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; gap: 14px; align-items: center; margin: 30px 0; padding: 25px 16px; background: var(--bg2); border: 1px solid var(--line); }.viewer-node { display: grid; gap: 3px; text-align: center; }.viewer-node span { color: var(--faint); font: 9px var(--mono); letter-spacing: .12em; }.viewer-node strong { color: var(--heading2); font-size: 13px; }.viewer-node--active strong { color: var(--gold); }.viewer-line { display: grid; gap: 4px; color: var(--gold); font: 10px var(--mono); text-align: center; }.viewer-line i { display: block; width: 46px; height: 1px; background: var(--gold); }.text-link { display: inline-block; margin-top: 24px; color: var(--gold); font-size: 14px; text-decoration: none; }.text-link:hover { text-decoration: underline; }
.table-wrap { overflow-x: auto; margin-top: 24px; }.table-wrap table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 14px; }.table-wrap th, .table-wrap td { padding: 13px 14px; text-align: left; border: 1px solid var(--line); }.table-wrap th { color: var(--heading2); background: var(--bg2); font-size: 12px; font-weight: 600; }.table-wrap td { color: var(--body); }.table-wrap td code { margin-right: 4px; }.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 20px; background: var(--line); }.safety-card { padding: 22px; background: var(--bg); }.safety-icon { display: grid; width: 28px; height: 28px; place-items: center; margin-bottom: 14px; color: var(--bg); background: var(--gold); font: 13px var(--mono); font-weight: 700; }.safety-card h3 { margin: 0 0 8px; color: var(--heading2); font-size: 14px; }.safety-card p { margin: 0 !important; font-size: 13px; line-height: 1.75 !important; }.env-list { margin-top: 18px; border-top: 1px solid var(--line); }.env-list > div { display: flex; align-items: baseline; gap: 30px; padding: 17px 0; border-bottom: 1px solid var(--line); }.env-list span { flex: 0 0 90px; color: var(--gold); font: 10px var(--mono); letter-spacing: .12em; }.env-list strong { color: var(--heading2); font-size: 15px; font-weight: 500; }.fine-print { margin-top: 22px !important; color: var(--faint) !important; font-size: 13px; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { padding: 18px 0; color: var(--heading2); cursor: pointer; font-size: 15px; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::before { content: 'Q.'; margin-right: 12px; color: var(--gold); font: 12px var(--mono); }.faq-list details p { max-width: 760px; margin: -2px 0 18px 31px !important; font-size: 14px; }.site-footer { display: flex; justify-content: space-between; gap: 28px; padding: 36px var(--side) 44px; color: var(--faint); border-top: 1px solid var(--line); font: 11px var(--mono); }.site-footer > div:first-child { display: flex; align-items: center; gap: 10px; }.footer-mark { display: inline-grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--gold); }.footer-links { gap: 18px; flex-wrap: wrap; }.footer-links a { text-decoration: none; }
@media (max-width: 760px) { :root, [data-theme="dark"] { --pad: 20px; }.site-nav { height: 58px; }.nav-left { gap: 14px; }.nav-back, .nav-guide { display: none; }.nav-actions { gap: 0; }.theme-toggle { padding: 7px 10px; }.toc-bar { top: 58px; }.toc-bar-inner { padding: 0 12px; }.toc-btn { padding: 13px 14px; }.hero { padding-top: 54px; padding-bottom: 54px; }.hero-subtitle { font-size: 16px; }.section { padding: 54px 0; }.intro-flow { grid-template-columns: 1fr; gap: 13px; }.flow-arrow { transform: rotate(90deg); justify-self: center; }.performance-note { grid-template-columns: 1fr; gap: 8px; }.feat-grid, .feature-list, .safety-grid { grid-template-columns: 1fr; }.feat-card { padding: 21px; }.ui-connection { align-items: flex-start; flex-direction: column; }.ui-connection button { align-self: stretch; }.viewer-flow { grid-template-columns: 1fr; gap: 13px; }.viewer-line { transform: rotate(90deg); justify-self: center; }.env-list > div { display: grid; gap: 5px; }.site-footer { flex-direction: column; padding-bottom: 32px; }.toc-arrow { display: block; }.toc-arrow[hidden] { display: none; } }
@media (min-width: 761px) { .toc-bar.can-scroll .toc-arrow { display: flex; align-items: center; justify-content: center; } }