:root {
  --bg: #ece4d5;
  --panel: rgba(252, 247, 239, 0.76);
  --panel-strong: rgba(255, 252, 247, 0.88);
  --ink: #18243a;
  --wordmark-ink: var(--ink);
  --muted: #586377; /* AA: 4.5:1 on --bg (was #71809a, 3.16:1) */
  --line: rgba(24, 36, 58, 0.08);
  /* 晨光强调色 — OKLCH 感知对齐：统一 L≈58.5%（暖色 amber 抬到 68.5%）、C≈0.13，保留各自色相 */
  --blue: oklch(58.5% 0.132 267.7);
  --green: oklch(58.5% 0.112 173.4);
  --amber: oklch(68.5% 0.132 76.0);
  --violet: oklch(58.5% 0.132 278.4);
  --rose: oklch(58.5% 0.132 8.7);
  /* 工具页日光七色：赤 橙 黄 绿 青 蓝 紫。 */
  --spectrum-red: oklch(58.5% 0.132 20.0);
  --spectrum-orange: oklch(64.5% 0.132 50.0);
  --spectrum-yellow: oklch(69.5% 0.126 92.0);
  --spectrum-green: oklch(58.5% 0.112 137.4);
  --spectrum-cyan: oklch(58.5% 0.118 190.0);
  --spectrum-blue: oklch(58.5% 0.132 267.7);
  --spectrum-violet: oklch(58.5% 0.132 298.0);
  /* semantic roles — alias the spectral palette so status/accent/focus theme automatically */
  --accent: var(--blue);
  --success: var(--green);
  --warning: var(--amber);
  --error: var(--rose);
  --info: var(--blue);
  /* focus ring — single source of truth for keyboard focus across all surfaces */
  --focus: var(--blue);
  --focus-ring-width: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--focus);
  /* type-weight ladder — "越大越细": large serif stays light, small functional text stays heavy */
  --weight-display: 360;
  --weight-title: 440;
  /* layout — airy shell cap + reading measures */
  --shell-max: 1360px;
  --measure: 62ch;
  --measure-prose: var(--measure);
  --measure-ui: 52ch;
  --measure-card: 36ch;
  --measure-compact: 28ch;
  /* spacing scale — strict 8px rhythm for layout spacing. Micro offsets stay literal or semantic. */
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-112: 112px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --shadow: 0 24px 80px rgba(19, 30, 47, 0.12);
  --bg-gradient: radial-gradient(circle at 12% 20%, rgba(62, 99, 255, 0.12), transparent 22%), radial-gradient(circle at 87% 14%, rgba(213, 154, 57, 0.14), transparent 26%), linear-gradient(180deg, #f0e9dd 0%, #e6ddcc 100%);
  --hero-bg: radial-gradient(circle at 78% 18%, rgba(62, 99, 255, 0.08), transparent 22%), linear-gradient(135deg, rgba(255, 251, 245, 0.94), rgba(252, 246, 237, 0.76));
  --text-gradient: linear-gradient(135deg, #d37c86 0%, #879bc9 50%, #76a495 100%);
  /* 强调色已转 OKLCH：光晕同步成新色（amber/rose/blue 的发光态），透明度比原来高、比首版收一档 */
  --hover-spectral-glow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 5px 1px rgba(255, 255, 255, 0.9),
    0 0 15px 3px rgba(214, 150, 60, 0.5),
    0 5px 22px 5px rgba(196, 92, 116, 0.42),
    0 9px 34px 9px rgba(104, 131, 214, 0.32);
  --hero-panel-bg:
    radial-gradient(circle at 85% 15%, rgba(230, 180, 170, 0.28), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(200, 210, 230, 0.22), transparent 50%),
    radial-gradient(circle at 50% 40%, rgba(240, 220, 200, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(252, 248, 243, 0.95), rgba(245, 240, 232, 0.85));
  --btn-grad1: #1c2740;
  --btn-grad2: #131d30;
  --api-shell-bar-bg: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62));
  --api-shell-bar-border: color-mix(in oklch, var(--ink) 8%, transparent);
  --api-shell-bar-shadow: 0 10px 24px rgba(24, 36, 58, 0.07), inset 0 1px 0 rgba(255,255,255,0.62);
  --api-sidebar-bg: radial-gradient(circle at top left, rgba(96, 122, 255, 0.18), transparent 38%), linear-gradient(180deg, rgba(17, 28, 48, 0.94), rgba(14, 23, 39, 0.92));
  --api-sidebar-fg: rgba(255, 252, 248, 0.96);
  --api-sidebar-muted: rgba(236, 228, 218, 0.72);
  --api-sidebar-border: rgba(255, 255, 255, 0.08);
  --api-sidebar-shadow: 0 24px 50px rgba(16, 24, 40, 0.22), inset 0 1px 0 rgba(255,255,255,0.08);
  --api-sidebar-card-bg: rgba(255, 255, 255, 0.045);
  --api-sidebar-card-hover: rgba(255, 255, 255, 0.08);
  --api-sidebar-card-border: rgba(255,255,255,0.08);
  --api-sidebar-card-hover-border: rgba(255,255,255,0.18);
  --api-sidebar-card-selected-bg: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.06)), rgba(50, 76, 186, 0.26);
  --api-sidebar-card-selected-border: rgba(96, 122, 255, 0.95);
  --api-sidebar-card-selected-shadow: inset 0 0 0 1px rgba(150, 175, 255, 0.18), 0 10px 26px rgba(43, 73, 179, 0.18);
  --api-sidebar-scroll: rgba(255,255,255,0.16);
  --api-workspace-bg: linear-gradient(180deg, rgba(255,252,247,0.88), rgba(255,251,245,0.82));
  --api-workspace-border: rgba(255,255,255,0.7);
  --api-workspace-shadow: 0 24px 56px rgba(24, 36, 58, 0.1), inset 0 1px 0 rgba(255,255,255,0.74);
  --api-binding-panel-bg: radial-gradient(circle at top left, rgba(96, 122, 255, 0.2), transparent 42%), linear-gradient(180deg, rgba(29, 45, 78, 0.9), rgba(22, 35, 64, 0.86));
  --api-binding-panel-border: rgba(255,255,255,0.12);
  --api-binding-panel-shadow: 0 22px 44px rgba(16, 24, 40, 0.24), inset 0 1px 0 rgba(255,255,255,0.08);
  --api-surface-border: color-mix(in oklch, var(--ink) 8%, transparent);
  --api-input-bg: rgba(255, 255, 255, 0.72);
  --api-input-border: color-mix(in oklch, var(--ink) 10%, transparent);
  --api-input-focus-bg: rgba(255,255,255,0.92);
  --api-select-menu-bg: #fffaf3;
  --api-select-menu-fg: #18243a;
  --api-select-menu-muted: #71809a;
  --api-list-item-bg: rgba(255, 255, 255, 0.5);
  --api-list-item-hover-bg: rgba(255,255,255,0.78);
  --api-list-item-selected-bg: linear-gradient(90deg, rgba(46, 125, 105, 0.08), rgba(255,255,255,0.66));
  --api-ghost-bg: rgba(255,255,255,0.22);
  --api-ghost-hover-bg: rgba(24,36,58,0.08);
  --ambient-blue-bg: rgba(62, 99, 255, 0.2);
  --ambient-amber-bg: rgba(46, 125, 105, 0.14);
  --mark-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 243, 248, 0.8) 100%);
  --mark-shadow: inset 1.5px 1.5px 3px rgba(255, 255, 255, 1), inset -1.5px -1.5px 3px rgba(200, 205, 215, 0.5), 0 5px 12px rgba(0, 0, 0, 0.08);
  --brand-icon-image: url("/assets/muxing-star-mark.png?v=20260524b");
  --brand-icon-plate:
    radial-gradient(circle at 50% 55%, rgba(213, 154, 57, 0.16), transparent 52%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.98) 0%, rgba(236, 240, 247, 0.92) 100%);
  --brand-icon-border: rgba(24, 36, 58, 0.1);
  --brand-icon-filter: brightness(1.01) saturate(1.02) contrast(1.03);
  --brand-star-halo-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  --brand-icon-glow: 0 10px 22px rgba(24, 36, 58, 0.12), 0 0 16px rgba(213, 154, 57, 0.1);
  --brand-icon-highlight: rgba(255, 255, 255, 0.82);
  --brand-icon-highlight-accent: rgba(126, 168, 216, 0.44);
  --brand-icon-highlight-warm: rgba(213, 154, 57, 0.24);
  --brand-fixed-light:
    radial-gradient(ellipse 28% 24% at 37% 40%, rgba(255, 255, 255, 1) 0 8%, rgba(255, 246, 190, 0.74) 18%, rgba(255, 213, 78, 0.24) 30%, transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 44%, rgba(68, 38, 12, 0.14) 100%);
  --brand-fixed-light-opacity: 0.72;
  --brand-fixed-light-nav-opacity: 0.54;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);  /* general default — opacity/colour/transform settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* symmetric: loops, in/out flows */
  --graph-head-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.34));
  --graph-bg-center: rgba(255, 255, 255, 0.34);
  --graph-bg-mid: rgba(255, 255, 255, 0.23);
  --graph-bg-edge: rgba(255, 255, 255, 0.16);
  --graph-node-hub: 213, 154, 57;
  --graph-node-core: 101, 94, 255;
  --graph-node-skill: 62, 99, 255;
  --graph-edge: 70, 88, 126;
  --graph-label: 24, 36, 58;
  --graph-glow: 213, 154, 57;
  --graph-eyebrow: rgba(24, 36, 58, 0.44);
  --graph-title: rgba(24, 36, 58, 0.88);
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


html[data-theme="nature"] {
  --bg: #ebf0ea;
  --panel: rgba(242, 247, 241, 0.76);
  --panel-strong: rgba(247, 252, 246, 0.88);
  --ink: #2a3328;
  --wordmark-ink: #1f3f2a;
  --muted: #515c4e; /* AA: 4.5:1 on --bg (was #6b7a67, 3.95:1) */
  --line: rgba(42, 51, 40, 0.08);
  /* 自然强调色 — OKLCH 感知对齐：统一 L≈57.5%（amber 67%）、C≈0.105（刻意偏低、保留泥土质感），保留 teal 蓝身份 */
  --blue: oklch(57.5% 0.102 183.5);
  --green: oklch(57.5% 0.105 137.4);
  --amber: oklch(67.0% 0.105 72.4);
  --violet: oklch(57.5% 0.105 298.9);
  --rose: oklch(57.5% 0.105 10.7);
  --spectrum-red: oklch(57.5% 0.105 18.0);
  --spectrum-orange: oklch(62.5% 0.105 52.0);
  --spectrum-yellow: oklch(67.0% 0.105 78.0);
  --spectrum-green: oklch(57.5% 0.105 137.4);
  --spectrum-cyan: oklch(57.5% 0.102 183.5);
  --spectrum-blue: oklch(57.5% 0.105 252.0);
  --spectrum-violet: oklch(57.5% 0.105 298.9);
  --shadow: 0 24px 80px rgba(42, 51, 40, 0.12);
  --bg-gradient: radial-gradient(circle at 12% 20%, rgba(61, 134, 124, 0.12), transparent 22%), radial-gradient(circle at 87% 14%, rgba(89, 145, 66, 0.12), transparent 26%), linear-gradient(180deg, #f0f5ef 0%, #e2e8e0 100%);
  --hero-bg: radial-gradient(circle at 78% 18%, rgba(61, 134, 124, 0.08), transparent 22%), linear-gradient(135deg, rgba(250, 255, 249, 0.94), rgba(240, 245, 239, 0.76));
  --text-gradient: linear-gradient(135deg, #a5b687 0%, #81a49e 50%, #b39b7a 100%);
  --hover-spectral-glow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 0 4px 1px rgba(255,255,255,0.8),
    0 0 14px 3px rgba(120,175,110,0.44),
    0 5px 24px 5px rgba(70,170,158,0.36),
    0 9px 36px 9px rgba(150,128,196,0.27);
  --hero-panel-bg:
    radial-gradient(circle at 85% 15%, rgba(140, 190, 160, 0.22), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(170, 200, 160, 0.18), transparent 50%),
    radial-gradient(circle at 50% 40%, rgba(150, 180, 140, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(248, 252, 247, 0.95), rgba(238, 244, 237, 0.88));
  --btn-grad1: #3b4d36;
  --btn-grad2: #273623;
  --api-shell-bar-bg: linear-gradient(180deg, rgba(247,252,246,0.82), rgba(240,246,238,0.68));
  --api-shell-bar-border: rgba(42, 51, 40, 0.08);
  --api-shell-bar-shadow: 0 10px 24px rgba(42, 51, 40, 0.08), inset 0 1px 0 rgba(255,255,255,0.62);
  --api-sidebar-bg: radial-gradient(circle at top left, rgba(89, 145, 66, 0.14), transparent 38%), linear-gradient(180deg, rgba(38, 50, 35, 0.95), rgba(28, 38, 26, 0.94));
  --api-sidebar-fg: rgba(243, 248, 239, 0.96);
  --api-sidebar-muted: rgba(209, 223, 201, 0.72);
  --api-sidebar-border: rgba(255,255,255,0.08);
  --api-sidebar-shadow: 0 24px 50px rgba(42, 51, 40, 0.2), inset 0 1px 0 rgba(255,255,255,0.06);
  --api-sidebar-card-bg: rgba(255,255,255,0.045);
  --api-sidebar-card-hover: rgba(255,255,255,0.075);
  --api-sidebar-card-border: rgba(255,255,255,0.08);
  --api-sidebar-card-hover-border: rgba(255,255,255,0.16);
  --api-sidebar-card-selected-bg: linear-gradient(180deg, rgba(89, 145, 66, 0.16), rgba(255,255,255,0.04));
  --api-sidebar-card-selected-border: rgba(117, 172, 92, 0.9);
  --api-sidebar-card-selected-shadow: inset 0 0 0 1px rgba(184, 214, 168, 0.14), 0 12px 26px rgba(54, 86, 44, 0.2);
  --api-sidebar-scroll: rgba(255,255,255,0.12);
  --api-workspace-bg: linear-gradient(180deg, rgba(247,252,246,0.9), rgba(240,245,239,0.84));
  --api-workspace-border: rgba(255,255,255,0.72);
  --api-workspace-shadow: 0 24px 56px rgba(42, 51, 40, 0.1), inset 0 1px 0 rgba(255,255,255,0.72);
  --api-binding-panel-bg: radial-gradient(circle at top left, rgba(89, 145, 66, 0.18), transparent 42%), linear-gradient(180deg, rgba(41, 57, 37, 0.9), rgba(31, 45, 30, 0.86));
  --api-binding-panel-border: rgba(255,255,255,0.12);
  --api-binding-panel-shadow: 0 18px 36px rgba(42, 51, 40, 0.16), inset 0 1px 0 rgba(255,255,255,0.08);
  --api-surface-border: rgba(42, 51, 40, 0.08);
  --api-input-bg: rgba(250,255,249,0.78);
  --api-input-border: rgba(42, 51, 40, 0.1);
  --api-input-focus-bg: rgba(255,255,255,0.94);
  --api-select-menu-bg: #f7fcf6;
  --api-select-menu-fg: #2a3328;
  --api-select-menu-muted: #6b7a67;
  --api-list-item-bg: rgba(255,255,255,0.52);
  --api-list-item-hover-bg: rgba(255,255,255,0.8);
  --api-list-item-selected-bg: linear-gradient(90deg, rgba(89, 145, 66, 0.1), rgba(255,255,255,0.68));
  --api-ghost-bg: rgba(255,255,255,0.24);
  --api-ghost-hover-bg: rgba(42,51,40,0.08);
  --ambient-blue-bg: rgba(61, 134, 124, 0.2);
  --ambient-amber-bg: rgba(89, 145, 66, 0.14);
  --mark-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 243, 248, 0.8) 100%);
  --mark-shadow: inset 1.5px 1.5px 3px rgba(255, 255, 255, 1), inset -1.5px -1.5px 3px rgba(200, 205, 215, 0.5), 0 5px 12px rgba(0, 0, 0, 0.12);
  --brand-icon-plate:
    radial-gradient(circle at 50% 55%, rgba(196, 139, 59, 0.14), transparent 52%),
    linear-gradient(145deg, rgba(250, 255, 249, 0.98) 0%, rgba(232, 242, 229, 0.92) 100%);
  --brand-icon-border: rgba(42, 51, 40, 0.1);
  --brand-icon-filter: brightness(1.01) saturate(0.94) hue-rotate(5deg) contrast(1.03);
  --brand-icon-glow: 0 10px 22px rgba(42, 51, 40, 0.12), 0 0 16px rgba(89, 145, 66, 0.1);
  --brand-icon-highlight: rgba(255, 255, 255, 0.78);
  --brand-icon-highlight-accent: rgba(61, 134, 124, 0.4);
  --brand-icon-highlight-warm: rgba(196, 139, 59, 0.2);
  --graph-head-bg: linear-gradient(180deg, rgba(247, 252, 246, 0.58), rgba(247, 252, 246, 0.36));
  --graph-bg-center: rgba(247, 252, 246, 0.36);
  --graph-bg-mid: rgba(247, 252, 246, 0.24);
  --graph-bg-edge: rgba(247, 252, 246, 0.16);
  --graph-node-hub: 196, 139, 59;
  --graph-node-core: 122, 106, 155;
  --graph-node-skill: 61, 134, 124;
  --graph-edge: 76, 108, 82;
  --graph-label: 42, 51, 40;
  --graph-glow: 211, 170, 88;
  --graph-eyebrow: rgba(42, 51, 40, 0.46);
  --graph-title: rgba(42, 51, 40, 0.88);
}

html[data-theme="stellar"] {
  /* 星辰 — 沐浴星光 */
  --bg: #0b0e1a;
  --panel: rgba(18, 22, 40, 0.82);
  --panel-strong: rgba(22, 27, 48, 0.9);
  --ink: #e4ddd0;
  --muted: #8e8ba8;
  --line: rgba(200, 190, 170, 0.08);

  /* Accent palette: warm starlight + cool moonlight */
  /* 星辰强调色 — OKLCH 感知对齐：统一 L≈73%（amber 76%）、C≈0.108（柔和星光），保留 coral 玫红身份 */
  --blue: oklch(73.0% 0.108 252.3);
  --green: oklch(73.0% 0.108 172.0);
  --amber: oklch(76.0% 0.108 84.5);
  --violet: oklch(73.0% 0.108 293.0);
  --rose: oklch(73.0% 0.108 31.9);
  --spectrum-red: oklch(73.0% 0.108 24.0);
  --spectrum-orange: oklch(76.0% 0.108 55.0);
  --spectrum-yellow: oklch(78.0% 0.108 88.0);
  --spectrum-green: oklch(73.0% 0.108 145.0);
  --spectrum-cyan: oklch(73.0% 0.108 190.0);
  --spectrum-blue: oklch(73.0% 0.108 252.3);
  --spectrum-violet: oklch(73.0% 0.108 293.0);

  --shadow: 0 24px 80px rgba(0, 0, 0, 0.32); /* was 0.55 */

  --bg-gradient:
    radial-gradient(ellipse at 18% 22%, rgba(201, 164, 85, 0.08), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(126, 168, 216, 0.06), transparent 25%),
    linear-gradient(175deg, #10142a 0%, #0b0e1a 50%, #090c16 100%);

  --hero-bg:
    radial-gradient(ellipse at 72% 20%, rgba(201, 164, 85, 0.06), transparent 28%),
    radial-gradient(circle at 25% 75%, rgba(126, 168, 216, 0.04), transparent 30%),
    linear-gradient(145deg, rgba(22, 28, 52, 0.96), rgba(14, 18, 34, 0.82));

  --text-gradient: linear-gradient(135deg, #dbc18a 0%, #a8c4e0 50%, #89d4b8 100%);

  --hover-spectral-glow:
    inset 0 1px 0 rgba(210, 246, 255, 0.18),
    0 0 4px 1px rgba(111, 208, 255, 0.34),
    0 0 15px 3px rgba(84, 224, 192, 0.22),
    0 5px 26px 6px color-mix(in oklch, var(--spectrum-violet) 18%, transparent),
    0 8px 34px 8px rgba(255, 183, 116, 0.12);

  --hero-panel-bg:
    radial-gradient(circle at 80% 15%, rgba(201, 164, 85, 0.1), transparent 40%),
    radial-gradient(circle at 15% 75%, rgba(126, 168, 216, 0.08), transparent 45%),
    linear-gradient(180deg, rgba(20, 25, 48, 0.96), rgba(14, 18, 36, 0.9));

  --btn-grad1: #2a3050;
  --btn-grad2: #181c34;
  --api-shell-bar-bg: linear-gradient(180deg, rgba(21, 27, 48, 0.92), rgba(14, 18, 36, 0.82));
  --api-shell-bar-border: rgba(201, 164, 85, 0.12);
  --api-shell-bar-shadow: 0 12px 28px rgba(0,0,0,0.32), inset 0 1px 0 rgba(201,164,85,0.05);
  --api-sidebar-bg: radial-gradient(circle at top left, rgba(201, 164, 85, 0.14), transparent 38%), linear-gradient(180deg, rgba(15, 19, 36, 0.97), rgba(10, 13, 26, 0.95));
  --api-sidebar-fg: rgba(228, 221, 208, 0.96);
  --api-sidebar-muted: rgba(182, 173, 196, 0.74);
  --api-sidebar-border: rgba(201, 164, 85, 0.12);
  --api-sidebar-shadow: 0 24px 56px rgba(0,0,0,0.34), inset 0 1px 0 rgba(201,164,85,0.05);
  --api-sidebar-card-bg: rgba(201,164,85,0.045);
  --api-sidebar-card-hover: rgba(201,164,85,0.075);
  --api-sidebar-card-border: rgba(201,164,85,0.08);
  --api-sidebar-card-hover-border: rgba(201,164,85,0.16);
  --api-sidebar-card-selected-bg: linear-gradient(180deg, rgba(201,164,85,0.14), rgba(126,168,216,0.05));
  --api-sidebar-card-selected-border: rgba(201,164,85,0.82);
  --api-sidebar-card-selected-shadow: inset 0 0 0 1px rgba(201,164,85,0.12), 0 12px 28px rgba(33, 39, 74, 0.28);
  --api-sidebar-scroll: rgba(201,164,85,0.14);
  --api-workspace-bg: linear-gradient(180deg, rgba(22, 27, 48, 0.92), rgba(14, 18, 36, 0.88));
  --api-workspace-border: rgba(201, 164, 85, 0.12);
  --api-workspace-shadow: 0 24px 56px rgba(0,0,0,0.34), inset 0 1px 0 rgba(201,164,85,0.05);
  --api-binding-panel-bg: linear-gradient(180deg, rgba(201,164,85,0.05), rgba(255,255,255,0.02)), rgba(18, 22, 40, 0.84);
  --api-binding-panel-border: rgba(201,164,85,0.12);
  --api-binding-panel-shadow: 0 18px 36px rgba(0,0,0,0.26), inset 0 1px 0 rgba(201,164,85,0.05);
  --api-surface-border: rgba(201,190,170,0.1);
  --api-input-bg: rgba(201,164,85,0.045);
  --api-input-border: rgba(201,190,170,0.1);
  --api-input-focus-bg: rgba(201,164,85,0.08);
  --api-select-menu-bg: #11162c;
  --api-select-menu-fg: #e4ddd0;
  --api-select-menu-muted: #a9a1bd;
  --api-list-item-bg: rgba(201,164,85,0.04);
  --api-list-item-hover-bg: rgba(201,164,85,0.075);
  --api-list-item-selected-bg: linear-gradient(90deg, rgba(201,164,85,0.1), rgba(126,168,216,0.04));
  --api-ghost-bg: rgba(201,164,85,0.06);
  --api-ghost-hover-bg: rgba(201,164,85,0.12);
  --ambient-blue-bg: rgba(126, 168, 216, 0.1);
  --ambient-amber-bg: rgba(201, 164, 85, 0.08);
  --mark-bg: linear-gradient(135deg, rgba(228, 221, 208, 0.95) 0%, rgba(215, 208, 195, 0.85) 100%);
  --mark-shadow: inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.8), inset -1.5px -1.5px 3px rgba(180, 170, 150, 0.4), 0 5px 12px rgba(0, 0, 0, 0.4);
  --brand-icon-plate:
    radial-gradient(circle at 50% 54%, rgba(201, 164, 85, 0.18), transparent 54%),
    linear-gradient(145deg, #1b2141 0%, #090d1f 100%);
  --brand-icon-border: rgba(201, 164, 85, 0.2);
  --brand-icon-filter: brightness(1.16) saturate(1.18) hue-rotate(-2deg) contrast(1.06);
  --brand-star-halo-filter:
    drop-shadow(0 0 4px rgba(255, 229, 150, 0.42))
    drop-shadow(0 0 10px rgba(201, 164, 85, 0.24));
  --brand-icon-glow: 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 22px rgba(201, 164, 85, 0.18), 0 0 18px rgba(126, 168, 216, 0.1);
  --brand-icon-highlight: rgba(210, 246, 255, 0.9);
  --brand-icon-highlight-accent: rgba(84, 224, 192, 0.52);
  --brand-icon-highlight-warm: rgba(255, 183, 116, 0.42);

  --graph-head-bg: #12162c;
  --graph-bg-center: #181d38;
  --graph-bg-mid: #10142a;
  --graph-bg-edge: #0a0d1a;
  --graph-node-hub: 201, 164, 85;
  --graph-node-core: 164, 148, 224;
  --graph-node-skill: 126, 168, 216;
  --graph-edge: 140, 135, 170;
  --graph-label: 200, 190, 175;
  --graph-glow: 220, 200, 160;
  --graph-eyebrow: rgba(201, 164, 85, 0.5);
  --graph-title: rgba(228, 221, 208, 0.9);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  color: var(--ink);
  background: var(--bg-gradient);
  transition: background 0.5s var(--ease-smooth), color 0.5s var(--ease-smooth);
}

:root {
  --selection-bg: color-mix(in oklch, var(--blue) 30%, white);
  --selection-fg: var(--ink);
}

html[data-theme="nature"] {
  --selection-bg: color-mix(in oklch, var(--green) 32%, white);
  --selection-fg: var(--ink);
}

html[data-theme="stellar"] {
  --selection-bg: color-mix(in oklch, var(--blue) 68%, white);
  --selection-fg: var(--bg);
}

::selection {
  background: var(--selection-bg, color-mix(in oklch, var(--accent) 30%, white));
  color: var(--selection-fg, var(--ink));
  text-shadow: none;
}

::-moz-selection {
  background: var(--selection-bg, color-mix(in oklch, var(--accent) 30%, white));
  color: var(--selection-fg, var(--ink));
  text-shadow: none;
}

:where(.api-pool-panel, .api-binding-panel) {
  --selection-bg: color-mix(in oklch, var(--blue) 42%, transparent);
  --selection-fg: var(--api-sidebar-fg);
}

html[data-theme="stellar"] :where(pre, code) {
  --selection-bg: color-mix(in oklch, var(--violet) 66%, white);
  --selection-fg: var(--bg);
}

:where(.hero-intro h2, .page-hero h2, .section-head h2, .feature-card h3, .timeline-card h3, .api-panel-head h3, .api-empty-state h3) {
  text-wrap: balance;
}

:where(.hero-intro p, .page-hero p, .feature-card p, .note-card p, .learn-card p, .workflow-grid p, .feed-board p, .api-empty-state p) {
  text-wrap: pretty;
}

body:is(.page-home, .page-tools, .page-api) {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  --flow-c1: #d5566d;
  --flow-c2: #e9e89d;
  --flow-c3: #90bfe0;
  --flow-c4: #333ca0;
  --flow-c5: #16497b;
  --flow-light-rgb: 213 86 109;
  --flow-aqua-rgb: 144 191 224;
  --flow-blue-rgb: 51 60 160;
  --flow-deep-rgb: 22 73 123;
  --flow-field-opacity: 0.86;
  --flow-ribbon-opacity: 0.36;
  --flow-blur: 34px;
  --flow-ribbon-blur: 52px;
  --flow-panel-alpha: 0.52;
  --flow-hero-alpha: 0.48;
  --flow-hero-alpha-soft: 0.26;
  --flow-card-alpha: 0.38;
  --flow-backdrop-blur: 24px;
  --flow-grain-opacity: 0;
  --flow-grain-size: 1px;
  --flow-grain-density: 8px;
  --flow-brightness: 100%;
  --flow-contrast: 100%;
  --flow-saturation: 112%;
  --flow-speed: 18s;
  --flow-field-speed: 22s;
  --flow-ribbon-speed: 16s;
  --flow-ui-panel-rgb: 255 255 255;
  --flow-ui-card-rgb: 255 255 255;
  --flow-ui-shadow-rgb: 7 14 49;
  --flow-ui-border: rgba(255, 255, 255, 0.36);
  --flow-ui-border-strong: rgba(255, 255, 255, 0.42);
  --flow-ui-card-border: rgba(255, 255, 255, 0.32);
  --flow-ui-inset: rgba(255, 255, 255, 0.44);
  --hero-title-glow-core-rgb: 199 255 254;
  --hero-title-glow-halo-rgb: 238 244 246;
  --hero-title-glow-core-alpha: 0.534;
  --hero-title-glow-halo-alpha: 0.386;
  --hero-title-glow-core-size: 13.8px;
  --hero-title-glow-halo-size: 41.3px;
  --hero-emphasis-color: var(--blue);
  --hero-emphasis-shadow: none;
  --bg-gradient:
    linear-gradient(122deg, var(--flow-c1) 0%, var(--flow-c2) 30%, var(--flow-c3) 47%, var(--flow-c4) 70%, var(--flow-c5) 100%);
  --panel: rgb(var(--flow-ui-panel-rgb) / var(--flow-panel-alpha));
  --panel-strong: rgb(var(--flow-ui-card-rgb) / var(--flow-card-alpha));
  --hero-bg:
    linear-gradient(142deg, rgb(var(--flow-ui-panel-rgb) / var(--flow-hero-alpha)), rgb(var(--flow-ui-panel-rgb) / var(--flow-hero-alpha-soft)));
  --hero-panel-bg:
    linear-gradient(180deg, rgb(var(--flow-ui-panel-rgb) / var(--flow-panel-alpha)), rgb(var(--flow-ui-card-rgb) / var(--flow-card-alpha)));
  --shadow: 0 26px 80px rgb(var(--flow-ui-shadow-rgb) / 0.18);
  background-size: 180% 180%;
  animation: muxingGradientFlow var(--flow-speed) var(--ease-in-out) infinite alternate;
}

html[data-theme="nature"] body:is(.page-home, .page-tools, .page-api) {
  --flow-ui-panel-rgb: 242 247 241;
  --flow-ui-card-rgb: 247 252 246;
  --flow-ui-shadow-rgb: 42 51 40;
  --flow-ui-border: rgba(255, 255, 255, 0.38);
  --flow-ui-border-strong: rgba(255, 255, 255, 0.46);
  --flow-ui-card-border: rgba(255, 255, 255, 0.34);
  --flow-ui-inset: rgba(255, 255, 255, 0.46);
  /* Flow palette — mirror the JS nature scheme so the pre-canvas CSS fallback
     renders green, not the inherited default-blue. Kills the blue→green load
     flash: the translucent cards/buttons no longer ride a wrong-colour backdrop
     until the deferred canvas inits (~600ms). JS sets these same values inline
     once flow starts, so there's no second shift. */
  --flow-c1: #e6d6f9;
  --flow-c2: #c5b2d2;
  --flow-c3: #98dddf;
  --flow-c4: #8fd695;
  --flow-c5: #61a769;
  --flow-light-rgb: 230 214 249;
  --flow-aqua-rgb: 152 221 223;
  --flow-blue-rgb: 97 167 105;
  --flow-deep-rgb: 91 135 61;
  --hero-title-glow-core-rgb: 109 204 0;
  --hero-title-glow-halo-rgb: 215 254 233;
  --hero-title-glow-core-alpha: 0;
  --hero-title-glow-halo-alpha: 0;
  --hero-title-glow-core-size: 11.5px;
  --hero-title-glow-halo-size: 32.8px;
  --hero-emphasis-color: oklch(62.5% 0.075 176);
  --hero-emphasis-shadow: 0 0 28px rgb(var(--flow-aqua-rgb) / 0.12);
}

html[data-theme="stellar"] body:is(.page-home, .page-tools, .page-api) {
  --flow-ui-panel-rgb: 18 22 40;
  --flow-ui-card-rgb: 22 27 48;
  --flow-ui-shadow-rgb: 0 0 0;
  --flow-ui-border: rgba(201, 164, 85, 0.14);
  --flow-ui-border-strong: rgba(201, 164, 85, 0.18);
  --flow-ui-card-border: rgba(201, 164, 85, 0.12);
  --flow-ui-inset: rgba(201, 164, 85, 0.08);
  --flow-c1: #59575c;
  --flow-c2: #2b315f;
  --flow-c3: #354b7b;
  --flow-c4: #092243;
  --flow-c5: #052433;
  --flow-light-rgb: 89 87 92;
  --flow-aqua-rgb: 53 75 123;
  --flow-blue-rgb: 9 34 67;
  --flow-deep-rgb: 6 17 50;
  --flow-field-opacity: 0.67;
  /* Ribbon mist: the 69.6px blur was the heaviest CSS-fallback filter on the
     night theme. Cap it (desktop ≤48px) and trim the opacity a touch so the
     tighter radius still reads as a soft nebula rather than a hard blob. */
  --flow-ribbon-opacity: 0.37;
  --flow-blur: 20px;
  --flow-ribbon-blur: 44px;
  --flow-brightness: 70%;
  --flow-contrast: 141%;
  --flow-saturation: 138%;
  --hero-title-glow-core-rgb: 0 38 153;
  --hero-title-glow-halo-rgb: 46 105 255;
  --hero-title-glow-core-alpha: 0.603;
  --hero-title-glow-halo-alpha: 0.437;
  --hero-title-glow-core-size: 14.1px;
  --hero-title-glow-halo-size: 42.4px;
}

/* Laptop/tablet widths cover fewer pixels, so the mist can blur a little less
   again — keeps fill cost down on the machines most likely to lack a fast GPU. */
@media (max-width: 1280px) {
  html[data-theme="stellar"] body:is(.page-home, .page-tools, .page-api) {
    --flow-ribbon-blur: 36px;
  }
}

html[data-performance="low"] body:is(.page-home, .page-tools, .page-api),
body:is(.page-home, .page-tools, .page-api).muxing-flow-static-background {
  --blue: oklch(68.5% 0.132 76.0);
  --accent: var(--blue);
  --focus: var(--blue);
  --info: var(--blue);
  --text-gradient: linear-gradient(135deg, #c46b74 0%, #d59a39 54%, #8a7a62 100%);
  --panel: rgba(252, 247, 239, 0.76);
  --panel-strong: rgba(255, 252, 247, 0.88);
  --hero-bg: radial-gradient(circle at 78% 18%, rgba(62, 99, 255, 0.08), transparent 22%), linear-gradient(135deg, rgba(255, 251, 245, 0.94), rgba(252, 246, 237, 0.76));
  --hero-panel-bg:
    radial-gradient(circle at 85% 15%, rgba(230, 180, 170, 0.28), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(200, 210, 230, 0.22), transparent 50%),
    radial-gradient(circle at 50% 40%, rgba(240, 220, 200, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(252, 248, 243, 0.95), rgba(245, 240, 232, 0.85));
  --shadow: 0 24px 80px rgba(19, 30, 47, 0.12);
  --bg-gradient: var(--bg);
  --ambient-blue-bg: rgba(62, 99, 255, 0.2);
  --ambient-amber-bg: rgba(46, 125, 105, 0.14);
  background: var(--bg);
  background-size: auto;
  animation: none;
}

html[data-theme="nature"][data-performance="low"] body:is(.page-home, .page-tools, .page-api),
html[data-theme="nature"] body:is(.page-home, .page-tools, .page-api).muxing-flow-static-background {
  --blue: oklch(57.5% 0.102 183.5);
  --accent: var(--blue);
  --focus: var(--blue);
  --info: var(--blue);
  --text-gradient: linear-gradient(135deg, #a5b687 0%, #81a49e 50%, #b39b7a 100%);
  --panel: rgba(242, 247, 241, 0.76);
  --panel-strong: rgba(247, 252, 246, 0.88);
  --hero-bg: radial-gradient(circle at 78% 18%, rgba(61, 134, 124, 0.08), transparent 22%), linear-gradient(135deg, rgba(250, 255, 249, 0.94), rgba(240, 245, 239, 0.76));
  --hero-panel-bg:
    radial-gradient(circle at 85% 15%, rgba(140, 190, 160, 0.22), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(170, 200, 160, 0.18), transparent 50%),
    radial-gradient(circle at 50% 40%, rgba(150, 180, 140, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(248, 252, 247, 0.95), rgba(238, 244, 237, 0.88));
  --shadow: 0 24px 80px rgba(42, 51, 40, 0.12);
  --bg-gradient: var(--bg);
  --ambient-blue-bg: rgba(61, 134, 124, 0.2);
  --ambient-amber-bg: rgba(89, 145, 66, 0.14);
  background: var(--bg);
}

html[data-theme="stellar"][data-performance="low"] body:is(.page-home, .page-tools, .page-api),
html[data-theme="stellar"] body:is(.page-home, .page-tools, .page-api).muxing-flow-static-background {
  --blue: oklch(73.0% 0.108 252.3);
  --accent: var(--blue);
  --focus: var(--blue);
  --info: var(--blue);
  --text-gradient: linear-gradient(135deg, #dbc18a 0%, #a8c4e0 50%, #89d4b8 100%);
  --panel: rgba(18, 22, 40, 0.82);
  --panel-strong: rgba(22, 27, 48, 0.9);
  --hero-bg:
    radial-gradient(ellipse at 72% 20%, rgba(201, 164, 85, 0.06), transparent 28%),
    radial-gradient(circle at 25% 75%, rgba(126, 168, 216, 0.04), transparent 30%),
    linear-gradient(145deg, rgba(22, 28, 52, 0.96), rgba(14, 18, 34, 0.82));
  --hero-panel-bg:
    radial-gradient(circle at 80% 15%, rgba(201, 164, 85, 0.1), transparent 40%),
    radial-gradient(circle at 15% 75%, rgba(126, 168, 216, 0.08), transparent 45%),
    linear-gradient(180deg, rgba(20, 25, 48, 0.96), rgba(14, 18, 36, 0.9));
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  --bg-gradient: var(--bg);
  --ambient-blue-bg: rgba(126, 168, 216, 0.1);
  --ambient-amber-bg: rgba(201, 164, 85, 0.08);
  background: var(--bg);
}

body:is(.page-home, .page-tools, .page-api)::before {
  content: "";
  position: fixed;
  /* Overdraw just enough to stay covered through the keyframe translate (≤6% of
     the box) + scale — the old -22vmax painted far more blurred area than any
     animation frame ever exposes. */
  inset: -16vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 70% at 24% 38%, rgb(var(--flow-light-rgb) / 0.72), transparent 62%),
    radial-gradient(ellipse 34% 76% at 58% 48%, rgb(var(--flow-aqua-rgb) / 0.56), transparent 65%),
    radial-gradient(ellipse 42% 70% at 84% 46%, rgb(var(--flow-blue-rgb) / 0.64), transparent 66%),
    radial-gradient(ellipse 36% 62% at 78% 82%, rgb(var(--flow-deep-rgb) / 0.52), transparent 68%);
  filter: blur(var(--flow-blur)) brightness(var(--flow-brightness)) contrast(var(--flow-contrast)) saturate(var(--flow-saturation));
  opacity: var(--flow-field-opacity);
  transform: translate3d(-3%, -2%, 0) rotate(-3deg) scale(1.04);
  animation: muxingFluidField var(--flow-field-speed) var(--ease-in-out) infinite alternate;
  will-change: transform, filter;
}

body:is(.page-home, .page-tools, .page-api)::after {
  content: "";
  position: fixed;
  inset: -18vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 60% at 18% 78%, rgb(var(--flow-light-rgb) / 0.36), transparent 72%),
    radial-gradient(ellipse 42% 66% at 58% 42%, rgb(var(--flow-aqua-rgb) / 0.26), transparent 74%),
    radial-gradient(ellipse 52% 64% at 88% 22%, rgb(var(--flow-blue-rgb) / 0.24), transparent 76%),
    radial-gradient(ellipse 58% 72% at 78% 96%, rgb(var(--flow-deep-rgb) / 0.2), transparent 78%);
  filter: blur(var(--flow-ribbon-blur)) brightness(var(--flow-brightness)) contrast(var(--flow-contrast)) saturate(var(--flow-saturation));
  opacity: var(--flow-ribbon-opacity);
  transform: translate3d(4%, -1%, 0) rotate(2deg) scale(1.08);
  animation: muxingFlowRibbons var(--flow-ribbon-speed) var(--ease-in-out) infinite alternate;
  will-change: transform, opacity;
}

/* Once the opaque WebGL flow canvas (alpha:false, position:fixed; inset:0;
   z-index:0) is up it fully covers the body, so the body gradient's
   background-position keyframes repaint the whole viewport behind it for
   nothing. Freeze the gradient when the canvas is ready; the CSS-fallback path
   (no .muxing-flow-canvas-ready) keeps the animation, and the low-power /
   static-background path already sets animation:none. */
body:is(.page-home, .page-tools, .page-api).muxing-flow-canvas-ready {
  animation: none;
}

body:is(.page-home, .page-tools, .page-api).muxing-flow-canvas-ready::before,
body:is(.page-home, .page-tools, .page-api).muxing-flow-canvas-ready::after {
  display: none;
  visibility: hidden;
  opacity: 0 !important;
  animation: none !important;
}

html[data-performance="low"] body:is(.page-home, .page-tools, .page-api)::before,
html[data-performance="low"] body:is(.page-home, .page-tools, .page-api)::after,
body:is(.page-home, .page-tools, .page-api).muxing-flow-static-background::before,
body:is(.page-home, .page-tools, .page-api).muxing-flow-static-background::after {
  display: none;
  visibility: hidden;
  opacity: 0 !important;
  animation: none !important;
  will-change: auto;
}

html[data-performance="low"] body:is(.page-home, .page-tools, .page-api)::before,
body:is(.page-home, .page-tools, .page-api).muxing-flow-static-background::before {
  transform: translate3d(-3%, -2%, 0) rotate(-3deg) scale(1.04);
}

html[data-performance="low"] body:is(.page-home, .page-tools, .page-api)::after,
body:is(.page-home, .page-tools, .page-api).muxing-flow-static-background::after {
  transform: translate3d(4%, -1%, 0) rotate(2deg) scale(1.08);
}

body:is(.page-home, .page-tools, .page-api) .site-shell {
  z-index: 1;
}

body.page-home .site-shell {
  --page-parallax-hero-x: 0px;
  --page-parallax-hero-y: 0px;
  --home-parallax-intro-x: 0px;
  --home-parallax-intro-y: 0px;
}

body.page-home .site-shell.page-parallax-ready {
  transform-style: preserve-3d;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  body.page-home .site-shell.page-parallax-ready .hero-intro {
    transform: none !important;
    will-change: auto;
  }
}

body:is(.page-home, .page-tools, .page-api) .ambient,
body:is(.page-home, .page-tools, .page-api) .grid-noise {
  display: none;
}

html[data-performance="low"] body:is(.page-home, .page-tools, .page-api) .ambient,
body:is(.page-home, .page-tools, .page-api).muxing-flow-static-background .ambient {
  display: none;
}

html[data-performance="low"] body:is(.page-home, .page-tools, .page-api) .grid-noise,
body:is(.page-home, .page-tools, .page-api).muxing-flow-static-background .grid-noise {
  display: none;
}

.muxing-flow-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(19, 33, 60, 0.2) 0 var(--flow-grain-size), transparent calc(var(--flow-grain-size) + 0.4px));
  background-size: var(--flow-grain-density) var(--flow-grain-density);
  mix-blend-mode: soft-light;
  opacity: var(--flow-grain-opacity);
}

.muxing-flow-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

@keyframes muxingGradientFlow {
  0% {
    background-position: 0% 42%;
  }
  50% {
    background-position: 58% 52%;
  }
  100% {
    background-position: 100% 58%;
  }
}

/* Animate transform only — the field's blur radius is held constant by the
   base ::before filter. Re-running the Gaussian blur at a changing radius every
   frame is the single most expensive part of the CSS-fallback nebula; the drift
   reads the same with a fixed radius. */
@keyframes muxingFluidField {
  0% {
    transform: translate3d(-4%, -3%, 0) rotate(-4deg) scale(1.04);
  }
  45% {
    transform: translate3d(3%, 1%, 0) rotate(2deg) scale(1.1);
  }
  100% {
    transform: translate3d(6%, 4%, 0) rotate(5deg) scale(1.06);
  }
}

@keyframes muxingFlowRibbons {
  0% {
    opacity: 0.46;
    transform: translate3d(5%, -2%, 0) rotate(2deg) scale(1.08);
  }
  52% {
    opacity: 0.64;
    transform: translate3d(-2%, 3%, 0) rotate(-3deg) scale(1.14);
  }
  100% {
    opacity: 0.5;
    transform: translate3d(-6%, 5%, 0) rotate(-6deg) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.page-home, .page-tools, .page-api),
  body:is(.page-home, .page-tools, .page-api)::before,
  body:is(.page-home, .page-tools, .page-api)::after {
    animation: none !important;
  }
}

body:is(.page-home, .page-tools, .page-api).muxing-flow-paused,
body:is(.page-home, .page-tools, .page-api).muxing-flow-paused::before,
body:is(.page-home, .page-tools, .page-api).muxing-flow-paused::after {
  animation-play-state: paused;
}

.muxing-flow-debug-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 12000;
  width: min(340px, 86vw);
  display: flex;
  flex-direction: column;
  background: rgba(7, 8, 10, 0.94);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(245, 245, 244, 0.94);
  box-shadow: 16px 0 42px rgba(0, 0, 0, 0.32);
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.muxing-flow-debug-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-16) var(--space-24) var(--space-24);
}

.muxing-flow-debug-section {
  padding: 0 0 var(--space-16);
  margin: 0 0 var(--space-16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.muxing-flow-debug-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--space-16);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 245, 244, 0.62);
}

.muxing-flow-debug-title span {
  font-size: 17px;
  color: rgba(245, 245, 244, 0.46);
}

.muxing-flow-debug-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8) var(--space-16);
  align-items: center;
  margin: var(--space-16) 0;
}

