:root {
  color-scheme: light;
  --bg:#faf6f0; --surface:#fffdf9; --surface-low:#f4efe7; --surface-high:#ece7dd;
  --primary:#4a7c59; --primary-strong:#376847; --primary-soft:#dce8dc;
  --tertiary:#705c30; --tertiary-soft:#efe2c6; --ink:#2d312e; --muted:#6f716c;
  --line:#dddcd3; --danger:#9b3f36; --shadow:0 4px 20px rgba(46,50,48,.06);
  --header-bg:rgba(250,246,240,.88); --hero-line:rgba(74,124,89,.13); --focus:rgba(74,124,89,.45);
  --display:"Literata","Songti SC","STSong",serif;
  --body:"Nunito Sans","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#101223; --surface:#1c1e30; --surface-low:#181a2c; --surface-high:#27293b;
  --primary:#bbc3ff; --primary-strong:#e0e0fa; --primary-soft:rgba(61,90,254,.18);
  --tertiary:#40e56c; --tertiary-soft:rgba(64,229,108,.08); --ink:#e0e0fa; --muted:#a7a8bd;
  --line:#444656; --danger:#ffb4ab; --shadow:0 10px 30px rgba(0,0,0,.24);
  --header-bg:rgba(16,18,35,.88); --hero-line:rgba(187,195,255,.09); --focus:rgba(187,195,255,.48);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:var(--body); line-height:1.6; text-rendering:optimizeLegibility; }
