/* Ledger Kernel · research-stack — site stylesheet.
   The visual identity is the approved one-page landing (site/landing/index.html, commit d8bbfbb):
   one stroke weight, ledger blue as the sole accent, red only for kill/reject, green only for
   confirmed checks, amber for RECORDED, mono labels on an 8 px grid, both themes via tokens. */

:root{
  --paper:#f4f5f1; --sheet:#ffffff; --sheet-2:#eceee8;
  --rule:#d8dbd3; --rule-2:#b9beb4;
  --ink:#14171e; --ink-2:#454b57; --ink-3:#767c88;
  --blue:#1f3fbe; --blue-soft:#e3e8fa; --blue-on:#ffffff; --blue-line:#9fb0f0;
  --red:#b4271f; --red-soft:#f8e3e0;
  --green:#1c6e43; --green-soft:#dff0e5;
  --amber:#8f5d00; --amber-soft:#f6ead0;
  --hl:#dfe5fa; --hl-line:#1f3fbe;
  --shadow:0 1px 0 rgba(20,23,30,.04), 0 12px 32px -16px rgba(20,23,30,.18);
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0e1116; --sheet:#151920; --sheet-2:#1b2029;
    --rule:#262b35; --rule-2:#3a404c;
    --ink:#e6e8e3; --ink-2:#aeb3bc; --ink-3:#7b818c;
    --blue:#8aa0ff; --blue-soft:#1b2447; --blue-on:#0b1020; --blue-line:#3f52a8;
    --red:#f0857a; --red-soft:#3b1a17;
    --green:#6ccb93; --green-soft:#12301e;
    --amber:#e2b04a; --amber-soft:#3a2c0c;
    --hl:#1f2a52; --hl-line:#8aa0ff;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0e1116; --sheet:#151920; --sheet-2:#1b2029;
  --rule:#262b35; --rule-2:#3a404c;
  --ink:#e6e8e3; --ink-2:#aeb3bc; --ink-3:#7b818c;
  --blue:#8aa0ff; --blue-soft:#1b2447; --blue-on:#0b1020; --blue-line:#3f52a8;
  --red:#f0857a; --red-soft:#3b1a17;
  --green:#6ccb93; --green-soft:#12301e;
  --amber:#e2b04a; --amber-soft:#3a2c0c;
  --hl:#1f2a52; --hl-line:#8aa0ff;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.5;
  font-optical-sizing:auto;
  padding-inline:clamp(16px,4vw,40px); padding-block:0 72px;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
a{color:var(--blue); text-decoration-color:var(--blue-line); text-underline-offset:.15em}
code{font-family:var(--mono); font-size:.86em; background:var(--sheet-2); padding:.08em .32em; border-radius:3px; color:var(--ink)}
h1,h2,h3{font-family:var(--display); font-optical-sizing:auto; text-wrap:balance; margin:0; color:var(--ink)}
p{margin:0}
.page{max-width:1160px; margin-inline:auto; min-width:0}

/* masthead + nav */
.mast{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; padding-block:18px 0; border-bottom:1px solid var(--rule)}
.mast .brand{font-family:var(--display); font-weight:700; font-size:15px; font-variation-settings:"wdth" 92; color:var(--ink); text-decoration:none}
.mast .brand span{color:var(--ink-3); font-weight:500}
.mast .meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.02em}
.nav{flex-basis:100%; display:flex; flex-wrap:wrap; gap:0 24px; padding-block:12px 0; margin:0; list-style:none}
.nav a{font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--ink-2); text-decoration:none; display:inline-flex; align-items:center; gap:8px; padding-block:6px 12px; border-bottom:1px solid transparent; margin-bottom:-1px}
.nav a::before{content:""; width:8px; height:8px; border-radius:2px; background:var(--rule-2)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); font-weight:600; border-bottom-color:var(--blue)}
.nav a[aria-current="page"]::before{background:var(--blue)}