.muxing-flow-debug-row label {
  min-width: 0;
  font-size: 17px;
  line-height: 1.2;
  color: rgba(245, 245, 244, 0.72);
}

.muxing-flow-debug-value {
  min-width: 42px;
  text-align: right;
  font-family: "DM Mono", monospace;
  font-size: 13px;
  color: rgba(245, 245, 244, 0.42);
}

.muxing-flow-debug-row input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 16px;
  margin: 0;
  accent-color: rgba(245, 245, 244, 0.96);
}

.muxing-flow-debug-color {
  grid-template-columns: 42px 1fr auto 20px;
  gap: var(--space-16);
}

.muxing-flow-debug-color input[type="color"] {
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  background: transparent;
}

.muxing-flow-debug-color input[type="range"] {
  grid-column: auto;
}

.muxing-flow-debug-remove {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: rgba(245, 245, 244, 0.38);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.muxing-flow-debug-button {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(245, 245, 244, 0.9);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

.muxing-flow-debug-button:hover {
  background: rgba(255, 255, 255, 0.07);
}

.muxing-flow-debug-button:disabled {
  cursor: not-allowed;
  color: rgba(245, 245, 244, 0.28);
  background: rgba(255, 255, 255, 0.02);
}

.muxing-flow-theme-cycle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  width: 100%;
  min-height: 54px;
  padding: var(--space-8) var(--space-16);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(245, 245, 244, 0.9);
  cursor: pointer;
  text-align: left;
}

.muxing-flow-theme-cycle:hover {
  background: rgba(255, 255, 255, 0.075);
}

.muxing-flow-theme-cycle span {
  color: rgba(245, 245, 244, 0.54);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.muxing-flow-theme-cycle strong {
  grid-column: 1;
  font-size: 17px;
  line-height: 1.15;
}

.muxing-flow-theme-cycle em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: rgba(245, 245, 244, 0.45);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-style: normal;
  text-align: right;
}

.muxing-flow-scheme-grid {
  display: grid;
  gap: var(--space-8);
}

.muxing-flow-scheme-slot {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}

.muxing-flow-scheme-slot.is-active {
  border-color: rgba(245, 245, 244, 0.32);
  background: rgba(255, 255, 255, 0.055);
}

.muxing-flow-scheme-slot.is-empty {
  color: rgba(245, 245, 244, 0.46);
}

.muxing-flow-scheme-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  font-size: 13px;
  font-weight: 700;
}

.muxing-flow-scheme-head em {
  font-style: normal;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: rgba(245, 245, 244, 0.42);
}

.muxing-flow-scheme-theme {
  color: rgba(245, 245, 244, 0.58);
  font-size: 12px;
}

.muxing-flow-scheme-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 22px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

.muxing-flow-scheme-slot.is-empty .muxing-flow-scheme-swatches {
  opacity: 0.42;
}

.muxing-flow-scheme-swatches span {
  min-width: 0;
}

.muxing-flow-scheme-actions {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: var(--space-8);
}

.muxing-flow-scheme-actions .muxing-flow-debug-button {
  min-height: 34px;
  font-size: 13px;
}

.muxing-flow-debug-footer {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24) var(--space-16);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 8, 10, 0.98);
}

.muxing-flow-debug-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.muxing-flow-debug-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-8) 0 var(--space-16);
  color: rgba(245, 245, 244, 0.72);
  font-size: 17px;
}

.muxing-flow-debug-switch {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: var(--radius-pill);
  border: 0;
  background: rgba(245, 245, 244, 0.94);
  cursor: pointer;
}

.muxing-flow-debug-switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 25px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #07080a;
  transition: left 0.18s var(--ease-out-expo);
}

.muxing-flow-debug-switch[aria-pressed="false"]::after {
  left: 5px;
}

@media (min-width: 1100px) {
  body:is(.page-home, .page-tools, .page-api).muxing-flow-debug-active .site-shell {
    width: calc(100% - 340px);
    margin-left: 340px;
  }
}

@media (max-width: 720px) {
  .muxing-flow-debug-panel {
    width: min(320px, 92vw);
  }
}

body.page-subpage {
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Shell ── */

.site-shell {
  position: relative;
  min-height: 100vh;
  /* Single source for the header's top inset: the shell's top padding (= the
     header's natural top) AND the sticky subpage header's `top` both read
     --shell-pad-top, so the persistent header can't shift vertically when
     navigating home (relative) ↔ subpage (sticky) at any breakpoint. */
  --shell-pad-top: var(--space-24);
  padding: var(--shell-pad-top) var(--space-24) var(--space-24);
  overflow: clip;
}

/* ── Ambient blurs ── */

.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  will-change: transform, opacity;
  contain: strict;
}

.ambient-blue {
  top: -15vh;
  right: -5vw;
  width: 65vw;
  height: 60vh;
  background: var(--ambient-blue-bg);
}

.ambient-amber {
  left: -10vw;
  bottom: -20vh;
  width: 70vw;
  height: 65vh;
  background: var(--ambient-amber-bg);
}

@keyframes ambientFadeIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 0.85; transform: scale(1); }
}

@keyframes ambientFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(4vw, -5vh) scale(1.05); }
  66% { transform: translate(-3vw, 4vh) scale(0.95); }
}

.ambient-blue { animation: ambientFadeIn 2s 0.4s var(--ease-out-expo) forwards, ambientFloat 30s 2.4s var(--ease-in-out) infinite; }
.ambient-amber { animation: ambientFadeIn 2s 0.7s var(--ease-out-expo) forwards, ambientFloat 36s 2.7s var(--ease-in-out) infinite; }

/* ── Grid noise ── */

.grid-noise {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black 24%, transparent 88%);
  opacity: 0.12;
  pointer-events: none;
}

/* ── Z-index ── */

.site-header,
.home-hero,
.page-hero,
.feature-card,
.timeline-card,
.note-card,
.learn-card,
.info-panel,
.feed-board article {
  position: relative;
  z-index: 1;
}

/* Backdrop blur: only on floating chrome that overlaps ambient blurs */
.site-header,
.home-hero {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── Stellar Edge Glow ── */

.stellar-edge-glow-target {
  position: relative;
  --stellar-edge-glow-x: 50%;
  --stellar-edge-glow-y: 50%;
  --stellar-edge-glow-opacity: 0;
}

.stellar-edge-glow-layer {
  position: absolute;
  inset: -2px;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  padding: 2px;
  opacity: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  contain: paint;
  transition: opacity 120ms var(--ease-smooth);
  filter:
    drop-shadow(0 0 7px rgba(111, 208, 255, 0.62))
    drop-shadow(0 0 13px rgba(84, 224, 192, 0.32))
    drop-shadow(0 0 17px color-mix(in oklch, var(--spectrum-violet) 24%, transparent));
}

html[data-theme="stellar"] .stellar-edge-glow-target > .stellar-edge-glow-layer {
  position: absolute;
  background:
    radial-gradient(
      148px 148px at var(--stellar-edge-glow-x, 50%) var(--stellar-edge-glow-y, 50%),
      rgba(255, 255, 255, 0.96) 0%,
      rgba(170, 230, 255, 0.86) 24%,
      rgba(84, 224, 192, 0.54) 43%,
      color-mix(in oklch, var(--spectrum-violet) 28%, transparent) 58%,
      rgba(255, 183, 116, 0.16) 70%,
      transparent 82%
    );
  opacity: var(--stellar-edge-glow-opacity, 0);
}

.stellar-border-flow-target {
  position: relative;
  --stellar-border-flow-x: 50%;
  --stellar-border-flow-y: 0;
  --stellar-border-flow-stretch: 1;
  --stellar-border-flow-size-x: 88px;
  --stellar-border-flow-size-y: 54px;
  --stellar-border-flow-opacity: 0;
}

.stellar-border-flow-layer {
  position: absolute;
  inset: -2px;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  padding: 2px;
  opacity: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  contain: paint;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 7px rgba(111, 208, 255, 0.5))
    drop-shadow(0 0 12px rgba(84, 224, 192, 0.3))
    drop-shadow(0 0 16px color-mix(in oklch, var(--spectrum-violet) 22%, transparent));
  transition: opacity 220ms var(--ease-smooth);
}

html[data-theme="stellar"] .stellar-border-flow-target > .stellar-border-flow-layer {
  position: absolute;
  background:
    radial-gradient(
      var(--stellar-border-flow-size-x, 88px) var(--stellar-border-flow-size-y, 54px) at var(--stellar-border-flow-x, 50%) var(--stellar-border-flow-y, 0),
      rgba(255, 255, 255, 0.98) 0%,
      rgba(170, 230, 255, 0.76) 30%,
      rgba(84, 224, 192, 0.42) 48%,
      rgba(255, 183, 116, 0.24) 62%,
      transparent 78%
    ),
    radial-gradient(
      calc(var(--stellar-border-flow-size-x, 88px) * 1.72) calc(var(--stellar-border-flow-size-y, 54px) * 1.72) at var(--stellar-border-flow-x, 50%) var(--stellar-border-flow-y, 0),
      rgba(111, 208, 255, 0.34) 0%,
      color-mix(in oklch, var(--spectrum-violet) 20%, transparent) 38%,
      rgba(255, 183, 116, 0.12) 58%,
      transparent 78%
    );
  opacity: var(--stellar-border-flow-opacity, 0);
}

@media (prefers-reduced-motion: reduce) {
  .stellar-edge-glow-layer,
  .stellar-border-flow-layer {
    display: none;
  }
}

/* ── Header ── */

.site-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-16) var(--space-24);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  opacity: 0;
  animation: slideDown 0.5s var(--ease-out-expo) 0s forwards;
  transition:
    background 0.28s var(--ease-out-expo),
    border-color 0.28s var(--ease-out-expo),
    border-radius 0.28s var(--ease-out-expo),
    box-shadow 0.28s var(--ease-out-expo),
    backdrop-filter 0.28s var(--ease-out-expo);
  max-width: var(--shell-max);
  margin: 0 auto;
  view-transition-name: site-header;
}

body:is(.page-home, .page-tools, .page-api) .site-header {
  background: var(--panel);
  border-color: var(--flow-ui-border-strong);
  box-shadow:
    0 18px 46px rgb(var(--flow-ui-shadow-rgb) / 0.16),
    inset 0 1px 0 var(--flow-ui-inset);
}

/* TEMP preview: remove the large header window chrome. */
body:is(.page-home, .page-tools, .page-api) .site-header {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* TEMP preview: remove the large home hero window chrome. */
body.page-home .home-hero {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header > .site-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.site-header.compact {
  position: sticky;
  /* Stick exactly at the header's natural top (the shell's top padding) so the
     persistent header doesn't jump when navigating home (relative) ↔ subpage. */
  top: var(--shell-pad-top, var(--space-24));
  z-index: 50;
}

body.is-header-glass-active:is(.page-home, .page-tools, .page-api) .site-header.compact {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:is(.page-home, .page-tools, .page-api) :is(.page-hero, .hero-panel, .feature-card, .note-card, .learn-feature, .learn-card, .tool-collapse, .section-head, .graph-panel, .info-panel, .api-global-bar, .api-pool-panel, .api-binding-panel, .api-detail-panel) {
  filter: blur(0) saturate(1) contrast(1) brightness(1);
}

body.is-header-glass-active:is(.page-home, .page-tools, .page-api) .is-under-header-glass {
  filter: blur(3.4px) saturate(0.84) contrast(0.88) brightness(0.92);
  opacity: 0.76;
  pointer-events: none;
  will-change: filter, opacity;
}

body.is-header-glass-active:is(.page-home, .page-tools, .page-api) .is-under-header-glass:is(.page-hero, .section-head, .api-global-bar) {
  filter: blur(2.4px) saturate(0.88) contrast(0.9) brightness(0.9);
  opacity: 0.72;
}

body:is(.page-home, .page-tools, .page-api) .is-leaving-header-glass {
  filter: blur(0) saturate(1) contrast(1) brightness(1);
  opacity: 1;
  will-change: filter, opacity;
}

@keyframes slideDown {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes muxingNavFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    filter: brightness(1) saturate(1);
    box-shadow: var(--brand-icon-glow), var(--mark-shadow);
  }
  24% {
    transform: translateY(-8px) rotate(-8deg) scale(1.08);
    filter: brightness(1.35) saturate(1.18);
    box-shadow:
      0 0 0 1px rgba(255, 245, 210, 0.48),
      0 16px 34px rgba(19, 29, 48, 0.22),
      0 0 24px rgba(126, 168, 216, 0.34),
      var(--brand-icon-glow),
      var(--mark-shadow);
  }
  52% {
    transform: translateY(-3px) rotate(6deg) scale(1.03);
    filter: brightness(1.16) saturate(1.07);
  }
  76% {
    transform: translateY(-5px) rotate(-2deg) scale(1.045);
    filter: brightness(1.12) saturate(1.06);
    box-shadow:
      0 0 0 1px rgba(255, 245, 210, 0.18),
      0 10px 24px rgba(19, 29, 48, 0.12),
      0 0 14px rgba(126, 168, 216, 0.16),
      var(--brand-icon-glow),
      var(--mark-shadow);
  }
  88% {
    transform: translateY(-1px) rotate(-0.5deg) scale(1.012);
    filter: brightness(1.04) saturate(1.02);
    box-shadow:
      0 0 0 1px rgba(255, 245, 210, 0.08),
      0 5px 14px rgba(19, 29, 48, 0.06),
      var(--brand-icon-glow),
      var(--mark-shadow);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    filter: brightness(1) saturate(1);
    box-shadow: var(--brand-icon-glow), var(--mark-shadow);
  }
}

@keyframes muxingNavFloatSweep {
  0%,
  18% {
    opacity: 0;
    transform: translateX(-58%) rotate(8deg);
  }
  34% {
    opacity: 0.42;
  }
  66% {
    opacity: 0.26;
    transform: translateX(44%) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: translateX(78%) rotate(8deg);
  }
}

@keyframes muxingBrandClickFlash {
  0% {
    filter: brightness(1) saturate(1);
    box-shadow: var(--brand-icon-glow), var(--mark-shadow);
  }
  18% {
    filter: brightness(1.48) saturate(1.22);
    box-shadow:
      0 0 0 1px rgba(255, 246, 210, 0.58),
      0 0 16px rgba(255, 236, 174, 0.42),
      0 0 26px rgba(126, 168, 216, 0.34),
      var(--brand-icon-glow),
      var(--mark-shadow);
  }
  45% {
    filter: brightness(1.12) saturate(1.08);
  }
  100% {
    filter: brightness(1) saturate(1);
    box-shadow: var(--brand-icon-glow), var(--mark-shadow);
  }
}

@keyframes muxingAuroraBrandSvgSpin {
  0% {
    transform: perspective(160px) rotateY(0deg) rotateZ(0deg) scale(1);
    filter: var(--brand-icon-filter) var(--brand-star-halo-filter);
  }
  16% {
    transform: perspective(160px) rotateY(118deg) rotateZ(-8deg) scale(0.92);
    filter: brightness(1.35) saturate(1.18) var(--brand-star-halo-filter);
  }
  58% {
    transform: perspective(160px) rotateY(780deg) rotateZ(7deg) scale(1.06);
    filter: brightness(1.2) saturate(1.1) var(--brand-star-halo-filter);
  }
  100% {
    transform: perspective(160px) rotateY(1080deg) rotateZ(0deg) scale(1);
    filter: var(--brand-icon-filter) var(--brand-star-halo-filter);
  }
}

@keyframes muxingBrandClickSweep {
  0% {
    opacity: 0;
    transform: translateX(-82%) rotate(10deg);
  }
  16% {
    opacity: 0.94;
    transform: translateX(-42%) rotate(10deg);
  }
  42% {
    opacity: 0.54;
    transform: translateX(12%) rotate(10deg);
  }
  62% {
    opacity: 0.18;
    transform: translateX(58%) rotate(10deg);
  }
  78% {
    opacity: 0;
    transform: translateX(108%) rotate(10deg);
  }
  100% {
    opacity: 0;
    transform: translateX(136%) rotate(10deg);
  }
}

@keyframes muxingBrandClickCursorGlyph {
  0%, 100% {
    transform: translate(0, 0) rotate(-7deg);
  }
  46% {
    transform: translate(1px, 1px) rotate(-3deg);
  }
}

@keyframes muxingBrandClickCursorTap {
  0%, 100% {
    transform: translate(0, 0) rotate(-7deg);
  }
  28% {
    transform: translate(2px, 2px) rotate(-3deg);
  }
  58% {
    transform: translate(-0.5px, -0.5px) rotate(-6deg);
  }
}

.brand-block {
  --wordmark-lens-size: 58px;
  --wordmark-lens-x: 50%;
  --wordmark-lens-y: 50%;
  --wordmark-lens-inner-x: 0px;
  --wordmark-lens-inner-y: 0px;
  --wordmark-lens-copy-width: 124px;
  --wordmark-lens-copy-height: 49px;
  --wordmark-lens-svg-width: 124px;
  --wordmark-lens-svg-height: 34px;
  --wordmark-lens-scale: 2;
  --wordmark-lens-mask-inner: 28px;
  --wordmark-lens-mask-outer: 30px;
  --boot-wordmark-collapsed-x: calc((46px + var(--space-16)) * -1);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  perspective: 100px;
}

.brand-mark {
  position: relative;
  isolation: isolate;
  display: block;
  min-width: 46px;
  min-height: 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--brand-icon-border);
  background: var(--brand-icon-plate), var(--mark-bg);
  box-shadow: var(--brand-icon-glow), var(--mark-shadow);
  filter: brightness(1) saturate(1);
  transform-origin: center;
  transform-box: fill-box;
  cursor: pointer;
  transition:
    background 0.5s var(--ease-smooth),
    border-color 0.5s var(--ease-smooth),
    box-shadow 0.5s var(--ease-smooth),
    filter 220ms var(--ease-smooth),
    opacity 0.46s var(--ease-out-expo);
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--brand-icon-image);
  background-image: image-set(
    url("/assets/muxing-star-mark.webp?v=20260524b") type("image/webp"),
    url("/assets/muxing-star-mark.png?v=20260524b") type("image/png")
  );
  background-size: cover;
  background-position: center;
  filter: var(--brand-icon-filter) var(--brand-star-halo-filter);
  transform: scale(1.01) rotate(0deg);
  transform-origin: center;
  transform-box: fill-box;
  transform-style: preserve-3d;
  will-change: transform;
  transition: filter 0.5s var(--ease-smooth), transform 0.2s var(--ease-in-out);
}

.brand-mark-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--ink);
  padding: 1px;
  opacity: 0;
  filter: var(--brand-icon-filter) var(--brand-star-halo-filter);
  pointer-events: none;
  transform-origin: center;
  transform-box: fill-box;
  will-change: transform, filter;
}

.brand-mark.is-svg-click-spinning .brand-mark-svg {
  animation: muxingAuroraBrandSvgSpin 920ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.site-header .brand-mark-svg {
  opacity: 1;
}

.site-header .brand-mark:has(.brand-mark-svg)::before {
  opacity: 0;
}

.site-header .brand-mark.is-awaiting-boot-star {
  opacity: 0;
  pointer-events: none;
}

.site-header .brand-block .brand-text {
  transform-origin: 0 50%;
}

.site-header .brand-block .brand-text > p,
.site-header .brand-block .brand-text > .site-wordmark {
  transform-origin: 0 50%;
}

.site-header .brand-block.is-boot-wordmark-collapsed .brand-text {
  pointer-events: none;
  transform:
    translate3d(var(--boot-wordmark-collapsed-x), 0, 0)
    scaleX(0.94);
  filter: brightness(1.04) saturate(1.08);
  will-change: transform, filter;
}

.site-header .brand-block.is-boot-wordmark-pushing .brand-text {
  pointer-events: none;
  will-change: transform, filter;
}

.site-header .brand-block.is-boot-wordmark-pushing .brand-text > p,
.site-header .brand-block.is-boot-wordmark-pushing .brand-text > .site-wordmark {
  will-change: transform;
}

.brand-star-3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  filter: var(--brand-icon-filter) var(--brand-star-halo-filter);
  pointer-events: none;
}

html[data-theme="stellar"] .brand-star-3d {
  transform: scale(0.9);
  transform-origin: center;
  filter: brightness(1.22) saturate(1.2) hue-rotate(-2deg) contrast(1.05) var(--brand-star-halo-filter);
}

.brand-mark.is-3d-ready::before {
  opacity: 0;
}

html[data-theme="stellar"] .brand-mark.is-3d-ready::before {
  opacity: 0.92;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 242, 198, 0.48) 0%, rgba(255, 229, 150, 0.3) 18%, rgba(201, 164, 85, 0.2) 31%, rgba(126, 168, 216, 0.16) 45%, transparent 66%);
  background-size: 100% 100%;
  background-position: center;
  filter: blur(2px);
  transform: scale(0.82);
}

.brand-mark.is-3d-ready .brand-mark-svg {
  opacity: 0;
}

.brand-block .brand-mark::after,
.sidebar-header .brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: var(--brand-fixed-light);
  -webkit-mask-image: var(--brand-icon-image);
  mask-image: var(--brand-icon-image);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 80ms var(--ease-smooth);
}

.brand-mark.is-3d-ready::after {
  display: none;
}

.brand-block:is(:hover, :focus-visible, :focus-within) .brand-mark::after,
.sidebar-header:is(:hover, :focus-visible, :focus-within) .brand-mark::after {
  opacity: var(--brand-fixed-light-opacity);
}

