/* generated by build-site.mjs — edit the generator, not this file */
:root{--paper:#f7f5f0;--ink:#1b2a24;--ink-2:#55665d;--rule:#ddd6c7;--gold:#7a6132;--green:#2f6b4f;--card:#efeae0;--demph:#8b9a91;color-scheme:light;--dur:.16s}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

*{box-sizing:border-box}
h1,h2,h3{text-wrap:balance}
p,dd{text-wrap:pretty}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.7 "Google Sans",system-ui,sans-serif;
  padding:0 16px 72px;display:flex;justify-content:center}
main{width:100%;max-width:960px}
main.narrow{max-width:720px}
code{font-family:"Google Sans Code","Google Sans",monospace;font-size:.92em}
mark{background:none;color:var(--gold);border-bottom:1px dashed currentColor}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:12px 16px;z-index:9;text-decoration:none}
.skip:focus{left:8px;top:8px}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* masthead — five items max (research §3, maggieappleton cautionary): four pages + contact */
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;
  padding:20px 0 14px;border-bottom:1px solid var(--rule);margin-bottom:1.6rem}
.wordmark{font:600 .84rem/1.5 "Google Sans Code","Google Sans",monospace;letter-spacing:.02em;color:inherit;
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.wordmark i{font-style:normal;color:var(--gold);margin:0 .3rem}
.bar nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}   /* five items: wraps at 375 rather than scroll */
.bar nav a{font:500 .8rem/1 "Google Sans Code","Google Sans",monospace;color:var(--ink-2);text-decoration:none;
  padding:0 12px;min-height:44px;display:inline-flex;align-items:center;transition:color var(--dur);white-space:nowrap}
.bar nav a:hover{color:var(--gold)}
.kicker a{color:var(--gold)}
.bar nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
@media(max-width:420px){.bar nav a{padding:0 7px}}

.claim{color:var(--ink-2);max-width:52ch;margin:0 0 .5rem;font-size:.97rem}
.claim b{color:var(--ink);font-weight:500}

h2{font:600 .78rem/1 "Google Sans Code","Google Sans",monospace;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);margin:2.8rem 0 0;padding-bottom:.55rem;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
h2 i{font-style:normal;color:var(--gold)}
h1.reg-hd{font:600 .78rem/1 "Google Sans Code","Google Sans",monospace;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);margin:2.4rem 0 0;padding-bottom:.55rem;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
h1.reg-hd i{font-style:normal;color:var(--gold)}

/* the counted register */
ul.reg{list-style:none;padding:0;margin:0}
ul.reg li{border-bottom:1px solid var(--rule)}
ul.reg a{display:grid;grid-template-columns:11.5rem 1fr auto auto;gap:.5rem 1rem;align-items:baseline;
  padding:13px 2px;min-height:44px;color:inherit;text-decoration:none;transition:color var(--dur)}
ul.reg a:hover{color:var(--gold)}
ul.reg b{font:600 .95rem/1.5 "Google Sans Code","Google Sans",monospace;white-space:nowrap}
ul.reg .st{font:400 .66rem/1 "Google Sans Code","Google Sans",monospace;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);margin-left:.55rem;font-weight:400}
ul.reg a:hover .st,ul.reg a:hover em{color:inherit}
ul.reg em{font-style:normal;color:var(--ink-2);font-size:.93rem}
ul.reg .n{font:500 .88rem/1.5 "Google Sans Code","Google Sans",monospace;color:var(--gold);white-space:nowrap}
@media(max-width:640px){
  ul.reg a{grid-template-columns:1fr auto}
  ul.reg em{grid-column:1/-1;margin-top:-.3rem}
}
.totals{margin:1.1rem 0 0;color:var(--ink-2);font-size:.9rem;line-height:1.9}
.totals b{color:var(--ink);font-weight:600}
.caveat{color:var(--ink-2);font-size:.82rem;margin:.6rem 0 0;line-height:1.7}

ul.method{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:1.1rem}
ul.method li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline}
ul.method .k{font:600 .8rem/1.7 "Google Sans Code","Google Sans",monospace;color:var(--gold)}
ul.method p{margin:0;font-size:.93rem}
ul.method p span{display:block;color:var(--ink-2);font-size:.85rem;margin-top:.15rem}
.more{margin:1.6rem 0 0}
.more a{color:var(--gold);font-size:.92rem;text-decoration:none;
  border-bottom:1px solid var(--rule);display:inline-flex;align-items:center;min-height:44px}
.more a:hover{border-color:var(--gold)}

/* system detail — problem, constraint, decision, measured result */
.crumb{margin:0 0 1.2rem}
.crumb a{font:500 .78rem/1 "Google Sans Code","Google Sans",monospace;color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.crumb a:hover{color:var(--gold)}
.hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
article h1{font-size:1.55rem;font-weight:600;margin:0}
.tag{font:400 .68rem/1 "Google Sans Code","Google Sans",monospace;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:2px;padding:6px 9px;color:var(--ink-2);white-space:nowrap}
.tag.live{color:var(--gold);border-color:var(--gold)}
.sub{color:var(--ink-2);margin:.35rem 0 0;font-size:.97rem;max-width:58ch}
.fig{display:flex;gap:1.6rem;flex-wrap:wrap;margin:1.2rem 0 1.6rem;
  font:500 .85rem/1.6 "Google Sans Code","Google Sans",monospace;color:var(--ink-2)}
.fig b{color:var(--gold);font-weight:500}
dl{margin:0;display:grid;grid-template-columns:5.6rem 1fr;gap:.6rem 1.2rem}
dt{font:500 .7rem/1.95 "Google Sans Code","Google Sans",monospace;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2)}
dd{margin:0;font-size:.96rem}
dd .en{display:block;color:var(--ink-2);font-size:.85rem;font-style:italic;margin-top:.15rem}
@media(max-width:600px){dl{grid-template-columns:1fr;gap:.15rem} dt{margin-top:.9rem}}
.src{margin:1.4rem 0 0;padding-top:.8rem;border-top:1px dotted var(--rule);
  font:400 .78rem/1.8 "Google Sans Code","Google Sans",monospace;color:var(--ink-2);word-break:break-word}
.note{margin:.8rem 0 0;font-size:.85rem;color:var(--ink-2);
  background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:14px 18px}
.note a,.src a,.proof-ft a{color:var(--gold)}

.pager{display:flex;justify-content:space-between;gap:1rem;margin:2.6rem 0 0;
  padding-top:1.2rem;border-top:1px solid var(--rule)}
.pager a{color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:.1rem;
  min-height:44px;justify-content:center;transition:color var(--dur)}
.pager a:hover{color:var(--gold)}
.pager .next{text-align:right}
.pager span{font:400 .7rem/1 "Google Sans Code","Google Sans",monospace;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2)}
.pager b{font:600 .95rem/1.5 "Google Sans Code","Google Sans",monospace}

/* standard page */
time,.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* hero figure — sans, never the serif: a serif number reads as decoration */
.wide h1.hero{font:600 clamp(3rem,9vw,4.5rem)/1 "Google Sans",system-ui,sans-serif;
  margin:0;letter-spacing:-.02em;color:var(--ink)}
.wide h1.hero span{font-size:.4em;font-weight:500;color:var(--ink-2);margin-left:.1em}

.kpi{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;gap:1.4rem 2rem;
  grid-template-columns:repeat(4,1fr)}
.kpi li{display:flex;flex-direction:column;gap:.15rem;
  border-top:1px solid var(--rule);padding-top:.7rem}
.kpi b{font:600 1.5rem/1.15 "Google Sans",system-ui,sans-serif}
.kpi span{font-size:.85rem;color:var(--ink-2)}
.kpi i{font:400 .7rem/1.5 "Google Sans Code","Google Sans",monospace;font-style:normal;color:var(--gold)}
@media(max-width:700px){.kpi{grid-template-columns:repeat(2,1fr)}}

figure.fig-block{margin:2.6rem 0 0}
figure.fig-block figcaption{font:500 .74rem/1.5 "Google Sans Code","Google Sans",monospace;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 .9rem}

/* emphasis bars: one hue for this site, de-emphasis grey for context.
   Built from a real <table>, so the table view IS the chart. */