a { color:inherit; }
button, input, textarea, select { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link { position:fixed; z-index:100; left:16px; top:-60px; padding:10px 14px; border-radius:10px; color:var(--surface); background:var(--primary-strong); transition:top .18s ease-out; }
.skip-link:focus { top:16px; }
.site-header { position:sticky; z-index:50; top:0; border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent); background:var(--header-bg); backdrop-filter:blur(18px); }
.header-inner { width:min(1180px,calc(100% - 40px)); height:72px; margin:auto; display:flex; align-items:center; gap:42px; }
.wordmark { font:700 27px/1 var(--display); letter-spacing:-1.2px; text-decoration:none; }
.wordmark-dot { color:var(--primary); }
.main-nav { display:flex; gap:28px; margin-left:auto; }
.main-nav a { position:relative; color:var(--muted); font-size:14px; font-weight:700; text-decoration:none; }
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px; background:var(--primary); transition:right .18s ease-out; }
.main-nav a:hover { color:var(--ink); }
.main-nav a:hover::after { right:0; }
.main-nav a.active { color:var(--ink); }
.main-nav a.active::after { right:0; }
.header-actions { display:flex; align-items:center; gap:10px; }
.segmented { display:flex; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface-low); }
.segmented button { min-width:34px; height:28px; padding:0 7px; border:0; border-radius:7px; color:var(--muted); background:transparent; font-size:11px; font-weight:800; cursor:pointer; }
.segmented button[aria-pressed="true"] { color:var(--ink); background:var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.icon-button { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--surface); cursor:pointer; }
.icon-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.theme-moon { display:none; }
html[data-theme="dark"] .theme-moon { display:block; }
html[data-theme="dark"] .theme-sun { display:none; }
.hero { width:min(1180px,calc(100% - 40px)); min-height:650px; margin:auto; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(440px,.98fr); align-items:center; gap:56px; padding:76px 0 88px; }
.eyebrow, .section-index { margin:0 0 20px; color:var(--primary); font:800 11px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:9px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 5px var(--primary-soft); }
.hero h1 { max-width:680px; margin:0; font:600 clamp(50px,6vw,82px)/1.05 var(--display); letter-spacing:-.052em; }
.hero h1 em { color:var(--primary); font-style:italic; font-weight:600; }
.hero-lead { max-width:625px; margin:28px 0 0; color:var(--muted); font-size:18px; line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:0 20px; border:1px solid transparent; border-radius:10px; font-size:14px; font-weight:800; text-decoration:none; cursor:pointer; transition:transform .18s ease-out,border-color .18s ease-out,background .18s ease-out; }
.button:hover { transform:translateY(-2px); }
.button svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.button-primary { color:#fff; background:var(--primary-strong); }
html[data-theme="dark"] .button-primary { color:#101223; background:#bbc3ff; }
.button-secondary { border-color:var(--line); background:var(--surface); }
.button-secondary:hover { border-color:var(--primary); }
.hero-map { position:relative; min-height:470px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface-low); box-shadow:var(--shadow); }
.map-grid { position:absolute; inset:0; opacity:.7; background-image:linear-gradient(var(--hero-line) 1px,transparent 1px),linear-gradient(90deg,var(--hero-line) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(to bottom,black,transparent 95%); }
.hero-map::before, .hero-map::after { content:""; position:absolute; border:1px solid var(--hero-line); border-radius:50%; }
.hero-map::before { width:340px; height:340px; right:-100px; top:-130px; }
.hero-map::after { width:230px; height:230px; left:-85px; bottom:-75px; }
.route-lines { position:absolute; inset:20px 8px 30px; width:calc(100% - 16px); height:calc(100% - 50px); }
.route { fill:none; stroke-linecap:round; }
.route-muted { stroke:var(--line); stroke-width:2; stroke-dasharray:4 8; }
.route-main { stroke:var(--primary); stroke-width:3; }
.map-label { position:absolute; top:34px; left:34px; display:flex; flex-direction:column; padding-left:13px; border-left:2px solid var(--tertiary); }
.map-label span { color:var(--muted); font-size:11px; font-weight:700; }
.map-label strong { font:600 25px/1.2 var(--display); letter-spacing:.04em; }
.map-node { position:absolute; display:flex; align-items:center; gap:8px; color:var(--ink); font-size:12px; font-weight:800; }
.map-node i { width:11px; height:11px; border:3px solid var(--surface); border-radius:50%; background:var(--tertiary); box-shadow:0 0 0 2px var(--tertiary); }
.node-1 { left:31%; top:55%; }.node-2 { left:69%; top:43%; }.node-3 { left:50%; top:31%; }
.map-stat { position:absolute; display:flex; flex-direction:column; min-width:118px; padding:14px 16px; border:1px solid color-mix(in srgb,var(--line) 80%,transparent); border-radius:10px; background:color-mix(in srgb,var(--surface) 90%,transparent); backdrop-filter:blur(10px); box-shadow:var(--shadow); }
.map-stat strong { font:600 27px/1 var(--display); }.map-stat span { margin-top:6px; color:var(--muted); font-size:10px; font-weight:700; }
.stat-a { right:28px; top:102px; }.stat-b { left:26px; bottom:52px; }
.map-caption { position:absolute; right:20px; bottom:16px; color:var(--muted); font:700 9px/1 var(--mono); letter-spacing:.06em; }
.section { padding:102px max(20px,calc((100% - 1180px)/2)); }
.section-docs { border-block:1px solid var(--line); background:var(--surface-low); }
.section-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:60px; align-items:end; margin-bottom:44px; }
.section-heading h2, .contact-intro h2 { margin:0; font:600 clamp(34px,4.2vw,53px)/1.15 var(--display); letter-spacing:-.035em; }
.section-heading > p { max-width:470px; margin:0; color:var(--muted); }
.docs-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.doc-card { min-height:260px; position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:24px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink); background:var(--surface); text-align:left; cursor:pointer; transition:background .18s ease-out,transform .18s ease-out; }
.doc-card:hover { z-index:2; background:var(--primary-soft); transform:translateY(-2px); }
.doc-card-wide { grid-column:span 2; }
.card-number { color:var(--muted); font:700 10px/1 var(--mono); }
.doc-icon { width:44px; height:44px; display:grid; place-items:center; margin-top:35px; border-radius:10px; color:var(--primary-strong); background:var(--primary-soft); }
.doc-icon svg { width:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.doc-copy { display:flex; flex-direction:column; margin-top:auto; padding-top:32px; }
.doc-copy strong { font:600 20px/1.35 var(--display); }.doc-copy small { max-width:330px; margin-top:8px; color:var(--muted); font-size:12px; line-height:1.65; }
.card-arrow { position:absolute; top:20px; right:22px; color:var(--primary); font-size:18px; }
.demo-list { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.demo-card { min-height:310px; display:flex; flex-direction:column; padding:27px 26px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.demo-card:nth-child(3n) { border-right:0; }.demo-card.featured { background:var(--surface-low); }
.demo-meta { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font:700 9px/1 var(--mono); letter-spacing:.08em; }
.status { display:inline-flex; align-items:center; gap:7px; padding:6px 9px; border-radius:999px; letter-spacing:0; text-transform:none; }
.status i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-live { color:var(--primary-strong); background:var(--primary-soft); }.status-preview { color:var(--tertiary); background:var(--tertiary-soft); }.status-download { color:var(--primary-strong); background:var(--primary-soft); }.status-maintenance { color:var(--muted); background:var(--surface-high); }
.demo-card h3 { margin:45px 0 12px; font:600 24px/1.3 var(--display); }
.demo-card p { max-width:330px; margin:0; color:var(--muted); font-size:13px; }
.demo-card > a, .disabled-link { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:22px; border-top:1px solid var(--line); color:var(--primary-strong); font-size:12px; font-weight:800; text-decoration:none; }
.demo-card > a:hover { color:var(--tertiary); }.is-maintenance { opacity:.73; }.disabled-link { color:var(--muted); }
.contact-section { display:grid; grid-template-columns:.78fr 1.22fr; gap:90px; padding:105px max(20px,calc((100% - 1180px)/2)); color:var(--ink); background:var(--surface-low); border-top:1px solid var(--line); }
.contact-intro > p:not(.section-index) { max-width:410px; color:var(--muted); }
.contact-note { display:flex; align-items:baseline; gap:10px; margin-top:42px; }.contact-note span { color:var(--tertiary); font:600 34px/1 var(--display); }.contact-note small { color:var(--muted); }
.contact-form { padding:30px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form label { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; color:var(--ink); font-size:11px; font-weight:800; }
.contact-form input, .contact-form textarea, .contact-form select { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 13px; color:var(--ink); background:var(--bg); font-size:13px; font-weight:500; }
.contact-form input, .contact-form select { height:45px; }.contact-form textarea { min-height:120px; resize:vertical; }
.contact-form input:hover, .contact-form textarea:hover, .contact-form select:hover { border-color:var(--primary); }
.honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.form-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:4px; }
.form-footer p { max-width:330px; margin:0; color:var(--muted); font-size:10px; }.form-footer p.is-error { color:var(--danger); }.form-footer p.is-success { color:var(--primary-strong); }
.contact-form[aria-busy="true"] button { opacity:.6; pointer-events:none; }
.site-footer { width:min(1180px,calc(100% - 40px)); min-height:100px; margin:auto; display:flex; align-items:center; gap:26px; color:var(--muted); font-size:11px; }
.site-footer p:nth-of-type(1) { margin-right:auto; }
.doc-dialog { width:min(720px,calc(100% - 32px)); max-height:min(760px,calc(100vh - 40px)); padding:34px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--surface); box-shadow:0 30px 90px rgba(0,0,0,.24); }
.doc-dialog::backdrop { background:rgba(16,18,20,.54); backdrop-filter:blur(4px); }
.dialog-close { position:absolute; top:18px; right:18px; width:36px; height:36px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--surface-low); font-size:24px; line-height:1; cursor:pointer; }
.doc-dialog h2 { margin:0; padding-right:44px; font:600 36px/1.2 var(--display); }.dialog-lead { color:var(--muted); }
.doc-quickstart { margin-top:26px; }.doc-quickstart h3 { margin:22px 0 8px; font:600 16px/1.3 var(--display); }.doc-quickstart p, .doc-quickstart li { color:var(--muted); font-size:13px; }
.doc-quickstart pre { overflow:auto; margin:12px 0; padding:16px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--surface-low); font:11px/1.7 var(--mono); white-space:pre-wrap; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }.dialog-actions a { font-size:12px; font-weight:800; }
.doc-card { text-decoration:none; }
.curling-quickstart { border-bottom:1px solid var(--line); }
.curling-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px; align-items:start; }
.curling-layout h3 { margin:0 0 22px; font:600 26px/1.3 var(--display); }
.curling-layout code { font-family:var(--mono); }
.curling-meta { margin:16px 0 24px; color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.curling-table-wrap { max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.curling-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.curling-table th { color:var(--muted); background:var(--surface-low); font-weight:700; }
.curling-table th, .curling-table td { padding:13px 12px; border-bottom:1px solid var(--line); }
.curling-table tr:last-child td { border-bottom:0; }
.curling-table td:first-child { color:var(--primary-strong); font:700 11px var(--mono); }
.curling-table td:nth-child(2) { white-space:nowrap; }
.curling-note { margin:24px 0; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--surface-low); font-size:15px; text-wrap:pretty; }
.curling-steps { margin:0; padding:0; list-style:none; counter-reset:trip; }
.curling-steps li { position:relative; padding:0 0 26px 44px; counter-increment:trip; }
.curling-steps li::before { content:counter(trip,decimal-leading-zero); position:absolute; top:3px; left:0; color:var(--primary); font:700 13px/1.6 var(--mono); }
.curling-steps h4 { margin:0; font-size:17px; line-height:1.5; }
.curling-steps p { margin:10px 0 14px; color:var(--muted); font-size:15px; text-wrap:pretty; }
.curling-steps pre { margin:0; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface-low); font:12px/1.8 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.curling-example, .curling-other { min-width:0; padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.curling-other { margin:24px 0; }
.curling-example summary, .curling-other summary { min-height:44px; display:list-item; cursor:pointer; font-size:15px; font-weight:700; }
.curling-example p { color:var(--muted); font-size:14px; text-wrap:pretty; }
.curling-example pre { margin:20px 0; padding:16px; background:var(--surface-low); border-radius:10px; font:12px/1.8 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:900px) {
  .curling-layout { grid-template-columns:1fr; gap:42px; }
  .hero { grid-template-columns:1fr; padding-top:60px; }.hero-map { min-height:400px; }.section-heading { grid-template-columns:1fr; gap:20px; }.docs-grid { grid-template-columns:repeat(2,1fr); }.demo-list { grid-template-columns:repeat(2,1fr); }.demo-card:nth-child(3n) { border-right:1px solid var(--line); }.demo-card:nth-child(2n) { border-right:0; }.contact-section { grid-template-columns:1fr; gap:46px; }
}
@media (max-width:640px) {
  .header-inner { width:calc(100% - 28px); height:64px; gap:12px; }.main-nav { display:none; }.header-actions { margin-left:auto; }.hero { width:calc(100% - 28px); min-height:auto; padding:48px 0 64px; gap:42px; }.hero h1 { font-size:47px; }.hero-lead { font-size:16px; }.hero-actions .button { flex:1; }.hero-map { min-height:355px; }.node-2 { left:65%; }.map-caption { display:none; }.section { padding:72px 14px; }.docs-grid, .demo-list { grid-template-columns:1fr; }.doc-card-wide { grid-column:span 1; }.doc-card { min-height:225px; }.demo-card, .demo-card:nth-child(3n), .demo-card:nth-child(2n) { min-height:270px; border-right:0; }.contact-section { padding:72px 14px; }.contact-form { padding:22px 16px; }.field-row { grid-template-columns:1fr; gap:0; }.form-footer { align-items:stretch; flex-direction:column; }.site-footer { width:calc(100% - 28px); padding:28px 0; flex-wrap:wrap; gap:12px 20px; }.site-footer p { margin:0; }.site-footer p:nth-of-type(1) { width:100%; margin:0; }.doc-dialog { padding:28px 20px; }.doc-dialog h2 { font-size:29px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }
