/* ============================================================
   qmlink.xyz 首页样式 — 2026-10 改版
   保留原有深色画册审美（星空 / 山川湖海 / 宋体标题），
   新增：首屏自动演示舞台、工具区画布、关注光效、演示暂停控件。
   ============================================================ */

:root {
  --ink: #f2efe9;
  --muted: rgba(242, 239, 233, .62);
  --line: rgba(242, 239, 233, .3);
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --board-accent: rgba(94, 164, 244, .85);
  --design-accent: rgba(96, 226, 187, .85);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; }
body {
  background: #0a0c10;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(242, 239, 233, .85); color: #0a0c10; }

/* ===== 关注驱动的背景光（随场景缓慢过渡，不改变布局） ===== */
.glow-layer {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease, background 1.6s ease;
  background: radial-gradient(58% 46% at 22% 30%, rgba(94, 164, 244, .14), transparent 72%);
}
body[data-scene="board"] .glow-layer,
body[data-scene="flowchart"] .glow-layer {
  opacity: 1;
  background: radial-gradient(58% 46% at 22% 30%, rgba(94, 164, 244, .16), transparent 72%);
}
body[data-scene="interface"] .glow-layer {
  opacity: 1;
  background: radial-gradient(58% 46% at 78% 30%, rgba(96, 226, 187, .15), transparent 72%);
}
body[data-scene="gallery"] .glow-layer { opacity: 0; }

/* ===== 首屏 ===== */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,12,16,.46) 0%, rgba(10,12,16,.16) 40%, rgba(10,12,16,.68) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: min(920px, 94vw);
  text-align: center;
  padding: 0 12px;
}
.overline {
  font-size: 11px;
  letter-spacing: .52em;
  text-indent: .52em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(16px, 3vh, 28px);
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 5.6vw, 66px);
  letter-spacing: .14em;
  text-indent: .14em;
}
.hero-rule {
  width: 64px;
  height: 1px;
  background: var(--line);
  margin: clamp(16px, 3vh, 30px) auto;
}
.hero-sub {
  font-family: var(--serif);
  font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: .34em;
  text-indent: .34em;
  color: rgba(242, 239, 233, .82);
  text-shadow: 0 1px 14px rgba(10, 12, 16, .8), 0 0 4px rgba(10, 12, 16, .5);
}
.hero h1 { text-shadow: 0 2px 24px rgba(10, 12, 16, .55); }
.overline { text-shadow: 0 1px 10px rgba(10, 12, 16, .7); }
.hero-actions {
  margin-top: clamp(18px, 3.2vh, 32px);
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== 通用按钮（真实入口，保持 ≥44px 触达高度） ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .16em;
  text-indent: .16em;
  text-decoration: none;
  color: var(--ink);
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
.btn i { font-style: normal; transition: transform .35s ease; }
.btn:hover i { transform: translateX(4px); }
.btn-solid { background: var(--ink); color: #0a0c10; }
.btn-solid:hover { background: #fff; }
.btn-line { border: 1px solid rgba(242, 239, 233, .38); }
.btn-line:hover { border-color: var(--ink); background: rgba(242, 239, 233, .08); }
.btn:focus-visible { outline: 2px solid rgba(242, 239, 233, .55); outline-offset: 3px; }

/* ===== 首屏演示舞台 ===== */
.stage-wrap {
  margin-top: clamp(18px, 3.2vh, 34px);
  margin-left: auto;
  margin-right: auto;
  width: min(760px, 92vw);
}
.stage {
  position: relative;
  width: 100%;
  height: clamp(220px, 33vh, 330px);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(34, 44, 62, .42), rgba(10, 12, 16, .18) 62%),
    linear-gradient(180deg, rgba(16, 20, 28, .52), rgba(10, 12, 16, .44));
  border: 1px solid rgba(242, 239, 233, .1);
  contain: layout paint;
}
.stage { transition: opacity 1.2s ease; }
.stage.is-dim { opacity: .38; }
.st-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.st-link {
  fill: none;
  stroke: rgba(242, 239, 233, .34);
  stroke-width: 1.2;
}
.st-link.is-dash { stroke-dasharray: 5 6; }
.st-arrow { fill: rgba(242, 239, 233, .55); }
.st-dust { position: absolute; inset: 0; }
.st-dust i {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(242, 239, 233, .8);
  opacity: var(--po, .5);
  animation: dustFloat var(--pd, 4s) ease-in-out var(--pdelay, 0s) infinite alternate;
}
@keyframes dustFloat {
  from { transform: translateY(0); opacity: calc(var(--po, .5) * .35); }
  to { transform: translateY(-12px); opacity: var(--po, .5); }
}

/* 舞台节点（引擎绝对定位：left/top 由 transform 控制） */
.st-node {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(242, 239, 233, .92);
  will-change: transform, opacity;
  contain: layout style;
  transition:
    width .45s ease, height .45s ease, border-radius .45s ease,
    background-color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.st-node .st-label { pointer-events: none; }
.st-node.st-measuring { transition: none !important; }
.st-node .st-label.is-flip { animation: labelFlip .42s ease; }
@keyframes labelFlip {
  0% { opacity: 0; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

.st-node[data-kind="dot"] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(242, 239, 233, .92);
  box-shadow: 0 0 14px rgba(242, 239, 233, .45);
  font-size: 0;
}
.st-node[data-kind="core"] {
  width: 132px;
  height: 46px;
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--serif);
  background: linear-gradient(180deg, rgba(30, 38, 52, .88), rgba(16, 20, 28, .88));
  border: 1px solid rgba(242, 239, 233, .42);
  box-shadow: 0 4px 22px rgba(0, 0, 0, .4);
}
.st-node[data-kind="branch"] {
  width: 112px;
  height: 40px;
  border-radius: 9px;
  background: rgba(22, 28, 40, .82);
  border: 1px solid rgba(242, 239, 233, .3);
}
.st-node[data-kind="leaf"] {
  width: 96px;
  height: 34px;
  border-radius: 8px;
  font-size: 12px;
  color: rgba(242, 239, 233, .82);
  background: rgba(18, 24, 34, .78);
  border: 1px solid rgba(242, 239, 233, .22);
}
.st-node[data-kind="pill"] {
  width: 104px;
  height: 38px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(22, 28, 40, .85);
  border: 1px solid rgba(242, 239, 233, .3);
}
.st-node[data-kind="nav"] {
  width: 320px;
  height: 34px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(242, 239, 233, .85);
  background: rgba(24, 30, 42, .85);
  border: 1px solid rgba(242, 239, 233, .25);
}
.st-node[data-kind="card"] {
  width: 150px;
  height: 64px;
  border-radius: 12px;
  font-size: 12px;
  color: rgba(242, 239, 233, .85);
  background: linear-gradient(165deg, rgba(34, 42, 58, .85), rgba(18, 22, 32, .85));
  border: 1px solid rgba(242, 239, 233, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.st-node[data-kind="btn"] {
  width: 88px;
  height: 36px;
  border-radius: 10px;
  font-size: 12px;
  color: #0a0c10;
  background: rgba(242, 239, 233, .9);
  border: 1px solid rgba(242, 239, 233, .9);
}
.st-node[data-kind="tag"] {
  width: 100px;
  height: 24px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(242, 239, 233, .6);
  background: rgba(16, 20, 28, .55);
  border: 1px dashed rgba(242, 239, 233, .32);
}

/* 组件边界与设计标注（Penpot 区与首屏完成态使用） */
.st-node.is-outlined::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px dashed var(--design-accent);
  border-radius: 15px;
  opacity: .75;
  animation: outlineIn .5s ease both;
  pointer-events: none;
}
@keyframes outlineIn {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: .75; transform: scale(1); }
}
.st-node[data-anno]::after {
  content: attr(data-anno);
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: .08em;
  white-space: nowrap;
  color: rgba(96, 226, 187, .92);
  background: rgba(10, 14, 16, .72);
  border: 1px solid rgba(96, 226, 187, .4);
  border-radius: 6px;
  animation: annoIn .45s ease both;
  pointer-events: none;
}
@keyframes annoIn {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
/* Drawnix 区用青蓝色标注，区别于 Penpot 的青绿 */
[data-tone="board"] .st-node.is-outlined::before { border-color: var(--board-accent); }
[data-tone="board"] .st-node[data-anno]::after { color: rgba(158, 196, 246, .95); border-color: rgba(94, 164, 244, .45); }

/* 组件标注：顶部导航类节点的标注显示在下方，避免溢出舞台顶边 */
.st-node[data-anno][data-kind="nav"]::after {
  top: auto;
  bottom: -26px;
}

/* 舞台徽标与名称 */
.stage-badge {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: .24em;
  color: rgba(242, 239, 233, .62);
  pointer-events: none;
}
.stage-badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--board-accent);
  animation: badgePulse 2.6s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
.stage.is-paused .st-dust i,
.stage.is-offstage .st-dust i,
.stage.is-paused .stage-badge i,
.stage.is-offstage .stage-badge i { animation-play-state: paused; }

/* 无 JS / 数据不可用时的静态完成态 */
.static-stage {
  position: absolute;
  inset: 0;
}
.static-stage svg.static-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.static-links line {
  stroke: rgba(242, 239, 233, .3);
  stroke-width: 1;
}
.s-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(242, 239, 233, .9);
  background: rgba(22, 28, 40, .82);
  border: 1px solid rgba(242, 239, 233, .3);
  border-radius: 9px;
  white-space: nowrap;
}
.s-node.s-core {
  font-family: var(--serif);
  font-size: 14px;
  border-color: rgba(242, 239, 233, .42);
  background: linear-gradient(180deg, rgba(30, 38, 52, .88), rgba(16, 20, 28, .88));
}

.scroll-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--muted);
}
.scroll-hint::after {
  content: "";
  width: 1px;
  height: 36px;
  background: var(--ink);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .12; }
  50% { opacity: .85; }
}

