/* learn.css — the learning platform. Reads tokens.css first; adds only what the platform needs.
   White. One living thing per viewport. Course colours on rings, ticks and hairlines only. */

/* ---------- page transitions: the mark travels between the landing and the platform ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root){animation:vt-out 200ms var(--ease-out) both}
::view-transition-new(root){animation:vt-in 320ms var(--ease-out) both}
::view-transition-group(mark){animation-duration:480ms;animation-timing-function:var(--ease-out)}
::view-transition-group(*){animation-timing-function:var(--ease-out)}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

main#app{position:relative;z-index:1;outline:none;min-height:calc(100svh - 64px);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
main#app.leaving{opacity:0;transform:translateY(-8px)}

/* ---------- nav: the same mark as the landing ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgb(255 255 255 / .86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--t-ui) var(--ease-out)}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.mark{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.mark .ring{color:var(--ink);transform:scale(calc(.97 + var(--breath) * .06));transform-origin:50% 50%}
.wordmark{font-family:var(--serif);font-size:17px;font-weight:400;letter-spacing:-.01em;font-variation-settings:"opsz" 20,"SOFT" 20,"WONK" 0}
.navlinks{display:flex;gap:4px;font-size:14px}
.navlink{padding:.5em .8em;border-radius:999px;color:var(--muted);transition:color var(--t-ack) var(--ease-out),background var(--t-ack) var(--ease-out)}
.navlink[aria-current],.fine .navlink:hover{color:var(--ink)}
.navlink:active{background:var(--line-2)}

/* ---------- shared bits ---------- */
.narrow{max-width:640px}
.press{position:relative;overflow:hidden;isolation:isolate}
.press .ink{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px;border-radius:50%;background:currentColor;opacity:.12;pointer-events:none;transform:scale(0);animation:ink 520ms var(--ease-expo) forwards;z-index:-1}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn.is-busy .label{opacity:.6}
.linkish{font-family:var(--sans);font-size:14px;color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;padding:.4em 0}
.fine .linkish:hover{color:var(--ink)}
.notice{color:var(--muted);font-size:var(--fs--1);padding:.9em 1.1em;border:1px solid var(--line);border-radius:var(--radius-s);max-width:var(--measure)}
.notice.calm{border:0;padding:0}
.tick{width:18px;height:18px;flex:none}
.tick path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 300ms var(--ease-out)}
.tick.drawn path,.done .tick path,.is-done .tick path{stroke-dashoffset:0}
[data-reveal="rise"]{transform:translateY(16px);transition-duration:calc(700ms * var(--slow,1)),calc(900ms * var(--slow,1))}
.spark{position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--c,var(--ink));pointer-events:none;z-index:60;box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--ink)) 18%,transparent)}

/* the loading state is the brand breathing, never a spinner */
.loading{display:grid;place-items:center;min-height:60vh}
.ring.breathe{color:var(--ink);transform:scale(calc(.9 + var(--breath) * .14));transform-origin:50% 50%;--p:calc(.08 + var(--breath) * .84)}
.ring.breathe .fill{transition:none}

/* ---------- home ---------- */
.home{padding:clamp(40px,8vh,96px) 0 96px}
.home-head{max-width:720px;margin-bottom:clamp(32px,6vh,64px)}
.home-head .display{font-size:var(--fs-3);margin:.35em 0 .4em}
.display.exhale{font-variation-settings:"opsz" 144,"SOFT" 70,"WONK" 1,"wght" 520}
.display.settling{transition:font-variation-settings 1100ms var(--ease-out)}
.home-head .lede{margin-top:.6em}

.cont{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,36px);margin-bottom:clamp(28px,5vh,48px);max-width:720px;background:var(--paper)}
.cont.back{--slow:1.3}
.cont .h{margin:.3em 0 .35em}
.cont-line{font-size:14px;margin-bottom:1.4em}
.cont-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cont .btn-ink{box-shadow:0 0 0 calc(2px + var(--breath) * 6px) rgb(var(--light) / calc(var(--glow) * .9)),0 10px 30px -14px rgb(20 20 18 / .5)}

