:root {
        --bg: #030405;
        --ink: #f2efe8;
        --muted: rgba(242, 239, 232, 0.64);
        --quiet: rgba(242, 239, 232, 0.38);
        --line: rgba(242, 239, 232, 0.14);
        --panel: rgba(4, 7, 8, 0.62);
        --cyan: #72cbd4;
        --orange: #ff6b4a;
        --green: #9ee6b8;
        --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-mono: "SFMono-Regular", "IBM Plex Mono", Consolas, monospace;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
        background: var(--bg);
        color: var(--ink);
        font-family: var(--font-sans);
      }

      body {
        letter-spacing: -0.02em;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .deck {
        display: flex;
        width: 100vw;
        height: 100dvh;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        /* 不用 CSS 平滑：它与 mandatory 吸附冲突，会让所有平滑滚动被取消归零。
           平滑改由 JS 缓动实现（见 scrollDeckTo）。 */
        scroll-behavior: auto;
      }

      .deck::-webkit-scrollbar {
        height: 10px;
      }

      .deck::-webkit-scrollbar-track {
        background: #020303;
      }

      .deck::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: linear-gradient(90deg, var(--cyan), var(--orange));
      }

      .slide {
        position: relative;
        flex: 0 0 100vw;
        width: 100vw;
        height: 100dvh;
        overflow: hidden;
        scroll-snap-align: start;
        /* 注意：不要在 snap 容器的子项上用 content-visibility:auto——
           在真实 Chrome 里会与 scroll-snap mandatory 形成无限布局循环，整页硬挂死。 */
        background:
          radial-gradient(circle at 82% 18%, rgba(255, 107, 74, 0.12), transparent 34%),
          radial-gradient(circle at 12% 84%, rgba(114, 203, 212, 0.10), transparent 36%),
          linear-gradient(135deg, #050607 0%, #080b0d 58%, #030405 100%);
        border-right: 1px solid var(--line);
      }

      .slide::before {
        content: "";
        position: absolute;
        inset: 22px;
        border: 1px solid var(--line);
        pointer-events: none;
      }

      .slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), transparent 74%);
        pointer-events: none;
      }

      /* 底图零遮罩：保留原图全部对比度与暗部细节。
         文字可读性改由文字块下方的局部压暗 + 文字投影承担。 */
      .hero-slide {
        background: #050607;
      }

      /* 底图独立成层：关机黑场释放时，只有画面缓缓落定，文字不受影响 */
      .hero-bg {
        position: absolute;
        inset: 0;
        background: url("./assets/hero-cosmic-shoreline.webp") center / cover no-repeat;
        transform-origin: 62% 56%;
        pointer-events: none;
      }

      .site-ready .hero-bg {
        /* 更深的推近 + 更长的收束，让世界在黑幕散开后仍在"落定" */
        animation: world-open 5200ms cubic-bezier(0.12, 0.72, 0.1, 1) both;
      }

      @keyframes world-open {
        0% {
          transform: scale(1.14);
        }
        100% {
          transform: scale(1);
        }
      }

      /* 从宇航员脚下的光带里炸开的一道辉光——世界"砸"进来的那一下 */
      .hero-bloom {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        mix-blend-mode: screen;
        background:
          radial-gradient(ellipse 34% 40% at 63% 60%, rgba(255, 250, 240, 0.95), rgba(255, 214, 168, 0.34) 42%, transparent 72%),
          radial-gradient(ellipse 90% 30% at 63% 60%, rgba(150, 205, 255, 0.28), transparent 68%);
      }

      .site-ready .hero-bloom {
        animation: world-bloom 2400ms cubic-bezier(0.22, 0.68, 0.14, 1) both;
      }

      @keyframes world-bloom {
        0% {
          opacity: 0;
          transform: scale(1.28);
        }
        16% {
          opacity: 1;
          transform: scale(1.04);
        }
        100% {
          opacity: 0;
          transform: scale(1);
        }
      }

      .world-slide {
        --world-position: center;
        --world-size: cover;
        --veil-left: rgba(2, 4, 6, 0.5);
        --veil-right: rgba(2, 4, 6, 0.31);
        --glow-x: 72%;
        --glow-y: 45%;
        --glow-color: rgba(255, 107, 74, 0.18);
        background:
          linear-gradient(90deg, var(--veil-left) 0%, rgba(2, 4, 6, 0.43) 44%, var(--veil-right) 100%),
          radial-gradient(circle at var(--glow-x) var(--glow-y), var(--glow-color), transparent 34%),
          url("./assets/hero-cosmic-shoreline.webp") var(--world-position) / var(--world-size) no-repeat,
          #050607;
      }

      .world-dark {
        --world-position: 8% 42%;
        --world-size: 168%;
        --veil-left: rgba(2, 4, 6, 0.54);
        --veil-right: rgba(2, 4, 6, 0.38);
        --glow-x: 18%;
        --glow-y: 78%;
        --glow-color: rgba(114, 203, 212, 0.14);
      }

      .world-energy {
        --world-position: 78% 35%;
        --world-size: 148%;
        --veil-left: rgba(2, 4, 6, 0.47);
        --veil-right: rgba(2, 4, 6, 0.18);
        --glow-x: 76%;
        --glow-y: 38%;
        --glow-color: rgba(255, 107, 74, 0.26);
      }

      .world-core {
        --world-position: 66% 52%;
        --world-size: 128%;
        --veil-left: rgba(2, 4, 6, 0.46);
        --veil-right: rgba(2, 4, 6, 0.11);
        --glow-x: 64%;
        --glow-y: 50%;
        --glow-color: rgba(242, 239, 232, 0.28);
      }

      .world-orbit {
        --world-position: 16% 28%;
        --world-size: 188%;
        --veil-left: rgba(2, 4, 6, 0.55);
        --veil-right: rgba(2, 4, 6, 0.42);
        --glow-x: 24%;
        --glow-y: 36%;
        --glow-color: rgba(114, 203, 212, 0.16);
      }

      .world-water {
        --world-position: 54% 96%;
        --world-size: 138%;
        --veil-left: rgba(2, 4, 6, 0.54);
        --veil-right: rgba(2, 4, 6, 0.36);
        --glow-x: 64%;
        --glow-y: 86%;
        --glow-color: rgba(255, 107, 74, 0.16);
      }

      .world-contact {
        --world-position: 4% 48%;
        --world-size: 172%;
        --veil-left: rgba(2, 4, 6, 0.56);
        --veil-right: rgba(2, 4, 6, 0.43);
        --glow-x: 76%;
        --glow-y: 58%;
        --glow-color: rgba(114, 203, 212, 0.12);
      }

      .slide-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 24px;
        width: min(1180px, calc(100vw - 72px));
        height: 100%;
        margin: 0 auto;
        padding: 54px 0 40px;
      }

      .topline,
      .bottomline,
      .kicker,
      .tag,
      .mono {
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .topline,
      .bottomline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        color: var(--muted);
        font-size: 12px;
      }

      .topline b,
      .bottomline b {
        color: var(--ink);
        font-weight: 500;
      }

      .bottomline nav {
        display: inline-flex;
        gap: 10px;
      }

      .bottomline a {
        padding: 9px 12px;
        border: 1px solid var(--line);
        color: var(--muted);
      }

      .stage {
        align-self: center;
        display: grid;
        grid-template-columns: minmax(0, 0.78fr) minmax(360px, 0.52fr);
        gap: 52px;
        align-items: center;
      }

      .stage.single {
        grid-template-columns: 1fr;
        max-width: 1040px;
      }

      .hero-stage {
        grid-template-columns: minmax(0, 0.58fr) minmax(260px, 0.42fr);
      }

      .hero-void {
        min-height: 360px;
      }

      h1,
      h2,
      h3,
      p {
        margin: 0;
      }

      h1 {
        max-width: 920px;
        font-size: clamp(54px, 8.1vw, 112px);
        font-weight: 420;
        line-height: 0.92;
        letter-spacing: -0.06em;
      }

      h2 {
        max-width: 920px;
        font-size: clamp(40px, 5.1vw, 76px);
        font-weight: 420;
        line-height: 0.98;
        letter-spacing: -0.052em;
      }

      h3 {
        font-size: 21px;
        font-weight: 520;
        letter-spacing: -0.03em;
      }

      .kicker {
        margin-bottom: 18px;
        color: var(--cyan);
        font-size: 13px;
      }

      .lead {
        max-width: 780px;
        margin-top: 24px;
        color: rgba(242, 239, 232, 0.82);
        font-size: clamp(20px, 2vw, 29px);
        font-weight: 360;
        line-height: 1.42;
      }

      .hero-copy {
        opacity: 1;
        position: relative;
        isolation: isolate;
      }

      /* 局部柔和压暗：只罩住文字块本身，边缘完全羽化，不触碰画面其余部分 */
      .hero-copy::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: -8vw;
        right: -14%;
        top: -10%;
        bottom: -14%;
        background: radial-gradient(
          ellipse 62% 58% at 32% 50%,
          rgba(2, 4, 6, 0.82) 0%,
          rgba(2, 4, 6, 0.62) 38%,
          rgba(2, 4, 6, 0.28) 66%,
          transparent 84%
        );
        pointer-events: none;
      }

      .hero-copy h1,
      .hero-copy .lead,
      .hero-copy .kicker,
      .hero-copy .hero-caption,
      .hero-copy .hero-contact {
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72), 0 1px 3px rgba(0, 0, 0, 0.55);
      }

      .site-ready .hero-copy {
        opacity: 1;
        transform: none;
      }

      /* 分层入场：每一行错开进来，标题走得更远、更重 */
      .site-ready .hero-copy > * {
        animation: hero-rise 1000ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
      }

      .site-ready .hero-copy .kicker {
        animation-delay: 60ms;
      }

      .site-ready .hero-copy h1 {
        animation: hero-rise-title 1150ms cubic-bezier(0.14, 0.86, 0.2, 1) both;
        animation-delay: 220ms;
      }

      .site-ready .hero-copy .lead {
        animation-delay: 520ms;
      }

      .site-ready .hero-copy .hero-caption {
        animation-delay: 720ms;
      }

      .site-ready .hero-copy .hero-contact {
        animation-delay: 820ms;
      }

      .site-ready .hero-copy .hero-accent {
        animation-delay: 460ms;
      }

      .site-ready .hero-copy .hero-coords {
        animation-delay: 900ms;
      }

      /* ================= 极简首屏排版 ================= */
      .hero-title-wide {
        max-width: none;
        font-size: clamp(40px, 5.6vw, 82px);
        font-weight: 300;
        letter-spacing: 0.2em;
        line-height: 1;
        text-transform: uppercase;
      }

      .hero-accent {
        display: block;
        width: 78px;
        height: 2px;
        margin: 28px 0;
        background: linear-gradient(90deg, var(--cyan), var(--orange));
      }

      .hero-copy--lead .lead {
        margin-top: 0;
        font-size: clamp(22px, 2.2vw, 32px);
        font-weight: 340;
        letter-spacing: 0.01em;
        color: rgba(242, 239, 232, 0.9);
      }

      .hero-copy--lead .hero-caption {
        margin-top: 16px;
        color: rgba(242, 239, 232, 0.6);
        font-size: 16px;
      }

      .hero-copy--lead .hero-contact {
        margin-top: 8px;
        color: rgba(242, 239, 232, 0.72);
        font-size: 15px;
        letter-spacing: 0.04em;
      }

      .hero-coords {
        margin-top: 62px;
        display: flex;
        flex-direction: column;
        gap: 13px;
        font-family: var(--font-mono);
        font-size: 12.5px;
        letter-spacing: 0.06em;
        color: rgba(242, 239, 232, 0.52);
      }

      .hero-coords span {
        display: inline-flex;
        align-items: center;
        gap: 13px;
      }

      .hero-coords i {
        position: relative;
        width: 22px;
        height: 1px;
        background: rgba(242, 239, 232, 0.42);
      }

      .hero-coords i::before {
        content: "";
        position: absolute;
        left: -5px;
        top: 50%;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--cyan);
        transform: translateY(-50%);
      }

      .hero-coords b {
        color: var(--orange);
        font-weight: 500;
      }

      .hero-copy h1,
      .hero-copy .lead,
      .hero-copy .hero-caption,
      .hero-copy .hero-contact,
      .hero-copy .hero-coords {
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72), 0 1px 3px rgba(0, 0, 0, 0.55);
      }

      /* 最左侧竖轴 */
      .hero-rail {
        position: absolute;
        left: 38px;
        top: 16%;
        bottom: 9%;
        width: 1px;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(
          180deg,
          transparent,
          rgba(242, 239, 232, 0.18) 12%,
          rgba(242, 239, 232, 0.18) 88%,
          transparent
        );
      }

      .hero-rail::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -3px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(242, 239, 232, 0.55);
        transform: translateX(-50%);
      }

      /* 线索：档案缓冲提示 + 解码中线（就在档案将要裂开的那条线上）
         只铺在画面右侧宇宙区，避开左侧文案 */
      .hero-seam {
        position: absolute;
        top: 50%;
        left: 45%;
        right: 38px;
        transform: translateY(-50%);
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 16px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 1000ms ease 400ms;
      }

      .site-ready .hero-seam { opacity: 1; }

      .hero-seam-tag {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.1em;
        color: rgba(226, 240, 244, 0.5);
        white-space: nowrap;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
      }

      .hero-seam-tag .seam-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 8px var(--cyan);
        animation: live-pulse 1.8s ease-in-out infinite;
      }

      .hero-seam-line {
        position: relative;
        flex: 1;
        height: 1px;
        overflow: hidden;
        background: linear-gradient(90deg, rgba(114, 203, 212, 0.42), rgba(114, 203, 212, 0.14) 44%, transparent 82%);
      }

      /* 一道扫描光点沿中线缓缓划过，暗示这条线是“活的”接口 */
      .seam-scan {
        position: absolute;
        top: 50%;
        left: 0;
        width: 60px;
        height: 1px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, transparent, rgba(167, 244, 255, 0.9), transparent);
        animation: seam-scan-move 4.2s ease-in-out infinite;
      }

      @keyframes seam-scan-move {
        0% { left: -60px; opacity: 0; }
        24% { opacity: 1; }
        70% { opacity: 1; }
        100% { left: 100%; opacity: 0; }
      }

      /* 底部：只留极轻的滚动提示 */
      .hero-bottomline a {
        border: none;
        padding: 0;
        font-family: var(--font-mono);
        letter-spacing: 0.12em;
        color: rgba(242, 239, 232, 0.5);
        text-transform: uppercase;
      }

      .hero-bottomline a:hover {
        color: var(--ink);
      }

      .semantic-links {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 12px;
        max-width: min(560px, 52vw);
      }

      .semantic-links a {
        color: rgba(242, 239, 232, 0.44);
      }

      .semantic-links a::before {
        content: "/";
        margin-right: 3px;
        color: rgba(114, 203, 212, 0.50);
      }

      .semantic-links a:hover {
        color: var(--ink);
      }

      @keyframes hero-rise {
        from {
          opacity: 0;
          transform: translateY(24px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes hero-rise-title {
        from {
          opacity: 0;
          transform: translateY(40px) scale(1.03);
        }
        60% {
          opacity: 1;
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .slide.is-active .reveal {
        animation: rise-in 900ms ease both;
      }

      .hero-caption {
        max-width: 560px;
        margin-top: 24px;
        color: rgba(242, 239, 232, 0.74);
        font-size: 18px;
        line-height: 1.62;
      }

      .tag {
        display: inline-flex;
        width: fit-content;
        margin-bottom: 12px;
        padding: 7px 10px;
        border: 1px solid rgba(114, 203, 212, 0.32);
        color: var(--cyan);
        font-size: 11px;
      }

      .signal-card,
      .terminal,
      .card,
      .diagram,
      .qr-panel {
        border: 1px solid var(--line);
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
          rgba(3, 6, 7, 0.72);
        /* 不用 backdrop-filter：25 处实时模糊 × 8 屏满幅底图会让页面卡死。
           改用更实的半透明底，深色下观感一致但零合成开销。 */
        box-shadow: 0 22px 72px rgba(0, 0, 0, 0.22);
      }

      .signal-card,
      .terminal {
        position: relative;
        overflow: hidden;
        padding: 20px;
      }

      .signal-card::after,
      .terminal::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent, rgba(114, 203, 212, 0.10), transparent);
        opacity: 0.28;
        transform: translateY(-100%);
        animation: scan 5.6s ease-in-out infinite;
        pointer-events: none;
      }

      .signal-head {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 16px;
        color: var(--quiet);
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      /* ---- 第 02 屏：活粒子肖像 ---- */
      .portrait-livetag {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--cyan);
      }

      .portrait-livetag i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 8px var(--cyan);
        animation: live-pulse 1.8s ease-in-out infinite;
      }

      @keyframes live-pulse {
        0%, 100% { opacity: 0.35; }
        50% { opacity: 1; }
      }

      .portrait-stage {
        position: relative;
        width: 100%;
        aspect-ratio: 3 / 2;
        max-height: 42vh;
        margin: 2px 0 16px;
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
        background:
          radial-gradient(ellipse 70% 62% at 58% 44%, rgba(18, 42, 55, 0.55), transparent 72%),
          #04070a;
      }

      .portrait-stage canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1200ms ease;
      }

      .portrait-stage.portrait-ready canvas {
        opacity: 1;
      }

      .portrait-scanline {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: repeating-linear-gradient(
          0deg,
          rgba(120, 200, 220, 0.045) 0 1px,
          transparent 1px 4px
        );
        mix-blend-mode: screen;
      }

      .portrait-caption {
        position: absolute;
        left: 12px;
        bottom: 10px;
        color: rgba(226, 240, 244, 0.6);
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        pointer-events: none;
        opacity: 0;
        transition: opacity 1200ms ease 400ms;
      }

      .portrait-stage.portrait-ready .portrait-caption {
        opacity: 1;
      }

      /* 没有 WebGL / 素材加载失败：整块隐藏，右列只剩对白 */
      .portrait-stage.portrait-unavailable {
        display: none;
      }

      .signal-head strong {
        color: var(--ink);
        font-weight: 500;
      }

      .wave {
        display: flex;
        align-items: end;
        gap: 4px;
        height: 86px;
        margin-bottom: 16px;
        padding: 13px;
        border: 1px solid rgba(242, 239, 232, 0.11);
        background: rgba(0, 0, 0, 0.22);
      }

      .wave span {
        display: block;
        flex: 1;
        min-width: 3px;
        height: 32%;
        background: rgba(242, 239, 232, 0.66);
        transform-origin: center bottom;
        animation: wave 2.25s ease-in-out infinite;
      }

      .wave span:nth-child(2n) {
        height: 58%;
        animation-delay: -0.25s;
      }

      .wave span:nth-child(3n) {
        height: 78%;
        animation-delay: -0.72s;
      }

      .wave span:nth-child(5n) {
        height: 42%;
        background: rgba(255, 107, 74, 0.72);
        animation-delay: -1.12s;
      }

      .dialogue {
        display: grid;
        gap: 10px;
        font-family: var(--font-mono);
        font-size: 13px;
        line-height: 1.6;
        letter-spacing: 0.02em;
      }

      .dialogue p {
        color: rgba(242, 239, 232, 0.76);
      }

      .slide.is-active .dialogue p {
        opacity: 0;
        transform: translateY(6px);
        animation: rise-in 640ms ease forwards;
      }

      .slide.is-active .dialogue p:nth-child(2) {
        animation-delay: 240ms;
      }

      .slide.is-active .dialogue p:nth-child(3) {
        animation-delay: 480ms;
      }

      .dialogue b {
        color: var(--cyan);
        font-weight: 500;
      }

      .dialogue .reply b {
        color: var(--orange);
      }

      .dialogue .system b {
        color: var(--green);
      }

      .module-grid,
      .topic-grid,
      .experience-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 30px;
      }

      .system-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-top: 22px;
      }

      /* 能力屏叠加证据库：收紧标题与卡片，保证 FEED 完整入屏 */
      #s04 h2 {
        max-width: 720px;
        font-size: clamp(26px, 2.7vw, 40px);
        line-height: 1.06;
      }

      #s04 .module-grid .card.minimal {
        min-height: 0;
        padding: 14px 16px;
      }

      #s04 .module-grid .card.minimal h3 {
        margin-top: 8px;
        font-size: clamp(17px, 1.35vw, 21px);
        line-height: 1.16;
      }

      #s04 .feed {
        margin-top: 14px;
      }

      #s04 .signal-card {
        padding: 12px 16px;
      }

      #s04 .module-grid .card.minimal .desc {
        margin-top: 7px;
        font-size: 12.5px;
      }

      /* 采样管线整幅呈现即可，无需裁切 */
      #s04 .feed-screen {
        max-height: 150px;
      }

      /* 公开信号屏：TaoHtml 产出是主证据，放大呈现 */
      #s05 .stage {
        grid-template-columns: minmax(0, 0.62fr) minmax(420px, 0.78fr);
        gap: 40px;
      }

      #s05 h2 {
        font-size: clamp(30px, 3.2vw, 48px);
      }

      /* 观测屏承载真实报告：收紧标题，保证监视器完整入屏 */
      #s03 h2 {
        max-width: 620px;
        font-size: clamp(28px, 3vw, 44px);
        line-height: 1.06;
      }

      #s03 .lead {
        margin-top: 12px;
        font-size: 15px;
      }

      /* 深空监视器：真实产品截图作为“正在接收的画面”承载，而非贴图 */
      .feed {
        margin: 26px 0 0;
        border: 1px solid rgba(114, 203, 212, 0.28);
        background: rgba(3, 6, 7, 0.78);
      }

      .feed-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 12px;
        border-bottom: 1px solid rgba(114, 203, 212, 0.22);
        color: var(--cyan);
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .feed-live {
        color: var(--orange);
      }

      .feed-screen {
        position: relative;
        overflow: hidden;
        line-height: 0;
      }

      .feed-screen img {
        display: block;
        width: 100%;
        filter: saturate(0.88) brightness(0.92);
      }

      /* 扫描线：让截图看起来是监视器上的信号，而不是贴上去的图片 */
      .feed-screen::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0px,
          rgba(0, 0, 0, 0) 2px,
          rgba(0, 0, 0, 0.16) 3px
        );
        pointer-events: none;
      }

      .feed-note {
        padding: 8px 12px;
        border-top: 1px solid rgba(114, 203, 212, 0.18);
        color: var(--quiet);
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: 0.04em;
      }

      /* 联系频道列表 */
      .channel-list {
        margin: 16px 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 13px;
      }

      .channel-list li {
        display: grid;
        gap: 3px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--line);
      }

      .channel-list li:last-child {
        border-bottom: 0;
        padding-bottom: 0;
      }

      .channel-list span {
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: 0.1em;
        color: var(--quiet);
      }

      .channel-list a {
        color: var(--cyan);
        font-size: 15px;
      }

      .channel-list a:hover {
        color: var(--ink);
      }

      .channel-list b {
        font-weight: 500;
        font-size: 15px;
      }

      /* 成果屏承载 8 张卡片：压缩标题与间距，保证两行卡片完整入屏 */
      #s06 h2 {
        max-width: 760px;
        font-size: clamp(26px, 2.7vw, 40px);
        line-height: 1.04;
      }

      #s06 .signal-card {
        padding: 12px 16px;
      }

      #s06 .kicker {
        margin-top: 14px;
      }

      /* 八套系统同屏：卡片降密度，标题收窄，避免挤压 */
      .system-grid .card.minimal {
        min-height: 0;
        padding: 15px 16px;
        align-content: start;
      }

      .system-grid .card.minimal h3 {
        margin-top: 9px;
        font-size: clamp(16px, 1.28vw, 20px);
        line-height: 1.18;
        letter-spacing: -0.03em;
      }

      .card {
        padding: 20px;
      }

      .card.minimal {
        display: grid;
        min-height: 148px;
        align-content: space-between;
      }

      .card.minimal h3 {
        font-size: clamp(24px, 2.4vw, 34px);
        line-height: 1.05;
      }

      /* 成果卡片：状态徽章 + 可点入口 */
      .card .meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .card .meta .st {
        padding: 3px 7px;
        border: 1px solid rgba(158, 230, 184, 0.34);
        color: var(--green);
      }

      .card .meta .st.beta {
        border-color: rgba(255, 107, 74, 0.36);
        color: var(--orange);
      }

      .card .meta a {
        color: var(--cyan);
        border-bottom: 1px solid rgba(114, 203, 212, 0.4);
      }

      .card .meta a:hover {
        color: var(--ink);
        border-bottom-color: var(--ink);
      }

      .card .desc {
        margin-top: 9px;
        color: var(--muted);
        font-size: 13.5px;
        line-height: 1.5;
        letter-spacing: -0.01em;
        text-transform: none;
      }

      .card p {
        margin-top: 12px;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.62;
      }

      .card.wide {
        grid-column: 1 / -1;
      }

      .diagram {
        padding: 22px;
      }

      .visual-board {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 330px;
        border: 1px solid var(--line);
        background:
          radial-gradient(circle at center, rgba(114, 203, 212, 0.12), transparent 38%),
          rgba(0, 0, 0, 0.24);
        overflow: hidden;
      }

      .visual-board::before,
      .visual-board::after {
        content: "";
        position: absolute;
        width: 320px;
        height: 128px;
        border: 1px solid rgba(114, 203, 212, 0.24);
        border-radius: 50%;
        transform: rotate(-18deg);
      }

      .visual-board::after {
        width: 420px;
        height: 166px;
        border-color: rgba(255, 107, 74, 0.18);
        transform: rotate(24deg);
      }

      .visual-center {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 164px;
        height: 164px;
        border: 1px solid rgba(242, 239, 232, 0.24);
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.28);
        text-align: center;
      }

      .visual-center strong {
        display: block;
        font-size: 22px;
      }

      .visual-center span {
        color: var(--muted);
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .keyword-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 28px;
      }

      .keyword-strip span {
        padding: 10px 12px;
        border: 1px solid rgba(242, 239, 232, 0.14);
        background: rgba(255, 255, 255, 0.035);
        color: rgba(242, 239, 232, 0.74);
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .flow {
        display: grid;
        gap: 12px;
      }

      .flow-step {
        padding: 15px 16px;
        border: 1px solid rgba(114, 203, 212, 0.24);
        background: rgba(114, 203, 212, 0.045);
      }

      .flow-step strong {
        display: block;
        margin-bottom: 5px;
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--cyan);
        letter-spacing: 0.05em;
      }

      .flow-step span {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.5;
      }

      .flow-arrow {
        color: var(--orange);
        font-family: var(--font-mono);
        text-align: center;
      }

      .qr-panel {
        padding: 22px;
      }

      .qr-box {
        display: grid;
        place-items: center;
        min-height: 300px;
        margin-top: 12px;
        border: 1px dashed rgba(242, 239, 232, 0.26);
        color: var(--quiet);
        font-family: var(--font-mono);
        font-size: 13px;
        letter-spacing: 0.08em;
        text-align: center;
      }

      .contact-list {
        display: grid;
        gap: 12px;
        margin: 28px 0 0;
        padding: 0;
        list-style: none;
      }

      .contact-list li {
        padding: 13px 0;
        border-bottom: 1px solid var(--line);
        color: rgba(242, 239, 232, 0.78);
        font-size: 17px;
      }

      /* 配乐开关：直接显示在首屏顶栏中间 */
      .track-toggle {
        position: fixed;
        z-index: 12;
        top: 52px;
        left: 50%;
        display: flex;
        gap: 9px;
        align-items: center;
        padding: 5px 13px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(3, 6, 7, 0.62);
        color: var(--quiet);
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.16em;
        cursor: pointer;
        opacity: 1;
        transform: translate(-50%, 0);
        pointer-events: auto;
        transition: opacity 700ms ease, transform 700ms ease, color 240ms ease, border-color 240ms ease;
      }

      .track-toggle:hover {
        border-color: rgba(114, 203, 212, 0.42);
        color: var(--ink);
      }

      .track-bars {
        display: flex;
        gap: 2px;
        align-items: flex-end;
        width: 13px;
        height: 11px;
      }

      .track-bars i {
        flex: 1;
        border-radius: 1px;
        background: var(--cyan);
        transform-origin: 50% 100%;
        animation: track-eq 900ms ease-in-out infinite alternate;
      }

      .track-bars i:nth-child(2) {
        animation-duration: 620ms;
      }

      .track-bars i:nth-child(3) {
        animation-duration: 1180ms;
      }

      /* 暂停时把跳动的条变成三条静止的灰线 */
      .track-toggle[aria-pressed="false"] .track-bars i {
        background: var(--quiet);
        height: 3px;
        animation: none;
      }

      @keyframes track-eq {
        from {
          height: 3px;
          opacity: 0.55;
        }
        to {
          height: 11px;
          opacity: 1;
        }
      }

      /* ---- 滚动歌词（提词器式三行窗口，停在顶部播放钮下方）---- */
      .lyric-strip {
        position: fixed;
        z-index: 11;
        top: 92px;
        left: 50%;
        width: min(600px, 74vw);
        height: 114px;
        transform: translateX(-50%);
        overflow: hidden;
        text-align: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity 700ms ease;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
      }

      .lyric-strip.is-on {
        opacity: 1;
      }

      .lyric-track {
        transition: transform 520ms cubic-bezier(0.22, 0.7, 0.2, 1);
        will-change: transform;
      }

      .lyric-line {
        height: 38px;
        line-height: 38px;
        font-family: var(--font-mono);
        font-size: 13.5px;
        letter-spacing: 0.03em;
        color: rgba(226, 240, 244, 0.32);
        transition: color 320ms ease, opacity 320ms ease, text-shadow 320ms ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 12px;
      }

      .lyric-line.is-current {
        color: var(--ink);
        text-shadow: 0 0 16px rgba(114, 203, 212, 0.45);
      }

      @keyframes rise-in {
        from {
          opacity: 0;
          transform: translateY(12px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes wave {
        0%,
        100% {
          transform: scaleY(0.72);
          opacity: 0.46;
        }
        50% {
          transform: scaleY(1.18);
          opacity: 0.92;
        }
      }

      @keyframes scan {
        0% {
          transform: translateY(-100%);
        }
        42%,
        100% {
          transform: translateY(100%);
        }
      }

      @media (max-width: 900px) {
        .slide-inner {
          width: min(100vw - 34px, 680px);
          padding: 38px 0 30px;
        }

        .slide::before {
          inset: 12px;
        }

        .stage,
        .stage.single,
        .hero-stage {
          grid-template-columns: 1fr;
          gap: 28px;
          align-self: start;
          padding-top: 28px;
          overflow-y: auto;
        }

        h1 {
          font-size: clamp(44px, 14vw, 78px);
        }

        h2 {
          font-size: clamp(34px, 11vw, 58px);
        }

        .module-grid,
        .topic-grid,
        .experience-grid,
        .system-grid {
          grid-template-columns: 1fr;
        }

        .topline,
        .bottomline {
          font-size: 10px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          transition: none !important;
          scroll-behavior: auto !important;
        }

        .hero-copy,
        .dialogue p {
          opacity: 1 !important;
          transform: none !important;
        }

      }

      /* ================= 档案层（浅色卡片，覆盖在电影前门之上） ================= */
      #dossier {
        --paper: #04060a;
        --card: rgba(6, 10, 13, 0.72);
        --card-2: rgba(255, 255, 255, 0.05);
        --d-ink: #f2efe8;
        --d-ink-soft: rgba(242, 239, 232, 0.74);
        --d-muted: rgba(242, 239, 232, 0.44);
        --d-line: rgba(114, 203, 212, 0.22);
        --d-line-soft: rgba(242, 239, 232, 0.1);
        --d-accent: #72cbd4;   /* 标签/链接：信号青 */
        --d-hot: #ff6b4a;      /* 高亮：告警橙 */
        --serif: "Songti SC", "STSong", Georgia, "Times New Roman", serif;
        position: fixed;
        inset: 0;
        z-index: 30;
        color: var(--d-ink);
        /* 深空终端底：暗场 + 冷暖辉光 + 极淡数据网格 */
        background:
          linear-gradient(rgba(114, 203, 212, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(114, 203, 212, 0.05) 1px, transparent 1px),
          radial-gradient(120% 80% at 80% 4%, rgba(255, 107, 74, 0.10), transparent 44%),
          radial-gradient(90% 74% at 8% 96%, rgba(114, 203, 212, 0.10), transparent 46%),
          linear-gradient(135deg, #05080b 0%, #080c11 58%, #04060a 100%);
        background-size: 48px 48px, 48px 48px, auto, auto, auto;
        opacity: 0;
        pointer-events: none;
        /* 从画面中线“解码展开”：信号收拢成一条线，再展成档案 */
        clip-path: inset(49.6% 0 49.6% 0);
        transition: opacity 620ms ease, clip-path 880ms cubic-bezier(0.5, 0, 0.12, 1);
        overflow: hidden;
      }
      body.stage-dossier #dossier { opacity: 1; pointer-events: auto; clip-path: inset(0 0 0 0); }

      /* 解码横线 + 标签：交代“这是被解码出来的档案” */
      .dsr-open { position: absolute; inset: 0; z-index: 60; pointer-events: none; display: grid; place-items: center; opacity: 0; }
      .dsr-open::before {
        content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
        transform: translateY(-50%) scaleX(0.15); opacity: 0;
        background: linear-gradient(90deg, transparent, var(--d-accent) 30%, #fff 50%, var(--d-accent) 70%, transparent);
        box-shadow: 0 0 26px rgba(210, 74, 42, 0.6);
      }
      .dsr-openlabel { font-family: var(--font-mono); font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--d-ink); opacity: 0; }
      body.stage-dossier .dsr-open { animation: dsr-open-fade 1000ms ease both; }
      body.stage-dossier .dsr-open::before { animation: dsr-open-line 1000ms cubic-bezier(.4,0,.2,1) both; }
      body.stage-dossier .dsr-openlabel { animation: dsr-open-label 1150ms ease both; }
      @keyframes dsr-open-fade { 0% { opacity: 1; } 100% { opacity: 0; } }
      @keyframes dsr-open-line {
        0% { opacity: 0; transform: translateY(-50%) scaleX(0.15); }
        16% { opacity: 1; transform: translateY(-50%) scaleX(1); }
        52% { opacity: 0.85; }
        100% { opacity: 0; transform: translateY(-50%) scaleX(1); }
      }
      @keyframes dsr-open-label {
        0% { opacity: 0; letter-spacing: .5em; }
        22% { opacity: 0.92; letter-spacing: .34em; }
        62% { opacity: 0.92; }
        100% { opacity: 0; }
      }
      /* 进入档案时，前门的深色音乐控件与歌词条收起 */
      /* 歌词条会和卡片打架，进档案时仅隐藏歌词；音乐控件保留 */
      body.stage-dossier .lyric-strip { opacity: 0 !important; pointer-events: none !important; }
      /* 播放控件延续到档案，抬到档案之上仍可点 */
      body.stage-dossier .track-toggle { z-index: 40; }

      .dsr-head {
        position: absolute; top: 30px; left: 44px; right: 44px; z-index: 4;
        display: flex; align-items: center; justify-content: space-between;
        font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
        color: var(--d-muted);
      }
      .dsr-brand { font-weight: 600; letter-spacing: .3em; color: var(--d-ink); text-decoration: none; display: inline-flex; align-items: center; }
      .dsr-brand i { width: .55em; height: .55em; border: 1.4px solid currentColor; border-radius: 50%; margin: 0 .3em; display: inline-block; }
      .dsr-ext { text-decoration: none; color: var(--d-muted); }
      .dsr-ext:hover { color: var(--d-accent); }

      .dsr-deck { position: absolute; inset: 0; }
      #dossier .card {
        position: absolute; top: 50%; left: 50%;
        width: min(940px, 92vw); height: min(600px, 76vh);
        margin: 0; padding: 50px 54px;
        /* 深空终端面板：暗底 + 扫描线 + 冷光描边 */
        background:
          repeating-linear-gradient(0deg, rgba(114, 203, 212, 0.028) 0 1px, transparent 1px 3px),
          linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)),
          rgba(6, 10, 13, 0.76);
        border: 1px solid var(--d-line);
        border-radius: 14px;
        box-shadow: 0 40px 100px -28px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 44px rgba(114, 203, 212, 0.04);
        transition: transform .6s cubic-bezier(.2,.7,.15,1), opacity .5s ease, filter .5s ease;
        will-change: transform, opacity, filter;
        overflow: hidden;
      }
      #dossier .card.peek { cursor: pointer; }
      /* 顶部一道青色 HUD 描边 */
      #dossier .card::after {
        content: attr(data-idx) " / " attr(data-en);
        position: absolute; top: 22px; right: 30px;
        font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--d-accent);
      }
      #dossier .c-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--d-accent); margin: 0; }
      #dossier .c-title { font-family: var(--serif); font-weight: 600; line-height: 1.06; letter-spacing: -.01em; margin: 18px 0 0; color: var(--d-ink); }

      #dossier .about .big { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 52px); line-height: 1.12; letter-spacing: -.01em; margin: 26px 0 28px; max-width: 20ch; }
      #dossier .about .big .q { color: var(--d-hot); }
      #dossier .about .lede { font-size: 17px; line-height: 1.7; color: var(--d-ink-soft); max-width: 60ch; }
      #dossier .about .lede b { color: var(--d-ink); font-weight: 600; }
      #dossier .about .mini { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 26px; font-family: var(--font-mono); font-size: 12.5px; color: var(--d-muted); }
      #dossier .about .mini b { color: var(--d-ink); font-weight: 500; }
      #dossier .about .mini a { color: var(--d-accent); text-decoration: none; }

      #dossier .method .c-title { font-size: clamp(26px, 3vw, 40px); }
      #dossier .method .rows { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
      #dossier .method .rows .m { border-top: 2px solid var(--d-ink); padding-top: 14px; }
      #dossier .method .rows .t { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--d-accent); }
      #dossier .method .rows h4 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 8px 0; color: var(--d-ink); }
      #dossier .method .rows p { margin: 0; color: var(--d-ink-soft); font-size: 14px; line-height: 1.55; }
      #dossier .method .path { margin-top: 30px; padding: 18px 20px; background: var(--card-2); border-radius: 10px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12.5px; color: var(--d-ink); }
      #dossier .method .path .lbl { color: var(--d-muted); text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; }
      #dossier .method .path em { color: var(--d-muted); font-style: normal; }
      #dossier .method .path .arw { color: var(--d-accent); }

      #dossier .build .c-title { font-size: clamp(24px, 2.6vw, 34px); }
      #dossier .build .grid { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
      #dossier .build .s { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--d-line-soft); }
      #dossier .build .s .p { font-family: var(--font-mono); font-size: 12px; color: var(--d-muted); }
      #dossier .build .s .n { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--d-ink); }
      #dossier .build .s .st { font-family: var(--font-mono); font-size: 11px; color: var(--d-muted); text-align: right; white-space: nowrap; }
      #dossier .build .s .st a { color: var(--d-accent); text-decoration: none; }

      #dossier .exp .c-title { font-size: clamp(24px, 2.8vw, 38px); }
      #dossier .exp .rows { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
      #dossier .exp .t { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--d-muted); border-top: 1px solid var(--d-ink); padding-top: 14px; display: block; }
      #dossier .exp h4 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 10px 0 8px; color: var(--d-ink); }
      #dossier .exp p { margin: 0; color: var(--d-ink-soft); font-size: 14px; line-height: 1.6; }

      #dossier .writing .wrap5 { margin-top: 26px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
      #dossier .writing .feat { border-left: 2px solid var(--d-hot); padding-left: 22px; }
      #dossier .writing .feat .wcat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--d-accent); margin: 0; }
      #dossier .writing .feat h3 { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; margin: 14px 0 0; line-height: 1.24; }
      #dossier .writing .feat h3 a, #dossier .writing .list h4 a { color: var(--d-ink); text-decoration: none; }
      #dossier .writing .feat h3 a:hover, #dossier .writing .list h4 a:hover { color: var(--d-accent); }
      #dossier .writing .read { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--d-accent); text-decoration: none; }
      #dossier .writing .list .p { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--d-line-soft); }
      #dossier .writing .list .p:first-child { border-top: 1px solid var(--d-line); }
      #dossier .writing .list .num { font-family: var(--serif); font-size: 30px; color: var(--d-line); font-weight: 600; }
      #dossier .writing .list h4 { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; color: var(--d-ink); }
      #dossier .writing .list .pm { font-family: var(--font-mono); font-size: 11px; color: var(--d-muted); display: flex; gap: 14px; }
      #dossier .writing .note { margin-top: 20px; font-family: var(--font-mono); font-size: 11.5px; color: var(--d-muted); }

      #dossier .contact .big { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3vw, 40px); line-height: 1.08; margin: 22px 0 22px; max-width: 23ch; color: var(--d-ink); }
      #dossier .contact .links { font-family: var(--font-mono); max-width: 620px; }
      #dossier .contact .links .row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--d-line); }
      #dossier .contact .links .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--d-muted); }
      #dossier .contact .links .v { font-size: 16px; color: var(--d-ink); }
      #dossier .contact .links a,
      #dossier .contact .links button {
        all: unset;
        cursor: pointer;
        color: var(--d-ink);
        text-decoration: none;
      }
      #dossier .contact .links a:hover,
      #dossier .contact .links button:hover,
      #dossier .contact .links a:focus-visible,
      #dossier .contact .links button:focus-visible {
        color: var(--d-accent);
      }

      .official-qr-modal {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: grid;
        place-items: center;
        padding: 28px;
        background: rgba(1, 4, 6, 0.74);
      }

      .official-qr-modal[hidden] {
        display: none;
      }

      .official-qr-panel {
        position: relative;
        width: min(360px, calc(100vw - 56px));
        padding: 22px;
        border: 1px solid rgba(114, 203, 212, 0.34);
        border-radius: 10px;
        background: rgba(5, 11, 13, 0.94);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
        font-family: var(--font-mono);
        color: var(--d-ink);
      }

      .official-qr-close {
        all: unset;
        position: absolute;
        top: 10px;
        right: 12px;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        cursor: pointer;
        color: var(--d-muted);
        font-size: 22px;
        line-height: 1;
      }

      .official-qr-close:hover,
      .official-qr-close:focus-visible {
        color: var(--d-accent);
      }

      .official-qr-title {
        margin: 0 36px 14px 0;
        font-size: 12px;
        letter-spacing: .12em;
        color: var(--d-accent);
      }

      .official-qr-name {
        margin: 0 0 18px;
        font-family: var(--serif);
        font-size: 28px;
        font-weight: 600;
        color: var(--d-ink);
      }

      .official-qr-panel img {
        display: block;
        width: 100%;
        border-radius: 6px;
        background: #fff;
      }

      .dsr-dots { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 4; display: flex; gap: 26px; }
      .dsr-dots button { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--d-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; opacity: .5; transition: opacity .2s, color .2s; }
      .dsr-dots button .dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--d-muted); }
      .dsr-dots button.on { opacity: 1; color: var(--d-ink); }
      .dsr-dots button.on .dot { background: var(--d-accent); border-color: var(--d-accent); }
      .dsr-dots button:hover { opacity: 1; }

      .dsr-hint { position: absolute; bottom: 34px; left: 44px; z-index: 4; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--d-muted); text-transform: uppercase; }
      .dsr-hint a { color: var(--d-muted); text-decoration: none; }
      .dsr-hint a:hover { color: var(--d-accent); }
      .dsr-arrows { position: absolute; bottom: 24px; right: 40px; z-index: 4; display: flex; gap: 10px; }
      .dsr-arrows button { all: unset; cursor: pointer; width: 38px; height: 38px; border: 1px solid var(--d-line); border-radius: 50%; display: grid; place-items: center; color: var(--d-ink-soft); transition: border-color .2s, color .2s; }
      .dsr-arrows button:hover { border-color: var(--d-accent); color: var(--d-accent); }

      @media (max-width: 760px) {
        #dossier .card { padding: 34px 26px; width: 92vw; height: 80vh; }
        #dossier .method .rows, #dossier .exp .rows, #dossier .writing .wrap5, #dossier .build .grid { grid-template-columns: 1fr; gap: 16px; }
        #dossier .build .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
        #dossier .build .s { grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 9px 0; }
        #dossier .build .s .n { font-size: 15px; line-height: 1.22; }
        #dossier .build .s .st { grid-column: 2; text-align: left; margin-top: 2px; }
        .dsr-dots { display: none; }
        .official-qr-panel { width: min(340px, calc(100vw - 44px)); padding: 18px; }
      }

      @media (max-width: 360px) {
        #dossier .build { overflow-y: auto; }
      }