/* Homepage only. A sparse editorial surface on Hydro's existing visual tokens.
   设计基调（Apple）：单一强调色 #0066cc、无装饰性硬形状、留白优先、滚动即叙事。
   三层滚动体验：
   ① Hero 几何层视差（JS 按 data-m 平移，CSS translate 属性漂浮）
   ② Hero lockup 滚出舞台（透明度 + 上移 + 轻微缩放）
   ③ CLASSROOM KIT 区三段渐入（.oj-in 由 IntersectionObserver 驱动） */

/* ════════════════════════════════════════════════════════════════
   Design Tokens（v28 起）：Ant Design 治理方法 × Apple 数值
   —— 苹果做视觉，AntD 做系统 ——
   参考 antd 5.x token 体系命名（colorText / colorPrimary / colorBorder /
   borderRadius / controlHeight / motion…），数值保持 Apple 美学。
   改视觉 = 改 token，一处生效；几何/布局的一次性定位值不 token 化。
   ════════════════════════════════════════════════════════════════ */
:root:root.page--homepage {
  /* ── 色彩 · 品牌主色（antd colorPrimary / colorPrimaryHover / colorPrimaryActive）── */
  --hz-color-primary: #0071e3;        /* Action Blue：按钮、链接、强调 */
  --hz-color-primary-hover: #0077ed;  /* hover 态 */
  --hz-color-primary-deep: #0066cc;   /* 深一档：几何元素、进度条 */
  --hz-color-gold: #b8892b;           /* 品牌金：kicker、几何点缀（自定义 token） */

  /* ── 色彩 · 文本层级（antd colorText 五级）── */
  --hz-color-text: #1d1d1f;           /* 主文本 */
  --hz-color-text-strong: #25252a;    /* 强调文本（大纲链接） */
  --hz-color-text-secondary: #6e6e73; /* 次级文本 */
  --hz-color-text-tertiary: #77777e;  /* 三级文本（描述 p） */
  --hz-color-text-muted: #55555a;     /* 弱化文本（密码 / 小字） */
  --hz-color-text-quaternary: #c7c7cc;/* 最弱文本（装饰箭头） */

  /* ── 色彩 · 边框 / 填充 / 背景（antd colorBorder / colorFill / colorBgContainer）── */
  --hz-color-border: rgba(29,29,31,.16);         /* 分隔线主色 */
  --hz-color-border-secondary: rgba(29,29,31,.12); /* 次级分隔线 */
  --hz-color-fill-track: #ececf0;     /* Segmented 轨道（antd colorFillTertiary 语义） */
  --hz-color-fill-hover: rgba(29,29,31,.05); /* 悬停填充（antd colorFillTertiary） */
  --hz-color-bg-container: #fff;      /* 浮层 / 反色文字底色 */

  /* ── 色彩 · RGB 通道（供 rgba() 组合，antd alpha 混合治理）── */
  --hz-rgb-blue: 0, 102, 204;         /* #0066cc */
  --hz-rgb-blue-2: 0, 113, 227;       /* #0071e3 */
  --hz-rgb-gold: 184, 137, 43;        /* #b8892b */
  --hz-rgb-ink: 29, 29, 31;           /* #1d1d1f */
  --hz-rgb-white: 255, 255, 255;      /* #fff */

  /* ── 字体（antd fontFamily / fontSize 梯度）── */
  --hz-font-sans: "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --hz-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --hz-font-mono: Consolas, monospace;
  --hz-font-10: 10px;
  --hz-font-11: 11px;
  --hz-font-12: 12px;
  --hz-font-13: 13px;
  --hz-font-14: 14px;
  --hz-font-15: 15px;
  --hz-font-19: 19px;
  --hz-font-20: 20px;
  --hz-font-23: 23px;

  /* ── 圆角 / 控件（antd borderRadius / controlHeight）── */
  --hz-radius-pill: 999px;            /* 胶囊（Segmented） */
  --hz-radius-btn: 9px;               /* 主按钮（antd borderRadiusLG ≈ 8） */
  --hz-control-height: 34px;          /* 主按钮高度（antd controlHeight ≈ 32） */

  /* ── 阴影（antd boxShadow 语义）── */
  --hz-shadow-thumb: 0 1px 4px rgba(0,0,0,.14);          /* 分段器滑块浮起 */
  --hz-shadow-btn-hover: 0 4px 12px rgba(0,113,227,.24); /* 主按钮 hover 投影 */

  /* ── 动效（antd motion：ease 曲线 + 时长梯度）── */
  --hz-ease: cubic-bezier(.215,.61,.355,1); /* 标准出 */
  --hz-dur-fast: .2s;
  --hz-dur-med: .25s;
  --hz-dur-slow: .7s;
  --hz-dur-slower: .8s;
}

