/* 网页版作品集样式。视觉方向来自 DESIGN.md：纯黑画布、常规字重的大标题、极细正文、
   单一紫色主动作、琥珀色强调，不用卡片、描边和阴影，层级只靠尺度、颜色和留白。 */

@font-face { font-family: "Inter"; src: url("/fonts/inter-light.woff2") format("woff2"); font-weight: 100 300; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-regular.woff2") format("woff2"); font-weight: 301 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-semibold.woff2") format("woff2"); font-weight: 501 900; font-display: swap; }
@font-face { font-family: "Noto SC"; src: url("/fonts/noto-sc-light.woff2") format("woff2"); font-weight: 100 300; font-display: swap; }
@font-face { font-family: "Noto SC"; src: url("/fonts/noto-sc-regular.woff2") format("woff2"); font-weight: 301 500; font-display: swap; }
@font-face { font-family: "Noto SC"; src: url("/fonts/noto-sc-medium.woff2") format("woff2"); font-weight: 501 900; font-display: swap; }

:root {
  --void: #000;
  --bone: #fff;
  --ash: #9a9a9a;
  --mist: #bdbdbd;
  --iris: #8052ff;
  --saffron: #ffb829;
  --verdant: #15846e;

  --font: "Inter", "Noto SC", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --page: min(1280px, 100% - 2 * var(--gutter));
  --gap: clamp(72px, 10vw, 132px);
  --radius: 24px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: transparent;
  color: var(--bone);
  font-family: var(--font);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 400; }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 4px; border-radius: 6px; }

/* —— 字号层级 —— */
.display { font-size: clamp(40px, 6.2vw, 96px); font-weight: 400; line-height: 1.14; letter-spacing: -.04em; }
.display span { display: block; }
.heading-lg { font-size: clamp(34px, 5.2vw, 78px); font-weight: 400; line-height: 1.14; letter-spacing: -.04em; text-wrap: balance; }
.heading { font-size: clamp(28px, 3.3vw, 48px); font-weight: 400; line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
.heading-xs { font-size: clamp(21px, 2vw, 27px); font-weight: 400; line-height: 1.3; letter-spacing: -.02em; }
.lead { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.5; color: var(--mist); max-width: 34em; }
.body { font-size: 18px; line-height: 1.65; color: var(--bone); max-width: 30em; }
.small { font-size: 14px; line-height: 1.6; font-weight: 400; color: var(--ash); }
.label { font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: .025em; color: var(--saffron); }
.num { font-variant-numeric: tabular-nums; margin-right: .7em; }
.latin { color: var(--ash); letter-spacing: -.03em; }

.pill {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  background: var(--iris); color: var(--bone); border-radius: var(--radius);
  font-size: 15px; font-weight: 600; letter-spacing: .025em;
  transition: transform .2s var(--ease), background-color .2s;
}
.pill:hover { background: #8f66ff; transform: translateY(-1px); }
.pill:active { transform: translateY(0); }

/* 全页背景：一层稀疏的小三角，随滚动错位，靠近指针的会亮起来并连成线 */
.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.skip { position: fixed; left: 16px; top: -80px; z-index: 50; background: var(--bone); color: var(--void); padding: 10px 16px; border-radius: 12px; font-weight: 400; }
.skip:focus { top: 16px; }

/* —— 顶栏 —— */
.nav { width: var(--page); margin: 0 auto; height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mark { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; letter-spacing: .025em; }
.tri { width: 22px; height: 22px; color: var(--iris); }
.nav nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); font-size: 15px; font-weight: 400; color: var(--ash); }
.nav nav a { padding: 12px 0; transition: color .2s; }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--bone); }