table.chart{width:100%;border-collapse:collapse;min-width:0;font-size:.9rem}
table.chart th[scope="row"]{font:400 .88rem/1.5 "Google Sans",sans-serif;text-align:left;
  text-transform:none;letter-spacing:0;
  color:var(--ink-2);padding:6px 14px 6px 0;white-space:nowrap;width:1%;border:0}
table.chart tr.me th[scope="row"]{color:var(--ink);font-weight:600}
table.chart td{border:0;padding:6px 0}
table.chart .track{width:100%}
table.chart .bar{display:block;height:16px;border-radius:0 4px 4px 0;background:var(--demph)}
table.chart tr.me .bar{background:var(--gold)}
table.chart .v{font:500 .88rem/1.5 "Google Sans Code","Google Sans",monospace;font-variant-numeric:tabular-nums;
  text-align:right;padding-left:14px;width:1%;color:var(--ink-2)}
table.chart tr.me .v{color:var(--ink)}
table.chart tr.lh-0 .bar{width:100%}
table.chart tr.lh-1 .bar{width:96%}
table.chart tr.lh-2 .bar{width:96%}
table.chart tr.lh-3 .bar{width:88%}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;margin:.9rem 0 0;
  font-size:.8rem;color:var(--ink-2)}
.legend .sw{display:inline-block;width:11px;height:11px;border-radius:2px;
  background:var(--demph);margin-right:.4rem;vertical-align:-1px}
.legend .sw.me{background:var(--gold)}

/* before → after against a threshold */
.dumb{position:relative;height:40px;margin:1.6rem 0 0;
  border-bottom:1px solid var(--rule)}
.dumb .conn{position:absolute;top:15px;height:2px;background:var(--rule);
  left:18.3%;width:53.4%}
.dumb .dot{position:absolute;top:9px;width:14px;height:14px;border-radius:50%;
  margin-left:-7px;box-shadow:0 0 0 2px var(--paper)}
.dumb .dot.before{background:var(--gold);left:18.3%}
.dumb .dot.after{background:var(--green);left:71.7%}
.dumb .thr{position:absolute;top:0;bottom:0;width:1px;background:var(--ink-2);left:38.9%}
.dumb .thr i{position:absolute;top:-1px;left:6px;white-space:nowrap;font-style:normal;
  font:400 .72rem/1 "Google Sans Code","Google Sans",monospace;color:var(--ink-2)}
.axis{display:flex;justify-content:space-between;margin:.3rem 0 0;
  font:400 .7rem/1 "Google Sans Code","Google Sans",monospace;color:var(--ink-2)}
.dumb-key{display:flex;gap:1.6rem;flex-wrap:wrap;margin:.7rem 0 0;font-size:.85rem;
  color:var(--ink-2)}
.dumb-key b{font-family:"Google Sans Code","Google Sans",monospace;font-weight:600}
.dumb-key .bad{color:var(--gold)}
.dumb-key .good{color:var(--green)}

/* phase marks: filled = ผ่าน, half = บางส่วน, hollow = ขาด — a shape difference, never colour alone */
.pm{display:inline-block;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink-2);
  vertical-align:-2px;flex:none;box-sizing:border-box}
.pm.p2{background:var(--green);border-color:var(--green)}
.pm.p1{border-color:var(--gold);background:linear-gradient(90deg,var(--gold) 50%,transparent 50%)}
.pm.p0{background:transparent}
.pm-key{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.84rem;color:var(--ink-2);margin:.8rem 0 0}
.pm-key>span{display:inline-flex;align-items:center;gap:.4rem}
.pm-key .sr{position:static;width:auto;height:auto;clip:auto;overflow:visible}
ul.reg .strip{display:inline-flex;gap:4px;align-self:center}
ul.reg .strip .pm{width:11px;height:11px}

/* 28 days of commits: filled = weekday with a commit, outline = none, dotted = Sat/Sun (not counted).
   .act is one line of 28; .act.cal is the same cells one week per row, Sun–Sat. */