:root:root.page--homepage .main { padding-top: 0; }
:root:root.page--homepage .main > .row { width: min(1090px, calc(100% - 48px)); margin: 0 auto 68px; }
:root:root.page--homepage .main > .row > .columns { padding: 0 8px; }

/* Hero: deliberately one message, aligned as a single two-line lockup. */
:root:root.page--homepage .oj-home-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 460px; padding: 72px 24px; text-align: center; }
/* ── 首页 Hero 氛围层 ::after（唯一装饰层，纯 CSS，无额外 DOM）──
   目标：把 hero 从全站的柔彩极光里「托」出来，成为一处安静的焦点。
   手法：① 中央白色聚光把标题抬出底色；② 右上 Action Blue(#0066cc) 一处微光作为唯一强调；
        全部羽化，无硬边、无浓色块。 */
:root:root.page--homepage .oj-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(56% 74% at 50% 44%, rgba(var(--hz-rgb-white),.62), rgba(var(--hz-rgb-white),.30) 54%, rgba(var(--hz-rgb-white),0) 80%),
    radial-gradient(40% 54% at 86% 2%, rgba(var(--hz-rgb-blue),.12), rgba(var(--hz-rgb-blue),.028) 48%, rgba(var(--hz-rgb-blue),0) 76%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
  background-position: center, center;
  -webkit-mask-image: linear-gradient(180deg, rgb(var(--hz-rgb-ink)) 0%, rgb(var(--hz-rgb-ink)) 70%, rgba(var(--hz-rgb-ink),.6) 86%, transparent 100%);
  mask-image: linear-gradient(180deg, rgb(var(--hz-rgb-ink)) 0%, rgb(var(--hz-rgb-ink)) 70%, rgba(var(--hz-rgb-ink),.6) 86%, transparent 100%);
}
/* Kicker：金色小字上标（无徽标），与全站金饰同源 #b8892b，抬高一层留白。 */
:root:root.page--homepage .oj-home-kicker { display: inline-block; margin-bottom: 46px; color: var(--hz-color-gold); font-family: var(--hz-font-sans); font-size: var(--hz-font-12); font-weight: 500; letter-spacing: .16em; }
/* Hero lock：kicker + slogan 的舞台层，随滚动整体淡出上移（JS 驱动，见 main.html 内联脚本）。 */
:root:root.page--homepage .oj-hero-lock { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; will-change: opacity, transform; }
/* Slogan：Apple display 观感——系统无衬线、600 字重、微负字距；中文降为小号灰色副题。 */
:root:root.page--homepage .oj-slogan-grid { position: relative; display: inline-grid; grid-template-columns: repeat(3, max-content); column-gap: clamp(28px, 3.4vw, 54px); row-gap: 18px; margin: 0; color: var(--hz-color-text); font-family: var(--hz-font-display); font-size: clamp(38px, 4.9vw, 62px); font-weight: 600; letter-spacing: -.022em; line-height: 1.05; text-align: center; }
:root:root.page--homepage .oj-slogan-grid span, :root:root.page--homepage .oj-slogan-grid small { display: block; white-space: nowrap; }
:root:root.page--homepage .oj-slogan-grid small { color: var(--hz-color-text-secondary); font-size: clamp(28px, 3.2vw, 42px); font-weight: 500; letter-spacing: .16em; line-height: 1.1; margin-right: -.16em; }

/* Hero badge：品牌蓝鸟嵌在圆环里，压一档透明度；尺寸用 em 跟随 slogan 缩放。 */
:root:root.page--homepage .oj-hero-badge { --oj-badge-opacity: .55; position: absolute; left: 100%; top: 100%; display: grid; place-items: center; width: 3.15em; height: 3.15em; margin: 0; transform: translate(0.5em, -2em); border: 1px solid rgba(var(--hz-rgb-blue),.16); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--hz-rgb-white),.5), rgba(var(--hz-rgb-white),0) 80%); pointer-events: none; z-index: 0; }
:root:root.page--homepage .oj-hero-badge img { display: block; width: 58%; height: auto; opacity: var(--oj-badge-opacity); }

