/* The guide: scrapbook frame (grid paper, sticky note, tilt) on covers and the
   login, a calm straight layout inside the steps. One light look on purpose. */
:root{
  --ink:#161616; --ink-2:#4B4E57; --ink-3:#6A6E7A;
  --pink:#FF2E93; --pink-text:#D6006F;
  --yellow:#FFE66D; --yellow-soft:#FFF7CC;
  --rose:#FFC2DF; --rose-soft:#FFEAF3;
  --sky:#BDE0FE; --sky-soft:#E7F3FF;
  --mint:#BFE6CF;
  --grid:#E6EEF8; --line:#DCE6F2; --paper:#FFFFFF;
  --hand:'Caveat',cursive; --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.5;
  background-color:var(--paper);overflow-x:clip;min-height:100vh}
/* The faint grid stays still while the page scrolls over it. A fixed layer, not the fixed-attachment
   background trick, because iOS Safari ignores that and it can judder. It sits behind everything and takes no clicks. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px}
@media (max-width:600px){body::before{background-size:24px 24px}}
button,input{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
img{max-width:100%}
.hl{background:linear-gradient(transparent 62%,var(--pink) 62%,var(--pink) 92%,transparent 92%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl-y{background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 92%,transparent 92%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:50;font-weight:700}
.skip:focus{top:8px}
.noscript{max-width:560px;margin:24px auto;padding:0 16px;font-weight:700}

/* The width of the guide. Phones and small tablets keep 900px at most. From 960px it fills the window (24px each side)
   and tops out at 1440px. Body text keeps its own 72ch limit, so lines stay easy to read. */
:root{--shell-w:900px;--shell-pad:clamp(12px,3vw,32px)}
@media (min-width:960px){:root{--shell-w:max(900px,min(1440px,calc(100vw - 48px)))}}
/* Very wide screens, or a browser zoomed out: scale the whole guide up so the words, pictures and videos
   fill the window instead of sitting small in the middle. The layout itself stays about 1,500px wide. */
