Function bodies 615 total

function TierBadge({ tier, label }) {
  const colors = { 1: C.green, 2: C.amber, 3: C.violet };
  return (
    <span style={{ fontFamily: font.mono, fontSize: 9, padding: "2px 7px", borderRadius: 3, background: (colors[tier] || C.creamDim) + "18", color: colors[tier] || C.creamDim, letterSpacing: "0.06em" }}>
      T{tier} · {label}
    </span>
  );
}

function Quote({ text, source }) {
  return (
    <div style={{ borderLeft: `2px solid ${C.crimson}`, paddingLeft: 14, margin: "10px 0" }}>
      <p style={{ fontFamily: font.body, fontSize: 13, color: C.creamHigh, lineHeight: 1.6, fontStyle: "italic", margin: 0 }}>"{text}"</p>
      {source && <p style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, marginTop: 4, letterSpacing: "0.06em" }}>— {source}</p>}
    </div>
  );
}

function StatBlock({ items }) {
  return (
    <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 20 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 6, padding: "12px 16px", flex: "1 1 120px", minWidth: 100 }}>
          <div style={{ fontFamily: font.mono, fontSize: 22, fontWeight: 700, color: C.cream, lineHeight: 1 }}>{item.value}</div>
          <div style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 4 }}>{item.label}</div>
        </div>
      ))}
    </div>
  );
}