/* ── Hero 几何层：散落的数学 / 几何元素 ──
   全部绝对定位、低透明度（蓝 #0066cc / 金 #b8892b 双色系），aria-hidden、pointer-events:none。
   漂浮：CSS `translate` 属性动画（三组 keyframes 交错），
   视差：JS 每帧写 `transform: translate3d(0, -p*data-m px, 0)` —— translate 与 transform 互不覆盖。
   元素字号/定位是一次性布局值，不改 token；颜色统一走 rgb 通道变量。 */
:root:root.page--homepage .oj-home-geometry { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
:root:root.page--homepage .oj-home-geometry > * { position: absolute; color: rgba(var(--hz-rgb-blue),.20); font-family: var(--hz-font-mono); font-style: normal; font-weight: 400; will-change: transform; animation: ojDriftA 13s ease-in-out -2s infinite alternate; }
:root:root.page--homepage .oj-home-geometry > :nth-child(3n+2) { animation-name: ojDriftB; animation-duration: 11s; animation-delay: -4s; }
:root:root.page--homepage .oj-home-geometry > :nth-child(3n) { animation-name: ojDriftC; animation-duration: 15s; animation-delay: -7s; }
@keyframes ojDriftA { from { translate: 0 0; } to { translate: 0 -12px; } }
@keyframes ojDriftB { from { translate: 0 0; } to { translate: 0 14px; } }
@keyframes ojDriftC { from { translate: 0 0; } to { translate: -10px 8px; } }
:root:root.page--homepage .oj-home-geometry i { border: 1px solid rgba(var(--hz-rgb-blue-2),.14); top: -122px; right: -102px; width: 288px; height: 288px; rotate: 31deg; }
:root:root.page--homepage .oj-home-geometry em { top: 74px; left: 8%; font-size: 38px; color: rgba(var(--hz-rgb-blue-2),.22); }
:root:root.page--homepage .oj-home-geometry strong { right: 9%; bottom: 60px; font-size: 18px; color: rgba(var(--hz-rgb-blue-2),.22); }
:root:root.page--homepage .oj-home-geometry b { top: 21%; left: 15%; font-size: 32px; color: rgba(var(--hz-rgb-blue),.18); }
:root:root.page--homepage .oj-home-geometry u { top: 57%; left: 23%; font-size: 46px; color: rgba(var(--hz-rgb-gold),.20); text-decoration: none; }
:root:root.page--homepage .oj-home-geometry .g-sqrt { top: 29%; left: 45%; font-size: 22px; color: rgba(var(--hz-rgb-blue),.16); }
:root:root.page--homepage .oj-home-geometry .g-inf { bottom: 21%; right: 17%; font-size: 42px; color: rgba(var(--hz-rgb-blue),.18); }
:root:root.page--homepage .oj-home-geometry .g-delta { top: 13%; left: 59%; font-size: 19px; color: rgba(var(--hz-rgb-gold),.22); }
:root:root.page--homepage .oj-home-geometry .g-th { bottom: 13%; left: 29%; font-size: 26px; color: rgba(var(--hz-rgb-blue),.15); }
:root:root.page--homepage .oj-home-geometry .g-circle { border-radius: 50%; border: 1px solid rgba(var(--hz-rgb-blue),.15); }
:root:root.page--homepage .oj-home-geometry .g-circle.c1 { top: 14%; right: 23%; width: 30px; height: 30px; }
:root:root.page--homepage .oj-home-geometry .g-circle.c2 { bottom: 11%; right: 35%; width: 46px; height: 46px; border-color: rgba(var(--hz-rgb-gold),.18); }
:root:root.page--homepage .oj-home-geometry .g-circle.c3 { top: 41%; right: 4%; width: 20px; height: 20px; }
:root:root.page--homepage .oj-home-geometry .g-tri { top: 63%; left: 61%; width: 34px; height: 30px; background: rgba(var(--hz-rgb-blue),.10); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
:root:root.page--homepage .oj-home-geometry .g-cross { top: 37%; right: 23%; font-size: 30px; color: rgba(var(--hz-rgb-blue),.16); }
:root:root.page--homepage .oj-home-geometry .g-eq { bottom: 27%; left: 4.5%; font-size: 13px; letter-spacing: .02em; color: rgba(var(--hz-rgb-blue),.17); }
:root:root.page--homepage .oj-home-geometry .g-set { top: 37%; left: 4.5%; font-size: 14px; color: rgba(var(--hz-rgb-gold),.20); }
:root:root.page--homepage .oj-home-geometry .g-axis { bottom: 7%; right: 11%; width: 56px; height: 42px; border-left: 1px solid rgba(var(--hz-rgb-blue),.16); border-bottom: 1px solid rgba(var(--hz-rgb-blue),.16); }

/* Scroll hint：hero 底部「向下滚动」引导，随滚动淡出（JS 控制 opacity）。 */
:root:root.page--homepage .oj-scroll-hint { position: absolute; left: 50%; bottom: 20px; z-index: 1; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px; color: rgba(var(--hz-rgb-ink),.42); font-family: var(--hz-font-sans); font-size: var(--hz-font-10); letter-spacing: .34em; text-transform: uppercase; }
:root:root.page--homepage .oj-scroll-hint i { position: relative; display: block; width: 1px; height: 36px; background: linear-gradient(180deg, rgba(var(--hz-rgb-ink),0), rgba(var(--hz-rgb-ink),.32) 28%, rgba(var(--hz-rgb-ink),.32) 72%, rgba(var(--hz-rgb-ink),0)); }
:root:root.page--homepage .oj-scroll-hint i::after { content: ""; position: absolute; left: -1.5px; top: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--hz-color-primary); animation: ojHintDot 2.1s cubic-bezier(.4,.0,.2,1) infinite; }
@keyframes ojHintDot { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 65%, 100% { top: 100%; opacity: 0; } }

/* Resources: product-directory rhythm, no floating-card treatment. 三段随滚动渐入。 */
:root:root.page--homepage .oj-home-resources { width: min(1034px,calc(100% - 48px)); margin: 72px auto 62px; }
:root:root.page--homepage .oj-home-resources a, :root:root.page--homepage .oj-home-resources a:hover, :root:root.page--homepage .oj-home-resources a:visited, :root:root.page--homepage .oj-home-resources a:focus { text-decoration: none !important; }
:root:root.page--homepage .oj-home-resources .oj-resource-heading, :root:root.page--homepage .oj-home-resources .oj-resource-grid, :root:root.page--homepage .oj-home-resources .oj-home-bridges { opacity: 0; transform: translateY(20px); transition: opacity var(--hz-dur-slower) var(--hz-ease), transform var(--hz-dur-slower) var(--hz-ease); }
:root:root.page--homepage .oj-home-resources.oj-in .oj-resource-heading { opacity: 1; transform: none; }
:root:root.page--homepage .oj-home-resources.oj-in .oj-resource-grid { opacity: 1; transform: none; transition-delay: .12s; }
:root:root.page--homepage .oj-home-resources.oj-in .oj-home-bridges { opacity: 1; transform: none; transition-delay: .24s; }
:root:root.page--homepage .oj-resource-heading { display: grid; grid-template-columns: 172px 1fr auto; gap: 25px; align-items: baseline; padding: 0 0 23px; border-bottom: 1px solid var(--hz-color-border); }
:root:root.page--homepage .oj-resource-heading p { margin: 0; color: var(--hz-color-primary); font-family: var(--hz-font-mono); font-size: var(--hz-font-11); font-weight: 700; letter-spacing: .12em; }
:root:root.page--homepage .oj-resource-heading h2 { margin: 0; color: var(--hz-color-text); font-size: clamp(28px,3.2vw,42px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
:root:root.page--homepage .oj-resource-heading span { color: var(--hz-color-text-tertiary); font-size: var(--hz-font-13); }
:root:root.page--homepage .oj-resource-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 52px; padding: 36px 0 46px; }
:root:root.page--homepage .oj-resource-block h3 { margin: 0 0 8px; color: var(--hz-color-text); font-size: var(--hz-font-19); font-weight: 700; letter-spacing: -.02em; }
:root:root.page--homepage .oj-resource-block > p { margin: 0 0 22px; color: var(--hz-color-text-tertiary); font-size: var(--hz-font-13); line-height: 1.6; }
/* ── 编译器下载（v18→v28）：标题+Segmented 同行，滑块滑动动画，密码与下载成组 ── */
:root:root.page--homepage .oj-compiler-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 10px; margin-bottom: 18px; }
:root:root.page--homepage .oj-compiler-head h3 { margin: 0; line-height: 1.2; }
:root:root.page--homepage .oj-seg { position: relative; display: flex; width: fit-content; margin: 0 auto; padding: 3px; gap: 2px; border-radius: var(--hz-radius-pill); background: var(--hz-color-fill-track); }
:root:root.page--homepage .oj-seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--hz-radius-pill); background: var(--hz-color-bg-container); box-shadow: var(--hz-shadow-thumb); z-index: 0; transition: transform var(--hz-dur-med) var(--hz-ease), width var(--hz-dur-med) var(--hz-ease); }
:root:root.page--homepage .oj-seg-item { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px; border: 0; border-radius: var(--hz-radius-pill); background: transparent; color: var(--hz-color-text-secondary); font-size: var(--hz-font-13); font-weight: 600; letter-spacing: 0; cursor: pointer; font-family: inherit; transition: color var(--hz-dur-fast) var(--hz-ease), background-color var(--hz-dur-fast) var(--hz-ease); }
:root:root.page--homepage .oj-seg-item:hover { color: var(--hz-color-text); background-color: var(--hz-color-fill-hover); } /* antd Segmented item hover 淡填充 */
:root:root.page--homepage .oj-seg-item.is-active { color: var(--hz-color-text); }
:root:root.page--homepage .oj-seg-item:focus-visible { outline: 2px solid rgba(var(--hz-rgb-blue-2),.35); outline-offset: 1px; } /* antd 焦点治理 */
:root:root.page--homepage .oj-seg-item em { padding: 1px 8px; border-radius: var(--hz-radius-pill); background: var(--hz-color-primary); color: var(--hz-color-bg-container); font-size: var(--hz-font-10); font-weight: 600; font-style: normal; letter-spacing: .08em; }
:root:root.page--homepage .oj-compiler-panel { display: none; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-top: 22px; min-height: 162px; }
:root:root.page--homepage .oj-compiler-panel.is-active { display: flex; }
:root:root.page--homepage .oj-cp-logo { width: 56px; height: 56px; flex: none; object-fit: contain; }
:root:root.page--homepage .oj-cp-main { flex: 0 0 auto; min-width: 0; }
:root:root.page--homepage .oj-cp-main strong { display: block; color: var(--hz-color-text); font-size: var(--hz-font-15); font-weight: 700; letter-spacing: -.01em; }
:root:root.page--homepage .oj-cp-main p { margin: 2px 0 0; color: var(--hz-color-text-secondary); font-size: var(--hz-font-13); line-height: 1.7; }
:root:root.page--homepage .oj-cp-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 0; }
:root:root.page--homepage .oj-cp-foot small { color: var(--hz-color-text-muted); font-size: var(--hz-font-13); font-weight: 600; font-family: var(--hz-font-sans); white-space: nowrap; }
:root:root.page--homepage .oj-cp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hz-control-height); padding: 0 15px; border-radius: var(--hz-radius-btn); background: var(--hz-color-primary); color: var(--hz-color-bg-container); font-size: var(--hz-font-13); font-weight: 700; transition: background-color var(--hz-dur-fast) var(--hz-ease), transform var(--hz-dur-fast) var(--hz-ease), box-shadow var(--hz-dur-fast) var(--hz-ease); }
:root:root.page--homepage .oj-cp-btn b { font-size: var(--hz-font-14); transition: transform var(--hz-dur-fast) var(--hz-ease); }
:root:root.page--homepage .oj-cp-btn:hover { background: var(--hz-color-primary-hover); box-shadow: var(--hz-shadow-btn-hover); }
:root:root.page--homepage .oj-cp-btn:hover b { transform: translateY(2px); }
:root:root.page--homepage .oj-cp-btn:focus-visible { outline: 2px solid rgba(var(--hz-rgb-blue-2),.35); outline-offset: 2px; } /* antd 焦点治理 */
/* ── C++ 教学大纲（v14→v28）：单列编号列表，编号蓝字置左 + 右侧箭头 ── */
:root:root.page--homepage .oj-syllabus-links { display: grid; grid-template-columns: 1fr; border-top: 0; }
:root:root.page--homepage .oj-syllabus-links a { display: flex; align-items: center; gap: 15px; min-height: 46px; padding: 0 4px 0 0; border-bottom: 1px solid var(--hz-color-border-secondary); color: var(--hz-color-text-strong); font-size: var(--hz-font-14); transition: color var(--hz-dur-fast) var(--hz-ease), padding-left var(--hz-dur-fast) var(--hz-ease); }
:root:root.page--homepage .oj-syllabus-links a:first-child { border-top: 1px solid var(--hz-color-border-secondary); }
:root:root.page--homepage .oj-syllabus-links span { order: -1; color: var(--hz-color-primary); font-family: var(--hz-font-mono); font-size: var(--hz-font-12); font-weight: 700; letter-spacing: .08em; }
:root:root.page--homepage .oj-syllabus-links a::after { content: "→"; margin-left: auto; color: var(--hz-color-text-quaternary); font-size: var(--hz-font-14); transition: transform var(--hz-dur-fast) var(--hz-ease), color var(--hz-dur-fast) var(--hz-ease); }
:root:root.page--homepage .oj-syllabus-links a:hover { padding-left: 9px; color: var(--hz-color-primary); }
:root:root.page--homepage .oj-syllabus-links a:hover::after { transform: translateX(3px); color: var(--hz-color-primary); }
:root:root.page--homepage .oj-syllabus-links a:focus-visible { outline: 2px solid rgba(var(--hz-rgb-blue-2),.35); outline-offset: 2px; } /* antd 焦点治理 */
:root:root.page--homepage .oj-home-bridges { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hz-color-border); border-bottom: 1px solid var(--hz-color-border); }
:root:root.page--homepage .oj-home-bridges a { position: relative; min-height: 136px; padding: 25px 32px; background: transparent; color: var(--hz-color-text); transition: background-color var(--hz-dur-fast) var(--hz-ease), color var(--hz-dur-fast) var(--hz-ease); }
:root:root.page--homepage .oj-home-bridges a + a { border-left: 1px solid var(--hz-color-border); }
:root:root.page--homepage .oj-home-bridges a::after { content: "↗"; position: absolute; right: 27px; top: 30px; color: var(--hz-color-primary); font-size: var(--hz-font-20); }
:root:root.page--homepage .oj-home-bridges a:hover { background: var(--hz-color-text); color: var(--hz-color-bg-container); }
:root:root.page--homepage .oj-home-bridges span, :root:root.page--homepage .oj-home-bridges strong, :root:root.page--homepage .oj-home-bridges small { display: block; }
:root:root.page--homepage .oj-home-bridges span { color: var(--hz-color-text-secondary); font-family: var(--hz-font-mono); font-size: var(--hz-font-11); letter-spacing: .08em; }
:root:root.page--homepage .oj-home-bridges a:hover span, :root:root.page--homepage .oj-home-bridges a:hover small { color: rgba(var(--hz-rgb-white),.72); }
:root:root.page--homepage .oj-home-bridges strong { margin-top: 9px; font-size: var(--hz-font-23); font-weight: 700; letter-spacing: -.03em; }
:root:root.page--homepage .oj-home-bridges strong b { display: none; }
:root:root.page--homepage .oj-home-bridges small { margin-top: 4px; color: var(--hz-color-text-secondary); font-size: var(--hz-font-13); }
:root:root.page--homepage .oj-home-bridges a:focus-visible { outline: 2px solid rgba(var(--hz-rgb-blue-2),.35); outline-offset: -2px; } /* antd 焦点治理 */