.act{display:inline-grid;grid-template-columns:repeat(28,5px);gap:1.5px;vertical-align:middle;flex:none}
.act i{display:block;height:12px;border:1px solid var(--ink-2);border-radius:1px}
.act i.on{background:var(--green);border-color:var(--green)}
.act i.we{border:1px dotted var(--ink-2)}   /* dotted, not faint: the captions point readers at these cells (≥3:1) */
.act.cal{grid-template-columns:repeat(7,8px);gap:2px;margin:.2rem 0}
.act.cal i{width:8px;height:8px}
.act i.pad{visibility:hidden}
/* forced colours drop background fills, so every state mark is repainted in system colours.
   :root lifts each rule over the later per-state rules (.p2>.g, .tlS-win …) */
@media(forced-colors:active){
  :root .act i.on{background:CanvasText}
  :root .pm,:root ol.g6 .g,:root .gk,:root .tlS-track>span,:root .tlS-track::after,:root .tlS-gap::before,:root .tlS-key i{forced-color-adjust:none}
  :root .pm,:root ol.g6 .g,:root .gk{border-color:CanvasText}
  :root .pm.p0{background:Canvas}
  :root .pm.p2,:root .p2>.g,:root .gk.p2,:root .tlS-past,:root .tlS-track::after,:root .tlS-gap::before,:root .tlS-key .k-past,:root .tlS-key .k-now,:root .tlS-key .k-gap{background:CanvasText;border-color:CanvasText}
  :root .pm.p1,:root .p1>.g,:root .gk.p1{background:linear-gradient(90deg,CanvasText 50%,Canvas 50%)}
  :root .tlS-win,:root .tlS-key .k-win{border-color:CanvasText;background:repeating-linear-gradient(135deg,CanvasText 0 1.5px,Canvas 1.5px 6px)}
  :root .tlS-track>.tlS-plan,:root .tlS-key .k-plan{border-color:CanvasText}
  :root .tlS-track>.tlS-cut,:root .tlS-key .k-cut{border-color:transparent transparent transparent CanvasText}
}

