:root {
      --bg: #050507;
      --fg: rgba(255, 255, 255, 0.92);
      --muted: rgba(255, 255, 255, 0.62);
      --faint: rgba(255, 255, 255, 0.12);
      --hair: #2a2a33;
      --panel: rgba(255, 255, 255, 0.05);
      --panel-2: rgba(255, 255, 255, 0.07);
      --panel-solid: rgba(0, 0, 0, 0.58);
      --panel-solid-2: rgba(0, 0, 0, 0.72);
      --accent: #ff3b3b;
      --accent-2: #ff7a3c;

      --chroma-red: 255, 59, 59;
      --chroma-indigo: 64, 56, 255;

      --radius: 18px;
      --topbar-h: 58px;

      --max: 1120px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

      /* ===== 楼层主题字体（本地 woff2，参考 home.html 楼层标题） ===== */
      --font-y2k: "VT323", "Courier New", var(--mono), monospace;
      --font-crt: "Press Start 2P", "Courier New", var(--mono), monospace;
      --font-rorrerror: "Major Mono Display", "Lucida Console", var(--mono), monospace;
    }

    /* ===== 本地字体加载（fonts/*.woff2） ===== */
    @font-face {
      font-family: "VT323";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("fonts/vt323-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: "Press Start 2P";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("fonts/press-start-2p-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: "Major Mono Display";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("fonts/major-mono-display-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: "AtomicMarker";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src:
        url("ttf/AtomicMarker-subset.woff2") format("woff2"),
        url("ttf/AtomicMarker-subset.ttf") format("truetype");
    }

    /* Y2K 粉色主题：仅当 shell 显示 Y2K Meter 子页时启用，仅调色 */
    body[data-theme="y2k"] {
      --bg: #ffeaf4;                    /* 同步 y2k 子页底色，消除 iframe 缝隙黑边 */
      --chroma-red: 255, 110, 180;      /* 热粉，替换原红 */
      --chroma-indigo: 180, 120, 255;   /* 淡紫，替换原蓝紫 */
      --accent: #ff6eb4;
      --accent-2: #ffb3d9;
      --hair: #f3a8c8;                  /* 顶栏底边线：粉 */
    }
    /* 顶栏整体换成粉色底，呼应 y2k 子页 #ffeaf4 */
    body[data-theme="y2k"] .topnav {
      background: linear-gradient(180deg, #ffe4f0 0%, #ffd6e8 100%);
      border-bottom-color: rgba(255, 143, 181, 0.55);
    }
    /* 品牌文字：深粉更显眼 */
    body[data-theme="y2k"] .topnav .brand {
      color: #a21d5d;
    }
    body[data-theme="y2k"] .topnav .brand .brand-title {
      color: #a21d5d;
      text-shadow: none;
    }
    body[data-theme="y2k"] .topnav .brand .brand-author {
      color: rgba(162, 29, 93, 0.72);
      border-left-color: rgba(162, 29, 93, 0.22);
    }
    /* 右侧按钮（ABOUT / PLUGIN）：白色胶囊 + 深粉文字 + 粉色描边 */
    body[data-theme="y2k"] .topnav .about-btn,
    body[data-theme="y2k"] .topnav .plugin-btn {
      background: rgba(255, 255, 255, 0.78);
      border-color: rgba(255, 143, 181, 0.55);
      color: #a21d5d;
    }
    body[data-theme="y2k"] .topnav .about-btn:hover,
    body[data-theme="y2k"] .topnav .plugin-btn:hover {
      background: #ffd6e8;
      border-color: rgba(255, 110, 180, 0.80);
      box-shadow:
        0 18px 42px rgba(255, 143, 181, 0.35),
        0 0 0 1px rgba(255, 110, 180, 0.35),
        0 0 22px rgba(255, 180, 215, 0.55);
    }
    body[data-theme="y2k"] .topnav .plugin-btn[data-open="1"],
    body[data-theme="y2k"] .topnav .about-btn[data-active="1"] {
      background: #ffd6e8;
      border-color: rgba(255, 110, 180, 0.80);
      color: #a21d5d;
      box-shadow:
        0 18px 42px rgba(255, 143, 181, 0.35),
        0 0 0 1px rgba(255, 110, 180, 0.35),
        0 0 20px rgba(255, 180, 215, 0.45);
    }
    body[data-theme="y2k"] .topnav .about-btn:active,
    body[data-theme="y2k"] .topnav .plugin-btn:active,
    body[data-theme="y2k"] .topnav .about-btn:focus-visible,
    body[data-theme="y2k"] .topnav .plugin-btn:focus-visible {
      box-shadow:
        0 0 0 3px rgba(255, 180, 215, 0.55),
        0 0 0 1px rgba(255, 110, 180, 0.75),
        0 0 24px rgba(255, 143, 181, 0.45);
    }

    /* 插件下拉面板 plugin-pop：整体粉色化 */
    body[data-theme="y2k"] .plugin-pop {
      background: rgba(255, 234, 244, 0.96);
      border-color: rgba(255, 143, 181, 0.55);
      box-shadow: 0 22px 60px rgba(162, 29, 93, 0.22);
    }
    body[data-theme="y2k"] .plugin-pop .pop-blur {
      background: rgba(255, 234, 244, 0.86);
    }
    body[data-theme="y2k"] .plugin-pop .head {
      border-bottom-color: rgba(162, 29, 93, 0.14);
    }
    body[data-theme="y2k"] .plugin-pop .head .title { color: #a21d5d; }
    body[data-theme="y2k"] .plugin-pop .head .sub   { color: rgba(162, 29, 93, 0.62); }
    body[data-theme="y2k"] .plugin-pop .close {
      background: rgba(255, 255, 255, 0.72);
      border-color: rgba(255, 143, 181, 0.55);
      color: #a21d5d;
    }
    body[data-theme="y2k"] .plugin-pop .close:hover {
      background: #ffd6e8;
      border-color: rgba(255, 110, 180, 0.80);
      box-shadow:
        0 10px 22px rgba(255, 143, 181, 0.30),
        0 0 0 1px rgba(255, 110, 180, 0.40);
    }
    /* 插件选项条 */
    body[data-theme="y2k"] .plugin-opt {
      background: rgba(255, 255, 255, 0.70);
      border-color: rgba(255, 143, 181, 0.32);
    }
    body[data-theme="y2k"] .plugin-opt .name { color: #a21d5d; }
    body[data-theme="y2k"] .plugin-opt .meta { color: rgba(162, 29, 93, 0.62); }
    body[data-theme="y2k"] .plugin-opt[aria-checked="true"] {
      background:
        radial-gradient(220px 120px at 18% 18%, rgba(255, 110, 180, 0.18), transparent 62%),
        radial-gradient(240px 140px at 82% 30%, rgba(180, 120, 255, 0.12), transparent 60%),
        rgba(255, 255, 255, 0.86);
    }
    body[data-theme="y2k"] .plugin-opt[data-disabled="1"] {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(255, 245, 250, 0.60)),
        rgba(255, 220, 234, 0.50);
      border-color: rgba(162, 29, 93, 0.10);
    }
    body[data-theme="y2k"] .plugin-opt[data-disabled="1"] .name { color: rgba(162, 29, 93, 0.52); }
    body[data-theme="y2k"] .plugin-opt[data-disabled="1"] .meta { color: rgba(162, 29, 93, 0.36); }
    /* 底部 */
    body[data-theme="y2k"] .plugin-pop .foot { border-top-color: rgba(162, 29, 93, 0.14); }
    body[data-theme="y2k"] .plugin-pop .sel  { color: rgba(162, 29, 93, 0.78); }
    body[data-theme="y2k"] .plugin-pop .quick a { color: rgba(162, 29, 93, 0.80); }
    body[data-theme="y2k"] .plugin-pop .quick a:hover {
      color: #a21d5d;
      background: rgba(255, 255, 255, 0.72);
      border-color: rgba(255, 143, 181, 0.45);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--fg);
font-family: var(--sans), sans-serif;
      overflow-x: hidden;
    }


    .skip {
      position: fixed;
      left: 12px;
      top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--hair);
      background: rgba(0,0,0,0.8);
      color: var(--fg);
      text-decoration: none;
      transform: translateY(-160%);
      opacity: 0;
      pointer-events: none;
      transition: transform 120ms ease, opacity 120ms ease;
      z-index: 20;
font-family: var(--mono), monospace;
      font-size: 12px;
    }

    .skip:focus {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .initial-focus-sink {
      position: fixed;
      inset: auto 0 0 auto;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .initial-focus-sink:focus,
    .initial-focus-sink:focus-visible {
      outline: none;
      box-shadow: none;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: linear-gradient(180deg, rgba(5,5,7,0.98), rgba(5,5,7,0.92));
      border-bottom: 1px solid var(--hair);
    }

    /* Top fixed navigation (does not affect existing layout) */
    .topnav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 40;
      height: var(--topbar-h);
      background: linear-gradient(180deg, rgba(5,5,7,0.98), rgba(5,5,7,0.92));
      border-bottom: 1px solid var(--hair);
    }

    .topnav .inner {
      position: relative;
      z-index: 1;
      height: 100%;
      max-width: var(--max);
      width: 100%;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .topnav .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: rgba(255,255,255,0.92);
      padding: 10px 10px;
      border-radius: 14px;
      border: 1px solid transparent;
      transition: background 140ms ease, border-color 140ms ease;
      white-space: nowrap;
    }

    .topnav .brand:hover {
      background: transparent;
      border-color: transparent;
    }

  .topnav .brand .logo img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      filter: drop-shadow(0 8px 16px rgba(0,0,0,0.55));
    }

  .topnav .brand .brand-title {
      font-family: var(--mono), monospace;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 18px;
      color: rgba(255,255,255,0.92);
    }

    /* 中英文分字体：避免 mono 栈中文 fallback 到宋体 */
    .topnav .brand .brand-title .bt-en {
      font-family: var(--mono), monospace;
      letter-spacing: 0.14em;
    }
    .topnav .brand .brand-title .bt-cn {
      font-family: "PingFang SC", "Microsoft YaHei", "Microsoft YaHei UI", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", var(--sans), sans-serif;
      letter-spacing: 0.04em;
      margin-left: 4px;
      font-size: 16px;
      font-weight: 600;
      vertical-align: 1px;
    }

    .topnav .brand .brand-author {
      font-family: var(--mono), monospace;
      font-size: 12px;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,0.62);
      padding-left: 8px;
      margin-left: 6px;
      border-left: 1px solid rgba(255,255,255,0.10);
      white-space: nowrap;
    }

    .topnav .right {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

  .topnav .plugin-wrap { position: relative; flex: 0 0 auto; }

    /* HOME 按钮：返回门面首页 */
    .topnav .home-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--hair);
      background: rgba(0,0,0,0.42);
      color: rgba(255,255,255,0.88);
      cursor: pointer;
      user-select: none;
      font-family: var(--mono), monospace;
      font-size: 12px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      transition: transform 130ms ease, filter 130ms ease, box-shadow 130ms ease, border-color 130ms ease, background 130ms ease;
      white-space: nowrap;
    }
    .topnav .home-btn .home-icon {
      font-size: 14px;
      line-height: 1;
      transform: translateY(-1px);
    }
    .topnav .home-btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.03) contrast(1.02);
      background: rgba(0,0,0,0.58);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 1px rgba(var(--chroma-red), 0.22),
        0 0 22px rgba(var(--chroma-indigo), 0.16);
      border-color: rgba(var(--chroma-red), 0.26);
    }
    .topnav .home-btn:active {
      transform: translateY(0);
      filter: brightness(0.98);
    }
    .topnav .home-btn:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        0 0 24px rgba(210, 132, 255, 0.16);
    }
    /* 在 home 主题下隐藏 HOME 按钮（已经在首页） */
    body[data-theme="home"] .topnav .home-btn { display: none; }
    /* y2k 主题下 HOME 按钮也粉色化 */
    body[data-theme="y2k"] .topnav .home-btn {
      background: rgba(255, 255, 255, 0.78);
      border-color: rgba(255, 143, 181, 0.55);
      color: #a21d5d;
    }
    body[data-theme="y2k"] .topnav .home-btn:hover {
      background: #ffd6e8;
      border-color: rgba(255, 110, 180, 0.80);
      box-shadow:
        0 18px 42px rgba(255, 143, 181, 0.35),
        0 0 0 1px rgba(255, 110, 180, 0.35),
        0 0 22px rgba(255, 180, 215, 0.55);
    }
    /* brand 现在是可点链接 */
    .topnav .brand {
      cursor: pointer;
    }
    .topnav .brand:hover .brand-title {
      color: rgba(255, 255, 255, 1);
      text-shadow: 0 0 12px rgba(var(--chroma-red), 0.35);
    }
    body[data-theme="y2k"] .topnav .brand:hover .brand-title {
      color: #6b0e3a;
      text-shadow: 0 0 12px rgba(255, 110, 180, 0.45);
    }
    /* 移动端 HOME 按钮只保留图标 */
    @media (max-width: 720px) {
      .topnav .home-btn { padding: 10px 10px; }
      .topnav .home-btn .home-btn-text { display: none; }
    }

    .topnav .about-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--hair);
      background: rgba(0,0,0,0.42);
      color: rgba(255,255,255,0.88);
      cursor: pointer;
      user-select: none;
      font-family: var(--mono), monospace;
      font-size: 12px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      transition: transform 130ms ease, filter 130ms ease, box-shadow 130ms ease, border-color 130ms ease, background 130ms ease;
      white-space: nowrap;
    }

    .topnav .about-btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.03) contrast(1.02);
      background: rgba(0,0,0,0.58);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 1px rgba(var(--chroma-red), 0.22),
        0 0 22px rgba(var(--chroma-indigo), 0.16);
      border-color: rgba(var(--chroma-red), 0.26);
    }

    .topnav .about-btn:active {
      transform: translateY(0);
      filter: brightness(0.98);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        -10px 0 18px rgba(88, 164, 255, 0.16),
        10px 0 18px rgba(255, 226, 126, 0.14),
        0 0 24px rgba(210, 132, 255, 0.16);
    }

    .topnav .about-btn:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        -10px 0 18px rgba(88, 164, 255, 0.16),
        10px 0 18px rgba(255, 226, 126, 0.14),
        0 0 24px rgba(210, 132, 255, 0.16);
    }

    .topnav .about-btn[data-active="1"] {
      background: rgba(0,0,0,0.56);
      border-color: rgba(var(--chroma-red), 0.28);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 1px rgba(var(--chroma-red), 0.20),
        0 0 20px rgba(var(--chroma-indigo), 0.12);
      color: rgba(255,255,255,0.92);
    }

    .topnav .plugin-btn {
      position: relative;
      z-index: 61;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--hair);
      background: rgba(0,0,0,0.42);
      color: rgba(255,255,255,0.88);
      cursor: pointer;
      user-select: none;
      font-family: var(--mono), monospace;
      font-size: 12px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      transition: transform 130ms ease, filter 130ms ease, box-shadow 130ms ease, border-color 130ms ease, background 130ms ease;
      white-space: nowrap;
    }

    .topnav .plugin-btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.03) contrast(1.02);
      background: rgba(0,0,0,0.58);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 1px rgba(var(--chroma-red), 0.22),
        0 0 22px rgba(var(--chroma-indigo), 0.16);
      border-color: rgba(var(--chroma-red), 0.26);
    }

    .topnav .plugin-btn[data-open="1"] {
      background: rgba(0,0,0,0.56);
      border-color: rgba(var(--chroma-red), 0.28);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 1px rgba(var(--chroma-red), 0.20),
        0 0 20px rgba(var(--chroma-indigo), 0.12);
      color: rgba(255,255,255,0.92);
    }


    .topnav .plugin-btn:active {
      transform: translateY(0);
      filter: brightness(0.98);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        -10px 0 18px rgba(88, 164, 255, 0.16),
        10px 0 18px rgba(255, 226, 126, 0.14),
        0 0 24px rgba(210, 132, 255, 0.16);
    }

    .topnav .plugin-btn:focus-visible {

      outline: none;
      box-shadow:
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        -10px 0 18px rgba(88, 164, 255, 0.16),
        10px 0 18px rgba(255, 226, 126, 0.14),
        0 0 24px rgba(210, 132, 255, 0.16);
    }

    .topnav .plugin-btn .dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset;
      flex: 0 0 auto;
      transition: opacity 140ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
      opacity: 0.35;
    }

    .topnav .plugin-btn[data-open="1"] .dot {
      background: rgba(255,122,24,0.78);
      box-shadow:
        0 0 0 1px rgba(255,122,24,0.38) inset,
        0 0 14px rgba(255,122,24,0.30),
        0 0 22px rgba(var(--chroma-red), 0.20);
      opacity: 1;
      transform: translateY(-0.5px);
    }