/* ===== 全幅图片层与图版 ===== */
.bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero .bg-img { object-position: center 38%; }

.plate {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: flex-end;
}
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,12,16,.04) 42%, rgba(10,12,16,.74) 100%);
}
.plate-caption {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(24px, 7vw, 110px) clamp(44px, 9vh, 96px);
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 4vw, 56px);
}
.plate-no {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--muted);
  padding-top: 6px;
}
.plate h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 54px);
  letter-spacing: .34em;
}
.plate-en {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--muted);
}
.plate-verse {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: clamp(12px, 1.3vw, 14px);
  letter-spacing: .24em;
  color: var(--muted);
}

/* ===== 工具区（Drawnix / Penpot）===== */
.tool-section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  padding: 72px clamp(24px, 6vw, 100px);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(24, 32, 46, .5), transparent 70%),
    #0a0c10;
  overflow: hidden;
}
.tool-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(360px, 7fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.tool-info { position: relative; z-index: 2; }
.tool-logo {
  width: 60px;
  height: auto;
  color: var(--ink);
  opacity: .95;
}
.tool-no {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--muted);
  margin-bottom: 18px;
}
.tool-name {
  margin-top: 22px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: .2em;
}
.tool-tag {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: .22em;
  color: var(--muted);
  line-height: 1.9;
}
.tool-note {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(242, 239, 233, .48);
}
.tool-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.tool-cross {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(242, 239, 233, .12);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--muted);
}
.tool-cross a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 239, 233, .35);
  padding-bottom: 2px;
  transition: border-color .3s ease;
}
.tool-cross a:hover { border-color: var(--ink); }

