/* praxis-core v1 · the shared look and components for every course. Source: src/core/praxis-core.css.
   Each course adds only its own rules (src/courses/<id>/course.css), loaded after this file. */
:root{
  --bg:#ECEFEA; --surface:#F6F7F3; --ink:#1C2320; --muted:#59645D; --rule:#C7CEC5;
  --moss:#345346; --brass:#84631F; --field:#FFFFFF; --ember:#8E3B2A;
  --display:"Marcellus","Praxis Marks Display","Cormorant Garamond","Palatino Linotype",Palatino,Georgia,serif;
  --body:"Literata",Georgia,"Times New Roman",serif;
  --ui:"Karla","Praxis Marks Sans","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111513; --surface:#181D1A; --ink:#E3E6DF; --muted:#9BA59E; --rule:#2F3833;
  --moss:#8FB5A2; --brass:#D5B163; --field:#1D2320; --ember:#D98A6E; color-scheme:dark}}
*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
[hidden]{display:none!important}
img,svg{max-width:100%}
html{font-size:100%}
html[data-size="l"]{font-size:112.5%}
html[data-size="xl"]{font-size:125%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.65;overflow-wrap:break-word}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 calc(4rem + 56px)}  /* 56px: the Pause button's height and offset, so the last line is never under it */
html{scroll-padding-bottom:72px}
.grid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:3.5rem;align-items:start}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr);gap:0}.rail{display:none}}
main{min-width:0;max-width:44rem}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;line-height:1.15;margin:0}
h2{font-size:clamp(1.8rem,1.4rem + 1.6vw,2.5rem);margin-top:4.5rem;margin-bottom:1rem}
h3{font-size:1.4rem;margin-top:2.4rem;margin-bottom:.5rem}
h4{font-family:var(--ui);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moss);margin:2.2rem 0 .3rem;font-weight:600}
p{margin:.7rem 0}
a{color:var(--moss);text-underline-offset:3px}
.eyebrow{font-family:var(--ui);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:1.2rem}
.muted{color:var(--muted)}
ul,ol{padding-left:1.3rem}
li{margin:.35rem 0}
.hero{padding-block:3rem 2.5rem;border-bottom:1px solid var(--rule);margin-bottom:1rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center}
@media (max-width:640px){.hero{grid-template-columns:minmax(0,1fr)}.hero .glyph{width:150px;justify-self:start;order:-1}}
.hero h1{font-size:clamp(2.6rem,1.6rem + 5vw,5rem);letter-spacing:.01em}
.hero .sub{font-size:1.2rem;max-width:34rem;margin-top:1rem}
.byline{margin-top:1.6rem;font-family:var(--ui);font-size:.9rem;color:var(--muted)}
.glyph{width:200px;height:auto;color:var(--brass)}
.glyph .ring{transform-origin:100px 100px}
@media (prefers-reduced-motion:no-preference){.glyph .ring{animation:turn 60s linear infinite}.glyph .pulse{animation:pulse 7s ease-in-out infinite}}
@keyframes turn{to{transform:rotate(-360deg)}}
@keyframes pulse{50%{r:7}}
.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 1.2rem);padding-top:2rem;font-family:var(--ui);font-size:.86rem;max-height:calc(100vh - 2rem);overflow:auto}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;border-left:1px solid var(--rule)}
.rail a:hover{color:var(--ink)}
.rail .ct{float:right;font-variant-numeric:tabular-nums;color:var(--brass);font-size:.72rem;padding-right:.4rem}
.rail .grp{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);padding:.6rem 0 .1rem .9rem}
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin:1.5rem 0}
.path{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem}
.path .t{font-family:var(--display);font-size:1.3rem}
.path .d{font-family:var(--ui);font-size:.82rem;color:var(--muted)}
.note{border-left:2px solid var(--brass);padding:.2rem 0 .2rem 1rem;margin:1.4rem 0}
.care{background:var(--surface);border:1px solid var(--rule);padding:1rem 1.2rem;border-radius:4px;font-size:.98rem;margin:1.2rem 0}
blockquote{margin:1.4rem 0;padding:0 0 0 1.2rem;border-left:1px solid var(--rule);font-style:italic}
blockquote cite{display:block;font-style:normal;font-family:var(--ui);font-size:.8rem;margin-top:.4rem;color:var(--muted)}
.meta{font-family:var(--ui);font-size:.85rem;color:var(--muted)}
dl.terms{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.2rem 1.4rem;margin:1.2rem 0}
dl.terms dt{font-family:var(--display);font-size:1.1rem;padding-top:.7rem;border-top:1px solid var(--rule)}
dl.terms dd{margin:0;padding-top:.7rem;border-top:1px solid var(--rule)}
@media (max-width:560px){dl.terms{grid-template-columns:minmax(0,1fr)}dl.terms dd{border-top:0;padding-top:0}}
.ev-m{color:var(--moss)}
.ev-x{color:var(--brass)}
.ev-p{color:var(--muted)}
.ev-t{color:var(--ember)}
.f{display:grid;gap:.35rem;margin:1rem 0}
textarea,input[type=text],input[type=date]{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--field);border:1px solid var(--rule);border-radius:3px;padding:.6rem .7rem;line-height:1.5;resize:vertical}
textarea{min-height:4.5rem}
.time{font-family:var(--ui);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);font-weight:600}
.step{border-top:1px solid var(--rule);padding-top:1.2rem;margin-top:2rem}
.step h3{margin-top:.3rem}
.tbl{overflow-x:auto;margin:1rem 0;-webkit-overflow-scrolling:touch}
th,td{border-bottom:1px solid var(--rule);text-align:left;vertical-align:top;padding:.45rem .4rem}
th{font-family:var(--ui);font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
td input[type=text]{font-size:.92rem;padding:.4rem .5rem}
details.weekbox{margin:1.6rem 0;border:1px solid var(--rule);border-radius:4px;padding:.7rem 1rem;background:var(--surface)}
details.weekbox > summary{cursor:pointer;font-family:var(--ui);font-weight:600;font-size:.9rem;color:var(--moss)}
.mag{margin:2rem 0;padding:1rem 1.2rem 1.1rem;border:1px solid var(--brass);border-left-width:4px;border-radius:4px;background:color-mix(in srgb,var(--brass) 7%,var(--surface))}
.maglabel{font-family:var(--ui);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:600}
.lockbox{margin:1.4rem 0;padding:1rem 1.2rem;border:1px dashed var(--brass);border-radius:4px;font-family:var(--ui);font-size:.92rem;color:var(--muted)}
.lockbox b{color:var(--ink)}
.weeksec.locked .lockhide{display:none}
/* builder view: one bar, set by the engine under the course header (praxis-core.js, Builder or member view) */
.builderbar{margin:1rem 0 0;padding:.7rem 1rem;border:1px solid var(--ember);border-left-width:4px;border-radius:4px;background:color-mix(in srgb,var(--ember) 7%,var(--surface));font-family:var(--ui);font-size:.88rem;color:var(--ink)}
.builderbar button{margin-left:.4rem;padding:.3rem .6rem;font-size:.8rem}
/* week headings: one look in every course (the label in brass caps; an emblem, inline .wkhead or injected .pl-wkhead, sits beside it) */
.weeksec .wk{font-family:var(--ui);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600}
.weeksec > .wk,.weeksec > .wkhead,.weeksec > .pl-wkhead{margin-top:4.5rem}
.wkhead{display:flex;gap:.8rem;align-items:center}
.wkglyph{width:44px;height:44px;color:var(--brass);flex:none}
.fig-brass{color:var(--brass)}
.fig-moss{color:var(--moss)}
.fig-ember{color:var(--ember)}
.pc-fig{margin:.4rem 0 .9rem;padding:.6rem .8rem;border:1px solid var(--rule);border-radius:4px;background:var(--bg);color:var(--ink)}
.pc-fig svg{width:100%;max-height:170px;display:block}
.pc-fig figcaption{font-family:var(--ui);font-size:.78rem;color:var(--muted);margin-top:.3rem}
.tools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0;font-family:var(--ui);font-size:.9rem}
button{font-family:var(--ui);font-size:.9rem;font-weight:600;background:var(--moss);color:var(--bg);border:0;border-radius:3px;padding:.55rem .9rem;cursor:pointer}
button.ghost{background:transparent;color:var(--moss);border:1px solid var(--moss)}
button.scriptbtn::before{content:"\25B6\FE0E  ";color:var(--brass)}
.scriptrow{display:flex;gap:.4rem;align-items:center}
.scriptrow .scriptbtn{flex:1}
.scriptrow .mini{padding:.45rem .6rem;font-size:.78rem;white-space:nowrap}
.switch input{width:1.1rem;height:1.1rem;accent-color:var(--moss)}
.status{color:var(--muted)}
#copybox{width:100%;min-height:10rem}
.sizer{display:inline-flex;gap:.3rem}
.sizer button{padding:.35rem .6rem}
.progress{height:4px;background:var(--rule);border-radius:2px;overflow:hidden;margin:.6rem 0 .3rem;max-width:28rem}
.progress i{display:block;height:100%;background:var(--moss);width:0;transition:width .4s}
.sound{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0;padding:1rem;border:1px dashed var(--rule);border-radius:4px;font-family:var(--ui);font-size:.9rem}
.sound .clock{font-variant-numeric:tabular-nums;font-size:1.3rem;font-family:var(--display);min-width:4ch}
.padwrap .meta{font-size:.72rem;line-height:1.3}
.pad{width:5.5rem;height:5.5rem;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--surface),var(--rule));border:1px solid var(--muted);color:var(--ink);font-size:.8rem;line-height:1.2;padding:.4rem}
.pad[aria-pressed="true"]{background:radial-gradient(circle at 40% 35%,var(--brass),var(--moss));color:var(--bg);border-color:var(--brass)}
.today{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:1.2rem 1.3rem;margin:1.5rem 0;display:grid;gap:.5rem}
.today .big{font-family:var(--display);font-size:1.4rem;line-height:1.3}
#todayCard{margin-top:2rem;border-color:var(--brass)}
.todayhead{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.gradebadge{font-family:var(--ui);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass);border-radius:999px;padding:.15rem .6rem;font-weight:600}
.todayslots{display:grid;gap:.7rem}
.tslot{display:grid;gap:.35rem}
.tslot .tl{font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:600}
.tslot .tb{display:flex;flex-wrap:wrap;gap:.45rem}
button.big1{font-size:1.02rem;padding:.8rem 1.2rem}
button.big1::before{content:"\25B6\FE0E  ";opacity:.85}
button.linkish{background:none;border:0;color:var(--moss);text-decoration:underline;text-underline-offset:3px;padding:.3rem .2rem;font-weight:400}
.tlinks{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.daysbox > summary{cursor:pointer;font-family:var(--ui);font-size:.85rem;color:var(--moss)}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem;margin:.6rem 0}
.days label{display:flex;flex-direction:column;align-items:center;font-family:var(--ui);font-size:.68rem;color:var(--muted);gap:.1rem}
.days label.wkstart{color:var(--brass)}
.days input{accent-color:var(--moss);width:1.05rem;height:1.05rem;margin:0}
.days label.now{color:var(--ink);font-weight:600}
.withnick{margin:1.4rem 0;border:1px solid var(--rule);border-radius:6px;background:var(--surface);padding:.9rem 1rem}
.withnick .wnh{font-family:var(--ui);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:.3rem}
.wni{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .8rem;padding:.55rem 0;border-top:1px solid var(--rule)}
.wni:first-of-type{border-top:0}
.wni .badge{font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--moss);color:var(--moss);border-radius:2px;padding:.1rem .4rem;align-self:start;margin-top:.2rem}
.wni .badge.vid{border-color:var(--ember);color:var(--ember)}
.wni .tt{font-family:var(--display);font-size:1.1rem;line-height:1.3}
.wni .ds{font-size:.92rem;color:var(--muted);grid-column:2}
.wni .st{font-family:var(--ui);font-size:.78rem;color:var(--muted);grid-column:2}
.wni .st b{color:var(--brass);font-weight:600}
.wni audio,.wni video,.wni iframe{grid-column:1/-1;width:100%;margin-top:.4rem}
.vidph{grid-column:1/-1;margin-top:.4rem;min-height:5.5rem;border:1px dashed var(--rule);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.3rem;color:var(--muted);font-family:var(--ui);font-size:.82rem;background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--rule) 35%,transparent) 14px 15px)}
.vidph svg{width:40px;height:40px;color:var(--brass)}
.medialist .wni{border-top:1px solid var(--rule)}
.scriptlist h4{margin-top:1.4rem}
.seal{border:1px solid var(--rule);border-radius:6px;background:var(--surface);padding:.9rem 1rem;margin:1.2rem 0;font-family:var(--ui);font-size:.9rem}
.sealhead{display:flex;gap:.8rem;align-items:center;margin-bottom:.6rem}
.sealmark{width:2.2rem;height:2.2rem;flex:none;border:1.5px solid var(--brass);transform:rotate(45deg);position:relative}
.sealmark::after{content:"";position:absolute;inset:30%;border-radius:50%;border:1px solid var(--brass)}
.sealmark.on{background:color-mix(in srgb,var(--brass) 30%,transparent)}
.sealmark.on::after{background:var(--brass)}
.pips{display:flex;flex-wrap:wrap;gap:.35rem}
.pip{display:flex;flex-direction:column;align-items:center;min-width:2.4rem;padding:.25rem .3rem;border:1px solid var(--rule);border-radius:4px;color:var(--muted);text-decoration:none;font-size:.72rem;line-height:1.2}
.pip b{font-size:.85rem;color:var(--ink)}
.pip i{font-style:normal}
.pip.on{border-color:var(--moss);color:var(--moss);background:color-mix(in srgb,var(--moss) 10%,transparent)}
.pip.wide{min-width:3.6rem}
.unlocks{display:grid;gap:.6rem;margin:1rem 0}
.unlock{display:flex;gap:.8rem;align-items:flex-start;border:1px dashed var(--rule);border-radius:4px;padding:.7rem .9rem;color:var(--muted)}
.unlock b{color:var(--ink)}
.unlock.open{border-style:solid;border-color:var(--brass);color:var(--ink)}
.unlock .lk{font-size:1.1rem;color:var(--brass);line-height:1.4}
.deck{margin:1.4rem 0 2rem}
.chips{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem 0 .6rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.chip{flex:none;display:flex;gap:.45rem;align-items:center;background:var(--surface);color:var(--ink);border:1px solid var(--rule);font-weight:600;font-size:.84rem;padding:.45rem .7rem;border-radius:999px;max-width:16rem}
.chip .ct{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip[aria-selected="true"]{border-color:var(--moss);background:var(--moss);color:var(--bg)}
.chip.magonly{border-style:dashed;border-color:var(--brass)}
.chip.magonly[aria-selected="true"]{background:var(--brass);border-style:solid}
.chip.counted .ring{opacity:1}
.deck.seq .pc-sits{display:none}
.deckbar{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;margin:.2rem 0 .7rem;font-family:var(--ui);font-size:.9rem}
.deckbar .db-pos{font-weight:600;color:var(--ink)}
.deckbar .sps{display:inline-flex;gap:.3rem}
.deckbar .sp{width:.75rem;height:.75rem;border-radius:50%;border:1.5px solid var(--moss);background:transparent}
.deckbar .sp.on{background:var(--brass);border-color:var(--brass)}
.deckbar .db-sits,.deckbar .db-msg{color:var(--muted)}
.deckbar .db-next{margin-left:auto;font-weight:600}
.allprac{margin:0 0 .9rem}
.allprac>summary{cursor:pointer;font-family:var(--ui);font-size:.88rem;color:var(--moss);padding:.25rem 0}
.allprac .chips{flex-direction:column;flex-wrap:nowrap;overflow:visible;padding-top:.4rem}
.allprac .chip{max-width:none;width:100%;justify-content:flex-start}
@media (min-width:700px){.chips{flex-wrap:wrap;overflow:visible}.chip{max-width:none}}
.pcard{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--moss);border-radius:6px;padding:1rem 1.2rem 1.1rem}
.pcard.magonly{border-top-color:var(--brass)}
.pcard h3{margin:.2rem 0 .3rem;font-size:1.55rem}
.pcard.magonly .pc-badge{color:var(--brass);font-weight:600}
.pc-lead{margin:.3rem 0 .8rem;color:var(--ink)}
.pc-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.6rem 0 .9rem}
.pc-actions .guide{font-size:1rem;padding:.7rem 1.1rem}
.pc-actions .guide::before{content:"\25B6\FE0E  "}
.pc-actions .undo{padding:.35rem .6rem;font-size:.78rem}
.pc-sits{font-family:var(--ui);font-size:.82rem;color:var(--muted)}
.pc-steps{margin:.4rem 0 .8rem;padding-left:1.5rem;font-size:1.04rem}
.pc-steps li{margin:.45rem 0;padding-left:.2rem}
.pc-steps li::marker{font-family:var(--ui);font-weight:600;color:var(--moss);font-size:.85rem}
.bowlmark{color:var(--brass)}
.pc-tips{border-top:1px solid var(--rule);margin-top:.8rem;padding-top:.5rem;font-size:.95rem}
.pc-tips .tl,.key .kl{font-family:var(--ui);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:600}
.pc-tips ul{margin:.3rem 0}
.pc-audio{width:100%;margin:.2rem 0 .6rem}
.pc-media{margin:.2rem 0 .8rem;padding:.6rem .8rem;border:1px solid var(--rule);border-radius:4px;background:var(--bg);font-family:var(--ui);font-size:.82rem;color:var(--muted);display:grid;gap:.4rem}
.pc-media .pm-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.pc-media .pm-k{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;border-radius:2px;padding:.05rem .35rem}
.pc-media .pm-k.a{color:var(--moss)}
.pc-media .pm-k.v{color:var(--ember)}
.pc-media audio{width:100%}
.pc-src{font-family:var(--ui);font-size:.8rem;color:var(--muted);margin:.6rem 0 0}
.pc-src b{color:var(--moss);font-weight:600;margin-right:.3rem}
.pc-bow{color:var(--brass);display:none}
html.builder .pc-bow{display:inline}
.pc-tools{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem;border-top:1px dashed var(--rule);padding-top:.6rem}
.pc-tools button{padding:.35rem .6rem;font-size:.78rem}
.pc-tools label.filebtn{padding:.35rem .6rem;font-size:.78rem}
.key{margin:1.6rem 0;padding:1rem 1.2rem;border-left:4px solid var(--ember);background:color-mix(in srgb,var(--ember) 6%,var(--surface));border-radius:0 4px 4px 0}
.key blockquote{border:0;padding:0;margin:.5rem 0;font-size:1.15rem}
.key p{margin:.4rem 0 0}
/* A poem from Nick's own book, set by build.py from src/library/poems.json (<!-- poem:id --> in body.html). Same look as Speaking First's. */
.poem{margin:2rem 0;padding:1rem 1.2rem;border-left:2px solid var(--brass);background:var(--surface);border-radius:0 4px 4px 0;break-inside:avoid}
.poem .kl{font-family:var(--ui);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:600}
.verse{font-family:var(--display);font-size:1.15rem;line-height:1.5;margin:.5rem 0}
@media (max-width:480px){.verse{font-size:1.06rem}}
/* Nick's paintings (src/core/art/). A plate sits in a week like a poem does; the reader can carry one at its edges,
   set by a course with .reader::before{background-image:url(art/<name>.webp)} in its course.css. Text stays on a clear centre. */
