/* =====================================================================
     Live-doc stylesheet — extracted from msr-live-doc.html (ADR 0036).
     :root MIRRORS the app theme (apps/web/src/index.css). On a theme
     change, update THIS file. (See ADR 0010.)
     ===================================================================== */
  :root{
    --background:oklch(0.95 0.003 286.32); --card:oklch(0.99 0.002 286.32);
    --foreground:oklch(0.24 0.006 285.885); --muted-foreground:oklch(0.552 0.016 285.938);
    --border:oklch(0.885 0.005 286.32); --muted:oklch(0.94 0.004 286.32);
    --primary:oklch(0.457 0.24 277.023);
    --accent:oklch(0.94 0.004 286.32); --accent-foreground:oklch(0.24 0.006 285.885);
    --destructive:oklch(0.577 0.245 27.325);
    --chart-3:oklch(0.681 0.162 75.834);
    --radius:0.45rem;
    --surface:oklch(0.985 0 0);
    --rule:var(--border);
    --gold:var(--chart-3); --red:var(--destructive);
    --primary-soft:color-mix(in oklch, var(--primary) 8%, var(--card));
    --gold-soft:color-mix(in oklch, var(--gold) 14%, var(--card));
    --green:oklch(0.60 0.13 155);
    --green-soft:color-mix(in oklch, var(--green) 12%, var(--card));
    --shadow-sm:0 1px 2px oklch(0 0 0/.05), 0 1px 1px oklch(0 0 0/.03);
    --shadow-md:0 2px 6px oklch(0 0 0/.05), 0 10px 24px oklch(0 0 0/.06);
    --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
    --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  /* Dark theme — mirrors apps/web/src/index.css .dark. Only base tokens overridden;
     the *-soft / derived tokens recompute from these via var()/color-mix. */
  :root.dark{
    --background:oklch(0.141 0.005 285.823); --card:oklch(0.21 0.006 285.885);
    --foreground:oklch(0.985 0 0); --muted-foreground:oklch(0.705 0.015 286.067);
    --border:oklch(1 0 0 / 10%); --muted:oklch(0.274 0.006 286.033);
    --primary:oklch(0.457 0.24 277.023);
    --accent:oklch(0.274 0.006 286.033); --accent-foreground:oklch(0.985 0 0);
    --destructive:oklch(0.704 0.191 22.216);
    --chart-3:oklch(0.681 0.162 75.834);
    --surface:oklch(0.141 0.005 285.823);
    --green:oklch(0.72 0.15 155);
    --shadow-sm:0 1px 2px oklch(0 0 0/.35);
    --shadow-md:0 6px 22px oklch(0 0 0/.5);
  }
  html{color-scheme:light} html.dark{color-scheme:dark}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--surface);color:var(--foreground);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

  /* ---- layout ---- */
  .wrap{display:grid;grid-template-columns:164px minmax(0,1fr);max-width:1500px;margin:0 auto 0 clamp(8px,1vw,20px)}
  aside{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;padding:16px 10px 16px 8px;border-right:1px solid var(--border);background:var(--surface)}
  main{padding:28px 56px 80px;min-width:0}
  @media(max-width:860px){.wrap{grid-template-columns:1fr;margin:0 auto}aside{position:static;height:auto;border-right:none;border-bottom:1px solid var(--border)}main{padding:24px 20px 40px}}
  /* collapsible sidebar */
  .navcollapse{margin:10px 8px 0;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--muted-foreground);border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;font-family:inherit}
  .navcollapse:hover{background:var(--muted);color:var(--foreground)}
  #navopen{position:fixed;top:14px;left:14px;z-index:60;display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);background:var(--surface);border-radius:10px;cursor:pointer;font-size:17px;box-shadow:0 2px 10px rgba(0,0,0,.07)}
  #navopen:hover{background:var(--muted)}
  /* theme toggle — fixed top-right */
  #themetoggle{position:fixed;top:28px;right:12px;z-index:60;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);background:var(--surface);border-radius:10px;cursor:pointer;font-size:16px;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.07)}
  #themetoggle:hover{background:var(--muted)}
  /* inline SVG icons — inherit text color, scale with font-size */
  .ic{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
  #navopen .ic{width:20px;height:20px;vertical-align:middle}
  #themetoggle .ic{width:18px;height:18px;vertical-align:middle}
  #themetoggle .ic-sun{display:none}
  :root.dark #themetoggle .ic-sun{display:inline-block}
  :root.dark #themetoggle .ic-moon{display:none}
  .wrap.nav-collapsed{grid-template-columns:1fr}
  .wrap.nav-collapsed aside{display:none}
  .wrap.nav-collapsed #navopen{display:inline-flex}

  /* ---- sidebar ---- */
  .brand{font-weight:600;font-size:17px;letter-spacing:-.3px;padding:0 10px}
  .brand .sub{display:block;font-size:10.5px;color:var(--muted-foreground);font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin-top:5px}
  nav{margin-top:14px}
  nav a{display:block;padding:6px 9px;border-radius:var(--radius);color:var(--foreground);text-decoration:none;font-size:14px;margin:1px 0;white-space:nowrap}
  nav a:hover{background:var(--muted)}
  nav a.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
  .navfoot{margin-top:14px;padding:10px 8px 0;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted-foreground);line-height:1.5}

  /* ---- top-level chapters ---- */
  main > section{scroll-margin-top:16px;padding:64px 0;border-top:1px solid var(--rule)}
  main > section:first-child{border-top:none;padding-top:8px}
  .ckicker{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:12px}
  main>section:not(:first-child) .ckicker::before{content:"";display:block;width:32px;height:3px;border-radius:3px;background:var(--primary);opacity:.6;margin-bottom:18px}
  .ctitle{font-size:34px;font-weight:600;letter-spacing:-.7px;line-height:1.1}
  .cintro{font-size:16px;color:var(--muted-foreground);margin-top:14px;max-width:64ch;line-height:1.6}
  .block{margin-top:52px}
  /* short lead-in between a sub-section header and its diagram */
  .lead{font-size:15px;color:var(--muted-foreground);line-height:1.62;max-width:76ch;margin:0 0 20px}
  .lead b{color:var(--foreground);font-weight:600}
  .lbl:has(+ .lead){margin-bottom:12px}

  /* ---- hero (overview) ---- */
  h1{font-size:40px;line-height:1.08;font-weight:600;letter-spacing:-1px}
  .tagline{font-size:17px;color:var(--muted-foreground);margin-top:16px;max-width:56ch;line-height:1.6}
  .qrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
  .q{flex:1;min-width:150px;border:1px solid var(--border);border-radius:calc(var(--radius)*1.6);background:var(--card);padding:14px 16px}
  .q .qk{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
  .q .qv{font-size:15px;font-weight:500;margin-top:4px}

  /* ---- section rhythm ---- */
  .lbl{display:flex;align-items:center;gap:12px;margin-bottom:22px}
  .lbl .n{width:26px;height:26px;flex:none;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:13px;font-weight:600}
  .lbl h2{font-size:20px;font-weight:600;letter-spacing:-.3px}
  .lbl .sub{color:var(--muted-foreground);font-size:15px;font-weight:400;margin-left:2px}
  figcaption{color:var(--muted-foreground);font-size:14px;text-align:center;margin-top:18px;font-style:italic;line-height:1.55}

  /* ---- generic card ---- */
  .card{border:1px solid var(--border);border-radius:calc(var(--radius)*1.8);background:var(--card);box-shadow:0 1px 2px oklch(14.5% 0 0/.03)}
  .pad{padding:30px 32px}

  /* ---- big-picture stack ---- */
  .stack{display:flex;flex-direction:column;gap:8px}
  .box{border:1px solid var(--border);border-radius:calc(var(--radius)*1.6);background:var(--card);padding:15px 18px;text-align:center}
  .box .t{font-weight:600;font-size:16px}
  .box .d{font-size:13px;color:var(--muted-foreground);margin-top:2px}
  .box.top{border-color:var(--primary);background:var(--primary-soft)}
  .modrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .modchip{flex:1;min-width:130px;border:1px dashed var(--border);border-radius:calc(var(--radius)*1.3);background:var(--muted);padding:11px;text-align:center;font-size:14px;font-weight:500}
  .arrowdown{text-align:center;color:var(--muted-foreground);font-size:12px;letter-spacing:.04em;padding:3px 0}
  .base{border:none;border-radius:calc(var(--radius)*1.6);background:var(--foreground);color:#fff;padding:18px 20px;text-align:center}
  .base .t{font-weight:600;font-size:16px;color:#fff}
  .base .d{font-size:13px;color:oklch(80% 0 0);margin-top:4px}
  /* Dark: these "inverted slab" blocks ride on var(--foreground) (dark in light mode),
     which flips near-white in dark → white-on-white. Recolor to a raised card. */
  :root.dark .base, :root.dark .pole.f, :root.dark .node.db{background:var(--card);color:var(--foreground);border:1px solid var(--border)}
  :root.dark .base .t, :root.dark .node.db .t{color:var(--foreground)}
  :root.dark .base .d, :root.dark .pole.f .pd, :root.dark .node.db .d{color:var(--muted-foreground)}

  /* ---- two-column owns ---- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  @media(max-width:720px){.split{grid-template-columns:1fr}}
  .own h3{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px}
  .own.f h3{color:var(--primary)} .own.m h3{color:var(--gold)}
  .own ul{list-style:none}
  .own li{position:relative;padding-left:22px;margin:9px 0;font-size:15px}
  .own li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%}
  .own.f li::before{background:var(--primary)} .own.m li::before{background:var(--gold)}
  .own li b{font-weight:600}

  /* ---- participation row ---- */
  .prow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  @media(max-width:720px){.prow{grid-template-columns:1fr 1fr}}
  .cell{border:1px solid var(--border);border-radius:calc(var(--radius)*1.3);padding:13px 12px;text-align:center;background:var(--card)}
  .cell .ck{font-family:var(--mono);font-size:12px;color:var(--primary);font-weight:500}
  .cell .cv{font-size:13px;color:var(--muted-foreground);margin-top:5px}

  /* ---- gate ---- */
  .gate{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;gap:10px}
  @media(max-width:720px){.gate{grid-template-columns:1fr}.gate .mid{transform:rotate(90deg)}}
  .step{border:1px solid var(--border);border-radius:calc(var(--radius)*1.6);padding:18px;background:var(--card)}
  .step .sh{font-weight:600;font-size:16px;margin-bottom:5px}
  .step .sd{font-size:14px;color:var(--muted-foreground)}
  .step.no{border-color:oklch(88% .05 27)} .step.no .sh{color:var(--red)}
  .step.yes{border-color:oklch(85% .06 155)} .step.yes .sh{color:var(--green)}
  .mid{text-align:center;color:var(--muted-foreground);font-size:20px}

  /* ---- table ---- */
  table{width:100%;border-collapse:collapse;font-size:15px}
  th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule);vertical-align:top}
  thead th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-foreground);font-weight:600}
  tbody tr:last-child td{border-bottom:none}
  td b{font-weight:600}
  td.k{font-family:var(--mono);font-size:13px;color:var(--primary);white-space:nowrap}
  .egnote{font-size:14px;color:var(--muted-foreground);margin-top:14px;padding-left:16px;border-left:2px solid var(--gold)}
  .verdict{white-space:nowrap;font-weight:600}
  .verdict.no{color:var(--red)} .verdict.yes{color:var(--green)}
  tr.pick td{background:var(--primary-soft)}

  /* ---- union ---- */
  .union{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}
  .rolechip{border:1px solid var(--border);border-radius:999px;padding:8px 18px;font-weight:600;font-size:15px;background:var(--gold-soft)}
  .plus,.eq{font-size:20px;color:var(--muted-foreground);font-weight:600}
  .result{border:1px solid var(--primary);background:var(--primary-soft);border-radius:calc(var(--radius)*1.3);padding:10px 18px;font-size:14px;font-weight:500;color:var(--primary)}

  /* ---- seam ---- */
  .seam{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
  @media(max-width:720px){.seam{grid-template-columns:1fr}}
  .pole{border-radius:calc(var(--radius)*1.6);padding:18px;text-align:center;font-weight:600}
  .pole.m{border:1px solid var(--gold);background:var(--gold-soft)}
  .pole.f{border:none;background:var(--foreground);color:#fff}
  .pole .pd{font-weight:400;font-size:13px;color:var(--muted-foreground);margin-top:5px}
  .pole.f .pd{color:oklch(80% 0 0)}
  .wires{display:flex;flex-direction:column;gap:10px;grid-column:1/-1}
  .wire{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;border:1px solid var(--border);border-radius:calc(var(--radius)*1.3);padding:12px 15px;background:var(--card)}
  .wire .wn{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
  .wire .wt{font-size:14px}
  .wire .wt b{font-weight:600}
  .wire .wt .dir{font-family:var(--mono);font-size:11px;color:var(--muted-foreground);display:block;margin-top:2px}

  /* ---- data model ---- */
  .erd{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
  .ent{border:1px solid var(--border);border-radius:calc(var(--radius)*1.4);background:var(--card);padding:12px 16px;text-align:center;min-width:120px}
  .ent b{font-weight:600;font-size:15px}
  .ent span{display:block;font-size:11.5px;color:var(--muted-foreground);margin-top:2px}
  .ent.hub{border-color:var(--primary);border-width:1.5px;background:var(--primary-soft)}
  .rel{font-size:12px;color:var(--muted-foreground);font-style:italic;text-align:center}

  /* ---- merge ---- */
  .merge{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
  .prec{border:1px solid var(--border);border-radius:calc(var(--radius)*1.3);padding:12px 18px;text-align:center;min-width:120px}
  .prec.dead{opacity:.55;text-decoration:line-through;text-decoration-color:oklch(70% 0 0)}
  .prec .pl{font-size:11px;color:var(--muted-foreground)}
  .prec b{font-weight:600}
  .mergearrow{font-family:var(--mono);font-size:12px;color:var(--primary);text-align:center}

  /* ---- chips (tech) ---- */
  .chips{display:flex;flex-wrap:wrap;gap:9px}
  .chip{border:1px solid var(--border);border-radius:999px;padding:8px 15px;font-size:14px;font-weight:500;background:var(--card)}
  .chip b{font-weight:600}

  /* ---- tentative banner ---- */
  .tentative{margin-top:16px;border:1px solid var(--gold);border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:calc(var(--radius)*1.3);padding:13px 18px;font-size:14px;display:flex;gap:10px;align-items:flex-start}
  .tentative b{font-weight:600}
  .tentative .tag{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--gold);border-radius:999px;padding:3px 10px;white-space:nowrap;margin-top:1px}

  /* ---- three views ---- */
  .views{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:720px){.views{grid-template-columns:1fr}}
  .view{border:1px solid var(--border);border-radius:calc(var(--radius)*1.6);background:var(--card);padding:18px}
  .view h3{font-size:15px;font-weight:600;margin-bottom:6px}
  .view .vk{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
  .view p{font-size:13.5px;color:var(--muted-foreground)}
  .view.this{border-color:var(--primary);background:var(--primary-soft)}
  .view.this .vk{color:var(--primary)}

  /* ---- deployment flow ---- */
  .cloud{border:1.5px dashed var(--primary);border-radius:calc(var(--radius)*2);background:var(--primary-soft);padding:20px;position:relative;margin-top:6px}
  .cloud .cloudlbl{position:absolute;top:-11px;left:20px;background:var(--primary);color:#fff;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;padding:2px 12px;border-radius:999px}
  .flow{display:flex;flex-direction:column;gap:7px}
  .node{border:1px solid var(--border);border-radius:calc(var(--radius)*1.4);background:var(--card);padding:14px 18px;text-align:center}
  .node .t{font-weight:600;font-size:15px}
  .node .d{font-size:12.5px;color:var(--muted-foreground);margin-top:2px}
  .node.app{border-color:var(--gold);background:var(--gold-soft)}
  .node.db{border:none;background:var(--foreground);color:#fff}
  .node.db .t{color:#fff}.node.db .d{color:oklch(80% 0 0)}
  .node.edge{border-color:var(--primary)}
  .down{text-align:center;color:var(--muted-foreground);font-size:14px;line-height:1}
  .sides{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:9px}
  .side{flex:1;min-width:150px;border:1px dashed var(--border);border-radius:calc(var(--radius)*1.3);background:var(--card);padding:11px;text-align:center;font-size:13px}
  .side b{font-weight:600}
  .side .sk{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-foreground);display:block}
  .modtags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
  .modtag{font-family:var(--mono);font-size:11.5px;border:1px solid var(--border);background:var(--card);border-radius:999px;padding:3px 10px}

  /* ---- schema-per-module ---- */
  .schemas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
  .schemachip{border:1px solid var(--border);border-radius:calc(var(--radius)*1.3);background:var(--card);padding:9px 14px;font-size:13px;text-align:center}
  .schemachip .sn{font-family:var(--mono);font-size:12px;color:var(--primary);font-weight:500}
  .schemachip .sd{font-size:11.5px;color:var(--muted-foreground);margin-top:2px}
  .schemachip.hub{border-color:var(--primary);background:var(--primary-soft)}

  /* ---- fit list ---- */
  .fit{list-style:none}
  .fit li{position:relative;padding-left:26px;margin:14px 0;font-size:15px}
  .fit li::before{content:"✓";position:absolute;left:0;top:0;color:var(--primary);font-weight:700}
  .fit li b{font-weight:600}

  /* ---- callout ---- */
  .callout{border:1px solid var(--border);border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:calc(var(--radius)*1.3);padding:20px 24px;font-size:15px;margin-top:28px;line-height:1.6}
  .callout b{font-weight:600}
  .callout code{font-family:var(--mono);font-size:13px;background:var(--card);border:1px solid var(--border);border-radius:5px;padding:1px 6px}

  /* ---- decisions index ---- */
  .tl{list-style:none}
  .tl li{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--rule)}
  .tl li:last-child{border-bottom:none}
  .tl .adr{font-family:var(--mono);font-size:12px;color:var(--primary);font-weight:600;flex:none;width:44px}
  .tl .txt{font-size:14.5px;flex:1;min-width:200px}
  /* module-scoped ADRs ("Requirements 0001") — stacked label, not squeezed into the 44px root-ADR column */
  .tl li:has(.modcol){align-items:flex-start}
  .modcol{flex:none;width:96px;display:flex;flex-direction:column;gap:1px;padding-top:2px}
  .modname{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted-foreground)}
  .modcol .adr{width:auto}
  .badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 9px;white-space:nowrap}
  .badge.ok{color:var(--green);background:var(--green-soft)}
  .badge.tent{color:var(--gold);background:var(--gold-soft)}
  .badge.sup{color:var(--muted-foreground);background:var(--muted)}
  .tl li:has(.badge.sup) .txt{color:var(--muted-foreground);text-decoration:line-through;text-decoration-color:var(--border)}
  td .sub{color:var(--muted-foreground);font-weight:400;font-size:13px}
  code{font-family:var(--mono);font-size:.88em;background:var(--muted);padding:1px 6px;border-radius:5px}
  .tree{font-family:var(--mono);font-size:12.5px;line-height:1.7;white-space:pre;overflow-x:auto;color:var(--foreground);background:var(--muted);border:1px solid var(--border);border-radius:calc(var(--radius)*1.2);padding:16px 18px;margin:0}
  .tree .c{color:var(--muted-foreground)}
  .tree .h{color:var(--primary);font-weight:600}
  .tree .s{color:var(--green);font-weight:600}

  /* ---- schema draft (column-level tables) ---- */
  .dbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;align-items:start}
  .dbt{border:1px solid var(--border);border-radius:calc(var(--radius)*1.4);background:var(--card);overflow:hidden}
  .dbt.hub{border-color:var(--primary);border-width:1.5px}
  .dbt.mod{border-color:var(--gold)}
  .dbh{display:flex;align-items:baseline;gap:7px;padding:10px 14px;background:var(--muted);border-bottom:1px solid var(--border);font-family:var(--mono);font-size:13px;font-weight:600}
  .dbt.hub .dbh{background:var(--primary-soft);color:var(--primary)}
  .dbt.mod .dbh{background:var(--gold-soft)}
  .dbh .sch{font-weight:500;color:var(--muted-foreground)}
  .dbr{padding:7px 14px;border-top:1px solid var(--rule)}
  .dbr:first-child{border-top:none}
  .dbr .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
  .dbr .cn{font-family:var(--mono);font-size:12.5px;font-weight:500}
  .dbr .ct{font-family:var(--mono);font-size:11px;color:var(--muted-foreground);white-space:nowrap}
  .dbr .cnote{font-size:11.5px;color:var(--muted-foreground);margin-top:2px;line-height:1.4}
  .dbr.key{background:color-mix(in oklch,var(--primary) 4%,var(--card))}
  .dbr.spine{background:var(--gold-soft)}
  .kb{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.03em;border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:middle}
  .kb.pk{color:#fff;background:var(--primary)}
  .kb.fk{color:var(--primary);border:1px solid var(--primary)}
  .kb.uq{color:var(--gold);border:1px solid color-mix(in oklch,var(--gold) 60%,var(--border))}
  .kb.scope{color:var(--muted-foreground);border:1px solid var(--border)}
  .dbuniq{padding:9px 14px;border-top:1px dashed var(--border);font-size:11px;color:var(--muted-foreground);font-family:var(--mono);line-height:1.5}
  /* module-to-module */
  .m2m{display:flex;flex-direction:column;gap:10px}
  .m2mrow{display:flex;flex-wrap:wrap;align-items:center;gap:9px;border:1px solid var(--border);border-radius:calc(var(--radius)*1.4);padding:14px 16px;background:var(--card)}
  .m2mrow.bad{border-color:oklch(88% .05 27)}
  .m2mrow.good{border-color:oklch(85% .06 155)}
  .m2mrow code{font-family:var(--mono);font-size:12.5px}
  .m2mrow .arr{font-family:var(--mono);font-size:11.5px;color:var(--muted-foreground)}
  .m2mrow .vv{font-weight:700;font-size:15px}
  .m2mrow.bad .vv{color:var(--red)} .m2mrow.good .vv{color:var(--green)}
  .m2mrow .m2mlbl{flex-basis:100%;font-size:13px;color:var(--muted-foreground)}
  /* capability matrix */
  td.cok{color:var(--green);font-weight:700;text-align:center}
  td.cno{color:var(--muted-foreground);text-align:center}

  /* =====================================================================
     POLISH LAYER — motion, depth, focus, and type refinements.
     Additive only; reuses the existing theme tokens. Grouped so it can be
     tuned or lifted out as one unit. (See ADR 0010 — live doc upkeep.)
     ===================================================================== */
  /* refined resting depth on the primary surface containers */
  .card{box-shadow:var(--shadow-sm)}
  /* de-densify: diagram wrappers recede to the page so their inner pieces are the one elevated layer */
  figure.card{background:var(--surface);box-shadow:none}

  /* motion — a smooth theme cross-fade + gentle interaction feedback */
  @media (prefers-reduced-motion: no-preference){
    body{transition:background-color .3s ease, color .3s ease}
    aside,.card,.box,.view,.cell,.q,.ent,.chip,.rolechip,.schemachip,.modtag,.wire,.step,
    .node,.pole,.prec,.dbt,.m2mrow,nav a,#themetoggle,#navopen,.navcollapse{
      transition:background-color .2s ease, border-color .2s ease, color .2s ease,
                 box-shadow .25s ease, transform .2s ease;
    }
    nav a:hover{transform:translateX(2px)}
    #themetoggle:hover,#navopen:hover,.navcollapse:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
  }

  /* keyboard focus — visible and on-brand, suppressed for mouse clicks */
  :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
  a:focus-visible,button:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

  /* active nav item gets a crisp left accent */
  nav a.active{box-shadow:inset 2px 0 0 var(--primary)}

  /* typography refinements */
  h1,.ctitle,.lbl h2{text-wrap:balance}
  .tagline,.cintro,.callout,figcaption,p{text-wrap:pretty}
  table{font-variant-numeric:tabular-nums}
  code,.tree,td.k,.dbr .cn,.dbr .ct,.mono{font-variant-ligatures:none}

  /* selection + slim, themed scrollbars */
  ::selection{background:color-mix(in oklch, var(--primary) 22%, transparent)}
  *{scrollbar-width:thin;scrollbar-color:color-mix(in oklch, var(--muted-foreground) 40%, transparent) transparent}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-thumb{background:color-mix(in oklch, var(--muted-foreground) 35%, transparent);border-radius:99px;border:3px solid var(--surface);background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch, var(--muted-foreground) 60%, transparent);background-clip:padding-box}