/* =========================================================
         一盒学院 Bento Academy — design tokens
         Bento Grid layout + Swiss typographic discipline.
         ONE gap (20px / 12px mobile), ONE radius (28px / 22px mobile).
         ========================================================= */
      :root {
        /* color */
        --paper: #f7f6f2;
        --ink: #14302f;
        --ink-2: rgba(20, 48, 47, 0.76); /* spec .62, raised to pass WCAG AA 4.5:1 on paper and white */
        --jade: #79c7b8;
        --jade-2: #70b9a9;
        --teal: #174f51;
        --gold: #d8a331; /* ONLY for the 新上 badge */
        --card: #ffffff;
        --line: rgba(20, 48, 47, 0.08);

        /* bento geometry */
        --gap: 20px;
        --radius: 28px;
        --pad: 24px;
        --radius-inner: calc(var(--radius) - var(--pad)); /* nested inner radius */
        --container: 1240px;

        /* type */
        --sans: "Inter", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
        --serif: "Noto Serif SC", "Instrument Serif", "Songti SC", serif;
        --latin-serif: "Instrument Serif", "Noto Serif SC", serif;
        --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

        /* motion */
        --ease: cubic-bezier(0.22, 0.75, 0.3, 1);
        --dur: 420ms;

        /* elevation */
        --shadow: 0 1px 2px rgba(20, 48, 47, 0.04), 0 18px 40px -24px rgba(20, 48, 47, 0.28);
        --shadow-lift: 0 2px 4px rgba(20, 48, 47, 0.05), 0 28px 56px -26px rgba(20, 48, 47, 0.34);
      }

      @media (max-width: 700px) {
        :root {
          --gap: 12px;
          --radius: 22px;
          --pad: 18px;
        }
      }

      /* ---------- base ---------- */
      * { box-sizing: border-box; }
      html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
      body {
        margin: 0;
        background: var(--paper);
        color: var(--ink);
        font: 400 16px/1.65 var(--sans);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      img { max-width: 100%; display: block; }
      a { color: inherit; text-decoration: none; }
      h1, h2, h3, p { margin: 0; }
      ul, ol { margin: 0; padding: 0; list-style: none; }
      :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

      /* ---------- shared layout ---------- */
      .container {
        width: 100%;
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: clamp(16px, 4vw, 40px);
      }
      .section { padding-block: clamp(56px, 8vw, 104px); position: relative; }

      /* small mono uppercase kicker label, e.g. "01 / WRITING" */
      .kicker {
        font: 500 12px/1.4 var(--mono);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--ink-2);
      }
      .section__head { margin-bottom: clamp(28px, 4vw, 44px); }
      .section__title {
        margin-top: 14px;
        font: 600 clamp(28px, 4.4vw, 46px)/1.2 var(--serif);
        letter-spacing: -0.01em;
      }

      /* ---------- paper grain + ambient glow ---------- */
      .grain {
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0.05;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
      }
      .glow {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        background: var(--jade);
        opacity: 0.3;
        pointer-events: none;
        z-index: 0;
      }
      /* pointer-follow soft radial light — desktop only */
      .spot { display: none; }
      @media (pointer: fine) {
        .spot {
          display: block;
          position: fixed;
          z-index: 0;
          inset: 0;
          pointer-events: none;
          background: radial-gradient(
            420px circle at var(--mx, 50%) var(--my, 0%),
            rgba(121, 199, 184, 0.18),
            transparent 70%
          );
          transition: background 160ms linear;
        }
      }

      /* =========================================================
         0. Top nav — sticky, glassy paper blur, two tiers
            Tier 1 .signal : 学院信号条 (date · clock · ticker · controls)
            Tier 2 .nav__in: logo + 角色 Dock (9 hand-drawn icons)
         ========================================================= */
      .nav {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(247, 246, 242, 0.76);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        border-bottom: 1px solid var(--line);
      }

      /* ---------- Tier 1: 学院信号条 (thin, mono 12px) ---------- */
      .signal { border-bottom: 1px solid var(--line); font: 500 12px/1 var(--mono); color: var(--ink-2); }
      .signal__in {
        display: flex;
        align-items: center;
        gap: 16px;
        min-height: 44px;
      }
      .signal__left { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; }
      .signal__spark { color: var(--jade-2); }
      .signal__clock {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 0 10px;
        border: 0;
        border-radius: 999px;
        background: none;
        font: inherit;
        color: var(--ink);
        cursor: pointer;
        transition: background var(--dur) var(--ease);
      }
      .signal__clock:hover { background: rgba(121, 199, 184, 0.18); }
      .signal__clock b { font-weight: 500; color: var(--ink-2); }
      .signal__clock time { font-variant-numeric: tabular-nums; }

      /* 学院动态 ticker: items stacked, the active one fades/slides in */
      .ticker { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
      .ticker__label { flex: none; color: var(--teal); }
      .ticker__track { position: relative; flex: 1; min-width: 0; height: 18px; overflow: hidden; }
      .ticker__item {
        position: absolute;
        inset: 0;
        line-height: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--ink);
        opacity: 0;
        transform: translateY(70%);
        transition: opacity 360ms var(--ease), transform 360ms var(--ease);
      }
      .ticker__item.is-on { opacity: 1; transform: none; }
      .ticker__item.is-out { opacity: 0; transform: translateY(-70%); }

      .signal__right { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
      .upd {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        padding: 0 6px 0 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--card);
        color: var(--ink);
        white-space: nowrap;
        transition: background var(--dur) var(--ease);
      }
      .upd:hover { background: rgba(121, 199, 184, 0.18); }
      .upd__badge {
        min-width: 20px;
        height: 20px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        background: var(--teal);
        color: #fff;
      }
      .signal .pills button { min-height: 32px; min-width: 32px; }
      .signal .icon-btn { width: 36px; height: 36px; }
      [data-theme="dark"] .ticker__label { color: var(--jade); }
      @media (max-width: 700px) {
        /* full 44px tap targets on touch screens */
        .upd { min-height: 44px; min-width: 44px; justify-content: center; }
        .signal .icon-btn { width: 44px; height: 44px; }
        .brand { min-width: 44px; justify-content: center; }
      }

      /* ---------- Tier 2: logo + 角色 Dock ---------- */
      .nav__in {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 68px;
      }
      .brand { display: flex; align-items: center; gap: 10px; flex: none; }
      .brand img { width: 44px; height: auto; border-radius: 10px; }

      /* the dock never wraps; on narrow screens it scrolls inside itself */
      .dock {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: 14px 10px 6px; /* top room for the 1.35x magnify */
      }
      .dock::-webkit-scrollbar { display: none; }
      .dock__list { display: flex; width: max-content; margin-inline: auto; gap: 2px; }
      .dock__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: 72px;
        min-height: 44px;
        padding: 2px 2px 4px;
        border-radius: 14px;
        scroll-snap-align: start;
      }
      .dock__ico {
        width: 40px;
        height: 40px;
        object-fit: contain;
        transform-origin: 50% 100%;
        /* spring: overshoots slightly, then settles */
        transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .dock__label {
        font: 500 12px/1.2 var(--sans);
        color: var(--ink-2);
        white-space: nowrap;
        transition: color var(--dur) var(--ease);
      }
      .dock__item:hover .dock__label,
      .dock__item:focus-visible .dock__label { color: var(--ink); }
      /* macOS-dock magnify: hovered 1.35x, both neighbours 1.15x */
      .dock__item:hover .dock__ico,
      .dock__item:focus-visible .dock__ico { transform: scale(1.35); }
      .dock__item:hover + .dock__item .dock__ico,
      .dock__item:has(+ .dock__item:hover) .dock__ico { transform: scale(1.15); }
      .pills {
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 3px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--card);
      }
      .pills a {
        min-width: 34px;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font: 500 12px/1 var(--mono);
        color: var(--ink-2);
      }
      .pills button {
        border: 0;
        background: none;
        cursor: pointer;
        min-width: 34px;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font: 500 12px/1 var(--mono);
        color: var(--ink-2);
      }
      .pills a[aria-current="true"],
      .pills button[aria-pressed="true"] { background: var(--teal); color: #fff; }
      .icon-btn {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
        background: var(--card);
        border-radius: 999px;
        cursor: pointer;
        color: var(--ink);
        transition: background var(--dur) var(--ease);
      }
      .icon-btn:hover { background: rgba(121, 199, 184, 0.18); }
      .nav__burger { display: none; flex: none; }
      /* in-page anchors land below the two-tier sticky header */
      html { scroll-padding-top: 124px; }

      /* ---------- responsive ---------- */
      @media (max-width: 860px) {
        .ticker { display: none; } /* mobile: no ticker */
      }
      @media (max-width: 700px) {
        .nav__burger { display: inline-flex; }
        .nav__in { gap: 8px; }
        .brand img { width: 38px; }
      }
      @media (max-width: 560px) {
        .signal__date { display: none; }
        .upd__text { display: none; }
        .upd { padding: 0 6px; }
      }
      @media (max-width: 480px) {
        .pills { display: none; } /* language moves into the sheet */
      }

      /* reduced motion: no magnify, static ticker */
      @media (prefers-reduced-motion: reduce) {
        .dock__ico { transition: none; transform: none !important; }
        .ticker__item { transition: none; }
      }

      /* mobile sheet: the same 9 roles, with icons */
      .drawer {
        display: none;
        border-top: 1px solid var(--line);
        padding: 8px 0 18px;
      }
      .drawer.is-open { display: block; }
      .drawer a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 2px;
        min-height: 44px;
        font: 500 15px/1.4 var(--sans);
        border-bottom: 1px solid var(--line);
      }
      .drawer a img { width: 32px; height: 32px; object-fit: contain; flex: none; }
      .drawer .pills { display: inline-flex; margin-top: 14px; }

      /* =========================================================
         1. Immersive motion cover (#top-cover)
         A full-viewport video the visitor "scrubs" through:
           desktop → pointer X maps to video.currentTime
           touch   → horizontal drag scrubs
           idle    → time creeps forward at ~0.5× and loops
         Layer stack (bottom → top):
           z0 video · z1 grain + jade glow · z2 paper gradient
           z3 copy · z4 chrome (index, progress, hint, enter)
           z5 loading overlay · cursor ring is fixed above all
         ========================================================= */
      .cover {
        position: relative;
        z-index: 2;
        min-height: 100vh;
        min-height: 100svh;
        overflow: hidden;
        display: flex;
        align-items: center;
        background: var(--paper);
        touch-action: pan-y; /* vertical swipes still scroll; horizontal ones scrub */
        isolation: isolate;
      }
      /* z0 — the scrubbed video; never autoplays, only seeks */
      .cover__video {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
      }
      /* z1 — paper grain + soft jade glow, above the video */
      .cover__grain {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0.09;
        mix-blend-mode: multiply;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
      }
      .cover__glow { z-index: 1; width: 560px; height: 560px; top: -200px; left: -160px; opacity: 0.32; }
      /* z2 — paper → transparent wash so the copy stays readable */
      .cover__wash {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(
          90deg,
          var(--paper) 0%,
          rgba(247, 246, 242, 0.88) 30%,
          rgba(247, 246, 242, 0.4) 52%,
          rgba(247, 246, 242, 0) 70%
        );
      }
      /* z3 — overlay copy on the left */
      .cover__copy {
        position: relative;
        z-index: 3;
        padding-block: 96px 132px;
      }
      .cover__copy > div { max-width: 560px; }
      .cover__kicker { display: inline-flex; align-items: center; gap: 10px; }
      /* compass: the needle swings gently around the centre */
      .cover__compass { width: 20px; height: 20px; flex: none; color: var(--teal); }
      .cover__needle {
        transform-origin: 12px 12px;
        animation: needle 4.8s ease-in-out infinite;
      }
      @keyframes needle {
        0%, 100% { transform: rotate(-18deg); }
        50% { transform: rotate(22deg); }
      }
      .cover__title {
        margin-top: 20px;
        font: 700 clamp(38px, 6.4vw, 80px)/1.1 var(--serif);
        letter-spacing: -0.02em;
      }
      .cover__sub {
        margin-top: 20px;
        max-width: 30ch;
        font-size: clamp(16px, 1.5vw, 19px);
        color: var(--ink-2);
      }
      .cover__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
      .cover__stats {
        margin-top: 32px;
        padding-top: 16px;
        border-top: 1px solid var(--line);
        font: 400 12.5px/1.6 var(--mono);
        letter-spacing: 0.04em;
        color: var(--ink-2);
      }
      /* z4 — chrome: shared frosted-paper pill for anything over the video */
      .cover__chip {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(247, 246, 242, 0.72);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid var(--line);
        font: 500 12px/1.4 var(--mono);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--ink);
      }
      .cover__top {
        position: absolute;
        z-index: 4;
        top: 20px;
        left: 0;
        right: 0;
        pointer-events: none;
      }
      .cover__index b { font-weight: 500; color: var(--teal); }
      .cover__bottom {
        position: absolute;
        z-index: 4;
        left: 0;
        right: 0;
        bottom: 24px;
      }
      .cover__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 14px;
      }
      /* 10-segment progress bar: one segment per chapter */
      .cover__bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
      .cover__bar span {
        height: 3px;
        border-radius: 3px;
        background: rgba(20, 48, 47, 0.18);
        transition: background var(--dur) var(--ease);
      }
      .cover__bar span.is-past { background: rgba(20, 48, 47, 0.42); }
      .cover__bar span.is-on { background: var(--jade); }
      /* hint text swaps for touch screens */
      .cover__hint--touch { display: none; }
      @media (pointer: coarse) {
        .cover__hint--mouse { display: none; }
        .cover__hint--touch { display: inline; }
      }
      .cover__enter { min-height: 44px; letter-spacing: 0.12em; }
      /* z5 — loading overlay, fades out on loadeddata or after 2.5s */
      .cover__loader {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: grid;
        place-items: center;
        background: var(--paper);
        font: 500 13px/1.4 var(--mono);
        letter-spacing: 0.12em;
        color: var(--ink-2);
        transition: opacity 600ms var(--ease), visibility 600ms;
      }
      .cover__loader.is-done { opacity: 0; visibility: hidden; }
      /* custom cursor ring (desktop only, added by JS) */
      .cover.has-cursor, .cover.has-cursor * { cursor: none; }
      .cover__cursor {
        position: fixed;
        z-index: 200;
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        margin: -11px 0 0 -11px;
        border: 1.5px solid var(--jade);
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        transition: opacity 200ms linear, width 260ms var(--ease), height 260ms var(--ease),
          margin 260ms var(--ease), background 260ms var(--ease);
      }
      .cover__cursor.is-on { opacity: 1; }
      .cover__cursor.is-big {
        width: 48px;
        height: 48px;
        margin: -24px 0 0 -24px;
        background: rgba(121, 199, 184, 0.16);
      }
      @media (max-width: 720px) {
        .cover { align-items: flex-end; }
        /* copy sits low on phones, so the wash rises from the bottom */
        .cover__wash {
          background: linear-gradient(
            0deg,
            var(--paper) 0%,
            rgba(247, 246, 242, 0.9) 48%,
            rgba(247, 246, 242, 0) 78%
          );
        }
        .cover__copy { padding-block: 120px 150px; }
        .cover__row { flex-wrap: wrap; }
      }
      .btn {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding: 0 22px;
        border-radius: 999px;
        font: 500 15px/1 var(--sans);
        border: 1px solid transparent;
        transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
          box-shadow var(--dur) var(--ease);
      }
      .btn--primary { background: var(--teal); color: #fff; box-shadow: var(--shadow); }
      .btn--primary:hover { transform: translateY(-2px); background: #10403f; }
      .btn--ghost { border-color: rgba(20, 48, 47, 0.2); color: var(--ink); }
      .btn--ghost:hover { background: rgba(121, 199, 184, 0.18); transform: translateY(-2px); }

      /* =========================================================
         Bento card — the one card shape used everywhere
         1px gradient border (jade→transparent), hover lift,
         diagonal highlight sweep.
         ========================================================= */
      .bento {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--gap);
        align-items: stretch;
      }
      .card {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: var(--pad);
        border-radius: var(--radius);
        background: var(--card);
        color: var(--ink);
        box-shadow: var(--shadow);
        overflow: hidden;
        isolation: isolate;
        transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
      }
      /* 1px gradient border, drawn as an overlay so it never shifts layout */
      .card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(145deg, rgba(121, 199, 184, 0.85), rgba(121, 199, 184, 0) 55%),
          linear-gradient(0deg, var(--line), var(--line));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 3;
      }
      /* diagonal highlight sweep on hover */
      .card::after {
        content: "";
        position: absolute;
        inset: -40%;
        background: linear-gradient(
          100deg,
          transparent 42%,
          rgba(255, 255, 255, 0.5) 50%,
          transparent 58%
        );
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
        z-index: 2;
        transition: transform 900ms var(--ease), opacity 300ms var(--ease);
      }
      .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
      .card:hover::after { transform: translateX(100%); opacity: 1; }

      .card--dark { background: var(--teal); color: #fff; }
      .card--dark .kicker, .card--dark .card__line, .card--dark .card__text { color: rgba(255, 255, 255, 0.72); }
      .card--jade { background: var(--jade); color: var(--teal); }

      .card__title { font: 600 clamp(19px, 2vw, 23px)/1.3 var(--serif); letter-spacing: -0.01em; }
      .card__text { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
      .card__line {
        margin-top: 14px;
        font: italic 400 clamp(20px, 2.6vw, 30px)/1.35 var(--latin-serif);
        color: rgba(255, 255, 255, 0.92);
      }
      .card__count {
        font: 500 clamp(34px, 4.6vw, 54px)/1 var(--mono);
        letter-spacing: -0.03em;
      }
      .card__unit { margin-top: 6px; font: 400 12px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
      .card__spacer { flex: 1; min-height: 16px; }
      .card__link {
        margin-top: 16px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font: 500 13.5px/1 var(--mono);
        letter-spacing: 0.04em;
        color: inherit;
      }
      .card__link { min-height: 44px; min-width: 44px; margin-top: 8px; }
      .brand { min-height: 44px; }
      .drawer .pills a,
      .drawer .pills button { min-width: 44px; min-height: 44px; }
      .card:hover .card__link { gap: 10px; }
      .card__media {
        margin: 16px calc(var(--pad) * -1) calc(var(--pad) * -1);
        overflow: hidden;
      }
      .card__media img { width: 100%; height: 100%; object-fit: cover; }

      /* bento spans */
      .s2x2 { grid-column: span 2; grid-row: span 2; }
      .s2x1 { grid-column: span 2; }
      .s1x2 { grid-row: span 2; }
      /* 3-languages card: 13 cells never fill a 4-col grid evenly, so on desktop
         this card closes the box as a slim full-width strip (no holes). */
      .s-lang { grid-column: span 4; flex-direction: row; align-items: baseline; gap: 16px; }
      .bento { grid-auto-flow: row dense; }

      /* tablet: 3 columns → hero / learn+med / course+ent+med / lab+lang */
      @media (max-width: 1040px) {
        .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .s2x2 { grid-column: span 3; grid-row: span 1; }
        .s-lang { grid-column: span 1; flex-direction: column; align-items: stretch; gap: 0; }
      }
      /* mobile: 2 columns, hero card spans 2, tall card becomes 2×1 */
      @media (max-width: 700px) {
        .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .s2x2 { grid-column: span 2; grid-row: span 1; }
        .s1x2 { grid-column: span 2; grid-row: span 1; }
        .s-lang { grid-column: span 2; }
      }

      /* ---------- 2×2 workflow hero card internals ---------- */
      .flow {
        margin-top: 22px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        position: relative;
      }
      /* subtle animated line connecting the 4 steps */
      .flow::before {
        content: "";
        position: absolute;
        left: 4px;
        right: 4px;
        top: 7px;
        height: 1px;
        background: linear-gradient(90deg, var(--jade), rgba(121, 199, 184, 0.15));
        transform-origin: left;
        animation: flowline 3.6s var(--ease) infinite;
      }
      @keyframes flowline {
        0% { transform: scaleX(0); opacity: 0.2; }
        45% { transform: scaleX(1); opacity: 1; }
        100% { transform: scaleX(1); opacity: 0.35; }
      }
      .flow li { position: relative; padding-top: 22px; }
      .flow li::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 0;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--jade);
      }
      .flow b { display: block; font: 500 12px/1.4 var(--mono); color: var(--jade); letter-spacing: 0.08em; }
      .flow span { font-size: 13.5px; color: rgba(255, 255, 255, 0.86); }
      @media (max-width: 560px) {
        .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .flow::before { display: none; }
      }

      /* stacked decorative cover thumbnails (学习中心) */
      .stack { position: relative; width: 120px; height: 86px; flex: none; }
      .stack img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
      }
      .stack span {
        position: absolute;
        inset: 0;
        border-radius: 12px;
        background: rgba(20, 48, 47, 0.08);
        border: 1px solid var(--line);
      }
      .stack span:nth-child(1) { transform: translate(14px, -10px) rotate(5deg); }
      .stack span:nth-child(2) { transform: translate(7px, -5px) rotate(2.5deg); }
      .row-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }

      /* =========================================================
         3. 本周精选
         ========================================================= */
      .feat {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--gap);
      }
      .feat__large { grid-column: span 2; grid-row: span 2; }
      .feat__side { grid-column: span 2; }
      @media (max-width: 700px) {
        .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .feat__large, .feat__side { grid-column: span 2; grid-row: span 1; }
      }
      .feat__cover { margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 18px; position: relative; }
      .feat__cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
      .feat__side .feat__cover img { aspect-ratio: 16 / 7; }
      .badge {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 4;
        display: inline-flex;
        align-items: center;
        padding: 5px 11px;
        border-radius: 999px;
        background: var(--gold);
        color: #2a1c00;
        font: 500 12px/1 var(--mono);
        letter-spacing: 0.1em;
      }
      .feat__meta {
        font: 400 12px/1.4 var(--mono);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink-2);
      }
      .feat__title { margin-top: 10px; font: 600 clamp(20px, 2.3vw, 27px)/1.3 var(--serif); }
      .feat__side .feat__title { font-size: clamp(18px, 2vw, 21px); }
      .more-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin-top: 24px;
        font: 500 14px/1 var(--mono);
        letter-spacing: 0.06em;
        border-bottom: 1px solid var(--line);
      }
      .more-link:hover { border-color: var(--teal); }

      /* =========================================================
         4. Principles — Swiss three columns, thin mono numerals
         ========================================================= */
      .pr__top {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: clamp(24px, 4vw, 56px);
      }
      .section__title em {
        font-family: var(--latin-serif);
        font-style: italic;
        font-weight: 400;
        color: var(--teal);
      }
      .pr__img {
        flex: none;
        width: clamp(180px, 20vw, 260px);
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--radius);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
      }
      .pr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gap);
      }
      .pr li {
        padding-top: 18px;
        border-top: 1px solid var(--ink); /* the hairline rule above each column */
      }
      .pr__num {
        display: block;
        font: 200 clamp(64px, 9vw, 128px)/1 var(--mono);
        letter-spacing: -0.04em;
        color: var(--ink);
      }
      .pr h3 { margin-top: 18px; font: 600 clamp(19px, 2vw, 23px)/1.3 var(--serif); }
      .pr p { margin-top: 8px; max-width: 26ch; font-size: 15px; color: var(--ink-2); }
      @media (max-width: 700px) {
        .pr__img { display: none; } /* safety.webp hidden on mobile */
        .pr { grid-template-columns: minmax(0, 1fr); gap: 36px; }
        .pr__num { font-size: 72px; }
      }

      /* =========================================================
         5. Closing bento — same 4-col grid, gap and radius
         ========================================================= */
      .s4x1 { grid-column: 1 / -1; }
      .about__me { flex: 1; display: flex; gap: clamp(18px, 3vw, 32px); align-items: stretch; }
      .about__me > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
      .monogram {
        flex: none;
        align-self: flex-start;
        font: italic 400 clamp(88px, 11vw, 150px)/0.85 var(--latin-serif);
        color: var(--jade-2);
      }
      .about__role { margin-top: 6px; font: 400 12px/1.5 var(--mono); letter-spacing: 0.1em; color: var(--ink-2); }
      .about__fb { width: 96px; height: auto; border-radius: 12px; flex: none; }
      .card--jade .card__title { color: var(--teal); }
      .card--jade .btn--primary { min-height: 44px; padding: 0 18px; font-size: 14px; }
      .card--dark .card__title { color: #fff; }
      .about__slim { flex-direction: row; align-items: baseline; gap: 12px 28px; flex-wrap: wrap; }
      .about__slim .card__text { margin-top: 0; flex: 1 1 320px; }
      /* tablet + mobile: 2 columns, no holes */
      @media (max-width: 1040px) {
        .bento--about { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .bento--about .s2x1 { grid-column: span 2; }
      }
      @media (max-width: 560px) {
        .bento--about > * { grid-column: span 2; }
      }

      /* =========================================================
         6. Footer — paper, hairline top, animated ECG line
         ========================================================= */
      .foot {
        position: relative;
        z-index: 2;
        margin-top: clamp(40px, 6vw, 72px);
        background: var(--paper);
        border-top: 1px solid var(--line);
        padding-block: clamp(48px, 6vw, 72px) 28px;
      }
      .ecg {
        position: absolute;
        left: 0;
        top: -20px;
        width: 100%;
        height: 40px;
        overflow: visible;
        pointer-events: none;
      }
      .ecg path {
        fill: none;
        stroke: var(--jade);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1 1; /* pathLength="1": one dash = the whole line */
        stroke-dashoffset: 0; /* fully drawn when motion is off */
        animation: ecg 6s linear infinite;
      }
      @keyframes ecg {
        0% { stroke-dashoffset: 1; }
        55% { stroke-dashoffset: 0; }
        100% { stroke-dashoffset: -1; }
      }
      .foot__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
        gap: clamp(28px, 4vw, 56px);
      }
      .foot__brand { font: 600 17px/1.3 var(--sans); }
      .foot__tag { margin-top: 10px; font: italic 400 20px/1.4 var(--latin-serif); color: var(--ink-2); }
      .foot__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
      .foot__links a {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: 14.5px;
        border-bottom: 1px solid var(--line);
        transition: color var(--dur) var(--ease);
      }
      .foot__links a:hover { color: var(--jade-2); }
      .foot__poster { margin: 0; text-align: center; }
      .foot__poster img {
        width: 104px;
        height: auto;
        border-radius: 12px;
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
      }
      .foot__poster figcaption { margin-top: 8px; font: 400 12px/1.4 var(--mono); letter-spacing: 0.1em; color: var(--ink-2); }
      .foot__bottom {
        margin-top: clamp(32px, 4vw, 48px);
        padding-top: 18px;
        border-top: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
      }
      .foot__top { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px/1 var(--mono); letter-spacing: 0.06em; }
      .foot .pills { display: inline-flex; } /* footer keeps its switch on small phones */
      .foot .pills button { min-width: 44px; min-height: 44px; }
      @media (max-width: 880px) {
        .foot__grid { grid-template-columns: minmax(0, 1fr) auto; }
        .foot__grid > :first-child { grid-column: 1 / -1; }
      }
      @media (max-width: 480px) {
        .foot__grid { grid-template-columns: minmax(0, 1fr); }
        .foot__poster { text-align: left; }
      }

      /* =========================================================
         Dark mode — same structure, swapped tokens
         ========================================================= */
      [data-theme="dark"] {
        color-scheme: dark;
        --paper: #0b2324;
        --card: #10302f;
        --ink: #e9f1ee;
        --ink-2: rgba(233, 241, 238, 0.74);
        --line: rgba(255, 255, 255, 0.08);
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 18px 40px -24px rgba(0, 0, 0, 0.6);
        --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.25), 0 28px 56px -26px rgba(0, 0, 0, 0.7);
      }
      [data-theme="dark"] .nav { background: rgba(11, 35, 36, 0.76); }
      [data-theme="dark"] :focus-visible { outline-color: var(--jade); }
      [data-theme="dark"] .btn--ghost { border-color: rgba(233, 241, 238, 0.24); }
      [data-theme="dark"] .card::after { background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.07) 50%, transparent 58%); }
      [data-theme="dark"] .card--dark { background: var(--teal); } /* hero card stays teal-dark */
      [data-theme="dark"] .card--jade { color: var(--teal); }
      [data-theme="dark"] .card--jade .card__text { color: rgba(23, 79, 81, 0.86); }
      [data-theme="dark"] .section__title em { color: var(--jade); }
      /* cover: the wash, chips and loader switch to the dark paper */
      [data-theme="dark"] .cover__wash {
        background: linear-gradient(90deg, var(--paper) 0%, rgba(11, 35, 36, 0.88) 30%, rgba(11, 35, 36, 0.4) 52%, rgba(11, 35, 36, 0) 70%);
      }
      @media (max-width: 720px) {
        [data-theme="dark"] .cover__wash {
          background: linear-gradient(0deg, var(--paper) 0%, rgba(11, 35, 36, 0.9) 48%, rgba(11, 35, 36, 0) 78%);
        }
      }
      [data-theme="dark"] .cover__chip { background: rgba(11, 35, 36, 0.72); }
      [data-theme="dark"] .cover__grain { mix-blend-mode: screen; opacity: 0.06; }
      [data-theme="dark"] .cover__compass,
      [data-theme="dark"] .cover__index b { color: var(--jade); }
      [data-theme="dark"] .cover__bar span { background: rgba(233, 241, 238, 0.2); }
      [data-theme="dark"] .cover__bar span.is-past { background: rgba(233, 241, 238, 0.45); }
      [data-theme="dark"] .cover__bar span.is-on { background: var(--jade); }
      [data-theme="dark"] .more-link:hover { border-color: var(--jade); }

      /* =========================================================
         x-film — 「24 秒认识 OiOi」 cinema block (#film)
         Full-bleed dark teal stage; top/bottom fade into --paper.
         While playing, body.x-film-playing dims everything else.
         ========================================================= */
      .x-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
      .x-film {
        position: relative;
        z-index: 3;
        padding-block: clamp(110px, 12vw, 170px);
      }
      /* while dimmed, the faded edges melt into the overlay instead of the paper */
      body.x-film-playing .x-film {
        z-index: 61;
        background: linear-gradient(180deg, rgba(7, 26, 27, 0) 0, #071a1b clamp(80px, 10vw, 140px), #071a1b calc(100% - clamp(80px, 10vw, 140px)), rgba(7, 26, 27, 0) 100%);
      }
      .x-film {
        color: #fff;
        text-align: center;
        background: linear-gradient(180deg, var(--paper) 0, #071a1b clamp(80px, 10vw, 140px), #071a1b calc(100% - clamp(80px, 10vw, 140px)), var(--paper) 100%);
      }
      .x-film .kicker { color: rgba(255, 255, 255, 0.72); }
      .x-film__title {
        margin-top: 14px;
        font: 600 clamp(28px, 4.4vw, 46px)/1.2 var(--serif);
        letter-spacing: -0.01em;
        color: #fff;
      }
      .x-film__line { margin: 12px auto 0; max-width: 40em; font-size: 15px; color: rgba(255, 255, 255, 0.78); }
      .x-film__frame {
        position: relative;
        max-width: 1100px;
        margin: clamp(28px, 4vw, 44px) auto 0;
        aspect-ratio: 16 / 9;
        border-radius: 28px;
        overflow: hidden;
        background: #000;
        box-shadow: 0 0 0 1px rgba(121, 199, 184, 0.16), 0 30px 70px -30px rgba(0, 0, 0, 0.8);
        transition: box-shadow 600ms var(--ease);
      }
      .x-film__frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
      .x-film__play {
        position: absolute;
        top: 50%;
        left: 50%;
        width: clamp(72px, 9vw, 104px);
        height: clamp(72px, 9vw, 104px);
        transform: translate(-50%, -50%);
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.16);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        color: #fff;
        cursor: pointer;
        box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
        transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
      }
      .x-film__play:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(255, 255, 255, 0.26); }
      .x-film__play svg { width: 34%; height: 34%; margin-left: 6%; }
      .x-film__play[hidden] { display: none; }
      .x-film__ctrls { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
      .x-film__btn {
        min-height: 44px;
        padding: 0 18px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.24);
        background: #10292a;
        color: #fff;
        font: 500 13px/1 var(--mono);
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: background var(--dur) var(--ease);
      }
      .x-film__btn:hover { background: #1d4545; }
      /* full-screen frame: native :fullscreen, or a fixed fallback when the API is refused */
      .x-film__frame.is-max {
        position: fixed;
        inset: 0;
        z-index: 120;
        max-width: none;
        margin: 0;
        aspect-ratio: auto;
        border-radius: 0;
      }
      .x-film__frame.is-max video { object-fit: contain; }
      .x-film:has(.is-max) { z-index: 120; }
      .x-film__frame.is-max + .x-film__ctrls { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 121; margin: 0; }
      .x-film :focus-visible { outline-color: var(--jade); }
      /* dim the rest of the page while the film plays */
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 60;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 600ms var(--ease), visibility 0s linear 600ms;
      }
      body.x-film-playing::after { opacity: 1; visibility: visible; transition: opacity 600ms var(--ease); }
      body.x-film-playing .x-film__frame {
        box-shadow: 0 0 0 1px rgba(121, 199, 184, 0.5), 0 0 90px -12px rgba(121, 199, 184, 0.55);
        animation: x-film-glow 4s ease-in-out infinite;
      }
      @keyframes x-film-glow {
        0%, 100% { box-shadow: 0 0 0 1px rgba(121, 199, 184, 0.5), 0 0 90px -12px rgba(121, 199, 184, 0.55); }
        50% { box-shadow: 0 0 0 1px rgba(121, 199, 184, 0.65), 0 0 120px -8px rgba(121, 199, 184, 0.7); }
      }
      @media (max-width: 700px) {
        .x-film__frame { border-radius: 22px; }
      }

      /* ---------- writing-workflow card: step sequence + demo modal ---------- */
      .flow::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 6px;
        height: 3px;
        border-radius: 3px;
        width: calc((100% + 12px) * var(--x-step, 0) / 4);
        background: linear-gradient(90deg, rgba(121, 199, 184, 0.2), var(--jade));
        box-shadow: 0 0 10px rgba(121, 199, 184, 0.7);
        opacity: 0;
        transition: width 700ms var(--ease), opacity 400ms var(--ease);
        pointer-events: none;
      }
      .flow.x-run::after { opacity: 1; }
      .flow li::before { transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); }
      .flow li span, .flow li b { transition: color 400ms var(--ease); }
      .flow li.x-on::before { transform: scale(1.45); box-shadow: 0 0 0 4px rgba(121, 199, 184, 0.25), 0 0 14px rgba(121, 199, 184, 0.9); }
      .flow li.x-on span { color: #fff; }
      .flow li.x-on b { color: #bff0e5; }
      @media (max-width: 560px) { .flow::after { display: none; } }
      .x-card-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
      button.card__link { border: 0; background: none; padding: 0; cursor: pointer; }

      .x-modal {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: grid;
        place-items: center;
        padding: clamp(16px, 4vw, 40px);
      }
      .x-modal[hidden] { display: none; }
      .x-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 16, 17, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
      .x-modal__panel {
        position: relative;
        width: min(100%, 1000px);
        padding: var(--pad);
        border-radius: var(--radius);
        background: var(--teal);
        color: #fff;
        box-shadow: var(--shadow-lift);
      }
      .x-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
      .x-modal__title { font: 600 clamp(18px, 2vw, 22px)/1.3 var(--serif); }
      .x-modal__close {
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.24);
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
      }
      .x-modal__close:hover { background: rgba(121, 199, 184, 0.22); }
      .x-modal__video { aspect-ratio: 16 / 9; border-radius: var(--radius-inner); overflow: hidden; background: #000; }
      .x-modal__video video { display: block; width: 100%; height: 100%; }
      .x-modal :focus-visible { outline-color: var(--jade); }
      body.x-modal-open { overflow: hidden; }

      @media (prefers-reduced-motion: reduce) {
        body.x-film-playing .x-film__frame { animation: none; }
        .flow::after { display: none; }
      }

      /* =========================================================
         x-shelf — 「探索架」 (#shelf)
         Tabs (线上娱乐 / 医疗学习 / 课件馆) + filter chips + one
         horizontal scroll-snap rail of .card tiles. The rail scrolls
         inside itself; edge fades and the progress line follow it.
         ========================================================= */
      .x-shelf__sub { margin-top: 12px; max-width: 40em; font-size: 15px; color: var(--ink-2); }
      .x-shelf__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
      .x-shelf__tabs {
        display: flex;
        gap: 2px;
        max-width: 100%;
        padding: 3px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--card);
        overflow-x: auto;
        scrollbar-width: none;
      }
      .x-shelf__tabs::-webkit-scrollbar { display: none; }
      .x-shelf__tab {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 16px;
        border: 0;
        border-radius: 999px;
        background: none;
        color: var(--ink-2);
        font: 500 14.5px/1 var(--sans);
        white-space: nowrap;
        cursor: pointer;
        transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
      }
      .x-shelf__tab:hover { color: var(--ink); background: rgba(121, 199, 184, 0.18); }
      .x-shelf__tab[aria-selected="true"] { background: var(--teal); color: #fff; }
      .x-shelf__n { font: 500 12px/1 var(--mono); opacity: 0.85; }
      .x-shelf__nav { display: flex; gap: 8px; margin-left: auto; }
      .x-shelf__arrow {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: var(--card);
        color: var(--ink);
        font: 500 16px/1 var(--mono);
        box-shadow: var(--shadow);
        cursor: pointer;
        transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease);
      }
      .x-shelf__arrow:hover:not(:disabled) { background: rgba(121, 199, 184, 0.18); transform: translateY(-2px); }
      .x-shelf__arrow:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
      .x-shelf__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
      .x-shelf__chips[hidden] { display: none; }
      .x-shelf__chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: none;
        color: var(--ink-2);
        font: 500 13.5px/1 var(--sans);
        cursor: pointer;
        transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
      }
      .x-shelf__chip:hover { color: var(--ink); background: rgba(121, 199, 184, 0.12); }
      .x-shelf__chip[aria-pressed="true"] { border-color: var(--teal); background: rgba(121, 199, 184, 0.18); color: var(--teal); }
      [data-theme="dark"] .x-shelf__chip[aria-pressed="true"] { border-color: var(--jade); color: var(--jade); }
      .x-shelf__panel { position: relative; margin-top: 20px; }
      .x-shelf__rail {
        display: flex;
        gap: var(--gap);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 4px;
        scrollbar-width: none;
        /* room for the hover lift + shadow, cancelled by the negative margin */
        padding: 10px 4px 26px;
        margin: -10px -4px -18px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);
        transition: opacity 220ms var(--ease);
      }
      .x-shelf__rail::-webkit-scrollbar { display: none; }
      .x-shelf__rail.is-fading { opacity: 0; }
      .x-shelf__card { flex: 0 0 300px; scroll-snap-align: start; }
      .x-shelf__card:focus-visible { outline-offset: -3px; }
      @media (max-width: 700px) {
        .x-shelf__card { flex-basis: 78vw; }
      }
      .x-shelf__cover {
        position: relative;
        margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 16px;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--line);
      }
      .x-shelf__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
      .x-shelf__card:hover .x-shelf__cover img { transform: scale(1.04); }
      /* typographic cover for svg-icon or missing images */
      .x-shelf__type {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 18px 20px;
        background: radial-gradient(120% 90% at 88% 8%, rgba(121, 199, 184, 0.95), rgba(121, 199, 184, 0) 60%),
          linear-gradient(150deg, var(--jade) 0%, var(--teal) 80%);
        background-color: var(--teal);
        color: #fff;
      }
      .x-shelf__mod { font: 500 12px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); }
      .x-shelf__ini { font: 700 clamp(56px, 7vw, 76px)/1 var(--serif); letter-spacing: -0.02em; }
      .x-shelf__meta {
        font: 400 12px/1.5 var(--mono);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .x-shelf__title,
      .x-shelf__desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .x-shelf__title { margin-top: 8px; font: 600 18px/1.35 var(--serif); letter-spacing: -0.01em; }
      .x-shelf__desc { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
      /* last card: 查看全部 → */
      .x-shelf__all { justify-content: flex-end; min-height: 260px; }
      .x-shelf__all .kicker { color: rgba(255, 255, 255, 0.72); }
      .x-shelf__all .x-shelf__title { margin-top: 12px; font-size: clamp(24px, 2.6vw, 30px); color: #fff; }
      .x-shelf__all .x-shelf__path { margin-top: 10px; font: 400 12px/1.4 var(--mono); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.72); }
      .x-shelf__progress { height: 2px; margin-top: 14px; border-radius: 2px; background: var(--line); overflow: hidden; }
      .x-shelf__progress span {
        display: block;
        height: 100%;
        background: var(--jade-2);
        transform-origin: left center;
        transform: scaleX(var(--p, 0));
        transition: transform 160ms linear;
      }

      /* =========================================================
         x-music — floating background-music pill (bottom-right)
         z-index 40: under the nav (50), the film dimmer (60), the
         modal (100) and the fullscreen film controls (121).
         Phones: collapses to a round ♫ button.
         ========================================================= */
      .x-music {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 14px 4px 4px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(247, 246, 242, 0.76);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        box-shadow: var(--shadow-lift);
        color: var(--ink);
      }
      [data-theme="dark"] .x-music { background: rgba(11, 35, 36, 0.76); }
      .x-music__toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 0 10px 0 0;
        border: 0;
        border-radius: 999px;
        background: none;
        color: inherit;
        text-align: left;
        cursor: pointer;
      }
      .x-music__icon {
        flex: none;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--teal);
        color: #fff;
        font-size: 17px;
        transition: transform var(--dur) var(--ease);
      }
      .x-music__toggle:hover .x-music__icon { transform: scale(1.06); }
      .x-music__text { display: flex; flex-direction: column; gap: 3px; }
      .x-music__track { font: 500 13px/1.2 var(--sans); white-space: nowrap; }
      .x-music__status { font: 400 12px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--ink-2); white-space: nowrap; }
      .x-music__vol { display: flex; align-items: center; min-height: 44px; }
      .x-music__vol input { width: 84px; accent-color: var(--teal); cursor: pointer; }
      [data-theme="dark"] .x-music__vol input { accent-color: var(--jade); }
      /* tiny equalizer: shown while playing; static bars under reduced motion */
      .x-music__eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
      .x-music__eq i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; }
      .x-music__eq i:nth-child(1) { transform: scaleY(0.55); animation: x-eq 760ms ease-in-out infinite alternate; }
      .x-music__eq i:nth-child(2) { transform: scaleY(0.95); animation: x-eq 620ms ease-in-out -200ms infinite alternate; }
      .x-music__eq i:nth-child(3) { transform: scaleY(0.7); animation: x-eq 880ms ease-in-out -420ms infinite alternate; }
      @keyframes x-eq {
        0% { transform: scaleY(0.25); }
        100% { transform: scaleY(1); }
      }
      .x-music.is-playing .x-music__note { display: none; }
      .x-music.is-playing .x-music__eq { display: flex; }
      @media (max-width: 700px) {
        .x-music { padding: 4px; }
        .x-music__text,
        .x-music__vol { display: none; }
        .x-music__toggle { padding: 0; }
        .x-music__icon { width: 44px; height: 44px; }
      }
      /* keep the footer's last row clear of the floating pill */
      .foot { padding-bottom: 92px; }

      /* =========================================================
         x-prints — 「OiOi 足迹」 placeholder in the footer
         ========================================================= */
      .x-prints {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 28px;
        margin-top: clamp(28px, 4vw, 40px);
        padding: 16px 20px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--card);
      }
      .x-prints__label { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--sans); }
      .x-prints__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--jade); }
      .x-prints__stats { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 400 12px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--ink-2); }
      .x-prints__stats b { margin-left: 6px; font-weight: 500; color: var(--ink); }

      /* ---------- staggered fade-up reveal ---------- */
      .reveal { opacity: 0; transform: translateY(18px); }
      .reveal.is-in {
        opacity: 1;
        transform: none;
        transition: opacity 700ms var(--ease), transform 700ms var(--ease);
        transition-delay: var(--d, 0ms);
      }

      /* ---------- reduced motion: disable all motion ---------- */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation: none !important;
          transition: none !important;
        }
        html { scroll-behavior: auto; }
        .reveal { opacity: 1; transform: none; }
        .cover__cursor { display: none; } /* cover: poster only, no cursor */
        .spot { display: none; }
        .ecg path { stroke-dashoffset: 0; }
      }