.brand-mark.is-nav-floating {
  animation: muxingNavFloat 1.04s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.site-header .brand-mark.is-nav-floating::after {
  content: "";
  position: absolute;
  inset: -28% -74%;
  z-index: 3;
  display: block;
  pointer-events: none;
  background:
    linear-gradient(
      112deg,
      transparent 32%,
      rgba(255, 255, 255, 0) 43%,
      var(--brand-icon-highlight) 50%,
      var(--brand-icon-highlight-accent) 54%,
      var(--brand-icon-highlight-warm) 58%,
      transparent 66%
    );
  mix-blend-mode: screen;
  animation: muxingNavFloatSweep 1.04s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.brand-mark.is-click-flashing:not(.is-nav-floating) {
  animation: muxingBrandClickFlash 1.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.brand-mark.is-click-flashing::after {
  content: "";
  position: absolute;
  inset: -32% -78%;
  z-index: 3;
  display: block;
  pointer-events: none;
  background:
    linear-gradient(
      112deg,
      transparent 34%,
      rgba(255, 255, 255, 0) 44%,
      var(--brand-icon-highlight) 49%,
      var(--brand-icon-highlight-accent) 52%,
      var(--brand-icon-highlight-warm) 54%,
      rgba(255, 255, 255, 0) 59%,
      transparent 62%
    );
  mix-blend-mode: screen;
  opacity: 0;
  will-change: opacity, transform;
  animation: muxingBrandClickSweep 1.02s linear both;
}

.muxing-brand-click-cursor {
  --brand-click-cursor-x: 0px;
  --brand-click-cursor-y: 0px;
  --brand-click-cursor-ink: #050705;
  --brand-click-cursor-rim: #fffaf0;
  position: absolute;
  left: var(--brand-click-cursor-x);
  top: var(--brand-click-cursor-y);
  z-index: 6;
  width: 48px;
  height: 48px;
  pointer-events: none;
  opacity: 0;
  transform:
    translate(-9px, -8px)
    scale(0.64);
  transform-origin: 11px 10px;
  transition:
    opacity 120ms var(--ease-smooth),
    transform 180ms var(--ease-out-expo),
    left 180ms var(--ease-out-expo),
    top 180ms var(--ease-out-expo);
  will-change: transform, opacity;
}

html[data-theme="nature"] .muxing-brand-click-cursor {
  --brand-click-cursor-ink: #050705;
  --brand-click-cursor-rim: #fffaf0;
}

html[data-theme="stellar"] .muxing-brand-click-cursor {
  --brand-click-cursor-ink: #fffaf0;
  --brand-click-cursor-rim: #050705;
}

.muxing-brand-click-cursor.is-active {
  opacity: 1;
  transform:
    translate(-9px, -8px)
    scale(0.76);
}

html.is-brand-click-cursor-active .muxing-brand-click-cursor.is-active {
  opacity: 1;
  transform:
    translate(-9px, -8px)
    scale(0.76);
}

.muxing-brand-click-cursor.is-pressing {
  transform:
    translate(-8px, -7px)
    scale(0.76);
}

.muxing-brand-click-cursor svg {
  position: absolute;
  left: 6px;
  top: 5px;
  width: 31px;
  height: 31px;
  overflow: visible;
  color: var(--brand-click-cursor-ink);
  filter: none;
  transform-origin: 9px 9px;
  animation: muxingBrandClickCursorGlyph 1.36s var(--ease-in-out) infinite;
}

.muxing-brand-click-cursor-pointer {
  fill: var(--brand-click-cursor-ink);
  stroke: var(--brand-click-cursor-rim);
  stroke-width: 3.35px;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}

.muxing-brand-click-cursor.is-pressing svg {
  animation: none;
  transform: translate(1px, 1px) rotate(-5deg);
}

.muxing-brand-click-cursor.is-clicking svg {
  animation: muxingBrandClickCursorTap 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-brand-click-cursor-surface {
  position: relative;
}

html.is-brand-click-cursor-active,
html.is-brand-click-cursor-active *,
body.is-brand-click-cursor-active,
body.is-brand-click-cursor-active * {
  cursor: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .muxing-brand-click-cursor {
    display: none !important;
  }
}

.brand-mark > span {
  display: none;
}

/* 1: Top-Left (Navy Hex/Squircle) */
.brand-mark > span:nth-child(1) {
  background: #18243a;
  border-radius: var(--radius-sm);
  transform: scale(0.9);
  box-shadow: 
    inset 1px 1px 2.5px rgba(255, 255, 255, 0.25),
    inset -1.5px -1.5px 3px rgba(0, 0, 0, 0.5),
    1.5px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 2: Top-Right (Blue Organic Triangle) */
.brand-mark > span:nth-child(2) {
  background: #3e63ff;
  border-radius: 50% 50% 50% 15%;
  transform: rotate(-135deg) scale(0.85);
  box-shadow: 
    inset -1.5px -1.5px 2.5px rgba(255, 255, 255, 0.6),
    inset 1.5px 1.5px 3px rgba(0, 0, 0, 0.3),
    1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* 3: Bottom-Left (Amber Circle) */
.brand-mark > span:nth-child(3) {
  background: #d59a39;
  border-radius: 50%;
  transform: scale(0.92);
  box-shadow: 
    inset 1px 1px 2.5px rgba(255, 255, 255, 0.6),
    inset -1.5px -1.5px 3px rgba(0, 0, 0, 0.3),
    1.5px 2px 4px rgba(0, 0, 0, 0.2);
}

/* 4: Bottom-Right (Green Blob/Clover) */
.brand-mark > span:nth-child(4) {
  background: #2e7d69;
  border-radius: 35% 65% 55% 45% / 45% 55% 65% 35%;
  transform: scale(0.9);
  box-shadow: 
    inset 1px 1px 2.5px rgba(255, 255, 255, 0.5),
    inset -1.5px -1.5px 3px rgba(0, 0, 0, 0.3),
    1.5px 2px 4px rgba(0, 0, 0, 0.2);
}

.muxing-entry-spotlight-overlay {
  position: fixed;
  inset: 0;
  display: block;
  z-index: 9000;
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: muxingEntryVeil 1.72s var(--ease-out-expo) forwards;
}

.muxing-entry-spotlight-mark {
  position: fixed;
  left: var(--spotlight-left);
  top: var(--spotlight-top);
  display: grid;
  width: var(--spotlight-size);
  height: var(--spotlight-size);
  place-items: center;
  z-index: 9001;
  border-radius: var(--spotlight-radius, 16px);
  pointer-events: none;
  isolation: isolate;
  animation: muxingEntryMark 1.72s var(--ease-out-expo) forwards;
  will-change: opacity, transform;
}

.muxing-entry-spotlight-mark::before,
.muxing-entry-spotlight-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.muxing-entry-spotlight-mark::before {
  width: var(--spotlight-halo-size, 138px);
  height: var(--spotlight-halo-size, 138px);
  z-index: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.58) 0 9%, rgba(255, 247, 221, 0.38) 10% 22%, rgba(126, 168, 216, 0.18) 30%, transparent 68%),
    radial-gradient(circle, rgba(213, 154, 57, 0.18), transparent 58%);
  filter: blur(0.4px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(0.62);
  animation: muxingEntryLogoHalo 1.58s var(--ease-out-expo) forwards;
  will-change: opacity, transform;
}

.muxing-entry-spotlight-mark::after {
  inset: var(--spotlight-ring-outset, -14px);
  z-index: 1;
  border: 1px solid rgba(255, 247, 221, 0.62);
  border-radius: calc(var(--spotlight-radius, 16px) + 14px);
  box-shadow:
    inset 0 0 0 1px rgba(126, 168, 216, 0.2),
    0 0 18px rgba(126, 168, 216, 0.18),
    0 0 30px rgba(213, 154, 57, 0.16);
  transform: scale(0.72);
  animation: muxingEntryLogoRing 1.58s var(--ease-out-expo) forwards;
  will-change: opacity, transform;
}

.muxing-entry-spotlight-mark .brand-mark {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: var(--spotlight-radius, 16px);
  animation: muxingEntryGlow 1.72s var(--ease-out-expo) forwards;
  will-change: filter;
}

.muxing-entry-spotlight-mark .brand-mark::after {
  content: "";
  position: absolute;
  inset: -35% -85%;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      112deg,
      transparent 30%,
      rgba(255, 255, 255, 0) 42%,
      var(--brand-icon-highlight) 49%,
      var(--brand-icon-highlight-accent) 53%,
      var(--brand-icon-highlight-warm) 57%,
      transparent 68%
    );
  mix-blend-mode: screen;
  transform: translateX(-62%) rotate(8deg);
  animation: muxingEntrySweep 1.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.muxing-entry-spotlight-mark .brand-star-3d {
  display: none;
}

.muxing-entry-spotlight-mark .brand-mark.is-3d-ready::before {
  opacity: 1;
}

/* While the entry spotlight clone leads the startup, hide the real header
   logo underneath. The handoff class fades it back in before the clone is
   removed, so the logo never drops out between layers. */
body.muxing-entry-spotlight-active .site-header .brand-mark {
  opacity: 0;
}

body.muxing-entry-spotlight-active.muxing-entry-spotlight-handoff .site-header .brand-mark {
  opacity: 1;
}

.brand-text p,
.eyebrow,
.panel-head p {
  margin: 0 0 var(--space-8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-text p {
  margin-bottom: 6px;
  padding-left: 8px;
  letter-spacing: 0.12em;
  text-transform: none;
  transform: translateY(2px);
}

/* Bilingual hover swap */
.bilingual {
  --bilingual-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: inline-grid;
  grid-template-areas: "stack";
  align-items: baseline;
  justify-items: center;
  line-height: inherit;
  white-space: nowrap;
  vertical-align: baseline;
  cursor: inherit;
  isolation: isolate;
  overflow: visible;
}

.bilingual::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.bilingual::after {
  z-index: 3;
  inset: -0.18em -0.2em -0.16em;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 43%,
    rgba(255, 255, 255, 0.52) 50%,
    rgba(255, 255, 255, 0.12) 57%,
    transparent 70%
  );
  mix-blend-mode: screen;
  transform: translateX(-80%) skewX(-14deg);
}

.bilingual-en,
.bilingual-zh {
  grid-area: stack;
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: baseline;
  text-align: center;
  min-width: 0;
  transition:
    opacity 220ms var(--ease-smooth),
    transform 360ms var(--bilingual-ease),
    filter 260ms var(--ease-smooth);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}

:where(.header-button, .primary-action, .secondary-action, .feature-card a, .workflow-grid a, .note-card a, .learn-card > a, .carousel-card em, .tool-collapse-action, .badge, .sidebar-link, .site-nav a) .bilingual {
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}

:where(.header-button, .primary-action, .secondary-action, .feature-card a, .workflow-grid a, .note-card a, .learn-card > a, .carousel-card em, .tool-collapse-action, .badge, .sidebar-link, .site-nav a) .bilingual-en,
:where(.header-button, .primary-action, .secondary-action, .feature-card a, .workflow-grid a, .note-card a, .learn-card > a, .carousel-card em, .tool-collapse-action, .badge, .sidebar-link, .site-nav a) .bilingual-zh {
  align-self: center;
  line-height: 1;
}

:where(.header-button, .primary-action, .secondary-action, .feature-card a, .workflow-grid a, .note-card a, .learn-card > a, .carousel-card em, .tool-collapse-action, .badge, .sidebar-link, .site-nav a) .bilingual-en {
  text-indent: 0;
}

.bilingual-en {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: -0.12em;
  font-variant-numeric: tabular-nums;
  transform: translate3d(0, 0, 0) scale(1);
}

.bilingual-zh {
  opacity: 0;
  transform: translate3d(0, 0.35em, 0) scale(0.985);
  filter: blur(4px);
  pointer-events: none;
  letter-spacing: 0;
  font-variant-east-asian: proportional-width;
}

/* 浏览全部 on the header CTA read cramped at letter-spacing:0 — loosen the CJK a
   touch (well under the §5.8 0.12em cap), with a matching negative margin-right so
   the trailing track doesn't pull it off-centre. Scoped to this button only. */
.site-header > .header-button .bilingual-zh {
  letter-spacing: 0.08em;
  margin-right: -0.08em;
}

.bilingual:hover::after,
.bilingual:focus-visible::after,
.bilingual:focus-within::after,
:where(a, button, summary, .brand-block, .eyebrow, .panel-head, .badge, .sidebar-link, .sidebar-section-label):is(:hover, :focus-visible, :focus-within) .bilingual::after {
  animation: bilingual-sheen 520ms var(--bilingual-ease) both;
}

.bilingual:hover .bilingual-en,
.bilingual:focus-visible .bilingual-en,
.bilingual:focus-within .bilingual-en,
:where(a, button, summary, .brand-block, .eyebrow, .panel-head, .badge, .sidebar-link, .sidebar-section-label):is(:hover, :focus-visible, :focus-within) .bilingual .bilingual-en {
  opacity: 0;
  transform: translate3d(0, -0.24em, 0) scale(0.985);
  filter: blur(3px);
}

.bilingual:hover .bilingual-zh,
.bilingual:focus-visible .bilingual-zh,
.bilingual:focus-within .bilingual-zh,
:where(a, button, summary, .brand-block, .eyebrow, .panel-head, .badge, .sidebar-link, .sidebar-section-label):is(:hover, :focus-visible, :focus-within) .bilingual .bilingual-zh {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.site-nav a.is-nav-hover-preserved .bilingual::after {
  animation: none;
  opacity: 0;
}

.site-nav a.is-nav-hover-preserved .bilingual-en {
  opacity: 0;
  transform: translate3d(0, -0.24em, 0) scale(0.985);
  filter: blur(3px);
  transition: none;
}

.site-nav a.is-nav-hover-preserved .bilingual-zh {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition: none;
}

@keyframes bilingual-sheen {
  0% {
    opacity: 0;
    transform: translateX(-82%) skewX(-14deg);
  }
  22% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translateX(82%) skewX(-14deg);
  }
}

@media (hover: none) {
  .bilingual::after,
  .bilingual-zh {
    display: none;
  }

  .bilingual-en {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bilingual::after {
    animation: none !important;
    transition: none !important;
  }

  .bilingual-en,
  .bilingual-zh {
    transition: opacity 120ms linear;
    transform: none !important;
    filter: none !important;
  }
}

.brand-text h1 {
  margin: 0;
  font-family:
    "HYXuanSong 95S",
    "HYXuanSong-95S",
    "汉仪玄宋95S",
    "汉仪玄宋 95S",
    "HYXuanSong 90S",
    "HYXuanSong-90S",
    "汉仪玄宋90S",
    "汉仪玄宋 90S",
    "Noto Serif SC",
    "Source Han Serif SC",
    "Songti SC",
    "SimSun",
    serif;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.055em;
}

.brand-text h1.site-wordmark {
  position: relative;
  display: block;
  width: 110px;
  height: 30px;
  color: var(--wordmark-ink);
  isolation: isolate;
}

.brand-text.is-magnifier-active > p {
  -webkit-mask-image: radial-gradient(
    circle at var(--wordmark-lens-label-x) var(--wordmark-lens-label-y),
    transparent 0 var(--wordmark-lens-mask-inner),
    #000 var(--wordmark-lens-mask-outer)
  );
  mask-image: radial-gradient(
    circle at var(--wordmark-lens-label-x) var(--wordmark-lens-label-y),
    transparent 0 var(--wordmark-lens-mask-inner),
    #000 var(--wordmark-lens-mask-outer)
  );
}

.site-wordmark svg {
  display: block;
  width: 110px;
  height: 30px;
  overflow: visible;
}

.brand-text.is-magnifier-active .site-wordmark > svg {
  -webkit-mask-image: radial-gradient(
    circle at var(--wordmark-lens-title-x) var(--wordmark-lens-title-y),
    transparent 0 var(--wordmark-lens-mask-inner),
    #000 var(--wordmark-lens-mask-outer)
  );
  mask-image: radial-gradient(
    circle at var(--wordmark-lens-title-x) var(--wordmark-lens-title-y),
    transparent 0 var(--wordmark-lens-mask-inner),
    #000 var(--wordmark-lens-mask-outer)
  );
}

.site-wordmark-text {
  font-family:
    "HYXuanSong 95S",
    "HYXuanSong-95S",
    "汉仪玄宋95S",
    "汉仪玄宋 95S",
    "HYXuanSong 90S",
    "HYXuanSong-90S",
    "汉仪玄宋90S",
    "汉仪玄宋 90S",
    "Noto Serif SC",
    "Source Han Serif SC",
    "Songti SC",
    "SimSun",
    serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.055em;
  fill: currentColor;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

html[data-theme="stellar"] .brand-text p {
  font-weight: 500;
  color: #6fd0ff;
  text-shadow:
    0 0 10px rgba(111, 208, 255, 0.22),
    0 0 18px rgba(194, 210, 255, 0.12);
}

html[data-theme="stellar"] .brand-text h1.site-wordmark {
  color: #d9e5ff;
  filter:
    drop-shadow(0 0 10px rgba(111, 208, 255, 0.2))
    drop-shadow(0 2px 0 rgba(16, 24, 62, 0.54));
}

html[data-theme="stellar"] .brand-text h1.site-wordmark:not(.is-wordmark-exported) .site-wordmark-text {
  fill: #d9e5ff;
}

html[data-theme="stellar"] :is(
  .brand-text h1.site-wordmark.is-wordmark-exported,
  .site-wordmark-lens
) .site-wordmark-svg-asset .site-wordmark-text {
  fill: url("#muxingWordmarkAssetStellarInk");
}

.site-wordmark-lens {
  position: absolute;
  left: var(--wordmark-lens-x);
  top: var(--wordmark-lens-y);
  z-index: 3;
  width: var(--wordmark-lens-size);
  height: var(--wordmark-lens-size);
  color: var(--wordmark-ink);
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
  /* Keep the heavy cloned SVG paintable while visually hidden so the first
     hover does not show an empty glass before the glyph layer is rasterized. */
  opacity: 0.001;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  background-color: rgba(255, 255, 255, 0.04);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(170, 215, 220, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 1px 8px rgba(255, 255, 255, 0.18),
    inset 0 -8px 14px rgba(24, 36, 58, 0.04),
    0 12px 28px rgba(24, 36, 58, 0.14);
  transition: none;
  will-change: transform, opacity;
}

.site-wordmark-lens::after {
  content: "";
  position: absolute;
  inset: 7px 9px auto auto;
  width: 13px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in oklch, white 68%, transparent);
  filter: blur(0.4px);
  transform: rotate(-22deg);
}

.brand-block.is-magnifier-active .site-wordmark-lens {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.site-wordmark-lens-copy {
  position: absolute;
  left: var(--wordmark-lens-inner-x);
  top: var(--wordmark-lens-inner-y);
  width: var(--wordmark-lens-copy-width);
  height: var(--wordmark-lens-copy-height);
  color: inherit;
  z-index: 1;
}

.site-wordmark-lens-copy p {
  margin: 0 0 calc(var(--space-8) * var(--wordmark-lens-scale));
  font-size: calc(11px * var(--wordmark-lens-scale));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

html[data-theme="stellar"] .site-wordmark-lens-copy p {
  color: #6fd0ff;
  text-shadow:
    0 0 10px rgba(111, 208, 255, 0.22),
    0 0 18px rgba(194, 210, 255, 0.12);
}

.site-wordmark-lens .site-wordmark-lens-svg {
  display: block;
  width: var(--wordmark-lens-svg-width);
  height: var(--wordmark-lens-svg-height);
  max-width: none;
  max-height: none;
  color: inherit;
  overflow: visible;
}

@media (hover: none), (pointer: coarse) {
  .site-wordmark-lens {
    display: none;
  }
}

.site-nav {
  --site-nav-indicator-x: 0px;
  --site-nav-indicator-y: calc(100% + 3px);
  --site-nav-indicator-w: 0px;
  --site-nav-indicator-pad: 4px;
  --site-nav-indicator-offset: 3px;
  --site-nav-indicator-opacity: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-32);
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
  isolation: isolate;
}

html:not([data-theme]) .site-nav {
  color: color-mix(in oklch, var(--ink) 74%, var(--muted));
}

html:not([data-theme]) body.page-home .hero-intro .eyebrow,
html:not([data-theme]) body.page-home .status-text span {
  color: color-mix(in oklch, var(--ink) 78%, var(--muted));
  text-shadow: 0 1px 1px rgba(236, 228, 213, 0.22);
}

html:not([data-theme]) body.page-home .status-text strong {
  color: color-mix(in oklch, var(--ink) 68%, var(--muted));
  text-shadow: 0 1px 1px rgba(236, 228, 213, 0.2);
}

.site-nav::before,
.site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: var(--site-nav-indicator-opacity);
  transform: translate3d(var(--site-nav-indicator-x), var(--site-nav-indicator-y), 0);
  transform-origin: left center;
  transition:
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    inline-size 520ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms var(--ease-smooth);
  will-change: transform, opacity;
}

html.mx-boot-active body:not(.mx-boot-nav-indicator-ready) .site-nav::before,
html.mx-boot-active body:not(.mx-boot-nav-indicator-ready) .site-nav::after {
  opacity: 0;
}

.site-nav::before {
  inline-size: var(--site-nav-indicator-w);
  block-size: 2px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--blue) 16%, transparent),
      color-mix(in oklch, var(--blue) 86%, white) 22%,
      var(--blue) 50%,
      color-mix(in oklch, var(--blue) 78%, white) 78%,
      color-mix(in oklch, var(--blue) 16%, transparent)
    );
  box-shadow: 0 0 10px color-mix(in oklch, var(--blue) 28%, transparent);
}

.site-nav::after {
  left: -7px;
  top: -4px;
  inline-size: calc(var(--site-nav-indicator-w) + 14px);
  block-size: 10px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in oklch, var(--blue) 34%, transparent) 28%,
      color-mix(in oklch, var(--blue) 56%, white) 50%,
      color-mix(in oklch, var(--blue) 34%, transparent) 72%,
      transparent
    );
  filter: blur(6px);
  mix-blend-mode: multiply;
}

html:not([data-theme]) .site-nav::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(170, 112, 46, 0.46) 28%,
      rgba(190, 135, 63, 0.68) 50%,
      rgba(170, 112, 46, 0.46) 72%,
      transparent
    );
  box-shadow: 0 0 7px rgba(170, 112, 46, 0.24);
}

html:not([data-theme]) .site-nav::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(170, 112, 46, 0.22) 50%,
      transparent
    );
  filter: blur(5px);
  opacity: calc(var(--site-nav-indicator-opacity) * 0.42);
}

.site-nav.is-nav-indicator-setting::before,
.site-nav.is-nav-indicator-setting::after {
  transition: none;
}

html[data-theme="stellar"] .site-nav::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(111, 208, 255, 0.28) 22%,
      rgba(84, 224, 192, 0.38) 39%,
      rgba(255, 255, 255, 0.52) 50%,
      rgba(255, 183, 116, 0.26) 61%,
      color-mix(in oklch, var(--spectrum-violet) 24%, transparent) 76%,
      transparent
    );
  box-shadow:
    0 0 5px rgba(111, 208, 255, 0.18),
    0 0 9px rgba(84, 224, 192, 0.12);
}

html[data-theme="stellar"] .site-nav::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(111, 208, 255, 0.11) 36%,
      color-mix(in oklch, var(--spectrum-violet) 13%, transparent) 50%,
      rgba(255, 183, 116, 0.08) 64%,
      transparent
    );
  filter: blur(5px);
  opacity: calc(var(--site-nav-indicator-opacity) * 0.32);
}

html[data-theme="nature"] .site-nav::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(51, 112, 93, 0.3) 28%,
      rgba(76, 126, 104, 0.44) 50%,
      rgba(51, 112, 93, 0.3) 72%,
      transparent
    );
  box-shadow: 0 0 4px rgba(51, 112, 93, 0.12);
}

html[data-theme="nature"] .site-nav::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(51, 112, 93, 0.1) 50%,
      transparent
    );
  filter: blur(5px);
  opacity: calc(var(--site-nav-indicator-opacity) * 0.26);
}

html[data-performance="low"]:not([data-theme="nature"]):not([data-theme="stellar"]) .site-nav::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(170, 112, 46, 0.3) 28%,
      rgba(190, 135, 63, 0.44) 50%,
      rgba(170, 112, 46, 0.3) 72%,
      transparent
    );
  box-shadow: 0 0 4px rgba(170, 112, 46, 0.12);
}

html[data-performance="low"]:not([data-theme="nature"]):not([data-theme="stellar"]) .site-nav::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(170, 112, 46, 0.1) 50%,
      transparent
    );
  filter: blur(5px);
  opacity: calc(var(--site-nav-indicator-opacity) * 0.26);
}

.site-nav a {
  position: relative;
  z-index: 1;
  display: inline-grid;
  min-inline-size: 72px;
  min-height: 24px;
  place-items: center;
  line-height: 1;
  -webkit-user-drag: none;
  user-select: none;
  touch-action: manipulation;
  transition: color 200ms var(--ease-smooth);
}

@media (min-width: 921px) {
  .site-nav a::before {
    content: "";
    position: absolute;
    inset: -10px -8px;
    border-radius: var(--radius-pill);
  }
}

.site-nav a:first-child {
  justify-items: end;
}

.site-nav a:last-child {
  justify-items: start;
}

/* Nav tracking — keep the three bilingual primary tabs visually even. */
.site-nav a,
.site-nav a .bilingual-en {
  letter-spacing: 0.05em;
}

.site-nav a::after {
  content: none;
}

.site-nav a.is-active,
.site-nav a:hover {
  color: var(--ink);
}

.site-nav a:active {
  transform: translateY(1px);
}

/* ── Buttons ── */

.header-button,
.primary-action,
.secondary-action,
.carousel-card em,
.feature-card a,
.workflow-grid a,
.note-card a,
.learn-card > a,
.tool-collapse-action,
.api-btn,
.ws-action-btn,
.info-panel a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: var(--space-8);
  line-height: 1;
  text-align: center;
  border-radius: var(--radius-md);
  transition:
    transform 280ms var(--ease-out-expo),
    box-shadow 280ms var(--ease-smooth),
    border-color 180ms var(--ease-smooth);
}

:where(
  .brand-mark,
  .brand-block,
  .header-button,
  .primary-action,
  .secondary-action,
  .carousel-card em,
  .feature-card a,
  .workflow-grid a,
  .note-card a,
  .learn-card > a,
  .tool-collapse summary,
  .tool-collapse-action,
  .sidebar-tool-item,
  .api-btn,
  .api-key-toggle,
  .api-select,
  .ws-action-btn,
  .letters-compose-btn
) {
  -webkit-user-drag: none;
  user-select: none;
  touch-action: manipulation;
}

:where(
  .brand-mark,
  .site-nav a,
  .header-button,
  .primary-action,
  .secondary-action,
  .feature-card a,
  .workflow-grid a,
  .note-card a,
  .learn-card > a,
  .tool-collapse summary,
  .tool-collapse-action,
  .sidebar-tool-item,
  .api-btn,
  .api-key-toggle,
  .api-select,
  .ws-action-btn,
  .letters-compose-btn,
  .workspace-iframe
):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.workspace-iframe:focus-visible {
  outline-offset: -3px;
}

:where(
  .header-button,
  .primary-action,
  .secondary-action,
  .feature-card a,
  .workflow-grid a,
  .note-card a,
  .learn-card > a,
  .tool-collapse-action,
  .sidebar-tool-item,
  .api-btn,
  .api-key-toggle,
  .ws-action-btn,
  .letters-compose-btn
) {
  position: relative;
}

@media (any-hover: hover) and (any-pointer: fine) {
  :where(
    .primary-action,
    .secondary-action,
    .feature-card a,
    .workflow-grid a,
    .note-card a,
    .learn-card > a,
    .site-header > .header-button,
    .tool-collapse-action,
    .sidebar-tool-item,
    .api-btn,
    .api-key-toggle,
    .ws-action-btn,
    .letters-compose-btn
  )::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
  }
}

:where(
  .header-button,
  .primary-action,
  .secondary-action,
  .carousel-card em,
  .feature-card a,
  .workflow-grid a,
  .note-card a,
  .learn-card > a,
  .tool-collapse-action,
  .ws-action-btn,
  .api-btn
) > svg {
  display: block;
  flex: 0 0 auto;
  align-self: center;
}

:where(
  .header-button,
  .primary-action,
  .secondary-action,
  .carousel-card em,
  .feature-card a,
  .workflow-grid a,
  .note-card a,
  .learn-card > a,
  .tool-collapse-action,
  .ws-action-btn,
  .api-btn
) > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  justify-items: center;
  line-height: 1;
  text-align: center;
}

:where(
  .header-button,
  .primary-action,
  .secondary-action,
  .carousel-card em,
  .feature-card a,
  .workflow-grid a,
  .note-card a,
  .learn-card > a,
  .tool-collapse-action,
  .ws-action-btn,
  .api-btn
) .bilingual {
  margin-inline: auto;
  max-width: 100%;
}

.header-button,
.primary-action {
  padding: 17px var(--space-24);
  background: linear-gradient(180deg, var(--btn-grad1), var(--btn-grad2));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 18px 32px rgba(19, 29, 48, 0.18);
  position: relative;
  overflow: hidden;
}

.site-header > .header-button {
  inline-size: 116px;
  min-height: 44px;
  flex: 0 0 116px;
  padding: var(--space-8) var(--space-16);
  font-size: 12px;
  overflow: visible;
}

/* Header CTA — frosted-glass "蒙版", default (晨光) theme only.
   Ref: the Habits frosted-jar packaging — a soft, matte, milky translucent film.
   A backdrop-blurred warm-white pane with a luminous rim and a whisper of top
   sheen; navy ink kept for legibility. This is the station's own glass language
   (§5.1.1 warm paper + --panel blur) used once, deliberately — the "rare and
   purposeful" glass, not a decorative default (§5.8). Hover brightens the frost
   rather than inverting to dark. Scoped to html:not([data-theme]) so 自然 / 星辰
   keep their own buttons (theme-init removes the attribute only for default). */
html:not([data-theme]) .site-header > .header-button {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.34), rgba(255, 253, 248, 0.16));
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
  color: var(--ink);
  border: 1px solid rgba(255, 253, 248, 0.62);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 2px 8px rgba(24, 36, 58, 0.08);
  transition:
    transform 220ms var(--ease-out-expo),
    background 220ms var(--ease-out-expo),
    box-shadow 220ms var(--ease-out-expo),
    border-color 220ms var(--ease-out-expo);
}

html:not([data-theme]) .site-header > .header-button::before {
  display: none; /* drop the inherited blue hover wash; the frost carries the surface */
}

html:not([data-theme]) .site-header > .header-button:hover {
  transform: none;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.46), rgba(255, 253, 248, 0.24));
  border-color: rgba(255, 253, 248, 0.82);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(24, 36, 58, 0.1);
}

html:not([data-theme]) .site-header > .header-button:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.28), rgba(255, 253, 248, 0.12));
  border-color: rgba(255, 253, 248, 0.58);
  box-shadow:
    inset 0 2px 5px rgba(24, 36, 58, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.38),
    0 1px 4px rgba(24, 36, 58, 0.08);
  transition-duration: 70ms;
}

/* 自然 (nature) theme header CTA — raised pressed-paper emboss, sage green.
   A pressed-card material chip (greener sage, hue ~85, to harmonize with the 自然
   ground rather than the first khaki-olive pass); the label sits raised (top-lit
   highlight + cast shadow below, §lab R1). The label is a brighter tonal sage
   (#d8e2ca) — read through the relief, not a dark fill (blind emboss, rootedly ref);
   contrast is intentionally low, so the raised shadow carries legibility. The
   grain is a desaturated fractal-noise data URI (no CSS gradient → clears the
   §5.8 lint). Scoped to nature only: 晨光 keeps the frost, 星辰 keeps its own. */
html[data-theme="nature"] .site-header > .header-button {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #b3c29e 0%, #9fb188 100%);
  color: #d8e2ca;
  border: 1px solid rgba(86, 100, 70, 0.42);
  text-shadow:
    0 -1px 0.5px rgba(255, 255, 255, 0.72),
    0 1.5px 2px rgba(36, 48, 26, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 3px rgba(70, 86, 56, 0.14),
    0 6px 14px rgba(40, 56, 32, 0.16);
  transition:
    transform 200ms var(--ease-out-expo),
    box-shadow 200ms var(--ease-out-expo),
    text-shadow 200ms var(--ease-out-expo);
}

html[data-theme="nature"] .site-header > .header-button::before {
  display: none; /* drop the inherited blue hover wash; the kraft carries the surface */
}

html[data-theme="nature"] .site-header > .header-button:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 3px rgba(70, 86, 56, 0.16),
    0 9px 20px rgba(40, 56, 32, 0.22);
}

/* Press — the chip pushes in: drop shadow collapses, the inset flips to a top
   inner shadow, and the raised label momentarily debosses (relief inverted).
   Snaps down fast (70ms); releases back up via the 200ms base transition. */
html[data-theme="nature"] .site-header > .header-button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(40, 56, 32, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28),
    0 2px 5px rgba(40, 56, 32, 0.14);
  text-shadow:
    0 1px 0.5px rgba(255, 255, 255, 0.4),
    0 -0.5px 0.5px rgba(36, 48, 26, 0.4);
  transition-duration: 70ms;
}

/* No glossy sheen sweep — a screen-blend highlight fights the matte pressed-paper
   material. Hide the .bilingual sheen overlay on this button. */
html[data-theme="nature"] .site-header > .header-button .bilingual::after {
  display: none;
}

/* 星辰 (stellar) theme header CTA — dark smoked-glass frost, borderless.
   The lab's V5 "Tinted Frost" picked for 星辰: a cool blue-tinted translucent
   pane (backdrop-blur picks up the deep flow behind it) with NO rim. The edge is
   carried entirely by a faint warm-starlight inner highlight (gold
   rgba(201,164,85)) along the top and a soft cast shadow below, so the chip
   floats off the dark ground without a drawn border (user: 把边框去掉). Cream
   label (#ece3cf) — its contrast against the chip is intentionally not matched
   (user: 不强求字体和按钮色一致). Hover deepens the glass + shadow rather than
   lifting. Scoped to stellar only: 晨光 keeps the frost, 自然 keeps its emboss. */
html[data-theme="stellar"] .site-header > .header-button {
  background: linear-gradient(180deg, rgba(56, 80, 124, 0.5), rgba(21, 30, 56, 0.4));
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  color: #ece3cf;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(201, 164, 85, 0.14),
    0 4px 16px rgba(0, 0, 0, 0.45);
  transition:
    transform 220ms var(--ease-out-expo),
    background 220ms var(--ease-out-expo),
    box-shadow 220ms var(--ease-out-expo),
    border-color 220ms var(--ease-out-expo);
}

html[data-theme="stellar"] .site-header > .header-button::before {
  display: none; /* drop the inherited blue hover wash; the frost carries the surface */
}

html[data-theme="stellar"] .site-header > .header-button:hover {
  transform: none;
  background: linear-gradient(180deg, rgba(64, 76, 112, 0.62), rgba(24, 31, 54, 0.5));
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(201, 164, 85, 0.22),
    0 6px 22px rgba(0, 0, 0, 0.5);
}

html[data-theme="stellar"] .site-header > .header-button:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(41, 58, 94, 0.56), rgba(13, 19, 37, 0.5));
  border-color: transparent;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.42),
    inset 0 -1px 0 rgba(201, 164, 85, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.42);
  transition-duration: 70ms;
}

/* No glossy sheen sweep — a bright screen-blend highlight fights the matte
   smoked glass (matches the lab, which showed no sheen). Hide it here too. */
html[data-theme="stellar"] .site-header > .header-button .bilingual::after {
  display: none;
}

.header-button::before,
.primary-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(62, 99, 255, 0.3), rgba(62, 99, 255, 0));
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
}

.header-button:hover::before,
.primary-action:hover::before {
  opacity: 1;
}

.secondary-action {
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.58);
  font-weight: 800;
}

.header-button:hover,
.primary-action:hover,
.secondary-action:hover,
.feature-card a:hover,
.workflow-grid a:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(19, 29, 48, 0.22);
}

/* Inline CTAs (ANALYZE / LEARN MORE / REPO / OPEN …) had hover but no press.
   Press settles toward the surface; :hover:active beats the translateY(-3px)
   hover above, plain :active covers touch and the no-lift buttons.
   ponytail: transform only — collapsing these shadows would mean out-speccing
   the page-tools/theme hover shadows for little gain. */
.primary-action:active,
.secondary-action:active,
.carousel-card em:active,
.feature-card a:active,
.workflow-grid a:active,
.note-card a:active,
.learn-card > a:active,
.tool-collapse-action:active,
.ws-action-btn:active,
.info-panel a:active,
.primary-action:hover:active,
.secondary-action:hover:active,
.feature-card a:hover:active,
.workflow-grid a:hover:active {
  transform: translateY(1px) scale(0.97);
  /* snappy fast-in (matches the cards); release glides back on the base 280ms */
  transition: transform 80ms var(--ease-out-expo);
}

/* ── Hero ── */

.home-hero {
  --home-grid-max: var(--shell-max);
  --home-grid-gap: var(--space-24);
  min-height: calc(100vh - 24px * 2 - 96px - 24px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--home-grid-gap);
  max-width: var(--home-grid-max);
  margin: var(--space-24) auto 0;
  padding: var(--space-32);
  background: var(--hero-bg);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  opacity: 0;
  animation: heroReveal 0.6s var(--ease-out-expo) 0.05s forwards;
}

body.page-home .home-hero {
  border-color: var(--flow-ui-border);
  box-shadow:
    0 28px 80px rgb(var(--flow-ui-shadow-rgb) / 0.18),
    inset 0 1px 0 var(--flow-ui-inset);
  backdrop-filter: blur(var(--flow-backdrop-blur)) saturate(1.12);
  -webkit-backdrop-filter: blur(var(--flow-backdrop-blur)) saturate(1.12);
}

body.page-home .site-shell.page-parallax-ready .hero-intro {
  transform: translate3d(var(--home-parallax-intro-x), var(--home-parallax-intro-y), 0);
  will-change: transform;
}

@keyframes heroReveal {
  0% { opacity: 0; transform: translateY(30px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-intro {
  --hero-intro-optical-y: -10px;
  display: flex;
  grid-column: 1 / span 5;
  flex-direction: column;
  justify-content: center;
  translate: 0 var(--hero-intro-optical-y);
  min-width: 0;
}

.hero-intro .eyebrow {
  padding-left: 2ch;
  text-transform: none;
  opacity: 0;
  animation: fadeUp 0.5s var(--ease-out-expo) 0.1s forwards;
}

.hero-intro h2 {
  margin: 0;
  max-width: 7ch;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(3.1rem, 4.8vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: var(--weight-display); /* editorial "越大越细" — was 900 */
  opacity: 0;
  animation: fadeUp 0.5s var(--ease-out-expo) 0.12s forwards;
}

.hero-intro h2.hero-title-rotator {
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  transform-origin: 50% 62%;
  will-change: transform;
  transition: max-width 0.24s var(--ease-smooth), font-size 0.24s var(--ease-smooth), line-height 0.24s var(--ease-smooth);
}

.hero-intro h2.hero-title-rotator.is-hero-title-dragging {
  cursor: grabbing;
}

.hero-intro h2.hero-title-rotator.is-variable-proximity {
  font-variation-settings: "wght" 360, "opsz" 9;
}

.hero-intro h2.hero-title-rotator.is-variable-proximity * {
  text-shadow:
    0 0 calc(var(--hero-title-glow-core-size, 14px) * var(--hero-title-proximity-glow, 0)) rgb(var(--hero-title-glow-core-rgb, 255 255 250) / calc(var(--hero-title-glow-core-alpha, 0.58) * var(--hero-title-proximity-glow, 0))),
    0 0 calc(var(--hero-title-glow-halo-size, 42px) * var(--hero-title-proximity-glow, 0)) rgb(var(--hero-title-glow-halo-rgb, 255 226 138) / calc(var(--hero-title-glow-halo-alpha, 0.42) * var(--hero-title-proximity-glow, 0)));
  transition:
    font-variation-settings 0.16s var(--ease-smooth),
    text-shadow 0.16s var(--ease-smooth);
}

/* 当 initHeroCinema（GSAP+SplitText）接管标题时，关掉它的 CSS fadeUp——
   改由逐字上浮负责入场（GSAP 通过内联 opacity 控制可见性）。JS 缺席时此类名
   永不添加，上面的 fadeUp 仍是兜底。 */
.hero-intro.mx-hero-cinema h2.hero-title-rotator,
.hero-intro.mx-hero-cinema .eyebrow,
.hero-intro.mx-hero-cinema .system-status {
  animation: none;
}

.hero-intro h2.hero-title-rotator:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 8px;
}

.hero-intro h2.hero-title-rotator.is-hero-title-variant {
  max-width: min(12em, 100%);
  overflow-wrap: anywhere;
  font-size: clamp(3rem, 4vw, 3.85rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.hero-intro h2.hero-title-rotator.is-hero-title-variant.is-hero-title-tight {
  font-size: clamp(2.72rem, 3.65vw, 3.45rem);
  line-height: 1.1;
}

.hero-intro h2.hero-title-rotator.is-hero-title-variant.is-hero-title-tight span {
  display: block;
  white-space: nowrap;
}

.hero-intro h2 span {
  display: block;
  color: var(--hero-emphasis-color, var(--blue));
  font-style: italic;
  letter-spacing: -0.03em;
  text-shadow: var(--hero-emphasis-shadow, none);
  transition: color 0.5s var(--ease-smooth), text-shadow 0.5s var(--ease-smooth);
}

.hero-intro h2.hero-title-rotator.is-hero-title-variant span {
  letter-spacing: 0;
}

html[data-performance="low"]:not([data-theme="nature"]):not([data-theme="stellar"]) body.page-home .hero-intro h2 span {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro h2.hero-title-rotator {
    cursor: pointer;
    user-select: text;
    touch-action: auto;
    will-change: auto;
  }

  .hero-intro h2.hero-title-rotator.is-variable-proximity * {
    transition: none;
  }
}

/* Typewriter cursor — zero layout width, visual via box-shadow */
.hero-intro h2 .typewriter-cursor {
  display: inline-block;
  width: 0;
  height: 0.85em;
  vertical-align: baseline;
  position: relative;
  top: 0.04em;
  box-shadow: 3px 0 0 var(--ink);
  animation: cursorBlink 0.6s steps(1) infinite;
}

.hero-intro h2 span .typewriter-cursor {
  box-shadow: 3px 0 0 var(--blue);
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-24);
  opacity: 0;
  animation: fadeUp 0.5s var(--ease-out-expo) 0.25s forwards;
}

.system-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-24);
  padding: 0;
  width: fit-content;
  opacity: 0;
  animation: fadeUp 0.5s var(--ease-out-expo) 0.2s forwards;
}

.system-status:hover {
  transform: none;
}

#datetime {
  font-variant-numeric: tabular-nums;
}

.status-indicator {
  display: none;
}

.status-indicator::after {
  display: none;
}

@keyframes radarPulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

.status-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.status-text span {
  color: color-mix(in oklch, var(--muted), transparent 20%);
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 350;
  letter-spacing: 0.03em;
  line-height: 1.35;
  padding-left: 2ch;
}

.status-text strong {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-16);
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out-expo) 1.25s forwards;
}

.hero-tags span,
.badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
}

.hero-tags span:first-child,
.signal .badge {
  background: rgba(46, 125, 105, 0.12);
  color: var(--green);
}

.hero-tags span:last-child {
  background: rgba(62, 99, 255, 0.12);
  color: var(--blue);
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-16);
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out-expo) 1.4s forwards;
}

.hero-meta strong {
  color: var(--ink);
  font-weight: 800;
}

.hero-meta .hero-divider {
  width: 1px;
  height: 12px;
  background: rgba(24, 36, 58, 0.14);
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── Hero Panel ── */

.hero-panel {
  --hero-panel-optical-y: -10px;
  grid-column: 7 / -1;
  align-self: center;
  translate: 0 var(--hero-panel-optical-y);
  padding: var(--space-24);
  background: var(--hero-panel-bg);
  border: 1px solid rgba(24, 36, 58, 0.06);
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 24px 48px rgba(19, 30, 47, 0.08);
  opacity: 0;
  animation: panelFadeIn 0.5s var(--ease-out-expo) 0.1s forwards;
}

body.page-home .hero-panel {
  border-color: var(--flow-ui-border);
  box-shadow:
    0 1px 0 var(--flow-ui-inset),
    0 22px 52px rgb(var(--flow-ui-shadow-rgb) / 0.13);
}

body.page-home.has-home-panel-tint .hero-panel {
  background: var(--home-panel-tint-bg, var(--hero-panel-bg));
  border-color: var(--home-panel-tint-border, var(--flow-ui-border));
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.5),
    0 20px 56px rgb(var(--home-panel-tint-shadow-rgb, var(--flow-ui-shadow-rgb)) / 0.18);
}

@keyframes panelFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-8) var(--space-8) var(--space-16);
}

.hero-panel .panel-head p {
  text-transform: none;
}

.hero-tint-lab {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  color: color-mix(in oklch, var(--ink) 74%, var(--muted));
  pointer-events: auto;
}

.hero-tint-lab[hidden] {
  display: none !important;
}

.hero-tint-pick,
.hero-tint-compare,
.hero-tint-save,
.hero-tint-reset,
.hero-tint-target,
.hero-tint-accent,
.hero-tint-range {
  min-height: 32px;
  border: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--panel-strong) 62%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.38);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

.hero-tint-pick,
.hero-tint-compare,
.hero-tint-save,
.hero-tint-reset,
.hero-tint-target,
.hero-tint-accent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.hero-tint-pick:hover,
.hero-tint-compare:hover,
.hero-tint-save:hover,
.hero-tint-reset:hover,
.hero-tint-target:hover,
.hero-tint-accent:hover {
  transform: translateY(-1px);
}

.hero-tint-compare.is-comparing {
  color: var(--home-panel-tint-color, var(--blue));
}

.hero-tint-save.is-saved {
  color: var(--home-panel-tint-color, var(--blue));
}

.hero-tint-target,
.hero-tint-accent {
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  color: color-mix(in oklch, var(--muted) 82%, var(--ink));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.hero-tint-target[aria-pressed="true"] {
  color: var(--home-panel-tint-color, var(--blue));
}

.hero-tint-accent {
  color: var(--home-card-tint-color, var(--home-panel-tint-color, var(--blue)));
}

.hero-tint-pick.is-picking {
  color: var(--home-panel-tint-color, var(--blue));
}

body.page-home.is-panel-tint-picking,
body.page-home.is-panel-tint-picking * {
  cursor: crosshair !important;
}

.hero-tint-swatch {
  width: 16px;
  height: 16px;
  border: 1px solid rgb(255 255 255 / 0.62);
  border-radius: 50%;
  background: var(--home-panel-tint-color, #90bfe0);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--ink) 12%, transparent);
}

.hero-tint-color {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.hero-tint-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.hero-tint-color::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}

.hero-tint-range {
  display: inline-grid;
  grid-template-columns: auto 40px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}

.hero-tint-range span {
  color: color-mix(in oklch, var(--muted) 80%, var(--ink));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hero-tint-range input {
  width: 40px;
  margin: 0;
  accent-color: var(--home-panel-tint-color, var(--blue));
}

.panel-head span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* ── Tool Links ── */

.tool-link {
  --tool-accent: var(--green);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  margin-top: var(--space-16);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--tool-accent) 5%, var(--panel-strong)), var(--panel-strong) 68%);
  border: 1px solid rgba(24, 36, 58, 0.05);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
  transition:
    transform 320ms var(--ease-out-expo),
    background 180ms var(--ease-smooth),
    border-color 180ms var(--ease-smooth),
    box-shadow 320ms var(--ease-smooth);
  opacity: 0;
  animation: cardReveal 0.6s var(--ease-out-expo) forwards;
}

.tool-link:nth-child(2) { animation-delay: 0.8s; }
.tool-link:nth-child(3) { animation-delay: 0.95s; }
.tool-link:nth-child(4) { animation-delay: 1.1s; }
.tool-link:nth-child(5) { animation-delay: 1.25s; }
.tool-link:nth-child(6) { animation-delay: 1.4s; }

@keyframes cardReveal {
  0% { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.tool-link:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: color-mix(in oklch, var(--tool-accent) 22%, rgba(24, 36, 58, 0.1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 12px 32px color-mix(in oklch, var(--tool-accent) 18%, transparent);
}

/* Press settles surface elevation: drop the hover lift + collapse the shadow, fast-in. */
.tool-link:active {
  transform: translateY(0) scale(0.985);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 6px color-mix(in oklch, var(--tool-accent) 12%, transparent);
  transition:
    transform 80ms var(--ease-out-expo),
    box-shadow 80ms var(--ease-out-expo);
}

.tool-link.signal {
  --tool-accent: var(--green);
}

.tool-link.commerce {
  --tool-accent: var(--amber);
}

.commerce .badge {
  color: #8c5b0c;
  background: rgba(213, 154, 57, 0.15);
}

.tool-link.preview {
  --tool-accent: var(--violet);
}

.preview .badge {
  color: var(--violet);
  background: rgba(101, 94, 255, 0.12);
}

.tool-link.ops {
  --tool-accent: var(--ink);
}

.tool-link.image {
  --tool-accent: var(--rose);
}

.image .badge {
  color: var(--rose);
  background: rgba(212, 99, 123, 0.12);
}

.tool-link.formula {
  --tool-accent: var(--blue);
}

.formula .badge {
  color: var(--blue);
  background: rgba(62, 99, 255, 0.12);
}

.tool-link strong {
  display: block;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 21px;
  line-height: 1.1;
  font-weight: var(--weight-title); /* was 900 */
}

.tool-link p {
  margin: var(--space-8) 0 0;
  font-size: 14px;
  color: var(--muted);
}

.tool-link em {
  font-style: normal;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-sm);
  background: rgba(24, 36, 58, 0.04);
  transition: background 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), transform 0.3s var(--ease-out-expo);
}

.tool-link:hover em {
  background: var(--ink);
  color: var(--bg);
  transform: translateX(2px);
}

/* ── Carousel (hero panel infinite scroll) ── */

.carousel-wrapper {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  perspective: 1200px;
}

.carousel-wrapper.is-dragging { cursor: grabbing; }

.hero-panel.carousel-wrapper {
  --carousel-tilt-x: 0deg;
  --carousel-tilt-y: 0deg;
  transform:
    rotateX(var(--carousel-tilt-x))
    rotateY(var(--carousel-tilt-y));
  transform-origin: center;
  transition:
    background 0.5s var(--ease-smooth),
    border-color 0.5s var(--ease-smooth),
    box-shadow 0.5s var(--ease-smooth),
    filter 1s var(--ease-out-expo),
    opacity 1s var(--ease-out-expo),
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-panel.carousel-wrapper:hover,
.hero-panel.carousel-wrapper.is-dragging {
  transition:
    background 0.5s var(--ease-smooth),
    border-color 0.5s var(--ease-smooth),
    box-shadow 0.5s var(--ease-smooth),
    filter 1s var(--ease-out-expo),
    opacity 1s var(--ease-out-expo),
    transform 0.08s var(--ease-out-expo);
}

.panel-head span {
  font-size: 11px;
  font-weight: 500;
  color: color-mix(in oklch, var(--muted), transparent 30%);
}

.carousel-viewport {
  /* card height carries the breathing room (the 8px gap is contract-pinned). */
  --card-h: 110px;
  --card-gap: var(--space-8);
  height: calc(var(--card-h) * 5 + var(--card-gap) * 4);
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-lg);
  padding: 0 var(--space-16);
  margin: 0 calc(var(--space-16) * -1);
  mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
}

.carousel-wrapper.is-static-carousel .carousel-viewport {
  mask-image: none;
  -webkit-mask-image: none;
}

.carousel-track {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  will-change: transform;
}

.carousel-card {
  --card-accent: var(--green);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  /* Pin the row to the card's content box so a tall (3-line) text block can't grow
     the row past the card and drop the centered button/number below visual centre. */
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-16);
  height: var(--card-h);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--card-accent) 5%, var(--panel-strong)), var(--panel-strong) 68%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(19, 30, 47, 0.06),
    0 4px 12px rgba(19, 30, 47, 0.06);
  transition:
    transform 280ms var(--ease-out-expo),
    background 220ms var(--ease-smooth),
    box-shadow 280ms var(--ease-smooth),
    border-color 200ms var(--ease-smooth);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}

.carousel-card.signal   { --card-accent: var(--green);  }
.carousel-card.commerce { --card-accent: var(--amber);  }
.carousel-card.preview  { --card-accent: var(--violet); }
.carousel-card.formula  { --card-accent: var(--blue);   }
.carousel-card.image    { --card-accent: var(--rose);   }

body.page-home .carousel-card {
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--card-accent) 5%, var(--panel-strong)), var(--panel-strong) 70%);
  border-color: var(--flow-ui-card-border);
  box-shadow:
    inset 0 1px 0 var(--flow-ui-inset),
    0 8px 22px rgb(var(--flow-ui-shadow-rgb) / 0.08);
}

html[data-theme="nature"] body.page-home .carousel-card,
html[data-theme="stellar"] body.page-home .carousel-card {
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--card-accent) 6%, var(--panel-strong)), var(--panel-strong) 70%);
  border-color: var(--flow-ui-card-border);
  box-shadow:
    inset 0 1px 0 var(--flow-ui-inset),
    0 8px 22px rgb(var(--flow-ui-shadow-rgb) / 0.08);
}

.carousel-card::before {
  content: attr(data-port-index);
  width: 32px;
  align-self: center;
  color: var(--card-accent);
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 1;
  opacity: 0.78;
  text-align: center;
  transform: translateY(1px);
  transition: opacity 200ms var(--ease-smooth), transform 220ms var(--ease-out-expo);
}

.carousel-card:hover::before {
  opacity: 1;
  transform: translateY(0);
}

.carousel-card:hover {
  transform: translateY(-2px) scale(1.012);
  border-color: rgba(24, 36, 58, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 24px rgba(19, 30, 47, 0.1),
    0 1px 4px rgba(19, 30, 47, 0.06);
}

.carousel-card.signal:hover  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 24px rgba(0,145,118,0.16), 0 1px 4px rgba(0,145,118,0.09); }
.carousel-card.commerce:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 24px rgba(200,141,38,0.16), 0 1px 4px rgba(200,141,38,0.09); }
.carousel-card.preview:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 24px rgba(107,113,200,0.16), 0 1px 4px rgba(107,113,200,0.09); }
.carousel-card.formula:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 24px rgba(90,119,202,0.16), 0 1px 4px rgba(90,119,202,0.09); }
.carousel-card.image:hover   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 24px rgba(187,86,108,0.16), 0 1px 4px rgba(187,86,108,0.09); }

.carousel-card:active {
  transform: translateY(0) scale(0.985);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 3px rgba(19, 30, 47, 0.08);
  transition:
    transform 80ms var(--ease-out-expo),
    box-shadow 80ms var(--ease-out-expo);
}

/* Match per-category :hover specificity so the collapse wins on hover-press. */
.carousel-card.signal:active,
.carousel-card.commerce:active,
.carousel-card.preview:active,
.carousel-card.formula:active,
.carousel-card.image:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 3px rgba(19, 30, 47, 0.08);
}

.carousel-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.carousel-card strong {
  position: relative;
  display: inline-block;
  margin-left: -5px;
  padding: 0 5px 6px;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 17px;
  font-weight: var(--weight-title); /* was 800 */
  letter-spacing: -0.02em;
  line-height: 1.2;
  isolation: isolate;
}

/* Procedural brush "shader" — an SVG feTurbulence drives a feDisplacementMap
   that shoves a tapered bar's edges around (bristle-rough ink, not a CSS box);
   a second turbulence carves dry-brush streaks. Left end fades up (起笔 touch-
   down), right thins into 飞白 (落笔 lift). One mask, stretched + rotated per
   card — the filter region is cropped tight to the displacement range so the
   turbulence rasterises over the smallest possible buffer (once per card width). */
.carousel-card strong {
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-0.06' y='-0.45' width='1.12' height='1.9'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.5' numOctaves='2' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='9' xChannelSelector='R' yChannelSelector='G' result='shape'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.9 -0.45' result='sa'/%3E%3CfeComposite in='shape' in2='sa' operator='in'/%3E%3C/filter%3E%3ClinearGradient id='t' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0.08'/%3E%3Cstop offset='0.06' stop-color='%23fff'/%3E%3Cstop offset='0.88' stop-color='%23fff' stop-opacity='0.5'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0.03'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='3' y='10' width='194' height='20' fill='url(%23t)' filter='url(%23f)'/%3E%3C/svg%3E");
}

.carousel-card strong::before,
.carousel-card strong::after {
  content: "";
  position: absolute;
  left: -6px;
  right: var(--hl-end, -8px);
  bottom: var(--hl-drop, -1px);
  height: var(--hl-h, 0.92em);
  z-index: -1;
  pointer-events: none;
  transform-origin: left center;
  transform: rotate(var(--hl-rot, -1.1deg));
  /* ponytail: one shared mask, rasterised at most once per card width and cached;
     the animation below touches only paint props (no layout). */
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
}

/* Ink — feathered base wash plus two off-centre density pools, then carved by
   the brush mask. Paints itself on from 起笔 to 落笔 on entrance. */
.carousel-card strong::before {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, var(--card-accent) 50%, transparent) 8%,
    color-mix(in oklch, var(--card-accent) 36%, transparent) 50%,
    color-mix(in oklch, var(--card-accent) 52%, transparent) 92%,
    transparent
  );
  filter: saturate(1.12);
  /* deliberate accelerate-then-land curve so it reads as a brush stroke being
     drawn, not a bar wiping in: slow 起笔, fast body, settled 落笔. */
  animation: hl-draw 0.92s cubic-bezier(0.66, 0, 0.32, 1) both;
  animation-delay: calc(var(--hl-i, 0) * 100ms + 160ms);
  transition:
    filter 0.22s var(--ease-smooth),
    transform 0.32s var(--ease-out-expo);
}

/* The life — a glint of wet ink sweeps across the stroke on an endless loop,
   each card phase-shifted, clipped to the same brush shape. */
.carousel-card strong::after {
  background: linear-gradient(
    100deg,
    transparent 36%,
    color-mix(in oklch, var(--card-accent) 66%, transparent) 50%,
    transparent 64%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0;
  animation: hl-sheen 3.2s linear infinite;
  animation-delay: calc(var(--hl-i, 0) * -0.7s);
}

/* Per-stroke character — different tilt (a couple lean the other way),
   thickness, length and drop so the one shared brush never looks stamped. */
.carousel-card:nth-child(1) { --hl-i: 0; --hl-rot: -1.3deg; --hl-h: 0.92em; --hl-end: -9px;  --hl-drop: -1px; }
.carousel-card:nth-child(2) { --hl-i: 1; --hl-rot: 0.9deg;  --hl-h: 1em;    --hl-end: -5px;  --hl-drop: 0; }
.carousel-card:nth-child(3) { --hl-i: 2; --hl-rot: -2deg;   --hl-h: 0.82em; --hl-end: -12px; --hl-drop: -2px; }
.carousel-card:nth-child(4) { --hl-i: 3; --hl-rot: 1.5deg;  --hl-h: 0.96em; --hl-end: 2px;   --hl-drop: -1px; }
.carousel-card:nth-child(5) { --hl-i: 4; --hl-rot: -0.6deg; --hl-h: 1.06em; --hl-end: -7px;  --hl-drop: 0; }

.carousel-card:hover strong::before,
.carousel-card:focus-visible strong::before {
  filter: saturate(1.3) brightness(1.03);
  transform: rotate(calc(var(--hl-rot, -1.1deg) * 0.5)) scaleY(1.08);
}

.carousel-card:hover strong::after,
.carousel-card:focus-visible strong::after {
  animation-duration: 2.1s;
}

@keyframes hl-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes hl-sheen {
  0% { background-position: 160% 0; }
  62% { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

/* Low-power mode (the same flag that freezes the carousel track): drop the
   perpetual per-frame paint of the sheen and the entrance draw — the static
   brush stays, just no animation. */
html[data-performance="low"] .carousel-card strong::before,
html[data-performance="low"] .carousel-card strong::after {
  animation: none;
}

.carousel-card > div {
  min-width: 0;
  min-height: 0;
  /* Top-align the text so the pinned row clips its bottom (the quote), not the
     title — the number and button stay centred on the card. */
  align-self: start;
}

.carousel-card .desc {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 12.5px;
  color: color-mix(in oklch, var(--muted), var(--ink) 10%);
  font-weight: 500;
  line-height: 1.28;
}

.workbench-hidden {
  display: none;
}

.carousel-card em {
  font-style: normal;
  padding: var(--space-8) var(--space-16);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  font-size: 12px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  line-height: 1;
  transition: transform 280ms var(--ease-out-expo), opacity 200ms var(--ease-smooth);
  opacity: 0.85;
}

/* ── Animated Icons for Buttons ── */

.motion-trigger .hover-icon {
  overflow: visible;
  transform-box: fill-box;
}

.motion-trigger .hover-icon :where(path, rect, circle, g) {
  transform-box: fill-box;
  transform-origin: center;
}

.motion-trigger .icon-book .book-left { transform-origin: right center; }
.motion-trigger .icon-book .book-right { transform-origin: left center; }

.motion-trigger .icon-book .book-line {
  opacity: 0.36;
  stroke-dasharray: 8;
  stroke-dashoffset: 8;
}

.motion-trigger .icon-chart .chart-bar { transform-origin: bottom; }
.motion-trigger .icon-chart .chart-axis { transform-origin: left bottom; }

.motion-trigger .icon-check .check-path {
  stroke-dasharray: 10;
  stroke-dashoffset: 0;
}

.motion-trigger .icon-draft .draft-pen-group {
  transform-origin: center;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-book .book-left {
  animation: ih-book-cover-left 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-book .book-right {
  animation: ih-book-cover-right 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-book .book-line-1 {
  animation: ih-book-line-draw 520ms var(--ease-out-expo) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-book .book-line-2 {
  animation: ih-book-line-draw 520ms var(--ease-out-expo) 70ms both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-book .book-line-3 {
  animation: ih-book-line-draw 520ms var(--ease-out-expo) 140ms both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-rocket {
  animation: ih-rocket-launch 680ms cubic-bezier(0.18, 0.84, 0.26, 1) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-rocket .rocket-exhaust {
  animation: ih-rocket-flame 560ms var(--ease-out-expo) 60ms both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-eye .eye-shape {
  animation: ih-eye-focus 420ms var(--ease-out-expo) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-eye .eye-pupil {
  animation: ih-eye-pupil-scan 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-check {
  animation: ih-check-settle 430ms cubic-bezier(0.18, 0.84, 0.26, 1) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-check .check-ring {
  animation: ih-check-ring-pulse 520ms var(--ease-out-expo) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-check .check-path {
  animation: ih-check-draw 520ms var(--ease-out-expo) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-chart .chart-axis {
  animation: ih-chart-axis-pulse 540ms var(--ease-out-expo) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-chart .chart-bar {
  animation: ih-chart-bar-rise 660ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-chart .bar-1 { animation-delay: 0ms; }
.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-chart .bar-2 { animation-delay: 80ms; }
.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-chart .bar-3 { animation-delay: 160ms; }

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-draft .draft-pen-group {
  animation: ih-draft-pen-lift 840ms var(--ease-in-out) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-book .book-left {
  animation: ih-book-cover-left 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-book .book-right {
  animation: ih-book-cover-right 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-book .book-line-1 {
  animation: ih-book-line-draw 520ms var(--ease-out-expo) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-book .book-line-2 {
  animation: ih-book-line-draw 520ms var(--ease-out-expo) 70ms both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-book .book-line-3 {
  animation: ih-book-line-draw 520ms var(--ease-out-expo) 140ms both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-rocket {
  animation: ih-rocket-launch 680ms cubic-bezier(0.18, 0.84, 0.26, 1) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-rocket .rocket-exhaust {
  animation: ih-rocket-flame 560ms var(--ease-out-expo) 60ms both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-eye .eye-shape {
  animation: ih-eye-focus 420ms var(--ease-out-expo) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-eye .eye-pupil {
  animation: ih-eye-pupil-scan 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-check {
  animation: ih-check-settle 430ms cubic-bezier(0.18, 0.84, 0.26, 1) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-check .check-ring {
  animation: ih-check-ring-pulse 520ms var(--ease-out-expo) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-check .check-path {
  animation: ih-check-draw 520ms var(--ease-out-expo) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-chart .chart-axis {
  animation: ih-chart-axis-pulse 540ms var(--ease-out-expo) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-chart .chart-bar {
  animation: ih-chart-bar-rise 660ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-chart .bar-1 { animation-delay: 0ms; }
.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-chart .bar-2 { animation-delay: 80ms; }
.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-chart .bar-3 { animation-delay: 160ms; }

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-draft .draft-pen-group {
  animation: ih-draft-pen-lift 840ms var(--ease-in-out) both;
}

@keyframes ih-book-cover-left {
  0%, 100% { transform: skewY(0deg) translateX(0); }
  45% { transform: skewY(-7deg) translateX(-1px); }
}

@keyframes ih-book-cover-right {
  0%, 100% { transform: skewY(0deg) translateX(0); }
  45% { transform: skewY(7deg) translateX(1px); }
}

@keyframes ih-book-line-draw {
  0% { opacity: 0; stroke-dashoffset: 8; }
  45% { opacity: 0.9; }
  100% { opacity: 0.7; stroke-dashoffset: 0; }
}

@keyframes ih-rocket-launch {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  42% { transform: translate(5px, -5px) rotate(9deg); opacity: 0.72; }
  43% { transform: translate(-5px, 5px) rotate(9deg); opacity: 0; }
  62% { transform: translate(-2px, 2px) rotate(-4deg); opacity: 1; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

@keyframes ih-rocket-flame {
  0%, 100% { opacity: 0; transform: translate(0, 0) scaleY(0.8); }
  32% { opacity: 1; transform: translate(-1px, 1px) scaleY(1.5); }
  64% { opacity: 0.42; transform: translate(-2px, 2px) scaleY(1.1); }
}

@keyframes ih-eye-focus {
  0%, 100% { transform: scaleY(1); }
  42% { transform: scaleY(0.82); }
}

@keyframes ih-eye-pupil-scan {
  0%, 100% { transform: translate(0, 0) scale(1); }
  28% { transform: translate(2px, -1px) scale(0.72); }
  60% { transform: translate(-1px, 1px) scale(0.9); }
}

@keyframes ih-check-settle {
  0%, 100% { transform: scale(1); }
  46% { transform: scale(1.14) rotate(-3deg); }
}

@keyframes ih-check-ring-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  48% { opacity: 0.72; transform: scale(0.9); }
}

@keyframes ih-check-draw {
  0% { stroke-dashoffset: 10; }
  100% { stroke-dashoffset: 0; }
}

@keyframes ih-chart-axis-pulse {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  44% { transform: scaleX(1.08); opacity: 0.72; }
}

@keyframes ih-chart-bar-rise {
  0% { transform: scaleY(0.34); opacity: 0.5; }
  54% { transform: scaleY(1.2); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes ih-draft-pen-lift {
  0% { transform: translate(0, 0) rotate(0deg); }
  14% { transform: translate(1px, -2px) rotate(-6deg); }
  28% { transform: translate(-1px, -4px) rotate(-4deg); }
  42% { transform: translate(1px, -6px) rotate(-6deg); }
  56% { transform: translate(-1px, -8px) rotate(-4deg); }
  70% { transform: translate(0, -10px) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.carousel-card:hover em {
  transform: translateY(-1px);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-card,
  .carousel-card::before,
  .carousel-card strong::before,
  .carousel-card strong::after,
  .carousel-card em { transition-duration: 0.01ms !important; }

  .carousel-card strong::before,
  .carousel-card strong::after { animation: none !important; }

  .motion-trigger .hover-icon,
  .motion-trigger .hover-icon :where(path, rect, circle, g) {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}


/* Glass edge — frosted cards get a crisp light contour on dark themes (透光而不透型) */
html[data-theme="stellar"] .carousel-card,
html[data-theme="stellar"] .feature-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
}


/* Stellar theme carousel overrides */
html[data-theme="stellar"] .carousel-card {
  border-color: rgba(201, 164, 85, 0.12);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--card-accent) 10%, rgba(28, 34, 60, 0.25)), rgba(28, 34, 60, 0.25) 70%);
  box-shadow:
    inset 0 1px 0 rgba(201, 164, 85, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.35);
}

html[data-theme="stellar"] .carousel-card:hover {
  border-color: rgba(201, 164, 85, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(201, 164, 85, 0.1),
    0 6px 24px rgba(0, 0, 0, 0.4);
}

html[data-theme="stellar"] .carousel-card em {
  background: rgba(201, 164, 85, 0.12);
  color: var(--ink);
}

html[data-theme="stellar"] .carousel-card:hover em {
  background: rgba(201, 164, 85, 0.22);
}

html[data-theme="stellar"] .carousel-card .desc {
  color: var(--muted);
}

html[data-theme="stellar"] .carousel-card.signal:hover  { box-shadow: inset 0 1px 0 rgba(201,164,85,0.06), 0 6px 24px rgba(95,191,163,0.18); }
html[data-theme="stellar"] .carousel-card.commerce:hover { box-shadow: inset 0 1px 0 rgba(201,164,85,0.06), 0 6px 24px rgba(201,164,85,0.2); }
html[data-theme="stellar"] .carousel-card.preview:hover  { box-shadow: inset 0 1px 0 rgba(201,164,85,0.06), 0 6px 24px rgba(126,168,216,0.2); }
html[data-theme="stellar"] .carousel-card.formula:hover  { box-shadow: inset 0 1px 0 rgba(201,164,85,0.06), 0 6px 24px rgba(126,168,216,0.18); }
html[data-theme="stellar"] .carousel-card.image:hover    { box-shadow: inset 0 1px 0 rgba(201,164,85,0.06), 0 6px 24px rgba(212,137,122,0.18); }

html body.page-home.has-home-card-tint .carousel-card {
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--card-accent) var(--home-card-tint-accent-strength, 18%), transparent), transparent 58%),
    var(--home-card-tint-bg);
  border: 1px solid var(--home-card-tint-border, var(--flow-ui-card-border));
  border-color: var(--home-card-tint-border, var(--flow-ui-card-border));
  box-shadow:
    inset 0 1px 0 var(--flow-ui-inset),
    0 8px 24px rgb(var(--home-card-tint-shadow-rgb, var(--flow-ui-shadow-rgb)) / 0.11);
}

/* Press collapse must outrank the themed :hover above (same specificity, later wins). */
html[data-theme="stellar"] .carousel-card.signal:active,
html[data-theme="stellar"] .carousel-card.commerce:active,
html[data-theme="stellar"] .carousel-card.preview:active,
html[data-theme="stellar"] .carousel-card.formula:active,
html[data-theme="stellar"] .carousel-card.image:active {
  box-shadow: inset 0 1px 0 rgba(201, 164, 85, 0.06), 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ── Subpage layout ── */

.page-stack {
  position: relative;
  z-index: 1;
  max-width: var(--shell-max);
  margin: var(--space-24) auto 0;
  display: grid;
  gap: var(--space-24);
}

body.page-subpage:not(.page-api) .page-stack {
  min-height: calc(100vh - 24px * 2 - 96px - 24px);
}

@supports (min-height: 100dvh) {
  body.page-subpage:not(.page-api) .page-stack {
    min-height: calc(100dvh - 24px * 2 - 96px - 24px);
  }
}

.page-hero {
  padding: var(--space-32) 30px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out-expo) 0.2s forwards;
  transition: filter 1s var(--ease-out-expo), opacity 1s var(--ease-out-expo);
}

.page-hero h2 {
  margin: 0;
  max-width: min(20ch, var(--measure));
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(2.8rem, 4.2vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: var(--weight-display);
}

.page-hero p:last-child,
.page-hero .page-hero-sub {
  max-width: var(--measure-ui);
  margin: var(--space-16) 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

/* #runtimeStatus follows the real subhead, so it is no longer the hero's
   last <p>; reset any subhead bleed in case it ever lands at :last-child. */
.page-hero #runtimeStatus {
  max-width: none;
}

.page-hero.section-divider {
  position: relative;
  min-height: 0;
  overflow: visible;
  padding: var(--space-16) 25px var(--space-8);
  margin-top: var(--space-16);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-hero.section-divider::before {
  content: none;
}

.page-hero.section-divider::after {
  content: none;
}

.page-hero.section-divider h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
}

/* ── Card Grid ── */

.card-grid {
  display: grid;
  gap: var(--space-16);
}

.card-grid.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-collapse {
  margin-top: var(--space-16);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--panel) 78%, transparent);
  box-shadow: 0 16px 42px rgba(24, 36, 58, 0.08), inset 0 1px 0 rgba(255,255,255,0.64);
  overflow: hidden;
  transition: border-color 280ms var(--ease-smooth), background 280ms var(--ease-smooth), box-shadow 280ms var(--ease-smooth), filter 1s var(--ease-out-expo), opacity 1s var(--ease-out-expo);
}

.tool-collapse[open],
.tool-collapse[data-closing="true"] {
  border-color: color-mix(in oklch, var(--accent) 28%, rgba(255,255,255,0.5));
  background: var(--panel);
}

.tool-collapse summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 220ms var(--ease-smooth);
}

.tool-collapse summary:hover {
  background: color-mix(in oklch, var(--accent) 5%, transparent);
}

.tool-collapse summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -6px;
}

.tool-collapse summary::-webkit-details-marker {
  display: none;
}

.tool-collapse summary strong {
  display: block;
  color: var(--ink);
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: var(--weight-display);
}

.tool-collapse summary em {
  display: block;
  margin-top: var(--space-8);
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.tool-collapse-action {
  flex: 0 0 auto;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 0;
  inline-size: 36px;
  block-size: 36px;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent);
  border-radius: var(--radius-pill);
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  text-align: center;
  background: rgba(255,255,255,0.36);
  transition: color 220ms var(--ease-smooth), border-color 220ms var(--ease-smooth), background 220ms var(--ease-smooth);
}

.tool-collapse[open] .tool-collapse-action {
  color: var(--ink);
  border-color: color-mix(in oklch, var(--accent) 34%, transparent);
  background: color-mix(in oklch, var(--accent) 8%, rgba(255,255,255,0.34));
}

.tool-collapse-label {
  display: none;
}

/* 单条连续折线箭头：闭合朝下 ˅，展开整条翻转朝上 ˄。尖角是一处干净的折点，
   不再是两段线条拼接。尺寸 15×10、夹角 33° 与原来一致。 */
.tool-collapse-chevron {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 10px;
  transform: translate(-50%, -50%) scaleY(1);
  color: inherit;
  overflow: visible;
  transition: transform 340ms var(--ease-out-expo);
}

/* 展开/收起：沿水平轴翻折 — scaleY 经过 0，先压平成一条横线再翻向另一侧（保留原来的翻转手感）。
   翻转写在同一个 transform 里、translate(-50%,-50%) 始终在最前，箭头中心保持不动，位置不变。 */
.tool-collapse[open] .tool-collapse-chevron {
  transform: translate(-50%, -50%) scaleY(-1);
}

.tool-collapse[data-closing="true"] .tool-collapse-chevron {
  transform: translate(-50%, -50%) scaleY(1);
}

html[data-theme="stellar"] .tool-collapse {
  border-color: rgba(201, 164, 85, 0.18);
  background: color-mix(in oklch, var(--panel) 78%, transparent);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(201, 164, 85, 0.08);
}

html[data-theme="stellar"] .tool-collapse[open],
html[data-theme="stellar"] .tool-collapse[data-closing="true"] {
  border-color: rgba(201, 164, 85, 0.3);
  background: var(--panel);
}

html[data-theme="stellar"] .tool-collapse summary:hover {
  background: rgba(201, 164, 85, 0.045);
}

html[data-theme="stellar"] .tool-collapse-action {
  color: var(--muted);
  border-color: color-mix(in oklch, var(--ink) 10%, transparent);
  background: color-mix(in oklch, var(--ink) 6%, transparent);
  box-shadow: none;
}

html[data-theme="stellar"] .tool-collapse[open] .tool-collapse-action {
  color: var(--muted);
  border-color: color-mix(in oklch, var(--ink) 10%, transparent);
  background: color-mix(in oklch, var(--ink) 6%, transparent);
}

html[data-theme="stellar"] .tool-collapse[open][data-animating="true"]:not([data-closing="true"]) .tool-collapse-action {
  animation: toolCollapseActionGlow 560ms var(--ease-out-expo) both;
}

@keyframes toolCollapseActionGlow {
  0%,
  100% {
    color: var(--muted);
    border-color: color-mix(in oklch, var(--ink) 10%, transparent);
    background: color-mix(in oklch, var(--ink) 6%, transparent);
    box-shadow: none;
  }

  28% {
    color: color-mix(in oklch, var(--ink) 58%, var(--muted) 42%);
    border-color: color-mix(in oklch, var(--ink) 14%, transparent);
    background: color-mix(in oklch, var(--ink) 8%, transparent);
    box-shadow: 0 0 10px rgba(126, 168, 216, 0.08);
  }
}

.tool-collapse-body {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    height 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 260ms var(--ease-smooth),
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.tool-collapse[open] .tool-collapse-body {
  opacity: 1;
  transform: translateY(0);
}

.tool-collapse[data-closing="true"] .tool-collapse-body {
  opacity: 0;
  transform: translateY(-8px);
}

.tool-collapse-body-inner {
  overflow: hidden;
}

.tool-collapse[open]:not([data-collapse-initialized="true"]) .tool-collapse-body {
  height: auto;
}

/* 动画结束、稳定展开时，放开两层 overflow，让卡片 hover 的 translateY(-4px)
   与 spectral glow 不再被 body 的 clip 切掉。动画/收起期间继续 hidden 保证
   高度过渡不会漏出。 */
.tool-collapse[open]:not([data-animating="true"]):not([data-closing="true"]) .tool-collapse-body,
.tool-collapse[open]:not([data-animating="true"]):not([data-closing="true"]) .tool-collapse-body-inner {
  overflow: visible;
}

.collapsed-tool-grid {
  padding: 0 var(--space-16) var(--space-16);
}

.feature-card,
.timeline-card,
.note-card {
  padding: var(--space-24);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out-expo) forwards;
  transition: transform 320ms var(--ease-out-expo), box-shadow 320ms var(--ease-smooth), background 0.5s var(--ease-smooth), border-color 0.5s var(--ease-smooth), filter 1s var(--ease-out-expo), opacity 1s var(--ease-out-expo);
}

.feature-card {
  --card-accent: var(--green);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in oklch, var(--card-accent) 8%, transparent), transparent 34%),
    linear-gradient(150deg, color-mix(in oklch, var(--card-accent) 5%, var(--panel)), var(--panel) 72%);
}

.feature-card.signal   { --card-accent: var(--green);  }
.feature-card.commerce { --card-accent: var(--amber);  }
.feature-card.preview  { --card-accent: var(--violet); }
.feature-card.image    { --card-accent: var(--rose);   }
.feature-card.formula  { --card-accent: var(--blue);   }

body.page-tools .feature-card[data-graph-label="品牌官网"] { --card-accent: var(--spectrum-red); }
body.page-tools .feature-card[data-graph-label="图标生成器"] { --card-accent: var(--spectrum-violet); }
body.page-tools .feature-card[data-graph-label="资讯聚合"] { --card-accent: var(--spectrum-orange); }
body.page-tools .feature-card[data-graph-label="Alexa 优化器"] { --card-accent: var(--spectrum-yellow); }
body.page-tools .feature-card[data-graph-label="图像分析"] { --card-accent: var(--spectrum-green); }
body.page-tools .feature-card[data-graph-label="AI 画布"] { --card-accent: var(--spectrum-cyan); }
body.page-tools .feature-card[data-graph-label="三维入口"] { --card-accent: var(--spectrum-blue); }
body.page-tools .feature-card[data-graph-label="双年展索引"] { --card-accent: var(--spectrum-cyan); }
body.page-tools .feature-card[data-graph-label="图像生成"] { --card-accent: var(--spectrum-violet); }

.feature-card:hover,
.note-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--hover-spectral-glow);
}

/* ── VISUAL REFRESH · Lote A — tools matrix (polish, on-system) ──────────────
   Sharpens the daylight-spectrum card language already in place (§5.7): each
   card now carries its own --card-accent in a soft top-corner wash behind the
   cat doodle and a refined eyebrow rule, with the accent surfacing in the rim on
   hover. Every colour is color-mix() off the spectral tokens, so it themes
   across 晨光 / 自然 / 星辰 and steers clear of the §5.8 tells (no stripe accents,
   no hardcoded violet). Scoped to body.page-tools to stay in-surface. */
body.page-tools .feature-card {
  background:
    radial-gradient(125% 85% at 100% 0%, color-mix(in oklch, var(--card-accent) 10%, transparent), transparent 58%),
    radial-gradient(circle at 18% 0%, color-mix(in oklch, var(--card-accent) 7%, transparent), transparent 36%),
    linear-gradient(150deg, color-mix(in oklch, var(--card-accent) 6%, var(--panel)), var(--panel) 70%);
}

body.page-tools .feature-card .badge::after {
  width: 26px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--card-accent), transparent);
  opacity: 0.85;
}

/* 晨光 / 自然: a daylight rim keyed to the card's own hue, deepening on hover so
   the lift reads in the card's colour, not a generic shadow. */
html:not([data-theme="stellar"]) body.page-tools .feature-card {
  border-color: color-mix(in oklch, var(--card-accent) 18%, var(--panel-strong));
}

html:not([data-theme="stellar"]) body.page-tools .feature-card:hover {
  border-color: color-mix(in oklch, var(--card-accent) 44%, var(--panel-strong));
}

/* 星辰 keeps its restrained near-invisible rim; the accent is only a faint warm
   trace at rest and a gentle lift on hover (no bright daylight rim on the dark). */
html[data-theme="stellar"] body.page-tools .feature-card {
  border-color: color-mix(in oklch, var(--card-accent) 16%, color-mix(in oklch, var(--ink) 12%, transparent));
}

html[data-theme="stellar"] body.page-tools .feature-card:hover {
  border-color: color-mix(in oklch, var(--card-accent) 34%, color-mix(in oklch, var(--ink) 12%, transparent));
}

/* Integration / learning note-cards: a quieter, neutral echo of the same rim so
   the support rows read as one family with the spectral matrix above. */
html:not([data-theme="stellar"]) body.page-tools .note-card {
  border-color: color-mix(in oklch, var(--ink) 9%, var(--panel-strong));
}

html:not([data-theme="stellar"]) body.page-tools .feature-card:is([data-graph-label="Alexa 优化器"], [data-graph-label="图像分析"], [data-graph-label="双年展索引"], [data-graph-label="图像生成"]) {
  border-color: color-mix(in oklch, var(--card-accent) 30%, var(--panel-strong));
}

html:not([data-theme="stellar"]) body.page-tools .feature-card:is([data-graph-label="Alexa 优化器"], [data-graph-label="图像分析"], [data-graph-label="双年展索引"], [data-graph-label="图像生成"]):hover {
  border-color: color-mix(in oklch, var(--card-accent) 52%, var(--panel-strong));
}

html[data-theme="stellar"] body.page-tools .feature-card:is([data-graph-label="Alexa 优化器"], [data-graph-label="图像分析"], [data-graph-label="双年展索引"], [data-graph-label="图像生成"]) {
  border-color: color-mix(in oklch, var(--card-accent) 30%, color-mix(in oklch, var(--ink) 12%, transparent));
}

html[data-theme="stellar"] body.page-tools .feature-card:is([data-graph-label="Alexa 优化器"], [data-graph-label="图像分析"], [data-graph-label="双年展索引"], [data-graph-label="图像生成"]):hover {
  border-color: color-mix(in oklch, var(--card-accent) 48%, color-mix(in oklch, var(--ink) 12%, transparent));
}

body.page-tools .feature-card:is([data-graph-label="Alexa 优化器"], [data-graph-label="图像分析"], [data-graph-label="双年展索引"], [data-graph-label="图像生成"]):hover {
  box-shadow:
    var(--hover-spectral-glow),
    0 10px 32px -8px color-mix(in oklch, var(--card-accent) 40%, transparent);
}

body.page-tools .card-grid .feature-card:is([data-graph-label="Alexa 优化器"], [data-graph-label="图像分析"], [data-graph-label="图像生成"]) {
  background:
    radial-gradient(120% 92% at 96% 104%, color-mix(in oklch, var(--card-accent) 22%, transparent), transparent 56%),
    radial-gradient(125% 85% at 100% 0%, color-mix(in oklch, var(--card-accent) 13%, transparent), transparent 58%),
    radial-gradient(circle at 16% -4%, color-mix(in oklch, var(--card-accent) 9%, transparent), transparent 38%),
    linear-gradient(150deg, color-mix(in oklch, var(--card-accent) 8%, var(--panel)), var(--panel) 72%);
}

body.page-tools .card-grid .feature-card[data-graph-label="双年展索引"] {
  background:
    radial-gradient(circle at 100% 100%, transparent 95px, color-mix(in oklch, var(--card-accent) 26%, transparent) 96px, color-mix(in oklch, var(--card-accent) 26%, transparent) 98px, transparent 99px),
    radial-gradient(circle at 100% 100%, transparent 68px, color-mix(in oklch, var(--card-accent) 32%, transparent) 69px, color-mix(in oklch, var(--card-accent) 32%, transparent) 71px, transparent 72px),
    radial-gradient(circle at 100% 100%, transparent 43px, color-mix(in oklch, var(--card-accent) 40%, transparent) 44px, color-mix(in oklch, var(--card-accent) 40%, transparent) 46px, transparent 47px),
    radial-gradient(circle at 100% 100%, color-mix(in oklch, var(--card-accent) 30%, transparent) 21px, transparent 24px),
    radial-gradient(78% 116% at 104% 104%, color-mix(in oklch, var(--card-accent) 22%, transparent), transparent 54%),
    radial-gradient(125% 85% at 100% 0%, color-mix(in oklch, var(--card-accent) 12%, transparent), transparent 58%),
    linear-gradient(150deg, color-mix(in oklch, var(--card-accent) 8%, var(--panel)), var(--panel) 72%);
}

.card-grid .feature-card:nth-child(1) { animation-delay: 0.35s; }
.card-grid .feature-card:nth-child(2) { animation-delay: 0.45s; }
.card-grid .feature-card:nth-child(3) { animation-delay: 0.55s; }
.card-grid .feature-card:nth-child(4) { animation-delay: 0.65s; }
.card-grid .feature-card:nth-child(5) { animation-delay: 0.75s; }
.card-grid .feature-card:nth-child(6) { animation-delay: 0.85s; }

/* 折叠区卡片不参与首屏 fadeUp：折叠容器本身的高度+透明度过渡负责"出现"，
   否则页面加载后 0.35–0.75s 的 animation-delay 会让用户首次展开时看到空容器。 */
.card-grid.collapsed-tool-grid .feature-card,
.card-grid.collapsed-tool-grid .feature-card:nth-child(1),
.card-grid.collapsed-tool-grid .feature-card:nth-child(2),
.card-grid.collapsed-tool-grid .feature-card:nth-child(3),
.card-grid.collapsed-tool-grid .feature-card:nth-child(4),
.card-grid.collapsed-tool-grid .feature-card:nth-child(5) {
  opacity: 1;
  background: transparent;
  animation: none;
  animation-delay: 0s;
}

/* ── GSAP 滚动入场试点 ──────────────────────────────────────────────────────
   app.js 的 initCardReveal（GSAP+ScrollTrigger 存在时）会给每个符合条件的
   .card-grid 加上 .mx-revealing，改由 GSAP 在卡片进视口时逐个播放入场——取代
   上面那套"加载即触发"的 fadeUp + nth-child 固定延迟（首屏外的卡片等你滚到时早演完了）。
   渐进增强：JS/GSAP 缺席时永远不会加 .mx-revealing，上面的 fadeUp 仍是兜底；
   reduced-motion 由 JS 的 gsap.matchMedia 处理，全局 reduced-motion 规则也会把 fadeUp 拍平。 */
.card-grid.mx-revealing .feature-card,
.card-grid.mx-revealing .note-card {
  animation: none;
}

body.page-tools .mx-tools-reveal-managed {
  animation: none !important;
  opacity: 1;
}

body.page-tools .mx-io-reveal {
  animation: none !important;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: none;
  will-change: opacity, transform;
}

body.page-tools .mx-io-reveal.is-in-view {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--reveal-ease) var(--io-reveal-delay, 0ms),
    transform 0.7s var(--reveal-ease) var(--io-reveal-delay, 0ms);
}

body.page-tools .mx-io-reveal.is-reveal-complete {
  opacity: 1;
  transform: none;
  transition: transform 320ms var(--ease-out-expo), box-shadow 320ms var(--ease-smooth), background 0.5s var(--ease-smooth), border-color 0.5s var(--ease-smooth), filter 1s var(--ease-out-expo), opacity 1s var(--ease-out-expo);
  will-change: auto;
}

body.page-tools .feature-card.mx-io-reveal.is-in-view:hover,
body.page-tools .note-card.mx-io-reveal.is-in-view:hover {
  transform: translateY(-4px) scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
  body.page-tools .mx-io-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.feature-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
}

.feature-card .badge {
  padding: 0 0 var(--space-8);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--card-accent);
  font-family: "DM Mono", "Noto Sans SC", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.1;
  position: relative;
  text-transform: uppercase;
}

.feature-card .badge::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 1px;
  background: var(--card-accent);
  opacity: 0.55;
}

.status-pill.live {
  background: rgba(46, 125, 105, 0.12);
  color: var(--green);
  position: relative;
}

.status-pill.live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: var(--space-8);
  animation: pulse 2s var(--ease-in-out) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.feature-card h3,
.timeline-card h3 {
  margin: var(--space-16) 0 var(--space-8);
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 28px;
  line-height: 1;
  font-weight: var(--weight-title); /* was browser-default bold (700) */
}

.feature-card p,
.timeline-card li,
.workflow-grid p,
.feed-board p,
.info-panel span {
  color: var(--muted);
  line-height: 1.7;
}

.feature-card p,
.note-card p,
.learn-card p {
  max-width: var(--measure-card);
}

.literary-title {
  display: block;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-style: italic;
}

.feature-card ul,
.timeline-card ul {
  padding-left: var(--space-16);
  margin: var(--space-16) 0 var(--space-24);
}

.feature-card a,
.workflow-grid a {
  padding: var(--space-16) var(--space-16);
  width: fit-content;
  background: rgba(24, 36, 58, 0.06);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  transition: background 0.2s var(--ease-smooth), transform 280ms var(--ease-out-expo), box-shadow 280ms var(--ease-smooth);
}

.feature-card a:hover {
  background: var(--ink);
  color: var(--bg);
}

/* Card action buttons (Home carousel + Tools feature cards) → frosted glass on the
   two daytime themes only (晨光 / 自然); 星辰 keeps its dark fill. Tinted a touch
   DARKER than the surrounding light card (an ink wash, not a white film) so the CTA
   reads as a recessed actionable chip rather than the brightest thing on the page.
   Theme-aware via color-mix off --ink; icons follow currentColor; hover deepens. */
html:not([data-theme="dark"]):not([data-theme="stellar"]) :is(.carousel-card em, .feature-card a, .workflow-grid a) {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--ink) 6%, transparent),
    color-mix(in oklch, var(--ink) 10%, transparent));
  -webkit-backdrop-filter: blur(12px) saturate(108%);
  backdrop-filter: blur(12px) saturate(108%);
  color: var(--ink);
  border: 1px solid color-mix(in oklch, var(--ink) 11%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(24, 36, 58, 0.07);
  opacity: 1;
}

html:not([data-theme="dark"]):not([data-theme="stellar"]) :is(.carousel-card em, .feature-card a, .workflow-grid a):hover {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--ink) 10%, transparent),
    color-mix(in oklch, var(--ink) 15%, transparent));
  color: var(--ink);
  border-color: color-mix(in oklch, var(--ink) 17%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 4px 12px rgba(24, 36, 58, 0.1);
  transform: translateY(-1px);
}

/* This light-theme hover sits at (0,4,2) — higher than the generic :hover:active
   press — so the press must reuse the same scope to win, or these buttons never
   move on click in 晨光/自然. */
html:not([data-theme="dark"]):not([data-theme="stellar"]) :is(.carousel-card em, .feature-card a, .workflow-grid a):active,
html:not([data-theme="dark"]):not([data-theme="stellar"]) :is(.carousel-card em, .feature-card a, .workflow-grid a):hover:active {
  transform: translateY(1px) scale(0.97);
  transition: transform 80ms var(--ease-out-expo);
}

/* Home carousel cards are much brighter than the Tools feature cards, so the same
   wash reads heavy here — give the Home action chips a lighter ink wash (brighter)
   while staying subtly recessed. Tools .feature-card a keeps the deeper wash above. */
html:not([data-theme="dark"]):not([data-theme="stellar"]) body.page-home .carousel-card em {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--ink) 5%, transparent),
    color-mix(in oklch, var(--ink) 9%, transparent));
  border-color: color-mix(in oklch, var(--ink) 10%, transparent);
}

html:not([data-theme="dark"]):not([data-theme="stellar"]) body.page-home .carousel-card em:hover {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--ink) 9%, transparent),
    color-mix(in oklch, var(--ink) 14%, transparent));
  border-color: color-mix(in oklch, var(--ink) 16%, transparent);
}

/* Tools page: anchor cards to one six-column modular grid. */
body.page-tools .page-stack {
  --tools-grid-max: 1268px;
  --tools-grid-gap: var(--space-24);
  gap: var(--space-24);
}

body.page-tools .page-stack > .page-hero:not(.section-divider) {
  width: min(100%, var(--tools-grid-max));
  margin: 0 auto;
  padding: var(--space-24) var(--space-32);
}

body.page-tools .page-stack > .page-hero:not(.section-divider) h2 {
  font-size: clamp(2.45rem, 3.35vw, 3.35rem);
  line-height: 0.98;
}

body.page-tools .page-stack > .page-hero:not(.section-divider) p:last-child {
  margin-top: var(--space-8);
  font-size: 14px;
}

body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) {
  width: min(100%, var(--tools-grid-max));
  margin: var(--space-16) auto var(--space-8);
  gap: var(--tools-grid-gap);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(200px, auto);
}

body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card {
  display: flex;
  min-height: 200px;
  flex-direction: column;
  padding: var(--space-16) var(--space-32);
}

body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card:nth-child(-n + 2) {
  grid-column: span 3;
}

body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card:nth-child(n + 3) {
  grid-column: span 2;
}

body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card .feature-head {
  margin-bottom: 0;
}

body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card h3 {
  margin: var(--space-8) 0 var(--space-8);
  font-size: 22px;
  line-height: 1.1;
}

body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 var(--space-16);
}

body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card ul {
  display: none;
}

body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card a {
  margin-top: auto;
  padding: var(--space-8) var(--space-16);
  font-size: 13px;
}

html:not([data-theme]) body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card a {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--card-accent) 13%, rgba(255, 255, 255, 0.12)),
    color-mix(in oklch, var(--card-accent) 9%, rgba(255, 255, 255, 0.04))
  );
  color: var(--card-accent);
  border-color: color-mix(in oklch, var(--card-accent) 34%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 2px 8px color-mix(in oklch, var(--card-accent) 12%, transparent);
}

html:not([data-theme]) body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card a:hover {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--card-accent) 20%, rgba(255, 255, 255, 0.16)),
    color-mix(in oklch, var(--card-accent) 14%, rgba(255, 255, 255, 0.06))
  );
  color: var(--card-accent);
  border-color: color-mix(in oklch, var(--card-accent) 46%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 5px 14px color-mix(in oklch, var(--card-accent) 18%, transparent);
}

body.page-tools .tool-collapse {
  width: min(100%, var(--tools-grid-max));
  margin: var(--space-16) auto 0;
}

body.page-tools .collapsed-tool-grid {
  width: 100%;
  margin: 0 auto;
  padding: var(--space-16) var(--space-24) var(--space-24);
  gap: var(--tools-grid-gap);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(200px, auto);
}

body.page-tools .collapsed-tool-grid > .feature-card:not([hidden]) {
  display: flex;
  grid-column: span 3;
  min-height: 200px;
  flex-direction: column;
  padding: var(--space-16) var(--space-32);
}

body.page-tools .collapsed-tool-grid > .feature-card:not([hidden]) h3 {
  margin: var(--space-8) 0 var(--space-8);
  font-size: 22px;
  line-height: 1.1;
}

body.page-tools .collapsed-tool-grid > .feature-card:not([hidden]) p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 var(--space-16);
}

body.page-tools .collapsed-tool-grid > .feature-card:not([hidden]) ul {
  display: none;
}

body.page-tools .collapsed-tool-grid > .feature-card:not([hidden]) a {
  margin-top: auto;
  padding: var(--space-8) var(--space-16);
  font-size: 13px;
}

html:not([data-theme]) body.page-tools .collapsed-tool-grid > .feature-card:not([hidden]) a {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--card-accent) 13%, rgba(255, 255, 255, 0.12)),
    color-mix(in oklch, var(--card-accent) 9%, rgba(255, 255, 255, 0.04))
  );
  color: var(--card-accent);
  border-color: color-mix(in oklch, var(--card-accent) 34%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 2px 8px color-mix(in oklch, var(--card-accent) 12%, transparent);
}

html:not([data-theme]) body.page-tools .collapsed-tool-grid > .feature-card:not([hidden]) a:hover {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--card-accent) 20%, rgba(255, 255, 255, 0.16)),
    color-mix(in oklch, var(--card-accent) 14%, rgba(255, 255, 255, 0.06))
  );
  color: var(--card-accent);
  border-color: color-mix(in oklch, var(--card-accent) 46%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 5px 14px color-mix(in oklch, var(--card-accent) 18%, transparent);
}

.tools-section-divider {
  width: min(100%, var(--tools-grid-max, 1268px));
  margin: var(--space-16) auto 0;
  padding: var(--space-8) 0 0;
  background: transparent;
  box-shadow: none;
}

body.page-tools .tools-section-divider h2,
body.page-tools #tools-graph .graph-head h3 {
  font-weight: var(--weight-display);
}

.card-grid.tools-support-grid,
.card-grid.tools-learning-grid {
  width: min(100%, var(--tools-grid-max, 1268px));
  margin: 0 auto;
  gap: var(--tools-grid-gap, var(--space-24));
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tools-support-grid > .note-card,
.tools-learning-grid > .note-card {
  display: flex;
  grid-column: span 2;
  min-height: 195px;
  flex-direction: column;
}

.tools-learning-grid > .note-card:first-child:nth-last-child(2) {
  grid-column: 3 / span 2;
}

.tools-learning-grid > .note-card:first-child:nth-last-child(2) + .note-card {
  grid-column: 5 / span 2;
}

.tools-support-grid > .note-card a,
.tools-learning-grid > .note-card a {
  margin-top: auto;
}

/* Featured internal recommended-reading card (narrower than the 3-up row, centered above it) */
.card-grid.tools-learning-feature {
  width: min(100%, 837px);
  margin: 0 auto;
}
.note-card.note-card--feature {
  display: flex;
  flex-direction: column;
}
.note-card.note-card--feature a {
  margin-top: auto;
}
@media (min-width: 760px) {
  .note-card.note-card--feature {
    flex-direction: row;
    align-items: center;
    gap: var(--space-32);
  }
  .note-card.note-card--feature .learn-card-content {
    flex: 1;
  }
  .note-card.note-card--feature a {
    margin-top: 0;
    flex: none;
    white-space: nowrap;
  }
}

/* ── Note Cards (Skill showcase) ── */

.note-card h3 {
  margin: var(--space-16) 0 0;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 18px;
  line-height: 1;
  font-weight: var(--weight-title);
}

.note-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: var(--space-24);
}

.note-card .badge.skill-violet {
  background: rgba(101, 94, 255, 0.12);
  color: var(--violet);
}

.note-card .badge.skill-blue {
  background: rgba(62, 99, 255, 0.12);
  color: var(--blue);
}

.note-card .badge.skill-amber {
  background: rgba(213, 154, 57, 0.15);
  color: var(--amber);
}

.note-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  min-width: 118px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(24, 36, 58, 0.06);
  border-radius: var(--radius-sm);
  transition: background 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth);
}

/* Soft ink wash + faint ring instead of a full invert — the old var(--ink)/var(--bg)
   flip read as a glaring pill, especially in dark themes. Theme-aware via --ink. */
.note-card a:hover {
  background: color-mix(in oklch, var(--ink) 12%, transparent);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink) 16%, transparent);
}

/* ── Learn Cards (Recommended Learning) ── */

.learn-grid {
  grid-template-columns: 1fr;
}

.learn-card {
  --learn-accent: var(--rose);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-32);
  padding: var(--space-32) var(--space-32);
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--learn-accent) 6%, var(--panel)), var(--panel) 72%);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    var(--shadow);
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out-expo) 0.5s forwards;
  transition: transform 320ms var(--ease-out-expo), box-shadow 320ms var(--ease-smooth), background 0.5s var(--ease-smooth), border-color 0.5s var(--ease-smooth);
}

.learn-card:hover {
  transform: translateY(-4px) scale(1.005);
  border-color: color-mix(in oklch, var(--learn-accent) 24%, rgba(255, 255, 255, 0.58));
  box-shadow:
    var(--hover-spectral-glow);
}

.learn-card-content {
  min-width: 0;
}

.learn-card h3 {
  margin: var(--space-16) 0 var(--space-8);
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 24px;
  line-height: 1.15;
  font-weight: var(--weight-title); /* was 900 */
}

.learn-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 var(--space-16);
  max-width: var(--measure-ui);
}

.learn-provider {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.badge.skill-rose {
  background: rgba(212, 99, 123, 0.12);
  color: var(--rose, #d4637b);
}

.learn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.learn-tags span {
  display: inline-flex;
  align-items: center;
  padding: 5px var(--space-8);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  background: rgba(24, 36, 58, 0.04);
  color: var(--muted);
  letter-spacing: 0.02em;
}

.learn-card > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  min-width: 118px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  background: rgba(212, 99, 123, 0.08);
  color: var(--rose, #d4637b);
  transition: background 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth), transform 280ms var(--ease-out-expo);
}

.learn-card > a:hover {
  background: var(--rose, #d4637b);
  color: #fff;
  transform: translateX(3px);
}

/* ── Hero Divider ── */

.hero-divider {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(24, 36, 58, 0.14);
}

/* ── Info Panel ── */

.info-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-24);
  align-items: start;
  padding: var(--space-24) var(--space-24);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out-expo) 0.85s forwards;
  transition: background 0.5s var(--ease-smooth), border-color 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth), filter 1s var(--ease-out-expo), opacity 1s var(--ease-out-expo);
}

/* ── Graph Panel (Obsidian-style) ── */

.graph-panel {
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out-expo) 0.9s forwards;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, color-mix(in oklch, var(--panel) 92%, white 8%), color-mix(in oklch, var(--blue) 8%, var(--panel)));
  border: 1px solid color-mix(in oklch, var(--blue) 24%, rgba(255, 255, 255, 0.68));
  box-shadow:
    0 22px 64px rgba(8, 28, 72, 0.2),
    0 0 0 1px color-mix(in oklch, var(--ink) 7%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: filter 1s var(--ease-out-expo), opacity 1s var(--ease-out-expo);
}

.graph-head {
  padding: var(--space-24) var(--space-32) var(--space-16);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--blue) 14%, var(--panel)), color-mix(in oklch, var(--violet) 8%, var(--panel))),
    var(--graph-head-bg);
  border-bottom: 1px solid color-mix(in oklch, var(--blue) 26%, rgba(24, 36, 58, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), inset 0 -1px 0 rgba(255, 255, 255, 0.34);
  transition: background 0.5s var(--ease-smooth), border-color 0.5s var(--ease-smooth);
}

.graph-head .eyebrow {
  color: var(--graph-eyebrow);
}

.graph-head h3 {
  margin: 0;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 26px;
  color: var(--graph-title);
}

.graph-container {
  position: relative;
  width: 100%;
  height: 380px;
  background:
    radial-gradient(120% 90% at 28% 36%, color-mix(in oklch, var(--green) 12%, transparent), transparent 58%),
    radial-gradient(105% 82% at 80% 28%, color-mix(in oklch, var(--blue) 12%, transparent), transparent 64%),
    radial-gradient(ellipse at 50% 50%, var(--graph-bg-center) 0%, var(--graph-bg-mid) 50%, var(--graph-bg-edge) 100%),
    linear-gradient(135deg, color-mix(in oklch, var(--panel) 90%, white 10%) 0%, color-mix(in oklch, var(--green) 9%, var(--panel)) 48%, color-mix(in oklch, var(--violet) 12%, var(--panel)) 100%);
  transition: background 0.5s var(--ease-smooth);
}

.graph-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

body.page-tools #tools-graph {
  --graph-node-hub: 226, 162, 49;
  --graph-node-core: 102, 108, 255;
  --graph-node-skill: 84, 118, 255;
  --graph-edge: 105, 128, 176;
  --graph-label: 232, 226, 213;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.page-tools #tools-graph .graph-head {
  padding-left: clamp(var(--space-40), 4.6vw, var(--space-56));
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.page-tools #tools-graph .graph-container {
  background: transparent;
}

html[data-theme="nature"] body.page-tools #tools-graph {
  --graph-label: 42, 51, 40;
}

html[data-performance="low"]:not([data-theme="stellar"]) body.page-tools #tools-graph,
html:not([data-theme="stellar"]) body.page-tools.muxing-flow-static-background #tools-graph {
  --graph-label: 24, 36, 58;
}

.info-panel.split {
  grid-template-columns: minmax(220px, 0.6fr) 1fr;
}

.info-panel h3 {
  margin: 0;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 28px;
}

.domain-list,
.role-list {
  display: grid;
  gap: var(--space-16);
}

.domain-list div,
.role-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s var(--ease-out-expo);
}

.domain-list div:hover,
.role-list div:hover {
  padding-left: var(--space-8);
}

.domain-list strong,
.role-list strong {
  font-weight: 800;
  font-family: "DM Mono", monospace;
  font-size: 14px;
}

/* ── Workflow Grid ── */

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-16);
}

.workflow-grid article {
  padding: var(--space-24);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.workflow-grid span {
  display: inline-flex;
  margin-bottom: var(--space-40);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.workflow-grid h3 {
  margin: 0 0 var(--space-8);
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 26px;
  line-height: 1;
}

.workflow-grid a {
  margin-top: var(--space-16);
}

/* ── Feed Board ── */

.feed-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-16);
}