.day{font-size:var(--fs--1);color:var(--muted);margin:-8px 0 28px;display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
.day.milestone{color:var(--ink-2)}
.day .dismiss{width:28px;height:28px;border-radius:50%;color:var(--faint);display:inline-grid;place-items:center;font-size:16px;line-height:1;transition:color var(--t-ack) var(--ease-out),background var(--t-ack) var(--ease-out)}
.fine .day .dismiss:hover{color:var(--ink);background:var(--line-2)}
.day.gone{opacity:0;transform:translateY(-6px);transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.card{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px 26px;color:var(--ink);transition:box-shadow var(--t-ui) var(--ease-out),transform var(--t-ack) var(--ease-out),border-color var(--t-ui) var(--ease-out)}
.fine .card:hover{border-color:var(--ink)}
.card:active{transform:scale(.985)}
.card-ring{margin-bottom:22px;width:64px;height:64px}
.card .eyebrow{margin-bottom:.5em}
.card .h{margin-bottom:.45em;font-size:var(--fs-1)}
.card-meta{font-size:var(--fs--1)}

/* ---------- course page ---------- */
.course{padding:clamp(32px,6vh,72px) 0 96px}
.course-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:start;margin-bottom:clamp(36px,7vh,72px)}
.course-ring{width:96px;height:96px;transform:translateY(var(--lift))}
.course-head .h-3{margin:.25em 0 .35em;max-width:16ch}
.course-head .lede{margin-bottom:.9em}
.course-count{font-size:14px;color:var(--muted);margin-bottom:1.4em}
.course-cta{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:640px){.course-head{grid-template-columns:1fr}.course-ring{width:72px;height:72px}.course-ring .ring{width:72px;height:72px}}

.path{list-style:none;padding:0;margin:0 0 clamp(40px,7vh,72px);position:relative;max-width:720px}
.path::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:1px;background:var(--line)}
.node{position:relative}
.node > a,.node > span.row{display:grid;grid-template-columns:24px 1fr auto;gap:18px;align-items:center;padding:16px 10px 16px 0;border-radius:var(--radius-s);color:var(--ink);transition:background var(--t-ack) var(--ease-out)}
.fine .node > a:hover{background:var(--wash)}
.dot{position:relative;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--paper);transition:box-shadow var(--t-ui) var(--ease-out),background var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out)}
.dot .tick{width:14px;height:14px}
.node.done .dot{background:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.node.current .dot{box-shadow:inset 0 0 0 1.5px var(--c),0 0 0 calc(3px + var(--breath) * 5px) color-mix(in srgb,var(--c) 14%,transparent)}
.node.current .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.node.future .node-title{color:var(--muted)}
.node.future .dot{box-shadow:inset 0 0 0 1px var(--line-2)}
.node-title{display:block;font-size:var(--fs-0);line-height:1.3}
.node.current .node-title{font-variation-settings:"opsz" 20,"SOFT" 20,"WONK" 0}
.node-meta{display:block;font-size:var(--fs--1);margin-top:.25em}
.node-cta{font-size:14px;color:var(--ink);white-space:nowrap}
.node.future .node-cta,.node.done .node-cta{display:none}

.buy{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,32px);max-width:520px;margin-bottom:clamp(40px,7vh,72px)}
.buy .price{display:flex;align-items:baseline;gap:.6em;margin:.5em 0 1.2em}
.buy .price .h{font-size:var(--fs-2)}
.buy-note{font-size:14px;color:var(--muted);margin-top:1.1em}
.buy-note a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

.lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:40px;max-width:800px}
.lists ul{margin-top:.8em;padding-left:1.1em;color:var(--ink-2)}
.lists li{margin:.35em 0}

/* ---------- lesson page ---------- */
.lesson{--c:var(--ink);padding:clamp(28px,5vh,56px) 0 96px;display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:1024px){.lesson{grid-template-columns:minmax(0,1fr) 280px;gap:72px}}
.lesson-head{margin-bottom:clamp(24px,4vh,40px)}
.lesson-head .eyebrow a{transition:color var(--t-ack) var(--ease-out)}
.fine .lesson-head .eyebrow a:hover{color:var(--ink)}
.lesson-head .h-3{margin:.3em 0 .35em;max-width:18ch}
.lesson-meta{font-size:14px}

