:root {
  --ink: #020711;
  --ink-soft: #071325;
  --blue: #2453a4;
  --cyan: #61ddf5;
  --ice: #dffaff;
  --white: #f7fbff;
  --muted: #8aa1ba;
  --line: rgba(144, 203, 235, 0.2);
  --progress: 0;
  --sphere-opacity: 0;
  --motion-fast: 120ms;
  --motion-content: 300ms;
  --motion-hero: 600ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  color-scheme: dark;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--white); }
body { min-height: 100vh; overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 999;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  transition: top var(--motion-fast) linear;
}
.skip-link:focus { top: 16px; }

.screen-view, .mobile-view, .control-view { display: none; }
body[data-mode="screen"] .screen-view,
body[data-mode="mobile"] .mobile-view,
body[data-mode="control"] .control-view { display: block; }

.eyebrow {
  margin: 0;
  color: var(--cyan);
  font-family: "DIN Alternate", "Avenir Next Condensed", sans-serif;
  font-size: clamp(11px, 0.8vw, 15px);
  font-weight: 700;
  letter-spacing: 0.24em;
}

/* PC 大屏 */
.screen-view {
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: #020711;
}
.control-hotspot {
  align-items: center;
  background: rgba(2, 7, 17, 0.72);
  border: 1px solid rgba(132, 224, 245, 0.32);
  border-radius: 999px;
  color: rgba(227, 252, 255, 0.92);
  display: flex;
  font-size: 11px;
  height: 48px;
  justify-content: center;
  opacity: 0;
  padding: 0 17px;
  position: absolute;
  right: 18px;
  text-decoration: none;
  top: 14px;
  transform: translateY(-8px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), background 180ms linear;
  width: 94px;
  z-index: 30;
}
.control-hotspot:hover, .control-hotspot:focus-visible { opacity: 1; transform: translateY(0); }
.control-hotspot::before { content: ""; inset: -15px -15px auto auto; min-height: 78px; min-width: 124px; position: absolute; }
.control-hotspot:hover { background: rgba(11, 54, 76, 0.9); }
.screen-backdrop {
  background-color: #07111e;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  position: absolute;
  transform: none;
  z-index: -3;
}
.screen-view::after {
  background: rgba(1, 6, 14, 0.42);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}
.product-stage {
  height: min(75vh, 800px);
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 47%;
  transform: translate(-50%, -50%) scale(0.965);
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out);
  width: min(72vw, 1080px);
  z-index: 4;
}
.screen-view[data-step="2"] .product-stage,
.screen-view[data-step="3"] .product-stage,
.screen-view[data-step="4"] .product-stage,
.screen-view[data-step="5"] .product-stage,
.screen-view.is-revealed .product-stage {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.instrument-window {
  height: 82%;
  inset: 9% 0;
  left: 0;
  overflow: visible;
  position: absolute;
  top: 0;
  transform: scale(1);
  transition: opacity 850ms var(--ease-standard), transform 850ms var(--ease-standard);
  width: 100%;
  z-index: 2;
}
.instrument {
  height: 100%;
  left: 0;
  object-fit: contain;
  object-position: center;
  position: absolute;
  top: 0;
  transition: opacity 850ms var(--ease-standard), filter 850ms var(--ease-standard), transform 850ms var(--ease-standard);
  width: 100%;
}
.instrument-120,
.instrument-200,
.instrument-highlight { transform: none; }
.instrument-window-120 { opacity: 1; }
.instrument-window-200 { opacity: 0; transform: scale(0.97); }
.instrument-120 {
  filter:
    brightness(0.92)
    saturate(0.88)
    drop-shadow(0 26px 52px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 calc(5px + 16px * var(--progress)) rgba(83, 229, 255, calc(0.14 + var(--progress) * 0.72)))
    drop-shadow(0 0 calc(2px + 7px * var(--progress)) rgba(224, 253, 255, calc(var(--progress) * 0.9)));
  opacity: 1;
}
.instrument-highlight {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 8px rgba(222, 253, 255, 0.98))
    drop-shadow(0 0 24px rgba(65, 226, 255, 0.88))
    drop-shadow(0 0 54px rgba(22, 139, 255, 0.62));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
@keyframes silhouette-breathe {
  from { opacity: 0.72; transform: scale(0.995); }
  to { opacity: 1; transform: scale(1.01); }
}
.instrument-200 {
  filter: brightness(0.8) saturate(0.7) drop-shadow(0 0 0 rgba(85, 224, 255, 0));
  opacity: 0;
  transform: none;
}
.screen-view.is-revealed .instrument-window-120 {
  opacity: 0;
  transform: scale(1.035);
}
.screen-view.is-revealed .instrument-window-200 {
  opacity: 1;
  transform: scale(1);
}
.screen-view.is-revealed .instrument-120 {
  filter: brightness(1.75) saturate(0.4) blur(10px);
  transform: none;
}
.screen-view.is-revealed .instrument-200 {
  filter: brightness(1) saturate(1) drop-shadow(0 24px 46px rgba(0, 0, 0, 0.38));
  opacity: 1;
  transform: none;
}
.screen-view[data-step="3"] .instrument-highlight-120 {
  opacity: calc(var(--progress) * 0.26);
}
.screen-view[data-step="4"] .instrument-highlight-120 {
  animation: silhouette-breathe 1.6s ease-in-out infinite alternate;
  opacity: 0.32;
}
.screen-view.is-revealed .instrument-highlight-200 {
  animation: none;
  opacity: 0;
}
.screen-view.is-revealed .energy-node,
.screen-view.is-revealed .impact-ripple { display: none; }

/* Evolution choreography: sphere fallout, spiral rise, descending arcs, convergence, blink, bloom. */
.screen-view.is-evolving .instrument-window {
  transition: none;
  will-change: opacity, transform;
}
.screen-view.is-evolving .instrument-window-120 {
  animation: evolution-old 14.2s step-end both;
}
.screen-view.is-evolving .instrument-window-200 {
  animation: evolution-new 14.2s step-end both;
  transform: scale(1);
}
.screen-view.is-evolving .instrument-200 {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 7px rgba(234, 254, 255, 1))
    drop-shadow(0 0 25px rgba(70, 227, 255, 0.96))
    drop-shadow(0 0 58px rgba(31, 121, 255, 0.72));
  opacity: 1;
}
.screen-view.is-evolving .instrument-highlight {
  opacity: 0;
}
.screen-view.is-evolving .instrument-highlight-120 {
  animation: evolution-white-overlay 14.2s linear both;
}
.screen-view.is-evolving .instrument-120 {
  animation: evolution-pulse-old 14.2s linear both;
}
.screen-view.is-evolving .instrument-200 {
  animation: evolution-pulse-new 14.2s cubic-bezier(0.22, 0.7, 0.22, 1) both;
}