.feed-board article {
  padding: var(--space-24);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.feed-board strong {
  font-size: 22px;
  line-height: 1;
}

/* ── Responsive ── */

@media (max-width: 1240px) {
  body.page-home {
    height: auto;
    overflow: auto;
  }

  .site-shell {
    min-height: 100vh;
  }

  .home-hero,
  .card-grid.two-up,
  .card-grid.three-up,
  .workflow-grid,
  .feed-board,
  .info-panel,
  .info-panel.split {
    grid-template-columns: 1fr;
  }

  .home-hero {
    min-height: auto;
    gap: var(--space-24);
  }

  .hero-intro,
  .hero-panel {
    --hero-intro-optical-y: 0px;
    --hero-panel-optical-y: 0px;
    grid-column: auto;
  }

  .hero-intro h2 {
    max-width: none;
    font-size: clamp(2.2rem, 9vw, 3.6rem);
    line-height: 1.15;
  }

  .hero-intro h2.hero-title-rotator.is-hero-title-variant {
    font-size: 3rem;
  }

  .hero-intro h2.hero-title-rotator.is-hero-title-variant.is-hero-title-tight {
    font-size: 2.72rem;
  }
}

@media (max-width: 920px) {
  .site-shell {
    --shell-pad-top: var(--space-16);
    padding: var(--shell-pad-top) var(--space-16) var(--space-16);
  }

  .site-header {
    flex-wrap: wrap;
    padding: var(--space-16);
    border-radius: var(--radius-lg);
    gap: var(--space-16);
  }

  .site-header > .site-nav {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    order: 3;
    justify-content: center;
    gap: var(--space-16);
    flex-wrap: wrap;
  }

  .site-nav {
    align-items: center;
    gap: var(--space-8);
  }

  .site-nav a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
  }

  .site-nav a.is-active {
    background: color-mix(in oklch, var(--blue) 10%, transparent);
  }

  .brand-text h1 {
    font-size: 15px;
  }

  .brand-text h1.site-wordmark {
    width: 68px;
    height: 21px;
    font-size: 15px;
  }

  .brand-block {
    --wordmark-lens-size: 46px;
    --wordmark-lens-mask-inner: 22px;
    --wordmark-lens-mask-outer: 24px;
  }

  .brand-text h1.site-wordmark svg {
    width: 68px;
    height: 21px;
  }

  .brand-text h1.site-wordmark .site-wordmark-text {
    font-size: 15px;
    letter-spacing: -0.055em;
  }

  .brand-text p {
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .header-button {
    font-size: 12px;
    padding: var(--space-8) var(--space-16);
    min-height: 40px;
  }

  .site-header > .header-button {
    inline-size: 112px;
    flex-basis: 112px;
  }

  .home-hero,
  .page-hero,
  .feature-card,
  .timeline-card,
  .note-card,
  .learn-card,
  .workflow-grid article {
    padding: var(--space-24);
  }

  .hero-actions {
    flex-wrap: wrap;
  }

  .tool-link,
  .learn-card {
    grid-template-columns: 1fr;
  }

  .feature-card a,
  .workflow-grid a,
  .note-card a,
  .learn-card > a {
    min-height: 44px;
  }

  .domain-list div,
  .role-list div {
    flex-direction: column;
    gap: var(--space-8);
  }
}

/* #4 触屏去 hover：没有悬停时，把原本要 hover 才出现的中文标签直接显示出来
   （触屏上 EN→ZH 翻转永远触发不了，用户只能停在英文）；并消除点按后可能粘住的悬停位移。 */
@media (hover: none) {
  .bilingual .bilingual-en {
    opacity: 0;
    transform: translate3d(0, -0.24em, 0) scale(0.985);
    filter: blur(3px);
  }
  .bilingual .bilingual-zh {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
  .feature-card:hover,
  .note-card:hover,
  .learn-card:hover {
    transform: none;
  }
}

.mobile-tabbar { display: none; }

@media (max-width: 768px) {
  .site-shell {
    --shell-pad-top: max(12px, env(safe-area-inset-top, 0px));
    padding: var(--shell-pad-top) var(--space-16) var(--space-16);
  }

  body.has-mobile-tabbar {
    min-height: 100svh;
    overflow: hidden;
  }

  /* #2 移动端底部 tab bar（拇指可达；桌面端不显示，工作站用自己的底坞） */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: max(14px, env(safe-area-inset-left, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    justify-content: space-around;
    gap: 6px;
    padding: 6px;
    border-radius: 28px;
    isolation: isolate;
    overflow: visible;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--panel-strong) 72%, transparent),
        color-mix(in oklch, var(--panel) 80%, transparent)
      );
    backdrop-filter: blur(28px) saturate(1.28);
    -webkit-backdrop-filter: blur(28px) saturate(1.28);
    border: 1px solid color-mix(in oklch, var(--line) 72%, rgba(255, 255, 255, 0.22));
    box-shadow:
      0 10px 28px rgba(20, 28, 46, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      inset 0 -1px 0 rgba(20, 28, 46, 0.05);
  }
  .mobile-tab {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 50px;
    border-radius: 22px;
    color: var(--muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      color 180ms var(--ease-smooth),
      background 180ms var(--ease-smooth),
      box-shadow 180ms var(--ease-smooth),
      transform 140ms var(--ease-out-expo);
  }
  .mobile-tab-icon { display: grid; place-items: center; width: 22px; height: 22px; }
  .mobile-tab.is-active {
    color: var(--ink);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--accent, var(--blue)) 18%, var(--panel-strong)),
        color-mix(in oklch, var(--accent, var(--blue)) 11%, transparent)
      );
    box-shadow:
      inset 0 0 0 1px color-mix(in oklch, var(--accent, var(--blue)) 24%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.36),
      0 4px 14px color-mix(in oklch, var(--accent, var(--blue)) 9%, transparent);
  }
  .mobile-tab:active {
    color: var(--ink);
    background: color-mix(in oklch, var(--accent, var(--blue)) 22%, transparent);
    box-shadow:
      inset 0 0 0 1px color-mix(in oklch, var(--accent, var(--blue)) 34%, transparent),
      inset 0 6px 16px color-mix(in oklch, var(--ink) 12%, transparent);
    transform: translateY(1px) scale(0.96);
  }

  /* tab bar 接管导航后：收起顶部文字导航与冗余按钮，正文给底栏留出空间 */
  body.has-mobile-tabbar .site-header > .site-nav { display: none; }
  body.has-mobile-tabbar .site-header > .header-button { display: none; }
  body.has-mobile-tabbar .site-shell {
    height: calc(100svh - 80px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-16);
    scroll-padding-bottom: var(--space-24);
    scrollbar-width: none;
  }
  body.has-mobile-tabbar .site-shell::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* #3 工具页：特性卡 → 可整行点击的索引列表（手机单列，扫读更快） */
  body.page-tools .card-grid.two-up,
  body.page-tools .card-grid.three-up {
    grid-template-columns: 1fr;
  }
  body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid),
  body.page-tools .card-grid.collapsed-tool-grid,
  body.page-tools .card-grid.tools-support-grid,
  body.page-tools .card-grid.tools-learning-grid {
    gap: var(--space-16);
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  body.page-tools .card-grid.collapsed-tool-grid {
    padding: var(--space-16) var(--space-16) var(--space-16);
  }
  body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card:not([hidden]),
  body.page-tools .card-grid.collapsed-tool-grid > .feature-card:not([hidden]) {
    grid-column: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    column-gap: var(--space-16);
    row-gap: var(--space-8);
    min-height: 0;
    padding: 15px var(--space-16);
  }
  body.page-tools .tools-support-grid > .note-card,
  body.page-tools .tools-learning-grid > .note-card {
    grid-column: auto;
  }
  body.page-tools .tools-learning-grid > .note-card:first-child:nth-last-child(2),
  body.page-tools .tools-learning-grid > .note-card:first-child:nth-last-child(2) + .note-card {
    grid-column: auto;
  }
  body.page-tools .feature-card { position: relative; }
  body.page-tools .feature-card .feature-head { grid-column: 1; margin: 0; }
  body.page-tools .feature-card h3 {
    grid-column: 1;
    margin: 5px 0 0;
    font-size: 18px;
    line-height: 1.18;
  }
  body.page-tools .feature-card p {
    grid-column: 1;
    margin: var(--space-8) 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.page-tools .feature-card p .literary-title { display: none; }
  body.page-tools .feature-card ul { display: none; }
  /* CTA → 右侧 chevron button；mobile keeps the card readable without a stretched link.
     The <a> is the only tappable child, so it carries a >=44px hit target while the
     visible ~34px pill is drawn by ::before centered inside it. */
  body.page-tools .feature-card > a {
    position: absolute;
    inset: auto calc(var(--space-16) - 5px) auto auto;
    top: 50%;
    grid-column: 2;
    grid-row: 1 / -1;
    justify-self: end;
    align-self: center;
    inline-size: 44px;
    block-size: 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: transparent;
    border: none;
    color: var(--muted);
    box-shadow: none;
    transform: translateY(-50%);
    z-index: 2;
  }
  body.page-tools .page-stack > .card-grid.two-up:not(.collapsed-tool-grid) > .feature-card > a,
  body.page-tools .card-grid.collapsed-tool-grid > .feature-card:not([hidden]) > a {
    inset: auto calc(var(--space-16) - 5px) auto auto;
    top: 50%;
    grid-column: 2;
    grid-row: 1 / -1;
    margin: 0;
    padding: 0;
    inline-size: 44px;
    block-size: 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: translateY(-50%);
  }
  body.page-tools .feature-card > a > svg,
  body.page-tools .feature-card > a > span { display: none; }
  body.page-tools .feature-card > a::before {
    content: "";
    position: absolute;
    inline-size: 34px;
    block-size: 34px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--ink) 6%, transparent);
    border: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
    z-index: -1;
  }
  body.page-tools .feature-card > a::after {
    content: "";
    position: absolute;
    inline-size: 8px;
    block-size: 8px;
    right: 50%;
    top: 50%;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translate(35%, -50%) rotate(45deg);
  }
  body.page-tools .feature-card > a:hover,
  body.page-tools .feature-card > a:focus-visible {
    color: var(--ink);
    box-shadow: none;
    transform: translateY(-50%);
  }
  body.page-tools .feature-card > a:hover::before,
  body.page-tools .feature-card > a:focus-visible::before {
    background: color-mix(in oklch, var(--ink) 10%, transparent);
    border-color: color-mix(in oklch, var(--ink) 16%, transparent);
  }

  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-16);
    padding: 12px var(--space-16);
    border-radius: var(--radius-lg);
  }

  .site-header.compact {
    top: var(--shell-pad-top, var(--space-16));
  }

  .brand-block {
    --boot-wordmark-collapsed-x: calc((44px + var(--space-16)) * -1);
    min-width: 0;
    gap: var(--space-16);
  }

  .brand-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    flex: 0 0 auto;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-text p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-button {
    white-space: nowrap;
    border-radius: var(--radius-md);
    padding: 9px var(--space-16);
  }

  .site-header > .header-button {
    inline-size: 108px;
    flex-basis: 108px;
  }

  .site-header > .site-nav {
    --site-nav-indicator-offset: -7px;
    --site-nav-indicator-pad: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: var(--space-8);
    padding: var(--space-8);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--panel-strong) 80%, transparent);
  }

  .site-nav a[href="/ai-hub/"],
  .sidebar-footer a[href="/ai-hub/"] {
    display: none;
  }

  body.page-api .site-shell {
    display: none;
  }

  .site-nav a {
    min-height: 44px;
    padding: 0 var(--space-8);
    font-size: 14px;
  }

  .muxing-entry-spotlight-overlay {
    position: fixed;
    inset: 0;
    display: block;
    z-index: 9000;
    pointer-events: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: muxingEntryVeil 1.72s var(--ease-out-expo) forwards;
  }

  .muxing-entry-spotlight-mark {
    position: fixed;
    left: var(--spotlight-left);
    top: var(--spotlight-top);
    display: grid;
    width: var(--spotlight-size);
    height: var(--spotlight-size);
    place-items: center;
    z-index: 9001;
    border-radius: var(--spotlight-radius, 15px);
    pointer-events: none;
    animation: muxingEntryMark 1.72s var(--ease-out-expo) forwards;
  }

  .muxing-entry-spotlight-mark .brand-mark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--spotlight-radius, 15px);
    animation: muxingEntryGlow 1.72s var(--ease-out-expo) forwards;
  }

  .muxing-entry-spotlight-mark .brand-mark::after {
    content: "";
    position: absolute;
    inset: -35% -85%;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(
        112deg,
        transparent 30%,
        rgba(255, 255, 255, 0) 42%,
        rgba(255, 255, 255, 0.92) 49%,
        rgba(126, 168, 216, 0.58) 53%,
        rgba(201, 164, 85, 0.22) 57%,
        transparent 68%
      );
    mix-blend-mode: screen;
    transform: translateX(-62%) rotate(8deg);
    animation: muxingEntrySweep 1.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  body.page-home .site-shell {
    min-height: 100dvh;
  }

  body.has-mobile-tabbar .site-shell {
    height: calc(100svh - 80px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
  }

  .home-hero {
    margin-top: var(--space-8);
    padding: var(--space-16) var(--space-16) var(--space-16);
    gap: var(--space-16);
    border-radius: var(--radius-lg);
  }

  .hero-intro {
    justify-content: flex-start;
  }

  .hero-intro .eyebrow {
    display: none;
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .hero-intro h2 {
    max-width: 7ch;
    font-size: clamp(2.45rem, 12.5vw, 3.35rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
  }

  .hero-intro h2.hero-title-rotator.is-hero-title-variant {
    max-width: 100%;
    min-height: 7.36rem;
    font-size: 2.15rem;
    line-height: 1.14;
    letter-spacing: 0;
  }

  .hero-intro h2.hero-title-rotator.is-hero-title-variant.is-hero-title-tight {
    font-size: 1.98rem;
    line-height: 1.16;
  }

  .system-status {
    display: none;
  }

  .hero-panel {
    align-self: stretch;
    padding: var(--space-16);
    border-radius: var(--radius-lg);
  }

  .panel-head {
    padding: var(--space-8) var(--space-8) var(--space-8);
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .hero-tint-lab {
    display: grid;
    grid-template-columns: auto 32px auto auto;
    width: 100%;
    justify-content: flex-start;
    overflow: visible;
    padding-bottom: 2px;
  }

  .hero-tint-range {
    grid-column: 1 / -1;
    grid-template-columns: 58px minmax(0, 1fr);
    width: 100%;
    box-sizing: border-box;
  }

  .hero-tint-range input {
    width: 100%;
  }

  .hero-tint-compare {
    grid-column: 1;
  }

  .hero-tint-save {
    grid-column: 2 / 4;
  }

  .hero-tint-reset {
    grid-column: 4;
  }

  .carousel-viewport {
    --card-h: 96px;
    --card-gap: 10px;
    height: auto;
    overflow: visible;
    padding: 0 var(--space-8);
    margin: 0 -8px;
    border-radius: var(--radius-lg);
    mask-image: none;
    -webkit-mask-image: none;
  }

  .carousel-card {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    column-gap: var(--space-16);
    row-gap: 0;
    height: auto;
    min-height: 96px;
    padding: 13px var(--space-16) 13px var(--space-16);
    border-radius: var(--radius-md);
  }

  .carousel-card::before {
    width: 24px;
    font-size: 22px;
    transform: translateY(2px);
  }

  .carousel-card > div {
    min-width: 0;
  }

  .carousel-card strong {
    font-size: 18px;
    line-height: 1.18;
  }

  .carousel-card .desc {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12.5px;
    line-height: 1.32;
  }

  .carousel-card em {
    min-width: 74px;
    min-height: 44px; /* tap target ≥44px */
    justify-content: center;
    padding: var(--space-8) 9px;
    font-size: 11.5px;
    gap: var(--space-8);
  }
}

@keyframes muxingEntryVeil {
  0% {
    opacity: 0;
  }
  14%,
  62% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes muxingEntryMark {
  0% {
    opacity: 0;
    transform: translateY(3px) scale(0.88);
  }
  14% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
  32% {
    opacity: 1;
    transform: translateY(0) scale(1.018);
  }
  58% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  74% {
    opacity: 0.62;
    transform: translateY(0) scale(1);
  }
  90% {
    opacity: 0.16;
    transform: translateY(0) scale(0.995);
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(0.995);
  }
}

@keyframes muxingEntryGlow {
  0% {
    filter: brightness(0.82) saturate(0.92);
    box-shadow: var(--mark-shadow);
  }
  18% {
    filter: brightness(1.74) saturate(1.34);
    box-shadow:
      0 0 0 1px rgba(255, 245, 210, 0.9),
      0 0 22px rgba(255, 247, 221, 0.38),
      0 0 32px rgba(126, 168, 216, 0.52),
      0 0 48px rgba(201, 164, 85, 0.3),
      var(--mark-shadow);
  }
  44% {
    filter: brightness(1.28) saturate(1.12);
    box-shadow:
      0 0 0 1px rgba(255, 245, 210, 0.5),
      0 0 18px rgba(126, 168, 216, 0.28),
      0 0 26px rgba(201, 164, 85, 0.18),
      var(--mark-shadow);
  }
  66% {
    filter: brightness(1.1) saturate(1.04);
    box-shadow:
      0 0 0 1px rgba(255, 245, 210, 0.24),
      0 0 12px rgba(126, 168, 216, 0.18),
      var(--mark-shadow);
  }
  84% {
    filter: brightness(1.03) saturate(1.02);
    box-shadow:
      0 0 0 1px rgba(255, 245, 210, 0.1),
      var(--mark-shadow);
  }
  100% {
    filter: brightness(1) saturate(1);
    box-shadow: var(--mark-shadow);
  }
}

@keyframes muxingEntrySweep {
  0%,
  18% {
    opacity: 0;
    transform: translateX(-72%) rotate(8deg);
  }
  34% {
    opacity: 1;
  }
  64% {
    opacity: 0.72;
    transform: translateX(52%) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: translateX(86%) rotate(8deg);
  }
}

@keyframes muxingEntryLogoHalo {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.62);
  }
  14% {
    opacity: 0.72;
  }
  36% {
    opacity: 0.96;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 0.34;
    transform: translate(-50%, -50%) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.28);
  }
}

@keyframes muxingEntryLogoRing {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  18% {
    opacity: 0.82;
  }
  46% {
    opacity: 0.5;
    transform: scale(1.04);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@media (max-width: 640px) {
  .site-header.compact {
    position: static;
    top: auto;
  }

  .page-stack {
    margin-top: var(--space-16);
    gap: var(--space-16);
    min-height: auto;
  }

  .page-hero {
    padding: var(--space-24) var(--space-16);
    border-radius: var(--radius-lg);
  }

  .page-hero h2 {
    font-size: clamp(2rem, 11vw, 2.8rem);
    line-height: 1.03;
    letter-spacing: -0.025em;
  }

  .page-hero p:last-child {
    margin-top: var(--space-8);
    font-size: 14px;
    line-height: 1.55;
  }

  .page-hero.section-divider {
    min-height: 0;
    padding: var(--space-8) 19px 0;
    margin-top: var(--space-8);
    border-radius: 0;
  }

  .page-hero.section-divider::before {
    content: none;
  }

  .page-hero.section-divider::after {
    content: none;
  }

  .card-grid {
    gap: var(--space-16);
  }

  .feature-card,
  .timeline-card,
  .note-card,
  .learn-card {
    padding: var(--space-16);
    border-radius: var(--radius-lg);
  }

  .feature-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .feature-card h3,
  .timeline-card h3 {
    margin: var(--space-16) 0 var(--space-8);
    font-size: 23px;
    line-height: 1.08;
  }

  .feature-card p,
  .timeline-card li,
  .workflow-grid p,
  .feed-board p,
  .info-panel span {
    line-height: 1.58;
  }

  .feature-card ul,
  .timeline-card ul {
    margin: var(--space-16) 0 var(--space-16);
  }

  .feature-card a,
  .workflow-grid a,
  .learn-card > a {
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-md);
  }

  .note-card h3 {
    line-height: 1.15;
  }

  .note-card a {
    min-height: 44px;
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-sm);
  }

  .learn-card > a {
    padding: var(--space-16) var(--space-16);
    white-space: normal;
  }

  .tool-collapse {
    margin-top: var(--space-8);
    border-radius: var(--radius-lg);
  }

  .tool-collapse summary {
    align-items: flex-start;
    padding: var(--space-16) var(--space-16);
  }

  .tool-collapse-action {
    inline-size: 36px;
    block-size: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
  }

  .tool-collapse-chevron {
    width: 15px;
    height: 10px;
  }

  .collapsed-tool-grid {
    padding: 0 var(--space-16) var(--space-16);
  }

  .graph-head {
    padding: var(--space-16) var(--space-16) var(--space-16);
  }

  .graph-container {
    height: 340px;
  }

  .site-footer {
    flex-wrap: wrap;
    padding: var(--space-16) var(--space-16);
    line-height: 1.5;
  }
}

@media (max-width: 380px) {
  .site-shell {
    --shell-pad-top: max(var(--space-8), env(safe-area-inset-top, 0px));
    padding: var(--shell-pad-top) var(--space-8) var(--space-8);
  }

  .site-header {
    padding: var(--space-16);
    border-radius: var(--radius-lg);
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-md);
  }

  .brand-block {
    --boot-wordmark-collapsed-x: calc((40px + var(--space-16)) * -1);
  }

  .header-button {
    max-width: 118px;
    padding-inline: var(--space-8);
    font-size: 12px;
  }

  .site-header > .header-button {
    inline-size: 104px;
    flex-basis: 104px;
  }

  .home-hero {
    padding: var(--space-16) var(--space-16) var(--space-16);
    border-radius: var(--radius-lg);
  }

  .hero-intro h2 {
    font-size: clamp(2.25rem, 12vw, 3rem);
  }

  .hero-intro h2.hero-title-rotator.is-hero-title-variant {
    font-size: 1.78rem;
    line-height: 1.18;
  }

  .hero-intro h2.hero-title-rotator.is-hero-title-variant.is-hero-title-tight {
    font-size: 1.64rem;
    line-height: 1.2;
  }

  .carousel-card {
    min-height: 90px;
    padding: var(--space-16) var(--space-8) var(--space-16) var(--space-16);
    column-gap: var(--space-8);
  }

  .carousel-card strong {
    font-size: 17px;
  }

  .carousel-card::before {
    width: 22px;
    font-size: 20px;
  }

  .carousel-card em {
    min-width: 74px;
    padding-inline: var(--space-8);
  }
}

/* ── SPA Navigation Overrides ── */
.spa-navigated .site-header,
.spa-navigated .hero-actions,
.spa-navigated .hero-tags,
.spa-navigated .hero-meta,
.spa-navigated .tool-link,
.spa-navigated .page-hero,
.spa-navigated .timeline-card,
.spa-navigated .feature-card:not(.mx-card-reveal-managed),
.spa-navigated .note-card:not(.mx-card-reveal-managed),
.spa-navigated .learn-card,
.spa-navigated .info-panel,
.spa-navigated .graph-panel,
.spa-navigated .api-global-bar,
.spa-navigated .api-pool-panel,
.spa-navigated .api-binding-panel,
.spa-navigated .api-detail-panel {
  animation: none !important;
  opacity: 1 !important;
}

.spa-navigated .home-hero {
  animation: spaHomeHeroReveal 120ms var(--ease-smooth) both;
}

@keyframes spaHomeHeroReveal {
  from { opacity: 0.98; transform: none; }
  to { opacity: 1; transform: none; }
}

.spa-fast-snapshot {
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.82;
  transform: translateZ(0);
  transition: opacity 110ms var(--ease-out-expo);
}

.spa-fast-snapshot > .site-shell {
  visibility: hidden;
  opacity: 0;
}

.spa-fast-snapshot.spa-fast-snapshot-hide {
  opacity: 0;
}

.site-shell.spa-fast-entering {
  opacity: 0.98;
}

.site-shell.spa-fast-entering.spa-fast-entered {
  opacity: 1;
  transition: opacity 160ms var(--ease-in-quart);
}

/* ── Subpage content "rising out of water" SPA transition (slow ~2s) ── */
/* On every fast SPA swap BETWEEN SUBPAGES the entering content body surfaces
   over a deliberate ~2s arc: it rises and comes into focus while a content-
   bounded water tint drains away. Deliberately scoped to the content ONLY —
   the nav stays crisp, the background (body::before/::after at z-index:0) is
   never blurred or tinted, and HOME never participates: its <main> is
   .home-hero (a tested red zone), so the :scope > main.page-stack selector
   below never matches it.

   The effect lives entirely INSIDE main.page-stack:
   - the element itself rises + de-blurs (.spa-content-rising → .risen);
   - main.page-stack::before is the water tint, clipped to the content rect
     (position:absolute inside the already-position:relative .page-stack), so it
     can never bleed onto the nav or background. NO backdrop-filter anywhere —
     that was what tinted/blurred the background — only a plain gradient.

   The .site-shell is NEVER transformed/blurred — moving the reused shell drags
   the persisted header and reads as a page jump (locked by
   tests/spa-navigation-no-page-jump.test.mjs). Lifecycle is owned by
   runFastPageTransition in app.js. */

/* Blur + opacity clear in ~1.2s so the real body text is readable early (not
   blurred for the full 2s); the small translateY settles even earlier (~0.85s)
   so it is OFFSET from each card's own 18px IO reveal (which only starts after
   the navigation promise resolves) — no compounded double-translate. The slow
   ~2s "presence" of the transition is carried by the water tint ::before
   (1550ms drain) and the overall pacing, not by keeping the text soft. Uses
   transition, NOT animation, so the SPA `animation: none !important`
   suppression block never touches it. */
.spa-content-rising {
  transform: translate3d(0, 26px, 0);
  filter: blur(8px) saturate(0.92);
  opacity: 0.9;
  will-change: transform, filter, opacity;
}

.spa-content-rising.spa-content-risen {
  transform: translate3d(0, 0, 0);
  filter: blur(0) saturate(1);
  opacity: 1;
  transition:
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Water tint, bounded to the content rect and laid BEHIND the content
   (z-index:-1 inside .page-stack's own stacking context) so it reads as water
   under the page and never impairs text. Idle opacity is 0; it shows while the
   content is underwater and drains as it surfaces. */
main.page-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to top,
    rgb(var(--flow-aqua-rgb) / 0.3) 0%,
    rgb(var(--flow-aqua-rgb) / 0.14) 36%,
    rgb(var(--flow-light-rgb) / 0.05) 66%,
    transparent 100%
  );
}

main.page-stack.spa-content-rising::before {
  opacity: 1;
}

main.page-stack.spa-content-rising.spa-content-risen::before {
  opacity: 0;
  transition: opacity 1550ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Low power (b): drop every GPU-heavy filter/blur — the content rise keeps only
   a light opacity settle, no blur/translate, and the water tint is disabled
   (aligns with the background pseudo-elements being killed under low power). */
html[data-performance="low"] .spa-content-rising,
html[data-performance="low"] .spa-content-rising.spa-content-risen {
  filter: none !important;
  transform: none !important;
}

html[data-performance="low"] main.page-stack::before {
  display: none !important;
}

/* Reduced motion (a): belt-and-braces. The JS short-circuits to a plain DOM
   swap before the rise is ever armed, but if it slips through, show no motion
   and no tint at all. */
@media (prefers-reduced-motion: reduce) {
  .spa-content-rising,
  .spa-content-rising.spa-content-risen {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  main.page-stack::before {
    display: none !important;
  }
}

.spa-fast-switching .spa-navigated .site-header,
.spa-fast-switching .spa-navigated .page-hero,
.spa-fast-switching .spa-navigated .feature-card:not(.mx-card-reveal-managed),
.spa-fast-switching .spa-navigated .note-card:not(.mx-card-reveal-managed),
.spa-fast-switching .spa-navigated .learn-card,
.spa-fast-switching .spa-navigated .info-panel,
.spa-fast-switching .spa-navigated .api-global-bar,
.spa-fast-switching .spa-navigated .api-pool-panel,
.spa-fast-switching .spa-navigated .api-binding-panel,
.spa-fast-switching .spa-navigated .api-detail-panel {
  animation-delay: 0s !important;
  animation-duration: 180ms !important;
}

.spa-fast-switching body.page-tools .spa-navigated :is(
  .page-stack > .page-hero,
  .page-stack > .tool-collapse,
  .page-stack > .graph-panel,
  .card-grid:not(.collapsed-tool-grid):not(.tools-support-grid):not(.tools-learning-grid):not(.tools-learning-feature) > .feature-card.mx-io-reveal,
  .tools-support-grid > .note-card.mx-io-reveal
) {
  opacity: 1;
  transform: none;
  transition: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .spa-fast-switching body.page-tools .spa-navigated :is(.tools-learning-grid, .tools-learning-feature) > .note-card:not(.is-in-view) {
    animation: none !important;
    opacity: 0 !important;
    transform: translate3d(0, 18px, 0) !important;
    transition: none !important;
  }
}

.spa-fast-switching body:is(.page-home, .page-tools, .page-api) .is-under-header-glass,
.spa-fast-switching body:is(.page-home, .page-tools, .page-api) .is-leaving-header-glass {
  filter: blur(0) saturate(1) contrast(1) brightness(1) !important;
  opacity: 1 !important;
}

/* ── Spatial portal entrance (tool card → workspace) ── */
/* All three layers are GPU-composited; the bloom is the only full-viewport
   element and it animates clip-path + opacity only (no per-frame blur). */
.spatial-portal-bloom {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    radial-gradient(
      70% 70% at var(--portal-x, 50%) var(--portal-y, 50%),
      rgba(255, 255, 255, 0.06),
      transparent 72%
    ),
    var(--bg-gradient, var(--bg));
  will-change: clip-path, opacity;
  transform: translateZ(0);
}

.spatial-portal-ghost {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  overflow: hidden;
  will-change: transform, opacity;
  transform: translateZ(0);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.45);
}

.spatial-portal-ghost > .feature-card {
  width: 100%;
  height: 100%;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .spatial-portal-bloom,
  .spatial-portal-ghost {
    display: none !important;
  }
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .ambient {
    opacity: 0.6 !important;
    animation: none !important;
  }
}

/* ── Footer ── */

/* Low-power mode: auto-enabled for reduced motion or older hardware. */
html[data-performance="low"] {
  overflow-y: auto;
  scroll-behavior: auto;
}

html[data-performance="low"] body:is(.page-home, .page-tools, .page-api) {
  overflow-x: clip;
  overflow-y: visible;
}

html[data-performance="low"] body.page-home .hero-panel {
  opacity: 1;
  visibility: visible;
}

html[data-performance="low"] .ambient {
  filter: blur(42px);
  opacity: 0.28 !important;
  animation: none !important;
  will-change: auto;
}

html[data-performance="low"] .grid-noise {
  opacity: 0.06;
}

html[data-performance="low"] .site-header,
html[data-performance="low"] .home-hero,
html[data-performance="low"] .page-hero,
html[data-performance="low"] .hero-panel,
html[data-performance="low"] .feature-card,
html[data-performance="low"] .note-card,
html[data-performance="low"] .learn-card,
html[data-performance="low"] .info-panel,
html[data-performance="low"] .graph-panel,
html[data-performance="low"] .workspace-sidebar,
html[data-performance="low"] .api-panel,
html[data-performance="low"] .api-global-bar,
html[data-performance="low"] .api-pool-panel,
html[data-performance="low"] .api-binding-panel,
html[data-performance="low"] .api-detail-panel,
html[data-performance="low"] .carousel-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 12px 32px rgba(21, 30, 48, 0.08);
}

html[data-performance="low"] body.page-tools .tools-section-divider {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-performance="low"] body.is-header-glass-active:is(.page-home, .page-tools, .page-api) .site-header.compact {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-performance="low"] body:is(.page-home, .page-tools, .page-api) .is-under-header-glass,
html[data-performance="low"] body:is(.page-home, .page-tools, .page-api) .is-leaving-header-glass {
  filter: none !important;
  opacity: 1 !important;
  animation: none !important;
  will-change: auto;
}

html[data-performance="low"] .graph-panel,
html[data-performance="low"] .status-pill.live,
html[data-performance="low"] .status-pill.live::before,
html[data-performance="low"] .workspace-route-dot,
html[data-performance="low"] .workspace-route-text,
html[data-performance="low"] .ws-loading-star,
html[data-performance="low"] .api-spinner,
html[data-performance="low"] .api-chat-status {
  animation: none !important;
  opacity: 1 !important;
}

.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-24) var(--space-24);
  margin-top: var(--space-16);
  font-size: 11px;
  font-weight: 500;
  color: color-mix(in oklch, var(--muted), transparent 40%);
  letter-spacing: 0.02em;
}

.footer-sep {
  opacity: 0.4;
}

.muxing-performance-route-preview {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  z-index: 9400;
  max-width: min(520px, calc(100vw - 24px));
  pointer-events: auto;
  color: color-mix(in oklch, var(--muted) 72%, transparent);
  font: 500 10px/1.4 var(--font-mono, "DM Mono", monospace);
  letter-spacing: 0;
  text-wrap: balance;
}

.muxing-performance-route-preview a {
  color: inherit;
  text-decoration: none;
}

.muxing-performance-route-preview a:hover,
.muxing-performance-route-preview a:focus-visible,
.muxing-performance-route-preview a[aria-current="true"] {
  color: color-mix(in oklch, var(--ink) 72%, transparent);
}

.muxing-sound-toggle {
  position: fixed;
  right: calc(6vh + env(safe-area-inset-right, 0px));
  bottom: calc(6vh + env(safe-area-inset-bottom, 0px));
  z-index: 9300;
  width: 8vh;
  height: 8vh;
  padding: 0;
  border: 0;
  color: color-mix(in oklch, var(--ink) 82%, transparent);
  background: transparent;
  opacity: 1;
  cursor: pointer;
  display: block;
  touch-action: manipulation;
  transition: color 0.24s var(--ease-smooth), opacity 0.24s var(--ease-smooth);
}

.muxing-sound-toggle canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.muxing-sound-toggle:is(:hover, :focus-visible),
.muxing-sound-toggle.is-on {
  color: var(--ink);
}

.muxing-sound-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
}

.muxing-sound-toggle.is-awaiting {
  opacity: 0.78;
}

html[data-theme="stellar"] .muxing-sound-toggle {
  color: color-mix(in oklch, var(--ink) 78%, transparent);
}

@media (max-width: 768px) {
  .muxing-sound-toggle {
    right: calc(6vh + env(safe-area-inset-right, 0px));
    bottom: calc(6vh + env(safe-area-inset-bottom, 0px));
    width: 8vh;
    height: 8vh;
  }

  body.page-workspace .muxing-sound-toggle {
    bottom: calc(var(--workspace-mobile-nav-height) + 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .muxing-sound-toggle {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════
   Workspace Shell
   ═══════════════════════════════════════════════════ */

body.page-workspace {
  overflow: hidden;
  --workspace-mobile-nav-height: calc(76px + env(safe-area-inset-bottom, 0px));
  --workspace-sidebar-bg:
    linear-gradient(90deg,
      color-mix(in oklch, var(--bg) 82%, var(--amber) 18%),
      color-mix(in oklch, var(--bg) 93%, white 7%));
  --workspace-sidebar-border: color-mix(in oklch, var(--ink) 10%, transparent);
  --workspace-sidebar-divider: color-mix(in oklch, var(--ink) 8%, transparent);
  --workspace-sidebar-shadow:
    inset -1px 0 0 color-mix(in oklch, white 46%, transparent),
    10px 0 34px rgba(24, 36, 58, 0.1);
  --workspace-sidebar-hover-bg: color-mix(in oklch, var(--ink) 6%, transparent);
}

html[data-theme="nature"] body.page-workspace {
  --workspace-sidebar-bg:
    linear-gradient(90deg,
      color-mix(in oklch, var(--bg) 82%, var(--green) 18%),
      color-mix(in oklch, var(--bg) 88%, var(--green) 12%));
}

html[data-theme="stellar"] body.page-workspace {
  --workspace-sidebar-bg: #121628;
}

body.page-workspace .site-shell {
  padding: 0;
  display: block;
  height: 100vh;
  overflow: hidden;
  animation: none;
}

@supports (height: 100dvh) {
  body.page-workspace .site-shell {
    height: 100dvh;
  }
}

/* ── Sidebar ── */

.workspace-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 61px;
  display: flex;
  flex-direction: column;
  background: var(--workspace-sidebar-bg);
  border-right: 1px solid var(--workspace-sidebar-border);
  box-shadow: var(--workspace-sidebar-shadow);
  overflow: hidden;
  z-index: 40;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: width 0.32s var(--ease-out-expo);
}

.workspace-sidebar:hover {
  width: 200px;
}

.sidebar-header {
  padding: var(--space-16) var(--space-16);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  border-bottom: 1px solid var(--workspace-sidebar-divider);
  min-height: 56px;
}

.workspace-sidebar .brand-mark {
  min-width: 28px;
  min-height: 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-sm);
  flex: 0 0 28px;
}

.sidebar-brand-text {
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s var(--ease-smooth) 0.05s;
}

.workspace-sidebar:hover .sidebar-brand-text {
  opacity: 1;
}

.sidebar-section-label {
  padding: var(--space-16) var(--space-16) var(--space-8);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s var(--ease-smooth) 0.05s;
}

.workspace-sidebar:hover .sidebar-section-label {
  opacity: 1;
}

.sidebar-tools {
  flex: 0 0 auto;
  padding: var(--space-8) var(--space-8);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: relative; /* positioning context for the spring connector pill */
}

.sidebar-more-section {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--workspace-sidebar-divider);
  overflow: hidden;
}

.sidebar-more-section[hidden] {
  display: none;
}

.sidebar-section-label-secondary {
  padding-top: var(--space-8);
}

.sidebar-tools-secondary {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  overflow: visible;
  position: relative; /* positioning context for the spring connector pill */
}

.sidebar-tool-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-8) var(--space-8);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s var(--ease-smooth), transform 115ms var(--ease-out-expo), box-shadow 115ms var(--ease-out-expo);
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  text-align: left;
}

.sidebar-tool-item:hover {
  background: var(--workspace-sidebar-hover-bg);
  color: var(--ink);
}

/* Flat row — press reads as a recess, not a scale: keep the fill, sink an inset. */
.sidebar-tool-item:active {
  transform: scale(0.98);
  background: var(--workspace-sidebar-hover-bg);
  box-shadow: inset 0 1px 2px rgba(24, 36, 58, 0.1);
}

.sidebar-tool-item.active {
  background: color-mix(in oklch, var(--blue) 10%, transparent);
  color: var(--ink);
}

/* Spring connector pill — the traveling active highlight (desktop). JS springs
   its translateY + height to the active item; --pill-ac is set per active tool. */
.sidebar-active-pill {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--pill-ac, var(--blue)) 13%, transparent);
  border: 1px solid color-mix(in oklch, var(--pill-ac, var(--blue)) 24%, transparent);
  /* lit top edge + faint accent lift, keyed to the active tool's hue —
     ties the dock's active marker into the refreshed accent language. */
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--pill-ac, var(--blue)) 35%, transparent),
    0 2px 8px color-mix(in oklch, var(--pill-ac, var(--blue)) 14%, transparent);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.has-pill .sidebar-tool-item { position: relative; z-index: 1; }
.has-pill .sidebar-tool-item.active { background: transparent; }

/* Tool icon (single character) */

.tool-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  transition:
    box-shadow 215ms var(--ease-smooth),
    transform 215ms var(--ease-out-expo),
    background 215ms var(--ease-smooth);
}

.sidebar-tool-item.signal .tool-icon {
  background: color-mix(in oklch, var(--green) 12%, transparent);
  color: var(--green);
}
.sidebar-tool-item.commerce .tool-icon {
  background: color-mix(in oklch, var(--blue) 12%, transparent);
  color: var(--blue);
}
.sidebar-tool-item.preview .tool-icon {
  background: color-mix(in oklch, var(--amber) 12%, transparent);
  color: var(--amber);
}
.sidebar-tool-item.formula .tool-icon {
  background: color-mix(in oklch, var(--violet) 12%, transparent);
  color: var(--violet);
}
.sidebar-tool-item.image .tool-icon {
  background: color-mix(in oklch, var(--rose) 12%, transparent);
  color: var(--rose);
}

/* Hover glow on sidebar tool icons — mirrors homepage spectral glow */
.sidebar-tool-item:hover .tool-icon {
  transform: translateY(-2px) scale(1.08);
}
.sidebar-tool-item.signal:hover .tool-icon {
  box-shadow:
    0 0 0 1.5px rgba(46, 125, 105, 0.25),
    0 2px 8px rgba(46, 125, 105, 0.3),
    0 4px 16px rgba(46, 125, 105, 0.15);
}
.sidebar-tool-item.commerce:hover .tool-icon {
  box-shadow:
    0 0 0 1.5px rgba(62, 99, 255, 0.25),
    0 2px 8px rgba(62, 99, 255, 0.3),
    0 4px 16px rgba(62, 99, 255, 0.15);
}
.sidebar-tool-item.preview:hover .tool-icon {
  box-shadow:
    0 0 0 1.5px rgba(213, 154, 57, 0.25),
    0 2px 8px rgba(213, 154, 57, 0.3),
    0 4px 16px rgba(213, 154, 57, 0.15);
}
.sidebar-tool-item.formula:hover .tool-icon {
  box-shadow:
    0 0 0 1.5px rgba(101, 94, 255, 0.25),
    0 2px 8px rgba(101, 94, 255, 0.3),
    0 4px 16px rgba(101, 94, 255, 0.15);
}
.sidebar-tool-item.image:hover .tool-icon {
  box-shadow:
    0 0 0 1.5px rgba(212, 99, 123, 0.25),
    0 2px 8px rgba(212, 99, 123, 0.3),
    0 4px 16px rgba(212, 99, 123, 0.15);
}

.sidebar-tool-item.active .tool-icon {
  box-shadow: 0 0 0 2px currentColor;
}

/* FLEET dock proximity magnify (desktop): workspace.js sets each .tool-icon's
   `scale` by cursor distance. Smooth it, and let it own the scale so it does
   not compound with the binary hover scale above. */
.workspace-sidebar.has-proximity .sidebar-tool-item .tool-icon {
  transition: scale 130ms var(--ease-out-expo), box-shadow 215ms var(--ease-smooth),
    transform 215ms var(--ease-out-expo), background 215ms var(--ease-smooth);
  will-change: transform;
}
.workspace-sidebar.has-proximity .sidebar-tool-item:hover .tool-icon {
  transform: translateY(-2px);
}

.tool-name {
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.25s var(--ease-smooth) 0.05s;
}

.workspace-sidebar:hover .tool-name {
  opacity: 1;
}

/* Sidebar footer */

.sidebar-footer {
  padding: var(--space-8);
  border-top: 1px solid var(--workspace-sidebar-divider);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth);
  text-decoration: none;
}

.sidebar-link:hover {
  background: var(--workspace-sidebar-hover-bg);
  color: var(--ink);
}

/* ── Animated Tool Icons in Sidebar Footer ── */

.sidebar-link:hover .icon-grid .grid-1 { animation: grid-pop 0.4s var(--ease-smooth) forwards; animation-delay: 0s; }
.sidebar-link:hover .icon-grid .grid-2 { animation: grid-pop 0.4s var(--ease-smooth) forwards; animation-delay: 0.05s; }
.sidebar-link:hover .icon-grid .grid-4 { animation: grid-pop 0.4s var(--ease-smooth) forwards; animation-delay: 0.1s; }
.sidebar-link:hover .icon-grid .grid-3 { animation: grid-pop 0.4s var(--ease-smooth) forwards; animation-delay: 0.15s; }

@keyframes grid-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.sidebar-link:hover .icon-home {
  animation: home-bounce 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
.sidebar-link:hover .icon-home .home-door {
  transform-origin: bottom;
  animation: door-slide 0.4s var(--ease-smooth) forwards;
}

.sidebar-link:hover .icon-plug {
  animation: plug-bob 0.35s var(--ease-smooth) forwards;
}

.sidebar-link:hover .icon-plug .plug-prong-left,
.sidebar-link:hover .icon-plug .plug-prong-right {
  animation: plug-prong-spark 0.35s var(--ease-smooth) forwards;
}

@keyframes home-bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
@keyframes door-slide {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes plug-bob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes plug-prong-spark {
  0% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

.sidebar-link-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-link-label {
  display: none;
  min-width: 0;
  opacity: 0;
  transition: opacity 0.25s var(--ease-smooth);
}

.workspace-sidebar:hover .sidebar-link {
  justify-content: flex-start;
}

.workspace-sidebar:hover .sidebar-link-label {
  display: inline-flex;
  opacity: 1;
}

/* ── Main content area ── */

.workspace-main {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 61px;
  right: 0;
  bottom: 0;
}

/* ── VISUAL REFRESH · Lote A — workspace shell toolbar (polish, on-system) ────
   A taller, calmer 甲板 toolbar: more breathing room around the tool cluster, a
   crisp hairline + a soft cast shadow so the bar reads as floating over the tool
   surface, and a refined badge / title / action-button set. Colour stays on the
   --panel / --ink / --line token path so it tracks 晨光 / 自然 / 星辰. */
.workspace-header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-16) 0 var(--space-24);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px -14px color-mix(in oklch, var(--ink) 50%, transparent);
  flex-shrink: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html:not([data-theme]) .workspace-header {
  background: #eee7d9;
}

.workspace-title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.workspace-header-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-16);
  flex: 1;
  min-width: 0;
  margin-left: var(--space-24);
}

.workspace-title h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  color: var(--ink);
}

.workspace-tool-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge-signal { background: color-mix(in oklch, var(--green) 14%, transparent); color: var(--green); }
.badge-commerce { background: color-mix(in oklch, var(--blue) 14%, transparent); color: var(--blue); }
.badge-preview { background: color-mix(in oklch, var(--amber) 14%, transparent); color: var(--amber); }
.badge-formula { background: color-mix(in oklch, var(--violet) 14%, transparent); color: var(--violet); }
.badge-image { background: color-mix(in oklch, var(--rose) 14%, transparent); color: var(--rose); }

.workspace-route-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  min-width: 0;
  flex: 1;
  max-width: min(52vw, 680px);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
}

.workspace-route-status[data-state="healthy"] {
  color: var(--muted);
}

.workspace-route-status[data-state="unconfigured"] {
  opacity: 0.82;
}

.workspace-route-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  background: var(--green);
  animation: workspace-route-pulse 2s var(--ease-in-out) infinite;
}

.workspace-route-status[data-state="healthy"] .workspace-route-dot {
  background: var(--green);
  animation: workspace-route-pulse 2s var(--ease-in-out) infinite;
}

.workspace-route-status[data-state="unhealthy"] .workspace-route-dot {
  background: var(--rose);
  animation: none;
}

.workspace-route-status[data-state="unconfigured"] .workspace-route-dot {
  background: color-mix(in oklch, var(--muted) 72%, white 28%);
  animation: none;
}

.workspace-route-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@keyframes workspace-route-pulse {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 1; }
}

.workspace-actions {
  display: flex;
  gap: var(--space-8);
  flex-shrink: 0;
}

.ws-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth);
}

.ws-action-btn:hover {
  background: color-mix(in oklch, var(--ink) 9%, transparent);
  color: var(--ink);
  border-color: color-mix(in oklch, var(--ink) 18%, transparent);
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-external .ext-base {
  animation: ih-external-box-contract 420ms var(--ease-out-expo) both;
}

.motion-trigger:is(:hover, :focus-visible, :focus-within) .icon-external .ext-arrow {
  animation: ih-external-arrow-fly 520ms var(--ease-smooth) forwards;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-external .ext-base {
  animation: ih-external-box-contract 420ms var(--ease-out-expo) both;
}

.motion-trigger-container:is(:hover, :focus-within) .motion-trigger .icon-external .ext-arrow {
  animation: ih-external-arrow-fly 520ms var(--ease-smooth) forwards;
}

@keyframes ih-external-box-contract {
  0%, 100% { transform: scale(1); }
  46% { transform: scale(0.92); }
}

@keyframes ih-external-arrow-fly {
  0% { transform: translate(0, 0); }
  50% { transform: translate(3px, -3px); opacity: 0; }
  51% { transform: translate(-3px, 3px); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translate(0, 0); }
}

/* ── iframe content ── */

.workspace-content {
  flex: 1;
  position: relative;
  background: var(--bg);
}

.workspace-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
  border-radius: 0;
  /* Reveal/cross-fade is driven by GSAP (spatial tool handoff) when motion is
     allowed, and by an instant visibility swap otherwise — no CSS opacity
     transition here, which would fight GSAP's per-frame opacity writes. */
}

html[data-theme="stellar"] .workspace-iframe {
  background: #0f1219;
}

/* ── Loading state ── */

.workspace-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  background:
    radial-gradient(circle at 20% 50%, rgb(var(--flow-light-rgb, 213 86 109) / 0.32), transparent 34%),
    radial-gradient(circle at 72% 42%, rgb(var(--flow-aqua-rgb, 144 191 224) / 0.18), transparent 38%),
    var(--bg);
  z-index: 5;
  transition: opacity 0.3s var(--ease-smooth);
  overflow: hidden;
}

.workspace-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

.workspace-loading::before {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.62), transparent 0 18%, rgba(255, 255, 255, 0.16) 24%, transparent 34%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 9px);
  filter: blur(10px) saturate(1.12);
  mix-blend-mode: screen;
}

.workspace-loading.is-switch-cover {
  animation: ws-loading-cover-refract 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: clip-path, filter;
}

.workspace-loading.is-switch-reveal {
  animation: ws-loading-reveal-refract 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: clip-path, filter;
}

.workspace-loading.is-switch-cover::before,
.workspace-loading.is-switch-reveal::before {
  animation: ws-loading-water-glint 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html[data-theme="stellar"] .workspace-loading::before {
  display: none;
}

@keyframes ws-loading-cover-refract {
  0% { clip-path: circle(0% at 50% 50%); filter: saturate(0.94) blur(2px); }
  55% { clip-path: circle(78% at 50% 50%); filter: saturate(1.05) blur(0.6px); }
  100% { clip-path: circle(145% at 50% 50%); filter: saturate(1) blur(0); }
}

@keyframes ws-loading-reveal-refract {
  0% { clip-path: circle(145% at 50% 50%); filter: saturate(1) blur(0); }
  42% { clip-path: circle(82% at 50% 50%); filter: saturate(1.04) blur(0.5px); }
  100% { clip-path: circle(0% at 50% 50%); filter: saturate(0.98) blur(2px); }
}

@keyframes ws-loading-water-glint {
  0% { opacity: 0; transform: scale(0.96); }
  35% { opacity: 0.75; }
  100% { opacity: 0; transform: scale(1.04); }
}

/* 旋转棱镜：品牌星标加载动画，长加载工具（如 AI 画布）等待时用 */
.ws-loading-star {
  width: 44px;
  height: 44px;
  animation: ws-prism-spin 2.4s cubic-bezier(0.62, 0.04, 0.35, 0.98) infinite,
             ws-prism-glow 2.4s ease-in-out infinite;
}

@keyframes ws-prism-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes ws-prism-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(111, 208, 255, 0.35)); }
  50% { filter: drop-shadow(0 0 14px rgba(111, 208, 255, 0.7)); }
}

@keyframes ws-spin {
  to { transform: rotate(360deg); }
}

.workspace-loading p {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  position: relative;
  z-index: 1;
}

.workspace-loading .ws-loading-star {
  position: relative;
  z-index: 1;
}

/* ── Loading skeleton ──
   Shows through the (transparent) iframe pool while a tool paints, so the wait
   reads as "loading this tool" instead of a blank panel. */
.ws-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: clamp(var(--space-24), 4vw, var(--space-48));
  opacity: 0.8;
  pointer-events: none;
}

.ws-skel-bar,
.ws-skel-grid span {
  border-radius: var(--radius-sm, 10px);
  /* Solid fallback first (engines without color-mix keep a visible block). */
  background: color-mix(in oklab, var(--muted) 16%, transparent);
  background: linear-gradient(
    100deg,
    color-mix(in oklab, var(--muted) 14%, transparent) 18%,
    color-mix(in oklab, var(--muted) 30%, transparent) 40%,
    color-mix(in oklab, var(--muted) 14%, transparent) 62%
  );
  background-size: 200% 100%;
  animation: ws-skel-shimmer 1.4s var(--ease-in-out) infinite;
}

