#s3{overflow-x:clip}
#s3 .stage{justify-content:flex-start;padding-top:calc(var(--nav-clear) + 10px);padding-bottom:clamp(16px,3vh,32px)}
#s3 .hd{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:12px}
#s3 .tk{display:flex;gap:6px;flex:none}
#s3 .tk i{display:block;width:28px;height:2px;background:var(--line-l);opacity:1;transform:none;transition:background .4s}
#s3 .tk i.on{background:var(--indigo)}
#s3 .h2{max-width:15ch}
/* belt */
#s3 .bh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--ink-mute)}
#s3 .lb{font-size:12px;font-weight:600;border:1px solid var(--line-l);border-radius:999px;padding:1px 10px}
#s3 .stl{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px}
#s3 .stl svg,#s3 .fi{width:13px;height:13px;flex:none}
#s3 .stl path,#s3 .gl path,#s3 .fi path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#s3 .belt{position:relative;margin-top:8px;padding-block:clamp(8px,2.2vh,28px);display:flex;flex-direction:column}
#s3 .orb{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#s3 .orb path{fill:none;stroke:var(--indigo);stroke-width:1;opacity:.3;stroke-linecap:round}
#s3 .orb .a{opacity:.55;stroke-width:1.4;stroke-linecap:butt;stroke-linejoin:miter}
#s3 .row{--fd:linear-gradient(90deg,transparent,var(--ink) 6%,var(--ink) 94%,transparent);position:relative;overflow:hidden;overflow:clip;direction:rtl;padding-block:12px;-webkit-mask-image:var(--fd);mask-image:var(--fd)}
#s3 .tr{display:flex;gap:16px;width:max-content;margin:0;padding:0;list-style:none;will-change:transform}
#s3 .cd{flex:none;width:clamp(248px,25vw,320px);perspective:1100px;display:flex}
#s3 .ci{flex:1;display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.75,.15,1)}
#s3 .cd.on .ci{transform:rotateY(-180deg)}
#s3 .f,#s3 .b{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--r);display:flex;flex-direction:column;gap:12px;padding:17px 17px 14px;text-align:start;min-width:0}
#s3 .f{font:inherit;width:100%;color:var(--ink);background:var(--paper);border:1px solid var(--line-l);cursor:pointer;transition:border-color .25s}
#s3 .f:hover{border-color:rgba(74,81,162,.5)}
#s3 .f:focus-visible{outline-offset:-4px}
#s3 .b{background:var(--night-2);color:var(--paper);transform:rotateY(180deg);cursor:pointer}
#s3 .cd:not(.on) .b,#s3 .cd.on .f{pointer-events:none}
#s3 .tp{display:flex;align-items:center;gap:8px;color:var(--ink-mute)}
#s3 .b .tp{color:var(--mute-d)}
#s3 .n{margin-inline-start:auto}
#s3 .gp{font-size:.8rem;font-weight:600}
#s3 .gl{width:16px;height:16px;flex:none;color:var(--indigo)}
#s3 .gl path{stroke-linecap:butt;stroke-linejoin:miter}
#s3 .gl path:first-child{opacity:.4}
#s3 .gl circle{fill:currentColor}
#s3 .s{flex:1;font-size:1rem;line-height:1.75}
#s3 .hn{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-mute);border-top:1px solid var(--line-l);padding-top:10px;transition:color .25s}
#s3 .f:hover .hn{color:var(--indigo)}
#s3 .m{margin:0;font-size:1rem;line-height:1.7;font-weight:300}
#s3 .m b{color:var(--sky-2);font-weight:600}
#s3 .m.w{margin-top:-4px;font-weight:400}
#s3 .m.w b{color:var(--ok)}
#s3 .tg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;font-size:.85rem;color:var(--sky-2)}
#s3 .tg i{font-style:normal;opacity:.6}
#s3 .ac{display:flex;align-items:center;justify-content:space-between;gap:8px}
#s3 .sm{padding:8px 14px;font-size:.88rem;border-radius:8px}
#s3 .bk{width:36px;height:36px;flex:none;border-radius:8px;border:1px solid var(--line-d);background:transparent;color:var(--paper);cursor:pointer;display:grid;place-items:center}
#s3 .cd.me .f{background:var(--cream);border:1px dashed var(--indigo);animation:s3pulse 1.6s ease-out 2}
#s3 .cd.near .f{border-style:dashed}
#s3 .fy{display:block}
#s3 .me .s{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
#s3 .b .assume{color:var(--coffee)}
@keyframes s3pulse{from{box-shadow:inset 0 0 0 2px rgba(74,81,162,.5)}to{box-shadow:inset 0 0 0 16px rgba(74,81,162,0)}}
#s3 .belt.st{padding-block:8px}
#s3 .belt.st .orb{display:none}
#s3 .belt.st .row{overflow:visible;-webkit-mask-image:none;mask-image:none;width:100%;max-width:1240px;margin-inline:auto;padding-inline:16px}
#s3 .belt.st .tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px;width:auto;transform:none!important}
#s3 .belt.st .cd{width:auto}
#s3 .mr{text-align:center}
#s3 .mr .btn{margin-top:14px}
/* pinned stage: one beat on screen at a time */
@media (min-width:701px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  #s3:not(.flow) .ly{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;margin-top:clamp(8px,2vh,24px)}
  #s3:not(.flow) .ly>[data-at]{grid-area:1/1;min-width:0}
  #s3:not(.flow) .ly>[data-at]:not(.on){pointer-events:none}
  #s3:not(.flow)[data-beat="1"] .l0{opacity:0;transform:translateY(-6vh);pointer-events:none}
  /* both rows slide in the way the belt then travels (left to right, as Arabic tickers run): one direction for the eye */
  #s3:not(.flow) .row{transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .7s}
  #s3:not(.flow) .l1:not(.on) .row{transform:translateX(-14%);opacity:0}
  #s3:not(.flow) .l1.on .row+.row{transition-delay:.12s}
}
@media (min-width:701px) and (min-height:640px) and (max-height:820px){
  #s3 .h2{font-size:clamp(2.1rem,4.4vw,3.8rem)}
  #s3 .f,#s3 .b{padding:14px 14px 12px;gap:10px}
}
/* un-pinned: phones, short screens, reduced motion (pre-JS); JS adds .flow for these and a too-tall beat */
@media (max-width:700px),(max-height:639px),(prefers-reduced-motion:reduce){
  #s3.pin{height:auto!important}
  #s3 .stage{position:relative;height:auto;display:block;padding-block:96px}
  #s3 [data-at]{opacity:1;transform:none}
}
#s3.flow.pin{height:auto!important}
#s3.flow .stage{position:relative;height:auto;display:block;padding-block:96px}
#s3.flow [data-at]{opacity:1;transform:none}
#s3.flow .tk{display:none}
#s3.flow .hd{margin-bottom:22px}
#s3.flow .l1{margin-top:clamp(40px,8vw,64px)}#s9 .stage{padding:calc(var(--nav-clear) + 8px) 0 24px;justify-content:safe center}
#s9 .s9-w{width:100%}
#s9 :focus-visible{outline-color:var(--indigo)}
#s9 .s9-g{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"head fig" "tabs fig" "panel fig";grid-template-rows:auto auto 1fr;column-gap:clamp(28px,5vw,80px);align-content:center}
#s9 .s9-head{grid-area:head;min-width:0}
#s9 .kick{margin:0 0 10px;font-size:.95rem;font-weight:600;opacity:.7}
#s9 .h2{font-size:clamp(1.9rem,min(4.2vw,6.6svh),3.9rem);max-width:none}
#s9 .s9-lk{font:inherit;font-size:.88rem;color:var(--indigo);font-weight:600;background:none;border:0;padding:6px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
#s9 .s9-tabs{grid-area:tabs;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(16px,3svh,36px);border-block:1px solid var(--line-l)}
#s9 .s9-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:clamp(9px,1.7svh,16px) clamp(8px,1.3vw,18px);background:transparent;border:0;border-inline-start:1px solid var(--line-l);color:var(--ink);text-align:start;cursor:pointer;font-family:var(--f-ar);transition:background .3s}
#s9 .s9-tab:first-child{border-inline-start:0}
#s9 .s9-tab:focus-visible{outline-offset:-4px}
#s9 .s9-tab:hover{background:rgba(246,247,245,.5)}
#s9 .s9-tab[aria-selected="true"]{background:var(--paper)}
#s9 .s9-tab::before{content:"";position:absolute;top:-1px;inset-inline:0;height:2px;background:var(--indigo);transform:scaleX(0);transform-origin:right;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
#s9 .s9-tab[aria-selected="true"]::before{transform:scaleX(1)}
#s9 .s9-tr{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
#s9 .s9-tr .mono{font-size:10.5px;color:var(--ink-mute)}
#s9 .s9-tab b{font-weight:300;font-size:clamp(1.05rem,min(1.8vw,3svh),1.55rem);line-height:1.3;margin-top:4px;transition:color .3s}
#s9 .s9-tab[aria-selected="false"] b{color:var(--ink-mute)}
#s9 .s9-tab small{font-size:.8rem;color:var(--ink-mute);line-height:1.4}
#s9 .s9-nr{font-size:11px;font-weight:600;color:var(--indigo);margin-top:4px;line-height:1.3}
#s9 .s9-tab:not(.near) .s9-nr{display:none}
#s9 .s9-meter{display:inline-flex;gap:3px;flex:none}
#s9 .s9-meter i{width:6px;height:6px;border:1px solid rgba(28,30,43,.3)}
#s9 .s9-meter i.f{background:var(--indigo);border-color:var(--indigo)}
#s9 .s9-panel{grid-area:panel;min-width:0;padding-top:clamp(12px,2.4svh,26px)}
#s9 .s9-lab{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
#s9 .s9-pk{color:var(--ink-mute);font-size:.85rem;font-weight:600}
#s9 .s9-ex{font-size:11.5px;font-weight:600;color:var(--ink-mute);border:1px dashed currentColor;border-radius:999px;padding:2px 9px;white-space:nowrap}
#s9 .s9-sent{margin:10px 0 0;font-size:clamp(1.05rem,min(1.9vw,3svh),1.5rem);font-weight:300;line-height:1.95;color:var(--ink);overflow-wrap:anywhere}
#s9 .s9-sent.long{font-size:clamp(.95rem,min(1.4vw,2.4svh),1.15rem);line-height:1.85}
#s9 .s9-sent.xl{max-height:min(20svh,7.6em);overflow:auto;scrollbar-width:thin}
#s9 .s9-sent.has{color:var(--ink-mute)}
#s9 .s9-m{color:var(--ink);font-weight:500;padding:0 .12em;border-radius:3px;background:linear-gradient(var(--indigo),var(--indigo)) right bottom/100% 2px no-repeat,linear-gradient(rgba(74,81,162,.14),rgba(74,81,162,.14)) right bottom/100% 100% no-repeat transparent}
#s9 .swap .s9-m{animation:s9-hl .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.25s + var(--i) * 90ms)}
#s9 .s9-read{margin:clamp(8px,1.6svh,16px) 0 0;padding-inline-start:12px;border-inline-start:2px solid var(--indigo);font-size:clamp(.95rem,min(1.3vw,2.3svh),1.1rem);line-height:1.75;max-width:54ch;min-height:3.5em}
#s9 .s9-read b{font-weight:600;color:var(--indigo)}
#s9 .s9-act{margin-top:clamp(12px,2.4svh,24px)}
/* before its beat: unseen, unclickable, still Tab-reachable (focus shows it) */
#s9 .s9-act:not(.on):not(:focus-within){pointer-events:none}
#s9 .s9-act:focus-within{opacity:1;transform:none}
#s9 .s9-panel.swap .s9-in{animation:s9-up .5s cubic-bezier(.2,.8,.2,1) both}
#s9 .s9-fig{grid-area:fig;align-self:center;margin:0;min-width:0}
#s9 .s9-fig svg{display:block;width:100%;height:auto;max-height:calc(100svh - var(--nav-clear) - 48px);direction:ltr;overflow:visible}
#s9 .s9-bg{fill:none;stroke:var(--ink)}
#s9 .s9-orbit{stroke-opacity:.25;stroke-width:1;stroke-dasharray:2 6}
#s9 .s9-tk{stroke-opacity:.26;stroke-width:6;stroke-dasharray:1 14.708}
#s9 .s9-tk2{stroke-opacity:.55;stroke-width:12;stroke-dasharray:1.5 139.872}
#s9 .s9-cross{stroke-opacity:.35;stroke-width:1}
#s9 .s9-fig text{stroke:none;fill:var(--ink)}
#s9 .s9-fig .tm{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em}
#s9 .s9-orb{fill:var(--indigo);transform-box:fill-box;transform-origin:center;animation:s9-spin 48s linear infinite paused}
#s9.live .s9-orb{animation-play-state:running}
#s9 .s9-part{fill:none;stroke:var(--ink);opacity:.17;cursor:pointer;transition:opacity .5s,stroke .5s}
#s9 .s9-part:hover{opacity:.4}
#s9 .s9-part.on{opacity:1;stroke:var(--indigo)}
#s9 .s9-rg,#s9 .s9-cn{stroke-width:22;stroke-linecap:butt}
#s9 .s9-cn{stroke-linejoin:miter;stroke-miterlimit:4}
#s9 .s9-gw{fill:url(#s9-hatch);stroke-width:1.2;stroke-dasharray:3 3}
#s9 .s9-hx{stroke:var(--indigo);stroke-width:1.5}
#s9 .s9-gb{stroke-width:1.5}
#s9 .s9-fr{stroke-width:1.2;stroke-dasharray:3 3}
#s9 .s9-gb,#s9 .s9-fr{opacity:0;transition:opacity .4s}
#s9 .s9-part.on .s9-gb,#s9 .s9-part.on .s9-fr{opacity:1}
#s9 .s9-nd{fill:var(--ink);stroke:var(--mist);stroke-width:3}
#s9 .s9-part.on .s9-nd{fill:var(--indigo)}
#s9 .s9-pl{stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
/* one label at a time: it points at the one lit part; the tabs carry the order */
#s9 .s9-co{cursor:pointer;transition:opacity .4s}
#s9 .s9-co:not(.on){opacity:0;pointer-events:none}
#s9 .s9-co path{fill:none;stroke:var(--ink);stroke-width:1}
#s9 .s9-co circle{fill:var(--ink)}
#s9 .s9-co.on path{stroke:var(--indigo)}
#s9 .s9-co.on circle,#s9 .s9-fig .s9-co.on text{fill:var(--indigo)}
#s9 .crop .s9-co{display:none}
#s9 .go .s9-dr{stroke-dasharray:100;animation:s9-draw 1s cubic-bezier(.65,0,.25,1) both}
#s9 .go .s9-gw{animation:s9-march 1.2s linear both}
#s9 .go .s9-pl{animation:s9-pulse 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes s9-spin{to{transform:rotate(360deg)}}
@keyframes s9-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes s9-march{from{stroke-dashoffset:42;fill-opacity:.2}to{stroke-dashoffset:0;fill-opacity:1}}
@keyframes s9-pulse{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.9)}}
@keyframes s9-hl{from{background-size:0% 2px,0% 100%;color:var(--ink-mute)}}
@keyframes s9-up{from{opacity:.2;transform:translateY(8px)}}
/* no pin on tablets, phones, short windows or reduced motion: one readable band */
@media (max-width:900px),(max-height:700px),(prefers-reduced-motion:reduce){
  #s9.pin{height:auto!important}
  #s9 .stage{position:relative;height:auto;display:block;overflow:visible;padding-block:clamp(88px,11vw,150px)}
  #s9 [data-at]{opacity:1;transform:none}
  #s9 .s9-act:not(.on):not(:focus-within){pointer-events:auto}
  #s9 .s9-fig svg{max-height:none}
}
/* .free (JS): the tallest reading overflows one screen, so un-pin; the action is never clipped */
#s9.free.pin{height:auto!important}
#s9.free .stage{position:relative;height:auto;display:block;overflow:visible;padding-block:clamp(88px,11vw,150px)}
#s9.free [data-at]{opacity:1;transform:none}
#s9.free .s9-act:not(.on){pointer-events:auto}
@media (max-width:900px),(max-height:700px){
  #s9 .s9-g{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "fig" "tabs" "panel";grid-template-rows:none}
  #s9 .h2{font-size:clamp(2rem,6.4vw,3.4rem)}
  #s9 .s9-fig{max-width:420px;width:100%;margin:28px auto 0}
  #s9 .s9-tab b{font-size:clamp(1.1rem,3vw,1.5rem)}
  #s9 .s9-sent{font-size:clamp(1.1rem,3.4vw,1.4rem)}
  #s9 .s9-sent.long{font-size:1.02rem}
  #s9 .s9-sent.xl{max-height:none}
  #s9 .s9-read{font-size:1rem;min-height:0}
}
@media (max-width:560px){
  #s9 .s9-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  #s9 .s9-tab:nth-child(odd){border-inline-start:0}
  #s9 .s9-tab:nth-child(n+3){border-top:1px solid var(--line-l)}
  #s9 .s9-tab{padding:12px 10px}
  #s9 .s9-tab small{font-size:13px}
  #s9 .s9-nr{font-size:12.5px}
}