:root{
  --ground:#FFFFFF;
  --rail:#FAF9F8;
  --surface:#FCFBFA;
  --ink:#241F1B;
  --muted:#6B6560;
  --faint:#9C968F;
  --rule:#E7E4DF;
  --rule-soft:#F0EEEA;
  --pill:#241F1B;
  --accent:#C4256B;
  --accent-2:#C4256B;
  --accent-soft:#FBEFF4;
  --taupe:#F2EFEA;
  --f-display:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --f-body:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --script-style:italic;
  --script-weight:500;
  --script-size:clamp(24px,3.6vw,34px);
  /* completion seal */
  --seal:var(--accent);
  --seal-ink:#fff;
  --seal-ring:color-mix(in srgb, var(--accent) 16%, transparent);
}
/* Tiny Ads uses the pink from the wordmark dot for anything marked complete */
.app.tinyads{
  --seal:#FCC9EC;
  --seal-ink:#01341E;
  --seal-ring:color-mix(in srgb, #FCC9EC 55%, transparent);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
p{margin:0}
button{font:inherit;color:inherit}

.app{display:grid;grid-template-columns:1fr;min-height:100%}
@media(min-width:900px){.app{grid-template-columns:322px 1fr}}

/* ---------- RAIL ---------- */
.rail{background:var(--rail);border-right:1px solid var(--rule);padding:26px 0 0;display:flex;flex-direction:column;gap:20px}
@media(min-width:900px){.rail{height:100vh;position:sticky;top:0;overflow-y:auto}}
.rail-pad{padding:0 22px}

.wordmark{font-family:var(--f-display);font-weight:700;color:var(--ink);line-height:.92;letter-spacing:-.01em;
  background:none;border:none;padding:0;text-align:left;cursor:pointer;display:block}
.wordmark:hover .b{color:var(--accent)}
.wordmark img{display:block;width:100%;max-width:174px;height:auto}
.wordmark.has-logo:hover{opacity:.75}
.item .vtag{font-size:9px;color:var(--accent);vertical-align:1px;margin-left:3px}
.item[aria-current="true"] .vtag{color:var(--accent-2)}
.item .rt{margin-left:auto;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;padding-left:10px;flex:0 0 auto}
.item[aria-current="true"] .rt{color:#B9B0A6}
.item .lt{flex:1;min-width:0}
.wordmark .a{display:block;font-size:19px;letter-spacing:.02em}
.wordmark .b{display:block;font-size:34px;letter-spacing:-.005em}
.lib-eyebrow img{height:26px;width:auto;display:block;margin-bottom:14px}
.topbar .brand.has-logo{display:flex;align-items:center}
.topbar .brand.has-logo img{height:15px;width:auto;display:block}
.wordmark.fw img{max-width:190px;height:auto}
.byline{font-family:var(--f-body);font-size:10.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin-top:9px}

.prog-label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted)}
.prog-label .n{font-variant-numeric:tabular-nums}
.prog-track{position:relative;height:22px;background:var(--ground);border:1px solid var(--rule);
  border-radius:999px;overflow:hidden;margin-top:9px}
.prog-fill{height:100%;min-width:0;background:var(--accent-2);width:0;border-radius:999px;
  transition:width .4s cubic-bezier(.3,.8,.3,1)}
.prog-pct{position:absolute;top:0;bottom:0;display:flex;align-items:center;left:12px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:var(--faint);transition:left .4s cubic-bezier(.3,.8,.3,1),color .2s ease}
.prog-track.inside .prog-pct{color:var(--accent)}


nav{display:flex;flex-direction:column;gap:2px}
.sec{font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--faint);padding:20px 22px 8px}
.item{display:flex;gap:11px;align-items:baseline;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:8px 22px;font-size:14.5px;line-height:1.35;color:var(--ink);border-radius:0}
.item:hover{background:#F1EFEC}
.item .mk{flex:0 0 19px;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;text-align:center;padding-top:2px}
.item .mk.dot{font-size:15px;line-height:1}
.item.res .mk{color:var(--accent)}
.item[aria-current="true"]{background:var(--pill);color:#fff;border-radius:7px;margin:0 12px;width:calc(100% - 24px);padding-left:10px;padding-right:14px}
.item[aria-current="true"] .mk{color:#C9BEB2}

/* done badge in the lesson list — a filled seal, not a bare tick */
.item .mk.seal{align-self:flex-start;margin-top:1px;padding:0;width:19px;height:19px;border-radius:50%;
  background:var(--seal);color:var(--seal-ink);display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2.5px var(--seal-ring)}
.item[aria-current="true"] .mk.seal{color:var(--seal-ink);box-shadow:0 0 0 2.5px var(--seal-ring)}
.mk .tk{width:12px;height:12px;display:block;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- SECTION SPINE (rail) ---------- */
.steplist{display:flex;flex-direction:column;gap:1px;padding-bottom:10px}

.step{position:relative}
.step::before{content:"";position:absolute;left:35px;top:32px;bottom:0;width:1.5px;
  background:var(--rule);transform:translateX(-.75px)}
.step.plain::before,.step.last::before{display:none}

.stephead{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:none;border:none;
  cursor:pointer;padding:12px 18px 12px 22px;font-family:var(--f-body);color:var(--ink);border-radius:0}
.stephead:hover{background:#F1EFEC}
.stephead:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.stepnum{position:relative;z-index:1;flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--rule);background:var(--rail);color:var(--faint);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.stepnum.ghost{border:none;background:none}
.stepnum.ghost::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--rule-strong,#CFC9C2)}

.steptitle{flex:1;min-width:0;font-family:var(--f-display);font-size:14.5px;font-weight:600;
  line-height:1.3;letter-spacing:-.005em;color:var(--ink)}
.step.plain .steptitle{font-weight:600;color:var(--muted)}
.step.plain.on .steptitle{color:var(--ink)}
.stepcount{flex:0 0 auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--faint)}

.stepcar{flex:0 0 9px;width:9px;height:9px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
  transform:rotate(-45deg) translate(-1px,-1px);transition:transform .2s ease;margin-left:2px}
.step.on .stepcar{transform:rotate(45deg) translate(-2px,-2px)}

.step:not(.plain).on .stepnum{background:var(--ink);border-color:var(--ink);color:#fff}
.step.plain .stepnum{background:none;border:none}
.step.plain.on .stepnum::after{background:var(--ink)}
.step.done:not(.plain) .stepnum{background:var(--accent);border-color:var(--accent);color:#fff}
.step.done:not(.plain) .steptitle{opacity:.6}

/* lessons sit to the right of the spine - one level, no deeper */
.step .item{padding-left:48px}
.step .item[aria-current="true"]{padding-left:36px}

/* ---------- MAIN ---------- */
main{min-width:0}
.topbar{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;padding:16px clamp(22px,5vw,60px);border-bottom:1px solid var(--rule-soft)}
.topbar .brand{font-size:10.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
.topbar .links{display:flex;gap:20px;font-size:13.5px;color:var(--muted)}
.topbar .links span{cursor:default}


article{--bleed:0px;max-width:720px;margin:0 auto;padding:clamp(34px,5vw,58px) clamp(22px,5vw,40px) 90px}
/* wide screens: the column grows a little, the visuals grow a lot, so a big
   window fills up instead of turning into two empty margins */
@media(min-width:1180px){article{max-width:780px;--bleed:40px}}
@media(min-width:1440px){article{max-width:820px;--bleed:100px}}
@media(min-width:1700px){article{max-width:850px;--bleed:190px}}
@media(min-width:2000px){article{max-width:870px;--bleed:250px}}
@media(min-width:2400px){article{max-width:900px;--bleed:320px}}
article > .dia,
article > .shot,
article > .twoup,
article > .calc,
article > .walk,
article > .grid9,
article > .exgrid,
article > .prompt,
article > figure.wshot,
article > figure.vid{margin-left:calc(var(--bleed) * -1);margin-right:calc(var(--bleed) * -1)}

.chip{display:block;font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;color:var(--faint);margin-bottom:20px}

/* section badge - replaces the old script overline */
.script{display:inline-block;position:relative;font-family:var(--f-display);font-style:normal;font-weight:800;
  font-size:12px;line-height:1;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  margin:0 0 18px;padding:0 2px 7px;z-index:0}
.script::after{content:"";position:absolute;left:-2px;right:-4px;bottom:2px;height:9px;
  background:var(--accent-2);border-radius:2px 8px 3px 7px/6px 3px 8px 4px;opacity:.55;z-index:-1}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(32px,5.6vw,50px);line-height:1.04;letter-spacing:-.018em;margin:0 0 26px;text-wrap:balance}
h1.caps{text-transform:uppercase;letter-spacing:.005em;font-size:clamp(30px,5.2vw,46px)}
.tinyads h1{font-weight:800;letter-spacing:-.03em}
.tinyads h1.caps{letter-spacing:-.02em}
h2{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,3vw,27px);line-height:1.2;margin:44px 0 14px;letter-spacing:-.012em}
.intro{font-size:17.5px;line-height:1.62;margin-bottom:18px}
.intro strong{font-weight:600}
article > p{margin-bottom:16px}

/* numbered circle links */
.steps{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.steps li{display:flex;gap:22px;align-items:center;padding:9px 0}
.steps .num{flex:0 0 40px;height:40px;border:1px solid var(--rule);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted);background:var(--surface)}
.steps a{flex:1;text-align:center;font-family:var(--f-display);font-weight:600;font-size:clamp(14px,2vw,17px);text-transform:uppercase;letter-spacing:.028em;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.steps a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.steps li:hover .num{border-color:var(--accent);color:var(--accent)}

/* numbered instruction list */
ol.rec{list-style:none;counter-reset:r;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
ol.rec li{counter-increment:r;position:relative;padding-left:34px;font-size:16.5px;line-height:1.5}
ol.rec li::before{content:counter(r) ".";position:absolute;left:0;top:0;font-family:var(--f-display);font-size:19px;color:var(--muted)}
ol.rec li strong{font-weight:600}

/* tip */
.tip{margin:34px 0;padding:0 0 0 22px;border-left:5px solid var(--accent-2)}
.tip .lbl{display:block;font-family:var(--f-body);font-size:10.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.tip p{font-family:var(--f-body);font-style:normal;font-weight:400;font-size:16px;line-height:1.62;color:var(--ink)}


/* ---------- SUPERCREATOR RAIL (matches the live app) ---------- */
.app.scnav .rail{background:#FFFFFF;gap:18px}
.app.scnav .rail-pad{padding:0 18px}
.app.scnav .prog-label{font-size:13px;color:var(--ink);font-weight:600}
.app.scnav .prog-label .n{font-weight:500;color:var(--muted)}
.app.scnav .prog-track{height:7px;background:#EFF1EA;border:none;border-radius:5px;margin-top:8px}
.app.scnav .prog-pct{display:none}
.app.scnav #nav{margin-top:4px;border-top:1px solid var(--rule)}
#nav.sc .item .mk{flex:0 0 21px;width:21px;height:21px;font-size:10.5px;border-width:1.8px}
#nav.sc .item,#nav.sc .item[aria-current="true"]{padding:7px 18px 7px 45px}
#nav.sc .item .lt{font-size:13.5px}
#nav.sc .stephead{padding:15px 18px}
#nav.sc .steptitle{font-size:15px}
#nav.sc .over{font-size:9.5px;letter-spacing:.14em}
#nav.sc .stepcount{font-size:12.5px}
.railfoot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.railfoot .who{min-width:0}
.railfoot .out{flex:0 0 auto;background:none;border:none;cursor:pointer;padding:6px;color:var(--muted);line-height:0}
.railfoot .out svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.railfoot .out:hover{color:var(--ink)}
/* video lessons link out - published artifacts block cross-origin iframes */
.vlink{display:flex;align-items:center;gap:16px;margin:26px 0 10px;padding:18px 20px;
  border:1px solid var(--rule);border-radius:10px;background:var(--surface);text-decoration:none;
  transition:border-color .16s ease,transform .16s ease}
.vlink:hover{border-color:var(--accent);transform:translateY(-1px)}
.vlink .pl{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--accent);position:relative}
.vlink .pl::after{content:"";position:absolute;left:17px;top:13px;border-left:13px solid #fff;
  border-top:8px solid transparent;border-bottom:8px solid transparent}
.vlink .vt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vlink .vt b{font-family:var(--f-display);font-size:16px;font-weight:700;color:var(--ink)}
.vlink .vt em{font-style:normal;font-size:13.5px;color:var(--muted)}
.vlink .ar{flex:0 0 auto;font-size:17px;color:var(--muted)}

.wordmark.sc img{max-width:134px;height:auto}
.beta{display:inline-block;margin-top:6px;font-family:var(--f-body);font-size:9px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

#nav.sc{gap:0}
#nav.sc .step{border-bottom:1px solid var(--rule)}
#nav.sc .step::before{display:none}
#nav.sc .stephead{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:start;padding:17px 20px}
#nav.sc .stepnum,#nav.sc .stepcar{display:none}
#nav.sc .chev{position:relative;width:18px;height:18px;margin-top:4px;color:var(--muted)}
#nav.sc .chev::before{content:"";position:absolute;left:4px;top:4px;width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .2s ease}
#nav.sc .step.on .chev::before{transform:rotate(45deg);left:3px;top:3px}
#nav.sc .steplbl{display:flex;flex-direction:column;gap:5px;min-width:0}
#nav.sc .over{font-family:var(--f-body);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
#nav.sc .steptitle{font-family:var(--f-display);font-size:16px;font-weight:700;letter-spacing:-.012em;
  color:var(--ink);line-height:1.25}
#nav.sc .stepcount{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:3px}
#nav.sc .steplist{padding:0 0 14px}
#nav.sc .item{padding:8px 20px 8px 50px;gap:13px;align-items:center;width:100%;margin:0;border-radius:0;background:none}
#nav.sc .item:hover{background:#F1EFEC}
#nav.sc .item .mk{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:2px solid var(--rule);
  display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;
  color:transparent;background:none;padding:0;margin-top:0;box-shadow:none;align-self:center}
#nav.sc .item.done .mk{background:var(--seal);border-color:var(--seal);color:var(--seal-ink);
  box-shadow:0 0 0 3px var(--seal-ring)}
#nav.sc .item .mk .tk{width:13px;height:13px}
#nav.sc .item.vid .mk{color:var(--muted);font-size:8px;padding-left:1px}
#nav.sc .item .lt{font-size:14.5px;color:var(--muted);line-height:1.35}
#nav.sc .item .rt,#nav.sc .item .vtag{display:none}
#nav.sc .item[aria-current="true"]{background:none;color:inherit;padding-left:50px}
#nav.sc .item[aria-current="true"] .lt{color:var(--ink);font-weight:600}
#nav.sc .item[aria-current="true"] .mk{border-color:var(--accent);color:var(--accent)}
#nav.sc .item.done[aria-current="true"] .mk{background:var(--seal);border-color:var(--seal);color:var(--seal-ink)}

.railnav{border-top:1px solid var(--rule);padding:12px 0;margin-top:auto}
.railnav button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;cursor:pointer;
  padding:7px 18px;font-family:var(--f-body);font-size:13.5px;color:var(--ink);text-align:left}
.railnav button:hover{background:#F1EFEC}
.railnav button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.railnav svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.railfoot{border-top:1px solid var(--rule);padding:13px 18px}
.railfoot b{display:block;font-family:var(--f-display);font-size:13.5px;font-weight:700;color:var(--ink)}
.railfoot span{font-size:12px;color:var(--muted)}

/* ---------- COURSE LIBRARY (Skool-style grid) ---------- */
.clib-head{margin-bottom:34px}
.clib-head .back{display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
  font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:0;margin-bottom:20px}
.clib-head .back:hover{color:var(--accent)}
.clib-head h1{margin-bottom:14px}
.clib-head .sub{font-size:17px;line-height:1.6;color:var(--muted);max-width:56ch;margin:0}
.clib-stat{margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

.clib{display:grid;gap:26px 22px;grid-template-columns:1fr;margin-top:38px}
@media(min-width:660px){.clib{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.clib{grid-template-columns:repeat(3,1fr)}}

.ccard{display:flex;flex-direction:column;text-align:left;background:var(--surface);border:1px solid var(--rule);
  border-radius:12px;overflow:hidden;cursor:pointer;padding:0;font-family:var(--f-body);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease}
.ccard:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 22px rgba(36,31,27,.09)}
.ccard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ccard .cov{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--taupe)}
.ccard .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.ccard h3{font-family:var(--f-display);font-size:18px;font-weight:700;letter-spacing:-.015em;margin:0;color:var(--ink)}
.ccard p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted);flex:1}
.ccard .meta{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.ccard .ptrack{height:6px;background:var(--ground);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.ccard .pfill{height:100%;background:var(--accent);width:0}
.ccard .pct{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* vault video embed */
.vembed{position:relative;width:100%;aspect-ratio:16/9;margin:26px 0 8px;border-radius:8px;overflow:hidden;
  background:#14110F;border:1px solid var(--rule)}
.vembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vnote{margin:26px 0 8px;padding:20px 22px;border:1px dashed var(--rule);border-radius:8px;background:var(--surface)}
.vnote p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.vnote b{color:var(--ink);font-weight:600}

/* footer of lesson */
.lesson-foot{clear:both;margin-top:48px;padding-top:24px;border-top:1px solid var(--rule)}

.complete-row{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.mark{background:var(--accent);border:1.5px solid var(--accent);border-radius:8px;color:#fff;
  padding:12px 22px;font-family:var(--f-body);font-size:15px;font-weight:700;cursor:pointer;
  transition:opacity .15s ease,transform .15s ease}
.mark:hover{opacity:.88;transform:translateY(-1px)}
.mark:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
.complete-row .note{font-size:14px;line-height:1.45;color:var(--muted);max-width:30ch}

/* ---------- completion mark ---------- */
.emblem{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.emblem .seal{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--seal);
  display:grid;place-items:center;box-shadow:0 0 0 3px var(--seal-ring)}
.emblem .seal svg{width:16px;height:16px;display:block;overflow:visible}
.emblem .seal path{fill:none;stroke:var(--seal-ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:34;stroke-dashoffset:0}
.emblem .etxt{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
.emblem .etxt b{font-family:var(--f-display);font-size:15px;font-weight:700;line-height:1.2;
  letter-spacing:-.005em;color:var(--accent)}
.emblem .etxt span{font-size:13px;line-height:1.35;color:var(--muted)}
.emblem .undo{margin-left:auto;flex:0 0 auto;background:none;border:none;cursor:pointer;padding:4px 0;
  font-family:var(--f-body);font-size:12.5px;font-weight:500;color:var(--faint);
  text-decoration:underline;text-underline-offset:3px}
.emblem .undo:hover{color:var(--ink)}
.emblem.pop .seal{animation:sealpop .44s cubic-bezier(.2,1.5,.35,1)}
.emblem.pop .seal path{stroke-dashoffset:34;animation:sealtick .34s .14s ease forwards}
@keyframes sealpop{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.16);opacity:1}100%{transform:scale(1)}}
@keyframes sealtick{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .emblem.pop .seal,.emblem.pop .seal path{animation:none}
  .emblem.pop .seal path{stroke-dashoffset:0}
}
@media(max-width:620px){
  .emblem .undo{margin-left:39px}
}

/* ---------- next / previous lesson ---------- */
.lessnav{display:flex;align-items:center;gap:24px;margin-top:28px;padding-top:22px;border-top:1px solid var(--rule)}
.lnav{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:14px;cursor:pointer;
  background:none;border:none;padding:0;font-family:var(--f-body);color:var(--ink);text-align:left}
.lnav .ar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid color-mix(in srgb, var(--accent) 32%, transparent);color:var(--accent);
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.lnav .ar svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lnav .txt{min-width:0}
.lnav .dir{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lnav .tl{display:block;margin-top:3px;font-family:var(--f-display);font-size:15.5px;font-weight:600;line-height:1.28;
  transition:color .18s ease}
.lnav:hover .ar{background:color-mix(in srgb, var(--seal) 50%, transparent);border-color:var(--seal)}
.lnav:hover .tl{color:var(--accent)}
.lnav.prev:hover .ar{transform:translateX(-3px)}
.lnav.next:hover .ar{transform:translateX(3px)}
.lnav:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.lnav.next{flex-direction:row-reverse;justify-content:flex-start;text-align:right}
/* once the lesson is ticked, the forward arrow becomes the obvious thing to press */
.lnav.next.hot .ar{background:var(--seal);border-color:var(--seal);color:var(--seal-ink);
  box-shadow:0 0 0 4px var(--seal-ring)}
.lnav.next.hot .tl{color:var(--accent)}
.lnav-sp{flex:1 1 0}
.lnav-end{flex:1 1 0;text-align:right;font-size:14px;line-height:1.45;color:var(--muted)}
@media(max-width:620px){
  .lessnav{flex-direction:column-reverse;align-items:stretch;gap:18px}
  .lnav.next{flex-direction:row;justify-content:flex-start;text-align:left}
  .lnav-end{text-align:left}
}

.empty{color:var(--muted);font-size:15px;padding:14px 22px}

/* ---------- LIBRARY ---------- */
.app.library{grid-template-columns:1fr}
.app.library .rail{display:none}
.app.library article{max-width:940px}
.linkbtn{background:none;border:none;padding:0;cursor:pointer;font-size:13.5px;color:var(--muted)}
.linkbtn:hover{color:var(--accent)}
.linkbtn[aria-current="true"]{color:var(--ink);font-weight:600}

.lib-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.lib-sub{font-size:17px;color:var(--muted);max-width:46ch;margin:0 0 40px}

.prods{display:grid;gap:20px}
@media(min-width:700px){.prods{grid-template-columns:1fr 1fr}}
@media(min-width:1050px){.prods{grid-template-columns:repeat(3,1fr)}}
.prod{border-radius:12px;padding:0 0 22px;display:flex;flex-direction:column;gap:12px;min-height:290px;overflow:hidden}
.prod > :not(.prod-cover){margin-left:22px;margin-right:22px}
.prod-cover{margin:0;line-height:0;border-bottom:1px solid var(--rule-soft);background:#FAF9F8}
.prod-cover img{display:block;width:100%;aspect-ratio:880/151;object-fit:cover;object-position:left center}
.prod.locked .prod-cover{opacity:.72}
.prod .mark-row{margin-top:20px}
.prod.owned{background:var(--surface);border:1px solid var(--rule)}
.prod.locked{background:transparent;border:1px dashed var(--rule)}
.prod .mark-row{display:flex;align-items:center;gap:9px}
.prod .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.prod .state{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.prod.owned .state{color:var(--ink)}
.prod h3{font-family:var(--f-display);font-weight:700;font-size:25px;line-height:1.1;letter-spacing:-.015em;margin:0}
.prod .desc{font-size:15.5px;line-height:1.5;color:var(--muted);flex:1}
.prod .foot{border-top:1px solid var(--rule);padding-top:16px;display:flex;flex-direction:column;gap:11px}
.prod .pline{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted)}
.prod .ptrack{height:3px;background:var(--rule);border-radius:2px;overflow:hidden}
.prod .pfill{height:100%;border-radius:2px}
.prod .act{align-self:flex-start;background:none;border:1px solid var(--ink);border-radius:7px;padding:10px 18px;font-size:14.5px;font-weight:600;cursor:pointer}
.prod .act:hover{background:var(--ink);color:var(--ground)}
.prod.locked .act{border-color:var(--rule);color:var(--muted)}
.prod.locked .act:hover{border-color:var(--ink);background:var(--ink);color:var(--ground)}
.prod .price{font-family:var(--f-display);font-size:20px;font-weight:600}
.prod .price small{font-family:var(--f-body);font-size:13px;font-weight:400;color:var(--muted)}

.demo{margin-top:44px;padding-top:20px;border-top:1px solid var(--rule-soft);font-size:13px;color:var(--faint);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.demo button{background:none;border:1px solid var(--rule);border-radius:5px;padding:5px 11px;font-size:12.5px;color:var(--muted);cursor:pointer}
.demo button:hover{border-color:var(--ink);color:var(--ink)}


/* watch button — squared, lime rule, not a rounded pill */
.watch{display:flex;align-items:center;gap:16px;width:100%;background:var(--ink);color:#fff;border:none;
  border-radius:4px;padding:20px 24px;margin:30px 0 0;cursor:pointer;text-align:left;
  border-left:6px solid var(--accent-2)}
.watch:hover{background:#101010}
.watch .tri{flex:0 0 auto;width:0;height:0;border-left:14px solid var(--accent-2);
  border-top:9px solid transparent;border-bottom:9px solid transparent}
.watch .lab{font-family:var(--f-body);font-size:13.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.watch .len{margin-left:auto;font-size:12px;opacity:.65;font-variant-numeric:tabular-nums}
.watch-note{font-size:12.5px;color:var(--faint);margin:9px 0 30px}

/* do / don't — stacked blocks with brand markers */
.dodont{display:grid;gap:22px 38px;margin:46px 0 0}
@media(min-width:660px){.dodont{grid-template-columns:1fr 1fr}}
.dodont > ul{list-style:none;margin:0;padding:18px 0 0;display:flex;flex-direction:column;gap:13px;
  border-top:2px solid var(--ink);position:relative}
.dodont > ul::before{position:absolute;top:-2px;left:0;transform:translateY(-100%);padding-bottom:7px;
  font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.dodont .do::before{content:"Do this";color:var(--accent)}
.dodont .dont::before{content:"Not this";color:var(--faint)}
.dodont .dont{border-top-color:var(--rule-strong)}
.dodont li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.5}
.dodont li::before{position:absolute;left:0;display:block;content:""}
.dodont .do li::before{width:10px;height:10px;border-radius:2px;background:var(--accent-2);top:7px}
.dodont .dont li{color:var(--muted)}
.dodont .dont li::before{width:10px;height:2px;background:var(--faint);top:11px}

/* figures: diagrams + screenshots */
figure{margin:0}
.dia{--dia-card:#FFFFFF;
  --dia-key:color-mix(in srgb, var(--accent) 9%, #fff);
  --dia-warm:color-mix(in srgb, var(--accent-2) 26%, #fff);
  --dia-edge:color-mix(in srgb, var(--accent) 20%, transparent);
  margin:34px 0;padding:28px 26px 24px;border-radius:18px;
  border:1px solid color-mix(in srgb, var(--accent) 13%, var(--rule));
  background:
    radial-gradient(130% 110% at 2% -10%, color-mix(in srgb, var(--seal) 30%, transparent) 0%, transparent 58%),
    linear-gradient(175deg, color-mix(in srgb, var(--accent) 2%, var(--ground)) 0%,
                            color-mix(in srgb, var(--accent) 6%, var(--ground)) 100%);
  box-shadow:0 1px 2px rgba(1,52,30,.035), 0 14px 32px -20px rgba(1,52,30,.30);
  color:color-mix(in srgb, var(--accent) 88%, var(--ink))}
.app.tinyads .dia{--dia-key:#FDE8F5;--dia-warm:#EFF7DC}
.dia svg{display:block;width:100%;height:auto;overflow:visible}

/* one soft edge and one soft shadow for every box, so the mix of hand-set
   opacities stops reading as accidental */
.dia svg rect[fill="none"][stroke="currentColor"],
.dia svg g[fill="none"] > rect:not([fill]){
  fill:var(--dia-card);stroke:var(--dia-edge);stroke-opacity:1;
  filter:drop-shadow(0 1px 1.5px rgba(1,52,30,.09))}
/* the box that carries the point: tinted, confident edge, lifted */
.dia svg rect[fill="none"][stroke="var(--accent)"]{
  fill:var(--dia-key);stroke:var(--accent);stroke-opacity:1;
  filter:drop-shadow(0 3px 10px rgba(1,52,30,.16))}
.dia svg circle[fill="none"][stroke="var(--accent)"]{stroke-opacity:1}
/* a container is a room, not a card: faint tint, no lift, so the cards inside pop */
.dia svg rect.grp{fill:transparent !important;stroke:var(--dia-edge);stroke-opacity:1;filter:none !important}
.dia svg .card{fill:var(--dia-card)}
.dia svg .key{fill:var(--dia-key)}
.dia svg .warm{fill:var(--dia-warm)}
/* rounded joins turn every connector and arrowhead from sharp to drawn */
.dia svg line,.dia svg path,.dia svg polyline{stroke-linecap:round;stroke-linejoin:round}
/* labels in the display face, body copy in the body face */
.dia svg text{font-family:var(--f-body)}
.dia svg text[font-weight="700"],.dia svg text[font-weight="800"]{
  font-family:var(--f-display);letter-spacing:-.005em}
.dia figcaption{margin-top:20px;padding-top:15px;
  border-top:1px solid color-mix(in srgb, var(--accent) 11%, transparent);
  font-size:13.5px;line-height:1.55;color:var(--muted)}
@media(max-width:560px){.dia{padding:20px 16px 18px;border-radius:14px;margin:26px 0}}
.shot{margin:30px 0}
.shot .sc{overflow-x:auto;border:1px solid var(--rule);border-radius:8px;-webkit-overflow-scrolling:touch}
.shot img{display:block;width:100%;min-width:620px}
.shot .swipe{font-size:12px;color:var(--faint);font-style:italic;margin:7px 0 0}
@media(min-width:760px){.shot .swipe{display:none}}
.shot figcaption{margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--muted)}
article h2{margin-top:40px}
article h2:first-of-type{margin-top:36px}
article h3{font-family:var(--f-display);font-weight:700;font-size:17px;line-height:1.3;letter-spacing:-.008em;
  margin:32px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule-soft);color:var(--ink)}
.warn{color:var(--accent);font-weight:600}
.fields{margin:22px 0 0;border-top:1px solid var(--ink)}
.fields > div{display:grid;gap:2px 18px;padding:13px 0;border-bottom:1px solid var(--rule-soft)}
@media(min-width:620px){.fields > div{grid-template-columns:0.85fr 1.15fr;align-items:baseline}}
.fields dt,.fields .f{font-family:var(--f-display);font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35}
.fields .v{font-size:15px;line-height:1.5;color:var(--muted)}
.fields .v b{color:var(--ink);font-weight:600}
.callout{margin:30px 0;padding:18px 20px;background:var(--accent-soft);border-radius:9px}
.callout p{font-size:15.5px;line-height:1.6;color:var(--ink)}
.callout b{font-weight:700}

/* ---------- tighter rail: more lessons on screen ---------- */
.rail{padding:18px 0 0;gap:13px}
.app.scnav .rail{gap:11px}
.wordmark.sc img{max-width:116px}
.wordmark .a{font-size:17px}
.wordmark .b{font-size:30px}
.byline{font-size:9.5px;margin-top:6px}
.beta{margin-top:4px}

.app.scnav .prog-label{font-size:12px}
.app.scnav .prog-track{height:5px;margin-top:6px}

.sec{padding:14px 22px 6px;font-size:10px}
.item{padding:6px 22px;font-size:14px;line-height:1.3}

#nav.sc .stephead{grid-template-columns:15px 1fr auto;gap:9px;padding:10px 18px}
#nav.sc .chev{width:15px;height:15px;margin-top:2px}
#nav.sc .chev::before{width:7px;height:7px;left:3px;top:3px}
#nav.sc .step.on .chev::before{left:3px;top:2px}
#nav.sc .steplbl{gap:2px}
#nav.sc .over{font-size:9px;letter-spacing:.12em}
#nav.sc .steptitle{font-size:14px;line-height:1.22}
#nav.sc .stepcount{font-size:11.5px;padding-top:2px}
#nav.sc .steplist{padding:0 0 7px}
#nav.sc .item,#nav.sc .item[aria-current="true"]{padding:4px 16px 4px 42px;gap:10px}
#nav.sc .item .mk{flex:0 0 17px;width:17px;height:17px;border-width:1.6px;font-size:9.5px}
#nav.sc .item.vid .mk{font-size:7px}
#nav.sc .item .lt{font-size:13px;line-height:1.3}

.railnav{padding:7px 0}
.railnav button{padding:5px 18px;font-size:13px;gap:10px}
.railnav svg{width:15px;height:15px;flex:0 0 15px}
.railfoot{padding:10px 18px}
.railfoot b{font-size:13px}
.railfoot span{font-size:11.5px}

/* ---------- hover definitions ---------- */
:root{--pop:#1C1815;--pop-key:#F7A9CB}
dfn.gl{font-style:normal;border-bottom:1.5px dotted var(--accent);cursor:help;color:inherit;
  text-decoration:none;-webkit-tap-highlight-color:transparent}
dfn.gl:hover,dfn.gl.on{background:var(--accent-soft);border-bottom-style:solid}
dfn.gl:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
#glpop{position:absolute;z-index:999;width:min(320px,calc(100vw - 32px));background:var(--pop);color:#fff;
  border-radius:10px;padding:13px 15px;font-family:var(--f-body);font-size:14px;line-height:1.5;
  box-shadow:0 12px 34px rgba(20,16,14,.28);opacity:0;transform:translateY(5px);
  transition:opacity .13s ease,transform .13s ease;pointer-events:none;left:0;top:0}
#glpop[hidden]{display:none!important}
#glpop.on{opacity:1;transform:none}
#glpop b.t{display:block;font-family:var(--f-display);font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pop-key);margin-bottom:6px}
#glpop .lk{display:block;margin-top:7px;color:#D9D2CB;font-style:italic}
#glpop .hint{display:block;margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.16);
  font-size:11.5px;color:#A79E96}

/* ---------- AI coach ---------- */

/* ---------- do this next / the waiting room ---------- */
#nextWrap[hidden]{display:none}
.nextcard{display:block;width:100%;text-align:left;cursor:pointer;padding:14px 15px;border:none;border-radius:12px;
  background:var(--accent);color:#fff;font-family:var(--f-body);
  transition:transform .14s ease,box-shadow .14s ease}
.nextcard:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.14)}
.nextcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nextcard .eyebrow{display:flex;align-items:center;gap:7px;font-size:9.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:#FCC9EC}
.nextcard .t{display:block;margin-top:6px;font-family:var(--f-display);font-size:14.5px;font-weight:700;line-height:1.25}
.nextcard .sub{display:block;margin-top:5px;font-size:12px;line-height:1.4;color:rgba(255,255,255,.75)}
/* waiting: the card goes quiet on purpose, because so should they */
.nextcard.wait{background:var(--surface);color:var(--ink);cursor:default;
  border:1.5px dashed color-mix(in srgb, var(--accent) 34%, transparent)}
.nextcard.wait:hover{transform:none;box-shadow:none}
.nextcard.wait .eyebrow{color:var(--accent)}
.nextcard.wait .sub{color:var(--muted)}
.nextcard.wait .clock{display:block;margin-top:8px;font-family:var(--f-display);font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--accent)}
.nextcard .dot{width:6px;height:6px;border-radius:50%;background:#FCC9EC;flex:0 0 auto}
.nextcard.wait .dot{background:var(--accent);animation:waitblink 2.4s ease-in-out infinite}
@keyframes waitblink{0%,100%{opacity:1}50%{opacity:.25}}
.nextcard.doneall{background:var(--surface);color:var(--ink);border:1px solid var(--rule);cursor:default}
.nextcard.doneall .eyebrow{color:var(--accent)}
.nextcard.doneall .sub{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.nextcard.wait .dot{animation:none}}

/* ---------- about Katie ---------- */
.hero{margin:22px 0 30px;border-radius:14px;overflow:hidden;border:1px solid var(--rule)}
.hero img{display:block;width:100%;height:auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:26px 0 10px}
.stat{padding:16px 16px 15px;border-radius:12px;border:1.5px solid color-mix(in srgb, var(--accent) 22%, var(--rule));
  background:color-mix(in srgb, var(--accent) 4%, var(--ground))}
.stat b{display:block;font-family:var(--f-display);font-size:26px;font-weight:700;line-height:1.05;
  letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:24px 0 8px}
.proofs.one{grid-template-columns:minmax(0,360px)}
.proof{border:1px solid var(--rule);border-radius:11px;overflow:hidden;background:var(--surface)}
.proof img{display:block;width:100%;height:auto}
.proof p{margin:0;padding:11px 13px 13px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.cta{margin:30px 0 8px;padding:22px 22px 20px;border-radius:14px;background:var(--accent);color:#fff}
.cta b{display:block;font-family:var(--f-display);font-size:19px;font-weight:700;letter-spacing:-.01em}
.cta p{margin:9px 0 0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.82)}
.cta a{display:inline-block;margin-top:16px;padding:12px 22px;border-radius:9px;background:var(--seal);
  color:var(--seal-ink);font-size:14.5px;font-weight:700;text-decoration:none}
.cta a:hover{opacity:.9}

/* ---------- click-by-click walkthrough ---------- */
.walk{counter-reset:wk;margin:26px 0}
.wstep{position:relative;margin:0 0 30px;padding:0 0 0 46px}
.wstep::before{counter-increment:wk;content:counter(wk);position:absolute;left:0;top:1px;
  width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-family:var(--f-display);font-size:14px;font-weight:700}
.wstep::after{content:"";position:absolute;left:15.5px;top:40px;bottom:-22px;width:1.5px;
  background:color-mix(in srgb, var(--accent) 18%, transparent)}
.wstep:last-child::after{display:none}
.wstep > h3{margin:4px 0 8px;font-family:var(--f-display);font-size:18px;font-weight:700;
  line-height:1.25;color:var(--ink)}
.wstep > p{margin:0 0 10px}
.wshot{margin:12px 0 4px;border:1.5px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--surface)}
.wshot img{display:block;width:100%;height:auto}
.wshot figcaption{margin:0;padding:10px 13px 12px;font-size:12.5px;line-height:1.45;color:var(--muted);
  border-top:1px solid var(--rule)}
.wshot figcaption b{color:var(--ink)}
.wshot.sm{max-width:330px}
.twoup{display:grid;grid-template-columns:1fr;gap:16px;margin:22px 0 6px}
@media(min-width:720px){.twoup{grid-template-columns:1fr 1fr;align-items:start}}
.twoup .wshot{margin:0}
.wdo{display:inline-block;margin:6px 0 2px;padding:7px 13px;border-radius:999px;background:var(--seal);
  color:var(--seal-ink);font-size:13px;font-weight:700;line-height:1.3}
@media(max-width:620px){
  .wstep{padding-left:36px}
  .wstep::before{width:26px;height:26px;font-size:12.5px}
  .wstep::after{left:12.5px;top:33px}
}

/* ---------- worked bio examples ---------- */
.bioex{margin:26px 0 8px;border:1.5px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--surface)}
.bioex > .hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--rule);background:color-mix(in srgb, var(--accent) 4%, var(--ground))}
.bioex > .hd b{font-family:var(--f-display);font-size:15.5px;font-weight:700;color:var(--accent)}
.bioex > .hd span{font-size:12.5px;color:var(--muted)}
.bioex img{display:block;width:100%;height:auto}
.bioex .read{padding:4px 16px 16px}
.bioex .read .fields{margin:0}

/* ---------- the annotated grid of nine ---------- */
.grid9{position:relative;max-width:430px;margin:26px 0 10px;border:1.5px solid var(--rule);
  border-radius:12px;overflow:hidden;background:var(--surface)}
.grid9 img{display:block;width:100%;height:auto}
.grid9 span{position:absolute;padding:3px 7px;border-radius:5px;line-height:1;white-space:nowrap;
  font-family:var(--f-body);font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 1px 5px rgba(0,0,0,.3)}
.grid9 .ad{background:#FCC9EC;color:#01341E}
.grid9 .org{background:rgba(20,17,15,.92);color:#fff}
.g9key{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 4px;font-size:12.5px;color:var(--muted)}
.g9key b{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink)}
.g9key i{width:12px;height:12px;border-radius:3px;display:inline-block}
.g9key .ad i{background:#FCC9EC;border:1px solid var(--accent)}
.g9key .org i{background:#141110}

/* ---------- real examples, banned vs safe ---------- */
.exgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:26px 0 8px}
.exgrid.one{grid-template-columns:minmax(0,310px)}
.ex{border:1.5px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column}
.ex .tag{display:flex;align-items:center;gap:8px;padding:9px 13px;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.ex.bad{border-color:var(--ink)}
.ex.bad .tag{background:var(--ink);color:#fff}
.ex.good{border-color:var(--accent)}
.ex.good .tag{background:var(--seal);color:var(--seal-ink)}
.ex img{display:block;width:100%;height:auto;border-top:1px solid var(--rule)}
.ex figcaption,.ex .why{margin:0;padding:12px 13px 14px;font-size:13px;line-height:1.5;color:var(--muted)}
.ex .why b{color:var(--ink)}
.ex.good .why b{color:var(--accent)}

a.ext{color:var(--accent);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;
  text-decoration-color:color-mix(in srgb, var(--accent) 35%, transparent)}
a.ext:hover{text-decoration-color:var(--accent)}
a.ext::after{content:"\2197";font-size:.82em;margin-left:2px;text-decoration:none;display:inline-block}
.golink{background:none;border:none;padding:0;cursor:pointer;font:inherit;font-weight:700;
  color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.golink:hover{opacity:.72}

/* ---------- checkpoints between steps ---------- */
.gate{margin-top:34px;padding:22px 22px 20px;border-radius:14px;
  border:1.5px solid color-mix(in srgb, var(--accent) 30%, var(--rule));
  background:color-mix(in srgb, var(--accent) 4%, var(--ground))}
.gate .ghead{display:flex;align-items:center;gap:10px}
.gate .ghead b{font-family:var(--f-display);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--accent)}
.gate .glead{margin:9px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.gate ol{list-style:none;margin:18px 0 0;padding:0;counter-reset:g}
.gate li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--rule)}
.gate li .q{flex:1 1 220px;min-width:0;font-size:15px;line-height:1.45;color:var(--ink)}
.gate li .yn{display:flex;gap:7px;flex:0 0 auto}
.gate .yn button{background:var(--ground);border:1.5px solid var(--rule);border-radius:7px;cursor:pointer;
  padding:7px 15px;font-family:var(--f-body);font-size:13px;font-weight:700;color:var(--muted)}
.gate .yn button:hover{border-color:var(--accent);color:var(--accent)}
.gate .yn button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.gate li.no .yn button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.gate li .fix{flex:1 1 100%;margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.gate li .fix button{background:none;border:none;padding:0;cursor:pointer;font:inherit;font-weight:700;
  color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.gate .verdict{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.5}
.gate .verdict .seal{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--seal);
  display:grid;place-items:center;box-shadow:0 0 0 3px var(--seal-ring)}
.gate .verdict .seal svg{width:17px;height:17px;fill:none;stroke:var(--seal-ink);stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}
.gate .verdict b{color:var(--accent)}

/* ---------- the floating coach ---------- */
/* id selectors outrank the UA [hidden] rule, so say it explicitly */
#coachFab[hidden],#coachScrim[hidden],#coachPanel[hidden]{display:none}
#coachFab{position:fixed;right:24px;bottom:24px;z-index:60;width:58px;height:58px;padding:0;
  border:none;border-radius:50%;cursor:pointer;background:var(--accent);
  display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.20);transition:transform .16s ease,box-shadow .16s ease}
#coachFab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 26px rgba(0,0,0,.26)}
#coachFab:focus-visible{outline:2px solid #FCC9EC;outline-offset:3px}
#coachFab .ic{display:grid;place-items:center}
/* the button sits outside .app, so it carries the Tiny Ads pink itself */
#coachFab .ic svg{width:27px;height:27px;display:block;fill:#FCC9EC;stroke:none}
/* the name only appears on hover, so the button stays an emblem */
#coachFab .lbl{position:absolute;right:70px;top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .16s ease,transform .16s ease;
  background:var(--accent);color:#fff;border-radius:7px;padding:7px 12px;
  font-family:var(--f-body);font-size:13px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.16)}
#coachFab:hover .lbl,#coachFab:focus-visible .lbl{opacity:1;transform:translateY(-50%) translateX(0)}
#coachFab.new{animation:fabpulse 2.4s ease-in-out 3}
@keyframes fabpulse{0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.20),0 0 0 0 rgba(252,201,236,.9)}
  55%{box-shadow:0 6px 20px rgba(0,0,0,.20),0 0 0 12px rgba(252,201,236,0)}}
@media (prefers-reduced-motion:reduce){#coachFab.new{animation:none}}

#coachScrim{position:fixed;inset:0;z-index:70;background:rgba(20,17,15,.38);animation:fadein .18s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}

#coachPanel{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(480px,100vw);
  display:flex;flex-direction:column;background:var(--ground);border-left:1px solid var(--rule);
  box-shadow:-10px 0 40px rgba(0,0,0,.16);animation:slidein .22s cubic-bezier(.2,.8,.3,1)}
@keyframes slidein{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
#coachPanel header{display:flex;align-items:flex-start;gap:14px;padding:18px 18px 15px;
  border-bottom:1px solid var(--rule);background:color-mix(in srgb, var(--accent) 4%, var(--ground))}
#coachPanel header b{display:block;font-family:var(--f-display);font-size:17px;font-weight:700;
  letter-spacing:-.01em;color:var(--accent)}
#coachPanel header span{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--muted)}
#coachPanel .x{margin-left:auto;flex:0 0 auto;width:32px;height:32px;border-radius:50%;cursor:pointer;
  background:none;border:1px solid var(--rule);color:var(--muted);font-size:14px;line-height:1}
#coachPanel .x:hover{background:var(--surface);color:var(--ink)}
#coachPanel .cbody{flex:1 1 auto;min-height:0;overflow:hidden;padding:0;
  display:flex;flex-direction:column}
  font-size:13.5px;font-weight:700;color:var(--accent)}
@media(max-width:620px){
  #coachFab{right:16px;bottom:16px;width:54px;height:54px}
  #coachFab .lbl{display:none}
  #coachPanel{width:100vw;border-left:none}
}

/* ---------- the pretty checklist (2-minute profile check) ---------- */
.ckwrap.cute{margin:28px 0 8px;padding:20px 20px 8px;border-radius:16px;
  border:1.5px solid color-mix(in srgb, var(--seal) 70%, var(--rule));
  background:color-mix(in srgb, var(--seal) 13%, var(--ground))}
.ckwrap.cute .ckbar{border-bottom:none;padding:0 0 14px;gap:12px}
.ckwrap.cute .ckbar .n{font-size:14px;color:var(--accent)}
.ckwrap.cute .ckbar .trk{height:10px;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent)}
.ckwrap.cute .ckbar .trk i{background:var(--accent);border-radius:999px}
.ckwrap.cute .mood{flex:0 0 auto;font-family:var(--f-display);font-size:12.5px;font-weight:700;
  color:var(--accent);white-space:nowrap}
.ckwrap.cute ul.check > li{border-bottom:1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  padding:13px 8px;border-radius:10px}
.ckwrap.cute ul.check > li:last-child{border-bottom:none}
.ckwrap.cute ul.check > li:hover{background:rgba(255,255,255,.65)}
.ckwrap.cute ul.check > li::before{border-radius:50%;border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  background:#fff}
.ckwrap.cute ul.check > li.on::before{background:var(--seal);border-color:var(--seal)}
.ckwrap.cute ul.check > li.on::after{border-left-color:var(--seal-ink);border-bottom-color:var(--seal-ink)}
.ckwrap.cute ul.check > li.on{background:rgba(255,255,255,.5)}
.ckdone{display:none;align-items:center;gap:14px;margin-top:14px;padding:15px 16px;border-radius:12px;
  background:var(--accent);color:#fff}
.ckwrap.cute.finished .ckdone{display:flex;animation:donepop .42s cubic-bezier(.2,1.4,.4,1)}
@keyframes donepop{0%{transform:scale(.94);opacity:0}100%{transform:none;opacity:1}}
.ckdone .seal{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--seal);
  display:grid;place-items:center}
.ckdone .seal svg{width:19px;height:19px;fill:none;stroke:var(--seal-ink);stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}
.ckdone b{display:block;font-family:var(--f-display);font-size:16px;font-weight:700;line-height:1.2}
.ckdone span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.8)}
@media (prefers-reduced-motion:reduce){.ckwrap.cute.finished .ckdone{animation:none}}
@media(max-width:620px){
  .ckwrap.cute{padding:16px 14px 6px}
  .ckwrap.cute .ckbar{flex-wrap:wrap}
  .ckwrap.cute .mood{order:3;flex:1 1 100%}
}

/* ---------- tickable checklists ---------- */
.ckwrap{margin:30px 0}
.ckbar{display:flex;align-items:center;gap:14px;padding:0 0 11px;border-bottom:2px solid var(--ink)}
.ckbar .n{font-family:var(--f-display);font-size:13px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.ckbar .trk{flex:1;height:6px;background:var(--taupe);border-radius:4px;overflow:hidden}
.ckbar .trk i{display:block;height:100%;width:0;background:var(--accent);border-radius:4px;
  transition:width .22s ease}
.ckbar .rst{flex:0 0 auto;background:none;border:none;padding:2px 0;cursor:pointer;
  font-family:var(--f-body);font-size:12px;font-weight:600;color:var(--faint)}
.ckbar .rst:hover{color:var(--accent)}
.ckbar.all .trk i{background:var(--accent)}

ul.check{list-style:none;margin:0;padding:0}
ul.check > li{position:relative;display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;
  padding:14px 2px;border-bottom:1px solid var(--rule-soft);cursor:pointer;
  font-size:15.5px;line-height:1.5;color:var(--ink);-webkit-tap-highlight-color:transparent}
ul.check > li:hover{background:var(--rail)}
ul.check > li:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px}
ul.check > li::before{content:"";grid-column:1;margin-top:1px;width:23px;height:23px;border-radius:6px;
  border:2px solid #CFC9C2;background:var(--ground);box-sizing:border-box;
  transition:background .14s ease,border-color .14s ease}
ul.check > li::after{content:"";position:absolute;left:8px;top:21px;width:9px;height:5px;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) scale(.4);
  opacity:0;transition:opacity .14s ease,transform .14s ease}
ul.check > li.on::before{background:var(--accent);border-color:var(--accent)}
ul.check > li.on::after{opacity:1;transform:rotate(-45deg) scale(1)}
ul.check > li.on .ctx{color:var(--faint)}
ul.check > li.on b{color:var(--muted)}
ul.check > li > b{grid-column:2;display:block;font-family:var(--f-display);font-size:15.5px;font-weight:700;
  color:var(--ink);margin:0 0 3px;line-height:1.35}
ul.check > li > .ctx{grid-column:2;display:block;font-size:14.5px;line-height:1.5;color:var(--muted)}
ul.check > li em{font-style:normal}
ul.check > li:last-child{border-bottom:none}

/* ---------- copyable prompt ---------- */
.prompt{margin:26px 0;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--surface)}
.prompt .phead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--rule);background:var(--taupe)}
.prompt .phead b{font-family:var(--f-body);font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.prompt .cpy{flex:0 0 auto;background:var(--ink);color:#fff;border:none;border-radius:6px;
  padding:7px 15px;font-family:var(--f-body);font-size:13px;font-weight:600;cursor:pointer}
.prompt .cpy:hover{background:#000}
.prompt .cpy.ok{background:var(--accent)}
.prompt pre{margin:0;padding:16px 18px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.6;
  color:var(--ink);-webkit-overflow-scrolling:touch}
@media(max-width:520px){.prompt pre{font-size:12px;padding:13px 14px}}

/* ---------- try-it widgets ---------- */
.calc{margin:32px 0;padding:24px 24px 22px;border-radius:18px;
  border:1.5px solid color-mix(in srgb, var(--seal) 70%, var(--rule));
  background:color-mix(in srgb, var(--seal) 13%, var(--ground))}
.calc .ttl{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.calc .ttl b{font-family:var(--f-display);font-size:17.5px;font-weight:700;color:var(--accent)}
.calc .ttl span{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--seal);
  color:var(--seal-ink);font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;line-height:1}
.calc p.cap{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 18px}

.calc label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:10px}
.calc label em{font-style:normal;float:none;font-family:var(--f-display);font-size:26px;font-weight:700;
  color:var(--accent);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}

/* a fatter, friendlier slider */
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;margin:0;
  border-radius:999px;background:#fff;cursor:pointer;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent)}
.calc input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:28px;height:28px;border-radius:50%;background:var(--accent);border:4px solid var(--seal);
  box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:grab;margin-top:-7px;transition:transform .12s ease}