/* phases page: the 6 × 6 matrix */
.mx-wrap{overflow-x:auto;margin:1.6rem 0 0;position:relative}   /* contains the .sr labels, or they widen the page */
.mx-wrap:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.mx{border-collapse:collapse;width:100%;min-width:620px;font-variant-numeric:tabular-nums}
.mx th,.mx td{padding:.75rem .5rem;border-bottom:1px solid var(--rule);text-align:center;vertical-align:middle}
/* the global th is a Latin mono label; Thai phase and system names need the Thai face, unspaced */
.mx th,.et th{font-family:"Google Sans",system-ui,sans-serif;letter-spacing:0;text-transform:none}
.mx th[scope=row]{font-size:.95rem;color:var(--ink);position:sticky;left:0;z-index:1;background:var(--paper)}
.mx thead th:first-child{position:sticky;left:0;z-index:2;background:var(--paper)}   /* headers slide under the corner with their columns */
.mx tbody tr:last-child td{border-bottom:1px solid var(--rule)}   /* the global last-row rule would leave only the th ruled */   /* names stay put while the phases scroll at 375 */
.mx thead th{font-weight:500;font-size:.8rem;color:var(--ink-2);line-height:1.35;vertical-align:bottom}
.mx thead th b{display:block;font:600 .8rem "Google Sans Code","Google Sans",monospace;color:var(--gold)}
.mx th[scope=row]{text-align:left;font-weight:500;white-space:nowrap}
.mx th[scope=row] a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);display:inline-block;min-height:44px;line-height:44px}
.mx th[scope=row] a:hover{border-color:var(--gold)}
.mx th[scope=row] .act{display:grid;margin:-.2rem 0 .4rem}
.mx td.v{text-align:right;font:600 .9rem "Google Sans Code","Google Sans",monospace;white-space:nowrap}
.mx td.v span{color:var(--ink-2);font-weight:400}
.mx td.est{font:600 .85rem "Google Sans Code","Google Sans",monospace;white-space:nowrap;text-align:right}
.mx td.est span{color:var(--ink-2);font-weight:400}
.mx td.est small{display:block;white-space:normal;font:400 .74rem "Google Sans Code","Google Sans",monospace;color:var(--ink-2);margin-top:.2rem}
.mx tfoot td,.mx tfoot th{border-bottom:0;font:400 .78rem "Google Sans Code","Google Sans",monospace;color:var(--ink-2)}
.mx tfoot th{text-align:left;font-family:inherit}
.mx tfoot td.est{font-weight:600;color:var(--ink)}
.mx .worst{color:var(--gold);font-weight:600}
.d-h2{margin:2.6rem 0 0}
.estm{margin:1.4rem 0 0;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.estm h3{margin:0 0 .5rem;font-size:1rem;font-weight:600}
.estm p{margin:.5rem 0 0;color:var(--ink-2);font-size:.88rem;max-width:60ch}
table.et{border-collapse:collapse;width:100%;min-width:0;font-size:.86rem;font-variant-numeric:tabular-nums}
.et th,.et td{padding:.45rem .4rem;border-bottom:1px solid var(--rule);text-align:left}
.et td.n{text-align:right;font-family:"Google Sans Code","Google Sans",monospace;white-space:nowrap}
.et th{font-weight:500;color:var(--ink-2)}
.et .ov{color:var(--gold);font-size:.8rem}
.gates{list-style:none;margin:1rem 0 0;padding:0}
.gates>li{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.2rem 1rem;padding:.9rem 0;border-top:1px solid var(--rule);align-items:baseline}
.gates>li:first-child{border-top:0}
.gates .k{font:600 .85rem "Google Sans Code","Google Sans",monospace;color:var(--gold)}
.gates h3{margin:0;font-size:1rem;font-weight:600}
.gates p{grid-column:2/4;margin:0;color:var(--ink-2);font-size:.9rem}
.gates .c{font:400 .8rem "Google Sans Code","Google Sans",monospace;color:var(--ink-2);white-space:nowrap}
.gates details{grid-column:2/4;font-size:.88rem;color:var(--ink-2)}
.gates summary{cursor:pointer;padding:.75rem 0;color:var(--ink);width:max-content;max-width:100%}   /* keeps its ::marker; ≥44px tall */
.gates summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gates details ul{margin:0;padding:0 0 0 1.1rem}
.gates details li{padding:.15rem 0}
.gates details b{color:var(--ink);font-weight:500}
@media(max-width:34rem){.gates>li{grid-template-columns:2.2rem 1fr}.gates .c{grid-column:2;white-space:normal}.gates p,.gates details{grid-column:2}}

/* timeline: ranked ledger (B). Mobile first: each row is a small label/value list; from 45rem a
   six-column ledger under one header row, and the per-row labels go .sr */
.tlB{margin:2rem 0 0}
.tlB-cap{margin:0 0 1.1rem;font-size:.92rem;line-height:1.75;color:var(--ink-2);max-width:62ch}
.tlB-cap b{color:var(--ink);font-weight:600;white-space:nowrap}
.tlB-hd{display:none}
.tlB-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink-2)}
.tlB-row{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.25rem .4rem;
  padding:16px 0 18px;border-bottom:1px solid var(--rule);align-items:baseline}
.tlB-row p{margin:0}
.tlB-rk{grid-column:1;font:600 .9rem/1.6 "Google Sans Code","Google Sans",monospace;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tlB-name{grid-column:2;margin:0 0 .35rem}
.tlB-name b{font-weight:600;font-size:1.02rem;line-height:1.5}
.tlB-s{display:block;font:400 .8rem/1.55 "Google Sans",system-ui,sans-serif;color:var(--ink-2)}
.tlB-m{grid-column:2;display:grid;grid-template-columns:6.4rem minmax(0,1fr);gap:0 .6rem;align-items:baseline}
.tlB-lab{font-size:.84rem;color:var(--ink-2)}
.tlB-v{font:600 .95rem/1.6 "Google Sans Code","Google Sans",monospace;
  font-variant-numeric:tabular-nums;color:var(--ink);min-width:0}
/* Thai month names: Google Sans Code has no Thai, and its full-width dots split "ต.ค." apart */
.tlB-mo{font-family:"Google Sans",system-ui,sans-serif}
.tlB-u{font:400 .84rem/1.6 "Google Sans",system-ui,sans-serif;color:var(--ink-2)}
.tlB-v>.tlB-s{display:inline;margin-left:.3rem}
.tlB-v>.tlB-s::before{content:"· "}
.tlB-fin{color:var(--gold)}
.tlB-act{display:flex;align-items:center;gap:.7rem}

/* A's journey track under each ledger row, on ONE time scale shared by every row (2026-05-01 → 2027-05-01),
   so bar lengths compare across rows. Geometry is generated per row, like the old table.tl rows. */
.tlAB-trk{grid-column:2 / -1;margin:.5rem 0 0}
.tlS-track{position:relative;height:22px;margin:.1rem 0 .3rem;border-bottom:1px solid var(--rule)}
.tlS-track>span{position:absolute;top:5px;height:12px}
.tlS-track::after{content:"";position:absolute;top:-2px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink);left:40.55%}
.tlS-past{background:var(--green);border-radius:4px 0 0 4px;min-width:3px}
.tlS-gap::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:var(--gold)}
.tlS-win{border:1.5px solid var(--gold);border-radius:0 4px 4px 0;box-sizing:border-box;min-width:4px;
  background:repeating-linear-gradient(135deg,var(--gold) 0 1.5px,transparent 1.5px 6px)}