/* —— 首页首屏 —— */
.hero {
  width: var(--page); margin: 0 auto; min-height: calc(100svh - 96px);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 4vw, 60px);
  padding-bottom: 48px;
}
.hero-copy { display: grid; gap: 30px; justify-items: start; position: relative; z-index: 1; }
.hero-copy .display { margin-top: -6px; font-size: clamp(34px, 5.2vw, 78px); }
.hero-copy .display span { white-space: nowrap; }
.sky { position: relative; align-self: stretch; min-height: min(72vh, 680px); display: grid; grid-template-rows: 1fr auto; margin-right: calc(var(--gutter) * -1); }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-ui { grid-row: 2; position: relative; display: grid; gap: 14px; padding-right: var(--gutter); }
.sky-picker { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 16px; font-weight: 400; color: var(--ash); }
.sky-picker a { position: relative; padding: 8px 0; transition: color .25s; white-space: nowrap; }
.sky-picker a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--saffron); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.sky-picker a.is-on::after { transform: scaleX(1); }
.sky-picker a:hover, .sky-picker a.is-on { color: var(--bone); }
.sky-caption { min-height: 2.4em; max-width: 32em; }

/* —— 作品列表 —— */
.works, .why, .approach, .about, .closing, .case > *, .foot { width: var(--page); margin-inline: auto; }
.works { padding-top: var(--gap); display: grid; gap: var(--gap); }
.section-head { display: grid; gap: 24px; }
.work { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.work.is-flip .work-media { order: 2; }
.work-media { display: block; border-radius: var(--radius); overflow: hidden; background: #000; }
.work-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .7s var(--ease), opacity .4s; }
.work-media:hover img, .work-media:focus-visible img { transform: scale(1.025); }
.work-copy { display: grid; gap: 18px; justify-items: start; }
.work-copy .heading-lg a { transition: color .2s; }
.work:has(.work-media:hover) .heading-lg a, .work-copy .heading-lg a:hover { color: var(--saffron); }

/* —— 关于与结尾 —— */
/* 为什么是我：两句话，安静地放在首屏之后 */
.why { padding-top: calc(var(--gap) * .5); display: grid; gap: 18px; }
.why .heading { max-width: none; text-wrap: balance; }
.why .lead { max-width: 34em; }

/* 处理 AI 不确定的四个做法 */
.approach { padding-top: var(--gap); display: grid; gap: clamp(36px, 5vw, 60px); }
.approach-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 42px); list-style: none; }
.approach-list li { display: grid; gap: 12px; align-content: start; }
.approach-list h3, .about-grid h3 { text-wrap: balance; }
.approach-list .body { color: var(--mist); }
.approach-list .small a { color: var(--saffron); }
.approach-list .small a:hover { color: var(--bone); }