.calc input[type=range]::-webkit-slider-thumb:active{transform:scale(1.12);cursor:grabbing}
.calc input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--accent);
  border:4px solid var(--seal);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:grab}
.calc input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:999px;background:transparent}
.calc input[type=range]::-moz-range-track{height:14px;border-radius:999px;background:transparent}
.calc input[type=range]::-moz-range-progress{height:14px;border-radius:999px;background:var(--seal)}

.calc .out{display:grid;grid-template-columns:1fr;gap:12px;margin-top:22px}
@media(min-width:520px){.calc .out{grid-template-columns:repeat(3,1fr)}}
.calc .o{background:#fff;border:1.5px solid color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius:14px;padding:14px 15px 15px;text-align:center}
.calc .o i{display:block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.calc .o strong{font-family:var(--f-display);font-size:27px;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1.05;display:block;letter-spacing:-.02em}
.calc .verdict{margin-top:20px;padding:16px 18px;border-radius:14px;border-left:none;
  background:var(--accent);color:#fff}
.calc .verdict b{display:block;font-family:var(--f-display);font-size:17px;color:#fff;margin-bottom:4px}
.calc .verdict span{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.85)}
.calc .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.calc .btns button{background:#fff;border:1.5px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius:999px;padding:9px 17px;font-family:var(--f-body);font-size:14px;font-weight:700;
  color:var(--accent);cursor:pointer;transition:background .14s ease,border-color .14s ease}
.calc .btns button:hover{border-color:var(--accent)}
.calc .btns button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:620px){
  .calc{padding:18px 16px 16px;border-radius:15px}
  .calc label em{font-size:23px}
  .calc .o strong{font-size:24px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- LESSON VIDEO ---------- */
/* Added when the platform moved off the artifact. A lesson gets a video by
   having v:"<link>" in TA_LESSONS — see videoHTML() in js/app.js. */
figure.vid{margin:30px 0 34px}
.vid-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:#0E0E0E;
  border:1px solid color-mix(in srgb, var(--accent) 12%, var(--rule));
  box-shadow:0 1px 2px rgba(1,52,30,.05), 0 18px 40px -24px rgba(1,52,30,.42);
}
.vid-frame iframe,
.vid-frame video{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
}
figure.vid figcaption{
  margin-top:11px;
  font-size:13.2px; line-height:1.55;
  color:var(--muted);
}
.vid-bad{
  padding:16px 18px; border-radius:12px;
  border:1px dashed #D9B3B3; background:#FDF6F6; color:#8A2A2A;
  font-size:14px;
}
.vid-bad code{font-size:13px; word-break:break-all}

/* ---------- PHONE NAVIGATION ----------
   Below 900px the layout is one column, so the sidebar used to stack on top of
   the lesson: tapping a lesson left you ~3 phone screens above the thing you
   just tapped. Now the lesson list is a panel you open and it closes itself the
   moment you pick something. */

.navtoggle{display:none}
.railclose{display:none}

@media(max-width:899px){
  .topbar{
    position:sticky; top:0; z-index:300;
    background:var(--ground);
    padding-top:10px; padding-bottom:10px;
  }
  .navtoggle{
    display:inline-flex; align-items:center; gap:8px;
    background:none; border:1px solid var(--rule);
    border-radius:999px; padding:7px 14px 7px 11px;
    font-size:13.5px; font-weight:700; color:var(--ink);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .navtoggle svg{
    width:17px; height:17px; fill:none;
    stroke:currentColor; stroke-width:2; stroke-linecap:round;
  }
  .navtoggle:active{background:var(--rule-soft)}

  .rail{
    position:fixed; inset:0; z-index:500;
    margin:0; border-right:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding-top:64px;
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform .22s ease, visibility .22s ease;
  }
  .app.nav-open .rail{ transform:none; visibility:visible }
  .app.nav-open .railclose{ display:flex }
  @media(prefers-reduced-motion:reduce){ .rail{transition:none} }

  .railclose{
    display:none; align-items:center; justify-content:center;
    /* fixed, not absolute: the list scrolls, the way out must not */
    position:fixed; top:13px; right:13px; z-index:520;
    width:40px; height:40px;
    background:var(--ground); border:1px solid var(--rule);
    border-radius:50%; cursor:pointer; color:var(--ink);
  }
  .railclose svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

  body.nav-locked{ overflow:hidden }

  /* the library has no lesson list, so it has no button either */
  .app.library .navtoggle{ display:none }
}

/* ---------- THE CAMERA ----------
   Marks a lesson that has a walkthrough. Solid = recorded. Hollow = coming. */
.item .rt{ display:flex; align-items:center; gap:5px; white-space:nowrap }
.item .vtag{
  display:inline-block; flex:0 0 auto;
  width:14px; height:14px; line-height:0;
}
.item .vtag svg{
  width:14px; height:14px; display:block;
  fill:none; stroke:var(--accent); stroke-width:1.7;
  stroke-linejoin:round; stroke-linecap:round;
}
.item.vid .vtag svg{ fill:color-mix(in srgb, var(--accent) 15%, transparent) }
.item.vidsoon .vtag svg{ stroke:var(--faint); stroke-dasharray:2.4 2.2 }
.item[aria-current="true"] .vtag svg{ stroke:var(--accent-2) }
.item.vidsoon[aria-current="true"] .vtag svg{ stroke:#C9BEB2 }

/* ---------- THE "COMING" BLOCK ---------- */
figure.vid.vid-soon{ margin:26px 0 30px }
.vid-soonbox{
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 20px;
  border:1.5px dashed color-mix(in srgb, var(--accent) 28%, var(--rule));
  border-radius:14px;
  background:color-mix(in srgb, var(--accent) 3%, var(--ground));
}
.vid-cam{ flex:0 0 auto; line-height:0; padding-top:1px }
.vid-cam svg{
  width:24px; height:24px; display:block;
  fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-linejoin:round; stroke-linecap:round; opacity:.75;
}
.vid-soontxt{ font-size:14.2px; line-height:1.55; color:var(--muted) }
.vid-soontxt b{
  display:block; color:var(--ink); font-size:14.8px;
  font-family:var(--f-display); letter-spacing:-.005em; margin-bottom:2px;
}

/* ===========================================================================
   THE COACH PANEL
   =========================================================================== */
#coachPanel header{display:flex;align-items:flex-start;gap:8px}
#coachPanel header > div{flex:1 1 auto;min-width:0}
#coachPanel header .hbtn{
  flex:0 0 auto;background:none;border:0;padding:6px;margin:-4px 0 0;
  border-radius:8px;cursor:pointer;color:var(--muted);line-height:0;
}
#coachPanel header .hbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}
#coachPanel header .hbtn:hover{background:var(--rule-soft);color:var(--ink)}

.cbody{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}

.chat{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}

/* ---- the transcript ---- */
.chat-log{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:20px 18px 8px;
  display:flex; flex-direction:column; gap:16px;
  scroll-behavior:smooth;
}
@media(prefers-reduced-motion:reduce){ .chat-log{scroll-behavior:auto} }

.chat-welcome{padding:6px 2px 4px}
.cw-lead{margin:0 0 7px;font-family:var(--f-display);font-size:19px;font-weight:800;
  letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.cw-sub{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--muted)}
.starters{display:flex;flex-direction:column;gap:8px}
.starters button{
  text-align:left; background:var(--ground);
  border:1px solid var(--rule); border-radius:11px;
  padding:11px 14px; font-size:14px; line-height:1.4; color:var(--ink);
  cursor:pointer; transition:border-color .12s, background .12s;
}
.starters button:hover{border-color:var(--accent);background:var(--accent-soft)}

/* ---- messages ---- */
.msg{display:flex;gap:10px;align-items:flex-start}
.msg.user{justify-content:flex-end}
.msg .who{
  flex:0 0 auto;width:25px;height:25px;border-radius:50%;
  background:var(--accent-soft);display:grid;place-items:center;margin-top:1px;
}
.msg .who svg{width:14px;height:14px;fill:var(--accent)}
.msg .bub{
  font-size:14.8px;line-height:1.6;min-width:0;
  overflow-wrap:anywhere;
}
.msg.user .bub{
  background:var(--ink);color:#fff;
  padding:10px 14px;border-radius:15px 15px 4px 15px;
  max-width:84%;white-space:pre-wrap;
}
.msg.assistant .bub{flex:1 1 auto;color:var(--ink)}
.msg .bub > p{margin:0 0 10px}
.msg .bub > p:last-child{margin-bottom:0}
.msg .bub h4{margin:14px 0 6px;font-family:var(--f-display);font-size:14.5px;font-weight:800;
  letter-spacing:-.005em}
.msg .bub h4:first-child{margin-top:0}
.msg .bub ol,.msg .bub ul{margin:0 0 10px;padding-left:20px}
.msg .bub li{margin:0 0 5px}
.msg .bub code{background:var(--taupe);padding:1px 5px;border-radius:5px;font-size:.9em}
.msg .bub .stopped{color:var(--faint);font-size:13px;font-style:italic;margin-top:8px}

/* a lesson the coach named, made clickable */
.lesslink{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--accent);font-weight:700;
  text-decoration:underline;text-underline-offset:2.5px;
  text-decoration-color:color-mix(in srgb, var(--accent) 38%, transparent);
}
.lesslink:hover{text-decoration-color:currentColor}

/* ---- thinking ---- */
.bub.thinking{display:flex;gap:5px;align-items:center;padding:8px 0}
.bub.thinking .dot{
  width:6px;height:6px;border-radius:50%;background:var(--faint);
  animation:cdot 1.1s ease-in-out infinite;
}
.bub.thinking .dot:nth-child(2){animation-delay:.16s}
.bub.thinking .dot:nth-child(3){animation-delay:.32s}
@keyframes cdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){ .bub.thinking .dot{animation-duration:2.4s} }

.chat-notice{
  font-size:13.5px;line-height:1.5;color:var(--muted);
  background:var(--taupe);border-radius:10px;padding:11px 13px;
}
.chat-notice.bad{background:#FDF1F1;color:#8A2A2A;border:1px solid #F3D6D6}

/* ---- the composer ---- */
.chat-form{
  flex:0 0 auto;
  padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--rule);
  background:var(--ground);
}
.chat-inputwrap{
  display:flex;align-items:flex-end;gap:8px;
  border:1.5px solid var(--rule);border-radius:14px;
  padding:7px 7px 7px 13px;background:var(--ground);
  transition:border-color .12s, box-shadow .12s;
}
.chat-inputwrap:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.chat-inputwrap textarea{
  flex:1 1 auto;border:0;outline:none;resize:none;background:none;
  font-family:var(--f-body);font-size:16px;line-height:1.5;color:var(--ink);
  max-height:180px;padding:5px 0;
}
.chat-inputwrap textarea::placeholder{color:var(--faint)}
.chat-send,.chat-stop{
  flex:0 0 auto;width:34px;height:34px;border:0;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;line-height:0;
}
.chat-send{background:var(--accent);color:#fff}
.chat-send:hover{filter:brightness(1.08)}
.chat-stop{background:var(--ink);color:#fff}
.chat-send svg,.chat-stop svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chat-stop svg{fill:currentColor;stroke:none}
.chat-legal{margin:9px 2px 0;font-size:11.5px;line-height:1.45;color:var(--faint);text-align:center}

/* the outbound card in the library (the 1:1 intensive).
   Not a course, so it gets its own treatment rather than borrowing
   owned/locked: a solid card in the brand green, since it is the one thing
   on this page you actually want people to click. */
.prod.out{
  background:color-mix(in srgb, var(--accent) 5%, var(--ground));
  border:1px solid color-mix(in srgb, var(--accent) 24%, var(--rule));
}
.prod.out .state{color:var(--accent)}
.prod.out .foot{margin-top:auto}
.prod.out .act,
.prod.out a.act{
  display:inline-block; width:auto;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  text-decoration:none; text-align:center;
}
.prod.out a.act:hover{filter:brightness(1.08)}
.prod.out .act[disabled]{
  background:transparent; color:var(--faint); border-style:dashed;
  border-color:var(--rule); opacity:1; cursor:not-allowed;
}