/* SVG art (pitch-art.js) — shared by the /brief deck and the homepage figures (home-art.js).
   Motion runs only inside a .pa-play ancestor (the open slide, or a figure on screen) and plays ONCE: every
   sequence has a finite iteration count that ends inside its held pose, and the element then rests in its
   un-animated style, which is that same "after" state. Ambient motion (ripples, spins, travelling dots) runs once
   and is over within about five seconds. Removing .pa-play (leaving the slide) and adding it again replays from the start. Reduced motion
   sees the resting pose only. */
/* Tints the kind tokens do not cover, defined once (dark values below). The five kind colours are the site's session
   kinds plus slate; Mentor Rose (--rose) is only for people (students, the mentor, the teacher on the course) and
   for EMCE's own answer on the deck. */
.pa,.pa-lanes-cards{--k0:var(--blue); --k1:var(--gray); --k2:var(--ok,#16A34A); --k3:var(--amber); --k4:var(--eve,#4F46E5);
  --k4-fill:#4F46E5;
  --rose:var(--fac,#BE185D); --rose-ink:var(--fac,#BE185D); --rose-bg:#FCE7F3; --rose-tint:#FDF2F8; --rose-line:#F9A8D4;
  --eve-line:#C7D2FE; --on-mark:var(--on-blue,#FFFFFF); --leaf:#15803D; --ease:cubic-bezier(.16,1,.3,1)}
/* ---------------------------------------------------------------- art: shared marks */
.pa-txt{font-family:var(--font); fill:var(--ink); --fs:15px}
.pa-lbl{--fs:15px; font-weight:600; fill:var(--ink-2)}
.pa-lbl.sm{--fs:13.5px; font-weight:500}
.pa-lbl.strong{font-weight:800; fill:var(--ink)}
.pa-lbl.muted{fill:var(--gray)}
.pa-lbl.rose{fill:var(--rose-ink)}
.pa-lbl.on{fill:var(--on-mark)}
.pa-axis{--fs:15px; font-weight:700; fill:var(--gray)}
.pa-axis-line{fill:none; stroke:var(--gray-2); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.pa-dot{fill:var(--k0)}
.pa-dot.k1{fill:var(--k1)} .pa-dot.k2{fill:var(--k2)} .pa-dot.k3{fill:var(--k3)} .pa-dot.k4{fill:var(--k4)}
.pa-ring{fill:none; stroke:var(--blue-line); stroke-width:2}
.pa-node-c{fill:var(--blue)} .pa-node-c.rose{fill:var(--rose)}
.pa-node-t{font-family:"Inter",sans-serif; --fs:14px; font-weight:800; fill:var(--on-mark); text-anchor:middle}
.pa-hub{fill:var(--blue-soft); stroke:var(--blue); stroke-width:2}
.pa-hub.rose{fill:var(--rose-bg); stroke:var(--rose)}
.pa-hub-t{font-family:"Inter",sans-serif; --fs:24px; font-weight:800; fill:var(--ink); letter-spacing:-.02em}
/* Thai hub labels ("คุณ"): the Thai face FIRST (with Inter first, Safari can take the stacked vowel/tone
   marks of "ผู้" from another font so they drift off their consonant), no negative tracking (it splits marks
   from their consonant), bold at the weight the Thai face really has */
.pa-hub-t.sm{font-family:"IBM Plex Sans Thai","Noto Sans Thai","Thonburi",sans-serif; --fs:15px; font-weight:700;
  letter-spacing:0; font-kerning:normal}
.pa-hub-s{font-family:"Inter",sans-serif; --fs:15px; font-weight:700; fill:var(--blue-deep); text-anchor:middle}
.pa-centre{fill:var(--paper); stroke:var(--ink-2); stroke-width:2.5}
.pa-chip{fill:var(--blue-soft); stroke:var(--blue-line)}
.pa-chip.k1{fill:var(--panel); stroke:var(--gray-2)} .pa-chip.k2{fill:var(--ok-bg); stroke:var(--ok-line)}
.pa-chip.k3{fill:var(--warn-bg); stroke:var(--warn-line)} .pa-chip.k4{fill:var(--eve-bg,#EEF0FF); stroke:var(--eve-line)}
.pa-chip-t{--fs:14px; font-weight:700; fill:var(--ink); text-anchor:middle}
.pa-link,.pa-spoke{fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; opacity:.55}
.pa-spoke{stroke:var(--blue-line); opacity:1}
.pa-link-faint{fill:none; stroke:var(--gray-2); stroke-width:1.6; stroke-dasharray:100; stroke-dashoffset:62; stroke-linecap:round}
.pa-pulse{fill:var(--rose)}
.pa-wave{fill:none; stroke:var(--blue); stroke-width:2; opacity:0}
.pa-wave.rose{stroke:var(--rose)}
.pa-star{fill:var(--rose)}
.pa-now{fill:var(--amber)} .pa-wave.now{stroke:var(--amber)} .pa-lbl.now{fill:var(--amber)}
.pa-track-line{stroke:var(--gray-2); stroke-width:4; stroke-linecap:round}
.pa-tick{fill:var(--paper); stroke:var(--blue); stroke-width:3}
.pa-track-dash{stroke:var(--blue); stroke-width:4; stroke-dasharray:6 9; stroke-linecap:round; opacity:.35}
.pa-track-solid{stroke:var(--blue); stroke-width:4; stroke-linecap:round}
.pa-draw{stroke-dasharray:100; stroke-dashoffset:0}
.pa-divider{fill:none; stroke:var(--line); stroke-width:1.5}

/* draw → hold: .6 of a cycle ends inside the hold (40–86%), where the resting style takes over */
.pa-play .pa-draw{animation:pa-draw 7s var(--ease) .6}
@keyframes pa-draw{0%{stroke-dashoffset:100; opacity:1} 40%,86%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:0; opacity:0}}
/* ambient motion (ripples, spins, travelling dots) runs once and is over within about five seconds of the art opening */
.pa-play .pa-wave{transform-box:fill-box; transform-origin:center; animation:pa-wave 2.2s var(--d,0s) ease-out 1}
@keyframes pa-wave{0%{transform:scale(1); opacity:.55} 100%{transform:scale(3.4); opacity:0}}

/* 1 · gather */
.pa-art-gather .pa-dot{transform:translate(var(--x1),var(--y1))}
.pa-play .pa-art-gather .pa-dot{animation:pa-gather 9s var(--d,0s) var(--ease) .6}
@keyframes pa-gather{0%,8%{transform:translate(var(--x0),var(--y0)); opacity:.45} 42%,80%{transform:translate(var(--x1),var(--y1)); opacity:1}
  100%{transform:translate(var(--x0),var(--y0)); opacity:.45}}
.pa-art-gather .pa-ring{stroke:var(--blue-line)}
.pa-play .pa-art-gather .pa-ring{animation:pa-draw 9s var(--ease) .6}
.pa-play .pa-art-gather .pa-node-c{transform-box:fill-box; transform-origin:center; animation:pa-breathe 9s calc(var(--i) * .12s) var(--ease) .6}
@keyframes pa-breathe{0%,34%,100%{transform:scale(.86)} 46%,82%{transform:scale(1)}}
@keyframes pa-pop{0%,34%{transform:scale(.2); opacity:0} 46%,82%{transform:scale(1); opacity:1} 100%{transform:scale(.2); opacity:0}}

/* 2 · islands */
.pa-play .pa-circling{transform-origin:0 0; animation:pa-spin 2.6s var(--d,0s) linear 1}
.pa-play .pa-link-faint{animation:pa-reach 4.5s var(--d,0s) ease-in-out 1.5}
@keyframes pa-reach{0%,100%{stroke-dashoffset:100} 50%{stroke-dashoffset:62}}
@keyframes pa-spin{to{transform:rotate(360deg)}}

/* 3 · courses */
.pa-flow{fill:none; stroke:var(--blue-line); stroke-width:2.5; stroke-dasharray:100}
.pa-play .pa-flow{animation:pa-draw 6s var(--d,0s) var(--ease) .6}
.pa-track{fill:var(--line-2)} .pa-track.empty{fill:none; stroke:var(--gray-2); stroke-width:1.5; stroke-dasharray:5 5}
.pa-bar{transform-box:fill-box; transform-origin:left center}
.b-self{fill:var(--blue)} .b-mentor{fill:var(--k4)} .b-follow{fill:none}
.pa-play .pa-bar{animation:pa-grow 6s var(--d,0s) var(--ease) .6}
@keyframes pa-grow{0%{transform:scaleX(0)} 35%,85%{transform:scaleX(1)} 100%{transform:scaleX(0)}}
.pa-coin{fill:var(--warn-bg); stroke:var(--amber); stroke-width:1.5}
.pa-play .pa-coin{animation:pa-coin 6s var(--d,0s) var(--ease) .6}
@keyframes pa-coin{0%{opacity:0; transform:translateY(-14px)} 20%,85%{opacity:1; transform:none} 100%{opacity:0}}

/* 4 · paths */
.pa-route{fill:none; stroke:var(--blue); stroke-width:2.5; stroke-dasharray:100; stroke-linecap:round}
.pa-route.lost{stroke:var(--gray-2)}
.pa-play .pa-route{animation:pa-draw 6.5s var(--d,0s) var(--ease) .6}
.pa-stop{fill:none; stroke:var(--danger); stroke-width:2.5; stroke-linecap:round}
.pa-domain{fill:none; stroke:var(--k0); stroke-width:7; stroke-linecap:round}
.pa-domain.k2{stroke:var(--k2)} .pa-domain.k3{stroke:var(--k3)} .pa-domain.k4{stroke:var(--k4)}
/* the key under the picture: a short stroke in the arc's colour beside its name */
.pa-key-sw{fill:none; stroke:var(--k0); stroke-width:7; stroke-linecap:round}
.pa-key-sw.k2{stroke:var(--k2)} .pa-key-sw.k3{stroke:var(--k3)} .pa-key-sw.k4{stroke:var(--k4)}
.pa-play .pa-domain{animation:pa-blink 1.6s var(--d,0s) ease-in-out 2}
@keyframes pa-blink{0%,100%{opacity:1} 50%{opacity:.25}}
.pa-person{fill:var(--rose-bg); stroke:var(--rose); stroke-width:2.5}
.pa-person.t{fill:var(--blue-soft); stroke:var(--blue)}

/* 5 · tracks */
.pa-play .pa-art-tracks .pa-tr-node{transform-box:fill-box; transform-origin:center; animation:pa-pop 7s calc(.8s + var(--i) * .25s) var(--ease) .6}
.pa-tr-disc{fill:var(--blue-fill,#2563EB); stroke:var(--paper); stroke-width:3}
.pa-tr-t{font-family:"Inter",sans-serif; font-size:13px; font-weight:800; fill:var(--on-mark,#fff); text-anchor:middle}
.pa-tr-this{fill:var(--blue-deep)}
.pa-art-tracks .pa-tick{stroke:var(--gray)}

/* 6 · matrix */
.pa-quad{cursor:pointer; outline:none}
.pa-quad-bg{fill:transparent; stroke:var(--line); stroke-width:1.5; stroke-dasharray:4 5; transition:fill .2s}
.pa-quad:hover .pa-quad-bg,.pa-quad:focus-visible .pa-quad-bg{fill:var(--blue-tint); stroke:var(--blue); stroke-dasharray:none}
.pa-quad.q-both .pa-quad-bg{stroke:var(--rose); stroke-dasharray:none; fill:var(--rose-tint)}

/* 7 · scattered topics → review (books + 11 AMEE Guides) → 5 sub-modules: one 9s sequence played once; the
   resting state (no animation) is the final pose, so reduced motion and the end of the run look the same */
.pa-lane{fill:var(--panel); stroke:var(--line)}
.pa-node-t.sm{--fs:13px}
.pa-asm-ct{font-family:"Inter",sans-serif; --fs:13px; font-weight:600; fill:var(--ink); text-anchor:middle}
.pa-ln-tt{font-family:"Inter","IBM Plex Sans Thai",sans-serif; --fs:14px; font-weight:600; fill:var(--ink)}
.pa-ln-hub{opacity:0}
.pa-ln-hub-c{fill:var(--blue-soft); stroke:var(--blue); stroke-width:1.5}
.pa-ln-hub-t{font-family:"IBM Plex Sans Thai","Noto Sans Thai",sans-serif; --fs:15px; font-weight:700; fill:var(--blue-deep); text-anchor:middle}
.pa-ln-hub-s{font-family:"Inter","IBM Plex Sans Thai",sans-serif; --fs:12.5px; font-weight:700; fill:var(--blue-deep); text-anchor:middle}
/* beat names in slate at full strength (≥4.5:1); the beat playing, and at rest the last one, in blue */
.pa-phase-t{font-family:"IBM Plex Sans Thai","Noto Sans Thai","Thonburi",sans-serif; --fs:13.5px; font-weight:700; fill:var(--gray)}
.pa-phase-dot{fill:var(--gray-2)}
.pa-phase-rule{fill:none; stroke:var(--line); stroke-width:2}
.pa-phase.ph3 .pa-phase-t{fill:var(--blue-deep)} .pa-phase.ph3 .pa-phase-dot{fill:var(--blue)}
.pa-play .pa-ln-chip{animation:pa-ln-chip 9s var(--d,0s) var(--ease) 1 both}
.pa-play .pa-ln-hub{animation:pa-ln-hub 9s var(--ease) 1 both}
.pa-play .pa-ln-row{animation:pa-ln-row 9s var(--ease) 1 both}
.pa-play .pa-ln-title{animation:pa-ln-title 9s var(--ease) 1 both}
.pa-play .pa-art-lanes .pa-phase-t,.pa-play .pa-art-lanes .pa-phase-dot{animation:9s var(--ease) 1 both}
.pa-play .ph1 .pa-phase-t{animation-name:pa-ln-ph1-t} .pa-play .ph2 .pa-phase-t{animation-name:pa-ln-ph2-t} .pa-play .ph3 .pa-phase-t{animation-name:pa-ln-ph3-t}
.pa-play .ph1 .pa-phase-dot{animation-name:pa-ln-ph1-d} .pa-play .ph2 .pa-phase-dot{animation-name:pa-ln-ph2-d} .pa-play .ph3 .pa-phase-dot{animation-name:pa-ln-ph3-d}
@keyframes pa-ln-chip{
  0%,24%{transform:translate(var(--sx),var(--sy)) rotate(var(--sr))}
  40%,56%{transform:translate(var(--cx),var(--cy))}
  74%,100%{transform:none}}
@keyframes pa-ln-hub{0%,26%{opacity:0} 36%,56%{opacity:1} 68%,100%{opacity:0}}
@keyframes pa-ln-row{0%,58%{opacity:0} 72%,100%{opacity:1}}
@keyframes pa-ln-title{0%,64%{opacity:0} 80%,100%{opacity:1}}
@keyframes pa-ln-ph1-t{0%,26%{fill:var(--blue-deep)} 32%,100%{fill:var(--gray)}}
@keyframes pa-ln-ph2-t{0%,28%{fill:var(--gray)} 34%,58%{fill:var(--blue-deep)} 64%,100%{fill:var(--gray)}}
@keyframes pa-ln-ph3-t{0%,60%{fill:var(--gray)} 66%,100%{fill:var(--blue-deep)}}
@keyframes pa-ln-ph1-d{0%,26%{fill:var(--blue)} 32%,100%{fill:var(--gray-2)}}
@keyframes pa-ln-ph2-d{0%,28%{fill:var(--gray-2)} 34%,58%{fill:var(--blue)} 64%,100%{fill:var(--gray-2)}}
@keyframes pa-ln-ph3-d{0%,60%{fill:var(--gray-2)} 66%,100%{fill:var(--blue)}}

/* cover: emblem + the year's five modules (resting pose: all shown) */
.pa-cover-disc{fill:var(--paper); stroke:var(--blue-line); stroke-width:2}
.pa-cover-line{fill:none; stroke:var(--blue-line); stroke-width:4; stroke-linecap:round}
.pa-cover-m{font-family:"IBM Plex Sans Thai","Noto Sans Thai","Thonburi",sans-serif; --fs:15px; font-weight:700; fill:var(--ink-2)}
.pa-play .pa-cover-node{transform-box:fill-box; transform-origin:center; animation:pa-cover-pop 8s calc(.6s + var(--i) * .35s) var(--ease) .6}
@keyframes pa-cover-pop{0%{opacity:0; transform:translateY(10px)} 12%,88%{opacity:1; transform:none} 100%{opacity:0}}
.pa-play .pa-art-cover .pa-draw{animation-duration:8s}
/* the emblem's ripples stay close to it, clear of the module path below */
.pa-play .pa-cover-wave{animation-name:pa-cover-wave}
@keyframes pa-cover-wave{0%{transform:scale(1); opacity:.5} 100%{transform:scale(1.45); opacity:0}}

/* close: 5 gaps → 4 solutions → 1 system, one beat after another, once (stopped at .8; resting pose: all shown) */
.pa-sum-h{font-family:"IBM Plex Sans Thai","Noto Sans Thai","Thonburi",sans-serif; --fs:14.5px; font-weight:800; fill:var(--ink); text-anchor:middle}
.pa-sum-t{font-family:"IBM Plex Sans Thai","Noto Sans Thai","Thonburi",sans-serif; --fs:13px; font-weight:600; fill:var(--ink)}
.pa-sum-s{font-family:"IBM Plex Sans Thai","Noto Sans Thai","Thonburi",sans-serif; --fs:12.5px; font-weight:700; fill:var(--blue-deep)}
/* stacked form (phones): sized for a 340-wide frame drawn about 1:1, line pitch 20 for 14px */
.pa-v-tall .pa-sum-h{--fs:15px} .pa-v-tall .pa-sum-t{--fs:14px} .pa-v-tall .pa-sum-s{--fs:13.5px}
.pa-v-tall .pa-sum-emce{--fs:18px} .pa-v-tall .pa-node-t.xs{--fs:13px}
.pa-node-t.xs{--fs:12.5px}
.pa-sum-link{fill:none; stroke:var(--blue); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:100; opacity:.55}
.pa-sum-emce{font-family:"Inter",sans-serif; --fs:17px; font-weight:800; fill:var(--ink); text-anchor:middle; letter-spacing:-.01em}
.pa-sum-link.b{stroke:var(--blue)}
/* a mandate, not a fault: สพพ.'s intent runs straight to the system, dotted (not drawn, it fades in with the b beat) */
.pa-sum-link.c{stroke-dasharray:1 6; stroke-width:3; opacity:.8}
.pa-play .pa-sum-item.gap{animation:pa-sum-in 12s calc(var(--i) * .25s) var(--ease) .8}
.pa-play .pa-sum-link.a{animation:pa-sum-draw-a 12s var(--ease) .8}
.pa-play .pa-sum-item.fix{animation:pa-sum-in-fix 12s calc(var(--i) * .25s) var(--ease) .8}
.pa-play .pa-sum-link.b{animation:pa-sum-draw-b 12s var(--ease) .8}
.pa-play .pa-sum-link.c{animation:pa-sum-fade-c 12s var(--ease) .8}
.pa-play .pa-sum-system{animation:pa-sum-sys 12s var(--ease) .8}
.pa-play .pa-sum-mod{animation:pa-sum-mod 12s calc(var(--i) * .15s) var(--ease) .8}
@keyframes pa-sum-in{0%{opacity:0; transform:translateX(-8px)} 8%,92%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes pa-sum-draw-a{0%,14%{stroke-dashoffset:100; opacity:.55} 26%,92%{stroke-dashoffset:0; opacity:.55} 100%{stroke-dashoffset:0; opacity:0}}
@keyframes pa-sum-in-fix{0%,24%{opacity:0; transform:translateX(-8px)} 32%,92%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes pa-sum-draw-b{0%,38%{stroke-dashoffset:100; opacity:.55} 50%,92%{stroke-dashoffset:0; opacity:.55} 100%{stroke-dashoffset:0; opacity:0}}
@keyframes pa-sum-fade-c{0%,40%{opacity:0} 52%,92%{opacity:.8} 100%{opacity:0}}
@keyframes pa-sum-sys{0%,48%{opacity:0} 58%,92%{opacity:1} 100%{opacity:0}}
@keyframes pa-sum-mod{0%,56%{opacity:0} 64%,92%{opacity:1} 100%{opacity:0}}

/* 8 · orbit */
.pa-tool-t{font-family:"Inter",sans-serif; --fs:13.5px; font-weight:700; fill:var(--ink); text-anchor:middle}
/* rotating groups sit inside translate(cx cy) (spinAround) — origin 0 0 is the centre in every browser */
.pa-spin,.pa-run,.pa-unspin{transform-origin:0 0}
.pa-play .pa-spin{animation:pa-spin 28s linear 2}
.pa-play .pa-spin.rev{animation-duration:5s; animation-direction:reverse; animation-iteration-count:1}
.pa-play .pa-unspin{animation:pa-spin 28s linear 2 reverse}
/* lit one after another, then all rest lit (1.15 ends inside the second lit window) */
.pa-play .lit{animation:pa-lit 6s var(--d,0s) ease-in-out 1.15}
@keyframes pa-lit{0%,30%,100%{opacity:.45} 8%,22%{opacity:1}}
.pa-spoke.lit{stroke:var(--blue); stroke-width:2}
.pa-grow{fill:none; stroke:var(--rose); stroke-width:2; opacity:0}
.pa-play .pa-grow{transform-box:fill-box; transform-origin:center; animation:pa-wave 3.4s var(--d,0s) ease-out 1}

/* 9 · cycle */
.pa-play .pa-run{animation:pa-spin 5s linear 1}
.pa-runner{fill:var(--rose)}
.pa-inner{fill:var(--rose-tint); stroke:var(--rose); stroke-width:1.5; stroke-dasharray:4 6}

/* 11 · ladder */
.pa-step-bg{fill:var(--blue-soft); stroke:var(--blue-line); stroke-width:1.5}
.pa-step{fill:var(--blue); transform-box:fill-box; transform-origin:left center}
.pa-play .pa-step{animation:pa-rise-y 7s var(--d,0s) var(--ease) .6}
@keyframes pa-rise-y{0%{transform:scaleX(0)} 25%,85%{transform:scaleX(1)} 100%{transform:scaleX(0)}}

/* homepage · links on module markers */
.pa-link-node{cursor:pointer}
.pa-link-node .pa-node-c{transition:fill .15s}
.pa-link-node:hover .pa-node-c,.pa-link-node:focus-visible .pa-node-c{fill:var(--blue-deep)}
.pa-hit{fill:transparent}
.pa-focus-ring{fill:none; stroke:none}
.pa-link-node:focus{outline:none}
.pa-link-node:focus-visible .pa-focus-ring{stroke:var(--ink); stroke-width:3}

/* homepage · support circle */
/* the support ring sways a little and comes back (ambient, over in under five seconds, rests where it started) */
.pa-play .pa-spin.slow{animation:pa-sway 4.6s ease-in-out 1}
@keyframes pa-sway{50%{transform:rotate(14deg)}}
.pa-cop{fill:none; stroke:var(--ok-line,#CDEBD6); stroke-width:2; stroke-dasharray:3 7}
.pa-chip-glow{fill:none; stroke:var(--k2); stroke-width:2; opacity:0}
.pa-play .pa-chip-glow{transform-box:fill-box; transform-origin:center; animation:pa-wave 3.2s var(--d,0s) ease-out 1}
.pa-who .pa-person{transition:stroke-width .15s}
.pa-who:hover .pa-person{stroke-width:4.5}

/* homepage · parallel process */
.pa-flow-arc{fill:none; stroke:var(--rose); stroke-width:3; stroke-linecap:round}
.pa-flow-arc.t{stroke:var(--blue)}

/* homepage · spiral */
.pa-spiral-base{fill:none; stroke:var(--line); stroke-width:6; stroke-linecap:round; stroke-linejoin:round}
.pa-spiral-line{fill:none; stroke:var(--blue-line); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.pa-play .pa-spiral-line{animation:pa-draw 9s var(--ease) .6}
.pa-play .pa-dot.lit{animation:pa-lit 3s var(--d,0s) ease-in-out 1.15}

/* homepage · threads */
.pa-thread-line{fill:none; stroke:var(--k0); stroke-width:4; stroke-linecap:round; opacity:.38}
.pa-thread-flow{fill:none; stroke:var(--k0); stroke-width:4; stroke-linecap:round; stroke-dasharray:60 520}
.pa-thread.k4 path{stroke:var(--k4)} .pa-thread.k2 path{stroke:var(--k2)}
.pa-leaf{fill:none; stroke:var(--leaf); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.pa-play .pa-thread-flow{animation:pa-flow 4.5s linear 1}
.pa-play .pa-thread.k4 .pa-thread-flow{animation-delay:-1.5s} .pa-play .pa-thread.k2 .pa-thread-flow{animation-delay:-3s}
@keyframes pa-flow{from{stroke-dashoffset:556} to{stroke-dashoffset:0}}
.pa-thread:hover .pa-thread-line{opacity:.7}
.pa-thread-tag{fill:var(--blue-fill,#2563EB)} .pa-thread-tag.k4{fill:var(--k4-fill)} .pa-thread-tag.k2{fill:var(--leaf)}

/* homepage: a figure that has played once rests in its held pose; passing effects (ripples, glows, travelling
   dots, flowing dashes) leave the picture instead of freezing half-drawn (!important: the SMIL <set> that shows
   a travelling dot would otherwise win over this rule while it is paused) */
.pa-still *{animation-play-state:paused!important}
.pa-still .pa-wave,.pa-still .pa-grow,.pa-still .pa-chip-glow,.pa-still .pa-pulse,.pa-still .pa-runner,.pa-still .pa-thread-flow{visibility:hidden!important}
/* the hero ring is drawn small: its module labels need a larger size to stay readable */
.pa-art-gather .pa-node-t{--fs:17px}
/* Thai floor on screen (12.5px), whatever size the picture is drawn at: labels are sized in the 400-unit frame, so a
   frame drawn narrower than 400px raises every label to at least 12.5 × 400 / width. The figure is the container
   (homepage .h-art / .h-art-canvas, deck .pitch-art); each step uses the floor for its narrowest width. The stacked
   summary is a 340-unit frame (--pa-k). */
.h-art:not(.has-cap),.h-art-canvas,.pitch-art{container:pa / inline-size}
.pa text{font-size:max(var(--fs,15px), calc(var(--pa-floor,0px) * var(--pa-k,1)))}
.pa-v-tall{--pa-k:.85}
@container pa (max-width:399.98px){.pa{--pa-floor:13.2px}}
@container pa (max-width:379.98px){.pa{--pa-floor:13.9px}}
@container pa (max-width:359.98px){.pa{--pa-floor:14.8px}}
@container pa (max-width:339.98px){.pa{--pa-floor:15.7px}}
@container pa (max-width:319.98px){.pa{--pa-floor:16.7px}}
@container pa (max-width:299.98px){.pa{--pa-floor:17.9px}}
@container pa (max-width:279.98px){.pa{--pa-floor:19.3px}}
@container pa (max-width:259.98px){.pa{--pa-floor:20.9px}}
@container pa (max-width:239.98px){.pa{--pa-floor:22.8px}}
@media (prefers-color-scheme:dark){
  .pa,.pa-lanes-cards{--rose-bg:#3A1030; --rose-tint:#2A0F22; --rose-line:#7A2458; --eve-line:#3B3F7A; --rose-ink:#F9A8D4}
  .pa-node-c{fill:var(--blue-fill,#2563EB)}
}
/* ---------------------------------------------------------------- narrow deck forms (container "pitch", pitch.css) */
.pa.pa-v-tall,.pitch-art .pa.pa-v-tall,.pa-lanes-cards{display:none}
@container pitch (max-width:760px){
  .pitch-art .pa.pa-v-wide{display:none}
  .pitch-art .pa.pa-v-tall{display:block; max-width:420px}
  .pitch-art .pa-lanes-cards{display:block}
}
.pa-lanes-cards{width:100%}
.pa-beats{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.pa-beats li{display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 10px; border-radius:999px; background:var(--panel);
  border:1px solid var(--line); font-size:13.5px; font-weight:700; line-height:1.4; color:var(--gray)}
.pa-beats li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gray-2)}
.pa-beats li.is-now{background:var(--blue-soft); border-color:var(--blue-line); color:var(--blue-deep)}
.pa-beats li.is-now::before{background:var(--blue)}
.pa-cards{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pa-card{display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; align-items:start; padding:12px 14px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line)}
.pa-card-id{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--blue-fill,#2563EB); color:var(--on-mark);
  font-family:"Inter",sans-serif; font-size:13.5px; font-weight:800}
.pa-card-t{margin:0; font-family:"Inter","IBM Plex Sans Thai",sans-serif; font-size:15px; font-weight:700; line-height:1.4; color:var(--ink)}
/* .pa-card-amee retired */ .pa-card-amee{margin:3px 0 0; font-family:"Inter",sans-serif; font-size:13px; font-weight:700; line-height:1.5; color:var(--blue-deep)}
.pa-card-topics{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.pa-card-topics li{padding:3px 10px; border-radius:999px; border:1px solid var(--blue-line); background:var(--blue-soft);
  font-family:"Inter",sans-serif; font-size:13.5px; font-weight:700; line-height:1.45; color:var(--ink)}
.pa-card-topics li.k1{background:var(--panel); border-color:var(--gray-2)}
.pa-card-topics li.k2{background:var(--ok-bg); border-color:var(--ok-line)}
.pa-card-topics li.k3{background:var(--warn-bg); border-color:var(--warn-line)}
.pa-card-topics li.k4{background:var(--eve-bg,#EEF0FF); border-color:var(--eve-line)}
.pa-play .pa-card{animation:pa-card-in .6s calc(var(--i) * .08s) var(--ease) both}
@keyframes pa-card-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .pa *,.pa-lanes-cards *{animation:none!important; transition:none!important}
  .pa-wave,.pa-grow{opacity:0}
}