:root {
  color-scheme: light;
  --page: #f3efe6;
  --paper: rgba(255, 253, 248, .82);
  --paper-solid: #fffdf8;
  --ink: #211f20;
  --muted: #716d68;
  --line: rgba(33,31,32,.13);
  --lime: #c8db6b;
  --lime-deep: #71831c;
  --purple: #765b86;
  --purple-soft: #e4d9e9;
  --orange: #e78b55;
  --yellow: #f6df72;
  --shadow: 0 24px 70px rgba(52,43,38,.11);
  --sans: "Alegreya Sans", "PingFang SC", system-ui, sans-serif;
  --serif: "Noto Serif SC", "Songti SC", serif;
  --body-zh: "Alegreya", "Noto Serif SC", "Songti SC", serif;
}

:root.dark {
  color-scheme: dark;
  --page: #171715;
  --paper: rgba(37,37,34,.84);
  --paper-solid: #252522;
  --ink: #f4f0e8;
  --muted: #bbb5ab;
  --line: rgba(255,255,255,.14);
  --lime: #9eb345;
  --lime-deep: #d0df84;
  --purple-soft: #413849;
  --shadow: 0 24px 70px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 12% 7%, rgba(200,219,107,.16), transparent 28rem), radial-gradient(circle at 88% 24%, rgba(118,91,134,.12), transparent 30rem), var(--page); font-family: var(--sans); font-size: 18px; font-variant-numeric: lining-nums; line-height: 1.62; transition: color .35s ease, background-color .35s ease; }
a { color: inherit; }
button, a { font: inherit; }
button { color: inherit; }

.site-header { position: fixed; z-index: 50; top: 18px; left: 50%; width: min(1180px, calc(100vw - 36px)); min-height: 62px; padding: 8px 9px 8px 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 14px 40px rgba(35,30,28,.09); backdrop-filter: blur(18px) saturate(1.2); transform: translateX(-50%); }
.brand { display: flex; align-items: center; gap: 10px; width: fit-content; font-weight: 800; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--page); font-family: system-ui, sans-serif; font-size: 16px; font-weight: 850; }
.site-header nav { display: flex; gap: 4px; }
.site-header nav a { padding: 9px 15px; border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s ease; }
.site-header nav a:hover, .site-header nav a.is-active { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.theme-toggle { justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }

main, footer { width: min(1160px, calc(100vw - 40px)); margin-inline: auto; }
.hero { min-height: 91svh; padding: 150px 2vw 90px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(42px, 8vw, 100px); }
.eyebrow { margin: 0 0 18px; font-size: 14px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(4rem, 9vw, 7.5rem); font-weight: 800; line-height: .83; letter-spacing: -.04em; }
.hero h1 em { font-family: var(--serif); font-size: .72em; font-style: normal; font-weight: 400; letter-spacing: .02em; }
.lead { max-width: 620px; margin: 34px 0 0; color: var(--muted); font-family: var(--body-zh); font-size: clamp(18px, 2vw, 24px); font-weight: 600; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px; font-size: 16px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30,25,25,.12); }
.button.primary { border-color: var(--ink); background: var(--ink); color: var(--page); }
.button.ghost { background: var(--paper); }

