/* 首屏尺寸与浮岛构图沿用已确认稿。 */
.hero { position:relative; overflow:hidden; overflow:clip; min-height:calc(100vh - var(--nav-h) - var(--peek)); min-height:calc(100svh - var(--nav-h) - var(--peek)); display:grid; align-content:center; padding-top:36px; padding-bottom:36px; }
.hero__inner { width:min(var(--container),100% - var(--hero-gutter)); margin-inline:auto; display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); gap:56px; align-items:center; }
.copy { position:relative; z-index:2; }
.badge { display:inline-flex; align-items:center; gap:10px; min-height:34px; padding:6px 15px 6px 13px; border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); border:1px solid var(--border); font-size:13px; font-weight:600; letter-spacing:.01em; max-width:100%; overflow-wrap:anywhere; }
.badge__dot { width:8px; height:8px; border-radius:var(--r-round); background:var(--success); color:var(--text); box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 16%,var(--clear)); animation:breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.8); } }
.appicon { position:relative; width:92px; height:92px; margin:30px 0 24px; border-radius:var(--r-app); display:grid; place-items:center; background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 70%,var(--white)),var(--accent) 48%,var(--accent-dark)); color:var(--white); box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -6px 12px color-mix(in srgb,var(--accent-dark) 75%,var(--clear)),var(--shadow-1),0 18px 36px color-mix(in srgb,var(--accent) 30%,var(--clear)); }
.appicon img { width:100%; height:100%; border-radius:inherit; }
.appicon::after { content:""; position:absolute; top:3px; left:4px; right:4px; height:48%; border-radius:var(--r-app-inner) var(--r-app-inner) var(--r-round) var(--r-round); background:linear-gradient(to bottom,var(--glass-sheen),var(--clear)); color:var(--white); pointer-events:none; }
.wordmark { margin:0; font-family:var(--font-display); color:var(--text); }
.wordmark__main { display:block; font-size:clamp(32px,2.6vw + 11px,48px); font-weight:900; line-height:1.14; letter-spacing:-.02em; }
.wordmark__hl { display:inline-block; margin:0 .06em; padding:0 .2em .05em; border-radius:var(--r-highlight); background:var(--accent); color:var(--white); transform:translateY(4px); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 35%,var(--clear)),var(--shadow-1),0 12px 24px color-mix(in srgb,var(--accent) 28%,var(--clear)); }
.wordmark__sub { display:block; margin-top:18px; font-size:clamp(19px,.9vw + 13px,26px); font-weight:800; line-height:1.3; letter-spacing:-.02em; }
.lead { margin:18px 0 0; max-width:31em; font-size:17px; line-height:1.75; color:var(--text-muted); }
.lead strong { color:var(--text); font-weight:700; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; padding:0; list-style:none; }
.chip,.tag { display:inline-flex; align-items:center; gap:6px; min-height:30px; max-width:100%; padding:5px 12px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--bg); color:var(--text-muted); font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.chips li { margin:0; }
.chip svg { width:12px; height:12px; color:var(--success-ink); flex-shrink:0; }
.plats { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:24px; padding-top:22px; border-top:1px solid var(--border); }
.plats__label { font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--text-muted); }
.plats__list { display:flex; flex-wrap:wrap; gap:14px; margin:0; padding:0; list-style:none; }
.plats__list li { margin:0; }
.plat__link { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text); text-decoration:none; border-radius:var(--r-sm); }
.plat__ico { width:30px; height:30px; border-radius:var(--r-platform); display:grid; place-items:center; background:var(--bg-panel); color:var(--text); }
.plat__ico svg { width:15px; height:15px; }
.plat__link:hover { color:var(--accent-dark); }
.plat__link:hover .plat__ico { background:var(--accent-soft); color:var(--accent-dark); }
.stage { position:relative; height:640px; margin-right:calc((100vw - min(var(--container),100vw - var(--hero-gutter))) / -2); }
.isle { position:absolute; width:var(--s); height:var(--s); transform:rotate(var(--r)); }
.isle__lift { position:absolute; inset:0; animation:isleIn .8s var(--ease) both; animation-delay:var(--d,0ms); }
@keyframes isleIn { from { opacity:0; transform:translateY(28px) scale(.96); } to { opacity:1; transform:none; } }
.isle__halo { position:absolute; inset:-26%; border-radius:var(--r-round); background:radial-gradient(closest-side,color-mix(in srgb,var(--c1) 46%,var(--clear)),color-mix(in srgb,var(--c2) 18%,var(--clear)) 62%,var(--clear)); color:var(--text); filter:blur(28px); }
.isle__body { position:absolute; inset:0; display:grid; place-items:center; border-radius:var(--r-isle); background:linear-gradient(150deg,color-mix(in srgb,var(--c1) 58%,var(--clear)),color-mix(in srgb,var(--c2) 52%,var(--clear))); color:var(--text); border:1px solid var(--glass-edge); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -10px 22px color-mix(in srgb,var(--c1) 42%,var(--clear)),var(--shadow-card); }
.isle__body::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(160deg,var(--glass-sheen),var(--clear) 42%); color:var(--text); pointer-events:none; }
.frag { position:relative; }
.isle--tray { --s:360px; --r:-8deg; --d:0ms; --c1:var(--halo-1); --c2:var(--halo-1b); left:24px; top:0; z-index:2; }
.isle--panes { --s:256px; --r:10deg; --d:90ms; --c1:var(--halo-3); --c2:color-mix(in srgb,var(--halo-3) 72%,var(--white)); right:-56px; top:6px; z-index:1; }
.isle--switch { --s:236px; --r:7deg; --d:180ms; --c1:var(--halo-2); --c2:color-mix(in srgb,var(--halo-2) 74%,var(--white)); left:48px; bottom:24px; z-index:4; }
.isle--rules { --s:336px; --r:-6deg; --d:270ms; --c1:var(--halo-4); --c2:var(--halo-4b); right:-36px; bottom:0; z-index:3; }
.frost { background:var(--frost); color:var(--text); border:1px solid var(--frost-edge); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow-card); }
.tray { width:216px; padding:6px; border-radius:var(--r-highlight); font-size:13px; font-weight:500; }
.tray__row { display:flex; align-items:center; gap:8px; height:30px; padding:0 10px 0 8px; border-radius:var(--r-xs); }
.tray__row--hover { background:var(--bg-panel-2); color:var(--text); }
.tray__mark { width:16px; height:16px; flex:none; display:grid; place-items:center; color:var(--accent-dark); }
.tray__hint { margin-left:auto; font-size:11px; color:var(--text-muted); }
.tray__sep { height:1px; margin:4px 8px; background:var(--border); color:var(--text); }
.switchcard { width:184px; padding:16px 16px 14px; border-radius:var(--r-md); }
.switchcard__row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.switchcard__label { font-size:14px; font-weight:700; }
.toggle { position:relative; width:40px; height:22px; flex-shrink:0; border-radius:var(--r-pill); background:var(--accent); color:var(--white); box-shadow:inset 0 1px 2px color-mix(in srgb,var(--accent-dark) 60%,var(--clear)); }
.toggle__knob { position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:var(--r-round); background:var(--white); color:var(--text); box-shadow:var(--shadow-1); }
.switchcard__port { display:block; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }
.panes { display:grid; grid-template-columns:repeat(2,68px); gap:10px; }
.pane { width:68px; height:68px; border-radius:var(--r-md); background:var(--white); color:var(--text); box-shadow:inset 0 -3px 0 var(--bg-panel-2),var(--shadow-1),0 10px 20px var(--ink-shadow-2); }
.pane--cat { background:var(--clear); color:var(--white); box-shadow:none; display:grid; place-items:center; }
.pane--cat svg { width:68px; height:68px; filter:drop-shadow(0 6px 10px var(--ink-shadow-2)); }
.rules { width:272px; padding:14px 14px 12px; border-radius:var(--r-md); font-family:var(--font-mono); font-size:12px; line-height:1.5; }
.rules__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding:0 4px; color:var(--text-muted); }
.rules__key { font-weight:700; color:var(--text); }
.rules__file { font-size:11px; }
.rules__line { display:flex; white-space:nowrap; padding:7px 10px; border-radius:var(--r-xs); background:var(--bg-panel); color:var(--text-muted); }
.rules__line + .rules__line { margin-top:6px; }
.rules__dash { margin-right:.6em; }
.rules__type { color:var(--text); font-weight:700; }
.rules__pol--proxy { color:var(--accent-dark); font-weight:700; }
.rules__pol--direct { color:var(--success-ink); font-weight:700; }
.dl-zone { padding-bottom:96px; }
.dl-zone__panel { width:min(var(--container),100% - var(--hero-gutter)); margin-inline:auto; padding:56px 56px 64px; border-radius:var(--r-xl); background:var(--bg-panel); color:var(--text); }
.dl-zone__title { margin:10px 0 0; font-size:32px; font-weight:900; letter-spacing:-.02em; line-height:1.2; }
.dl-zone__lead { margin:12px 0 0; max-width:38em; color:var(--text-muted); }
.dl-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin-top:32px; }
.dl-card { display:block; padding:22px 20px; border-radius:var(--r-lg); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); text-decoration:none; transition:transform var(--fast); }
.dl-card:hover { transform:translateY(-2px); }
.dl-card__name { display:block; margin-top:14px; font-weight:800; font-size:17px; }
.dl-card__apps { display:block; margin-top:4px; font-size:13px; color:var(--text-muted); }
.tabs { min-width:0; }
.tab-list,[role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; }
.tab-list [role="tab"] { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 22px; border:0; border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-weight:700; }
.tab-list [role="tab"]:hover { background:var(--bg-panel-2); color:var(--text); }
.tab-list [role="tab"][aria-selected="true"] { background:var(--accent-soft); color:var(--accent-dark); }
.tab-panel { margin-top:24px; }
.tabs.is-ready .tab-panel:not([hidden]) { animation:panelIn 260ms ease-out; }
@keyframes panelIn { from { opacity:0; } to { opacity:1; } }
.feature-tabs { display:grid; grid-template-columns:280px minmax(0,1fr); gap:40px; }
.feature-tabs .tab-list { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.feature-tabs .tab-list [role="tab"] { justify-content:flex-start; min-height:56px; background:var(--clear); color:var(--text-muted); }
.feature-tabs .tab-list [aria-selected="true"] { background:var(--accent-soft); color:var(--accent-dark); }
.feature-tabs .tab-panel { margin:0; }
.feature-stage { position:relative; border-radius:var(--r-xl); padding:40px; background:var(--bg-panel); color:var(--text); }
.feature-stage__visual { position:relative; isolation:isolate; min-height:240px; display:grid; place-items:center; }
.feature-stage__visual::before { content:""; position:absolute; inset:12% 15%; z-index:-1; border-radius:var(--r-round); background:radial-gradient(ellipse,color-mix(in srgb,var(--halo-1) 24%,var(--clear)),var(--clear) 72%); color:var(--text); filter:blur(24px); }
.feature-stage p { margin-top:24px; }
.toc { position:sticky; top:var(--nav-h); z-index:10; display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:100%; overflow-x:visible; padding:12px; border-radius:var(--r-lg); background:var(--bg); color:var(--text); box-shadow:var(--shadow-1); overscroll-behavior-inline:contain; }
.toc a { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border-radius:var(--r-pill); color:var(--text-muted); text-decoration:none; }
.toc a:hover { background:var(--accent-soft); color:var(--accent-dark); }
.faq-item { border-radius:var(--r-lg); padding:0 24px; background:var(--bg-panel); color:var(--text); margin-top:12px; }
.faq-item summary { position:relative; list-style:none; padding:22px 32px 22px 0; font-weight:700; cursor:pointer; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:18px; font-size:24px; color:var(--text-muted); }
.faq-item[open] summary::after { content:"−"; }
.faq-item__answer { padding-bottom:24px; color:var(--text-muted); }
.faq-item__answer p:last-child { margin-bottom:0; }
.term-card { padding:28px; border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); }
.term-card h3 { margin-top:16px; }
.term-card__alias { display:block; margin-top:6px; color:var(--text-muted); font-family:var(--font-mono); font-size:13px; font-weight:400; }
.term-card p { margin-bottom:0; color:var(--text-muted); }
.client-card { padding:32px; border-radius:var(--r-xl); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); border:1px solid var(--clear); }
.client-card--first { border-color:var(--accent); }
.client-card__head { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:20px; }
.client-card__head h3 { margin:0; }
.client-icon { width:56px; height:56px; flex-shrink:0; }
.client-card__meta { color:var(--text-muted); font-size:14px; }
[data-rev]:empty { display:none; }
.status { display:inline-flex; align-items:center; justify-content:center; gap:6px; max-width:100%; padding:5px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:700; overflow-wrap:anywhere; }
.status--first { background:var(--accent-soft); color:var(--accent-dark); }
.status--recommended { background:var(--bg-panel); color:var(--success-ink); }
.status--archived { background:var(--bg-panel-2); color:var(--text-muted); }
.post-card { display:flex; flex-direction:column; align-items:flex-start; padding:28px; border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); }
.post-card h3 { margin-top:20px; line-height:1.45; }
.post-card h3 a { color:var(--text); text-decoration:none; }
.post-card h3 a:hover { color:var(--accent-dark); }
.post-card p { color:var(--text-muted); }
.post-card__meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--text-muted); }
.post-card__more { margin-top:auto; font-weight:700; }
.callout { margin:24px 0; padding:24px 28px; border:0; border-inline-start:4px solid var(--accent); border-radius:var(--r-md); background:var(--accent-soft); color:var(--text); }
.callout p:last-child { margin-bottom:0; }
.callout--warn { border-inline-start-color:var(--warn); background:var(--bg-panel); color:var(--text); }
.table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid var(--border); border-radius:var(--r-md); -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; background:var(--bg); color:var(--text); text-align:left; }
.data-table :is(th,td),.prose table :is(th,td),.article-body table :is(th,td) { min-width:7em; padding:16px 20px; border-bottom:1px solid var(--border); overflow-wrap:normal; word-break:normal; vertical-align:top; }
.data-table th,.prose table th,.article-body table th { background:var(--bg-panel); color:var(--text); font-size:14px; font-weight:700; }
.prose table,.article-body table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; width:100%; border-collapse:collapse; }
.data-table td code,.prose table code,.article-body table code { overflow-wrap:anywhere; white-space:normal; }
.trust-band { padding-top:96px; padding-bottom:96px; background:var(--band); color:var(--text); }
.trust-band .card { border-radius:var(--r-xl); padding:40px; }
.article-download { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:48px; padding:32px; border-radius:var(--r-xl); background:var(--bg-panel); color:var(--text); }
.article-download h2 { font-size:24px; margin-bottom:10px; }
.article-download p { margin:0; color:var(--text-muted); }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:30; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 20px 12px 16px; border-radius:var(--r-pill); background:var(--accent); color:var(--white); font-size:15px; font-weight:700; text-decoration:none; box-shadow:var(--shadow-1),0 14px 30px color-mix(in srgb,var(--accent) 32%,var(--clear)); transition:background-color var(--fast),transform var(--fast); }
.dl-fab svg { width:18px; height:18px; }
.dl-fab:hover { background:var(--accent-dark); color:var(--white); transform:translateY(-1px); }
.palette-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin-top:32px; }
.swatch { border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--bg); color:var(--text); }
.swatch__paint { display:block; height:76px; background:var(--swatch); color:var(--text); }
.swatch code { display:block; padding:12px; font-size:12px; }
.swatch--bg { --swatch:var(--bg); }
.swatch--panel { --swatch:var(--bg-panel); }
.swatch--panel2 { --swatch:var(--bg-panel-2); }
.swatch--border { --swatch:var(--border); }
.swatch--accent { --swatch:var(--accent); }
.swatch--dark { --swatch:var(--accent-dark); }
.swatch--soft { --swatch:var(--accent-soft); }
.swatch--text { --swatch:var(--text); }
.swatch--muted { --swatch:var(--text-muted); }
.swatch--success { --swatch:var(--success); }
.swatch--success-ink { --swatch:var(--success-ink); }
.swatch--warn { --swatch:var(--warn); }
.swatch--warn-ink { --swatch:var(--warn-ink); }
.swatch--error { --swatch:var(--error); }
.swatch--halo1 { --swatch:var(--halo-1); }
.swatch--halo1b { --swatch:var(--halo-1b); }
.swatch--halo2 { --swatch:var(--halo-2); }
.swatch--halo3 { --swatch:var(--halo-3); }
.swatch--halo4 { --swatch:var(--halo-4); }
.swatch--halo4b { --swatch:var(--halo-4b); }
.swatch--band { --swatch:var(--band); }
.swatch--white { --swatch:var(--white); }
.swatch--clear { --swatch:var(--clear); }
.swatch--edge { --swatch:var(--glass-edge); }
.swatch--hi { --swatch:var(--glass-hi); }
.swatch--sheen { --swatch:var(--glass-sheen); }
.swatch--frost { --swatch:var(--frost); }
.swatch--frost-edge { --swatch:var(--frost-edge); }
.swatch--shadow1 { --swatch:var(--ink-shadow-1); }
.swatch--shadow2 { --swatch:var(--ink-shadow-2); }
.swatch--veil { --swatch:var(--veil); }
.preview-type h4 { font-size:16px; }
.preview-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
@media (max-width:1200px) and (min-width:961px) {
  .hero__inner { grid-template-columns:minmax(0,500px) minmax(0,1fr); gap:32px; }
  .stage { transform:scale(.84); transform-origin:left center; }
}
@media (max-width:960px) {
  .hero { padding-top:40px; padding-bottom:48px; }
  .hero__inner { grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
  .appicon { margin:26px auto 20px; width:80px; height:80px; border-radius:var(--r-lg); }
  .wordmark__main { font-size:30px; }
  .wordmark__hl { border-radius:var(--r-sm); }
  .wordmark__sub { font-size:18px; margin-top:14px; }
  .lead { font-size:15px; margin-inline:auto; }
  .actions,.chips,.plats,.plats__list { justify-content:center; }
  .stage { position:absolute; inset:0; height:auto; margin:0; z-index:0; opacity:.2; pointer-events:none; }
  .isle--switch,.isle--panes { display:none; }
  .isle--tray { --s:220px; left:-70px; top:10px; }
  .isle--rules { --s:220px; right:-70px; left:auto; bottom:30px; }
  .isle__body { border-radius:var(--r-xl); }
  .frag { transform:scale(.68); }
  .dl-zone__panel { padding:40px 24px 48px; }
  .dl-zone__title { font-size:24px; }
  .dl-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-tabs { grid-template-columns:minmax(0,1fr); gap:24px; }
  .feature-tabs .tab-list { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; }
  .feature-tabs .tab-list [role="tab"] { flex:none; white-space:nowrap; }
  .palette-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .feature-stage { padding:24px; }
  .client-card { padding:24px; }
  .trust-band .card { padding:28px; }
  .dl-fab { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); min-height:44px; font-size:14px; }
  .palette-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .isle { transform:none; }
  .article-download { padding:24px; }
  .toc { border-radius:var(--r-md); }
}