@keyframes evolution-old {
  0%, 55.62%, 59.86%, 63.58%, 66.76%, 69.43%, 71.69%, 73.51%, 75%, 76.19%, 77.18%, 77.95%, 78.52%, 78.86% { opacity: 1; }
  55.63%, 59.85%, 63.59%, 66.75%, 69.44%, 71.68%, 73.52%, 74.99%, 76.2%, 77.17%, 77.96%, 78.51%, 78.87%, 100% { opacity: 0; }
}
@keyframes evolution-new {
  0%, 55.62%, 59.86%, 63.58%, 66.76%, 69.43%, 71.69%, 73.51%, 75%, 76.19%, 77.18%, 77.95%, 78.52%, 78.86% { opacity: 0; }
  55.63%, 59.85%, 63.59%, 66.75%, 69.44%, 71.68%, 73.52%, 74.99%, 76.2%, 77.17%, 77.96%, 78.51%, 78.87%, 100% { opacity: 1; }
}
@keyframes evolution-pulse-old {
  0%, 14.8% {
    filter:
      brightness(0.92) saturate(0.88) invert(0)
      drop-shadow(0 26px 52px rgba(0, 0, 0, 0.46))
      drop-shadow(0 0 21px rgba(83, 229, 255, 0.86))
      drop-shadow(0 0 0 rgba(31, 121, 255, 0));
    transform: scale(1);
  }
  24.3% {
    filter:
      brightness(0.72) saturate(0.35) invert(0.42)
      drop-shadow(0 0 16px rgba(224, 253, 255, 0.82))
      drop-shadow(0 0 38px rgba(70, 227, 255, 0.8))
      drop-shadow(0 0 46px rgba(31, 121, 255, 0.36));
    transform: scale(1);
  }
  33.8%, 100% {
    filter:
      brightness(0) saturate(0) invert(1)
      drop-shadow(0 0 7px rgba(234, 254, 255, 1))
      drop-shadow(0 0 25px rgba(70, 227, 255, 0.96))
      drop-shadow(0 0 58px rgba(31, 121, 255, 0.72));
    transform: scale(1);
  }
}
@keyframes evolution-white-overlay {
  0%, 14.8% { opacity: 0; }
  24.3% { opacity: 0.48; }
  33.8%, 100% { opacity: 1; }
}
@keyframes evolution-pulse-new {
  0%, 85.9% {
    filter:
      brightness(0) invert(1)
      drop-shadow(0 0 7px rgba(234, 254, 255, 1))
      drop-shadow(0 0 25px rgba(70, 227, 255, 0.96))
      drop-shadow(0 0 58px rgba(31, 121, 255, 0.72));
    transform: scale(1);
  }
  87.3% {
    filter: brightness(2.4) saturate(0.35) drop-shadow(0 0 52px rgba(103, 233, 255, 0.9));
    transform: scale(1);
  }
  91.5%, 100% {
    filter: brightness(1.04) saturate(1.04) drop-shadow(0 0 40px rgba(85, 224, 255, 0.42));
    transform: scale(1);
  }
}

.evolution-particles {
  height: 100%;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 120ms linear;
  width: 100%;
  z-index: 7;
}
.screen-view.is-evolving .evolution-particles { opacity: 1; }
.energy-sphere,
.energy-sphere-front,
.impact-layer {
  aspect-ratio: 1;
  height: 110%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.energy-sphere {
  border-radius: 50%;
  display: block;
  filter: none;
  opacity: 0;
  transition: opacity 700ms linear;
  z-index: 1;
}
.energy-sphere.is-css-fallback {
  background: radial-gradient(
    circle at 34% 27%,
    rgba(132, 235, 255, calc(var(--sphere-progress) * 0.24)),
    rgba(27, 103, 226, calc(var(--sphere-progress) * 0.24))
  );
  box-shadow: none;
}
.energy-sphere-front {
  background: radial-gradient(circle at 34% 27%, rgba(181, 246, 255, 0.105), rgba(25, 110, 225, 0.105));
  -webkit-backdrop-filter: brightness(0.91) saturate(1.34) contrast(1.06);
  backdrop-filter: brightness(0.91) saturate(1.34) contrast(1.06);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  opacity: 0;
  transition: opacity 700ms linear, border-color 700ms linear, box-shadow 700ms linear;
  z-index: 3;
}
.energy-sphere-front::before,
.energy-sphere-front::after {
  content: none;
}
.screen-view[data-step="3"] .energy-sphere {
  animation: sphere-breathe 2.8s ease-in-out infinite alternate;
  opacity: 0.82;
}
.screen-view[data-step="3"] .energy-sphere-front {
  animation: sphere-breathe 2.8s ease-in-out infinite alternate;
  opacity: calc(var(--sphere-opacity) * 0.72);
}
.screen-view[data-step="4"] .energy-sphere {
  opacity: 0.82;
}
.screen-view[data-step="4"] .energy-sphere-front {
  opacity: calc(var(--sphere-opacity) * 0.82);
}
.screen-view.is-evolving .energy-sphere,
.screen-view.is-evolving .energy-sphere-front { animation: sphere-collapse 14.2s var(--ease-out) both; }
@keyframes sphere-breathe {
  from { transform: translate(-50%, -50%) scale(calc(0.992 + var(--progress) * 0.004)); }
  to { transform: translate(-50%, -50%) scale(calc(1 + var(--progress) * 0.008)); }
}
@keyframes sphere-collapse {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  4% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.1); }
  12.7%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.38); }
}

