:root {
  --ink: #171411;
  --paper: #f2eadc;
  --paper-deep: #e8ddcb;
  --muted: #6f675d;
  --line: rgba(23, 20, 17, 0.18);
  --red: #df442c;
  --blue: #3867ff;
  --green: #5e9c49;
  --max: 840px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

a { color: inherit; }

.article-topbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px max(24px, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid var(--line);
}

.article-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 850;
}

.article-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 950;
  box-shadow: 4px 4px 0 var(--red);
}

.article-topbar > span {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.76rem;
}

.article-hero {
  padding: clamp(78px, 13vh, 150px) 24px clamp(58px, 10vh, 110px);
  border-bottom: 1px solid var(--line);
}

.article-hero-inner,
.article-body,
.article-footer-inner { width: min(100%, var(--max)); margin: 0 auto; }

.article-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--green);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 850;
}

.article-kicker::before { content: ""; width: 28px; height: 5px; background: var(--red); }

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  max-width: 720px;
  margin-bottom: 24px;
  font-size: clamp(3rem, 8vw, 6.3rem);
  line-height: 0.92;
  letter-spacing: 0;
  font-weight: 950;
}

h1 span { color: var(--blue); }

.article-summary {
  max-width: 610px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1.12rem, 2.2vw, 1.42rem);
  line-height: 1.72;
}

.article-body { padding: 68px 0 92px; }

.article-body > section { padding: 0 0 48px; margin-bottom: 48px; border-bottom: 1px solid var(--line); }
.article-body > section:last-child { margin-bottom: 0; }

.section-label {
  margin: 0 0 14px;
  color: var(--red);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 850;
}

h2 { margin-bottom: 24px; font-size: clamp(1.75rem, 4vw, 2.65rem); line-height: 1.13; letter-spacing: 0; }
h3 { margin-bottom: 10px; font-size: 1.16rem; line-height: 1.35; }
.article-body p,
.article-body li { color: rgba(23, 20, 17, 0.72); font-size: 1.02rem; line-height: 1.85; }
.article-body p:last-child { margin-bottom: 0; }
.article-body strong { color: var(--ink); }
code { padding: 0.08em 0.28em; background: var(--paper-deep); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.9em; }

.three-ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 34px; border-top: 2px solid var(--ink); }
.three-ideas article { min-height: 184px; padding: 22px 24px 12px 0; border-right: 1px solid var(--line); }.three-ideas article + article { padding-left: 24px; }.three-ideas article:last-child { border-right: 0; }.three-ideas span { color: var(--red); font-family: ui-monospace, monospace; font-size: 0.72rem; font-weight: 900; }.three-ideas article:nth-child(2) span { color: var(--blue); }.three-ideas article:nth-child(3) span { color: var(--green); }.three-ideas h3 { margin-top: 28px; }.three-ideas p { margin: 0; font-size: 0.92rem; line-height: 1.65; }

.model-table { margin-top: 28px; border-top: 1px solid var(--ink); }.model-table article { display: grid; grid-template-columns: 198px 150px 1fr; gap: 20px; align-items: center; min-height: 74px; border-bottom: 1px solid var(--line); }.model-table code { width: fit-content; background: transparent; padding: 0; font-size: 0.98rem; font-weight: 850; }.model-table strong { font-size: 0.94rem; }.model-table p { margin: 0; font-size: 0.9rem; }.model-table article:nth-child(1) code { color: var(--red); }.model-table article:nth-child(2) code { color: var(--blue); }.model-table article:nth-child(3) code { color: var(--green); }

.update-list { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.update-list li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }.update-list li::before { content: counter(list-item, decimal-leading-zero); color: var(--blue); font-family: ui-monospace, monospace; font-size: 0.76rem; font-weight: 900; }.update-list h3 { margin: 0 0 7px; }.update-list p { margin: 0; font-size: 0.96rem; line-height: 1.72; }

.article-note { padding: 23px 26px; border-left: 4px solid var(--blue); background: var(--paper-deep); }.article-note p { margin: 0; }.article-note strong { color: var(--blue); }

.use-list { margin: 0; padding: 0; list-style: none; counter-reset: use; }.use-list li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }.use-list li::before { counter-increment: use; content: "0" counter(use); color: var(--red); font-family: ui-monospace, monospace; font-size: 0.76rem; font-weight: 900; }

.article-footer { padding: 32px 24px; background: var(--ink); color: var(--paper); }.article-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.article-footer p { margin: 0; font-size: 0.88rem; }.article-footer a { color: var(--green); font-size: 0.88rem; }

@media (max-width: 640px) {
  .article-topbar { min-height: 66px; padding: 14px 18px; }.article-topbar > span { font-size: 0.65rem; }.article-brand { gap: 9px; font-size: 0.9rem; }.article-mark { width: 32px; height: 32px; font-size: 0.7rem; }
  .article-hero { padding: 78px 18px 60px; }.article-body { padding: 46px 18px 64px; }.article-body > section { padding-bottom: 36px; margin-bottom: 36px; }.article-summary { font-size: 1.05rem; }.article-body p, .article-body li { font-size: 0.96rem; line-height: 1.78; }
  .three-ideas { grid-template-columns: 1fr; }.three-ideas article, .three-ideas article + article { min-height: auto; padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }.three-ideas article:last-child { border-bottom: 0; }.three-ideas h3 { margin: 12px 0 7px; }.three-ideas p { font-size: 0.9rem; }
  .model-table article { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }.model-table p { font-size: 0.86rem; }
  .update-list li { grid-template-columns: 30px 1fr; gap: 10px; }.article-note { padding: 19px; }.article-footer { padding: 22px 18px; }.article-footer-inner { align-items: flex-start; flex-direction: column; gap: 10px; }
}