.tlS-track>.tlS-cut,.tlS-key .k-cut{right:0;top:3px;width:0;height:0;border-style:solid;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--gold)}
.tlS-track>.tlS-plan{top:1px;height:20px;border:1.5px dashed var(--ink-2);border-radius:3px;box-sizing:border-box}
.tlS-prps .tlS-past{left:31.51%;width:8.77%}
.tlS-prps .tlS-gap{left:40.55%;width:4.93%}
.tlS-prps .tlS-win{left:45.48%;width:5.48%}
.tlS-rrm .tlS-past{left:9.04%;width:31.23%}
.tlS-rrm .tlS-gap{left:40.55%;width:6.85%}
.tlS-rrm .tlS-win{left:47.4%;width:9.32%}
.tlS-reborn .tlS-plan{left:8.49%;width:79.73%}
.tlS-reborn .tlS-past{left:6.85%;width:32.88%}
.tlS-reborn .tlS-gap{left:40.55%;width:8.22%}
.tlS-reborn .tlS-win{left:48.77%;width:10.41%}
.tlS-book .tlS-past{left:38.36%;width:1.92%}
.tlS-book .tlS-gap{left:40.55%;width:8.49%}
.tlS-book .tlS-win{left:49.04%;width:10.41%}
.tlS-clinic .tlS-past{left:30.41%;width:9.86%}
.tlS-clinic .tlS-gap{left:40.55%;width:12.33%}
.tlS-clinic .tlS-win{left:52.88%;width:15.62%}
.tlS-mbg .tlS-past{left:28.49%;width:11.78%}
.tlS-mbg .tlS-gap{left:40.55%;width:24.38%}
.tlS-mbg .tlS-win{left:64.93%;width:31.78%}
.tlAB-from{margin:0;font-size:.8rem;color:var(--ink-2)}
.tlAB-from time{color:var(--ink);font-weight:600}
.tlS-note{margin:.3rem 0 0;font-size:.8rem;line-height:1.6;color:var(--ink-2)}
/* month axis above the first row, on the same grid as the rows so it lines up with the track */
.tlS-axis{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:0 .4rem;margin:.4rem 0 0}
.tlS-ticks{position:relative;height:2.6rem;font-size:.72rem;line-height:1.2;color:var(--ink-2)}
.tlS-ticks span{position:absolute;bottom:0;padding:0 0 3px 3px;border-left:1px solid var(--ink-2);white-space:nowrap}
.tlS-m0{left:0%}
.tlS-m1{left:8.49%}
.tlS-m2{left:16.71%}
.tlS-m3{left:25.21%}
.tlS-m4{left:33.7%}
.tlS-m5{left:41.92%}
.tlS-m6{left:50.41%}
.tlS-m7{left:58.63%}
.tlS-m8{left:67.12%}
.tlS-m9{left:75.62%}
.tlS-m10{left:83.29%}
.tlS-m11{left:91.78%}
.tlS-today{position:absolute;top:0;left:40.55%;transform:translateX(-50%);font-weight:600;color:var(--ink);white-space:nowrap}
@media(max-width:44.99rem){.tlS-ticks span:nth-of-type(even){display:none}}
@media(max-width:22.5rem){.tlS-ticks span:not(:nth-of-type(4n+1)){display:none}}   /* quarterly at 320: 'ม.ค. 70' needs the room */
.tlS-key{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.84rem;color:var(--ink-2);margin:0 0 1.1rem}
.tlS-key span{display:inline-flex;align-items:center;gap:.45rem}
.tlS-key i{display:inline-block;width:22px;height:10px;box-sizing:border-box}
.tlS-key .k-past{background:var(--green);border-radius:2px}
.tlS-key .k-now{width:2px;height:14px;background:var(--ink)}
.tlS-key .k-gap{height:2px;background:var(--gold)}
.tlS-key .k-win{border:1.5px solid var(--gold);border-radius:2px;
  background:repeating-linear-gradient(135deg,var(--gold) 0 1.5px,transparent 1.5px 6px)}