.about { padding-top: var(--gap); display: grid; gap: clamp(36px, 5vw, 60px); }
.about-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); }
.about-grid > div { display: grid; gap: 12px; align-content: start; }
.about-grid .body { color: var(--mist); }
.closing { padding-top: var(--gap); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.closing > div { display: grid; gap: 24px; }
.closing .body { color: var(--mist); }
.contact { display: grid; gap: 6px; margin-top: 6px; }
.contact div { display: flex; gap: 18px; align-items: baseline; }
.contact dt { width: 3em; font-size: 14px; font-weight: 400; color: var(--ash); }
.contact dd { font-size: 18px; font-weight: 400; color: var(--bone); user-select: all; }
.contact a:hover { color: var(--saffron); }
.demos { display: grid; gap: 6px; }
.demos li { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0; }
.demos a { display: grid; gap: 2px; }
.demo-title { font-size: clamp(21px, 2vw, 27px); font-weight: 400; letter-spacing: -.02em; transition: color .2s; }
.demo-host { font-size: 14px; font-weight: 400; color: var(--ash); }
.demos a:hover .demo-title { color: var(--saffron); }
.demos img { width: 72px; height: 72px; border-radius: 10px; background: #fff; padding: 4px; }
.foot { padding: var(--gap) 0 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; font-size: 13px; font-weight: 400; color: var(--ash); }
.foot p:last-child { display: flex; gap: 24px; }
.foot a:hover { color: var(--bone); }

/* —— 案例页 —— */
.case { display: grid; gap: var(--gap); padding-top: 12px; }
.case-hero { display: grid; gap: 24px; }
.crumb { display: flex; gap: 24px; justify-content: space-between; margin-bottom: clamp(24px, 4vw, 60px); }
.crumb a::before { content: "‹"; margin-right: .5em; }
.crumb a:hover { color: var(--bone); }
.case-hero .heading-lg { max-width: 13em; }
.case-facts { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(18px, 3vw, 36px); }
.question { font-size: clamp(21px, 2vw, 27px); line-height: 1.45; letter-spacing: -.02em; font-weight: 300; }
.meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 30px; }
.meta dt { font-size: 14px; font-weight: 400; color: var(--ash); margin-bottom: 6px; }
.meta dd { font-size: 16px; line-height: 1.5; font-weight: 400; }
.case-facts .actions { grid-column: 1 / -1; }
.case-cover { margin-top: clamp(18px, 3vw, 36px); display: grid; gap: 14px; }
.case-cover img { width: 100%; border-radius: var(--radius); }
.case-cover figcaption { max-width: 46em; }

.chapter { display: grid; gap: clamp(30px, 4vw, 54px); }
.chapter-head { display: grid; gap: 18px; }
.chapter-head .heading { max-width: 16em; }

/* 流程图 */
.flow { display: grid; gap: 24px; }
.flow-scroll { overflow-x: auto; padding-bottom: 6px; }
.flow-svg { display: block; width: 100%; min-width: 1040px; height: auto; overflow: visible; }
.fl-node rect { fill: #000; stroke: #5c5c5c; stroke-width: 1.2; }
.fl-node text { fill: var(--mist); font-size: 15px; font-weight: 400; }
.fl-node.is-you rect { stroke: var(--bone); } .fl-node.is-you text { fill: var(--bone); }
.fl-node.is-ai rect { stroke: #a98bff; } .fl-node.is-ai text { fill: #c9b8ff; }
.fl-node.is-alt rect { stroke: var(--ash); stroke-dasharray: 5 5; }
.fl-edge { stroke: var(--ash); stroke-width: 1.2; fill: none; }
.fl-edge.is-alt { stroke-dasharray: 5 5; }
.fl-cap, .fl-note, .fl-delta { fill: var(--ash); font-size: 14px; font-weight: 300; }
.fl-num { fill: var(--bone); font-size: 30px; font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fl-num.is-changed, .fl-delta { fill: var(--saffron); }
.fl-track { stroke: #3d3d3d; stroke-width: 1; }
.flow-legend { display: flex; flex-wrap: wrap; gap: 8px 30px; list-style: none; font-size: 13px; font-weight: 400; color: var(--ash); }
.flow-legend li { display: flex; align-items: center; gap: 8px; }
.flow-legend i { width: 18px; height: 12px; border-radius: 4px; border: 1.2px solid #5c5c5c; }
.flow-legend .is-you i { border-color: var(--bone); } .flow-legend .is-ai i { border-color: #a98bff; } .flow-legend .is-alt i { border-style: dashed; border-color: var(--ash); }

.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); }
.notes.count-1 { grid-template-columns: minmax(0, 30em); }
.notes > div { display: grid; gap: 12px; align-content: start; }
.notes .body { color: var(--mist); }

.source { font-size: 14px; font-weight: 400; color: var(--ash); max-width: 46em; }
.source summary { cursor: pointer; width: fit-content; padding: 6px 0; list-style: none; transition: color .2s; }
.source summary::-webkit-details-marker { display: none; }
.source summary::before { content: "+"; display: inline-block; width: 1.2em; color: var(--saffron); }
.source[open] summary::before { content: "–"; }
.source summary:hover { color: var(--bone); }
.source p { padding: 6px 0 0 1.2em; line-height: 1.7; }

/* —— 步骤播放器 —— */
.player { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.player-rail { display: grid; gap: 24px; align-content: start; position: sticky; top: 24px; }
.steps { display: grid; gap: 2px; }
.steps button {
  display: flex; align-items: baseline; gap: 2px; width: 100%; text-align: left;
  padding: 8px 0; font-size: 18px; font-weight: 400; color: var(--ash); transition: color .2s, transform .3s var(--ease);
}
.steps button .num { font-size: 13px; width: 2em; margin: 0; color: inherit; opacity: .7; }
.steps button:hover { color: var(--mist); }
.steps button[aria-selected="true"] { color: var(--bone); transform: translateX(6px); }
.steps button[aria-selected="true"] .num { color: var(--saffron); opacity: 1; }
.stats { display: flex; flex-wrap: wrap; gap: 12px 36px; }
.stats dt { font-size: 14px; font-weight: 400; color: var(--ash); }
.stats dd { font-size: clamp(34px, 3.6vw, 48px); font-weight: 400; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; transition: color .5s; }
.stats dd.is-changed { color: var(--saffron); }
.stats small { font-size: 14px; letter-spacing: 0; color: var(--ash); margin-left: 6px; }
.step-text { color: var(--mist); min-height: 4.95em; }
.player-ctl { display: flex; align-items: center; gap: 14px; }
.player-ctl button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--bone); background: #ffffff14; transition: background-color .2s, opacity .2s; }
.player-ctl button:hover:not(:disabled) { background: #ffffff29; }
.player-ctl button:disabled { opacity: .3; cursor: default; }
.player-ctl svg { width: 22px; height: 22px; }
.player-ctl [data-count] { min-width: 4.2em; text-align: center; font-variant-numeric: tabular-nums; }
.player-ctl .play { width: auto; padding: 0 20px 0 14px; border-radius: 24px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 400; margin-right: 6px; }
.player-ctl .play .i-pause, .player-ctl .play[aria-pressed="true"] .i-play { display: none; }
.player-ctl .play[aria-pressed="true"] .i-pause { display: inline; }
.player-ctl .play[aria-pressed="true"] { background: var(--bone); color: var(--void); }
.player-ctl .play[aria-pressed="true"]:hover { background: var(--mist); }
.stage-progress { position: absolute; left: 0; bottom: 0; z-index: 2; height: 3px; width: 100%; background: var(--saffron); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.stage.is-playing .stage-progress { animation: stage-progress var(--step-ms, 2600ms) linear forwards; }
@keyframes stage-progress { to { transform: scaleX(1); } }

.stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: #050505; isolation: isolate; }
.stage .frame { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.stage .frame.is-active { opacity: 1; }
.stage .frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.stage .backdrop { position: absolute; inset: -6%; z-index: -1; }
.stage .backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(.42) saturate(.85); }
.stage.has-backdrop { aspect-ratio: 6 / 5; }
.stage .frame.is-panel { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 4%; transform: scale(.985); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.stage .frame.is-panel.is-active { transform: none; }
.stage .frame.is-panel img { width: auto; height: auto; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 18px; }
.stage-zoom {
  position: absolute; right: 16px; bottom: 16px; min-height: 40px; padding: 0 16px; border-radius: 20px;
  background: #000000b8; color: var(--bone); font-size: 13px; font-weight: 400; opacity: 0; transition: opacity .2s;
}
.stage:hover .stage-zoom, .stage:focus-within .stage-zoom, .stage-zoom:focus-visible { opacity: 1; }
@media (hover: none) { .stage-zoom { opacity: 1; } }

.player.is-switch { grid-template-columns: 1fr; gap: 24px; }
.player.is-switch .player-rail { position: static; grid-template-columns: minmax(0, 1fr); gap: 14px; order: 0; }
.player.is-switch .steps { display: flex; flex-wrap: wrap; gap: 4px 30px; }
.player.is-switch .steps button { width: auto; padding: 8px 0; transform: none; position: relative; }
.player.is-switch .steps button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--saffron); border-radius: 2px; }
.player.is-switch .step-text { min-height: 1.65em; max-width: 40em; }

/* 整屏截图的步骤：画面占满版心，步骤横排在上 */
.player.is-wide { grid-template-columns: 1fr; gap: 24px; }
.player.is-wide .player-rail { position: static; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 36px; align-items: end; }
.player.is-wide .steps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 30px; }
.player.is-wide .steps button { width: auto; transform: none; position: relative; }
.player.is-wide .steps button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--saffron); border-radius: 2px; }
.player.is-wide .stats { grid-column: 1 / -1; gap: 12px 60px; }
.player.is-wide .step-text { grid-column: 1; min-height: 1.65em; max-width: 44em; }
.player.is-wide .player-ctl { grid-column: 2; }

/* —— 前后对比 —— */
.compare { display: grid; gap: 24px; }
.compare-stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; --pos: 50%; touch-action: pan-y; }
.compare-stage picture { position: absolute; inset: 0; }
.compare-stage img { width: 100%; height: 100%; object-fit: cover; }
.cmp-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp-tag { position: absolute; top: 16px; padding: 6px 14px; border-radius: 20px; background: #000000b8; font-size: 13px; font-weight: 400; pointer-events: none; }
.cmp-tag.is-before { left: 16px; }
.cmp-tag.is-after { right: 16px; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--bone); pointer-events: none; }
.cmp-handle svg { position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--void); z-index: 1; }
.cmp-handle svg:first-child { right: 3px; }
.cmp-handle svg:last-child { left: 3px; }
.cmp-handle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--bone); }
.compare-stage input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare-stage:has(input:focus-visible) .cmp-handle::before { outline: 2px solid var(--saffron); outline-offset: 4px; }
.compare-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(28px, 4vw, 60px); }
.compare-text .body { color: var(--mist); }
.compare-text strong { color: var(--bone); margin-right: 1em; }