.ws-skel-bar-a {
  height: 26px;
  width: 38%;
}

.ws-skel-bar-b {
  height: 15px;
  width: 22%;
  opacity: 0.7;
}

.ws-skel-grid {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
  flex: 1;
}

.ws-skel-grid span {
  display: block;
}

@keyframes ws-skel-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.workspace-loading[data-state="error"] .ws-skeleton,
.workspace-loading[data-state="error"] .ws-loading-star {
  display: none;
}

.workspace-loading[data-state="error"] p {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .workspace-loading.is-switch-cover,
  .workspace-loading.is-switch-reveal {
    animation: none;
    clip-path: none;
  }

  .ws-skel-bar,
  .ws-skel-grid span {
    animation: none;
  }
}

html[data-performance="low"] .ws-skel-bar,
html[data-performance="low"] .ws-skel-grid span {
  animation: none;
}

/* ── Mobile: bottom tab bar ── */

@media (max-width: 768px) {
  body.page-workspace {
    --workspace-mobile-nav-height: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .workspace-header {
    height: auto;
    min-height: 52px;
    padding: var(--space-8) var(--space-16);
    gap: var(--space-8);
  }

  .workspace-title {
    min-width: 0;
    flex: 1;
  }

  .workspace-title h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-header-side {
    margin-left: 0;
    gap: var(--space-8);
    flex: 1;
  }

  .workspace-route-status {
    max-width: min(46vw, 220px);
  }

  .workspace-route-text {
    font-size: 11px;
  }

  .workspace-sidebar {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: auto;
    min-height: var(--workspace-mobile-nav-height);
    flex-direction: row;
    align-items: stretch;
    border-right: none;
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(20, 28, 46, 0.12);
  }

  .workspace-main {
    left: 0;
    bottom: var(--workspace-mobile-nav-height);
  }

  .sidebar-header,
  .sidebar-footer,
  .sidebar-section-label,
  .sidebar-more-section {
    display: none;
  }

  .sidebar-tools {
    flex: 1 1 auto;
    flex-direction: row;
    padding: var(--space-8) var(--space-8) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    gap: var(--space-8);
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    justify-content: space-evenly;
    scroll-snap-type: x proximity;
  }

  .sidebar-tool-item {
    flex-direction: column;
    min-width: 62px;
    min-height: 58px;
    padding: 7px 9px;
    gap: 3px;
    font-size: 11px;
    border-radius: var(--radius-sm);
    scroll-snap-align: center;
  }

  .tool-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .tool-name {
    opacity: 1 !important;
    max-width: 64px;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ws-action-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
  }

  /* 选中态：统一的强调指示条 + 中性 pill，去掉那圈像报错的彩色描边 */
  .sidebar-tool-item { position: relative; }
  .sidebar-tool-item.active {
    background: color-mix(in oklch, var(--ink) 5%, transparent);
  }
  .sidebar-tool-item.active .tool-icon { box-shadow: none; }
  .sidebar-tool-item.active .tool-name { color: var(--ink); font-weight: 700; }
  .sidebar-tool-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 22px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    transform: translateX(-50%);
    background: var(--accent, var(--blue));
  }

  /* 触屏无 hover：点击后不要残留悬停高亮 / 位移 */
  .sidebar-tool-item:hover { background: transparent; }
  .sidebar-tool-item.active:hover {
    background: color-mix(in oklch, var(--ink) 5%, transparent);
  }
  .sidebar-tool-item:hover .tool-icon { transform: none; box-shadow: none; }
}

@media (max-width: 430px) {
  .workspace-header {
    min-height: 56px;
    padding: var(--space-8) var(--space-8);
  }

  .workspace-tool-badge {
    padding-inline: 7px;
  }

  .workspace-header-side {
    gap: var(--space-8);
    flex: 0 0 auto;
  }

  .workspace-route-status {
    flex: 0 0 22px;
    width: 22px;
    max-width: 22px;
    justify-content: center;
    overflow: hidden;
  }

  .workspace-route-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ── Global Iframe Pool ── */
.muxing-iframe-pool {
  position: fixed;
  overflow: hidden;
  transition: opacity 0.3s var(--ease-smooth);
  z-index: 10;
  /* Hidden by default — only shown on workspace page via JS */
  opacity: 0;
  pointer-events: none;
  left: -9999px;
  top: 0;
  width: 100vw;
  height: 100vh;
}
.muxing-iframe-pool .workspace-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

body.page-workspace.workspace-fit-viewport .muxing-iframe-pool .workspace-iframe {
  inset: auto;
  top: var(--workspace-fit-offset-y, 0px);
  left: var(--workspace-fit-offset-x, 0px);
  width: var(--workspace-fit-width, 100vw);
  height: var(--workspace-fit-height, 100vh);
  transform: scale(var(--workspace-fit-scale, 1));
  transform-origin: top left;
}

@media (max-width: 640px) {
  body.page-workspace.workspace-fit-viewport .muxing-iframe-pool .workspace-iframe {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
}

html[data-theme="stellar"] .muxing-iframe-pool .workspace-iframe {
  background: #0f1219;
}

/* ═══════════════════════════════════════════════════
   API Configuration Center
   ═══════════════════════════════════════════════════ */

/* ── Runtime Status ── */

#runtimeStatus {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-sm);
  background: rgba(24, 36, 58, 0.04);
  transition: background 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
}

#runtimeStatus::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
  transition: background 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

#runtimeStatus[data-state="ok"] {
  color: var(--green);
  background: rgba(46, 125, 105, 0.08);
}

#runtimeStatus[data-state="ok"]::before {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

#runtimeStatus[data-state="error"] {
  color: var(--rose);
  background: rgba(212, 99, 123, 0.08);
}

#runtimeStatus[data-state="error"]::before {
  background: var(--rose);
  box-shadow: 0 0 6px var(--rose);
}


/* ── Layout ── */

.api-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--space-24);
  min-height: 680px;
}

.api-sidebar-column {
  display: grid;
  grid-template-rows: minmax(360px, 1.08fr) minmax(260px, 0.92fr);
  gap: var(--space-24);
  min-height: 680px;
}

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

  .api-sidebar-column {
    grid-template-rows: auto auto;
    min-height: 0;
  }
}

@media (min-width: 1025px) {
  body.page-api .site-header,
  body.page-api .api-page-stack {
    width: auto;
    max-width: var(--shell-max);
    min-height: 0;
  }

  .api-page-stack {
    margin-top: var(--space-24);
    gap: var(--space-24);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
  }

  .api-page-stack > .page-hero,
  .api-page-stack > .api-global-bar {
    min-height: clamp(96px, 13svh, 122px);
  }

  .api-page-stack > .page-hero {
    grid-column: 1 / span 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    align-items: center;
    padding: var(--space-16) var(--space-24);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .api-page-stack > .api-global-bar {
    grid-column: 9 / span 4;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-16);
    padding: var(--space-16) var(--space-16);
    border-radius: var(--radius-lg);
  }

  .api-page-stack > .api-layout {
    grid-column: 1 / -1;
  }

  .api-page-stack .page-hero .eyebrow,
  .api-page-stack .page-hero h2,
  .api-page-stack .page-hero p:last-child,
  .api-page-stack .page-hero .page-hero-sub {
    grid-column: 1;
  }

  .api-page-stack .page-hero h2 {
    font-size: 2.35rem;
    line-height: 1;
    letter-spacing: 0;
  }

  .api-page-stack .page-hero p:last-child,
  .api-page-stack .page-hero .page-hero-sub {
    max-width: var(--measure-ui);
    margin-top: var(--space-8);
    font-size: 14px;
    line-height: 1.45;
  }

  .api-page-stack #runtimeStatus {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    width: fit-content;
    margin: 0 0 0 var(--space-16);
    padding: 5px var(--space-16);
    font-size: 12px;
    white-space: nowrap;
  }

  .api-page-stack .api-global-info,
  .api-page-stack .api-global-actions {
    width: 100%;
    min-width: 0;
  }

  .api-page-stack .api-global-actions {
    justify-content: flex-start;
  }

  .api-page-stack .api-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-24);
    min-height: 0;
    height: auto;
    align-items: stretch;
  }

  .api-page-stack .api-sidebar-column {
    grid-column: 1 / span 3;
    grid-template-rows: minmax(0, 0.95fr) minmax(0, 0.78fr);
    gap: var(--space-24);
    min-height: 0;
  }

  .api-page-stack .api-pool-panel,
  .api-page-stack .api-binding-panel {
    padding: var(--space-16);
    border-radius: var(--radius-lg);
  }

  .api-page-stack .api-detail-panel {
    grid-column: 4 / span 9;
    height: 100%;
    max-height: none;
    min-height: 0;
    border-radius: var(--radius-lg);
  }

  .api-page-stack .api-detail-scroll {
    flex: 0 1 34%;
    max-height: 34%;
  }

  .api-page-stack .api-chat-section {
    flex: 1 1 66%;
    min-height: clamp(320px, 40svh, 540px);
  }

  .api-page-stack .api-panel-head h3 {
    font-size: 18px;
  }

  .api-page-stack .api-node-card {
    padding: var(--space-16) 13px;
    border-radius: var(--radius-md);
  }

  .api-page-stack .api-detail-form {
    padding: var(--space-16) var(--space-16) var(--space-8);
  }

  .api-page-stack .api-form-header {
    margin-bottom: var(--space-8);
  }

  .api-page-stack .api-form-header h3 {
    font-size: 20px;
  }

  .api-page-stack .api-form-grid {
    gap: var(--space-8) var(--space-16);
  }

  .api-page-stack .api-field {
    gap: 5px;
  }

  .api-page-stack .api-field-label {
    font-size: 11px;
  }

  .api-page-stack .api-field input,
  .api-page-stack .api-field-select {
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-sm);
  }

  .api-page-stack .api-field .api-field-select {
    padding: var(--space-8) 30px var(--space-8) var(--space-16);
  }

  .api-page-stack .api-form-footer {
    margin-top: var(--space-16);
    gap: var(--space-8);
  }

  .api-page-stack .api-form-footer .api-btn-primary,
  .api-page-stack .api-form-footer .api-btn-secondary {
    padding: 9px var(--space-16);
  }

  .api-page-stack .api-model-section {
    padding: var(--space-16) var(--space-16);
  }

  .api-page-stack .api-model-head {
    margin-bottom: var(--space-16);
  }

  .api-page-stack .api-model-list {
    max-height: min(190px, 20svh);
    gap: var(--space-8);
  }

  .api-page-stack .api-model-item {
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-md);
  }

  .api-page-stack .api-chat-head {
    padding: var(--space-16) var(--space-24);
  }

  .api-page-stack .api-chat-messages {
    min-height: 0;
    max-height: none;
    padding: var(--space-16) var(--space-24);
  }

  .api-page-stack .api-chat-input-row {
    padding: var(--space-16) var(--space-24) var(--space-16);
  }
}

@media (min-width: 1241px) {
  .api-page-stack {
    height: calc(100vh - 24px * 2 - 96px - 24px);
  }
}

@media (min-width: 1600px) {
  .api-page-stack {
    gap: var(--space-24);
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .api-page-stack > .page-hero,
  .api-page-stack > .api-global-bar {
    min-height: 124px;
  }

  .api-page-stack .api-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .api-page-stack .page-hero h2 {
    font-size: 2.65rem;
  }
}

@media (min-width: 2560px) {
  .api-page-stack {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .api-page-stack > .page-hero,
  .api-page-stack > .api-global-bar {
    min-height: 140px;
  }

  .api-page-stack .api-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .api-page-stack .page-hero h2 {
    font-size: 3.35rem;
  }
}

@media (min-width: 1200px) {
  .api-page-stack .api-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) and (max-height: 820px) {
  .api-page-stack {
    margin-top: var(--space-24);
    gap: var(--space-24);
  }

  .api-page-stack > .page-hero,
  .api-page-stack > .api-global-bar {
    min-height: 104px;
    padding: var(--space-16) var(--space-16);
    border-radius: var(--radius-lg);
  }

  .api-page-stack .page-hero h2 {
    font-size: 2.3rem;
  }

  .api-page-stack .page-hero p:last-child,
  .api-page-stack .page-hero .page-hero-sub {
    margin-top: var(--space-8);
    line-height: 1.42;
  }

  .api-page-stack #runtimeStatus {
    margin: 0 0 0 var(--space-16);
    padding: 5px var(--space-16);
  }

  .api-page-stack .api-layout {
    gap: var(--space-24);
  }

  .api-page-stack .api-sidebar-column {
    gap: var(--space-24);
  }

  .api-page-stack .api-pool-panel,
  .api-page-stack .api-binding-panel {
    padding: var(--space-16);
    border-radius: var(--radius-lg);
  }

  .api-page-stack .api-detail-form {
    padding: var(--space-16) var(--space-16) var(--space-8);
  }

  .api-page-stack .api-model-section {
    padding: var(--space-16) var(--space-16);
  }

  .api-page-stack .api-chat-head {
    padding: var(--space-16) var(--space-24);
  }

  .api-page-stack .api-chat-messages {
    min-height: 0;
    max-height: none;
  }
}

/* ── Global Bar ── */

.api-global-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-16) var(--space-24);
  background: var(--api-shell-bar-bg);
  border: 1px solid var(--api-shell-bar-border);
  border-radius: var(--radius-md);
  box-shadow: var(--api-shell-bar-shadow);
  opacity: 0;
  animation: fadeUp 0.5s var(--ease-out-expo) 0.15s forwards;
  backdrop-filter: blur(12px);
  transition: filter 1s var(--ease-out-expo), opacity 1s var(--ease-out-expo);
}

.api-global-info {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.api-global-status {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.api-global-status strong {
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.api-global-model {
  display: block;
  max-width: var(--measure-compact);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

.api-global-actions {
  display: flex;
  gap: var(--space-8);
}

/* ── Status Dot ── */

.api-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.api-dot.idle {
  background: var(--muted);
  opacity: 0.4;
}

.api-dot.ok {
  background: var(--green);
  box-shadow: 0 0 4px color-mix(in oklch, var(--green), transparent 50%);
}

.api-dot.error {
  background: var(--rose);
  box-shadow: 0 0 4px color-mix(in oklch, var(--rose), transparent 50%);
}

/* ── Badges ── */

.api-badge-default {
  background: rgba(46, 125, 105, 0.12) !important;
  color: var(--green) !important;
  font-size: 11px !important;
  padding: var(--space-8) var(--space-8) !important;
}

.api-tag {
  display: inline-flex;
  padding: 3px var(--space-8);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  background: rgba(101, 94, 255, 0.1);
  color: var(--violet);
}

.api-latency {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
}

.api-model-count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

/* ── Pool Panel (left) ── */

.api-pool-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-24) var(--space-16);
  background: var(--api-sidebar-bg);
  color: var(--api-sidebar-fg);
  border: 1px solid var(--api-sidebar-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--api-sidebar-shadow);
  opacity: 0;
  animation: fadeUp 0.6s var(--ease-out-expo) 0.2s forwards;
  min-height: 0;
  overflow: hidden;
}

.api-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.api-panel-head h3 {
  margin: 0;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 19px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.api-panel-head h3 svg {
  color: color-mix(in oklch, var(--accent) 70%, var(--api-sidebar-fg));
}

.api-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--api-sidebar-muted);
}

/* ── Node List ── */

.api-node-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8) var(--space-8) var(--space-8) 0;
}

.api-node-list::-webkit-scrollbar {
  width: 4px;
}

.api-node-list::-webkit-scrollbar-thumb {
  background: var(--api-sidebar-scroll);
  border-radius: 2px;
}

.api-node-card {
  padding: var(--space-16) var(--space-16) 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--api-sidebar-card-border);
  background: var(--api-sidebar-card-bg);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition:
    background 0.2s var(--ease-smooth),
    border-color 0.2s var(--ease-smooth),
    transform 0.22s var(--ease-out-expo),
    box-shadow 0.22s var(--ease-smooth);
}

.api-node-card:hover {
  background: var(--api-sidebar-card-hover);
  border-color: var(--api-sidebar-card-hover-border);
  transform: translateY(-2px);
}

.api-node-card.selected {
  border-color: var(--api-sidebar-card-selected-border);
  background: var(--api-sidebar-card-selected-bg);
  box-shadow: var(--api-sidebar-card-selected-shadow);
}

.api-node-card.selected:hover {
  border-color: var(--api-sidebar-card-selected-border);
  background: var(--api-sidebar-card-selected-bg);
  transform: none;
}

/* Node status accent: use full-border tone instead of an edge marker. */
.api-node-card.selected.ok {
  border-color: color-mix(in oklch, var(--green) 34%, var(--api-sidebar-card-selected-border));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--green) 20%, transparent),
    var(--api-sidebar-card-selected-shadow);
}
.api-node-card.selected.error {
  border-color: color-mix(in oklch, var(--rose) 38%, var(--api-sidebar-card-selected-border));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--rose) 22%, transparent),
    var(--api-sidebar-card-selected-shadow);
}


html[data-theme="stellar"] .api-node-card {
  background: rgba(201, 164, 85, 0.04);
  border-color: rgba(201, 164, 85, 0.08);
}
html[data-theme="stellar"] .api-node-card:hover {
  background: rgba(201, 164, 85, 0.07);
  border-color: rgba(201, 164, 85, 0.14);
}
html[data-theme="stellar"] .api-node-card.selected {
  border-color: var(--amber);
  background: rgba(201, 164, 85, 0.08);
}

html[data-theme="nature"] .api-node-card {
  background: rgba(42, 51, 40, 0.03);
  border-color: rgba(42, 51, 40, 0.08);
}
html[data-theme="nature"] .api-node-card:hover {
  background: rgba(42, 51, 40, 0.06);
  border-color: rgba(42, 51, 40, 0.14);
}
html[data-theme="nature"] .api-node-card.selected {
  border-color: var(--blue);
  background: rgba(61, 134, 124, 0.06);
}

.api-node-main {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.api-node-info {
  min-width: 0;
}

.api-node-info strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.api-node-url {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--api-sidebar-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: var(--space-8);
}

.api-node-meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.api-node-empty {
  text-align: center;
  padding: var(--space-24);
  color: var(--api-sidebar-muted);
  font-size: 13px;
}

/* ── Detail Panel (right) ── */

.api-detail-panel {
  padding: 0;
  background: var(--api-workspace-bg);
  border: 1px solid var(--api-workspace-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--api-workspace-shadow);
  opacity: 0;
  animation: fadeUp 0.6s var(--ease-out-expo) 0.28s forwards;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100vh - 280px);
  transition: filter 1s var(--ease-out-expo), opacity 1s var(--ease-out-expo);
}

.api-binding-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--space-24) var(--space-16) var(--space-16);
  background: var(--api-binding-panel-bg);
  color: var(--api-sidebar-fg);
  border: 1px solid var(--api-binding-panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--api-binding-panel-shadow);
  opacity: 0;
  animation: fadeUp 0.6s var(--ease-out-expo) 0.24s forwards;
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.api-binding-panel-head {
  align-items: flex-start;
}

.api-binding-panel-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.api-binding-panel-body {
  min-height: 0;
  flex: 1;
  margin-top: var(--space-16);
  overflow-y: auto;
  padding-right: var(--space-8);
}

.api-binding-panel-body::-webkit-scrollbar {
  width: 4px;
}

.api-binding-panel-body::-webkit-scrollbar-thumb {
  background: var(--api-sidebar-scroll);
  border-radius: 2px;
}

/* ── Empty State ── */

.api-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-56) var(--space-48);
  text-align: center;
  background: radial-gradient(circle at 50% 38%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 58%);
}

.api-empty-icon {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: var(--radius-pill);
  color: color-mix(in oklch, var(--accent) 82%, var(--muted));
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--accent) 22%, transparent),
    0 12px 30px color-mix(in oklch, var(--accent) 14%, transparent);
}

.api-empty-state h3 {
  margin: 0;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.api-empty-state p {
  max-width: var(--measure-compact);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}

/* ── Detail Content ── */

.api-detail-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.api-detail-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.api-detail-scroll::-webkit-scrollbar {
  width: 4px;
}

.api-detail-scroll::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 2px;
}

/* ── Form ── */

.api-detail-form {
  padding: var(--space-32) var(--space-32) var(--space-24);
  border-bottom: 1px solid var(--api-surface-border);
}

.api-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-24);
}

.api-form-header h3 {
  margin: 0;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.api-form-actions {
  display: flex;
  gap: var(--space-8);
}

.api-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16) var(--space-16);
}

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

.api-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.api-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.api-field input,
.api-field-select {
  padding: var(--space-16) 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--api-input-border);
  background: var(--api-input-bg);
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-size: 13px;
  color: var(--ink);
  color-scheme: light;
  transition: border-color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background 0.2s var(--ease-smooth);
  outline: none;
}

/* URL and API Key fields keep monospace for readability */
.api-field input[type="url"],
.api-field input[type="password"],
#fieldApiKey {
  font-family: "DM Mono", monospace;
}

html[data-theme="stellar"] .api-field input,
html[data-theme="stellar"] .api-field-select {
  background: rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}

html[data-theme="nature"] .api-field input,
html[data-theme="nature"] .api-field-select {
  background: rgba(242, 247, 241, 0.6);
}

.api-field input:focus,
.api-field-select:focus {
  border-color: color-mix(in oklch, var(--blue) 72%, white);
  background: var(--api-input-focus-bg);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--blue) 10%, transparent);
}

.api-field input::placeholder {
  color: color-mix(in oklch, var(--muted), transparent 40%);
}

.api-key-wrapper {
  position: relative;
}

.api-key-wrapper input {
  width: 100%;
  padding-right: var(--space-40);
}

.api-key-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: var(--space-8);
  border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease-smooth);
}

.api-key-toggle:hover {
  color: var(--ink);
}

.api-form-footer {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-24);
  flex-wrap: wrap;
}

/* ── Buttons ── */

.api-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  border: none;
  cursor: pointer;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-align: center;
  transition:
    background 0.2s var(--ease-smooth),
    color 0.2s var(--ease-smooth),
    transform 0.2s var(--ease-out-expo),
    box-shadow 0.2s var(--ease-smooth);
}

.api-btn:active {
  transform: translateY(1px) scale(0.97);
}

/* Press settles surface elevation — :hover:active beats .api-btn-primary:hover. */
.api-btn-primary:active,
.api-btn-primary:hover:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 8px rgba(19, 29, 48, 0.16);
}

.api-btn-primary {
  padding: 11px var(--space-16);
  background: linear-gradient(180deg, #192746, #0f1830);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 10px 22px rgba(19, 29, 48, 0.18);
}

.api-btn-primary:hover {
  box-shadow: 0 14px 26px rgba(19, 29, 48, 0.24);
  transform: translateY(-2px);
}

.api-btn-secondary {
  padding: 11px var(--space-16);
  background: rgba(24, 36, 58, 0.05);
  color: var(--ink);
  font-size: 13px;
  border: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
}


.api-btn-secondary:hover {
  background: rgba(24, 36, 58, 0.12);
}


.api-btn-ghost {
  padding: var(--space-8) var(--space-16);
  background: var(--api-ghost-bg);
  color: var(--muted);
  font-size: 12px;
  border: 1px solid var(--api-surface-border);
}

.api-btn-ghost:hover {
  background: var(--api-ghost-hover-bg);
  color: var(--ink);
  border-color: color-mix(in oklch, var(--ink) 16%, transparent);
}

.api-btn-danger {
  padding: var(--space-8) var(--space-16);
  background: rgba(212, 99, 123, 0.08);
  color: var(--rose);
  font-size: 12px;
}

.api-btn-danger:hover {
  background: var(--rose);
  color: #fff;
}

.api-btn-sm {
  padding: var(--space-8) var(--space-8);
  min-height: 34px;
  font-size: 11px;
  border-radius: var(--radius-sm);
}

.api-btn-xs {
  padding: var(--space-8) var(--space-8);
  min-height: 32px;
  font-size: 11px;
  border-radius: var(--radius-sm);
}

.api-model-remove {
  min-inline-size: 32px;
}

.api-btn-add {
  width: 100%;
  justify-content: center;
  padding: var(--space-16);
  border-radius: var(--radius-md);
}

.api-btn-send {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.api-btn-send.streaming {
  background: var(--rose);
}

/* ── Spinner ── */

.api-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ws-spin 0.6s linear infinite;
}

.api-btn-secondary .api-spinner {
  border-color: var(--line);
  border-top-color: var(--ink);
}

/* ── Model Section ── */

.api-model-section {
  padding: var(--space-24) var(--space-32);
  border-bottom: 1px solid var(--api-surface-border);
}

.api-model-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-16);
  gap: var(--space-16);
}

.api-model-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
}

.api-model-actions {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.api-model-search {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-size: 12px;
  color: var(--ink);
  outline: none;
  width: 160px;
  transition: border-color 0.2s var(--ease-smooth);
}

html[data-theme="stellar"] .api-model-search {
  background: rgba(255, 255, 255, 0.06);
}

.api-model-search:focus {
  border-color: var(--blue);
}

.api-model-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-height: 300px;
  overflow-y: auto;
}

.api-model-list::-webkit-scrollbar {
  width: 3px;
}
.api-model-list::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 2px;
}

.api-model-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.api-model-group + .api-model-group {
  margin-top: var(--space-8);
}

.api-model-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-8);
}

.api-model-group-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.api-model-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(24, 36, 58, 0.04);
}

.api-model-group-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.api-model-group[data-model-type="image"] .api-model-group-title {
  color: var(--amber);
}

.api-model-group[data-model-type="text"] .api-model-group-title {
  color: var(--blue);
}

.api-model-group[data-model-type="audioVideo"] .api-model-group-title {
  color: var(--green);
}

.api-model-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: var(--space-16) var(--space-16);
  border-radius: var(--radius-md);
  border: 1px solid var(--api-surface-border);
  background: var(--api-list-item-bg);
  transition: background 0.15s var(--ease-smooth), transform 0.15s var(--ease-out-expo), border-color 0.15s var(--ease-smooth);
}


html[data-theme="stellar"] .api-model-item {
  background: rgba(201, 164, 85, 0.04);
}

.api-model-item:hover {
  background: var(--api-list-item-hover-bg);
  border-color: color-mix(in oklch, var(--blue) 18%, transparent);
  transform: translateX(3px);
}


html[data-theme="stellar"] .api-model-item:hover {
  background: rgba(201, 164, 85, 0.07);
}

.api-model-item.is-default {
  padding-left: var(--space-24);
  border-color: color-mix(in oklch, var(--green) 28%, var(--api-surface-border));
  background: var(--api-list-item-selected-bg);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--green) 12%, transparent);
}

.api-model-item.is-default::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--green) 12%, transparent);
  transform: translateY(-50%);
}


.api-model-name {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.api-model-name code {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

.api-model-actions {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  flex-shrink: 0;
}

.api-model-empty {
  padding: var(--space-16);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ── Binding Section ── */

.api-binding-section {
  padding: var(--space-24) var(--space-24);
  border-bottom: 1px solid var(--line);
}

.api-binding-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-16);
}

.api-binding-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

body.page-api .api-global-status strong,
body.page-api .api-panel-head h3,
body.page-api .api-empty-state h3,
body.page-api .api-form-header h3,
body.page-api .api-binding-head h4 {
  font-weight: var(--weight-title);
}

.api-hint {
  display: block;
  max-width: var(--measure-compact);
  font-size: 11px;
  color: var(--muted);
}

.api-binding-panel .api-hint {
  color: var(--api-sidebar-muted);
}

.api-binding-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.api-binding-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  border: 1px solid var(--api-binding-panel-border);
  background: var(--api-sidebar-card-bg);
  gap: var(--space-8);
  transition: background 0.15s var(--ease-smooth), transform 0.15s var(--ease-out-expo), border-color 0.15s var(--ease-smooth);
}

.api-binding-item:hover {
  background: var(--api-sidebar-card-hover);
  border-color: var(--api-sidebar-card-hover-border);
  transform: translateX(3px);
}



html[data-theme="stellar"] .api-binding-item {
  background: rgba(201, 164, 85, 0.04);
}

html[data-theme="stellar"] .api-binding-item:hover {
  background: rgba(201, 164, 85, 0.07);
}

.api-binding-tool {
  display: flex;
  align-items: center;
  flex: 0 1 88px;
  min-width: 0;
  gap: var(--space-8);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.api-binding-tool > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.api-binding-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 800;
}

.api-binding-icon.signal { background: color-mix(in oklch, var(--green) 14%, transparent); color: var(--green); }
.api-binding-icon.commerce { background: color-mix(in oklch, var(--blue) 14%, transparent); color: var(--blue); }
.api-binding-icon.preview { background: color-mix(in oklch, var(--amber) 14%, transparent); color: var(--amber); }
.api-binding-icon.formula { background: color-mix(in oklch, var(--violet) 14%, transparent); color: var(--violet); }
.api-binding-icon.image { background: color-mix(in oklch, var(--rose) 14%, transparent); color: var(--rose); }

.api-binding-control {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.api-binding-control .api-select {
  max-width: 100%;
  min-width: 0;
}

.api-binding-control .api-binding-select-pending {
  font-size: 11px;
  padding-block: var(--space-8);
  padding-inline: var(--space-8) var(--space-24);
}

.api-select {
  width: 100%;
  padding: 9px var(--space-16);
  border-radius: var(--radius-sm);
  border: 1px solid var(--api-input-border);
  background: var(--api-input-bg);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--ink);
  color-scheme: light;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371809a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: var(--space-32);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s var(--ease-smooth);
}

html[data-theme="stellar"] .api-select {
  background-color: rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}

.api-select:focus {
  border-color: var(--blue);
}

.api-select option,
.api-select optgroup,
.api-field-select option,
.api-field-select optgroup {
  background-color: var(--api-select-menu-bg);
  color: var(--api-select-menu-fg);
}

.api-select option:disabled,
.api-field-select option:disabled {
  color: var(--api-select-menu-muted);
}

@supports (appearance: base-select) and (selector(::picker(select))) {
  .api-select,
  .api-select::picker(select) {
    appearance: base-select;
  }

  .api-select {
    background-image: none;
    box-shadow: inset 0 1px 0 color-mix(in oklch, var(--api-select-menu-fg) 8%, transparent);
  }

  .api-select::picker-icon {
    color: var(--muted);
    transition: transform 180ms var(--ease-out-expo), color 180ms var(--ease-smooth);
  }

  .api-select:open {
    border-color: color-mix(in oklch, var(--blue) 62%, var(--api-input-border));
    box-shadow:
      0 0 0 3px color-mix(in oklch, var(--blue) 13%, transparent),
      inset 0 1px 0 color-mix(in oklch, var(--api-select-menu-fg) 10%, transparent);
  }

  .api-select:open::picker-icon {
    color: var(--api-select-menu-fg);
    transform: rotate(180deg);
  }

  .api-select::picker(select) {
    position: relative;
    min-width: anchor-size(width);
    max-width: min(520px, calc(100vw - 32px));
    max-height: min(420px, calc(100vh - 32px));
    margin-top: var(--space-8);
    padding: var(--space-8);
    border: 1px solid color-mix(in oklch, var(--api-select-menu-fg) 8%, transparent);
    border-radius: var(--radius-sm);
    background:
      linear-gradient(180deg, color-mix(in oklch, var(--api-select-menu-fg) 3%, transparent), transparent 30%),
      var(--api-select-menu-bg);
    color: var(--api-select-menu-fg);
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.28),
      0 1px 6px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 color-mix(in oklch, var(--api-select-menu-fg) 6%, transparent);
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
    transform-origin: top left;
    transition:
      opacity 130ms var(--ease-smooth),
      transform 160ms var(--ease-out-expo);
  }

  .api-select:open::picker(select) {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .api-select optgroup {
    margin: var(--space-8) 0 var(--space-8);
    padding: var(--space-8) var(--space-8) var(--space-8);
    border: 0;
    color: var(--api-select-menu-muted);
    font-family: "DM Sans", "Noto Sans SC", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .api-select option {
    position: relative;
    min-height: 38px;
    margin: var(--space-8) 0;
    padding: 9px var(--space-8) 9px 30px;
    border-radius: var(--radius-sm);
    color: var(--api-select-menu-fg);
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    transition:
      background-color 110ms var(--ease-smooth),
      color 110ms var(--ease-smooth),
      transform 110ms var(--ease-smooth);
  }

  .api-select option:hover,
  .api-select option:focus,
  .api-select option:checked {
    background:
      radial-gradient(circle at 16px 50%, color-mix(in oklch, var(--blue) 86%, var(--api-select-menu-fg)) 0 3px, transparent 3.5px),
      color-mix(in oklch, var(--blue) 18%, transparent);
    color: var(--api-select-menu-fg);
  }

  .api-select option:checked {
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--blue) 18%, transparent);
  }

  .api-select option::checkmark {
    display: none;
  }

  .api-select option:disabled {
    color: var(--api-select-menu-muted);
    opacity: 0.72;
  }
}

.api-field .api-field-select {
  padding: var(--space-16) 34px var(--space-16) 15px;
  border-radius: var(--radius-md);
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-size: 13px;
}

/* ── Chat Section ── */

.api-chat-section {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-top: 1px solid var(--api-surface-border);
  background: linear-gradient(180deg, color-mix(in oklch, var(--api-input-bg) 55%, transparent), color-mix(in oklch, var(--api-input-bg) 30%, transparent));
}

.api-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-16) var(--space-32);
  border-bottom: 1px solid var(--api-surface-border);
}

.api-chat-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.api-chat-controls {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.api-chat-controls .api-select {
  width: auto;
  min-width: 180px;
}

.api-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-16) var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-height: 120px;
  max-height: 240px;
}

.api-chat-messages::-webkit-scrollbar {
  width: 3px;
}
.api-chat-messages::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 2px;
}

.api-chat-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
}

.api-chat-welcome p {
  font-size: 13px;
  color: var(--muted);
  max-width: 280px;
  line-height: 1.6;
}

.api-chat-bubble {
  max-width: 85%;
  padding: var(--space-16) var(--space-16);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.6;
  animation: fadeUp 0.25s var(--ease-out-expo) forwards;
}

.api-chat-bubble.user {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--btn-grad1), var(--btn-grad2));
  color: #fff;
  border-bottom-right-radius: 6px;
}

.api-chat-bubble.assistant {
  align-self: flex-start;
  background: rgba(24, 36, 58, 0.08);
  border-bottom-left-radius: 6px;
}


html[data-theme="stellar"] .api-chat-bubble.assistant {
  background: rgba(201, 164, 85, 0.08);
}

html[data-theme="nature"] .api-chat-bubble.assistant {
  background: rgba(42, 51, 40, 0.06);
}

.api-chat-role {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
  opacity: 0.55;
}

.api-chat-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
}

.api-chat-text.is-loading {
  min-height: 20px;
  display: flex;
  align-items: center;
}

.api-chat-loader {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.api-chat-loader span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--blue) 62%, white 38%);
  animation: apiChatPulse 1s var(--ease-in-out) infinite;
}

.api-chat-loader span:nth-child(2) {
  animation-delay: 0.16s;
}

.api-chat-loader span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes apiChatPulse {
  0%,
  80%,
  100% {
    transform: translateY(0) scale(0.85);
    opacity: 0.42;
  }
  40% {
    transform: translateY(-3px) scale(1);
    opacity: 1;
  }
}

.api-chat-input-row {
  display: flex;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24) var(--space-16);
  align-items: flex-end;
  border-top: 1px solid var(--line);
}

.api-chat-input-row textarea {
  flex: 1;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-size: 13px;
  color: var(--ink);
  resize: none;
  outline: none;
  max-height: 120px;
  line-height: 1.5;
  transition: border-color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
}

.api-chat-input-row textarea::placeholder {
  color: color-mix(in oklch, var(--muted), transparent 40%);
}

html[data-theme="stellar"] .api-chat-input-row textarea {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="nature"] .api-chat-input-row textarea {
  background: rgba(242, 247, 241, 0.6);
}

.api-chat-input-row textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--blue) 10%, transparent);
}

/* ── Toast ── */

.api-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-out-expo);
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.api-toast.ok {
  background: var(--green);
  color: #fff;
}

.api-toast.error {
  background: var(--rose);
  color: #fff;
}

.api-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.api-toast-icon {
  font-size: 16px;
  font-weight: 800;
}

/* ── Set-default button inline ── */

.api-set-default {
  white-space: nowrap;
}

/* ── API-specific theme overrides: Stellar ── */

html[data-theme="stellar"] .api-pool-panel,
html[data-theme="stellar"] .api-detail-panel,
html[data-theme="stellar"] .api-global-bar,
html[data-theme="stellar"] .api-binding-panel {
  border-color: rgba(201, 164, 85, 0.12);
}