.tlS-key .k-plan{border:1.5px dashed var(--ink-2);border-radius:2px}

@media(min-width:45rem){
  .tlB-hd,.tlB-row{display:grid;grid-template-columns:1.6rem minmax(0,1fr) 9.6rem 5.4rem 8.4rem 6.2rem;gap:0 .9rem}
  .tlB-hd{align-items:end;padding:0 0 .55rem;font-size:.8rem;line-height:1.45;color:var(--ink-2)}
  .tlB-hd i{display:block;font-style:normal;font-size:.76rem}
  .tlB-row{align-items:start;padding:14px 0 15px}
  .tlB-name,.tlB-m{grid-column:auto;margin:0}
  .tlB-m{display:block}
  .tlB-r{text-align:right}
  .tlB-lab,.tlB-u{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tlB-v>.tlB-s{display:block;margin:0}
  .tlB-v>.tlB-s::before{content:none}
  .tlB-act{align-items:flex-start}
  .tlS-axis{gap:0 .9rem}
}

/* F: each system card — six gate segments with their names, the next gate, estimate and pace */
ol.g6{list-style:none;padding:0;margin:.9rem 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem 3px;
  font-size:.72rem;line-height:1.35;color:var(--ink-2)}
ol.g6 .g,.gk{display:block;height:10px;border:1.5px solid var(--ink-2);border-radius:2px;box-sizing:border-box;margin:0 0 .3rem}
.gk{display:inline-block;width:22px;margin:0}
.p2>.g,.gk.p2{background:var(--green);border-color:var(--green)}
.p1>.g,.gk.p1{border-color:var(--gold);background:linear-gradient(90deg,var(--gold) 50%,transparent 50%)}
@media(max-width:34rem){ol.g6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gate-next{margin:.6rem 0 0;font-size:.88rem}
.gate-next b{color:var(--gold);font-weight:600}
.gate-est{margin:.35rem 0 0;font-size:.85rem;color:var(--ink-2)}
.gate-est b{color:var(--ink);font-weight:600;font-family:"Google Sans Code","Google Sans",monospace;white-space:nowrap}
.st-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:500;color:var(--ink)}
.act-line{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin:.5rem 0 0;font-size:.85rem;color:var(--ink-2)}
.act-line b{color:var(--ink);font-family:"Google Sans Code","Google Sans",monospace;font-weight:600;white-space:nowrap}
.forecast{margin:2.4rem 0 0;padding:1rem 1.1rem;border:1px dashed var(--rule);border-radius:4px;color:var(--ink-2);font-size:.9rem}
.forecast b{color:var(--ink);font-weight:500}
.forecast a{color:var(--gold);display:inline-flex;align-items:center;min-height:44px}
ol.tl-list{list-style:none;padding:0;margin:1rem 0 0}
ol.tl-list>li{padding:1.6rem 0;border-bottom:1px solid var(--rule)}
ol.tl-list h2{margin:0;padding:0;border:0;font-size:.95rem}
ol.tl-list h2 a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
ol.tl-list h2 a:hover{color:var(--gold)}
ol.steps{list-style:none;padding:0;margin:.6rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  font:500 .74rem/1.4 "Google Sans Code","Google Sans",monospace;color:var(--ink-2)}
ol.steps li{border-top:4px solid var(--rule);padding-top:.45rem}
ol.steps li.past{border-color:var(--green)}
ol.steps li.now{border-color:var(--gold);color:var(--ink);font-weight:600}
.stage-note{margin:.8rem 0 1rem;font-size:.95rem}

.open{padding:32px 0 0}
.kicker{font:500 .74rem/1 "Google Sans Code","Google Sans",monospace;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.2rem}
.wide h1{font:600 clamp(1.9rem,4.6vw,3rem)/1.3 "Google Sans",system-ui,sans-serif;margin:0;max-width:19ch;
  letter-spacing:-.01em}
.wide h1 em{font-style:italic;color:var(--green)}
.lede{font-size:1.05rem;color:var(--ink-2);max-width:56ch;margin:1.4rem 0 0}
.lede b{color:var(--ink);font-weight:500}
.proof{margin:2.8rem 0 0;background:var(--card);border:1px solid var(--rule);border-radius:3px;
  overflow:hidden}
.proof-hd{padding:16px 22px;border-bottom:1px solid var(--rule);display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.proof-hd h2{font:500 .76rem/1 "Google Sans Code","Google Sans",monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);margin:0;padding:0;border:0;display:block}
.proof-hd span{font:400 .78rem/1 "Google Sans Code","Google Sans",monospace;color:var(--ink-2)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:460px}
th,td{text-align:left;padding:12px 22px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font:500 .7rem/1.6 "Google Sans Code","Google Sans",monospace;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500}
td.m{font-family:"Google Sans Code","Google Sans",monospace;white-space:nowrap}
.fail{color:var(--gold);font-weight:600}
.pass{color:var(--green);font-weight:600}
.proof-ft{padding:14px 22px;border-top:1px solid var(--rule);
  font:400 .8rem/1.75 "Google Sans Code","Google Sans",monospace;color:var(--ink-2)}
.wide h2.sec{font:600 1.45rem/1.35 "Google Sans",system-ui,sans-serif;margin:3.6rem 0 .4rem;
  padding:0;border:0;display:block;text-transform:none;letter-spacing:0;color:var(--ink)}
.sec-note{color:var(--ink-2);margin:0 0 1.4rem;max-width:68ch;font-size:.97rem}
ol.gate{list-style:none;counter-reset:g;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:.1rem 2.4rem}
ol.gate li{counter-increment:g;display:grid;grid-template-columns:auto 1fr;gap:.9rem;
  align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule);font-size:.95rem;min-width:0}
