/* 首屏电影画幅 */
.hero{padding-inline:var(--gutter)}
.reel{position:relative;height:clamp(460px,72vh,820px);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--scene-top),var(--scene-mid) 46%,var(--scene-floor));color:var(--on-dark);box-shadow:inset 0 1px 0 var(--on-dark-hairline)}
.reel-visual,.reel-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.reel-scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(110% 85% at 0% 100%,var(--scrim-mid),var(--scrim-clear) 55%),linear-gradient(0deg,var(--scrim),var(--scrim-mid) 27%,var(--scrim-clear) 56%);color:var(--on-dark)}
.reel-copy{position:absolute;left:56px;bottom:52px;max-width:600px;z-index:2}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;min-height:26px;max-width:100%;padding:2px 10px;border:1px solid var(--on-dark-line);border-radius:var(--radius-pill);background:var(--on-dark-chip);color:var(--on-dark-muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.01em;overflow-wrap:anywhere}
.hero-title{margin:0 0 26px;font-size:clamp(34px,3.3vw,48px);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--on-dark)}
.hero-title .soft{color:var(--on-dark-faint)}
.reel .btn-primary{background:var(--on-dark);color:var(--text)}
.reel .btn-primary:hover{background:var(--bg-panel);color:var(--text)}
.btn-ghost{border-color:var(--on-dark-line);background:var(--on-dark-chip);color:var(--on-dark)}
.btn-ghost:hover{background:var(--on-dark-chip-hover);color:var(--on-dark)}
.hero-desc{margin:0;max-width:560px;font-size:15.5px;line-height:1.7;color:var(--on-dark-muted)}
.hero-desc strong{color:var(--on-dark);font-weight:500}
.st-ice{stop-color:var(--scene-ice)}
.st-glow{stop-color:var(--scene-glow)}
.st-mask{stop-color:var(--on-dark)}
.st-seabed-far{stop-color:var(--seabed-far)}
.st-floor{stop-color:var(--scene-floor)}
.ridge-near{fill:var(--seabed-near)}
.snow{fill:var(--scene-ice)}
.c-glow{fill:none;stroke:var(--scene-glow);stroke-width:58;stroke-linecap:round;opacity:.07}
.c-edge{fill:none;stroke:var(--cable-edge);stroke-width:24}
.c-body{fill:none;stroke:var(--cable-body-solid);stroke-width:22}
.c-ring{fill:none;stroke:var(--cable-ring);stroke-width:22;stroke-dasharray:3 13}
.c-clamp{fill:none;stroke:var(--cable-clamp);stroke-width:32;stroke-dasharray:8 152;stroke-dashoffset:-60}
.c-hi{fill:none;stroke:var(--scene-ice);stroke-width:1.4;opacity:.32}
.b-edge{fill:none;stroke:var(--cable-edge);stroke-width:8;stroke-linecap:round}
.b-body{fill:none;stroke:var(--cable-body-solid);stroke-width:6;stroke-linecap:round}
.b-ring{fill:none;stroke:var(--cable-ring);stroke-width:6;stroke-dasharray:2 9}
.b-hi{fill:none;stroke:var(--scene-ice);stroke-width:1;opacity:.28}
.jbox-body{fill:var(--box-body);stroke:var(--box-edge);stroke-width:1.2}
.jbox-inner{fill:none;stroke:var(--box-edge);stroke-width:1;opacity:.55}
.jbox-bolt{fill:var(--box-edge)}
.jbox-slit{fill:var(--scene-glow);opacity:.9}
.tag-lead{stroke:var(--on-dark-line);stroke-width:1}
.tag-dot{fill:var(--scene-ice);opacity:.7}
.tag-box{fill:var(--tag-bg);stroke:var(--on-dark-line);stroke-width:1}
.tag-text{fill:var(--on-dark-muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em}
.pulse{transform-box:view-box;transform-origin:0 0;opacity:.9;will-change:transform,opacity}
.pulse-core{fill:var(--scene-ice)}
.pulse-l{transform:translate(809px,368px);animation:flow-l 5.6s linear infinite}
.pulse-c{transform:translate(934px,444px);animation:flow-c 6.4s linear infinite;animation-delay:-2.2s}
.pulse-r{transform:translate(1086px,383px);animation:flow-r 6s linear infinite;animation-delay:-4s}
@keyframes flow-l{
  0%{transform:translate(914px,314px);opacity:0}
  12%{opacity:1}
  25%{transform:translate(863px,340px)}
  50%{transform:translate(809px,368px)}
  75%{transform:translate(754px,400px)}
  86%{opacity:.75}
  100%{transform:translate(700px,440px);opacity:0}
}
@keyframes flow-c{
  0%{transform:translate(940px,320px);opacity:0}
  12%{opacity:1}
  25%{transform:translate(940px,380px)}
  50%{transform:translate(934px,444px)}
  75%{transform:translate(922px,513px)}
  86%{opacity:.75}
  100%{transform:translate(905px,590px);opacity:0}
}
@keyframes flow-r{
  0%{transform:translate(966px,312px);opacity:0}
  12%{opacity:1}
  25%{transform:translate(1024px,343px)}
  50%{transform:translate(1086px,383px)}
  75%{transform:translate(1148px,434px)}
  86%{opacity:.75}
  100%{transform:translate(1210px,500px);opacity:0}
}
.snow-drift{animation:snow-drift 28s linear infinite}
@keyframes snow-drift{from{transform:translateY(-8px);opacity:.3}to{transform:translateY(20px);opacity:.2}}
/* 不带脚本的设计预览保留分镜定格 */
.preview-page .pulse,.preview-page .snow-drift{animation:none}
.platforms{display:flex;align-items:center;justify-content:center;padding:24px var(--gutter) 20px}
.platforms-caption{font-size:13px;color:var(--text-muted);padding-right:28px;margin-right:28px;border-right:1px solid var(--border);line-height:22px}
.platforms ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 44px;list-style:none;margin:0;padding:0}
.platforms a{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;line-height:22px;color:var(--text)}
.platforms a:hover{text-decoration:underline;text-underline-offset:5px}
.platforms svg{width:17px;height:17px;display:block}
.platforms .ico-tux{width:15px}
.statusline{min-height:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:6px 48px;border-block:1px solid var(--border);background:var(--bg-panel);color:var(--text-muted);font-family:var(--font-mono);font-size:12px}
.st-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0}
.st-item{display:inline-flex;align-items:center;gap:8px;padding-inline:20px;border-left:1px solid var(--border)}
.st-item:first-child{padding-left:0;border-left:0}
.st-item .v{color:var(--text)}
.st-dot{width:6px;height:6px;border-radius:var(--radius-dot);background:var(--success);color:var(--on-dark)}

