:root {
      --navy: #071c49;
      --navy-2: #0d2e68;
      --blue: #0f56e8;
      --blue-2: #2f82ff;
      --violet: #7547ed;
      --cyan: #21a8cf;
      --gold: #d6a63d;
      --ink: #0c2250;
      --text: #263957;
      --muted: #657591;
      --line: #cbd7ee;
      --soft: #f4f7fd;
      --white: #ffffff;
      --green: #168d67;
      --red: #c8455d;
      --shadow: 0 24px 70px rgba(17, 43, 91, .12);
      --font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
      --stage-scale: 1;
      --content-scale: 1;
      --visible-stage-width: 1600px;
      --visible-stage-height: 900px;
      --page-counter-right: 80px;
      --page-counter-bottom: 24px;
      --minute-watermark-left: 80px;
    }

    * { box-sizing: border-box; }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #ffffff;
      color: var(--text);
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    button,
    input { font: inherit; }

    button {
      border: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    button:focus-visible {
      outline: 4px solid rgba(214, 166, 61, .72);
      outline-offset: 4px;
    }

    #viewport {
      position: fixed;
      inset: 0;
      overflow: hidden;
      background: #ffffff;
    }

    #stage {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1600px;
      height: 900px;
      transform: translate(-50%, -50%) scale(var(--stage-scale));
      transform-origin: center center;
      background: var(--white);
      box-shadow: none;
      overflow: hidden;
      isolation: isolate;
      perspective: 1800px;
    }

    #stage::before { display: none; }

    .slide {
      position: absolute;
      inset: 0;
      width: 1600px;
      height: 900px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(28px);
      transition: opacity .32s ease, transform .42s ease, visibility 0s linear .45s;
      overflow: hidden;
      background: #ffffff;
    }

    .slide::before,
    .slide::after { display: none; }

    .slide.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(0);
      transition-delay: 0s;
      z-index: 3;
    }

    .slide.before { transform: translateX(-28px); }

    /* 全局翻页过场：随机模拟 PowerPoint 常见切换效果 */
    .slide.deck-transition-in,
    .slide.deck-transition-out {
      visibility: visible !important;
      pointer-events: none !important;
      transition: none !important;
      animation-duration: var(--deck-transition-duration, 680ms);
      animation-timing-function: cubic-bezier(.2, .76, .22, 1);
      animation-fill-mode: both;
      backface-visibility: hidden;
      transform-style: preserve-3d;
      will-change: transform, opacity, clip-path;
    }

    .slide.deck-transition-in { z-index: 7 !important; }
    .slide.deck-transition-out { z-index: 6 !important; }

    /* 淡化 */
    .slide.deck-transition-fade.deck-transition-in { animation-name: deck-fade-in; }
    .slide.deck-transition-fade.deck-transition-out { animation-name: deck-fade-out; }

    @keyframes deck-fade-in {
      from { opacity: 0; transform: scale(1.012); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes deck-fade-out {
      from { opacity: 1; transform: scale(1); }
      to { opacity: 0; transform: scale(.992); }
    }

    /* 推进 */
    .slide.deck-transition-push.deck-transition-forward.deck-transition-in { animation-name: deck-push-in-forward; }
    .slide.deck-transition-push.deck-transition-forward.deck-transition-out { animation-name: deck-push-out-forward; }
    .slide.deck-transition-push.deck-transition-backward.deck-transition-in { animation-name: deck-push-in-backward; }
    .slide.deck-transition-push.deck-transition-backward.deck-transition-out { animation-name: deck-push-out-backward; }

    @keyframes deck-push-in-forward {
      from { opacity: 1; transform: translate3d(100%, 0, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes deck-push-out-forward {
      from { opacity: 1; transform: translate3d(0, 0, 0); }
      to { opacity: 1; transform: translate3d(-100%, 0, 0); }
    }

    @keyframes deck-push-in-backward {
      from { opacity: 1; transform: translate3d(-100%, 0, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes deck-push-out-backward {
      from { opacity: 1; transform: translate3d(0, 0, 0); }
      to { opacity: 1; transform: translate3d(100%, 0, 0); }
    }

    /* 擦除 */
    .slide.deck-transition-wipe.deck-transition-forward.deck-transition-in { animation-name: deck-wipe-in-forward; }
    .slide.deck-transition-wipe.deck-transition-backward.deck-transition-in { animation-name: deck-wipe-in-backward; }
    .slide.deck-transition-wipe.deck-transition-out { animation-name: deck-transition-hold; }

    @keyframes deck-wipe-in-forward {
      from { opacity: 1; clip-path: inset(0 0 0 100%); }
      to { opacity: 1; clip-path: inset(0); }
    }

    @keyframes deck-wipe-in-backward {
      from { opacity: 1; clip-path: inset(0 100% 0 0); }
      to { opacity: 1; clip-path: inset(0); }
    }

    @keyframes deck-transition-hold {
      from { opacity: 1; transform: translate3d(0, 0, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    /* 缩放 */
    .slide.deck-transition-zoom.deck-transition-in { animation-name: deck-zoom-in; }
    .slide.deck-transition-zoom.deck-transition-out { animation-name: deck-zoom-out; }

    @keyframes deck-zoom-in {
      from { opacity: 0; transform: scale(.84); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes deck-zoom-out {
      from { opacity: 1; transform: scale(1); }
      to { opacity: 0; transform: scale(1.08); }
    }

    /* 翻转 */
    .slide.deck-transition-flip.deck-transition-forward.deck-transition-in {
      transform-origin: left center;
      animation-name: deck-flip-in-forward;
    }

    .slide.deck-transition-flip.deck-transition-forward.deck-transition-out {
      transform-origin: right center;
      animation-name: deck-flip-out-forward;
    }

    .slide.deck-transition-flip.deck-transition-backward.deck-transition-in {
      transform-origin: right center;
      animation-name: deck-flip-in-backward;
    }

    .slide.deck-transition-flip.deck-transition-backward.deck-transition-out {
      transform-origin: left center;
      animation-name: deck-flip-out-backward;
    }

    @keyframes deck-flip-in-forward {
      from { opacity: .18; transform: rotateY(74deg) scale(.97); }
      to { opacity: 1; transform: rotateY(0) scale(1); }
    }

    @keyframes deck-flip-out-forward {
      from { opacity: 1; transform: rotateY(0) scale(1); }
      to { opacity: 0; transform: rotateY(-58deg) scale(.97); }
    }

    @keyframes deck-flip-in-backward {
      from { opacity: .18; transform: rotateY(-74deg) scale(.97); }
      to { opacity: 1; transform: rotateY(0) scale(1); }
    }

    @keyframes deck-flip-out-backward {
      from { opacity: 1; transform: rotateY(0) scale(1); }
      to { opacity: 0; transform: rotateY(58deg) scale(.97); }
    }

    /* 中央展开 */
    .slide.deck-transition-split.deck-transition-in { animation-name: deck-split-in; }
    .slide.deck-transition-split.deck-transition-out { animation-name: deck-split-out; }

    @keyframes deck-split-in {
      from { opacity: 1; clip-path: inset(50% 0 50% 0); }
      to { opacity: 1; clip-path: inset(0); }
    }

    @keyframes deck-split-out {
      from { opacity: 1; transform: scale(1); }
      to { opacity: .72; transform: scale(.985); }
    }

    /* 覆盖 */
    .slide.deck-transition-cover.deck-transition-forward.deck-transition-in { animation-name: deck-cover-in-forward; }
    .slide.deck-transition-cover.deck-transition-backward.deck-transition-in { animation-name: deck-cover-in-backward; }
    .slide.deck-transition-cover.deck-transition-out { animation-name: deck-cover-out; }

    @keyframes deck-cover-in-forward {
      from { opacity: 1; transform: translate3d(100%, 0, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes deck-cover-in-backward {
      from { opacity: 1; transform: translate3d(-100%, 0, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes deck-cover-out {
      from { opacity: 1; transform: scale(1); }
      to { opacity: .90; transform: scale(.985); }
    }

    /* 垂直推进 */
    .slide.deck-transition-rise.deck-transition-forward.deck-transition-in { animation-name: deck-rise-in-forward; }
    .slide.deck-transition-rise.deck-transition-forward.deck-transition-out { animation-name: deck-rise-out-forward; }
    .slide.deck-transition-rise.deck-transition-backward.deck-transition-in { animation-name: deck-rise-in-backward; }
    .slide.deck-transition-rise.deck-transition-backward.deck-transition-out { animation-name: deck-rise-out-backward; }

    @keyframes deck-rise-in-forward {
      from { opacity: 1; transform: translate3d(0, 100%, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes deck-rise-out-forward {
      from { opacity: 1; transform: translate3d(0, 0, 0); }
      to { opacity: 1; transform: translate3d(0, -100%, 0); }
    }

    @keyframes deck-rise-in-backward {
      from { opacity: 1; transform: translate3d(0, -100%, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes deck-rise-out-backward {
      from { opacity: 1; transform: translate3d(0, 0, 0); }
      to { opacity: 1; transform: translate3d(0, 100%, 0); }
    }

    /* 立方体翻页 */
    .slide.deck-transition-cube.deck-transition-forward.deck-transition-in {
      transform-origin: left center;
      animation-name: deck-cube-in-forward;
    }

    .slide.deck-transition-cube.deck-transition-forward.deck-transition-out {
      transform-origin: right center;
      animation-name: deck-cube-out-forward;
    }

    .slide.deck-transition-cube.deck-transition-backward.deck-transition-in {
      transform-origin: right center;
      animation-name: deck-cube-in-backward;
    }

    .slide.deck-transition-cube.deck-transition-backward.deck-transition-out {
      transform-origin: left center;
      animation-name: deck-cube-out-backward;
    }

    @keyframes deck-cube-in-forward {
      from { opacity: .28; transform: translate3d(6%, 0, -120px) rotateY(88deg); }
      to { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0); }
    }

    @keyframes deck-cube-out-forward {
      from { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0); }
      to { opacity: .20; transform: translate3d(-6%, 0, -120px) rotateY(-88deg); }
    }

    @keyframes deck-cube-in-backward {
      from { opacity: .28; transform: translate3d(-6%, 0, -120px) rotateY(-88deg); }
      to { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0); }
    }

    @keyframes deck-cube-out-backward {
      from { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0); }
      to { opacity: .20; transform: translate3d(6%, 0, -120px) rotateY(88deg); }
    }

    /* 空间轮播 */
    .slide.deck-transition-carousel.deck-transition-forward.deck-transition-in { animation-name: deck-carousel-in-forward; }
    .slide.deck-transition-carousel.deck-transition-forward.deck-transition-out { animation-name: deck-carousel-out-forward; }
    .slide.deck-transition-carousel.deck-transition-backward.deck-transition-in { animation-name: deck-carousel-in-backward; }
    .slide.deck-transition-carousel.deck-transition-backward.deck-transition-out { animation-name: deck-carousel-out-backward; }

    @keyframes deck-carousel-in-forward {
      from { opacity: .12; transform: translate3d(38%, 0, -460px) rotateY(-24deg) scale(.92); }
      to { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0) scale(1); }
    }

    @keyframes deck-carousel-out-forward {
      from { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0) scale(1); }
      to { opacity: .10; transform: translate3d(-30%, 0, -520px) rotateY(20deg) scale(.88); }
    }

    @keyframes deck-carousel-in-backward {
      from { opacity: .12; transform: translate3d(-38%, 0, -460px) rotateY(24deg) scale(.92); }
      to { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0) scale(1); }
    }

    @keyframes deck-carousel-out-backward {
      from { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0) scale(1); }
      to { opacity: .10; transform: translate3d(30%, 0, -520px) rotateY(-20deg) scale(.88); }
    }

    /* 景深滑翔 */
    .slide.deck-transition-glide.deck-transition-forward.deck-transition-in { animation-name: deck-glide-in-forward; }
    .slide.deck-transition-glide.deck-transition-forward.deck-transition-out { animation-name: deck-glide-out-forward; }
    .slide.deck-transition-glide.deck-transition-backward.deck-transition-in { animation-name: deck-glide-in-backward; }
    .slide.deck-transition-glide.deck-transition-backward.deck-transition-out { animation-name: deck-glide-out-backward; }

    @keyframes deck-glide-in-forward {
      from { opacity: 0; transform: translate3d(22%, 9%, -260px) rotateZ(-1.8deg) scale(.94); }
      to { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) scale(1); }
    }

    @keyframes deck-glide-out-forward {
      from { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) scale(1); }
      to { opacity: 0; transform: translate3d(-16%, -6%, -320px) rotateZ(1.4deg) scale(.92); }
    }

    @keyframes deck-glide-in-backward {
      from { opacity: 0; transform: translate3d(-22%, -9%, -260px) rotateZ(1.8deg) scale(.94); }
      to { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) scale(1); }
    }

    @keyframes deck-glide-out-backward {
      from { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) scale(1); }
      to { opacity: 0; transform: translate3d(16%, 6%, -320px) rotateZ(-1.4deg) scale(.92); }
    }

    /* 柔和上下翻页：避免整页翻至侧面时出现白场闪烁 */
    .slide.deck-transition-swing.deck-transition-forward.deck-transition-in {
      transform-origin: bottom center;
      animation-name: deck-swing-in-forward;
    }

    .slide.deck-transition-swing.deck-transition-forward.deck-transition-out {
      transform-origin: top center;
      animation-name: deck-swing-out-forward;
    }

    .slide.deck-transition-swing.deck-transition-backward.deck-transition-in {
      transform-origin: top center;
      animation-name: deck-swing-in-backward;
    }

    .slide.deck-transition-swing.deck-transition-backward.deck-transition-out {
      transform-origin: bottom center;
      animation-name: deck-swing-out-backward;
    }

    @keyframes deck-swing-in-forward {
      from {
        opacity: 1;
        clip-path: inset(100% 0 0 0 round 18px);
        transform: translate3d(0, 5%, -36px) rotateX(4deg) scale(.988);
      }
      to {
        opacity: 1;
        clip-path: inset(0 round 0);
        transform: translate3d(0, 0, 0) rotateX(0) scale(1);
      }
    }

    @keyframes deck-swing-out-forward {
      from { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) scale(1); }
      to { opacity: .94; transform: translate3d(0, -1.6%, -54px) rotateX(-2deg) scale(.992); }
    }

    @keyframes deck-swing-in-backward {
      from {
        opacity: 1;
        clip-path: inset(0 0 100% 0 round 18px);
        transform: translate3d(0, -5%, -36px) rotateX(-4deg) scale(.988);
      }
      to {
        opacity: 1;
        clip-path: inset(0 round 0);
        transform: translate3d(0, 0, 0) rotateX(0) scale(1);
      }
    }

    @keyframes deck-swing-out-backward {
      from { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) scale(1); }
      to { opacity: .94; transform: translate3d(0, 1.6%, -54px) rotateX(2deg) scale(.992); }
    }

    /* 光圈聚焦 */
    .slide.deck-transition-iris.deck-transition-forward.deck-transition-in { animation-name: deck-iris-in-forward; }
    .slide.deck-transition-iris.deck-transition-backward.deck-transition-in { animation-name: deck-iris-in-backward; }
    .slide.deck-transition-iris.deck-transition-out { animation-name: deck-transition-hold; }

    @keyframes deck-iris-in-forward {
      from { opacity: 1; clip-path: circle(0 at 62% 50%); transform: scale(1.025); }
      to { opacity: 1; clip-path: circle(84% at 62% 50%); transform: scale(1); }
    }

    @keyframes deck-iris-in-backward {
      from { opacity: 1; clip-path: circle(0 at 38% 50%); transform: scale(1.025); }
      to { opacity: 1; clip-path: circle(84% at 38% 50%); transform: scale(1); }
    }

    /* 菱形展开 */
    .slide.deck-transition-diamond.deck-transition-in { animation-name: deck-diamond-in; }
    .slide.deck-transition-diamond.deck-transition-out { animation-name: deck-transition-hold; }

    @keyframes deck-diamond-in {
      from { opacity: 1; clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); transform: scale(1.025); }
      to { opacity: 1; clip-path: polygon(50% -62%, 162% 50%, 50% 162%, -62% 50%); transform: scale(1); }
    }

    /* 对角切入 */
    .slide.deck-transition-diagonal.deck-transition-forward.deck-transition-in { animation-name: deck-diagonal-in-forward; }
    .slide.deck-transition-diagonal.deck-transition-backward.deck-transition-in { animation-name: deck-diagonal-in-backward; }
    .slide.deck-transition-diagonal.deck-transition-out { animation-name: deck-transition-hold; }

    @keyframes deck-diagonal-in-forward {
      from { opacity: 1; clip-path: polygon(100% 0, 100% 0, 0 100%, 0 100%); }
      to { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    }

    @keyframes deck-diagonal-in-backward {
      from { opacity: 1; clip-path: polygon(0 0, 0 0, 100% 100%, 100% 100%); }
      to { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    }

    /* 旋转聚合 */
    .slide.deck-transition-spiral.deck-transition-forward.deck-transition-in { animation-name: deck-spiral-in-forward; }
    .slide.deck-transition-spiral.deck-transition-forward.deck-transition-out { animation-name: deck-spiral-out-forward; }
    .slide.deck-transition-spiral.deck-transition-backward.deck-transition-in { animation-name: deck-spiral-in-backward; }
    .slide.deck-transition-spiral.deck-transition-backward.deck-transition-out { animation-name: deck-spiral-out-backward; }

    @keyframes deck-spiral-in-forward {
      from { opacity: 0; transform: translate3d(0, 0, -280px) rotateZ(-5.5deg) scale(.72); }
      to { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) scale(1); }
    }

    @keyframes deck-spiral-out-forward {
      from { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) scale(1); }
      to { opacity: 0; transform: translate3d(0, 0, 120px) rotateZ(2.2deg) scale(1.10); }
    }

    @keyframes deck-spiral-in-backward {
      from { opacity: 0; transform: translate3d(0, 0, -280px) rotateZ(5.5deg) scale(.72); }
      to { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) scale(1); }
    }

    @keyframes deck-spiral-out-backward {
      from { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) scale(1); }
      to { opacity: 0; transform: translate3d(0, 0, 120px) rotateZ(-2.2deg) scale(1.10); }
    }

    /* 中央幕布 */
    .slide.deck-transition-curtain.deck-transition-in { animation-name: deck-curtain-in; }
    .slide.deck-transition-curtain.deck-transition-out { animation-name: deck-curtain-out; }

    @keyframes deck-curtain-in {
      from { opacity: 1; clip-path: inset(0 50% 0 50%); transform: scaleX(.965); }
      to { opacity: 1; clip-path: inset(0); transform: scaleX(1); }
    }

    @keyframes deck-curtain-out {
      from { opacity: 1; transform: scale(1); }
      to { opacity: .72; transform: scale(.975); }
    }

    /* 纵深穿梭 */
    .slide.deck-transition-depth.deck-transition-in { animation-name: deck-depth-in; }
    .slide.deck-transition-depth.deck-transition-out { animation-name: deck-depth-out; }

    @keyframes deck-depth-in {
      from { opacity: 0; transform: translate3d(0, 0, -880px) scale(.66); }
      to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @keyframes deck-depth-out {
      from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
      to { opacity: 0; transform: translate3d(0, 0, 270px) scale(1.10); }
    }

    /* 侧向圆形扫光 */
    .slide.deck-transition-radial.deck-transition-forward.deck-transition-in { animation-name: deck-radial-in-forward; }
    .slide.deck-transition-radial.deck-transition-backward.deck-transition-in { animation-name: deck-radial-in-backward; }
    .slide.deck-transition-radial.deck-transition-out { animation-name: deck-transition-hold; }

    @keyframes deck-radial-in-forward {
      from { opacity: 1; clip-path: circle(0 at 100% 50%); }
      to { opacity: 1; clip-path: circle(145% at 100% 50%); }
    }

    @keyframes deck-radial-in-backward {
      from { opacity: 1; clip-path: circle(0 at 0 50%); }
      to { opacity: 1; clip-path: circle(145% at 0 50%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.deck-transition-in,
      .slide.deck-transition-out {
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
      }

      .slide.deck-transition-in { opacity: 1 !important; }
      .slide.deck-transition-out {
        opacity: 0 !important;
        visibility: hidden !important;
      }
    }

    /* 第30页：可编辑的 AI 学伴总体架构 */
    .ai-tutor-arch-slide { background: transparent; }

    .ai-tutor-architecture {
      position: absolute;
      inset: 0;
      width: 1600px;
      height: 900px;
      overflow: hidden;
      color: #10285d;
      background: transparent;
      transform: scale(var(--content-scale));
      transform-origin: center center;
      isolation: isolate;
    }

    .ai-tutor-architecture::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(47, 104, 216, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 104, 216, .025) 1px, transparent 1px);
      background-size: 40px 40px;
      -webkit-mask-image: radial-gradient(circle at 52% 46%, #000 0 15%, transparent 64%);
      mask-image: radial-gradient(circle at 52% 46%, #000 0 15%, transparent 64%);
    }

    .ata-symbols {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    .ata-connections {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 1600px;
      height: 900px;
      overflow: visible;
      pointer-events: none;
    }

    .ata-title {
      position: absolute;
      z-index: 6;
      top: 22px;
      left: 18px;
      right: 20px;
      display: flex;
      align-items: baseline;
      gap: 28px;
      height: 52px;
    }

    .ata-title h2 {
      position: relative;
      margin: 0;
      padding-left: 34px;
      color: #10275d;
      font-size: 48px;
      font-weight: 950;
      line-height: 1.08;
      letter-spacing: -.045em;
      white-space: nowrap;
    }

    .ata-title h2::before {
      content: "";
      position: absolute;
      top: 1px;
      bottom: 1px;
      left: 0;
      width: 8px;
      border-radius: 99px;
      background: linear-gradient(180deg, #0758f5, #173ed6);
      box-shadow: 0 0 15px rgba(16, 85, 239, .18);
    }

    .ata-title p {
      margin: 0;
      color: #555b68;
      font-size: 21px;
      font-weight: 650;
      line-height: 1.3;
      white-space: nowrap;
    }

    .ata-roles {
      position: absolute;
      z-index: 5;
      top: 86px;
      left: 70px;
      right: 70px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 15px;
      height: 88px;
    }

    .ata-role {
      display: grid;
      grid-template-rows: 42px 1fr;
      align-items: center;
      min-width: 0;
      padding: 10px 15px 9px;
      border: 1.5px solid #91affd;
      border-radius: 13px;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 7px 18px rgba(50, 94, 181, .055), inset 0 1px 0 rgba(255, 255, 255, .95);
    }

    .ata-role header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-width: 0;
    }

    .ata-role svg {
      flex: 0 0 auto;
      width: 33px;
      height: 33px;
      color: #0755dc;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ata-role h3 {
      margin: 0;
      color: #10275d;
      font-size: 21px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .ata-role p {
      margin: 2px 0 0;
      color: #334978;
      font-size: 14px;
      font-weight: 720;
      line-height: 1.25;
      text-align: center;
      white-space: nowrap;
    }

    .ata-flow-label {
      position: absolute;
      z-index: 5;
      top: 207px;
      padding: 0 12px;
      color: #0748d4;
      background: transparent;
      font-size: 17px;
      font-weight: 950;
      line-height: 1.3;
      white-space: nowrap;
    }

    .ata-flow-label.input { left: 420px; }
    .ata-flow-label.feedback { left: 955px; }

    .ata-governance {
      position: absolute;
      z-index: 5;
      top: 220px;
      left: 22px;
      display: grid;
      grid-template-rows: repeat(5, 1fr);
      gap: 15px;
      width: 168px;
      height: 426px;
    }

    .ata-governance-item {
      position: relative;
      display: grid;
      grid-template-columns: 60px 1fr;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .ata-governance-item::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #2e83ea;
      box-shadow: 0 0 0 4px rgba(46, 131, 234, .08);
      transform: translateY(-50%);
    }

    .ata-governance-icon {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border: 1.5px solid #9ebdff;
      border-radius: 50%;
      color: #0755dc;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 7px 16px rgba(34, 93, 194, .08);
    }

    .ata-governance-icon svg {
      width: 31px;
      height: 31px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ata-governance-copy h3 {
      margin: 0 0 4px;
      color: #10285d;
      font-size: 17px;
      font-weight: 950;
      line-height: 1.1;
      white-space: nowrap;
    }

    .ata-governance-copy p {
      margin: 0;
      color: #40527a;
      font-size: 13px;
      font-weight: 720;
      line-height: 1.3;
    }

    .ata-os-panel {
      position: absolute;
      z-index: 5;
      top: 307px;
      width: 286px;
      height: 163px;
      padding: 13px 13px 12px;
      border: 1.8px solid #1759e7;
      border-radius: 16px;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 11px 24px rgba(28, 89, 203, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

    .ata-os-panel.kos { left: 252px; }
    .ata-os-panel.los { left: 1062px; }

    .ata-os-panel h3 {
      margin: 0;
      color: #11327d;
      font-size: 21px;
      font-weight: 950;
      line-height: 1.12;
      text-align: center;
    }

    .ata-os-panel > p {
      margin: 6px 0 11px;
      color: #315089;
      font-size: 13px;
      font-weight: 750;
      line-height: 1.25;
      text-align: center;
      white-space: nowrap;
    }

    .ata-os-tools {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
    }

    .ata-os-tool {
      display: grid;
      place-items: center;
      min-width: 0;
      height: 72px;
      padding: 7px 2px 5px;
      border: 1px solid #b6c9f3;
      border-radius: 10px;
      color: #1249bf;
      background: linear-gradient(180deg, #ffffff, #f7faff);
    }

    .ata-os-tool b {
      display: grid;
      place-items: center;
      width: 31px;
      height: 31px;
      border: 1px solid #a9c2fa;
      border-radius: 9px;
      font-size: 16px;
      font-weight: 950;
    }

    .ata-os-tool b svg {
      display: block;
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ata-os-tool span {
      color: #24447f;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.15;
      white-space: nowrap;
    }

    .ata-collab {
      position: absolute;
      z-index: 6;
      top: 344px;
      color: #0e52c4;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .ata-collab.left { left: 553px; }
    .ata-collab.right { left: 995px; }

    .ata-core-base {
      position: absolute;
      z-index: 3;
      top: 421px;
      left: 609px;
      width: 382px;
      height: 90px;
      border: 1px solid rgba(78, 111, 230, .3);
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center, rgba(31, 117, 255, .26), rgba(112, 128, 244, .16) 45%, rgba(255, 255, 255, .92) 70%);
      box-shadow: 0 13px 24px rgba(45, 93, 195, .17), inset 0 -11px 0 rgba(55, 95, 221, .24), inset 0 -18px 0 rgba(213, 222, 255, .72);
    }

    .ata-core-base::after {
      content: "";
      position: absolute;
      right: 42px;
      bottom: 9px;
      left: 42px;
      height: 5px;
      border-radius: 50%;
      background: linear-gradient(90deg, transparent, #04d9e7 42% 58%, transparent);
      box-shadow: 0 0 16px rgba(4, 217, 231, .7);
    }

    .ata-core {
      position: absolute;
      z-index: 5;
      top: 260px;
      left: 620px;
      display: grid;
      place-content: center;
      width: 360px;
      height: 224px;
      border: 2px solid #b7c9ff;
      border-radius: 50%;
      text-align: center;
      background:
        radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .98), rgba(248, 251, 255, .96) 58%, rgba(229, 239, 255, .95));
      box-shadow: 0 0 0 7px rgba(142, 175, 255, .12), 0 16px 30px rgba(34, 91, 193, .12), inset 0 0 28px rgba(58, 133, 255, .07);
    }

    .ata-core::before {
      content: "";
      position: absolute;
      inset: -10px -14px;
      border: 1px solid rgba(125, 158, 246, .3);
      border-radius: 50%;
    }

    .ata-core-mark {
      position: relative;
      width: 72px;
      height: 60px;
      margin: 0 auto 1px;
      filter: drop-shadow(0 7px 10px rgba(31, 81, 218, .2));
    }

    .ata-core-mark svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .ata-core-mark .robot-antenna {
      fill: none;
      stroke: #315bd5;
      stroke-width: 2.2;
      stroke-linecap: round;
    }

    .ata-core-mark .robot-signal { fill: #7854ed; }
    .ata-core-mark .robot-shell { fill: url(#ata-robot-shell); stroke: rgba(22, 68, 190, .5); stroke-width: 1.2; }
    .ata-core-mark .robot-ear { fill: #3d6de1; }
    .ata-core-mark .robot-screen { fill: url(#ata-robot-screen); }
    .ata-core-mark .robot-eye { fill: #ffffff; }

    .ata-core-mark .robot-smile {
      fill: none;
      stroke: #bfeaff;
      stroke-width: 2;
      stroke-linecap: round;
    }

    .ata-core h2 {
      margin: 0;
      color: #0b4ed7;
      font-size: 49px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.04em;
    }

    .ata-core p {
      margin: 8px 0 0;
      color: #1f4d9e;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
    }

    .ata-trust-zone {
      position: absolute;
      z-index: 4;
      top: 222px;
      right: 22px;
      width: 210px;
      height: 355px;
      border: 1px solid rgba(111, 80, 235, .25);
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(255, 255, 255, .96), rgba(249, 247, 255, .88) 68%, rgba(255, 255, 255, .55));
      box-shadow: 0 0 0 9px rgba(117, 87, 239, .045), inset 0 0 24px rgba(117, 87, 239, .05);
    }

    .ata-trust-zone::before,
    .ata-trust-zone::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(112, 81, 237, .15);
      border-radius: 50%;
    }

    .ata-trust-zone::before { inset: 12px 11px; }
    .ata-trust-zone::after { inset: 25px 22px; }

    .ata-trust-item {
      position: absolute;
      z-index: 3;
      left: 22px;
      display: grid;
      grid-template-columns: 46px 1fr;
      align-items: center;
      gap: 7px;
      width: 176px;
      min-height: 76px;
    }

    .ata-trust-item:nth-child(1) { top: 48px; }
    .ata-trust-item:nth-child(2) { top: 137px; }
    .ata-trust-item:nth-child(3) { top: 226px; }

    .ata-trust-icon {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 1.5px solid #c9b6ff;
      border-radius: 50%;
      color: #7344e8;
      background: rgba(255, 255, 255, .95);
      box-shadow: 0 8px 18px rgba(105, 68, 222, .1);
    }

    .ata-trust-icon svg {
      width: 26px;
      height: 26px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ata-trust-copy h3 {
      margin: 0 0 4px;
      color: #172a62;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.1;
      white-space: nowrap;
    }

    .ata-trust-copy p {
      margin: 0;
      color: #46527a;
      font-size: 10.5px;
      font-weight: 720;
      line-height: 1.35;
    }

    .ata-subject-area {
      position: absolute;
      z-index: 5;
      top: 542px;
      left: 205px;
      width: 1090px;
      height: 132px;
    }

    .ata-subject-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      color: #1149c2;
      font-size: 17px;
      font-weight: 950;
      line-height: 1.25;
      text-align: center;
      white-space: nowrap;
    }

    .ata-subject-strip {
      position: absolute;
      top: 34px;
      left: 18px;
      right: 18px;
      display: grid;
      grid-template-columns: repeat(10, minmax(0, 1fr));
      gap: 8px;
      height: 95px;
      padding: 12px 14px 10px;
      border: 1.5px solid #8fb4ff;
      border-radius: 15px;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 9px 20px rgba(49, 97, 187, .07);
    }

    .ata-subject-strip::before,
    .ata-subject-strip::after {
      position: absolute;
      top: 28px;
      color: #a5c1f7;
      font-size: 37px;
      font-weight: 850;
      line-height: 1;
    }

    .ata-subject-strip::before { content: "‹"; left: -31px; }
    .ata-subject-strip::after { content: "›"; right: -31px; }

    .ata-subject {
      display: grid;
      grid-template-rows: 42px 1fr;
      place-items: center;
      min-width: 0;
      border: 1px solid #c4d4f6;
      border-radius: 11px;
      color: #164dc2;
      background: linear-gradient(180deg, #ffffff, #f8faff);
      box-shadow: 0 6px 13px rgba(45, 92, 180, .06);
    }

    .ata-subject b {
      display: grid;
      place-items: center;
      min-width: 35px;
      height: 35px;
      padding: 0 5px;
      border-radius: 10px;
      color: #ffffff;
      background: linear-gradient(145deg, #184bd1, #075be6);
      font-size: 15px;
      font-weight: 950;
      white-space: nowrap;
    }

    .ata-subject b svg {
      display: block;
      width: 23px;
      height: 23px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ata-subject span {
      color: #142a5e;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.1;
      text-align: center;
      white-space: nowrap;
    }

    .ata-engine {
      position: absolute;
      z-index: 5;
      top: 692px;
      left: 70px;
      width: 1410px;
      height: 117px;
      padding: 30px 17px 10px;
      border: 1.5px solid #a9c4fa;
      border-radius: 15px;
      background: rgba(255, 255, 255, .95);
      box-shadow: 0 8px 19px rgba(48, 94, 183, .055);
    }

    .ata-engine-title {
      position: absolute;
      top: 2px;
      left: 50%;
      padding: 3px 18px;
      color: #1049bf;
      background: transparent;
      font-size: 17px;
      font-weight: 950;
      line-height: 1.25;
      white-space: nowrap;
      transform: translateX(-50%);
    }

    .ata-engine-groups {
      display: grid;
      grid-template-columns: 1.04fr 1.28fr 1.04fr;
      gap: 13px;
      height: 76px;
    }

    .ata-engine-group {
      min-width: 0;
      padding: 8px 11px 7px;
      border: 1px solid #ccdafa;
      border-radius: 11px;
      background: linear-gradient(180deg, #ffffff, #f8faff);
    }

    .ata-engine-group h3 {
      margin: 0 0 7px;
      color: #1749ae;
      font-size: 14px;
      font-weight: 950;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
    }

    .ata-chip-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 0;
    }

    .ata-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      height: 29px;
      padding: 0 8px;
      border: 1px solid #bfd0f7;
      border-radius: 999px;
      color: #2d4d8f;
      background: #ffffff;
      font-size: 10.5px;
      font-weight: 800;
      white-space: nowrap;
    }

    .ata-chip b {
      display: grid;
      place-items: center;
      width: 19px;
      height: 19px;
      border-radius: 7px;
      color: #1554d4;
      background: #eef4ff;
      font-size: 10px;
      font-weight: 950;
    }

    .ata-chip b svg {
      display: block;
      width: 13px;
      height: 13px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ata-chip.more {
      display: inline-grid;
      place-items: center;
      width: 29px;
      padding: 0;
      color: #3156a0;
      font-size: 16px;
      font-weight: 950;
      line-height: 1;
    }

    .ata-chip.more > span {
      display: block;
      line-height: 1;
    }

    .ata-summary {
      position: absolute;
      z-index: 5;
      right: 35px;
      bottom: 20px;
      left: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      height: 58px;
      border: 1.5px solid #92b2fd;
      border-radius: 14px;
      color: #0b46b9;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 8px 18px rgba(40, 86, 175, .055);
    }

    .ata-summary svg {
      width: 39px;
      height: 39px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ata-summary strong {
      color: #0b46b9;
      font-size: 23px;
      font-weight: 950;
      line-height: 1.2;
      letter-spacing: -.018em;
      white-space: nowrap;
    }

    /* 第31页：知识操作系统与可计算知识图谱 */
    .kos-knowledge-slide .slide-content { padding-top: 18px; }

    .kos-knowledge-stage {
      position: relative;
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr) 330px;
      grid-template-rows: 494px 102px;
      gap: 16px 22px;
      width: 100%;
      height: 612px;
      color: #10285d;
      isolation: isolate;
    }

    .kos-knowledge-stage::before {
      content: "";
      position: absolute;
      inset: -18px 0 -20px;
      z-index: -2;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 42%, rgba(33, 168, 207, .12), transparent 34%),
        radial-gradient(circle at 78% 30%, rgba(117, 71, 237, .08), transparent 28%),
        linear-gradient(rgba(40, 100, 205, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 100, 205, .028) 1px, transparent 1px);
      background-size: auto, auto, 34px 34px, 34px 34px;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
    }

    .kos-source-column,
    .kos-graph-canvas,
    .kos-detail-column {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(67, 111, 203, .2);
      border-radius: 24px;
      background: rgba(255, 255, 255, .88);
      box-shadow: 0 18px 46px rgba(18, 56, 120, .09), inset 0 1px 0 rgba(255, 255, 255, .95);
    }

    .kos-source-column {
      padding: 20px;
      background:
        linear-gradient(155deg, rgba(255, 255, 255, .97), rgba(241, 248, 255, .92)),
        #fff;
    }

    .kos-column-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      min-height: 57px;
    }

    .kos-column-head span,
    .kos-graph-heading span {
      display: block;
      margin-bottom: 5px;
      color: #55709d;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .14em;
      line-height: 1;
    }

    .kos-column-head h3,
    .kos-graph-heading h3 {
      margin: 0;
      color: #10285d;
      font-size: 24px;
      font-weight: 950;
      line-height: 1.1;
      letter-spacing: -.02em;
    }

    .kos-column-head b {
      flex: 0 0 auto;
      padding: 6px 9px;
      border: 1px solid rgba(18, 98, 223, .18);
      border-radius: 99px;
      color: #0e55ce;
      background: rgba(224, 238, 255, .8);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }

    .kos-source-stack {
      position: relative;
      display: grid;
      gap: 10px;
      margin-top: 11px;
    }

    .kos-source-stack::before {
      content: "";
      position: absolute;
      top: 12px;
      bottom: 12px;
      left: 25px;
      width: 2px;
      background: linear-gradient(#1e70df, #21a8cf 55%, #7b58e8);
      opacity: .3;
    }

    .kos-source-item {
      position: relative;
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 84px;
      padding: 11px 12px;
      border: 1px solid rgba(var(--kos-source-rgb), .22);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(var(--kos-source-rgb), .1), rgba(255, 255, 255, .96) 58%);
      box-shadow: 0 8px 18px rgba(34, 78, 151, .055);
    }

    .kos-source-icon {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      border-radius: 15px;
      color: rgb(var(--kos-source-rgb));
      background: #fff;
      box-shadow: 0 7px 16px rgba(var(--kos-source-rgb), .15);
    }

    .kos-source-icon svg {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .kos-source-copy { min-width: 0; }

    .kos-source-copy h4 {
      margin: 0 0 5px;
      color: #132c64;
      font-size: 20px;
      font-weight: 950;
      line-height: 1.1;
    }

    .kos-source-copy p {
      margin: 0;
      color: #546784;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }

    .kos-source-provenance {
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 60px;
      margin-top: 12px;
      padding: 11px 13px;
      border: 1px dashed rgba(19, 92, 204, .3);
      border-radius: 14px;
      color: #285189;
      background: rgba(230, 241, 255, .6);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
    }

    .kos-source-provenance svg {
      flex: 0 0 auto;
      width: 25px;
      height: 25px;
      fill: none;
      stroke: #0d5fe0;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .kos-graph-canvas {
      background:
        radial-gradient(circle at 50% 50%, rgba(16, 85, 232, .11), transparent 34%),
        radial-gradient(circle at 68% 36%, rgba(117, 71, 237, .08), transparent 28%),
        linear-gradient(160deg, rgba(252, 254, 255, .98), rgba(239, 247, 255, .9));
    }

    .kos-graph-canvas::before,
    .kos-graph-canvas::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .kos-graph-canvas::before {
      inset: 82px 142px 74px;
      border: 1px solid rgba(37, 108, 224, .1);
      box-shadow: 0 0 0 26px rgba(37, 108, 224, .02), 0 0 0 58px rgba(117, 71, 237, .018);
      transform: rotate(-9deg);
    }

    .kos-graph-canvas::after {
      top: 46px;
      right: 42px;
      width: 84px;
      height: 84px;
      background: radial-gradient(circle, rgba(33, 168, 207, .12), transparent 66%);
      filter: blur(1px);
    }

    .kos-graph-heading {
      position: absolute;
      z-index: 5;
      top: 20px;
      left: 22px;
    }

    .kos-graph-heading h3 { font-size: 22px; }

    .kos-graph-heading p {
      margin: 6px 0 0;
      color: #637493;
      font-size: 13px;
      font-weight: 700;
    }

    .kos-graph-links {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    .kos-graph-links path {
      fill: none;
      stroke: url(#kos-link-gradient);
      stroke-width: 2.1;
      stroke-linecap: round;
      stroke-dasharray: 7 11;
      opacity: .7;
    }

    .kos-graph-links path.is-cross {
      stroke: #8a63eb;
      stroke-width: 1.55;
      stroke-dasharray: 3 8;
      opacity: .52;
    }

    .kos-graph-node {
      position: absolute;
      z-index: 3;
      left: var(--kos-x);
      top: var(--kos-y);
      display: grid;
      place-items: center;
      min-width: 106px;
      min-height: 60px;
      padding: 10px 14px;
      border: 1px solid rgba(var(--kos-node-rgb, 30, 112, 223), .28);
      border-radius: 17px;
      color: #17356f;
      text-align: center;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 10px 22px rgba(var(--kos-node-rgb, 30, 112, 223), .12), inset 0 1px 0 #fff;
      transform: translate(-50%, -50%);
    }

    .kos-graph-node strong {
      display: block;
      color: inherit;
      font-size: 17px;
      font-weight: 950;
      line-height: 1.12;
      white-space: nowrap;
    }

    .kos-graph-node span {
      display: block;
      margin-top: 4px;
      color: #667896;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.1;
      white-space: nowrap;
    }

    .kos-graph-node.is-core {
      z-index: 4;
      width: 178px;
      min-height: 114px;
      border: 1px solid rgba(255, 255, 255, .7);
      border-radius: 50%;
      color: #fff;
      background:
        radial-gradient(circle at 35% 28%, rgba(112, 205, 255, .72), transparent 27%),
        linear-gradient(145deg, #115fe3, #2646c5 58%, #7547ed);
      box-shadow: 0 18px 38px rgba(28, 82, 204, .3), 0 0 0 8px rgba(30, 102, 222, .08), 0 0 34px rgba(33, 168, 207, .25);
    }

    .kos-graph-node.is-core::before {
      content: "";
      position: absolute;
      inset: -14px -20px;
      border: 1px solid rgba(47, 130, 255, .22);
      border-radius: 50%;
      transform: rotate(-8deg);
    }

    .kos-graph-node.is-core strong {
      color: #fff;
      font-size: 27px;
      letter-spacing: -.02em;
    }

    .kos-graph-node.is-core span {
      color: rgba(255, 255, 255, .84);
      font-size: 13px;
    }

    .kos-graph-node.is-subject {
      min-width: 76px;
      min-height: 40px;
      padding: 7px 11px;
      border-radius: 99px;
      color: #6840c3;
      background: rgba(249, 246, 255, .97);
    }

    .kos-graph-node.is-subject strong { font-size: 14px; }
    .kos-graph-node.is-subject span { display: none; }

    .kos-detail-column {
      padding: 20px;
      background:
        linear-gradient(155deg, rgba(255, 255, 255, .97), rgba(247, 244, 255, .92)),
        #fff;
    }

    .kos-detail-path {
      margin-top: 11px;
      padding: 12px 13px;
      border-left: 4px solid #7049e4;
      border-radius: 8px 13px 13px 8px;
      background: rgba(116, 72, 232, .075);
    }

    .kos-detail-path span {
      display: block;
      margin-bottom: 4px;
      color: #795db6;
      font-size: 12px;
      font-weight: 850;
      line-height: 1;
    }

    .kos-detail-path strong {
      color: #1a3068;
      font-size: 17px;
      font-weight: 950;
      line-height: 1.25;
    }

    .kos-detail-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 13px;
    }

    .kos-detail-metric {
      min-height: 76px;
      padding: 10px 12px;
      border: 1px solid rgba(var(--metric-rgb), .2);
      border-radius: 15px;
      background: linear-gradient(145deg, rgba(var(--metric-rgb), .09), rgba(255, 255, 255, .96));
    }

    .kos-detail-metric strong {
      display: block;
      color: rgb(var(--metric-rgb));
      font-size: 28px;
      font-weight: 950;
      line-height: 1;
    }

    .kos-detail-metric span {
      display: block;
      margin-top: 7px;
      color: #40577c;
      font-size: 14px;
      font-weight: 850;
      line-height: 1;
    }

    .kos-detail-proof {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 57px;
      margin-top: 12px;
      padding: 10px 12px;
      border: 1px dashed rgba(101, 73, 205, .28);
      border-radius: 14px;
      color: #4c4f7b;
      background: rgba(250, 248, 255, .78);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
    }

    .kos-detail-proof svg {
      flex: 0 0 auto;
      width: 25px;
      height: 25px;
      fill: none;
      stroke: #7049e4;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .kos-transform-band {
      grid-column: 1 / -1;
      position: relative;
      display: grid;
      grid-template-columns: 330px 72px minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      min-width: 0;
      padding: 14px 22px;
      overflow: hidden;
      border: 1px solid rgba(37, 105, 217, .2);
      border-radius: 22px;
      background: linear-gradient(100deg, rgba(246, 249, 255, .98), rgba(235, 247, 253, .96) 48%, rgba(245, 241, 255, .97));
      box-shadow: 0 12px 30px rgba(18, 56, 120, .075);
    }

    .kos-file-pile,
    .kos-real-textbook {
      display: flex;
      align-items: center;
      gap: 15px;
      min-width: 0;
    }

    .kos-file-icons {
      position: relative;
      flex: 0 0 84px;
      width: 84px;
      height: 58px;
    }

    .kos-file-icon {
      position: absolute;
      display: grid;
      place-items: center;
      width: 43px;
      height: 52px;
      border: 1px solid rgba(86, 105, 139, .2);
      border-radius: 8px;
      color: #687894;
      background: #fff;
      box-shadow: 0 7px 14px rgba(31, 54, 96, .08);
      font-size: 11px;
      font-weight: 950;
    }

    .kos-file-icon:nth-child(1) { left: 0; top: 4px; transform: rotate(-8deg); }
    .kos-file-icon:nth-child(2) { left: 22px; top: 0; z-index: 2; color: #b54d5e; }
    .kos-file-icon:nth-child(3) { left: 43px; top: 5px; color: #d08c22; transform: rotate(8deg); }

    .kos-band-copy { min-width: 0; }

    .kos-band-copy span {
      display: block;
      color: #728096;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.1;
    }

    .kos-band-copy strong {
      display: block;
      margin-top: 5px;
      color: #263b60;
      font-size: 20px;
      font-weight: 950;
      line-height: 1.18;
      white-space: nowrap;
    }

    .kos-transform-arrow {
      position: relative;
      height: 2px;
      background: linear-gradient(90deg, #3389e8, #7547ed);
      box-shadow: 0 0 11px rgba(49, 126, 232, .28);
    }

    .kos-transform-arrow::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -1px;
      width: 12px;
      height: 12px;
      border-top: 3px solid #7547ed;
      border-right: 3px solid #7547ed;
      transform: translateY(-50%) rotate(45deg);
    }

    .kos-textbook-mark {
      position: relative;
      flex: 0 0 72px;
      display: grid;
      place-items: center;
      width: 72px;
      height: 62px;
      border-radius: 19px;
      color: #fff;
      background: linear-gradient(145deg, #1065df, #0a9fc3 62%, #7449df);
      box-shadow: 0 11px 22px rgba(18, 104, 207, .2);
    }

    .kos-textbook-mark svg {
      width: 39px;
      height: 39px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .kos-real-textbook .kos-band-copy strong {
      color: #0f3f99;
      font-size: 22px;
    }

    .slide.active .kos-graph-links path {
      animation: kos-knowledge-link-flow 5.4s linear infinite;
    }

    .slide.active .kos-graph-node {
      animation: kos-knowledge-node-in .62s cubic-bezier(.2, .8, .2, 1) both;
      animation-delay: var(--kos-delay, .08s);
    }

    .slide.active .kos-graph-node.is-core {
      animation: kos-knowledge-core-in .72s cubic-bezier(.16, .9, .25, 1) both, kos-knowledge-core-glow 4.2s ease-in-out 1.1s infinite;
    }

    .slide:not(.active) .kos-graph-links path,
    .slide:not(.active) .kos-graph-node { animation-play-state: paused !important; }

    @keyframes kos-knowledge-link-flow {
      to { stroke-dashoffset: -72; }
    }

    @keyframes kos-knowledge-node-in {
      from { opacity: 0; transform: translate(-50%, -42%) scale(.9); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes kos-knowledge-core-in {
      from { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes kos-knowledge-core-glow {
      0%, 100% { box-shadow: 0 18px 38px rgba(28, 82, 204, .3), 0 0 0 8px rgba(30, 102, 222, .08), 0 0 28px rgba(33, 168, 207, .2); }
      50% { box-shadow: 0 20px 42px rgba(28, 82, 204, .34), 0 0 0 11px rgba(30, 102, 222, .09), 0 0 42px rgba(33, 168, 207, .32); }
    }

    @media (prefers-reduced-motion: reduce) {
      .kos-graph-links path,
      .kos-graph-node { animation: none !important; }
    }

    /* 第31页中央：全息知识星图（仅替换中部网络） */
    @property --kos-orbit-phase {
      syntax: "<angle>";
      inherits: true;
      initial-value: 0deg;
    }

    .kos-graph-canvas.kos-atlas {
      isolation: isolate;
      z-index: 3;
      overflow: visible;
      background:
        radial-gradient(circle at 51% 53%, rgba(17, 122, 135, .15), transparent 22%),
        radial-gradient(circle at 75% 24%, rgba(222, 161, 60, .12), transparent 25%),
        linear-gradient(155deg, rgba(253, 255, 255, .98), rgba(238, 248, 248, .95) 52%, rgba(252, 247, 236, .92));
    }

    .kos-graph-canvas.kos-atlas::before {
      inset: 0;
      z-index: 0;
      border: 0;
      border-radius: inherit;
      box-shadow: none;
      transform: none;
      background:
        linear-gradient(rgba(25, 89, 113, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 89, 113, .045) 1px, transparent 1px);
      background-size: 28px 28px;
      -webkit-mask-image: radial-gradient(circle at 51% 53%, #000 0 28%, transparent 76%);
      mask-image: radial-gradient(circle at 51% 53%, #000 0 28%, transparent 76%);
    }

    .kos-graph-canvas.kos-atlas::after {
      top: auto;
      right: auto;
      left: 51%;
      bottom: -34px;
      z-index: 0;
      width: 64%;
      height: 118px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(18, 104, 115, .15), rgba(18, 104, 115, .04) 42%, transparent 70%);
      filter: blur(10px);
      transform: translateX(-50%);
    }

    .kos-atlas .kos-graph-heading {
      z-index: 8;
    }

    .kos-atlas .kos-graph-heading span { color: #487286; }
    .kos-atlas .kos-graph-heading h3 { color: #10354b; }
    .kos-atlas .kos-graph-heading p { color: #60798a; }

    .kos-atlas-stage {
      position: absolute;
      inset: 0;
      overflow: visible;
      pointer-events: none;
      perspective: 860px;
      perspective-origin: 51% 53%;
      transform-style: preserve-3d;
    }

    .kos-atlas-stage.is-back-layer { z-index: 1; }
    .kos-atlas-stage.is-front-layer { z-index: 9; }

    .kos-atlas-orbit {
      --kos-orbit-phase: 0deg;
      --orbit-tilt: -8deg;
      --orbit-duration: 16s;
      --orbit-delay: -2s;
      --orbit-flip-duration: 6s;
      --orbit-flip-delay: -1.5s;
      --orbit-pitch-a: 24deg;
      --orbit-pitch-b: -34deg;
      --orbit-pitch-c: 28deg;
      --orbit-pitch-d: -24deg;
      --orbit-yaw-a: -14deg;
      --orbit-yaw-b: 20deg;
      --orbit-yaw-c: 18deg;
      --orbit-yaw-d: -22deg;
      --orbit-depth-a: -12px;
      --orbit-depth-b: 24px;
      --orbit-depth-c: -18px;
      --orbit-depth-d: 28px;
      --orbit-scale-a: .98;
      --orbit-scale-b: 1.035;
      --orbit-scale-c: .975;
      --orbit-scale-d: 1.03;
      position: absolute;
      left: 51%;
      top: 53%;
      border: 0;
      border-radius: 50%;
      transform: translate3d(-50%, -50%, var(--orbit-depth-a)) rotateZ(var(--orbit-tilt)) rotateX(var(--orbit-pitch-a)) rotateY(var(--orbit-yaw-a)) scale(var(--orbit-scale-a));
      transform-origin: center;
      transform-style: preserve-3d;
      backface-visibility: visible;
      will-change: transform, --kos-orbit-phase;
    }

    .kos-atlas-orbit::before,
    .kos-atlas-orbit::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      transform-origin: center;
      backface-visibility: visible;
      pointer-events: none;
    }

    .kos-atlas-orbit::before {
      inset: -3px;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }

    .kos-atlas-orbit::after {
      inset: -8px;
      padding: 7px;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }

    .kos-atlas-stage.is-back-layer .kos-atlas-orbit::before {
      padding: 1.25px;
      opacity: .5;
      background: conic-gradient(from var(--kos-orbit-phase), rgba(16, 96, 116, .36) 0 19%, rgba(78, 142, 153, .18) 34%, rgba(15, 74, 98, .1) 47%, transparent 51% 100%);
      filter: blur(.7px) saturate(.72);
      transform: translateZ(-24px) scale(.985);
    }

    .kos-atlas-stage.is-back-layer .kos-atlas-orbit::after { display: none; }

    .kos-atlas-stage.is-front-layer .kos-atlas-orbit::before {
      padding: 2.7px;
      background: conic-gradient(from var(--kos-orbit-phase), transparent 0 49%, rgba(255, 255, 255, .98) 51%, rgba(64, 221, 213, .94) 58%, rgba(24, 148, 160, .9) 72%, rgba(232, 176, 75, .92) 89%, rgba(255, 250, 225, .96) 98%, transparent 100%);
      filter: drop-shadow(0 0 4px rgba(61, 207, 202, .72)) drop-shadow(0 6px 9px rgba(16, 88, 105, .22));
      transform: translateZ(28px) scale(1.014);
    }

    .kos-atlas-stage.is-front-layer .kos-atlas-orbit::after {
      opacity: .9;
      background: conic-gradient(from var(--kos-orbit-phase), transparent 0 50%, rgba(255, 255, 255, .9) 51.2%, rgba(92, 228, 220, .48) 53%, transparent 56% 100%);
      filter: blur(4px);
      transform: translateZ(42px) scale(1.022);
    }

    .kos-atlas-orbit.orbit-one {
      --orbit-tilt: -8deg;
      --orbit-duration: 19s;
      --orbit-delay: -4.2s;
      --orbit-flip-duration: 6.75s;
      --orbit-flip-delay: -1.55s;
      width: 122%;
      height: 74%;
    }

    .kos-atlas-orbit.orbit-two {
      --orbit-tilt: 12deg;
      --orbit-duration: 24s;
      --orbit-delay: -9s;
      --orbit-flip-duration: 8.5s;
      --orbit-flip-delay: -3.2s;
      --orbit-pitch-a: -30deg;
      --orbit-pitch-b: 28deg;
      --orbit-pitch-c: -34deg;
      --orbit-pitch-d: 26deg;
      --orbit-yaw-a: 18deg;
      --orbit-yaw-b: -24deg;
      --orbit-yaw-c: -14deg;
      --orbit-yaw-d: 22deg;
      --orbit-depth-a: 18px;
      --orbit-depth-b: -16px;
      --orbit-depth-c: 24px;
      --orbit-depth-d: -20px;
      width: 106%;
      height: 58%;
    }

    .kos-atlas-orbit.orbit-three {
      --orbit-tilt: -20deg;
      --orbit-duration: 16s;
      --orbit-delay: -6.5s;
      --orbit-flip-duration: 5.4s;
      --orbit-flip-delay: -2.35s;
      --orbit-pitch-a: 32deg;
      --orbit-pitch-b: -26deg;
      --orbit-pitch-c: 36deg;
      --orbit-pitch-d: -30deg;
      --orbit-yaw-a: -22deg;
      --orbit-yaw-b: 26deg;
      --orbit-yaw-c: 16deg;
      --orbit-yaw-d: -24deg;
      --orbit-depth-a: -20px;
      --orbit-depth-b: 30px;
      --orbit-depth-c: -16px;
      --orbit-depth-d: 24px;
      --orbit-scale-a: .97;
      --orbit-scale-b: 1.045;
      --orbit-scale-c: .965;
      --orbit-scale-d: 1.038;
      width: 82%;
      height: 43%;
    }

    .kos-atlas-scan {
      position: absolute;
      left: 51%;
      top: 53%;
      width: 344px;
      height: 344px;
      border-radius: 50%;
      opacity: .28;
      background: conic-gradient(from 0deg, transparent 0 74%, rgba(42, 162, 167, .28) 88%, transparent 100%);
      -webkit-mask-image: radial-gradient(circle, transparent 0 47%, #000 64%, transparent 74%);
      mask-image: radial-gradient(circle, transparent 0 47%, #000 64%, transparent 74%);
      transform: translate(-50%, -50%);
    }

    .kos-atlas-links {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    .kos-atlas-links .atlas-link-base,
    .kos-atlas-links .atlas-link-beam {
      fill: none;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
    }

    .kos-atlas-links .atlas-link-base {
      stroke: url(#kos-atlas-base-gradient);
      stroke-width: 1.55;
      opacity: .42;
    }

    .kos-atlas-links .atlas-link-beam {
      stroke: url(#kos-atlas-beam-gradient);
      stroke-width: 3.2;
      stroke-dasharray: 2 66;
      filter: url(#kos-atlas-beam-glow);
      opacity: .94;
    }

    .kos-atlas-core-shell {
      position: absolute;
      z-index: 5;
      left: 51%;
      top: 53%;
      width: 188px;
      height: 188px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .kos-atlas-core-shell::before,
    .kos-atlas-core-shell::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .kos-atlas-core-shell::before {
      inset: 0;
      padding: 2px;
      background: conic-gradient(from 30deg, #f4d48b, #21a3a4 25%, rgba(255, 255, 255, .9) 42%, #0f7181 66%, #dfa440 83%, #f4d48b);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      box-shadow: 0 0 0 8px rgba(255, 255, 255, .6), 0 0 0 12px rgba(17, 116, 128, .07);
    }

    .kos-atlas-core-shell::after {
      inset: 25px;
      background: radial-gradient(circle, rgba(29, 159, 163, .23), transparent 67%);
      filter: blur(7px);
      transform-origin: center;
    }

    .kos-atlas-core {
      position: absolute;
      inset: 17px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 0;
      border-radius: 50%;
      color: #fff;
      background: none;
      box-shadow: none;
      text-align: center;
      transform: none;
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
    }

    .kos-atlas-core::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border: 1px solid rgba(255, 255, 255, .76);
      border-radius: 50%;
      background:
        radial-gradient(circle at 31% 21%, rgba(137, 239, 225, .82), transparent 27%),
        radial-gradient(circle at 72% 79%, rgba(66, 86, 157, .62), transparent 43%),
        linear-gradient(148deg, #0b6075, #087f82 51%, #18385f);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .64),
        inset 0 -24px 42px rgba(3, 38, 62, .27),
        0 16px 34px rgba(7, 67, 80, .27);
      pointer-events: none;
    }

    .kos-atlas-core::after {
      content: "";
      position: absolute;
      inset: 8px;
      z-index: 1;
      border: 1px solid rgba(198, 248, 239, .24);
      border-radius: 50%;
      opacity: .72;
      background:
        conic-gradient(from 18deg, transparent 0 10%, rgba(247, 210, 128, .72) 10.5% 11.4%, transparent 12% 43%, rgba(118, 235, 222, .7) 43.5% 44.4%, transparent 45% 74%, rgba(255, 255, 255, .48) 74.5% 75.2%, transparent 76% 100%),
        radial-gradient(circle, transparent 0 68%, rgba(255, 255, 255, .1) 69% 70%, transparent 71%);
      box-shadow: inset 0 0 22px rgba(151, 239, 226, .08);
      pointer-events: none;
    }

    .kos-atlas-core-content {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
    }

    .kos-atlas-core-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 18px;
      margin-bottom: 5px;
      padding: 3px 8px;
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 99px;
      color: #fff1c9;
      background: rgba(7, 54, 75, .24);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
      font-size: 9px;
      font-weight: 950;
      letter-spacing: .14em;
      line-height: 1;
    }

    .kos-atlas-core-kicker::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #8ef1df;
      box-shadow: 0 0 8px rgba(142, 241, 223, .82);
    }

    .kos-atlas-core-icon {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      margin-bottom: 6px;
      border: 1px solid rgba(255, 255, 255, .74);
      border-radius: 50%;
      color: #0c7180;
      background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(214, 248, 242, .9));
      box-shadow:
        inset 0 1px 0 #fff,
        0 0 0 5px rgba(135, 238, 222, .09),
        0 8px 18px rgba(1, 35, 45, .2);
    }

    .kos-atlas-core-icon svg {
      width: 30px;
      height: 30px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
      shape-rendering: geometricPrecision;
    }

    .kos-atlas-core-content strong {
      display: block;
      color: #fff;
      font-size: 23px;
      font-weight: 950;
      line-height: 1.04;
      letter-spacing: -.025em;
      text-shadow: 0 2px 8px rgba(0, 31, 54, .24);
      white-space: nowrap;
    }

    .kos-atlas-core-content small {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      margin-top: 6px;
      color: rgba(237, 255, 253, .9);
      font-size: 10px;
      font-weight: 820;
      line-height: 1;
      white-space: nowrap;
    }

    .kos-atlas-core-content small i {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #f4ce7f;
      box-shadow: 0 0 7px rgba(244, 206, 127, .68);
    }

    .kos-atlas-node,
    .kos-atlas-subject {
      position: absolute;
      z-index: 4;
      left: var(--atlas-x);
      top: var(--atlas-y);
      transform: translate(-50%, -50%);
    }

    .kos-atlas-node {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 133px;
      min-height: 58px;
      padding: 9px 12px 9px 9px;
      border: 1px solid rgba(var(--atlas-tone), .28);
      border-radius: 18px;
      color: #17394b;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 11px 23px rgba(var(--atlas-tone), .11), inset 0 1px 0 #fff;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    .kos-atlas-node::after {
      content: "";
      position: absolute;
      right: 10px;
      bottom: 6px;
      left: 49px;
      height: 2px;
      border-radius: 9px;
      opacity: .46;
      background: linear-gradient(90deg, rgba(var(--atlas-tone), .82), transparent);
    }

    .kos-atlas-node-icon {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(var(--atlas-tone), .2);
      border-radius: 13px;
      color: rgb(var(--atlas-tone));
      background: linear-gradient(145deg, rgba(var(--atlas-tone), .14), rgba(255, 255, 255, .9));
    }

    .kos-atlas-node-icon svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .kos-atlas-node-copy {
      min-width: 0;
      text-align: left;
    }

    .kos-atlas-node-copy strong {
      display: block;
      color: #17394b;
      font-size: 15px;
      font-weight: 950;
      line-height: 1.05;
      white-space: nowrap;
    }

    .kos-atlas-node-copy small {
      display: block;
      margin-top: 5px;
      color: #66808e;
      font-size: 10px;
      font-weight: 750;
      line-height: 1;
      white-space: nowrap;
    }

    .kos-atlas-subject {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 34px;
      padding: 7px 10px;
      border: 1px solid rgba(187, 128, 33, .26);
      border-radius: 99px;
      color: #815514;
      background: rgba(255, 250, 237, .95);
      box-shadow: 0 8px 17px rgba(164, 111, 26, .1), inset 0 1px 0 #fff;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .kos-atlas-subject svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .kos-atlas-legend {
      position: absolute;
      z-index: 7;
      left: 50%;
      bottom: 11px;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 7px 11px;
      border: 1px solid rgba(18, 105, 116, .15);
      border-radius: 99px;
      color: #496b78;
      background: rgba(255, 255, 255, .79);
      box-shadow: 0 7px 18px rgba(18, 76, 92, .06);
      font-size: 10px;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
      transform: translateX(-50%);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    .kos-atlas-legend i {
      width: 12px;
      height: 1px;
      background: linear-gradient(90deg, #168997, #d69d3f);
    }

    .slide.active .kos-atlas-orbit {
      animation: kos-atlas-orbit-phase var(--orbit-duration) linear var(--orbit-delay) infinite, kos-atlas-orbit-tumble var(--orbit-flip-duration) cubic-bezier(.45, .03, .55, .97) var(--orbit-flip-delay) infinite;
    }

    .slide.active .kos-atlas-orbit.orbit-two { animation-direction: reverse, reverse; }
    .slide.active .kos-atlas-scan { animation: kos-atlas-scan-spin 13s linear infinite; }
    .slide.active .kos-atlas-links .atlas-link-beam { animation: kos-atlas-beam-flow 5.8s linear infinite; animation-delay: var(--beam-delay, 0s); }
    .slide.active .kos-atlas-core-shell { animation: kos-atlas-core-in .78s cubic-bezier(.18, .88, .2, 1) both; }
    .slide.active .kos-atlas-core-shell::after { animation: kos-atlas-core-halo 4.8s ease-in-out 1s infinite; }
    .slide.active .kos-atlas-node,
    .slide.active .kos-atlas-subject { animation: kos-atlas-node-in .62s cubic-bezier(.2, .82, .22, 1) both, kos-atlas-node-signal 8.4s ease-in-out calc(1.2s + var(--atlas-delay, 0s)) infinite; animation-delay: var(--atlas-delay, 0s), calc(1.2s + var(--atlas-delay, 0s)); }

    .slide:not(.active) .kos-atlas-orbit,
    .slide:not(.active) .kos-atlas-scan,
    .slide:not(.active) .kos-atlas-links .atlas-link-beam,
    .slide:not(.active) .kos-atlas-core-shell,
    .slide:not(.active) .kos-atlas-core-shell::after,
    .slide:not(.active) .kos-atlas-node,
    .slide:not(.active) .kos-atlas-subject { animation-play-state: paused !important; }

    @keyframes kos-atlas-orbit-phase {
      to { --kos-orbit-phase: 360deg; }
    }

    @keyframes kos-atlas-orbit-tumble {
      0%, 100% { transform: translate3d(-50%, -50%, var(--orbit-depth-a)) rotateZ(var(--orbit-tilt)) rotateX(var(--orbit-pitch-a)) rotateY(var(--orbit-yaw-a)) scale(var(--orbit-scale-a)); }
      25% { transform: translate3d(-50%, -50%, var(--orbit-depth-b)) rotateZ(calc(var(--orbit-tilt) + 18deg)) rotateX(var(--orbit-pitch-b)) rotateY(var(--orbit-yaw-b)) scale(var(--orbit-scale-b)); }
      50% { transform: translate3d(-50%, -50%, var(--orbit-depth-c)) rotateZ(calc(var(--orbit-tilt) - 14deg)) rotateX(var(--orbit-pitch-c)) rotateY(var(--orbit-yaw-c)) scale(var(--orbit-scale-c)); }
      75% { transform: translate3d(-50%, -50%, var(--orbit-depth-d)) rotateZ(calc(var(--orbit-tilt) + 11deg)) rotateX(var(--orbit-pitch-d)) rotateY(var(--orbit-yaw-d)) scale(var(--orbit-scale-d)); }
    }

    @keyframes kos-atlas-scan-spin {
      from { transform: translate(-50%, -50%) rotate(0); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes kos-atlas-beam-flow {
      to { stroke-dashoffset: -272; }
    }

    @keyframes kos-atlas-core-in {
      from { opacity: 0; transform: translate(-50%, -50%) scale(.7) rotate(-8deg); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
    }

    @keyframes kos-atlas-core-halo {
      0%, 100% { opacity: .42; transform: scale(.94); }
      50% { opacity: .82; transform: scale(1.12); }
    }

    @keyframes kos-atlas-node-in {
      from { opacity: 0; transform: translate(-50%, -38%) scale(.9); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes kos-atlas-node-signal {
      0%, 9%, 100% { border-color: rgba(var(--atlas-tone, 18, 122, 135), .28); box-shadow: 0 11px 23px rgba(var(--atlas-tone, 18, 122, 135), .11), inset 0 1px 0 #fff; }
      3.5% { border-color: rgba(var(--atlas-tone, 18, 122, 135), .72); box-shadow: 0 12px 27px rgba(var(--atlas-tone, 18, 122, 135), .24), 0 0 0 4px rgba(var(--atlas-tone, 18, 122, 135), .09), inset 0 1px 0 #fff; }
    }

    @media (prefers-reduced-motion: reduce) {
      .kos-atlas-orbit,
      .kos-atlas-scan,
      .kos-atlas-links .atlas-link-beam,
      .kos-atlas-core-shell,
      .kos-atlas-core-shell::after,
      .kos-atlas-node,
      .kos-atlas-subject { animation: none !important; }
    }

    /* 第32页：在标准PPT版式中嵌入诗云网页 */
    .shiyun-embed-slide {
      background:
        radial-gradient(circle at 78% 32%, rgba(99, 78, 193, .06), transparent 27%),
        radial-gradient(circle at 22% 78%, rgba(27, 151, 170, .055), transparent 29%),
        linear-gradient(135deg, #fbfdff, #f7f9ff 58%, #fffdf8);
    }

    .shiyun-embed-slide .slide-content {
      height: 650px;
      padding-top: 18px;
    }

    .shiyun-content-shell {
      position: relative;
      width: 100%;
      height: 618px;
      overflow: hidden;
      border: 1px solid rgba(42, 78, 149, .2);
      border-radius: 24px;
      background: #08090d;
      box-shadow: 0 20px 48px rgba(17, 46, 97, .14), inset 0 1px 0 rgba(255, 255, 255, .8);
      isolation: isolate;
    }

    .shiyun-browser-bar {
      position: relative;
      z-index: 6;
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr) 180px;
      align-items: center;
      gap: 14px;
      height: 58px;
      padding: 0 16px 0 20px;
      border-bottom: 1px solid rgba(33, 62, 111, .14);
      color: #203455;
      background: rgba(250, 252, 255, .97);
      box-shadow: 0 5px 18px rgba(11, 28, 66, .1);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }

    .shiyun-window-dots {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 74px;
    }

    .shiyun-window-dot {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 13px;
      height: 13px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px rgba(75, 52, 28, .12), 0 1px 2px rgba(27, 39, 59, .12);
    }

    .shiyun-window-dot.is-red { background: #ec7478; }
    .shiyun-window-dot.is-yellow { background: #f3b04d; }
    .shiyun-window-dot.is-green { background: #65c88f; }

    button.shiyun-window-dot.is-green {
      position: relative;
      color: #15472c;
      cursor: pointer;
      transition: box-shadow .2s ease, filter .2s ease;
    }

    button.shiyun-window-dot.is-green::before {
      content: "";
      position: absolute;
      inset: -7px;
      border-radius: 50%;
    }

    button.shiyun-window-dot.is-green svg {
      position: relative;
      z-index: 1;
      width: 8px;
      height: 8px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.25;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
    }

    button.shiyun-window-dot.is-green:hover,
    button.shiyun-window-dot.is-green:focus-visible {
      filter: saturate(1.08) brightness(1.03);
      box-shadow: 0 0 0 4px rgba(101, 200, 143, .18), 0 3px 8px rgba(31, 121, 72, .2), inset 0 0 0 1px rgba(34, 91, 57, .2);
      outline: none;
    }

    button.shiyun-window-dot.is-green:hover svg { opacity: 1; }

    button.shiyun-window-dot.is-green:focus-visible {
      outline: 2px solid rgba(29, 91, 173, .72);
      outline-offset: 4px;
    }

    .shiyun-browser-title {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: #1c355e;
      text-align: center;
    }

    .shiyun-browser-title svg {
      flex: 0 0 auto;
      width: 24px;
      height: 24px;
      fill: none;
      stroke: #6750c7;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .shiyun-browser-title strong {
      color: #1a3157;
      font-size: 17px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .shiyun-browser-title small {
      overflow: hidden;
      color: #7a879c;
      font-size: 12px;
      font-weight: 750;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .shiyun-browser-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .shiyun-interaction-toggle,
    .shiyun-fullscreen-toggle,
    .shiyun-fullscreen-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 36px;
      padding: 0 13px;
      border: 1px solid rgba(31, 94, 190, .2);
      border-radius: 99px;
      color: #1757b5;
      background: linear-gradient(135deg, #eef5ff, #f4f0ff);
      box-shadow: 0 6px 14px rgba(36, 80, 160, .08);
      font: 850 13px/1 var(--font);
      cursor: pointer;
      transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .shiyun-interaction-toggle { min-width: 164px; }

    .shiyun-fullscreen-toggle,
    .shiyun-fullscreen-close {
      min-width: 112px;
      color: #fff;
      border-color: rgba(36, 91, 185, .12);
      background: linear-gradient(135deg, #275fbd, #6956c7);
      box-shadow: 0 7px 17px rgba(50, 74, 164, .2);
    }

    .shiyun-interaction-toggle:hover,
    .shiyun-interaction-toggle:focus-visible,
    .shiyun-fullscreen-toggle:hover,
    .shiyun-fullscreen-toggle:focus-visible,
    .shiyun-fullscreen-close:hover,
    .shiyun-fullscreen-close:focus-visible {
      border-color: rgba(57, 102, 194, .42);
      box-shadow: 0 8px 20px rgba(36, 80, 160, .16);
      outline: none;
    }

    .shiyun-interaction-toggle svg,
    .shiyun-fullscreen-toggle svg,
    .shiyun-fullscreen-close svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .shiyun-content-shell.is-interactive .shiyun-interaction-toggle {
      border-color: rgba(191, 121, 27, .28);
      color: #8e5b12;
      background: linear-gradient(135deg, #fff8e9, #fffdf5);
      box-shadow: 0 6px 15px rgba(174, 107, 20, .1);
    }

    .shiyun-frame-viewport {
      position: absolute;
      inset: 58px 0 0;
      z-index: 1;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 48%, rgba(171, 119, 45, .2), transparent 28%),
        radial-gradient(circle at 18% 24%, rgba(66, 97, 128, .2), transparent 34%),
        linear-gradient(145deg, #171615, #07080d 64%, #020309);
    }

    .shiyun-live-frame {
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
      background: #07080d;
    }

    .shiyun-live-frame iframe {
      position: absolute;
      inset: 0 0 0 26px;
      z-index: 2;
      display: block;
      width: calc(100% - 26px);
      height: 100%;
      border: 0;
      background: #07080d;
      opacity: 0;
      pointer-events: none;
      transition: opacity .38s ease;
    }

    .shiyun-live-frame.is-ready iframe,
    .shiyun-content-shell.is-ready .shiyun-live-frame iframe { opacity: 1; }

    .shiyun-content-shell.is-interactive .shiyun-live-frame iframe,
    .shiyun-fullscreen-modal.is-open .shiyun-live-frame iframe { pointer-events: auto; }

    .shiyun-embedded-brand {
      position: absolute;
      top: 11px;
      left: 12px;
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 208px;
      height: 40px;
      padding: 0 12px 0 10px;
      border: 1px solid rgba(211, 183, 120, .18);
      border-radius: 12px;
      color: #fff9e9;
      background: linear-gradient(90deg, rgba(9, 10, 15, .99) 0%, rgba(9, 10, 15, .97) 82%, rgba(9, 10, 15, .84) 100%);
      box-shadow: 0 10px 26px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .045);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s ease;
    }

    .shiyun-live-frame.is-ready .shiyun-embedded-brand { opacity: 1; }

    .shiyun-embedded-brand svg {
      width: 20px;
      height: 20px;
      flex: 0 0 auto;
      fill: none;
      stroke: #e1ba70;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 8px rgba(225, 186, 112, .28));
    }

    .shiyun-embedded-brand strong {
      font: 850 15px/1 var(--font);
      letter-spacing: .035em;
      white-space: nowrap;
      text-shadow: 0 1px 10px rgba(0, 0, 0, .32);
    }

    .shiyun-fullscreen-modal {
      position: fixed;
      inset: 0;
      z-index: 3600;
      overflow: hidden;
      color: #203455;
      background: #08090d;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .22s ease, visibility 0s linear .22s;
    }

    .shiyun-fullscreen-modal.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .shiyun-fullscreen-shell {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background: #08090d;
    }

    .shiyun-fullscreen-shell > .shiyun-browser-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    .shiyun-fullscreen-viewport {
      position: absolute;
      inset: 58px 0 0;
      overflow: hidden;
      background: #07080d;
    }

    .shiyun-fullscreen-viewport .shiyun-live-frame { position: absolute; inset: 0; }

    html.shiyun-modal-open,
    html.shiyun-modal-open body { overflow: hidden; }

    .shiyun-frame-shield {
      position: absolute;
      inset: 0;
      z-index: 4;
      display: block;
      padding: 0;
      border: 0;
      color: #fff;
      background: transparent;
      cursor: pointer;
    }

    .shiyun-frame-shield span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 35px;
      padding: 0 13px;
      border: 1px solid rgba(255, 255, 255, .24);
      border-radius: 99px;
      color: rgba(255, 255, 255, .95);
      background: rgba(7, 11, 20, .62);
      box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
      font-size: 13px;
      font-weight: 850;
      line-height: 1;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    .shiyun-frame-shield svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .shiyun-content-shell.is-interactive .shiyun-frame-shield {
      display: none;
    }

    .shiyun-loading {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: grid;
      place-content: center;
      justify-items: center;
      gap: 12px;
      color: rgba(255, 255, 255, .92);
      text-align: center;
      background:
        radial-gradient(circle at 50% 48%, rgba(171, 119, 45, .2), transparent 28%),
        radial-gradient(circle at 18% 24%, rgba(66, 97, 128, .2), transparent 34%),
        linear-gradient(145deg, #171615, #07080d 64%, #020309);
      opacity: 1;
      visibility: visible;
      pointer-events: none;
      transition: opacity .42s ease, visibility 0s linear 0s;
    }

    .shiyun-content-shell.is-ready .shiyun-loading {
      opacity: 0;
      visibility: hidden;
      transition: opacity .42s ease, visibility 0s linear .42s;
    }

    .shiyun-loading span {
      color: rgba(224, 185, 112, .7);
      font-size: 14px;
      font-weight: 850;
      letter-spacing: .32em;
    }

    .shiyun-loading strong {
      font-size: 52px;
      font-weight: 750;
      letter-spacing: .12em;
    }

    .shiyun-loading i {
      display: block;
      width: 180px;
      height: 2px;
      overflow: hidden;
      border-radius: 99px;
      background: rgba(255, 255, 255, .12);
    }

    .shiyun-loading i::after {
      content: "";
      display: block;
      width: 56px;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, transparent, #e0b970, transparent);
      animation: shiyun-loading-scan 1.35s ease-in-out infinite;
    }

    .slide:not(.active) .shiyun-loading i::after { animation-play-state: paused; }

    @keyframes shiyun-loading-scan {
      from { transform: translateX(-64px); }
      to { transform: translateX(188px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .shiyun-loading i::after { animation: none; transform: translateX(62px); }
      .shiyun-live-frame iframe,
      .shiyun-embedded-brand,
      .shiyun-fullscreen-modal,
      button.shiyun-window-dot.is-green,
      button.shiyun-window-dot.is-green svg,
      .shiyun-interaction-toggle,
      .shiyun-fullscreen-toggle,
      .shiyun-fullscreen-close { transition: none; }
    }

    /* 第33页：学习操作系统与因材施教闭环 */
    .los-learning-slide .slide-content { padding-top: 18px; }

    .los-learning-stage {
      position: relative;
      display: grid;
      grid-template-columns: 305px minmax(0, 1fr) 370px;
      grid-template-rows: 490px 106px;
      gap: 16px 22px;
      width: 100%;
      height: 612px;
      color: #123052;
      isolation: isolate;
    }

    .los-learning-stage::before {
      content: "";
      position: absolute;
      inset: -18px 0 -20px;
      z-index: -2;
      pointer-events: none;
      background:
        radial-gradient(circle at 49% 43%, rgba(39, 157, 168, .1), transparent 31%),
        radial-gradient(circle at 82% 35%, rgba(231, 166, 62, .075), transparent 28%),
        linear-gradient(rgba(31, 103, 160, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 103, 160, .025) 1px, transparent 1px);
      background-size: auto, auto, 36px 36px, 36px 36px;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 7% 93%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 7% 93%, transparent);
    }

    .los-main-links {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 490px;
      overflow: visible;
      pointer-events: none;
    }

    .los-main-links path {
      fill: none;
      stroke: url(#los-link-gradient);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 7 9;
      opacity: .76;
      marker-end: url(#los-link-arrow);
    }

    .los-score-panel,
    .los-mastery-panel,
    .los-package-panel,
    .los-loop-band {
      position: relative;
      z-index: 2;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border-radius: 24px;
      box-shadow: 0 18px 46px rgba(16, 57, 96, .1);
    }

    .los-score-panel {
      padding: 21px;
      color: #fff;
      background:
        radial-gradient(circle at 82% 14%, rgba(111, 224, 216, .28), transparent 30%),
        linear-gradient(155deg, #123e66, #0b6678 62%, #0b7f83);
    }

    .los-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .los-panel-head span {
      display: block;
      margin-bottom: 6px;
      color: #68809c;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .14em;
      line-height: 1;
    }

    .los-score-panel .los-panel-head span { color: rgba(198, 241, 239, .72); }

    .los-panel-head h3 {
      margin: 0;
      color: #123052;
      font-size: 24px;
      font-weight: 950;
      line-height: 1.1;
      letter-spacing: -.025em;
    }

    .los-score-panel .los-panel-head h3 { color: #fff; }

    .los-demo-badge {
      flex: 0 0 auto;
      padding: 6px 9px;
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 99px;
      color: rgba(255, 255, 255, .86);
      background: rgba(255, 255, 255, .1);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }

    .los-score-orbit {
      position: relative;
      display: grid;
      place-items: center;
      width: 138px;
      height: 138px;
      margin: 10px auto 7px;
      border-radius: 50%;
      background: conic-gradient(#79ded4 0 78%, rgba(255, 255, 255, .14) 78% 100%);
      box-shadow: 0 14px 30px rgba(4, 44, 58, .2), 0 0 0 7px rgba(255, 255, 255, .055);
    }

    .los-score-orbit::before {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 50%;
      background: linear-gradient(145deg, #153f61, #0c5f6e);
      box-shadow: inset 0 0 22px rgba(97, 226, 216, .16);
    }

    .los-score-number {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .los-score-number strong {
      display: block;
      font-size: 68px;
      font-weight: 950;
      line-height: .9;
      letter-spacing: -.06em;
    }

    .los-score-number span {
      display: block;
      margin-top: 9px;
      color: rgba(223, 248, 246, .78);
      font-size: 14px;
      font-weight: 850;
    }

    .los-score-caption {
      margin: 0 0 9px;
      color: rgba(240, 255, 254, .88);
      font-size: 15px;
      font-weight: 760;
      line-height: 1.4;
      text-align: center;
    }

    .los-question-evidence {
      display: grid;
      gap: 7px;
    }

    .los-question-row {
      display: grid;
      grid-template-columns: 47px 26px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-height: 36px;
      padding: 6px 9px;
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 11px;
      background: rgba(255, 255, 255, .075);
    }

    .los-question-row b {
      color: rgba(220, 247, 245, .78);
      font-size: 13px;
      font-weight: 850;
    }

    .los-question-row i {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      color: #fff;
      background: rgba(70, 206, 153, .82);
      font-size: 14px;
      font-style: normal;
      font-weight: 950;
    }

    .los-question-row.is-wrong i { background: rgba(231, 92, 111, .88); }

    .los-question-row span {
      min-width: 0;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.15;
      white-space: nowrap;
    }

    .los-score-insight {
      margin-top: 7px;
      padding-top: 9px;
      border-top: 1px solid rgba(255, 255, 255, .16);
      color: #dff9f7;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.35;
      text-align: center;
    }

    .los-assessment-phone-zone {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 0;
      overflow: visible;
      border-radius: 34px;
      isolation: isolate;
    }

    .los-assessment-phone-zone::before {
      content: "";
      position: absolute;
      inset: 45px 6px 26px;
      z-index: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(69, 88, 205, .22), rgba(48, 161, 161, .09) 48%, transparent 72%);
      filter: blur(18px);
      pointer-events: none;
    }

    .los-phone-shell {
      position: relative;
      width: 244px;
      height: 490px;
      padding: 6px;
      border: 1px solid rgba(28, 39, 60, .82);
      border-radius: 43px;
      background:
        linear-gradient(115deg, #151a24 0%, #677080 10%, #111722 23%, #aeb8c3 45%, #171e2b 63%, #5e6877 82%, #0b1018 100%);
      box-shadow:
        0 24px 45px rgba(24, 48, 77, .22),
        0 8px 16px rgba(28, 45, 67, .16),
        inset 0 0 0 1px rgba(255, 255, 255, .44),
        inset 0 0 0 3px rgba(3, 8, 15, .5);
      transform-style: preserve-3d;
    }

    .los-phone-shell::before {
      content: "";
      position: absolute;
      inset: 3px;
      z-index: 4;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 39px;
      pointer-events: none;
    }

    .los-phone-button {
      position: absolute;
      z-index: 0;
      width: 4px;
      border: 1px solid rgba(17, 23, 33, .84);
      background: linear-gradient(180deg, #8a94a1, #242c38 22% 80%, #7b8693);
      box-shadow: 0 2px 4px rgba(17, 26, 39, .28);
    }

    .los-phone-button.silent { left: -4px; top: 92px; height: 29px; border-radius: 3px 0 0 3px; }
    .los-phone-button.volume-up { left: -4px; top: 142px; height: 53px; border-radius: 3px 0 0 3px; }
    .los-phone-button.volume-down { left: -4px; top: 207px; height: 53px; border-radius: 3px 0 0 3px; }
    .los-phone-button.power { right: -4px; top: 158px; height: 82px; border-radius: 0 3px 3px 0; }

    .los-phone-screen {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: 1px solid rgba(4, 10, 19, .92);
      border-radius: 36px;
      color: #1d2b49;
      background:
        radial-gradient(circle at 12% 0%, rgba(124, 131, 255, .14), transparent 26%),
        linear-gradient(180deg, #f7f8ff, #eef3ff 68%, #f8fbff);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .58);
      font-family: var(--font);
    }

    .los-phone-island {
      position: absolute;
      top: 9px;
      left: 50%;
      z-index: 8;
      width: 78px;
      height: 22px;
      border-radius: 99px;
      background: #050609;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .045);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .los-phone-island::after {
      content: "";
      position: absolute;
      top: 7px;
      right: 8px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #354ea3, #07101d 58%, #000);
      box-shadow: 0 0 5px rgba(74, 100, 222, .36);
    }

    .los-phone-status {
      position: absolute;
      top: 8px;
      left: 0;
      z-index: 7;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 26px;
      padding: 0 13px;
      color: #101827;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      pointer-events: none;
    }

    .los-phone-status-icons {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .los-phone-status-icons svg {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.55;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-phone-status-icons .is-cellular {
      width: 15px;
      height: 10px;
      fill: currentColor;
      stroke: none;
    }

    .los-phone-status-icons .is-wifi {
      width: 15px;
      height: 11px;
    }

    .los-phone-battery {
      position: relative;
      display: block;
      width: 20px;
      height: 10px;
      padding: 1.5px;
      border: 1.3px solid currentColor;
      border-radius: 3px;
      opacity: .96;
    }

    .los-phone-battery::after {
      content: "";
      position: absolute;
      top: 2.4px;
      right: -3px;
      width: 1.8px;
      height: 4px;
      border-radius: 0 1.5px 1.5px 0;
      background: currentColor;
      opacity: .62;
    }

    .los-phone-battery i {
      display: block;
      width: var(--phone-battery-level, 76%);
      height: 100%;
      border-radius: 1.4px;
      background: currentColor;
    }

    .los-phone-app-head {
      position: absolute;
      top: 35px;
      left: 0;
      z-index: 6;
      display: grid;
      grid-template-columns: 26px minmax(0, 1fr) 34px;
      align-items: center;
      gap: 4px;
      width: 100%;
      height: 57px;
      padding: 0 9px;
      border-bottom: 1px solid rgba(62, 79, 135, .1);
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .los-phone-app-title {
      min-width: 0;
      text-align: center;
    }

    .los-phone-app-title strong {
      display: block;
      overflow: hidden;
      color: #1c2c52;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .los-phone-app-title span {
      display: block;
      margin-top: 4px;
      color: #74809b;
      font-size: 9px;
      font-weight: 800;
      line-height: 1;
    }

    .los-phone-progress-pill {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      min-width: 34px;
      height: 27px;
      padding: 0 5px;
      border: 1px solid rgba(79, 70, 229, .17);
      border-radius: 99px;
      color: #4f46e5;
      background: rgba(79, 70, 229, .075);
      font-size: 9px;
      font-weight: 950;
      line-height: 1;
    }

    .los-phone-app-mark {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border: 1px solid rgba(79, 70, 229, .14);
      border-radius: 9px;
      color: #4f46e5;
      background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(99, 102, 241, .1));
      box-shadow: 0 5px 12px rgba(79, 70, 229, .1);
    }

    .los-phone-app-mark svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-phone-scroll {
      position: absolute;
      top: 92px;
      right: 0;
      bottom: 18px;
      left: 0;
      z-index: 3;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 8px 9px 24px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
    }

    .los-phone-screen:not(.is-result) .los-phone-scroll {
      bottom: 80px;
      overflow-y: hidden;
      padding: 7px 9px 5px;
    }

    .los-phone-scroll::-webkit-scrollbar { display: none; }

    .los-phone-home {
      position: absolute;
      bottom: 6px;
      left: 50%;
      z-index: 7;
      width: 90px;
      height: 4px;
      border-radius: 99px;
      background: rgba(14, 22, 38, .72);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .los-phone-question-view,
    .los-phone-result-view {
      min-height: 100%;
      text-align: left;
    }

    .los-phone-question-view { min-height: 0; }

    .los-phone-result-view { display: none; }
    .los-phone-screen.is-result .los-phone-question-view { display: none; }
    .los-phone-screen.is-result .los-phone-result-view {
      display: block;
      animation: los-phone-result-in .36s cubic-bezier(.2, .75, .25, 1) both;
    }

    .los-question-progress {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 7px;
    }

    .los-question-progress i {
      flex: 1 1 auto;
      height: 4px;
      overflow: hidden;
      border-radius: 99px;
      background: rgba(79, 70, 229, .1);
    }

    .los-question-progress i::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #4f46e5, #25a99f);
      box-shadow: 0 0 8px rgba(79, 70, 229, .28);
    }

    .los-question-progress span,
    .los-question-progress b {
      color: #78839c;
      font-size: 9px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .los-question-progress b {
      color: #4f46e5;
      font-weight: 950;
    }

    .los-question-card {
      padding: 8px;
      border: 1px solid rgba(74, 86, 142, .13);
      border-radius: 15px;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 9px 22px rgba(52, 68, 120, .085), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .los-question-kicker {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 5px;
      color: #66728d;
      font-size: 9px;
      font-weight: 900;
      line-height: 1;
    }

    .los-question-kicker b {
      padding: 3px 6px;
      border-radius: 99px;
      color: #3e3ab1;
      background: rgba(79, 70, 229, .08);
      font-size: 8px;
    }

    .los-question-card h4 {
      margin: 0;
      color: #17264a;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.3;
      letter-spacing: -.015em;
    }

    .los-question-card h4 em {
      color: #4f46e5;
      font-style: normal;
      white-space: nowrap;
    }

    .los-answer-options {
      display: grid;
      gap: 5px;
      margin-top: 7px;
    }

    .los-answer-option {
      display: grid;
      grid-template-columns: 29px minmax(0, 1fr) 17px;
      align-items: center;
      gap: 7px;
      min-height: 44px;
      padding: 5px 7px;
      border: 1px solid rgba(71, 83, 132, .15);
      border-radius: 12px;
      color: #2e3b5d;
      background: #fff;
      box-shadow: 0 4px 10px rgba(51, 65, 111, .045);
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
    }

    .los-answer-option:hover {
      border-color: rgba(79, 70, 229, .36);
      background: #fafaff;
    }

    .los-answer-option:focus-visible {
      outline: 3px solid rgba(79, 70, 229, .18);
      outline-offset: 2px;
    }

    .los-answer-option.is-selected {
      border-color: rgba(79, 70, 229, .62);
      color: #29256f;
      background: linear-gradient(135deg, rgba(79, 70, 229, .12), rgba(255, 255, 255, .96));
      box-shadow: 0 7px 16px rgba(79, 70, 229, .12);
    }

    .los-answer-letter {
      display: grid;
      place-items: center;
      width: 29px;
      height: 29px;
      border-radius: 9px;
      color: #596680;
      background: #f0f3fa;
      font-size: 12px;
      font-weight: 950;
      transition: color .18s ease, background .18s ease;
    }

    .los-answer-option.is-selected .los-answer-letter {
      color: #fff;
      background: linear-gradient(145deg, #4f46e5, #7068ef);
      box-shadow: 0 5px 10px rgba(79, 70, 229, .22);
    }

    .los-answer-formula {
      min-width: 0;
      font-family: "Times New Roman", "STIX Two Math", serif;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.1;
    }

    .los-answer-check {
      display: grid;
      place-items: center;
      width: 17px;
      height: 17px;
      border: 1.5px solid rgba(91, 102, 139, .32);
      border-radius: 50%;
      color: transparent;
      font-size: 11px;
      font-weight: 950;
    }

    .los-answer-option.is-selected .los-answer-check {
      border-color: #4f46e5;
      color: #fff;
      background: #4f46e5;
    }

    .los-phone-submit {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 44px;
      margin: 0;
      overflow: hidden;
      border: 0;
      border-radius: 13px;
      color: #fff;
      background: linear-gradient(135deg, #4f46e5, #655be8 54%, #249f99);
      box-shadow: 0 10px 20px rgba(79, 70, 229, .22);
      cursor: pointer;
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
      transition: opacity .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .los-phone-submit-dock {
      position: absolute;
      right: 9px;
      bottom: 17px;
      left: 9px;
      z-index: 6;
      height: 63px;
      padding: 6px;
      border: 1px solid rgba(76, 87, 142, .12);
      border-radius: 16px 16px 12px 12px;
      background: rgba(250, 252, 255, .92);
      box-shadow: 0 -8px 22px rgba(45, 57, 104, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      transition: opacity .22s ease, transform .22s ease;
    }

    .los-phone-screen.is-result .los-phone-submit-dock {
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px);
    }

    .los-phone-submit::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 24%, rgba(255, 255, 255, .34) 46%, transparent 68%);
      transform: translateX(-120%);
    }

    .los-phone-submit:not(:disabled):hover { box-shadow: 0 12px 24px rgba(79, 70, 229, .3); }
    .los-phone-submit:not(:disabled):active { transform: translateY(1px); }
    .los-phone-submit:focus-visible { outline: 3px solid rgba(79, 70, 229, .2); outline-offset: 2px; }

    .los-phone-submit:disabled {
      color: #8791a9;
      background: #e6eaf3;
      box-shadow: none;
      cursor: default;
    }

    .los-phone-screen.is-submitting .los-phone-submit::before { animation: los-submit-sheen .78s ease-in-out infinite; }

    .los-submit-spinner {
      display: none;
      width: 15px;
      height: 15px;
      border: 2px solid rgba(255, 255, 255, .36);
      border-top-color: #fff;
      border-radius: 50%;
    }

    .los-phone-screen.is-submitting .los-submit-spinner {
      display: inline-block;
      animation: los-submit-spin .72s linear infinite;
    }

    .los-phone-auto-hint {
      margin: 4px 0 0;
      color: #7d879f;
      font-size: 8px;
      font-weight: 750;
      line-height: 1.35;
      text-align: center;
    }

    .los-result-hero {
      position: relative;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      padding: 11px;
      overflow: hidden;
      border: 1px solid rgba(69, 90, 167, .18);
      border-radius: 19px;
      background:
        radial-gradient(circle at 95% 4%, rgba(45, 186, 156, .18), transparent 38%),
        linear-gradient(138deg, rgba(91, 82, 218, .12), rgba(255, 255, 255, .98) 56%, rgba(37, 169, 159, .1));
      box-shadow: 0 12px 28px rgba(57, 73, 130, .11), inset 0 1px 0 rgba(255, 255, 255, .96);
      isolation: isolate;
    }

    .los-result-hero::before {
      content: "";
      position: absolute;
      top: -34px;
      right: -18px;
      width: 102px;
      height: 102px;
      border: 18px solid rgba(255, 255, 255, .28);
      border-radius: 50%;
      opacity: .72;
      pointer-events: none;
    }

    .los-result-hero > * {
      position: relative;
      z-index: 1;
    }

    .los-result-score-ring {
      position: relative;
      display: grid;
      grid-template-rows: auto auto;
      align-content: center;
      justify-items: center;
      row-gap: 3px;
      width: 70px;
      height: 68px;
      padding: 5px 6px 11px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .62);
      border-radius: 18px;
      background:
        radial-gradient(circle at 22% 6%, rgba(255, 255, 255, .34), transparent 34%),
        linear-gradient(145deg, #6157e7, #4448bd 52%, #159a93);
      box-shadow:
        0 10px 22px rgba(68, 72, 189, .28),
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -12px 22px rgba(23, 43, 111, .2);
      isolation: isolate;
    }

    .los-result-score-ring::before {
      content: "";
      position: absolute;
      inset: 3px;
      z-index: 0;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 15px;
      background: linear-gradient(130deg, rgba(255, 255, 255, .11), transparent 46%);
      box-shadow: inset 0 0 14px rgba(255, 255, 255, .08);
    }

    .los-result-score-ring::after {
      content: "";
      position: absolute;
      right: 9px;
      bottom: 7px;
      left: 9px;
      height: 3px;
      border-radius: 99px;
      background: linear-gradient(90deg, #fde68a 0 var(--result-score, 78%), rgba(255, 255, 255, .2) var(--result-score, 78%) 100%);
      box-shadow: 0 0 8px rgba(253, 230, 138, .42);
    }

    .los-result-score-ring strong {
      position: relative;
      z-index: 1;
      color: #fff;
      font-size: 28px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.05em;
      text-shadow: 0 2px 8px rgba(23, 31, 97, .32);
    }

    .los-result-score-ring small {
      position: relative;
      z-index: 1;
      margin: 0;
      color: rgba(255, 255, 255, .82);
      font-size: 8px;
      font-weight: 900;
      letter-spacing: .04em;
    }

    .los-result-summary strong {
      display: block;
      color: #1e2d52;
      font-size: 15px;
      font-weight: 950;
      line-height: 1.2;
    }

    .los-result-summary span {
      display: block;
      margin-top: 6px;
      padding: 5px 7px;
      border: 1px solid rgba(60, 154, 145, .12);
      border-radius: 9px;
      color: #50617b;
      background: rgba(255, 255, 255, .62);
      font-size: 10px;
      font-weight: 800;
      line-height: 1.35;
    }

    .los-result-section {
      margin-top: 9px;
      padding: 10px;
      border: 1px solid rgba(76, 88, 139, .13);
      border-radius: 16px;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 8px 20px rgba(57, 70, 117, .065), inset 0 1px 0 rgba(255, 255, 255, .98);
    }

    .los-result-section > header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .los-result-section > header strong {
      color: #203052;
      font-size: 12px;
      font-weight: 950;
    }

    .los-result-section > header span {
      color: #7a849c;
      font-size: 8px;
      font-weight: 850;
    }

    .los-quality-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .los-quality-item {
      padding: 8px 3px;
      border-radius: 11px;
      text-align: center;
      border: 1px solid rgba(79, 70, 229, .09);
      background: linear-gradient(160deg, #f9faff, #eef2ff);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
    }

    .los-quality-item:nth-child(1) { border-color: rgba(34, 157, 139, .14); background: linear-gradient(160deg, #f7fffc, #eaf9f5); }
    .los-quality-item:nth-child(2) { border-color: rgba(58, 112, 207, .14); background: linear-gradient(160deg, #f8fbff, #edf3ff); }
    .los-quality-item:nth-child(3) { border-color: rgba(218, 148, 43, .16); background: linear-gradient(160deg, #fffdf7, #fff5df); }

    .los-quality-item strong {
      display: block;
      color: #35406a;
      font-size: 15px;
      font-weight: 950;
      line-height: 1;
    }

    .los-quality-item:nth-child(1) strong { color: #16806f; }
    .los-quality-item:nth-child(2) strong { color: #315fae; }
    .los-quality-item:nth-child(3) strong { color: #a66a12; }

    .los-quality-item span {
      display: block;
      margin-top: 5px;
      color: #778098;
      font-size: 9px;
      font-weight: 800;
      line-height: 1;
    }

    .los-result-knowledge-list {
      display: grid;
      gap: 9px;
    }

    .los-result-knowledge {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px;
      align-items: center;
      gap: 8px;
    }

    .los-result-knowledge-copy {
      min-width: 0;
    }

    .los-result-knowledge-copy strong {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      color: #35425f;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }

    .los-result-knowledge-copy strong small {
      color: #8790a6;
      font-size: 8px;
      font-weight: 800;
    }

    .los-result-knowledge-copy i {
      display: block;
      height: 6px;
      margin-top: 6px;
      overflow: hidden;
      border-radius: 99px;
      background: rgba(var(--result-rgb), .11);
      box-shadow: inset 0 1px 2px rgba(31, 45, 74, .08);
    }

    .los-result-knowledge-copy i::after {
      content: "";
      display: block;
      width: var(--result-width);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgb(var(--result-rgb)), rgba(var(--result-rgb), .62));
      box-shadow: 0 0 8px rgba(var(--result-rgb), .22);
    }

    .los-result-knowledge > b {
      color: rgb(var(--result-rgb));
      font-size: 14px;
      font-weight: 950;
      text-align: right;
    }

    .los-question-analysis {
      border-left: 0;
      padding-left: 12px;
      background:
        linear-gradient(90deg, rgba(79, 70, 229, .1), transparent 42%),
        rgba(255, 255, 255, .95);
      box-shadow: 0 8px 20px rgba(57, 70, 117, .07), inset 4px 0 0 #4f46e5;
    }

    .los-question-analysis b {
      display: block;
      color: #3730a3;
      font-size: 11px;
      font-weight: 950;
    }

    .los-question-analysis strong {
      display: block;
      margin-top: 6px;
      color: #263654;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.4;
    }

    .los-question-analysis p {
      margin: 7px 0 0;
      color: #68738c;
      font-size: 10px;
      font-weight: 730;
      line-height: 1.55;
    }

    .los-phone-reset {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      min-height: 44px;
      margin: 10px 0 3px;
      border: 1px solid rgba(79, 70, 229, .18);
      border-radius: 13px;
      color: #4338ca;
      background: rgba(79, 70, 229, .065);
      cursor: pointer;
      font-size: 12px;
      font-weight: 950;
    }

    .los-phone-reset:hover { background: rgba(79, 70, 229, .1); }
    .los-phone-reset:focus-visible { outline: 3px solid rgba(79, 70, 229, .17); outline-offset: 2px; }

    .los-phone-reset svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-evidence-energy {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 7;
      width: 100%;
      height: 490px;
      overflow: visible;
      opacity: 0;
      pointer-events: none;
    }

    .los-evidence-energy.is-firing { opacity: 1; }

    .los-energy-route path,
    .los-energy-route circle {
      vector-effect: non-scaling-stroke;
      pointer-events: none;
    }

    .los-energy-route path {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-energy-route-base {
      stroke: rgba(var(--energy-rgb), .52);
      stroke-width: 1.8;
      stroke-dasharray: .025 .042;
      stroke-dashoffset: .42;
      opacity: 0;
    }

    .los-energy-route-glow,
    .los-energy-route-core {
      stroke-dasharray: .16 .84;
      stroke-dashoffset: 1;
      opacity: 0;
    }

    .los-energy-route-glow {
      stroke: rgba(var(--energy-rgb), .34);
      stroke-width: 11;
    }

    .los-energy-route-core {
      stroke: rgba(var(--energy-rgb), .96);
      stroke-width: 3;
    }

    .los-evidence-energy.is-firing .los-energy-route-base {
      animation: los-energy-map 1.62s ease-out var(--energy-delay) both;
    }

    .los-evidence-energy.is-firing .los-energy-route-glow {
      animation: los-energy-travel 1.16s cubic-bezier(.18, .72, .2, 1) var(--energy-delay) both;
    }

    .los-evidence-energy.is-firing .los-energy-route-core {
      animation: los-energy-travel 1.08s cubic-bezier(.16, .78, .2, 1) calc(var(--energy-delay) + 45ms) both;
    }

    .los-energy-impact-ring,
    .los-energy-impact-core {
      transform-box: fill-box;
      transform-origin: center;
      opacity: 0;
    }

    .los-energy-impact-ring {
      fill: none;
      stroke: rgba(var(--energy-rgb), .82);
      stroke-width: 2;
    }

    .los-energy-impact-core { fill: rgb(var(--energy-rgb)); }

    .los-evidence-energy.is-firing .los-energy-impact-ring {
      animation: los-energy-impact-ring 1.08s cubic-bezier(.16, .76, .22, 1) calc(var(--energy-delay) + 1.02s) both;
    }

    .los-evidence-energy.is-firing .los-energy-impact-core {
      animation: los-energy-impact-core .82s ease-out calc(var(--energy-delay) + 1.02s) both;
    }

    .los-mastery-card.is-receiving .los-card-rotor {
      transform-origin: 50% 50%;
      animation: los-card-receive 1.92s cubic-bezier(.18, .76, .2, 1);
    }

    .los-card-celebration {
      position: absolute;
      inset: -110px;
      z-index: 15;
      overflow: visible;
      opacity: 0;
      pointer-events: none;
    }

    .los-card-celebration i {
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--confetti-width, 5px);
      height: var(--confetti-height, 12px);
      border-radius: var(--confetti-radius, 2px);
      background: var(--confetti-color, #fff);
      box-shadow: 0 0 7px rgba(255, 255, 255, .56);
      opacity: 0;
      transform: translate(-50%, -50%) scale(.4) rotate(0deg);
    }

    .los-mastery-card.is-celebrating .los-card-celebration { opacity: 1; }
    .los-mastery-card.is-celebrating .los-card-celebration i.is-primary {
      animation: los-card-confetti 3.05s cubic-bezier(.14, .66, .2, 1) calc(120ms + var(--confetti-delay, 0ms)) both;
    }

    .los-mastery-card.is-celebrating .los-card-celebration i.is-secondary {
      animation: los-card-confetti-secondary 2.72s cubic-bezier(.12, .68, .2, 1) calc(1.02s + var(--confetti-delay, 0ms)) both;
    }

    .los-phone-screen.is-result .los-result-score-ring {
      animation: los-result-score-in .62s .08s cubic-bezier(.18, .78, .2, 1) both;
    }

    .slide.active .los-phone-shell { animation: los-phone-arrive .66s cubic-bezier(.18, .8, .22, 1) both; }
    .slide:not(.active) .los-phone-shell,
    .slide:not(.active) .los-phone-result-view,
    .slide:not(.active) .los-mastery-card.is-receiving .los-card-rotor { animation-play-state: paused !important; }

    @keyframes los-phone-arrive {
      from { opacity: 0; transform: translateY(18px) rotateY(-7deg); }
      to { opacity: 1; transform: translateY(0) rotateY(0); }
    }

    @keyframes los-phone-result-in {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes los-result-score-in {
      0% { opacity: 0; transform: translateY(7px) scale(.9); }
      68% { opacity: 1; transform: translateY(-1px) scale(1.035); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes los-submit-sheen { to { transform: translateX(120%); } }
    @keyframes los-submit-spin { to { transform: rotate(360deg); } }
    @keyframes los-energy-map {
      0% { opacity: 0; stroke-dashoffset: .42; }
      18%, 72% { opacity: .74; }
      100% { opacity: 0; stroke-dashoffset: 0; }
    }
    @keyframes los-energy-travel {
      0% { opacity: 0; stroke-dashoffset: 1; }
      14% { opacity: 1; }
      82% { opacity: 1; }
      100% { opacity: 0; stroke-dashoffset: 0; }
    }
    @keyframes los-energy-impact-ring {
      0% { opacity: 0; transform: scale(.2); }
      22% { opacity: .92; }
      100% { opacity: 0; transform: scale(4.3); }
    }
    @keyframes los-energy-impact-core {
      0% { opacity: 0; transform: scale(.2); }
      30% { opacity: 1; transform: scale(1.7); }
      100% { opacity: 0; transform: scale(.45); }
    }
    @keyframes los-card-receive {
      0%, 100% { translate: 0 0; rotate: y 0deg; filter: none; }
      10% { translate: -2px 0; rotate: y -48deg; filter: brightness(1.5) saturate(1.28) drop-shadow(0 0 20px rgba(var(--mastery-rgb), .8)); }
      22% { translate: 2px 0; rotate: y 45deg; filter: brightness(1.43) saturate(1.24) drop-shadow(0 0 18px rgba(var(--mastery-rgb), .72)); }
      35% { translate: -1px 0; rotate: y -37deg; filter: brightness(1.36) saturate(1.2) drop-shadow(0 0 16px rgba(var(--mastery-rgb), .64)); }
      49% { translate: 1px 0; rotate: y 30deg; filter: brightness(1.29) saturate(1.17) drop-shadow(0 0 14px rgba(var(--mastery-rgb), .56)); }
      63% { translate: -1px 0; rotate: y -21deg; filter: brightness(1.22) saturate(1.14) drop-shadow(0 0 12px rgba(var(--mastery-rgb), .48)); }
      76% { translate: 0 0; rotate: y 13deg; filter: brightness(1.16) saturate(1.11) drop-shadow(0 0 9px rgba(var(--mastery-rgb), .38)); }
      88% { translate: 0 0; rotate: y -6deg; filter: brightness(1.08) saturate(1.06) drop-shadow(0 0 6px rgba(var(--mastery-rgb), .24)); }
    }
    @keyframes los-card-confetti {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(.28) rotate(0deg); }
      9% { opacity: 1; transform: translate(-50%, -50%) scale(1.16) rotate(20deg); }
      58% { opacity: 1; transform: translate(calc(-50% + var(--confetti-mid-x)), calc(-50% + var(--confetti-mid-y))) scale(1.04) rotate(var(--confetti-mid-rotate)); }
      100% { opacity: 0; transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) scale(.74) rotate(var(--confetti-rotate)); }
    }
    @keyframes los-card-confetti-secondary {
      0% { opacity: 0; transform: translate(calc(-50% + var(--confetti-origin-x)), calc(-50% + var(--confetti-origin-y))) scale(.16) rotate(0deg); }
      10% { opacity: 1; transform: translate(calc(-50% + var(--confetti-origin-x)), calc(-50% + var(--confetti-origin-y))) scale(1.22) rotate(22deg); }
      62% { opacity: 1; transform: translate(calc(-50% + var(--confetti-mid-x)), calc(-50% + var(--confetti-mid-y))) scale(1.02) rotate(var(--confetti-mid-rotate)); }
      100% { opacity: 0; transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) scale(.68) rotate(var(--confetti-rotate)); }
    }

    .los-mastery-panel {
      padding: 21px 23px;
      overflow: visible;
      border: 1px solid rgba(44, 112, 163, .19);
      background:
        radial-gradient(circle at 82% 14%, rgba(60, 170, 181, .095), transparent 30%),
        linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(242, 249, 250, .94));
    }

    .los-mastery-panel .los-demo-badge {
      color: #147783;
      border-color: rgba(20, 119, 131, .18);
      background: rgba(34, 158, 169, .08);
    }

    .los-evidence-chain {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      margin-top: 14px;
    }

    .los-chain-step {
      position: relative;
      min-height: 58px;
      padding: 10px 11px;
      border: 1px solid rgba(34, 115, 151, .16);
      border-radius: 13px;
      background: rgba(255, 255, 255, .88);
      box-shadow: 0 7px 16px rgba(21, 83, 120, .05);
    }

    .los-chain-step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -18px;
      width: 11px;
      height: 11px;
      border-top: 2px solid #2c9aa3;
      border-right: 2px solid #2c9aa3;
      transform: translateY(-50%) rotate(45deg);
    }

    .los-chain-step span {
      display: block;
      color: #6b7f96;
      font-size: 12px;
      font-weight: 850;
      line-height: 1;
    }

    .los-chain-step strong {
      display: block;
      margin-top: 7px;
      color: #163a60;
      font-size: 16px;
      font-weight: 950;
      line-height: 1.1;
      white-space: nowrap;
    }

    .los-mastery-deck {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 14px;
      margin-top: 14px;
      perspective: 1200px;
    }

    .los-mastery-card {
      position: relative;
      min-width: 0;
      height: 108px;
      padding: 0;
      border: 0;
      border-radius: 17px;
      color: #fff;
      background: transparent;
      perspective: 980px;
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      outline: none;
      transform-style: preserve-3d;
    }

    .los-mastery-card::before,
    .los-mastery-card::after {
      content: "";
      position: absolute;
      left: 50%;
      z-index: 8;
      width: 34px;
      height: 7px;
      border: 1px solid rgba(var(--mastery-rgb), .42);
      border-radius: 99px;
      background: linear-gradient(90deg, #53616d, #eff6f8 24%, rgb(var(--mastery-rgb)) 52%, #f5fafb 78%, #53616d);
      box-shadow: 0 2px 6px rgba(25, 43, 58, .26), inset 0 1px 1px rgba(255, 255, 255, .76);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .los-mastery-card::before { top: -3px; }
    .los-mastery-card::after { bottom: -3px; }

    .los-mastery-card:hover,
    .los-mastery-card:focus-visible {
      filter: drop-shadow(0 11px 15px rgba(var(--mastery-rgb), .18));
    }

    .los-mastery-card:focus-visible::before,
    .los-mastery-card:focus-visible::after {
      box-shadow: 0 0 0 3px rgba(var(--mastery-rgb), .16), 0 2px 6px rgba(25, 43, 58, .28);
    }

    .los-mastery-card.is-dragging { cursor: grabbing; }

    .los-card-rotor {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      transform-style: preserve-3d;
      will-change: auto;
    }

    .los-card-rotor.is-in-motion {
      will-change: transform;
    }

    .los-card-face {
      position: absolute;
      inset: 0;
      display: grid;
      align-items: center;
      overflow: hidden;
      border: 1px solid rgba(var(--mastery-rgb), .48);
      border-radius: inherit;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      box-shadow:
        0 12px 24px rgba(31, 56, 76, .16),
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(16, 35, 51, .25),
        inset 0 0 0 4px rgba(255, 255, 255, .12);
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
    }

    .los-card-face::before {
      content: "";
      position: absolute;
      inset: 5px;
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 13px;
      box-shadow: inset 0 0 0 1px rgba(15, 39, 57, .12);
      pointer-events: none;
    }

    .los-card-face::after {
      content: "";
      position: absolute;
      inset: -30% -55%;
      background:
        radial-gradient(circle at var(--card-light-x, 50%) var(--card-light-y, 45%), rgba(255, 255, 255, .72), transparent 24%),
        linear-gradient(108deg, transparent 36%, rgba(255, 255, 255, .74) 48%, rgba(255, 255, 255, .08) 56%, transparent 68%);
      background-size: 100% 100%, 220% 100%;
      background-position: center, var(--card-shine-offset, 0%) 0;
      mix-blend-mode: screen;
      opacity: var(--card-glint-opacity, .12);
      pointer-events: none;
    }

    .los-card-front {
      grid-template-columns: 64px minmax(0, 1fr) 72px;
      gap: 12px;
      padding: 13px 14px;
      background:
        linear-gradient(118deg, rgba(255, 255, 255, .92), rgba(var(--mastery-rgb), .3) 23%, rgba(255, 255, 255, .84) 46%, rgba(var(--mastery-rgb), .54) 76%, rgba(25, 52, 69, .85)),
        rgb(var(--mastery-rgb));
    }

    .los-card-back {
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 11px;
      padding: 13px 15px;
      background:
        linear-gradient(130deg, rgba(16, 35, 51, .96), rgba(var(--mastery-rgb), .78) 52%, rgba(248, 251, 249, .9) 160%),
        rgb(var(--mastery-rgb));
      transform: rotateY(180deg);
    }

    .los-card-rotor.is-resting-back .los-card-front {
      visibility: hidden;
    }

    .los-card-rotor.is-resting-back .los-card-back {
      transform: none;
    }

    .los-card-medal {
      position: relative;
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      border: 2px solid rgba(255, 255, 255, .72);
      border-radius: 50%;
      color: #fff;
      background:
        radial-gradient(circle at 34% 28%, #fff 0 4%, rgba(255, 255, 255, .32) 5% 15%, transparent 16%),
        conic-gradient(from 210deg, #344654, #f7fbfc 12%, rgb(var(--mastery-rgb)) 29%, #fff7cc 43%, rgb(var(--mastery-rgb)) 67%, #eef6f8 82%, #344654);
      box-shadow:
        0 7px 14px rgba(20, 44, 61, .25),
        inset 0 0 0 5px rgba(255, 255, 255, .22),
        inset 0 0 16px rgba(18, 40, 57, .28);
    }

    .los-card-medal::before {
      content: "";
      position: absolute;
      inset: 9px;
      border: 1px dashed rgba(255, 255, 255, .72);
      border-radius: 50%;
    }

    .los-card-medal svg {
      position: relative;
      z-index: 1;
      width: 30px;
      height: 30px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 2px 3px rgba(12, 30, 45, .35));
    }

    .los-card-copy {
      position: relative;
      z-index: 2;
      min-width: 0;
      text-align: left;
    }

    .los-card-copy span {
      display: block;
      margin-bottom: 5px;
      color: #24475d;
      font-size: 12.5px;
      font-weight: 950;
      letter-spacing: .055em;
      line-height: 1;
    }

    .los-card-copy strong {
      display: block;
      overflow: hidden;
      color: #092a43;
      font-size: 19px;
      font-weight: 950;
      line-height: 1.08;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .82);
    }

    .los-card-copy small {
      display: block;
      margin-top: 6px;
      color: #2b4e64;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }

    .los-card-percent {
      position: relative;
      z-index: 2;
      justify-self: end;
      color: #fff;
      font-size: 29px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.06em;
      text-shadow: 0 2px 9px rgba(9, 32, 49, .42);
    }

    .los-card-percent b {
      position: relative;
      display: inline-grid;
      place-items: center;
      min-width: 2ch;
      height: 1em;
      overflow: hidden;
      vertical-align: -.04em;
      color: inherit;
      font: inherit;
      line-height: 1;
      letter-spacing: inherit;
    }

    .los-card-percent b.is-counting-up,
    .los-card-percent b.is-counting-down {
      color: transparent;
    }

    .los-card-percent b.is-counting-up::before,
    .los-card-percent b.is-counting-up::after,
    .los-card-percent b.is-counting-down::before,
    .los-card-percent b.is-counting-down::after {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #fff;
      font: inherit;
      line-height: 1;
      letter-spacing: inherit;
      text-shadow: 0 2px 9px rgba(9, 32, 49, .42);
      will-change: transform, opacity;
    }

    .los-card-percent b.is-counting-up::before,
    .los-card-percent b.is-counting-down::before { content: attr(data-previous-value); }

    .los-card-percent b.is-counting-up::after,
    .los-card-percent b.is-counting-down::after { content: attr(data-next-value); }

    .los-card-percent b.is-counting-up::before {
      animation: los-number-old-up .24s cubic-bezier(.22, .7, .22, 1) both;
    }

    .los-card-percent b.is-counting-up::after {
      animation: los-number-new-up .24s cubic-bezier(.18, .82, .22, 1) both;
    }

    .los-card-percent b.is-counting-down::before {
      animation: los-number-old-down .24s cubic-bezier(.22, .7, .22, 1) both;
    }

    .los-card-percent b.is-counting-down::after {
      animation: los-number-new-down .24s cubic-bezier(.18, .82, .22, 1) both;
    }

    .los-card-percent small {
      margin-left: 1px;
      font-size: 14px;
      letter-spacing: 0;
    }

    @keyframes los-number-old-up {
      0% { opacity: 1; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(-82%) scale(.86); }
    }

    @keyframes los-number-new-up {
      0% { opacity: 0; transform: translateY(86%) scale(.86); }
      58% { opacity: 1; transform: translateY(-10%) scale(1.08); }
      78% { transform: translateY(4%) scale(.98); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes los-number-old-down {
      0% { opacity: 1; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(82%) scale(.86); }
    }

    @keyframes los-number-new-down {
      0% { opacity: 0; transform: translateY(-86%) scale(.86); }
      58% { opacity: 1; transform: translateY(10%) scale(1.08); }
      78% { transform: translateY(-4%) scale(.98); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .los-card-back-icon {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255, 255, 255, .42);
      border-radius: 13px;
      color: #fff;
      background: rgba(255, 255, 255, .13);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
    }

    .los-card-back-icon svg {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-card-back-copy {
      position: relative;
      z-index: 2;
      min-width: 0;
      text-align: left;
    }

    .los-card-back-copy b {
      display: block;
      color: #f1fffb;
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
      text-shadow: 0 1px 3px rgba(7, 30, 42, .42);
    }

    .los-card-back-copy strong {
      display: block;
      margin-top: 5px;
      color: #fff;
      font-size: 15px;
      font-weight: 950;
      line-height: 1.25;
      text-shadow: 0 1px 3px rgba(7, 30, 42, .42);
    }

    .los-card-back-copy span {
      display: block;
      margin-top: 5px;
      color: #f5fffc;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.12;
      text-shadow: 0 1px 3px rgba(7, 30, 42, .38);
    }

    .los-mastery-note {
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 58px;
      margin-top: 14px;
      padding: 10px 13px;
      border: 1px dashed rgba(32, 132, 143, .28);
      border-radius: 14px;
      color: #3f637a;
      background: rgba(229, 246, 246, .62);
      font-size: 13px;
      font-weight: 780;
      line-height: 1.35;
    }

    .los-mastery-note svg {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      fill: none;
      stroke: #14818b;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-package-panel {
      padding: 21px;
      border: 1px solid rgba(185, 128, 41, .18);
      background:
        radial-gradient(circle at 84% 12%, rgba(245, 184, 78, .14), transparent 30%),
        linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(255, 249, 238, .94));
    }

    .los-package-panel .los-demo-badge {
      color: #a46718;
      border-color: rgba(201, 132, 33, .2);
      background: rgba(236, 163, 55, .09);
    }

    .los-package-stack {
      display: grid;
      gap: 11px;
      margin-top: 16px;
    }

    .los-package-item {
      position: relative;
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) 29px;
      align-items: center;
      gap: 13px;
      width: 100%;
      min-height: 100px;
      padding: 12px 13px;
      border: 1px solid rgba(var(--package-rgb), .2);
      border-radius: 17px;
      color: inherit;
      background: linear-gradient(135deg, rgba(var(--package-rgb), .085), rgba(255, 255, 255, .96) 64%);
      box-shadow: 0 8px 18px rgba(114, 78, 22, .05);
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      isolation: isolate;
      overflow: hidden;
      transition: transform .22s cubic-bezier(.2, .78, .2, 1), border-color .22s ease, background .22s ease, box-shadow .22s ease;
    }

    .los-package-item::before {
      content: "";
      position: absolute;
      inset: -55% 30% -55% -45%;
      z-index: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(var(--package-rgb), .2), transparent 66%);
      opacity: .54;
      transform: translateX(-18%);
      transition: opacity .24s ease, transform .38s cubic-bezier(.2, .76, .2, 1);
      pointer-events: none;
    }

    .los-package-item::after {
      content: "";
      position: absolute;
      top: 0;
      right: 18px;
      left: 18px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .96), transparent);
      opacity: .8;
      pointer-events: none;
    }

    .los-package-item:hover {
      border-color: rgba(var(--package-rgb), .44);
      background: linear-gradient(135deg, rgba(var(--package-rgb), .14), rgba(255, 255, 255, .98) 66%);
      box-shadow: 0 13px 26px rgba(var(--package-rgb), .13), inset 0 1px 0 rgba(255, 255, 255, .86);
      transform: translateY(-2px);
    }

    .los-package-item:hover::before { opacity: .84; transform: translateX(8%); }

    .los-package-item:active { transform: translateY(0) scale(.985); }

    .los-package-item:focus-visible {
      border-color: rgba(var(--package-rgb), .72);
      outline: 3px solid rgba(var(--package-rgb), .18);
      outline-offset: 3px;
      box-shadow: 0 13px 26px rgba(var(--package-rgb), .14);
    }

    .los-package-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border-radius: 16px;
      color: rgb(var(--package-rgb));
      background: #fff;
      box-shadow: 0 8px 17px rgba(var(--package-rgb), .14);
    }

    .los-package-icon svg {
      width: 29px;
      height: 29px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-package-copy {
      position: relative;
      z-index: 1;
      display: block;
      min-width: 0;
    }

    .los-package-copy-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 5px;
    }

    .los-package-title {
      display: block;
      color: #273b56;
      font-size: 19px;
      font-weight: 950;
      line-height: 1.1;
    }

    .los-package-tag {
      flex: 0 0 auto;
      display: block;
      padding: 4px 7px;
      border-radius: 99px;
      color: rgb(var(--package-rgb));
      background: rgba(var(--package-rgb), .09);
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
      line-height: 1;
    }

    .los-package-description {
      display: block;
      color: #657282;
      font-size: 14px;
      font-weight: 730;
      line-height: 1.34;
    }

    .los-package-open-mark {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 29px;
      height: 29px;
      border: 1px solid rgba(var(--package-rgb), .18);
      border-radius: 10px;
      color: rgb(var(--package-rgb));
      background: rgba(255, 255, 255, .72);
      box-shadow: 0 5px 12px rgba(var(--package-rgb), .08);
      transition: color .2s ease, background .2s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
    }

    .los-package-open-mark svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-package-item:hover .los-package-open-mark {
      color: #fff;
      background: rgb(var(--package-rgb));
      transform: translate(2px, -2px);
    }

    .los-package-refresh {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 51px;
      margin-top: 12px;
      border: 1px dashed rgba(198, 128, 27, .3);
      border-radius: 14px;
      color: #85591e;
      background: rgba(255, 244, 221, .68);
      font-size: 14px;
      font-weight: 900;
      line-height: 1.25;
      text-align: center;
    }

    .los-package-refresh svg {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-package-modal {
      --modal-rgb: 31, 126, 166;
      position: fixed;
      inset: 0;
      z-index: 3520;
      display: grid;
      place-items: center;
      padding: 16px;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      isolation: isolate;
      transition: opacity .28s ease, visibility 0s linear .28s;
    }

    .los-package-modal[data-mode="practice"] { --modal-rgb: 34, 157, 139; }
    .los-package-modal[data-mode="courseware"] { --modal-rgb: 218, 148, 43; }

    .los-package-modal::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 72% 24%, rgba(var(--modal-rgb), .2), transparent 28%),
        radial-gradient(circle at 20% 80%, rgba(88, 112, 214, .14), transparent 34%),
        rgba(19, 33, 52, .28);
      -webkit-backdrop-filter: blur(26px) saturate(.92) brightness(.94);
      backdrop-filter: blur(26px) saturate(.92) brightness(.94);
      opacity: 0;
      transition: opacity .3s ease;
    }

    .los-package-modal.is-open {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .los-package-modal.is-open::before { opacity: 1; }
    .los-package-modal.is-preparing { opacity: 0; pointer-events: none; }
    .los-package-modal.is-preparing::before,
    .los-package-modal.is-closing::before { opacity: 0; }
    .los-package-modal.is-closing { pointer-events: none; }
    .los-package-modal.is-closed {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: none;
    }
    .los-package-modal.is-closed::before { opacity: 0; transition: none; }

    .los-package-window {
      position: relative;
      width: min(2200px, calc(100vw - 32px));
      height: min(1160px, calc(100vh - 32px));
      min-height: min(660px, calc(100vh - 24px));
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 38px;
      color: #18334f;
      background:
        radial-gradient(circle at 86% 8%, rgba(var(--modal-rgb), .13), transparent 31%),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(239, 247, 251, .96));
      box-shadow:
        0 50px 126px rgba(20, 40, 66, .34),
        0 16px 44px rgba(var(--modal-rgb), .16),
        inset 0 1px 0 rgba(255, 255, 255, .96),
        inset 0 0 0 1px rgba(255, 255, 255, .28);
      transform-origin: 50% 50%;
      will-change: transform, opacity;
      contain: layout paint;
      backface-visibility: hidden;
      isolation: isolate;
    }

    .los-package-window::before {
      content: "";
      position: absolute;
      inset: 1px;
      z-index: 7;
      border: 1px solid rgba(255, 255, 255, .54);
      border-radius: 36px;
      box-shadow: inset 0 0 32px rgba(255, 255, 255, .28);
      pointer-events: none;
    }

    .los-package-window::after {
      content: "";
      position: absolute;
      top: -42%;
      left: -18%;
      z-index: 6;
      width: 58%;
      height: 92%;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(255, 255, 255, .36), transparent 68%);
      filter: blur(14px);
      transform: rotate(-16deg);
      pointer-events: none;
    }

    .los-package-titlebar {
      position: relative;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 96px;
      padding: 0 104px;
      overflow: hidden;
      border-bottom: 1px solid rgba(64, 108, 145, .2);
      background:
        radial-gradient(ellipse at 24% -55%, rgba(255, 255, 255, .92), transparent 46%),
        radial-gradient(ellipse at 76% 135%, rgba(var(--modal-rgb), .22), transparent 52%),
        linear-gradient(112deg, rgba(255, 255, 255, .56), rgba(225, 244, 251, .27) 48%, rgba(255, 255, 255, .46));
      -webkit-backdrop-filter: blur(32px) saturate(1.72) contrast(1.04);
      backdrop-filter: blur(32px) saturate(1.72) contrast(1.04);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 0 -1px 0 rgba(36, 94, 132, .1),
        0 12px 34px rgba(47, 91, 119, .1);
      isolation: isolate;
    }

    .los-package-titlebar::before {
      content: "";
      position: absolute;
      top: -72px;
      left: -24%;
      z-index: 0;
      width: 52%;
      height: 220px;
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, .84) 0 16%, rgba(155, 226, 255, .32) 36%, rgba(221, 174, 255, .18) 54%, rgba(255, 213, 158, .16) 64%, transparent 73%);
      filter: blur(4px);
      mix-blend-mode: screen;
      opacity: .78;
      transform: skewX(-18deg);
      pointer-events: none;
    }

    .los-package-titlebar::after {
      content: "";
      position: absolute;
      right: 22px;
      bottom: 8px;
      left: 22px;
      z-index: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent 2%, rgba(105, 208, 255, .42) 22%, rgba(202, 156, 255, .3) 48%, rgba(255, 199, 118, .34) 73%, transparent 98%);
      box-shadow: 0 -12px 38px rgba(255, 255, 255, .38);
      opacity: .72;
      pointer-events: none;
    }

    .los-package-modal.is-open .los-package-titlebar::before {
      animation: los-package-liquid-glide 5.6s ease-in-out infinite alternate;
    }

    .los-package-window-close {
      position: absolute;
      top: 50%;
      right: 28px;
      z-index: 4;
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      margin: 0;
      padding: 0;
      border: 1px solid rgba(61, 88, 115, .16);
      border-radius: 18px;
      color: #38536d;
      background: linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(228, 244, 251, .3));
      -webkit-backdrop-filter: blur(18px) saturate(1.5);
      backdrop-filter: blur(18px) saturate(1.5);
      box-shadow: 0 9px 22px rgba(43, 67, 91, .1), inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(60, 104, 132, .08);
      transform: translateY(-50%);
      transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
      cursor: pointer;
    }

    .los-package-window-close svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
    .los-package-window-close:hover { color: #c14455; border-color: rgba(193, 68, 85, .25); background: rgba(255, 246, 247, .94); transform: translateY(-50%) scale(1.04); }
    .los-package-window-close:focus-visible { outline: 3px solid rgba(58, 112, 190, .22); outline-offset: 2px; }

    .los-package-window-title {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      min-width: 0;
      text-align: left;
    }

    .los-package-window-symbol {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(var(--modal-rgb), .22);
      border-radius: 17px;
      color: rgb(var(--modal-rgb));
      background: linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(var(--modal-rgb), .12));
      -webkit-backdrop-filter: blur(16px) saturate(1.4);
      backdrop-filter: blur(16px) saturate(1.4);
      box-shadow: 0 9px 20px rgba(var(--modal-rgb), .14), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

    .los-package-window-symbol svg {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-package-window-title > span:last-child { min-width: 0; }
    .los-package-window-title strong {
      display: block;
      color: #17324e;
      font-size: 30px;
      font-weight: 950;
      line-height: 1.05;
      letter-spacing: -.02em;
    }

    .los-package-window-title small {
      display: block;
      margin-top: 7px;
      overflow: hidden;
      color: #62758b;
      font-size: 17px;
      font-weight: 760;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .los-package-modal-body {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-rows: 112px minmax(0, 1fr);
      gap: 20px;
      height: calc(100% - 96px);
      padding: 24px 30px 30px;
      overflow: hidden;
      background:
        linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)),
        repeating-linear-gradient(90deg, transparent 0 34px, rgba(59, 91, 125, .025) 34px 35px);
    }

    .los-package-modal-summary {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) auto;
      align-items: center;
      gap: 17px;
      min-width: 0;
      padding: 15px 20px;
      border: 1px solid rgba(var(--modal-rgb), .17);
      border-radius: 22px;
      background: linear-gradient(120deg, rgba(255, 255, 255, .78), rgba(var(--modal-rgb), .08));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 8px 22px rgba(36, 63, 88, .06);
    }

    .los-package-summary-icon {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border-radius: 19px;
      color: #fff;
      background: linear-gradient(145deg, rgb(var(--modal-rgb)), rgba(var(--modal-rgb), .72));
      box-shadow: 0 9px 20px rgba(var(--modal-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .36);
    }

    .los-package-summary-icon svg {
      width: 32px;
      height: 32px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-package-modal-summary > div { min-width: 0; }
    .los-package-modal-summary small {
      display: block;
      color: rgba(var(--modal-rgb), .8);
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .12em;
      line-height: 1;
    }

    .los-package-modal-summary strong {
      display: block;
      margin-top: 6px;
      color: #173550;
      font-size: 27px;
      font-weight: 950;
      line-height: 1.1;
    }

    .los-package-modal-summary p {
      margin: 6px 0 0;
      color: #5e7185;
      font-size: 18px;
      font-weight: 760;
      line-height: 1.2;
    }

    .los-package-modal-summary p b { color: rgb(var(--modal-rgb)); font-weight: 950; }

    .los-package-live-state {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 14px;
      border: 1px solid rgba(var(--modal-rgb), .14);
      border-radius: 99px;
      color: #49667a;
      background: rgba(255, 255, 255, .62);
      font-size: 16px;
      font-weight: 850;
      white-space: nowrap;
    }

    .los-package-live-state i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgb(var(--modal-rgb));
      box-shadow: 0 0 0 4px rgba(var(--modal-rgb), .12);
    }

    .los-package-content {
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .los-package-content[hidden] { display: none; }
    .los-package-modal.is-entering .los-package-content.is-active { animation: los-package-content-in .48s .24s cubic-bezier(.18, .78, .2, 1) both; }

    .los-assignment-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.52fr) minmax(300px, .68fr);
      gap: 22px;
      height: 100%;
    }

    .los-modal-glass-section {
      min-width: 0;
      min-height: 0;
      padding: 22px;
      border: 1px solid rgba(80, 111, 140, .15);
      border-radius: 24px;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 12px 28px rgba(35, 59, 86, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .los-modal-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(69, 96, 124, .11);
    }

    .los-modal-section-head span small {
      display: block;
      color: rgba(var(--modal-rgb), .72);
      font-size: 13px;
      font-weight: 950;
      letter-spacing: .13em;
      line-height: 1;
    }

    .los-modal-section-head span strong {
      display: block;
      margin-top: 7px;
      color: #1a3651;
      font-size: 26px;
      font-weight: 950;
      line-height: 1;
    }

    .los-modal-section-head > b {
      flex: 0 0 auto;
      padding: 8px 12px;
      border-radius: 99px;
      color: rgb(var(--modal-rgb));
      background: rgba(var(--modal-rgb), .09);
      font-size: 14px;
      font-weight: 900;
    }

    .los-assignment-list,
    .los-history-list { display: grid; gap: 13px; margin-top: 17px; }

    .los-assignment-list {
      align-content: start;
      max-height: calc(100% - 78px);
      padding-right: 5px;
      overflow: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(48, 104, 141, .26) transparent;
    }

    .los-assignment-item { min-width: 0; }

    .los-assignment-row {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto 32px;
      align-items: center;
      gap: 15px;
      min-height: 104px;
      width: 100%;
      padding: 15px 17px;
      border: 1px solid rgba(var(--item-rgb), .15);
      border-radius: 18px;
      color: inherit;
      background: linear-gradient(110deg, rgba(var(--item-rgb), .08), rgba(255, 255, 255, .72));
      box-shadow: 0 8px 18px rgba(40, 66, 89, .05), inset 0 1px 0 rgba(255, 255, 255, .84);
      text-align: left;
      cursor: pointer;
      transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
    }

    .los-assignment-row:hover,
    .los-assignment-row[aria-expanded="true"] {
      border-color: rgba(var(--item-rgb), .34);
      background: linear-gradient(110deg, rgba(var(--item-rgb), .14), rgba(255, 255, 255, .88));
      box-shadow: 0 12px 24px rgba(var(--item-rgb), .1), inset 0 1px 0 rgba(255, 255, 255, .94);
    }

    .los-assignment-row:focus-visible { outline: 3px solid rgba(var(--item-rgb), .22); outline-offset: 2px; }

    .los-assignment-index {
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      border-radius: 15px;
      color: #fff;
      background: rgb(var(--item-rgb));
      box-shadow: 0 7px 14px rgba(var(--item-rgb), .2);
      font-size: 15px;
      font-weight: 950;
    }

    .los-assignment-main { min-width: 0; }
    .los-assignment-main strong { display: block; color: #203b55; font-size: 23px; font-weight: 950; line-height: 1.1; }
    .los-assignment-main > small { display: block; margin-top: 7px; color: #5d7185; font-size: 17px; font-weight: 760; line-height: 1.25; }
    .los-assignment-meta { text-align: right; }
    .los-assignment-meta b { display: block; color: rgb(var(--item-rgb)); font-size: 21px; font-weight: 950; line-height: 1; }
    .los-assignment-meta small { display: block; margin-top: 7px; color: #687a8d; font-size: 14px; font-weight: 800; white-space: nowrap; }

    .los-assignment-chevron {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 11px;
      color: rgb(var(--item-rgb));
      background: rgba(var(--item-rgb), .09);
      transition: transform .26s cubic-bezier(.2, .8, .2, 1), background .2s ease;
    }

    .los-assignment-chevron svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .los-assignment-row[aria-expanded="true"] .los-assignment-chevron { transform: rotate(180deg); background: rgba(var(--item-rgb), .15); }

    .los-assignment-details {
      display: grid;
      grid-template-rows: 0fr;
      margin: -1px 6px 0;
      overflow: hidden;
      opacity: 0;
      transition: grid-template-rows .3s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, margin .3s ease;
    }

    .los-assignment-item.is-expanded .los-assignment-details { grid-template-rows: 1fr; margin: 7px 6px 2px; opacity: 1; }
    .los-assignment-details > div { min-height: 0; overflow: hidden; }
    .los-assignment-details ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; margin: 0; padding: 15px 14px 3px; border-top: 1px solid rgba(var(--item-rgb), .15); list-style: none; counter-reset: los-question; }
    .los-assignment-details li { position: relative; min-height: 50px; padding: 10px 12px 10px 41px; border: 1px solid rgba(var(--item-rgb), .11); border-radius: 13px; color: #425a6e; background: rgba(255, 255, 255, .72); font-size: 16px; font-weight: 780; line-height: 1.4; counter-increment: los-question; }
    .los-assignment-details li::before { content: counter(los-question); position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: rgb(var(--item-rgb)); background: rgba(var(--item-rgb), .11); font-size: 12px; font-weight: 950; }

    .los-history-row {
      display: grid;
      gap: 12px;
      min-height: 101px;
      padding: 14px 15px;
      border: 1px solid rgba(68, 95, 121, .12);
      border-radius: 18px;
      background: linear-gradient(120deg, rgba(255, 255, 255, .74), rgba(232, 241, 248, .58));
    }

    .los-history-date { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
    .los-history-date b { color: #2e526e; font-size: 18px; font-weight: 950; }
    .los-history-date small { color: #536b80; font-size: 15px; font-weight: 800; }
    .los-history-deltas { display: flex; flex-wrap: wrap; gap: 6px; }
    .los-history-deltas i { padding: 8px 10px; border-radius: 10px; font-size: 14px; font-style: normal; font-weight: 900; line-height: 1; }
    .los-history-deltas i.is-up { color: #148466; background: rgba(31, 157, 112, .1); }
    .los-history-deltas i.is-down { color: #c1485d; background: rgba(211, 83, 104, .1); }

    .los-practice-source {
      display: grid;
      grid-template-columns: 60px minmax(0, 1fr) auto;
      align-items: center;
      gap: 17px;
      min-height: 104px;
      padding: 15px 19px;
      border: 1px solid rgba(var(--modal-rgb), .17);
      border-radius: 22px;
      background: linear-gradient(120deg, rgba(var(--modal-rgb), .1), rgba(255, 255, 255, .74));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
    }

    .los-practice-source-icon {
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border-radius: 18px;
      color: #fff;
      background: linear-gradient(145deg, #dc5b70, #be3f58);
      box-shadow: 0 9px 18px rgba(190, 63, 88, .2);
    }

    .los-practice-source-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .los-practice-source > div small { display: block; color: #bf4058; font-size: 14px; font-weight: 950; letter-spacing: .06em; }
    .los-practice-source > div strong { display: block; margin-top: 5px; color: #203b54; font-size: 24px; font-weight: 950; }
    .los-practice-source > div strong em { color: #c4475d; font-style: normal; }
    .los-practice-source > div p { margin: 6px 0 0; color: #5d7286; font-size: 17px; font-weight: 760; }
    .los-practice-source > b { padding: 10px 14px; border-radius: 99px; color: rgb(var(--modal-rgb)); background: rgba(var(--modal-rgb), .1); font-size: 15px; font-weight: 950; }

    .los-variant-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      height: calc(100% - 122px);
      margin-top: 18px;
    }

    .los-variant-card {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      min-width: 0;
      padding: 21px;
      border: 1px solid rgba(var(--variant-rgb), .18);
      border-radius: 24px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(var(--variant-rgb), .08));
      box-shadow: 0 13px 28px rgba(39, 67, 89, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
    }

    .los-variant-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .los-variant-card header span { color: rgb(var(--variant-rgb)); font-size: 15px; font-weight: 950; letter-spacing: .08em; }
    .los-variant-card header b { padding: 8px 10px; border-radius: 10px; color: rgb(var(--variant-rgb)); background: rgba(var(--variant-rgb), .1); font-size: 14px; font-weight: 900; }
    .los-variant-card > strong { display: block; margin-top: 18px; color: #1f3a53; font-size: 24px; font-weight: 950; line-height: 1.42; }

    .los-variant-options { display: grid; align-content: center; gap: 11px; margin-top: 15px; }
    .los-variant-options i { padding: 13px 15px; border: 1px solid rgba(var(--variant-rgb), .13); border-radius: 13px; color: #3e586f; background: rgba(255, 255, 255, .66); font-size: 17px; font-style: normal; font-weight: 850; }
    .los-variant-formula { align-self: center; justify-self: center; padding: 21px 28px; border: 1px solid rgba(var(--variant-rgb), .2); border-radius: 19px; color: rgb(var(--variant-rgb)); background: rgba(255, 255, 255, .68); box-shadow: 0 12px 26px rgba(var(--variant-rgb), .1); font: 950 34px/1.1 "Times New Roman", serif; }
    .los-variant-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 15px; border-top: 1px solid rgba(74, 99, 124, .11); color: #5d7286; font-size: 15px; font-weight: 800; }
    .los-variant-card footer b { color: rgb(var(--variant-rgb)); font-weight: 950; }

    .los-courseware-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 70px;
      padding: 0 4px 16px;
    }

    .los-courseware-heading small { display: block; color: rgb(var(--modal-rgb)); font-size: 13px; font-weight: 950; letter-spacing: .13em; }
    .los-courseware-heading strong { display: block; margin-top: 7px; color: #1d3953; font-size: 28px; font-weight: 950; line-height: 1; }
    .los-courseware-heading > span { padding: 10px 14px; border-radius: 99px; color: #8d641d; background: rgba(var(--modal-rgb), .1); font-size: 15px; font-weight: 900; }

    .los-courseware-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      height: calc(100% - 70px);
    }

    .los-courseware-card {
      display: grid;
      grid-template-columns: minmax(220px, 28%) minmax(0, 1fr);
      align-items: center;
      gap: 20px;
      min-width: 0;
      padding: 17px;
      border: 1px solid rgba(var(--course-rgb), .17);
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(var(--course-rgb), .08), rgba(255, 255, 255, .76));
      box-shadow: 0 12px 26px rgba(42, 66, 87, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .los-courseware-card[data-los-slope-open] {
      position: relative;
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .los-courseware-card[data-los-slope-open]::after {
      content: "打开";
      position: absolute;
      right: 18px;
      bottom: 15px;
      padding: 7px 12px;
      border-radius: 10px;
      color: #fff;
      background: rgb(var(--course-rgb));
      box-shadow: 0 6px 14px rgba(var(--course-rgb), .2);
      font-size: 14px;
      font-weight: 900;
      pointer-events: none;
    }

    .los-courseware-card[data-los-slope-open]:hover { transform: translateY(-2px); border-color: rgba(var(--course-rgb), .4); box-shadow: 0 15px 30px rgba(var(--course-rgb), .13), inset 0 1px 0 rgba(255, 255, 255, .96); }
    .los-courseware-card[data-los-slope-open]:focus-visible { outline: 3px solid rgba(var(--course-rgb), .24); outline-offset: 3px; }

    .los-courseware-art {
      display: grid;
      place-items: center;
      height: 138px;
      overflow: hidden;
      border: 1px solid rgba(var(--course-rgb), .16);
      border-radius: 18px;
      color: rgb(var(--course-rgb));
      background:
        radial-gradient(circle at 72% 18%, rgba(var(--course-rgb), .2), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(var(--course-rgb), .09));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94);
    }

    .los-courseware-art svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .los-courseware-art svg .grid { stroke-width: .7; opacity: .28; }
    .los-courseware-art svg .axis { stroke-width: 1.2; opacity: .66; }
    .los-courseware-art svg .line { stroke-width: 3; }
    .los-courseware-art svg circle { fill: #fff; stroke-width: 2; }
    .los-courseware-art.is-equation svg text { fill: currentColor; stroke: none; font: 850 13px/1 var(--font); }

    .los-courseware-copy { min-width: 0; }
    .los-courseware-copy header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .los-courseware-copy header strong { color: #203b54; font-size: 26px; font-weight: 950; line-height: 1.18; }
    .los-courseware-copy header b { flex: 0 0 auto; padding: 8px 10px; border-radius: 10px; color: rgb(var(--course-rgb)); background: rgba(var(--course-rgb), .1); font-size: 16px; font-weight: 900; }
    .los-courseware-copy p { margin: 12px 0 0; color: #566e82; font-size: 20px; font-weight: 760; line-height: 1.42; }
    .los-courseware-copy footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(67, 94, 119, .1); color: rgb(var(--course-rgb)); font-size: 17px; font-weight: 900; }
    .los-courseware-copy footer i { color: #718193; font-style: normal; }

    .los-slope-modal {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: grid;
      grid-template-rows: 94px minmax(0, 1fr);
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 78% 12%, rgba(38, 150, 190, .16), transparent 28%),
        radial-gradient(circle at 16% 84%, rgba(220, 157, 55, .12), transparent 34%),
        linear-gradient(145deg, #f9fcfd, #edf7f7 58%, #fffaf0);
      transform: translate3d(0, 16px, 0) scale(.985);
      transform-origin: 50% 62%;
      transition: opacity .24s ease, transform .34s cubic-bezier(.2, .82, .2, 1), visibility 0s linear .34s;
    }

    .los-slope-modal.is-open {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transform: translate3d(0, 0, 0) scale(1);
      transition-delay: 0s;
    }

    .los-slope-titlebar {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 0 30px 0 34px;
      overflow: hidden;
      border-bottom: 1px solid rgba(45, 102, 131, .18);
      background:
        radial-gradient(ellipse at 22% -70%, rgba(255, 255, 255, .94), transparent 48%),
        radial-gradient(ellipse at 78% 140%, rgba(42, 168, 173, .2), transparent 52%),
        linear-gradient(112deg, rgba(255, 255, 255, .54), rgba(222, 247, 247, .24) 50%, rgba(255, 255, 255, .44));
      -webkit-backdrop-filter: blur(30px) saturate(1.72) contrast(1.04);
      backdrop-filter: blur(30px) saturate(1.72) contrast(1.04);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(42, 111, 133, .08), 0 12px 30px rgba(35, 93, 112, .08);
      isolation: isolate;
    }

    .los-slope-titlebar::before {
      content: "";
      position: absolute;
      top: -84px;
      left: -18%;
      z-index: 0;
      width: 48%;
      height: 240px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(255, 255, 255, .82) 0 17%, rgba(137, 225, 255, .28) 38%, rgba(196, 164, 255, .16) 56%, rgba(255, 207, 138, .14) 66%, transparent 74%);
      filter: blur(4px);
      mix-blend-mode: screen;
      opacity: .74;
      transform: skewX(-16deg);
      pointer-events: none;
    }

    .los-slope-titlebar::after {
      content: "";
      position: absolute;
      right: 26px;
      bottom: 8px;
      left: 26px;
      z-index: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(97, 211, 255, .38), rgba(184, 153, 255, .28), rgba(255, 191, 113, .3), transparent);
      opacity: .68;
      pointer-events: none;
    }

    .los-slope-modal.is-open .los-slope-titlebar::before { animation: los-package-liquid-glide 6.4s ease-in-out infinite alternate; }

    .los-slope-title { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; min-width: 0; }
    .los-slope-title > i { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 18px; color: #fff; background: linear-gradient(145deg, rgba(22, 124, 165, .92), rgba(34, 161, 143, .88)); box-shadow: 0 10px 24px rgba(25, 132, 151, .22), inset 0 1px 0 rgba(255, 255, 255, .48); }
    .los-slope-title > i svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .los-slope-title strong { display: block; color: #183a53; font-size: 29px; font-weight: 950; line-height: 1; }
    .los-slope-title small { display: block; margin-top: 8px; color: #546d7f; font-size: 16px; font-weight: 780; line-height: 1; }

    .los-slope-close {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      padding: 0;
      border: 1px solid rgba(58, 86, 111, .15);
      border-radius: 17px;
      color: #3c566d;
      background: linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(224, 245, 247, .32));
      -webkit-backdrop-filter: blur(16px) saturate(1.45);
      backdrop-filter: blur(16px) saturate(1.45);
      box-shadow: 0 8px 20px rgba(39, 68, 92, .1), inset 0 1px 0 rgba(255, 255, 255, .95);
      cursor: pointer;
      transition: color .18s ease, border-color .18s ease, transform .18s ease;
    }

    .los-slope-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
    .los-slope-close:hover { color: #c14455; border-color: rgba(193, 68, 85, .24); transform: scale(1.04); }
    .los-slope-close:focus-visible { outline: 3px solid rgba(30, 130, 159, .22); outline-offset: 2px; }

    .los-slope-body {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(560px, .9fr);
      gap: 24px;
      min-height: 0;
      padding: 26px 30px 30px;
    }

    .los-slope-stage,
    .los-slope-console {
      min-width: 0;
      min-height: 0;
      border: 1px solid rgba(43, 101, 128, .15);
      border-radius: 28px;
      background: rgba(255, 255, 255, .8);
      box-shadow: 0 18px 38px rgba(37, 74, 97, .1), inset 0 1px 0 rgba(255, 255, 255, .98);
    }

    .los-slope-stage { position: relative; display: grid; place-items: center; overflow: hidden; padding: 22px; }
    .los-slope-stage::before { display: none; }
    .los-slope-stage svg { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 480px; overflow: visible; }
    .los-slope-axis { stroke: rgba(31, 68, 95, .68); stroke-width: 2.4; }
    .los-slope-tick { stroke: rgba(38, 76, 104, .24); stroke-width: 1.25; }
    .los-slope-axis-number { fill: #5b7487; font-size: 14px; font-weight: 850; text-anchor: middle; }
    .los-slope-axis-number.is-y { text-anchor: end; dominant-baseline: middle; }
    .los-slope-axis-label { fill: #3f5d72; font-size: 18px; font-weight: 950; }
    .los-slope-line-halo { stroke: rgba(28, 151, 160, .18); stroke-width: 15; stroke-linecap: round; }
    .los-slope-line { stroke: url(#losSlopeGradient); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 4px 8px rgba(25, 134, 156, .2)); }
    .los-slope-point { fill: #fff; stroke: #1385a3; stroke-width: 4; filter: drop-shadow(0 4px 6px rgba(24, 130, 155, .2)); }
    .los-slope-equation-badge { position: absolute; top: 34px; left: 36px; z-index: 2; display: flex; align-items: baseline; gap: 11px; padding: 14px 18px; border: 1px solid rgba(26, 129, 155, .17); border-radius: 17px; color: #1d5069; background: rgba(255, 255, 255, .92); box-shadow: 0 12px 26px rgba(34, 91, 119, .1); }
    .los-slope-equation-badge small { color: #60798b; font-size: 14px; font-weight: 850; }
    .los-slope-equation-badge strong { font: 950 30px/1.1 "Times New Roman", serif; }

    .los-slope-console { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 14px; padding: 24px; overflow: auto; }
    .los-slope-console-head,
    .los-slope-actions,
    .los-slope-insights { grid-column: 1 / -1; }
    .los-slope-console-head small { display: block; color: #17849c; font-size: 13px; font-weight: 950; letter-spacing: .12em; }
    .los-slope-console-head strong { display: block; margin-top: 8px; color: #1d3e55; font-size: 27px; font-weight: 950; line-height: 1.15; }
    .los-slope-control { padding: 17px 18px; border: 1px solid rgba(43, 101, 128, .13); border-radius: 19px; background: linear-gradient(135deg, rgba(239, 249, 250, .9), rgba(255, 255, 255, .9)); }
    .los-slope-control header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
    .los-slope-control header span { color: #344f63; font-size: 17px; font-weight: 900; }
    .los-slope-control header b { color: #14859e; font-size: 25px; font-weight: 950; }
    .los-slope-control input[type="range"] { width: 100%; accent-color: #1c91a3; cursor: pointer; }
    .los-slope-control footer { display: flex; justify-content: space-between; margin-top: 10px; color: #657b8c; font-size: 13px; font-weight: 800; }

    .los-slope-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .los-slope-action { min-height: 54px; padding: 0 17px; border: 1px solid rgba(27, 129, 153, .17); border-radius: 17px; color: #1a7289; background: rgba(255, 255, 255, .86); font-size: 17px; font-weight: 900; cursor: pointer; transition: transform .18s ease, background .18s ease; }
    .los-slope-action.is-primary { color: #fff; background: linear-gradient(135deg, #1684a3, #22a28e); box-shadow: 0 9px 19px rgba(25, 137, 151, .18); }
    .los-slope-action:hover { transform: translateY(-1px); }
    .los-slope-action:focus-visible { outline: 3px solid rgba(30, 130, 159, .22); outline-offset: 2px; }

    .los-slope-insights { display: grid; gap: 10px; }
    .los-slope-insight:nth-child(1) { --insight-rgb: 28, 132, 184; --insight-ink: #075f87; }
    .los-slope-insight:nth-child(2) { --insight-rgb: 116, 88, 191; --insight-ink: #563a9d; }
    .los-slope-insight:nth-child(3) { --insight-rgb: 218, 139, 43; --insight-ink: #9a5a0c; }
    .los-slope-insight {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      min-height: 114px;
      padding: 14px 18px;
      border: 2px solid rgba(var(--insight-rgb), .3);
      border-radius: 24px;
      color: #243e53;
      background:
        radial-gradient(circle at 90% 15%, rgba(var(--insight-rgb), .2), transparent 42%),
        linear-gradient(135deg, rgba(var(--insight-rgb), .16), rgba(255, 255, 255, .98) 72%);
      box-shadow: 0 13px 28px rgba(var(--insight-rgb), .18), inset 7px 0 0 rgba(var(--insight-rgb), .82), inset 0 1px 0 rgba(255, 255, 255, .98);
      font-size: 36px;
      font-weight: 900;
      line-height: 1.16;
    }
    .los-slope-insight i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, rgba(var(--insight-rgb), 1), rgba(var(--insight-rgb), .72)); box-shadow: 0 10px 22px rgba(var(--insight-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .34); font-size: 24px; font-style: normal; font-weight: 950; }
    .los-slope-insight span { min-width: 0; }
    .los-slope-insight b { display: block; margin-bottom: 3px; color: var(--insight-ink); font-size: 38px; font-weight: 950; }

    @media (max-height: 760px) {
      .los-package-modal { padding: 12px; }
      .los-package-window { height: calc(100vh - 24px); min-height: min(600px, calc(100vh - 20px)); }
      .los-package-titlebar { height: 84px; }
      .los-package-modal-body { height: calc(100% - 84px); grid-template-rows: 96px minmax(0, 1fr); gap: 14px; padding: 16px 22px 20px; }
      .los-slope-modal { grid-template-rows: 82px minmax(0, 1fr); }
      .los-slope-body { padding: 18px 22px 22px; }
      .los-slope-stage svg { min-height: 360px; }
    }

    @keyframes los-package-liquid-glide {
      from { transform: translateX(-18%) skewX(-18deg); opacity: .42; }
      to { transform: translateX(290%) skewX(-18deg); opacity: .78; }
    }

    @keyframes los-package-content-in {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .los-loop-band {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 336px;
      align-items: center;
      gap: 24px;
      padding: 14px 18px 14px 22px;
      border: 1px solid rgba(28, 103, 151, .18);
      background: linear-gradient(100deg, rgba(244, 250, 252, .98), rgba(233, 247, 246, .97) 58%, rgba(255, 247, 229, .96));
    }

    .los-loop-steps {
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .los-loop-step {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      text-align: center;
    }

    .los-loop-step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 20px;
      right: -10px;
      width: 20px;
      height: 2px;
      background: linear-gradient(90deg, #38a5ab, #e2a33e);
    }

    .los-loop-step i {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      margin: 0 auto 6px;
      border-radius: 50%;
      color: #fff;
      background: linear-gradient(145deg, #1e7999, #2aa99f);
      box-shadow: 0 7px 15px rgba(29, 131, 143, .18);
      font-size: 14px;
      font-style: normal;
      font-weight: 950;
    }

    .los-loop-step:nth-child(4) i,
    .los-loop-step:nth-child(5) i { background: linear-gradient(145deg, #d5942e, #e8b14a); }

    .los-loop-step strong {
      display: block;
      color: #304b64;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.1;
      white-space: nowrap;
    }

    .los-personalized-outcome {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
      height: 76px;
      padding: 10px 16px;
      border-radius: 18px;
      color: #fff;
      background: linear-gradient(135deg, #106a89, #188c83 56%, #d4912e 140%);
      box-shadow: 0 12px 24px rgba(23, 111, 123, .18);
    }

    .los-personalized-outcome svg {
      flex: 0 0 auto;
      width: 43px;
      height: 43px;
      fill: none;
      stroke: #fff;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .los-personalized-outcome span {
      display: block;
      color: rgba(231, 255, 251, .78);
      font-size: 13px;
      font-weight: 850;
      line-height: 1.1;
    }

    .los-personalized-outcome strong {
      display: block;
      margin-top: 5px;
      color: #fff;
      font-size: 25px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .slide.active .los-main-links path { animation: los-link-flow 4.6s linear infinite; }
    .slide.active .los-mastery-card { animation: los-card-arrive .68s cubic-bezier(.16, .85, .2, 1) backwards; animation-delay: var(--los-delay, .1s); }
    .slide.active .los-package-item { animation: los-package-in .58s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--los-delay, .12s); }
    .slide:not(.active) .los-main-links path,
    .slide:not(.active) .los-mastery-card,
    .slide:not(.active) .los-package-item { animation-play-state: paused !important; }

    @keyframes los-link-flow { to { stroke-dashoffset: -64; } }
    @keyframes los-card-arrive { from { opacity: 0; transform: translateY(13px) rotateX(-7deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } }
    @keyframes los-package-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }

    @media (prefers-reduced-motion: reduce) {
      .los-main-links path,
      .los-phone-shell,
      .los-phone-result-view,
      .los-result-score-ring,
      .los-phone-submit::before,
      .los-submit-spinner,
      .los-evidence-energy *,
      .los-card-celebration i,
      .los-card-percent b::before,
      .los-card-percent b::after,
      .los-mastery-card.is-receiving .los-card-rotor,
      .los-mastery-card,
      .los-package-item,
      .los-package-window,
      .los-package-titlebar::before,
      .los-slope-titlebar::before,
      .los-package-content { animation: none !important; }
      .los-package-modal,
      .los-package-modal::before,
      .los-slope-modal,
      .los-slope-action,
      .los-slope-close,
      .los-package-item,
      .los-package-item::before,
      .los-package-open-mark { transition: none !important; }
    }

    /* 封面星空只在封面可见时运行，避免隐藏页继续占用合成线程。 */
    .slide:not(.active) .cover-particles::before,
    .slide:not(.active) .cover-particles::after,
    .slide:not(.active) .cover-particle,
    .slide:not(.active) .cover-orbit,
    .slide:not(.active) .cover-meteor {
      animation-play-state: paused !important;
    }

    .slide-inner {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 54px 80px 64px;
      overflow: hidden;
      z-index: 1;
      transform: scale(var(--content-scale));
      transform-origin: center center;
    }

    .slide-head {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 26px;
      align-items: start;
      min-height: 124px;
      padding-bottom: 20px;
      border-bottom: 2px solid rgba(28, 83, 180, .18);
    }

    .chapter-tag {
      display: grid;
      place-items: center;
      width: 92px;
      height: 58px;
      color: white;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      clip-path: polygon(0 0, 100% 0, 83% 100%, 0 100%);
      font: 800 27px/1 var(--font);
      letter-spacing: .03em;
      box-shadow: 0 10px 24px rgba(43, 83, 209, .2);
    }

    .head-copy { min-width: 0; }

    .slide-head h2 {
      margin: -3px 0 8px;
      color: var(--ink);
      font-size: 52px;
      line-height: 1.13;
      letter-spacing: -.035em;
      font-weight: 850;
      white-space: nowrap;
    }

    .slide-head p {
      margin: 0;
      color: var(--muted);
      font-size: 24px;
      line-height: 1.45;
    }

    .slide-content {
      position: relative;
      height: 650px;
      padding-top: 28px;
    }

    .deck-footer {
      position: absolute;
      left: 80px;
      right: 80px;
      bottom: 24px;
      display: none;
      align-items: center;
      justify-content: flex-end;
      color: #6e7f9c;
      font-size: 15px;
      letter-spacing: .04em;
      z-index: 4;
    }

    .deck-footer strong {
      color: var(--blue);
      font: 850 18px/1 var(--font);
      letter-spacing: .08em;
    }

    .deck-footer .page-total {
      margin-left: 7px;
      color: #91a0b8;
      font: 750 13px/1 var(--font);
      letter-spacing: .04em;
    }

    .source-line {
      position: absolute;
      left: 80px;
      right: 210px;
      bottom: 49px;
      color: #7a87a0;
      font-size: 14px;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 3;
    }

    .notes { display: none !important; }

    .eyebrow {
      margin: 0 0 16px;
      color: var(--blue);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .big-claim {
      margin: 0;
      color: var(--ink);
      font-size: 54px;
      line-height: 1.28;
      letter-spacing: -.035em;
      font-weight: 850;
    }

    .slide[data-title^="多模态："] .big-claim {
      font-size: 48px;
    }

    .governance-rail {
      display: grid;
      gap: 10px;
      margin-top: 4px;
    }

    .governance-rail span {
      display: grid;
      grid-template-columns: 34px 1fr;
      align-items: center;
      min-height: 48px;
      padding: 0 18px;
      border: 1px solid rgba(36, 94, 235, .18);
      border-radius: 12px;
      background: rgba(255, 255, 255, .76);
      color: var(--ink);
      font-size: 24px;
      font-weight: 760;
    }

    .governance-rail b {
      color: var(--blue);
      font-size: 14px;
      letter-spacing: .06em;
    }

    .medium-claim {
      margin: 0;
      color: var(--ink);
      font-size: 39px;
      line-height: 1.35;
      letter-spacing: -.025em;
      font-weight: 800;
    }

    .accent { color: var(--blue); }
    .violet { color: var(--violet); }
    .gold { color: #a97613; }
    .green { color: var(--green); }
    .red { color: var(--red); }

    .statement {
      display: flex;
      align-items: center;
      min-height: 86px;
      padding: 18px 24px;
      border-left: 6px solid var(--blue);
      background: linear-gradient(90deg, rgba(232, 240, 255, .94), rgba(247, 249, 255, .3));
      color: var(--ink);
      font-size: 29px;
      font-weight: 750;
      line-height: 1.42;
    }

    .statement.gold-statement {
      border-left-color: var(--gold);
      background: linear-gradient(90deg, rgba(251, 244, 225, .95), rgba(255, 255, 255, .25));
    }

    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 42px;
      height: 100%;
      align-items: stretch;
    }

    .split.narrow-left { grid-template-columns: .82fr 1.18fr; }
    .split.wide-left { grid-template-columns: 1.2fr .8fr; }

    .surface {
      position: relative;
      padding: 30px 34px;
      border: 1px solid rgba(37, 80, 158, .18);
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 16px 48px rgba(32, 58, 114, .08);
      overflow: hidden;
    }

    .surface::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 7px;
      height: 100%;
      background: linear-gradient(var(--blue), var(--violet));
      opacity: .82;
    }

    .surface.gold-surface::after { background: var(--gold); }

    .surface h3 {
      margin: 0 0 16px;
      color: var(--ink);
      font-size: 30px;
      line-height: 1.25;
    }

    .surface p {
      margin: 0;
      font-size: 24px;
      line-height: 1.56;
    }

    .surface p + p { margin-top: 14px; }

    .flat-list {
      display: grid;
      gap: 18px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .flat-list li {
      position: relative;
      padding-left: 34px;
      color: var(--text);
      font-size: 25px;
      line-height: 1.46;
    }

    .flat-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .55em;
      width: 12px;
      height: 12px;
      border-radius: 3px;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      transform: rotate(45deg);
    }

    .flat-list.compact { gap: 12px; }
    .flat-list.compact li { font-size: 22px; }

    .number-list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: item;
    }

    .number-list li {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 15px;
      align-items: center;
      min-height: 54px;
      color: var(--text);
      font-size: 23px;
      line-height: 1.4;
      counter-increment: item;
    }

    .number-list li::before {
      content: counter(item, decimal-leading-zero);
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #eef3ff;
      color: var(--blue);
      font-size: 16px;
      font-weight: 900;
    }

    .three-columns {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      height: 470px;
    }

    .four-columns {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
      height: 470px;
    }

    .slide-content > .split:has(+ .statement) { height: 490px; }

    .five-evidence { height: 470px !important; }

    .slide[data-title^="目标蓝图"] .slide-head h2 {
      font-size: 43px;
      letter-spacing: -.04em;
    }

    .role-column {
      position: relative;
      padding: 30px 24px 24px;
      border-top: 5px solid var(--blue);
      background: linear-gradient(180deg, #f5f8ff, rgba(255, 255, 255, .8));
      box-shadow: 0 14px 40px rgba(30, 57, 118, .07);
    }

    .role-column:nth-child(2n) { border-top-color: var(--violet); }
    .role-column:nth-child(3n) { border-top-color: var(--gold); }

    .role-column .symbol {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      margin-bottom: 22px;
      border-radius: 18px;
      color: white;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      font-size: 27px;
      font-weight: 900;
    }

    .role-column h3 {
      margin: 0 0 14px;
      color: var(--ink);
      font-size: 30px;
    }

    .role-column p {
      margin: 0;
      color: var(--text);
      font-size: 22px;
      line-height: 1.5;
    }

    .role-column strong {
      display: block;
      margin-top: 20px;
      color: var(--blue);
      font-size: 21px;
    }

    .flow-row {
      position: relative;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 32px;
    }

    .flow-row::before {
      content: "";
      position: absolute;
      left: 6%;
      right: 6%;
      top: 45px;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--violet));
      opacity: .28;
    }

    .flow-node {
      position: relative;
      z-index: 1;
      padding: 76px 15px 12px;
      text-align: center;
    }

    .flow-node::before {
      content: attr(data-no);
      position: absolute;
      left: 50%;
      top: 7px;
      display: grid;
      place-items: center;
      width: 76px;
      height: 76px;
      transform: translateX(-50%);
      border: 8px solid white;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      color: white;
      box-shadow: 0 12px 30px rgba(36, 73, 170, .2);
      font-size: 21px;
      font-weight: 900;
    }

    .flow-node h3 {
      margin: 20px 0 9px;
      color: var(--ink);
      font-size: 25px;
    }

    .flow-node p {
      margin: 0;
      color: var(--muted);
      font-size: 19px;
      line-height: 1.45;
    }

    .evolution-showcase {
      position: relative;
      height: 520px;
      margin-top: 4px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(75, 112, 205, .2);
      border-radius: 42px;
      background:
        radial-gradient(circle at 11% 20%, rgba(47, 130, 255, .3), transparent 24%),
        radial-gradient(circle at 49% 4%, rgba(117, 71, 237, .22), transparent 29%),
        radial-gradient(circle at 87% 82%, rgba(214, 166, 61, .2), transparent 26%),
        linear-gradient(135deg, #f9fbff 0%, #eef4ff 46%, #f8f5ff 72%, #fffaf0 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .96),
        inset 0 -28px 70px rgba(84, 114, 196, .07),
        0 24px 70px rgba(31, 65, 139, .12);
    }

    .evolution-showcase::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: -8%;
      top: 44%;
      width: 116%;
      height: 160px;
      border-radius: 50%;
      background: linear-gradient(90deg,
        rgba(47, 130, 255, .5),
        rgba(33, 168, 207, .4) 28%,
        rgba(117, 71, 237, .42) 58%,
        rgba(214, 166, 61, .34));
      filter: blur(34px) saturate(135%);
      opacity: .58;
      transform: rotate(-5deg);
    }

    .evolution-showcase::after {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(15, 86, 232, .25) 0 1.2px, transparent 1.6px),
        radial-gradient(circle, rgba(117, 71, 237, .18) 0 1px, transparent 1.5px);
      background-position: 0 0, 19px 23px;
      background-size: 46px 46px, 73px 73px;
      opacity: .58;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .78), transparent 88%);
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .78), transparent 88%);
    }

    .evolution-track {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: center;
      gap: 18px;
      height: 100%;
      padding: 42px 30px 34px;
    }

    .evolution-track::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: 6.5%;
      right: 6.5%;
      top: 48%;
      height: 5px;
      border-radius: 999px;
      background: linear-gradient(90deg, #2f82ff, #21a8cf 28%, #7547ed 62%, #d6a63d);
      box-shadow:
        0 0 0 6px rgba(255, 255, 255, .55),
        0 0 26px rgba(47, 130, 255, .55);
      transform: rotate(-3.4deg);
      transform-origin: center;
    }

    .evolution-module {
      --accent: #0f56e8;
      --accent-2: #21a8cf;
      --accent-rgb: 15, 86, 232;
      position: relative;
      min-width: 0;
      height: 354px;
      padding: 29px 22px 24px;
      overflow: hidden;
      border: 1px solid transparent;
      border-radius: 29px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .68)) padding-box,
        linear-gradient(135deg, rgba(var(--accent-rgb), .66), rgba(255, 255, 255, .88) 48%, var(--accent-2)) border-box;
      box-shadow:
        0 24px 54px rgba(32, 62, 127, .16),
        0 8px 18px rgba(var(--accent-rgb), .1),
        inset 0 1px 0 rgba(255, 255, 255, .96);
      -webkit-backdrop-filter: blur(18px) saturate(145%);
      backdrop-filter: blur(18px) saturate(145%);
    }

    .evolution-module:nth-child(1) {
      --accent: #0f56e8;
      --accent-2: #21a8cf;
      --accent-rgb: 15, 86, 232;
      transform: translateY(34px);
    }

    .evolution-module:nth-child(2) {
      --accent: #405ee8;
      --accent-2: #7547ed;
      --accent-rgb: 64, 94, 232;
      transform: translateY(18px);
    }

    .evolution-module:nth-child(3) {
      --accent: #168fb9;
      --accent-2: #4e67ee;
      --accent-rgb: 22, 143, 185;
      transform: translateY(2px);
    }

    .evolution-module:nth-child(4) {
      --accent: #7547ed;
      --accent-2: #c16fd8;
      --accent-rgb: 117, 71, 237;
      transform: translateY(-14px);
    }

    .evolution-module:nth-child(5) {
      --accent: #c18a22;
      --accent-2: #2f82ff;
      --accent-rgb: 193, 138, 34;
      transform: translateY(-30px);
    }

    .evolution-module::before {
      content: "";
      position: absolute;
      right: -54px;
      top: -68px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(var(--accent-rgb), .25), transparent 68%);
      pointer-events: none;
    }

    .evolution-module::after {
      content: "";
      position: absolute;
      left: 22px;
      right: 22px;
      top: 0;
      height: 4px;
      border-radius: 0 0 999px 999px;
      background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
      box-shadow: 0 4px 18px rgba(var(--accent-rgb), .4);
    }

    .evolution-index {
      position: absolute;
      right: 18px;
      top: 16px;
      color: rgba(var(--accent-rgb), .14);
      font-size: 54px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.08em;
    }

    .evolution-icon {
      position: relative;
      display: grid;
      place-items: center;
      width: 82px;
      height: 82px;
      margin-bottom: 27px;
      border: 2px solid rgba(255, 255, 255, .9);
      border-radius: 27px;
      color: white;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:
        0 0 0 9px rgba(var(--accent-rgb), .08),
        0 18px 34px rgba(var(--accent-rgb), .28),
        inset 0 1px 0 rgba(255, 255, 255, .42);
    }

    .evolution-icon::after {
      content: "";
      position: absolute;
      inset: 7px;
      border: 1px solid rgba(255, 255, 255, .34);
      border-radius: 20px;
    }

    .evolution-icon svg {
      position: relative;
      z-index: 1;
      width: 42px;
      height: 42px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .evolution-module h3 {
      position: relative;
      margin: 0 0 14px;
      color: var(--ink);
      font-size: 30px;
      line-height: 1.16;
      letter-spacing: -.02em;
    }

    .evolution-module p {
      position: relative;
      margin: 0;
      color: #334865;
      font-size: 19px;
      line-height: 1.55;
    }

    .slide.active .evolution-track {
      animation: evolution-track-arrive .68s cubic-bezier(.22, .78, .28, 1) both;
    }

    .slide.active .evolution-showcase::before {
      animation: evolution-aurora-drift 10s ease-in-out infinite alternate;
    }

    @keyframes evolution-track-arrive {
      from { opacity: 0; transform: translate3d(0, 18px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes evolution-aurora-drift {
      from { transform: translate3d(-2%, 2px, 0) rotate(-5deg) scaleX(.96); }
      to { transform: translate3d(2%, -10px, 0) rotate(-2deg) scaleX(1.04); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .evolution-track,
      .slide.active .evolution-showcase::before { animation: none !important; }
    }

    .model-universe {
      position: relative;
      display: grid;
      grid-template-columns: .92fr 1.48fr;
      gap: 22px;
      height: 520px;
      padding: 22px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(67, 105, 197, .2);
      border-radius: 40px;
      background:
        radial-gradient(circle at 7% 16%, rgba(47, 130, 255, .3), transparent 24%),
        radial-gradient(circle at 56% 0%, rgba(117, 71, 237, .2), transparent 31%),
        radial-gradient(circle at 96% 82%, rgba(33, 168, 207, .2), transparent 28%),
        linear-gradient(135deg, #f8fbff, #eef3ff 48%, #f7f3ff 74%, #f0fbff);
      box-shadow: inset 0 1px 0 white, 0 24px 68px rgba(31, 64, 132, .11);
    }

    .model-universe::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 24%;
      top: -46%;
      width: 720px;
      height: 720px;
      border-radius: 50%;
      border: 1px solid rgba(90, 120, 220, .14);
      box-shadow:
        0 0 0 72px rgba(77, 112, 225, .035),
        0 0 0 145px rgba(117, 71, 237, .025),
        0 0 90px rgba(59, 100, 222, .12);
    }

    .model-universe::after {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(15, 86, 232, .24) 0 1.1px, transparent 1.5px),
        radial-gradient(circle, rgba(117, 71, 237, .18) 0 1px, transparent 1.4px);
      background-position: 0 0, 17px 21px;
      background-size: 45px 45px, 71px 71px;
      opacity: .5;
      -webkit-mask-image: linear-gradient(120deg, rgba(0, 0, 0, .9), transparent 92%);
      mask-image: linear-gradient(120deg, rgba(0, 0, 0, .9), transparent 92%);
    }

    .model-definition,
    .model-constellation {
      position: relative;
      z-index: 2;
      min-width: 0;
      border: 1px solid rgba(255, 255, 255, .86);
      background: linear-gradient(145deg, rgba(255, 255, 255, .91), rgba(255, 255, 255, .62));
      box-shadow: 0 20px 52px rgba(30, 58, 120, .12), inset 0 1px 0 white;
      -webkit-backdrop-filter: blur(18px) saturate(145%);
      backdrop-filter: blur(18px) saturate(145%);
    }

    .model-definition {
      display: grid;
      grid-template-rows: 198px 1fr;
      align-items: start;
      padding: 20px 24px 22px;
      border-radius: 30px;
    }

    .model-core {
      position: relative;
      display: grid;
      place-items: center;
      width: 188px;
      height: 188px;
      margin: -4px auto 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .16) 18%, transparent 19%),
        linear-gradient(145deg, #1267f2, #704ff0 62%, #28a9cf);
      color: white;
      box-shadow:
        0 0 0 11px rgba(255, 255, 255, .7),
        0 0 0 13px rgba(81, 111, 224, .18),
        0 24px 48px rgba(49, 78, 185, .28),
        inset 0 1px 0 rgba(255, 255, 255, .65);
    }

    .model-core > div {
      position: relative;
      z-index: 3;
      display: grid;
      place-items: center;
    }

    .model-core strong {
      font-size: 35px;
      line-height: 1.05;
      letter-spacing: -.04em;
    }

    .model-core small {
      margin-top: 9px;
      color: rgba(255, 255, 255, .75);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .15em;
    }

    .model-core-ring {
      position: absolute;
      left: 50%;
      top: 50%;
      border: 1px solid rgba(78, 107, 221, .23);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .model-core-ring.r1 { width: 224px; height: 224px; border-style: dashed; }
    .model-core-ring.r2 { width: 254px; height: 164px; transform: translate(-50%, -50%) rotate(28deg); }
    .model-core-ring.r3 { width: 164px; height: 254px; transform: translate(-50%, -50%) rotate(58deg); }

    .model-definition-copy {
      align-self: stretch;
      padding-top: 12px;
      border-top: 1px solid rgba(73, 105, 180, .13);
    }

    .model-kicker {
      margin: 0 0 9px;
      color: var(--blue);
      font-size: 14px;
      font-weight: 850;
      letter-spacing: .05em;
    }

    .model-definition-copy h3 {
      margin: 0 0 15px;
      color: var(--ink);
      font-size: 24px;
      line-height: 1.42;
      letter-spacing: -.02em;
    }

    .model-pillars {
      display: grid;
      gap: 7px;
    }

    .model-pillars span {
      display: grid;
      grid-template-columns: 78px 1fr;
      align-items: center;
      min-height: 34px;
      padding: 0 10px;
      border-left: 3px solid rgba(15, 86, 232, .65);
      color: #455773;
      background: rgba(240, 245, 255, .72);
      font-size: 13px;
      line-height: 1.3;
    }

    .model-pillars span:nth-child(2) { border-left-color: rgba(117, 71, 237, .65); }
    .model-pillars span:nth-child(3) { border-left-color: rgba(33, 168, 207, .7); }
    .model-pillars b { color: var(--ink); font-size: 14px; }

    .model-constellation {
      display: grid;
      grid-template-rows: auto 1fr 1fr;
      gap: 14px;
      padding: 24px 24px 22px;
      border-radius: 30px;
    }

    .model-constellation-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      padding: 0 4px 2px;
    }

    .model-constellation-head span {
      color: var(--violet);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .16em;
    }

    .model-constellation-head h3 {
      margin: 4px 0 0;
      color: var(--ink);
      font-size: 29px;
      line-height: 1.1;
    }

    .model-constellation-head small {
      color: #6b7890;
      font-size: 13px;
      font-weight: 750;
    }

    .model-family-group {
      display: grid;
      grid-template-columns: 84px 1fr;
      align-items: stretch;
      gap: 12px;
      padding: 12px;
      border: 1px solid rgba(76, 107, 184, .13);
      border-radius: 22px;
      background: rgba(255, 255, 255, .64);
      box-shadow: 0 11px 26px rgba(31, 58, 116, .065);
    }

    .model-family-group.china {
      background: linear-gradient(100deg, rgba(246, 243, 255, .8), rgba(255, 255, 255, .66));
    }

    .model-family-label {
      display: grid;
      place-content: center;
      border-radius: 16px;
      color: white;
      text-align: center;
      background: linear-gradient(145deg, #115ce9, #2da7cf);
      box-shadow: 0 12px 24px rgba(40, 92, 190, .2);
    }

    .model-family-group.china .model-family-label {
      background: linear-gradient(145deg, #7047e8, #bf76d2);
      box-shadow: 0 12px 24px rgba(104, 70, 191, .2);
    }

    .model-family-label span {
      font-size: 9px;
      font-weight: 850;
      letter-spacing: .13em;
      opacity: .72;
    }

    .model-family-label strong {
      margin-top: 4px;
      font-size: 20px;
    }

    .model-name-grid {
      display: grid;
      align-items: stretch;
      gap: 8px;
    }

    .model-name-grid.five { grid-template-columns: repeat(5, 1fr); }
    .model-name-grid.six { grid-template-columns: repeat(6, 1fr); }

    .model-name {
      position: relative;
      display: grid;
      align-content: center;
      min-width: 0;
      padding: 10px 9px 9px;
      overflow: hidden;
      border: 1px solid rgba(73, 104, 179, .13);
      border-radius: 15px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(239, 245, 255, .78));
    }

    .model-name::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--blue), var(--cyan));
    }

    .model-family-group.china .model-name::before { background: linear-gradient(180deg, var(--violet), #c16fd8); }

    .model-name strong {
      overflow: hidden;
      color: #152a55;
      font-size: 18px;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .model-name-grid.six .model-name strong {
      font-size: 15px;
      letter-spacing: -.02em;
    }

    .model-name span {
      margin-top: 5px;
      overflow: hidden;
      color: #71809a;
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .slide.active .model-definition,
    .slide.active .model-constellation {
      animation: model-panel-arrive .64s cubic-bezier(.22, .78, .28, 1) both;
    }

    .slide.active .model-constellation { animation-delay: .08s; }

    @keyframes model-panel-arrive {
      from { opacity: 0; transform: translate3d(0, 16px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    .model-knowledge-layout {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 18px;
      height: 520px;
      overflow: visible;
    }

    .model-explainer {
      position: relative;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 10px;
      min-width: 0;
      padding: 23px 25px 20px;
      overflow: hidden;
      border: 1px solid rgba(65, 103, 196, .18);
      border-radius: 32px;
      background:
        radial-gradient(circle at 5% 1%, rgba(47, 130, 255, .2), transparent 31%),
        radial-gradient(circle at 96% 96%, rgba(117, 71, 237, .15), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(239, 245, 255, .94));
      box-shadow: 0 24px 62px rgba(31, 64, 132, .12), inset 0 1px 0 white;
      z-index: 1;
    }

    .model-explainer::before {
      content: "";
      position: absolute;
      right: -82px;
      top: -88px;
      width: 230px;
      height: 230px;
      border: 1px solid rgba(77, 108, 218, .12);
      border-radius: 50%;
      box-shadow: 0 0 0 38px rgba(69, 105, 220, .035), 0 0 0 76px rgba(117, 71, 237, .022);
    }

    .model-explainer-kicker {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 11px;
      color: var(--blue);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .14em;
    }

    .model-explainer-kicker::before {
      content: "";
      width: 28px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--blue), var(--violet));
      box-shadow: 0 0 12px rgba(15, 86, 232, .28);
    }

    .model-explainer h3 {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--ink);
      font-size: 26px;
      line-height: 1.34;
      letter-spacing: -.025em;
    }

    .model-explainer h3 span { color: var(--blue); }

    .model-architecture-flow {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: repeat(4, minmax(0, 1fr));
      min-height: 0;
      margin-top: 2px;
      padding: 5px 8px 5px 4px;
      overflow: hidden;
      border: 1px solid rgba(74, 107, 190, .11);
      border-radius: 23px;
      background:
        linear-gradient(90deg, rgba(238, 245, 255, .92), rgba(255, 255, 255, .52) 48%, rgba(246, 242, 255, .66)),
        repeating-linear-gradient(0deg, transparent 0 37px, rgba(61, 93, 173, .04) 38px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 30px rgba(38, 68, 130, .055);
    }

    .model-architecture-flow::before {
      content: "";
      position: absolute;
      left: 39px;
      top: 40px;
      bottom: 40px;
      width: 2px;
      border-radius: 999px;
      background: linear-gradient(180deg, #2f82ff, #7750e8 38%, #d7a631 68%, #21b398);
      box-shadow: 0 0 7px rgba(76, 101, 222, .44), 0 0 18px rgba(76, 101, 222, .13);
    }

    .model-architecture-flow::after { content: none; }

    .model-architecture-stage {
      --stage-rgb: 47, 130, 255;
      --stage-delay: 0s;
      position: relative;
      display: grid;
      grid-template-columns: 64px 1fr;
      align-items: center;
      gap: 12px;
      min-height: 0;
      padding: 3px 5px;
      overflow: hidden;
      isolation: isolate;
      border-radius: 15px;
    }

    .model-architecture-stage:nth-child(2) { --stage-rgb: 117, 71, 237; --stage-delay: 2s; }
    .model-architecture-stage:nth-child(3) { --stage-rgb: 215, 166, 49; --stage-delay: 4s; }
    .model-architecture-stage:nth-child(4) { --stage-rgb: 33, 179, 152; --stage-delay: 6s; }

    .model-architecture-stage::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: -45%;
      top: -28%;
      width: 44%;
      height: 156%;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2) 18%, rgba(var(--stage-rgb), .34) 50%, rgba(255, 255, 255, .88) 68%, transparent);
      filter: blur(3px);
      transform: skewX(-18deg) translate3d(-150%, 0, 0);
    }

    .slide.active .model-architecture-stage {
      animation: model-architecture-row-highlight 8s ease-in-out infinite;
      animation-delay: var(--stage-delay);
    }

    .slide.active .model-architecture-stage::before {
      animation: model-architecture-row-sweep 8s cubic-bezier(.3, .72, .26, 1) infinite;
      animation-delay: var(--stage-delay);
    }

    .slide.active .model-architecture-node {
      animation: model-architecture-row-content 8s ease-in-out infinite;
      animation-delay: var(--stage-delay);
    }

    @keyframes model-architecture-row-highlight {
      0%, 23%, 100% {
        background-color: rgba(var(--stage-rgb), 0);
        box-shadow: inset 0 0 0 1px rgba(var(--stage-rgb), 0), 0 0 0 rgba(var(--stage-rgb), 0);
      }
      5%, 16% {
        background-color: rgba(var(--stage-rgb), .095);
        box-shadow: inset 0 0 0 1px rgba(var(--stage-rgb), .2), 0 8px 24px rgba(var(--stage-rgb), .1);
      }
    }

    @keyframes model-architecture-row-sweep {
      0% { opacity: 0; transform: skewX(-18deg) translate3d(-150%, 0, 0); }
      4% { opacity: .95; }
      18% { opacity: .72; transform: skewX(-18deg) translate3d(430%, 0, 0); }
      23%, 100% { opacity: 0; transform: skewX(-18deg) translate3d(430%, 0, 0); }
    }

    @keyframes model-architecture-row-content {
      0%, 23%, 100% { filter: brightness(1) saturate(1); transform: translate3d(0, 0, 0); }
      5%, 16% { filter: brightness(1.08) saturate(1.16); transform: translate3d(3px, 0, 0); }
    }

    .model-architecture-stage:not(:last-child)::after {
      content: "";
      position: absolute;
      z-index: 1;
      left: 73px;
      right: 2px;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, rgba(71, 107, 190, .15), transparent 88%);
    }

    .model-architecture-node {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      margin-left: 5px;
      border: 1px solid rgba(103, 149, 255, .28);
      border-radius: 18px;
      color: #1766da;
      background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(222, 236, 255, .9));
      box-shadow: 0 10px 22px rgba(38, 88, 178, .14), inset 0 1px 0 white;
      isolation: isolate;
    }

    .model-architecture-node::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: -6px;
      border: 1px solid rgba(58, 126, 245, .13);
      border-radius: 22px;
      transform: rotate(6deg);
    }

    .model-architecture-node svg {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .model-architecture-stage.training .model-architecture-node {
      color: #744bd5;
      border-color: rgba(117, 71, 237, .25);
      background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(236, 228, 255, .92));
      box-shadow: 0 10px 24px rgba(91, 57, 180, .15), inset 0 1px 0 white;
    }

    .model-architecture-stage.parameters .model-architecture-node {
      width: 60px;
      height: 60px;
      margin-left: 1px;
      color: #8f6813;
      border-color: rgba(215, 166, 49, .42);
      border-radius: 50%;
      background: radial-gradient(circle at 34% 28%, #fff8d8, #f5d47e 48%, #d7a631 100%);
      box-shadow: 0 0 0 7px rgba(229, 184, 76, .09), 0 12px 28px rgba(177, 128, 25, .2), 0 0 28px rgba(235, 189, 75, .22);
    }

    .model-architecture-stage.parameters .model-architecture-node::before {
      inset: -9px;
      border-color: rgba(215, 166, 49, .24);
      border-radius: 50%;
      transform: none;
      box-shadow: 0 0 0 5px rgba(215, 166, 49, .045);
    }

    .model-architecture-stage.generate .model-architecture-node {
      color: #118a79;
      border-color: rgba(33, 179, 152, .28);
      background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(216, 247, 240, .92));
      box-shadow: 0 10px 24px rgba(27, 143, 123, .14), inset 0 1px 0 white;
    }

    .model-architecture-copy {
      position: relative;
      z-index: 2;
      min-width: 0;
      filter: none;
      transform: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: auto;
    }

    .model-architecture-copy span {
      display: block;
      margin-bottom: 2px;
      color: #536f9c;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .11em;
    }

    .model-architecture-copy strong {
      display: block;
      color: #17305f;
      font-size: 19px;
      line-height: 1.2;
    }

    .model-architecture-copy p {
      margin: 3px 0 0;
      color: #41536e;
      font-size: 13px;
      line-height: 1.34;
    }

    .model-architecture-summary {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 12px;
      min-height: 54px;
      padding: 10px 13px;
      border: 1px solid rgba(239, 91, 88, .25);
      border-radius: 16px;
      color: #713642;
      background: linear-gradient(100deg, rgba(255, 232, 229, .98), rgba(255, 249, 249, .78));
      box-shadow: 0 10px 24px rgba(199, 68, 77, .1), inset 0 1px 0 rgba(255, 255, 255, .94);
      font-size: 15px;
      line-height: 1.4;
    }

    .model-architecture-summary span {
      padding: 5px 9px;
      border-radius: 9px;
      color: white;
      background: linear-gradient(135deg, #ff7464, #df3f61);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
      box-shadow: 0 7px 16px rgba(213, 57, 84, .24);
    }

    .model-architecture-summary strong {
      color: #a83249;
      font-size: 16px;
      font-weight: 850;
      letter-spacing: -.015em;
    }

    .knowledge-cosmos {
      position: relative;
      min-width: 0;
      overflow: visible;
      isolation: isolate;
      border: 0;
      border-radius: 24px;
      color: white;
      background:
        radial-gradient(circle at 50% 49%, rgba(245, 194, 85, .18), transparent 22%),
        radial-gradient(circle at 16% 15%, rgba(47, 130, 255, .25), transparent 33%),
        radial-gradient(circle at 92% 86%, rgba(68, 210, 184, .16), transparent 31%),
        linear-gradient(145deg, #071326 0%, #040916 58%, #090714 100%);
      box-shadow: 0 34px 80px rgba(13, 28, 62, .3), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 48px rgba(75, 111, 220, .08);
      z-index: 2;
      outline: none;
    }

    .knowledge-cosmos::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, .48) 0 1px, transparent 1.35px),
        radial-gradient(circle, rgba(106, 232, 207, .34) 0 1px, transparent 1.4px);
      background-position: 0 0, 19px 23px;
      background-size: 51px 51px, 83px 83px;
      opacity: .28;
      -webkit-mask-image: radial-gradient(circle at center, #000, transparent 92%);
      mask-image: radial-gradient(circle at center, #000, transparent 92%);
    }

    .cockpit-frame {
      position: absolute;
      z-index: 1;
      inset: -10px -9px;
      pointer-events: none;
      filter: drop-shadow(0 18px 24px rgba(3, 10, 25, .42));
    }

    .cockpit-frame::before,
    .cockpit-frame::after {
      content: "";
      position: absolute;
      pointer-events: none;
      clip-path: polygon(34px 0, calc(100% - 34px) 0, 100% 34px, 100% calc(100% - 34px), calc(100% - 34px) 100%, 34px 100%, 0 calc(100% - 34px), 0 34px);
    }

    .cockpit-frame::before {
      inset: 0;
      background:
        linear-gradient(90deg, transparent 0 8%, rgba(115, 226, 255, .72) 11%, rgba(42, 70, 99, .72) 26%, rgba(213, 167, 66, .82) 50%, rgba(42, 70, 99, .72) 74%, rgba(115, 226, 255, .72) 89%, transparent 92%) top / 100% 9px no-repeat,
        linear-gradient(90deg, transparent 0 8%, rgba(76, 134, 166, .74) 14%, rgba(30, 48, 72, .92) 32%, rgba(210, 166, 64, .72) 50%, rgba(30, 48, 72, .92) 68%, rgba(76, 134, 166, .74) 86%, transparent 92%) bottom / 100% 9px no-repeat,
        linear-gradient(180deg, transparent 0 10%, rgba(104, 217, 245, .66) 15%, rgba(30, 49, 72, .88) 34%, rgba(29, 47, 70, .88) 66%, rgba(104, 217, 245, .66) 85%, transparent 90%) left / 9px 100% no-repeat,
        linear-gradient(180deg, transparent 0 10%, rgba(104, 217, 245, .66) 15%, rgba(30, 49, 72, .88) 34%, rgba(29, 47, 70, .88) 66%, rgba(213, 167, 66, .72) 85%, transparent 90%) right / 9px 100% no-repeat,
        linear-gradient(145deg, #637b94 0%, #1e3047 16%, #0a1424 42%, #253951 72%, #8bb8ca 100%);
      box-shadow: inset 0 0 0 1px rgba(184, 226, 241, .34), inset 0 0 18px rgba(80, 179, 216, .16), 0 0 0 1px rgba(9, 20, 36, .72);
    }

    .cockpit-frame::after {
      inset: 10px;
      background:
        radial-gradient(circle at 50% 50%, rgba(15, 31, 54, .22), transparent 58%),
        linear-gradient(145deg, rgba(5, 14, 30, .82), rgba(3, 8, 19, .72));
      box-shadow: inset 0 0 0 1px rgba(103, 217, 244, .22), inset 0 0 24px rgba(56, 135, 178, .12);
      clip-path: polygon(27px 0, calc(100% - 27px) 0, 100% 27px, 100% calc(100% - 27px), calc(100% - 27px) 100%, 27px 100%, 0 calc(100% - 27px), 0 27px);
    }

    .cockpit-inner-ring {
      position: absolute;
      z-index: 2;
      inset: 14px;
      opacity: .76;
      background:
        linear-gradient(90deg, transparent, rgba(112, 232, 255, .62) 14%, rgba(112, 232, 255, .12) 48%, rgba(211, 168, 68, .58) 84%, transparent) top / calc(100% - 76px) 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(211, 168, 68, .46) 18%, rgba(112, 232, 255, .14) 52%, rgba(112, 232, 255, .56) 86%, transparent) bottom / calc(100% - 76px) 1px no-repeat,
        linear-gradient(180deg, transparent, rgba(112, 232, 255, .46) 22%, rgba(112, 232, 255, .13) 74%, transparent) left / 1px calc(100% - 76px) no-repeat,
        linear-gradient(180deg, transparent, rgba(211, 168, 68, .46) 22%, rgba(112, 232, 255, .13) 74%, transparent) right / 1px calc(100% - 76px) no-repeat;
      background-position: center top, center bottom, left center, right center;
      box-shadow: inset 0 0 26px rgba(62, 173, 218, .06);
      pointer-events: none;
    }

    .cockpit-rail {
      position: absolute;
      z-index: 3;
      background: linear-gradient(90deg, rgba(12, 24, 40, .94), rgba(94, 136, 161, .9) 20%, rgba(117, 231, 255, .88) 50%, rgba(94, 136, 161, .9) 80%, rgba(12, 24, 40, .94));
      box-shadow: 0 0 8px rgba(103, 225, 252, .24), inset 0 1px 0 rgba(255, 255, 255, .34);
    }

    .cockpit-rail.top,
    .cockpit-rail.bottom {
      left: 92px;
      right: 92px;
      height: 6px;
      clip-path: polygon(0 50%, 18px 0, calc(50% - 38px) 0, calc(50% - 28px) 100%, calc(50% + 28px) 100%, calc(50% + 38px) 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%);
    }

    .cockpit-rail.top { top: 2px; }
    .cockpit-rail.bottom { bottom: 2px; transform: scaleY(-1); }

    .cockpit-rail.left,
    .cockpit-rail.right {
      top: 88px;
      bottom: 88px;
      width: 6px;
      background: linear-gradient(180deg, rgba(12, 24, 40, .94), rgba(94, 136, 161, .9) 20%, rgba(117, 231, 255, .78) 50%, rgba(94, 136, 161, .9) 80%, rgba(12, 24, 40, .94));
      clip-path: polygon(50% 0, 100% 18px, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px), 0 18px);
    }

    .cockpit-rail.left { left: 2px; }
    .cockpit-rail.right { right: 2px; }

    .cockpit-corner {
      position: absolute;
      z-index: 4;
      width: 82px;
      height: 82px;
      background: linear-gradient(135deg, #9ac4d5 0%, #3d5872 11%, #17273c 34%, #0a1423 58%, #243b54 78%, #5a8198 100%);
      clip-path: polygon(0 0, 100% 0, 100% 11px, 44px 11px, 31px 20px, 20px 31px, 11px 44px, 11px 100%, 0 100%);
      box-shadow: inset 0 0 0 1px rgba(202, 236, 247, .28), 0 0 13px rgba(82, 197, 231, .16);
    }

    .cockpit-corner::before,
    .cockpit-corner::after {
      content: "";
      position: absolute;
      border-radius: 50%;
    }

    .cockpit-corner::before {
      left: 15px;
      top: 15px;
      width: 10px;
      height: 10px;
      border: 2px solid rgba(128, 230, 252, .76);
      background: #0a1728;
      box-shadow: 0 0 0 3px rgba(88, 199, 228, .08), 0 0 11px rgba(94, 217, 245, .46);
    }

    .cockpit-corner::after {
      left: 18px;
      top: 18px;
      width: 4px;
      height: 4px;
      background: #d9f8ff;
      box-shadow: 0 0 8px #79e7ff;
    }

    .cockpit-corner.tl { left: 0; top: 0; }
    .cockpit-corner.tr { right: 0; top: 0; transform: scaleX(-1); }
    .cockpit-corner.br { right: 0; bottom: 0; transform: scale(-1); }
    .cockpit-corner.bl { left: 0; bottom: 0; transform: scaleY(-1); }

    .cockpit-ridge,
    .cockpit-keel {
      position: absolute;
      z-index: 5;
      left: 50%;
      width: 178px;
      height: 19px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, #5c7890, #1b2d43 34%, #081321 72%, #34526a);
      clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 100%, 69% 100%, 64% 54%, 36% 54%, 31% 100%, 0 100%);
      box-shadow: inset 0 1px 0 rgba(220, 246, 255, .34), 0 0 12px rgba(94, 211, 242, .18);
    }

    .cockpit-ridge::after,
    .cockpit-keel::after {
      content: "";
      position: absolute;
      left: 68px;
      right: 68px;
      bottom: 3px;
      height: 2px;
      border-radius: 999px;
      background: #82eaff;
      box-shadow: 0 0 9px rgba(114, 230, 255, .9);
    }

    .cockpit-ridge { top: -5px; }
    .cockpit-keel { bottom: -5px; transform: translateX(-50%) scaleY(-1); }

    .cockpit-accent {
      position: absolute;
      z-index: 5;
      top: 50%;
      width: 18px;
      height: 66px;
      border: 1px solid rgba(102, 222, 248, .32);
      background: linear-gradient(180deg, transparent, rgba(102, 222, 248, .18), transparent);
      clip-path: polygon(50% 0, 100% 12px, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px), 0 12px);
      transform: translateY(-50%);
      box-shadow: inset 0 0 10px rgba(102, 222, 248, .16);
    }

    .cockpit-accent.left { left: 7px; }
    .cockpit-accent.right { right: 7px; border-color: rgba(211, 168, 68, .34); background: linear-gradient(180deg, transparent, rgba(211, 168, 68, .18), transparent); }

    .knowledge-cosmos:focus-visible {
      outline: 4px solid rgba(214, 166, 61, .8);
      outline-offset: 5px;
    }

    .knowledge-cosmos.dragging { box-shadow: 0 30px 76px rgba(13, 28, 62, .29), 0 0 0 2px rgba(214, 166, 61, .28); }

    #knowledgeUniverseCanvas {
      position: absolute;
      z-index: 2;
      left: -14%;
      top: -25%;
      width: 123%;
      height: 150%;
      cursor: grab;
      touch-action: none;
      filter: none;
    }

    .knowledge-cosmos.dragging #knowledgeUniverseCanvas { cursor: grabbing; }

    .knowledge-cosmos-head {
      position: absolute;
      z-index: 4;
      left: 22px;
      right: 22px;
      top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
    }

    .knowledge-cosmos-title span {
      display: block;
      color: rgba(155, 190, 255, .76);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .18em;
    }

    .knowledge-cosmos-title strong {
      display: block;
      margin-top: 5px;
      font-size: 18px;
      letter-spacing: -.01em;
    }

    .knowledge-motion-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 28px;
      padding: 0 10px;
      border: 1px solid rgba(255, 216, 125, .23);
      border-radius: 999px;
      color: #f6d986;
      background: rgba(24, 24, 35, .55);
      font-size: 11px;
      font-weight: 800;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .knowledge-motion-status::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ffd875;
      box-shadow: 0 0 10px rgba(255, 216, 117, .9);
    }

    .knowledge-cosmos.paused .knowledge-motion-status { color: #b9c6da; border-color: rgba(182, 198, 222, .18); }
    .knowledge-cosmos.paused .knowledge-motion-status::before { background: #9eb0c9; box-shadow: none; }

    .knowledge-drag-hint {
      position: absolute;
      z-index: 4;
      left: 22px;
      bottom: 18px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: rgba(222, 231, 246, .78);
      font-size: 11px;
      font-weight: 700;
      pointer-events: none;
    }

    .knowledge-drag-hint svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: #f0c765;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .knowledge-diagram-note {
      position: absolute;
      z-index: 4;
      right: 22px;
      bottom: 19px;
      color: rgba(160, 177, 205, .68);
      font-size: 10px;
      pointer-events: none;
    }

    .model-family-landscape {
      position: relative;
      display: grid;
      grid-template-rows: 70px minmax(0, 1fr);
      gap: 11px;
      height: 570px;
      padding: 17px 20px 18px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(199, 168, 112, .36);
      border-radius: 36px;
      background:
        radial-gradient(circle at 10% -4%, rgba(205, 161, 88, .24), transparent 29%),
        radial-gradient(circle at 91% 108%, rgba(121, 139, 113, .2), transparent 38%),
        radial-gradient(circle at 54% 46%, rgba(151, 120, 78, .11), transparent 32%),
        linear-gradient(135deg, #24211d 0%, #1d1e1c 48%, #29251f 100%);
      box-shadow: 0 28px 72px rgba(51, 42, 29, .22), inset 0 1px 0 rgba(255, 248, 232, .13), inset 0 0 56px rgba(185, 145, 80, .05);
    }

    .model-family-landscape::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 49%;
      top: -570px;
      width: 880px;
      height: 880px;
      border: 1px solid rgba(218, 186, 128, .15);
      border-radius: 50%;
      box-shadow: 0 0 0 92px rgba(215, 177, 109, .028), 0 0 0 188px rgba(121, 139, 113, .022), 0 0 70px rgba(188, 151, 86, .08);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .model-family-landscape::after {
      content: "";
      position: absolute;
      z-index: 0;
      left: 3%;
      right: 3%;
      top: 97px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(215, 181, 119, .55) 24%, rgba(244, 229, 193, .56) 50%, rgba(125, 146, 116, .5) 78%, transparent);
      box-shadow: 0 0 18px rgba(206, 167, 96, .2);
      pointer-events: none;
    }

    .model-family-landscape-head,
    .model-family-bands { position: relative; z-index: 1; }

    .model-family-landscape-head {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 7px 0 9px;
    }

    .model-family-landscape-head span {
      display: block;
      color: #d7b776;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .22em;
      text-shadow: 0 0 14px rgba(211, 173, 103, .24);
    }

    .model-family-landscape-head h3 {
      margin: 5px 0 0;
      color: #f7f0e3;
      font-size: 29px;
      line-height: 1.1;
      letter-spacing: -.02em;
    }

    .model-family-bands {
      display: grid;
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 10px;
      min-height: 0;
    }

    .model-family-band {
      --band-rgb: 125, 145, 116;
      display: grid;
      grid-template-columns: 188px minmax(0, 1fr);
      gap: 11px;
      min-height: 0;
      padding: 10px;
      overflow: hidden;
      border: 1px solid rgba(var(--band-rgb), .25);
      border-radius: 24px;
      background: linear-gradient(112deg, rgba(var(--band-rgb), .14), rgba(255, 248, 232, .045) 39%, rgba(255, 255, 255, .024));
      box-shadow: inset 0 1px 0 rgba(255, 248, 232, .09), 0 12px 34px rgba(22, 18, 13, .2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .model-family-band.domestic {
      --band-rgb: 202, 160, 91;
      border-color: rgba(215, 178, 111, .38);
      background: linear-gradient(110deg, rgba(155, 111, 54, .2), rgba(107, 91, 60, .09) 46%, rgba(255, 248, 232, .032));
      box-shadow: inset 0 1px 0 rgba(255, 248, 232, .13), 0 15px 38px rgba(28, 22, 15, .24), 0 0 30px rgba(190, 145, 72, .06);
    }

    .model-family-band-label {
      position: relative;
      display: grid;
      align-content: center;
      padding: 17px 18px;
      overflow: hidden;
      border: 1px solid rgba(var(--band-rgb), .28);
      border-radius: 18px;
      color: white;
      background: linear-gradient(145deg, rgba(var(--band-rgb), .25), rgba(30, 31, 27, .72));
      box-shadow: inset 0 1px 0 rgba(255, 248, 232, .11), 0 12px 24px rgba(22, 18, 13, .2);
    }

    .model-family-band.domestic .model-family-band-label {
      background: linear-gradient(145deg, rgba(181, 129, 59, .34), rgba(72, 52, 31, .72));
      box-shadow: inset 0 1px 0 rgba(255, 248, 232, .15), 0 13px 27px rgba(28, 20, 12, .24);
    }

    .model-family-band-label::before {
      content: "";
      position: absolute;
      left: 0;
      top: 18%;
      bottom: 18%;
      width: 3px;
      border-radius: 99px;
      background: rgb(var(--band-rgb));
      box-shadow: 0 0 15px rgba(var(--band-rgb), .85);
    }

    .model-family-band-label b {
      position: absolute;
      right: 11px;
      bottom: -12px;
      color: rgba(255, 255, 255, .07);
      font-size: 64px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.08em;
    }

    .model-family-band-label span {
      position: relative;
      z-index: 1;
      color: rgba(235, 211, 165, .84);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .2em;
    }

    .model-family-band-label strong {
      position: relative;
      z-index: 1;
      margin-top: 5px;
      font-size: 24px;
      letter-spacing: -.02em;
    }

    .model-family-band-label p {
      position: relative;
      z-index: 1;
      margin: 8px 0 0;
      color: rgba(235, 228, 214, .68);
      font-size: 12px;
      line-height: 1.45;
    }

    .model-family-card-grid {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .model-family-card-grid.five { grid-template-columns: repeat(5, 1fr); }
    .model-family-card-grid.six { grid-template-columns: repeat(6, 1fr); }

    .model-family-card {
      --brand: #c49a5a;
      --brand-rgb: 196, 154, 90;
      --card-start: #faf6ed;
      --card-end: #e6dac6;
      --flow-delay: 0s;
      --flow-speed: 5.6s;
      position: relative;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-content: center;
      align-items: center;
      column-gap: 11px;
      row-gap: 6px;
      min-width: 0;
      padding: 12px 11px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(204, 181, 144, .38);
      border-radius: 18px;
      background: #26231f;
      box-shadow: 0 10px 24px rgba(27, 21, 14, .18), 0 1px 0 rgba(255, 248, 234, .18);
    }

    .model-family-card::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 50%;
      top: 50%;
      width: 165%;
      aspect-ratio: 1;
      background:
        conic-gradient(
          from 0deg,
          transparent 0deg 244deg,
          rgba(255, 255, 255, .08) 252deg,
          rgba(255, 255, 255, .58) 267deg,
          #fff 278deg,
          rgba(255, 255, 255, .86) 285deg,
          rgba(255, 255, 255, .16) 299deg,
          transparent 312deg 360deg
        ),
        conic-gradient(
          from 0deg,
          #ff3d77 0deg,
          #ff8a3d 48deg,
          #ffd84a 96deg,
          #58df8b 146deg,
          #2fd5dc 198deg,
          #4b7cff 250deg,
          #995cff 302deg,
          #f04fd8 338deg,
          #ff3d77 360deg
        );
      opacity: .76;
      filter: saturate(1.08) brightness(.98);
      transform: translate3d(-50%, -50%, 0) rotate(0deg);
      pointer-events: none;
    }

    .model-family-card::after {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 3px;
      border-radius: 15px;
      background:
        radial-gradient(circle at 9% 0%, rgba(255, 255, 255, .9), transparent 44%),
        radial-gradient(circle at 100% 100%, rgba(var(--brand-rgb), .13), transparent 54%),
        linear-gradient(145deg, var(--card-start) 0%, var(--card-end) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(var(--brand-rgb), .1);
      pointer-events: none;
    }

    .model-family-card > * {
      position: relative;
      z-index: 2;
    }

    .model-family-logo {
      grid-row: 1 / 3;
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(139, 112, 76, .18);
      border-radius: 15px;
      background: rgba(255, 253, 248, .96);
      box-shadow: 0 7px 16px rgba(80, 61, 38, .14), 0 0 0 3px rgba(var(--brand-rgb), .05);
    }

    .model-family-logo img {
      display: block;
      width: 31px;
      height: 31px;
      object-fit: contain;
    }

    .model-family-card-copy {
      display: grid;
      min-width: 0;
    }

    .model-family-card strong {
      overflow: hidden;
      color: #25211c;
      font-size: 19px;
      line-height: 1.05;
      letter-spacing: -.02em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .model-family-card-grid.six .model-family-card strong { font-size: 17px; }

    .model-family-card-copy span {
      margin-top: 5px;
      overflow: hidden;
      color: #655b50;
      font-size: 11px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .model-family-card small {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-self: start;
      width: max-content;
      max-width: 100%;
      min-height: 24px;
      padding: 0 8px;
      overflow: hidden;
      border: 1px solid rgba(var(--brand-rgb), .38);
      border-radius: 999px;
      color: #4e4a45;
      background: rgba(var(--brand-rgb), .1);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
      font-size: 11px;
      font-weight: 750;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .brand-doubao { --brand: #b66f70; --brand-rgb: 182, 111, 112; --card-start: #fff2ef; --card-end: #ecd9e4; --flow-delay: -.5s; --flow-speed: 5.5s; }
    .brand-deepseek { --brand: #5577a0; --brand-rgb: 85, 119, 160; --card-start: #eef5fc; --card-end: #d7e5ef; --flow-delay: -1.1s; --flow-speed: 5.2s; }
    .brand-qwen { --brand: #88759c; --brand-rgb: 136, 117, 156; --card-start: #f6f0fb; --card-end: #e3d9ec; --flow-delay: -3.4s; --flow-speed: 5.8s; }
    .brand-baidu { --brand: #6e80a0; --brand-rgb: 110, 128, 160; --card-start: #f1f4fa; --card-end: #dce3ed; --flow-delay: -2.2s; --flow-speed: 6.1s; }
    .brand-zhipu { --brand: #6f9285; --brand-rgb: 111, 146, 133; --card-start: #eef8f3; --card-end: #d8e8df; --flow-delay: -4.2s; --flow-speed: 5.9s; }
    .brand-kimi { --brand: #bc9250; --brand-rgb: 188, 146, 80; --card-start: #fff7e4; --card-end: #eadcb9; --flow-delay: -2.8s; --flow-speed: 5.3s; }
    .brand-openai { --brand: #6c8876; --brand-rgb: 108, 136, 118; --card-start: #eef5ef; --card-end: #d8e4da; --flow-delay: -1.7s; --flow-speed: 5.7s; }
    .brand-claude { --brand: #c17a57; --brand-rgb: 193, 122, 87; --card-start: #fff1e9; --card-end: #ead3c6; --flow-delay: -.9s; --flow-speed: 5.4s; }
    .brand-gemini { --brand: #767eac; --brand-rgb: 118, 126, 172; --card-start: #eff2ff; --card-end: #dbe1f3; --flow-delay: -4.8s; --flow-speed: 6s; }
    .brand-grok { --brand: #7f838a; --brand-rgb: 127, 131, 138; --card-start: #f3f4f5; --card-end: #dce0e4; --flow-delay: -2.4s; --flow-speed: 5.6s; }
    .brand-meta { --brand: #66839d; --brand-rgb: 102, 131, 157; --card-start: #edf7fb; --card-end: #d7e8f0; --flow-delay: -3.1s; --flow-speed: 5.9s; }

    .brand-kimi .model-family-logo {
      border-color: rgba(110, 174, 255, .38);
      background: linear-gradient(145deg, #102f63, #081b3d);
      box-shadow: 0 8px 18px rgba(5, 24, 58, .26), 0 0 0 3px rgba(23, 131, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .16);
    }

    .slide.active .model-family-card::before {
      animation:
        model-family-border-flow var(--flow-speed) linear infinite,
        model-family-border-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
      animation-delay: var(--flow-delay), var(--flow-delay);
      will-change: transform, opacity, filter;
    }

    .slide.active .model-family-card {
      animation: model-family-card-breathe 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
      animation-delay: var(--flow-delay);
    }

    @keyframes model-family-border-flow {
      to { transform: translate3d(-50%, -50%, 0) rotate(360deg); }
    }

    @keyframes model-family-border-pulse {
      0%, 100% { opacity: .64; filter: saturate(1.02) brightness(.92); }
      46%, 54% { opacity: 1; filter: saturate(1.5) brightness(1.42); }
    }

    @keyframes model-family-card-breathe {
      0%, 100% {
        box-shadow: 0 10px 24px rgba(27, 21, 14, .18), 0 1px 0 rgba(255, 248, 234, .18), 0 0 0 rgba(var(--brand-rgb), 0);
      }
      50% {
        box-shadow: 0 12px 28px rgba(27, 21, 14, .2), 0 1px 0 rgba(255, 248, 234, .2), 0 0 18px rgba(var(--brand-rgb), .3);
      }
    }

    .slide.active .model-family-band {
      animation: model-family-band-arrive .62s cubic-bezier(.22, .78, .28, 1) both;
    }

    .slide.active .model-family-band.global { animation-delay: .1s; }

    @keyframes model-family-band-arrive {
      from { opacity: 0; transform: translate3d(0, 14px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    .slide.active .model-explainer {
      animation: model-explainer-arrive .48s ease-out both;
    }

    .slide.active .knowledge-cosmos,
    .slide.active .model-family-landscape {
      animation: model-panel-arrive .64s cubic-bezier(.22, .78, .28, 1) both;
    }

    @keyframes model-explainer-arrive {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .slide.active .knowledge-cosmos { animation-delay: .08s; }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .model-explainer,
      .slide.active .knowledge-cosmos,
      .slide.active .model-family-landscape,
      .slide.active .model-family-band,
      .slide.active .model-family-card,
      .slide.active .model-family-card::before,
      .slide.active .model-architecture-stage,
      .slide.active .model-architecture-stage::before,
      .slide.active .model-architecture-node,
      .slide.active .model-architecture-copy { animation: none !important; }
    }

    .llm-workbench {
      position: relative;
      height: 520px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(66, 103, 191, .2);
      border-radius: 40px;
      background:
        radial-gradient(circle at 12% 0%, rgba(47, 130, 255, .28), transparent 26%),
        radial-gradient(circle at 52% 45%, rgba(117, 71, 237, .19), transparent 30%),
        radial-gradient(circle at 94% 16%, rgba(33, 168, 207, .2), transparent 25%),
        linear-gradient(135deg, #f9fbff, #eef4ff 46%, #f8f4ff 74%, #f0fbff);
      box-shadow: inset 0 1px 0 white, 0 24px 68px rgba(31, 64, 132, .11);
    }

    .llm-workbench::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 36%;
      top: -32%;
      width: 420px;
      height: 620px;
      border-radius: 50%;
      background: linear-gradient(180deg, rgba(47, 130, 255, .18), rgba(117, 71, 237, .24), rgba(33, 168, 207, .15));
      filter: blur(52px);
      transform: rotate(24deg);
    }

    .llm-engine-row {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 76px .78fr 76px 1fr;
      align-items: center;
      gap: 12px;
      height: 375px;
      padding: 25px 28px 4px;
    }

    .llm-input-panel,
    .llm-output-panel {
      position: relative;
      height: 315px;
      padding: 23px 22px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .88);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .66));
      box-shadow: 0 20px 48px rgba(30, 59, 124, .13), inset 0 1px 0 white;
      -webkit-backdrop-filter: blur(18px) saturate(145%);
      backdrop-filter: blur(18px) saturate(145%);
    }

    .llm-input-panel::before,
    .llm-output-panel::before {
      content: "";
      position: absolute;
      left: 20px;
      right: 20px;
      top: 0;
      height: 4px;
      border-radius: 0 0 999px 999px;
      background: linear-gradient(90deg, transparent, var(--blue), var(--cyan), transparent);
      box-shadow: 0 4px 18px rgba(15, 86, 232, .35);
    }

    .llm-output-panel::before { background: linear-gradient(90deg, transparent, var(--violet), #c178d4, transparent); }

    .llm-panel-label {
      margin: 0 0 6px;
      color: var(--blue);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .14em;
    }

    .llm-output-panel .llm-panel-label { color: var(--violet); }

    .llm-input-panel h3,
    .llm-output-panel h3 {
      margin: 0 0 15px;
      color: var(--ink);
      font-size: 28px;
      line-height: 1.1;
    }

    .llm-question {
      padding: 14px 15px;
      border: 1px solid rgba(62, 101, 194, .14);
      border-radius: 17px;
      color: #40516d;
      background: linear-gradient(145deg, #f6f9ff, #edf3ff);
      font-size: 17px;
      line-height: 1.45;
      box-shadow: inset 0 1px 0 white;
    }

    .llm-question strong {
      display: block;
      margin-top: 4px;
      color: #12306c;
      font-size: 20px;
    }

    .llm-context-list {
      display: grid;
      gap: 7px;
      margin-top: 14px;
    }

    .llm-context-list span {
      display: grid;
      grid-template-columns: 48px 1fr;
      align-items: center;
      min-height: 34px;
      padding: 0 10px;
      border-radius: 11px;
      color: #53617a;
      background: rgba(255, 255, 255, .72);
      font-size: 13px;
    }

    .llm-context-list b { color: var(--blue); }

    .llm-flow-arrow {
      position: relative;
      display: grid;
      place-items: center;
      color: #6485e5;
    }

    .llm-flow-arrow span {
      position: absolute;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(79, 112, 231, .18), transparent 70%);
      filter: blur(4px);
    }

    .llm-flow-arrow svg {
      position: relative;
      width: 54px;
      height: 28px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 4px 8px rgba(61, 91, 194, .24));
    }

    .llm-core-panel {
      position: relative;
      display: grid;
      place-items: center;
      align-content: center;
      height: 330px;
    }

    .llm-core-orbit {
      position: absolute;
      left: 50%;
      top: 47%;
      border: 1px solid rgba(86, 113, 220, .28);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .llm-core-orbit.o1 { width: 230px; height: 230px; border-style: dashed; }
    .llm-core-orbit.o2 { width: 252px; height: 150px; transform: translate(-50%, -50%) rotate(28deg); }
    .llm-core-orbit.o3 { width: 150px; height: 252px; transform: translate(-50%, -50%) rotate(58deg); }

    .llm-core-center {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 168px;
      height: 168px;
      border: 2px solid rgba(255, 255, 255, .9);
      border-radius: 50%;
      color: white;
      background:
        radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .82), transparent 18%),
        linear-gradient(145deg, #1267f2, #7148eb 62%, #1ca2cb);
      box-shadow:
        0 0 0 10px rgba(255, 255, 255, .72),
        0 0 0 12px rgba(74, 105, 214, .16),
        0 24px 48px rgba(54, 82, 188, .3),
        inset 0 1px 0 rgba(255, 255, 255, .5);
    }

    .llm-core-center span {
      color: rgba(255, 255, 255, .72);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .14em;
    }

    .llm-core-center strong {
      margin-top: -6px;
      font-size: 27px;
      line-height: 1;
    }

    .llm-core-center small {
      margin-top: -7px;
      color: rgba(255, 255, 255, .82);
      font-size: 12px;
    }

    .llm-core-panel > p {
      position: absolute;
      bottom: 6px;
      width: 92%;
      margin: 0;
      color: #4d5e7b;
      text-align: center;
      font-size: 13px;
      line-height: 1.4;
    }

    .token-probabilities {
      display: grid;
      gap: 8px;
    }

    .token-probabilities > div {
      display: grid;
      grid-template-columns: 55px 1fr 36px;
      align-items: center;
      gap: 8px;
      font-size: 12px;
    }

    .token-probabilities span { color: #40506b; font-weight: 750; }
    .token-probabilities strong { color: #364767; font-size: 11px; text-align: right; }

    .token-probabilities i {
      display: block;
      height: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: #e6ebf5;
    }

    .token-probabilities b {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--violet), #4b7af0);
      box-shadow: 0 0 10px rgba(117, 71, 237, .28);
    }

    .token-stream {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 16px;
      padding: 12px;
      border: 1px solid rgba(99, 78, 189, .13);
      border-radius: 15px;
      background: rgba(247, 244, 255, .78);
    }

    .token-stream span {
      padding: 5px 8px;
      border-radius: 8px;
      color: #4f5b75;
      background: white;
      box-shadow: 0 4px 10px rgba(45, 57, 98, .06);
      font-size: 12px;
      font-weight: 750;
    }

    .token-stream span.active {
      color: white;
      background: linear-gradient(135deg, var(--violet), #4c78ef);
      box-shadow: 0 6px 15px rgba(92, 74, 202, .24);
    }

    .llm-output-panel > small {
      display: block;
      margin-top: 12px;
      color: #a06d1b;
      font-size: 12px;
      font-weight: 800;
    }

    .generation-loop {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      height: 145px;
      padding: 10px 28px 24px;
    }

    .generation-loop > div {
      position: relative;
      display: grid;
      align-content: center;
      min-width: 0;
      padding: 15px 14px 14px 58px;
      border: 1px solid rgba(255, 255, 255, .88);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .68));
      box-shadow: 0 12px 28px rgba(31, 58, 117, .09), inset 0 1px 0 white;
    }

    .generation-loop > div::before {
      content: attr(data-no);
      position: absolute;
      left: 14px;
      top: 50%;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      transform: translateY(-50%);
      border-radius: 12px;
      color: white;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      box-shadow: 0 8px 18px rgba(43, 80, 190, .22);
      font-size: 10px;
      font-weight: 900;
    }

    .generation-loop > div:not(:last-child)::after {
      content: "";
      position: absolute;
      right: -11px;
      top: 50%;
      z-index: 3;
      width: 10px;
      height: 10px;
      border-top: 2px solid rgba(83, 104, 191, .48);
      border-right: 2px solid rgba(83, 104, 191, .48);
      transform: translateY(-50%) rotate(45deg);
    }

    .generation-loop strong {
      color: var(--ink);
      font-size: 18px;
      line-height: 1.1;
    }

    .generation-loop span {
      margin-top: 6px;
      overflow: hidden;
      color: #667590;
      font-size: 12px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .slide.active .llm-input-panel,
    .slide.active .llm-output-panel {
      animation: llm-panel-arrive .62s cubic-bezier(.22, .78, .28, 1) both;
    }

    .slide.active .llm-output-panel { animation-delay: .08s; }
    .slide.active .llm-core-panel { animation: llm-core-arrive .72s cubic-bezier(.22, .78, .28, 1) both; }

    @keyframes llm-panel-arrive {
      from { opacity: 0; transform: translate3d(0, 14px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes llm-core-arrive {
      from { opacity: 0; transform: scale(.9); }
      to { opacity: 1; transform: scale(1); }
    }

    .llm-principle-stage {
      position: relative;
      display: grid;
      grid-template-rows: 154px minmax(0, 1fr);
      gap: 16px;
      height: 590px;
      padding: 20px 22px 18px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(25, 176, 196, .28);
      border-radius: 36px;
      background:
        radial-gradient(circle at 8% -8%, rgba(40, 200, 226, .28), transparent 30%),
        radial-gradient(circle at 92% 108%, rgba(53, 199, 138, .22), transparent 35%),
        radial-gradient(circle at 72% 8%, rgba(244, 201, 74, .14), transparent 25%),
        linear-gradient(135deg, #effcff 0%, #f5fffb 48%, #fffdf3 100%);
      box-shadow: 0 28px 70px rgba(32, 111, 128, .15), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .llm-principle-stage::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 46%;
      top: -420px;
      width: 700px;
      height: 700px;
      border: 1px solid rgba(24, 188, 210, .14);
      border-radius: 50%;
      box-shadow: 0 0 0 84px rgba(40, 200, 226, .035), 0 0 0 168px rgba(53, 199, 138, .025);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .llm-token-definition,
    .llm-principle-flow {
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    .llm-token-definition {
      display: grid;
      grid-template-columns: .92fr 1.35fr;
      align-items: center;
      gap: 24px;
      padding: 17px 22px;
      overflow: hidden;
      border: 1px solid rgba(118, 231, 232, .38);
      border-radius: 24px;
      background:
        radial-gradient(circle at 86% 8%, rgba(255, 238, 139, .18), transparent 28%),
        linear-gradient(112deg, #0b829c 0%, #12758a 48%, #168875 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 32px rgba(20, 105, 123, .18);
    }

    .llm-token-copy {
      position: relative;
      padding-left: 17px;
    }

    .llm-token-copy::before {
      content: "";
      position: absolute;
      left: 0;
      top: 5px;
      bottom: 5px;
      width: 3px;
      border-radius: 99px;
      background: linear-gradient(180deg, #65eff0, #ffe36d);
      box-shadow: 0 0 16px rgba(101, 239, 240, .52);
    }

    .llm-token-copy > span,
    .llm-principle-head > span {
      display: block;
      color: #a9f5ee;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .17em;
    }

    .llm-token-copy h3 {
      margin: 5px 0 0;
      color: #ffffff;
      font-size: 25px;
      line-height: 1.08;
      letter-spacing: -.02em;
    }

    .llm-token-copy p {
      margin: 8px 0 0;
      color: rgba(239, 255, 255, .8);
      font-size: 14px;
      line-height: 1.45;
    }

    .llm-token-copy p strong { color: #fff4a8; }

    .llm-token-demo {
      display: grid;
      align-content: center;
      min-width: 0;
    }

    .llm-token-demo > small {
      color: rgba(232, 255, 255, .7);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .llm-token-pieces {
      display: grid;
      grid-template-columns: 1.05fr 1.25fr .68fr 1fr .55fr;
      gap: 8px;
      margin-top: 9px;
    }

    .llm-token-pieces span {
      display: grid;
      place-items: center;
      min-width: 0;
      height: 48px;
      border: 1px solid rgba(49, 176, 191, .2);
      border-radius: 14px;
      color: #14566a;
      background: linear-gradient(145deg, #e7fbff, #c9f3f7);
      box-shadow: 0 8px 18px rgba(5, 70, 86, .16), inset 0 1px 0 white;
      font-size: 18px;
      font-weight: 850;
    }

    .llm-token-pieces span:nth-child(2) { background: linear-gradient(145deg, #eafbf2, #cbf2dc); }
    .llm-token-pieces span:nth-child(3) { background: linear-gradient(145deg, #fffbdc, #f6e99c); }
    .llm-token-pieces span:nth-child(4) { background: linear-gradient(145deg, #fff1ed, #ffd8d0); }
    .llm-token-pieces span:nth-child(5) { background: linear-gradient(145deg, #eff6ff, #d8e8ff); }
    .llm-token-pieces span:last-child { color: #3473a4; }

    .llm-token-caption {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 9px;
      color: rgba(230, 255, 253, .76);
      font-size: 12px;
      font-weight: 700;
    }

    .llm-token-caption i {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(101, 239, 240, .15), rgba(101, 239, 240, .68), rgba(255, 227, 109, .72), rgba(112, 233, 175, .42));
    }

    .llm-token-caption strong { color: #fff4a8; }

    .llm-principle-flow {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) 68px;
      gap: 10px;
      padding: 14px 18px 15px;
      overflow: hidden;
      border: 1px solid rgba(43, 181, 196, .24);
      border-radius: 26px;
      background:
        radial-gradient(circle at 100% 0%, rgba(53, 199, 138, .13), transparent 29%),
        radial-gradient(circle at 0% 100%, rgba(40, 200, 226, .1), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(237, 252, 250, .97));
      box-shadow: inset 0 1px 0 white, 0 16px 36px rgba(24, 119, 135, .14);
    }

    .llm-principle-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      min-width: 0;
      padding: 0 4px;
    }

    .llm-principle-head > span { color: #078ba4; }

    .llm-principle-head h3 {
      margin: 4px 0 0;
      color: #164e63;
      font-size: 24px;
      line-height: 1.08;
      letter-spacing: -.02em;
    }

    .llm-principle-head p {
      max-width: 460px;
      margin: 0 3px 2px 0;
      color: #52727b;
      font-size: 14px;
      line-height: 1.4;
      text-align: right;
    }

    .llm-principle-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(31, 170, 190, .16);
      border-radius: 18px;
      background: rgba(255, 255, 255, .72);
      box-shadow: inset 0 1px 0 white;
    }

    .llm-principle-track::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 8%;
      right: 8%;
      top: 39px;
      height: 2px;
      background: linear-gradient(90deg, #20bfd5, #3dc991 48%, #f0c43f 74%, #ff8978);
      opacity: .58;
    }

    .llm-principle-track::after {
      content: "";
      position: absolute;
      z-index: 1;
      left: 8%;
      top: 37px;
      width: 108px;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .92), #56e4ec 38%, #ffe36d 70%, transparent);
      box-shadow: 0 0 16px rgba(42, 200, 218, .48);
      opacity: .94;
      transform: translate3d(-110px, 0, 0);
      pointer-events: none;
    }

    .llm-principle-step {
      position: relative;
      z-index: 2;
      display: grid;
      align-content: start;
      min-width: 0;
      padding: 64px 18px 13px;
      text-align: center;
    }

    .llm-principle-step:nth-child(1) {
      --step-color: #19bcd2;
      --step-rgb: 25, 188, 210;
      --step-bg: #e7fbff;
      --step-text: #0d778a;
    }

    .llm-principle-step:nth-child(2) {
      --step-color: #35c78a;
      --step-rgb: 53, 199, 138;
      --step-bg: #e7f9ef;
      --step-text: #18734f;
    }

    .llm-principle-step:nth-child(3) {
      --step-color: #e8b62f;
      --step-rgb: 232, 182, 47;
      --step-bg: #fff8d7;
      --step-text: #85610e;
    }

    .llm-principle-step:nth-child(4) {
      --step-color: #ff7f6e;
      --step-rgb: 255, 127, 110;
      --step-bg: #fff0ec;
      --step-text: #a64336;
    }

    .llm-principle-step:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 61px;
      bottom: 14px;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(31, 157, 175, .15) 24%, rgba(31, 157, 175, .15) 76%, transparent);
    }

    .llm-principle-step > b {
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 17px;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 2px solid rgba(var(--step-rgb), .42);
      border-radius: 50%;
      color: var(--step-text);
      background: var(--step-bg);
      box-shadow: 0 8px 16px rgba(var(--step-rgb), .13), inset 0 1px 0 white;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .05em;
    }

    .llm-principle-step h4 {
      margin: 0;
      color: #164e63;
      font-size: 19px;
      line-height: 1.08;
    }

    .llm-principle-step p {
      margin: 6px 0 0;
      color: #5b7880;
      font-size: 13px;
      line-height: 1.35;
    }

    .llm-step-example {
      display: block;
      margin-top: 9px;
      overflow: hidden;
      color: #226477;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .llm-generation-summary {
      display: flex;
      align-items: center;
      min-width: 0;
      padding: 0 22px;
      overflow: hidden;
      border: 1px solid rgba(76, 219, 216, .26);
      border-radius: 14px;
      background: linear-gradient(90deg, #0e7188, #16866e);
      box-shadow: 0 8px 18px rgba(17, 105, 119, .16), inset 0 1px 0 rgba(255, 255, 255, .16);
    }

    .llm-generation-summary span {
      flex: 0 0 auto;
      padding-right: 20px;
      color: #c9fbff;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .16em;
    }

    .llm-generation-summary strong {
      min-width: 0;
      padding-left: 20px;
      overflow: hidden;
      border-left: 1px solid rgba(205, 255, 245, .3);
      color: #ffffff;
      font-size: 21px;
      font-weight: 850;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .slide.active .llm-principle-stage {
      animation: llm-principle-arrive .62s cubic-bezier(.22, .78, .28, 1) both;
    }

    .slide.active .llm-principle-track::after {
      animation: llm-principle-sweep 8s linear infinite;
    }

    .slide.active .llm-principle-step > b {
      animation: llm-principle-focus 8s ease-in-out infinite;
      animation-delay: var(--step-delay, 0s);
    }

    @keyframes llm-principle-arrive {
      from { opacity: 0; transform: translate3d(0, 12px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes llm-principle-sweep {
      0% { transform: translate3d(-110px, 0, 0); }
      100% { transform: translate3d(1110px, 0, 0); }
    }

    @keyframes llm-principle-focus {
      0%, 19% {
        border-color: var(--step-color);
        color: white;
        background: var(--step-color);
        box-shadow: 0 0 0 6px rgba(var(--step-rgb), .14), 0 0 22px rgba(var(--step-rgb), .38);
      }
      25%, 100% {
        border-color: rgba(var(--step-rgb), .42);
        color: var(--step-text);
        background: var(--step-bg);
        box-shadow: 0 8px 16px rgba(var(--step-rgb), .13), inset 0 1px 0 white;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .llm-principle-stage,
      .slide.active .llm-principle-track::after,
      .slide.active .llm-principle-step > b { animation: none !important; }
    }

    .slide[data-title^="现场体验：在 DeepSeek"] .slide-head h2 {
      font-size: 45px;
      letter-spacing: -.04em;
    }

    .deepseek-demo-stage {
      position: relative;
      display: grid;
      grid-template-columns: 490px 1fr;
      gap: 28px;
      height: 580px;
      padding: 0 28px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(65, 103, 193, .2);
      border-radius: 40px;
      background:
        radial-gradient(circle at 16% 42%, rgba(45, 108, 247, .28), transparent 28%),
        radial-gradient(circle at 69% 0%, rgba(117, 71, 237, .2), transparent 30%),
        radial-gradient(circle at 98% 84%, rgba(33, 168, 207, .2), transparent 26%),
        linear-gradient(135deg, #f9fbff, #edf3ff 48%, #f8f3ff 76%, #eefaff);
      box-shadow: inset 0 1px 0 white, 0 24px 68px rgba(31, 64, 132, .11);
    }

    .deepseek-demo-stage::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: -80px;
      top: 47%;
      width: 760px;
      height: 190px;
      border-radius: 50%;
      background: linear-gradient(90deg, rgba(47, 130, 255, .34), rgba(117, 71, 237, .3), rgba(33, 168, 207, .24));
      filter: blur(42px);
      transform: rotate(-14deg);
    }

    .deepseek-demo-stage::after {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(15, 86, 232, .24) 0 1.1px, transparent 1.5px),
        radial-gradient(circle, rgba(117, 71, 237, .16) 0 1px, transparent 1.4px);
      background-position: 0 0, 21px 17px;
      background-size: 47px 47px, 73px 73px;
      opacity: .48;
      -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .88), transparent 85%);
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, .88), transparent 85%);
    }

    .deepseek-phone-zone {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      min-width: 0;
    }

    .deepseek-phone-halo {
      position: absolute;
      left: 50%;
      top: 51%;
      width: 430px;
      height: 430px;
      border: 1px solid rgba(77, 109, 215, .2);
      border-radius: 50%;
      box-shadow:
        0 0 0 42px rgba(83, 118, 229, .045),
        0 0 0 84px rgba(117, 71, 237, .026),
        0 0 82px rgba(56, 101, 226, .18);
      transform: translate(-50%, -50%);
    }

    .iphone-shell {
      position: relative;
      z-index: 3;
      width: 300px;
      height: 566px;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 60px;
      background:
        linear-gradient(118deg, #e8ebf1 0%, #777d89 5%, #15191f 12%, #3f4651 48%, #0a0d12 86%, #cfd4dd 96%, #f6f7fa 100%);
      box-shadow:
        0 30px 64px rgba(23, 40, 84, .3),
        0 12px 24px rgba(31, 58, 120, .16),
        inset 0 1px 0 rgba(255, 255, 255, .92);
    }

    .iphone-shell::before {
      content: "";
      position: absolute;
      z-index: 5;
      left: 20px;
      top: 18px;
      bottom: 24px;
      width: 2px;
      border-radius: 50%;
      background: linear-gradient(180deg, rgba(255, 255, 255, .75), transparent 38%, transparent 68%, rgba(255, 255, 255, .2));
      opacity: .6;
      pointer-events: none;
    }

    .iphone-bezel {
      position: relative;
      width: 100%;
      height: 100%;
      --deepseek-screen-radius: 43px;
      padding: 6px;
      overflow: hidden;
      border-radius: 51px;
      background: #05070a;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
    }

    .dynamic-island {
      position: absolute;
      z-index: 6;
      left: 50%;
      top: 14px;
      width: 96px;
      height: 26px;
      border-radius: 999px;
      background: #030405;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 2px 5px rgba(0, 0, 0, .28);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .dynamic-island::after {
      content: "";
      position: absolute;
      right: 9px;
      top: 8px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #2e5474, #05070a 62%);
    }

    .deepseek-chat-surface {
      position: relative;
      display: grid;
      grid-template-rows: 86px minmax(0, 1fr) 106px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow: clip;
      border-radius: var(--deepseek-screen-radius);
      clip-path: inset(0 round var(--deepseek-screen-radius));
      color: #15233d;
      background:
        radial-gradient(circle at 82% 6%, rgba(67, 112, 255, .08), transparent 24%),
        linear-gradient(180deg, #fbfdff, #f6f9ff 62%, #f2f6fd);
      background-clip: padding-box;
      contain: paint;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      isolation: isolate;
    }

    .deepseek-chat-surface::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 48px 0 106px;
      background:
        radial-gradient(circle at 18% 22%, rgba(69, 111, 255, .08), transparent 22%),
        linear-gradient(rgba(224, 232, 249, .18) 1px, transparent 1px);
      background-size: auto, 100% 28px;
      pointer-events: none;
    }

    .deepseek-sim-header {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) 32px;
      align-items: end;
      gap: 5px;
      padding: 43px 9px 5px;
      border-radius: var(--deepseek-screen-radius) var(--deepseek-screen-radius) 0 0;
      border-bottom: 1px solid rgba(61, 89, 153, .1);
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 4px 15px rgba(38, 63, 120, .045);
    }

    .deepseek-sim-menu,
    .deepseek-sim-replay {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(70, 96, 151, .12);
      border-radius: 10px;
      color: #5b6b86;
      background: rgba(247, 250, 255, .88);
    }

    .deepseek-sim-menu svg,
    .deepseek-sim-replay svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .deepseek-sim-replay {
      padding: 0;
      cursor: pointer;
      transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .deepseek-sim-replay:hover {
      color: #2f67e7;
      border-color: rgba(47, 103, 231, .3);
      background: #eef4ff;
      box-shadow: 0 6px 14px rgba(42, 91, 199, .12);
    }

    .deepseek-sim-replay:focus-visible {
      outline: 3px solid rgba(47, 103, 231, .32);
      outline-offset: 1px;
    }

    .deepseek-sim-brand {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 0;
    }

    .deepseek-sim-brand img {
      width: 18px;
      height: 18px;
      object-fit: contain;
    }

    .deepseek-sim-brand span {
      display: grid;
      min-width: 0;
      line-height: 1.05;
    }

    .deepseek-sim-brand strong {
      color: #18305b;
      font-size: 12px;
      font-weight: 880;
      letter-spacing: -.015em;
    }

    .deepseek-sim-brand small {
      margin-top: 3px;
      color: #8290a8;
      font-size: 7px;
      font-weight: 720;
      letter-spacing: .05em;
    }

    .deepseek-sim-conversation {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding: 14px 12px 10px;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: none;
      scroll-behavior: smooth;
    }

    .deepseek-sim-conversation::-webkit-scrollbar { display: none; }

    .deepseek-sim-empty {
      position: absolute;
      left: 18px;
      right: 18px;
      top: 50%;
      display: grid;
      justify-items: center;
      color: #66758f;
      text-align: center;
      transform: translateY(-54%);
      transition: opacity .26s ease, transform .34s cubic-bezier(.22, .78, .28, 1);
    }

    .deepseek-sim-empty-logo {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin-bottom: 9px;
      border: 1px solid rgba(63, 104, 232, .16);
      border-radius: 15px;
      background: linear-gradient(145deg, #ffffff, #eaf1ff);
      box-shadow: 0 13px 28px rgba(46, 91, 198, .13), inset 0 1px 0 white;
    }

    .deepseek-sim-empty-logo img {
      width: 27px;
      height: 27px;
      object-fit: contain;
    }

    .deepseek-sim-empty strong {
      color: #263b60;
      font-size: 13px;
      font-weight: 850;
      letter-spacing: -.015em;
    }

    .deepseek-sim-empty span {
      max-width: 185px;
      margin-top: 6px;
      font-size: 9px;
      font-weight: 650;
      line-height: 1.5;
    }

    .deepseek-chat-surface.has-question .deepseek-sim-empty {
      opacity: 0;
      transform: translateY(-58%) scale(.96);
      pointer-events: none;
    }

    .deepseek-sim-user-row {
      display: flex;
      justify-content: flex-end;
      flex: 0 0 auto;
      margin: 1px 0 11px 36px;
      opacity: 0;
      transform: translate3d(0, 8px, 0) scale(.98);
      transition: opacity .28s ease, transform .36s cubic-bezier(.22, .78, .28, 1);
    }

    .deepseek-chat-surface.has-question .deepseek-sim-user-row {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    .deepseek-sim-user-bubble {
      max-width: 198px;
      padding: 10px 12px;
      border: 1px solid rgba(49, 96, 214, .11);
      border-radius: 16px 16px 5px 16px;
      color: #17345e;
      background: linear-gradient(145deg, #edf4ff, #e4edff);
      box-shadow: 0 8px 18px rgba(48, 86, 176, .08), inset 0 1px 0 rgba(255, 255, 255, .86);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.48;
    }

    .deepseek-sim-assistant-row {
      display: grid;
      grid-template-columns: 25px minmax(0, 1fr);
      align-items: start;
      gap: 8px;
      flex: 0 0 auto;
      opacity: 0;
      transform: translate3d(0, 9px, 0);
      transition: opacity .28s ease, transform .38s cubic-bezier(.22, .78, .28, 1);
    }

    .deepseek-chat-surface.has-thinking .deepseek-sim-assistant-row {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .deepseek-sim-avatar {
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      border: 1px solid rgba(57, 102, 229, .16);
      border-radius: 8px;
      background: linear-gradient(145deg, white, #e9f0ff);
      box-shadow: 0 6px 14px rgba(45, 88, 190, .11);
    }

    .deepseek-sim-avatar img {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }

    .deepseek-sim-assistant-content { min-width: 0; }

    .deepseek-sim-thinking {
      position: relative;
      padding: 8px 9px 8px 10px;
      overflow: hidden;
      border: 1px solid rgba(87, 111, 165, .12);
      border-radius: 12px;
      color: #65738a;
      background: rgba(247, 249, 253, .9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .deepseek-sim-thinking::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, #4e75ea, #56b9db);
      opacity: .7;
    }

    .deepseek-sim-thinking-head {
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 15px;
      font-size: 9px;
      font-weight: 820;
      letter-spacing: .015em;
    }

    .deepseek-sim-thinking-orbit {
      position: relative;
      width: 12px;
      height: 12px;
      border: 1.5px solid rgba(55, 101, 224, .2);
      border-top-color: #3765e0;
      border-radius: 50%;
    }

    .deepseek-chat-surface.has-thinking:not(.thought-complete) .deepseek-sim-thinking-orbit {
      animation: deepseek-sim-spin .82s linear infinite;
    }

    .deepseek-chat-surface.thought-complete .deepseek-sim-thinking-orbit {
      border-color: #4e9e88;
      background: radial-gradient(circle, #4e9e88 0 2px, transparent 2.5px);
    }

    .deepseek-sim-reasoning {
      max-height: 0;
      margin-top: 0;
      overflow: hidden;
      opacity: 0;
      color: #718098;
      font-size: 9px;
      font-weight: 650;
      line-height: 1.48;
      transition: max-height .34s ease, margin-top .28s ease, opacity .28s ease;
    }

    .deepseek-chat-surface.has-reasoning .deepseek-sim-reasoning {
      max-height: 58px;
      margin-top: 5px;
      opacity: 1;
    }

    .deepseek-sim-answer {
      margin-top: 8px;
      padding: 1px 2px 2px;
      opacity: 0;
      color: #1c2f4c;
      transform: translate3d(0, 5px, 0);
      transition: opacity .26s ease, transform .32s ease;
    }

    .deepseek-chat-surface.is-answering .deepseek-sim-answer,
    .deepseek-chat-surface.is-complete .deepseek-sim-answer {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .deepseek-sim-answer p {
      display: inline;
      margin: 0;
      white-space: pre-line;
      font-size: 11px;
      font-weight: 670;
      line-height: 1.62;
      letter-spacing: .002em;
    }

    .deepseek-sim-stream-caret {
      display: none;
      width: 2px;
      height: 12px;
      margin-left: 2px;
      border-radius: 1px;
      vertical-align: -2px;
      background: #3d6bec;
      box-shadow: 0 0 8px rgba(61, 107, 236, .34);
    }

    .deepseek-chat-surface.is-answering .deepseek-sim-stream-caret {
      display: inline-block;
      animation: deepseek-sim-caret .72s steps(1, end) infinite;
    }

    .deepseek-sim-answer-actions {
      display: flex;
      align-items: center;
      gap: 7px;
      height: 0;
      margin-top: 0;
      overflow: hidden;
      opacity: 0;
      transition: height .24s ease, margin-top .24s ease, opacity .24s ease;
    }

    .deepseek-chat-surface.is-complete .deepseek-sim-answer-actions {
      height: 19px;
      margin-top: 5px;
      opacity: 1;
    }

    .deepseek-sim-answer-actions span {
      display: grid;
      place-items: center;
      width: 19px;
      height: 19px;
      border-radius: 6px;
      color: #718099;
      background: rgba(239, 244, 252, .8);
    }

    .deepseek-sim-answer-actions svg {
      width: 11px;
      height: 11px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .deepseek-sim-composer {
      position: relative;
      z-index: 5;
      padding: 8px 10px 7px;
      border-radius: 0 0 var(--deepseek-screen-radius) var(--deepseek-screen-radius);
      border-top: 1px solid rgba(62, 91, 153, .1);
      background: linear-gradient(180deg, #f9fbff, #ffffff);
      box-shadow: 0 -7px 18px rgba(34, 58, 109, .04);
    }

    .deepseek-sim-input-shell {
      display: grid;
      grid-template-rows: minmax(29px, auto) 31px;
      padding: 5px 6px 4px 9px;
      border: 1px solid rgba(74, 98, 154, .16);
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 8px 20px rgba(38, 63, 119, .07), inset 0 1px 0 white;
      transition: border-color .24s ease, box-shadow .24s ease;
    }

    .deepseek-chat-surface.is-typing .deepseek-sim-input-shell {
      border-color: rgba(48, 100, 231, .42);
      box-shadow: 0 9px 22px rgba(46, 91, 198, .1), 0 0 0 3px rgba(49, 103, 235, .07), inset 0 1px 0 white;
    }

    .deepseek-sim-input-line {
      display: flex;
      align-items: center;
      min-width: 0;
      padding-right: 3px;
      color: #253b5e;
      font-size: 11px;
      font-weight: 680;
      line-height: 1.35;
    }

    .deepseek-sim-input-text:empty::before {
      content: "给 DeepSeek 发送消息";
      color: #a2adbd;
      font-weight: 600;
    }

    .deepseek-sim-input-caret {
      display: none;
      width: 1.5px;
      height: 14px;
      margin-left: 1px;
      background: #3767e8;
    }

    .deepseek-chat-surface.is-typing .deepseek-sim-input-caret {
      display: inline-block;
      animation: deepseek-sim-caret .7s steps(1, end) infinite;
    }

    .deepseek-sim-input-tools {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
    }

    .deepseek-sim-plus,
    .deepseek-sim-send {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 27px;
      height: 27px;
      border-radius: 9px;
    }

    .deepseek-sim-plus {
      color: #64738b;
      background: #f3f6fb;
    }

    .deepseek-sim-tool {
      display: flex;
      align-items: center;
      gap: 3px;
      height: 25px;
      padding: 0 6px;
      border: 1px solid rgba(62, 102, 213, .18);
      border-radius: 9px;
      color: #3c64c4;
      background: #f3f7ff;
      font-size: 7px;
      font-weight: 800;
      white-space: nowrap;
    }

    .deepseek-sim-tool.secondary {
      color: #66758e;
      border-color: rgba(92, 111, 151, .14);
      background: #f7f9fc;
    }

    .deepseek-sim-plus svg,
    .deepseek-sim-send svg,
    .deepseek-sim-tool svg {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .deepseek-sim-send {
      margin-left: auto;
      color: white;
      padding: 0;
      border: 0;
      background: linear-gradient(145deg, #3f73f1, #315edc);
      box-shadow: 0 7px 15px rgba(47, 96, 221, .24), inset 0 1px 0 rgba(255, 255, 255, .35);
      font: inherit;
      cursor: pointer;
      transition: background .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease;
    }

    .deepseek-sim-send:hover:not(:disabled) {
      background: linear-gradient(145deg, #4b7dfa, #2855d5);
      box-shadow: 0 9px 19px rgba(47, 96, 221, .32), inset 0 1px 0 rgba(255, 255, 255, .4);
      transform: translateY(-1px);
    }

    .deepseek-sim-send:focus-visible {
      outline: 3px solid rgba(47, 103, 231, .3);
      outline-offset: 2px;
    }

    .deepseek-sim-send:disabled {
      color: rgba(255, 255, 255, .92);
      background: #b9c3d4;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
      cursor: default;
      opacity: .78;
    }

    .deepseek-chat-surface.is-sending .deepseek-sim-send {
      background: linear-gradient(145deg, #3f73f1, #315edc);
      box-shadow: 0 7px 15px rgba(47, 96, 221, .24), inset 0 1px 0 rgba(255, 255, 255, .35);
      opacity: 1;
      animation: deepseek-sim-send .34s cubic-bezier(.2, .82, .3, 1) both;
    }

    .deepseek-sim-disclaimer {
      margin: 5px 0 0;
      color: #a0abba;
      font-size: 6.5px;
      font-weight: 650;
      text-align: center;
      letter-spacing: .02em;
    }

    @keyframes deepseek-sim-spin {
      to { transform: rotate(360deg); }
    }

    @keyframes deepseek-sim-caret {
      0%, 46% { opacity: 1; }
      47%, 100% { opacity: 0; }
    }

    @keyframes deepseek-sim-send {
      0% { transform: scale(1); }
      45% { transform: scale(.82) rotate(-8deg); }
      100% { transform: scale(1) rotate(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .deepseek-sim-empty,
      .deepseek-sim-user-row,
      .deepseek-sim-assistant-row,
      .deepseek-sim-reasoning,
      .deepseek-sim-answer,
      .deepseek-sim-answer-actions,
      .deepseek-sim-input-shell,
      .deepseek-sim-send,
      .deepseek-sim-thinking-orbit,
      .deepseek-sim-input-caret,
      .deepseek-sim-stream-caret { animation: none !important; transition: none !important; }
    }

    .iphone-button {
      position: absolute;
      z-index: 1;
      width: 4px;
      border-radius: 3px 0 0 3px;
      background: linear-gradient(180deg, #5e6470, #181c22 40%, #5e6470);
      box-shadow: -2px 0 4px rgba(15, 23, 38, .22);
    }

    .iphone-button.silent { left: -4px; top: 104px; height: 32px; }
    .iphone-button.volume-up { left: -4px; top: 159px; height: 56px; }
    .iphone-button.volume-down { left: -4px; top: 230px; height: 56px; }
    .iphone-button.power { right: -4px; top: 174px; height: 87px; border-radius: 0 3px 3px 0; }

    .deepseek-demo-copy {
      position: relative;
      z-index: 2;
      display: grid;
      align-content: center;
      min-width: 0;
      padding: 18px 46px 18px 4px;
    }

    .deepseek-kicker {
      margin: 0 0 10px;
      color: var(--blue);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .17em;
    }

    .deepseek-demo-copy h3 {
      max-width: 820px;
      margin: 0;
      color: var(--ink);
      font-size: 39px;
      line-height: 1.16;
      letter-spacing: -.035em;
    }

    .deepseek-demo-copy h3 span {
      color: transparent;
      background: linear-gradient(90deg, var(--blue), var(--violet), var(--cyan));
      -webkit-background-clip: text;
      background-clip: text;
    }

    .deepseek-intro {
      max-width: 790px;
      margin: 11px 0 14px;
      color: #4a5e7d;
      font-size: 17px;
      line-height: 1.55;
    }

    .deepseek-live-question {
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr);
      align-items: center;
      max-width: 820px;
      min-height: 54px;
      margin-bottom: 13px;
      padding: 8px 16px;
      border: 1px solid rgba(62, 101, 205, .18);
      border-radius: 17px;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 12px 28px rgba(31, 58, 117, .08), inset 0 1px 0 white;
    }

    .deepseek-live-question span {
      color: var(--blue);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .14em;
    }

    .deepseek-live-question strong {
      color: #17345e;
      font-size: 22px;
      line-height: 1.3;
      letter-spacing: -.015em;
    }

    .deepseek-prediction-card {
      position: relative;
      max-width: 820px;
      padding: 17px 20px 18px;
      overflow: hidden;
      border: 1px solid rgba(67, 101, 191, .18);
      border-radius: 25px;
      background:
        radial-gradient(circle at 77% 0%, rgba(97, 80, 227, .12), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(240, 247, 255, .85));
      box-shadow: 0 18px 40px rgba(31, 58, 117, .11), inset 0 1px 0 white;
    }

    .deepseek-prediction-card::before {
      content: "";
      position: absolute;
      z-index: 0;
      top: -60%;
      bottom: -60%;
      width: 150px;
      background: linear-gradient(90deg, transparent, rgba(81, 133, 255, .13), transparent);
      filter: blur(7px);
      transform: translateX(-210px) rotate(13deg);
      pointer-events: none;
    }

    .deepseek-prediction-card > * {
      position: relative;
      z-index: 1;
    }

    .deepseek-context-line {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding-bottom: 13px;
      border-bottom: 1px solid rgba(80, 108, 173, .13);
    }

    .deepseek-context-line span,
    .deepseek-candidate-head span,
    .deepseek-output-head span {
      color: #6d7d97;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
    }

    .deepseek-context-line strong {
      color: #243a5c;
      font-size: 17px;
      line-height: 1.35;
    }

    .deepseek-context-line em {
      color: #7b52e8;
      font-style: normal;
    }

    .deepseek-candidate-zone {
      margin-top: 13px;
    }

    .deepseek-candidate-head,
    .deepseek-output-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .deepseek-candidate-head small,
    .deepseek-output-head small {
      color: #8090a8;
      font-size: 10px;
      font-weight: 750;
    }

    .deepseek-candidates {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-top: 9px;
    }

    .deepseek-candidates span {
      display: grid;
      place-items: center;
      min-width: 91px;
      height: 35px;
      padding: 0 15px;
      border: 1px solid rgba(80, 107, 174, .15);
      border-radius: 12px;
      color: #60708a;
      background: rgba(255, 255, 255, .82);
      font-size: 14px;
      font-weight: 820;
    }

    .deepseek-candidates span.selected {
      border-color: rgba(73, 103, 230, .5);
      color: white;
      background: linear-gradient(105deg, #2f67e7, #7152ea 68%, #1597b7);
      box-shadow: 0 9px 22px rgba(57, 85, 197, .25), inset 0 1px 0 rgba(255, 255, 255, .35);
    }

    .deepseek-output-zone {
      margin-top: 14px;
      padding-top: 13px;
      border-top: 1px solid rgba(80, 108, 173, .13);
    }

    .deepseek-token-stream {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 9px;
    }

    .deepseek-token-stream span {
      display: grid;
      place-items: center;
      min-width: 48px;
      height: 34px;
      padding: 0 11px;
      border: 1px solid rgba(67, 101, 191, .16);
      border-radius: 11px;
      color: #29415f;
      background: rgba(255, 255, 255, .86);
      box-shadow: inset 0 1px 0 white;
      font-size: 14px;
      font-weight: 850;
    }

    .deepseek-token-stream span:nth-child(4) {
      color: #6847dc;
      border-color: rgba(104, 71, 220, .35);
      background: rgba(241, 237, 255, .94);
    }

    .deepseek-prediction-loop {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 820px;
      margin-top: 12px;
      padding: 11px 15px;
      border: 1px solid rgba(28, 151, 183, .22);
      border-radius: 16px;
      color: #3f5875;
      background: linear-gradient(90deg, rgba(234, 249, 250, .84), rgba(239, 245, 255, .86));
      font-size: 14px;
      font-weight: 760;
      line-height: 1.4;
    }

    .deepseek-prediction-loop svg {
      flex: 0 0 auto;
      width: 24px;
      height: 24px;
      fill: none;
      stroke: #138eaa;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .deepseek-prediction-loop strong {
      color: #17345e;
    }

    .slide.active .deepseek-prediction-card::before {
      animation: deepseek-prediction-scan 6.8s ease-in-out infinite;
    }

    .slide.active .deepseek-candidates span.selected {
      animation: deepseek-candidate-pulse 3.2s ease-in-out infinite;
    }

    .slide.active .deepseek-token-stream span {
      animation: deepseek-token-pulse 6.8s ease-in-out infinite;
      animation-delay: var(--token-delay, 0s);
    }

    @keyframes deepseek-prediction-scan {
      0%, 12% { transform: translateX(-210px) rotate(13deg); opacity: 0; }
      22% { opacity: 1; }
      72%, 100% { transform: translateX(900px) rotate(13deg); opacity: 0; }
    }

    @keyframes deepseek-candidate-pulse {
      0%, 100% { box-shadow: 0 9px 22px rgba(57, 85, 197, .22), inset 0 1px 0 rgba(255, 255, 255, .35); }
      50% { box-shadow: 0 10px 28px rgba(65, 95, 232, .42), 0 0 0 5px rgba(78, 113, 235, .09), inset 0 1px 0 rgba(255, 255, 255, .42); }
    }

    @keyframes deepseek-token-pulse {
      0%, 14%, 100% { color: #29415f; border-color: rgba(67, 101, 191, .16); background: rgba(255, 255, 255, .86); transform: translateY(0); }
      7% { color: #1d5fd6; border-color: rgba(45, 102, 224, .42); background: #eef5ff; transform: translateY(-3px); box-shadow: 0 9px 18px rgba(40, 92, 201, .15); }
    }

    .slide.active .iphone-shell {
      animation: iphone-arrive .72s cubic-bezier(.22, .78, .28, 1) both;
    }

    .slide.active .deepseek-demo-copy {
      animation: deepseek-copy-arrive .64s cubic-bezier(.22, .78, .28, 1) .08s both;
    }

    @keyframes iphone-arrive {
      from { opacity: 0; transform: translate3d(-20px, 12px, 0) rotate(-2deg); }
      to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
    }

    @keyframes deepseek-copy-arrive {
      from { opacity: 0; transform: translate3d(18px, 0, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .model-definition,
      .slide.active .model-constellation,
      .slide.active .llm-input-panel,
      .slide.active .llm-output-panel,
      .slide.active .llm-core-panel,
      .slide.active .iphone-shell,
      .slide.active .deepseek-demo-copy,
      .slide.active .deepseek-prediction-card::before,
      .slide.active .deepseek-candidates span.selected,
      .slide.active .deepseek-token-stream span { animation: none !important; }
    }

    .multimodal-showcase {
      position: relative;
      display: grid;
      grid-template-columns: 430px minmax(0, 1fr);
      height: 520px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(73, 156, 221, .3);
      border-radius: 38px;
      color: white;
      background: #06152a;
      box-shadow: 0 28px 70px rgba(18, 48, 96, .2), inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .multimodal-showcase::before {
      content: "";
      position: absolute;
      z-index: 4;
      left: 430px;
      top: 0;
      bottom: 0;
      width: 96px;
      background: linear-gradient(90deg, #07172d 0%, rgba(7, 23, 45, .92) 28%, transparent 100%);
      pointer-events: none;
    }

    .multimodal-copy {
      position: relative;
      z-index: 5;
      min-width: 0;
      padding: 30px 28px 27px 31px;
      overflow: hidden;
      background:
        radial-gradient(circle at 4% 2%, rgba(65, 205, 236, .19), transparent 29%),
        radial-gradient(circle at 95% 96%, rgba(74, 226, 164, .12), transparent 31%),
        linear-gradient(145deg, #081b34, #061326 72%);
      box-shadow: inset -1px 0 0 rgba(111, 216, 238, .16);
    }

    .multimodal-copy::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background-image:
        linear-gradient(rgba(106, 205, 230, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106, 205, 230, .055) 1px, transparent 1px);
      background-size: 34px 34px;
      -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, .82), transparent 76%);
      mask-image: linear-gradient(135deg, rgba(0, 0, 0, .82), transparent 76%);
    }

    .multimodal-kicker {
      margin: 0 0 9px;
      color: #73e9f5;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .18em;
    }

    .multimodal-copy h3 {
      margin: 0;
      color: white;
      font-size: 34px;
      line-height: 1.15;
      letter-spacing: -.035em;
    }

    .multimodal-copy h3 span {
      color: transparent;
      background: linear-gradient(90deg, #63e7f4, #72edae 72%, #ffe08a);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .multimodal-intro {
      margin: 12px 0 0;
      color: rgba(220, 239, 249, .72);
      font-size: 14px;
      line-height: 1.52;
    }

    .multimodal-signals {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      margin-top: 18px;
    }

    .multimodal-signal {
      --signal: #5ddff2;
      --signal-rgb: 93, 223, 242;
      position: relative;
      display: grid;
      grid-template-columns: 34px 1fr;
      grid-template-rows: auto auto;
      align-items: center;
      min-width: 0;
      min-height: 57px;
      padding: 7px 9px 7px 8px;
      overflow: hidden;
      border: 1px solid rgba(var(--signal-rgb), .25);
      border-radius: 15px;
      background: linear-gradient(125deg, rgba(var(--signal-rgb), .13), rgba(255, 255, 255, .035));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(1, 10, 25, .14);
    }

    .multimodal-signal:nth-child(1) { --signal-delay: -3s; }
    .multimodal-signal:nth-child(2) { --signal: #75a9ff; --signal-rgb: 117, 169, 255; --signal-delay: -2.45s; }
    .multimodal-signal:nth-child(3) { --signal: #70e8b1; --signal-rgb: 112, 232, 177; --signal-delay: -1.9s; }
    .multimodal-signal:nth-child(4) { --signal: #ff91b4; --signal-rgb: 255, 145, 180; --signal-delay: -1.35s; }
    .multimodal-signal:nth-child(5) { --signal: #ffe08a; --signal-rgb: 255, 224, 138; --signal-delay: -.8s; }
    .multimodal-signal:nth-child(6) { --signal: #aa98ff; --signal-rgb: 170, 152, 255; --signal-delay: -.25s; }

    .multimodal-signal::before {
      content: "";
      position: absolute;
      left: 0;
      top: 10px;
      bottom: 10px;
      width: 2px;
      border-radius: 99px;
      background: var(--signal);
      box-shadow: 0 0 10px rgba(var(--signal-rgb), .58);
    }

    .multimodal-signal i {
      grid-row: 1 / 3;
      display: grid;
      place-items: center;
      width: 29px;
      height: 29px;
      border-radius: 10px;
      color: var(--signal);
      background: rgba(var(--signal-rgb), .11);
    }

    .multimodal-signal svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .multimodal-signal b {
      color: #f7fdff;
      font-size: 15px;
      line-height: 1.08;
    }

    .multimodal-signal small {
      margin-top: 3px;
      overflow: hidden;
      color: rgba(208, 230, 241, .62);
      font-size: 10px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .multimodal-flow {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto 1fr auto;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      margin-top: 17px;
      padding: 0 12px;
      overflow: hidden;
      border: 1px solid rgba(94, 220, 224, .2);
      border-radius: 13px;
      color: rgba(224, 244, 250, .72);
      background: rgba(8, 34, 58, .72);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .03em;
    }

    .multimodal-flow i {
      height: 1px;
      background: linear-gradient(90deg, rgba(91, 226, 240, .22), rgba(91, 226, 240, .78), rgba(118, 236, 177, .35));
    }

    .multimodal-flow strong {
      color: #9cf3c5;
      font-size: 11px;
    }

    .multimodal-flow::after {
      content: "";
      position: absolute;
      left: -30%;
      top: 0;
      bottom: 0;
      width: 26%;
      background: linear-gradient(90deg, transparent, rgba(109, 241, 238, .18), transparent);
      transform: skewX(-18deg);
      pointer-events: none;
    }

    .multimodal-visual {
      position: relative;
      min-width: 0;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #07172b;
    }

    .multimodal-visual > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.01);
      transform-origin: center;
    }

    .multimodal-visual::before {
      content: "";
      position: absolute;
      z-index: 2;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(5, 18, 37, .56), transparent 25%),
        linear-gradient(180deg, rgba(3, 12, 26, .18), transparent 24%, transparent 70%, rgba(3, 12, 26, .34));
      pointer-events: none;
    }

    .multimodal-visual::after {
      content: "";
      position: absolute;
      z-index: 3;
      left: -35%;
      top: -15%;
      width: 24%;
      height: 130%;
      opacity: .38;
      background: linear-gradient(90deg, transparent, rgba(122, 238, 255, .38), transparent);
      filter: blur(8px);
      transform: skewX(-18deg);
      pointer-events: none;
    }

    .multimodal-energy-network {
      position: absolute;
      z-index: 4;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .multimodal-energy-path {
      fill: none;
      stroke: rgba(255, 255, 255, .2);
      stroke-width: 1.1;
      stroke-linecap: round;
      stroke-dasharray: 1 8;
      vector-effect: non-scaling-stroke;
    }

    .multimodal-energy-particles {
      opacity: 0;
      transition: opacity .24s ease;
    }

    .multimodal-energy-network.is-running .multimodal-energy-particles,
    .multimodal-energy-network.is-static .multimodal-energy-particles {
      opacity: 1;
    }

    .multimodal-energy-particle {
      will-change: transform, opacity;
    }

    .multimodal-energy-particle .particle-trail {
      fill: url(#multimodalEnergyTrail);
      opacity: .72;
    }

    .multimodal-energy-particle .particle-halo {
      fill: rgba(255, 255, 255, .22);
    }

    .multimodal-energy-particle .particle-core {
      fill: #fff;
      stroke: rgba(255, 255, 255, .95);
      stroke-width: .7;
      vector-effect: non-scaling-stroke;
    }

    .multimodal-fusion-marker {
      position: absolute;
      z-index: 5;
      left: 47.2%;
      top: 47.2%;
      width: 88px;
      height: 88px;
      border: 1px solid rgba(133, 241, 255, .72);
      border-radius: 50%;
      box-shadow: 0 0 0 7px rgba(91, 224, 248, .1), 0 0 34px rgba(77, 214, 255, .34);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .multimodal-core-glow {
      position: absolute;
      inset: 7px;
      border-radius: 50%;
      opacity: .16;
      background: radial-gradient(circle, rgba(255, 255, 255, .98) 0 8%, rgba(148, 243, 255, .78) 28%, rgba(72, 190, 255, .18) 58%, transparent 73%);
      box-shadow: 0 0 18px rgba(111, 231, 255, .28);
      transform: scale(.82);
      mix-blend-mode: screen;
    }

    .multimodal-fusion-marker::before,
    .multimodal-fusion-marker::after {
      content: "";
      position: absolute;
      inset: -16px;
      border: 1px solid rgba(115, 230, 248, .42);
      border-radius: 50%;
      opacity: 0;
    }

    .multimodal-fusion-marker::after { inset: -31px; }

    .multimodal-fusion-marker span {
      position: absolute;
      left: 50%;
      top: calc(100% + 12px);
      min-width: 88px;
      padding: 5px 9px;
      border: 1px solid rgba(121, 235, 248, .32);
      border-radius: 999px;
      color: white;
      background: rgba(4, 24, 47, .76);
      box-shadow: 0 8px 24px rgba(0, 14, 38, .24);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
      text-align: center;
      transform: translateX(-50%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .slide.active .multimodal-signal {
      animation: multimodal-signal-breathe 6s ease-in-out infinite;
      animation-delay: var(--signal-delay, -3s);
    }

    .slide.active .multimodal-flow::after {
      animation: multimodal-flow-scan 4.8s ease-in-out infinite;
    }

    .slide.active .multimodal-visual > img {
      animation: multimodal-image-breathe 10s ease-in-out infinite alternate;
    }

    .slide.active .multimodal-visual::after {
      animation: multimodal-visual-scan 7s ease-in-out infinite;
    }

    .slide.active .multimodal-fusion-marker.is-energy-hit {
      animation: multimodal-core-hit 1.72s cubic-bezier(.22, .65, .28, 1) both;
    }

    .slide.active .multimodal-fusion-marker.is-energy-hit::before {
      animation: multimodal-fusion-pulse 1.72s ease-out both;
    }

    .slide.active .multimodal-fusion-marker.is-energy-hit::after {
      animation: multimodal-fusion-pulse 1.92s ease-out .14s both;
    }

    .slide.active .multimodal-fusion-marker.is-energy-hit .multimodal-core-glow {
      animation: multimodal-core-glow 1.72s cubic-bezier(.22, .65, .28, 1) both;
    }

    @keyframes multimodal-signal-breathe {
      0%, 68%, 100% { border-color: rgba(var(--signal-rgb), .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(1, 10, 25, .14); }
      76%, 88% { border-color: rgba(var(--signal-rgb), .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 0 23px rgba(var(--signal-rgb), .17); }
    }

    @keyframes multimodal-flow-scan {
      0%, 12% { transform: translate3d(0, 0, 0) skewX(-18deg); opacity: 0; }
      24% { opacity: 1; }
      74%, 100% { transform: translate3d(620px, 0, 0) skewX(-18deg); opacity: 0; }
    }

    @keyframes multimodal-image-breathe {
      from { transform: scale(1.01); }
      to { transform: scale(1.035); }
    }

    @keyframes multimodal-visual-scan {
      0%, 18% { transform: translate3d(0, 0, 0) skewX(-18deg); opacity: 0; }
      28% { opacity: .38; }
      72%, 100% { transform: translate3d(1460px, 0, 0) skewX(-18deg); opacity: 0; }
    }

    @keyframes multimodal-fusion-pulse {
      0% { opacity: .88; transform: scale(.68); }
      82%, 100% { opacity: 0; transform: scale(1.42); }
    }

    @keyframes multimodal-core-hit {
      0%, 100% {
        border-color: rgba(133, 241, 255, .72);
        box-shadow: 0 0 0 7px rgba(91, 224, 248, .1), 0 0 34px rgba(77, 214, 255, .34);
        filter: brightness(1);
        transform: translate(-50%, -50%) scale(1);
      }
      42% {
        border-color: rgba(255, 255, 255, .98);
        box-shadow: 0 0 0 9px rgba(179, 249, 255, .24), 0 0 28px rgba(255, 255, 255, .9), 0 0 62px rgba(77, 214, 255, .82);
        filter: brightness(1.62);
        transform: translate(-50%, -50%) scale(1.075);
      }
    }

    @keyframes multimodal-core-glow {
      0%, 100% { opacity: .16; transform: scale(.82); }
      44% { opacity: .96; transform: scale(1.18); }
    }

    .slide[data-title^="多模态体验："] .slide-head h2 {
      font-size: 46px;
      letter-spacing: -.04em;
    }

    .multimodal-compare-stage {
      position: relative;
      display: grid;
      grid-template-columns: 330px minmax(0, 1fr) 330px;
      gap: 24px;
      height: 580px;
      padding: 0 24px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(56, 143, 177, .2);
      border-radius: 40px;
      background:
        radial-gradient(circle at 14% 50%, rgba(58, 117, 245, .19), transparent 29%),
        radial-gradient(circle at 86% 48%, rgba(30, 181, 144, .18), transparent 30%),
        radial-gradient(circle at 51% -5%, rgba(86, 217, 235, .18), transparent 34%),
        linear-gradient(135deg, #f7fcff, #eefbfe 42%, #f7fbff 67%, #effbf6);
      box-shadow: 0 25px 68px rgba(27, 76, 121, .11), inset 0 1px 0 white;
    }

    .multimodal-compare-stage::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(21, 128, 160, .17) 0 1px, transparent 1.4px),
        linear-gradient(90deg, transparent 49.9%, rgba(45, 153, 179, .07) 50%, transparent 50.1%);
      background-position: 0 0, center;
      background-size: 52px 52px, 100% 100%;
      opacity: .42;
      -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .68), transparent 34%, transparent 66%, rgba(0, 0, 0, .68));
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, .68), transparent 34%, transparent 66%, rgba(0, 0, 0, .68));
      pointer-events: none;
    }

    .multimodal-compare-stage::after {
      content: "";
      position: absolute;
      z-index: 0;
      left: 50%;
      top: 50%;
      width: 540px;
      height: 540px;
      border: 1px solid rgba(40, 172, 190, .11);
      border-radius: 50%;
      box-shadow: 0 0 0 48px rgba(39, 185, 194, .025), 0 0 0 96px rgba(48, 112, 220, .018);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .multimodal-phone-module {
      --phone-accent: 54, 102, 232;
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 0;
      height: 100%;
    }

    .multimodal-phone-module.chatgpt {
      --phone-accent: 22, 159, 119;
    }

    .multimodal-phone-brand {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      width: 276px;
      height: 42px;
      margin-bottom: 8px;
      padding: 0 12px;
      border: 1px solid rgba(var(--phone-accent), .18);
      border-radius: 15px;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 10px 28px rgba(35, 74, 117, .08), inset 0 1px 0 white;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .multimodal-phone-brand img {
      display: block;
      width: 26px;
      height: 26px;
      object-fit: contain;
    }

    .multimodal-phone-brand span {
      display: grid;
      min-width: 0;
    }

    .multimodal-phone-brand strong {
      color: #173653;
      font-size: 16px;
      line-height: 1.05;
    }

    .multimodal-phone-brand small {
      margin-top: 3px;
      color: #6f8298;
      font-size: 10px;
      font-weight: 750;
      line-height: 1;
    }

    .multimodal-phone-module .iphone-shell {
      width: 276px;
      height: 520px;
      border-radius: 56px;
      box-shadow:
        0 27px 56px rgba(21, 48, 86, .28),
        0 10px 22px rgba(var(--phone-accent), .14),
        inset 0 1px 0 rgba(255, 255, 255, .94);
    }

    .multimodal-phone-module .iphone-bezel {
      border-radius: 48px;
    }

    .multimodal-phone-module .dynamic-island {
      width: 90px;
      height: 24px;
    }

    .multimodal-phone-viewport {
      position: relative;
      display: block;
      width: 388px;
      height: 720px;
      overflow: hidden;
      border-radius: 27px 27px 62px 62px;
      background: #fff;
      transform: scale(.628);
      transform-origin: left top;
    }

    .multimodal-phone-viewport > img,
    .multimodal-phone-viewport > iframe {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      background: #fff;
    }

    .multimodal-phone-poster {
      z-index: 1;
      object-fit: cover;
      transition: opacity .28s ease;
    }

    .multimodal-phone-live iframe {
      z-index: 2;
      opacity: 0;
      transition: opacity .28s ease;
    }

    .multimodal-phone-live.is-ready iframe { opacity: 1; }
    .multimodal-phone-live.is-ready .multimodal-phone-poster { opacity: 0; }

    .multimodal-phone-link {
      color: inherit;
      text-decoration: none;
      cursor: pointer;
    }

    .multimodal-phone-link > img {
      object-fit: cover;
      transition: filter .25s ease, transform .3s ease;
    }

    .multimodal-phone-link:hover > img {
      filter: saturate(1.04) brightness(1.015);
      transform: scale(1.006);
    }

    .multimodal-phone-link:focus-visible {
      outline: 5px solid rgba(25, 159, 119, .38);
      outline-offset: -5px;
    }

    .multimodal-open-icon {
      position: absolute;
      z-index: 3;
      right: 18px;
      top: 17px;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(16, 130, 102, .2);
      border-radius: 14px;
      color: #0d8e6c;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 8px 22px rgba(29, 96, 84, .13);
    }

    .multimodal-open-icon svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .multimodal-use-guide {
      position: relative;
      z-index: 3;
      align-self: center;
      min-width: 0;
      padding: 26px 28px 24px;
      border: 1px solid rgba(54, 146, 170, .2);
      border-radius: 30px;
      background: rgba(255, 255, 255, .8);
      box-shadow: 0 20px 52px rgba(29, 76, 116, .11), inset 0 1px 0 white;
      backdrop-filter: blur(22px) saturate(1.15);
      -webkit-backdrop-filter: blur(22px) saturate(1.15);
    }

    .multimodal-use-kicker {
      margin: 0 0 8px;
      color: #0789a4;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .16em;
    }

    .multimodal-use-guide h3 {
      margin: 0;
      color: #153452;
      font-size: 31px;
      line-height: 1.18;
      letter-spacing: -.03em;
    }

    .multimodal-use-guide h3 span {
      color: transparent;
      background: linear-gradient(90deg, #078eab, #22b889 72%, #536ee8);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .multimodal-use-intro {
      margin: 10px 0 14px;
      color: #587087;
      font-size: 14px;
      font-weight: 650;
      line-height: 1.5;
    }

    .multimodal-input-types {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .multimodal-input-types span {
      display: grid;
      grid-template-columns: 28px 1fr;
      align-items: center;
      min-width: 0;
      min-height: 42px;
      padding: 0 10px;
      border: 1px solid rgba(47, 148, 170, .15);
      border-radius: 13px;
      color: #35546b;
      background: rgba(242, 253, 254, .82);
      font-size: 12px;
      font-weight: 850;
    }

    .multimodal-input-types svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: #0e9aae;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .multimodal-use-flow {
      margin-top: 13px;
      border-top: 1px solid rgba(63, 112, 145, .12);
    }

    .multimodal-use-step {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 54px;
      border-bottom: 1px solid rgba(63, 112, 145, .11);
    }

    .multimodal-use-step > b {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(24, 150, 168, .24);
      border-radius: 11px;
      color: #078da7;
      background: rgba(228, 251, 251, .88);
      font-size: 11px;
      font-weight: 950;
    }

    .multimodal-use-step span {
      display: grid;
      min-width: 0;
    }

    .multimodal-use-step strong {
      color: #1e3d59;
      font-size: 15px;
      line-height: 1.2;
    }

    .multimodal-use-step small {
      margin-top: 3px;
      color: #687d91;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
    }

    .multimodal-use-example {
      margin: 13px 0 0;
      padding: 11px 14px;
      border-left: 3px solid #18a9a4;
      border-radius: 0 14px 14px 0;
      color: #3d596e;
      background: linear-gradient(90deg, rgba(229, 250, 248, .88), rgba(237, 245, 255, .78));
      font-size: 12px;
      font-weight: 740;
      line-height: 1.45;
    }

    .multimodal-use-example strong {
      color: #087f91;
    }

    .slide.active .multimodal-phone-module.doubao {
      animation: multimodal-compare-arrive .68s cubic-bezier(.22, .78, .28, 1) both;
    }

    .slide.active .multimodal-phone-module.chatgpt {
      animation: multimodal-compare-arrive .68s cubic-bezier(.22, .78, .28, 1) .12s both;
    }

    .slide.active .multimodal-use-guide {
      animation: multimodal-guide-arrive .62s cubic-bezier(.22, .78, .28, 1) .06s both;
    }

    @keyframes multimodal-compare-arrive {
      from { opacity: 0; transform: translate3d(0, 16px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes multimodal-guide-arrive {
      from { opacity: 0; transform: translate3d(0, -10px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .multimodal-phone-module,
      .slide.active .multimodal-use-guide { animation: none !important; }

      .multimodal-phone-poster,
      .multimodal-phone-live iframe,
      .multimodal-phone-link > img { transition: none !important; }
    }

    .slide[data-title^="智能体：让大模型"] .slide-head h2 {
      font-size: 47px;
      letter-spacing: -.045em;
    }

    .agent-compare-stage {
      position: relative;
      display: grid;
      grid-template-columns: 350px 84px minmax(0, 1fr);
      gap: 18px;
      height: 560px;
      padding: 20px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(104, 91, 68, .45);
      border-radius: 38px;
      color: #f8f5ee;
      background:
        radial-gradient(circle at 73% 42%, rgba(87, 179, 216, .14), transparent 28%),
        radial-gradient(circle at 35% 104%, rgba(202, 138, 4, .12), transparent 34%),
        linear-gradient(135deg, #1c1917 0%, #12110f 46%, #0a1116 100%);
      box-shadow: 0 28px 76px rgba(27, 23, 18, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .agent-compare-stage::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      opacity: .34;
      background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
      background-size: 42px 42px;
      -webkit-mask-image: radial-gradient(circle at 70% 48%, black, transparent 67%);
      mask-image: radial-gradient(circle at 70% 48%, black, transparent 67%);
      pointer-events: none;
    }

    .agent-compare-stage::after {
      content: "";
      position: absolute;
      z-index: -1;
      right: -130px;
      top: -250px;
      width: 760px;
      height: 760px;
      border: 1px solid rgba(127, 208, 238, .12);
      border-radius: 50%;
      box-shadow: 0 0 0 80px rgba(127, 208, 238, .025), 0 0 0 160px rgba(202, 138, 4, .018);
      pointer-events: none;
    }

    .llm-window,
    .codex-window {
      position: relative;
      min-width: 0;
      height: 100%;
      overflow: hidden;
      border-radius: 26px;
    }

    .llm-window {
      display: grid;
      grid-template-rows: 58px minmax(0, 1fr) 52px;
      color: #1d1b18;
      background: #f4f1ea;
      box-shadow: 0 24px 48px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .72);
    }

    .llm-window-head,
    .codex-window-head {
      display: grid;
      align-items: center;
      min-width: 0;
    }

    .llm-window-head {
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 10px;
      padding: 0 16px;
      border-bottom: 1px solid rgba(70, 61, 48, .11);
      background: rgba(255, 255, 255, .5);
    }

    .llm-model-mark,
    .codex-brand-mark,
    .agent-tool-icon {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .llm-model-mark {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(124, 91, 31, .2);
      border-radius: 12px;
      color: #9a6a16;
      background: linear-gradient(145deg, #fff, #e8dfcc);
      box-shadow: 0 5px 14px rgba(72, 55, 27, .1);
    }

    .llm-model-mark svg,
    .agent-tool-icon svg,
    .agent-transition svg,
    .agent-result-card svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .llm-window-head > span:nth-child(2),
    .codex-window-head > span:nth-child(2) {
      display: grid;
      min-width: 0;
    }

    .llm-window-head strong,
    .codex-window-head strong {
      font-size: 15px;
      line-height: 1.1;
    }

    .llm-window-head small,
    .codex-window-head small {
      margin-top: 3px;
      font-size: 9px;
      font-weight: 850;
      letter-spacing: .12em;
    }

    .llm-window-head small { color: #857b6c; }

    .llm-ready {
      padding: 5px 8px;
      border: 1px solid rgba(108, 90, 61, .15);
      border-radius: 999px;
      color: #776c5d;
      background: rgba(255, 255, 255, .54);
      font-size: 9px;
      font-style: normal;
      font-weight: 900;
      letter-spacing: .1em;
    }

    .llm-conversation {
      min-height: 0;
      padding: 18px 17px 14px;
      overflow: hidden;
      background:
        radial-gradient(circle at 14% 10%, rgba(202, 138, 4, .09), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 30%);
    }

    .llm-conversation-label,
    .agent-task-kicker,
    .agent-map-kicker {
      margin: 0;
      font-size: 9px;
      font-weight: 950;
      letter-spacing: .16em;
    }

    .llm-conversation-label { color: #9a7c48; }

    .llm-user-message {
      margin: 13px 0 14px 36px;
      padding: 13px 15px;
      border-radius: 17px 17px 5px 17px;
      color: #2a2722;
      background: white;
      box-shadow: 0 10px 24px rgba(62, 48, 28, .09);
      font-size: 14px;
      font-weight: 760;
      line-height: 1.48;
    }

    .llm-assistant-message {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      align-items: start;
      gap: 9px;
    }

    .llm-avatar {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 11px;
      color: white;
      background: linear-gradient(145deg, #443d33, #1d1b18);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .06em;
    }

    .llm-answer-copy {
      padding: 13px 14px 12px;
      border: 1px solid rgba(73, 62, 45, .1);
      border-radius: 5px 17px 17px 17px;
      background: rgba(255, 255, 255, .56);
    }

    .llm-answer-copy strong {
      display: block;
      color: #302c26;
      font-size: 13px;
      line-height: 1.35;
    }

    .llm-answer-copy p {
      margin: 10px 0 0;
      color: #665f54;
      font-size: 12px;
      font-weight: 680;
      line-height: 1.65;
    }

    .llm-answer-boundary {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      padding-top: 11px;
      border-top: 1px solid rgba(73, 62, 45, .1);
      color: #8b6a2c;
      font-size: 10px;
      font-weight: 900;
    }

    .llm-answer-boundary::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #c89538;
      box-shadow: 0 0 0 4px rgba(200, 149, 56, .12);
    }

    .llm-window-foot {
      display: grid;
      grid-template-columns: auto 1fr auto 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 0 16px;
      border-top: 1px solid rgba(70, 61, 48, .1);
      color: #756d61;
      background: rgba(255, 255, 255, .38);
      font-size: 10px;
      font-weight: 900;
    }

    .llm-window-foot i {
      height: 1px;
      background: linear-gradient(90deg, rgba(138, 111, 64, .16), rgba(138, 111, 64, .58));
    }

    .llm-window-foot strong { color: #8b641d; }

    .agent-transition {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-width: 0;
      color: rgba(248, 245, 238, .62);
      text-align: center;
    }

    .agent-transition span {
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .16em;
    }

    .agent-transition strong {
      color: #e3c784;
      font-size: 12px;
      line-height: 1.35;
      letter-spacing: .04em;
    }

    .agent-transition-icon {
      position: relative;
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border: 1px solid rgba(225, 194, 122, .35);
      border-radius: 50%;
      color: #f0d99c;
      background: radial-gradient(circle, rgba(208, 167, 74, .19), rgba(255, 255, 255, .025) 68%);
      box-shadow: 0 0 26px rgba(207, 166, 69, .12);
    }

    .agent-transition-icon::after {
      content: "";
      position: absolute;
      inset: -8px;
      border: 1px dashed rgba(225, 194, 122, .18);
      border-radius: 50%;
    }

    .codex-window {
      display: grid;
      grid-template-rows: 56px minmax(0, 1fr) 70px;
      border: 1px solid rgba(133, 197, 220, .22);
      background: rgba(7, 13, 18, .9);
      box-shadow: 0 24px 56px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .codex-window-head {
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 10px;
      padding: 0 16px;
      border-bottom: 1px solid rgba(151, 210, 232, .12);
      background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    }

    .codex-brand-mark {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 12px;
      background: rgba(255, 255, 255, .07);
      box-shadow: 0 0 20px rgba(118, 208, 239, .08);
    }

    .codex-brand-mark img {
      width: 19px;
      height: 19px;
      filter: invert(1);
    }

    .codex-window-head strong { color: #fffdf7; }
    .codex-window-head small { color: rgba(196, 218, 226, .58); }

    .codex-running {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 9px;
      border: 1px solid rgba(125, 220, 177, .2);
      border-radius: 999px;
      color: #a9ebcb;
      background: rgba(58, 160, 112, .09);
      font-size: 9px;
      font-weight: 950;
      letter-spacing: .1em;
    }

    .codex-running::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #7ee0ae;
      box-shadow: 0 0 10px rgba(126, 224, 174, .82);
    }

    .codex-window-body {
      display: grid;
      grid-template-columns: 214px minmax(0, 1fr);
      gap: 14px;
      min-height: 0;
      padding: 14px;
    }

    .agent-task-pane {
      min-width: 0;
      padding: 16px 14px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 18px;
      background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
    }

    .agent-task-kicker { color: #d6b76d; }

    .agent-task-pane h3 {
      margin: 8px 0 0;
      color: #fffdf7;
      font-size: 22px;
      line-height: 1.18;
      letter-spacing: -.035em;
    }

    .agent-task-prompt {
      margin: 12px 0 14px;
      padding: 11px 12px;
      border-left: 2px solid #d6b76d;
      border-radius: 0 12px 12px 0;
      color: rgba(238, 235, 226, .76);
      background: rgba(215, 183, 109, .07);
      font-size: 11px;
      font-weight: 720;
      line-height: 1.5;
    }

    .agent-task-list {
      display: grid;
      gap: 7px;
    }

    .agent-task-item {
      display: grid;
      grid-template-columns: 25px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-height: 39px;
      padding: 0 9px;
      border: 1px solid rgba(255, 255, 255, .065);
      border-radius: 11px;
      color: rgba(228, 234, 236, .65);
      background: rgba(255, 255, 255, .025);
      font-size: 10px;
      font-weight: 820;
    }

    .agent-task-item b {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 8px;
      color: #d9bf83;
      background: rgba(217, 191, 131, .1);
      font-size: 8px;
    }

    .agent-task-boundary {
      margin: 13px 0 0;
      color: rgba(170, 200, 210, .55);
      font-size: 9px;
      font-weight: 760;
      line-height: 1.45;
    }

    .agent-execution-map {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(117, 198, 227, .12);
      border-radius: 18px;
      background:
        radial-gradient(circle at 31% 47%, rgba(114, 205, 237, .11), transparent 24%),
        radial-gradient(circle at 78% 52%, rgba(215, 183, 109, .07), transparent 33%),
        rgba(3, 10, 15, .55);
    }

    .agent-execution-map::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .44;
      background-image: radial-gradient(circle, rgba(132, 203, 229, .2) 0 1px, transparent 1.4px);
      background-size: 24px 24px;
      -webkit-mask-image: radial-gradient(circle at 45% 50%, black, transparent 78%);
      mask-image: radial-gradient(circle at 45% 50%, black, transparent 78%);
      pointer-events: none;
    }

    .agent-map-kicker {
      position: absolute;
      z-index: 4;
      left: 16px;
      top: 14px;
      color: rgba(162, 211, 229, .58);
    }

    .agent-map-kicker span {
      margin-left: 9px;
      color: #d8bc7c;
      letter-spacing: .08em;
    }

    .agent-route-layer {
      position: absolute;
      z-index: 1;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    .agent-route-layer path {
      fill: none;
      stroke: rgba(143, 213, 238, .2);
      stroke-width: 1.3;
      stroke-linecap: round;
      stroke-dasharray: 3 7;
      vector-effect: non-scaling-stroke;
    }

    .agent-ingress-line {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 173px;
      width: 160px;
      height: 1px;
      background: linear-gradient(90deg, rgba(214, 183, 109, .08), rgba(214, 183, 109, .72));
    }

    .agent-core {
      position: absolute;
      z-index: 3;
      left: 158px;
      top: 123px;
      display: grid;
      place-items: center;
      width: 100px;
      height: 100px;
      border: 1px solid rgba(198, 231, 241, .52);
      border-radius: 50%;
      background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .2), rgba(76, 164, 197, .12) 36%, rgba(7, 19, 26, .92) 70%);
      box-shadow: 0 0 0 8px rgba(112, 204, 235, .045), 0 0 38px rgba(100, 197, 231, .16);
    }

    .agent-core::before,
    .agent-core::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .agent-core::before {
      inset: -14px;
      border: 1px dashed rgba(216, 190, 126, .28);
    }

    .agent-core::after {
      inset: 15px;
      opacity: .38;
      background: radial-gradient(circle, rgba(255, 255, 255, .72), rgba(112, 207, 239, .16) 45%, transparent 72%);
    }

    .agent-core img {
      position: relative;
      z-index: 2;
      width: 29px;
      height: 29px;
      filter: invert(1);
    }

    .agent-core span {
      position: absolute;
      left: 50%;
      top: calc(100% + 13px);
      min-width: 132px;
      color: rgba(225, 239, 244, .72);
      font-size: 9px;
      font-weight: 950;
      letter-spacing: .14em;
      text-align: center;
      transform: translateX(-50%);
    }

    .agent-tool-node {
      --tool-color: 126, 211, 241;
      position: absolute;
      z-index: 3;
      left: 430px;
      display: grid;
      grid-template-columns: 45px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      width: 218px;
      height: 74px;
      padding: 0 11px;
      border: 1px solid rgba(var(--tool-color), .18);
      border-radius: 16px;
      background: linear-gradient(105deg, rgba(var(--tool-color), .09), rgba(255, 255, 255, .025));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 30px rgba(0, 0, 0, .15);
    }

    .agent-tool-node.computer { top: 48px; }
    .agent-tool-node.terminal { top: 145px; --tool-color: 218, 185, 109; }
    .agent-tool-node.network { top: 242px; --tool-color: 125, 224, 177; }

    .agent-tool-icon {
      width: 40px;
      height: 40px;
      border: 1px solid rgba(var(--tool-color), .2);
      border-radius: 13px;
      color: rgb(var(--tool-color));
      background: rgba(var(--tool-color), .08);
    }

    .agent-tool-copy {
      display: grid;
      min-width: 0;
    }

    .agent-tool-copy strong {
      color: #f8fbfc;
      font-size: 14px;
      line-height: 1.15;
    }

    .agent-tool-copy small {
      margin-top: 4px;
      overflow: hidden;
      color: rgba(192, 214, 221, .58);
      font-size: 9px;
      font-weight: 730;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .agent-tool-state {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(var(--tool-color), .56);
      box-shadow: 0 0 8px rgba(var(--tool-color), .35);
    }

    .agent-packet {
      position: absolute;
      z-index: 5;
      left: 0;
      top: 0;
      width: 7px;
      height: 7px;
      border: 1px solid rgba(255, 255, 255, .95);
      border-radius: 50%;
      opacity: 0;
      background: white;
      box-shadow: 0 0 6px white, 0 0 14px rgba(122, 215, 247, .8);
      offset-rotate: 0deg;
      pointer-events: none;
    }

    .agent-packet.ingress {
      offset-path: path("M 0 174 C 64 174 100 174 158 174");
      box-shadow: 0 0 6px white, 0 0 14px rgba(218, 185, 109, .82);
    }

    .agent-packet.computer { offset-path: path("M 258 174 C 335 174 354 85 430 85"); }
    .agent-packet.terminal { offset-path: path("M 258 174 C 334 174 356 182 430 182"); box-shadow: 0 0 6px white, 0 0 14px rgba(218, 185, 109, .8); }
    .agent-packet.network { offset-path: path("M 258 174 C 335 174 354 279 430 279"); box-shadow: 0 0 6px white, 0 0 14px rgba(125, 224, 177, .8); }

    .agent-result-card {
      position: absolute;
      z-index: 4;
      left: 112px;
      top: 304px;
      display: grid;
      grid-template-columns: 27px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      width: 290px;
      min-height: 44px;
      padding: 6px 12px;
      border: 1px solid rgba(126, 224, 177, .28);
      border-radius: 13px;
      color: #c9f4df;
      background: rgba(42, 121, 87, .14);
      box-shadow: 0 0 24px rgba(83, 197, 143, .08);
      opacity: .22;
      transform: translate3d(0, 0, 0);
    }

    .agent-result-card svg { color: #82e2b2; }

    .agent-result-card span {
      display: grid;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.2;
    }

    .agent-result-card small {
      margin-top: 3px;
      color: rgba(187, 225, 207, .62);
      font-size: 8px;
      font-weight: 730;
    }

    .agent-cycle-rail {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: center;
      gap: 7px;
      padding: 10px 14px;
      border-top: 1px solid rgba(151, 210, 232, .11);
      background: rgba(255, 255, 255, .018);
    }

    .agent-cycle-step {
      position: relative;
      display: grid;
      grid-template-columns: 25px minmax(0, 1fr);
      align-items: center;
      gap: 7px;
      min-width: 0;
      min-height: 42px;
      padding: 0 8px;
      border: 1px solid rgba(255, 255, 255, .055);
      border-radius: 12px;
      color: rgba(201, 217, 223, .5);
      background: rgba(255, 255, 255, .018);
    }

    .agent-cycle-step b {
      display: grid;
      place-items: center;
      width: 23px;
      height: 23px;
      border-radius: 8px;
      color: rgba(219, 192, 131, .72);
      background: rgba(219, 192, 131, .08);
      font-size: 8px;
    }

    .agent-cycle-step span {
      overflow: hidden;
      font-size: 9px;
      font-weight: 900;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .slide.active .llm-window {
      animation: agent-panel-arrive .62s cubic-bezier(.22, .78, .28, 1) both;
    }

    .slide.active .agent-transition {
      animation: agent-panel-arrive .58s cubic-bezier(.22, .78, .28, 1) .08s both;
    }

    .slide.active .codex-window {
      animation: agent-panel-arrive .68s cubic-bezier(.22, .78, .28, 1) .14s both;
    }

    .slide.active .agent-packet {
      animation: agent-packet-travel 10s cubic-bezier(.24, .72, .28, 1) var(--packet-delay, 0s) infinite;
    }

    .slide.active .agent-core {
      animation: agent-core-think 10s ease-out 1.3s infinite;
    }

    .slide.active .agent-tool-node {
      animation: agent-tool-activate 10s ease-out var(--tool-delay, 0s) infinite;
    }

    .slide.active .agent-cycle-step {
      animation: agent-cycle-activate 10s ease-out var(--step-delay, 0s) infinite;
    }

    .slide.active .agent-result-card {
      animation: agent-result-arrive 10s ease-out 7.15s infinite;
    }

    @keyframes agent-panel-arrive {
      from { opacity: 0; transform: translate3d(0, 14px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes agent-packet-travel {
      0% { offset-distance: 0%; opacity: 0; transform: scale(.7); }
      3% { opacity: 1; }
      14% { offset-distance: 100%; opacity: 1; transform: scale(1.12); }
      18%, 100% { offset-distance: 100%; opacity: 0; transform: scale(.7); }
    }

    @keyframes agent-core-think {
      0%, 100% { border-color: rgba(198, 231, 241, .52); box-shadow: 0 0 0 8px rgba(112, 204, 235, .045), 0 0 38px rgba(100, 197, 231, .16); transform: scale(1); }
      8%, 16% { border-color: rgba(255, 255, 255, .92); box-shadow: 0 0 0 10px rgba(112, 204, 235, .08), 0 0 48px rgba(109, 205, 239, .46); transform: scale(1.055); }
      23% { border-color: rgba(198, 231, 241, .52); box-shadow: 0 0 0 8px rgba(112, 204, 235, .045), 0 0 38px rgba(100, 197, 231, .16); transform: scale(1); }
    }

    @keyframes agent-tool-activate {
      0%, 100% { border-color: rgba(var(--tool-color), .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 30px rgba(0, 0, 0, .15); transform: translate3d(0, 0, 0); }
      9%, 18% { border-color: rgba(var(--tool-color), .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 26px rgba(var(--tool-color), .2); transform: translate3d(3px, 0, 0); }
      24% { border-color: rgba(var(--tool-color), .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 30px rgba(0, 0, 0, .15); transform: translate3d(0, 0, 0); }
    }

    @keyframes agent-cycle-activate {
      0%, 100% { color: rgba(201, 217, 223, .5); border-color: rgba(255, 255, 255, .055); background: rgba(255, 255, 255, .018); }
      8%, 18% { color: #fffdf7; border-color: rgba(218, 185, 109, .42); background: rgba(218, 185, 109, .09); }
      26% { color: rgba(201, 217, 223, .5); border-color: rgba(255, 255, 255, .055); background: rgba(255, 255, 255, .018); }
    }

    @keyframes agent-result-arrive {
      0% { opacity: .22; transform: translate3d(0, 5px, 0) scale(.98); }
      8%, 28% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
      40%, 100% { opacity: .22; transform: translate3d(0, 0, 0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .llm-window,
      .slide.active .agent-transition,
      .slide.active .codex-window,
      .slide.active .agent-packet,
      .slide.active .agent-core,
      .slide.active .agent-tool-node,
      .slide.active .agent-cycle-step,
      .slide.active .agent-result-card { animation: none !important; }

      .agent-packet { display: none !important; }
      .agent-result-card { opacity: 1; transform: none; }
      .agent-cycle-step { color: rgba(235, 241, 243, .74); }
    }

    .slide[data-title^="同一个任务："] .slide-head h2,
    .slide[data-title^="智能体原理："] .slide-head h2 {
      font-size: 47px;
      letter-spacing: -.045em;
    }

    .agent-showcase-stage {
      position: relative;
      display: grid;
      grid-template-columns: 330px 74px minmax(0, 1fr);
      gap: 16px;
      height: 560px;
      padding: 18px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(100, 89, 70, .42);
      border-radius: 38px;
      color: #f8f5ee;
      background:
        radial-gradient(circle at 76% 44%, rgba(122, 218, 236, .13), transparent 30%),
        radial-gradient(circle at 26% 104%, rgba(214, 183, 109, .13), transparent 34%),
        linear-gradient(132deg, #211e1a 0%, #11100e 42%, #071116 100%);
      box-shadow: 0 28px 76px rgba(27, 23, 18, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .agent-showcase-stage::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      opacity: .34;
      background-image:
        linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(circle at 70% 45%, black, transparent 74%);
      mask-image: radial-gradient(circle at 70% 45%, black, transparent 74%);
      pointer-events: none;
    }

    .agent-phone-zone {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 0;
    }

    .agent-phone-zone::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 300px;
      height: 300px;
      border: 1px solid rgba(216, 183, 109, .18);
      border-radius: 50%;
      box-shadow: 0 0 0 38px rgba(216, 183, 109, .035), 0 0 70px rgba(216, 183, 109, .11);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .agent-phone-shell {
      position: relative;
      z-index: 2;
      width: 272px;
      height: 524px;
      padding: 8px;
      border: 1px solid rgba(255, 255, 255, .78);
      border-radius: 56px;
      background: linear-gradient(122deg, #f0f1f3 0%, #676c74 7%, #16191d 15%, #444a51 51%, #080a0d 86%, #d6d9de 97%);
      box-shadow: 0 28px 58px rgba(0, 0, 0, .42), 0 0 36px rgba(215, 183, 109, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
    }

    .agent-phone-shell::after {
      content: "";
      position: absolute;
      z-index: 7;
      left: 17px;
      top: 22px;
      bottom: 28px;
      width: 2px;
      border-radius: 999px;
      opacity: .54;
      background: linear-gradient(180deg, rgba(255, 255, 255, .8), transparent 38%, transparent 72%, rgba(255, 255, 255, .18));
      pointer-events: none;
    }

    .agent-phone-bezel {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 6px;
      overflow: hidden;
      border-radius: 49px;
      background: #050607;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    }

    .agent-phone-screen {
      position: relative;
      display: grid;
      grid-template-rows: 68px minmax(0, 1fr) 88px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow: clip;
      border-radius: 43px;
      clip-path: inset(0 round 43px);
      color: #22211f;
      background: linear-gradient(180deg, #fbfbfa, #f5f4f1 68%, #f2f0ec);
      contain: paint;
      isolation: isolate;
    }

    .agent-phone-island {
      position: absolute;
      z-index: 12;
      left: 50%;
      top: 12px;
      width: 82px;
      height: 24px;
      border-radius: 999px;
      background: #050607;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045), 0 2px 7px rgba(0, 0, 0, .3);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .agent-phone-island::after {
      content: "";
      position: absolute;
      right: 8px;
      top: 7px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #355a70, #060708 64%);
    }

    .agent-phone-header {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) 28px;
      align-items: end;
      gap: 7px;
      padding: 33px 11px 7px;
      border-bottom: 1px solid rgba(70, 65, 56, .09);
      background: rgba(255, 255, 255, .94);
    }

    .agent-phone-menu,
    .agent-phone-replay {
      display: grid;
      place-items: center;
      width: 27px;
      height: 27px;
      border: 1px solid rgba(83, 76, 65, .12);
      border-radius: 9px;
      color: #6d675e;
      background: #f8f7f4;
    }

    .agent-phone-replay {
      padding: 0;
      cursor: pointer;
    }

    .agent-phone-menu svg,
    .agent-phone-replay svg,
    .agent-phone-send svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .agent-phone-brand {
      display: grid;
      min-width: 0;
      text-align: center;
    }

    .agent-phone-brand strong {
      font-size: 11px;
      line-height: 1.1;
    }

    .agent-phone-brand small {
      margin-top: 2px;
      color: #9a9285;
      font-size: 7px;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .agent-phone-chat {
      position: relative;
      z-index: 2;
      min-height: 0;
      padding: 17px 12px 12px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
      background:
        radial-gradient(circle at 14% 12%, rgba(214, 183, 109, .09), transparent 26%),
        linear-gradient(rgba(122, 111, 94, .035) 1px, transparent 1px);
      background-size: auto, 100% 28px;
    }

    .agent-phone-chat::-webkit-scrollbar { width: 0; height: 0; }

    .agent-phone-empty {
      position: absolute;
      left: 50%;
      top: 45%;
      display: grid;
      justify-items: center;
      width: 190px;
      color: #888176;
      text-align: center;
      transform: translate(-50%, -50%);
      transition: opacity .3s ease, transform .36s ease;
    }

    .agent-phone-empty i {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(162, 122, 52, .2);
      border-radius: 15px;
      color: #a5792c;
      background: linear-gradient(145deg, #fff, #eee5d3);
      box-shadow: 0 10px 24px rgba(79, 61, 30, .1);
      font-size: 11px;
      font-style: normal;
      font-weight: 950;
      letter-spacing: .08em;
    }

    .agent-phone-empty strong {
      margin-top: 10px;
      color: #3c3934;
      font-size: 13px;
    }

    .agent-phone-empty span {
      margin-top: 6px;
      font-size: 9px;
      font-weight: 680;
      line-height: 1.5;
    }

    .agent-phone-user-row,
    .agent-phone-assistant-row,
    .agent-phone-limit {
      opacity: 0;
      transform: translate3d(0, 9px, 0);
      transition: opacity .28s ease, transform .36s cubic-bezier(.22, .78, .28, 1);
    }

    .agent-phone-user-row {
      display: flex;
      justify-content: flex-end;
    }

    .agent-phone-user-bubble {
      max-width: 190px;
      padding: 10px 12px;
      border: 1px solid rgba(113, 92, 54, .1);
      border-radius: 15px 15px 5px 15px;
      color: #2c2924;
      background: #fff;
      box-shadow: 0 8px 20px rgba(67, 52, 27, .07);
      font-size: 10px;
      font-weight: 780;
      line-height: 1.5;
    }

    .agent-phone-assistant-row {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      align-items: start;
      gap: 8px;
      margin-top: 13px;
    }

    .agent-phone-avatar {
      display: grid;
      place-items: center;
      width: 27px;
      height: 27px;
      border-radius: 10px;
      color: #fff;
      background: linear-gradient(145deg, #4b453c, #1d1b18);
      font-size: 8px;
      font-weight: 950;
    }

    .agent-phone-answer-bubble {
      min-height: 62px;
      padding: 10px 11px;
      border: 1px solid rgba(74, 65, 51, .1);
      border-radius: 5px 15px 15px 15px;
      color: #4d4942;
      background: rgba(255, 255, 255, .7);
      font-size: 10px;
      font-weight: 690;
      line-height: 1.62;
    }

    .agent-phone-thinking {
      display: none;
      align-items: center;
      gap: 4px;
      height: 20px;
    }

    .agent-phone-thinking i {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #a67a2d;
      animation: agent-phone-dot .78s ease-in-out infinite alternate;
    }

    .agent-phone-thinking i:nth-child(2) { animation-delay: .13s; }
    .agent-phone-thinking i:nth-child(3) { animation-delay: .26s; }

    .agent-phone-screen.is-thinking .agent-phone-thinking { display: flex; }
    .agent-phone-screen.is-thinking .agent-phone-answer-text { display: none; }

    .agent-phone-caret {
      display: none;
      width: 1.5px;
      height: 12px;
      margin-left: 2px;
      vertical-align: -2px;
      background: #9b7028;
      animation: deepseek-sim-caret .72s steps(1, end) infinite;
    }

    .agent-phone-screen.is-answering .agent-phone-caret { display: inline-block; }

    .agent-phone-limit {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 12px 0 0 36px;
      padding: 8px 9px;
      border: 1px solid rgba(190, 140, 47, .18);
      border-radius: 11px;
      color: #8a6421;
      background: rgba(255, 248, 232, .84);
      font-size: 8px;
      font-weight: 900;
      line-height: 1.4;
    }

    .agent-phone-limit::before {
      content: "";
      flex: 0 0 auto;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #d19a35;
      box-shadow: 0 0 0 4px rgba(209, 154, 53, .12);
    }

    .agent-phone-screen.has-question .agent-phone-empty {
      opacity: 0;
      transform: translate(-50%, -55%) scale(.96);
    }

    .agent-phone-screen.has-question .agent-phone-user-row,
    .agent-phone-screen.has-answer .agent-phone-assistant-row,
    .agent-phone-screen.is-complete .agent-phone-limit {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .agent-phone-composer {
      position: relative;
      z-index: 5;
      padding: 8px 10px 7px;
      border-top: 1px solid rgba(70, 65, 56, .09);
      background: linear-gradient(180deg, #faf9f6, #fff);
    }

    .agent-phone-input-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 31px;
      align-items: center;
      min-height: 48px;
      padding: 6px 6px 6px 11px;
      border: 1px solid rgba(79, 70, 57, .14);
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(57, 44, 25, .06);
    }

    .agent-phone-input-line {
      min-width: 0;
      color: #3e3932;
      font-size: 9px;
      font-weight: 720;
      line-height: 1.4;
    }

    .agent-phone-input-line:empty::before {
      content: "给 AI 发送消息";
      color: #aaa297;
    }

    .agent-phone-send {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 10px;
      color: white;
      background: #b5afa5;
      transition: background .2s ease, box-shadow .2s ease;
    }

    .agent-phone-screen.is-typing .agent-phone-send,
    .agent-phone-screen.is-sending .agent-phone-send {
      background: linear-gradient(145deg, #c69537, #9f6e1e);
      box-shadow: 0 7px 15px rgba(154, 105, 27, .2);
    }

    .agent-phone-disclaimer {
      margin: 5px 0 0;
      color: #aaa49a;
      font-size: 7px;
      font-weight: 650;
      text-align: center;
    }

    .agent-bridge {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 11px;
      min-width: 0;
      color: rgba(246, 239, 224, .58);
      text-align: center;
    }

    .agent-bridge span {
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .16em;
    }

    .agent-bridge i {
      position: relative;
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border: 1px solid rgba(216, 183, 109, .32);
      border-radius: 50%;
      color: #e2c783;
      background: radial-gradient(circle, rgba(216, 183, 109, .16), rgba(13, 17, 18, .82) 70%);
      box-shadow: 0 0 30px rgba(216, 183, 109, .11);
      font-size: 22px;
      font-style: normal;
    }

    .agent-bridge i::before,
    .agent-bridge i::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 1px;
      height: 105px;
      background: linear-gradient(transparent, rgba(216, 183, 109, .42));
      transform: translateX(-50%);
    }

    .agent-bridge i::before { bottom: calc(100% + 9px); }
    .agent-bridge i::after { top: calc(100% + 9px); transform: translateX(-50%) rotate(180deg); }

    .agent-bridge strong {
      color: #f0dfad;
      font-size: 11px;
      line-height: 1.4;
      letter-spacing: .04em;
      white-space: nowrap;
    }

    .codex-mac-shot {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-rows: minmax(0, 1fr) 34px;
      min-width: 0;
      min-height: 0;
      height: 100%;
      margin: 0;
    }

    .codex-mac-frame {
      position: relative;
      display: grid;
      grid-template-rows: 43px minmax(0, 1fr);
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(178, 190, 191, .24);
      border-radius: 24px;
      background: #171817;
      box-shadow: 0 24px 58px rgba(0, 0, 0, .38), 0 0 44px rgba(109, 207, 230, .08), inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .codex-mac-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
      pointer-events: none;
    }

    .codex-mac-titlebar {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr) 88px;
      align-items: center;
      padding: 0 15px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      background: linear-gradient(180deg, #2b2c2b, #212221);
    }

    .codex-mac-lights {
      display: flex;
      gap: 7px;
    }

    .codex-mac-lights i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ff5f57;
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18);
    }

    .codex-mac-lights i:nth-child(2) { background: #febc2e; }
    .codex-mac-lights i:nth-child(3) { background: #28c840; }

    .codex-mac-title {
      overflow: hidden;
      color: rgba(242, 242, 239, .8);
      font-size: 11px;
      font-weight: 760;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .codex-mac-titlebar > small {
      justify-self: end;
      color: rgba(200, 204, 201, .52);
      font-size: 8px;
      font-weight: 850;
      letter-spacing: .1em;
    }

    .codex-mac-workspace {
      display: grid;
      grid-template-columns: 158px minmax(0, 1fr);
      min-width: 0;
      min-height: 0;
    }

    .codex-mac-sidebar {
      min-width: 0;
      padding: 12px 10px;
      border-right: 1px solid rgba(255, 255, 255, .07);
      color: rgba(237, 238, 235, .72);
      background: #1d1e1d;
    }

    .codex-mac-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 3px 6px 11px;
      color: #f3f3f0;
      font-size: 13px;
      font-weight: 900;
    }

    .codex-mac-brand img {
      width: 18px;
      height: 18px;
      filter: invert(1);
    }

    .codex-new-task {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 32px;
      padding: 0 10px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 9px;
      color: rgba(244, 244, 240, .84);
      background: rgba(255, 255, 255, .055);
      font-size: 10px;
      font-weight: 820;
    }

    .codex-new-task b {
      color: rgba(255, 255, 255, .55);
      font-size: 15px;
      font-weight: 500;
    }

    .codex-sidebar-label {
      margin: 16px 6px 7px;
      color: rgba(204, 205, 201, .38);
      font-size: 7px;
      font-weight: 950;
      letter-spacing: .14em;
    }

    .codex-project-item {
      display: grid;
      grid-template-columns: 7px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 0 8px;
      border-radius: 9px;
      color: rgba(223, 225, 221, .58);
      font-size: 9px;
      font-weight: 760;
    }

    .codex-project-item i {
      width: 6px;
      height: 6px;
      border-radius: 2px;
      background: #696a66;
    }

    .codex-project-item.active {
      color: #f6f6f2;
      background: rgba(255, 255, 255, .08);
      box-shadow: inset 2px 0 0 #d7ba73;
    }

    .codex-project-item.active i {
      background: #d7ba73;
      box-shadow: 0 0 9px rgba(215, 186, 115, .34);
    }

    .codex-mac-main {
      display: grid;
      grid-template-rows: 49px minmax(0, 1fr) 24px;
      min-width: 0;
      min-height: 0;
      color: #292823;
      background: #f4f3ef;
    }

    .codex-thread-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 0 17px;
      border-bottom: 1px solid rgba(58, 54, 47, .1);
      background: rgba(255, 255, 255, .62);
    }

    .codex-thread-head span {
      display: grid;
      min-width: 0;
    }

    .codex-thread-head strong {
      overflow: hidden;
      font-size: 13px;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .codex-thread-head small {
      margin-top: 3px;
      color: #898278;
      font-size: 8px;
      font-weight: 720;
    }

    .codex-thread-head em {
      padding: 5px 8px;
      border: 1px solid rgba(45, 133, 91, .17);
      border-radius: 999px;
      color: #2c7756;
      background: rgba(70, 158, 114, .08);
      font-size: 8px;
      font-style: normal;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .codex-mac-content {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 232px;
      min-width: 0;
      min-height: 0;
    }

    .codex-transcript {
      min-width: 0;
      min-height: 0;
      padding: 15px 16px;
      overflow: hidden;
      background:
        radial-gradient(circle at 88% 12%, rgba(214, 183, 109, .08), transparent 24%),
        #f8f7f4;
    }

    .codex-user-task {
      margin-left: 54px;
      padding: 10px 12px;
      border: 1px solid rgba(57, 53, 46, .1);
      border-radius: 14px 14px 5px 14px;
      color: #34312b;
      background: white;
      box-shadow: 0 8px 20px rgba(54, 47, 36, .06);
      font-size: 10px;
      font-weight: 760;
      line-height: 1.45;
    }

    .codex-agent-message {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      align-items: start;
      gap: 9px;
      margin-top: 13px;
    }

    .codex-agent-avatar {
      display: grid;
      place-items: center;
      width: 27px;
      height: 27px;
      border-radius: 9px;
      background: #212220;
    }

    .codex-agent-avatar img {
      width: 15px;
      height: 15px;
      filter: invert(1);
    }

    .codex-agent-copy > p {
      margin: 0 0 9px;
      color: #48443d;
      font-size: 10px;
      font-weight: 690;
      line-height: 1.45;
    }

    .codex-action-list {
      display: grid;
      gap: 6px;
    }

    .codex-action-row {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr) auto;
      align-items: center;
      gap: 7px;
      min-height: 32px;
      padding: 0 9px;
      border: 1px solid rgba(72, 66, 55, .09);
      border-radius: 9px;
      color: #4d4941;
      background: rgba(255, 255, 255, .72);
      font-size: 9px;
      font-weight: 780;
    }

    .codex-action-row b {
      display: grid;
      place-items: center;
      width: 17px;
      height: 17px;
      border-radius: 6px;
      color: #28724f;
      background: rgba(47, 139, 92, .1);
      font-size: 9px;
    }

    .codex-action-row small {
      color: #aaa296;
      font-size: 7px;
      font-weight: 750;
    }

    .codex-delivery {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 10px 0 0 37px;
      padding: 8px 10px;
      border: 1px solid rgba(40, 137, 88, .18);
      border-radius: 10px;
      color: #286b4d;
      background: rgba(69, 157, 112, .07);
      font-size: 9px;
      font-weight: 900;
    }

    .codex-delivery i {
      display: grid;
      place-items: center;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      color: white;
      background: #3b9369;
      font-size: 9px;
      font-style: normal;
    }

    .codex-change-panel {
      min-width: 0;
      min-height: 0;
      padding: 12px 11px;
      overflow: hidden;
      border-left: 1px solid rgba(255, 255, 255, .07);
      color: rgba(235, 238, 235, .78);
      background: #202220;
    }

    .codex-change-tabs {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 0 3px 9px;
      color: rgba(226, 228, 224, .38);
      font-size: 8px;
      font-weight: 850;
    }

    .codex-change-tabs strong {
      color: #f0e1b7;
      font-size: 8px;
    }

    .codex-diff-file {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 8px;
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 8px 8px 0 0;
      color: rgba(238, 239, 235, .75);
      background: #292b29;
      font-size: 8px;
      font-weight: 820;
    }

    .codex-diff-file span { color: #74c594; }

    .codex-diff-code {
      padding: 8px;
      border: 1px solid rgba(255, 255, 255, .07);
      border-top: 0;
      border-radius: 0 0 8px 8px;
      color: rgba(221, 225, 219, .58);
      background: #171917;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 7px;
      line-height: 1.62;
      white-space: pre-line;
    }

    .codex-diff-code .minus { color: #d58e8e; }
    .codex-diff-code .plus { color: #79c99b; }

    .codex-terminal-card {
      margin-top: 10px;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 9px;
      color: rgba(224, 226, 222, .62);
      background: #151715;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 7px;
      line-height: 1.6;
    }

    .codex-terminal-card strong {
      display: block;
      margin-top: 5px;
      color: #72ca98;
      font-size: 8px;
    }

    .codex-mac-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      border-top: 1px solid rgba(60, 55, 48, .08);
      color: #9a9389;
      background: #efeee9;
      font-size: 7px;
      font-weight: 760;
    }

    .codex-mac-status strong { color: #4f715f; }

    .codex-mac-shot figcaption {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      padding: 0 6px;
      color: rgba(230, 225, 214, .54);
      font-size: 9px;
      font-weight: 740;
    }

    .codex-mac-shot figcaption strong {
      color: #efdca8;
      font-size: 11px;
      letter-spacing: .04em;
    }

    .agent-principle-stage {
      position: relative;
      display: grid;
      grid-template-columns: 430px minmax(0, 1fr);
      height: 560px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(128, 111, 80, .46);
      border-radius: 38px;
      color: #f8f5ee;
      background: #11100f;
      box-shadow: 0 28px 76px rgba(27, 23, 18, .26), inset 0 1px 0 rgba(255, 255, 255, .075);
    }

    .agent-principle-stage::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      opacity: .34;
      background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
      background-size: 40px 40px;
      -webkit-mask-image: radial-gradient(circle at 73% 49%, black, transparent 78%);
      mask-image: radial-gradient(circle at 73% 49%, black, transparent 78%);
      pointer-events: none;
    }

    .agent-principle-copy {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      min-width: 0;
      min-height: 0;
      padding: 31px 28px 26px 32px;
      border-right: 1px solid rgba(255, 255, 255, .075);
      background: linear-gradient(102deg, rgba(24, 22, 19, .98), rgba(17, 16, 15, .9));
      box-shadow: 28px 0 58px rgba(0, 0, 0, .18);
    }

    .agent-principle-kicker {
      margin: 0;
      color: #d7ba73;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .18em;
    }

    .agent-principle-copy h3 {
      margin: 9px 0 18px;
      color: #fffdf8;
      font-size: 29px;
      line-height: 1.2;
      letter-spacing: -.035em;
    }

    .agent-principle-steps {
      display: grid;
      align-content: start;
      gap: 7px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .agent-principle-step {
      position: relative;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      min-height: 57px;
      padding: 7px 12px 7px 9px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .075);
      border-radius: 15px;
      color: rgba(228, 229, 224, .58);
      background: rgba(255, 255, 255, .026);
    }

    .agent-principle-step::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      opacity: .2;
      background: #d7ba73;
      box-shadow: 0 0 13px rgba(215, 186, 115, .42);
    }

    .agent-principle-step b {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(215, 186, 115, .16);
      border-radius: 11px;
      color: rgba(229, 205, 145, .68);
      background: rgba(215, 186, 115, .06);
      font-size: 9px;
      letter-spacing: .08em;
    }

    .agent-principle-step span {
      display: grid;
      min-width: 0;
    }

    .agent-principle-step strong {
      color: rgba(248, 247, 242, .78);
      font-size: 15px;
      line-height: 1.15;
    }

    .agent-principle-step small {
      margin-top: 4px;
      color: rgba(188, 196, 193, .48);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.25;
    }

    .agent-principle-stop {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      margin-top: 14px;
      padding: 0 13px;
      border: 1px solid rgba(117, 216, 232, .15);
      border-radius: 14px;
      color: rgba(212, 226, 226, .66);
      background: rgba(91, 189, 206, .055);
      font-size: 10px;
      font-weight: 760;
      line-height: 1.45;
    }

    .agent-principle-stop b {
      flex: 0 0 auto;
      color: #86d9e8;
      font-size: 9px;
      letter-spacing: .1em;
    }

    .agent-principle-scene {
      position: relative;
      z-index: 2;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      perspective: 1200px;
      background:
        radial-gradient(circle at 49% 50%, rgba(122, 216, 232, .085), transparent 27%),
        linear-gradient(90deg, rgba(17, 16, 15, .7), rgba(8, 12, 13, .12));
    }

    .agent-principle-scene::before,
    .agent-principle-scene::after {
      content: "";
      position: absolute;
      z-index: 3;
      inset: 0;
      pointer-events: none;
    }

    .agent-principle-scene::before {
      background: linear-gradient(90deg, #11100f 0%, transparent 14%, transparent 88%, rgba(7, 10, 11, .58) 100%);
    }

    .agent-principle-scene::after {
      background: radial-gradient(circle at 50% 50%, transparent 38%, rgba(5, 7, 8, .18) 67%, rgba(5, 7, 8, .66) 100%);
    }

    .agent-principle-scene > img {
      position: absolute;
      z-index: 1;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      filter: saturate(.88) contrast(1.06) brightness(.94);
      transform-origin: 50% 52%;
      will-change: transform;
    }

    .agent-principle-core-label {
      position: absolute;
      z-index: 5;
      left: 50%;
      top: 51%;
      display: grid;
      justify-items: center;
      min-width: 128px;
      color: white;
      text-align: center;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .agent-principle-core-label i {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(255, 255, 255, .42);
      border-radius: 50%;
      background: rgba(7, 11, 12, .58);
      box-shadow: 0 0 0 8px rgba(134, 217, 232, .045), 0 0 36px rgba(134, 217, 232, .2);
      backdrop-filter: blur(5px);
    }

    .agent-principle-core-label img {
      width: 22px;
      height: 22px;
      filter: invert(1);
    }

    .agent-principle-core-label strong {
      margin-top: 9px;
      padding: 4px 9px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 999px;
      background: rgba(7, 11, 12, .66);
      box-shadow: 0 7px 22px rgba(0, 0, 0, .22);
      font-size: 10px;
      letter-spacing: .08em;
      backdrop-filter: blur(6px);
    }

    .agent-principle-core-label small {
      margin-top: 5px;
      color: rgba(216, 229, 229, .64);
      font-size: 7px;
      font-weight: 900;
      letter-spacing: .14em;
    }

    .agent-principle-tracer {
      position: absolute;
      z-index: 6;
      left: 0;
      top: 0;
      width: 9px;
      height: 9px;
      border: 1px solid white;
      border-radius: 50%;
      opacity: 0;
      background: white;
      box-shadow: 0 0 8px white, 0 0 18px rgba(134, 217, 232, .92), 0 0 34px rgba(215, 186, 115, .55);
      offset-path: path("M 166 280 C 145 128 285 66 485 74 C 710 64 846 166 846 286 C 846 432 678 482 493 478 C 286 482 145 420 166 280 Z");
      offset-rotate: 0deg;
      pointer-events: none;
      will-change: offset-distance, opacity, transform;
    }

    .slide.active .agent-phone-shell {
      animation: agent-showcase-arrive .7s cubic-bezier(.22, .78, .28, 1) both;
    }

    .slide.active .agent-bridge {
      animation: agent-showcase-arrive .58s cubic-bezier(.22, .78, .28, 1) .1s both;
    }

    .slide.active .codex-mac-shot {
      animation: agent-showcase-arrive .72s cubic-bezier(.22, .78, .28, 1) .15s both;
    }

    .slide.active .agent-principle-scene > img {
      animation: agent-principle-drift 14s ease-in-out infinite alternate;
    }

    .slide.active .agent-principle-tracer {
      animation: agent-principle-trace 12s linear .6s infinite;
    }

    .slide.active .agent-principle-step {
      animation: agent-principle-step 12s ease-in-out var(--loop-delay, 0s) infinite;
    }

    .slide.active .agent-principle-core-label i {
      animation: agent-principle-core 6s ease-in-out infinite;
    }

    @keyframes agent-showcase-arrive {
      from { opacity: 0; transform: translate3d(0, 15px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes agent-phone-dot {
      from { opacity: .28; transform: translateY(0); }
      to { opacity: 1; transform: translateY(-3px); }
    }

    @keyframes agent-principle-drift {
      from { transform: rotateX(1.1deg) rotateY(-1.2deg) scale(1.018); }
      to { transform: rotateX(-.7deg) rotateY(1.2deg) scale(1.045); }
    }

    @keyframes agent-principle-trace {
      0% { offset-distance: 0%; opacity: 0; transform: scale(.7); }
      4%, 94% { opacity: 1; transform: scale(1); }
      100% { offset-distance: 100%; opacity: 0; transform: scale(.72); }
    }

    @keyframes agent-principle-step {
      0%, 100% {
        color: rgba(228, 229, 224, .58);
        border-color: rgba(255, 255, 255, .075);
        background: rgba(255, 255, 255, .026);
        box-shadow: none;
        transform: translate3d(0, 0, 0);
      }
      5%, 14% {
        color: #fffef9;
        border-color: rgba(215, 186, 115, .48);
        background: linear-gradient(95deg, rgba(215, 186, 115, .13), rgba(134, 217, 232, .045));
        box-shadow: 0 0 25px rgba(215, 186, 115, .09), inset 0 1px 0 rgba(255, 255, 255, .06);
        transform: translate3d(5px, 0, 0);
      }
      22% {
        color: rgba(228, 229, 224, .58);
        border-color: rgba(255, 255, 255, .075);
        background: rgba(255, 255, 255, .026);
        box-shadow: none;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes agent-principle-core {
      0%, 100% { box-shadow: 0 0 0 8px rgba(134, 217, 232, .045), 0 0 36px rgba(134, 217, 232, .2); transform: scale(1); }
      50% { box-shadow: 0 0 0 12px rgba(134, 217, 232, .07), 0 0 46px rgba(215, 186, 115, .26); transform: scale(1.07); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .agent-phone-shell,
      .slide.active .agent-bridge,
      .slide.active .codex-mac-shot,
      .slide.active .agent-principle-scene > img,
      .slide.active .agent-principle-tracer,
      .slide.active .agent-principle-step,
      .slide.active .agent-principle-core-label i,
      .agent-phone-thinking i,
      .agent-phone-caret { animation: none !important; }

      .agent-principle-tracer { display: none !important; }
      .agent-principle-scene > img { transform: none !important; }
    }

    .ai-campus-value-statement {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 18px;
      min-height: 86px;
      padding: 0 24px;
      border: 1px solid rgba(73, 196, 217, .24);
      border-left: 0;
      border-radius: 0 20px 20px 0;
      color: white;
      background: linear-gradient(100deg, #102b62 0%, #1656a3 58%, #0b8794 100%);
      box-shadow: 0 14px 34px rgba(29, 77, 143, .16), inset 0 1px 0 rgba(255, 255, 255, .14);
    }

    .ai-campus-value-statement span {
      padding: 7px 10px;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 10px;
      color: #aef5e1;
      background: rgba(255, 255, 255, .08);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
    }

    .ai-campus-value-statement strong {
      color: white;
      font-size: 24px;
      line-height: 1.35;
      letter-spacing: -.02em;
    }

    /* 第29页：智慧校园教育能力中枢 */
    .smart-campus-v5 {
      position: relative;
      isolation: isolate;
      display: grid;
      grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
      height: 580px;
      overflow: hidden;
      border: 1px solid rgba(35, 94, 123, .16);
      border-radius: 34px;
      background:
        radial-gradient(circle at 9% 9%, rgba(38, 159, 145, .12), transparent 26%),
        radial-gradient(circle at 94% 91%, rgba(211, 155, 54, .12), transparent 28%),
        linear-gradient(135deg, #f8fcfd 0%, #f4f9fc 46%, #fffdf8 100%);
      box-shadow: 0 24px 58px rgba(24, 67, 93, .13), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

    .smart-campus-v5::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(25, 78, 104, .032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 78, 104, .032) 1px, transparent 1px);
      background-size: 36px 36px;
      -webkit-mask-image: linear-gradient(112deg, rgba(0, 0, 0, .72), transparent 68%);
      mask-image: linear-gradient(112deg, rgba(0, 0, 0, .72), transparent 68%);
    }

    .smart-campus-v5::after {
      content: "";
      position: absolute;
      top: 34px;
      bottom: 34px;
      left: 46.5%;
      width: 1px;
      pointer-events: none;
      background: linear-gradient(180deg, transparent, rgba(42, 115, 141, .24) 18%, rgba(42, 115, 141, .24) 82%, transparent);
      box-shadow: 18px 0 44px rgba(42, 115, 141, .08);
    }

    .smart-campus-orbit {
      position: relative;
      min-width: 0;
      overflow: hidden;
    }

    .smart-campus-orbit::before,
    .smart-campus-orbit::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .smart-campus-orbit::before {
      top: 53%;
      left: 50%;
      width: 390px;
      height: 300px;
      background: radial-gradient(ellipse, rgba(45, 151, 143, .12), rgba(61, 127, 177, .045) 47%, transparent 70%);
      filter: blur(4px);
      transform: translate(-50%, -50%);
    }

    .smart-campus-orbit::after {
      top: 52%;
      left: 50%;
      width: 510px;
      height: 420px;
      border: 1px solid rgba(47, 122, 153, .08);
      box-shadow: inset 0 0 46px rgba(49, 127, 161, .04);
      transform: translate(-50%, -50%) rotate(-8deg);
    }

    .smart-campus-orbit-caption {
      position: absolute;
      z-index: 8;
      top: 25px;
      left: 28px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #365f73;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .09em;
    }

    .smart-campus-orbit-caption::before {
      content: "";
      width: 26px;
      height: 3px;
      border-radius: 99px;
      background: linear-gradient(90deg, #269f91, #d39b36);
      box-shadow: 0 0 14px rgba(38, 159, 145, .26);
    }

    .smart-campus-ring,
    .smart-campus-energy {
      position: absolute;
      top: 53%;
      left: 50%;
      border-radius: 50%;
      pointer-events: none;
    }

    .smart-campus-ring {
      border: 1px solid rgba(48, 112, 143, .2);
      transform: translate(-50%, -50%) rotate(-8deg);
    }

    .smart-campus-ring.ring-a {
      width: 480px;
      height: 372px;
      border-color: rgba(38, 141, 137, .24);
      box-shadow: 0 0 34px rgba(38, 141, 137, .055), inset 0 0 26px rgba(38, 141, 137, .035);
    }

    .smart-campus-ring.ring-b {
      width: 370px;
      height: 286px;
      border-color: rgba(56, 119, 174, .23);
      transform: translate(-50%, -50%) rotate(10deg);
    }

    .smart-campus-ring.ring-c {
      width: 264px;
      height: 204px;
      border-color: rgba(205, 145, 44, .29);
      transform: translate(-50%, -50%) rotate(-3deg);
    }

    .smart-campus-ring::before,
    .smart-campus-ring::after {
      content: "";
      position: absolute;
      width: 7px;
      height: 7px;
      border: 2px solid white;
      border-radius: 50%;
      background: #2e948c;
      box-shadow: 0 0 0 5px rgba(46, 148, 140, .09), 0 0 18px rgba(46, 148, 140, .32);
    }

    .smart-campus-ring::before { top: 17%; right: 10%; }
    .smart-campus-ring::after { bottom: 12%; left: 14%; background: #ca9133; box-shadow: 0 0 0 5px rgba(202, 145, 51, .08), 0 0 18px rgba(202, 145, 51, .28); }

    .smart-campus-energy {
      width: 486px;
      height: 378px;
      background: conic-gradient(from 25deg, transparent 0 18%, rgba(38, 159, 145, .94) 22%, transparent 27% 57%, rgba(211, 155, 54, .9) 62%, transparent 67% 100%);
      filter: drop-shadow(0 0 7px rgba(38, 159, 145, .42));
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
      mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
      transform: translate(-50%, -50%) rotate(-8deg);
    }

    .smart-campus-core {
      position: absolute;
      z-index: 5;
      top: 53%;
      left: 50%;
      display: grid;
      place-content: center;
      width: 190px;
      height: 190px;
      border: 1px solid rgba(255, 255, 255, .74);
      border-radius: 50%;
      color: white;
      text-align: center;
      background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .26), transparent 24%),
        linear-gradient(145deg, #143f62 0%, #1d6e78 54%, #238f82 100%);
      box-shadow: 0 25px 48px rgba(21, 83, 94, .28), 0 0 0 12px rgba(255, 255, 255, .74), 0 0 0 13px rgba(38, 137, 135, .14);
      transform: translate(-50%, -50%);
    }

    .smart-campus-core::before {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      background: conic-gradient(from 15deg, #63d5c4, transparent 18% 42%, #e5b656 52%, transparent 65% 86%, #63d5c4);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
      mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    }

    .smart-campus-core small,
    .smart-campus-core span {
      display: block;
      font-weight: 800;
    }

    .smart-campus-core small {
      margin-bottom: 8px;
      color: #aef0e4;
      font-size: 13px;
      letter-spacing: .12em;
    }

    .smart-campus-core strong {
      color: #ffffff;
      font-size: 34px;
      font-weight: 950;
      line-height: 1.08;
      letter-spacing: -.045em;
      text-shadow: 0 4px 18px rgba(2, 32, 55, .28);
    }

    .smart-campus-core span {
      margin-top: 9px;
      color: rgba(236, 255, 252, .82);
      font-size: 14px;
      letter-spacing: .05em;
    }

    .smart-campus-node {
      position: absolute;
      z-index: 7;
      display: grid;
      grid-template-columns: 40px 1fr;
      grid-template-rows: 28px 18px;
      column-gap: 5px;
      align-items: center;
      width: 122px;
      min-height: 62px;
      padding: 7px 10px 7px 8px;
      border: 1px solid rgba(var(--node-rgb), .28);
      border-radius: 18px;
      color: #153b53;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 13px 26px rgba(var(--node-rgb), .12), inset 0 1px 0 rgba(255, 255, 255, .95);
      backdrop-filter: blur(10px) saturate(1.12);
    }

    .smart-campus-node::before {
      content: "";
      grid-row: 1 / 3;
      align-self: stretch;
      border-radius: 13px;
      background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .92), transparent 20%),
        linear-gradient(145deg, rgba(var(--node-rgb), .25), rgba(var(--node-rgb), .95));
      box-shadow: 0 7px 15px rgba(var(--node-rgb), .17);
    }

    .smart-campus-node b {
      align-self: end;
      color: #153b53;
      font-size: 24px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .smart-campus-node small {
      align-self: start;
      color: rgba(var(--node-rgb), .95);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
    }

    .smart-campus-node.n1 { top: 66px; left: 50%; transform: translateX(-50%); }
    .smart-campus-node.n2 { top: 140px; right: 18px; }
    .smart-campus-node.n3 { right: 23px; bottom: 93px; }
    .smart-campus-node.n4 { bottom: 42px; left: 50%; transform: translateX(-50%); }
    .smart-campus-node.n5 { bottom: 93px; left: 23px; }
    .smart-campus-node.n6 { top: 140px; left: 18px; }

    .smart-campus-architecture {
      position: relative;
      display: grid;
      grid-template-rows: 25px 72px 21px 82px 23px minmax(0, 1fr);
      min-width: 0;
      min-height: 0;
      padding: 24px 27px 24px 29px;
      overflow: hidden;
      background:
        radial-gradient(circle at 9% 10%, rgba(38, 159, 145, .1), transparent 27%),
        linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(239, 248, 250, .36));
    }

    .smart-campus-architecture::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(120deg, transparent 0 74%, rgba(38, 159, 145, .045) 74% 75%, transparent 75%),
        linear-gradient(60deg, transparent 0 81%, rgba(211, 155, 54, .045) 81% 82%, transparent 82%);
    }

    .campus-arch-caption {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: #365f73;
    }

    .campus-arch-caption strong {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .08em;
    }

    .campus-arch-caption strong::before {
      content: "";
      width: 27px;
      height: 3px;
      border-radius: 99px;
      background: linear-gradient(90deg, #269f91, #d39b36);
      box-shadow: 0 0 13px rgba(38, 159, 145, .24);
    }

    .campus-arch-caption span {
      color: #668093;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .campus-arch-goal {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 46px 1fr auto;
      align-items: center;
      gap: 14px;
      margin: 0 34px;
      padding: 9px 18px 9px 12px;
      overflow: hidden;
      border: 1px solid rgba(204, 146, 47, .28);
      border-radius: 20px;
      background: linear-gradient(105deg, rgba(255, 251, 239, .96), rgba(255, 255, 255, .9) 62%, rgba(246, 252, 250, .92));
      box-shadow: 0 12px 25px rgba(121, 94, 40, .09), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

    .campus-arch-goal::after {
      content: "";
      position: absolute;
      top: -28px;
      right: -14px;
      width: 126px;
      height: 126px;
      border: 1px solid rgba(39, 147, 137, .1);
      border-radius: 50%;
      box-shadow: 0 0 0 15px rgba(39, 147, 137, .035), 0 0 0 30px rgba(39, 147, 137, .02);
    }

    .campus-arch-goal-icon {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      color: #b77d1f;
      background: linear-gradient(145deg, #fff9e7, #f3e1b4);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 7px 16px rgba(177, 124, 31, .1);
    }

    .campus-arch-goal-icon svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .campus-arch-goal-copy {
      position: relative;
      z-index: 2;
      min-width: 0;
    }

    .campus-arch-goal-copy small,
    .campus-arch-goal-copy strong {
      display: block;
    }

    .campus-arch-goal-copy small {
      margin-bottom: 2px;
      color: #a07122;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .1em;
    }

    .campus-arch-goal-copy strong {
      color: #163b53;
      font-size: 25px;
      font-weight: 950;
      line-height: 1.05;
      letter-spacing: -.025em;
    }

    .campus-arch-goal > strong {
      position: relative;
      z-index: 2;
      color: #247c73;
      font-size: 16px;
      font-weight: 900;
      white-space: nowrap;
    }

    .campus-arch-link {
      position: relative;
      z-index: 3;
      justify-self: center;
      width: 2px;
      height: 100%;
      background: linear-gradient(180deg, rgba(43, 142, 134, .22), rgba(43, 142, 134, .78));
      transform-origin: top center;
    }

    .campus-arch-link::before {
      content: "";
      position: absolute;
      right: -4px;
      bottom: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #2d9389;
      border-bottom: 2px solid #2d9389;
      transform: rotate(45deg);
    }

    .campus-arch-hub {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 17px;
      margin: 0 10px;
      padding: 12px 22px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 21px;
      color: #ffffff;
      background: linear-gradient(108deg, #153c5a 0%, #1c6570 61%, #25877d 100%);
      box-shadow: 0 15px 30px rgba(20, 76, 87, .2), inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .campus-arch-hub::after {
      content: "";
      position: absolute;
      top: -42px;
      right: 56px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .13), transparent 68%);
    }

    .campus-arch-hub > span {
      position: relative;
      z-index: 2;
      padding: 7px 9px;
      border: 1px solid rgba(255, 225, 163, .25);
      border-radius: 10px;
      color: #ffe1a7;
      background: rgba(255, 255, 255, .075);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .08em;
      white-space: nowrap;
    }

    .campus-arch-hub-copy {
      position: relative;
      z-index: 2;
      min-width: 0;
    }

    .campus-arch-hub-copy strong,
    .campus-arch-hub-copy small {
      display: block;
    }

    .campus-arch-hub-copy strong {
      color: #ffffff;
      font-size: 28px;
      font-weight: 950;
      line-height: 1.04;
      letter-spacing: -.035em;
    }

    .campus-arch-hub-copy small {
      margin-top: 5px;
      color: rgba(231, 255, 251, .77);
      font-size: 13px;
      font-weight: 750;
    }

    .campus-arch-hub > strong {
      position: relative;
      z-index: 2;
      color: #b7f2e8;
      font-size: 15px;
      font-weight: 900;
      white-space: nowrap;
    }

    .campus-arch-layers {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-rows: repeat(3, minmax(0, 1fr));
      gap: 8px;
      min-height: 0;
      padding-left: 15px;
    }

    .campus-arch-layers::before {
      content: "";
      position: absolute;
      top: 9px;
      bottom: 9px;
      left: 1px;
      width: 4px;
      border-radius: 99px;
      background: linear-gradient(180deg, #c88b2d, #279789 50%, #3779b1);
      box-shadow: 0 0 13px rgba(50, 126, 148, .17);
    }

    .campus-arch-layers::after {
      content: "";
      position: absolute;
      top: 4px;
      left: -3px;
      width: 12px;
      height: 12px;
      border-top: 3px solid #c88b2d;
      border-left: 3px solid #c88b2d;
      transform: rotate(45deg);
    }

    .campus-arch-layer {
      position: relative;
      display: grid;
      grid-template-columns: 116px minmax(0, 1fr) minmax(0, 1fr) 112px;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 7px 9px 7px 12px;
      border: 1px solid rgba(var(--arch-rgb), .18);
      border-radius: 16px;
      background: linear-gradient(100deg, rgba(var(--arch-rgb), .09), rgba(255, 255, 255, .9) 42%, rgba(255, 255, 255, .72));
      box-shadow: 0 8px 18px rgba(35, 77, 97, .065), inset 0 1px 0 rgba(255, 255, 255, .94);
    }

    .campus-arch-layer::before {
      content: "";
      position: absolute;
      top: 15px;
      bottom: 15px;
      left: -16px;
      width: 15px;
      border-top: 2px solid rgba(var(--arch-rgb), .5);
    }

    .campus-arch-layer-head {
      min-width: 0;
      padding-right: 8px;
      border-right: 1px solid rgba(var(--arch-rgb), .16);
    }

    .campus-arch-layer-head small,
    .campus-arch-layer-head strong {
      display: block;
    }

    .campus-arch-layer-head small {
      margin-bottom: 3px;
      color: rgba(var(--arch-rgb), .92);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .06em;
    }

    .campus-arch-layer-head strong {
      color: #173d54;
      font-size: 18px;
      font-weight: 950;
      line-height: 1.15;
      white-space: nowrap;
    }

    .campus-arch-unit {
      display: grid;
      grid-template-columns: 35px minmax(0, 1fr);
      align-items: center;
      gap: 7px;
      min-width: 0;
      min-height: 48px;
      padding: 5px 7px;
      border: 1px solid rgba(var(--arch-rgb), .16);
      border-radius: 12px;
      background: rgba(255, 255, 255, .82);
    }

    .campus-arch-unit b {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 11px;
      color: #ffffff;
      background: linear-gradient(145deg, rgba(var(--arch-rgb), .7), rgb(var(--arch-rgb)));
      box-shadow: 0 6px 13px rgba(var(--arch-rgb), .16);
      font-size: 17px;
      font-weight: 950;
      white-space: nowrap;
    }

    .campus-arch-unit span {
      color: #33566b;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.22;
      white-space: nowrap;
    }

    .campus-arch-layer > p {
      margin: 0;
      color: rgb(var(--arch-rgb));
      font-size: 14px;
      font-weight: 900;
      line-height: 1.25;
      text-align: center;
    }

    .smart-campus-impact {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      min-width: 0;
      padding: 34px 40px 32px 44px;
    }

    .smart-campus-kicker {
      display: inline-flex;
      justify-self: start;
      align-items: center;
      gap: 9px;
      margin: 0;
      padding: 7px 12px;
      border: 1px solid rgba(37, 137, 129, .2);
      border-radius: 999px;
      color: #22796f;
      background: rgba(234, 248, 245, .86);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .06em;
    }

    .smart-campus-kicker::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #d39b36;
      box-shadow: 0 0 0 5px rgba(211, 155, 54, .1);
    }

    .smart-campus-impact h3 {
      margin: 17px 0 22px;
      color: #143650;
      font-size: 38px;
      font-weight: 900;
      line-height: 1.24;
      letter-spacing: -.04em;
    }

    .smart-campus-impact h3 em {
      position: relative;
      display: inline-block;
      color: #167f76;
      font-style: normal;
    }

    .smart-campus-impact h3 em::after {
      content: "";
      position: absolute;
      right: 1px;
      bottom: -3px;
      left: 1px;
      height: 5px;
      border-radius: 99px;
      background: linear-gradient(90deg, rgba(38, 159, 145, .7), rgba(211, 155, 54, .58));
      opacity: .66;
    }

    .smart-campus-outcomes {
      position: relative;
      display: grid;
      align-content: center;
      gap: 11px;
      min-height: 0;
      padding-left: 16px;
    }

    .smart-campus-outcomes::before {
      content: "";
      position: absolute;
      top: 30px;
      bottom: 30px;
      left: 0;
      width: 3px;
      border-radius: 99px;
      background: linear-gradient(180deg, #259c90, #397ab2 52%, #d39b36);
      box-shadow: 0 0 16px rgba(48, 126, 150, .2);
    }

    .smart-campus-outcome {
      position: relative;
      display: grid;
      grid-template-columns: 32px 52px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      min-height: 82px;
      padding: 10px 20px 10px 13px;
      overflow: hidden;
      border: 1px solid rgba(var(--impact-rgb), .17);
      border-radius: 19px;
      background: linear-gradient(100deg, rgba(var(--impact-rgb), .075), rgba(255, 255, 255, .88) 42%, rgba(255, 255, 255, .68));
      box-shadow: 0 10px 22px rgba(34, 77, 99, .075), inset 0 1px 0 rgba(255, 255, 255, .92);
    }

    .smart-campus-outcome::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 92px;
      height: 100%;
      background: linear-gradient(115deg, transparent, rgba(var(--impact-rgb), .07));
      clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%);
    }

    .smart-campus-outcome-index {
      color: rgba(var(--impact-rgb), .72);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .09em;
    }

    .smart-campus-outcome-icon {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(var(--impact-rgb), .2);
      border-radius: 15px;
      color: rgb(var(--impact-rgb));
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 8px 18px rgba(var(--impact-rgb), .11);
    }

    .smart-campus-outcome-icon svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .smart-campus-outcome div {
      position: relative;
      z-index: 2;
      min-width: 0;
    }

    .smart-campus-outcome small {
      display: block;
      margin-bottom: 2px;
      color: rgb(var(--impact-rgb));
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .08em;
    }

    .smart-campus-outcome strong {
      display: block;
      color: #183b51;
      font-size: 21px;
      font-weight: 850;
      line-height: 1.3;
      letter-spacing: -.012em;
    }

    .smart-campus-verdict {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 15px;
      min-height: 66px;
      margin-top: 17px;
      padding: 10px 20px;
      overflow: hidden;
      border-radius: 18px;
      color: white;
      background: linear-gradient(105deg, #163b59 0%, #1c6570 64%, #2b8379 100%);
      box-shadow: 0 14px 26px rgba(21, 76, 87, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .smart-campus-verdict strong {
      padding: 7px 10px;
      border: 1px solid rgba(255, 224, 160, .28);
      border-radius: 10px;
      color: #ffe2a8;
      background: rgba(255, 255, 255, .08);
      font-size: 15px;
      font-weight: 950;
      white-space: nowrap;
    }

    .smart-campus-verdict span {
      color: rgba(255, 255, 255, .94);
      font-size: 17px;
      font-weight: 780;
      line-height: 1.35;
    }

    .slide.active .smart-campus-energy {
      animation: smart-campus-orbit-spin 22s linear infinite;
    }

    .slide.active .smart-campus-core {
      animation: smart-campus-core-in .68s .08s cubic-bezier(.18, .78, .22, 1) both, smart-campus-core-breathe 5.2s 1.1s ease-in-out infinite;
    }

    .slide.active .smart-campus-node {
      animation: smart-campus-node-in .54s var(--campus-delay, .12s) cubic-bezier(.18, .8, .22, 1) both;
    }

    .slide.active .campus-arch-goal,
    .slide.active .campus-arch-hub,
    .slide.active .campus-arch-layer {
      animation: campus-arch-in .5s var(--arch-delay, .08s) cubic-bezier(.2, .78, .22, 1) both;
    }

    .slide.active .campus-arch-link {
      animation: campus-arch-link-in .42s var(--arch-delay, .16s) ease-out both;
    }

    .slide.active .smart-campus-impact > * {
      animation: smart-campus-impact-in .5s var(--impact-delay, .12s) cubic-bezier(.2, .78, .22, 1) both;
    }

    .slide.active .smart-campus-outcome {
      animation: smart-campus-outcome-in .52s var(--impact-delay, .2s) cubic-bezier(.2, .78, .22, 1) both;
    }

    @keyframes smart-campus-orbit-spin {
      from { transform: translate(-50%, -50%) rotate(-8deg); }
      to { transform: translate(-50%, -50%) rotate(352deg); }
    }

    @keyframes smart-campus-core-in {
      from { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes smart-campus-core-breathe {
      0%, 100% { box-shadow: 0 25px 48px rgba(21, 83, 94, .28), 0 0 0 12px rgba(255, 255, 255, .74), 0 0 0 13px rgba(38, 137, 135, .14); }
      50% { box-shadow: 0 28px 55px rgba(21, 83, 94, .32), 0 0 0 12px rgba(255, 255, 255, .8), 0 0 0 16px rgba(38, 137, 135, .11), 0 0 38px rgba(38, 159, 145, .15); }
    }

    @keyframes smart-campus-node-in {
      from { opacity: 0; filter: blur(3px); }
      to { opacity: 1; filter: blur(0); }
    }

    @keyframes campus-arch-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes campus-arch-link-in {
      from { opacity: 0; transform: scaleY(0); }
      to { opacity: 1; transform: scaleY(1); }
    }

    @keyframes smart-campus-impact-in {
      from { opacity: 0; transform: translateY(9px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes smart-campus-outcome-in {
      from { opacity: 0; transform: translateX(12px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .smart-campus-energy,
      .slide.active .smart-campus-core,
      .slide.active .smart-campus-node,
      .slide.active .campus-arch-goal,
      .slide.active .campus-arch-hub,
      .slide.active .campus-arch-layer,
      .slide.active .campus-arch-link,
      .slide.active .smart-campus-impact > *,
      .slide.active .smart-campus-outcome {
        opacity: 1 !important;
        filter: none !important;
        animation: none !important;
      }
    }

    /* 第29页：AI 贯穿教师教学全过程 */
    .teacher-workflow-v4 {
      display: grid;
      grid-template-rows: minmax(0, 1fr) 94px;
      gap: 18px;
      height: 580px;
    }

    .teacher-workflow-map {
      position: relative;
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(36, 90, 137, .14);
      border-radius: 27px;
      background:
        radial-gradient(circle at 4% 0%, rgba(39, 156, 145, .09), transparent 29%),
        radial-gradient(circle at 96% 100%, rgba(210, 156, 54, .09), transparent 30%),
        linear-gradient(145deg, #fbfdff 0%, #f5f9fc 54%, #fffdf8 100%);
      box-shadow: 0 20px 46px rgba(27, 68, 103, .1), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .teacher-workflow-map::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(24, 73, 108, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 73, 108, .025) 1px, transparent 1px);
      background-size: 34px 34px;
      -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 78%);
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 78%);
    }

    .teacher-workflow-intro {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      height: 68px;
      padding: 22px 30px 0;
    }

    .teacher-workflow-intro strong {
      color: #163650;
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -.02em;
    }

    .teacher-workflow-intro span {
      color: #5f788b;
      font-size: 15px;
      font-weight: 750;
    }

    .teacher-workflow-track {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      height: calc(100% - 68px);
      padding: 0 18px 23px;
    }

    .teacher-workflow-track::before,
    .teacher-workflow-track::after {
      content: "";
      position: absolute;
      z-index: 0;
      top: 42px;
      left: 12.5%;
      right: 12.5%;
      height: 2px;
      border-radius: 999px;
    }

    .teacher-workflow-track::before { background: #d8e4ec; }

    .teacher-workflow-track::after {
      background: linear-gradient(90deg, #23988c 0%, #2e78b8 37%, #4e80bf 68%, #d39b36 100%);
      box-shadow: 0 0 12px rgba(45, 128, 168, .24);
      transform: scaleX(0);
      transform-origin: left center;
    }

    .teacher-workflow-step {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-rows: 86px 58px minmax(0, 1fr);
      min-width: 0;
      padding: 0 26px 15px;
    }

    .teacher-workflow-step + .teacher-workflow-step {
      border-left: 1px solid rgba(32, 78, 112, .09);
    }

    .teacher-workflow-node {
      position: relative;
      display: grid;
      place-items: center;
      align-self: start;
      width: 68px;
      height: 68px;
      margin: 8px auto 0;
      border: 1px solid rgba(var(--workflow-rgb), .28);
      border-radius: 50%;
      color: rgb(var(--workflow-rgb));
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 10px 24px rgba(var(--workflow-rgb), .13), 0 0 0 7px rgba(var(--workflow-rgb), .07);
    }

    .teacher-workflow-node b {
      font-size: 27px;
      font-weight: 950;
      line-height: 1;
    }

    .teacher-workflow-step header {
      align-self: center;
      text-align: center;
    }

    .teacher-workflow-step header span {
      display: block;
      margin-bottom: 3px;
      color: rgb(var(--workflow-rgb));
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .13em;
    }

    .teacher-workflow-step h3 {
      margin: 0;
      color: #143550;
      font-size: 27px;
      font-weight: 950;
      letter-spacing: -.02em;
    }

    .teacher-workflow-items {
      display: grid;
      align-content: start;
      gap: 0;
      margin: 9px 0 0;
      padding: 0;
      list-style: none;
    }

    .teacher-workflow-items li {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 38px;
      padding: 6px 4px 8px 30px;
      color: #304e63;
      font-size: 17px;
      font-weight: 770;
      line-height: 1.35;
      letter-spacing: .005em;
    }

    .teacher-workflow-items li::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 3px;
      width: 15px;
      height: 15px;
      border: 1px solid rgba(var(--workflow-rgb), .32);
      border-radius: 50%;
      background: radial-gradient(circle, rgb(var(--workflow-rgb)) 0 3px, rgba(var(--workflow-rgb), .12) 3.5px 100%);
      box-shadow: 0 3px 8px rgba(var(--workflow-rgb), .11);
      transform: translateY(-54%);
    }

    .teacher-workflow-items li::after {
      content: "";
      position: absolute;
      right: 4px;
      bottom: 0;
      left: 30px;
      height: 1px;
      background: linear-gradient(90deg, rgba(var(--workflow-rgb), .28), rgba(var(--workflow-rgb), .08) 72%, transparent);
    }

    .teacher-workflow-items li:last-child::after {
      opacity: .46;
    }

    .teacher-workflow-owner {
      display: grid;
      grid-template-columns: .82fr 52px 1.28fr;
      align-items: center;
      gap: 24px;
      overflow: hidden;
      padding: 0 30px;
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 23px;
      color: #ffffff;
      background: linear-gradient(110deg, #102a4c 0%, #174d68 52%, #1d645f 100%);
      box-shadow: 0 16px 34px rgba(20, 61, 88, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .teacher-workflow-owner div {
      display: flex;
      align-items: baseline;
      gap: 12px;
      min-width: 0;
    }

    .teacher-workflow-owner span {
      flex: 0 0 auto;
      color: #9ce7db;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .teacher-workflow-owner strong {
      color: #ffffff;
      font-size: 20px;
      font-weight: 850;
      line-height: 1.35;
    }

    .teacher-workflow-owner .is-teacher span { color: #ffd77c; }

    .teacher-workflow-owner-arrow {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 50%;
      background: rgba(255, 255, 255, .08);
    }

    .teacher-workflow-owner-arrow svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: #d9fff8;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .slide.active .teacher-workflow-track::after {
      animation: teacher-workflow-line-in 1.05s .12s cubic-bezier(.2, .78, .2, 1) both;
    }

    .slide.active .teacher-workflow-step {
      animation: teacher-workflow-step-in .48s var(--workflow-delay, .12s) cubic-bezier(.2, .78, .2, 1) both;
    }

    .slide.active .teacher-workflow-owner {
      animation: teacher-workflow-owner-in .52s .62s cubic-bezier(.2, .78, .2, 1) both;
    }

    @keyframes teacher-workflow-line-in {
      from { opacity: 0; transform: scaleX(0); }
      to { opacity: 1; transform: scaleX(1); }
    }

    @keyframes teacher-workflow-step-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes teacher-workflow-owner-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .teacher-workflow-track::after,
      .slide.active .teacher-workflow-step,
      .slide.active .teacher-workflow-owner { animation: none !important; }

      .teacher-workflow-track::after { transform: scaleX(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .multimodal-signal,
      .slide.active .multimodal-flow::after,
      .slide.active .multimodal-visual > img,
      .slide.active .multimodal-visual::after,
      .slide.active .multimodal-fusion-marker::before,
      .slide.active .multimodal-fusion-marker::after { animation: none !important; }
    }

    .band-stack {
      display: grid;
      gap: 14px;
    }

    .band {
      display: grid;
      grid-template-columns: 112px 260px 1fr;
      align-items: center;
      min-height: 94px;
      padding: 0 28px 0 18px;
      border: 1px solid rgba(42, 82, 169, .16);
      background: linear-gradient(90deg, #f1f5ff, #fff);
      box-shadow: 0 9px 24px rgba(30, 61, 128, .05);
    }

    .band:nth-child(even) {
      background: linear-gradient(90deg, #f7f3ff, #fff);
    }

    .band .band-no {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      color: white;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      font-size: 20px;
      font-weight: 900;
    }

    .band strong {
      color: var(--ink);
      font-size: 29px;
    }

    .band span {
      color: var(--text);
      font-size: 22px;
      line-height: 1.45;
    }

    .timeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 20px;
      height: 486px;
      margin-top: 2px;
    }

    .timeline::before {
      content: "";
      position: absolute;
      inset: -24px -28px;
      pointer-events: none;
      background:
        radial-gradient(circle at 12% 10%, rgba(63, 116, 214, .08), transparent 27%),
        radial-gradient(circle at 88% 88%, rgba(27, 157, 125, .08), transparent 25%);
    }

    .time-point {
      --policy-accent: 43, 103, 201;
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 18px 20px 16px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(var(--policy-accent), .25);
      border-radius: 22px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(var(--policy-accent), .055)),
        rgba(255, 255, 255, .92);
      box-shadow:
        0 18px 42px rgba(26, 56, 105, .08),
        inset 0 1px 0 rgba(255, 255, 255, .92);
      text-align: left;
      transform-origin: center bottom;
    }

    .time-point::before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      border-radius: 22px 22px 0 0;
      background: linear-gradient(90deg, rgba(var(--policy-accent), .35), rgb(var(--policy-accent)), rgba(var(--policy-accent), .18));
      box-shadow: 0 0 18px rgba(var(--policy-accent), .24);
    }

    .time-point::after {
      content: attr(data-year);
      position: absolute;
      z-index: -1;
      right: -8px;
      bottom: -30px;
      color: rgba(var(--policy-accent), .07);
      font-size: 100px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -7px;
      pointer-events: none;
    }

    .policy-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 10px;
    }

    .policy-card-meta strong {
      color: rgb(var(--policy-accent));
      font-size: 27px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.7px;
    }

    .policy-card-meta span {
      flex: 0 0 auto;
      padding: 5px 10px;
      border: 1px solid rgba(var(--policy-accent), .22);
      border-radius: 999px;
      color: rgb(var(--policy-accent));
      background: rgba(var(--policy-accent), .075);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: .08em;
    }

    .time-point h3 {
      position: relative;
      z-index: 1;
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 22px;
      font-weight: 900;
      line-height: 1.28;
      letter-spacing: -.3px;
    }

    .policy-card-publisher {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      margin-top: auto;
      margin-bottom: 8px;
    }

    .policy-card-publisher span {
      flex: 0 0 auto;
      padding: 4px 7px;
      border: 1px solid rgba(var(--policy-accent), .2);
      border-radius: 7px;
      color: rgb(var(--policy-accent));
      background: rgba(var(--policy-accent), .075);
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: .08em;
    }

    .policy-card-publisher strong {
      min-width: 0;
      color: #33445f;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.25;
    }

    .time-point p {
      position: relative;
      z-index: 1;
      margin: 0;
      max-width: 96%;
      color: #56647b;
      font-size: 14px;
      line-height: 1.35;
    }

    .time-point.is-long-title h3 {
      font-size: 20px;
      line-height: 1.3;
    }

    .slide.active .time-point {
      animation: policy-card-in .62s cubic-bezier(.2, .78, .22, 1) var(--card-delay, 0s) both;
    }

    @keyframes policy-card-in {
      from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
        box-shadow: 0 8px 22px rgba(26, 56, 105, .04);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .time-point {
        animation: none;
      }
    }

    /* 政策落地页：明亮、克制的控制台视觉系统（第16—20页） */
    .policy-v2-stage {
      --v2-ink: #12314a;
      --v2-muted: #5b7085;
      position: relative;
      height: 520px;
      padding: 22px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(58, 115, 143, .2);
      border-radius: 34px;
      color: var(--v2-ink);
      background:
        radial-gradient(circle at 6% 0%, rgba(88, 205, 185, .2), transparent 29%),
        radial-gradient(circle at 96% 100%, rgba(255, 205, 112, .18), transparent 30%),
        linear-gradient(135deg, #f7fffc 0%, #f4fbff 50%, #fffaf1 100%);
      box-shadow: 0 26px 70px rgba(31, 83, 106, .13), inset 0 1px 0 rgba(255, 255, 255, .95);
    }

    .policy-v2-stage::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;
      opacity: .42;
      background-image:
        linear-gradient(rgba(35, 110, 132, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35, 110, 132, .055) 1px, transparent 1px);
      background-size: 34px 34px;
      -webkit-mask-image: radial-gradient(circle at 58% 48%, black, transparent 82%);
      mask-image: radial-gradient(circle at 58% 48%, black, transparent 82%);
    }

    .policy-v2-stage::after {
      content: "";
      position: absolute;
      z-index: 0;
      top: -130px;
      right: -80px;
      width: 360px;
      height: 360px;
      border: 1px solid rgba(47, 136, 157, .14);
      border-radius: 50%;
      box-shadow: 0 0 0 58px rgba(52, 166, 161, .035), 0 0 0 116px rgba(232, 181, 79, .025);
      pointer-events: none;
    }

    .policy-v2-stage > * { position: relative; z-index: 1; min-width: 0; }

    .policy-v2-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #1c7680;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: .17em;
    }

    .policy-v2-kicker::before {
      content: "";
      width: 24px;
      height: 3px;
      border-radius: 99px;
      background: linear-gradient(90deg, #2ab69c, #e3a83c);
      box-shadow: 0 0 12px rgba(42, 182, 156, .28);
    }

    .policy-v2-stage h3,
    .policy-v2-stage p { margin: 0; }

    .policy-v2-stage svg {
      display: block;
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* 第16页：学校治理闭环 */
    .school-policy-v2 {
      display: grid;
      grid-template-columns: .78fr 1.42fr;
      gap: 18px;
    }

    .school-v2-core {
      display: flex;
      flex-direction: column;
      padding: 30px;
      overflow: hidden;
      border-radius: 25px;
      color: #f6ffff;
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 215, 122, .2), transparent 33%),
        linear-gradient(145deg, #0c5669 0%, #106b6d 54%, #23745f 100%);
      box-shadow: 0 20px 46px rgba(18, 95, 99, .22), inset 0 1px 0 rgba(255, 255, 255, .16);
    }

    .school-v2-core::after {
      content: "";
      position: absolute;
      right: -78px;
      bottom: -86px;
      width: 260px;
      height: 260px;
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 50%;
      box-shadow: 0 0 0 36px rgba(255, 255, 255, .025), 0 0 0 72px rgba(255, 255, 255, .018);
    }

    .school-v2-core .policy-v2-kicker { color: #bff7e8; font-size: 13px; }
    .school-v2-core .policy-v2-kicker::before { background: linear-gradient(90deg, #7cf4d7, #ffd47c); }

    .school-v2-core h3 {
      margin-top: 26px;
      color: #ffffff;
      font-size: 38px;
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: -.035em;
    }

    .school-v2-core h3 em {
      color: #ffe09a;
      font-style: normal;
    }

    .school-v2-core > p {
      margin-top: 17px;
      max-width: 92%;
      color: rgba(238, 255, 253, .78);
      font-size: 18px;
      font-weight: 620;
      line-height: 1.55;
    }

    .school-v2-question {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 24px;
    }

    .school-v2-question span {
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 999px;
      color: #eafffa;
      background: rgba(255, 255, 255, .08);
      font-size: 15px;
      font-weight: 800;
    }

    .school-v2-metric {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: auto;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 255, 255, .16);
      color: rgba(230, 255, 249, .72);
      font-size: 15px;
      font-weight: 700;
    }

    .school-v2-metric strong { color: #ffffff; font-size: 23px; }

    .school-v2-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .school-v2-card {
      --card-rgb: 34, 151, 138;
      position: relative;
      display: grid;
      grid-template-columns: 48px 1fr;
      align-content: center;
      gap: 14px;
      padding: 15px 17px;
      overflow: hidden;
      border: 1px solid rgba(var(--card-rgb), .19);
      border-radius: 19px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(var(--card-rgb), .06));
      box-shadow: 0 12px 26px rgba(42, 89, 111, .075), inset 0 1px 0 #fff;
    }

    .school-v2-card::after {
      content: attr(data-no);
      position: absolute;
      right: 9px;
      bottom: -7px;
      color: rgba(var(--card-rgb), .08);
      font-size: 49px;
      font-weight: 950;
      line-height: 1;
    }

    .school-v2-icon {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(var(--card-rgb), .2);
      border-radius: 14px;
      color: rgb(var(--card-rgb));
      background: rgba(var(--card-rgb), .09);
      box-shadow: 0 8px 18px rgba(var(--card-rgb), .1);
      font-size: 20px;
      font-weight: 900;
    }

    .school-v2-card h3 { color: #17354d; font-size: 24px; font-weight: 900; line-height: 1.15; }
    .school-v2-card p { margin-top: 7px; color: #526a7e; font-size: 17px; font-weight: 620; line-height: 1.4; }

    /* 第17页：教师能力进阶 */
    .teacher-policy-v2 {
      display: grid;
      grid-template-rows: minmax(0, 1fr) 91px;
      gap: 15px;
    }

    .teacher-v2-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 17px;
    }

    .teacher-v2-card {
      --teacher-rgb: 29, 139, 131;
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 21px 22px;
      overflow: visible;
      border: 1px solid rgba(var(--teacher-rgb), .22);
      border-radius: 24px;
      background:
        radial-gradient(circle at 100% 0%, rgba(var(--teacher-rgb), .13), transparent 34%),
        linear-gradient(150deg, rgba(255, 255, 255, .97), rgba(var(--teacher-rgb), .055));
      box-shadow: 0 16px 34px rgba(36, 86, 108, .095), inset 0 1px 0 white;
    }

    .teacher-v2-card:not(:last-child)::after {
      content: "";
      position: absolute;
      z-index: 3;
      top: 50%;
      right: -17px;
      width: 17px;
      height: 2px;
      background: linear-gradient(90deg, rgba(var(--teacher-rgb), .55), rgba(194, 153, 70, .48));
      box-shadow: 0 0 10px rgba(var(--teacher-rgb), .22);
    }

    .teacher-v2-card:not(:last-child) .teacher-v2-arrow {
      position: absolute;
      z-index: 4;
      top: calc(50% - 4px);
      right: -17px;
      width: 8px;
      height: 8px;
      border-top: 2px solid #b6924e;
      border-right: 2px solid #b6924e;
      transform: rotate(45deg);
    }

    .teacher-v2-card header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .teacher-v2-card header b {
      color: rgb(var(--teacher-rgb));
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .teacher-v2-card header span {
      padding: 6px 10px;
      border-radius: 999px;
      color: rgb(var(--teacher-rgb));
      background: rgba(var(--teacher-rgb), .09);
      font-size: 15px;
      font-weight: 900;
    }

    .teacher-v2-card h3 {
      margin-top: 18px;
      color: #143852;
      font-size: 32px;
      font-weight: 900;
      line-height: 1.08;
    }

    .teacher-v2-card > p {
      margin-top: 8px;
      color: #526a7e;
      font-size: 18px;
      font-weight: 620;
      line-height: 1.45;
    }

    .teacher-v2-skills {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 16px;
    }

    .teacher-v2-skills span {
      padding: 7px 10px;
      border: 1px solid rgba(var(--teacher-rgb), .17);
      border-radius: 9px;
      color: #405a6e;
      background: rgba(255, 255, 255, .72);
      font-size: 15px;
      font-weight: 780;
    }

    .teacher-v2-card footer {
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid rgba(var(--teacher-rgb), .14);
      color: rgb(var(--teacher-rgb));
      font-size: 17px;
      font-weight: 850;
    }

    .teacher-v2-thesis {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 18px;
      padding: 17px 22px;
      border: 1px solid rgba(30, 132, 129, .18);
      border-radius: 21px;
      background: linear-gradient(100deg, #0f6471, #167b70 48%, #2d7a5d);
      box-shadow: 0 13px 28px rgba(23, 105, 104, .16);
    }

    .teacher-v2-thesis b {
      padding: 7px 10px;
      border-radius: 8px;
      color: #124e59;
      background: #d8fff4;
      font-size: 15px;
      font-weight: 900;
    }

    .teacher-v2-thesis p { color: #f3fffc; font-size: 18px; font-weight: 750; line-height: 1.4; }
    .teacher-v2-thesis strong { color: #ffe6a9; font-size: 20px; font-weight: 900; white-space: nowrap; }

    /* 第18页：AI助力与教师边界 */
    .teacher-boundary-v2 {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) 55px;
      gap: 13px;
    }

    .boundary-v2-panel {
      --boundary-rgb: 25, 151, 128;
      padding: 22px;
      border: 1px solid rgba(var(--boundary-rgb), .22);
      border-radius: 24px;
      background:
        radial-gradient(circle at 92% 0%, rgba(var(--boundary-rgb), .14), transparent 32%),
        rgba(255, 255, 255, .84);
      box-shadow: 0 15px 32px rgba(43, 89, 109, .08), inset 0 1px 0 white;
    }

    .boundary-v2-panel.is-duty { --boundary-rgb: 73, 105, 177; }

    .boundary-v2-panel header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(var(--boundary-rgb), .15);
    }

    .boundary-v2-panel header span { color: rgb(var(--boundary-rgb)); font-size: 14px; font-weight: 900; letter-spacing: .1em; }
    .boundary-v2-panel header h3 { color: #18374e; font-size: 30px; font-weight: 900; line-height: 1; }

    .boundary-v2-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(3, minmax(0, 1fr));
      gap: 9px;
      height: 280px;
      margin-top: 14px;
    }

    .boundary-v2-item {
      display: grid;
      align-content: center;
      padding: 10px 14px;
      border: 1px solid rgba(var(--boundary-rgb), .14);
      border-radius: 14px;
      background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(var(--boundary-rgb), .055));
    }

    .boundary-v2-item strong { color: #24435a; font-size: 20px; font-weight: 900; }
    .boundary-v2-item small { margin-top: 5px; color: #5b7185; font-size: 15px; font-weight: 700; line-height: 1.3; }

    .boundary-v2-axis {
      display: grid;
      place-items: center;
      color: #2b747a;
    }

    .boundary-v2-axis::before {
      content: "";
      position: absolute;
      top: 18px;
      bottom: 18px;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, transparent, rgba(33, 139, 137, .35), rgba(84, 103, 174, .35), transparent);
      box-shadow: 0 0 12px rgba(45, 130, 142, .18);
    }

    .boundary-v2-axis strong {
      z-index: 1;
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      padding: 8px;
      border: 1px solid rgba(43, 120, 129, .22);
      border-radius: 50%;
      color: #ffffff;
      background: linear-gradient(145deg, #238e86, #496cab);
      box-shadow: 0 13px 25px rgba(44, 105, 127, .2), 0 0 0 8px rgba(255, 255, 255, .65);
      text-align: center;
      font-size: 14px;
      line-height: 1.28;
    }

    .boundary-v2-verdict {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 20px;
      padding: 0 24px;
      border: 1px solid rgba(44, 114, 132, .16);
      border-radius: 17px;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 9px 22px rgba(44, 89, 107, .07);
    }

    .boundary-v2-verdict strong { color: #157e74; font-size: 20px; font-weight: 900; text-align: right; }
    .boundary-v2-verdict b { color: #d19a38; font-size: 20px; }
    .boundary-v2-verdict span { color: #465f93; font-size: 20px; font-weight: 900; }

    /* 第19页：学生分学段使用路径 */
    .student-policy-v2 {
      display: grid;
      grid-template-rows: 68px minmax(0, 1fr) 60px;
      gap: 14px;
      height: 590px;
    }

    .student-v2-progress {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
      padding: 7px;
      border: 1px solid rgba(41, 133, 145, .15);
      border-radius: 18px;
      background: rgba(255, 255, 255, .7);
      box-shadow: 0 9px 22px rgba(43, 89, 109, .06);
    }

    .student-v2-progress span {
      position: relative;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #446174;
      background: linear-gradient(135deg, rgba(50, 171, 151, .09), rgba(71, 124, 187, .075));
      font-size: 15px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .student-v2-progress span:not(:last-child)::after {
      content: "";
      position: absolute;
      right: -8px;
      top: 50%;
      width: 7px;
      height: 7px;
      border-top: 2px solid rgba(59, 129, 146, .4);
      border-right: 2px solid rgba(59, 129, 146, .4);
      transform: translateY(-50%) rotate(45deg);
    }

    .student-v2-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 15px;
    }

    .student-v2-card {
      --student-rgb: 33, 154, 133;
      display: grid;
      grid-template-rows: auto repeat(3, 1fr) auto;
      padding: 20px 22px 17px;
      border: 1px solid rgba(var(--student-rgb), .22);
      border-radius: 23px;
      background:
        radial-gradient(circle at 100% 0%, rgba(var(--student-rgb), .14), transparent 32%),
        rgba(255, 255, 255, .86);
      box-shadow: 0 15px 32px rgba(42, 88, 108, .085), inset 0 1px 0 white;
    }

    .student-v2-card.is-junior { --student-rgb: 75, 103, 184; }

    .student-v2-card header {
      display: grid;
      grid-template-columns: 64px 1fr;
      align-items: center;
      gap: 15px;
      margin-bottom: 10px;
    }

    .student-v2-level {
      display: grid;
      place-items: center;
      width: 64px;
      height: 52px;
      border-radius: 16px;
      color: #ffffff;
      background: linear-gradient(145deg, rgba(var(--student-rgb), .95), rgba(var(--student-rgb), .72));
      box-shadow: 0 10px 20px rgba(var(--student-rgb), .18);
      font-size: 19px;
      font-weight: 900;
    }

    .student-v2-card header small { color: rgb(var(--student-rgb)); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
    .student-v2-card header h3 { margin-top: 5px; color: #183a52; font-size: 24px; font-weight: 900; line-height: 1.1; }

    .student-v2-row {
      display: grid;
      grid-template-columns: 90px 1fr;
      align-items: center;
      gap: 13px;
      border-top: 1px solid rgba(var(--student-rgb), .12);
    }

    .student-v2-row b { color: rgb(var(--student-rgb)); font-size: 16px; font-weight: 900; }
    .student-v2-row p { color: #4e6578; font-size: 17px; font-weight: 620; line-height: 1.42; }

    .student-v2-card footer {
      display: flex;
      gap: 7px;
      padding-top: 10px;
      border-top: 1px solid rgba(var(--student-rgb), .12);
    }

    .student-v2-card footer span {
      padding: 5px 8px;
      border-radius: 8px;
      color: rgb(var(--student-rgb));
      background: rgba(var(--student-rgb), .085);
      font-size: 13px;
      font-weight: 850;
    }

    .student-v2-bottom {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 17px;
      border: 1px solid rgba(48, 123, 142, .16);
      border-radius: 17px;
      background: linear-gradient(90deg, rgba(255,255,255,.88), rgba(245, 252, 247, .9));
    }

    .student-v2-bottom strong { margin-right: auto; color: #173f56; font-size: 15px; font-weight: 900; }
    .student-v2-bottom span { padding: 6px 9px; border-radius: 8px; color: #4a6375; background: #edf6f5; font-size: 11px; font-weight: 800; }

    /* 第20页：学校选平台先问三件事 */
    .platform-policy-v2 {
      display: grid;
      grid-template-columns: .67fr 1.48fr;
      grid-template-rows: minmax(0, 1fr) 58px;
      gap: 15px;
    }

    .platform-v2-intro {
      display: flex;
      flex-direction: column;
      padding: 27px;
      overflow: hidden;
      border-radius: 24px;
      color: #f3ffff;
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 218, 130, .18), transparent 32%),
        linear-gradient(145deg, #163f5a, #145f68 58%, #20725f);
      box-shadow: 0 18px 40px rgba(23, 80, 91, .2), inset 0 1px 0 rgba(255,255,255,.14);
    }

    .platform-v2-intro .policy-v2-kicker { color: #c5f9ed; font-size: 13px; letter-spacing: .1em; }
    .platform-v2-intro h3 { margin-top: 26px; color: #fff; font-size: 36px; font-weight: 900; line-height: 1.14; letter-spacing: -.035em; }
    .platform-v2-intro h3 em { color: #ffe1a0; font-style: normal; }
    .platform-v2-intro p { margin-top: 16px; color: rgba(244,255,252,.88); font-size: 17px; font-weight: 620; line-height: 1.58; }

    .platform-v2-checks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: auto;
    }

    .platform-v2-checks span {
      padding: 8px 11px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px;
      color: #ecfffa;
      background: rgba(255,255,255,.08);
      font-size: 14px;
      font-weight: 800;
    }

    .platform-v2-gates {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .platform-v2-gate {
      --gate-rgb: 27, 148, 132;
      display: flex;
      flex-direction: column;
      padding: 19px;
      border: 1px solid rgba(var(--gate-rgb), .21);
      border-radius: 21px;
      background:
        radial-gradient(circle at 100% 0%, rgba(var(--gate-rgb), .14), transparent 34%),
        rgba(255,255,255,.88);
      box-shadow: 0 14px 30px rgba(41, 86, 105, .08), inset 0 1px 0 white;
    }

    .platform-v2-gate header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .platform-v2-gate header b { color: rgb(var(--gate-rgb)); font-size: 13px; font-weight: 900; letter-spacing: .08em; }

    .platform-v2-gate-icon {
      width: 42px;
      height: 42px;
      padding: 9px;
      border: 1px solid rgba(var(--gate-rgb), .2);
      border-radius: 14px;
      color: rgb(var(--gate-rgb));
      background: rgba(var(--gate-rgb), .085);
      box-shadow: 0 8px 18px rgba(var(--gate-rgb), .1);
    }

    .platform-v2-gate h3 { margin-top: 23px; color: #183a52; font-size: 27px; font-weight: 900; line-height: 1.08; }
    .platform-v2-gate p { margin-top: 11px; color: #526a7c; font-size: 17px; font-weight: 620; line-height: 1.52; }
    .platform-v2-gate > strong { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(var(--gate-rgb), .13); color: rgb(var(--gate-rgb)); font-size: 14px; font-weight: 850; line-height: 1.45; }

    .platform-v2-laws {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 0 17px;
      border: 1px solid rgba(50, 121, 139, .16);
      border-radius: 17px;
      background: rgba(255,255,255,.82);
      box-shadow: 0 9px 22px rgba(42, 87, 105, .06);
    }

    .platform-v2-laws strong { margin-right: auto; color: #153e55; font-size: 16px; font-weight: 900; }
    .platform-v2-laws span { padding: 7px 9px; border-radius: 8px; color: #506879; background: #eef6f5; font-size: 13px; font-weight: 800; }

    .slide.active .policy-v2-stage {
      animation: policy-v2-stage-in .58s cubic-bezier(.2, .78, .24, 1) both;
    }

    .slide.active .school-v2-card,
    .slide.active .teacher-v2-card,
    .slide.active .boundary-v2-item,
    .slide.active .student-v2-card,
    .slide.active .platform-v2-gate {
      animation: policy-v2-card-in .5s cubic-bezier(.2, .8, .24, 1) var(--v2-delay, .08s) both;
    }

    .slide.active .policy-v2-stage::after {
      animation: policy-v2-orbit 8s ease-in-out infinite alternate;
    }

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

    @keyframes policy-v2-card-in {
      from { opacity: 0; transform: translateY(12px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes policy-v2-orbit {
      from { transform: translate3d(0, 0, 0) scale(.96); opacity: .72; }
      to { transform: translate3d(-18px, 14px, 0) scale(1.04); opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .policy-v2-stage,
      .slide.active .policy-v2-stage::after,
      .slide.active .school-v2-card,
      .slide.active .teacher-v2-card,
      .slide.active .boundary-v2-item,
      .slide.active .student-v2-card,
      .slide.active .platform-v2-gate { animation: none !important; }
    }

    /* 第21—22页：师生能力落差 · 明亮叙事视觉 */
    .reality-v3-stage {
      --reality-ink: #16364e;
      --reality-muted: #5a7184;
      position: relative;
      height: 520px;
      padding: 22px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(54, 117, 143, .18);
      border-radius: 34px;
      color: var(--reality-ink);
      background:
        radial-gradient(circle at 5% 0%, rgba(79, 207, 183, .2), transparent 28%),
        radial-gradient(circle at 98% 96%, rgba(255, 196, 91, .17), transparent 30%),
        linear-gradient(135deg, #f8fffd 0%, #f3f9ff 53%, #fffaf0 100%);
      box-shadow: 0 26px 68px rgba(30, 81, 105, .12), inset 0 1px 0 rgba(255,255,255,.95);
    }

    .reality-v3-stage::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;
      opacity: .42;
      background-image:
        linear-gradient(rgba(40, 118, 140, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 118, 140, .05) 1px, transparent 1px);
      background-size: 32px 32px;
      -webkit-mask-image: radial-gradient(circle at 58% 50%, #000, transparent 82%);
      mask-image: radial-gradient(circle at 58% 50%, #000, transparent 82%);
    }

    .reality-v3-stage::after {
      content: "";
      position: absolute;
      z-index: 0;
      width: 290px;
      height: 290px;
      right: -110px;
      top: -145px;
      border: 1px solid rgba(44, 147, 151, .15);
      border-radius: 50%;
      box-shadow: 0 0 0 48px rgba(53, 173, 157, .035), 0 0 0 96px rgba(232, 173, 66, .025);
      pointer-events: none;
    }

    .reality-v3-stage > * { position: relative; z-index: 1; min-width: 0; }
    .reality-v3-stage h3,
    .reality-v3-stage p,
    .reality-v3-stage figure { margin: 0; }

    /* 第21页：学生会用工具，不等于会学习 */
    .student-gap-v3 {
      display: grid;
      grid-template-columns: .79fr 1.21fr;
      gap: 16px;
    }

    .student-gap-visual {
      position: relative;
      overflow: hidden;
      border-radius: 26px;
      color: #f5fffd;
      border: 1px solid rgba(255, 255, 255, .8);
      background: #dce9f4;
      box-shadow:
        0 24px 50px rgba(25, 64, 91, .2),
        0 0 0 1px rgba(35, 75, 102, .08),
        inset 0 1px 0 rgba(255,255,255,.9);
    }

    .student-gap-visual::before {
      content: "";
      position: absolute;
      z-index: 2;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(10, 27, 43, .04) 0%, transparent 34%, rgba(8, 27, 42, .08) 58%, rgba(7, 24, 38, .92) 100%),
        linear-gradient(102deg, rgba(255,255,255,.2), transparent 30%, transparent 72%, rgba(16,47,72,.12));
    }

    .student-gap-visual::after {
      content: "";
      position: absolute;
      z-index: 5;
      top: -34%;
      left: -16%;
      width: 42%;
      height: 168%;
      pointer-events: none;
      opacity: .42;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
      transform: rotate(16deg) translateX(-150%);
    }

    .student-gap-visual-badge {
      position: absolute;
      z-index: 6;
      top: 18px;
      left: 18px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 13px 9px 10px;
      border: 1px solid rgba(255,255,255,.34);
      border-radius: 999px;
      background: rgba(9, 29, 45, .62);
      box-shadow: 0 10px 24px rgba(8, 31, 48, .2), inset 0 1px 0 rgba(255,255,255,.13);
      -webkit-backdrop-filter: blur(14px) saturate(1.15);
      backdrop-filter: blur(14px) saturate(1.15);
    }

    .student-gap-visual-badge i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #69e7b7;
      box-shadow: 0 0 0 4px rgba(105,231,183,.14), 0 0 12px rgba(105,231,183,.72);
    }

    .student-gap-visual-badge strong { color: #ffffff; font-size: 13px; font-weight: 900; line-height: 1; }
    .student-gap-visual-badge span { color: rgba(232,246,255,.72); font-size: 11px; font-weight: 760; letter-spacing: .06em; }

    .student-gap-photo-stage {
      position: absolute;
      z-index: 1;
      inset: 0;
      overflow: hidden;
    }

    .student-gap-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 66% 50%;
      filter: saturate(.92) contrast(1.04) brightness(.9);
      transform: scale(1.035);
    }

    .student-gap-device {
      position: absolute;
      z-index: 4;
      left: 25px;
      right: 25px;
      top: 177px;
      height: 194px;
      padding: 8px;
      border: 1px solid rgba(255,255,255,.32);
      border-radius: 19px;
      background: linear-gradient(145deg, #132536, #3a4d5d 52%, #172c3d);
      box-shadow:
        0 24px 46px rgba(4, 20, 32, .42),
        0 0 0 1px rgba(6, 18, 28, .6),
        inset 0 1px 1px rgba(255,255,255,.22);
      transform: none;
      transform-origin: 50% 100%;
    }

    .student-gap-device::before {
      content: "";
      position: absolute;
      z-index: 3;
      top: 3px;
      left: 50%;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #07131d;
      box-shadow: 0 0 0 1px rgba(124,161,184,.34);
      transform: translateX(-50%);
    }

    .student-gap-chat-ui {
      position: relative;
      height: 100%;
      overflow: hidden;
      border: 1px solid rgba(191, 218, 232, .54);
      border-radius: 12px;
      color: #17364a;
      background:
        radial-gradient(circle at 100% 0%, rgba(85, 181, 166, .11), transparent 30%),
        linear-gradient(145deg, rgba(250,253,255,.98), rgba(238,247,250,.97));
      box-shadow: inset 0 1px 0 #fff;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    .student-gap-chat-top {
      display: grid;
      grid-template-columns: 30px 1fr auto;
      align-items: center;
      gap: 8px;
      height: 43px;
      padding: 0 11px;
      border-bottom: 1px solid rgba(45, 91, 117, .1);
      background: rgba(255,255,255,.72);
    }

    .student-gap-chat-mark {
      display: grid;
      place-items: center;
      width: 29px;
      height: 29px;
      padding: 6px;
      border-radius: 9px;
      color: #ffffff;
      background: linear-gradient(135deg, #287f9b, #2c9d86);
      box-shadow: 0 7px 14px rgba(38,128,139,.22);
    }

    .student-gap-chat-mark svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .student-gap-chat-title strong { display: block; color: #102f43; font-size: 13px; font-weight: 900; line-height: 1.1; }
    .student-gap-chat-title small { display: block; margin-top: 2px; color: #5f7788; font-size: 10px; font-weight: 700; line-height: 1.1; }

    .student-gap-live-state {
      position: relative;
      display: grid;
      min-width: 62px;
      height: 25px;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(46,151,126,.18);
      border-radius: 999px;
      color: #25866f;
      background: #ecf9f5;
      font-size: 10px;
      font-weight: 850;
    }

    .student-gap-live-state span { grid-area: 1 / 1; white-space: nowrap; }
    .student-gap-live-state .is-complete { opacity: 0; }

    .student-gap-chat-flow {
      display: grid;
      gap: 7px;
      padding: 9px 11px 7px;
    }

    .student-gap-chat-message {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 7px;
      align-items: start;
    }

    .student-gap-chat-avatar {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 7px;
      color: #ffffff;
      background: #68869c;
      font-size: 10px;
      font-weight: 900;
    }

    .student-gap-chat-message.is-ai .student-gap-chat-avatar { background: linear-gradient(135deg, #287f9b, #2c9d86); }
    .student-gap-chat-message.is-thinking { opacity: 0; }

    .student-gap-chat-bubble {
      width: fit-content;
      max-width: 100%;
      padding: 6px 9px;
      border: 1px solid rgba(44, 92, 117, .1);
      border-radius: 5px 11px 11px 11px;
      background: rgba(255,255,255,.92);
      box-shadow: 0 4px 10px rgba(35,74,94,.06);
    }

    .student-gap-chat-message.is-user {
      grid-template-columns: 1fr 22px;
    }

    .student-gap-chat-message.is-user .student-gap-chat-avatar {
      grid-row: 1;
      grid-column: 2;
    }

    .student-gap-chat-message.is-user .student-gap-chat-bubble {
      grid-row: 1;
      grid-column: 1;
      justify-self: end;
      border-radius: 11px 5px 11px 11px;
      background: #eaf4ff;
    }
    .student-gap-chat-bubble p { color: #173b50; font-size: 11px; font-weight: 750; line-height: 1.38; }

    .student-gap-thinking {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      min-height: 12px;
    }

    .student-gap-thinking i {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #3d9f89;
    }

    .student-gap-answer { opacity: 0; transform: translateY(-29px); }
    .student-gap-answer strong { color: #167461; font-weight: 900; }

    .student-gap-screen-foot {
      position: absolute;
      right: 10px;
      bottom: 8px;
      display: flex;
      align-items: baseline;
      gap: 5px;
      padding: 4px 7px;
      border-radius: 7px;
      color: #698091;
      background: rgba(226,239,244,.78);
      font-size: 9px;
      font-weight: 750;
      opacity: 0;
    }

    .student-gap-screen-foot strong { color: #126f5e; font-size: 12px; font-weight: 950; }

    .student-gap-device-base {
      position: absolute;
      z-index: 3;
      left: 13%;
      right: 13%;
      top: 367px;
      height: 11px;
      border-radius: 2px 2px 12px 12px;
      background: linear-gradient(180deg, #78909e, #263b49 48%, #172b39);
      box-shadow: 0 11px 18px rgba(5,20,31,.34), inset 0 1px 0 rgba(255,255,255,.38);
    }

    .student-gap-device-base::after {
      content: "";
      position: absolute;
      left: 42%;
      right: 42%;
      top: 1px;
      height: 3px;
      border-radius: 0 0 5px 5px;
      background: rgba(12,28,39,.42);
    }

    .student-gap-visual figcaption {
      position: absolute;
      z-index: 6;
      left: 22px;
      right: 22px;
      bottom: 18px;
      text-shadow: 0 2px 9px rgba(0, 18, 30, .5);
    }

    .student-gap-visual figcaption strong { display: block; color: #ffffff; font-size: 23px; font-weight: 920; line-height: 1.12; }
    .student-gap-visual figcaption span { display: block; margin-top: 5px; color: rgba(233,246,253,.76); font-size: 13px; font-weight: 650; line-height: 1.35; }

    .student-gap-content {
      display: grid;
      grid-template-rows: 84px 58px minmax(0, 1fr) 56px;
      gap: 10px;
    }

    .student-gap-head {
      display: grid;
      align-content: center;
      padding: 0 7px;
    }

    .student-gap-head h3 { color: #173b53; font-size: 32px; font-weight: 950; line-height: 1.08; letter-spacing: -.035em; }
    .student-gap-head h3 em { padding: 0 7px; color: #d79a2d; font-style: normal; }
    .student-gap-head p { margin-top: 7px; color: #5a7184; font-size: 15px; font-weight: 620; line-height: 1.4; }

    .student-gap-ready {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border: 1px solid rgba(39, 142, 137, .17);
      border-radius: 17px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 9px 22px rgba(41, 86, 104, .06);
    }

    .student-gap-ready strong { margin-right: auto; color: #178779; font-size: 15px; font-weight: 900; white-space: nowrap; }
    .student-gap-ready span { padding: 6px 9px; border-radius: 8px; color: #4f687a; background: #edf7f5; font-size: 13px; font-weight: 800; white-space: nowrap; }

    .student-gap-skills {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .student-gap-skill {
      --skill-rgb: 30, 148, 133;
      position: relative;
      display: grid;
      grid-template-columns: 46px 1fr;
      align-items: center;
      gap: 13px;
      padding: 14px 15px;
      overflow: hidden;
      border: 1px solid rgba(var(--skill-rgb), .2);
      border-radius: 18px;
      background:
        radial-gradient(circle at 100% 0%, rgba(var(--skill-rgb), .12), transparent 35%),
        rgba(255,255,255,.9);
      box-shadow: 0 12px 25px rgba(41, 83, 102, .075), inset 0 1px 0 white;
    }

    .student-gap-skill::after {
      content: attr(data-no);
      position: absolute;
      right: 7px;
      bottom: -8px;
      color: rgba(var(--skill-rgb), .075);
      font-size: 49px;
      font-weight: 950;
      line-height: 1;
    }

    .student-gap-skill-icon {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      padding: 10px;
      border: 1px solid rgba(var(--skill-rgb), .2);
      border-radius: 15px;
      color: rgb(var(--skill-rgb));
      background: rgba(var(--skill-rgb), .085);
      box-shadow: 0 8px 18px rgba(var(--skill-rgb), .1);
    }

    .student-gap-skill-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .student-gap-skill h3 { color: #21445c; font-size: 19px; font-weight: 900; line-height: 1.16; }
    .student-gap-skill p { margin-top: 5px; max-width: 92%; color: #627789; font-size: 15px; font-weight: 620; line-height: 1.35; }

    .student-gap-verdict {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0 17px;
      border: 1px solid rgba(44, 119, 138, .18);
      border-radius: 17px;
      background: linear-gradient(100deg, #126472, #177a70 50%, #397751);
      box-shadow: 0 12px 25px rgba(20, 99, 101, .16);
    }

    .student-gap-verdict strong { color: #ffe4a7; font-size: 16px; font-weight: 900; white-space: nowrap; }
    .student-gap-verdict p { color: #f5fffc; font-size: 16px; font-weight: 760; line-height: 1.35; }

    /* 第24页：从生成素材到教学设计 */
    .teacher-shift-v3 {
      display: grid;
      grid-template-columns: .72fr 82px 1.28fr;
      grid-template-rows: minmax(0, 1fr) 58px;
      gap: 14px;
    }

    .teacher-shift-source,
    .teacher-shift-design {
      padding: 22px;
      overflow: hidden;
      border-radius: 25px;
    }

    .teacher-shift-source {
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(204, 143, 53, .2);
      background:
        radial-gradient(circle at 100% 0%, rgba(238, 176, 66, .15), transparent 34%),
        rgba(255,255,255,.88);
      box-shadow: 0 16px 34px rgba(71, 81, 94, .08), inset 0 1px 0 white;
    }

    .teacher-shift-source header > span,
    .teacher-shift-design header > span {
      display: inline-block;
      color: #b27620;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .14em;
    }

    .teacher-shift-source header h3 { margin-top: 7px; color: #23455c; font-size: 29px; font-weight: 950; line-height: 1.08; }
    .teacher-shift-source header p { margin-top: 7px; color: #687b8c; font-size: 15px; font-weight: 620; line-height: 1.4; }

    .teacher-shift-output-art {
      width: 100%;
      height: 145px;
      margin: 10px 0 8px;
      overflow: visible;
    }

    .teacher-shift-output-art text { font-family: var(--font); }

    .teacher-shift-output-tags {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
    }

    .teacher-shift-output-tags span {
      display: grid;
      place-items: center;
      min-height: 34px;
      border: 1px solid rgba(193, 132, 43, .16);
      border-radius: 10px;
      color: #8f621f;
      background: rgba(255, 247, 228, .86);
      font-size: 13px;
      font-weight: 850;
    }

    .teacher-shift-risk {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 11px;
      margin-top: auto;
      padding: 11px 13px;
      border-radius: 14px;
      color: #655c51;
      background: #fff5e2;
    }

    .teacher-shift-risk b { color: #b97a19; font-size: 20px; font-weight: 950; }
    .teacher-shift-risk span { font-size: 14px; font-weight: 700; line-height: 1.35; }

    .teacher-shift-bridge {
      display: grid;
      place-items: center;
      color: #2d7b82;
    }

    .teacher-shift-bridge::before {
      content: "";
      position: absolute;
      left: 5px;
      right: 5px;
      top: 50%;
      height: 2px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, rgba(210, 153, 54, .12), rgba(40, 144, 137, .72), rgba(71, 107, 181, .18));
      box-shadow: 0 0 14px rgba(42, 143, 139, .25);
    }

    .teacher-shift-bridge::after {
      content: "";
      position: absolute;
      right: 5px;
      top: calc(50% - 5px);
      width: 10px;
      height: 10px;
      border-top: 2px solid #3f8c91;
      border-right: 2px solid #3f8c91;
      transform: rotate(45deg);
    }

    .teacher-shift-bridge strong {
      z-index: 1;
      display: grid;
      place-items: center;
      width: 60px;
      height: 60px;
      border: 1px solid rgba(39, 132, 134, .22);
      border-radius: 50%;
      color: #ffffff;
      background: linear-gradient(145deg, #26958b, #4d6eb0);
      box-shadow: 0 12px 25px rgba(39, 115, 130, .2), 0 0 0 8px rgba(255,255,255,.72);
      font-size: 14px;
      font-weight: 900;
    }

    .teacher-shift-design {
      display: flex;
      flex-direction: column;
      color: #f7fffd;
      background:
        radial-gradient(circle at 12% 0%, rgba(101, 232, 205, .19), transparent 31%),
        radial-gradient(circle at 100% 100%, rgba(255, 203, 101, .13), transparent 28%),
        linear-gradient(145deg, #123f58 0%, #155e69 53%, #235f78 100%);
      box-shadow: 0 19px 42px rgba(22, 72, 94, .24), inset 0 1px 0 rgba(255,255,255,.14);
    }

    .teacher-shift-design header > span { color: #aef2df; }
    .teacher-shift-design header h3 { margin-top: 7px; color: #ffffff; font-size: 29px; font-weight: 950; line-height: 1.08; }
    .teacher-shift-design header p { margin-top: 7px; color: rgba(234,253,249,.74); font-size: 15px; font-weight: 620; line-height: 1.4; }

    .teacher-shift-map {
      position: relative;
      flex: 1;
      min-height: 255px;
      margin-top: 5px;
    }

    .teacher-shift-lines {
      position: absolute;
      inset: 15px 32px;
      width: calc(100% - 64px);
      height: calc(100% - 30px);
      overflow: visible;
    }

    .teacher-shift-lines path {
      fill: none;
      stroke: rgba(154, 241, 222, .44);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-dasharray: 4 7;
      vector-effect: non-scaling-stroke;
      filter: drop-shadow(0 0 4px rgba(97, 230, 209, .38));
    }

    .teacher-shift-center,
    .teacher-shift-node {
      position: absolute;
      left: var(--x);
      top: var(--y);
      transform: translate(-50%, -50%);
    }

    .teacher-shift-center {
      display: grid;
      place-items: center;
      width: 106px;
      height: 106px;
      padding: 12px;
      border: 1px solid rgba(255, 226, 159, .46);
      border-radius: 50%;
      color: #173e54;
      background: radial-gradient(circle at 35% 28%, #fff7d9, #f1c96f 64%, #d7a13c 100%);
      box-shadow: 0 17px 36px rgba(4, 31, 49, .28), 0 0 0 10px rgba(255,255,255,.07), 0 0 30px rgba(242, 200, 110, .2);
      text-align: center;
    }

    .teacher-shift-center strong { font-size: 20px; font-weight: 950; line-height: 1.05; }
    .teacher-shift-center small { margin-top: 5px; color: #74591f; font-size: 11px; font-weight: 850; }

    .teacher-shift-node {
      display: grid;
      align-content: center;
      width: 128px;
      min-height: 54px;
      padding: 8px 10px;
      border: 1px solid rgba(190, 242, 231, .18);
      border-radius: 14px;
      background: rgba(255,255,255,.09);
      box-shadow: 0 10px 23px rgba(6, 34, 51, .18), inset 0 1px 0 rgba(255,255,255,.08);
      -webkit-backdrop-filter: blur(9px);
      backdrop-filter: blur(9px);
      text-align: center;
    }

    .teacher-shift-node b { color: #ffffff; font-size: 16px; font-weight: 900; line-height: 1.1; }
    .teacher-shift-node small { margin-top: 4px; color: rgba(224,249,244,.68); font-size: 12px; font-weight: 650; line-height: 1.2; }

    .teacher-shift-proof {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: auto auto 48px auto auto;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 18px;
      border: 1px solid rgba(43, 123, 140, .17);
      border-radius: 17px;
      background: rgba(255,255,255,.84);
      box-shadow: 0 10px 24px rgba(40, 85, 104, .07);
    }

    .teacher-shift-proof span { color: #607588; font-size: 15px; font-weight: 750; }
    .teacher-shift-proof strong { color: #1c6f73; font-size: 18px; font-weight: 950; }
    .teacher-shift-proof i { position: relative; display: block; height: 2px; background: linear-gradient(90deg, #d5a044, #2e8d88); }
    .teacher-shift-proof i::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid #2e8d88; border-right: 2px solid #2e8d88; transform: rotate(45deg); }

    .slide.active .reality-v3-stage { animation: reality-v3-in .55s cubic-bezier(.2,.8,.24,1) both; }
    .slide.active .student-gap-skill { animation: reality-v3-rise .5s cubic-bezier(.2,.8,.24,1) var(--v3-delay, .08s) both; }
    .slide.active .teacher-shift-node { animation: teacher-v3-node-in .5s cubic-bezier(.2,.8,.24,1) var(--v3-delay, .08s) both; }
    .slide.active .student-gap-photo { animation: student-gap-camera 8s cubic-bezier(.18,.7,.22,1) both; }
    .slide.active .student-gap-visual::after { animation: student-gap-glare 4.8s .45s cubic-bezier(.2,.7,.2,1) both; }
    .slide.active .student-gap-device { animation: student-gap-device-in .7s .18s cubic-bezier(.16,.78,.2,1) both; }
    .slide.active .student-gap-chat-message.is-user { animation: student-gap-message-in .42s .62s cubic-bezier(.2,.8,.2,1) both; }
    .slide.active .student-gap-chat-message.is-thinking { animation: student-gap-thinking-phase 1.35s 1.05s ease both; }
    .slide.active .student-gap-thinking i { animation: student-gap-dot .62s ease-in-out 1.08s 3 alternate; }
    .slide.active .student-gap-thinking i:nth-child(2) { animation-delay: 1.2s; }
    .slide.active .student-gap-thinking i:nth-child(3) { animation-delay: 1.32s; }
    .slide.active .student-gap-answer { animation: student-gap-answer-in .52s 2.28s cubic-bezier(.2,.8,.2,1) both; }
    .slide.active .student-gap-live-state .is-generating { animation: student-gap-status-out .2s 2.22s ease forwards; }
    .slide.active .student-gap-live-state .is-complete { animation: student-gap-status-in .35s 2.3s ease forwards; }
    .slide.active .student-gap-screen-foot { animation: student-gap-status-in .42s 2.58s ease forwards; }
    .slide.active .teacher-shift-lines path { animation: reality-v3-dash 3.2s linear infinite; }
    .slide.active .teacher-shift-bridge strong { animation: reality-v3-pulse 2.4s ease-in-out infinite; }

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

    @keyframes reality-v3-rise {
      from { opacity: 0; transform: translateY(12px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes teacher-v3-node-in {
      from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.985); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes student-gap-camera {
      from { transform: scale(1.035); filter: saturate(.88) contrast(1.02) brightness(.84); }
      to { transform: scale(1.085); filter: saturate(.96) contrast(1.05) brightness(.91); }
    }

    @keyframes student-gap-glare {
      0%, 18% { opacity: 0; transform: rotate(16deg) translateX(-155%); }
      36% { opacity: .42; }
      70%, 100% { opacity: 0; transform: rotate(16deg) translateX(430%); }
    }

    @keyframes student-gap-device-in {
      from { opacity: 0; transform: perspective(900px) translateY(18px) rotateX(5deg) rotateY(-3.5deg) scale(.965); }
      to { opacity: 1; transform: none; }
    }

    @keyframes student-gap-message-in {
      from { opacity: 0; transform: translateY(7px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes student-gap-thinking-phase {
      0% { opacity: 0; transform: translateY(5px); }
      16%, 76% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-3px); }
    }

    @keyframes student-gap-dot {
      from { opacity: .35; transform: translateY(1px); }
      to { opacity: 1; transform: translateY(-2px); }
    }

    @keyframes student-gap-answer-in {
      from { opacity: 0; transform: translateY(7px); }
      to { opacity: 1; transform: translateY(-29px); }
    }

    @keyframes student-gap-status-out { to { opacity: 0; transform: translateY(-5px); } }
    @keyframes student-gap-status-in {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes reality-v3-dash { to { stroke-dashoffset: -66; } }

    @keyframes reality-v3-pulse {
      0%, 100% { box-shadow: 0 12px 25px rgba(39, 115, 130, .2), 0 0 0 8px rgba(255,255,255,.72); }
      50% { box-shadow: 0 15px 30px rgba(39, 115, 130, .25), 0 0 0 12px rgba(91, 201, 184, .13); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .reality-v3-stage,
      .slide.active .student-gap-skill,
      .slide.active .student-gap-photo,
      .slide.active .student-gap-visual::after,
      .slide.active .student-gap-device,
      .slide.active .student-gap-chat-message,
      .slide.active .student-gap-thinking i,
      .slide.active .student-gap-live-state span,
      .slide.active .student-gap-screen-foot,
      .slide.active .teacher-shift-node,
      .slide.active .teacher-shift-lines path,
      .slide.active .teacher-shift-bridge strong { animation: none !important; }

      .student-gap-chat-message.is-thinking,
      .student-gap-live-state .is-generating { display: none; }

      .student-gap-answer { opacity: 1; transform: translateY(-29px); }
      .student-gap-live-state .is-complete,
      .student-gap-screen-foot { opacity: 1; transform: translateY(0); }
    }

    .matrix {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      background: rgba(255, 255, 255, .84);
      box-shadow: 0 12px 38px rgba(20, 52, 113, .06);
    }

    .matrix th,
    .matrix td {
      padding: 17px 20px;
      border-bottom: 1px solid #dce4f2;
      border-right: 1px solid #e4eaf5;
      vertical-align: top;
      text-align: left;
      line-height: 1.42;
    }

    .matrix th {
      color: white;
      background: var(--navy-2);
      font-size: 21px;
      font-weight: 800;
    }

    .matrix td {
      color: var(--text);
      font-size: 20px;
    }

    .matrix td:first-child {
      color: var(--ink);
      font-weight: 800;
    }

    .matrix tr:last-child td { border-bottom: 0; }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      padding: 8px 16px;
      border: 1px solid #c8d6f0;
      border-radius: 999px;
      color: var(--blue);
      background: #f5f8ff;
      font-size: 19px;
      font-weight: 750;
    }

    .contrast {
      display: grid;
      grid-template-columns: 1fr 88px 1fr;
      align-items: stretch;
      height: 100%;
    }

    .contrast-side {
      display: grid;
      align-content: center;
      padding: 48px;
      border: 1px solid rgba(31, 76, 158, .16);
      background: rgba(255, 255, 255, .78);
    }

    .contrast-side.good {
      background: linear-gradient(145deg, rgba(236, 244, 255, .98), rgba(248, 245, 255, .95));
      border-color: rgba(37, 92, 216, .25);
    }

    .contrast-side h3 {
      margin: 0 0 18px;
      color: var(--ink);
      font-size: 34px;
    }

    .contrast-side p {
      margin: 0;
      font-size: 25px;
      line-height: 1.54;
    }

    .contrast-vs {
      display: grid;
      place-items: center;
      color: var(--violet);
      font-size: 22px;
      font-weight: 950;
    }

    .choice-row {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .choice {
      min-height: 48px;
      padding: 10px 20px;
      border: 1px solid #b9cae9;
      border-radius: 999px;
      color: var(--ink);
      background: white;
      font-size: 20px;
      font-weight: 750;
      transition: .2s ease;
    }

    .choice:hover,
    .choice.active {
      color: white;
      border-color: transparent;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      box-shadow: 0 10px 24px rgba(44, 78, 191, .2);
    }

    .result-panel {
      padding: 26px 30px;
      border: 1px solid rgba(33, 83, 182, .2);
      background: linear-gradient(145deg, #f5f8ff, #fff);
    }

    .result-panel h3 {
      margin: 0 0 12px;
      color: var(--blue);
      font-size: 26px;
    }

    .result-panel p {
      margin: 0;
      font-size: 22px;
      line-height: 1.52;
    }

    .interaction-label {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 16px;
      color: var(--violet);
      font-size: 18px;
      font-weight: 850;
      letter-spacing: .08em;
    }

    .interaction-label::before {
      content: "●";
      color: var(--gold);
      font-size: 14px;
    }

    .prompt-box {
      min-height: 168px;
      padding: 22px 24px;
      border: 1px solid #c9d5eb;
      background: #fbfcff;
      color: var(--text);
      font-size: 21px;
      line-height: 1.55;
      white-space: pre-line;
    }

    .prompt-output {
      min-height: 168px;
      padding: 22px 24px;
      border-left: 6px solid var(--blue);
      background: #eef4ff;
      color: var(--text);
      font-size: 21px;
      line-height: 1.55;
    }

    .agent-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 18px;
      margin: 28px 0;
    }

    .agent-track::before {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      top: 46px;
      height: 3px;
      background: #cad8f1;
    }

    .agent-step {
      position: relative;
      z-index: 1;
      padding-top: 78px;
      text-align: center;
      color: var(--muted);
    }

    .agent-step::before {
      content: attr(data-step);
      position: absolute;
      left: 50%;
      top: 9px;
      display: grid;
      place-items: center;
      width: 72px;
      height: 72px;
      transform: translateX(-50%);
      border: 7px solid white;
      border-radius: 50%;
      background: #dfe7f6;
      color: #7786a1;
      font-weight: 900;
      transition: .24s ease;
    }

    .agent-step.active::before,
    .agent-step.done::before {
      color: white;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      box-shadow: 0 10px 25px rgba(42, 76, 182, .22);
    }

    .agent-step h3 {
      margin: 12px 0 6px;
      color: var(--ink);
      font-size: 23px;
    }

    .agent-step p {
      margin: 0;
      font-size: 18px;
      line-height: 1.35;
    }

    .primary-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 54px;
      padding: 12px 24px;
      border-radius: 12px;
      color: white;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      box-shadow: 0 12px 26px rgba(36, 76, 190, .24);
      font-size: 20px;
      font-weight: 800;
    }

    .outline-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 10px 22px;
      border: 1px solid #b6c7e6;
      border-radius: 12px;
      color: var(--ink);
      background: rgba(255, 255, 255, .9);
      font-size: 19px;
      font-weight: 800;
    }

    .readiness {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 38px;
      height: 100%;
    }

    .readiness-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-content: start;
    }

    .readiness-choice {
      min-height: 104px;
      padding: 18px 20px;
      border: 1px solid #c6d3e9;
      background: white;
      color: var(--text);
      text-align: left;
      font-size: 21px;
      font-weight: 750;
      line-height: 1.4;
      transition: .2s ease;
    }

    .readiness-choice::before {
      content: "○";
      display: inline-block;
      margin-right: 10px;
      color: var(--blue);
      font-size: 28px;
      vertical-align: -2px;
    }

    .readiness-choice.active {
      border-color: rgba(25, 89, 225, .5);
      background: #eef4ff;
      color: var(--ink);
      box-shadow: 0 10px 28px rgba(27, 70, 166, .1);
    }

    .readiness-choice.active::before { content: "●"; }

    .score-display {
      display: grid;
      place-items: center;
      align-content: center;
      background: linear-gradient(145deg, var(--navy), #113c83);
      color: white;
      box-shadow: var(--shadow);
    }

    .score-display strong {
      font-size: 116px;
      line-height: 1;
      letter-spacing: -.06em;
    }

    .score-display span {
      margin-top: 10px;
      font-size: 21px;
      color: #bfd2f5;
    }

    .score-display p {
      width: 76%;
      margin: 24px 0 0;
      text-align: center;
      color: white;
      font-size: 24px;
      line-height: 1.5;
    }

    .capability-line {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 18px;
      padding-top: 52px;
    }

    .capability-line::before {
      content: "";
      position: absolute;
      left: 7%;
      right: 7%;
      top: 88px;
      height: 4px;
      background: linear-gradient(90deg, var(--blue), var(--violet), var(--gold));
      opacity: .35;
    }

    .capability {
      position: relative;
      z-index: 1;
      padding-top: 96px;
      text-align: center;
    }

    .capability::before {
      content: attr(data-letter);
      position: absolute;
      top: 0;
      left: 50%;
      display: grid;
      place-items: center;
      width: 78px;
      height: 78px;
      transform: translateX(-50%);
      border: 8px solid white;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      color: white;
      box-shadow: 0 12px 28px rgba(32, 75, 178, .2);
      font-size: 30px;
      font-weight: 900;
    }

    .capability h3 {
      margin: 0 0 10px;
      color: var(--ink);
      font-size: 29px;
    }

    .capability p {
      margin: 0;
      color: var(--muted);
      font-size: 19px;
      line-height: 1.45;
    }

    .learning-loop {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px 28px;
    }

    .loop-step {
      position: relative;
      min-height: 130px;
      padding: 24px 24px 20px 74px;
      border: 1px solid rgba(37, 81, 167, .17);
      background: rgba(255, 255, 255, .84);
      box-shadow: 0 10px 28px rgba(21, 54, 121, .06);
    }

    .loop-step::before {
      content: attr(data-no);
      position: absolute;
      left: 20px;
      top: 22px;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      color: white;
      background: var(--blue);
      font-size: 15px;
      font-weight: 900;
    }

    .loop-step:nth-child(n+5)::before { background: var(--violet); }

    .loop-step h3 {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 24px;
    }

    .loop-step p {
      margin: 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.4;
    }

    .pyramid {
      display: grid;
      justify-items: center;
      gap: 8px;
    }

    .pyramid-level {
      display: grid;
      place-items: center;
      min-height: 74px;
      color: white;
      text-align: center;
      box-shadow: 0 12px 28px rgba(26, 60, 137, .12);
    }

    .pyramid-level:nth-child(1) { width: 42%; background: var(--navy); }
    .pyramid-level:nth-child(2) { width: 58%; background: var(--blue); }
    .pyramid-level:nth-child(3) { width: 74%; background: #497be1; }
    .pyramid-level:nth-child(4) { width: 90%; background: var(--violet); }

    .pyramid-level strong {
      display: block;
      font-size: 25px;
    }

    .pyramid-level span {
      margin-top: 3px;
      font-size: 17px;
      opacity: .86;
    }

    .arch-stack {
      display: grid;
      gap: 11px;
    }

    .arch-layer {
      display: grid;
      grid-template-columns: 280px 1fr;
      align-items: center;
      min-height: 78px;
      padding: 0 26px;
      border: 1px solid rgba(38, 82, 163, .16);
      background: linear-gradient(90deg, #eef4ff, #fff);
    }

    .arch-layer:nth-child(even) { background: linear-gradient(90deg, #f5f1ff, #fff); }

    .arch-layer strong {
      color: var(--ink);
      font-size: 26px;
    }

    .arch-layer span {
      color: var(--text);
      font-size: 21px;
      line-height: 1.4;
    }

    .blueprint {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 40px;
      height: 100%;
      align-items: center;
    }

    .blueprint-core {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 500px;
    }

    .core-ring {
      position: absolute;
      border: 1px solid rgba(39, 91, 201, .2);
      border-radius: 50%;
    }

    .core-ring.r1 { width: 470px; height: 470px; }
    .core-ring.r2 { width: 360px; height: 360px; border-color: rgba(117, 71, 237, .2); }
    .core-ring.r3 { width: 250px; height: 250px; border-color: rgba(214, 166, 61, .3); }

    .core-center {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 208px;
      height: 208px;
      border-radius: 50%;
      color: white;
      text-align: center;
      background: linear-gradient(145deg, var(--navy), var(--blue));
      box-shadow: 0 26px 60px rgba(20, 58, 140, .25);
    }

    .core-center strong { font-size: 36px; }
    .core-center span { margin-top: 4px; font-size: 18px; color: #c7d8f8; }

    .core-label {
      position: absolute;
      z-index: 3;
      min-width: 118px;
      padding: 10px 14px;
      border: 1px solid #cad7ee;
      border-radius: 999px;
      background: white;
      color: var(--ink);
      text-align: center;
      font-size: 19px;
      font-weight: 800;
      box-shadow: 0 9px 24px rgba(26, 62, 139, .09);
    }

    .core-label.l1 { top: 28px; left: 50%; transform: translateX(-50%); }
    .core-label.l2 { top: 130px; right: 18px; }
    .core-label.l3 { bottom: 70px; right: 48px; }
    .core-label.l4 { bottom: 30px; left: 50%; transform: translateX(-50%); }
    .core-label.l5 { bottom: 70px; left: 48px; }
    .core-label.l6 { top: 130px; left: 18px; }

    .governance {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 42px;
      align-items: stretch;
      height: 100%;
    }

    .governance-spine {
      position: relative;
      display: grid;
      gap: 16px;
      padding-left: 84px;
      align-content: center;
    }

    .governance-spine::before {
      content: "";
      position: absolute;
      left: 39px;
      top: 90px;
      bottom: 90px;
      width: 5px;
      background: linear-gradient(var(--navy), var(--blue), var(--violet));
    }

    .gov-level {
      position: relative;
      min-height: 92px;
      padding: 18px 22px;
      border: 1px solid rgba(36, 81, 168, .18);
      background: white;
    }

    .gov-level::before {
      content: "";
      position: absolute;
      left: -61px;
      top: 31px;
      width: 28px;
      height: 28px;
      border: 8px solid white;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 0 2px rgba(37, 81, 167, .2);
    }

    .gov-level h3 {
      margin: 0 0 6px;
      color: var(--ink);
      font-size: 25px;
    }

    .gov-level p {
      margin: 0;
      color: var(--muted);
      font-size: 19px;
      line-height: 1.4;
    }

    .network-map {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 500px;
    }

    .network-hub {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      color: white;
      text-align: center;
      background: linear-gradient(145deg, var(--navy), var(--blue));
      box-shadow: 0 22px 55px rgba(18, 55, 139, .25);
    }

    .network-hub strong { font-size: 30px; }
    .network-hub span { width: 74%; margin-top: 8px; color: #cad8f4; font-size: 17px; line-height: 1.4; }

    .school-node {
      position: absolute;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 172px;
      min-height: 84px;
      padding: 12px;
      border: 1px solid #c7d5ed;
      border-radius: 18px;
      background: white;
      color: var(--ink);
      text-align: center;
      box-shadow: 0 10px 28px rgba(24, 60, 135, .09);
      font-size: 19px;
      font-weight: 800;
    }

    .school-node.s1 { top: 20px; left: 50%; transform: translateX(-50%); }
    .school-node.s2 { top: 120px; right: 10px; }
    .school-node.s3 { bottom: 70px; right: 40px; }
    .school-node.s4 { bottom: 20px; left: 50%; transform: translateX(-50%); }
    .school-node.s5 { bottom: 70px; left: 40px; }
    .school-node.s6 { top: 120px; left: 10px; }

    .network-line {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 370px;
      height: 2px;
      transform-origin: left center;
      background: linear-gradient(90deg, rgba(26, 86, 225, .45), transparent);
    }

    .network-line.n1 { transform: rotate(-90deg); }
    .network-line.n2 { transform: rotate(-30deg); }
    .network-line.n3 { transform: rotate(30deg); }
    .network-line.n4 { transform: rotate(90deg); }
    .network-line.n5 { transform: rotate(150deg); }
    .network-line.n6 { transform: rotate(210deg); }

    .roadmap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      height: 100%;
      align-items: stretch;
    }

    .phase {
      position: relative;
      padding: 46px 32px 30px;
      border-top: 7px solid var(--blue);
      background: linear-gradient(180deg, #f1f5ff, rgba(255, 255, 255, .9));
      box-shadow: 0 16px 44px rgba(25, 58, 128, .08);
    }

    .phase:nth-child(2) { border-top-color: var(--violet); }
    .phase:nth-child(3) { border-top-color: var(--gold); }

    .phase .phase-day {
      color: var(--blue);
      font-size: 20px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .phase h3 {
      margin: 18px 0 20px;
      color: var(--ink);
      font-size: 33px;
    }

    .phase p {
      margin: 0;
      color: var(--text);
      font-size: 22px;
      line-height: 1.5;
    }

    .phase .deliverable {
      position: absolute;
      left: 32px;
      right: 32px;
      bottom: 28px;
      padding-top: 16px;
      border-top: 1px solid #cfd9ec;
      color: var(--blue);
      font-size: 20px;
      font-weight: 800;
    }

    .action-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 36px;
      height: 100%;
    }

    .action-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      align-content: start;
    }

    .action-check {
      min-height: 92px;
      padding: 18px 20px;
      border: 1px solid #c7d4ea;
      background: white;
      color: var(--text);
      text-align: left;
      font-size: 20px;
      line-height: 1.4;
      font-weight: 750;
    }

    .action-check::before {
      content: "□";
      margin-right: 12px;
      color: var(--blue);
      font-size: 27px;
      vertical-align: -2px;
    }

    .action-check.active {
      border-color: rgba(25, 88, 224, .5);
      background: #eef4ff;
      color: var(--ink);
    }

    .action-check.active::before { content: "■"; }

    .action-summary {
      display: grid;
      align-content: center;
      padding: 40px;
      color: white;
      background: linear-gradient(145deg, var(--navy), #123f8a);
      box-shadow: var(--shadow);
    }

    .action-summary span {
      color: #bcd1f7;
      font-size: 19px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .action-summary strong {
      margin: 12px 0 20px;
      font-size: 72px;
      line-height: 1;
    }

    .action-summary p {
      margin: 0;
      color: white;
      font-size: 24px;
      line-height: 1.55;
    }

    .cover-slide {
      background: #ffffff;
    }

    .cover-slide::before,
    .cover-slide::after { display: none; }

    .cover-image {
      position: absolute;
      right: 0;
      top: 0;
      width: 50%;
      height: 100%;
      object-fit: contain;
      object-position: right center;
      background: transparent;
      z-index: 1;
      transform: scale(var(--content-scale));
      transform-origin: left center;
    }

    .cover-particles {
      position: absolute;
      z-index: 2;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
      transform: scale(var(--content-scale));
      transform-origin: left center;
      isolation: isolate;
    }

    .cover-particles::before,
    .cover-particles::after {
      content: "";
      position: absolute;
      z-index: 0;
      border-radius: 50%;
      filter: blur(24px);
      opacity: .72;
      pointer-events: none;
      animation: cover-nebula-breathe 10s ease-in-out infinite;
    }

    .cover-particles::before {
      left: 8%;
      top: 18%;
      width: 470px;
      height: 470px;
      background: radial-gradient(circle, rgba(35, 104, 239, .13) 0%, rgba(109, 94, 252, .075) 34%, rgba(95, 178, 255, .035) 52%, transparent 72%);
    }

    .cover-particles::after {
      right: -8%;
      bottom: 3%;
      width: 390px;
      height: 390px;
      background: radial-gradient(circle, rgba(13, 169, 155, .105) 0%, rgba(52, 124, 246, .055) 38%, transparent 70%);
      animation-delay: -5s;
    }

    .cover-particle {
      position: absolute;
      z-index: 3;
      left: var(--x);
      top: var(--y);
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      background: var(--color);
      box-shadow: 0 0 calc(var(--size) * 3.2) var(--glow);
      opacity: var(--opacity);
      animation: cover-particle-float var(--duration) ease-in-out var(--delay) infinite;
      will-change: transform;
    }

    .cover-particle.star {
      border: 0;
      background: radial-gradient(circle, #ffffff 0 22%, var(--color) 38%, rgba(255,255,255,0) 74%);
      box-shadow: 0 0 calc(var(--size) * 1.8) var(--color), 0 0 calc(var(--size) * 4.6) var(--glow);
      opacity: .82;
      animation-name: cover-star-twinkle;
      animation-timing-function: ease-in-out;
    }

    .cover-particle.star::before,
    .cover-particle.star::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 999px;
      transform: translate(-50%, -50%);
      opacity: .72;
    }

    .cover-particle.star::before {
      width: calc(var(--size) * 4.8);
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--color), #ffffff, var(--color), transparent);
    }

    .cover-particle.star::after {
      width: 1px;
      height: calc(var(--size) * 4.8);
      background: linear-gradient(180deg, transparent, var(--color), #ffffff, var(--color), transparent);
    }

    .cover-particle.ring {
      border: 1px solid rgba(15, 86, 232, .28);
      background: rgba(255, 255, 255, .58);
      box-shadow: 0 0 calc(var(--size) * 2.4) rgba(15, 86, 232, .13);
    }

    .cover-orbit {
      position: absolute;
      z-index: 1;
      left: var(--x);
      top: var(--y);
      width: var(--orbit-width);
      height: var(--orbit-height);
      border: 1px solid rgba(76, 111, 246, .18);
      border-radius: 50%;
      box-shadow: inset 0 0 24px rgba(76, 111, 246, .035), 0 0 18px rgba(76, 111, 246, .055);
      opacity: .72;
      transform: rotate(var(--tilt));
      animation: cover-orbit-spin var(--orbit-duration) linear infinite;
    }

    .cover-orbit::before {
      content: "";
      position: absolute;
      left: -4px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 0 5px #ffffff, 0 0 14px rgba(52, 124, 246, .75), 0 0 28px rgba(109, 94, 252, .32);
    }

    .cover-orbit.orbit-secondary {
      border-color: rgba(13, 169, 155, .14);
      box-shadow: inset 0 0 20px rgba(13, 169, 155, .03), 0 0 16px rgba(13, 169, 155, .045);
      animation-direction: reverse;
    }

    .cover-meteor {
      position: absolute;
      z-index: 4;
      left: var(--x);
      top: var(--y);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 0 5px #ffffff, 0 0 13px var(--meteor-color);
      opacity: 0;
      animation: cover-meteor-shoot var(--duration) ease-out var(--delay) infinite;
      will-change: transform, opacity;
    }

    .cover-meteor::after {
      content: "";
      position: absolute;
      right: 2px;
      top: 50%;
      width: var(--trail);
      height: 1px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, transparent, var(--meteor-color));
      box-shadow: 0 0 8px var(--meteor-color);
    }

    @keyframes cover-particle-float {
      0%, 100% { transform: translate3d(0, 0, 0) scale(.88); }
      50% { transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1.16); }
    }

    @keyframes cover-star-twinkle {
      0%, 100% { transform: translate3d(0, 0, 0) scale(.58) rotate(0deg); opacity: .28; filter: brightness(.92); }
      42% { transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1.28) rotate(7deg); opacity: .98; filter: brightness(1.22); }
      66% { transform: translate3d(2px, -2px, 0) scale(.88) rotate(-4deg); opacity: .62; filter: brightness(1.05); }
    }

    @keyframes cover-nebula-breathe {
      0%, 100% { transform: translate3d(0, 0, 0) scale(.94); opacity: .56; }
      50% { transform: translate3d(16px, -10px, 0) scale(1.08); opacity: .86; }
    }

    @keyframes cover-orbit-spin {
      from { transform: rotate(var(--tilt)); }
      to { transform: rotate(calc(var(--tilt) + 360deg)); }
    }

    @keyframes cover-meteor-shoot {
      0%, 68% { opacity: 0; transform: rotate(var(--angle)) translate3d(-70px, 0, 0) scale(.72); }
      72% { opacity: .92; }
      88% { opacity: 0; transform: rotate(var(--angle)) translate3d(var(--travel), 0, 0) scale(1); }
      100% { opacity: 0; transform: rotate(var(--angle)) translate3d(var(--travel), 0, 0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .cover-particle,
      .cover-orbit,
      .cover-meteor,
      .cover-particles::before,
      .cover-particles::after { animation: none !important; }
      .cover-meteor { opacity: .22; }
    }

    .cover-copy {
      position: relative;
      z-index: 3;
      display: grid;
      align-content: center;
      width: 50%;
      height: 100%;
      padding: 70px 48px 74px 70px;
      transform: scale(var(--content-scale));
      transform-origin: center center;
    }

    .cover-copy .series {
      margin-bottom: 28px;
      color: var(--blue);
      font-size: 19px;
      font-weight: 850;
      letter-spacing: .14em;
    }

    .cover-copy h1 {
      margin: 0;
      color: var(--ink);
      font-size: 66px;
      line-height: 1.12;
      letter-spacing: -.06em;
      font-weight: 900;
      white-space: nowrap;
      transform: translateY(-46px);
    }

    .cover-copy .subtitle {
      margin: 28px 0 0;
      color: #49627f;
      font-size: 29px;
      line-height: 1.48;
      transform: translateY(-46px);
    }

    .speaker-line {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-top: 45px;
      color: var(--ink);
      font-size: 21px;
    }

    .speaker-line strong { font-size: 27px; }

    .cover-fullscreen {
      position: absolute;
      z-index: 6;
      left: 70px;
      bottom: 52px;
      display: grid;
      width: 36px;
      height: 36px;
      padding: 0;
      place-items: center;
      border: 1px solid rgba(13, 65, 104, .16);
      border-radius: 50%;
      color: #55788d;
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 6px 18px rgba(13, 65, 104, .10);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    }

    .cover-fullscreen svg { width: 16px; height: 16px; }
    .cover-fullscreen:hover { color: var(--blue); border-color: rgba(15, 86, 232, .34); background: #fff; transform: scale(1.06); }
    .cover-fullscreen[hidden],
    :fullscreen .cover-fullscreen,
    :-webkit-full-screen .cover-fullscreen { display: none; }
    .cover-slide .deck-footer { display: none; }

    .company-speaker-slide {
      background:
        radial-gradient(circle at 7% 86%, rgba(15, 86, 232, .075), transparent 26%),
        radial-gradient(circle at 88% 13%, rgba(117, 71, 237, .065), transparent 24%),
        linear-gradient(135deg, #ffffff 0%, #fbfdff 58%, #f7faff 100%);
    }

    .company-speaker-slide::before {
      content: "";
      display: block;
      position: absolute;
      left: 34px;
      bottom: 38px;
      width: 390px;
      height: 188px;
      opacity: .46;
      background-image: radial-gradient(circle, rgba(39, 92, 194, .18) 1.25px, transparent 1.5px);
      background-size: 22px 22px;
      mask-image: linear-gradient(22deg, #000, transparent 78%);
      -webkit-mask-image: linear-gradient(22deg, #000, transparent 78%);
      pointer-events: none;
    }

    .company-speaker-slide .slide-head {
      position: relative;
      z-index: 2;
    }

    .company-speaker-slide .chapter-tag {
      background: linear-gradient(135deg, #0f56e8, #347cf6 58%, #6d5efc);
    }

    .company-speaker-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
      gap: 30px;
      width: 100%;
      height: 100%;
    }

    .company-intro-panel,
    .speaker-intro-panel {
      position: relative;
      min-width: 0;
      height: 100%;
      overflow: hidden;
      border-radius: 28px;
    }

    .company-intro-panel {
      display: flex;
      flex-direction: column;
      padding: 30px 34px 27px;
      border: 1px solid rgba(51, 91, 163, .15);
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 20px 52px rgba(33, 69, 132, .10), inset 0 1px 0 rgba(255, 255, 255, .94);
    }

    .company-intro-panel::after {
      content: "";
      position: absolute;
      right: -92px;
      top: -116px;
      width: 310px;
      height: 310px;
      border: 1px solid rgba(15, 86, 232, .10);
      border-radius: 50%;
      box-shadow: 0 0 0 44px rgba(15, 86, 232, .025), 0 0 0 88px rgba(117, 71, 237, .018);
      pointer-events: none;
    }

    .company-identity-row {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      gap: 24px;
      align-items: center;
    }

    .company-founded {
      display: grid;
      align-content: center;
      justify-items: center;
      width: 112px;
      height: 112px;
      color: #ffffff;
      border-radius: 26px;
      background: linear-gradient(145deg, #0f56e8, #347cf6 55%, #6d5efc);
      box-shadow: 0 16px 34px rgba(27, 83, 215, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
    }

    .company-founded span {
      font-size: 13px;
      font-weight: 760;
      letter-spacing: .16em;
      opacity: .78;
    }

    .company-founded strong {
      margin-top: 2px;
      font: 900 39px/1 "Avenir Next", "Helvetica Neue", Arial, sans-serif;
      letter-spacing: -.045em;
    }

    .company-founded em {
      margin-top: 8px;
      font-size: 13px;
      font-style: normal;
      font-weight: 760;
      letter-spacing: .04em;
    }

    .company-name-block h3 {
      margin: 0;
      color: var(--ink);
      font-size: 31px;
      line-height: 1.22;
      letter-spacing: -.03em;
    }

    .company-tech-focus {
      display: flex;
      align-items: center;
      gap: 17px;
      margin-top: 15px;
      color: #49627f;
      font-size: 18px;
      font-weight: 730;
    }

    .company-tech-focus span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .company-tech-focus span + span::before {
      content: "";
      width: 4px;
      height: 4px;
      margin-right: 9px;
      border-radius: 50%;
      background: #6d5efc;
      box-shadow: 0 0 12px rgba(109, 94, 252, .48);
    }

    .company-tech-focus svg {
      width: 21px;
      height: 21px;
      color: var(--blue);
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .company-mission {
      position: relative;
      margin-top: 25px;
      padding: 20px 24px 20px 29px;
      border-left: 5px solid #0f56e8;
      border-radius: 0 18px 18px 0;
      background: linear-gradient(90deg, rgba(15, 86, 232, .08), rgba(117, 71, 237, .035) 72%, transparent);
    }

    .company-mission span {
      display: block;
      margin-bottom: 6px;
      color: #55708f;
      font-size: 14px;
      font-weight: 850;
      letter-spacing: .14em;
    }

    .company-mission strong {
      color: #123a79;
      font-size: 26px;
      line-height: 1.34;
      letter-spacing: -.02em;
    }

    .company-summary {
      margin: 18px 0 0;
      color: #455b78;
      font-size: 18px;
      line-height: 1.64;
    }

    .company-domain-rail {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      margin-top: auto;
      padding: 17px 6px 15px;
      border: 1px solid rgba(50, 98, 185, .10);
      border-radius: 19px;
      background: linear-gradient(120deg, #f1f6ff, #f7f9ff 62%, #f4f1ff);
    }

    .company-domain-item {
      display: grid;
      justify-items: center;
      gap: 8px;
      min-width: 0;
      color: #36516f;
      font-size: 15px;
      font-weight: 780;
      white-space: nowrap;
    }

    .company-domain-item + .company-domain-item {
      border-left: 1px solid rgba(60, 97, 165, .12);
    }

    .company-domain-item svg {
      width: 25px;
      height: 25px;
      color: var(--domain-color, #0f56e8);
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .company-impact-line {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 17px 0 0;
      color: #506680;
      font-size: 16px;
      line-height: 1.45;
    }

    .company-impact-line::before {
      content: "";
      flex: 0 0 42px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, #0f56e8, #6d5efc, #0d9f8f);
      box-shadow: 0 0 14px rgba(52, 124, 246, .24);
    }

    .speaker-intro-panel {
      padding: 34px 34px 30px;
      color: #ffffff;
      background:
        radial-gradient(circle at 84% 14%, rgba(106, 177, 255, .34), transparent 28%),
        radial-gradient(circle at 8% 88%, rgba(31, 203, 183, .19), transparent 31%),
        linear-gradient(148deg, #071d4d 0%, #0b3470 56%, #293370 100%);
      box-shadow: 0 24px 62px rgba(14, 43, 103, .24), inset 0 1px 0 rgba(255, 255, 255, .13);
    }

    .speaker-intro-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .22;
      background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: radial-gradient(circle at 74% 28%, #000 0%, transparent 68%);
      -webkit-mask-image: radial-gradient(circle at 74% 28%, #000 0%, transparent 68%);
      pointer-events: none;
    }

    .speaker-intro-panel::after {
      content: "赵";
      position: absolute;
      right: -22px;
      top: -42px;
      color: rgba(255, 255, 255, .035);
      font-size: 270px;
      font-weight: 950;
      line-height: 1;
      pointer-events: none;
    }

    .speaker-identity {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 110px minmax(0, 1fr);
      gap: 22px;
      align-items: center;
      padding-bottom: 25px;
      border-bottom: 1px solid rgba(255, 255, 255, .17);
    }

    .speaker-monogram {
      display: grid;
      place-items: center;
      width: 110px;
      height: 110px;
      border: 1px solid rgba(255, 255, 255, .30);
      border-radius: 50%;
      background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .36), transparent 19%),
        linear-gradient(145deg, rgba(62, 146, 255, .68), rgba(109, 94, 252, .54) 62%, rgba(13, 159, 143, .48));
      box-shadow: 0 0 0 9px rgba(255, 255, 255, .055), 0 18px 38px rgba(0, 13, 50, .27), inset 0 1px 0 rgba(255, 255, 255, .38);
      font-size: 54px;
      font-weight: 900;
    }

    .speaker-name-block h3 {
      margin: 0;
      font-size: 44px;
      line-height: 1.05;
      letter-spacing: -.04em;
    }

    .speaker-name-block p {
      margin: 12px 0 0;
      color: rgba(233, 243, 255, .82);
      font-size: 19px;
      line-height: 1.4;
    }

    .speaker-detail-list {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }

    .speaker-detail {
      display: grid;
      grid-template-columns: 45px minmax(0, 1fr);
      gap: 15px;
      align-items: center;
      min-height: 69px;
      padding: 10px 14px 10px 11px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 17px;
      background: rgba(255, 255, 255, .075);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .speaker-detail-icon {
      display: grid;
      place-items: center;
      width: 45px;
      height: 45px;
      border-radius: 14px;
      color: #b8dcff;
      background: rgba(255, 255, 255, .10);
    }

    .speaker-detail-icon svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .speaker-detail span {
      display: block;
      margin-bottom: 3px;
      color: rgba(195, 221, 250, .72);
      font-size: 13px;
      font-weight: 820;
      letter-spacing: .12em;
    }

    .speaker-detail strong {
      display: block;
      color: #ffffff;
      font-size: 17px;
      font-weight: 720;
      line-height: 1.42;
    }

    .company-speaker-bridge {
      position: absolute;
      z-index: 3;
      left: calc(57.55% + 7px);
      top: 50%;
      display: grid;
      place-items: center;
      width: 28px;
      height: 76px;
      transform: translate(-50%, -50%);
      color: #ffffff;
      border: 1px solid rgba(15, 86, 232, .20);
      border-radius: 999px;
      background: linear-gradient(180deg, #347cf6, #6d5efc);
      box-shadow: 0 10px 24px rgba(31, 78, 191, .24), 0 0 0 7px rgba(255, 255, 255, .92);
    }

    .company-speaker-bridge svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .company-speaker-slide.active .company-intro-panel {
      animation: company-panel-enter .68s cubic-bezier(.2, .8, .24, 1) both;
    }

    .company-speaker-slide.active .speaker-intro-panel {
      animation: speaker-panel-enter .72s .08s cubic-bezier(.2, .8, .24, 1) both;
    }

    .company-speaker-slide.active .speaker-detail {
      animation: speaker-detail-enter .54s cubic-bezier(.2, .76, .25, 1) both;
    }

    .company-speaker-slide.active .speaker-detail:nth-child(1) { animation-delay: .18s; }
    .company-speaker-slide.active .speaker-detail:nth-child(2) { animation-delay: .25s; }
    .company-speaker-slide.active .speaker-detail:nth-child(3) { animation-delay: .32s; }
    .company-speaker-slide.active .speaker-detail:nth-child(4) { animation-delay: .39s; }

    @keyframes company-panel-enter {
      from { opacity: 0; transform: translate3d(-24px, 0, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes speaker-panel-enter {
      from { opacity: 0; transform: translate3d(24px, 0, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes speaker-detail-enter {
      from { opacity: 0; transform: translate3d(0, 10px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    /* 第 2 页简洁版：降低装饰性，突出公司与主讲人信息本身 */
    .company-speaker-slide {
      background: linear-gradient(135deg, #ffffff 0%, #fbfdff 62%, #f7faff 100%);
    }

    .company-speaker-slide::before,
    .company-intro-panel::after,
    .speaker-intro-panel::before,
    .speaker-intro-panel::after {
      display: none;
    }

    .company-speaker-layout {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
      gap: 24px;
    }

    .company-intro-panel,
    .speaker-intro-panel {
      border: 1px solid #dbe4f2;
      border-radius: 20px;
      background: #ffffff;
      box-shadow: 0 12px 32px rgba(33, 69, 132, .065);
    }

    .company-intro-panel {
      padding: 28px 32px 24px;
    }

    .company-identity-row {
      grid-template-columns: 98px minmax(0, 1fr);
      gap: 22px;
    }

    .company-founded {
      width: 98px;
      height: 98px;
      color: #0f56e8;
      border: 1px solid #d8e5fa;
      border-radius: 18px;
      background: #f1f6ff;
      box-shadow: none;
    }

    .company-founded span { opacity: .66; }
    .company-founded strong { font-size: 35px; }
    .company-founded em { margin-top: 6px; color: #49698f; }

    .company-name-block h3 { font-size: 30px; }

    .company-tech-focus {
      gap: 14px;
      margin-top: 12px;
      font-size: 17px;
    }

    .company-tech-focus span + span::before {
      background: #9dafc7;
      box-shadow: none;
    }

    .company-mission {
      margin-top: 22px;
      padding: 18px 22px 18px 25px;
      border-left-width: 4px;
      border-radius: 0 12px 12px 0;
      background: #f7faff;
    }

    .company-mission strong { font-size: 25px; }

    .company-summary {
      margin-top: 16px;
      line-height: 1.58;
    }

    .company-domain-rail {
      margin-top: auto;
      padding: 15px 0 13px;
      border: 0;
      border-top: 1px solid #e2e9f4;
      border-bottom: 1px solid #e2e9f4;
      border-radius: 0;
      background: transparent;
    }

    .company-domain-item { gap: 7px; }
    .company-domain-item + .company-domain-item { border-left-color: #e2e9f4; }

    .company-impact-line {
      margin-top: 15px;
      color: #60728b;
    }

    .company-impact-line::before {
      flex-basis: 32px;
      height: 2px;
      background: #0f56e8;
      box-shadow: none;
    }

    .speaker-intro-panel {
      padding: 30px 32px 26px;
      color: var(--text);
    }

    .speaker-identity {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      padding-bottom: 23px;
      border-bottom-color: #dfe7f2;
    }

    .speaker-monogram {
      width: 82px;
      height: 82px;
      color: #0f56e8;
      border: 1px solid #d7e3f5;
      border-radius: 18px;
      background: #f1f6ff;
      box-shadow: none;
      font-size: 39px;
    }

    .speaker-name-block h3 {
      color: var(--ink);
      font-size: 40px;
    }

    .speaker-name-block p {
      margin-top: 9px;
      color: #667994;
      font-size: 18px;
    }

    .speaker-detail-list {
      gap: 0;
      margin-top: 12px;
    }

    .speaker-detail {
      grid-template-columns: 105px minmax(0, 1fr);
      gap: 12px;
      min-height: 76px;
      padding: 14px 2px;
      border: 0;
      border-bottom: 1px solid #e4eaf3;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .speaker-detail:last-child { border-bottom: 0; }
    .speaker-detail-icon { display: none; }

    .speaker-detail > div {
      display: contents;
    }

    .speaker-detail span {
      align-self: center;
      margin: 0;
      color: #0f56e8;
      font-size: 14px;
      letter-spacing: .08em;
    }

    .speaker-detail .speaker-detail-icon {
      display: none;
    }

    .speaker-detail strong {
      align-self: center;
      color: #243b5a;
      font-size: 18px;
      font-weight: 690;
      line-height: 1.5;
    }

    .company-speaker-bridge { display: none; }

    .company-speaker-slide.active .speaker-detail {
      animation: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .company-speaker-slide .company-intro-panel,
      .company-speaker-slide .speaker-intro-panel,
      .company-speaker-slide .speaker-detail { animation: none !important; }
    }

    .agenda-slide {
      background:
        radial-gradient(circle at 10% 76%, rgba(15, 86, 232, .085), transparent 27%),
        radial-gradient(circle at 44% 12%, rgba(109, 94, 252, .045), transparent 24%),
        linear-gradient(135deg, #ffffff 0%, #fbfdff 55%, #f7faff 100%);
    }

    .agenda-slide .slide-inner {
      padding: 52px 74px 58px;
    }

    .agenda-slide::before {
      content: "";
      display: block;
      position: absolute;
      z-index: 0;
      left: -186px;
      bottom: -228px;
      width: 620px;
      height: 620px;
      border: 1px solid rgba(15, 86, 232, .11);
      border-radius: 50%;
      box-shadow:
        0 0 0 68px rgba(15, 86, 232, .025),
        0 0 0 142px rgba(109, 94, 252, .018);
      pointer-events: none;
    }

    .agenda-slide .slide-inner::after {
      content: "";
      position: absolute;
      left: 54px;
      top: 44px;
      width: 360px;
      height: 170px;
      opacity: .52;
      background-image: radial-gradient(circle, rgba(46, 91, 184, .18) 1.4px, transparent 1.6px);
      background-size: 22px 22px;
      mask-image: linear-gradient(115deg, #000, transparent 78%);
      -webkit-mask-image: linear-gradient(115deg, #000, transparent 78%);
      pointer-events: none;
    }

    .agenda-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 470px minmax(0, 1fr);
      gap: 78px;
      align-items: center;
      width: 100%;
      height: 100%;
    }

    .agenda-intro {
      position: relative;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 0 26px 8px;
    }

    .agenda-kicker {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 24px;
      color: var(--blue);
      font-size: 16px;
      font-weight: 850;
      letter-spacing: .22em;
    }

    .agenda-kicker::before,
    .agenda-kicker::after {
      content: "";
      width: 54px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--blue), #6d5efc);
      box-shadow: 0 0 18px rgba(15, 86, 232, .24);
    }

    .agenda-title {
      margin: 0;
      color: var(--ink);
      font-size: 78px;
      font-weight: 950;
      line-height: 1.02;
      letter-spacing: -.065em;
    }

    .agenda-title span { color: var(--blue); }

    .agenda-subtitle {
      max-width: 410px;
      margin: 28px 0 0;
      color: #60738f;
      font-size: 22px;
      line-height: 1.72;
    }

    .agenda-index {
      display: flex;
      align-items: center;
      gap: 20px;
      width: 378px;
      margin-top: 42px;
      padding-top: 25px;
      border-top: 1px solid rgba(43, 85, 170, .17);
    }

    .agenda-index strong {
      color: transparent;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      -webkit-background-clip: text;
      background-clip: text;
      font-size: 58px;
      font-weight: 950;
      line-height: .9;
      letter-spacing: -.05em;
    }

    .agenda-index span {
      color: #667a98;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.55;
      letter-spacing: .03em;
    }

    .agenda-path {
      position: relative;
      display: grid;
      grid-template-rows: repeat(5, minmax(0, 1fr));
      gap: 12px;
      height: 716px;
      margin: 0;
    }

    .agenda-path::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 46px;
      top: 42px;
      bottom: 42px;
      width: 2px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--blue), var(--violet) 68%, var(--gold));
      opacity: .24;
    }

    .agenda-item {
      --card-accent: #0f56e8;
      --card-soft: #eef4ff;
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 58px 64px minmax(0, 1fr) 34px;
      gap: 17px;
      align-items: center;
      min-width: 0;
      padding: 13px 21px 13px 18px;
      border: 1px solid rgba(67, 100, 163, .14);
      border-radius: 22px;
      background: linear-gradient(100deg, var(--card-soft) 0%, rgba(255, 255, 255, .98) 29%, #ffffff 100%);
      box-shadow: 0 12px 32px rgba(35, 67, 126, .085), inset 0 1px 0 rgba(255, 255, 255, .9);
      overflow: hidden;
      animation: agenda-card-arrive .65s cubic-bezier(.2, .78, .28, 1) both;
    }

    .agenda-item:nth-child(2) { --card-accent: #347cf6; --card-soft: #edf5ff; animation-delay: .05s; }
    .agenda-item:nth-child(3) { --card-accent: #138fbb; --card-soft: #edfaff; animation-delay: .10s; }
    .agenda-item:nth-child(4) { --card-accent: #0d9f8f; --card-soft: #edfbf8; animation-delay: .15s; }
    .agenda-item:nth-child(5) { --card-accent: #a8740f; --card-soft: #fff8e9; animation-delay: .20s; }

    .agenda-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 16px;
      bottom: 16px;
      width: 5px;
      border-radius: 0 999px 999px 0;
      background: var(--card-accent);
      box-shadow: 0 0 18px color-mix(in srgb, var(--card-accent) 34%, transparent);
    }

    .agenda-item::after {
      content: "";
      position: absolute;
      right: -38px;
      top: -52px;
      width: 136px;
      height: 136px;
      border: 1px solid color-mix(in srgb, var(--card-accent) 13%, transparent);
      border-radius: 50%;
      pointer-events: none;
    }

    .agenda-number {
      justify-self: center;
      color: var(--card-accent);
      font-size: 18px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .agenda-icon {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      color: var(--card-accent);
      border: 1px solid color-mix(in srgb, var(--card-accent) 14%, white);
      border-radius: 18px;
      background: color-mix(in srgb, var(--card-soft) 84%, white);
      box-shadow: 0 8px 20px color-mix(in srgb, var(--card-accent) 11%, transparent);
    }

    .agenda-icon svg {
      width: 30px;
      height: 30px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .agenda-item-copy { min-width: 0; }

    .agenda-item h3 {
      margin: 0 0 5px;
      color: var(--ink);
      font-size: 25px;
      line-height: 1.1;
      letter-spacing: -.02em;
    }

    .agenda-item p {
      margin: 0;
      color: #667994;
      font-size: 17px;
      line-height: 1.42;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .agenda-arrow {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      color: var(--card-accent);
      border: 1px solid color-mix(in srgb, var(--card-accent) 20%, white);
      border-radius: 50%;
      background: #ffffff;
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
    }

    @keyframes agenda-card-arrive {
      from { opacity: 0; transform: translate3d(24px, 0, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .agenda-item { animation: none !important; }
    }

    .chapter-slide {
      color: white;
      background:
        radial-gradient(circle at 76% 20%, rgba(48, 130, 255, .35), transparent 25%),
        radial-gradient(circle at 25% 86%, rgba(117, 71, 237, .28), transparent 30%),
        linear-gradient(135deg, #061a42, #0a3471 68%, #152a63);
    }

    .chapter-slide::before {
      width: 660px;
      height: 660px;
      right: -130px;
      top: -180px;
      border-color: rgba(255, 255, 255, .12);
      box-shadow:
        0 0 0 70px rgba(255,255,255,.018),
        0 0 0 140px rgba(255,255,255,.012);
    }

    .chapter-slide::after { background: linear-gradient(90deg, var(--gold), #60d6ff, var(--violet)); }

    .chapter-content {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 380px 1fr;
      align-items: center;
      height: 100%;
      padding: 70px 110px;
      transform: scale(var(--content-scale));
      transform-origin: center center;
    }

    .chapter-number {
      color: rgba(255, 255, 255, .16);
      font-size: 260px;
      line-height: .8;
      letter-spacing: -.08em;
      font-weight: 950;
    }

    .chapter-copy .chapter-label {
      color: #80d7ff;
      font-size: 22px;
      font-weight: 850;
      letter-spacing: .16em;
    }

    .chapter-copy h2 {
      margin: 22px 0 20px;
      color: white;
      font-size: 76px;
      line-height: 1.12;
      letter-spacing: -.045em;
    }

    .chapter-copy p {
      max-width: 850px;
      margin: 0;
      color: #c8d8f5;
      font-size: 29px;
      line-height: 1.55;
    }

    .chapter-signposts {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 38px;
    }

    .chapter-signposts span {
      padding: 9px 16px;
      border: 1px solid rgba(177, 213, 255, .32);
      border-radius: 999px;
      color: #e8f2ff;
      background: rgba(255,255,255,.05);
      font-size: 18px;
    }

    .slogan-slide .chapter-content {
      grid-template-columns: 1fr;
      text-align: center;
      padding: 80px 150px;
    }

    .slogan-slide .chapter-copy h2 {
      margin: 24px auto;
      max-width: 1280px;
      font-size: 68px;
      line-height: 1.3;
    }

    .slogan-slide .chapter-copy p {
      margin: 0 auto;
      max-width: 1080px;
    }

    /* 第25页：AI+教育展开前的悬念提问 */
    .question-seed-slide {
      color: #172332;
      background:
        radial-gradient(circle at 82% 18%, rgba(60, 154, 145, .15), transparent 28%),
        radial-gradient(circle at 14% 88%, rgba(210, 165, 67, .13), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f7faf9 54%, #fbf8f0 100%);
    }

    .question-seed-slide::before {
      content: "";
      position: absolute;
      display: block;
      inset: 0;
      width: auto;
      height: auto;
      border: 0;
      border-radius: 0;
      pointer-events: none;
      opacity: .48;
      background-image:
        linear-gradient(rgba(37, 91, 103, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 91, 103, .055) 1px, transparent 1px);
      background-size: 44px 44px;
      box-shadow: none;
      -webkit-mask-image: radial-gradient(circle at 56% 48%, #000 0%, rgba(0,0,0,.55) 48%, transparent 82%);
      mask-image: radial-gradient(circle at 56% 48%, #000 0%, rgba(0,0,0,.55) 48%, transparent 82%);
    }

    .question-seed-slide::after {
      content: "";
      position: absolute;
      display: block;
      left: 0;
      right: 0;
      bottom: 0;
      height: 5px;
      background: linear-gradient(90deg, #c99a38, #3a9d93 52%, #436f9f);
    }

    .question-seed {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 390px;
      align-items: center;
      gap: 42px;
      width: 100%;
      height: 100%;
      padding: 92px 118px 86px 132px;
      transform: scale(var(--content-scale));
      transform-origin: center center;
    }

    .question-seed-copy { position: relative; z-index: 2; min-width: 0; }

    .question-seed-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: #307d78;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: .18em;
    }

    .question-seed-eyebrow::before {
      content: "";
      width: 40px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, #c99a38, #3a9d93);
    }

    .question-seed-intro {
      margin: 28px 0 15px;
      color: #5b6876;
      font-size: 25px;
      font-weight: 720;
      line-height: 1.4;
    }

    .question-seed h2 {
      max-width: 1020px;
      margin: 30px 0 0;
      color: #172332;
      font-size: 67px;
      font-weight: 950;
      line-height: 1.24;
      letter-spacing: -.052em;
    }

    .question-seed h2 span,
    .question-seed h2 strong { display: block; }

    .question-seed h2 strong {
      position: relative;
      z-index: 0;
      isolation: isolate;
      width: fit-content;
      margin-top: 8px;
      color: #172332;
      font-weight: 950;
    }

    .question-seed h2 strong::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: 2px;
      right: -9px;
      bottom: 5px;
      height: 16px;
      border-radius: 999px;
      opacity: .52;
      background: linear-gradient(90deg, rgba(211,164,61,.7), rgba(67,157,145,.38));
      transform: scaleX(0);
      transform-origin: left center;
    }

    .question-seed-note {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 35px;
      color: #4c5e6e;
      font-size: 20px;
      font-weight: 720;
    }

    .question-seed-note::before {
      content: "";
      width: 58px;
      height: 1px;
      background: #9aa9b3;
    }

    .question-seed-scope {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-top: 38px;
      color: #6b7885;
      font-size: 15px;
      font-weight: 850;
      letter-spacing: .08em;
    }

    .question-seed-scope i {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #c7a04a;
    }

    .question-seed-orb {
      position: relative;
      display: grid;
      place-items: center;
      width: 350px;
      height: 350px;
      justify-self: end;
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.98), rgba(255,255,255,.5) 32%, transparent 63%),
        linear-gradient(145deg, rgba(255,255,255,.7), rgba(219,238,235,.58));
      box-shadow:
        0 36px 90px rgba(46, 91, 103, .16),
        0 0 0 1px rgba(39, 116, 118, .09),
        inset 0 1px 0 #ffffff,
        inset -34px -28px 62px rgba(53, 139, 131, .09);
      -webkit-backdrop-filter: blur(18px) saturate(1.12);
      backdrop-filter: blur(18px) saturate(1.12);
    }

    .question-seed-orb::before,
    .question-seed-orb::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(45, 139, 132, .17);
      border-radius: 50%;
      pointer-events: none;
    }

    .question-seed-orb::before { inset: -38px; }
    .question-seed-orb::after { inset: -82px; border-color: rgba(201,154,56,.13); }

    .question-seed-orb strong {
      color: #237f78;
      font-size: 198px;
      font-weight: 780;
      line-height: 1;
      letter-spacing: -.08em;
      text-shadow: 0 15px 36px rgba(31, 116, 111, .16);
      transform: translate(-5px, -3px);
    }

    .question-seed-orb span {
      position: absolute;
      width: 13px;
      height: 13px;
      border: 3px solid #ffffff;
      border-radius: 50%;
      background: #d1a03b;
      box-shadow: 0 5px 14px rgba(175,127,33,.28);
    }

    .question-seed-orb span:nth-of-type(1) { left: 20px; top: 83px; }
    .question-seed-orb span:nth-of-type(2) { right: 29px; top: 45px; background: #409d93; }
    .question-seed-orb span:nth-of-type(3) { right: 10px; bottom: 76px; background: #577da3; }

    .slide.active .question-seed-eyebrow,
    .slide.active .question-seed-intro,
    .slide.active .question-seed h2,
    .slide.active .question-seed-note,
    .slide.active .question-seed-scope {
      animation: question-seed-rise .62s cubic-bezier(.18,.78,.2,1) both;
    }

    .slide.active .question-seed-intro { animation-delay: .08s; }
    .slide.active .question-seed h2 { animation-delay: .16s; }
    .slide.active .question-seed-note { animation-delay: .27s; }
    .slide.active .question-seed-scope { animation-delay: .36s; }
    .slide.active .question-seed h2 strong::after { animation: question-seed-underline .72s .64s cubic-bezier(.2,.8,.2,1) forwards; }
    .slide.active .question-seed-orb { animation: question-seed-orb-in .82s .16s cubic-bezier(.16,.78,.2,1) both; }
    .slide.active .question-seed-orb::before { animation: question-seed-ring 1.4s .55s ease-out both; }
    .slide.active .question-seed-orb::after { animation: question-seed-ring 1.6s .72s ease-out both; }

    @keyframes question-seed-rise {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes question-seed-underline {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    @keyframes question-seed-orb-in {
      from { opacity: 0; transform: translateX(26px) scale(.92); }
      to { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes question-seed-ring {
      from { opacity: 0; transform: scale(.82); }
      to { opacity: 1; transform: scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active .question-seed-eyebrow,
      .slide.active .question-seed-intro,
      .slide.active .question-seed h2,
      .slide.active .question-seed-note,
      .slide.active .question-seed-scope,
      .slide.active .question-seed-orb,
      .slide.active .question-seed-orb::before,
      .slide.active .question-seed-orb::after,
      .slide.active .question-seed h2 strong::after { animation: none !important; }

      .question-seed h2 strong::after { transform: scaleX(1); }
    }

    .break-slide {
      background:
        radial-gradient(circle at 50% 50%, rgba(64, 129, 255, .12), transparent 32%),
        linear-gradient(135deg, #fbfdff, #f3f6ff);
    }

    .break-content {
      display: grid;
      place-items: center;
      align-content: center;
      height: 100%;
      text-align: center;
      transform: scale(var(--content-scale));
      transform-origin: center center;
    }

    .break-content strong {
      color: var(--blue);
      font-size: 150px;
      line-height: 1;
      letter-spacing: -.07em;
    }

    .break-content h2 {
      margin: 25px 0 12px;
      color: var(--ink);
      font-size: 54px;
    }

    .break-content p {
      margin: 0;
      color: var(--muted);
      font-size: 25px;
    }

    /* 新增第25页：通用智能体与教育智能体 */
    .edu-agent-difference-slide {
      background:
        radial-gradient(circle at 79% 43%, rgba(91, 186, 177, .11), transparent 31%),
        radial-gradient(circle at 12% 86%, rgba(224, 178, 76, .10), transparent 28%),
        linear-gradient(145deg, #f8fbff 0%, #f4f9fb 56%, #fbfaf5 100%);
    }

    .edu-agent-difference-slide .slide-head {
      border-bottom-color: rgba(30, 91, 139, .18);
    }

    .edu-agent-difference-slide .chapter-tag {
      background: linear-gradient(135deg, var(--blue), var(--violet));
      box-shadow: 0 10px 24px rgba(29, 91, 121, .16);
    }

    .edu-agent-difference-slide .slide-head h2 {
      color: #102f54;
      font-size: 49px;
    }

    .edu-agent-difference-slide .slide-head p { color: #5b6f80; }
    .edu-agent-difference-slide .slide-content { padding-top: 18px; }

    .edu-agent-compare-stage {
      display: grid;
      grid-template-rows: 506px 82px;
      gap: 15px;
      width: 100%;
      height: 603px;
    }

    .agent-compare-main {
      display: grid;
      grid-template-columns: 370px 96px minmax(0, 1fr);
      gap: 20px;
      min-width: 0;
      height: 506px;
    }

    .agent-compare-panel {
      position: relative;
      min-width: 0;
      overflow: hidden;
      border-radius: 26px;
    }

    .agent-general-panel {
      padding: 22px 22px 20px;
      border: 1px solid #d8e1e9;
      color: #28425b;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 16px 38px rgba(36, 67, 89, .08);
    }

    .agent-education-panel {
      padding: 22px 24px 20px;
      border: 1px solid rgba(45, 128, 133, .32);
      color: #173b4d;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(238, 249, 247, .93)),
        #fff;
      box-shadow: 0 22px 48px rgba(30, 93, 100, .13);
    }

    .agent-education-panel::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, #2d7b8a, #49b7a4 52%, #d5a63f);
    }

    .agent-compare-panel-head {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      min-height: 66px;
    }

    .agent-panel-icon {
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border-radius: 17px;
      color: #42647d;
      background: #edf2f6;
    }

    .agent-education-panel .agent-panel-icon {
      color: #176f6c;
      background: linear-gradient(145deg, #d9f3ee, #eef9f6);
      box-shadow: inset 0 0 0 1px rgba(38, 137, 127, .12);
    }

    .agent-panel-icon svg {
      width: 30px;
      height: 30px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .agent-compare-panel-head small {
      display: block;
      margin-bottom: 2px;
      color: #75899a;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .13em;
    }

    .agent-education-panel .agent-compare-panel-head small { color: #278076; }

    .agent-compare-panel-head h3 {
      margin: 0;
      color: #183650;
      font-size: 28px;
      line-height: 1.1;
      letter-spacing: -.025em;
    }

    .agent-education-panel .agent-compare-panel-head h3 {
      color: #125851;
      font-size: 31px;
    }

    .agent-compare-panel-head p {
      margin: 4px 0 0;
      color: #667c8c;
      font-size: 16px;
      line-height: 1.35;
    }

    .agent-general-flow {
      display: grid;
      gap: 7px;
      margin: 18px 0 16px;
      padding: 0;
      list-style: none;
    }

    .agent-general-step {
      position: relative;
      display: grid;
      grid-template-columns: 37px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      min-height: 61px;
      padding: 8px 12px;
      border: 1px solid #e1e8ee;
      border-radius: 14px;
      background: rgba(247, 250, 252, .90);
    }

    .agent-general-step > b {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 11px;
      color: #4a667d;
      background: #e6edf2;
      font-size: 14px;
    }

    .agent-general-step strong,
    .agent-general-step span { display: block; }

    .agent-general-step strong {
      color: #213e57;
      font-size: 18px;
      line-height: 1.2;
    }

    .agent-general-step span {
      margin-top: 2px;
      color: #758898;
      font-size: 15px;
      line-height: 1.25;
    }

    .agent-success-standard {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      min-height: 58px;
      padding: 10px 14px;
      border-radius: 15px;
    }

    .agent-success-standard span {
      color: #6c8090;
      font-size: 13px;
      font-weight: 850;
      letter-spacing: .04em;
    }

    .agent-success-standard strong {
      color: #223f57;
      font-size: 20px;
      line-height: 1.25;
    }

    .agent-success-standard.general { background: #eef3f6; }

    .agent-success-standard.education {
      grid-template-columns: 80px minmax(0, 1fr);
      margin-top: 13px;
      background: linear-gradient(90deg, #e5f5f1, #f6f3e7);
    }

    .agent-success-standard.education span { color: #27786f; }
    .agent-success-standard.education strong { color: #174d4b; font-size: 19px; }

    .agent-compare-bridge {
      position: relative;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 8px;
      min-width: 0;
      color: #547084;
      text-align: center;
    }

    .agent-compare-bridge > span {
      color: #61798a;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
    }

    .agent-compare-bridge-line {
      position: relative;
      width: 76px;
      height: 3px;
      overflow: hidden;
      border-radius: 3px;
      background: linear-gradient(90deg, #cbd9e2, #58ae9f);
    }

    .agent-compare-bridge-line::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      width: 13px;
      height: 13px;
      border-right: 3px solid #4a9a90;
      border-bottom: 3px solid #4a9a90;
      transform: translate(-1px, -50%) rotate(-45deg);
    }

    .agent-compare-bridge-line i {
      position: absolute;
      left: 6px;
      top: 50%;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(63, 163, 147, .18), 0 0 18px rgba(45, 155, 139, .52);
      transform: translateY(-50%);
    }

    .agent-compare-bridge strong {
      color: #2b5f69;
      font-size: 16px;
    }

    .agent-compare-bridge b {
      color: #176f6c;
      font-size: 18px;
      line-height: 1.25;
    }

    .agent-foundation-strip {
      display: grid;
      grid-template-columns: auto repeat(4, minmax(0, 1fr));
      gap: 8px;
      align-items: center;
      margin: 15px 0 12px;
    }

    .agent-foundation-strip > strong {
      color: #4f6876;
      font-size: 14px;
      white-space: nowrap;
    }

    .agent-foundation-strip > span {
      display: grid;
      place-items: center;
      height: 34px;
      border: 1px solid #d8e7e4;
      border-radius: 10px;
      color: #41666a;
      background: #f4f9f8;
      font-size: 15px;
      font-weight: 800;
    }

    .agent-professional-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 11px;
    }

    .agent-professional-card {
      position: relative;
      min-width: 0;
      min-height: 113px;
      padding: 15px 13px 12px 47px;
      border: 1px solid rgba(53, 130, 127, .18);
      border-radius: 16px;
      background: rgba(255, 255, 255, .76);
      box-shadow: 0 8px 18px rgba(39, 96, 98, .05);
    }

    .agent-professional-card > b {
      position: absolute;
      left: 12px;
      top: 14px;
      display: grid;
      place-items: center;
      width: 27px;
      height: 27px;
      border-radius: 9px;
      color: #fff;
      background: linear-gradient(135deg, #2c8790, #4db39e);
      font-size: 12px;
      box-shadow: 0 6px 14px rgba(44, 135, 144, .18);
    }

    .agent-professional-card strong {
      display: block;
      color: #184d50;
      font-size: 19px;
      line-height: 1.2;
    }

    .agent-professional-card p {
      margin: 6px 0 0;
      color: #5f7779;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.38;
    }

    .agent-compare-conclusion {
      display: grid;
      grid-template-columns: 48px auto minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      min-height: 82px;
      padding: 12px 24px;
      border: 1px solid rgba(38, 111, 115, .22);
      border-radius: 21px;
      background: linear-gradient(90deg, rgba(231, 246, 243, .96), rgba(255, 248, 231, .94));
      box-shadow: 0 13px 30px rgba(42, 91, 93, .08);
    }

    .agent-compare-conclusion > span:first-child {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 15px;
      color: #176f6c;
      background: rgba(255, 255, 255, .78);
      box-shadow: inset 0 0 0 1px rgba(41, 126, 120, .12);
    }

    .agent-compare-conclusion svg {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .agent-compare-conclusion strong {
      color: #164c50;
      font-size: 24px;
      white-space: nowrap;
    }

    .agent-compare-conclusion > span:last-child {
      color: #3f5f63;
      font-size: 20px;
      font-weight: 720;
      line-height: 1.35;
    }

    .slide.active.edu-agent-difference-slide .agent-general-panel,
    .slide.active.edu-agent-difference-slide .agent-compare-bridge,
    .slide.active.edu-agent-difference-slide .agent-education-panel,
    .slide.active.edu-agent-difference-slide .agent-compare-conclusion {
      animation: agent-compare-arrive .68s cubic-bezier(.2, .78, .22, 1) both;
    }

    .slide.active.edu-agent-difference-slide .agent-compare-bridge { animation-delay: .08s; }
    .slide.active.edu-agent-difference-slide .agent-education-panel { animation-delay: .15s; }
    .slide.active.edu-agent-difference-slide .agent-compare-conclusion { animation-delay: .22s; }

    .slide.active.edu-agent-difference-slide .agent-professional-card {
      animation: agent-professional-card-in .52s cubic-bezier(.2, .8, .2, 1) both;
      animation-delay: calc(.28s + var(--agent-card-order, 0) * .055s);
    }

    .slide.active.edu-agent-difference-slide .agent-compare-bridge-line i {
      animation: agent-bridge-pulse 2.1s ease-in-out .65s infinite;
    }

    @keyframes agent-compare-arrive {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes agent-professional-card-in {
      from { opacity: 0; transform: translateY(13px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes agent-bridge-pulse {
      0%, 12% { opacity: 0; transform: translate(-10px, -50%); }
      35%, 70% { opacity: 1; }
      88%, 100% { opacity: 0; transform: translate(58px, -50%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active.edu-agent-difference-slide .agent-general-panel,
      .slide.active.edu-agent-difference-slide .agent-compare-bridge,
      .slide.active.edu-agent-difference-slide .agent-education-panel,
      .slide.active.edu-agent-difference-slide .agent-compare-conclusion,
      .slide.active.edu-agent-difference-slide .agent-professional-card,
      .slide.active.edu-agent-difference-slide .agent-compare-bridge-line i {
        animation: none !important;
        opacity: 1;
        transform: none;
      }
    }

    .closing-slide {
      color: white;
      background:
        radial-gradient(circle at 78% 18%, rgba(61, 140, 255, .34), transparent 25%),
        radial-gradient(circle at 18% 84%, rgba(117, 71, 237, .28), transparent 28%),
        linear-gradient(135deg, #061a42, #0b3470);
    }

    .closing-slide::after { background: var(--gold); }

    .closing-content {
      position: relative;
      z-index: 2;
      display: grid;
      align-content: center;
      height: 100%;
      padding: 80px 130px;
      text-align: center;
      transform: scale(var(--content-scale));
      transform-origin: center center;
    }

    .closing-content .closing-kicker {
      color: #86ddff;
      font-size: 20px;
      font-weight: 850;
      letter-spacing: .16em;
    }

    .closing-content h2 {
      max-width: 1250px;
      margin: 26px auto;
      color: white;
      font-size: 66px;
      line-height: 1.28;
      letter-spacing: -.04em;
    }

    .closing-content p {
      max-width: 980px;
      margin: 0 auto;
      color: #c8d9f7;
      font-size: 28px;
      line-height: 1.55;
    }

    .closing-content .speaker {
      margin-top: 50px;
      color: white;
      font-size: 22px;
    }

    .closing-question-slide {
      background:
        radial-gradient(circle at 50% 44%, rgba(71, 151, 255, .30), transparent 30%),
        radial-gradient(circle at 14% 82%, rgba(97, 216, 205, .20), transparent 28%),
        radial-gradient(circle at 88% 16%, rgba(155, 111, 255, .24), transparent 27%),
        linear-gradient(135deg, #061633 0%, #092d62 55%, #102454 100%);
    }

    .closing-question-slide::before {
      content: "？";
      display: block;
      position: absolute;
      right: 72px;
      top: 50%;
      transform: translateY(-54%);
      color: rgba(255, 255, 255, .055);
      font-size: 650px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.12em;
      pointer-events: none;
    }

    .closing-question-slide .closing-content {
      padding: 72px 112px;
    }

    .closing-question-slide .closing-kicker {
      color: #9ce8df;
      font-size: 22px;
      letter-spacing: .18em;
    }

    .closing-question-slide .closing-kicker::after {
      content: "";
      display: block;
      width: 92px;
      height: 2px;
      margin: 24px auto 0;
      background: linear-gradient(90deg, transparent, #9ce8df, transparent);
    }

    .closing-question-slide .closing-content h2 {
      max-width: 1390px;
      margin: 34px auto 0;
      font-size: 78px;
      line-height: 1.28;
      letter-spacing: -.055em;
      text-wrap: balance;
    }

    .closing-question-slide .navigator-choice {
      color: #7de8dc;
      text-shadow: 0 0 28px rgba(64, 220, 205, .23);
    }

    .closing-question-slide .keeper-choice {
      color: #ffd583;
      text-shadow: 0 0 28px rgba(255, 190, 73, .20);
    }

    .closing-question-slide .question-mark {
      display: inline-block;
      margin-left: .08em;
      color: white;
      text-shadow: 0 0 34px rgba(125, 232, 220, .38);
    }

    /* 第44页：四类角色的编辑式收束，一句话分层阅读 */
    .closing-ecosystem-slide {
      overflow: hidden;
      background:
        radial-gradient(circle at 86% 10%, rgba(58, 158, 255, .11), transparent 28%),
        radial-gradient(circle at 8% 88%, rgba(69, 194, 169, .09), transparent 26%),
        linear-gradient(145deg, #fbfaf7 0%, #f7f9fb 54%, #f1f7f7 100%);
      color: #10234f;
    }

    .closing-ecosystem-slide::before {
      content: "";
      position: absolute;
      top: -174px;
      right: -110px;
      width: 520px;
      height: 520px;
      border: 1px solid rgba(24, 109, 214, .10);
      border-radius: 50%;
      box-shadow:
        0 0 0 78px rgba(31, 130, 221, .025),
        0 0 0 158px rgba(25, 148, 140, .018);
      pointer-events: none;
    }

    .closing-ecosystem-slide::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 76px;
      width: 7px;
      height: 150px;
      border-radius: 0 8px 8px 0;
      background: linear-gradient(180deg, #1f7ae0, #2eb59f);
      box-shadow: 0 12px 30px rgba(32, 128, 184, .20);
    }

    .closing-ecosystem-slide .closing-content {
      padding: 74px 116px 68px;
      isolation: isolate;
      text-align: left;
    }

    .closing-ecosystem-manifesto {
      position: relative;
      display: grid;
      grid-template-columns: 250px minmax(0, 1fr);
      grid-template-rows: auto auto;
      column-gap: 68px;
      row-gap: 38px;
      width: min(1368px, 100%);
      margin: 0 auto;
    }

    .closing-ecosystem-lead {
      position: relative;
      display: grid;
      align-content: center;
      justify-items: start;
      min-height: 476px;
      padding: 28px 0 28px 38px;
      color: #10234f;
    }

    .closing-ecosystem-lead::before {
      content: "";
      position: absolute;
      left: 0;
      top: 14%;
      bottom: 14%;
      width: 4px;
      border-radius: 99px;
      background: linear-gradient(180deg, #1d70d6 0%, #37ae9f 100%);
      box-shadow: 0 8px 26px rgba(33, 132, 179, .18);
    }

    .closing-ecosystem-lead span {
      display: block;
      color: #51627b;
      font-size: 31px;
      font-weight: 760;
      line-height: 1.15;
      letter-spacing: .08em;
    }

    .closing-ecosystem-lead strong {
      display: block;
      margin: 5px 0 9px -4px;
      color: #176fd0;
      font-size: 106px;
      font-weight: 900;
      line-height: .94;
      letter-spacing: -.08em;
      text-shadow: 0 18px 34px rgba(27, 103, 184, .14);
    }

    .closing-ecosystem-rows {
      display: grid;
      align-content: center;
      min-width: 0;
    }

    .closing-ecosystem-row {
      position: relative;
      display: grid;
      grid-template-columns: 276px minmax(0, 1fr);
      align-items: center;
      min-height: 116px;
      border-bottom: 1px solid rgba(28, 69, 113, .16);
    }

    .closing-ecosystem-row:first-child {
      border-top: 1px solid rgba(28, 69, 113, .16);
    }

    .closing-ecosystem-row::before {
      content: "";
      position: absolute;
      left: -18px;
      top: 50%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #28a995;
      transform: translateY(-50%);
      box-shadow: 0 0 0 6px rgba(40, 169, 149, .09);
    }

    .closing-ecosystem-role {
      color: #52637b;
      font-size: 28px;
      font-weight: 760;
      letter-spacing: .025em;
    }

    .closing-ecosystem-outcome {
      color: #10234f;
      font-size: 45px;
      font-weight: 870;
      line-height: 1.25;
      letter-spacing: -.035em;
    }

    .closing-ecosystem-row.is-school .closing-ecosystem-outcome {
      font-size: 39px;
    }

    .closing-ecosystem-punctuation {
      color: #96a3b3;
      font-style: normal;
      font-weight: 600;
    }

    .closing-ecosystem-conclusion {
      grid-column: 1 / -1;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: .25em;
      min-height: 104px;
      padding-top: 30px;
      color: #52637b;
      font-size: 34px;
      font-weight: 720;
      letter-spacing: -.02em;
      text-align: center;
    }

    .closing-ecosystem-conclusion strong {
      color: #117f77;
      font-size: 51px;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    .slide.active.closing-ecosystem-slide .closing-ecosystem-lead,
    .slide.active.closing-ecosystem-slide .closing-ecosystem-row,
    .slide.active.closing-ecosystem-slide .closing-ecosystem-conclusion {
      animation: closing-ecosystem-reveal .72s cubic-bezier(.22, .75, .22, 1) both;
      animation-delay: calc(.12s + var(--closing-line-order, 0) * .15s);
    }

    @keyframes closing-ecosystem-reveal {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 第45页：开放提问 + 联系二维码，按行陆续出现 */
    .closing-question-slide .closing-content {
      grid-template-rows: auto auto auto;
      justify-items: center;
      padding: 46px 104px 62px;
    }

    .closing-question-slide .closing-content h2 {
      width: min(1390px, 100%);
      margin: 28px auto 0;
      font-size: 70px;
      line-height: 1.22;
    }

    .closing-question-line {
      display: block;
    }

    .closing-question-or {
      display: block;
      margin: .18em 0 .12em;
      color: #9ce8df;
      font-size: .84em;
      font-family: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.06em;
      text-indent: 0;
      font-kerning: normal;
      text-shadow: 0 0 24px rgba(82, 224, 210, .22);
    }

    .closing-contact-row {
      display: grid;
      grid-template-columns: 264px auto;
      align-items: center;
      gap: 22px;
      margin-top: 34px;
      padding: 14px 30px 14px 14px;
      border: 1px solid rgba(178, 225, 255, .30);
      border-radius: 36px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .055));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        0 24px 62px rgba(0, 9, 32, .27);
    }

    .closing-contact-qr {
      display: grid;
      place-items: center;
      width: 264px;
      height: 264px;
      overflow: hidden;
      border: 6px solid rgba(255, 255, 255, .94);
      border-radius: 34px;
      background: #fff url("assets/wechat-contact-qr.jpg") center / cover no-repeat;
      box-shadow: 0 14px 32px rgba(0, 12, 42, .28);
    }

    .closing-contact-qr svg {
      display: none;
    }

    .closing-contact-row p {
      max-width: none;
      margin: 0;
      color: #f5f9ff;
      font-size: 25px;
      font-weight: 800;
      line-height: 1.35;
      letter-spacing: .015em;
      white-space: nowrap;
    }

    .closing-contact-row p strong {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      margin-left: .18em;
      padding: 0 12px;
      border: 1px solid rgba(125, 232, 220, .34);
      border-radius: 11px;
      color: #7de8dc;
      background: rgba(74, 202, 190, .11);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 24px rgba(74, 202, 190, .10);
      font-weight: 950;
      line-height: 1;
      text-shadow: 0 0 18px rgba(82, 224, 210, .18);
    }

    .closing-reveal-line {
      will-change: transform, opacity;
    }

    .slide.active.closing-question-slide .closing-reveal-line {
      animation: closing-line-reveal .72s cubic-bezier(.22, .75, .22, 1) both;
      animation-delay: calc(.14s + var(--reveal-order, 0) * .34s);
    }

    @keyframes closing-line-reveal {
      from { opacity: 0; transform: translateY(28px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* 第46页：安静、明亮的感谢收束 */
    .closing-thanks-slide {
      overflow: hidden;
      color: #10234f;
      background:
        radial-gradient(circle at 82% 16%, rgba(58, 153, 238, .12), transparent 28%),
        radial-gradient(circle at 14% 86%, rgba(50, 181, 159, .10), transparent 30%),
        linear-gradient(145deg, #fbfaf7 0%, #f6f9fb 55%, #f0f8f6 100%);
    }

    .closing-thanks-slide::before {
      content: "";
      position: absolute;
      right: -190px;
      top: -280px;
      width: 720px;
      height: 720px;
      border: 1px solid rgba(29, 112, 214, .11);
      border-radius: 50%;
      box-shadow:
        0 0 0 86px rgba(29, 112, 214, .025),
        0 0 0 178px rgba(27, 156, 143, .018);
      pointer-events: none;
    }

    .closing-thanks-slide::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 74px;
      width: 72px;
      height: 4px;
      border-radius: 99px;
      background: linear-gradient(90deg, #1b72d2, #2bb29b);
      transform: translateX(-50%);
      box-shadow: 0 8px 26px rgba(30, 127, 174, .18);
    }

    .closing-thanks-content {
      display: grid;
      place-items: center;
      padding: 74px 120px 96px;
      text-align: center;
      isolation: isolate;
    }

    .closing-thanks-copy {
      display: grid;
      justify-items: center;
      width: min(1120px, 100%);
    }

    .closing-thanks-emblem {
      position: relative;
      width: 108px;
      height: 108px;
      margin-bottom: 30px;
      border: 1px solid rgba(24, 111, 197, .22);
      border-radius: 50%;
      background: rgba(255, 255, 255, .64);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 22px 54px rgba(32, 101, 143, .12);
    }

    .closing-thanks-emblem::before {
      content: "";
      position: absolute;
      inset: 20px;
      border: 1px solid rgba(31, 151, 139, .34);
      border-radius: 50%;
    }

    .closing-thanks-emblem::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: linear-gradient(145deg, #237ad8, #20a992);
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0 9px rgba(31, 136, 178, .09), 0 8px 18px rgba(23, 103, 155, .22);
    }

    .closing-thanks-emblem i {
      position: absolute;
      inset: 9px;
      border-radius: 50%;
      animation: closing-thanks-orbit 10s linear infinite;
    }

    .closing-thanks-emblem i::after {
      content: "";
      position: absolute;
      left: 50%;
      top: -4px;
      width: 10px;
      height: 10px;
      border: 3px solid #f8fbfb;
      border-radius: 50%;
      background: #1e78d3;
      transform: translateX(-50%);
      box-shadow: 0 5px 14px rgba(29, 112, 190, .24);
    }

    .closing-thanks-kicker {
      color: #23736d;
      font-size: 20px;
      font-weight: 850;
      letter-spacing: .32em;
      text-indent: .32em;
    }

    .closing-thanks-slide .closing-thanks-content h2 {
      max-width: none;
      margin: 22px auto 20px;
      color: #10234f;
      font-size: 104px;
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: -.065em;
      text-shadow: 0 18px 42px rgba(30, 83, 129, .10);
    }

    .closing-thanks-rule {
      width: 118px;
      height: 2px;
      margin: 4px auto 26px;
      background: linear-gradient(90deg, transparent, #2a9a8e 22%, #2378d0 78%, transparent);
    }

    .closing-thanks-slide .closing-thanks-content p {
      max-width: none;
      margin: 0;
      color: #54657c;
      font-size: 30px;
      font-weight: 650;
      line-height: 1.5;
      letter-spacing: .015em;
    }

    .closing-thanks-slide .closing-thanks-content p strong {
      color: #117f77;
      font-weight: 850;
    }

    .closing-thanks-qr {
      width: 264px;
      height: 264px;
      margin-top: 30px;
      padding: 8px;
      overflow: hidden;
      border: 1px solid rgba(30, 101, 168, .15);
      border-radius: 34px;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 18px 42px rgba(32, 91, 132, .15), inset 0 1px 0 #fff;
    }

    .closing-thanks-qr img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 25px;
      object-fit: cover;
    }

    .slide.active.closing-thanks-slide .closing-thanks-reveal {
      animation: closing-thanks-reveal .78s cubic-bezier(.22, .75, .22, 1) both;
      animation-delay: calc(.12s + var(--thanks-order, 0) * .16s);
    }

    @keyframes closing-thanks-reveal {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes closing-thanks-orbit {
      to { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active.closing-ecosystem-slide .closing-ecosystem-lead,
      .slide.active.closing-ecosystem-slide .closing-ecosystem-row,
      .slide.active.closing-ecosystem-slide .closing-ecosystem-conclusion,
      .slide.active.closing-question-slide .closing-reveal-line,
      .slide.active.closing-thanks-slide .closing-thanks-reveal {
        animation: none;
        opacity: 1;
        transform: none;
      }

      .closing-thanks-emblem i {
        animation: none;
      }
    }

    /* 第37页：学生 AI 素养、使用规则与学习闭环总览 */
    .student-ai-overview-slide {
      background:
        radial-gradient(circle at 50% 43%, rgba(238, 245, 255, .16), transparent 44%),
        #fff;
    }

    .student-ai-overview-slide .slide-head {
      border-bottom-color: rgba(29, 104, 105, .18);
    }

    .student-ai-overview-slide .chapter-tag {
      background: linear-gradient(135deg, var(--blue), var(--violet));
      box-shadow: 0 10px 24px rgba(43, 83, 209, .2);
    }

    .student-ai-overview-slide .slide-head h2 {
      color: #17394c;
      font-size: 49px;
    }

    .student-ai-overview-slide .slide-head p { color: #5c7180; }
    .student-ai-overview-slide .slide-content { padding-top: 22px; }

    .student-ai-dashboard {
      position: relative;
      display: grid;
      grid-template-columns: 320px 700px 372px;
      gap: 24px;
      width: 100%;
      height: 606px;
      isolation: isolate;
    }

    .student-ai-dashboard::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: 24%;
      top: 12%;
      width: 54%;
      height: 76%;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(39, 139, 135, .12), transparent 67%);
      filter: blur(18px);
      pointer-events: none;
    }

    .student-ai-panel {
      position: relative;
      min-width: 0;
      height: 606px;
      overflow: hidden;
      border: 1px solid rgba(39, 91, 105, .15);
      border-radius: 29px;
      background: rgba(255, 255, 255, .88);
      box-shadow:
        0 22px 54px rgba(29, 66, 83, .1),
        inset 0 1px 0 rgba(255, 255, 255, .98);
      -webkit-backdrop-filter: blur(16px) saturate(1.08);
      backdrop-filter: blur(16px) saturate(1.08);
    }

    .student-ai-panel::before {
      content: none;
    }

    .student-ai-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 52px;
      gap: 12px;
    }

    .student-ai-panel-head > div { min-width: 0; }

    .student-ai-panel-kicker {
      display: block;
      color: #34827f;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .student-ai-panel-head h3 {
      margin: 7px 0 0;
      color: #17394c;
      font-size: 25px;
      font-weight: 920;
      line-height: 1.05;
      letter-spacing: -.025em;
    }

    .student-ai-panel-index {
      display: grid;
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      place-items: center;
      border: 1px solid rgba(27, 126, 121, .22);
      border-radius: 14px;
      color: #167f7a;
      background: linear-gradient(145deg, rgba(226, 246, 242, .96), rgba(255, 255, 255, .96));
      box-shadow: inset 0 1px 0 #fff;
      font-size: 14px;
      font-weight: 950;
    }

    .student-ai-skills {
      display: grid;
      grid-template-rows: 52px minmax(0, 1fr) 82px;
      gap: 14px;
      padding: 22px 20px 20px;
    }

    .student-ai-skill-track {
      position: relative;
      display: grid;
      align-content: stretch;
      gap: 8px;
    }

    .student-ai-skill-track::before {
      content: "";
      position: absolute;
      left: 24px;
      top: 31px;
      bottom: 31px;
      width: 2px;
      border-radius: 99px;
      background: linear-gradient(#63aaa1, #3e8193 58%, #d4a043);
      opacity: .42;
    }

    .student-ai-skill {
      --skill-rgb: 37, 137, 129;
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      align-items: center;
      min-height: 72px;
      padding: 8px 10px 8px 6px;
      border: 1px solid rgba(var(--skill-rgb), .15);
      border-radius: 18px;
      background: linear-gradient(105deg, rgba(var(--skill-rgb), .12), rgba(255, 255, 255, .78) 62%);
      box-shadow: 0 8px 18px rgba(43, 77, 89, .055), inset 0 1px 0 rgba(255, 255, 255, .95);
    }

    .student-ai-skill:nth-child(2) { --skill-rgb: 50, 137, 155; }
    .student-ai-skill:nth-child(3) { --skill-rgb: 78, 112, 164; }
    .student-ai-skill:nth-child(4) { --skill-rgb: 147, 112, 166; }
    .student-ai-skill:nth-child(5) { --skill-rgb: 207, 145, 48; }

    .student-ai-skill::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 2px solid rgba(var(--skill-rgb), .54);
      border-radius: inherit;
      opacity: 0;
      pointer-events: none;
    }

    .student-ai-skill-icon {
      position: relative;
      display: grid;
      width: 43px;
      height: 43px;
      place-items: center;
      border-radius: 14px;
      color: #fff;
      background: linear-gradient(145deg, rgba(var(--skill-rgb), 1), rgba(var(--skill-rgb), .72));
      box-shadow: 0 8px 17px rgba(var(--skill-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .35);
    }

    .student-ai-skill-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .student-ai-skill-copy strong {
      display: block;
      color: #203e50;
      font-size: 21px;
      font-weight: 920;
      line-height: 1.05;
    }

    .student-ai-skill-copy span {
      display: block;
      margin-top: 5px;
      color: #647785;
      font-size: 14.5px;
      font-weight: 650;
      line-height: 1.25;
      white-space: nowrap;
    }

    .student-ai-skill-outcome {
      position: relative;
      display: grid;
      align-content: center;
      min-width: 0;
      padding: 11px 14px 11px 59px;
      overflow: hidden;
      border-radius: 20px;
      color: #fff;
      background: linear-gradient(135deg, #166f75, #258d83 60%, #cb9131 145%);
      box-shadow: 0 13px 28px rgba(30, 116, 111, .2), inset 0 1px 0 rgba(255, 255, 255, .22);
    }

    .student-ai-skill-outcome svg {
      position: absolute;
      left: 16px;
      top: 19px;
      width: 32px;
      height: 32px;
      fill: none;
      stroke: #fff;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .student-ai-skill-outcome small {
      color: rgba(232, 255, 251, .78);
      font-size: 12px;
      font-weight: 850;
      line-height: 1;
      letter-spacing: .08em;
    }

    .student-ai-skill-outcome strong {
      margin-top: 6px;
      font-size: 17px;
      font-weight: 920;
      line-height: 1.28;
    }

    .student-ai-engine {
      display: grid;
      grid-template-rows: 52px 68px minmax(0, 1fr);
      gap: 12px;
      padding: 22px 22px 18px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 54%, rgba(32, 142, 133, .14), transparent 37%),
        rgba(255, 255, 255, .9);
    }

    .student-ai-compare {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
      align-items: center;
      min-width: 0;
      padding: 7px;
      border: 1px solid rgba(46, 101, 112, .12);
      border-radius: 20px;
      background: rgba(244, 249, 247, .86);
    }

    .student-ai-compare-item {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 10px;
      padding: 0 12px;
    }

    .student-ai-compare-item svg {
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      fill: none;
      stroke: #6f8190;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .student-ai-compare-item.is-tutor svg { stroke: #16827b; }

    .student-ai-compare-item span { min-width: 0; }

    .student-ai-compare-item small {
      display: block;
      color: #81909b;
      font-size: 11px;
      font-weight: 850;
      line-height: 1;
      letter-spacing: .08em;
    }

    .student-ai-compare-item strong {
      display: block;
      margin-top: 5px;
      color: #304a5b;
      font-size: 17px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .student-ai-compare-arrow {
      display: grid;
      place-items: center;
      color: #b98a35;
    }

    .student-ai-compare-arrow svg {
      width: 42px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .student-ai-loop {
      position: relative;
      min-height: 0;
      overflow: visible;
      border: 1px solid rgba(45, 105, 112, .12);
      border-radius: 24px;
      background:
        radial-gradient(circle at 50% 50%, rgba(34, 132, 126, .14), transparent 29%),
        linear-gradient(145deg, rgba(247, 251, 249, .82), rgba(252, 249, 241, .72));
      isolation: isolate;
    }

    .student-ai-loop::before,
    .student-ai-loop::after {
      content: "";
      position: absolute;
      z-index: 0;
      left: 50%;
      top: 50%;
      border: 1px solid rgba(34, 133, 127, .14);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%) rotate(-8deg);
    }

    .student-ai-loop::before { width: 380px; height: 238px; }
    .student-ai-loop::after { width: 310px; height: 192px; border-color: rgba(201, 146, 49, .16); transform: translate(-50%, -50%) rotate(9deg); }

    .student-ai-loop-lines {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    .student-ai-loop-lines path {
      fill: none;
      stroke: url(#studentAiLoopGradient);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-dasharray: 8 10;
      opacity: .72;
    }

    .student-ai-loop-node {
      --loop-rgb: 32, 135, 127;
      position: absolute;
      z-index: 3;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: center;
      width: 216px;
      height: 80px;
      padding: 9px 12px;
      border: 1px solid rgba(var(--loop-rgb), .22);
      border-radius: 19px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(var(--loop-rgb), .1));
      box-shadow: 0 12px 25px rgba(36, 75, 88, .1), inset 0 1px 0 #fff;
    }

    .student-ai-loop-node.n1 { left: 12px; top: 16px; }
    .student-ai-loop-node.n2 { right: 12px; top: 16px; --loop-rgb: 57, 117, 159; }
    .student-ai-loop-node.n3 { right: 12px; bottom: 16px; --loop-rgb: 153, 111, 166; }
    .student-ai-loop-node.n4 { left: 12px; bottom: 16px; --loop-rgb: 205, 145, 49; }

    .student-ai-loop-number {
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(145deg, rgba(var(--loop-rgb), 1), rgba(var(--loop-rgb), .72));
      box-shadow: 0 7px 14px rgba(var(--loop-rgb), .2), inset 0 1px 0 rgba(255, 255, 255, .3);
      font-size: 12px;
      font-weight: 950;
    }

    .student-ai-loop-node strong {
      display: block;
      color: #244455;
      font-size: 18px;
      font-weight: 920;
      line-height: 1.05;
      white-space: nowrap;
    }

    .student-ai-loop-node small {
      display: block;
      margin-top: 5px;
      color: #687c89;
      font-size: 12px;
      font-weight: 680;
      line-height: 1.2;
      white-space: nowrap;
    }

    .student-ai-loop-core {
      position: absolute;
      z-index: 4;
      left: 50%;
      top: 50%;
      display: grid;
      width: 186px;
      height: 186px;
      place-items: center;
      align-content: center;
      padding-top: 5px;
      border: 7px solid rgba(255, 255, 255, .88);
      border-radius: 50%;
      color: #fff;
      background:
        radial-gradient(circle at 36% 24%, rgba(255, 255, 255, .22), transparent 25%),
        linear-gradient(145deg, #175f73, #188a80 62%, #c79036 150%);
      box-shadow:
        0 22px 48px rgba(22, 111, 108, .25),
        0 0 0 9px rgba(30, 132, 126, .09),
        inset 0 1px 0 rgba(255, 255, 255, .26);
      text-align: center;
      transform: translate(-50%, -50%);
    }

    .student-ai-loop-core::before {
      content: "";
      position: absolute;
      inset: -20px;
      z-index: -1;
      border: 1px dashed rgba(31, 132, 126, .35);
      border-radius: 50%;
    }

    .student-ai-loop-core svg {
      width: 48px;
      height: 48px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.65;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .student-ai-loop-core strong {
      margin-top: 7px;
      font-size: 25px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: .02em;
    }

    .student-ai-loop-core span {
      margin-top: 8px;
      color: rgba(234, 255, 251, .82);
      font-size: 11px;
      font-weight: 780;
      line-height: 1.2;
      letter-spacing: .04em;
    }

    .student-ai-method-map {
      position: relative;
      display: grid;
      grid-template-rows: 72px minmax(0, 1fr) 64px;
      gap: 12px;
      min-height: 0;
      padding: 12px;
      overflow: hidden;
      border: 1px solid rgba(45, 105, 112, .14);
      border-radius: 24px;
      background:
        radial-gradient(circle at 36% 42%, rgba(36, 149, 139, .11), transparent 34%),
        radial-gradient(circle at 76% 56%, rgba(210, 154, 57, .1), transparent 31%),
        linear-gradient(145deg, rgba(247, 251, 249, .94), rgba(253, 250, 243, .9));
      isolation: isolate;
    }

    .student-ai-method-map::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(31, 118, 118, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 118, 118, .025) 1px, transparent 1px);
      background-size: 24px 24px;
      -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
      mask-image: linear-gradient(to bottom, #000, transparent 88%);
    }

    .student-ai-method-hero {
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr) auto;
      align-items: center;
      gap: 11px;
      min-width: 0;
      padding: 8px 12px;
      border: 1px solid rgba(33, 127, 123, .18);
      border-radius: 18px;
      background: rgba(255, 255, 255, .85);
      box-shadow: 0 9px 20px rgba(40, 76, 87, .07), inset 0 1px 0 #fff;
    }

    .student-ai-method-bot {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border-radius: 15px;
      color: #fff;
      background: linear-gradient(145deg, #176b78, #218f83);
      box-shadow: 0 9px 18px rgba(30, 123, 118, .2), inset 0 1px 0 rgba(255, 255, 255, .28);
    }

    .student-ai-method-bot svg {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .student-ai-method-hero-copy { min-width: 0; }

    .student-ai-method-hero-copy small {
      display: block;
      color: #27817b;
      font-size: 10px;
      font-weight: 920;
      line-height: 1;
      letter-spacing: .12em;
    }

    .student-ai-method-hero-copy strong {
      display: block;
      margin-top: 5px;
      color: #1d4052;
      font-size: 17px;
      font-weight: 930;
      line-height: 1.12;
      white-space: nowrap;
    }

    .student-ai-evidence-chips {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
    }

    .student-ai-evidence-chips span {
      display: grid;
      height: 29px;
      place-items: center;
      padding: 0 8px;
      border: 1px solid rgba(64, 117, 139, .14);
      border-radius: 10px;
      color: #617785;
      background: rgba(241, 247, 247, .86);
      font-size: 10px;
      font-weight: 850;
      white-space: nowrap;
    }

    .student-ai-method-track {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
      align-items: center;
      min-width: 0;
      min-height: 0;
    }

    .student-ai-method-card {
      --method-rgb: 38, 143, 134;
      position: relative;
      display: grid;
      justify-items: center;
      align-content: center;
      min-width: 0;
      height: 194px;
      padding: 16px 8px 13px;
      overflow: hidden;
      border: 1px solid rgba(var(--method-rgb), .22);
      border-radius: 20px;
      text-align: center;
      background:
        radial-gradient(circle at 50% 8%, rgba(var(--method-rgb), .16), transparent 42%),
        linear-gradient(165deg, rgba(255, 255, 255, .98), rgba(var(--method-rgb), .08));
      box-shadow: 0 12px 25px rgba(37, 77, 89, .09), inset 0 1px 0 #fff;
    }

    .student-ai-method-card.is-socratic { --method-rgb: 71, 109, 163; }
    .student-ai-method-card.is-support { --method-rgb: 145, 105, 163; }
    .student-ai-method-card.is-proof { --method-rgb: 204, 144, 48; }

    .student-ai-method-card.is-key {
      border-width: 2px;
      box-shadow: 0 15px 29px rgba(var(--method-rgb), .14), inset 0 1px 0 #fff;
    }

    .student-ai-method-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 2px solid rgba(var(--method-rgb), .65);
      border-radius: inherit;
      opacity: 0;
      pointer-events: none;
    }

    .student-ai-method-index {
      position: absolute;
      top: 10px;
      right: 11px;
      color: rgba(var(--method-rgb), .78);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .05em;
    }

    .student-ai-method-icon {
      display: grid;
      width: 45px;
      height: 45px;
      place-items: center;
      border-radius: 15px;
      color: #fff;
      background: linear-gradient(145deg, rgba(var(--method-rgb), 1), rgba(var(--method-rgb), .7));
      box-shadow: 0 9px 17px rgba(var(--method-rgb), .2), inset 0 1px 0 rgba(255, 255, 255, .32);
    }

    .student-ai-method-icon svg {
      width: 26px;
      height: 26px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .student-ai-method-card h4 {
      margin: 13px 0 0;
      color: #234455;
      font-size: 19px;
      font-weight: 940;
      line-height: 1.12;
      letter-spacing: -.02em;
      white-space: nowrap;
    }

    .student-ai-method-card.is-socratic h4 {
      font-size: 17.5px;
      letter-spacing: -.035em;
      white-space: normal;
    }

    .student-ai-method-card p {
      margin: 8px 0 0;
      color: #667b88;
      font-size: 13px;
      font-weight: 680;
      line-height: 1.42;
    }

    .student-ai-method-arrow {
      position: relative;
      z-index: 2;
      display: grid;
      width: 24px;
      height: 30px;
      place-items: center;
      color: #7898a0;
    }

    .student-ai-method-arrow svg {
      width: 22px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .student-ai-method-arrow i {
      position: absolute;
      left: 1px;
      top: 11px;
      width: 8px;
      height: 8px;
      border: 2px solid rgba(255, 255, 255, .95);
      border-radius: 50%;
      background: #35a59a;
      box-shadow: 0 0 12px rgba(53, 165, 154, .75);
      opacity: 0;
      pointer-events: none;
    }

    .student-ai-method-proof {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 13px;
      min-width: 0;
      padding: 9px 13px;
      border: 1px solid rgba(46, 112, 121, .15);
      border-radius: 17px;
      color: #4f6877;
      background: linear-gradient(100deg, rgba(235, 248, 245, .92), rgba(255, 248, 233, .92));
    }

    .student-ai-method-proof > span {
      display: grid;
      place-items: center;
      height: 34px;
      padding: 0 12px;
      border-radius: 11px;
      color: #fff;
      background: linear-gradient(135deg, #1c7d7a, #30958a);
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    .student-ai-method-proof strong {
      color: #315465;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: .01em;
      white-space: nowrap;
    }

    .student-ai-rules {
      display: grid;
      grid-template-rows: 52px 43px minmax(0, 1fr) 70px;
      gap: 13px;
      padding: 22px 20px 20px;
    }

    .student-ai-rule-dimensions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
    }

    .student-ai-rule-dimensions span {
      display: grid;
      place-items: center;
      border: 1px solid rgba(38, 117, 115, .17);
      border-radius: 13px;
      color: #30736f;
      background: rgba(235, 247, 243, .86);
      font-size: 14px;
      font-weight: 900;
    }

    .student-ai-risk-list {
      display: grid;
      gap: 10px;
    }

    .student-ai-risk {
      --risk-rgb: 42, 148, 108;
      position: relative;
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      align-items: center;
      min-height: 105px;
      padding: 12px 13px;
      overflow: hidden;
      border: 1px solid rgba(var(--risk-rgb), .22);
      border-radius: 20px;
      background: linear-gradient(110deg, rgba(var(--risk-rgb), .13), rgba(255, 255, 255, .87) 64%);
      box-shadow: 0 9px 20px rgba(45, 78, 89, .065), inset 0 1px 0 #fff;
    }

    .student-ai-risk.is-medium { --risk-rgb: 211, 147, 47; }
    .student-ai-risk.is-high { --risk-rgb: 198, 83, 76; }

    .student-ai-risk-icon {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      border-radius: 14px;
      color: #fff;
      background: linear-gradient(145deg, rgba(var(--risk-rgb), 1), rgba(var(--risk-rgb), .72));
      box-shadow: 0 8px 17px rgba(var(--risk-rgb), .21), inset 0 1px 0 rgba(255, 255, 255, .3);
    }

    .student-ai-risk-icon svg {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .student-ai-risk-copy strong {
      display: block;
      color: rgb(var(--risk-rgb));
      font-size: 18px;
      font-weight: 930;
      line-height: 1.1;
    }

    .student-ai-risk-copy p {
      margin: 7px 0 0;
      color: #5e7180;
      font-size: 14px;
      font-weight: 650;
      line-height: 1.42;
    }

    .student-ai-rule-note {
      position: relative;
      display: grid;
      align-content: center;
      padding: 10px 14px 10px 55px;
      border: 1px solid rgba(38, 99, 115, .16);
      border-radius: 18px;
      color: #425d6d;
      background: linear-gradient(100deg, rgba(238, 247, 247, .92), rgba(255, 248, 233, .9));
      font-size: 13px;
      font-weight: 760;
      line-height: 1.35;
    }

    .student-ai-rule-note svg {
      position: absolute;
      left: 15px;
      top: 17px;
      width: 27px;
      height: 27px;
      fill: none;
      stroke: #267b78;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .student-ai-rule-note strong {
      color: #1c6867;
      font-size: 15px;
      font-weight: 930;
    }

    .slide.active .student-ai-panel { animation: student-ai-panel-in .64s cubic-bezier(.18, .78, .2, 1) both; }
    .slide.active .student-ai-engine { animation-delay: .08s; }
    .slide.active .student-ai-rules { animation-delay: .16s; }
    .slide.active .student-ai-skill { animation: student-ai-skill-in .5s cubic-bezier(.2, .8, .2, 1) both; }
    .slide.active .student-ai-skill:nth-child(1) { animation-delay: .12s; }
    .slide.active .student-ai-skill:nth-child(2) { animation-delay: .19s; }
    .slide.active .student-ai-skill:nth-child(3) { animation-delay: .26s; }
    .slide.active .student-ai-skill:nth-child(4) { animation-delay: .33s; }
    .slide.active .student-ai-skill:nth-child(5) { animation-delay: .4s; }
    .slide.active .student-ai-skill::after { animation: student-ai-skill-focus 8s ease-in-out infinite; animation-delay: var(--skill-delay, 0s); }
    .student-ai-skill:nth-child(1) { --skill-delay: .8s; }
    .student-ai-skill:nth-child(2) { --skill-delay: 2.1s; }
    .student-ai-skill:nth-child(3) { --skill-delay: 3.4s; }
    .student-ai-skill:nth-child(4) { --skill-delay: 4.7s; }
    .student-ai-skill:nth-child(5) { --skill-delay: 6s; }
    .slide.active .student-ai-method-hero { animation: student-ai-method-in .5s .18s cubic-bezier(.2, .8, .2, 1) both; }
    .slide.active .student-ai-method-card { animation: student-ai-method-in .52s var(--method-enter, .3s) cubic-bezier(.2, .8, .2, 1) both; }
    .slide.active .student-ai-method-card::after { animation: student-ai-method-focus 7.2s var(--method-focus, 1s) ease-in-out infinite; }
    .slide.active .student-ai-method-arrow i { animation: student-ai-method-signal 6s var(--flow-delay, 0s) linear infinite; }
    .slide.active .student-ai-method-proof { animation: student-ai-method-in .52s .76s cubic-bezier(.2, .8, .2, 1) both; }
    .slide.active .student-ai-risk { animation: student-ai-risk-in .52s cubic-bezier(.2, .8, .2, 1) both; }
    .slide.active .student-ai-risk:nth-child(1) { animation-delay: .32s; }
    .slide.active .student-ai-risk:nth-child(2) { animation-delay: .43s; }
    .slide.active .student-ai-risk:nth-child(3) { animation-delay: .54s; }

    .slide:not(.active) .student-ai-panel,
    .slide:not(.active) .student-ai-skill,
    .slide:not(.active) .student-ai-skill::after,
    .slide:not(.active) .student-ai-method-hero,
    .slide:not(.active) .student-ai-method-card,
    .slide:not(.active) .student-ai-method-card::after,
    .slide:not(.active) .student-ai-method-arrow i,
    .slide:not(.active) .student-ai-method-proof,
    .slide:not(.active) .student-ai-risk { animation-play-state: paused !important; }

    @keyframes student-ai-panel-in {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes student-ai-skill-in {
      from { opacity: 0; transform: translateX(-13px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes student-ai-skill-focus {
      0%, 13%, 100% { opacity: 0; box-shadow: none; }
      5%, 9% { opacity: 1; box-shadow: 0 0 0 4px rgba(var(--skill-rgb), .1), 0 0 22px rgba(var(--skill-rgb), .2); }
    }

    @keyframes student-ai-method-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes student-ai-method-focus {
      0%, 18%, 100% { opacity: 0; box-shadow: none; }
      6%, 12% { opacity: 1; box-shadow: 0 0 0 4px rgba(var(--method-rgb), .1), 0 0 22px rgba(var(--method-rgb), .24); }
    }

    @keyframes student-ai-method-signal {
      0% { opacity: 0; transform: translateX(-7px) scale(.72); }
      4% { opacity: 1; }
      15% { opacity: 1; }
      20%, 100% { opacity: 0; transform: translateX(14px) scale(1.04); }
    }

    @keyframes student-ai-risk-in {
      from { opacity: 0; transform: translateX(13px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .student-ai-panel,
      .student-ai-skill,
      .student-ai-skill::after,
      .student-ai-method-hero,
      .student-ai-method-card,
      .student-ai-method-card::after,
      .student-ai-method-arrow i,
      .student-ai-method-proof,
      .student-ai-risk { animation: none !important; }
    }

    /* 第38页：苏格拉底式提问互动演示 */
    .socratic-demo-slide {
      color: #173c4a;
      background:
        radial-gradient(circle at 13% 78%, rgba(255, 195, 104, .12), transparent 28%),
        radial-gradient(circle at 88% 22%, rgba(53, 172, 158, .11), transparent 29%),
        #fff;
    }

    .socratic-demo-slide .slide-head h2 {
      font-size: 48px;
      letter-spacing: -.04em;
    }

    .socratic-demo-slide .slide-content { padding-top: 20px; }

    .socratic-demo-stage {
      position: relative;
      display: grid;
      grid-template-columns: 410px minmax(0, 1fr);
      gap: 30px;
      width: 100%;
      height: 622px;
      min-height: 0;
    }

    .socratic-phone-zone {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 0;
      isolation: isolate;
    }

    .socratic-phone-zone::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 2px;
      width: 310px;
      height: 48px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(34, 89, 93, .22), rgba(34, 89, 93, 0) 70%);
      filter: blur(7px);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .socratic-phone {
      position: relative;
      z-index: 2;
      width: 330px;
      height: 616px;
      padding: 6px;
      border: 1px solid rgba(28, 39, 60, .82);
      border-radius: 43px;
      background:
        linear-gradient(115deg, #151a24 0%, #677080 10%, #111722 23%, #aeb8c3 45%, #171e2b 63%, #5e6877 82%, #0b1018 100%);
      box-shadow:
        0 24px 45px rgba(24, 48, 77, .22),
        0 8px 16px rgba(28, 45, 67, .16),
        inset 0 0 0 1px rgba(255, 255, 255, .44),
        inset 0 0 0 3px rgba(3, 8, 15, .5);
    }

    .socratic-phone::before,
    .socratic-phone::after {
      content: "";
      position: absolute;
      width: 4px;
      border: 1px solid rgba(17, 23, 33, .84);
      background: linear-gradient(180deg, #8a94a1, #242c38 22% 80%, #7b8693);
      box-shadow: 0 2px 4px rgba(17, 26, 39, .28);
    }

    .socratic-phone::before {
      left: -4px;
      top: 142px;
      height: 53px;
      border-radius: 3px 0 0 3px;
      box-shadow:
        0 2px 4px rgba(17, 26, 39, .28),
        0 65px 0 -1px #242c38,
        0 67px 4px rgba(17, 26, 39, .28);
    }

    .socratic-phone::after {
      top: 158px;
      right: -4px;
      height: 82px;
      border-radius: 0 3px 3px 0;
    }

    .socratic-phone-screen {
      position: relative;
      display: grid;
      grid-template-rows: 35px 57px minmax(0, 1fr) 92px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: 1px solid rgba(4, 10, 19, .92);
      border-radius: 36px;
      color: #233f49;
      background:
        radial-gradient(circle at 12% 4%, rgba(255, 202, 112, .14), transparent 29%),
        linear-gradient(180deg, #fbfdfc, #f1f7f5 72%, #f8fbfa);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .58);
    }

    .socratic-phone-status {
      position: relative;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 35px;
      padding: 0 13px;
      color: #101827;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
    }

    .socratic-dynamic-island {
      position: absolute;
      top: 9px;
      left: 50%;
      z-index: 6;
      width: 78px;
      height: 22px;
      border-radius: 99px;
      background: #050609;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .045);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .socratic-dynamic-island::after {
      content: "";
      position: absolute;
      top: 7px;
      right: 8px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #354ea3, #07101d 58%, #000);
      box-shadow: 0 0 5px rgba(74, 100, 222, .36);
    }

    .socratic-phone-signals {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .socratic-phone-signals svg {
      display: block;
      width: 15px;
      height: 12px;
      fill: currentColor;
      stroke: currentColor;
      stroke-width: 1.35;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .socratic-phone-signals svg:last-child { width: 20px; }

    .socratic-chat-head {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: 26px minmax(0, 1fr) 34px;
      align-items: center;
      gap: 4px;
      width: 100%;
      height: 57px;
      padding: 0 9px;
      border-bottom: 1px solid rgba(62, 79, 135, .1);
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .socratic-chat-back,
    .socratic-chat-reset {
      display: grid;
      width: 26px;
      height: 26px;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(79, 70, 229, .14);
      border-radius: 9px;
      color: #4f46e5;
      background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(99, 102, 241, .1));
      box-shadow: 0 5px 12px rgba(79, 70, 229, .1);
    }

    .socratic-chat-reset { justify-self: end; }

    .socratic-chat-back { pointer-events: none; }
    .socratic-chat-reset { cursor: pointer; }

    .socratic-chat-back svg,
    .socratic-chat-reset svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .socratic-chat-title { min-width: 0; text-align: center; }

    .socratic-chat-title strong {
      display: block;
      overflow: hidden;
      color: #1c2c52;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .socratic-chat-title span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 4px;
      color: #74809b;
      font-size: 9px;
      font-weight: 800;
      line-height: 1;
    }

    .socratic-chat-title span::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #32a286;
      box-shadow: 0 0 0 3px rgba(50, 162, 134, .11);
    }

    .socratic-chat-stream {
      position: relative;
      min-height: 0;
      padding: 14px 13px 18px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
    }

    .socratic-chat-stream::-webkit-scrollbar { display: none; }

    .socratic-chat-intro {
      display: grid;
      justify-items: center;
      align-content: center;
      height: 100%;
      padding: 0 22px 28px;
      text-align: center;
    }

    .socratic-intro-icon {
      display: grid;
      width: 62px;
      height: 62px;
      place-items: center;
      border: 1px solid rgba(41, 130, 121, .18);
      border-radius: 22px;
      color: #fff;
      background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .3), transparent 28%),
        linear-gradient(145deg, #2d9487, #1e6d70);
      box-shadow: 0 16px 28px rgba(37, 123, 117, .18), inset 0 1px 0 rgba(255, 255, 255, .3);
    }

    .socratic-intro-icon svg {
      width: 35px;
      height: 35px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .socratic-chat-intro strong {
      margin-top: 16px;
      color: #244a55;
      font-size: 18px;
      font-weight: 930;
      line-height: 1.2;
    }

    .socratic-chat-intro p {
      margin: 8px 0 0;
      color: #71878c;
      font-size: 11px;
      font-weight: 650;
      line-height: 1.55;
    }

    .socratic-message {
      display: flex;
      margin: 0 0 12px;
      opacity: 1;
      transform: translateY(0);
      animation: socratic-message-in .36s cubic-bezier(.2, .8, .2, 1) both;
    }

    .socratic-message.is-user { justify-content: flex-end; }
    .socratic-message.is-ai { justify-content: flex-start; }

    .socratic-bubble {
      max-width: 88%;
      padding: 10px 12px;
      border-radius: 17px;
      font-size: 12px;
      font-weight: 680;
      line-height: 1.52;
      letter-spacing: .005em;
      box-shadow: 0 7px 15px rgba(37, 73, 79, .07);
    }

    .socratic-message.is-user .socratic-bubble {
      border-bottom-right-radius: 5px;
      color: #fff;
      background: linear-gradient(145deg, #23887d, #2e9b88);
      box-shadow: 0 8px 18px rgba(35, 136, 125, .19);
    }

    .socratic-message.is-ai .socratic-bubble {
      border: 1px solid rgba(42, 90, 91, .11);
      border-bottom-left-radius: 5px;
      color: #365660;
      background: rgba(255, 255, 255, .96);
    }

    .socratic-bubble strong { color: #1b685f; font-weight: 920; }

    .socratic-typing {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      width: 46px;
      height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(42, 90, 91, .1);
      border-radius: 16px 16px 16px 5px;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 7px 15px rgba(37, 73, 79, .07);
    }

    .socratic-typing i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #4a8e87;
      animation: socratic-typing 1s ease-in-out infinite;
    }

    .socratic-typing i:nth-child(2) { animation-delay: .14s; }
    .socratic-typing i:nth-child(3) { animation-delay: .28s; }

    .socratic-choice-set {
      display: grid;
      gap: 7px;
      margin: -3px 0 14px;
      animation: socratic-message-in .36s cubic-bezier(.2, .8, .2, 1) both;
    }

    .socratic-choice-button {
      position: relative;
      width: 100%;
      min-height: 38px;
      padding: 8px 34px 8px 12px;
      border: 1px solid rgba(37, 131, 119, .2);
      border-radius: 12px;
      color: #31635f;
      text-align: left;
      background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(227, 244, 238, .88));
      box-shadow: 0 5px 12px rgba(39, 91, 89, .05), inset 0 1px 0 #fff;
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 830;
      line-height: 1.35;
      cursor: pointer;
      transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .socratic-choice-button::after {
      content: "›";
      position: absolute;
      top: 50%;
      right: 12px;
      color: #46988e;
      font-size: 20px;
      font-weight: 400;
      transform: translateY(-54%);
    }

    .socratic-choice-button:hover,
    .socratic-choice-button:focus-visible {
      border-color: rgba(32, 137, 123, .55);
      background: linear-gradient(135deg, #fff, #e0f4ed);
      box-shadow: 0 8px 17px rgba(39, 118, 108, .12), inset 0 1px 0 #fff;
      outline: none;
      transform: translateY(-1px);
    }

    .socratic-plan-card {
      margin: 3px 0 13px;
      padding: 12px;
      border: 1px solid rgba(210, 151, 55, .28);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(255, 252, 243, .99), rgba(255, 244, 217, .88));
      box-shadow: 0 10px 20px rgba(169, 113, 35, .09), inset 0 1px 0 #fff;
      animation: socratic-plan-in .48s cubic-bezier(.17, .84, .24, 1) both;
    }

    .socratic-plan-card > strong {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #855b1b;
      font-size: 13px;
      font-weight: 930;
    }

    .socratic-plan-card > strong::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #e3a23b;
      box-shadow: 0 0 0 5px rgba(227, 162, 59, .12);
    }

    .socratic-plan-list {
      display: grid;
      gap: 6px;
      margin-top: 11px;
    }

    .socratic-plan-list > span {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      align-items: start;
      color: #5c625f;
      font-size: 11px;
      font-weight: 720;
      line-height: 1.35;
    }

    .socratic-plan-list > span > span {
      display: block;
      min-width: 0;
    }

    .socratic-plan-list b {
      display: grid;
      width: 18px;
      height: 18px;
      place-items: center;
      border-radius: 6px;
      color: #fff;
      background: #d49a3d;
      font-size: 9px;
      font-weight: 900;
    }

    .socratic-video-message {
      margin-top: -3px;
    }

    .socratic-video-attachment {
      position: relative;
      display: grid;
      grid-template-columns: 84px minmax(0, 1fr) 28px;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 76px;
      padding: 7px 8px;
      overflow: hidden;
      border: 1px solid rgba(33, 132, 120, .2);
      border-radius: 15px;
      color: #244f57;
      text-align: left;
      background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(229, 247, 241, .94));
      box-shadow: 0 10px 22px rgba(39, 105, 102, .1), inset 0 1px 0 #fff;
      font-family: inherit;
      cursor: pointer;
      animation: socratic-plan-in .52s cubic-bezier(.17, .84, .24, 1) both;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .socratic-video-attachment::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, .7) 48%, transparent 76%);
      transform: translateX(-120%);
      transition: transform .62s ease;
      pointer-events: none;
    }

    .socratic-video-attachment:hover,
    .socratic-video-attachment:focus-visible {
      border-color: rgba(33, 132, 120, .5);
      box-shadow: 0 13px 25px rgba(39, 105, 102, .16), inset 0 1px 0 #fff;
      outline: none;
      transform: translateY(-2px);
    }

    .socratic-video-attachment:hover::after,
    .socratic-video-attachment:focus-visible::after { transform: translateX(120%); }

    .socratic-video-thumb {
      position: relative;
      display: block;
      width: 84px;
      height: 60px;
      overflow: hidden;
      border-radius: 11px;
      background: #e7f4f0;
      box-shadow: inset 0 0 0 1px rgba(26, 99, 94, .12);
    }

    .socratic-video-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .socratic-video-play {
      position: absolute;
      inset: 50% auto auto 50%;
      display: grid;
      width: 25px;
      height: 25px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 50%;
      color: #fff;
      background: rgba(30, 124, 113, .88);
      box-shadow: 0 5px 12px rgba(18, 77, 72, .24);
      transform: translate(-50%, -50%);
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
    }

    .socratic-video-play svg {
      width: 12px;
      height: 12px;
      margin-left: 1px;
      fill: currentColor;
    }

    .socratic-video-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .socratic-video-copy small {
      color: #378c82;
      font-size: 8.5px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .socratic-video-copy strong {
      overflow: hidden;
      color: #214c55;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .socratic-video-copy span {
      color: #758b8e;
      font-size: 8.5px;
      font-weight: 720;
    }

    .socratic-video-open-mark {
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      border-radius: 9px;
      color: #fff;
      background: linear-gradient(145deg, #2c988a, #21776f);
      box-shadow: 0 7px 14px rgba(33, 119, 111, .2);
    }

    .socratic-video-open-mark svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .socratic-video-modal {
      position: fixed;
      inset: 0;
      z-index: 3600;
      display: grid;
      place-items: center;
      padding: 58px 92px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .3s ease, visibility 0s linear .3s;
    }

    .socratic-video-modal.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .socratic-video-backdrop {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: rgba(223, 235, 232, .63);
      -webkit-backdrop-filter: blur(17px) saturate(1.12);
      backdrop-filter: blur(17px) saturate(1.12);
      cursor: default;
    }

    .socratic-video-window {
      position: relative;
      display: grid;
      grid-template-rows: 72px minmax(0, 1fr) 48px;
      width: min(1240px, calc(100vw - 184px));
      height: min(748px, calc(100vh - 116px));
      overflow: hidden;
      border: 1px solid rgba(50, 125, 118, .22);
      border-radius: 28px;
      background: rgba(249, 253, 251, .94);
      box-shadow: 0 32px 90px rgba(37, 77, 81, .24), inset 0 1px 0 rgba(255, 255, 255, .9);
      transform: translateY(22px) scale(.965);
      transition: transform .36s cubic-bezier(.18, .84, .2, 1);
    }

    .socratic-video-modal.is-open .socratic-video-window { transform: translateY(0) scale(1); }

    .socratic-video-titlebar {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 42px;
      align-items: center;
      gap: 13px;
      padding: 0 18px;
      border-bottom: 1px solid rgba(50, 125, 118, .13);
      background: linear-gradient(115deg, rgba(255, 255, 255, .92), rgba(228, 246, 240, .82));
      -webkit-backdrop-filter: blur(20px) saturate(1.18);
      backdrop-filter: blur(20px) saturate(1.18);
    }

    .socratic-video-title-icon {
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      border-radius: 14px;
      color: #fff;
      background: linear-gradient(145deg, #2a9788, #236f78);
      box-shadow: 0 8px 18px rgba(35, 111, 120, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
    }

    .socratic-video-title-icon svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .socratic-video-title-copy { min-width: 0; }
    .socratic-video-title-copy strong { display: block; color: #1d4852; font-size: 20px; font-weight: 930; }
    .socratic-video-title-copy span { display: block; margin-top: 3px; color: #6e8589; font-size: 11px; font-weight: 720; }

    .socratic-video-close {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(45, 105, 106, .13);
      border-radius: 13px;
      color: #557277;
      background: rgba(255, 255, 255, .78);
      cursor: pointer;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }

    .socratic-video-close:hover,
    .socratic-video-close:focus-visible { color: #1e716b; background: #fff; outline: none; transform: rotate(4deg) scale(1.04); }
    .socratic-video-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

    .socratic-video-stage {
      display: grid;
      min-height: 0;
      place-items: center;
      padding: 16px 24px;
      background: #f4faf8;
    }

    .socratic-video-stage video {
      display: block;
      width: 100%;
      height: 100%;
      max-width: 1080px;
      max-height: 608px;
      border-radius: 20px;
      background: #f5faf8;
      box-shadow: 0 18px 44px rgba(33, 83, 86, .18), 0 0 0 1px rgba(40, 111, 107, .12);
      object-fit: contain;
    }

    .socratic-video-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 0 24px;
      border-top: 1px solid rgba(50, 125, 118, .11);
      color: #72888c;
      background: rgba(255, 255, 255, .82);
      font-size: 11px;
      font-weight: 760;
    }

    .socratic-video-footer strong { color: #287e76; font-size: 12px; }

    .socratic-composer {
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 38px;
      grid-template-rows: 47px 17px;
      align-items: center;
      gap: 0 8px;
      padding: 10px 13px 8px;
      border-top: 1px solid rgba(42, 91, 92, .1);
      background: rgba(251, 253, 252, .92);
      -webkit-backdrop-filter: blur(16px) saturate(1.2);
      backdrop-filter: blur(16px) saturate(1.2);
    }

    .socratic-composer input {
      width: 100%;
      height: 42px;
      min-width: 0;
      padding: 0 12px;
      border: 1px solid rgba(41, 103, 101, .16);
      border-radius: 14px;
      color: #31535d;
      background: rgba(255, 255, 255, .94);
      box-shadow: inset 0 1px 2px rgba(44, 79, 84, .05);
      font-family: inherit;
      font-size: 10.5px;
      font-weight: 680;
      outline: none;
    }

    .socratic-composer input:focus {
      border-color: rgba(39, 143, 129, .5);
      box-shadow: 0 0 0 3px rgba(39, 143, 129, .1);
    }

    .socratic-send-button {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 13px;
      color: #fff;
      background: linear-gradient(145deg, #2b9789, #1f776f);
      box-shadow: 0 8px 16px rgba(31, 119, 111, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
      cursor: pointer;
      transition: filter .2s ease, transform .2s ease, opacity .2s ease;
    }

    .socratic-send-button:hover,
    .socratic-send-button:focus-visible { filter: brightness(1.07); outline: none; transform: translateY(-1px); }
    .socratic-send-button:disabled { opacity: .4; cursor: default; transform: none; }

    .socratic-send-button svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .socratic-composer small {
      grid-column: 1 / -1;
      align-self: end;
      color: #8a999c;
      text-align: center;
      font-size: 8.5px;
      font-weight: 650;
      line-height: 1;
    }

    .socratic-explain {
      display: grid;
      grid-template-rows: 104px minmax(0, 1fr) 94px;
      gap: 16px;
      min-width: 0;
      min-height: 0;
    }

    .socratic-contrast {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
      align-items: stretch;
      overflow: hidden;
      border: 1px solid rgba(44, 104, 107, .13);
      border-radius: 23px;
      background: rgba(255, 255, 255, .88);
      box-shadow: 0 13px 29px rgba(40, 77, 87, .075), inset 0 1px 0 #fff;
    }

    .socratic-contrast-side {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: center;
      gap: 13px;
      padding: 14px 18px;
    }

    .socratic-contrast-side.is-answer { background: linear-gradient(110deg, rgba(241, 243, 245, .78), rgba(255, 255, 255, .7)); }
    .socratic-contrast-side.is-plan { background: linear-gradient(110deg, rgba(232, 248, 243, .72), rgba(255, 251, 240, .82)); }

    .socratic-contrast-icon {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border-radius: 15px;
      color: #718087;
      background: linear-gradient(145deg, #edf1f2, #fff);
      box-shadow: inset 0 1px 0 #fff, 0 8px 16px rgba(39, 67, 74, .08);
    }

    .is-plan .socratic-contrast-icon {
      color: #fff;
      background: linear-gradient(145deg, #2d9588, #1f7774);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 9px 18px rgba(38, 130, 121, .18);
    }

    .socratic-contrast-icon svg {
      width: 26px;
      height: 26px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .socratic-contrast-copy small {
      display: block;
      color: #8a979c;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .1em;
      line-height: 1;
    }

    .socratic-contrast-copy strong {
      display: block;
      margin-top: 8px;
      color: #294b58;
      font-size: 19px;
      font-weight: 920;
      line-height: 1.22;
      white-space: nowrap;
    }

    .socratic-contrast-divider {
      position: relative;
      display: grid;
      place-items: center;
      color: #b18135;
    }

    .socratic-contrast-divider::before {
      content: "";
      position: absolute;
      top: 17px;
      bottom: 17px;
      left: 50%;
      width: 1px;
      background: linear-gradient(transparent, rgba(174, 130, 61, .3), transparent);
    }

    .socratic-contrast-divider span {
      position: relative;
      z-index: 1;
      display: grid;
      width: 35px;
      height: 35px;
      place-items: center;
      border: 1px solid rgba(194, 145, 62, .24);
      border-radius: 50%;
      background: #fffaf0;
      box-shadow: 0 6px 13px rgba(129, 91, 34, .08);
      font-size: 10px;
      font-weight: 950;
    }

    .socratic-step-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 13px;
      min-width: 0;
      min-height: 0;
    }

    .socratic-step-grid::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 7%;
      right: 7%;
      z-index: 0;
      height: 2px;
      background: linear-gradient(90deg, rgba(48, 145, 132, .18), rgba(212, 155, 62, .3));
      transform: translateY(-50%);
    }

    .socratic-step-card {
      --step-rgb: 42, 139, 128;
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: auto auto auto 1fr auto;
      align-content: start;
      min-width: 0;
      min-height: 0;
      padding: 19px 16px 17px;
      overflow: hidden;
      border: 1px solid rgba(var(--step-rgb), .17);
      border-radius: 23px;
      background:
        radial-gradient(circle at 82% 7%, rgba(var(--step-rgb), .11), transparent 34%),
        linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(var(--step-rgb), .055));
      box-shadow: 0 13px 26px rgba(41, 74, 83, .075), inset 0 1px 0 #fff;
      scale: 1;
      translate: 0 0;
      transition:
        border-color .46s ease,
        box-shadow .46s ease,
        scale .52s cubic-bezier(.16, 1, .3, 1),
        translate .52s cubic-bezier(.16, 1, .3, 1),
        background .46s ease;
    }

    .socratic-step-card:nth-child(2) { --step-rgb: 52, 117, 153; }
    .socratic-step-card:nth-child(3) { --step-rgb: 132, 103, 161; }
    .socratic-step-card:nth-child(4) { --step-rgb: 211, 151, 53; }

    .socratic-step-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 3px solid rgba(var(--step-rgb), .92);
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), inset 0 0 24px rgba(var(--step-rgb), .12);
      opacity: 0;
      pointer-events: none;
      transition: opacity .42s ease;
    }

    .socratic-step-card.is-active {
      z-index: 3;
      border-color: rgba(var(--step-rgb), .94);
      background:
        radial-gradient(circle at 78% 8%, rgba(var(--step-rgb), .34), transparent 40%),
        linear-gradient(155deg, #fff 12%, rgba(var(--step-rgb), .2));
      box-shadow:
        0 0 0 5px rgba(var(--step-rgb), .1),
        0 24px 46px rgba(var(--step-rgb), .32),
        0 0 30px rgba(var(--step-rgb), .16),
        inset 0 1px 0 #fff;
      scale: 1.045;
      translate: 0 -9px;
    }

    .socratic-step-card.is-active::after { opacity: 1; }

    .socratic-step-card.is-complete .socratic-step-number {
      color: #fff;
      background: rgb(var(--step-rgb));
    }

    .socratic-step-number {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border: 1px solid rgba(var(--step-rgb), .2);
      border-radius: 11px;
      color: rgb(var(--step-rgb));
      background: rgba(var(--step-rgb), .08);
      font-size: 12px;
      font-weight: 950;
      transition: color .35s ease, background .35s ease, box-shadow .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
    }

    .socratic-step-card.is-active .socratic-step-number {
      color: #fff;
      background: rgb(var(--step-rgb));
      box-shadow: 0 8px 18px rgba(var(--step-rgb), .3);
      transform: scale(1.08);
    }

    .socratic-step-icon {
      display: grid;
      width: 54px;
      height: 54px;
      margin-top: 25px;
      place-items: center;
      border-radius: 18px;
      color: #fff;
      background: linear-gradient(145deg, rgba(var(--step-rgb), 1), rgba(var(--step-rgb), .7));
      box-shadow: 0 11px 21px rgba(var(--step-rgb), .2), inset 0 1px 0 rgba(255, 255, 255, .3);
      transition: transform .52s cubic-bezier(.16, 1, .3, 1), box-shadow .42s ease;
    }

    .socratic-step-card.is-active .socratic-step-icon {
      box-shadow: 0 16px 30px rgba(var(--step-rgb), .36), inset 0 1px 0 rgba(255, 255, 255, .38);
      transform: scale(1.13) rotate(-3deg);
    }

    .socratic-step-icon svg {
      width: 31px;
      height: 31px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .socratic-step-card h3 {
      margin: 18px 0 0;
      color: #234653;
      font-size: 22px;
      font-weight: 940;
      line-height: 1.12;
      letter-spacing: -.025em;
      white-space: nowrap;
      transition: color .38s ease, text-shadow .38s ease;
    }

    .socratic-step-card.is-active h3 {
      color: rgb(var(--step-rgb));
      text-shadow: 0 6px 18px rgba(var(--step-rgb), .18);
    }

    .socratic-step-card p {
      margin: 10px 0 0;
      color: #6a7d84;
      font-size: 15px;
      font-weight: 680;
      line-height: 1.5;
      transition: color .38s ease;
    }

    .socratic-step-card.is-active p { color: #405861; }

    .socratic-step-tag {
      align-self: end;
      justify-self: start;
      display: inline-grid;
      height: 31px;
      place-items: center;
      margin-top: 13px;
      padding: 0 10px;
      border: 1px solid rgba(var(--step-rgb), .18);
      border-radius: 10px;
      color: rgb(var(--step-rgb));
      background: rgba(var(--step-rgb), .07);
      font-size: 11px;
      font-weight: 880;
      white-space: nowrap;
      transition: color .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
    }

    .socratic-step-card.is-active .socratic-step-tag {
      border-color: rgba(var(--step-rgb), .5);
      color: #fff;
      background: rgb(var(--step-rgb));
      box-shadow: 0 7px 16px rgba(var(--step-rgb), .24);
    }

    .socratic-takeaway {
      position: relative;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      min-width: 0;
      padding: 14px 20px;
      overflow: hidden;
      border: 1px solid rgba(43, 122, 117, .18);
      border-radius: 23px;
      background:
        radial-gradient(circle at 86% 50%, rgba(224, 167, 64, .15), transparent 25%),
        linear-gradient(105deg, rgba(229, 247, 242, .92), rgba(255, 251, 240, .92));
      box-shadow: 0 13px 28px rgba(42, 84, 90, .08), inset 0 1px 0 #fff;
    }

    .socratic-takeaway-icon {
      display: grid;
      width: 54px;
      height: 54px;
      place-items: center;
      border-radius: 18px;
      color: #fff;
      background: linear-gradient(145deg, #20827a, #2d9b89);
      box-shadow: 0 10px 20px rgba(34, 132, 120, .2), inset 0 1px 0 rgba(255, 255, 255, .28);
    }

    .socratic-takeaway-icon svg {
      width: 31px;
      height: 31px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .socratic-takeaway strong {
      display: block;
      color: #204b55;
      font-size: 20px;
      font-weight: 930;
      line-height: 1.26;
    }

    .socratic-takeaway span:last-child {
      display: grid;
      height: 35px;
      place-items: center;
      padding: 0 14px;
      border: 1px solid rgba(195, 142, 52, .21);
      border-radius: 12px;
      color: #96691f;
      background: rgba(255, 248, 229, .9);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .slide.active .socratic-phone { animation: socratic-phone-in .66s cubic-bezier(.16, .84, .25, 1) both; }
    .slide.active .socratic-contrast { animation: socratic-panel-in .52s .08s cubic-bezier(.2, .8, .2, 1) both; }
    .slide.active .socratic-step-card { animation: socratic-panel-in .5s cubic-bezier(.2, .8, .2, 1) both; }
    .slide.active .socratic-step-card:nth-child(1) { animation-delay: .16s; }
    .slide.active .socratic-step-card:nth-child(2) { animation-delay: .23s; }
    .slide.active .socratic-step-card:nth-child(3) { animation-delay: .3s; }
    .slide.active .socratic-step-card:nth-child(4) { animation-delay: .37s; }
    .slide.active .socratic-takeaway { animation: socratic-panel-in .52s .44s cubic-bezier(.2, .8, .2, 1) both; }

    .slide:not(.active) .socratic-phone,
    .slide:not(.active) .socratic-contrast,
    .slide:not(.active) .socratic-step-card,
    .slide:not(.active) .socratic-takeaway,
    .slide:not(.active) .socratic-message,
    .slide:not(.active) .socratic-choice-set,
    .slide:not(.active) .socratic-typing i,
    .slide:not(.active) .socratic-plan-card { animation-play-state: paused !important; }

    @keyframes socratic-phone-in {
      from { opacity: 0; transform: translateY(20px) rotate(-1.2deg) scale(.97); }
      to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
    }

    @keyframes socratic-panel-in {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes socratic-message-in {
      from { opacity: 0; transform: translateY(8px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes socratic-plan-in {
      from { opacity: 0; transform: translateY(12px) scale(.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes socratic-typing {
      0%, 60%, 100% { opacity: .34; transform: translateY(0); }
      30% { opacity: 1; transform: translateY(-3px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .socratic-phone,
      .socratic-contrast,
      .socratic-step-card,
      .socratic-takeaway,
      .socratic-message,
      .socratic-choice-set,
      .socratic-plan-card,
      .socratic-typing i { animation: none !important; transition: none !important; }
    }

    /* 第36页：一份 AI 课件怎样获准发布（参考图可编辑复刻） */
    .ai-publishing-slide {
      color: #0a204e;
      background: #fff;
    }

    .ai-publish-page {
      position: absolute;
      inset: 0;
      width: 1600px;
      height: 900px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 43%, rgba(238, 245, 255, .16), transparent 44%),
        #fff;
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      isolation: isolate;
      transform: scale(var(--content-scale));
      transform-origin: center center;
    }

    .ai-publish-deck-head {
      position: absolute;
      top: 54px;
      left: 80px;
      right: 80px;
      z-index: 8;
    }

    .ai-publish-deck-head h2 {
      font-size: 45px;
      letter-spacing: -.045em;
    }

    .ai-publish-deck-head .chapter-tag {
      background: linear-gradient(135deg, var(--blue), var(--violet));
    }

    .ai-publish-flow {
      position: absolute;
      top: 205px;
      left: 96px;
      right: 92px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      height: 108px;
    }

    .ai-publish-step {
      position: relative;
      min-width: 0;
      height: 108px;
    }

    .ai-publish-step-icon {
      position: absolute;
      top: 13px;
      left: 0;
      display: grid;
      width: 79px;
      height: 79px;
      place-items: center;
      border: 1.5px solid #96b8ff;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .98), rgba(241, 246, 255, .82) 62%, rgba(224, 234, 254, .7));
      box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .72);
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .ai-publish-step-icon img {
      width: 42px;
      height: 42px;
    }

    .ai-publish-step-icon.is-review {
      top: 1px;
      left: -2px;
      width: 104px;
      height: 104px;
      border: 1px solid rgba(43, 103, 231, .44);
      background: #fff;
      box-shadow:
        inset 0 0 0 7px #fff,
        inset 0 0 0 13px #1458df,
        0 0 0 5px rgba(29, 99, 226, .11);
    }

    .ai-publish-step-icon.is-review::before {
      content: "";
      position: absolute;
      inset: -8px;
      border: 1.5px dashed rgba(32, 102, 226, .34);
      border-radius: 50%;
    }

    .ai-publish-step-icon.is-review img {
      width: 54px;
      height: 54px;
    }

    .ai-publish-step.is-current .ai-publish-step-icon:not(.is-review) {
      border-color: #2768e6;
      box-shadow:
        inset 0 0 0 7px rgba(255, 255, 255, .8),
        0 0 0 5px rgba(35, 100, 225, .12);
      transform: scale(1.05);
    }

    .ai-publish-step-copy {
      position: absolute;
      top: 0;
      left: 94px;
      display: grid;
      align-content: start;
      white-space: nowrap;
    }

    .ai-publish-step:nth-child(3) .ai-publish-step-copy { left: 112px; }

    .ai-publish-step-copy b {
      color: #0c4fbe;
      font-size: 34px;
      font-weight: 920;
      line-height: 1;
      letter-spacing: .015em;
    }

    .ai-publish-step-copy strong {
      margin-top: 10px;
      color: #0b2251;
      font-size: 21px;
      font-weight: 900;
      line-height: 1.1;
    }

    .ai-publish-step-copy small {
      margin-top: 7px;
      color: #667188;
      font-size: 15px;
      font-weight: 560;
      line-height: 1.15;
    }

    .ai-publish-connector {
      position: absolute;
      top: 51px;
      left: 188px;
      z-index: -1;
      display: flex;
      align-items: center;
      width: 96px;
      height: 12px;
      pointer-events: none;
    }

    .ai-publish-step:nth-child(2) .ai-publish-connector { left: 188px; width: 96px; }
    .ai-publish-step:nth-child(3) .ai-publish-connector { left: 218px; width: 67px; }
    .ai-publish-step:nth-child(4) .ai-publish-connector { left: 186px; width: 99px; }
    .ai-publish-step:nth-child(5) .ai-publish-connector { left: 185px; width: 86px; }

    .ai-publish-connector i {
      width: calc(100% - 12px);
      border-top: 3px solid #0f59e5;
    }

    .ai-publish-connector.is-dashed i { border-top: 2px dashed #2b63c6; }
    .ai-publish-connector.is-tail i { border-top-width: 1.5px; }

    .ai-publish-connector img {
      width: 17px;
      height: 17px;
      margin-left: -4px;
    }

    .ai-publish-board {
      position: absolute;
      top: 330px;
      left: 42px;
      right: 42px;
      height: 385px;
      overflow: hidden;
      border: 2px solid #0958e8;
      border-radius: 10px;
      background: rgba(255, 255, 255, .98);
      box-shadow:
        0 4px 0 rgba(11, 54, 121, .12),
        0 10px 23px rgba(35, 73, 132, .11);
    }

    .ai-publish-board-grid {
      position: absolute;
      top: 16px;
      left: 13px;
      right: 13px;
      display: grid;
      grid-template-columns: 1.035fr 1fr;
      gap: 18px;
      height: 350px;
    }

    .ai-publish-preview-panel,
    .ai-publish-audit-panel {
      position: relative;
      min-width: 0;
      height: 100%;
    }

    .ai-publish-panel-tab {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      min-width: 218px;
      height: 33px;
      padding: 7px 18px 0;
      border-radius: 5px 5px 0 0;
      color: #fff;
      background: linear-gradient(180deg, #145dea, #0b4ed1);
      box-shadow: 0 4px 9px rgba(18, 84, 210, .18);
      font-size: 15px;
      font-weight: 800;
      line-height: 1.2;
    }

    .ai-publish-panel-tab::after {
      content: "";
      position: absolute;
      top: 0;
      right: -20px;
      width: 26px;
      height: 33px;
      background: linear-gradient(180deg, #145dea, #0b4ed1);
      clip-path: polygon(0 0, 100% 0, 74% 100%, 0 100%);
    }

    .ai-publish-preview-shell {
      position: absolute;
      top: 31px;
      left: 0;
      right: 0;
      bottom: 0;
      display: grid;
      grid-template-columns: 153px minmax(0, 1fr);
      overflow: hidden;
      border: 1px solid #bfd0ed;
      border-radius: 0 7px 7px 7px;
      background: #fff;
      box-shadow: inset 0 3px 0 rgba(221, 230, 245, .72);
    }

    .ai-publish-thumbnails {
      display: grid;
      align-content: start;
      gap: 9px;
      padding: 18px 11px 12px;
      background: linear-gradient(180deg, #f8fbff, #f5f8fc);
    }

    .ai-publish-thumbnails button {
      display: block;
      width: 126px;
      height: 59px;
      overflow: hidden;
      padding: 0;
      border: 1px solid #d3dce9;
      border-radius: 3px;
      background: #fff;
      box-shadow: 0 2px 5px rgba(44, 75, 121, .09);
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    .ai-publish-thumbnails button:first-child { height: 81px; }

    .ai-publish-thumbnails button.is-active,
    .ai-publish-thumbnails button:hover {
      border: 2px solid #1763e8;
      box-shadow: 0 0 0 1px rgba(22, 99, 232, .08), 0 4px 8px rgba(24, 78, 165, .1);
    }

    .ai-publish-thumbnails img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .ai-publish-lesson-page {
      position: relative;
      overflow: hidden;
      border-left: 1px solid #e1e7f0;
      background: #fff;
    }

    .ai-publish-mountain {
      position: absolute;
      top: 15px;
      right: -2px;
      z-index: 0;
      width: 300px;
      height: 286px;
      object-fit: cover;
      object-position: center;
      mix-blend-mode: multiply;
    }

    .ai-publish-poem {
      position: absolute;
      top: 24px;
      left: 49px;
      z-index: 2;
      width: 388px;
    }

    .ai-publish-poem h3 {
      margin: 0;
      color: #091b42;
      font-family: "STKaiti", "KaiTi", "Kaiti SC", serif;
      font-size: 34px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: .05em;
    }

    .ai-publish-poem h3 small {
      margin-left: 22px;
      color: #18233b;
      font-family: var(--font);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .ai-publish-poem p {
      margin: 16px 0 0;
      color: #111725;
      font-family: "STKaiti", "KaiTi", "Kaiti SC", serif;
      font-size: 20px;
      font-weight: 690;
      line-height: 1.52;
      letter-spacing: .055em;
    }

    .ai-publish-goals {
      position: absolute;
      left: 39px;
      bottom: 10px;
      z-index: 3;
      width: 310px;
      min-height: 102px;
      padding: 10px 15px 9px;
      border: 1px solid rgba(174, 190, 215, .66);
      border-radius: 8px;
      background: rgba(255, 255, 255, .86);
      box-shadow: 0 6px 14px rgba(52, 72, 108, .07);
      backdrop-filter: blur(4px);
    }

    .ai-publish-goals strong {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #1155c6;
      font-size: 15px;
      font-weight: 850;
    }

    .ai-publish-goals strong img { width: 17px; height: 17px; }

    .ai-publish-goals ul {
      margin: 6px 0 0;
      padding-left: 17px;
      color: #28364d;
      font-size: 11.7px;
      font-weight: 580;
      line-height: 1.66;
    }

    .ai-publish-watermark {
      position: absolute;
      right: 12px;
      bottom: 1px;
      z-index: 4;
      color: #b5b7bd;
      font-size: 11px;
      font-weight: 540;
    }

    .ai-publish-audit-panel h3 {
      height: 33px;
      margin: 0;
      padding: 3px 0 0 18px;
      color: #0b55d9;
      background: linear-gradient(90deg, rgba(231, 240, 255, .56), transparent 68%);
      font-size: 18px;
      font-weight: 900;
      line-height: 1.5;
    }

    .ai-publish-audit-table {
      height: 317px;
      overflow: hidden;
      border: 1px solid #c8d7ef;
      border-radius: 7px;
      background: rgba(255, 255, 255, .96);
    }

    .ai-publish-audit-row {
      position: relative;
      display: grid;
      grid-template-columns: 77px minmax(0, 1fr) 282px;
      align-items: center;
      height: 63.2px;
      overflow: hidden;
      border-bottom: 1px solid #d8e2f1;
      transition: background .34s ease, box-shadow .34s ease;
    }

    .ai-publish-audit-row::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(100deg, transparent 18%, rgba(48, 121, 239, .13) 48%, transparent 78%);
      opacity: 0;
      transform: translateX(-115%);
    }

    .ai-publish-audit-row.is-checking {
      background: linear-gradient(90deg, rgba(236, 245, 255, .78), rgba(255, 255, 255, .98));
      box-shadow: inset 4px 0 0 #2d78ed;
    }

    .ai-publish-audit-row.is-checking::after {
      opacity: 1;
      animation: ai-publish-audit-scan .72s ease-out both;
    }

    .ai-publish-audit-row.is-verified {
      background: linear-gradient(90deg, rgba(235, 251, 242, .62), rgba(255, 255, 255, .98) 58%);
      box-shadow: inset 4px 0 0 rgba(24, 159, 76, .82);
    }

    .ai-publish-audit-row > * { position: relative; z-index: 1; }

    .ai-publish-audit-row:last-child { border-bottom: 0; }

    .ai-publish-audit-icon {
      display: grid;
      width: 53px;
      height: 53px;
      margin-left: 14px;
      place-items: center;
      border: 1.5px solid #2971ef;
      border-radius: 50%;
      background: #fff;
      box-shadow: inset 0 0 0 5px rgba(242, 247, 255, .78);
    }

    .ai-publish-audit-icon img { width: 31px; height: 31px; }

    .ai-publish-audit-icon.is-ai {
      color: #0b56da;
      font-size: 24px;
      font-weight: 850;
      letter-spacing: -.04em;
    }

    .ai-publish-audit-copy {
      display: grid;
      min-width: 0;
      align-content: center;
      padding-left: 4px;
    }

    .ai-publish-audit-copy strong {
      color: #0b214f;
      font-size: 17px;
      font-weight: 880;
      line-height: 1.15;
    }

    .ai-publish-audit-copy small {
      margin-top: 4px;
      color: #616a7b;
      font-size: 14px;
      font-weight: 540;
      line-height: 1.2;
    }

    .ai-publish-audit-result {
      display: flex;
      align-items: center;
      align-self: stretch;
      gap: 12px;
      padding-left: 31px;
      border-left: 1px solid #c8d7ef;
      background: linear-gradient(90deg, rgba(247, 251, 255, .65), #fff);
      transition: background .3s ease;
    }

    .ai-publish-result-symbol {
      position: relative;
      display: grid;
      width: 27px;
      height: 27px;
      flex: 0 0 27px;
      place-items: center;
    }

    .ai-publish-result-symbol > img {
      position: absolute;
      width: 25px;
      height: 25px;
      opacity: 0;
      transform: scale(.56);
    }

    .ai-publish-result-symbol > i {
      position: absolute;
      width: 26px;
      height: 26px;
      border: 3px solid rgba(32, 100, 223, .18);
      border-top-color: #1b67e6;
      border-radius: 50%;
      opacity: 0;
    }

    .ai-publish-audit-result > span { display: grid; }

    .ai-publish-audit-result strong {
      color: #119043;
      font-size: 17px;
      font-weight: 900;
      line-height: 1.15;
      transition: color .25s ease;
    }

    .ai-publish-audit-result small {
      margin-top: 4px;
      color: #596477;
      font-size: 14px;
      font-weight: 540;
      line-height: 1.15;
    }

    .ai-publish-audit-result.is-pending strong { color: #7b8799; }

    .ai-publish-audit-result.is-checking {
      background: linear-gradient(90deg, rgba(236, 244, 255, .92), #fff);
    }

    .ai-publish-audit-result.is-checking strong { color: #0753d8; }

    .ai-publish-audit-result.is-checking .ai-publish-result-symbol > i {
      opacity: 1;
      animation: ai-publish-spin .78s linear infinite;
    }

    .ai-publish-audit-result.is-pass .ai-publish-result-symbol > img {
      opacity: 1;
      animation: ai-publish-check-in .48s cubic-bezier(.16, .86, .2, 1.2) both;
    }

    .ai-publish-responsibility {
      position: absolute;
      top: 742px;
      left: 39px;
      right: 39px;
      display: grid;
      grid-template-columns: 114px auto 1px minmax(0, 1fr) 196px;
      align-items: center;
      height: 68px;
      overflow: hidden;
      border: 1px solid #c9d9f1;
      border-radius: 7px;
      background: rgba(255, 255, 255, .98);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .ai-publish-school-mark {
      display: grid;
      width: 74px;
      height: 64px;
      margin-left: 28px;
      place-items: center;
      background: linear-gradient(160deg, #1263e8, #0349ca);
      clip-path: polygon(50% 0, 89% 15%, 86% 70%, 72% 89%, 50% 100%, 28% 89%, 14% 70%, 11% 15%);
      filter: drop-shadow(0 5px 7px rgba(21, 83, 188, .2));
    }

    .ai-publish-school-mark img {
      width: 38px;
      height: 38px;
      filter: brightness(0) invert(1);
    }

    .ai-publish-responsibility > strong {
      padding: 0 67px 0 30px;
      color: #0b55d3;
      font-size: 27px;
      font-weight: 920;
      line-height: 1;
      white-space: nowrap;
    }

    .ai-publish-responsibility > i {
      width: 1px;
      height: 38px;
      background: #1d5fd3;
    }

    .ai-publish-responsibility > p {
      margin: 0;
      padding-left: 38px;
      color: #182741;
      font-size: 17px;
      font-weight: 560;
      line-height: 1.4;
      white-space: nowrap;
    }

    .ai-publish-recall {
      width: 45px;
      height: 45px;
      justify-self: center;
      transform: translateX(-10px);
      fill: none;
      stroke: #0b56d8;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .slide:not(.active) .ai-publish-audit-row::after,
    .slide:not(.active) .ai-publish-result-symbol > i,
    .slide:not(.active) .ai-publish-result-symbol > img { animation-play-state: paused !important; }

    @keyframes ai-publish-spin { to { transform: rotate(360deg); } }

    @keyframes ai-publish-audit-scan {
      0% { transform: translateX(-115%); }
      100% { transform: translateX(115%); }
    }

    @keyframes ai-publish-check-in {
      0% { opacity: 0; transform: scale(.56) rotate(-16deg); }
      68% { opacity: 1; transform: scale(1.16) rotate(3deg); }
      100% { opacity: 1; transform: scale(1) rotate(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .ai-publish-audit-row::after,
      .ai-publish-result-symbol > i,
      .ai-publish-result-symbol > img { animation: none !important; }
      .ai-publish-step-icon { transition: none; }
    }

    #progress {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 6px;
      background: rgba(13, 65, 104, .10);
      z-index: 3100;
    }

    #progress span {
      display: block;
      width: 0;
      height: 100%;
      background: linear-gradient(90deg, #20b977 0%, #48e39e 58%, #a0f37d 100%);
      box-shadow: 0 0 16px rgba(32, 185, 119, .48);
      transition: width .24s ease;
    }

    #pageCounter {
      position: fixed;
      right: var(--page-counter-right);
      bottom: calc(var(--page-counter-bottom) + env(safe-area-inset-bottom, 0px));
      z-index: 3090;
      display: flex;
      align-items: baseline;
      min-width: 76px;
      padding: 7px 10px 6px;
      justify-content: center;
      border: 1px solid rgba(39, 93, 190, .12);
      border-radius: 999px;
      color: #91a0b8;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 8px 24px rgba(29, 61, 116, .10);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      pointer-events: none;
      transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    }

    #pageCounter[hidden] { display: none; }

    #pageCounter.camera-ready {
      border-color: #20b977;
      box-shadow: 0 0 0 2px rgba(32, 185, 119, .13), 0 8px 24px rgba(25, 142, 91, .16);
    }

    #pageCounter strong {
      color: var(--blue);
      font: 850 18px/1 var(--font);
      letter-spacing: .06em;
    }

    #pageCounter span {
      margin-left: 6px;
      font: 750 13px/1 var(--font);
      letter-spacing: .03em;
    }

    #minuteWatermark {
      position: fixed;
      left: calc(var(--minute-watermark-left) + env(safe-area-inset-left, 0px));
      bottom: calc(var(--page-counter-bottom) + env(safe-area-inset-bottom, 0px));
      z-index: 3080;
      color: rgba(79, 91, 109, .52);
      font: 650 clamp(13px, 1.05vw, 17px)/1 var(--font);
      font-variant-numeric: tabular-nums;
      letter-spacing: .12em;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .78);
      opacity: 0;
      visibility: hidden;
      transform: translateY(3px);
      transition: opacity .48s ease, transform .48s ease, visibility 0s linear .48s;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }

    #minuteWatermark.is-visible {
      opacity: .56;
      visibility: visible;
      transform: translateY(0);
      transition-delay: 0s;
    }

    .presentation-tools {
      --pt-line: rgba(127, 185, 233, .25);
      --pt-blue: #2877f5;
      --pt-gold: #f2b544;
      --pt-ui-font: Inter, ui-sans-serif, system-ui, "PingFang SC", sans-serif;
      font-family: var(--pt-ui-font);
    }

    .presentation-tools .icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

    .presentation-tools .floating-tool-orb {
      --glass-x: 32%;
      --glass-y: 24%;
      position: fixed;
      right: max(20px, env(safe-area-inset-right));
      bottom: max(20px, env(safe-area-inset-bottom));
      z-index: 3680;
      width: 52px;
      height: 52px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      outline: 0;
      appearance: none;
      -webkit-appearance: none;
      background:
        radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255,255,255,.48) 0 5%, rgba(255,255,255,.14) 15%, transparent 34%),
        radial-gradient(circle at 68% 82%, rgba(177,221,255,.18), transparent 43%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.018) 0 28%, rgba(234,247,255,.09) 52%, rgba(255,255,255,.24) 100%);
      border: 1px solid rgba(255,255,255,.36);
      box-shadow: inset 1px 1px 1px rgba(255,255,255,.72), inset -1px -1px 1px rgba(130,188,231,.18), 0 8px 24px rgba(0,0,0,.16);
      -webkit-backdrop-filter: blur(9px) saturate(145%);
      backdrop-filter: blur(9px) saturate(145%);
      opacity: .42;
      filter: saturate(.76) contrast(.94);
      cursor: grab;
      touch-action: none;
      user-select: none;
      overflow: hidden;
      transition: opacity .26s ease, filter .26s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .presentation-tools .floating-tool-orb::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(ellipse at var(--glass-x) var(--glass-y), rgba(255,255,255,.52) 0 4%, rgba(255,255,255,.13) 11%, transparent 29%);
      opacity: .42;
      pointer-events: none;
    }

    .presentation-tools .floating-tool-orb:hover,
    .presentation-tools .floating-tool-orb:focus-visible,
    .presentation-tools .floating-tool-orb.dragging,
    .presentation-tools .floating-tool-orb[aria-expanded="true"] {
      background:
        radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255,255,255,.72) 0 5%, rgba(255,255,255,.22) 16%, transparent 38%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.025) 0 30%, rgba(225,244,255,.11) 56%, rgba(255,255,255,.34) 100%);
      box-shadow: inset 1px 1px 1px rgba(255,255,255,.85), 0 12px 30px rgba(0,0,0,.22);
      opacity: 1;
      filter: saturate(1) contrast(1);
      transform: scale(1.04);
    }

    .presentation-tools .floating-tool-orb.dragging { cursor: grabbing; transition: none; }
    .presentation-tools .floating-tool-orb.shortcut-released { transition: none; }

    .presentation-tools .toolbar {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 3670;
      display: grid;
      gap: 6px;
      width: 58px;
      padding: 8px 6px;
      color: #3e5684;
      border: 1px solid rgba(38, 100, 235, .20);
      border-radius: 12px;
      background: rgba(255,255,255,.90);
      box-shadow: 0 20px 48px rgba(39, 66, 132, .16);
      -webkit-backdrop-filter: blur(20px) saturate(145%);
      backdrop-filter: blur(20px) saturate(145%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(8px) scale(.94);
      transform-origin: center right;
      transition: transform .22s ease, opacity .2s ease, visibility 0s linear .22s;
    }

    .presentation-tools .toolbar.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
      transition-delay: 0s;
    }

    .presentation-tools .toolbar.is-vertical { display: grid; grid-auto-flow: row; width: 58px; height: max-content; }
    .presentation-tools .toolbar.is-horizontal { display: flex; flex-flow: row nowrap; align-items: center; width: max-content; height: 58px; }

    .presentation-tools .tool-button {
      position: relative;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      padding: 0;
      color: #64759a;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      cursor: pointer;
      transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, opacity .18s ease;
    }

    .presentation-tools .tool-button:hover { color: var(--pt-blue); background: rgba(35, 104, 239, .08); }
    .presentation-tools .tool-button.active { color: #fff; background: var(--pt-blue); }
    .presentation-tools .tool-button.history-tool { color: #4c6798; }
    .presentation-tools .tool-button:disabled,
    .presentation-tools .tool-button:disabled:hover {
      color: #8794ad;
      border-color: transparent;
      background: transparent;
      box-shadow: none;
      opacity: .34;
      cursor: not-allowed;
    }
    .presentation-tools .tool-button[data-tool="pen"],
    .presentation-tools .tool-button[data-tool="highlighter"] { color: var(--tool-color, #0066ff); }
    .presentation-tools .tool-button[data-tool="pen"].active,
    .presentation-tools .tool-button[data-tool="highlighter"].active {
      color: var(--tool-color, #0066ff);
      border-color: rgba(52, 96, 181, .24);
      background: rgba(43, 105, 234, .10);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
    }
    .presentation-tools .tool-button svg { width: 22px; height: 22px; }
    .presentation-tools .tool-button .tip {
      position: absolute;
      right: calc(100% + 10px);
      top: 50%;
      padding: 7px 9px;
      color: #fff;
      font: 600 12px/1 var(--pt-ui-font);
      white-space: nowrap;
      border-radius: 6px;
      background: #102650;
      opacity: 0;
      pointer-events: none;
      transform: translate(6px, -50%);
      transition: opacity .15s ease, transform .15s ease;
    }
    .presentation-tools .tool-button:hover .tip { opacity: 1; transform: translate(0, -50%); }
    .presentation-tools .toolbar.dock-left .tool-button .tip { right: auto; left: calc(100% + 10px); transform: translate(-6px, -50%); }
    .presentation-tools .toolbar.dock-left .tool-button:hover .tip { transform: translate(0, -50%); }
    .presentation-tools .toolbar.is-horizontal.dock-top .tool-button .tip { left: 50%; right: auto; top: calc(100% + 10px); transform: translate(-50%, -6px); }
    .presentation-tools .toolbar.is-horizontal.dock-top .tool-button:hover .tip { transform: translate(-50%, 0); }
    .presentation-tools .toolbar.is-horizontal.dock-bottom .tool-button .tip { left: 50%; right: auto; top: auto; bottom: calc(100% + 10px); transform: translate(-50%, 6px); }
    .presentation-tools .toolbar.is-horizontal.dock-bottom .tool-button:hover .tip { transform: translate(-50%, 0); }
    .presentation-tools .toolbar.is-horizontal .tool-button .tip {
      left: 50%;
      right: auto;
      top: auto;
      bottom: calc(100% + 10px);
      transform: translate(-50%, 6px);
    }
    .presentation-tools .toolbar.is-horizontal .tool-button:hover .tip { transform: translate(-50%, 0); }
    .presentation-tools .toolbar.is-horizontal.tips-below .tool-button .tip {
      top: calc(100% + 10px);
      bottom: auto;
      transform: translate(-50%, -6px);
    }
    .presentation-tools .toolbar.is-horizontal.tips-below .tool-button:hover .tip { transform: translate(-50%, 0); }
    .presentation-tools .toolbar.is-vertical.tips-right .tool-button .tip {
      right: auto;
      left: calc(100% + 10px);
      transform: translate(-6px, -50%);
    }
    .presentation-tools .toolbar.is-vertical.tips-right .tool-button:hover .tip { transform: translate(0, -50%); }
    .presentation-tools .tool-separator { height: 1px; margin: 2px 4px; background: var(--pt-line); }
    .presentation-tools .toolbar.is-horizontal .tool-separator { flex: 0 0 1px; width: 1px; height: 32px; margin: 4px 2px; }

    .presentation-tools #annotationCanvas {
      position: fixed;
      inset: 0;
      z-index: 3640;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      pointer-events: none;
      touch-action: none;
      cursor: crosshair;
    }
    .presentation-tools #annotationCanvas.drawing { pointer-events: auto; }
    .presentation-tools #annotationCanvas.eraser-mode { cursor: cell; }

    .presentation-tools .tool-settings-panel {
      --active-tool-color: #0066ff;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 3675;
      width: min(310px, calc(100vw - 82px));
      padding: 14px;
      color: #183264;
      border: 1px solid rgba(62, 108, 206, .20);
      border-radius: 20px;
      background: rgba(250,252,255,.96);
      box-shadow: 0 24px 62px rgba(36,61,126,.20);
      -webkit-backdrop-filter: blur(24px) saturate(150%);
      backdrop-filter: blur(24px) saturate(150%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(6px) scale(.965);
      transition: opacity .18s ease, transform .2s ease, visibility 0s linear .2s;
    }
    .presentation-tools .tool-settings-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
    .presentation-tools .tool-settings-head,
    .presentation-tools .tool-settings-label-row { display: flex; align-items: center; justify-content: space-between; }
    .presentation-tools .tool-settings-head { min-height: 30px; margin-bottom: 10px; }
    .presentation-tools .tool-settings-head strong { font: 780 15px/1.2 var(--pt-ui-font); }
    .presentation-tools .tool-settings-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: #6c7da0; border: 0; border-radius: 50%; background: rgba(80,108,169,.08); }
    .presentation-tools .tool-settings-close svg { width: 15px; height: 15px; }
    .presentation-tools .tool-settings-group { padding: 11px 0 4px; border-top: 1px solid rgba(58,97,177,.12); }
    .presentation-tools .tool-settings-group[hidden] { display: none; }
    .presentation-tools .tool-settings-label { color: #64769b; font: 720 12px/1 var(--pt-ui-font); letter-spacing: .08em; }
    .presentation-tools .tool-color-palette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
    .presentation-tools .tool-color-swatch { justify-self: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(26,45,82,.14); border-radius: 50%; background: var(--swatch-color); box-shadow: 0 5px 12px rgba(31,51,94,.11); }
    .presentation-tools .tool-color-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #3375e7; }
    .presentation-tools .tool-size-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
    .presentation-tools .tool-size-options.is-slider { display: block; margin-top: 7px; }
    .presentation-tools .tool-size-slope-layout { min-height: 66px; }
    .presentation-tools .tool-size-slider-value { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; color: #235ec9; font: 760 12px/1 var(--pt-ui-font); }
    .presentation-tools .tool-size-slider-value small { color: #7b8aa8; font: 650 10px/1 var(--pt-ui-font); }
    .presentation-tools .tool-size-slope-stage { position: relative; height: 34px; margin: 0 10px; isolation: isolate; }
    .presentation-tools .tool-size-slope-stage::before,
    .presentation-tools .tool-size-slope-stage::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 3px;
      pointer-events: none;
      clip-path: polygon(0 100%, 100% 4%, 100% 100%);
    }
    .presentation-tools .tool-size-slope-stage::before { height: 27px; background: rgba(76, 100, 150, .32); }
    .presentation-tools .tool-size-slope-stage::after {
      left: 1px;
      right: 1px;
      bottom: 4px;
      z-index: 1;
      height: 24px;
      background: linear-gradient(90deg, color-mix(in srgb, var(--active-tool-color) 24%, #d6deed), var(--active-tool-color));
    }
    .presentation-tools .tool-size-slider {
      --thumb-size: 20px;
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 34px;
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      background: transparent;
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
    }
    .presentation-tools .tool-size-slider::-webkit-slider-runnable-track { width: 100%; height: 28px; background: transparent; }
    .presentation-tools .tool-size-slider::-webkit-slider-thumb {
      width: var(--thumb-size);
      height: var(--thumb-size);
      margin-top: calc(28px - var(--thumb-size));
      border: 2px solid #fff;
      border-radius: 50%;
      background: var(--active-tool-color);
      box-shadow: 0 0 0 1px rgba(46, 70, 118, .42), 0 2px 5px rgba(46, 70, 118, .16);
      appearance: none;
      -webkit-appearance: none;
    }
    .presentation-tools .tool-size-slider::-moz-range-track { height: 28px; border: 0; background: transparent; }
    .presentation-tools .tool-size-slider::-moz-range-thumb {
      width: var(--thumb-size);
      height: var(--thumb-size);
      border: 2px solid #fff;
      border-radius: 50%;
      background: var(--active-tool-color);
      box-shadow: 0 0 0 1px rgba(46, 70, 118, .42), 0 2px 5px rgba(46, 70, 118, .16);
    }
    .presentation-tools .tool-size-slider-labels { display: flex; justify-content: space-between; margin-top: 2px; padding: 0 7px; color: #8290ab; font: 650 10px/1 var(--pt-ui-font); }

    .presentation-tools .eraser-cursor {
      --eraser-cursor-size: 32px;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 3650;
      width: var(--eraser-cursor-size);
      height: var(--eraser-cursor-size);
      border: 1px solid #fff;
      border-radius: 50%;
      background: transparent;
      mix-blend-mode: difference;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate(-50%, -50%);
      will-change: left, top;
    }
    .presentation-tools .eraser-cursor.visible { opacity: 1; visibility: visible; }
    .presentation-tools .drawing-shape-cursor {
      --drawing-cursor-color: #0066ff;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 3650;
      color: var(--drawing-cursor-color);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      will-change: left, top;
    }
    .presentation-tools .drawing-shape-cursor.visible { opacity: 1; visibility: visible; }
    .presentation-tools .drawing-shape-cursor[data-tool="pen"] { width: 32px; height: 32px; transform: translate(-3px, -29px); }
    .presentation-tools .drawing-shape-cursor[data-tool="highlighter"] { width: 34px; height: 34px; transform: translate(-4px, -30px); }
    .presentation-tools .drawing-shape-cursor svg { display: none; width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; }
    .presentation-tools .drawing-shape-cursor[data-tool="pen"] .pen-cursor-svg,
    .presentation-tools .drawing-shape-cursor[data-tool="highlighter"] .highlighter-cursor-svg { display: block; }

    .presentation-tools .gesture-pointer-cursor {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 3650;
      width: 30px;
      height: 30px;
      color: #fff;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate(-4px, -3px);
      filter: drop-shadow(0 2px 2px rgba(4, 16, 38, .62));
      will-change: transform, opacity;
    }

    .presentation-tools .gesture-pointer-cursor.visible { opacity: 1; visibility: visible; }
    .presentation-tools .gesture-pointer-cursor svg { display: block; width: 100%; height: 100%; }

    .presentation-tools .gesture-camera-panel {
      position: fixed;
      left: max(18px, env(safe-area-inset-left));
      bottom: max(18px, calc(env(safe-area-inset-bottom) + 8px));
      z-index: 3635;
      width: clamp(176px, 14vw, 228px);
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border: 1px solid rgba(92, 130, 180, .22);
      border-radius: 18px;
      background: rgba(11, 29, 54, .16);
      box-shadow: 0 14px 34px rgba(18, 42, 75, .12), inset 0 0 0 1px rgba(255, 255, 255, .16);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(10px) scale(.97);
      transition: opacity .22s ease, visibility .22s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
    }

    .presentation-tools .gesture-camera-panel.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

    .presentation-tools .gesture-camera-panel video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .2;
      transform: scaleX(-1);
      background: #132642;
    }

    .presentation-tools .gesture-camera-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)) 50% 0 / 1px 100% no-repeat,
        linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.12)) 0 50% / 100% 1px no-repeat;
      opacity: .42;
    }

    .presentation-tools .gesture-camera-status {
      position: absolute;
      left: 9px;
      right: 9px;
      bottom: 9px;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 30px;
      padding: 6px 9px;
      border: 1px solid rgba(255,255,255,.26);
      border-radius: 999px;
      color: #eef8ff;
      background: rgba(12, 31, 57, .72);
      box-shadow: 0 7px 18px rgba(7, 22, 45, .18);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      font: 760 10px/1.25 var(--pt-ui-font);
    }

    .presentation-tools .gesture-camera-status i {
      flex: 0 0 auto;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #f2b544;
      box-shadow: 0 0 0 4px rgba(242, 181, 68, .14);
    }

    .presentation-tools .gesture-camera-panel[data-status="ready"] .gesture-camera-status i {
      background: #49d79a;
      box-shadow: 0 0 0 4px rgba(73, 215, 154, .15), 0 0 10px rgba(73, 215, 154, .52);
    }

    .presentation-tools .gesture-camera-panel[data-status="error"] .gesture-camera-status i {
      background: #ff6d7d;
      box-shadow: 0 0 0 4px rgba(255, 109, 125, .15);
    }

    html.shape-tool-active .presentation-tools #annotationCanvas.drawing,
    html.eraser-tool-active .presentation-tools #annotationCanvas.eraser-mode { cursor: none; }

    html.gesture-cursor-active,
    html.gesture-cursor-active body,
    html.gesture-cursor-active button,
    html.gesture-cursor-active a,
    html.gesture-cursor-active input,
    html.gesture-cursor-active textarea,
    html.gesture-cursor-active canvas,
    html.gesture-cursor-active iframe { cursor: none !important; }

    /* 全屏演讲时，鼠标静止 2 秒后隐藏；再次移动即可立即恢复。 */
    html.fullscreen-cursor-idle,
    html.fullscreen-cursor-idle body,
    html.fullscreen-cursor-idle body * { cursor: none !important; }

    html.fullscreen-cursor-idle .presentation-tools .eraser-cursor,
    html.fullscreen-cursor-idle .presentation-tools .drawing-shape-cursor {
      opacity: 0 !important;
      visibility: hidden !important;
    }

    /* 让跨域内嵌页在下一次移动时把事件交回主页面，用于唤醒鼠标。 */
    html.fullscreen-cursor-idle iframe { pointer-events: none !important; }


    #overview {
      position: fixed;
      inset: 0;
      display: none;
      padding: 34px;
      overflow: auto;
      background: rgba(4, 16, 38, .94);
      backdrop-filter: blur(18px);
      z-index: 3900;
    }

    #overview.open { display: block; }

    .overview-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1400px;
      margin: 0 auto 24px;
      color: white;
    }

    .overview-head h2 { margin: 0; font-size: 30px; }

    .overview-head button {
      padding: 10px 16px;
      border-radius: 10px;
      color: white;
      background: rgba(255,255,255,.1);
      font-size: 16px;
    }

    #overviewGrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 14px;
      max-width: 1400px;
      margin: 0 auto;
    }

    .overview-item {
      min-height: 120px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 14px;
      color: #e9f1ff;
      background: rgba(255,255,255,.05);
      text-align: left;
      font-size: 16px;
      line-height: 1.4;
    }

    .overview-item strong {
      display: block;
      margin-bottom: 9px;
      color: #7fbdff;
      font-size: 14px;
    }

    .overview-item.active {
      border-color: #6baeff;
      background: rgba(50, 118, 239, .16);
    }

    #helpOverlay {
      position: fixed;
      inset: 0;
      display: none;
      place-items: center;
      padding: 34px;
      color: var(--text);
      background: rgba(4, 16, 38, .88);
      backdrop-filter: blur(18px);
      z-index: 3900;
    }
    #helpOverlay.open { display: grid; }
    .help-panel { width: min(860px, 92vw); max-height: 86vh; overflow: auto; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
    .help-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--line); }
    .help-head h2 { margin: 0; color: var(--ink); font-size: 28px; }
    .help-head button { padding: 8px 13px; border-radius: 8px; color: #fff; background: var(--navy); font-weight: 800; }
    .help-content { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 34px; padding: 28px; }
    .help-item { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
    .help-item kbd { align-self: start; justify-self: start; padding: 5px 9px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; color: var(--ink); background: #fff; font: 700 15px/1.2 system-ui, sans-serif; }
    .help-item span { color: var(--muted); font-size: 17px; }
    .visually-hidden { position: fixed !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

    /* Page 10 · fresh interactive comparison */
    .agent-showcase-stage {
      grid-template-columns: 302px 62px minmax(0, 1fr);
      gap: 14px;
      height: 560px;
      padding: 16px;
      border-color: rgba(64, 156, 166, .22);
      color: #183e46;
      background:
        radial-gradient(circle at 8% 20%, rgba(98, 226, 188, .27), transparent 25%),
        radial-gradient(circle at 76% 3%, rgba(111, 195, 255, .3), transparent 31%),
        radial-gradient(circle at 95% 96%, rgba(255, 214, 122, .24), transparent 28%),
        linear-gradient(132deg, #f8fff9 0%, #eefbff 48%, #fffaf0 100%);
      box-shadow: 0 26px 68px rgba(46, 112, 124, .16), inset 0 1px 0 rgba(255, 255, 255, .92);
    }

    .agent-showcase-stage::before {
      z-index: 0;
      opacity: .48;
      background-image:
        linear-gradient(rgba(43, 131, 145, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 131, 145, .055) 1px, transparent 1px);
      background-size: 42px 42px;
      -webkit-mask-image: radial-gradient(circle at 64% 48%, black, transparent 82%);
      mask-image: radial-gradient(circle at 64% 48%, black, transparent 82%);
    }

    .agent-phone-zone,
    .agent-bridge,
    .codex-mac-shot { z-index: 2; }

    .agent-phone-zone::before {
      width: 286px;
      height: 286px;
      border-color: rgba(34, 170, 150, .19);
      box-shadow: 0 0 0 34px rgba(79, 211, 177, .045), 0 0 68px rgba(62, 181, 181, .14);
    }

    .agent-phone-shell {
      width: 264px;
      height: 522px;
      border-color: rgba(255, 255, 255, .94);
      background: linear-gradient(125deg, #ffffff 0%, #b9cbd0 7%, #2e4146 15%, #789198 50%, #1c3137 86%, #e8f4f3 97%);
      box-shadow: 0 25px 52px rgba(30, 91, 99, .25), 0 0 38px rgba(70, 201, 178, .14), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

    .agent-phone-screen {
      color: #183a42;
      background: linear-gradient(180deg, #fbffff, #f1fbf8 67%, #eef8fb);
    }

    .agent-phone-header {
      border-bottom-color: rgba(28, 118, 126, .1);
      background: rgba(255, 255, 255, .94);
    }

    .agent-phone-menu,
    .agent-phone-replay {
      border-color: rgba(31, 132, 139, .14);
      color: #4b7d82;
      background: #f2fbfa;
      transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .agent-phone-replay:hover {
      border-color: rgba(21, 145, 145, .32);
      color: #087f82;
      background: #e8faf7;
      box-shadow: 0 6px 16px rgba(37, 140, 145, .12);
    }

    .agent-phone-replay:focus-visible,
    .agent-phone-send:focus-visible,
    .codex-prompt-composer button:focus-visible,
    .codex-prompt-composer textarea:focus-visible {
      outline: 2px solid #168fa5;
      outline-offset: 2px;
    }

    .agent-phone-brand strong { color: #173f47; }
    .agent-phone-brand small { color: #679096; }

    .agent-phone-chat {
      background:
        radial-gradient(circle at 14% 12%, rgba(65, 205, 168, .14), transparent 28%),
        linear-gradient(rgba(35, 132, 141, .04) 1px, transparent 1px);
      background-size: auto, 100% 28px;
    }

    .agent-phone-empty { color: #5d8185; }

    .agent-phone-empty i {
      border-color: rgba(27, 153, 145, .2);
      color: #098e8d;
      background: linear-gradient(145deg, #ffffff, #dff8f2);
      box-shadow: 0 10px 24px rgba(28, 125, 126, .12);
    }

    .agent-phone-empty strong { color: #194a50; }

    .agent-phone-user-bubble {
      border-color: rgba(27, 137, 143, .13);
      color: #173e44;
      background: linear-gradient(145deg, #ffffff, #f4fffd);
      box-shadow: 0 8px 20px rgba(28, 104, 110, .08);
    }

    .agent-phone-avatar {
      background: linear-gradient(145deg, #27b899, #087e8a);
      box-shadow: 0 7px 16px rgba(19, 132, 133, .2);
    }

    .agent-phone-answer-bubble {
      border-color: rgba(28, 135, 142, .11);
      color: #315c61;
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 8px 18px rgba(34, 117, 122, .06);
    }

    .agent-phone-thinking i { background: #159b96; }
    .agent-phone-caret { background: #118e99; }

    .agent-phone-limit {
      border-color: rgba(244, 170, 52, .24);
      color: #9a6417;
      background: rgba(255, 249, 227, .9);
    }

    .agent-phone-limit::before {
      background: #f0a52a;
      box-shadow: 0 0 0 4px rgba(240, 165, 42, .13);
    }

    .agent-phone-composer {
      border-top-color: rgba(28, 118, 126, .1);
      background: linear-gradient(180deg, #f6fffd, #ffffff);
    }

    .agent-phone-input-shell {
      border-color: rgba(25, 134, 141, .18);
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 8px 18px rgba(29, 111, 118, .08);
    }

    .agent-phone-input-line {
      color: #244d53;
      font-size: 9.5px;
      font-weight: 760;
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
    }

    .agent-phone-input-line:empty::before {
      content: "问题已发送";
      color: #86a7aa;
    }

    .agent-phone-send {
      padding: 0;
      border: 0;
      cursor: pointer;
      color: white;
      background: linear-gradient(145deg, #36c79f, #078e9e);
      box-shadow: 0 7px 16px rgba(15, 142, 144, .22);
      transition: filter .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease;
    }

    .agent-phone-send:hover:not(:disabled) {
      filter: saturate(1.08) brightness(1.04);
      box-shadow: 0 9px 20px rgba(15, 142, 144, .3);
    }

    .agent-phone-send:active:not(:disabled) { transform: translateY(1px); }

    .agent-phone-send:disabled {
      cursor: progress;
      opacity: .56;
      box-shadow: none;
    }

    .agent-phone-screen.is-sending .agent-phone-send,
    .agent-phone-screen.is-running .agent-phone-send {
      background: linear-gradient(145deg, #6fd8bd, #43aab4);
    }

    .agent-phone-disclaimer { color: #7d9da1; }

    .agent-bridge {
      gap: 10px;
      color: rgba(37, 107, 116, .58);
    }

    .agent-bridge i {
      border-color: rgba(17, 146, 150, .25);
      color: #0c8f97;
      background: radial-gradient(circle, rgba(255, 255, 255, .96), rgba(198, 244, 237, .76) 70%);
      box-shadow: 0 0 0 8px rgba(59, 192, 169, .055), 0 12px 28px rgba(36, 140, 145, .14);
    }

    .agent-bridge i::before,
    .agent-bridge i::after {
      background: linear-gradient(transparent, rgba(18, 145, 150, .32));
    }

    .agent-bridge strong { color: #226b72; }

    .codex-mac-shot {
      grid-template-rows: minmax(0, 1fr) 30px;
    }

    .codex-mac-frame {
      border-color: rgba(64, 145, 154, .22);
      background: #f7fbfb;
      box-shadow: 0 23px 54px rgba(38, 112, 122, .19), 0 0 38px rgba(86, 190, 195, .11), inset 0 1px 0 rgba(255, 255, 255, .95);
    }

    .codex-mac-frame::after {
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
    }

    .codex-mac-titlebar {
      grid-template-columns: 74px minmax(0, 1fr) 88px;
      border-bottom-color: rgba(37, 113, 122, .12);
      background: linear-gradient(180deg, rgba(255, 255, 255, .98), #eaf5f4);
    }

    .codex-mac-title { color: #315d63; }
    .codex-mac-titlebar > small { color: #2b8d91; }

    .codex-mac-workspace { grid-template-columns: 140px minmax(0, 1fr); }

    .codex-mac-sidebar {
      padding: 11px 9px;
      border-right-color: rgba(34, 118, 126, .11);
      color: #53777c;
      background: linear-gradient(180deg, #effaf6, #e9f4f7);
    }

    .codex-mac-brand {
      color: #163f46;
      font-size: 12px;
    }

    .codex-mac-brand img { filter: none; }

    .codex-new-task {
      border-color: rgba(26, 140, 144, .15);
      color: #21666c;
      background: rgba(255, 255, 255, .72);
      box-shadow: 0 5px 12px rgba(38, 121, 126, .06);
    }

    .codex-new-task b { color: #168f94; }
    .codex-sidebar-label { color: #7c9da0; }

    .codex-project-item {
      min-height: 31px;
      color: #66868a;
    }

    .codex-project-item i { background: #9bb7b9; }

    .codex-project-item.active {
      color: #155d65;
      background: rgba(255, 255, 255, .78);
      box-shadow: inset 2px 0 0 #21ae9d, 0 5px 14px rgba(34, 124, 130, .07);
    }

    .codex-project-item.active i {
      background: #22b39f;
      box-shadow: 0 0 9px rgba(34, 179, 159, .32);
    }

    .codex-mac-main {
      grid-template-rows: 45px minmax(0, 1fr) 58px 22px;
      color: #183e45;
      background: #fbfefd;
    }

    .codex-thread-head {
      border-bottom-color: rgba(32, 111, 120, .1);
      background: rgba(255, 255, 255, .86);
    }

    .codex-thread-head strong { color: #163e45; }
    .codex-thread-head small { color: #6d9094; }

    .codex-thread-head em {
      border-color: rgba(33, 150, 151, .2);
      color: #23777c;
      background: rgba(62, 187, 173, .09);
      transition: border-color .2s ease, color .2s ease, background .2s ease;
    }

    .codex-mac-shot.is-running .codex-thread-head em {
      border-color: rgba(25, 140, 175, .24);
      color: #0d7695;
      background: rgba(76, 184, 221, .12);
    }

    .codex-mac-shot.is-complete .codex-thread-head em {
      border-color: rgba(38, 164, 113, .22);
      color: #187149;
      background: rgba(63, 196, 132, .11);
    }

    .codex-mac-content {
      grid-template-columns: minmax(0, 1fr) 208px;
      min-height: 0;
    }

    .codex-transcript {
      padding: 12px 14px;
      background:
        radial-gradient(circle at 88% 10%, rgba(89, 207, 183, .13), transparent 28%),
        linear-gradient(180deg, #fbfffe, #f2faf9);
    }

    .codex-user-task,
    .codex-agent-message,
    .codex-delivery {
      opacity: 0;
      transform: translate3d(0, 8px, 0);
      transition: opacity .26s ease, transform .32s cubic-bezier(.22, .78, .28, 1);
    }

    .codex-user-task {
      margin-left: 40px;
      padding: 9px 11px;
      border-color: rgba(30, 129, 137, .13);
      color: #214a50;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 7px 18px rgba(38, 112, 118, .07);
      font-size: 9.5px;
    }

    .codex-agent-message {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      margin-top: 10px;
    }

    .codex-agent-avatar {
      background: linear-gradient(145deg, #2bb89e, #087d8c);
      box-shadow: 0 7px 16px rgba(18, 128, 132, .2);
    }

    .codex-agent-copy {
      position: relative;
      min-height: 72px;
      padding: 9px 10px;
      border: 1px solid rgba(33, 128, 136, .1);
      border-radius: 5px 13px 13px 13px;
      background: rgba(255, 255, 255, .73);
    }

    .codex-agent-copy > p {
      min-height: 48px;
      margin: 0;
      color: #355f64;
      font-size: 9.5px;
      font-weight: 700;
      line-height: 1.55;
      white-space: pre-line;
    }

    .codex-agent-thinking {
      display: none;
      align-items: center;
      gap: 4px;
      min-height: 22px;
    }

    .codex-agent-thinking i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #1aa699;
      animation: agent-phone-dot .76s ease-in-out infinite alternate;
    }

    .codex-agent-thinking i:nth-child(2) { animation-delay: .13s; }
    .codex-agent-thinking i:nth-child(3) { animation-delay: .26s; }

    .codex-agent-caret {
      display: none;
      width: 1.5px;
      height: 12px;
      margin-left: 2px;
      vertical-align: -2px;
      background: #138e98;
      animation: deepseek-sim-caret .72s steps(1, end) infinite;
    }

    .codex-mac-shot.is-thinking .codex-agent-thinking { display: flex; }
    .codex-mac-shot.is-thinking .codex-agent-copy > p { display: none; }
    .codex-mac-shot.is-answering .codex-agent-caret { display: inline-block; }

    .codex-mac-shot.has-question .codex-user-task,
    .codex-mac-shot.has-answer .codex-agent-message,
    .codex-mac-shot.is-complete .codex-delivery {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .codex-delivery {
      margin: 10px 0 0 36px;
      border-color: rgba(34, 165, 116, .17);
      color: #267053;
      background: rgba(225, 250, 237, .9);
      font-size: 8.5px;
    }

    .codex-delivery i {
      color: #fff;
      background: #27ad79;
      box-shadow: 0 0 0 4px rgba(39, 173, 121, .1);
    }

    .codex-change-panel {
      min-height: 0;
      padding: 10px;
      border-left-color: rgba(30, 114, 123, .1);
      background: linear-gradient(180deg, #eef8fc, #edf9f4);
    }

    .codex-change-tabs {
      margin-bottom: 8px;
      color: #78979b;
    }

    .codex-change-tabs strong { color: #216970; }
    .codex-change-tabs span { color: #15999b; }

    .codex-action-list {
      display: grid;
      gap: 5px;
    }

    .codex-action-row {
      grid-template-columns: 24px minmax(0, 1fr) auto;
      gap: 7px;
      min-height: 37px;
      padding: 5px 7px;
      opacity: .48;
      border: 1px solid rgba(34, 121, 129, .09);
      border-radius: 10px;
      color: #52777b;
      background: rgba(255, 255, 255, .48);
      transform: translate3d(0, 0, 0);
      transition: opacity .22s ease, border-color .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
    }

    .codex-action-row b {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border: 1px solid rgba(33, 128, 136, .13);
      border-radius: 7px;
      color: #5b878a;
      background: rgba(255, 255, 255, .68);
      font-size: 7px;
      letter-spacing: .04em;
    }

    .codex-action-row span {
      font-size: 8.5px;
      font-weight: 820;
    }

    .codex-action-row small {
      color: #8aa3a5;
      font-size: 7px;
      font-weight: 850;
    }

    .codex-action-row.is-active {
      opacity: 1;
      border-color: rgba(25, 151, 166, .3);
      color: #116979;
      background: rgba(230, 250, 255, .92);
      box-shadow: 0 8px 18px rgba(39, 142, 154, .12);
      transform: translate3d(-3px, 0, 0);
    }

    .codex-action-row.is-active b {
      border-color: rgba(20, 142, 159, .3);
      color: #fff;
      background: linear-gradient(145deg, #40bcdc, #138ba6);
      box-shadow: 0 0 0 4px rgba(54, 176, 203, .08);
    }

    .codex-action-row.is-active small { color: #15839a; }

    .codex-action-row.is-done {
      opacity: 1;
      border-color: rgba(34, 164, 115, .2);
      color: #246c51;
      background: rgba(232, 251, 241, .88);
    }

    .codex-action-row.is-done b {
      border-color: rgba(34, 164, 115, .23);
      color: #fff;
      background: #2daf7a;
    }

    .codex-action-row.is-done small { color: #2b8a67; }

    .codex-live-tool {
      display: grid;
      margin-top: 8px;
      padding: 9px 10px;
      border: 1px solid rgba(31, 128, 139, .13);
      border-radius: 11px;
      color: #426e73;
      background: rgba(255, 255, 255, .68);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76);
    }

    .codex-live-tool span {
      color: #168e97;
      font-size: 7px;
      font-weight: 950;
      letter-spacing: .12em;
    }

    .codex-live-tool strong {
      margin-top: 4px;
      color: #245a60;
      font-size: 9px;
    }

    .codex-live-tool small {
      margin-top: 3px;
      color: #789699;
      font-size: 7px;
      font-weight: 720;
      line-height: 1.35;
    }

    .codex-prompt-composer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36px;
      align-items: center;
      gap: 8px;
      padding: 7px 11px;
      border-top: 1px solid rgba(31, 114, 123, .1);
      background: rgba(255, 255, 255, .92);
    }

    .codex-prompt-composer textarea {
      width: 100%;
      height: 42px;
      min-height: 42px;
      max-height: 42px;
      padding: 7px 10px;
      overflow: hidden;
      resize: none;
      border: 1px solid rgba(28, 128, 137, .17);
      border-radius: 12px;
      color: #285259;
      background: #f8fffd;
      box-shadow: 0 5px 14px rgba(35, 112, 119, .06);
      font: 740 9px/1.45 inherit;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .codex-prompt-composer textarea:hover,
    .codex-prompt-composer textarea:focus {
      border-color: rgba(18, 143, 153, .34);
      background: #fff;
      box-shadow: 0 7px 18px rgba(32, 127, 135, .1);
    }

    .codex-prompt-composer button {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 0;
      border-radius: 11px;
      cursor: pointer;
      color: #fff;
      background: linear-gradient(145deg, #40c7a4, #118ea3);
      box-shadow: 0 8px 18px rgba(18, 137, 148, .24);
      transition: filter .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease;
    }

    .codex-prompt-composer button:hover:not(:disabled) {
      filter: saturate(1.08) brightness(1.04);
      box-shadow: 0 10px 22px rgba(18, 137, 148, .3);
    }

    .codex-prompt-composer button:active:not(:disabled) { transform: translateY(1px); }

    .codex-prompt-composer button:disabled {
      cursor: progress;
      opacity: .55;
      box-shadow: none;
    }

    .codex-prompt-composer svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .codex-mac-status {
      border-top-color: rgba(32, 113, 122, .08);
      color: #79979a;
      background: #edf7f5;
    }

    .codex-mac-status strong { color: #258069; }

    .codex-mac-shot figcaption {
      align-items: center;
      color: #52797d;
      font-size: 8.5px;
    }

    .codex-mac-shot figcaption strong {
      color: #138b92;
      font-size: 9px;
      letter-spacing: .02em;
    }

    @media (prefers-reduced-motion: reduce) {
      .codex-agent-thinking i,
      .codex-agent-caret { animation: none !important; }

      .codex-user-task,
      .codex-agent-message,
      .codex-delivery,
      .codex-action-row { transition: none !important; }
    }

    /* Page 10 · task history, file delivery and detached execution trace */
    .agent-showcase-stage {
      grid-template-columns: 286px 50px minmax(0, 1fr) 238px;
      gap: 12px;
    }

    .agent-phone-chat {
      background: linear-gradient(180deg, #f8fffd 0%, #eef9f7 100%);
      background-size: auto;
    }

    .agent-phone-empty {
      top: 46%;
    }

    .agent-phone-empty strong {
      max-width: 180px;
      margin-top: 12px;
      font-size: 15px;
      letter-spacing: -.02em;
    }

    .codex-mac-shot,
    .codex-trace-panel {
      position: relative;
      z-index: 2;
    }

    .codex-mac-shot {
      min-width: 0;
    }

    .codex-mac-workspace {
      grid-template-columns: 132px minmax(0, 1fr);
    }

    .codex-mac-sidebar {
      padding: 10px 8px;
    }

    .codex-new-task,
    button.codex-project-item {
      width: 100%;
      border: 0;
      appearance: none;
      -webkit-appearance: none;
      font-family: inherit;
      text-align: left;
    }

    .codex-new-task {
      cursor: pointer;
      transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .codex-new-task:hover,
    .codex-new-task.active {
      border-color: rgba(25, 151, 155, .28);
      color: #116a70;
      background: rgba(255, 255, 255, .94);
      box-shadow: inset 2px 0 0 #20af9e, 0 6px 16px rgba(31, 120, 126, .09);
    }

    .codex-new-task:active,
    button.codex-project-item:active {
      transform: translateY(1px);
    }

    button.codex-project-item {
      grid-template-columns: 7px minmax(0, 1fr) auto;
      min-height: 31px;
      padding: 0 7px;
      cursor: pointer;
      background: transparent;
      transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    button.codex-project-item span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    button.codex-project-item small {
      color: #81a0a3;
      font-size: 6px;
      font-weight: 900;
      white-space: nowrap;
    }

    button.codex-project-item:hover {
      color: #21666c;
      background: rgba(255, 255, 255, .6);
    }

    button.codex-project-item.active small {
      color: #199178;
    }

    .codex-new-task:focus-visible,
    button.codex-project-item:focus-visible,
    .codex-file-result a:focus-visible {
      outline: 2px solid #168fa5;
      outline-offset: 2px;
    }

    .codex-mac-content {
      grid-template-columns: minmax(0, 1fr);
    }

    .codex-transcript {
      padding: 10px 12px;
      overflow: hidden;
    }

    .codex-user-task {
      margin-left: 54px;
      padding: 8px 10px;
      font-size: 9px;
      line-height: 1.42;
    }

    .codex-agent-message {
      margin-top: 8px;
    }

    .codex-agent-copy {
      min-height: 82px;
      padding: 8px 9px;
    }

    .codex-agent-copy > p {
      min-height: 42px;
      color: #315a60;
      font-size: 8.4px;
      font-weight: 690;
      line-height: 1.46;
    }

    .codex-file-result {
      display: none;
      grid-template-columns: 31px minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      min-width: 0;
      margin-top: 8px;
      padding: 7px 8px;
      border: 1px solid rgba(31, 139, 126, .16);
      border-radius: 11px;
      background: linear-gradient(135deg, rgba(236, 253, 246, .98), rgba(241, 250, 255, .96));
      box-shadow: 0 7px 18px rgba(33, 120, 123, .08);
    }

    .codex-file-type {
      display: grid;
      place-items: center;
      width: 31px;
      height: 31px;
      border-radius: 9px;
      color: #fff;
      background: linear-gradient(145deg, #21b397, #1686a1);
      box-shadow: 0 6px 14px rgba(22, 134, 161, .2);
      font-size: 6px;
      font-weight: 950;
      letter-spacing: .04em;
    }

    .codex-file-copy {
      display: grid;
      min-width: 0;
    }

    .codex-file-copy strong {
      overflow: hidden;
      color: #205960;
      font-size: 7.6px;
      font-weight: 900;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .codex-file-copy small {
      margin-top: 3px;
      color: #719195;
      font-size: 6.4px;
      font-weight: 720;
    }

    .codex-file-result a {
      padding: 5px 7px;
      border: 1px solid rgba(25, 137, 145, .18);
      border-radius: 8px;
      color: #147d85;
      background: rgba(255, 255, 255, .76);
      font-size: 7px;
      font-weight: 900;
      text-decoration: none;
      white-space: nowrap;
      transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
    }

    .codex-file-result a:hover,
    .agent-showcase-stage.file-link-opened .codex-file-result a {
      border-color: rgba(20, 145, 139, .32);
      color: #0c6f67;
      background: #fff;
      transform: translateY(-1px);
    }

    .codex-delivery {
      margin: 8px 0 0 36px;
      padding: 7px 9px;
      font-size: 8px;
    }

    .agent-showcase-stage.is-running .codex-thread-head em {
      border-color: rgba(25, 140, 175, .24);
      color: #0d7695;
      background: rgba(76, 184, 221, .12);
    }

    .agent-showcase-stage.is-complete .codex-thread-head em,
    .agent-showcase-stage.is-history .codex-thread-head em {
      border-color: rgba(38, 164, 113, .22);
      color: #187149;
      background: rgba(63, 196, 132, .11);
    }

    .agent-showcase-stage.is-thinking .codex-agent-thinking { display: flex; }
    .agent-showcase-stage.is-thinking .codex-agent-copy > p { display: none; }
    .agent-showcase-stage.is-answering .codex-agent-caret { display: inline-block; }

    .agent-showcase-stage.has-question .codex-user-task,
    .agent-showcase-stage.has-answer .codex-agent-message,
    .agent-showcase-stage.is-complete .codex-delivery,
    .agent-showcase-stage.is-history .codex-delivery {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .agent-showcase-stage.is-complete .codex-file-result,
    .agent-showcase-stage.is-history .codex-file-result {
      display: grid;
    }

    .codex-prompt-composer textarea::placeholder {
      color: #77999d;
      opacity: 1;
    }

    .codex-trace-panel {
      align-self: start;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto auto;
      gap: 10px;
      width: 100%;
      height: calc(100% - 30px);
      padding: 13px 11px;
      overflow: hidden;
      border: 1px solid rgba(52, 139, 150, .21);
      border-radius: 22px;
      color: #35666c;
      background:
        radial-gradient(circle at 100% 0%, rgba(71, 190, 215, .15), transparent 34%),
        linear-gradient(180deg, rgba(247, 253, 255, .98), rgba(234, 249, 245, .98));
      box-shadow: 0 22px 48px rgba(39, 112, 122, .15), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

    .codex-trace-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .54);
      pointer-events: none;
    }

    .codex-trace-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 2px 3px 9px;
      border-bottom: 1px solid rgba(30, 119, 128, .1);
    }

    .codex-trace-head > span {
      display: grid;
    }

    .codex-trace-head strong {
      color: #165b63;
      font-size: 11px;
      font-weight: 950;
    }

    .codex-trace-head small {
      margin-top: 3px;
      color: #7d9da1;
      font-size: 6px;
      font-weight: 900;
      letter-spacing: .13em;
    }

    .codex-trace-head em {
      padding: 5px 7px;
      border: 1px solid rgba(26, 151, 151, .2);
      border-radius: 999px;
      color: #178083;
      background: rgba(55, 190, 171, .1);
      font-size: 7px;
      font-style: normal;
      font-weight: 950;
      letter-spacing: .12em;
    }

    .codex-trace-panel .codex-action-list {
      align-content: start;
      gap: 7px;
    }

    .codex-trace-panel .codex-action-row {
      grid-template-columns: 25px minmax(0, 1fr) auto;
      min-height: 43px;
      padding: 6px 7px;
      border-radius: 11px;
    }

    .codex-trace-panel .codex-action-row span {
      font-size: 8.2px;
      line-height: 1.3;
    }

    .codex-trace-panel .codex-action-row small {
      font-size: 6.5px;
    }

    .codex-trace-panel .codex-live-tool {
      margin-top: 0;
      padding: 9px;
    }

    .codex-trace-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 3px 0;
      border-top: 1px solid rgba(30, 119, 128, .1);
      color: #739396;
      font-size: 6.5px;
      font-weight: 800;
    }

    .codex-trace-foot strong {
      color: #1d7f72;
      font-size: 7px;
      white-space: nowrap;
    }

    /* Page 11 · readable typography inside the intelligent-agent dialog */
    [data-codex-agent-demo] .codex-mac-shot .codex-mac-title {
      font-size: 13px;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-mac-titlebar > small {
      font-size: 9.5px;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-mac-brand {
      font-size: 13.5px;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-new-task {
      font-size: 11.5px;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-sidebar-label {
      font-size: 8.5px;
    }

    [data-codex-agent-demo] .codex-mac-shot button.codex-project-item {
      font-size: 10.5px;
    }

    [data-codex-agent-demo] .codex-mac-shot button.codex-project-item small {
      font-size: 7.5px;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-thread-head strong {
      font-size: 15px;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-thread-head small,
    [data-codex-agent-demo] .codex-mac-shot .codex-thread-head em {
      font-size: 9.5px;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-user-task,
    [data-codex-agent-demo] .codex-mac-shot .codex-agent-copy > p {
      font-size: 12.5px;
      line-height: 1.5;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-file-type {
      font-size: 7.5px;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-file-copy strong {
      font-size: 10.5px;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-file-copy small {
      font-size: 9px;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-file-result a {
      font-size: 9.5px;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-delivery {
      font-size: 10.5px;
      line-height: 1.4;
    }

    [data-codex-agent-demo] .codex-mac-shot .codex-mac-status {
      font-size: 9px;
    }

    [data-codex-agent-demo] .codex-mac-shot figcaption,
    [data-codex-agent-demo] .codex-mac-shot figcaption strong {
      font-size: 10.5px;
    }

    /* Page 35 · AI interactive courseware generation example */
    .courseware-generation-slide .slide-head h2 {
      font-size: 45px;
      letter-spacing: -.045em;
    }

    .courseware-generation-stage {
      grid-template-columns: minmax(0, 1fr) 286px;
      gap: 16px;
      height: 625px;
      padding: 0;
      overflow: visible;
      border: 0;
      border-radius: 0;
      color: #214b54;
      background: transparent;
      box-shadow: none;
    }

    .courseware-generation-stage::before {
      content: none;
      display: none;
    }

    .courseware-generation-stage .codex-mac-shot {
      grid-column: auto;
      grid-template-rows: minmax(0, 1fr);
      height: 100%;
    }

    .courseware-generation-stage .codex-mac-frame {
      border-color: rgba(42, 133, 145, .26);
      border-radius: 27px;
      box-shadow: 0 24px 54px rgba(34, 105, 116, .2), 0 0 34px rgba(76, 180, 192, .1), inset 0 1px 0 rgba(255, 255, 255, .98);
    }

    .courseware-generation-stage .codex-mac-workspace {
      grid-template-columns: 198px minmax(0, 1fr);
    }

    .courseware-generation-stage .codex-mac-sidebar {
      padding: 13px 11px;
      overflow-x: hidden;
      overflow-y: auto;
      background: linear-gradient(180deg, #ecf9f5, #e7f2f6);
    }

    .courseware-generation-stage .codex-mac-brand {
      padding-bottom: 12px;
      font-size: 14px;
    }

    .courseware-generation-stage .codex-new-task {
      min-height: 42px;
      padding: 0 11px;
      border-radius: 12px;
      font-size: 13px;
    }

    .courseware-generation-stage .codex-sidebar-label {
      margin: 10px 7px 5px;
      color: #5f858b;
      font-size: 9px;
      letter-spacing: .16em;
    }

    .courseware-generation-stage button.codex-project-item {
      grid-template-columns: 9px minmax(0, 1fr) auto;
      min-height: 40px;
      margin-top: 2px;
      padding: 0 10px;
      border-radius: 12px;
      color: #3d6870;
      font-size: 12.5px;
    }

    .courseware-generation-stage button.codex-project-item small {
      padding: 4px 6px;
      border-radius: 7px;
      color: #648a90;
      background: rgba(255, 255, 255, .7);
      font-size: 8px;
    }

    .courseware-generation-stage [data-codex-history="deck"] i { background: #258fb4; }
    .courseware-generation-stage [data-codex-history="visual"] i { background: #6d5ac0; }
    .courseware-generation-stage [data-codex-history="page11"] i { background: #1c9a82; }
    .courseware-generation-stage [data-codex-history="motion"] i { background: #d48b31; }
    .courseware-generation-stage [data-codex-history="mobile"] i { background: #5683ba; }
    .courseware-generation-stage [data-codex-history="canine-video"] i { background: #b76c53; }
    .courseware-generation-stage [data-codex-history="anatomy"] i { background: #c85868; }
    .courseware-generation-stage [data-codex-history="cube"] i { background: #9a58bd; }
    .courseware-generation-stage [data-codex-history="combustion"] i { background: #dc6d37; }
    .courseware-generation-stage [data-codex-history="reagent"] i { background: #2a9f96; }

    .courseware-generation-stage .codex-history-conversation {
      display: none;
      gap: 7px;
      margin-bottom: 9px;
    }

    .courseware-generation-stage .codex-transcript {
      position: relative;
    }

    .courseware-generation-stage .codex-empty-prompt {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 28px 18px;
      color: #54767b;
      font-size: 24px;
      font-weight: 780;
      letter-spacing: -.025em;
      line-height: 1.35;
      text-align: center;
      pointer-events: none;
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: opacity .2s ease, transform .26s ease, visibility .2s ease;
    }

    .courseware-generation-stage.has-question .codex-empty-prompt {
      visibility: hidden;
      opacity: 0;
      transform: translate3d(0, -8px, 0);
    }

    .courseware-generation-stage.has-multi-turn .codex-history-conversation {
      display: grid;
    }

    .courseware-generation-stage.has-multi-turn .codex-transcript {
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-color: rgba(37, 132, 137, .26) transparent;
      scrollbar-width: thin;
    }

    .courseware-generation-stage .codex-history-turn {
      display: grid;
      gap: 5px;
    }

    .courseware-generation-stage .codex-history-message {
      display: grid;
      gap: 3px;
      max-width: 88%;
      padding: 7px 10px;
      border: 1px solid rgba(34, 121, 129, .11);
      border-radius: 12px;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 5px 14px rgba(34, 112, 119, .055);
    }

    .courseware-generation-stage .codex-history-message.is-user {
      justify-self: end;
      border-radius: 12px 4px 12px 12px;
      border-color: rgba(66, 116, 176, .14);
      background: linear-gradient(135deg, rgba(239, 247, 255, .94), rgba(250, 253, 255, .96));
    }

    .courseware-generation-stage .codex-history-message.is-agent {
      justify-self: start;
      border-radius: 4px 12px 12px 12px;
      border-color: rgba(31, 148, 132, .13);
      background: linear-gradient(135deg, rgba(237, 251, 246, .93), rgba(255, 255, 255, .93));
    }

    .courseware-generation-stage .codex-history-message small {
      color: #6e8b90;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: .06em;
    }

    .courseware-generation-stage .codex-history-message.is-agent small { color: #208478; }

    .courseware-generation-stage .codex-history-message p {
      margin: 0;
      color: #355e65;
      font-size: 10.5px;
      font-weight: 740;
      line-height: 1.48;
    }

    .courseware-generation-stage.has-multi-turn .codex-user-task,
    .courseware-generation-stage.has-multi-turn .codex-agent-copy > p {
      font-size: 11.5px;
      line-height: 1.46;
    }

    .courseware-generation-stage.has-multi-turn .codex-user-task {
      margin-left: 72px;
      padding: 8px 10px;
    }

    .courseware-generation-stage.has-multi-turn .codex-history-message.is-user {
      gap: 0;
    }

    .courseware-generation-stage.has-multi-turn .codex-history-message.is-user small {
      display: none;
    }

    .courseware-generation-stage.has-multi-turn .codex-user-task {
      width: fit-content;
      max-width: 88%;
      margin-left: auto;
      padding: 7px 10px;
      border: 1px solid rgba(66, 116, 176, .14);
      border-radius: 12px 4px 12px 12px;
      color: #355e65;
      background: linear-gradient(135deg, rgba(239, 247, 255, .94), rgba(250, 253, 255, .96));
      box-shadow: 0 5px 14px rgba(34, 112, 119, .055);
      font-size: 10.5px;
      font-weight: 740;
      line-height: 1.48;
      text-align: left;
    }

    .courseware-generation-stage.has-multi-turn .codex-agent-message { margin-top: 7px; }
    .courseware-generation-stage.has-multi-turn .codex-agent-copy { min-height: 0; }
    .courseware-generation-stage.has-multi-turn .codex-agent-copy > p { min-height: 0; }
    .courseware-generation-stage.has-multi-turn .codex-delivery { margin-top: 7px; }

    .courseware-generation-stage [data-codex-generated-task] {
      color: #3d6870;
      background: transparent;
      box-shadow: none;
    }

    .courseware-generation-stage [data-codex-generated-task] i {
      background: #87aeb0;
      box-shadow: none;
    }

    .courseware-generation-stage [data-codex-generated-task].active {
      color: #125e64;
      background: linear-gradient(135deg, rgba(224, 250, 244, .98), rgba(255, 255, 255, .96));
      box-shadow: inset 3px 0 0 #1fae9c, 0 8px 20px rgba(31, 120, 126, .14);
      transform: translateX(2px);
    }

    .courseware-generation-stage [data-codex-generated-task].active i {
      background: linear-gradient(145deg, #21b79d, #d9a03d);
      box-shadow: 0 0 10px rgba(37, 174, 151, .34);
    }

    .courseware-generation-stage [data-codex-generated-task][disabled] {
      cursor: progress;
      opacity: .74;
    }

    .courseware-generation-stage .codex-thread-head strong { font-size: 16px; }
    .courseware-generation-stage .codex-thread-head small,
    .courseware-generation-stage .codex-thread-head em { font-size: 10px; }
    .courseware-generation-stage .codex-user-task,
    .courseware-generation-stage .codex-agent-copy > p { font-size: 13px; line-height: 1.5; }
    .courseware-generation-stage .codex-prompt-composer textarea { font-size: 12.5px; line-height: 1.45; }
    .courseware-generation-stage .codex-mac-status { font-size: 9.5px; }

    .courseware-generation-stage .codex-trace-panel {
      height: 100%;
      border-color: rgba(43, 132, 145, .24);
      background:
        radial-gradient(circle at 100% 0%, rgba(91, 187, 211, .19), transparent 34%),
        linear-gradient(180deg, rgba(248, 253, 255, .99), rgba(233, 248, 244, .98));
    }

    .courseware-generation-stage .codex-trace-head strong { font-size: 14px; }
    .courseware-generation-stage .codex-trace-head small { font-size: 7.5px; }
    .courseware-generation-stage .codex-trace-head em { font-size: 8px; }
    .courseware-generation-stage .codex-trace-panel .codex-action-row { min-height: 52px; }
    .courseware-generation-stage .codex-trace-panel .codex-action-row span { font-size: 11px; }
    .courseware-generation-stage .codex-trace-panel .codex-action-row small { font-size: 8px; }
    .courseware-generation-stage .codex-trace-panel .codex-live-tool strong { font-size: 11px; }
    .courseware-generation-stage .codex-trace-panel .codex-live-tool small { font-size: 8.5px; line-height: 1.4; }
    .courseware-generation-stage .codex-trace-foot { font-size: 8px; }
    .courseware-generation-stage .codex-trace-foot strong { font-size: 8.5px; }

    @media (prefers-reduced-motion: reduce) {
      .codex-file-result a,
      .codex-new-task,
      button.codex-project-item { transition: none !important; }
    }

    .courseware-preview-modal {
      position: fixed;
      inset: 0;
      z-index: 3210;
      display: grid;
      place-items: center;
      width: 100vw;
      height: 100vh;
      max-width: none;
      max-height: none;
      margin: 0;
      padding: clamp(18px, 3vw, 48px);
      border: 0;
      overflow: visible;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .2), transparent 52%),
        linear-gradient(135deg, rgba(247, 242, 232, .3), rgba(239, 238, 226, .26));
      -webkit-backdrop-filter: blur(13px) saturate(1.02);
      backdrop-filter: blur(13px) saturate(1.02);
      transition: opacity .22s ease, visibility .22s ease;
    }

    .courseware-preview-modal:not([open]) { display: none; }
    .courseware-preview-modal::backdrop { background: transparent; }

    .courseware-preview-modal.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .courseware-preview-dialog {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: 66px minmax(0, 1fr);
      width: min(1680px, 94vw);
      height: min(920px, 88vh);
      overflow: hidden;
      border: 1px solid rgba(143, 119, 78, .28);
      border-radius: 28px;
      background: #f7f2e8;
      box-shadow:
        0 44px 120px rgba(80, 63, 38, .2),
        0 0 0 1px rgba(255, 255, 255, .94) inset,
        0 0 52px rgba(193, 164, 111, .15);
      transform: translateY(18px) scale(.978);
      transition: transform .28s cubic-bezier(.2, .82, .2, 1);
    }

    .courseware-preview-depth-layer {
      position: fixed;
      inset: 0;
      z-index: 3;
      overflow: visible;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .24s ease, visibility .24s ease;
    }

    .courseware-preview-depth-layer[data-active="true"] {
      opacity: 1;
      visibility: visible;
    }

    .courseware-preview-depth-layer canvas {
      position: absolute;
      display: block;
      max-width: none;
      max-height: none;
      pointer-events: none;
    }

    .courseware-preview-modal.open .courseware-preview-dialog {
      transform: translateY(0) scale(1);
    }

    .courseware-preview-titlebar {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 0 18px 0 25px;
      border-bottom: 1px solid rgba(112, 91, 57, .14);
      background: rgba(255, 255, 255, .68);
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
      backdrop-filter: blur(18px) saturate(1.08);
    }

    .courseware-preview-titlebar > span {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .courseware-preview-titlebar small {
      color: #168b88;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .18em;
    }

    .courseware-preview-titlebar strong {
      overflow: hidden;
      color: #173b4c;
      font-size: 17px;
      font-weight: 900;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .courseware-preview-close {
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 1px solid rgba(73, 94, 111, .2);
      border-radius: 50%;
      color: #314755;
      background: rgba(255, 255, 255, .8);
      box-shadow: 0 8px 22px rgba(86, 68, 41, .12), inset 0 1px 0 #fff;
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }

    .courseware-preview-close:hover,
    .courseware-preview-close:focus-visible {
      border-color: rgba(53, 80, 101, .48);
      background: #fff;
      transform: scale(1.06);
      outline: none;
    }

    .courseware-preview-close svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
    }

    .courseware-preview-frame {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      background: #f7f2e8;
    }

    .courseware-preview-modal[data-preview-variant="video"],
    .courseware-preview-modal[data-preview-variant="anatomy"],
    .courseware-preview-modal[data-preview-variant="reagent"],
    .courseware-preview-modal[data-preview-variant="cube"],
    .courseware-preview-modal[data-preview-variant="combustion"] {
      background:
        radial-gradient(circle at 50% 48%, rgba(231, 224, 217, .14), rgba(231, 224, 217, .34) 72%),
        rgba(231, 224, 217, .18);
      -webkit-backdrop-filter: blur(10px) saturate(.85) brightness(1.01);
      backdrop-filter: blur(10px) saturate(.85) brightness(1.01);
    }

    .courseware-preview-modal[data-preview-variant="video"] .courseware-preview-dialog {
      grid-template-rows: 58px minmax(0, 1fr);
      width: auto;
      max-width: 84vw;
      height: min(1040px, 94vh);
      aspect-ratio: 3 / 4;
      border-color: rgba(111, 89, 73, .22);
      border-radius: 26px;
      background: #e7e0d9;
      box-shadow:
        0 42px 110px rgba(86, 67, 52, .2),
        0 0 0 1px rgba(255, 255, 255, .46) inset;
    }

    .courseware-preview-modal[data-preview-variant="video"] .courseware-preview-titlebar {
      border-bottom-color: rgba(111, 89, 73, .12);
      background: rgba(231, 224, 217, .94);
      -webkit-backdrop-filter: blur(18px) saturate(.92);
      backdrop-filter: blur(18px) saturate(.92);
    }

    .courseware-preview-modal[data-preview-variant="video"] .courseware-preview-titlebar small { color: #8e6756; }
    .courseware-preview-modal[data-preview-variant="video"] .courseware-preview-titlebar strong { color: #433b36; }

    .courseware-preview-modal[data-preview-variant="video"] .courseware-preview-close {
      border-color: rgba(103, 82, 68, .18);
      color: #574943;
      background: rgba(250, 247, 243, .68);
      box-shadow: 0 8px 22px rgba(86, 68, 55, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
    }

    .courseware-preview-modal[data-preview-variant="video"] .courseware-preview-frame { background: #e7e0d9; }

    .courseware-preview-modal[data-preview-variant="cube"] {
      padding: clamp(10px, 1.5vw, 24px);
    }

    .courseware-preview-modal[data-preview-variant="cube"] .courseware-preview-dialog {
      grid-template-rows: 58px minmax(0, 1fr);
      width: min(1780px, 97vw);
      height: min(1000px, 95vh);
      border-color: rgba(143, 119, 78, .28);
      border-radius: 24px;
      background: #f7f2e8;
      box-shadow:
        0 44px 120px rgba(80, 63, 38, .2),
        0 0 0 1px rgba(255, 255, 255, .94) inset,
        0 0 52px rgba(193, 164, 111, .15);
    }

    .courseware-preview-modal[data-preview-variant="cube"] .courseware-preview-titlebar {
      border-bottom-color: rgba(112, 91, 57, .14);
      background: rgba(255, 255, 255, .68);
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
      backdrop-filter: blur(18px) saturate(1.08);
    }

    .courseware-preview-modal[data-preview-variant="cube"] .courseware-preview-titlebar small { color: #168b88; }
    .courseware-preview-modal[data-preview-variant="cube"] .courseware-preview-titlebar strong { color: #173b4c; }

    .courseware-preview-modal[data-preview-variant="cube"] .courseware-preview-close {
      border-color: rgba(73, 94, 111, .2);
      color: #314755;
      background: rgba(255, 255, 255, .8);
      box-shadow: 0 8px 22px rgba(86, 68, 41, .12), inset 0 1px 0 #fff;
    }

    .courseware-preview-modal[data-preview-variant="cube"] .courseware-preview-close:hover,
    .courseware-preview-modal[data-preview-variant="cube"] .courseware-preview-close:focus-visible {
      border-color: rgba(53, 80, 101, .48);
      background: #fff;
    }

    .courseware-preview-modal[data-preview-variant="cube"] .courseware-preview-frame { background: #f7f2e8; }

    .courseware-preview-modal[data-preview-variant="combustion"] {
      padding: clamp(10px, 1.5vw, 24px);
    }

    .courseware-preview-modal[data-preview-variant="combustion"] .courseware-preview-dialog {
      grid-template-rows: 58px minmax(0, 1fr);
      width: min(1780px, 97vw);
      height: min(1000px, 95vh);
      border-color: rgba(143, 119, 78, .28);
      border-radius: 24px;
      background: #f7f2e8;
      box-shadow:
        0 44px 120px rgba(80, 63, 38, .2),
        0 0 0 1px rgba(255, 255, 255, .94) inset,
        0 0 52px rgba(193, 164, 111, .15);
    }

    .courseware-preview-modal[data-preview-variant="combustion"] .courseware-preview-titlebar {
      border-bottom-color: rgba(112, 91, 57, .14);
      background: rgba(255, 255, 255, .68);
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
      backdrop-filter: blur(18px) saturate(1.08);
    }

    .courseware-preview-modal[data-preview-variant="combustion"] .courseware-preview-titlebar small { color: #168b88; }
    .courseware-preview-modal[data-preview-variant="combustion"] .courseware-preview-titlebar strong { color: #173b4c; }

    .courseware-preview-modal[data-preview-variant="combustion"] .courseware-preview-close {
      border-color: rgba(73, 94, 111, .2);
      color: #314755;
      background: rgba(255, 255, 255, .8);
      box-shadow: 0 8px 22px rgba(86, 68, 41, .12), inset 0 1px 0 #fff;
    }

    .courseware-preview-modal[data-preview-variant="combustion"] .courseware-preview-close:hover,
    .courseware-preview-modal[data-preview-variant="combustion"] .courseware-preview-close:focus-visible {
      border-color: rgba(53, 80, 101, .48);
      background: #fff;
    }

    .courseware-preview-modal[data-preview-variant="combustion"] .courseware-preview-frame { background: #f7f2e8; }

    .solar-system-modal {
      position: fixed;
      inset: 0;
      z-index: 3200;
      display: grid;
      place-items: center;
      width: 100vw;
      height: 100vh;
      max-width: none;
      max-height: none;
      margin: 0;
      padding: clamp(18px, 3vw, 48px);
      border: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .2), transparent 50%),
        linear-gradient(135deg, rgba(247, 243, 233, .3), rgba(236, 243, 246, .26));
      -webkit-backdrop-filter: blur(13px) saturate(1.03);
      backdrop-filter: blur(13px) saturate(1.03);
      transition: opacity .24s ease, visibility .24s ease;
    }

    .solar-system-modal:not([open]) { display: none; }

    .solar-system-modal::backdrop { background: transparent; }

    .solar-system-modal.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .solar-system-modal-dialog {
      position: relative;
      width: min(1680px, 94vw);
      height: min(920px, 88vh);
      overflow: hidden;
      border: 1px solid rgba(143, 119, 78, .3);
      border-radius: 28px;
      background: #f7f2e8;
      box-shadow:
        0 44px 120px rgba(80, 63, 38, .2),
        0 0 0 1px rgba(255, 255, 255, .92) inset,
        0 0 52px rgba(193, 164, 111, .16);
      transform: translateY(18px) scale(.975);
      transition: transform .3s cubic-bezier(.2, .82, .2, 1);
    }

    .solar-system-modal-dialog::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: inherit;
      box-shadow:
        inset 0 0 0 1px rgba(117, 91, 51, .1),
        inset 0 0 68px rgba(190, 164, 118, .13);
      pointer-events: none;
    }

    .solar-system-modal.open .solar-system-modal-dialog {
      transform: translateY(0) scale(1);
    }

    .solar-system-modal-frame {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      background: #f7f2e8;
    }

    .solar-system-depth-layer {
      position: fixed;
      inset: 0;
      z-index: 3690;
      overflow: visible;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      isolation: isolate;
      contain: layout style;
      will-change: opacity;
      transition: opacity .16s ease, visibility .16s ease;
    }

    html.solar-modal-open .solar-system-depth-layer.has-foreground,
    html.solar-modal-open .solar-system-depth-layer.has-orbit-overflow {
      opacity: 1;
      visibility: visible;
    }

    .solar-system-depth-layer canvas {
      position: absolute;
      display: block;
      max-width: none;
      max-height: none;
      border: 0;
      background: transparent;
      pointer-events: none;
      transform: translateZ(0);
    }

    .solar-system-depth-hit-layer {
      position: fixed;
      inset: 0;
      pointer-events: none;
    }

    .solar-system-depth-hit-target {
      position: absolute;
      display: block;
      border-radius: 50%;
      background: transparent;
      pointer-events: auto;
      cursor: grab;
      transform: translate(-50%, -50%);
      touch-action: none;
    }

    .solar-system-depth-hit-target.is-dragging { cursor: grabbing; }

    .solar-system-modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 4;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      padding: 0;
      border: 1px solid rgba(73, 94, 111, .28);
      border-radius: 50%;
      color: #243444;
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 10px 30px rgba(86, 68, 41, .16), inset 0 1px 0 rgba(255, 255, 255, .96);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      cursor: pointer;
      transition: border-color .2s ease, background .2s ease, transform .2s ease;
    }

    .solar-system-modal-close:hover,
    .solar-system-modal-close:focus-visible {
      border-color: rgba(53, 80, 101, .52);
      background: #fff;
      transform: scale(1.06);
      outline: none;
    }

    .solar-system-modal-close svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
    }

    .solar-system-motion-toggle {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 126px;
      height: 46px;
      padding: 0 16px;
      border: 1px solid rgba(73, 94, 111, .28);
      border-radius: 999px;
      color: #243444;
      background: rgba(255, 255, 255, .84);
      box-shadow: 0 10px 30px rgba(86, 68, 41, .14), inset 0 1px 0 rgba(255, 255, 255, .96);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      cursor: pointer;
      transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .solar-system-motion-toggle:hover,
    .solar-system-motion-toggle:focus-visible {
      border-color: rgba(53, 80, 101, .52);
      background: #fff;
      box-shadow: 0 12px 34px rgba(86, 68, 41, .18), 0 0 0 3px rgba(63, 122, 174, .12);
      outline: none;
    }

    .solar-system-motion-toggle svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .solar-system-motion-toggle span {
      font-size: 13px;
      font-weight: 850;
      letter-spacing: .02em;
    }

    .solar-system-motion-toggle .motion-play-icon { display: none; }
    .solar-system-motion-toggle[data-paused="true"] .motion-pause-icon { display: none; }
    .solar-system-motion-toggle[data-paused="true"] .motion-play-icon { display: block; }

    .solar-system-orbit-mode {
      position: absolute;
      top: 16px;
      left: 152px;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      height: 46px;
      padding: 4px;
      border: 1px solid rgba(73, 94, 111, .28);
      border-radius: 999px;
      background: rgba(255, 255, 255, .84);
      box-shadow: 0 10px 30px rgba(86, 68, 41, .14), inset 0 1px 0 rgba(255, 255, 255, .96);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }

    .solar-system-orbit-mode button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 86px;
      height: 36px;
      padding: 0 13px;
      border: 0;
      border-radius: 999px;
      color: #667684;
      background: transparent;
      font-size: 11.5px;
      font-weight: 850;
      letter-spacing: .02em;
      cursor: pointer;
      transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .solar-system-orbit-mode button:hover,
    .solar-system-orbit-mode button:focus-visible {
      color: #203749;
      background: rgba(235, 243, 247, .86);
      outline: none;
    }

    .solar-system-orbit-mode button[aria-pressed="true"] {
      color: #fff;
      background: linear-gradient(135deg, #256c88, #338f91);
      box-shadow: 0 7px 18px rgba(37, 108, 136, .24), inset 0 1px 0 rgba(255, 255, 255, .28);
    }

    .solar-system-orbit-mode button[aria-pressed="true"]::after {
      content: "";
      width: 5px;
      height: 5px;
      margin-left: 7px;
      border-radius: 50%;
      background: #c9ffdf;
      box-shadow: 0 0 9px rgba(201, 255, 223, .9);
    }

    .solar-system-reset-button {
      position: absolute;
      top: 16px;
      left: 350px;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-width: 88px;
      height: 46px;
      padding: 0 14px;
      border: 1px solid rgba(73, 94, 111, .28);
      border-radius: 999px;
      color: #243444;
      background: rgba(255, 255, 255, .84);
      box-shadow: 0 10px 30px rgba(86, 68, 41, .14), inset 0 1px 0 rgba(255, 255, 255, .96);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      cursor: pointer;
      transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .solar-system-reset-button:hover,
    .solar-system-reset-button:focus-visible {
      border-color: rgba(53, 80, 101, .52);
      background: #fff;
      box-shadow: 0 12px 34px rgba(86, 68, 41, .18), 0 0 0 3px rgba(63, 122, 174, .12);
      outline: none;
    }

    .solar-system-reset-button:active { transform: scale(.97); }

    .solar-system-reset-button svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .solar-system-reset-button span {
      font-size: 12.5px;
      font-weight: 850;
    }

    .solar-system-reset-button.is-resetting { animation: solarSystemResetPulse .5s ease; }

    @keyframes solarSystemResetPulse {
      0% { transform: scale(1); }
      45% { transform: scale(.94) rotate(-2deg); box-shadow: 0 0 0 7px rgba(51, 143, 145, .12); }
      100% { transform: scale(1); }
    }

    .solar-system-info-card {
      --body-accent: #1d4ed8;
      position: absolute;
      top: 82px;
      right: 18px;
      z-index: 4;
      display: flex;
      flex-direction: column;
      width: min(354px, calc(100% - 36px));
      max-height: calc(100% - 104px);
      padding: 17px 10px 13px 17px;
      overflow: hidden;
      border: 1px solid rgba(74, 89, 102, .22);
      border-radius: 20px;
      color: #20303f;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 24px 60px rgba(75, 61, 39, .18), inset 0 1px 0 rgba(255, 255, 255, .98);
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
      backdrop-filter: blur(18px) saturate(1.08);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(18px) scale(.97);
      transform-origin: 100% 0;
      transition: opacity .22s ease, visibility .22s ease, transform .26s cubic-bezier(.2, .8, .2, 1);
    }

    .solar-system-info-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      border-radius: 20px 0 0 20px;
      background: var(--body-accent);
    }

    .solar-system-info-card.show {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(0) scale(1);
    }

    .solar-system-info-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding-right: 6px;
    }

    .solar-system-info-identity {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 11px;
    }

    .solar-system-info-orb {
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255, 255, 255, .86);
      border-radius: 50%;
      background: radial-gradient(circle at 32% 28%, #fff 0 8%, var(--body-accent) 38%, #263748 118%);
      box-shadow: 0 8px 18px rgba(48, 59, 67, .18), inset -6px -7px 12px rgba(23, 31, 41, .18);
    }

    .solar-system-info-title {
      display: grid;
      min-width: 0;
      gap: 2px;
    }

    .solar-system-info-title small {
      color: #6b7a86;
      font-size: 9px;
      font-weight: 850;
      letter-spacing: .12em;
    }

    .solar-system-info-title h3 {
      margin: 0;
      color: #1d2d3b;
      font-size: 23px;
      line-height: 1.1;
    }

    .solar-system-info-hide {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      margin: -5px -5px 0 0;
      padding: 0;
      border: 1px solid rgba(78, 97, 112, .18);
      border-radius: 50%;
      color: #526675;
      background: rgba(246, 248, 248, .9);
      cursor: pointer;
      transition: color .2s ease, border-color .2s ease, background .2s ease;
    }

    .solar-system-info-hide:hover,
    .solar-system-info-hide:focus-visible {
      color: #1f3443;
      border-color: rgba(52, 80, 101, .4);
      background: #fff;
      outline: none;
    }

    .solar-system-info-hide svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
    }

    .solar-system-info-scroll {
      min-height: 0;
      margin-top: 3px;
      padding: 0 6px 4px 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgba(81, 106, 121, .28) transparent;
    }

    .solar-system-info-scroll::-webkit-scrollbar { width: 5px; }
    .solar-system-info-scroll::-webkit-scrollbar-track { background: transparent; }
    .solar-system-info-scroll::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(81, 106, 121, .28);
    }

    .solar-system-info-summary {
      margin: 14px 0 13px;
      color: #435765;
      font-size: 13px;
      line-height: 1.62;
    }

    .solar-system-info-facts {
      display: grid;
      gap: 7px;
      margin: 0;
    }

    .solar-system-info-facts > div {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      min-height: 35px;
      padding: 7px 9px;
      border: 1px solid rgba(67, 91, 107, .1);
      border-radius: 10px;
      background: rgba(239, 243, 243, .72);
    }

    .solar-system-info-facts dt {
      color: #71808a;
      font-size: 10px;
      font-weight: 800;
    }

    .solar-system-info-facts dd {
      margin: 0;
      color: #203441;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.35;
    }

    .solar-system-moon-section {
      margin-top: 15px;
      padding-top: 13px;
      border-top: 1px solid rgba(66, 91, 108, .15);
    }

    .solar-system-moon-section[hidden] { display: none; }

    .solar-system-moon-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .solar-system-moon-heading {
      display: grid;
      gap: 2px;
    }

    .solar-system-moon-heading small {
      color: #71818c;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: .14em;
    }

    .solar-system-moon-heading strong {
      color: #203441;
      font-size: 14px;
      line-height: 1.2;
    }

    .solar-system-moon-count {
      flex: 0 0 auto;
      padding: 5px 9px;
      border: 1px solid color-mix(in srgb, var(--body-accent) 24%, transparent);
      border-radius: 999px;
      color: color-mix(in srgb, var(--body-accent) 76%, #172b3a);
      background: color-mix(in srgb, var(--body-accent) 8%, #fff);
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .solar-system-moon-list {
      display: grid;
      gap: 9px;
    }

    .solar-system-moon-card {
      --moon-accent: #64748b;
      position: relative;
      padding: 11px 11px 10px 13px;
      overflow: hidden;
      border: 1px solid rgba(73, 96, 111, .15);
      border-radius: 14px;
      color: #203441;
      background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--moon-accent) 11%, transparent), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(242, 246, 246, .9));
      box-shadow: 0 8px 20px rgba(64, 73, 76, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
      animation: solarMoonCardReveal .28s cubic-bezier(.2, .8, .2, 1) both;
    }

    .solar-system-moon-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: var(--moon-accent);
    }

    .solar-system-moon-card-head {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .solar-system-moon-orb {
      flex: 0 0 auto;
      width: 31px;
      height: 31px;
      border: 1px solid rgba(255, 255, 255, .9);
      border-radius: 50%;
      background: radial-gradient(circle at 32% 27%, #fff 0 8%, var(--moon-accent) 38%, #2c3d49 120%);
      box-shadow: 0 5px 12px rgba(42, 53, 61, .18), inset -4px -5px 8px rgba(19, 29, 37, .18);
    }

    .solar-system-moon-name {
      display: grid;
      flex: 1 1 auto;
      min-width: 0;
      gap: 2px;
    }

    .solar-system-moon-name strong {
      overflow: hidden;
      color: #1c3040;
      font-size: 15px;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .solar-system-moon-name small {
      overflow: hidden;
      color: #6a7b87;
      font-size: 9px;
      font-weight: 800;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .solar-system-moon-order {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      border: 1px solid rgba(74, 94, 106, .13);
      border-radius: 50%;
      color: #71818b;
      background: rgba(255, 255, 255, .76);
      font-size: 9px;
      font-weight: 900;
    }

    .solar-system-moon-summary {
      margin: 8px 0 8px 40px;
      color: #4a5d69;
      font-size: 11.5px;
      line-height: 1.52;
    }

    .solar-system-moon-facts {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin: 0 0 0 40px;
    }

    .solar-system-moon-facts > div {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      padding: 4px 6px;
      border: 1px solid color-mix(in srgb, var(--moon-accent) 18%, rgba(67, 91, 107, .12));
      border-radius: 7px;
      background: color-mix(in srgb, var(--moon-accent) 5%, rgba(248, 250, 250, .92));
    }

    .solar-system-moon-facts dt {
      color: #76848d;
      font-size: 8px;
      font-weight: 800;
    }

    .solar-system-moon-facts dd {
      margin: 0;
      overflow: hidden;
      color: #2d424f;
      font-size: 9px;
      font-weight: 850;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @keyframes solarMoonCardReveal {
      from { opacity: 0; transform: translateY(7px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 760px) {
      .solar-system-modal { padding: 12px; }
      .solar-system-modal-dialog {
        width: 96vw;
        height: 84vh;
        border-radius: 20px;
      }
      .solar-system-modal-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
      }
      .solar-system-motion-toggle {
        top: 10px;
        left: 10px;
        min-width: 112px;
        height: 40px;
        padding: 0 13px;
      }
      .solar-system-orbit-mode {
        top: 58px;
        left: 10px;
        height: 40px;
      }
      .solar-system-orbit-mode button {
        min-width: 78px;
        height: 32px;
        padding: 0 10px;
        font-size: 10.5px;
      }
      .solar-system-reset-button {
        top: 58px;
        left: 184px;
        min-width: 78px;
        height: 40px;
        padding: 0 12px;
      }
      .solar-system-info-card {
        top: 108px;
        right: 10px;
        width: min(286px, calc(100% - 20px));
        max-height: calc(100% - 120px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .solar-system-modal,
      .solar-system-modal-dialog,
      .solar-system-modal-close,
      .solar-system-motion-toggle,
      .solar-system-orbit-mode button,
      .solar-system-reset-button,
      .solar-system-depth-layer,
      .solar-system-info-card,
      .solar-system-moon-card { transition: none !important; animation: none !important; }
    }

    /* Page 11 · bright one-shot agent execution loop */
    .agent-principle-stage {
      grid-template-columns: 400px minmax(0, 1fr);
      height: 560px;
      border-color: rgba(42, 151, 157, .22);
      color: #173f48;
      background:
        radial-gradient(circle at 7% 8%, rgba(98, 226, 188, .25), transparent 25%),
        radial-gradient(circle at 76% 4%, rgba(104, 188, 255, .26), transparent 32%),
        radial-gradient(circle at 98% 96%, rgba(255, 193, 104, .23), transparent 27%),
        linear-gradient(135deg, #f8fff9 0%, #eefaff 49%, #fff9f0 100%);
      box-shadow: 0 27px 70px rgba(43, 111, 121, .16), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

    .agent-principle-stage::before {
      z-index: 0;
      opacity: .42;
      background-image:
        linear-gradient(rgba(37, 135, 145, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 135, 145, .055) 1px, transparent 1px);
      background-size: 38px 38px;
      -webkit-mask-image: radial-gradient(circle at 64% 50%, black, transparent 82%);
      mask-image: radial-gradient(circle at 64% 50%, black, transparent 82%);
    }

    .agent-principle-copy {
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      padding: 24px 22px 21px 27px;
      border-right-color: rgba(31, 125, 135, .12);
      color: #193f47;
      background: linear-gradient(108deg, rgba(255, 255, 255, .88), rgba(243, 254, 251, .77));
      box-shadow: 24px 0 54px rgba(49, 122, 129, .08);
      backdrop-filter: blur(10px);
    }

    .agent-principle-kicker {
      color: #138d92;
      font-size: 9.5px;
      letter-spacing: .17em;
    }

    .agent-principle-copy h3 {
      margin: 8px 0 14px;
      color: #133d48;
      font-size: 27px;
      line-height: 1.2;
    }

    .agent-principle-steps {
      gap: 7px;
    }

    .agent-principle-step {
      min-height: 56px;
      padding: 7px 12px 7px 9px;
      border-color: rgba(38, 125, 135, .13);
      color: #466e73;
      background: rgba(255, 255, 255, .72);
      box-shadow: 0 6px 17px rgba(44, 115, 122, .045), inset 0 1px 0 rgba(255, 255, 255, .9);
      animation: none !important;
      transition: color .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease, transform .34s cubic-bezier(.22, .78, .28, 1);
    }

    .agent-principle-step::after {
      width: 3px;
      opacity: .52;
      background: rgba(var(--step-rgb), .74);
      box-shadow: 0 0 13px rgba(var(--step-rgb), .24);
      transition: opacity .25s ease, width .25s ease, box-shadow .25s ease;
    }

    .agent-principle-step b {
      border-color: rgba(var(--step-rgb), .18);
      color: rgb(var(--step-rgb));
      background: rgba(var(--step-rgb), .075);
      transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
    }

    .agent-principle-step strong {
      color: #214d54;
      transition: color .25s ease;
    }

    .agent-principle-step small {
      color: #64858a;
      transition: color .25s ease;
    }

    .agent-principle-step.is-active {
      z-index: 3;
      color: #fff;
      border-color: rgba(var(--step-rgb), .88);
      background: linear-gradient(108deg, rgb(var(--step-rgb)), rgba(var(--step-rgb), .82));
      box-shadow: 0 13px 28px rgba(var(--step-rgb), .27), inset 0 1px 0 rgba(255, 255, 255, .24);
      transform: translate3d(7px, 0, 0);
    }

    .agent-principle-step.is-active::after {
      width: 5px;
      opacity: 1;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 0 16px rgba(255, 255, 255, .7);
    }

    .agent-principle-step.is-active b {
      border-color: rgba(255, 255, 255, .36);
      color: #fff;
      background: rgba(255, 255, 255, .17);
      box-shadow: 0 5px 14px rgba(0, 0, 0, .1);
    }

    .agent-principle-step.is-active strong { color: #fff; }
    .agent-principle-step.is-active small { color: rgba(255, 255, 255, .82); }

    .agent-principle-step.is-done {
      border-color: rgba(var(--step-rgb), .22);
      color: #335f65;
      background: rgba(var(--step-rgb), .105);
      box-shadow: 0 6px 17px rgba(var(--step-rgb), .065), inset 0 1px 0 rgba(255, 255, 255, .86);
      transform: translate3d(0, 0, 0);
    }

    .agent-principle-step.is-done strong { color: rgb(var(--step-rgb)); }

    .agent-principle-stop {
      min-height: 52px;
      margin-top: 12px;
      border-color: rgba(231, 153, 45, .22);
      color: #7b642e;
      background: linear-gradient(100deg, rgba(255, 248, 223, .94), rgba(255, 255, 255, .8));
      box-shadow: 0 7px 18px rgba(159, 112, 37, .06);
    }

    .agent-principle-stop b {
      color: #c47e18;
      font-size: 8px;
    }

    .agent-principle-scene {
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 22px 24px;
      padding: 30px 32px 27px;
      overflow: hidden;
      perspective: none;
      background:
        radial-gradient(circle at 48% 45%, rgba(255, 255, 255, .86), transparent 37%),
        linear-gradient(115deg, rgba(227, 250, 244, .54), rgba(231, 246, 255, .42) 52%, rgba(255, 246, 229, .5));
    }

    .agent-principle-scene::before {
      z-index: 0;
      opacity: .62;
      background:
        radial-gradient(circle at 12% 18%, rgba(67, 210, 173, .16), transparent 24%),
        radial-gradient(circle at 78% 12%, rgba(92, 169, 239, .18), transparent 26%),
        radial-gradient(circle at 82% 86%, rgba(255, 177, 91, .16), transparent 26%);
    }

    .agent-principle-scene::after { display: none; }

    .agent-principle-flow {
      position: absolute;
      z-index: 1;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    .agent-principle-flow-base path,
    .agent-principle-flow-progress path,
    .agent-principle-flow-rainbow {
      fill: none;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .agent-principle-flow-base path {
      stroke: rgba(48, 122, 134, .15);
      stroke-width: 3;
      stroke-dasharray: 3 8;
    }

    .agent-principle-flow-progress path {
      opacity: 0;
      stroke: rgba(255, 255, 255, .98);
      stroke-width: 5;
      filter: drop-shadow(0 0 6px rgba(43, 163, 179, .48));
      stroke-dasharray: 5 8;
      stroke-dashoffset: 18;
      transition: opacity .35s ease, stroke-dashoffset .7s ease-out;
    }

    .agent-principle-flow-progress path.is-revealed {
      opacity: 1;
      stroke-dashoffset: 0;
    }

    .agent-principle-flow-rainbow {
      opacity: 0;
      stroke: url(#agentRainbowFlow);
      stroke-width: 5;
      stroke-dasharray: 8 7;
      stroke-dashoffset: 0;
      filter: url(#agentRainbowGlow);
      transition: opacity .45s ease;
    }

    .agent-principle-stage.is-complete .agent-principle-flow-progress path { opacity: .18; }

    .slide.active .agent-principle-stage.is-complete .agent-principle-flow-rainbow {
      opacity: 1;
      animation: agent-principle-rainbow 2.8s linear infinite;
    }

    .agent-principle-visual-card {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-rows: minmax(0, 1fr) 46px;
      min-width: 0;
      min-height: 0;
      margin: 0;
      overflow: hidden;
      opacity: .13;
      border: 1px solid rgba(var(--visual-rgb), .18);
      border-radius: 20px;
      color: #244f56;
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 11px 28px rgba(42, 113, 123, .07), inset 0 1px 0 rgba(255, 255, 255, .96);
      filter: grayscale(.38) saturate(.7);
      transform: translate3d(0, 10px, 0) scale(.95);
      transition: opacity .52s ease-out, filter .52s ease-out, border-color .3s ease, box-shadow .35s ease, transform .52s cubic-bezier(.22, .78, .28, 1);
    }

    .agent-principle-visual-card.step-1 { grid-column: 1; grid-row: 1; }
    .agent-principle-visual-card.step-2 { grid-column: 2; grid-row: 1; }
    .agent-principle-visual-card.step-3 { grid-column: 3; grid-row: 1; }
    .agent-principle-visual-card.step-4 { grid-column: 2; grid-row: 2; }
    .agent-principle-visual-card.step-5 { grid-column: 1; grid-row: 2; }

    .agent-principle-visual-card.is-revealed {
      opacity: 1;
      filter: grayscale(0) saturate(1);
      transform: translate3d(0, 0, 0) scale(1);
    }

    .agent-principle-visual-card.is-active {
      border-color: rgba(var(--visual-rgb), .72);
      box-shadow: 0 16px 34px rgba(var(--visual-rgb), .2), 0 0 0 4px rgba(var(--visual-rgb), .075), inset 0 1px 0 rgba(255, 255, 255, .96);
      transform: translate3d(0, -5px, 0) scale(1.025);
    }

    .agent-principle-visual-media {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      background: linear-gradient(145deg, #fffdfa, #f1fbfb);
    }

    .agent-principle-visual-media::after {
      content: "";
      position: absolute;
      inset: 0;
      border-bottom: 1px solid rgba(40, 121, 130, .09);
      box-shadow: inset 0 -18px 24px rgba(255, 255, 255, .2);
      pointer-events: none;
    }

    .agent-principle-visual-media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.015);
    }

    .agent-principle-visual-card figcaption {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      padding: 5px 9px;
      background: rgba(255, 255, 255, .92);
    }

    .agent-principle-visual-card figcaption b {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      color: rgb(var(--visual-rgb));
      background: rgba(var(--visual-rgb), .1);
      font-size: 8px;
      letter-spacing: .04em;
    }

    .agent-principle-visual-card figcaption span {
      display: grid;
      min-width: 0;
    }

    .agent-principle-visual-card figcaption strong {
      color: #24525a;
      font-size: 11px;
      line-height: 1.1;
    }

    .agent-principle-visual-card figcaption small {
      margin-top: 3px;
      color: #719095;
      font-size: 7.5px;
      font-weight: 720;
      line-height: 1.1;
    }

    .agent-principle-flow-note {
      position: relative;
      z-index: 2;
      grid-column: 3;
      grid-row: 2;
      align-self: center;
      display: grid;
      min-height: 118px;
      margin: 17px 4px;
      padding: 18px 18px 16px;
      border: 1px dashed rgba(38, 138, 148, .24);
      border-radius: 19px;
      color: #315f66;
      background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(235, 251, 247, .8));
      box-shadow: 0 11px 26px rgba(42, 119, 125, .06);
      backdrop-filter: blur(8px);
    }

    .agent-principle-flow-note span {
      color: #168c94;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .15em;
    }

    .agent-principle-flow-note strong {
      margin-top: 6px;
      color: #174d57;
      font-size: 16px;
      line-height: 1.2;
    }

    .agent-principle-flow-note small {
      margin-top: 7px;
      color: #64858a;
      font-size: 9px;
      font-weight: 720;
      line-height: 1.45;
    }

    @keyframes agent-principle-rainbow {
      to { stroke-dashoffset: -100; }
    }

    @media (prefers-reduced-motion: reduce) {
      .agent-principle-step,
      .agent-principle-visual-card,
      .agent-principle-flow-progress path,
      .agent-principle-flow-rainbow { transition: none !important; }

      .agent-principle-stage.is-complete .agent-principle-flow-rainbow { animation: none !important; }
    }

    @media print {
      .agent-principle-step { background: #fff !important; color: #315f66 !important; }
      .agent-principle-step strong { color: #214d54 !important; }
      .agent-principle-step small { color: #64858a !important; }
      .agent-principle-visual-card { opacity: 1 !important; filter: none !important; transform: none !important; }
      .agent-principle-flow-rainbow { opacity: 1 !important; animation: none !important; }
    }

    /* Page 11 · continuous synchronized focus loop */
    .agent-principle-step {
      background-color: rgba(255, 255, 255, .78);
      background-image: none;
      will-change: transform, background-color, box-shadow;
      transition:
        color .3s cubic-bezier(.22, .78, .28, 1),
        border-color .3s cubic-bezier(.22, .78, .28, 1),
        background-color .3s cubic-bezier(.22, .78, .28, 1),
        box-shadow .3s cubic-bezier(.22, .78, .28, 1),
        transform .3s cubic-bezier(.22, .78, .28, 1);
    }

    .agent-principle-step::after,
    .agent-principle-step b,
    .agent-principle-step strong,
    .agent-principle-step small {
      transition-duration: .3s;
      transition-timing-function: cubic-bezier(.22, .78, .28, 1);
    }

    .agent-principle-step.is-active {
      z-index: 4;
      border-color: rgba(var(--step-rgb), .96);
      color: #fff;
      background-color: rgba(var(--step-rgb), .94);
      background-image: none;
      box-shadow:
        0 15px 30px rgba(var(--step-rgb), .25),
        0 0 0 3px rgba(var(--step-rgb), .09),
        inset 0 1px 0 rgba(255, 255, 255, .28);
      transform: translate3d(8px, 0, 0) scale(1.012);
    }

    .agent-principle-step.is-done {
      border-color: rgba(38, 125, 135, .13);
      color: #466e73;
      background-color: rgba(255, 255, 255, .78);
      background-image: none;
      box-shadow: 0 6px 17px rgba(44, 115, 122, .045), inset 0 1px 0 rgba(255, 255, 255, .9);
      transform: translate3d(0, 0, 0);
    }

    .agent-principle-step.is-done strong { color: #214d54; }

    .agent-principle-flow-progress,
    .agent-principle-flow-rainbow {
      display: none !important;
    }

    .agent-principle-flow-base path {
      stroke: rgba(39, 125, 136, .18);
      stroke-width: 2.5;
      stroke-dasharray: none;
    }

    .agent-principle-visual-card {
      grid-template-rows: minmax(0, 1fr) 64px;
      overflow: hidden;
      opacity: 1;
      filter: saturate(.9) brightness(.985);
      transform: translate3d(0, 0, 0) scale(1);
      will-change: transform, filter, box-shadow;
      transition:
        filter .34s cubic-bezier(.22, .78, .28, 1),
        border-color .34s cubic-bezier(.22, .78, .28, 1),
        box-shadow .4s cubic-bezier(.22, .78, .28, 1),
        transform .4s cubic-bezier(.22, .78, .28, 1);
    }

    .agent-principle-visual-card::before {
      content: "";
      position: absolute;
      z-index: 6;
      inset: 0;
      border: 2px solid rgba(var(--visual-rgb), 0);
      border-radius: inherit;
      opacity: 0;
      box-shadow: inset 0 0 18px rgba(var(--visual-rgb), 0), 0 0 18px rgba(var(--visual-rgb), 0);
      transition: opacity .3s ease, border-color .34s ease, box-shadow .4s ease;
      pointer-events: none;
    }

    .agent-principle-visual-card.is-revealed {
      opacity: 1;
      filter: saturate(.9) brightness(.985);
      transform: translate3d(0, 0, 0) scale(1);
    }

    .agent-principle-visual-card.is-active {
      z-index: 8;
      border-color: rgba(var(--visual-rgb), .98);
      filter: saturate(1.12) brightness(1.035);
      box-shadow:
        0 21px 42px rgba(var(--visual-rgb), .24),
        0 0 0 5px rgba(var(--visual-rgb), .1),
        inset 0 1px 0 rgba(255, 255, 255, .98);
      transform: translate3d(0, -4px, 0) scale(1.055);
    }

    .agent-principle-visual-card.is-active::before {
      opacity: 1;
      border-color: rgba(var(--visual-rgb), .92);
      box-shadow: inset 0 0 18px rgba(var(--visual-rgb), .18), 0 0 18px rgba(var(--visual-rgb), .26);
    }

    .agent-principle-visual-card figcaption {
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      padding: 7px 11px;
    }

    .agent-principle-visual-card figcaption b {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      font-size: 9px;
    }

    .agent-principle-visual-card figcaption strong {
      font-size: 14px;
      line-height: 1.08;
    }

    .agent-principle-visual-card figcaption small {
      margin-top: 4px;
      font-size: 10px;
      font-weight: 760;
      line-height: 1.18;
    }

    .agent-principle-flow-note {
      align-self: stretch;
      align-content: center;
      min-height: 148px;
      margin: 8px 2px;
      padding: 20px 19px 18px;
    }

    .agent-principle-flow-note span {
      font-size: 9.5px;
    }

    .agent-principle-flow-note strong {
      margin-top: 8px;
      font-size: 20px;
      line-height: 1.18;
    }

    .agent-principle-flow-note small {
      margin-top: 9px;
      color: #557a80;
      font-size: 12px;
      font-weight: 760;
      line-height: 1.5;
    }

    @media (prefers-reduced-motion: reduce) {
      .agent-principle-step,
      .agent-principle-step::after,
      .agent-principle-step b,
      .agent-principle-step strong,
      .agent-principle-step small,
      .agent-principle-visual-card,
      .agent-principle-visual-card::before {
        transition: none !important;
      }

      .agent-principle-step.is-active,
      .agent-principle-visual-card.is-active {
        transform: none !important;
      }
    }

    /* Pages 12–14 · multi-model, multi-agent platform narrative */
    .platform-ecosystem-stage,
    .platform-orchestration-stage,
    .platform-case-stage {
      position: relative;
      height: 560px;
      overflow: hidden;
      border: 1px solid rgba(42, 143, 151, .2);
      border-radius: 31px;
      color: #183f48;
      background:
        radial-gradient(circle at 10% 12%, rgba(83, 218, 180, .18), transparent 24%),
        radial-gradient(circle at 91% 10%, rgba(84, 164, 255, .17), transparent 28%),
        linear-gradient(132deg, #f8fff9, #eefaff 52%, #fff9ef);
      box-shadow: 0 27px 70px rgba(43, 111, 121, .14), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

    .platform-kicker {
      margin: 0;
      color: #168f93;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .18em;
    }

    .platform-ecosystem-stage {
      display: grid;
      grid-template-columns: 405px minmax(0, 1fr);
    }

    .platform-ecosystem-copy {
      position: relative;
      z-index: 4;
      display: flex;
      flex-direction: column;
      padding: 28px 25px 23px 29px;
      border-right: 1px solid rgba(35, 128, 137, .11);
      background: linear-gradient(112deg, rgba(255, 255, 255, .94), rgba(244, 255, 252, .82));
      box-shadow: 24px 0 54px rgba(49, 122, 129, .08);
      backdrop-filter: blur(12px);
    }

    .platform-ecosystem-copy h3 {
      margin: 8px 0 10px;
      color: #143f49;
      font-size: 29px;
      line-height: 1.22;
      letter-spacing: -.025em;
    }

    .platform-ecosystem-intro {
      margin: 0;
      color: #4f7379;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.55;
    }

    .platform-definition-list {
      display: grid;
      gap: 8px;
      margin-top: 16px;
    }

    .platform-definition-row {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      align-items: center;
      min-height: 72px;
      padding: 8px 12px;
      border: 1px solid rgba(42, 131, 139, .12);
      border-radius: 17px;
      background: rgba(255, 255, 255, .72);
      box-shadow: 0 7px 19px rgba(49, 119, 126, .045), inset 0 1px 0 rgba(255, 255, 255, .94);
    }

    .platform-definition-row:nth-child(2) {
      border-color: rgba(96, 92, 200, .14);
      background: rgba(246, 244, 255, .68);
    }

    .platform-definition-row:nth-child(3) {
      border-color: rgba(207, 144, 39, .17);
      background: rgba(255, 249, 235, .76);
    }

    .platform-definition-row > b {
      color: #168c92;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .1em;
    }

    .platform-definition-row:nth-child(2) > b { color: #7162c7; }
    .platform-definition-row:nth-child(3) > b { color: #b87819; }

    .platform-definition-row span {
      display: grid;
      min-width: 0;
    }

    .platform-definition-row strong {
      color: #234f57;
      font-size: 17px;
      line-height: 1.2;
    }

    .platform-definition-row small {
      margin-top: 4px;
      color: #6b898e;
      font-size: 10px;
      font-weight: 720;
      line-height: 1.35;
    }

    .platform-ecosystem-thesis {
      display: grid;
      margin-top: auto;
      padding: 14px 16px;
      border-left: 4px solid #19a994;
      border-radius: 0 16px 16px 0;
      background: linear-gradient(102deg, rgba(226, 251, 244, .95), rgba(255, 255, 255, .82));
      box-shadow: 0 8px 21px rgba(41, 131, 122, .07);
    }

    .platform-ecosystem-thesis strong {
      color: #148878;
      font-size: 16px;
    }

    .platform-ecosystem-thesis span {
      margin-top: 4px;
      color: #52767b;
      font-size: 11px;
      font-weight: 730;
      line-height: 1.45;
    }

    .platform-team-board {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-rows: auto 24px auto 29px 1fr 25px auto auto;
      min-width: 0;
      padding: 20px 24px 17px;
      overflow: hidden;
      background:
        radial-gradient(circle at 90% 8%, rgba(72, 148, 231, .12), transparent 27%),
        radial-gradient(circle at 8% 90%, rgba(44, 182, 144, .11), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(242, 251, 249, .88) 52%, rgba(244, 248, 255, .92));
    }

    .platform-team-node {
      opacity: 0;
      transform: translateY(10px);
    }

    .slide.active .platform-team-node {
      animation: platform-team-node-in .56s cubic-bezier(.18, .8, .24, 1) var(--team-delay, .1s) both;
    }

    .platform-team-task,
    .platform-team-dispatch,
    .platform-team-result {
      justify-self: center;
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      width: min(760px, 92%);
      border: 1px solid rgba(45, 132, 139, .16);
      border-radius: 18px;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 10px 27px rgba(46, 111, 120, .08), inset 0 1px 0 white;
    }

    .platform-team-task {
      min-height: 63px;
      padding: 8px 14px;
      border-color: rgba(204, 145, 47, .24);
      background: linear-gradient(112deg, rgba(255, 250, 237, .96), rgba(255, 255, 255, .93));
    }

    .platform-team-dispatch {
      grid-template-columns: 60px minmax(0, 1fr) auto;
      min-height: 78px;
      width: min(830px, 96%);
      padding: 9px 16px 9px 11px;
      border-color: rgba(31, 151, 142, .25);
      background: linear-gradient(112deg, rgba(232, 252, 246, .97), rgba(248, 255, 253, .94));
      box-shadow: 0 13px 31px rgba(30, 139, 131, .11), inset 0 1px 0 white;
    }

    .platform-team-result {
      grid-template-columns: 50px minmax(0, 1fr) auto;
      min-height: 58px;
      width: min(760px, 92%);
      padding: 8px 14px;
      border-color: rgba(79, 113, 200, .22);
      background: linear-gradient(112deg, rgba(240, 246, 255, .97), rgba(255, 255, 255, .94));
    }

    .platform-team-token {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: 15px;
      color: white;
      background: linear-gradient(135deg, #d6962e, #e5b54e);
      box-shadow: 0 9px 18px rgba(194, 132, 35, .2), inset 0 1px 0 rgba(255, 255, 255, .32);
      font-size: 19px;
      font-weight: 950;
    }

    .platform-team-dispatch .platform-team-token {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      background: linear-gradient(135deg, #159e8f, #37b997);
      box-shadow: 0 10px 21px rgba(25, 151, 137, .22), inset 0 1px 0 rgba(255, 255, 255, .32);
      font-size: 21px;
    }

    .platform-team-result .platform-team-token {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: linear-gradient(135deg, #527ed4, #6e70cf);
      box-shadow: 0 9px 18px rgba(75, 101, 184, .2), inset 0 1px 0 rgba(255, 255, 255, .32);
    }

    .platform-team-copy {
      display: grid;
      min-width: 0;
    }

    .platform-team-copy small {
      color: #789095;
      font-size: 11px;
      font-weight: 880;
      letter-spacing: .08em;
    }

    .platform-team-copy strong {
      margin-top: 3px;
      color: #244f57;
      font-size: 18px;
      line-height: 1.2;
    }

    .platform-team-dispatch .platform-team-copy strong {
      color: #187b73;
      font-size: 20px;
    }

    .platform-team-copy p {
      margin: 3px 0 0;
      color: #67858a;
      font-size: 13px;
      font-weight: 710;
    }

    .platform-team-action {
      padding: 8px 11px;
      border: 1px solid rgba(30, 148, 137, .18);
      border-radius: 12px;
      color: #18887e;
      background: rgba(255, 255, 255, .72);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .platform-team-arrow {
      display: grid;
      place-items: center;
      color: #4fa69d;
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
      opacity: 0;
      transform: translateY(-4px);
    }

    .platform-team-arrow span {
      margin-left: 13px;
      color: #769398;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .12em;
    }

    .slide.active .platform-team-arrow {
      animation: platform-team-arrow-in .44s ease var(--team-delay, .2s) both;
    }

    .platform-team-members {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
      gap: 9px;
      min-height: 0;
    }

    .platform-team-member {
      display: grid;
      grid-template-columns: 43px minmax(0, 1fr);
      align-content: center;
      align-items: center;
      gap: 9px;
      min-width: 0;
      padding: 10px 10px;
      border: 1px solid rgba(var(--member-rgb), .22);
      border-radius: 17px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(var(--member-rgb), .075));
      box-shadow: 0 9px 23px rgba(44, 102, 112, .055), inset 0 1px 0 white;
    }

    .platform-team-member > b {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 13px;
      color: white;
      background: linear-gradient(135deg, rgba(var(--member-rgb), .98), rgba(var(--member-rgb), .72));
      box-shadow: 0 7px 16px rgba(var(--member-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .3);
      font-size: 17px;
    }

    .platform-team-member span {
      display: grid;
      min-width: 0;
    }

    .platform-team-member strong {
      color: #2a545b;
      font-size: 15px;
      line-height: 1.18;
      white-space: nowrap;
    }

    .platform-team-member small {
      margin-top: 4px;
      color: #6d898e;
      font-size: 11px;
      font-weight: 720;
      line-height: 1.25;
      white-space: nowrap;
    }

    .platform-team-result > em {
      padding: 7px 10px;
      border-radius: 11px;
      color: #4b66b0;
      background: #eef3ff;
      font-size: 12px;
      font-style: normal;
      font-weight: 900;
      white-space: nowrap;
    }

    .platform-team-rules {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
      min-height: 43px;
      margin-top: 9px;
      padding: 7px 13px;
      border: 1px solid rgba(204, 145, 47, .18);
      border-radius: 14px;
      color: #7b735f;
      background: rgba(255, 250, 236, .88);
    }

    .platform-team-rules strong {
      color: #af751d;
      font-size: 13px;
    }

    .platform-team-rules span {
      font-size: 11px;
      font-weight: 760;
      letter-spacing: .02em;
    }

    @keyframes platform-team-node-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes platform-team-arrow-in {
      from { opacity: 0; transform: translateY(-7px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .platform-ecosystem-visual,
    .platform-orchestration-visual,
    .platform-case-visual {
      position: relative;
      min-width: 0;
      min-height: 0;
      margin: 0;
      overflow: hidden;
    }

    .platform-ecosystem-visual > img,
    .platform-orchestration-visual > img,
    .platform-case-visual > img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: saturate(.98) contrast(1.015);
    }

    .slide.active .platform-ecosystem-visual > img,
    .slide.active .platform-orchestration-visual > img,
    .slide.active .platform-case-visual > img {
      animation: platform-image-in .82s cubic-bezier(.2, .76, .24, 1) both;
    }

    .platform-ecosystem-visual::after,
    .platform-orchestration-visual::after,
    .platform-case-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 55px rgba(243, 253, 252, .28);
    }

    .platform-visual-label,
    .platform-case-label,
    .platform-case-governance {
      position: absolute;
      z-index: 3;
      display: grid;
      opacity: 0;
      border: 1px solid rgba(255, 255, 255, .9);
      border-radius: 16px;
      color: #214f57;
      background: rgba(255, 255, 255, .86);
      box-shadow: 0 12px 30px rgba(38, 102, 112, .14), inset 0 1px 0 rgba(255, 255, 255, .98);
      backdrop-filter: blur(13px) saturate(1.1);
    }

    .slide.active .platform-visual-label,
    .slide.active .platform-case-label,
    .slide.active .platform-case-governance {
      animation: platform-label-in .56s cubic-bezier(.2, .78, .28, 1) var(--reveal, 0s) both;
    }

    .platform-visual-label {
      min-width: 160px;
      padding: 11px 13px 10px;
    }

    .platform-visual-label b,
    .platform-case-label b {
      color: #168d93;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .12em;
    }

    .platform-visual-label strong,
    .platform-case-label strong {
      margin-top: 3px;
      color: #1c5059;
      font-size: 15px;
      line-height: 1.2;
    }

    .platform-visual-label span,
    .platform-case-label span {
      margin-top: 4px;
      color: #66888d;
      font-size: 9px;
      font-weight: 730;
      line-height: 1.3;
    }

    .platform-visual-label.model-layer { left: 4%; top: 7%; }
    .platform-visual-label.agent-layer { right: 4%; top: 9%; }

    .platform-visual-label.orchestration-core {
      left: 50%;
      top: 44%;
      min-width: 184px;
      text-align: center;
      transform: translate(-50%, -50%);
      border-color: rgba(45, 169, 180, .28);
      background: rgba(244, 255, 253, .91);
    }

    .slide.active .platform-visual-label.orchestration-core {
      animation-name: platform-core-label-in;
    }

    .platform-visual-label.governance-layer {
      left: 50%;
      bottom: 3%;
      min-width: 320px;
      text-align: center;
      transform: translateX(-50%);
      border-color: rgba(194, 139, 46, .25);
      background: rgba(255, 251, 240, .91);
    }

    .slide.active .platform-visual-label.governance-layer {
      animation-name: platform-bottom-label-in;
    }

    .platform-orchestration-stage {
      background: #f4fbfb;
    }

    .platform-orchestration-visual {
      position: absolute;
      inset: 0;
    }

    .platform-orchestration-visual::before {
      content: "";
      position: absolute;
      z-index: 2;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(248, 255, 252, .78) 0%, transparent 26%, transparent 70%, rgba(249, 255, 253, .86) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, .26), transparent 21%, transparent 79%, rgba(255, 255, 255, .2));
    }

    .platform-orchestration-rail {
      position: absolute;
      z-index: 4;
      top: 17px;
      left: 22px;
      right: 22px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      min-height: 83px;
      margin: 0;
      padding: 0;
      border: 1px solid rgba(48, 138, 147, .17);
      border-radius: 21px;
      list-style: none;
      background: rgba(255, 255, 255, .84);
      box-shadow: 0 13px 34px rgba(42, 105, 113, .11), inset 0 1px 0 rgba(255, 255, 255, .96);
      backdrop-filter: blur(15px);
    }

    .platform-orchestration-rail li {
      position: relative;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      min-width: 0;
      padding: 11px 13px;
      opacity: .64;
      transform: translateY(6px);
    }

    .platform-orchestration-rail li:not(:last-child)::after {
      content: "→";
      position: absolute;
      z-index: 2;
      right: -7px;
      top: 50%;
      display: grid;
      place-items: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      color: #229ba0;
      background: #fff;
      box-shadow: 0 4px 12px rgba(43, 126, 133, .12);
      transform: translateY(-50%);
      font-size: 12px;
      font-weight: 950;
    }

    .slide.active .platform-orchestration-rail li {
      animation: platform-phase-in .58s ease-out calc(.18s + var(--phase)) both;
    }

    .platform-orchestration-rail li > b {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 11px;
      color: #fff;
      background: linear-gradient(135deg, #17a99b, #2f9cc6);
      box-shadow: 0 7px 16px rgba(29, 150, 157, .2);
      font-size: 10px;
    }

    .platform-orchestration-rail li:nth-child(2) > b { background: linear-gradient(135deg, #3b9ecc, #477fda); }
    .platform-orchestration-rail li:nth-child(3) > b { background: linear-gradient(135deg, #5f83d9, #776bc8); }
    .platform-orchestration-rail li:nth-child(4) > b { background: linear-gradient(135deg, #d46e7e, #e88d66); }
    .platform-orchestration-rail li:nth-child(5) > b { background: linear-gradient(135deg, #d4952d, #d6b13f); }

    .platform-orchestration-rail li span { display: grid; min-width: 0; }

    .platform-orchestration-rail strong {
      color: #214f57;
      font-size: 14px;
      line-height: 1.15;
    }

    .platform-orchestration-rail small {
      margin-top: 4px;
      overflow: hidden;
      color: #6b898e;
      font-size: 9px;
      font-weight: 730;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .platform-route-models {
      position: absolute;
      z-index: 4;
      left: 23px;
      bottom: 18px;
      display: grid;
      grid-template-columns: 127px repeat(4, 118px);
      align-items: center;
      gap: 4px;
      min-height: 72px;
      padding: 7px 8px;
      border: 1px solid rgba(46, 139, 148, .17);
      border-radius: 20px;
      background: rgba(255, 255, 255, .88);
      box-shadow: 0 12px 30px rgba(41, 106, 114, .1);
      backdrop-filter: blur(14px);
    }

    .platform-route-caption {
      display: grid;
      padding-left: 10px;
    }

    .platform-route-caption b {
      color: #168e93;
      font-size: 13px;
    }

    .platform-route-caption span {
      margin-top: 3px;
      color: #789398;
      font-size: 8px;
      font-weight: 760;
    }

    .platform-model-chip {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 7px;
      min-width: 0;
      padding: 8px 7px;
      border-left: 1px solid rgba(45, 123, 134, .1);
    }

    .platform-model-chip img,
    .platform-model-chip i {
      grid-row: 1 / 3;
      display: grid;
      place-items: center;
      width: 27px;
      height: 27px;
      border-radius: 9px;
      object-fit: contain;
    }

    .platform-model-chip img { padding: 3px; background: #f1f7ff; }

    .platform-model-chip i {
      color: #6f62c3;
      background: #f1efff;
      font-size: 5.5px;
      font-style: normal;
      font-weight: 950;
      letter-spacing: .04em;
    }

    .platform-model-chip strong {
      overflow: hidden;
      color: #315c63;
      font-size: 10px;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .platform-model-chip small {
      margin-top: 3px;
      color: #799398;
      font-size: 7px;
      font-weight: 760;
    }

    .platform-governance-seal {
      position: absolute;
      z-index: 4;
      right: 23px;
      bottom: 18px;
      display: grid;
      align-content: center;
      min-width: 336px;
      min-height: 72px;
      padding: 9px 17px;
      border: 1px solid rgba(207, 147, 50, .23);
      border-radius: 20px;
      background: rgba(255, 250, 237, .91);
      box-shadow: 0 12px 30px rgba(146, 106, 40, .09);
      backdrop-filter: blur(14px);
    }

    .platform-governance-seal b {
      color: #a86913;
      font-size: 14px;
    }

    .platform-governance-seal span {
      margin-top: 5px;
      color: #806b42;
      font-size: 9px;
      font-weight: 760;
      letter-spacing: .035em;
    }

    .platform-case-stage {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 390px;
    }

    .platform-case-visual {
      border-right: 1px solid rgba(39, 126, 135, .1);
    }

    .platform-case-copy {
      position: relative;
      z-index: 4;
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 25px 25px 22px;
      background: linear-gradient(122deg, rgba(255, 255, 255, .92), rgba(245, 255, 251, .84));
      box-shadow: -24px 0 54px rgba(49, 122, 129, .07);
      backdrop-filter: blur(12px);
    }

    .platform-case-copy h3 {
      margin: 7px 0 0;
      color: #173f49;
      font-size: 26px;
      line-height: 1.2;
      letter-spacing: -.02em;
    }

    .platform-case-task {
      display: grid;
      margin-top: 12px;
      padding: 11px 13px;
      border: 1px solid rgba(43, 142, 150, .15);
      border-radius: 16px;
      background: rgba(238, 251, 249, .82);
    }

    .platform-case-task span {
      color: #168b90;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .platform-case-task strong {
      margin-top: 5px;
      color: #24525a;
      font-size: 18px;
      line-height: 1.2;
    }

    .platform-case-metric {
      display: grid;
      grid-template-columns: auto 24px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      margin-top: 11px;
      padding: 10px 13px;
      border-radius: 16px;
      color: #fff;
      background: linear-gradient(112deg, #168f91, #318bc3 55%, #7668c8);
      box-shadow: 0 11px 25px rgba(39, 123, 151, .18);
    }

    .platform-case-metric > strong {
      font-size: 16px;
    }

    .platform-case-metric > i {
      color: rgba(255, 255, 255, .74);
      font-size: 18px;
      font-style: normal;
      text-align: center;
    }

    .platform-case-metric span { display: grid; }
    .platform-case-metric b { font-size: 16px; }
    .platform-case-metric small { margin-top: 2px; color: rgba(255, 255, 255, .78); font-size: 8px; font-weight: 760; }

    .platform-case-results {
      display: grid;
      gap: 7px;
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
    }

    .platform-case-results li {
      display: grid;
      grid-template-columns: 78px minmax(0, 1fr);
      align-items: center;
      min-height: 43px;
      padding: 6px 10px;
      border-bottom: 1px solid rgba(45, 125, 135, .1);
    }

    .platform-case-results b {
      color: #2b6770;
      font-size: 13px;
    }

    .platform-case-results span {
      color: #67868b;
      font-size: 10px;
      font-weight: 720;
      line-height: 1.3;
    }

    .platform-case-conclusion {
      display: grid;
      margin-top: auto;
      padding: 12px 14px;
      border-left: 4px solid #d29836;
      border-radius: 0 15px 15px 0;
      background: linear-gradient(105deg, rgba(255, 248, 228, .94), rgba(255, 255, 255, .86));
    }

    .platform-case-conclusion strong {
      color: #ac6d16;
      font-size: 15px;
    }

    .platform-case-conclusion span {
      margin-top: 4px;
      color: #6e755d;
      font-size: 10px;
      font-weight: 740;
      line-height: 1.4;
    }

    .platform-case-label {
      top: 18px;
      min-width: 205px;
      padding: 10px 12px;
    }

    .platform-case-label.input { left: 18px; }

    .platform-case-label.coordinate {
      left: 50%;
      min-width: 238px;
      text-align: center;
      transform: translateX(-50%);
    }

    .slide.active .platform-case-label.coordinate {
      animation-name: platform-bottom-label-in;
    }

    .platform-case-label.output {
      right: 18px;
      min-width: 230px;
      text-align: right;
    }

    .platform-case-governance {
      left: 18px;
      right: 18px;
      bottom: 15px;
      grid-template-columns: auto repeat(9, auto);
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 51px;
      padding: 8px 11px;
      border-color: rgba(200, 144, 50, .23);
      border-radius: 17px;
      color: #7a693f;
      background: rgba(255, 250, 236, .91);
      transform: translateY(0);
    }

    .platform-case-governance b {
      margin-right: 4px;
      color: #ad7019;
      font-size: 11px;
    }

    .platform-case-governance span {
      color: #6f755e;
      font-size: 9px;
      font-weight: 780;
      white-space: nowrap;
    }

    .platform-case-governance i {
      color: #c2974f;
      font-size: 10px;
      font-style: normal;
    }

    /* 新增第14页 · 用交通体系类比大模型、智能体与 AI 平台 */
    .ai-analogy-slide {
      background:
        radial-gradient(circle at 7% 16%, rgba(246, 167, 72, .11), transparent 27%),
        radial-gradient(circle at 92% 11%, rgba(76, 120, 222, .1), transparent 28%),
        linear-gradient(137deg, #fffdf8 0%, #f7fbff 52%, #f8f7ff 100%);
    }

    .ai-analogy-stage {
      position: relative;
      display: grid;
      grid-template-rows: minmax(0, 1fr) 62px 52px;
      gap: 12px;
      height: 560px;
      padding: 18px 20px 14px;
      overflow: hidden;
      border: 1px solid rgba(42, 78, 123, .14);
      border-radius: 30px;
      background:
        linear-gradient(rgba(65, 94, 132, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(65, 94, 132, .035) 1px, transparent 1px),
        rgba(255, 255, 255, .78);
      background-size: 30px 30px, 30px 30px, auto;
      box-shadow: 0 26px 70px rgba(39, 69, 105, .13), inset 0 1px 0 rgba(255, 255, 255, .96);
      isolation: isolate;
    }

    .ai-analogy-stage::before,
    .ai-analogy-stage::after {
      content: "";
      position: absolute;
      z-index: -1;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(1px);
    }

    .ai-analogy-stage::before {
      left: -115px;
      top: -170px;
      width: 420px;
      height: 420px;
      background: radial-gradient(circle, rgba(242, 166, 69, .15), rgba(242, 166, 69, 0) 68%);
    }

    .ai-analogy-stage::after {
      right: -130px;
      bottom: -220px;
      width: 520px;
      height: 520px;
      background: radial-gradient(circle, rgba(73, 107, 208, .14), rgba(73, 107, 208, 0) 70%);
    }

    .ai-analogy-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      min-height: 0;
      perspective: 1400px;
    }

    .ai-analogy-card {
      --analogy-accent: #d98328;
      --analogy-deep: #8f4f19;
      --analogy-rgb: 217, 131, 40;
      position: relative;
      display: grid;
      grid-template-rows: 58px 177px minmax(0, 1fr);
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(var(--analogy-rgb), .22);
      border-radius: 24px;
      background:
        radial-gradient(circle at 84% 17%, rgba(var(--analogy-rgb), .13), transparent 26%),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(251, 249, 244, .93));
      box-shadow:
        0 18px 38px rgba(43, 69, 97, .1),
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgba(var(--analogy-rgb), .06);
      transform-origin: 50% 90%;
    }

    .ai-analogy-card::before {
      content: "";
      position: absolute;
      left: 22px;
      right: 22px;
      top: 0;
      height: 3px;
      border-radius: 0 0 9px 9px;
      background: linear-gradient(90deg, transparent, var(--analogy-accent), transparent);
      box-shadow: 0 0 20px rgba(var(--analogy-rgb), .36);
    }

    .ai-analogy-card.is-agent {
      --analogy-accent: #168f94;
      --analogy-deep: #14636d;
      --analogy-rgb: 22, 143, 148;
    }

    .ai-analogy-card.is-platform {
      --analogy-accent: #5668c9;
      --analogy-deep: #38488f;
      --analogy-rgb: 86, 104, 201;
    }

    .ai-analogy-card-head {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 11px 15px 8px;
    }

    .ai-analogy-no {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 11px;
      color: #fff;
      background: linear-gradient(145deg, var(--analogy-accent), var(--analogy-deep));
      box-shadow: 0 8px 16px rgba(var(--analogy-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .28);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .04em;
    }

    .ai-analogy-name {
      display: grid;
      min-width: 0;
      gap: 1px;
    }

    .ai-analogy-name small {
      color: var(--analogy-accent);
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .14em;
    }

    .ai-analogy-name strong {
      color: #183c56;
      font-size: 20px;
      font-weight: 950;
      letter-spacing: -.02em;
    }

    .ai-analogy-equals {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border: 1px solid rgba(var(--analogy-rgb), .17);
      border-radius: 99px;
      color: var(--analogy-deep);
      background: rgba(var(--analogy-rgb), .08);
      font-size: 12px;
      font-weight: 920;
      white-space: nowrap;
    }

    .ai-analogy-visual {
      position: relative;
      display: grid;
      min-height: 0;
      place-items: center;
      margin: 0 14px;
      overflow: hidden;
      border: 1px solid rgba(var(--analogy-rgb), .13);
      border-radius: 18px;
      background:
        radial-gradient(ellipse at 50% 76%, rgba(var(--analogy-rgb), .17), transparent 52%),
        linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(var(--analogy-rgb), .045));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -16px 34px rgba(var(--analogy-rgb), .04);
    }

    .ai-analogy-visual::after {
      content: "";
      position: absolute;
      left: 12%;
      right: 12%;
      bottom: 16px;
      height: 16px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(36, 56, 80, .22), rgba(36, 56, 80, 0) 72%);
      filter: blur(5px);
      pointer-events: none;
    }

    .ai-analogy-visual svg {
      position: relative;
      z-index: 2;
      width: 94%;
      height: 94%;
      overflow: visible;
      filter: drop-shadow(0 12px 14px rgba(35, 58, 82, .14));
    }

    .ai-analogy-copy {
      display: grid;
      grid-template-rows: auto auto 1fr;
      align-content: start;
      min-height: 0;
      padding: 12px 16px 14px;
    }

    .ai-analogy-copy h3 {
      margin: 0;
      color: var(--analogy-deep);
      font-size: 20px;
      font-weight: 950;
      line-height: 1.22;
      letter-spacing: -.02em;
    }

    .ai-analogy-copy p {
      margin: 6px 0 0;
      color: #5b6c7a;
      font-size: 13px;
      font-weight: 720;
      line-height: 1.46;
    }

    .ai-analogy-chips {
      display: flex;
      align-items: end;
      gap: 6px;
      margin-top: 9px;
    }

    .ai-analogy-chips span {
      display: inline-flex;
      align-items: center;
      min-height: 23px;
      padding: 0 8px;
      border: 1px solid rgba(var(--analogy-rgb), .17);
      border-radius: 8px;
      color: var(--analogy-deep);
      background: rgba(var(--analogy-rgb), .065);
      font-size: 10.5px;
      font-weight: 900;
      white-space: nowrap;
    }

    .ai-analogy-bridge {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr) 86px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border: 1px solid rgba(49, 87, 127, .12);
      border-radius: 18px;
      background: rgba(255, 255, 255, .78);
      box-shadow: inset 0 1px 0 #fff, 0 9px 22px rgba(38, 71, 101, .06);
    }

    .ai-analogy-layer {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    .ai-analogy-layer > b {
      display: grid;
      width: 32px;
      height: 32px;
      place-items: center;
      border-radius: 10px;
      color: #fff;
      background: linear-gradient(145deg, var(--layer-accent), var(--layer-deep));
      box-shadow: 0 7px 14px rgba(var(--layer-rgb), .2);
      font-size: 11px;
      font-weight: 950;
    }

    .ai-analogy-layer > span {
      display: grid;
      min-width: 0;
      gap: 1px;
    }

    .ai-analogy-layer strong {
      color: #24465c;
      font-size: 13px;
      font-weight: 940;
    }

    .ai-analogy-layer small {
      color: #7a8994;
      font-size: 9.5px;
      font-weight: 760;
      white-space: nowrap;
    }

    .ai-analogy-layer.is-model { --layer-accent: #d98328; --layer-deep: #945019; --layer-rgb: 217, 131, 40; }
    .ai-analogy-layer.is-agent { --layer-accent: #168f94; --layer-deep: #155e68; --layer-rgb: 22, 143, 148; }
    .ai-analogy-layer.is-platform { --layer-accent: #5668c9; --layer-deep: #38488f; --layer-rgb: 86, 104, 201; }

    .ai-analogy-arrow {
      position: relative;
      display: block;
      height: 2px;
      border-radius: 99px;
      background: linear-gradient(90deg, rgba(217, 131, 40, .35), rgba(22, 143, 148, .65), rgba(86, 104, 201, .35));
    }

    .ai-analogy-arrow::after {
      content: "";
      position: absolute;
      right: -1px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-top: 2px solid #5274b7;
      border-right: 2px solid #5274b7;
      transform: translateY(-50%) rotate(45deg);
    }

    .ai-analogy-arrow i {
      position: absolute;
      left: 0;
      top: 50%;
      width: 18px;
      height: 7px;
      border-radius: 99px;
      background: linear-gradient(90deg, transparent, #fff 48%, #50a8a8 72%, transparent);
      box-shadow: 0 0 10px rgba(49, 148, 153, .42);
      transform: translate(-8px, -50%);
      opacity: 0;
    }

    .ai-analogy-thesis {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 17px;
      border: 1px solid rgba(42, 87, 126, .12);
      border-radius: 16px;
      color: #6c7b86;
      background:
        linear-gradient(90deg, rgba(240, 164, 69, .08), rgba(255, 255, 255, .9) 35% 65%, rgba(80, 104, 195, .08));
      box-shadow: inset 0 1px 0 #fff;
      font-size: 11px;
      font-weight: 800;
    }

    .ai-analogy-thesis strong {
      color: #203f57;
      font-size: 15px;
      font-weight: 950;
    }

    .ai-analogy-thesis span {
      color: #9aabb5;
      font-size: 15px;
      font-weight: 500;
    }

    .ai-engine-piston,
    .ai-engine-gear,
    .ai-car-wheel,
    .ai-car-road-light,
    .ai-logistics-flow,
    .ai-logistics-packet {
      transform-box: fill-box;
      transform-origin: center;
    }

    .ai-logistics-flow {
      fill: none;
      stroke-dasharray: 8 8;
      stroke-linecap: round;
    }

    .slide.active .ai-analogy-card {
      animation: ai-analogy-card-in .68s cubic-bezier(.18, .84, .2, 1) both;
      animation-delay: var(--analogy-delay, .08s);
    }

    .slide.active .ai-analogy-bridge { animation: ai-analogy-rise .55s .62s cubic-bezier(.2, .8, .2, 1) both; }
    .slide.active .ai-analogy-thesis { animation: ai-analogy-rise .55s .76s cubic-bezier(.2, .8, .2, 1) both; }
    .slide.active .ai-analogy-arrow i {
      animation: ai-analogy-packet 2.4s linear var(--packet-delay, 0s) infinite;
    }
    .slide.active .ai-engine-piston.is-one { animation: ai-engine-piston 1.05s ease-in-out infinite alternate; }
    .slide.active .ai-engine-piston.is-two { animation: ai-engine-piston 1.05s .26s ease-in-out infinite alternate-reverse; }
    .slide.active .ai-engine-gear { animation: ai-engine-gear 5.2s linear infinite; }
    .slide.active .ai-car-wheel { animation: ai-car-wheel 2.8s linear infinite; }
    .slide.active .ai-car-road-light { animation: ai-car-road 2.2s linear infinite; }
    .slide.active .ai-logistics-flow { animation: ai-logistics-route 3.2s linear infinite; }
    .slide.active .ai-logistics-packet { animation: ai-logistics-pulse 1.8s ease-in-out infinite; }

    .slide:not(.active) .ai-analogy-card,
    .slide:not(.active) .ai-analogy-bridge,
    .slide:not(.active) .ai-analogy-thesis,
    .slide:not(.active) .ai-analogy-arrow i,
    .slide:not(.active) .ai-engine-piston,
    .slide:not(.active) .ai-engine-gear,
    .slide:not(.active) .ai-car-wheel,
    .slide:not(.active) .ai-car-road-light,
    .slide:not(.active) .ai-logistics-flow,
    .slide:not(.active) .ai-logistics-packet { animation-play-state: paused !important; }

    @keyframes ai-analogy-card-in {
      from { opacity: 0; transform: translateY(22px) rotateX(5deg) scale(.975); }
      to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
    }

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

    @keyframes ai-analogy-packet {
      0% { left: 0; opacity: 0; }
      15%, 82% { opacity: 1; }
      100% { left: calc(100% - 8px); opacity: 0; }
    }

    @keyframes ai-engine-piston {
      from { transform: translateY(-4px); }
      to { transform: translateY(7px); }
    }

    @keyframes ai-engine-gear { to { transform: rotate(360deg); } }
    @keyframes ai-car-wheel { to { transform: rotate(360deg); } }
    @keyframes ai-car-road { from { transform: translateX(-30px); opacity: 0; } 30%, 72% { opacity: 1; } to { transform: translateX(70px); opacity: 0; } }
    @keyframes ai-logistics-route { to { stroke-dashoffset: -64; } }
    @keyframes ai-logistics-pulse { 0%, 100% { opacity: .35; transform: scale(.72); } 50% { opacity: 1; transform: scale(1.18); } }

    @media (prefers-reduced-motion: reduce) {
      .ai-analogy-card,
      .ai-analogy-bridge,
      .ai-analogy-thesis,
      .ai-analogy-arrow i,
      .ai-engine-piston,
      .ai-engine-gear,
      .ai-car-wheel,
      .ai-car-road-light,
      .ai-logistics-flow,
      .ai-logistics-packet { animation: none !important; }
    }

    /* 第14页精简版 · 三张写实照片直接建立概念对应关系 */
    .ai-analogy-slide .ai-analogy-stage {
      display: block;
      height: 560px;
      padding: 18px;
      overflow: hidden;
      border: 0;
      border-radius: 30px;
      background: rgba(255, 255, 255, .5);
      box-shadow: 0 26px 70px rgba(39, 69, 105, .11), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

    .ai-analogy-slide .ai-analogy-stage::before,
    .ai-analogy-slide .ai-analogy-stage::after,
    .ai-analogy-slide .ai-analogy-card::before,
    .ai-analogy-slide .ai-analogy-copy,
    .ai-analogy-slide .ai-analogy-bridge,
    .ai-analogy-slide .ai-analogy-thesis,
    .ai-analogy-slide .ai-analogy-no,
    .ai-analogy-slide .ai-analogy-name small { display: none; }

    .ai-analogy-slide .ai-analogy-grid {
      height: 100%;
      gap: 22px;
      perspective: none;
    }

    .ai-analogy-slide .ai-analogy-card {
      display: grid;
      grid-template-rows: minmax(0, 1fr) 92px;
      overflow: hidden;
      border: 1px solid rgba(var(--analogy-rgb), .18);
      border-radius: 26px;
      background: #fff;
      box-shadow: 0 20px 44px rgba(34, 55, 79, .13), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

    .ai-analogy-slide .ai-analogy-card-head {
      grid-row: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 22px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(var(--analogy-rgb), .055));
    }

    .ai-analogy-slide .ai-analogy-name strong {
      color: #18364d;
      font-size: 31px;
      font-weight: 950;
      letter-spacing: -.035em;
    }

    .ai-analogy-slide .ai-analogy-equals {
      min-height: 38px;
      padding: 0 15px;
      border-color: rgba(var(--analogy-rgb), .2);
      background: rgba(var(--analogy-rgb), .09);
      font-size: 17px;
      font-weight: 950;
    }

    .ai-analogy-slide .ai-analogy-visual {
      grid-row: 1;
      margin: 0;
      overflow: hidden;
      border: 0;
      border-radius: 0;
      background-color: #f5f1ea;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      box-shadow: none;
    }

    .ai-analogy-slide .ai-analogy-card.is-model .ai-analogy-visual {
      background-image: url("assets/ppt-theme/visuals/ai-analogy-engine-v1.jpg");
    }

    .ai-analogy-slide .ai-analogy-card.is-agent .ai-analogy-visual {
      background-image: url("assets/ppt-theme/visuals/ai-analogy-car-v1.jpg");
    }

    .ai-analogy-slide .ai-analogy-card.is-platform .ai-analogy-visual {
      background-image: url("assets/ppt-theme/visuals/ai-analogy-fleet-v1.jpg");
      background-position: 54% center;
    }

    .ai-analogy-slide .ai-analogy-visual::after {
      inset: auto 0 0;
      height: 28%;
      border-radius: 0;
      background: linear-gradient(180deg, transparent, rgba(14, 28, 41, .12));
      filter: none;
    }

    .ai-analogy-slide .ai-analogy-visual svg { display: none; }

    .slide.active.ai-analogy-slide .ai-analogy-card {
      animation: ai-analogy-photo-in .58s cubic-bezier(.2, .82, .2, 1) both;
      animation-delay: var(--analogy-delay, 0s);
    }

    @keyframes ai-analogy-photo-in {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide.active.ai-analogy-slide .ai-analogy-card { animation: none !important; }
    }

    /* 第15页 · 三次通用技术革命的时代冲击 */
    .era-shift-slide {
      background:
        radial-gradient(circle at 8% 12%, rgba(217, 156, 57, .08), transparent 27%),
        radial-gradient(circle at 92% 14%, rgba(71, 111, 226, .08), transparent 28%),
        linear-gradient(135deg, #fffdf8, #f5f9ff 58%, #f7f5ff);
    }

    .era-shift-stage {
      position: relative;
      height: 560px;
      overflow: hidden;
      border: 1px solid rgba(29, 68, 111, .18);
      border-radius: 32px;
      background: #07172d;
      box-shadow: 0 29px 76px rgba(22, 49, 82, .22), inset 0 1px 0 rgba(255, 255, 255, .26);
      isolation: isolate;
    }

    .era-shift-stage > img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: saturate(.93) contrast(1.04) brightness(.86);
      transform: scale(1.018);
    }

    .slide.active .era-shift-stage > img {
      animation: era-shift-image-in 1.05s cubic-bezier(.18, .72, .2, 1) both;
    }

    .era-shift-stage::before {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(3, 13, 27, .06) 0%, transparent 34%, rgba(2, 10, 25, .18) 60%, rgba(2, 9, 24, .74) 100%),
        linear-gradient(90deg, rgba(43, 24, 9, .08), transparent 31%, rgba(7, 24, 42, .05) 62%, rgba(23, 12, 62, .10));
    }

    .era-shift-stage::after {
      content: "";
      position: absolute;
      z-index: 5;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 -56px 80px rgba(2, 8, 24, .18);
    }

    .era-shift-energy {
      position: absolute;
      z-index: 2;
      top: 42px;
      bottom: 136px;
      left: -22%;
      width: 18%;
      opacity: 0;
      pointer-events: none;
      transform: skewX(-10deg);
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), rgba(149, 225, 255, .46), rgba(255, 255, 255, .05), transparent);
      filter: blur(2px);
      mix-blend-mode: screen;
    }

    .slide.active .era-shift-energy {
      animation: era-shift-energy 3.8s 1.15s cubic-bezier(.26, .08, .24, 1) both;
    }

    .era-shift-caption-grid {
      position: absolute;
      z-index: 4;
      left: 18px;
      right: 18px;
      bottom: 18px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .era-shift-card {
      position: relative;
      display: grid;
      min-width: 0;
      min-height: 132px;
      padding: 15px 18px 14px;
      overflow: hidden;
      border: 1px solid rgba(var(--era-rgb), .52);
      border-radius: 20px;
      color: white;
      background: linear-gradient(135deg, rgba(4, 13, 26, .88), rgba(var(--era-rgb), .19));
      box-shadow: 0 15px 38px rgba(1, 8, 22, .27), inset 0 1px 0 rgba(255, 255, 255, .15);
      backdrop-filter: blur(16px) saturate(1.12);
      transform: translateY(22px);
      opacity: 0;
    }

    .era-shift-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 16px;
      right: 16px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(var(--era-rgb), .96), transparent);
      box-shadow: 0 0 18px rgba(var(--era-rgb), .5);
    }

    .slide.active .era-shift-card {
      animation: era-shift-card-in .68s cubic-bezier(.16, .8, .22, 1) var(--era-delay, .12s) both;
    }

    .era-shift-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: rgba(255, 255, 255, .64);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .12em;
    }

    .era-shift-meta b {
      color: rgb(var(--era-rgb));
      font-size: 11px;
    }

    .era-shift-pair {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 7px;
      min-width: 0;
      font-size: 25px;
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: -.035em;
      white-space: nowrap;
    }

    .era-shift-pair i {
      flex: 0 0 auto;
      color: rgb(var(--era-rgb));
      font-size: 28px;
      font-style: normal;
      text-shadow: 0 0 18px rgba(var(--era-rgb), .52);
    }

    .era-shift-card p {
      margin: 8px 0 0;
      color: rgba(235, 243, 255, .78);
      font-size: 15px;
      font-weight: 680;
      line-height: 1.38;
    }

    @keyframes era-shift-image-in {
      from { opacity: .35; transform: scale(1.075); filter: saturate(.65) contrast(.96) brightness(.72); }
      to { opacity: 1; transform: scale(1.018); filter: saturate(.93) contrast(1.04) brightness(.86); }
    }

    @keyframes era-shift-card-in {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes era-shift-energy {
      0% { left: -22%; opacity: 0; }
      12% { opacity: .92; }
      82% { opacity: .78; }
      100% { left: 108%; opacity: 0; }
    }

    @keyframes platform-image-in {
      from { opacity: .18; transform: scale(.985); filter: saturate(.72) contrast(.96); }
      to { opacity: 1; transform: scale(1); filter: saturate(.98) contrast(1.015); }
    }

    @keyframes platform-label-in {
      from { opacity: 0; transform: translate3d(0, 10px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes platform-core-label-in {
      from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.96); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes platform-bottom-label-in {
      from { opacity: 0; transform: translate(-50%, 10px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    @keyframes platform-phase-in {
      from { opacity: .35; transform: translateY(7px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .era-shift-stage > img,
      .era-shift-energy,
      .era-shift-card,
      .platform-team-node,
      .platform-team-arrow,
      .platform-ecosystem-visual > img,
      .platform-orchestration-visual > img,
      .platform-case-visual > img,
      .platform-visual-label,
      .platform-case-label,
      .platform-case-governance,
      .platform-orchestration-rail li {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }
    }

    @media print {
      .era-shift-stage > img,
      .era-shift-energy,
      .era-shift-card,
      .platform-team-node,
      .platform-team-arrow,
      .platform-ecosystem-visual > img,
      .platform-orchestration-visual > img,
      .platform-case-visual > img,
      .platform-visual-label,
      .platform-case-label,
      .platform-case-governance,
      .platform-orchestration-rail li {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }
    }

    /* 第39页：共享能力与全学科应用 */
    .subject-ecosystem-slide .slide-content {
      padding-top: 22px;
    }

    .subject-ecosystem {
      position: relative;
      display: grid;
      grid-template-rows: 96px 42px minmax(0, 1fr);
      width: 100%;
      height: 100%;
      isolation: isolate;
    }

    .subject-ecosystem::before,
    .subject-ecosystem::after {
      content: "";
      position: absolute;
      z-index: -1;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(4px);
    }

    .subject-ecosystem::before {
      left: 2%;
      top: 18%;
      width: 420px;
      height: 420px;
      background: radial-gradient(circle, rgba(29, 158, 160, .10), transparent 68%);
    }

    .subject-ecosystem::after {
      right: 2%;
      bottom: -8%;
      width: 460px;
      height: 460px;
      background: radial-gradient(circle, rgba(76, 93, 196, .09), transparent 69%);
    }

    .subject-capability-rail {
      position: relative;
      display: grid;
      grid-template-columns: 66px minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      min-width: 0;
      height: 96px;
      padding: 14px 24px 14px 17px;
      overflow: hidden;
      border: 1px solid rgba(38, 115, 157, .22);
      border-radius: 25px;
      background:
        radial-gradient(circle at 8% 0%, rgba(40, 190, 184, .20), transparent 30%),
        radial-gradient(circle at 87% 108%, rgba(77, 91, 204, .14), transparent 35%),
        linear-gradient(118deg, rgba(255, 255, 255, .98), rgba(242, 250, 249, .94) 48%, rgba(245, 246, 255, .96));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .96),
        inset 0 -1px 0 rgba(44, 103, 146, .09),
        0 18px 46px rgba(24, 70, 117, .10);
      -webkit-backdrop-filter: blur(16px) saturate(1.25);
      backdrop-filter: blur(16px) saturate(1.25);
    }

    .subject-capability-rail::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(23, 140, 151, .04) 1px, transparent 1px),
        linear-gradient(rgba(23, 140, 151, .035) 1px, transparent 1px);
      background-size: 28px 28px;
      -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .78), transparent 56%);
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, .78), transparent 56%);
    }

    .subject-capability-rail::after {
      content: "";
      position: absolute;
      top: -80%;
      bottom: -80%;
      left: -16%;
      width: 11%;
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
      transform: skewX(-18deg);
    }

    .subject-core-mark {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      border: 1px solid rgba(23, 126, 144, .26);
      border-radius: 20px;
      color: #fff;
      background: linear-gradient(145deg, #1ca5a4, #176d8d 56%, #364aaf);
      box-shadow: inset 0 1px rgba(255, 255, 255, .42), 0 11px 25px rgba(27, 111, 138, .25);
    }

    .subject-core-mark::before {
      content: "";
      position: absolute;
      inset: -7px;
      border: 1px solid rgba(26, 142, 153, .16);
      border-radius: 24px;
    }

    .subject-core-mark svg {
      width: 34px;
      height: 34px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .subject-core-copy {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-items: end;
      column-gap: 18px;
      min-width: 0;
    }

    .subject-core-copy small {
      grid-column: 1 / -1;
      margin-bottom: 3px;
      color: #36808b;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .17em;
    }

    .subject-core-copy strong {
      color: #102b59;
      font-size: 27px;
      line-height: 1.08;
      letter-spacing: -.02em;
    }

    .subject-core-copy span {
      min-width: 0;
      overflow: hidden;
      color: #526984;
      font-size: 17px;
      font-weight: 650;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .subject-core-rule {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      padding: 9px 17px;
      border: 1px solid rgba(46, 77, 169, .16);
      border-radius: 999px;
      color: #283f79;
      background: rgba(255, 255, 255, .72);
      box-shadow: inset 0 1px rgba(255, 255, 255, .92), 0 7px 18px rgba(46, 66, 132, .08);
      font-size: 16px;
      font-weight: 800;
      white-space: nowrap;
    }

    .subject-core-rule i {
      position: relative;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #1aa69f;
      box-shadow: 0 0 0 5px rgba(26, 166, 159, .12), 0 0 18px rgba(26, 166, 159, .32);
    }

    .subject-branches {
      display: block;
      width: 100%;
      height: 42px;
      overflow: visible;
      pointer-events: none;
    }

    .subject-branch-base,
    .subject-branch-beam {
      fill: none;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
    }

    .subject-branch-base {
      stroke: rgba(55, 105, 153, .22);
      stroke-width: 1.5;
    }

    .subject-branch-beam {
      stroke: url(#subject-branch-gradient);
      stroke-width: 3;
      stroke-dasharray: 4 50;
      filter: url(#subject-branch-glow);
    }

    .subject-branch-node {
      fill: #fff;
      stroke: #359aa4;
      stroke-width: 2;
      filter: url(#subject-branch-glow);
    }

    .subject-card-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      min-height: 0;
      height: 100%;
    }

    .subject-card {
      --subject-rgb: 28, 143, 151;
      --subject-accent: #168c94;
      position: relative;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      min-width: 0;
      min-height: 0;
      padding: 17px;
      overflow: hidden;
      border: 1px solid rgba(var(--subject-rgb), .28);
      border-radius: 23px;
      background:
        radial-gradient(circle at 86% 3%, rgba(var(--subject-rgb), .18), transparent 30%),
        linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(250, 252, 252, .95) 56%, rgba(var(--subject-rgb), .055));
      box-shadow:
        inset 0 1px rgba(255, 255, 255, .96),
        inset 0 0 0 1px rgba(255, 255, 255, .48),
        0 18px 42px rgba(26, 56, 96, .11);
    }

    .subject-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 18px;
      right: 18px;
      height: 4px;
      border-radius: 0 0 8px 8px;
      background: linear-gradient(90deg, transparent, var(--subject-accent) 18%, rgba(255, 255, 255, .95) 50%, var(--subject-accent) 82%, transparent);
      box-shadow: 0 0 16px rgba(var(--subject-rgb), .42);
    }

    .subject-card::after {
      content: "";
      position: absolute;
      top: -45%;
      left: -72%;
      width: 44%;
      height: 190%;
      pointer-events: none;
      opacity: .46;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .78), transparent);
      transform: rotate(17deg);
    }

    .subject-card.is-science {
      --subject-rgb: 47, 101, 210;
      --subject-accent: #315fd0;
    }

    .subject-card.is-humanities {
      --subject-rgb: 115, 83, 181;
      --subject-accent: #7657b8;
    }

    .subject-card.is-art {
      --subject-rgb: 190, 126, 42;
      --subject-accent: #bd7d2c;
    }

    .subject-card-head {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 66px;
      padding: 0 2px 13px;
    }

    .subject-card-icon {
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      border: 1px solid rgba(var(--subject-rgb), .23);
      border-radius: 16px;
      color: var(--subject-accent);
      background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(var(--subject-rgb), .10));
      box-shadow: inset 0 1px rgba(255, 255, 255, .98), 0 8px 18px rgba(var(--subject-rgb), .13);
    }

    .subject-card-icon svg,
    .subject-card-row-icon svg {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .subject-card-title {
      min-width: 0;
    }

    .subject-card-title small {
      display: block;
      margin-bottom: 2px;
      color: var(--subject-accent);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .15em;
    }

    .subject-card-title h3 {
      margin: 0;
      color: #102653;
      font-size: 25px;
      line-height: 1.1;
      letter-spacing: -.02em;
      white-space: nowrap;
    }

    .subject-card-no {
      align-self: start;
      min-width: 30px;
      padding-top: 2px;
      color: rgba(var(--subject-rgb), .62);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .subject-card-body {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: repeat(3, minmax(0, 1fr));
      gap: 9px;
      min-height: 0;
    }

    .subject-card-row {
      display: grid;
      grid-template-columns: 39px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      min-width: 0;
      min-height: 0;
      padding: 10px 11px;
      border: 1px solid rgba(var(--subject-rgb), .14);
      border-radius: 15px;
      background: rgba(255, 255, 255, .74);
      box-shadow: inset 0 1px rgba(255, 255, 255, .94);
    }

    .subject-card-row:nth-child(2) {
      background: linear-gradient(110deg, rgba(var(--subject-rgb), .08), rgba(255, 255, 255, .78));
    }

    .subject-card-row-icon {
      display: grid;
      place-items: center;
      width: 37px;
      height: 37px;
      border-radius: 12px;
      color: var(--subject-accent);
      background: rgba(var(--subject-rgb), .10);
    }

    .subject-card-row-icon svg {
      width: 20px;
      height: 20px;
      stroke-width: 1.9;
    }

    .subject-card-row-copy {
      min-width: 0;
    }

    .subject-card-row-copy strong {
      display: block;
      margin-bottom: 3px;
      color: var(--subject-accent);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: .04em;
    }

    .subject-card-row-copy p {
      margin: 0;
      color: #263b5e;
      font-size: 17px;
      font-weight: 650;
      line-height: 1.42;
    }

    .slide.active .subject-capability-rail {
      animation: subject-ecosystem-enter .62s cubic-bezier(.2, .82, .22, 1) both;
    }

    .slide.active .subject-capability-rail::after {
      animation: subject-rail-sheen 6.8s ease-in-out 1s infinite;
    }

    .slide.active .subject-branch-beam {
      animation: subject-branch-flow 3.4s linear infinite;
    }

    .slide.active .subject-card {
      animation: subject-ecosystem-enter .66s cubic-bezier(.18, .84, .22, 1) both;
      animation-delay: var(--subject-delay, .1s);
    }

    .slide.active .subject-card::after {
      animation: subject-card-sheen 7.6s ease-in-out calc(1.2s + var(--subject-delay, 0s)) infinite;
    }

    @keyframes subject-ecosystem-enter {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes subject-rail-sheen {
      0%, 66%, 100% { left: -16%; opacity: 0; }
      72% { opacity: .82; }
      88% { left: 112%; opacity: 0; }
    }

    @keyframes subject-branch-flow {
      to { stroke-dashoffset: -108; }
    }

    @keyframes subject-card-sheen {
      0%, 70%, 100% { left: -72%; opacity: 0; }
      76% { opacity: .46; }
      92% { left: 132%; opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .subject-capability-rail,
      .subject-capability-rail::after,
      .subject-branch-beam,
      .subject-card,
      .subject-card::after {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }
    }

    /* 完整蓝图：校级与区域教育管理 */
    .gov-ops-icon-defs {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    .gov-ops-icon {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.85;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .school-governance-slide .slide-head h2,
    .regional-governance-slide .slide-head h2 {
      font-size: 46px;
    }

    .school-governance-ui,
    .regional-governance-ui {
      position: relative;
      display: grid;
      height: 100%;
      min-height: 0;
      gap: 13px;
      isolation: isolate;
    }

    .school-governance-ui {
      grid-template-rows: 74px minmax(0, 1fr) 64px;
    }

    .school-governance-ui::before,
    .regional-governance-ui::before {
      content: "";
      position: absolute;
      inset: -18px -24px -22px;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(circle at 12% 8%, rgba(44, 135, 186, .10), transparent 30%),
        radial-gradient(circle at 88% 88%, rgba(32, 173, 139, .08), transparent 34%);
      -webkit-mask-image: linear-gradient(to bottom, #000, transparent 96%);
      mask-image: linear-gradient(to bottom, #000, transparent 96%);
    }

    .school-command-rail,
    .region-command-rail {
      position: relative;
      display: grid;
      grid-template-columns: minmax(310px, auto) minmax(0, 1fr);
      align-items: center;
      gap: 24px;
      min-width: 0;
      overflow: hidden;
      padding: 12px 18px;
      border: 1px solid rgba(42, 98, 169, .18);
      border-radius: 22px;
      background:
        radial-gradient(circle at 3% 16%, rgba(47, 130, 190, .16), transparent 24%),
        linear-gradient(115deg, rgba(255, 255, 255, .96), rgba(245, 251, 250, .94));
      box-shadow: inset 0 1px rgba(255, 255, 255, .98), 0 14px 34px rgba(31, 70, 116, .09);
    }

    .school-command-rail::after,
    .region-command-rail::after {
      content: "";
      position: absolute;
      top: -80%;
      left: -14%;
      width: 10%;
      height: 260%;
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
      transform: rotate(18deg);
    }

    .school-command-brand,
    .region-command-brand {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: center;
      gap: 13px;
      min-width: 0;
    }

    .school-command-icon,
    .region-command-icon {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(24, 135, 151, .22);
      border-radius: 15px;
      color: #127f8e;
      background: linear-gradient(145deg, #fff, rgba(30, 165, 159, .10));
      box-shadow: inset 0 1px #fff, 0 8px 18px rgba(18, 111, 130, .11);
    }

    .school-command-brand small,
    .region-command-brand small {
      display: block;
      margin-bottom: 3px;
      color: #37818a;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .16em;
    }

    .school-command-brand strong,
    .region-command-brand strong {
      display: block;
      color: #102a58;
      font-size: 24px;
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: -.02em;
    }

    .school-command-principles,
    .region-command-metrics {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      min-width: 0;
    }

    .school-command-principles span,
    .region-command-metrics span {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 0;
      min-height: 40px;
      padding: 7px 10px;
      border: 1px solid rgba(41, 107, 166, .13);
      border-radius: 13px;
      color: #29456f;
      background: rgba(255, 255, 255, .72);
      box-shadow: inset 0 1px rgba(255, 255, 255, .96);
      font-size: 14px;
      font-weight: 820;
      white-space: nowrap;
    }

    .school-command-principles i,
    .region-command-metrics i {
      flex: 0 0 auto;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #20ad91;
      box-shadow: 0 0 0 4px rgba(32, 173, 145, .10), 0 0 12px rgba(32, 173, 145, .28);
    }

    .school-governance-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 13px;
      min-height: 0;
    }

    .school-governance-card {
      --school-rgb: 37, 112, 195;
      --school-accent: #276fc1;
      position: relative;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      min-width: 0;
      min-height: 0;
      padding: 14px 15px 13px;
      overflow: hidden;
      border: 1px solid rgba(var(--school-rgb), .20);
      border-radius: 20px;
      background:
        radial-gradient(circle at 92% 3%, rgba(var(--school-rgb), .14), transparent 31%),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(249, 252, 253, .96) 62%, rgba(var(--school-rgb), .055));
      box-shadow: inset 0 1px rgba(255, 255, 255, .98), 0 14px 32px rgba(26, 59, 103, .09);
    }

    .school-governance-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 16px;
      bottom: 16px;
      width: 4px;
      border-radius: 0 8px 8px 0;
      background: var(--school-accent);
      box-shadow: 0 0 14px rgba(var(--school-rgb), .32);
    }

    .school-governance-card.is-mastery { --school-rgb: 27, 154, 142; --school-accent: #148d82; }
    .school-governance-card.is-trace { --school-rgb: 111, 81, 178; --school-accent: #7053ad; }
    .school-governance-card.is-supervision { --school-rgb: 190, 127, 45; --school-accent: #b97521; }
    .school-governance-card.is-patrol { --school-rgb: 40, 137, 167; --school-accent: #27859f; }
    .school-governance-card.is-attention { --school-rgb: 179, 83, 100; --school-accent: #ae5263; }

    .school-card-head {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 11px;
      min-width: 0;
    }

    .school-card-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 13px;
      color: var(--school-accent);
      background: rgba(var(--school-rgb), .10);
      box-shadow: inset 0 1px rgba(255, 255, 255, .92);
    }

    .school-card-head h3 {
      margin: 0;
      color: #132b55;
      font-size: 21px;
      font-weight: 900;
      line-height: 1.12;
      white-space: nowrap;
    }

    .school-card-head small {
      display: block;
      margin-top: 3px;
      color: #667a92;
      font-size: 12px;
      font-weight: 720;
      letter-spacing: .02em;
    }

    .school-card-no {
      align-self: start;
      color: rgba(var(--school-rgb), .72);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .09em;
    }

    .school-card-micro {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 33px;
      margin: 9px 0 7px 53px;
      padding: 5px 8px;
      overflow: hidden;
      border: 1px solid rgba(var(--school-rgb), .12);
      border-radius: 10px;
      background: rgba(var(--school-rgb), .055);
    }

    .school-card-micro > span,
    .school-card-micro > b {
      min-width: 0;
      color: var(--school-accent);
      font-size: 11px;
      font-weight: 850;
      white-space: nowrap;
    }

    .school-card-micro.is-stages > span {
      position: relative;
      flex: 1 1 0;
      padding: 4px 6px;
      border-radius: 7px;
      text-align: center;
      background: rgba(255, 255, 255, .78);
    }

    .school-card-micro.is-stages > span:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -6px;
      width: 5px;
      height: 1px;
      background: rgba(var(--school-rgb), .42);
    }

    .school-card-micro.is-mastery-bars {
      gap: 5px;
    }

    .school-card-micro.is-mastery-bars span {
      flex: 1 1 0;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(var(--school-rgb), .12);
    }

    .school-card-micro.is-mastery-bars span::before {
      content: "";
      display: block;
      width: var(--mastery-width, 60%);
      height: 100%;
      border-radius: inherit;
      background: var(--school-accent);
      box-shadow: 0 0 8px rgba(var(--school-rgb), .22);
    }

    .school-card-micro.is-trace-line i {
      width: 8px;
      height: 8px;
      border: 2px solid rgba(255, 255, 255, .94);
      border-radius: 50%;
      background: var(--school-accent);
      box-shadow: 0 0 0 3px rgba(var(--school-rgb), .12);
    }

    .school-card-micro.is-trace-line em {
      flex: 1 1 auto;
      height: 2px;
      border-radius: 99px;
      background: linear-gradient(90deg, rgba(var(--school-rgb), .18), var(--school-accent));
    }

    .school-card-micro.is-radar {
      justify-content: center;
      overflow: visible;
    }

    .school-card-micro.is-radar span {
      position: relative;
      width: 25px;
      height: 25px;
      border: 1px solid rgba(var(--school-rgb), .35);
      border-radius: 50%;
      background: radial-gradient(circle, var(--school-accent) 0 2px, transparent 3px);
    }

    .school-card-micro.is-radar span::before,
    .school-card-micro.is-radar span::after {
      content: "";
      position: absolute;
      inset: 4px;
      border: 1px solid rgba(var(--school-rgb), .22);
      border-radius: inherit;
    }

    .school-card-micro.is-radar span::after {
      inset: 50% 3px auto 50%;
      width: 10px;
      height: 1px;
      border: 0;
      border-radius: 0;
      background: var(--school-accent);
      transform-origin: left center;
    }

    .school-card-micro.is-attention-wave {
      justify-content: center;
      gap: 4px;
    }

    .school-card-micro.is-attention-wave i {
      width: 5px;
      height: var(--wave-height, 12px);
      border-radius: 99px;
      background: linear-gradient(180deg, rgba(var(--school-rgb), .36), var(--school-accent));
    }

    .school-card-list {
      display: grid;
      align-content: start;
      gap: 4px;
      margin: 0;
      padding: 0 0 0 54px;
      list-style: none;
    }

    .school-card-list li {
      position: relative;
      margin: 0;
      padding-left: 13px;
      color: #344b69;
      font-size: 15.5px;
      font-weight: 660;
      line-height: 1.28;
    }

    .school-card-list li::before {
      content: "";
      position: absolute;
      top: .52em;
      left: 0;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--school-accent);
      box-shadow: 0 0 0 3px rgba(var(--school-rgb), .10);
    }

    .school-governance-footer,
    .region-governance-footer {
      display: grid;
      grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      min-width: 0;
      padding: 9px 15px;
      border: 1px solid rgba(40, 102, 162, .16);
      border-radius: 18px;
      background: rgba(255, 255, 255, .82);
      box-shadow: inset 0 1px rgba(255, 255, 255, .98), 0 10px 24px rgba(35, 67, 108, .07);
    }

    .school-loop {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 7px;
    }

    .school-loop span {
      flex: 1 1 0;
      min-width: 0;
      padding: 7px 5px;
      border: 1px solid rgba(36, 127, 143, .14);
      border-radius: 10px;
      color: #286476;
      background: rgba(31, 159, 148, .07);
      font-size: 13px;
      font-weight: 850;
      text-align: center;
      white-space: nowrap;
    }

    .school-loop i {
      flex: 0 0 auto;
      width: 13px;
      height: 1px;
      background: linear-gradient(90deg, rgba(39, 111, 193, .18), #1a9b91);
    }

    .school-governance-footer strong,
    .region-governance-footer strong {
      color: #183760;
      font-size: 15px;
      font-weight: 860;
      line-height: 1.32;
    }

    /* 区域教育管理 */
    .regional-governance-ui {
      grid-template-rows: 72px minmax(0, 1fr) 62px;
      gap: 14px;
    }

    .regional-governance-ui::before {
      background:
        radial-gradient(circle at 10% 4%, rgba(49, 91, 191, .11), transparent 31%),
        radial-gradient(circle at 92% 88%, rgba(114, 84, 179, .08), transparent 34%);
    }

    .region-command-rail {
      grid-template-columns: minmax(350px, auto) minmax(0, 1fr);
      border-color: rgba(54, 91, 180, .19);
      background:
        radial-gradient(circle at 4% 12%, rgba(55, 90, 190, .16), transparent 25%),
        linear-gradient(115deg, rgba(255, 255, 255, .97), rgba(247, 248, 255, .95));
    }

    .region-command-icon {
      color: #315bc1;
      border-color: rgba(49, 91, 193, .22);
      background: linear-gradient(145deg, #fff, rgba(71, 94, 196, .10));
    }

    .region-command-brand small { color: #536bb0; }
    .region-command-metrics i { background: #5d6bd2; box-shadow: 0 0 0 4px rgba(93, 107, 210, .10), 0 0 12px rgba(93, 107, 210, .24); }

    .region-architecture {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 14px;
      min-height: 0;
    }

    .region-map,
    .region-foundation {
      min-width: 0;
      min-height: 0;
      border: 1px solid rgba(52, 91, 169, .17);
      border-radius: 22px;
      background: rgba(255, 255, 255, .83);
      box-shadow: inset 0 1px rgba(255, 255, 255, .98), 0 16px 36px rgba(31, 59, 111, .085);
    }

    .region-map {
      position: relative;
      display: grid;
      grid-template-rows: 70px minmax(0, 1fr) 65px 46px;
      gap: 9px;
      overflow: hidden;
      padding: 12px 14px;
      background:
        linear-gradient(rgba(58, 94, 162, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58, 94, 162, .035) 1px, transparent 1px),
        rgba(255, 255, 255, .84);
      background-size: 28px 28px, 28px 28px, auto;
    }

    .region-command-center {
      position: relative;
      display: grid;
      grid-template-columns: minmax(250px, auto) minmax(0, 1fr);
      align-items: center;
      gap: 16px;
      padding: 10px 13px;
      border: 1px solid rgba(53, 83, 184, .22);
      border-radius: 17px;
      background: linear-gradient(120deg, rgba(241, 246, 255, .96), rgba(255, 255, 255, .94));
      box-shadow: inset 0 1px rgba(255, 255, 255, .98), 0 8px 20px rgba(45, 73, 136, .08);
    }

    .region-command-center::after {
      content: "";
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: -10px;
      height: 2px;
      background: linear-gradient(90deg, transparent, #4565ca 20%, #16a196 50%, #7660bd 80%, transparent);
      box-shadow: 0 0 12px rgba(70, 96, 199, .26);
    }

    .region-command-center strong {
      color: #182f68;
      font-size: 22px;
      font-weight: 920;
      line-height: 1.12;
    }

    .region-command-center strong small {
      display: block;
      margin-bottom: 3px;
      color: #5b70ae;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .15em;
    }

    .region-center-badges {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
    }

    .region-center-badges span {
      padding: 7px 5px;
      border: 1px solid rgba(68, 94, 182, .13);
      border-radius: 9px;
      color: #435a91;
      background: rgba(255, 255, 255, .78);
      font-size: 13px;
      font-weight: 850;
      text-align: center;
      white-space: nowrap;
    }

    .region-service-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
      min-height: 0;
      padding-top: 2px;
    }

    .region-service-card {
      --region-rgb: 53, 94, 190;
      --region-accent: #355dba;
      position: relative;
      display: grid;
      grid-template-rows: 38px auto minmax(0, 1fr);
      align-content: start;
      min-width: 0;
      min-height: 0;
      padding: 11px 10px 9px;
      overflow: hidden;
      border: 1px solid rgba(var(--region-rgb), .18);
      border-radius: 16px;
      background:
        radial-gradient(circle at 88% 5%, rgba(var(--region-rgb), .13), transparent 34%),
        linear-gradient(150deg, rgba(255, 255, 255, .98), rgba(var(--region-rgb), .045));
      box-shadow: inset 0 1px rgba(255, 255, 255, .96), 0 9px 22px rgba(35, 61, 108, .07);
    }

    .region-service-card.is-campus { --region-rgb: 30, 143, 145; --region-accent: #168889; }
    .region-service-card.is-supervise { --region-rgb: 181, 123, 48; --region-accent: #ad742c; }
    .region-service-card.is-research { --region-rgb: 111, 82, 178; --region-accent: #6c53ae; }

    .region-service-icon {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      color: var(--region-accent);
      background: rgba(var(--region-rgb), .10);
    }

    .region-service-card h3 {
      margin: 8px 0 5px;
      color: #1a315e;
      font-size: 20px;
      font-weight: 900;
      line-height: 1.12;
    }

    .region-service-card p {
      margin: 0;
      color: #4b607d;
      font-size: 15px;
      font-weight: 650;
      line-height: 1.34;
    }

    .region-standard-spine {
      display: grid;
      grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
      align-items: center;
      gap: 13px;
      padding: 9px 12px;
      border: 1px solid rgba(31, 143, 144, .18);
      border-radius: 15px;
      background: linear-gradient(105deg, rgba(228, 249, 245, .82), rgba(255, 255, 255, .92));
    }

    .region-standard-title strong {
      display: block;
      color: #176c72;
      font-size: 18px;
      font-weight: 900;
      line-height: 1.1;
    }

    .region-standard-title small {
      display: block;
      margin-top: 3px;
      color: #5b7c82;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .region-standard-steps {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 6px;
    }

    .region-standard-steps span {
      flex: 1 1 0;
      min-width: 0;
      padding: 6px 4px;
      border: 1px solid rgba(24, 136, 137, .12);
      border-radius: 8px;
      color: #2a6a72;
      background: rgba(255, 255, 255, .76);
      font-size: 12.5px;
      font-weight: 850;
      text-align: center;
      white-space: nowrap;
    }

    .region-standard-steps i {
      flex: 0 0 8px;
      height: 1px;
      background: #48a7a1;
    }

    .region-school-row {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      min-width: 0;
    }

    .region-school-row span {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid rgba(66, 95, 170, .14);
      border-radius: 10px;
      color: #42598a;
      background: rgba(247, 250, 255, .92);
      font-size: 12.5px;
      font-weight: 830;
      white-space: nowrap;
    }

    .region-school-row span::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4e70ce;
      box-shadow: 0 0 0 3px rgba(78, 112, 206, .10);
    }

    .region-foundation {
      position: relative;
      display: grid;
      grid-template-rows: auto repeat(5, minmax(0, 1fr));
      gap: 8px;
      overflow: hidden;
      padding: 14px;
      background:
        radial-gradient(circle at 100% 0, rgba(112, 83, 178, .15), transparent 38%),
        linear-gradient(150deg, rgba(255, 255, 255, .96), rgba(249, 247, 255, .93));
    }

    .region-foundation-head {
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 42px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(91, 82, 166, .14);
    }

    .region-foundation-head span {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 13px;
      color: #6c55ac;
      background: rgba(110, 84, 177, .10);
    }

    .region-foundation-head strong {
      display: block;
      color: #322f67;
      font-size: 19px;
      font-weight: 900;
    }

    .region-foundation-head small {
      display: block;
      margin-top: 2px;
      color: #756f91;
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .10em;
    }

    .region-foundation-item {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      min-height: 0;
      padding: 7px 9px;
      border: 1px solid rgba(103, 84, 171, .12);
      border-radius: 12px;
      background: rgba(255, 255, 255, .72);
    }

    .region-foundation-item > span {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      color: #7059ae;
      background: rgba(110, 84, 177, .09);
      font-size: 12px;
      font-weight: 900;
    }

    .region-foundation-item strong {
      display: block;
      color: #423c68;
      font-size: 15px;
      font-weight: 880;
      line-height: 1.15;
    }

    .region-foundation-item p {
      margin: 2px 0 0;
      color: #716d82;
      font-size: 12.5px;
      font-weight: 650;
      line-height: 1.2;
    }

    .region-governance-footer {
      grid-template-columns: minmax(0, 1fr) auto;
      border-color: rgba(55, 90, 178, .17);
      background: linear-gradient(100deg, rgba(243, 247, 255, .90), rgba(255, 255, 255, .84));
    }

    .region-governance-footer strong {
      color: #1e3975;
      font-size: 18px;
    }

    .region-governance-footer span {
      color: #576b91;
      font-size: 13px;
      font-weight: 780;
      white-space: nowrap;
    }

    .slide.active .school-command-rail,
    .slide.active .region-command-rail,
    .slide.active .school-governance-footer,
    .slide.active .region-governance-footer,
    .slide.active .region-map,
    .slide.active .region-foundation {
      animation: gov-ops-enter .56s cubic-bezier(.2, .82, .22, 1) both;
    }

    .slide.active .school-command-rail::after,
    .slide.active .region-command-rail::after {
      animation: gov-ops-sheen 6.8s ease-in-out 1.1s infinite;
    }

    .slide.active .school-governance-card,
    .slide.active .region-service-card,
    .slide.active .region-foundation-item {
      animation: gov-ops-card-enter .58s cubic-bezier(.2, .82, .22, 1) both;
      animation-delay: var(--gov-delay, .1s);
    }

    .slide.active .school-card-micro.is-radar span::after {
      animation: gov-radar-sweep 2.8s linear infinite;
    }

    @keyframes gov-ops-enter {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes gov-ops-card-enter {
      from { opacity: 0; transform: translateY(10px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes gov-ops-sheen {
      0%, 68%, 100% { left: -14%; opacity: 0; }
      74% { opacity: .72; }
      90% { left: 112%; opacity: 0; }
    }

    @keyframes gov-radar-sweep {
      to { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .school-command-rail,
      .school-command-rail::after,
      .school-governance-card,
      .school-governance-footer,
      .region-command-rail,
      .region-command-rail::after,
      .region-map,
      .region-service-card,
      .region-foundation,
      .region-foundation-item,
      .region-governance-footer,
      .school-card-micro.is-radar span::after {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }
    }

    @media print {
      .subject-capability-rail,
      .subject-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }
    }

    @media (max-width: 760px) {
      .presentation-tools .toolbar { width: 52px; }
      .presentation-tools .tool-button { width: 38px; height: 38px; }
      .presentation-tools .floating-tool-orb { width: 48px; height: 48px; }
      .help-content { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      .slide,
      #progress span,
      .presentation-tools .floating-tool-orb,
      .presentation-tools .gesture-camera-panel { transition: none !important; }
    }

    @media print {
      html,
      body {
        width: 1600px;
        height: auto;
        overflow: visible;
        background: white;
      }

      #viewport {
        position: static;
        overflow: visible;
        background: white;
      }

      #stage {
        position: static;
        width: 1600px;
        height: auto;
        transform: none !important;
        box-shadow: none;
        overflow: visible;
      }

      .slide {
        position: relative;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        break-after: page;
        page-break-after: always;
      }

      .deck-footer { display: flex; }

      #progress,
      #pageCounter,
      #minuteWatermark,
      #overview,
      #helpOverlay,
      #solarSystemModal,
      #coursewarePreviewModal,
      #solarSystemDepthLayer,
      .cover-fullscreen,
      .presentation-tools { display: none !important; }
    }