[tabindex]:focus-visible { outline: .25rem solid var(--accent); outline-offset: .25rem; }
.eyebrow { font-size: 1.375rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.display { font-size: 7rem; line-height: 1.06; font-weight: 700; letter-spacing: -.015em; white-space: pre-line; }
.h1 { font-size: 5rem; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; white-space: pre-line; }
.h2 { font-size: 3.5rem; line-height: 1.15; font-weight: 700; white-space: pre-line; }
.h3 { font-size: 2.25rem; line-height: 1.25; font-weight: 600; }
.lead { font-size: 1.875rem; line-height: 1.5; color: var(--ink-2); font-weight: 400; }
.body { font-size: 1.5rem; line-height: 1.55; color: var(--ink-2); }
.fine { font-size: 1.125rem; line-height: 1.5; color: var(--ink-3); }
.dark .lead, .dark .body { color: var(--dark-ink-2); }
.dark .eyebrow { color: var(--accent-on-dark); }
.dark .fine { color: #6e6e73; }
.grad-text { background: linear-gradient(90deg, var(--a1, #7b5cff), var(--a2, #ff6aa2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 4.5rem; padding: 0 2.25rem; border-radius: 99rem;
  font-size: 1.5rem; font-weight: 400; letter-spacing: .02em; white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s, opacity .2s;
}
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-light { background: rgba(255,255,255,.92); color: var(--ink); }
.btn-ghost { background: rgba(0,0,0,.06); color: var(--ink); }
.dark .btn-ghost { background: rgba(255,255,255,.14); color: #fff; }
.btn svg { width: 1.5rem; height: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; min-height: 4rem; padding: 0 1.75rem; border-radius: 99rem;
  background: rgba(0,0,0,.06); font-size: 1.375rem; font-weight: 400; color: var(--ink);
  transition: background-color .25s, color .25s, transform .2s;
}
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.dark .chip { background: rgba(255,255,255,.12); color: #fff; }
.dark .chip[aria-pressed="true"] { background: #fff; color: #000; }
#app { position: fixed; inset: 0; overflow: hidden; }
.product { background: var(--bg); }
.pscroll { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.chap { position: relative; min-height: 100vh; height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; padding: calc(var(--nav-h) + 3rem) var(--pad) 5rem; display: flex; flex-direction: column; justify-content: center; }
.chap.dark { background: #000; color: #fff; }
.chap.soft { background: var(--bg-2); }
.chap .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.chap > *:not(.bg) { position: relative; z-index: 1; }
.chap > .next-hint { position: absolute; }
.chap.studio { background: #f0eeef; }
.chap .shade-l { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 70%); }
.chap .shade-l.light { background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,0) 65%); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; height: 100%; }
.split.wide-r { grid-template-columns: 5fr 7fr; }
.copy-col { display: flex; flex-direction: column; gap: 1.5rem; max-width: 46rem; }
.media-col { position: relative; height: 100%; display: grid; place-items: center; min-height: 0; }
.media-col img { max-height: 100%; width: auto; object-fit: contain; }
.chap.studio .media-col > img { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, transparent 100%); }
.chap.dark .media-col > img { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.quick { display: flex; flex-wrap: wrap; margin-top: 1rem; }
/* 规格短句用细竖线分隔；换行后行首的分隔线落在容器外被裁掉 */
.quick { gap: .5rem 2.5rem; overflow: hidden; }
.quick span { position: relative; font-size: 1.375rem; line-height: 1.6; color: var(--ink-2); }
.quick span::before { content: ""; position: absolute; left: -1.25rem; top: .3em; bottom: .3em; width: 1px; background: var(--line); }
.dark .quick span { color: var(--dark-ink-2); }
.dark .quick span::before { background: rgba(255,255,255,.2); }
.next-hint { position: absolute; z-index: 5; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .125rem; font-size: 1.125rem; letter-spacing: .04em; opacity: .5; min-height: 4.5rem; padding: 0 2rem; justify-content: center; }
.next-hint svg { width: 1.5rem; height: 1.5rem; animation: bob 2.8s var(--ease) infinite; }
@keyframes bob { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(.375rem); } }
.footnote { margin-top: 1rem; }
@media (orientation: portrait) {
.chap { padding: calc(var(--nav-h) + 2.5rem) var(--pad) 7rem; justify-content: flex-start; }
.split, .split.wide-r { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 2rem; }
.media-col { order: 2; }
.chap .shade-l { background: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,0) 70%); }
.chap .shade-l.light { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 40%, rgba(255,255,255,0) 60%); }
.chap .bg { object-position: 75% 50%; }
}
.talk-card { position: fixed; z-index: 35; left: var(--pad); bottom: 2rem; width: 46rem; background: #1c1c1e; color: #fff; border-radius: var(--radius-m); padding: 1.5rem 1.75rem 1.75rem; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.35); animation: rise .45s var(--ease-out) both; border-top: .375rem solid #ffd60a; }
.talk-card h4 { font-size: 1.125rem; letter-spacing: .08em; color: #ffd60a; margin-bottom: .75rem; }
.talk-card ol { padding-left: 1.75rem; display: grid; gap: .625rem; font-size: 1.375rem; line-height: 1.45; }
@media (orientation: portrait) {
.talk-card { left: 1.5rem; right: 1.5rem; width: auto; bottom: 6rem; }
}
.seg { display: inline-flex; padding: .375rem; border-radius: 99rem; background: rgba(0,0,0,.06); gap: .25rem; }
.dark .seg { background: rgba(255,255,255,.12); }
.seg button { min-height: 4.25rem; padding: 0 2rem; border-radius: 99rem; font-size: 1.5rem; font-weight: 400; color: var(--ink-2); transition: background-color .3s, color .3s; }
.dark .seg button { color: rgba(255,255,255,.7); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 .25rem 1rem rgba(0,0,0,.1); }
.try { position: relative; display: inline-block; align-self: flex-start; }
.try.block { display: block; align-self: stretch; }
.try-hint { left: calc(100% + 1.5rem); top: 50%; margin-top: -1rem; }
.try-hint { position: absolute; z-index: 6; pointer-events: none; display: flex; align-items: center; gap: .75rem; font-size: 1.25rem; letter-spacing: .02em; line-height: 2rem; color: var(--accent); white-space: nowrap; animation: hint-in .8s 1.2s var(--ease-out) both; }
.dark .try-hint { color: var(--accent-on-dark); }
.try-hint svg { display: none; }
.try-hint::before { content: ""; flex: none; width: .625rem; height: .625rem; border-radius: 50%; background: currentColor; animation: hint-pulse 2.4s var(--ease) infinite; }
.try-hint.done { display: none; }
@keyframes hint-in { from { opacity: 0; transform: translateX(-.5rem); } }
@keyframes hint-pulse { 50% { opacity: .3; transform: scale(.6); } }
.bignum { font-size: 12rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: var(--num-grad, var(--brand-grad)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bignum small { font-size: 3rem; font-weight: 600; margin-left: .5rem; letter-spacing: 0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
.duo > div { background: rgba(255,255,255,.08); border-radius: var(--radius-l); padding: 2.5rem; }
.duo b { font-size: 2.25rem; display: block; margin-bottom: .5rem; }
.light-duo > div { background: var(--card); }
.seg.sm button { min-height: 4rem; padding: 0 1.5rem; font-size: 1.375rem; }
.slab-l { left: 5.5rem; }
.slab-r { right: 5.5rem; }
.smeter-l { left: 2rem; }
.smeter-r { right: 2rem; }
.take { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
.qr-card { justify-self: center; display: grid; justify-items: center; gap: 1.25rem; background: #fff; color: var(--ink); border-radius: var(--radius-l); padding: 2.5rem 3rem; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.08); }
.qr-card img { width: 20rem; height: 20rem; image-rendering: pixelated; }
.qr-card b { font-size: 1.75rem; }
.qr-card span { font-size: 1.25rem; color: var(--ink-2); margin-top: -.75rem; }
.staff-card { display: flex; gap: 1.5rem; align-items: center; background: rgba(0,0,0,.04); border-radius: var(--radius-l); padding: 2rem; margin-top: 1rem; }
.dark .staff-card { background: rgba(255,255,255,.08); }
.staff-card .ico { width: 5rem; height: 5rem; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.staff-card .ico svg { width: 2.5rem; height: 2.5rem; }
.staff-card b { font-size: 1.75rem; display: block; }
.xsell { margin-top: 2.5rem; }
.xsell .row { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.xsell button { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.5rem .75rem .75rem; min-height: 5.5rem; border-radius: 99rem; background: var(--card); font-size: 1.375rem; font-weight: 400; box-shadow: 0 .25rem 1rem rgba(0,0,0,.05); transition: transform .2s; }
.xsell button:active { transform: scale(.96); }
.xsell img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.dark .xsell button { background: #1c1c1e; color: #fff; }
@media (orientation: portrait) {
.take { grid-template-columns: 1fr; gap: 3rem; }
.chap.take-chap { justify-content: center; }
.qr-card { justify-self: start; }
.bignum { font-size: 9rem; }
}