.prose{max-width:var(--measure);font-size:var(--fs-0);line-height:1.6}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.25em}
.prose li{margin:.3em 0}
.prose li p{margin-bottom:.4em}
.prose h4{font-family:var(--sans);font-size:var(--fs--1);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:2.2em 0 .8em}
.prose h3{font-family:var(--serif);font-weight:400;font-size:var(--fs-1);line-height:1.25;margin:2em 0 .6em;font-variation-settings:"opsz" 48,"SOFT" 20,"WONK" 0}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--faint);transition:text-decoration-color var(--t-ack) var(--ease-out)}
.fine .prose a:hover{text-decoration-color:var(--ink)}
.prose strong{font-weight:600}
.prose em{font-style:italic}
.prose table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14.5px;margin:1.4em 0 1.8em}
.prose th,.prose td{text-align:left;vertical-align:top;padding:.65em .6em;border-top:1px solid var(--line)}
.prose tr:last-child td{border-bottom:1px solid var(--line)}
.prose th{font-weight:500;color:var(--muted);font-size:var(--fs--1);letter-spacing:.06em;text-transform:uppercase}
.prose img{border-radius:var(--radius-s)}
.sec + .sec{margin-top:2.6em}
.sec-h{font-size:var(--fs-1);margin:0 0 .7em;line-height:1.25}
.sec-h + p{margin-top:0}

.vid{margin:1.4em 0 2.2em}
.vid-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--wash);isolation:isolate;outline:none}
.vid-frame:focus-visible{box-shadow:0 0 0 1.5px var(--ink)}
.vid-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1200ms var(--ease-out),opacity 400ms var(--ease-out)}
.fine .vid-frame:hover .vid-thumb{transform:scale(1.045)}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgb(20 20 18 / .28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:scale(calc(.96 + var(--breath) * .08));transition:background var(--t-ui) var(--ease-out)}
.play .ring{position:absolute;inset:0;color:#fff;--p:1;width:72px;height:72px}
.play .ring .track{stroke:rgb(255 255 255 / .25)}
.play .ring .fill{transition:none}
.play .tri{width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent currentColor;margin-left:4px}
.fine .play:hover{background:rgb(20 20 18 / .42)}
.vid-frame.loading-player .play{opacity:.5}
.chip{position:absolute;left:14px;bottom:14px;padding:.55em .9em;border-radius:999px;background:rgb(255 255 255 / .92);color:var(--ink);font-size:13px;font-weight:500;box-shadow:0 6px 20px -10px rgb(20 20 18 / .5);transition:transform var(--t-ack) var(--ease-out)}
.chip:active{transform:scale(.97)}
.vid figcaption{font-size:var(--fs--1);color:var(--muted);margin-top:.7em}
.vid.last figcaption::after{content:" · finishing this video marks the lesson complete";color:var(--faint)}

.fig{margin:1.6em 0 2em}
.fig img{border:1px solid var(--line);border-radius:var(--radius-s)}
.fig figcaption{font-size:var(--fs--1);color:var(--muted);margin-top:.6em}

.docs{margin:2.2em 0 0;display:grid;gap:10px;max-width:460px}
.doc{display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-s);color:var(--ink);transition:border-color var(--t-ui) var(--ease-out),transform var(--t-ack) var(--ease-out)}
.fine .doc:hover{border-color:var(--ink)}
.doc:active{transform:scale(.99)}
.doc-icon{width:28px;height:34px;color:var(--muted)}
.doc-icon path{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linejoin:round}
.doc-label{font-family:var(--sans);font-size:15px;line-height:1.3}
.doc-kind{display:block;font-size:var(--fs--1);color:var(--muted);margin-top:.2em}
.doc-arrow{color:var(--muted);font-family:var(--sans);font-size:14px}

.locked{max-width:var(--measure)}
.locked .headings{list-style:none;padding:0;margin:1.2em 0 2em;display:grid;gap:4px;color:var(--muted);font-size:15px}
.locked .headings li{padding:.55em 0;border-top:1px solid var(--line)}
.locked .headings li:last-child{border-bottom:1px solid var(--line)}

