/* Workshop hub (pages/workshop.html) , extracted from inline <style> blocks
   Generated from the live page. Keep this file linked after style-workshop-bundle.css
   so the hub's own rules keep their cascade position. */

/* Override shared body dark background for this light-themed page */
body { background: var(--beige); color: var(--charcoal); }

/* The hub keeps a light page in dark mode, but a few sections turn dark; their
   headings must flip light (A1654). */
[data-theme="dark"] #ws-age-title,
[data-theme="dark"] .jvds-today-spark h2 { color: var(--beige, #F0EAD6) !important; }
/* Restore variables not in style-shared.css */
:root { --white: #ffffff; --rose-lt: #f5e0e0; --teal-lt: #e0edef; }
/* Override dark header from style-shared.css to restore light theme */
.site-header {
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(64,59,51,0.08) !important;
    box-shadow: 0 2px 16px rgba(64,59,51,0.07) !important;
}
.header-inner { height: 68px; }
.nav-link { color: #5a5449 !important; }
.nav-link:hover { background: #F0EAD6; color: #403B33 !important; }
.nav-link.active { background: rgba(188,71,73,0.15); color: #BC4749 !important; }
/* Reduce hero padding */
.ws-hero { padding: 64px 28px 56px !important; }
/* Keep the shared desktop nav visible; only switch to the stacked menu on mobile. */
@media (max-width: 700px) {
    .main-nav {
        display: none;
        flex-direction: column;
        background: white;
        border-top: 1px solid rgba(64,59,51,0.08);
        padding: 12px 28px 20px;
        gap: 4px;
    }
    .main-nav.open { display: flex; }
    .main-nav a {
        font-weight: 600;
        color: var(--charcoal-lt);
        padding: 10px 14px;
        border-radius: 8px;
        transition: background 0.15s, color 0.15s;
    }
}

/* ══════════════════════════════════════════════
   VISUAL OVERHAUL v3 , Workshop
   ══════════════════════════════════════════════ */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--rose);color:#fff}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--tan-dk),var(--teal-dk));border-radius:99px;border:2px solid var(--bg-primary)}

.ws-hero,.ws-section,.courses-section,.behind-section{scroll-margin-top:104px}

/* ── Scroll reveal ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ══════════ HERO ══════════ */
.ws-hero{
  position:relative;overflow:hidden;
  padding:110px 28px 90px;
  border-bottom:none;
  background:
    radial-gradient(1200px 520px at 88% -12%, rgba(188,71,73,.15), transparent 60%),
    radial-gradient(900px 420px at -12% 32%, rgba(112,163,167,.20), transparent 60%),
    radial-gradient(760px 400px at 55% 118%, rgba(210,180,140,.24), transparent 65%),
    var(--beige);
}
[data-theme="dark"] .ws-hero{
  background:
    radial-gradient(1200px 520px at 88% -12%, rgba(188,71,73,.17), transparent 60%),
    radial-gradient(900px 420px at -12% 32%, rgba(78,125,128,.24), transparent 60%),
    radial-gradient(760px 400px at 55% 118%, rgba(184,149,106,.12), transparent 65%),
    var(--bg-primary)!important;
}
.ws-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(64,59,51,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(64,59,51,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 92% 82% at 50% 38%,black 28%,transparent 76%);
  mask-image:radial-gradient(ellipse 92% 82% at 50% 38%,black 28%,transparent 76%);
}
[data-theme="dark"] .ws-hero::before{
  background-image:
    linear-gradient(rgba(240,234,214,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,234,214,.05) 1px,transparent 1px);
}
.ws-hero-inner{position:relative;z-index:2;gap:56px}

@keyframes ws-drift{
  from{transform:translateY(0) rotate(var(--r0,0deg))}
  to{transform:translateY(-24px) rotate(var(--r1,12deg))}
}
.ws-hero-deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.ws-hero-deco span{
  position:absolute;left:var(--x);top:var(--y);
  font-size:var(--s,2.4rem);opacity:.17;filter:saturate(.85);
  animation:ws-drift var(--d,9s) var(--dl,0s) ease-in-out infinite alternate;
}

.ws-kicker{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(188,71,73,.09);
  border:1px solid rgba(188,71,73,.28);
  color:var(--rose)!important;
  padding:7px 16px;border-radius:999px;margin-bottom:20px;
}
[data-theme="dark"] .ws-kicker{background:rgba(188,71,73,.16);color:#e89193!important;border-color:rgba(188,71,73,.38)}
@keyframes ws-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.55}}
.ws-kicker::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--rose);animation:ws-pulse 2.2s ease-in-out infinite}

.ws-title{
  font-family:'Fredoka',sans-serif;font-weight:700;
  font-size:clamp(3rem,7vw,4.9rem);
  line-height:.98;letter-spacing:-.015em;
  margin-bottom:20px;
}
.ws-title span{
  background:linear-gradient(120deg,var(--rose) 15%,#e0561e 55%,var(--tan-dk) 95%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--rose);
}
.ws-sub{font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.75;max-width:540px}
[data-theme="dark"] .ws-sub{color:var(--text-secondary)!important}

.ws-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ws-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:800;font-size:.95rem;text-decoration:none;
  padding:14px 28px;border-radius:999px;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s;
}
.ws-btn:active{transform:translateY(2px)}
.ws-btn-main{
  background:linear-gradient(135deg,var(--rose),var(--rose-dk));
  color:#fff;box-shadow:0 6px 20px rgba(188,71,73,.35);
}
.ws-btn-main:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(188,71,73,.45)}
.ws-btn-ghost{background:transparent;color:var(--teal-dk);border:2px solid var(--teal-dk)}
.ws-btn-ghost:hover{background:var(--teal-dk);color:#fff;transform:translateY(-3px)}
[data-theme="dark"] .ws-btn-ghost{color:var(--teal);border-color:var(--teal)}
[data-theme="dark"] .ws-btn-ghost:hover{color:#10201f}

.ws-pills{margin-top:24px;gap:9px}
.ws-pill{
  padding:8px 16px;font-size:.76rem;
  box-shadow:0 3px 10px rgba(0,0,0,.10);
  transition:transform .2s,box-shadow .2s;
}
.ws-pill:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:0 8px 18px rgba(0,0,0,.16)}

.ws-hero-imgwrap{
  border-radius:20px;overflow:hidden;max-width:290px;width:100%;
  border:4px solid #fff;
  box-shadow:0 24px 60px rgba(64,59,51,.28);
  transform:rotate(2.5deg);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;
}
.ws-hero-imgwrap:hover{transform:rotate(0deg) scale(1.04);box-shadow:0 30px 70px rgba(64,59,51,.34)}
[data-theme="dark"] .ws-hero-imgwrap{border-color:var(--bg-secondary)}

.ws-stat-grid{
  width:100%;min-width:0;max-width:300px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:18px;
  box-shadow:0 14px 40px rgba(64,59,51,.13);
  padding:8px 22px;
}
[data-theme="dark"] .ws-stat-grid{
  background:rgba(42,39,32,.75);
  border-color:rgba(240,234,214,.1);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.ws-stat-row{padding:11px 0;font-size:.87rem}
.ws-stat-label{transition:color .3s}
[data-theme="dark"] .ws-stat-label{color:var(--text-secondary)!important}
.ws-stat-val{
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.08rem;
  background:linear-gradient(120deg,var(--rose),#e0561e);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

@media(max-width:900px){.ws-hero-deco{display:none}}
@media(max-width:680px){
  .ws-hero{padding:72px 22px 56px}
  .ws-hero-inner{gap:28px}
}

/* ══════════ PATHFINDER ══════════ */
.ws-pathfinder{
  max-width:1180px;margin:0 auto;padding:44px 24px 16px;
}
.ws-pathfinder-head{text-align:center;max-width:720px;margin:0 auto 24px}
.ws-pathfinder-head h2{
  font-family:'Fredoka',sans-serif;font-size:clamp(1.75rem,4vw,2.7rem);
  line-height:1.08;color:var(--charcoal);margin-bottom:10px;
}
.ws-pathfinder-head p{font-size:.96rem;line-height:1.7;color:var(--charcoal-lt)}
[data-theme="dark"] .ws-pathfinder-head h2{color:var(--text-primary)}
[data-theme="dark"] .ws-pathfinder-head p{color:var(--text-secondary)}
.ws-path-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
}
.ws-path-card{
  position:relative;overflow:hidden;min-height:230px;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:20px 18px;border-radius:18px;text-decoration:none;color:inherit;
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.72)),
    radial-gradient(circle at 100% 0%,rgba(112,163,167,.22),transparent 42%);
  border:1px solid rgba(64,59,51,.08);
  box-shadow:0 14px 36px rgba(64,59,51,.09);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s;
}
.ws-path-card::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--rose),var(--tan),var(--teal))}
.ws-path-card:hover{transform:translateY(-6px);box-shadow:0 24px 56px rgba(64,59,51,.16);border-color:rgba(188,71,73,.24)}
[data-theme="dark"] .ws-path-card{background:linear-gradient(145deg,rgba(42,39,32,.94),rgba(42,39,32,.7));border-color:rgba(240,234,214,.09);box-shadow:0 14px 36px rgba(0,0,0,.32)}
.ws-path-icon{font-size:2rem;line-height:1}
.ws-path-kicker{font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.ws-path-card strong{font-family:'Fredoka',sans-serif;font-size:1.16rem;line-height:1.15;color:var(--charcoal)}
.ws-path-card span:not(.ws-path-icon):not(.ws-path-kicker){font-size:.86rem;line-height:1.58;color:var(--charcoal-lt)}
.ws-path-card em{
  margin-top:auto;font-style:normal;font-size:.74rem;font-weight:900;color:var(--teal-dk);
  background:rgba(112,163,167,.12);border:1px solid rgba(112,163,167,.24);
  border-radius:999px;padding:6px 10px;
}
[data-theme="dark"] .ws-path-card strong{color:var(--text-primary)}
[data-theme="dark"] .ws-path-card span:not(.ws-path-icon):not(.ws-path-kicker){color:var(--text-secondary)}
[data-theme="dark"] .ws-path-card em{color:#91c9cc;background:rgba(112,163,167,.14)}
@media(max-width:980px){.ws-path-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .ws-pathfinder{padding:34px 18px 8px}
  .ws-path-grid{grid-template-columns:1fr}
  .ws-path-card{min-height:auto}
}

/* ══════════ FINDER ══════════ */
.ws-finder{max-width:1180px;margin:28px auto 0;padding:0 24px}
.ws-finder-shell{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:18px;align-items:center;
  padding:18px;border-radius:24px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.66)),
    radial-gradient(circle at 0% 0%,rgba(188,71,73,.12),transparent 38%),
    radial-gradient(circle at 100% 100%,rgba(112,163,167,.14),transparent 42%);
  border:1px solid rgba(64,59,51,.08);
  box-shadow:0 18px 48px rgba(64,59,51,.11);
}
.ws-finder-shell::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--rose),var(--tan),var(--teal))}
[data-theme="dark"] .ws-finder-shell{
  background:
    linear-gradient(135deg,rgba(42,39,32,.92),rgba(42,39,32,.72)),
    radial-gradient(circle at 0% 0%,rgba(188,71,73,.16),transparent 38%),
    radial-gradient(circle at 100% 100%,rgba(112,163,167,.14),transparent 42%);
  border-color:rgba(240,234,214,.1);
  box-shadow:0 18px 48px rgba(0,0,0,.34);
}
.ws-search-label{display:block;margin-bottom:8px;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.ws-search-wrap{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid rgba(64,59,51,.1);border-radius:16px;
  padding:6px 8px 6px 14px;
}
[data-theme="dark"] .ws-search-wrap{background:rgba(10,11,16,.56);border-color:rgba(240,234,214,.12)}
.ws-search-icon{font-size:1.1rem;color:var(--teal-dk)}
.ws-search-input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  color:var(--charcoal);font:700 1rem/1.2 Inter,sans-serif;padding:12px 4px;
}
[data-theme="dark"] .ws-search-input{color:var(--text-primary)}
.ws-search-input::placeholder{color:rgba(64,59,51,.42)}
[data-theme="dark"] .ws-search-input::placeholder{color:rgba(240,234,214,.42)}
.ws-search-clear{
  border:0;border-radius:999px;background:rgba(64,59,51,.07);color:var(--charcoal-lt);
  font-weight:900;padding:9px 13px;cursor:pointer;
}
.ws-search-clear:hover{background:rgba(188,71,73,.14);color:var(--rose)}
.ws-quick-jumps{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:460px}
.ws-jump-chip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(64,59,51,.1);background:rgba(255,255,255,.68);color:var(--charcoal);
  padding:9px 12px;border-radius:999px;font-size:.78rem;font-weight:900;text-decoration:none;
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.ws-jump-chip:hover{transform:translateY(-2px);background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
[data-theme="dark"] .ws-jump-chip{background:rgba(240,234,214,.07);color:var(--text-secondary);border-color:rgba(240,234,214,.1)}
[data-theme="dark"] .ws-jump-chip:hover{background:var(--teal);color:#071011}
.ws-no-results{
  display:none;max-width:760px;margin:26px auto 0;padding:22px 24px;border-radius:18px;text-align:center;
  background:rgba(188,71,73,.08);border:1px solid rgba(188,71,73,.18);color:var(--charcoal-lt);font-weight:700;
}
.ws-no-results.show{display:block}
[data-theme="dark"] .ws-no-results{color:var(--text-secondary)}
@media(max-width:860px){
  .ws-finder-shell{grid-template-columns:1fr}
  .ws-quick-jumps{justify-content:flex-start;max-width:none}
}
@media(max-width:620px){
  .ws-finder{padding:0 18px}
  .ws-finder-shell{padding:16px;border-radius:20px}
  .ws-search-clear{padding:8px 10px}
}

/* ══════════ SECTION HEADS ══════════ */
.ws-section{max-width:1300px;margin:0 auto;padding:58px 24px 0}
.ws-section-head{display:flex;align-items:center;gap:16px;margin-bottom:30px;padding-bottom:18px;border-bottom:3px solid}
.ws-section-icon{
  font-size:1.35rem;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:16px;flex-shrink:0;
  box-shadow:0 6px 18px rgba(64,59,51,.10),inset 0 0 0 1px rgba(64,59,51,.05);
  animation:ws-bob 5.5s ease-in-out infinite;
}
[data-theme="dark"] .ws-section-icon{background:var(--bg-secondary);box-shadow:0 6px 18px rgba(0,0,0,.35)}
@keyframes ws-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ws-section-label{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(1.5rem,2.6vw,1.95rem);letter-spacing:.01em;line-height:1.05}
.ws-section-sub{font-size:.85rem;line-height:1.65;max-width:660px;margin-top:6px}
.ws-section-count{margin-left:auto;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;white-space:nowrap}

/* ══════════ SECTION WASHES ══════════ */
.courses-section{padding:64px 28px;background-image:radial-gradient(rgba(64,59,51,.035) 1px,transparent 1.4px);background-size:26px 26px}
[data-theme="dark"] .courses-section{background-image:radial-gradient(rgba(240,234,214,.035) 1px,transparent 1.4px)}
.behind-section{padding:76px 28px}
[data-theme="dark"] .section-header p{color:var(--text-secondary)!important}

/* ════════════════ STICKY GLASS FILTER BAR ════════════════ */
.ws-filter-bar{
  position:sticky;top:86px;z-index:60;
  max-width:min(1120px,calc(100% - 48px));margin:0 auto;
  padding:10px 14px;gap:8px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);
  outline:1px solid rgba(64,59,51,.06);
  border-radius:999px;
  box-shadow:0 12px 36px rgba(64,59,51,.14);
}
[data-theme="dark"] .ws-filter-bar{
  background:rgba(42,39,32,.85);
  border-color:rgba(240,234,214,.12);
  outline-color:rgba(0,0,0,.4);
  box-shadow:0 12px 36px rgba(0,0,0,.4);
}
.ws-filter-sep{display:none}
.ws-filter-btn{
  border:2px solid transparent;
  background:rgba(64,59,51,.05);
  color:var(--charcoal-lt);
  font-weight:700;padding:9px 18px;border-radius:999px;
  transition:all .25s cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"] .ws-filter-btn{background:rgba(240,234,214,.07);color:var(--text-secondary)}
.ws-filter-btn:hover{background:rgba(188,71,73,.12);color:var(--rose);transform:translateY(-1px)}
[data-theme="dark"] .ws-filter-btn:hover{color:#e89193}
.ws-filter-btn.active{
  background:linear-gradient(135deg,var(--rose),var(--rose-dk))!important;
  color:#fff!important;border-color:transparent;
  box-shadow:0 6px 16px rgba(188,71,73,.35);
}
a:focus-visible,button:focus-visible{outline:3px solid var(--teal-dk);outline-offset:2px}
@media(max-width:760px){
  .ws-filter-bar{position:static;max-width:calc(100% - 36px);flex-wrap:wrap;justify-content:center;border-radius:24px}
}

/* ══ AGE FILTER BAR ══ */
.ws-age-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  max-width:min(1120px,calc(100% - 48px));margin:6px auto 0;
  padding:6px 14px;
}
.ws-age-label{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-secondary,#888);margin-right:4px;white-space:nowrap;
}
.ws-age-btn{
  border:1px solid rgba(112,163,167,.35);
  background:rgba(112,163,167,.07);
  color:var(--teal-dk,#4a8a8e);
  font-weight:600;font-size:.75rem;padding:5px 13px;border-radius:999px;
  transition:all .2s;
}
.ws-age-btn:hover{background:rgba(112,163,167,.18);border-color:rgba(112,163,167,.6)}
.ws-age-btn.active{
  background:var(--teal,#70A3A7)!important;
  color:#fff!important;border-color:transparent;
  box-shadow:0 4px 12px rgba(112,163,167,.4);
}
[data-theme="dark"] .ws-age-btn{background:rgba(112,163,167,.1);color:#8ecdd1;border-color:rgba(112,163,167,.25)}
[data-theme="dark"] .ws-age-btn.active{background:var(--teal-dk,#4a8a8e)!important}
@media(max-width:760px){.ws-age-bar{max-width:calc(100% - 36px);justify-content:center}}
.ws-install-btn{
  margin-left:auto;border:1px solid rgba(6,163,122,.4);
  background:rgba(6,163,122,.09);color:#0a7a5c;
  font-weight:700;font-size:.75rem;padding:5px 13px;border-radius:999px;cursor:pointer;
  transition:all .2s;
}
.ws-install-btn:hover{background:rgba(6,163,122,.2);border-color:rgba(6,163,122,.7)}
.ws-install-btn.active{background:#06a37a!important;color:#fff!important;border-color:transparent;box-shadow:0 4px 12px rgba(6,163,122,.4)}
[data-theme="dark"] .ws-install-btn{background:rgba(6,163,122,.14);color:#8fe3c8;border-color:rgba(6,163,122,.35)}
.ws-install-note{
  max-width:min(1120px,calc(100% - 48px));margin:4px auto 0;padding:0 14px;
  font-size:.78rem;line-height:1.5;color:var(--charcoal-lt);
}
.ws-install-note strong{color:#0a7a5c}
[data-theme="dark"] .ws-install-note{color:#c8bfaa}
[data-theme="dark"] .ws-install-note strong{color:#8fe3c8}
@media(max-width:760px){.ws-install-btn{margin-left:0}.ws-install-note{max-width:calc(100% - 36px)}}

/* ══ CARD PROGRESS BADGES ══ */
.ws-card-done{
  position:absolute;top:8px;right:8px;z-index:5;
  background:var(--teal,#70A3A7);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;
  padding:3px 9px;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  pointer-events:none;
}
.ws-card-progress{
  position:absolute;bottom:0;left:0;right:0;z-index:5;
  height:5px;background:rgba(0,0,0,.15);
  pointer-events:none;
}
.ws-card-progress-fill{
  height:100%;background:var(--teal,#70A3A7);
  transition:width .3s;
}

/* ══════════ COURSE / ARTICLE CARDS ══════════ */
.courses-grid{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:26px}
.article-card{
  border-radius:22px;
  border:1px solid rgba(64,59,51,.07);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s;
  will-change:transform;
}
.article-card:hover{
  transform:translateY(-9px);
  box-shadow:0 26px 52px rgba(64,59,51,.17),0 8px 20px rgba(64,59,51,.08);
  border-color:rgba(188,71,73,.22);
}
[data-theme="dark"] .article-card{border-color:rgba(240,234,214,.08)}
[data-theme="dark"] .article-card:hover{border-color:rgba(188,71,73,.45);box-shadow:0 26px 52px rgba(0,0,0,.5)}

.article-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;z-index:7;
  background:linear-gradient(90deg,var(--rose),#e0561e,var(--tan),var(--teal));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.article-card:hover::before{transform:scaleX(1)}

.article-card::after{
  content:'';position:absolute;top:-20%;left:-80%;width:55%;height:140%;z-index:7;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg);
  transition:left .65s ease;
  pointer-events:none;
}
.article-card:hover::after{left:135%}

a.article-card{color:inherit;text-decoration:none}
a.article-card:focus-visible{outline:3px solid var(--teal-dk);outline-offset:3px}
.article-date{color:#8a6540}
[data-theme="dark"] .article-date{color:var(--text-muted)}

.article-thumb{overflow:hidden}
.article-thumb::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,8,6,.32),transparent 46%);
}
.article-thumb img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.article-card:hover .article-thumb img{transform:scale(1.07)}
.article-thumb-ph{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.article-card:hover .article-thumb-ph{transform:scale(1.06)}

.article-tag-badge{
  backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:transform .25s;
}
.article-card:hover .article-tag-badge{transform:translateY(-2px) scale(1.03)}

.article-body{padding:22px 24px 24px}
.article-title{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:1.13rem;line-height:1.3;
  transition:color .25s;
}
.article-card:hover .article-title{color:var(--rose)}
[data-theme="dark"] .article-card:hover .article-title{color:#e89193}
.article-excerpt{font-size:.86rem}
.article-read-more{transition:gap .2s,color .2s}
.article-card:hover .article-read-more{gap:10px;text-decoration:underline;text-underline-offset:3px}
.course-card,.ws-dl-card{
  border-radius:22px!important;border:1px solid rgba(64,59,51,.07)!important;
  box-shadow:0 12px 28px rgba(64,59,51,.08);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;
}
.course-card:hover,.ws-dl-card:hover{
  transform:translateY(-7px);
  box-shadow:0 22px 46px rgba(64,59,51,.15);
  border-color:rgba(188,71,73,.2)!important;
}
[data-theme="dark"] .course-card,[data-theme="dark"] .ws-dl-card{
  border-color:rgba(240,234,214,.08)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.32);
}
.article-card,.course-card,.ws-dl-card{min-width:0}
/* A1351: the catalogue can hold 300+ cards; skip painting the ones offscreen
   while keeping them in layout (search, filters and crawlers are unaffected). */
.article-card,.course-card,.ws-dl-card{content-visibility:auto;contain-intrinsic-size:auto 220px}
.article-title,.course-title,.ws-dl-title{overflow-wrap:anywhere}
.ws-card-meta-strip{
  display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;
}
.ws-card-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 8px;border-radius:999px;
  background:rgba(64,59,51,.055);color:var(--charcoal-lt);
  border:1px solid rgba(64,59,51,.07);
  font-size:.66rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
}
[data-theme="dark"] .ws-card-tag{background:rgba(240,234,214,.07);border-color:rgba(240,234,214,.09);color:var(--text-secondary)}
.ws-card-tag.is-age{background:rgba(112,163,167,.12);color:var(--teal-dk)}
.ws-card-tag.is-format{background:rgba(188,71,73,.1);color:var(--rose)}
.ws-card-tag.is-runtime{background:rgba(64,59,51,.05);color:var(--charcoal-lt)}
.ws-card-tag.is-runtime--browser{background:rgba(6,163,122,.12);color:#0a7a5c;border-color:rgba(6,163,122,.22)}
.ws-card-tag.is-runtime--engine{background:rgba(201,138,46,.13);color:#8a5a12;border-color:rgba(201,138,46,.22)}
[data-theme="dark"] .ws-card-tag.is-runtime--browser{background:rgba(6,163,122,.2);color:#8fe3c8}
[data-theme="dark"] .ws-card-tag.is-runtime--engine{background:rgba(201,138,46,.2);color:#f0cd8a}
.ws-filter-label{
  font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal-lt);
  padding:0 2px;
}
[data-theme="dark"] .ws-filter-label{color:var(--text-secondary)}
.ws-route-deck{
  max-width:1180px;margin:32px auto 0;padding:0 24px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.ws-route-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;
  min-height:180px;padding:22px;border-radius:22px;color:inherit;text-decoration:none;
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.65));
  border:1px solid rgba(64,59,51,.08);box-shadow:0 16px 38px rgba(64,59,51,.1);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s;
}
.ws-route-card::after{
  content:attr(data-mark);position:absolute;right:-8px;bottom:-22px;font-size:6rem;opacity:.08;
}
.ws-route-card:hover{transform:translateY(-6px);box-shadow:0 24px 52px rgba(64,59,51,.16);border-color:rgba(188,71,73,.22)}
[data-theme="dark"] .ws-route-card{background:linear-gradient(145deg,rgba(42,39,32,.9),rgba(42,39,32,.68));border-color:rgba(240,234,214,.09);box-shadow:0 16px 38px rgba(0,0,0,.32)}
.ws-route-card small{font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.ws-route-card strong{font-family:'Fredoka',sans-serif;font-size:1.32rem;line-height:1.08;color:var(--charcoal)}
.ws-route-card span{font-size:.9rem;line-height:1.58;color:var(--charcoal-lt)}
.ws-route-card em{margin-top:auto;font-style:normal;font-weight:900;color:var(--teal-dk)}
[data-theme="dark"] .ws-route-card strong{color:var(--text-primary)}
[data-theme="dark"] .ws-route-card span{color:var(--text-secondary)}
@media(max-width:900px){.ws-route-deck{grid-template-columns:1fr}}
@media(max-width:620px){.ws-route-deck{padding:0 18px}}

/* ══════════ FEATURED ARTICLE ══════════ */
.feat-article{
  border-radius:28px;
  background:linear-gradient(130deg,#17102b 0%,#241238 45%,#33163f 100%);
  box-shadow:0 18px 60px rgba(23,16,43,.35);
}
.feat-article:hover{transform:translateY(-6px) scale(1.005);box-shadow:0 30px 80px rgba(23,16,43,.45)}
.feat-article::before{
  content:'';position:absolute;inset:0;border-radius:28px;padding:1.5px;
  background:linear-gradient(120deg,#c084fc,#70A3A7,#BC4749,#c084fc);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.5;transition:opacity .3s;pointer-events:none;
}
.feat-article:hover::before{opacity:1}
.fa-badge{
  background:rgba(192,132,252,.12);
  border:1px solid rgba(192,132,252,.35);
  padding:6px 14px;border-radius:999px;letter-spacing:.14em;
}
.fa-icon{filter:drop-shadow(0 10px 30px rgba(192,132,252,.35));animation:fa-glow 4.5s ease-in-out infinite}
@keyframes fa-glow{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.05)}}

/* ══════════ HERO IMAGE FALLBACK ══════════ */
.ws-img-fallback{
  aspect-ratio:732/993;
  background:
    radial-gradient(circle at 30% 25%,rgba(188,71,73,.55),transparent 55%),
    radial-gradient(circle at 75% 70%,rgba(112,163,167,.55),transparent 55%),
    linear-gradient(150deg,#3d382f,#241f18);
  display:flex;align-items:center;justify-content:center;
}
.ws-img-fallback::before{content:'🛠️';font-size:5rem;filter:drop-shadow(0 10px 24px rgba(0,0,0,.4))}

/* ══════════ PER-SECTION COLOR WASH ══════════ */
#web          {background-image:linear-gradient(180deg,rgba(99,102,241,.06),rgba(99,102,241,0) 320px)}
#scratch      {background-image:linear-gradient(180deg,rgba(255,119,0,.07),rgba(255,119,0,0) 320px)}
#roblox       {background-image:linear-gradient(180deg,rgba(0,180,255,.06),rgba(0,180,255,0) 320px)}
#godot        {background-image:linear-gradient(180deg,rgba(6,214,160,.055),rgba(6,214,160,0) 320px)}
#unity        {background-image:linear-gradient(180deg,rgba(91,192,248,.06),rgba(91,192,248,0) 320px)}
#unreal       {background-image:linear-gradient(180deg,rgba(199,91,42,.055),rgba(199,91,42,0) 320px)}
#minecraft    {background-image:linear-gradient(180deg,rgba(45,90,27,.055),rgba(45,90,27,0) 320px)}
#game-builders{background-image:linear-gradient(180deg,rgba(247,201,72,.08),rgba(247,201,72,0) 320px)}
#specialist   {background-image:linear-gradient(180deg,rgba(188,71,73,.055),rgba(188,71,73,0) 320px)}
#openrct2     {background-image:linear-gradient(180deg,rgba(0,200,122,.055),rgba(0,200,122,0) 320px)}

/* ══════════ SERIES BANNER ══════════ */
.ws-series-banner{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:36px;
  padding:46px 52px;border-radius:28px;
  background:linear-gradient(120deg,#ffffff 0%,var(--rose-lt) 58%,var(--teal-lt) 100%);
  border:1px solid rgba(188,71,73,.16);
  box-shadow:0 18px 48px rgba(64,59,51,.10);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.ws-series-banner:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(64,59,51,.15)}
.ws-series-banner::after{
  content:'🚀';position:absolute;right:-24px;bottom:-40px;
  font-size:190px;opacity:.08;transform:rotate(-12deg);pointer-events:none;
}
.ws-series-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--rose),var(--rose-dk));
  padding:6px 16px;border-radius:999px;margin-bottom:14px;
  box-shadow:0 4px 14px rgba(188,71,73,.3);
}
.ws-series-title{
  font-family:'Fredoka',sans-serif;font-weight:700;
  font-size:clamp(1.7rem,3.5vw,2.5rem);line-height:1.1;
  color:var(--charcoal);margin-bottom:12px;
}
.ws-series-banner p{
  font-size:1rem;line-height:1.7;color:var(--charcoal-lt);
  max-width:600px;margin-bottom:22px;
}
[data-theme="dark"] .ws-series-banner{
  background:linear-gradient(120deg,var(--bg-secondary) 0%,rgba(188,71,73,.14) 58%,rgba(78,125,128,.14) 100%);
  border-color:rgba(188,71,73,.3);
}
[data-theme="dark"] .ws-series-title{color:var(--text-primary)!important}
[data-theme="dark"] .ws-series-banner p{color:var(--text-secondary)!important}
@media(max-width:800px){
  .ws-series-banner{flex-direction:column;text-align:center;padding:38px 26px}
  .ws-series-banner p{margin-left:auto;margin-right:auto}
}

/* ── Lumo mascot banner ─────────────────── */
.lumo-banner{display:block;width:100%;max-width:1100px;margin:0 auto 32px;padding:0 24px;min-width:0}
.lumo-banner-inner{display:flex;align-items:flex-start;gap:18px;background:#fdf9f0;border:1.5px solid rgba(124,58,237,0.18);border-radius:18px;padding:18px 24px;transition:box-shadow .25s,transform .25s}
.lumo-banner-inner:hover{box-shadow:0 6px 28px rgba(124,58,237,.13);transform:translateY(-2px)}
.lumo-figure{flex-shrink:0;width:72px;transition:transform .3s}
.lumo-banner-inner:hover .lumo-figure{transform:rotate(-6deg) scale(1.06)}
.lumo-speech{flex:1}
.lumo-name{font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#7c3aed;margin-bottom:5px}
.lumo-tip{font-size:.9rem;line-height:1.55;color:#3d3550}
.lumo-badge{display:inline-block;margin-top:8px;font-size:.75rem;font-weight:600;background:rgba(124,58,237,.1);color:#7c3aed;border-radius:999px;padding:3px 12px;border:1px solid rgba(124,58,237,.2)}.lumo-quote{margin:8px 0 12px;font-family:Georgia,serif;font-size:.95rem;font-style:italic;color:#7c3aed}
.lumo-route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.lumo-route{display:flex;flex-direction:column;gap:4px;min-height:104px;padding:10px 11px;border:1px solid rgba(124,58,237,.16);border-radius:13px;background:rgba(255,255,255,.76);color:#3d3550;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
.lumo-route:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(124,58,237,.12);border-color:rgba(124,58,237,.38)}
.lumo-route b{font-size:.76rem;line-height:1.2;color:#4c1d95}
.lumo-route span{font-size:.72rem;line-height:1.35;flex:1}
.lumo-route em{font-size:.67rem;font-style:normal;font-weight:800;color:#0f766e}
.lumo-start-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:#0f766e;color:#fff;font-weight:800;font-size:.78rem;padding:7px 12px;border-radius:999px;text-decoration:none}
[data-theme="dark"] .lumo-quote{color:#c4b8e8}
[data-theme="dark"] .lumo-route{background:rgba(35,29,52,.82);color:#e1d8f2;border-color:rgba(167,139,250,.24)}
[data-theme="dark"] .lumo-route b{color:#ddd0ff}
@media(max-width:760px){.lumo-route-grid{grid-template-columns:1fr}.lumo-route{min-height:0}.lumo-banner-inner{align-items:flex-start}}
[data-theme="dark"] .lumo-banner-inner{background:rgba(124,58,237,.07);border-color:rgba(139,92,246,.22)}
[data-theme="dark"] .lumo-name{color:#a78bfa}
[data-theme="dark"] .lumo-tip{color:#c4b8e8}
[data-theme="dark"] .lumo-badge{background:rgba(167,139,250,.15);color:#c4b8e8;border-color:rgba(167,139,250,.25)}

.ws-level-strip{max-width:1100px;margin:20px auto 0;padding:0 24px}
.ws-level-strip-inner{display:flex;gap:10px;flex-wrap:wrap}
.ws-level-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.88rem;
  border:2px solid transparent;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.ws-level-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.ws-level-btn--beginner{background:#fff9f0;color:#b35300;border-color:rgba(255,171,25,.4)}
.ws-level-btn--beginner:hover{border-color:rgba(255,171,25,.8);background:#fff3e0}
.ws-level-btn--some{background:#f0fff8;color:#0d7a5f;border-color:rgba(6,214,160,.4)}
.ws-level-btn--some:hover{border-color:rgba(6,214,160,.8);background:#e0f5ee}
.ws-level-btn--challenge{background:#fdf0ff;color:#6d28d9;border-color:rgba(124,58,237,.3)}
.ws-level-btn--challenge:hover{border-color:rgba(124,58,237,.7);background:#f5e0ff}
[data-theme="dark"] .ws-level-btn--beginner{background:rgba(255,171,25,.1);color:#fbbf24;border-color:rgba(255,171,25,.25)}
[data-theme="dark"] .ws-level-btn--some{background:rgba(6,214,160,.1);color:#34d399;border-color:rgba(6,214,160,.25)}
[data-theme="dark"] .ws-level-btn--challenge{background:rgba(124,58,237,.12);color:#a78bfa;border-color:rgba(124,58,237,.3)}
@media(max-width:520px){.ws-level-strip{padding:0 18px}.ws-level-btn{font-size:.82rem;padding:10px 14px}}

.ws-jump-nav {
  width: 100%;
  min-width: 0;
  max-width: 1100px;
  margin: 0 auto 32px;
  padding: 0 24px;
}
.ws-jump-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--bg-card, #f9f7f2);
  border: 1px solid var(--border-card, rgba(0,0,0,.08));
  border-radius: 14px;
  padding: 14px 18px;
  align-items: center;
}
[data-theme="dark"] .ws-jump-inner {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.09);
}
.ws-jump-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary, #888);
  padding-right: 10px;
  border-right: 1px solid var(--border-card, rgba(0,0,0,.1));
  margin-right: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="dark"] .ws-jump-label { border-color: rgba(255,255,255,.1); }
.ws-jump-link {
  font-size: .75rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-primary, #333);
  background: transparent;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.ws-jump-link:hover {
  background: rgba(188,71,73,.09);
  border-color: rgba(188,71,73,.22);
  color: #bc4749;
}
.ws-jump-link--active {
  background: var(--rose, #BC4749);
  color: #fff !important;
  border-color: var(--rose, #BC4749);
}
[data-theme="dark"] .ws-jump-link { color: rgba(255,255,255,.65); }
[data-theme="dark"] .ws-jump-link:hover {
  background: rgba(188,71,73,.15);
  color: #e89193;
}
[data-theme="dark"] .ws-jump-link--active {
  background: var(--rose, #BC4749);
  color: #fff !important;
}

.ws-section:last-of-type{padding-bottom:60px}

.ws-live-section{padding:56px 24px;max-width:1300px;margin:0 auto}
.ws-live-inner{max-width:1252px;margin:0 auto}
.ws-live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:22px}
.ws-live-card{background:#fff;border-radius:20px;overflow:hidden;border:1px solid rgba(64,59,51,.07);box-shadow:0 4px 20px rgba(64,59,51,.07);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.ws-live-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(64,59,51,.15)}
[data-theme="dark"] .ws-live-card{background:var(--card-bg);border-color:rgba(240,234,214,.08)}
.ws-live-frame{position:relative;aspect-ratio:16/10;background:radial-gradient(circle at 25% 15%,rgba(112,163,167,.55),transparent 58%),radial-gradient(circle at 80% 85%,rgba(188,71,73,.5),transparent 58%),linear-gradient(150deg,#2f4a4d,#182628);cursor:pointer;overflow:hidden}
.ws-live-frame::after{content:'\25B6 LIVE DEMO';position:absolute;top:10px;left:10px;z-index:2;font-size:.58rem;font-weight:800;letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ws-live-frame .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.4px);background-size:18px 18px}
.ph-emoji{font-size:5.2rem;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5));animation:fa-glow 5s ease-in-out infinite}
@keyframes live-ping{from{box-shadow:0 0 0 0 rgba(188,71,73,.45)}to{box-shadow:0 0 0 18px rgba(188,71,73,0)}}
.ws-live-play{
    position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
    white-space:nowrap;background:#fff;color:var(--rose);
    font-weight:800;font-size:.82rem;padding:9px 18px;border:none;border-radius:999px;
    cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3);
    animation:live-ping 2s ease-out infinite;
}
.ws-live-frame:hover .ws-live-play{background:var(--rose);color:#fff;animation:none}
.ws-live-meta{padding:14px 18px 16px;display:flex;flex-direction:column;gap:2px}
.ws-live-meta strong{font-size:.95rem;font-weight:800;color:var(--charcoal)}
[data-theme="dark"] .ws-live-meta strong{color:var(--text-primary)}
.ws-live-meta span{font-size:.78rem;color:var(--charcoal-lt)}
[data-theme="dark"] .ws-live-meta span{color:var(--text-secondary)}
@media(max-width:640px){.ws-live-grid{grid-template-columns:1fr}}

/* Full-screen overlay */
.ws-live-overlay{
    position:fixed;inset:0;z-index:999;
    background:rgba(10,8,6,.88);
    backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;
    padding:20px;
}
.ws-live-overlay[hidden]{display:none}
.ws-live-modal{
    position:relative;width:94vw;height:88vh;
    max-width:1400px;max-height:920px;
    border-radius:22px;overflow:hidden;
    box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.ws-live-stage{width:100%;height:100%}
.ws-live-modal iframe{width:100%;height:100%;border:0;display:block}
.ws-live-close{
    position:absolute;top:12px;right:12px;z-index:10;
    width:44px;height:44px;border-radius:50%;border:none;
    background:rgba(255,255,255,.92);font-size:1.3rem;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 16px rgba(0,0,0,.35);
    transition:background .15s,transform .15s;
}
.ws-live-close:hover{background:#fff;transform:scale(1.08)}
[data-theme="dark"] .ws-live-close{background:rgba(42,39,32,.9);color:var(--text-primary)}

.ws-filter-bar {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; justify-content: center;
}
.ws-filter-btn { cursor: pointer; }
.ws-age-btn { cursor: pointer; }
.ws-filter-result{
  max-width:760px;margin:14px auto 0;text-align:center;
  font-size:.82rem;font-weight:700;color:var(--charcoal-lt);
}
[data-theme="dark"] .ws-filter-result{color:var(--text-secondary)}
.ws-section.hidden,
.courses-section.hidden,
.behind-section.hidden { display: none !important; }

/* 3D Builder card accent glow */
#3d-builders .article-card {
  transition: transform .2s, box-shadow .2s;
}
#3d-builders .article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(var(--ca-rgb), 0.35), 0 8px 32px rgba(var(--ca-rgb), 0.18);
}
#3d-builders .article-card:hover .article-read-more {
  letter-spacing: 0.02em;
}

.ws-dl-card{background:white;border-radius:18px;overflow:hidden;box-shadow:0 4px 20px rgba(64,59,51,.07);display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
.ws-dl-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(64,59,51,.13)}
[data-theme="dark"] .ws-dl-card{background:var(--card-bg,#1e1c18);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.ws-dl-icon{height:100px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;flex-shrink:0}
.ws-dl-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.ws-dl-tag{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dk,#4a8a8e);margin-bottom:4px}
.ws-dl-title{font-family:'Lora',serif;font-size:1rem;font-weight:700;color:var(--charcoal,#403B33);line-height:1.3;margin-bottom:8px}
[data-theme="dark"] .ws-dl-title{color:var(--text-primary,#f0ead6)}
.ws-dl-desc{font-size:.8rem;color:var(--charcoal-lt,#6b6560);line-height:1.65;flex:1;margin-bottom:14px}
[data-theme="dark"] .ws-dl-desc{color:var(--text-secondary,rgba(240,234,214,.65))}
.ws-dl-btns{display:flex;flex-wrap:wrap;gap:6px}
.ws-dl-btn{display:inline-flex;align-items:center;gap:4px;padding:7px 13px;border-radius:8px;font-size:.73rem;font-weight:700;text-decoration:none;border:1.5px solid var(--teal-dk,#4a8a8e);color:var(--teal-dk,#4a8a8e);background:transparent;transition:background .15s,color .15s;white-space:nowrap}
.ws-dl-btn:hover{background:var(--teal-dk,#4a8a8e);color:#fff}
.ws-dl-btn-main{background:var(--teal-dk,#4a8a8e);color:#fff}
.ws-dl-btn-main:hover{background:var(--teal,#70A3A7);border-color:var(--teal,#70A3A7)}
.ws-tool-card{background:white;border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;box-shadow:0 3px 14px rgba(64,59,51,.07);transition:transform .2s,box-shadow .2s;border:1.5px solid transparent}
.ws-tool-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(64,59,51,.12);border-color:var(--teal,#70A3A7)}
[data-theme="dark"] .ws-tool-card{background:var(--card-bg,#1e1c18);box-shadow:0 3px 14px rgba(0,0,0,.25)}
.ws-tool-icon{font-size:2rem;flex-shrink:0}
.ws-tool-title{font-weight:700;font-size:.92rem;color:var(--charcoal,#403B33);margin-bottom:3px}
[data-theme="dark"] .ws-tool-title{color:var(--text-primary,#f0ead6)}
.ws-tool-sub{font-size:.75rem;color:var(--charcoal-lt,#6b6560);line-height:1.5}
[data-theme="dark"] .ws-tool-sub{color:var(--text-secondary,rgba(240,234,214,.6))}
.ws-tool-badge{flex-shrink:0;background:var(--teal,#70A3A7);color:#fff;font-size:.65rem;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase}

.ws-faq{background:#fff;border-radius:16px;border:1px solid rgba(64,59,51,.07);margin-bottom:12px;padding:0;overflow:hidden;box-shadow:0 3px 14px rgba(64,59,51,.05);transition:box-shadow .25s}
.ws-faq:hover{box-shadow:0 8px 24px rgba(64,59,51,.1)}
.ws-faq[open]{border-color:rgba(188,71,73,.3)}
[data-theme="dark"] .ws-faq{background:var(--card-bg);border-color:rgba(240,234,214,.08)}
.ws-faq summary{
    list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:18px 22px;cursor:pointer;
    font-weight:800;font-size:.98rem;color:var(--charcoal);
}
.ws-faq summary::-webkit-details-marker{display:none}
[data-theme="dark"] .ws-faq summary{color:var(--text-primary)}
.ws-faq summary::after{
    content:'+';flex-shrink:0;width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(188,71,73,.1);color:var(--rose);
    font-weight:800;font-size:1.1rem;line-height:1;
    transition:transform .25s,background .25s,color .25s;
}
.ws-faq[open] summary::after{content:'−';background:var(--rose);color:#fff}
.ws-faq p{padding:0 22px 20px;margin:0;font-size:.92rem;line-height:1.7;color:var(--charcoal-lt)}
[data-theme="dark"] .ws-faq p{color:var(--text-secondary)}
#faq .courses-inner{max-width:860px;margin:0 auto}

.reveal{opacity:1!important;transform:none!important}

/* ── Workshop completion badges ── */
.ws-completion-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
    position: absolute; top: 12px; right: 12px; z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.ws-badge-done { background: #22c55e; color: #fff; }
.ws-badge-wip  { background: #f59e0b; color: #fff; }

.ws-top-btn{
    position:fixed;right:22px;bottom:22px;z-index:90;
    width:48px;height:48px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--rose),var(--rose-dk));
    color:#fff;font-size:1.15rem;font-weight:800;text-decoration:none;
    box-shadow:0 10px 26px rgba(188,71,73,.4);
    opacity:0;pointer-events:none;transform:translateY(14px);
    transition:opacity .3s,transform .3s,box-shadow .3s;
}
.ws-top-btn.show{opacity:1;pointer-events:auto;transform:none}
.ws-top-btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(188,71,73,.5)}
.ws-dl-card{border-radius:20px;border:1px solid rgba(64,59,51,.06);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s}
[data-theme="dark"] .ws-dl-card{border-color:rgba(240,234,214,.08)}
.ws-dl-card:hover{border-color:rgba(112,163,167,.4)}
.ws-dl-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.ws-dl-card:hover .ws-dl-icon{transform:scale(1.09) rotate(-3deg)}
.ws-dl-btn{transition:background .2s,color .2s,transform .2s}
.ws-dl-btn:hover{transform:translateY(-2px)}
.ws-tool-card{border-radius:16px}
.ws-tool-card:hover .ws-tool-icon{animation:tool-pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes tool-pop{50%{transform:scale(1.28) rotate(-8deg)}}

/* A class selector like .courses-grid{display:grid} outranks the UA rule for
   the hidden attribute, so collapsing needs to be explicit. */
.ws-section > [hidden],
.courses-section > [hidden] { display: none !important; }
.ws-section-head.ws-toggle {
    cursor: pointer; position: relative; padding-right: 56px;
    border-radius: 14px; transition: background .15s;
}
.ws-section-head.ws-toggle:hover { background: rgba(112,163,167,.10); }
.ws-section-head.ws-toggle:focus-visible { outline: 3px solid var(--teal-dk, #4e7d80); outline-offset: 3px; }
.ws-sec-count {
    display: inline-block; margin-left: 10px; padding: 3px 11px; border-radius: 999px;
    font-size: .72rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap;
    background: rgba(112,163,167,.18); color: var(--teal-dk, #4e7d80);
}
[data-theme="dark"] .ws-sec-count { background: rgba(112,163,167,.24); color: #a9d4d7; }
.ws-chevron {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%) rotate(0deg);
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; line-height: 1; color: var(--teal-dk, #4e7d80);
    transition: transform .2s ease; pointer-events: none;
}
.ws-section-head.ws-open .ws-chevron { transform: translateY(-50%) rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ws-chevron { transition: none; } }

/* ── ws-reorder ──
   The finder sat 2,867px down on a phone, behind the hero, the pathfinder and
   the live demo, and the first course card was at 5,951px. Search should be the
   first thing a visitor can reach on a catalogue this size. Reordering with
   flex order rather than moving markup keeps the document order intact for
   crawlers and screen readers that follow source order, and avoids touching
   deeply nested sections by hand. */
body { display: flex; flex-direction: column; }
body > * { order: 2; }
body > .site-header { order: -4; }
body > .ws-hero { order: -3; }
body > .ws-finder { order: -2; }
body > .ws-filter-bar { order: -1; }
body > .ws-pathfinder { order: 6; }
body > #downloads,
body > #resources { order: 8; }
body > .site-footer, body > footer { order: 10; }


/* ══════════ Creative Path (guided route) ══════════ */
.ws-path{max-width:1100px;margin:0 auto 28px;padding:0 24px}
.ws-path-inner{background:linear-gradient(135deg,rgba(188,71,73,.06),rgba(112,163,167,.08));border:1px solid rgba(64,59,51,.1);border-radius:22px;padding:24px}
.ws-path-head{text-align:center;margin-bottom:18px}
.ws-path-tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#bc4749;background:rgba(188,71,73,.1);border-radius:999px;padding:4px 12px;margin-bottom:8px}
.ws-path-head h2{margin:0 0 6px;font-size:clamp(1.2rem,3vw,1.8rem)}
.ws-path-head h2 span{color:#bc4749}
.ws-path-head p{margin:0;color:var(--charcoal-lt,#6b6459);font-size:.92rem}
.ws-path-steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0}
.ws-path-step{display:flex;flex-direction:column;gap:5px;background:rgba(255,255,255,.82);border:1px solid rgba(64,59,51,.1);border-radius:16px;padding:14px}
.ws-path-icon{font-size:1.6rem}
.ws-path-step b{font-size:.95rem}
.ws-path-step>span{font-size:.8rem;line-height:1.4;color:var(--charcoal-lt,#6b6459);flex:1}
.ws-path-step a{font-size:.78rem;font-weight:800;color:#bc4749;text-decoration:none}
.ws-path-step a:hover{text-decoration:underline}
[data-theme="dark"] .ws-path-inner{background:linear-gradient(135deg,rgba(188,71,73,.12),rgba(78,125,128,.14));border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .ws-path-step{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .ws-path-head p,[data-theme="dark"] .ws-path-step>span{color:#c8bfaa}
@media(max-width:860px){.ws-path-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ws-path-steps{grid-template-columns:1fr}.ws-path{padding:0 18px}}

/* ══════════ Progress-aware cards ══════════ */
.article-card{position:relative}
.article-card.ws-done{outline:2px solid rgba(15,118,110,.55);outline-offset:2px}
.article-card.ws-inprogress{outline:2px dashed rgba(188,71,73,.5);outline-offset:2px}
.ws-progress-badge{position:absolute;top:10px;right:10px;z-index:3;font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:999px;background:#0f766e;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.ws-progress-badge--doing{background:#bc4749}
/* ── Learning Paths strip ── */
/* ── Sticky finder: keep search reachable while scrolling the shelves ── */
.ws-finder-shell{position:sticky;top:64px;z-index:55;background:var(--card,#fff);border-radius:20px}
[data-theme="dark"] .ws-finder-shell{background:#28241e}
@media(max-width:760px){.ws-finder-shell{top:56px}}
@media(prefers-reduced-motion:no-preference){.ws-finder-shell{transition:box-shadow .2s}}
.ws-finder-shell.is-stuck{box-shadow:0 10px 28px rgba(64,59,51,.14)}

/* ── Jump nav becomes a single-line horizontal scroller on narrow screens ── */
@media(max-width:560px){
  .ws-jump-inner{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:12px 14px}
  .ws-jump-inner::-webkit-scrollbar{display:none}
  .ws-jump-label{position:sticky;left:0;background:inherit;z-index:1}
  .ws-jump-link{flex:0 0 auto}
}

/* ── Empty state with next-step suggestions ── */
.ws-no-results .ws-no-results-msg{margin:0 0 12px;font-size:.92rem}
.ws-no-results-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ws-no-results-links a{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--teal-dk,#4e7d80);text-decoration:none;border:1px solid rgba(112,163,167,.35);background:rgba(112,163,167,.08);border-radius:999px;padding:8px 14px;transition:background .15s,border-color .15s}
.ws-no-results-links a:hover{background:rgba(112,163,167,.2);border-color:rgba(112,163,167,.6)}
.ws-no-results-links .ws-no-results-reset{color:var(--rose,#BC4749);border-color:rgba(188,71,73,.35);background:rgba(188,71,73,.07)}
.ws-no-results-links .ws-no-results-reset:hover{background:rgba(188,71,73,.16);border-color:rgba(188,71,73,.6)}

.ws-paths{width:100%;max-width:1120px;margin:0 auto 26px;padding:0 24px;min-width:0}
.ws-paths-inner{background:linear-gradient(135deg,rgba(112,163,167,.08),rgba(188,71,73,.05));border:1px solid rgba(64,59,51,.1);border-radius:22px;padding:24px}
[data-theme="dark"] .ws-paths-inner{background:linear-gradient(135deg,rgba(78,125,128,.16),rgba(188,71,73,.1));border-color:rgba(255,255,255,.1)}
.ws-paths-head{text-align:center;margin-bottom:18px}
.ws-paths-tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dk,#4e7d80);background:rgba(112,163,167,.14);border-radius:999px;padding:4px 12px;margin-bottom:8px}
.ws-paths-head h2{margin:0 0 6px;font-size:clamp(1.2rem,3vw,1.7rem)}
.ws-paths-head p{margin:0;color:var(--charcoal-lt,#6b6459);font-size:.92rem}
.ws-paths-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.ws-paths-loading{grid-column:1/-1;text-align:center;color:var(--charcoal-lt,#6b6459);font-size:.9rem;margin:8px 0}
.ws-path-card{background:rgba(255,255,255,.9);border:1px solid rgba(64,59,51,.1);border-top:4px solid var(--path-color,#70A3A7);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 4px 16px rgba(64,59,51,.07)}
[data-theme="dark"] .ws-path-card{background:rgba(42,39,32,.94);border-color:rgba(240,234,214,.09)}
.ws-path-card-head{display:flex;align-items:center;gap:10px}
.ws-path-card-emoji{font-size:1.7rem;line-height:1}
.ws-path-card-title{margin:0;font-size:1.02rem;line-height:1.2;color:var(--charcoal)}
.ws-path-card-meta{font-size:.74rem;color:var(--charcoal-lt)}
.ws-path-levels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ws-path-level{display:flex;align-items:center;gap:9px}
.ws-path-level-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;background:rgba(112,163,167,.16);color:var(--teal-dk,#4e7d80)}
.ws-path-level.is-done .ws-path-level-num{background:#06a37a;color:#fff}
.ws-path-level-link{flex:1;min-width:0;font-size:.84rem;font-weight:600;color:var(--charcoal);text-decoration:none;border-bottom:1px solid transparent}
.ws-path-level-link:hover{color:var(--teal-dk,#4e7d80);border-bottom-color:currentColor}
.ws-path-level-title{overflow-wrap:anywhere}
.ws-path-card-foot{display:flex;align-items:center;gap:10px;margin-top:auto}
.ws-path-bar{flex:1;height:6px;border-radius:999px;background:rgba(64,59,51,.12);overflow:hidden}
.ws-path-bar-fill{height:100%;background:var(--path-color,#70A3A7);border-radius:999px;transition:width .4s ease}
.ws-path-status{font-size:.72rem;font-weight:700;color:var(--charcoal-lt);white-space:nowrap}
.ws-path-level.is-next .ws-path-level-num{background:#f5c842;color:#3d3224}
.ws-path-cert-link{font-weight:800;color:var(--teal-dk,#4e7d80);text-decoration:underline}
@media(max-width:760px){.ws-paths{padding:0 18px}}

/* ══════════════════════════════════════════════
   VISUAL POLISH v4 - Better Visuals pass
   ══════════════════════════════════════════════ */

/* ── Course cards: engine-colored left accent + richer surface ── */
.course-card{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#fff,#faf8f4)!important;
}
.course-card::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:4px;z-index:2;
  background:var(--teal-dk,#4e7d80);
  transition:width .3s cubic-bezier(.22,1,.36,1);
}
.course-card:hover::before{width:6px}
.course-card[data-engine="Scratch"]::before{background:#ff7f00}
.course-card[data-engine="Roblox"]::before{background:#00b4ff}
.course-card[data-engine="Godot"]::before{background:#478cbf}
.course-card[data-engine="Unity"]::before{background:#222}
.course-card[data-engine="Unreal"]::before{background:#c75b2a}
.course-card[data-engine="JavaScript"]::before{background:#f0db4f}
.course-card[data-engine="Python"]::before{background:#3776ab}
.course-card[data-engine="GDevelop"]::before{background:#ff8c1a}
.course-card[data-engine="Defold"]::before{background:#2185d5}
.course-card[data-engine*="PICO"]::before,
.course-card[data-engine="pico"]::before{background:#ff77a8}
.course-card[data-engine="Java"]::before{background:#b07219}
.course-card[data-engine="C++"]::before{background:#004482}
.course-card[data-engine="GML"]::before{background:#71b417}
.course-card[data-engine="Blender"]::before{background:#ea7600}
.course-card[data-engine="Minecraft"]::before{background:#2d5a1b}
.course-card[data-engine="MUGEN"]::before{background:#cc0000}
.course-card[data-engine="Tinkercad"]::before{background:#f5a623}
.course-card[data-engine="OpenRCT2"]::before{background:#00c87a}

[data-theme="dark"] .course-card{
  background:linear-gradient(145deg,rgba(42,39,32,.96),rgba(36,33,28,.92))!important;
}
.course-body{padding:18px 20px 20px}
.course-tag{
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-dk,#4e7d80);margin-bottom:8px;
}
[data-theme="dark"] .course-tag{color:#91c9cc}
.course-title{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:1.05rem;line-height:1.28;
  color:var(--charcoal,#403b33);margin-bottom:8px;
  transition:color .25s;
}
.course-card:hover .course-title{color:var(--rose,#bc4749)}
[data-theme="dark"] .course-title{color:var(--text-primary,#f0ead6)}
[data-theme="dark"] .course-card:hover .course-title{color:#e89193}
.course-desc{
  font-size:.82rem;line-height:1.6;
  color:var(--charcoal-lt,#5a5449);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
[data-theme="dark"] .course-desc{color:rgba(240,234,214,.6)}

/* ── Section headers: gradient accent line + number badge ── */
.ws-section-head{
  border-bottom-width:3px;
  border-image:linear-gradient(90deg,var(--rose),var(--teal)) 1;
  padding-bottom:20px;margin-bottom:32px;
}
.ws-section-label{
  background:linear-gradient(120deg,var(--charcoal,#403b33),var(--teal-dk,#4e7d80));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
[data-theme="dark"] .ws-section-label{
  background:linear-gradient(120deg,#f0ead6,#91c9cc);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ws-section-count{
  background:linear-gradient(135deg,rgba(188,71,73,.1),rgba(112,163,167,.12));
  border:1px solid rgba(188,71,73,.18);
  color:var(--rose-dk,#9b3a3c);
}
[data-theme="dark"] .ws-section-count{
  background:linear-gradient(135deg,rgba(188,71,73,.2),rgba(112,163,167,.16));
  border-color:rgba(188,71,73,.3);
  color:#e89193;
}

/* ── Creative path steps: glass card with hover glow ── */
.ws-path-step{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px);
  border:1px solid rgba(64,59,51,.08);
  border-radius:18px;padding:16px;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s;
}
.ws-path-step:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(64,59,51,.1);
  border-color:rgba(188,71,73,.2);
}
[data-theme="dark"] .ws-path-step{
  background:rgba(42,39,32,.85);
  backdrop-filter:blur(8px);
  border-color:rgba(240,234,214,.08);
}
[data-theme="dark"] .ws-path-step:hover{
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  border-color:rgba(188,71,73,.35);
}
.ws-path-icon{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,rgba(188,71,73,.1),rgba(112,163,167,.08));
  font-size:1.5rem;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ws-path-step:hover .ws-path-icon{transform:scale(1.12) rotate(-5deg)}

/* ── Learning path cards: hover lift + progress glow ── */
.ws-path-card{
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s;
}
.ws-path-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(64,59,51,.12);
  border-color:var(--path-color,#70A3A7);
}
[data-theme="dark"] .ws-path-card:hover{
  box-shadow:0 16px 36px rgba(0,0,0,.4);
  border-color:var(--path-color,#70A3A7);
}
.ws-path-bar{height:8px;border-radius:999px;background:rgba(64,59,51,.1)}
.ws-path-bar-fill{
  box-shadow:0 0 10px color-mix(in srgb,var(--path-color,#70A3A7) 40%,transparent);
}

/* ── Lumo banner: refined glass + gentle float ── */
.lumo-banner-inner{
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,245,238,.88))!important;
  border:1px solid rgba(124,108,240,.16)!important;
  box-shadow:0 14px 38px rgba(64,59,51,.08),0 4px 12px rgba(124,108,240,.06)!important;
}
[data-theme="dark"] .lumo-banner-inner{
  background:linear-gradient(145deg,rgba(42,39,32,.92),rgba(36,33,28,.85))!important;
  box-shadow:0 14px 38px rgba(0,0,0,.35),0 4px 12px rgba(124,108,240,.1)!important;
}
.lumo-figure img{
  transition:transform .4s cubic-bezier(.34,1.56,.64,1)!important;
}
.lumo-banner-inner:hover .lumo-figure img{
  transform:scale(1.06) rotate(-4deg)!important;
}

/* ── Live demo cards: better placeholder and glow ── */
.ws-live-card{
  border:1px solid rgba(64,59,51,.06);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;
}
.ws-live-card:hover{
  border-color:rgba(188,71,73,.25);
  box-shadow:0 22px 48px rgba(64,59,51,.16),0 0 0 1px rgba(188,71,73,.1);
}
[data-theme="dark"] .ws-live-card:hover{
  border-color:rgba(188,71,73,.4);
  box-shadow:0 22px 48px rgba(0,0,0,.45),0 0 0 1px rgba(188,71,73,.2);
}

/* ── Series banner: subtle sparkle on hover ── */
.ws-series-banner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.4),transparent 50%),
              radial-gradient(circle at 70% 80%,rgba(112,163,167,.15),transparent 50%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.ws-series-banner:hover::before{opacity:1}

/* ── Jump nav: active indicator + scroll snap ── */
.ws-jump-link{
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.ws-jump-link:hover{
  transform:translateY(-1px);
}

/* ── Filter result text: subtle styling ── */
.ws-filter-result{
  background:rgba(112,163,167,.06);
  border:1px solid rgba(112,163,167,.12);
  border-radius:999px;padding:8px 18px;
  max-width:max-content;
}
[data-theme="dark"] .ws-filter-result{
  background:rgba(112,163,167,.08);
  border-color:rgba(112,163,167,.16);
}

/* ── "Try Live" section: breathing glow on the section ── */
.ws-live-section{
  position:relative;
}
.ws-live-section::before{
  content:'';position:absolute;top:50%;left:50%;
  width:600px;height:400px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(188,71,73,.06),transparent 65%);
  pointer-events:none;z-index:0;
}
.ws-live-inner{position:relative;z-index:1}

/* ── Hub handoff card: glass + hover ── */
.hub-handoff{
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(248,245,238,.85));
  border:1px solid rgba(64,59,51,.08);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(64,59,51,.06);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;
}
.hub-handoff:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(64,59,51,.1);
}
[data-theme="dark"] .hub-handoff{
  background:linear-gradient(135deg,rgba(42,39,32,.9),rgba(36,33,28,.82));
  border-color:rgba(240,234,214,.08);
}

/* ── Finder: more glass depth ── */
.ws-finder-shell{
  box-shadow:0 12px 32px rgba(64,59,51,.09);
}
.ws-search-wrap{
  border-radius:14px;
  transition:border-color .2s,box-shadow .2s;
}
.ws-search-wrap:focus-within{
  border-color:rgba(188,71,73,.35);
  box-shadow:0 0 0 3px rgba(188,71,73,.08);
}

/* ── Choice controls: refined selects ── */
.ws-choice-controls select{
  border-radius:12px;
  transition:border-color .2s,box-shadow .2s;
}
.ws-choice-controls select:focus{
  border-color:rgba(188,71,73,.4);
  box-shadow:0 0 0 3px rgba(188,71,73,.08);
  outline:none;
}
.ws-choice-controls button{
  border-radius:12px;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.ws-choice-controls button:hover{
  background:#d4e8c4;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(64,59,51,.08);
}

/* ── No-results: softer look ── */
.ws-no-results{
  background:linear-gradient(135deg,rgba(188,71,73,.06),rgba(188,71,73,.03));
  border-radius:22px;
}

/* ── FAQ cards: smoother open/close ── */
.ws-faq{
  border-radius:18px;
  transition:box-shadow .25s,border-color .25s,transform .25s;
}
.ws-faq:hover{
  transform:translateY(-2px);
}

/* ── Download cards: glass surface ── */
.ws-dl-card{
  background:linear-gradient(145deg,#fff,#faf8f4)!important;
}
[data-theme="dark"] .ws-dl-card{
  background:linear-gradient(145deg,rgba(42,39,32,.96),rgba(36,33,28,.92))!important;
}

/* ── Tool companion cards: better depth ── */
.ws-tool-card{
  background:linear-gradient(145deg,#fff,#faf8f4);
  border:1px solid rgba(64,59,51,.06);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s;
}
.ws-tool-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(64,59,51,.12);
  border-color:rgba(112,163,167,.35);
}
[data-theme="dark"] .ws-tool-card{
  background:linear-gradient(145deg,rgba(42,39,32,.9),rgba(36,33,28,.82));
}

/* ── Smoother page-level transitions ── */
@media(prefers-reduced-motion:no-preference){
  .ws-path-card,.ws-live-card,.hub-handoff,.ws-tool-card,.ws-dl-card,
  .ws-faq,.ws-series-banner,.lumo-banner-inner{
    transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;
  }
}

/* ══ Rebuild A1340: curated starters, browse-by-tool, cleaner finder ══ */
/* Curated "Start here" row */
/* Surfaces are explicit light colours: this page is light while the shared
   --card/--bg tokens are the site's dark palette. */
.ws-start{background:#fff;border-bottom:1px solid rgba(64,59,51,.10);padding:44px 20px}
.ws-start-inner{max-width:1100px;margin:0 auto}
.ws-start-head{max-width:640px;margin-bottom:22px}
.ws-start-tag,.ws-browse-tag{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#4e7d80;background:#e0edef;border-radius:999px;padding:4px 12px}
.ws-start-head h2,.ws-browse-head h2{font-family:Fredoka,Inter,sans-serif;font-size:clamp(1.5rem,3vw,2.1rem);margin:12px 0 8px;color:#403B33}
.ws-start-head p,.ws-browse-head p{margin:0;color:#5a5449;line-height:1.6}
.ws-start-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.ws-start-card{position:relative;display:flex;flex-direction:column;gap:8px;background:#fbf8f2;border:1.5px solid rgba(64,59,51,.14);border-left:6px solid var(--start-color,#70A3A7);border-radius:16px;padding:20px;text-decoration:none;color:#403B33;transition:transform .2s,box-shadow .2s}
.ws-start-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(64,59,51,.12)}
.ws-start-emoji{font-size:2rem;line-height:1}
.ws-start-level{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--start-color,#4e7d80)}
.ws-start-name{font-family:Fredoka,Inter,sans-serif;font-size:1.15rem;font-weight:700;color:#403B33}
.ws-start-desc{font-size:.88rem;line-height:1.6;color:#5a5449;flex:1}
.ws-start-go{font-weight:800;font-size:.85rem;color:var(--start-color,#4e7d80)}

/* Browse by tool */
.ws-browse{padding:40px 20px;background:linear-gradient(180deg,transparent,rgba(112,163,167,.08))}
.ws-browse-inner{max-width:1100px;margin:0 auto}
.ws-browse-head{max-width:640px;margin-bottom:20px}
.ws-engine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ws-engine-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:#fff;border:1.5px solid rgba(64,59,51,.12);border-top:4px solid var(--eng-color,#70A3A7);border-radius:14px;padding:14px 16px;font:inherit;cursor:pointer;color:#403B33;min-height:44px;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,border-color .22s,background .22s;position:relative;overflow:hidden}
.ws-engine-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--eng-color,#70A3A7),transparent 60%);opacity:0;transition:opacity .22s;pointer-events:none;border-radius:14px}
.ws-engine-tile:hover,.ws-engine-tile:focus-visible{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 32px rgba(64,59,51,.16),0 0 0 2px var(--eng-color,#70A3A7)}
.ws-engine-tile:hover::after,.ws-engine-tile:focus-visible::after{opacity:.08}
.ws-engine-tile:active{transform:translateY(0) scale(.98);transition-duration:.1s}
.ws-engine-emoji{font-size:1.5rem;line-height:1.1}
.ws-engine-name{font-weight:800;font-size:.95rem}
.ws-engine-count{font-size:.75rem;color:#5a5449}

/* Dark mode */
[data-theme="dark"] .ws-start{background:#28241e;border-bottom-color:rgba(240,234,214,.12)}
[data-theme="dark"] .ws-start-card{background:#1e1c18;border-color:rgba(240,234,214,.14);color:#f5efe0}
[data-theme="dark"] .ws-start-name,[data-theme="dark"] .ws-start-head h2,[data-theme="dark"] .ws-browse-head h2{color:#f5efe0}
[data-theme="dark"] .ws-start-desc,[data-theme="dark"] .ws-start-head p,[data-theme="dark"] .ws-browse-head p,[data-theme="dark"] .ws-engine-count{color:#c9c1b2}
[data-theme="dark"] .ws-engine-tile{background:#1e1c18;border-color:rgba(240,234,214,.14);color:#f5efe0}

/* Finder sits on a dark shell, so its field labels need light ink. */
.ws-finder-shell .ws-search-label{color:#f4a7a8}
.ws-finder-shell .ws-choice-controls label{color:#e8e2d4}

/* Flow (A1340): hero first, then finder + its filter controls, then the browse content.
   The page is a flex column (body > * { order: 2 }); match the intended
   header/hero/finder/filter-bar order from lines above. */
body > .ws-welcome { order: -3; }
body > #ageBar,
body > .ws-install-note,
body > #filterResult,
body > #workshopNoResults { order: -1; }

/* Flow (A1351): keep the catalogue as the single main browse surface, then
   drop Learning Paths and My First Series below it, before downloads and the
   long tail (articles, FAQ, weekly spark). */
body > #learning-paths { order: 3; }
body > #courses { order: 4; }
body > #articles,
body > #faq,
body > .jvds-today-spark { order: 8; }

/* A1356: the page is a flex column, and a top-level block with a cross-axis
   `margin: 0 auto` is sized to its own content instead of stretched (auto
   cross-axis margins suppress align-self: stretch). That shrank the centred
   panels below their max-width: Learning Paths was ~696px instead of 1120px
   (2 grid columns instead of 3), the Lumo banner ~894px, Try Live ~868px, the
   age bar ~595px and the weekly spark ~315px. Force full width so
   max-width + margin: auto still centres each block at its intended size. */
body > section,
body > .lumo-banner,
body > .hub-handoff,
body > .ws-age-bar,
body > .ws-install-note,
body > .ws-no-results,
body > #continueWorkshop,
body > div[style*="max-width:1100px"] { width: 100%; }
/* Phones give the handoff card an 18px side inset via an !important margin, so
   a full-width box would overflow there - let it size to content instead. */
@media(max-width:760px){ body > .hub-handoff { width: auto; } }

/* A1356: dark mode was only half-applied. The shared card/token rules darkened
   the components while the page body kept the light --beige surface and the
   header was force-locked light, so dark cards sat on a cream page and some ink
   (path card titles, the Lumo tip) went dark-on-dark. Keep one dark surface and
   readable ink across the hub. The welcome hero is intentionally a light panel
   in both themes, so its own colours are left alone. */
[data-theme="dark"] body { background: #1e1c18; }
[data-theme="dark"] .site-header {
    background: rgba(30,28,24,.96) !important;
    border-bottom-color: rgba(240,234,214,.10) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.35) !important;
}
[data-theme="dark"] .header-inner .nav-link { color: #c9c1b2 !important; }
[data-theme="dark"] .header-inner .nav-link:hover { background: rgba(240,234,214,.08); color: #f5efe0 !important; }
[data-theme="dark"] .header-inner .nav-link.active { background: rgba(188,71,73,.22); color: #e89193 !important; }
[data-theme="dark"] .ws-path-card-title,
[data-theme="dark"] .ws-path-level-link { color: #f5efe0 !important; }
[data-theme="dark"] .ws-paths-head h2 { color: #f5efe0; }
[data-theme="dark"] .ws-paths-head p { color: #c8bfaa; }
[data-theme="dark"] .lumo-tip { color: #c4b8e8 !important; }
@media(max-width:700px){
  [data-theme="dark"] .main-nav { background: #1e1c18 !important; border-top-color: rgba(240,234,214,.10); }
  [data-theme="dark"] .main-nav a { color: #c9c1b2; }
  [data-theme="dark"] .main-nav a.active { background: rgba(188,71,73,.22); color: #e89193; }
}

/* Finder active: hide everything except the finder + catalogue so results read clean */
body.ws-finder-active .ws-start,
body.ws-finder-active #learning-paths,
body.ws-finder-active .lumo-banner,
body.ws-finder-active .hub-handoff,
body.ws-finder-active #dailyChallengeWorkshop,
body.ws-finder-active #continueWorkshop,
body.ws-finder-active .ws-browse,
body.ws-finder-active .ws-live-section,
body.ws-finder-active #courses,
body.ws-finder-active .ws-section,
body.ws-finder-active .behind-section,
body.ws-finder-active .jvds-today-spark{display:none !important}

@media(max-width:700px){
  .ws-start{padding:32px 18px}
  .ws-start-grid{grid-template-columns:minmax(0,1fr)}
  .ws-engine-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* Completion badges on catalogue cards (engine sections used to carry these) */
.course-card{position:relative}
.course-card.ws-done{outline:2px solid rgba(15,118,110,.55);outline-offset:2px}
.course-card.ws-inprogress{outline:2px dashed rgba(188,71,73,.5);outline-offset:2px}

/* ══════════ PROGRESS DASHBOARD WIDGET ══════════ */
.ws-progress-dashboard{
  max-width:1100px;margin:0 auto;padding:0 20px;
}
.ws-dash-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  background:linear-gradient(135deg,rgba(112,163,167,.08),rgba(188,71,73,.06));
  border:1px solid rgba(112,163,167,.25);border-radius:18px;
  padding:16px 24px;
}
[data-theme="dark"] .ws-dash-inner{background:linear-gradient(135deg,rgba(78,125,128,.16),rgba(188,71,73,.1));border-color:rgba(112,163,167,.3)}
.ws-dash-stat{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:70px}
.ws-dash-val{
  font-family:'Fredoka',sans-serif;font-size:1.4rem;font-weight:700;
  background:linear-gradient(120deg,var(--rose,#BC4749),#e0561e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ws-dash-label{font-size:.68rem;font-weight:700;color:var(--charcoal-lt,#6b6560);text-transform:uppercase;letter-spacing:.06em}
[data-theme="dark"] .ws-dash-label{color:var(--text-secondary)}
.ws-dash-link{
  margin-left:auto;font-size:.78rem;font-weight:700;color:var(--teal-dk,#4e7d80);text-decoration:none;
  border:1px solid rgba(112,163,167,.35);background:rgba(112,163,167,.08);
  border-radius:999px;padding:6px 14px;transition:background .15s;
}
.ws-dash-link:hover{background:rgba(112,163,167,.2)}
@media(max-width:520px){
  .ws-dash-inner{justify-content:center;gap:12px;padding:14px 16px}
  .ws-dash-link{margin-left:0;width:100%;text-align:center}
}