html[data-theme="stellar"] .api-btn-primary {
  background: linear-gradient(180deg, #2a3050, #181c34);
}

html[data-theme="stellar"] .api-btn-secondary {
  background: rgba(201, 164, 85, 0.06);
}

html[data-theme="stellar"] .api-btn-secondary:hover {
  background: rgba(201, 164, 85, 0.12);
}

html[data-theme="stellar"] .api-model-search {
  background: rgba(201, 164, 85, 0.04);
}

html[data-theme="stellar"] .api-select {
  background-color: rgba(201, 164, 85, 0.04);
}

html[data-theme="stellar"] .api-field input {
  background: rgba(201, 164, 85, 0.04);
}

html[data-theme="stellar"] .api-chat-input-row textarea {
  background: rgba(201, 164, 85, 0.04);
}

/* ── API-specific theme overrides: Nature ── */

html[data-theme="nature"] .api-pool-panel,
html[data-theme="nature"] .api-detail-panel,
html[data-theme="nature"] .api-global-bar,
html[data-theme="nature"] .api-binding-panel {
  border-color: rgba(42, 51, 40, 0.1);
}

html[data-theme="nature"] .api-btn-secondary {
  background: rgba(42, 51, 40, 0.05);
}

html[data-theme="nature"] .api-btn-secondary:hover {
  background: rgba(42, 51, 40, 0.1);
}

html[data-theme="nature"] .api-model-search {
  background: rgba(242, 247, 241, 0.6);
}

html[data-theme="nature"] .api-select {
  background-color: rgba(242, 247, 241, 0.6);
}

@media (max-width: 768px) {
  .api-layout,
  .api-sidebar-column {
    min-height: 0;
    gap: var(--space-24);
  }

  .api-layout {
    display: flex;
    flex-direction: column;
  }

  .api-detail-panel {
    order: 1;
  }

  .api-sidebar-column {
    order: 2;
  }

  .api-global-bar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-16);
    border-radius: var(--radius-md);
  }

  .api-global-info,
  .api-global-actions {
    min-width: 0;
    width: 100%;
  }

  .api-global-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .api-global-actions .api-btn {
    justify-content: center;
  }

  .api-pool-panel,
  .api-binding-panel {
    padding: var(--space-16) var(--space-16) var(--space-16);
    border-radius: var(--radius-lg);
  }

  .api-detail-panel {
    max-height: none;
    border-radius: var(--radius-lg);
  }

  .api-detail-content {
    min-height: 0;
  }

  .api-chat-section {
    order: -1;
    flex: 1 1 auto;
    min-height: min(68svh, 520px);
    border-top: 0;
    border-bottom: 1px solid var(--api-surface-border);
  }

  .api-detail-scroll {
    flex: 0 0 auto;
    max-height: none;
  }

  .api-detail-form,
  .api-model-section,
  .api-binding-section {
    padding: var(--space-24) var(--space-16);
  }

  .api-form-header,
  .api-model-head,
  .api-binding-head,
  .api-chat-head {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-16);
  }

  .api-form-actions,
  .api-model-actions,
  .api-chat-controls {
    width: 100%;
  }

  .api-form-actions,
  .api-model-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .api-form-actions .api-btn,
  .api-model-actions .api-btn {
    justify-content: center;
  }

  .api-btn {
    min-height: 44px;
    justify-content: center;
  }

  .api-btn-sm,
  .api-btn-xs {
    min-height: 44px;
    padding-block: var(--space-8);
  }

  .api-model-remove {
    min-inline-size: 44px;
    min-height: 44px;
  }

  .api-model-search {
    width: 100%;
    min-height: 44px;
  }

  .api-model-item,
  .api-binding-item {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-8);
  }

  .api-model-name,
  .api-binding-tool,
  .api-binding-control {
    min-width: 0;
    flex: 1 1 auto;
  }

  .api-binding-control .api-select {
    max-width: none;
  }

  .api-select,
  .api-field input,
  .api-field-select {
    min-height: 44px;
  }

  .api-key-wrapper input {
    padding-right: 52px;
  }

  .api-key-toggle {
    right: 0;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .api-chat-head {
    padding: var(--space-16) var(--space-16);
  }

  .api-chat-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: var(--space-8);
  }

  .api-chat-controls .api-select {
    width: 100%;
    min-width: 0;
  }

  .api-chat-messages {
    flex: 1 1 auto;
    padding: var(--space-16) var(--space-16);
    min-height: 260px;
    max-height: none;
  }

  .api-chat-bubble {
    max-width: 94%;
  }

  .api-chat-input-row {
    padding: var(--space-16) var(--space-16) var(--space-16);
  }

  .api-chat-input-row textarea {
    min-height: 44px;
  }

  .api-btn-send {
    width: 44px;
    height: 44px;
  }

  .api-toast {
    left: 16px;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(20px);
    justify-content: center;
    text-align: center;
  }

  .api-toast.show {
    transform: translateY(0);
  }
}

@media (max-width: 430px) {
  .api-global-actions,
  .api-form-actions,
  .api-model-actions {
    grid-template-columns: 1fr;
  }

  .api-chat-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .api-panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-8);
  }
}

/* Global scrollbar treatment: keep scrolling available, remove visible rails. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

html,
body,
.sidebar-tools,
.api-node-list,
.api-binding-panel-body,
.api-detail-scroll,
.api-model-list,
.api-chat-messages {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  * {
    scroll-behavior: auto !important;
  }
}

/* === LETTERS PAGE === */
/* Scope: body.page-letters only. Distilled monograph aesthetic, lifted from the
   redesign exploration. Time-of-day tint is the only alive element. */

:root {
  --letters-time-tint: oklch(0.96 0.014 75);
  --letters-accent: oklch(0.74 0.13 75);
  --letters-rule: color-mix(in oklch, var(--ink) 14%, transparent);
  --letters-rule-soft: color-mix(in oklch, var(--ink) 7%, transparent);
  --letters-muted: color-mix(in oklch, var(--ink) 52%, transparent);
}
html[data-theme="nature"] {
  --letters-accent: oklch(0.72 0.11 90);
}

body.page-letters::before,
body.page-letters::after {
  display: none !important;
  animation: none !important;
}
body.page-letters .ambient,
body.page-letters .grid-noise,
body.page-letters .muxing-flow-canvas,
body.page-letters .muxing-flow-grain {
  display: none !important;
}

body.page-letters {
  background: var(--bg);
  transition: background-color 4.5s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-letters .letters-time-tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: block;
  background: var(--time-tint, var(--letters-time-tint));
  opacity: 0.12;
  mix-blend-mode: multiply;
  transition: background 4.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 4.5s var(--ease-smooth);
}
@media (prefers-reduced-motion: reduce) {
  body.page-letters,
  body.page-letters .letters-time-tint {
    transition: none !important;
  }
}

body.page-letters .page-stack.letters-monograph {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--space-32) var(--space-96);
  gap: 0;
  display: block;
  position: relative;
  z-index: 1;
}

body.page-letters .letters-hero {
  padding: var(--space-96) 0 88px;
  border-bottom: 1px solid var(--letters-rule);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-letters .letters-hero-title {
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-weight: 300;
  font-size: clamp(72px, 12vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 var(--space-16);
  background: none;
  -webkit-text-fill-color: currentColor;
}
body.page-letters .letters-hero-sub {
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--letters-muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
}
body.page-letters .letters-hero-sub-en {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-left: 0;
  color: var(--letters-muted);
  display: inline-flex;
  align-items: center;
}

body.page-letters .letters-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  background: transparent;
  border: none;
  box-shadow: none;
}
body.page-letters .letters-row {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--letters-rule-soft);
  list-style: none;
}
body.page-letters .letters-row:first-child {
  border-top: 1px solid var(--letters-rule-soft);
}
body.page-letters .letters-row-link {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: baseline;
  column-gap: var(--space-40);
  padding: var(--space-48) 0 var(--space-48);
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: none;
  box-shadow: none;
  transition: padding 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-letters a.letters-row-link:hover,
body.page-letters a.letters-row-link:focus-visible {
  outline: none;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
body.page-letters .letters-row-num {
  font-family: "DM Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  color: var(--letters-muted);
  letter-spacing: 0.04em;
  align-self: start;
  padding-top: var(--space-16);
}
body.page-letters .letters-row-body {
  display: block;
  min-width: 0;
}
body.page-letters .letters-row-date {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--letters-muted);
  margin-bottom: var(--space-16);
}
body.page-letters .letters-row-name {
  display: inline-block;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-weight: 350;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-16);
  position: relative;
  width: max-content;
  max-width: 100%;
  padding-bottom: var(--space-8);
}
body.page-letters .letters-row-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--letters-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-letters a.letters-row-link:hover .letters-row-name::after,
body.page-letters a.letters-row-link:focus-visible .letters-row-name::after {
  transform: scaleX(1);
}
body.page-letters .letters-row-desc {
  display: block;
  margin: 0 0 var(--space-16);
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--letters-muted);
  max-width: 62ch;
  overflow-wrap: anywhere;
}
body.page-letters .letters-row-cite {
  display: block;
  margin: 0;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--letters-muted);
  opacity: 0.78;
  overflow-wrap: anywhere;
}

/* Action column on each row: bilingual READ / 翻开 + arrow. */
body.page-letters .letters-row-action {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  align-self: start;
  padding-top: var(--space-16);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
  transition: color 0.4s var(--ease-smooth);
}
body.page-letters .letters-row-action .bilingual {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
body.page-letters .letters-row-action .bilingual-en {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--letters-muted);
}
body.page-letters .letters-row-action .bilingual-zh {
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-top: var(--space-8);
  transition: color 0.4s var(--ease-smooth);
}
body.page-letters .letters-row-arrow {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  color: var(--ink);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s var(--ease-smooth);
  display: inline-block;
}
body.page-letters a.letters-row-link:hover .letters-row-arrow,
body.page-letters a.letters-row-link:focus-visible .letters-row-arrow {
  transform: translateX(8px);
  color: var(--letters-accent);
}
body.page-letters a.letters-row-link:hover .letters-row-action .bilingual-zh,
body.page-letters a.letters-row-link:focus-visible .letters-row-action .bilingual-zh {
  color: var(--letters-accent);
}

/* Loading / empty / error placeholder rows: no hover, muted. */
body.page-letters .letters-row--loading .letters-row-name,
body.page-letters .letters-row--empty .letters-row-name,
body.page-letters .letters-row--error .letters-row-name {
  color: var(--letters-muted);
}
body.page-letters .letters-row--loading .letters-row-link,
body.page-letters .letters-row--empty .letters-row-link,
body.page-letters .letters-row--error .letters-row-link {
  cursor: default;
}

/* + NEW LETTER button at the bottom of the index. */
body.page-letters .letters-compose {
  margin: var(--space-80) 0 0;
  display: flex;
  justify-content: flex-start;
}
body.page-letters .letters-compose-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--letters-rule);
  border-radius: 0;
  padding: var(--space-24) var(--space-32);
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  cursor: pointer;
  color: var(--ink);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.4s var(--ease-smooth), color 0.4s var(--ease-smooth), padding 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-letters .letters-compose-btn:hover,
body.page-letters .letters-compose-btn:focus-visible {
  outline: none;
  border-color: var(--letters-accent);
  color: var(--letters-accent);
  padding-left: var(--space-40);
  padding-right: var(--space-40);
}
body.page-letters .letters-compose-plus {
  font-family: "Fraunces", serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 1;
  color: var(--letters-accent);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-letters .letters-compose-btn:hover .letters-compose-plus {
  transform: rotate(90deg);
}
body.page-letters .letters-compose-btn .bilingual {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
body.page-letters .letters-compose-btn .bilingual-en {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--letters-muted);
}
body.page-letters .letters-compose-btn .bilingual-zh {
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-top: var(--space-8);
}
body.page-letters .letters-compose-btn:hover .bilingual-zh {
  color: var(--letters-accent);
}

/* Compose modal */
body.page-letters .letters-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-24);
}
body.page-letters .letters-modal[hidden] {
  display: none;
}
body.page-letters .letters-modal-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--ink) 38%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: lettersScrimIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes lettersScrimIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.page-letters .letters-modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(86vh, 880px);
  background: var(--bg);
  border: 1px solid var(--letters-rule);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: lettersPanelIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes lettersPanelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-letters .letters-modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-32) var(--space-32) var(--space-16);
  border-bottom: 1px solid var(--letters-rule-soft);
}
body.page-letters .letters-modal-title {
  margin: 0;
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-weight: 350;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.page-letters .letters-modal-close {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--letters-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-8) var(--space-8);
  min-inline-size: 44px;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s var(--ease-smooth);
}
body.page-letters .letters-modal-close:hover {
  color: var(--ink);
}
body.page-letters .letters-modal-body {
  padding: var(--space-24) var(--space-32) var(--space-16);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
body.page-letters .letters-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
body.page-letters .letters-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}
body.page-letters .letters-field-label {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--letters-muted);
}
body.page-letters .letters-field-input,
body.page-letters .letters-field-textarea {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--letters-rule);
  border-radius: 0;
  padding: var(--space-8) 0;
  color: var(--ink);
  font-family: "Fraunces", "Noto Serif SC", "Songti SC", serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  transition: border-color 0.3s var(--ease-smooth);
}
body.page-letters .letters-field-input:focus,
body.page-letters .letters-field-textarea:focus {
  outline: none;
  border-bottom-color: var(--letters-accent);
}
body.page-letters .letters-field-textarea {
  font-family: "DM Mono", "Fraunces", "Noto Sans SC", monospace;
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
  min-height: 220px;
  border: 1px solid var(--letters-rule);
  padding: var(--space-16) var(--space-16);
}
body.page-letters .letters-field-textarea:focus {
  border-color: var(--letters-accent);
}
body.page-letters .letters-modal-hint {
  margin: 0;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--letters-muted);
  transition: color 0.3s var(--ease-smooth);
}
body.page-letters .letters-modal-hint[data-state="ok"] { color: var(--letters-accent); }
body.page-letters .letters-modal-hint[data-state="warn"] {
  color: color-mix(in oklch, var(--rose) 70%, var(--ink));
}
body.page-letters .letters-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-32) var(--space-24);
  border-top: 1px solid var(--letters-rule-soft);
}
body.page-letters .letters-modal-cancel,
body.page-letters .letters-modal-confirm {
  appearance: none;
  background: transparent;
  border: 1px solid var(--letters-rule);
  border-radius: 0;
  padding: var(--space-16) var(--space-24);
  cursor: pointer;
  color: var(--ink);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
}
body.page-letters .letters-modal-cancel:hover {
  border-color: color-mix(in oklch, var(--ink) 26%, transparent);
}
body.page-letters .letters-modal-confirm {
  border-color: var(--ink);
  display: inline-flex;
  align-items: center;
}
body.page-letters .letters-modal-confirm:hover,
body.page-letters .letters-modal-confirm:focus-visible {
  outline: none;
  border-color: var(--letters-accent);
  color: var(--letters-accent);
}
body.page-letters .letters-modal-confirm .bilingual-en {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: inherit;
}
body.page-letters .letters-modal-confirm .bilingual-zh {
  display: none;
}
body.letters-modal-open {
  overflow: hidden;
}

/* ─── Reading page ─────────────────────────────────────────────── */
/* Letters reading system: editorial, ADHD-friendly long-form reader. */
body.page-letters.page-letters-read .page-stack.letters-monograph--read{max-width:1160px}
body.page-letters.page-letters-read .site-header.compact{animation:none;opacity:1;transform:translate3d(0,0,0);transition:transform .28s var(--ease-smooth),opacity .22s var(--ease-smooth),filter .28s var(--ease-smooth),background .28s var(--ease-out-expo),border-color .28s var(--ease-out-expo),border-radius .28s var(--ease-out-expo),box-shadow .28s var(--ease-out-expo),backdrop-filter .28s var(--ease-out-expo)}
body.page-letters.page-letters-read.is-read-header-hidden .site-header.compact{transform:translate3d(0,calc(-100% - var(--shell-pad-top,var(--space-24)) - 8px),0);opacity:0;filter:blur(4px);pointer-events:none}
body.page-letters.page-letters-read .letters-article{display:grid;grid-template-columns:minmax(0,48ch) minmax(132px,190px);column-gap:clamp(40px,6vw,80px);align-items:start}
body.page-letters.page-letters-read .letters-article-head,body.page-letters.page-letters-read .letters-article-body,body.page-letters.page-letters-read .letters-article-foot{grid-column:1}
body.page-letters.page-letters-read .letters-article-head{margin-bottom:var(--space-40);padding-bottom:var(--space-32);border-bottom-color:color-mix(in oklch,var(--ink) 18%,transparent)}
body.page-letters.page-letters-read .letters-article-title{max-width:12ch;font-size:clamp(42px,4rem,64px);line-height:1.02;letter-spacing:0}
body.page-letters.page-letters-read .letters-article-dek{max-width:46ch;font-family:"DM Sans","Noto Sans SC",sans-serif;font-style:normal;font-size:16px;line-height:1.7}
body.page-letters .letters-prose{--measure-prose:40ch;max-width:var(--measure-prose);font-family:"DM Sans","Noto Sans SC","Microsoft YaHei",sans-serif;font-size:17px;line-height:1.9;letter-spacing:0;text-wrap:pretty}
body.page-letters.page-letters-read .letters-prose>*+*{margin-top:0}
body.page-letters.page-letters-read .letters-read-chunk{position:relative;padding:var(--space-24) 0 var(--space-32) var(--space-40);border-top:1px solid var(--letters-rule-soft);scroll-margin-top:120px}
body.page-letters.page-letters-read .letters-read-chunk:first-child{border-top-color:transparent;padding-top:0}
body.page-letters.page-letters-read .letters-read-chunk::before{content:attr(data-index);position:absolute;top:var(--space-32);left:0;color:var(--letters-muted);font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
body.page-letters.page-letters-read .letters-read-chunk:first-child::before{top:.35em}
body.page-letters.page-letters-read .letters-prose p,body.page-letters.page-letters-read .letters-prose li{margin:0;color:color-mix(in oklch,var(--ink) 96%,var(--letters-muted) 4%)}
body.page-letters.page-letters-read .letters-prose p+p,body.page-letters.page-letters-read .letters-prose ul+p,body.page-letters.page-letters-read .letters-prose ol+p,body.page-letters.page-letters-read .letters-prose blockquote+p{margin-top:1.15em}
body.page-letters.page-letters-read .letters-focus-block{position:relative;transition:background-color .2s var(--ease-smooth)}
body.page-letters.page-letters-read .letters-focus-block::before{content:"";position:absolute;top:.42em;bottom:.42em;left:-18px;width:1px;background:var(--letters-accent);opacity:0;transform:scaleY(.82);transform-origin:center;transition:opacity .2s var(--ease-smooth),transform .2s var(--ease-smooth)}
body.page-letters.page-letters-read .letters-focus-block.is-active::before{opacity:.78;transform:scaleY(1)}
body.page-letters.page-letters-read .letters-prose li.letters-focus-block::before{display:none}
body.page-letters.page-letters-read .letters-sentence{display:block}
body.page-letters.page-letters-read .letters-sentence+.letters-sentence{margin-top:.3em}
body.page-letters.page-letters-read .letters-sentence-lead{color:color-mix(in oklch,var(--ink) 84%,var(--letters-accent) 16%);font-weight:650}
body.page-letters.page-letters-read .letters-sentence-lead+.letters-sentence{margin-top:.42em}
body.page-letters.page-letters-read .letters-prose h2,body.page-letters.page-letters-read .letters-prose h3,body.page-letters.page-letters-read .letters-prose h4,body.page-letters.page-letters-read .letters-prose h5{margin-top:0;letter-spacing:0}
body.page-letters.page-letters-read .letters-prose h2,body.page-letters.page-letters-read .letters-prose h3{padding-bottom:var(--space-16);border-bottom:1px solid var(--letters-rule-soft)}
body.page-letters.page-letters-read .letters-prose h2{font-size:1.45em}body.page-letters.page-letters-read .letters-prose h3{font-size:1.22em}
body.page-letters.page-letters-read .letters-prose ul,body.page-letters.page-letters-read .letters-prose ol{margin:1.15em 0 0;padding-left:1.15em}
body.page-letters.page-letters-read .letters-prose li+li{margin-top:1em}
body.page-letters.page-letters-read .letters-prose li::marker{color:var(--letters-accent);font-family:"DM Mono",monospace;font-size:.78em}
body.page-letters.page-letters-read .letters-prose blockquote{margin:1.2em 0 0;padding:var(--space-24) 0 var(--space-24) var(--space-24);border:none;border-left:1px solid var(--letters-accent);color:color-mix(in oklch,var(--ink) 72%,var(--letters-muted) 28%)}
body.page-letters.page-letters-read .letters-prose a{color:color-mix(in oklch,var(--ink) 88%,var(--letters-accent) 12%);border-bottom-color:color-mix(in oklch,var(--letters-accent) 72%,transparent);background:linear-gradient(to top,color-mix(in oklch,var(--letters-accent) 14%,transparent) 0 38%,transparent 38% 100%)}
body.page-letters.page-letters-read .letters-prose code{padding:.12em .4em;border-radius:4px}body.page-letters.page-letters-read .letters-prose del{color:var(--letters-muted)}
body.page-letters.page-letters-read .letters-footnote-ref{--letters-footnote-popover-bg:color-mix(in oklch,var(--bg) 91%,var(--panel-strong) 9%);position:relative;z-index:3;display:inline-block;margin-left:.18em;color:var(--letters-accent);cursor:pointer;font-family:"DM Mono",monospace;font-size:.64em;font-weight:500;line-height:1;vertical-align:super;font-variant-numeric:tabular-nums;outline:none}
body.page-letters.page-letters-read .letters-footnote-ref::before{content:attr(data-note);position:absolute;left:calc(100% + 12px);top:0;width:max-content;max-width:min(320px,72vw);max-height:min(52svh,360px);overflow:auto;padding:10px 12px;border-radius:8px;background:var(--letters-footnote-popover-bg);color:var(--ink);box-shadow:0 18px 42px color-mix(in oklch,var(--ink) 18%,transparent),inset 0 1px 0 color-mix(in oklch,#fff 62%,transparent);opacity:0;pointer-events:none;transform:translate(4px,-6px);transition:opacity .16s var(--ease-smooth),transform .16s var(--ease-smooth);font-family:"DM Sans","Noto Sans SC","Microsoft YaHei",sans-serif;font-size:12px;font-weight:500;line-height:1.55;text-align:left;white-space:normal}
body.page-letters.page-letters-read .letters-footnote-ref::after{content:"";position:absolute;left:calc(100% + 8px);top:.35em;width:8px;height:8px;background:var(--letters-footnote-popover-bg);opacity:0;pointer-events:none;transform:translate(4px,0) rotate(45deg);transition:opacity .16s var(--ease-smooth),transform .16s var(--ease-smooth)}
body.page-letters.page-letters-read .letters-footnote-ref:hover::before,body.page-letters.page-letters-read .letters-footnote-ref:focus-visible::before,body.page-letters.page-letters-read .letters-footnote-ref.is-open::before{opacity:1;pointer-events:auto;transform:translate(0,-6px)}
body.page-letters.page-letters-read .letters-footnote-ref:hover::after,body.page-letters.page-letters-read .letters-footnote-ref:focus-visible::after,body.page-letters.page-letters-read .letters-footnote-ref.is-open::after{opacity:1;transform:translate(0,0) rotate(45deg)}
body.page-letters.page-letters-read .letters-reading-rail{grid-column:2;grid-row:1/span 3;position:sticky;top:112px;align-self:start;min-height:320px;padding-left:var(--space-24);font-family:"DM Mono",monospace}
body.page-letters.page-letters-read .letters-reading-rail[hidden]{display:none}
body.page-letters.page-letters-read .letters-reading-progress-track{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--letters-rule-soft)}
body.page-letters.page-letters-read .letters-reading-progress-fill{display:block;width:100%;height:100%;background:var(--letters-accent);transform:scaleY(0);transform-origin:top}
body.page-letters.page-letters-read .letters-reading-toc{display:grid;gap:4px;max-height:calc(100svh - 160px);overflow:auto}
body.page-letters.page-letters-read .letters-rail-group{display:grid}.letters-rail-subnav{display:grid;gap:2px;max-height:0;overflow:hidden;opacity:0;transform:translateY(-3px);transition:max-height .28s var(--ease-smooth),opacity .2s var(--ease-smooth),transform .28s var(--ease-smooth)}
body.page-letters.page-letters-read .letters-rail-group.is-expanded .letters-rail-subnav{max-height:min(46svh,420px);margin:2px 0 var(--space-8);overflow:auto;opacity:1;transform:translateY(0)}
body.page-letters.page-letters-read .letters-reading-toc a{display:grid;grid-template-columns:3ch minmax(0,1fr);gap:10px;align-items:baseline;min-height:40px;padding-left:calc(var(--rail-depth,0)*15px);color:var(--letters-muted);text-decoration:none;opacity:.68;transition:color .25s var(--ease-smooth),opacity .25s var(--ease-smooth),transform .25s var(--ease-smooth)}
body.page-letters.page-letters-read .letters-reading-toc a.letters-rail-block-link{min-height:32px;padding-left:calc(var(--rail-depth,0)*15px + 18px);opacity:.52}
body.page-letters.page-letters-read .letters-reading-toc a.is-depth-1,body.page-letters.page-letters-read .letters-reading-toc a.is-depth-2{min-height:34px;opacity:.54}
body.page-letters.page-letters-read .letters-reading-toc a:hover,body.page-letters.page-letters-read .letters-reading-toc a:focus-visible,body.page-letters.page-letters-read .letters-reading-toc a.is-active{outline:none;color:var(--ink);opacity:1;transform:translateX(2px)}
body.page-letters.page-letters-read .letters-reading-toc span{color:var(--letters-accent);font-size:11px;letter-spacing:.08em;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
body.page-letters.page-letters-read .letters-reading-toc a.letters-rail-block-link span{color:var(--letters-muted);font-size:11px;opacity:.82}
body.page-letters.page-letters-read .letters-reading-toc b{font-family:"DM Sans","Noto Sans SC",sans-serif;font-size:12px;font-weight:600;line-height:1.35;letter-spacing:0;text-wrap:pretty;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body.page-letters.page-letters-read .letters-reading-toc a.letters-rail-block-link b{font-size:11px;font-weight:500}
body.page-letters.page-letters-read .letters-top-button{position:fixed;right:max(22px,calc(6vw + 80px),calc((100vw - 1160px)/2 + 22px));bottom:max(22px,env(safe-area-inset-bottom,0px));z-index:42;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid color-mix(in oklch,var(--ink) 12%,transparent);border-radius:50%;background:color-mix(in oklch,var(--bg) 88%,var(--panel-strong) 12%);color:color-mix(in oklch,var(--ink) 88%,var(--letters-accent) 12%);box-shadow:0 14px 34px color-mix(in oklch,var(--ink) 13%,transparent),inset 0 1px 0 color-mix(in oklch,#fff 62%,transparent);opacity:0;pointer-events:none;cursor:pointer;transform:translate3d(0,10px,0) scale(.96);transition:opacity .18s var(--ease-smooth),transform .18s var(--ease-smooth),background .18s var(--ease-smooth),border-color .18s var(--ease-smooth);font-family:"DM Sans",sans-serif;font-size:20px;line-height:1}
body.page-letters.page-letters-read .letters-top-button[hidden]{display:none}body.page-letters.page-letters-read .letters-top-button.is-visible{opacity:.86;pointer-events:auto;transform:translate3d(0,0,0) scale(1)}
body.page-letters.page-letters-read .letters-top-button:hover,body.page-letters.page-letters-read .letters-top-button:focus-visible{outline:none;opacity:1;border-color:color-mix(in oklch,var(--letters-accent) 42%,transparent);background:color-mix(in oklch,var(--bg) 92%,var(--letters-accent) 8%);transform:translate3d(0,-1px,0) scale(1)}
body.page-letters.page-letters-read .letters-top-button:active{transform:translate3d(0,0,0) scale(.96)}
body.page-letters.page-letters-read .muxing-entry-spotlight-overlay,body.page-letters.page-letters-read .muxing-entry-spotlight-mark{display:none}
@media (prefers-reduced-motion:reduce){body.page-letters.page-letters-read .site-header.compact,body.page-letters.page-letters-read .letters-top-button{transition:none}}
@media (max-width:980px){body.page-letters.page-letters-read .page-stack.letters-monograph--read{max-width:720px}body.page-letters.page-letters-read .letters-article{display:block}body.page-letters.page-letters-read .letters-reading-rail{display:none}body.page-letters.page-letters-read .letters-footnote-ref::before{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));top:auto;bottom:max(16px,env(safe-area-inset-bottom,0px));width:auto;max-width:none;z-index:90;transform:translateY(8px)}body.page-letters.page-letters-read .letters-footnote-ref:hover::before,body.page-letters.page-letters-read .letters-footnote-ref:focus-visible::before,body.page-letters.page-letters-read .letters-footnote-ref.is-open::before{transform:translateY(0)}body.page-letters.page-letters-read .letters-footnote-ref::after{display:none}}
@media (max-width:720px){body.page-letters.page-letters-read .mobile-desktop-note,body.page-letters.page-letters-read .mobile-tabbar,body.page-letters.page-letters-read .muxing-performance-route-preview,body.page-letters.page-letters-read .muxing-sound-toggle{display:none}body.page-letters.page-letters-read.has-mobile-tabbar{overflow:auto}body.page-letters.page-letters-read.has-mobile-tabbar .site-shell{height:auto;min-height:100svh;overflow:visible}body.page-letters.page-letters-read .letters-article-title{max-width:100%;font-size:clamp(42px,10.4vw,46px);line-height:1.08}body.page-letters.page-letters-read .letters-top-button{right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px))}body.page-letters.page-letters-read .letters-prose{--measure-prose:100%;font-size:17px;line-height:1.88}body.page-letters.page-letters-read .letters-read-chunk{padding-left:var(--space-40)}body.page-letters.page-letters-read .letters-read-chunk::before{font-size:11px}}
body.page-letters .letters-footer-minimal {
  margin: var(--space-96) auto 0;
  padding: var(--space-32) 0 var(--space-8);
  border-top: 1px solid var(--letters-rule-soft);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-16);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--letters-muted);
  max-width: 980px;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  z-index: 1;
}
body.page-letters .letters-footer-minimal .footer-sep {
  color: var(--letters-rule);
}

@media (max-width: 720px) {
  body.page-letters .page-stack.letters-monograph {
    padding: 0 var(--space-24) var(--space-72);
  }
  body.page-letters .letters-hero {
    padding: var(--space-64) 0 var(--space-56);
  }
  body.page-letters .letters-row-link {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-16);
    row-gap: var(--space-16);
    padding: var(--space-40) 0 var(--space-32);
  }
  body.page-letters .letters-row-num {
    padding-top: var(--space-8);
  }
  body.page-letters .letters-row-action {
    grid-column: 2 / -1;
    padding-top: var(--space-8);
    align-self: start;
  }
  body.page-letters a.letters-row-link:hover {
    padding-left: var(--space-8);
  }
  body.page-letters .letters-modal {
    padding: var(--space-16);
  }
  body.page-letters .letters-modal-head,
  body.page-letters .letters-modal-body,
  body.page-letters .letters-modal-foot {
    padding-left: var(--space-24);
    padding-right: var(--space-24);
  }
  body.page-letters .letters-field-row {
    grid-template-columns: 1fr;
  }
  body.page-letters .letters-backlink {
    margin-top: var(--space-32);
    min-height: 44px;
  }
}

body.page-lab a.letters-row-link:hover,
body.page-lab a.letters-row-link:focus-visible {
  padding-left: 0;
  padding-right: 0;
}
body.page-lab .letters-row-action .bilingual-zh {
  display: none;
}
body.page-lab a.letters-row-link:hover .letters-row-action .bilingual-en,
body.page-lab a.letters-row-link:focus-visible .letters-row-action .bilingual-en {
  opacity: 1;
  transform: none;
  filter: none;
  color: var(--letters-accent);
}
body.page-lab a.letters-row-link:hover .letters-row-arrow,
body.page-lab a.letters-row-link:focus-visible .letters-row-arrow {
  transform: none;
}

/* Card doodles: small hand-drawn cats on the primary tools cards. */
.feature-card.has-doodle {
  --doodle-rx: 0deg;
  --doodle-ry: 0deg;
  --doodle-tx: 0px;
  --doodle-ty: 0px;
  --doodle-ink: var(--ink);
}

.feature-card.has-doodle > :not(.card-doodle) {
  position: relative;
  z-index: 1;
}

.feature-card.has-doodle .card-doodle {
  position: absolute;
  right: 2px;
  bottom: -8px;
  width: 150px;
  height: auto;
  z-index: 0;
  color: var(--doodle-ink);
  opacity: 0.9;
  pointer-events: none;
  transform:
    perspective(800px)
    translate3d(var(--doodle-tx), var(--doodle-ty), 0)
    rotateX(var(--doodle-rx))
    rotateY(var(--doodle-ry));
  transform-origin: 50% 58%;
  transform-style: preserve-3d;
  transition:
    transform 260ms var(--ease-smooth),
    opacity 220ms var(--ease-smooth);
}

body.page-tools .feature-card.has-doodle.is-doodle-tracking .card-doodle {
  opacity: 0.96;
  transition: opacity 160ms var(--ease-smooth);
  will-change: transform;
}

@media (any-hover: hover) and (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-performance="low"]) body.page-tools .feature-card.has-doodle:hover:not(.is-doodle-tracking) {
    --doodle-rx: 6deg;
    --doodle-ry: -7deg;
    --doodle-tx: -18px;
    --doodle-ty: -14px;
  }
}

html[data-theme="nature"] body.page-tools .feature-card.has-doodle {
  --doodle-ink: #1f4a35;
}

.feature-card.has-doodle .card-doodle .ht {
  color: var(--card-accent, #2f7d69);
  opacity: 0.5;
}

.feature-card.has-doodle.stretch-doodle .card-doodle {
  width: 172px;
  right: -4px;
  bottom: -12px;
}

.feature-card.has-doodle.stretch-doodle .card-doodle.cut-cat-doodle {
  width: 106.5px;
  right: 10px;
  bottom: 8px;
}

.feature-card.has-doodle.camera-doodle .card-doodle {
  width: 156px;
  right: 8px;
  bottom: 8px;
}

.feature-card.has-doodle.canvas-doodle .card-doodle {
  width: 158px;
  right: -4px;
  bottom: -8px;
}

.feature-card.has-doodle.window-doodle .card-doodle {
  width: 158px;
  right: -5px;
  bottom: -10px;
}

/* 资讯聚合 curled-cat is square; cap its height to half the card so it doesn't dominate. */
.feature-card.has-doodle.curl-doodle .card-doodle {
  width: auto;
  height: 50%;
  right: 6px;
  bottom: 6px;
}

@media (min-width: 600px) {
  .feature-card.has-doodle p {
    max-width: 64%;
  }
}

@media (max-width: 720px) {
  body.page-tools .feature-card.has-doodle .card-doodle {
    display: none;
  }

  body.page-tools .feature-card.has-doodle p {
    max-width: none;
  }

  body.page-tools .feature-card.has-doodle > a {
    position: absolute;
    inset: auto calc(var(--space-16) - 5px) auto auto;
    top: 50%;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    transform: translateY(-50%);
    z-index: 2;
  }
}

/* ── 移动端阅读目录:箭头按钮上拉展开目录(底部抽屉);仅 ≤980px 生效,桌面不受影响 ── */
body.page-letters.page-letters-read .letters-toc-toggle{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:46;display:none;place-items:center;width:42px;height:42px;padding:0;border:1px solid color-mix(in oklch,var(--ink) 12%,transparent);border-radius:50%;background:color-mix(in oklch,var(--bg) 88%,var(--panel-strong) 12%);color:color-mix(in oklch,var(--ink) 86%,var(--letters-accent) 14%);box-shadow:0 14px 34px color-mix(in oklch,var(--ink) 13%,transparent),inset 0 1px 0 color-mix(in oklch,#fff 62%,transparent);cursor:pointer;transition:transform .18s var(--ease-smooth),background .18s var(--ease-smooth),border-color .18s var(--ease-smooth)}
body.page-letters.page-letters-read .letters-toc-toggle svg{width:18px;height:18px;transition:transform .26s var(--ease-smooth)}
body.page-letters.page-letters-read .letters-toc-toggle:hover,body.page-letters.page-letters-read .letters-toc-toggle:focus-visible{outline:none;border-color:color-mix(in oklch,var(--letters-accent) 42%,transparent);background:color-mix(in oklch,var(--bg) 92%,var(--letters-accent) 8%)}
body.page-letters.page-letters-read .letters-toc-toggle:active{transform:scale(.95)}
body.page-letters.page-letters-read .letters-toc-scrim{position:fixed;inset:0;z-index:44;background:color-mix(in oklch,var(--ink) 40%,transparent);opacity:0;pointer-events:none;transition:opacity .24s var(--ease-smooth)}
@media (max-width:980px){
 body.page-letters.page-letters-read .letters-toc-toggle:not([hidden]){display:grid}body.page-letters.page-letters-read .letters-top-button{display:none}
 body.page-letters.page-letters-read .letters-reading-rail{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:45;grid-column:auto;grid-row:auto;min-height:0;align-self:auto;padding:0;max-height:min(78svh,560px);background:color-mix(in oklch,var(--bg) 94%,var(--panel-strong) 6%);border-top:1px solid color-mix(in oklch,var(--ink) 12%,transparent);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -18px 48px color-mix(in oklch,var(--ink) 18%,transparent);transform:translateY(106%);transition:transform .34s var(--ease-smooth)}
 body.page-letters.page-letters-read .letters-reading-rail::before{content:"目录";flex:0 0 auto;padding:calc(var(--space-16) + 8px) var(--space-24) var(--space-8);font-family:"DM Sans","Noto Sans SC",sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--letters-muted);border-bottom:1px solid var(--letters-rule-soft)}
 body.page-letters.page-letters-read .letters-reading-rail::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:999px;background:color-mix(in oklch,var(--ink) 16%,transparent)}
 body.page-letters.page-letters-read .letters-reading-progress-track{display:none}
 body.page-letters.page-letters-read .letters-reading-toc{padding:var(--space-8) var(--space-24) calc(var(--space-24) + env(safe-area-inset-bottom,0px));max-height:none;overflow:auto;flex:1 1 auto;min-height:0}
 body.page-letters.page-letters-read .letters-reading-toc a{min-height:44px}
 body.page-letters.page-letters-read.letters-toc-open .letters-reading-rail{transform:translateY(0)}
 body.page-letters.page-letters-read.letters-toc-open .letters-toc-scrim{opacity:1;pointer-events:auto}
 body.page-letters.page-letters-read.letters-toc-open .letters-toc-toggle svg{transform:rotate(180deg)}
 body.page-letters.page-letters-read.letters-toc-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){body.page-letters.page-letters-read .letters-reading-rail,body.page-letters.page-letters-read .letters-toc-toggle svg,body.page-letters.page-letters-read .letters-toc-scrim{transition:none}}