.impact-layer { z-index: 5; }
.energy-node,
.impact-ripple { border-radius: 50%; position: absolute; transform: translate(-50%, -50%); }
.energy-node {
  animation: node-drift var(--node-duration) ease-in-out var(--node-delay) infinite alternate;
  background: #e9fdff;
  box-shadow: 0 0 8px 2px #62e8ff, 0 0 20px 5px rgba(47, 186, 255, 0.45);
  height: calc(4px * var(--node-depth));
  opacity: calc(0.28 + var(--progress) * 0.72);
  width: calc(4px * var(--node-depth));
}
@keyframes node-drift {
  from {
    opacity: calc(0.22 + var(--progress) * 0.56);
    transform:
      translate(-50%, -50%)
      translate3d(
        var(--node-drift-x-reverse),
        var(--node-drift-y-reverse),
        0
      )
      scale(0.82);
  }
  to {
    opacity: calc(0.38 + var(--progress) * 0.62);
    transform:
      translate(-50%, -50%)
      translate3d(
        var(--node-drift-x),
        var(--node-drift-y),
        0
      )
      scale(var(--node-scale));
  }
}
.screen-view.is-evolving .energy-node {
  animation: energy-node-fall 1.9s cubic-bezier(0.26, 0.04, 0.7, 0.42) both;
  will-change: opacity, transform;
}
@keyframes energy-node-fall {
  0% { opacity: 1; transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1); }
  34% { opacity: 0.88; transform: translate(-50%, -50%) translate3d(var(--scatter-x), var(--scatter-y), 0) scale(1.16); }
  64% { opacity: 0.7; transform: translate(-50%, -50%) translate3d(var(--coast-x), var(--coast-y), 0) scale(0.82); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate3d(var(--fall-x), var(--fall-distance), 0) rotate(var(--fall-rotation)) scale(0.42); }
}
.impact-ripple {
  animation: sphere-ripple 900ms var(--ease-out) forwards;
  border: 2px solid rgba(217, 253, 255, 0.98);
  box-shadow: 0 0 17px 3px rgba(68, 226, 255, 0.76), inset 0 0 10px rgba(216, 253, 255, 0.52);
  height: calc(16px * var(--surface-depth));
  width: 16px;
}
@keyframes sphere-ripple {
  from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--surface-angle)) scale(0.3); }
  to { opacity: 0; transform: translate(-50%, -50%) rotate(var(--surface-angle)) scale(7); }
}
.reveal-flash {
  background: radial-gradient(ellipse, rgba(230, 253, 255, 0.98), rgba(86, 228, 255, 0.5) 28%, transparent 68%);
  inset: 4%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.72);
  z-index: 8;
}
.screen-view.is-evolving .reveal-flash { animation: reveal-flash 14.2s linear both; }
@keyframes reveal-flash {
  0%, 85.4% { opacity: 0; transform: scale(0.76); }
  86.5% { opacity: 0.2; }
  88% { opacity: 0.92; transform: scale(1.08); }
  93% { opacity: 0.2; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.36); }
}
.screen-view.is-revealed .instrument-window-200 { animation: none; }

