:root { --navy:#071d32; --navy-2:#0c2b46; --teal:#00a6a6; --teal-dark:#007d85; --ink:#102b45; --text:#496076; --line:#d8e2ea; --pale:#f4f8fb; --white:#fff; --success:#007e72; --warning:#a06b12; --rail: 180px; --max: 1220px; font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color:var(--ink); background:var(--white); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:#fff; }
button, a { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; left:12px; top:-48px; z-index:10; padding:10px 14px; color:#fff; background:var(--navy); border-radius:6px; }
.skip-link:focus { top:12px; }
.side-rail { position:fixed; z-index:5; inset:0 auto 0 0; width:var(--rail); color:#fff; background:var(--navy); display:flex; flex-direction:column; }
.rail-brand { height:66px; display:grid; place-items:center; font-size:20px; font-weight:800; letter-spacing:-.08em; border-bottom:1px solid rgba(255,255,255,.13); }
.rail-nav { padding:14px 0; display:grid; gap:3px; }
.rail-link { min-height:46px; padding:0 17px; display:flex; gap:11px; align-items:center; color:#d9e8f5; font-size:13px; font-weight:650; transition:background .18s, color .18s; }
.rail-link:hover, .rail-link.is-active { color:#fff; background:rgba(255,255,255,.13); }
.nav-icon, .action-icon, .outcome-icon, .flow-icon, .trace-dot, .status-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.nav-icon svg { width:17px; height:17px; }
.rail-bottom { margin-top:auto; min-height:54px; padding:0 17px; display:flex; gap:11px; align-items:center; border-top:1px solid rgba(255,255,255,.13); color:#b8cfdf; font-size:12px; }
.page-shell { min-height:100vh; margin-left:var(--rail); }
.topbar { height:66px; position:sticky; top:0; z-index:4; display:flex; align-items:center; gap:24px; padding:0 max(28px, calc((100vw - var(--rail) - var(--max))/2)); background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.top-nav { display:flex; align-items:center; gap:25px; flex:1; white-space:nowrap; overflow:auto; scrollbar-width:none; }
.top-nav::-webkit-scrollbar { display:none; }
.top-nav a { color:#4a6177; font-size:13px; font-weight:650; transition:color .18s; }
.top-nav a:hover { color:var(--teal-dark); }
.top-actions { display:flex; gap:8px; }
.button { height:34px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:4px; padding:0 12px; font-size:12px; font-weight:750; border:1px solid var(--line); background:#fff; color:var(--ink); }
.button:hover { border-color:#aebfcb; }
.button-primary { color:#fff; border-color:var(--teal); background:var(--teal); }.button-primary:hover { background:var(--teal-dark); }
.action-icon svg { width:15px; height:15px; }
.mobile-menu,.mobile-nav { display:none; }
.section { max-width:var(--max); margin:0 auto; padding:64px 30px; scroll-margin-top:66px; border-bottom:1px solid var(--line); }
.intro-section { padding-top:52px; }
h1,h2,h3,p { margin:0; }
h1 { max-width:800px; font-size:clamp(31px,4vw,46px); line-height:1.16; letter-spacing:-.045em; font-weight:800; overflow-wrap:anywhere; word-break:break-all; }
.intro-copy h2, .section-heading h2 { margin:26px 0 16px; color:var(--teal-dark); font-size:18px; line-height:1.2; letter-spacing:-.02em; }
.intro-copy p { max-width:940px; color:var(--text); font-size:14px; line-height:1.9; }.intro-copy p + p { margin-top:5px; }
.outcome-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px; }
.outcome-item { min-height:137px; padding:20px 16px; display:flex; gap:14px; border:1px solid var(--line); border-radius:8px; background:#fff; transition:border-color .2s, transform .2s; }.outcome-item:hover { border-color:var(--teal); transform:translateY(-2px); }
.outcome-icon { width:35px; height:35px; color:var(--teal); }.outcome-icon svg { width:32px; height:32px; stroke-width:1.5; }
.outcome-label { display:block; color:#5a6f82; font-size:12px; font-weight:700; }.outcome-item strong { display:inline-block; margin:7px 4px 4px 0; font-size:29px; line-height:1; letter-spacing:-.05em; }.outcome-item small { display:block; color:#718496; font-size:11px; line-height:1.45; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:25px; margin-bottom:30px; }.section-heading h2 { margin:0; color:var(--teal-dark); }.section-heading p { color:#708296; font-size:13px; line-height:1.6; text-align:right; }
.architecture-flow { display:grid; grid-template-columns:1fr 32px 1fr 32px 1fr 32px 1fr; align-items:center; }.flow-card { min-height:205px; padding:23px 21px; border:1px solid var(--line); border-radius:7px; background:#fff; }.flow-icon { width:25px; height:25px; color:var(--teal); }.flow-icon svg { width:24px; height:24px; stroke-width:1.7; }.flow-card h3 { margin:14px 0 12px; font-size:16px; }.flow-card ul { padding:0; margin:0; list-style:none; color:#617588; font-size:12px; line-height:1.85; }.flow-card li::before { content:""; display:inline-block; width:4px; height:4px; margin:0 7px 2px 0; background:var(--teal); border-radius:50%; }.flow-arrow { height:2px; background:var(--teal); position:relative; margin:0 7px; }.flow-arrow::after { content:""; position:absolute; right:-1px; top:50%; width:8px; height:8px; border-top:2px solid var(--teal); border-right:2px solid var(--teal); transform:translateY(-50%) rotate(45deg); }
.framework-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:36px; border:1px solid var(--line); border-radius:7px; overflow:hidden; }.framework-column { padding:25px 28px; }.framework-column + .framework-column { border-left:1px solid var(--line); background:#fbfdff; }.framework-column h3 { color:var(--navy); font-size:15px; }.framework-column dl { display:grid; grid-template-columns:repeat(3,1fr); margin:19px 0 0; gap:18px; }.framework-column dl div { min-width:0; }.framework-column dt { color:var(--teal-dark); font-size:12px; font-weight:800; }.framework-column dd { margin:7px 0 0; color:#65798b; font-size:11px; line-height:1.55; }
.prd-workspace { display:grid; grid-template-columns:255px 1fr; border:1px solid var(--line); border-radius:7px; overflow:hidden; }.prd-tabs { padding:9px 0; background:#fbfdff; border-right:1px solid var(--line); }.prd-tab { width:100%; min-height:51px; padding:0 18px; display:flex; align-items:center; gap:12px; color:#62768a; border:0; background:transparent; text-align:left; font-size:12px; font-weight:750; }.prd-tab span { font-weight:650; }.prd-tab:hover { background:#eef7f8; }.prd-tab.is-selected { color:#fff; background:var(--teal); }.prd-detail { padding:30px; display:grid; grid-template-columns:56px 1fr; column-gap:18px; align-content:start; min-height:344px; }.detail-number { width:43px; height:43px; display:grid; place-items:center; color:var(--teal-dark); border:1px solid #b9d8d9; background:#f3fbfb; border-radius:50%; font-size:13px; font-weight:800; }.prd-detail h3 { margin:2px 0 8px; font-size:20px; letter-spacing:-.025em; }.prd-detail p { color:var(--text); font-size:13px; line-height:1.75; }.requirement-list { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 25px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }.requirement { display:flex; gap:9px; color:#536b80; font-size:12px; line-height:1.65; }.requirement::before { content:""; width:7px; height:7px; flex:0 0 auto; margin-top:6px; border-radius:50%; background:var(--teal); }
.integration-layout { display:grid; grid-template-columns:305px 1fr; border:1px solid var(--line); border-radius:7px 7px 0 0; overflow:hidden; }.endpoint-panel { border-right:1px solid var(--line); background:#fbfdff; }.endpoint-heading { min-height:52px; padding:0 17px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); color:var(--navy); font-size:13px; font-weight:800; }.endpoint-heading small { color:#6d8091; font-size:10px; font-weight:650; }.endpoint-list { padding:9px 0; }.endpoint { width:100%; padding:12px 17px; border:0; border-left:3px solid transparent; background:transparent; display:flex; align-items:center; gap:9px; text-align:left; }.endpoint:hover { background:#f1f8f9; }.endpoint.is-selected { border-left-color:var(--teal); background:#eaf7f7; }.endpoint-method { min-width:37px; color:#008078; font-size:10px; font-weight:850; }.endpoint-path { color:#466175; font-family:"SFMono-Regular",Consolas,monospace; font-size:11px; }.api-detail { min-width:0; padding:28px 30px 27px; }.api-detail-head { display:flex; justify-content:space-between; gap:10px; align-items:center; }.method-badge { display:inline-block; width:46px; padding:5px 0; color:#fff; background:var(--teal); border-radius:3px; text-align:center; font-size:10px; font-weight:850; }.api-detail-head code { margin-left:9px; color:var(--navy); font-size:14px; font-weight:750; }.copy-button { display:flex; align-items:center; gap:6px; color:#557083; border:1px solid var(--line); background:#fff; border-radius:4px; padding:7px 10px; font-size:11px; font-weight:750; }.copy-button:hover { border-color:var(--teal); color:var(--teal-dark); }.api-detail h3 { margin:20px 0 8px; font-size:17px; }.api-detail p { color:var(--text); font-size:12px; line-height:1.7; }.api-detail pre { max-height:328px; margin:19px 0 14px; padding:17px; overflow:auto; color:#1c4d61; background:#f4f8fa; border:1px solid #e0e8ed; border-radius:5px; font-size:11px; line-height:1.65; tab-size:2; }.api-notes { display:flex; flex-wrap:wrap; gap:8px 22px; color:#607489; font-size:11px; }.api-note { display:flex; gap:7px; align-items:baseline; }.api-note b { color:var(--teal-dark); }
.mapping-wrap { border:1px solid var(--line); border-top:0; border-radius:0 0 7px 7px; }.mapping-heading { min-height:60px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }.mapping-heading h3 { font-size:15px; }.mapping-heading span { color:#6e8192; font-family:"SFMono-Regular",Consolas,monospace; font-size:10px; }.table-scroll { overflow:auto; }table { width:100%; border-collapse:collapse; min-width:720px; }th { padding:11px 16px; color:#516b7f; background:#f4f8fb; border-bottom:1px solid var(--line); text-align:left; font-size:11px; }td { padding:13px 16px; color:#556c80; border-bottom:1px solid #e5edf2; font-size:11px; line-height:1.5; }tbody tr:last-child td { border-bottom:0; }td code { color:#006f76; font-size:10px; }.yes { color:var(--success); font-weight:800; }.muted { color:#8595a2; }
.trace-line { margin:6px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(5,1fr); position:relative; }.trace-line::before { content:""; position:absolute; top:23px; left:7%; right:7%; height:1px; background:#9ccfd0; }.trace-step { position:relative; z-index:1; text-align:center; }.trace-dot { width:46px; height:46px; color:#fff; background:var(--teal); border:5px solid #e7f7f7; border-radius:50%; }.trace-dot svg { width:18px; height:18px; stroke-width:2; }.trace-step h3 { margin:14px 0 4px; font-size:13px; }.trace-step time { color:var(--teal-dark); font-size:10px; font-weight:750; }.trace-step p { max-width:145px; margin:6px auto 0; color:#697c8d; font-size:10px; line-height:1.5; }.trace-inspector { display:grid; grid-template-columns:1fr 1fr; margin-top:37px; border:1px solid var(--line); border-radius:7px; }.trace-inspector div { padding:20px 24px; }.trace-inspector div + div { border-left:1px solid var(--line); }.trace-inspector span { display:block; color:var(--teal-dark); font-size:11px; font-weight:800; }.trace-inspector strong { display:block; margin-top:8px; color:#536b7e; font-size:12px; line-height:1.65; }
.boundary-grid { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:7px; overflow:hidden; }.boundary-card { padding:28px; }.boundary-card + .boundary-card { border-left:1px solid var(--line); background:#fbfdff; }.boundary-title { display:flex; align-items:center; gap:11px; }.status-icon { width:28px; height:28px; color:var(--teal); }.status-icon svg { width:26px; height:26px; stroke-width:1.8; }.boundary-title h3 { font-size:17px; }.boundary-card ul { margin:21px 0 0; padding:0; list-style:none; display:grid; gap:10px; }.boundary-card li { display:flex; gap:9px; color:#566e81; font-size:12px; line-height:1.6; }.boundary-card li::before { content:"✓"; color:var(--teal); font-weight:900; }.production .status-icon { color:#bd861d; }.production li::before { content:"•"; color:#bd861d; }.contract-check { display:flex; gap:13px; align-items:flex-start; margin-top:17px; padding:17px 20px; border-left:3px solid var(--teal); background:#f3fafa; }.contract-check p { color:#506a7c; font-size:12px; line-height:1.7; }.contract-check strong { color:var(--navy); }
.footer { max-width:var(--max); margin:0 auto; padding:20px 30px 32px; display:flex; gap:24px; color:#7b8d9c; font-size:10px; }.toast { position:fixed; z-index:20; bottom:22px; left:50%; transform:translate(-50%,18px); padding:10px 14px; color:#fff; background:var(--navy); border-radius:5px; font-size:12px; opacity:0; pointer-events:none; transition:.2s; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:1150px) { :root { --rail: 155px; }.topbar { padding:0 24px; }.top-nav { gap:17px; }.architecture-flow { grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr; }.flow-card { padding:18px 15px; }.framework-column dl { grid-template-columns:1fr 1fr; }.framework-column dl div:last-child { grid-column:span 2; } }
@media (max-width:850px) { :root { --rail:0px; }.side-rail { display:none; }.page-shell { margin:0; }.topbar { height:59px; padding:0 18px; }.top-nav { display:none; }.mobile-menu { display:block; padding:0; color:var(--navy); border:0; background:none; font-size:13px; font-weight:800; }.top-actions { margin-left:auto; }.button-quiet { display:none; }.mobile-nav { position:fixed; z-index:8; top:59px; right:0; left:0; padding:12px 18px; border-bottom:1px solid var(--line); background:#fff; box-shadow:0 8px 16px rgba(9,35,56,.08); }.mobile-nav:not([hidden]) { display:grid; grid-template-columns:repeat(2,1fr); gap:4px; }.mobile-nav a { padding:10px; color:#4b657a; font-size:12px; font-weight:700; }.section { padding:48px 20px; }.outcome-grid { grid-template-columns:repeat(2,1fr); }.architecture-flow { grid-template-columns:1fr 32px 1fr; gap:14px 0; }.architecture-flow .flow-card:nth-of-type(3) { grid-column:1; }.architecture-flow .flow-card:nth-of-type(4) { grid-column:3; }.architecture-flow .flow-arrow:nth-of-type(4) { display:none; }.flow-card { min-height:180px; }.framework-grid,.boundary-grid { grid-template-columns:1fr; }.framework-column + .framework-column,.boundary-card + .boundary-card { border-top:1px solid var(--line); border-left:0; }.prd-workspace,.integration-layout { grid-template-columns:1fr; }.prd-tabs,.endpoint-panel { border-right:0; border-bottom:1px solid var(--line); }.prd-tabs { display:flex; overflow:auto; padding:0; }.prd-tab { min-width:max-content; min-height:44px; padding:0 14px; }.prd-detail { min-height:0; }.endpoint-list { display:flex; overflow:auto; padding:0; }.endpoint { flex:0 0 auto; width:auto; border-left:0; border-bottom:3px solid transparent; }.endpoint.is-selected { border-left-color:transparent; border-bottom-color:var(--teal); }.trace-line { grid-template-columns:1fr; gap:19px; padding-left:54px; }.trace-line::before { top:22px; bottom:22px; left:23px; right:auto; width:1px; height:auto; }.trace-step { text-align:left; display:grid; grid-template-columns:46px 1fr; column-gap:15px; }.trace-step h3 { margin:2px 0 4px; }.trace-step p { max-width:none; margin:5px 0 0; }.trace-inspector { grid-template-columns:1fr; }.trace-inspector div + div { border-top:1px solid var(--line); border-left:0; } }
@media (max-width:520px) { .section-heading { display:block; }.section-heading p { margin-top:9px; text-align:left; }.outcome-grid { grid-template-columns:1fr; }.outcome-item { min-height:111px; }.architecture-flow { grid-template-columns:1fr; gap:9px; }.flow-arrow { display:none; }.architecture-flow .flow-card:nth-of-type(3),.architecture-flow .flow-card:nth-of-type(4) { grid-column:auto; }.flow-card { min-height:0; }.framework-column dl { grid-template-columns:1fr; }.framework-column dl div:last-child { grid-column:auto; }.prd-detail { padding:25px 20px; grid-template-columns:42px 1fr; }.detail-number { width:37px; height:37px; }.requirement-list { grid-template-columns:1fr; }.api-detail { padding:22px 18px; }.api-detail-head { align-items:flex-start; }.copy-button { flex:0 0 auto; font-size:0; }.copy-button .action-icon { width:14px; }.mapping-heading { padding:0 17px; }.mapping-heading span { display:none; }.footer { padding:18px 20px 29px; display:grid; gap:7px; }.button { padding:0 9px; }.button-primary { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }
@media print { :root { --rail:0px; } .side-rail,.topbar,.mobile-nav,.toast { display:none!important; }.page-shell { margin:0; }.section { max-width:none; padding:30px 36px; break-inside:avoid; }.outcome-item,.flow-card,.prd-workspace,.integration-layout,.mapping-wrap,.trace-inspector,.boundary-grid { break-inside:avoid; } }