.hero-board { padding: 16px; border: 1px solid var(--line); border-radius: 34px; background: var(--paper); box-shadow: var(--shadow); transform: rotate(1.2deg); }
.board-label { display: flex; justify-content: space-between; padding: 3px 8px 13px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .05em; }
.mini-card { min-height: 145px; margin-bottom: 10px; padding: 24px; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 20px; border-radius: 24px; color: #25251e; }
.mini-card.annotation { background: var(--lime); }
.mini-card.exercise { background: var(--purple-soft); color: var(--ink); }
.mini-number { align-self: start; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%; font-size: 13px; font-weight: 800; }
.mini-card h2 { margin: 0; font-size: 31px; line-height: 1; }
.mini-card p { margin: 7px 0 0; font-family: var(--body-zh); font-size: 15px; font-weight: 600; }
.board-note { margin: 10px 7px 5px; color: var(--muted); font-size: 14px; font-weight: 700; }
.pulse { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #df6a4f; box-shadow: 0 0 0 5px rgba(223,106,79,.14); }

.section { padding: 112px 0 42px; }
.section-heading { margin-bottom: 50px; }
.section-heading h2 { max-width: 820px; margin: 0; font-size: clamp(3rem, 6.5vw, 6.4rem); line-height: .95; letter-spacing: -.035em; }
.section-heading h2 em { font-family: var(--serif); font-size: .75em; font-style: normal; font-weight: 400; }
.split-heading { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 50px; }
.split-heading > p, .weaver-intro p { margin: 0 0 6px; color: var(--muted); font-family: var(--body-zh); font-size: 18px; font-weight: 600; }

.task-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.task-card { padding: clamp(26px, 4vw, 48px); border: 1px solid var(--line); border-radius: 32px; background: var(--paper); box-shadow: 0 14px 42px rgba(40,34,30,.07); }
.task-top { display: flex; justify-content: space-between; align-items: center; }
.task-index { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; background: var(--ink); color: var(--page); font-weight: 900; }
.task-tag { padding: 7px 13px; border-radius: 999px; background: color-mix(in srgb, var(--lime) 60%, transparent); font-size: 14px; font-weight: 800; }
.task-exercise .task-tag { background: var(--purple-soft); }
.task-card h3 { margin: 32px 0 18px; font-size: clamp(32px, 4vw, 52px); line-height: 1; }
.task-card > p { color: var(--muted); font-family: var(--body-zh); font-weight: 600; }
.check-list { margin: 24px 0; padding: 0; display: grid; gap: 11px; list-style: none; }
.check-list li { position: relative; padding-left: 27px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: var(--lime-deep); font-weight: 900; }
.sample-link { width: fit-content; margin: 26px 0 0 !important; padding: 8px 13px; border-radius: 10px; background: color-mix(in srgb, var(--orange) 17%, transparent); color: var(--ink) !important; font-family: var(--sans) !important; font-size: 14px; }
.type-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 28px 0 20px; }
.type-row span { padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-solid); font-size: 14px; font-weight: 800; }
.quantity { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quantity div { min-height: 132px; padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 11px; border-radius: 18px; background: var(--purple-soft); }
.quantity b { display: block; font-size: 34px; line-height: 1.12; }
.quantity span { display: block; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.workflow-strip { margin-top: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--ink); color: var(--page); font-size: 13px; font-weight: 800; }
.workflow-strip summary { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; }
.workflow-strip summary::-webkit-details-marker { display: none; }
.workflow-strip summary > span { display: grid; gap: 1px; }
.workflow-strip summary b { font-size: 15px; }
.workflow-strip summary small { color: color-mix(in srgb, var(--page) 67%, transparent); font-size: 12px; font-weight: 600; }
.workflow-strip summary > i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--page) 28%, transparent); border-radius: 50%; font-size: 18px; font-style: normal; transition: transform .2s ease; }
.workflow-strip details[open] summary > i { transform: rotate(45deg); }
.workflow-steps { margin: 0; padding: 4px 18px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; list-style: none; }
.workflow-steps li { min-height: 48px; padding: 8px 10px; display: flex; align-items: center; gap: 9px; border-radius: 12px; background: color-mix(in srgb, var(--page) 8%, transparent); line-height: 1.3; }
.workflow-steps li:last-child { grid-column: 1 / -1; }
.workflow-steps li > span { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 50%; background: var(--lime); color: #292d12; font-size: 11px; font-weight: 900; }
.workflow-strip > a { display: block; padding: 12px 18px 14px; border-top: 1px solid color-mix(in srgb, var(--page) 15%, transparent); color: inherit; font-size: 13px; text-decoration: none; }

.assignment-tables { display: grid; gap: 18px; }
.book-table { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--paper); box-shadow: 0 14px 42px rgba(40,34,30,.07); }
.book-table > header { padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.book-table > header div { display: flex; align-items: center; gap: 12px; }
.book-table > header div > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--lime); color: #292d12; font-size: 15px; font-weight: 900; }
.book-table:nth-child(2) > header div > span { background: var(--purple-soft); color: var(--ink); }
.book-table h3 { margin: 0; font-size: 29px; line-height: 1; }
.book-table header small { color: var(--muted); font-weight: 700; }
.table-wrap { padding: 14px 20px 20px; overflow-x: auto; }
.book-table table { width: 100%; min-width: 1000px; table-layout: fixed; border-collapse: separate; border-spacing: 5px; }
.book-table th, .book-table td { height: 52px; padding: 7px 3px; border: 0; border-radius: 11px; text-align: center; }
.book-table th { width: 62px; background: var(--ink); color: var(--page); font-size: 13px; font-weight: 850; }
.book-table td { background: color-mix(in srgb, var(--paper-solid) 78%, transparent); font-size: 14px; font-weight: 800; }
.book-table .owner-row td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.responsive-tables { display: none; }
.owner { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #272420; font-size: 15px; font-weight: 900; }
.owner-xie { background: #f1c56c; }
.owner-li { background: #bed574; }
.owner-luo { background: #c9b7d6; }
.owner-jin { background: #edaa82; }

.weaver-intro .button { margin-top: 12px; }
.steps { display: grid; gap: 18px; }
.step { min-height: 480px; padding: clamp(22px, 4vw, 46px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 70px); align-items: center; border: 1px solid var(--line); border-radius: 32px; background: var(--paper); box-shadow: 0 12px 38px rgba(40,34,30,.06); }
.step.reverse .step-copy { order: 2; }
.step-number { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--lime); color: #292d12; font-size: 14px; font-weight: 900; }
.step h3 { margin: 24px 0 16px; font-size: clamp(31px, 4vw, 48px); line-height: 1.03; }
.step-copy > p { color: var(--muted); font-family: var(--body-zh); font-weight: 600; }
.step-copy > p i { font-family: "Alegreya", Georgia, serif; font-style: italic; font-weight: 500; font-synthesis: none; }
.image-button { position: relative; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--paper-solid); box-shadow: 0 16px 40px rgba(24,20,20,.15); cursor: zoom-in; }
.image-button img { display: block; width: 100%; height: auto; transition: transform .35s ease; }
.image-button:hover img { transform: scale(1.018); }
.image-button span { position: absolute; right: 12px; bottom: 12px; padding: 6px 11px; border-radius: 999px; background: rgba(25,24,22,.78); color: white; font-size: 12px; font-weight: 800; backdrop-filter: blur(8px); }
dl { margin: 24px 0 0; display: grid; gap: 6px; }
dl div { padding: 10px 0; display: grid; grid-template-columns: 105px 1fr; gap: 12px; border-top: 1px solid var(--line); font-size: 14px; }
dt { font-weight: 900; }
dd { margin: 0; color: var(--muted); }
.warning { margin-top: 24px; padding: 15px; border-left: 4px solid var(--orange); border-radius: 8px 16px 16px 8px; background: color-mix(in srgb, var(--orange) 13%, transparent); display: grid; gap: 3px; }
.warning span { color: var(--muted); font-size: 14px; }

footer { margin-top: 100px; padding: 28px 0 44px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer a { color: var(--ink); font-weight: 900; text-decoration: none; }
footer p { margin: 0; }

.lightbox { width: min(1200px, calc(100vw - 30px)); max-width: none; padding: 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; background: rgba(22,21,20,.92); box-shadow: 0 30px 100px rgba(0,0,0,.45); }
.lightbox::backdrop { background: rgba(10,9,9,.7); backdrop-filter: blur(8px); }
.lightbox img { display: block; width: 100%; max-height: 86vh; object-fit: contain; border-radius: 16px; }
.lightbox-close { position: absolute; top: 18px; right: 18px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(10,10,10,.75); color: white; font-size: 27px; line-height: 1; cursor: pointer; }

@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; padding-top: 140px; }
  .hero-board { max-width: 600px; transform: none; }
  .task-grid, .split-heading { grid-template-columns: 1fr; }
  .table-wrap { display: none; }
  .responsive-tables { padding: 14px 16px 18px; display: grid; gap: 10px; }
  .book-table .responsive-mini-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 5px; }
  .book-table .responsive-mini-table th { width: 58px; }
  .step, .step.reverse { grid-template-columns: 1fr; min-height: 0; }
  .step.reverse .step-copy { order: 0; }
}

@media (max-width: 580px) {
  body { font-size: 16px; }
  main, footer { width: min(100% - 24px, 1160px); }
  .site-header { top: 10px; width: calc(100vw - 20px); grid-template-columns: auto 1fr auto; }
  .brand > span:last-child { display: none; }
  .site-header nav { justify-self: center; }
  .site-header nav a { padding: 8px 9px; font-size: 13px; }
  .hero { min-height: auto; padding: 130px 4px 60px; gap: 50px; }
  .hero h1 { font-size: clamp(3.55rem, 19vw, 5.5rem); }
  .section { padding-top: 86px; }
  .section-heading { margin-bottom: 34px; }
  .task-card { border-radius: 25px; }
  .book-table > header { align-items: flex-start; }
  .book-table header small { max-width: 90px; text-align: right; }
  .workflow-steps { grid-template-columns: 1fr; }
  .workflow-steps li:last-child { grid-column: auto; }
  .step { border-radius: 25px; }
  dl div { grid-template-columns: 1fr; gap: 1px; }
  footer { display: grid; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}