@media (min-width:1800px){html{zoom:1.2}}
@media (min-width:2000px){html{zoom:1.33}}
@media (min-width:2250px){html{zoom:1.5}}
@media (min-width:2600px){html{zoom:1.7}}
@media (min-width:3000px){html{zoom:2}}
/* Web addresses in the text open in a new tab. */
a.weblink{color:var(--pink-text);font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
a.ui-link{color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.shell{max-width:var(--shell-w);margin:0 auto;padding:16px var(--shell-pad) 40px}
.foot-note{margin:14px 4px 0;font-size:13px;color:var(--ink-2);text-align:center}

/* ---------- the guide itself: calm, straight, no grid behind text ---------- */
.app{background:var(--paper);border:2px solid var(--ink);border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.10);overflow:hidden;overflow:clip}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;min-height:56px;padding:6px 16px;border-bottom:2px solid var(--ink);background:var(--paper)}
.bar .where{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.bar .where b{font-size:15px;line-height:1.2;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .where button.lv-title{border:0;background:none;padding:0;margin:0;text-align:left;font:inherit;font-weight:700;font-size:15px;line-height:1.2;color:var(--ink);cursor:pointer;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:24px;text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:2px;text-underline-offset:4px}
.bar .where button.lv-title:hover{text-decoration-color:var(--ink)}
.bar .where button.lv-title::after{content:" \25BE";font-size:12px}
.bar .where>span{font-size:13px;color:var(--ink-2);font-weight:500;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden}
.bar .where>span>span:first-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.stepdots{display:inline-flex;gap:4px;align-items:center}
.stepdots i{width:8px;height:8px;border-radius:50%;background:var(--line);border:1px solid var(--ink-3)}
.stepdots i.dn{background:var(--ink);border-color:var(--ink)}
.stepdots i.cur{background:var(--pink);border-color:var(--ink)}
@media (max-width:420px){.stepdots{display:none}.sub-a{display:none}.sub-b{display:inline-block}.sub-b::first-letter{text-transform:uppercase}}
.progress{height:6px;background:var(--line)}
.progress i{display:block;height:100%;background:var(--pink);width:0;transition:width .3s}

.screen{padding:16px 20px 26px;overflow-wrap:break-word}
@media (min-width:760px){.screen{padding:20px 40px 36px}}
.solo{max-width:760px;margin:0 auto}
@media (max-width:480px){
  .shell{padding:8px 0 28px}
  .app{border-left:0;border-right:0;border-radius:0;box-shadow:none}
  .screen{padding:12px 16px 24px}
  .bar{padding:6px 12px}
  .foot-note{margin:12px 16px 0}
  .appfoot{padding:6px 12px 12px}
}
.kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px;display:flex;flex-wrap:wrap;gap:4px 12px}
.kicker .time{color:var(--ink);background:var(--sky-soft);border-radius:6px;padding:0 8px;letter-spacing:.02em;text-transform:none}
.screen h1,.screen h2{font-size:clamp(26px,5vw,34px);line-height:1.08;letter-spacing:-.035em;margin:0 0 10px;text-wrap:balance}
.screen h2:focus,.screen h1:focus{outline:none}
.why{margin:0 0 11px;color:var(--ink-2);font-size:17px;max-width:72ch}
.para{margin:0 0 11px;font-size:17px;max-width:72ch}
.clicks{margin:0 0 13px;padding:0;list-style:none;counter-reset:c;display:flex;flex-direction:column;gap:6px;max-width:72ch}
.clicks li{counter-increment:c;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;font-size:17px}
.clicks li::before{content:counter(c);font-family:var(--hand);font-size:26px;line-height:1;color:var(--pink-text);border:2px solid var(--pink);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.ui{font-family:var(--sans);font-weight:700;background:var(--yellow-soft);border:1.5px solid var(--ink);border-radius:5px;padding:0 6px;font-size:.92em;white-space:nowrap;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media (max-width:480px){.ui{white-space:normal;overflow-wrap:anywhere}}
.pic{border:2px dashed var(--ink-3);border-radius:12px;padding:12px 14px;margin:0 0 14px;background:var(--sky-soft);display:flex;flex-direction:column;gap:4px}
.pic b{font-family:var(--hand);font-size:24px;color:var(--pink-text);line-height:1}
.pic span{color:var(--ink-2);font-size:15px}
.shot{margin:0 0 14px}
.shot img{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:12px;background:var(--paper)}
.shot figcaption{font-size:14px;color:var(--ink-2);margin-top:6px}
.shot video,.shot .clip-still{display:block;width:100%;max-width:100%;height:auto;border:2px solid var(--ink);border-radius:12px;background:var(--paper)}
.shot video{aspect-ratio:auto 16/9;object-fit:contain}
.clip-box{position:relative}
.clip-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:3px solid var(--ink);background:var(--pink);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.clip-play svg{width:30px;height:30px;margin-left:3px}
.clip-note{font-size:14px;color:var(--ink-2);margin:6px 0 0}
.shot .clip-swap{margin-top:8px;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);font-weight:700;font-size:15px;color:var(--ink);cursor:pointer}
.shot .clip-swap:hover{background:var(--sky-soft)}
.say.reading{background:var(--yellow-soft);box-shadow:0 0 0 6px var(--yellow-soft);border-radius:4px}
.g{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:help;text-decoration:underline dotted var(--pink-text) 2px;text-underline-offset:4px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:6px}
.btn{border:0;background:var(--ink);color:#fff;border-radius:8px;padding:14px 22px;font-weight:700;font-size:17px;cursor:pointer;min-height:56px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn:hover{background:#000}
.btn-o{border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:8px;padding:10px 16px;font-weight:700;font-size:15px;cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}
.quiet{border:0;background:none;padding:10px 0 6px;font-weight:700;font-size:16px;cursor:pointer;border-bottom:2px solid var(--ink);color:var(--ink);min-height:44px;line-height:1.2;border-radius:0}
.quiet.soft{border-bottom-color:var(--ink);color:var(--ink)}
.quiet:hover{border-bottom-color:var(--pink)}
.back{border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:8px;padding:8px 16px;font-weight:700;font-size:16px;cursor:pointer;margin:0 0 14px;min-height:44px;display:inline-flex;align-items:center}
.actions .back-btn{min-height:56px;padding:12px 20px;font-size:17px;border-color:var(--ink)}
/* the top of every page: a small way back on the left, "Show the words" on the right. One row, 44px. */
.topline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin:0 0 10px;min-height:44px}
.crumb{border:0;background:none;padding:6px 0;margin:0;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;min-height:44px;text-align:left;line-height:1.25;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;max-width:100%}
.crumb:hover{text-decoration-color:var(--pink)}
.words-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink);font-weight:700;font-size:16px;cursor:pointer;margin-left:auto}
.words-btn svg{width:22px;height:22px;flex:0 0 auto}
.words-btn[aria-expanded="true"]{background:var(--ink);color:#fff}
.words-btn:hover{background:var(--sky-soft)}
.words-btn[aria-expanded="true"]:hover{background:#000}
.later{margin:10px 0 0;font-weight:700;color:var(--ink);max-width:72ch}
.then{border-left:4px solid var(--pink);background:var(--paper);padding:12px 16px;margin:16px 0 18px;max-width:72ch;border-radius:0 8px 8px 0}
.then .beat-tag{margin-top:0}
.then p:last-child{margin-bottom:0}
.stack{display:flex;flex-direction:column;gap:12px}
.list{list-style:none;margin:0 0 13px;padding:0;display:flex;flex-direction:column;gap:7px;max-width:64ch}
.list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:17px}
.list li svg{width:22px;height:22px;margin-top:2px}
.note-line{font-family:var(--hand);font-size:24px;color:var(--pink-text);line-height:1.1;margin:0 0 14px;transform:rotate(-1deg);display:inline-block}
.note-line.block{display:block;margin-top:14px}
.list-label{font-weight:700;font-size:17px;margin:0 0 8px}
.hint{font-size:15px;color:var(--ink-2);margin:0 0 14px}
.msg{font-weight:700;margin:0 0 12px;min-height:1.5em}

.appfoot{display:flex;flex-wrap:wrap;gap:4px 22px;padding:6px 20px 14px;border-top:1.5px solid var(--line)}
.appfoot button{border:0;background:none;padding:10px 0;font-weight:700;font-size:14px;color:var(--ink-2);cursor:pointer;min-height:44px}

/* home */
.home-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
.home-top>.home-intro{grid-column:1;grid-row:1}
.home-top>.polaroid{grid-column:2;grid-row:1}
.polaroid{background:#fff;padding:10px 10px 44px;box-shadow:0 10px 30px rgba(0,0,0,.18);position:relative;width:170px;transform:rotate(3deg);margin:18px 0 0}
.polaroid img{display:block;width:100%;height:190px;object-fit:cover;object-position:50% 20%}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--hand);font-size:20px;line-height:1}
.tape{position:absolute;top:-14px;left:50%;margin-left:-45px;width:90px;height:26px;background:rgba(255,46,147,.45);transform:rotate(-4deg)}
@media (max-width:560px){.home-top{display:block}.home-top::after{content:"";display:block;clear:both}.polaroid{float:right;width:112px;padding:6px 6px 30px;margin:6px 4px 8px 12px}.polaroid img{height:118px}.polaroid figcaption{font-size:15px;bottom:6px}.polaroid .tape{width:60px;margin-left:-30px;top:-10px;height:20px}}
.levels{list-style:none;margin:18px 0 0;padding:0;border:2px solid var(--ink);border-radius:14px;overflow:hidden;max-width:760px}
.levels>li+li{border-top:1.5px solid var(--line)}
.lv{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto 14px;gap:12px;align-items:center;padding:12px 14px;background:var(--paper);border:0;text-align:left;cursor:pointer;min-height:56px}
.lv:hover{background:var(--sky-soft)}
.lv .n{font-family:var(--hand);font-size:30px;line-height:1;color:var(--pink-text);text-align:center}
.lv b{display:block;font-size:16px;line-height:1.25}
.lv small{color:var(--ink-2);font-size:14px}
.lv::after{content:"\203A";font-size:24px;line-height:1;color:var(--ink-2);grid-column:4;grid-row:1}
.lv .st{font-size:14px;font-weight:600;border-radius:8px;padding:2px 10px;background:var(--paper);border:1.5px solid var(--ink);white-space:nowrap;grid-column:3;grid-row:1}
.lv .st.next,.lv .st.prog{background:var(--pink);color:var(--ink)}
.lv .st.done{background:var(--mint)}
.lv .st.helper{background:var(--rose-soft)}
.lv.is-here{background:var(--rose-soft)}
@media (max-width:420px){.lv{grid-template-columns:36px minmax(0,1fr) 14px}.lv .n{grid-row:1/span 2;align-self:start}.lv .st{grid-column:2;grid-row:2;justify-self:start}.lv::after{grid-column:3;grid-row:1}.lv>span:nth-child(2){grid-row:1;grid-column:2}}
.new{margin-top:18px;background:var(--rose-soft);border-radius:14px;padding:14px 16px}
.new h3{margin:0 0 6px;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.new p{margin:0 0 6px}
.new small{color:var(--ink-2)}
.resume{margin:0 0 18px;border:2px solid var(--ink);border-radius:14px;padding:14px 16px;background:var(--yellow-soft)}
.resume b{display:block;margin:0 0 2px}
.resume p{margin:0 0 10px;color:var(--ink-2)}

/* pickers */
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 22px}
@media (max-width:520px){.pick{grid-template-columns:1fr}}
.opt{border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:14px 16px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:64px}
.opt{position:relative}
.opt[aria-pressed="true"]{border-width:4px;padding:12px 14px;box-shadow:0 0 0 3px var(--pink);background:var(--yellow-soft)}
.opt .chosen{display:none;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--ink)}
.opt[aria-pressed="true"] .chosen{display:inline-flex}
.opt .chosen svg{width:20px;height:20px;color:#14602C}
.opt b{font-size:17px}
.opt span{color:var(--ink-2);font-size:15px}
.mini{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.mini i{font-style:normal;font-size:12px;font-weight:700;border:1.5px solid var(--ink);border-radius:6px;padding:1px 8px;background:#fff}
.mini i.on{background:var(--ink);color:#fff}
.mini .box1{width:100%;height:28px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;font-size:12px;display:flex;align-items:center;padding:0 10px;color:var(--ink-3)}
.q{font-size:19px;font-weight:700;margin:0 0 10px}

/* cover (scrapbook allowed) */
.cover{position:relative;padding:34px 22px 30px;background-color:#fff;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
@media (min-width:760px){.cover{padding:44px 44px 40px}}
.cover-bleed{margin:0 -20px -26px}
@media (min-width:760px){.cover-bleed{margin:0 -40px -36px}}
@media (max-width:480px){.cover-bleed{margin:0 -16px -24px}}
.cover .big{font-family:var(--hand);font-size:clamp(72px,14vw,120px);line-height:.8;color:var(--pink-text);transform:rotate(-4deg);display:inline-block;margin:0 0 32px}
.cover h1,.cover h2{font-size:clamp(34px,6vw,54px);line-height:.95;letter-spacing:-.04em;margin:10px 0 14px;text-wrap:balance}
.cover .sticky,.sticky{background:var(--yellow);padding:14px 16px;max-width:320px;box-shadow:0 6px 14px rgba(0,0,0,.14);transform:rotate(-1.5deg);margin:6px 0 22px;position:relative}
.sticky::before{content:"";position:absolute;top:-12px;left:24px;width:80px;height:24px;background:rgba(189,224,254,.85);transform:rotate(3deg)}
.sticky p{margin:0;font-family:var(--hand);font-size:24px;line-height:1.1}
.cover ul.items{margin:0 0 22px;padding-left:20px;max-width:56ch}
.cover ul.items li{margin:4px 0;font-size:17px}
.cover-grid{display:block}
@media (min-width:880px){
  .cover-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:0 56px;align-items:start}
  .cover-aside{position:sticky;top:16px;padding-top:10px}
  .cover-aside .big{font-size:clamp(150px,16vw,220px);margin:0 0 32px}
  .cover-aside .sticky{margin-top:0}
}
@media (max-width:879px){.cover-aside .big-d{display:none}.cover-main .big-m{font-size:clamp(64px,18vw,96px);margin:0 0 6px;display:block;width:max-content}.cover-aside{margin-top:6px}.cover-aside .sticky{margin:6px 0 0;max-width:320px}}
@media (min-width:880px){.cover-main .big-m{display:none}}
.list-label.steps-h{font-weight:700;margin:28px 0 10px}
.steplist{list-style:none;margin:0 0 22px;padding:0;max-width:640px;display:flex;flex-direction:column;gap:8px;counter-reset:s}
.steplist li{counter-increment:s}
.step-link{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;border:2px solid var(--ink);border-radius:12px;background:var(--paper);padding:10px 14px;font-weight:700;font-size:17px;cursor:pointer;min-height:56px;line-height:1.3}
.step-link:hover{background:var(--sky-soft)}
.step-link .sn{width:32px;height:32px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;background:var(--paper)}
.step-link.done .sn{background:#1B7F3B;border-color:#1B7F3B;color:#fff}
.step-link .sn svg{width:18px;height:18px}
.step-link .you{font-size:13px;font-weight:700;background:var(--pink);color:var(--ink);border-radius:8px;padding:2px 10px;white-space:nowrap}
.step-link .tt{font-size:14px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.step-link.here{background:var(--rose-soft)}
.sheet .steplist{margin:0 0 12px;max-width:none}
.steplist .sx{font-weight:700;color:var(--ink-2);font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 0}
.cover ul.pages{list-style:none;margin:0 0 22px;padding:0;max-width:56ch;display:flex;flex-direction:column;gap:8px}
.page-link{width:100%;text-align:left;border:2px solid var(--ink);border-radius:12px;background:var(--paper);padding:12px 14px;font-weight:700;font-size:17px;cursor:pointer;min-height:48px}
.page-link:hover{background:var(--sky-soft)}
@media (prefers-reduced-motion:no-preference){.cover .sticky,.sticky.sway{animation:sway 5.6s ease-in-out infinite;transform-origin:50% 0}}
@keyframes sway{0%,100%{rotate:-1.4deg}30%{rotate:1.1deg}60%{rotate:-.4deg}80%{rotate:1.4deg}}

/* level done */
.done-tick{width:64px;height:64px}

/* jobs */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chip{border:2px solid var(--ink);border-radius:999px;background:var(--paper);padding:8px 14px;font-weight:700;font-size:15px;cursor:pointer;min-height:44px}
.chip[aria-pressed="true"]{background:var(--yellow)}
.job{border:2px solid var(--ink);border-radius:14px;padding:14px 16px;background:var(--paper)}
.job h3{margin:0 0 4px;font-size:18px;letter-spacing:-.01em}
.job p{margin:0 0 8px}
.story{font-size:15px;color:var(--ink-2);border-left:4px solid var(--rose);padding-left:10px;margin:0}
.feat{display:inline-block;font-size:12px;font-weight:700;border-radius:6px;padding:2px 8px;background:var(--sky-soft);margin-top:8px}
.jobs-wrap{margin:0 0 18px}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}

/* ---------- lesson beats (calm, straight, no scrapbook) ---------- */
.hook{margin:0 0 10px;font-size:20px;font-weight:700;line-height:1.3;max-width:56ch}
.outcomes{margin:0 0 10px}
.remember{margin:0 0 11px;font-size:17px;max-width:72ch;border-left:4px solid var(--sky);padding-left:12px;color:var(--ink)}
.remember .rem{color:var(--ink);background:var(--sky-soft);border-radius:5px;padding:0 6px;margin-right:2px}
/* The word box: clearly outlined, the term in bold, never mistaken for a prompt. */
.word{border:1.5px solid var(--ink);background:var(--yellow-soft);border-radius:10px;padding:10px 14px;margin:0 0 10px;font-size:17px;max-width:72ch}
.word .term{font-weight:700}
.word .eg{display:block;margin-top:6px;font-size:15px;color:#444}
.word.fold .eg{display:none}
.word.fold.open .eg{display:block}
.eg-tog{display:inline;margin-left:8px;border:0;background:none;padding:0;font-weight:700;font-size:15px;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer;min-height:0}
.words-group{margin:0 0 10px}
.words-group>.words-in{margin:0 0 10px}
.say.word.reading{box-shadow:0 0 0 6px var(--yellow);background:var(--yellow-soft)}
.sheet p.eg,.sheet .eg{color:#444}
.beat{margin:0 0 14px;padding:10px 0 0;border-top:1.5px solid var(--line)}
.how{margin:0 0 14px}
/* A step with a picture or video: on a wide screen the words are one zone and the picture is the other. */
@media (min-width:960px){
  .step-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1.2fr);gap:0 36px;align-items:start}
  .step-aside{position:sticky;top:16px}
  .step-aside .shot,.step-aside .pic{margin:0 0 14px}
  .step-grid .cards.two{grid-template-columns:minmax(0,1fr)}
}
/* Watch me and Do it with me: two tidy cards, side by side when there is room. */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0 0 14px;align-items:start}
@media (min-width:1000px){.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.beat.card{margin:0;padding:10px 12px 4px;border:2px solid var(--line);border-radius:12px;background:var(--paper)}
.card .para{font-size:16px;margin:0 0 8px}
.card .promptbox{font-size:16px;padding:10px 12px;margin:0 0 8px}
.card .row{margin:0 0 8px}
.card .pic,.card .shot{margin:0 0 8px}
.qa-list{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;max-width:72ch}
.qa{border:2px solid var(--ink);border-radius:12px;background:var(--paper)}
.qa-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:0;background:none;padding:12px 14px;min-height:56px;font-weight:700;font-size:18px;line-height:1.3;cursor:pointer;color:var(--ink)}
.qa-q::after{content:"+";font-size:26px;line-height:1;font-weight:700;color:var(--pink-text);flex:0 0 auto}
.qa-q[aria-expanded="true"]::after{content:"\2212"}
.qa-q:hover{background:var(--sky-soft);border-radius:10px}
.qa-a{padding:0 14px 6px}
.qa-a .para{margin:0 0 10px}
.another{margin:0 0 6px}
.another .quiet{padding:4px 0 2px;min-height:44px}
.more-row{margin:0 0 8px}
.reveal.more{margin:0 0 12px}
.beat-tag{display:inline-block;margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:6px;padding:2px 10px}
.cue{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--ink-2)}
.cue.cue-hear{font-size:17px;color:var(--ink);background:var(--sky-soft);border-radius:8px;padding:8px 12px;display:inline-block}
/* The paste practice box: nothing typed here goes anywhere. A green tick shows once something is pasted. */
.practice{margin:6px 0 16px;max-width:72ch}
.practice-label{display:block;font-family:var(--hand);font-size:28px;line-height:1;color:var(--pink-text);margin:0 0 6px}
.practice-box{display:block;font-family:inherit;width:100%;min-height:104px;padding:14px 16px;font-size:18px;line-height:1.4;color:var(--ink);background:var(--paper);border:3px dashed var(--ink-3);border-radius:14px;resize:none}
.practice-box::placeholder{color:var(--ink-3);opacity:1}
.practice-box:focus{border-style:solid;border-color:var(--pink);box-shadow:0 0 0 4px var(--yellow)}
.practice-box:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.practice.ok .practice-box{border-style:solid;border-color:#1B7F3B;background:#F2FBF5}
.practice-status{display:flex;align-items:center;gap:10px;margin:8px 0 0;min-height:36px;font-weight:700;font-size:18px;color:#14602C}
.practice-tick{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#1B7F3B;color:#fff}
.practice-tick svg{width:20px;height:20px}
@media (prefers-reduced-motion:no-preference){.practice-tick{animation:pop .35s ease-out}@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}}
/* A prompt box: for copying, never read word for word. Blue and pink-edged so it differs from a word box. */
.promptbox{border:2px solid var(--ink);border-left:8px solid var(--pink);border-radius:12px;background:var(--sky-soft);padding:12px 16px;font-size:17px;margin:0 0 7px;overflow-wrap:anywhere;white-space:pre-wrap;max-width:72ch}
.promptbox.pb-has-copy{position:relative}
.promptbox.pb-has-copy .pb-copy{float:right;position:sticky;top:12px;margin:0 0 8px 12px;z-index:1}
.promptbox.pb-has-copy .pb-copy .btn-o{background:var(--paper)}
.promptbox.long{font-size:17px}
@media (max-width:560px){.promptbox.pb-has-copy .pb-copy{float:none;position:static;margin:0 0 10px}.promptbox.pb-has-copy .pb-copy .btn-o{width:100%}}
.blank{background:var(--yellow);color:var(--ink);border-bottom:3px solid var(--pink);border-radius:3px;padding:0 4px;font-weight:700}
.choice{margin:0 0 8px}
.choice-tag{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--ink-2)}
.warmup{margin:22px 0 20px;border:2px solid var(--ink);border-radius:14px;padding:14px 16px;background:var(--sky-soft)}
.warmup h3{margin:0 0 4px;font-size:19px}
.wq{margin:0 0 14px}
.wq .q{font-size:18px}
.reveal{margin:10px 0 0;padding:12px 14px;border-radius:12px;background:var(--paper);border:2px solid var(--ink)}
.reveal:focus{outline:none}
.reveal .para{margin:0}
.reveal .list{margin-bottom:10px}
.reveal .can{margin:0;font-weight:700}
.reveal.replay .hint{margin:0 0 10px}
.replay-links{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.replay-links .page-link{font-size:15px;padding:8px 12px;min-height:44px}
.check-item{border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:14px 16px 12px;margin:0 0 14px}
.check-item .row{margin:0 0 8px}
.either{margin:0 0 4px;font-size:14px;color:var(--ink-2)}
.reveal-h{margin:0 0 6px;font-weight:700;font-size:18px}
.reveal .hide-it{margin-top:8px}
.check-item .q{margin:0 0 10px;font-size:19px}
.tag{display:inline-block;margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--rose-soft);border-radius:6px;padding:2px 8px}
.part-tag{margin:0 0 6px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.say.can.reading,.say.hook.reading{background:var(--yellow-soft)}

/* home: the parts are group labels over the levels */
.map{margin:18px 0 0}
.part{margin:0 0 18px}
.part-label{margin:0 0 8px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.map .levels{margin:0}
.ican-row{display:flex;align-items:center;gap:8px;padding:0 14px 8px 70px}
.ican-tog{font-size:15px;padding:4px 0 2px;min-height:44px}
.ican{padding:0 14px 12px 70px}
.ican-h{margin:0 0 4px;font-family:var(--hand);font-size:22px;line-height:1;color:var(--pink-text)}
.ican .list{margin:0;gap:4px}
.ican .list li{font-size:15px;grid-template-columns:22px minmax(0,1fr)}
.ican .list li svg{width:18px;height:18px;margin-top:3px}
@media (max-width:420px){.ican{padding-left:14px}.ican-row{padding-left:14px}}

/* glossary */
.gl-tools{margin:0 0 10px}
.gl-find{display:block;max-width:420px;margin:0 0 8px}
.gl-find label{display:block;font-weight:700;margin:0 0 4px}
.gl-az{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;padding:6px 0 6px;scrollbar-width:thin;position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1.5px solid var(--line)}
.gl-az a,.gl-az button{flex:0 0 auto;min-width:44px;min-height:44px;border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);font-weight:700;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);padding:0 8px}
.gl-az button:hover{background:var(--sky-soft)}
.gl-az button[disabled]{opacity:.35;cursor:default}
.gl-none{margin:10px 0}
.gl-group{margin:0 0 8px;scroll-margin-top:70px}
.gl-group .word{cursor:default}
.gl-letter{font-family:var(--hand);font-size:34px;line-height:1;color:var(--pink-text);margin:14px 0 8px}
.sheet p.eg{margin:8px 0 0;font-size:15px;color:#444}

/* sheet */
.veil{position:fixed;inset:0;background:rgba(22,22,22,.35);display:flex;align-items:flex-end;justify-content:center;padding:16px;z-index:20}
.sheet{background:var(--paper);border:2px solid var(--ink);border-radius:16px;max-width:560px;width:100%;max-height:min(80vh,640px);overflow:auto;padding:18px 18px 22px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
@media (min-width:700px){.veil{align-items:center}}
.sheet-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px}
.sheet-h h3{margin:0;font-size:20px;letter-spacing:-.02em}
.sheet p.def{margin:0;font-size:17px}
.x{border:2px solid var(--ink);background:var(--paper);border-radius:10px;min-width:44px;height:44px;font-weight:700;cursor:pointer}
.fix{border-top:1.5px solid var(--line);padding:12px 0 2px}
.fix b{display:block;margin:0 0 4px}
.fix p{margin:0;color:var(--ink-2)}
.sheet .sheet-btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.sheet.pv{max-width:600px;max-height:min(92vh,820px);padding:18px 20px 0}
.sheet.pv .sheet-h h3{font-size:24px;line-height:1.15}
.sheet.pv .pv-k{display:block;font-family:var(--hand);font-weight:700;font-size:26px;line-height:1;color:var(--pink-text);margin:0 0 2px;letter-spacing:0}
.pv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 10px}
.pv-time{font-size:15px;font-weight:700;color:var(--ink-2)}
.pv-pro{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--yellow);border:1.5px solid var(--ink);color:var(--ink)}
.pv-hook{margin:0 0 14px;font-size:17px;color:var(--ink-2);max-width:60ch}
.pv-h{margin:0 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pv-steps{list-style:none;margin:0 0 6px;padding:0;border-top:1.5px solid var(--line)}
.pv-steps li{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1.5px solid var(--line);font-size:16px;line-height:1.3}
.pv-steps .pv-n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.pv-steps li.done .pv-n{background:var(--ink);color:#fff;border-color:var(--ink)}
.pv-steps .pv-n svg{width:16px;height:16px}
/* the big button stays in view even when the list is long enough to scroll */
.pv-go{position:sticky;bottom:0;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--paper);padding:10px 0 16px;margin:0}
.pv-go .btn.big{width:100%;align-items:center;text-align:center}
@media (max-width:699px){.veil:has(.sheet.pv){padding:0}.sheet.pv{max-width:none;max-height:88vh;max-height:88dvh;border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:0}.pv-go{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}}
.sheet details.other{margin:12px 0 0;border-top:1.5px solid var(--line);padding-top:8px}
.sheet details.other summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:10px;padding:12px 18px;font-weight:700;z-index:30;max-width:calc(100% - 32px)}

/* settings */
.set-group{margin:0 0 24px}
.set-group h2,.set-group h3{font-size:15px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px;text-wrap:wrap}
.seg{display:inline-flex;flex-wrap:wrap;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper)}
.seg button{border:0;background:transparent;padding:9px 14px;font-weight:700;font-size:15px;cursor:pointer;min-height:44px}
.seg button+button{border-left:2px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* login */
.login{max-width:560px;padding-top:7vh}
.cover-card{border:2px solid var(--ink);border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.10)}
.eyebrow{font-family:var(--hand);font-size:26px;color:var(--pink-text);transform:rotate(-2deg);display:inline-block;margin:0 0 4px}
.login-h{font-size:clamp(36px,8vw,54px);line-height:.95;letter-spacing:-.04em;margin:0 0 14px}
.login-msg{font-weight:700;background:var(--rose-soft);border-radius:10px;padding:10px 14px;margin:0 0 16px}
.login-form{max-width:440px}
.field{width:100%;border:2px solid var(--ink);border-radius:10px;padding:12px 14px;font-size:17px;background:#fff;min-height:48px}
.login-buy{margin:18px 0 0}
.login-foot{margin:22px 0 0;font-size:14px;color:var(--ink-2)}
/* two ways in, and the password box with Show / Hide (sign-in, reset, Settings) */
.way-tabs{margin:0 0 18px}
.way+.way{margin-top:26px;padding-top:22px;border-top:1.5px solid var(--line)}
.way[hidden]+.way,.way+.way[hidden]{margin-top:0;padding-top:0;border-top:0}
.pw-wrap{display:flex;align-items:stretch;gap:8px}
.pw-wrap .field{flex:1 1 auto;min-width:0}
.pw-toggle{flex:0 0 auto;min-width:76px;justify-content:center;min-height:48px}
.login-form .pw-wrap{margin:0 0 6px}
.login-form #email{margin:0 0 14px}
.way[data-way="email"] .actions{margin-top:18px}
.login-forgot{margin:14px 0 0;font-size:15px}
.login-forgot a{color:var(--ink);font-weight:700;text-decoration-thickness:2px;text-underline-offset:4px}
.login-forgot a:hover{text-decoration-color:var(--pink)}
details.login-forgot summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
details.login-forgot p{margin:4px 0 0;background:var(--yellow-soft);border-radius:10px;padding:10px 14px}
/* Settings: sign in with email next time */
.acct-l{display:block;font-weight:700;font-size:16px;margin:0 0 6px}
.acct-form .field{margin:0 0 14px}
.acct-form .pw-wrap{margin:0 0 6px}
.acct-form .pw-wrap .field{margin:0}
.acct-state{font-size:17px;margin:0 0 10px}
.acct-flash{background:var(--mint);border-radius:10px;padding:10px 14px;margin:0 0 14px}
.acct-more{border-top:1.5px solid var(--line);padding:0 0 4px;max-width:440px}
.acct-more:last-of-type{border-bottom:1.5px solid var(--line)}
.acct-more summary{cursor:pointer;font-weight:700;min-height:48px;display:flex;align-items:center}
.acct-more form{padding:4px 0 10px}
.acct-foot{margin:12px 0 0}

/* ---------- Questions & wins (calm: likes are a count, never a score, and no red) ---------- */
.appfoot button{white-space:nowrap}
.badge{display:inline-block;font-size:12px;font-weight:700;border-radius:6px;padding:1px 8px;line-height:1.5;background:var(--line);color:var(--ink);white-space:nowrap}
.badge-gabi{background:var(--rose)}
.badge-pin{background:var(--yellow)}
.badge-ans{background:var(--mint)}
.badge-rep{background:var(--sky)}
.badge-hide{background:var(--line)}
.badge-new{background:var(--yellow-soft);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* the page: privacy box and about card in a side column on wide screens, stacked on a phone */
.cm-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.cm-main{min-width:0}
@media (min-width:980px){
  .cm-layout{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto 1fr;column-gap:28px}
  .cm-main{grid-column:1;grid-row:1/span 2}
  .cm-privacy{grid-column:2;grid-row:1}
  .cm-about{grid-column:2;grid-row:2}
}
.cm-privacy{border:2px solid var(--ink);border-left:8px solid var(--pink);border-radius:12px;background:var(--sky-soft);padding:10px 14px;margin:0 0 18px}
.cm-privacy .tag{margin:0 0 4px}
.cm-privacy p{margin:0;font-size:17px;font-weight:700}
.cm-about{border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:14px 16px;margin:18px 0 0;box-shadow:4px 4px 0 var(--rose)}
@media (min-width:980px){.cm-about{margin-top:0}}
.cm-about h2{font-family:var(--hand);font-size:28px;line-height:1;margin:0 0 8px;color:var(--pink-text);letter-spacing:0}
.cm-about p{margin:0 0 8px;font-size:16px}
.cm-about p:last-child{margin:0}
label.q{display:block;margin:0 0 8px}
textarea.field{font-family:inherit;font-size:17px;color:var(--ink)}
select.field{font-family:inherit;font-size:17px;color:var(--ink)}
.cm-flash{margin:0 0 10px}
.cm-flash:empty{display:none}

/* small round initials (a coloured circle, never a photo of a person); Gabi has her own picture */
.cm-av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;color:var(--ink);background:var(--sky);overflow:hidden;line-height:1}
.cm-av-c0{background:var(--rose)}
.cm-av-c1{background:var(--yellow)}
.cm-av-c2{background:var(--sky)}
.cm-av-c3{background:var(--mint)}
.cm-av-c4{background:#E3D4FF}
.cm-av-me{background:var(--paper);border-style:dashed}
.cm-av-gabi{background:var(--rose)}
.cm-av-gabi img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.cm-av-s{width:24px;height:24px;font-size:12px;border-width:1.5px;margin-left:-6px;background-clip:padding-box}
.cm-av-s:first-child{margin-left:0}
.cm-av{position:relative}
.cm-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cm-av-photo .cm-ini{visibility:hidden}
.cm-av-xl{width:88px;height:88px;font-size:36px;border-width:3px}

/* the profile card: a name, and a photo if they like. Used in the write box, the comment box, a reply box and Settings. */
.cm-prof{position:relative;border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:22px 16px 12px;box-shadow:4px 4px 0 var(--rose);margin:12px 0 6px}
.cm-prof .tape{top:-12px;width:84px;height:22px;margin-left:-42px}
.cm-prof-h{font-family:var(--hand);font-size:32px;line-height:1;margin:0 0 6px;color:var(--pink-text);letter-spacing:0}
.cm-prof .hint{margin:0 0 12px}
.cm-prof .cm-go{margin-top:10px}
.cm-prof-slot:empty{display:none}
.cm-prof-slot{margin:0 0 10px}
.prof-field{margin:0 0 14px}
.prof-field .cm-lab{margin-top:0}
.cm-lab-note{font-weight:500;color:var(--ink-2)}
.prof-photo{display:flex;align-items:center;gap:14px;border:2px dashed var(--ink);border-radius:14px;padding:12px;background:var(--sky-soft)}
.prof-photo.drag{background:var(--yellow-soft);border-style:solid}
.prof-photo-main{min-width:0;flex:1 1 auto}
.prof-btns{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.prof-note{margin:8px 0 0;font-size:14px}
.prof-pmsg{margin:6px 0 0;min-height:0}
.prof-pmsg:empty{display:none}
@media (max-width:420px){.prof-photo{flex-direction:column;align-items:flex-start}}

/* the write box: closed it is one line, open it is title, words, photos, category */
.cm-compose{margin:0 0 14px}
.cm-write{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:8px 14px 8px 10px;min-height:60px;cursor:pointer;font-size:18px;color:var(--ink-2);box-shadow:3px 3px 0 var(--line)}
.cm-write:hover{background:var(--sky-soft)}
.cm-write-t{min-width:0;overflow-wrap:anywhere}
.cm-open-form{border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:14px;box-shadow:4px 4px 0 var(--yellow)}
.cm-as{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16px}
.cm-as>span:last-child{min-width:0;overflow-wrap:anywhere}
.cm-link{padding:0;min-height:0;display:inline;font-size:15px}
.cm-title-in{display:block;width:100%;border:2px solid var(--ink);border-radius:10px;padding:10px 14px;font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px;min-height:52px;background:#fff;color:var(--ink)}
.cm-title-in::placeholder,.cm-text::placeholder{color:var(--ink-3);font-weight:500}
.cm-text{display:block;resize:vertical;line-height:1.45;margin:0 0 6px}
.cm-name-in{max-width:420px;width:100%}
.cm-open-form .hint{margin:0 0 12px}
.cm-lab{display:block;font-weight:700;margin:8px 0 6px}
.cm-lab span{font-weight:500;color:var(--ink-2)}
.cm-select{max-width:100%}
.cm-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 10px}
.cm-tools .cm-select{width:auto;min-width:0;flex:1 1 150px;max-width:260px}
.cm-icon-btn{gap:8px}
.cm-icon-btn svg{width:20px;height:20px;flex:0 0 auto}
.cm-go{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:flex-end;margin-top:6px}
.cm-go .btn{min-height:48px;padding:10px 24px}
.cm-photo-box{margin:0 0 6px}
.cm-photo-box:empty{display:none}
.cm-thumbs{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cm-thumbs:empty{display:none}
.cm-thumbs li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:start;border:2px solid var(--line);border-radius:12px;padding:8px}
.cm-thumbs img{width:76px;height:76px;object-fit:cover;border:2px solid var(--ink);border-radius:8px;background:var(--sky-soft)}
.cm-thumbs label{display:block;font-size:14px;font-weight:700;margin:0 0 4px}
.cm-thumbs label span{font-weight:500;color:var(--ink-2)}
.cm-thumbs .field{min-height:44px;padding:8px 10px;font-size:16px}
.cm-thumbs .quiet{margin-top:2px}
.cm-pmsg{margin:6px 0 0;min-height:0}
.cm-pmsg:empty{display:none}
.cm-sug{border:2px solid var(--ink);border-radius:14px;background:var(--yellow-soft);padding:12px 14px;margin:14px 0 14px}
.cm-sug:focus{outline:none}
.cm-sug-h{margin:0 0 8px;font-weight:700}
.cm-sug-item{border-top:1.5px solid var(--line);padding:10px 0 8px}
.cm-sug-item:first-of-type{border-top:0}
.cm-snip,.cm-ans{margin:0 0 8px;overflow-wrap:anywhere}
.cm-ans{color:var(--ink-2);font-size:15px}

/* category chips, and the filter and sort panel */
.cm-bar{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin:0 0 14px}
.cm-bar .chips{flex:1 1 220px;margin:0;min-width:0}
.cm-filter-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:700;font-size:15px;cursor:pointer;margin-left:auto}
.cm-filter-btn svg{width:20px;height:20px}
.cm-filter-btn.on{background:var(--yellow)}
.cm-filter-btn[aria-expanded="true"]{background:var(--ink);color:#fff}
.cm-filter{flex:1 0 100%;border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:12px 16px 8px;box-shadow:4px 4px 0 var(--line)}
@media (min-width:640px){.cm-filter{position:absolute;right:0;top:52px;z-index:6;flex:none;width:min(460px,100%);box-shadow:0 12px 30px rgba(0,0,0,.2)}}
.cm-filter-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
@media (max-width:420px){.cm-filter-cols{grid-template-columns:minmax(0,1fr)}}
.cm-filter fieldset{border:0;margin:0;padding:0;min-width:0}
.cm-filter legend{font-weight:700;font-size:17px;padding:0;margin:0 0 4px}
.cm-radio{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:16px}
.cm-radio input{width:22px;height:22px;accent-color:var(--ink);flex:0 0 auto;margin:0}
.cm-filter-done{margin:4px 0 6px}

/* the feed */
.cm-list{display:flex;flex-direction:column;gap:14px}
.cm-empty{margin:0}
.cm-card{border:2px solid var(--ink);border-radius:14px;background:var(--paper);overflow:hidden;cursor:pointer;box-shadow:3px 3px 0 var(--line)}
.cm-card:hover{box-shadow:3px 3px 0 var(--rose)}
.cm-pinned{border-color:var(--ink);box-shadow:3px 3px 0 var(--yellow)}
.cm-pinbar{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--yellow);border-bottom:2px solid var(--ink);padding:0 6px 0 14px;min-height:44px;font-weight:700;font-size:14px;cursor:default}
.cm-pinbar span{display:inline-flex;align-items:center;gap:8px}
.cm-pinbar svg{width:18px;height:18px}
.cm-pinbar .quiet{border-bottom:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;padding:0 8px;font-size:14px}
.cm-card.cm-collapsed .cm-cbody{display:none}
.cm-card.cm-collapsed .cm-ctitle-solo{display:block}
.cm-ctitle-solo{display:none;margin:0;padding:8px 14px 10px;font-size:17px;font-weight:700;overflow-wrap:anywhere}
.cm-cbody{padding:12px 14px 6px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}
.cm-cmain{min-width:0}
.cm-meta{display:flex;align-items:center;gap:10px;margin:0 0 8px;min-width:0}
.cm-who{display:flex;flex-direction:column;min-width:0}
.cm-name-line{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.cm-name{font-size:16px;overflow-wrap:anywhere}
.cm-sub{font-size:13px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:0 6px}
.cm-sub b{color:var(--ink)}
.cm-tag{font-size:12px;font-weight:700;background:var(--sky-soft);border-radius:6px;padding:0 8px;line-height:1.6}
.cm-ctitle{margin:0 0 4px;font-size:20px;line-height:1.2;letter-spacing:-.02em;font-weight:700;display:flex;align-items:flex-start;gap:8px}
.cm-ctitle .cm-opener{border:0;background:none;padding:6px 0;margin:0;font:inherit;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;overflow-wrap:anywhere;min-height:44px;line-height:1.2;display:block;flex:1 1 auto;min-width:0}
.cm-ctitle .cm-opener:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--pink)}
.cm-dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--pink);border:2px solid var(--ink);margin-top:15px}
.cm-preview{margin:0 0 4px;font-size:16px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;max-width:72ch}
.cm-seemore{border:0;background:none;padding:0 0 6px;font-weight:700;font-size:15px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer;min-height:44px;color:var(--ink)}
.cm-pol{position:relative;background:#fff;padding:4px 4px 12px;box-shadow:0 4px 12px rgba(0,0,0,.2);transform:rotate(2.5deg);width:116px;margin:8px 4px 8px 0}
.cm-pol img{display:block;width:100%;height:92px;object-fit:cover;background:var(--sky-soft)}
.cm-pol .tape{width:46px;height:16px;margin-left:-23px;top:-9px}
.cm-pol-n{position:absolute;right:6px;bottom:-1px;font-size:11px;font-weight:700;background:var(--ink);color:#fff;border-radius:6px;padding:0 6px}
.cm-cfoot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;border-top:1.5px solid var(--line);margin:6px -14px 0;padding:6px 14px 8px}
.cm-count{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0 4px;min-height:44px;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer}
.cm-count svg{width:20px;height:20px}
.cm-faces{display:inline-flex;align-items:center}
.cm-last{font-size:14px;color:var(--ink-2)}
.cm-last.cm-newc{color:var(--pink-text);font-weight:700}
.cm-like{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:4px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:700;font-size:15px;line-height:1;cursor:pointer}
.cm-like svg{width:20px;height:20px;flex:0 0 auto}
.cm-like:hover{background:var(--sky-soft)}
.cm-like[aria-pressed="true"]{background:var(--ink);color:#fff}
.cm-like-n{min-width:1ch;font-variant-numeric:tabular-nums}
.cm-like-comment{font-size:14px;padding:2px 12px}
.cm-cfoot .cm-like{margin-right:2px}
.cm-pv-likes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:6px 0 10px}
.cm-edited{font-size:13px;color:var(--ink-2);font-style:italic}
.cm-edit{margin:0 0 10px}
.cm-edit .cm-title-in{margin:0 0 8px}
.cm-edit .hint{margin:0 0 10px}
.cm-edit .cm-select{margin:0 0 8px}
@media (max-width:480px){.cm-pol{width:84px;padding:3px 3px 10px}.cm-pol img{height:68px}.cm-ctitle{font-size:18px}}

/* one post, open */
.cm-back{margin:0 0 12px}
.cm-pv{border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:14px 14px 4px}
.cm-pv-top{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px}
.cm-pv-top .cm-meta{flex:1 1 auto;margin:0}
.cm-pv-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cm-watch{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap}
.cm-watch svg{width:20px;height:20px}
.cm-watch[aria-pressed="true"]{background:var(--ink);color:#fff}
@media (max-width:420px){.cm-watch span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cm-watch{padding:8px 11px}}
.cm-pv h2{font-size:clamp(24px,5vw,30px);margin:0 0 8px;overflow-wrap:anywhere}
.cm-body p{margin:0 0 10px;font-size:17px;max-width:72ch;overflow-wrap:anywhere}
.cm-hidden{margin:0 0 8px;font-size:15px;font-weight:700;background:var(--sky-soft);border-radius:8px;padding:6px 10px}
.cm-photos{list-style:none;margin:6px 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:14px 16px}
.cm-photos li{position:relative;background:#fff;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.2);max-width:100%}
.cm-photos li:nth-child(odd){transform:rotate(-1deg)}
.cm-photos li:nth-child(even){transform:rotate(1deg)}
.cm-photos img{display:block;max-width:100%;width:auto;height:auto;max-height:340px;cursor:zoom-in}
.cm-photos .cm-photo-s{max-height:200px}
.cm-pv-count{display:flex;align-items:center;gap:8px;margin:8px -14px 0;padding:10px 14px 4px;border-top:1.5px solid var(--line);font-weight:700;font-size:15px}
.cm-pv-count svg{width:20px;height:20px}
.cm-comments{list-style:none;margin:0;padding:0}
.cm-comment{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 10px;padding:10px 0 0}
.cm-comment .cm-av{margin-top:2px}
.cm-bubble{position:relative;background:#F4F6FA;border:1.5px solid var(--line);border-radius:16px;padding:10px 14px 4px;min-width:0}
.cm-gabi .cm-bubble{background:var(--rose-soft);border-color:var(--pink)}
.cm-bhead{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding-right:48px;margin:0 0 4px}
.cm-bhead time,.cm-bhead .cm-date{font-size:13px;color:var(--ink-2)}
.cm-bubble .cm-menu-wrap{position:absolute;right:4px;top:2px}
.cm-cactions{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;padding:4px 6px 0}
.cm-cactions .quiet{border-bottom-width:2px;padding:6px 0 2px;font-size:15px}
.cm-replies{list-style:none;grid-column:2;margin:0;padding:0 0 0 4px}
.cm-replies .cm-comment{grid-template-columns:32px minmax(0,1fr);padding-top:8px}
.cm-replies .cm-av{width:32px;height:32px;font-size:14px}
.cm-rbox{grid-column:2;margin:4px 0 6px}
.cm-cbox .msg,.cm-rbox .msg{min-height:0;margin:0 0 6px}
.cm-rbox textarea,.cm-cbox textarea{display:block;margin:0 0 6px;min-height:72px}
.cm-cbox{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 10px;padding:14px 0 12px;border-top:1.5px solid var(--line);margin-top:10px}
.cm-cbox-main{min-width:0}
.cm-cbox .btn,.cm-rbox .btn-o{margin-top:4px}
.cm-menu-wrap{position:relative;display:inline-block}
.cm-more{width:44px;height:44px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.cm-bubble .cm-more{border-color:transparent;background:transparent;border-radius:50%}
.cm-bubble .cm-more:hover{background:var(--line)}
.cm-more svg{width:22px;height:22px}
.cm-menu{position:absolute;right:0;top:48px;z-index:8;min-width:190px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);padding:4px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.cm-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 12px;min-height:44px;font-weight:700;font-size:16px;cursor:pointer;border-radius:8px;color:var(--ink)}
.cm-menu button:hover{background:var(--sky-soft)}
.cm-menu button:disabled{cursor:default;color:var(--ink-2)}
.cm-hidden-in{margin:0 0 6px}

/* a "new" dot on the Questions and wins link: a dot only, never a number */
.nav-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--pink);border:2px solid var(--ink);flex:0 0 auto;margin-left:-2px}
.cm-nick-row{margin:10px 0 6px}
@media (max-width:420px){.appfoot{gap:2px 14px}}

/* ---------- the Gabi page (/admin) ---------- */
.ad{max-width:820px}
.ad-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.ad-top h1{margin:0;font-size:clamp(28px,5vw,38px);letter-spacing:-.03em}
.ad-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ad-inline{display:inline-block;margin:0}
.ad-sec{margin:0 0 26px}
.ad-sec h2{font-size:20px;margin:0 0 10px;letter-spacing:-.01em}
.ad-sec h2 small{font-size:14px;color:var(--ink-2);font-weight:500}
.ad-card{border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:12px 14px;margin:0 0 14px;overflow-wrap:anywhere}
.ad-muted{background:var(--line)}
.ad-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 6px;font-size:14px}
.ad-head b{font-size:16px}
.ad-who{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--ink-2)}
.ad-text p{margin:0 0 8px;font-size:16px}
.ad-reply{border-left:4px solid var(--line);padding:6px 0 4px 12px;margin:8px 0}
.ad-gabi{border-left-color:var(--pink);background:var(--rose-soft)}
.ad-reply-form{margin:10px 0}
.ad-reply-form textarea{display:block;margin:0 0 8px}
.ad-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 10px;margin:8px 0 0}
.ad-actions .btn-o{min-height:40px;padding:6px 12px;font-size:14px}
.ad-confirm summary{cursor:pointer;font-weight:700;font-size:14px;padding:8px 4px;color:var(--ink-2);min-height:40px}
.ad-title{font-size:19px;letter-spacing:-.01em;margin:4px 0 6px}
.ad-reply-2{margin-left:22px;border-left-style:dotted}
.badge-photo{background:var(--sky);box-shadow:inset 0 0 0 1.5px var(--ink)}
.badge-edited{background:var(--yellow)}
.ad-mini{width:32px;height:32px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;background:var(--sky-soft)}
.ad-mini-hid{opacity:.5;border-style:dashed}
.ad-av{display:flex;align-items:flex-start;gap:14px}
.ad-avatar{width:96px;height:96px;flex:0 0 auto;border-radius:50%;border:2px solid var(--ink);object-fit:cover;background:var(--sky-soft)}
.ad-av-main{min-width:0;flex:1 1 auto}
.ad-photos{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 8px}
.ad-photo-link{display:block}
.ad-photo{display:block;max-width:100%;width:auto;height:auto;max-height:260px;border:2px solid var(--ink);border-radius:8px;background:#fff}
.ad-photo-field{margin:0 0 8px}
.ad-photo-field label{font-weight:700;font-size:14px}
.ad-confirm[open]{border:2px solid var(--ink);border-radius:10px;padding:4px 10px 10px}


/* ---------- Continue, toolkit tiles, the card, the pack, the playbooks, tables, the script ---------- */
/* the one big button on home */
.btn.big{flex-direction:column;align-items:flex-start;gap:2px;padding:16px 26px;font-size:20px;min-height:64px;text-align:left}
.btn.big .big-l{display:block;line-height:1.2}
.btn.big .big-s{display:block;font-size:16px;font-weight:500;opacity:.88;line-height:1.3}
@media (max-width:560px){.btn.big{width:100%;align-items:center;text-align:center}}

.toolkit{margin:22px 0 0}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.tile{width:100%;height:100%;border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:12px 14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:64px}
.tile:hover{background:var(--sky-soft)}
.tile b{font-size:16px;line-height:1.25}
.tile span{font-size:14px;color:var(--ink-2)}

/* What I can now do: grid paper, an outlined card, a taped corner */
.cardwrap{margin:18px 0 8px}
.can-card{position:relative;max-width:560px;border:2px solid var(--ink);border-radius:16px;padding:22px 22px 14px;background-color:#fff;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;box-shadow:0 8px 22px rgba(0,0,0,.10)}
.can-card .tape{top:-12px;left:auto;right:28px;margin-left:0;width:84px;height:24px;background:rgba(189,224,254,.85);transform:rotate(3deg)}
.cc-brand{margin:0 0 2px;font-family:var(--hand);font-size:24px;line-height:1;color:var(--pink-text);transform:rotate(-2deg);transform-origin:0 50%}
.cc-h{margin:0 0 6px;font-size:clamp(28px,6vw,38px);line-height:1.05;letter-spacing:-.035em}
.cc-soft{white-space:nowrap;font-family:var(--hand);font-size:.8em;color:var(--pink-text);letter-spacing:0;margin-left:4px}
.cc-who{margin:0 0 14px;color:var(--ink-2);font-size:15px;font-weight:500}
.cc-list{margin:0 0 8px}
.cc-empty{margin:8px 0 10px}
.cardwrap .actions{margin-top:12px}
.btn-o:disabled{opacity:.5;cursor:default}
button[data-act="copy"]{min-width:190px;justify-content:center;gap:8px}
button[data-act="copy"] svg{width:20px;height:20px;flex:0 0 auto}
button[data-act="copy"].copied{border-color:#1B7F3B;color:#14602C;background:#F2FBF5}
button[data-act="copy"].copy-manual{border-color:var(--pink-text);background:var(--yellow-soft)}
.done-links{margin:4px 0 18px}

/* the pack */
.jump ul{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.jump .chip{width:100%;font-size:15px;border-width:1px;border-radius:12px;text-align:left}
.pk-sec{margin:26px 0 0;scroll-margin-top:12px}
.pk-sec:focus{outline:none}
.pk-sec h2{font-size:clamp(22px,4vw,28px)}
.pk-level{border:2px solid var(--ink);border-radius:14px;background:var(--paper);margin:0 0 10px;padding:0 14px}
.pk-level summary{cursor:pointer;font-weight:700;padding:12px 0;min-height:48px;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center}
.pk-level summary span{font-size:13px;font-weight:700;background:var(--sky-soft);border-radius:6px;padding:0 8px}
.pk-level[open] summary{border-bottom:1.5px solid var(--line);margin-bottom:10px}
.pk-item{margin:0 0 14px}
.pk-t{margin:0 0 4px;font-size:17px;letter-spacing:-.01em}
.pk-note{margin:0 0 8px}
.week{border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:12px 16px 4px;margin:0 0 14px}
.week h3{margin:0 0 4px;font-size:20px;letter-spacing:-.02em}
.week .goal{margin:0 0 10px}
.week .tasks{margin:0 0 10px}
.week .can{margin:0 0 10px;font-weight:700;background:var(--yellow-soft);border-radius:8px;padding:6px 10px;display:block}

/* the playbooks */
.pb-who{margin:0 0 4px}
.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.clamp-tog{margin:0 0 12px}
.pb-chips{margin:0 0 14px}
.pb-chips .chip{border-width:1px;font-size:15px}
.pb-job{display:flex;flex-direction:column;gap:6px}
.pb-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 10px}
.pb-top h3{margin:0;flex:1 1 220px}
.pb-top .where{font-size:12px;font-weight:700;border-radius:6px;padding:2px 8px;background:var(--sky-soft);white-space:nowrap;border:1.5px solid var(--ink)}
.pb-top .where-cowork{background:var(--rose-soft)}
.pb-top .where-code{background:var(--yellow-soft)}
.pb-job .promptbox{margin:0 0 6px}
.promptbox.example{background:var(--paper);border-left-color:var(--ink);margin-bottom:14px}
.pb-job .row{margin:0}
.pb-start{margin:18px 0 0;border:2px solid var(--ink);border-radius:14px;background:var(--yellow-soft);padding:12px 16px 6px}
.pb-start h3{margin:0 0 8px;font-size:19px}

/* a table that stacks into cards on a phone (the roles keep the table meaning for a screen reader) */
.tbl-wrap{margin:0 0 14px;max-width:100%}
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--paper);font-size:16px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;vertical-align:top;overflow-wrap:break-word;word-break:normal;hyphens:manual;border-bottom:1.5px solid var(--line)}
.tbl td{min-width:9em}
.tbl thead th{background:var(--ink);color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.tbl tbody tr:last-child>*{border-bottom:0}
.tbl tbody th{font-weight:700;white-space:normal;min-width:8em;width:26%}
.tbl tr.reading>*{background:var(--yellow-soft)}
@media (max-width:959px){
  .tbl,.tbl thead,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block}
  .tbl{border:0;background:transparent}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl tbody tr{border:2px solid var(--ink);border-radius:12px;margin:0 0 10px;padding:8px 12px 6px;background:var(--paper)}
  .tbl tbody tr.reading{background:var(--yellow-soft);box-shadow:0 0 0 5px var(--yellow-soft)}
  .tbl tbody th{font-size:18px;white-space:normal;padding:0 0 4px;border:0}
  .tbl td{padding:4px 0 6px;border:0}
  .tbl td{min-width:0}
  .tbl td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
}

/* the voice script: a thin strip under the player, and the words when asked for */
.script{padding:14px 16px 6px;background:var(--sky-soft);border:2px solid var(--ink);border-radius:12px;margin:0 0 14px;max-height:min(60vh,520px);overflow:auto}
@media (max-width:719px){.script{max-height:calc(100dvh - var(--dock-h) - 200px);max-height:calc(100svh - var(--dock-h) - 200px)}}
.script-p{margin:0 0 10px;font-size:17px;max-width:72ch}
.script-p.reading{background:var(--yellow-soft);box-shadow:0 0 0 6px var(--yellow-soft)}

/* ---------- the listen bar: fixed to the bottom of every page that can be read aloud ----------
   About 64px tall: one row of controls (Back 10 seconds, Listen, Start again, Speed), the part count on the left and the
   next step on the right. Pink is for Listen only. Every control is at least 44px, with words as well as icons. */
:root{--dock-h:72px;--dock-btn:52px}
html.has-dock{scroll-padding-bottom:calc(var(--dock-h) + 12px)}
html.has-dock body{padding-bottom:var(--dock-h)}
.listen{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.28);box-shadow:0 -6px 18px rgba(0,0,0,.18);
  padding:6px max(12px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.listen-wrap{position:relative;max-width:calc(var(--shell-w) - 2 * var(--shell-pad));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
.listen-info{display:flex;flex-direction:column;gap:6px;min-width:0;justify-content:center}
.listen-count{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1}
/* The parts: a slim bar straight above Listen, the same width as it, on every screen size. Each part is a real button with a
   44px hit area (the visible bar is 8px). Done parts are white, the part on (or the one you left) is pink, hover grows it. */
.seg-wrap{position:relative;width:0;min-width:100%;margin:0 0 2px}
.listen-seg{display:flex;gap:0;height:44px}
.listen-seg .pseg{position:relative;flex:1 1 0;min-width:0;height:44px;padding:0 1.5px;margin:0;border:0;background:none;color:inherit;cursor:pointer;display:flex;align-items:flex-end;justify-content:stretch}
.listen-seg .seg-bar{display:block;width:100%;height:8px;margin:0 0 9px;background:rgba(255,255,255,.35);border-radius:4px;transform-origin:50% 100%;transition:transform .12s ease,background-color .12s ease}
.listen-seg .pseg.done .seg-bar{background:#fff}
.listen-seg .pseg.now .seg-bar,.listen-seg .pseg.saved .seg-bar{background:var(--pink)}
.listen-seg .pseg:hover .seg-bar,.listen-seg .pseg:focus-visible .seg-bar{transform:scaleY(1.5)}
.listen-seg .pseg:hover:not(.done):not(.now) .seg-bar{background:rgba(255,255,255,.7)}
.listen-seg .seg-here{display:none;position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:max-content;white-space:nowrap;background:var(--pink);color:var(--ink);font-size:12px;font-weight:700;line-height:1;padding:3px 8px;border-radius:999px;pointer-events:none}
.listen-seg .pseg:first-child .seg-here{left:1.5px;transform:none}
.listen-seg .pseg:last-child .seg-here{left:auto;right:1.5px;transform:none}
.listen-seg .pseg.saved .seg-here{display:block}
.listen-seg .pseg:focus-visible{outline-offset:-2px}
.seg-tip{position:absolute;bottom:calc(100% + 4px);left:0;z-index:3;width:max-content;max-width:min(320px,calc(100vw - 16px));background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:6px 10px;font-size:14px;font-weight:700;line-height:1.3;box-shadow:0 6px 14px rgba(0,0,0,.25);pointer-events:none}
.listen-row{display:flex;gap:8px;align-items:flex-end;justify-content:center;min-width:0}
.listen-end{display:flex;justify-content:flex-end;min-width:0}
.play-wrap{position:relative;display:flex;flex-direction:column;align-items:stretch;flex:0 1 auto;min-width:0}
.listen .play{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--dock-btn);padding:6px 28px;width:100%;max-width:360px;min-width:min(240px,100%);border:0;border-radius:999px;
  background:var(--pink);color:var(--ink);font-weight:700;font-size:18px;line-height:1.15;text-align:left;cursor:pointer}
.listen .play svg{flex:0 0 auto;width:26px;height:26px}
.listen .play[aria-pressed="true"]{background:var(--yellow)}
.listen .play .pl-s{display:none}
.listen .lbtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:var(--dock-btn);padding:6px 14px;border:2px solid #fff;border-radius:999px;background:transparent;color:#fff;cursor:pointer;font-weight:700;font-size:15px;line-height:1.15}
.listen .lbtn svg{flex:0 0 auto;width:26px;height:26px}
.listen .lbtn-t{display:inline}
.listen .lbtn-t .lt-s{display:none}
.listen .lbtn:hover{background:rgba(255,255,255,.14)}
.listen .speed{flex:0 0 auto;min-width:92px;min-height:var(--dock-btn);padding:4px 12px;border:2px solid #fff;border-radius:999px;background:transparent;color:#fff;cursor:pointer;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;line-height:1.1}
.listen .speed .sp-t{display:flex;flex-direction:column;align-items:center;gap:1px}
.listen .speed small{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.listen .speed .sp-v{font-size:16px;font-weight:700}
.listen .speed svg{width:14px;height:14px;flex:0 0 auto}
.listen .speed:hover{background:rgba(255,255,255,.14)}
.listen .dock-next{display:inline-flex;align-items:center;gap:8px;min-height:var(--dock-btn);padding:6px 18px;border:2px solid #fff;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;font-size:16px;cursor:pointer;white-space:nowrap}
.listen .dock-next svg{width:18px;height:18px}
.listen .dock-next:hover{background:var(--sky-soft)}
.listen :focus-visible{outline:3px solid #fff;outline-offset:3px}
/* the first-visit tip: one short line above Listen, pointing at it. It goes after a few seconds, on a scroll, or at once on a tap. */
.listen-hint{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);margin:0;width:max-content;max-width:min(320px,calc(100vw - 24px));display:flex;align-items:center;gap:4px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:6px 4px 6px 14px;font-weight:700;font-size:16px;line-height:1.3;box-shadow:0 6px 14px rgba(0,0,0,.18);pointer-events:none;z-index:2}
.listen-hint button{pointer-events:auto;flex:0 0 auto;min-width:44px;min-height:44px;margin:-8px 0;border:0;background:none;font-size:24px;line-height:1;font-weight:700;cursor:pointer;color:var(--ink)}
.listen-hint::after{content:"";position:absolute;left:50%;top:100%;margin-left:-7px;width:14px;height:14px;background:var(--yellow);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-8px) rotate(45deg)}
.listen.nudge .play{box-shadow:0 0 0 3px #fff}
@media (prefers-reduced-motion:no-preference){
  .listen.nudge .play{animation:listen-pulse 1.8s ease-out 3}
  .listen-seg .pseg.saved .seg-bar{animation:seg-pulse .9s ease-in-out 3}
  @keyframes seg-pulse{0%,100%{transform:scaleY(1);box-shadow:0 0 0 0 rgba(255,46,147,0)}50%{transform:scaleY(2);box-shadow:0 0 0 4px rgba(255,46,147,.45)}}
  @keyframes listen-pulse{0%{box-shadow:0 0 0 0 rgba(255,46,147,.85)}70%{box-shadow:0 0 0 8px rgba(255,46,147,0)}100%{box-shadow:0 0 0 0 rgba(255,46,147,0)}}
}
/* a tablet or a phone: the info column goes, the controls take the row */
@media (max-width:1099px){
  .listen-wrap{grid-template-columns:minmax(0,1fr) auto}
  .listen-info{display:none}
  .listen-row{justify-content:center}
  .listen-end{grid-column:2}
  .listen .lbtn-t .lt-l{display:none}
  .listen .lbtn-t .lt-s{display:inline}
  .listen .lbtn{padding:6px 12px}
  .listen .play{min-width:min(200px,100%)}
}
@media (max-width:819px){.listen[data-state="playing"] .listen-end,.listen[data-state="paused"] .listen-end{display:none}}
@media (max-width:639px){
  .listen-wrap{display:flex;gap:6px}
  .listen-row{flex:1 1 auto;gap:6px}
  .play-wrap{flex:1 1 auto}
  .listen .play{max-width:none;min-width:0;padding:6px 10px;font-size:17px;gap:8px}
  .listen .play .pl-l{display:none}
  .listen .play .pl-s{display:inline}
  .listen .lbtn{flex-direction:column;gap:0;min-width:56px;padding:3px 6px;border-radius:14px;font-size:12px;line-height:1.05}
  .listen .lbtn svg{width:24px;height:24px}
  .listen .lbtn-t .lt-l{display:none}
  .listen .lbtn-t .lt-s{display:inline}
  .listen .speed{min-width:78px;padding:4px 8px;gap:4px}
  .listen .speed .sp-v{font-size:15px}
  .listen .dock-next{padding:6px 12px;font-size:15px}
  .listen-end{flex:0 0 auto}
  .listen[data-state="playing"] .listen-end,.listen[data-state="paused"] .listen-end{display:none}
  .listen-hint{left:0;transform:none}
  .listen-hint::after{left:34px}
}
@media (max-width:359px){.listen .speed{min-width:68px}.listen .speed small{display:none}.listen .lbtn{min-width:48px}}
@media (prefers-color-scheme:dark){.listen{background:#0b0b0d;box-shadow:0 -1px 0 rgba(255,255,255,.2),0 -8px 24px rgba(0,0,0,.6)}}
html.has-dock .toast{bottom:calc(var(--dock-h) + 12px)}
/* with motion switched off, the part you left stays easy to see without pulsing */
@media (prefers-reduced-motion:reduce){.listen-seg .pseg.saved .seg-bar{transform:scaleY(1.5);box-shadow:0 0 0 3px rgba(255,46,147,.45)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Affiliate invite (only shown when AFFILIATES_URL is set) */
.affil{margin:22px 0 6px;padding:16px 18px;border:2px dashed var(--pink);border-radius:12px}
.affil h3{margin:0 0 6px}
.affil p{margin:0 0 12px}
.appfoot a{display:inline-flex;align-items:center;min-height:44px;padding:0;font-weight:700;font-size:14px;color:var(--pink-text);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* Mac or Windows switch on each step */
.step-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 8px}
.step-top .kicker{margin:0}
.os-wrap{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.os-lab{font-size:15px;font-weight:700;color:var(--ink)}
.os-switch{display:inline-flex;border:2px solid var(--ink);border-radius:999px;padding:3px;gap:2px;background:var(--paper)}
.os-switch button{border:0;background:none;border-radius:999px;padding:8px 16px;min-height:44px;font-weight:700;font-size:16px;color:var(--ink);cursor:pointer}
.os-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.os-switch button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

/* Home and Settings always visible in the top bar */
.bar .topnav{margin-left:auto;display:flex;gap:6px;flex-shrink:0;align-items:center}
.bar .topnav button{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 14px;min-height:44px;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.bar .topnav button svg{width:20px;height:20px;flex:0 0 auto}
.bar .topnav button:hover{border-color:var(--ink)}
.bar .topnav button[aria-current="page"]{border-color:var(--ink);box-shadow:inset 0 -4px 0 var(--pink)}
.bar .topnav button.nav-stuck{border-color:var(--ink);background:var(--yellow-soft)}
.bar .topnav button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.bar .topnav .nav-ico{display:none}
@media (max-width:899px){.bar .topnav .nav-more{display:none}}
@media (max-width:719px){
  .bar .topnav button.nav-home,.bar .topnav button.nav-settings{width:44px;padding:0;justify-content:center}
  .bar .topnav .nav-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bar .topnav .nav-ico{display:block}
}

/* Click a picture to see it full screen. */
.shot img.zoomable{cursor:zoom-in}
.zwrap{position:relative}
.zoom-badge{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.zoom-badge svg{width:22px;height:22px}
.shot-mark{position:absolute;box-sizing:border-box;border:4px solid var(--pink);border-radius:14px;pointer-events:none;box-shadow:0 0 0 2px #fff,0 0 14px 3px rgba(255,46,147,.55)}
.shot-mark-circle{border-radius:50%}
.shot .clip-still[hidden] ~ .shot-mark{display:none}
.shot .zoom-hint{font-size:14px;font-weight:700;color:var(--pink-text);margin-top:6px}
.zoomer{position:fixed;inset:0;z-index:40;background:rgba(10,10,10,.92);display:flex;align-items:center;justify-content:center;padding:clamp(8px,3vw,40px);cursor:zoom-out}
.zoomer .zoom-fig{position:relative;display:block;line-height:0;max-width:100%;max-height:100%}
.zoomer img{max-width:100%;max-height:calc(100vh - 2 * clamp(8px,3vw,40px));width:auto;height:auto;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.zoomer .zoom-tip{display:none}
@media (max-width:700px){
  .zoomer{overflow:auto;align-items:flex-start;justify-content:flex-start;padding:64px 8px 72px;touch-action:pan-x pan-y pinch-zoom;cursor:default;-webkit-overflow-scrolling:touch}
  .zoomer .zoom-fig{flex:0 0 auto;max-width:none;max-height:none}
  .zoomer img{max-width:none;max-height:none;width:220vw;flex:0 0 auto}
  .zoomer .zoom-tip{display:block;position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));text-align:center;color:#fff;font-weight:700;font-size:16px;pointer-events:none}
}
.zoomer button{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;min-width:48px;min-height:48px;border-radius:999px;border:2px solid #fff;background:#111;color:#fff;font-weight:700;font-size:16px;padding:0 16px;cursor:pointer}
.zoomer button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

/* ---------- Your turn: the practice boxes (practice-copy-paste, -screenshot, -type, -file, -keys) ----------
   Grid paper, a slightly tilted card, a handwritten label, pink for the accent, ink buttons. Every control is at least
   44px tall, the focus ring is the same pink one as everywhere, and no state is shown by colour alone (a tick and words go with it).
   The pop and the sparks only run when motion is welcome. Nothing here is ever sent anywhere. */
.yt{position:relative;margin:26px 0 22px;padding:24px 22px 18px;max-width:72ch;border:2px solid var(--ink);border-radius:14px;background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;box-shadow:0 8px 20px rgba(0,0,0,.10)}
@media (min-width:640px){.yt{transform:rotate(-.5deg)}}
.yt-tape{position:absolute;top:-13px;left:28px;width:84px;height:24px;background:rgba(189,224,254,.9);transform:rotate(-3deg);pointer-events:none}
.yt-tape.pink{left:50%;margin-left:-45px;width:90px;background:rgba(255,46,147,.45)}
.yt-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;margin:0 0 2px}
.yt-label{margin:0;font-family:var(--hand);font-size:34px;line-height:1;color:var(--pink-text)}
.yt-opt{margin:0 0 10px;font-size:14px;color:var(--ink-2)}
.yt-text,.yt-help{margin:0 0 12px;font-size:17px;max-width:none}
.yt-help{font-size:16px;color:var(--ink-2)}
.yt-sub{display:block;margin:12px 0 6px;font-weight:700;font-size:16px}
.yt .clicks{margin:0 0 14px;max-width:none}
.yt-badge{position:relative;display:inline-flex;align-items:center;gap:6px;padding:2px 14px 2px 6px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);font-weight:700;font-size:15px}
.yt-badge svg{width:24px;height:24px;padding:3px;border-radius:50%;background:var(--pink);color:var(--ink)}
.yt-spark{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.yt-spark i{position:absolute;left:18px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--pink);opacity:0}
.yt-spark i:nth-child(even){background:var(--yellow);border:1.5px solid var(--ink);box-sizing:border-box}
.yt-spark i:nth-child(1){--dx:-30px;--dy:-30px}.yt-spark i:nth-child(2){--dx:-6px;--dy:-38px}.yt-spark i:nth-child(3){--dx:24px;--dy:-34px}.yt-spark i:nth-child(4){--dx:52px;--dy:-26px}
.yt-spark i:nth-child(5){--dx:-26px;--dy:30px}.yt-spark i:nth-child(6){--dx:4px;--dy:38px}.yt-spark i:nth-child(7){--dx:34px;--dy:32px}.yt-spark i:nth-child(8){--dx:64px;--dy:12px}
@media (prefers-reduced-motion:no-preference){
  .yt-pop .yt-badge{animation:yt-pop .55s ease-out}
  .yt-pop .yt-spark i{animation:yt-fly .9s ease-out}
  .yt-pop .yt-tick{animation:yt-pop .5s ease-out}
  @keyframes yt-pop{0%{transform:scale(.5) rotate(-8deg)}60%{transform:scale(1.14) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
  @keyframes yt-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
}
/* boxes you read, copy from or type into */
.yt-line,.yt-paste,.yt-typebox,.yt-keybox{display:block;width:100%;font-family:inherit;font-size:18px;line-height:1.4;color:var(--ink);padding:12px 14px;resize:none}
.yt-line{min-height:64px;border:2px solid var(--ink);border-left:8px solid var(--pink);border-radius:12px;background:var(--sky-soft);cursor:text}
.yt-big{min-height:104px}
.yt-paste,.yt-keybox{background:var(--paper);border:3px dashed var(--ink-3);border-radius:14px}
.yt-paste::placeholder,.yt-typebox::placeholder{color:var(--ink-3);opacity:1}
.yt-paste:focus,.yt-keybox:focus,.yt-line:focus{border-style:solid;border-color:var(--pink);box-shadow:0 0 0 4px var(--yellow);outline:3px solid var(--pink);outline-offset:3px}
.yt.is-done .yt-paste,.yt.is-done .yt-keybox{border-style:solid;border-color:var(--ink)}
/* the look-alike of Claude's message box (it is not Claude, and says so) */
.yt-msgbox{border:2px solid var(--ink);border-radius:20px;background:var(--paper);padding:12px 14px 10px;box-shadow:0 3px 0 var(--ink)}
.yt-msgbox:focus-within{border-color:var(--pink);box-shadow:0 0 0 4px var(--yellow),0 3px 0 var(--ink)}
.yt-notclaude{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--ink-2)}
.yt-typebox{border:0;background:transparent;padding:6px 2px;min-height:120px;resize:vertical;outline:0}
.yt-msgbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin-top:4px}
.yt-plus{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:2px solid var(--ink-3);border-radius:50%;font-size:24px;line-height:1;color:var(--ink-2)}
/* buttons and messages */
.yt-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 4px}
.yt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border:2px solid var(--ink);border-radius:8px;background:var(--ink);color:#fff;font-weight:700;font-size:17px;cursor:pointer}
.yt-btn:hover{background:#000}
.yt-btn.ghost{background:var(--paper);color:var(--ink)}
.yt-btn.ghost:hover{background:var(--sky-soft)}
.yt-btn svg{width:20px;height:20px;flex:0 0 auto}
.yt-status{display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;font-weight:700;font-size:17px;line-height:1.35}
.yt-status:empty{margin:0}
.yt-tick{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid var(--ink);border-radius:50%;background:var(--pink);color:var(--ink)}
.yt-tick svg{width:18px;height:18px}
.yt-privacy{margin:12px 0 0;padding-left:10px;border-left:4px solid var(--pink);font-weight:700;font-size:15px}
/* the drop zone, the screenshot polaroid and the file tag */
.yt-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:170px;padding:18px 16px;text-align:center;border:3px dashed var(--ink-3);border-radius:14px;background:var(--paper)}
.yt-zone:focus{outline:3px solid var(--pink);outline-offset:3px;border-style:solid;border-color:var(--pink)}
.yt-zone.is-over{border-style:solid;border-color:var(--pink);background:var(--rose-soft)}
.yt-zone-ico svg{display:block;width:48px;height:42px;color:var(--ink-2)}
.yt-zone-text,.yt-zone-over{font-weight:700;font-size:19px}
.yt-zone-hint{font-size:15px;color:var(--ink-2);max-width:46ch}
.yt.has-pic .yt-zone-ico,.yt.has-pic .yt-zone-text,.yt.has-pic .yt-zone-hint,.yt.has-file .yt-zone-ico,.yt.has-file .yt-zone-text,.yt.has-file .yt-zone-hint{display:none}
.yt-polaroid{position:relative;width:min(100%,380px);margin:14px auto 6px;padding:10px 10px 46px;background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.2);transform:rotate(-2deg)}
.yt-polaroid img{display:block;width:100%;max-height:300px;object-fit:contain;background:var(--sky-soft)}
.yt-polaroid figcaption{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--hand);font-size:30px;line-height:1}
.yt-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:6px 0;padding:0;list-style:none;width:100%}
.yt-tag{position:relative;min-width:210px;max-width:100%;padding:14px 18px 12px 44px;text-align:left;background:var(--yellow-soft);border:2px solid var(--ink);border-radius:6px;box-shadow:0 5px 12px rgba(0,0,0,.14);transform:rotate(-1.5deg)}
.yt-tag:nth-child(even){transform:rotate(1.2deg)}
.yt-tag::before{content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid var(--ink);border-radius:50%;background:var(--paper)}
.yt-tag p{margin:0 0 3px;font-size:16px}
.yt-tag-k{font-weight:400;color:var(--ink-2)}
.yt-tag-name{font-weight:700;overflow-wrap:anywhere}
.yt-tag-more{align-self:center;font-weight:700}
@media (max-width:640px){.yt{padding:22px 14px 16px}.yt-label{font-size:30px}}
@media (max-width:480px){.yt-btn{width:100%}.yt-msgbar .yt-btn{width:auto}.yt-tag{min-width:0;width:100%}}

/* ---------- the "Need help?" bubble ----------
   A round button at the bottom right of every page, always ABOVE the listen bar (so Play, Back 10 seconds, Start again and
   Speed are never covered): the bar's height is in --dock-h while it is there. Pink and ink like the rest, no gradients.
   On a computer the chat is a card about 400px wide. Under 640px it is a full height sheet. */
html.has-help body{padding-bottom:92px}
html.has-help.has-dock body{padding-bottom:calc(var(--dock-h) + 92px)}
.help-fab{position:fixed;z-index:14;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:68px;height:68px;min-width:48px;min-height:48px;padding:0;border-radius:50%;
  border:2px solid var(--ink);background:var(--pink);color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-weight:700;font-size:12.5px;line-height:1.05;text-align:center}
.help-fab svg{width:24px;height:24px;flex:0 0 auto}
.help-fab:hover{background:var(--rose)}
.help-fab[aria-expanded="true"]{background:var(--ink);color:#fff;box-shadow:none}
html.has-dock .help-fab{bottom:calc(var(--dock-h) + 14px)}
@media (prefers-reduced-motion:no-preference){.help-fab{transition:transform .15s ease,box-shadow .15s ease}.help-fab:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}}

/* the first-time tip, a small speech bubble beside the button */
.help-hint{position:fixed;z-index:14;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + 68px + 14px + env(safe-area-inset-bottom,0px));max-width:min(240px,calc(100vw - 28px));display:flex;align-items:flex-start;gap:6px;
  background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:8px 6px 8px 12px;font-weight:700;font-size:16px;line-height:1.3;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.help-hint::after{content:"";position:absolute;right:26px;top:100%;width:14px;height:14px;background:var(--yellow);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-8px) rotate(45deg)}
.help-hint button{flex:0 0 auto;min-width:44px;min-height:44px;margin:-8px -2px -8px 0;border:0;background:none;font-size:24px;line-height:1;font-weight:700;cursor:pointer;color:var(--ink)}
html.has-dock .help-hint{bottom:calc(var(--dock-h) + 14px + 68px + 14px)}

.help-panel{position:fixed;z-index:16;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + 68px + 10px + env(safe-area-inset-bottom,0px));width:400px;max-width:calc(100vw - 28px);height:min(580px,calc(100vh - 140px));
  display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--ink);border-radius:16px;box-shadow:0 14px 36px rgba(0,0,0,.28);overflow:hidden}
html.has-dock .help-panel{bottom:calc(var(--dock-h) + 14px + 68px + 10px);height:min(580px,calc(100vh - var(--dock-h) - 140px))}
.help-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;border-bottom:2px solid var(--ink);background:var(--paper)}
.help-h h2{margin:0;font-size:20px;letter-spacing:-.02em}
.help-x{border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:8px;padding:6px 14px;min-height:44px;font-weight:700;font-size:15px;cursor:pointer}
.help-log{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.hm{max-width:92%;margin:0;padding:10px 12px;border:2px solid var(--ink);border-radius:12px;font-size:16px;line-height:1.45;overflow-wrap:anywhere}
.hm p{margin:0 0 8px}
.hm p:last-child{margin-bottom:0}
.hm ol,.hm ul{margin:4px 0 8px;padding-left:22px}
.hm li{margin:0 0 5px}
.hm .ui{white-space:normal}
.hm-bot{align-self:flex-start;background:var(--paper)}
.hm-user{align-self:flex-end;background:var(--rose-soft)}
.hm-thumb{display:block;max-width:100%;max-height:120px;border:2px solid var(--ink);border-radius:8px;margin:0 0 6px}
.hm-note{align-self:center;max-width:100%;border:0;padding:0 6px;font-size:14px;color:var(--ink-2);text-align:center}
.hm-err{align-self:stretch;max-width:100%;background:var(--yellow-soft)}
.hm-think{color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){.hm-think span{display:inline-block;animation:help-dots 1.2s steps(4,end) infinite;overflow:hidden;vertical-align:bottom;width:0}@keyframes help-dots{to{width:1.2em}}}
@media (prefers-reduced-motion:reduce){.hm-think span{width:auto}}
.help-form{flex:0 0 auto;padding:10px 12px 6px;border-top:2px solid var(--line);display:flex;flex-direction:column;gap:8px}
.help-input{width:100%;min-height:52px;max-height:150px;border:2px solid var(--ink);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:16px;line-height:1.4;color:var(--ink);background:#fff;resize:none}
.help-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.help-attach{gap:8px;padding:8px 12px}
.help-attach svg{width:20px;height:20px}
.help-send{padding:10px 22px;font-size:16px}
.help-pic{display:flex;align-items:center;gap:10px}
.help-pic img{width:64px;height:64px;object-fit:cover;border:2px solid var(--ink);border-radius:8px}
.help-confirm{border:2px solid var(--ink);border-radius:10px;background:var(--yellow-soft);padding:10px 12px}
.help-confirm p{margin:0 0 8px;font-weight:700}
.help-confirm-row{display:flex;gap:8px;flex-wrap:wrap}
.help-note{margin:0;padding:2px 14px 12px;font-size:13px;color:var(--ink-2)}
.help-fab:focus-visible,.help-panel :focus-visible{outline:3px solid var(--pink);outline-offset:2px}

/* a phone: the chat is a full height sheet over everything, the page behind it holds still */
@media (max-width:639px){
  /* the bubble shrinks to a 48px icon on a phone (still named "Need help?" for a screen reader) so it covers less of the page */
  .help-fab{width:48px;height:48px;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));box-shadow:2px 2px 0 var(--ink)}
  .help-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.has-dock .help-fab{bottom:calc(var(--dock-h) + 12px)}
  html.has-help body{padding-bottom:68px}
  html.has-help.has-dock body{padding-bottom:calc(var(--dock-h) + 68px)}
  .help-hint{bottom:calc(12px + 48px + 12px + env(safe-area-inset-bottom,0px));right:12px}
  html.has-dock .help-hint{bottom:calc(var(--dock-h) + 12px + 48px + 12px)}
}
@media (max-width:639px){
  html.has-dock .help-panel,.help-panel{inset:0;right:0;bottom:0;width:auto;max-width:none;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none;z-index:25}
  html.help-open body{overflow:hidden}
  .help-h{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .help-note{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .hm{max-width:96%}
}
@media (prefers-reduced-motion:reduce){.help-fab,.help-panel,.help-hint{transition:none;animation:none}}

/* ---------- update 2: banner, story, numbered list, fast lane, doors, schedules, affiliate button ---------- */
/* A step that needs a paid plan: one standard banner under the title. */
.needs-banner{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:10px 14px;border:2px solid var(--ink);border-left:8px solid var(--yellow);border-radius:10px;background:var(--yellow-soft);max-width:72ch}
.needs-banner .needs-ico{flex:0 0 auto;width:24px;height:24px;margin-top:2px;color:var(--ink)}
.needs-banner .needs-ico svg{width:24px;height:24px;display:block}
.needs-banner p{margin:0;font-weight:700;font-size:16px;line-height:1.4}

/* A numbered list (1, 2, 3) in the same round numbers as the clicks. */
.numlist{margin:0 0 13px;padding:0;list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:8px;max-width:72ch}
.numlist li{counter-increment:n;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;font-size:17px}
.numlist li::before{content:counter(n);font-family:var(--hand);font-size:26px;line-height:1;color:var(--pink-text);border:2px solid var(--pink);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--paper)}

/* One of Gabi's own stories: a taped card with handwriting on top. */
.story{position:relative;margin:18px 4px 18px 0;padding:18px 18px 14px;background:var(--yellow-soft);border:2px solid var(--ink);border-radius:6px;box-shadow:4px 5px 0 rgba(22,22,22,.12);max-width:64ch;transform:rotate(-.6deg)}
.story::before{content:"";position:absolute;top:-12px;left:22px;width:78px;height:22px;background:rgba(189,224,254,.85);transform:rotate(-3deg)}
.story .story-tag{margin:0 0 6px;font-family:var(--hand);font-size:28px;line-height:1;color:var(--pink-text)}
.story .story-text{color:var(--ink);margin:0;font-size:18px;line-height:1.45}

/* The fast lane: Mark this level done, under the Start button on a cover. */
.mark-done{margin:14px 0 4px;max-width:56ch}
.mark-done .hint{margin:6px 0 0}
.mark-done.is-done{display:flex;gap:8px;align-items:center;font-weight:700;color:var(--ink);background:var(--mint);border-radius:8px;padding:8px 12px;width:fit-content}
.mark-done.is-done svg{width:20px;height:20px;flex:0 0 auto}

/* Home: the date, the paid plan line, and the three doors. */
.home-meta{margin:16px 0 0;display:flex;flex-direction:column;gap:6px;max-width:72ch}
.home-meta .plan-line{border:2px solid var(--ink);border-left:8px solid var(--sky);border-radius:10px;background:var(--sky-soft);padding:10px 14px}
.home-meta .plan-line p{margin:0;font-size:16px;line-height:1.45}
.home-meta .updated-on{margin:0;font-size:14px;font-weight:700;color:var(--ink-2)}
.doors{margin:26px 0 0}
.doors h2.doors-h{font-size:clamp(22px,4vw,28px);margin:0 0 4px}
.door-list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.door{display:flex;flex-direction:column;gap:6px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:14px 16px 16px}
.door h3{margin:0;font-size:19px;letter-spacing:-.01em}
.door .door-text{margin:0 0 4px;color:var(--ink-2);font-size:16px}
.door-first{margin:4px 0 6px;padding:10px 12px 8px;background:var(--rose-soft);border-radius:10px}
.door-first .beat-tag{margin:0 0 6px}
.door-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.door-step{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:0;border:0;background:none;padding:8px 0;text-align:left;cursor:pointer;min-height:44px;border-bottom:1px solid rgba(22,22,22,.12)}
.door-steps li:last-child .door-step{border-bottom:0}
.door-step .ds-t{font-weight:700;font-size:15px;line-height:1.3;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--pink)}
.door-step small{font-size:13px;color:var(--ink-2)}
.door-step.done .ds-t{text-decoration:line-through}
.door .door-go{margin-top:auto;align-self:flex-start}

/* What's new: the steps each update touches, and the older updates. */
.new-item{margin:0 0 10px}
.new-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.new-steps>span{font-size:14px;font-weight:700;color:var(--ink-2)}
.step-chip{border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);padding:4px 12px;font-weight:700;font-size:14px;cursor:pointer;min-height:34px;text-align:left}
.step-chip:hover{background:var(--yellow-soft)}
.new-more{margin:8px 0 0;border-top:1.5px solid rgba(22,22,22,.15);padding-top:8px}
.new-more summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.new-more .new-item{padding-top:6px}

/* Playbooks: schedules for your kind of business. */
.pb-sched{margin:22px 0 0;padding:14px 16px 6px;border:2px solid var(--ink);border-radius:14px;background:var(--sky-soft)}
.pb-sched h3{margin:0 0 6px;font-size:19px}
.pb-sched>.why{margin:0 0 12px;font-size:16px}
.pb-sched .pb-top h4{margin:0;flex:1 1 220px;font-size:18px;letter-spacing:-.01em}
.pb-top .when{font-size:12px;font-weight:700;border-radius:6px;padding:2px 8px;background:var(--yellow-soft);white-space:nowrap;border:1.5px solid var(--ink)}
.pb-sched .stack{margin-bottom:12px}

/* The affiliate button in the footer: small, outlined in pink, and the same on every page. */
.appfoot a.affil-foot,.appfoot .affil-foot{display:inline-flex;align-items:center;min-height:44px;padding:6px 16px;border:2px solid var(--pink);border-radius:8px;background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.appfoot a.affil-foot:hover{background:var(--rose-soft)}
.affil{border-style:solid;border-width:2px;border-color:var(--pink);background:var(--paper)}
.affil .affil-how{margin:0 0 8px;font-weight:700}
.affil .numlist{margin-bottom:14px}
@media (max-width:420px){.appfoot a.affil-foot{white-space:normal}}

/* ---------- "Look here": the part the voice is talking about glows, with a small badge beside it ---------- */
/* Anything that can be pointed at keeps clear of the bar at the bottom and has room above it for the badge when the page scrolls to it. */
[data-point]{scroll-margin-top:88px;scroll-margin-bottom:calc(var(--dock-h,0px) + 28px)}
/* A white gap keeps the ring off the words, then the brand pink ring, then a soft glow. A slight lift, one thing at a time. */
.point-on{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--pink),0 0 0 11px rgba(255,46,147,.22),0 8px 22px rgba(255,46,147,.28)!important;transform:translateY(-2px)}
/* It pulses slowly (2.4 seconds a breath, so nothing flashes) and only when motion is welcome. Otherwise the ring is steady. */
@keyframes point-pulse{
  0%,100%{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--pink),0 0 0 9px rgba(255,46,147,.14),0 6px 16px rgba(255,46,147,.2)}
  50%{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--pink),0 0 0 15px rgba(255,46,147,.3),0 10px 28px rgba(255,46,147,.42)}
}
@media (prefers-reduced-motion:no-preference){.point-on{animation:point-pulse 2.4s ease-in-out infinite;transition:transform .25s ease}}
.point-badge{position:absolute;z-index:17;display:flex;gap:0;pointer-events:none;font-family:var(--hand);font-weight:700;line-height:1;--ax:24px}
.point-badge .pb-pill{display:block;background:var(--pink);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:3px 15px 6px;font-size:27px;white-space:nowrap;box-shadow:2px 2px 0 var(--ink);transform:rotate(-2deg)}
.point-badge .pb-arrow{display:block;width:36px;height:36px;flex:0 0 auto}
.point-badge .pb-arrow svg{display:block;width:36px;height:36px}
/* above the thing, the arrow pointing down at it */
.point-badge[data-side="top"]{flex-direction:column;align-items:flex-start}
.point-badge[data-side="top"] .pb-arrow{margin:-2px 0 0 calc(var(--ax) - 18px)}
/* below it, the arrow pointing up */
.point-badge[data-side="bottom"]{flex-direction:column-reverse;align-items:flex-start}
.point-badge[data-side="bottom"] .pb-arrow{margin:0 0 -2px calc(var(--ax) - 18px);transform:rotate(180deg)}
/* beside it (the helper bubble in the corner, or a line with clear space beside it), the arrow pointing sideways */
.point-badge[data-side="left"]{flex-direction:row;align-items:center}
.point-badge[data-side="left"] .pb-arrow{margin:0 0 0 -6px;transform:rotate(-90deg)}
.point-badge[data-side="right"]{flex-direction:row-reverse;align-items:center}
.point-badge[data-side="right"] .pb-arrow{margin:0 -6px 0 0;transform:rotate(90deg)}
/* The list of levels clips its rounded corners; let the ring show on a row it points at. */
.point-badge[data-side="in"]{flex-direction:row-reverse;align-items:center}
.point-badge[data-side="in"] .pb-arrow{margin:0 -4px 0 0;transform:rotate(90deg);width:26px;height:26px}
.point-badge[data-side="in"] .pb-arrow svg{width:26px;height:26px}
.point-badge[data-side="in"] .pb-pill{font-size:21px;padding:0 11px 2px;box-shadow:1px 1px 0 var(--ink)}
.levels:has(.point-on){overflow:visible}
.levels>li:first-child .lv{border-radius:12px 12px 0 0}
.levels>li:last-child .lv{border-radius:0 0 12px 12px}
@media (prefers-reduced-motion:reduce){.point-on{animation:none;transition:none}}

/* ---------- the certificate card, the reminder line and the level badges ---------- */
/* The reminder near the top of home: a small pink seal and one line, in the same box shape as the free plan line. */
.home-meta .cert-line{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);border-left:8px solid var(--pink);border-radius:10px;background:var(--rose-soft);padding:8px 14px}
.cert-line .cert-line-seal{flex:0 0 auto;width:34px;height:34px;transform:rotate(-8deg)}
.home-meta .cert-line p{margin:0;font-size:16px;line-height:1.4;font-weight:600}
/* The celebration card: once every level is done, on home and on the last done page. */
.cert-card{position:relative;display:flex;align-items:center;gap:20px;margin:18px 0;padding:20px 22px;border:2px solid var(--ink);border-radius:16px;background:var(--rose-soft);box-shadow:5px 5px 0 var(--ink)}
.cert-card .cert-seal{flex:0 0 auto;width:96px;height:96px;transform:rotate(-7deg);filter:drop-shadow(2px 3px 0 rgba(22,22,22,.18))}
.cert-body{min-width:0;flex:1 1 auto}
.cert-h{margin:0 0 6px;font-size:clamp(26px,5vw,38px);line-height:1.08;letter-spacing:-.035em}
.cert-card .cert-lead{margin:0 0 14px;max-width:46ch}
.cert-card .cert-actions{margin-top:0}
.btn.big.cert-go{background:var(--pink);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);align-items:center;text-align:center;min-width:min(100%,280px)}
.btn.big.cert-go:hover{background:#FF4FA6}
.btn.big.cert-go:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.cert-change{align-self:center}
@media (max-width:560px){
  .cert-card{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 16px}
  .cert-card .cert-seal{width:72px;height:72px}
  .btn.big.cert-go{width:100%}
}
.sheet.cert-sheet{max-width:480px}
.cert-l{display:block;font-weight:700;margin:0 0 8px}
.cert-sheet .field{margin:0 0 6px}
.cert-hint{margin:0 0 6px}

/* Your badges: ten slots on home, then the one that has just been earned on its done page. */
.badges{margin:22px 0 0}
.bd-lead{margin:0 0 12px;max-width:62ch}
.bd-row{list-style:none;margin:0;padding:4px 0 2px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 8px}
@media (min-width:760px){.bd-row{grid-template-columns:repeat(10,minmax(0,1fr));gap:10px 6px}}
.bd-slot{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bd-btn{border:0;background:none;padding:0;margin:0;cursor:pointer;border-radius:50%;line-height:0;max-width:100%}
.bd-btn .lv-badge{display:block;width:100%;height:auto;max-width:92px;filter:drop-shadow(0 3px 5px rgba(22,22,22,.18));transition:transform .15s ease}
.bd-btn:hover .lv-badge{transform:rotate(0deg) scale(1.08)!important}
.bd-empty{display:flex;align-items:center;justify-content:center;width:100%;max-width:84px;aspect-ratio:1;border:2.5px dashed #B9C4D4;border-radius:50%;background:rgba(255,255,255,.7);color:#8A93A3;font-weight:700;font-size:20px}
.bd-cap{font-size:12px;line-height:1.25;color:var(--ink-2);text-align:center;font-weight:500;overflow-wrap:anywhere;min-height:2.5em}
@media (max-width:759px){.bd-cap{font-size:11px}}
@media (max-width:420px){.bd-cap{display:none}}
.bd-all{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.bd-moment{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px auto 18px;padding:6px 0 0;text-align:center}
.bd-moment .bd-big,.bd-sheet .bd-big{line-height:0}
.bd-moment .lv-badge{filter:drop-shadow(0 8px 12px rgba(22,22,22,.22))}
.bd-line{margin:0;font-size:18px;line-height:1.3}
.bd-sheet{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.bd-sheet .lv-badge{filter:drop-shadow(0 8px 12px rgba(22,22,22,.22));max-width:100%;height:auto}
.sheet.bd-sheet-wrap{max-width:420px}
/* It pops in with a little bounce, and only when motion is welcome. With reduced motion it is a plain fade (this rule outranks the blanket one). */
@keyframes bd-pop{0%{transform:scale(.2) rotate(-18deg);opacity:0}55%{transform:scale(1.14) rotate(4deg);opacity:1}78%{transform:scale(.96) rotate(-1deg)}100%{transform:scale(1) rotate(0)}}
@keyframes bd-fade{from{opacity:0}to{opacity:1}}
.bd-moment.pop .bd-big{animation:bd-pop .85s cubic-bezier(.3,1.3,.5,1) both}
@media (prefers-reduced-motion:reduce){.bd-moment.pop .bd-big{animation:bd-fade .5s ease both!important}}

.lv-badge text{font-family:var(--sans);font-weight:700;fill:#161616}
.lv-badge .b-text{font-size:16.5px}
.lv-badge .b-num{font-size:20px}

/* Shown while the course is being updated (about a minute). */
.away-note{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);transform:translateX(-50%);z-index:1000;max-width:min(560px,calc(100vw - 32px));background:#FFF4B8;color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:12px 16px;font-weight:700;font-size:16px;line-height:1.35;box-shadow:0 8px 24px rgba(0,0,0,.18);text-align:center}

/* The lifetime promise, under the Updated on date on home and under the next level block on the last done page. */
.home-meta .up-box{display:flex;flex-direction:column;gap:4px}
.home-meta .lifetime{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2);max-width:64ch}
.done-lifetime{margin:14px 0 4px;font-size:15px;line-height:1.45;color:var(--ink-2);max-width:64ch}

/* The very first page: the congratulations, the do it yourself line and the one question. */
.pk-lead{font-size:19px;color:var(--ink)}
.pk-calm{border:2px solid var(--ink);border-left:8px solid var(--yellow);border-radius:10px;background:var(--yellow-soft);padding:10px 14px;margin:0 0 16px;max-width:72ch;display:flex;flex-direction:column;gap:6px}
.pk-calm .pk-line{margin:0;font-size:16px;line-height:1.45;color:var(--ink)}
.pk-ask{margin:0 0 6px}

/* The note for a phone: the course works best on a computer. Only drawn on a narrow touch screen (see phoneNoteHTML). */
.phone-note{margin:0 0 12px;padding:12px 14px;border:2px solid var(--ink);border-left:8px solid var(--pink);border-radius:10px;background:var(--rose-soft);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.phone-note p{margin:0;font-size:16px;line-height:1.45;font-weight:600}
.phone-note .btn-o{min-height:44px}

/* Level 2: the layout check. The same two cards the old picker had, in a taped box in the middle of the step. */
.layout-check{margin:16px 0 18px;padding:14px 16px 6px;border:2px solid var(--ink);border-radius:12px;background:var(--sky-soft);max-width:72ch}
.layout-check .lc-text{margin:0 0 12px;font-size:17px;max-width:none}
.layout-check .pick{margin:0 0 8px}
.layout-check .lc-msg{margin:0 0 8px;font-size:15px;color:var(--ink-2);min-height:0}
.layout-check .lc-msg:empty{display:none}

/* The last done page: Ready for the next level? One card per product, then the whole playbook. */
.next-level{margin:26px 0 8px;padding:20px 18px 18px;border:2px solid var(--ink);border-radius:16px;background:var(--paper);box-shadow:5px 5px 0 var(--ink)}
.next-level .nl-h{margin:0 0 6px;font-size:clamp(24px,4.5vw,32px);line-height:1.1;letter-spacing:-.03em}
.next-level .nl-lead{margin:0 0 16px}
.nl-group{margin:0 0 18px}
.nl-group-h{margin:0 0 10px;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);max-width:60ch;line-height:1.3}
.nl-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.nl-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 14px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--yellow-soft)}
.nl-builds .nl-card{background:var(--sky-soft)}
.nl-name{font-size:19px;letter-spacing:-.01em}
.nl-line{color:var(--ink);font-size:15px;line-height:1.4;flex:1 1 auto}
.nl-go{margin-top:6px;min-height:44px;padding:8px 14px}
.nl-go:hover{background:var(--paper);box-shadow:2px 2px 0 var(--ink)}
.nl-all{margin:6px 0 0}
@media (max-width:520px){.nl-cards{grid-template-columns:1fr}.next-level{padding:16px 14px}.nl-all .btn{width:100%}}
.next-level + .done-links{margin-top:18px}

/* ---------- accessibility review fixes (2 Oct 2026) ---------- */
/* Headings: every page has one h1, and the small labels are real headings too, so they keep the look they had as plain lines. */
.screen .beat-tag{font-size:13px;line-height:1.5;letter-spacing:.08em;margin:0 0 8px;text-wrap:wrap}
.screen .part-label{font-size:14px;line-height:1.5;letter-spacing:.08em;margin:0 0 8px;text-wrap:wrap}
.new h2{margin:0 0 6px;font-size:15px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;text-wrap:wrap}
.affil h2{margin:0 0 6px;font-size:22px;line-height:1.2;text-wrap:wrap}
.gl-group:focus{outline:none}
.appfoot .appfoot-links{display:contents}
/* Pages that wrap titles instead of cutting them off. */
.bar .where b{white-space:normal;overflow:visible;text-overflow:clip}
.bar .where button.lv-title{white-space:normal;overflow:visible;text-overflow:clip;min-height:44px;display:inline-flex;align-items:center}

/* The top links: all four words on a wide screen, one Menu button (with the full names inside) on a narrow or zoomed in one. */
.bar{flex-wrap:wrap}
.bar .topnav .nav-menu{display:none}
@media (max-width:999px){
  .bar .topnav .nav-link{display:none}
  .bar .topnav .nav-menu{display:inline-flex}
  .bar .topnav .nav-menu .nav-ico{display:block}
  .bar .topnav .nav-menu .nav-txt{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}
.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.menu-link{width:100%;text-align:left;border:2px solid var(--ink);border-radius:12px;background:var(--paper);padding:12px 14px;min-height:56px;font-weight:700;font-size:18px;cursor:pointer}
.menu-link:hover{background:var(--sky-soft)}
.menu-link[aria-current="page"]{background:var(--ink);color:#fff}
.sheet-h .x{min-width:44px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* Targets: 44px at least, with room between. */
.eg-tog{display:flex;align-items:center;margin:6px 0 0;min-height:44px}
.step-chip{min-height:44px;padding:8px 14px}

/* Chosen is a thick border, a tick and a word, never a pale colour alone. */
.chip[aria-pressed="true"]{background:var(--yellow);border-width:4px;padding:6px 12px}
.chip[aria-pressed="true"]::before{content:"\2713\00a0";font-weight:700}
.opt-switch{flex-direction:row;align-items:center;gap:12px;max-width:420px}
.opt-switch b{flex:1 1 auto}
.set-levels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:560px}
.set-levels li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;border:2px solid var(--ink);border-radius:12px;padding:8px 12px}
.set-note{margin:12px 0 8px}

/* Mark this level done: a small link under the steps, with an Are you sure? step and an undo. */
.mark-done{margin:4px 0 14px;max-width:56ch}
.mark-done>.quiet{font-size:15px}
.mark-sure{margin:10px 0 0;padding:12px 14px;border:2px solid var(--ink);border-left:8px solid var(--yellow);border-radius:10px;background:var(--yellow-soft)}
.mark-sure p{margin:0 0 8px}
.mark-sure .mark-sure-h{font-weight:700;font-size:18px}
.mark-done.is-done{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;width:fit-content;max-width:100%}
.mark-done.is-done p{display:flex;gap:8px;align-items:center;margin:0;font-weight:700}
.mark-done.is-done p svg{width:20px;height:20px;flex:0 0 auto}

/* The progress card on the last page, until the certificate unlocks. */
.cert-progress{align-items:flex-start;background:var(--sky-soft)}
.cert-progress .cert-count{margin:0 0 6px;font-size:20px}
.cert-progress .cert-lead{margin:0 0 12px}
.cert-left-h{margin:0 0 6px}
.cert-left{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cert-left .btn-o{width:100%;justify-content:flex-start;text-align:left}

/* Reading along: stronger than a pale yellow, with an outline, so it shows without colour. */
.say.reading{background:var(--yellow);box-shadow:0 0 0 4px var(--yellow);outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.say.word.reading{box-shadow:0 0 0 6px var(--yellow);background:var(--yellow)}
.say.can.reading,.say.hook.reading{background:var(--yellow)}
.script-p.reading{background:var(--yellow);box-shadow:0 0 0 6px var(--yellow);outline:2px solid var(--ink);outline-offset:4px}
.tbl tr.reading>*{background:var(--yellow)}
/* The step dots: the one you are on is bigger and ringed. The page you are on in the top links is black. */
.stepdots i.cur{width:12px;height:12px;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.bar .topnav button[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none}
/* Listen and the parts: a thin white edge so the pink is never the only clue. The part on is taller. */
.listen .play{border:2px solid #fff}
.listen-seg .pseg.now .seg-bar,.listen-seg .pseg.saved .seg-bar{height:14px;margin-bottom:6px;box-shadow:0 0 0 2px #fff}
/* "Look here": a thin dark line round the pink ring, so it shows on a pink box and for pink that looks grey. */
.point-on{outline:2px solid var(--ink);outline-offset:7px}
.levels:has(.point-on) .point-on{outline-offset:-2px}

/* A long handwriting note holds instructions: plain text, normal size. */
.note-line.note-long{font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--ink);transform:none;max-width:72ch}

/* The first-visit tip sits inside the bar, beside Listen (never over the page), and fades. */
.listen .listen-hint{position:static;transform:none;left:auto;bottom:auto;width:auto;max-width:none;grid-column:1/-1;justify-content:space-between;margin:0 0 6px;font-size:16px;opacity:1;transition:opacity .4s ease}
.listen .listen-hint::after{display:none}
.listen .listen-hint.fade{opacity:0}
@media (prefers-reduced-motion:reduce){.listen .listen-hint{transition:none}}

/* Show the words: stays in view while the page scrolls to the glow, so the words and the glow can be seen together. */
.script{position:sticky;top:6px;z-index:6;padding-bottom:18px;max-height:min(40vh,22rem);box-shadow:0 8px 18px rgba(0,0,0,.14)}
@media (max-width:719px){.script{max-height:min(40vh,calc(100svh - var(--dock-h) - 200px))}}
.script-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.script-p .where-btn{flex:0 0 auto;min-height:44px;padding:6px 14px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink);font-weight:700;font-size:15px;cursor:pointer}
.script-p .where-btn:hover{background:var(--sky-soft)}

/* The help panel: the chat is usable at 200% zoom and on a short screen. It opens full width and full height above the Listen bar,
   with room for the answers (150px at least) and the box and Send button pinned at the bottom. */
.help-log{min-height:150px}
@media (max-width:900px),(max-height:560px){
  html.has-dock .help-panel,.help-panel{inset:0 0 var(--dock-h,0px) 0;right:0;bottom:var(--dock-h,0px);width:auto;max-width:none;height:auto;border-radius:0;border-width:0 0 2px 0;box-shadow:none;z-index:25}
  html.help-open body{overflow:hidden}
  .help-form{padding-bottom:8px}
}
@media (max-height:480px){.help-note{display:none}.help-h{padding-top:4px;padding-bottom:4px}.help-input{min-height:44px}}
@media (min-width:1100px){html.help-open .shell{max-width:min(var(--shell-w),calc(100vw - 452px));margin-right:428px}}

/* A short screen (a window under about 600px tall, or a page zoomed in a lot): the bar is one slim row (Listen, Speed, Next), the
   part dots wait until there is room, and Back and Show the words share one row. */
@media (max-height:600px){
  :root{--dock-btn:46px}
  .listen{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
  .listen .seg-wrap{display:none}
  .listen .lbtn-t{display:none}
  .listen .listen-hint{display:none}
  .listen .lbtn{min-width:48px;padding:6px 10px}
  .bar{min-height:44px;padding-top:2px;padding-bottom:2px}
  .topline{margin:0 0 6px}
  .screen{padding-top:10px}
  .sheet.pv{max-height:94vh;max-height:94dvh}
  .pv-go{position:static}
  .veil{padding:8px}
  .script{max-height:34vh}
}
.speed-list{display:flex;flex-direction:column;gap:8px}
.menu-link[aria-pressed="true"]{background:var(--ink);color:#fff}
.menu-link[aria-pressed="true"]::before{content:"\2713\00a0"}
.sheet-end{margin:12px 0 0;font-size:14px;font-weight:700;color:var(--ink-2)}
@media (max-width:639px){.listen-wrap{flex-wrap:wrap}.listen .listen-hint{flex:1 1 100%}}
.to-how{margin:0 0 8px}
.to-how .quiet{min-height:44px}
.copy-note{margin:0 0 12px;font-weight:700;color:var(--ink)}
/* The play button of a clip sits in the corner, with its words, so it never covers what the picture shows. */
.clip-play{left:12px;top:auto;bottom:12px;margin:0;width:auto;height:48px;border-radius:999px;padding:0 18px 0 12px;gap:8px;font-weight:700;font-size:16px}
.clip-play svg{width:24px;height:24px;margin-left:0}
/* Text size and spacing (Settings): kept on this device only. */
html[data-text="big"]{zoom:1.2}
html[data-text="bigger"]{zoom:1.45}
html[data-space="roomy"] body{line-height:1.85;letter-spacing:.02em;word-spacing:.1em}
html[data-space="roomy"] .why,html[data-space="roomy"] .para,html[data-space="roomy"] .clicks li{line-height:1.85}

/* Using this course with a keyboard or a screen reader */
.kb-keys{margin:10px 0 8px;max-width:72ch}
.kb-keys > div{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:6px 18px;padding:10px 0;border-top:1.5px solid var(--line)}
.kb-keys > div:first-child{border-top:0}
.kb-keys dt{font-weight:700}
.kb-keys dd{margin:0}
.kb-list{max-width:72ch;margin:8px 0;padding-left:22px}
.kb-list li{margin:0 0 10px}
kbd{display:inline-block;padding:1px 8px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);font-family:inherit;font-weight:700;font-size:.9em;box-shadow:0 2px 0 var(--ink);white-space:nowrap}
@media (max-width:560px){.kb-keys > div{grid-template-columns:1fr}}
.appfoot .appfoot-kb{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px}

/* A numbered card as separate prompts, each with its own Copy button */
.prompt-group{max-width:72ch;margin:14px 0}
.prompt-group .pg-all{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 6px}
.prompt-group .pg-note{font-size:14px;color:var(--ink-2)}
.prompt-parts{list-style:none;margin:0;padding:0}
.prompt-parts > li{margin:0 0 6px;padding:10px 0 0;border-top:1.5px solid var(--line)}
.prompt-parts .pp-head{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline}
.prompt-parts .pp-head b{font-size:16px}
.prompt-parts .pp-head span{font-size:14px;color:var(--ink-2)}
.prompt-parts .promptbox{margin-bottom:6px}