.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:clamp(36px,6vh,56px);padding-top:24px;border-top:1px solid var(--line)}
.bar .spacer{flex:1}
.bar .outline-btn{display:none}
.bar .nav-btn{padding-inline:1.1em}
.done-state{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-size:15px;color:var(--c);padding:.6em 0}
.done-state .tick{width:20px;height:20px}
.mark-slot{display:inline-flex;align-items:center;gap:12px}
.mark-btn .tick{width:16px;height:16px;margin-left:-2px}
.closing{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,36px);margin-top:clamp(36px,6vh,56px);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,32px);align-items:center;max-width:640px;opacity:0;transform:translateY(12px);transition:opacity 600ms var(--ease-out),transform 800ms var(--ease-out)}
.closing.in{opacity:1;transform:none}
.closing-ring{position:relative;width:96px;height:96px}
.closing-ring.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px var(--c);animation:pulse 900ms var(--ease-out) forwards}
@keyframes pulse{from{transform:scale(1);opacity:.5}to{transform:scale(1.3);opacity:0}}
.closing .h{margin:.2em 0 .3em}
.closing-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:1em}
@media (max-width:560px){.closing{grid-template-columns:1fr}}

.notes{margin-top:clamp(40px,7vh,64px);max-width:var(--measure)}
.notes textarea{display:block;width:100%;margin-top:.8em;padding:.9em 1em;font-size:16px;line-height:1.5;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--paper);resize:vertical;min-height:120px;transition:border-color var(--t-ui) var(--ease-out)}
.notes textarea:focus{outline:none;border-color:var(--ink)}
.notes .note-state{font-size:var(--fs--1);color:var(--faint);margin-top:.6em;transition:color var(--t-ui) var(--ease-out)}
.notes .note-state.saved{color:var(--muted)}

/* the outline: a sidebar on desktop, a sheet on phones */
.side{align-self:start}
.side-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.side-head .ring{width:40px;height:40px}
.side-count{font-size:14px;color:var(--muted)}
.side-title{font-size:14px;color:var(--ink);line-height:1.3;margin-top:.1em}
.outline{list-style:none;padding:0;margin:0;position:relative}
.outline::before{content:"";position:absolute;left:8px;top:12px;bottom:12px;width:1px;background:var(--line)}
.outline .node > a{grid-template-columns:18px 1fr;gap:12px;padding:8px 8px 8px 0}
.outline .dot{width:18px;height:18px}
.outline .dot .tick{width:11px;height:11px}
.outline .node.current .dot::after{width:6px;height:6px}
.outline .node-title{font-size:14.5px}
.outline .node-meta{font-size:12px;margin-top:.1em}
.outline .node.current .node-title{color:var(--ink)}
.sheet-close{display:none}
.scrim{position:fixed;inset:0;background:rgb(20 20 18 / .22);opacity:0;pointer-events:none;transition:opacity var(--t-sheet) var(--ease-sheet);z-index:45}
.scrim.show{opacity:1;pointer-events:auto}
@media (min-width:1024px){.side{position:sticky;top:88px}}
@media (max-width:1023px){
  .side{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:78svh;overflow:auto;background:var(--paper);border-radius:20px 20px 0 0;padding:18px var(--gutter) calc(20px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px -30px rgb(20 20 18 / .35);transform:translateY(102%);transition:transform var(--t-sheet) var(--ease-sheet);visibility:hidden}
  .side.open{transform:none;visibility:visible}
  .side-head{position:relative;padding-right:40px}
  .sheet-close{display:grid;place-items:center;position:absolute;right:-6px;top:2px;width:36px;height:36px;border-radius:50%;color:var(--muted);font-size:20px}
  .sheet-close:active{background:var(--line-2)}
  .lesson-main{padding-bottom:72px}
  .bar{position:fixed;left:0;right:0;bottom:0;z-index:44;margin:0;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);flex-wrap:nowrap}
  .bar .outline-btn{display:inline-flex}
  .bar .nav-btn.prev{display:none}
  .bar .btn{padding:.9em 1em;font-size:14px}
  .bar .mark-slot{min-width:0}
  .bar .mark-slot{flex:1}
  .bar .mark-btn{flex:1;justify-content:center}
  .bar .spacer{display:none}
  .bar .done-state{flex:1;justify-content:center;font-size:14px}
  .closing{margin-bottom:24px}
  body.sheet-open{overflow:hidden}
}