@media only screen and (max-width:780px) {
  :root:root.page--homepage .oj-home-hero { min-height: 390px; padding: 60px 18px; }
  :root:root.page--homepage .oj-hero-badge { position: static; grid-column: 1 / -1; justify-self: center; width: 100px; height: 100px; margin: 6px 0 0; transform: none; }
  :root:root.page--homepage .oj-home-kicker { margin-bottom: 34px; font-size: var(--hz-font-11); letter-spacing: .13em; }
  :root:root.page--homepage .oj-slogan-grid { font-size: clamp(30px,8.4vw,52px); column-gap: clamp(18px,3vw,30px); row-gap: 14px; }
  /* 窄屏：收掉过于细碎的几何元素，保留大符号与圆环，避免杂乱。 */
  :root:root.page--homepage .oj-home-geometry .g-eq, :root:root.page--homepage .oj-home-geometry .g-set, :root:root.page--homepage .oj-home-geometry .g-axis, :root:root.page--homepage .oj-home-geometry .g-tri, :root:root.page--homepage .oj-home-geometry .g-cross, :root:root.page--homepage .oj-home-geometry .g-th { display: none; }
  :root:root.page--homepage .oj-home-geometry i { top: -126px; right: -142px; }
  :root:root.page--homepage .oj-home-geometry u { top: 44%; left: 10%; font-size: 36px; }
  :root:root.page--homepage .oj-home-geometry b { top: 12%; left: 10%; font-size: 26px; }
  :root:root.page--homepage .oj-home-resources, :root:root.page--homepage .main > .row { width: calc(100% - 32px); }
  :root:root.page--homepage .oj-resource-heading { grid-template-columns: 1fr; gap: 8px; }
  :root:root.page--homepage .oj-resource-grid { grid-template-columns: 1fr; gap: 32px; }
  :root:root.page--homepage .oj-scroll-hint { bottom: 14px; }
}
@media only screen and (max-width:520px) {
  :root:root.page--homepage .oj-slogan-grid { font-size: clamp(26px,8.8vw,40px); column-gap: 13px; row-gap: 12px; }
  :root:root.page--homepage .oj-home-geometry .g-inf, :root:root.page--homepage .oj-home-geometry .g-sqrt, :root:root.page--homepage .oj-home-geometry .g-circle.c1, :root:root.page--homepage .oj-home-geometry .g-circle.c3 { display: none; }
  :root:root.page--homepage .oj-home-geometry em { left: 6%; font-size: 30px; }
  :root:root.page--homepage .oj-syllabus-links { grid-template-columns: 1fr; }
  :root:root.page--homepage .oj-syllabus-links a:nth-child(odd) { margin-right: 0; }
  :root:root.page--homepage .oj-home-bridges { grid-template-columns: 1fr; }
  :root:root.page--homepage .oj-home-bridges a + a { border-top: 1px solid var(--hz-color-border-secondary); border-left: 0; }
  :root:root.page--homepage .oj-seg { max-width: 100%; }
  :root:root.page--homepage .oj-seg-item { padding: 6px 12px; font-size: var(--hz-font-12); }
  :root:root.page--homepage .oj-cp-foot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion:reduce) {
  :root:root.page--homepage .oj-seg-item, :root:root.page--homepage .oj-cp-btn, :root:root.page--homepage .oj-syllabus-links a, :root:root.page--homepage .oj-home-bridges a { transition: none; }
  :root:root.page--homepage .oj-home-geometry > * { animation: none; }
  :root:root.page--homepage .oj-scroll-hint i::after { animation: none; }
  :root:root.page--homepage .oj-home-resources .oj-resource-heading, :root:root.page--homepage .oj-home-resources .oj-resource-grid, :root:root.page--homepage .oj-home-resources .oj-home-bridges { opacity: 1; transform: none; transition: none; }
}
/* JS 关闭（nojs）时，渐入元素直接可见，避免内容消失。 */
:root:root.page--homepage.nojs .oj-home-resources .oj-resource-heading, :root:root.page--homepage.nojs .oj-home-resources .oj-resource-grid, :root:root.page--homepage.nojs .oj-home-resources .oj-home-bridges { opacity: 1; transform: none; transition: none; }