/* page hero */
.hero{padding-block:40px 8px; display:grid; grid-template-columns:minmax(0,1fr); gap:28px}
.hero .eyebrow{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.02em; margin-bottom:22px; display:flex; gap:12px; flex-wrap:wrap}
.hero .eyebrow .ledger{color:var(--blue)}
.hero h1{font-size:clamp(42px,6.4vw,84px); line-height:.94; font-weight:800; letter-spacing:-.035em; font-variation-settings:"wdth" 84; max-width:14ch; margin-bottom:18px}
.hero.sub h1{font-size:clamp(34px,5.2vw,64px); max-width:18ch}
.hero h1 .thin{font-weight:400; font-variation-settings:"wdth" 92; letter-spacing:-.02em}
.hero .lede{font-size:clamp(18px,2.1vw,22px); line-height:1.4; color:var(--ink-2); max-width:52ch}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.chip{font-family:var(--mono); font-size:11.5px; padding:6px 10px; border:1px solid var(--rule-2); border-radius:3px; color:var(--ink-2); background:var(--sheet); display:inline-flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums lining-nums; text-decoration:none}
.chip i{width:8px; height:8px; border-radius:2px; display:inline-block; background:var(--green)}
.chip i.fail{background:var(--red)} .chip i.amber{background:var(--amber)}
a.chip:hover{border-color:var(--blue); color:var(--ink)}

/* entries */
.entry{display:grid; grid-template-columns:172px minmax(0,1fr); gap:0 40px; padding-block:56px 8px; border-top:1px solid var(--rule)}
.folio{font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--ink-3); letter-spacing:.02em; display:flex; flex-direction:column; gap:4px; position:sticky; top:16px; align-self:start}
.folio .seq{color:var(--ink); font-weight:600} .folio .ledger{color:var(--blue)} .folio .kind{word-break:break-all}
.body{min-width:0}
.body h2{font-size:clamp(28px,4.2vw,42px); line-height:1.04; font-weight:750; letter-spacing:-.022em; font-variation-settings:"wdth" 88; max-width:24ch; margin-bottom:18px}
.body h3{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:28px 0 10px}
.body h3:first-child{margin-top:0}
.prose{font-size:17px; line-height:1.55; color:var(--ink); max-width:66ch; margin-bottom:18px}
.prose + .prose{margin-top:-6px}
.prose b{font-weight:600}
.cap{font-size:15.5px; line-height:1.5; color:var(--ink-2); max-width:70ch; margin-top:14px}
.cap b{color:var(--ink); font-weight:600}
.cap .src, .src{display:block; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:6px; letter-spacing:.01em}
.next{margin-top:28px; font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--ink-3)}
.next a{color:var(--blue)}

/* doors (index) */
.doors{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:8px}
.door{display:block; background:var(--sheet); padding:18px 18px 20px; text-decoration:none; color:var(--ink); min-width:0}
.door:hover{background:var(--blue-soft)}
.door .folio{position:static; flex-direction:row; flex-wrap:wrap; gap:4px 12px; margin-bottom:14px}
.door strong{display:block; font-family:var(--display); font-size:clamp(22px,2.6vw,28px); line-height:1.05; font-weight:750; letter-spacing:-.022em; font-variation-settings:"wdth" 88; margin-bottom:10px}
.door span.what{display:block; font-size:15px; line-height:1.45; color:var(--ink-2)}
.door .go{display:block; margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--blue); letter-spacing:.02em}

/* figures */
.fig{margin:0; background:var(--sheet); border:1px solid var(--rule); border-radius:4px; padding:10px 8px 6px; overflow-x:auto; max-width:100%; min-width:0}
.fig svg{display:block; width:100%; height:auto; max-width:100%; min-width:560px; font-family:var(--mono); color:var(--ink-2)}
.fig.narrow svg{min-width:0}
.fig.grid svg{background-image:radial-gradient(var(--rule) 1px, transparent 1px); background-size:24px 24px; background-position:12px 12px}
.fig-phone{display:none}
@media (max-width:640px){ .fig-wide{display:none} .fig-phone{display:block} }