/* ---------- forms (sign-in, welcome, account) ---------- */
.auth,.account,.welcome{padding:clamp(40px,8vh,96px) 0 96px}
.auth .h-3,.account .h-3,.welcome .h-3{margin:.3em 0 .5em}
.form{margin-top:clamp(24px,4vh,36px);display:grid;gap:16px;max-width:440px}
.field{display:grid;gap:6px}
.field > span{font-size:var(--fs--1);color:var(--muted)}
.field input{width:100%;font-size:16px;padding:.8em 1em;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--paper);transition:border-color var(--t-ui) var(--ease-out)}
.field input:focus{outline:none;border-color:var(--ink)}
.err{color:var(--ink-2);font-size:14px;padding:.7em 1em;border-left:2px solid var(--strength);background:var(--wash);border-radius:0 var(--radius-s) var(--radius-s) 0}
.err[hidden]{display:none}
.form-actions{display:flex;flex-wrap:wrap;gap:10px}
.auth > .form-actions,.welcome .form-actions,.account > .form-actions,.ok-state .form-actions{margin-top:1.4em}
.or{font-size:var(--fs--1);margin:4px 0}
.ok-state{max-width:var(--measure)}
.ok-state .h{margin:.2em 0 .5em}
.entitle{list-style:none;padding:0;margin:1em 0 0;display:grid;gap:8px;max-width:460px}
.entitle li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.entitle li:last-child{border-bottom:1px solid var(--line)}
.entitle .dot{width:20px;height:20px}
.entitle .dot .tick{width:12px;height:12px}
.entitle li.done .dot{background:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.entitle .sub{font-size:var(--fs--1);color:var(--muted);margin-left:auto}
.block{margin-top:clamp(32px,5vh,48px);max-width:var(--measure)}
.block .eyebrow{margin-bottom:.6em}
.block p{color:var(--ink-2)}
.block .form-actions{margin-top:1em}
.filein{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.welcome .cont{margin-top:clamp(24px,4vh,40px)}

/* ---------- completion page (printable) ---------- */
.cert{padding:clamp(40px,8vh,96px) 0 120px;max-width:720px}
.cert-ring{width:120px;height:120px;margin-bottom:28px}
.cert .h-3{margin:.3em 0 .35em}
.cert-date{font-size:var(--fs-1);color:var(--ink-2);margin-bottom:.4em}
.cert-who{font-size:14px;color:var(--muted)}
.cert-lessons{list-style:none;padding:0;margin:clamp(28px,5vh,48px) 0;font-size:14.5px}
.cert-lessons li{display:flex;justify-content:space-between;gap:16px;padding:.7em 0;border-top:1px solid var(--line)}
.cert-lessons li:last-child{border-bottom:1px solid var(--line)}
.cert-line{font-size:var(--fs-1);line-height:1.4;font-style:italic;font-weight:300;max-width:28ch;margin:0 0 1.6em;font-variation-settings:"opsz" 48,"SOFT" 30,"WONK" 0}
.cert-mark{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.cert-mark .ring{color:var(--ink)}
.cert-actions{margin-top:clamp(28px,5vh,48px);display:flex;flex-wrap:wrap;gap:10px}
@media print{
  .nav,.lamp,.noprint{display:none!important}
  body{color:#000;background:#fff}
  main#app{min-height:0}
  .cert{padding:0;max-width:none}
  .cert-lessons li{border-color:#ddd}
  .wrap{width:100%}
  a{color:inherit}
}

/* ---------- reduced motion: everything already final ---------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .mark .ring,.ring.breathe,.play,.course-ring{transform:none}
  .ring.breathe{--p:.6}
  .node.current .dot{box-shadow:inset 0 0 0 1.5px var(--c),0 0 0 5px color-mix(in srgb,var(--c) 14%,transparent)}
  .cont .btn-ink{box-shadow:0 0 0 5px rgb(var(--light) / .1),0 10px 30px -14px rgb(20 20 18 / .5)}
  .closing{opacity:1;transform:none}
  .side,.scrim,main#app,.day.gone{transition:none}
  .display.settling{transition:none}
  .tick path{stroke-dashoffset:1}
  .tick.drawn path,.done .tick path,.is-done .tick path{stroke-dashoffset:0}
}

/* review fixes: keyboard focus on the import control; locked download links in previews */
label:has(+ .filein:focus-visible),.filein:focus-visible + label{outline:2px solid var(--ink);outline-offset:3px}
[data-locked="download"]{color:var(--muted);border-bottom:1px dotted var(--line)}
[data-locked="download"]::after{content:" (with access)";font-size:.85em;color:var(--faint)}