/* ==========================================================================
   EASONTEC — site stylesheet
   Style: "precision instrument". The calm base of blog.x.com (fixed left index, white space, 32/48px headlines at
   weight 500) dressed as the face of a measuring instrument:
   · palette — graphite (the logo's dark), light grey product fields, green only as a signal (LEDs, the core of
     the end-face drawing, active states); photos keep their own colour
   · type — Geist for reading, Archivo expanded caps for engraved legends (meta lines, section plates, panel
     labels), Geist Mono for numbers and specs
   · furniture — numbered section plates [01], registration marks on key panels, hairlines, an 01 / 03 counter
   · hardware — keys with a status LED and a 1px press; a graphite panel with LED dot-matrix readouts
   · minimal as precision: every element carries information; nothing is there to fill space
   Motion (site.js) — explicit timings: word rise 0.9s cubic-bezier(.22,1,.36,1), 60ms stagger; images fade in 0.5s
   over an engineering-drawing skeleton; cards lift a detection frame on hover; the logo folds EASON -> E in about .5s once
   the page scrolls; LED readouts power on column by column; the solid wordmark fades in over 4.8s.
   ========================================================================== */
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  /* instrument palette: graphite (the logo's dark) for text and the panel, green only as a signal */
  --fg: #16191d; --fg-2: rgba(22,25,29,.62); --fg-3: rgba(22,25,29,.44);
  --bg: #fff; --bg-2: #f6f6f6; --bg-3: #ededed;
  --product-bg: #f6f6f6;
  --line: rgba(22,25,29,.1); --line-2: rgba(22,25,29,.2);
  /* 品牌绿取自原生 Logo；深色用于小字，浅色仅用于同色系光效。 */
  --brand: #009944; --brand-rgb: 0,153,68;
  --brand-ink: #007a36; --brand-hover: #00a84b; --brand-highlight: #4db87c;
  --brand-surface: rgba(var(--brand-rgb),.045); --brand-edge: rgba(var(--brand-rgb),.28);
  --signal: var(--brand);
  --graphite: #16191d;
  --wide: "Archivo", "Geist", ui-sans-serif, system-ui, sans-serif;   /* engraved panel legends: expanded caps */
  --side: 224px; --gut: clamp(16px, 3.2vw, 40px); --max: 1120px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --out: cubic-bezier(.22, 1, .36, 1);
  /* frosted glass: only where something moves or sits behind it (photos, scrolling content, drifting art) */
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .74);
  --glass-dark: rgba(22, 25, 29, .62);
  --glass-blur: blur(18px) saturate(180%);
  --glass-edge: 1px solid rgba(255, 255, 255, .6);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 30px rgba(0, 0, 0, .08);
  /* light grain for dark surfaces (the footer scene) */
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  /* frosted grain: real frosted glass is never perfectly smooth */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  /* specular rim: light from the top left, a fainter return at the bottom right */
  --rim: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .4));
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* 中文法定公司名作为整体换行，避免在“有限公司”等词中间拆开。 */
.company-name-local { display: inline-block; white-space: nowrap; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
b, strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 2px; }
::selection { background: rgba(0,0,0,.12); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i--s { width: 16px; height: 16px; }
.i--xs { width: 14px; height: 14px; }
.muted { color: var(--fg-2); font-size: 14px; }
[hidden] { display: none !important; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; padding: 8px 14px; border-radius: 999px; background: var(--fg); color: #fff; font-size: 13px; }
.skip:focus { top: 12px; }
kbd { font-family: var(--font); font-size: 11px; color: var(--fg-3); }

/* ---------- pills (actions) ---------- */
/* buttons as hardware keys: a moulded top edge, a status LED that lights on hover, a short 1px press with an inset shadow */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; transition: background-color .2s, color .2s, transform .12s, box-shadow .12s; }
.pill--dark { background: var(--fg); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.22); }
.pill--dark::before { content: ""; flex: none; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: rgba(255,255,255,.26); transition: background-color .25s, box-shadow .25s; }
.pill--dark:hover { background: #23272c; }
.pill--dark:hover::before { background: var(--signal); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12), 0 0 8px rgba(var(--brand-rgb),.5); }
.pill--light { background: rgba(22,25,29,.05); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(22,25,29,.06), inset 0 1px 0 rgba(255,255,255,.7); }
.pill--light:hover { background: rgba(22,25,29,.09); }
.pill--sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.pill:active { transform: translateY(1px) scale(.985); }
.pill--dark:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
.pill--light:active { box-shadow: inset 0 1px 3px rgba(22,25,29,.2); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; }
.acts--left { margin-top: 20px; }
.link { padding: 0; border: 0; background: none; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.ibtn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; color: var(--fg); }
.ibtn:hover { background: rgba(0,0,0,.05); }
.qcount { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--fg); color: #fff; font-size: 10px; font-weight: 500; line-height: 16px; text-align: center; }
.side__q .qcount { position: static; margin-left: auto; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(0,0,0,.05); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: var(--fg); vertical-align: middle; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.card__h .tag { margin-left: 8px; }

/* ---------- index (left sidebar) ---------- */
.side { position: fixed; inset: 0 auto 0 0; z-index: 70; display: flex; flex-direction: column; width: var(--side); padding: 22px 20px 20px; background: var(--bg); }
.side__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.side__logo, .mbar__logo { display: block; }

/* ---------- logo: at the top the full EASON wordmark; once the page scrolls, N O S Λ fold into the E from right
   to left and only the E stays — the same mark as the favicon. After anthropic.com's header. ---------- */
/* Timings follow the Unless lockup spec (direction-aware stagger, letters ~60-80ms apart) and Emil Kowalski's rules
   (ease-in for things leaving, ease-out for things arriving). Each state carries its own delays, so the order
   reverses by itself. */
.logo { display: block; height: auto; overflow: visible; }
.logo .lg-m { transform-box: fill-box; transform-origin: 0 50%; transition: opacity .28s ease-out, transform .42s cubic-bezier(.23, 1, .32, 1), filter .28s ease-out;
  transition-delay: calc(.04s + var(--k) * .08s); }   /* opening, left to right: Λ S O N unfold out of the E */
.is-scrolled .logo .lg-m { opacity: 0; transform: translateX(var(--dx)) scaleX(.55); filter: blur(40px); transition-duration: .22s, .34s, .22s;
  transition-timing-function: ease-in, cubic-bezier(.4, 0, .2, 1), ease-in; transition-delay: calc((3 - var(--k)) * .06s); }   /* closing, right to left: N, O, S, Λ fold into the E */
.logo .lg-g { animation: lg-blink .5s .78s both; }                 /* the green parts blink once when the wordmark settles (also on load) */
.is-scrolled .logo .lg-g { animation: lg-blink2 .5s .5s both; }   /* ...and the E's bar once when it is left alone */
@keyframes lg-blink { 30% { fill: var(--signal); } }
@keyframes lg-blink2 { 30% { fill: var(--signal); } }
/* desktop: pointing at the folded E opens the full wordmark again */
@media (hover: hover) {
  .is-scrolled .side__logo:hover .logo .lg-m { opacity: 1; transform: none; filter: none; transition: opacity .24s ease-out, transform .36s cubic-bezier(.23, 1, .32, 1), filter .24s ease-out;
    transition-delay: calc(.04s + var(--k) * .07s); }
}
.side__x { display: none; }
.nav ul { display: grid; gap: 2px; }
.nav li { animation: nav-in .5s var(--out) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes nav-in { from { opacity: 0; transform: translateY(4px); } }
.nav__a { display: block; padding: 5px 0; font-size: 13.5px; font-weight: 500; color: var(--fg-2); transition: color .2s; }
.nav__a:hover, .nav__a[aria-current="page"] { color: var(--fg); }
.nav__sub { margin: 4px 0 8px 1px; padding-left: 12px; border-left: 1px solid var(--line); }
.nav__s { display: block; padding: 3px 0; font-size: 12.5px; color: var(--fg-3); transition: color .2s; }
.nav__s:hover, .nav__s[aria-current="page"] { color: var(--fg); }
.side__foot { display: grid; gap: 10px; margin-top: auto; }
.side__q { display: flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; font-size: 13px; font-weight: 500; color: var(--fg-2); text-align: left; }
.side__q:hover { color: var(--fg); }
.side__foot .pill { justify-self: start; }
.mbar { display: none; }
.side-scrim { display: none; }

/* ---------- page frame ---------- */
.shell { margin-left: var(--side); min-height: 100vh; }
/* 主容器填满侧栏之外的宽度；正文段落仍保留各自的阅读行宽。 */
.page { width: 100%; padding: 0 var(--gut); }
.top { padding: 28px 0 24px; }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.top__h { font-size: 32px; line-height: 36px; font-weight: 500; }
.search { display: inline-flex; align-items: center; gap: 8px; width: min(320px, 40%); height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg-3); font-size: 13px; text-align: left; transition: border-color .2s; }
.search:hover { border-color: var(--line-2); }
.search kbd { margin-left: auto; }
.crumbs { margin-bottom: 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--fg-3); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; }
.crumbs a:hover { color: var(--fg); }
.lede { max-width: 700px; margin: -4px 0 8px; font-size: 18px; line-height: 28px; color: var(--fg-2); }
.sec { margin-top: 80px; }
.sec--tight { margin-top: 28px; }
/* section plate: [01] LEGEND ——————  numbered per page, like the legends on an instrument face */
.page { counter-reset: plate; }
.plate { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--wide); font-stretch: 125%; font-size: 10.5px; line-height: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.plate::before { counter-increment: plate; content: "[" counter(plate, decimal-leading-zero) "]"; font-family: var(--mono); font-stretch: 100%; font-weight: 500; letter-spacing: 0; color: var(--fg); }
.plate::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.plate span:empty { display: none; }
/* registration marks in the four corners of a key panel */
.reg { position: absolute; inset: 10px; z-index: 3; pointer-events: none; color: rgba(22,25,29,.32); --l: linear-gradient(currentColor, currentColor);
  background: var(--l) 0 4px / 9px 1px no-repeat, var(--l) 4px 0 / 1px 9px no-repeat, var(--l) 100% 4px / 9px 1px no-repeat, var(--l) calc(100% - 4px) 0 / 1px 9px no-repeat,
    var(--l) 0 calc(100% - 4px) / 9px 1px no-repeat, var(--l) 4px 100% / 1px 9px no-repeat, var(--l) 100% calc(100% - 4px) / 9px 1px no-repeat, var(--l) calc(100% - 4px) 100% / 1px 9px no-repeat; }
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.sh__h { font-size: 24px; line-height: 30px; }
.sh__sub { color: var(--fg-3); }
.meta { display: flex; align-items: center; gap: 7px; min-height: 20px; font-family: var(--wide); font-stretch: 112%; font-size: 10.5px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.meta__r { margin-left: auto; font-family: var(--mono); font-stretch: 100%; font-size: 11px; font-weight: 400; letter-spacing: .02em; color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* ---------- media, skeleton, photos in their own colour ---------- */
.media { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; background: var(--bg-2); }
.media > img { position: relative; z-index: 1; width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .5s ease-out, transform .9s var(--out); }
/* 带较多留白的指定产品图单独放大；contain 保持真实比例和完整机身。 */
.media[data-w].media--large > img { width: 124%; height: 124%; max-width: none; }
.media:not([data-w]) > img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.media[data-fit] > img { object-fit: contain; }   /* tall shots are shown whole, never cropped */
.media--photo > img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
/* 精修图已含统一留白，避免页面再次缩小；设备配图始终完整显示。 */
.media.media--refined > img, .media.media--editorial-product > img { width: 100%; height: 100%; object-fit: contain; }
.media.media--refined > img { mix-blend-mode: normal; }
.media--refined, .media--editorial-product, .hero-img--product { background: var(--product-bg); }
.media.media--editorial-product > img { mix-blend-mode: multiply; }
.media.media--editorial-large > img { width: 124%; height: 124%; max-width: none; }
.media--photo > img { object-position: var(--image-position, 50% 50%); }
.js .media > img, .js .hero-img img, .js .gal__slide img, .js .det img { opacity: 0; }
.js .media.is-loaded > img, .js .hero-img.is-loaded img, .js .gal__slide.is-loaded img, .js .det.is-loaded img { opacity: 1; }
.skel { position: absolute; inset: 0; background-image: radial-gradient(rgba(0,0,0,.16) .7px, transparent .8px); background-size: 10px 10px; transition: opacity .6s ease-out; }
.skel::before, .skel::after { content: ""; position: absolute; border: 0 dashed rgba(0,0,0,.28); }
.skel::before { left: 12%; right: 12%; top: 50%; border-top-width: 1px; }
.skel::after { top: 16%; bottom: 16%; left: 50%; border-left-width: 1px; }
.is-loaded > .skel { opacity: 0; }
.hero-img { position: relative; aspect-ratio: 21 / 9; margin-top: 8px; overflow: hidden; background: var(--bg-2); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease-out; }
.hero-img.is-loaded img { opacity: 1; }
.hero-img img { object-position: var(--image-position, 50% 50%); }
.hero-img--product { aspect-ratio: 16 / 9; }
.hero-img--product img { object-fit: contain; mix-blend-mode: multiply; }
.hero-img--product-large img { position: absolute; width: 124%; height: 124%; max-width: none; left: -12%; top: -12%; }
.image-credit { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--fg-2); }
.image-credit a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- lead card ---------- */
.feat { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: 1fr auto; min-height: 440px; padding: 24px 28px 28px; overflow: hidden; background: var(--bg-2); }
.feat__copy { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; position: relative; z-index: 2; }
.feat__h { font-size: 48px; line-height: 52px; letter-spacing: -.02em; }
.feat__p { max-width: 420px; margin-top: 14px; font-size: 15px; line-height: 23px; color: var(--fg-2); }
.feat__txt { margin-top: auto; }
.feat__art { grid-column: 2; grid-row: 1; position: relative; min-height: 300px; }
.feat__art .media { position: absolute; inset: 0; width: 100%; height: 100%; }
/* flagships cross-fade: the next drifts in from the right, the last drifts out to the left (site.js) */
.feat__slide { position: absolute; inset: 4% 2% 2%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateX(28px) scale(.975); pointer-events: none;
  transition: opacity .8s cubic-bezier(.23, 1, .32, 1), transform 1.1s cubic-bezier(.23, 1, .32, 1); }
.feat__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .6s cubic-bezier(.23, 1, .32, 1); }
.feat__slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
.feat__slide.is-out { transform: translateX(-28px) scale(.975); }
.feat__slide.is-on:hover img { transform: scale(1.015); }
.feat.is-held .feat__bar b { animation-play-state: paused; }
.feat__act { grid-column: 2; grid-row: 2; display: flex; justify-content: flex-end; gap: 8px; position: relative; z-index: 2; }
.feat__count { position: absolute; top: 0; right: 0; z-index: 2; display: grid; justify-items: end; gap: 6px; margin: 0; font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--fg-3); }
.feat__count span b { font-weight: 500; color: var(--fg); }
.feat__bar { display: block; width: 72px; height: 1px; background: var(--line-2); }
.feat__bar b { display: block; height: 100%; background: var(--fg); transform-origin: 0 50%; animation: feat-bar 6s linear both; }   /* 6s = the rotation interval in site.js */
@keyframes feat-bar { from { transform: scaleX(0); } }
.feat--line .media { background: transparent; }

