:root {
  color-scheme: light;
  --ink: #172d2b;
  --muted: #536964;
  --accent: #147761;
  --line: #d8e4df;
  --page: #f4f7f6;
  font: 16px/1.55 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--page); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
h1, h2, h3, h4, p { margin: 0; }
.masthead { position: sticky; top: 0; z-index: 2; background: var(--page); border-bottom: 1px solid var(--line); }
.top { max-width: 1440px; min-height: 68px; margin: auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 750; }
.brand img { width: 34px; height: 34px; }
.top-label { color: var(--accent); font-size: .86rem; }
a.top-label:hover { text-decoration: underline; }
.shell { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.shelf-hero {
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  overflow: hidden;
  margin: 32px 0 42px;
  padding: clamp(24px, 4.2vw, 56px);
  border: 1px solid #21483e;
  border-radius: 24px;
  color: #f2faf6;
  background:
    radial-gradient(ellipse at 80% 35%, #21705d70, transparent 60%),
    linear-gradient(124deg, #0c2624, #0e3030 68%, #153e35);
}
.shelf-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#91d6c018 1px, transparent 1px), linear-gradient(90deg, #91d6c018 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(110deg, transparent 20%, #000 100%);
}
.eyebrow { font-size: .8rem; font-weight: 650; letter-spacing: .045em; color: var(--accent); }
.eyebrow span { display: inline-block; width: 7px; height: 7px; border-radius: 100%; background: var(--accent); margin-right: 5px; vertical-align: 2px; }
.shelf-hero .eyebrow { color: #a9e9d0; display: flex; align-items: center; gap: 7px; }
.shelf-hero .eyebrow span { background: #6ce6b7; box-shadow: 0 0 10px #6ce6b78a; }
.shelf-hero .eyebrow b { border: 1px solid #62bc9d73; border-radius: 99px; padding: 2px 8px; font-size: .67rem; font-weight: 650; letter-spacing: 0; }
.shelf-hero h1 { font-size: clamp(2.35rem, 5vw, 4.15rem); line-height: 1.12; margin: 15px 0 17px; letter-spacing: -.045em; }
.shelf-hero h1 span { color: #77e6ba; }
.hero-copy > p:not(.eyebrow) { color: #bdd8d1; line-height: 1.8; max-width: 32em; }
.hero-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 23px; }
.hero-topics button { min-height: 42px; padding: 6px 13px; border: 1px solid #78a89b68; border-radius: 7px; color: #e1f2ed; background: #0b272688; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 650; }
.hero-topics button:hover, .hero-topics button[aria-pressed="true"] { color: #163e31; background: #9becce; border-color: #9becce; }
.shelf-hero :focus-visible { outline-color: #b8fae0; }
.hero-feature { min-width: 0; }
.featured-stage {
  position: relative; display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1fr);
  align-items: center; gap: clamp(14px, 3vw, 34px);
  min-height: 275px; padding: clamp(14px, 2vw, 25px);
  border: 1px solid #8ed6ba42; border-radius: 18px;
  background: radial-gradient(ellipse at 18% 55%, #66d5b32b, transparent 60%), #0b252683;
}
.featured-cover { display: block; min-width: 0; padding: 0 7px 4px 0; }
.featured-stage .cover { transform: perspective(720px) rotateY(-9deg) rotate(-3deg); animation: book-reveal .4s ease-out both; }
.featured-stage .cover::after { animation: cover-scan .75s .15s ease-out both; }
.featured-copy { min-width: 0; animation: feature-copy-in .26s ease-out both; }
.featured-copy .featured-kicker { color: #97deca; font-size: .77rem; font-weight: 680; }
.featured-copy h2 { margin: 5px 0 8px; font-size: clamp(1.16rem, 2.4vw, 2rem); line-height: 1.22; overflow-wrap: anywhere; }
.featured-copy p { color: #bbd8cf; line-height: 1.65; font-size: .86rem; }
.featured-read { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 7px 14px; margin-top: 15px; color: #103c2f; background: #adf3d6; border-radius: 7px; font-size: .82rem; font-weight: 740; }
.featured-read:hover { background: #d1ffe9; }
.shelf-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.shelf-title h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -.025em; }
.shelf-title p { color: var(--muted); font-size: .82rem; }
.book-group { margin-top: 32px; scroll-margin-top: 20px; }
.group-heading { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 11px; margin-bottom: 15px; }
.group-index { padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; color: #176550; background: #e9f4ee; font-size: .72rem; font-weight: 720; }
.group-heading h3 { font-size: clamp(1.17rem, 2vw, 1.42rem); }
.group-heading p { grid-column: 2; color: var(--muted); font-size: .88rem; margin-top: 1px; }
.book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.book-card {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(102px, 10vw, 122px) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: translate .18s, box-shadow .18s;
}
.book-card:hover, .book-card:focus-visible { translate: 0 -2px; box-shadow: 0 10px 24px #1d453218; }
.cover-office { --light: #e2f1ea; --shade: #bcded0; --detail: #196a57; }
.cover-media { --light: #faf0db; --shade: #eed7a7; --detail: #7a5a24; }
.cover-product { --light: #e8eff8; --shade: #ccdcef; --detail: #375d80; }
.cover-founder { --light: #eceaf6; --shade: #dcd5ef; --detail: #594e81; }
.book-mint { --glow: #83efbb; --surface: #12392f; }
.book-teal { --glow: #76e6dc; --surface: #133a3d; }
.book-lime { --glow: #d2ee85; --surface: #283d25; }
.book-sun { --glow: #ffcc8b; --surface: #50382d; }
.book-ice { --glow: #9ae9f8; --surface: #153f53; }
.book-copper { --glow: #ffbfa0; --surface: #533534; }
.book-blue { --glow: #a1d3ff; --surface: #183a58; }
.book-violet { --glow: #d8c4ff; --surface: #373159; }
.book-indigo { --glow: #b6c8ff; --surface: #262f58; }
.cover {
  position: relative; aspect-ratio: 5 / 7; isolation: isolate; align-self: start;
  display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 5px;
  padding: 10px 8px 8px 12px; color: #f6faf8;
  border: 1px solid color-mix(in srgb, var(--glow) 40%, #162d2b); border-radius: 4px 8px 8px 4px;
  background: radial-gradient(ellipse at 70% 52%, color-mix(in srgb, var(--glow) 21%, transparent), transparent 63%), linear-gradient(150deg, var(--surface), #102020 94%);
  box-shadow: 3px 1px #b6c8be, 5px 2px #d9e5dc, 4px 6px 12px #0c211b29;
  transition: transform .24s ease;
}
.cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: 4px 0 0 4px; background: linear-gradient(var(--glow), #ffffff12); opacity: .72; }
.cover::after { content: ""; position: absolute; pointer-events: none; inset: 0; border-radius: inherit; opacity: 0; background: linear-gradient(125deg, transparent 35%, #effff340 50%, transparent 62%); background-size: 230% 100%; }
.cover-imprint { display: flex; align-items: center; gap: 4px; font-size: .54rem; color: var(--glow); letter-spacing: .055em; font-weight: 650; }
.cover-mark { color: #f5fbf8; font-size: .71rem; }
.cover-title { font-size: clamp(.76rem, 1.18vw, 1rem); line-height: 1.2; font-weight: 790; overflow-wrap: anywhere; }
.cover-motif { align-self: stretch; display: grid; place-items: center; color: var(--glow); margin: 1px 0; border-radius: 7px; background-image: linear-gradient(#edfff112 1px, transparent 1px), linear-gradient(90deg, #edfff112 1px, transparent 1px); background-size: 10px 10px; }
.cover-motif svg { display: block; width: 100%; max-height: 75px; stroke: currentColor; stroke-width: 3.1; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--glow) 32%, transparent)); }
.cover-motif .filled { fill: currentColor; }
.cover-motif .cover-trace { stroke-dasharray: 1; stroke: #fff; opacity: .45; }
.cover-motif .cover-trace-end { opacity: .82; }
.featured-stage .cover-trace, .book-card:hover .cover-trace, .book-card:focus-visible .cover-trace { animation: trace-in .65s .13s ease both; }
.cover-label { display: flex; flex-wrap: wrap; gap: 3px 4px; color: var(--glow); font-size: .49rem; line-height: 1.2; }
.cover-label span + span::before { content: "·"; padding-right: 3px; }
.featured-cover .cover { padding: clamp(11px, 1.45vw, 18px); }
.featured-cover .cover-title { font-size: clamp(.91rem, 1.6vw, 1.48rem); }
.featured-cover .cover-motif svg { max-height: 109px; }
.featured-cover .cover-label { font-size: clamp(.49rem, .68vw, .68rem); }
.book-card:focus-visible .cover::after, .book-card:hover .cover::after { animation: cover-scan .52s ease-out both; }
.book-card:focus-visible .cover, .book-card:hover .cover { transform: perspective(500px) rotateY(-7deg) rotate(-2deg); }
.card-copy { display: flex; min-height: 100%; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.card-meta { color: var(--muted); font-size: .74rem; }
.card-copy h4 { font-size: 1rem; line-height: 1.4; }
.card-copy p { color: var(--muted); font-size: .82rem; line-height: 1.6; }
.card-action { color: var(--accent); font-size: .83rem; font-weight: 700; margin-top: auto; padding-top: 8px; }
.bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; margin-top: 64px; padding: 22px 0 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.bottom a:hover { color: var(--accent); text-decoration: underline; }
.masthead.site-nav-host { position: relative; top: auto; }
.reading-top { display: flex; justify-content: space-between; gap: 12px; max-width: 1440px; margin: auto; padding: 12px 24px; border-bottom: 1px solid var(--line); color: #176451; font-size: .81rem; }
.reading-top a:hover { text-decoration: underline; }
.reader-layout { display: grid; grid-template-columns: minmax(244px, 295px) minmax(0, 1fr); max-width: 1440px; margin: auto; min-height: calc(100dvh - 69px); }
#reader-nav { position: sticky; top: 0; height: 100dvh; background: var(--page); border-right: 1px solid var(--line); padding: 24px 12px 8px; }
.directory-book { padding: 0 9px 12px; font-size: 1rem; font-weight: 760; }
.directory summary { padding: 7px 9px 10px; color: var(--accent); font-size: .86rem; cursor: pointer; }
.chapter-list { position: relative; overflow: auto; scrollbar-gutter: stable; max-height: calc(100dvh - 171px); padding: 0 3px 16px; }
.chapter-list h2 { padding: 14px 9px 7px; color: var(--muted); font-size: .72rem; font-weight: 730; }
.chapter-link { padding: 9px 8px; border-radius: 8px; display: flex; gap: 9px; align-items: start; font-size: .83rem; overflow-wrap: anywhere; }
.chapter-link:hover, .chapter-link[aria-current] { background: #e4f0eb; color: #155e50; }
.chapter-link[aria-current] { font-weight: 730; }
.chapter-number { flex: 0 0 27px; padding: 2px 0; border-radius: 5px; text-align: center; background: #e8eeec; font: 650 .69rem/1.45 Inter, sans-serif; }
.chapter-link[aria-current] .chapter-number { background: var(--accent); color: #fff; }
.reading { padding: clamp(30px, 5vw, 68px) clamp(22px, 6vw, 88px) 60px; background: #fff; min-width: 0; }
.reading > * { max-width: 760px; margin-inline: auto; }
.reading h1 { font-size: clamp(1.58rem, 3.2vw, 2.65rem); line-height: 1.3; letter-spacing: -.025em; margin-top: 12px; margin-bottom: 24px; text-wrap: pretty; }
.reading-copy { border-top: 1px solid var(--line); padding-top: 22px; overflow-wrap: anywhere; }
.reading-copy > p, .reading-list { color: #253b38; font-size: clamp(.98rem, 1.3vw, 1.04rem); line-height: 1.85; margin-bottom: 1.12em; white-space: pre-wrap; }
.reading-heading { margin: 1.55em 0 .65em; padding: 0 0 0 11px; border-left: 3px solid #6eaa97; font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.45; }
.reading-step { margin: 1.25em 0 .55em; color: #155e50; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.55; }
.reading-list { padding-inline-start: 1.45em; }
.reading-list li { margin-bottom: .38em; padding-inline-start: .16em; }
.reading-list li::marker { color: var(--accent); font-weight: 720; }
.reading-example { margin: 1.1em 0 1.45em; border: 1px solid var(--line); border-radius: 11px; background: #f4f8f5; }
.reading-example-label { padding: 10px 15px; color: #176451; font-size: .8rem; font-weight: 720; border-bottom: 1px solid var(--line); }
.reading-example-body { margin: 0; padding: 13px 15px; color: #253b38; font-size: .95rem; line-height: 1.75; white-space: pre-wrap; }
.reading-code { background: #f1f5f4; }
.reading-code code { font: .85rem/1.65 ui-monospace, Consolas, "Microsoft YaHei", monospace; overflow-wrap: anywhere; }
.reading-table { overflow-x: auto; margin: 1.2em 0 1.5em; border: 1px solid var(--line); border-radius: 11px; }
.reading-table table { width: 100%; border-collapse: collapse; text-align: left; font-size: .87rem; }
.reading-table-wide table { min-width: 450px; }
.reading-table caption { text-align: left; font-weight: 730; color: #155e50; padding: 10px 13px; background: #edf5f0; }
.reading-table th, .reading-table td { padding: 9px 13px; border-top: 1px solid var(--line); vertical-align: top; }
.reading-table th { color: #24433b; background: #f7faf8; }
.reading-table td:first-child { font-weight: 650; }
.reading-table-cell-label { display: none; }
.diagram { position: relative; isolation: isolate; overflow: hidden; margin: 25px 0 30px; padding: clamp(13px, 3.3vw, 28px); border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, var(--shade), transparent 65%), linear-gradient(140deg, #fcfdfc, var(--light)); }
.reading-copy > .diagram:first-child { margin-top: 0; }
.diagram-caption { display: flex; align-items: center; gap: 5px; color: var(--detail); font-size: .73rem; font-weight: 680; }
.diagram-caption img { width: 26px; height: 26px; }
.diagram-title { margin: 11px 0 15px; font-weight: 760; font-size: 1.08rem; max-width: 90%; }
.diagram-motif { position: absolute; top: -20px; right: 5%; width: clamp(86px, 18%, 158px); transform: rotate(-10deg); color: var(--detail); opacity: .15; z-index: -1; }
.diagram-motif svg { display: block; stroke: currentColor; stroke-width: 2; }
.diagram-motif .filled { fill: currentColor; }
.diagram-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 103px), 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
.diagram-node { display: grid; align-content: start; gap: 5px; padding: 10px; background: #fffffff0; border: 1px solid #244e3d20; border-radius: 10px; }
.diagram-node span { font-size: .68rem; color: var(--detail); font-weight: 760; }
.diagram-node strong { font-size: .84rem; }
.diagram-flow .diagram-nodes { gap: 20px; }
.diagram-flow .diagram-node { position: relative; }
.diagram-flow .diagram-node:not(:last-child)::after { content: ""; position: absolute; inset: 50% -15px auto auto; width: 8px; height: 8px; border-top: 1px solid var(--detail); border-right: 1px solid var(--detail); transform: translateY(-50%) rotate(45deg); }
.diagram-note { margin-top: 10px; color: var(--muted); font-size: .69rem; }
.page-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--line); margin-top: 32px; padding-top: 20px; }
.page-nav a { flex: 1 0 min(100%, 180px); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; overflow-wrap: anywhere; }
.page-nav a:hover { background: #edf6f2; }
.page-nav span, .page-nav strong { display: block; }
.page-nav span { font-size: .75rem; color: var(--accent); }
.page-nav strong { font-size: .9rem; margin-top: 4px; }
@media (max-width: 1050px) {
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .shelf-hero { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .featured-stage { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); min-height: 0; }
  .reader-layout { display: block; }
  #reader-nav { position: static; height: auto; padding: 14px 20px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .directory-book { padding: 0 0 2px; }
  .directory summary { min-height: 42px; padding: 10px 0; }
  .chapter-list { max-height: 320px; }
  .reading-table-wide table, .reading-table-wide caption, .reading-table-wide tbody, .reading-table-wide tr { display: block; min-width: 0; }
  .reading-table-wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .reading-table-wide tbody tr { border-top: 1px solid var(--line); padding: 7px 11px; }
  .reading-table-wide td { display: grid; grid-template-columns: minmax(72px, 29%) minmax(0, 1fr); gap: 9px; border: 0; padding: 5px 0; }
  .reading-table-cell-label { display: block; font-size: .76rem; color: var(--muted); font-weight: 650; }
}
@media (max-width: 1050px) {
  .diagram-flow .diagram-nodes { gap: 10px; }
  .diagram-flow .diagram-node::after { display: none; }
}
@media (max-width: 600px) {
  .shell { width: calc(100% - 32px); }
  .top { min-height: 58px; padding-inline: 13px; }
  .brand { font-size: 13px; }
  .brand img { width: 27px; height: 27px; }
  .top-label { font-size: .75rem; }
  .shelf-hero { margin-top: 22px; border-radius: 18px; }
  .book-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .book-card { grid-template-columns: 93px minmax(0, 1fr); padding: 12px; }
  .featured-stage { grid-template-columns: minmax(0, .71fr) minmax(0, 1fr); }
  .cover-motif svg { max-height: 52px; }
  .book-group { margin-top: 30px; }
  .diagram-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diagram-node:only-child { grid-column: 1 / -1; }
}
@keyframes book-reveal {
  from { opacity: .42; transform: perspective(720px) translateY(8px) rotateY(-17deg) rotate(-5deg); }
  to { opacity: 1; transform: perspective(720px) rotateY(-9deg) rotate(-3deg); }
}
@keyframes feature-copy-in { from { opacity: .35; } to { opacity: 1; } }
@keyframes trace-in { from { stroke-dashoffset: 1; opacity: .2; } to { stroke-dashoffset: 0; opacity: .8; } }
@keyframes cover-scan {
  from { opacity: .62; background-position: 100% 0; }
  to { opacity: 0; background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .book-card, .cover { transition: none; }
  .book-card:hover, .book-card:focus-visible { translate: none; }
  .featured-stage .cover, .featured-stage .cover::after, .featured-copy,
  .book-card:hover .cover::after, .book-card:focus-visible .cover::after,
  .featured-stage .cover-trace, .book-card:hover .cover-trace, .book-card:focus-visible .cover-trace { animation: none; }
  .book-card:hover .cover, .book-card:focus-visible .cover { transform: none; }
}

.reading-heading[id] { scroll-margin-top: 128px; }
.reading-outline {
  margin: 0 0 28px;
  padding: 14px 18px;
  border: 1px solid #d5e5dd;
  border-radius: 12px;
  background: #edf5ef;
}
.reading-outline > p { margin: 0 0 6px; font-weight: 700; }
.reading-outline ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 24px; margin: 0; padding-left: 20px; }
.reading-outline a { color: #185e4b; text-decoration: underline; text-underline-offset: 2px; }
.reading-example-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reading-action { min-height: 34px; padding: 4px 10px; border: 1px solid #b9d4c5; border-radius: 7px; background: #fff; color: #185e4b; font: inherit; font-size: 13px; cursor: pointer; }
.reading-action:hover { background: #edf5ef; }
.reading-quiz { margin: 14px 0; padding: 14px; border: 1px solid #d5e5dd; border-radius: 10px; background: #f7faf7; }
.reading-quiz fieldset { min-width: 0; border: 0; margin: 0 0 8px; padding: 0; }
.reading-quiz legend { font-weight: 700; margin-bottom: 5px; }
.reading-choice { display: flex; align-items: baseline; gap: 8px; margin: 4px 0; cursor: pointer; }
.reading-choice input { accent-color: #185e4b; }
.reading-quiz-feedback:empty { display: none; }
.reading-quiz-feedback { margin-bottom: 0; color: #185e4b; }
.reading-quiz-feedback[data-correct="false"] { color: #774b2d; }
.reading-reflection-label { display: grid; gap: 8px; }
.reading-reflection { width: 100%; padding: 8px; border: 1px solid #b9d4c5; border-radius: 7px; font: inherit; }
.reading-quiz summary { color: #185e4b; margin-top: 7px; cursor: pointer; }
@media(max-width:620px){.reading-outline ol{grid-template-columns:1fr}.reading-heading[id]{scroll-margin-top:155px}}