:root {
  --view-bg:#fbfbf8;
  --view-alt:#f2f5f1;
  --view-card:rgba(255,255,255,.76);
  --view-ink:#18201d;
  --view-soft:#3e4d42;
  --view-muted:#6f7a73;
  --view-border:rgba(75,96,83,.16);
  --view-sage:#8eaa99;
  --view-coral:#d79a82;
  --view-lemon:#e8e36d;
  --view-blue:#9dbdca;
  --view-mauve:#bda8c0;
  --view-shadow:0 18px 55px rgba(56,75,64,.09), inset 0 1px 0 rgba(255,255,255,.82);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0 !important;
  min-height:100vh;
  padding:0 !important;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--view-sage) 14%, transparent), transparent 28%),
    radial-gradient(circle at 92% 28%, color-mix(in srgb, var(--view-blue) 12%, transparent), transparent 30%),
    var(--view-bg) !important;
  color:var(--view-ink) !important;
  font-family:system-ui,sans-serif !important;
  font-size:16px !important;
  font-weight:400;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
}

.wrap,
.container { width:min(100% - 40px, 860px) !important; max-width:860px !important; margin:0 auto !important; padding:118px 0 96px !important; }

.article-back {
  position:fixed;
  top:22px;
  left:22px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--view-soft);
  box-shadow:var(--view-shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  font-size:.78rem;
  font-weight:500;
  text-decoration:none;
}
.article-back:hover { color:var(--view-ink); transform:translateY(-1px); }

.hero-figure { margin:0 0 48px; }
.hero-figure img { display:block; width:100%; height:auto; border:1px solid var(--view-border); border-radius:26px; box-shadow:var(--view-shadow); }
.hero-figure figcaption { margin-top:10px; color:var(--view-muted); font-size:.76rem; line-height:1.55; }