.tool-canvas-wrap { position: relative; min-width: 0; }
.tool-canvas {
  position: relative;
  width: 100%;
  height: clamp(300px, 46vh, 430px);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 32% 18%, rgba(38, 48, 66, .55), rgba(12, 15, 20, .88) 78%);
  border: 1px solid rgba(242, 239, 233, .12);
  contain: layout paint;
}
#s-penpot .tool-canvas {
  background:
    radial-gradient(80% 90% at 68% 18%, rgba(32, 52, 50, .5), rgba(11, 15, 18, .88) 78%);
}
.tool-canvas .stage-badge { left: 16px; bottom: 12px; }
#s-penpot .stage-badge i { background: var(--design-accent); }

/* 关注状态下的区域强调（信息密度与推荐变化，不移动任何控件） */
body[data-scene="board"] #s-draw .tool-info .tool-tag,
body[data-scene="flowchart"] #s-draw .tool-info .tool-tag { color: rgba(242, 239, 233, .78); }
body[data-scene="board"] #s-draw .tool-canvas { border-color: rgba(94, 164, 244, .4); }
body[data-scene="flowchart"] #s-draw .tool-canvas { border-color: rgba(94, 164, 244, .4); }
body[data-scene="interface"] #s-penpot .tool-canvas { border-color: rgba(96, 226, 187, .38); }
body[data-scene="interface"] #s-penpot .tool-info .tool-tag { color: rgba(242, 239, 233, .78); }

