:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #eef2f6;
  --text: #20242a;
  --muted: #67707b;
  --border: #d6dee8;
  --accent: #b84b28;
  --accent-soft: #f7e2d9;
  --steel: #2d5f7a;
  --metal: #c95f38;
  --slag: #a78725;
  --oxygen: #287bb5;
  --shadow: 0 18px 48px rgba(32, 36, 42, .09);
  --topbar: 68px;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1419;
  --surface: #171d23;
  --surface-2: #202830;
  --text: #eef2f4;
  --muted: #9ba8b4;
  --border: #303a44;
  --accent: #ef845f;
  --accent-soft: #3a251f;
  --steel: #8db0cd;
  --metal: #ff8b61;
  --slag: #d2ae45;
  --oxygen: #64afe3;
  --shadow: 0 18px 48px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 99; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); }
.skip-link:focus { top: 8px; }

.topbar { position: fixed; z-index: 30; inset: 0 0 auto 0; height: var(--topbar); display: flex; align-items: center; gap: 22px; padding: 0 24px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 250px; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: white; font-family: Georgia, serif; font-weight: 700; }
.brand strong, .brand small { display: block; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.search-box { flex: 1; max-width: 720px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--muted); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
kbd { padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font-size: 11px; }
.icon-button { min-width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; }

.app-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr) 230px; min-height: 100vh; padding-top: var(--topbar); }
.sidebar, .toc-panel { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow-y: auto; }
.sidebar { padding: 25px 18px; border-right: 1px solid var(--border); background: var(--surface); }
.sidebar-heading { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.progress-track { height: 4px; margin: 12px 0 20px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.progress-track span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }
#chapterNav { display: grid; gap: 3px; }
.nav-link { display: grid; grid-template-columns: 27px 1fr auto; gap: 8px; align-items: start; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--muted); font-size: 13px; line-height: 1.45; }
.nav-link:hover, .nav-link.active { background: var(--accent-soft); color: var(--text); }
.nav-link .num { font-family: Georgia, serif; color: var(--accent); }
.nav-link .done { color: var(--accent); }
.sidebar-footer { display: grid; gap: 7px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.sidebar-footer a { padding: 8px 10px; text-decoration: none; color: var(--steel); font-weight: 600; font-size: 13px; }

main { position: relative; min-width: 0; }
.reading-progress { position: sticky; z-index: 20; top: var(--topbar); height: 3px; background: transparent; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--accent); }
.content-page { width: min(900px, calc(100% - 64px)); margin: 0 auto; padding: 54px 0 100px; font-family: "Noto Serif SC", "Songti SC", SimSun, Georgia, serif; line-height: 1.88; }
.content-page h1 { margin: 0 0 12px; font-size: clamp(31px, 4vw, 48px); line-height: 1.2; letter-spacing: -.03em; }
.content-page h2 { margin: 48px 0 18px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 25px; line-height: 1.35; }
.content-page h3 { margin: 30px 0 12px; color: var(--steel); font-size: 19px; }
.content-page h4 { margin: 24px 0 8px; color: var(--text); font-family: Inter, "Microsoft YaHei", sans-serif; font-size: 17px; line-height: 1.45; }
.content-page p { margin: 12px 0; }
.content-page li { margin: 5px 0; }
.content-page blockquote { margin: 20px 0; padding: 12px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--muted); }
.content-page code { padding: 2px 5px; border-radius: 4px; background: var(--surface-2); font-family: Consolas, monospace; font-size: .9em; }
.content-page pre { overflow-x: auto; padding: 18px; border-radius: 10px; background: #17212b; color: #eef2f4; line-height: 1.55; }
.content-page pre code { padding: 0; background: transparent; }
.content-page table { width: 100%; margin: 20px 0; border-collapse: collapse; font-family: Inter, "Microsoft YaHei", sans-serif; font-size: 14px; }
.content-page th, .content-page td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.content-page th { color: var(--steel); background: var(--surface-2); }
.content-page hr { margin: 45px 0; border: 0; border-top: 1px solid var(--border); }
.content-page a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.chapter-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; color: var(--muted); font-family: Inter, sans-serif; font-size: 13px; }
.chapter-meta span { padding: 5px 9px; border-radius: 99px; background: var(--surface-2); }