.wish-layer { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 7; }
.wish-bubble {
  animation: wish-flight var(--flight-duration) cubic-bezier(0.22, 0.7, 0.22, 1) forwards;
  position: absolute;
  transform: translate3d(-50%, 0, 0);
  will-change: transform, opacity;
}
.wish-copy {
  animation: wish-to-light var(--flight-duration) ease-in forwards;
  background: rgba(2, 14, 27, 0.72);
  border: 1px solid rgba(116, 231, 251, 0.44);
  border-radius: 999px;
  color: #e8fcff;
  display: block;
  font-size: clamp(13px, 0.9vw, 18px);
  letter-spacing: 0.03em;
  padding: 10px 17px;
  text-shadow: 0 0 14px rgba(93, 229, 255, 0.38);
  white-space: nowrap;
}
.wish-photon {
  animation: photon-form var(--flight-duration) ease-in forwards;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 12px 4px #67eaff, 0 0 34px 9px rgba(52, 174, 255, 0.72);
  height: 7px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  width: 7px;
}
@keyframes wish-flight {
  0% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.9); }
  10% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0.98; transform: translate3d(calc(-50% + var(--wish-dx)), var(--wish-dy), 0) scale(0.2); }
}
@keyframes wish-to-light {
  0%, 68% { filter: blur(0); opacity: 1; transform: scale(1); }
  82% { filter: blur(2px); opacity: 0.55; transform: scale(0.76); }
  100% { filter: blur(8px); opacity: 0; transform: scale(0.1); }
}
@keyframes photon-form {
  0%, 68% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  84% { opacity: 0.8; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}

.kv-readout {
  align-items: baseline;
  bottom: 4.5vh;
  display: flex;
  left: 50%;
  opacity: 0;
  position: absolute;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 350ms linear, transform 500ms var(--ease-out);
  z-index: 10;
}
.screen-view[data-step="2"] .kv-readout,
.screen-view[data-step="3"] .kv-readout,
.screen-view[data-step="4"] .kv-readout,
.screen-view[data-step="5"] .kv-readout { opacity: 0.92; transform: translateX(-50%) translateY(0); }
.kv-readout span {
  color: #f4fdff;
  font: 300 clamp(44px, 4.4vw, 84px)/0.8 "DIN Alternate", "Avenir Next Condensed", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.07em;
  text-shadow: 0 0 22px rgba(92, 231, 255, calc(0.18 + var(--progress) * 0.55));
}
.kv-readout small { color: #83eeff; font: 700 clamp(13px, 1vw, 19px) "DIN Alternate", sans-serif; margin-left: 10px; }

.minimal-qr {
  align-items: center;
  background: white;
  border-radius: 4px 12px 12px 12px;
  display: grid;
  gap: 5px;
  justify-items: center;
  opacity: 0.9;
  padding: 6px 6px 8px;
  position: absolute;
  transform: translateY(0);
  transition: opacity 300ms linear, transform 400ms var(--ease-out);
  z-index: 10;
}
.minimal-qr[hidden] { display: none; }
.minimal-qr[data-position="top-left"] { left: clamp(22px, 3vw, 52px); top: clamp(22px, 3vw, 52px); }
.minimal-qr[data-position="top-right"] { right: clamp(22px, 3vw, 52px); top: clamp(22px, 3vw, 52px); }
.minimal-qr[data-position="center-left"] { left: clamp(22px, 3vw, 52px); top: 50%; transform: translateY(-50%); }
.minimal-qr[data-position="center-right"] { right: clamp(22px, 3vw, 52px); top: 50%; transform: translateY(-50%); }
.minimal-qr[data-position="bottom-left"] { bottom: clamp(22px, 3vw, 52px); left: clamp(22px, 3vw, 52px); }
.minimal-qr[data-position="bottom-right"] { bottom: clamp(22px, 3vw, 52px); right: clamp(22px, 3vw, 52px); }
.minimal-qr img { display: block; height: clamp(80px, 6.5vw, 124px); width: clamp(80px, 6.5vw, 124px); }
.minimal-qr span { color: #17374c; font-size: clamp(9px, 0.72vw, 12px); font-weight: 700; letter-spacing: 0.08em; line-height: 1; }

/* 手机互动 */
.mobile-view {
  min-height: 100dvh;
  overflow: hidden;
  padding: max(20px, env(safe-area-inset-top)) 20px max(26px, env(safe-area-inset-bottom));
  position: relative;
  background:
    radial-gradient(circle at 86% 16%, rgba(72, 199, 233, 0.18), transparent 29%),
    radial-gradient(circle at 10% 74%, rgba(36, 83, 164, 0.16), transparent 35%),
    #030915;
}
.mobile-view::before { background: linear-gradient(90deg, transparent 49.8%, rgba(126, 215, 239, 0.08) 50%, transparent 50.2%); content: ""; inset: 0; pointer-events: none; position: absolute; transform: rotate(21deg) scale(1.8); }
.mobile-header { align-items: center; color: #8299ae; display: flex; font-size: 10px; justify-content: space-between; letter-spacing: 0.12em; position: relative; z-index: 2; }
.mini-brand { color: #dcedf3; font-weight: 600; }
.mini-brand i { background: var(--cyan); display: inline-block; height: 10px; margin-right: 6px; transform: skewX(-18deg); width: 4px; }
.step-label { font-family: "DIN Alternate", sans-serif; }
.mobile-hero { padding: 84px 4px 42px; position: relative; z-index: 2; }
.mobile-hero h1 { font-family: "Songti SC", "STSong", serif; font-size: clamp(38px, 11.4vw, 54px); font-weight: 600; letter-spacing: -0.055em; line-height: 1.14; margin: 17px 0 18px; }
.mobile-hero > p:last-child { color: #93a8bb; font-size: 14px; line-height: 1.75; margin: 0; max-width: 340px; }
.micro-sample { height: 145px; opacity: 0.65; position: absolute; right: -44px; top: 8px; width: 145px; }
.micro-sample::before, .micro-sample::after { border: 1px solid rgba(99, 220, 245, 0.35); border-radius: 50%; content: ""; inset: 0; position: absolute; }
.micro-sample::after { inset: 18%; }
.micro-sample i { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 14px var(--cyan); height: 4px; left: 50%; position: absolute; top: 50%; width: 4px; }
.micro-sample i:nth-child(2) { transform: translate(42px, -24px); }.micro-sample i:nth-child(3) { transform: translate(-38px, 32px); }.micro-sample i:nth-child(4) { transform: translate(19px, 47px); }
.wish-form { position: relative; z-index: 2; }
.wish-editor { display: grid; gap: 12px; }
.wish-editor > span { color: #d9e9ef; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; }
.wish-editor textarea {
  background: rgba(12, 28, 46, 0.78);
  border: 1px solid rgba(126, 190, 221, 0.17);
  border-radius: 2px 18px 18px 18px;
  color: #f2fbff;
  font: 500 16px/1.7 system-ui, sans-serif;
  min-height: 104px;
  outline: 0;
  padding: 17px 18px;
  resize: none;
  transition: border-color var(--motion-fast) linear, background var(--motion-fast) linear, box-shadow var(--motion-fast) linear;
}
.wish-editor textarea::placeholder { color: #607c91; }
.wish-editor textarea:focus { background: rgba(15, 37, 59, 0.92); border-color: rgba(97, 221, 245, 0.68); box-shadow: 0 0 0 3px rgba(97, 221, 245, 0.07); }
.wish-tools { align-items: center; display: flex; justify-content: space-between; margin-top: 10px; }
.random-phrase-button { align-items: center; background: transparent; border: 1px solid rgba(97, 221, 245, 0.32); border-radius: 999px; color: #a9dce8; cursor: pointer; display: inline-flex; font-size: 12px; gap: 7px; min-height: 38px; padding: 0 15px; }
.random-phrase-button i { color: var(--cyan); font-style: normal; }
.random-phrase-button:active { transform: scale(0.97); }
.wish-tools small { color: #5f7b91; font-size: 11px; font-variant-numeric: tabular-nums; }
.wish-tools small b { color: #aac7d6; font-weight: 500; }
.interaction-hint { color: #7890a3; font-size: 11px; margin: 17px 0 -7px; min-height: 17px; text-align: center; }
.interaction-hint[data-open="true"] { color: #72cfbc; }
.send-button {
  align-items: center;
  background: var(--cyan);
  border: 0;
  border-radius: 999px;
  color: #00101a;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  font-weight: 700;
  justify-content: space-between;
  margin-top: 22px;
  min-height: 58px;
  padding: 0 10px 0 25px;
  width: 100%;
  transition: background var(--motion-fast) linear, transform var(--motion-fast) var(--ease-standard);
}
.send-button i { align-items: center; background: #03101d; border-radius: 50%; color: white; display: flex; font-size: 21px; font-style: normal; height: 40px; justify-content: center; width: 40px; }
.send-button:active { transform: scale(0.985); }
.send-button:disabled { background: #49616d; cursor: default; opacity: 0.66; }
.privacy-note { color: #5f768b; font-size: 10px; letter-spacing: 0.04em; margin: 12px 0 0; text-align: center; }
.mobile-success { align-items: center; background: rgba(3, 9, 21, 0.97); display: flex; flex-direction: column; inset: 0; justify-content: center; padding: 32px; position: fixed; text-align: center; z-index: 10; }
.mobile-success[hidden] { display: none; }
.mobile-success p { color: var(--cyan); font-size: 12px; letter-spacing: 0.16em; margin: 30px 0 14px; }
.mobile-success strong { font-family: "Songti SC", serif; font-size: 30px; font-weight: 500; }
.mobile-success strong b { font: 400 76px/1 "DIN Alternate", sans-serif; }
.mobile-success > span { color: #dcebf1; font-size: 20px; letter-spacing: 0.2em; margin: 9px 0 40px; }
.mobile-success small { color: #71899d; line-height: 1.7; max-width: 240px; }
.test-reset { background: transparent; border: 1px solid rgba(97, 221, 245, 0.34); border-radius: 999px; color: #9fdbea; cursor: pointer; margin-top: 24px; min-height: 44px; padding: 0 18px; }
.success-orbit { border: 1px solid rgba(97, 221, 245, 0.3); border-radius: 50%; height: 150px; position: relative; width: 150px; }
.success-orbit::after { border: 1px solid rgba(97, 221, 245, 0.16); border-radius: 50%; content: ""; inset: 22px; position: absolute; }
.success-orbit i { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 27px 12px rgba(97, 221, 245, 0.28); height: 11px; left: calc(50% - 5px); position: absolute; top: calc(50% - 5px); width: 11px; }

/* 管理员现场遥控器 */
.control-view {
  --remote-blue: #174f82;
  --remote-ink: #0a1d2e;
  --remote-muted: #62788b;
  background: #edf3f7;
  color: var(--remote-ink);
  min-height: 100vh;
  padding: clamp(24px, 3.3vw, 52px) clamp(24px, 5vw, 76px);
}
.control-header { align-items: end; border-bottom: 1px solid #bdccd8; display: flex; justify-content: space-between; padding-bottom: 20px; }
.control-header h1 { font-family: "Songti SC", serif; font-size: clamp(32px, 3.2vw, 50px); margin: 6px 0 0; }
.remote-header-state { align-items: center; display: flex; gap: 18px; }
.connection-state { background: #d9e5eb; border-radius: 999px; color: #4c6172; font-size: 12px; padding: 8px 13px; }
.connection-state.online { background: #d7efe7; color: #176246; }
.remote-clock { color: #2d465a; font: 600 16px "DIN Alternate", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.card-label { color: #527086; font: 700 10px "DIN Alternate", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.remote-status {
  align-items: center;
  background: #071928;
  border-radius: 4px 20px 20px 20px;
  color: white;
  display: grid;
  gap: 0;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  margin-top: 18px;
  min-height: 92px;
  overflow: hidden;
  padding: 0 28px;
  position: relative;
}
.remote-kv, .remote-metric { align-items: center; display: flex; min-height: 58px; }
.remote-kv { gap: 20px; }
.remote-kv > span, .remote-metric > span { color: #7f9bb0; font-size: 11px; letter-spacing: 0.08em; }
.remote-kv strong { font: 500 38px "DIN Alternate", sans-serif; }.remote-kv strong small { color: #61ddf5; font-size: 13px; margin-left: 5px; }
.remote-metric { border-left: 1px solid #213849; flex-direction: column; justify-content: center; }.remote-metric b { font: 600 24px "DIN Alternate", sans-serif; margin-top: 5px; }
.remote-progress { background: #203748; bottom: 0; height: 3px; left: 0; overflow: hidden; position: absolute; right: 0; }.remote-progress i { background: linear-gradient(90deg, #2453a4, #61ddf5); display: block; height: 100%; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-content) var(--ease-out); }

.control-primary-layout { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(700px, 2.25fr) minmax(290px, 0.75fr); margin-top: 18px; }
.workflow-console { min-width: 0; }
.workflow-console .remote-status { margin-top: 0; }
.remote-layout { display: grid; gap: 18px; grid-template-columns: minmax(190px, 0.66fr) minmax(0, 2fr); margin-top: 18px; }
.step-rail { background: #dde8ef; border: 1px solid #c8d6e0; border-radius: 4px 18px 18px 18px; display: flex; flex-direction: column; overflow: hidden; padding: 8px; }
.step-tab { background: transparent; border: 0; border-radius: 3px 12px 12px 12px; color: #5f7587; cursor: pointer; display: grid; gap: 3px; min-height: 82px; padding: 14px 16px 14px 52px; position: relative; text-align: left; transition: background var(--motion-fast) linear, color var(--motion-fast) linear; }
.step-tab::before { align-items: center; border: 1px solid #9bb0bf; border-radius: 50%; content: attr(data-step); display: flex; font: 600 12px "DIN Alternate", sans-serif; height: 25px; justify-content: center; left: 15px; position: absolute; top: 25px; width: 25px; }
.step-tab:not(:last-child)::after { background: #b7c8d4; bottom: -10px; content: ""; height: 20px; left: 28px; position: absolute; width: 1px; }
.step-tab span { color: #7b91a1; font: 700 9px "DIN Alternate", sans-serif; letter-spacing: 0.15em; }.step-tab b { color: #274156; font-size: 15px; }.step-tab small { font-size: 11px; }
.step-tab:hover { background: rgba(255, 255, 255, 0.5); }
.step-tab.is-active { background: white; box-shadow: 0 7px 24px rgba(36, 73, 98, 0.1); color: #2453a4; }
.step-tab.is-active::before { background: var(--remote-blue); border-color: var(--remote-blue); color: white; }.step-tab.is-active b { color: #102c42; }

.remote-deck { min-height: 526px; }
.remote-step-panel { background: white; border: 1px solid #d4dfe6; border-radius: 4px 28px 28px 28px; min-height: 526px; overflow: hidden; padding: clamp(28px, 3.2vw, 52px); position: relative; }
.remote-step-panel[hidden] { display: none; }
.panel-number { color: #eff4f7; font: 700 clamp(110px, 14vw, 210px)/0.72 "DIN Alternate", sans-serif; pointer-events: none; position: absolute; right: 18px; top: 34px; }
.remote-step-panel h2 { font-family: "Songti SC", serif; font-size: clamp(29px, 3vw, 46px); margin: 18px 0 14px; position: relative; }
.remote-step-panel[data-panel="1"] .remote-start { margin-top: 34px; }
.panel-lead { color: var(--remote-muted); font-size: 15px; line-height: 1.75; margin: 0 0 28px; max-width: 620px; position: relative; }
.check-links { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 34px 0 22px; }.check-links a { align-items: center; background: #f0f5f8; border: 1px solid #d4e0e7; border-radius: 3px 14px 14px 14px; color: #17384f; display: flex; font-weight: 600; justify-content: space-between; min-height: 74px; padding: 0 20px; text-decoration: none; }
.cue-card { background: #f1f6f9; border-left: 3px solid #61bfd3; display: flex; flex-direction: column; gap: 9px; margin: 28px 0; padding: 20px 22px; }.cue-card span { color: #668195; font-size: 11px; }.cue-card q { color: #1a3a50; font-family: "Songti SC", serif; font-size: 18px; line-height: 1.65; quotes: none; }
.remote-primary, .remote-secondary, .remote-danger, .button-row button { border-radius: 999px; cursor: pointer; font-weight: 600; min-height: 50px; padding: 0 22px; }
.remote-primary { background: var(--remote-blue); border: 0; color: white; width: 100%; }.remote-primary:hover { background: #0e406f; }.remote-primary:disabled { cursor: wait; opacity: 0.6; }
.remote-secondary { background: transparent; border: 1px solid #bdccd7; color: #365469; margin-top: 11px; width: 100%; }
.remote-danger { background: transparent; border: 1px solid #c99393; color: #913e3e; margin-top: 32px; width: 100%; }
.live-timer { align-items: baseline; border-bottom: 1px solid #dbe5eb; display: flex; justify-content: space-between; margin: 18px 0 26px; padding-bottom: 18px; position: relative; }.live-timer span { color: #5f778a; font-size: 13px; }.live-timer strong { color: #114e7e; font: 600 clamp(52px, 6vw, 82px)/1 "DIN Alternate", sans-serif; font-variant-numeric: tabular-nums; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }.button-row button { background: #edf4f8; border: 1px solid #c9d9e3; color: #17364d; flex: 1; }.button-row button:hover { border-color: #2453a4; }
.remote-seed-row { margin: 26px 0 12px; }
.duration-control { background: #f0f5f8; border: 1px solid #d4e0e7; border-radius: 3px 16px 16px 16px; color: #5f778a; display: flex; flex-direction: column; gap: 12px; margin: 30px 0 16px; padding: 18px 20px; }
.duration-control > span { font-size: 12px; }
.duration-control strong { align-items: baseline; color: #164f76; display: flex; gap: 8px; }
.duration-control input { background: transparent; border: 0; border-bottom: 2px solid #9cbfce; color: #114e7e; font: 600 48px/1 "DIN Alternate", sans-serif; max-width: 130px; padding: 2px 0; }
.duration-control input:focus { border-color: #2453a4; outline: 0; }
.duration-control small { font-size: 13px; }
.reveal-warning { align-items: flex-start; background: #fff6e7; border: 1px solid #edd4aa; border-radius: 3px 12px 12px 12px; display: flex; flex-direction: column; gap: 5px; margin: 26px 0 16px; padding: 15px 18px; }.reveal-warning b { color: #875616; font-size: 12px; }.reveal-warning span { color: #735e3f; font-size: 13px; }
.reveal-trigger { background: #0b7590; }
.completion-mark { align-items: center; background: #d9f1e7; border-radius: 50%; color: #13714e; display: flex; font-size: 30px; height: 64px; justify-content: center; margin: 34px 0 8px; width: 64px; }
.final-stats { background: #f0f5f8; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 28px; padding: 20px; }.final-stats span { color: #61788a; font-size: 12px; }.final-stats b { color: #173c55; font: 600 25px "DIN Alternate", sans-serif; margin-left: 7px; }

.control-shell[hidden], .admin-gate[hidden] { display: none; }
.admin-gate { align-items: center; display: flex; justify-content: center; min-height: calc(100vh - 48px); }
.auth-card { background: #fff; border: 1px solid #d4dfe6; border-radius: 4px 30px 30px 30px; box-shadow: 0 24px 80px rgba(21, 57, 80, 0.12); max-width: 460px; padding: clamp(28px, 5vw, 58px); width: 100%; }
.auth-card h1 { font-family: "Songti SC", serif; font-size: clamp(34px, 4vw, 54px); margin: 10px 0 12px; }
.auth-intro { color: #62788b; font-size: 14px; line-height: 1.7; margin: 0 0 28px; }
.auth-form { display: grid; gap: 16px; }
.auth-form[hidden] { display: none; }
.auth-form label { color: #365469; display: grid; font-size: 12px; gap: 8px; }
.auth-form input { background: #f4f8fa; border: 1px solid #cedde5; border-radius: 3px 12px 12px 12px; color: #122d42; min-height: 48px; padding: 0 14px; }
.auth-form input:focus { background: #fff; border-color: #3e91b3; }
.remember-option { align-items: center; display: grid !important; gap: 4px 10px !important; grid-template-columns: 20px 1fr; margin: 2px 0 4px; }
.remember-option input { accent-color: #1a7896; min-height: 18px; padding: 0; width: 18px; }
.remember-option span { color: #274d63; font-size: 12px; }
.remember-option small { color: #78909f; font-size: 10px; grid-column: 2; }
.auth-feedback { color: #527086; font-size: 12px; min-height: 18px; }
.auth-feedback[data-error="true"] { color: #a74e4e; }
.display-settings, .phrase-manager { background: #fff; border: 1px solid #d4dfe6; border-radius: 4px 28px 28px 28px; margin-top: 0; padding: clamp(22px, 3vw, 34px); }
.display-settings-heading, .phrase-manager-heading { align-items: center; display: flex; gap: 20px; justify-content: space-between; }
.display-settings h2, .phrase-manager h2 { font-family: "Songti SC", serif; font-size: clamp(24px, 2.4vw, 36px); margin: 7px 0 0; }
.screen-links { gap: 9px; grid-template-columns: 1fr; margin: 22px 0 28px; }
.screen-links a { min-height: 64px; padding: 0 17px; }
.display-settings-subheading { align-items: center; border-top: 1px solid #dce5ea; display: flex; gap: 16px; justify-content: space-between; padding-top: 24px; }
.display-settings-subheading h3 { color: #173c55; font-family: "Songti SC", serif; font-size: 22px; margin: 5px 0 0; }
.qr-switch { align-items: center; color: #365469; cursor: pointer; display: flex; gap: 10px; font-size: 12px; }
.qr-switch input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.qr-switch span { background: #c6d4dc; border-radius: 999px; height: 26px; padding: 3px; transition: background 180ms linear; width: 46px; }
.qr-switch span::after { background: white; border-radius: 50%; box-shadow: 0 2px 7px rgba(15, 49, 70, 0.22); content: ""; display: block; height: 20px; transition: transform 180ms var(--ease-out); width: 20px; }
.qr-switch input:checked + span { background: #1a7896; }
.qr-switch input:checked + span::after { transform: translateX(20px); }
.qr-switch input:focus-visible + span { outline: 2px solid #2453a4; outline-offset: 3px; }
.qr-position-fieldset { border: 0; margin: 24px 0 0; padding: 0; }
.qr-position-fieldset legend { color: #62788b; font-size: 12px; margin-bottom: 10px; }
.qr-position-grid { background: #e9f0f4; border: 1px solid #d1dee5; border-radius: 4px 18px 18px 18px; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(90px, 1fr)); padding: 7px; width: 100%; }
.qr-position-grid label { cursor: pointer; }
.qr-position-grid input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.qr-position-grid span { align-items: center; background: rgba(255, 255, 255, 0.58); border: 1px solid transparent; border-radius: 3px 9px 9px 9px; color: #536e80; display: flex; font-size: 11px; justify-content: center; min-height: 44px; transition: background 150ms linear, border-color 150ms linear, color 150ms linear; }
.qr-position-grid input:checked + span { background: #fff; border-color: #3d9ab6; box-shadow: 0 3px 12px rgba(35, 91, 119, 0.1); color: #155d78; font-weight: 700; }
.qr-position-grid input:focus-visible + span { outline: 2px solid #2453a4; outline-offset: 2px; }
.display-settings-feedback { color: #278060; font-size: 11px; min-height: 16px; margin: 10px 0 0; }
.display-settings-feedback[data-error="true"] { color: #a74e4e; }
.phrase-library-editor { color: #62788b; display: grid; font-size: 12px; gap: 10px; margin-top: 22px; }
.phrase-library-editor textarea { background: #f4f8fa; border: 1px solid #cedde5; border-radius: 3px 16px 16px 16px; color: #173c55; font: 14px/1.8 system-ui, sans-serif; min-height: 190px; outline: 0; padding: 14px 16px; resize: vertical; }
.phrase-library-editor textarea:focus { background: #fff; border-color: #3d9ab6; box-shadow: 0 0 0 3px rgba(61, 154, 182, 0.09); }
.phrase-manager-actions { align-items: center; display: flex; gap: 18px; justify-content: space-between; margin-top: 14px; }
.phrase-manager-actions .display-settings-feedback { flex: 1; margin: 0; }
.phrase-manager-actions .remote-secondary { min-width: 138px; width: auto; }
.control-config-layout { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(320px, 0.8fr) minmax(520px, 1.2fr); margin-top: 18px; }
.wallpaper-manager { background: #fff; border: 1px solid #d4dfe6; border-radius: 4px 28px 28px 28px; margin-top: 0; padding: clamp(22px, 3vw, 34px); }
.wallpaper-manager-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
.wallpaper-manager h2 { font-family: "Songti SC", serif; font-size: clamp(24px, 2.4vw, 36px); margin: 7px 0 0; }
.wallpaper-upload { background: #edf5f8; border: 1px solid #c9dce5; border-radius: 999px; color: #244b61; cursor: pointer; font-size: 12px; padding: 11px 16px; }
.wallpaper-upload input { display: none; }
.wallpaper-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.wallpaper-card { background: #f4f8fa; border: 1px solid #d5e1e7; border-radius: 3px 18px 18px 18px; overflow: hidden; }
.wallpaper-card.is-active { border-color: #3d9ab6; box-shadow: 0 0 0 2px rgba(61, 154, 182, 0.14); }
.wallpaper-card > img { aspect-ratio: 16 / 9; background: #102838; display: block; object-fit: cover; width: 100%; }
.wallpaper-card-meta { display: grid; gap: 4px; padding: 12px 13px 7px; }
.wallpaper-card-meta strong { color: #173c55; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallpaper-card-meta span { color: #6a8292; font-size: 11px; }
.wallpaper-card-actions { display: flex; gap: 8px; padding: 7px 13px 13px; }
.wallpaper-card-actions button, .logout-button { background: transparent; border: 1px solid #c4d5df; border-radius: 999px; color: #365469; cursor: pointer; font-size: 11px; min-height: 32px; padding: 0 11px; }
.wallpaper-card-actions button:first-child { background: #e4f2f6; border-color: #9fcbd6; }
.wallpaper-card-actions button:disabled { cursor: default; opacity: 0.48; }
.wallpaper-card-actions button:last-child { color: #a24e4e; }
.control-footer { align-items: center; color: #738797; display: flex; font-size: 11px; justify-content: space-between; margin-top: 18px; }

/* 2026 年会四阶段：新品轮廓 → 头像弹幕 → 光点汇聚 → 直接揭幕 */
.screen-view[data-step="1"] .product-stage,
.screen-view[data-step="2"] .product-stage,
.screen-view[data-step="3"] .product-stage,
.screen-view[data-step="4"] .product-stage,
.screen-view.is-revealing .product-stage,
.screen-view.is-revealed .product-stage {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.instrument-window-200 {
  opacity: 1;
  transform: scale(1);
}
.screen-view[data-step="1"] .instrument-200,
.screen-view[data-step="2"] .instrument-200,
.screen-view[data-step="3"] .instrument-200 {
  filter: brightness(0.26) saturate(0.58) drop-shadow(0 22px 48px rgba(0, 0, 0, 0.45));
  opacity: 0.16;
}
.screen-view[data-step="1"] .instrument-highlight-200,
.screen-view[data-step="2"] .instrument-highlight-200 {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 8px rgba(221, 253, 255, 0.92))
    drop-shadow(0 0 26px rgba(75, 224, 255, 0.72))
    drop-shadow(0 0 58px rgba(24, 117, 255, 0.38));
  opacity: 0.7;
}
.screen-view[data-step="3"] .instrument-highlight-200 {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 calc(8px + 14px * var(--progress)) rgba(225, 253, 255, 0.96))
    drop-shadow(0 0 calc(26px + 34px * var(--progress)) rgba(65, 226, 255, 0.86))
    drop-shadow(0 0 calc(58px + 54px * var(--progress)) rgba(28, 122, 255, 0.56));
  opacity: calc(0.7 + var(--progress) * 0.3);
}
.screen-view[data-step="3"] .energy-sphere,
.screen-view[data-step="3"] .energy-sphere-front {
  animation: none;
  opacity: calc(var(--sphere-opacity) * 0.82);
}
.screen-view[data-step="1"] .energy-sphere,
.screen-view[data-step="1"] .energy-sphere-front,
.screen-view[data-step="2"] .energy-sphere,
.screen-view[data-step="2"] .energy-sphere-front { opacity: 0; }

.screen-view.is-revealing .energy-sphere,
.screen-view.is-revealing .energy-sphere-front {
  animation: direct-sphere-fade 900ms var(--ease-out) forwards;
}
.screen-view.is-revealing .instrument-200 {
  animation: direct-product-reveal 1200ms var(--ease-out) both;
  opacity: 1;
}
.screen-view.is-revealing .instrument-highlight-200 {
  animation: direct-outline-fade 900ms linear both;
}
.screen-view.is-revealing .reveal-flash { animation: direct-reveal-flash 1100ms var(--ease-out) both; }
.screen-view.is-revealed .instrument-window-200 { opacity: 1; transform: scale(1); }
.screen-view.is-revealed .instrument-200 {
  filter: brightness(1) saturate(1) drop-shadow(0 24px 46px rgba(0, 0, 0, 0.38));
  opacity: 1;
}
.screen-view.is-revealed .instrument-highlight-200,
.screen-view.is-revealed .energy-sphere,
.screen-view.is-revealed .energy-sphere-front,
.screen-view.is-revealed .impact-layer { display: none; }
@keyframes direct-sphere-fade {
  from { opacity: 0.82; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes direct-product-reveal {
  0% { filter: brightness(0) invert(1) drop-shadow(0 0 56px rgba(81, 229, 255, 0.9)); opacity: 0.9; }
  42% { filter: brightness(2.1) saturate(0.25) drop-shadow(0 0 70px rgba(120, 239, 255, 0.9)); opacity: 1; }
  100% { filter: brightness(1) saturate(1) drop-shadow(0 24px 46px rgba(0, 0, 0, 0.38)); opacity: 1; }
}
@keyframes direct-outline-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes direct-reveal-flash {
  0% { opacity: 0; transform: scale(0.78); }
  35% { opacity: 0.82; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.3); }
}

.danmaku-layer { z-index: 9; }
.wish-bubble { animation: none; }
.wish-bubble.is-danmaku {
  animation: danmaku-scroll var(--danmaku-duration) linear infinite;
  left: 100%;
  will-change: transform;
}
.wish-bubble.is-converging {
  animation: comment-converge var(--flight-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: opacity, transform;
}
.wish-copy {
  align-items: center;
  animation: none;
  backdrop-filter: blur(10px);
  background: rgba(2, 14, 27, 0.76);
  display: inline-flex;
  gap: 10px;
  padding: 7px 15px 7px 8px;
}
.comment-avatar {
  background: rgba(107, 224, 248, 0.14);
  border: 1px solid rgba(192, 249, 255, 0.72);
  border-radius: 50%;
  display: grid;
  flex: 0 0 auto;
  height: clamp(30px, 2.3vw, 44px);
  object-fit: cover;
  place-items: center;
  width: clamp(30px, 2.3vw, 44px);
}
.comment-avatar-fallback {
  background: linear-gradient(145deg, hsl(var(--avatar-hue) 74% 60%), hsl(calc(var(--avatar-hue) + 52) 82% 38%));
  color: white;
  font-size: clamp(12px, 0.8vw, 16px);
  font-style: normal;
  font-weight: 700;
}
.comment-text { display: grid; gap: 1px; text-align: left; }
.comment-text b { color: #8deeff; font-size: clamp(9px, 0.62vw, 12px); font-weight: 600; letter-spacing: 0.05em; }
.comment-text em { color: #f1fdff; font-size: clamp(13px, 0.9vw, 18px); font-style: normal; white-space: nowrap; }
.wish-bubble.is-converging .wish-copy { animation: comment-to-light var(--flight-duration) ease-in forwards; }
.wish-bubble.is-converging .wish-photon { animation: photon-form var(--flight-duration) ease-in forwards; }
@keyframes danmaku-scroll {
  from { transform: translate3d(var(--danmaku-offset), 0, 0); }
  to { transform: translate3d(calc(-115vw - 100%), 0, 0); }
}
@keyframes comment-converge {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0.98; transform: translate3d(var(--wish-dx), var(--wish-dy), 0) scale(0.18); }
}
@keyframes comment-to-light {
  0%, 58% { filter: blur(0); opacity: 1; transform: scale(1); }
  80% { filter: blur(2px); opacity: 0.5; transform: scale(0.72); }
  100% { filter: blur(8px); opacity: 0; transform: scale(0.08); }
}

.nickname-editor {
  color: #7190a5;
  display: grid;
  font-size: 12px;
  gap: 8px;
  margin-bottom: 14px;
}
.nickname-editor input {
  background: rgba(6, 25, 43, 0.72);
  border: 1px solid rgba(110, 195, 224, 0.25);
  border-radius: 12px;
  color: #eefcff;
  min-height: 46px;
  padding: 0 14px;
  width: 100%;
}

@media (max-width: 1000px) {
  .screen-view { min-height: 620px; }
  .screen-copy h1 { font-size: 48px; }
  .instrument-chamber { right: 2vw; width: 55vw; }
  .screen-footer { grid-template-columns: 1fr 330px; }
  .control-primary-layout { grid-template-columns: 1fr; }
  .control-config-layout { grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr); }
}

@media (max-width: 720px) {
  .control-view { padding: 24px 16px; }
  .control-header { align-items: flex-start; flex-direction: column; gap: 18px; }
  .remote-header-state { justify-content: space-between; width: 100%; }
  .remote-status { grid-template-columns: 1.3fr repeat(3, 1fr); padding: 0 12px; }
  .remote-kv { align-items: flex-start; flex-direction: column; gap: 2px; justify-content: center; }
  .remote-kv strong { font-size: 30px; }
  .remote-metric > span { font-size: 9px; }.remote-metric b { font-size: 20px; }
  .remote-layout { grid-template-columns: 1fr; }
  .step-rail { flex-direction: row; overflow-x: auto; padding: 6px; }
  .step-tab { flex: 0 0 132px; min-height: 70px; padding: 10px 10px 10px 42px; }
  .step-tab::before { left: 10px; top: 21px; }.step-tab::after { display: none; }
  .step-tab small { display: none; }
  .remote-deck, .remote-step-panel { min-height: 510px; }
  .remote-step-panel { padding: 30px 22px; }
  .check-links { grid-template-columns: 1fr; }
  .control-config-layout { grid-template-columns: 1fr; }
  .display-settings, .phrase-manager, .wallpaper-manager { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .wish-bubble { display: none; }
  .instrument,
  .instrument-window { transform: none !important; }
}

@media (prefers-contrast: more) {
  :root { --muted: #b8cad7; --line: rgba(220, 245, 255, 0.55); }
  .phrase-option label { border-color: #90b9cf; }
}