.plugin-scrim {
      position: fixed;
      inset: 0;
      background: transparent;
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease;
      z-index: 50;
    }

    .plugin-scrim[data-open="1"] {
      opacity: 1;
      pointer-events: auto;
    }

.plugin-pop {
      position: absolute;
      right: 0;
      top: calc(100% + 10px);
      width: min(520px, calc(100vw - 28px));
      border-radius: var(--radius);
      border: 1px solid var(--hair);
      background: var(--panel-solid-2);
      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.72);
      overflow: hidden;
      transform: translateY(-6px) scale(0.996);
      opacity: 0;
      pointer-events: none;
      transition: opacity 140ms ease, transform 140ms ease;
      z-index: 60;
      will-change: transform, opacity, filter;
    }

    .plugin-pop .pop-blur {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.92);
      z-index: 0;
      pointer-events: none;
    }

    .plugin-pop > * {
      position: relative;
      z-index: 2;
    }

    @media (max-width: 720px) {
      .plugin-pop {
        position: fixed;
        top: calc(var(--topbar-h) + 10px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
      }
    }

    .plugin-pop::before,
    .plugin-pop::after {
      content: "";
      position: absolute;
      inset: -1px;
      pointer-events: none;
      opacity: 0;
      mix-blend-mode: screen;
    }

    .plugin-pop::before {
      background:
        repeating-linear-gradient(
          0deg,
          rgba(255,255,255,0.06) 0px,
          rgba(255,255,255,0.06) 1px,
          rgba(0,0,0,0) 2px,
          rgba(0,0,0,0) 6px
        );
      filter: hue-rotate(14deg) saturate(1.4);
    }

    .plugin-pop::after {
      background:
        radial-gradient(240px 140px at 20% 20%, rgba(255, 59, 59, 0.10), transparent 68%),
        radial-gradient(280px 160px at 80% 30%, rgba(64, 56, 255, 0.08), transparent 66%);
      filter: contrast(1.05) saturate(1.2);
    }

    .plugin-pop[data-open="1"] {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .plugin-pop[data-open="1"]::before,
    .plugin-pop[data-open="1"]::after {
      opacity: 1;
    }

    @keyframes pluginPopGlitchIn {
      0%   { opacity: 0; transform: translateY(-18px) scale(0.96); }
      12%  { opacity: 1; transform: translateY(2px) scale(1.01); }
      18%  { transform: translateY(-2px) translateX(4px) scale(0.998); }
      22%  { transform: translateY(1px) translateX(-4px) scale(1.002); }
      28%  { transform: translateY(0px) translateX(2px) scale(1.005); }
      34%  { transform: translateY(0px) translateX(-2px) scale(0.999); }
      46%  { transform: translateY(0px) translateX(1px) scale(1.001); }
      64%  { transform: translateY(0px) translateX(-1px) scale(1.000); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes pluginPopGlitchLayer {
      0%   { opacity: 0; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
      10%  { opacity: 0.62; transform: translate3d(10px, -6px, 0); clip-path: inset(6% 0 78% 0); }
      14%  { opacity: 0.22; transform: translate3d(-12px, 7px, 0); clip-path: inset(56% 0 20% 0); }
      18%  { opacity: 0.68; transform: translate3d(12px, 0px, 0); clip-path: inset(24% 0 54% 0); }
      22%  { opacity: 0.30; transform: translate3d(-10px, -2px, 0); clip-path: inset(72% 0 8% 0); }
      28%  { opacity: 0.55; transform: translate3d(8px, 2px, 0); clip-path: inset(10% 0 68% 0); }
      42%  { opacity: 0.18; transform: translate3d(-5px, 1px, 0); clip-path: inset(0 0 0 0); }
      58%  { opacity: 0.10; transform: translate3d(3px, 0px, 0); clip-path: inset(0 0 0 0); }
      100% { opacity: 0; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
    }

  @keyframes pluginTwChar {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .plugin-pop[data-open="1"] .tw-char {
      animation-name: pluginTwChar;
    }

.tw-char {
      display: inline-block;
      opacity: 0;
      animation-duration: 120ms;
      animation-timing-function: steps(2, end);
      animation-fill-mode: forwards;
      will-change: opacity;
    }

    @media (max-width: 720px) {
      .plugin-pop .tw-char {
        opacity: 1;
        animation: none !important;
        filter: none;
      }
    }

  .plugin-pop .head {
      padding: 14px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .plugin-pop .head .title {
      font-family: var(--mono), monospace;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(255,255,255,0.80);
    }

    .plugin-pop .head .sub {
      font-size: 12px;
      color: rgba(255,255,255,0.55);
      font-family: var(--mono), monospace;
    }

    .plugin-pop .close {
      border: 1px solid var(--hair);
      background: rgba(0,0,0,0.42);
      color: rgba(255,255,255,0.86);
      border-radius: 12px;
      padding: 8px 10px;
      cursor: pointer;
      font-family: var(--mono), monospace;
      font-size: 12px;
      letter-spacing: 0.08em;
      transition: filter 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    }

    .plugin-pop .close:hover { background: rgba(0,0,0,0.58); filter: brightness(1.03); transform: translateY(-0.5px); }

    .plugin-pop .close:focus-visible {
      outline: none;
      border-color: rgba(255, 166, 236, 0.62);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        -10px 0 18px rgba(88, 164, 255, 0.16),
        10px 0 18px rgba(255, 226, 126, 0.14),
        0 0 24px rgba(210, 132, 255, 0.16);
    }

    .plugin-pop .close:active {
      transform: translateY(0);
      filter: brightness(0.98);
      border-color: rgba(255, 166, 236, 0.62);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        -10px 0 18px rgba(88, 164, 255, 0.16),
        10px 0 18px rgba(255, 226, 126, 0.14),
        0 0 24px rgba(210, 132, 255, 0.16);
    }

    .plugin-pop .body { padding: 12px 14px 14px; }

    .plugin-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    @media (max-width: 720px) {
      .plugin-grid { grid-template-columns: 1fr; }
    }

    .plugin-opt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(0,0,0,0.30);
      cursor: pointer;
      transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
      user-select: none;
    }

    .plugin-opt:hover {
      filter: brightness(1.05);
      transform: translateY(-0.5px);
      border-color: rgba(var(--chroma-red), 0.26);
      box-shadow:
        0 10px 26px rgba(0,0,0,0.55),
        0 0 0 1px rgba(var(--chroma-red), 0.22),
        0 0 16px rgba(var(--chroma-indigo), 0.12);
    }

    .plugin-opt[aria-checked="true"] {
      border-color: rgba(var(--chroma-red), 0.32);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 1px rgba(var(--chroma-red), 0.26),
        0 0 22px rgba(var(--chroma-indigo), 0.16);
      background:
        radial-gradient(220px 120px at 18% 18%, rgba(255, 59, 59, 0.12), transparent 62%),
        radial-gradient(240px 140px at 82% 30%, rgba(64, 56, 255, 0.08), transparent 60%),
        rgba(0,0,0,0.34);
    }

    .plugin-opt[data-disabled="1"] {
      opacity: 0.78;
      cursor: not-allowed;
      pointer-events: none;
      border-color: rgba(255,255,255,0.06);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        rgba(0,0,0,0.18);
      box-shadow: none;
      filter: grayscale(1) saturate(0) brightness(0.78) contrast(0.92);
    }

    .plugin-opt[data-disabled="1"] .name {
      color: rgba(255,255,255,0.52);
    }

    .plugin-opt[data-disabled="1"] .meta {
      color: rgba(255,255,255,0.36);
    }

    .plugin-opt[data-disabled="1"]:hover {
      transform: none;
      filter: grayscale(1) saturate(0) brightness(0.78) contrast(0.92);
      border-color: rgba(255,255,255,0.06);
      box-shadow: none;
    }

    .plugin-opt .name {
      font-family: var(--mono), monospace;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(255,255,255,0.86);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    .plugin-opt .meta {
      font-family: var(--mono), monospace;
      font-size: 11px;
      color: rgba(255,255,255,0.55);
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .plugin-pop .foot {
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 12px;
    }

    .plugin-pop .sel {
      font-family: var(--mono), monospace;
      font-size: 12px;
      color: rgba(255,255,255,0.70);
    }

  .plugin-pop .quick a {
      font-family: var(--mono), monospace;
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.76);
      text-decoration: none;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid transparent;
      transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
      white-space: nowrap;
    }

    .plugin-pop .quick a:hover {
      color: rgba(255, 255, 255, 0.92);
      background: rgba(0, 0, 0, 0.42);
      border-color: var(--hair);
    }

    body.has-topnav main {
      padding-top: calc(36px + var(--topbar-h));
    }

  body.shell-mode { overflow: hidden; }
    body.shell-mode .skip { display: none; }
    body.shell-mode .wrap { display: none; }

.shell {
      position: fixed;
      top: var(--topbar-h);
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
    }


    .shell-frame {
      width: 100%;
      height: 100%;
      border: 0;
      background: transparent;
      display: block;
      -webkit-overflow-scrolling: touch;
    }

    body.has-topnav .skip {
      top: calc(var(--topbar-h) + 10px);
      z-index: 80;
    }

@media (max-width: 720px) {
      body.has-topnav main { padding-top: calc(22px + var(--topbar-h)); }
      .topnav .inner { padding: 0 12px; gap: 8px; }
      .topnav .brand { min-width: 0; flex: 1 1 auto; }
      .topnav .brand .brand-author { display: none; }
      .topnav .brand .brand-title { font-size: 16px; }
      .topnav .right { flex: 0 0 auto; }
      .topnav .plugin-btn,
      .topnav .about-btn { padding: 10px 10px; }
    }

    nav {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    nav a {
font-family: var(--mono), monospace;
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.76);
      text-decoration: none;
      padding: 10px 10px;
      border-radius: 12px;
      border: 1px solid transparent;
      transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
      white-space: nowrap;
    }

    nav a:hover {
      color: rgba(255, 255, 255, 0.92);
      background: rgba(0, 0, 0, 0.42);
      border-color: var(--hair);
    }

    .wrap {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    main {
      max-width: var(--max);
      width: 100%;
      margin: 0 auto;
      padding: 36px 20px 0;
    }

    @media (max-width: 720px) {
      main { padding-top: 22px; }
    }

    .intro {
      padding: 24px 0 10px;
      border-bottom: 1px solid var(--hair);
      margin-bottom: 24px;
    }

    .hero-shot {
      margin: 14px 0 8px;
      width: min(980px, 100%);
      position: relative;
    }

    .hero-shot-img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow:
        0 26px 70px rgba(0,0,0,0.65),
        0 0 0 1px rgba(255,59,59,0.06),
        0 0 38px rgba(255,59,59,0.10);
    }

    .intro .eyebrow {
font-family: var(--mono), monospace;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.68);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .intro .eyebrow .rule {
      height: 1px;
      flex: 1;
      background: linear-gradient(90deg, rgba(255,255,255,0.16), transparent);
    }

    h1 {
      margin: 14px 0 10px;
      font-size: clamp(34px, 6vw, 74px);
      letter-spacing: -0.03em;
      line-height: 0.96;
      text-transform: uppercase;
      position: relative;
      display: inline-block;
      text-shadow:
        0 16px 60px rgba(0,0,0,0.65),
        0 0 22px rgba(255,59,59,0.10);
    }

    .glitch-title {
      isolation: isolate;
      transform: translateZ(0);
      will-change: transform;
      animation: glitchSkew 3.4s steps(18, end) infinite;
    }

    .glitch-title::before,
    .glitch-title::after {
      content: attr(data-text);
      position: absolute;
      inset: 0;
      pointer-events: none;
      user-select: none;
      opacity: 0.75;
      mix-blend-mode: screen;
      filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55));
    }

    .glitch-title::before {
      color: rgba(var(--chroma-indigo), 0.78);
      transform: translate3d(-2px, 0, 0);
      clip-path: inset(0 0 0 0);
      animation:
        glitchSliceA 2.6s steps(16, end) infinite,
        glitchFlicker 4.2s steps(24, end) infinite;
    }

    .glitch-title::after {
      color: rgba(var(--chroma-red), 0.78);
      transform: translate3d(2px, 0, 0);
      clip-path: inset(0 0 0 0);
      animation:
        glitchSliceB 3.0s steps(18, end) infinite,
        glitchFlicker 3.8s steps(22, end) infinite reverse;
    }

    @keyframes glitchSkew {
      0%   { transform: translate3d(0,0,0) skewX(0deg); }
      8%   { transform: translate3d(0,0,0) skewX(0deg); }
      9%   { transform: translate3d(-1px,0,0) skewX(-3deg); }
      10%  { transform: translate3d(1px,0,0) skewX(2deg); }
      11%  { transform: translate3d(0,0,0) skewX(0deg); }
      55%  { transform: translate3d(0,0,0) skewX(0deg); }
      56%  { transform: translate3d(-1px,0,0) skewX(2.2deg); }
      57%  { transform: translate3d(0,0,0) skewX(0deg); }
      100% { transform: translate3d(0,0,0) skewX(0deg); }
    }

    @keyframes glitchFlicker {
      0%   { opacity: 0.78; }
      7%   { opacity: 0.22; }
      8%   { opacity: 0.76; }
      38%  { opacity: 0.70; }
      39%  { opacity: 0.30; }
      40%  { opacity: 0.74; }
      70%  { opacity: 0.68; }
      71%  { opacity: 0.26; }
      72%  { opacity: 0.72; }
      100% { opacity: 0.78; }
    }

    @keyframes glitchSliceA {
      0%   { clip-path: inset(0 0 0 0); transform: translate3d(-2px,0,0); }
      10%  { clip-path: inset(8% 0 78% 0); transform: translate3d(-5px,-1px,0); }
      11%  { clip-path: inset(56% 0 24% 0); transform: translate3d(-2px,1px,0); }
      12%  { clip-path: inset(0 0 0 0); transform: translate3d(-2px,0,0); }
      44%  { clip-path: inset(0 0 0 0); transform: translate3d(-2px,0,0); }
      45%  { clip-path: inset(22% 0 56% 0); transform: translate3d(-7px,0,0); }
      46%  { clip-path: inset(0 0 0 0); transform: translate3d(-2px,0,0); }
      78%  { clip-path: inset(0 0 0 0); transform: translate3d(-2px,0,0); }
      79%  { clip-path: inset(68% 0 10% 0); transform: translate3d(-4px,1px,0); }
      80%  { clip-path: inset(0 0 0 0); transform: translate3d(-2px,0,0); }
      100% { clip-path: inset(0 0 0 0); transform: translate3d(-2px,0,0); }
    }

    @keyframes glitchSliceB {
      0%   { clip-path: inset(0 0 0 0); transform: translate3d(2px,0,0); }
      14%  { clip-path: inset(14% 0 70% 0); transform: translate3d(6px,1px,0); }
      15%  { clip-path: inset(62% 0 18% 0); transform: translate3d(2px,-1px,0); }
      16%  { clip-path: inset(0 0 0 0); transform: translate3d(2px,0,0); }
      52%  { clip-path: inset(0 0 0 0); transform: translate3d(2px,0,0); }
      53%  { clip-path: inset(30% 0 48% 0); transform: translate3d(9px,0,0); }
      54%  { clip-path: inset(0 0 0 0); transform: translate3d(2px,0,0); }
      86%  { clip-path: inset(0 0 0 0); transform: translate3d(2px,0,0); }
      87%  { clip-path: inset(72% 0 8% 0); transform: translate3d(5px,-1px,0); }
      88%  { clip-path: inset(0 0 0 0); transform: translate3d(2px,0,0); }
      100% { clip-path: inset(0 0 0 0); transform: translate3d(2px,0,0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .glitch-title,
      .glitch-title::before,
      .glitch-title::after {
        animation: none !important;
        transform: none !important;
      }

    }

    .intro p {
      margin: 0;
      color: var(--muted);
      max-width: 78ch;
      line-height: 1.75;
      font-size: 14px;
    }

    #intro-typing {
      font-family: var(--mono), monospace;
      letter-spacing: 0.02em;
      white-space: normal;
      overflow: visible;
      word-break: break-all;
    }

  #intro-typing .spinner {
      display: inline-block;
      width: 1ch;
      margin-left: 0.15ch;
      color: rgba(255,255,255,0.82);
    }

    .section {
      padding: 22px 0 6px;
      scroll-margin-top: 96px;
    }

    .section + .section {
      border-top: 1px solid var(--hair);
      margin-top: 18px;
    }

    .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .section-head .title {
font-family: var(--mono), monospace;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 12px;
    }

    .section-head .note {
font-family: var(--mono), monospace;
      font-size: 12px;
      color: rgba(255,255,255,0.55);
    }

    .grid {
      display: grid;
      grid-template-columns: 1.25fr 0.75fr;
      gap: 16px;
      align-items: start;
    }

    @media (max-width: 960px) {
      .grid { grid-template-columns: 1fr; }
    }

    .card {
      border: 1px solid var(--hair);
      border-radius: var(--radius);
      background: rgba(0,0,0,0.82);
      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65);
      overflow: hidden;
      position: relative;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: -2px;
      background:
        radial-gradient(540px 260px at 18% 18%, rgba(255, 59, 59, 0.12), transparent 62%),
        radial-gradient(520px 260px at 82% 28%, rgba(123, 243, 255, 0.06), transparent 60%),
        radial-gradient(520px 260px at 62% 92%, rgba(255, 122, 24, 0.08), transparent 62%);
      filter: blur(18px);
      opacity: 0.45;
      z-index: 0;
    }

    .card > * { position: relative; z-index: 1; }

    .card .pad { padding: 18px 18px; }

    .card h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .card .meta {
      margin-top: 8px;
font-family: var(--mono), monospace;
      font-size: 12px;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.62);
    }

    .card .desc {
      margin: 12px 0 0;
      color: rgba(255, 255, 255, 0.72);
      line-height: 1.75;
      font-size: 13px;
      max-width: 74ch;
    }

    code {
font-family: var(--mono), monospace;
      background: rgba(0, 0, 0, 0.46);
      border: 1px solid var(--hair);
      padding: 2px 6px;
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.90);
    }

    code.code-icon {
      display: inline-grid;
      place-items: center;
      padding: 4px 6px;
      line-height: 0;
      vertical-align: middle;
    }

    code.code-icon .code-icon-img {
      display: block;
      width: 50px;
      height: 50px;
      object-fit: contain;
      filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
    }

    .actions {
      margin-top: 14px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .demo-card { margin-top: 16px; }

    .demo-controls {
      margin-top: 14px;
      display: grid;
      place-items: center;
      gap: 12px;
    }

    .demo-switch {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: center;
    }

    .demo-led {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: rgba(255,122,24,0.14);
      box-shadow: 0 0 0 1px rgba(255,122,24,0.22) inset;
      opacity: 0.75;
      transition: opacity 140ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
      flex: 0 0 auto;
    }

  .btn:disabled .demo-led { opacity: 0.35; box-shadow: 0 0 0 1px rgba(255,122,24,0.16) inset; }

  .demo-switch-btn {
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }

    .demo-switch-btn::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(70px 70px at 52% 48%, rgba(255,255,255,0.10), rgba(0,0,0,0.00) 62%),
        repeating-linear-gradient(90deg, rgba(var(--chroma-indigo), 0.10) 0 1px, rgba(var(--chroma-red), 0.08) 1px 2px, rgba(0,0,0,0.00) 2px 7px);
      mix-blend-mode: screen;
      opacity: 0;
      pointer-events: none;
      filter: blur(0.1px);
      animation: demoGlitch 2.8s steps(18, end) infinite;
      transition: opacity 140ms ease;
    }

    @media (hover: hover) and (pointer: fine) {
      .demo-switch-btn:hover::after { opacity: 0.32; }

      .btn.secondary.demo-switch-btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.03) contrast(1.02);
        border-color: rgba(var(--chroma-red), 0.32);
        box-shadow:
          0 18px 42px rgba(0,0,0,0.62),
          0 0 0 1px rgba(var(--chroma-red), 0.32),
          0 0 28px rgba(var(--chroma-red), 0.24),
          0 0 36px rgba(var(--chroma-indigo), 0.22);
      }
    }

    .demo-switch-btn:active::after { opacity: 0.32; }

    .btn.secondary.demo-switch-btn:active {
      filter: brightness(1.03) contrast(1.02);
      border-color: rgba(255, 166, 236, 0.62);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        -10px 0 18px rgba(88, 164, 255, 0.16),
        10px 0 18px rgba(255, 226, 126, 0.14),
        0 0 24px rgba(210, 132, 255, 0.16);
    }

    @media (prefers-reduced-motion: reduce) {
      .demo-switch-btn::after { animation: none !important; }
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .demo-play {
      --sz: 108px;
      width: var(--sz);
      height: var(--sz);
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background:
        radial-gradient(60px 60px at 50% 40%, rgba(var(--chroma-red), 0.22), rgba(0,0,0,0.00) 62%),
        radial-gradient(70px 70px at 40% 62%, rgba(var(--chroma-indigo), 0.14), rgba(0,0,0,0.00) 62%),
        radial-gradient(90px 90px at 58% 70%, rgba(255,122,24,0.10), rgba(0,0,0,0.00) 68%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0px, rgba(255,255,255,0.00) 2px, rgba(0,0,0,0.00) 6px),
        rgba(0,0,0,0.42);

      box-shadow:
        0 18px 48px rgba(0,0,0,0.62),
        0 0 0 1px rgba(var(--chroma-red), 0.18),
        0 0 22px rgba(var(--chroma-red), 0.18),
        0 0 30px rgba(var(--chroma-indigo), 0.16);
      cursor: pointer;
      position: relative;
      isolation: isolate;
      outline: none;
      transition: transform 120ms ease, filter 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    }

    .demo-play[data-state="pause"] {
      border-color: rgba(var(--chroma-red), 0.38);
      box-shadow:
        0 22px 58px rgba(0,0,0,0.66),
        0 0 0 1px rgba(var(--chroma-red), 0.30),
        0 0 34px rgba(var(--chroma-red), 0.26),
        0 0 42px rgba(var(--chroma-indigo), 0.22);
    }

    @media (hover: hover) and (pointer: fine) {
      .demo-play:hover {
        transform: translateY(-1px);
        filter: brightness(1.03) contrast(1.02);
        border-color: rgba(var(--chroma-red), 0.38);
        box-shadow:
          0 22px 58px rgba(0,0,0,0.66),
          0 0 0 1px rgba(var(--chroma-red), 0.30),
          0 0 34px rgba(var(--chroma-red), 0.26),
          0 0 42px rgba(var(--chroma-indigo), 0.22);

      }
    }


    .demo-play:active {
      transform: translateY(0);
      filter: brightness(0.98);
      box-shadow:
        0 22px 58px rgba(0,0,0,0.66),
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        -10px 0 22px rgba(88, 164, 255, 0.16),
        10px 0 22px rgba(255, 226, 126, 0.14),
        0 0 30px rgba(210, 132, 255, 0.16);
    }

    .demo-play:focus-visible {

      box-shadow:
        0 22px 58px rgba(0,0,0,0.66),
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        -10px 0 22px rgba(88, 164, 255, 0.16),
        10px 0 22px rgba(255, 226, 126, 0.14),
        0 0 30px rgba(210, 132, 255, 0.16);
    }

    .demo-play::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 62px;
      height: 62px;
      transform: translate(-47%, -50%);
      background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.62));
      clip-path: polygon(18% 10%, 90% 50%, 18% 90%);
      filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55));
    }

    .demo-play[data-state="pause"]::before {
      width: 42px;
      height: 46px;
      transform: translate(-50%, -50%);
      clip-path: none;
      background:
        linear-gradient(90deg,
          rgba(255,255,255,0.90) 0 36%,
          rgba(0,0,0,0.00) 36% 64%,
          rgba(255,255,255,0.90) 64% 100%
        );
    }

    .demo-play[data-state="loading"]::before {
      width: 46px;
      height: 46px;
      transform: translate(-50%, -50%);
      clip-path: none;
      background: none;
      border-radius: 999px;
      border: 4px solid rgba(255,255,255,0.28);
      border-top-color: rgba(255,255,255,0.92);
      border-right-color: rgba(255,255,255,0.62);
      filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55));
      animation: demoSpin 0.9s linear infinite;
    }

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

    .demo-play::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      background:
        radial-gradient(70px 70px at 52% 48%, rgba(255,255,255,0.10), rgba(0,0,0,0.00) 62%),
        repeating-linear-gradient(90deg, rgba(var(--chroma-indigo), 0.10) 0 1px, rgba(var(--chroma-red), 0.08) 1px 2px, rgba(0,0,0,0.00) 2px 7px);
      mix-blend-mode: screen;
      opacity: 0;
      pointer-events: none;
      filter: blur(0.1px);
      animation: demoGlitch 2.8s steps(18, end) infinite;
      transition: opacity 140ms ease;
    }

    .demo-play[data-state="pause"]::after { opacity: 0.32; }

    @keyframes demoGlitch {
      0%, 64% { transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); opacity: 0.26; }
      65% { transform: translate3d(-1px, 0, 0); clip-path: inset(14% 0 62% 0); opacity: 0.40; }
      66% { transform: translate3d(2px, -1px, 0); clip-path: inset(52% 0 18% 0); opacity: 0.34; }
      67% { transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); opacity: 0.26; }
      100% { transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); opacity: 0.26; }
    }

    @media (prefers-reduced-motion: reduce) {
      .demo-play::after { animation: none !important; }
      .demo-play[data-state="loading"]::before { animation: none !important; }
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid var(--hair);
      text-decoration: none;
      color: rgba(255, 255, 255, 0.96);
      background: linear-gradient(135deg, rgba(var(--chroma-red), 0.95), rgba(var(--chroma-indigo), 0.92));
      box-shadow: 0 14px 34px rgba(var(--chroma-red), 0.22);
      transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease, background 130ms ease;
      user-select: none;
      cursor: pointer;
      font-family: var(--sans), sans-serif;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      font-size: 12px;
    }

    .btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.03);
      box-shadow: 0 18px 42px rgba(var(--chroma-red), 0.30);
    }

    .actions a.btn[download] {
      box-shadow:
        0 14px 34px rgba(0,0,0,0.55),
        0 0 0 1px rgba(var(--chroma-red), 0.22),
        0 0 18px rgba(var(--chroma-red), 0.20),
        0 0 26px rgba(var(--chroma-indigo), 0.18);
    }

    .actions a.btn[download]:hover {
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 1px rgba(var(--chroma-red), 0.32),
        0 0 28px rgba(var(--chroma-red), 0.28),
        0 0 36px rgba(var(--chroma-indigo), 0.26);
    }

    .btn:focus-visible {
      outline: none;
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        -10px 0 18px rgba(88, 164, 255, 0.16),
        10px 0 18px rgba(255, 226, 126, 0.14),
        0 0 24px rgba(210, 132, 255, 0.16);
    }

    .btn:active {
      transform: translateY(0);
      filter: brightness(0.98);
      box-shadow:
        0 18px 42px rgba(0,0,0,0.62),
        0 0 0 3px rgba(146, 102, 255, 0.22),
        0 0 0 1px rgba(255, 166, 236, 0.62),
        -10px 0 18px rgba(88, 164, 255, 0.16),
        10px 0 18px rgba(255, 226, 126, 0.14),
        0 0 24px rgba(210, 132, 255, 0.16);
    }

    .btn.secondary {

      background: rgba(0, 0, 0, 0.42);
      box-shadow: none;
      color: rgba(255,255,255,0.88);
      border-color: var(--hair);
    }

    .btn.secondary:hover {
      background: rgba(0, 0, 0, 0.58);
      box-shadow: 0 10px 26px rgba(0,0,0,0.35);
    }

    .copy small {
      display: block;
      color: rgba(255, 255, 255, 0.55);
      margin-top: 4px;
      font-size: 11px;
      word-break: break-all;
    }

    code.copy-inline {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(0, 0, 0, 0.28);
      cursor: pointer;
      user-select: none;
      transition: transform 120ms ease, filter 120ms ease, background 120ms ease, box-shadow 120ms ease;
    }

    code.copy-inline:hover {
      filter: brightness(1.05);
      box-shadow:
        0 10px 26px rgba(0,0,0,0.55),
        0 0 0 1px rgba(var(--chroma-red), 0.26),
        0 0 16px rgba(var(--chroma-red), 0.18),
        0 0 22px rgba(var(--chroma-indigo), 0.16);
      transform: translateY(-0.5px);
    }

    code.copy-inline:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 3px rgba(var(--chroma-indigo), 0.20),
        0 0 0 1px rgba(var(--chroma-red), 0.62),
        0 0 22px rgba(var(--chroma-indigo), 0.14);
    }

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

    .list li {
      display: grid;
      grid-template-columns: 16px 1fr;
      gap: 10px;
      align-items: start;
      color: rgba(255, 255, 255, 0.70);
      font-size: 12px;
      line-height: 1.7;
    }

    .bullet {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      background: rgba(255, 122, 24, 0.95);
      box-shadow: 0 0 0 6px rgba(255, 122, 24, 0.10);
      align-self: center;
      justify-self: center;
    }

    .side {
      display: grid;
      gap: 16px;
    }

    .side .mini {
      border: 1px solid var(--hair);
      border-radius: var(--radius);
      background: rgba(0,0,0,0.78);
      padding: 16px 16px;
    }

    .side .mini .t {
font-family: var(--mono), monospace;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(255,255,255,0.70);
      font-weight: 700;
    }

    .side .mini .p {
      margin: 10px 0 0;
      color: rgba(255,255,255,0.62);
      font-size: 12px;
      line-height: 1.7;
    }

    .side .mini .p a {
      display: inline-block;
      padding: 2px 4px;
      border-radius: 10px;
      color: rgba(255, 255, 255, 0.78);
      text-decoration: underline;
      text-decoration-color: rgba(255, 255, 255, 0.35);
      text-underline-offset: 2px;
      transition: transform 120ms ease, filter 120ms ease, background 120ms ease, box-shadow 120ms ease, color 120ms ease, text-decoration-color 120ms ease;
    }

    .side .mini .p a:hover {
      color: rgba(255, 255, 255, 0.92);
      text-decoration-color: rgba(255, 255, 255, 0.65);
      background: rgba(0,0,0,0.24);
      transform: translateY(-0.5px);
      filter: brightness(1.05);
      box-shadow:
        0 10px 26px rgba(0,0,0,0.55),
        0 0 0 1px rgba(var(--chroma-red), 0.26),
        0 0 16px rgba(var(--chroma-red), 0.18),
        0 0 22px rgba(var(--chroma-indigo), 0.16);
    }

    .side .mini .p a:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 3px rgba(var(--chroma-indigo), 0.20),
        0 0 0 1px rgba(var(--chroma-red), 0.62),
        0 0 22px rgba(var(--chroma-indigo), 0.14);
    }

    footer {
      margin-top: 28px;
      padding: 34px 20px 26px;
      border-top: 1px solid var(--hair);
      background: linear-gradient(180deg, rgba(5,5,7,0.0), rgba(5,5,7,0.72));
    }

    .footer-inner {
      max-width: var(--max);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
      color: rgba(255,255,255,0.55);
font-family: var(--mono), monospace;
      font-size: 12px;
      letter-spacing: 0.04em;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      z-index: 30;
      background: rgba(0, 0, 0, 0.70);
      border: 1px solid var(--hair);
      color: rgba(255, 255, 255, 0.88);
      padding: 10px 12px;
      border-radius: 14px;
      font-size: 12px;
font-family: var(--mono), monospace;
      box-shadow: 0 18px 50px rgba(0,0,0,0.55);
      opacity: 0;
      transition: opacity 180ms ease, transform 180ms ease;
      pointer-events: none;
    }


    @media (prefers-reduced-motion: reduce) {
      * { scroll-behavior: auto !important; }
      .toast { transition: none; }
    }

    /* ============================================================
       HOME 首屏：!!saac.艾萨克 声音百货公司 — 千禧梦核地下大楼
       ============================================================ */
    body.shell-mode .home-shell {
      display: none;
    }
    body.shell-mode[data-theme="home"] .home-shell {
      display: block;
      position: fixed;
      top: var(--topbar-h);
      left: 0;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 4;
      -webkit-overflow-scrolling: touch;
    }

    /* 大楼实拍背景图 —— 固定视口，不随滚动 */
    .home-bg {
      position: fixed;
      top: var(--topbar-h);
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 0;
      background-image: url("webp/main/background_0.webp");
      background-size: cover;
      background-position: center 30%;
      background-repeat: no-repeat;
      background-attachment: scroll;
      filter: contrast(1.05) saturate(1.08) brightness(0.78);
    }
    /* 暗角 + 顶部辉光 + 紫色霓虹氛围（同样固定） */
    .home-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(900px 600px at 18% 30%, rgba(180, 120, 255, 0.18), transparent 62%),
        radial-gradient(900px 600px at 82% 30%, rgba(110, 90, 255, 0.18), transparent 62%),
        radial-gradient(1400px 700px at 50% 110%, rgba(0, 0, 0, 0.85), transparent 70%),
        linear-gradient(180deg, rgba(8, 6, 18, 0.10) 0%, rgba(8, 6, 18, 0.55) 100%);
    }

    /* CRT 扫描线全屏覆盖（梦核质感）—— 固定视口 */
    .home-grid-bg {
      position: fixed;
      top: var(--topbar-h);
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1;
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px);
      mix-blend-mode: overlay;
      opacity: 0.85;
    }
    .home-grid-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(1200px 80px at 50% 50%, rgba(255,255,255,0.05), transparent 70%);
      animation: crtScan 6s linear infinite;
    }
    @keyframes crtScan {
      0%   { transform: translateY(-30vh); opacity: 0.0; }
      30%  { opacity: 0.6; }
      100% { transform: translateY(120vh); opacity: 0.0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .home-grid-bg::after { animation: none; }
    }

    .home-inner {
      position: relative;
      z-index: 2;
      max-width: 1680px;
      margin: 0 auto;
      padding: 28px 36px 18px;
    }
    @media (max-width: 1400px) {
      .home-inner { max-width: 1280px; padding: 24px 28px 16px; }
    }
    @media (max-width: 1024px) {
      .home-inner { padding: 20px 18px 14px; }
    }

    /* ===== HERO：!!saac.艾萨克 霓虹招牌 ===== */
    .home-hero {
      text-align: center;
      padding: 28px 0 22px;
      position: relative;
    }

    .home-eyebrow {
      font-family: var(--mono), monospace;
      font-size: 11px;
      letter-spacing: 0.30em;
      text-transform: uppercase;
      color: rgba(255, 230, 160, 0.65);
      margin-bottom: 18px;
    }
    .home-eyebrow .he-en {
      font-family: var(--mono), monospace;
      letter-spacing: 0.30em;
    }
    .home-eyebrow .he-cn {
      font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", var(--sans), sans-serif;
      letter-spacing: 0.20em;
      margin: 0 4px;
      color: rgba(255, 235, 170, 0.72);
    }

    .home-title {
      margin: 0 0 14px;
      font-family: "Times New Roman", "Songti SC", "STSong", serif;
      font-weight: 700;
      font-size: clamp(48px, 8.6vw, 110px);
      letter-spacing: 0.02em;
      line-height: 0.96;
      position: relative;
      display: inline-block;
      color: #fffde0;
      /* 复古老式霓虹灯效果 - 黄色灯管 */
      text-shadow:
        /* 内发光 - 灯管核心 */
        0 0 4px #fff,
        0 0 8px rgba(255, 230, 140, 0.9),
        /* 中层光晕 */
        0 0 20px rgba(255, 200, 80, 0.7),
        0 0 40px rgba(255, 180, 50, 0.5),
        /* 外层光晕 */
        0 0 80px rgba(255, 160, 40, 0.3),
        0 0 120px rgba(220, 130, 20, 0.2),
        /* 底部阴影 - 灯管厚度感 */
        0 2px 0 rgba(255, 200, 100, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.7);
      /* 动画由 JS 通过添加 .neon-flicker 类触发 */
    }
    /* 动画触发类 - JS 添加后执行一次 */
    .home-title.neon-flicker {
      animation: neonFlicker 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    .home-title::before,
    .home-title::after {
      display: none;
    }
    /* 复古老式霓虹灯闪烁效果 - 突然闪烁（3秒） */
    @keyframes neonFlicker {
      /* 正常亮起 - 大部分时间保持正常 */
      0%, 35% {
        text-shadow:
          0 0 4px #fff,
          0 0 8px rgba(255, 230, 140, 0.9),
          0 0 20px rgba(255, 200, 80, 0.7),
          0 0 40px rgba(255, 180, 50, 0.5),
          0 0 80px rgba(255, 160, 40, 0.3),
          0 0 120px rgba(220, 130, 20, 0.2),
          0 2px 0 rgba(255, 200, 100, 0.4),
          0 4px 8px rgba(0, 0, 0, 0.7);
        opacity: 1;
        color: #fffde0;
      }

      /* ===== 突然闪灭！（硬切换，无过渡）===== */
      36% {
        /* 霓虹灯熄灭 - 灯管还在，只是不亮了 */
        opacity: 1;
        color: #1a1000;
        text-shadow: none;
      }

      /* ===== 第一次尝试亮起 - 电压不稳 ===== */
      39% {
        /* 突然亮一下 */
        opacity: 1;
        color: #fffde0;
        text-shadow:
          0 0 4px #fff,
          0 0 8px rgba(255, 230, 140, 0.9),
          0 0 20px rgba(255, 200, 80, 0.7);
      }
      42% {
        /* 又灭了 */
        opacity: 1;
        color: #1a1000;
        text-shadow: none;
      }

      /* ===== 第二次尝试亮起 - 电压还是不稳 ===== */
      45% {
        /* 又突然亮一下，比上次更亮 */
        opacity: 1;
        color: #fff;
        text-shadow:
          0 0 6px #fff,
          0 0 12px rgba(255, 240, 160, 1),
          0 0 25px rgba(255, 220, 100, 0.8),
          0 0 50px rgba(255, 200, 60, 0.6);
      }
      48% {
        /* 又灭了 */
        opacity: 1;
        color: #1a1000;
        text-shadow: none;
      }

      /* 保持熄灭状态，等待最终亮起 */
      55% {
        opacity: 1;
        color: #1a1000;
        text-shadow: none;
      }

      /* ===== 突然闪亮！（硬切换，无过渡）===== */
      56% {
        /* 突然超亮重连 - 像真实霓虹灯瞬间点亮 */
        opacity: 1;
        color: #fff;
        text-shadow:
          0 0 10px #fff,
          0 0 20px #fff,
          0 0 40px rgba(255, 240, 160, 1),
          0 0 80px rgba(255, 220, 100, 0.9),
          0 0 120px rgba(255, 200, 60, 0.7),
          0 0 180px rgba(255, 180, 40, 0.5),
          0 0 250px rgba(220, 150, 20, 0.3);
      }

      /* 稍微暗一点但依然很亮 */
      60% {
        opacity: 1;
        color: #fffde0;
        text-shadow:
          0 0 6px #fff,
          0 0 12px rgba(255, 230, 140, 1),
          0 0 25px rgba(255, 200, 80, 0.8),
          0 0 50px rgba(255, 180, 50, 0.6),
          0 0 80px rgba(255, 160, 40, 0.4);
      }

      /* ===== 恢复正常 ===== */
      70%, 100% {
        opacity: 1;
        color: #fffde0;
        text-shadow:
          0 0 4px #fff,
          0 0 8px rgba(255, 230, 140, 0.9),
          0 0 20px rgba(255, 200, 80, 0.7),
          0 0 40px rgba(255, 180, 50, 0.5),
          0 0 80px rgba(255, 160, 40, 0.3),
          0 0 120px rgba(220, 130, 20, 0.2),
          0 2px 0 rgba(255, 200, 100, 0.4),
          0 4px 8px rgba(0, 0, 0, 0.7);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .home-title { animation: none !important; }
    }

    .home-tagline {
      font-family: "PingFang SC", "Microsoft YaHei", var(--sans), sans-serif;
      font-size: clamp(12px, 1.3vw, 14px);
      color: rgba(255, 230, 180, 0.78);
      letter-spacing: 0.30em;
      margin: 8px auto 0;
      line-height: 1.6;
    }
    .home-tagline .accent {
      font-family: var(--mono), monospace;
      color: rgba(255, 200, 140, 0.55);
      letter-spacing: 0.20em;
      margin: 0 8px;
    }

    /* ===== 主布局：左侧楼层导航 + 右侧楼层卡片 ===== */
    .home-mall {
      display: grid;
      grid-template-columns: 200px minmax(0, 1fr);
      gap: 18px;
      margin-top: 6px;
      min-width: 0;
      overflow: hidden;
    }

    @media (max-width: 880px) {
      .home-mall { grid-template-columns: 1fr; }
    }

    /* ----- 侧边栏：产品楼层导航 ----- */
    .home-sidebar {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .sidebar-block {
      background: rgba(8, 6, 18, 0.92);
      border: 1px solid rgba(255, 200, 100, 0.32);
      border-radius: 6px;
      padding: 12px 12px 14px;
      box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.65),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }
    .sidebar-block .sb-head {
      font-family: var(--mono), monospace;
      font-size: 11px;
      letter-spacing: 0.20em;
      color: rgba(255, 220, 160, 0.68);
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px dashed rgba(255, 200, 100, 0.30);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .sidebar-block .sb-head::before {
      content: "▸";
      color: #ffc440;
    }

    .floor-nav { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
    .floor-nav a {
      display: flex;
      align-items: baseline;
      gap: 8px;
      text-decoration: none;
      padding: 7px 9px;
      border-radius: 4px;
      border: 1px solid transparent;
      transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
    }
    .floor-nav a:hover {
      background: rgba(255, 200, 100, 0.10);
      border-color: rgba(255, 200, 100, 0.35);
      transform: translateX(2px);
    }
    .floor-nav .fl-num {
      font-family: var(--mono), monospace;
      font-size: 13px;
      font-weight: 700;
      color: #ffc440;
      letter-spacing: 0.05em;
      flex: 0 0 auto;
      text-shadow: 0 0 8px rgba(255, 180, 80, 0.6);
    }
    .floor-nav .fl-name {
      font-family: var(--mono), monospace;
      font-size: 12px;
      color: rgba(255, 240, 180, 0.92);
      letter-spacing: 0.06em;
      flex: 1 1 auto;
    }
    .floor-nav .fl-cn {
      display: block;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 10px;
      color: rgba(255, 220, 160, 0.60);
      letter-spacing: 0.15em;
      margin-top: 2px;
    }
    .floor-nav li.active a {
      background: rgba(255, 200, 100, 0.18);
      border-color: rgba(255, 200, 100, 0.55);
      transform: translateX(4px);
    }
    .floor-nav li.active .fl-num {
      color: #ffd700;
      text-shadow: 0 0 12px rgba(255, 200, 80, 0.9);
    }
    .floor-nav li.active .fl-name {
      color: rgba(255, 240, 180, 1);
    }
    .floor-nav li.active .fl-cn {
      color: rgba(255, 220, 160, 0.85);
    }

    .nav-list { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
    .nav-list a {
      display: block;
      text-decoration: none;
      padding: 6px 8px;
      border-radius: 3px;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 12px;
      color: rgba(255, 235, 180, 0.85);
      letter-spacing: 0.10em;
      transition: background 140ms ease, color 140ms ease;
    }
    .nav-list a:hover {
      background: rgba(255, 180, 80, 0.14);
      color: #ffe066;
    }
    .nav-list .ni-en {
      font-family: var(--mono), monospace;
      font-size: 9px;
      color: rgba(200, 170, 100, 0.65);
      margin-left: 6px;
      letter-spacing: 0.20em;
    }
    .biz-info {
      font-family: var(--mono), monospace;
      font-size: 10px;
      color: rgba(255, 235, 180, 0.78);
      line-height: 1.65;
      letter-spacing: 0.06em;
    }
    .biz-info .row { display: flex; align-items: center; gap: 4px; }
    .biz-info .label {
        color: rgba(255, 235, 180, 0.78);
        margin-right: 4px;
    }
    .biz-info .pulse {
      width: 8px; height: 8px; border-radius: 50%;
      background: #00ff88;
      box-shadow: 0 0 8px rgba(0, 255, 136, 0.85);
      animation: dotPulse 1.6s ease-in-out infinite;
      display: inline-block;
    }
    @keyframes dotPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.45; transform: scale(0.85); }
    }
    @keyframes dotPulseRed {
      0%, 100% { opacity: 1; transform: scale(1); background: #ff3333; box-shadow: 0 0 8px rgba(255, 51, 51, 0.85); }
      50% { opacity: 0.45; transform: scale(0.85); background: #ff6666; box-shadow: 0 0 12px rgba(255, 102, 102, 0.95); }
    }
    /* 文字故障闪烁动画 - 只影响颜色/透明度，无红色底框 */
    @keyframes textGlitch {
      0%, 100% { opacity: 1; color: #ff4444; }
      25% { opacity: 0.7; color: #ff6666; }
      50% { opacity: 1; color: #ff2222; }
      75% { opacity: 0.8; color: #ff8888; }
    }

    /* ----- 楼层卡片区 ----- */
    .home-floors {
      display: flex;
      flex-direction: column;
      gap: 32px;
      min-width: 0;
      overflow: hidden;
    }

    /* 楼层之间的"楼梯分隔条"：▼ 2F ▼ 居中 */
    .home-floors .floor + .floor {
      position: relative;
      margin-top: 6px;
    }
    .home-floors .floor + .floor::after {
      /* 占位的伪元素由各主题色重写；通用基线 */
      content: "";
    }

    .floor {
      position: relative;
      background: rgba(10, 8, 22, 0.92);
      border: 1px solid rgba(180, 120, 255, 0.30);
      border-radius: 6px;
      padding: 8px 12px 10px;
      box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.72),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
      overflow: hidden;
      min-width: 0;
    }
    .floor::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
      mix-blend-mode: overlay;
      z-index: 0;
    }
    .floor > * { position: relative; z-index: 1; }

    /* ---- 楼层头部：电梯指示牌（左：大色块楼层号 / 右：名称 + 英文） ---- */
    .floor-head {
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      gap: 14px;
      flex-wrap: nowrap;
      margin-bottom: 8px;
      padding-bottom: 6px;
      padding-left: 60px;
      min-height: 44px;
      border-bottom: 1px dashed rgba(180, 120, 255, 0.28);
    }
    /* 在 .floor-head 左侧自动注入大号楼层号块 */
    .floor[data-floor]::before {
      /* 保留原扫描线 ::before，不改 */
    }
    .floor-head > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      min-width: 0;
      flex: 1 1 auto;
    }
    .floor-head .fl-tag {
      font-family: var(--mono), monospace;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.10em;
      color: #ffb3d9;
      text-shadow: 0 0 10px rgba(255, 110, 180, 0.5);
    }
    .floor-head .fl-en-sub {
      font-family: var(--mono), monospace;
      font-size: 10px;
      color: rgba(255, 200, 240, 0.50);
      letter-spacing: 0.30em;
      text-transform: uppercase;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    /* 楼层号方块（HTML 元素，替代 ::after 伪元素） */
    .fl-num-badge {
      position: absolute;
      top: 6px;
      left: 10px;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono), monospace;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: #fff;
      background: rgba(180, 120, 255, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.45);
      border-radius: 4px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
      z-index: 2;
      pointer-events: none;
    }

    /* 楼层主体：左侧大招牌 + 右侧 3 个产品横排 */
    .floor-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
      min-width: 0;
      overflow: hidden;
    }
    @media (max-width: 880px) {
      .floor-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      .floor-body > .ff-brand { grid-column: span 2; }
    }
    @media (max-width: 480px) {
      .floor-body { grid-template-columns: minmax(0, 1fr); }
      .floor-body > .ff-brand { grid-column: auto; }
    }

    /* 左侧品牌标题区域（链接） */
    .ff-brand {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8px 14px;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      min-height: 110px;
      min-width: 0;
      transition: transform 160ms ease;
      position: relative;
      overflow: hidden;
    }
    .ff-brand .ff-title {
      font-family: var(--mono), "Times New Roman", serif;
      font-size: clamp(22px, 2.8vw, 36px);
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #ffe48a;
      text-shadow:
        0 0 8px rgba(255, 180, 60, 0.85),
        0 0 24px rgba(255, 130, 30, 0.55),
        0 0 48px rgba(255, 90, 20, 0.40);
      line-height: 1.05;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .ff-brand .ff-desc {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 11px;
      color: rgba(255, 235, 250, 0.78);
      letter-spacing: 0.06em;
      line-height: 1.5;
      margin-top: 6px;
    }
    .ff-brand:hover {
      transform: translateY(-2px);
    }

    /* ============================================================
       1F · Y2K METER —— 亮粉商场柜台 · VT323 像素 LCD
       ============================================================ */
    .floor.ft-y2k {
      background:
        radial-gradient(circle at 0px 0px, #ffc5de 0, #ffc5de 1px, transparent 1px, transparent 100%) 0 0/10px 10px,
        radial-gradient(circle at 5px 5px, #ffd6e8 0, #ffd6e8 1px, transparent 1px, transparent 100%) 0 0/10px 10px,
        linear-gradient(135deg, #ffeaf4 0%, #ffc5de 50%, #ffb7d8 100%);
      border: 1px solid #ff8fb5;
      box-shadow:
        inset 0 0 0 2px #fff,
        0 14px 36px rgba(255, 110, 180, 0.28),
        0 0 0 1px rgba(255, 143, 181, 0.4);
    }
    .floor.ft-y2k::before {
      /* 1F 不要通用扫描线，下方有专属星星纹理 ::before 覆盖 */
      display: none;
    }
    /* Y2K 主题楼层号方块 */
    .fl-num-badge.ft-y2k {
      background: linear-gradient(180deg, #ff5fa0, #c23368);
      color: #fff;
      border: 2px solid #fff;
      box-shadow: 0 2px 2px 0 #c23368, 0 8px 20px rgba(194, 51, 104, 0.45);
      font-family: var(--font-y2k);
      font-size: 30px;
      letter-spacing: 0;
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    }
    .floor.ft-y2k .floor-head {
      border-bottom: 1px dashed rgba(194, 51, 104, 0.55);
      background: linear-gradient(180deg, rgba(255, 240, 250, 0.85), rgba(255, 200, 230, 0.55));
    }
    .floor.ft-y2k .fl-tag {
      color: #511129;
      font-family: var(--font-y2k);
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.06em;
      text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
      line-height: 1.6;
    }
    /* 中文使用统一中文字体，对齐基线 */
    .floor.ft-y2k .fl-tag .zh-text {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      vertical-align: middle;
    }
    .floor.ft-y2k .fl-en-sub {
      color: rgba(81, 17, 41, 0.65);
      font-family: var(--font-y2k);
      font-size: 14px;
      letter-spacing: 0.18em;
    }
    .floor.ft-y2k .ff-brand .ff-title {
      font-family: var(--font-y2k);
      font-weight: 400;
      font-size: clamp(40px, 5vw, 64px);
      letter-spacing: 0.02em;
      line-height: 0.95;
      color: #511129;
      text-shadow:
        2px 2px 0 #ffb7d8,
        4px 4px 0 rgba(194, 51, 104, 0.55),
        0 0 12px rgba(255, 143, 181, 0.7),
        0 0 26px rgba(255, 95, 158, 0.45);
      animation: y2kGlowPulse 3.8s ease-in-out infinite;
    }
    @keyframes y2kGlowPulse {
      0%, 100% {
        text-shadow:
          2px 2px 0 #ffb7d8,
          4px 4px 0 rgba(194, 51, 104, 0.55),
          0 0 12px rgba(255, 143, 181, 0.55),
          0 0 26px rgba(255, 95, 158, 0.40);
      }
      50% {
        text-shadow:
          2px 2px 0 #ffcae1,
          4px 4px 0 rgba(194, 51, 104, 0.55),
          0 0 18px rgba(255, 170, 220, 0.85),
          0 0 38px rgba(255, 120, 200, 0.55);
      }
    }
    /* 1F 装饰：大标题右上角飘星星 + 整层散布的小星星纹理 */
    .floor.ft-y2k .ff-brand .ff-title {
      position: relative;
      display: inline-block;
      width: fit-content;
    }
    .floor.ft-y2k .ff-brand .ff-title::after {
      content: "✦";
      position: absolute;
      top: -4px;
      left: 100%;
      margin-left: 8px;
      font-size: 20px;
      color: #fff;
      text-shadow: 0 0 8px #ff5fa0, 0 0 16px #ff8fb5;
      animation: y2kStar 2.4s ease-in-out infinite;
      pointer-events: none;
      z-index: 2;
      width: auto;
      height: auto;
    }
    @keyframes y2kStar {
      0%, 100% { transform: rotate(0) scale(1); opacity: 0.9; }
      50% { transform: rotate(180deg) scale(1.2); opacity: 1; }
    }
    /* 1F 整层散布的星星纹理（叠在原粉色背景之上、内容之下） */
    .floor.ft-y2k::before {
      content: "";
      display: block;
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 12% 22%, #fff 0, #fff 1.5px, transparent 1.6px, transparent 100%),
        radial-gradient(circle at 88% 14%, #ff5fa0 0, #ff5fa0 2px, transparent 2.2px, transparent 100%),
        radial-gradient(circle at 30% 78%, #fff 0, #fff 1.2px, transparent 1.4px, transparent 100%),
        radial-gradient(circle at 72% 60%, #ff8fb5 0, #ff8fb5 1.8px, transparent 2px, transparent 100%),
        radial-gradient(circle at 50% 40%, #fff 0, #fff 1px, transparent 1.2px, transparent 100%),
        radial-gradient(circle at 18% 56%, #c23368 0, #c23368 1.5px, transparent 1.8px, transparent 100%),
        radial-gradient(circle at 64% 88%, #fff 0, #fff 1.5px, transparent 1.8px, transparent 100%),
        radial-gradient(circle at 92% 70%, #ff5fa0 0, #ff5fa0 1.2px, transparent 1.5px, transparent 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='%23ff5fa0' opacity='0.85'><text x='14' y='28' font-family='monospace' font-size='14'>✦</text><text x='118' y='52' font-family='monospace' font-size='10' fill='%23fff'>✧</text><text x='52' y='96' font-family='monospace' font-size='12' fill='%23c23368'>✦</text><text x='150' y='118' font-family='monospace' font-size='9' fill='%23ff8fb5'>✧</text><text x='28' y='150' font-family='monospace' font-size='11' fill='%23fff'>✦</text><text x='92' y='168' font-family='monospace' font-size='10'>✧</text><text x='160' y='38' font-family='monospace' font-size='8' fill='%23fff'>✦</text><text x='78' y='34' font-family='monospace' font-size='9' fill='%23ff8fb5'>✧</text></g></svg>");
      background-size:
        100% 100%, 100% 100%, 100% 100%, 100% 100%,
        100% 100%, 100% 100%, 100% 100%, 100% 100%,
        180px 180px;
      background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat, no-repeat, no-repeat, no-repeat,
        repeat;
      pointer-events: none;
      z-index: 0;
      mix-blend-mode: normal;
      opacity: 0.85;
      animation: y2kStarsTwinkle 5s steps(8) infinite;
    }
    @keyframes y2kStarsTwinkle {
      0%, 100% { opacity: 0.85; }
      50% { opacity: 0.55; }
    }

    .floor.ft-y2k .ff-brand .ff-platform {
      color: rgba(81, 17, 41, 0.65);
      font-family: var(--font-y2k);
      font-size: 16px;
      letter-spacing: 0.16em;
      margin-top: 8px;
      margin-bottom: 12px;
    }
    .floor.ft-y2k .ff-brand .ff-desc {
      color: #7a2a47;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 14px;
      letter-spacing: 0.08em;
    }
    .floor.ft-y2k .ff-brand .ff-enter-hint {
      color: rgba(194, 51, 104, 0.55);
      font-family: var(--font-y2k);
      font-size: 11px;
      letter-spacing: 0.18em;
      margin-top: 14px;
      text-align: center;
    }
    .floor.ft-y2k:hover {
      box-shadow:
        inset 0 0 0 2px #fff,
        0 18px 44px rgba(255, 110, 180, 0.45),
        0 0 0 1px rgba(255, 95, 158, 0.6);
    }
    /* 1F 产品卡：粉底白边 */
    .floor.ft-y2k .floor-item {
      background: rgba(255, 234, 244, 0.92);
      border: 1px solid rgba(194, 51, 104, 0.4);
      box-shadow: inset 0 0 0 1px #fff;
    }
    .floor.ft-y2k .floor-item .fi-name {
      color: #511129;
      font-family: var(--font-y2k);
      font-size: 14px;
      letter-spacing: 0.04em;
    }
    .floor.ft-y2k .floor-item .fi-cn {
      color: #7a2a47;
    }
    .floor.ft-y2k .floor-item .fi-tag {
      color: rgba(81, 17, 41, 0.55);
    }
    .floor.ft-y2k .floor-item .fi-price {
      color: #c23368;
      font-family: var(--font-y2k);
      font-size: 16px;
      text-shadow: 0 0 6px rgba(255, 143, 181, 0.6);
      text-decoration: line-through;
      text-decoration-color: rgba(194, 51, 104, 0.7);
      text-decoration-thickness: 2px;
    }
    .floor.ft-y2k .floor-item .fi-price-free {
      font-family: var(--font-y2k);
      font-size: 18px;
      color: #e91e8a;
      text-shadow: 0 0 8px rgba(255, 143, 181, 0.8);
    }
    .floor.ft-y2k .floor-item .fi-thumb {
      background: #ffe4f0;
      border: 1px solid rgba(194, 51, 104, 0.3);
    }
    .floor.ft-y2k .floor-item .fi-thumb img {
      object-fit: contain;
      filter: contrast(1.05) saturate(1.1);
    }
    .floor.ft-y2k .floor-item .fi-thumb::after {
      /* 1F 不要扫描线 */
      background: none;
    }

    /* ============================================================
       2F · CRTLOSS —— 老电视专卖店 · 暖琥珀显像管 · Press Start 2P
       ============================================================ */
    .floor.ft-crt {
      background:
        repeating-linear-gradient(0deg, transparent 0 1px, rgba(255, 174, 66, 0.05) 1px 2px),
        radial-gradient(ellipse at center, #1f1608 0%, #14100a 50%, #0a0805 100%);
      border: 1px solid rgba(255, 174, 66, 0.50);
      box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 174, 66, 0.18),
        0 18px 48px rgba(0, 0, 0, 0.7);
    }
    .floor.ft-crt::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 200, 100, 0.04) 2px 4px);
      pointer-events: none;
      z-index: 0;
    }
    .floor.ft-crt .floor-head {
      position: relative;
      border-bottom: 1px dashed rgba(255, 174, 66, 0.3);
    }
    .floor.ft-crt .floor-head > div {
      position: relative;
      z-index: 5;
    }
    /* CRT 主题楼层号方块 */
    .fl-num-badge.ft-crt {
      background: linear-gradient(180deg, #2a1a08, #1a1004);
      color: #ffae42;
      border: 1px solid rgba(255, 174, 66, 0.7);
      box-shadow:
        inset 0 0 12px rgba(255, 174, 66, 0.35),
        0 0 16px rgba(255, 174, 66, 0.4);
      font-family: var(--font-crt);
      font-size: 14px;
      letter-spacing: 0;
      text-shadow: 0 0 6px rgba(255, 174, 66, 0.85);
    }
    .floor.ft-crt .fl-tag {
      position: relative;
      z-index: 5;
      color: #ffc832;
      font-family: var(--font-crt);
      font-size: 16px;
      letter-spacing: 0.06em;
      text-shadow: 0 0 10px rgba(255, 200, 50, 0.9), 0 0 20px rgba(255, 174, 66, 0.5);
      line-height: 1.6;
    }
    /* 中文使用统一中文字体，对齐基线 */
    .floor.ft-crt .fl-tag .zh-text {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      vertical-align: middle;
    }
    .floor.ft-crt .fl-en-sub {
      position: relative;
      z-index: 5;
      color: rgba(255, 200, 100, 0.75);
      font-family: var(--font-crt);
      font-size: 9px;
      letter-spacing: 0.16em;
    }
    .floor.ft-crt .ff-brand .ff-title {
      font-family: var(--font-crt);
      font-size: clamp(24px, 3.2vw, 38px);
      letter-spacing: 0.04em;
      line-height: 1.15;
      color: #ffae42;
      text-shadow:
        0 0 8px rgba(255, 174, 66, 0.85),
        0 0 20px rgba(255, 130, 40, 0.55),
        0 0 40px rgba(255, 90, 20, 0.35);
      animation: crtFlicker 5.4s steps(20) infinite;
    }
    @keyframes crtFlicker {
      0%, 92%, 100% { opacity: 1; }
      94% { opacity: 0.82; }
      96% { opacity: 1; }
      97% { opacity: 0.6; }
      98% { opacity: 1; }
    }
    /* 2F 装饰：底部 SMPTE 彩条 */
    .floor.ft-crt .ff-brand::after {
      content: "";
      position: absolute;
      bottom: 14px;
      left: 22px;
      right: 22px;
      height: 14px;
      background: linear-gradient(90deg,
        #c8c8c8 0 14.28%,
        #c8c800 14.28% 28.57%,
        #00c8c8 28.57% 42.85%,
        #00c800 42.85% 57.14%,
        #c800c8 57.14% 71.42%,
        #c80000 71.42% 85.71%,
        #0000c8 85.71% 100%);
      border: 1px solid rgba(255, 174, 66, 0.4);
      box-shadow: 0 0 12px rgba(255, 174, 66, 0.25);
      opacity: 0.85;
    }
    .floor.ft-crt .ff-brand .ff-platform {
      color: rgba(255, 200, 100, 0.75);
      font-family: var(--font-crt);
      font-size: 10px;
      letter-spacing: 0.16em;
      margin-top: 8px;
      margin-bottom: 12px;
    }
    .floor.ft-crt .ff-brand .ff-desc {
      color: rgba(255, 200, 130, 0.80);
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 13px;
      letter-spacing: 0.10em;
      line-height: 1.7;
    }
    .floor.ft-crt .ff-brand .ff-enter-hint {
      color: rgba(255, 174, 66, 0.5);
      font-family: var(--font-crt);
      font-size: 11px;
      letter-spacing: 0.20em;
      margin-top: 14px;
      text-align: center;
    }
    .floor.ft-crt:hover {
      border-color: rgba(255, 174, 66, 0.85);
      box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 174, 66, 0.35),
        0 22px 56px rgba(0, 0, 0, 0.7),
        0 0 28px rgba(255, 174, 66, 0.35);
    }
    /* 2F 产品卡：暗琥珀 */
    .floor.ft-crt .floor-item {
      background: linear-gradient(180deg, rgba(20, 14, 8, 0.92), rgba(10, 8, 4, 0.92));
      border: 1px solid rgba(255, 174, 66, 0.35);
    }
    .floor.ft-crt .floor-item .fi-name {
      color: #ffae42;
      font-family: var(--font-crt);
      font-size: 8px;
      letter-spacing: 0.08em;
      text-shadow: 0 0 6px rgba(255, 174, 66, 0.6);
    }
    .floor.ft-crt .floor-item .fi-cn {
      color: rgba(255, 200, 130, 0.65);
      letter-spacing: 0.22em;
    }
    .floor.ft-crt .floor-item .fi-tag {
      color: rgba(255, 174, 66, 0.45);
      font-family: var(--font-crt);
      font-size: 7px;
      letter-spacing: 0.12em;
    }
    .floor.ft-crt .floor-item .fi-price {
      color: #ffae42;
      font-family: var(--font-crt);
      font-size: 10px;
      letter-spacing: 0;
      text-shadow: 0 0 6px rgba(255, 174, 66, 0.6);
      text-decoration: none;
      position: relative;
    }
    .floor.ft-crt .floor-item .fi-price::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(calc(-50% - 2px));
      height: 1px;
      background: rgba(255, 174, 66, 0.7);
    }
    .floor.ft-crt .floor-item .fi-price::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(calc(-50% + 1px));
      height: 1px;
      background: rgba(255, 174, 66, 0.7);
    }
    .floor.ft-crt .floor-item .fi-price-free {
      font-family: var(--font-crt);
      font-size: 12px;
      color: #ffc107;
      text-shadow: 0 0 8px rgba(255, 193, 7, 0.8);
      letter-spacing: 1px;
    }
    .floor.ft-crt .floor-item .fi-thumb {
      background: #1a1208;
      border: 1px solid rgba(255, 174, 66, 0.3);
    }
    .floor.ft-crt .floor-item .fi-thumb img {
      object-fit: contain;
      filter: contrast(1.1) saturate(0.92) sepia(0.18);
    }
    .floor.ft-crt .floor-item .fi-thumb::after {
      background: repeating-linear-gradient(0deg, rgba(255, 174, 66, 0.06) 0 1px, transparent 1px 3px);
    }

    /* ============================================================
       3F · RORRERROR —— 地下故障实验室 · 赤红血光 · Major Mono Display
       ============================================================ */
    .floor.ft-rorrerror {
      background:
        repeating-linear-gradient(0deg, transparent 0 1px, rgba(255, 31, 63, 0.06) 1px 2px),
        radial-gradient(ellipse at 30% 20%, #200405 0%, #140204 40%, #0a0001 100%);
      border: 1px solid rgba(255, 31, 63, 0.55);
      box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(255, 31, 63, 0.2),
        0 20px 56px rgba(0, 0, 0, 0.78),
        0 0 24px rgba(255, 31, 63, 0.18);
    }
    .floor.ft-rorrerror::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 31, 63, 0.04) 2px 3px),
        repeating-linear-gradient(90deg, transparent 0 80px, rgba(255, 31, 63, 0.05) 80px 81px);
      pointer-events: none;
      z-index: 0;
    }
    .floor.ft-rorrerror .floor-head {
      position: relative;
      border-bottom: 1px dashed rgba(255, 31, 63, 0.35);
    }
    .floor.ft-rorrerror .floor-head > div {
      position: relative;
      z-index: 5;
    }
    /* RORRERROR 主题楼层号方块 */
    .fl-num-badge.ft-rorrerror {
      background: linear-gradient(180deg, #1a0205, #0a0001);
      color: #ff1f3f;
      border: 1px solid rgba(255, 31, 63, 0.7);
      box-shadow:
        inset 0 0 12px rgba(255, 31, 63, 0.4),
        0 0 18px rgba(255, 31, 63, 0.55);
      font-family: var(--font-rorrerror);
      font-size: 18px;
      letter-spacing: 0;
      text-shadow: 0 0 8px rgba(255, 31, 63, 0.95);
    }
    .floor.ft-rorrerror .fl-tag {
      position: relative;
      z-index: 5;
      color: #ff4d6a;
      font-family: "AtomicMarker", var(--font-rorrerror), monospace;
      font-size: 16px;
      letter-spacing: 0.02em;
      text-shadow: 0 0 10px rgba(255, 31, 63, 0.9), 0 0 25px rgba(255, 31, 63, 0.5);
      line-height: 1.6;
    }
    /* 中文使用统一中文字体，对齐基线 */
    .floor.ft-rorrerror .fl-tag .zh-text {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      vertical-align: middle;
    }
    .floor.ft-rorrerror .fl-en-sub {
      position: relative;
      z-index: 5;
      color: rgba(255, 100, 120, 0.75);
      font-family: var(--font-rorrerror);
      font-size: 11px;
      letter-spacing: 0.20em;
    }
    .floor.ft-rorrerror .ff-brand .ff-title {
      font-family: var(--font-rorrerror);
      font-size: clamp(30px, 4vw, 45px);
      letter-spacing: 0.01em;
      line-height: 1.0;
      color: #ff1f3f;
      text-shadow:
        0 0 8px rgba(255, 31, 63, 0.85),
        0 0 22px rgba(255, 31, 63, 0.55),
        0 0 44px rgba(255, 31, 63, 0.32),
        2px 0 0 rgba(0, 200, 255, 0.45),
        -2px 0 0 rgba(255, 200, 0, 0.35);
      animation: rorrerrorGlitch 4s steps(8) infinite;
    }
    @keyframes rorrerrorGlitch {
      0%, 88%, 100% { transform: translate(0, 0); }
      90% { transform: translate(-3px, 0); text-shadow: 0 0 8px rgba(255, 31, 63, 0.95), 4px 0 0 rgba(0, 200, 255, 0.65), -4px 0 0 rgba(255, 200, 0, 0.55); }
      92% { transform: translate(3px, -1px); }
      94% { transform: translate(0, 1px); }
      96% { transform: translate(-2px, 0); }
      98% { transform: translate(1px, -1px); }
    }
    /* 3F 装饰：散布在整个楼层区域的乱码效果 */
    .floor.ft-rorrerror .ff-brand .ff-title {
      position: relative;
      display: inline-block;
      width: fit-content;
    }
    /* 乱码容器 - 覆盖整个楼层区域 */
    .floor.ft-rorrerror .glitch-code-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    /* 单个乱码字符/字符串 */
    .floor.ft-rorrerror .glitch-code {
      position: absolute;
      font-family: var(--font-rorrerror);
      font-size: 11px;
      color: rgba(255, 31, 63, 0.45);
      letter-spacing: 0.08em;
      text-shadow: 0 0 6px rgba(255, 31, 63, 0.3);
      pointer-events: none;
      white-space: nowrap;
      animation: errFlicker 3s steps(6) infinite;
      user-select: none;
    }
    @keyframes errFlicker {
      0%, 100% { opacity: 0.5; }
      15% { opacity: 0.2; }
      30% { opacity: 0.7; }
      45% { opacity: 0.15; }
      60% { opacity: 0.6; }
      80% { opacity: 0.25; }
    }
    .floor.ft-rorrerror .ff-brand .ff-platform {
      color: rgba(255, 100, 120, 0.75);
      font-family: var(--font-rorrerror);
      font-size: 11px;
      letter-spacing: 0.20em;
      margin-top: 8px;
      margin-bottom: 12px;
    }
    .floor.ft-rorrerror .ff-brand .ff-desc {
      color: rgba(255, 122, 60, 0.78);
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 13px;
      letter-spacing: 0.06em;
      line-height: 1.7;
    }
    .floor.ft-rorrerror .ff-brand .ff-enter-hint {
      color: rgba(255, 31, 63, 0.5);
      font-family: var(--font-rorrerror);
      font-size: 11px;
      letter-spacing: 0.22em;
      margin-top: 14px;
      text-align: center;
    }
    .floor.ft-rorrerror:hover {
      border-color: rgba(255, 31, 63, 0.85);
      box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 31, 63, 0.4),
        0 24px 60px rgba(0, 0, 0, 0.78),
        0 0 32px rgba(255, 31, 63, 0.4);
    }
    /* 3F 产品卡：焦黑 */
    .floor.ft-rorrerror .floor-item {
      background: linear-gradient(180deg, rgba(16, 4, 6, 0.92), rgba(8, 0, 2, 0.95));
      border: 1px solid rgba(255, 31, 63, 0.4);
    }
    .floor.ft-rorrerror .floor-item .fi-name {
      color: #ff1f3f;
      font-family: var(--font-rorrerror);
      font-size: 12px;
      letter-spacing: 0.04em;
      text-shadow: 0 0 6px rgba(255, 31, 63, 0.7);
    }
    .floor.ft-rorrerror .floor-item .fi-cn {
      color: rgba(255, 122, 60, 0.65);
    }
    .floor.ft-rorrerror .floor-item .fi-tag {
      color: rgba(255, 31, 63, 0.5);
      font-family: var(--font-rorrerror);
      font-size: 9px;
      letter-spacing: 0.10em;
    }
    .floor.ft-rorrerror .floor-item .fi-price {
      color: #ff1f3f;
      font-family: var(--font-rorrerror);
      font-size: 14px;
      letter-spacing: 0;
      text-shadow: 0 0 6px rgba(255, 31, 63, 0.8);
      text-decoration: line-through;
      text-decoration-style: dashed;
      text-decoration-color: rgba(255, 31, 63, 0.7);
      text-decoration-thickness: 2px;
    }
    .floor.ft-rorrerror .floor-item .fi-price-free {
      font-family: var(--font-rorrerror);
      font-size: 16px;
      color: #ff1744;
      text-shadow: 0 0 10px rgba(255, 23, 68, 0.9);
      letter-spacing: 1px;
    }
    .floor.ft-rorrerror .floor-item .fi-thumb {
      background: #0a0001;
      border: 1px solid rgba(255, 31, 63, 0.3);
    }
    .floor.ft-rorrerror .floor-item .fi-thumb img {
      object-fit: contain;
      filter: contrast(1.15) saturate(1.1) hue-rotate(-6deg);
    }
    .floor.ft-rorrerror .floor-item .fi-thumb::after {
      background:
        repeating-linear-gradient(0deg, rgba(255, 31, 63, 0.06) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 31, 63, 0.04) 40px 41px);
    }

    /* ============================================================
       4F · PUPON —— 激光/珍珠控制台 · 冷色金属与蓝白辉光
       ============================================================ */
    .floor.ft-pupon {
      background:
        radial-gradient(560px 240px at 18% 0%, rgba(255, 59, 59, 0.18), transparent 58%),
        radial-gradient(560px 240px at 82% 0%, rgba(59, 123, 255, 0.18), transparent 58%),
        linear-gradient(180deg, #17181d 0%, #111217 54%, #0a0b0f 100%);
      border: 1px solid rgba(185, 191, 204, 0.45);
      box-shadow:
        inset 0 0 0 1px rgba(215, 220, 230, 0.10),
        inset 0 0 90px rgba(0, 0, 0, 0.76),
        0 18px 52px rgba(0, 0, 0, 0.84),
        -8px 0 24px rgba(255, 59, 59, 0.16),
        8px 0 24px rgba(59, 123, 255, 0.16);
    }
    .floor.ft-pupon::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(220, 224, 236, 0.05) 2px 3px),
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(210, 216, 228, 0.03) 72px 73px);
      opacity: 0.62;
    }
    .floor.ft-pupon .floor-head {
      border-bottom: 1px dashed rgba(190, 196, 210, 0.48);
      background: linear-gradient(180deg, rgba(62, 66, 78, 0.42), rgba(20, 22, 30, 0.16));
    }
    .floor.ft-pupon .fl-num-badge.ft-pupon {
      background:
        linear-gradient(135deg, rgba(255, 59, 59, 0.24), rgba(59, 123, 255, 0.24)),
        linear-gradient(180deg, #171a24, #0f1219);
      color: #eef2f8;
      border: 1px solid rgba(195, 202, 216, 0.74);
      box-shadow:
        inset 0 0 10px rgba(208, 216, 234, 0.22),
        0 0 14px rgba(255, 59, 59, 0.18),
        0 0 14px rgba(59, 123, 255, 0.18);
      font-family: "AtomicMarker", var(--font-rorrerror), monospace;
      font-weight: 400;
      font-style: normal;
      font-synthesis: none;
      font-size: 17px;
      letter-spacing: 0;
      text-shadow: 0 0 8px rgba(230, 236, 248, 0.75);
    }
    .floor.ft-pupon .fl-tag {
      color: #edf1f8;
      font-family: var(--mono), monospace;
      font-size: 15px;
      letter-spacing: 0.06em;
      text-shadow: 0 0 8px rgba(208, 218, 236, 0.34);
      line-height: 1.6;
    }
    .floor.ft-pupon .fl-tag .zh-text {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      vertical-align: middle;
    }
    .floor.ft-pupon .fl-en-sub {
      color: rgba(212, 220, 236, 0.9);
      font-family: "AtomicMarker", var(--mono), monospace;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-shadow:
        -1px 0 0 rgba(255, 59, 59, 0.30),
        1px 0 0 rgba(59, 123, 255, 0.30);
    }
    .floor.ft-pupon .ff-brand .ff-title {
      font-family: "AtomicMarker", var(--font-rorrerror), monospace;
      font-size: clamp(32px, 4.2vw, 52px);
      letter-spacing: 0.02em;
      line-height: 1.02;
      color: #f0f4fb;
      text-shadow:
        -2px 0 0 rgba(255, 59, 59, 0.34),
        2px 0 0 rgba(59, 123, 255, 0.34),
        0 0 10px rgba(228, 236, 250, 0.52);
    }
    .floor.ft-pupon .ff-brand .ff-platform {
      color: rgba(178, 188, 208, 0.82);
      font-family: var(--mono), monospace;
      font-size: 11px;
      letter-spacing: 0.17em;
      margin-top: 8px;
      margin-bottom: 12px;
    }
    .floor.ft-pupon .ff-brand .ff-desc {
      color: rgba(204, 214, 232, 0.9);
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 13px;
      letter-spacing: 0.06em;
      line-height: 1.65;
    }
    .floor.ft-pupon .ff-brand .ff-enter-hint {
      color: rgba(188, 198, 218, 0.82);
      font-family: "AtomicMarker", var(--mono), monospace;
      font-size: 11px;
      letter-spacing: 0.2em;
      margin-top: 14px;
      text-align: center;
    }
    .floor.ft-pupon:hover {
      border-color: rgba(202, 210, 226, 0.62);
      box-shadow:
        inset 0 0 0 1px rgba(222, 228, 238, 0.14),
        inset 0 0 90px rgba(0, 0, 0, 0.72),
        0 22px 58px rgba(0, 0, 0, 0.86),
        -10px 0 30px rgba(255, 59, 59, 0.2),
        10px 0 30px rgba(59, 123, 255, 0.2);
    }
    .floor.ft-pupon .floor-item {
      background: linear-gradient(180deg, rgba(25, 28, 37, 0.92), rgba(14, 16, 24, 0.95));
      border: 1px solid rgba(156, 166, 188, 0.36);
    }
    .floor.ft-pupon .floor-item .fi-name {
      color: #dde3f0;
      font-family: var(--mono), monospace;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-shadow: 0 0 6px rgba(182, 196, 222, 0.38);
    }
    .floor.ft-pupon .floor-item .fi-cn {
      color: rgba(176, 188, 212, 0.72);
    }
    .floor.ft-pupon .floor-item .fi-tag {
      color: rgba(168, 182, 210, 0.64);
      font-family: var(--mono), monospace;
      font-size: 8px;
      letter-spacing: 0.12em;
    }
    .floor.ft-pupon .floor-item .fi-price {
      color: #c7cfdf;
      font-family: var(--mono), monospace;
      font-size: 12px;
      text-decoration: line-through;
      text-decoration-color: rgba(182, 194, 214, 0.68);
      text-shadow: 0 0 6px rgba(188, 198, 220, 0.32);
    }
    .floor.ft-pupon .floor-item .fi-price-free {
      font-family: var(--mono), monospace;
      font-size: 14px;
      color: #eef3fb;
      text-shadow: 0 0 8px rgba(214, 224, 240, 0.62);
    }
    .floor.ft-pupon .floor-item .fi-thumb {
      background: #12141d;
      border: 1px solid rgba(154, 166, 192, 0.34);
    }
    .floor.ft-pupon .floor-item .fi-thumb img {
      object-fit: cover;
      filter: contrast(1.08) saturate(0.84);
    }
    .floor.ft-pupon .floor-item .fi-thumb::after {
      background:
        repeating-linear-gradient(0deg, rgba(208, 214, 226, 0.08) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, rgba(255, 59, 59, 0.10), rgba(59, 123, 255, 0.10));
    }
    .floor.ft-pupon .floor-item:nth-child(2) .fi-name,
    .floor.ft-pupon .floor-item:nth-child(2) .fi-price-free {
      color: #ff8e96;
      text-shadow: 0 0 8px rgba(255, 59, 59, 0.42);
    }
    .floor.ft-pupon .floor-item:nth-child(4) .fi-name,
    .floor.ft-pupon .floor-item:nth-child(4) .fi-price-free {
      color: #8eb0ff;
      text-shadow: 0 0 8px rgba(59, 123, 255, 0.42);
    }

    /* ============================================================
       5F · CONSTRUCTION —— 施工中楼层 · 黄黑警示胶带缠绕 · 无商品展示窗
       ============================================================ */
    .floor.ft-construction {
      background:
        radial-gradient(circle at 50% 6%, rgba(196, 196, 196, 0.22), transparent 42%),
        linear-gradient(180deg, rgba(30, 30, 30, 0.97), rgba(12, 12, 12, 0.99));
      border: 1px solid rgba(148, 148, 148, 0.72);
      box-shadow:
        inset 0 0 0 1px rgba(126, 126, 126, 0.3),
        inset 0 0 120px rgba(0, 0, 0, 0.82),
        0 18px 52px rgba(0, 0, 0, 0.88),
        0 0 20px rgba(138, 138, 138, 0.28);
    }
    .floor.ft-construction::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(180deg, rgba(182, 182, 182, 0.14), transparent 28%),
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(142, 142, 142, 0.06) 2px 3px);
      opacity: 0.64;
    }
    .floor.ft-construction .floor-head {
      border-bottom: 1px dashed rgba(156, 156, 156, 0.74);
      background: linear-gradient(180deg, rgba(176, 176, 176, 0.16), rgba(116, 116, 116, 0.05));
    }
    .fl-num-badge.ft-construction {
      background: linear-gradient(180deg, #2a2a2a, #141414);
      color: #ffffff;
      border: 1px solid rgba(156, 156, 156, 0.9);
      box-shadow:
        inset 0 0 10px rgba(128, 128, 128, 0.32),
        0 0 14px rgba(132, 132, 132, 0.3);
      font-family: var(--font-crt);
      font-size: 13px;
      letter-spacing: 0.04em;
      text-shadow: 0 0 8px rgba(156, 156, 156, 0.72);
    }
    .floor.ft-construction .fl-tag {
      color: #ffffff;
      font-family: var(--font-crt);
      font-size: 15px;
      letter-spacing: 0.08em;
      text-shadow: 0 0 8px rgba(156, 156, 156, 0.45);
      line-height: 1.6;
    }
    .floor.ft-construction .fl-tag .zh-text {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      vertical-align: middle;
    }
    .floor.ft-construction .fl-en-sub {
      color: rgba(156, 156, 156, 0.86);
      font-family: var(--font-crt);
      font-size: 10px;
      letter-spacing: 0.18em;
    }
    .floor.ft-construction .floor-body,
    .floor.ft-construction .construction-body {
      grid-template-columns: minmax(0, 1fr);
      position: relative;
      min-height: 170px;
      overflow: visible;
      isolation: isolate;
    }
    .floor.ft-construction .ff-brand {
      border: 1px solid rgba(155, 155, 155, 0.62);
      border-radius: 4px;
      background: linear-gradient(180deg, rgba(32, 32, 32, 0.94), rgba(12, 12, 12, 0.97));
      box-shadow: inset 0 0 0 1px rgba(208, 208, 208, 0.16);
      z-index: 2;
      min-height: 150px;
      transition: none;
      transform: none;
    }
    .floor.ft-construction .ff-brand:hover {
      transform: none;
    }
    .floor.ft-construction .ff-brand .ff-title {
      font-family: var(--font-crt);
      font-size: clamp(24px, 3.6vw, 42px);
      letter-spacing: 0.05em;
      line-height: 1.1;
      color: #ff3535;
      text-shadow: 0 0 10px rgba(255, 36, 36, 0.64);
      animation: constructionTitleBlink 4.8s steps(2) infinite;
    }
    .floor.ft-construction .ff-brand .ff-platform {
      color: rgba(155, 155, 155, 0.88);
      font-family: var(--font-crt);
      font-size: 10px;
      letter-spacing: 0.16em;
      margin-top: 8px;
      margin-bottom: 12px;
    }
    .floor.ft-construction .ff-brand .ff-desc {
      color: rgba(178, 178, 178, 0.92);
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 13px;
      letter-spacing: 0.06em;
      line-height: 1.7;
    }
    .floor.ft-construction .ff-brand .ff-enter-hint {
      color: rgba(155, 155, 155, 0.84);
      font-family: var(--font-crt);
      font-size: 11px;
      letter-spacing: 0.2em;
      margin-top: 12px;
      text-align: center;
      animation: constructionHintPulse 3.2s ease-in-out infinite;
      text-shadow: none;
    }
    .floor.ft-construction .construction-lanes {
      position: absolute;
      inset: -16px -18px;
      pointer-events: none;
      z-index: 6;
      overflow: visible;
    }
    .floor.ft-construction .construction-lanes .cl-line {
      position: absolute;
      height: 14px;
      border-radius: 2px;
      border: 1px solid rgba(44, 34, 0, 0.86);
      background: repeating-linear-gradient(
        135deg,
        rgba(255, 231, 65, 0.96) 0 14px,
        rgba(12, 12, 12, 0.96) 14px 28px
      );
      box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 239, 137, 0.22);
      opacity: 0.9;
      transform-origin: center;
      animation: constructionTapeFloat 4.6s ease-in-out infinite;
    }
    .floor.ft-construction .construction-lanes .cl-line:nth-child(1) {
      width: 122%; top: -8px; left: -12%; transform: rotate(-2deg); animation-delay: 0s;
    }
    .floor.ft-construction .construction-lanes .cl-line:nth-child(2) {
      width: 136%; top: 28%; left: -18%; transform: rotate(-12deg); animation-delay: -1.1s;
    }
    .floor.ft-construction .construction-lanes .cl-line:nth-child(3) {
      width: 120%; bottom: -8px; left: -8%; transform: rotate(2deg); animation-delay: -2.1s;
    }
    .floor.ft-construction .construction-lanes .cl-line:nth-child(4) {
      width: 102%; top: 48%; right: -38%; transform: rotate(84deg); animation-delay: -0.7s;
    }
    .floor.ft-construction .construction-lanes .cl-line:nth-child(5) {
      width: 100%; top: 50%; left: -36%; transform: rotate(96deg); animation-delay: -1.8s;
    }
    .floor.ft-construction .construction-lanes .cl-line:nth-child(6) {
      width: 124%; top: 12%; left: -10%; transform: rotate(14deg); animation-delay: -2.8s;
    }
    .floor.ft-construction .construction-lanes .cl-line:nth-child(7) {
      width: 128%; bottom: 14%; left: -14%; transform: rotate(-14deg); animation-delay: -3.4s;
    }

    @keyframes constructionTapeFloat {
      0%, 100% { opacity: 0.76; filter: brightness(0.95); }
      50% { opacity: 0.9; filter: brightness(1.05); }
    }
    @keyframes constructionTitleBlink {
      0%, 95%, 100% { opacity: 1; }
      96% { opacity: 0.82; }
      98% { opacity: 0.92; }
    }
    @keyframes constructionHintPulse {
      0%, 100% { opacity: 0.56; }
      50% { opacity: 0.8; }
    }

    /* ============================================================
       6F · SEEPOSITION —— 无障碍听声辨位 · 青色 HUD · 战术雷达
       ============================================================ */
    .floor.ft-seeposition {
      background:
        repeating-linear-gradient(0deg, transparent 0 1px, rgba(54, 240, 224, 0.045) 1px 2px),
        radial-gradient(ellipse at 50% 30%, #06181a 0%, #041012 45%, #020809 100%);
      border: 1px solid rgba(54, 240, 224, 0.50);
      box-shadow:
        inset 0 0 90px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(54, 240, 224, 0.16),
        0 18px 48px rgba(0, 0, 0, 0.72),
        0 0 22px rgba(54, 240, 224, 0.14);
    }
    .floor.ft-seeposition::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(54, 240, 224, 0.035) 2px 3px),
        radial-gradient(circle at 50% 50%, rgba(54, 240, 224, 0.10) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }
    .floor.ft-seeposition .floor-head {
      position: relative;
      border-bottom: 1px dashed rgba(54, 240, 224, 0.32);
    }
    .floor.ft-seeposition .floor-head > div {
      position: relative;
      z-index: 5;
    }
    /* 6F 主题楼层号方块 */
    .fl-num-badge.ft-seeposition {
      background: linear-gradient(180deg, #062224, #03100f);
      color: #36f0e0;
      border: 1px solid rgba(54, 240, 224, 0.7);
      box-shadow:
        inset 0 0 12px rgba(54, 240, 224, 0.32),
        0 0 16px rgba(54, 240, 224, 0.4);
      font-family: var(--font-crt);
      font-size: 14px;
      letter-spacing: 0;
      text-shadow: 0 0 6px rgba(54, 240, 224, 0.85);
    }
    .floor.ft-seeposition .fl-tag {
      position: relative;
      z-index: 5;
      color: #5cf6ec;
      font-family: var(--font-crt);
      font-size: 16px;
      letter-spacing: 0.06em;
      text-shadow: 0 0 10px rgba(54, 240, 224, 0.9), 0 0 20px rgba(54, 240, 224, 0.45);
      line-height: 1.6;
    }
    .floor.ft-seeposition .fl-tag .zh-text {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      vertical-align: middle;
    }
    .floor.ft-seeposition .fl-en-sub {
      position: relative;
      z-index: 5;
      color: rgba(120, 240, 230, 0.75);
      font-family: var(--font-crt);
      font-size: 9px;
      letter-spacing: 0.16em;
    }
    .floor.ft-seeposition .ff-brand .ff-title {
      font-family: var(--font-crt);
      font-size: clamp(22px, 3vw, 36px);
      letter-spacing: 0.04em;
      line-height: 1.15;
      color: #36f0e0;
      text-shadow:
        0 0 8px rgba(54, 240, 224, 0.85),
        0 0 20px rgba(40, 200, 190, 0.5),
        0 0 40px rgba(20, 150, 150, 0.32);
      animation: seePosScan 5.4s steps(24) infinite;
    }
    @keyframes seePosScan {
      0%, 92%, 100% { opacity: 1; }
      94% { opacity: 0.84; }
      96% { opacity: 1; }
      97% { opacity: 0.62; }
      98% { opacity: 1; }
    }
    /* 6F 装饰：底部声像轨道刻度条 */
    .floor.ft-seeposition .ff-brand::after {
      content: "";
      position: absolute;
      bottom: 14px;
      left: 22px;
      right: 22px;
      height: 12px;
      background:
        linear-gradient(90deg, transparent 0, rgba(54, 240, 224, 0.55) 50%, transparent 100%) center / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, rgba(54, 240, 224, 0.6) 0 1px, transparent 1px 18px);
      opacity: 0.6;
    }
    .floor.ft-seeposition .ff-brand .ff-platform {
      color: rgba(120, 240, 230, 0.78);
      font-family: var(--font-crt);
      font-size: 10px;
      letter-spacing: 0.16em;
      margin-top: 8px;
      margin-bottom: 12px;
    }
    .floor.ft-seeposition .ff-brand .ff-desc {
      color: rgba(180, 240, 235, 0.82);
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 13px;
      letter-spacing: 0.08em;
      line-height: 1.7;
    }
    .floor.ft-seeposition .ff-brand .ff-enter-hint {
      color: rgba(54, 240, 224, 0.55);
      font-family: var(--font-crt);
      font-size: 11px;
      letter-spacing: 0.20em;
      margin-top: 14px;
      text-align: center;
    }
    .floor.ft-seeposition:hover {
      border-color: rgba(54, 240, 224, 0.85);
      box-shadow:
        inset 0 0 90px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(54, 240, 224, 0.35),
        0 22px 56px rgba(0, 0, 0, 0.7),
        0 0 28px rgba(54, 240, 224, 0.4);
    }
    /* 6F 产品卡：暗青 */
    .floor.ft-seeposition .floor-item {
      background: linear-gradient(180deg, rgba(6, 22, 24, 0.92), rgba(3, 12, 13, 0.92));
      border: 1px solid rgba(54, 240, 224, 0.32);
    }
    .floor.ft-seeposition .floor-item .fi-name {
      color: #36f0e0;
      font-family: var(--font-crt);
      font-size: 8px;
      letter-spacing: 0.08em;
      text-shadow: 0 0 6px rgba(54, 240, 224, 0.6);
    }
    .floor.ft-seeposition .floor-item .fi-cn {
      color: rgba(160, 240, 235, 0.68);
      letter-spacing: 0.22em;
    }
    .floor.ft-seeposition .floor-item .fi-tag {
      color: rgba(54, 240, 224, 0.45);
      font-family: var(--font-crt);
      font-size: 7px;
      letter-spacing: 0.12em;
    }
    .floor.ft-seeposition .floor-item .fi-price {
      color: #36f0e0;
      font-family: var(--font-crt);
      font-size: 10px;
      letter-spacing: 0;
      text-shadow: 0 0 6px rgba(54, 240, 224, 0.6);
      text-decoration: none;
      position: relative;
    }
    .floor.ft-seeposition .floor-item .fi-price::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(calc(-50% - 2px));
      height: 1px;
      background: rgba(54, 240, 224, 0.7);
    }
    .floor.ft-seeposition .floor-item .fi-price::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(calc(-50% + 1px));
      height: 1px;
      background: rgba(54, 240, 224, 0.7);
    }
    .floor.ft-seeposition .floor-item .fi-price-free {
      font-family: var(--font-crt);
      font-size: 12px;
      color: #5cf6ec;
      text-shadow: 0 0 8px rgba(54, 240, 224, 0.8);
      letter-spacing: 1px;
    }
    .floor.ft-seeposition .floor-item .fi-thumb {
      background: #06181a;
      border: 1px solid rgba(54, 240, 224, 0.3);
    }
    .floor.ft-seeposition .floor-item .fi-thumb img {
      object-fit: cover;
      filter: contrast(1.08) saturate(1.05);
    }
    .floor.ft-seeposition .floor-item .fi-thumb::after {
      background: repeating-linear-gradient(0deg, rgba(54, 240, 224, 0.06) 0 1px, transparent 1px 3px);
    }
    @media (prefers-reduced-motion: reduce) {
      .floor.ft-seeposition .ff-brand .ff-title { animation: none; }
    }

    /* ============================================================
       6F→5F · SEEPOSITION 公益布局（无商品窗，is-charity 覆盖默认网格）
       ============================================================ */
    .floor.ft-seeposition.is-charity .floor-body.charity-body {
      display: grid;
      grid-template-columns: 1.45fr 1fr;
      gap: 18px;
      align-items: stretch;
      padding: 14px 18px 18px;
    }
    @media (max-width: 880px) {
      .floor.ft-seeposition.is-charity .floor-body.charity-body { grid-template-columns: 1fr; gap: 14px; }
    }

    /* 左：项目主张 */
    .charity-lead {
      position: relative;
      z-index: 5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 6px 4px;
    }
    .charity-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-start;
      padding: 5px 12px;
      border-radius: 999px;
      border: 1px solid rgba(54, 240, 224, 0.55);
      background: rgba(54, 240, 224, 0.08);
      box-shadow: 0 0 16px rgba(54, 240, 224, 0.16) inset;
      margin-bottom: 12px;
    }
    .charity-badge .cb-dot {
      width: 8px; height: 8px; border-radius: 999px;
      background: #36f0e0;
      box-shadow: 0 0 8px rgba(54, 240, 224, 0.9), 0 0 16px rgba(54, 240, 224, 0.6);
      animation: charityPulse 1.8s ease-in-out infinite;
    }
    @keyframes charityPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.45; transform: scale(0.8); }
    }
    .charity-badge .cb-text {
      font-family: var(--font-crt);
      font-size: 9px;
      letter-spacing: 0.12em;
      color: rgba(120, 240, 230, 0.95);
      text-shadow: 0 0 8px rgba(54, 240, 224, 0.5);
    }
    .charity-title {
      font-family: var(--font-crt);
      font-size: clamp(22px, 3vw, 38px);
      letter-spacing: 0.04em;
      line-height: 1.1;
      color: #36f0e0;
      text-shadow:
        0 0 8px rgba(54, 240, 224, 0.85),
        0 0 20px rgba(40, 200, 190, 0.5),
        0 0 40px rgba(20, 150, 150, 0.3);
      animation: seePosScan 5.4s steps(24) infinite;
    }
    .charity-slogan {
      margin-top: 12px;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: rgba(200, 245, 240, 0.96);
      text-shadow: 0 0 12px rgba(54, 240, 224, 0.2);
    }
    .charity-desc {
      margin: 12px 0 0;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 12.5px;
      letter-spacing: 0.04em;
      line-height: 1.85;
      color: rgba(180, 230, 226, 0.78);
      max-width: 62ch;
    }
    .charity-enter-hint {
      margin-top: 16px;
      font-family: var(--font-crt);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: rgba(54, 240, 224, 0.55);
    }

    /* 右：要点 + 价格 */
    .charity-side {
      position: relative;
      z-index: 5;
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: center;
      border-left: 1px dashed rgba(54, 240, 224, 0.22);
      padding-left: 18px;
    }
    @media (max-width: 880px) {
      .charity-side { border-left: 0; padding-left: 0; border-top: 1px dashed rgba(54, 240, 224, 0.22); padding-top: 14px; }
    }
    .charity-points {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }
    .charity-points li {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 10px;
      align-items: center;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 11.5px;
      line-height: 1.5;
      color: rgba(190, 232, 228, 0.82);
    }
    .charity-points li b { color: rgba(210, 248, 244, 0.96); font-weight: 700; letter-spacing: 0.02em; }
    .charity-points .cp-ic {
      justify-self: center;
      font-size: 18px;
      color: #36f0e0;
      text-shadow: 0 0 8px rgba(54, 240, 224, 0.6);
    }
    .charity-price {
      margin-top: 4px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid rgba(54, 240, 224, 0.32);
      background: linear-gradient(180deg, rgba(6, 22, 24, 0.9), rgba(3, 12, 13, 0.9));
    }
    .charity-price .cprice-strike {
      position: relative;
      font-family: var(--font-crt);
      font-size: 12px;
      color: rgba(140, 200, 198, 0.6);
    }
    .charity-price .cprice-strike::after {
      content: "";
      position: absolute; left: -1px; right: -1px; top: 50%;
      height: 1px; background: rgba(255, 120, 120, 0.8);
      transform: translateY(-50%) rotate(-6deg);
    }
    .charity-price .cprice-free {
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 18px;
      color: #5cf6ec;
      letter-spacing: 0.04em;
      text-shadow: 0 0 10px rgba(54, 240, 224, 0.7);
    }
    .charity-price .cprice-sub {
      font-family: var(--font-crt);
      font-size: 8px;
      letter-spacing: 0.14em;
      color: rgba(120, 240, 230, 0.6);
    }
    .floor.ft-seeposition.is-charity:hover .charity-title { filter: brightness(1.08); }
    @media (prefers-reduced-motion: reduce) {
      .charity-title { animation: none; }
      .charity-badge .cb-dot { animation: none; }
    }

    /* 楼层右侧产品小卡片 */
    .floor-item {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 6px 8px 8px;
      border-radius: 4px;
      border: 1px solid rgba(180, 120, 255, 0.25);
      background: rgba(20, 14, 38, 0.85);
      gap: 4px;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      overflow: hidden;
      min-width: 0;
    }
    .floor-item .fi-name {
      font-family: var(--mono), monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.10em;
      color: #ffe9b8;
      text-transform: uppercase;
    }
    .floor-item .fi-cn {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 9px;
      color: rgba(255, 220, 245, 0.65);
      letter-spacing: 0.16em;
    }
    .floor-item .fi-thumb {
      width: 100%;
      aspect-ratio: 16 / 10;
      border-radius: 3px;
      border: 1px solid rgba(180, 120, 255, 0.20);
      background: rgba(0, 0, 0, 0.55);
      overflow: hidden;
      position: relative;
      margin-top: 2px;
    }
    .floor-item .fi-thumb img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      filter: contrast(1.08) saturate(1.1);
    }
    .floor-item .fi-thumb::after {
      content: "";
      position: absolute; inset: 0;
      background: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
      mix-blend-mode: overlay;
    }
    .floor-item .fi-foot {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-top: auto;
      padding-top: 2px;
    }
    .floor-item .fi-price-wrap {
      display: flex;
      align-items: baseline;
      gap: 4px;
    }
    .floor-item .fi-tag {
      font-family: var(--mono), monospace;
      font-size: 8px;
      letter-spacing: 0.18em;
      color: rgba(255, 200, 240, 0.55);
      text-transform: uppercase;
    }
    .floor-item .fi-price {
      font-family: var(--mono), monospace;
      font-size: 11px;
      color: #ff9bd3;
      letter-spacing: 0.04em;
      text-shadow: 0 0 8px rgba(255, 110, 180, 0.45);
      text-decoration: line-through;
      text-decoration-color: rgba(255, 155, 211, 0.6);
    }
    .floor-item .fi-price-free {
        font-family: var(--mono), monospace;
        font-size: 11px;
        color: #ff9bd3;
        letter-spacing: 0.04em;
        text-shadow: 0 0 8px rgba(255, 110, 180, 0.45);
    }
    /* ===== 公告条 ===== */
    .home-marquee {
      margin-top: 14px;
      padding: 9px 14px;
      border-radius: 4px;
      border: 1px solid rgba(255, 200, 100, 0.30);
      background: rgba(8, 6, 18, 0.88);
      display: flex;
      align-items: center;
      gap: 14px;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 12px;
      color: rgba(255, 240, 180, 0.86);
      letter-spacing: 0.12em;
      overflow: hidden;
    }
    .home-marquee .mq-label {
      font-family: var(--mono), monospace;
      color: #ffc440;
      letter-spacing: 0.18em;
      flex: 0 0 auto;
      padding-right: 10px;
      border-right: 1px solid rgba(255, 200, 100, 0.32);
    }
    .home-marquee .mq-track {
      flex: 1 1 auto;
      white-space: nowrap;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }
    .home-marquee .mq-track > span {
      display: inline-block;
      padding-right: 80px;
      animation: mqScroll 28s linear infinite;
    }
    @keyframes mqScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .home-marquee .mq-more {
      flex: 0 0 auto;
      font-family: var(--mono), monospace;
      font-size: 10px;
      color: rgba(255, 220, 160, 0.65);
      letter-spacing: 0.18em;
      padding-left: 10px;
      border-left: 1px solid rgba(255, 200, 100, 0.32);
      text-decoration: none;
      transition: color 140ms ease;
    }
    .home-marquee .mq-more:hover { color: #ffe066; }

    /* ===== 数字时钟（右下角） ===== */
    .home-clock {
      position: fixed;
      right: 18px;
      bottom: 20px;
      z-index: 6;
      padding: 6px 12px 4px;
      background: rgba(0, 0, 0, 0.78);
      border: 1px solid rgba(180, 120, 255, 0.42);
      border-radius: 4px;
      font-family: "Courier New", var(--mono), monospace;
      font-size: 22px;
      letter-spacing: 0.12em;
      color: #ff5050;
      text-shadow:
        0 0 6px rgba(255, 60, 60, 0.85),
        0 0 18px rgba(255, 60, 60, 0.45);
      box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
      pointer-events: none;
    }
    .home-clock .ck-date {
      display: block;
      font-size: 10px;
      letter-spacing: 0.14em;
      color: rgba(255, 200, 200, 0.78);
      text-shadow: 0 0 4px rgba(255, 60, 60, 0.5);
    }

    @media (max-width: 600px) {
      .home-clock { right: 10px; bottom: 12px; font-size: 16px; padding: 4px 8px; }
      .home-clock .ck-date { font-size: 9px; }
    }

    /* ===== 底部链接条 ===== */
    .home-foot-bar {
      margin-top: 18px;
      padding: 14px 8px 10px;
      border-top: 1px solid rgba(255, 200, 100, 0.22);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 11px;
      color: rgba(255, 235, 170, 0.60);
      letter-spacing: 0.14em;
    }
    .home-foot-bar .ft-links {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
    }
    .home-foot-bar a {
      color: rgba(255, 235, 170, 0.82);
      text-decoration: none;
      transition: color 140ms ease;
    }
    .home-foot-bar a:hover {
      color: #ffe066;
      text-shadow: 0 0 6px rgba(255, 180, 80, 0.5);
    }

    /* HOME 字体回落 */
    .home-shell {
      font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", var(--sans), sans-serif;
      display: block;
      min-height: 100vh;
    }

    /* home.html 单独打开时的滚动支持 */
    body:not(.shell-mode) .home-shell {
      position: relative;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 100vh;
    }

    /* home.html 在 iframe 外单独打开时，让背景和网格背景正确显示（无顶部导航） */
    body:not(.shell-mode) .home-bg,
    body:not(.shell-mode) .home-grid-bg {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    /* home.html 单独打开时，内容需要在背景之上 */
    body:not(.shell-mode) .home-inner {
      position: relative;
      z-index: 2;
    }

    /* 隐藏旧 home 结构（保留 DOM 占位的话） */
    .home-shell .home-tabs,
    .home-shell .home-section-head,
    .home-shell .home-cards,
    .home-shell .home-social,
    .home-shell .home-foot { display: none !important; }

    /* HOME 主题下，顶栏的 brand-title 显示作者签名而不是产品名（由 JS 控制 brandTitle.textContent） */