.knowledge-card { margin: 18px 0; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 28px rgba(28, 45, 62, .06); font-family: Inter, "Microsoft YaHei", sans-serif; line-height: 1.65; }
.knowledge-card .card-kicker { margin-bottom: 7px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.knowledge-card h4 { margin: 0 0 10px; }
.knowledge-card dl { display: grid; gap: 10px; margin: 12px 0 0; }
.knowledge-card dl div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; }
.knowledge-card dt { color: var(--steel); font-weight: 800; }
.knowledge-card dd { margin: 0; color: var(--muted); }
.knowledge-card p { margin: 8px 0 0; }
.formula-card { border-left: 4px solid var(--oxygen); }
.figure-card { border-left: 4px solid var(--slag); }
.cartoon-card { border-left: 4px solid var(--accent); }
.animation-card { border-left: 4px solid var(--accent); }
.practice-card { border-left: 4px solid var(--steel); }
.source-card { border-left: 4px solid var(--muted); background: color-mix(in srgb, var(--surface) 88%, var(--surface-2)); }
.card-math { margin: 12px 0; padding: 14px 12px; border-radius: 8px; background: var(--surface-2); overflow-x: auto; }
.card-action { margin-top: 14px; }
.source-status { color: var(--steel); font-weight: 700; }
.smart-figure { position: relative; min-height: 210px; margin: 10px 0 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--slag) 38%, var(--border)); border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--oxygen) 10%, var(--surface)), color-mix(in srgb, var(--slag) 9%, var(--surface))); font-family: Inter, "Microsoft YaHei", sans-serif; }
.smart-flow { display: flex; align-items: stretch; justify-content: center; gap: 8px; padding: 30px 18px 16px; }
.smart-node { display: grid; grid-template-rows: 24px 1fr; align-items: start; width: min(148px, 18vw); min-height: 92px; padding: 11px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 10px 22px rgba(28, 45, 62, .07); }
.smart-node span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; }
.smart-node strong { margin-top: 8px; color: var(--text); font-size: 12px; line-height: 1.35; }
.smart-arrow { display: grid; place-items: center; min-width: 16px; color: var(--accent); font-weight: 900; }
.smart-layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 0 18px 12px; }
.smart-layers span, .smart-legend { min-height: 30px; display: grid; place-items: center; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, var(--oxygen)); color: var(--text); font-size: 11px; font-weight: 800; text-align: center; }
.smart-layers span:nth-child(2), .smart-legend.l1 { background: color-mix(in srgb, var(--surface) 80%, var(--slag)); }
.smart-layers span:nth-child(3), .smart-legend.l2 { background: color-mix(in srgb, var(--surface) 78%, var(--accent)); }
.smart-layers span:nth-child(4), .smart-legend.l3 { background: color-mix(in srgb, var(--surface) 82%, var(--steel)); }
.smart-legend-row { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 16px; }
.process-visual .smart-flow { padding-top: 48px; }
.relation-visual { min-height: 260px; }
.relation-core { position: absolute; left: calc(50% - 58px); top: 92px; width: 116px; height: 70px; display: grid; place-items: center; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 900; box-shadow: 0 12px 24px rgba(184, 75, 40, .2); }
.relation-node { position: absolute; min-width: 92px; max-width: 150px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 800; text-align: center; box-shadow: 0 10px 22px rgba(28, 45, 62, .08); }
.relation-node.r1 { left: 9%; top: 32px; }
.relation-node.r2 { right: 9%; top: 32px; }
.relation-node.r3 { left: 8%; bottom: 38px; }
.relation-node.r4 { right: 8%; bottom: 38px; }
.relation-node.r5 { left: calc(50% - 62px); bottom: 16px; }
.relation-line { position: absolute; background: color-mix(in srgb, var(--accent) 40%, transparent); }
.relation-line.h { left: 16%; right: 16%; top: 126px; height: 2px; }
.relation-line.v { left: calc(50% - 1px); top: 42px; bottom: 42px; width: 2px; }
.vessel-visual { min-height: 280px; }
.vessel-shell { position: absolute; left: 26%; right: 26%; bottom: 42px; height: 168px; border: 8px solid var(--steel); border-top-width: 5px; border-radius: 24px 24px 58px 58px; background: color-mix(in srgb, var(--surface) 74%, transparent); }
.vessel-metal { position: absolute; left: 31%; right: 31%; bottom: 70px; height: 86px; border-radius: 36% 36% 44% 44%; background: linear-gradient(180deg, color-mix(in srgb, var(--metal) 76%, white), var(--metal)); box-shadow: inset 0 8px 18px rgba(255,255,255,.25); }
.vessel-slag { position: absolute; left: 30%; right: 30%; bottom: 148px; height: 22px; border-radius: 999px; background: linear-gradient(90deg, #edc45b, var(--slag)); }
.vessel-gas { position: absolute; left: 48%; bottom: 76px; width: 34px; height: 114px; border-left: 3px dashed var(--oxygen); border-right: 3px dashed var(--oxygen); border-radius: 50%; animation: plume-rise 1.8s infinite ease-in-out; }
.vessel-flow { position: absolute; padding: 6px 9px; border-radius: 999px; background: rgba(20,31,42,.76); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.vessel-flow.f1 { left: 56%; top: 38px; }
.vessel-flow.f2 { left: 13%; bottom: 98px; }
.vessel-flow.f3 { right: 12%; bottom: 154px; }
.vessel-visual .smart-legend-row { position: absolute; left: 0; right: 0; bottom: 0; }
.figure-asset { position: relative; margin: 10px 0 14px; }
.figure-asset img { display: block; width: 100%; max-height: 560px; object-fit: contain; border: 1px solid var(--border); border-radius: 10px; background: #eaf0f6; box-shadow: 0 14px 34px rgba(28, 45, 62, .08); }
.figure-asset figcaption { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.fig-label-layer { position: absolute; inset: 0 0 24px 0; pointer-events: none; }
.fig-label { position: absolute; padding: 5px 8px; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; background: rgba(20, 31, 42, .76); color: #fff; font-family: Inter, "Microsoft YaHei", sans-serif; font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px rgba(0,0,0,.18); white-space: nowrap; }
.eaf-charge { left: 4%; top: 18%; }
.eaf-electrodes { left: 38%; top: 5%; }
.eaf-arcs { left: 42%; top: 48%; }
.eaf-slag { left: 37%; top: 60%; }
.eaf-oxygen { right: 18%; top: 39%; }
.eaf-carbon { right: 20%; top: 63%; }
.eaf-offgas { right: 8%; top: 15%; }
.eaf-tap { left: 9%; bottom: 10%; }
.ref-lf { left: 8%; top: 11%; }
.ref-electrodes { left: 20%; top: 4%; }
.ref-slag { left: 13%; top: 45%; }
.ref-argon { left: 18%; bottom: 18%; }
.ref-rh { left: 48%; top: 13%; }
.ref-cycle { left: 45%; bottom: 28%; }
.ref-vd { right: 11%; top: 18%; }
.ref-vacuum { right: 9%; top: 42%; }

.cartoon-scene { display: grid; grid-template-columns: minmax(190px, 280px) 1fr; gap: 18px; align-items: center; margin: 10px 0 14px; padding: 16px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--oxygen) 8%, transparent)); }
.cartoon-vessel { position: relative; height: 190px; }
.cartoon-ladle { position: absolute; left: 44px; right: 44px; bottom: 8px; height: 142px; border: 7px solid var(--steel); border-top-width: 4px; border-radius: 18px 18px 42px 42px; transform: perspective(240px) rotateX(4deg); }
.cartoon-slag { position: absolute; left: 66px; right: 66px; bottom: 101px; height: 22px; border-radius: 999px; background: var(--slag); opacity: .8; }
.cartoon-steel { position: absolute; left: 68px; right: 68px; bottom: 32px; height: 84px; border-radius: 40% 40% 46% 46%; background: linear-gradient(180deg, color-mix(in srgb, var(--metal) 75%, white), var(--metal)); }
.cartoon-bubble { position: absolute; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--oxygen); background: color-mix(in srgb, var(--oxygen) 14%, transparent); animation: bubble-rise 2.4s infinite ease-in; }
.cartoon-bubble.b1 { left: 105px; bottom: 42px; }
.cartoon-bubble.b2 { left: 138px; bottom: 60px; animation-delay: .45s; }
.cartoon-bubble.b3 { left: 176px; bottom: 48px; animation-delay: .9s; }
.cartoon-lance { position: absolute; left: 138px; top: 4px; width: 12px; height: 138px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.cartoon-electrode { position: absolute; left: 100px; top: 0; width: 16px; height: 112px; border-radius: 9px; background: #5b4b2f; opacity: 0; }
.cartoon-vacuum { position: absolute; left: 88px; top: 8px; width: 92px; height: 44px; border: 4px solid var(--accent); border-bottom: 0; border-radius: 52px 52px 0 0; opacity: 0; }
.cartoon-lf .cartoon-electrode, .cartoon-esr .cartoon-electrode { opacity: 1; }
.cartoon-rh .cartoon-vacuum, .cartoon-dh .cartoon-vacuum, .cartoon-vd .cartoon-vacuum, .cartoon-vod .cartoon-vacuum { opacity: 1; }
.cartoon-aod .cartoon-lance, .cartoon-vod .cartoon-lance { opacity: 1; }
.cartoon-rh .cartoon-lance, .cartoon-dh .cartoon-lance, .cartoon-vd .cartoon-lance { opacity: .35; }
.cartoon-caption { color: var(--muted); line-height: 1.7; }
@keyframes bubble-rise { 0% { transform: translateY(22px) scale(.75); opacity: .2; } 70% { opacity: .9; } 100% { transform: translateY(-70px) scale(1.2); opacity: 0; } }

.cartoon-rig { position: relative; height: 230px; min-width: 210px; }
.cartoon-rig span { position: absolute; box-sizing: border-box; }
.cartoon-label { left: 6px; right: 6px; top: 0; color: var(--muted); font-size: 12px; text-align: center; }
.cartoon-ladle-shell { left: 58px; right: 58px; bottom: 12px; height: 138px; border: 7px solid var(--steel); border-top-width: 4px; border-radius: 18px 18px 44px 44px; background: color-mix(in srgb, var(--surface) 78%, transparent); }
.cartoon-steel-bath { left: 76px; right: 76px; bottom: 34px; height: 76px; border-radius: 34% 34% 44% 44%; background: linear-gradient(180deg, color-mix(in srgb, var(--metal) 72%, white), var(--metal)); box-shadow: inset 0 8px 18px rgba(255,255,255,.28); }
.cartoon-slag-band { left: 74px; right: 74px; bottom: 104px; height: 18px; border-radius: 999px; background: linear-gradient(90deg, #e8b84e, var(--slag)); opacity: .9; }
.cartoon-rig .cartoon-bubble { border-color: var(--oxygen); background: color-mix(in srgb, var(--oxygen) 16%, transparent); }
.cartoon-rig .b1 { left: 110px; bottom: 42px; }
.cartoon-rig .b2 { left: 142px; bottom: 58px; animation-delay: .35s; }
.cartoon-rig .b3 { left: 172px; bottom: 46px; animation-delay: .75s; }
.cartoon-electrode { top: 34px; width: 12px; height: 92px; border-radius: 8px; background: linear-gradient(180deg, #2f2a23, #75654a); box-shadow: 0 0 0 3px color-mix(in srgb, #000 8%, transparent); opacity: 1; }
.cartoon-electrode.e1 { left: 104px; }
.cartoon-electrode.e2 { left: 138px; }
.cartoon-electrode.e3 { left: 172px; }
.cartoon-arc { width: 22px; height: 18px; bottom: 100px; border-bottom: 3px solid #ffcc49; border-radius: 50%; filter: drop-shadow(0 0 7px #ffb300); animation: arc-flicker .8s infinite alternate; }
.cartoon-arc.a1 { left: 100px; }
.cartoon-arc.a2 { left: 134px; animation-delay: .2s; }
.cartoon-arc.a3 { left: 168px; animation-delay: .4s; }
.cartoon-vacuum-chamber { left: 82px; right: 82px; top: 34px; height: 62px; border: 5px solid var(--accent); border-radius: 12px 12px 18px 18px; background: color-mix(in srgb, var(--surface) 86%, var(--accent)); }
.cartoon-snorkel { width: 18px; top: 88px; bottom: 82px; border: 4px solid var(--accent); border-top: 0; background: color-mix(in srgb, var(--surface) 82%, var(--accent)); }
.cartoon-snorkel.up { left: 112px; }
.cartoon-snorkel.down { right: 112px; }
.cartoon-snorkel.single { left: 136px; width: 28px; }
.cartoon-dh-vessel { left: 96px; right: 96px; top: 28px; height: 78px; border: 5px solid var(--accent); border-radius: 38px 38px 14px 14px; background: color-mix(in srgb, var(--surface) 84%, var(--accent)); animation: dh-lift 2.4s infinite ease-in-out; }
.cartoon-vacuum-tank { left: 38px; right: 38px; bottom: 0; height: 176px; border: 5px dashed color-mix(in srgb, var(--accent) 68%, var(--border)); border-radius: 22px 22px 38px 38px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cartoon-oxygen-lance { left: 144px; top: 24px; width: 12px; height: 122px; border-radius: 999px; background: var(--oxygen); box-shadow: 0 0 0 4px color-mix(in srgb, var(--oxygen) 18%, transparent); }
.cartoon-co-plume { left: 120px; bottom: 90px; width: 58px; height: 80px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 45% 75%, rgba(255,255,255,.9) 0 4px, transparent 5px), radial-gradient(circle at 65% 55%, rgba(255,255,255,.8) 0 5px, transparent 6px), radial-gradient(circle at 35% 35%, rgba(255,255,255,.65) 0 4px, transparent 5px); border-left: 2px dashed color-mix(in srgb, var(--oxygen) 60%, transparent); border-right: 2px dashed color-mix(in srgb, var(--oxygen) 60%, transparent); animation: plume-rise 1.6s infinite ease-in-out; }
.cartoon-aod-shell { left: 62px; right: 52px; bottom: 20px; height: 138px; border: 7px solid var(--steel); border-radius: 44px 24px 52px 38px; transform: rotate(-8deg); background: color-mix(in srgb, var(--surface) 76%, transparent); }
.cartoon-aod-bath { left: 90px; right: 80px; bottom: 48px; height: 62px; border-radius: 40% 45% 46% 38%; transform: rotate(-8deg); background: linear-gradient(180deg, color-mix(in srgb, var(--metal) 70%, white), var(--metal)); }
.cartoon-aod-slag { left: 90px; right: 82px; bottom: 104px; height: 16px; border-radius: 999px; transform: rotate(-8deg); background: var(--slag); }
.cartoon-tuyere { width: 36px; height: 8px; right: 50px; border-radius: 999px; background: var(--oxygen); transform: rotate(-8deg); }
.cartoon-tuyere.t1 { bottom: 62px; }
.cartoon-tuyere.t2 { bottom: 84px; }
.cartoon-side-jet { right: 84px; width: 64px; height: 2px; border-top: 3px dashed var(--oxygen); transform: rotate(-8deg); animation: jet-pulse 1s infinite alternate; }
.cartoon-side-jet.j1 { bottom: 68px; }
.cartoon-side-jet.j2 { bottom: 90px; animation-delay: .2s; }
.cartoon-wire { left: 151px; top: 24px; width: 4px; height: 118px; background: repeating-linear-gradient(180deg, #777 0 8px, #d7d7d7 8px 15px); border-radius: 999px; transform: rotate(6deg); }
.cartoon-offgas { right: 44px; top: 42px; width: 45px; height: 32px; border-top: 4px dashed var(--accent); border-right: 4px dashed var(--accent); border-radius: 0 18px 0 0; }
.cartoon-vacuum-tank.compact { left: 50px; right: 50px; height: 158px; }
.cartoon-em-coil { left: 50px; right: 50px; bottom: 48px; height: 62px; border: 4px solid color-mix(in srgb, var(--oxygen) 75%, var(--border)); border-radius: 50%; transform: rotate(-8deg); opacity: .8; }
.cartoon-swirl { left: 118px; bottom: 62px; width: 66px; height: 42px; border: 3px dashed #fff; border-radius: 50%; animation: swirl-spin 2.2s infinite linear; }
.cartoon-cas-bell { left: 96px; right: 96px; top: 66px; height: 86px; border: 5px solid var(--accent); border-bottom-width: 8px; border-radius: 18px 18px 10px 10px; background: color-mix(in srgb, var(--surface) 76%, transparent); }
.cartoon-clean-eye { left: 112px; right: 112px; bottom: 106px; height: 26px; border-radius: 999px; border: 3px solid #fff; background: color-mix(in srgb, var(--metal) 60%, white); }
.cartoon-oxygen-lance.slim { left: 148px; top: 24px; height: 100px; width: 8px; }
.cartoon-injection-lance { left: 84px; top: 42px; width: 12px; height: 138px; border-radius: 999px; background: var(--accent); transform: rotate(-24deg); transform-origin: top center; }
.cartoon-powder-plume { left: 112px; bottom: 72px; width: 86px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 30% 45%, #fff 0 3px, transparent 4px), radial-gradient(circle at 60% 36%, #fff 0 4px, transparent 5px), radial-gradient(circle at 45% 72%, #fff 0 3px, transparent 4px); border: 2px dashed var(--accent); animation: plume-rise 1.4s infinite ease-in-out; }
.cartoon-wire-feeder { left: 120px; top: 18px; width: 82px; height: 22px; border: 4px solid var(--steel); border-radius: 999px; background: var(--surface); }
.cartoon-reaction-ring { left: 124px; bottom: 80px; width: 50px; height: 22px; border: 3px solid #fff; border-radius: 50%; animation: arc-flicker 1.1s infinite alternate; }
.cartoon-arrow { color: var(--accent); font-size: 11px; font-weight: 700; }
.cartoon-arrow.argon { left: 42px; bottom: 18px; }
.cartoon-arrow.cycle-up { left: 20px; top: 76px; writing-mode: vertical-rl; }
.cartoon-arrow.cycle-down { right: 16px; top: 74px; writing-mode: vertical-rl; color: var(--muted); }
.cartoon-arrow.lift { right: 18px; top: 72px; writing-mode: vertical-rl; }
.cartoon-arrow.pump { right: 10px; top: 18px; }
.cartoon-arrow.inclusions { right: 28px; bottom: 92px; writing-mode: vertical-rl; }
@keyframes arc-flicker { from { opacity: .55; transform: translateY(1px) scale(.9); } to { opacity: 1; transform: translateY(-1px) scale(1.08); } }
@keyframes dh-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@keyframes plume-rise { 0%, 100% { opacity: .55; transform: translateY(8px) scale(.96); } 50% { opacity: 1; transform: translateY(-4px) scale(1.04); } }
@keyframes jet-pulse { from { opacity: .45; width: 42px; } to { opacity: 1; width: 68px; } }
@keyframes swirl-spin { to { transform: rotate(360deg); } }

.hero { padding: 28px 0 10px; }
.eyebrow { color: var(--accent); font-family: Inter, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero p { max-width: 760px; color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 25px 0; font-family: Inter, sans-serif; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); text-decoration: none; cursor: pointer; }
.button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.rookie-board { display: grid; grid-template-columns: minmax(280px, 430px) minmax(0, 1fr); gap: 18px; align-items: stretch; margin: 20px 0 28px; font-family: Inter, "Microsoft YaHei", sans-serif; }
.furnace-visual { position: relative; min-height: 330px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--metal) 35%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--oxygen) 14%, var(--surface)), color-mix(in srgb, var(--slag) 12%, var(--surface))); box-shadow: var(--shadow); }
.furnace-visual span { position: absolute; box-sizing: border-box; }
.furnace-shell { left: 74px; right: 74px; bottom: 34px; height: 220px; border: 10px solid color-mix(in srgb, var(--steel) 84%, var(--text)); border-top-width: 6px; border-radius: 34px 34px 72px 72px; background: color-mix(in srgb, var(--surface) 58%, transparent); }
.furnace-slag { left: 105px; right: 105px; bottom: 172px; height: 42px; border-radius: 999px; background: linear-gradient(90deg, #f2c24e, var(--slag)); box-shadow: 0 10px 24px color-mix(in srgb, var(--slag) 25%, transparent); }
.furnace-metal { left: 112px; right: 112px; bottom: 70px; height: 130px; border-radius: 42% 42% 48% 48%; background: linear-gradient(180deg, #ffb067, var(--metal) 62%, #943819); box-shadow: inset 0 10px 28px rgba(255,255,255,.25); animation: bath-wave 3.6s infinite ease-in-out; }
.furnace-lance { left: calc(50% - 9px); top: 18px; width: 18px; height: 168px; border-radius: 999px; background: linear-gradient(180deg, var(--oxygen), color-mix(in srgb, var(--oxygen) 58%, var(--text))); }
.furnace-jet { left: calc(50% - 58px); top: 178px; width: 116px; height: 112px; clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--oxygen) 62%, transparent), color-mix(in srgb, var(--oxygen) 4%, transparent)); animation: jet-pulse 1.2s infinite alternate; }
.furnace-bubble { width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; background: color-mix(in srgb, var(--oxygen) 35%, transparent); animation: bubble-rise 2.7s infinite ease-in; }
.furnace-bubble.fb1 { left: 175px; bottom: 88px; }
.furnace-bubble.fb2 { left: 218px; bottom: 104px; animation-delay: .45s; }
.furnace-bubble.fb3 { right: 178px; bottom: 92px; animation-delay: .9s; }
.furnace-label { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text); font-size: 12px; font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.furnace-label.l1 { right: 36px; top: 46px; }
.furnace-label.l2 { left: 32px; top: 130px; }
.furnace-label.l3 { right: 28px; bottom: 54px; }
.rookie-steps { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.rookie-steps h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.step-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.step-grid a { min-height: 116px; padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 70%, var(--surface)), var(--surface)); text-decoration: none; }
.step-grid strong, .step-grid span { display: block; }
.step-grid strong { margin-bottom: 9px; color: var(--accent); font-size: 16px; }
.step-grid span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.bridge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 28px; font-family: Inter, "Microsoft YaHei", sans-serif; }
.bridge-card { min-height: 176px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none; box-shadow: 0 10px 26px rgba(28, 45, 62, .05); transition: transform .18s ease, border-color .18s ease; }
.bridge-card:hover, .lab-wall a:hover, .step-grid a:hover { transform: translateY(-2px); border-color: var(--accent); }
.bridge-card small, .bridge-card strong, .bridge-card span { display: block; }
.bridge-card small { color: var(--steel); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bridge-card strong { margin: 12px 0; color: var(--accent); font-size: 19px; line-height: 1.35; }
.bridge-card span { color: var(--muted); font-size: 13px; line-height: 1.65; }
.lab-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0 30px; font-family: Inter, "Microsoft YaHei", sans-serif; }
.lab-wall a { min-height: 132px; padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--oxygen) 8%, var(--surface)), var(--surface)); text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.lab-wall strong, .lab-wall span { display: block; }
.lab-wall strong { margin-bottom: 8px; color: var(--text); line-height: 1.35; }
.lab-wall span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 30px 0; font-family: Inter, sans-serif; }
.stat { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.stat strong { display: block; font-family: Georgia, serif; font-size: 28px; color: var(--accent); }
.stat span { color: var(--muted); font-size: 12px; }
.pathway { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 25px 0; font-family: Inter, sans-serif; }
.pathway a { position: relative; min-height: 92px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; }
.pathway a:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; right: -13px; top: 34px; color: var(--accent); }

.toc-panel { padding: 28px 20px; border-left: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 80%, var(--surface)); }
.toc-title { margin-bottom: 12px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
#pageToc { display: grid; gap: 5px; }
#pageToc a { padding: 4px 0 4px 10px; border-left: 2px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.45; text-decoration: none; }
#pageToc a.level-3 { padding-left: 20px; }
#pageToc a:hover { border-color: var(--accent); color: var(--text); }
.complete-button { width: 100%; margin-top: 24px; padding: 10px; border: 1px solid var(--accent); border-radius: 8px; background: transparent; color: var(--accent); cursor: pointer; }
.complete-button.done { background: var(--accent); color: white; }
.save-note { color: var(--muted); font-size: 11px; text-align: center; }

.search-overlay { position: fixed; z-index: 80; inset: 0; padding: 10vh 20px; background: rgba(5, 9, 12, .65); backdrop-filter: blur(6px); }
.search-dialog { width: min(720px, 100%); max-height: 75vh; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.search-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.search-dialog > input { width: calc(100% - 32px); margin: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.search-results { max-height: 53vh; overflow-y: auto; padding: 0 10px 16px; }
.search-result { display: block; padding: 13px 10px; border-bottom: 1px solid var(--border); text-decoration: none; }
.search-result strong { display: block; margin-bottom: 4px; color: var(--steel); }
.search-result small { color: var(--muted); }

.lab-shell { font-family: Inter, "Microsoft YaHei", sans-serif; }
.lab-controls { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 18px 0; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.lab-controls label { display: grid; gap: 5px; min-width: 170px; color: var(--muted); font-size: 12px; }
.lab-controls input { accent-color: var(--accent); }
.converter-canvas { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--oxygen) 8%, var(--surface)), var(--surface)); }
.formula-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.formula-chip { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); text-align: center; }
.process-canvas { margin-top: 6px; }
.lab-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.lab-panels > div { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.lab-panels p { margin: 6px 0 0; color: var(--muted); }
.scenario-strip { display: grid; grid-template-columns: 1fr 1.35fr 1.35fr; gap: 10px; margin-top: 12px; }
.scenario-strip > div { min-height: 94px; padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 60%, var(--surface)), var(--surface)); }
.scenario-strip span { display: block; margin-bottom: 7px; color: var(--steel); font-size: 12px; font-weight: 800; }
.scenario-strip strong { color: var(--accent); font-size: 18px; line-height: 1.35; }
.scenario-strip p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

@keyframes bath-wave { 0%, 100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(4px) scaleX(1.03); } }

.mobile-only { display: none; }
@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .toc-panel { display: none; }
}
@media (max-width: 760px) {
  .mobile-only { display: block; }
  .topbar { gap: 10px; padding: 0 12px; }
  .brand { min-width: 0; }
  .brand strong { font-size: 14px; }
  .brand small, .search-box { display: none; }
  .app-shell { display: block; }
  .sidebar { position: fixed; z-index: 40; top: var(--topbar); left: 0; width: min(330px, 88vw); transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .content-page { width: min(100% - 32px, 900px); padding-top: 36px; }
  .knowledge-card dl div { grid-template-columns: 1fr; gap: 2px; }
  .smart-flow { flex-direction: column; }
  .smart-node { width: 100%; min-height: 74px; }
  .smart-arrow { min-height: 12px; }
  .smart-layers { grid-template-columns: repeat(2, 1fr); }
  .relation-node { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; display: block; margin: 10px auto; }
  .relation-core { position: relative; left: auto; top: auto; margin: 22px auto 8px; }
  .relation-line { display: none; }
  .vessel-flow { white-space: normal; max-width: 120px; }
  .cartoon-scene { grid-template-columns: 1fr; }
  .lab-panels { grid-template-columns: 1fr; }
  .scenario-strip { grid-template-columns: 1fr; }
  .card-math { font-size: 13px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .rookie-board { grid-template-columns: 1fr; }
  .step-grid, .bridge-grid, .lab-wall { grid-template-columns: 1fr; }
  .pathway { grid-template-columns: 1fr; }
  .pathway a:not(:last-child)::after { content: "↓"; right: 18px; top: auto; bottom: -17px; }
  .formula-strip { grid-template-columns: 1fr; }
}
@media print {
  .topbar, .sidebar, .toc-panel, .reading-progress, .hero-actions { display: none !important; }
  .app-shell { display: block; padding: 0; }
  .content-page { width: 100%; padding: 0; }
  body { background: #fff; color: #000; }
}