ol.gate li::before{content:counter(g,decimal-leading-zero);
  font:400 .74rem/1.9 "Google Sans Code","Google Sans",monospace;color:var(--gold)}
ol.gate li>span{min-width:0;overflow-wrap:anywhere}
.q{display:block;color:var(--ink-2);font-size:.8rem;line-height:1.6;margin-top:.15rem}
@media(max-width:640px){ol.gate{grid-template-columns:1fr}}
.open-findings{background:var(--card);border:1px solid var(--rule);border-radius:3px;
  padding:14px 18px;margin:1.4rem 0 0}
.open-findings p{margin:0 0 .7rem;font-size:.95rem}
.open-findings p:last-child{margin:0}
.wide blockquote{margin:2.4rem 0 0;padding:22px 26px;background:var(--card);border:1px solid var(--rule);
  border-radius:3px;font:400 1.02rem/1.75 "Google Sans",system-ui,sans-serif}
blockquote p{margin:0 0 .8rem}blockquote p:last-child{margin:0}
blockquote b{color:var(--gold);font-weight:600}
blockquote cite{display:block;margin-top:1rem;font:400 .78rem/1.7 "Google Sans Code","Google Sans",monospace;
  font-style:normal;color:var(--ink-2)}

footer{margin:3.2rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font:400 .8rem/1.8 "Google Sans Code","Google Sans",monospace;color:var(--ink-2)}
footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);
  display:inline-flex;align-items:center;min-height:44px}
footer a:hover{color:var(--gold);border-color:var(--gold)}
footer a:has(mark){border-bottom-color:transparent}
@media print{.bar nav,.skip{display:none}body{padding:0}}