.video video { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius); background: #050505; }

.next { display: grid; gap: 14px; justify-items: start; }
.next .display { transition: color .2s; }
.next .display:hover { color: var(--saffron); }
.next .body { color: var(--mist); }

/* —— 大图 —— */
.zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000000f2; color: var(--bone); }
.zoom::backdrop { background: #000; }
.zoom-stage { width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; padding: 72px clamp(12px, 3vw, 48px) 36px; }
.zoom-stage img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 108px); border-radius: 12px; }
@media (max-width: 900px) { .zoom-stage { place-items: start; } .zoom-stage img { max-width: none; max-height: none; width: 220vw; } }
.zoom-close { position: fixed; top: 18px; right: 18px; z-index: 2; min-height: 44px; padding: 0 20px; border-radius: 22px; background: #ffffff1f; font-size: 14px; font-weight: 400; }
.zoom-close:hover { background: #ffffff38; }

/* —— 窄屏 —— */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 12px; }
  .sky { min-height: 0; grid-template-rows: 74vw auto; margin-right: 0; order: -1; }
  .sky canvas { inset: 0 -6% auto; width: 112%; height: 74vw; }
  .sky-ui { padding-right: 0; }
  .work, .closing, .case-facts, .player { grid-template-columns: 1fr; }
  .work.is-flip .work-media { order: 0; }
  .about-grid, .notes, .compare-text { grid-template-columns: 1fr; }
  .approach-list { grid-template-columns: 1fr 1fr; }
  .meta { grid-template-columns: 1fr 1fr; }
  .player-rail { position: static; order: 2; }
  .player .stage { order: 1; }
  .player:not(.is-switch) .steps { display: flex; overflow-x: auto; gap: 4px 22px; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .player:not(.is-switch) .steps button { white-space: nowrap; width: auto; transform: none; font-size: 16px; }
  .player:not(.is-switch) .steps button .num { width: auto; margin-right: .5em; }
  .player.is-switch .player-rail { order: 0; }
  .step-text { min-height: 4.95em; }
  .player.is-wide .player-rail { grid-template-columns: minmax(0, 1fr); }
  .player.is-wide .player-ctl { grid-column: 1; }
  .nav { height: 72px; }
}
@media (max-width: 520px) {
  body, .body { font-size: 17px; }
  .meta { grid-template-columns: 1fr; }
  .approach-list { grid-template-columns: 1fr; }
  .cmp-handle::before { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  @view-transition { navigation: none; }
}