/* site.css — shared chrome for every page on spreadloveandacceptance.com
   Header bar, contents index, members gate, pager, footer.
   All selectors are prefixed .tol- so they never collide with page styles. */

:root{
  --paper:#F5EFDE; --paper-deep:#ECE2C4; --ink:#2B2620; --ink-soft:#5A5346;
  --line:#D9CBA3; --credit:#3E6B4C; --brass:#A8792F; --brass-ink:#7A5620; --focus:#2B5B8C;
  --debit:#96412B; --radius:3px;
}

/* (Nothing is locked: the old "members only" wrappers, .locked-section, read as normal page content, with or without JavaScript) */
.locked-section{ border:0 !important; padding:0 !important; margin:0 !important; background:none !important; }
.locked-section::before{ content:none !important; display:none !important; }

/* ---------- Skip link ---------- */
.tol-skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  font:500 15px/1.2 "Lora", Georgia, serif;
}
.tol-skip:focus{ left:1rem; top:.5rem; }

/* ---------- Header bar ---------- */
.tol-bar{
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; gap:1.25rem;
  padding:.7rem clamp(1rem, 4vw, 2.5rem);
  background:var(--paper);
  border-bottom:3px double var(--ink);  /* the ledger's closing rule */
  font-family:"Lora", Georgia, serif; color:var(--ink);
  box-sizing:border-box;
}
.tol-bar *{ box-sizing:border-box; }
.tol-brand{
  font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.15rem;
  color:var(--ink); text-decoration:none; white-space:nowrap; letter-spacing:-.01em;
}
.tol-brand:hover{ color:var(--brass); }
.tol-sections{ display:flex; gap:.25rem; margin-left:auto; }
.tol-bar button, .tol-bar a.tol-member{
  font:inherit; font-size:.95rem; color:var(--ink);
  background:none; border:1px solid transparent; border-radius:var(--radius);
  padding:.4rem .7rem; cursor:pointer; text-decoration:none; line-height:1.2;
}
.tol-bar button:hover{ border-color:var(--line); background:var(--paper-deep); }
.tol-bar button[aria-current="true"]{ border-bottom:2px solid var(--brass); border-radius:0; }
.tol-contents-btn{ display:none; margin-left:auto; }
.tol-bar a.tol-member{ border-color:var(--ink); }
.tol-bar a.tol-member:hover{ background:var(--ink); color:var(--paper); }
.tol-bar a.tol-member.is-member{ border-color:var(--credit); color:var(--credit); }
.tol-bar a.tol-member.is-member:hover{ background:var(--credit); color:var(--paper); }

@media (max-width:720px){
  .tol-sections{ display:none; }
  .tol-contents-btn{ display:inline-block; }
  .tol-brand{ font-size:1rem; }
}

/* ---------- Contents panel ---------- */
.tol-scrim{
  position:fixed; inset:0; z-index:950; background:rgba(33,29,23,.35);
}
.tol-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:960;
  width:min(34rem, 100vw); overflow-y:auto;
  background:var(--paper); border-left:3px double var(--ink);
  padding:1.25rem clamp(1rem,4vw,2rem) 3rem;
  font-family:"Lora", Georgia, serif; color:var(--ink);
  transform:translateX(0); transition:transform .22s ease-out;
}
.tol-panel[hidden], .tol-scrim[hidden]{ display:none; }
.tol-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.tol-panel-head h2{ font-family:"Fraunces", Georgia, serif; font-size:1.5rem; margin:0; font-weight:600; }
.tol-close{
  font:inherit; font-size:.95rem; background:none; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); padding:.35rem .7rem; cursor:pointer;
}
.tol-close:hover{ background:var(--paper-deep); }
@media (prefers-reduced-motion: reduce){ .tol-panel{ transition:none; } }

/* ---------- The index (used in the panel and on the home page) ---------- */
.tol-index{ font-family:"Lora", Georgia, serif; color:var(--ink); }
.tol-index-section{ margin:1.75rem 0 0; }
.tol-index-section > h3{
  font-family:"Fraunces", Georgia, serif; font-style:italic; font-weight:500;
  font-size:1.2rem; margin:0 0 .35rem; padding-bottom:.3rem; border-bottom:1px solid var(--ink);
}
.tol-index-section > p{ margin:.2rem 0 .6rem; color:var(--ink-soft); font-size:.92rem; }
.tol-index ol{ list-style:none; margin:0; padding:0; }
.tol-row{
  display:grid; grid-template-columns:4.2rem 1fr auto; align-items:baseline; gap:.5rem;
  padding:.5rem .35rem .5rem .5rem; text-decoration:none; color:var(--ink);
  border-bottom:1px dotted var(--line); border-left:3px solid transparent;
}
.tol-row:hover{ background:var(--paper-deep); }
.tol-row[aria-current="page"]{ border-left-color:var(--brass); background:var(--paper-deep); }
.tol-code{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.78rem; color:var(--ink-soft); }
.tol-title{ font-size:1rem; line-height:1.35; }
.tol-title small{ display:block; color:var(--ink-soft); font-size:.85rem; margin-top:.1rem; }
.tol-access{ font-size:.8rem; color:var(--brass-ink, #7A5620); white-space:nowrap; font-style:italic; }
.tol-index.is-member .tol-access{ color:var(--credit); }

/* Larger index on the home page */
.tol-index.is-page .tol-index-section{ margin-top:2.5rem; }
.tol-index.is-page .tol-index-section > h3{ font-size:1.5rem; }
.tol-index.is-page .tol-title{ font-size:1.08rem; }

/* ---------- Members gate ---------- */
.tol-gate{
  margin:2.5rem 0; padding:1.75rem clamp(1.1rem,4vw,2rem);
  background:var(--paper-deep); border-top:3px double var(--ink); border-bottom:1px solid var(--ink);
  font-family:"Lora", Georgia, serif; color:var(--ink); max-width:44rem;
}
.tol-gate h2{ font-family:"Fraunces", Georgia, serif; font-size:1.45rem; font-weight:600; margin:0 0 .5rem; max-width:none; }
.tol-gate p{ margin:.4rem 0; line-height:1.6; max-width:60ch; }
.tol-gate .tol-actions{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin:1rem 0 1.25rem; }
.tol-btn{
  display:inline-block; font:600 1rem/1.2 "Lora", Georgia, serif;
  background:var(--ink); color:var(--paper) !important; text-decoration:none;
  border:1px solid var(--ink); border-radius:var(--radius); padding:.7rem 1.2rem; cursor:pointer;
}
.tol-btn:hover{ background:var(--brass); border-color:var(--brass); }
.tol-btn.is-quiet{ background:none; color:var(--ink) !important; }
.tol-btn.is-quiet:hover{ background:var(--paper); }
.tol-signin label{ display:block; font-size:.95rem; margin-bottom:.35rem; }
.tol-signin .tol-field{ display:flex; gap:.5rem; flex-wrap:wrap; }
.tol-signin input{
  flex:1 1 16rem; font:1rem "Lora", Georgia, serif; color:var(--ink);
  background:var(--paper); border:1px solid var(--ink-soft); border-radius:var(--radius); padding:.6rem .75rem;
}
.tol-msg{ min-height:1.4em; font-size:.92rem; margin-top:.5rem !important; }
.tol-msg.is-error{ color:var(--debit); }
.tol-msg.is-ok{ color:var(--credit); }
.tol-fine{ font-size:.85rem; color:var(--ink-soft); margin:.25rem 0 0 !important; }

/* ---------- Pager + footer ---------- */
.tol-pager{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin:4rem auto 0; padding:1.25rem clamp(1rem,4vw,2.5rem);
  border-top:1px solid var(--line); max-width:64rem;
  font-family:"Lora", Georgia, serif; box-sizing:border-box;
}
.tol-pager a{ text-decoration:none; color:var(--ink); display:block; padding:.5rem 0; }
.tol-pager a:hover .tol-pager-title{ text-decoration:underline; text-decoration-color:var(--brass); }
.tol-pager .is-next{ text-align:right; grid-column:2; }
.tol-pager-dir{ display:block; font-size:.85rem; color:var(--ink-soft); }
.tol-pager-title{ font-family:"Fraunces", Georgia, serif; font-size:1.1rem; }

.tol-foot{
  margin-top:2rem; padding:1.5rem clamp(1rem,4vw,2.5rem) 2.5rem;
  border-top:3px double var(--ink); background:var(--paper);
  font-family:"Lora", Georgia, serif; font-size:.92rem; color:var(--ink-soft);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; box-sizing:border-box;
}
.tol-foot a{ color:var(--ink-soft); }
.tol-foot a:hover{ color:var(--ink); }
.tol-foot-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; }

/* ---------- Focus ---------- */
.tol-bar :focus-visible, .tol-panel :focus-visible, .tol-gate :focus-visible,
.tol-pager :focus-visible, .tol-foot :focus-visible, .tol-index :focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}

/* ---------- Print: worksheets print clean ---------- */
@media print{
  .tol-bar, .tol-panel, .tol-scrim, .tol-pager, .tol-foot, .tol-gate, .tol-skip{ display:none !important; }
}

/* ---------- Guard chrome against page-level link/heading/list styles ---------- */
.tol-index a.tol-row, .tol-index a.tol-row *{ text-decoration:none; }
.tol-index a.tol-row:hover .tol-title{ text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:3px; }
.tol-index li{ max-width:none; margin:0; padding:0; }
div.tol-gate a.tol-btn, div.tol-gate button.tol-btn, main a.tol-btn{ text-decoration:none; }
div.tol-gate h2{ margin:0 0 .5rem; }
div.tol-gate p{ max-width:60ch; }
.tol-panel-head{ position:sticky; top:-1.25rem; background:var(--paper); padding:1.25rem 0 .75rem; margin-top:-1.25rem; z-index:1; border-bottom:1px solid var(--line); }
.tol-panel .tol-index-section{ scroll-margin-top:4.5rem; }


/* ---------- Easier-to-read navigation ---------- */
.tol-bar{ gap:1rem; padding-top:.75rem; padding-bottom:.75rem; }
.tol-sections{ gap:.15rem; align-items:center; }
.tol-bar button, .tol-bar a.tol-member{ font-size:1rem; padding:.5rem .8rem; }
.tol-bar button:hover{ border-color:var(--line); background:var(--paper-deep); text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:4px; }
.tol-bar button:focus-visible, .tol-bar a:focus-visible, .tol-close:focus-visible, .tol-row:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.tol-bar button[aria-current="true"]{ border-bottom:3px solid var(--brass); font-weight:600; }
.tol-bar a.tol-member{ margin-left:.35rem; font-weight:600; }
@media (max-width:980px){ .tol-sections button:not(.tol-all){ padding:.5rem .55rem; } }
@media (max-width:860px){
  .tol-sections{ display:none; }
  .tol-contents-btn{ display:inline-block; border-color:var(--ink-soft) !important; font-weight:600; }
}