/* ---------- cards ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
.card { position: relative; display: flex; flex-direction: column; }
.card__media { position: relative; display: block; aspect-ratio: 4 / 3; margin: 8px 0 12px; overflow: hidden; }
.card:hover .media > img { transform: scale(1.02); }
.card__h { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .01em; }
.card__h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card__p { margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.decrypt { font-family: var(--mono); font-size: 12px; }
/* detection frame (Ian's hover cards with coordinate boxes) */
.box { position: absolute; inset: 8%; z-index: 2; pointer-events: none; opacity: 0; transform: scale(.84); transition: transform .5s var(--out), opacity .3s ease-out; }   /* transform, not inset: no layout per frame */
.box i { position: absolute; width: 12px; height: 12px; border: 0 solid var(--fg); }
.box i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.box i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.box i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.box i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.card:hover .box { transform: none; opacity: 1; }
/* spotlight (Aceternity) */
.spot { --mx: 50%; --my: 50%; }
.spot .card__media::after, .feat.spot::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(0,0,0,.05), transparent 65%); opacity: 0; transition: opacity .3s; }
.spot:hover .card__media::after, .feat.spot:hover::after { opacity: 1; }
.qadd { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 500; color: var(--fg-3); transition: color .2s; }
.qadd::before { content: "+"; font-size: 14px; line-height: 1; }
.qadd:hover { color: var(--fg); }
.qadd .t-in { display: none; }
.qadd[aria-pressed="true"] { color: var(--fg); }
.qadd[aria-pressed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.qadd[aria-pressed="true"] .t-add { display: none; }
.qadd[aria-pressed="true"] .t-in { display: inline; }

/* ---------- product-line tabs (FS.com's category row) ---------- */
.lx { margin-top: 28px; }
.lx__tabs { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
/* with JS one indicator slides between tabs (set by site.js through --x / --w) instead of each tab drawing its own */
.js .lx__tab::after { display: none; }
.js .lx__tabs::after { content: ""; position: absolute; left: 0; bottom: -1px; width: var(--w, 0); height: 2px; background: var(--fg); transform: translateX(var(--x, 0)); transition: transform .45s cubic-bezier(.23, 1, .32, 1), width .45s cubic-bezier(.23, 1, .32, 1); }
.lx__panel:not([hidden]) .lx__card { animation: card-in .5s cubic-bezier(.23, 1, .32, 1) both; animation-delay: calc(var(--c, 0) * 50ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.lx__tab { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 14px 4px; text-align: center; color: var(--fg-2); transition: color .2s; }
.lx__n { font-size: 12.5px; line-height: 16px; font-weight: 500; }
.lx__tab::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: -1px; height: 2px; background: var(--fg); transform: scaleX(0); transition: transform .35s var(--out); }
.lx__tab:hover, .lx__tab[aria-selected="true"] { color: var(--fg); }
.lx__tab[aria-selected="true"]::after { transform: none; }
.lx__panel { padding-top: 22px; animation: fade .35s ease-out; }
.lx__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lx__card { display: flex; flex-direction: column; gap: 10px; }
.lx__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.lx__ct { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 19px; }
.lx__ct b { font-weight: 500; }
.lx__ct small { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); }
.lx__card:hover .lx__ct b { text-decoration: underline; text-underline-offset: 3px; }
.lx__card:hover .media > img { transform: scale(1.03); }
/* category pages: the second level as a row of jump links */
.subs { margin: 4px 0 8px; }
.subs ul { display: flex; flex-wrap: wrap; gap: 8px; }
.subs a { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--bg-2); font-size: 13px; font-weight: 500; transition: background-color .2s ease-out; }
.subs a:hover { background: var(--bg-3); }
.subs span { font-family: var(--mono); font-size: 11px; color: var(--fg-3); }
.lx__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; font-weight: 500; }
.lx__all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- concept sketch sheets (tools/sketch.py): the drawing on the desk, the machine it became beside it ---------- */
.sk__stage { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; }
.sk__stage--one { display: block; }
.sk__sheet { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #f7f5ef; cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(22,25,29,.06), 0 22px 44px -26px rgba(22,25,29,.4); }
.sk__sheet img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1130; }
.sk__zoom { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: var(--fg); transition: transform .3s var(--out); }
.sk__sheet:hover .sk__zoom { transform: scale(1.08); }
.sk__machine { display: flex; flex-direction: column; margin: 0; }
.sk__photo { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; overflow: hidden; }
/* 成品图片自带留白，按整块展示区缩放，避免宽屏中固定高度和二次留白叠加。 */
.sk__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; padding: 0; }
.sk__cap { display: grid; justify-items: start; gap: 4px; padding-top: 14px; }
.sk__cap b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.sk__model { font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.sk__cap .lx__all { margin-top: 8px; }
.sk__note { max-width: 640px; margin-top: 12px; font-size: 13px; color: var(--fg-3); }
/* the sheet wipes in from the left like a pen across the paper; the machine follows */
.js .sk__stage .sk__sheet img { clip-path: inset(0 100% 0 0); }
.js .sk__stage.is-in .sk__sheet img { clip-path: inset(0 0 0 0); transition: clip-path 1.3s cubic-bezier(.65, 0, .35, 1); }
.js .sk__stage .sk__machine { opacity: 0; transform: translateY(10px); }
.js .sk__stage.is-in .sk__machine { opacity: 1; transform: none; transition: opacity .5s .55s ease-out, transform .6s .55s var(--out); }
.js .sk__stage.is-in.is-swap .sk__sheet img, .js .sk__stage.is-in.is-swap .sk__machine { opacity: 0; transition: opacity .25s ease-out; }
.skd { width: min(1600px, 96vw); max-width: none; max-height: 94vh; padding: 0; border: 0; background: #f7f5ef; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); cursor: zoom-out; }
.skd[open] { animation: pop .24s cubic-bezier(.23, 1, .32, 1); }
.skd::backdrop { background: rgba(22,25,29,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.skd img { display: block; width: 100%; height: auto; }
.skd__x { position: fixed; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: var(--fg); cursor: pointer; }
.sk__strip { display: grid; grid-template-columns: repeat(5, minmax(0, 132px)); gap: 12px; margin-top: 16px; }
.sk__strip button { display: grid; gap: 6px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.sk__strip img { width: 100%; aspect-ratio: 1600 / 1130; object-fit: cover; opacity: .5; outline: 1px solid transparent; outline-offset: 3px; transition: opacity .3s, outline-color .3s; }
.sk__strip button:hover img, .sk__strip [aria-pressed="true"] img { opacity: 1; }
.sk__strip [aria-pressed="true"] img { outline-color: var(--fg); }
.sk__strip span { overflow: hidden; font-family: var(--mono); font-size: 10.5px; line-height: 14px; color: var(--fg-3); white-space: nowrap; text-overflow: ellipsis; }
.sk__strip [aria-pressed="true"] span { color: var(--fg); }

/* ---------- statement: words light up as the paragraph scrolls through (after @uisabor's 'About us' bands) ---------- */
.stmt__p { max-width: 980px; font-size: clamp(26px, 3.1vw, 40px); line-height: 1.22; font-weight: 500; letter-spacing: -.02em; text-wrap: pretty; }
.js .stmt__p .w { opacity: .16; transition: opacity .3s ease-out; }
.js .stmt__p .w.on { opacity: 1; }

/* ---------- frosted glass ----------
   Every glass surface = backdrop blur + saturation, a translucent tint with a little grain, an inset top highlight,
   and a specular rim (a 1px gradient ring drawn by ::after). In Chromium the floating controls also refract what is
   behind them at the edge (#lg-pill / #lg-round displacement maps, enabled by site.js as html.lg). */
.glass { border: 0; background: var(--grain), var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
.fsearch::after, .gal__arr::after, .gal__zoom::after, .gchip::after, .sk__zoom::after, .skd__x::after { content: ""; position: absolute; inset: 0; z-index: 1; padding: 1px; border-radius: inherit; background: var(--rim); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.fsearch::after { opacity: .45; }
.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* with refraction the tint can be thinner, so the bent backdrop shows (the icon still needs its contrast) */
.lg .fsearch { background: var(--grain), rgba(22,25,29,.48); -webkit-backdrop-filter: url(#lg-pill) blur(4px) saturate(180%); backdrop-filter: url(#lg-pill) blur(4px) saturate(180%); }
.lg .gal__arr, .lg .gal__zoom, .lg .sk__zoom, .lg .skd__x { background: var(--grain), rgba(255,255,255,.6); -webkit-backdrop-filter: url(#lg-round) blur(2px) saturate(180%) brightness(1.06); backdrop-filter: url(#lg-round) blur(2px) saturate(180%) brightness(1.06); }
.gchip { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--fg); transition: transform .4s var(--out), background-color .3s; }
.card:hover .gchip { transform: translateY(-2px); background-color: rgba(255,255,255,.78); }

/* ---------- instrument panel: on the page's light grey (like the product cards), engraved legends, dot-matrix
   readouts in graphite, and the end-face drawing in a cell of its own; the core of the fiber is the only green ---------- */
.inst { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: center; gap: 24px; margin-top: 28px; padding: 30px 32px 32px; overflow: hidden; background: var(--bg-2); color: var(--fg); }
.inst .reg { color: rgba(22,25,29,.3); }
.inst__grid { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); margin: 0; }
.inst__c { display: grid; gap: 14px; padding-right: 32px; }
.inst__c + .inst__c { padding-left: 28px; border-left: 1px solid rgba(22,25,29,.1); }
.inst dt { font-family: var(--wide); font-stretch: 125%; font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.inst dd { margin: 0; }
.dm { display: block; height: 42px; width: auto; overflow: visible; }
.dm circle { fill: rgba(22,25,29,.07); }
.dm .on { fill: var(--fg); }
.js .inst .dm .on { fill: rgba(22,25,29,.07); transition: fill .18s step-end; transition-delay: var(--d); }   /* powers on column by column */
.js .inst.is-in .dm .on { fill: var(--fg); }
.inst__ef { position: relative; height: 0; }
.endface { position: absolute; top: 50%; left: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; fill: none; stroke: rgba(22,25,29,.42); stroke-width: .6; pointer-events: none; }
.endface .ef-clad { stroke: rgba(22,25,29,.3); stroke-dasharray: 2 3; }
.endface .ef-x { stroke: rgba(22,25,29,.12); stroke-dasharray: 1 4; }
.endface .ef-dim { stroke: rgba(22,25,29,.3); }
.endface .ef-core { fill: var(--signal); stroke: none; filter: drop-shadow(0 0 5px rgba(var(--brand-rgb),.6)); }
.endface text { fill: var(--fg-3); stroke: none; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; }

/* ---------- rows (blog.x 'More posts') ---------- */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 13px 8px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 20px; transition: background-color .2s; }
a.row:hover { background: var(--bg-2); }
.row__k { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--fg); }
.row__k .i { align-self: center; }
.row__t { color: var(--fg-2); }
a.row:hover .row__t { color: var(--fg); }
.row__r { color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows--plain .row { grid-template-columns: 120px minmax(0, 1fr); }
.filters-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 16px; font-size: 13px; color: var(--fg-2); }
.filters-inline label { display: inline-flex; align-items: center; gap: 8px; }
.filters-inline select { height: 32px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat; -webkit-appearance: none; appearance: none; font-size: 13px; color: var(--fg); }
.field-search { flex: 1 1 260px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; }
.field-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13px; color: var(--fg); }
.count { margin-left: auto; color: var(--fg-3); }
.count b { color: var(--fg); }
.empty { padding: 40px 0; font-size: 14px; color: var(--fg-2); }
.empty a { text-decoration: underline; }

/* ---------- logos ---------- */
.logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.logos li { display: grid; place-items: center; height: 92px; padding: 18px 24px; background: var(--bg); }
.logos img { max-width: 100%; height: 30px; width: auto; object-fit: contain; opacity: .85; transition: opacity .3s; }   /* height per logo is set inline (logo_wall) */
.logos li:hover img { opacity: .9; }

/* ---------- closing card with border beam (Magic UI) ---------- */
.cta { position: relative; margin-top: 96px; padding: 72px 48px; overflow: hidden; background: var(--bg-2); }
.cta__art { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(0,0,0,.22); stroke-width: 1.2; }
.cta__art .dash { stroke-dasharray: 4 4; }
.cta__art .drift { animation: float 9s ease-in-out infinite; transform-box: fill-box; }
.cta__art .drift--b { animation-duration: 13.7s; animation-delay: -4s; }
@keyframes float { 50% { translate: 0 -6px; } }
.cta__in { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding: 36px 40px 40px; border: var(--glass-edge); border-radius: 22px; background: var(--grain), rgba(255,255,255,.5); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: var(--glass-shadow); text-align: center; }   /* the drifting connector drawings pass under frosted glass */
.cta__h { font-size: 32px; line-height: 36px; }
.cta__p { margin: 12px auto 22px; font-size: 15px; line-height: 23px; color: var(--fg-2); }
.cta .acts { justify-content: center; }
.beam::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--a, 0deg), transparent 0 80%, rgba(var(--brand-rgb),.9) 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: beam 6s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes beam { to { --a: 360deg; } }

/* ---------- footer with a filled wordmark ---------- */
/* 参考 Digital Metal 的工业排版节奏；光点波面为本网站原生交互。 */
.ft { position: relative; isolation: isolate; margin-top: 88px; overflow: hidden; background: #101315; color: #fff; }
.ft::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--grain-light); opacity: .35; }
.ft__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr 1.15fr .8fr; gap: clamp(20px, 2.5vw, 44px); width: 100%; padding: 64px var(--gut) 24px; }
.ft__logo { display: inline-block; }
.ft .logo path:not(.lg-g) { fill: #fff; }
.ft__lede { max-width: 290px; margin-top: 20px; font-size: 15px; line-height: 1.55; color: #bec7c1; }
.ft .acts { margin-top: 20px; }
.ft__quote { gap: 22px; min-height: 44px; padding: 11px 20px; color: var(--fg); background: var(--brand); border: 1px solid transparent; box-shadow: none; }
.ft__quote:hover { background: var(--brand-hover); }
.ft a:focus-visible { outline: 2px solid var(--signal); outline-offset: 5px; }
.pill--glass { background: var(--grain-light), rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pill--glass:hover { background-color: rgba(255,255,255,.14); }
.ft__contact { display: grid; gap: 6px; margin-top: 22px; font-size: 14px; color: #bec7c1; }
.ft__contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; }
.ft__contact .i { flex: 0 0 auto; color: #89968d; }
.ft__contact a:hover { color: #fff; }
.ft__col { border-left: 1px solid #29322d; padding-left: clamp(18px, 2.2vw, 36px); }
.ft__col h2 { margin-bottom: 16px; font-family: var(--wide); font-stretch: 125%; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #99a59d; }
.ft__col ul { display: grid; gap: 4px; }
.ft__col a { display: inline-block; padding: 4px 0; font-size: 14px; line-height: 1.5; color: #c6cdc8; transition: color .2s; }
.ft__col a:hover { color: #fff; }
.ft__scene { position: relative; z-index: 1; isolation: isolate; padding: 32px var(--gut) 36px; }
.ft__scene::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 58%, rgba(var(--brand-rgb),.13), transparent 68%); }
.ft__wave { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.ft__scene .wordmark { position: relative; display: block; z-index: 1; width: 100%; max-width: none; height: auto; margin: 0; }
/* 底部留出浮动联系和搜索控件的空间，避免遮挡版权与法律链接。 */
.ft__bar { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin: 0 var(--gut); padding: 22px 0 88px; border-top: 1px solid #29322d; font-size: 12px; line-height: 1.6; color: #98a39b; }
.ft__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ft__legal a:hover { color: #fff; }
.wordmark { width: 100%; max-width: var(--max); height: auto; margin-top: 48px; overflow: visible; }
/* 完整字母同步渐亮，A、O内孔保持镂空；柔光落在实心字形周围。 */
.wordmark path { stroke: none; fill-rule: evenodd; }
.wm__base { fill: #d8e9df; opacity: .045; }
.wm__fill { fill: url(#wm-fill); opacity: .9; }
.js .wm__fill { opacity: 0; transition: opacity 4.8s cubic-bezier(.4,0,.2,1); }
.js .is-wordmark-lit .wm__fill { opacity: .9; }
/* at the foot of the page the white logo is down there, so the one at the top bows out */
.side__logo, .mbar__logo { transition: opacity .7s ease-out, transform .7s var(--out); }
.at-foot .side__logo, .at-foot .mbar__logo { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* ---------- 产品章节与型号支持 ---------- */
.is-product { --product-sticky-top: 0px; }
.is-product .pd__body { display: block; }
.is-product .pd__sec { scroll-margin-top: calc(var(--product-sticky-top) + 82px); }
.product-chapters { position: sticky; top: var(--product-sticky-top); z-index: 45; display: flex; align-items: stretch; gap: 20px; margin-top: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2); background: rgba(255,255,255,.97); }
.product-chapters__links { position: relative; display: flex; flex: 1; min-width: 0; gap: 28px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #b8c1bb transparent; }
.product-chapters__links a { display: inline-flex; flex-shrink: 0; align-items: center; min-height: 62px; border-bottom: 3px solid transparent; padding: 4px 0 1px; color: #59615c; font-size: 14px; font-weight: 500; white-space: nowrap; }
.product-chapters__links a:hover { color: var(--fg); }
.product-chapters__links a[aria-current] { color: var(--fg); border-bottom-color: var(--brand); }
.product-chapters__quote { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--brand-ink); font-size: 13px; font-weight: 550; white-space: nowrap; }
.product-chapters a:focus-visible, .support-banner button:focus-visible, .support-link:focus-visible, .support-doc:focus-visible, .support-resource:focus-visible, .support-selector select:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.support-banner { position: relative; margin-top: 24px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.support-banner__slide { display: grid; grid-template-columns: minmax(200px, 29%) minmax(0, 1fr); min-height: 216px; }
.support-banner__slide[hidden], .support-banner__controls[hidden] { display: none; }
.support-banner__media { position: relative; min-height: 100%; background: #e9eeeb; }
.support-banner__media img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.support-banner__credit { position: absolute; bottom: 10px; left: 12px; padding: 3px 8px; color: #fff; background: rgba(15,20,18,.75); font-size: 10px; border-radius: 3px; }
.support-banner__copy { padding: 28px 152px 28px 30px; align-self: center; }
.support-banner__copy .meta { margin-bottom: 10px; font-size: 10px; color: #626b65; }
.support-banner__copy h2 { margin: 0 0 10px; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.25; letter-spacing: -.02em; font-weight: 550; }
.support-banner__copy > p:not(.meta) { font-size: 14px; line-height: 1.6; color: #5b625e; margin: 0 0 14px; }
.support-link { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-ink); font-size: 14px; font-weight: 500; }
.support-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.support-banner__controls { position: absolute; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; }
.support-banner__controls span { position: absolute; right: 0; bottom: 54px; width: 96px; text-align: center; color: #69726c; font: 12px var(--mono); }
.support-banner__controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #d0d5d2; border-radius: 50%; background: #fff; color: var(--fg); cursor: pointer; }
.support-banner__controls button:hover { background: var(--brand-surface); border-color: var(--brand); }
.support-intro { max-width: 820px; color: #5c645f; font-size: 15px; line-height: 1.7; margin-bottom: 22px; }
.support-docs { display: grid; gap: 16px; }
.support-docs--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.support-doc { display: grid; grid-template-columns: 24px minmax(0,1fr) 14px; gap: 14px; align-items: start; padding: 24px 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; transition: border-color .18s, background .18s; }
.support-doc > .i:first-child { margin-top: 2px; }
.support-doc > .i:last-child { align-self: center; }
.support-doc strong, .support-resource strong { display: block; font-size: 15px; line-height: 1.4; font-weight: 550; }
.support-doc small, .support-resource small { display: block; margin-top: 7px; color: #5e6760; font-size: 13px; line-height: 1.6; }
.support-doc:hover { border-color: var(--brand-edge); background: var(--brand-surface); }
.support-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 24px; }
.support-resources-title { margin: 40px 0 16px; }
.support-resources { display: grid; border-top: 1px solid var(--line); }
.support-resource { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 20px 8px; border-bottom: 1px solid var(--line); }
.support-resource > span:last-child { display: flex; gap: 10px; align-items: center; color: var(--brand-ink); font-size: 13px; }
.support-resource:hover strong { color: var(--brand-ink); }
.support-request-panel { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: start; gap: 22px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 28px; }
.support-request-panel h3, .support-feedback h3 { font-size: 18px; font-weight: 500; line-height: 1.4; margin-bottom: 8px; }
.support-request-panel p, .support-feedback p { color: #5e6760; font-size: 14px; line-height: 1.7; max-width: 680px; }
.support-request-panel .note { margin: 12px 0 0; font-size: 12px; }
.support-request-panel > .pill { align-self: center; }
.support-feedback { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.support-videos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.support-videos video { width: 100%; background: var(--graphite); }
.support-reviews blockquote { padding: 24px; background: var(--bg-2); margin-bottom: 16px; }
.support-selector { max-width: 760px; margin-bottom: 28px; }
.support-selector label { display: block; font-size: 14px; font-weight: 550; margin-bottom: 10px; }
.support-selector select { width: 100%; min-height: 48px; border: 1px solid #cbd2ce; border-radius: 4px; background: white; padding: 10px 36px 10px 12px; font: inherit; font-size: 14px; text-overflow: ellipsis; }
.support-selector .note { margin-top: 10px; }
.support-scope { color: #59645d; max-width: 780px; font-size: 14px; line-height: 1.7; margin: 24px 0 0; }
.support-hub-guide { margin-top: 56px; }
.support-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; list-style-position: inside; margin-top: 24px; }
.support-steps li { padding-top: 18px; border-top: 1px solid var(--line-2); }
.support-steps strong { font-size: 16px; font-weight: 550; }
.support-steps p { font-size: 14px; line-height: 1.7; color: #5e6760; margin-top: 10px; }
.support-hub-footer { margin-top: 48px; padding: 28px; border: 1px solid var(--line); background: var(--bg-2); }
.support-hub-footer > p { margin: 8px 0 20px; color: #5e6760; font-size: 14px; }
.support-hub-footer > .support-link { margin-left: 20px; }
@media (max-width: 1180px) {
  .product-chapters__quote { display: none; }
  .support-request-panel { grid-template-columns: 28px minmax(0,1fr); }
  .support-request-panel > .pill { grid-column: 2; justify-self: start; }
}
@media (max-width: 1080px) { .is-product { --product-sticky-top: 56px; } }
@media (max-width: 700px) {
  .product-chapters { margin-top: 24px; }
  .product-chapters__links { gap: 24px; }
  .product-chapters__links a { min-height: 54px; font-size: 13px; }
  .support-banner__slide { grid-template-columns: 1fr; }
  .support-banner__media { height: 132px; min-height: 0; }
  .support-banner__copy { padding: 22px 20px 84px; }
  .support-banner__copy h2 { font-size: 21px; }
  .support-banner__controls { right: 20px; bottom: 18px; }
  .support-banner__controls span { position: static; width: auto; margin-right: 8px; }
  .support-docs--three, .support-steps, .support-videos { grid-template-columns: 1fr; }
  .support-doc { padding: 22px 18px; }
  .support-feedback { display: block; }
  .support-feedback > .pill { margin-top: 18px; }
  .support-request-panel { padding: 22px 18px; gap: 15px; }
  .support-resource { grid-template-columns: 24px minmax(0,1fr); padding: 20px 0; }
  .support-resource > span:last-child { grid-column: 2; justify-self: start; min-height: 28px; }
  .support-actions { align-items: flex-start; gap: 16px; }
  .support-hub-footer { padding: 24px 18px; }
  .support-hub-footer > .support-link { margin: 20px 0 0; display: flex; }
}

/* ---------- product / article ---------- */
.pd__hd { max-width: 820px; }
.pd__h { margin: 10px 0 10px; font-size: 48px; line-height: 52px; letter-spacing: -.02em; }
.pd__hd .tag { margin-bottom: 12px; }
.pd__hd .lede { margin: 0; }
.gal { position: relative; margin-top: 28px; }
/* slides sit on top of each other (absolute, so the image's max-height has a real box to measure against and the
   product is always centred); the new one fades in over the old, which stays put underneath — no dip to the backdrop */
.gal__main { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 72vh; overflow: hidden; background: var(--bg-2); }
.gal__slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; cursor: zoom-in; background: var(--stage, var(--bg-2)); }   /* flex: the img's % max size resolves against the slide; own backdrop: the multiply blend has something to blend with inside the slide's stacking context */
.gal__slide.is-on { z-index: 2; opacity: 1; visibility: visible; transition: opacity .45s cubic-bezier(.23, 1, .32, 1); }
.gal__slide.is-prev { z-index: 1; opacity: 1; visibility: visible; }
.gal__slide img { position: relative; z-index: 1; width: auto; height: auto; max-width: 84%; max-height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .4s ease-out; }
.gal__slide.is-on.is-moving img { animation: gal-in .55s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes gal-in { from { transform: translateX(var(--dx, 0)) scale(.985); } }
.gal__slide:not([data-w]) img { max-width: 100%; max-height: 100%; mix-blend-mode: normal; }
.gal__slide.is-loaded img { opacity: 1; }
.gal__arr, .gal__zoom { position: absolute; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--grain), var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); color: var(--fg); transition: background-color .2s; }
.gal__arr { top: 50%; margin-top: -20px; }
.gal__arr--p { left: 14px; }
.gal__arr--n { right: 14px; }
.gal__zoom { right: 14px; bottom: 14px; }
.gal__close { display: none; }
.gal__thumbs { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.gal__th { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--line-2); transition: background-color .2s, width .3s var(--out); }
.gal__th.is-on { width: 18px; border-radius: 3px; background: var(--fg); }
.gal__note { margin: 8px 0 0; color: var(--fg-2); font-size: 12px; line-height: 1.5; }
.gal__caption { position: absolute; z-index: 2; left: 16px; bottom: 14px; max-width: calc(100% - 88px); color: var(--fg-2); font-size: 12px; line-height: 1.5; }
.product-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 24px; width: 100%; margin: 0; padding: 0; list-style: none; }
.product-links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.product-links a:hover { color: var(--brand-ink); }
.product-links .i { flex: 0 0 auto; }
.gal.is-full { position: fixed; inset: 0; z-index: 200; margin: 0; padding: 24px; background: rgba(255,255,255,.98); }
.gal.is-full .gal__main { height: calc(100vh - 80px); max-height: none; aspect-ratio: auto; background: transparent; }
.gal.is-full .gal__zoom { display: none; }
.gal.is-full .gal__close { display: grid; place-items: center; position: absolute; top: 0; right: 0; z-index: 4; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(0,0,0,.06); }
.pd__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.keys { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.keys dt { font-size: 20px; line-height: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
.keys dd { font-size: 12.5px; color: var(--fg-2); }
.pd__sub { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--fg-2); }
.pd__sub a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.pd__sub a:hover { color: var(--fg); }
.pd__body { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 64px; align-items: start; }
.pd__main { min-width: 0; }
.pd__sec { padding-top: 56px; scroll-margin-top: 24px; }
.h2 { margin-bottom: 16px; font-size: 24px; line-height: 30px; }
.h3 { margin: 24px 0 10px; font-size: 14px; font-weight: 500; }
.toc { position: sticky; top: 28px; padding-top: 56px; }
.toc__h { margin-bottom: 10px; font-size: 13px; font-weight: 500; }
.toc ol { display: grid; gap: 6px; margin-bottom: 18px; padding-left: 10px; border-left: 1px solid var(--line); }
.toc a:not(.pill) { display: block; font-size: 13px; line-height: 18px; color: var(--fg-3); transition: color .2s; }
.toc a:not(.pill):hover, .toc a.is-on { color: var(--fg); }
.prose { max-width: 700px; font-size: 16px; line-height: 27px; color: var(--fg-2); }
.prose > * + * { margin-top: 16px; }
.prose--lg { font-size: 18px; line-height: 30px; }
.prose h2 { margin-top: 40px; font-size: 22px; line-height: 28px; color: var(--fg); scroll-margin-top: 24px; }
.prose h3 { margin-top: 28px; font-size: 17px; color: var(--fg); }
.prose ul li, .dots li { position: relative; padding-left: 16px; }
.prose ul li::before, .dots li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); }
.prose ol { list-style: decimal; padding-left: 20px; }
.prose a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 28px 0 0; padding: 16px 20px; background: var(--bg-2); color: var(--fg); }
.dots { display: grid; gap: 6px; font-size: 15px; color: var(--fg-2); }
.dots--lg { margin-top: 24px; font-size: 16px; color: var(--fg); }
.fit { margin-top: 28px; }
.fit__st { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fit__st li { display: flex; flex-direction: column; padding: 10px 8px; background: var(--bg); font-size: 12px; color: var(--fg-3); }
.fit__st li span { font-weight: 500; }
.fit__st li.is-on { background: var(--fg); color: #fff; }
.flow { display: grid; gap: 10px; margin-top: 18px; counter-reset: f; }
.flow li { position: relative; display: flex; flex-direction: column; padding-left: 30px; font-size: 14px; color: var(--fg-2); counter-increment: f; }
.flow li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.flow b { color: var(--fg); }
.feats { border-top: 1px solid var(--line); }
.feats li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.num { font-size: 13px; font-weight: 500; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.feats h3 { font-size: 15px; line-height: 22px; }
.feats p { margin-top: 2px; font-size: 14px; line-height: 22px; color: var(--fg-2); }
.sgrp { margin-bottom: 28px; }
.sgrp__h { margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--fg-3); }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--line); }
.kv > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 20px; }
.kv dt { color: var(--fg-2); }
.kv dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.note { margin-top: 10px; font-size: 13px; color: var(--fg-3); }
.tscroll { overflow-x: auto; border-top: 1px solid var(--line); }
.vt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vt th, .vt td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.vt thead th { font-weight: 500; color: var(--fg-3); }
.vt tbody th { font-weight: 400; color: var(--fg-2); }
.vt td { font-weight: 500; font-variant-numeric: tabular-nums; }
.note-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; background: var(--bg-2); font-size: 14px; color: var(--fg-2); }
.note-card b { color: var(--fg); }
.dets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.det { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-2); }
.det img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease-out; }
.det.is-loaded img { opacity: 1; }
.cfgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
.cfg { padding-top: 12px; border-top: 1px solid var(--line); }
.cfg h3 { margin-bottom: 10px; font-size: 14px; }
.cfg .dots { font-size: 13.5px; }
.faq { border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 15px; font-weight: 500; list-style: none; cursor: pointer; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__ic { color: var(--fg-3); transition: transform .3s var(--out); }
.faq__i[open] .faq__ic { transform: rotate(45deg); }
.faq__i p { max-width: 700px; padding: 0 32px 18px 0; font-size: 14.5px; line-height: 23px; color: var(--fg-2); }
.arch { border-top: 1px solid var(--line); }
.arch__st { padding: 16px 0; border-bottom: 1px solid var(--line); }
.arch__st h3 { margin: 6px 0 12px; font-size: 16px; }
.arch__items, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 资料文章只保留相关设备的文字链接，不展示产品照片。 */
.resource-equipment-links { display: grid; gap: 10px; font-size: 14px; line-height: 22px; }
.resource-equipment-links a { text-decoration: underline; text-underline-offset: 3px; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--bg-2); transition: background-color .2s; }
.chip:hover { background: var(--bg-3); }
.chip__img { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); overflow: hidden; }
.chip__img img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.chip__t { display: flex; flex-direction: column; line-height: 1.25; }
.chip b { font-size: 12.5px; font-weight: 500; }
.chip small { font-size: 11px; color: var(--fg-3); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.rfq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld--full { grid-column: 1 / -1; }
.fld label { font-size: 13px; font-weight: 500; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 14px; transition: border-color .2s; }
.fld select { -webkit-appearance: none; appearance: none; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 14px no-repeat; padding-right: 34px; }
.fld textarea { resize: vertical; min-height: 140px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 0; border-color: var(--fg); }
.fld.is-bad input, .fld.is-bad textarea { border-color: #c4302b; }
.fld__err { font-size: 12.5px; color: #c4302b; }
.hp { position: absolute; left: -9999px; }
.check { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--fg-2); }
.check input { width: 16px; height: 16px; accent-color: #000; }
.rfq__ft { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.rfq__ft .muted { font-size: 12.5px; }
.rfq__ft .muted a { text-decoration: underline; }
.rfq.is-busy { opacity: .6; pointer-events: none; }
.rfq__items { margin-bottom: 22px; }
.rfq__list { display: grid; gap: 6px; margin-bottom: 8px; }
.rfq__ok { margin-top: 22px; padding: 20px; background: var(--bg-2); }
.rfq__ok pre { max-height: 240px; overflow: auto; margin: 12px 0; padding: 12px; background: var(--bg); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; }
.rfq__ok .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.contact__side .h3 { margin-top: 28px; }
.nexts { display: grid; gap: 12px; counter-reset: n; }
.nexts li { position: relative; display: flex; flex-direction: column; padding-left: 30px; font-size: 13.5px; color: var(--fg-2); counter-increment: n; }
.nexts li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.nexts b { color: var(--fg); }
.qitem { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; background: var(--bg-2); }
.qitem__img { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: var(--bg); overflow: hidden; }
.qitem__img img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.qitem__t { flex: 1; min-width: 0; }
.qitem__t a { display: block; font-size: 13px; font-weight: 500; line-height: 18px; }
.qitem__t small { font-size: 11.5px; color: var(--fg-3); }
.qty { display: inline-flex; align-items: center; height: 30px; border-radius: 999px; background: var(--bg); }
.qty button { width: 26px; height: 100%; border: 0; background: none; }
.qty input { width: 26px; border: 0; background: none; text-align: center; font-size: 12.5px; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qitem__x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 999px; background: none; color: var(--fg-3); }
.qitem__x:hover { background: rgba(0,0,0,.05); color: var(--fg); }

/* ---------- 404 ---------- */
.nf { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 48px 0 0; }
.nf__art { width: 100%; max-width: 760px; height: auto; fill: none; stroke: rgba(0,0,0,.25); stroke-width: 1; stroke-dasharray: 6 6; animation: nf 30s linear infinite; }
.nf__art text { font-family: var(--font); font-size: 300px; font-weight: 500; }
@keyframes nf { to { stroke-dashoffset: -240; } }

/* ---------- overlays ---------- */
.fsearch { position: fixed; left: calc(var(--side) + (100vw - var(--side)) / 2); bottom: 20px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: var(--grain), var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: #fff; font-size: 13px; font-weight: 500; transform: translate(-50%, 140%); opacity: 0; transition: transform .45s var(--out), opacity .3s; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.18); }
.fsearch kbd { color: rgba(255,255,255,.5); }
.fsearch.is-on { transform: translate(-50%, 0); opacity: 1; }
.sd { position: fixed; inset: 0; z-index: 220; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.sd__scrim, .qd__scrim { position: absolute; inset: 0; background: rgba(240,240,240,.38); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.sd__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 72vh; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: var(--grain), var(--glass-strong); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(0,0,0,.06), 0 24px 64px rgba(0,0,0,.14); overflow: hidden; animation: pop .24s cubic-bezier(.23, 1, .32, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }   /* enter from 96%, never from nothing */
.sd__bar { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--fg-3); }
.sd__bar input { flex: 1; height: 54px; border: 0; outline: 0; background: none; font-size: 16px; color: var(--fg); }
.sd__x { padding: 0; border: 0; background: none; }
.sd__res { overflow-y: auto; padding: 6px; }
.sd__res a { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; }
.sd__res a:hover, .sd__res a.is-on { background: var(--bg-2); }
.sd__res .chip__img { border-radius: 8px; background: var(--bg-2); }
.sd__res b { display: block; font-size: 13.5px; font-weight: 500; }
.sd__res small { display: block; font-size: 12px; color: var(--fg-3); }
.sd__res mark { background: none; color: var(--fg); text-decoration: underline; }
.sd__empty { padding: 24px 18px; font-size: 14px; color: var(--fg-2); }
.sd__empty a { text-decoration: underline; }
.sd__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-3); }
.sd__foot button { height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(0,0,0,.05); font-size: 12.5px; }
.qd { position: fixed; inset: 0; z-index: 220; display: flex; justify-content: flex-end; }
.qd__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 420px; height: 100%; border-left: 1px solid rgba(255,255,255,.7); background: var(--grain), var(--glass-strong); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: -1px 0 0 rgba(0,0,0,.06), -24px 0 64px rgba(0,0,0,.1); animation: slide .42s cubic-bezier(.32, .72, 0, 1); }   /* iOS drawer curve */
@keyframes slide { from { transform: translateX(48px); opacity: 0; } }
/* exits: every panel leaves the way it came in, a little quicker (site.js adds .is-out, then hides it) */
.sd.is-out .sd__panel, .skd.is-out { animation: pop-out .18s ease-in forwards; }
.sd.is-out .sd__scrim, .qd.is-out .qd__scrim, .side-scrim.is-out, .skd.is-out::backdrop { animation: fade-out .18s ease-in forwards; }
.qd.is-out .qd__panel { animation: slide-out .2s cubic-bezier(.4, 0, 1, 1) forwards; }
.skd::backdrop, .side-scrim { animation: fade .25s ease-out; }
@keyframes pop-out { to { opacity: 0; transform: translateY(4px) scale(.97); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes slide-out { to { transform: translateX(48px); opacity: 0; } }
/* filtering the catalogue: the cards that stay rise back in a few at a time */
.card.is-shuffle { animation: card-in .45s cubic-bezier(.23, 1, .32, 1) both; animation-delay: calc(var(--c, 0) * 28ms); }
/* answers open and close smoothly where the browser can animate to an auto height (others just open) */
:root { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: clip; transition: block-size .32s cubic-bezier(.23, 1, .32, 1), content-visibility .32s allow-discrete; }
details[open]::details-content { block-size: auto; }
/* page to page: a short cross-fade instead of a blank flash; the index on the left stays put */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease-out; }
.side { view-transition-name: side; }
.qd__hd { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 8px 22px; }
.qd__hd h2 { font-size: 20px; }
.qd__list { flex: 1; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding: 12px 18px; }
.qd__empty { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px; font-size: 14px; color: var(--fg-2); }
.qd__empty b { color: var(--fg); }
.qd__ft { display: grid; gap: 8px; padding: 14px 18px 20px; border-top: 1px solid var(--line); }
.qd__ft .pill { height: 40px; }
.qd__ft p { font-size: 12.5px; color: var(--fg-3); text-align: center; }
/* contact: a headset button; hover (or tap) opens the ways to reach us upward from it */
.fab { position: fixed; right: 18px; bottom: 20px; z-index: 80; }
/* 客服按钮与 Logo 共用品牌绿，光晕降低强度。 */
.fab__b { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--signal); color: var(--fg);
  box-shadow: 0 6px 18px -6px rgba(var(--brand-rgb),.38), inset 0 1px 0 rgba(255,255,255,.35); cursor: pointer; transition: background-color .2s ease-out, transform .16s ease-out, box-shadow .2s ease-out; }
.fab__b::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(var(--brand-rgb),.28); animation: fab-halo 5s 2s ease-out infinite; pointer-events: none; }
@keyframes fab-halo { 0% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb),.28); } 22%, 100% { box-shadow: 0 0 0 12px rgba(var(--brand-rgb),0); } }
.fab__b:hover { background-color: var(--brand-hover); box-shadow: 0 8px 22px -6px rgba(var(--brand-rgb),.4), inset 0 1px 0 rgba(255,255,255,.4); }
.fab__b:active { transform: scale(.96); }
.fab.is-open .fab__b::before, .fab:hover .fab__b::before { animation: none; }
.fab__m { position: absolute; right: 0; bottom: 100%; display: grid; gap: 2px; width: 264px; margin-bottom: 10px; padding: 8px; border-radius: 16px; opacity: 0; visibility: hidden; transform: translateY(6px) scale(.97); transform-origin: 100% 100%;
  transition: opacity .18s ease-out, transform .22s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .22s; }
.fab__m::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }     /* keeps the hover alive across the gap */
.fab:hover .fab__m, .fab:focus-within .fab__m, .fab.is-open .fab__m { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fab__h { padding: 6px 10px 6px; font-family: var(--wide); font-stretch: 125%; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.fab__m a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; transition: background-color .15s; }
.fab__m a:hover { background: rgba(22,25,29,.06); }
.fab__m a .i { flex: none; color: var(--fg); }
.fab__m span { display: grid; min-width: 0; }
.fab__m b { font-size: 13px; font-weight: 500; }
.fab__m small { overflow: hidden; font-family: var(--mono); font-size: 11px; color: var(--fg-3); white-space: nowrap; text-overflow: ellipsis; }
.toast { position: fixed; left: calc(var(--side) + (100vw - var(--side)) / 2); bottom: 68px; z-index: 230; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--fg); color: #fff; font-size: 13px; transform: translate(-50%, 12px); opacity: 0; transition: transform .35s var(--out), opacity .3s; pointer-events: none; }
.toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
body.is-locked { overflow: hidden; }

/* ---------- motion: split words (blog.x hero-word-in / React Bits SplitText) and reveals ---------- */
.split .w { display: inline-block; perspective: 600px; }
.split .w > span { display: inline-block; transform-origin: 50% 100%; animation: word-in .9s var(--out) both; animation-delay: calc(var(--d, 0) * 60ms + 120ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(45%) rotateX(-40deg); } }
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--out), transform .7s var(--out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .wm__fill { opacity: .9; }
  .js .inst .dm .on { fill: var(--signal); }
}

/* ---------- responsive ---------- */
/* 大屏使用可用宽度，避免卡片被无限放大。 */
@media (min-width: 1800px) {
  .feat { min-height: clamp(480px, 25vw, 640px); }
  .feat__h { max-width: 16ch; font-size: clamp(48px, 2.6vw, 64px); line-height: 1.08; }
  .grid3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 2800px) {
  .grid3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .pd__body { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .inst { grid-template-columns: minmax(0, 1fr); }
  .inst__ef { display: none; }
}
@media (max-width: 1080px) {
  :root { --side: 0px; }
  .side { width: 280px; transform: translateX(-100%); transition: transform .4s var(--out); border-right: 1px solid var(--line); }
  .side.is-open { transform: none; }
  .side__x { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 999px; background: rgba(0,0,0,.05); }
  .side-scrim { position: fixed; inset: 0; z-index: 65; display: block; background: rgba(255,255,255,.6); }
  .mbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 var(--gut); background: rgba(255,255,255,0); border-bottom: 1px solid transparent; transition: background-color .3s ease-out, border-color .3s ease-out, -webkit-backdrop-filter .3s, backdrop-filter .3s; }
  /* the bar turns to glass first, then the logo folds (Unless: the nav's glass lands before the letters move) */
  .is-scrolled .mbar { background: var(--grain), rgba(255,255,255,.62); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom-color: rgba(22,25,29,.07); box-shadow: inset 0 -1px 0 rgba(255,255,255,.5); }
  .is-scrolled .mbar .logo .lg-m { transition-delay: calc(.12s + (3 - var(--k)) * .06s); }
  .mbar__tools { display: flex; }
  .shell { margin-left: 0; }
  .top__row .search { display: none; }
  .feat { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; }
  .feat__copy, .feat__art, .feat__act { grid-column: 1; grid-row: auto; }
  .feat__art { min-height: 260px; }
  .feat__act { justify-content: flex-start; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .ft__in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; padding-top: 48px; }
  .ft__brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  .ft__brand .ft__logo, .ft__brand .ft__lede { grid-column: 1; }
  .ft__brand .acts { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .ft__contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; }
  .ft__col { border-left: 0; border-top: 1px solid #29322d; padding: 20px 0 0; }
  .ft__scene { padding-top: 28px; padding-bottom: 28px; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cfgs, .dets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx__tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
  .lx__tabs::-webkit-scrollbar { display: none; }
  .lx__tab { flex: 0 0 112px; }
  .lx__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk__stage { grid-template-columns: minmax(0, 1fr); }
  .sk__machine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
  .sk__photo { aspect-ratio: 4 / 3; }
  .sk__cap { padding-top: 0; }
}
@media (max-width: 680px) {
  .sk__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk__machine { grid-template-columns: minmax(0, 1fr); }
  .sk__photo { aspect-ratio: 4 / 3; }
  .ft__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding-top: 36px; }
  .ft__brand { display: block; }
  .ft__brand .acts { margin-top: 20px; }
  .ft__contact { display: grid; gap: 6px; }
  .ft__col:last-child { grid-column: 1 / -1; }
  .ft__col:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
  .ft__col a { min-height: 32px; }
  .ft__scene { padding-top: 32px; padding-bottom: 32px; }
  .ft__bar { flex-direction: column; }
  .top { padding-top: 22px; }
  .top__h { font-size: 26px; line-height: 30px; }
  .feat { padding: 20px; }
  .feat__h, .pd__h { font-size: 34px; line-height: 38px; }
  .lede { font-size: 16px; line-height: 25px; }
  .sec { margin-top: 60px; }
  .sh__h { font-size: 20px; line-height: 26px; }
  .grid3 { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .inst { padding: 24px 20px 26px; }
  .inst__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .inst__c { padding-right: 12px; }
  .inst__c + .inst__c { padding-left: 0; border-left: 0; }
  .inst__c:nth-child(even) { padding-left: 20px; border-left: 1px solid rgba(22,25,29,.1); }
  .dm { height: 34px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 4px; }
  .row__k { grid-column: 1 / -1; }
  .rows--plain .row { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .rfq__grid { grid-template-columns: minmax(0, 1fr); }
  .fit__st { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cfgs, .dets { grid-template-columns: minmax(0, 1fr); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta { padding: 48px 20px; }
  .cta__h { font-size: 26px; line-height: 30px; }
  .gal__arr { display: none; }
  .lx__tab { flex-basis: 96px; }
  .cta__in { padding: 28px 20px 30px; }
  .fsearch, .toast { left: 50%; }
}