.plate{margin:2rem 0;break-inside:avoid}
.plate img{display:block;width:100%;height:auto;border-radius:4px;background:var(--surface)}
.plate.tall img{height:min(72vh,40rem);width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.plate figcaption{font-family:var(--ui);font-size:.8rem;color:var(--muted);margin-top:.55rem;line-height:1.45}
.plate.tall figcaption{text-align:center}
.reader{isolation:isolate}
.reader::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:center/cover no-repeat;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 62% 56% at 50% 50%,transparent 0 38%,#000 100%);mask-image:radial-gradient(ellipse 62% 56% at 50% 50%,transparent 0 38%,#000 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .reader::before{opacity:.38}}
:root[data-theme="dark"] .reader::before{opacity:.38}
/* gaze practices need a plain field: the painting steps back while the stage holds the gaze point */
.reader:has(.pv-stage[data-mode="gaze"]:not([hidden]))::before{opacity:0;transition:opacity .6s}
@media (prefers-reduced-motion:reduce){.reader::before{transition:none!important}}
.pausepanel .pause-art{display:block;width:calc(100% + 2.6rem);height:64px;object-fit:cover;margin:-1.2rem -1.3rem 1rem;border-radius:6px 6px 0 0;max-width:none}
details.deeper{margin:2rem 0 0;border-top:1px solid var(--rule);padding-top:.8rem}
details.deeper > summary{cursor:pointer;font-family:var(--ui);font-weight:600;font-size:.9rem;color:var(--moss)}
ul.tipsgrid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.6rem;margin:1rem 0}
ul.tipsgrid li{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:.7rem .9rem;margin:0;font-size:.95rem}
ul.tipsgrid b{display:block;font-family:var(--ui);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
@media print{.chips,.deckbar,.allprac,.pc-actions,.pc-tools{display:none}.pcard[hidden]{display:block!important}}
.notebox{margin:-.3rem 0 1rem;padding:.7rem .8rem;border:1px dashed var(--brass);border-radius:4px;background:color-mix(in srgb,var(--brass) 5%,var(--surface))}
.notelabel{display:grid;gap:.3rem;font-family:var(--ui);font-size:.86rem;color:var(--muted)}
.notelabel em{font-style:normal;opacity:.8}
.noterow{display:flex;gap:.5rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
.noteinput{width:100%}
.rnote{max-width:40rem;width:100%;margin:.8rem auto 0}
.jtools{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0}
.jsel{display:flex;gap:.4rem;align-items:center;font-family:var(--ui);font-size:.9rem}
.jsel select{font:inherit;font-size:.95rem;color:var(--ink);background:var(--field);border:1px solid var(--rule);border-radius:3px;padding:.45rem .5rem}
.jsheet{background:var(--field);border:1px solid var(--rule);border-radius:6px;padding:1.1rem 1.3rem 1.3rem;margin:1rem 0}
.jhead{border-bottom:1px solid var(--rule);padding-bottom:.6rem;margin-bottom:.4rem}
.jtitle{font-family:var(--display);font-size:1.7rem;line-height:1.2}
.jblock{padding:.6rem 0 .4rem;border-bottom:1px solid var(--rule)}
.jblock:last-child{border-bottom:0}
.jblock h3{margin:.6rem 0 .1rem;font-size:1.3rem}
.jblock h4{margin:1rem 0 .3rem}
.jcards{list-style:none;padding:0;margin:.2rem 0;font-size:.95rem}
.jcards li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dotted var(--rule);padding:.2rem 0;margin:0}
.jcards b{font-family:var(--ui);font-size:.8rem;color:var(--moss);white-space:nowrap}
.jlog{list-style:none;padding:0;margin:.2rem 0}
.jlog li{display:grid;grid-template-columns:6.5rem 1fr;gap:.6rem;margin:.3rem 0;font-size:.97rem}
.jd{font-family:var(--ui);font-size:.78rem;color:var(--muted);white-space:nowrap}
.jqa{margin:.6rem 0}
.jq{font-family:var(--ui);font-size:.82rem;color:var(--moss);font-weight:600}
.jq .jd{font-weight:400;margin-left:.3rem}
.jck{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.6rem}
.jck .jq{display:block}
label.filebtn{position:relative;display:inline-flex;align-items:center;font-family:var(--ui);font-size:.9rem;font-weight:600;color:var(--moss);border:1px solid var(--moss);border-radius:3px;padding:.55rem .9rem;cursor:pointer}
label.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
label.filebtn:focus-within{outline:2px solid var(--brass);outline-offset:2px}
@media (max-width:480px){.jlog li{grid-template-columns:1fr;gap:0}}
.reader{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;padding:calc(1rem + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(1rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.reader .rh{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--ui);font-size:.85rem;color:var(--muted);max-width:44rem;width:100%;margin:0 auto}
.reader .rt{font-family:var(--display);font-size:1.3rem;color:var(--ink)}
.reader .rbody{flex:1;display:flex;align-items:center;justify-content:center;max-width:40rem;margin:0 auto;width:100%}
.reader .rseg{font-family:var(--display);font-size:clamp(1.5rem,1.1rem + 2vw,2.3rem);line-height:1.35;text-align:center;text-wrap:balance}
.reader .rbar{height:3px;background:var(--rule);max-width:44rem;width:100%;margin:0 auto .8rem;border-radius:2px;overflow:hidden}
.reader .rbar i{display:block;height:100%;width:0;background:var(--brass);transition:width .3s}
.reader .rc{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;font-family:var(--ui);max-width:44rem;margin:0 auto .4rem}  /* the reader's control rows, centred (was in five course.css files) */
.reader .rcount{font-variant-numeric:tabular-nums;min-width:5ch;text-align:center;color:var(--muted)}
.reader .ropts{gap:1rem;margin-top:.3rem}
.reader .rvoice{max-width:40rem;width:100%;margin:.9rem auto 0;padding:.7rem .9rem;border:1px solid var(--moss);border-radius:6px;background:var(--surface);font-family:var(--ui);font-size:.82rem;color:var(--muted);display:grid;gap:.4rem}
.reader .rvoice .rvk{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);font-weight:600}
.reader .rvoice audio{width:100%}
.prbody{flex:1;overflow-y:auto;max-width:40rem;width:100%;margin:1rem auto;font-family:var(--display);font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem);line-height:1.45;padding:30vh 0 50vh;scroll-behavior:auto}
.prbody p{margin:0 0 1.1em}
.prbody .cue{font-family:var(--ui);font-size:.5em;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:600;display:block;margin:-.6em 0 1.4em}
.prbody .cue.bowl{color:var(--ember)}
.cta{margin-top:4rem;padding:2rem 1.6rem;background:var(--surface);border:1px solid var(--rule);border-radius:4px}
.cta h2{margin-top:0}
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:1rem;margin:1.4rem 0}
.rung{border:1px solid var(--rule);border-radius:4px;padding:1rem 1.1rem;background:var(--bg);display:flex;flex-direction:column;gap:.35rem}
.rung .lvl{font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:600}
.rung .nm{font-family:var(--display);font-size:1.25rem}
.rung ul{margin:.2rem 0;font-size:.95rem}
.sources li{font-size:.92rem}
footer{margin-top:4rem;font-family:var(--ui);font-size:.85rem;color:var(--muted)}
.pausebtn{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--surface);color:var(--moss);border:1px solid var(--moss);border-radius:999px;padding:.55rem 1rem;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.pausepanel{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:31;width:min(24rem,calc(100vw - 32px));max-height:75vh;overflow:auto;background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:1.2rem 1.3rem;box-shadow:0 8px 30px rgba(0,0,0,.18);font-size:.97rem}
.pausepanel h3{margin:0}
.pausepanel .ph{position:sticky;top:-1.2rem;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0 -1.3rem .8rem;padding:.7rem 1.3rem;background:var(--surface);border-bottom:1px solid var(--rule)}
.pausepanel .pause-art{margin-bottom:0}
.pausepanel .care{font-style:italic}
.breath{width:6rem;height:6rem;border-radius:50%;border:2px solid var(--moss);margin:.9rem auto;display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-size:.85rem;font-weight:600;transform:scale(.6);transition:transform 4s ease-in-out,background-color 4s ease-in-out}
.breath.in{transform:scale(1);background:color-mix(in srgb,var(--brass) 45%,transparent);border-color:var(--brass)}
.breath.out{transform:scale(.6);background:color-mix(in srgb,var(--moss) 18%,transparent);transition-duration:6s}
@media (prefers-reduced-motion:reduce){.breath,.breath.in,.breath.out{transform:none}}
.helpgroup{font-size:.92rem;line-height:1.55;margin:.6rem 0}
.helpgroup b{display:block;font-family:var(--ui);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--moss)}
.nw{white-space:nowrap}
.pm-top{margin:.2rem 0 .8rem;padding:.6rem .8rem;border:1px solid var(--moss);border-radius:4px;background:var(--bg);font-family:var(--ui);font-size:.82rem;display:grid;gap:.4rem}
.pm-top .pm-k{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;border-radius:2px;padding:.05rem .35rem;color:var(--moss)}
.pm-top audio{width:100%}
.bodysvg{width:100%;height:auto;display:block;color:var(--muted)}
.bodysvg .bfig{color:var(--moss);opacity:.75}
.bodysvg .bpt .dot{fill:var(--muted);opacity:.55}
.bodysvg .bpt .halo{fill:var(--brass);opacity:0}
.bodysvg .bnum{font-family:var(--ui,Karla,Arial,sans-serif);font-size:7px;fill:var(--muted)}
.bodysvg .bpt.on .dot{fill:var(--brass);opacity:1}
.bodysvg .bpt.on .halo{opacity:.28}
.bodysvg .band{fill:var(--muted);opacity:.06;stroke:none}
.bodysvg .band.on{fill:var(--brass);opacity:.26}
.bodysvg .bline{stroke:var(--muted);stroke-width:2;opacity:.35}
.bodysvg .bline.on{stroke:var(--brass);stroke-width:4;opacity:.9}
@media (prefers-reduced-motion:no-preference){.bodysvg .bpt.on .halo{animation:bpulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
 @keyframes bpulse{0%,100%{opacity:.14}50%{opacity:.4}}}
.pc-fig.bodyfig svg{max-width:300px;margin:0 auto}
.reader .rplace{flex:1;display:grid;grid-template-columns:minmax(150px,300px) 1fr;gap:1.2rem 2rem;align-items:center;max-width:980px;margin:0 auto;width:100%;padding:.4rem 1rem;overflow:auto}
.reader .rfig{max-height:62vh}
.reader .rfig svg{max-height:62vh;width:100%}
.reader .rset{font-family:var(--ui);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.reader .rat{font-family:var(--ui);font-size:clamp(1.05rem,2.6vw,1.4rem);color:var(--moss);margin:.3rem 0 .5rem}
.reader .rman{font-family:var(--display,Marcellus),serif;font-size:clamp(2rem,6.5vw,4.2rem);line-height:1.12;color:var(--ink)}
.reader .rsay{font-family:var(--ui);font-size:clamp(.95rem,2.4vw,1.25rem);color:var(--brass);margin-top:.6rem;letter-spacing:.02em}
.reader .rgl{font-style:italic;color:var(--muted);margin-top:.5rem}
@media (max-width:700px){.reader .rplace{grid-template-columns:1fr;gap:.4rem;text-align:center}.reader .rfig svg{max-height:30vh}}
.reader .ropts2{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;font-family:var(--ui);font-size:.85rem}
.reader .ropts2 label{display:inline-flex;gap:.35rem;align-items:center}
.reader select,.bedbox select{font:inherit;font-family:var(--ui);font-size:.85rem;padding:.25rem .4rem;border:1px solid var(--rule);border-radius:6px;background:var(--field);color:var(--ink)}
.reader input[type=range],.bedbox input[type=range]{width:7rem;accent-color:var(--moss)}
/* the reader's header buttons: Settings (the gear) and Close */
.reader .rh-btns{display:flex;gap:.4rem;align-items:center;flex:none}
.reader .rh-btns button,.sh-actions .sh-sitset{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
svg.gear{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;flex:none}
@media (max-width:420px){.reader .rgear span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* Steps, under the controls: the key and In brief for the card; swipe up or tap; the timer runs on */
.reader details.rsteps{display:block;width:100%;max-width:40rem}
.reader details.rsteps > summary{cursor:pointer;font-family:var(--ui);font-size:.85rem;color:var(--moss);text-align:center;min-height:32px;padding:.3rem}
.reader .rsteps-in{max-height:38vh;max-height:38dvh;overflow:auto;overscroll-behavior:contain;padding:.2rem .2rem .6rem;font-size:.95rem}
.reader .rsteps-in .key{margin:.3rem 0 .8rem}
.reader .rsteps-in .key blockquote{font-size:1.02rem}
.reader .rsteps-in h3{font-family:var(--ui);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:600;margin:.4rem 0 .2rem}
.reader .rsteps-in ol{margin:.2rem 0;padding-left:1.3rem}
/* End this sit? Two buttons inside the reader, no browser confirm */
.reader .rconfirm{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:1rem;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.reader .rconfirm[hidden]{display:none}
.reader .rconfirm-box{background:var(--bg);border:1px solid var(--rule);border-radius:12px;padding:1.2rem 1.3rem;max-width:22rem;width:100%;text-align:center;font-family:var(--ui);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.reader .rconfirm-box p{font-family:var(--display);font-size:1.3rem;margin:0 0 1rem;color:var(--ink)}
.reader .rconfirm-btns{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.reader .rconfirm-btns button{min-height:44px;flex:1 1 8rem}
/* the sit settings sheet: a bottom sheet on phones, a centred panel from 900 px; it never animates */
dialog.sitsheet:not([open]){display:none}
#sitSheet[open]{position:fixed;inset:auto 0 0 0;z-index:45;display:flex;flex-direction:column;width:100%;max-width:100%;max-height:88vh;max-height:88dvh;margin:0;padding:0;border:0;border-radius:18px 18px 0 0;background:var(--bg);color:var(--ink);box-shadow:0 -10px 34px rgba(0,0,0,.28);font-family:var(--ui)}
#sitSheet::backdrop{background:rgba(12,16,14,.5)}
#sitSheet.sit-fb{box-shadow:0 0 0 100vmax rgba(12,16,14,.5)}
@media (min-width:900px){#sitSheet[open]{inset:0;margin:auto;width:30rem;max-width:calc(100% - 2rem);height:fit-content;border-radius:14px;border:1px solid var(--rule)}}
.sit-hd{display:flex;align-items:center;gap:.5rem;padding:1rem 1rem .6rem 1.2rem;border-bottom:1px solid var(--rule)}
.sit-hd h2{flex:1;margin:0;font-family:var(--display);font-weight:400;font-size:1.35rem}
.sit-hd h2:focus{outline:none}
.sit-hd button{min-height:44px;min-width:44px;font-size:1rem}
.sit-body{overflow:auto;overscroll-behavior:contain;padding:.2rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom,0px))}
.sit-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;padding:.35rem 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.sit-row label{flex:1;cursor:pointer}
.sit-k{font-weight:600;color:var(--ink)}
.sit-sub{display:block;font-size:.8rem;color:var(--muted);font-weight:400}
.sit-row select{font:inherit;font-size:.9rem;padding:.35rem .45rem;min-height:40px;max-width:58%;border:1px solid var(--rule);border-radius:6px;background:var(--field);color:var(--ink)}
.sit-row input[type=checkbox]{width:1.35rem;height:1.35rem;accent-color:var(--moss);flex:none}
.sit-row input[type=range]{width:9rem;accent-color:var(--moss)}
.sit-group{border:0;margin:0;padding:.7rem 0 0;min-width:0}
.sit-group legend{padding:0;font-size:.95rem}
.sit-group .sit-row{padding-left:.8rem}
.sit-more{border-bottom:1px solid var(--rule)}
.sit-more > summary{cursor:pointer;color:var(--moss);font-size:.88rem;min-height:44px;display:flex;align-items:center}
.sit-more .sit-row{padding-left:.8rem}
.sit-more .sit-row:last-child{border-bottom:0}
li.placing{list-style:none;counter-increment:list-item 0;margin-left:-1.2rem;padding:.7rem .9rem;border:1px solid var(--rule);border-radius:8px;background:var(--bg)}
li.placing>b{display:block;font-family:var(--display);font-weight:400;font-size:1.05rem}
li.placing>.meta{display:block;font-size:.84rem;margin-top:.1rem}
li.placing .plist{margin:.5rem 0 0;padding-left:1.4rem;columns:2 16rem;column-gap:1.6rem}
li.placing .plist li{break-inside:avoid;margin:.18rem 0}
.plist .pat{font-family:var(--ui);font-size:.85rem;color:var(--muted)}
.plist .pm{font-weight:600}
.plist .pg{font-style:italic;color:var(--muted);font-size:.9rem}
.prbody .say{font-family:var(--ui);font-size:.8em;color:var(--brass)}
.pc-fig.bodyfig svg{max-height:none;width:100%;max-width:340px;margin:0 auto}
.plist li{display:list-item}
.plist .pat{display:block;margin-top:.25rem}
.plist .pm{display:block;font-size:1.02rem;line-height:1.35}
.plist .pg{display:block;line-height:1.35}

/* ---- praxis-core v1 additions: aphantasia-safe, offline keep, transcripts ---- */
.aphnote{font-family:var(--ui);font-size:.86rem;margin:.2rem 0 .6rem;padding:.45rem .7rem;border-left:3px solid var(--moss);background:color-mix(in srgb,var(--moss) 7%,transparent)}
.pc-steps li.aphalt{color:var(--ink)}
.aphmark{color:var(--moss);font-family:var(--ui)}
.reader .rseg.aphalt::before{content:"◇ ";color:var(--moss)}
.keepoff{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;grid-column:1/-1;margin-top:.35rem;font-family:var(--ui);font-size:.82rem}
.keepoff .status{color:var(--muted)}
details.transcript{grid-column:1/-1;margin-top:.4rem;font-family:var(--ui);font-size:.88rem}
details.transcript summary{cursor:pointer;color:var(--moss);font-weight:600}
details.transcript .tx{margin-top:.4rem;line-height:1.55;font-family:var(--body,inherit)}
.txslot{grid-column:1/-1}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* ---- the fallow week inside a course ---- */
.fallowsec .wk{color:var(--moss)}
/* the fallow week is offered, not required: drawn quieter, with a dashed rule (colours stay readable, so no opacity) */
.fallowsec,.weeksec.fallow{border-left:2px dashed var(--rule);padding-left:.9rem}
.fallowsec > h2,.weeksec.fallow > h2{color:var(--muted)}
.fallowdays{list-style:none;padding:0;display:grid;gap:.45rem;margin:1rem 0 1.4rem}
.fallowdays button{width:100%;text-align:left}
.days label.fallowday{border-color:var(--moss)}
.reader .rlabel{font-family:var(--ui);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);min-height:1.1em;margin-bottom:.6rem}
.reader .rlabel:empty{display:none}

/* ===== The tiles layout (course.json "cards": {"layout": "tiles"}; engine/tiles.js and engine/sheet.js). Every rule here is scoped to
   html.layout-tiles or to an element only that layout draws (.tile, .tdeck, the open #sheet, .cbar), so a stack course looks as it always has. ===== */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.layout-tiles .deck.tdeck{margin:1.3rem 0 1.8rem}
.layout-tiles .cardslot.tdeck{margin:1rem 0 1.4rem}  /* a single practice placed in the prose (The Placing, Ocular Sadhana) */
.tiles{display:grid;gap:.6rem}
.tile{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"open ring";align-items:center;gap:0 .7rem;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:3px .75rem 3px 3px}
.tile.counted{border-color:color-mix(in srgb,var(--moss) 45%,var(--rule))}
.tile.magonly{border-style:dashed;border-color:var(--brass)}
html.nomag .tile.magonly{display:none}
.tile-open{grid-area:open;display:flex;gap:.85rem;align-items:center;width:100%;min-height:64px;padding:0;background:none;color:var(--ink);border:0;border-radius:10px;text-align:left;font:inherit;cursor:pointer}
.tile-open:hover .tile-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tile-open:focus-visible,.tile .chip:focus-visible,.cbar a:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.tile-art{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:10px;overflow:hidden;color:#fff;background:color-mix(in srgb,var(--moss) 16%,var(--surface)) var(--art,none) var(--focus,50% 50%)/cover no-repeat}
.tile-art.noart{color:var(--brass)}
.tile-em,.sh-em{width:40px;height:40px;filter:drop-shadow(0 0 2px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(0,0,0,.35))}
.noart .tile-em,.noart .sh-em{filter:none}
.tile-tx{display:grid;gap:.1rem;min-width:0}
.tile-t{font-family:var(--display);font-size:1.12rem;line-height:1.15}
.tile-m{font-family:var(--ui);font-size:.8rem;line-height:1.25;color:var(--muted)}
/* a practice tile's one chip (Guide me) sits under its title and meta, beside the painting; the text keeps room for it.
   Learn and write tiles have no chip row: the meta line and the ring say what they are */
.tile[data-kind=practice] .tile-tx{padding-bottom:calc(36px + .15rem)}
.tile-chips{position:absolute;left:calc(3px + 64px + .85rem);bottom:5px;display:flex;flex-wrap:wrap;gap:.4rem}
.tile .chip{min-height:36px;max-width:none;padding:.3rem .85rem;font-size:.82rem;line-height:1.2}
.tile button.chip-play{background:var(--moss);color:var(--bg);border-color:var(--moss)}
.tile button.chip-play::before{content:"\25B6\FE0E";font-size:.7rem;margin-right:.1rem}
.tile > .ring{grid-area:ring;width:34px;height:34px}
svg.ring{border:0;border-radius:0;padding:0;min-width:0;opacity:1;font-size:inherit}  /* courses style the stack layout's text ring (.ring); the tile ring is an svg */
.ring circle{fill:none;stroke-width:3}
.ring .ring-bg{stroke:var(--rule)}
.ring .ring-fg{stroke:var(--moss);stroke-linecap:round;transition:stroke-dasharray .4s ease}
.ring .ring-ok{fill:none;stroke:var(--moss);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.ring.full .ring-ok{opacity:1}
.ring:not(.part):not(.full) .ring-fg{opacity:0}  /* a zero-length round cap would draw a dot */
.ring.sm{flex:none;width:22px;height:22px}
.ring.sm .ring-ok{stroke-width:3}
/* a locked week: its tiles greyed and compact (what is coming, not what to do yet); no sheet opens */
.tiles-locked .tiles{gap:.35rem}
.tiles-locked .tile{min-height:0;padding:.35rem .6rem .35rem .4rem;border-radius:10px}
/* locked: the words stay readable (muted, full opacity, AA); only the painting and emblem step back */
.tiles-locked .tile-t,.tiles-locked .tile-m{color:var(--muted)}
.tiles-locked .tile-art{opacity:.5}  /* the emblem sits inside it */
.tiles-locked .tile[data-kind] .tile-tx{padding-bottom:0}
.tiles-locked .tile-open{min-height:40px;gap:.7rem}
.tiles-locked .tile-art{width:40px;height:40px;border-radius:7px}
.tiles-locked .tile-em{width:28px;height:28px}
.tiles-locked .tile-t{font-size:1rem}
.tiles-locked .tile > .ring{display:none}
.tiles-locked .tile-chips{display:none}
.tiles-locked .tile-open{cursor:default}
.tiles-locked .tile-open:hover .tile-t{text-decoration:none}
/* the weeks after the next locked one (.wk-later, hidden) fold into one list, one line a week (engine/tiles.js laterList) */
.wk-laterlist{margin-top:4.5rem}
.wk-laterlist .ll-why{margin:.3rem 0 .9rem;font-family:var(--ui);font-size:.92rem;color:var(--muted)}
.wk-laterlist .ll{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.wk-laterlist .ll li{display:flex;align-items:center;gap:.7rem;padding:.3rem 0;font-family:var(--ui);font-size:.95rem;color:var(--muted)}
.wk-laterlist .ll-em{flex:none;width:24px;height:24px;color:var(--brass);opacity:.8}
.wk-laterlist .ll-opt small{font-size:.82rem}
/* two columns of tiles on a wide screen: a week's row, the library */
@media (min-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tdeck>.tiles-lab{margin:1.4rem .2rem .55rem}  /* a section's second deck (engine/tiles.js) */
#sheet .sh-prose [id]{scroll-margin-top:1rem}  /* a link or tab that opens a sheet at a spot (Listen at #listen) leaves room under the read bar */
.tiles-reqs{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;margin:.7rem .3rem 0;font-family:var(--ui);font-size:.82rem;color:var(--muted)}
.tiles-reqs .ok{color:var(--moss)}
/* the sheet: a bottom sheet on phones, a large centred card from 900 px (the page dims behind it) */
dialog.sheet:not([open]){display:none}
#sheet[open]{position:fixed;inset:auto 0 0 0;z-index:35;display:flex;flex-direction:column;width:100%;max-width:100%;height:92vh;height:92dvh;max-height:none;margin:0;padding:0;border:0;border-radius:18px 18px 0 0;background:var(--bg);color:var(--ink);box-shadow:0 -10px 34px rgba(0,0,0,.28)}
#sheet::backdrop{background:rgba(12,16,14,.5)}
#sheet.sheet-fb{box-shadow:0 0 0 100vmax rgba(12,16,14,.5)}
@media (prefers-reduced-motion:no-preference){#sheet[open]{animation:sheetUp .24s cubic-bezier(.2,.8,.25,1)}}
@keyframes sheetUp{from{transform:translateY(100%)}}
@keyframes sheetIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
@media (prefers-reduced-motion:reduce){#sheet[open]{animation:none}.ring .ring-fg{transition:none}}
body.sheet-open{overflow:hidden}
@media (min-width:900px){
  /* the card: up to 920 px wide and nearly the full height; the reading column inside stays at a book's measure (--sh-measure) */
  #sheet{--sh-w:min(920px,calc(100vw - 4rem));--sh-pad:max(1.75rem,calc((var(--sh-w) - var(--sh-measure,680px)) / 2))}
  #sheet[open]{inset:0;margin:auto;width:var(--sh-w);height:min(calc(100vh - 3rem),1040px);height:min(calc(100dvh - 3rem),1040px);border:1px solid var(--rule);border-radius:20px;box-shadow:0 28px 80px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.08);overflow:hidden}
  #sheet::backdrop{background:rgba(12,16,14,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  #sheet.sheet-fb{box-shadow:0 0 0 100vmax rgba(12,16,14,.55),0 28px 80px rgba(0,0,0,.3)}
  .sheet-grab{display:none}
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){#sheet[open]{animation:sheetIn .26s cubic-bezier(.2,.8,.25,1)}#sheet[open]::backdrop{animation:shDim .26s ease}}
@keyframes shDim{from{opacity:0}}
.sheet-hd{position:relative;display:flex;align-items:center;gap:.5rem;padding:1.1rem 1rem .55rem 1.1rem;border-bottom:1px solid var(--rule)}
.sheet-grab{position:absolute;top:.4rem;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--rule)}
#sheetWhere{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-hd button{min-height:40px;min-width:44px;padding:.4rem .75rem}
#sheetClose{font-size:1rem}
.sheet-body{flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 1.1rem calc(2.5rem + env(safe-area-inset-bottom,0px))}
.sheet-body:focus{outline:none}
.sh-art{display:flex;align-items:flex-end;aspect-ratio:2/1;margin:1rem 0 .9rem;padding:.7rem;border-radius:14px;color:#fff;background:color-mix(in srgb,var(--moss) 16%,var(--surface)) var(--art,none) var(--focus,50% 50%)/cover no-repeat}
.sh-art.noart{aspect-ratio:auto;min-height:0;padding:0;background:none;color:var(--brass);margin-bottom:.2rem}
#sheet h2{font-size:clamp(1.6rem,1.4rem + 1vw,2rem);margin:.5rem 0 .3rem}
#sheet h2:focus{outline:none}
#sheet h2:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.sh-meta{margin:.2rem 0 .9rem;font-family:var(--ui);font-size:.86rem;line-height:1.45;color:var(--muted)}
.sh-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.sh-actions button{min-height:44px}
.sh-actions button.sh-undo{min-height:44px;padding:.3rem .5rem}
.sh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:1.1rem 0}
.sh-stats .stat{display:flex;gap:.45rem;align-items:center;min-width:0;padding:.5rem .6rem;border:1px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--ink);font-family:var(--ui);font-size:.82rem;line-height:1.3}
.sh-stats .stat .sk{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sh-stats .stat .sv{display:block;overflow-wrap:anywhere}
.block{margin:1.1rem 0}
#sheet .block .key{margin:0}
.sh-brief h3{font-size:1.2rem;margin:0 0 .3rem}
.sh-brief ol{margin:.2rem 0;padding-left:1.3rem}
.sh-missing{display:inline-block;margin-top:.3rem;padding:.1rem .45rem;border:1px dashed var(--ember);border-radius:4px;font-family:var(--ui);font-size:.74rem;color:var(--ember)}
.sh-folds{margin:1.2rem 0;border-bottom:1px solid var(--rule)}
.sh-src{margin:.4rem 0 1rem;font-family:var(--ui);font-size:.82rem;line-height:1.45;color:var(--muted)}
.sh-folds > details{border-top:1px solid var(--rule)}
.sh-folds > details > summary{padding:.7rem 0;cursor:pointer;font-family:var(--ui);font-weight:600;font-size:.92rem;color:var(--moss)}
.fold-in{padding-bottom:.8rem}
.fold-in .pc-tips{margin:.2rem 0 .6rem}
#sheet .sheetslot h4:first-child{margin-top:.2rem}
#sheet .withnick{margin:.6rem 0 .4rem}
#sheet .sh-dup{display:none}
.readbar{position:sticky;top:0;z-index:1;height:3px;margin:.7rem -1.1rem .4rem;background:var(--rule)}
.readbar i{display:block;width:0;height:100%;background:var(--brass)}
.sh-readrow{margin:1.6rem 0 .6rem}
.sh-readrow button,.sh-write + .sh-readrow button{min-height:44px}
#sheet .sh-write .weekprog{margin-top:1.2rem}
#sheet .pc-tools{margin-top:1rem}
/* the desktop card's reading column (after the base rules above, so these win) */
@media (min-width:900px){
  .sheet-hd{padding:.9rem 1rem .7rem var(--sh-pad)}
  .sheet-body{padding:0 var(--sh-pad) 3.5rem}
  .readbar{margin-inline:calc(-1 * var(--sh-pad))}
  .sh-art{aspect-ratio:12/5;margin:1.6rem 0 1.2rem;border-radius:16px}
  #sheet h2{font-size:clamp(2rem,1.6rem + 1vw,2.6rem);margin:.4rem 0 .35rem}
  .sh-meta{font-size:.92rem}
  .sh-stats{gap:.7rem;margin:1.3rem 0}
  .sh-stats .stat{padding:.65rem .8rem;font-size:.88rem}
}
/* the course tab bar (phones): Today · Weeks · Listen · Journal, with Pause floating above it; the old top strip steps aside */
.cbar{display:none}
.ctoast{position:fixed;left:50%;width:max-content;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;max-width:calc(100% - 2rem);padding:.6rem 1rem;border-radius:999px;background:var(--ink);color:var(--surface);font-family:var(--ui);font-size:.9rem;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.ctoast:empty{display:none}
@media (max-width:899px){.layout-tiles .ctoast{bottom:calc(56px + 66px + env(safe-area-inset-bottom,0px))}}
.layout-tiles .hud{display:none!important}
@media (max-width:899px){
  .layout-tiles .cbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:color-mix(in srgb,var(--surface) 96%,transparent);border-top:1px solid var(--rule);backdrop-filter:blur(6px)}
  .layout-tiles .cbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:56px;font-family:var(--ui);font-size:.74rem;font-weight:600;color:var(--muted);text-decoration:none}
  .layout-tiles .cbar a:hover,.layout-tiles .cbar a:active{color:var(--moss)}
  .layout-tiles .cbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .layout-tiles .pausebtn{bottom:calc(56px + 12px + env(safe-area-inset-bottom,0px))}
  .layout-tiles .pausepanel{bottom:calc(56px + 66px + env(safe-area-inset-bottom,0px));max-height:calc(100vh - 160px)}
  .layout-tiles .wrap{padding-bottom:calc(4rem + 112px)}
  html.layout-tiles{scroll-padding-bottom:128px}
}
/* the compact hero on phones: the glyph at 84 px, the byline goes to the Begin here card */
@media (max-width:640px){
  .layout-tiles .hero{padding-block:1.4rem 1.2rem;gap:.8rem}
  html.layout-tiles .hero .glyph{width:84px}
  .layout-tiles .hero .sub{font-size:1.05rem;margin-top:.6rem}
  .layout-tiles .hero .byline{display:none}  /* a byline in a sheet (Begin here) still shows */
}
/* the Today card as a tile: the week's painting, the practice, a play mark */
.layout-tiles .today{border-radius:14px}
.layout-tiles #todayBtns button.big1{display:flex;align-items:center;gap:.85rem;width:100%;min-height:80px;padding:.55rem .75rem .55rem .55rem;border:1px solid var(--moss);border-radius:14px;background:var(--surface);color:var(--ink);font-family:var(--display);font-size:1.08rem;font-weight:400;line-height:1.25;text-align:left}
.layout-tiles #todayBtns button.big1::before{content:"";flex:none;width:64px;height:64px;border-radius:10px;opacity:1;background:color-mix(in srgb,var(--moss) 16%,var(--surface)) var(--art,none) var(--focus,50% 50%)/cover no-repeat}
.layout-tiles #todayBtns button.big1::after{content:"\25B6\FE0E";flex:none;display:grid;place-items:center;width:40px;height:40px;margin-left:auto;border-radius:50%;background:var(--moss);color:var(--bg);font-family:var(--ui);font-size:.85rem}
.layout-tiles #todayBtns .tslot .tb button.ghost{min-height:40px}
@media print{.tile-chips,.tiles-reqs,.cbar,#sheet{display:none!important}}

/* praxis-visuals · styles for the moving figures (src/core/praxis-visuals.css, appended to praxis-core.css by build.py) */
.pv-stage,.pv-note,.pv-wheel,.pv-hand,.pv-glyph,.bodysvg,.pv-demo{--pv-moss:var(--moss,var(--accent,#345346));--pv-sun:var(--brass,var(--sun,#84631F));--pv-rule:var(--rule,#C7CEC5);--pv-muted:var(--muted,#59645D);--pv-ink:var(--ink,#1C2320);--pv-surface:var(--surface,#F6F7F3)}
/* 1 · the stage */
.pv-stage{display:flex;flex-direction:column;align-items:center;gap:.2rem;margin:.2rem auto .4rem}
.pv-stage-svg{width:min(62vw,240px);height:auto;display:block;overflow:visible}
.pv-stage .pv-frame{fill:none;stroke:var(--pv-rule);stroke-width:1}
.pv-stage .pv-ticks{stroke:var(--pv-rule);stroke-width:1.5}
.pv-stage .pv-dots{fill:none;stroke:var(--pv-rule);stroke-width:1;stroke-dasharray:2 7}
.pv-stage .pv-turn{transform-box:view-box;transform-origin:171px 171px;animation:pv-turn 180s linear infinite}
.pv-stage .pv-floor{fill:none;stroke:var(--pv-moss);stroke-width:1;stroke-dasharray:3 5;opacity:.45}
.pv-stage .pv-orb{fill:color-mix(in srgb,var(--pv-moss) 16%,transparent);stroke:var(--pv-moss);stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.pv-stage .pv-ring{fill:none;stroke:var(--pv-sun);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.pv-stage .pv-point{fill:var(--pv-sun)}
.pv-stage .pv-gaze{opacity:0}
.pv-stage .pv-cross{stroke:var(--pv-rule);stroke-width:1.2}
.pv-stage .pv-flame{fill:var(--pv-sun);transform-box:fill-box;transform-origin:50% 100%}
.pv-stage:not(.on) .pv-cue{visibility:hidden}  /* no cue before Start: nothing is playing yet */
.pv-cue{margin:0;min-height:1.4em;font-family:var(--ui,Karla,sans-serif);font-weight:700;font-size:.92rem;letter-spacing:.03em;position:relative;width:100%;text-align:center}
.pv-cue span{position:absolute;left:0;right:0;opacity:0;transition:opacity .4s}
.pv-c-in{color:var(--pv-moss)}.pv-c-out,.pv-c-hum,.pv-c-beat{color:var(--pv-sun)}.pv-c-look{color:var(--pv-muted)}
/* breath: the orb leads (4 s in, 6 s out); the rings ride the out-breath */
.pv-stage[data-mode=breath] .pv-orb{animation:pv-breath 10s infinite}
.pv-stage[data-mode=breath] .r1{animation:pv-ring-out 10s infinite}
.pv-stage[data-mode=breath] .r2{animation:pv-ring-out2 10s infinite}
.pv-stage[data-mode=breath] .pv-c-in{animation:pv-cue-in 10s infinite}
.pv-stage[data-mode=breath] .pv-c-out{animation:pv-cue-out 10s infinite}
/* sound: the rings lead with the drone; the orb holds */
.pv-stage[data-mode=sound] .pv-orb{fill:color-mix(in srgb,var(--pv-sun) 18%,transparent);stroke:var(--pv-sun);transform:scale(.7);animation:pv-shimmer 6s ease-in-out infinite}
.pv-stage[data-mode=sound] .pv-ring{animation:pv-ring-sound 6s linear infinite}
.pv-stage[data-mode=sound] .r2{animation-delay:-2s}.pv-stage[data-mode=sound] .r3{animation-delay:-4s}
.pv-stage[data-mode=sound] .pv-c-hum{opacity:1}
.pv-stage[data-mode=sound] .pv-floor{opacity:0}
/* gaze: a steady point and a quiet flame (Ocular Sadhana, trāṭaka) */
.pv-stage[data-mode=gaze] .pv-orb,.pv-stage[data-mode=gaze] .pv-floor,.pv-stage[data-mode=gaze] .pv-rings{opacity:0}
.pv-stage[data-mode=gaze] .pv-gaze{opacity:1}
.pv-stage[data-mode=gaze] .pv-flame{animation:pv-flicker 3.2s ease-in-out infinite}
.pv-stage[data-mode=gaze] .pv-c-look{opacity:1}
/* drum: rings pulse at the beat (Drum, Bowl and Voice) */
.pv-stage[data-mode=drum] .pv-orb{transform:scale(.55);fill:color-mix(in srgb,var(--pv-sun) 22%,transparent);stroke:var(--pv-sun)}
.pv-stage[data-mode=drum] .pv-floor{opacity:0}
.pv-stage[data-mode=drum] .r1{animation:pv-ring-beat var(--pv-beat,.5s) ease-out infinite}
.pv-stage[data-mode=drum] .r2{animation:pv-ring-beat var(--pv-beat,.5s) ease-out infinite;animation-delay:calc(var(--pv-beat,.5s) / -2)}
.pv-stage[data-mode=drum] .pv-c-beat{opacity:1}
/* still: the frame, the point and the slow ring */
.pv-stage[data-mode=still] .pv-orb{transform:scale(.6);opacity:.55}
.pv-stage[data-mode=still] .pv-floor{opacity:0}
/* paused until the reader runs */
.pv-stage:not(.on) *,.pv-stage:not(.on) .pv-cue span{animation-play-state:paused!important}
.pv-stage:not(.on)[data-mode=breath] .pv-c-in{opacity:1}
@keyframes pv-turn{to{transform:rotate(360deg)}}
@keyframes pv-breath{0%{transform:scale(1);animation-timing-function:cubic-bezier(.42,0,.58,1)}40%{transform:scale(2.2);animation-timing-function:cubic-bezier(.42,0,.58,1)}100%{transform:scale(1)}}
@keyframes pv-ring-out{0%,40%{transform:scale(1);opacity:0}41%{opacity:.55}100%{transform:scale(2.6);opacity:0}}
@keyframes pv-ring-out2{0%,55%{transform:scale(1);opacity:0}56%{opacity:.35}100%{transform:scale(2.6);opacity:0}}
@keyframes pv-cue-in{0%{opacity:0}4%,36%{opacity:1}40%,100%{opacity:0}}
@keyframes pv-cue-out{0%,40%{opacity:0}44%,96%{opacity:1}100%{opacity:0}}
@keyframes pv-shimmer{0%,100%{transform:scale(.7)}50%{transform:scale(.77)}}
@keyframes pv-ring-sound{0%{transform:scale(.6);opacity:.75}100%{transform:scale(2.6);opacity:0}}
@keyframes pv-ring-beat{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@keyframes pv-flicker{0%,100%{transform:scale(1,1);opacity:.95}30%{transform:scale(.94,1.06);opacity:.85}60%{transform:scale(1.04,.96);opacity:1}}
/* 2 · the body map: a quiet ring on the place, no brass halo crowding the face */
.bodysvg .bpt .halo{fill:none;stroke:var(--pv-moss);stroke-width:1;opacity:0}
.bodysvg .bpt.on .halo{opacity:.7;animation:pv-halo 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.bodysvg .bpt.on .dot{fill:var(--pv-moss)}
.pv-trace .pv-seg{fill:none;stroke:var(--pv-sun);stroke-width:2;stroke-linecap:round}
.pv-trace .pv-seg.now{stroke-dasharray:var(--pv-len);stroke-dashoffset:var(--pv-len);animation:pv-draw 1.6s cubic-bezier(.42,0,.58,1) forwards}
@keyframes pv-halo{0%,100%{transform:scale(.75)}50%{transform:scale(1)}}
@keyframes pv-draw{to{stroke-dashoffset:0}}
/* 3 · hand plates */
.pv-hand{width:100%;max-width:200px;height:auto;display:block;margin:.2rem auto}
.pv-hand .pv-fo{fill:none;stroke:var(--pv-moss);stroke-width:15;stroke-linecap:round}
.pv-hand .pv-fi{fill:none;stroke:var(--pv-surface);stroke-width:12;stroke-linecap:round}
.pv-hand .pv-palm{fill:var(--pv-surface);stroke:var(--pv-moss);stroke-width:1.5}
.pv-hand .pv-wrist{stroke:var(--pv-moss);stroke-width:1.5;stroke-linecap:round}
.pv-hand .pv-touch{fill:var(--pv-sun)}
.mudra .pv-hand{max-width:150px;animation:pv-fade .4s ease-out}
@keyframes pv-fade{from{opacity:0}to{opacity:1}}
/* 4 · your note */
.pv-note{display:grid;gap:.6rem;padding:.9rem 1rem;border:1px solid var(--pv-rule);border-radius:16px;background:var(--pv-surface);margin:.6rem 0}
.pv-note-head{display:flex;align-items:flex-end;gap:.9rem}
.pv-note-name{font-family:var(--display,Marcellus,serif);font-size:3rem;line-height:1;color:var(--pv-moss)}
.pv-note-hz{font-family:var(--ui,Karla,sans-serif);font-weight:700;font-size:.9rem;padding-bottom:.35rem}
.pv-waves{width:100%;height:auto;display:block;overflow:hidden}
.pv-waves .pv-axis{stroke:var(--pv-rule)}
.pv-waves path{fill:none}
.pv-waves .pv-w1 path{stroke:var(--pv-sun);stroke-width:1.6}
.pv-waves .pv-w2 path{stroke:var(--pv-moss);stroke-width:2}
.pv-waves .pv-w1{animation:pv-slide 8s linear infinite}.pv-waves .pv-w2{animation:pv-slide 7.4s linear infinite}
.pv-matched .pv-waves .pv-w2{animation-duration:8s}
@keyframes pv-slide{to{transform:translateX(-342px)}}
.pv-note-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.pv-fig{margin:0;display:grid;gap:.3rem}
.pv-fig svg{width:100%;max-width:150px;height:auto;margin:0 auto;display:block}
.pv-fig .pv-rim{fill:none;stroke:var(--pv-rule)}
.pv-fig .pv-sig{fill:none;stroke:var(--pv-sun);stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1600;stroke-dashoffset:1600;animation:pv-draw 6s ease-out forwards}
.pv-fig .pv-live{fill:none;stroke:var(--pv-moss);stroke-width:1.8}
.pv-matched .pv-live{stroke:var(--pv-sun)}
.pv-fig figcaption{font-size:.9rem;line-height:1.35}
.pv-note-btns{display:flex;flex-wrap:wrap;gap:.5rem}
/* 5 · glyphs and 6 · the wheel */
.pv-glyph{width:100%;height:100%;display:block;color:currentColor}
.pv-wheel{width:100%;max-width:342px;height:auto;display:block;margin:0 auto}
.pv-wheel .pv-gring{fill:none;stroke:var(--pv-rule);stroke-width:.8;stroke-dasharray:1 4}
.pv-wheel .pv-gring.got{stroke:var(--pv-muted);stroke-dasharray:none;opacity:.5}
.pv-wheel .pv-y,.pv-wheel .pv-y *{fill:none;stroke:var(--pv-rule);stroke-width:1.15;stroke-linejoin:round}
.pv-wheel .pv-y.on,.pv-wheel .pv-y.on *{stroke:var(--pv-sun);stroke-width:1.35}
.pv-wheel .pv-y.next,.pv-wheel .pv-y.next *{stroke:var(--pv-moss);stroke-width:1.6}
.pv-wheel .pv-ybindu{fill:var(--pv-rule)}
.pv-wheel .pv-ybindu.on{fill:var(--pv-sun)}
.pv-wheel .pv-slot{fill:none;stroke:var(--pv-rule);stroke-width:5;stroke-linecap:round;opacity:.7}
.pv-wheel .pv-carc{fill:none;stroke:var(--pv-sun);stroke-width:5;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:pv-draw 1.6s .3s cubic-bezier(.42,0,.58,1) forwards}
.pv-wheel .pv-carc.sealed{stroke-width:6;filter:drop-shadow(0 0 3px var(--pv-sun))}
.pv-wheel .pv-seal{fill:var(--pv-sun);stroke:var(--ground,var(--bg,#ECEFEA));stroke-width:1.5}
.pv-wheel .pv-roman{font-family:var(--display,Marcellus,serif);font-size:34px;fill:var(--pv-ink);text-anchor:middle}
.pv-wheel .pv-gname{font-family:var(--ui,Karla,sans-serif);font-size:11px;font-weight:700;letter-spacing:.12em;fill:var(--pv-moss);text-anchor:middle}
/* Reduce Motion: the orb becomes a slow fade; rings, turns and draws rest; figures show whole */
@media (prefers-reduced-motion:reduce){
 .pv-stage .pv-turn,.pv-stage .pv-ring,.pv-stage .pv-flame,.pv-waves g,.bodysvg .bpt.on .halo{animation:none!important}
 .pv-stage .pv-ring{opacity:0!important}
 .pv-stage[data-mode=breath] .pv-orb{animation:pv-breath-fade 10s ease-in-out infinite!important;transform:scale(1.6)}
 .pv-trace .pv-seg.now,.pv-fig .pv-sig,.pv-wheel .pv-carc{animation:none!important;stroke-dashoffset:0!important}
}
@keyframes pv-breath-fade{0%,100%{opacity:.45}40%{opacity:1}}
@media print{.pv-stage{display:none}}

/* 7 · moving figures for practice cards (motion:"<kind>") and the home page's interval drawing: line figures, moss and brass */
.pv-demo{display:grid;justify-items:center;gap:.3rem;width:100%}
.pv-demo .pv-dfig{width:100%;max-width:300px;aspect-ratio:var(--pv-ar,1.25)}
.pv-demo .pv-dfig svg{width:100%;height:100%;display:block;overflow:visible}
.pv-dcue{margin:0;min-height:2.6em;font-family:var(--ui,Karla,sans-serif);font-weight:700;font-size:.9rem;line-height:1.35;color:var(--pv-moss);text-align:center;display:flex;align-items:center;justify-content:center;max-width:24rem}
.pv-demo .pv-dl{fill:none;stroke:var(--pv-ink);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.55}
.pv-demo .pv-dr{fill:none;stroke:var(--pv-rule);stroke-width:1;vector-effect:non-scaling-stroke}
.pv-demo .pv-dy{fill:none;stroke:var(--pv-moss);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pv-demo .pv-db{fill:none;stroke:var(--pv-sun);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pv-demo .pv-dm{fill:none;stroke:var(--pv-moss);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pv-demo .pv-dfb{fill:var(--pv-sun)}.pv-demo .pv-dfm{fill:var(--pv-moss)}.pv-demo .pv-dfi{fill:var(--pv-ink)}
.pv-demo .pv-dg{fill:var(--pv-sun);fill-opacity:.2}.pv-demo .pv-dgm{fill:var(--pv-moss);fill-opacity:.14}
.pv-demo .pv-dskin{fill:var(--pv-sun);opacity:0}
.pv-demo .pv-dbig{font-family:var(--display,Marcellus,serif);fill:var(--pv-sun)}
.pv-demo .pv-ddark{fill:#0E1210}.pv-demo .pv-dafter{fill:#8CC9D9}
.sh-demo{margin:0 0 .6rem;padding:.6rem .4rem .2rem;border-bottom:1px solid var(--rule,#C7CEC5)}
.sh-demo .pv-dfig{max-width:min(300px,calc(250px * var(--pv-ar,1.25)))}  /* never taller than 250px: the title stays near the top */
.rdemo{margin:.2rem auto .4rem}
.rdemo .pv-dfig{max-width:min(62vw,260px,calc(min(30vh,240px) * var(--pv-ar,1.25)))}
/* the Sangha centre of the Path: the walked yantra */
.pv-wheel .pv-walked .pv-y,.pv-wheel .pv-walked .pv-y *{stroke:var(--pv-muted);stroke-width:1;opacity:.75}
.pv-wheel .pv-walked .pv-ybindu{fill:var(--pv-muted)}
.pv-wheel .pv-ylamp{fill:var(--pv-sun)}
.pv-wheel .pv-ylamph{fill:var(--pv-sun);opacity:.22}
@media print{.pv-demo{display:none}}

/* generated by tools/typeface.py from src/typeface.json (active: classic). Do not edit. */