/* Turntake · /learn: the hub and the guides (T-018, 10/10-2026)
   Builds on styles.css (tokens, type, buttons, topbar, menu, sign-up, footer) and pages.css (subpage hero, FAQ).
   Generated by tools/byg_learn.py from content/learn/*.md. Amber stays the turn only (the sign-up's full stop).
   No inline styles (CSP style-src 'self'). Everything is in the raw HTML; nothing here hides content from a reader without JS. */

/* ---------- breadcrumbs ---------- */
.crumbs { margin: 0 0 18px; font: 400 13px/1.4 var(--f-tc); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--faint); }
.crumbs a { display: inline-block; padding-block: 4px; color: var(--muted); text-decoration: none; transition: color .15s; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }

/* ---------- article header ---------- */
.art__head { position: relative; padding: calc(var(--top-h) + clamp(28px, 4vw, 56px)) 0 clamp(28px, 3.4vw, 44px); }
.art__head .wrap > * { max-width: 880px; }
.art__label { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; }
.art__label a { color: var(--muted); text-decoration: none; transition: color .15s; }
.art__label a:hover { color: #fff; }
.art__type { padding-left: 12px; border-left: 1px solid var(--line-strong); color: var(--muted); } /* 5,7:1 som .gcard__k (før --faint 3,3:1) */
.art__h1 { max-width: 17em; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.03; letter-spacing: -.04em; }
.art__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 20px; font: 400 13px/1.5 var(--f-tc); color: var(--muted); }
.art__meta a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color .15s; }
.art__meta a:hover { color: #fff; text-decoration-color: currentColor; }
.short-answer { max-width: 780px; margin-top: clamp(24px, 3vw, 34px); padding: 18px 22px 20px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); }
.short-answer__k { margin: 0 0 8px; font: 600 14px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.short-answer__t { font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.55; letter-spacing: -.005em; color: var(--strong); text-wrap: pretty; }

/* ---------- body + table of contents ---------- */
.art__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: clamp(48px, 5vw, 80px); }
.toc { padding: 14px 18px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-sunk); }
.toc__h { margin: 0 0 6px; font: 600 14px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; min-height: 32px; padding: 5px 0; font-size: 14.5px; line-height: 1.35; color: var(--muted); text-decoration: none; transition: color .15s; }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 400 11.5px/1 var(--f-tc); color: var(--faint); }
.toc a:hover { color: #fff; }
@media (min-width: 1100px) {
  .art__grid--toc { grid-template-columns: minmax(0, 720px) minmax(0, 272px); justify-content: space-between; gap: 56px; }
  .art__grid--toc .toc { order: 2; position: sticky; top: calc(var(--top-h) + 24px); align-self: start; max-height: calc(100vh - var(--top-h) - 48px); overflow: auto; }
}

/* ---------- prose ---------- */
.prose { max-width: 720px; font-size: 17px; line-height: 1.7; color: var(--text); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 2.1em; font: 500 clamp(26px, 2.6vw, 34px)/1.15 var(--f-ui); letter-spacing: -.03em; color: var(--strong); text-wrap: balance; scroll-margin-top: calc(var(--top-h) + 24px); }
.prose h3 { margin-top: 1.7em; font: 500 21px/1.3 var(--f-ui); letter-spacing: -.015em; color: var(--strong); scroll-margin-top: calc(var(--top-h) + 24px); }
.prose > :first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + * { margin-top: .65em; }
.prose p, .prose li { text-wrap: pretty; }
.prose a { color: var(--strong); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .34); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .15s; }
.prose a:hover { text-decoration-color: #fff; }
.prose strong { font-weight: 600; color: var(--strong); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--faint); }
.prose ol > li::marker { font-family: var(--f-tc); font-size: .82em; color: var(--muted); }
.prose code { padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--raised); font: 400 .84em/1.5 var(--f-tc); color: var(--text); overflow-wrap: anywhere; }
.prose .tag { height: 21px; padding: 0 6px; font-size: 11.5px; vertical-align: .12em; }
.prose .tsrc { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.prose .tsrc em { font-style: normal; }
.prose .tsrc a { color: var(--text); }
.prose blockquote { padding: 14px 20px; border-left: 2px solid var(--line-strong); border-radius: 0 10px 10px 0; background: var(--panel); }
.prose blockquote p + p { margin-top: .6em; }

/* tables: scroll sideways inside their own box on a phone, never the page.
   Edge glow = there is more to the side: the two 'local' panel fades travel with the table and cover the glow
   at the start and the end, so the glow only shows where the table continues (no JS). */
.tbl { margin-top: 1.5em; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; overscroll-behavior-x: contain;
  background:
    linear-gradient(90deg, var(--panel) 40%, rgba(18, 19, 23, 0)) 0 0 / 44px 100% no-repeat local,
    linear-gradient(270deg, var(--panel) 40%, rgba(18, 19, 23, 0)) 100% 0 / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)) 0 0 / 18px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)) 100% 0 / 18px 100% no-repeat scroll,
    var(--panel); }
.tbl:focus-visible { outline-offset: 3px; }
.tbl table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.tbl--wide table { min-width: 720px; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl thead th { background: var(--raised); font: 600 13px/1.3 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tbl thead th a { color: var(--text); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-weight: 500; color: var(--strong); }
.tbl td + td, .tbl th + th { border-left: 1px solid var(--line); }
.tbl .al-c { text-align: center; }
.tbl .al-r { text-align: right; }
.tbl .tag { vertical-align: .08em; }

/* the box in the middle of a guide ({{cta}}) */
.prose .lcta { margin-block: 2.2em; padding: 22px 24px 24px; border: 1px solid var(--line-strong); border-radius: 16px; background: linear-gradient(180deg, var(--raised), var(--panel)); }
.lcta__t { font: 500 clamp(21px, 2vw, 26px)/1.2 var(--f-ui); letter-spacing: -.025em; color: var(--strong); text-wrap: balance; }
.lcta__l { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.lcta__b { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px; }
.prose .lcta .btn { color: var(--bg); text-decoration: none; }
.prose .lcta__more { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 15px; color: var(--muted); text-decoration: none; transition: color .15s; }
.prose .lcta__more:hover { color: #fff; }
.lcta__more .ic { width: 13px; height: 13px; }

/* ---------- FAQ, sources, related ---------- */
.art__faq { border-top: 1px solid var(--line); }
.art__faq .qa p a { color: var(--text); }
.cites { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); counter-reset: cite; }
.cites li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 6px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; counter-increment: cite; }
.cites li::before { content: counter(cite, decimal-leading-zero); grid-row: span 2; padding-top: 3px; font: 400 12px/1.4 var(--f-tc); color: var(--faint); }
.cites a { color: var(--strong); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; overflow-wrap: anywhere; }
.cites a:hover { text-decoration-color: #fff; }
.cites__c { font: 400 12px/1.5 var(--f-tc); color: var(--muted); }
.cites__note { max-width: 62ch; margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.art__rel .label { margin-bottom: 20px; }
.art__hub { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 22px; font-size: 15px; color: var(--faint); }
.art__hub a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text); text-underline-offset: 3px; }
.art__hub a:hover { color: #fff; }

/* guide cards (hub and "Keep reading") */
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.gcard__a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); text-decoration: none;
  transition: border-color .15s, background-color .15s; }
.gcard__a:hover { border-color: #474c55; background: var(--raised); }
.gcard__k { font: 400 12px/1.4 var(--f-tc); color: var(--muted); }
.gcard--start .gcard__a { border-color: var(--line-strong); background: linear-gradient(180deg, var(--raised), var(--panel)); }
.gcard--start .gcard__k { color: var(--text); }
.gcard__t { font: 500 19px/1.28 var(--f-ui); letter-spacing: -.015em; color: var(--strong); text-wrap: balance; }
.gcard__d { font-size: 14.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* ---------- the hub ---------- */
.ph--learn .ph__h1 { max-width: 14em; }
.ph--learn .crumbs { margin-bottom: 20px; }
.lhub { border-top: 1px solid var(--line); }
.lhub__intro { max-width: 720px; }
.lhub__jump { margin-top: clamp(28px, 3vw, 40px); }
.lhub__jump ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lhub__jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); font-size: 14.5px; color: var(--text); text-decoration: none; transition: border-color .15s, background-color .15s; }
.lhub__jump a:hover { border-color: #474c55; background: var(--raised); }
.lhub__c { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(36px, 4.4vw, 56px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--top-h) + 8px); }
.lhub__i { max-width: 40em; margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.lhub__pl { margin-top: 12px; }
.lhub__pl a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14.5px; color: var(--text); text-decoration: none; transition: color .15s; }
.lhub__pl a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lhub__pl .ic { width: 13px; height: 13px; color: var(--muted); }
@media (min-width: 1024px) {
  .lhub__c { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; }
  .lhub__ch { position: sticky; top: calc(var(--top-h) + 24px); align-self: start; }
  .lhub__c .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lhub__how .prose { max-width: 760px; }
.lhub__how ul { padding-left: 1.2em; }

/* ---------- small screens ---------- */
@media (max-width: 599px) {
  .prose { font-size: 16.5px; }
  .short-answer { padding: 16px 16px 18px; }
  .prose .lcta { padding: 18px 16px 20px; }
  .lcta__b .btn { width: 100%; }
  .crumbs { font-size: 12.5px; }
  .crumbs li + li::before { margin: 0 8px; }
}
.lhub__pl .tag, .art__hub .tag { height: 21px; margin-left: 8px; padding: 0 6px; font-size: 11.5px; vertical-align: .12em; }
.art__hub .tag { margin-left: 0; align-self: center; }

/* ---------- who wrote this (end of the body; 'who we are' lives here and in the byline, not in every intro) ---------- */
.prose .art__about { margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.art__about-k { display: block; margin-bottom: 4px; font: 600 13px/1.3 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prose .art__about a { color: var(--text); }

/* ---------- pictures, explainers and loops in a guide (T-018 visual, 10/10-2026; seo/04_visuel_plan.md §2–§4) ----------
   Written by tools/learn_figurer.py from ::: figure / ::: diagram <type> / ::: loop. Every <img> has width/height (no layout
   shift), loads lazily and comes in two widths. Diagram text is real HTML text (crawlable, zoomable); SVG only draws
   lines, bars and zones, styled from here (CSP style-src 'self': no style attributes). Amber marks a turn, nothing else. */
.prose .fig, .prose .dg { margin: 2em 0; }
.prose .fig + .fig, .prose .dg + .dg, .prose .fig + .dg, .prose .dg + .fig { margin-top: 2em; }
.fig__img, .lloop__poster { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.prose .fig--narrow { max-width: 360px; }
/* drawn Turntake pictures with text get a phone version (<picture>, max-width 599px): the same element shot at 375 px,
   so its text stays at its own size on a phone instead of shrinking to a third (T-018 retter-runde 10/10) */
.prose .fig picture { display: block; }
.prose .fig__labels { display: grid; margin: 10px 0 0; padding: 0; list-style: none; font: 500 12px/1.35 var(--f-tc); color: var(--muted); text-align: center; }
.prose .fig__labels li + li { margin-top: 0; }
.fig__labels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2%; }
.fig__labels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .9%; }
.fig figcaption, .dg__c { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.fig__src { display: block; margin-top: 3px; font: 400 12px/1.5 var(--f-tc); color: var(--muted); }
.prose .fig figcaption a, .prose .dg__c a { color: var(--text); }

/* the loop: a real poster image, the muted video over it once it plays, and its own Pause/Play */
.lloop { position: relative; }
.lloop__vid { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 11px; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .3s; }
.lloop__vid.is-playing { opacity: 1; }
.lloop__vid::-webkit-media-controls, .lloop__vid::-webkit-media-controls-enclosure, .lloop__vid::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.lloop__btn { position: absolute; right: 10px; bottom: 10px; z-index: 4; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  background: rgba(10, 10, 11, .74); color: #fff; cursor: pointer; transition: background-color .15s, border-color .15s; }
.lloop__btn:hover { border-color: rgba(255, 255, 255, .45); background: rgba(10, 10, 11, .9); }
.lloop__btn[hidden] { display: none; }                 /* without JS (or before the loop is near) there is nothing to pause */
.lloop__btn .ic { grid-area: 1 / 1; width: 12px; height: 12px; }
.lloop__r, .lloop__btn[aria-pressed="true"] .lloop__p { display: none; }
.lloop__btn[aria-pressed="true"] .lloop__r { display: block; }
.prose .fig--phone { max-width: 300px; }
.lloop--phone .phone__screen .lloop__poster, .lloop--phone .phone__screen .lloop__vid { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; }
.lloop--phone .lloop__btn { right: 16px; bottom: 16px; }

/* ---------- explainers (diagrams) ---------- */
.prose .dg { padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.dg__k { margin: 0 0 14px; font: 600 12px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dg__c { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.dg__s { display: block; margin-top: 4px; font-size: 13px; }
.dg ol, .dg ul { margin: 0; padding: 0; list-style: none; }   /* (0,1,1): later than .prose ol, and below every .prose .dg__x rule */
.prose .dg li + li { margin-top: 0; }
.dg .dg__arr { width: 16px; height: 16px; color: var(--muted); }
.dg__loop { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 400 12.5px/1 var(--f-tc); color: var(--muted); }
.dg__loop .ic { width: 14px; height: 14px; }

/* steps: numbered cards in order; amber dot = a person has the turn */
.prose .dg__steps { display: grid; gap: 22px; }
.dg__step { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 11px 13px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--raised); }
.dg__n { font: 400 12px/1.2 var(--f-tc); font-variant-numeric: tabular-nums; color: var(--muted); }
.dg__l { font: 500 15px/1.3 var(--f-ui); letter-spacing: -.005em; color: var(--strong); overflow-wrap: anywhere; }
.dg__x { font-size: 14px; line-height: 1.4; color: var(--muted); }
.dg__f { display: block; font: 400 11.5px/1.5 var(--f-tc); color: var(--muted); }
.dg__steps--fields .dg__x { margin-top: 4px; color: var(--text); }
.dg__you { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 500 12px/1.2 var(--f-tc); color: var(--text); }
.dg__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dg__step .dg__arr { position: absolute; left: 14px; bottom: -20px; transform: rotate(90deg); }
.prose .dg__steps--grid { gap: 10px; }
@media (min-width: 600px) {
  .prose .dg__steps { column-gap: 26px; row-gap: 16px; }
  .dg__steps--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg__steps--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dg__steps--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dg__steps--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .prose .dg__steps--grid { gap: 10px; }
  .dg__step .dg__arr { left: auto; right: -22px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .dg__steps--c4 .dg__step:nth-child(4n) .dg__arr { display: none; }
  .dg__steps--c5 .dg__l { font-size: 14.5px; }
}

/* compare: left (how it often goes) → right */
.dg__ch, .dg__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); align-items: center; column-gap: 8px; }
.dg__ch { margin: 0 0 6px; font: 600 12px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dg__ch span:last-child { grid-column: 3; }
.dg__rows li { padding: 10px 0; border-top: 1px solid var(--line); }
.dg__a { font-size: 15px; line-height: 1.4; color: var(--muted); }
.dg__b { font-size: 15px; line-height: 1.4; color: var(--strong); }
.dg__rows .dg__arr { justify-self: center; }
.dg__h { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 599px) {
  .dg__ch { display: none; }
  .dg__rows li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .dg__rows .dg__arr { justify-self: start; margin-left: 2px; transform: rotate(90deg); }
  .dg__h { position: static; display: block; width: auto; height: auto; margin: 0 0 2px; overflow: visible; clip: auto; white-space: normal;
    font: 600 11.5px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
}

/* fork: one question, 2–4 ways */
.dg__root { margin: 0 auto; max-width: 32em; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--raised); text-align: center;
  font: 500 15.5px/1.35 var(--f-ui); color: var(--strong); text-wrap: balance; }
.prose .dg__br { position: relative; display: grid; gap: 10px; padding: 14px 0 0 20px; }
.dg__br::before { content: ""; position: absolute; top: 0; bottom: 22px; left: 7px; width: 1px; background: var(--line-strong); }
.dg__br li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 11px 13px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-sunk); }
.dg__br li::before { content: ""; position: absolute; top: 22px; left: -14px; width: 13px; height: 1px; background: var(--line-strong); }
.dg__br .dg__l { font: 400 14.5px/1.4 var(--f-ui); color: var(--text); }
.dg__o { margin-top: auto; font: 600 13px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--strong); }
@media (min-width: 600px) {
  .prose .dg__br { padding: 26px 0 0; }
  .dg__br--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg__br--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dg__br--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dg__br::before { top: 12px; bottom: auto; height: 1px; width: auto; }
  /* the bar runs exactly from the first branch's centre to the last one's (columns and the 10 px gap), so it meets the stubs */
  .dg__br--2::before { left: calc((100% - 10px) / 4); right: calc((100% - 10px) / 4 - 1px); }
  .dg__br--3::before { left: calc((100% - 20px) / 6); right: calc((100% - 20px) / 6 - 1px); }
  .dg__br--4::before { left: calc((100% - 30px) / 8); right: calc((100% - 30px) / 8 - 1px); }
  .dg__br::after { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 12px; background: var(--line-strong); }
  .dg__br li::before { top: -14px; left: 50%; width: 1px; height: 14px; }
}

/* turns: two dots like the mark; the one with the turn is amber (right = you, left = Claude) */
.prose .dg__turns { display: grid; gap: 8px; }
.dg__turn { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; column-gap: 10px; }
.dg__turn > * { grid-row: 1; }
.dg__dots { grid-column: 1; display: flex; justify-content: center; gap: 5px; }
.dg__dots i { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.dg__turn.is-you .dg__dots i:last-child, .dg__turn.is-claude .dg__dots i:first-child { background: var(--accent); }
.dg__t { grid-column: 2; padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--raised); font-size: 15px; line-height: 1.4; color: var(--strong); }
@media (min-width: 600px) {
  .dg__turn { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); }
  .dg__dots { grid-column: 2; }
  .dg__turn.is-you .dg__t { grid-column: 3; }
  .dg__turn.is-claude .dg__t { grid-column: 1; text-align: right; }
}

/* timeline: one bar per lane (SVG, geometry in %, text in real px), numbered marks and a key below */
.dg__tln { margin: 12px 0 6px; font: 400 12.5px/1.4 var(--f-tc); color: var(--muted); }
.dg__tl > .dg__tln:first-child { margin-top: 0; }
.dg__tlm + .dg__tln { margin-top: 4px; }
.dg__tlb, .dg__tlm, .dg__tla { display: block; overflow: visible; }
.dg__tla { margin-top: 6px; }
.dg__track { fill: var(--bg-sunk); }
.dg__seg { fill: #2b2f37; stroke: var(--panel); stroke-width: 2px; }
.dg__seg--focus { fill: #2b2f37; }
.dg__seg--same { fill: var(--raised); }
.dg__seg--muted { fill: transparent; stroke: var(--line-strong); stroke-dasharray: 4 3; }
.dg__segf { fill: none; stroke: #fff; stroke-width: 1.5px; }
.dg__tlt { font: 500 13px/1 var(--f-ui); fill: var(--strong); }
.dg__tls { font: 400 11.5px/1 var(--f-tc); fill: var(--muted); }
.dg__pt { fill: var(--strong); }
.dg__mkl { stroke: var(--text); stroke-width: 1px; stroke-dasharray: 2 3; }
.dg__mk circle { fill: var(--panel); stroke: var(--text); stroke-width: 1px; }
.dg__mk text { font: 500 11px/1 var(--f-tc); fill: var(--strong); }
.dg__tla text { font: 400 11.5px/1 var(--f-tc); fill: var(--muted); }
.dg__tick { stroke: var(--line-strong); }
.prose .dg__tll { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.dg__tll li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.dg__lk { flex: none; }
.dg__lk--mk { display: inline-grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--text); border-radius: 50%; font: 500 11px/1 var(--f-tc); color: var(--strong); }
.dg__lk--seg-plain, .dg__lk--seg-focus, .dg__lk--seg-same, .dg__lk--seg-muted { width: 16px; height: 10px; border-radius: 3px; background: #2b2f37; }
.dg__lk--seg-focus { box-shadow: inset 0 0 0 1.5px #fff; }
.dg__lk--seg-same { background: var(--raised); }
.dg__lk--seg-muted { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* frame: the 1080×1920 master with its zones, and a numbered key */
.dg__fr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; }
.dg__frm { position: relative; width: 200px; margin: 0 auto; aspect-ratio: 9 / 16; }
.dg__frimg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.dg__frsvg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dg__frbg { fill: var(--raised); }
.dg__frkant { fill: none; stroke: var(--line-strong); stroke-width: 4; }
.dg__bd--zone { fill: rgba(255, 255, 255, .05); stroke: #fff; stroke-width: 6; stroke-dasharray: 26 18; }
.dg__bd--caption { fill: rgba(199, 52, 60, .14); stroke: var(--cap-red); stroke-width: 8; }
.dg__hb { fill: rgba(6, 6, 7, .62); }
.dg__hl { stroke: rgba(255, 255, 255, .26); stroke-width: 7; }
.dg__frmk circle { fill: var(--bg); stroke: #fff; stroke-width: 5; }
.dg__frmk text { font: 600 70px/1 var(--f-tc); fill: #fff; }
.prose .dg__frl { display: grid; gap: 10px; }
.dg__frl li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text); }
.dg__frl .dg__lk--mk { transform: translateY(3px); }
@media (min-width: 600px) {
  .dg__fr { grid-template-columns: 240px minmax(0, 1fr); gap: 26px; }
  .dg__frm { width: 240px; margin: 0; }
}
/* a bar label that only fits from 600 px stands in the key below on a phone, and the other way round */
.dg__tll .dg__lk--pt { width: 10px; height: 10px; border-radius: 50%; background: var(--strong); }
@media (max-width: 599px) { .dg__tlb .is-tight { display: none; } }
@media (min-width: 600px) { .dg__tll li.is-tight { display: none; } }
/* short, one-word steps sit two by two on a phone (the numbers keep the order) */
@media (max-width: 599px) {
  .prose .dg__steps--short { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dg__steps--short .dg__arr { display: none; }
}