/* ===== 封底（页脚）===== */
footer {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  text-align: center;
  padding: 0 20px;
}
.end-title {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: .3em;
  text-indent: .3em;
}
.end-rule {
  width: 48px;
  height: 1px;
  background: var(--line);
  margin-top: 28px;
}
.end-icp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(36px, 7vh, 64px);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}
footer a { color: inherit; text-decoration: none; }
footer a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ===== 左侧导航条 ===== */
.rail {
  position: fixed;
  left: clamp(20px, 2.6vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.rail .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(242, 239, 233, .35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: background .3s ease, box-shadow .3s ease, opacity .6s ease, transform .6s cubic-bezier(.3, 1.12, .32, 1);
}
.rail a.active .dot {
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(242, 239, 233, .16);
}
.rail a:hover .dot,
.rail a:focus-visible .dot { opacity: 0; transform: scale(.4); }
.rail .label {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .12em;
  text-indent: .12em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .5s ease;
}
.rail .label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .06) 48%, rgba(255, 255, 255, .1));
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    inset 0 1.5px 1px rgba(255, 255, 255, .55),
    inset 0 -1.5px 1px rgba(255, 255, 255, .12),
    inset 0 0 14px rgba(255, 255, 255, .07);
  -webkit-mask-image: radial-gradient(circle, #000 68%, transparent 100%);
  mask-image: radial-gradient(circle, #000 68%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-size: 8px 10px;
  mask-size: 8px 10px;
  opacity: 0;
  transition:
    -webkit-mask-size .9s cubic-bezier(.38, .2, .3, 1),
    mask-size .9s cubic-bezier(.38, .2, .3, 1),
    opacity .5s ease;
  pointer-events: none;
}
.rail a:hover .label,
.rail a:focus-visible .label {
  opacity: 1;
  transition: opacity .3s ease;
}
.rail a:hover .label::before,
.rail a:focus-visible .label::before {
  opacity: 1;
  animation: spread 1.7s cubic-bezier(.28, .62, .32, 1) .1s forwards;
}
@keyframes spread {
  from { -webkit-mask-size: 8px 10px; mask-size: 8px 10px; }
  to { -webkit-mask-size: 240px 240px; mask-size: 240px 240px; }
}
.rail .label::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 74%);
  opacity: 0;
  transform: scale(.2);
  pointer-events: none;
}
.rail a:hover .label::after,
.rail a:focus-visible .label::after {
  animation: ripple 1.6s cubic-bezier(.22, 1, .36, 1) .25s forwards;
}
@keyframes ripple {
  0% { opacity: .4; transform: scale(.3); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* ===== 演示暂停控件（轻量、可聚焦、不遮挡内容） ===== */
.demo-control {
  position: fixed;
  right: clamp(14px, 2.2vw, 28px);
  bottom: clamp(14px, 2.2vw, 28px);
  z-index: 60;
}
.demo-control button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(242, 239, 233, .22);
  background: rgba(14, 18, 24, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(242, 239, 233, .82);
  font-size: 12px;
  letter-spacing: .12em;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease;
}
.demo-control button:hover { border-color: rgba(242, 239, 233, .5); background: rgba(20, 26, 34, .78); }
.demo-control button:focus-visible { outline: 2px solid rgba(242, 239, 233, .55); outline-offset: 3px; }
.demo-control svg { width: 12px; height: 12px; fill: currentColor; }
.demo-control button[hidden] { display: none; }
.demo-control .ic-play { display: none; }
.demo-control button[aria-pressed="true"] .ic-pause { display: none; }
.demo-control button[aria-pressed="true"] .ic-play { display: block; }

/* ===== 调试面板（仅 ?debug=1 时出现） ===== */
.debug-panel {
  position: fixed;
  right: 12px;
  top: 12px;
  z-index: 80;
  max-width: 340px;
  padding: 10px 14px;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(242, 239, 233, .85);
  background: rgba(8, 10, 14, .82);
  border: 1px solid rgba(242, 239, 233, .2);
  border-radius: 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ===== 响应式 ===== */
@media (max-width: 900px), (hover: none) {
  .rail { display: none; }
}
@media (max-width: 900px) {
  .plate-caption { flex-direction: column; align-items: flex-start; gap: 12px; }
  .plate-no { padding-top: 0; }
  .tool-grid { grid-template-columns: 1fr; gap: 34px; }
  .tool-section { padding: 84px clamp(20px, 5vw, 40px); }
  .tool-canvas { height: clamp(260px, 34vh, 340px); }
}
@media (max-width: 640px) {
  .hero-inner { width: 96vw; }
  .hero h1 { letter-spacing: .1em; text-indent: .1em; }
  .hero-sub { letter-spacing: .2em; text-indent: .2em; }
  .hero-actions { gap: 10px; }
  .btn { padding: 0 20px; font-size: 12px; }
  .stage { height: clamp(200px, 27vh, 260px); border-radius: 14px; }
  .st-node[data-kind="nav"] { width: 210px; height: 30px; font-size: 10px; }
  .st-node[data-kind="core"] { width: 112px; height: 40px; font-size: 13px; }
  .st-node[data-kind="branch"] { width: 92px; height: 34px; font-size: 11px; }
  .st-node[data-kind="leaf"] { width: 82px; height: 30px; font-size: 10px; }
  .st-node[data-kind="pill"] { width: 88px; height: 34px; font-size: 10px; }
  .st-node[data-kind="card"] { width: 116px; height: 52px; font-size: 10px; }
  .st-node[data-kind="btn"] { width: 74px; height: 32px; font-size: 10px; }
  .st-node[data-kind="tag"] { width: 84px; height: 22px; font-size: 9px; }
  .st-node[data-anno]::after { font-size: 9px; top: -23px; }
  .tool-canvas { height: clamp(240px, 32vh, 320px); border-radius: 14px; }
  .s-node { font-size: 10px; padding: 6px 10px; }
  .scroll-hint { bottom: 20px; }
  .demo-control button { padding: 0 14px; }
  .demo-control .btn-pause-label { display: none; }
}
/* 窄屏横屏：保证舞台与入口同屏可见 */
@media (max-height: 520px) and (orientation: landscape) {
  .hero h1 { font-size: clamp(24px, 4.4vw, 34px); }
  .hero-rule { margin: 12px auto; }
  .overline { margin-bottom: 12px; }
  .hero-actions { margin-top: 12px; }
  .btn { min-height: 40px; }
  .stage-wrap { margin-top: 12px; width: min(560px, 80vw); }
  .stage { height: 150px; }
  .scroll-hint { display: none; }
}

/* ===== 减少动画偏好：静态完成态，关闭自动形态变换与大幅动效 ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage .st-dust,
  .scroll-hint::after { animation: none; }
  .stage-badge i { animation: none; }
  .st-node, .st-label { transition: none; animation: none; }
  .glow-layer { transition: none; }
}