.tol-panel{ width:min(38rem, 100vw); padding-top:0; }
.tol-panel-head{ position:sticky; top:0; z-index:1; background:var(--paper); padding:1.1rem 0 .75rem; margin:0; border-bottom:1px solid var(--line); }
.tol-panel-intro{ margin:.9rem 0 0; font-size:.95rem; color:var(--ink-soft); line-height:1.55; }
.tol-panel-safe{ margin:.6rem 0 0; font-size:.92rem; display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; }
.tol-panel-safe button{ font:inherit; color:inherit; background:none; border:1px solid currentColor; border-radius:999px; padding:.2rem .7rem; min-height:32px; cursor:pointer; }
@media print{ .tol-panel-safe{ display:none !important; } }
.tol-panel-tools{ margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem; }
.tol-panel-tools a{ display:inline-flex; align-items:center; gap:.35rem; min-height:44px; box-sizing:border-box; padding:.25rem .85rem; border:1px solid currentColor; border-radius:999px; font-size:.92rem; text-decoration:none; color:inherit; }
.tol-panel-tools a:hover, .tol-panel-tools a:focus-visible{ background:rgba(0,0,0,.05); }
@media print{ .tol-panel-tools{ display:none !important; } }
.tol-panel .tol-index-section{ margin-top:1.9rem; }
.tol-panel .tol-index-section > h3{ font-style:normal; font-weight:600; font-size:1.25rem; }
.tol-panel .tol-index-section > p{ font-size:.93rem; line-height:1.5; margin-bottom:.4rem; }
.tol-panel .tol-row{ padding:.7rem .4rem .7rem .55rem; grid-template-columns:4.6rem 1fr auto; }
.tol-panel .tol-code{ color:var(--brass-ink, #7A5620); }
.tol-panel .tol-title{ font-size:1.02rem; font-weight:600; }
.tol-panel .tol-title small{ font-weight:400; font-size:.9rem; line-height:1.45; margin-top:.2rem; }
.tol-panel .tol-row[aria-current="page"] .tol-title::after{ content:" (you are here)"; font-weight:400; font-size:.85rem; color:var(--ink-soft); }
@media (max-width:520px){ .tol-panel .tol-row{ grid-template-columns:1fr auto; } .tol-panel .tol-code:empty{ display:none; } .tol-panel .tol-code{ grid-column:1 / -1; } }

/* Pages with their own left sidebar keep it, placed below the sticky bar */
@media (min-width:861px){
  html.tol-own-side aside.sidebar{ top:var(--tol-bar-h, 58px); height:calc(100vh - var(--tol-bar-h, 58px)); }
}

/* ---------- Top-bar dropdowns: one short list per section ---------- */
.tol-nav-item{ position:relative; }
.tol-nav-item > button::after{
  content:""; display:inline-block; width:.38em; height:.38em; margin-left:.45em; vertical-align:.2em;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.55;
}
.tol-nav-item > button[aria-expanded="true"]{ background:var(--paper-deep); border-color:var(--line); }
.tol-nav-item > button[aria-expanded="true"]::after{ transform:rotate(225deg); vertical-align:-.05em; }
.tol-drop{
  position:absolute; top:calc(100% + .55rem); left:0; z-index:970;
  width:max-content; min-width:15rem; max-width:21rem;
  background:var(--paper); border:1px solid var(--ink); border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(33,29,23,.16); padding:.8rem .5rem .55rem;
  font-family:"Lora", Georgia, serif; text-align:left;
}
.tol-drop.is-right{ left:auto; right:0; }
.tol-drop[hidden]{ display:none; }
.tol-drop-blurb{ margin:0 .5rem .55rem; font-size:.85rem; line-height:1.45; color:var(--ink-soft); }
.tol-drop ul{ list-style:none; margin:0; padding:0; }
.tol-drop li{ margin:0; }
.tol-drop a{
  display:flex; gap:.6rem; align-items:baseline; padding:.42rem .5rem; border-radius:var(--radius);
  color:var(--ink); text-decoration:none; font-size:.97rem; line-height:1.35;
}
.tol-drop a:hover{ background:var(--paper-deep); }
.tol-drop a[aria-current="page"]{ background:var(--paper-deep); font-weight:600; }
.tol-drop-code{ flex:none; min-width:3.6rem; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.72rem; color:var(--brass-ink, #7A5620); }
.tol-bar .tol-drop .tol-drop-all{
  display:block; width:100%; margin:.45rem 0 0; padding:.6rem .5rem .2rem; text-align:left;
  border:0; border-top:1px solid var(--line); border-radius:0; background:none;
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.76rem; color:var(--ink-soft);
}
.tol-bar .tol-drop .tol-drop-all:hover{ background:none; color:var(--ink); }

/* Medium screens: tighter spacing so all seven sections fit on one line */
.tol-nav-item > button{ white-space:nowrap; }
@media (max-width:1180px) and (min-width:981px){
  .tol-brand{ font-size:1.02rem; }
  .tol-bar{ gap:.6rem; }
  .tol-sections .tol-nav-item > button{ padding:.5rem .45rem; font-size:.93rem; }
  .tol-nav-item > button::after{ margin-left:.3em; }
}

/* ---------- The full list: collapsed sections, open one at a time ---------- */
.tol-panel .tol-acc{ margin:0; border-bottom:1px solid var(--line); }
.tol-panel .tol-acc > summary{
  list-style:none; cursor:pointer; display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.95rem .2rem;
}
.tol-panel .tol-acc > summary::-webkit-details-marker{ display:none; }
.tol-acc-title{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.2rem; }
.tol-acc-count{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.74rem; color:var(--ink-soft); white-space:nowrap; }
.tol-acc-count::after{ content:" +"; color:var(--brass); font-size:.95rem; }
.tol-acc[open] .tol-acc-count::after{ content:" \2212"; }
.tol-panel .tol-acc > summary:hover .tol-acc-title{ text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:4px; }
.tol-panel .tol-acc > summary:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.tol-panel .tol-acc > p{ margin:0 0 .5rem; }
.tol-panel .tol-acc > ol{ margin-bottom:1rem; }

/* ---------- Simple first, dig deeper on demand ----------
   Every section's default page is the simple version. The full version sits
   beside it as <name>-in-depth.html, and "Dig deeper" links jump straight to
   the matching section there. */

/* The pickaxe: <a class="dig" href="/book/chapter-2-in-depth.html#inputs">Dig deeper: the inputs</a> */
.dig{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.8rem; letter-spacing:.02em;
  color:var(--brass-ink, #7A5620) !important; text-decoration:none !important;
  align-items:flex-start; line-height:1.45; max-width:100%;
}
.dig::before{
  content:""; flex:none; width:1.35em; height:1.35em; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4.4Q20.2 0.8 19.6 19Q15.6 9.6 5 4.4Z'/%3E%3Cpath d='M3.2 20.8 14.4 9.6' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4.4Q20.2 0.8 19.6 19Q15.6 9.6 5 4.4Z'/%3E%3Cpath d='M3.2 20.8 14.4 9.6' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dig:hover{ color:var(--ink) !important; text-decoration:underline !important; text-underline-offset:3px; }
.dig:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* One line under the title saying which version this is, with the way across */
.depth-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1rem;
  margin:-1.25rem 0 2rem; padding:.55rem 0; border-bottom:1px solid var(--line);
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.76rem; color:var(--ink-soft);
}
.read .depth-bar{ max-width:none; }
.depth-bar a:not(.dig){ color:var(--ink-soft); text-underline-offset:3px; }

/* Simple pages: a handful of big ideas, each with its own way down */
/* Simple pages borrow the home page's look: a tinted lede, a grid of cards, a callout with a button */
.read .simple-lede{
  max-width:none; margin:0 0 1.6rem; padding:.85rem 1.1rem;
  background:var(--paper-deep); border-left:3px solid var(--brass); border-radius:var(--radius);
  font-size:1.1rem; line-height:1.6;
}
.read .ideas{
  list-style:none; padding:0 !important; margin:1.8rem 0 2rem !important; counter-reset:idea;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.read .ideas > li{
  counter-increment:idea; position:relative; max-width:none !important; margin:0 !important;
  display:flex; flex-direction:column; padding:1.15rem 1.25rem 1.1rem; background:var(--paper);
  transition:background .15s ease;
}
.read .ideas > li:last-child:nth-child(odd){ grid-column:1 / -1; }
.read .ideas > li:hover, .read .ideas > li:focus-within{ background:var(--paper-deep); }
.read .ideas > li::before{
  content:counter(idea, decimal-leading-zero); display:block; margin:0 0 .35rem;
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.7rem; letter-spacing:.08em; color:var(--brass-ink, #7A5620);
}
.ideas h2, .ideas h3, .read .ideas h2, .read .ideas h3{
  font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.2rem !important; line-height:1.25; margin:0 0 .45rem !important;
  text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; text-decoration-thickness:1px;
}
.read .ideas > li:hover h2, .read .ideas > li:hover h3{ text-decoration-color:var(--brass); }
.read .ideas p{ margin:0 0 .8rem !important; font-size:.97rem; line-height:1.6; color:var(--ink-soft); }
.read .ideas .dig{ margin-top:auto; }
/* The whole card opens its Dig deeper link */
.read .ideas .dig::after{ content:""; position:absolute; inset:0; }
.read .ideas .dig:focus-visible{ outline:none; }
.read .ideas > li:focus-within{ outline:2px solid var(--focus); outline-offset:-3px; }
.read .ideas > li:target{ background:var(--paper-deep); box-shadow:inset 4px 0 0 var(--brass); }
@media (max-width:720px){
  .read .ideas{ grid-template-columns:1fr; }
  .read .ideas > li:last-child:nth-child(odd){ grid-column:auto; }
}

.try-this{
  margin:2rem 0 2.5rem; padding:1.3rem 1.5rem 1.4rem;
  background:var(--paper-deep); border:1px solid var(--ink); border-left:6px solid var(--credit); border-radius:var(--radius);
}
.try-this strong{ font-family:"Fraunces", Georgia, serif; font-size:1.08rem; }
.try-this p{ margin:0 !important; max-width:62ch; }
.try-this p + p{ margin-top:.9rem !important; display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; }
.read .try-this p + p a{ font-weight:600; }
.read .try-this p + p a:first-child{
  display:inline-block; padding:.6rem 1.1rem; background:var(--ink); color:var(--paper);
  text-decoration:none; border-radius:var(--radius);
}
.read .try-this p + p a:first-child:hover{ background:var(--credit); color:var(--paper); }
.read .try-this p + p a:first-child:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.dig-list{ list-style:none; padding:0 !important; margin:.5rem 0 1.5rem !important; display:grid; gap:.45rem; }
.dig-list li{ margin:0 !important; }

/* In-depth pages: jump targets land below the sticky header, and briefly show where you landed */
[id]{ scroll-margin-top:calc(var(--tol-bar-h, 60px) + 1rem); }
.read h2:target, .read section:target > h2{ background:linear-gradient(transparent 60%, rgba(168,121,47,.22) 60%); }
@media print{ .depth-bar, .dig{ display:none !important; } }

details.deeper{
  margin:1.2rem 0; padding:.2rem 0 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
details.deeper > summary{
  cursor:pointer; list-style:none; padding:.7rem 0;
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.76rem; letter-spacing:.04em; color:var(--brass-ink, #7A5620);
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
}
details.deeper > summary::-webkit-details-marker{ display:none; }
details.deeper > summary::after{ content:"Show"; font-size:.72rem; color:var(--ink-soft); }
details.deeper[open] > summary::after{ content:"Hide"; }
details.deeper > summary:hover{ color:var(--ink); }
details.deeper > summary:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
details.deeper .deeper-body{ padding:0 0 1rem; }
details.deeper .deeper-body > :first-child{ margin-top:0; }

@media print{ details.deeper{ border:0; } details.deeper > summary{ display:none; } details.deeper .deeper-body{ padding:0; } }

/* ---------- "Start where you are" chooser (assets/js/start-where.js) ---------- */
.sw-opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:1rem 0 0; }
.sw-opt{
  font:inherit; text-align:left; cursor:pointer; display:flex; gap:.6rem; align-items:flex-start;
  padding:.75rem .85rem; background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); line-height:1.35; font-size:.95rem;
}
.sw-opt:hover{ background:var(--paper-deep); border-color:var(--brass); }
.sw-opt[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.sw-opt:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.sw-ico{ font-size:1.15rem; line-height:1.15; flex:none; }
.sw-opt[hidden]{ display:none; }
.sw-showmore{ font:inherit; margin:.6rem 0 0; padding:.5rem .9rem; background:none; color:var(--ink); border:1px dashed var(--brass); border-radius:var(--radius); cursor:pointer; }
.sw-showmore:hover{ background:var(--paper-deep); }
.sw-showmore:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.sw-out{ margin:1.2rem 0 0; padding:1.1rem 1.25rem 1.2rem; background:var(--paper-deep); border-left:5px solid var(--brass); border-radius:var(--radius); }
.sw-say{ font-size:1.04rem; line-height:1.65; margin:0 0 .9rem; max-width:64ch; }
.sw-picks{ list-style:none; margin:0; padding:0; counter-reset:sw; }
.sw-picks li{ margin:.55rem 0; padding-left:1.6rem; position:relative; counter-increment:sw; }
/* a single suggestion needs no number */
.sw-picks li:only-child{ padding-left:0; }
.sw-picks li:only-child::before{ content:none; }
.sw-picks li::before{
  content:counter(sw); position:absolute; left:0; top:.05rem;
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.72rem; color:var(--brass-ink, #7A5620);
}
.sw-picks a{ font-weight:600; display:inline-block; }
.sw-picks span{ display:block; font-size:.92rem; color:var(--ink-soft); line-height:1.5; }
.sw-more{ margin:1rem 0 0 !important; padding-top:.75rem; border-top:1px solid var(--line); font-size:.92rem; color:var(--ink-soft); }
@media (max-width:820px){ .sw-opts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sw-opts{ grid-template-columns:1fr; } }

/* A short, recognisable scene at the top of a chapter or guide */
.scene{
  margin:1.4rem 0 1.6rem; padding:1rem 1.25rem 1.05rem;
  border-left:4px solid var(--brass); background:var(--sheet, #FFFDF7);
  border-radius:var(--radius);
}
.scene-when{
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.7rem; letter-spacing:.06em;
  color:var(--brass-ink, #7A5620); margin:0 0 .4rem !important;
}
.scene p:not(.scene-when){
  margin:0 !important; font-family:"Fraunces", Georgia, serif; font-style:italic;
  font-size:1.08rem; line-height:1.6; color:var(--ink); max-width:60ch;
}
@media print{ .scene{ background:transparent; } }

/* "Dig deeper" link under a menu row that has an in-depth page */
.tol-index li > .tol-dig{ margin:.4rem 0 .5rem calc(5.2rem + 3px); font-size:.72rem; }
.tol-panel .tol-index li > .tol-dig{ margin-left:calc(5.65rem + 3px); }
@media (max-width:520px){ .tol-index li > .tol-dig, .tol-panel .tol-index li > .tol-dig{ margin-left:.55rem; } }

/* Below this width the seven sections no longer fit on one line: use the Menu button */
@media (max-width:980px){
  .tol-sections{ display:none; }
  .tol-contents-btn{ display:inline-block; border-color:var(--ink-soft) !important; font-weight:600; }
}
.tol-acc-here{ margin-left:.5rem; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.68rem; font-weight:400; color:var(--brass-ink, #7A5620); vertical-align:.15em; }

/* A safety note after the cards gets its own callout so it can't be missed */
.read .ideas + p#safety{
  margin:0 0 1.5rem; padding:.9rem 1.1rem; max-width:none;
  background:var(--paper-deep); border-left:4px solid var(--debit); border-radius:var(--radius);
  font-size:.98rem; line-height:1.6;
}

/* The privacy promise at the top of the footer */
.tol-foot .tol-promise{ flex-basis:100%; margin:0 0 .9rem; padding:0 0 .9rem; border-bottom:1px solid var(--line); font-size:.9rem; line-height:1.5; color:var(--ink); }
.tol-foot .tol-promise a{ color:var(--ink-soft); white-space:nowrap; }

/* ---------- Pastel watercolour splashes ----------
   The paints (generated SVG, drawn by the browser, nothing downloaded) and a
   decorative layer that site.js adds behind every page. Splashes peek in from
   the page edges so they never sit under text. Pages can opt out with
   <body data-no-wash> (the Conversation Reader places its own). */
:root{
  --wc-peach-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='18'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23F9C9B4' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23F9C9B4' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23F2A98C' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M100 22C150 18 184 60 178 104S140 184 96 180 18 150 22 100 52 26 100 22Z' fill='url(%23g)'/%3E%3Ccircle cx='66' cy='51' r='4.6' fill='%23F2A98C' opacity='.45'/%3E%3Ccircle cx='105' cy='81' r='2.8' fill='%23F2A98C' opacity='.45'/%3E%3Ccircle cx='145' cy='180' r='4.0' fill='%23F2A98C' opacity='.45'/%3E%3Ccircle cx='142' cy='95' r='3.8' fill='%23F2A98C' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wc-peach-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='29'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23F9C9B4' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23F9C9B4' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23F2A98C' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M92 20C140 10 190 48 182 98 176 150 132 186 86 176 40 168 12 130 24 84 32 50 60 26 92 20Z' fill='url(%23g)'/%3E%3Ccircle cx='160' cy='39' r='3.4' fill='%23F2A98C' opacity='.45'/%3E%3Ccircle cx='175' cy='93' r='2.3' fill='%23F2A98C' opacity='.45'/%3E%3Ccircle cx='108' cy='120' r='3.7' fill='%23F2A98C' opacity='.45'/%3E%3Ccircle cx='28' cy='46' r='5.4' fill='%23F2A98C' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wc-lavender-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='40'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23D9C8F0' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23D9C8F0' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23B9A0E0' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M92 20C140 10 190 48 182 98 176 150 132 186 86 176 40 168 12 130 24 84 32 50 60 26 92 20Z' fill='url(%23g)'/%3E%3Ccircle cx='137' cy='168' r='5.5' fill='%23B9A0E0' opacity='.45'/%3E%3Ccircle cx='28' cy='82' r='3.1' fill='%23B9A0E0' opacity='.45'/%3E%3Ccircle cx='72' cy='52' r='5.0' fill='%23B9A0E0' opacity='.45'/%3E%3Ccircle cx='90' cy='132' r='5.3' fill='%23B9A0E0' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wc-lavender-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='51'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23D9C8F0' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23D9C8F0' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23B9A0E0' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M110 26C160 34 186 80 172 122 160 164 110 188 70 170 30 152 16 104 36 66 50 40 80 22 110 26Z' fill='url(%23g)'/%3E%3Ccircle cx='82' cy='148' r='4.2' fill='%23B9A0E0' opacity='.45'/%3E%3Ccircle cx='82' cy='79' r='5.3' fill='%23B9A0E0' opacity='.45'/%3E%3Ccircle cx='85' cy='121' r='4.2' fill='%23B9A0E0' opacity='.45'/%3E%3Ccircle cx='138' cy='160' r='4.1' fill='%23B9A0E0' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wc-mint-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='62'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23C7EBD6' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23C7EBD6' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%2398D2B2' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M110 26C160 34 186 80 172 122 160 164 110 188 70 170 30 152 16 104 36 66 50 40 80 22 110 26Z' fill='url(%23g)'/%3E%3Ccircle cx='167' cy='64' r='2.3' fill='%2398D2B2' opacity='.45'/%3E%3Ccircle cx='80' cy='138' r='3.2' fill='%2398D2B2' opacity='.45'/%3E%3Ccircle cx='111' cy='63' r='4.0' fill='%2398D2B2' opacity='.45'/%3E%3Ccircle cx='61' cy='21' r='5.8' fill='%2398D2B2' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wc-mint-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='73'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23C7EBD6' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23C7EBD6' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%2398D2B2' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M100 22C150 18 184 60 178 104S140 184 96 180 18 150 22 100 52 26 100 22Z' fill='url(%23g)'/%3E%3Ccircle cx='91' cy='51' r='4.0' fill='%2398D2B2' opacity='.45'/%3E%3Ccircle cx='164' cy='66' r='3.8' fill='%2398D2B2' opacity='.45'/%3E%3Ccircle cx='170' cy='38' r='3.9' fill='%2398D2B2' opacity='.45'/%3E%3Ccircle cx='152' cy='148' r='2.8' fill='%2398D2B2' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wc-sky-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='84'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23C6DFF4' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23C6DFF4' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%2396C2E8' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M100 22C150 18 184 60 178 104S140 184 96 180 18 150 22 100 52 26 100 22Z' fill='url(%23g)'/%3E%3Ccircle cx='92' cy='29' r='4.0' fill='%2396C2E8' opacity='.45'/%3E%3Ccircle cx='153' cy='101' r='5.3' fill='%2396C2E8' opacity='.45'/%3E%3Ccircle cx='137' cy='147' r='5.4' fill='%2396C2E8' opacity='.45'/%3E%3Ccircle cx='113' cy='175' r='2.6' fill='%2396C2E8' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wc-sky-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='95'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23C6DFF4' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23C6DFF4' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%2396C2E8' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M92 20C140 10 190 48 182 98 176 150 132 186 86 176 40 168 12 130 24 84 32 50 60 26 92 20Z' fill='url(%23g)'/%3E%3Ccircle cx='156' cy='151' r='5.9' fill='%2396C2E8' opacity='.45'/%3E%3Ccircle cx='158' cy='52' r='5.8' fill='%2396C2E8' opacity='.45'/%3E%3Ccircle cx='27' cy='55' r='5.2' fill='%2396C2E8' opacity='.45'/%3E%3Ccircle cx='173' cy='41' r='4.5' fill='%2396C2E8' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wc-butter-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='106'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23F8E7AE' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23F8E7AE' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23EFD27A' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M92 20C140 10 190 48 182 98 176 150 132 186 86 176 40 168 12 130 24 84 32 50 60 26 92 20Z' fill='url(%23g)'/%3E%3Ccircle cx='142' cy='24' r='4.2' fill='%23EFD27A' opacity='.45'/%3E%3Ccircle cx='154' cy='141' r='2.2' fill='%23EFD27A' opacity='.45'/%3E%3Ccircle cx='86' cy='36' r='2.8' fill='%23EFD27A' opacity='.45'/%3E%3Ccircle cx='146' cy='113' r='3.7' fill='%23EFD27A' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wc-butter-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='117'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23F8E7AE' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23F8E7AE' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23EFD27A' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M110 26C160 34 186 80 172 122 160 164 110 188 70 170 30 152 16 104 36 66 50 40 80 22 110 26Z' fill='url(%23g)'/%3E%3Ccircle cx='81' cy='66' r='2.7' fill='%23EFD27A' opacity='.45'/%3E%3Ccircle cx='122' cy='60' r='4.2' fill='%23EFD27A' opacity='.45'/%3E%3Ccircle cx='50' cy='154' r='5.8' fill='%23EFD27A' opacity='.45'/%3E%3Ccircle cx='104' cy='109' r='3.8' fill='%23EFD27A' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wc-rose-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='128'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23F7C9D4' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23F7C9D4' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23EDA3B6' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M110 26C160 34 186 80 172 122 160 164 110 188 70 170 30 152 16 104 36 66 50 40 80 22 110 26Z' fill='url(%23g)'/%3E%3Ccircle cx='80' cy='123' r='4.0' fill='%23EDA3B6' opacity='.45'/%3E%3Ccircle cx='54' cy='143' r='2.1' fill='%23EDA3B6' opacity='.45'/%3E%3Ccircle cx='59' cy='101' r='4.6' fill='%23EDA3B6' opacity='.45'/%3E%3Ccircle cx='84' cy='167' r='4.9' fill='%23EDA3B6' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --wc-rose-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='139'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CradialGradient id='g' cx='45%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23F7C9D4' stop-opacity='.55'/%3E%3Cstop offset='.72' stop-color='%23F7C9D4' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23EDA3B6' stop-opacity='.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg filter='url(%23w)'%3E%3Cpath d='M100 22C150 18 184 60 178 104S140 184 96 180 18 150 22 100 52 26 100 22Z' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='177' r='4.2' fill='%23EDA3B6' opacity='.45'/%3E%3Ccircle cx='97' cy='160' r='2.0' fill='%23EDA3B6' opacity='.45'/%3E%3Ccircle cx='107' cy='91' r='3.4' fill='%23EDA3B6' opacity='.45'/%3E%3Ccircle cx='58' cy='175' r='5.3' fill='%23EDA3B6' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
}
html{ position:relative; }
html, body{ overflow-x:clip; }
.tol-wash{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.tol-wash i{ position:absolute; display:block; background:no-repeat center / contain; opacity:.75; }
.tol-wash i:nth-child(1){ background-image:var(--wc-peach-1);    width:20rem; height:20rem; right:-9rem; top:3rem; }
.tol-wash i:nth-child(2){ background-image:var(--wc-lavender-1); width:15rem; height:15rem; left:-8rem;  top:14%; }
.tol-wash i:nth-child(3){ background-image:var(--wc-mint-1);     width:17rem; height:17rem; right:-9rem; top:30%; }
.tol-wash i:nth-child(4){ background-image:var(--wc-butter-1);   width:14rem; height:14rem; left:-7rem;  top:46%; }
.tol-wash i:nth-child(5){ background-image:var(--wc-sky-1);      width:18rem; height:18rem; right:-10rem; top:62%; }
.tol-wash i:nth-child(6){ background-image:var(--wc-rose-1);     width:15rem; height:15rem; left:-8rem;  top:78%; }
.tol-wash i:nth-child(7){ background-image:var(--wc-lavender-2); width:12rem; height:12rem; right:-6rem; top:92%; }
.tol-wash i:nth-child(8){ background-image:var(--wc-mint-2);     width:9rem;  height:9rem;  left:6%;     top:9rem; opacity:.55; }
@media (min-width:1400px){ .tol-wash i{ transform:scale(1.2); } .tol-wash i:nth-child(odd){ margin-right:3rem; } .tol-wash i:nth-child(even){ margin-left:3rem; } }
@media (max-width:760px){
  .tol-wash i{ opacity:.42; width:9.5rem !important; height:9.5rem !important; }
  .tol-wash i:nth-child(odd){ right:-3.8rem !important; }
  .tol-wash i:nth-child(even){ left:-3.8rem !important; }
  .tol-wash i:nth-child(8){ display:none; }
}
@media print{ .tol-wash{ display:none; } }

/* ---------- Cute simple pages ----------
   site.js adds body.tol-simple on pages with idea cards, and data-sec for the section,
   which picks the colour of the little buddy by the title. Decorative only. */
:root{
  --buddy-peach: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 8c17 0 30 11 32 27 2 17-8 34-30 36C19 73 7 60 8 43 9 23 22 8 40 8z' fill='%23F9C9B4' stroke='%23E9A088' stroke-width='3'/%3E%3Cellipse cx='30' cy='20' rx='7' ry='4' fill='white' opacity='.55' transform='rotate(-20 30 20)'/%3E%3Ccircle cx='30' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='50' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='31.2' cy='38.8' r='1.1' fill='white'/%3E%3Ccircle cx='51.2' cy='38.8' r='1.1' fill='white'/%3E%3Cpath d='M34 49c3.5 3.5 8.5 3.5 12 0' fill='none' stroke='%23211D17' stroke-width='2.6' stroke-linecap='round'/%3E%3Cellipse cx='23' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3Cellipse cx='57' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3C/svg%3E");
  --buddy-lavender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 8c17 0 30 11 32 27 2 17-8 34-30 36C19 73 7 60 8 43 9 23 22 8 40 8z' fill='%23D9C8F0' stroke='%23B39BDC' stroke-width='3'/%3E%3Cellipse cx='30' cy='20' rx='7' ry='4' fill='white' opacity='.55' transform='rotate(-20 30 20)'/%3E%3Ccircle cx='30' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='50' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='31.2' cy='38.8' r='1.1' fill='white'/%3E%3Ccircle cx='51.2' cy='38.8' r='1.1' fill='white'/%3E%3Cpath d='M34 49c3.5 3.5 8.5 3.5 12 0' fill='none' stroke='%23211D17' stroke-width='2.6' stroke-linecap='round'/%3E%3Cellipse cx='23' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3Cellipse cx='57' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3C/svg%3E");
  --buddy-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 8c17 0 30 11 32 27 2 17-8 34-30 36C19 73 7 60 8 43 9 23 22 8 40 8z' fill='%23C7EBD6' stroke='%238CC7A5' stroke-width='3'/%3E%3Cellipse cx='30' cy='20' rx='7' ry='4' fill='white' opacity='.55' transform='rotate(-20 30 20)'/%3E%3Ccircle cx='30' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='50' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='31.2' cy='38.8' r='1.1' fill='white'/%3E%3Ccircle cx='51.2' cy='38.8' r='1.1' fill='white'/%3E%3Cpath d='M34 49c3.5 3.5 8.5 3.5 12 0' fill='none' stroke='%23211D17' stroke-width='2.6' stroke-linecap='round'/%3E%3Cellipse cx='23' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3Cellipse cx='57' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3C/svg%3E");
  --buddy-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 8c17 0 30 11 32 27 2 17-8 34-30 36C19 73 7 60 8 43 9 23 22 8 40 8z' fill='%23C6DFF4' stroke='%238FBCE3' stroke-width='3'/%3E%3Cellipse cx='30' cy='20' rx='7' ry='4' fill='white' opacity='.55' transform='rotate(-20 30 20)'/%3E%3Ccircle cx='30' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='50' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='31.2' cy='38.8' r='1.1' fill='white'/%3E%3Ccircle cx='51.2' cy='38.8' r='1.1' fill='white'/%3E%3Cpath d='M34 49c3.5 3.5 8.5 3.5 12 0' fill='none' stroke='%23211D17' stroke-width='2.6' stroke-linecap='round'/%3E%3Cellipse cx='23' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3Cellipse cx='57' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3C/svg%3E");
  --buddy-butter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 8c17 0 30 11 32 27 2 17-8 34-30 36C19 73 7 60 8 43 9 23 22 8 40 8z' fill='%23F8E7AE' stroke='%23E6C766' stroke-width='3'/%3E%3Cellipse cx='30' cy='20' rx='7' ry='4' fill='white' opacity='.55' transform='rotate(-20 30 20)'/%3E%3Ccircle cx='30' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='50' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='31.2' cy='38.8' r='1.1' fill='white'/%3E%3Ccircle cx='51.2' cy='38.8' r='1.1' fill='white'/%3E%3Cpath d='M34 49c3.5 3.5 8.5 3.5 12 0' fill='none' stroke='%23211D17' stroke-width='2.6' stroke-linecap='round'/%3E%3Cellipse cx='23' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3Cellipse cx='57' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3C/svg%3E");
  --buddy-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 8c17 0 30 11 32 27 2 17-8 34-30 36C19 73 7 60 8 43 9 23 22 8 40 8z' fill='%23F7C9D4' stroke='%23E79AAE' stroke-width='3'/%3E%3Cellipse cx='30' cy='20' rx='7' ry='4' fill='white' opacity='.55' transform='rotate(-20 30 20)'/%3E%3Ccircle cx='30' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='50' cy='40' r='3.4' fill='%23211D17'/%3E%3Ccircle cx='31.2' cy='38.8' r='1.1' fill='white'/%3E%3Ccircle cx='51.2' cy='38.8' r='1.1' fill='white'/%3E%3Cpath d='M34 49c3.5 3.5 8.5 3.5 12 0' fill='none' stroke='%23211D17' stroke-width='2.6' stroke-linecap='round'/%3E%3Cellipse cx='23' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3Cellipse cx='57' cy='47' rx='4.5' ry='3' fill='%23F2A3B6' opacity='.75'/%3E%3C/svg%3E");
}
.read-code .formal{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-style:normal; font-size:.66em; letter-spacing:.02em; color:var(--ink-soft); }
.tol-simple .read-head{ position:relative; }
.tol-simple .read-head h1{ padding-right:5.4rem; }
.tol-simple .read-head::after{
  content:""; position:absolute; right:0; bottom:1.1rem; width:4.8rem; height:4.8rem; pointer-events:none;
  background:var(--buddy-peach) no-repeat center / contain; animation:tol-bob 8s var(--ease-soft, ease-in-out) infinite;
}
body[data-sec="self"] .read-head::after, body[data-sec="media"] .read-head::after{ background-image:var(--buddy-lavender); }
body[data-sec="relationships"] .read-head::after{ background-image:var(--buddy-rose); }
body[data-sec="book"] .read-head::after, body[data-sec="about"] .read-head::after{ background-image:var(--buddy-sky); }
body[data-sec="workpapers"] .read-head::after{ background-image:var(--buddy-mint); }
body[data-sec="program"] .read-head::after, body[data-sec="tools"] .read-head::after{ background-image:var(--buddy-butter); }
@keyframes tol-bob{ 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-2px) rotate(1.5deg); } }

.tol-gentle{
  display:inline-flex; align-items:center; gap:.45rem; margin:-.8rem 0 1.4rem !important; padding:.35rem .85rem;
  background:#EAF6EF; border:1px solid #BFE3CF; border-radius:999px; font-size:.9rem; color:#2F5A3C; max-width:none !important;
}
.tol-simple .simple-lede{ border-radius:16px; }
.tol-simple .scene{ border-radius:16px; }
.tol-simple .read .ideas, .read.tol-cute .ideas{ border-radius:20px; }
.tol-simple .ideas{ border-radius:20px !important; }
.tol-simple .ideas > li::before{
  display:inline-grid; place-items:center; width:2.1rem; height:2.1rem; margin:0 0 .5rem; border-radius:50%;
  font-size:.72rem; font-weight:600; color:var(--ink); letter-spacing:0; background:#F9C9B4;
}
.tol-simple .ideas > li:nth-child(6n+2)::before{ background:#D9C8F0; }
.tol-simple .ideas > li:nth-child(6n+3)::before{ background:#C7EBD6; }
.tol-simple .ideas > li:nth-child(6n+4)::before{ background:#C6DFF4; }
.tol-simple .ideas > li:nth-child(6n+5)::before{ background:#F8E7AE; }
.tol-simple .ideas > li:nth-child(6n+6)::before{ background:#F7C9D4; }
.tol-simple .ideas > li:hover::before{ transform:rotate(-8deg) scale(1.08); transition:transform .15s; }
.tol-simple .try-this{ border-radius:18px; }
.tol-simple .read .try-this p + p a:first-child, .tol-simple .try-this p + p a:first-child{ border-radius:999px !important; padding:.6rem 1.3rem !important; }
@media (max-width:560px){
  .tol-simple .read-head h1{ padding-right:3.9rem; }
  .tol-simple .read-head::after{ width:3.5rem; height:3.5rem; bottom:1rem; }
}
@media (prefers-reduced-motion: reduce){ .tol-simple .read-head::after{ animation:none; } }
@media print{ .tol-simple .read-head::after, .tol-gentle{ display:none; } }

/* Full pages: a smaller buddy and a gentle "skim it" note */
.tol-deep .read-head{ position:relative; }
.tol-deep .read-head h1{ padding-right:4.2rem; }
.tol-deep .read-head::after{ content:""; position:absolute; right:0; bottom:1.1rem; width:3.6rem; height:3.6rem; pointer-events:none;
  background:var(--buddy-peach) no-repeat center / contain; opacity:.9; }
.tol-gentle.is-deep{ background:#F3EEF9; border-color:#D9C8F0; color:#4E3F6B; margin-top:.2rem !important; }
@media (max-width:560px){ .tol-deep .read-head h1{ padding-right:3.4rem; } .tol-deep .read-head::after{ width:2.9rem; height:2.9rem; } }
@media print{ .tol-deep .read-head::after{ display:none; } }
/* The sign-up box, softened */
div.tol-gate{ border-radius:20px !important; overflow:hidden; }
div.tol-gate a.tol-btn, div.tol-gate button.tol-btn, div.tol-gate button{ border-radius:999px !important; }

/* ---------- Calm: more breathing room, slower movement ---------- */
.read p{ line-height:1.8; }
.read .ideas > li{ padding:1.35rem 1.4rem 1.25rem; }
.tol-simple .ideas > li:hover::before{ transform:none; }
.read .ideas > li{ transition:background .6s ease; }
.tol-wash i{ animation:tol-drift 60s ease-in-out infinite alternate; }
.tol-wash i:nth-child(even){ animation-duration:75s; animation-direction:alternate-reverse; }
@keyframes tol-drift{ from{ translate:0 0; } to{ translate:0 -14px; } }
/* Professor Puddles sits in the same corner on the home page as everywhere else, so he never covers the situation buttons */
@media (prefers-reduced-motion: reduce){ .tol-wash i{ animation:none; } }

/* ---------- "Breathe with me": a one-minute calm break on every page ---------- */
.tol-breathe-btn{
  position:fixed; right:max(1rem, env(safe-area-inset-right)); bottom:max(1rem, env(safe-area-inset-bottom)); z-index:880;
  display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .95rem .55rem .7rem;
  font:500 .92rem/1 "Lora", Georgia, serif; color:#2F3A5C; background:rgba(234,240,250,.94);
  border:1px solid #BFD0EA; border-radius:999px; box-shadow:0 6px 20px rgba(47,58,92,.14); cursor:pointer;
}
.tol-breathe-btn:hover{ background:#E1EAF8; }
.tol-breathe-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.tol-breathe-btn svg{ width:1.3rem; height:1.3rem; }
body:has(.tol-breathe-btn){ padding-bottom:4.5rem; } /* the last thing on a page never sits under the Breathe button */
@media (max-width:560px){ .tol-breathe-btn{ padding:.5rem .8rem .5rem .6rem; font-size:.85rem; } }
.tol-breathe{
  position:fixed; inset:0; z-index:990; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  padding:2rem 1rem; text-align:center; color:#F4F1FA;
  background:radial-gradient(ellipse at 50% 35%, #4A4775 0%, #2A2D52 55%, #1C1F3A 100%);
}
.tol-breathe[hidden]{ display:none; }
.tol-breathe-orb{
  width:9rem; height:9rem; border-radius:50%;
  background:radial-gradient(circle at 45% 40%, #FFF6E0 0%, #F9D9B8 35%, rgba(217,200,240,.55) 70%, rgba(217,200,240,0) 100%);
  box-shadow:0 0 60px 20px rgba(249,217,184,.25); transform:scale(.7); transition:transform 4s ease-in-out;
}
.tol-breathe-orb.is-out{ transition-duration:6s; }
.tol-breathe-word{ font-family:"Fraunces", Georgia, serif; font-size:1.7rem; margin:0; min-height:2.2rem; letter-spacing:.01em; }
.tol-breathe-sub{ margin:0; font-size:.95rem; color:#CFC9E6; max-width:24rem; }
.tol-breathe-row{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.tol-breathe-row button, .tol-breathe-row a{
  font:inherit; font-size:.92rem; padding:.55rem 1.1rem; border-radius:999px; cursor:pointer; text-decoration:none;
  color:#F4F1FA; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3);
}
.tol-breathe-row button:hover, .tol-breathe-row a:hover{ background:rgba(255,255,255,.16); }
.tol-breathe-row :focus-visible{ outline:2px solid #F9D9B8; outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .tol-breathe-orb{ transition-timing-function:linear; } }
@media print{ .tol-breathe-btn, .tol-breathe{ display:none !important; } }

/* ---------- The logo, mascots and the app ---------- */
.tol-brand{ display:inline-flex; align-items:center; gap:.45rem; }
.tol-logo{ width:2.25rem; height:2.25rem; flex:none; margin:-.35rem 0 -.25rem -.2rem; transition:transform .25s; }
.tol-brand:hover .tol-logo{ transform:rotate(-6deg) scale(1.06); }
@media (max-width:560px){ .tol-logo{ width:1.9rem; height:1.9rem; } }

/* Each section has its own mascot beside the page title */
.tol-simple .read-head::after, .tol-deep .read-head::after{ background-image:url("/assets/img/mascots/heart-bubble.svg"); }
body[data-sec="self"] .read-head::after, body[data-sec="media"] .read-head::after{ background-image:url("/assets/img/mascots/bubble-buddy.svg"); }
body[data-sec="relationships"] .read-head::after{ background-image:url("/assets/img/mascots/two-buddies.svg"); }
body[data-sec="book"] .read-head::after, body[data-sec="about"] .read-head::after{ background-image:url("/assets/img/mascots/heart-book.svg"); }
body[data-sec="workpapers"] .read-head::after{ background-image:url("/assets/img/mascots/buddy-ledger.svg"); }
body[data-sec="program"] .read-head::after, body[data-sec="tools"] .read-head::after{ background-image:url("/assets/img/mascots/balanced-heart.svg"); }

.tol-foot-brand{ display:inline-flex; align-items:center; gap:.5rem; }
.tol-foot-brand img{ width:2.5rem; height:2.5rem; flex:none; }
.tol-install-link{ font:inherit; color:inherit; background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; }

.tol-install{ position:fixed; inset:0; z-index:995; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(43,38,32,.35); }
.tol-install-card{ max-width:24rem; background:#FFFBF2; border:1px solid #E6D9B8; border-radius:24px; padding:1.5rem 1.4rem 1.3rem; text-align:center; box-shadow:0 20px 50px rgba(43,38,32,.2); }
.tol-install-card img{ border-radius:18px; }
.tol-install-card h2{ font-family:"Fraunces", Georgia, serif; font-size:1.35rem; margin:.6rem 0 .4rem; }
.tol-install-card p{ margin:0 0 .8rem; color:var(--ink-soft); }
.tol-install-card ol{ text-align:left; margin:0 0 1rem; padding-left:1.3rem; }
.tol-install-card li{ margin:.3rem 0; }
.tol-install-close, .tol-invite button{ font:inherit; border-radius:999px; padding:.55rem 1.2rem; border:1px solid #D9C8F0; background:#EDE3F8; color:var(--ink); cursor:pointer; }
.tol-invite{ position:fixed; left:.75rem; right:.75rem; bottom:4.4rem; z-index:870; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; padding:.8rem 1rem;
  background:#FFFBF2; border:1px solid #E6D9B8; border-radius:20px; box-shadow:0 10px 30px rgba(43,38,32,.15); }
.tol-invite p{ flex:1 1 12rem; margin:0; font-size:.92rem; }
.tol-invite span{ display:flex; gap:.4rem; margin-left:auto; }
.tol-invite .tol-invite-no{ background:transparent; border-color:#E6D9B8; }

/* Pastel bubbles and hearts drifting in the background.
   Bubbles are blown up, float, and pop into droplets; hearts crack, drift apart, and heal. */
.tol-wash b{ position:absolute; display:block; width:var(--s,30px); height:var(--s,30px); }
.tol-bub{ animation:tol-rise var(--d,22s) ease-in-out infinite; animation-delay:var(--dl,0s); }
.tol-bub::before{ content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--rim,#EDA3B6);
  background:radial-gradient(circle at 34% 30%, #fff 0 14%, rgba(255,255,255,.6) 17%, var(--tint,#FBE3EA) 60%, var(--rim,#EDA3B6) 100%);
  animation:tol-blow var(--d,22s) ease-in-out infinite; animation-delay:var(--dl,0s); }
.tol-bub::after{ content:""; position:absolute; inset:0; border-radius:50%; border:3px dotted var(--rim,#EDA3B6); opacity:0;
  animation:tol-pop var(--d,22s) ease-out infinite; animation-delay:var(--dl,0s); }
@keyframes tol-blow{ 0%{ scale:.1; opacity:0; } 12%{ scale:1; opacity:.8; } 76%{ scale:1; opacity:.8; } 81%{ scale:1.15; opacity:.8; } 83%,100%{ scale:1.3; opacity:0; } }
@keyframes tol-rise{ 0%{ translate:0 0; } 25%{ translate:28px -80px; } 55%{ translate:-22px -170px; } 80%,100%{ translate:14px -240px; } }
@keyframes tol-pop{ 0%,81%{ opacity:0; scale:1; } 84%{ opacity:.85; scale:1.25; } 92%,100%{ opacity:0; scale:2.1; } }

.tol-heart{ opacity:.7; animation:tol-bob-soft 32s var(--ease-soft, ease-in-out) infinite, tol-mend var(--d,26s) ease-in-out infinite; animation-delay:var(--dl,0s); }
.tol-heart::before, .tol-heart::after{ content:""; position:absolute; inset:0; background:var(--tint,#F4A7BB); transform-origin:50% 95%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S3 15.2 3 8.9C3 6 5.2 4 7.7 4c1.8 0 3.3 1 4.3 2.5C13 5 14.5 4 16.3 4 18.8 4 21 6 21 8.9 21 15.2 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S3 15.2 3 8.9C3 6 5.2 4 7.7 4c1.8 0 3.3 1 4.3 2.5C13 5 14.5 4 16.3 4 18.8 4 21 6 21 8.9 21 15.2 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tol-heart::before{ clip-path:polygon(0 0, 50% 0, 50% 28%, 42% 44%, 56% 60%, 46% 76%, 50% 100%, 0 100%); animation:tol-crack-l var(--d,26s) ease-in-out infinite; animation-delay:var(--dl,0s); }
.tol-heart::after{ clip-path:polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 46% 76%, 56% 60%, 42% 44%, 50% 28%); animation:tol-crack-r var(--d,26s) ease-in-out infinite; animation-delay:var(--dl,0s); }
@keyframes tol-crack-l{ 0%,58%{ transform:none; } 64%,76%{ transform:translateX(-3px) rotate(-22deg); } 86%,100%{ transform:none; } }
@keyframes tol-crack-r{ 0%,58%{ transform:none; } 64%,76%{ transform:translateX(3px) rotate(22deg); } 86%,100%{ transform:none; } }
@keyframes tol-mend{ 0%,86%{ scale:1; } 90%{ scale:1.22; } 95%,100%{ scale:1; } }
@keyframes tol-bob-soft{ 0%,100%{ translate:0 0; } 25%{ translate:40px -30px; } 50%{ translate:10px -70px; } 75%{ translate:-35px -30px; } }

/* spread across the page, drifting behind the words */
.tol-wash b:nth-of-type(1){ left:8%; top:10%; --s:40px; --d:20s; --dl:-3s; --tint:#FBE3EA; --rim:#EDA3B6; }
.tol-wash b:nth-of-type(2){ left:72%; top:8%; --s:30px; --d:28s; --dl:-9s; --tint:#F7B8C6; }
.tol-wash b:nth-of-type(3){ left:38%; top:17%; --s:28px; --d:24s; --dl:-14s; --tint:#EAF4FC; --rim:#96C2E8; }
.tol-wash b:nth-of-type(4){ left:84%; top:24%; --s:44px; --d:24s; --dl:-7s; --tint:#E8F6EE; --rim:#98D2B2; }
.tol-wash b:nth-of-type(5){ left:22%; top:31%; --s:30px; --d:32s; --dl:-20s; --tint:#F9C9B4; }
.tol-wash b:nth-of-type(6){ left:58%; top:36%; --s:36px; --d:24s; --dl:-11s; --tint:#FDF3D2; --rim:#EFD27A; }
.tol-wash b:nth-of-type(7){ left:6%; top:45%; --s:26px; --d:24s; --dl:-2s; --tint:#EFE6FA; --rim:#B9A0E0; }
.tol-wash b:nth-of-type(8){ left:46%; top:50%; --s:32px; --d:28s; --dl:-16s; --tint:#F7B8C6; }
.tol-wash b:nth-of-type(9){ left:78%; top:57%; --s:34px; --d:24s; --dl:-5s; --tint:#FDEBDF; --rim:#EBA88E; }
.tol-wash b:nth-of-type(10){ left:28%; top:64%; --s:32px; --d:28s; --dl:-18s; --tint:#E8F6EE; --rim:#98D2B2; }
.tol-wash b:nth-of-type(11){ left:64%; top:70%; --s:40px; --d:24s; --dl:-6s; --tint:#FBE3EA; --rim:#EDA3B6; }
.tol-wash b:nth-of-type(12){ left:12%; top:77%; --s:28px; --d:32s; --dl:-12s; --tint:#D9C8F0; }
.tol-wash b:nth-of-type(13){ left:50%; top:84%; --s:30px; --d:24s; --dl:-4s; --tint:#EAF4FC; --rim:#96C2E8; }
.tol-wash b:nth-of-type(14){ left:86%; top:88%; --s:26px; --d:28s; --dl:-15s; --tint:#F9C9B4; }
.tol-wash b:nth-of-type(15){ left:34%; top:93%; --s:36px; --d:24s; --dl:-9s; --tint:#FDF3D2; --rim:#EFD27A; }
.tol-wash b:nth-of-type(16){ left:68%; top:97%; --s:28px; --d:24s; --dl:-1s; --tint:#EFE6FA; --rim:#B9A0E0; }
.tol-wash b{ opacity:.55; }
.tol-wash b.tol-heart{ opacity:.6; }
@media (max-width:760px){ .tol-wash b{ scale:.75; } }
@media (prefers-reduced-motion: reduce){ .tol-wash b, .tol-wash b::before, .tol-wash b::after{ animation:none !important; } .tol-bub::before{ opacity:.7; } .tol-bub::after{ display:none; } }
@media print{ .tol-invite, .tol-install{ display:none !important; } }
@media (max-width:420px){
  .tol-bar a, .tol-bar button{ white-space:nowrap; }
  .tol-brand{ font-size:.95rem !important; gap:.35rem; }
  .tol-logo{ width:1.7rem; height:1.7rem; }
}
@media (max-width:350px){ .tol-brand span{ font-size:.85rem; } }
.tol-welcome{ display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem; margin:0 0 1.4rem !important; max-width:none !important;
  background:#F3EEF9; border:1px solid #D9C8F0; border-radius:18px; color:#4E3F6B; }
.tol-welcome img{ flex:none; }

/* Breathe: the focus prompt, a ring that fills with each half-breath, a countdown, six dots */
.tol-breathe{ gap:1.1rem; overflow:auto; }
.tol-breathe > *{ position:relative; z-index:1; }
.tol-breathe-bg{ position:absolute !important; inset:0; z-index:0 !important; overflow:hidden; pointer-events:none; }
.tol-breathe-bg b{ position:absolute; display:block; width:var(--s,30px); height:var(--s,30px); opacity:.7; }
.tol-breathe-bg b:nth-of-type(1){ left:10%; top:78%; --s:38px; --d:20s; --dl:-2s;  --tint:#FBE3EA; --rim:#EDA3B6; }
.tol-breathe-bg b:nth-of-type(2){ left:22%; top:30%; --s:28px; --d:24s; --dl:-8s;  --tint:#F7B8C6; }
.tol-breathe-bg b:nth-of-type(3){ right:12%; top:66%; --s:32px; --d:20s; --dl:-12s; --tint:#EAF4FC; --rim:#96C2E8; }
.tol-breathe-bg b:nth-of-type(4){ right:20%; top:22%; --s:42px; --d:24s; --dl:-5s;  --tint:#E8F6EE; --rim:#98D2B2; }
.tol-breathe-bg b:nth-of-type(5){ left:6%;  top:46%; --s:26px; --d:28s; --dl:-17s; --tint:#D9C8F0; }
.tol-breathe-bg b:nth-of-type(6){ right:6%; top:44%; --s:30px; --d:24s; --dl:-9s;  --tint:#FDF3D2; --rim:#EFD27A; }
.tol-breathe-bg b:nth-of-type(7){ left:40%; top:88%; --s:24px; --d:24s; --dl:-3s;  --tint:#EFE6FA; --rim:#B9A0E0; }
.tol-breathe-bg b:nth-of-type(8){ right:34%; top:90%; --s:26px; --d:24s; --dl:-14s; --tint:#F9C9B4; }
.tol-breathe-bg b:nth-of-type(9){ left:14%; top:10%; --s:30px; --d:28s; --dl:-20s; --tint:#FDEBDF; --rim:#EBA88E; }
.tol-breathe-focus{ margin:0; max-width:26rem; min-height:3.6rem; font-family:"Fraunces", Georgia, serif; font-size:1.3rem; line-height:1.35; color:#FFF6E0; }
.tol-breathe-focus small{ display:block; margin-top:.3rem; font-family:"Lora", Georgia, serif; font-size:.92rem; color:#CFC9E6; }
.tol-breathe-stage{ position:relative; width:11rem; height:11rem; display:grid; place-items:center; }
.tol-breathe-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.tol-breathe-ring circle{ fill:none; stroke-width:3; }
.tol-breathe-ring .track{ stroke:rgba(255,240,215,.16); }
.tol-breathe-ring .fill{ stroke:#F9D9B8; stroke-linecap:round; }
.tol-breathe-orb{ display:grid; place-items:center; }
.tol-breathe-count{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:2.2rem; color:#4A3F6B; }
.tol-breathe-dots{ list-style:none; display:flex; gap:.55rem; margin:0; padding:0; }
.tol-breathe-dots li{ width:.7rem; height:.7rem; border-radius:50%; background:rgba(255,255,255,.18); transition:background .6s, transform .6s; }
.tol-breathe-dots li.done{ background:#F7B8C6; }
.tol-breathe-dots li.now{ background:#F9D9B8; transform:scale(1.35); }
.tol-breathe-row button[aria-pressed="true"]{ background:rgba(249,217,184,.2); border-color:#F9D9B8; }
@media (max-height:700px){ .tol-breathe{ gap:.7rem; justify-content:flex-start; padding-top:1.2rem; } .tol-breathe-stage{ width:8.5rem; height:8.5rem; } .tol-breathe-orb{ width:7rem; height:7rem; } .tol-breathe-focus{ font-size:1.1rem; min-height:3rem; } }
@media (prefers-reduced-motion: reduce){ .tol-breathe-bg b, .tol-breathe-bg b::before, .tol-breathe-bg b::after{ animation:none !important; } }

/* ---------- Breathe, premium ---------- */
.tol-breathe{
  background:radial-gradient(120% 90% at 50% 30%, #3B3868 0%, #23254A 50%, #15172E 100%);
  box-shadow:inset 0 0 180px 40px rgba(8,8,24,.55);
}
.tol-breathe.is-open{ animation:tol-br-in .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tol-br-in{ from{ opacity:0; transform:scale(1.02); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
.tol-breathe-aurora{ position:absolute !important; inset:-10%; z-index:0 !important; pointer-events:none; filter:blur(60px); opacity:.55; transition:opacity 4s ease; }
.tol-breathe.is-in .tol-breathe-aurora{ opacity:.8; transition-duration:4s; }
.tol-breathe.is-out .tol-breathe-aurora{ opacity:.45; transition-duration:6s; }
.tol-breathe-aurora i{ position:absolute; display:block; border-radius:50%; mix-blend-mode:screen; }
.tol-breathe-aurora i:nth-child(1){ width:55vmax; height:40vmax; left:-10%; top:-8%; background:radial-gradient(closest-side, rgba(249,201,180,.55), transparent); animation:tol-aur1 38s ease-in-out infinite alternate; }
.tol-breathe-aurora i:nth-child(2){ width:50vmax; height:45vmax; right:-15%; top:20%; background:radial-gradient(closest-side, rgba(185,160,224,.6), transparent); animation:tol-aur2 44s ease-in-out infinite alternate; }
.tol-breathe-aurora i:nth-child(3){ width:45vmax; height:35vmax; left:10%; bottom:-15%; background:radial-gradient(closest-side, rgba(152,210,178,.35), transparent); animation:tol-aur3 50s ease-in-out infinite alternate; }
@keyframes tol-aur1{ to{ transform:translate(12vmax, 8vmax) scale(1.15); } }
@keyframes tol-aur2{ to{ transform:translate(-14vmax, -6vmax) scale(.9); } }
@keyframes tol-aur3{ to{ transform:translate(10vmax, -10vmax) scale(1.2); } }

.tol-breathe-stage{ width:13rem; height:13rem; }
.tol-breathe-halo{ position:absolute; inset:-18%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,226,196,.35), rgba(247,184,198,.14) 55%, transparent 75%);
  transform:scale(.8); opacity:.5; transition:transform 4s cubic-bezier(.45,0,.55,1), opacity 4s ease; }
.tol-breathe.is-in .tol-breathe-halo{ transform:scale(1.2); opacity:1; }
.tol-breathe.is-out .tol-breathe-halo{ transform:scale(.8); opacity:.45; transition-duration:6s; }
.tol-breathe-ripples{ position:absolute; inset:0; pointer-events:none; }
.tol-breathe-ripples i{ position:absolute; left:50%; top:50%; width:8rem; height:8rem; margin:-4rem 0 0 -4rem; border-radius:50%;
  border:1px solid rgba(255,236,214,.55); animation:tol-ripple 4.2s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes tol-ripple{ from{ transform:scale(.9); opacity:.8; } to{ transform:scale(2.3); opacity:0; } }
.tol-breathe-ring{ filter:drop-shadow(0 0 6px rgba(247,184,198,.55)); }
.tol-breathe-ring .fill{ stroke:url(#tol-ring-g); stroke-width:3.2; }
.tol-breathe-ring .track{ stroke:rgba(255,240,215,.1); stroke-width:2; }
.tol-breathe-orb{
  position:relative; width:9.5rem; height:9.5rem;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.95) 0 6%, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 50% 55%, #FFF4E2 0%, #FFE0C6 30%, #F6BFCB 62%, #C9B3EE 88%, rgba(201,179,238,.6) 100%);
  box-shadow:0 0 50px 12px rgba(249,217,184,.35), 0 0 120px 40px rgba(185,160,224,.18), inset 0 -10px 30px rgba(140,110,200,.35), inset 0 8px 20px rgba(255,255,255,.35);
  transition:transform 4s cubic-bezier(.45,0,.55,1);
}
.tol-breathe-orb.is-out{ transition-duration:6s; }
.tol-breathe-count{ font-weight:400; font-size:2.4rem; color:rgba(74,63,107,.8); letter-spacing:.02em; transition:opacity .3s; }
.tol-breathe-word{ font-style:italic; font-weight:400; font-size:2rem; letter-spacing:.02em; color:#FFF6E6; text-shadow:0 2px 24px rgba(249,217,184,.35); }
.tol-breathe-focus{ font-weight:400; letter-spacing:.005em; text-shadow:0 2px 18px rgba(10,10,30,.5); }
.tol-breathe-sub{ letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; color:#BDB5DA; }
.tol-breathe-word, .tol-breathe-sub, .tol-breathe-focus span, .tol-breathe-focus small{ transition:opacity .26s ease, transform .26s ease; }
.tol-breathe .is-fading{ opacity:0; transform:translateY(4px); }
.tol-breathe-dots li{ width:.55rem; height:.55rem; }
.tol-breathe-dots li.done{ background:linear-gradient(135deg, #FFE3C4, #F7B8C6); box-shadow:0 0 8px rgba(247,184,198,.6); }
.tol-breathe-dots li.now{ background:#FFF1DF; box-shadow:0 0 10px rgba(255,241,223,.8); }
.tol-breathe-row button, .tol-breathe-row a, .tol-breathe-len button{
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.18); letter-spacing:.01em;
  transition:background .25s, border-color .25s, transform .2s;
}
.tol-breathe-row button:hover, .tol-breathe-row a:hover, .tol-breathe-len button:hover{ background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); transform:translateY(-1px); }
.tol-breathe-len{ display:flex; gap:.4rem; }
.tol-breathe-len button{ font:inherit; font-size:.78rem; color:#E9E4F7; padding:.3rem .8rem; border-radius:999px; cursor:pointer; }
.tol-breathe-len button[aria-pressed="true"], .tol-breathe-row button[aria-pressed="true"]{ border-color:rgba(255,227,196,.8); background:linear-gradient(180deg, rgba(255,227,196,.28), rgba(247,184,198,.12)); color:#FFF6E6; }
.tol-breathe-len :focus-visible{ outline:2px solid #F9D9B8; outline-offset:3px; }
@media (max-height:700px){ .tol-breathe-stage{ width:9.5rem; height:9.5rem; } .tol-breathe-orb{ width:7rem; height:7rem; } .tol-breathe-word{ font-size:1.6rem; } }
@media (prefers-reduced-motion: reduce){
  .tol-breathe.is-open, .tol-breathe-aurora i, .tol-breathe-ripples i{ animation:none !important; }
  .tol-breathe-ripples{ display:none; }
}

/* "Private by design": shown where people type */
.tol-private{ display:flex; align-items:flex-start; gap:.6rem; max-width:none !important; margin:0 0 1.4rem !important; padding:.65rem 1rem;
  background:#EEF6F1; border:1px solid #BFE3CF; border-radius:16px; font-size:.92rem; line-height:1.5; color:#2F5A3C; }
.tol-private strong{ color:#24492F; }
.tol-private a{ color:inherit; }
@media print{ .tol-private{ display:none; } }
/* Fill-in worksheets have a save bar at the bottom: keep Breathe above it */
body:has(.wpf-bar) .tol-breathe-btn{ bottom:calc(4.8rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width:560px){ body:has(.wpf-bar) .tol-breathe-btn{ bottom:calc(8.2rem + env(safe-area-inset-bottom, 0px)); } body:has(.wpf-bar-actions.has-more:not(.is-open)) .tol-breathe-btn{ bottom:calc(4.8rem + env(safe-area-inset-bottom, 0px)); } }
@media (max-width:380px){
  .tol-bar button, .tol-bar a.tol-member{ padding:.42rem .6rem !important; font-size:.9rem !important; }
  .tol-bar a.tol-member{ margin-left:.25rem; }
  .tol-brand span{ font-size:.86rem; }
}
@media (max-width:340px){ .tol-brand span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .tol-logo{ width:2rem; height:2rem; } }

/* Little tip for today */
.tol-tip{ display:flex; gap:1rem; align-items:flex-start; max-width:40rem; margin:2.5rem 0 1rem; padding:1.1rem 1.25rem;
  background:linear-gradient(135deg, #FFF8EE 0%, #F7EEF8 100%); border:1px solid #E6D6EE; border-radius:22px; box-shadow:0 8px 24px rgba(120,90,140,.08); }
.tol-tip img{ flex:none; width:3.2rem; height:3.2rem; animation:tol-bob 8s var(--ease-soft, ease-in-out) infinite; }
.tol-tip p{ margin:0; max-width:none !important; }
.tol-tip-k{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#8A6D8F; }
.tol-tip-h{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.15rem; margin:.25rem 0 .2rem !important; color:var(--ink); }
.tol-tip-b{ color:var(--ink-soft); line-height:1.55; }
.tol-tip-next{ margin-top:.7rem; font:inherit; font-size:.85rem; padding:.35rem .9rem; min-height:44px; border-radius:999px; border:1px solid #D9C8F0; background:#fff; color:#4E3F6B; cursor:pointer; }
.tol-tip-next:hover{ background:#F3EEF9; }
@media (max-width:560px){ .tol-tip{ padding:1rem; gap:.75rem; } .tol-tip img{ width:2.6rem; height:2.6rem; } }
@media (prefers-reduced-motion: reduce){ .tol-tip img{ animation:none; } }
@media print{ .tol-tip{ display:none; } }
.tol-tip .tol-tip-b{ font-size:1rem; line-height:1.55 !important; } .tol-tip .tol-tip-h{ line-height:1.3 !important; }

/* ---------- Breathe: methods, the square, guidance ---------- */
.tol-breathe.br{ justify-content:flex-start; padding:max(1.2rem, env(safe-area-inset-top)) 1rem 1.5rem; }
.br section{ position:relative; z-index:1; width:min(30rem, 100%); margin:auto 0; display:flex; flex-direction:column; align-items:center; gap:.85rem; }
.br section[hidden]{ display:none; }
.br h2{ font-family:"Fraunces", Georgia, serif; font-weight:400; font-style:italic; font-size:2rem; margin:0; color:#FFF6E6; text-shadow:0 2px 24px rgba(249,217,184,.35); }
.br-lede{ margin:0; color:#DCD6F0; font-size:1rem; line-height:1.5; }
.br-methods{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; width:100%; }
.br-method{ font:inherit; text-align:center; padding:.8rem .5rem; border-radius:18px; cursor:pointer; color:#F4F1FA;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background .25s, border-color .25s, transform .2s; }
.br-method strong{ display:block; font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:1rem; color:#FFF6E6; }
.br-method small{ display:block; margin-top:.25rem; font-size:.74rem; color:#CFC9E6; letter-spacing:.02em; }
.br-method:hover{ transform:translateY(-1px); background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); }
.br-method[aria-pressed="true"]{ border-color:rgba(255,227,196,.85); background:linear-gradient(180deg, rgba(255,227,196,.25), rgba(247,184,198,.1)); box-shadow:0 0 24px rgba(249,217,184,.18); }
.br-how, .br-scape-note{ margin:0; min-height:2.8rem; font-size:.92rem; line-height:1.5; color:#E9E4F7; }
.br-scape-note{ min-height:1.4rem; color:#CFC9E6; font-size:.86rem; }
.br-phones{ margin:0; font-size:.82rem; line-height:1.45; color:#BDB5DA; padding:.5rem .8rem; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.04); }
.br-label{ margin:.3rem 0 -.3rem; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#BDB5DA; }
.br-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; }
.br-chips button{ font:inherit; font-size:.82rem; color:#E9E4F7; padding:.38rem .85rem; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.2); }
.br-chips button[aria-pressed="true"]{ border-color:rgba(255,227,196,.85); background:linear-gradient(180deg, rgba(255,227,196,.28), rgba(247,184,198,.12)); color:#FFF6E6; }
.br .br-begin{ font-weight:600; font-size:1.05rem !important; padding:.7rem 2rem !important; color:#2A2D52 !important; border-color:#FFE3C4 !important;
  background:linear-gradient(180deg, #FFEBD4, #F9D2BD) !important; box-shadow:0 10px 30px rgba(249,217,184,.3) !important; }
.br button:focus-visible{ outline:2px solid #F9D9B8; outline-offset:3px; }

.br-top{ margin:0; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#BDB5DA; }
.br-stage{ position:relative; width:15rem; height:15rem; display:grid; place-items:center; }
.br-shape{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.br-track{ fill:none; stroke:rgba(255,240,215,.14); stroke-width:2.5; stroke-linejoin:round; }
.br-trail{ fill:none; stroke:url(#br-g); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px rgba(247,184,198,.6)); }
.br-dot{ fill:#FFF6E6; filter:drop-shadow(0 0 8px rgba(255,236,214,.95)); }
.br-labels text{ font:500 8.5px "Lora", Georgia, serif; fill:rgba(233,228,247,.7); letter-spacing:.04em; }
.br .tol-breathe-orb{ width:6.8rem; height:6.8rem; }
.br .tol-breathe-halo{ inset:8%; }
.br .tol-breathe-ripples i{ width:6.8rem; height:6.8rem; margin:-3.4rem 0 0 -3.4rem; }
.br .tol-breathe-count{ font-size:2rem; }
.br .tol-breathe-word{ margin:0; min-height:2.4rem; }
.br-guide{ margin:0; min-height:2.8rem; max-width:24rem; font-size:1.02rem; line-height:1.45; color:#EDE8F7; transition:opacity .26s, transform .26s; }
.br-why{ margin:0; min-height:2.6rem; max-width:25rem; font-size:.86rem; font-style:italic; line-height:1.45; color:#C9BFE6; transition:opacity .26s, transform .26s; }
.br-progress{ width:min(18rem, 80%); height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.br-progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg, #FFE3C4, #F7B8C6, #CDB8F2); }
.br .tol-breathe-focus{ min-height:4.4rem; }
.br-heart{ margin:0; font-size:2.6rem; color:#F7B8C6; text-shadow:0 0 24px rgba(247,184,198,.7); }
.br-reflect{ margin:0; padding:0; list-style:none; display:grid; gap:.45rem; text-align:left; }
.br-reflect li{ padding:.55rem .9rem; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#EDE8F7; font-size:.95rem; }
@media (max-width:420px){ .br-methods{ grid-template-columns:1fr; } .br-method{ display:flex; justify-content:space-between; align-items:center; padding:.65rem 1rem; text-align:left; } .br-method small{ margin:0; } }
@media (max-height:760px){ .br-stage{ width:12rem; height:12rem; } .br .tol-breathe-orb{ width:5.4rem; height:5.4rem; } .br .tol-breathe-focus{ font-size:1.1rem; min-height:3.6rem; } .br section{ gap:.6rem; } }

/* Today's Weather: a small floating invitation, bottom-left */
.tol-wx{ position:fixed; left:max(.9rem, env(safe-area-inset-left)); bottom:max(.9rem, env(safe-area-inset-bottom)); z-index:875;
  display:flex; align-items:center; max-width:calc(100% - 10rem); opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.tol-wx.is-in{ opacity:1; transform:none; }
.tol-wx.is-bye{ opacity:0; transform:translateY(12px) scale(.96); transition-duration:.3s; }
.tol-wx-go{ display:flex; align-items:center; gap:.55rem; padding:.45rem 2.1rem .45rem .5rem; border-radius:999px; text-decoration:none; color:var(--ink);
  background:rgba(255,251,242,.96); border:1px solid #E6D6EE; box-shadow:0 8px 26px rgba(90,70,120,.16); animation:tol-wx-float 8s var(--ease-soft, ease-in-out) infinite; }
.tol-wx-go:hover{ background:#FFF6EC; }
.tol-wx-go svg{ width:2.7rem; height:2.2rem; flex:none; }
.tol-wx-sun{ transform-origin:42px 17px; animation:tol-wx-peek 8s var(--ease-soft, ease-in-out) infinite; }
.tol-wx-go span{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.tol-wx-go strong{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:.92rem; }
.tol-wx-go small{ font-size:.75rem; color:var(--ink-soft); }
.tol-wx-x{ position:absolute; right:.35rem; top:50%; margin-top:-.8rem; width:1.6rem; height:1.6rem; border-radius:50%; border:0; cursor:pointer;
  font-size:1.05rem; line-height:1; color:var(--ink-soft); background:transparent; }
.tol-wx-x:hover{ background:#F1E8F4; color:var(--ink); }
.tol-wx-go:focus-visible, .tol-wx-x:focus-visible, .tol-wx-never:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.tol-wx-toast{ gap:.6rem; padding:.55rem .9rem; border-radius:999px; background:rgba(255,251,242,.97); border:1px solid #E6D6EE; box-shadow:0 8px 26px rgba(90,70,120,.14); font-size:.85rem; }
.tol-wx-never{ font:inherit; font-size:.82rem; background:none; border:0; padding:0; color:#6B4F8A; text-decoration:underline; cursor:pointer; }
@keyframes tol-wx-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes tol-wx-peek{ 0%,100%{ transform:rotate(0) translate(0,0); } 50%{ transform:rotate(12deg) translate(-1px,-1px); } }
@media (max-width:420px){ .tol-wx-go small{ display:none; } .tol-wx-go strong{ font-size:.84rem; } .tol-wx{ max-width:calc(100% - 9rem); } }
@media (prefers-reduced-motion: reduce){ .tol-wx-go, .tol-wx-sun{ animation:none; } .tol-wx{ transition:none; } }
@media print{ .tol-wx{ display:none !important; } }
.tol-wx-toast span, .tol-wx-never{ white-space:nowrap; } .tol-wx-toast{ font-size:.8rem; }
/* Phone header: brand, Menu and Join always fit, with the site's real fonts */
@media (max-width:440px){
  .tol-bar{ gap:.4rem; }
  .tol-brand{ min-width:0; flex:0 1 auto; gap:.35rem; }
  .tol-brand span{ font-size:.9rem; letter-spacing:-.015em; overflow:hidden; text-overflow:ellipsis; }
  .tol-logo{ width:1.75rem; height:1.75rem; margin-right:0; }
  .tol-bar button, .tol-bar a.tol-member{ padding:.42rem .62rem !important; font-size:.9rem !important; white-space:nowrap; flex:none; }
  .tol-bar a.tol-member{ margin-left:.2rem; }
}
@media (max-width:370px){ .tol-brand span{ font-size:.8rem; } .tol-bar button, .tol-bar a.tol-member{ padding:.4rem .5rem !important; font-size:.84rem !important; } }
@media (max-height:720px){
  .br section{ gap:.45rem; }
  .br-stage{ width:10.5rem; height:10.5rem; }
  .br .tol-breathe-orb{ width:4.8rem; height:4.8rem; }
  .br .tol-breathe-ripples i{ width:4.8rem; height:4.8rem; margin:-2.4rem 0 0 -2.4rem; }
  .br .tol-breathe-count{ font-size:1.5rem; }
  .br .tol-breathe-focus{ font-size:1rem; min-height:3.2rem; }
  .br .tol-breathe-focus small{ font-size:.82rem; }
  .br .tol-breathe-word{ font-size:1.5rem; min-height:2rem; }
  .br-guide{ font-size:.92rem; min-height:2.4rem; }
  .br-why{ font-size:.78rem; min-height:2.2rem; }
  .br h2{ font-size:1.6rem; }
  .br-how{ font-size:.85rem; min-height:2.4rem; }
}
@media (max-height:600px){ .br-why{ display:none; } .br-stage{ width:9rem; height:9rem; } }


/* ---------- Motion that moves together ----------
   One shared rhythm: every gentle loop on the site is a multiple of box breathing's
   4-second count, and everything eases the same soft way. */
:root{ --ease-soft:cubic-bezier(.45,0,.55,1); --ease-out:cubic-bezier(.22,.8,.3,1); --beat:4s; }
@keyframes tol-bob{ 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-3px) rotate(1.5deg); } }

/* Buttons and links answer the same way everywhere: a soft ease, and a gentle press */
:where(button, .tol-btn, .tt-btn, .tol-member, .tol-contents-btn, .br-method, .live-play, .ng-choice){
  transition:background-color .28s var(--ease-out), border-color .28s var(--ease-out), color .28s var(--ease-out), box-shadow .28s var(--ease-out), transform .22s var(--ease-out), opacity .28s var(--ease-out);
}
:where(button, .tol-btn, .tt-btn, .br-method, .live-play):active{ transform:scale(.97); }
:where(a){ transition:color .25s var(--ease-out), text-decoration-color .25s var(--ease-out), background-color .25s var(--ease-out); }

/* Things drift softly into place as you reach them (added by site.js) */
.tol-reveal{ opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.tol-reveal.is-in{ opacity:1; transform:none; }

/* Pages fade softly from one to the next, with the header staying put (where browsers support it) */
@view-transition{ navigation:auto; }
.tol-bar{ view-transition-name:tol-bar; }
.tol-breathe-btn{ view-transition-name:tol-breathe-btn; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.45s; animation-timing-function:var(--ease-out); }

@media (prefers-reduced-motion: reduce){
  .tol-reveal, .tol-reveal.is-in{ opacity:1; transform:none; transition:none; }
  :where(button, .tol-btn, .tt-btn, .br-method, .live-play):active{ transform:none; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}
@media print{ .tol-reveal{ opacity:1 !important; transform:none !important; } }

/* "A flower was planted in your Night Garden" */
.tol-planted{ position:fixed; left:50%; top:calc(var(--tol-bar-bottom, var(--tol-bar-h, 64px)) + .8rem); z-index:885; transform:translate(-50%, -10px); opacity:0;
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.1rem; border-radius:999px; text-decoration:none; color:#2F5A3C; font-size:.92rem;
  background:rgba(238,246,241,.97); border:1px solid #BFE3CF; box-shadow:0 10px 30px rgba(60,90,70,.16);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); white-space:nowrap; max-width:calc(100% - 2rem); }
.tol-planted.is-in{ opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion: reduce){ .tol-planted{ transition:none; } }
/* in the page, under the button that was pressed: it takes its own space instead of covering anything */
.tol-planted.is-inline{ position:static; display:flex; width:max-content; max-width:100%; white-space:normal; margin:.7rem 0; transform:translateY(-4px); box-shadow:none; }
.tol-planted.is-inline.is-in{ transform:none; }
/* with nothing pressed in the page: a small note on the bottom edge, between the floating buttons */
.tol-planted.is-edge{ top:auto; bottom:max(.6rem, env(safe-area-inset-bottom)); transform:translate(-50%, 10px); max-width:calc(100% - 7rem); white-space:normal; }
.tol-planted.is-edge.is-in{ transform:translate(-50%, 0); }
.tol-tip-topic{ text-transform:none; letter-spacing:.02em; }
.tol-tip .tol-tip-h, .tol-tip .tol-tip-b{ transition:opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.tol-tip .is-swap .tol-tip-h, .tol-tip .is-swap .tol-tip-b{ opacity:0; transform:translateY(4px); }
.br-tip{ margin:0; max-width:26rem; padding:.7rem 1rem; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#E9E4F7; font-size:.92rem; line-height:1.5; }
.br-tip strong{ color:#FFE3C4; }
.tol-table-scroll{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; contain:paint; } /* (contain: with the bigger text sizes, a wide table never widens the page) */


/* ---------- A realistic pop ----------
   A soap bubble's film thins and wobbles, then it vanishes in a blink and throws a tiny
   spray of droplets that fly out and fall away. */
.tol-bub::before{ animation-name:tol-blow-real; animation-timing-function:linear; }
@keyframes tol-blow-real{
  0%{ scale:.08; opacity:0; animation-timing-function:cubic-bezier(.2,.7,.3,1); }
  10%{ scale:1; opacity:.8; }
  70%{ scale:1 1; opacity:.8; animation-timing-function:ease-in-out; }
  73%{ scale:1.035 .965; }
  75.5%{ scale:.97 1.03; }
  78%{ scale:1.02 .98; }
  79.7%{ scale:1 1; opacity:.8; }
  80%, 100%{ scale:1.02; opacity:0; }
}
.tol-bub::after{
  --r:calc(var(--s, 30px) * .42); --q:calc(var(--s, 30px) * .3);
  inset:auto; left:50%; top:50%; width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border:0; border-radius:50%; background:transparent;
  box-shadow:
    0 calc(var(--r) * -1) 0 .4px var(--rim, #EDA3B6),
    var(--q) calc(var(--q) * -1) 0 0 var(--rim, #EDA3B6),
    var(--r) 0 0 .2px var(--rim, #EDA3B6),
    var(--q) var(--q) 0 -.3px var(--rim, #EDA3B6),
    0 var(--r) 0 .3px var(--rim, #EDA3B6),
    calc(var(--q) * -1) var(--q) 0 0 var(--rim, #EDA3B6),
    calc(var(--r) * -1) 0 0 .4px var(--rim, #EDA3B6),
    calc(var(--q) * -1) calc(var(--q) * -1) 0 -.3px var(--rim, #EDA3B6),
    calc(var(--r) * .5) calc(var(--r) * -.9) 0 -.6px var(--rim, #EDA3B6),
    calc(var(--r) * -.9) calc(var(--r) * .45) 0 -.6px var(--rim, #EDA3B6);
  animation:tol-spray var(--d, 24s) linear infinite; animation-delay:var(--dl, 0s); opacity:0;
}
@keyframes tol-spray{
  0%, 79.9%{ opacity:0; transform:translateY(0) scale(.4); }
  80.05%{ opacity:.95; transform:translateY(0) scale(.6); animation-timing-function:cubic-bezier(.15,.7,.35,1); }
  82.6%{ opacity:0; transform:translateY(7px) scale(1.6); }
  100%{ opacity:0; transform:translateY(7px) scale(1.6); }
}

/* a few more drifting friends */
.tol-wash b:nth-of-type(17){ left:18%; top:22%; --s:24px; --d:28s; --dl:-10s; --tint:#EAF4FC; --rim:#96C2E8; }
.tol-wash b:nth-of-type(18){ left:90%; top:40%; --s:30px; --d:24s; --dl:-19s; --tint:#FBE3EA; --rim:#EDA3B6; }
.tol-wash b:nth-of-type(19){ left:40%; top:58%; --s:22px; --d:32s; --dl:-7s;  --tint:#F7B8C6; }
.tol-wash b:nth-of-type(20){ left:3%;  top:66%; --s:34px; --d:24s; --dl:-13s; --tint:#E8F6EE; --rim:#98D2B2; }
.tol-wash b:nth-of-type(21){ left:74%; top:82%; --s:26px; --d:28s; --dl:-3s;  --tint:#FDF3D2; --rim:#EFD27A; }
.tol-wash b:nth-of-type(22){ left:56%; top:12%; --s:20px; --d:32s; --dl:-22s; --tint:#D9C8F0; }
@media (max-width:760px){ .tol-wash b:nth-of-type(n+20){ display:none; } }
@media (prefers-reduced-motion: reduce){ .tol-bub::after{ display:none !important; } }

/* More floating hearts and bubbles, and easier to see on phones and big screens */
.tol-wash b:nth-of-type(23){ left:30%; top:5%;  --s:34px; --d:26s; --dl:-8s;  --tint:#F7B8C6; }
.tol-wash b:nth-of-type(24){ left:92%; top:15%; --s:24px; --d:30s; --dl:-17s; --tint:#EFE6FA; --rim:#B9A0E0; }
.tol-wash b:nth-of-type(25){ left:14%; top:38%; --s:32px; --d:22s; --dl:-4s;  --tint:#FDEBDF; --rim:#EBA88E; }
.tol-wash b:nth-of-type(26){ left:66%; top:27%; --s:26px; --d:28s; --dl:-21s; --tint:#FBE3EA; }
.tol-wash b:nth-of-type(27){ left:48%; top:42%; --s:38px; --d:26s; --dl:-12s; --tint:#EAF4FC; --rim:#96C2E8; }
.tol-wash b:nth-of-type(28){ left:94%; top:62%; --s:28px; --d:30s; --dl:-6s;  --tint:#F9C9B4; }
.tol-wash b:nth-of-type(29){ left:20%; top:53%; --s:24px; --d:24s; --dl:-15s; --tint:#E8F6EE; --rim:#98D2B2; }
.tol-wash b:nth-of-type(30){ left:82%; top:74%; --s:36px; --d:26s; --dl:-2s;  --tint:#D9C8F0; }
.tol-wash b:nth-of-type(31){ left:6%;  top:88%; --s:30px; --d:28s; --dl:-19s; --tint:#FDF3D2; --rim:#EFD27A; }
.tol-wash b:nth-of-type(32){ left:42%; top:74%; --s:26px; --d:30s; --dl:-9s;  --tint:#F7B8C6; }
.tol-wash b:nth-of-type(33){ left:60%; top:90%; --s:34px; --d:24s; --dl:-14s; --tint:#EFE6FA; --rim:#B9A0E0; }
.tol-wash b:nth-of-type(34){ left:26%; top:99%; --s:22px; --d:26s; --dl:-5s;  --tint:#FBE3EA; --rim:#EDA3B6; }
.tol-wash b{ opacity:.82; }
.tol-wash b.tol-heart{ opacity:.88; }
.tol-bub::before{ border-width:2px; }
@media (max-width:760px){
  .tol-wash b{ scale:.9; }
  .tol-wash b:nth-of-type(n+20){ display:block; }
  .tol-wash b:nth-of-type(n+31){ display:none; }
}

/* ---------- Mini dives: a term with a little water drop opens a short explanation ---------- */
.tol-dive{ display:inline; padding:0 .1em; margin:0; border:0; background:linear-gradient(transparent 62%, rgba(150,194,232,.35) 62%); color:inherit; font:inherit; line-height:inherit; cursor:pointer;
  text-decoration:underline dotted rgba(60,120,170,.55); text-decoration-thickness:1.5px; text-underline-offset:3px; border-radius:3px; transition:background-color .25s; }
.tol-dive:hover, .tol-dive:focus-visible{ background:rgba(150,194,232,.4); }
.tol-dive:focus-visible{ outline:2px solid #3C78AA; outline-offset:2px; }
.tol-dive-i{ display:inline-block; width:.95em; height:.95em; margin-left:.18em; vertical-align:-.12em;
  background:no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C9 7 6 10.2 6 14a6 6 0 0 0 12 0c0-3.8-3-7-6-11.5z' fill='%2396C2E8'/%3E%3Cpath d='M7.2 15.2c1.2-.9 2.4-.9 3.6 0s2.4.9 3.6 0 2.4-.9 3.6 0' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Cellipse cx='9.6' cy='10.8' rx='1.1' ry='1.8' fill='%23fff' opacity='.7'/%3E%3C/svg%3E"); }
.tol-dive-card{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(46,60,90,0); transition:background-color .25s; }
.tol-dive-card.is-open{ display:flex; }
.tol-dive-card.is-in{ background:rgba(46,60,90,.28); }
.tol-dive-box{ position:relative; width:min(26rem, 100%); max-height:80vh; overflow:auto; padding:1.2rem 1.3rem 1rem; border-radius:24px;
  background:linear-gradient(170deg, #F2F8FD 0%, #FFFDF8 55%); border:1px solid #CFE2F2; box-shadow:0 20px 50px rgba(40,70,110,.25);
  transform:translateY(14px) scale(.97); opacity:0; transition:transform .3s var(--ease-out, ease), opacity .25s; }
.tol-dive-card.is-in .tol-dive-box{ transform:none; opacity:1; }
.tol-dive-k{ margin:0 0 .2rem; font:500 .72rem/1 "IBM Plex Mono", monospace; letter-spacing:.1em; text-transform:uppercase; color:#3C78AA; }
.tol-dive-box h2{ margin:.2rem 2rem .5rem 0; font-family:"Fraunces", Georgia, serif; font-size:1.3rem; line-height:1.25; }
.tol-dive-body p{ margin:0 0 .6rem; line-height:1.55; }
.tol-dive-more{ margin:.2rem 0 0; }
.tol-dive-more a{ font-weight:600; }
.tol-dive-x{ position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:50%; border:1px solid #CFE2F2; background:#fff; font-size:1.3rem; line-height:1; cursor:pointer; color:#2B4A66; }
@media (max-width:560px){
  .tol-dive-card{ align-items:flex-end; padding:0; }
  .tol-dive-box{ width:100%; border-radius:22px 22px 0 0; padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px)); transform:translateY(100%); }
}
@media (prefers-reduced-motion: reduce){ .tol-dive-box, .tol-dive-card{ transition:none; } }
@media print{ .tol-dive{ background:none; text-decoration:none; } .tol-dive-i{ display:none; } }
/* the hearts and bubbles stay with you as you scroll (behind the text), so they're always in view */
.tol-wash b{ position:fixed; }
@media (max-width:760px){ .tol-wash b:nth-of-type(n+23){ display:none; } }
@media print{ .tol-wash b{ display:none; } }
.tol-dive-card{ z-index:1000; }
.tol-dive-more a{ color:#2F5F8A; }
/* the depth meter and the layers, shore to deep */
.tol-dive-meter{ display:flex; gap:.35rem; list-style:none; margin:.1rem 0 .3rem; padding:0; }
.tol-dive-meter li{ width:1.9rem; height:1.9rem; display:grid; place-items:center; border-radius:50%; font-size:1rem; background:rgba(120,160,200,.12); opacity:.45; transition:opacity .3s, background-color .3s; }
.tol-dive-meter li.is-on{ opacity:1; background:linear-gradient(160deg, #E4F2FB, #C9E2F4); }
.tol-dive-step{ margin:.3rem 0 .25rem !important; font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#4F7597; }
.tol-dive-layer.is-new{ border-top:1px dashed rgba(79,117,151,.3); padding-top:.3rem; animation:tolWade .45s ease both; }
@keyframes tolWade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.tol-dive-wade{ margin:.1rem 0 .5rem; }
.tol-dive-go{ font:inherit; font-weight:600; font-size:.95rem; padding:.55rem 1rem; min-height:44px; border-radius:999px; border:1px solid rgba(79,117,151,.35); background:linear-gradient(160deg, #F2F9FE, #DDEEF9); color:#2F5F8A; cursor:pointer; }
.tol-dive-go:hover{ background:#D3E8F7; }
@media (prefers-reduced-motion: reduce){ .tol-dive-layer.is-new{ animation:none; } }

/* ---------- Glassy bubbles everywhere, like the ones in Breathe, and you can pop them ----------
   Clear in the middle, a bright highlight, a soft coloured rim with a hint of rainbow sheen,
   and a faint shadow so they show on light pages. Tap or click one and it pops. */
.tol-wash .tol-bub::before, .tol-breathe-bg .tol-bub::before{
  border:1.5px solid color-mix(in srgb, var(--rim, #EDA3B6) 70%, #fff);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.98) 0 8%, rgba(255,255,255,.45) 12%, rgba(255,255,255,0) 26%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.6) 0 5%, rgba(255,255,255,0) 13%),
    conic-gradient(from 200deg, rgba(247,184,198,.35), rgba(185,160,224,.35), rgba(150,194,232,.35), rgba(152,210,178,.3), rgba(239,210,122,.3), rgba(247,184,198,.35)),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 52%, color-mix(in srgb, var(--tint, #FBE3EA) 70%, transparent) 76%, color-mix(in srgb, var(--rim, #EDA3B6) 80%, transparent) 100%);

  box-shadow:inset -2px -3px 6px rgba(255,255,255,.55), inset 2px 3px 8px color-mix(in srgb, var(--rim, #EDA3B6) 35%, transparent), 0 3px 10px rgba(110,80,140,.14);
}
.tol-wash b.tol-bub{ opacity:.95; }
/* popped: a quick swell, a blink, and a spray of droplets; it floats back a little later */
.tol-bub.is-popped::before{ animation:tol-burst .32s ease-out forwards !important; }
.tol-bub.is-popped::after{ animation:tol-spray-now .6s ease-out forwards !important; }
.tol-bub.is-gone{ visibility:hidden; }
@keyframes tol-burst{ 0%{ scale:1; opacity:.95; } 45%{ scale:1.22 1.14; opacity:.95; } 60%{ scale:1.3; opacity:0; } 100%{ scale:1.3; opacity:0; } }
@keyframes tol-spray-now{ 0%{ opacity:0; scale:.6; } 25%{ opacity:1; scale:1.1; } 100%{ opacity:0; scale:2.3; translate:0 10px; } }
.tol-heart.is-tapped{ scale:1.45; filter:drop-shadow(0 0 10px rgba(247,184,198,.9)) brightness(1.08); transition:scale .22s cubic-bezier(.2,1.6,.4,1), filter .3s; }
.tol-heart{ transition:scale .5s ease, filter .6s; }
.tol-poplet{ position:fixed; z-index:2; pointer-events:none; font-size:14px; line-height:1; color:#EE8FA8; animation:tol-poplet 1s ease-out forwards; }
@keyframes tol-poplet{ 0%{ opacity:0; transform:translate(0,0) scale(.4); } 20%{ opacity:1; } 100%{ opacity:0; transform:translate(var(--dx), var(--dy)) scale(1); } }
.tol-breathe .tol-poplet{ z-index:3; }
@media (prefers-reduced-motion: reduce){ .tol-bub.is-popped::before, .tol-bub.is-popped::after{ animation:none !important; opacity:0; } .tol-poplet{ display:none; } }

/* eight sections (with About) on one line at every desktop width */
.tol-bar .tol-member{ white-space:nowrap; }
@media (max-width:1680px) and (min-width:981px){
  .tol-brand{ font-size:1rem; }
  .tol-bar{ gap:.5rem; }
  .tol-sections .tol-nav-item > button{ padding:.5rem .38rem; font-size:.9rem; }
  .tol-nav-item > button::after{ margin-left:.25em; }
}
@media (max-width:1120px) and (min-width:981px){
  .tol-sections .tol-nav-item > button{ padding:.45rem .3rem; font-size:.84rem; }
  .tol-brand{ font-size:.95rem; }
}

/* ---------- The Night Garden behind every page ----------
   A silent, living garden (garden-backdrop.html) sits behind the whole site under a soft,
   see-through cream veil: enough to feel it, never enough to crowd the words. */
.tol-garden-bg{ position:fixed; inset:0; width:100%; height:100%; border:0; z-index:-3; pointer-events:none; background:#171A34; }
.tol-garden-veil{ position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(180deg, rgba(250,244,232,.66) 0%, rgba(250,244,232,.56) 45%, rgba(250,244,232,.5) 100%); }
html.has-garden, html.has-garden body{ background:transparent !important; }
html.has-garden .tol-wash > i{ display:none; }   /* the garden replaces the watercolour splashes; the bubbles still float */
html.has-garden .tol-bar{ background:rgba(245,239,222,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
@media print{ .tol-garden-bg, .tol-garden-veil{ display:none !important; } html.has-garden body{ background:#fff !important; } }
@media (max-width:1120px) and (min-width:981px){
  .tol-bar{ gap:.35rem; padding-left:.9rem; padding-right:.9rem; }
  .tol-sections .tol-nav-item > button{ padding:.42rem .24rem; font-size:.8rem; }
  .tol-nav-item > button::after{ margin-left:.18em; }
  .tol-brand{ font-size:.9rem; }
  .tol-bar .tol-member{ padding:.4rem .7rem; font-size:.88rem; }
}
/* a mini dive always stays inline with its sentence, whatever box it's in */
button.tol-dive{ display:inline !important; width:auto !important; min-height:0 !important; margin:0 !important; padding:0 .1em !important; font:inherit !important; line-height:inherit !important; border:0 !important; border-radius:3px !important; box-shadow:none !important; color:inherit !important; vertical-align:baseline !important; }

/* ---------- Cheering buddies between sections (cheer.js) ---------- */
.tol-cheer{ list-style:none; display:flex; align-items:center; gap:.55rem; margin:.6rem 0 !important; padding:0 !important; max-width:none !important;
  background:none !important; border:0 !important; box-shadow:none !important; counter-increment:none; }
.tol-cheer::before, .tol-cheer::after{ content:none !important; display:none !important; }
.tol-cheer.is-right{ flex-direction:row-reverse; }
.tol-cheer-b{ position:relative; flex:none; width:3.1rem; height:3.1rem; padding:0; border:0; background:none; cursor:pointer; border-radius:50%;
  opacity:.55; transform:scale(.86); transition:opacity .5s, transform .5s; -webkit-tap-highlight-color:transparent; }
.tol-cheer-b:focus-visible{ outline:2px solid #8FBCE3; outline-offset:3px; }
.tol-cheer-b svg{ width:100%; height:100%; display:block; overflow:visible; }
.tol-cheer.is-awake .tol-cheer-b{ opacity:1; transform:none; }
.tol-cheer-say{ font-family:"Fraunces", Georgia, serif; font-style:italic; font-size:.95rem; color:#5B5270; line-height:1.3;
  background:rgba(255,253,248,.85); border:1px solid rgba(185,160,224,.35); border-radius:14px; padding:.35rem .75rem; position:relative;
  opacity:0; transform:translateY(4px); transition:opacity .45s .15s, transform .45s .15s; }
.tol-cheer-say:empty{ display:none; }
.tol-cheer.is-awake .tol-cheer-say{ opacity:1; transform:none; }
.tol-cheer .cb-happy, .tol-cheer .cb-winkeye, .tol-cheer .cb-grin{ opacity:0; }
.tol-cheer .cb-arm{ transform-box:fill-box; transition:transform .3s; }
.tol-cheer .cb-arm-l{ transform-origin:100% 100%; } .tol-cheer .cb-arm-r{ transform-origin:0 100%; }
.tol-cheer .cb-eye{ transform-box:fill-box; transform-origin:center; }
.tol-cheer.is-blink .cb-eye{ animation:cbBlink .22s ease-in-out; }
@keyframes cbBlink{ 50%{ transform:scaleY(.1); } }
/* the moves */
.tol-cheer.do-wave .cb-arm-r{ animation:cbWave .5s ease-in-out 3 alternate; }
@keyframes cbWave{ from{ transform:rotate(0); } to{ transform:rotate(-28deg); } }
.tol-cheer.do-hop .tol-cheer-b svg{ animation:cbHop .9s cubic-bezier(.3,.7,.4,1) 2; }
@keyframes cbHop{ 0%,100%{ transform:translateY(0) scale(1,1); } 15%{ transform:translateY(0) scale(1.08,.92); } 45%{ transform:translateY(-10px) scale(.96,1.05); } 75%{ transform:translateY(0) scale(1.05,.95); } }
.tol-cheer.do-wink .cb-eye-r{ opacity:0; } .tol-cheer.do-wink .cb-winkeye{ opacity:1; }
.tol-cheer.do-wink .tol-cheer-b svg{ animation:cbTilt 1.6s ease-in-out; }
@keyframes cbTilt{ 30%,70%{ transform:rotate(-8deg); } }
.tol-cheer.do-grin .cb-eyes, .tol-cheer.do-heart .cb-eyes, .tol-cheer.do-clap .cb-eyes{ opacity:0; }
.tol-cheer.do-grin .cb-happy, .tol-cheer.do-heart .cb-happy, .tol-cheer.do-clap .cb-happy{ opacity:1; }
.tol-cheer.do-grin .cb-smile, .tol-cheer.do-clap .cb-smile{ opacity:0; } .tol-cheer.do-grin .cb-grin, .tol-cheer.do-clap .cb-grin{ opacity:1; }
.tol-cheer.do-grin .tol-cheer-b svg{ animation:cbSquish 1.2s ease-in-out; }
@keyframes cbSquish{ 25%{ transform:scale(1.07,.94); } 55%{ transform:scale(.97,1.04); } }
.tol-cheer.do-heart .cb-arm-l{ transform:rotate(22deg); } .tol-cheer.do-heart .cb-arm-r{ transform:rotate(-22deg); }
.tol-cheer.do-sway .tol-cheer-b svg{ animation:cbSway 2.4s ease-in-out; }
@keyframes cbSway{ 25%{ transform:rotate(-7deg); } 75%{ transform:rotate(7deg); } }
.tol-cheer.do-clap .cb-arm-l{ animation:cbClapL .28s ease-in-out 6 alternate; } .tol-cheer.do-clap .cb-arm-r{ animation:cbClapR .28s ease-in-out 6 alternate; }
@keyframes cbClapL{ to{ transform:rotate(38deg); } } @keyframes cbClapR{ to{ transform:rotate(-38deg); } }
.tol-cheer.do-clap .tol-cheer-b svg{ animation:cbHop .9s cubic-bezier(.3,.7,.4,1) 1; }
.tol-cheer-heart{ position:absolute; left:50%; top:-.2rem; color:#EE8FA6; font-size:1.05rem; pointer-events:none; animation:cbFloat 1.4s ease-out forwards; }
@keyframes cbFloat{ from{ opacity:0; transform:translate(-50%, 4px) scale(.6); } 20%{ opacity:1; } to{ opacity:0; transform:translate(-30%, -34px) scale(1.15); } }
.tol-cheer-dot{ position:absolute; left:50%; top:40%; width:6px; height:6px; border-radius:50%; pointer-events:none; animation:cbDot 1.4s ease-out forwards; }
@keyframes cbDot{ from{ opacity:1; transform:translate(-50%,0); } to{ opacity:0; transform:translate(calc(-50% + var(--dx)), var(--dy)); } }
.tol-cheer.is-end{ justify-content:center; margin-top:1.4rem !important; }
.tol-cheer.is-end .tol-cheer-b{ width:3.8rem; height:3.8rem; }
@media (max-width:560px){ .tol-cheer-b{ width:2.7rem; height:2.7rem; } .tol-cheer-say{ font-size:.9rem; } }
@media (prefers-reduced-motion: reduce){ .tol-cheer *, .tol-cheer-b{ animation:none !important; transition:none !important; } }
@media print{ .tol-cheer{ display:none !important; } }

/* ---------- "This chapter is still growing" ---------- */
.growing-note{ display:flex; gap:.8rem; align-items:flex-start; margin:2rem 0 1rem; padding:1rem 1.1rem; border-radius:18px;
  background:linear-gradient(160deg, rgba(234,246,239,.92), rgba(243,238,249,.92)); border:1px solid #BFE3CF; }
.growing-note .growing-ic{ font-size:1.6rem; line-height:1; animation:tol-bob 6s ease-in-out infinite; }
.growing-note p{ margin:0 0 .35rem; } .growing-note p:last-child{ margin:0; }
.growing-chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; padding:.2rem .7rem; border-radius:999px; background:#EAF6EF; border:1px solid #BFE3CF; color:#2F5A3C; text-decoration:none; margin-left:.4rem; }
@media (prefers-reduced-motion: reduce){ .growing-note .growing-ic{ animation:none; } }
/* mini dives sit above a card's stretched "Dig deeper" link, so both can be tapped */
.tol-dive{ position:relative; z-index:2; }
/* a bigger, invisible tap area (at least 44px) around each mini dive; the words themselves look and wrap the same */
.tol-dive::after{ content:""; position:absolute; left:50%; top:50%; width:calc(100% + 8px); min-width:44px; height:100%; min-height:44px; transform:translate(-50%, -50%); background:none; border-radius:8px; pointer-events:auto; }
@media print{ .tol-dive::after{ content:none; } }
/* the dive card: the title and depth meter stay put, and the layers scroll inside */
.tol-dive-box{ display:flex; flex-direction:column; overflow:hidden; max-height:min(80vh, 40rem); }
.tol-dive-body{ flex:1 1 auto; min-height:4rem; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; margin:0 -.5rem; padding:0 .5rem; scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 1.2rem), transparent); mask-image:linear-gradient(#000 calc(100% - 1.2rem), transparent); padding-bottom:1rem; }
.tol-dive-box > .tol-dive-k, .tol-dive-box > .tol-dive-meter, .tol-dive-box > h2, .tol-dive-wade, .tol-dive-more{ flex:none; }
@media (max-width:560px){ .tol-dive-box{ max-height:78vh; } }
/* the buddies' names, facts and chat buttons, and two more moves */
.tol-cheer-b{ width:3.5rem; height:3.5rem; }
.tol-cheer-say{ font-style:normal; max-width:min(30rem, calc(100% - 4.5rem)); }
.tol-cheer-name{ display:block; font:600 .72rem/1.3 "IBM Plex Mono", ui-monospace, monospace; letter-spacing:.04em; color:#8A6D8F; font-style:normal; margin-bottom:.15rem; }
.tol-cheer-name em{ font-style:italic; font-family:"Fraunces", Georgia, serif; letter-spacing:0; font-weight:400; font-size:.82rem; color:#9A8CA8; }
.tol-cheer-line{ display:block; font-family:"Fraunces", Georgia, serif; font-style:italic; }
.tol-cheer.is-fact .tol-cheer-line{ font-style:normal; font-family:"Lora", Georgia, serif; font-size:.92rem; }
.tol-cheer.is-fact .tol-cheer-say{ background:rgba(240,248,255,.9); border-color:rgba(143,188,227,.45); }
.tol-cheer-more{ display:inline-flex; align-items:center; gap:.25rem; margin:.35rem 0 0; padding:.3rem .75rem; min-height:44px; border-radius:999px; border:1px solid rgba(143,188,227,.6);
  background:#F2F9FE; color:#2F5F8A; font:600 .85rem/1.2 "Lora", Georgia, serif; font-style:normal; cursor:pointer; }
.tol-cheer-more:hover{ background:#E1F0FB; }
.tol-cheer.is-chat .tol-cheer-more{ border-color:rgba(217,200,240,.9); background:#F7F2FD; color:#5B4A86; }
.tol-cheer.do-spin .tol-cheer-b svg{ animation:cbSpin 1.1s cubic-bezier(.4,.1,.3,1); }
@keyframes cbSpin{ to{ transform:rotate(360deg); } }
.tol-cheer.do-peek .tol-cheer-b svg{ animation:cbPeek 1.6s ease-in-out; }
@keyframes cbPeek{ 0%,100%{ transform:none; } 30%{ transform:translateY(12px) scale(.9); } 55%{ transform:translateY(-6px) rotate(-6deg); } }
.tol-cheer .cb-dz{ transform-box:fill-box; }
@media (max-width:560px){ .tol-cheer-b{ width:3rem; height:3rem; } .tol-cheer-say{ max-width:calc(100% - 3.8rem); } }

/* ---------- Professor Puddles: a hello bubble on the home page, and chat cards in the course pages ---------- */
@keyframes tolPudBob{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-4px) rotate(2deg); } }
.tol-puddles-hi{ position:relative; z-index:2; margin:0 auto 1.4rem; width:min(34rem, 100%); max-width:none !important; box-sizing:border-box;
  display:grid; grid-template-columns:auto 1fr; gap:.3rem .7rem; align-items:center; padding:.8rem 2.2rem .8rem .8rem; border-radius:22px;
  background:#FFFDF8; border:1px solid #BFD8EE; box-shadow:0 14px 34px rgba(47,80,120,.14);
  opacity:0; transform:translateY(-8px) scale(.97); transition:opacity .4s, transform .4s cubic-bezier(.2,1.2,.4,1); pointer-events:none; }
.tol-puddles-hi.is-in{ opacity:1; transform:none; pointer-events:auto; }
.tol-puddles-hi::before{ content:""; position:absolute; bottom:-8px; left:50%; margin-left:-7px; width:14px; height:14px; background:inherit; border-right:1px solid #BFD8EE; border-bottom:1px solid #BFD8EE; transform:rotate(45deg); }
.tol-puddles-hi-art{ grid-row:span 2; width:3.3rem; height:3.3rem; animation:tolPudBob 4s ease-in-out infinite; }
.tol-puddles-hi-art svg{ width:100%; height:100%; overflow:visible; }
.tol-puddles-hi p{ margin:0; font-size:.92rem; line-height:1.4; color:var(--ink, #2B2620); max-width:none; }
.tol-puddles-hi p strong{ display:block; font-family:"Fraunces", Georgia, serif; font-size:1.02rem; color:#2F5F8A; }
.tol-puddles-hi-go{ display:inline-flex; align-items:center; text-decoration:none; justify-self:start; min-height:40px; padding:.4rem 1rem; border-radius:999px; border:0; background:#2F5F8A; color:#fff; font:600 .88rem "Lora", Georgia, serif; cursor:pointer; }
.tol-puddles-hi-go:hover{ background:#264E73; }
.tol-puddles-hi-x{ position:absolute; top:.35rem; right:.4rem; width:36px; height:36px; border:0; background:none; font-size:1.3rem; color:#6A6152; cursor:pointer; border-radius:50%; }
.tol-puddles-hi-x:hover{ background:rgba(0,0,0,.05); }
@media (max-width:560px){ .tol-puddles-hi{ width:100%; } }
.tol-puddles-hi.is-small{ width:fit-content; margin:0 auto 1.4rem; display:grid; grid-template-columns:auto auto; gap:.2rem .6rem; padding:.45rem .9rem .45rem .5rem; }
.tol-puddles-hi.is-small .tol-puddles-hi-art{ grid-row:auto; width:2.2rem; height:2.2rem; }
.tol-puddles-hi.is-small p, .tol-puddles-hi.is-small .tol-puddles-hi-x, .tol-puddles-hi.is-small::before{ display:none; }
.tol-puddles-hi.is-small .tol-puddles-hi-go{ min-height:36px; padding:.3rem .9rem; }
@media (prefers-reduced-motion: reduce){ .tol-puddles-hi-art, .tol-pud-card-art{ animation:none; } .tol-puddles-hi{ transition:none; } }
@media print{ .tol-puddles-hi, .tol-pud-card{ display:none !important; } }

.tol-pud-card{ display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; align-items:center; margin:1.6rem 0; padding:1rem 1.1rem; border-radius:22px; max-width:none;
  background:linear-gradient(150deg, rgba(234,244,253,.94), rgba(247,242,253,.94)); border:1px dashed #9EC4E6; }
.tol-pud-card-art{ grid-row:span 2; width:3.6rem; height:3.6rem; animation:tolPudBob 5s ease-in-out infinite; }
.tol-pud-card-art svg{ width:100%; height:100%; overflow:visible; }
.tol-pud-card p{ margin:0; font-size:.95rem; line-height:1.45; max-width:none; }
.tol-pud-card p strong{ font-family:"Fraunces", Georgia, serif; color:#2F5F8A; }
.read a.tol-pud-card-go, a.tol-pud-card-go, .read button.tol-pud-card-go, button.tol-pud-card-go{ border:0; cursor:pointer; justify-self:start; display:inline-flex; align-items:center; gap:.35rem; min-height:40px; padding:.4rem 1rem; border-radius:999px;
  background:#2F5F8A; color:#fff; font:600 .9rem "Lora", Georgia, serif; text-decoration:none; }
a.tol-pud-card-go:hover, button.tol-pud-card-go:hover{ background:#264E73; }
.tol-pud-end{ margin:2.2rem 0 1rem; }
@media print{ .tol-pud-end{ display:none !important; } }
@media (max-width:420px){ .tol-pud-card{ grid-template-columns:1fr; } .tol-pud-card-art{ grid-row:auto; width:3rem; height:3rem; } }

a.tol-puddles-hi-go, .read a.tol-puddles-hi-go, main a.tol-puddles-hi-go{ color:#fff !important; text-decoration:none !important; }
a.tol-pud-card-go, main a.tol-pud-card-go{ color:#fff !important; text-decoration:none !important; }

/* ---------- Bubble boxes ----------
   Text boxes across the site look like the glassy bubbles floating about: very round, a
   see-through pearly fill with a soft shine in the corner, a faint rainbow rim, and a little depth. */
:root{
  --bub-shine:radial-gradient(120% 90% at 14% 8%, rgba(255,255,255,.9), rgba(255,255,255,0) 42%);
  --bub-rim:linear-gradient(135deg, #F7C9D4, #D9C8F0 30%, #C6DFF4 55%, #C7EBD6 78%, #F8E7AE);
  --bub-shadow:0 10px 28px rgba(110,90,160,.10), inset 0 -8px 18px rgba(185,160,224,.10), inset 0 2px 0 rgba(255,255,255,.75);
}
.read .simple-lede, .read .scene, .scene, .try-this, .read .ideas > li, .tol-tip, .growing-note, .tol-pud-card, .read blockquote, .tol-warning,
.announce-bar, .read a.next-card, .read .roadmap-callout, .wn-card, .tol-cheer-say, .tol-private, .tol-gentle, .cr-safety{
  --bub-fill:rgba(255,253,249,.8);
  border:1.5px solid transparent !important;
  background:var(--bub-shine) padding-box, linear-gradient(var(--bub-fill), var(--bub-fill)) padding-box, var(--bub-rim) border-box !important;
  border-radius:28px !important; box-shadow:var(--bub-shadow);
  -webkit-backdrop-filter:blur(6px) saturate(1.08); backdrop-filter:blur(6px) saturate(1.08);
}
/* each kind keeps a soft tint of its own */
.read .simple-lede{ --bub-fill:rgba(255,246,222,.84); }
.read .scene, .scene{ --bub-fill:rgba(246,240,252,.84); }
.try-this{ --bub-fill:rgba(236,247,240,.86); }
.growing-note{ --bub-fill:rgba(236,247,240,.86); }
.tol-pud-card{ --bub-fill:rgba(234,244,253,.88); }
.tol-warning{ --bub-fill:rgba(255,241,236,.86); }
.announce-bar{ --bub-fill:rgba(255,246,226,.86); }
.tol-cheer.is-fact .tol-cheer-say{ --bub-fill:rgba(236,246,255,.9); }
.tol-gentle{ border-radius:999px !important; --bub-fill:rgba(234,246,239,.9); }
.tol-cheer-say{ border-radius:20px !important; }
/* the idea cards float apart as separate bubbles */
.read .ideas{ gap:.9rem !important; background:none !important; border:0 !important; overflow:visible !important; border-radius:0 !important; }
.read .ideas > li{ transition:transform .2s ease, box-shadow .2s ease !important; }
.read .ideas > li:hover, .read .ideas > li:focus-within{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(110,90,160,.16), inset 0 -8px 18px rgba(185,160,224,.12), inset 0 2px 0 rgba(255,255,255,.8); }
.read .ideas > li:target{ box-shadow:0 0 0 3px rgba(185,160,224,.45), var(--bub-shadow); }
.read blockquote{ padding:.9rem 1.2rem !important; }
.try-this, .read .simple-lede, .read .scene, .scene{ padding-left:1.35rem !important; padding-right:1.35rem !important; }
@media (max-width:560px){
  .read .simple-lede, .read .scene, .scene, .try-this, .read .ideas > li, .tol-tip, .growing-note, .tol-pud-card, .read blockquote, .tol-warning,
  .announce-bar, .read a.next-card, .read .roadmap-callout, .wn-card{ border-radius:24px !important; }
}
@media print{
  .read .simple-lede, .read .scene, .scene, .try-this, .read .ideas > li, .tol-tip, .growing-note, .read blockquote, .tol-warning{ background:#fff !important; border:1px solid #ccc !important; box-shadow:none !important; }
}
/* the cheering buddies in an idea grid keep just their own little speech bubble */
.read .ideas > li.tol-cheer{ grid-column:1 / -1; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important;
  -webkit-backdrop-filter:none; backdrop-filter:none; transform:none !important; min-height:0; }
.read .ideas > li.tol-cheer:hover{ box-shadow:none !important; }
.read .ideas{ grid-auto-flow:row dense; }
.read .ideas > li.tol-cheer{ counter-increment:none !important; }
/* in every mini dive: talk the term over with the Professor */
.tol-dive-more{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; }
.tol-dive-chat{ display:inline-flex; align-items:center; gap:.35rem; min-height:40px; padding:.35rem .95rem; border-radius:999px; background:#EEF5FC; border:1px solid #BFD8EE;
  color:#2F5F8A !important; font:600 .88rem "Lora", Georgia, serif; text-decoration:none !important; }
.tol-dive-chat:hover{ background:#E1EEFA; }

/* The simple / full chooser at the top of two-version pages (buildDepthPicker in site.js) */
.depth-bar.tol-depth{ display:block; margin:-.5rem 0 1.8rem; padding:1rem 1.1rem; border:0; border-radius:22px;
  background:rgba(255,253,248,.95); box-shadow:0 6px 20px rgba(60,40,90,.08); font:inherit; color:var(--ink); }
.tol-depth-q{ margin:0 0 .7rem !important; font-weight:600; font-size:1rem; padding:0 !important; background:none !important; box-shadow:none !important; }
.tol-depth-opts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap:.7rem; }
.tol-depth-opt{ display:flex; flex-direction:column; gap:.25rem; padding:.85rem 1rem; border-radius:18px; text-decoration:none !important;
  color:var(--ink) !important; background:#F7F3FB; border:2px solid transparent; transition:transform .15s, border-color .15s; }
.tol-depth-opt:hover{ transform:translateY(-2px); border-color:#CDB8EA; }
.tol-depth-opt:focus-visible{ outline:3px solid var(--focus, #2F5F8A); outline-offset:2px; }
.tol-depth-opt.is-here{ background:#EEF6F0; border-color:#9CC7A8; }
.tol-depth-opt.is-full:not(.is-here){ background:#EEF2FB; }
.tol-depth-name{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.08rem; }
.tol-depth-name small{ font:600 .78rem/1 "Lora", Georgia, serif; margin-left:.3rem; padding:.15rem .5rem; border-radius:999px; background:#D6EDDC; color:#2F5A3C; vertical-align:.1em; }
.tol-depth-time{ font-size:.86rem; color:#5E5470; }
.tol-depth-what{ font-size:.95rem; line-height:1.45; }
.tol-depth-who{ font-size:.9rem; line-height:1.4; color:#4F4760; font-style:italic; }
.tol-depth-pref{ margin:.6rem 0 0 !important; font-size:.9rem; color:#4F4760; padding:0 !important; background:none !important; box-shadow:none !important; }
.tol-depth-more{ margin:.8rem 0 0; padding:0 !important; background:none !important; box-shadow:none !important; }
.tol-depth-more summary{ cursor:pointer; font-weight:600; font-size:.95rem; color:#3E5A86; min-height:44px; display:flex; align-items:center; }
.tol-depth-more p{ font-size:.95rem; line-height:1.5; margin:.4rem 0 !important; padding:0 !important; background:none !important; box-shadow:none !important; }
.tol-depth .tol-gentle{ margin:.8rem 0 0 !important; }
@media (prefers-reduced-motion: reduce){ .tol-depth-opt{ transition:none; } .tol-depth-opt:hover{ transform:none; } }
@media print{ .depth-bar.tol-depth{ display:none !important; } }


/* "Put it all together": the full path package pointer on self, relationship, workpaper and program pages */
.tol-fp-note{ margin:2rem 0 1rem; padding:1rem 1.15rem; border-radius:20px; background:linear-gradient(135deg,#EEF6F0,#EEF2FB); box-shadow:0 6px 18px rgba(60,40,90,.08); }
.tol-fp-note p{ margin:.25rem 0 !important; padding:0 !important; background:none !important; box-shadow:none !important; max-width:none; }
.tol-fp-note .tol-fp-k{ font-weight:600; color:#2F5A3C; }
.tol-fp-note a{ display:inline-flex; align-items:center; min-height:44px; }
@media print{ .tol-fp-note{ display:none !important; } }

/* ==========================================================================
   Every word in a bubble
   All readable text sits in a soft, near-opaque bubble so it never lies on the moving
   garden. One kind of bubble everywhere: a cream fill, a whisper of a pastel rim, a
   gentle drop shadow, round corners. No frames behind or around a bubble.
   - Paragraphs, lists and small print that follow each other melt into ONE bubble
     (the pieces touch and share their corners); a heading starts a new one, so each
     section reads as one card.
   - A block on its own shrinks to fit what it holds: a short note is a small bubble,
     a long one grows wide.
   Pieces tune the bubble through --bb-* variables rather than fighting its !important.
   ========================================================================== */
:root{
  --bb-fill:rgba(255,253,248,.94);
  --bb-edge:linear-gradient(90deg, #F2CAD5, #DCCDF0 35%, #C9DFF3 66%, #CBEAD8);
  --bb-shadow:0 14px 26px -18px rgba(80,60,130,.42), 0 3px 8px -6px rgba(80,60,130,.22);
  --bb-r:clamp(18px, 1rem + 1vw, 28px);
  --bb-px:clamp(1rem, .7rem + 1.6vw, 1.55rem);
  --bb-py:clamp(.75rem, .55rem + .8vw, 1.05rem);
  --bb-gap:clamp(.9rem, .6rem + 1vw, 1.3rem);
  --bb-seam:.45rem;
}
/* the one bubble */
.bb, :is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, details, figure, .table-wrap, table, address, pre):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]){
  box-sizing:border-box; max-width:100% !important; width:var(--bb-w, fit-content);
  margin:var(--bb-mt, 0) 0 var(--bb-mb, var(--bb-gap)) !important;
  padding:var(--bb-pt, var(--bb-py)) var(--bb-pr, var(--bb-px)) var(--bb-pb, var(--bb-py)) var(--bb-pl, var(--bb-px)) !important;
  border:1.5px solid transparent !important; border-top-width:var(--bb-bt, 1.5px) !important; border-bottom-width:var(--bb-bbw, 1.5px) !important;
  border-radius:var(--bb-tl, var(--bb-r)) var(--bb-tr, var(--bb-r)) var(--bb-br, var(--bb-r)) var(--bb-bl, var(--bb-r)) !important;
  background:linear-gradient(var(--bb-fill), var(--bb-fill)) padding-box, var(--bb-edge) border-box !important;
  box-shadow:var(--bb-shadow) !important;
}
/* a little playful variety in the corners */
main.read > p:nth-of-type(3n+2){ --bb-tl:calc(var(--bb-r) + 7px); --bb-br:calc(var(--bb-r) + 4px); }
main.read > p:nth-of-type(3n){ --bb-tr:calc(var(--bb-r) + 7px); --bb-bl:calc(var(--bb-r) + 3px); }
/* lists keep their bullets inside */
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(ul, ol):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]){ --bb-pl:calc(var(--bb-px) + 1.3rem); }
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(ul, ol):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]) > li{ max-width:none; }
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(ul, ol):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]) > li:first-child{ margin-top:0; }
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(ul, ol):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]) > li:last-child{ margin-bottom:0; }
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(p, details, figure, dl):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]) > :last-child{ margin-bottom:0; }
/* a heading on its own is a small pill bubble */
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(h2, h3, h4, h5):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]){ --bb-r:1.35rem; --bb-pt:.5rem; --bb-pb:.5rem; --bb-pl:1.15rem; --bb-pr:1.15rem; line-height:1.25; }
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(h2, h3):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]){ --bb-mt:calc(var(--bb-gap) * 1.7); }
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(h2, h3):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]):first-child{ --bb-mt:0px; }
/* tables inside their bubble: no heavy grid, just soft rows */
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(.table-wrap, table):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]){ overflow-x:auto; --bb-w:100%; }
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > table:not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]){ display:block; border-collapse:collapse; }
main :is(.table-wrap table, .read > table) :is(th, td){ border:0 !important; border-bottom:1px solid rgba(160,135,205,.25) !important; background:transparent; }
main :is(.table-wrap table, .read > table) th{ border-bottom:2px solid rgba(160,135,205,.45) !important; }
main :is(.table-wrap table, .read > table) tr:last-child td{ border-bottom:0 !important; }
/* pieces that follow each other melt into one bubble */
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, details, figure, .table-wrap, table, address, pre):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]):has(+ :is(p, ul, ol, dl, h1, h4, h5, details, figure, .table-wrap, address, pre):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden])){ --bb-w:auto; --bb-br:0px; --bb-bl:0px; --bb-mb:0px; --bb-pb:var(--bb-seam); --bb-bbw:0px; }
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, details, figure, .table-wrap, table, address, pre):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]) + :is(p, ul, ol, dl, h1, h4, h5, details, figure, .table-wrap, address, pre):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]){ --bb-w:auto; --bb-tl:0px; --bb-tr:0px; --bb-mt:0px; --bb-pt:var(--bb-seam); --bb-bt:0px; }
:is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(h2, h3, h4, h5):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]):has(+ :is(p, ul, ol, dl, h1, h4, h5, details, figure, .table-wrap, address, pre):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden])){ --bb-pt:calc(var(--bb-py) + .1rem); --bb-pb:.2rem; --bb-pl:var(--bb-px); --bb-pr:var(--bb-px); --bb-r:clamp(18px, 1rem + 1vw, 28px); }
@media print{ :is(main.read, main.read > :is(section, article, div):not([class]), main.read > section.wn-group, main.read > div.locked-section, main.read > header.hero, main.read > div.chapter-body, main.read > section.home-contents, main:not([class]) > :is(section, article):not([class]), main:not([class])) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, details, figure, .table-wrap, table, address, pre):not(.simple-lede, .depth-bar, .ideas, .tol-gentle, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .try-this, .scene, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .wn-list, .sr-only, .visually-hidden, .no-bubble, [hidden]), .bb{ background:#fff !important; box-shadow:none !important; border-color:transparent !important; } }
/* the title of each page: one bubble, sized to the title, no ruled line under it */
main.read > header.read-head{
  width:fit-content; max-width:100%; box-sizing:border-box; margin:0 0 var(--bb-gap); padding:var(--bb-py) calc(var(--bb-px) + .2rem) calc(var(--bb-py) + .1rem);
  border:1.5px solid transparent !important; border-radius:calc(var(--bb-r) + 6px) calc(var(--bb-r) + 2px) calc(var(--bb-r) + 8px) var(--bb-r);
  background:linear-gradient(var(--bb-fill), var(--bb-fill)) padding-box, var(--bb-edge) border-box; box-shadow:var(--bb-shadow);
}
main.read > header.read-head .read-code{ color:#86601F; }
main.read > header.read-head > :last-child{ margin-bottom:0; }
.tol-deep main.read > header.read-head::after, .tol-simple main.read > header.read-head::after{ right:.8rem; bottom:.7rem; }
/* "Simple version / Read the full page": a slim pill */
main.read > p.depth-bar, main:not([class]) > p.depth-bar{
  margin:0 0 var(--bb-gap); padding:.45rem 1.1rem; border:1.5px solid transparent; border-radius:999px;
  background:linear-gradient(var(--bb-fill), var(--bb-fill)) padding-box, var(--bb-edge) border-box; box-shadow:var(--bb-shadow); color:#5A5244;
}
main > p.depth-bar a:not(.dig){ color:#5A5244; }
main > p.depth-bar .dig{ color:#86601F !important; }
/* dividers between bubbles are just a breath of space */
main.read > hr, main:not([class]) > hr{ border:0 !important; height:0; margin:calc(var(--bb-gap) * 1.2) 0 !important; background:none; }
/* the older one-off bubbles share the same cream and stay fully opaque enough to read */
.read .simple-lede, .read .scene, .scene, .try-this, .read .ideas > li, .tol-tip, .growing-note, .tol-pud-card, .read blockquote, .tol-warning,
.announce-bar, .read a.next-card, .read .roadmap-callout, .wn-card, .tol-private, .cr-safety{ -webkit-backdrop-filter:none; backdrop-filter:none; }
.read .simple-lede{ --bub-fill:rgba(255,248,230,.95); }
.read .scene, .scene{ --bub-fill:rgba(248,243,253,.95); }
.try-this, .growing-note{ --bub-fill:rgba(240,249,243,.95); }
.read .ideas > li, .read blockquote, .wn-card, .read a.next-card, .tol-tip, .tol-private{ --bub-fill:rgba(255,253,248,.94); }
.read .ideas > li{ height:auto; align-self:start; }
.read .ideas{ align-items:start; }
/* previous / next: two little bubbles, no rule above them */
.tol-pager{ border-top:0; gap:var(--bb-gap); }
.tol-pager a{ padding:.7rem 1.1rem; border:1.5px solid transparent; border-radius:22px; width:fit-content; max-width:100%; box-sizing:border-box;
  background:linear-gradient(var(--bb-fill), var(--bb-fill)) padding-box, var(--bb-edge) border-box; box-shadow:var(--bb-shadow); transition:transform .2s ease; }
.tol-pager .is-next{ justify-self:end; }
.tol-pager a:hover{ transform:translateY(-2px); }
/* the footer: one soft, wide bubble; room below it for the floating Breathe and weather pills */
.tol-foot{ border-top:0; border-radius:28px 28px 0 0; background:rgba(255,253,248,.95); box-shadow:0 -10px 26px -18px rgba(80,60,130,.35);
  padding-bottom:calc(2.5rem + 4.5rem + env(safe-area-inset-bottom, 0px)); }
.tol-foot .tol-promise{ border-bottom:0; }
@media (prefers-reduced-motion: reduce){ .tol-pager a, .read .ideas > li{ transition:none !important; } .tol-pager a:hover, .read .ideas > li:hover{ transform:none !important; } }

/* ---------- Boxes that hold a whole block become one bubble (no frame, no ruled edges) ---------- */
:is(main.read, main:not([class]), main.read > :is(section, article, div):not([class]), main:not([class]) > :is(section, article):not([class])) > :is(section, div, article, aside, form, nav, details, figure, fieldset)[class]:not(.simple-lede, .scene, .try-this, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .tol-gentle, .tol-read-wrap, .tol-pillars, .announce-stack, .tol-cols, .next-grid, .sw-opts, .tiers, .steps, .wn-group, .locked-section, .chapter-body, .home-contents, .hero, .ls-awning, .pc-launch-row, .tol-read-host, .kicker, .no-bubble, .sr-only, .visually-hidden, .depth-bar, .tol-dive-card, [class*='gm-'], [class*='xw-'], [class*='jl-'], [class*='lib-'], [class*='pp-'], [class*='ng-'], .qw, [hidden]),
body nav.tol-pillars,
main.read > section.fit-callout, main.read > section.free-strip, main.read > div.tol-aside, main.read > div.tol-index,
main.read > section.tt-card, main.read > section.tt-week-wrap, main.read > div.cr-private, main.read > section.cr-limits, main.read > section.cr-step,
main.read > div.included, main.read > div.wpf-privacy, main.read > section.ws-step, main.read > div.stand,
main.read .tol-cols > .tol-col, main.read .tiers > .tier, main.read .steps > .step, main.read .forecast, main.read .almanac,
main.read div.tol-gate, main div.tol-gate, main.read section.lens{
  box-sizing:border-box; max-width:100% !important;
  margin:0 0 var(--bb-gap) !important; padding:calc(var(--bb-py) + .15rem) var(--bb-px) !important;
  border:1.5px solid transparent !important; border-radius:var(--bb-r) !important;
  background:linear-gradient(var(--bb-fill), var(--bb-fill)) padding-box, var(--bb-edge) border-box !important;
  box-shadow:var(--bb-shadow) !important; color:var(--ink, #2B2620);
}
/* a few keep a soft tint of their own so they still read as a note, a warning or a sign-up */
main.read > div.cr-private, main.read > div.wpf-privacy, main.read > section.free-strip, main.read div.tol-gate, main div.tol-gate{ --bb-fill:rgba(238,246,252,.95); }
main.read > section.fit-callout, main.read > div.tol-aside{ --bb-fill:rgba(240,249,243,.95); }
main.read > div.tol-index, body nav.tol-pillars{ --bb-fill:rgba(255,251,240,.95); }
body nav.tol-pillars{ width:fit-content; }
body nav.tol-pillars .tp-chip:not(.is-on){ background:rgba(255,255,255,.7); }
main.read .tol-cols > .tol-col.paid{ --bb-fill:rgba(250,244,229,.95); }
/* wrappers that only arrange bubbles stay invisible */
main.read .tol-cols, main.read .tiers, main.read .steps{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
main.read .tol-cols{ align-items:start; gap:var(--bb-gap); }

/* ---------- Inside a bubble: soft rows instead of ruled boxes ---------- */
/* Start here: names, the four questions, the journal, the chain */
main.read .tol-names, main.read .tol-journal{ border-top:0 !important; }
main.read .tol-names div:last-child, main.read .tol-journal > li:last-child{ border-bottom:0 !important; }
main.read .tol-names div, main.read .tol-journal > li, main.read .tol-items li{ border-bottom-color:rgba(160,135,205,.22) !important; }
main.read .tol-four, main.read .tol-chain{ background:none !important; border:0 !important; gap:0 1.2rem; }
main.read .tol-four li, main.read .tol-chain li{ background:none !important; border:0 !important; border-bottom:1px solid rgba(160,135,205,.22) !important; padding:.7rem 0 !important; }
main.read .tol-four li:last-child, main.read .tol-chain li:last-child{ border-bottom:0 !important; }
main.read .tol-journal > li.tol-gate{ margin:.3rem 0 !important; padding:.8rem .9rem !important; border:0 !important; border-radius:18px !important;
  background:rgba(252,236,232,.9) !important; box-shadow:none !important; max-width:none !important; }
main.read .tol-journal > li.tol-gate + li{ border-top:0; }
main.read .tol-group-head{ border-bottom-color:rgba(160,135,205,.35); }
main.read .tol-status.planned{ border-color:rgba(160,135,205,.45); }
/* What's new: the group title and blurb share a bubble, the cards line up flush */
main.read .wn-list{ padding:0 !important; }
/* Quick checks (Today's Weather): each step its own bubble, soft ladder, round chips */
main.read .steps > .step{ margin-top:0 !important; }
main.read .rungs{ border:0 !important; border-radius:18px !important; overflow:hidden; background:rgba(246,241,252,.6); }
main.read .rungs .rung{ background:transparent; border-bottom-color:rgba(160,135,205,.22); }
main.read .rungs .rung:hover, main.read .rungs .rung[aria-pressed="true"]{ background:rgba(236,226,248,.8); }
main.read .step .chip, main.read .step .btn, main.read .forecast .btn{ border-radius:999px; }
main.read .forecast .cols{ border:0 !important; gap:.6rem; background:none; }
main.read .forecast .col{ border:0 !important; border-radius:16px; background:rgba(246,241,252,.7); }
main.read .forecast .say{ border-left:0 !important; border-radius:16px; background:rgba(255,246,226,.9); }
main.read .almanac .pattern, main.read p.why{ border-left:0 !important; padding-left:0; }
main.read p.why{ padding-left:var(--bb-px) !important; }
/* Lemonade stand: the stand keeps its lemon colour, without the dashed frame; the answer is a soft speech bubble */
main.read > div.stand{ --bb-fill:rgba(255,248,219,.96); }
main.read .stand .balance-line{ border:0 !important; box-shadow:0 8px 20px -12px rgba(120,100,40,.45); }
main.read .stand .balance-line::before{ border:0 !important; box-shadow:-2px -2px 4px -2px rgba(120,100,40,.18); }
main.read .stand .stand-heads{ border-bottom-color:rgba(200,170,80,.35) !important; }
main.read .stand .row{ border-bottom-color:rgba(200,170,80,.22) !important; }
/* Conversation Reader: steps are bubbles; the example and privacy notes lose their side rules */
main.read > section.cr-step h2, main.read > section.cr-limits > details > summary{ margin-top:0; }
/* Privacy and the other legal pages: sections are just spacing, their text sits in bubbles */
main:not([class]) > section{ background:none !important; border:0 !important; box-shadow:none !important; padding-left:0 !important; padding-right:0 !important; padding-top:0 !important; }
main:not([class]) > section > .kicker{ display:inline-block; margin:0 0 .5rem; padding:.15rem .7rem; border-radius:999px; background:var(--bb-fill); box-shadow:var(--bb-shadow); }
/* Wiring Card (a tool page with its own frame) */
.wrap:has(> .sitebar) > .sitebar, .wrap:has(> .sitebar) > header, .wrap:has(> .sitebar) > .note, .wrap:has(> .sitebar) .panel, .wrap:has(> .sitebar) .sheet{
  box-sizing:border-box; border:1.5px solid transparent !important; border-radius:var(--bb-r) !important;
  background:linear-gradient(var(--bb-fill), var(--bb-fill)) padding-box, var(--bb-edge) border-box !important; box-shadow:var(--bb-shadow) !important;
  padding:var(--bb-py) var(--bb-px) !important; margin-bottom:var(--bb-gap) !important; color:var(--ink);
}
.wrap:has(> .sitebar) > .sitebar{ margin-top:1rem; padding-top:.6rem !important; padding-bottom:.6rem !important; border-radius:999px !important; }
.wrap:has(> .sitebar) > header{ margin-top:var(--bb-gap); }
.wrap:has(> .sitebar) > header .privacy.pillar-note{ margin-bottom:0; }
.wrap:has(> .sitebar) > .note{ max-width:70ch; color:#4A4336; }
.wrap:has(> .sitebar) .sheet .fine{ border-top-color:rgba(160,135,205,.3); }
.wrap:has(> .sitebar) .chips button, .wrap:has(> .sitebar) .go, .wrap:has(> .sitebar) .ghost{ border-radius:999px; }
/* The in-depth Frequency Framework (its own layout): each section a bubble, inner panels a soft tint, no rules */
body > .container > :is(.use-with-block, .domain-indicator, .section, .footer, .embody-section), body > .container > .locked-section > .section, body > .next-steps, body > .context-opening > .context-box,
body > .container > .hero > :is(h1, p:not(.depth-bar)){
  box-sizing:border-box; border:1.5px solid transparent !important; border-radius:var(--bb-r) !important;
  background:linear-gradient(var(--bb-fill), var(--bb-fill)) padding-box, var(--bb-edge) border-box !important; box-shadow:var(--bb-shadow) !important;
  padding:calc(var(--bb-py) + .2rem) var(--bb-px) !important; margin-bottom:var(--bb-gap) !important;
}
body > .container > .hero{ border:0 !important; background:none !important; box-shadow:none !important; padding-left:0 !important; padding-right:0 !important; }
body > .container > .hero > :is(h1, p:not(.depth-bar)){ width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; }
body > .container > .hero > p.hero-tagline + p, body > .container > .hero > p + p.pillar-note{ margin-top:0; }
body > .container > .hero > .depth-bar{ border:1.5px solid transparent !important; border-radius:999px; padding:.45rem 1.1rem !important;
  background:linear-gradient(var(--bb-fill), var(--bb-fill)) padding-box, var(--bb-edge) border-box; box-shadow:var(--bb-shadow); }
body > .context-opening > .context-box{ border-left-width:1.5px !important; }
body > .container, body > .context-opening, body > .next-steps{ --brass:#86601F; }
body > .next-steps{ margin-left:clamp(16px, 4vw, 2rem) !important; margin-right:clamp(16px, 4vw, 2rem) !important; }
body > .container :is(.section h2, .use-with-block h4, .domain-indicator h4){ border-bottom:0 !important; }
body > .container :is(.note-box, .domain-card, .use-item, .vis-container, .controls){ border:0 !important; border-radius:16px !important; }
body > .container :is(.note-box, .domain-card, .use-item){ background:rgba(246,241,252,.75) !important; }
body > .container .domain-example{ border-left:0 !important; }
/* plain sections only group their bubbles; they draw nothing themselves */
main.read > :is(section, article, div):not([class]){ border:0 !important; background:none !important; box-shadow:none !important; padding:0 !important; }
/* Home: "Start where you are" choices are little bubbles you can tap */
main.read .sw-opts{ gap:.55rem; margin-bottom:var(--bb-gap); }
main.read .sw-opt{ border:1.5px solid transparent; border-radius:20px; background:linear-gradient(var(--bb-fill), var(--bb-fill)) padding-box, var(--bb-edge) border-box;
  box-shadow:var(--bb-shadow); align-items:center; transition:transform .2s ease, box-shadow .2s ease; }
main.read .sw-opt:hover{ background:linear-gradient(#FFF7EC, #FFF7EC) padding-box, var(--bb-edge) border-box; transform:translateY(-2px); }
main.read .sw-opt[aria-pressed="true"]{ background:#2B2620; color:#FFFDF7; border-color:#2B2620; }
main.read .sw-out{ border-left:0; border-radius:var(--bb-r); background:linear-gradient(var(--bb-fill), var(--bb-fill)) padding-box, var(--bb-edge) border-box; border:1.5px solid transparent; box-shadow:var(--bb-shadow); }
main.read .sw-more{ border-top-color:rgba(160,135,205,.25); }
/* Home: "Where to go next" cards float apart */
main.read .next-grid{ background:none !important; border:0 !important; overflow:visible !important; gap:var(--bb-gap) !important; align-items:start; }
main.read .next-grid a.next-card{ transition:transform .2s ease; }
main.read .next-grid a.next-card:hover{ transform:translateY(-2px); }
/* Home: the outside-lens rules become soft rows */
main.read .lens-grid, main.read .layer-demo{ border-top:0 !important; border-bottom:0 !important; }
main.read .lens-item + .lens-item, main.read .layer + .layer{ border-color:rgba(160,135,205,.25) !important; }
main.read .spirit p, main.read .lens-note{ border-left:0 !important; padding-left:0 !important; }
/* the note under "Something to read" */
main .tol-read-wrap > .tol-read-note{ width:fit-content; max-width:100%; box-sizing:border-box; margin:.55rem 0 0 !important; padding:.4rem .9rem;
  border-radius:999px; background:var(--bb-fill); box-shadow:var(--bb-shadow); }
@media (max-width:560px){ main .tol-read-wrap > .tol-read-note{ border-radius:18px; } }
@media (prefers-reduced-motion: reduce){ main.read .sw-opt, main.read .next-grid a.next-card{ transition:none; } main.read .sw-opt:hover, main.read .next-grid a.next-card:hover{ transform:none; } }
/* lists drawn without bullets don't need the bullet gutter */
main.read > :is(.fp-jump, .ci-jump, .nt-jump, .off-list, .fp-cycle, .fp-start, .fp-pairs, .nt-rules, .tol-journal, .tol-chain, .tol-four, .dig-list){ --bb-pl:var(--bb-px) !important; }
/* small brass labels inside bubbles: a shade deeper so they pass 4.5:1 on the cream */
main, .wrap:has(> .sitebar){ --brass:#86601F; }
/* page indexes (roadmap, start here) inside their bubble: soft rules, and phone rows that don't squash */
main.read > div.tol-index .tol-index-section > h3{ border-bottom:1px solid rgba(160,135,205,.35); }
main.read > div.tol-index .tol-row{ border-bottom:1px solid rgba(160,135,205,.2); }
main.read > div.tol-index .tol-index-section:first-child{ margin-top:0; }
@media (max-width:520px){ main .tol-index .tol-row{ grid-template-columns:1fr auto; } main .tol-index .tol-code{ grid-column:1 / -1; } }
/* Home: the opening is not a box; its title, notes and actions are bubbles of their own */
main.read > header.hero{ border:0 !important; background:none !important; padding:0 !important; box-shadow:none !important; }
main.read > header.hero > .announce-stack{ margin:0 0 var(--bb-gap); }
/* the dark call-to-action button keeps light words, and gets a rounder shape to match */
main.read a.tol-button{ color:#FFFDF7 !important; text-decoration:none; border-radius:999px; padding:.6rem 1.2rem; }
main.read a.tol-button:hover{ color:#FFFDF7 !important; }
main.read .cr-btn{ border-radius:999px; }
/* Legal and other two-column pages: the contents sidebar floats as a bubble, no ruled divider */
.frame > .sidebar{ box-sizing:border-box; margin:1rem .75rem 1rem 0; height:auto; max-height:calc(100vh - var(--tol-bar-h, 64px) - 2rem); top:calc(var(--tol-bar-h, 64px) + 1rem);
  padding:1.3rem 1.2rem 1.4rem; border:1.5px solid transparent; border-radius:var(--bb-r);
  background:linear-gradient(var(--bb-fill), var(--bb-fill)) padding-box, var(--bb-edge) border-box; box-shadow:var(--bb-shadow); --brass:#86601F; }
.frame > .rule{ visibility:hidden; }
.frame > .sidebar nav ol, .frame > .sidebar nav li{ border-color:rgba(160,135,205,.22) !important; }
@media (max-width:860px){ .frame > .sidebar{ margin:1rem 16px 0; top:auto; max-height:none; } }
main:not([class]) > p.last-updated{ opacity:1 !important; color:#5A5244; }
/* a bubble inside a whole-block bubble drops its own frame and shadow and keeps only a soft tint */
:is(main.read, main:not([class]), main.read > :is(section, article, div):not([class]), main:not([class]) > :is(section, article):not([class])) > :is(section, div, article, aside, form, nav, details, figure, fieldset)[class]:not(.simple-lede, .scene, .try-this, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .tol-gentle, .tol-read-wrap, .tol-pillars, .announce-stack, .tol-cols, .next-grid, .sw-opts, .tiers, .steps, .wn-group, .locked-section, .chapter-body, .home-contents, .hero, .ls-awning, .pc-launch-row, .tol-read-host, .kicker, .no-bubble, .sr-only, .visually-hidden, .depth-bar, .tol-dive-card, [class*='gm-'], [class*='xw-'], [class*='jl-'], [class*='lib-'], [class*='pp-'], [class*='ng-'], .qw, [hidden]) :is(.scene, .try-this, .simple-lede, blockquote, .tol-tip, .tol-warning, .tol-aside, .growing-note){
  box-shadow:none !important; border-color:transparent !important; background:rgba(246,241,252,.7) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
:is(main.read, main:not([class]), main.read > :is(section, article, div):not([class]), main:not([class]) > :is(section, article):not([class])) > :is(section, div, article, aside, form, nav, details, figure, fieldset)[class]:not(.simple-lede, .scene, .try-this, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .tol-gentle, .tol-read-wrap, .tol-pillars, .announce-stack, .tol-cols, .next-grid, .sw-opts, .tiers, .steps, .wn-group, .locked-section, .chapter-body, .home-contents, .hero, .ls-awning, .pc-launch-row, .tol-read-host, .kicker, .no-bubble, .sr-only, .visually-hidden, .depth-bar, .tol-dive-card, [class*='gm-'], [class*='xw-'], [class*='jl-'], [class*='lib-'], [class*='pp-'], [class*='ng-'], .qw, [hidden]) :is(.table-wrap, table){ border:0 !important; box-shadow:none !important; }
:is(main.read, main:not([class]), main.read > :is(section, article, div):not([class]), main:not([class]) > :is(section, article):not([class])) > :is(section, div, article, aside, form, nav, details, figure, fieldset)[class]:not(.simple-lede, .scene, .try-this, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .tol-gentle, .tol-read-wrap, .tol-pillars, .announce-stack, .tol-cols, .next-grid, .sw-opts, .tiers, .steps, .wn-group, .locked-section, .chapter-body, .home-contents, .hero, .ls-awning, .pc-launch-row, .tol-read-host, .kicker, .no-bubble, .sr-only, .visually-hidden, .depth-bar, .tol-dive-card, [class*='gm-'], [class*='xw-'], [class*='jl-'], [class*='lib-'], [class*='pp-'], [class*='ng-'], .qw, [hidden]) :is(th, td){ border-left:0 !important; border-right:0 !important; border-top:0 !important; border-bottom:1px solid rgba(160,135,205,.25) !important; }
:is(main.read, main:not([class]), main.read > :is(section, article, div):not([class]), main:not([class]) > :is(section, article):not([class])) > :is(section, div, article, aside, form, nav, details, figure, fieldset)[class]:not(.simple-lede, .scene, .try-this, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .tol-gentle, .tol-read-wrap, .tol-pillars, .announce-stack, .tol-cols, .next-grid, .sw-opts, .tiers, .steps, .wn-group, .locked-section, .chapter-body, .home-contents, .hero, .ls-awning, .pc-launch-row, .tol-read-host, .kicker, .no-bubble, .sr-only, .visually-hidden, .depth-bar, .tol-dive-card, [class*='gm-'], [class*='xw-'], [class*='jl-'], [class*='lib-'], [class*='pp-'], [class*='ng-'], .qw, [hidden]) tr:last-child td{ border-bottom:0 !important; }
/* inside a whole-block bubble: inner boxes lose their frames (a soft tint and round corners are enough),
   and any rules left between rows turn to a faint lavender hairline */
:is(main.read, main:not([class]), main.read > :is(section, article, div):not([class]), main:not([class]) > :is(section, article):not([class])) > :is(section, div, article, aside, form, nav, details, figure, fieldset)[class]:not(.simple-lede, .scene, .try-this, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .tol-gentle, .tol-read-wrap, .tol-pillars, .announce-stack, .tol-cols, .next-grid, .sw-opts, .tiers, .steps, .wn-group, .locked-section, .chapter-body, .home-contents, .hero, .ls-awning, .pc-launch-row, .tol-read-host, .kicker, .no-bubble, .sr-only, .visually-hidden, .depth-bar, .tol-dive-card, [class*='gm-'], [class*='xw-'], [class*='jl-'], [class*='lib-'], [class*='pp-'], [class*='ng-'], .qw, [hidden]) :is(div, aside, blockquote, section, figure, article, details)[class]:not([class*="drop"], .tol-cheer, .tol-cheer *, .chips, .gauge-track){
  border-color:transparent !important; border-radius:16px; }
:is(main.read, main:not([class]), main.read > :is(section, article, div):not([class]), main:not([class]) > :is(section, article):not([class])) > :is(section, div, article, aside, form, nav, details, figure, fieldset)[class]:not(.simple-lede, .scene, .try-this, .growing-note, .tol-pud-card, .tol-puddles-hi, .tol-cheer, .tol-tip, .tol-warning, .announce-bar, .wn-card, .roadmap-callout, .cr-safety, .tol-private, .tol-gentle, .tol-read-wrap, .tol-pillars, .announce-stack, .tol-cols, .next-grid, .sw-opts, .tiers, .steps, .wn-group, .locked-section, .chapter-body, .home-contents, .hero, .ls-awning, .pc-launch-row, .tol-read-host, .kicker, .no-bubble, .sr-only, .visually-hidden, .depth-bar, .tol-dive-card, [class*='gm-'], [class*='xw-'], [class*='jl-'], [class*='lib-'], [class*='pp-'], [class*='ng-'], .qw, [hidden]) :is(p, ul, ol, li, dl, dt, dd, h2, h3, h4, hr){ border-color:rgba(160,135,205,.25) !important; }
main .wpf-computed dl{ border-left:0 !important; border-radius:16px; }

/* ==========================================================================
   Easier for everyone: big text, small labels, floating pills, a still page,
   high-contrast (forced colours) and printing.
   ========================================================================== */

/* ---------- The top bar with big text or zoom (site.js adds the classes when things don't fit) ---------- */
.tol-bar.is-narrow .tol-sections{ display:none; }
.tol-bar.is-narrow .tol-contents-btn{ display:inline-block; margin-left:auto; border-color:var(--ink-soft) !important; font-weight:600; }
.tol-bar.is-tight a.tol-member{ display:none; }               /* Join is in the menu panel instead */
.tol-bar.is-tight .tol-brand{ min-width:0; flex:1 1 auto; white-space:normal; }
.tol-bar.is-tight .tol-brand span{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.1; overflow-wrap:anywhere; }
.tol-bar.is-tighter .tol-brand span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* still crowded: Search folds into Menu (the menu panel has the same search box at its top) */
.tol-bar.is-snug button.tol-search-btn{ display:none !important; }
.tol-bar.is-snug .tol-contents-btn{ display:inline-flex !important; align-items:center; gap:.3rem; }
.tol-bar.is-snug .tol-contents-btn::before{ content:""; flex:none; width:1em; height:1em; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.tol-bar.is-tightest .tol-set-name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* the logo never slides under the Quiet button */
.tol-bar .tol-logo{ flex:none; }
.tol-bar .tol-contents-btn{ flex:none; white-space:nowrap; }
/* a short screen (a phone on its side, a small laptop at 150%): a slimmer bar that tucks away while you scroll down */
@media (max-height:600px){
  .tol-bar{ padding-top:.3rem !important; padding-bottom:.3rem !important; }
  .tol-logo{ width:1.7rem; height:1.7rem; }
}
html.tol-bigtext .tol-bar{ padding-top:.25rem !important; padding-bottom:.25rem !important; gap:.5rem; }
html.tol-bigtext .tol-bar button, html.tol-bigtext .tol-bar a.tol-member{ padding:.2rem .55rem !important; font-size:.85rem !important; line-height:1.15; }
html.tol-bigtext .tol-brand{ font-size:.95rem !important; }
html.tol-bigtext .tol-brand span{ font-size:inherit !important; }
html.tol-bigtext .tol-logo{ width:1.5rem; height:1.5rem; }
.tol-bar{ transition:transform .25s ease; }
.tol-bar.is-tucked{ transform:translateY(-110%); }
@media (prefers-reduced-motion: reduce){ .tol-bar{ transition:none; } }

/* ---------- The menu panel: "Keep the page still" and Join ---------- */
.tol-panel-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem; margin:.9rem 0 0; }
.tol-panel a.tol-panel-join{ display:inline-flex; align-items:center; min-height:40px; padding:.4rem 1rem; border:1px solid var(--ink); border-radius:999px;
  color:var(--ink); text-decoration:none; font-weight:600; }
.tol-panel a.tol-panel-join:hover{ background:var(--ink); color:var(--paper); }
.tol-panel a.tol-panel-join.is-member{ border-color:var(--credit); color:var(--credit); }

/* the switch */
.tol-still-btn{ display:inline-flex; align-items:center; gap:.5rem; min-height:40px; padding:.35rem .9rem .35rem .5rem; cursor:pointer;
  font:inherit; font-size:.95rem; line-height:1.2; color:var(--ink); background:rgba(255,253,248,.9); border:1px solid #8C826E; border-radius:999px; }
.tol-still-btn:hover{ background:var(--paper-deep); }
.tol-still-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.tol-still-track{ position:relative; flex:none; width:2.2rem; height:1.25rem; border-radius:999px; background:#E9E2D2; border:1px solid #6B6353; box-sizing:border-box; }
.tol-still-track > span{ position:absolute; top:50%; left:.12rem; width:.85rem; height:.85rem; margin-top:-.425rem; border-radius:50%; background:#6B6353; transition:transform .2s ease; }
.tol-still-btn[aria-pressed="true"] .tol-still-track{ background:#3E6B4C; border-color:#3E6B4C; }
.tol-still-btn[aria-pressed="true"] .tol-still-track > span{ background:#fff; transform:translateX(.9rem); }
.tol-still-state{ font:600 .875rem/1 "IBM Plex Mono", ui-monospace, monospace; color:#4A4439; padding-left:.15rem; }
.tol-still-btn[aria-pressed="true"] .tol-still-state{ color:#2F5A3C; }
.tol-foot .tol-still-btn{ font-size:.9rem; min-height:36px; padding-top:.2rem; padding-bottom:.2rem; }
.tol-foot-links{ align-items:center; }
@media (prefers-reduced-motion: reduce){ .tol-still-track > span{ transition:none; } }
@media print{ .tol-still-btn{ display:none !important; } }

/* ---------- Keep the page still (html.tol-still) ----------
   The garden is taken away by site.js (when the device asks for reduced motion, or Keep the page still / Quiet mode was chosen); the floating bubbles and hearts go; the buddies and mascots stop. */
html.tol-still .tol-wash b, html.tol-still .tol-poplet,
html.tol-still .tol-cheer-heart, html.tol-still .tol-cheer-dot{ display:none !important; }
html.tol-still .tol-wash i,
html.tol-still .tol-cheer, html.tol-still .tol-cheer *,
html.tol-still .read-head::after, html.tol-still .tol-puddles-hi-art, html.tol-still .tol-pud-card-art,
html.tol-still .tol-wx-go, html.tol-still .tol-wx-sun, html.tol-still .tol-tip img, html.tol-still .growing-note .growing-ic,
html.tol-still .pp-hero-art, html.tol-still .tol-logo{ animation:none !important; transition:none !important; }
html.tol-still .tol-reveal{ opacity:1 !important; transform:none !important; }
html.tol-still .tol-cheer-b, html.tol-still .tol-cheer-say{ opacity:1 !important; transform:none !important; }

/* ---------- The cheering buddies, gently alive (cheer.js) ----------
   Only while awake and on screen (is-seen): a slow bob, a hello as they arrive, blinks, a happy
   bounce when tapped, and now and then a lean toward the words. Transform only; nothing flashes. */
.tol-cheer.is-awake.is-seen .tol-cheer-b{ animation:cbIdle 5.6s ease-in-out infinite; }
.tol-cheer.is-right.is-awake.is-seen .tol-cheer-b{ animation-duration:6.4s; animation-delay:-2.2s; }
@keyframes cbIdle{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-3px) rotate(1.4deg); } }
.tol-cheer:not(.is-seen), .tol-cheer:not(.is-seen) *{ animation-play-state:paused !important; }
.tol-cheer.do-wiggle .tol-cheer-b svg{ animation:cbWiggle .9s ease-in-out; }
@keyframes cbWiggle{ 20%{ transform:rotate(-7deg); } 40%{ transform:rotate(6deg); } 60%{ transform:rotate(-4deg); } 80%{ transform:rotate(2deg); } }
.tol-cheer.do-bounce .tol-cheer-b svg{ animation:cbBounce .8s cubic-bezier(.3,.7,.4,1) 2; }
@keyframes cbBounce{ 0%,100%{ transform:translateY(0) scale(1,1); } 20%{ transform:translateY(0) scale(1.1,.9); } 50%{ transform:translateY(-12px) scale(.95,1.06); } 80%{ transform:translateY(0) scale(1.04,.96); } }
.tol-cheer.do-bounce .cb-eyes{ opacity:0; } .tol-cheer.do-bounce .cb-happy{ opacity:1; }
.tol-cheer.do-bounce .cb-smile{ opacity:0; } .tol-cheer.do-bounce .cb-grin{ opacity:1; }
.tol-cheer.is-left{ --cb-lean:7deg; --cb-lean-x:3px; } .tol-cheer.is-right{ --cb-lean:-7deg; --cb-lean-x:-3px; }
.tol-cheer.is-lean .tol-cheer-b svg{ animation:cbLean 2.6s ease-in-out; }
@keyframes cbLean{ 0%,100%{ transform:none; } 35%,70%{ transform:translateX(var(--cb-lean-x)) rotate(var(--cb-lean)); } }
/* the decorative buddy button is never a tab stop, so it needs no focus ring; the pointer still gets a hand */
.tol-cheer-b{ cursor:pointer; }
@media (prefers-reduced-motion: reduce){ .tol-cheer, .tol-cheer *{ animation:none !important; transition:none !important; } }

/* ---------- Today's Weather and Breathe: never over the words ---------- */
html{ scroll-padding-bottom:5.5rem; }       /* whatever gets keyboard focus scrolls clear of the floating pills */
.tol-wx{ gap:.35rem; }
.tol-wx-go{ padding-right:.95rem; min-width:0; }
.tol-wx-x, .tol-wx-never{ flex:none; box-sizing:border-box; min-height:2.25rem; border-radius:999px; background:rgba(255,251,242,.97); border:1px solid #D9C8E6;
  box-shadow:0 6px 18px rgba(90,70,120,.14); cursor:pointer; }
.tol-wx-x{ position:static; margin:0; width:2.25rem; height:2.25rem; font-size:1.3rem; color:#4A4439; }
.tol-wx-never{ padding:.25rem .75rem; font:600 .875rem/1.2 "Lora", Georgia, serif; color:#5B3F7A; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.tol-wx-never:hover, .tol-wx-x:hover{ background:#F4ECF7; color:var(--ink); }
.tol-wx-go small{ font-size:.875rem; color:#4A4439; }
.tol-wx{ max-width:calc(100% - 9.5rem); }
/* small, short or big-text screens: the pills shrink to their little pictures (their names stay for screen readers) */
@media (max-width:560px), (max-height:600px){
  .tol-wx-go > span{ display:none; }
  .tol-wx-go{ padding:.35rem .45rem; }
  .tol-wx{ max-width:calc(100% - 5.5rem); }
  .tol-breathe-btn > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .tol-breathe-btn{ padding:.6rem !important; }
  .tol-breathe-btn svg{ width:1.45rem; height:1.45rem; }
}
html.tol-bigtext .tol-wx-go > span, html.tol-bigtext .tol-breathe-btn > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
html.tol-bigtext .tol-wx-go{ padding:.35rem .45rem; }
html.tol-bigtext .tol-wx{ max-width:calc(100% - 5.5rem); }
html.tol-bigtext .tol-breathe-btn{ padding:.6rem !important; }
/* room under the last words for the pills */
.tol-foot{ padding-bottom:calc(2.5rem + 5rem + env(safe-area-inset-bottom, 0px)); }

/* ---------- Small labels: at least about 14px, and dark enough to read (4.5:1) ---------- */
.depth-bar, .depth-bar span, .depth-bar a, .dig, .scene-when, details.deeper > summary,
.tol-code, .tol-drop-code, .tol-acc-count, .tol-acc-here, .tol-bar .tol-drop .tol-drop-all, .tol-index li > .tol-dig,
.tol-read-k, .tol-read-src, .tol-read-note, .tol-tip-k, .tol-tip-topic, .tol-tip-next, .tol-read-next, .tol-pager-dir,
.tol-cheer-name, .growing-chip, .announce-tag, .next-kicker, .start-sub, .wn-tag, .fp-num, .fp-field, .fp-tags a, .step-n, .step-n .opt,
.step-hint, .fc-sub, .fc-head .window, body .jl-pal .jl-tagline, body .jl-k, body .jl-hz, body .jl-note,
.cv-small, .cv-feel small, .cv-title small, .cv-pillar-k small, .wpf-list .code, .ws-week-k{ font-size:.875rem !important; }
.read-code .formal{ font-size:max(.875rem, .66em) !important; }
.cv-small, .step-hint, .jl-note, .tol-read-note, .fp-field{ font-size:.9rem !important; }
details.deeper > summary::after{ font-size:.875rem !important; }
.read .ideas > li::before{ font-size:.875rem !important; }
/* the idea numbers and codes are a little wider now */
.tol-row{ grid-template-columns:5.4rem 1fr auto; }
.tol-panel .tol-row{ grid-template-columns:5.6rem 1fr auto; }
.tol-index li > .tol-dig{ margin-left:calc(6.3rem + 3px); }
.tol-panel .tol-index li > .tol-dig{ margin-left:calc(6.6rem + 3px); }
@media (max-width:520px){ .tol-row, .tol-panel .tol-row{ grid-template-columns:1fr auto; } .tol-index li > .tol-dig, .tol-panel .tol-index li > .tol-dig{ margin-left:.55rem; } }
.tol-drop-code{ min-width:4.6rem; }
/* deeper colours for the small labels */
.tol-cheer-name{ color:#6E5373; }
.tol-cheer-name em{ color:#6E5373; }
.tol-code, .tol-acc-count, .tol-bar .tol-drop .tol-drop-all{ color:#4A4439; }
.tol-drop-code, .tol-acc-here, .tol-panel .tol-code{ color:#7A5518; }
.scene-when, details.deeper > summary{ color:#7A5518; }
details.deeper > summary::after{ color:#4A4439; }
.depth-bar, main > p.depth-bar a:not(.dig){ color:#4A4439; }
body .jl-pal .jl-tagline{ color:#6E5373; }
.tol-tip-k, .tol-read-k, .tol-tip-topic, body .jl-k{ color:#6E5373 !important; }
.tol-read-p, .rung strong em, .fp-tags b, .read .fp-jump a, .read .fp-jump a b, .tol-fine, .lib-pillar h3 small,
.tt-kicker, .tt-day, .tt-how, .tt-note, .tt-progress span, .tt-btn.is-quiet{ font-size:.875rem !important; }

/* ---------- High contrast (Windows and other forced-colour modes) ----------
   Plain text on a plain background: no garden, no bubbles or hearts, no mascots or buddies. */
@media (forced-colors: active){
  .tol-garden-bg, .tol-garden-veil, .tol-wash, .tol-breathe-bg, .tol-cheer, .tol-poplet,
  .tol-puddles-hi-art, .tol-pud-card-art, .tol-tip img, .pp-hero-art{ display:none !important; }
  .read-head::after, .tol-simple .read-head::after, .tol-deep .read-head::after{ content:none !important; display:none !important; }
  html.has-garden, html.has-garden body, body{ background:Canvas !important; color:CanvasText; }
  .tol-bar, .tol-panel, .tol-foot, .tol-drop{ background:Canvas !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .tol-still-track{ forced-color-adjust:none; background:Canvas; border-color:CanvasText; }
  .tol-still-track > span{ forced-color-adjust:none; background:CanvasText; }
  .tol-still-btn[aria-pressed="true"] .tol-still-track{ background:Highlight; border-color:Highlight; }
  .tol-still-btn[aria-pressed="true"] .tol-still-track > span{ background:HighlightText; }
  .tol-wx-go, .tol-wx-x, .tol-wx-never, .tol-breathe-btn{ border:1px solid ButtonText; }
}

/* ---------- Printing ---------- */
@media print{
  main .announce-stack, main .announce-bar{ display:none !important; }   /* the "New" notices are for the screen */
  .tol-cheer, .tol-panel-tools{ display:none !important; }
}

/* Pal cam launcher ("Check in" link at the top of the home page). The cam itself and its own styles
   load on demand from site.js; these few rules just let the link look right before then. */
.pc-launch{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.55rem 1.15rem .55rem .7rem;border-radius:999px;border:2px solid #F3C6D3;background:linear-gradient(135deg,#FFF6E8,#FBE6F0 60%,#E9E2FB);color:#3C3350;font:600 1rem/1.2 Lora,Georgia,serif;cursor:pointer;box-shadow:0 6px 18px rgba(92,74,134,.16);text-decoration:none;touch-action:manipulation;max-width:100%;box-sizing:border-box}
.pc-launch:hover{box-shadow:0 10px 24px rgba(92,74,134,.22);background:linear-gradient(135deg,#FFF1DC,#F9DCE9 60%,#E2D8FA)}
.pc-launch:focus-visible{outline:3px solid #7C6BB0;outline-offset:3px}
.pc-launch .pc-paw{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#3C3350;color:#FFF3D6}
.pc-launch .pc-paw svg{width:20px;height:20px}
.pc-launch small{display:block;font:500 14px/1.25 Lora,Georgia,serif;letter-spacing:0;color:#6E5A86;white-space:nowrap}
.pc-launch-row{position:relative;z-index:97;display:flex;justify-content:center;margin:.2rem 0 .9rem}
.pc-launch-row[hidden]{display:none}
.pc-launch .pc-lt{display:block}
.pc-launch small .pc-dot{display:inline-block;margin-right:.35rem;vertical-align:1px}
.pc-launch .pc-dot{width:8px;height:8px;border-radius:50%;background:#E4566E;box-shadow:0 0 0 3px rgba(228,86,110,.2);animation:pcDot 2s ease-in-out infinite}
@keyframes pcDot{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .pc-launch .pc-dot{ animation:none; } }

html.tol-still .pc-launch .pc-dot{ animation:none; }

/* ---------- Screen-reader-only text: read aloud, not shown ---------- */
.sr-only{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important; }

/* =====================================================================
   Reader care: honest sign-up notes, chapter bar, reading options,
   dark mode, calmer floaters, and a tidier first screen on phones
   ===================================================================== */

/* the sign-up couldn't reach the newsletter: an honest note with a way to try again */
.tol-msg.is-warn{ color:#5A4214; }
.tol-msg-retry{ font:600 .92rem/1.2 "Lora", Georgia, serif; margin:.35rem 0 0; padding:.45rem .95rem; min-height:40px; border-radius:999px;
  border:1px solid #B08A3E; background:#FFF6E0; color:#4A3510; cursor:pointer; }
.tol-msg-retry:hover{ background:#FBEBC4; }
.tol-msg-retry:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.tol-join-note{ margin:1rem 0 !important; padding:.8rem 1rem !important; border-radius:14px; background:#FFF8E8; border:1px solid #E6CD92; font-size:.95rem; }

/* "Chapter N of 6" under a chapter's title */
.tol-chbar{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; margin:-.6rem 0 1.4rem; padding:.55rem .8rem; border-radius:14px;
  background:rgba(255,251,242,.92); border:1px solid var(--line); font-family:"Lora", Georgia, serif; }
.read .tol-chbar p, .tol-chbar p{ margin:0; max-width:none; line-height:1.3; }
.tol-chbar-k{ font-weight:600; font-size:.95rem; }
.tol-chbar-k span{ font-weight:400; color:var(--ink-soft); }
.tol-chbar ol{ display:flex; gap:.3rem; list-style:none; margin:0 !important; padding:0 !important; }
.tol-chbar li{ margin:0 !important; max-width:none; }
.tol-chbar ol{ flex-wrap:wrap; }
.tol-chbar li.is-part1 a{ font-size:.85rem; padding:0 .55rem; }
.tol-chbar li.is-part2{ margin-left:.5rem !important; padding-left:.6rem; border-left:1px solid var(--line); }
.tol-chbar ol a{ display:grid; place-items:center; min-width:2.2rem; height:2.2rem; padding:0 .3rem; border-radius:999px; border:1px solid var(--line);
  font:600 .85rem/1 "IBM Plex Mono", ui-monospace, monospace; color:var(--ink); text-decoration:none; background:var(--paper); box-sizing:border-box; }
.tol-chbar ol a:hover{ border-color:var(--brass); }
.tol-chbar ol a[aria-current="page"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tol-chbar-nav{ display:flex; gap:1rem; margin-left:auto !important; font-size:.95rem; }
.tol-chbar-nav a{ font-weight:600; min-height:2.2rem; display:inline-flex; align-items:center; }
.tol-chbar :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
@media (max-width:560px){ .tol-chbar-nav{ margin-left:0 !important; width:100%; justify-content:space-between; } }
@media print{ .tol-chbar{ display:none; } }

/* the Simple / Full chooser: the link is the short name, and the whole card still opens it */
.tol-depth-opt{ position:relative; }
.tol-depth-opt a.tol-depth-name{ color:inherit; text-decoration:none; }
.tol-depth-opt a.tol-depth-name::after{ content:""; position:absolute; inset:0; border-radius:18px; }
.tol-depth-opt a.tol-depth-name:focus-visible{ outline:none; }
.tol-depth-opt:focus-within{ outline:3px solid var(--focus, #2F5F8A); outline-offset:2px; }

/* reading options in the menu panel */
.tol-readopts{ margin:.9rem 0 0; border:1px solid var(--line); border-radius:14px; padding:0 .9rem; background:var(--paper); }
.tol-readopts > summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; }
.tol-readopts > summary:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.tol-readopts fieldset{ border:0; margin:0 0 .6rem; padding:0; display:flex; flex-wrap:wrap; gap:.3rem .9rem; }
.tol-readopts legend{ font-size:.9rem; color:var(--ink-soft); margin-bottom:.2rem; padding:0; }
.tol-readopts label{ display:inline-flex; align-items:center; gap:.35rem; min-height:40px; cursor:pointer; }
.tol-readopts input{ width:1.1rem; height:1.1rem; accent-color:#3E6B4C; }
.tol-readopts-help{ align-items:flex-start !important; }
.tol-readopts-help input{ margin-top:.2rem; flex:none; }
.tol-readopts-help small{ display:block; color:var(--ink-soft); font-size:.85rem; }
.tol-readopts-foot{ margin:.2rem 0 .8rem; font-size:.88rem; color:var(--ink-soft); }
.tol-readopts-reset{ font:inherit; background:none; border:0; padding:0; color:var(--focus); text-decoration:underline; cursor:pointer; min-height:32px; }

/* text size: see "text size" further down (one zoom on the page, or a bigger root size on the games), never both */

/* hide the helpers */
html.tol-no-helpers :is(.tol-pud-card, .tol-cheer, .tpv, .tpv-bub, .tol-tip, .tol-wx, .pci, .tol-join-pop, .tol-invite, .tol-puddles-hi){ display:none !important; }

/* ---------- Floating hearts: whole hearts, never split in two ---------- */
.tol-heart{ animation:tol-bob-soft 32s var(--ease-soft, ease-in-out) infinite; }
.tol-heart::before{ clip-path:none !important; animation:none !important; transform:none !important; }
.tol-heart::after{ display:none !important; }

/* ---------- The Breathe break: its drifting bubbles stay clear of the words ---------- */
@media (max-width:760px){ .tol-breathe-bg{ display:none !important; } }
.tol-breathe-bg{ opacity:.55; }

/* ---------- The Breathe button on phones: labeled, and never hiding the last lines ---------- */
@media (max-width:560px){
  .tol-breathe-btn > span{ position:static !important; width:auto !important; height:auto !important; overflow:visible !important; clip:auto !important; white-space:nowrap; }
  .tol-breathe-btn{ padding:.45rem .85rem .45rem .55rem !important; gap:.35rem; font-size:.9rem; }
  .tol-breathe-btn svg{ width:1.2rem !important; height:1.2rem !important; }
  main{ padding-bottom:4.5rem; }
}
html.tol-bigtext .tol-breathe-btn > span{ position:static !important; width:auto !important; height:auto !important; clip:auto !important; }

/* ---------- The little "well done" note: on phones it drops in from the top, clear of the card and the pills ---------- */
@media (max-width:760px){
  html .tr-toast{ top:calc(var(--tol-bar-bottom, var(--tol-bar-h, 56px)) + 8px); bottom:auto; transform:translate(-50%, -30px); max-width:calc(100vw - 32px); box-sizing:border-box; }
  html .tr-toast.is-in{ transform:translate(-50%, 0); }
}

/* ---------- Mini dives: a comfortable tap area that stays on its own line ---------- */
.tol-dive::after{ left:-6px; right:-6px; top:50%; width:auto; min-width:0; height:max(100%, 24px); min-height:0; transform:translateY(-50%); }
.tol-dive{ padding:0 .15em; }

/* ---------- Home on phones: the opening line and "Start here" on the first screen ---------- */
.home-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; margin:.1rem 0 1rem !important; padding:0 !important; list-style:none; }
.home-chips li{ margin:0 !important; max-width:none !important; }
.read .home-chips a{ display:inline-flex; align-items:center; min-height:40px; padding:.3rem .95rem; border-radius:999px; text-decoration:none;
  font:600 .92rem/1.2 "Lora", Georgia, serif; color:#2B2620; background:#FFFBF2; border:1.5px solid #D9C8F0; }
.read .home-chips a.is-main{ background:#2F5F8A; border-color:#2F5F8A; color:#fff; }
.read .home-chips a:hover{ border-color:#9A80C8; }
.read .home-chips a:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tol-join-short{ display:none; }
@media (max-width:560px){
  html.tol-home main.read{ padding-top:14px !important; }
  html.tol-home .home-intro{ margin-bottom:.35rem !important; font-size:.84rem; }
  html.tol-home .home-chips{ margin-bottom:.7rem !important; }
  html.tol-home .tol-join-banner .tol-msg:empty{ display:none; }
  html.tol-home .tol-join-banner form{ margin-bottom:0; }
  html.tol-home .tol-join-banner{ padding:.75rem .85rem .7rem; margin-bottom:.8rem; border-radius:18px; }
  html.tol-home .tol-join-banner .tol-join-k, html.tol-home .tol-join-banner .tol-join-long, html.tol-home .tol-join-banner .tol-join-small{ display:none; }
  html.tol-home .tol-join-banner h2{ font-size:1rem; margin-bottom:.15rem; }
  html.tol-home .tol-join-banner .tol-join-short{ display:block; font-size:.88rem; margin:0 0 .45rem; }
  html.tol-home .tol-join-banner input[type=email], html.tol-home .tol-join-banner button{ min-height:44px; }
  html.tol-home .pc-launch-row{ margin:0 0 .6rem; }
  html.tol-home .pc-launch{ min-height:44px; padding:.35rem .9rem .35rem .45rem; font-size:.92rem; }
  html.tol-home .pc-launch small{ display:none; }
  html.tol-home .pc-launch .pc-paw{ width:28px; height:28px; }
  html.tol-home .tol-puddles-hi{ margin-bottom:.8rem; }
  html.tol-home main .announce-stack{ gap:6px; margin-bottom:1.2rem; }
  html.tol-home main .announce-bar{ padding:8px 12px; font-size:.9rem; }
}

/* =====================================================================
   Dark mode. It follows the device by itself, and "Dark mode" in the menu
   or the footer overrides it on this device. The page's own colors are
   turned around softly, and pictures, video, the garden behind the page and
   the things that are already dark (the Breathe break, the pal cam, the Frequency Buddies player and cards) are
   turned back so they look the way they were made. Pages with their own
   dark look (the games, the Night Garden, Drift) are left as they are.
   ===================================================================== */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not(.tol-nodark):not(:has(> body.is-game)){ filter:invert(.9) hue-rotate(180deg); background:#FFFDF7; }
  html:not([data-theme="light"]):not(.tol-nodark):not(:has(> body.is-game)) :is(img, video, iframe, canvas, picture, svg, .tol-breathe, .pc-ov, .tr-card, .tol-wash, .fb-player, .fb-season):not(:is(svg, picture, .tol-breathe, .pc-ov, .tr-card, .tol-wash, .fb-player, .fb-season) *){ filter:invert(1) hue-rotate(180deg); }
  html:not([data-theme="light"]):not(.tol-nodark):not(:has(> body.is-game)) .read-head::after{ filter:invert(1) hue-rotate(180deg); }
  html:not([data-theme="light"]):not(.tol-nodark):not(:has(> body.is-game)) .tol-wash{ opacity:.5; }
}
html[data-theme="dark"]:not(.tol-nodark){ filter:invert(.9) hue-rotate(180deg); background:#FFFDF7; }
html[data-theme="dark"]:not(.tol-nodark) :is(img, video, iframe, canvas, picture, svg, .tol-breathe, .pc-ov, .tr-card, .tol-wash, .fb-player, .fb-season):not(:is(svg, picture, .tol-breathe, .pc-ov, .tr-card, .tol-wash, .fb-player, .fb-season) *){ filter:invert(1) hue-rotate(180deg); }
html[data-theme="dark"]:not(.tol-nodark) .read-head::after{ filter:invert(1) hue-rotate(180deg); }
html[data-theme="dark"]:not(.tol-nodark) .tol-wash{ opacity:.5; }
@media print{ html, html[data-theme="dark"]{ filter:none !important; } }
/* full screen leaves the page's dark filter behind, so the player shows its own colors there */
.fb-player:fullscreen{ filter:none !important; }
.fb-player:-webkit-full-screen{ filter:none !important; }
.read-head .tol-chbar{ margin:.9rem 0 0; background:rgba(255,255,255,.55); }
@media (max-width:560px){ .tol-depth-who{ display:none; } .depth-bar.tol-depth{ padding:.85rem .9rem; } }

/* ---------- Search the site (in the menu panel; the bar's Search button opens it) ---------- */
.tol-bar button.tol-search-btn{ display:inline-flex; align-items:center; gap:.35rem; margin-left:.25rem; }
.tol-bar button.tol-search-btn svg{ flex:none; }
@media (max-width:980px){ .tol-bar button.tol-search-btn{ margin-left:auto; } .tol-bar .tol-contents-btn{ margin-left:0; } }
@media (max-width:420px){ .tol-bar button.tol-search-btn span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .tol-bar button.tol-search-btn{ padding:.5rem .6rem; } }
.tol-find{ margin:.9rem 0 0; }
.tol-find label{ display:block; font-weight:600; margin:0 0 .3rem; }
.tol-find input{ box-sizing:border-box; width:100%; min-height:46px; font:1rem "Lora", Georgia, serif; color:var(--ink); background:#FFFDF7;
  border:1.5px solid var(--ink-soft); border-radius:999px; padding:.55rem 1rem; }
.tol-find input:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tol-find-note{ margin:.35rem 0 0; font-size:.88rem; color:var(--ink-soft); }
.tol-find-results{ list-style:none; margin:.6rem 0 0; padding:0; }
.tol-find-results li{ margin:0; border-bottom:1px dotted var(--line); }
.tol-find-results a{ display:block; padding:.65rem .5rem; color:var(--ink); text-decoration:none; border-radius:8px; }
.tol-find-results a:hover{ background:var(--paper-deep); }
.tol-find-results a:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.tol-find-t{ display:block; font-weight:600; font-size:1.02rem; }
.tol-find-t small{ font-weight:400; font-size:.8rem; color:var(--ink-soft); margin-left:.3rem; }
.tol-find-s{ display:block; font-size:.9rem; color:var(--ink-soft); line-height:1.45; margin-top:.15rem; }
.tol-find mark{ background:rgba(168,121,47,.22); color:inherit; border-radius:2px; }
h1.tol-page-h{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:2rem; line-height:1.15; max-width:22ch; margin:0 0 1rem; }

/* =====================================================================
   Comfort: Quiet mode, Settings, Easy reading, text size, the reading ruler
   (site.js: the Settings section). Everything here is a choice kept on this device.
   ===================================================================== */
:root{ --tol-sans:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* the header: Quiet and Settings on every width, next to Search */
.tol-bar button.tol-bar-quiet, .tol-bar button.tol-bar-set{ display:inline-flex; align-items:center; gap:.35rem; flex:none; white-space:nowrap; }
.tol-bar button.tol-bar-quiet svg, .tol-bar button.tol-bar-set svg{ flex:none; }
.tol-bar button.tol-bar-quiet{ margin-left:.4rem; border-color:var(--line); border-radius:999px; }
.tol-bar button.tol-bar-quiet[aria-pressed="true"]{ background:#3E6B4C; border-color:#3E6B4C; color:#fff; }
.tol-bar button.tol-bar-quiet[aria-pressed="true"]:hover{ background:#335A40; color:#fff; }
.tol-bar button.tol-bar-set{ border-radius:999px; }
.tol-bar button.tol-search-btn{ margin-left:0; }
/* desktop: the section names need the room, so Settings and Search show their pictures (names stay for screen readers) */
@media (min-width:981px) and (max-width:1599px){
  .tol-bar .tol-set-name, .tol-bar button.tol-search-btn span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .tol-bar button.tol-bar-set, .tol-bar button.tol-search-btn{ padding-left:.5rem !important; padding-right:.5rem !important; }
  .tol-bar{ gap:.45rem !important; }
  .tol-bar button.tol-bar-quiet{ padding-left:.6rem !important; padding-right:.7rem !important; }
  .tol-bar a.tol-member{ margin-left:.1rem; padding-left:.7rem !important; padding-right:.7rem !important; }
}
@media (max-width:980px){
  .tol-bar button.tol-bar-quiet{ margin-left:auto; }
  .tol-bar button.tol-search-btn, .tol-bar .tol-contents-btn{ margin-left:0 !important; }
}
.tol-bar.is-narrow button.tol-bar-quiet{ margin-left:auto; }
.tol-bar.is-narrow .tol-contents-btn{ margin-left:0 !important; }
@media (max-width:560px){
  /* a phone: Search shows its picture; Settings keeps its word, so nobody has to guess what the sliders mean */
  .tol-bar button.tol-search-btn span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .tol-bar button.tol-bar-set, .tol-bar button.tol-search-btn{ padding:.45rem .5rem !important; }
  .tol-bar button.tol-bar-set{ gap:.25rem; }
  .tol-bar button.tol-bar-quiet{ padding:.42rem .6rem !important; }
  .tol-bar{ gap:.3rem !important; }
}
@media (max-width:374px){ .tol-bar .tol-quiet-name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } }
.tol-bar a.tol-member[hidden]{ display:none !important; }

/* the menu panel and footer: Quiet mode, Settings */
.tol-panel .tol-set-btn, .tol-foot .tol-set-btn{ display:inline-flex; align-items:center; gap:.4rem; min-height:40px; padding:.35rem .9rem; cursor:pointer;
  font:inherit; font-size:.95rem; color:var(--ink); background:rgba(255,253,248,.9); border:1px solid #8C826E; border-radius:999px; }
.tol-foot .tol-set-btn{ font-size:.9rem; min-height:36px; }
.tol-panel .tol-set-btn:hover, .tol-foot .tol-set-btn:hover{ background:var(--paper-deep); }
.tol-still-state{ font-family:var(--tol-sans) !important; }

/* the Settings panel */
.tol-set{ position:fixed; inset:0; z-index:985; display:flex; justify-content:flex-end; background:rgba(33,29,23,.35); font-family:"Lora", Georgia, serif; color:var(--ink); }
.tol-set[hidden]{ display:none; }
.tol-set-card{ box-sizing:border-box; width:min(32rem, 100%); max-width:100%; height:100%; overflow-y:auto; overscroll-behavior:contain; background:var(--paper); border-left:3px double var(--ink);
  padding:0 clamp(1rem,4vw,1.8rem) 2.5rem; }
.tol-set-head{ position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--paper); padding:1rem 0 .7rem; border-bottom:1px solid var(--line); }
.tol-set-head h2{ margin:0; font:600 1.5rem/1.2 "Fraunces", Georgia, serif; }
.tol-set-close{ font:inherit; font-size:.95rem; min-height:44px; padding:.35rem .9rem; background:none; color:var(--ink); border:1px solid #8C826E; border-radius:999px; cursor:pointer; }
.tol-set-close:hover{ background:var(--paper-deep); }
.tol-set-intro{ margin:.9rem 0 .8rem; color:var(--ink-soft); line-height:1.5; }
.tol-set-presets{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (max-width:460px){ .tol-set-presets{ grid-template-columns:1fr; } }
.tol-preset{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; text-align:left; font:inherit; color:var(--ink); cursor:pointer;
  padding:.85rem .9rem 2.3rem; border-radius:18px; border:1.5px solid #CFC3A5; background:#FFFDF7; }
.tol-preset:hover{ border-color:#8C826E; }
.tol-preset strong{ font:600 1.08rem/1.25 "Fraunces", Georgia, serif; }
.tol-preset small{ font-size:.9rem; line-height:1.45; color:var(--ink-soft); }
.tol-preset-ico{ font-size:1.4rem; line-height:1; }
.tol-preset-state{ position:absolute; left:.9rem; bottom:.7rem; font:600 .9rem/1 var(--tol-sans); color:#4A4439; }
.tol-preset-state::before{ content:"Off"; }
.tol-preset[aria-pressed="true"]{ border-color:#3E6B4C; background:#EAF6EF; box-shadow:0 0 0 2px #3E6B4C inset; }
.tol-preset[aria-pressed="true"] .tol-preset-state{ color:#2F5A3C; }
.tol-preset[aria-pressed="true"] .tol-preset-state::before{ content:"On \2713"; }
.tol-set-k{ margin:1.4rem 0 .5rem; font:600 1.15rem/1.3 "Fraunces", Georgia, serif; }
.tol-set-qnote{ margin:0 0 .5rem; font-size:.92rem; color:#2F5A3C; }
.tol-set fieldset{ border:0; margin:0 0 .7rem; padding:0; display:flex; flex-wrap:wrap; gap:.2rem .9rem; }
.tol-set legend{ font-weight:600; margin-bottom:.2rem; padding:0; font-size:.98rem; }
.tol-set fieldset label{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px; cursor:pointer; }
.tol-set input[type=radio]{ width:1.15rem; height:1.15rem; accent-color:#3E6B4C; margin:0; }
.tol-set-easyfont{ font-family:var(--tol-sans); }
.tol-set-swatch{ display:inline-block; width:1rem; height:1rem; border-radius:50%; border:1px solid #8C826E; }
.tol-set-swatch.is-cream{ background:#FBEBC9; } .tol-set-swatch.is-blue{ background:#D6E6F5; } .tol-set-swatch.is-mint{ background:#D5EEDF; }
.tol-set-sw{ position:relative; display:flex; align-items:flex-start; gap:.7rem; padding:.55rem 0; min-height:44px; cursor:pointer; border-bottom:1px dotted var(--line); }
.tol-set-sw input{ position:absolute; opacity:0; width:1px; height:1px; }
.tol-set-sw > span:last-child{ flex:1; line-height:1.35; }
.tol-set-sw small{ display:block; margin-top:.15rem; font-size:.9rem; color:var(--ink-soft); line-height:1.45; }
.tol-set-track{ position:relative; flex:none; width:2.5rem; height:1.4rem; margin-top:.05rem; border-radius:999px; background:#E9E2D2; border:1px solid #6B6353; box-sizing:border-box; }
.tol-set-track > span{ position:absolute; top:50%; left:.15rem; width:1rem; height:1rem; margin-top:-.5rem; border-radius:50%; background:#6B6353; transition:transform .2s ease; }
.tol-set-sw input:checked + .tol-set-track{ background:#3E6B4C; border-color:#3E6B4C; }
.tol-set-sw input:checked + .tol-set-track > span{ background:#fff; transform:translateX(1.05rem); }
.tol-set-sw input:focus-visible + .tol-set-track{ outline:3px solid var(--focus); outline-offset:2px; }
.tol-set-sw input:disabled + .tol-set-track{ opacity:.55; }
.tol-set-sw:has(input:disabled){ cursor:default; }
.tol-set-note{ margin:1rem 0 0; padding:.6rem .8rem; border-radius:14px; background:#F3EEF9; font-size:.95rem; line-height:1.45; }
.tol-set-foot{ margin:1.2rem 0 0; font-size:.92rem; color:var(--ink-soft); line-height:1.6; }
.tol-set-foot a{ display:inline-block; margin-left:.3rem; color:var(--focus); }
.tol-set-reset{ font:inherit; background:none; border:0; padding:0; min-height:36px; color:var(--focus); text-decoration:underline; cursor:pointer; }
.tol-set :focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .tol-set-track > span{ transition:none; } }
@media print{ .tol-set, .tol-offer, .tol-ruler, .tol-bar-quiet, .tol-bar-set{ display:none !important; } }

/* the first-visit offer */
.tol-offer{ margin:.4rem auto 1rem; max-width:40rem; padding:.85rem 1rem; border-radius:18px; background:#FFFDF7; border:1.5px solid #D9C8F0; box-shadow:0 6px 18px rgba(90,70,120,.1);
  text-align:left; font-size:.97rem; line-height:1.5; color:var(--ink); position:relative; z-index:2; }
.read .tol-offer p, .tol-offer p{ margin:0; max-width:none; padding:0; background:none; box-shadow:none; border:0; font-size:inherit; color:inherit; }
.tol-offer .tol-offer-row{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem; }
.tol-offer button{ font:600 .95rem/1.2 "Lora", Georgia, serif; min-height:44px; padding:.45rem 1rem; border-radius:999px; cursor:pointer; background:#2F5F8A; color:#fff; border:1px solid #2F5F8A; }
.tol-offer button.is-quiet{ background:transparent; color:var(--ink); border-color:#8C826E; }
.tol-offer button:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* text size: every word on the page grows, whatever size the page set it in */
html.tol-text-lg:not(.tol-nozoom) body{ zoom:1.15; }
html.tol-text-xl:not(.tol-nozoom) body{ zoom:1.35; }
html.tol-text-xxl:not(.tol-nozoom) body{ zoom:1.6; }
html.tol-nozoom.tol-text-lg{ font-size:115%; }
html.tol-nozoom.tol-text-xl{ font-size:135%; }
html.tol-nozoom.tol-text-xxl{ font-size:160%; }
html:is(.tol-text-lg, .tol-text-xl, .tol-text-xxl) .tol-panel{ width:min(34rem, 100%); }
/* the top bar grows a little less than the page on a phone (about 1.12x at the two biggest sizes), so
   Quiet, Settings and Menu keep their words and the logo never runs under them */
@media (max-width:700px){
  html.tol-text-xl:not(.tol-nozoom) .tol-bar{ zoom:.9; }
  html.tol-text-xxl:not(.tol-nozoom) .tol-bar{ zoom:.7; }
}

/* the easy-to-read font, roomy spacing, and Easy reading's shorter, left-aligned lines */
html.tol-font-easy body, html.tol-font-easy body :not(svg):not(svg *):not(.tol-keep-font):not(code):not(pre):not(kbd){ font-family:var(--tol-sans) !important; }
html.tol-space-wide main :is(p, li, dd, dt, td, th, blockquote, figcaption, label, summary, small){ letter-spacing:.04em !important; word-spacing:.16em !important; line-height:2 !important; }
html.tol-space-wide main :is(h1, h2, h3, h4){ letter-spacing:.02em !important; word-spacing:.1em !important; line-height:1.4 !important; }
html.tol-easy main :is(p, li, dd, blockquote, h1, h2, h3, figcaption){ text-align:left !important; }
html.tol-easy main :is(p, li, dd, blockquote){ max-width:60ch !important; hyphens:none !important; }
html.tol-easy .home-intro{ text-align:left !important; }

/* a soft tint over the whole page */
html:is(.tol-tint-cream, .tol-tint-blue, .tol-tint-mint) body::after{ content:""; position:fixed; inset:0; z-index:2147483000; pointer-events:none; mix-blend-mode:multiply; }
html.tol-tint-cream body::after{ background:rgba(250,226,178,.32); }
html.tol-tint-blue body::after{ background:rgba(190,215,240,.34); }
html.tol-tint-mint body::after{ background:rgba(190,230,205,.34); }
html[data-theme="dark"] body::after{ display:none; }
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) body::after{ display:none; } }

/* the reading ruler */
.tol-ruler{ position:fixed; left:0; right:0; top:0; height:2.6em; z-index:2147482000; pointer-events:none; border-top:2px solid rgba(47,95,138,.45); border-bottom:2px solid rgba(47,95,138,.45);
  background:rgba(255,236,160,.16); box-shadow:0 0 0 100vmax rgba(40,34,26,.14); }

/* "Hide the helpers" also puts away the learning trail and the petals; Quiet mode adds no levels,
   toasts, bursts or pop-ups */
html:is(.tol-no-helpers, .tol-quiet) :is(.lp-trail, .lp-petals, .tr-chip, [data-rewards-chip], .lp-spark, .lp-quest-state){ display:none !important; }
html.tol-quiet :is(.tr-toast, .tr-confetti, .tol-planted, .tol-poplet, .tol-join-pop, .tol-invite, .pci, .tol-wx, .tol-offer){ display:none !important; }
html.tol-quiet .pc-launch .pc-dot{ display:none; }
/* Quiet mode, plain: the decorations and extras step aside so the first real sentence is on screen ("Show extras" brings them back) */
html.tol-quiet-plain :is(.tol-wash, [data-mini-player], .tol-mp, .tol-pillars, .lp-card, .tol-read-host, .tol-read-wrap, .tol-tip, .tol-fp-note, .tol-pud-card, .tol-buddies, .tol-fbs, .tol-fbs-wrap){ display:none !important; }
/* (Quiet mode keeps the Breathe button: it is one of the calm ways in, so it never hides with the extras) */
.tol-quiet-extras{ display:none; }
html.tol-quiet .tol-quiet-extras{ display:block; margin:.2rem 0 1rem !important; padding:0 !important; background:none !important; box-shadow:none !important; border:0 !important; }
.tol-quiet-extras button{ font:inherit; font-size:.88rem; min-height:40px; padding:.35rem .9rem; border-radius:999px; border:1px dashed var(--line, #d8cfb8); background:none; color:var(--ink-soft, #5A5346); cursor:pointer; }
.tol-quiet-extras button:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
@media print{ .tol-quiet-extras{ display:none !important; } }

/* Keep the page still, everywhere: the Breathe break's drifting light, bubbles and hearts, the toasts and pop-ups */
html.tol-still .tol-breathe-aurora, html.tol-still .tol-breathe-bg, html.tol-still .tol-breathe-ripples{ display:none !important; }
html.tol-still .tol-breathe.is-open{ animation:none !important; }
html.tol-still :is(.tr-toast, .tr-card, .tr-card-box, .tol-join-pop, .tol-planted, .tol-wx, .tol-invite, .pci, .tol-offer, .tol-dive-box, .tol-dive-card){ transition:none !important; animation:none !important; }
html.tol-still :is(.tr-card-art, .tr-confetti span, .lp-spark, .pc-dot){ animation:none !important; }
html.tol-still .tr-confetti{ display:none !important; }
html.tol-still, html.tol-still *{ scroll-behavior:auto !important; }

/* =====================================================================
   Reader fixes from first-time testers
   ===================================================================== */

/* chapters: the little open-book buddy sits up by the title, so it never covers "Next" */
.read-head:has(.tol-chbar)::after{ bottom:auto !important; top:1rem; }
.read-head .tol-chbar{ position:relative; z-index:1; }
@media (max-width:560px){ .read-head:has(.tol-chbar)::after{ top:.8rem; } }

/* the book's own chapter counter (book-layout.css numbers every "nav a") never reaches the site's own strips */
:is(.tol-pillars, .tol-chbar, .tol-pager, .tol-find, .tol-bar, .tol-panel) a::before{ content:none !important; display:none !important; }

/* wayfinding labels: plain sentence case in a clear sans, at least 14.4px (decorative numbers and codes keep their look) */
:is(.lp-kicker, .lp-count, .lp-ex-k, .qm-k, .qm-type, .lp-val, .tol-tip-k, .tol-tip-topic, .tol-read-k, .tol-read-src, .scene-when, .announce-tag, .start-sub, .next-kicker,
  .fp-num, .fp-field, .tol-inst small, .tol-depth-name small, .lp-quest-state, .nt-tag, .nt-plain b, .tr-card-k, .br-label, .br-top, .tol-breathe-sub,
  .tol-code, .tol-drop-code, .tol-bar .tol-drop .tol-drop-all, .tol-acc-count, .tol-access, .tol-pager-dir, .tol-chbar-k, .depth-bar > span, .lib-pillar-list small, .lib-pillar small){
  font-family:var(--tol-sans) !important; text-transform:none !important; letter-spacing:0 !important; }
:is(.lp-kicker, .lp-count, .lp-ex-k, .qm-k, .qm-type, .tol-tip-k, .tol-tip-topic, .tol-read-k, .tol-read-src, .scene-when, .tol-inst small, .tol-depth-name small,
  .lp-quest-state, .nt-tag, .nt-plain b, .tr-card-k, .br-label, .br-top, .lib-pillar-list small, .lib-pillar small, .tol-code, .tol-drop-code, .tol-acc-count){ font-size:.9rem !important; }
.tol-inst{ font-family:var(--tol-sans) !important; font-size:1rem !important; }
.tol-pillars, .tol-pillars *{ font-family:var(--tol-sans) !important; letter-spacing:0 !important; text-transform:none !important; }
.tol-pillars .tp-chip{ font-size:.95rem !important; }
.tol-pillars .tp-chip b{ font-weight:700 !important; }
.tol-pillars-label, .tol-pillars summary, .tol-pillars dd span{ font-size:.92rem !important; }
.tol-pillars dd span{ font-weight:700; }

/* the Professor's Library and quest map: small words dark enough to read */
.lib-pillar-list small, .lib-pillar small{ color:#4A4439 !important; }
.lp-quest-state{ color:#3F3A2E; }

/* the home page's opening line: bigger and easy to read over the moving sky */
html.tol-home .home-intro{ font-size:1rem !important; line-height:1.5; color:#2B2620 !important; }
html.tol-home .home-intro-wrap > .home-intro{ display:table; margin-left:auto; margin-right:auto; padding:.3rem .9rem !important; border-radius:14px; background:rgba(255,251,242,.88) !important; }
@media (max-width:560px){ html.tol-home .home-intro{ font-size:.95rem !important; } }

/* the cheering buddies' names: a quiet little label inside their bubble, never a heading */
.tol-cheer-name{ display:inline !important; font:italic 400 .9rem/1.3 "Lora", Georgia, serif !important; letter-spacing:0 !important; color:#6E5373 !important; margin:0 .35em 0 0 !important; }
.tol-cheer-name::after{ content:":"; }
.tol-cheer-name em{ display:none; }

/* the Breathe break: never sideways on a phone, and its buttons never over the words */
.tol-breathe{ overflow-x:hidden !important; }
.tol-breathe-aurora{ inset:0 !important; overflow:hidden; }
.br section{ max-width:100%; box-sizing:border-box; }
.br .tol-breathe-row{ position:relative; z-index:2; flex-wrap:wrap; justify-content:center; margin-top:.4rem; }
.br-run{ padding-bottom:.5rem; }
@media (max-height:760px){ .br section{ margin:0 0 auto; } }

/* wide formulas and code: they scroll inside their own box, never past the card */
main pre{ max-width:100%; overflow-x:auto; box-sizing:border-box; white-space:pre-wrap; overflow-wrap:anywhere; }
main pre code{ white-space:inherit; }
main pre.formula, main .formula pre{ white-space:pre-wrap; overflow-wrap:anywhere; }

/* dark mode: the header's and panels' own line icons follow the text color instead of being turned back */
html[data-theme="dark"]:not(.tol-nodark) :is(.tol-bar, .tol-panel, .tol-set, .tol-foot, .tol-listen) :is(button, a) svg{ filter:none !important; }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not(.tol-nodark) :is(.tol-bar, .tol-panel, .tol-set, .tol-foot, .tol-listen) :is(button, a) svg{ filter:none !important; }
}
.tol-bar button.tol-search-btn svg circle, .tol-bar button.tol-search-btn svg path{ stroke:currentColor; }

/* Today's Weather on a phone: the little cloud keeps its words, just above Breathe */
@media (max-width:560px), (max-height:600px){
  .tol-wx{ left:.6rem !important; right:.6rem; bottom:calc(3.9rem + env(safe-area-inset-bottom, 0px)) !important; max-width:none !important; flex-wrap:nowrap; }
  .tol-wx-go{ flex:1 1 auto; padding:.35rem .8rem .35rem .4rem !important; }
  .tol-wx-go > span{ display:flex !important; position:static !important; width:auto !important; height:auto !important; clip:auto !important; }
  .tol-wx-go small{ display:none !important; }
  .tol-wx-go strong{ font-size:.92rem !important; }
  .tol-wx-go svg{ width:2.2rem; height:1.8rem; }
  .tol-wx-never{ font-size:.85rem !important; padding:.25rem .6rem !important; white-space:normal !important; max-width:6.5rem; line-height:1.15 !important; }
}
html.tol-bigtext .tol-wx-go > span{ display:flex !important; position:static !important; width:auto !important; height:auto !important; clip:auto !important; }

/* search: a small "Tool" tag, and "Did you mean" */
.tol-find-kind{ display:inline-block; margin-left:.35rem; padding:.05rem .5rem; border-radius:999px; background:#EAF6EF; color:#2F5A3C !important; font:600 .8rem/1.5 var(--tol-sans) !important; vertical-align:.1em; }
.tol-find-dym{ font:inherit; font-weight:600; background:none; border:0; padding:0; min-height:32px; color:var(--focus); text-decoration:underline; cursor:pointer; }
.tol-find-dym:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.tol-chbar ol a{ font-family:var(--tol-sans) !important; font-size:.92rem !important; }

/* ---------- Listen: the page read aloud (listen.js) ---------- */
.tol-listen{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.2rem 0 1.1rem !important; padding:0 !important; background:none !important; box-shadow:none !important; border:0 !important; position:relative; z-index:2; }
.tol-listen button, .tol-listen-bar button, .tol-listen-mini{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.4rem 1rem; border-radius:999px; cursor:pointer;
  font:600 .95rem/1.2 var(--tol-sans); color:#2B2620; background:#FFFDF7; border:1.5px solid #B9A8D6; }
.tol-listen .tol-listen-go{ background:#2F5F8A; border-color:#2F5F8A; color:#fff; }
.tol-listen .tol-listen-go:hover{ background:#264E73; }
.tol-listen button:hover, .tol-listen-bar button:hover, .tol-listen-mini:hover{ border-color:#7A5FA8; }
.tol-listen button:focus-visible, .tol-listen-bar :focus-visible, .tol-listen-mini:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tol-listen-mini{ min-height:36px; padding:.25rem .75rem; font-size:.88rem; }
.tol-listen-mini[aria-pressed="true"]{ background:#EAF6EF; border-color:#3E6B4C; }
.tol-listen-bar{ position:fixed; z-index:930; left:50%; top:calc(var(--tol-bar-bottom, var(--tol-bar-h, 58px)) + 8px); transform:translateX(-50%); width:max-content; max-width:calc(100vw - 20px); box-sizing:border-box;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.4rem; padding:.45rem .55rem; border-radius:22px; background:rgba(255,251,242,.97); border:1px solid #D9C8F0; box-shadow:0 10px 28px rgba(60,40,90,.18); }
.tol-listen-bar[hidden]{ display:none; }
.tol-listen-bar button{ min-height:40px; padding:.3rem .85rem; }
.tol-listen-bar button[aria-pressed="true"]{ background:#EAF6EF; border-color:#3E6B4C; }
.tol-listen-bar button:disabled{ opacity:.5; cursor:default; }
.tol-listen-speed select{ min-height:40px; padding:.25rem .6rem; border-radius:999px; border:1.5px solid #B9A8D6; background:#fff; font:600 .95rem/1.2 var(--tol-sans); color:#2B2620; }
.tol-listen-status{ flex-basis:100%; margin:0; text-align:center; font:500 .9rem/1.35 var(--tol-sans); color:#4A4439; }
.tol-listen-status:empty{ display:none; }
::highlight(tol-listen){ background-color:#FCE38A; color:#1F1A14; }
.tol-listen-now{ outline:2px dashed rgba(47,95,138,.45); outline-offset:4px; border-radius:6px; }
html.tol-listen-picking main :is(p, li, h2, h3, blockquote, dd, td){ cursor:pointer; }
html.tol-listen-picking main :is(p, li, h2, h3, blockquote, dd, td):hover{ outline:2px solid rgba(47,95,138,.35); outline-offset:3px; border-radius:6px; }
@media (max-width:560px){ .tol-listen-bar{ top:calc(var(--tol-bar-bottom, var(--tol-bar-h, 58px)) + 4px); gap:.3rem; padding:.35rem .4rem; } .tol-listen-bar button{ padding:.25rem .65rem; font-size:.9rem; } }
@media print{ .tol-listen, .tol-listen-bar, .tol-listen-mini, .tol-listen-cardrow{ display:none !important; } }
/* "Listen" on a card: a small button under the card's heading */
.read .tol-listen-cardrow, .tol-listen-cardrow{ display:block; margin:.25rem 0 .55rem !important; padding:0 !important; max-width:none !important; width:auto !important;
  background:none !important; border:0 !important; box-shadow:none !important; line-height:1; }
.tol-listen-cardrow .tol-listen-mini{ min-height:40px; max-width:100%; white-space:normal; text-align:left; }
.tol-inshort .tol-listen-cardrow{ margin:.1rem 0 .4rem !important; }

/* ---------- "Pick up where you left off" and "How much time do you have?" (pick-up.js) ---------- */
.tol-pickup-host{ max-width:40rem; margin:0 auto; text-align:left; }
.tol-pickup, .tol-time{ position:relative; z-index:2; box-sizing:border-box; margin:.5rem 0 .8rem; padding:.8rem 1rem; border-radius:18px; background:rgba(255,253,247,.95); border:1.5px solid #E2D6BE;
  box-shadow:0 6px 18px rgba(90,70,120,.08); color:var(--ink); font-size:.97rem; line-height:1.5; text-align:left; }
.read .tol-pickup h2.tol-pu-h, .tol-pu-h{ margin:0 0 .4rem !important; padding:0 !important; background:none !important; box-shadow:none !important; font:600 1.05rem/1.3 "Fraunces", Georgia, serif !important; max-width:none !important; }
.tol-pickup ul, .tol-time ul{ list-style:none; margin:0 !important; padding:0 !important; }
.tol-pickup li, .tol-time li{ display:flex; gap:.5rem; align-items:baseline; margin:.25rem 0 !important; max-width:none !important; padding:0 !important; }
.tol-pickup small{ color:var(--ink-soft); font-size:.9rem; }
.tol-pu-ico{ flex:none; width:1.3rem; text-align:center; }
.read .tol-pickup p.tol-pu-foot, .tol-pu-foot{ margin:.5rem 0 0 !important; padding:0 !important; background:none !important; box-shadow:none !important; font-size:.9rem !important; color:var(--ink-soft); max-width:none !important; }
.tol-pu-foot button{ font:inherit; background:none; border:0; padding:0 .15rem; min-height:32px; color:var(--focus); text-decoration:underline; cursor:pointer; }
.tol-pu-foot button:disabled{ color:var(--ink-soft); text-decoration:none; }
.tol-pu-foot a{ margin-left:.2rem; }
.read .tol-time p.tol-time-q, .tol-time-q{ margin:0 0 .45rem !important; padding:0 !important; background:none !important; box-shadow:none !important; font:600 1rem/1.3 "Fraunces", Georgia, serif !important; max-width:none !important; }
.tol-time-opts{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tol-time-opts button{ min-height:44px; padding:.35rem 1rem; border-radius:999px; cursor:pointer; font:600 .95rem/1.2 "Lora", Georgia, serif; color:#2B2620; background:#FFFBF2; border:1.5px solid #D9C8F0; }
.tol-time-opts button[aria-pressed="true"]{ background:#2F5F8A; border-color:#2F5F8A; color:#fff; }
.tol-time-opts button:focus-visible, .tol-pickup :focus-visible, .tol-time :focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tol-time-list{ margin-top:.55rem !important; }
.tol-time-list li{ display:block !important; }
.tol-time-list li span{ color:var(--ink-soft); }
.tol-time-list a{ font-weight:600; }
.tol-panel .tol-pickup, .tol-panel .tol-time{ margin:.9rem 0 0; background:var(--paper); box-shadow:none; }
html.tol-home .tol-pickup-host{ margin-top:.2rem; }
@media print{ .tol-pickup, .tol-time{ display:none !important; } }
/* mini dives: a plain label, and Listen beside it */
.tol-dive-k, .tol-dive-step{ font-family:var(--tol-sans) !important; text-transform:none !important; letter-spacing:0 !important; font-size:.9rem !important; }
.tol-dive-k{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding-right:3rem; }
.tol-dive-listen{ text-transform:none; letter-spacing:0; }
.tol-heart::after{ content:none !important; } .tol-heart::before{ animation:none !important; clip-path:none !important; }
/* table cells never have a fixed height (stacked on a phone, a two-line cell would spill over the next row) */
.read :is(td, th){ height:auto !important; }
.tol-dive-gloss{ display:inline-flex; align-items:center; gap:.35rem; min-height:40px; padding:.35rem .95rem; border-radius:999px; background:#FFF8E8; border:1px solid #E6CD92; color:#5A4214 !important; font:600 .88rem "Lora", Georgia, serif; text-decoration:none !important; }

/* ---------- "In short" and "Show me only the steps" (in-short.js) ---------- */
.tol-inshort{ position:relative; z-index:2; margin:0 0 1.2rem !important; padding:.85rem 1.1rem !important; border-radius:18px; background:#FFF8E8 !important; border:1.5px solid #E6CD92; box-shadow:none !important; }
.read .tol-inshort p.tol-inshort-h, .tol-inshort-h{ margin:0 0 .35rem !important; padding:0 !important; background:none !important; box-shadow:none !important; font:600 1.05rem/1.3 "Fraunces", Georgia, serif !important; max-width:none !important; }
.tol-inshort ul{ margin:0 !important; padding-left:1.25rem !important; background:none !important; box-shadow:none !important; }
.tol-inshort li{ margin:.25rem 0 !important; max-width:62ch; line-height:1.5; }
.tol-steps-toggle{ margin:0 0 1.2rem !important; padding:0 !important; background:none !important; box-shadow:none !important; border:0 !important; }
.tol-steps-toggle button{ min-height:44px; padding:.4rem 1.1rem; border-radius:999px; cursor:pointer; font:600 .95rem/1.2 var(--tol-sans); color:#2B2620; background:#FFFDF7; border:1.5px solid #B9A8D6; }
.tol-steps-toggle button[aria-pressed="true"]{ background:#EAF6EF; border-color:#3E6B4C; }
.tol-steps-toggle button:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tol-steps-note{ font-size:.92rem; color:var(--ink-soft); }
html.tol-only-steps main :is(p, ul, blockquote, figure, .tol-table-scroll, table, dl, details, aside, .scene, .tol-pud-card, .tol-cheer, .lp-card, pre):not(ol *, [data-keep-steps], [data-keep-steps] *, .try-this, .try-this *, .read-head, .read-head *, .tol-steps-toggle, .tol-inshort, .tol-inshort *, [data-in-short], [data-in-short] *, [class*="-short"], [class*="-short"] *, [class*="-say"], [class*="-say"] *, p.q, .tol-try, .tol-try *, .cs-tags, .cs-tags *, .cs-dl, .cs-dl *, :is(h2, h3, h4) + ul, :is(h2, h3, h4) + ul *, :is(h2, h3, h4) + p + ul, :is(h2, h3, h4) + p + ul *, .tol-listen, .tol-listen *, [class*="tol-listen"], [class*="tol-listen"] *, .tol-depth, .tol-depth *){ display:none !important; }
@media print{ .tol-steps-toggle{ display:none !important; } }
/* the book's chapter strip runs straight through all three parts: a little gap before Part Three */
.tol-chbar li.is-p3-start{ margin-left:.6rem; }
/* work mode (?work=1): no music player on chapters */
html.tol-work [data-mini-player]{ display:none !important; }
/* steps only: the "Words you could use" lines, "In short", support lists and each card's key line stay (above);
   the extras around the reading step aside */
html.tol-only-steps main :is(.tol-read-host, .tol-read-wrap, .tol-tip, .tol-fp-note, .tol-offer){ display:none !important; }

/* ---------- Big text on a phone: the title uses the card's full width ---------- */
@media (max-width:700px){
  html:is(.tol-text-lg, .tol-text-xl, .tol-text-xxl) .read-head h1{ padding-right:0 !important; overflow-wrap:break-word; }
  html:is(.tol-text-lg, .tol-text-xl, .tol-text-xxl) .read-head::after{ content:none !important; display:none !important; }
}

/* ---------- Easy reading: no italics and no small typewriter labels, anywhere ---------- */
/* (Text size zooms the whole page, so these grow with it too.) */
html.tol-easy body *:not(svg):not(svg *), html.tol-easy body *::before, html.tol-easy body *::after{ font-style:normal !important; }
html.tol-easy :is(em, i, cite, dfn, var){ font-weight:600; }
html.tol-font-easy main :is(td, th, li, dd, dt, p, span, a)::before{ font-family:var(--tol-sans) !important; }
html.tol-easy main :is(td, th)[data-h]::before{ font-size:.92rem !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--ink) !important; }
html.tol-easy :is(.read-code, .dig, .depth-bar, .depth-bar > span, .scene-when, figcaption, caption, main small, main th, .tol-cheer-name, .lp-kicker, .tol-tip-k, .tol-read-k, .tol-read-src,
  .tol-depth p, .tol-depth small, .tol-depth-name small, .tol-pager-dir, .tol-chbar-k, .tol-foot, .tol-foot a, .tol-foot button, .tol-promise, .fb-line, .fb-who, .tpv-bub, .tol-cheer p){
  font-size:max(.92rem, 1em) !important; letter-spacing:0 !important; text-transform:none !important; }
html.tol-easy .dig{ font-size:.95rem !important; }
html.tol-easy :is(.read-code, .scene-when, .depth-bar){ font-size:.95rem !important; }
/* the tint no longer makes cards look greyed out, and the reading ruler stands out on it */
html.tol-easy.tol-tint-cream body::after{ background:rgba(250,226,178,.22); }
html:is(.tol-tint-cream, .tol-tint-blue, .tol-tint-mint) .tol-ruler{ border-top:3px solid rgba(47,95,138,.8); border-bottom:3px solid rgba(47,95,138,.8); background:rgba(255,255,255,.25); box-shadow:0 0 0 100vmax rgba(40,34,26,.2); }

/* ---------- Tender reading pages (growing up, knowing yourself): nothing pops up, nothing keeps score ---------- */
html.tol-sensitive :is(.lp-trail, .lp-petals, .tol-join-pop, .tol-wx, .pci, .tpv, .tol-cheer, .tol-pud-card, .tr-chip, [data-rewards-chip]){ display:none !important; }

/* ---------- The Breathe button keeps clear of forms (site.js: keepBreatheClear) ---------- */
.tol-breathe-btn{ transition:opacity .2s ease; }
.tol-breathe-btn[style*="--tol-br-lift"], body .tol-breathe-btn[style*="--tol-br-lift"]{ bottom:calc(var(--tol-br-lift) + env(safe-area-inset-bottom, 0px)) !important; }
html body .tol-breathe-btn.is-compact{ padding:.55rem !important; gap:0 !important; }
html body .tol-breathe-btn.is-compact > span{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }
.tol-breathe-btn.is-compact svg{ width:1.35rem !important; height:1.35rem !important; }
.tol-breathe-btn.is-left{ right:auto !important; left:max(1rem, env(safe-area-inset-left)) !important; }
body .tol-breathe-btn.is-high.is-high{ bottom:auto !important; top:calc(var(--tol-bar-bottom, var(--tol-bar-h, 58px)) + .6rem) !important; }
.tol-breathe-btn.is-away{ opacity:0 !important; pointer-events:none !important; visibility:hidden; }
html.tol-still .tol-breathe-btn{ transition:none; }
.tol-breathe-btn.is-hiding{ opacity:0 !important; pointer-events:none !important; }
.tol-breathe-btn.is-hiding:focus-visible{ opacity:1 !important; pointer-events:auto !important; }

/* ---------- Professor Puddles on every page: the round button ---------- */
.tol-pud-fab{
  position:fixed; left:max(1rem, env(safe-area-inset-left)); bottom:max(1rem, env(safe-area-inset-bottom)); z-index:879;
  display:inline-flex; align-items:center; gap:.45rem; padding:.3rem .9rem .3rem .3rem; min-height:48px;
  font:500 .92rem/1 "Lora", Georgia, serif; color:#24425E; background:rgba(226,240,252,.96);
  border:1px solid #A9CBE8; border-radius:999px; box-shadow:0 6px 20px rgba(36,66,94,.16); cursor:pointer;
}
.tol-pud-fab:hover{ background:#D5E9FA; }
.tol-pud-fab:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.tol-pud-fab-art{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#fff; flex:none; }
.tol-pud-fab-art svg{ width:34px; height:34px; }
@media (max-width:560px){
  .tol-pud-fab{ padding:.3rem; gap:0; }
  .tol-pud-fab-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
body.has-pud-fab .tol-wx{ bottom:calc(4.6rem + env(safe-area-inset-bottom, 0px)) !important; }
html.tol-no-helpers .tol-pud-fab{ display:none !important; }
@media print{ .tol-pud-fab{ display:none !important; } }
/* the time and weather note never sits under Professor Puddles: on wider screens it rides just above him */
body.has-pud-fab:not(.is-home-pud) .tol-cw{ bottom:calc(max(1rem, env(safe-area-inset-bottom)) + 58px) !important; }
body.has-pud-fab:not(.is-home-pud) .tol-cw-card{ bottom:calc(max(1rem, env(safe-area-inset-bottom)) + 94px) !important; }
/* while a Frequency Buddies episode plays (and in its full screen), the floating helpers step aside so nothing covers
   the player; the time and weather note moves into the picture's bottom-left corner instead (clock-weather.js) */
body.tol-video-playing .tol-pud-fab, body.tol-video-full .tol-pud-fab,
body.tol-video-playing .tol-breathe-btn, body.tol-video-full .tol-breathe-btn{ display:none !important; }
body .tol-cw.is-docked{ bottom:.55rem !important; }
body .tol-cw.is-docked.is-fs{ bottom:max(12px, env(safe-area-inset-bottom)) !important; }
body .tol-cw.is-docked.is-scrolling{ opacity:.92 !important; pointer-events:auto; }
/* while scrolling on a touch screen, the note fades out of the way, and comes back when the page rests */
.tol-cw.is-scrolling{ opacity:0 !important; pointer-events:none; }
/* game mode (set by a game while it runs): nothing floats over the controls */
body.tol-gaming .tol-pud-fab, body.tol-gaming .tol-cw, body.tol-gaming .tol-cw-card, body.tol-gaming .tol-breathe-btn,
body.tol-gaming .tol-wx, body.tol-gaming .tol-toast, body.tol-gaming .tol-keys-tip{ display:none !important; }
/* on a phone, Professor Puddles and Breathe tuck against the screen edges as slim tabs, in the margin beside the
   text, so neither one covers what someone is reading */
@media (max-width:560px){
  html body .tol-pud-fab{ left:0 !important; padding:0 !important; width:36px; height:48px; min-height:0; justify-content:flex-end;
    border-radius:0 24px 24px 0; border-left:0; padding-right:3px !important; bottom:calc(5.2rem + env(safe-area-inset-bottom, 0px)); }
  html body .tol-pud-fab-art{ width:30px; height:30px; }
  html body .tol-pud-fab.is-named{ left:.5rem !important; width:auto; padding:.2rem .85rem .2rem .2rem !important; gap:.4rem; border-radius:999px; border-left:1px solid #A9CBE8; justify-content:flex-start; }
  html body .tol-pud-fab.is-named .tol-pud-fab-t{ position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:nowrap; }
  html body .tol-pud-fab-art svg{ width:26px; height:26px; }
  html body .tol-breathe-btn.is-compact:not(.is-high){ right:0 !important; left:auto !important; width:36px; height:48px; padding:0 0 0 4px !important;
    border-radius:24px 0 0 24px; border-right:0; justify-content:flex-start; }
  html body .tol-breathe-btn.is-compact.is-left:not(.is-high){ left:0 !important; right:auto !important; border-radius:0 24px 24px 0; padding:0 4px 0 0 !important; justify-content:flex-end; }
  body.has-pud-fab .tol-wx{ bottom:calc(1rem + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-pud-fab:not(.is-home-pud) .tol-cw{ bottom:max(6px, env(safe-area-inset-bottom)) !important; }
  body.has-pud-fab:not(.is-home-pud) .tol-cw-card{ bottom:calc(max(6px, env(safe-area-inset-bottom)) + 2.1rem) !important; }
  /* the home page's centred Puddles pill steps right of the time note, so the two sit side by side on the bottom edge */
  /* (the home page uses the same corner as every page) */
}
/* Professor Puddles never sits on words (site.js keepFabClear): over text he first shows just his face (is-face),
   then tucks into the screen edge as a small tab (is-peek); hover, a tap or keyboard focus brings him out */
.tol-pud-fab.is-wait{ opacity:0 !important; pointer-events:none !important; }
.tol-pud-fab{ transition:opacity .25s ease, transform .3s ease; }
html body .tol-pud-fab.is-face{ padding:.3rem !important; gap:0 !important; }
html body .tol-pud-fab.is-face .tol-pud-fab-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
html body .tol-pud-fab.is-peek{ left:0 !important; padding:.3rem 4px .3rem .3rem !important; gap:0 !important; border-left:0; border-radius:0 24px 24px 0;
  transform:translateX(calc(-100% + 13px)); box-shadow:0 2px 8px rgba(36,66,94,.18); background:#BFDDF5; }
html body .tol-pud-fab.is-peek .tol-pud-fab-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
html body .tol-pud-fab.is-peek:is(:hover, :focus-visible){ transform:none; }
@media (prefers-reduced-motion: reduce){ .tol-pud-fab{ transition:opacity .15s linear; } }
html.tol-still .tol-pud-fab{ transition:none; }
/* the Breathe tab on a phone does the same at the right edge */
html body .tol-breathe-btn.is-peek{ right:0 !important; left:auto !important; border-radius:24px 0 0 24px; transform:translateX(calc(100% - 13px)) !important; }
html body .tol-breathe-btn.is-peek.is-left{ left:0 !important; right:auto !important; border-radius:0 24px 24px 0; transform:translateX(calc(-100% + 13px)) !important; }
html body .tol-breathe-btn.is-peek:is(:hover, :focus-visible){ transform:none !important; }
/* the two choices in every mini dive: wade in deeper, or chat it out with Professor Puddles */
.tol-dive-wade{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.tol-dive-ask{ flex-basis:100%; font-size:.86rem; color:#4E6377; }
.tol-dive-chat{ display:inline-flex; align-items:center; gap:.35rem; min-height:44px; padding:.55rem 1rem; border-radius:999px; font-weight:600; font-size:.95rem;
  text-decoration:none; color:#fff !important; background:#2F5F8A; border:1px solid #2F5F8A; }
.tol-dive-chat:hover{ background:#24496B; }
.tol-dive-chat:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
/* "easier on a laptop": only where it really matters, and only shown on the smaller screens it's written for */
.tol-device-note{ display:none; gap:.5rem; align-items:flex-start; font-size:.9rem; line-height:1.45; color:#3C4A5A; background:#F1F5F9; border:1px solid #D5DEE8; border-radius:12px; padding:.55rem .8rem; margin:.6rem 0 1rem; }
@media (max-width:900px){ .tol-device-note{ display:flex; } }

/* ==========================================================================
   Text bubbles (html.tol-bubbles) — every piece of reading text sits in its own
   small speech bubble: a soft tinted fill, round corners and one squared-off "tail"
   corner. site.js adds html.tol-bubbles on ordinary pages (not the games, the Night
   Garden, Drift, the pal cam TV, the garden backdrop, 404 or offline), and Settings →
   "Text bubbles" adds html.tol-nobubbles to switch it all off on this device.
   - Low specificity on purpose (:where): a page's own styling for a card, chip, option
     or table always wins, and the older .bb bubbles (which use !important) stay as they are.
   - No border and no drop shadow, so a bubble inside a card is just a soft patch of
     tint, never a frame inside a frame.
   - Chrome, controls, chat windows, games, players and overlays never get one.
   Put class="no-bubble" on an element (or class="tol-plain" on a whole block) that should stay plain.
   ========================================================================== */
:root{
  /* near-opaque, so words stay easy to read over the moving garden too */
  --tb-fill:rgba(247,241,226,.94);                 /* --paper-deep softened toward white */
  --tb-fill:color-mix(in srgb, color-mix(in srgb, var(--paper-deep) 48%, #FFFDF8) 94%, transparent);
  --tb-ring:rgba(217,203,163,.55);
  --tb-ring:color-mix(in srgb, var(--line) 55%, transparent);
  --tb-head:rgba(246,238,222,.95);                 /* a whisper of --brass */
  --tb-head:color-mix(in srgb, color-mix(in srgb, var(--brass) 11%, #FFFDF8) 95%, transparent);
  --tb-head-ring:color-mix(in srgb, var(--brass) 22%, transparent);
  --tb-cell:color-mix(in srgb, color-mix(in srgb, var(--paper-deep) 30%, #FFFDF8) 92%, transparent);
  --tb-r:18px; --tb-tail:6px;
}
html.tol-tint-blue{ --tb-fill:color-mix(in srgb, #E3EDF7 94%, transparent); --tb-ring:color-mix(in srgb, #9FBCD8 45%, transparent); }
html.tol-tint-mint{ --tb-fill:color-mix(in srgb, #E3F2E8 94%, transparent); --tb-ring:color-mix(in srgb, #98C8AA 40%, transparent); }

/* the bubble itself */
:where(html.tol-bubbles:not(.tol-nobubbles) main) :is(p, dt, dd, figcaption, caption, legend, address, blockquote, h1, h2, h3, h4, h5, h6, td, th,
  li:not(:has(> :is(p, div, h2, h3, h4, h5, h6, blockquote, table, figure, details, dl, section, article, form, fieldset, label, input, select, textarea, button, canvas, svg, img)), :has(button, input, select, textarea, [role="button"], a[class]), :has(> a:only-child))):where(:not(:is(nav, header.tol-bar, footer, .tol-foot, .tol-plain, .pt-bar, .pt-card, .pt-resume, .ten-trail, .tol-chbar, .tol-fbs-wrap, .tol-listen, .tol-pickup, .tol-steps-toggle, .tol-time, .wl-app, figure.fc, .tolc, .tol-breathe, .tol-breathe-btn, .pc-ov, .pc-launch, .fb-player, .fb-season, [class*="player"], [class*="-stage"], .pc-cam, [data-no-bubble], .tr-card, .tr-toast,
    .gm-board, .qw-board, .xw, .tol-cheer, .tol-pud-card, .tol-puddles-hi, .tol-tip, .tol-wx, .tpv, .pci, .tol-join-pop, .tol-invite, .tol-offer, .tol-depth,
    .tol-pager, .tol-pillars, .tol-set, .tol-panel, .read-head, .depth-bar, button, a, summary, svg, canvas, video, [contenteditable], [role="toolbar"], [role="tablist"], [role="menu"],
    blockquote, td, th, dt, dd, figcaption, caption, legend, label, p, h1, h2, h3, h4, h5, h6) *):not(.no-bubble, .sr-only, .visually-hidden, .tol-cheer, .read-head, .depth-bar, [hidden], :empty,
    p:has(> :is(button, input, select, textarea, a.btn, a[class*="btn"], a[class*="button"], a[class*="cta"], a[class$="-go"], a[class*="-go "])))){
  box-sizing:border-box; max-width:100%;
  padding:.55em .85em;
  background-color:var(--tb-fill);
  border-radius:var(--tb-r) var(--tb-r) var(--tb-r) var(--tb-tail);
  box-shadow:inset 0 0 0 1px var(--tb-ring);
  overflow-wrap:break-word;
}
/* a short line makes a small bubble, a long one grows to the full width */
:where(html.tol-bubbles:not(.tol-nobubbles) main) :is(p, dt, dd, figcaption, address, li){ width:fit-content; }
/* text that is centred keeps its bubble centred (site.js marks it .tol-bub-mid) */
html.tol-bubbles:not(.tol-nobubbles) body main .tol-bub-mid.tol-bub-mid{ margin-left:auto !important; margin-right:auto !important; }
/* the page's own big bubbles ("Every word in a bubble" above) stop melting into one card:
   each paragraph, list or heading straight on the page becomes its own speech bubble, with the tail corner */
html.tol-bubbles:not(.tol-nobubbles) main :is(p, ul, ol, dl, details, figure, address, pre, h1, h2, h3, h4, h5){
  --bb-tl:var(--bb-r) !important; --bb-tr:var(--bb-r) !important; --bb-br:var(--bb-r) !important; --bb-bl:var(--tb-tail) !important;
  --bb-bt:1.5px !important; --bb-bbw:1.5px !important; --bb-w:fit-content !important;
}
html.tol-bubbles:not(.tol-nobubbles) main :is(p, ul, ol, dl, details, figure, address, pre){
  --bb-mt:0px !important; --bb-mb:calc(var(--bb-gap) * .6) !important; --bb-pt:var(--bb-py) !important; --bb-pb:var(--bb-py) !important;
}
html.tol-bubbles:not(.tol-nobubbles) main :is(h1, h2, h3, h4, h5){
  --bb-pt:.5rem !important; --bb-pb:.55rem !important; --bb-pl:1.15rem !important; --bb-pr:1.15rem !important; --bb-r:1.35rem !important; --bb-mb:calc(var(--bb-gap) * .55) !important;
}
/* headings: a lighter, warmer bubble, as wide as the words */
:where(html.tol-bubbles:not(.tol-nobubbles) main) :is(h1, h2, h3, h4, h5, h6):where(:not(:is(nav, header.tol-bar, footer, .tol-foot, .tol-plain, .pt-bar, .pt-card, .pt-resume, .ten-trail, .tol-chbar, .tol-fbs-wrap, .tol-listen, .tol-pickup, .tol-steps-toggle, .tol-time, .wl-app, figure.fc, .tolc, .tol-breathe, .pc-ov, .fb-player, .fb-season, [class*="player"], [class*="-stage"], .pc-cam, [data-no-bubble], .tr-card,
    .gm-board, .qw-board, .xw, .tol-cheer, .tol-pud-card, .tol-puddles-hi, .tol-tip, .tol-wx, .tpv, .pci, .tol-join-pop, .tol-invite, .tol-offer, .tol-depth,
    .tol-pager, .tol-pillars, .tol-set, .tol-panel, .read-head, button, a, summary, svg, [contenteditable], blockquote, td, th, label, p) *):not(.no-bubble, .sr-only, .visually-hidden, [hidden], :empty)){
  width:fit-content;
  padding:.35em .8em .4em;
  background-color:var(--tb-head);
  box-shadow:inset 0 0 0 1px var(--tb-head-ring);
}
/* list items: a little air between the bubbles */
:where(html.tol-bubbles:not(.tol-nobubbles) main) li:where(:not(nav *, .tol-plain *, .wl-app *, figure.fc *, .tolc *, .tol-cheer *, .tol-pillars *, .tol-pager *, .gm-board *, .qw-board *, .xw *, a *, button *)):where(:not(:has(> :is(p, div, h2, h3, h4, h5, h6, blockquote, table, figure, details, dl, section, article, form, fieldset, label, input, select, textarea, button, canvas, svg, img)))) + li{
  margin-top:.3em;
}
/* a paragraph inside a list item already sits in the item's place, so it keeps its own small gap */
:where(html.tol-bubbles:not(.tol-nobubbles) main) :is(blockquote, li, dd) > p:where(:not(:last-child)){ margin-bottom:.4em; }
/* form labels and hint text: small, snug bubbles */
:where(html.tol-bubbles:not(.tol-nobubbles) main) :is(label, legend):where(:not(:is(nav, .tol-plain, .pt-bar, .pt-card, .pt-resume, .ten-trail, .tol-chbar, .tol-fbs-wrap, .tol-listen, .tol-pickup, .tol-steps-toggle, .tol-time, .wl-app, figure.fc, [class*="player"], .tolc, .tol-set, .tol-panel, .gm-board, .qw-board, .xw, .tol-depth, .tol-cheer, button, a, td, th, [role="radiogroup"], [role="group"]) *):not(.no-bubble, .sr-only, .visually-hidden, :has(input[type="radio"], input[type="checkbox"]))){
  max-width:100%; box-sizing:border-box;
  padding:.25em .7em; border-radius:14px 14px 14px 5px;
  background-color:var(--tb-fill); box-shadow:inset 0 0 0 1px var(--tb-ring);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
:where(html.tol-bubbles:not(.tol-nobubbles) main) :is(label, legend):where(:not(:has(input, select, textarea, button))){ width:fit-content; }
/* table cells become separate little bubbles; the table still scrolls sideways on a phone */
html.tol-bubbles:not(.tol-nobubbles) main table:where(:not(.no-bubble, .tol-plain *, .wl-app *, [class*="player"] *, .gm-board *, .qw-board *, .xw *, .tolc *, [role="grid"])){
  border-collapse:separate !important; border-spacing:3px !important;
}
:where(html.tol-bubbles:not(.tol-nobubbles) main) :is(td, th):where(:not(table.no-bubble *, .tol-plain *, .wl-app *, [class*="player"] *, .gm-board *, .qw-board *, .xw *, .tolc *, [role="grid"] *)){
  background-color:var(--tb-cell); border-radius:12px 12px 12px 4px;
}
:where(html.tol-bubbles:not(.tol-nobubbles) main) th:where(:not(table.no-bubble *, .tol-plain *, .wl-app *, [class*="player"] *, .gm-board *, .qw-board *, .xw *, .tolc *, [role="grid"] *)){ background-color:var(--tb-head); }
/* print: clean paper, no tints */
@media print{
  html.tol-bubbles main :is(p, li, dt, dd, figcaption, caption, legend, address, blockquote, h1, h2, h3, h4, h5, h6, td, th, label){
    background-color:transparent !important; box-shadow:none !important;
  }
  html.tol-bubbles main table{ border-spacing:0 !important; }
}
/* forced colors (Windows high contrast): the system draws its own colors, so drop the tints */
@media (forced-colors: active){
  html.tol-bubbles main :is(p, li, dt, dd, figcaption, caption, legend, address, blockquote, h1, h2, h3, h4, h5, h6, td, th, label){ background-color:transparent; box-shadow:none; }
}
/* ========================= end Text bubbles ========================= */

/* ---------- Grouped menu: small headings inside a group, and long drop-downs that scroll ---------- */
.tol-index li.tol-sub, .tol-drop li.tol-sub{
  margin:.9rem 0 .2rem; padding:.55rem .55rem 0; border-top:1px solid var(--line);
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.76rem; letter-spacing:.04em; color:var(--brass-ink, #7A5620);
}
.tol-drop li.tol-sub{ margin:.45rem 0 .1rem; padding:.45rem .5rem .1rem; }
.tol-drop{ max-height:calc(100vh - var(--tol-bar-h, 58px) - 1.5rem); overflow-y:auto; overscroll-behavior:contain; }
/* The polymath way: the last row of every menu group, set apart */
.tol-drop li.tol-foot-row, .tol-index li.tol-foot-row{ margin-top:.4rem; padding-top:.4rem; border-top:1px solid var(--line, #d9cdb4); }
.tol-foot-polymath{ margin:0 0 .75rem; font-size:.92rem; text-align:center; }
.tol-foot-polymath a{ font-weight:600; white-space:nowrap; }

/* ========================= Share (site.js TOLShare) =========================
   The quiet "Share this page" button near the end of a page, small Share buttons beside a
   tool's own Copy, and the share sheet shown where the device has no share menu of its own.
   Plain on purpose: no text bubbles (tol-plain / no-bubble), 44px targets, and it follows the
   site's dark look (the page-wide invert) because it uses only text and plain colors. */
.tol-share-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:2rem 0 1rem; padding-top:1rem; border-top:1px solid var(--line); max-width:40rem; }
.tol-share-row.is-inline{ margin:.75rem 0; padding-top:0; border-top:0; }
.tol-share-row .tol-share-btn, .tol-share-btn.is-small{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.4rem 1.05rem; box-sizing:border-box;
  font:600 .95rem/1.2 var(--tol-sans, system-ui, sans-serif); color:#3C3354; background:#FFFDF7;
  border:1.5px solid #B9A8D6; border-radius:999px; cursor:pointer; }
.tol-share-btn.is-small{ min-height:44px; padding:.3rem .8rem; font-size:.88rem; vertical-align:middle; }
.tol-share-row .tol-share-btn:hover, .tol-share-btn.is-small:hover{ background:#F3EEF9; }
.tol-share-btn:focus-visible, .tol-share-act:focus-visible, .tol-share-close:focus-visible{ outline:3px solid var(--focus, #2B5B8C); outline-offset:2px; }
.tol-share-ic{ display:inline-block; width:1em; text-align:center; }
.tol-share-ic::before{ content:"\2197"; }
.tol-sharesheet{ position:fixed; inset:0; z-index:990; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box;
  background:rgba(33,29,23,.4); color:var(--ink, #2B2620); font-family:var(--tol-sans, system-ui, sans-serif); }
.tol-sharesheet[hidden]{ display:none; }
.tol-share-card{ box-sizing:border-box; width:min(26rem, 100%); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain;
  background:#FFFDF7; border:1.5px solid #B9A8D6; border-radius:20px; padding:1rem 1.1rem 1.1rem; box-shadow:0 18px 50px rgba(33,29,23,.25);
  animation:tol-share-in .22s var(--ease-out, ease-out); }
@keyframes tol-share-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.tol-share-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.tol-share-head h2{ margin:0; font:600 1.3rem/1.2 "Fraunces", Georgia, serif; }
.tol-share-close{ min-height:44px; min-width:44px; padding:.35rem .9rem; font:inherit; font-size:.95rem; color:var(--ink, #2B2620); background:none; border:1px solid #8C826E; border-radius:999px; cursor:pointer; }
.tol-share-close:hover{ background:var(--paper-deep, #ECE2C4); }
.tol-sharesheet p{ max-width:none; }
.tol-share-what{ margin:.5rem 0 .2rem; color:var(--ink-soft, #5A5346); font-size:.95rem; line-height:1.4; overflow-wrap:anywhere; }
.tol-share-preview{ margin:.5rem 0 0; padding:.6rem .75rem; max-height:9rem; overflow-y:auto; white-space:pre-wrap; overflow-wrap:anywhere;
  font-size:.9rem; line-height:1.45; background:#F7F1E2; border:1px solid var(--line, #D9CBA3); border-radius:12px; }
.tol-share-acts{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:.9rem 0 .3rem; }
.tol-share-act{ display:flex; align-items:center; justify-content:center; min-height:44px; padding:.4rem .6rem; box-sizing:border-box; text-align:center;
  font:600 .95rem/1.2 var(--tol-sans, system-ui, sans-serif); color:#3C3354 !important; text-decoration:none !important; background:#fff;
  border:1.5px solid #D9C8F0; border-radius:14px; cursor:pointer; }
.tol-share-act[hidden]{ display:none; }
.tol-share-act:hover{ background:#F3EEF9; }
.tol-share-act[data-act="copy"]{ grid-column:1 / -1; background:#EFE8FA; border-color:#B9A8D6; }
.tol-share-status{ min-height:1.2em; margin:.2rem 0; font-size:.9rem; color:#2F5A3C; }
.tol-share-note{ margin:.3rem 0 0; font-size:.85rem; line-height:1.4; color:var(--ink-soft, #5A5346); }
@media (max-width:480px){
  .tol-sharesheet{ align-items:flex-end; padding:0; }
  .tol-share-card{ width:100%; border-radius:20px 20px 0 0; max-height:92vh; max-height:92dvh; padding-bottom:calc(1.1rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce){ .tol-share-card{ animation:none; } }
html.tol-still .tol-share-card{ animation:none; }
@media print{ .tol-share-row, .tol-sharesheet, .tol-share-btn{ display:none !important; } }
/* ========================= end Share ========================= */

/* games and tools on phones and tablets: finger-sized buttons, tidy sideways phones */
@media (pointer:coarse){
  .tp-chip, .tr-chip, .ng-help-btn, .bd-skip, .tol-skip, .tol-bar button, .tol-bar a.tol-bar-btn { min-height:44px; }
  .tr-chip, .tp-chip { padding-top:.5rem; padding-bottom:.5rem; }
  summary { min-height:44px; display:flex; align-items:center; }
  input[type="checkbox"], input[type="radio"] { width:24px; height:24px; }
  button, [role="button"] { touch-action:manipulation; }
  canvas { touch-action:manipulation; }
}
@media (pointer:coarse) and (max-height:520px){
  /* a phone turned sideways has very little height: the header scrolls away, Puddles shrinks to his face, and the time note moves aside */
  .tol-bar { position:static !important; }
  html body .tol-pud-fab { min-height:44px !important; padding:.25rem !important; gap:0 !important; }
  html body .tol-pud-fab .tol-pud-fab-t { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; padding:0 !important; }
  .tol-cw { left:auto !important; right:max(8px,env(safe-area-inset-right)); }
  .tol-cw-card { left:auto !important; right:max(8px,env(safe-area-inset-right)); }
}

/* printing: only the page's own words. Tips, invitations, promos, helpers and anything floating stay off paper. */
@media print{
  .tol-keys-hint, .tol-toast, .tol-offer, .tol-msg, .tol-pillars, .tol-panel, .tol-scrim, .tol-cw, .tol-cw-card, .tol-pud-end,
  .appad, .bkb, .tpv, .tsc-svg, .lp-spark, .tol-read-host, .tol-skip, iframe{ display:none !important; }
}

/* "Come back gently": the weekly calendar reminder (remind.js) */
.tol-remind{ position:relative; z-index:2; box-sizing:border-box; margin:1.4rem 0; padding:1rem 1.1rem; border-radius:18px; background:rgba(255,253,247,.95); border:1.5px solid #D9C8F0; }
.read .tol-remind .tol-rm-h{ margin:0 0 .3rem; font-size:1.2rem; }
.tol-remind .tol-rm-p{ margin:0 0 .6rem !important; max-width:60ch; }
.tol-rm-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; margin:.4rem 0; }
.tol-rm-row label{ font-weight:600; font-size:.95rem; }
.tol-rm-row select{ min-height:44px; padding:.3rem .6rem; border-radius:10px; border:1.5px solid #D9C8F0; background:#FFFDF7; color:#2B2620; font:inherit; }
.tol-rm-b{ display:inline-flex; align-items:center; min-height:44px; padding:.4rem 1.1rem; border-radius:999px; border:1.5px solid #3C3350; background:#3C3350; color:#fff !important; font:600 .95rem/1.2 "Lora", Georgia, serif; cursor:pointer; text-decoration:none; }
.tol-rm-b.is-soft{ background:#FFFDF7; color:#2B2620 !important; border-color:#B9A8D6; }
.tol-rm-b:focus-visible, .tol-rm-row select:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tol-rm-msg{ min-height:1.3rem; margin:.3rem 0 0 !important; font-weight:600; color:#2F5A3C; }
@media print{ .tol-remind{ display:none !important; } }
.read .tol-remind p, .read .tol-remind label{ background:none !important; box-shadow:none !important; border:0 !important; padding:0 !important; border-radius:0 !important; }

/* the book by topic (book/topic-*.html): the On your own / With others switch and the tools list */
.bt-switch{ position:sticky; top:4.6rem; z-index:20; display:inline-flex; gap:.25rem; padding:.25rem; margin:.4rem 0 1.2rem; border-radius:999px; background:rgba(255,253,247,.97); border:1.5px solid #D9C8F0; box-shadow:0 4px 14px rgba(40,30,60,.08); }
.bt-opt{ min-height:44px; padding:.35rem 1.1rem; border-radius:999px; border:0; background:transparent; color:#2B2620; font:600 .98rem/1.2 "Lora", Georgia, serif; cursor:pointer; }
.bt-opt[aria-pressed="true"]{ background:#3C3350; color:#fff; }
.bt-opt:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.bt-read{ font-size:.95rem; }
.bt-tools li.is-dim{ opacity:.55; }
.bt-tools .bt-for{ display:inline-block; margin-left:.35rem; font-size:.8rem; color:var(--ink-soft); }
@media print{ .bt-switch{ display:none !important; } .bt-v[hidden]{ display:block !important; } }

/* Work mode (?work=1, or a page marked data-work): the plain version to share at work.
   No pups, cartoons, garden, games promos, floating hearts or clock; Professor Puddles stays as plain words. */
html.tol-work :is(.tol-wash b, .tol-garden-bg, .tol-garden-veil, [data-palcam-row], .pc-launch-row, [data-app-ad], .pci, .tol-cheer, .tpv, .tpv-bub,
  .tol-puddles-hi, .tol-pud-fab-art, .tol-wx, .bkb, .tol-buddies, .lp-trail, .lp-petals, .tr-chip, [data-rewards-chip], .lp-spark, .lp-quest-state, .tol-join-pop, .tol-invite, [data-work-hide]){ display:none !important; }
.tol-work-note{ margin:.4rem auto .8rem; max-width:46rem; padding:.45rem .9rem; border:1px solid var(--rule, #d8cfb8); border-radius:10px;
  font-size:.92rem; background:var(--paper, #fffaf0); color:var(--ink, #2a2530); }
.tol-work-note a{ margin-left:.3rem; }
/* with the cartoon hidden, Professor Puddles' button still needs something to show: a plain question mark */
html.tol-work .tol-pud-fab::before{ content:"?"; font:700 1.15rem/1 system-ui, sans-serif; color:#2F4A6B; margin:auto; }
html.tol-work .tol-simple .read-head::after, html.tol-work .tol-deep .read-head::after{ display:none !important; }
html.tol-work .tol-wash i{ opacity:.35; }
/* plain mode also drops the tip of the day, reading and cartoon suggestions, promos, garden levels, and the Calm & play menu */
html.tol-work :is(.tol-tip, .tol-fp-note, .tol-read, .tol-fbs, .tol-pud-card, .tr-toast, .tr-card, #tol-sec-play, #tol-sec-media, [data-work-hide]){ display:none !important; }
html.tol-work .tol-nav-item:has(> button:is([data-sec="play"], [data-sec="media"])){ display:none !important; }
html.tol-work main .tol-work-note{ margin:0 0 1rem; }
/* the home "Pick up where you left off" card now sits inside the opening block */
html.tol-home .hh .tol-pickup-host{ margin:.8rem 0 1rem; }
/* (moved out of inline styles, so pages with a strict Content-Security-Policy show them too) */
.tol-foot-guides{ display:flex; flex-wrap:wrap; gap:.3rem 1rem; justify-content:center; margin:0 0 .75rem; font-size:.9rem; }
.tol-set-size-md{ font-size:1em; } .tol-set-size-lg{ font-size:1.15em; } .tol-set-size-xl{ font-size:1.35em; } .tol-set-size-xxl{ font-size:1.6em; }
/* while reading (scrolling down), the floating buttons step aside so they never cover the words;
   scrolling up, the top or end of the page, or keyboard focus brings them back */
:is(.tol-pud-fab, .tol-breathe-btn, .tol-top){ transition:opacity .25s ease, transform .25s ease; }
html.tol-reading :is(.tol-breathe-btn, .tol-top):not(:focus-visible):not(:focus-within){ opacity:0 !important; pointer-events:none !important; transform:translateY(14px); }
/* Professor Puddles stays in view while reading, so there is always someone to ask */
/* …but as just his round face, so the wide labelled pill never sits over the words being read */
@media (min-width:561px){ html.tol-reading .tol-pud-fab:not(:focus-visible){ padding:.3rem !important; gap:0 !important; } html.tol-reading .tol-pud-fab:not(:focus-visible) .tol-pud-fab-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } }

@media (prefers-reduced-motion: reduce){ html.tol-reading :is(.tol-pud-fab, .tol-breathe-btn, .tol-top){ transform:none !important; } :is(.tol-pud-fab, .tol-breathe-btn, .tol-top){ transition:opacity .15s linear; } }
/* "Show N more" at the end of a long menu list */
.tol-more-row{ list-style:none; }
.tol-more-btn{ font:inherit; font-size:.92rem; margin:.3rem 0 .2rem; padding:.45rem .9rem; min-height:40px; background:none; color:var(--focus, #2B5B8C); border:1px dashed var(--line, #d8cfb8); border-radius:999px; cursor:pointer; }
.tol-more-btn:hover{ background:var(--paper-deep, #f3ecd9); }
.tol-more-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.tol-drop li[hidden], .tol-index li[hidden]{ display:none !important; }

/* the menu's short lists and their full lists have no code column: names use the full width */
.tol-index .tol-picks .tol-row, .tol-panel .tol-picks .tol-row{ grid-template-columns:1fr auto !important; }
.tol-picks .tol-code:empty{ display:none; }
/* the first-visit offer sits above the floating Puddles button, so its buttons are never covered */
.tol-offer{ position:relative; z-index:885; }

/* ---------- Menu sub-menus (site.js buildTree): a few pages first, then small labelled lists that open on a tap ---------- */
.tol-tree, .tol-subm-list{ list-style:none; margin:0; padding:0; }
.tol-subm{ margin:0; }
.tol-subm-btn{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:.6rem; text-align:left; cursor:pointer;
  font:600 .97rem/1.3 "Lora", Georgia, serif; color:var(--ink); background:none; border:0; border-top:1px solid var(--line); border-radius:0; min-height:44px; }
.tol-bar .tol-drop .tol-subm-btn{ padding:.5rem .5rem; font-size:.97rem; border:0; border-top:1px solid var(--line); border-radius:0; }
.tol-bar .tol-drop .tol-subm-btn:hover{ background:var(--paper-deep); text-decoration:none; }
.tol-panel .tol-subm-btn{ padding:.7rem .4rem .7rem .55rem; font-size:1.02rem; }
.tol-panel .tol-subm-btn:hover{ background:var(--paper-deep); }
.tol-subm-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.tol-subm-btn::after{ content:""; flex:none; width:.42em; height:.42em; margin-right:.3rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.6; }
.tol-subm-btn[aria-expanded="true"]::after{ transform:rotate(225deg); }
.tol-subm-btn[aria-expanded="true"]{ background:var(--paper-deep); }
.tol-subm-n{ margin-left:auto; font:400 .74rem/1 "IBM Plex Mono", ui-monospace, monospace; color:var(--ink-soft); }
.tol-subm-list{ margin:.15rem 0 .45rem .45rem; padding-left:.5rem; border-left:2px solid var(--line); }
.tol-subm-list[hidden]{ display:none; }
.tol-subm-all a{ font-weight:600; color:var(--focus, #2B5B8C) !important; }
.tol-drop .tol-tree > li:first-child > .tol-subm-btn{ border-top:0; }
/* the At work page on its own keeps Calm & play in the menus (only work mode, when chosen, hides it) */
html.tol-work-page .tol-nav-item:has(> button:is([data-sec="play"], [data-sec="media"])), html.tol-work-page :is(#tol-sec-play, #tol-sec-media){ display:block !important; }
/* "En español": a plain link in the top bar, the same size as the section buttons (it steps aside when the bar is full) */
.tol-bar a.tol-es-link{ font:inherit; font-size:1rem; color:var(--ink); padding:.5rem .7rem; border:1px solid transparent; border-radius:var(--radius, 6px); text-decoration:none; white-space:nowrap; line-height:1.2; }
.tol-bar a.tol-es-link:hover{ border-color:var(--line); background:var(--paper-deep); text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:4px; }
.tol-bar a.tol-es-link[hidden]{ display:none; }
.tol-panel-es{ margin:.5rem 0 0; font-size:.95rem; }
.tol-panel-es a{ font-weight:600; }
/* "Print this page" beside "Share this guide" */
.tol-share-row .tol-print-btn{ display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.4rem 1.05rem; box-sizing:border-box;
  font:600 .95rem/1.2 var(--tol-sans, system-ui, sans-serif); color:#3C3354; background:#FFFDF7; border:1.5px solid #B9A8D6; border-radius:999px; cursor:pointer; }
.tol-share-row .tol-print-btn:hover{ background:#F3EEF9; }
.tol-print-btn:focus-visible{ outline:3px solid var(--focus, #2B5B8C); outline-offset:2px; }
/* "¿Prefieres español?": one quiet line under the bar for a browser set to Spanish */
.tol-es-hint{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; margin:.4rem auto .6rem; max-width:46rem; padding:.4rem .5rem .4rem .9rem; box-sizing:border-box;
  border:1px solid var(--line, #d8cfb8); border-radius:10px; font-size:.95rem; background:var(--paper, #fffaf0); color:var(--ink, #2a2530); }
.tol-es-hint a{ font-weight:600; }
.tol-es-hint button{ margin-left:auto; font:inherit; font-size:.9rem; color:inherit; background:none; border:1px solid currentColor; border-radius:999px; min-height:36px; min-width:36px; padding:.15rem .7rem; cursor:pointer; }
@media print{ .tol-es-hint, .tol-print-btn, .tol-panel-es{ display:none !important; } }
/* a smaller laptop: the less-used sections fold into Menu one by one (site.js fitBar), and Menu shows so they stay one tap away */
.tol-bar:is(.is-fold1, .is-fold2, .is-fold3, .is-fold4) .tol-nav-item[data-fold="1"], .tol-bar:is(.is-fold2, .is-fold3, .is-fold4) .tol-nav-item[data-fold="2"],
.tol-bar:is(.is-fold3, .is-fold4) .tol-nav-item[data-fold="3"], .tol-bar.is-fold4 .tol-nav-item[data-fold]{ display:none; }
.tol-bar:is(.is-fold1, .is-fold2, .is-fold3, .is-fold4) .tol-contents-btn{ display:inline-block; border-color:var(--ink-soft) !important; font-weight:600; }
/* nine sections (with Watch & listen): a little less padding on a 1281-1440px laptop keeps them all on one line */
@media (max-width:1440px) and (min-width:1281px){
  .tol-sections{ gap:.1rem; }
  .tol-sections .tol-nav-item > button{ padding:.5rem .26rem; }
}

/* ---------- Focus mode (site.js "Focus on what I'm learning") ---------- */
.tol-focus-line{ display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .45rem; font-size:.95rem; line-height:1.4; color:var(--ink); }
.tol-focus-line small{ color:var(--ink-soft); font-size:.88rem; }
.tol-focus-line button{ font:inherit; font-size:.92rem; min-height:40px; padding:.3rem .85rem; color:#2B4A6B; background:#FFFDF7; border:1.5px solid #9DB3CC; border-radius:999px; cursor:pointer; }
.tol-focus-line button:hover{ background:#EEF3F9; }
.tol-focus-line button:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tol-focus-line .tol-focus-go{ font-weight:600; }
.tol-focus-sep{ color:var(--ink-soft); }
.tol-focus-line.is-page{ box-sizing:border-box; max-width:46rem; margin:.4rem auto .9rem; padding:.3rem .4rem .3rem .9rem; border:1px solid #B9C9DA; border-radius:18px; background:#F4F8FC; }
.tol-focus-line.is-page button{ min-height:36px; padding:.2rem .75rem; }
main .tol-focus-line.is-page{ margin-left:0; margin-right:0; }
.tol-focus-line.is-panel{ margin:.6rem 0 .2rem; padding:.45rem .6rem; border:1px solid var(--line); border-radius:12px; background:rgba(255,253,247,.7); }
.tol-focus-line.is-panel.is-on, .tol-focus-line.is-settings.is-on{ border:1px solid #B9C9DA; background:#F4F8FC; }
.tol-focus-line.is-settings{ padding:.2rem 0; }
.tol-drop .tol-focus-li{ padding:.2rem .3rem .45rem; margin-bottom:.25rem; border-bottom:1px solid var(--line); }
.tol-drop .tol-focus-line{ font-size:.9rem; }
.tol-mine{ display:block; font-size:.9rem; line-height:1.45; color:var(--ink-soft); }
.tol-mine-k{ font-weight:600; color:var(--ink); }
.tol-drop .tol-mine-li, .tol-index .tol-mine-li{ list-style:none; padding:.3rem .5rem .45rem; }
.tol-pickup .tol-mine{ display:inline; font-size:inherit; color:inherit; }
/* the picker */
.tol-focus-grp{ border:0; margin:0 0 .9rem; padding:0; }
.tol-focus-grp legend{ font:600 1.1rem/1.3 "Fraunces", Georgia, serif; margin-bottom:.4rem; padding:0; }
.tol-focus-opts{ display:flex; flex-wrap:wrap; gap:.45rem; }
.tol-focus-opt{ display:inline-flex; align-items:center; gap:.45rem; font:inherit; font-size:.97rem; min-height:44px; padding:.35rem .9rem .35rem .6rem; color:var(--ink); background:#FFFDF7; border:1.5px solid #B9A8D6; border-radius:999px; cursor:pointer; text-align:left; }
.tol-focus-opt:hover{ background:#F3EEF9; }
.tol-focus-opt:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tol-focus-tick{ flex:none; width:1.05rem; height:1.05rem; border:1.5px solid #6B6353; border-radius:4px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; line-height:1; }
.tol-focus-opt[aria-pressed="true"]{ border-color:#3E6B4C; background:#EAF6EF; box-shadow:0 0 0 1px #3E6B4C inset; font-weight:600; }
.tol-focus-opt[aria-pressed="true"] .tol-focus-tick{ background:#3E6B4C; border-color:#3E6B4C; color:#fff; }
.tol-focus-opt[aria-pressed="true"] .tol-focus-tick::before{ content:"\2713"; }
.tol-focus-msg{ min-height:1.4rem; margin:.2rem 0; font-weight:600; color:#8A3B22; }
.tol-focus-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.4rem 0 1rem; }
.tol-focus-row button{ font:600 1rem/1.2 "Lora", Georgia, serif; min-height:44px; padding:.45rem 1.2rem; border-radius:999px; cursor:pointer; border:1.5px solid #3E6B4C; background:#3E6B4C; color:#fff; }
.tol-focus-row .tol-focus-all{ background:#FFFDF7; color:var(--ink); border-color:#8C826E; }
.tol-focus-row button[hidden]{ display:none; }
.tol-focus-row button:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tol-focus-dlg .tol-set-foot{ font-size:.9rem; color:var(--ink-soft); }
.tol-find-focus[aria-pressed="true"]{ font-weight:600; }
@media print{ .tol-focus-line, .tol-focus-dlg{ display:none !important; } }
.tol-focus-acts{ display:inline-flex; align-items:center; gap:.35rem; flex-wrap:nowrap; }
.tol-drop .tol-mine a, .tol-index .tol-mine a{ display:inline; padding:0; min-height:0; border:0; background:none; text-decoration:underline; }

/* =====================================================================
   Seeing the page clearly (Settings › Text and contrast)
   - every focusable thing gets a visible ring unless the page drew its own
   - High contrast (html.tol-contrast): black on plain white, or white on black in dark mode,
     solid backgrounds, clear outlines, a strong focus ring, and nothing soft or drifting behind
     the words. Pictures, video and drawings keep their own colors.
   ===================================================================== */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible{ outline:2px solid var(--focus, #2B5B8C); outline-offset:2px; }
.tol-set-k1{ margin-top:1rem; }
html[lang^="es"] .tol-preset-state::before{ content:"Apagado"; }
html[lang^="es"] .tol-preset[aria-pressed="true"] .tol-preset-state::before{ content:"Activado \2713"; }
.tol-set input[type=radio]:disabled + *{ opacity:.6; }

html.tol-contrast{ --paper:#FFFFFF; --paper-deep:#FFFFFF; --ink:#000000; --ink-soft:#000000; --line:#000000;
  --credit:#0B3D1E; --brass:#000000; --brass-ink:#000000; --focus:#0037B3; --debit:#6B1A0A; background:#FFFFFF !important; }
html.tol-contrast body{ background:#FFFFFF !important; color:#000000 !important; }
/* the soft garden, bubbles, hearts and page tint go away */
html.tol-contrast :is(.tol-wash, .tol-garden-bg, .tol-garden-veil, .tol-heart, .tol-bub){ display:none !important; }
html.tol-contrast body::before, html.tol-contrast body::after{ display:none !important; }
/* everything with words: black on solid white, no washes, glows or see-through text */
html.tol-contrast body *:not(svg, svg *, img, video, canvas, iframe, picture, picture *, .tol-hc-keep, .tol-hc-keep *){
  color:#000000 !important; -webkit-text-fill-color:currentColor !important;
  background-color:#FFFFFF !important; background-image:none !important;
  text-shadow:none !important; box-shadow:none !important; border-color:#000000 !important; }
html.tol-contrast body *:not(svg *)::before, html.tol-contrast body *:not(svg *)::after{
  color:inherit !important; -webkit-text-fill-color:currentColor !important;
  background-image:none !important; text-shadow:none !important; box-shadow:none !important; border-color:currentColor !important; }
/* numbered circles drawn behind a number: white number on solid black */
html.tol-contrast body :is(.ten-steps > li, ol.steps > li, .pt-step)::before{ background-color:#000000 !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; }
/* the reading ruler, overlays and backdrops stay see-through, so they never cover the words */
html.tol-contrast body :is(.tol-ruler, .tol-scrim, .tol-depth-opt a.tol-depth-name){ background-color:transparent !important; }
html.tol-contrast body .tol-ruler{ border-top:3px solid #000 !important; border-bottom:3px solid #000 !important; }
/* fills that show an amount (progress, meters, tracks) are solid black, so they still read */
html.tol-contrast body :is([class*="fill"], [class*="-meter"] > *, [class*="progress"] > *, [class*="gauge"] > *, [role="progressbar"] > *, [role="meter"] > *){ background-color:#000000 !important; }
html.tol-contrast body :is(progress, meter){ accent-color:#000; }
/* links: dark blue and underlined */
html.tol-contrast body a[href]:not(.hh-card, [role="button"]){ color:#0037B3 !important; text-decoration:underline !important; text-decoration-thickness:max(1px, .08em) !important; text-underline-offset:.15em; }
html.tol-contrast body a[href] *{ color:inherit !important; }
/* controls: a clear outline you can see without color */
html.tol-contrast body :is(button, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), [role="button"], summary, .hh-card){ border:2px solid #000000 !important; }
html.tol-contrast body :is(input, select, textarea)::placeholder{ color:#3A3A3A !important; opacity:1 !important; }
html.tol-contrast body :is(input[type="checkbox"], input[type="radio"], input[type="range"]){ accent-color:#000000; }
html.tol-contrast body :is(button, [role="button"]):disabled{ border-style:dashed !important; }
/* the water-drop words inside a sentence stay words: a strong dotted underline, no box and no empty space after them */
html.tol-contrast body button.tol-dive{ border:0 !important; padding:0 !important; background:none !important; text-decoration:underline dotted !important; text-decoration-thickness:2px !important; text-underline-offset:.18em; }
html.tol-contrast body .tol-dive .tol-dive-i{ display:none !important; }
/* what's chosen or turned on: white on black */
html.tol-contrast body :is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], [aria-current="page"], [aria-current="true"], [aria-current="step"]){ background-color:#000000 !important; color:#FFFFFF !important; border-color:#000000 !important; }
html.tol-contrast body :is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], [aria-current="page"], [aria-current="true"], [aria-current="step"]) *:not(svg, svg *, img){ background-color:transparent !important; color:#FFFFFF !important; }
html.tol-contrast body a[href]:is([aria-current="page"], [aria-current="true"], [aria-current="step"]){ color:#FFFFFF !important; }
/* the Settings switches */
html.tol-contrast body .tol-set-track{ background-color:#FFFFFF !important; border:2px solid #000 !important; }
html.tol-contrast body .tol-set-track > span{ background-color:#000000 !important; }
html.tol-contrast body .tol-set-sw input:checked + .tol-set-track{ background-color:#000000 !important; }
html.tol-contrast body .tol-set-sw input:checked + .tol-set-track > span{ background-color:#FFFFFF !important; }
html.tol-contrast body .tol-set-swatch{ border:2px solid #000 !important; }
/* a strong focus ring everywhere, even where a page hid its own */
html.tol-contrast body :focus-visible{ outline:3px solid #0037B3 !important; outline-offset:2px !important; box-shadow:0 0 0 5px #FFFFFF !important; }
html.tol-contrast body .tol-set-sw input:focus-visible + .tol-set-track{ outline:3px solid #0037B3 !important; outline-offset:2px !important; }
html.tol-contrast body :is(input, select, textarea):focus{ outline:3px solid #0037B3 !important; outline-offset:2px !important; }
/* "Simple version / Full version": the one you're on gets a thick frame instead of a dark fill */
html.tol-contrast body .tol-depth-opt a.tol-depth-name[aria-current], html.tol-contrast body .tol-depth-opt a.tol-depth-name[aria-current] *{ color:#000000 !important; background-color:transparent !important; }
html.tol-contrast body .tol-depth-opt.is-here{ border:3px solid #000000 !important; }
/* widgets that bring their own strong colors (the Brain Break card) */
html.tol-contrast body section.bkb.bkb.bkb, html.tol-contrast body section.bkb.bkb.bkb *:not(svg, svg *, img, iframe){ color:#000000 !important; background:#FFFFFF !important; -webkit-text-fill-color:currentColor !important; box-shadow:none !important; }
html.tol-contrast body section.bkb.bkb.bkb{ border:2px solid #000000 !important; }
html.tol-contrast body section.bkb.bkb.bkb a[href]{ color:#0037B3 !important; }
/* the sentence being read aloud */
html.tol-contrast ::highlight(tol-listen){ background-color:#FFE500; color:#000000; }
html.tol-contrast body .tol-listen-now{ outline:3px solid #000 !important; outline-offset:4px; }
html.tol-contrast body :is(mark, ins){ background-color:#FFE500 !important; color:#000 !important; }
/* thin grey rules become solid black lines */
html.tol-contrast body :is(hr){ border:0 !important; border-top:2px solid #000 !important; background:none !important; }
/* nothing slides, fades or drifts */
html.tol-contrast *, html.tol-contrast *::before, html.tol-contrast *::after{ animation-duration:0s !important; animation-iteration-count:1 !important; transition:none !important; }
/* dark mode with high contrast: a true white-on-black page (the whole page is turned around, pictures turned back) */
html.tol-contrast[data-theme="dark"]:not(.tol-nodark){ filter:invert(1) hue-rotate(180deg) !important; background:#FFFFFF !important; }
@media (prefers-color-scheme: dark){
  html.tol-contrast:not([data-theme="light"]):not(.tol-nodark):not(:has(> body.is-game)){ filter:invert(1) hue-rotate(180deg) !important; background:#FFFFFF !important; }
}
@media print{ html.tol-contrast{ filter:none !important; } }

/* ---- chrome9 (re-test 2) ---- */
/* phones: the full name on two small lines ("Spread Love &" / "Acceptance"), never cut to "Spread Love" unless even that won't fit */
@media (max-width:640px){
  .tol-bar.is-tightest:not(.is-shortname) .tol-brand span{ font-size:.8rem !important; line-height:1.08; letter-spacing:-.01em; overflow-wrap:normal; word-break:normal; }
}
/* "Read the book" in the top bar: a plain link like "En español", a touch tighter so the sections keep their room */
.tol-bar a.tol-book-link{ padding-left:.45rem; padding-right:.45rem; font-weight:600; }
.tol-bar a.tol-book-link[aria-current="page"]{ text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:4px; }
/* Phones: the floating helpers are small round buttons, fully on screen with a safe inset (never a half-hidden tab
   at the edge): Professor Puddles bottom left, Breathe bottom right, Back to top just above Breathe. While someone
   reads down the page they all step aside (html.tol-reading), and the end of the page has room so nothing sits under them. */
@media (max-width:560px){
  html body .tol-pud-fab, html body .tol-pud-fab:is(.is-peek, .is-face, .is-named){
    left:max(5px, env(safe-area-inset-left)) !important; right:auto !important; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    width:38px !important; height:38px !important; min-height:0 !important; padding:0 !important; gap:0 !important;
    justify-content:center !important; border:1px solid #A9CBE8 !important; border-radius:50% !important; transform:none !important;
    background:rgba(226,240,252,.97) !important; box-shadow:0 4px 14px rgba(36,66,94,.22) !important; }
  html body .tol-pud-fab .tol-pud-fab-art{ width:32px; height:32px; }
  html body .tol-pud-fab .tol-pud-fab-art svg{ width:28px; height:28px; }
  html body .tol-pud-fab .tol-pud-fab-t{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }
  html body .tol-breathe-btn, html body .tol-breathe-btn:is(.is-compact, .is-peek, .is-left):not(.is-high){
    right:max(5px, env(safe-area-inset-right)) !important; left:auto !important; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    width:38px !important; height:38px !important; padding:0 !important; gap:0 !important; justify-content:center !important;
    border:1px solid #BFD0EA !important; border-radius:50% !important; transform:none !important; box-shadow:0 4px 14px rgba(47,58,92,.2) !important; }
  /* (when something to tap sits in the right corner, Breathe sits beside Professor Puddles instead) */
  html body .tol-breathe-btn.is-left:not(.is-high){ left:calc(max(5px, env(safe-area-inset-left)) + 46px) !important; right:auto !important; }
  html body .tol-breathe-btn > span{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }
  html body .tol-breathe-btn svg{ width:1.2rem !important; height:1.2rem !important; }
  html body .tol-top{ right:max(5px, env(safe-area-inset-right)) !important; bottom:calc(58px + env(safe-area-inset-bottom, 0px)) !important; width:38px !important; height:38px !important; font-size:1.05rem !important; }
  html.tol-reading .tol-pud-fab:not(:focus-visible){ opacity:0 !important; pointer-events:none !important; }
  body:has(.tol-pud-fab, .tol-breathe-btn){ padding-bottom:calc(5rem + env(safe-area-inset-bottom, 0px)); }
  main.read{ scroll-padding-bottom:5rem; }
}
/* the calmer-page offer: Quiet mode is the first and boldest choice; after "No thanks" it folds to one quiet line */
.tol-offer button.is-main{ background:#4E3F6B; border-color:#4E3F6B; box-shadow:0 0 0 2px #FFFDF7, 0 0 0 4px #9A80C8; }
.tol-offer:not(.is-done) button:not(.is-main):not(.is-quiet){ background:#FFFDF7; color:#2F5F8A; }
.tol-offer.is-done{ padding:.5rem 1rem; box-shadow:none; }
.tol-offer .tol-offer-done{ font-size:.92rem; color:var(--ink-soft, #5A5346); }
.tol-offer .tol-offer-done:focus{ outline:none; }
/* the little reading friends: never an empty speech bubble, and none at all while the page is kept still */
.tol-cheer-say:has(> .tol-cheer-line:empty){ display:none !important; }
html.tol-still .tol-cheer{ display:none !important; }
/* phones: over words, the round buttons get smaller and sit right at the edge (still whole, never a half-hidden tab),
   so they stay clear of text that starts a little in from the side */
@media (max-width:560px){
  html body .tol-pud-fab.is-peek{ left:max(3px, env(safe-area-inset-left)) !important; width:30px !important; height:30px !important; opacity:.92; }
  html body .tol-pud-fab.is-peek .tol-pud-fab-art{ width:26px; height:26px; }
  html body .tol-pud-fab.is-peek .tol-pud-fab-art svg{ width:23px; height:23px; }
  html body .tol-breathe-btn.is-peek:not(.is-high){ right:max(3px, env(safe-area-inset-right)) !important; width:30px !important; height:30px !important; opacity:.92; }
  html body .tol-breathe-btn.is-peek.is-left:not(.is-high){ left:calc(max(3px, env(safe-area-inset-left)) + 36px) !important; right:auto !important; }
  html body .tol-breathe-btn.is-peek svg{ width:1rem !important; height:1rem !important; }
}

/* ---- The menu shows what's inside (chrome9): a line on what each section holds, a note under every page,
   popular pages one tap away at the top of the phone menu, and every list ends at the explorer ---- */
.tol-drop{ max-width:24rem; min-width:17rem; }
.tol-drop li.tol-drop-blurb{ margin:0 .5rem .5rem; padding:0 0 .5rem; border-bottom:1px solid var(--line); font-size:.86rem; font-style:italic; line-height:1.45; color:var(--ink-soft); list-style:none; }
.tol-mi{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.tol-mi-t{ font-size:.97rem; line-height:1.3; }
small.tol-mi-n{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.8rem; line-height:1.35; color:var(--ink-soft); font-weight:400; }
.tol-drop a{ min-height:44px; box-sizing:border-box; align-items:center; }
.tol-drop .tol-explore-li{ margin-top:.35rem; padding-top:.35rem; border-top:1px solid var(--line); }
.tol-drop a.tol-explore-a .tol-mi-t, .tol-panel a.tol-explore-a .tol-title{ font-weight:600; color:var(--focus, #2B5B8C); }
.tol-panel .tol-acc > summary{ flex-wrap:wrap; }
.tol-acc-blurb{ flex-basis:100%; display:block; margin-top:.15rem; font:400 .86rem/1.4 "Lora", Georgia, serif; color:var(--ink-soft); }
.tol-panel .tol-title small.tol-mi-n{ font-size:.86rem; margin-top:.15rem; }
.tol-panel .tol-row{ min-height:48px; box-sizing:border-box; }
.tol-panel .tol-close{ min-height:44px; min-width:64px; }
.tol-panel-safe a, .tol-panel-safe button, .tol-panel-es a{ display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; }
.tol-panel-quick{ margin:.7rem 0 .3rem; }
.tol-panel .tol-panel-quick-h{ margin:0 0 .35rem; font:500 .74rem/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); }
.tol-panel-quick ul{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin:0; padding:0; list-style:none; }
.tol-panel-quick li{ margin:0; padding:0; }
.tol-panel-quick li::before{ content:none !important; }
.tol-panel-quick a{ display:flex; align-items:center; gap:.4rem; min-height:48px; height:100%; box-sizing:border-box; padding:.4rem .65rem; border-radius:12px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink); text-decoration:none; font-size:.92rem; font-weight:600; line-height:1.25; }
.tol-panel-quick a:hover{ background:var(--paper-deep); }
.tol-panel-quick a[aria-current="page"]{ border-color:var(--brass); }
.tol-panel-quick a:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
@media (min-width:700px){ .tol-panel-quick ul{ grid-template-columns:repeat(3, 1fr); } }
@media print{ .tol-panel-quick{ display:none !important; } }
.tol-panel :is(.tol-panel-tools button, .tol-panel-tools a, .tol-panel-focus button, .tol-panel-focus a){ min-height:44px; box-sizing:border-box; }
.tol-panel .tol-acc > summary{ row-gap:0; }
/* the short printout's first line: the site's name and the page's address (added by site.js only while printing) */
.tol-print-head{ display:none; }
@media print{ html.ps-short .tol-print-head{ display:block !important; margin:0 0 .4rem !important; font:10pt/1.3 "IBM Plex Mono", ui-monospace, monospace; color:#333; border-bottom:1px solid #999; padding-bottom:.2rem !important; } }
/* "What's on this page": a small box under the title of long guides (site.js onThisPage) */
.tol-onpage{ margin:.6rem 0 1.2rem; max-width:40rem; border:1px solid var(--line, #D9CBA3); border-radius:14px; background:var(--paper, #FFFBF2); }
.tol-onpage > summary{ display:flex; flex-direction:column; gap:.15rem; min-height:44px; box-sizing:border-box; padding:.6rem 2.4rem .6rem .9rem; cursor:pointer; list-style:none; position:relative; }
.tol-onpage > summary::-webkit-details-marker{ display:none; }
.tol-onpage > summary::after{ content:"+"; position:absolute; right:.8rem; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--paper-deep, #ECE2C4); font-weight:700; }
.tol-onpage[open] > summary::after{ content:"\2212"; }
.tol-onpage > summary:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:14px; }
.tol-onpage-k{ font:600 .74rem/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing:.07em; text-transform:uppercase; color:#6B4F8A; }
.tol-onpage-peek{ font-size:.92rem; line-height:1.4; color:var(--ink-soft); }
.tol-onpage[open] .tol-onpage-peek{ display:none; }
.read .tol-onpage ol{ margin:0 !important; padding:.1rem .9rem .7rem 2.2rem !important; }
.read .tol-onpage li{ margin:.1rem 0 !important; padding:0 !important; max-width:none !important; background:none !important; box-shadow:none !important; border:0 !important; }
.tol-onpage a{ display:inline-flex; align-items:center; min-height:44px; padding:.2rem 0; line-height:1.35; }
body:has(.tol-outline.is-on) .tol-onpage{ display:none; }
@media print{ .tol-onpage{ display:none !important; } }
/* "How you take things in" (take-in.js): its link at the top of Settings, and under the calmer-page offer */
.tol-set-takein{ margin:.2rem 0 1rem; padding:.6rem .85rem; border:1px solid #C6D6E6; border-radius:12px; background:#F2F6FA; }
.tol-offer .tol-offer-more{ margin-top:.5rem !important; font-size:.92rem; }
.tol-offer .tol-offer-more a{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.read .hh-offer-slot .tol-offer .tol-offer-more{ flex-basis:100%; margin-top:0 !important; font-size:.86rem; }
.read .hh-offer-slot .tol-offer .tol-offer-more a{ min-height:32px; }

/* ---------- Finding your way (find10): "Where you are", "Related", and the menu's whole-site doors ---------- */
.tol-where{ margin:0 0 .7rem; font:500 .8rem/1.4 "IBM Plex Mono", ui-monospace, monospace; letter-spacing:.02em; color:var(--ink-soft); }
.tol-where ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.1rem 0; list-style:none; margin:0 !important; padding:0 !important; }
.read .tol-where li, .tol-where li{ margin:0 !important; padding:0 !important; max-width:none !important; background:none !important; border:0 !important; box-shadow:none !important; }
.tol-where li::before{ content:none !important; }
.tol-where li + li::before{ content:"\203A" !important; display:inline-block !important; margin:0 .45rem; color:var(--brass, #A57A2E); }
.tol-where a{ display:inline-flex; align-items:center; min-height:32px; color:var(--ink-soft); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.tol-where a:hover{ color:var(--ink); text-decoration-color:var(--brass, #A57A2E); }
.tol-where a:focus-visible{ outline:2px solid var(--focus, #2B5B8C); outline-offset:2px; border-radius:4px; }

.tol-related{ clear:both; margin:2.2rem 0 1rem; padding:1rem 1rem 1.05rem; border:1px solid var(--line); border-radius:18px; background:var(--paper); }
.read .tol-related h2.tol-related-h, .tol-related-h{ margin:0 0 .6rem !important; padding:0 !important; font:600 .76rem/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); background:none !important; border:0 !important; box-shadow:none !important; }
.tol-related ul{ display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:.55rem; list-style:none; margin:0 !important; padding:0 !important; }
.read .tol-related li, .tol-related li{ margin:0 !important; padding:0 !important; max-width:none !important; background:none !important; border:0 !important; box-shadow:none !important; }
.tol-related li::before{ content:none !important; }
.tol-related ul a{ display:flex; flex-direction:column; gap:.2rem; height:100%; box-sizing:border-box; min-height:48px; padding:.65rem .8rem; border-radius:12px; text-decoration:none; color:var(--ink); background:#FFFFFF; border:1px solid var(--line); }
.tol-related ul a:hover{ border-color:var(--brass, #A57A2E); }
.tol-related ul a:focus-visible, .tol-related-all a:focus-visible{ outline:2px solid var(--focus, #2B5B8C); outline-offset:2px; }
.tol-related-t{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1rem; line-height:1.3; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.tol-related-n{ font-size:.88rem; line-height:1.4; color:var(--ink-soft); }
.read .tol-related p.tol-related-all, .tol-related-all{ margin:.75rem 0 0 !important; padding:0 !important; max-width:none !important; font-size:.93rem; background:none !important; border:0 !important; box-shadow:none !important; }
.tol-related-all a{ display:inline-flex; align-items:center; min-height:44px; }
@media (max-width:520px){ .tol-related{ padding:.85rem .75rem .9rem; } .tol-related ul{ grid-template-columns:1fr; } }
html.tol-quiet .tol-related ul a{ background:var(--paper); }
@media print{ .tol-where, .tol-related{ display:none !important; } }

/* the open menu: big doors to the whole site, and roomy rows to tap */
.tol-panel .tol-acc > summary{ min-height:48px; box-sizing:border-box; }
.tol-panel .tol-subm-btn{ min-height:48px; }
.tol-panel .tol-tree a.tol-row{ min-height:48px; box-sizing:border-box; }

/* ---- menu10/menu11: each menu group is its blurb and then ONLY sub-menus (site.js buildTree). The group's
   "See all …" link opens its first sub-menu; Start here's Focus and progress lines close that one. ---- */
.tol-seeall-li{ list-style:none; }
.tol-drop a.tol-seeall .tol-mi-t, .tol-panel a.tol-seeall .tol-title{ font-weight:600; color:var(--focus, #2B5B8C); }
.tol-drop .tol-subm-list .tol-focus-li{ margin:.35rem 0 0; padding:.45rem .3rem .2rem; border-bottom:0; border-top:1px solid var(--line); }
.tol-drop .tol-subm-btn{ min-height:44px; }
.tol-drop .tol-tree > li.tol-drop-blurb + li.tol-subm > .tol-subm-btn{ border-top:0; }
/* the menu never highlights the page you're on: no "(you are here)", no marked row, no marked section button */
.tol-panel .tol-tree .tol-row[aria-current="page"] .tol-title::after{ content:none; }
.tol-panel .tol-tree .tol-row[aria-current="page"], .tol-drop a[aria-current="page"]{ background:none; font-weight:inherit; border-left-color:transparent; box-shadow:none; }
.tol-acc-here{ display:none !important; }

/* search11: best match, help and nothing-found boxes (moved from site.js so strict-CSP pages get them) */
.tol-find-best{margin:.7rem 0 .2rem;padding:.7rem .75rem .5rem;border:1.5px solid var(--line,#D9CBA3);border-left:4px solid var(--focus,#2B5B8C);border-radius:12px;background:var(--paper-deep,#F3EBD6);}
.tol-find-best h3,.tol-find-help h3,.tol-find-none h3{margin:0 0 .2rem;font:600 .95rem/1.35 var(--tol-sans,system-ui,sans-serif);color:var(--ink,#2B2620);}
.tol-find-best .tol-find-for{margin:0 0 .35rem;font-size:.86rem;color:var(--ink-soft,#5A5048);}
.tol-find-best ol{list-style:none;margin:0;padding:0;}
.tol-find-best li{margin:0;border-top:1px dotted var(--line,#D9CBA3);}
.tol-find-best li:first-child{border-top:0;}
.tol-find-best a{display:block;padding:.55rem .35rem;color:var(--ink,#2B2620);text-decoration:none;border-radius:8px;}
.tol-find-best a:hover{background:rgba(127,127,127,.12);}
.tol-find-best a:focus-visible,.tol-find-chip:focus-visible,.tol-find-more a:focus-visible,.tol-find-more button:focus-visible{outline:2px solid var(--focus,#2B5B8C);outline-offset:2px;}
.tol-find-bt{display:block;font-weight:600;font-size:1.02rem;overflow-wrap:anywhere;}
.tol-find-bw{display:block;font-size:.9rem;color:var(--ink-soft,#5A5048);line-height:1.45;margin-top:.1rem;}
.tol-find-help,.tol-find-none{margin:.7rem 0 .2rem;}
.tol-find-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.35rem 0 .5rem;padding:0;}
.tol-find-chips li{margin:0;}
.tol-find-chip{font:inherit;font-size:.92rem;min-height:40px;padding:.35rem .8rem;border-radius:999px;border:1.5px solid var(--line,#D9CBA3);background:var(--paper,#FFFDF7);color:var(--ink,#2B2620);cursor:pointer;text-align:left;max-width:100%;}
.tol-find-chip:hover{border-color:var(--focus,#2B5B8C);}
.tol-find-more{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.2rem 0 0;padding:0;list-style:none;font-size:.95rem;}
.tol-find-more li{margin:0;}
.tol-find-more a,.tol-find-more button{display:inline-flex;align-items:center;min-height:40px;color:var(--focus,#2B5B8C);font:inherit;font-weight:600;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;text-align:left;}
.tol-find-also{margin:.6rem 0 .1rem;font-size:.95rem;}
.tol-find-also a{font-weight:600;}
.tol-find-kind.is-wp{background:#EFE7F7 !important;color:#4B3A6B !important;}
.tol-find-gh{list-style:none;margin:.7rem 0 .1rem;padding:0 .5rem;font:600 .8rem/1.4 var(--tol-sans,system-ui,sans-serif);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft,#5A5048);border:0 !important;}
.tol-related-k{display:inline-block;margin-left:.35rem;}
.tol-find-help[hidden],.tol-find-best[hidden],.tol-find-none[hidden]{display:none;}


.tol-find-note:empty{display:none;}

/* ---------- consol12: a place's mode switch. One card on /tools.html, many ways in: the row of ways in at the top of each
   page (or tool section) of that place. Drawn by tools/places/build-places.js from the tools registry. ---------- */
.ps{ box-sizing:border-box; max-width:100%; margin:.7rem 0 1.1rem; padding:.55rem .6rem .6rem; border:1px solid var(--line); border-radius:14px; background:#FFFDF7; color:var(--ink); font-family:"Lora", Georgia, serif; text-align:left; }
.ps *{ box-sizing:border-box; }
.ps .ps-k{ margin:0 0 .45rem; padding:0 .2rem; font-size:.82rem; line-height:1.3; color:var(--ink-soft); max-width:none; }
.ps .ps-k b{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:.98rem; color:var(--ink); }
.ps-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .45rem; margin:0; padding:0; }
.ps .ps-g{ flex:none; padding:0 .1rem 0 .3rem; font:500 .7rem/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.ps .ps-b{ flex:none; display:inline-flex; align-items:center; gap:.35rem; min-height:44px; padding:.4rem .9rem; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-size:.93rem; font-weight:600; line-height:1.2; text-decoration:none; }
.ps .ps-b:hover{ border-color:var(--brass); }
.ps .ps-b:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.ps .ps-b[aria-current="page"]{ background:var(--ink); border-color:var(--ink); color:#FFFDF7; }
/* five or more ways in: one row you can swipe on a phone, so the switch stays 44px tall */
@media (max-width:640px){
  .ps-many .ps-row{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding:0 1.2rem 2px 0; -webkit-mask-image:linear-gradient(to right, #000 88%, transparent); mask-image:linear-gradient(to right, #000 88%, transparent); }
  .ps-many .ps-row::-webkit-scrollbar{ display:none; }
  .ps-many .ps-b, .ps-many .ps-g{ scroll-snap-align:start; }
  .ps .ps-b{ padding:.35rem .75rem; font-size:.88rem; }
}
@media print{ .ps{ display:none !important; } }
/* the games' own row of tabs (games.css has the same look; pages without games.css get it from here) */
.gm-switch{ display:flex; align-items:center; gap:.4rem; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin:.2rem 0 1rem; }
.gm-switch::-webkit-scrollbar{ display:none; }
.gm-switch a.gm-tab{ flex:none; display:inline-flex; align-items:center; gap:.35rem; min-height:44px; padding:.35rem .85rem; border-radius:999px; border:1px solid #E6D6EE; background:#fff; color:#4E3F6B; text-decoration:none; font-size:.9rem; font-weight:600; }
.gm-switch a.gm-tab[aria-current="page"]{ background:#3C3350; border-color:#3C3350; color:#FFF8EE; }
.gm-switch a.gm-home{ min-width:44px; justify-content:center; padding:.35rem .6rem; }
.gm-switch .gm-chip{ margin-left:auto; }
.gm-switch .gm-chip .tr-chip{ display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; }
@media (max-width:420px){ .gm-switch a.gm-tab{ padding:.3rem .6rem; font-size:.82rem; } }