function ResponseCard({ response }) {
  const [open, setOpen] = useState(false);
  const m = models[response.id];
  if (!m) return null;
  return (
    <div style={{ background: C.card, border: `1px solid ${open ? m.color + "30" : C.border}`, borderRadius: 7, marginBottom: 6, transition: "border-color 0.2s" }}>
      <button onClick={() => setOpen(!open)} style={{ width: "100%", padding: "14px 18px", background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: 12, textAlign: "left" }}>
        <div style={{ width: 6, height: 6, borderRadius: 2, background: m.color, flexShrink: 0 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            <span style={{ fontFamily: font.mono, fontSize: 12, fontWeight: 600, color: m.color }}>{m.name}</span>
            <span style={{ fontFamily: font.body, fontSize: 11, color: C.creamDim, fontStyle: "italic" }}>{m.persona

function ConvergenceBlock({ items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 7, padding: "14px 18px", display: "flex", gap: 14, alignItems: "flex-start" }}>
          <div style={{ fontFamily: font.mono, fontSize: 16, fontWeight: 700, color: C.green, flexShrink: 0, minWidth: 40, textAlign: "center" }}>{item.count}</div>
          <div>
            <div style={{ fontFamily: font.display, fontSize: 13, fontWeight: 600, color: C.cream, marginBottom: 3 }}>{item.point}</div>
            <p style={{ fontFamily: font.body, fontSize: 12, color: C.creamDim, lineHeight: 1.6 }}>{item.detail}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function DivergenceBlock({ items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 7, padding: "16px 18px" }}>
          <div style={{ fontFamily: font.display, fontSize: 14, fontWeight: 600, color: C.amber, marginBottom: 12 }}>{item.topic}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {item.positions.map((pos, j) => (
              <div key={j} style={{ paddingLeft: 12, borderLeft: `2px solid ${j === 0 ? C.green : j === 1 ? C.amber : C.violet}30` }}>
                <div style={{ fontFamily: font.mono, fontSize: 10, color: j === 0 ? C.green : j === 1 ? C.amber : C.violet, letterSpacing: "0.06em", marginBottom: 4 }}>{pos.camp}</div>
                <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 4 }}>
                  {pos.models.map(mid => <ModelBad

function TierBlock({ tiers }) {
  const tierColors = { 1: C.green, 2: C.amber, 3: C.violet };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {tiers.groups.map((group, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${(tierColors[group.tier] || C.creamDim)}30`, borderRadius: 7, padding: "14px 18px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
            <span style={{ fontFamily: font.mono, fontSize: 20, fontWeight: 700, color: tierColors[group.tier] }}>T{group.tier}</span>
            <span style={{ fontFamily: font.display, fontSize: 13, fontWeight: 600, color: C.cream }}>{group.label}</span>
          </div>
          <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 8 }}>
            {group.models.map(mid => <ModelBadge key={mid} modelId={mid} />)}
          </div>
          <p style={{ fontFamily: font.body, fontSize: 12, color: C.creamDim, 

function BlindSpotBlock({ items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.crimsonFaint, border: `1px solid ${C.crimson}25`, borderRadius: 6, padding: "12px 16px", display: "flex", gap: 10, alignItems: "flex-start" }}>
          <span style={{ fontFamily: font.mono, fontSize: 12, color: C.crimson, flexShrink: 0, marginTop: 1 }}>∅</span>
          <p style={{ fontFamily: font.body, fontSize: 12, color: C.creamMid, lineHeight: 1.6 }}>{item}</p>
        </div>
      ))}
    </div>
  );
}

function AccentLedgerView({ entries }) {
  const tagColors = { signature: C.blue, tic: C.amber, gravity: C.green, quirk: C.violet, blindspot: C.crimson, partner: C.teal, divergence: C.rose };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
      {entries.map((entry, i) => {
        const m = models[entry.model];
        return (
          <div key={i} style={{ display: "flex", gap: 8, alignItems: "flex-start", padding: "6px 10px", background: i % 2 === 0 ? "transparent" : C.creamGhost, borderRadius: 3 }}>
            <span style={{ fontFamily: font.mono, fontSize: 9, color: m?.color || C.creamDim, minWidth: 62, flexShrink: 0, paddingTop: 2 }}>{m?.name || entry.model}</span>
            <span style={{ fontFamily: font.mono, fontSize: 8, padding: "2px 5px", borderRadius: 2, background: (tagColors[entry.tag] || C.creamDim) + "18", color: tagColors[entry.tag] || C.creamDim, flexShrink: 0, letterSpacing: "0.04em" }}>{entry.tag}</span>
            <span styl

export default function CouncilReview06() {
  const [tab, setTab] = useState("synthesis");
  const tabs = [
    { id: "synthesis", label: "Synthesis" },
    { id: "responses", label: "Responses (10)" },
    { id: "accents", label: "Accent Ledger" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: C.navy, color: C.cream, padding: "32px 24px 48px" }}>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>
        {/* Header */}
        <div style={{ marginBottom: 28 }}>
          <div style={{ fontFamily: font.mono, fontSize: 10, color: C.crimson, letterSpacing: "0.25em", textTransform: "uppercase", marginBottom: 6 }}>
            DDL Council Review #{review.number}
          </div>
          <h1 style={{ fontFamily: font.display, fontSize: 26, fontWeight: 700, color: C.cream, marginBottom: 4, lineHeight: 1.2 }}>
            {review.title}
          </h1>
          <p style={{ fontFamily: font.body, fontSize: 14, color: C.creamMid, lineHeight: 1.6, maxWidth: 640 }}>
 

function SectionHead({ label, color = C.crimson }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20, marginTop: 32 }}>
      <div style={{ width: 28, height: 28, borderRadius: 5, background: color + "20", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{ width: 8, height: 8, borderRadius: 2, background: color }} />
      </div>
      <span style={{ fontFamily: font.mono, fontSize: 11, letterSpacing: "0.15em", color: C.creamMid, textTransform: "uppercase" }}>{label}</span>
      <div style={{ flex: 1, height: 1, background: C.border }} />
    </div>
  );
}

function ModelBadge({ modelId }) {
  const m = models[modelId];
  if (!m) return null;
  return (
    <span style={{ fontFamily: font.mono, fontSize: 10, padding: "3px 8px", borderRadius: 3, background: m.color + "18", color: m.color, letterSpacing: "0.04em" }}>{m.name}</span>
  );
}

function TierBadge({ tier, label }) {
  const colors = { 1: C.green, 2: C.amber, 3: C.violet };
  return (
    <span style={{ fontFamily: font.mono, fontSize: 9, padding: "2px 7px", borderRadius: 3, background: (colors[tier] || C.creamDim) + "18", color: colors[tier] || C.creamDim, letterSpacing: "0.06em" }}>T{tier} · {label}</span>
  );
}

function Quote({ text, source }) {
  return (
    <div style={{ borderLeft: `2px solid ${C.crimson}`, paddingLeft: 14, margin: "10px 0" }}>
      <p style={{ fontFamily: font.body, fontSize: 13, color: C.creamHigh, lineHeight: 1.6, fontStyle: "italic", margin: 0 }}>"{text}"</p>
      {source && <p style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, marginTop: 4, letterSpacing: "0.06em" }}>— {source}</p>}
    </div>
  );
}

function StatBlock({ items }) {
  return (
    <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 20 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 6, padding: "12px 16px", flex: "1 1 120px", minWidth: 100 }}>
          <div style={{ fontFamily: font.mono, fontSize: 22, fontWeight: 700, color: C.cream, lineHeight: 1 }}>{item.value}</div>
          <div style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 4 }}>{item.label}</div>
        </div>
      ))}
    </div>
  );
}

function ResponseCard({ response }) {
  const [open, setOpen] = useState(false);
  const m = models[response.id];
  if (!m) return null;
  return (
    <div style={{ background: C.card, border: `1px solid ${open ? m.color + "30" : C.border}`, borderRadius: 7, marginBottom: 6, transition: "border-color 0.2s" }}>
      <button onClick={() => setOpen(!open)} style={{ width: "100%", padding: "14px 18px", background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: 12, textAlign: "left" }}>
        <div style={{ width: 6, height: 6, borderRadius: 2, background: m.color, flexShrink: 0 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            <span style={{ fontFamily: font.mono, fontSize: 12, fontWeight: 600, color: m.color }}>{m.name}</span>
            <span style={{ fontFamily: font.body, fontSize: 11, color: C.creamDim, fontStyle: "italic" }}>{m.persona

function ConvergenceBlock({ items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 7, padding: "14px 18px", display: "flex", gap: 14, alignItems: "flex-start" }}>
          <div style={{ fontFamily: font.mono, fontSize: 16, fontWeight: 700, color: C.green, flexShrink: 0, minWidth: 40, textAlign: "center" }}>{item.count}</div>
          <div>
            <div style={{ fontFamily: font.display, fontSize: 13, fontWeight: 600, color: C.cream, marginBottom: 3 }}>{item.point}</div>
            <p style={{ fontFamily: font.body, fontSize: 12, color: C.creamDim, lineHeight: 1.6 }}>{item.detail}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function DivergenceBlock({ items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 7, padding: "16px 18px" }}>
          <div style={{ fontFamily: font.display, fontSize: 14, fontWeight: 600, color: C.amber, marginBottom: 12 }}>{item.topic}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {item.positions.map((pos, j) => {
              const posColors = [C.green, C.amber, C.violet];
              return (
                <div key={j} style={{ paddingLeft: 12, borderLeft: `2px solid ${posColors[j % 3]}30` }}>
                  <div style={{ fontFamily: font.mono, fontSize: 10, color: posColors[j % 3], letterSpacing: "0.06em", marginBottom: 4 }}>{pos.camp}</div>
                  <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 4 }}>
                    {po

function TierBlock({ tiers }) {
  const tierColors = { 1: C.green, 2: C.amber, 3: C.violet };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {tiers.groups.map((group, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${(tierColors[group.tier] || C.creamDim)}30`, borderRadius: 7, padding: "14px 18px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
            <span style={{ fontFamily: font.mono, fontSize: 20, fontWeight: 700, color: tierColors[group.tier] }}>T{group.tier}</span>
            <span style={{ fontFamily: font.display, fontSize: 13, fontWeight: 600, color: C.cream }}>{group.label}</span>
          </div>
          <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 8 }}>
            {group.models.map(mid => <ModelBadge key={mid} modelId={mid} />)}
          </div>
          <p style={{ fontFamily: font.body, fontSize: 12, color: C.creamDim, 

function BlindSpotBlock({ items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.crimsonFaint, border: `1px solid ${C.crimson}25`, borderRadius: 6, padding: "12px 16px", display: "flex", gap: 10, alignItems: "flex-start" }}>
          <span style={{ fontFamily: font.mono, fontSize: 12, color: C.crimson, flexShrink: 0, marginTop: 1 }}>∅</span>
          <p style={{ fontFamily: font.body, fontSize: 12, color: C.creamMid, lineHeight: 1.6 }}>{item}</p>
        </div>
      ))}
    </div>
  );
}

function AccentLedgerView({ entries }) {
  const tagColors = { signature: C.blue, tic: C.amber, gravity: C.green, quirk: C.violet, blindspot: C.crimson, partner: C.teal, divergence: C.rose };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
      {entries.map((entry, i) => {
        const m = models[entry.model];
        return (
          <div key={i} style={{ display: "flex", gap: 8, alignItems: "flex-start", padding: "6px 10px", background: i % 2 === 0 ? "transparent" : C.creamGhost, borderRadius: 3 }}>
            <span style={{ fontFamily: font.mono, fontSize: 9, color: m?.color || C.creamDim, minWidth: 62, flexShrink: 0, paddingTop: 2 }}>{m?.name || entry.model}</span>
            <span style={{ fontFamily: font.mono, fontSize: 8, padding: "2px 5px", borderRadius: 2, background: (tagColors[entry.tag] || C.creamDim) + "18", color: tagColors[entry.tag] || C.creamDim, flexShrink: 0, letterSpacing: "0.04em" }}>{entry.tag}</span>
            <span styl

export default function CouncilReview07() {
  const [tab, setTab] = useState("synthesis");
  const tabs = [
    { id: "synthesis", label: "Synthesis" },
    { id: "responses", label: "Responses (10)" },
    { id: "accents", label: "Accent Ledger" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: C.navy, color: C.cream, padding: "32px 24px 48px" }}>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>
        {/* Header */}
        <div style={{ marginBottom: 28 }}>
          <div style={{ fontFamily: font.mono, fontSize: 10, color: C.crimson, letterSpacing: "0.25em", textTransform: "uppercase", marginBottom: 6 }}>
            DDL Council Review #{review.number}
          </div>
          <h1 style={{ fontFamily: font.display, fontSize: 26, fontWeight: 700, color: C.cream, marginBottom: 4, lineHeight: 1.2 }}>
            {review.title}
          </h1>
          <p style={{ fontFamily: font.body, fontSize: 14, color: C.creamMid, lineHeight: 1.6, maxWidth: 640 }}>
 

function SectionHead({ num, title, color = C.crimson }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, marginTop: 36 }}>
      <div style={{
        width: 28, height: 28, borderRadius: 5,
        background: color + "20",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: font.body, fontSize: 14, fontWeight: 600, color,
      }}>{num}</div>
      <span style={{ fontFamily: font.display, fontSize: 17, fontWeight: 700, color: C.cream }}>{title}</span>
      <div style={{ flex: 1, height: 1, background: C.border }} />
    </div>
  );
}

function Quote({ text, source, color = C.crimson }) {
  return (
    <div style={{ borderLeft: `2px solid ${color}`, paddingLeft: 14, margin: "12px 0" }}>
      <p style={{ fontFamily: font.body, fontSize: 13, color: C.creamHigh, lineHeight: 1.7, fontStyle: "italic" }}>"{text}"</p>
      {source && <p style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, letterSpacing: "0.1em", marginTop: 4, textTransform: "uppercase" }}>— {source}</p>}
    </div>
  );
}

function ModelBadge({ model, small }) {
  const m = models.find(x => x.model === model || x.id === model || x.name === model);
  if (!m) return null;
  return (
    <span style={{
      fontFamily: font.mono, fontSize: small ? 9 : 10, fontWeight: 600,
      padding: small ? "1px 6px" : "2px 8px", borderRadius: 3,
      background: m.color + "20", color: m.color,
      letterSpacing: "0.04em",
    }}>{m.model}</span>
  );
}

function TemplateView() {
  const fields = [
    { section: "HEADER", fields: [
      { name: "Review ID", desc: "Unique slug for the review session", example: "profile-pages-react" },
      { name: "Title", desc: "Human-readable review title", example: "Council Reacts: Profile Pages" },
      { name: "Date", desc: "Date of review dispatch", example: "2026-03-01" },
      { name: "Subject", desc: "What was reviewed — artifact, page, system, decision", example: "Council Member Profile Pages on dropdownlogistics.com" },
    ]},
    { section: "DISPATCH", fields: [
      { name: "Prompt", desc: "The exact prompt sent to all models", example: "What do you think? [URLs]" },
      { name: "Context", desc: "Framing and constraints given (or deliberately withheld)", example: "No framing — just URLs and the question" },
    ]},
    { section: "RAW RESPONSES (×9)", fields: [
      { name: "Model ID", desc: "Code + persona name + model name", example: "1002_Claude — Marcus Caldwell" },
      { na

function MethodologyView() {
  return (
    <div>
      <SectionHead num="I" title="The Process" />
      <p style={{ fontFamily: font.body, fontSize: 14, color: C.creamMid, lineHeight: 1.8, marginBottom: 14 }}>
        A council review is a convergence test. One prompt, nine models, zero coordination between them. The responses arrive like independent audit reports. Nobody sees what the others said. The value isn't in any single response — it's in the pattern that emerges when you lay all nine side by side.
      </p>
      <p style={{ fontFamily: font.body, fontSize: 14, color: C.creamMid, lineHeight: 1.8, marginBottom: 14 }}>
        The operator — Dave — writes a prompt, sends it to every model in the council, collects the responses, and then synthesizes. The synthesis is where the methodology lives. Not summarizing. Synthesizing. Finding what converged, where they split, and what nobody caught.
      </p>

      <SectionHead num="II" title="The Three Tiers" color={C.blue} />
     

function ReviewView() {
  const [expandedModel, setExpandedModel] = useState(null);
  const r = review;

  return (
    <div>
      {/* Header */}
      <div style={{ marginBottom: 24 }}>
        <div style={{ fontFamily: font.mono, fontSize: 9, color: C.crimson, letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 6 }}>
          Council Review #{r.slug}
        </div>
        <h2 style={{ fontFamily: font.display, fontSize: 22, fontWeight: 700, color: C.cream, marginBottom: 4 }}>{r.title}</h2>
        <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim }}>
          {r.date} · {r.subject} · 9 models · {r.responses.reduce((a, b) => a + b.wordCount, 0).toLocaleString()} words total
        </div>
      </div>

      {/* Prompt */}
      <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 6, padding: 16, marginBottom: 20 }}>
        <div style={{ fontFamily: font.mono, fontSize: 9, color: C.crimson, letterSpacing: "0.12em", text

export default function CouncilReviewSystem() {
  const [tab, setTab] = useState("review");

  const tabs = [
    { id: "template", label: "Template" },
    { id: "methodology", label: "Methodology" },
    { id: "review", label: "Review #1" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: C.navy, color: C.cream }}>
      <div style={{ maxWidth: 780, margin: "0 auto", padding: "40px 24px 56px" }}>

        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <p style={{ fontFamily: font.mono, fontSize: 10, color: C.crimson, letterSpacing: "0.3em", textTransform: "uppercase", marginBottom: 8 }}>
            DDL Council · Review System
          </p>
          <h1 style={{ fontFamily: font.display, fontSize: 26, fontWeight: 700, color: C.cream, lineHeight: 1.2, marginBottom: 6 }}>
            Nine Models. One Prompt. Synthesized.
          </h1>
          <p style={{ fontFamily: font.body, fontSize: 15, color: C.creamMid, fontStyle:

export default function CouncilScalingPage() {
  const [activeModel,setActiveModel]=useState<'flat'|'hierarchical'>('flat');

  return(
    <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=DM+Serif+Display&family=DM+Sans:wght@400;500;700&display=swap');
        .cs-root{background:#0d1117;color:#c9d1d9;font-family:'JetBrains Mono',monospace;min-height:100vh;}
        .cs-card{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:24px;transition:all 0.3s;}
        .cs-card:hover{border-color:#58a6ff;}
      `}</style>

      <div className="cs-root" style={{paddingTop:60}}>
        <div style={{padding:'40px 48px'}}>
          <div style={{fontSize:11,letterSpacing:3,textTransform:'uppercase',color:'#8b949e',marginBottom:8}}>
            AutoCouncil Addendum</div>
          <h1 style={{fontFamily:"'DM Serif Display',serif",fontSize:36,color:'#f0f6fc',marginBottom:8}}>Scaling Constraints</h1>
 

function SectionHead({ num, title, color = C.crimson }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 20, marginTop: 48 }}>
      <div style={{
        width: 32, height: 32, borderRadius: 6,
        background: color + "20",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: font.body, fontSize: 16, fontWeight: 600, color,
      }}>{num}</div>
      <span style={{ fontFamily: font.display, fontSize: 20, fontWeight: 700, color: C.cream }}>{title}</span>
      <div style={{ flex: 1, height: 1, background: C.border }} />
    </div>
  );
}

function Quote({ text, source, color = C.crimson }) {
  return (
    <div style={{ borderLeft: `2px solid ${color}`, paddingLeft: 16, margin: "16px 0" }}>
      <p style={{ fontFamily: font.body, fontSize: 14, color: C.creamHigh, lineHeight: 1.75, fontStyle: "italic" }}>"{text}"</p>
      {source && <p style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, letterSpacing: "0.1em", marginTop: 6, textTransform: "uppercase" }}>— {source}</p>}
    </div>
  );
}

function Prose({ children }) {
  return <p style={{ fontFamily: font.body, fontSize: 15, color: C.creamMid, lineHeight: 1.8, marginBottom: 16 }}>{children}</p>;
}

function ReviewCard({ review }) {
  const [open, setOpen] = useState(false);
  const isCopilot = review.code === "COP";
  const isGhost = review.code === "CLD";

  return (
    <div style={{
      background: C.card, border: `1px solid ${C.border}`, borderRadius: 7,
      marginBottom: 8, overflow: "hidden",
    }}>
      <button onClick={() => setOpen(!open)} style={{
        width: "100%", padding: "14px 18px", background: "transparent", border: "none",
        cursor: "pointer", display: "flex", alignItems: "center", gap: 14, textAlign: "left",
      }}>
        <div style={{
          width: 8, height: 8, borderRadius: "50%", background: review.color, flexShrink: 0,
          boxShadow: `0 0 8px ${review.color}40`,
          opacity: isGhost ? 0.3 : 1,
        }} />
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
            <span style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, letterSp

function ConvergenceBar({ item }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 0" }}>
      <div style={{ flex: "0 0 200px", fontFamily: font.body, fontSize: 13, color: C.cream }}>{item.topic}</div>
      <div style={{ flex: 1, position: "relative", height: 6, background: C.creamGhost, borderRadius: 3 }}>
        <div style={{
          position: "absolute", left: 0, top: 0, height: "100%", borderRadius: 3,
          width: `${(item.strength / 9) * 100}%`,
          background: item.strength >= 7 ? C.green : item.strength >= 5 ? C.amber : C.crimson,
          transition: "width 0.5s ease",
        }} />
      </div>
      <div style={{ flex: "0 0 30px", fontFamily: font.mono, fontSize: 11, color: item.color, textAlign: "right" }}>{item.strength}/9</div>
    </div>
  );
}

function DivergenceBlock({ item }) {
  return (
    <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 7, padding: "16px 20px", marginBottom: 10 }}>
      <div style={{ fontFamily: font.display, fontSize: 15, fontWeight: 600, color: C.cream, marginBottom: 10 }}>{item.topic}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6, marginBottom: 12 }}>
        {item.positions.map((p, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ flex: "0 0 240px", fontFamily: font.body, fontSize: 12, color: p.color }}>{p.stance}</div>
            <div style={{ display: "flex", gap: 3 }}>
              {p.models.map(m => (
                <span key={m} style={{
                  fontFamily: font.mono, fontSize: 9, padding: "2px 6px", borderRadius: 3,
                  background: p.color + "18", color: p.color, letterSpacing: "0.06em",
                }}>{m}</span>
              ))}
    

export default function STD0066Narrative() {
  return (
    <div style={{ minHeight: "100vh", background: C.navy, color: C.cream }}>
      <div style={{ maxWidth: 800, margin: "0 auto", padding: "48px 24px 64px" }}>

        {/* ─── HERO ─── */}
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <p style={{ fontFamily: font.mono, fontSize: 10, color: C.crimson, letterSpacing: "0.3em", textTransform: "uppercase", marginBottom: 12 }}>
            STD-0066 · Council Document Naming Convention
          </p>
          <h1 style={{ fontFamily: font.display, fontSize: 32, fontWeight: 700, color: C.cream, lineHeight: 1.2, marginBottom: 8 }}>
            The Standard That Named Itself
          </h1>
          <p style={{ fontFamily: font.body, fontSize: 17, color: C.creamMid, lineHeight: 1.7, maxWidth: 560, margin: "0 auto", fontStyle: "italic" }}>
            Nine models reviewed a naming convention using the naming convention. One didn't follow the format. One filed u

export default function Page() {
  return <STD0066Narrative />;
}

async function loadState() {
  try {
    const result = await window.storage.get(STORAGE_KEY);
    if (result && result.value) return JSON.parse(result.value);
  } catch (e) { /* key doesn't exist yet */ }
  return null;
}

async function saveState(state) {
  try {
    await window.storage.set(STORAGE_KEY, JSON.stringify(state));
  } catch (e) {
    console.error("Storage save failed:", e);
  }
}

function WingCard({ color, name, tagline, desc, href, items }) {
  const [hovered, setHovered] = useState(false);
  return (
    <Link href={href}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'block', textDecoration: 'none',
        background: hovered ? color + '08' : C.card,
        border: `1px solid ${hovered ? color + '30' : C.border}`,
        borderRadius: 8, padding: '24px 20px',
        transition: 'all 0.2s',
        transform: hovered ? 'translateY(-1px)' : 'none',
      }}
    >
      <div style={{
        fontFamily: font.mono, fontSize: 9, letterSpacing: '0.2em',
        textTransform: 'uppercase', color: color, marginBottom: 8,
      }}>{name}</div>
      <div style={{
        fontFamily: font.display, fontSize: 18, fontWeight: 600,
        color: C.cream, marginBottom: 8,
      }}>{tagline}</div>
      <div style={{
        fontFamily: font.body, fontSize: 14, color: C.creamDim,
        lineHeig

function QuickLink({ href, label, color }) {
  return (
    <Link href={href} style={{
      fontFamily: font.mono, fontSize: 11, color: C.creamDim,
      textDecoration: 'none', padding: '8px 14px',
      border: `1px solid ${C.border}`, borderRadius: 6,
      transition: 'all 0.15s', display: 'inline-flex',
      alignItems: 'center', gap: 6,
    }}
      onMouseEnter={e => { e.currentTarget.style.color = C.cream; e.currentTarget.style.borderColor = (color || C.crimson) + '40'; }}
      onMouseLeave={e => { e.currentTarget.style.color = C.creamDim; e.currentTarget.style.borderColor = C.border; }}
    >{label}</Link>
  );
}

export default function DDLLanding() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  return (
    <div style={{
      maxWidth: 900, margin: '0 auto', padding: '60px 24px 100px',
      opacity: mounted ? 1 : 0,
      transform: mounted ? 'translateY(0)' : 'translateY(8px)',
      transition: 'all 0.6s ease',
    }}>
      {/* Header */}
      <div style={{ marginBottom: 48 }}>
        <div style={{
          fontFamily: font.mono, fontSize: 9, letterSpacing: '0.2em',
          textTransform: 'uppercase', color: C.crimson, marginBottom: 12,
        }}>
          Dropdown Logistics
        </div>
        <div style={{
          fontFamily: font.display, fontSize: 36, fontWeight: 700,
          color: C.cream, marginBottom: 16, letterSpacing: '-0.5px',
          lineHeight: 1.2,
        }}>
          Chaos &rarr; Structured &rarr; Automated
        </div>
        <div style={{
          fontFamily: font.body, fontSize: 17, color: C.creamMid,

export default function DDLReferencePage() {
  const sections = data.sections as { title: string; slug: string; preview: string; content: string }[];
  return (
    <SectionExplorer
      title="DDL Reference"
      subtitle="The full operational methodology — charter, standards, governance, and tools."
      accent="#B23531"
      basePath="/ddl/reference"
      sections={sections}
    />
  );
}

export function generateStaticParams() {
  return (data.sections as { slug: string }[]).map((s) => ({ slug: s.slug }));
}

export default function DDLSectionPage({ params }: { params: { slug: string } }) {
  const sections = data.sections as { title: string; slug: string; preview: string; content: string }[];
  const section = sections.find((s) => s.slug === params.slug) ?? null;

  return (
    <SectionPageView
      section={section}
      parentTitle="DDL"
      parentPath="/ddl"
      accent="#B23531"
    />
  );
}

function PullQuote({ children, color = C.crimson }) {
  return (
    <div style={{
      padding: "16px 20px", margin: "16px 0", borderLeft: `3px solid ${color}`,
      background: color + "08", borderRadius: "0 7px 7px 0",
    }}>
      <p style={{ fontFamily: font.body, fontSize: 14, color: C.creamHigh, lineHeight: 1.7, fontStyle: "italic", margin: 0 }}>
        {children}
      </p>
    </div>
  );
}

function MetricCard({ value, label, color, sub }) {
  return (
    <div style={{
      flex: "1 1 130px", background: C.card, border: `1px solid ${C.border}`,
      borderRadius: 7, padding: "18px 14px", position: "relative", overflow: "hidden",
    }}>
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: color, opacity: 0.6 }} />
      <div style={{ fontFamily: font.mono, fontSize: 32, fontWeight: 700, color }}>{value}</div>
      <div style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 4 }}>{label}</div>
      {sub && <div style={{ fontFamily: font.body, fontSize: 10, color: C.creamDim, fontStyle: "italic", marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

export default function SiteGrowthChronicle() {
  const [expandedPhase, setExpandedPhase] = useState(null);

  return (
    <div style={{ minHeight: "100vh", background: C.navy, color: C.cream }}>
      <style>{`@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');
html{scroll-behavior:smooth}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp 0.6s ease both}
.fade-d1{animation-delay:0.1s}.fade-d2{animation-delay:0.2s}.fade-d3{animation-delay:0.3s}.fade-d4{animation-delay:0.4s}
`}</style>

      {/* ═══ Hero ═══ */}
      <div style={{
        padding: "56px 24px 40px",
        background: `linear-gradient(180deg, ${C.crimson}12 0%, transparent 60%)`,
        borderBottom: `1px solid ${C.border}`,
      }}>
        <div style={{ maxWidth: 760, margin: "0 auto" }} classNam

export default function ContinuumPage() {
  return (
    <main className="min-h-screen" style={{ background: "#0B0F14" }}>
      {/* Header */}
      <header className="pt-32 pb-16 px-6">
        <div className="max-w-5xl mx-auto">
          <p
            className="text-[11px] tracking-[0.3em] uppercase mb-6"
            style={{ fontFamily: "var(--font-mono)", color: "var(--crimson)" }}
          >
            Narrative Visualization
          </p>

          <h1
            className="text-4xl md:text-5xl font-serif tracking-tight mb-4"
            style={{ fontFamily: "var(--font-serif)", color: "#e8e6e3" }}
          >
            Continuum Map
          </h1>

          <p className="text-base text-[#8a8a95] leading-relaxed max-w-2xl mb-4">
            Two lineages flow through the DexVerse ΓÇö one structural, one
            emotional. They diverge, converge, and occasionally become the same
            line. This map traces both across five eras, marking the inflection