/* ════════════════════════════════════════════════════════════════
   Apple homeview 式滚动叙事（v13 追加，不改任何版式）：
   ① 顶部滚动进度细线；② CLASSROOM KIT 标题滚动视差分层；
   ③ hero 之后的 Hydro 默认模块（排名/一言/最新题目等）统一上浮进场。
   JS 驱动见 templates/main.html 末尾内联脚本。 ════════════════════ */
:root:root.page--homepage .oj-scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90; background: linear-gradient(90deg, rgba(var(--hz-rgb-blue),.9), rgba(var(--hz-rgb-blue-2),.35)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; will-change: transform; }
:root:root.page--homepage .oj-resource-heading h2 { will-change: transform; }
/* 默认模块进场：初始隐藏，IO 命中后上浮渐入（与 .oj-in 同套节奏） */
:root:root.page--homepage .main > .row .section { opacity: 0; transform: translateY(26px); transition: opacity var(--hz-dur-slow) var(--hz-ease), transform var(--hz-dur-slow) var(--hz-ease); }
:root:root.page--homepage .main > .row .section.oj-reveal-in { opacity: 1; transform: none; }
:root:root.page--homepage .main > .row .section:nth-child(2).oj-reveal-in { transition-delay: .08s; }
:root:root.page--homepage .main > .row .section:nth-child(3).oj-reveal-in { transition-delay: .16s; }
@media (prefers-reduced-motion:reduce) {
  :root:root.page--homepage .oj-resource-heading h2 { transform: none !important; }
  :root:root.page--homepage .main > .row .section { opacity: 1; transform: none; transition: none; }
}
:root:root.page--homepage.nojs .main > .row .section { opacity: 1; transform: none; transition: none; }


