:root {
  --ink: #20201e;
  --ink-soft: #2b2a27;
  --paper: #f4f0e8;
  --cream: #e9e2d3;
  --white: #fffdf8;
  --clay: #c96747;
  --clay-dark: #a8472e;
  --yellow: #e8c45a;
  --sage: #78927a;
  --blue: #527a8a;
  --line: #bdb6a9;
  --muted: #65625c;
  --max: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  letter-spacing: 0;
}
a { color: inherit; }
button { color: inherit; font: inherit; }
code, pre, .kicker, .section-index, .official-link, .workbench, .brand-glyph {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2 { font-family: "Songti SC", "Noto Serif CJK SC", serif; letter-spacing: 0; }

.progress { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 3px; }
.progress span { display: block; width: 0; height: 100%; background: var(--yellow); }

.site-header {
  position: sticky;
  z-index: 60;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 64px;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2));
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
}
.brand { display: flex; width: fit-content; gap: 10px; align-items: center; font-weight: 700; text-decoration: none; }
.brand-glyph { display: grid; width: 30px; height: 30px; place-items: center; background: var(--clay); color: var(--white); font-weight: 700; }
.main-nav { display: flex; gap: 30px; }
.main-nav a { color: var(--muted); font-size: 13px; text-decoration: none; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--clay-dark); }
.official-link { justify-self: end; font-size: 11px; text-decoration: none; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
  min-height: calc(100vh - 64px);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(62px, 9vh, 110px) 24px 74px;
  align-items: center;
  gap: clamp(50px, 8vw, 110px);
}
.kicker { margin: 0 0 25px; color: var(--clay-dark); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
h1 { margin: 0; font-size: clamp(52px, 6.6vw, 86px); line-height: 1.04; }
h1 em { color: var(--clay); font-style: normal; }
.hero-lede { max-width: 680px; margin: 30px 0 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.button { display: inline-flex; min-height: 46px; padding: 0 18px; align-items: center; justify-content: center; border: 1px solid var(--ink); font-weight: 700; text-decoration: none; }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: var(--clay); border-color: var(--clay); }
.button-line:hover { background: var(--white); }
.hero-meta { display: grid; grid-template-columns: 1fr 1fr; margin: 48px 0 0; border-top: 1px solid var(--line); }
.hero-meta div { padding: 16px 14px 0 0; }
.hero-meta div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.hero-meta dt { color: var(--clay-dark); font-size: 11px; font-weight: 700; }
.hero-meta dd { margin: 7px 0 0; color: var(--muted); font-size: 12px; }

.workbench { position: relative; border: 1px solid #494844; background: var(--ink); color: #e8e4da; box-shadow: 18px 18px 0 var(--yellow); }
.workbench-top { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 43px; padding: 0 14px; align-items: center; border-bottom: 1px solid #464540; color: #9e9b92; font-size: 10px; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #737069; }
.window-dots i:first-child { background: var(--clay); }
.window-dots i:nth-child(2) { background: var(--yellow); }
.window-dots i:last-child { background: var(--sage); }
.secure { justify-self: end; color: #8fac91; }
.workbench-body { min-height: 500px; padding: 30px; }
.terminal-line { margin: 0; color: var(--white); font-size: 13px; }
.terminal-line span { color: var(--clay); }
.claude-mark { display: grid; width: 76px; height: 76px; margin: 38px auto 12px; place-items: center; border: 1px solid #66635c; transform: rotate(45deg); background: var(--clay); }
.claude-mark span { transform: rotate(-45deg); color: var(--white); font: 700 34px/1 Georgia, serif; }
.terminal-muted { margin: 24px 0; color: #929087; font-size: 11px; text-align: center; }
.terminal-request { margin: 28px 0; padding: 18px; border-left: 3px solid var(--clay); background: #2c2b28; font: 13px/1.8 "PingFang SC", sans-serif; }
.tool-log { padding: 4px 0 18px; border-bottom: 1px solid #464540; }
.tool-log p { margin: 11px 0; color: #c7c3b9; font-size: 11px; }
.tool-log code { color: var(--yellow); }
.ok { color: #8fac91; }
.run { color: var(--yellow); animation: pulse 1.2s ease-in-out infinite; }
.terminal-status { display: flex; justify-content: space-between; margin-top: 18px; color: #88857e; font-size: 9px; }
.terminal-status span:first-child { color: var(--clay); }
.margin-note { position: absolute; display: flex; gap: 8px; padding: 9px 11px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 11px/1.3 "PingFang SC", sans-serif; box-shadow: 4px 4px 0 var(--clay); }
.margin-note b { font-family: monospace; }
.note-one { top: 84px; right: -34px; transform: rotate(2deg); }
.note-two { bottom: 72px; left: -35px; transform: rotate(-2deg); }
@keyframes pulse { 50% { opacity: .35; } }

.principle-strip { display: flex; min-height: 80px; padding: 18px max(24px, calc((100vw - var(--max)) / 2)); align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--yellow); }
.principle-strip p { margin: 0; font: 700 20px/1.2 "Songti SC", serif; }
.principle-strip span { font-size: 13px; font-weight: 700; }
.principle-strip i { font-style: normal; }

.section { padding: 110px max(24px, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid var(--line); }
.section-ink { background: var(--ink); color: var(--white); }
.section-paper { background: var(--paper); }
.section-clay { background: var(--clay); color: var(--ink); }
.section-cream { background: var(--cream); }
.section-head { margin-bottom: 54px; }
.split-head { display: grid; grid-template-columns: 1fr minmax(320px, 450px); gap: 70px; align-items: end; }
.section-index { margin: 0 0 18px; color: var(--clay-dark); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.section-ink .section-index, .section-clay .section-index { color: var(--yellow); }
h2 { max-width: 820px; margin: 0; font-size: clamp(40px, 4.8vw, 64px); line-height: 1.12; }
.split-head > p { margin: 0; color: var(--muted); line-height: 1.85; }
.section-ink .split-head > p { color: #aaa79f; }
.section-clay .split-head > p { color: #3d2c25; }

.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.setup-grid > *, .memory-detail > *, .workflow-picker > *, .split-head > * { min-width: 0; }
.setup-steps { border-top: 1px solid #55534e; }
.setup-steps article { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid #55534e; }
.setup-steps article > span { color: var(--yellow); font: 11px monospace; }
.setup-steps h3 { margin: 0 0 8px; font-size: 20px; }
.setup-steps p { margin: 0; color: #aaa79f; line-height: 1.7; }
.command-sheet { border: 1px solid #5a5852; background: #171715; }
.command-sheet header, .annotated-file header { display: flex; min-height: 46px; padding: 0 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid #4d4b46; color: #9b9890; font: 10px monospace; }
.copy-button { min-width: 58px; min-height: 30px; padding: 0 10px; border: 1px solid currentColor; border-radius: 3px; background: transparent; cursor: pointer; font-size: 11px; }
.copy-button:hover { background: var(--yellow); color: var(--ink); }
.command-sheet pre { min-height: 260px; margin: 0; padding: 28px; overflow-x: auto; color: #d7d3c8; font-size: 13px; line-height: 1.9; }
.command-sheet pre b { color: var(--clay); }
.sheet-tip { margin: 0 24px 24px; padding: 18px; border-top: 3px solid var(--yellow); background: #292825; }
.sheet-tip b { color: var(--yellow); font-size: 12px; }
.sheet-tip p { margin: 9px 0 0; color: #c3bfb5; font-size: 13px; line-height: 1.7; }

.memory-map { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.memory-scope { display: flex; min-width: 0; min-height: 185px; padding: 22px; flex-direction: column; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.memory-scope > span { width: fit-content; padding: 4px 7px; background: var(--ink); color: var(--white); font-size: 11px; }
.memory-scope code { margin-top: 42px; font-size: 11px; overflow-wrap: anywhere; }
.memory-scope p { margin: auto 0 0; color: var(--muted); font-size: 12px; }
.memory-scope.project { background: var(--yellow); }
.memory-scope.project p { color: var(--ink); }
.memory-detail { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; margin-top: 58px; }
.annotated-file { border: 1px solid var(--ink); background: var(--white); }
.annotated-file header { border-color: var(--line); color: var(--muted); }
.annotated-file pre { margin: 0; padding: 28px; overflow-x: auto; font-size: 13px; line-height: 1.85; }
.annotated-file pre span { color: var(--clay-dark); }
.editorial-notes article { padding: 0 0 24px 26px; border-left: 1px solid var(--line); }
.editorial-notes article + article { padding-top: 24px; border-top: 1px solid var(--line); }
.editorial-notes b { color: var(--clay-dark); }
.editorial-notes p { margin: 10px 0 0; color: var(--muted); line-height: 1.75; }
.editorial-notes .accent-note { padding: 24px; border: 0; background: var(--ink); color: var(--white); }
.editorial-notes .accent-note b { color: var(--yellow); }
.editorial-notes .accent-note p { color: #c0bdb4; }

.mode-switcher { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.mode-switcher button { min-height: 62px; border: 0; border-right: 1px solid var(--ink); background: transparent; cursor: pointer; font-weight: 700; }
.mode-switcher button:last-child { border-right: 0; }
.mode-switcher button[aria-selected="true"] { background: var(--ink); color: var(--white); }
.mode-panel { display: grid; grid-template-columns: .8fr 1.25fr auto; gap: 44px; min-height: 250px; padding: 46px; align-items: center; border: 1px solid var(--ink); border-top: 0; background: var(--paper); }
.mode-panel > div span { color: var(--clay-dark); font: 11px monospace; }
.mode-panel h3 { margin: 16px 0 0; font: 700 34px/1.2 "Songti SC", serif; }
.mode-panel p { color: var(--muted); line-height: 1.8; }
.mode-panel > code { padding: 10px 12px; background: var(--ink); color: var(--yellow); font-size: 11px; }
.control-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border-top: 1px solid #71321f; border-left: 1px solid #71321f; }
.control-grid article { min-height: 190px; padding: 25px; border-right: 1px solid #71321f; border-bottom: 1px solid #71321f; }
.control-grid span { font: 700 12px monospace; }
.control-grid h3 { margin: 38px 0 10px; font-size: 21px; }
.control-grid p { margin: 0; color: #4b3129; line-height: 1.7; }

.extension-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.extension { display: flex; min-width: 0; min-height: 370px; padding: 24px; flex-direction: column; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.extension-code { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid var(--ink); font: 700 12px monospace; }
.extension-type { margin: 44px 0 8px; color: var(--muted); font-size: 11px; }
.extension h3 { margin: 0 0 18px; font: 700 30px/1.1 Georgia, serif; }
.extension > p:last-of-type { margin: 0; color: var(--muted); line-height: 1.75; }
.extension small { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.5; }
.extension-skill .extension-code { background: var(--yellow); }
.extension-agent .extension-code { background: var(--clay); color: var(--white); }
.extension-hook .extension-code { background: var(--sage); color: var(--white); }
.extension-mcp .extension-code { background: var(--blue); color: var(--white); }

.workflow-picker { display: grid; grid-template-columns: .72fr 1.28fr; border: 1px solid #5b5953; }
.workflow-tabs { display: flex; flex-direction: column; border-right: 1px solid #5b5953; }
.workflow-tabs button { display: grid; grid-template-columns: 52px 1fr; min-height: 76px; padding: 0 20px; align-items: center; border: 0; border-bottom: 1px solid #5b5953; background: transparent; color: #aaa79f; text-align: left; cursor: pointer; }
.workflow-tabs button:last-child { border-bottom: 0; }
.workflow-tabs button span { color: var(--clay); font: 11px monospace; }
.workflow-tabs button[aria-selected="true"] { background: var(--clay); color: var(--white); }
.workflow-tabs button[aria-selected="true"] span { color: var(--yellow); }
.workflow-result { display: flex; min-height: 410px; padding: 48px; flex-direction: column; background: #191917; }
.workflow-result > p { margin: 0; color: var(--clay); font: 11px monospace; }
.workflow-result h3 { margin: 16px 0 30px; font: 700 34px/1.2 "Songti SC", serif; }
.workflow-result blockquote { margin: 0; color: #d0ccc2; font-size: 17px; line-height: 1.9; }
.workflow-footer { display: flex; margin-top: auto; padding-top: 26px; align-items: center; justify-content: space-between; border-top: 1px solid #4e4c47; color: #99968e; font-size: 11px; }
.light-copy { color: var(--white); }
.loop-line { display: grid; grid-template-columns: repeat(9, auto); gap: 16px; margin-top: 52px; align-items: center; justify-content: space-between; }
.loop-line span { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.loop-line b { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #65625b; color: var(--yellow); font: 10px monospace; }
.loop-line i { color: #77746c; font-style: normal; }

.reference-section { background: var(--paper); }
.command-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.command-grid article { display: grid; grid-template-columns: 105px 1fr; min-height: 95px; padding: 20px; align-items: center; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.command-grid code { color: var(--clay-dark); font-size: 13px; font-weight: 700; }
.command-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.closing-section { position: relative; display: grid; min-height: 620px; padding: 90px max(24px, calc((100vw - var(--max)) / 2)); align-content: center; background: var(--yellow); overflow: hidden; }
.closing-section::after { content: "C"; position: absolute; right: max(20px, calc((100vw - var(--max)) / 2)); bottom: -110px; color: color-mix(in srgb, var(--clay) 38%, transparent); font: 700 520px/1 Georgia, serif; pointer-events: none; }
.closing-section p { position: relative; z-index: 1; margin: 0 0 26px; font: 11px monospace; }
.closing-section h2 { position: relative; z-index: 1; max-width: 850px; font-size: clamp(48px, 6vw, 78px); }
.closing-section a { position: relative; z-index: 1; width: fit-content; margin-top: 38px; font-weight: 700; text-underline-offset: 6px; }
.site-footer { display: flex; padding: 26px max(24px, calc((100vw - var(--max)) / 2)); justify-content: space-between; gap: 24px; background: var(--ink); color: #9d9a92; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .run { animation: none; }
}

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 780px; }
  .workbench { width: min(720px, calc(100% - 20px)); margin: 0 auto; }
  .principle-strip { flex-wrap: wrap; justify-content: center; }
  .principle-strip p { width: 100%; text-align: center; }
  .setup-grid, .memory-detail { grid-template-columns: 1fr; }
  .memory-map, .extension-grid { grid-template-columns: 1fr 1fr; }
  .mode-panel { grid-template-columns: 1fr 1fr; }
  .mode-panel > code { grid-column: 1 / -1; }
  .loop-line { grid-template-columns: repeat(5, auto); }
  .loop-line i:nth-of-type(n+3), .loop-line span:nth-of-type(n+4) { display: none; }
}

@media (max-width: 700px) {
  .site-header { min-height: 58px; padding-inline: 16px; }
  .official-link { font-size: 10px; }
  .hero { min-height: auto; padding: 56px 18px 70px; gap: 58px; }
  h1 { font-size: 48px; }
  .hero-meta { grid-template-columns: 1fr; }
  .hero-meta div + div { margin-top: 14px; padding-left: 0; border-left: 0; }
  .workbench { width: calc(100% - 12px); box-shadow: 10px 10px 0 var(--yellow); }
  .workbench-top { grid-template-columns: 1fr auto; }
  .workbench-top > span:nth-child(2) { display: none; }
  .workbench-body { min-height: 455px; padding: 22px 18px; }
  .margin-note { display: none; }
  .terminal-status { gap: 10px; }
  .principle-strip i { display: none; }
  .principle-strip span { width: calc(50% - 12px); text-align: center; }
  .section { padding: 78px 18px; }
  .split-head { grid-template-columns: 1fr; gap: 28px; }
  h2 { font-size: 40px; }
  .setup-grid { gap: 40px; }
  .command-sheet pre { padding: 20px; font-size: 11px; }
  .annotated-file pre { padding: 20px; font-size: 11px; }
  .memory-map, .extension-grid, .control-grid, .command-grid { grid-template-columns: 1fr; }
  .memory-scope { min-height: 150px; }
  .memory-scope code { margin-top: 28px; }
  .extension { min-height: 320px; }
  .mode-switcher { grid-template-columns: 1fr; }
  .mode-switcher button { border-right: 0; border-bottom: 1px solid var(--ink); }
  .mode-switcher button:last-child { border-bottom: 0; }
  .mode-panel { grid-template-columns: 1fr; padding: 28px; }
  .mode-panel > code { grid-column: auto; max-width: 100%; overflow-x: auto; }
  .workflow-picker { grid-template-columns: 1fr; }
  .workflow-tabs { border-right: 0; border-bottom: 1px solid #5b5953; }
  .workflow-result { min-height: 480px; padding: 30px 24px; }
  .workflow-result blockquote { font-size: 15px; }
  .loop-line { grid-template-columns: 1fr; justify-items: start; }
  .loop-line i { display: none; }
  .loop-line span:nth-of-type(n) { display: flex; }
  .command-grid article { grid-template-columns: 95px 1fr; }
  .closing-section { min-height: 570px; padding: 70px 18px; }
  .closing-section h2 { font-size: 47px; }
  .closing-section::after { right: -70px; font-size: 360px; }
  .site-footer { flex-direction: column; padding-inline: 18px; }
}