:root{
    --ink:#1a1310;
    --ink-2:#4a3a30;
    --ink-3:#8a7868;
    --paper:#fbf6ee;
    --cream:#fff6e3;
    --line:#e8dcc7;
    --line-strong:#d9c9ac;

    --brand:#c44e3a;         /* 朱红 */
    --brand-deep:#a23320;
    --sun:#e8a317;           /* 明黄 */
    --sun-soft:#ffdb6b;
    --leaf:#2d7a5f;          /* 墨绿 */
    --ocean:#1e6091;         /* 靛蓝 */
    --lilac:#7b5cc9;         /* 紫 */

    --shadow-sm: 0 2px 8px rgba(60,30,10,.06), 0 1px 2px rgba(60,30,10,.04);
    --shadow: 0 12px 32px rgba(60,30,10,.10), 0 3px 8px rgba(60,30,10,.06);
    --shadow-lg: 0 24px 60px rgba(60,30,10,.14), 0 6px 16px rgba(60,30,10,.08);

    --serif: "Fraunces", "Noto Serif SC", ui-serif, Georgia, serif;
    --sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;scroll-behavior:smooth}
  body{
    font-family:var(--sans);
    color:var(--ink);background:var(--paper);line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
    font-feature-settings:"ss01","cv11";
  }

  .screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:44px 56px;position:relative}

  /* ============ SCREEN 1 — HERO ============ */
  #screen1{
    background:
      radial-gradient(1200px 600px at 12% 15%, rgba(232,163,23,.28), transparent 55%),
      radial-gradient(1000px 600px at 88% 85%, rgba(196,78,58,.20), transparent 55%),
      radial-gradient(700px 500px at 60% 50%, rgba(30,96,145,.10), transparent 60%),
      linear-gradient(180deg,#fff8ec 0%, var(--paper) 100%);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  #screen1::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(196,78,58,.06) 0, transparent 1px),
      radial-gradient(circle at 70% 60%, rgba(30,96,145,.05) 0, transparent 1px),
      radial-gradient(circle at 40% 80%, rgba(45,122,95,.06) 0, transparent 1px);
    background-size: 3px 3px, 4px 4px, 5px 5px;
    opacity:.6;mix-blend-mode:multiply;
  }
  .float-char{
    position:absolute;font-family:var(--serif);font-weight:800;
    color:var(--brand);opacity:.08;pointer-events:none;user-select:none;
    font-style:italic;
  }
  .fc1{top:6%;left:6%;font-size:180px;transform:rotate(-8deg)}
  .fc2{bottom:8%;right:5%;font-size:220px;transform:rotate(6deg);color:var(--ocean);opacity:.07}
  .fc3{top:50%;left:48%;font-size:140px;transform:rotate(-3deg);color:var(--leaf);opacity:.06}

  .s1-grid{
    display:grid;
    grid-template-columns: minmax(0,680px) 560px;
    grid-template-areas: "head cover" "res cover";
    justify-content:center;
    column-gap:48px;
    row-gap:0;
    align-items:start;
    max-width:1300px;margin:0 auto;width:100%;position:relative;z-index:2;
  }
  .s1-head{grid-area:head;display:flex;flex-direction:column;align-items:flex-start;max-width:680px}
  .cover-block{grid-area:cover;align-self:center}

  .brand-badge{
    display:inline-flex;align-items:center;gap:8px;
    font-size:11.5px;letter-spacing:.24em;color:var(--brand);
    padding:7px 14px;border-radius:999px;text-transform:uppercase;
    background:#fff;border:1px solid rgba(196,78,58,.25);
    font-weight:700;box-shadow:var(--shadow-sm);
  }
  .brand-badge::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);
    box-shadow:0 0 0 3px rgba(196,78,58,.18);
  }
  h1.title{
    font-family:var(--serif);
    font-size:48px;line-height:1.05;margin:20px 0 8px;
    font-weight:800;letter-spacing:-1px;
  }
  h1.title .cn{display:inline-block;white-space:nowrap}
  h1.title .cn{background:linear-gradient(135deg,var(--ink) 20%,var(--brand-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  h1.title .en{
    display:block;font-style:italic;font-size:30px;font-weight:700;
    color:var(--brand);margin-top:8px;letter-spacing:-.4px;
  }
  .title-underline{
    display:inline-block;height:11px;width:110px;background:var(--sun);border-radius:6px;
    margin-top:8px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.06);
  }
  .lede{font-size:15.5px;color:var(--ink-2);margin:18px 0 4px;max-width:600px;line-height:1.75}
  .lede.en{font-size:13.5px;color:var(--ink-3);font-style:italic;line-height:1.7;max-width:600px}
  .lede b{color:var(--ink);font-weight:700}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px;max-width:600px}
  .stat{
    background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:14px 12px;box-shadow:var(--shadow-sm);
    position:relative;overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .stat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .stat::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand);
  }
  .stat:nth-child(2)::before{background:var(--ocean)}
  .stat:nth-child(3)::before{background:var(--leaf)}
  .stat:nth-child(4)::before{background:var(--sun)}
  .stat b{
    font-family:var(--serif);
    display:block;font-size:30px;color:var(--brand);line-height:1;font-weight:800;
    letter-spacing:-1px;
  }
  .stat:nth-child(2) b{color:var(--ocean)}
  .stat:nth-child(3) b{color:var(--leaf)}
  .stat:nth-child(4) b{color:#c68e00}
  .stat span{display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;margin-top:6px;font-weight:600;line-height:1.35}

  /* right: cover image in book-frame */
  .cover-block{position:relative;display:flex;flex-direction:column;align-items:center;max-width:560px;width:100%}
  .cover-label{
    display:inline-flex;align-items:center;gap:6px;
    font-size:10.5px;letter-spacing:.24em;color:var(--leaf);
    text-transform:uppercase;font-weight:700;margin-bottom:8px;
  }
  .cover-label::before{content:"★";font-size:8px}
  .cover-heading{
    font-family:var(--serif);
    font-size:15px;font-weight:700;margin:0 0 14px;letter-spacing:-.1px;
    text-align:center;line-height:1.3;
  }
  .cover-heading em{color:var(--brand);font-style:italic;font-weight:800}
  .cover-heading .sub{
    display:block;font-size:11px;font-style:italic;color:var(--ink-3);
    font-weight:500;margin-top:3px;letter-spacing:0;
  }
  .cover-frame{
    border-radius:14px;
    overflow:visible;
    box-shadow:
      0 30px 60px -20px rgba(60,30,10,.35),
      0 10px 20px -8px rgba(60,30,10,.2),
      inset 0 0 0 1px rgba(255,255,255,.15);
    position:relative;
    width:100%;max-width:560px;
    padding:0;
    transform:perspective(1400px) rotateY(-4deg) rotateX(1deg);
    transition:transform .6s ease;
    background:transparent;
  }
  .cover-frame:hover{transform:perspective(1400px) rotateY(0) rotateX(0) translateY(-4px)}
  .cover-frame img{width:100%;height:auto;display:block;border-radius:14px}
  .cover-block::after{
    content:"";position:absolute;top:58%;right:-40px;width:60px;height:80px;
    background:radial-gradient(circle,var(--sun) 2.5px,transparent 3.5px);
    background-size:12px 12px;opacity:.5;z-index:-1;
    animation:drift 12s ease-in-out infinite;
  }
  @keyframes drift{
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(-8px,8px)}
  }


  .resource-dashboard{display:flex;flex-direction:column;gap:14px;margin-top:28px;max-width:680px;grid-area:res}
  .res-section-title{
    display:flex;align-items:center;gap:8px;
    font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:.02em;
  }
  .res-section-title .en{color:var(--ink-3);font-style:italic;font-weight:600;font-size:11px;margin-left:2px}
  .res-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(196,78,58,.18)}
  .res-dot.video{background:var(--ocean);box-shadow:0 0 0 3px rgba(30,96,145,.18)}
  .res-grid{display:grid;gap:10px}
  .res-grid.teaching{grid-template-columns:repeat(4,1fr)}
  .res-grid.video{grid-template-columns:repeat(5,1fr)}
  .res-chip{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:12px 8px;box-shadow:var(--shadow-sm);text-align:center;
    position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;
  }
  .res-chip:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .res-chip::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand)}
  .res-grid.video .res-chip::before{background:var(--ocean)}
  .res-chip b{
    font-family:var(--serif);display:block;font-size:26px;color:var(--brand);line-height:1;font-weight:800;letter-spacing:-1px;
  }
  .res-grid.video .res-chip b{color:var(--ocean)}
  .res-chip span{display:block;font-size:10px;color:var(--ink-3);margin-top:6px;font-weight:600;line-height:1.35}
  /* ============ SCREEN 2 — TARGET USERS ============ */
  #screen2{
    background:linear-gradient(180deg, var(--paper) 0%, #fef1dc 100%);
    padding-top:36px;padding-bottom:36px;position:relative;
  }
  #screen2::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(600px 300px at 90% 10%, rgba(196,78,58,.08), transparent 60%),
      radial-gradient(500px 300px at 5% 90%, rgba(30,96,145,.08), transparent 60%);
  }
  .s2-inner{max-width:1200px;margin:0 auto;width:100%;position:relative;z-index:2}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}
  .sec-head h2{
    font-family:var(--serif);
    margin:0;font-size:36px;font-weight:800;letter-spacing:-.5px;line-height:1.1;
  }
  .sec-head h2 .en{color:var(--brand);font-size:20px;font-weight:700;margin-left:12px;font-style:italic}
  .sec-head h2::before{
    content:"";display:inline-block;width:8px;height:28px;background:var(--brand);
    border-radius:4px;margin-right:14px;vertical-align:-4px;
  }
  .sec-head .intro{margin:0;color:var(--ink-2);font-size:13.5px;max-width:480px;text-align:right;line-height:1.6}

  .target-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .target-card{
    background:#fff;border:1px solid var(--line);border-radius:22px;
    box-shadow:var(--shadow);padding:28px 24px;position:relative;overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .target-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .target-card .num{
    position:absolute;top:16px;right:20px;
    font-family:var(--serif);font-size:64px;font-weight:800;
    color:rgba(196,78,58,.08);line-height:1;
  }
  .target-card:nth-child(2) .num{color:rgba(30,96,145,.08)}
  .target-card:nth-child(3) .num{color:rgba(45,122,95,.08)}
  .target-card .icon{
    width:48px;height:48px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-size:24px;margin-bottom:16px;
  }
  .target-card:nth-child(1) .icon{background:rgba(196,78,58,.1);color:var(--brand)}
  .target-card:nth-child(2) .icon{background:rgba(30,96,145,.1);color:var(--ocean)}
  .target-card:nth-child(3) .icon{background:rgba(45,122,95,.1);color:var(--leaf)}
  .target-card h3{
    font-family:var(--serif);margin:0 0 4px;font-size:20px;font-weight:800;
  }
  .target-card h3 .en{display:block;font-size:14px;color:var(--ink-3);font-style:italic;font-weight:600;margin-top:2px}
  .target-card p{margin:12px 0 0;font-size:13px;color:var(--ink-2);line-height:1.7}
  .target-card p.en{color:var(--ink-3);font-style:italic;font-size:12px;margin-top:8px}
  .target-card ul{margin:12px 0 0;padding:0;list-style:none}
  .target-card ul li{
    font-size:12.5px;color:var(--ink-2);padding:4px 0 4px 18px;position:relative;line-height:1.5;
  }
  .target-card ul li::before{
    content:"";position:absolute;left:0;top:10px;width:8px;height:2px;border-radius:2px;background:var(--brand);
  }
  .target-card:nth-child(2) ul li::before{background:var(--ocean)}
  .target-card:nth-child(3) ul li::before{background:var(--leaf)}

  /* ============ SCREEN 3 — COURSE STRUCTURE ============ */
  #screen3{
    background:
      radial-gradient(800px 400px at 50% 0%, rgba(232,163,23,.12), transparent 60%),
      linear-gradient(180deg,#fef1dc 0%, var(--paper) 100%);
    padding-top:36px;padding-bottom:36px;
  }
  .s3-inner{max-width:1200px;margin:0 auto;width:100%}
  .s3-content{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
  .structure-flow{
    background:#fff;border:1px solid var(--line);border-radius:22px;
    box-shadow:var(--shadow);padding:28px;
  }
  .structure-flow .vol-info{
    display:flex;gap:16px;margin-bottom:20px;
  }
  .vol-badge{
    flex:1;background:linear-gradient(135deg,#fff8ea,#fff);border:1px solid var(--line-strong);
    border-radius:14px;padding:14px 16px;text-align:center;
  }
  .vol-badge .vname{font-family:var(--serif);font-size:18px;font-weight:800;color:var(--brand)}
  .vol-badge .vdesc{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.5}
  .vol-badge .vdesc em{color:var(--ink);font-style:normal;font-weight:700}
  .flow-title{
    font-size:13px;font-weight:700;color:var(--ink);margin-bottom:14px;
    display:flex;align-items:center;gap:8px;
  }
  .flow-title .en{color:var(--ink-3);font-style:italic;font-weight:600;font-size:12px}
  .flow-chain{
    display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:step;
  }
  .flow-arrow{display:none}
  .flow-node{
    display:flex;flex-direction:column;align-items:flex-start;gap:3px;
    background:linear-gradient(135deg,var(--cream),#fff);
    border:1.5px solid var(--line-strong);border-radius:12px;
    padding:12px 14px;font-size:12.5px;font-weight:700;color:var(--ink);
    text-align:left;min-width:0;line-height:1.3;position:relative;counter-increment:step;
    transition:all .25s ease;
  }
  .flow-node::before{
    content:counter(step);
    width:22px;height:22px;border-radius:50%;
    background:var(--brand);color:#fff;font-family:var(--serif);
    font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
    margin-bottom:4px;flex-shrink:0;
  }
  .flow-node .en{display:block;font-size:10px;color:var(--ink-3);font-style:italic;font-weight:500;margin-top:2px}
  .flow-node:hover{
    border-color:var(--brand);color:var(--brand);transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(196,78,58,.15);
  }
  .flow-arrow{
    font-size:18px;color:var(--line-strong);font-weight:700;
  }
  .level-img-wrap{
    background:#fff;border:1px solid var(--line);border-radius:22px;
    box-shadow:var(--shadow);padding:20px;overflow:hidden;
  }
  .level-img-wrap img{width:100%;border-radius:14px;display:block}
  .level-img-wrap .cap{
    font-size:12px;color:var(--ink-3);text-align:center;margin-top:10px;font-style:italic;
  }

  /* ============ SCREEN 4 — EIGHT FEATURES ============ */
  #screen4{
    background:linear-gradient(180deg, var(--paper) 0%, #f5ede0 100%);
    padding-top:36px;padding-bottom:36px;
  }
  .s4-inner{max-width:1200px;margin:0 auto;width:100%}
  .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .feature-card{
    background:#fff;border:1px solid var(--line);border-radius:20px;
    border-top:3px solid var(--brand);
    box-shadow:var(--shadow-sm);overflow:hidden;
    display:flex;flex-direction:column;
    transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
  }
  .feature-card:nth-child(2){border-top-color:var(--ocean)}
  .feature-card:nth-child(3){border-top-color:var(--leaf)}
  .feature-card:nth-child(4){border-top-color:#c68e00}
  .feature-card:nth-child(5){border-top-color:var(--lilac)}
  .feature-card:nth-child(6){border-top-color:var(--brand)}
  .feature-card:nth-child(7){border-top-color:var(--ocean)}
  .feature-card:nth-child(8){border-top-color:var(--leaf)}
  .feature-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
  .feature-head{
    display:flex;align-items:center;gap:12px;padding:18px 20px 14px;
    border-bottom:1px solid var(--line);
  }
  .feature-num{
    width:36px;height:36px;border-radius:10px;
    background:var(--brand);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-size:18px;font-weight:800;flex-shrink:0;
  }
  .feature-card:nth-child(2) .feature-num{background:var(--ocean)}
  .feature-card:nth-child(3) .feature-num{background:var(--leaf)}
  .feature-card:nth-child(4) .feature-num{background:#c68e00}
  .feature-card:nth-child(5) .feature-num{background:var(--lilac)}
  .feature-card:nth-child(6) .feature-num{background:var(--brand)}
  .feature-card:nth-child(7) .feature-num{background:var(--ocean)}
  .feature-card:nth-child(8) .feature-num{background:var(--leaf)}
  .feature-titles h3{margin:0;font-family:var(--serif);font-size:16px;font-weight:800;line-height:1.2}
  .feature-titles h3 .en{display:block;font-size:12px;color:var(--ink-3);font-style:italic;font-weight:600;margin-top:2px}
  .feature-body{padding:14px 20px 18px;flex:1;display:flex;flex-direction:column;gap:8px}
  .feature-body p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.65}
  .feature-body p.en{color:var(--ink-3);font-style:italic;font-size:12px;line-height:1.6}
  .feature-gallery{
    padding:0 20px 18px;
    display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  }
  .feature-gallery::-webkit-scrollbar{height:5px}
  .feature-gallery::-webkit-scrollbar-track{background:var(--cream);border-radius:3px}
  .feature-gallery::-webkit-scrollbar-thumb{background:rgba(196,78,58,.3);border-radius:3px}
  .feature-gallery img{
    height:200px;border-radius:10px;object-fit:cover;flex-shrink:0;
    scroll-snap-align:start;box-shadow:var(--shadow-sm);cursor:pointer;
    transition:transform .25s ease;
  }
  .feature-gallery img:hover{transform:scale(1.03)}
  .feature-gallery img:first-child{margin-left:auto}
  .feature-gallery img:last-child{margin-right:auto}
  .feature-gallery .swipe-hint{
    font-size:10px;color:var(--ink-3);font-style:italic;align-self:center;flex-shrink:0;
    writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.1em;padding:0 4px;
  }

  /* ============ SCREEN 5 — MULTIMODAL RESOURCES ============ */
  #screen5{
    background:
      radial-gradient(600px 300px at 50% 0%, rgba(30,96,145,.08), transparent 60%),
      linear-gradient(180deg,#f5ede0 0%, var(--paper) 100%);
    padding-top:36px;padding-bottom:36px;
  }
  .s5-inner{max-width:1200px;margin:0 auto;width:100%}
  .video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .video-card{
    background:#fff;border:1px solid var(--line);border-radius:18px;
    box-shadow:var(--shadow);overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .video-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
  .video-card .vframe{
    background:#000;border-radius:14px 14px 0 0;overflow:hidden;position:relative;
    aspect-ratio:16/9;
  }
  .video-card .vframe video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
  .video-card .vmeta{padding:16px 18px}
  .video-card .vmeta .vtag{
    display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;
    padding:3px 10px;border-radius:999px;text-transform:uppercase;
  }
  .video-card[data-type="drama"] .vtag{background:rgba(196,78,58,.12);color:var(--brand)}
  .video-card[data-type="pinyin"] .vtag{background:rgba(123,92,201,.12);color:var(--lilac)}
  .video-card[data-type="grammar"] .vtag{background:rgba(30,96,145,.12);color:var(--ocean)}
  .video-card[data-type="hanzi"] .vtag{background:rgba(45,122,95,.12);color:var(--leaf)}
  .video-card[data-type="culture"] .vtag{background:rgba(232,163,23,.15);color:#c68e00}
  .video-card .vmeta h4{
    font-family:var(--serif);margin:8px 0 2px;font-size:16px;font-weight:800;line-height:1.2;
  }
  .video-card .vmeta h4 .en{display:block;font-size:12px;color:var(--ink-3);font-style:italic;font-weight:600;margin-top:2px}
  .video-card .vmeta .vdesc{font-size:12px;color:var(--ink-2);margin:6px 0 0;line-height:1.55}
  .video-card .vmeta .vdesc.en{color:var(--ink-3);font-style:italic;margin-top:2px}

  /* ============ SCREEN 6 — PARTNERSHIP ============ */
  #screen6{
    background:linear-gradient(135deg,#1c1610 0%,#2a1f14 50%,#1e1610 100%);
    color:#e8dbc4;padding-top:44px;padding-bottom:44px;position:relative;overflow:hidden;
  }
  #screen6::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(600px 300px at 80% 20%, rgba(232,163,23,.12), transparent 60%),
      radial-gradient(500px 300px at 20% 80%, rgba(196,78,58,.10), transparent 60%);
  }
  .s6-inner{max-width:1000px;margin:0 auto;width:100%;position:relative;z-index:2}
  .s6-inner h2{
    font-family:var(--serif);font-size:36px;font-weight:800;margin:0 0 8px;color:#fff;
  }
  .s6-inner h2 .en{color:var(--sun-soft);font-size:20px;font-style:italic;font-weight:700;margin-left:12px}
  .s6-inner h2::before{
    content:"";display:inline-block;width:8px;height:28px;background:var(--sun);
    border-radius:4px;margin-right:14px;vertical-align:-4px;
  }
  .s6-intro{font-size:14px;color:#c8b898;line-height:1.7;margin:12px 0 28px;max-width:680px}
  .s6-intro.en{color:#a89878;font-style:italic;font-size:13px;margin-top:8px}
  .s6-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .contact-box{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    border-radius:18px;padding:24px;backdrop-filter:blur(10px);
  }
  .contact-box h3{
    font-family:var(--serif);margin:0 0 16px;font-size:18px;font-weight:700;color:#fff;
  }
  .contact-box h3 .en{font-size:13px;color:var(--sun-soft);font-style:italic;font-weight:600;margin-left:8px}
  .contact-person{
    display:flex;align-items:center;gap:14px;margin-bottom:16px;
    padding:12px;background:rgba(255,255,255,.04);border-radius:12px;
  }
  .contact-person .avatar{
    width:44px;height:44px;border-radius:12px;flex-shrink:0;
    background:linear-gradient(135deg,var(--sun),var(--brand));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-size:20px;font-weight:800;color:#fff;
  }
  .contact-person:nth-child(3) .avatar{background:linear-gradient(135deg,var(--ocean),var(--leaf))}
  .contact-person .info{flex:1}
  .contact-person .info .pname{font-size:14px;font-weight:700;color:#fff}
  .contact-person .info .pname .en{color:var(--sun-soft);font-style:italic;font-weight:600;font-size:12px;margin-left:6px}
  .contact-person .info .pdetail{font-size:11.5px;color:#a89878;margin-top:2px;line-height:1.5}
  .contact-person .info .pdetail a{color:var(--sun-soft);text-decoration:none}

  .qr-section{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    border-radius:18px;padding:24px;text-align:center;backdrop-filter:blur(10px);
  }
  .qr-section h3{
    font-family:var(--serif);margin:0 0 16px;font-size:18px;font-weight:700;color:#fff;
  }
  .qr-section h3 .en{font-size:13px;color:var(--sun-soft);font-style:italic;font-weight:600;display:block;margin-top:2px}
  .qr-img-box{
    background:#fff;border-radius:14px;padding:12px;display:inline-block;
    box-shadow:0 12px 32px rgba(0,0,0,.3);margin-bottom:12px;
  }
  .qr-img-box img{width:160px;height:160px;display:block}
  .qr-section .qr-tip{font-size:12px;color:#c8b898;line-height:1.5}
  .qr-section .qr-tip small{display:block;color:#8a7a60;margin-top:4px;font-style:italic;font-size:10.5px}
  .qr-section .qr-url{
    margin-top:10px;font-size:11px;color:var(--sun-soft);word-break:break-all;
    background:rgba(0,0,0,.2);padding:8px 12px;border-radius:8px;
    font-family:monospace;
  }

  .s6-footer{
    margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
    text-align:center;font-size:10px;color:#8a7a60;letter-spacing:.05em;
  }
  .s6-footer .logo{font-family:var(--serif);font-size:12px;color:#c8b898;font-weight:700;margin-bottom:4px}

  @media (max-width: 1000px){
    .screen{padding:28px 20px;min-height:auto}
    .s1-grid{grid-template-columns:1fr;grid-template-areas:"head" "cover" "res";gap:28px;align-items:stretch}
    .cover-block{justify-self:center;align-self:auto}
    .res-grid.teaching,.res-grid.video{grid-template-columns:repeat(2,1fr)}
    .cover-frame{transform:none;margin:0 auto}
    .target-grid{grid-template-columns:1fr}
    .s3-content{grid-template-columns:1fr}
    .feature-grid{grid-template-columns:1fr}
    .video-grid{grid-template-columns:1fr}
    .s6-grid{grid-template-columns:1fr}
    h1.title{font-size:44px}
    h1.title .en{font-size:24px}
    .stats{grid-template-columns:repeat(2,1fr)}
    .float-char{display:none}
    .sec-head{flex-direction:column;align-items:flex-start}
    .sec-head .intro{text-align:left}
    .flow-chain{grid-template-columns:repeat(2,1fr)}
    .flow-arrow{display:none}
  }

  .lightbox{
    position:fixed;inset:0;background:rgba(26,19,16,.92);
    display:none;align-items:center;justify-content:center;z-index:9999;
    padding:40px;backdrop-filter:blur(6px);
  }
  .lightbox.active{display:flex}
  .lightbox img{
    max-width:100%;max-height:90vh;object-fit:contain;
    border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);
    background:#fff;
  }
  .lightbox .lb-close{
    position:absolute;top:20px;right:28px;
    width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
    color:#fff;font-size:28px;line-height:42px;text-align:center;cursor:pointer;
    transition:background .2s ease;
  }
  .lightbox .lb-close:hover{background:rgba(255,255,255,.22)}
  .lightbox .lb-caption{
    position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
    background:rgba(0,0,0,.5);color:#fff;padding:8px 16px;border-radius:999px;
    font-size:12px;max-width:80%;text-align:center;
  }


  
  
  
  
  /* ============ SCREEN 1.5 — LATEST NEWS ============ */
  #screen-news{
    background:
      radial-gradient(900px 500px at 86% 10%, rgba(123,92,201,.16), transparent 55%),
      radial-gradient(820px 520px at 8% 92%, rgba(45,122,95,.12), transparent 55%),
      linear-gradient(180deg,#fff8ec 0%, var(--paper) 100%);
    border-bottom:1px solid var(--line);
    justify-content:flex-start;
    padding-top:56px;padding-bottom:56px;
  }
  .news-inner{max-width:1180px;margin:0 auto;width:100%;padding:8px 0}
  .news-title{font-family:var(--serif);font-size:40px;font-weight:800;margin:14px 0 6px;letter-spacing:-.5px;line-height:1.1}
  .news-title .en{display:inline-block;font-style:italic;font-size:18px;color:var(--brand);font-weight:700;margin-left:10px;letter-spacing:0}
  .news-intro{font-size:15px;color:var(--ink-2);max-width:740px;line-height:1.75;margin:6px 0}
  .news-intro.en{font-size:13px;color:var(--ink-3);font-style:italic;max-width:740px}
  .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .news-grid.paged{display:block}
  .news-grid.paged .news-page{display:none}
  .news-grid.paged .news-page.active{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;animation:newsFade .4s ease}
  @keyframes newsFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .news-card{
    display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
    border-top:4px solid var(--accent,var(--brand));
    border-radius:16px;padding:18px 20px 16px;box-shadow:var(--shadow-sm);
    text-decoration:none;color:inherit;position:relative;overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
  }
  .news-card::before{display:none}
  .news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);background:#fffdf8}
  .news-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .news-tag{font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--accent,var(--brand));padding:4px 11px;border-radius:999px;white-space:nowrap}
  .news-date{font-size:12px;color:var(--ink-3);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
  .news-card-title{font-family:var(--serif);font-size:19px;font-weight:700;margin:0 0 8px;line-height:1.32;color:var(--ink)}
  .news-card-excerpt{font-size:13px;color:var(--ink-2);line-height:1.65;margin:0 0 14px;flex:1}
  .news-readmore{font-size:12.5px;font-weight:700;color:var(--accent,var(--brand));margin-top:auto}
  /* pager: 左右箭头 + 中间圆点 */
  .news-pager{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:34px}
  .pager-arrow{
    width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);
    background:#fff;color:var(--brand);font-size:24px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-sm);transition:transform .2s ease,background .2s ease,color .2s ease,opacity .2s;
    font-family:var(--serif);padding-bottom:3px;
  }
  .pager-arrow:hover:not(:disabled){transform:translateY(-2px);background:var(--brand);color:#fff}
  .pager-arrow:disabled{opacity:.32;cursor:not-allowed}
  .pager-dots{display:flex;align-items:center;gap:11px}
  .pager-dot{width:10px;height:10px;border-radius:50%;border:none;background:var(--line-strong);cursor:pointer;padding:0;transition:transform .2s ease,background .2s}
  .pager-dot:hover{background:var(--ink-3)}
  .pager-dot.active{background:var(--brand);transform:scale(1.4)}
  @media (max-width:980px){
    .news-grid{grid-template-columns:repeat(2,1fr)}
    .news-grid.paged .news-page.active{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:640px){
    .news-grid{grid-template-columns:1fr}
    .news-grid.paged .news-page.active{grid-template-columns:1fr}
  }


  /* ===== 移动端适配 (≤640px) ===== */
  @media (max-width: 640px){
    .screen{padding:46px 16px}
    /* —— 文字与标题 —— */
    h1.title{font-size:30px;line-height:1.1;letter-spacing:-.4px;margin:14px 0 6px}
    h1.title .cn{display:block;white-space:normal;word-break:break-word;overflow-wrap:break-word;font-size:26px;line-height:1.15;margin-top:2px;width:100%}
    h1.title .en{display:block;font-size:18px;margin-top:8px;line-height:1.3}
    .lede{font-size:14px;max-width:100%}
    .lede.en{font-size:12.5px;max-width:100%}
    .title-underline{width:74px;height:8px;margin-top:6px}
    .brand-badge{font-size:10.5px;letter-spacing:.18em;padding:6px 12px}
    /* —— 统计区（英文长词撑爆列宽，加 min-width:0 + 文本省略） —— */
    .stats{grid-template-columns:repeat(2,1fr);gap:10px;max-width:100%;min-width:0}
    .stat{min-width:0;overflow:hidden;padding:12px 10px}
    .stat b{font-size:22px}
    .stat span{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
    /* —— 区块标题 —— */
    .sec-head{margin-bottom:22px;gap:12px}
    .sec-head h2,.s6-inner h2{font-size:26px;word-break:break-word;overflow-wrap:break-word}
    .sec-head h2 .en,.s6-inner h2 .en{font-size:15px;margin-left:6px;display:inline}
    .sec-head .intro{font-size:12.5px;max-width:100%;text-align:left}
    .s2-inner,.s3-inner,.s4-inner,.s5-inner,.s6-inner,.news-inner{max-width:100%}
    /* —— 适用对象卡 —— */
    .target-grid{gap:14px;min-width:0}
    .target-card{min-width:0;padding:22px 18px}
    .target-card .num{font-size:52px;right:14px;top:14px}
    .target-card .icon{width:44px;height:44px;font-size:22px;margin-bottom:12px}
    .target-card h3{font-size:18px;word-break:break-word}
    .target-card h3 .en{font-size:13px}
    .target-card p,.target-card p.en{font-size:12.5px}
    .target-card ul li{font-size:12px;padding:4px 0 4px 16px}
    /* —— 教材体例 —— */
    .s3-content{gap:18px;min-width:0}
    .structure-flow,.level-img-wrap{min-width:0;padding:18px}
    .vol-info{gap:12px}
    .vol-badge{padding:12px 10px}
    .vol-badge .vname{font-size:15px}
    .vol-badge .vdesc{font-size:11px}
    .flow-chain{gap:8px;grid-template-columns:repeat(2,1fr)}
    .flow-node{padding:10px 12px;font-size:12px;min-width:0}
    .flow-node::before{width:20px;height:20px;font-size:11px}
    .flow-node .en{font-size:9.5px}
    /* —— 资源仪表板（teaching/video 网格英文也需防撑爆） —— */
    .resource-dashboard{max-width:100%;min-width:0}
    .res-section-title{font-size:11.5px}
    .res-section-title .en{font-size:10.5px}
    .res-grid.teaching,.res-grid.video{grid-template-columns:1fr;gap:8px;min-width:0}
    .res-chip{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 16px;min-width:0;overflow:visible}
    .res-chip::before{top:auto;bottom:auto;left:0;right:auto;width:4px;height:auto;align-self:stretch}
    .res-chip b{display:inline-flex;align-items:center;justify-content:center;min-width:56px;font-size:24px;line-height:1;flex-shrink:0}
    .res-chip span{font-size:11px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4}
    /* —— 八大特色 —— */
    .feature-grid{gap:14px;min-width:0}
    .feature-card{min-width:0}
    .feature-head{padding:14px 16px 10px;gap:10px}
    .feature-num{width:30px;height:30px;font-size:15px;border-radius:8px}
    .feature-titles h3{font-size:15px;word-break:break-word}
    .feature-titles h3 .en{font-size:11.5px}
    .feature-body{padding:12px 16px 14px;gap:6px}
    .feature-body p,.feature-body p.en{font-size:12.5px}
    .feature-gallery{padding:0 16px 14px}
    .feature-gallery img{height:158px}
    .feature-gallery .swipe-hint{font-size:9px}
    /* —— 多模态资源视频卡 —— */
    .video-grid{gap:14px;min-width:0}
    .video-card{min-width:0}
    .video-card .vmeta{padding:14px 16px}
    .video-card .vmeta h4{font-size:15px;word-break:break-word}
    .video-card .vmeta h4 .en{font-size:11.5px}
    .video-card .vmeta .vdesc,.video-card .vmeta .vdesc.en{font-size:11.5px}
    /* —— 出版计划（深色屏） —— */
    .s6-intro{font-size:13px;max-width:100%}
    .s6-intro.en{font-size:12px}
    .s6-grid{gap:16px;min-width:0}
    .contact-box,.qr-section{min-width:0;padding:18px}
    .contact-box h3,.qr-section h3{font-size:16px;margin-bottom:12px}
    .contact-person{padding:10px;gap:10px;margin-bottom:12px}
    .contact-person .avatar{width:40px;height:40px;font-size:18px;border-radius:10px}
    .contact-person .info .pname{font-size:13.5px}
    .contact-person .info .pname .en{font-size:11.5px}
    .contact-person .info .pdetail{font-size:11px}
    .qr-img-box img{width:138px;height:138px}
    .qr-section .qr-tip{font-size:11.5px}
    .qr-section .qr-url{font-size:10.5px}
    .s6-footer{font-size:9px;margin-top:22px;padding-top:16px}
    /* —— 资讯中心屏 —— */
    .news-title{font-size:28px;margin:10px 0 4px;word-break:break-word}
    .news-title .en{font-size:14px;display:block;margin-left:0;margin-top:4px}
    .news-intro{font-size:14px;max-width:100%}
    .news-intro.en{font-size:12px;max-width:100%}
    .news-grid{grid-template-columns:1fr;gap:14px;min-width:0}
    .news-grid.paged .news-page.active{grid-template-columns:1fr;gap:14px}
    .news-page{min-width:0}
    .news-card{min-width:0;padding:18px 16px}
    .news-card-title{font-size:17px;word-break:break-word}
    .news-card-excerpt{font-size:12.5px}
    .news-pager{gap:18px;margin-top:24px}
    .pager-arrow{width:40px;height:40px;font-size:22px}
    .pager-dot{width:9px;height:9px}
    /* —— 触摸设备关闭 hover 抬升粘滞 —— */
    @media (hover:none){
      .news-card:hover,.target-card:hover,.feature-card:hover,.video-card:hover,
      .stat:hover,.res-chip:hover,.cover-frame:hover{transform:none!important}
    }
  }
  @media (max-width: 380px){
    h1.title{font-size:26px}
    h1.title .cn{font-size:23px}
    h1.title .en{font-size:16px}
    .sec-head h2,.s6-inner h2{font-size:22px}
    .sec-head h2 .en,.s6-inner h2 .en{font-size:13px}
    .news-title{font-size:24px}
    .news-title .en{font-size:12px}
    .feature-gallery img{height:130px}
    .stats{gap:7px}
    .res-grid.teaching,.res-grid.video{grid-template-columns:1fr;gap:6px}
    .res-chip b{font-size:18px}
    .res-chip span{font-size:8.5px;white-space:normal;overflow:visible;text-overflow:clip}
  }

/* ==================== 以下为 2026-09-18 从设计稿同步的补充样式（视频横排/等级对标/获取与合作/手风琴/封面切换/画廊箭头） ==================== */
/* ===== 本次调整补充 ===== */
/* 多模态视频网格：5 个等宽、末行居中，避免最后一个独占整行 */
.video-grid{display:grid;grid-template-columns:1fr;gap:24px}
.video-grid>.video-card{display:flex;width:100%;max-width:100%;flex-direction:row;align-items:stretch;padding:14px}
.video-grid>.video-card .vframe{flex:1.5 1 0;border-radius:14px}
.video-grid>.video-card .vmeta{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;padding:10px 22px}
@media(max-width:820px){
  .video-grid>.video-card{flex-direction:column;padding:12px}
  .video-grid>.video-card .vframe{border-radius:12px}
  .video-grid>.video-card .vmeta{padding:14px 4px 4px}
}
/* 等级对标标题（字体与「先导课 / 正课 / 八大板块」标签一致）与代码脚注 */
.level-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;line-height:1.4}
.level-title .en{color:var(--ink-3);font-style:italic;font-weight:600;font-size:12px}
.level-fig{margin:0}
.level-fig + .level-fig{margin-top:18px}
.level-fig img{width:100%;display:block;border-radius:14px}
.level-foot{font-size:12px;color:var(--ink-3);margin-top:10px;text-align:center;line-height:1.6}
.level-foot.en{font-style:italic}

/* ==================== 补充样式（续） ==================== */
.s6-modules{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px;align-items:stretch}
.s6-mod{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  padding:26px 26px 24px;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.s6-mod::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(320px 150px at 100% 0%,rgba(232,163,23,.16),transparent 70%)}
.s6-mod::after{content:"";position:absolute;left:0;top:26px;bottom:26px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--sun),var(--brand));opacity:.85}
.s6-mod:hover{transform:translateY(-4px);border-color:rgba(232,163,23,.42);
  box-shadow:0 28px 60px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1)}
.s6-mod-no{font-family:var(--serif);font-weight:800;font-size:42px;line-height:1;margin-bottom:12px;
  background:linear-gradient(135deg,#ffd67a,#e8a317);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#e8a317;opacity:.92}
.s6-mod h3{margin:0 0 12px;font-family:var(--serif);font-size:19px;font-weight:800;color:#fff;
  display:flex;flex-direction:column;gap:3px;line-height:1.25}
.s6-mod h3 .en{font-family:var(--sans);font-weight:600;font-size:12.5px;font-style:italic;color:var(--sun-soft);letter-spacing:.2px}
.s6-mod p{margin:0 0 9px;font-size:13.5px;color:#d8cbb4;line-height:1.65}
.s6-mod p.en{color:#9d8f76;font-style:italic;font-size:12.5px}
.s6-link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;align-self:flex-start;padding:10px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--sun),#f2b83c);color:#2a1d08;font-weight:800;font-size:12.5px;
  text-decoration:none;box-shadow:0 10px 22px -10px rgba(232,163,23,.8);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.s6-link:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(232,163,23,.95);filter:brightness(1.06)}

/* —— 订购咨询 + 问卷 —— */
.s6-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin-top:26px;align-items:stretch}
.s6-contact,.s6-qr{
  position:relative;overflow:hidden;border-radius:20px;padding:26px 28px;
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
}
.s6-contact::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(360px 160px at 100% 0%,rgba(232,163,23,.14),transparent 70%)}
.s6-contact h3,.s6-qr h3{margin:0 0 18px;font-family:var(--serif);font-size:19px;font-weight:800;color:#fff;
  display:flex;flex-direction:column;gap:3px;line-height:1.25}
.s6-contact h3 .en,.s6-qr h3 .en{font-family:var(--sans);font-weight:600;font-size:12.5px;font-style:italic;color:var(--sun-soft)}
.contact-person{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.contact-person:first-of-type{border-top:none;padding-top:0}
.avatar{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-weight:800;font-size:22px;color:#2a1d08;
  background:linear-gradient(135deg,#ffd67a,#e8a317);box-shadow:0 10px 22px -10px rgba(232,163,23,.9)}
.contact-person .info{flex:1;min-width:0}
.pname{font-size:16px;font-weight:800;color:#fff;margin-bottom:8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.pname .en{font-family:var(--sans);font-weight:600;font-size:12px;font-style:italic;color:var(--sun-soft)}
.pdetail{font-size:13.5px;color:#d8cbb4;line-height:1.8}
.pdetail a{color:var(--sun-soft);text-decoration:none;border-bottom:1px dotted rgba(232,163,23,.5)}
.pdetail a:hover{color:#ffd67a}
.s6-qr{display:flex;flex-direction:column}
.qr-img-box{align-self:center;background:#fff;border-radius:16px;padding:12px;box-shadow:0 16px 40px -18px rgba(0,0,0,.7)}
.qr-img-box img{display:block;width:190px;height:190px;object-fit:contain}
.qr-tip{margin-top:16px;text-align:center;font-size:13.5px;color:#e7dcc6;font-weight:600}
.qr-tip small{display:block;margin-top:5px;font-size:12px;font-style:italic;color:#9d8f76;font-weight:400}
.qr-url{margin-top:12px;text-align:center;font-size:11.5px;color:#8a7d64;word-break:break-all}
.s6-footer{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;color:#9d8f76;display:flex;flex-direction:column;gap:6px;line-height:1.6}
.s6-footer .logo{color:#d8cbb4;font-weight:700}
@media(max-width:820px){.s6-grid{grid-template-columns:1fr}}
@media(max-width:760px){.s6-modules{grid-template-columns:1fr}}

/* ===== 多模态资源 · 手风琴卡片（与「最新动态」同款5主题色） ===== */
.s5-inner .video-grid, .video-grid{display:flex !important;gap:16px !important;align-items:stretch !important;
  height:auto !important;aspect-ratio:auto !important;padding:6px 0 !important;grid-template-columns:none !important;overflow:visible !important;width:100% !important}
.video-grid>.video-card, .video-card{position:relative;flex:1 1 0 !important;min-width:0 !important;
  width:auto !important;max-width:none !important;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,#faf5ec,#efe6d6);border:1px solid rgba(120,80,50,.16);
  box-shadow:0 16px 34px -20px rgba(60,34,24,.5);cursor:pointer;padding:0 !important;
  flex-direction:column !important;align-items:stretch !important;
  transition:flex-grow .6s cubic-bezier(.34,1.2,.4,1), flex-basis .6s cubic-bezier(.34,1.2,.4,1), box-shadow .4s ease}
/* 修复抖动：所有卡 flex-basis 统一为 0，仅由 flex-grow 分配宽度，
   保证动画每一帧的分配比例之和恒为 100%，不会出现压缩到 2px / 撑到 811px 的失衡 */
.video-grid>.video-card, .video-card{flex:1 1 0 !important}
.video-grid>.video-card.on, .video-card.on{flex:6.66 1 0 !important}
.video-card:hover{box-shadow:0 26px 52px -22px rgba(60,34,24,.58)}
.video-card:nth-child(1){--c:#c44e3a}
.video-card:nth-child(2){--c:#c68e00}
.video-card:nth-child(3){--c:#2d7a5f}
.video-card:nth-child(4){--c:#1e6091}
.video-card:nth-child(5){--c:#7b5cc9}
.video-card .vframe{position:relative !important;top:auto;left:auto;right:auto;width:100% !important;
  flex:0 0 auto !important;height:auto !important;opacity:0;transition:opacity .3s ease;
  border-radius:inherit !important;overflow:hidden !important;display:none !important}
.video-card .vframe video{width:100% !important;height:100% !important;display:block;
  object-fit:cover;aspect-ratio:16/9;border-radius:0 !important}
.video-grid>.video-card>.vframe, .video-grid>.video-card .vframe{flex:0 0 auto !important;
  border-radius:inherit !important;height:auto !important}
.video-card.on .vframe{display:block !important;opacity:1}
.video-card .vmeta{position:relative !important;left:auto;right:auto;bottom:auto;top:auto !important;
  flex:0 0 auto;padding:18px 22px 20px 28px !important;opacity:0;transition:opacity .35s ease .1s;pointer-events:none;
  display:none !important}
.video-card.on .vmeta{display:block !important;opacity:1}
.video-card .vtag{display:inline-block !important;background:var(--c) !important;color:#fff !important;
  padding:3px 11px !important;border-radius:999px;font-size:11px !important;font-weight:600;margin-bottom:9px;
  letter-spacing:.01em !important;white-space:nowrap !important;max-width:100% !important}
.video-card .vmeta h4{font-size:19px !important;color:#3a231c;margin:0 !important;line-height:1.32;font-weight:750}
.video-card .vmeta h4 .en{display:block;color:#9b8676 !important;font-size:12.5px !important;font-style:italic;
  font-weight:500;margin-top:4px}
.video-card .vmeta .vdesc{color:#6b5548 !important;font-size:12.5px !important;line-height:1.55;margin:8px 0 0 !important}
.video-card .vmeta .vdesc.en{color:#a8988a !important;font-size:11.5px !important}
/* 手风琴内容包裹层（JS 生成）：封面 + 文字整体，供竖版做揭示动画 */
.vbody{display:flex;flex-direction:column;flex:0 0 auto;width:100%;min-width:0}
.video-card .vstrip{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:20px 0 18px;
  background:linear-gradient(180deg,#ecdcbf 0%,#e3d0b0 45%,#d3bda0 100%);
  box-shadow:inset 0 -14px 24px rgba(120,80,50,.16),
    inset 0 0 0 1px rgba(255,255,255,.22);
  opacity:1;transition:opacity .3s ease;z-index:3;border-radius:inherit;overflow:hidden}
.video-card.on .vstrip{opacity:0;pointer-events:none}
.video-card .vstrip .vnum{font-family:var(--serif);font-size:20px;font-weight:800;letter-spacing:-.5px;
  color:#fff;background:var(--c);font-variant-numeric:lining-nums tabular-nums;
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px -3px var(--c)}
.video-card .vstrip .vname{writing-mode:vertical-rl;text-orientation:upright;
  color:#5a4032;font-size:26px;font-weight:800;letter-spacing:.14em;flex:0 0 auto;
  display:block;margin:0;text-shadow:0 1px 2px rgba(255,255,255,.5);font-family:var(--serif)}
.video-card .vstrip .ven{writing-mode:horizontal-tb;text-orientation:mixed;
  font-size:10px;font-weight:600;font-style:italic;letter-spacing:.02em;color:#8a7263;
  text-align:center;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-card .vstrip .vicon{font-size:13px;color:var(--c);flex:0 0 auto}

/* ===== 手风琴：防标签裁切 + 移动端适配 ===== */
.video-card .vmeta{padding-right:22px !important}
@media (max-width: 900px){
  /* 竖版手风琴：横向→纵向，其余卡收成横条；高度参与过渡，切换有与横屏一致的弹性动感 */
  .s5-inner .video-grid, .video-grid{display:flex !important;flex-direction:column !important;
    height:auto !important;aspect-ratio:auto !important;gap:10px !important;overflow:visible !important;
    --s5-col-h:54px;--s5-open-h:auto}
  .video-grid>.video-card, .video-card{flex:0 0 auto !important;height:var(--s5-col-h) !important;
    container-type:inline-size;              /* 供 vframe 用 cqw 取「卡片宽度」做高度上限 */
    min-width:0 !important;min-height:0 !important;
    width:100% !important;max-width:100% !important;border-radius:14px !important;
    overflow:hidden !important;align-self:stretch !important;
    transition:height .6s cubic-bezier(.34,1.2,.4,1), box-shadow .4s ease !important}
  .video-grid>.video-card.on, .video-card.on{flex:0 0 auto !important;   /* 必须覆盖横屏的 flex:6.66 1 0（basis 在纵向=高度）*/
    height:var(--s5-open-h) !important;
    min-height:0 !important;align-self:stretch !important}
  /* 收起态：横向条（编号 + 标题CN/EN + ▶）；展开态：封面 + 文字区，两层交叉淡入淡出 */
  /* ===== 完全照搬横屏机制：容器在长 → 内容跟着二维长大（无 clip-path / 无遮罩 / 无擦除）=====
     横屏实测：卡片变宽 108→706，vframe 由 width:100% + aspect-ratio:16/9 反推高度，
               0×0 → 275×155 → 580×326 → 711×400 → 704×396，比例恒定 1.78。
     竖屏镜像：卡片变高 54→370，vframe 由「flex 拿到剩余高度」+ aspect-ratio 反推宽度，
               0×0 → …→ 358×201，同样是宽和高一起长。
     关键：.vbody 必须 flex:1 1 0，让它的高度每帧等于卡片高度；
           否则 vbody 高度=内容高（368 恒定），vframe 永远只有 200，内容纹丝不动。 */
  .video-card .vbody{flex:1 1 0 !important;min-height:0 !important;
    display:flex;flex-direction:column;justify-content:flex-start !important;
    /* ★ 视频尺寸的唯一实时来源 = vbody 自己的高度 ★
       vbody 用 flex-grow 过渡（和横屏卡片宽度同一个思路）：
         · 切换卡片时 .on 让 vbody 从 0 长到 1 → 视频跟着二维长大（保留动效）
         · 拖动窗口时 vbody 高度 = 卡片高度（实时，不走 JS 的 150ms 锁定值）
           → 视频实时跟着宽度走，不再慢一档
       之前把高度挂在 --s5-open-h（JS 锁定值）上，拖动时锁定值滞后一帧，
       封面就会永远差 18~19px，看着像"没跟着变大"。现在彻底脱离它。 */
    flex-grow:0;flex-basis:0 !important;overflow:hidden;
    transition:flex-grow .6s cubic-bezier(.34,1.2,.4,1) !important}
  .video-card.on .vbody{flex-grow:1 !important}
  .video-grid>.video-card .vframe, .video-grid .video-card .vframe{display:block !important;
    position:relative !important;top:auto;left:auto;right:auto;
    /* ★ 关键：宽和高都由 vbody 的实时高度推导 ★
       height:100%  → 拿满 vbody 高度（vbody 高度 = 卡片高 − 文字区，实时）
       width:auto + aspect-ratio:16/9 → 宽度由高度反推
       于是「卡片长大 → vbody 长大 → 视频宽高一起长」，和横屏同源；
       而且 vbody 高度是实时的（不经过 JS 的 150ms 锁定值），拖动窗口零滞后。
       拖动时若反推出的宽度超过卡宽，由 max-width:100% 截断 —— 此时比例会略小于 16:9，
       所以再加 max-height:calc(100cqw*9/16) 兜底，让宽度永不超过卡宽、永不裁画面。 */
    flex:0 0 auto !important;
    height:100% !important;
    width:auto !important;max-width:100% !important;aspect-ratio:16/9 !important;
    max-height:calc(100cqw * 9 / 16) !important;
    min-height:0 !important;
    margin-top:0;
    align-self:flex-start;opacity:0;transition:opacity .26s ease !important}
  .video-grid.up .video-card .vframe{align-self:flex-end}   /* 方向与横屏一致：往下切靠左，往上切靠右 */
  .video-card.on .vframe{opacity:1 !important;transition:opacity .38s ease .1s !important}
  .video-card:not(.on) .vframe,.video-card:not(.on) .vmeta{pointer-events:none}   /* 收起态不可误触播放 */
  .video-card.on .vframe video{width:100% !important;height:100% !important;aspect-ratio:16/9 !important;
    object-fit:cover !important;object-position:center !important}
  .video-card .vstrip{display:flex !important;position:absolute !important;inset:0 0 auto 0 !important;
    height:var(--s5-col-h) !important;z-index:2;
    flex-direction:row !important;justify-content:flex-start !important;align-items:center !important;
    gap:12px !important;padding:0 18px !important;writing-mode:horizontal-tb;
    border-radius:inherit !important;opacity:1;transition:opacity .26s ease .08s !important}
  .video-card.on .vstrip{opacity:0 !important;pointer-events:none;transition:opacity .2s ease !important}
  .video-card .vstrip .vnum{width:30px !important;height:30px !important;font-size:16px !important;flex:none !important}
  .video-card .vstrip .vname{writing-mode:horizontal-tb !important;text-orientation:mixed !important;flex:1 1 auto !important;
    margin:0 !important;font-size:17px !important;font-weight:800 !important;letter-spacing:.04em !important;
    text-align:left !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
  .video-card .vstrip .ven{writing-mode:horizontal-tb !important;text-orientation:mixed !important;
    font-size:11.5px !important;font-style:italic !important;font-weight:600 !important;color:#8a7263 !important;
    flex:0 0 auto !important;display:inline-block !important;white-space:nowrap !important}
  .video-card .vstrip .vicon{font-size:14px !important;flex:none !important}
  /* 展开态：封面 + 文字区（文字区定高，剩下的高度全给 vframe，和横屏 vmeta 定宽同理） */
  .video-card .vmeta{display:block !important;position:relative !important;top:auto !important;
    padding:14px 16px 16px !important;height:168px !important;box-sizing:border-box;
    flex:0 1 auto !important;min-height:0 !important;overflow:hidden;   /* 允许被压：卡片矮时先让位给视频 */
    opacity:0;transition:opacity .26s ease !important}
  .video-card.on .vmeta{opacity:1 !important;transition:opacity .38s ease .14s !important}
  .video-card .vmeta h4{font-size:16px !important}
  .video-card .vmeta h4 .en{font-size:11.5px !important}
  .video-card .vmeta .vdesc{font-size:12px !important;margin-top:6px !important}
  .video-card .vmeta .vdesc.en{font-size:11px !important}
  .video-card .vmeta .vtag{font-size:10.5px !important;padding:3px 10px !important;margin-bottom:7px !important}
}

/* ===== 获取与合作：03模块占两列 + 右侧二维码（2026-09-17） ===== */
.s6-mod.s6-mod-wide{grid-column:span 2;flex-direction:row;align-items:center;gap:34px;flex-wrap:wrap}
.s6-mod-wide .s6-mod-main{flex:1 1 320px;min-width:0;display:flex;flex-direction:column}
.s6-mod-wide .s6-mod-qr{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.s6-mod-wide .s6-mod-qr img{width:130px;height:130px;background:#fff;border-radius:14px;padding:7px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.55)}
.s6-mod-wide .s6-qr-cap{font-size:12px;line-height:1.5;color:rgba(255,255,255,.8);max-width:150px}
.s6-mod-wide .s6-qr-cap .en{display:block;font-size:11px;font-style:italic;font-weight:600;
  color:rgba(255,255,255,.56);margin-top:4px;line-height:1.4}
/* 已移除独立「扫码填写问卷」模块，订购咨询占满整行 */
.s6-grid{grid-template-columns:1fr !important}
@media (max-width:760px){
  .s6-mod.s6-mod-wide{grid-column:span 1;flex-direction:column;align-items:stretch;gap:22px}
  .s6-mod-wide .s6-mod-qr{align-self:center}
}

/* ===== 订购咨询右侧：购买渠道（与联系人同款卡片，2026-09-17） ===== */
.s6-grid{grid-template-columns:1fr 1fr !important;gap:24px !important}
.s6-channels .channel-item{align-items:flex-start;margin-bottom:14px}
.s6-channels .channel-item:last-child{margin-bottom:0}
.s6-channels .channel-item .avatar{width:44px;height:44px;font-size:19px;border-radius:12px}
.s6-channels .pname{margin-bottom:5px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.s6-channels .pdetail{line-height:1.6}
.s6-channels .pdetail .en{display:block;margin-top:4px;font-style:italic;color:#8f7f66;font-size:11px}
@media (max-width:760px){
  .s6-grid{grid-template-columns:1fr !important}
}

/* ===== 购买渠道并入订购咨询（2026-09-17） ===== */
.s6-grid{grid-template-columns:1fr !important;gap:24px !important}
.channel-item{align-items:flex-start}
.channel-item .pname{margin-bottom:5px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.channel-item .pdetail{line-height:1.6}
.channel-item .pdetail .en{display:block;margin-top:4px;font-style:italic;color:#8f7f66;font-size:11px}

/* ===== 订购咨询：首条卡片留白 + 购买渠道整块文字框（2026-09-17） ===== */
.contact-person:first-of-type{border-top:none;padding-top:16px !important}
.contact-note{margin-top:16px;padding:15px 17px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.contact-note p{margin:0;font-size:12.5px;line-height:1.75;color:#d8cbb4}
.contact-note p.en{margin-top:6px;font-size:11.5px;font-style:italic;color:#8f7f66;line-height:1.6}

/* ===== 订购咨询：三个信息框（范/高/购买说明）视觉统一（2026-09-17） ===== */
.s6-contact .contact-person{
  padding:15px 17px !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.04) !important;
  margin-bottom:14px;
}
.s6-contact .contact-person:first-of-type{
  border-top:1px solid rgba(255,255,255,.07) !important;
  padding-top:15px !important;
}
.s6-contact .contact-note{
  margin-top:0;
  padding:15px 17px !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.04) !important;
}

/* ===== 订购咨询：宽屏购买说明置于右侧，窄屏回落下方（2026-09-17） ===== */
.s6-contact{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;align-items:start}
.s6-contact > h3{grid-column:1 / -1}
.s6-contact > .contact-person{grid-column:1}
.s6-contact > .contact-note{grid-column:2;grid-row:2 / span 2;margin-top:0;align-self:stretch}
@media (max-width:900px){
  .s6-contact{grid-template-columns:1fr;column-gap:0}
  .s6-contact > .contact-note{grid-column:1;grid-row:auto;margin-top:14px}
}

/* ===== 订购咨询：整块与内部信息卡 hover 微上浮（与「试用/本土改编/版权合作」等模块同款，2026-09-17） ===== */
.s6-contact{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease !important}
@media (hover:hover){
  .s6-contact:hover{transform:translateY(-4px);border-color:rgba(232,163,23,.42);
    box-shadow:0 28px 60px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1)}
  /* 内部信息卡同样位于「订购咨询」卡片内，悬停时外层保持悬停态 */
  .s6-contact .contact-person:hover,
  .s6-contact .contact-note:hover{transform:translateY(-3px);
    border-color:rgba(232,163,23,.38) !important;
    background:rgba(255,255,255,.075) !important;
    box-shadow:0 16px 32px -18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08)}
}
.s6-contact .contact-person,
.s6-contact .contact-note{
  transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease !important;
}

/* ===== 教材体例 1A / 1B–5C 徽标：英文数字同中文加粗变黑 + 与「学习目标」同款 hover（2026-09-17） ===== */
.vol-badge{transition:all .25s ease}
.vol-badge .vdesc span em,
.vol-badge .vdesc em{color:var(--ink);font-style:normal;font-weight:700}
@media (hover:hover){
  .vol-badge:hover{border-color:var(--brand);transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(196,78,58,.15)}
  .vol-badge:hover .vdesc em{color:var(--brand)}
}

/* ===== 等级标准对标图：补全圆角缺失的表格框线 + 悬停动效（2026-09-17） ===== */
/* 框线色 #e7cd96 = rgb(231,205,150)，直接取自两张对标表图片的表格框线像素 */
.level-img-wrap .level-fig img{
  border:2px solid #e7cd96;
  border-radius:14px;
  cursor:zoom-in;
  background:#fff;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
@media (hover:hover){
  .level-img-wrap .level-fig img:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow);
    border-color:#d9b471;
  }
}
.level-fig{margin:0}

/* ===== 03 宽卡：竖排时 flex-basis 不再充当高度 + 标题英文行高（2026-09-17） ===== */
/* 根因：.s6-mod-wide .s6-mod-main{flex:1 1 320px} 在 flex-direction:column 下，
   320px 由「宽度」变成「高度」，把主列撑高约 90px，按钮被 margin-top:auto 顶到底部。 */
@media (max-width:760px){
  .s6-mod.s6-mod-wide .s6-mod-main{flex:0 0 auto !important;min-height:0 !important}
}
/* 模块标题英文行高：1.25 → 1.5，长英文折行时不再局促 */
.s6-mod h3 .en{line-height:1.5 !important}
.s6-mod h3{gap:4px !important}

/* ===== 03 模块：二维码 + 说明文字 整体联动 hover 动效（2026-09-17） ===== */
.s6-mod-wide .s6-mod-qr img{transition:transform .3s ease, box-shadow .3s ease !important}
.s6-mod-wide .s6-qr-cap{transition:transform .3s ease, color .3s ease !important}
.s6-mod-wide .s6-qr-cap .en{transition:color .3s ease !important}
@media (hover:hover){
  /* 二维码 + 说明文字作为一个整体联动：悬停其中任一个，两者同步动，位移统一 -3px */
  .s6-mod-wide .s6-mod-qr:hover img{
    transform:translateY(-3px) scale(1.04);
    box-shadow:0 20px 40px -12px rgba(0,0,0,.72);
  }
  .s6-mod-wide .s6-mod-qr:hover .s6-qr-cap{transform:translateY(-3px);color:#ffdb6b}
  .s6-mod-wide .s6-mod-qr:hover .s6-qr-cap .en{color:var(--sun-soft)}
}

/* ===== 多模态手风琴：锁定容器高度（修正13，2026-09-17）=====
   切换卡片时两张卡同时处于中间宽度，展开卡 16:9 视频随之变矮，
   .video-grid 高度从 582px 塌陷到 365px 再回弹，带来两处文字跳动：
     ① 区块内容垂直居中 → 上方「多模态资源展示」标题跳动约 109px
     ② 收起卡高度随之变化 → 竖条里的编号 / 中文名 / 英文跳动 36~108px
   解法：JS 量出「任意一张卡展开」时的最大高度并锁为 min-height，
   容器高度全程恒定，标题与竖条文字彻底静止（高度锁在 .video-grid 行内样式）。 */
.video-grid{min-height:0}

  /* ==================== 封面：图书展示 ↔ 宣传片 切换（修正21） ==================== */
  .cover-tabs{
    display:inline-flex;gap:3px;padding:4px;margin:0 0 14px;
    border-radius:999px;background:rgba(255,255,255,.72);
    box-shadow:inset 0 0 0 1px rgba(60,30,10,.12),0 4px 14px -8px rgba(60,30,10,.28);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  .cover-tab{
    display:inline-flex;flex-direction:column;align-items:center;gap:1px;
    padding:7px 20px;border:0;border-radius:999px;background:transparent;
    font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.25;
    color:var(--ink-3);cursor:pointer;
    transition:color .28s ease,background .28s ease,box-shadow .28s ease;
  }
  .cover-tab i{font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
  .cover-tab:hover{color:var(--brand);background:rgba(255,255,255,.6)}
  .cover-tab.is-on{color:#fff;background:var(--brand);box-shadow:0 8px 18px -8px rgba(164,51,32,.75)}
  .cover-tab.is-on i{opacity:.82}
  .cover-tab:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

  /* 舞台：padding-top 百分比做宽高比（可平滑过渡，比 aspect-ratio 兼容性更稳） */
  .cover-stage{
    position:relative;width:100%;height:0;padding-top:51.625%;   /* 1600×826 图书封面 */
    border-radius:14px;overflow:hidden;background:#120d09;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    transition:padding-top .58s cubic-bezier(.34,1.2,.4,1);
  }
  .cover-block.is-video .cover-stage{padding-top:56.25%}          /* 16:9 宣传片 */
  .cover-stage>img,.cover-stage>video{
    position:absolute;inset:0;width:100%;height:100%;display:block;
    object-fit:cover;border-radius:14px;
  }
  .cover-stage>img{transition:opacity .4s ease,transform .6s ease}
  .cover-block.is-video .cover-stage>img{opacity:0;transform:scale(1.04)}
  .cover-video{opacity:0;visibility:hidden;background:#000;
    transition:opacity .42s ease .06s,visibility 0s linear .48s}
  .cover-block.is-video .cover-video{opacity:1;visibility:visible;
    transition:opacity .42s ease .1s,visibility 0s}
  /* 视频模式：去掉封面的 3D 倾斜，画面与控件保持水平 */
  .cover-block.is-video .cover-frame,
  .cover-block.is-video .cover-frame:hover{transform:perspective(1400px) rotateY(0deg) rotateX(0deg)}

  /* 圆形播放按钮 */
  .cover-play{
    position:absolute;left:50%;top:50%;z-index:3;
    transform:translate(-50%,-50%);
    display:flex;flex-direction:column;align-items:center;gap:11px;
    padding:0;border:0;background:transparent;cursor:pointer;
    transition:opacity .32s ease,transform .32s ease;
  }
  .cover-play-btn{
    position:relative;display:grid;place-items:center;
    width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.95);
    box-shadow:0 14px 34px -10px rgba(20,10,4,.55),0 2px 6px rgba(20,10,4,.25);
    transition:transform .3s cubic-bezier(.34,1.2,.4,1),background .3s ease;
  }
  .cover-play-btn i{
    width:0;height:0;margin-left:5px;
    border-left:19px solid var(--brand);
    border-top:12px solid transparent;border-bottom:12px solid transparent;
  }
  .cover-play-btn::after{
    content:"";position:absolute;inset:-9px;border-radius:50%;
    border:2px solid rgba(255,255,255,.75);pointer-events:none;
    animation:coverPulse 2.4s ease-out infinite;
  }
  @keyframes coverPulse{
    0%{transform:scale(.92);opacity:.85}
    70%,100%{transform:scale(1.3);opacity:0}
  }
  .cover-play:hover .cover-play-btn{transform:scale(1.09);background:#fff}
  .cover-play:active .cover-play-btn{transform:scale(.97)}
  .cover-play-txt{
    display:inline-flex;flex-direction:column;align-items:center;gap:1px;
    padding:6px 14px;border-radius:999px;color:#fff;
    background:rgba(20,12,6,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.06em;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
  }
  .cover-play-txt i{font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
  .cover-block.is-video .cover-play{opacity:0;transform:translate(-50%,-50%) scale(.86);pointer-events:none}

  /* 返回封面：仅视频模式下出现；悬停封面区域时保持隐藏，鼠标移到按钮上才显形 */
  .cover-back{
    position:absolute;left:10px;top:10px;z-index:4;
    display:inline-flex;flex-direction:column;align-items:center;gap:1px;
    padding:6px 13px;border:0;border-radius:999px;cursor:pointer;
    background:rgba(20,12,6,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    color:#fff;font-family:var(--sans);font-size:11.5px;font-weight:700;line-height:1.25;
    opacity:0;transform:translateY(-6px);pointer-events:none;
    transition:opacity .34s ease,transform .34s ease,background .25s ease;
  }
  .cover-back i{
    font-style:normal;font-size:8px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;opacity:.75;
  }
  .cover-back:hover{background:rgba(20,12,6,.82)}
  /* 只有鼠标真的移到按钮上（或键盘聚焦）才显示；
     .cover-stage:hover 不再触发它 —— 悬停封面也不该冒出按钮。 */
  .cover-block.is-video .cover-back{opacity:0;transform:none;pointer-events:auto}
  .cover-block.is-video .cover-back:hover,
  .cover-block.is-video .cover-back:focus-visible{opacity:1}
  /* 触摸设备没有悬停，按钮常态显示 */
  @media (hover: none){
    .cover-block.is-video .cover-back{opacity:1}
  }

  /* 全屏态：只改 object-fit，不动尺寸/定位 ——
     浏览器的 :fullscreen 默认会设 position:fixed;inset:0，
     若在此处用 width/height !important 覆盖，会导致「进入了全屏但画面没铺开」。
     画面完整显示用 contain（非 16:9 屏幕不裁切）。 */
  .cover-video:fullscreen,.cover-video:-webkit-full-screen{
    object-fit:contain !important;background:#000;
  }

  @media (max-width: 1000px){
    .cover-play-btn{width:56px;height:56px}
    .cover-play-btn i{border-left-width:16px;border-top-width:10px;border-bottom-width:10px}
  }
  @media (prefers-reduced-motion: reduce){
    .cover-stage{transition:none}
    .cover-play-btn::after{animation:none}
  }

  /* ==================== 画廊左右滑动辅助按钮（修正22） ====================
     按钮由 JS 注入，放在 .feature-gallery-wrap（相对定位）里、滚动容器的外面，
     避免被 overflow-x:auto 裁掉。显隐完全由 JS 依据实时溢出状态控制。 */
  .feature-gallery-wrap{position:relative}
  /* 卡片悬停判定：用 opacity 过渡代替 display 切换，才能有淡入淡出。
     @media (hover:hover) 是必需的护栏 —— 触摸设备上 :hover 会「粘住」，
     用户点一下卡片按钮就会一直显示，反倒碍事。 */
  .feature-hoverable .feature-body{transition:box-shadow .35s ease}
  @media (hover: hover){
    .feature-hoverable .feature-body{opacity:0}
    .feature-card:hover .feature-body,
    .feature-card:focus-within .feature-body{opacity:1}
  }
  /* 圆形小按钮：32px。底色取页面的暖米色 --cream 而非品牌橙 ——
     橙色是「行动召唤色」，整页只给主按钮和强调标题，箭头用它就过重了。
     半透 + 毛玻璃悬浮在图片上，保留页面「纸感」，同时借阴影与图片拉开层次。 */
  .gallery-nav{
    position:absolute;top:0;bottom:18px;    /* 高度范围对齐图片带（容器高 218 = 图片 200 + 下内边距 18） */
    margin:auto 0;height:32px;              /* 在这个范围内垂直居中；用 margin 居中，transform 留给按压缩放 */
    width:32px;                             /* 圆形：宽高相等 + 50% 圆角 */
    display:grid;place-items:center;
    padding:0;border:0;border-radius:50%;cursor:pointer;
    background:rgba(255,246,227,.94);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    color:var(--brand);
    box-shadow:0 3px 10px -2px rgba(60,30,10,.32),0 0 0 1px rgba(60,30,10,.10);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .26s ease,visibility 0s linear .26s,
               background .22s ease,color .22s ease,box-shadow .22s ease;
  }
  .gallery-nav.prev{left:8px}
  .gallery-nav.next{right:8px}
  .gallery-nav svg{width:14px;height:14px;display:block}
  .gallery-nav:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
  /* ①「能往这边滑」JS 加 .is-live ② ③ 见下方 */
  .feature-gallery-wrap.has-nav .gallery-nav.is-live{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .26s ease,visibility 0s,
               background .22s ease,color .22s ease,box-shadow .22s ease;
  }
  /* 卡片未悬停时让位：按钮仍在布局里（避免 .is-live 状态抖动），只压暗隐藏 */
  .feature-gallery-wrap.need-hover .gallery-nav.is-live{
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,visibility 0s linear .22s;
  }
  .feature-gallery-wrap.need-hover.hovered .gallery-nav.is-live{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .26s ease,visibility 0s}
  /* 触摸设备没有 hover，兜底：常显 */
  @media (hover: none){
    .feature-gallery-wrap.need-hover .gallery-nav.is-live{opacity:1;visibility:visible;pointer-events:auto}
  }
  .feature-gallery-wrap.has-nav .gallery-nav.is-live:hover{
    background:var(--brand);color:#fff;
    box-shadow:0 4px 14px -2px rgba(196,78,58,.45),0 0 0 1px rgba(196,78,58,.25);
  }
  .gallery-nav:active{transform:scale(.9)}
  /* 触摸设备：既然是手指滑，就不需要箭头了 */
  @media (hover: none){
    .gallery-nav{display:none}
  }
  @media (max-width: 1000px){
    .gallery-nav{width:28px;height:28px}
    .gallery-nav svg{width:12px;height:12px}
    .gallery-nav.prev{left:6px}
    .gallery-nav.next{right:6px}
  }
  @media (prefers-reduced-motion: reduce){
    .gallery-nav{transition:opacity .26s ease,visibility 0s}
  }

/* ==================== 覆盖全站 common.css 对本页的干扰（2026-09-18） ====================
   common.css 由公共片段 _scriptPartial(common_js) 引入，其中 .en{display:none}/.cn{display:block}
   是全站「中英文切换」机制（body[data-lang] 控制）。本页不设 data-lang 且为固定双语展示，
   英文必须始终可见，因此恢复 .en 的元素默认显示（revert = 回到浏览器默认，span 行内/块级元素块级）。
   本文件在 common.css 之后加载，同权重选择器后者生效，故裸 .en 规则即可覆盖；
   CIday 中已有更高权重的 .en display 规则（如 .sec-head h2 .en）不受影响。 */
.en{display:inline}
p.en,figcaption.en{display:block}
/* common.css 给 input/button 指定了微软雅黑；设计稿按钮字体应继承页面字体栈 */
button,input,select,textarea{font-family:inherit}
/* common.css 把 em 重置为非斜体；新闻简介里的英文书名需要斜体（继承 .en 的 italic） */
.news-intro em{font-style:inherit}