:root {
      --ink: #101820;
      --soft: #3d4f5f;
      --muted: #6d7f8c;
      --line: #d5dee6;
      --paper: #f4f7fa;
      --panel: #fff;
      --accent: #e2a100;
      --teal: #0b6e6e;
      --teal-deep: #084f4f;
      --danger: #b42318;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      color: var(--ink);
      font-family: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(ellipse 70% 45% at 0% 0%, #ffe8a8 0%, transparent 55%),
        radial-gradient(ellipse 55% 40% at 100% 5%, #cfeceb 0%, transparent 50%),
        var(--paper);
      line-height: 1.55;
    }
    .wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 72px; }

    /* HERO — single full-bleed image only */
    .hero-bleed {
      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      min-height: clamp(420px, 62vh, 640px);
      display: flex;
      align-items: flex-end;
      overflow: visible;
      margin-bottom: 118px;
      background: #0a1218;
    }
    .hero-bleed > img.hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
      display: block;
      z-index: 0;
      pointer-events: none;
    }
    .hero-bleed::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg, rgba(8, 16, 22, 0.35) 0%, rgba(8, 16, 22, 0.12) 40%, rgba(8, 16, 22, 0.84) 100%),
        linear-gradient(90deg, rgba(8, 16, 22, 0.5) 0%, rgba(8, 16, 22, 0.12) 55%, rgba(8, 16, 22, 0.3) 100%);
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      width: min(1080px, calc(100% - 40px));
      margin: 0 auto;
      padding: 36px 0 40px;
      color: #f7fbff;
    }
    .eyebrow {
      color: #ffe08a;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-shadow: 0 1px 8px rgba(0,0,0,.45);
    }
    h1 {
      margin: 12px 0 10px;
      font-family: "Noto Serif SC", serif;
      font-size: clamp(32px, 5vw, 48px);
      line-height: 1.18;
      color: #fff;
      text-shadow: 0 2px 18px rgba(0,0,0,.45);
    }
    .lede {
      margin: 0;
      color: rgba(245, 250, 255, 0.9);
      font-size: 15px;
      max-width: 38em;
      text-shadow: 0 1px 10px rgba(0,0,0,.4);
    }
    .id-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.22);
    }
    .id-link {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
      color: inherit;
      border-radius: 12px;
      padding: 4px 6px 4px 4px;
      margin-left: -4px;
      transition: background .15s ease;
    }
    .id-link:hover {
      background: rgba(255,255,255,.1);
    }
    .id-link:hover strong {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .avatar {
      width: 64px; height: 64px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255,255,255,.85);
      box-shadow: 0 6px 18px rgba(0,0,0,.28);
      background: #111;
    }
    .id-row strong { display: block; font-size: 16px; color: #fff; }
    .id-row span { color: rgba(235, 242, 248, 0.78); font-size: 13px; }
    .stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 140px));
      gap: 8px;
      margin-top: 18px;
    }
    .stat {
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 12px;
      padding: 10px 12px;
    }
    .stat b { display: block; font-size: 18px; color: #ffe08a; }
    .stat small { color: rgba(235, 242, 248, 0.75); font-size: 12px; }
    .cap {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: 10px 12px;
      background: linear-gradient(transparent, rgba(0,0,0,.78));
      color: #fff; font-size: 12px; font-weight: 600;
    }

    /* TOC — flush under hero bottom edge */
    .toc-wrap {
      position: absolute;
      left: 50%;
      top: 100%;
      transform: translateX(-50%);
      z-index: 5;
      width: min(1080px, calc(100% - 40px));
      margin: 0;
    }
    .toc {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .toc a {
      position: relative;
      text-decoration: none;
      color: #f4f8fb;
      background: linear-gradient(180deg, #1a3338 0%, #0f2428 100%);
      border: 1px solid rgba(255, 224, 138, 0.28);
      border-top: 3px solid #e2a100;
      border-radius: 0 0 14px 14px;
      padding: 16px 14px 14px;
      box-shadow: 0 10px 22px rgba(8, 20, 24, 0.28);
      transition: transform .15s ease, background .15s ease;
    }
    .toc a::before,
    .toc a::after {
      content: none;
      display: none;
    }
    .toc a:hover {
      transform: translateY(2px);
      background: linear-gradient(180deg, #234449 0%, #143033 100%);
    }
    .toc strong {
      display: block;
      color: #ffe08a;
      font-size: 13px;
      margin-bottom: 4px;
      letter-spacing: 0.02em;
    }
    .toc span {
      font-size: 12px;
      color: rgba(230, 240, 244, 0.72);
    }

    /* LAYER */
    section.layer {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 26px;
      margin-bottom: 22px;
    }
    .layer-head {
      display: flex; justify-content: space-between; gap: 16px;
      align-items: end; margin-bottom: 18px; flex-wrap: wrap;
    }
    .layer-head h2 {
      margin: 0;
      font-family: "Noto Serif SC", serif;
      font-size: 26px;
    }
    .layer-head .hint { color: var(--muted); font-size: 13px; margin: 0; }
    .triad {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .point {
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      background: #fbfcfd;
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }
    .point .media {
      position: relative;
      aspect-ratio: 16 / 10;
      background: #111;
      overflow: hidden;
    }
    .point .media.tall { aspect-ratio: 4 / 3; }
    .point .media img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .rank {
      position: absolute; top: 10px; left: 10px;
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--accent); color: #111;
      display: grid; place-items: center;
      font-weight: 800; font-size: 13px;
      box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }
    .point .body { padding: 14px 14px 16px; flex: 1; }
    .point h3 {
      margin: 0 0 8px;
      font-size: 16px;
      line-height: 1.35;
    }
    .point p {
      margin: 0;
      font-size: 13.5px;
      color: var(--soft);
    }
    .tag {
      display: inline-block;
      margin-top: 10px;
      font-size: 11px;
      font-weight: 700;
      color: var(--teal-deep);
      background: #e7f4f4;
      padding: 3px 8px;
      border-radius: 999px;
    }

    /* L2 — unique layout (not triad) */
    #l2.layer {
      background:
        radial-gradient(ellipse 60% 50% at 100% 0%, #e8f4f3 0%, transparent 55%),
        var(--panel);
    }
    .l2-cast {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 22px;
      align-items: stretch;
      margin-bottom: 22px;
    }
    .l2-cast-flag {
      display: inline-block;
      margin-bottom: 12px;
      padding: 4px 10px;
      border-radius: 999px;
      background: #143033;
      color: #ffe08a;
      font-size: 12px;
      font-weight: 700;
    }
    .cast-board {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .cast-card {
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      color: var(--ink);
      border: 1px solid var(--line);
      box-shadow: 0 8px 20px rgba(16, 24, 32, 0.06);
    }
    .cast-card .shot {
      aspect-ratio: 3 / 4;
      overflow: hidden;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }
    .cast-card .shot img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center bottom;
      display: block;
      transform: none;
      background: #fff;
    }
    .cast-card .info { padding: 14px; background: #0f1c22; color: #f4f8fb; }
    .cast-card h3 {
      margin: 0 0 4px;
      font-size: 18px;
      font-family: "Noto Serif SC", serif;
      color: #ffe08a;
    }
    .cast-card .role {
      margin: 0 0 8px;
      font-size: 12px;
      color: #9eb4bc;
      font-weight: 600;
    }
    .cast-card p {
      margin: 0;
      font-size: 13px;
      color: rgba(235, 244, 248, 0.88);
      line-height: 1.55;
    }
    .world-panel {
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: #f7fafb;
      display: flex;
      flex-direction: column;
    }
    .world-panel .shot {
      position: relative;
      aspect-ratio: 16 / 10;
      background: #111;
    }
    .world-panel .shot img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .world-panel .shot .badge {
      position: absolute; left: 12px; bottom: 12px;
      background: rgba(0,0,0,.55);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 999px;
    }
    .world-panel .copy { padding: 16px 16px 18px; }
    .world-panel h3 {
      margin: 0 0 8px;
      font-size: 18px;
      font-family: "Noto Serif SC", serif;
    }
    .world-panel p {
      margin: 0 0 10px;
      font-size: 13.5px;
      color: var(--soft);
    }
    .world-hooks {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .world-hooks li {
      position: relative;
      padding: 8px 10px 8px 12px;
      border-left: 3px solid var(--accent);
      background: #fff;
      border-radius: 0 10px 10px 0;
      font-size: 13px;
      color: var(--ink);
    }
    .world-hooks strong { color: var(--teal-deep); }

    .ep-stack-wrap {
      margin-top: 8px;
      padding-top: 8px;
    }
    .ep-stack-title {
      margin: 0 0 14px;
      font-size: 14px;
      font-weight: 700;
      color: var(--teal-deep);
    }
    .ep-stack {
      position: relative;
      display: flex;
      align-items: stretch;
      justify-content: stretch;
      width: 100%;
      min-height: 0;
      padding: 8px 0 16px;
      gap: 0;
    }
    .ep-card {
      position: relative;
      flex: 1 1 0;
      width: auto;
      min-width: 0;
      margin-left: -18px;
      text-decoration: none;
      color: #fff;
      border-radius: 14px;
      overflow: hidden;
      border: 2px solid rgba(255,255,255,.7);
      box-shadow: 0 10px 22px rgba(0,0,0,.22);
      transform-origin: center center;
      transition: transform .2s ease, z-index 0s, box-shadow .2s ease, margin .2s ease;
      background: #111;
    }
    .ep-card:first-child { margin-left: 0; }
    .ep-card:nth-child(1) { z-index: 1; transform: rotate(-2.5deg); }
    .ep-card:nth-child(2) { z-index: 2; transform: rotate(-1deg); }
    .ep-card:nth-child(3) { z-index: 3; transform: rotate(0.5deg); }
    .ep-card:nth-child(4) { z-index: 2; transform: rotate(1.5deg); }
    .ep-card:nth-child(5) { z-index: 1; transform: rotate(2.8deg); }
    .ep-card:hover {
      z-index: 20;
      transform: rotate(0deg) scale(1.08);
      box-shadow: 0 18px 36px rgba(0,0,0,.35);
      margin-left: 4px;
      margin-right: 4px;
    }
    .ep-card:first-child:hover { margin-left: 0; }
    .ep-card img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      display: block;
    }
    .ep-card .meta {
      padding: 8px 10px 10px;
      background: linear-gradient(180deg, #17343a, #0d2226);
      font-size: 12px;
    }
    .ep-card .meta b { display: block; color: #ffe08a; margin-bottom: 2px; }
    .ep-card .meta span { color: rgba(235,244,248,.78); }

    .l2-audit {
      margin-top: 22px;
      padding: 18px 18px 16px;
      border-radius: 14px;
      border: 1px dashed #c5d0d8;
      background: #f7fafb;
    }
    .l2-audit h3 {
      margin: 0 0 10px;
      font-size: 15px;
      font-family: "Noto Serif SC", serif;
      color: var(--teal-deep);
    }
    .l2-audit dl {
      margin: 0;
      display: grid;
      gap: 10px;
    }
    .l2-audit dt {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      margin: 0;
    }
    .l2-audit dd {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--soft);
      line-height: 1.55;
    }

    @media (max-width: 860px) {
      .l2-cast { grid-template-columns: 1fr; }
      .ep-stack {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 12px;
      }
      .ep-card {
        flex: 0 0 42%;
        margin-left: -12px;
      }
    }

    /* ===== L2 专用排版（不沿用 L1 triad） ===== */
    #l2.layer { padding: 28px 26px 30px; }
    .ip2-cast {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 22px;
      margin-bottom: 28px;
      align-items: stretch;
    }
    .ip2-cast-visual {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .ip2-char {
      margin: 0;
      background: #0c1520;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid #1e2d3a;
      position: relative;
      min-height: 280px;
    }
    .ip2-char img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      min-height: 280px;
    }
    .ip2-char figcaption {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 14px 12px 12px;
      background: linear-gradient(transparent, rgba(0,0,0,.88));
      color: #fff;
    }
    .ip2-char figcaption strong {
      display: block;
      font-size: 16px;
      margin-bottom: 2px;
    }
    .ip2-char figcaption span {
      font-size: 12px;
      color: rgba(255,255,255,.78);
    }
    .ip2-cast-copy h3 {
      margin: 0 0 10px;
      font-family: "Noto Serif SC", serif;
      font-size: 20px;
      color: var(--ink);
    }
    .ip2-cast-copy .lead {
      margin: 0 0 14px;
      color: var(--soft);
      font-size: 14px;
    }
    .ip2-cast-copy ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }
    .ip2-cast-copy li {
      padding: 12px 14px;
      border-left: 3px solid var(--accent);
      background: #f7fafb;
      border-radius: 0 10px 10px 0;
      font-size: 13.5px;
      color: var(--soft);
    }
    .ip2-cast-copy li b { color: var(--ink); }

    .ip2-world {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 18px;
      margin-bottom: 30px;
      padding: 18px;
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(11,110,110,.06), rgba(226,161,0,.05)),
        #fbfcfd;
      border: 1px solid var(--line);
    }
    .ip2-world-copy h3 {
      margin: 0 0 8px;
      font-family: "Noto Serif SC", serif;
      font-size: 20px;
    }
    .ip2-world-copy .lead {
      margin: 0 0 12px;
      font-size: 14px;
      color: var(--soft);
    }
    .ip2-hooks {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }
    .ip2-hooks li {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 10px;
      font-size: 13.5px;
      color: var(--soft);
      padding: 8px 0;
      border-bottom: 1px dashed #e2e9ef;
    }
    .ip2-hooks li:last-child { border-bottom: 0; }
    .ip2-hooks em {
      font-style: normal;
      font-weight: 700;
      color: var(--teal-deep);
      font-size: 12px;
    }
    .ip2-world-visual {
      display: grid;
      grid-template-rows: 1.2fr 0.8fr;
      gap: 10px;
    }
    .ip2-world-visual figure {
      margin: 0;
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      border: 1px solid var(--line);
      background: #111;
      min-height: 140px;
    }
    .ip2-world-visual img {
      width: 100%; height: 100%; object-fit: cover; display: block; min-height: 140px;
    }
    .ip2-world-visual .cap {
      font-size: 11px;
      padding: 8px 10px;
    }

    .ip2-eps-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px;
    }
    .ip2-eps-head h3 {
      margin: 0;
      font-family: "Noto Serif SC", serif;
      font-size: 18px;
    }
    .ip2-eps-head span { font-size: 12px; color: var(--muted); }

    .ep-stack {
      position: relative;
      height: 250px;
      margin: 8px 0 8px;
      perspective: 900px;
    }
    .ep-stack a.ep-card {
      position: absolute;
      top: 18px;
      width: 210px;
      height: 200px;
      border-radius: 14px;
      overflow: hidden;
      border: 2px solid #fff;
      box-shadow: 0 12px 28px rgba(16, 24, 32, 0.28);
      text-decoration: none;
      color: #fff;
      background: #111;
      transition: transform .22s ease, z-index 0s, box-shadow .22s ease;
      transform-origin: center bottom;
    }
    .ep-stack a.ep-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .ep-stack a.ep-card .meta {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 12px 12px 10px;
      background: linear-gradient(transparent, rgba(0,0,0,.86));
    }
    .ep-stack a.ep-card .meta b {
      display: block;
      font-size: 13px;
      margin-bottom: 2px;
    }
    .ep-stack a.ep-card .meta small {
      font-size: 11px;
      color: rgba(255,255,255,.8);
    }
    .ep-stack a.ep-card:nth-child(1) { left: 0; z-index: 1; transform: rotate(-6deg); }
    .ep-stack a.ep-card:nth-child(2) { left: 18%; z-index: 2; transform: rotate(-2deg); }
    .ep-stack a.ep-card:nth-child(3) { left: 36%; z-index: 3; transform: rotate(1deg); }
    .ep-stack a.ep-card:nth-child(4) { left: 54%; z-index: 4; transform: rotate(4deg); }
    .ep-stack a.ep-card:nth-child(5) { left: 72%; z-index: 5; transform: rotate(7deg); }
    .ep-stack a.ep-card:hover {
      z-index: 20;
      transform: translateY(-18px) scale(1.18) rotate(0deg);
      box-shadow: 0 22px 40px rgba(16, 24, 32, 0.42);
    }

    .strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 16px;
    }
    .strip figure {
      margin: 0; border-radius: 12px; overflow: hidden;
      border: 1px solid var(--line); background: #111;
      position: relative;
    }
    .strip img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
    .strip .cap { font-size: 11px; padding: 8px 10px; }

    /* L3 — cover + style + plot, then vertical keyframe timeline */
    .l3-top {
      display: grid;
      grid-template-columns: 1.15fr 1fr 1fr;
      gap: 16px;
      align-items: stretch;
      margin-bottom: 22px;
    }
    .l3-cover {
      margin: 0;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: #111;
      position: relative;
    }
    .l3-cover img {
      width: 100%;
      height: 100%;
      min-height: 280px;
      object-fit: cover;
      display: block;
    }
    .l3-cover .cap {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: 10px 12px;
      background: linear-gradient(transparent, rgba(0,0,0,.78));
      color: #fff; font-size: 12px; font-weight: 600;
    }
    .l3-panel {
      border-radius: 16px;
      border: 1px solid var(--line);
      background: #f7fafb;
      padding: 16px 16px 18px;
      display: flex;
      flex-direction: column;
    }
    .l3-panel h3 {
      margin: 0 0 10px;
      font-size: 16px;
      font-family: "Noto Serif SC", serif;
      color: var(--teal-deep);
    }
    .l3-panel p {
      margin: 0;
      font-size: 13.5px;
      color: var(--soft);
      line-height: 1.6;
      flex: 1;
    }
    .l3-panel .tag { margin-top: 12px; align-self: flex-start; }

    .l3-timeline-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin: 4px 0 14px;
    }
    .l3-timeline-head h3 {
      margin: 0;
      font-size: 16px;
      font-family: "Noto Serif SC", serif;
      color: var(--ink);
    }
    .l3-timeline-head span {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
    }

    /* stacked keyframes left + hover enlarge right */
    .l3-deck {
      --deck-w: 176px;
      --deck-gap: 28px;
      --accent-deck: #2f8f8a;
      display: grid;
      grid-template-columns: var(--deck-w) minmax(0, 1fr);
      gap: var(--deck-gap);
      align-items: start;
      min-height: 460px;
    }
    .deck-stack {
      width: var(--deck-w);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 4px 0 8px;
    }
    .deck-card {
      --i: 0;
      position: relative;
      width: 100%;
      margin: 0;
      margin-top: -42px;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      text-align: left;
      border-radius: 12px;
      z-index: calc(var(--i) + 1);
      transition: transform .22s ease, box-shadow .22s ease;
    }
    .deck-card:first-child { margin-top: 0; }
    .deck-card .thumb {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 12px;
      border: 2px solid #fff;
      box-shadow:
        0 1px 0 rgba(16, 40, 48, .06),
        0 8px 18px rgba(16, 40, 48, .16);
      background: #111;
    }
    .deck-card .peek {
      position: absolute;
      left: 8px;
      bottom: 8px;
      font-size: 11px;
      font-weight: 800;
      color: #fff;
      background: rgba(0,0,0,.55);
      padding: 2px 7px;
      border-radius: 999px;
      font-variant-numeric: tabular-nums;
      letter-spacing: .02em;
      pointer-events: none;
    }
    .deck-card:hover,
    .deck-card:focus-visible,
    .deck-card.is-active {
      transform: translateX(10px);
      z-index: 40;
      outline: none;
    }
    .deck-card:hover .thumb,
    .deck-card:focus-visible .thumb,
    .deck-card.is-active .thumb {
      box-shadow:
        0 0 0 2px var(--accent-deck),
        0 12px 28px rgba(16, 40, 48, .28);
    }

    .deck-stage {
      position: sticky;
      top: 16px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, #e8f4f3 0%, transparent 55%),
        #f7fafb;
      overflow: visible;
    }
    .deck-detail {
      display: none;
      padding: 18px 20px 20px;
      flex-direction: column;
      gap: 12px;
    }
    .deck-detail.is-active {
      display: flex;
    }
    .deck-detail .shot {
      margin: 0;
      border-radius: 0;
      overflow: visible;
      border: 0;
      background: transparent;
      width: 100%;
      flex: 0 0 auto;
      line-height: 0;
    }
    .deck-detail .shot img {
      width: 100%;
      height: auto;
      max-width: 100%;
      display: block;
      object-fit: contain;
      object-position: center;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #0c1520;
    }
    .deck-detail .role {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      flex: 0 0 auto;
    }
    .deck-detail time {
      font-size: 15px;
      font-weight: 800;
      color: var(--teal-deep);
      font-variant-numeric: tabular-nums;
    }
    .deck-detail .beat {
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      background: var(--accent-deck);
      padding: 3px 10px;
      border-radius: 999px;
    }
    .deck-detail p {
      margin: 0;
      font-size: 14px;
      color: var(--soft);
      line-height: 1.6;
      max-width: 42em;
      flex: 0 0 auto;
    }

    .verdict {
      margin-top: 16px;
      padding: 14px 16px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
      color: #f5fffe;
      font-size: 14px;
    }
    .verdict strong { display: block; opacity: .85; font-size: 12px; margin-bottom: 4px; }

    .note {
      margin-top: 12px;
      font-size: 12px;
      color: var(--muted);
    }
    footer { margin-top: 18px; color: var(--muted); font-size: 12px; }

    @media (max-width: 860px) {
      .triad, .toc, .strip { grid-template-columns: 1fr 1fr; }
      .l3-top { grid-template-columns: 1fr; }
      .l3-deck {
        grid-template-columns: 132px minmax(0, 1fr);
        --deck-w: 132px;
        --deck-gap: 16px;
      }
      .deck-card { margin-top: -34px; }
      .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .hero-bleed { min-height: 520px; align-items: flex-end; margin-bottom: 160px; }
      .hero-inner { padding: 28px 0 32px; }
      .toc { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .toc { grid-template-columns: 1fr; }
      .l3-deck { grid-template-columns: 1fr; }
      .deck-stack {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
        gap: 0;
      }
      .deck-card {
        flex: 0 0 120px;
        margin-top: 0;
        margin-left: -28px;
      }
      .deck-card:first-child { margin-left: 0; }
      .deck-stage { position: relative; top: 0; }
    }