/* ---------------------------------------------------------------------------
   portal.css — the one place the portal's look lives          (15 Oct 2026)
   ---------------------------------------------------------------------------
   Warm cream, espresso, mushroom and blush connect the member experience to
   the current Futureworks / AI Girls visual identity. Organic pastel shapes
   appear in a few high-impact places while the lesson chrome stays quiet.

   Loaded last from index.html, after app.css (the classroom) and gate.css
   (the sign-in). It replaces css/luxe.css and the theme string js/shell.js
   used to inject. The classroom's own palette is set in css/app.css :root;
   this file carries the top bar, the Courses page and the library pages.

   Sections
     1. tokens for library mode
     2. the top bar (js/shell.js draws it, this styles it)
     3. the Courses page: greeting band, continue strip, cards
     4. the pages behind a card: the Studio and The 2% Club
     5. the community strip, the sign-in screen, small fixes
--------------------------------------------------------------------------- */

/* ------------------------------------------------------------- 1. tokens */
html .app.library{
  --paper:#F7F6F4; --card:#FFFFFF; --edge:#DDD8D4; --edge-soft:#F1EFED;
  --gold:#292522; --tan:#67594F; --band:#E6E2DE;
  --lb-key:#DDD8D4;
  --warm-ink:#292522; --warm-muted:#67594F; --warm-faint:#968B82;
  --lx-ink:#292522; --lx-muted:#67594F; --lx-faint:#968B82; --lx-line:#DDD8D4; --lx-line-2:#CFC8C2; --lx-wash:#F5F4F2; --lx-white:#FFFFFF;
  --lx-font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --lime:#DDD8D4; --lime-2:#CFC8C2; --on-lime:#292522;
  --r:18px; --r-sm:12px;
  background:var(--paper);
}
html .app.library .topbar{background:#fff;border-bottom-color:var(--edge)}
html .app.library .lib{font-family:var(--lx-font)}
html .lib ::selection{background:var(--lime)}

/* The sidebar takes the first column in library mode; the classroom's own
   top bar is hidden while it is on screen. */
html .app.library:has(#fwNav){grid-template-columns:256px minmax(0,1fr)!important;grid-template-rows:auto;align-content:start}
html .app.library:has(#fwNav) .topbar{display:none!important}
.app:not(.library) #fwNav{display:none}

/* ------------------------------------------------------------ 2. sidebar */
#fwNav{min-width:0;font-family:var(--lx-font);color:var(--lx-ink)}
.fw-side{position:sticky;top:0;height:100vh;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;padding:22px 14px 14px;background:#fff;border-right:1px solid var(--edge);overflow-y:auto}
.fw-logo{border:0;background:none;padding:4px 10px 22px;margin:0;cursor:pointer;text-align:left;display:flex;align-items:center;font:800 17px/1 var(--lx-font);letter-spacing:-.03em;color:var(--lx-ink)}
.fw-logo img{display:block;height:24px;width:auto}
.fw-items{display:flex;flex-direction:column;gap:4px}
.fw-item{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;border:1px solid transparent;background:none;border-radius:10px;padding:12px 12px;font:600 14.5px/1.25 var(--lx-font);color:var(--lx-muted);text-align:left;cursor:pointer}
.fw-item svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fw-item:hover{background:var(--edge-soft);color:var(--lx-ink)}
.fw-item.on{background:var(--paper);color:var(--lx-ink);border-color:var(--edge)}
.fw-item.on::after{content:"";margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 1px rgba(24,24,27,.25)}
.fw-item span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-grow{flex:1;min-height:16px}
.fw-acct{position:relative}
.fw-me{padding:8px 10px;font-weight:500}
.fw-me.open{background:var(--edge-soft);color:var(--lx-ink)}
.fw-av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--lime);color:var(--on-lime);font:700 11.5px/1 var(--lx-font);box-shadow:inset 0 0 0 1px rgba(24,24,27,.12)}
.fw-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:40;display:flex;flex-direction:column;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:6px;box-shadow:0 16px 40px -20px rgba(24,24,27,.35)}
.fw-menu-who{margin:0;padding:9px 10px 8px;font-size:12.5px;color:var(--lx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--edge)}
.fw-menu button{border:0;background:none;border-radius:var(--r-sm);padding:10px;font:500 14px/1.2 var(--lx-font);color:var(--lx-ink);text-align:left;cursor:pointer}
.fw-menu button:hover{background:var(--edge-soft)}
.fw-tabs{display:none}
#fwNav button:focus-visible{outline:2px solid var(--lx-ink);outline-offset:2px}
@media (max-width:860px){
  html .app.library:has(#fwNav){grid-template-columns:minmax(0,1fr)!important}
  .fw-side{display:none}
  html .app.library:has(#fwNav) article#pane{padding-top:env(safe-area-inset-top);padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .fw-tabs{display:flex;flex-direction:row;align-items:center;justify-content:space-around;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid var(--edge)}
  .fw-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;padding:6px 0;font:600 11px/1 var(--lx-font);color:var(--lx-faint);cursor:pointer}
  .fw-tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .fw-tab.on{color:var(--lx-ink)}
  .fw-sheet{position:absolute;left:12px;right:12px;bottom:calc(100% + 10px)}
  .fw-sheet .fw-menu{position:static;box-shadow:0 12px 40px rgba(10,10,10,.16)}
  .fw-sheet .fw-menu button{padding:13px 10px;font-size:15px}
}

/* ------------------------------------------------------- 3. Courses page */
html .app.library main article#pane,html .app.library article#pane{max-width:1160px;margin:0 auto;padding:0 clamp(14px,2.5vw,28px) 56px}
html .pc-home{display:flex;flex-direction:column;gap:0}

/* the greeting band: a photograph, lightened, with live text over it */
html .pc-head{margin:22px 0 0;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--card);min-height:200px;display:flex;align-items:center;position:relative}
html .pc-head.shot{min-height:clamp(200px,24vw,300px)}
html .pc-head .lib-banner{position:absolute;inset:0;line-height:0}
html .pc-head .lib-banner img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
html .pc-head .lib-banner.empty{background:#CBE7E3;overflow:hidden}
html .pc-head .lib-banner.empty::before,
html .pc-head .lib-banner.empty::after{content:"";position:absolute;display:block;pointer-events:none}
html .pc-head .lib-banner.empty::before{width:38%;height:118%;right:-7%;top:-42%;background:#DCCCE6;border-radius:44% 56% 58% 42% / 48% 38% 62% 52%;transform:rotate(16deg);box-shadow:-760px 250px 0 90px #F1D18B}
html .pc-head .lib-banner.empty::after{width:42%;height:128%;right:8%;bottom:-84%;background:#E8E0D6;border-radius:58% 42% 46% 54% / 44% 58% 42% 56%;transform:rotate(-12deg);box-shadow:-420px -170px 0 55px #CBD3BF}
html .pc-head.shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,.15) 70%)}
html .pc-head .lib-headin{position:relative;z-index:1;width:min(680px,calc(100% - 40px));margin:0 auto;padding:30px clamp(20px,3vw,44px);text-align:center;display:flex;flex-direction:column;align-items:center;background:rgba(255,253,252,.78);border:1px solid rgba(86,59,46,.10);border-radius:28px;box-shadow:0 18px 50px -34px rgba(86,59,46,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html .pc-head .lib-h1{margin:0;font-family:var(--lx-font);font-weight:800;font-size:clamp(30px,4.6vw,50px);line-height:1.04;letter-spacing:-.04em;color:var(--lx-ink)}
html .pc-head .lib-sub{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--lx-muted);font-weight:500}

/* pick up where you left off */
html .pc-resume{position:relative;z-index:2;margin:-26px clamp(10px,2vw,24px) 0;border:1px solid var(--edge);border-radius:var(--r);background:#fff;box-shadow:0 20px 40px -28px rgba(24,24,27,.35);padding:14px 16px 14px 14px;display:flex;align-items:center;gap:16px;text-align:left;cursor:pointer;font:inherit;color:var(--lx-ink);width:auto}
html .pc-resume:hover{border-color:var(--lx-line-2)}
html .pc-resume-art{flex:none;width:92px;height:62px;border-radius:8px;overflow:hidden;border:1px solid var(--edge);line-height:0}
html .pc-resume-art img{width:100%;height:100%;object-fit:cover}
html .pc-resume-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
html .pc-resume-txt small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lx-muted)}
html .pc-resume-txt b{font-size:16px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .pc-resume-txt .pc-bar{max-width:420px}
html .pc-resume-go{flex:none;font-size:13.5px;font-weight:700;background:var(--lime);color:var(--on-lime);padding:12px 20px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px rgba(24,24,27,.12);white-space:nowrap}

/* sections and cards */
html .pc-sec{display:flex;align-items:baseline;gap:12px;margin:40px 0 16px}
html .pc-sec h2{margin:0;font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.035em;color:var(--lx-ink)}
html .pc-sec span{font-size:12px;font-weight:700;color:var(--on-lime);background:var(--lime);border-radius:999px;padding:3px 10px;box-shadow:inset 0 0 0 1px rgba(24,24,27,.10)}
html .pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
html .pc-card{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0;box-shadow:0 1px 2px rgba(24,24,27,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
html .pc-card:hover{transform:translateY(-2px);border-color:var(--lx-line-2);box-shadow:0 1px 2px rgba(24,24,27,.05),0 20px 40px -28px rgba(24,24,27,.35)}
html .pc-cover{aspect-ratio:16/10;background:#C9CACF;border-bottom:1px solid var(--edge);line-height:0;overflow:hidden}
html .pc-cover img{width:100%;height:100%;object-fit:cover;display:block}
html .pc-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
html .pc-body h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--lx-ink)}
html .pc-body p{margin:0;color:var(--lx-muted);font-size:13.5px;line-height:1.55}
html .pc-prog{margin-top:auto;padding-top:6px;display:flex;flex-direction:column;gap:7px;min-height:22px}
html .pc-bar{display:block;height:6px;border-radius:3px;background:#DEDEE2;overflow:hidden}
html .pc-bar i{display:block;height:100%;background:var(--lime);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(24,24,27,.18)}
html .pc-lab{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--lx-ink)}
html .pc-lab span:last-child{font-variant-numeric:tabular-nums;color:var(--lx-muted)}
html .pc-foot{padding-top:4px}
html .pc-go{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:13px 18px;border-radius:var(--r-sm);background:var(--lx-ink);color:#fff;font:700 14px/1.2 var(--lx-font);border:0;cursor:pointer;text-decoration:none;text-align:center}
html .pc-go:hover{background:#2A2A33}
html .pc-go.quiet{background:var(--edge-soft);color:var(--lx-ink)}
html .pc-go.quiet:hover{background:#E4E4E9}
html .pc-go.go{background:var(--lime);color:var(--on-lime);box-shadow:inset 0 0 0 1px rgba(24,24,27,.12)}
html .pc-go.go:hover{background:var(--lime-2)}
html .pc-go.shut{background:var(--edge-soft);color:var(--lx-muted);cursor:default}
html .pc-go .ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
html .pc-go:focus-visible{outline:2px solid var(--lx-ink);outline-offset:3px}
@media (max-width:640px){
  .pc-head{margin-top:14px;min-height:170px}
  .pc-head.shot{min-height:180px}
  .pc-head .lib-headin{padding:24px 18px}
  .pc-resume{flex-wrap:wrap;margin:-20px 6px 0;gap:12px}
  .pc-resume-go{width:100%;text-align:center}
  .pc-grid{grid-template-columns:1fr}
}

/* Welcome page: start-here steps, the two side-by-side cards, a title header */
html .pc-title{margin:22px 0 0;border:0;background:none;min-height:0;padding:0}
html .pc-title .lib-headin{padding:6px 0 0;text-align:left}
html .pc-title .lib-h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.04em;font-weight:800}
html .pc-title .lib-sub{margin:6px 0 0;color:var(--lx-muted)}
html .pc-sec .pc-link{margin-left:auto;border:0;background:none;padding:0;font:600 13.5px var(--lx-font);color:var(--lx-muted);cursor:pointer}
html .pc-sec .pc-link:hover{color:var(--lx-ink)}
html .pc-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
html .pc-step{display:flex;align-items:flex-start;gap:14px;text-align:left;font:inherit;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:16px 18px;cursor:pointer;color:var(--lx-ink)}
html .pc-step:hover{border-color:var(--lx-line-2)}
html .pc-step-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--lime);display:inline-flex;align-items:center;justify-content:center;font:700 12px var(--lx-font);box-shadow:inset 0 0 0 1px rgba(24,24,27,.15)}
html .pc-step-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html .pc-step-t b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
html .pc-step-t span{font-size:13px;color:var(--lx-muted);line-height:1.5}
html .pc-step-go{flex:none;color:var(--lx-muted);font-weight:700;padding-top:2px}
html .pc-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:40px}
html .pc-welcome .pc-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* the community card */
html .pc-cm{display:flex;background:#fff;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;min-width:0}
html .pc-cm-art{flex:0 0 42%;background:#563B2E;color:#fff;display:flex;align-items:flex-end;padding:18px;font:800 20px/1.1 var(--lx-font);letter-spacing:-.03em;position:relative;min-height:170px}
html .pc-cm-art::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 80% 10%,rgba(232,224,214,.28),transparent 60%)}
html .pc-cm-art span{position:relative}
html .pc-cm-body{flex:1;min-width:0;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
html .pc-cm-body h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
html .pc-cm-body h3 .pc-lock .ic{width:14px;height:14px;fill:none;stroke:var(--lx-muted);stroke-width:2}
html .pc-cm-body p{margin:0;color:var(--lx-muted);font-size:13.5px;line-height:1.55}
html .pc-cm-body .pc-go{margin-top:auto}
html .pc-cm.in-studio{margin:0 0 30px}
html .pc-cm.in-studio .pc-cm-art{flex-basis:340px;height:212px}
html .pc-cm.in-studio .pc-cm-body{max-width:560px}
html .pc-cm-art.photo{padding:0;background:#C9CACF;line-height:0;align-items:stretch}
html .pc-cm-art.photo::before{display:none}
html .pc-cm-art.photo img{width:100%;height:100%;object-fit:cover;display:block}
html .pc-two .pc-cm{min-height:190px}
html .pc-two{align-items:stretch}
@media (max-width:640px){html .pc-cm{flex-direction:column}html .pc-cm-art,html .pc-cm.in-studio .pc-cm-art{flex:none;height:auto;aspect-ratio:16/10;min-height:0}}

/* ------------------------------------ 4. the pages behind a card */
/* The Studio page and the Accelerator keep hub.js's markup (.lib-head,
   .libgrid, .libcard, .lib-go, .acc-*, .mf-*); this is their skin. */
html .lib-head:not(.pc-head){margin:22px 0 26px;padding:0}
html .lib-head:not(.pc-head) .lib-headin{padding:0}
html .lib-head:not(.pc-head) .lib-h1,html .app.library .lib-h1{font-family:var(--lx-font);font-weight:800;font-size:clamp(28px,4vw,42px);line-height:1.05;letter-spacing:-.04em;color:var(--lx-ink);text-transform:none}
html .lib-head:not(.pc-head) .lib-sub{margin:10px 0 0;color:var(--lx-muted);font-size:15px;max-width:60ch}
html .lib-back{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--edge);background:#fff;border-radius:999px;padding:7px 12px;margin:0 0 16px;font:600 12.5px/1 var(--lx-font);color:var(--lx-ink);cursor:pointer}
html .lib-back:hover{border-color:var(--lx-line-2)}
html .lib-sec{margin:34px 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lx-muted)}
html .lib-start{background:#fff;border:1px solid var(--edge);border-left:4px solid var(--lime);border-radius:var(--r-sm);padding:16px 20px;color:var(--lx-muted);font-size:14.5px}
html .libgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:stretch}
html .libcard,html .lb-panel{background:#fff;border:1px solid var(--edge);border-radius:var(--r);box-shadow:none;overflow:hidden}
html .libcard .lib-body h3{font-family:var(--lx-font);font-weight:800;letter-spacing:-.03em}
html .lib-go,html .lib-go.primary,html .cm-strip .lib-go{font-family:var(--lx-font);font-weight:700;border-radius:var(--r-sm);background:var(--lx-ink);color:#fff;border-color:var(--lx-ink)}
html .lib-go:hover,html .lib-go.primary:hover{background:#2A2A33;color:#fff;opacity:1}
html .lib-go.shut,html .lib-go.shut:hover{background:var(--edge-soft);color:var(--lx-muted);border-color:transparent}
html .lib-go:focus-visible{outline:2px solid var(--lx-ink)}
html .lib-prog .lp-track i,html .prog-fill{background:var(--lime);box-shadow:inset 0 0 0 1px rgba(24,24,27,.18)}
html .lib-prog .lp-track{background:#DEDEE2}
html .lib-all{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:20px 22px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* The Studio's piece cards are one photo set (a cinema camera monitor),
   shot 3:2; show the whole frame so the caption on the monitor reads. */
html .engpage .libcard .lib-art img{aspect-ratio:3/2;object-position:center}

/* The Accelerator (was styled by the string js/shell.js injected) */
html .mf-kicker,html .mf-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lx-muted);margin:0 0 12px}
html .mf-program{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;padding:30px;background:#fff;border:1px solid var(--edge);border-radius:var(--r);margin-bottom:22px}
html .mf-program h2{font-family:var(--lx-font);font-weight:800;font-size:clamp(26px,3vw,36px);line-height:1.05;letter-spacing:-.04em;margin:0 0 16px;color:var(--lx-ink)}
html .mf-program p,html .mf-intro p,html .mf-stages p,html .mf-help p,html .mf-resource-note p,html .mf-library-note{font-size:15px;line-height:1.7;color:var(--lx-muted);margin:0 0 16px}
html .mf-program aside{background:var(--paper);border:1px solid var(--edge);border-radius:var(--r-sm);padding:22px;align-self:center}
html .mf-program ol{padding-left:20px;margin:0;color:var(--lx-ink);font-size:14.5px;line-height:1.7}.mf-program li+li{margin-top:10px}
html .mf-program .lib-go{display:inline-flex;width:auto}
html .mf-help{display:flex;align-items:center;gap:26px;justify-content:space-between;border:1px solid var(--edge);border-radius:var(--r);padding:24px 26px;margin:22px 0 32px;background:#fff}
html .mf-help h2,html .mf-intro h2,html .mf-stages h2{font-family:var(--lx-font);font-weight:800;font-size:21px;line-height:1.25;letter-spacing:-.03em;margin:0 0 10px;color:var(--lx-ink)}
html .mf-help>div{max-width:620px}.mf-help .lib-go{flex-shrink:0;width:auto;display:inline-flex}.mf-help p:last-child{margin-bottom:0}
html .mf-library-note{max-width:720px;margin-bottom:22px}
html .mf-intro{max-width:800px;margin:26px 0}
html .mf-stages{display:grid;grid-template-columns:1fr;gap:18px;margin:28px 0}
html .mf-stages>section{padding:24px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
html .mf-number{display:block;color:var(--lx-muted);font-weight:800;font-size:32px;letter-spacing:-.04em;margin-bottom:12px}
html .mf-review-note{font-size:12.5px!important;line-height:1.65;color:var(--lx-muted)!important;padding:14px 16px;background:#fff;border:1px solid var(--edge);border-left:4px solid var(--lime);border-radius:var(--r-sm);margin:20px 0}
html .mf-small{font-size:13px!important}.mf-resource-note{padding:22px;background:#fff;border:1px solid var(--edge);border-radius:var(--r-sm);margin-bottom:24px}
html .acc-tabs{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;margin:4px 0 28px;border-bottom:1px solid var(--edge);padding-bottom:14px}
html .acc-tabs button{display:inline-flex;width:auto;font:600 13px/1 var(--lx-font);border:1px solid transparent;border-radius:999px;background:transparent;color:var(--lx-muted);padding:10px 14px;cursor:pointer}
html .acc-tabs button:hover{color:var(--lx-ink);background:var(--edge-soft)}
html .acc-tabs button[aria-pressed=true]{background:var(--lx-ink);color:#fff}
html .acc-tabs button:focus-visible{outline:2px solid var(--lx-ink);outline-offset:2px}
html .acc-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
html .acc-path{font:inherit;text-align:left;padding:22px;background:#fff;border:1px solid var(--edge);border-radius:var(--r);cursor:pointer;color:var(--lx-ink);display:flex;flex-direction:column;gap:10px}
html .acc-path strong{font-size:18px;font-weight:800;letter-spacing:-.025em;line-height:1.25}
html .acc-path span{font-size:14px;line-height:1.6;color:var(--lx-muted)}
html .acc-path:hover{border-color:var(--lx-line-2);box-shadow:0 18px 36px -28px rgba(24,24,27,.35)}
html .acc-coaches{display:grid;grid-template-columns:1fr 1fr;gap:18px}
html .acc-coaches section{padding:24px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
html .acc-coaches h2{font-family:var(--lx-font);font-weight:800;font-size:26px;letter-spacing:-.035em;margin:6px 0 10px}
html .acc-coaches p{font-size:14.5px;line-height:1.7;color:var(--lx-muted)}
html .acc-panel{padding-bottom:40px}
html .acc-panel .lib-desc{display:block;-webkit-line-clamp:unset}
@media (max-width:850px){.mf-program{grid-template-columns:1fr;padding:22px;gap:18px}.mf-help{align-items:start;flex-direction:column;padding:20px}.mf-help .lib-go{white-space:normal}.mf-stages>section{padding:20px}}
@media (max-width:650px){.acc-paths,.acc-coaches{grid-template-columns:1fr}.acc-tabs button{padding:9px 11px}}

/* ---------------------------------- 5. community strip, sign-in, fixes */
html .app.library .cm-strip{margin-top:40px;border-radius:var(--r);border-color:var(--edge)}
html .app.library .cm-strip h2{font-family:var(--lx-font);font-weight:800;letter-spacing:-.03em}

/* the sign-in screen: cream, espresso and soft organic color washes */
html .ta-gate{--g-lime:#E8E0D6;--g-ground:#F7F2E9;--g-edge:#E7D8CB;--g-deep:#563B2E;--g-ink:#563B2E;--g-muted:#705B50;background:radial-gradient(100% 90% at 0% 0%,rgba(232,224,214,.35),transparent 55%),radial-gradient(95% 80% at 100% 100%,rgba(203,231,227,.55),transparent 58%),var(--g-ground)}
html .ta-gate .ta-step input:focus{box-shadow:0 0 0 3.5px rgba(232,224,214,.55)}
html .ta-gate .ta-spin{border-top-color:#563B2E}
html .ta-bo-call.soon{border-color:#E8E0D6;box-shadow:0 0 0 2px rgba(232,224,214,.7)}
html .ta-bo-tag.live{background:#E8E0D6;color:#563B2E}
html .ta-bo-btn.key{background:#E8E0D6;color:#563B2E;border:1px solid #563B2E}

/* the "get the app" banner (js/help.js) */
html .lib .ta-appban{margin:18px 0 0;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:14px;color:var(--lx-ink);box-shadow:none}
html .lib .ta-appban .ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--lime);display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(24,24,27,.12)}
html .lib .ta-appban .ic svg{width:18px;height:18px}
html .lib .ta-appban .tx{flex:1;min-width:0;font-size:13.5px;color:var(--lx-muted);line-height:1.4}
html .lib .ta-appban .tx b{display:block;color:var(--lx-ink);font-weight:700;font-size:14.5px}
html .lib .ta-appban .go{flex:none;border:0;border-radius:var(--r-sm);background:var(--lx-ink);color:#fff;font:700 13px/1 var(--lx-font);padding:11px 16px;cursor:pointer}
html .lib .ta-appban .no{flex:none;border:0;background:none;color:var(--lx-muted);font-size:20px;cursor:pointer;padding:4px 8px}

/* classroom: the lesson list on the grey rail, the course cover square */
.app:not(.library) .rail{background:var(--rail)}
.app:not(.library) .item[aria-current="true"]{font-weight:600}


/* ---------------------------------------------------------------- the welcome (js/onboard.js) */
.ob{position:fixed;inset:0;z-index:70;background:var(--lx-paper,#F7F2E9);overflow:auto;display:flex;align-items:center;justify-content:center;padding:24px 16px;font-family:var(--lx-font,"Plus Jakarta Sans",system-ui,sans-serif);color:#563B2E}
body.ob-open{overflow:hidden}
.ob-card{width:100%;max-width:640px;background:#fff;border:1px solid #E5D4C7;border-radius:22px;padding:28px 32px 26px;box-shadow:0 30px 80px -40px rgba(24,24,27,.25);display:flex;flex-direction:column;gap:22px;min-height:420px}
.ob-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ob-top img{height:22px;width:auto;display:block}
.ob-top b{font-size:15px;letter-spacing:-.02em}
.ob-dots{display:flex;gap:6px}
.ob-dots i{width:22px;height:4px;border-radius:2px;background:#E5D4C7;display:block}
.ob-dots i.done{background:#563B2E}.ob-dots i.on{background:#E8E0D6;outline:1px solid #563B2E}
.ob-body{display:flex;flex-direction:column;gap:14px;flex:1}
.ob-eyebrow{margin:0;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A7266}
.ob-body h1{margin:0;font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.035em}
.ob-sub{margin:0;color:#705B50;font-size:15px;line-height:1.55}
.ob-why{margin:4px 0 0;color:#705B50;font-size:13.5px;line-height:1.6;padding:12px 14px;background:#F7F2E9;border-radius:12px;border-left:3px solid #E8E0D6}
.ob-input{width:100%;box-sizing:border-box;font:inherit;font-size:20px;font-weight:600;padding:14px 16px;border:1.5px solid #D8C6B8;border-radius:14px;background:#fff;color:#563B2E;outline:none;letter-spacing:-.01em}
.ob-input:focus{border-color:#563B2E;box-shadow:0 0 0 4px #E8E0D6}
.ob-input.small{font-size:15px;font-weight:500;padding:11px 14px;margin-top:4px}
.ob-input.area{font-size:15px;font-weight:500;line-height:1.5;resize:vertical;min-height:96px}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px}
.ob-chip{font:inherit;font-size:14px;font-weight:600;padding:10px 14px;border-radius:999px;border:1.5px solid #D8C6B8;background:#fff;color:#563B2E;cursor:pointer;display:inline-flex;width:auto;line-height:1.2}
.ob-chip:hover{border-color:#563B2E}
.ob-chip.on{background:#E8E0D6;border-color:#563B2E}
.ob-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.ob-right{display:inline-flex;align-items:center;gap:14px}
.ob-foot .pc-go{display:inline-flex;width:auto;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:700;padding:12px 18px;border-radius:12px;border:none;background:#563B2E;color:#fff;cursor:pointer}
.ob-foot .pc-go[disabled]{opacity:.35;cursor:default}
.ob-back,.ob-skip{font:inherit;font-size:14px;font-weight:600;background:none;border:none;color:#705B50;cursor:pointer;padding:8px 4px;display:inline-flex;width:auto}
.ob-back:hover,.ob-skip:hover{color:#563B2E}
@media (max-width:640px){.ob{padding:0;align-items:stretch}.ob-card{border-radius:0;border:none;max-width:none;min-height:100%;padding:22px 20px calc(22px + env(safe-area-inset-bottom))}.ob-body h1{font-size:26px}}

/* ---------------------------------------------------------------- the Studio as one classroom (js/studio.js) */
/* the rail: dashboard link, locked sections and lessons */
.st-dash{display:flex;align-items:center;gap:11px;width:calc(100% - 24px);margin:0 12px 10px;padding:9px 10px;border:none;background:none;border-radius:8px;font:inherit;font-size:14.5px;font-weight:700;color:var(--ink,#563B2E);cursor:pointer;text-align:left}
.st-dash:hover{background:#EFE4DB}
.st-dash.on{background:var(--pill,#E8E0D6)}
.st-dash-ic{width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center}
.st-dash-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.item .lk,.stephead .lk,.st-row .lk{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-1px}
.item.locked{color:#9D887C}
.item.locked .mk{color:#9D887C;padding-top:1px}
.item.soon .lt::after{content:"soon";margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9D887C;background:#EFE4DB;border-radius:999px;padding:2px 7px;vertical-align:1px}
.step.locked .steptitle{color:#9D887C}
.step.locked .stephead .stepcount{color:#9D887C;display:inline-flex;align-items:center}
.step.locked .stepnum{border-color:#D8C6B8;color:#BBA89D}
/* the pages */
.st{--st-ink:#563B2E;--st-muted:#705B50;--st-edge:#E5D4C7;--st-lime:#E8E0D6;font-family:var(--lx-font,"Plus Jakarta Sans",system-ui,sans-serif);color:var(--st-ink)}
article#pane:has(.st){max-width:1060px}
.st-eyebrow{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--st-muted)}
.st h1{margin:0;font-size:clamp(30px,4vw,44px);line-height:1.02;letter-spacing:-.04em;font-weight:800}
.st h2{margin:0;font-size:22px;letter-spacing:-.03em;font-weight:800}
.st-band{display:flex;align-items:stretch;gap:0;background:#563B2E;color:#fff;border-radius:20px;overflow:hidden;margin:0 0 34px;min-height:260px}
.st-band .st-eyebrow{color:rgba(255,255,255,.6)}
.st-band-txt{flex:1 1 55%;padding:34px 36px;display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.st-next{margin:0;color:rgba(255,255,255,.75);font-size:15px}
.st-next b{color:#fff;font-weight:700}
.st-band-art{flex:0 0 42%;position:relative;min-height:220px}
.st-band-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.st-band-art::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#563B2E 0,rgba(24,24,27,0) 30%);z-index:1}
.st-cta{display:inline-flex;width:auto;align-self:flex-start;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:800;padding:13px 20px;border-radius:12px;border:none;background:var(--st-lime);color:#563B2E;cursor:pointer;text-decoration:none;margin-top:4px}
.st-cta:hover{background:#DCD1C4}
.st-quiet{font:inherit;font-size:14px;font-weight:600;background:none;border:none;color:var(--st-muted);cursor:pointer;padding:8px 4px;display:inline-flex;width:auto}
.st-quiet:hover{color:var(--st-ink)}
.st-sec{margin:0 0 34px}
.st-sec-head{display:flex;align-items:center;gap:14px;margin:0 0 14px;flex-wrap:wrap}
html article .st h2{margin-top:0}
.st-prog{flex:1 1 120px;max-width:220px;height:6px;border-radius:3px;background:#E5D4C7;overflow:hidden;margin-left:auto}
.st-prog i{display:block;height:100%;background:#563B2E}
.st-prog-txt{font-size:12.5px;color:var(--st-muted);font-variant-numeric:tabular-nums}
.st-rows{display:flex;flex-direction:column;gap:8px}
.st-row{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:#fff;border:1px solid var(--st-edge);border-radius:14px;padding:10px 16px 10px 10px;font:inherit;color:var(--st-ink);cursor:pointer}
.st-row:hover{border-color:#563B2E}
.st-row img{width:96px;height:64px;object-fit:cover;border-radius:9px;flex:0 0 auto;background:#E5D4C7}
.st-row-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.st-row-txt b{font-size:15.5px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:7px}
.st-row-txt span{font-size:13px;color:var(--st-muted);line-height:1.45;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.st-row-st{font-size:12.5px;font-weight:700;color:var(--st-muted);white-space:nowrap}
.st-row.locked img{filter:grayscale(.4);opacity:.75}
.st-row.locked .st-row-st{color:#9D887C}
.st-row-go{font-size:16px;color:var(--st-muted)}
.st-note{background:#fff;border:1px solid var(--st-edge);border-radius:18px;padding:26px 28px;margin:0 0 34px}
.st-note h2{margin:0 0 12px;font-size:24px}
.st-note p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--st-muted)}
.st-note p:last-child{margin:0}
.st-note p b{color:var(--st-ink)}
.st .lib-sec{margin:0 0 12px}
/* locked and coming-soon pages */
.st-lock-art{border-radius:18px;overflow:hidden;aspect-ratio:16/9;max-height:360px;margin:0 0 24px;background:#E5D4C7}
.st-lock-art img{width:100%;height:100%;object-fit:cover;display:block}
.st-lead{margin:14px 0 0;font-size:17px;line-height:1.55;color:var(--st-muted);max-width:640px}
.st-sub{margin:28px 0 10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--st-muted)}
.st-parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.st-parts li{background:#fff;border:1px solid var(--st-edge);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.st-parts li b{font-size:13.5px;font-weight:800}
.st-parts li span{font-size:13px;color:var(--st-muted);line-height:1.45}
.st-actions{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}
.st-soon .st-lead{max-width:560px}
.st-fine{margin:18px 0 0;font-size:13px;color:var(--st-muted);line-height:1.5}
.st-price{font-size:15px;font-weight:700;color:var(--st-muted);margin-left:8px;letter-spacing:0}
.st-bundle{display:flex;align-items:center;gap:20px;margin:12px 0 0;padding:20px 24px;border-radius:16px;background:#563B2E;color:#fff;flex-wrap:wrap}
.st-bundle .st-eyebrow{color:rgba(255,255,255,.6);margin:0 0 6px}
.st-bundle-txt{flex:1 1 320px;min-width:0}
.st-bundle h2{color:#fff}
.st-bundle p{margin:6px 0 0;font-size:14px;color:rgba(255,255,255,.75);line-height:1.5}
.st-bundle .st-price{color:rgba(255,255,255,.7)}
.st-bundle .st-cta[aria-disabled]{opacity:.55;cursor:default}
.st-actions .st-quiet[href]{text-decoration:none}
/* The Studio's lesson pages (Katie, 15 Oct 2026: "everything is in a narrow
   column, the fonts are super big"). A wider measure and a calmer scale,
   all still Plus Jakarta Sans. Scoped to body.studio so the other courses
   keep their look. */
html body.studio article{max-width:860px;--bleed:0px;padding:clamp(30px,4vw,48px) clamp(22px,4vw,44px) 90px}
@media(min-width:1180px){html body.studio article{max-width:900px;--bleed:24px}}
@media(min-width:1440px){html body.studio article{max-width:940px;--bleed:40px}}
html body.studio{font-size:16px;line-height:1.65}
html body.studio article h1{font-size:clamp(28px,3.3vw,38px);line-height:1.12;letter-spacing:-.025em;margin:0 0 18px}
html body.studio article h2{font-size:clamp(19px,2.2vw,23px);margin:38px 0 12px}
html body.studio article h3{font-size:17px;margin:26px 0 8px}
html body.studio .intro{font-size:17px;line-height:1.6;color:var(--muted)}
html body.studio article > p,html body.studio article li{font-size:16px;line-height:1.65}
html body.studio ol.rec li{font-size:16px;line-height:1.6;padding-left:32px}
html body.studio ol.rec li::before{font-size:16px;top:1px;font-weight:700}
html body.studio .tip p{font-size:15.5px}
html body.studio .script{margin-bottom:14px}
html body.studio .st h1{font-size:clamp(30px,4vw,44px)}
html body.studio .st .st-lead{font-size:16.5px}
/* the map page (How the Studio works) */
.st-guide h2{margin:40px 0 14px}
.st-guide ol.rec{margin:14px 0 18px}
.st-guide > p{margin:0 0 14px;font-size:16px;line-height:1.65}
.st-band-acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.st-quiet.light{color:rgba(255,255,255,.7)}.st-quiet.light:hover{color:#fff}
.gm{margin:26px 0 10px}
.gm-top{display:flex;justify-content:center}
.gm-top .gm-node{max-width:420px;background:#563B2E;color:#fff;border-color:#563B2E}
.gm-top .gm-node .gm-makes,.gm-top .gm-node .gm-job{color:rgba(255,255,255,.72)}
.gm-top .gm-node .gm-n{background:var(--st-lime);color:#563B2E}
.gm-arrow{display:flex;justify-content:space-around;height:34px;margin:4px 8% 4px;position:relative}
.gm-arrow::before{content:"";position:absolute;left:10%;right:10%;top:0;height:16px;border:1.5px solid #CFCFD4;border-bottom:0;border-radius:14px 14px 0 0}
.gm-arrow span{width:1.5px;height:34px;background:#CFCFD4;position:relative}
.gm-arrow span::after{content:"";position:absolute;left:-4px;bottom:-1px;border:5px solid transparent;border-top:6px solid #CFCFD4}
.gm-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.gm-node{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--st-edge);border-top:5px solid var(--c);border-radius:14px;padding:14px 14px 15px;text-align:left}
.gm-node b{font-size:14.5px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:6px;margin-top:4px}
.gm-node .lk{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gm-node.locked{opacity:.72}
.gm-n{width:24px;height:24px;border-radius:50%;background:var(--c);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#563B2E;flex:none}
.gm-makes{font-size:12.5px;color:var(--st-ink);line-height:1.35}
.gm-job{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--st-muted);margin-top:4px}
.gm-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.gm-item{background:#fff;border:1px solid var(--st-edge);border-radius:16px;padding:18px 20px 20px;border-top:5px solid var(--c)}
.gm-item-head{display:flex;gap:12px;align-items:flex-start;margin:0 0 10px}
.gm-item h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em}
.gm-item .gm-makes{margin:2px 0 0;font-size:12.5px;color:var(--st-muted)}
.gm-item p{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--st-ink)}
.gm-item p:last-child{margin:0}
.gm-why{color:var(--st-muted)}
.gm-table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 8px}
.gm-table th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--st-muted);padding:0 12px 10px 0;border-bottom:1px solid var(--st-edge)}
.gm-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--st-edge);vertical-align:top;line-height:1.5}
.gm-table td:nth-child(2){font-weight:800;white-space:nowrap}
.gm-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 12px}
.gm-week div{background:#fff;border:1px solid var(--st-edge);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px}
.gm-week b{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--st-muted)}
.gm-week span{font-size:13.5px;line-height:1.5}
@media (max-width:900px){.gm-row,.gm-week{grid-template-columns:repeat(2,minmax(0,1fr))}.gm-arrow{display:none}}
/* the accounts page */
.st-accounts h2 .gm-n{margin-right:10px;vertical-align:2px}
.ac-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start;margin:0 0 10px}
.ac-shots{display:flex;flex-direction:column;gap:12px}
.ac-shot{margin:0;border:1px solid var(--st-edge);border-radius:12px;overflow:hidden;background:#fff}
.ac-shot img{display:block;width:100%;height:auto}
.ac-shot.small{max-width:300px}
.st-accounts ul{margin:0 0 14px;padding-left:20px}.st-accounts ul li{margin:0 0 8px;font-size:16px;line-height:1.6}
.st-accounts code{font-size:14px;background:#F7F2E9;padding:2px 6px;border-radius:6px}
@media (max-width:900px){.ac-grid{grid-template-columns:1fr}}
/* no top bar in the Studio look on a desktop; the phone keeps its Lessons toggle */
@media (min-width:900px){ html body.studio .topbar{display:none} }
@media (max-width:899px){ html body.studio .topbar .brand,html body.studio .topbar .links{display:none} }
/* story pack pages */
html body.studio .sp-len{margin:-6px 0 18px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html body.studio .sp-ref{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:16px 20px;margin:0 0 8px}
html body.studio .sp-ref p{margin:0 0 6px;font-size:15.5px}
html body.studio .beat{font-style:italic;color:var(--muted)}
html body.studio .sp-line{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin:0 0 8px;background:var(--st-lime,#E8E0D6);display:inline-block;padding:10px 16px;border-radius:12px}
html body.studio .sp-note{font-size:14px;color:var(--muted);margin:0 0 6px}
/* the Gut Punch scoreboard */
.gp{margin:18px 0 26px;padding:16px 18px;border:1px solid var(--st-edge,#E5D4C7);border-radius:14px;background:#fff}
.gp .st-eyebrow{margin-bottom:10px}
.gp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gp-btn{font:inherit;font-size:13.5px;font-weight:800;padding:9px 14px;border-radius:999px;border:1px solid #563B2E;background:#fff;color:#563B2E;cursor:pointer}
.gp-btn.on{background:#563B2E;color:#fff}
.gp-btn.fire.on{background:#E8E0D6;color:#563B2E;border-color:#E8E0D6}
.gp-btn[disabled]{opacity:.4;cursor:default}
.gp-views{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--st-muted,#6B6B74);margin-left:auto}
.gp-views input{width:96px;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--st-edge,#E5D4C7);border-radius:10px}
.gp-note{margin:10px 0 0;font-size:13.5px;color:var(--st-muted,#6B6B74)}
.gp-board{margin:14px 0 30px;padding:18px 20px;border-radius:16px;background:#563B2E;color:#fff}
.gp-board .st-eyebrow{color:rgba(255,255,255,.6);margin-bottom:12px}
.gp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
.gp-stats div{display:flex;flex-direction:column;gap:2px}
.gp-stats b{font-size:28px;font-weight:800;letter-spacing:-.03em;color:#E8E0D6}
.gp-stats span{font-size:12.5px;color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.gp-chip{font:inherit;font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.gp-chip.fire{background:#E8E0D6;color:#563B2E;border-color:#E8E0D6}
.gp-chip i{font-style:normal;opacity:.7;margin-left:4px}
.gp-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.8)}
.gp-board .gp-note{color:rgba(255,255,255,.75)}
.gp-board .st-cta.small{align-self:auto;background:#E8E0D6;color:#563B2E}
@media (max-width:560px){.gp-stats{grid-template-columns:1fr 1fr}}
/* the Studio rail header: text, not a picture */
html .wordmark.text{display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;line-height:1.1;margin:4px 0 14px}
html .wordmark.text .rail-back{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html .wordmark.text:hover .rail-back{color:var(--ink)}
html .wordmark.text .rail-title{font-family:var(--f-display);font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.steplist.flat a.item.ext{text-decoration:none;color:var(--ink);display:block}
.steplist.flat a.item.ext:hover{color:var(--accent)}
.st-railtop{display:flex;flex-direction:column;gap:4px}
a.st-dash.st-tg,a.st-dash.st-ext{text-decoration:none;color:var(--ink)}
.st-dash.st-ext{margin-bottom:0}
.st-dash .st-dash-ic svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.st-dash.st-tg.shut{opacity:.55;cursor:default}
/* the Studio rail: plain headings, every lesson showing */
.railsep.flat{margin:22px 14px 6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--st-ink,#563B2E)}
.railsep.flat.locked{color:var(--muted)}
.steplist.flat{padding:0 0 2px}
/* the Studio dashboard, v2 (15 Oct 2026): band, strip, two columns */
.st-v2 .st-band{margin-bottom:0;border-radius:20px 20px 0 0}
.st-strip{overflow:hidden;background:var(--st-lime);border-radius:0 0 20px 20px;margin:0 0 34px;padding:11px 0;white-space:nowrap;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#563B2E}
.st-strip-in{display:inline-block;animation:st-marquee 38s linear infinite}
.st-strip-in span{padding:0 22px}.st-strip-in i{font-style:normal;opacity:.5}
@keyframes st-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.st-strip-in{animation:none}}
.st-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.st-main{min-width:0}.st-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}
.st-side .st-note{margin:0;padding:22px 24px}.st-side .st-note h2{font-size:20px}.st-side .st-note p{font-size:14px}
.st-mini{background:#fff;border:1px solid var(--st-edge);border-radius:16px;padding:18px 20px}
.st-mini h3{margin:0 0 6px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.st-mini p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--st-muted)}
.st-mini .st-quiet{padding:0}
.st-mini.help{background:#FAFAF7}
.st-mini.accts{display:flex;flex-direction:column;gap:8px}
.st-acct{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--st-edge);border-radius:12px;text-decoration:none;color:var(--st-ink);background:#fff}
.st-acct:hover{border-color:#563B2E}
.st-acct img{width:28px;height:28px;border-radius:7px;flex:none}
.st-acct span{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.st-acct b{font-size:14px;font-weight:800;letter-spacing:-.01em}
.st-acct small{font-size:12px;color:var(--st-muted)}
.st-acct i{font-style:normal;color:var(--st-muted)}
.st-mini.accts .st-quiet{margin-top:2px}
.st-cta.small{font-size:13px;padding:10px 15px;text-decoration:none}
.st-cta[aria-disabled]{opacity:.5;cursor:default}
.st-sec-sub{font-size:13px;color:var(--st-muted);margin-left:auto;align-self:center}
.st-tile{flex:0 0 auto;width:52px;height:52px;border-radius:13px;background:#563B2E;color:var(--st-lime);display:inline-flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;letter-spacing:-.03em}
.st-tile.done{background:var(--st-lime);color:#563B2E}
.st-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.st-card{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--st-edge);border-radius:16px;overflow:hidden;padding:0;font:inherit;color:var(--st-ink);cursor:pointer}
.st-card:hover{border-color:#563B2E}
.st-card-art{position:relative;display:block;aspect-ratio:16/9;background:#E5D4C7}
.st-card-art img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.25)}
.st-pill{position:absolute;left:12px;top:12px;background:#563B2E;color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.st-card-body{display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px}
.st-card-body b{font-size:15.5px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:7px}
.st-card-body span{font-size:13px;color:var(--st-muted);line-height:1.45}
.st-card-body em{font-style:normal;font-size:13px;font-weight:800;margin-top:6px}
.st-card .lk{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.st-bundle{margin-top:12px}
/* Studio hierarchy: two flagship products, one shared setup, one upgrade. */
.st-main-products{margin-bottom:16px}
.st-main-products .st-sec-head{align-items:flex-end}
.st-main-products .st-sec-head h2{margin:2px 0 0;font-size:clamp(24px,3vw,34px);letter-spacing:-.045em}
.st-main-products .st-eyebrow{margin:0;color:#8D8179}
.st-section-intro{max-width:620px;margin:8px 0 20px;color:#675F59;font-size:14px;line-height:1.55}
.st-progress-wrap{display:flex;align-items:center;gap:9px;margin-left:auto}
.st-progress-wrap .st-prog{width:90px}
.st-flags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.st-flag{position:relative;display:flex;min-height:290px;flex-direction:column;justify-content:space-between;overflow:hidden;border:2px solid #292522;border-radius:22px;padding:22px;text-align:left;font:inherit;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.st-flag:hover{transform:translateY(-2px);box-shadow:6px 6px 0 #292522}
.st-flag.dark{background:#292522;color:#fff}
.st-flag.light{background:#F3F1EF;color:#292522}
.st-flag.light::after{content:"";position:absolute;right:-36px;bottom:-44px;width:150px;height:150px;border:24px solid rgba(103,89,79,.12);border-radius:50%}
.st-flag-top,.st-flag-copy,.st-flag-go{position:relative;z-index:1}
.st-flag-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.st-flag-kicker{font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;opacity:.62}
.st-flag-state{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.st-flag-state .lk{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.st-flag-copy{display:flex;flex-direction:column;gap:7px;margin:42px 0 26px}
.st-flag-copy b{font-size:clamp(29px,4vw,44px);line-height:.95;letter-spacing:-.06em}
.st-flag-copy>span{max-width:300px;font-size:15px;line-height:1.45;opacity:.82}
.st-flag-copy small{margin-top:7px;font-size:12px;font-weight:750;opacity:.62}
.st-flag-go{font-size:13px;font-weight:900;letter-spacing:-.01em}
.st-flag.locked{border-style:dashed}
.st-flag.locked .st-flag-copy,.st-flag.locked .st-flag-go{opacity:.72}
.st-shared{display:flex;align-items:center;gap:16px;margin:0 0 26px;padding:16px 18px;border:1.5px solid #D8D3CE;border-radius:16px;background:#fff}
.st-shared-num{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:#DDD8D4;color:#292522;font-size:12px;font-weight:900}
.st-shared-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.st-shared-copy .st-eyebrow{margin:0;color:#8D8179}
.st-shared-copy b{font-size:16px;color:#292522}
.st-shared-copy small{color:#675F59;font-size:12.5px;line-height:1.4}
.st-shared-go{flex:none;border:0;border-radius:999px;background:#292522;color:#fff;padding:11px 15px;font:800 12.5px/1 var(--lx-font);cursor:pointer}
.st-full{position:relative;overflow:hidden;margin:0 0 28px;padding:26px;border:2px solid #292522;border-radius:22px;background:#E7E3DF;color:#292522;box-shadow:6px 6px 0 #292522}
.st-full::before{content:"";position:absolute;right:-70px;top:-88px;width:210px;height:210px;border:2px solid rgba(41,37,34,.16);border-radius:50%;box-shadow:0 0 0 22px rgba(255,255,255,.22),0 0 0 44px rgba(41,37,34,.05)}
.st-full-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}
.st-full-head>div{max-width:560px}
.st-full-head .st-eyebrow{margin:0 0 7px;color:#67594F}
.st-full-head h2{margin:0 0 8px;font-size:clamp(27px,3.5vw,39px);letter-spacing:-.05em}
.st-full-head p{margin:0;color:#5F5751;font-size:14px;line-height:1.5}
.st-full-head .st-cta{flex:none;background:#292522;color:#fff;white-space:nowrap}
.st-full-unlocked{flex:none;border:1.5px solid #292522;border-radius:999px;padding:10px 14px;background:#fff;font-size:12px;font-weight:900}
.st-full-tools{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.st-full-tool{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name state" "line state";gap:2px 12px;align-items:center;border:1.5px solid rgba(41,37,34,.24);border-radius:13px;padding:13px 14px;background:rgba(255,255,255,.72);color:#292522;text-align:left;font:inherit;cursor:pointer}
.st-full-tool:hover{border-color:#292522;background:#fff}
.st-full-tool>span{grid-area:name;font-size:14px;font-weight:850}
.st-full-tool>small{grid-area:line;color:#726861;font-size:11.5px}
.st-full-tool>i{grid-area:state;display:flex;align-items:center;gap:4px;font-style:normal;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.st-full-tool>i .lk{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.st-full-tool.locked{opacity:.66}
.st-full-note{position:relative;z-index:1;margin:14px 0 0;font-size:12px;font-weight:750;color:#675F59}
@media (max-width:980px){.st-cols{grid-template-columns:1fr}.st-side{position:static}}
@media (max-width:700px){.st-flags,.st-full-tools{grid-template-columns:1fr}.st-full-head{flex-direction:column}.st-shared{align-items:flex-start;flex-wrap:wrap}.st-shared-go{margin-left:60px}.st-progress-wrap{display:none}}
@media (max-width:560px){.st-cards{grid-template-columns:1fr}.st-flag{min-height:250px}.st-full{padding:21px}.st-shared-go{margin-left:0;width:100%}}
@media (max-width:760px){.st-band{flex-direction:column-reverse}.st-band-art{flex:none;height:170px}.st-band-art::before{background:linear-gradient(0deg,#563B2E 0,rgba(24,24,27,0) 40%);inset:auto 0 0 0;height:60px}.st-band-txt{padding:22px 22px 26px}.st-row{flex-wrap:wrap}.st-row img{width:72px;height:48px}.st-row-st{display:none}}

/* ---------------------------------------------------------------- sidebar: groups, locks, the Studio drop-down */
.fw-sep{margin:14px 12px 4px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lx-faint,#A38E82)}
.fw-item.lock{color:var(--lx-faint,#A38E82)}
.fw-lock,.fw-chev{margin-left:auto;display:inline-flex;flex:none;color:var(--lx-faint,#A38E82)}
.fw-lock svg,.fw-chev svg{width:15px;height:15px}
.fw-item.on .fw-lock,.fw-item.on .fw-chev{margin-left:8px}
.fw-item.on::after{margin-left:auto}
.fw-item.on.parent::after,.fw-item.on.lock::after{order:-1;margin:0 0 0 auto}
.fw-chev{padding:2px;border-radius:6px}
.fw-chev:hover{background:var(--edge-soft,#F7F2E9);color:var(--lx-ink)}
.fw-item[aria-expanded="true"] .fw-chev svg{transform:rotate(180deg)}
.fw-kids{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 20px;padding-left:12px;border-left:1px solid var(--edge,#E5D4C7)}
.fw-kid{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;border:none;background:none;border-radius:8px;padding:8px 10px;font:600 13.5px/1.25 var(--lx-font);color:var(--lx-muted);text-align:left;cursor:pointer}
.fw-kid:hover{background:var(--edge-soft,#F7F2E9);color:var(--lx-ink)}
.fw-kid.lock{color:var(--lx-faint,#A38E82)}
.fw-kid .fw-lock svg{width:13px;height:13px}
.fw-item span:last-of-type{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-item{padding:11px 12px;font-size:14px}
.fw-item span:last-of-type{white-space:normal;line-height:1.2}
.fw-item .fw-lock,.fw-item .fw-chev{flex:none}

/* Approved espresso + cream outlined Futureworks wordmark. */
.fw-logo{overflow:hidden;min-height:55px}
.fw-logo{min-height:48px;padding-top:6px;padding-bottom:18px}
.fw-logo img{width:198px;height:auto;margin:0;max-width:100%}
.ta-gate-logo{width:255px;max-width:100%;height:auto;margin:0 0 8px}
.ob-top img{width:198px;height:auto;margin:0}
html body .topbar .brand.has-logo.fw img{width:190px;height:auto;margin:0}
/* "Say to Claude:" lines in plain-language lessons */
html .sp-say{background:#E8E0D6;border:1px solid rgba(24,24,27,.10);border-radius:12px;padding:12px 16px;margin:10px 0 16px;font-size:15px;line-height:1.5;color:#563B2E}
html .sp-say b{font-weight:700}
/* Work with Katie (Welcome + Courses) */
html .wk{margin-top:36px}
html .wk-grid{display:grid;grid-template-columns:1fr;gap:18px}
html .wk-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--edge,#E7D8CB);border-radius:18px;overflow:hidden;color:#563B2E;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
html .wk-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(24,24,27,.10)}
html .wk-art{aspect-ratio:16/8;overflow:hidden;background:#eee}
html .wk-art img{width:100%;height:100%;object-fit:cover;display:block}
html .wk-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
html .wk-eye{margin:0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8A7266}
html .wk-body h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.03em}
html .wk-body p:not(.wk-eye){margin:0;font-size:14.5px;line-height:1.55;color:#705B50}
html .wk-go{margin-top:auto;padding-top:14px;align-self:flex-start;font-size:13.5px;font-weight:700;background:#E8E0D6;color:#563B2E;padding:11px 18px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(24,24,27,.12)}
html .wk-body .wk-go{margin-top:14px}
@media (max-width:760px){html .wk-grid{grid-template-columns:1fr}}
/* Skill download card: Claude + ChatGPT (16 Oct 2026) */
html .sk-card{margin:18px 0 22px;padding:22px;border-radius:20px;background:linear-gradient(135deg,#F7F4EF 0%,#FFFFFF 55%,#F7F2E9 100%);border:1px solid rgba(24,24,27,.10);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 30px rgba(24,24,27,.06);font-family:var(--lx-font,"Plus Jakarta Sans",system-ui,sans-serif)}
html .sk-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
html .sk-ic{flex:none;width:44px;height:44px;border-radius:14px;background:#563B2E;color:#E8E0D6;display:inline-flex;align-items:center;justify-content:center;font-size:20px}
html .sk-eye{margin:2px 0 2px!important;font-size:11px!important;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8A7266!important}
html .sk-card h3{margin:0!important;font-size:21px;font-weight:800;letter-spacing:-.03em;color:#563B2E}
html .sk-sub{margin:4px 0 0!important;font-size:14px!important;color:#705B50!important}
html .sk-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
html .sk-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid rgba(24,24,27,.12);color:#563B2E!important;text-decoration:none!important;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
html .sk-opt:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(24,24,27,.08);border-color:rgba(24,24,27,.28)}
html .sk-opt.claude{background:#E8E0D6;border-color:rgba(24,24,27,.16)}
html .sk-opt img{flex:none;width:28px;height:28px;border-radius:8px}
html .sk-txt{display:flex;flex-direction:column;min-width:0;flex:1}
html .sk-txt b{font-size:15px;font-weight:800;letter-spacing:-.01em}
html .sk-txt small{font-size:12px;color:#705B50;line-height:1.35;margin-top:2px}
html .sk-dl{flex:none;width:30px;height:30px;border-radius:50%;background:#563B2E;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
html .sk-fine{margin:14px 0 0!important;font-size:12.5px!important;line-height:1.5;color:#8A7266!important}
@media (max-width:640px){html .sk-opts{grid-template-columns:1fr}}
html .sk-opts.one{grid-template-columns:1fr;max-width:420px}
html .sk-card h3{border:0!important;padding:0!important}html .sk-head > div{min-width:0}
/* setup times beside each lesson and on each rail heading (16 Oct 2026) */
html #nav .item .rt.tm{font-size:11px;font-weight:600;color:#8A7266;background:#F7F2E9;border-radius:999px;padding:2px 8px;margin-left:auto;flex:0 0 auto}
html #nav .item[aria-current="true"] .rt.tm{background:#fff;color:#563B2E}
html .railsep.flat{display:flex;align-items:center;justify-content:space-between;gap:8px}
html .railsep.flat .sec-tm{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:none;color:#8A7266}
/* Story Packs subsections, one open at a time (16 Oct 2026) */
html #nav .spgrp{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:9px 10px 9px 14px;margin:2px 0;border-radius:10px;font:700 13.5px/1.3 var(--lx-font,"Plus Jakarta Sans",system-ui,sans-serif);color:#563B2E}
html #nav .spgrp:hover{background:rgba(24,24,27,.05)}
html #nav .spgrp.open{background:#fff;box-shadow:inset 0 0 0 1px rgba(24,24,27,.08)}
html #nav .spgrp-car{flex:none;width:12px;font-size:11px;color:#8A7266;transition:transform .15s ease}
html #nav .spgrp.open .spgrp-car{transform:rotate(90deg)}
html #nav .spgrp-t{flex:1;min-width:0}
html #nav .spgrp-n{flex:none;font-size:11px;font-weight:600;color:#8A7266;background:#F7F2E9;border-radius:999px;padding:2px 8px}
html #nav .spgrp-list{margin:0 0 6px 14px;padding-left:6px;border-left:2px solid #E8E0D6}
/* copy box (Project instructions) */
html .cp-box{margin:14px 0 10px;border:1px solid rgba(24,24,27,.14);border-radius:14px;overflow:hidden;background:#fff}
html .cp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;background:#E8E0D6;border-bottom:1px solid rgba(24,24,27,.10);font-size:14px}
html .cp-btn{border:0;cursor:pointer;background:#563B2E;color:#fff;font:700 13px/1 var(--lx-font,"Plus Jakarta Sans",system-ui,sans-serif);padding:10px 16px;border-radius:10px}
html .cp-btn.ok{background:#16a34a}
html .cp-text{margin:0;padding:16px;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#27272A;background:#fff}
/* example photo galleries in lessons */
html .ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 6px}
html .ex{margin:0;background:#fff;border:1px solid rgba(24,24,27,.10);border-radius:12px;overflow:hidden}
html .ex img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 25%;background:#F7F2E9}
html .ex figcaption{font-size:12px;line-height:1.4;color:#705B50;padding:8px 10px}
html .ex-grid:has(.ex:only-child){grid-template-columns:1fr;max-width:620px}
html .ex:only-child img{aspect-ratio:auto;object-fit:contain}
html .ex-grid{grid-template-columns:repeat(auto-fit,minmax(150px,240px))}
html .ex img[src*="kitchen"],html .ex img[src*="living-room"],html .ex img[src*="bathroom"],html .ex img[src*="item-car"]{aspect-ratio:4/3;object-position:center}
/* interactive checklist */
html .ck-list{background:#fff;border:1px solid rgba(24,24,27,.12);border-radius:16px;padding:16px 18px;margin:12px 0 18px}
html .ck-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
html .ck-count{font-size:13px;color:#705B50;white-space:nowrap}
html .ck-bar{flex:1;height:8px;border-radius:99px;background:#F7F2E9;overflow:hidden}
html .ck-bar i{display:block;height:100%;background:#D9F99D;border-radius:99px;transition:width .2s}
html .ck-list.all .ck-bar i{background:#86efac}
html .ck-group{margin:14px 0 4px!important;font-size:11.5px!important;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8A7266!important}
html .ck{display:flex;gap:12px;align-items:flex-start;padding:9px 6px;border-radius:10px;cursor:pointer;font-size:15px;line-height:1.45}
html .ck:hover{background:#FAFAFA}
html .ck input{position:absolute;opacity:0;width:0;height:0}
html .ck-box{flex:none;width:20px;height:20px;margin-top:1px;border:2px solid #A38E82;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:#fff}
html .ck.on .ck-box{background:#563B2E;border-color:#563B2E}
html .ck.on .ck-box::after{content:"";width:6px;height:10px;border:solid #E8E0D6;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
html .ck.on .ck-txt{color:#8A7266;text-decoration:line-through;text-decoration-color:rgba(24,24,27,.25)}
html .ck input:focus-visible + .ck-box{outline:2px solid #563B2E;outline-offset:2px}
html .ex-jump{border:0;cursor:pointer;background:#563B2E;color:#fff;font:700 14px/1 var(--lx-font,"Plus Jakarta Sans",system-ui,sans-serif);padding:12px 18px;border-radius:12px}
html .ex-jump:hover{background:#27272A}
html #katie-examples{scroll-margin-top:24px}
html #katie-face-examples{scroll-margin-top:24px}
html .st-costs .gm-table td:last-child:empty{display:none}
html .st-costs .st-big{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.3;background:#E8E0D6;padding:14px 18px;border-radius:14px;margin:18px 0}
html .st-costs .callout{margin:10px 0 18px}
/* tool taglines beside headings */
html .railsep.flat{flex-wrap:wrap}
html .railsep.flat{justify-content:flex-start}
html .railsep.flat .sec-tm{margin-left:auto}
html .railsep.flat .sec-sub{flex:none;font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:#705B50;background:#E9E9EE;border-radius:999px;padding:3px 9px;line-height:1.3;white-space:nowrap}
html .st-row-txt b{flex-wrap:wrap;row-gap:4px}
html .st-row-txt .st-tag{font-style:normal;font-weight:600;font-size:11px;letter-spacing:0;color:#705B50;background:#E9E9EE;border-radius:999px;padding:3px 9px;line-height:1.3;white-space:nowrap;margin-left:0}
html .st-row-txt .st-row-meta{font-size:12.5px;font-weight:700;color:#705B50;-webkit-line-clamp:unset;display:block;margin-top:2px}
/* lesson diagrams (tools/viz.py), same look as the Studio map */
html .vz-flow{display:flex;align-items:stretch;gap:0;margin:18px 0 20px}
html .vz-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid #E5D4C7;border-top:5px solid var(--c);border-radius:14px;padding:14px 14px 15px}
html .vz-card.dark{background:#563B2E;border-color:#563B2E;border-top-color:#E8E0D6;color:#fff}
html .vz-card.dark span:not(.vz-ic){color:rgba(255,255,255,.75)}
html .vz-card b{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-top:4px}
html .vz-card > span:not(.vz-ic){font-size:13px;line-height:1.4;color:#705B50}
html .vz-ic{width:32px;height:32px;border-radius:10px;background:var(--c);display:inline-flex;align-items:center;justify-content:center}
html .vz-card.dark .vz-ic{background:#E8E0D6}
html .vz-ic svg{width:18px;height:18px;fill:none;stroke:#563B2E;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html .vz-arrow{flex:0 0 26px;position:relative}
html .vz-arrow::before{content:"";position:absolute;left:5px;right:7px;top:50%;height:1.5px;background:#CFCFD4}
html .vz-arrow::after{content:"";position:absolute;right:2px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left:6px solid #CFCFD4}
html .vz-path{list-style:none;padding:0;margin:18px 0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;counter-reset:none}
html .vz-path li{position:relative;background:#fff;border:1px solid #E5D4C7;border-radius:14px;padding:12px 12px 13px;display:flex;flex-direction:column;gap:4px;margin:0!important}
html .vz-path li::before{display:none!important}
html .vz-path .vz-n{width:24px;height:24px;border-radius:50%;background:var(--c);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#563B2E}
html .vz-path b{font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
html .vz-path li > span:not(.vz-n){font-size:12.5px;color:#8A7266;line-height:1.35}
@media (max-width:700px){html .vz-flow{flex-direction:column}html .vz-arrow{flex:0 0 22px}html .vz-arrow::before{left:50%;right:auto;top:3px;bottom:7px;width:1.5px;height:auto}html .vz-arrow::after{left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%);border:5px solid transparent;border-top:6px solid #CFCFD4}}
/* prompts in lessons never spill off the page (16 Oct 2026) */
html article pre,html .lesson pre,html #pane pre,html .st pre{white-space:pre-wrap!important;word-break:break-word;overflow-wrap:anywhere;max-width:100%;box-sizing:border-box}
html .pr-box{position:relative;margin:12px 0 16px;border:1px solid rgba(24,24,27,.14);border-radius:14px;background:#FAFAFA;overflow:hidden}
html .pr-box pre{margin:0!important;padding:16px 16px 16px!important;background:transparent!important;border:0!important;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace!important;color:#27272A;max-height:none}
html .pr-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px 8px 16px;background:#F7F2E9;border-bottom:1px solid rgba(24,24,27,.08);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A7266}
html .pr-head .cp-btn{padding:8px 14px;font-size:12.5px}
html .vz-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 20px}
html .vz-col{background:#fff;border:1px solid #E5D4C7;border-top:5px solid var(--c);border-radius:14px;padding:14px 16px}
html .vz-col.hi{box-shadow:0 0 0 2px #563B2E inset}
html .vz-lab{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--c);color:#563B2E;padding:4px 8px;border-radius:99px}
html .vz-col b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;margin:8px 0 6px}
html .vz-col ul{margin:0;padding-left:18px}
html .vz-col li{font-size:13.5px;line-height:1.45;color:#3F3F46;margin:3px 0}
html .vz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:18px 0 20px}
@media (max-width:700px){html .vz-compare{grid-template-columns:1fr}}
/* Setup: stop-and-breathe note */
.st-stop{background:#FAF7F3;border:2px solid #563B2E;border-radius:16px;padding:18px 20px;margin:18px 0 24px}
.st-stop p{margin:0 0 8px}.st-stop p:last-child{margin:0}
.st-stop-h{font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
@media (prefers-color-scheme:dark){.st-stop{background:#2a2420;border-color:#e7e1d9}}
/* Studio rail: an empty circle on every lesson not yet checked, so it's clear it can be checked off (16 Oct 2026) */
html body.studio .steplist.flat .item:not(.done):not(.locked) .mk{font-size:0;color:transparent;flex:0 0 19px;width:19px;height:19px;box-sizing:border-box;border-radius:50%;border:1.6px solid #C4C4CC;padding:0;margin-top:1px;background:#fff;visibility:visible!important;align-self:flex-start}
/* the line between the core tools and the rest (16 Oct 2026) */
html .raildiv{height:1px;background:#D8C6B8;margin:26px 14px 4px}
/* Join The Green Room: drawn phone screens (Telegram look, generic) */
.tgp{margin:0 auto;max-width:280px;width:100%}
.tgp-scr{border:8px solid #563B2E;border-radius:34px;background:#fff;overflow:hidden;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#563B2E;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.tgp-bar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:12px 14px 10px;border-bottom:1px solid #EEF0F2;font-size:12px}
.tgp-bar b{text-align:center;font-size:14px;font-weight:600}
.tgp figcaption,.tgp > figcaption{margin:10px 0 0;text-align:center;font-size:13px;color:var(--st-muted)}
.tgp-search{margin:12px;padding:8px 12px;border-radius:10px;background:#F1F2F4;font-size:14px;color:#705B50}
.tgp-app{display:flex;align-items:center;gap:10px;margin:6px 12px 10px;padding:10px 0;border-bottom:1px solid #EEF0F2}
.tgp-appic{width:46px;height:46px;border-radius:12px;background:linear-gradient(180deg,#3BA7E6,#2A8BD0);flex:none}
.tgp-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.tgp-tx b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgp-tx i{font-style:normal;font-size:12px;color:#8A7266;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgp-get{background:#EEF2FF;color:#2A6FDB;font-weight:700;font-size:13px;padding:5px 14px;border-radius:999px}
.tgp-note{margin:10px 16px;font-size:12.5px;line-height:1.5;color:#705B50}
.tgp-h{margin:22px 16px 4px;font-size:18px;font-weight:700;text-align:center}
.tgp-field{margin:10px 16px;padding:11px 12px;border:1px solid #D8C6B8;border-radius:10px;font-size:14px}
.tgp-btn{margin:14px 16px;padding:12px;border-radius:10px;background:#2A8BD0;color:#fff;text-align:center;font-weight:600;font-size:14px}
.tgp-btn.big{margin-top:24px}
.tgp-lab{margin:18px 16px 6px;font-size:11px;letter-spacing:.04em;color:#8A7266}
.tgp-list{margin:0 12px;border-radius:10px;background:#F7F2E9;overflow:hidden}
.tgp-opt{display:flex;justify-content:space-between;padding:11px 12px;font-size:14px;border-bottom:1px solid #E5D4C7}
.tgp-opt:last-child{border-bottom:0}
.tgp-opt.on{font-weight:600}.tgp-opt span{color:#2A8BD0;font-weight:700}
.tgp-join{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 16px 6px}
.tgp-join.small{padding-top:20px}
.tgp-av{width:72px;height:72px;border-radius:50%;background:#5CC9B8;color:#fff;font-size:30px;font-weight:600;display:flex;align-items:center;justify-content:center;margin:0 0 12px}
.tgp-av.mega{background:#FFF3C4;font-size:34px}
.tgp-join b{font-size:16px;font-weight:700}
.tgp-join i{font-style:normal;font-size:12.5px;color:#8A7266;margin:2px 0 10px}
.tgp-join p{font-size:12.5px;line-height:1.5;color:#3F3F46;margin:6px 0 0}
.tgp-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #F1F2F4}
.tgp-ic{width:26px;font-size:19px;text-align:center;flex:none}
.tgp-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 16px}
.tgp-pair span{background:#F7F2E9;border-radius:12px;padding:12px 6px;text-align:center;font-size:13px;color:#2A6FDB;font-weight:600}
.tgp-pair span.on{background:#E8F1FD;outline:2px solid #2A8BD0}
.st-community .ac-shots{align-items:center}
.tg-real{max-width:560px;margin:18px auto 6px}
.tg-real figcaption{padding:10px 14px;font-size:13px;color:var(--st-muted);border-top:1px solid var(--st-edge)}
.st-community .gm-table td:nth-child(2){font-weight:400;white-space:normal}
.st-community .gm-table td:first-child{font-weight:700;width:38%}
.tgp-scr{min-height:0}

/* Telegram logo (Katie, 16 Oct 2026): sidebar, Studio rail, Start here */
html .tg-ic{flex:none;display:inline-block;vertical-align:-4px;margin-right:6px}
html .fw-nav .tg-ic{margin-right:0}
html .tg-ic circle,html .st-dash .st-dash-ic .tg-ic circle{fill:#229ED9!important;stroke:none!important}
html .tg-ic path,html .st-dash .st-dash-ic .tg-ic path{fill:#fff!important;stroke:none!important}
html .st-dash-ic .tg-ic{width:19px!important;height:19px!important;margin:0}

/* The 2% Club invitation page */
html .ofp-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;background:#fff;border:1px solid var(--lx-line,#E5D4C7);border-radius:24px;padding:22px;margin-top:8px}
html .ofp-art img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px;display:block}
html .ofp-eye{display:inline-block;background:var(--lime,#E8E0D6);color:#563B2E;border-radius:999px;padding:5px 12px;font:800 11px/1 var(--lx-font,inherit);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
html .ofp-body h1{font-size:clamp(32px,4vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin:0 0 12px;color:#563B2E}
html .ofp-lead{font-size:16px;line-height:1.6;color:var(--lx-muted,#705B50);margin:0 0 20px;max-width:52ch}
html .ofp-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
html .ofp-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--lx-muted,#705B50)}
html .ofp-list b{color:#563B2E}
html .ofp-n{flex:none;width:26px;height:26px;border-radius:8px;background:#563B2E;color:var(--lime,#E8E0D6);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
html .ofp-cta{display:inline-flex;align-items:center;gap:10px;background:#563B2E;color:#E8E0D6!important;text-decoration:none!important;font-weight:800;font-size:16px;padding:16px 26px;border-radius:999px}
html .ofp-fine{font-size:13px;color:var(--lx-muted,#8A7266);margin:12px 0 0}
@media (max-width:900px){html .ofp-hero{grid-template-columns:1fr;padding:16px}}

/* Welcome questions: inputs side by side */
html .ob-pair{display:grid;gap:10px}
html .ob-label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lx-muted,#8A7266);margin:12px 0 4px}

/* Beta notice (Katie, 16 Oct 2026): first thing on Welcome and the Studio dashboard */
html .fw-beta{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;background:var(--lime,#E8E0D6);border:1px solid #563B2E;border-radius:16px;padding:16px 18px;margin:16px 0}
html .fw-beta p{margin:0;flex:1 1 320px;min-width:0;font-size:14.5px;line-height:1.55;color:#563B2E}
html .fw-beta-go{flex:none;display:inline-flex;align-items:center;gap:6px;background:#563B2E;color:#E8E0D6!important;text-decoration:none!important;font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px}

/* ---------------------------------------------------------------------------
   Welcome page, editorial version (26 Oct 2026, Katie: "less card soup, more
   elevated"). Fewer boxes: hairlines, white space and type do the grouping.
   Only the course covers and the Continue strip keep a surface. One typeface
   (Plus Jakarta Sans), espresso on white and cream. Scoped to .pc-clean.
--------------------------------------------------------------------------- */
html .app.library:has(.pc-clean){background:#fff}
html .app.library:has(.pc-clean) main{background:#fff}
html .pc-clean{max-width:1080px;margin:0 auto;width:100%;--hair:#ECE5DD;--soft:#F7F3EE}
html .pc-clean .pc-hello{margin:44px 0 0;padding:0;border:0;background:none;min-height:0;display:block}
html .pc-clean .pc-hello .lib-headin{padding:0;text-align:left;align-items:flex-start;background:none;border:0;box-shadow:none;width:auto;margin:0;-webkit-backdrop-filter:none;backdrop-filter:none}
html .pc-clean .pc-eyebrow{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lx-faint)}
html .pc-clean .pc-hello .lib-h1{font-size:clamp(32px,4.2vw,48px);font-weight:700;letter-spacing:-.045em;line-height:1.02;color:var(--lx-ink);text-wrap:balance}
html .pc-clean .pc-hello .lib-sub{margin:12px 0 0;font-size:15px;color:var(--lx-muted);max-width:52ch}

/* numbers: no box, two big figures between hairlines */
html .pc-clean .pc-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:36px 0 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:none;border-radius:0}
html .pc-clean .pc-stat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:18px;align-items:center;padding:22px 0;min-width:0}
html .pc-clean .pc-stat + .pc-stat{border-left:1px solid var(--hair);padding-left:28px}
html .pc-clean .pc-stat-n{grid-row:1/3;font-size:44px;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--lx-ink);font-variant-numeric:tabular-nums}
html .pc-clean .pc-stat-l{font-size:13.5px;font-weight:700;color:var(--lx-ink)}
html .pc-clean .pc-stat-s{font-size:12.5px;color:var(--lx-faint)}

/* continue: the one filled surface near the top */
html .pc-clean .pc-resume{margin:28px 0 0;border:0;box-shadow:none;border-radius:20px;background:var(--soft);padding:14px 16px 14px 14px}
html .pc-clean .pc-resume:hover{background:#F2ECE5}
html .pc-clean .pc-resume-art{width:84px;height:56px;border-radius:12px;border:0}
html .pc-clean .pc-resume-txt small{letter-spacing:.16em;color:var(--lx-faint)}
html .pc-clean .pc-resume-txt b{font-size:16px;font-weight:700}
html .pc-clean .pc-resume-txt .pc-bar{height:3px;background:#E6DED5}
html .pc-clean .pc-resume-txt .pc-bar i{background:var(--lx-ink);box-shadow:none}
html .pc-clean .pc-resume-go{background:var(--lx-ink);color:#fff;box-shadow:none;border-radius:999px;padding:11px 22px}

/* app banner: a quiet line, not a card */
html .pc-clean .ta-appban{margin:14px 0 0;background:none;border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:4px 2px 16px}
html .pc-clean .ta-appban .ic{background:var(--soft);box-shadow:none;width:34px;height:34px}
html .pc-clean .ta-appban .go{background:none;color:var(--lx-ink);border:1px solid var(--hair);border-radius:999px}

/* section heads */
html .pc-clean .pc-sec{margin:64px 0 22px;align-items:baseline}
html .pc-clean .pc-sec h2{font-size:24px;font-weight:700;letter-spacing:-.035em}
html .pc-clean .pc-sec .pc-link{font-size:13px;font-weight:600;color:var(--lx-muted);border-bottom:1px solid var(--hair);padding-bottom:2px}

/* start here: a numbered row, no boxes */
html .pc-clean .pc-steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:1px solid var(--hair)}
html .pc-clean .pc-step{flex-direction:column;gap:12px;background:none;border:0;border-radius:0;padding:20px 22px 6px 0;box-shadow:none;position:relative}
html .pc-clean .pc-step + .pc-step{padding-left:22px;border-left:1px solid var(--hair)}
html .pc-clean .pc-step:hover{background:none}
html .pc-clean .pc-step:hover .pc-step-t b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
html .pc-clean .pc-step-n{width:auto;height:auto;background:none;border:0;box-shadow:none;border-radius:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--lx-faint)}
html .pc-clean .pc-step-n::before{content:"0"}
html .pc-clean .pc-step-t b{font-size:15px}
html .pc-clean .pc-step-t span{font-size:13px;line-height:1.55}
html .pc-clean .pc-step-go{display:none}

/* courses: cover + words, no card */
html .pc-clean .pc-grid{gap:40px 28px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
html .pc-clean .pc-card{background:none;border:0;border-radius:0;padding:0;box-shadow:none;overflow:visible}
html .pc-clean .pc-card:hover{transform:none;box-shadow:none}
html .pc-clean .pc-cover{border:0;border-radius:18px;aspect-ratio:4/3;transition:transform .35s ease}
html .pc-clean .pc-card:hover .pc-cover img{transform:scale(1.03)}
html .pc-clean .pc-cover img{transition:transform .5s ease}
html .pc-clean .pc-body{padding:18px 0 0;gap:8px}
html .pc-clean .pc-body h3{font-size:19px;font-weight:700;letter-spacing:-.03em}
html .pc-clean .pc-body p{font-size:13.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html .pc-clean .pc-prog{padding-top:8px;gap:8px}
html .pc-clean .pc-lab{order:-1;font-size:12px;font-weight:600;color:var(--lx-muted)}
html .pc-clean .pc-lab span:first-child{color:var(--lx-ink);font-weight:700}
html .pc-clean .pc-bar{height:3px;background:var(--hair)}
html .pc-clean .pc-bar i{background:var(--lx-ink);box-shadow:none}
html .pc-clean .pc-foot{padding-top:12px;border:0}
html .pc-clean .pc-go{width:auto;display:inline-flex;border-radius:999px;padding:10px 20px;font-size:13px}
html .pc-clean .pc-go.quiet{background:none;border:1px solid var(--hair);color:var(--lx-ink)}
html .pc-clean .pc-go.quiet:hover{border-color:var(--lx-ink);background:none}

/* work with Katie: same treatment as the courses */
html .pc-clean .wk-grid{gap:28px}
html .pc-clean .wk-card{background:none;border:0;border-radius:0;padding:0;overflow:visible}
html .pc-clean .wk-card:hover{transform:none;box-shadow:none}
html .pc-clean .wk-card:hover .wk-go{background:var(--lx-ink);color:#fff}
html .pc-clean .wk-art{aspect-ratio:16/8;border-radius:18px}
html .pc-clean .wk-body{min-width:0;padding:18px 0 0;gap:8px}
html .pc-clean .wk-eye{color:var(--lx-faint);letter-spacing:.16em}
html .pc-clean .wk-body h3{font-size:19px;font-weight:700}
html .pc-clean .wk-body p:not(.wk-eye){font-size:13.5px}
html .pc-clean .wk-go,html .pc-clean .wk-body .wk-go{background:none;border:1px solid var(--hair);color:var(--lx-ink);border-radius:999px;box-shadow:none;padding:10px 20px;font-size:13px;margin-top:10px;transition:background .2s,color .2s}

/* beta: one quiet line at the foot */
html .pc-clean .fw-beta{margin:72px 0 24px;background:none;border:0;border-top:1px solid var(--hair);border-radius:0;padding:22px 0 0}
html .pc-clean .fw-beta p{font-size:13px;color:var(--lx-faint)}
html .pc-clean .fw-beta p b{color:var(--lx-muted);font-weight:700}
html .pc-clean .fw-beta-go{background:none;color:var(--lx-ink)!important;border:0;border-bottom:1px solid var(--hair);border-radius:0;font-size:13px;padding:0 0 2px}

@media (max-width:640px){
  html .pc-clean .pc-hello{margin-top:24px}
  html .pc-clean .pc-stat{padding:16px 0}
  html .pc-clean .pc-stat + .pc-stat{padding-left:16px}
  html .pc-clean .pc-stat-n{font-size:32px}
  html .pc-clean .pc-stat-s{display:none}
  html .pc-clean .pc-step + .pc-step{padding-left:0;border-left:0;border-top:1px solid var(--hair)}
  html .pc-clean .pc-step{padding:18px 0 12px}
  html .pc-clean .pc-sec{margin-top:48px}
}

/* Lessons (26 Oct 2026, Katie): white reading area, no blush. The progress
   bar is a thin espresso line; the count already sits above it. */
.app:not(.library){background:#fff}
.app:not(.library) main,.app:not(.library) #pane{background:#fff}
.app:not(.library) .rail{background:#FAF7F3}
.app:not(.library) .prog-track{height:8px;background:#EFE9E2;border:0}
.app:not(.library) .prog-fill{background:#563B2E}
.app:not(.library) .prog-pct{display:none}
/* Course bundles colour some badges inline in blush; calm them here. */
#pane [style*="ffe1d6" i]{--c:#EEE8E0!important}

/* ---------------------------------------------------------------------------
   Playful Futureworks portal (27 Oct 2026)

   The reference Katie chose feels fun because the hierarchy is visible:
   a framed hero, a real progress dial, chunky navigation and soft colour
   blocks. This keeps the Futureworks palette strictly to white, charcoal and
   mushroom-brown tonal neutrals—no pastels, tech gradients or blobs.
--------------------------------------------------------------------------- */
html .app.library{
  --fun-espresso:#292522;
  --fun-brown:#67594F;
  --fun-cream:#FFFFFF;
  --fun-paper:#F5F4F2;
  --fun-blush:#D8D0CA;
  --fun-sage:#E6E2DE;
  --fun-sand:#EFECE8;
  --fun-blue:#DDD8D4;
  --fun-line:#292522;
  background:var(--fun-cream);
}
html .app.library:has(#fwNav){grid-template-columns:272px minmax(0,1fr)!important}
html .app.library:has(.pc-clean),
html .app.library:has(.pc-clean) main{background:var(--fun-cream)}
html .app.library main article#pane,
html .app.library article#pane{max-width:1240px;padding:22px clamp(18px,3vw,44px) 70px}

/* chunky, friendly app navigation */
html .fw-side{
  gap:7px;padding:18px 14px 14px;background:var(--fun-paper);
  border-right:2px solid var(--fun-line);
}
html .fw-logo{
  min-height:64px;margin:0 0 10px;padding:8px 0 14px;background:transparent;
  border:0;border-radius:0;box-shadow:none;overflow:visible;
}
html .fw-logo img{display:block;width:100%;height:42px;max-width:none;object-fit:contain;object-position:left center}
html .fw-logo:hover{opacity:.68}
html .fw-sep{
  margin:17px 10px 4px;color:#8B7165;font-size:10px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;
}
html .fw-item{
  gap:10px;min-height:44px;border:1.5px solid transparent;border-radius:13px;
  padding:10px 11px;font-size:13.5px;font-weight:700;color:#705B50;
}
html .fw-item svg{
  width:24px;height:24px;padding:4px;border:1.5px solid currentColor;
  border-radius:8px;background:#fff;stroke-width:2;
}
html .fw-item:hover{background:#fff;border-color:#D9C8BB;color:var(--fun-espresso)}
html .fw-item.on{
  background:#DDD8D4;border-color:var(--fun-line);color:var(--fun-espresso);
  box-shadow:3px 3px 0 var(--fun-espresso);
}
html .fw-item.on::after{width:8px;height:8px;background:#fff;border:1.5px solid var(--fun-espresso);box-shadow:none}
html .fw-kids{margin:2px 0 7px 17px;padding:3px 0 3px 18px;border-left:2px solid #CDBCB0}
html .fw-kid{
  display:flex;align-items:center;width:100%;border:0;background:none;color:#806B60;
  padding:7px 8px;border-radius:9px;font:600 12px/1.25 var(--lx-font);text-align:left;cursor:pointer;
}
html .fw-kid:hover{background:#fff;color:var(--fun-espresso)}
html .fw-kid-sep{display:block;margin:10px 8px 2px;color:#9A8D84;font:800 9px/1.2 var(--lx-font);letter-spacing:.14em;text-transform:uppercase}
html .fw-av{background:var(--fun-sage);border:1.5px solid var(--fun-espresso);box-shadow:none}

/* welcome panel: a branded course dashboard, not a generic admin screen */
html .pc-clean{max-width:none;--hair:#D8D3CE;--soft:#F5F4F2}
html .pc-clean .pc-hello{
  position:relative;isolation:isolate;display:block;overflow:hidden;
  min-height:280px;margin:0;padding:42px clamp(28px,5vw,62px) 40px;
  background:#E7E3DF;border:2px solid var(--fun-line);border-radius:24px;
  box-shadow:7px 7px 0 var(--fun-espresso);
}
html .pc-clean .pc-hello::before{
  content:"";position:absolute;right:-45px;bottom:-85px;width:270px;height:270px;
  border:2px solid rgba(86,59,46,.34);border-radius:50%;z-index:-1;
  box-shadow:0 0 0 24px rgba(255,253,249,.20),0 0 0 48px rgba(86,59,46,.07);
}
html .pc-clean .pc-hello .lib-headin{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:32px;
  width:100%;margin:0;padding:0;text-align:left;
}
html .pc-hero-copy{position:relative;z-index:2;max-width:700px}
html .pc-clean .pc-hello .pc-eyebrow{
  display:inline-flex;margin:0 0 16px;padding:7px 11px;background:#fff;
  border:1.5px solid var(--fun-line);border-radius:999px;color:var(--fun-espresso);
  font-size:10px;font-weight:800;letter-spacing:.14em;box-shadow:2px 2px 0 var(--fun-espresso);
}
html .pc-clean .pc-hello .lib-h1{
  max-width:700px;color:var(--fun-espresso);font-size:clamp(38px,5vw,66px);
  font-weight:800;line-height:.98;letter-spacing:-.06em;
}
html .pc-clean .pc-hello .lib-sub{
  max-width:570px;margin:16px 0 0;color:#63493D;font-size:16px;font-weight:600;line-height:1.55;
}
html .pc-hero-check{
  position:absolute;inset:0 0 auto;height:15px;z-index:3;
  background:repeating-linear-gradient(90deg,var(--fun-espresso) 0 15px,#FFFDF9 15px 30px);
  border-bottom:2px solid var(--fun-line);
}
html .pc-hero-progress{
  position:relative;z-index:2;flex:0 0 132px;width:132px;height:132px;border-radius:50%;
  display:grid;place-items:center;background:conic-gradient(var(--fun-espresso) var(--hub-progress),#FFFDF9 0);
  border:2px solid var(--fun-line);box-shadow:5px 5px 0 rgba(86,59,46,.28);
}
html .pc-hero-progress::before{content:"";position:absolute;inset:12px;border-radius:50%;background:#FFFDF9;border:1.5px solid var(--fun-line)}
html .pc-hero-progress span{position:relative;display:flex;flex-direction:column;align-items:center;color:var(--fun-espresso)}
html .pc-hero-progress b{font-size:29px;line-height:1;font-weight:800;letter-spacing:-.05em}
html .pc-hero-progress small{margin-top:4px;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
html .pc-hero-wave{
  position:absolute;left:42px;bottom:25px;width:72px;height:13px;z-index:1;
  background:radial-gradient(18px 10px at 9px 0,transparent 9px,var(--fun-espresso) 10px 11px,transparent 12px) 0 0/24px 13px repeat-x;
  opacity:.8;
}

/* progress counts become two small dashboard tiles */
html .pc-clean .pc-stats{gap:14px;margin:28px 0 0;border:0;background:none}
html .pc-clean .pc-stat{
  min-height:106px;padding:18px 20px;background:#fff;border:1.5px solid var(--fun-line);
  border-radius:16px;box-shadow:3px 3px 0 #CEC8C3;
}
html .pc-clean .pc-stat + .pc-stat{padding-left:20px;border-left:1.5px solid var(--fun-line);background:#F0EEEB}
html .pc-clean .pc-stat-n{font-size:42px;color:var(--fun-espresso)}
html .pc-clean .pc-stat-l{font-size:13px;color:var(--fun-espresso)}
html .pc-clean .pc-stat-s{color:#8A7266}

/* a visible continue strip and section labels */
html .pc-clean .pc-resume{
  margin:16px 0 0;padding:13px;background:#D8D2CD;border:1.5px solid var(--fun-line);
  border-radius:16px;box-shadow:3px 3px 0 var(--fun-espresso);
}
html .pc-clean .pc-resume:hover{background:#CEC7C1;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--fun-espresso)}
html .pc-clean .pc-resume-art{width:96px;height:64px;border:1.5px solid var(--fun-line)}
html .pc-clean .pc-resume-go{border:1.5px solid var(--fun-line);box-shadow:2px 2px 0 var(--fun-espresso)}
html .pc-clean .pc-sec{margin:54px 0 17px}
html .pc-clean .pc-sec h2{font-size:25px;font-weight:800;color:var(--fun-espresso)}
html .pc-clean .pc-sec h2::after{content:"";display:inline-block;width:28px;height:8px;margin-left:10px;border-bottom:3px solid var(--fun-brown);border-radius:50%;transform:rotate(-5deg)}
html .pc-clean .pc-sec .pc-link{color:#705B50;border-bottom:1.5px solid #705B50;font-weight:700}

/* start-here steps read like mini modules */
html .pc-clean .pc-steps{gap:12px;border:0}
html .pc-clean .pc-step{
  min-height:132px;gap:13px;padding:17px 16px;background:#fff;border:1.5px solid var(--fun-line);
  border-radius:16px;box-shadow:3px 3px 0 #CEC8C3;
}
html .pc-clean .pc-step + .pc-step{padding-left:16px;border-left:1.5px solid var(--fun-line)}
html .pc-clean .pc-step:nth-child(2){background:#F0EEEB}
html .pc-clean .pc-step:nth-child(3){background:#E6E2DE}
html .pc-clean .pc-step:hover{background:#D8D0CA;transform:translateY(-2px)}
html .pc-clean .pc-step-n{
  flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;background:var(--fun-espresso);
  border:1.5px solid var(--fun-espresso);border-radius:10px;color:#fff;font-size:12px;letter-spacing:.04em;
}
html .pc-clean .pc-step-n::before{content:"0"}
html .pc-clean .pc-step-t b{font-size:15px;color:var(--fun-espresso)}

/* course covers keep their art, while the frames bring in varied brand colour */
html .pc-clean .pc-grid{gap:24px;grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}
html .pc-clean .pc-card{
  --tone:#F2F0ED;overflow:hidden;background:var(--tone);border:1.5px solid var(--fun-line);
  border-radius:19px;padding:0;box-shadow:5px 5px 0 #C9C3BE;transition:transform .2s ease,box-shadow .2s ease;
}
html .pc-clean .pc-card.pc-tone-blush{--tone:#E2DDD9}
html .pc-clean .pc-card.pc-tone-sand{--tone:#F1EFEC}
html .pc-clean .pc-card.pc-tone-sage{--tone:#E9E6E2}
html .pc-clean .pc-card.pc-tone-blue{--tone:#D6D0CB}
html .pc-clean .pc-card:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--fun-espresso)}
html .pc-clean .pc-cover{aspect-ratio:16/9;border:0;border-bottom:1.5px solid var(--fun-line);border-radius:0;background:#fff}
html .pc-clean .pc-body{padding:19px 20px 20px;gap:9px}
html .pc-clean .pc-body h3{font-size:20px;font-weight:800;color:var(--fun-espresso)}
html .pc-clean .pc-body p{color:#705B50;font-size:13px}
html .pc-clean .pc-prog{padding-top:10px}
html .pc-clean .pc-bar{height:7px;background:rgba(255,255,255,.75);border:1px solid rgba(86,59,46,.28)}
html .pc-clean .pc-bar i{background:var(--fun-espresso)}
html .pc-clean .pc-go,
html .pc-clean .pc-go.quiet{
  border:1.5px solid var(--fun-line);border-radius:11px;background:#fff;color:var(--fun-espresso);
  box-shadow:2px 2px 0 var(--fun-espresso);font-weight:800;
}
html .pc-clean .pc-go:hover,
html .pc-clean .pc-go.quiet:hover{background:var(--fun-espresso);color:#fff;box-shadow:none}

/* coaching and beta treatments */
html .pc-clean .wk-card{
  display:grid;grid-template-columns:minmax(260px,.85fr) 1fr;overflow:hidden;background:#E9E5E1;
  border:1.5px solid var(--fun-line);border-radius:19px;box-shadow:5px 5px 0 #C9C3BE;
}
html .pc-clean .wk-art{height:100%;min-height:250px;aspect-ratio:auto;border-radius:0;border-right:1.5px solid var(--fun-line)}
html .pc-clean .wk-body{justify-content:center;padding:26px 28px}
html .pc-clean .wk-body h3{font-size:26px;color:var(--fun-espresso)}
html .pc-clean .wk-go,
html .pc-clean .wk-body .wk-go{align-self:flex-start;border:1.5px solid var(--fun-line);border-radius:11px;background:#fff;box-shadow:2px 2px 0 var(--fun-espresso);font-weight:800}
html .pc-clean .fw-beta{margin:58px 0 0;padding:17px 18px;background:#F5F4F2;border:1.5px dashed #8A7D73;border-radius:14px}
html .pc-clean .fw-beta-go{border-bottom:1.5px solid var(--fun-espresso);font-weight:800}

/* Courses index gets the same visual language */
html .pc-courses .pc-title{
  margin:0;padding:30px 34px;background:#DDD8D4;border:2px solid var(--fun-line);
  border-radius:22px;box-shadow:6px 6px 0 var(--fun-espresso);
}
html .pc-courses .pc-title .lib-headin{padding:0}
html .pc-courses .pc-grid .pc-card{
  --tone:#F2F0ED;background:var(--tone);border:1.5px solid var(--fun-line);border-radius:19px;
  box-shadow:5px 5px 0 #C9C3BE;
}
html .pc-courses .pc-card.pc-tone-blush{--tone:#E2DDD9}
html .pc-courses .pc-card.pc-tone-sand{--tone:#F1EFEC}
html .pc-courses .pc-card.pc-tone-sage{--tone:#E9E6E2}
html .pc-courses .pc-card.pc-tone-blue{--tone:#D6D0CB}

/* course/lesson view: the same framed, friendly system */
.app:not(.library){--rail:#F5F4F2;--pill:#DDD8D4;--rule:#D5CFC9;background:#fff}
.app:not(.library) .rail{
  padding-top:20px;background:#F5F4F2;border-right:2px solid var(--fun-espresso,#292522);gap:15px;
}
.app:not(.library) .rail .rail-pad:first-of-type{
  margin:0 14px;padding:15px 14px;background:#fff;border:1.5px solid #292522;border-radius:15px;
  box-shadow:3px 3px 0 #292522;
}
.app:not(.library) .byline{color:#8A7266}
.app:not(.library) .prog-track{height:9px;background:#fff;border:1.5px solid #292522}
.app:not(.library) .prog-fill{background:#67594F}
.app:not(.library) #nav.sc .sec,
.app:not(.library) #nav .sec{margin:12px 14px 5px;padding:6px 9px;background:#E3DFDB;border-radius:999px;color:#292522;font-size:9px}
.app:not(.library) #nav.sc .item,
.app:not(.library) #nav.sc .item[aria-current="true"]{margin:2px 10px;width:calc(100% - 20px);padding:7px 12px;gap:10px;border:1.5px solid transparent;border-radius:11px}
.app:not(.library) #nav.sc .item:hover{background:#fff;border-color:#D9C8BB}
.app:not(.library) #nav.sc .item[aria-current="true"]{
  background:#D8D0CA;border-color:#292522;box-shadow:2px 2px 0 #292522;
}
.app:not(.library) #nav.sc .item .mk{background:#fff;border-color:#BBA89B}
.app:not(.library) #nav.sc .item[aria-current="true"] .mk{border-color:#292522;color:#292522}
.app:not(.library) .topbar{background:#fff;border-bottom:2px solid #292522}
.app:not(.library) .topbar .brand{font-weight:800;color:#292522}
.app:not(.library) article#pane{background:#fff}

@media (max-width:860px){
  html .app.library:has(#fwNav){grid-template-columns:minmax(0,1fr)!important}
  html .app.library main article#pane,html .app.library article#pane{padding:14px 14px 100px}
  html .fw-tabs{border-top:2px solid var(--fun-line);background:rgba(255,255,255,.97)}
}
@media (max-width:700px){
  html .pc-clean .pc-hello{min-height:0;padding:40px 22px 28px;box-shadow:4px 4px 0 var(--fun-espresso)}
  html .pc-clean .pc-hello .lib-headin{align-items:flex-start;gap:20px}
  html .pc-clean .pc-hello .lib-h1{font-size:clamp(34px,11vw,50px)}
  html .pc-hero-progress{flex-basis:92px;width:92px;height:92px}
  html .pc-hero-progress::before{inset:9px}
  html .pc-hero-progress b{font-size:21px}
  html .pc-hero-wave{display:none}
  html .pc-clean .pc-stats{grid-template-columns:1fr}
  html .pc-clean .pc-stat + .pc-stat{padding-left:20px}
  html .pc-clean .pc-step + .pc-step{padding-left:16px;border:1.5px solid var(--fun-line)}
  html .pc-clean .wk-card{grid-template-columns:1fr}
  html .pc-clean .wk-art{min-height:0;aspect-ratio:16/9;border-right:0;border-bottom:1.5px solid var(--fun-line)}
}
@media (max-width:480px){
  html .pc-clean .pc-hello .lib-headin{flex-direction:column}
  html .pc-hero-progress{align-self:flex-end;margin-top:-10px}
}

/* High-contrast neutral pass: the palette stays monochrome, but the dark
   mushroom and charcoal now do real visual work instead of every surface
   landing in the same pale middle. */
html .fw-item.on{background:#292522;color:#fff;border-color:#292522;box-shadow:3px 3px 0 #67594F}
html .fw-item.on svg{background:#67594F;border-color:#fff;color:#fff}
html .fw-item.on::after{background:#fff;border-color:#fff}

html .pc-clean .pc-hello{background:#67594F;box-shadow:7px 7px 0 #292522}
html .pc-clean .pc-hello::before{border-color:rgba(255,255,255,.52);box-shadow:0 0 0 24px rgba(255,255,255,.09),0 0 0 48px rgba(41,37,34,.15)}
html .pc-clean .pc-hello .lib-h1,
html .pc-clean .pc-hello .lib-sub{color:#fff}
html .pc-clean .pc-hello .pc-eyebrow{background:#fff;color:#292522;border-color:#292522;box-shadow:2px 2px 0 #292522}
html .pc-hero-check{background:repeating-linear-gradient(90deg,#292522 0 15px,#fff 15px 30px);border-color:#292522}
html .pc-hero-progress{background:conic-gradient(#292522 var(--hub-progress),#fff 0);border-color:#292522;box-shadow:5px 5px 0 #292522}
html .pc-hero-progress::before{background:#67594F;border-color:#fff}
html .pc-hero-progress span{color:#fff}
html .pc-hero-wave{filter:brightness(0) invert(1);opacity:.92}

html .pc-clean .pc-stat + .pc-stat{background:#292522;border-color:#292522}
html .pc-clean .pc-stat + .pc-stat .pc-stat-n,
html .pc-clean .pc-stat + .pc-stat .pc-stat-l,
html .pc-clean .pc-stat + .pc-stat .pc-stat-s{color:#fff}

html .pc-clean .pc-resume{background:#67594F;color:#fff;border-color:#292522;box-shadow:3px 3px 0 #292522}
html .pc-clean .pc-resume:hover{background:#594C44;box-shadow:5px 5px 0 #292522}
html .pc-clean .pc-resume .pc-resume-txt small,
html .pc-clean .pc-resume .pc-resume-txt b{color:#fff}
html .pc-clean .pc-resume .pc-bar{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.65)}
html .pc-clean .pc-resume .pc-bar i{background:#fff}
html .pc-clean .pc-resume-go{background:#fff;color:#292522;border-color:#292522;box-shadow:2px 2px 0 #292522}

html .pc-clean .pc-step:nth-child(3){background:#67594F;border-color:#292522;box-shadow:3px 3px 0 #292522}
html .pc-clean .pc-step:nth-child(3) .pc-step-t b,
html .pc-clean .pc-step:nth-child(3) .pc-step-t span{color:#fff}
html .pc-clean .pc-step:nth-child(3) .pc-step-n{background:#fff;color:#292522;border-color:#292522}

html .pc-clean .pc-card.pc-tone-blush,
html .pc-courses .pc-card.pc-tone-blush{--tone:#F3F1EF}
html .pc-clean .pc-card.pc-tone-sand,
html .pc-courses .pc-card.pc-tone-sand{--tone:#67594F}
html .pc-clean .pc-card.pc-tone-sage,
html .pc-courses .pc-card.pc-tone-sage{--tone:#292522}
html .pc-clean .pc-card.pc-tone-blue,
html .pc-courses .pc-card.pc-tone-blue{--tone:#D8D0CA}

html .pc-clean .pc-card.pc-tone-sand .pc-body h3,
html .pc-clean .pc-card.pc-tone-sand .pc-body p,
html .pc-clean .pc-card.pc-tone-sand .pc-lab,
html .pc-clean .pc-card.pc-tone-sand .pc-lab span:last-child,
html .pc-clean .pc-card.pc-tone-sage .pc-body h3,
html .pc-clean .pc-card.pc-tone-sage .pc-body p,
html .pc-clean .pc-card.pc-tone-sage .pc-lab,
html .pc-clean .pc-card.pc-tone-sage .pc-lab span:last-child,
html .pc-courses .pc-card.pc-tone-sand .pc-body h3,
html .pc-courses .pc-card.pc-tone-sand .pc-body p,
html .pc-courses .pc-card.pc-tone-sand .pc-lab,
html .pc-courses .pc-card.pc-tone-sand .pc-lab span:last-child,
html .pc-courses .pc-card.pc-tone-sage .pc-body h3,
html .pc-courses .pc-card.pc-tone-sage .pc-body p,
html .pc-courses .pc-card.pc-tone-sage .pc-lab,
html .pc-courses .pc-card.pc-tone-sage .pc-lab span:last-child{color:#fff}
html .pc-clean .pc-card.pc-tone-sand .pc-bar,
html .pc-clean .pc-card.pc-tone-sage .pc-bar,
html .pc-courses .pc-card.pc-tone-sand .pc-bar,
html .pc-courses .pc-card.pc-tone-sage .pc-bar{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.65)}
html .pc-clean .pc-card.pc-tone-sand .pc-bar i,
html .pc-clean .pc-card.pc-tone-sage .pc-bar i,
html .pc-courses .pc-card.pc-tone-sand .pc-bar i,
html .pc-courses .pc-card.pc-tone-sage .pc-bar i{background:#fff}
html .pc-courses .pc-card.pc-tone-sand .pc-go,
html .pc-courses .pc-card.pc-tone-sage .pc-go{background:#fff;color:#292522;border:1.5px solid #fff;box-shadow:2px 2px 0 #8B7A6E}
html .pc-courses .pc-card.pc-tone-sand .pc-go:hover,
html .pc-courses .pc-card.pc-tone-sage .pc-go:hover{background:#E6E2DE;color:#292522}

html .pc-clean .wk-card{background:#fff}
html .pc-clean .wk-body{background:#292522}
html .pc-clean .wk-eye,
html .pc-clean .wk-body h3,
html .pc-clean .wk-body p:not(.wk-eye){color:#fff}
html .pc-clean .wk-go,
html .pc-clean .wk-body .wk-go{background:#fff;color:#292522;border-color:#fff;box-shadow:3px 3px 0 #67594F}

html .pc-courses .pc-title{background:#67594F;color:#fff;border-color:#292522;box-shadow:6px 6px 0 #292522}
html .pc-courses .pc-title .lib-h1,
html .pc-courses .pc-title .lib-sub{color:#fff}

.app:not(.library) #nav.sc .item[aria-current="true"]{background:#292522;color:#fff;border-color:#292522;box-shadow:2px 2px 0 #67594F}
.app:not(.library) #nav.sc .item[aria-current="true"] .lt{color:#fff}
.app:not(.library) #nav.sc .item[aria-current="true"] .mk{background:#67594F;border-color:#fff;color:#fff}
.app:not(.library) #nav.sc .sec,
.app:not(.library) #nav .sec{background:#67594F;color:#fff}

/* ---------------------------------------------------------------------------
   Blush editorial palette (27 Oct 2026)

   Inspired by the light/dark rhythm of the supplied Soft Girl Millions page,
   not copied from it: creamy white and black remain the Futureworks base;
   ballet blush creates atmosphere; berry is reserved for selected states,
   progress and primary moments. Mushroom stays as the bridge to the existing
   course-cover system.
--------------------------------------------------------------------------- */
html .app.library{
  --paper:#FFFDFC;--card:#FFFFFF;--edge:#E3DCD3;--edge-soft:#F1EBE3;
  --gold:#836D5E;--tan:#6F655D;--band:#F1EBE3;--lb-key:#D4A196;
  --warm-ink:#2B2622;--warm-muted:#6F655D;--warm-faint:#9A8F86;
  --lx-ink:#2B2622;--lx-muted:#6F655D;--lx-faint:#9A8F86;
  --lx-line:#E3DCD3;--lx-line-2:#D4A196;--lx-wash:#F1EBE3;--lx-white:#FFFFFF;
  --lime:#D4A196;--lime-2:#E8CFC4;--on-lime:#2B2622;
  --fun-espresso:#2B2622;--fun-brown:#836D5E;--fun-cream:#FFFDFC;
  --fun-paper:#F8F7F5;--fun-blush:#F1EBE3;--fun-sage:#EEE8E0;
  --fun-sand:#FFF8F1;--fun-blue:#E3DCD3;--fun-line:#2B2622;
  background:#FFFDFC;
}
html .fw-side{background:#F8F7F5;border-right-color:#2B2622}
html .fw-sep{color:#836D5E}
html .fw-item{color:#6F655D}
html .fw-item:hover{background:#fff;border-color:#D4A196;color:#2B2622}
html .fw-item.on{background:#836D5E;color:#fff;border-color:#2B2622;box-shadow:3px 3px 0 #2B2622}
html .fw-item.on svg{background:#D4A196;border-color:#fff;color:#2B2622}
html .fw-item.on::after{background:#fff;border-color:#fff}
html .fw-kids{border-left-color:#D4A196}
html .fw-kid{color:#6F655D}
html .fw-kid:hover{background:#fff;color:#836D5E}
html .fw-kid-sep{color:#836D5E}
html .fw-av{background:#D4A196;border-color:#2B2622;color:#2B2622}

html .pc-clean{--hair:#E3DCD3;--soft:#F1EBE3}
html .pc-clean .pc-hello{background:#F1EBE3;border-color:#2B2622;box-shadow:7px 7px 0 #2B2622}
html .pc-clean .pc-hello::before{border-color:rgba(131,109,94,.36);box-shadow:0 0 0 24px rgba(255,255,255,.48),0 0 0 48px rgba(212,161,150,.22)}
html .pc-clean .pc-hello .lib-h1{color:#2B2622}
html .pc-clean .pc-hello .lib-sub{color:#6F655D}
html .pc-clean .pc-hello .pc-eyebrow{background:#fff;color:#836D5E;border-color:#2B2622;box-shadow:2px 2px 0 #2B2622}
html .pc-hero-check{background:repeating-linear-gradient(90deg,#836D5E 0 15px,#FFFDFC 15px 30px);border-color:#2B2622}
html .pc-hero-progress{background:conic-gradient(#836D5E var(--hub-progress),#fff 0);border-color:#2B2622;box-shadow:5px 5px 0 #2B2622}
html .pc-hero-progress::before{background:#FFFDFC;border-color:#2B2622}
html .pc-hero-progress span{color:#2B2622}
html .pc-hero-wave{filter:none;opacity:.38}
html .pc-clean .pc-stat + .pc-stat{background:#2B2622;border-color:#2B2622}
html .pc-clean .pc-resume{background:#836D5E;border-color:#2B2622;box-shadow:3px 3px 0 #2B2622}
html .pc-clean .pc-resume:hover{background:#6E5A4D;box-shadow:5px 5px 0 #2B2622}
html .pc-clean .pc-step:nth-child(2){background:#F1EBE3}
html .pc-clean .pc-step:nth-child(3){background:#D4A196;border-color:#2B2622;box-shadow:3px 3px 0 #2B2622}
html .pc-clean .pc-step:nth-child(3) .pc-step-t b,
html .pc-clean .pc-step:nth-child(3) .pc-step-t span{color:#2B2622}
html .pc-clean .pc-step:nth-child(3) .pc-step-n{background:#2B2622;color:#fff;border-color:#2B2622}
html .pc-clean .pc-sec h2::after{border-color:#836D5E}
html .pc-clean .pc-card.pc-tone-blush,html .pc-courses .pc-card.pc-tone-blush{--tone:#F1EBE3}
html .pc-clean .pc-card.pc-tone-sand,html .pc-courses .pc-card.pc-tone-sand{--tone:#836D5E}
html .pc-clean .pc-card.pc-tone-sage,html .pc-courses .pc-card.pc-tone-sage{--tone:#2B2622}
html .pc-clean .pc-card.pc-tone-blue,html .pc-courses .pc-card.pc-tone-blue{--tone:#D4A196}
html .pc-clean .wk-body{background:#836D5E}
html .pc-clean .wk-go,html .pc-clean .wk-body .wk-go{box-shadow:3px 3px 0 #2B2622}
html .pc-courses .pc-title{background:#F1EBE3;color:#2B2622;border-color:#2B2622;box-shadow:6px 6px 0 #2B2622}
html .pc-courses .pc-title .lib-h1{color:#2B2622}
html .pc-courses .pc-title .lib-sub{color:#6F655D}

/* AI Content Studio uses the same palette, with its two-product hierarchy. */
.st{--st-ink:#2B2622;--st-muted:#6F655D;--st-edge:#E3DCD3;--st-lime:#D4A196}
.st-band{background:#836D5E}
.st-band-art::before{background:linear-gradient(90deg,#836D5E 0,rgba(131,109,94,0) 35%)}
.st-cta{background:#D4A196;color:#2B2622}
.st-cta:hover{background:#E8CFC4}
.st-strip{background:#2B2622;color:#fff}
.st-flag.dark{background:#2B2622;color:#fff;border-color:#2B2622}
.st-flag.light{background:#F1EBE3;color:#2B2622;border-color:#2B2622}
.st-flag.light::after{border-color:rgba(131,109,94,.15)}
.st-shared{border-color:#E3DCD3;background:#FFFDFC}
.st-shared-num{background:#D4A196;color:#2B2622}
.st-shared-go{background:#836D5E;color:#fff}
.st-full{background:#F1EBE3;border-color:#2B2622;color:#2B2622;box-shadow:6px 6px 0 #2B2622}
.st-full::before{border-color:rgba(131,109,94,.22);box-shadow:0 0 0 22px rgba(255,255,255,.38),0 0 0 44px rgba(212,161,150,.13)}
.st-full-head .st-eyebrow{color:#836D5E}
.st-full-head .st-cta{background:#836D5E;color:#fff}
.st-full-tool{border-color:rgba(131,109,94,.3);background:rgba(255,255,255,.78)}
.st-full-tool:hover{border-color:#836D5E}

/* Lesson mode: soft blush rail, berry selection, white reading canvas. */
.app:not(.library){--rail:#F8F7F5;--pill:#F1EBE3;--rule:#E3DCD3}
.app:not(.library) .rail{background:#F8F7F5;border-right-color:#2B2622}
.app:not(.library) .prog-fill{background:#836D5E}
.app:not(.library) #nav.sc .sec,.app:not(.library) #nav .sec{background:#E8CFC4;color:#2B2622}
.app:not(.library) #nav.sc .item:hover{border-color:#D4A196}
.app:not(.library) #nav.sc .item[aria-current="true"]{background:#836D5E;color:#fff;border-color:#2B2622;box-shadow:2px 2px 0 #2B2622}
.app:not(.library) #nav.sc .item[aria-current="true"] .mk{background:#D4A196;border-color:#fff;color:#2B2622}

/* ---------------------------------------------------------------------------
   Elevated pass (28 Oct 2026, Katie: "less card soupy, more elevated", and
   no checker strip on the welcome panel). Keeps the blush + berry palette
   but drops the hard black outlines and offset shadows: grouping now comes
   from white space, hairlines and one soft blush surface per screen.
--------------------------------------------------------------------------- */
html .app.library{--el-ink:#2B2622;--el-muted:#6F655D;--el-faint:#9A8F86;--el-berry:#836D5E;--el-blush:#F1EBE3;--el-blush-2:#F8F7F5;--el-hair:#E7E1D9}

/* sidebar: quiet, no outlines */
html .fw-side{border-right:1px solid var(--el-hair);background:var(--el-blush-2)}
html .fw-item{border:0;border-radius:12px;font-weight:600;color:var(--el-muted)}
html .fw-item svg{width:20px;height:20px;padding:0;border:0;background:none;border-radius:0;stroke-width:1.8}
html .fw-item:hover{background:rgba(255,255,255,.75);color:var(--el-ink)}
html .fw-item.on{background:#fff;color:var(--el-berry);border:0;box-shadow:0 8px 22px -14px rgba(131,109,94,.45)}
html .fw-item.on svg{background:none;border:0;color:var(--el-berry)}
html .fw-item.on::after{width:6px;height:6px;background:var(--el-berry);border:0}
html .fw-kids{border-left:1px solid var(--el-hair)}
html .fw-av{border:0}

/* welcome panel: soft blush, no frame, no checker */
html .pc-hero-check,html .pc-hero-wave{display:none!important}
html .pc-clean .pc-hello{background:linear-gradient(135deg,#F4EEE6 0%,#F1EBE3 55%,#ECE3D6 100%);border:0;box-shadow:none;border-radius:28px;padding:48px clamp(28px,5vw,64px) 46px;min-height:0}
html .pc-clean .pc-hello::before{right:-70px;bottom:-120px;width:320px;height:320px;border:1px solid rgba(131,109,94,.18);box-shadow:0 0 0 36px rgba(255,255,255,.35),0 0 0 72px rgba(212,161,150,.10)}
html .pc-clean .pc-hello .pc-eyebrow{background:none;border:0;box-shadow:none;padding:0;color:var(--el-berry);font-size:11px;letter-spacing:.2em}
html .pc-clean .pc-hello .lib-h1{font-weight:700;letter-spacing:-.05em;color:var(--el-ink)}
html .pc-clean .pc-hello .lib-sub{font-weight:500;color:var(--el-muted)}
html .pc-hero-progress{flex-basis:118px;width:118px;height:118px;border:0;box-shadow:none;background:conic-gradient(var(--el-berry) var(--hub-progress),rgba(131,109,94,.12) 0)}
html .pc-hero-progress::before{inset:5px;background:#FAF8F5;border:0}
html .pc-hero-progress b{font-weight:700;color:var(--el-ink)}
html .pc-hero-progress small{color:var(--el-muted);letter-spacing:.2em}

/* app banner + numbers: hairline rows, not boxes */
html .pc-clean .ta-appban{border-bottom:1px solid var(--el-hair)}
html .pc-clean .ta-appban .ic{background:var(--el-blush);border:0}
html .pc-clean .ta-appban .go{border:1px solid var(--el-hair)}
html .pc-clean .pc-stats{gap:0;margin:30px 0 0;border-top:1px solid var(--el-hair);border-bottom:1px solid var(--el-hair)}
html .pc-clean .pc-stat,
html .pc-clean .pc-stat + .pc-stat{min-height:0;background:none!important;border:0;border-radius:0;box-shadow:none;padding:22px 0}
html .pc-clean .pc-stat + .pc-stat{padding-left:32px;border-left:1px solid var(--el-hair)}
html .pc-clean .pc-stat-n,
html .pc-clean .pc-stat + .pc-stat .pc-stat-n{font-size:44px;font-weight:700;color:var(--el-berry)!important}
html .pc-clean .pc-stat-l,
html .pc-clean .pc-stat + .pc-stat .pc-stat-l{color:var(--el-ink)!important}
html .pc-clean .pc-stat-s,
html .pc-clean .pc-stat + .pc-stat .pc-stat-s{color:var(--el-faint)!important}

/* continue: one soft surface */
html .pc-clean .pc-resume{background:var(--el-blush);border:0;box-shadow:none;border-radius:20px}
html .pc-clean .pc-resume:hover{background:#ECE5DC;transform:none;box-shadow:none}
html .pc-clean .pc-resume .pc-resume-txt small{color:var(--el-berry)}
html .pc-clean .pc-resume .pc-resume-txt b{color:var(--el-ink)}
html .pc-clean .pc-resume .pc-bar{background:rgba(131,109,94,.14);border:0;height:3px}
html .pc-clean .pc-resume .pc-bar i{background:var(--el-berry)}
html .pc-clean .pc-resume-art{border:0;border-radius:12px}
html .pc-clean .pc-resume-go{background:var(--el-ink);color:#fff;border:0;box-shadow:none;border-radius:999px}

/* section heads: no squiggle */
html .pc-clean .pc-sec{margin:64px 0 22px}
html .pc-clean .pc-sec h2{font-weight:700;letter-spacing:-.035em}
html .pc-clean .pc-sec h2::after{display:none}
html .pc-clean .pc-sec .pc-link{border-bottom:1px solid var(--el-hair);font-weight:600;color:var(--el-muted)}

/* start here: numbered columns split by hairlines */
html .pc-clean .pc-steps{gap:0;border-top:1px solid var(--el-hair)}
html .pc-clean .pc-step,
html .pc-clean .pc-step:nth-child(n){min-height:0;background:none!important;border:0;border-radius:0;box-shadow:none!important;padding:22px 22px 8px 0;transform:none}
html .pc-clean .pc-step + .pc-step{padding-left:22px;border-left:1px solid var(--el-hair)}
html .pc-clean .pc-step:hover{background:none;transform:none}
html .pc-clean .pc-step:hover .pc-step-t b{color:var(--el-berry)}
html .pc-clean .pc-step-n,
html .pc-clean .pc-step:nth-child(n) .pc-step-n{width:auto;height:auto;flex:none;display:block;background:none!important;border:0;border-radius:0;color:var(--el-berry)!important;font-size:12px;font-weight:700;letter-spacing:.16em}
html .pc-clean .pc-step-t b,
html .pc-clean .pc-step:nth-child(n) .pc-step-t b{color:var(--el-ink)!important}
html .pc-clean .pc-step-t span,
html .pc-clean .pc-step:nth-child(n) .pc-step-t span{color:var(--el-muted)!important}

/* courses: cover + words, no frames or colour blocks */
html .pc-clean .pc-grid{gap:44px 28px}
html .pc-clean .pc-card,
html .pc-clean .pc-card[class*="pc-tone-"]{--tone:transparent;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
html .pc-clean .pc-card:hover{transform:none;box-shadow:none}
html .pc-clean .pc-cover{aspect-ratio:4/3;border:0;border-radius:20px;background:var(--el-blush)}
html .pc-clean .pc-cover img{transition:transform .5s ease}
html .pc-clean .pc-card:hover .pc-cover img{transform:scale(1.03)}
html .pc-clean .pc-body{padding:18px 2px 0}
html .pc-clean .pc-card[class*="pc-tone-"] .pc-body h3{color:var(--el-ink)}
html .pc-clean .pc-card[class*="pc-tone-"] .pc-body p,
html .pc-clean .pc-card[class*="pc-tone-"] .pc-lab,
html .pc-clean .pc-card[class*="pc-tone-"] .pc-lab span:last-child{color:var(--el-muted)}
html .pc-clean .pc-card[class*="pc-tone-"] .pc-lab span:first-child{color:var(--el-ink)}
html .pc-clean .pc-card[class*="pc-tone-"] .pc-bar{height:3px;background:var(--el-hair);border:0}
html .pc-clean .pc-card[class*="pc-tone-"] .pc-bar i{background:var(--el-berry)}
html .pc-clean .pc-go{width:auto;border:0;border-radius:999px;background:var(--el-ink);color:#fff;box-shadow:none;font-weight:700;padding:10px 20px}
html .pc-clean .pc-go.quiet{background:none;border:1px solid var(--el-hair);color:var(--el-ink);box-shadow:none}
html .pc-clean .pc-go:hover{background:var(--el-berry);color:#fff}
html .pc-clean .pc-go.quiet:hover{background:none;border-color:var(--el-berry);color:var(--el-berry)}

/* work with Katie: image + words on one soft panel */
html .pc-clean .wk-card{background:var(--el-blush);border:0;box-shadow:none;border-radius:24px;overflow:hidden}
html .pc-clean .wk-art{border:0;border-radius:0}
html .pc-clean .wk-body{background:none}
html .pc-clean .wk-eye{color:var(--el-berry)!important}
html .pc-clean .wk-body h3{color:var(--el-ink)!important}
html .pc-clean .wk-body p:not(.wk-eye){color:var(--el-muted)!important}
html .pc-clean .wk-go,
html .pc-clean .wk-body .wk-go{background:var(--el-ink);color:#fff;border:0;box-shadow:none;border-radius:999px}

/* beta: a quiet line */
html .pc-clean .fw-beta{background:none;border:0;border-top:1px solid var(--el-hair);border-radius:0;padding:22px 0 0}
html .pc-clean .fw-beta-go{border-bottom:1px solid var(--el-hair);font-weight:600}

/* courses page title follows the welcome panel */
html .pc-courses .pc-title{border:0;box-shadow:none;border-radius:28px;background:linear-gradient(135deg,#F4EEE6,#ECE3D6)}
html .pc-courses .pc-grid .pc-card{border:0;box-shadow:none}

/* lesson rail: no outlines or offset shadows */
.app:not(.library) .rail{border-right:1px solid #E7E1D9}
.app:not(.library) .rail .rail-pad:first-of-type{border:0;box-shadow:none;background:#fff;border-radius:16px}
.app:not(.library) .prog-track{border:0;height:6px;background:#ECE6DF}
.app:not(.library) .topbar{border-bottom:1px solid #E7E1D9}
.app:not(.library) #nav.sc .item[aria-current="true"],
.app:not(.library) #nav .item[aria-current="true"]{border:0;box-shadow:none;background:#fff;color:#836D5E}
.app:not(.library) #nav.sc .item[aria-current="true"] .lt{color:#836D5E}
.app:not(.library) #nav.sc .item[aria-current="true"] .mk{background:#F1EBE3;border-color:#836D5E;color:#836D5E}
.app:not(.library) #nav.sc .item:hover{border-color:transparent}

@media (max-width:860px){html .fw-tabs{border-top:1px solid #E7E1D9}}
@media (max-width:700px){
  html .pc-clean .pc-hello{padding:34px 22px 28px;box-shadow:none}
  html .pc-clean .pc-stats{grid-template-columns:1fr 1fr}
  html .pc-clean .pc-stat + .pc-stat{padding-left:16px}
  html .pc-clean .pc-stat-n,html .pc-clean .pc-stat + .pc-stat .pc-stat-n{font-size:32px}
  html .pc-clean .pc-step + .pc-step{padding-left:0;border-left:0;border-top:1px solid var(--el-hair)}
  html .pc-clean .pc-step,html .pc-clean .pc-step:nth-child(n){padding:18px 0 12px}
}

/* ---------------------------------------------------------------------------
   Lesson player layout (28 Oct 2026, Katie): like a course player. The lesson
   sits on the left with a breadcrumb; the progress card and the lesson list
   live in a column on the right, each lesson its own soft row with a play or
   tick mark and its time. Below 1100px the classic rail/drawer stays.
--------------------------------------------------------------------------- */
#pane .crumbs,.crumbs{display:flex!important;flex-direction:row!important;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px;width:100%;max-width:none;margin:0 0 26px!important;padding:0;text-align:left;font-size:13.5px;line-height:1.4;color:#9A8F86}
#pane .crumbs>*{display:inline-block;margin:0!important;padding:0;font-size:inherit;letter-spacing:0;text-transform:none}
.crumbs button{border:0;background:none;padding:0;font:inherit;color:#6F655D;cursor:pointer}
.crumbs button:hover{color:#836D5E;text-decoration:underline;text-underline-offset:3px}
.crumbs b{font-weight:600;color:#2B2622;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36ch}

@media (min-width:1100px){
  .app:not(.library){grid-template-columns:minmax(0,1fr) 380px!important;background:#fff}
  .app:not(.library) > main{order:1;min-width:0}
  .app:not(.library) > .rail{order:2;background:#F8F7F5;border-right:0!important;border-left:1px solid #E7E1D9;padding:26px 0 0;gap:14px}
  .app:not(.library) .railclose{display:none}
  .app:not(.library) article#pane{max-width:860px;margin:0 auto;padding-left:clamp(28px,4vw,64px);padding-right:clamp(28px,4vw,64px)}

  /* rail header: back link + course name */
  .app:not(.library) .rail > .rail-pad:first-of-type{margin:0 20px;padding:0;background:none!important;border:0!important;box-shadow:none!important}
  /* progress card */
  .app:not(.library) .rail > .rail-pad:nth-of-type(2){margin:0 20px;padding:20px 20px 22px;background:#fff;border-radius:20px;box-shadow:0 18px 40px -30px rgba(131,109,94,.45)}
  .app:not(.library) .prog-label{font-size:15px;font-weight:700;color:#2B2622}
  .app:not(.library) .prog-label .n{font-size:13px;font-weight:600;color:#836D5E}
  .app:not(.library) .prog-track{height:8px!important;margin-top:14px;border:0!important;background:#ECE6DF!important;border-radius:999px}
  .app:not(.library) .prog-fill{background:#836D5E!important}
  .app:not(.library) #nextWrap{margin:0 20px;padding:0}

  /* section labels */
  .app:not(.library) #nav{padding:4px 20px 40px}
  .app:not(.library) #nav .railsep{margin:22px 4px 10px;padding:0;background:none;border:0;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#2B2622}
  .app:not(.library) #nav .steplist{gap:10px;padding:0}

  /* each lesson: a soft row */
  .app:not(.library) #nav .item,
  .app:not(.library) #nav.sc .item,
  .app:not(.library) #nav .item[aria-current="true"],
  .app:not(.library) #nav.sc .item[aria-current="true"]{
    display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;
    width:100%;margin:0;padding:12px 14px;border:0!important;border-radius:16px;background:#fff;
    box-shadow:0 10px 26px -22px rgba(37,31,34,.55);text-align:left;color:#2B2622;transition:background .15s,transform .15s}
  .app:not(.library) #nav .item:hover{transform:translateY(-1px);background:#fff}
  .app:not(.library) #nav .item .mk,
  .app:not(.library) #nav.sc .item .mk{grid-row:1/3;width:40px;height:40px;flex:none;display:grid;place-items:center;margin:0;padding:0;
    border-radius:50%;border:0!important;background:#F1EBE3!important;color:#836D5E!important;font-size:0!important;box-shadow:none!important}
  .app:not(.library) #nav .item:not(.done):not(.locked) .mk::before{content:"";width:0;height:0;margin-left:3px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}
  .app:not(.library) #nav .item.done .mk{background:#E4F2E6!important;color:#2E7D4F!important}
  .app:not(.library) #nav .item .mk .tk{width:16px;height:16px;stroke:currentColor}
  .app:not(.library) #nav .item .lt{grid-column:2;font-size:14.5px;font-weight:700;line-height:1.3;color:#2B2622}
  .app:not(.library) #nav .item .rt,
  .app:not(.library) #nav .item .rt.tm{grid-column:2;margin:0;padding:0;background:none;font-size:12.5px;font-weight:500;color:#9A8F86;justify-self:start}
  .app:not(.library) #nav .item.opt .lt::after{background:#F1EBE3;color:#836D5E}

  /* the lesson you're on */
  .app:not(.library) #nav .item[aria-current="true"],
  .app:not(.library) #nav.sc .item[aria-current="true"]{background:#836D5E;box-shadow:0 18px 36px -22px rgba(131,109,94,.8)}
  .app:not(.library) #nav .item[aria-current="true"] .lt,
  .app:not(.library) #nav.sc .item[aria-current="true"] .lt{color:#fff}
  .app:not(.library) #nav .item[aria-current="true"] .rt,
  .app:not(.library) #nav .item[aria-current="true"] .vtag{color:rgba(255,255,255,.8)}
  .app:not(.library) #nav .item[aria-current="true"] .mk,
  .app:not(.library) #nav.sc .item[aria-current="true"] .mk{background:#fff!important;color:#836D5E!important}

  /* grouped courses (Studio steps): the group header stays a quiet row */
  .app:not(.library) #nav.sc .step{border:0}
  .app:not(.library) #nav.sc .stephead{padding:14px 4px}
  .app:not(.library) #nav.sc .steplist{padding:0 0 10px}
}

/* ---------------------------------------------------------------------------
   AI Girls palette (28 Oct 2026, Katie: match the Skool course covers).
   Warm paper, cream and mushroom taupe as the base; dusty blue, rose, sage
   and pool aqua appear only as small accents, the way the covers rotate.
--------------------------------------------------------------------------- */
html .app.library,.app:not(.library){--ag-ink:#2B2622;--ag-muted:#6F655D;--ag-taupe:#836D5E;--ag-cream:#ECE3D6;--ag-paper:#F8F7F5;--ag-blue:#8A99A6;--ag-rose:#D4A196;--ag-sage:#8A9288;--ag-aqua:#8FC1C4;--ag-line:#E7E1D9}
html .app.library,html .app.library main{background:var(--ag-paper)!important}
html .fw-side{background:#fff}
html .pc-clean .pc-hello{background:var(--ag-cream)}
html .pc-clean .pc-hello::before{border-color:rgba(131,109,94,.22);box-shadow:0 0 0 36px rgba(255,255,255,.35),0 0 0 72px rgba(138,153,166,.10)}
html .pc-clean .pc-step:nth-child(4n+1) .pc-step-n{color:var(--ag-taupe)!important}
html .pc-clean .pc-step:nth-child(4n+2) .pc-step-n{color:var(--ag-blue)!important}
html .pc-clean .pc-step:nth-child(4n+3) .pc-step-n{color:var(--ag-rose)!important}
html .pc-clean .pc-step:nth-child(4n+4) .pc-step-n{color:var(--ag-sage)!important}
html .pc-clean .pc-resume{background:var(--ag-cream)}
html .pc-clean .pc-resume-go,html .pc-clean .pc-go:not(.quiet),html .pc-clean .wk-go{background:var(--ag-taupe)!important}
html .pc-clean .pc-go:not(.quiet):hover{background:var(--ag-ink)!important}
html .pc-clean .wk-card{background:var(--ag-cream)}
html .fw-item.on{color:var(--ag-taupe)}
html .fw-av{background:var(--ag-cream);color:var(--ag-ink)}
.app:not(.library){background:#fff}
@media (min-width:1100px){
  .app:not(.library) > .rail{background:var(--ag-paper)}
  .app:not(.library) #nav .item .mk,.app:not(.library) #nav.sc .item .mk{background:var(--ag-cream)!important;color:var(--ag-taupe)!important}
  .app:not(.library) #nav .item.done .mk{background:#E3E7E2!important;color:var(--ag-sage)!important}
  .app:not(.library) #nav .item[aria-current="true"],.app:not(.library) #nav.sc .item[aria-current="true"]{background:var(--ag-taupe)}
}

/* ---------------------------------------------------------------------------
   Fun layer (28 Oct 2026, js/fun.js): streak chip, Today's one thing, live
   build-along + New this week, milestones, wins wall, confetti and toasts.
   AI Girls palette; the cover accents (blue, rose, sage, aqua) rotate here.
--------------------------------------------------------------------------- */
.fun-kicker{margin:0 0 8px!important;font-size:11px!important;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#836D5E!important;display:flex;align-items:center;gap:8px}
.fun-streak{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0!important;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.7);font-size:13px!important;font-weight:700;color:#2B2622!important}
.fun-streak .fun-flame{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ECE3D6;color:#836D5E;font-size:13px}
.fun-streak.on .fun-flame{background:#D4A196;color:#fff;animation:funPulse 2.4s ease-in-out infinite}
@keyframes funPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* today's one thing */
.fun-today{display:flex;align-items:center;gap:22px;margin:22px 0 0;padding:22px 24px;border-radius:24px;background:#fff;box-shadow:0 24px 50px -38px rgba(43,38,34,.45)}
.fun-today-ring{flex:none;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#836D5E var(--p),#ECE3D6 0);position:relative}
.fun-today-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.fun-today-ring span{position:relative;font-size:15px;font-weight:800;color:#2B2622}
.fun-today-mark{flex:none;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#8A9288;color:#fff;font-size:32px;font-weight:700}
.fun-today-copy{flex:1;min-width:0}
.fun-today h2{margin:0!important;font-size:clamp(20px,2.2vw,26px)!important;font-weight:700;letter-spacing:-.03em;color:#2B2622}
.fun-today-copy p:not(.fun-kicker){margin:6px 0 0!important;font-size:14px;color:#6F655D}
.fun-today-go{flex:none;display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border:0;border-radius:999px;background:#836D5E;color:#fff!important;font:700 14px/1 var(--lx-font,inherit);cursor:pointer;text-decoration:none;transition:background .2s,transform .2s}
.fun-today-go:hover{background:#2B2622;transform:translateY(-1px)}
.fun-today-go.quiet{background:#ECE3D6;color:#2B2622!important}
.fun-today.done{background:#F2F4F1}

/* live + new */
.fun-two{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;margin-top:22px}
.fun-two:has(> :only-child){grid-template-columns:1fr}
.fun-live,.fun-new{border-radius:24px;padding:22px 24px;min-width:0}
.fun-live{background:#8A99A6;color:#fff}
.fun-live .fun-kicker{color:#fff!important;opacity:.9}
.fun-live h3{margin:4px 0 6px!important;font-size:28px!important;font-weight:800;letter-spacing:-.04em;color:#fff}
.fun-live p:not(.fun-kicker){margin:0 0 16px!important;font-size:14px;color:rgba(255,255,255,.88)!important}
.fun-live-go{display:inline-flex;gap:8px;padding:11px 18px;border-radius:999px;background:#fff;color:#2B2622!important;font-weight:700;font-size:13.5px;text-decoration:none}
.fun-dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:funLive 1.6s infinite}
@keyframes funLive{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.fun-new{background:#ECE3D6}
.fun-new ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.fun-new li a,.fun-new li>b{display:block}
.fun-new li a,.fun-new li{color:inherit;text-decoration:none}
.fun-new li{padding:10px 0;border-top:1px solid rgba(131,109,94,.18)}
.fun-new li:first-child{border-top:0}
.fun-new b{font-size:15px;font-weight:700;color:#2B2622}
.fun-new small{display:block;margin-top:2px;font-size:13px;color:#6F655D}
.fun-tag{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:999px;background:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#836D5E;vertical-align:2px}
.fun-new li:nth-child(2) .fun-tag{color:#8A99A6}.fun-new li:nth-child(3) .fun-tag{color:#8A9288}

/* milestones */
.fun-count{margin-left:auto;font-size:13px;font-weight:700;color:#836D5E}
.fun-badge-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.fun-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 10px;border-radius:20px;background:#fff;opacity:.55;filter:grayscale(1)}
.fun-badge.got{opacity:1;filter:none;box-shadow:0 18px 40px -32px rgba(43,38,34,.5)}
.fun-badge-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#fff;background:#C9BFB5}
.fun-badge.got:nth-child(6n+1) .fun-badge-ic{background:#836D5E}
.fun-badge.got:nth-child(6n+2) .fun-badge-ic{background:#D4A196}
.fun-badge.got:nth-child(6n+3) .fun-badge-ic{background:#8A99A6}
.fun-badge.got:nth-child(6n+4) .fun-badge-ic{background:#8A9288}
.fun-badge.got:nth-child(6n+5) .fun-badge-ic{background:#8FC1C4}
.fun-badge.got:nth-child(6n+6) .fun-badge-ic{background:#2B2622}
.fun-badge b{font-size:13.5px;color:#2B2622}
.fun-badge small{font-size:11.5px;line-height:1.35;color:#6F655D}

/* wins wall */
.fun-win-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fun-win{margin:0;padding:22px;border-radius:22px;background:#ECE3D6}
.fun-win.t1{background:#E6EAEE}.fun-win.t2{background:#F3E4DE}.fun-win.t3{background:#E8ECE7}
.fun-win blockquote{margin:0;font-size:16px;line-height:1.5;font-weight:600;color:#2B2622}
.fun-win figcaption{margin-top:12px;font-size:12.5px;font-weight:700;color:#836D5E}
.fun-win figcaption span{font-weight:500;color:#6F655D}
.fun-win-empty{display:flex;align-items:center;gap:20px;padding:24px;border-radius:24px;background:#ECE3D6}
.fun-win-empty>span{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#D4A196;color:#fff;font-size:22px}
.fun-win-empty>div{flex:1;min-width:0}
.fun-win-empty b{font-size:16px;color:#2B2622}
.fun-win-empty p{margin:4px 0 0!important;font-size:14px;color:#6F655D}

/* confetti + toast */
.fun-confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.fun-confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;animation:funFall linear forwards}
@keyframes funFall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--x),105vh) rotate(var(--r));opacity:.9}}
.fun-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:10000;display:flex;align-items:center;gap:12px;max-width:min(420px,calc(100% - 32px));padding:14px 20px 14px 14px;border-radius:999px;background:#2B2622;color:#fff;box-shadow:0 24px 60px -20px rgba(43,38,34,.6);transform:translate(-50%,30px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.fun-toast.on{transform:translate(-50%,0);opacity:1}
.fun-toast-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#D4A196;font-size:17px}
.fun-toast b{display:block;font-size:14.5px}
.fun-toast small{display:block;font-size:12.5px;opacity:.8}

@media (max-width:900px){.fun-two{grid-template-columns:1fr}.fun-badge-row{grid-template-columns:repeat(3,minmax(0,1fr))}.fun-win-grid{grid-template-columns:1fr}}
@media (max-width:560px){.fun-today{flex-wrap:wrap}.fun-today-go{width:100%;justify-content:center}.fun-win-empty{flex-wrap:wrap}.fun-badge-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.fun-streak.on .fun-flame,.fun-dot{animation:none}.fun-toast{transition:none}}
.fun-live h3,.fun-today h2,.fun-win-empty b{border:0!important;padding:0!important}
.fun-two>*{width:auto!important;max-width:none!important;margin:0!important}
html .pc-clean .pc-sec .fun-count{background:none;box-shadow:none;padding:0;color:#836D5E}

/* ---------------------------------------------------------------------------
   Soft blush (28 Oct 2026, Katie: "more feminine, very light blush pinks").
   Whisper-light pinks under the AI Girls taupe; buttons stay mushroom.
--------------------------------------------------------------------------- */
html .app.library,.app:not(.library){--ag-blush:#F8EBE7;--ag-blush-2:#FCF5F3;--ag-blush-3:#F3DDD7;--ag-paper:#FDF9F8}
html .app.library,html .app.library main{background:var(--ag-paper)!important}
html .fw-side{background:var(--ag-blush-2);border-right-color:#F1E3DF}
html .fw-item:hover{background:#fff}
html .fw-item.on{background:#fff;box-shadow:0 10px 24px -16px rgba(212,161,150,.7)}
html .fw-item.on::after{background:#D4A196}
html .fw-av{background:var(--ag-blush-3)}
html .pc-clean .pc-hello{background:linear-gradient(135deg,#FBF0ED 0%,#F8EBE7 50%,#F3E3DC 100%)}
html .pc-clean .pc-hello::before{border-color:rgba(212,161,150,.35);box-shadow:0 0 0 36px rgba(255,255,255,.4),0 0 0 72px rgba(212,161,150,.10)}
html .pc-hero-progress{background:conic-gradient(#D4A196 var(--hub-progress),rgba(212,161,150,.18) 0)}
html .pc-hero-progress::before{background:#FFFAF8}
.fun-streak{background:#fff}
.fun-today{box-shadow:0 24px 50px -36px rgba(212,161,150,.6)}
.fun-today-ring{background:conic-gradient(#D4A196 var(--p),#F8EBE7 0)}
.fun-today.done{background:var(--ag-blush-2)}
.fun-new{background:var(--ag-blush)}
.fun-win-empty{background:var(--ag-blush)}
.fun-win{background:var(--ag-blush)}
.fun-badge{background:#fff}
.fun-badge.got{box-shadow:0 18px 40px -30px rgba(212,161,150,.7)}
html .pc-clean .pc-resume{background:var(--ag-blush)}
html .pc-clean .pc-stat-n,html .pc-clean .pc-stat + .pc-stat .pc-stat-n{color:#C98E82!important}
html .pc-clean .pc-cover{background:var(--ag-blush)}
html .pc-clean .wk-card{background:var(--ag-blush)}
html .pc-clean .pc-bar,html .pc-clean .pc-card[class*="pc-tone-"] .pc-bar{background:#F3E3DE!important}
html .pc-clean .pc-step-n{color:#C98E82!important}
html .pc-clean .ta-appban .ic{background:var(--ag-blush)}
.fun-toast-ic{background:#E8B9AE}
.fun-confetti i:nth-child(4n){background:#F3D3CB!important}
@media (min-width:1100px){
  .app:not(.library) > .rail{background:var(--ag-blush-2);border-left-color:#F1E3DF}
  .app:not(.library) #nav .item .mk,.app:not(.library) #nav.sc .item .mk{background:var(--ag-blush)!important;color:#C98E82!important}
  .app:not(.library) .prog-track{background:#F3E3DE!important}
  .app:not(.library) .prog-fill{background:#D4A196!important}
  .app:not(.library) #nav .item{box-shadow:0 10px 26px -22px rgba(212,161,150,.65)}
}
.fun-live{background:linear-gradient(135deg,#F3D9D2,#EBC9C0);color:#2B2622}
.fun-live .fun-kicker{color:#9A6A5F!important;opacity:1}
.fun-live h3{color:#2B2622}
.fun-live p:not(.fun-kicker){color:#6F5A54!important}
.fun-live-go{background:#836D5E;color:#fff!important}
.fun-dot{background:#C98E82}

/* ---------------------------------------------------------------------------
   Light + blush (29 Oct 2026, Katie: "a white side panel and light grey
   background with blush accents like most platforms"). Replaces the earthy
   charcoal pass: light warm grey page, white sidebar and cards, charcoal ink
   for type and buttons, blush for small accents (progress, streak, labels).
--------------------------------------------------------------------------- */
:root,html .app.library,.app:not(.library){
  --ch-bg:#F5F4F2;--ch-panel:#FFFFFF;--ch-panel-2:#F8ECE9;--ch-line:rgba(43,38,34,0.072);--ch-line-2:rgba(43,38,34,0.12);
  --ch-cream:#2B2622;--ch-cream-2:#4A423C;--ch-muted:#7A6F67;--ch-faint:#A39890;--ch-blush:#D49A8C;--ch-blush-2:#C48576;
  /* lesson tokens (app.css) */
  --ground:#F5F4F2;--rail:#FFFFFF;--surface:#FFFFFF;--ink:#2B2622;--muted:#7A6F67;--faint:#A39890;--rule:rgba(43,38,34,0.084);--rule-soft:rgba(43,38,34,0.048);
  --pill:#F8ECE9;--accent:#2B2622;--accent-2:#D49A8C;--accent-soft:#FFFFFF;--taupe:#F8ECE9;--lime:#D49A8C;--seal:#D49A8C;--seal-ink:#F5F4F2;
  --paper:#F5F4F2;--card:#FFFFFF;--edge:rgba(43,38,34,0.072);--edge-soft:#FFFFFF;
  --lx-ink:#2B2622;--lx-muted:#7A6F67;--lx-faint:#A39890;--lx-line:rgba(43,38,34,0.072);--lx-line-2:rgba(43,38,34,0.12);--lx-wash:#FFFFFF;--lx-white:#FFFFFF;
  --el-ink:#2B2622;--el-muted:#7A6F67;--el-faint:#A39890;--el-berry:#D49A8C;--el-blush:#FFFFFF;--el-blush-2:#F5F4F2;--el-hair:rgba(43,38,34,0.072);
  --ag-ink:#2B2622;--ag-muted:#7A6F67;--ag-taupe:#2B2622;--ag-cream:#FFFFFF;--ag-paper:#F5F4F2;--ag-line:rgba(43,38,34,0.072);--ag-blush:#FFFFFF;--ag-blush-2:#F5F4F2;--ag-blush-3:#F8ECE9;
  --hair:rgba(43,38,34,0.072);--soft:#FFFFFF;
  color-scheme:light;
}
html,body{background:#F5F4F2!important;color:#2B2622}
html .app.library,html .app.library main,.app,.app main,.app:not(.library) article#pane{background:#F5F4F2!important;color:#2B2622}

/* sidebar */
html .fw-side{background:#FFFFFF!important;border-right:1px solid rgba(43,38,34,0.048)!important}
html .fw-sep,html .fw-kid-sep{color:#A39890!important}
html .fw-item,html .fw-kid{color:#7A6F67!important}
html .fw-item:hover,html .fw-kid:hover{background:rgba(43,38,34,0.036)!important;color:#2B2622!important}
html .fw-item.on{background:#FFFFFF!important;color:#2B2622!important;box-shadow:none!important}
html .fw-item.on svg{color:#D49A8C!important}
html .fw-item.on::after{background:#D49A8C!important}
html .fw-kids{border-left-color:rgba(43,38,34,0.072)!important}
html .fw-av{background:#D49A8C!important;color:#2B2622!important}
html .fw-menu{background:#FFFFFF!important;border-color:rgba(43,38,34,0.072)!important}
html .fw-tabs{background:rgba(255,255,255,.97)!important;border-top-color:rgba(43,38,34,0.06)!important}

/* type on the welcome + courses pages */
html .pc-clean h1,html .pc-clean h2,html .pc-clean h3,html .pc-clean b,html .pc-courses h1,html .pc-courses h2,html .pc-courses h3{color:#2B2622!important}
html .pc-clean p,html .pc-clean small,html .pc-clean .pc-body p,html .pc-clean .pc-stat-s,html .pc-clean .lib-sub,html .pc-courses p{color:#7A6F67!important}
html .pc-clean .pc-eyebrow,html .pc-clean .fun-kicker,html .pc-clean .wk-eye,html .fun-count,html .pc-clean .pc-resume-txt small{color:#D49A8C!important}

/* surfaces */
html .pc-clean .pc-hello,html .pc-courses .pc-title{background:#FFFFFF!important;box-shadow:none!important}
html .pc-clean .pc-hello::before{border-color:rgba(212,154,140,.22)!important;box-shadow:0 0 0 36px rgba(43,38,34,0.018),0 0 0 72px rgba(212,154,140,.05)!important}
html .pc-hero-progress{background:conic-gradient(#D49A8C var(--hub-progress),rgba(43,38,34,0.072) 0)!important}
html .pc-hero-progress::before{background:#FFFFFF!important}
html .pc-hero-progress b{color:#2B2622!important}
html .pc-hero-progress small{color:#7A6F67!important}
.fun-streak{background:rgba(43,38,34,0.048)!important;color:#2B2622!important}
.fun-streak .fun-flame{background:#F8ECE9!important;color:#D49A8C!important}
.fun-streak.on .fun-flame{background:#D49A8C!important;color:#2B2622!important}
.fun-today,.fun-today.done{background:#FFFFFF!important;box-shadow:none!important}
.fun-today-ring{background:conic-gradient(#D49A8C var(--p),rgba(43,38,34,0.072) 0)!important}
.fun-today-ring::before{background:#FFFFFF!important}
.fun-today-ring span{color:#2B2622!important}
.fun-today-mark{background:#D49A8C!important;color:#2B2622!important}
.fun-live,.fun-new,.fun-win,.fun-win-empty,.fun-badge{background:#FFFFFF!important;color:#2B2622!important;box-shadow:none!important}
.fun-live h3,.fun-new b,.fun-win blockquote,.fun-win-empty b,.fun-badge b{color:#2B2622!important}
.fun-live p:not(.fun-kicker),.fun-new small,.fun-win-empty p,.fun-badge small{color:#7A6F67!important}
.fun-live .fun-kicker{color:#D49A8C!important}
.fun-new li{border-top-color:rgba(43,38,34,0.06)!important}
.fun-tag{background:#F8ECE9!important;color:#D49A8C!important}
.fun-badge{opacity:.5}
.fun-badge.got{opacity:1}
.fun-badge-ic{background:#F8ECE9!important;color:#A39890!important}
.fun-badge.got .fun-badge-ic{background:#D49A8C!important;color:#2B2622!important}
.fun-win-empty>span{background:#D49A8C!important;color:#2B2622!important}
.fun-win figcaption{color:#D49A8C!important}
html .pc-clean .pc-resume{background:#FFFFFF!important}
html .pc-clean .pc-resume .pc-bar,html .pc-clean .pc-bar,html .pc-clean .pc-card[class*="pc-tone-"] .pc-bar{background:rgba(43,38,34,0.072)!important}
html .pc-clean .pc-bar i,html .pc-clean .pc-resume .pc-bar i,html .pc-clean .pc-card[class*="pc-tone-"] .pc-bar i{background:#D49A8C!important}
html .pc-clean .pc-stats,html .pc-clean .pc-stat+.pc-stat,html .pc-clean .pc-steps,html .pc-clean .pc-step+.pc-step,html .pc-clean .fw-beta,html .pc-clean .ta-appban{border-color:rgba(43,38,34,0.072)!important}
html .pc-clean .pc-stat-n,html .pc-clean .pc-stat+.pc-stat .pc-stat-n,html .pc-clean .pc-step-n,html .pc-clean .pc-step:nth-child(n) .pc-step-n{color:#D49A8C!important}
html .pc-clean .pc-step-t b,html .pc-clean .pc-step:nth-child(n) .pc-step-t b{color:#2B2622!important}
html .pc-clean .pc-step-t span,html .pc-clean .pc-step:nth-child(n) .pc-step-t span{color:#7A6F67!important}
html .pc-clean .pc-cover{background:#FFFFFF!important}
html .pc-clean .wk-card{background:#FFFFFF!important}
html .pc-clean .ta-appban .ic{background:#FFFFFF!important;color:#2B2622}
html .pc-clean .ta-appban .tx,html .pc-clean .ta-appban .tx b{color:#2B2622!important}
html .pc-clean .ta-appban .no{color:#7A6F67!important}
html .pc-clean .pc-sec .pc-link,html .pc-clean .fw-beta-go{color:#2B2622!important;border-color:rgba(43,38,34,0.15)!important}

/* buttons: charcoal ink with light text; quiet ones are outlined */
html .pc-clean .pc-go:not(.quiet),html .pc-clean .pc-resume-go,html .pc-clean .wk-go,html .pc-clean .wk-body .wk-go,.fun-today-go,.fun-live-go,html .pc-courses .pc-go:not(.quiet){background:#2B2622!important;color:#F5F4F2!important;border:0!important}
html .pc-clean .pc-go:not(.quiet):hover,.fun-today-go:hover,.fun-live-go:hover{background:#D49A8C!important;color:#2B2622!important}
html .pc-clean .pc-go.quiet,.fun-today-go.quiet,html .pc-clean .ta-appban .go,html .pc-courses .pc-go.quiet{background:none!important;color:#2B2622!important;border:1px solid rgba(43,38,34,0.15)!important}
html .pc-clean .pc-go.quiet:hover{border-color:#D49A8C!important;color:#D49A8C!important}
.fun-toast{background:#2B2622!important;color:#F5F4F2!important}
.fun-toast-ic{background:#D49A8C!important;color:#2B2622!important}

/* courses page cards */
html .pc-courses .pc-card,html .pc-courses .pc-grid .pc-card{background:#FFFFFF!important;border:0!important;box-shadow:none!important}
html .pc-courses .pc-card *{color:inherit}

/* the Studio and other library pages: soften light panels */
html .app.library .st-shared,html .app.library .st-full,html .app.library .st-full-tool{background:#FFFFFF!important;color:#2B2622!important;border-color:rgba(43,38,34,0.072)!important;box-shadow:none!important}
html .app.library .st-band{background:#FFFFFF!important}
html .app.library .st-cta{background:#2B2622!important;color:#F5F4F2!important}

/* lessons */
.app:not(.library) .topbar{background:#FFFFFF!important;border-bottom-color:rgba(43,38,34,0.048)!important}
.app:not(.library) .topbar .brand,.app:not(.library) .topbar .linkbtn{color:#2B2622!important}
.app:not(.library) > .rail,.app:not(.library) .rail{background:#FFFFFF!important;border-color:rgba(43,38,34,0.048)!important}
.app:not(.library) .rail .rail-pad:nth-of-type(2),.app:not(.library) .rail .rail-pad:first-of-type{color:#2B2622}
.app:not(.library) .rail-title,.app:not(.library) .prog-label,.app:not(.library) #nav .railsep{color:#2B2622!important}
.app:not(.library) .rail-back,.app:not(.library) .byline{color:#7A6F67!important}
.app:not(.library) .prog-label .n{color:#D49A8C!important}
.app:not(.library) .prog-track{background:rgba(43,38,34,0.072)!important}
.app:not(.library) .prog-fill{background:#D49A8C!important}
.app:not(.library) #nav .item,.app:not(.library) #nav.sc .item{background:#FFFFFF!important;box-shadow:none!important;color:#2B2622!important}
.app:not(.library) #nav .item:hover{background:#F8ECE9!important}
.app:not(.library) #nav .item .lt{color:#2B2622!important}
.app:not(.library) #nav .item .rt{color:#A39890!important}
.app:not(.library) #nav .item .mk,.app:not(.library) #nav.sc .item .mk{background:#F8ECE9!important;color:#D49A8C!important}
.app:not(.library) #nav .item.done .mk{background:rgba(212,154,140,.2)!important;color:#D49A8C!important}
.app:not(.library) #nav .item[aria-current="true"],.app:not(.library) #nav.sc .item[aria-current="true"]{background:#2B2622!important}
.app:not(.library) #nav .item[aria-current="true"] .lt,.app:not(.library) #nav.sc .item[aria-current="true"] .lt{color:#F5F4F2!important}
.app:not(.library) #nav .item[aria-current="true"] .rt{color:#A39890!important}
.app:not(.library) #nav .item[aria-current="true"] .mk{background:#D49A8C!important;color:#2B2622!important}
.app:not(.library) #nav .item.opt .lt::after{background:#F8ECE9!important;color:#D49A8C!important}
#pane,#pane p,#pane li{color:#4A423C}
#pane h1,#pane h2,#pane h3,#pane h4,#pane b,#pane strong{color:#2B2622}
#pane a{color:#B87768}
#pane .crumbs,#pane .crumbs button{color:#A39890!important}
#pane .crumbs b{color:#2B2622!important}
#pane .chip{background:none!important;color:#D49A8C!important}
#pane .chip::after,#pane .chip::before{display:none}
#pane .script{color:#A39890!important}
#pane table,#pane th,#pane td{border-color:rgba(43,38,34,0.084)!important}
#pane th{background:#FFFFFF!important;color:#2B2622!important}
#pane pre,#pane code{background:#FFFFFF!important;color:#2B2622!important;border-color:rgba(43,38,34,0.072)!important}
#pane .sk-card,#pane .tip,#pane .dia,#pane .prompt,#pane .ckwrap,#pane .calc,#pane .stats>*,#pane .proofs>*,#pane .exgrid>*,#pane [class*="card"]{background:#FFFFFF!important;border-color:rgba(43,38,34,0.072)!important;box-shadow:none!important;color:#4A423C}
#pane [style*="background:#fff" i],#pane [style*="background: #fff" i],#pane [style*="background:white" i]{background:#FFFFFF!important}
.lesson-foot .mark{background:#2B2622!important;color:#F5F4F2!important;border:0!important}
.lesson-foot .undo{color:#7A6F67!important}
.ta-edit-btn{background:#FFFFFF!important;color:#2B2622!important;border-color:rgba(43,38,34,0.09)!important}
#pane .wel-cta,#pane .btn,#pane .cta{background:#2B2622!important;color:#F5F4F2!important;border:0!important}
#pane .wel-cta:hover,#pane .btn:hover,#pane .cta:hover{background:#D49A8C!important}
#pane .lnav{background:#FFFFFF!important;color:#2B2622!important;border-color:rgba(43,38,34,0.072)!important}

/* light-theme finishing: cards lift off the grey, the sidebar stays white */
html .fw-side{background:#fff!important;border-right:1px solid #ECE8E4!important}
html .fw-item.on{background:#FBEEEB!important;color:#2B2622!important}
html .fw-item.on svg{color:#C48576!important}
html .pc-clean .pc-hello,html .pc-courses .pc-title,.fun-today,.fun-today.done,.fun-live,.fun-new,.fun-win,.fun-win-empty,.fun-badge,html .pc-clean .pc-resume,html .pc-clean .wk-card,html .pc-courses .pc-card,html .pc-courses .pc-grid .pc-card,html .pc-clean .pc-card{background:#fff!important;border:1px solid #EEEAE6!important;box-shadow:0 1px 2px rgba(43,38,34,.04),0 12px 32px -24px rgba(43,38,34,.18)!important}
html .pc-clean .pc-hello{background:linear-gradient(135deg,#fff 0%,#fff 55%,#FBEEEB 100%)!important}
html .pc-clean .pc-eyebrow,html .pc-clean .fun-kicker,html .pc-clean .wk-eye,html .fun-count,.fun-live .fun-kicker,#pane .chip,html .pc-clean .pc-stat-n,html .pc-clean .pc-stat+.pc-stat .pc-stat-n,html .pc-clean .pc-step-n,html .pc-clean .pc-step:nth-child(n) .pc-step-n,.app:not(.library) .prog-label .n{color:#B87768!important}
.fun-tag{background:#FBEEEB!important;color:#B87768!important}
/* lessons: white reading page, white rail, soft grey lesson rows */
.app:not(.library),.app:not(.library) main,.app:not(.library) article#pane{background:#fff!important}
.app:not(.library) > .rail,.app:not(.library) .rail{background:#fff!important;border-left:1px solid #ECE8E4!important}
.app:not(.library) .rail .rail-pad:nth-of-type(2){background:#F5F4F2!important}
.app:not(.library) #nav .item,.app:not(.library) #nav.sc .item{background:#F5F4F2!important}
.app:not(.library) #nav .item:hover{background:#EFEDEA!important}
.app:not(.library) #nav .item[aria-current="true"],.app:not(.library) #nav.sc .item[aria-current="true"]{background:#FBEEEB!important;box-shadow:inset 0 0 0 1px #F0D6CF!important}
.app:not(.library) #nav .item[aria-current="true"] .lt,.app:not(.library) #nav.sc .item[aria-current="true"] .lt{color:#2B2622!important}
.app:not(.library) #nav .item[aria-current="true"] .rt{color:#A39890!important}
.app:not(.library) #nav .item[aria-current="true"] .mk{background:#D49A8C!important;color:#fff!important}
.app:not(.library) #nav .item .mk,.app:not(.library) #nav.sc .item .mk{background:#fff!important;color:#D49A8C!important}
#pane .sk-card,#pane .tip,#pane .dia,#pane .prompt,#pane .ckwrap,#pane .calc,#pane .stats>*,#pane .proofs>*,#pane .exgrid>*,#pane [class*="card"],#pane .lnav,#pane th{background:#F7F6F4!important}
#pane pre,#pane code{background:#F5F4F2!important}

/* ==========================================================================
   Typewriter headings (28 Oct 2026, Katie picked Special Elite).
   Special Elite for headings and small labels; Plus Jakarta Sans for the rest.
   ========================================================================== */
:root{--tw:"Special Elite","Courier New",ui-monospace,monospace;--f-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif}
html .lib-h1,html .pc-sec h2,.fun-today h2,.fun-live h3,html .pc-body h3,html .wk-body h3,#pane h1,#pane h2,.rail-title,html .pc-hero-progress b,html .pc-stat-n{font-family:var(--tw)!important;font-weight:400!important;letter-spacing:-.01em!important}
html .pc-hello .lib-h1{font-size:clamp(38px,5vw,60px)!important;line-height:1.08!important}
#pane h1{line-height:1.12!important}
html .pc-eyebrow,.fun-kicker,html .pc-step-n,.fun-count,.fun-tag,#nav .railsep,#pane .crumbs,#pane .chip,#pane .script,.prog-label,.rail-back{font-family:var(--tw)!important;font-weight:400!important;letter-spacing:.05em!important}
html .pc-eyebrow,.fun-kicker,#nav .railsep,#pane .chip,#pane .script{text-transform:uppercase}

/* ==========================================================================
   One menu everywhere (29 Oct 2026, Katie: "the side bar should always be
   visible"). The same white menu sits on the left on every page, lessons
   included, fully open. The lesson list stays on the right. Below 1100px
   lessons keep their own layout.
   ========================================================================== */
@media (min-width:1100px){
  .app:not(.library):has(#fwNav){grid-template-columns:248px minmax(0,1fr) 340px!important}
  .app:not(.library) #fwNav{--lx-font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;display:block;order:0;min-width:0}
  .app:not(.library) > main{order:1;min-width:0}
  .app:not(.library) > .rail{order:2}
  .app:not(.library) #fwNav .fw-side{width:auto}
  .app:not(.library) article#pane{padding-left:clamp(24px,3.4vw,56px)!important;padding-right:clamp(24px,3.4vw,56px)!important}
}
@media (min-width:1500px){
  .app:not(.library):has(#fwNav){grid-template-columns:264px minmax(0,1fr) 380px!important}
}

/* "Want more?" inside The Reel You and Uncringe (29 Oct 2026) */
.st-more{margin-top:28px;padding:22px 22px 18px;border:1px solid #EEEAE6;border-radius:18px;background:#fff}
.st-more-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}
.st-more-item{display:flex;flex-direction:column;gap:6px;text-align:left;border:1px solid #EEEAE6;background:#FAF9F7;border-radius:14px;padding:16px;cursor:pointer;font:inherit;color:#2B2622;transition:border-color .15s,transform .15s}
.st-more-item:hover{border-color:#E7C3B9;transform:translateY(-1px)}
.st-more-item b{font-size:15px;font-weight:700}
.st-more-item span{font-size:13.5px;line-height:1.45;color:#7A6F67}
.st-more-item i{margin-top:auto;padding-top:6px;font-style:normal;font-size:13px;font-weight:600;color:#B87768}
.st-more .st-fine{margin:12px 0 0}