/* svg vocabulary */
.ln{stroke:var(--ink-2); stroke-width:1.25; fill:none}
.ln.thin{stroke:var(--rule-2); stroke-width:1}
.ln.acc{stroke:var(--blue); stroke-width:1.75}
.ln.bad{stroke:var(--red); stroke-width:1.5}
.ln.ok{stroke:var(--green); stroke-width:1.5}
.ln.dash{stroke-dasharray:4 4}
.ln.flow{stroke:var(--blue); stroke-width:2; stroke-dasharray:3 11; stroke-linecap:round}
.bx{fill:var(--sheet); stroke:var(--ink-2); stroke-width:1.25}
.bx.acc{fill:var(--blue-soft); stroke:var(--blue)}
.bx.dim{fill:var(--sheet-2); stroke:var(--rule-2)}
.bx.bad{fill:var(--red-soft); stroke:var(--red)}
.bx.ok{fill:var(--green-soft); stroke:var(--green)}
.bx.dash{stroke-dasharray:4 3}
.bx.ink{fill:var(--ink); stroke:none}
.band{fill:none; stroke:var(--rule-2); stroke-width:1; stroke-dasharray:2 4}
.fill-acc{fill:var(--blue)} .fill-dim{fill:var(--rule-2)} .fill-bad{fill:var(--red)} .fill-ok{fill:var(--green)} .fill-hl{fill:var(--hl)} .fill-sheet{fill:var(--sheet)} .fill-ink{fill:var(--ink)}
.t{fill:var(--ink); font-size:12px; font-weight:600}
.t2{fill:var(--ink-2); font-size:11px}
.t3{fill:var(--ink-3); font-size:10px}
.ts{fill:var(--ink); font-family:var(--serif); font-size:12.5px}
.ts.q{fill:var(--ink-2); font-style:italic}
.tl{fill:var(--ink-3); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.tb{fill:var(--blue)} .tr{fill:var(--red)} .tg{fill:var(--green)} .ton{fill:var(--paper)}
.tw{font-weight:600}

/* stat tiles */
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-bottom:12px}
.tiles div{background:var(--sheet); padding:12px 14px 12px; min-width:0}
.tiles div.legend{background:var(--sheet-2)}
.tiles div.legend .l{color:var(--ink-2); margin-top:0}
.tiles .id{font-family:var(--mono); font-size:10.5px; color:var(--blue); letter-spacing:.04em}
.tiles .n{font-family:var(--display); font-size:22px; line-height:1.1; font-weight:750; letter-spacing:-.02em; font-variation-settings:"wdth" 86; color:var(--ink); margin-top:4px; font-variant-numeric:lining-nums tabular-nums}
.tiles .l{font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:4px; line-height:1.4}
.tiles .v{font-family:var(--mono); font-size:10px; font-weight:600; color:var(--green); letter-spacing:.06em; margin-top:6px}
.tiles .v.rec{color:var(--amber)}
.tiles .v.fail{color:var(--red)}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* record tables */
.rec-wrap{overflow-x:auto; max-width:100%; border:1px solid var(--rule); background:var(--sheet); border-radius:4px}
.rec{border-collapse:collapse; width:100%; min-width:560px; font-family:var(--mono); font-size:11.5px; line-height:1.45; color:var(--ink-2); font-variant-numeric:tabular-nums lining-nums}
.rec th{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:10px 12px 8px; border-bottom:1px solid var(--rule); background:var(--sheet-2); white-space:nowrap}
.rec td{padding:8px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
.rec tr:last-child td{border-bottom:0}
.rec td.num, .rec th.num{text-align:right; white-space:nowrap}
.rec td.k{color:var(--ink); font-weight:600; white-space:nowrap}
.rec td.q{font-family:var(--serif); font-size:13.5px; color:var(--ink); min-width:22ch}
.rec .pass{color:var(--green); font-weight:600} .rec .fail{color:var(--red); font-weight:600} .rec .rec-v{color:var(--amber); font-weight:600}
.rec .dim{color:var(--ink-3)}

/* lists in the mono register */
.ledger-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.ledger-list li{display:grid; grid-template-columns:132px minmax(0,1fr); gap:4px 20px; padding:10px 0; border-bottom:1px solid var(--rule); font-size:15px; line-height:1.45}
.ledger-list li .k{font-family:var(--mono); font-size:11.5px; color:var(--blue); font-weight:600; letter-spacing:.02em; padding-top:3px; word-break:break-word}
.ledger-list li .k.bad{color:var(--red)}
.ledger-list li .d{color:var(--ink); max-width:70ch}
.ledger-list li .d small{display:block; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:4px}

/* packages (roadmap) */
.stage{margin-top:8px}
.pkgs{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.pkgs li{display:grid; grid-template-columns:72px minmax(0,1fr); gap:2px 20px; padding:12px 0; border-bottom:1px solid var(--rule)}
.pkgs .id{font-family:var(--mono); font-size:11.5px; color:var(--blue); font-weight:600; letter-spacing:.02em; padding-top:2px}
.pkgs .id.fix{color:var(--red)}
.pkgs .id.done{color:var(--green)}
.pkgs .title{font-family:var(--display); font-size:19px; line-height:1.15; font-weight:700; letter-spacing:-.015em; font-variation-settings:"wdth" 90; color:var(--ink)}
.pkgs .what{font-size:15px; line-height:1.45; color:var(--ink-2); max-width:70ch; margin-top:4px}
.pkgs .done-when{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:6px; line-height:1.5; max-width:90ch}
.pkgs .done-when b{color:var(--ink-2); font-weight:600}

/* status note (try) */
.status{border:1px solid var(--rule-2); border-radius:4px; background:var(--sheet); padding:16px 18px; margin-top:8px; max-width:70ch}
.status .k{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.status p{font-size:15.5px; line-height:1.5; color:var(--ink)}
.status .chips{margin-top:12px}

/* code block */
pre{font-family:var(--mono); font-size:12px; line-height:1.55; color:var(--ink); background:var(--sheet); border:1px solid var(--rule); border-radius:4px; padding:12px 14px; overflow-x:auto; margin:0; max-width:100%}
pre code{background:none; padding:0; font-size:inherit}

/* sources */
.sources{border-top:1px solid var(--rule); margin-top:56px; padding-top:22px}
.sources h3{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; font-weight:600}
.sources ul{list-style:none; padding:0; margin:0; columns:2; column-gap:32px}
.sources li{font-family:var(--mono); font-size:11.5px; line-height:1.55; color:var(--ink-2); break-inside:avoid; margin:0 0 6px; padding:0}
.sources li b{color:var(--ink); font-weight:600}
.colophon{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:26px; line-height:1.6}
.colophon a{color:var(--ink-2)}

/* ---------- motion: plays once when the figure scrolls into view; every keyframe ends at the static state ---------- */
.sx{transform-box:fill-box; transform-origin:left center}
.sy{transform-box:fill-box; transform-origin:center bottom}
.mv{transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .fL .flow{animation:flow 1.4s linear infinite}
  .fL .flow.d1{animation-delay:-.2s} .fL .flow.d2{animation-delay:-.4s} .fL .flow.d3{animation-delay:-.6s} .fL .flow.d4{animation-delay:-.8s} .fL .flow.d5{animation-delay:-1s} .fL .flow.d6{animation-delay:-1.2s} .fL .flow.d7{animation-delay:-.3s}
  @keyframes flow{to{stroke-dashoffset:-28}}
  .play .fB .an-hl{animation:sxIn 7s ease-out 1 both}
  .play .fB .an-conn{animation:connIn 7s linear 1 both}
  .play .fB .an-span{animation:sxIn2 7s ease-out 1 both}
  .play .fB .an-bar{animation:sxIn3 7s ease-out 1 both}
  .play .fB .an-ok{animation:fadeLate 7s ease-out 1 both}
  @keyframes sxIn{0%,5%{transform:scaleX(0)} 18%,100%{transform:scaleX(1)}}
  @keyframes connIn{0%,18%{opacity:0; stroke-dashoffset:48} 22%{opacity:1} 36%,100%{opacity:1; stroke-dashoffset:0}}
  @keyframes sxIn2{0%,36%{transform:scaleX(0)} 56%,100%{transform:scaleX(1)}}
  @keyframes sxIn3{0%,56%{transform:scaleX(0)} 80%,100%{transform:scaleX(1)}}
  @keyframes fadeLate{0%,78%{opacity:0} 84%,100%{opacity:1}}
  .play .fA .ev.e1{animation:ap1 7s ease-out 1 both} .play .fA .ev.e2{animation:ap2 7s ease-out 1 both} .play .fA .ev.e3{animation:ap3 7s ease-out 1 both} .play .fA .ev.e4{animation:ap4 7s ease-out 1 both} .play .fA .ev.e5{animation:ap5 7s ease-out 1 both}
  .play .fA .edit{animation:apEdit 7s ease-out 1 both} .play .fA .editx{animation:apEditX 7s ease-out 1 both}
  @keyframes ap1{0%,4%{opacity:0} 9%,100%{opacity:1}} @keyframes ap2{0%,14%{opacity:0} 19%,100%{opacity:1}} @keyframes ap3{0%,24%{opacity:0} 29%,100%{opacity:1}} @keyframes ap4{0%,34%{opacity:0} 39%,100%{opacity:1}} @keyframes ap5{0%,44%{opacity:0} 49%,100%{opacity:1}}
  @keyframes apEdit{0%,58%{opacity:0} 64%,100%{opacity:1}} @keyframes apEditX{0%,72%{opacity:0} 78%,100%{opacity:1}}
  .play .fD .cardA{animation:slideA 8s ease-in-out 1 both} .play .fD .cardB{animation:slideB 8s ease-in-out 1 both}
  .play .fD .rung.r1{animation:rg1 8s steps(1,end) 1 both} .play .fD .rung.r2{animation:rg2 8s steps(1,end) 1 both} .play .fD .rung.r3{animation:rg3 8s steps(1,end) 1 both} .play .fD .rung.r4{animation:rg4 8s steps(1,end) 1 both} .play .fD .rung.r5{animation:rg5 8s steps(1,end) 1 both} .play .fD .rung.r6{animation:rg6 8s steps(1,end) 1 both}
  .play .fD .passA{animation:fadeAt45 8s ease-out 1 both} .play .fD .judgeA{animation:fadeAt60 8s ease-out 1 both} .play .fD .loopA{animation:loopDraw 8s ease-out 1 both} .play .fD .scoreA{animation:fadeAt85 8s ease-out 1 both}
  .play .fD .rejB{animation:rejOn 8s ease-out 1 both} .play .fD .cardB rect{animation:cardRed 8s ease-out 1 both}
  @keyframes slideA{0%{transform:translateX(0)} 20%,100%{transform:translateX(130px)}}
  @keyframes slideB{0%,8%{transform:translateX(0)} 30%,100%{transform:translateX(130px)}}
  @keyframes rg1{0%,22%{opacity:0} 25%,100%{opacity:1}} @keyframes rg2{0%,25%{opacity:0} 28%,100%{opacity:1}} @keyframes rg3{0%,28%{opacity:0} 31%,100%{opacity:1}} @keyframes rg4{0%,31%{opacity:0} 34%,100%{opacity:1}} @keyframes rg5{0%,34%{opacity:0} 37%,100%{opacity:1}} @keyframes rg6{0%,37%{opacity:0} 40%,100%{opacity:1}}
  @keyframes fadeAt45{0%,44%{opacity:0} 50%,100%{opacity:1}} @keyframes fadeAt60{0%,58%{opacity:0} 64%,100%{opacity:1}} @keyframes fadeAt85{0%,84%{opacity:0} 90%,100%{opacity:1}}
  @keyframes loopDraw{0%,66%{opacity:0; stroke-dashoffset:320} 70%{opacity:1} 84%,100%{opacity:1; stroke-dashoffset:0}}
  @keyframes rejOn{0%,40%{opacity:0} 46%,100%{opacity:1}}
  @keyframes cardRed{0%,38%{fill:var(--sheet); stroke:var(--ink-2)} 44%,100%{fill:var(--red-soft); stroke:var(--red)}}
  .play .fC .head1{animation:head1 8s linear 1 both} .play .fC .head2{animation:head2 8s linear 1 both}
  .play .fC .kill{animation:killOn 8s steps(1,end) 1 both} .play .fC .after1{animation:dimAfter 8s steps(1,end) 1 both}
  .play .fC .served{animation:servedOn 8s ease-out 1 both} .play .fC .zero{animation:fadeAt85 8s ease-out 1 both}
  @keyframes head1{0%{transform:translateX(0); opacity:1} 40%{transform:translateX(310px); opacity:1} 42%,100%{transform:translateX(310px); opacity:0}}
  @keyframes head2{0%,46%{transform:translateX(0); opacity:0} 48%{opacity:1} 84%{transform:translateX(230px); opacity:1} 86%,100%{transform:translateX(230px); opacity:0}}
  @keyframes killOn{0%,40%{opacity:0} 41%,100%{opacity:1}}
  @keyframes dimAfter{0%,40%{opacity:0} 41%,100%{opacity:1}}
  @keyframes servedOn{0%,46%{opacity:0} 56%,100%{opacity:1}}
  .play .fG .rp.k0{animation:rp0 6s ease-out 1 both} .play .fG .rp.k1{animation:rp1 6s ease-out 1 both} .play .fG .rp.k2{animation:rp2 6s ease-out 1 both} .play .fG .rp.k3{animation:rp3 6s ease-out 1 both} .play .fG .rp.k4{animation:rp4 6s ease-out 1 both} .play .fG .rp.k5{animation:rp5 6s ease-out 1 both} .play .fG .rp.k6{animation:rp6 6s ease-out 1 both} .play .fG .rp.k7{animation:rp7 6s ease-out 1 both} .play .fG .rp.k8{animation:rp8 6s ease-out 1 both} .play .fG .rp.k9{animation:rp9 6s ease-out 1 both}
  .play .fG .rpres{animation:fadeAt85 6s ease-out 1 both}
  @keyframes rp0{0%,10%{opacity:0} 14%,100%{opacity:1}} @keyframes rp1{0%,16%{opacity:0} 20%,100%{opacity:1}} @keyframes rp2{0%,22%{opacity:0} 26%,100%{opacity:1}} @keyframes rp3{0%,28%{opacity:0} 32%,100%{opacity:1}} @keyframes rp4{0%,34%{opacity:0} 38%,100%{opacity:1}} @keyframes rp5{0%,40%{opacity:0} 44%,100%{opacity:1}} @keyframes rp6{0%,46%{opacity:0} 50%,100%{opacity:1}} @keyframes rp7{0%,52%{opacity:0} 56%,100%{opacity:1}} @keyframes rp8{0%,58%{opacity:0} 62%,100%{opacity:1}} @keyframes rp9{0%,64%{opacity:0} 68%,100%{opacity:1}}
  .play .fE .rsv.b1{animation:rs1 8s ease-out 1 both} .play .fE .rsv.b2{animation:rs2 8s ease-out 1 both} .play .fE .rsv.b3{animation:rs3 8s ease-out 1 both} .play .fE .rsv.b4{animation:rs4 8s ease-out 1 both} .play .fE .rsv.b5{animation:rs5 8s ease-out 1 both}
  .play .fE .stl.b1{animation:st1 8s ease-out 1 both} .play .fE .stl.b2{animation:st2 8s ease-out 1 both} .play .fE .stl.b3{animation:st3 8s ease-out 1 both} .play .fE .stl.b4{animation:st4 8s ease-out 1 both} .play .fE .stl.b5{animation:st5 8s ease-out 1 both}
  .play .fE .refuse{animation:refuseOn 8s ease-out 1 both}
  @keyframes rs1{0%,4%{opacity:0} 8%{opacity:1} 20%,100%{opacity:0}} @keyframes st1{0%,18%{transform:scaleX(0)} 24%,100%{transform:scaleX(1)}}
  @keyframes rs2{0%,16%{opacity:0} 20%{opacity:1} 32%,100%{opacity:0}} @keyframes st2{0%,30%{transform:scaleX(0)} 36%,100%{transform:scaleX(1)}}
  @keyframes rs3{0%,28%{opacity:0} 32%{opacity:1} 44%,100%{opacity:0}} @keyframes st3{0%,42%{transform:scaleX(0)} 48%,100%{transform:scaleX(1)}}
  @keyframes rs4{0%,40%{opacity:0} 44%{opacity:1} 56%,100%{opacity:0}} @keyframes st4{0%,54%{transform:scaleX(0)} 60%,100%{transform:scaleX(1)}}
  @keyframes rs5{0%,52%{opacity:0} 56%{opacity:1} 68%,100%{opacity:0}} @keyframes st5{0%,66%{transform:scaleX(0)} 72%,100%{transform:scaleX(1)}}
  @keyframes refuseOn{0%,76%{opacity:0} 82%,100%{opacity:1}}
  .play .fF .bar{animation:grow 1.4s cubic-bezier(.2,.7,.2,1) 1 both}
  @keyframes grow{from{transform:scaleY(0)} to{transform:scaleY(1)}}
  .play .fQ .dep{animation:depDraw 4s ease-out 1 both}
  .play .fQ .dep.d2{animation-delay:.3s} .play .fQ .dep.d3{animation-delay:.6s} .play .fQ .dep.d4{animation-delay:.9s}
  @keyframes depDraw{0%{opacity:0; stroke-dashoffset:200} 20%{opacity:1} 60%,100%{opacity:1; stroke-dashoffset:0}}
}

/* responsive */
@media (max-width:820px){
  .entry{grid-template-columns:minmax(0,1fr); gap:12px; padding-top:44px}
  .folio{position:static; flex-direction:row; flex-wrap:wrap; gap:4px 14px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .doors{grid-template-columns:minmax(0,1fr)}
  .ledger-list li{grid-template-columns:minmax(0,1fr)}
  .pkgs li{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .sources ul{columns:1}
  .tiles, .tiles.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{gap:0 16px}
}