/* ══ 上课区修正（本轮）════════════════════════════════════════════════════
   ① 编译器块居中：教学大纲已删除，网格只剩它一块；用 :only-child 判定，
      否则会停在原 .82fr 窄列（约 41% 宽）。
   ② 标题区逐行：原为 grid-template-columns:172px 1fr auto 三列，
      「上课，从此开始」在中列、说明被推到最右；改单列后各占一行。
   ③ 修复重叠 + 字号收敛：
      标题 h2 带 JS 滚动视差（按 scrollY 写内联 transform），
      实测 -9px（首屏）～ -21.6px（滚动 430px），会压到上面那行英文上。
      三列布局时中列有余量所以看不出来，改成逐行堆叠后即重叠。
      用 !important 压掉内联 transform（内联无 !important，普通规则加 !important 可覆盖），
      并清掉 will-change；字号由 42px 收敛到 26px 档。
   ─────────────────────────────────────────────────────────────────────── */

:root:root.page--homepage .oj-resource-grid > .oj-resource-block:only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

@media only screen and (min-width: 781px) {
  :root:root.page--homepage .oj-resource-heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    grid-template-columns: none;
  }
}

:root:root.page--homepage .oj-resource-heading h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.3;
  will-change: auto;
  transform: none !important;
}

@media only screen and (max-width: 780px) {
  :root:root.page--homepage .oj-resource-heading h2 { font-size: 22px; }
}
/* ==========================================================================
   v32 · 去掉滚动装饰 + 下方部件上移 + 编译器 Segmented 加大与蓝色下划线
   本块是「追加覆盖」结构：必须留在文件末尾，靠「同优先级、后出现者胜」生效。
   不要往前挪，也不要删文件前面的旧规则（历史回滚依赖它们）。
   ========================================================================== */