/* 横向放映轨道；同一结构也用于平台标签 */
.features{padding-top:28px;padding-bottom:120px;padding-inline:var(--gutter)}
.tabs{min-width:0}
.tabrail{display:flex;align-items:center;gap:28px;min-width:0;overflow-x:auto;padding-block:6px}
.tab{position:relative;flex:none;padding:0;border:0;background:var(--clear);color:var(--text-muted);font-family:var(--font-display);font-size:26px;font-weight:400;letter-spacing:-.02em;line-height:1.3;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text)}
.rail{flex:1;min-width:24px;height:1px;background:var(--border);color:var(--text);position:relative}
.rail-progress{position:absolute;left:0;top:-.5px;height:2px;width:38%;background:var(--accent);color:var(--on-dark);transform-origin:left}
.tab[aria-selected="false"]+.rail .rail-progress{display:none}
.tabs.is-playing .tab[aria-selected="true"]+.rail .rail-progress{width:100%;animation:rail-fill var(--rail-duration) linear forwards}
@keyframes rail-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[role="tabpanel"]:not([hidden]){animation:panel-in var(--motion-panel) ease}
@keyframes panel-in{from{opacity:0}to{opacity:1}}
.platform-tabs{display:flex;flex-wrap:wrap;gap:8px}
.platform-tabs .tab{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-panel);color:var(--text-muted);font-size:15px}
.platform-tabs .tab[aria-selected="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.media{min-height:360px;border-radius:var(--radius);overflow:hidden;background:linear-gradient(180deg,var(--scene-top),var(--scene-mid) 55%,var(--scene-floor));color:var(--on-dark)}
.media svg{width:100%;height:100%;min-height:360px;display:block}
.toc{display:flex;flex-wrap:wrap;gap:8px;min-width:0;padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);margin-bottom:40px}
.toc a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border-radius:var(--radius-sm);font-size:14px}
.toc a:hover,.toc a[aria-current]{background:var(--bg-panel);color:var(--text)}
.toc-sticky{position:sticky;top:16px;z-index:10}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{position:relative;cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:17px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:8px;top:20px;font-size:22px;color:var(--text-muted)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding-bottom:24px;color:var(--text-muted)}
.faq-answer p:last-child{margin:0}
.term-card{border-top:1px solid var(--border);padding-top:24px}
.term-card h3{margin-bottom:8px}
.term-en{display:block;margin-bottom:16px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.term-card p{color:var(--text-muted)}
.badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.badge,.tag{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 9px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-panel);color:var(--text);font-size:12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.badge-first{background:var(--text);color:var(--bg);border-color:var(--text)}
.badge-recommended::before{content:"";width:5px;height:5px;flex-shrink:0;border-radius:var(--radius-dot);background:var(--success);color:var(--on-dark)}
.badge-archived{background:var(--bg-panel);color:var(--text-muted)}
.client-card{display:flex;flex-direction:column;gap:20px}
.client-head{display:flex;align-items:center;gap:16px;min-width:0}
.client-head>div{min-width:0}
.client-head h3{margin-bottom:8px}
.app-icon{width:56px;height:56px}
.client-card .actions{margin-top:auto;margin-bottom:0}
.client-card [data-version]:empty{display:none}
.client-meta{display:flex;flex-wrap:wrap;gap:12px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.post-card{display:flex;flex-direction:column;gap:16px}
.post-card h3{font-size:23px;margin-bottom:0}
.post-card p{color:var(--text-muted);margin-bottom:0}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--text-muted);font-size:12px}
.post-card .text-link{margin-top:auto;align-self:flex-start}
.callout{margin:24px 0;padding:20px 24px;border:1px solid var(--border);border-left:3px solid var(--text-muted);border-radius:var(--radius);background:var(--bg-panel);color:var(--text)}
.callout p:last-child{margin:0}
.callout-title{display:block;margin-bottom:8px;font-weight:500}
.callout-warning{border-left-color:var(--warn)}
.callout-error{border-left-color:var(--error)}
.callout-success{border-left-color:var(--success)}
.table-scroll{overflow-x:auto;max-width:100%;min-width:0;border:1px solid var(--border);border-radius:var(--radius);overscroll-behavior-inline:contain}
.data-table{width:100%;border-collapse:collapse;text-align:left;background:var(--bg);color:var(--text);font-size:14px}
.data-table th,.data-table td,.prose table th,.prose table 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{background:var(--bg-panel);color:var(--text);font-weight:500}
.data-table tr:last-child td{border-bottom:0}
.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;width:100%;border-collapse:collapse;overscroll-behavior-inline:contain}
.prose table code,.data-table code{overflow-wrap:anywhere;white-space:normal}
.article-download{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-top:48px;padding:28px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-panel);color:var(--text)}
.article-download h2{font-size:24px;margin:0 0 8px}
.article-download p{margin:0;color:var(--text-muted)}
.dl-fab{position:fixed;right:var(--gutter);bottom:max(20px,env(safe-area-inset-bottom));z-index:var(--z-fab);display:inline-flex;align-items:center;justify-content:center;gap:12px;max-width:calc(100% - var(--gutter)*2);min-height:52px;padding:12px 20px;border:1px solid var(--text);border-radius:var(--radius);background:var(--text);color:var(--bg);font-size:14px}
.dl-fab svg{width:20px;height:20px}
.dl-fab:hover{background:var(--text-muted);color:var(--bg);border-color:var(--text-muted)}
.has-dl-fab{padding-bottom:88px}
.preview-swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.swatch{min-width:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg);color:var(--text)}
.swatch i{display:block;height:64px;background:var(--swatch,var(--bg));color:var(--text)}
.swatch code{display:block;padding:10px;font-size:11px}
.sw-bg{--swatch:var(--bg)}
.sw-bg-panel{--swatch:var(--bg-panel)}
.sw-bg-panel2{--swatch:var(--bg-panel2)}
.sw-border{--swatch:var(--border)}
.sw-accent{--swatch:var(--accent)}
.sw-accent-dark{--swatch:var(--accent-dark)}
.sw-text{--swatch:var(--text)}
.sw-muted{--swatch:var(--text-muted)}
.sw-faint{--swatch:var(--text-faint)}
.sw-success{--swatch:var(--success)}
.sw-warn{--swatch:var(--warn)}
.sw-error{--swatch:var(--error)}
.sw-on-dark{--swatch:var(--on-dark)}
.sw-on-muted{--swatch:var(--on-dark-muted)}
.sw-on-faint{--swatch:var(--on-dark-faint)}
.sw-on-line{--swatch:var(--on-dark-line)}
.sw-on-hairline{--swatch:var(--on-dark-hairline)}
.sw-on-chip{--swatch:var(--on-dark-chip)}
.sw-on-hover{--swatch:var(--on-dark-chip-hover)}
.sw-scene-top{--swatch:var(--scene-top)}
.sw-scene-mid{--swatch:var(--scene-mid)}
.sw-scene-floor{--swatch:var(--scene-floor)}
.sw-scene-ice{--swatch:var(--scene-ice)}
.sw-scene-glow{--swatch:var(--scene-glow)}
.sw-far{--swatch:var(--seabed-far)}
.sw-near{--swatch:var(--seabed-near)}
.sw-edge{--swatch:var(--cable-edge)}
.sw-body{--swatch:var(--cable-body)}
.sw-solid{--swatch:var(--cable-body-solid)}
.sw-ring{--swatch:var(--cable-ring)}
.sw-clamp{--swatch:var(--cable-clamp)}
.sw-box{--swatch:var(--box-body)}
.sw-box-edge{--swatch:var(--box-edge)}
.sw-tag{--swatch:var(--tag-bg)}
.sw-scrim{--swatch:var(--scrim)}
.sw-scrim-mid{--swatch:var(--scrim-mid)}
.sw-scrim-clear{--swatch:var(--scrim-clear)}
.sw-clear{--swatch:var(--clear)}
.swatch-dark i{background:linear-gradient(var(--swatch),var(--swatch)),var(--bg-panel2);color:var(--on-dark)}
.preview-states{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.preview-note{font-size:13px;color:var(--text-muted)}
@media(max-width:960px){
  .platforms{flex-direction:column;gap:14px}
  .platforms-caption{border:0;margin:0;padding:0}
  .platforms ul{gap:18px 28px}
  .statusline{padding-inline:var(--gutter)}
}
@media(max-width:768px){.hero-title{font-size:28px}}
@media(max-width:640px){
  .reel{height:clamp(520px,78vh,700px)}
  .reel-copy{left:22px;right:22px;bottom:26px;max-width:none}
  .hero-title{font-size:28px;margin-bottom:20px}
  .hero-desc{font-size:14.5px}
  .chips li:nth-child(n+3){display:none}
  .tab{font-size:18px}
  .tabrail{gap:14px}
  .media,.media svg{min-height:260px}
  .st-item{padding-inline:12px}
  .toc{padding:8px;gap:4px}
  .toc-sticky{position:static}
  .article-download{padding:22px}
  .dl-fab{min-height:48px;padding:10px 16px}
}
@media(prefers-reduced-motion:reduce){
  .pulse,.snow-drift,.tabs.is-playing .rail-progress,[role="tabpanel"]:not([hidden]){animation:none}
}