header { margin-bottom:50px !important; padding:0 0 28px !important; border:0 !important; border-bottom:1px solid var(--view-border) !important; }
header .label,
.eyebrow { color:#5d806d !important; font-size:.72rem !important; font-weight:600 !important; letter-spacing:.16em !important; text-transform:uppercase; }
h1,
header h1 { margin:0 0 18px !important; color:var(--view-ink) !important; font-family:system-ui,sans-serif !important; font-size:clamp(2.1rem,6vw,3.8rem) !important; font-weight:500 !important; letter-spacing:-.045em !important; line-height:1.08 !important; }
.subhead,
header p { max-width:700px !important; margin-bottom:0 !important; color:var(--view-muted) !important; font-size:1rem !important; font-weight:400 !important; line-height:1.75 !important; }
h2,
h3,
.takeaways h3,
.section-title,
.group-title,
.component-title,
.pattern-title,
.rule-title { color:var(--view-ink) !important; font-family:system-ui,sans-serif !important; }
h2 { font-weight:500 !important; }
p,
li,
.lede,
.layer-caption,
.section-body p,
.rule-body,
.concept-card p { color:var(--view-soft) !important; }
strong,
b { color:var(--view-ink) !important; font-weight:600 !important; }

.diagram,
.section,
.component-card,
.pattern-item,
.checklist,
.takeaways,
.rule,
.decision-tree,
.model-card,
.concept-card,
.example-box,
.prompt-anatomy,
.code-block {
  border:1px solid var(--view-border) !important;
  border-radius:24px !important;
  background:var(--view-card) !important;
  box-shadow:var(--view-shadow) !important;
  color:var(--view-ink) !important;
}

.diagram,
.decision-tree,
.checklist,
.takeaways,
.prompt-anatomy { padding:26px !important; }
.section { overflow:hidden; }
.section-header,
.rule-header { background:color-mix(in srgb, var(--view-alt) 82%, transparent) !important; border-color:var(--view-border) !important; }
.section-body,
.rule-body { background:transparent !important; }
.component-card,
.pattern-item,
.concept-card,
.model-card { padding:20px !important; }
.component-card { border-left:4px solid var(--view-sage) !important; }
.component-card.coral { border-left-color:var(--view-coral) !important; }
.component-card.lemon { border-left-color:var(--view-lemon) !important; }
.component-card.teal { border-left-color:var(--view-blue) !important; }

.stage-num,
.section-tag,
.group-tag { border-radius:999px !important; }
.stage-num { background:var(--view-sage) !important; color:#132019 !important; }
.tag-sage { background:color-mix(in srgb, var(--view-sage) 24%, white) !important; color:#466353 !important; }
.tag-coral { background:color-mix(in srgb, var(--view-coral) 24%, white) !important; color:#8a513d !important; }
.tag-gold,
.tag-lemon { background:color-mix(in srgb, var(--view-lemon) 34%, white) !important; color:#736b20 !important; }
.tag-sky { background:color-mix(in srgb, var(--view-blue) 28%, white) !important; color:#466b78 !important; }

.group-num { font-family:system-ui,sans-serif !important; color:color-mix(in srgb, var(--view-sage) 54%, transparent) !important; }
.num-coral { color:color-mix(in srgb, var(--view-coral) 62%, transparent) !important; }
.num-gold,
.num-lemon { color:color-mix(in srgb, var(--view-lemon) 70%, transparent) !important; }
.num-sky { color:color-mix(in srgb, var(--view-blue) 70%, transparent) !important; }

.layer,
.rule-group-header { border-color:var(--view-border) !important; }
.rule-bullet,
.step-dot { box-shadow:0 0 0 5px rgba(255,255,255,.72); }
.bullet-coral,
.dot-coral { background:var(--view-coral) !important; }
.bullet-sage,
.dot-sage { background:var(--view-sage) !important; }
.bullet-gold,
.bullet-lemon,
.dot-lemon { background:var(--view-lemon) !important; }
.bullet-sky,
.dot-sky { background:var(--view-blue) !important; }

table,
.compare-table { width:100%; border-collapse:collapse; color:var(--view-soft) !important; background:rgba(255,255,255,.55) !important; }
th { color:var(--view-ink) !important; background:var(--view-alt) !important; }
td,
th { padding:13px 14px !important; border-color:var(--view-border) !important; }
.section-body { overflow-x:auto; }

.dt-q,
.dt-a { border-color:var(--view-border) !important; }
.dt-q { background:var(--view-alt) !important; color:var(--view-soft) !important; }
.a-n8n,
.a-haiku { background:color-mix(in srgb, var(--view-sage) 22%, white) !important; color:#466353 !important; }
.a-search { background:color-mix(in srgb, var(--view-blue) 24%, white) !important; color:#466b78 !important; }
.a-sonnet { background:color-mix(in srgb, var(--view-lemon) 32%, white) !important; color:#736b20 !important; }
.a-opus { background:color-mix(in srgb, var(--view-coral) 24%, white) !important; color:#8a513d !important; }

.code-block,
.prompt-anatomy { background:#f3ecdc !important; color:#000 !important; overflow-x:auto; }
.code-block *,
.prompt-anatomy * { color:#000 !important; }

/* Diagrams need stronger contrast than surrounding editorial copy. */
.diagram *,
.decision-tree *,
.loop-diagram *,
.layer *,
.model-grid *,
.concept-grid *,
.compare-table *,
.checklist *,
.takeaways * { color:#000 !important; }

.open-weight-section {
  margin:28px 0 64px;
  padding:28px;
  border:1px solid var(--view-border);
  border-radius:24px;
  background:#f3ecdc;
  box-shadow:var(--view-shadow);
}
.open-weight-section h3 { margin:0 0 10px; color:#000; }
.open-weight-section p,
.open-weight-section li { color:#000; }
.open-weight-section a { color:#000; font-weight:600; text-underline-offset:.2em; }
.reasoning-levels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.reasoning-level { padding:15px; border:1px solid rgba(0,0,0,.12); border-radius:16px; background:rgba(255,255,255,.48); color:#000; }
.reasoning-level strong { display:block; margin-bottom:4px; color:#000; }
footer { color:var(--view-muted) !important; border-color:var(--view-border) !important; }
.article-end-nav { width:min(100% - 40px, 860px); margin:54px auto 72px; padding-top:24px; border-top:1px solid var(--view-border); text-align:center; }
.article-end-nav a { color:var(--view-soft); font-weight:500; text-underline-offset:.22em; }

::selection { background:var(--view-lemon); color:var(--view-ink); }

@media (max-width:680px) {
  .wrap,
  .container { width:min(100% - 28px, 860px) !important; padding-top:96px !important; }
  .article-back { top:12px; left:12px; }
  .hero-figure img { border-radius:18px; }
  .concept-grid,
  .model-grid,
  .reasoning-levels { grid-template-columns:1fr !important; }
  .dt-row { display:block !important; }
  .dt-q,
  .dt-a { width:100%; border-radius:8px !important; border:1px solid var(--view-border) !important; }
}

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