/* Shared shell is loaded separately; only page-local right panel styles here. */
/* The shared shell must include its own padding and borders in the measured columns. */
*,*::before,*::after{box-sizing:border-box;}
html{background:#0b1118;color:#e6f1f5;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;}
body{margin:0;min-height:100dvh;background:#0b1118;color:#e6f1f5;}
.liquid-layout{padding:18px 24px;min-height:100dvh;}
.liquid-sidebar{padding:20px 22px;background:linear-gradient(155deg,#17242e,#101820);border:1px solid #ffffff1c;}
.liquid-sidebar .detail-panel-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px;gap:10px;}
.liquid-sidebar .back-link{color:#82e1d4;font-size:12px;font-weight:600;text-decoration:none;}
.liquid-sidebar .case-counter{color:#91a6b0;font-size:11px;}
.liquid-sidebar .case-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px;}
.liquid-sidebar .case-tabs a{color:#c6d7df;background:#ffffff0c;border:1px solid #ffffff25;text-decoration:none;font-size:12px;font-weight:600;border-radius:13px;padding:10px 13px;}
.liquid-sidebar .case-tabs a.active{color:#99f9df;background:#21776648;border-color:#4dd3b8bb;}
.liquid-sidebar h1{font-size:21px;line-height:1.3;margin:0 0 10px;}
.liquid-sidebar .lede{font-size:13px;line-height:1.75;color:#b6c9cd;margin:0 0 20px;}
.liquid-sidebar .detail-card{padding:17px 16px;margin-bottom:14px;background:#ffffff0a;border:1px solid #ffffff18;border-radius:19px;}
.liquid-sidebar .detail-card h2{font-size:14px;color:#ebf4f6;margin:0 0 12px;}
.liquid-sidebar .detail-card p{color:#aec1c8;font-size:12px;line-height:1.75;}
.liquid-sidebar .dock-btn{font-size:11px;border:1px solid #ffffff24;background:#ffffff0d;padding:0 12px;}
.liquid-sidebar .dock-btn.active{border-color:#66cfc2;color:#b4fff0;background:#266e6444;}
.liquid-sidebar .dock-btn.play-all-btn{color:#101f1b;background:#8fe7c5;border:0;}
.liquid-sidebar .live-row{font-size:12px;color:#c9dde1;line-height:1.85;}
.liquid-sidebar .copy-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.liquid-sidebar .copy-row button{border:1px solid #77cfbd63;background:#2b615b42;color:#d5fff3;padding:9px 12px;border-radius:12px;font:600 12px inherit;cursor:pointer;}
.liquid-sidebar .copy-row button:hover{background:#36756880;}
.liquid-sidebar .demo-skill-source{width:100%;margin-top:10px;background:#0c151b;color:#c2d8d6;border:1px solid #ffffff24;border-radius:12px;padding:12px;font:12px/1.55 monospace;}
.liquid-sidebar .prompt-source{white-space:pre-wrap;overflow-wrap:anywhere;color:#c4d9df;font-size:12px;line-height:1.65;}
.liquid-sidebar .footnote{font-size:11px;color:#aabdc3;line-height:1.7;margin:12px 0;}
.liquid-phone::-webkit-scrollbar,.liquid-sidebar::-webkit-scrollbar{display:none;}
.liquid-phone{scrollbar-width:none;}
.liquid-sidebar a:focus-visible,.liquid-sidebar button:focus-visible,.liquid-phone button:focus-visible{outline:2px solid #99f9df;outline-offset:2px;}
@media(min-width:961px) and (min-device-width:801px){body{height:100dvh;overflow:hidden;}.liquid-layout{height:100dvh;min-height:0;align-content:center;}.liquid-sidebar{height:844px;}}
@media(max-width:960px), (max-device-width:800px){.liquid-layout{padding:16px 12px 28px;}.liquid-sidebar{max-height:none;height:auto;overflow:visible;}.liquid-layout{min-height:100dvh;}}
@media(max-width:390px), (max-device-width:390px){.liquid-layout{padding-inline:12px;}.liquid-sidebar{padding:15px;}.liquid-sidebar .case-tabs a{padding:9px 10px;}}
@media(min-width:961px) and (min-device-width:801px) and (max-height:890px){body{height:auto;overflow-y:auto}.liquid-layout{height:auto;min-height:880px}}
@media(prefers-reduced-motion:reduce){.liquid-phone *, .liquid-phone *::before, .liquid-phone *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}


    /* ==========================================================================
       1. 全局重置与字体排版 (100% 原生自包含 CSS)
       ========================================================================== */
    .liquid-phone {
      --blur-px: 28px;
      --saturate-pct: 170%;
      --bg-alpha: 0.10;
      --rim-alpha: 0.55; /* #fff8 */
      --refract-filter: url(#svg-lens-refract);
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --green-check: #38c57a;
      --red-cross: #e84c4f;
      --code-cyan: #8ce2ff;
    }

    .liquid-phone, .liquid-phone * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    .liquid-phone-base {
      width: 100%;
      height: 100%;
      background: #080b10;
      color: #ffffff;
      font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
      overflow: hidden;
      position: relative;
      isolation: isolate;
      user-select: none;
    }

    /* ==========================================================================
       2. 9:16 原视频等比画布舞台 (竖屏满屏无黑框，桌面端严格 9:16)
       ========================================================================== */
    .stage-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      max-width: none;
      overflow: hidden;
      background: #000000;
      flex-shrink: 0;
    }

    /* ==========================================================================
       3. 原视频背景图层与中心圆形扩散转场 (clip-path: circle)
       ========================================================================== */
    .bg-stack {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      background: #000;
    }

    .bg-layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center center;
      opacity: 0;
      transition: opacity 0.42s var(--ease-out), transform 0.55s var(--ease-out);
    }

    .bg-layer.active {
      opacity: 1;
      z-index: 2;
    }

    .bg-layer.circle-reveal {
      opacity: 1;
      z-index: 3;
      animation: circleRevealAnim 0.72s var(--ease-out) forwards;
    }

    @keyframes circleRevealAnim {
      0% { clip-path: circle(0% at 50% 38%); }
      100% { clip-path: circle(110% at 50% 38%); }
    }

    .bg-layer.slide-down-reveal {
      opacity: 1;
      z-index: 3;
      animation: slideDownBgAnim 0.52s var(--ease-out) forwards;
    }

    @keyframes slideDownBgAnim {
      0% { transform: translateY(-100%); }
      100% { transform: translateY(0%); }
    }

    #bg-ocean   { background-image: url("./assets/bg-7d6746dde1fb.jpg"); }
    #bg-dunes   { background-image: url("./assets/bg-9fbc093ae494.jpg"); }
    #bg-clouds  { background-image: url("./assets/bg-0086d0f9360f.jpg"); }
    #bg-gravel  { background-image: url("./assets/bg-a32d487a9bbb.jpg"); }
    #bg-flat    { background: linear-gradient(180deg, #b0b4d6 0%, #aeb3d8 50%, #a9b4dc 100%); }
    #bg-candies { background-image: url("./assets/bg-b5d167969677.jpg"); }

    /* ==========================================================================
       4. 核心五步液态玻璃配方 (.glass) —— 单层真实 SVG 边缘位移滤镜 + 1px 锐利亮边
       ========================================================================== */
    .glass {
      position: relative;
      backdrop-filter: var(--refract-filter) blur(var(--blur-px)) saturate(var(--saturate-pct));
      -webkit-backdrop-filter: var(--refract-filter) blur(var(--blur-px)) saturate(var(--saturate-pct));
      background: rgba(255, 255, 255, var(--bg-alpha));
      box-shadow:
        inset 1px 1px 0px 0px rgba(255, 255, 255, var(--rim-alpha)),
        inset -0.7px -0.7px 0px 0px rgba(255, 255, 255, calc(var(--rim-alpha) * 0.48)),
        0 14px 34px rgba(0, 0, 0, 0.25);
      transition:
        backdrop-filter 0.32s var(--ease-out),
        -webkit-backdrop-filter 0.32s var(--ease-out),
        background 0.32s var(--ease-out),
        box-shadow 0.32s var(--ease-out),
        top 0.52s var(--ease-out),
        height 0.38s var(--ease-out),
        transform 0.42s var(--ease-out);
    }

    /* 第 0 步初始透明线框态 (视频 00:09 "先做玻璃") */
    .glass.step0-wireframe {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: rgba(255, 255, 255, 0) !important;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48) !important;
    }

    /* ==========================================================================
       5. 顶部阶段标题胶囊 ("第一步 玻璃" / "第二步 挑背景" / "回顾 五步配方")
       严格对齐原视频 y = 6.5%
       ========================================================================== */
    .top-stage-pill {
      position: absolute;
      top: 6.4%;
      left: 50%;
      transform: translateX(-50%);
      height: 30px;
      min-width: 164px;
      padding: 0 18px 0 8px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      z-index: 20;
      cursor: pointer;
      backdrop-filter: blur(24px) saturate(170%);
      -webkit-backdrop-filter: blur(24px) saturate(170%);
      background: rgba(255, 255, 255, 0.12);
      box-shadow:
        inset 1px 1px 0px rgba(255, 255, 255, 0.58),
        inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.25),
        0 6px 20px rgba(0, 0, 0, 0.24);
      transition: opacity 0.32s var(--ease-out);
    }

    .top-stage-pill .tag-chip {
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.24);
      box-shadow: inset 0.5px 0.5px 0 rgba(255, 255, 255, 0.22);
      font-size: 10.5px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.92);
    }

    .top-stage-pill .tag-title {
      font-size: 13px;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: 0.04em;
    }

    /* ==========================================================================
       6. 五步配方胶囊栏 (严格对齐原视频 y = 13.7%)
       ========================================================================== */
    .steps-row {
      position: absolute;
      top: 13.7%;
      left: 4.5%;
      right: 4.5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      z-index: 20;
      transition: opacity 0.32s var(--ease-out);
    }

    .step-chip {
      flex: 1;
      height: 29px;
      border-radius: 999px;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
      color: #ffffff;
      font-size: 11.5px;
      font-weight: 700;
      backdrop-filter: blur(20px) saturate(165%);
      -webkit-backdrop-filter: blur(20px) saturate(165%);
      background: rgba(255, 255, 255, 0.11);
      box-shadow:
        inset 1px 1px 0px rgba(255, 255, 255, 0.48),
        inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.22);
      transition: all 0.25s var(--ease-out);
    }

    .step-chip.state-pending {
      color: rgba(255, 255, 255, 0.65);
      background: rgba(255, 255, 255, 0.08);
    }
    .step-chip.state-pending .chip-icon {
      background: rgba(255, 255, 255, 0.42);
      color: rgba(20, 25, 35, 0.85);
    }

    .step-chip.state-active {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.20);
      box-shadow:
        0 0 0 1.5px #ffffff,
        0 0 12px rgba(255, 255, 255, 0.32),
        0 6px 14px rgba(0, 0, 0, 0.26);
    }
    .step-chip.state-active .chip-icon {
      background: #ffffff;
      color: #111827;
    }

    .step-chip.state-done {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.12);
    }
    .step-chip.state-done .chip-icon {
      background: var(--green-check);
      color: #ffffff;
    }

    .chip-icon {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9.5px;
      font-weight: 800;
      flex-shrink: 0;
    }

    /* ==========================================================================
       7. 中央核心组件：「想聊什么，我在呢...」液态玻璃卡片 (y = 28.6%, width = 74.8%)
       支持第 5 步真实一体式液态波浪上边缘变形 (wavy-top-active)
       ========================================================================== */
    .chat-glass-card {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 74.8%;
      height: 11.4%;
      min-height: 86px;
      top: 28.6%;
      border-radius: 24px;
      padding: 17px 32px 15px 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 15;
    }

    /* 当第 5 步触发一体式顶部液态波浪隆起时 (对应 10_21.5s_dunes_step5_refract.jpg)
       卡片自身向上扩展 26px 并使用 SVG clipPath 裁剪为一体式双波峰曲线，内部直接模糊折射真实沙丘背景，绝无水平分割线! */
    .chat-glass-card.wavy-top-active {
      margin-top: -26px;
      height: calc(11.4% + 26px);
      min-height: 112px;
      padding-top: 43px;
      border-radius: 0 0 24px 24px;
      clip-path: url(#wavy-card-clip);
      -webkit-clip-path: url(#wavy-card-clip);
      box-shadow: none !important;
    }

    .wavy-border-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: 0;
      z-index: 5;
    }

    .chat-glass-card.wavy-top-active .wavy-border-svg {
      opacity: 1;
    }

    /* 分离跃起的水滴 (对应 t=22.17s) */
    .pinched-droplet {
      position: absolute;
      top: -22px;
      left: 31%;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      backdrop-filter: blur(18px) saturate(180%);
      -webkit-backdrop-filter: blur(18px) saturate(180%);
      background: rgba(255, 165, 95, 0.35);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.72), 0 4px 10px rgba(0, 0, 0, 0.25);
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px) scale(0.4);
      transition: all 0.45s var(--ease-out);
      z-index: 16;
    }

    .pinched-droplet.rising {
      opacity: 1;
      transform: translateY(0px) scale(1);
    }

    .chat-input-row {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
    }

    .chat-input {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      color: #ffffff;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    }

    .chat-input::placeholder {
      color: #ffffff;
      opacity: 0.96;
    }

    .chat-icons-row {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0;
    }

    .chat-icon-btn {
      background: transparent;
      border: none;
      color: #ffffff;
      opacity: 0.95;
      cursor: pointer;
      padding: 2px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s var(--ease-spring);
    }

    .chat-icon-btn:hover {
      transform: scale(1.12);
    }

    .chat-icon-btn svg {
      width: 20px;
      height: 20px;
    }

    /* ==========================================================================
       8. 视频 00:18 右上角「×3.2·边缘高光」圆形放大镜 (不透明深褐紫底，遮挡底层防穿帮!)
       ========================================================================== */
    .edge-loupe-wrap {
      position: absolute;
      top: -34px;
      right: -14px;
      width: 106px;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
      z-index: 30;
      opacity: 0;
      transform: scale(0.4);
      transform-origin: center center;
      transition: opacity 0.32s var(--ease-out), transform 0.38s var(--ease-spring);
    }

    .edge-loupe-wrap.visible {
      opacity: 1;
      transform: scale(1);
    }

    .edge-loupe-circle {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, 0.88);
      overflow: hidden;
      position: relative;
      /* 不透明深褐紫沙丘暗面底色，完全遮住底层卡片右上角，只显示干净的 3.2x 放大弧线 (对应 09_18.2s) */
      background: linear-gradient(145deg, #675051 0%, #523e40 100%);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    }

    .edge-loupe-arc {
      position: absolute;
      top: 18px;
      right: 16px;
      width: 148px;
      height: 148px;
      border-radius: 64px;
      background: rgba(255, 255, 255, 0.05);
      box-shadow:
        inset 2.8px 2.8px 0px rgba(255, 255, 255, 0.85),
        0 6px 18px rgba(0, 0, 0, 0.35);
    }

    .edge-loupe-caption {
      margin-top: 5px;
      font-size: 9.8px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.02em;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
      white-space: nowrap;
    }

    /* ==========================================================================
       9. 底部 `.glass { ... }` 代码块卡片 (严格对齐原视频 y = 48.2% ~ 68.5%)
       ========================================================================== */
    .code-glass-card {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 80.5%;
      top: 48.2%;
      border-radius: 23px;
      padding: 15px 22px;
      z-index: 15;
      font-family: "JetBrains Mono", "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
      font-size: 11.2px;
      line-height: 1.54;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .code-row {
      position: relative;
      z-index: 2;
      white-space: pre;
      display: flex;
      align-items: center;
      min-height: 18px;
    }

    .code-row.hidden-row {
      display: none;
    }

    .code-Span-box {
      display: inline-block;
      padding: 0px 6px;
      margin: 0 -6px;
      border-radius: 5px;
      transition: background 0.25s ease;
    }

    .code-Span-box.active-line-pill {
      background: rgba(255, 255, 255, 0.22);
    }

    .c-prop { color: var(--code-cyan); }
    .c-val { color: #ffffff; }
    .c-comment { color: rgba(255, 255, 255, 0.78); }

    /* ==========================================================================
       10. 视频 00:47 底部「收藏」胶囊按钮 (y = 71.8%) & 底部居中大字幕 (y = 77.5%)
       ========================================================================== */
    .bookmark-pill-btn {
      position: absolute;
      top: 71.6%;
      left: 50%;
      transform: translateX(-50%);
      height: 35px;
      padding: 0 20px;
      border-radius: 999px;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      z-index: 20;
      backdrop-filter: blur(24px) saturate(170%);
      -webkit-backdrop-filter: blur(24px) saturate(170%);
      background: rgba(255, 255, 255, 0.12);
      box-shadow:
        inset 1px 1px 0px rgba(255, 255, 255, 0.58),
        inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.22),
        0 8px 22px rgba(0, 0, 0, 0.32);
      transition: all 0.3s var(--ease-out);
    }

    .bookmark-pill-btn.hidden-el {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(6px) scale(0.92);
    }

    /* 原视频底部大字幕严格位于 top: 77.5% (下方留有充足呼吸空间，绝不贴底!) */
    .video-caption {
      position: absolute;
      top: 77.5%;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 21.5px;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: 0.04em;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
      z-index: 35;
      pointer-events: none;
    }

    /* ==========================================================================
       11. 分镜 A 专属：00:00 巨型「玻璃 / 界面」大字 (紧凑间距，下半截与上半截伸入玻璃框内透字!)
       ========================================================================== */
    .intro-giant-words {
      position: absolute;
      left: 0;
      right: 0;
      top: 17.5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
      z-index: 5;
      opacity: 0;
      transition: opacity 0.32s ease;
    }

    .intro-giant-words.visible {
      opacity: 1;
    }

    .giant-word {
      font-size: 102px;
      font-weight: 900;
      color: #ffffff;
      line-height: 1.0;
      letter-spacing: 0.04em;
      text-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
    }

    .giant-word.top-word {
      margin-bottom: 16px;
    }

    .intro-glass-orb {
      touch-action: none;
      position: absolute;
      top: 23.2%;
      left: 75%;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      z-index: 22;
      cursor: grab;
      backdrop-filter: var(--refract-filter) blur(12px) saturate(180%);
      -webkit-backdrop-filter: var(--refract-filter) blur(12px) saturate(180%);
      background: radial-gradient(
        circle at 32% 30%,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.08) 52%,
        rgba(0, 0, 0, 0.14) 100%
      );
      box-shadow:
        inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.78),
        inset -1px -1px 2px rgba(255, 255, 255, 0.32),
        0 10px 24px rgba(0, 0, 0, 0.32);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.32s ease, left 0.55s var(--ease-out), top 0.55s var(--ease-out);
    }

    .intro-glass-orb.visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* ==========================================================================
       12. 分镜 D 专属：「第二步 挑背景」正反例评估胶囊与 340px 虚线圆
       ========================================================================== */
    .diagnosis-stack {
      position: absolute;
      top: 46.8%;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      z-index: 20;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s var(--ease-out), top 0.52s var(--ease-out);
    }

    .diagnosis-stack.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .diag-pill {
      height: 31px;
      padding: 0 15px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 11.8px;
      font-weight: 700;
      color: #ffffff;
      cursor: pointer;
      backdrop-filter: blur(22px) saturate(170%);
      -webkit-backdrop-filter: blur(22px) saturate(170%);
      background: rgba(255, 255, 255, 0.13);
      box-shadow:
        inset 1px 1px 0px rgba(255, 255, 255, 0.58),
        inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.22),
        0 6px 18px rgba(0, 0, 0, 0.24);
    }

    .diag-badge {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9.5px;
      font-weight: 900;
      color: #ffffff;
      flex-shrink: 0;
    }

    .diag-badge.good { background: var(--green-check); }
    .diag-badge.bad  { background: var(--red-cross); }

    .ocean-scale-circles {
      position: absolute;
      top: 53.5%;
      left: 0;
      right: 0;
      height: 170px;
      pointer-events: none;
      z-index: 18;
      opacity: 0;
      transition: opacity 0.32s ease;
    }

    .ocean-scale-circles.visible {
      opacity: 1;
    }

    .circle-28px-wrap {
      position: absolute;
      left: 18%;
      top: 38px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
    }

    .circle-28px {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, 0.92);
      background: rgba(255, 255, 255, 0.08);
    }

    .circle-340px-wrap {
      position: absolute;
      right: 9%;
      top: -6px;
      width: 142px;
      height: 142px;
      border-radius: 50%;
      border: 1.5px dashed rgba(255, 255, 255, 0.92);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .scale-label {
      font-size: 11px;
      font-weight: 700;
      color: #ffffff;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
    }

    /* ==========================================================================
       13. 分镜 B 专属：「同一块玻璃 · 三个背景」同屏对比视图 (严格对齐 03_05.0s)
       ========================================================================== */
    .scene-three-bgs {
      position: absolute;
      inset: 0;
      background: #000000;
      z-index: 25;
      display: none;
      flex-direction: column;
      align-items: center;
      padding-top: 11.2%;
    }

    .scene-three-bgs.active {
      display: flex;
    }

    .three-cards-stack {
      position: relative;
      width: 91%;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .bg-strip-card {
      position: relative;
      width: 100%;
      height: 116px;
      border-radius: 15px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.52s var(--ease-out);
      background-size: cover;
      background-position: center;
    }

    .bg-strip-card.strip-gravel {
      background-image: url("./assets/bg-a32d487a9bbb.jpg");
    }

    .bg-strip-card.strip-flat {
      background: linear-gradient(180deg, #b5b9dc 0%, #aeb3d8 100%);
    }

    .bg-strip-card.strip-clouds {
      background-image: url("./assets/bg-0086d0f9360f.jpg");
      background-position: center 65%;
    }

    .three-cards-stack.expanded-clouds .strip-gravel,
    .three-cards-stack.expanded-clouds .strip-flat {
      height: 0px;
      opacity: 0;
      margin: -4.5px 0;
      pointer-events: none;
    }

    .three-cards-stack.expanded-clouds .strip-clouds {
      height: 368px;
      border-radius: 22px;
    }

    .strip-corner-pill {
      position: absolute;
      top: 9px;
      left: 9px;
      height: 25px;
      padding: 0 10px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10.8px;
      font-weight: 700;
      color: #ffffff;
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      background: rgba(255, 255, 255, 0.18);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.58), 0 4px 12px rgba(0, 0, 0, 0.2);
      opacity: 0;
      transform: translateY(-4px);
      transition: all 0.3s var(--ease-out);
      z-index: 5;
    }

    .strip-corner-pill.show {
      opacity: 1;
      transform: translateY(0);
    }

    .three-icon-pill {
      width: 192px;
      height: 50px;
      border-radius: 999px;
      padding: 0 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #ffffff;
      z-index: 4;
      box-shadow:
        inset 1.2px 1.2px 1px rgba(255, 255, 255, 0.72),
        inset -2px -1px 5px rgba(185, 215, 255, 0.42),
        0 10px 24px rgba(0, 0, 0, 0.28);
      transition: transform 0.6s var(--ease-out);
    }

    .three-icon-pill svg {
      width: 18px;
      height: 18px;
      position: relative;
      z-index: 2;
    }

    .cloud-step1-badge {
      position: absolute;
      top: 118px;
      left: 50%;
      transform: translateX(-50%) scale(0.85);
      height: 27px;
      padding: 0 15px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 700;
      color: #ffffff;
      backdrop-filter: blur(20px) saturate(170%);
      -webkit-backdrop-filter: blur(20px) saturate(170%);
      background: rgba(120, 165, 235, 0.35);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.65), 0 6px 16px rgba(0, 0, 0, 0.22);
      opacity: 0;
      pointer-events: none;
      transition: all 0.32s var(--ease-spring);
      z-index: 6;
    }

    .cloud-step1-badge.show {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }


    /* ==========================================================================
       14. 分镜 F 专属：五步液态玻璃「登录/注册组件」模态层
       ========================================================================== */
    .login-overlay-view {
      position: absolute;
      inset: 0;
      z-index: 26;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .login-overlay-view.active {
      display: flex;
    }

    .login-card {
      width: 86%;
      border-radius: 26px;
      padding: 22px 20px;
      color: #ffffff;
    }

    .login-header {
      position: relative;
      z-index: 2;
      margin-bottom: 14px;
      text-align: center;
    }

    .login-header h2 {
      font-size: 17.5px;
      font-weight: 800;
    }

    .login-header p {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.76);
      margin-top: 3px;
    }

    .login-tabs {
      position: relative;
      z-index: 2;
      display: flex;
      background: rgba(0, 0, 0, 0.24);
      border-radius: 14px;
      padding: 3px;
      margin-bottom: 14px;
      box-shadow: inset 0.5px 0.5px 0 rgba(255, 255, 255, 0.22);
    }

    .login-tab-slider {
      position: absolute;
      top: 3px;
      bottom: 3px;
      left: 3px;
      width: calc(33.333% - 2px);
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.22);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6), 0 3px 10px rgba(0, 0, 0, 0.22);
      transition: transform 0.36s var(--ease-out);
      pointer-events: none;
    }

    .login-tab-btn {
      flex: 1;
      height: 29px;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.72);
      font-size: 11.8px;
      font-weight: 600;
      cursor: pointer;
      position: relative;
      z-index: 2;
    }

    .login-tab-btn.active {
      color: #ffffff;
      font-weight: 800;
    }

    .login-body-viewport {
      position: relative;
      z-index: 2;
      overflow: hidden;
      transition: height 0.36s var(--ease-out);
    }

    .field-wrap {
      position: relative;
      margin-bottom: 10px;
    }

    .field-input {
      width: 100%;
      height: 44px;
      padding: 15px 58px 4px 36px;
      border-radius: 13px;
      border: 1px solid rgba(255, 255, 255, 0.24);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.25);
      color: #ffffff;
      font-size: 13px;
      outline: none;
      transition: all 0.25s var(--ease-out);
    }

    #lCodeInput { padding-right: 5px; }
    .field-input::placeholder { color: transparent; }

    .field-input:focus {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.72);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.65), 0 0 0 3px rgba(255, 255, 255, 0.14);
    }

    .field-label {
      position: absolute;
      left: 36px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.68);
      pointer-events: none;
      transform-origin: left top;
      transition: all 0.24s var(--ease-out);
    }

    .field-input:focus ~ .field-label,
    .field-input:not(:placeholder-shown) ~ .field-label {
      top: 6px;
      transform: translateY(0) scale(0.75);
      color: rgba(255, 255, 255, 0.92);
      font-weight: 700;
    }

    .field-icon-left {
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255, 255, 255, 0.78);
      pointer-events: none;
      display: flex;
    }

    .field-actions-right {
      position: absolute;
      right: 9px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .mini-action-btn {
      width: 21px;
      height: 21px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.16);
      color: #ffffff;
      font-size: 10.5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .login-submit-btn {
      width: 100%;
      height: 41px;
      border-radius: 13px;
      border: none;
      background: linear-gradient(135deg, rgba(56, 197, 122, 0.85), rgba(32, 158, 185, 0.85));
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.65), 0 8px 20px rgba(0, 0, 0, 0.26);
      color: #ffffff;
      font-size: 13.5px;
      font-weight: 800;
      cursor: pointer;
    }

    .social-row {
      position: relative;
      z-index: 2;
      margin-top: 13px;
      padding-top: 11px;
      border-top: 1px solid rgba(255, 255, 255, 0.16);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .social-icons {
      display: flex;
      gap: 8px;
    }

    .social-btn {
      width: 31px;
      height: 31px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.14);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.52);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    /* ==========================================================================
       15. 底部悬浮分镜导航坞 (无滚动条，轻巧悬浮)
       ========================================================================== */
    .external-dock {
      position: static;
      transform: none;
      height: auto;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px;
      z-index: auto;
      max-width: none;
      overflow: visible;
    }

    .external-dock::-webkit-scrollbar {
      display: none;
    }

    .dock-btn {
      height: 34px;
      padding: 0 10px;
      border-radius: 999px;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.72);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.22s ease;
    }

    .dock-btn.active {
      color: #ffffff;
      font-weight: 800;
      background: rgba(255, 255, 255, 0.22);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
    }

    .dock-btn.play-all-btn {
      background: var(--green-check);
      color: #ffffff;
      font-weight: 800;
    }

    .dock-divider {
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.18);
      margin: 0 2px;
      flex-shrink: 0;
    }
  
    .code-row.disabled-effect{opacity:.34;}