学术科普风

You are a Distill Style (academic explainer) design expert. This style translates journal-grade paper typography into web-native layouts, modeled on Distill.pub.

## Absolute Rules
- Background: pure white #FFFFFF; secondary surfaces only #F3F4F6
- Body text: font-serif, color #1F2933, column locked at max-w-[42rem] mx-auto, leading-[1.75]
- Academic blue #2A7AE2 is reserved for links, numbered citations, and key emphasis only
- Chart orange #E4572E is reserved for data emphasis inside figures only
- Sidenotes: xl:absolute floating in the right margin as small gray sans text; inline light-gray blocks below xl
- Citations: superscript [1] in academic blue, resolved in a numbered references list at the page end
- Figures break the measure: max-w-4xl mx-auto, always followed by a hairline-topped figcaption starting with "Fig. N:"
- Byline block: authors / affiliations / date / DOI as a hairline-divided meta grid with uppercase tracked labels
- Tables: complete 2px outer frame, complete 1px cell borders, no zebra striping
- Radius: rounded-md maximum; shadows: shadow-sm maximum

## Forbidden
- Gradients of any kind (bg-gradient-*)
- Heavy or colored shadows (shadow-lg, shadow-2xl)
- Radii beyond rounded-md
- Full-width body text (prose wider than 42rem)
- Sans-serif body copy (sans is only for UI labels and metadata)
- Decorative color fields, zebra tables, vertical table rules

## Layout & Spacing
- Section rhythm: py-12 md:py-16 between article blocks
- Prose column: max-w-[42rem]; figure column: max-w-4xl; page shell: max-w-5xl
- Hairlines (border-[#E5E7EB]) separate every metadata region

## Responsive
- Mobile: sidenotes collapse inline as bordered light-gray asides; figures go full-width with horizontal scroll for wide tables
- Desktop (xl+): sidenotes float into the right margin; the prose column stays centered

## Self-Check Verification
After generating code, verify:
1. Body text is serif, no wider than 42rem, with leading-[1.75]
2. Blue appears only on links/citations/emphasis; orange appears only on data
3. Every figure has a numbered figcaption; every citation number resolves in the references
4. No gradients, no shadows above shadow-sm, no radius above rounded-md
5. Tables have horizontal rules only
6. All interactive elements have visible hover and focus states

.distill-style-article {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #1F2933;
}
.distill-style-article p + p {
  margin-top: 1.25rem;
}
.distill-style-cite {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  color: #2A7AE2;
  text-decoration: none;
  cursor: pointer;
}
.distill-style-cite:hover {
  text-decoration: underline;
}
.distill-style-sidenote {
  display: block;
  margin: 1rem 0;
  padding: 0.625rem 0.875rem;
  border: 2px solid rgba(42, 122, 226, 0.4);
  border-radius: 0.125rem;
  background: #F3F4F6;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #6B7280;
}
@media (min-width: 1280px) {
  .distill-style-sidenote {
    position: absolute;
    top: 0;
    right: -14rem;
    width: 12rem;
    margin: 0;
    padding: 0.5rem 0 0 0;
    border: none;
    border: 1px solid #E5E7EB;
    background: transparent;
    font-size: 0.75rem;
  }
}
.distill-style-figure {
  max-width: 56rem;
  margin: 2.5rem auto;
}
.distill-style-figcaption {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border: 1px solid #E5E7EB;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #6B7280;
}
.distill-style-table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #1F2933;
  border: 2px solid #1F2933;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
}
.distill-style-table thead th {
  border: 1px solid #1F2933;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-weight: 600;
  color: #1F2933;
}
.distill-style-table tbody td {
  padding: 0.5rem 0.75rem;
  color: #1F2933;
}
.distill-style-hairline {
  border: none;
  border: 1px solid #E5E7EB;
}
.distill-style-smallcaps {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B7280;
}

{
  "border": {
    "width": "border",
    "color": "border-[#E5E7EB]",
    "radius": "rounded-md",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-sm",
    "md": "shadow-sm",
    "lg": "shadow-sm",
    "none": "shadow-none",
    "hover": "hover:shadow-sm",
    "focus": "focus:shadow-none",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-colors duration-150",
    "active": "active:bg-[#E5E7EB]",
    "hoverOpacity": "hover:bg-[#F3F4F6]"
  },
  "typography": {
    "heading": "font-serif font-semibold text-[#1F2933] tracking-tight",
    "body": "font-serif text-[#1F2933] leading-[1.75]",
    "mono": "font-mono text-[#6B7280] text-sm",
    "sizes": {
      "hero": "text-3xl md:text-4xl lg:text-5xl",
      "h1": "text-3xl md:text-4xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-lg md:text-xl",
      "body": "text-base md:text-[1.0625rem]",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-12 md:py-16",
    "container": "px-4 md:px-6",
    "card": "p-5 md:p-6",
    "gap": {
      "sm": "gap-2",
      "md": "gap-4",
      "lg": "gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-white",
      "secondary": "bg-[#F3F4F6]",
      "accent": [
        "bg-[#2A7AE2]",
        "bg-[#E4572E]",
        "bg-[#F3F4F6]",
        "bg-[#1F2933]"
      ]
    },
    "text": {
      "primary": "text-[#1F2933]",
      "secondary": "text-[#6B7280]",
      "muted": "text-[#9CA3AF]"
    },
    "button": {
      "primary": "bg-[#1F2933] text-white",
      "secondary": "bg-white text-[#1F2933] border border-[#E5E7EB]"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "shadow-2xl",
      "bg-gradient-to-r",
      "bg-gradient-to-br",
      "bg-gradient-to-b"
    ],
    "patterns": [
      "^rounded-(?:lg|xl|2xl|3xl|full)$",
      "^shadow-(?:md|lg|xl|2xl|inner)$",
      "^bg-gradient"
    ],
    "reasons": {
      "rounded-xl": "Distill Style caps radii at rounded-md; paper layouts prefer square corners",
      "rounded-full": "Distill Style avoids pill shapes; hierarchy comes from typography, not geometry",
      "shadow-lg": "Distill Style separates regions with hairlines, not elevation",
      "bg-gradient-to-r": "Academic surfaces are flat white or #F3F4F6; gradients are forbidden"
    }
  },
  "required": {
    "button": [
      "rounded-md",
      "text-sm font-medium",
      "transition-colors duration-150"
    ],
    "card": [
      "bg-white",
      "border border-[#E5E7EB]",
      "rounded-md"
    ],
    "input": [
      "bg-white",
      "border border-[#E5E7EB]",
      "rounded-md",
      "focus:outline-none focus:border-[#2A7AE2] focus:ring-1 focus:ring-[#2A7AE2]/30"
    ]
  }
}