/* NutriZaika exercises v6 (9 October 2026): adds the session bar, session pages and the Sessions cards. v5 (8 October 2026):
   The figure keeps its dark stage (concept D1). The page around it now matches the plan documents: cream page, teal headings (concept D2's page).
   Two token sets: the page (light, or dark when the phone asks for dark) and .dark (the stage, home thumbnails, intro and title card).
   Colour roles: red and amber belong to the muscles. Gold means live or pressable, and sits only on dark surfaces or under dark text. */
:root{
  color-scheme:light;
  --page:#F5F0E6; --panel:#FFFDF8; --panel-2:#FAF5EA; --line:#E2D9C7; --line-2:#8E8269;
  --ink:#14292C; --muted:#4A6163; --head:#0E4A52; --link:#145F69; --hl:#FFF3CC;
  --gold:#F2BD1F; --gold-ink:#1B1602; --red:#E0483A; --amber:#EE9A10; --warn:#A8261B; --warn-bg:#FCF0EC; --warn-line:#E9B9AF;
  --font:"Lato","Carlito","Calibri","Segoe UI",system-ui,sans-serif; --r:18px;
}
@media (prefers-color-scheme:dark){
  :root{ color-scheme:dark; --page:#04262B; --panel:#0A3239; --panel-2:#0C3A42; --line:rgba(242,238,227,.14); --line-2:rgba(242,238,227,.34);
    --ink:#F2EEE3; --muted:#A9C2BF; --head:#F2BD1F; --link:#F2BD1F; --hl:rgba(242,189,31,.12); --red:#FF6B5C; --amber:#F5A623; --warn:#FF9A8F; --warn-bg:rgba(255,122,110,.07); --warn-line:rgba(255,122,110,.45); }
}
.dark{ --s-hi:#0E4A52; --s-lo:#021A1E; --s-ink:#F2EEE3; --s-muted:#A9C2BF; --s-line:rgba(242,238,227,.16); --s-ctl:rgba(242,238,227,.5); color:var(--s-ink) }
*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
body{background:var(--page);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;
  padding:14px max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}
a{color:var(--link);text-underline-offset:2px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:6px}
.dark a:focus-visible,.dark button:focus-visible{outline-color:var(--gold)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--head);color:#fff;padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
/* ---------- header and draft banner */
.top{max-width:1120px;margin:0 auto 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);min-height:44px}
.brand img{width:38px;height:38px;border-radius:9px}
.brand b{font-weight:900;font-size:19px;color:var(--head)}
.brand b span{color:#9A7000}
@media (prefers-color-scheme:dark){.brand b{color:var(--ink)}.brand b span{color:var(--gold)}}
.brand em{font-style:normal;color:var(--muted);font-size:16px}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;color:var(--head);background:var(--panel);white-space:nowrap}
@media (max-width:380px){.brand em{display:none}}
.draft{max-width:1120px;margin:0 auto 14px;font-size:14px;line-height:1.4;color:var(--gold-ink);background:var(--gold);border-radius:10px;padding:7px 12px}
.draft a{color:var(--gold-ink);font-weight:700}
/* ---------- exercise page layout */
.wrap{max-width:1120px;margin-inline:auto;display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.wrap{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:start}.wrap>.stage{position:sticky;top:12px;max-height:calc(100vh - 120px)}}
/* ---------- the stage (dark) */
.stage{position:relative;border-radius:var(--r);overflow:hidden;background:radial-gradient(120% 90% at 50% 36%,var(--s-hi),var(--s-lo));display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(4,38,43,.12),0 8px 28px rgba(4,38,43,.12)}
.stage svg{display:block;width:100%;height:auto;max-height:46vh;flex:0 1 auto;min-height:0}
.hud,.notes{flex:none}
@media (min-width:900px){.stage svg{max-height:none;flex:1 1 auto;min-height:220px}}
.stage svg text{font-family:var(--font)}
.rep{position:absolute;top:10px;right:14px;z-index:2;text-align:right;font-variant-numeric:tabular-nums;text-shadow:0 1px 10px rgba(2,26,30,.9)}
.rep small{display:block;color:var(--s-muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.rep strong{font-size:clamp(28px,7.5vw,38px);font-weight:900;line-height:1.05}
.ribbon{position:absolute;top:0;left:0;right:0;z-index:3;margin:0;background:#B3261E;color:#fff;font-weight:900;font-size:15px;letter-spacing:.05em;text-transform:uppercase;padding:8px 14px;text-align:center}
.stage.bad .rep{top:48px}
.hud{display:grid;gap:9px;padding:12px 14px 14px;border-top:1px solid var(--s-line);background:rgba(2,26,30,.62)}
.hudrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:34px}
.phase{font-weight:900;font-size:clamp(23px,6vw,30px);letter-spacing:.04em;text-transform:uppercase;line-height:1.1}
.breath{color:var(--gold);font-weight:700;font-size:clamp(16px,4.4vw,20px);text-align:right}
.now{margin:0;font-size:16px;line-height:1.4;min-height:2.8em;color:var(--s-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tempo,.tempolab{display:grid;gap:4px}
.tempo div{height:8px;border-radius:4px;background:rgba(242,238,227,.18);overflow:hidden}
.tempo i{display:block;height:100%;width:0;background:var(--gold)}
.tempolab{color:var(--s-muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase;line-height:1.25;font-weight:700}
.tempolab span{overflow-wrap:anywhere}
@media (max-width:899px){.tempolab{display:none}}
.controls{display:flex;flex-wrap:wrap;gap:8px}
.stage button{font:inherit;color:var(--s-ink);background:rgba(242,238,227,.1);border:1px solid var(--s-ctl);border-radius:999px;padding:9px 16px;min-height:44px;cursor:pointer;font-weight:700;font-size:15px;line-height:1.2}
.stage button:hover{background:rgba(242,238,227,.2)}
.stage button:disabled{opacity:.45;cursor:default}
.stage button[aria-pressed="true"],.stage button.go{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.controls [data-nz=play]{min-width:96px}
@media (max-width:520px){.controls{flex-wrap:nowrap}.controls button{flex:1 1 auto;padding-inline:8px}.wide,.stage .wideonly{display:none}}
.seg{display:inline-flex;border:1px solid var(--s-ctl);border-radius:999px;padding:3px;gap:3px;justify-self:start}
.stage .seg button{border-color:transparent;background:transparent;min-height:40px}
.stage .seg button[aria-pressed="true"]{background:var(--s-ink);color:#062226;border-color:var(--s-ink)}
.row2{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.stage button.follow{flex:1 1 220px;min-height:50px;font-size:17px;background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.stage button.follow:hover{background:#FFD24D}
.stage:not(.following) .fol,.stage.following .demo{display:none!important}
.notes{padding:10px 14px 13px;background:rgba(2,26,30,.62);border-top:1px solid var(--s-line);display:grid;gap:5px}
.notes p{margin:0;font-size:13.5px;line-height:1.4}
.notes .stop{color:#FFC9C2;font-weight:700}
.notes .disc{color:var(--s-muted)}
.gate{position:absolute;inset:0;z-index:6;display:grid;place-items:center;width:100%;border:0!important;border-radius:0!important;background:rgba(2,26,30,.62)!important;color:var(--s-ink)!important;font-size:24px!important;font-weight:900}
.intro,.card{position:absolute;inset:0;z-index:5;display:grid;place-items:center;text-align:center;padding:16px;cursor:pointer;background:radial-gradient(120% 90% at 50% 40%,var(--s-hi),var(--s-lo))}
.intro .logo{display:grid;justify-items:center;gap:14px}
.intro img{width:96px;height:96px;border-radius:22px}
.intro b{font-size:34px;font-weight:900}
.intro b span{color:var(--gold)}
.card .title{margin:0 0 8px;font-size:clamp(28px,6vw,44px);font-weight:900;line-height:1.05;text-wrap:balance}
.card p{margin:0;color:var(--s-muted);font-size:18px}
.card p b{color:#FF9C90}
.card .eyebrow{color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
@media (prefers-reduced-motion:no-preference){
  .intro.run img{animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both}
  .intro.run b{animation:rise .45s .2s ease-out both}
  .card.run>div{animation:rise .4s ease-out both}
  .fade{transition:opacity .3s ease,visibility 0s linear 0s}
  .fade.gone{transition:opacity .3s ease,visibility 0s linear .3s}
}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.gone{opacity:0;visibility:hidden;pointer-events:none}
/* follow-along: on a phone the stage takes the whole screen so it can be propped up and read from the floor */
.stage.following .phase{font-size:clamp(28px,8vw,40px)}
.stage.following .rep strong{font-size:clamp(40px,11vw,60px)}
.stage.following .rep small{font-size:13px}
.stage.following .now{font-size:18px}
@media (max-width:899px){
  .stage.following{position:fixed;inset:0;z-index:50;border-radius:0;height:100vh;height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
  .stage.following svg{max-height:none;flex:1 1 0;height:auto}
  html.nz-follow,html.nz-follow body{overflow:hidden}
}
/* landscape phones: figure on the left, reading column on the right, nothing taller than the screen */
@media (orientation:landscape) and (max-height:560px){
  .top,.draft{display:none}
  .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
  .wrap>.stage{position:sticky;top:8px}
  .stage svg{max-height:calc(100vh - 170px)}
  .now,.notes .disc{display:none}
  .stage.following{position:fixed;inset:0;z-index:50;border-radius:0;flex-direction:row;flex-wrap:wrap}
  .stage.following svg{max-height:100vh;flex:1 1 55%;width:55%}
  .stage.following .hud{flex:1 1 40%;align-content:center}
  .stage.following .notes{display:none}
}
/* ---------- reading column */
.panel{display:grid;gap:18px;min-width:0;align-content:start}
.head{display:grid;gap:6px}
.crumb{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.crumb a{color:var(--head);text-decoration:none;border-bottom:1px solid var(--line-2)}
.lvl{display:inline-block;text-transform:none;letter-spacing:.01em;font-size:14px;color:var(--head);background:var(--panel-2);border:1px solid var(--line-2);border-radius:999px;padding:1px 10px;white-space:nowrap}
h1{margin:0;font-size:clamp(30px,6vw,42px);font-weight:900;line-height:1.08;text-wrap:balance;color:var(--ink)}
.sub{margin:0;color:var(--muted);max-width:60ch;font-size:18px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:0}
.facts div{background:var(--panel);padding:10px 14px;min-width:0}
.facts dt{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px}
.facts dd{margin:3px 0 0;font-weight:700;font-size:16px;line-height:1.4}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.dot.r{background:var(--red)} .dot.a{background:var(--amber)}
.plannote{margin:-8px 0 0;font-size:15px;color:var(--muted)}
.panel h2,.home h2.h,.sessmain .note h2{margin:0 0 10px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--head);font-weight:900}
.note{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.note p{margin:0}
.note p+p{margin-top:6px}
.note ul,.note ol{margin:0;padding-left:20px}
.note li+li{margin-top:5px}
.safe{background:var(--warn-bg);border-color:var(--warn-line)}
.panel .safe h2,.home .safe h2,.sessmain .safe h2{color:var(--warn)}
ol.steps{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:s}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:12px;border:1px solid transparent;color:var(--muted)}
ol.steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);font-weight:900;font-size:15px;color:var(--muted)}
ol.steps li b{color:var(--ink);font-weight:700}
ol.steps li.on{background:var(--hl);border-color:#EBCB6B;color:var(--ink)}
ol.steps li.on::before{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.bad ol.steps li.on{background:var(--warn-bg);border-color:var(--warn-line)}
.bad ol.steps li.on::before{background:#B3261E;border-color:#B3261E;color:#fff}
.place{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--head);border-radius:12px;padding:12px 16px}
.place h3{margin:0 0 8px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--head);font-weight:900}
.place dl{margin:0;display:grid;gap:8px}
.place dl div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:start}
.place dt{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px;font-weight:700}
.place dd{margin:0;font-size:16px;line-height:1.45}
.bad .place{display:none}
@media (max-width:520px){.place dl div{grid-template-columns:1fr;gap:2px}}
.two{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pager a{display:inline-flex;flex-direction:column;justify-content:center;min-height:48px;padding:6px 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel);font-weight:700;text-decoration:none;color:var(--head);max-width:100%}
.pager a.nx{margin-left:auto;text-align:right}
.pager small{font-weight:400;color:var(--muted);font-size:13px}
.foot{color:var(--muted);font-size:14px;margin:0}
.stamp{white-space:nowrap;opacity:.8}
/* ---------- home page */
.home,.review{max-width:1120px;margin-inline:auto;display:grid;gap:22px}
.hero{display:grid;gap:8px}
.hero p{margin:0;color:var(--muted);max-width:64ch;font-size:18px}
.lead{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.lead h2{margin:0 0 10px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--head);font-weight:900}
.howto li::marker{font-weight:900;color:var(--head)}
.jump{position:sticky;top:0;z-index:10;display:flex;gap:8px;overflow-x:auto;padding:10px 2px;margin:0 -2px;background:var(--page);border-bottom:1px solid var(--line);scrollbar-width:thin}
.jump a,.jump button{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--head);font:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap}
.jump button{margin-left:auto}
.jump button[aria-pressed="true"]{background:var(--head);color:#fff;border-color:var(--head)}
.shown{margin:-10px 0 0;color:var(--muted);font-size:15px}
.group{display:grid;gap:12px;scroll-margin-top:74px}
.group h2{margin:0;font-size:24px;font-weight:900;color:var(--ink);display:flex;align-items:baseline;gap:10px}
.group h2 .count{font-size:15px;font-weight:700;color:var(--muted)}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
@media (max-width:600px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.ex{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);transition:border-color .15s,transform .15s}
.ex:hover{border-color:var(--head)}
@media (prefers-reduced-motion:no-preference){.ex:hover{transform:translateY(-2px)}}
.ex .pic{background:radial-gradient(120% 90% at 50% 36%,var(--s-hi),var(--s-lo));aspect-ratio:4/3;display:grid;place-items:center}
.ex .pic svg{width:100%;height:100%;display:block}
.ex .txt{padding:10px 12px 12px;display:grid;gap:2px;align-content:start}
.ex .txt b{font-weight:900;font-size:17px;line-height:1.2}
.ex .txt span{color:var(--muted);font-size:14px;line-height:1.35}
.ex .txt .meta{color:var(--head);font-weight:700;font-size:13px;margin-top:4px}
@media (max-width:600px){.ex .txt{padding:8px 10px 10px}.ex .txt b{font-size:15.5px}.ex .txt span{font-size:13px}}
body.nofloor .ex[data-floor]{display:none}
/* ---------- review page */
.rv{display:grid;gap:10px;padding-top:6px;border-top:1px solid var(--line)}
.rvh{display:flex;gap:12px;align-items:flex-start}
.rvh .no{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--head);color:#fff;font-weight:900}
.rvh h2{margin:0;font-size:21px}
.rvh p{margin:2px 0 0;color:var(--muted);font-size:15px}
.tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tile{margin:0;border-radius:12px;overflow:hidden;background:radial-gradient(120% 90% at 50% 36%,var(--s-hi),var(--s-lo))}
.tile svg{display:block;width:100%;height:230px}
.tile figcaption{padding:5px 10px;font-size:13px;color:var(--s-muted);background:rgba(2,26,30,.6)}
/* ---------- v6: the session bar on an exercise page opened from a session */
.sess{grid-column:1/-1;display:grid;gap:8px;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:14px;padding:10px 12px}
.sesshead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sessname{font-weight:900;font-size:18px;color:var(--head);text-decoration:none}
.sesspos{color:var(--muted);font-size:15px;font-weight:700}
.sessnav{display:flex;gap:8px;flex-wrap:wrap}
.sessnav a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--head);font-weight:700;text-decoration:none;font-size:15px;max-width:100%}
.sessnav a.snext{margin-left:auto;background:var(--head);border-color:var(--head);color:#fff}
.sessnav .ar{font-size:12px}
.sess .snote{margin:0;font-size:15px;color:var(--ink)}
@media (prefers-color-scheme:dark){.sessnav a.snext{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}}
.stage a.nextex{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-weight:900;font-size:18px;text-decoration:none;padding:0 16px;text-align:center}
.facts.mine{border-color:#D9A514;box-shadow:0 0 0 2px rgba(242,189,31,.35)}
.alts{margin:0;font-size:16px;font-weight:700}
/* ---------- v6: session pages */
.sessmain{max-width:820px;margin-inline:auto;display:grid;gap:18px}
.dosebox p{font-size:17px}
.start{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:999px;background:var(--head);color:#fff;font-weight:900;font-size:19px;text-decoration:none}
.start:hover{filter:brightness(1.12)}
@media (prefers-color-scheme:dark){.start{background:var(--gold);color:var(--gold-ink)}}
.slist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sx a{display:grid;grid-template-columns:136px minmax(0,1fr);gap:14px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);text-decoration:none}
.sx a:hover{border-color:var(--head)}
.th{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:radial-gradient(120% 90% at 50% 36%,var(--s-hi),var(--s-lo))}
.th svg{width:100%;height:100%;display:block}
.th .no{position:absolute;left:6px;top:6px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font-weight:900;font-size:15px}
.th.plain{display:grid;place-items:center;aspect-ratio:auto;height:56px;background:var(--panel-2);border:1px dashed var(--line-2);color:var(--head);font-size:22px}
.nm{display:grid;gap:3px;min-width:0}
.nm b{font-size:19px;font-weight:900;line-height:1.2}
.nm .dz{color:var(--head);font-weight:700;font-size:15px}
.nm .snote{color:var(--muted);font-size:15px;line-height:1.4}
@media (max-width:520px){.sx a{grid-template-columns:108px minmax(0,1fr);gap:10px}.nm b{font-size:17px}.nm .dz,.nm .snote{font-size:14px}}
.walk{margin:0;font-size:16px}
/* ---------- v6: Sessions on the home page */
.sessions{display:grid;gap:10px;scroll-margin-top:74px}
.sessions h2{margin:0;font-size:24px;font-weight:900;color:var(--ink)}
.glead{margin:0;color:var(--muted)}
.scards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media (max-width:600px){.scards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.scard{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);color:var(--ink);text-decoration:none}
.scard:hover{border-color:var(--head)}
.sthumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:4px;background:radial-gradient(120% 90% at 50% 36%,var(--s-hi),var(--s-lo))}
.sthumbs svg{width:100%;aspect-ratio:4/3;height:auto;display:block}
.stxt{padding:10px 12px 12px;display:grid;gap:2px;align-content:start}
.stxt b{font-size:18px;font-weight:900}
.stxt span{color:var(--muted);font-size:14px;line-height:1.35}
.stxt .meta{color:var(--head);font-weight:700;font-size:13px;margin-top:4px}
@media print{.sess,.start,.sessions{display:none!important}}
/* ---------- print: the still on the page, then the words, on plain paper */
@media print{
  :root{--page:#fff;--panel:#fff;--panel-2:#fff;--ink:#111;--muted:#333;--line:#bbb;--line-2:#999;--head:#0E4A52;--warn-bg:#fff}
  body{padding:0;font-size:12pt}
  .skip,.draft,.top nav,.hud,.notes .disc,.intro,.card,.gate,.ribbon,.pager,.jump,.lead .howto,.seg{display:none!important}
  .wrap{display:block}
  .stage{max-width:9cm;margin:0 auto 12pt;break-inside:avoid;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .stage svg{max-height:10cm}
  .notes{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .note,.place,ol.steps li{break-inside:avoid}
  ol.steps li{color:#111}
  .ex .pic,.tile{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}