/* ① 滚动装饰下线
   SCROLL 提示与顶部进度条均属交接文档 §14 已否决的装饰方向。
   DOM 侧已在 main.html 移除（含创建进度条的 JS），这里只做兜底，
   防止任何旧副本再次注入时又出现。 */
:root:root.page--homepage .oj-scroll-hint,
:root:root.page--homepage .oj-scroll-progress {
  display: none !important;
}

/* ② 去掉 SCROLL 后 hero 底部空出一截，下方部件总体上移 44px */
:root:root.page--homepage .oj-home-hero {
  padding-top: 72px;
  padding-bottom: 52px;
}
:root:root.page--homepage .oj-home-resources {
  margin-top: 48px;
}

/* ③ 编译器 Segmented：加大一档，并加蓝色下划线
   下划线语言与顶栏 nav 一致：hover 半展 .5、选中全展 1、200ms 缓动。
   滑块 .oj-seg-thumb 仍在（z-index 0），下划线画在按钮层（z-index 1）之上。 */
:root:root.page--homepage .oj-seg {
  padding: 4px;
  gap: 4px;
}
:root:root.page--homepage .oj-seg-item {
  padding: 10px 22px;
  font-size: var(--hz-font-15);
}
:root:root.page--homepage .oj-seg-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--hz-color-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--hz-dur-med) var(--hz-ease);
}
:root:root.page--homepage .oj-seg-item:hover::after {
  transform: scaleX(.5);
}
:root:root.page--homepage .oj-seg-item.is-active::after {
  transform: scaleX(1);
}

@media only screen and (max-width: 780px) {
  :root:root.page--homepage .oj-seg-item {
    padding: 8px 16px;
    font-size: var(--hz-font-13);
  }
  :root:root.page--homepage .oj-seg-item::after {
    left: 16px;
    right: 16px;
    bottom: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:root.page--homepage .oj-seg-item::after {
    transition: none;
  }
}

/* ②b 移动端修正：上一条无 media 的 padding 覆盖会把窄屏顶部从 60px 顶成 72px
   （反方向），这里按同样「上移」的意图给窄屏单独收紧。 */
@media only screen and (max-width: 780px) {
  :root:root.page--homepage .oj-home-hero {
    padding-top: 56px;
    padding-bottom: 44px;
  }
  :root:root.page--homepage .oj-home-resources {
    margin-top: 40px;
  }
}