/* JVDesignStudio workshop hub bundle. Source order preserved: tokens, shared, hub, workshop. */

/* assets/css/tokens.css */
/* ============================================================
   assets/css/tokens.css, JVDesignStudio design tokens (A257)

   One place for colour, type, spacing and radius. Loaded site-wide
   by the @import at the top of style-shared.css.

   Every token starts with --jv- so it never collides with the page
   :root blocks (many of them already define --text, --surface,
   --accent...). Pages move onto these one hub at a time (A261).

   Themes
     data-theme="dark" on <html>   set by nav.js from jvds-theme
     data-character="stardust|lumo|ember|pip|echo" on any element
       gives that part of the page
         --jv-char       the character's colour (fills, borders)
         --jv-char-ink   the character's colour for text and icons
         --jv-char-soft  a light tint for panels and chips
         --jv-char-on    text on a solid --jv-char fill
   Character colours come from style-mascots.css (--mascot-*), which
   matches the mascot art. Stardust imagines, Lumo teaches, Ember
   creates, Pip plays, Echo improves.

   Check contrast after any colour change: node tests/tokens-contrast.js
   ============================================================ */

:root {
    /* Brand */
    --jv-beige:       #F0EAD6;
    --jv-tan:         #D2B48C;
    --jv-tan-dk:      #B8956A;
    --jv-rose:        #BC4749;
    --jv-rose-dk:     #9B3A3C;
    --jv-teal:        #70A3A7;
    --jv-teal-dk:     #4E7D80;
    --jv-charcoal:    #403B33;
    --jv-charcoal-lt: #5A5449;

    /* Night: the dark header, footer and game grounds, in both themes */
    --jv-night:       #0A0B10;
    --jv-night-2:     #1E1C18;
    --jv-on-night:    var(--jv-beige);

    /* Page (light theme) */
    --jv-bg:          var(--jv-beige);
    --jv-surface:     #FFFFFF;
    --jv-surface-2:   #F5F0E8;
    --jv-text:        var(--jv-charcoal);
    --jv-text-muted:  var(--jv-charcoal-lt);
    --jv-line:        rgba(64,59,51,0.12);
    --jv-link:        #3D6B6E;
    --jv-accent:      var(--jv-rose);
    --jv-accent-ink:  var(--jv-rose-dk);
    --jv-on-accent:   #FFFFFF;
    --jv-focus:       #4CC9C0;
    --jv-success:     #256B42;
    --jv-warn:        #8A5300;
    --jv-danger:      var(--jv-rose-dk);

    /* Characters */
    --jv-stardust:      #FFD23C;
    --jv-stardust-ink:  #7A5A00;
    --jv-stardust-soft: rgba(255,210,60,0.18);
    --jv-lumo:          #7C6CF0;
    --jv-lumo-ink:      #5443D1;
    --jv-lumo-soft:     rgba(124,108,240,0.14);
    --jv-ember:         #F2637A;
    --jv-ember-ink:     #AE2239;
    --jv-ember-soft:    rgba(242,99,122,0.14);
    --jv-pip:           #7AC74F;
    --jv-pip-ink:       #336A1B;
    --jv-pip-soft:      rgba(122,199,79,0.16);
    --jv-echo:          #2EB5A5;
    --jv-echo-ink:      #146B62;
    --jv-echo-soft:     rgba(46,181,165,0.14);

    /* No character chosen: the studio rose */
    --jv-char:       var(--jv-accent);
    --jv-char-ink:   var(--jv-accent-ink);
    --jv-char-soft:  rgba(188,71,73,0.12);
    --jv-char-on:    var(--jv-on-accent);

    /* Type */
    --jv-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --jv-font-display: 'Fredoka', var(--jv-font-body);
    --jv-font-mono:    ui-monospace, 'Cascadia Code', Consolas, monospace;
    --jv-text-xs:   0.75rem;
    --jv-text-sm:   0.875rem;
    --jv-text-base: 1rem;
    --jv-text-lg:   1.125rem;
    --jv-text-xl:   1.375rem;
    --jv-text-2xl:  clamp(1.6rem, 3.5vw, 2.4rem);
    --jv-text-3xl:  clamp(2.2rem, 5vw, 3.6rem);
    --jv-leading-tight: 1.15;
    --jv-leading-body:  1.6;

    /* Spacing (4px steps, then bigger jumps for sections) */
    --jv-space-1: 4px;
    --jv-space-2: 8px;
    --jv-space-3: 12px;
    --jv-space-4: 16px;
    --jv-space-5: 24px;
    --jv-space-6: 32px;
    --jv-space-7: 48px;
    --jv-space-8: 80px;

    /* Radius */
    --jv-radius-sm:   8px;
    --jv-radius-md:   14px;
    --jv-radius-lg:   20px;
    --jv-radius-pill: 999px;

    /* Depth */
    --jv-shadow-1: 0 4px 20px rgba(64,59,51,0.08);
    --jv-shadow-2: 0 14px 36px rgba(64,59,51,0.14);
    --jv-ease:     0.15s ease;
}

[data-theme="dark"] {
    --jv-bg:          #1A1814;
    --jv-surface:     #272320;
    --jv-surface-2:   #2E2A26;
    --jv-text:        #F0EAD6;
    --jv-text-muted:  rgba(240,234,214,0.72);
    --jv-line:        rgba(240,234,214,0.12);
    --jv-link:        #8CC7CB;
    --jv-accent-ink:  #E88486;
    --jv-success:     #6FD39A;
    --jv-warn:        #F0B35A;
    --jv-danger:      #E88486;

    --jv-stardust-ink: #FFD23C;
    --jv-lumo-ink:     #A89CF7;
    --jv-ember-ink:    #F7899A;
    --jv-pip-ink:      #95D86F;
    --jv-echo-ink:     #4FD1C1;
    --jv-char-soft:    rgba(188,71,73,0.18);

    --jv-shadow-1: 0 4px 20px rgba(0,0,0,0.30);
    --jv-shadow-2: 0 14px 36px rgba(0,0,0,0.50);
}

/* Character themes. Each colour is bright enough that dark text reads on a
   solid fill, so --jv-char-on is the night colour for all five. */
[data-character] { --jv-char-on: var(--jv-night); }
[data-character="stardust"] { --jv-char: var(--jv-stardust); --jv-char-ink: var(--jv-stardust-ink); --jv-char-soft: var(--jv-stardust-soft); }
[data-character="lumo"]     { --jv-char: var(--jv-lumo);     --jv-char-ink: var(--jv-lumo-ink);     --jv-char-soft: var(--jv-lumo-soft); }
[data-character="ember"]    { --jv-char: var(--jv-ember);    --jv-char-ink: var(--jv-ember-ink);    --jv-char-soft: var(--jv-ember-soft); }
[data-character="pip"]      { --jv-char: var(--jv-pip);      --jv-char-ink: var(--jv-pip-ink);      --jv-char-soft: var(--jv-pip-soft); }
[data-character="echo"]     { --jv-char: var(--jv-echo);     --jv-char-ink: var(--jv-echo-ink);     --jv-char-soft: var(--jv-echo-soft); }


/* style-shared.css */
/* ============================================================
   style-shared.css , JVDesignStudio
   Shared design tokens, reset, nav, footer, and utilities.
   Hand-maintained , do not add page-specific rules.
   ============================================================ */

/* Site-wide --jv-* tokens and data-character themes (A257). @import has to
   stay above every other rule in this file. */
/* ── Design tokens ── */
:root {
    --beige:      #F0EAD6;
    --tan:        #D2B48C;
    --tan-dk:     #b8956a;
    --rose:       #BC4749;
    --rose-dk:    #9b3a3c;
    --teal:       #70A3A7;
    --teal-dk:    #4e7d80;
    --charcoal:   #403B33;
    --charcoal-lt:#5a5449;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; background: #0a0b10; color: #e8eaf2; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* Workshop/content pages carry lots of code snippets, live canvases and older
   builder headers. Keep those useful pieces from creating sideways scrolling on
   phones while preserving their desktop layouts. */
@media(max-width:700px){
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    pre, code, kbd, samp {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    span,
    strong,
    em {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    pre *,
    code * {
        max-width: 100% !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    pre {
        white-space: pre-wrap;
        overflow-x: auto;
    }
    table,
    thead,
    tbody,
    tr,
    th,
    td {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: normal !important;
    }
    .main-nav:not(.open),
    .jvds-nav-links:not(.open) {
        display: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }
    .main-nav.open,
    .jvds-nav-links.open {
        left: 0 !important;
        right: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    .header-inner,
    .site-header--light .header-inner {
        max-width: 100vw !important;
        padding-left: 12px !important;
        padding-right: 18px !important;
        overflow: hidden;
    }
    #navToggle.nav-toggle {
        transform: translateX(-18px);
    }
    [style*="display:inline-flex"],
    [style*="display: inline-flex"] {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }
    [class*="hero-glow"] {
        max-width: 100vw !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    .hdr {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .hdr-right,
    .obar,
    .landing-features {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .obar {
        white-space: normal !important;
    }
    .hdr-right .quick-btn {
        display: none !important;
    }
    .ft-folder,
    .ft-note,
    .ft-indent,
    .ft-indent2 {
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .tabs-inner {
        justify-content: flex-start !important;
        overflow-x: hidden !important;
    }
    .tabs-inner a,
    .tabs-inner button {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    .lane-line {
        display: none !important;
    }
    .t-card,
    .pattern-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }
    #app {
        width: 100% !important;
        max-width: 100vw !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        overflow-x: hidden !important;
    }
    #rightbar {
        display: none !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
    }
}

/* ── Logo animation ── */
@keyframes logo-shift {
    0%   { color: var(--tan); }
    33%  { color: var(--rose); }
    66%  { color: var(--teal); }
    100% { color: var(--tan); }
}
.logo-name { animation: logo-shift 6s infinite alternate ease-in-out; font-weight: 800; }

/* ── Reveal animation ──
   .reveal starts invisible and is switched on by an IntersectionObserver. If that
   script never runs (JS disabled, or an error earlier on the page), everything
   below the hero stays at opacity 0 and the page looks empty. These two fallbacks
   mean the content is always readable and the animation is a bonus. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }

/* ── Screen-reader-only live region ──
   Paired with #jvds-announce in the nav partial. Dynamic feedback (quiz results,
   XP gained, filter counts, game over) should be written here so it is announced
   instead of being silent. Usage: JVDS.announce('Correct, 20 XP'). */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Skip link ── */
.skip-link {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
    left: 50%; transform: translateX(-50%); top: 8px;
    width: auto; height: auto;
    padding: 10px 20px; background: #BC4749; color: white;
    font-weight: 700; font-size: .9rem; border-radius: 8px;
    z-index: 9999; text-decoration: none; white-space: nowrap;
}

/* ── Keyboard focus visibility (applies site-wide) ──
   Only shows for keyboard/AT users via :focus-visible, never on mouse click.
   Double ring (light halo + dark core) so it reads on both dark and beige UI. */
:focus-visible {
    outline: 3px solid #4CC9C0;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(10,11,16,0.55);
    border-radius: 6px;
}
/* Skip link keeps its own high-contrast treatment */
.skip-link:focus-visible { outline: none; box-shadow: none; }

/* ── Reduced motion: honour the OS preference site-wide ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
}

/* ── Site header / nav ── */
.site-header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(30,28,24,0.97);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(240,234,214,0.08);
    box-shadow: 0 2px 18px rgba(0,0,0,0.3);
}
/* Header sizing note: logo (207) + nav (845) + theme toggle (41) + gaps (16)
   + padding (48) needs 1157px. The old 1140px cap was 17px short, so the flex
   layout shrank .logo-link and the wordmark spilled out of its own box and
   under the nav ("JVDesignStudioHome"). The cap is now 1200 and nothing in the
   header is allowed to shrink, so the row either fits or we switch to the
   hamburger at 1180px. Keep those two numbers in step if nav items change. */
.header-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 0 24px; height: 68px;
    display: flex; align-items: center; gap: 8px;
}
.logo-link { display: flex; align-items: center; gap: 10px; font-size: 1.22rem; margin-right: auto; flex-shrink: 0; }
/* logo.png is 181x160, not square. aspect-ratio reserves the correct width
   before the lazy image loads without distorting it. */
.logo-link img { height: 36px; width: auto; aspect-ratio: 181 / 160; border-radius: 8px; flex-shrink: 0; }
.logo-name { white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.theme-toggle { flex-shrink: 0; }
.nav-link {
    font-size: 0.85rem; font-weight: 600; color: rgba(240,234,214,0.75);
    padding: 7px 11px; border-radius: 8px; white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: rgba(255,255,255,0.07); color: var(--beige); }
.nav-link.active { background: rgba(188,71,73,0.25); color: var(--rose); }
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-btn{
  font-size:0.85rem;font-weight:600;color:rgba(240,234,214,0.75);
  padding:7px 11px;border-radius:8px;white-space:nowrap;
  background:none;border:none;cursor:pointer;font-family:inherit;
  transition:background 0.15s,color 0.15s;line-height:1.4;
}
.nav-dropdown-btn:hover{background:rgba(255,255,255,0.07);color:var(--beige)}
.nav-dropdown-menu{position:absolute;top:100%;left:0;min-width:210px;background:#1e1c18;border:1px solid rgba(240,234,214,0.12);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.4);padding:6px;display:none;flex-direction:column;gap:2px;z-index:300}
.nav-dropdown-menu a{font-size:0.82rem;font-weight:600;color:rgba(240,234,214,0.85);padding:8px 12px;border-radius:7px;white-space:nowrap;text-decoration:none;transition:background 0.15s,color 0.15s}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,0.08);color:var(--beige)}
.nav-dropdown-menu a small{opacity:0.6;font-weight:500;margin-left:4px}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{display:flex}
@media(max-width:1180px){
  .nav-dropdown{flex-direction:column;align-items:stretch}
  .nav-dropdown-btn{text-align:left;padding:14px 24px;font-size:1rem;border-radius:0;border-bottom:1px solid rgba(240,234,214,.06)}
  .nav-dropdown-menu{position:static;display:flex;background:rgba(0,0,0,0.2);border:none;border-radius:0;box-shadow:none;padding:0 0 0 16px;gap:0}
  .nav-dropdown-menu a{padding:10px 24px 10px 36px;font-size:0.9rem;border-radius:0;border-bottom:1px solid rgba(240,234,214,0.04)}
}
.nav-toggle {
    display: none; background: none; border: none;
    padding: 8px 12px; font-size: 1.4rem; cursor: pointer;
    color: var(--beige); flex-shrink: 0;
}
@media(max-width:1180px){
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:1001;background:#1e1c18;border-top:3px solid var(--rose);box-shadow:0 8px 32px rgba(0,0,0,.4);max-height:0;overflow:hidden;transition:max-height .4s ease;flex-direction:column;align-items:stretch;gap:0;}
  .main-nav.open{display:flex;max-height:calc(100vh - 68px);overflow-y:auto;}
  .main-nav a{padding:14px 24px;font-size:1rem;border-radius:0;border-bottom:1px solid rgba(240,234,214,.06);}
  .main-nav a:last-child{border-bottom:none;}
  .nav-toggle{display:block;}
}

img{max-width:100%;height:auto}
video{max-width:100%;height:auto}
/* ── Shared section labels ── */
.section-tag {
    display: inline-block;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: white;
    background: var(--teal-dk); border-radius: 999px;
    padding: 5px 16px; margin-bottom: 14px;
}
.section-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 900; color: white; line-height: 1.15;
}
.section-header { text-align: center; margin-bottom: 48px; }

/* ── Shared buttons ── */
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--rose); color: white; font-weight: 700;
    border-radius: 14px; padding: 14px 32px; font-size: 1rem;
    border: none; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn-primary:hover { background: var(--rose-dk); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.15); color: white; font-weight: 700;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 14px; padding: 13px 30px; font-size: 1rem;
    cursor: pointer; transition: background 0.15s;
}
.btn-outline:hover { background: rgba(255,255,255,0.25); }
.btn-primary--raised { box-shadow: 0 4px 0 var(--rose-dk); }
.btn-primary--raised:hover { box-shadow: 0 6px 0 #7a2e2f; }
.btn-primary--raised:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--rose-dk); }

/* ── jvds-strip (floating tab nav used on game pages) ── */
.jvds-strip{position:fixed;top:0;left:0;right:0;z-index:9999;height:0;overflow:hidden;transition:height .25s ease;background:rgba(10,10,18,0.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(240,234,214,.08);font-family:'Inter','Segoe UI',sans-serif;}
.jvds-strip.open{height:48px;}
.jvds-strip-inner{height:48px;display:flex;align-items:center;padding:0 14px;gap:8px;}
.jvds-strip-logo{font-size:.82rem;font-weight:800;color:#F0EAD6;text-decoration:none;font-family:'Fredoka',cursive;margin-right:auto;}
.jvds-strip-links{display:flex;align-items:center;gap:2px;}
.jvds-strip-links a{font-size:.72rem;font-weight:600;color:rgba(240,234,214,.65);padding:4px 8px;border-radius:6px;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s;}
.jvds-strip-links a:hover{background:rgba(255,255,255,.08);color:#F0EAD6;}
.jvds-strip-links a.hl{background:rgba(112,163,167,.18);color:#93d8d0;border:1px solid rgba(112,163,167,.25);}
.jvds-strip-close{background:none;border:none;color:rgba(240,234,214,.5);font-size:1rem;cursor:pointer;padding:4px 6px;line-height:1;flex-shrink:0;}
.jvds-tab{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:9999;background:rgba(10,10,18,0.9);border:1px solid rgba(240,234,214,.1);border-top:none;border-radius:0 0 8px 8px;padding:3px 14px 4px;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,234,214,.5);cursor:pointer;transition:color .15s,background .15s;font-family:'Inter','Segoe UI',sans-serif;}
.jvds-tab:hover{color:#F0EAD6;background:rgba(10,10,18,.98);}
.jvds-tab.hidden{display:none;}

/* ── jvds-site-nav (dark compact nav used on tool/workshop pages) ── */
.jvds-site-nav{position:sticky;top:0;z-index:9999;background:rgba(10,10,18,0.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(240,234,214,0.08);box-shadow:0 2px 16px rgba(0,0,0,0.4);font-family:'Inter','Segoe UI',sans-serif;}
.jvds-nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;height:54px;display:flex;align-items:center;gap:8px;}
.jvds-nav-logo{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:800;margin-right:auto;text-decoration:none;color:#F0EAD6;font-family:'Fredoka',cursive;}
.jvds-nav-logo img{height:30px;border-radius:7px;}
.jvds-nav-links{display:flex;align-items:center;gap:2px;}
.jvds-nav-links a{font-size:0.78rem;font-weight:600;color:rgba(240,234,214,0.6);padding:5px 9px;border-radius:7px;white-space:nowrap;text-decoration:none;transition:background 0.15s,color 0.15s;}
.jvds-nav-links a:hover{background:rgba(255,255,255,0.07);color:#F0EAD6;}
.jvds-nav-links a.active{background:rgba(188,71,73,0.25);color:#BC4749;}
.jvds-nav-links a.nav-tools{background:rgba(124,58,237,0.2);color:#a78bfa;border:1px solid rgba(124,58,237,0.3);}
.jvds-nav-links a.nav-tools:hover{background:rgba(124,58,237,0.35);color:#c4b5fd;}
.jvds-nav-links a.nav-tools.active{background:rgba(124,58,237,0.4);color:#c4b5fd;border-color:rgba(124,58,237,0.5);}
.jvds-nav-toggle{display:none;background:none;border:none;padding:6px 10px;font-size:1.3rem;cursor:pointer;color:#F0EAD6;flex-shrink:0;line-height:1;}
@media(max-width:1024px){
  .jvds-nav-links{display:none;position:absolute;top:100%;left:0;right:0;z-index:9998;background:#0d0d18;border-top:2px solid #BC4749;box-shadow:0 8px 32px rgba(0,0,0,0.5);max-height:0;overflow:hidden;transition:max-height 0.4s ease;flex-direction:column;align-items:stretch;gap:0;}
  .jvds-nav-links.open{max-height:80vh;overflow-y:auto;}
  .jvds-nav-links a{font-size:0.95rem;padding:12px 22px;border-radius:0;border-bottom:1px solid rgba(240,234,214,0.05);}
  .jvds-nav-links a:last-child{border-bottom:none;}
  .jvds-nav-toggle{display:block;}
}

/* ── jvds-tools-footer (slim footer used on tool/workshop pages) ── */
.jvds-tools-footer{height:32px;background:rgba(10,10,18,0.97);border-top:1px solid rgba(240,234,214,0.08);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;font-family:'Inter','Segoe UI',sans-serif;}
.jvds-tools-footer a{font-size:0.7rem;font-weight:600;color:rgba(240,234,214,0.5);text-decoration:none;transition:color 0.15s;}
.jvds-tools-footer a:hover{color:#F0EAD6;}

/* ── Series strip (workshop pages) ── */
.series-strip{background:var(--strip-gradient,linear-gradient(90deg,#e63946,#f4a261,#2a9d8f,#457b9d));padding:6px 24px;text-align:center}
.series-strip span{font-size:.75rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.25)}

/* ── Light-theme nav (workshop/content pages) ── */
.site-header--light{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(64,59,51,0.08);box-shadow:0 2px 18px rgba(64,59,51,0.08);}
.site-header--light .header-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:8px;}
.site-header--light .logo-link{display:flex;align-items:center;gap:10px;font-size:1.22rem;margin-right:auto;text-decoration:none;color:inherit;flex-shrink:0;}
.site-header--light .logo-link img{height:36px;width:auto;aspect-ratio:181/160;border-radius:8px;display:block;flex-shrink:0;}
.site-header--light .logo-name{font-weight:800;color:#BC4749;white-space:nowrap;}
.site-header--light .main-nav{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.site-header--light .nav-link{font-size:0.85rem;font-weight:600;color:#5a5449;padding:7px 11px;border-radius:8px;white-space:nowrap;transition:background 0.15s,color 0.15s;text-decoration:none;}
.site-header--light .nav-link:hover{background:#F0EAD6;color:#403B33;}
.site-header--light .nav-dropdown-btn{font-size:0.85rem;font-weight:600;color:#5a5449;padding:7px 11px;border-radius:8px;white-space:nowrap;background:none;border:none;cursor:pointer;font-family:inherit;transition:background 0.15s,color 0.15s;line-height:1.4}
.site-header--light .nav-dropdown-btn:hover{background:#F0EAD6;color:#403B33}
.site-header--light .nav-dropdown-menu{background:white;border-color:rgba(64,59,51,0.12)}
.site-header--light .nav-dropdown-menu a{color:#5a5449}
.site-header--light .nav-dropdown-menu a:hover{background:#F0EAD6;color:#403B33}
.site-header--light .nav-toggle{display:none;background:none;border:none;padding:8px 12px;font-size:1.4rem;cursor:pointer;color:#403B33;flex-shrink:0;line-height:1;}
@media(max-width:1180px){
  .site-header--light .main-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:200;background:white;border-top:3px solid #BC4749;box-shadow:0 8px 32px rgba(64,59,51,.18);max-height:0;overflow:hidden;transition:max-height .4s ease;flex-direction:column;align-items:stretch;gap:0;}
  .site-header--light .main-nav.open{max-height:calc(100vh - 68px);overflow-y:auto;}
  .site-header--light .main-nav a{padding:14px 24px;font-size:1rem;font-weight:600;color:#5a5449;border-radius:0;border-bottom:1px solid rgba(64,59,51,.06);transition:background .12s;text-decoration:none;}
  .site-header--light .main-nav a:last-child{border-bottom:none;}
  .site-header--light .main-nav a:hover{background:#F0EAD6;color:#403B33;}
  .site-header--light .nav-dropdown-btn{text-align:left;padding:14px 24px;font-size:1rem;border-radius:0;border-bottom:1px solid rgba(64,59,51,.06);color:#5a5449;width:100%}
  .site-header--light .nav-dropdown-btn:hover{background:#F0EAD6;color:#403B33}
  .site-header--light .nav-toggle{display:block;}
}

/* ── Section titles ──
   Default is charcoal so forgetting the modifier fails visible (dark-on-light)
   instead of invisible (beige-on-white ≈1.2:1). Dark sections MUST add
   .section-title--on-dark. Pages that scope their own colour (e.g.
   `.games-section .section-title`) still win on specificity. */
.section-title { color: var(--charcoal); }
.section-title--on-dark { color: var(--beige); }
.section-title--on-light { color: var(--charcoal); } /* alias, keep compat */
.faq-group-title { color: var(--beige); border-color: rgba(255,255,255,0.1); }
.highlight { background: rgba(112,163,167,0.1); border-color: var(--teal); color: rgba(240,234,214,0.8); }

/* ── Site footer ── 3-column: Explore / For Parents / Socials */
.site-footer { background: #2a2720; padding: 48px 24px 28px; border-top: 1px solid rgba(240,234,214,0.06); }
.footer-inner { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.footer-brand { text-align: center; }
.footer-logo { font-family: 'Fredoka', cursive; font-size: 1.5rem; font-weight: 700; color: var(--beige); }
.footer-tagline { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,234,214,0.75); margin-top: 2px; }
.footer-blurb { font-size: 0.78rem; color: rgba(240,234,214,0.6); margin: 10px auto 0; max-width: 520px; line-height: 1.5; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; text-align: left; }
.footer-col { display: flex; flex-direction: column; gap: 2px; }
.footer-col-title { font-family: 'Fredoka', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--beige); margin-bottom: 8px; }
.footer-col a { font-size: 0.82rem; font-weight: 600; color: rgba(240,234,214,0.65); padding: 7px 8px; border-radius: 6px; transition: color 0.15s, background 0.15s; line-height: 1.4; }
.footer-col a:hover { color: var(--beige); background: rgba(255,255,255,0.07); }
.footer-copy { font-size: 0.73rem; color: rgba(240,234,214,0.65); border-top: 1px solid rgba(255,255,255,0.07); padding-top: 18px; width: 100%; text-align: center; }
@media(max-width: 700px){
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-col { align-items: center; text-align: center; }
  .footer-col a { justify-content: center; }
}

/* -- A289 Mobile touch handling: prevent scroll trap on tool canvases/previews -- */
canvas{touch-action:none;max-width:100%;}
#preview-wrap, #canvas-area, #card-canvas, #app canvas, .canvas-area, .tool-canvas{touch-action:none;overscroll-behavior:contain;}
@media(max-width:700px){
  canvas{height:auto;}
  #app, #preview-wrap, .canvas-area{overscroll-behavior:contain;touch-action:none;}
}

/* -- Theme toggle (header) -- */
.theme-toggle {
    background: transparent; border: none; cursor: pointer;
    font-size: 1.15rem; line-height: 1; padding: 8px;
    border-radius: 10px; transition: background .15s;
}
.theme-toggle:hover { background: rgba(255,255,255,.08); }


/* style-workshop-hub.css */
/* ══════════════════════════════════════
           PALETTE & RESET
        ══════════════════════════════════════ */
            :root {
            --beige:      #F0EAD6;
            --tan:        var(--jv-tan);
            --tan-dk:     #b8956a;
            --rose:       var(--jv-rose);
            --rose-dk:    #9b3a3c;
            --rose-lt:    #f5e0e0;
            --teal:       #70A3A7;
            --teal-dk:    var(--jv-teal-dk);
            --teal-lt:    #e0edef;
            --charcoal:   var(--jv-charcoal);
            --charcoal-lt:var(--jv-charcoal-lt);
            --white:      #ffffff;
        }
        body {
            font-family: 'Inter', sans-serif;
            background: var(--beige);
            color: var(--charcoal);
            overflow-x: hidden;
        }

        /* ══════════════════════════════════════
           SHARED COMPONENTS
        ══════════════════════════════════════ */

            @keyframes logo-shift {
            0%   { color: var(--tan); }
            33%  { color: var(--rose); }
            66%  { color: var(--teal); }
            100% { color: var(--tan); }
        }

        /* Buttons */
            .btn-primary {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--rose); color: white;
            font-weight: 700; border-radius: 14px;
            padding: 15px 34px; font-size: 1.05rem;
            box-shadow: 0 4px 0 var(--rose-dk);
            transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
        }

            .btn-outline {
            display: inline-flex; align-items: center; gap: 8px;
            border: 2px solid var(--teal-dk); color: var(--teal-dk);
            font-weight: 700; border-radius: 14px;
            padding: 13px 32px; font-size: 1.05rem;
            transition: background 0.2s, color 0.2s, transform 0.15s;
        }

        /* Section label pill */
            .section-tag {
            display: inline-block;
            font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
            text-transform: uppercase; color: white;
            background: var(--teal-dk); border-radius: 999px;
            padding: 5px 16px; margin-bottom: 14px; border: none;
        }

        /* Section title */
            .section-title {
            font-size: clamp(1.8rem, 4vw, 2.6rem);
            font-weight: 900; color: var(--charcoal);
            line-height: 1.15; opacity: 1;
        }

        /* Scroll reveal */
        /* Card base */
        .card {
            background: white; border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(64,59,51,0.08);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(64,59,51,0.14); }

        /* ══════════════════════════════════════
           HEADER
        ══════════════════════════════════════ */
            .site-header {
            position: sticky; top: 0; z-index: 50;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(64,59,51,0.08);
            box-shadow: 0 2px 16px rgba(64,59,51,0.07);
        }
            .header-inner {
            max-width: 1200px; margin: 0 auto;
            padding: 0 28px; height: 74px;
            display: flex; justify-content: space-between; align-items: center;
        }
            .logo-link {
            display: flex; align-items: center; gap: 11px;
            font-size: 1.4rem;
        }

            .nav-link {
            font-weight: 600; font-size: 0.9rem;
            color: var(--charcoal-lt); padding: 8px 14px; border-radius: 8px;
            transition: color 0.15s, background 0.15s;
        }

        /* ══════════════════════════════════════
           HERO
        ══════════════════════════════════════ */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
            padding: 60px 28px;
        }

        /* Animated gradient background */
        .hero-bg {
            position: absolute; inset: 0; z-index: 0;
            background: linear-gradient(
                -45deg,
                var(--beige) 0%,
                #e8d5c0 20%,
                #f0c8c8 40%,
                #c8dfe0 60%,
                #d4c5b0 80%,
                var(--beige) 100%
            );
            background-size: 400% 400%;
            animation: gradwave 18s ease-in-out infinite;
        }
        @keyframes gradwave {
            0%   { background-position: 0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Floating shape decorations */
        .hero-shape {
            position: absolute; border-radius: 50%;
            background: rgba(255,255,255,0.25);
            animation: float-shape var(--dur, 8s) var(--delay, 0s) ease-in-out infinite alternate;
        }
        @keyframes float-shape {
            from { transform: translate(0, 0) rotate(0deg); }
            to   { transform: translate(var(--tx, 20px), var(--ty, -20px)) rotate(var(--rot, 15deg)); }
        }

        /* Floating emoji decorations */
        .hero-emoji {
            position: absolute;
            font-size: var(--size, 2rem);
            opacity: 0.18;
            animation: float-emoji var(--dur, 7s) var(--delay, 0s) ease-in-out infinite alternate;
            user-select: none; pointer-events: none;
        }
        @keyframes float-emoji {
            from { transform: translateY(0) rotate(0deg); }
            to   { transform: translateY(var(--ty, -18px)) rotate(var(--rot, 10deg)); }
        }

        .hero-content {
            position: relative; z-index: 1;
            max-width: 760px; text-align: center;
        }
        .hero-eyebrow {
            font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em;
            text-transform: uppercase; color: var(--rose);
            margin-bottom: 18px;
            display: flex; align-items: center; justify-content: center; gap: 10px;
        }
        .hero-eyebrow::before, .hero-eyebrow::after {
            content: ''; flex: 0 0 32px; height: 1.5px; background: var(--rose); opacity: 0.5;
        }
        .hero-title {
            font-family: 'Fredoka', cursive;
            font-size: clamp(3rem, 8vw, 5.5rem);
            font-weight: 700; line-height: 1.05;
            color: var(--charcoal);
            margin-bottom: 22px;
        }
        .hero-title .accent { color: var(--rose); }
        .hero-title .accent2 { color: var(--teal-dk); }

        .hero-desc {
            font-size: clamp(1rem, 2.5vw, 1.2rem);
            color: var(--charcoal-lt); line-height: 1.7;
            max-width: 560px; margin: 0 auto 36px;
        }
        .hero-buttons {
            display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
        }

        /* Scroll cue */
        .scroll-cue {
            position: absolute; bottom: 32px; left: 50%;
            transform: translateX(-50%); z-index: 2;
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            opacity: 0.5; animation: bounce-cue 2s ease-in-out infinite;
        }
        @keyframes bounce-cue {
            0%,100% { transform: translateX(-50%) translateY(0); }
            50%      { transform: translateX(-50%) translateY(6px); }
        }
        .scroll-cue span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal); }
        .scroll-cue svg  { color: var(--charcoal); }

        /* ══════════════════════════════════════
           CATEGORY STRIP
        ══════════════════════════════════════ */
        .category-strip {
            background: var(--charcoal);
            padding: 22px 28px;
        }
        .category-inner {
            max-width: 1200px; margin: 0 auto;
            display: flex; justify-content: center;
            gap: 12px; flex-wrap: wrap;
        }
        .category-pill {
            display: inline-flex; align-items: center; gap: 7px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            color: rgba(240,234,214,0.8);
            font-size: 0.85rem; font-weight: 600;
            padding: 8px 18px; border-radius: 999px;
            transition: background 0.2s, color 0.2s;
        }
        .category-pill:hover { background: var(--rose); color: white; border-color: var(--rose); }

        /* ══════════════════════════════════════
           FEATURED SECTION
        ══════════════════════════════════════ */
        .featured-section {
            padding: 88px 28px;
            background: var(--beige);
        }
            .section-header {
            text-align: center; margin-bottom: 52px;
        }
        .featured-grid {
            max-width: 1200px; margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 28px;
        }
        .feat-card {
            display: flex; flex-direction: column;
        }
        .feat-card-img {
            position: relative; overflow: hidden;
        }
        .feat-card-img img {
            width: 100%; height: 220px; object-fit: cover;
            transition: transform 0.4s ease;
        }
        .card:hover .feat-card-img img { transform: scale(1.05); }
        .feat-card-badge {
            position: absolute; top: 14px; left: 14px;
            font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
            text-transform: uppercase; color: white;
            padding: 4px 12px; border-radius: 999px;
        }
        .badge-book  { background: var(--rose); }
        .badge-free  { background: #c47f00; }
        .badge-game  { background: var(--teal-dk); }

        .feat-card-body {
            padding: 22px 24px 26px;
            flex: 1; display: flex; flex-direction: column;
        }
        .feat-card-title {
            font-size: 1.2rem; font-weight: 800;
            color: var(--charcoal); margin-bottom: 8px;
        }
        .feat-card-desc {
            font-size: 0.9rem; color: #6b6460;
            line-height: 1.55; flex: 1; margin-bottom: 18px;
        }
        .feat-card-cta {
            font-weight: 700; font-size: 0.9rem;
            color: var(--teal-dk);
            display: inline-flex; align-items: center; gap: 4px;
            transition: gap 0.2s;
        }
        .card:hover .feat-card-cta { gap: 8px; }

        .see-all-wrap { text-align: center; margin-top: 48px; }

        /* ══════════════════════════════════════
           ABOUT STRIP
        ══════════════════════════════════════ */
        .about-strip {
            background: var(--teal-dk);
            padding: 72px 28px;
            position: relative; overflow: hidden;
        }
        .about-strip::before {
            content: '📚';
            position: absolute; right: -20px; top: -20px;
            font-size: 160px; opacity: 0.07;
            transform: rotate(-15deg);
            pointer-events: none;
        }
        .about-strip::after {
            content: '🎲';
            position: absolute; left: -10px; bottom: -20px;
            font-size: 140px; opacity: 0.07;
            transform: rotate(10deg);
            pointer-events: none;
        }
        .about-inner {
            max-width: 780px; margin: 0 auto; text-align: center;
            position: relative; z-index: 1;
        }
        .about-inner .section-tag { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.8); }
        .about-inner h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; color: white; margin-bottom: 18px; }
        .about-inner p  { font-size: 1.05rem; color: rgba(255,255,255,0.8); line-height: 1.75; margin-bottom: 32px; }
        .about-stats {
            display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
            margin-bottom: 36px;
        }
        .stat { text-align: center; }
        .stat-num { font-family: 'Fredoka', cursive; font-size: 2.4rem; font-weight: 700; color: white; line-height: 1; }
        .stat-label { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
        .btn-about {
            display: inline-flex; align-items: center; gap: 8px;
            background: white; color: var(--teal-dk);
            font-weight: 700; border-radius: 14px;
            padding: 14px 32px; font-size: 1rem;
            transition: transform 0.15s, box-shadow 0.15s;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        .btn-about:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }

        /* ══════════════════════════════════════
           UPDATES
        ══════════════════════════════════════ */
        .updates-section {
            padding: 88px 28px;
            background: white;
        }
        .updates-grid {
            max-width: 900px; margin: 0 auto;
            display: flex; flex-direction: column; gap: 20px;
        }
        .update-card {
            background: var(--beige); border-radius: 18px;
            padding: 28px 32px;
            display: flex; gap: 28px; align-items: flex-start;
            border-left: 4px solid var(--teal);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .update-card:hover { transform: translateX(4px); box-shadow: 0 8px 24px rgba(64,59,51,0.08); }
        .update-card.rose  { border-color: var(--rose); }
        .update-meta { flex: 0 0 140px; }
        .update-date { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--teal-dk); margin-bottom: 6px; }
        .update-card.rose .update-date { color: var(--rose); }
        .update-title { font-size: 1.15rem; font-weight: 800; color: var(--charcoal); }
        .update-body { flex: 1; }
        .update-body p { font-size: 0.95rem; color: var(--charcoal-lt); line-height: 1.65; margin-bottom: 14px; }
        .update-link { font-weight: 700; font-size: 0.9rem; color: var(--rose); transition: opacity 0.15s; }
        .update-link:hover { opacity: 0.75; }

        @media (max-width: 600px) {
            .update-card { flex-direction: column; gap: 12px; }
            .update-meta { flex: unset; }
        }

        /* ══════════════════════════════════════
           MERCH SECTION
        ══════════════════════════════════════ */
        .merch-section {
            padding: 88px 28px;
            background: var(--tan);
            position: relative; overflow: hidden;
        }
        .merch-section::before {
            content: '🛍️';
            position: absolute; right: 5%; top: 50%;
            transform: translateY(-50%);
            font-size: 200px; opacity: 0.08;
            pointer-events: none;
        }
        .merch-inner {
            max-width: 680px; margin: 0 auto; text-align: center;
            position: relative; z-index: 1;
        }
        .merch-inner .section-tag { border-color: var(--charcoal); color: var(--charcoal); opacity: 0.7; }
        .merch-inner h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; color: var(--charcoal); margin-bottom: 16px; }
        .merch-inner p  { font-size: 1.05rem; color: var(--charcoal-lt); line-height: 1.7; margin-bottom: 32px; }

        /* ══════════════════════════════════════
           SOCIALS
        ══════════════════════════════════════ */
        .socials-section {
            padding: 88px 28px;
            background: var(--beige);
            border-top: 2px solid rgba(64,59,51,0.06);
        }
        .socials-grid {
            max-width: 1100px; margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 16px;
        }
        .social-card {
            background: white; border-radius: 18px;
            padding: 26px 18px;
            display: flex; flex-direction: column; align-items: center; gap: 10px;
            text-align: center;
            box-shadow: 0 4px 16px rgba(64,59,51,0.07);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .social-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(64,59,51,0.13); }
        .social-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; }
        .social-platform { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dk); }
        .social-name { font-size: 1rem; font-weight: 800; color: var(--charcoal); }
        .social-desc { font-size: 0.78rem; color: #7a746c; line-height: 1.4; }
        .social-arrow { font-size: 0.85rem; font-weight: 700; color: var(--rose); margin-top: 4px; }

        /* Contact row */
        .contact-row {
            max-width: 680px; margin: 48px auto 0;
            background: white; border-radius: 18px;
            padding: 36px 32px; text-align: center;
            box-shadow: 0 4px 20px rgba(64,59,51,0.07);
        }
        .contact-row h3 { font-size: 1.4rem; font-weight: 800; color: var(--charcoal); margin-bottom: 8px; }
        .contact-row p  { font-size: 0.95rem; color: var(--charcoal-lt); margin-bottom: 24px; }
        .contact-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
        .contact-btn {
            display: inline-flex; align-items: center; gap: 8px;
            font-weight: 700; font-size: 0.9rem; padding: 11px 22px;
            border-radius: 10px; border: 2px solid;
            transition: background 0.2s, color 0.2s, transform 0.15s;
        }
        .contact-btn:hover { transform: translateY(-2px); }
        .contact-btn.email { border-color: var(--rose); color: var(--rose); }
        .contact-btn.email:hover { background: var(--rose); color: white; }
        .contact-btn.insta { border-color: var(--teal-dk); color: var(--teal-dk); }
        .contact-btn.insta:hover { background: var(--teal-dk); color: white; }

        /* ══════════════════════════════════════
           ABOUT SECTION (bottom)
        ══════════════════════════════════════ */
        #about {
            padding: 72px 28px;
            background: var(--charcoal);
            text-align: center;
        }
        #about .section-tag { border-color: rgba(240,234,214,0.3); color: rgba(240,234,214,0.7); }
        #about h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 900; color: var(--beige); margin-bottom: 16px; }
        #about p  { font-size: 1rem; color: rgba(240,234,214,0.72); line-height: 1.8; max-width: 600px; margin: 0 auto; }

        /* ══════════════════════════════════════
           FOOTER
        ══════════════════════════════════════ */
        footer {
            background: #2e2a24;
            padding: 28px;
            text-align: center;
            color: rgba(240,234,214,0.35);
            font-size: 0.82rem;
        }
        footer a { color: rgba(240,234,214,0.5); transition: color 0.15s; }
        footer a:hover { color: rgba(240,234,214,0.85); }

        /* ══════════════════════════════════════
           RESPONSIVE TWEAKS
        ══════════════════════════════════════ */
        @media (max-width: 640px) {
            .hero-buttons { flex-direction: column; align-items: center; }
            .btn-primary, .btn-outline { width: 100%; max-width: 300px; justify-content: center; }
            .about-stats { gap: 24px; }
        }
    
        

    
        /* ═══════════════════════════════════
           SHARED: NAV + FOOTER  (v2 unified)
        ═══════════════════════════════════ */
        .footer-brand{display:flex;flex-direction:column;gap:6px;}
        /* ═══════════════════════════════════ */
        
        /* ═══════════════════════════════════
           DARK MODE CSS VARIABLES
        ═══════════════════════════════════ */
            :root {
            --bg-primary:    #F0EAD6;
            --bg-secondary:  #ffffff;
            --bg-tertiary:   #e8e0cc;
            --text-primary:  var(--jv-charcoal);
            --text-secondary:var(--jv-charcoal-lt);
            --text-muted:    #8a8278;
            --border:        var(--jv-tan);
            --border-lt:     rgba(64,59,51,.08);
            --header-bg:     rgba(255,255,255,.96);
            --card-bg:       #ffffff;
            --card-shadow:   0 5px 22px rgba(64,59,51,.07);
        }
        [data-theme="dark"] {
            --bg-primary:    var(--jv-night-2);
            --bg-secondary:  #2a2720;
            --bg-tertiary:   #322f27;
            --text-primary:  var(--jv-beige);
            --text-secondary:#c8bfaa;
            --text-muted:    #7a7268;
            --border:        #3a3830;
            --border-lt:     rgba(240,234,214,.08);
            --header-bg:     rgba(30,28,24,.97);
            --card-bg:       #2a2720;
            --card-shadow:   0 5px 22px rgba(0,0,0,.3);
        }
        /* Apply variables to body */
        body { background-color: var(--bg-primary); color: var(--text-primary); }
        /* Dark mode header */
        [data-theme="dark"] .site-header { background: var(--header-bg) !important; border-color: var(--border-lt) !important; }
        [data-theme="dark"] .nav-link { color: var(--text-secondary) !important; }
        [data-theme="dark"] .nav-link:hover { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; }
        [data-theme="dark"] .main-nav { background: var(--bg-secondary) !important; border-color: var(--border-lt) !important; }
        [data-theme="dark"] .main-nav a { color: var(--text-secondary) !important; border-color: var(--border-lt) !important; }
        [data-theme="dark"] .main-nav a:hover { background: var(--bg-tertiary) !important; }
        /* Dark mode toggle button in header */
        .theme-toggle {
            background: none;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            padding: 5px 9px;
            font-size: .9rem;
            cursor: pointer;
            color: var(--text-secondary);
            flex-shrink: 0;
            transition: background .15s, border-color .15s;
            margin-left: 6px;
        }
        .theme-toggle:hover { background: var(--bg-tertiary); }

        /* ═══════════════════════════════════════════════
           DARK MODE, COMPREHENSIVE OVERRIDES
        ═══════════════════════════════════════════════ */
        [data-theme="dark"] .card                { background: var(--card-bg) !important; box-shadow: var(--card-shadow) !important; }
        [data-theme="dark"] .feat-card-title     { color: var(--text-primary) !important; }
        [data-theme="dark"] .feat-card-desc      { color: var(--text-secondary) !important; }
        [data-theme="dark"] .featured-section    { background: var(--bg-primary) !important; }
        [data-theme="dark"] .updates-section     { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .update-card         { background: var(--bg-tertiary) !important; }
        [data-theme="dark"] .update-title        { color: var(--text-primary) !important; }
        [data-theme="dark"] .update-body p       { color: var(--text-secondary) !important; }
        [data-theme="dark"] .socials-section     { background: var(--bg-primary) !important; border-color: var(--border-lt) !important; }
        [data-theme="dark"] .social-card         { background: var(--card-bg) !important; box-shadow: var(--card-shadow) !important; }
        [data-theme="dark"] .social-name         { color: var(--text-primary) !important; }
        [data-theme="dark"] .social-desc         { color: var(--text-muted) !important; }
        [data-theme="dark"] .contact-row         { background: var(--card-bg) !important; box-shadow: var(--card-shadow) !important; }
        [data-theme="dark"] .contact-row h3      { color: var(--text-primary) !important; }
        [data-theme="dark"] .contact-row p       { color: var(--text-secondary) !important; }
        [data-theme="dark"] .section-tag         { border-color: var(--border) !important; color: #fff !important; }
        [data-theme="dark"] .section-header h2   { color: var(--text-primary) !important; }
        [data-theme="dark"] .section-header p    { color: var(--text-secondary) !important; }
        [data-theme="dark"] .merch-section       { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .merch-inner h2      { color: var(--text-primary) !important; }
        [data-theme="dark"] .merch-inner p       { color: var(--text-secondary) !important; }
        [data-theme="dark"] .merch-inner .section-tag { color: var(--text-muted) !important; border-color: var(--border) !important; }
        [data-theme="dark"] .category-bar        { background: #1a1814 !important; }
        [data-theme="dark"] .hero-bg             {
            background: linear-gradient(-45deg,var(--jv-night-2) 0%,#2a2418 25%,#281818 50%,#182020 60%,#221e18 80%,var(--jv-night-2) 100%) !important;
            background-size: 400% 400% !important;
        }
        /* ── Article cards dark mode ── */
        [data-theme="dark"] .article-card       { background: var(--card-bg) !important; box-shadow: 0 4px 20px rgba(0,0,0,.3) !important; }
        [data-theme="dark"] .article-title      { color: var(--text-primary) !important; }
        [data-theme="dark"] .article-excerpt    { color: var(--text-secondary) !important; }
        [data-theme="dark"] .article-date       { color: var(--text-muted) !important; }
        [data-theme="dark"] .article-read-time  { color: var(--text-muted) !important; }
        [data-theme="dark"] .courses-section    { background: var(--bg-primary) !important; }
        [data-theme="dark"] .behind-section     { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .behind-title       { color: var(--text-primary) !important; }
        [data-theme="dark"] .behind-label       { color: var(--text-muted) !important; }
        [data-theme="dark"] .behind-count       { color: var(--text-muted) !important; }
        [data-theme="dark"] .fa-title           { color: var(--text-primary) !important; }
        [data-theme="dark"] .fa-desc            { color: var(--text-secondary) !important; }
        [data-theme="dark"] .fa-badge           { color: var(--text-muted) !important; }
        [data-theme="dark"] .ws-section-sub     { color: var(--text-muted) !important; opacity:1 !important; }
        [data-theme="dark"] .ws-section-count   { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; }
        [data-theme="dark"] .ws-section-label   { opacity:.95 !important; }
        /* ═══════════════════════════════════ */
    
        /* ══ GAMES SECTION ══ */
        .games-section { padding: 80px 24px; background: var(--charcoal); }
        .games-section .section-tag { border-color: rgba(112,163,167,0.4); color: var(--teal); }
        .games-section .section-title { color: white; }
        .games-grid {
            max-width: 1100px; margin: 48px auto 0;
            display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 20px;
        }
        .game-card {
            background: rgba(255,255,255,0.04); border: 1px solid rgba(240,234,214,0.1);
            border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; text-decoration: none;
        }
        .game-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); border-color: rgba(112,163,167,0.35); }
        .game-thumb { height: 140px; display: flex; align-items: center; justify-content: center; position: relative; }
        .game-emoji { font-size: 3rem; }
        .game-badge { position: absolute; top: 12px; right: 12px; background: var(--rose); color: white; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
        .game-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
        .game-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
        .game-title { font-size: 1.05rem; font-weight: 800; color: var(--beige); line-height: 1.2; }
        .game-desc { font-size: 0.82rem; color: rgba(240,234,214,0.55); line-height: 1.55; flex: 1; }
        .game-cta { font-size: 0.82rem; font-weight: 700; color: var(--teal); margin-top: 6px; }
        .game-card:hover .game-cta { color: #9dd4d7; }
        @media (max-width: 640px) { .games-grid { grid-template-columns: 1fr; } }

/* ── WORKSHOP PAGE EXTRA ── */
.ws-hero{padding:32px 28px 28px;background:var(--beige);border-bottom:3px solid var(--tan);}
.ws-hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
@media(max-width:680px){.ws-hero-inner{grid-template-columns:1fr;gap:20px}}
.ws-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dk);margin-bottom:10px}
.ws-title{font-size:clamp(2.4rem,6vw,4rem);font-weight:900;color:var(--charcoal);line-height:1;margin-bottom:14px}
.ws-title span{color:var(--rose)}
.ws-sub{font-size:1rem;color:var(--charcoal-lt);line-height:1.7;max-width:440px}
.ws-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ws-pill{font-size:.72rem;font-weight:800;padding:6px 14px;border-radius:999px;letter-spacing:.03em;color:white;border:none;display:inline-flex;align-items:center;gap:5px}
        .ws-pill:nth-child(1){background:#478cbf}
        .ws-pill:nth-child(2){background:#c8b200;color:#1a1600}
        .ws-pill:nth-child(3){background:#4b8a2e}
        .ws-pill:nth-child(4){background:#c0392b}
        .ws-pill:nth-child(5){background:#e8631a}
        .ws-pill:nth-child(6){background:var(--jv-teal-dk)}
        .ws-pill:nth-child(7){background:#6b4fa0}
        .ws-pill:nth-child(8){background:#2c7a4b}
        .ws-pill:nth-child(9){background:#1a6ec0}
        .ws-pill:nth-child(10){background:#b84200}
        .ws-pill:nth-child(11){background:var(--jv-charcoal-lt)}
.ws-stat-grid{background:white;border-radius:16px;box-shadow:0 4px 20px rgba(64,59,51,.08);padding:20px 22px;min-width:200px}
.ws-stat-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(64,59,51,.07);font-size:.82rem}
.ws-stat-row:last-child{border-bottom:none}
.ws-stat-label{color:var(--charcoal-lt)}
.ws-stat-val{font-weight:800;color:var(--rose)}

/* Course grid */
.courses-section{padding:72px 28px;background:white}
.courses-section.alt{background:var(--beige)}
.courses-inner{max-width:1100px;margin:0 auto}
.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;margin-top:40px}
.course-card{background:white;border-radius:18px;overflow:hidden;box-shadow:0 4px 20px rgba(64,59,51,.08);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.course-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(64,59,51,.14)}
.course-thumb{height:160px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0}
.course-thumb-emoji{font-size:4rem;z-index:1}
.course-thumb-badge{position:absolute;top:12px;left:12px;font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:6px;color:white;z-index:2}
.course-body{padding:20px 22px;flex:1;display:flex;flex-direction:column;gap:6px}
.course-tag{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dk)}
.course-title{font-size:1.1rem;font-weight:900;color:var(--charcoal);line-height:1.2}
.course-desc{font-size:.82rem;color:var(--charcoal-lt);line-height:1.6;flex:1}
.course-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.course-chip{font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:5px;background:rgba(64,59,51,.06)}
.course-cta{margin-top:12px;font-size:.85rem;font-weight:800;color:var(--rose);display:inline-flex;align-items:center;gap:5px;transition:gap .15s}
.course-card:hover .course-cta{gap:9px}



/* ── ARTICLE CARDS (behind the scenes) ── */
.cat-section { padding: 52px 28px 24px; }
.cat-header { max-width: 1100px; margin: 0 auto 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cat-label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.cat-title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; color: var(--charcoal); line-height: 1.1; }
.cat-count { font-size: .78rem; font-weight: 700; color: var(--charcoal-lt); flex-shrink: 0; }
.cat-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.cat-divider { max-width: 1100px; margin: 40px auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--tan), transparent); }
.feat-article-wrap { max-width: 1100px; margin: 0 auto; padding: 0 0 8px; }



/* ── ARTICLE / BEHIND THE SCENES SECTION ── */
.behind-section { padding: 64px 28px; background: var(--beige); }
.behind-inner { max-width: 1100px; margin: 0 auto; }
.behind-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.behind-label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); margin-bottom: 5px; }
.behind-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: var(--charcoal); line-height: 1.1; }
.behind-count { font-size: .78rem; font-weight: 700; color: var(--charcoal-lt); flex-shrink: 0; }
.behind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin-top: 20px; }
.feat-wrap { margin-bottom: 8px; }


        .articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
        .article-card{background:white;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(64,59,51,.08);transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column;cursor:pointer}
        .article-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;flex-shrink:0}
        .article-thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem}
        .article-tag-badge{position:absolute;top:12px;left:12px;font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:999px;z-index:2}
        .article-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
        .article-date{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tan-dk);margin-bottom:8px}
        .article-title{font-family:'Lora',serif;font-size:1.1rem;font-weight:600;color:var(--charcoal);line-height:1.35;margin-bottom:10px}
        .article-excerpt{font-size:.85rem;color:var(--charcoal-lt);line-height:1.7;flex:1;margin-bottom:16px}
        .article-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
        .article-read-time{font-size:.72rem;font-weight:600;color:var(--charcoal-lt);display:flex;align-items:center;gap:4px}
        .article-read-more{font-size:.8rem;font-weight:700;color:var(--teal-dk);display:inline-flex;align-items:center;gap:6px;transition:gap .15s,color .15s}
        
        /* ── FEATURED ARTICLE CARD ── */
        .feat-article{grid-column:1/-1;display:flex;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#1a1830,#2a1840);box-shadow:0 8px 40px rgba(0,0,0,.18);transition:transform .25s,box-shadow .25s;cursor:pointer;text-decoration:none;color:inherit}
        .feat-article:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.25)}
        .feat-article-img{flex:0 0 320px;overflow:hidden;position:relative;background:linear-gradient(135deg,#0e0a06,#1a0030);min-height:260px;display:flex;align-items:center;justify-content:center}
        .feat-article-img .fa-icon,.feat-article-img .cover-img + .fa-icon{width:100%;height:100%;min-height:260px;display:flex;align-items:center;justify-content:center;font-size:5rem;position:relative;z-index:1}
        .feat-article-body{flex:1;padding:36px 40px;display:flex;flex-direction:column;justify-content:center}
        .fa-badge{display:inline-flex;align-items:center;gap:6px;font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c084fc;margin-bottom:12px}
        .fa-title{font-size:clamp(1.3rem,3vw,1.8rem);font-weight:900;color:white;line-height:1.3;margin-bottom:12px}
        .fa-desc{font-size:.92rem;color:rgba(240,234,214,.85);line-height:1.7;margin-bottom:20px}
        .fa-cta{font-size:.88rem;font-weight:700;color:var(--teal);display:inline-flex;align-items:center;gap:6px;transition:gap .15s}
        .feat-article:hover .fa-cta{gap:10px}
        @media(max-width:700px){.feat-article{flex-direction:column}.feat-article-img{flex:none;height:200px;min-height:200px}}

        /* Ensure featured card always renders fully */
        .feat-article.reveal { opacity: 1 !important; transform: none !important; }
        .feat-article.reveal.visible { opacity: 1; transform: none; }

/* style-workshop.css */
/* ============================================================
   style-workshop.css , JVDesignStudio
   Shared styles for all interactive workshop pages.
   Covers: dark theme, XP system, step cards, quiz gates,
   code challenges, true/false, order steps, predict, finish.
   ============================================================ */

/* ── Workshop dark theme tokens ── */
:root {
  --bg:#0a0b10;--bg2:#0f1018;--bg3:#14161f;--card:#1a1d2a;--border:rgba(255,255,255,.08);
  --text:#e8eaf2;--muted:rgba(232,234,242,.55);
  --accent:#ff7700;--accent2:#ffaa44;--green:#06d6a0;--teal:#4dd9e0;
  --pink:#ff70b8;--purple:#a78bfa;--blue:#60a5fa;--red:#f87171;--yellow:#ffd166;
  --asphalt:#2a2d3a;--xp-gold:#ffd166;--xp-glow:rgba(255,209,102,.3);
}

/* ── Workshop hero (shared across all workshop pages) ── */
section.hero{position:relative;overflow:hidden;padding:56px 24px 48px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(255,119,0,.05),rgba(147,51,234,.03));min-height:320px;display:flex;align-items:center}
section.hero::before{content:'';position:absolute;inset:0;background-image:
  radial-gradient(circle at 20% 50%, rgba(255,119,0,.08) 0%, transparent 50%),
  radial-gradient(circle at 80% 80%, rgba(147,51,234,.06) 0%, transparent 50%);pointer-events:none}
.hero-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1;width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,119,0,.12);border:1px solid rgba(255,119,0,.3);color:var(--accent);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:20px;margin-bottom:16px}
section.hero h1{font-family:'Fredoka',cursive;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.15;color:#fff;margin-bottom:14px;font-weight:700;letter-spacing:-.02em}
section.hero h1 em{color:var(--accent);font-style:normal;display:inline}
.hero-sub{font-size:1.05rem;color:rgba(232,234,242,.65);max-width:620px;line-height:1.7;margin-bottom:28px;font-weight:400}
.hero-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;align-items:center}
.pill{font-size:.8rem;font-weight:700;padding:7px 14px;border-radius:10px;border:1px solid;letter-spacing:.05em;text-transform:uppercase;transition:all .2s}
.pill.p-age{color:var(--pink);border-color:rgba(255,112,184,.4);background:rgba(255,112,184,.1)}
.pill.p-time{color:var(--teal);border-color:rgba(77,217,224,.4);background:rgba(77,217,224,.1)}
.pill.p-tool{color:var(--accent);border-color:rgba(255,119,0,.4);background:rgba(255,119,0,.1)}
.pill.p-free{color:var(--yellow);border-color:rgba(255,209,102,.4);background:rgba(255,209,102,.1)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-start{background:linear-gradient(135deg,#ff7700,#cc5500);color:#fff;font-family:'Fredoka',cursive;font-size:1.1rem;font-weight:700;padding:14px 32px;border-radius:14px;border:none;cursor:pointer;box-shadow:0 5px 0 #993300;transition:transform .12s,filter .15s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;letter-spacing:.03em}
.btn-start:hover{filter:brightness(1.15);transform:translateY(-2px)}.btn-start:active{transform:translateY(1px);box-shadow:0 2px 0 #993300}

/* ── XP BAR ── */
.xp-wrap{max-width:1200px;margin:0 auto;padding:18px 24px 0;border-bottom:1px solid var(--border)}
.xp-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.xp-icon{font-size:1.6rem}
.xp-label{font-family:'Fredoka',cursive;font-size:1rem;color:var(--xp-gold);min-width:90px;font-weight:700}
.xp-track{flex:1;min-width:200px;height:12px;background:var(--asphalt);border-radius:6px;overflow:hidden;position:relative;border:1px solid rgba(255,209,102,.1)}
.xp-fill{height:100%;background:linear-gradient(90deg,#ffaa44,#ffd166);border-radius:6px;transition:width .6s cubic-bezier(.22,1,.36,1);width:0%;box-shadow:0 0 12px rgba(255,209,102,.4)}
.xp-level{font-family:'Fredoka',cursive;font-size:.85rem;color:var(--muted);white-space:nowrap;font-weight:600}
.xp-streak{display:flex;align-items:center;gap:5px;font-size:.82rem;font-weight:700;color:var(--muted);margin-left:8px}
.xp-streak.hot{color:#ff9944;animation:pulse 1.5s ease-in-out infinite}
.xp-streak .fire{font-size:1rem}
@keyframes xp-pop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
.xp-pop{animation:xp-pop .4s ease}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes xp-toast-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes xp-toast-out{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}
.xp-toast{position:fixed;bottom:28px;right:28px;background:linear-gradient(135deg,#2a1800,#1a1000);border:1px solid rgba(255,209,102,.35);padding:12px 20px;border-radius:14px;font-family:'Fredoka',cursive;color:var(--xp-gold);font-size:1rem;z-index:999;pointer-events:none;animation:xp-toast-in .3s ease forwards}
.xp-toast.out{animation:xp-toast-out .3s ease forwards}
/* Quiz/code-challenge/concept-fill streak fx (streakFx() in workshop-engine.js).
   A correct answer at streak 3 and streak 15 used to look identical, this
   is the escalation: a small particle pop that grows with the streak, plus
   a body shake once it's really hot. */
@keyframes streakPop{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1)}}
@keyframes confettiBurst{0%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(var(--cdx),var(--cdy)) rotate(var(--cr)) scale(.4)}}
body.streak-shake{animation:streakShake .3s ease-out}
@keyframes streakShake{0%{transform:translate(0,0)}25%{transform:translate(-5px,3px)}50%{transform:translate(4px,-3px)}75%{transform:translate(-3px,2px)}100%{transform:translate(0,0)}}
@keyframes levelup{0%{transform:scale(.7);opacity:0}50%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
.levelup-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.levelup-card{background:linear-gradient(135deg,#2a1800,#1a1000);border:2px solid var(--xp-gold);border-radius:24px;padding:40px 48px;text-align:center;animation:levelup .5s ease forwards}
.levelup-card .lvl-icon{font-size:3rem;margin-bottom:8px}
.levelup-card .lvl-title{font-family:'Fredoka',cursive;font-size:1.6rem;color:var(--xp-gold);margin-bottom:4px}
.levelup-card .lvl-sub{font-size:.9rem;color:var(--muted);margin-bottom:16px}
.levelup-card button{background:linear-gradient(135deg,#ff7700,#cc5500);color:#fff;font-family:'Fredoka',cursive;font-size:1rem;padding:10px 28px;border-radius:10px;border:none;cursor:pointer;box-shadow:0 3px 0 #993300}

/* ── PROGRESS ── */
.progress-wrap{max-width:1200px;margin:0 auto;padding:24px 24px 20px;border-bottom:1px solid var(--border)}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.progress-label{font-size:.8rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.progress-count{font-size:.9rem;font-weight:800;color:var(--accent);font-family:'Fredoka',cursive}
.progress-track{height:10px;background:var(--asphalt);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.progress-fill{height:100%;background:linear-gradient(90deg,#ff7700,#ffaa44);border-radius:6px;transition:width .6s cubic-bezier(.22,1,.36,1);width:0%;box-shadow:0 0 8px rgba(255,119,0,.3);position:relative;overflow:hidden}
.progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progressShimmer 2s ease-in-out infinite;transform:translateX(-100%)}
@keyframes progressShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.step-dots{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.step-dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);background:var(--asphalt);font-size:.75rem;font-weight:900;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);font-family:'Fredoka',cursive;font-weight:700;position:relative}
.step-dot:hover{border-color:rgba(255,255,255,.3);transform:scale(1.15)}
.step-dot.done{background:var(--green);border-color:var(--green);color:#000;box-shadow:0 0 8px rgba(6,214,160,.3)}
.step-dot.active{border-color:var(--accent);color:var(--accent);background:rgba(255,119,0,.15);box-shadow:0 0 8px rgba(255,119,0,.3);animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 8px rgba(255,119,0,.3)}50%{box-shadow:0 0 16px rgba(255,119,0,.5),0 0 24px rgba(255,119,0,.2)}}

/* ── STEP CARDS ── */
.workshop{max-width:1200px;margin:0 auto;padding:28px 24px}
.step-card{background:var(--card);border:1px solid var(--border);border-radius:20px;margin-bottom:20px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.step-card.active-step{border-color:rgba(255,119,0,.4);box-shadow:0 0 32px rgba(255,119,0,.06)}
.step-card.completed{border-color:rgba(6,214,160,.25)}
.step-card.locked{opacity:.45;pointer-events:none}
.step-header{padding:24px 28px 18px;display:flex;align-items:flex-start;gap:18px;cursor:pointer;user-select:none;background:linear-gradient(135deg,rgba(255,255,255,.02),transparent)}
.step-num{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Fredoka',cursive;font-size:1.4rem;font-weight:700;flex-shrink:0;transition:all .2s}
.sn-orange{background:rgba(255,119,0,.2);color:var(--accent);border:2px solid rgba(255,119,0,.35)}
.sn-green{background:rgba(6,214,160,.18);color:var(--green);border:2px solid rgba(6,214,160,.3)}
.sn-yellow{background:rgba(255,209,102,.18);color:var(--yellow);border:2px solid rgba(255,209,102,.3)}
.sn-pink{background:rgba(255,112,184,.18);color:var(--pink);border:2px solid rgba(255,112,184,.3)}
.sn-purple{background:rgba(167,139,250,.18);color:var(--purple);border:2px solid rgba(167,139,250,.3)}
.sn-teal{background:rgba(77,217,224,.18);color:var(--teal);border:2px solid rgba(77,217,224,.3)}
.sn-red{background:rgba(248,113,113,.18);color:var(--red);border:2px solid rgba(248,113,113,.3)}
.sn-done{background:rgba(6,214,160,.25);color:var(--green);border:2px solid var(--green)}
.step-title-wrap{flex:1}
.step-emoji{font-size:1.6rem;margin-bottom:4px;line-height:1}
.step-title{font-family:'Fredoka',cursive;font-size:1.35rem;color:#fff;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.step-blurb{font-size:.85rem;color:rgba(232,234,242,.6);margin-top:4px;line-height:1.6}
.step-status{font-size:.75rem;font-weight:800;padding:4px 10px;border-radius:8px;flex-shrink:0;align-self:flex-start;margin-top:4px}
.ss-todo{background:rgba(255,255,255,.06);color:var(--muted)}
.ss-active{background:rgba(255,119,0,.15);color:var(--accent)}
.ss-done{background:rgba(6,214,160,.15);color:var(--green)}
.step-card .step-body{padding:0 28px 28px;display:none}
.step-card.open .step-body{display:block}
.step-card.open .step-header{border-bottom:1px solid rgba(255,255,255,.05)}
.big-goal{background:rgba(255,119,0,.07);border:1px solid rgba(255,119,0,.2);border-radius:14px;padding:16px 18px;margin-bottom:18px;display:flex;gap:12px;align-items:flex-start}
.big-goal-icon{font-size:1.8rem;flex-shrink:0;line-height:1}
.big-goal-text strong{font-size:.9rem;color:var(--accent);display:block;margin-bottom:3px}
.big-goal-text p{font-size:.88rem;color:var(--muted);line-height:1.6}
.callout{border-radius:12px;padding:14px 16px;margin:14px 0;display:flex;gap:10px;align-items:flex-start;font-size:.87rem;line-height:1.6}
.callout-icon{font-size:1.1rem;flex-shrink:0;line-height:1.4}
.callout.tip{background:rgba(6,214,160,.07);border:1px solid rgba(6,214,160,.25);color:#b2f0e0}
.callout.info{background:rgba(96,165,250,.07);border:1px solid rgba(96,165,250,.25);color:#bdd8ff}
.callout.warn{background:rgba(255,209,102,.07);border:1px solid rgba(255,209,102,.25);color:#ffe5a0}
.callout.parent{background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.3);color:#d8cfff}
.callout.fun{background:rgba(255,112,184,.07);border:1px solid rgba(255,112,184,.25);color:#ffd6ef}
.workshop h3,.step-card h3{font-family:'Fredoka',cursive;font-size:1.05rem;color:#fff;margin:18px 0 8px}
.workshop h3:first-child,.step-card h3:first-child{margin-top:0}
.steps-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin:10px 0}
.steps-list li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.6;color:var(--text)}
.steps-list li .num-badge{width:24px;height:24px;border-radius:50%;background:var(--asphalt);border:2px solid var(--border);font-size:.72rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;font-family:'Fredoka',cursive;color:var(--accent)}

/* ── QUIZ GATE ── */
.quiz-gate{background:linear-gradient(135deg,rgba(167,139,250,.08),rgba(255,119,0,.05));border:1px solid rgba(167,139,250,.25);border-radius:16px;padding:22px 20px;margin-top:22px}
.quiz-gate.passed{border-color:var(--green);background:rgba(6,214,160,.06)}
.quiz-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.quiz-icon{font-size:1.5rem}
.quiz-title{font-family:'Fredoka',cursive;font-size:1.05rem;color:#fff}
.quiz-xp-badge{margin-left:auto;font-family:'Fredoka',cursive;font-size:.78rem;color:var(--xp-gold);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.25);padding:3px 10px;border-radius:8px}
.quiz-question{font-size:.92rem;color:var(--text);line-height:1.6;margin-bottom:14px}
.quiz-options{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.quiz-opt{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .18s;font-size:.88rem;color:var(--text);user-select:none}
.quiz-opt:hover{border-color:rgba(167,139,250,.4);background:rgba(167,139,250,.06)}
.quiz-opt .opt-letter{width:28px;height:28px;border-radius:8px;background:var(--asphalt);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Fredoka',cursive;font-size:.82rem;font-weight:700;color:var(--muted);flex-shrink:0;transition:all .18s}
.quiz-opt.selected{border-color:var(--purple);background:rgba(167,139,250,.1)}
.quiz-opt.selected .opt-letter{background:var(--purple);color:#fff;border-color:var(--purple)}
.quiz-opt.correct{border-color:var(--green);background:rgba(6,214,160,.1);animation:optCorrect .4s ease}
.quiz-opt.correct .opt-letter{background:var(--green);color:#000;border-color:var(--green);animation:optLetterPop .3s cubic-bezier(.34,1.56,.64,1)}
.quiz-opt.wrong{border-color:var(--red);background:rgba(248,113,113,.08);animation:feedbackShake .4s ease}
.quiz-opt.wrong .opt-letter{background:var(--red);color:#fff;border-color:var(--red)}
@keyframes optCorrect{0%{background:rgba(6,214,160,0)}50%{background:rgba(6,214,160,.18)}100%{background:rgba(6,214,160,.1)}}
@keyframes optLetterPop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.quiz-opt.disabled{pointer-events:none;opacity:.6}
.quiz-feedback{font-size:.85rem;line-height:1.6;padding:12px 14px;border-radius:10px;margin-bottom:12px;display:none}
.quiz-feedback.show{display:flex;gap:8px;align-items:flex-start;animation:feedbackIn .35s cubic-bezier(.22,1,.36,1)}
.quiz-feedback.correct{background:rgba(6,214,160,.08);border:1px solid rgba(6,214,160,.25);color:#b2f0e0}
.quiz-feedback.wrong{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);color:#ffbdbd;animation:feedbackShake .4s ease}
.quiz-feedback .fb-icon{font-size:1.1rem;flex-shrink:0}
@keyframes feedbackIn{0%{opacity:0;transform:translateY(8px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes feedbackShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-6px)}30%{transform:translateX(5px)}45%{transform:translateX(-4px)}60%{transform:translateX(3px)}75%{transform:translateX(-1px)}}
.quiz-submit{background:linear-gradient(135deg,var(--purple),#8b5cf6);color:#fff;font-family:'Fredoka',cursive;font-size:.95rem;padding:11px 24px;border-radius:10px;border:none;cursor:pointer;transition:filter .15s,transform .12s;box-shadow:0 3px 0 #6d28d9;display:none}
.quiz-submit.show{display:inline-flex;align-items:center;gap:8px}
.quiz-submit:hover{filter:brightness(1.1);transform:translateY(-1px)}
.quiz-submit:disabled{opacity:.45;pointer-events:none}
.quiz-next-btn{background:linear-gradient(135deg,var(--green),#04a07a);color:#000;font-family:'Fredoka',cursive;font-size:1rem;padding:13px 28px;border-radius:12px;border:none;cursor:pointer;transition:filter .15s,transform .12s;display:none;width:100%;align-items:center;justify-content:center;gap:8px;box-shadow:0 3px 0 #027a5a;margin-top:10px}
.quiz-next-btn.show{display:flex}
.quiz-next-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* ── FILL-IN-THE-BLANK CODE CHALLENGE ── */
.code-challenge{background:linear-gradient(135deg,rgba(96,165,250,.06),rgba(0,0,0,.2));border:1px solid rgba(96,165,250,.25);border-radius:16px;padding:22px 20px;margin-top:18px}
.code-challenge.passed{border-color:var(--green);background:rgba(6,214,160,.06)}
.cc-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cc-icon{font-size:1.4rem}
.cc-title{font-family:'Fredoka',cursive;font-size:1.05rem;color:#fff}
.cc-xp-badge{margin-left:auto;font-family:'Fredoka',cursive;font-size:.78rem;color:var(--xp-gold);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.25);padding:3px 10px;border-radius:8px}
.cc-prompt{font-size:.88rem;color:var(--muted);line-height:1.6;margin-bottom:14px}
.cc-code-area{background:linear-gradient(135deg,#0c0e16,#12141e);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;margin-bottom:14px;font-family:'JetBrains Mono','Courier New',monospace;font-size:.82rem;line-height:2;color:#ffe0b2;white-space:pre-wrap;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.3)}
.cc-code-area::before{content:'Code';position:absolute;top:0;right:0;font-family:'Fredoka',cursive;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(96,165,250,.5);background:rgba(96,165,250,.08);padding:3px 10px;border-radius:0 11px 0 8px}
.cc-blank{display:inline-block;min-width:100px;background:rgba(96,165,250,.12);border:2px dashed rgba(96,165,250,.4);border-radius:6px;padding:2px 8px;color:var(--blue);font-family:'JetBrains Mono','Courier New',monospace;font-size:.82rem;outline:none;transition:border-color .2s}
.cc-blank:focus{border-color:var(--blue);border-style:solid;background:rgba(96,165,250,.18)}
.cc-blank.correct{border-color:var(--green);border-style:solid;background:rgba(6,214,160,.15);color:var(--green)}
.cc-blank.wrong{border-color:var(--red);border-style:solid;background:rgba(248,113,113,.1);color:var(--red)}
.cc-check-btn{background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;font-family:'Fredoka',cursive;font-size:.95rem;padding:11px 24px;border-radius:10px;border:none;cursor:pointer;transition:filter .15s,transform .12s;box-shadow:0 3px 0 #2563eb;display:inline-flex;align-items:center;gap:8px}
.cc-check-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.cc-check-btn:disabled{opacity:.45;pointer-events:none}
.cc-feedback{font-size:.85rem;line-height:1.6;padding:12px 14px;border-radius:10px;margin-top:12px;display:none}
.cc-feedback.show{display:flex;gap:8px;align-items:flex-start;animation:feedbackIn .35s cubic-bezier(.22,1,.36,1)}
.cc-feedback.correct{background:rgba(6,214,160,.08);border:1px solid rgba(6,214,160,.25);color:#b2f0e0}
.cc-feedback.wrong{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);color:#ffbdbd;animation:feedbackShake .4s ease}
.cc-hint{font-size:.82rem;color:var(--muted);margin-top:8px;display:none;cursor:pointer}
.cc-hint:hover{color:var(--text)}
.cc-hint.show{display:block}

/* ── CONCEPT FILL-IN-THE-BLANK ── */
.concept-fill{background:linear-gradient(135deg,rgba(255,209,102,.06),rgba(0,0,0,.15));border:1px solid rgba(255,209,102,.25);border-radius:16px;padding:22px 20px;margin-top:18px}
.concept-fill.passed{border-color:var(--green);background:rgba(6,214,160,.06)}
.cf-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cf-icon{font-size:1.4rem}
.cf-title{font-family:'Fredoka',cursive;font-size:1.05rem;color:#fff}
.cf-xp-badge{margin-left:auto;font-family:'Fredoka',cursive;font-size:.78rem;color:var(--xp-gold);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.25);padding:3px 10px;border-radius:8px}
.cf-sentence{font-size:.9rem;color:var(--text);line-height:2;margin-bottom:14px}
.cf-blank{display:inline-block;min-width:80px;background:rgba(255,209,102,.1);border:2px dashed rgba(255,209,102,.35);border-radius:6px;padding:2px 8px;color:var(--yellow);font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;outline:none;transition:border-color .2s}
.cf-blank:focus{border-color:var(--yellow);border-style:solid;background:rgba(255,209,102,.15)}
.cf-blank.correct{border-color:var(--green);border-style:solid;background:rgba(6,214,160,.15);color:var(--green)}
.cf-blank.wrong{border-color:var(--red);border-style:solid;background:rgba(248,113,113,.1);color:var(--red)}
.cf-check-btn{background:linear-gradient(135deg,var(--yellow),#e6a800);color:#000;font-family:'Fredoka',cursive;font-size:.95rem;padding:11px 24px;border-radius:10px;border:none;cursor:pointer;transition:filter .15s,transform .12s;box-shadow:0 3px 0 #b38600;display:inline-flex;align-items:center;gap:8px}
.cf-check-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.cf-check-btn:disabled{opacity:.45;pointer-events:none}
.cf-feedback{font-size:.85rem;line-height:1.6;padding:12px 14px;border-radius:10px;margin-top:12px;display:none}
.cf-feedback.show{display:flex;gap:8px;align-items:flex-start;animation:feedbackIn .35s cubic-bezier(.22,1,.36,1)}
.cf-feedback.correct{background:rgba(6,214,160,.08);border:1px solid rgba(6,214,160,.25);color:#b2f0e0}
.cf-feedback.wrong{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);color:#ffbdbd;animation:feedbackShake .4s ease}

/* ── TRUE/FALSE SPEED ROUND ── */
.tf-round{background:linear-gradient(135deg,rgba(77,217,224,.06),rgba(0,0,0,.15));border:1px solid rgba(77,217,224,.25);border-radius:16px;padding:22px 20px;margin-top:18px}
.tf-round.passed{border-color:var(--green);background:rgba(6,214,160,.06)}
.tf-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tf-icon{font-size:1.4rem}
.tf-title{font-family:'Fredoka',cursive;font-size:1.05rem;color:#fff}
.tf-xp-badge{margin-left:auto;font-family:'Fredoka',cursive;font-size:.78rem;color:var(--xp-gold);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.25);padding:3px 10px;border-radius:8px}
.tf-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;margin-bottom:8px;font-size:.88rem;color:var(--text);line-height:1.5}
.tf-item .tf-statement{flex:1}
.tf-btns{display:flex;gap:6px;flex-shrink:0}
.tf-btn{padding:6px 14px;border-radius:8px;border:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);font-family:'Fredoka',cursive;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .18s;color:var(--muted)}
.tf-btn:hover{border-color:rgba(255,255,255,.3);color:var(--text)}
.tf-btn.selected{border-color:var(--teal);color:var(--teal);background:rgba(77,217,224,.1)}
.tf-btn.correct-answer{border-color:var(--green);color:var(--green);background:rgba(6,214,160,.15)}
.tf-btn.wrong-answer{border-color:var(--red);color:var(--red);background:rgba(248,113,113,.1)}
.tf-item.answered{pointer-events:none}
.tf-check-btn{background:linear-gradient(135deg,var(--teal),#3ab8bf);color:#000;font-family:'Fredoka',cursive;font-size:.95rem;padding:11px 24px;border-radius:10px;border:none;cursor:pointer;transition:filter .15s,transform .12s;box-shadow:0 3px 0 #2a8e94;display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.tf-check-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.tf-check-btn:disabled{opacity:.45;pointer-events:none}
.tf-feedback{font-size:.85rem;line-height:1.6;padding:12px 14px;border-radius:10px;margin-top:12px;display:none}
.tf-feedback.show{display:flex;gap:8px;align-items:flex-start;animation:feedbackIn .35s cubic-bezier(.22,1,.36,1)}
.tf-feedback.correct{background:rgba(6,214,160,.08);border:1px solid rgba(6,214,160,.25);color:#b2f0e0}
.tf-feedback.wrong{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);color:#ffbdbd;animation:feedbackShake .4s ease}

/* ── ORDER THE STEPS ── */
.order-challenge{background:linear-gradient(135deg,rgba(255,112,184,.06),rgba(0,0,0,.15));border:1px solid rgba(255,112,184,.25);border-radius:16px;padding:22px 20px;margin-top:18px}
.order-challenge.passed{border-color:var(--green);background:rgba(6,214,160,.06)}
.oc-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.oc-icon{font-size:1.4rem}
.oc-title{font-family:'Fredoka',cursive;font-size:1.05rem;color:#fff}
.oc-xp-badge{margin-left:auto;font-family:'Fredoka',cursive;font-size:.78rem;color:var(--xp-gold);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.25);padding:3px 10px;border-radius:8px}
.oc-prompt{font-size:.88rem;color:var(--muted);line-height:1.6;margin-bottom:14px}
.oc-items{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.oc-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .18s;font-size:.88rem;color:var(--text);user-select:none}
.oc-item:hover{border-color:rgba(255,112,184,.3);background:rgba(255,112,184,.05)}
.oc-item .oc-num{width:26px;height:26px;border-radius:50%;background:var(--asphalt);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Fredoka',cursive;font-size:.78rem;font-weight:700;color:var(--muted);flex-shrink:0;transition:all .18s}
.oc-item.picked .oc-num{background:var(--pink);border-color:var(--pink);color:#fff}
.oc-item.correct-pos{border-color:var(--green)}
.oc-item.correct-pos .oc-num{background:var(--green);border-color:var(--green);color:#000}
.oc-item.wrong-pos{border-color:var(--red)}
.oc-item.wrong-pos .oc-num{background:var(--red);border-color:var(--red);color:#fff}
.oc-check-btn{background:linear-gradient(135deg,var(--pink),#e0509a);color:#fff;font-family:'Fredoka',cursive;font-size:.95rem;padding:11px 24px;border-radius:10px;border:none;cursor:pointer;transition:filter .15s,transform .12s;box-shadow:0 3px 0 #b33d7a;display:inline-flex;align-items:center;gap:8px}
.oc-check-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.oc-check-btn:disabled{opacity:.45;pointer-events:none}
.oc-reset-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:var(--muted);font-family:'Fredoka',cursive;font-size:.82rem;padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .15s;margin-left:8px}
.oc-reset-btn:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.oc-feedback{font-size:.85rem;line-height:1.6;padding:12px 14px;border-radius:10px;margin-top:12px;display:none}
.oc-feedback.show{display:flex;gap:8px;align-items:flex-start;animation:feedbackIn .35s cubic-bezier(.22,1,.36,1)}
.oc-feedback.correct{background:rgba(6,214,160,.08);border:1px solid rgba(6,214,160,.25);color:#b2f0e0}
.oc-feedback.wrong{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);color:#ffbdbd;animation:feedbackShake .4s ease}

/* ── PREDICT WHAT HAPPENS ── */
.predict-challenge{background:linear-gradient(135deg,rgba(96,165,250,.06),rgba(167,139,250,.06));border:1px solid rgba(96,165,250,.25);border-radius:16px;padding:22px 20px;margin-top:18px}
.predict-challenge.passed{border-color:var(--green);background:rgba(6,214,160,.06)}
.pc-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pc-icon{font-size:1.4rem}
.pc-title{font-family:'Fredoka',cursive;font-size:1.05rem;color:#fff}
.pc-xp-badge{margin-left:auto;font-family:'Fredoka',cursive;font-size:.78rem;color:var(--xp-gold);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.25);padding:3px 10px;border-radius:8px}
.pc-scenario{font-size:.88rem;color:var(--muted);line-height:1.6;margin-bottom:14px;padding:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:10px}
.pc-scenario strong{color:var(--text)}

/* ── FINISH BANNER ── */
.finish-banner{display:none;background:linear-gradient(135deg,rgba(255,119,0,.12),rgba(147,51,234,.08));border:1px solid rgba(255,119,0,.3);border-radius:20px;padding:32px;text-align:center;margin:20px 0;position:relative;overflow:hidden}
.finish-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,209,102,.15),transparent 60%);pointer-events:none}
.finish-banner.show{display:block;animation:finishReveal .6s cubic-bezier(.22,1,.36,1)}
@keyframes finishReveal{0%{opacity:0;transform:scale(.9) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.finish-title{font-family:'Fredoka',cursive;font-size:2rem;color:var(--accent);margin-bottom:8px;animation:finishTitle .8s ease .2s both}
@keyframes finishTitle{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.finish-sub{font-size:.95rem;color:var(--muted);line-height:1.6;max-width:500px;margin:0 auto 20px}
.confetti-row{font-size:1.8rem;letter-spacing:.2em;margin-bottom:16px}
.next-ep-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ff7700,#cc5500);color:#fff;font-family:'Fredoka',cursive;font-size:1rem;padding:12px 28px;border-radius:12px;box-shadow:0 4px 0 #993300;text-decoration:none;transition:filter .15s,transform .12s}
.next-ep-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.final-stats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.final-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 20px;text-align:center;min-width:100px;animation:statPop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0) * .1s + .4s)}
.final-stat:nth-child(1){--i:0}.final-stat:nth-child(2){--i:1}.final-stat:nth-child(3){--i:2}.final-stat:nth-child(4){--i:3}
@keyframes statPop{0%{opacity:0;transform:scale(.7) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.final-stat .stat-val{font-family:'Fredoka',cursive;font-size:1.5rem;color:var(--xp-gold)}
.final-stat .stat-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

/* ── SUPPORT PROMPT ── */
.support-prompt{margin-top:24px;padding:20px 24px;background:rgba(255,209,102,.06);border:1px solid rgba(255,209,102,.2);border-radius:16px;text-align:center}
.support-prompt-text{font-size:.88rem;color:var(--muted);line-height:1.6;margin-bottom:12px}
.support-prompt-text strong{color:var(--xp-gold)}
.support-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ff5e5b,#ff9966);color:#fff;font-family:'Fredoka',cursive;font-size:.92rem;padding:10px 24px;border-radius:10px;text-decoration:none;transition:filter .15s,transform .12s;box-shadow:0 3px 0 #cc4a48}
.support-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* ── SKILLS STRIP ── */
.skills-strip{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px}
.skill-tag{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;padding:5px 11px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(232,234,242,.75)}
.skill-tag span{font-size:.9em}

/* ── WORKSHOP RESPONSIVE ── */
@media(max-width:768px){
  section.hero{padding:40px 18px 36px;min-height:280px}
  section.hero h1{font-size:clamp(1.8rem,5vw,2.6rem)}
  .hero-sub{font-size:.95rem}
  .hero-pills{gap:8px;margin-bottom:24px}
  .hero-btns{gap:10px}
  .btn-start{font-size:1rem;padding:12px 24px}
  .xp-wrap{padding:14px 18px 0}
  .xp-track{min-width:150px}
  .progress-wrap{padding:18px 18px 16px}
  .workshop{padding:20px 18px}
  .step-header{padding:18px 20px 14px;gap:14px}
  .step-num{width:40px;height:40px;font-size:1.2rem}
  .step-emoji{font-size:1.4rem}
  .step-title{font-size:1.1rem}
  .step-card .step-body{padding:0 20px 20px}
}

/* VISUAL GUIDE FIGURES (step-by-step diagrams) */
.vg-fig{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 16px 12px;margin:16px 0}
.vg-fig svg{display:block;width:100%;height:auto;max-width:660px;margin:0 auto}
.vg-caption{font-size:.8rem;color:rgba(232,234,242,.55);text-align:center;margin-top:10px;line-height:1.6}
.vg-caption strong{color:rgba(232,234,242,.9)}
.vg-check{display:flex;gap:10px;align-items:flex-start;background:rgba(147,51,234,.08);border:1px solid rgba(147,51,234,.28);border-radius:12px;padding:12px 14px;margin:14px 0;font-size:.85rem;line-height:1.6;color:#dcd0f5}
.vg-check .vg-check-icon{flex-shrink:0;font-size:1.05rem;line-height:1.4}
@media print{.vg-fig{border:1px solid #ccc;background:#fff}.vg-caption{color:#444}.vg-check{border:1px solid #ccc;background:#fff;color:#333}}

/* 3D MODEL PREVIEW (finished-model viewer + STL download) */
.model-preview{max-width:820px;margin:18px auto 0;padding:0 24px}
.mp-head{font-family:'Fredoka',cursive;font-size:1.05rem;font-weight:600;color:#fff;margin-bottom:10px}
model-viewer{width:100%;height:300px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;--poster-color:transparent}
.mp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.mp-hint{font-size:.78rem;color:var(--muted)}
.mp-dl{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;padding:9px 16px;border-radius:10px;background:rgba(147,51,234,.12);border:1px solid rgba(147,51,234,.35);color:#c9a8f0;text-decoration:none;transition:background .15s}
.mp-dl:hover{background:rgba(147,51,234,.25)}
@media print{.model-preview{display:none}}

/* TROUBLESHOOTING */
.trouble{max-width:820px;margin:8px auto 28px;padding:22px 24px;background:rgba(255,209,102,.05);border:1px solid rgba(255,209,102,.22);border-radius:16px}
.trouble-title{font-family:'Fredoka',cursive;font-size:1.15rem;color:#ffd166;margin-bottom:14px}
.trouble-item{margin-bottom:12px;font-size:.88rem;line-height:1.65}
.trouble-item:last-child{margin-bottom:0}
.trouble-q{font-weight:700;color:#ffe5a0}
.trouble-a{color:rgba(232,234,242,.75)}
@media print{.trouble{border:1px solid #ccc;background:#fff}.trouble-title{color:#111}.trouble-q{color:#333}.trouble-a{color:#444}}

/* ============================================================
   WOW LAYER , ambient polish shared across every workshop page.
   Purely additive; all motion gated behind prefers-reduced-motion,
   gradient text gated behind @supports so it can never go invisible.
   ============================================================ */

/* Richer, slowly-shifting hero backdrop */
section.hero{background:linear-gradient(135deg,rgba(255,119,0,.08),rgba(147,51,234,.06) 52%,rgba(255,119,0,.07));background-size:200% 200%}

/* Drifting glow blob (::before is the existing static radial layer, so we use ::after) */
section.hero::after{content:'';position:absolute;pointer-events:none;z-index:0;top:-18%;right:-12%;width:60vw;height:60vw;max-width:640px;max-height:640px;border-radius:50%;background:radial-gradient(circle, rgba(255,119,0,.14), transparent 62%);filter:blur(8px)}

/* Gradient + glow on the highlighted hero word (safe fallback: stays --accent if unsupported) */
section.hero h1{text-shadow:0 2px 44px rgba(255,119,0,.18)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  section.hero h1 em{background:linear-gradient(92deg,#ff9a3c,#ffcb6b 45%,#c9a2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}

/* Sheen sweep across the primary Start button */
.btn-start{position:relative;overflow:hidden}
.btn-start::after{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn-start:hover::after{left:150%}

/* Lift + glow on step cards (transform added to the transition so it eases) */
.step-card{transition:border-color .2s,box-shadow .2s,transform .2s}
.step-card:hover{border-color:rgba(255,119,0,.32);box-shadow:0 14px 36px rgba(0,0,0,.34),0 0 0 1px rgba(255,119,0,.12);transform:translateY(-3px)}

/* Ambient motion (only for users who allow it) */
@media (prefers-reduced-motion:no-preference){
  section.hero{animation:wkHeroPan 22s ease-in-out infinite}
  section.hero::after{animation:wkBlob 16s ease-in-out infinite}
}
@keyframes wkHeroPan{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes wkBlob{0%,100%{transform:translate(0,0) scale(1);opacity:.9}50%{transform:translate(-30px,26px) scale(1.12);opacity:1}}

/* ============================================================
   WORKSHOP CLARITY LAYER
   Adds stronger "what am I doing now?" cues across the shared
   lesson pages and the custom builder-style workshops.
   ============================================================ */
.lesson-map{
  max-width:1200px;margin:22px auto 0;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(150px,.55fr));gap:12px;
}
.lesson-map-card{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:15px 16px;
  min-height:92px;box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.lesson-map-card::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--green),var(--teal));opacity:.9}
.lesson-map-kicker{font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.lesson-map-title{font-family:'Fredoka',cursive;font-size:1.05rem;font-weight:700;color:#fff;line-height:1.2}
.lesson-map-text{font-size:.82rem;line-height:1.55;color:rgba(232,234,242,.66);margin-top:5px}
.lesson-map-step{display:flex;align-items:center;gap:10px}
.lesson-map-num{
  width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka',cursive;font-weight:700;color:#111;background:var(--xp-gold);flex-shrink:0;
}
.lesson-map-small{font-size:.82rem;font-weight:800;color:#fff;line-height:1.25}
.lesson-map-small span{display:block;font-size:.72rem;font-weight:700;color:var(--muted);margin-top:2px}

.progress-wrap{
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));
}
.progress-header::after{
  content:'Build one piece, check it, then unlock the next.';
  margin-left:auto;font-size:.72rem;color:var(--muted);font-weight:700;text-transform:none;letter-spacing:0;
}
.step-card{
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),
    var(--card);
}
.step-card.active-step{box-shadow:0 18px 54px rgba(255,119,0,.08),0 0 0 1px rgba(255,119,0,.12)}
.step-card.completed{background:linear-gradient(135deg,rgba(6,214,160,.07),rgba(255,255,255,.015)),var(--card)}
.step-card.locked{opacity:.58;filter:saturate(.72)}
.step-header{position:relative}
.step-header::after{
  content:'Open';
  font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px 9px;margin-left:auto;
}
.step-card.open .step-header::after{content:'Focus'}
.step-card.completed .step-header::after{content:'Done';color:var(--green);border-color:rgba(6,214,160,.28)}
.step-card.locked .step-header::after{content:'Locked'}
.step-status{display:none}
.big-goal{
  background:linear-gradient(135deg,rgba(255,119,0,.1),rgba(255,209,102,.045));
  border-color:rgba(255,119,0,.28);
}
.steps-list li{
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055);
  border-radius:12px;padding:9px 10px;
}
.quiz-gate,.code-challenge,.concept-fill,.tf-round,.order-challenge,.predict-challenge{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 32px rgba(0,0,0,.16);
}
.quiz-next-btn,.cc-check-btn,.cf-check-btn,.tf-check-btn,.oc-check-btn,.btn-start{
  min-height:44px;
}
.quiz-feedback .fb-icon,.cf-feedback .fb-icon,.tf-feedback .fb-icon{
  font-size:0;min-width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
}
.quiz-feedback.correct .fb-icon::before,.cf-feedback.correct .fb-icon::before,.tf-feedback.correct .fb-icon::before{
  content:'OK';font-size:.72rem;font-weight:900;color:#04130f;
}
.quiz-feedback.wrong .fb-icon::before,.cf-feedback.wrong .fb-icon::before,.tf-feedback.wrong .fb-icon::before{
  content:'!';font-size:1rem;font-weight:900;color:#230707;
}

/* Builder-style workshops: make the active build area clearer and safer on mobile. */
.main-layout{
  width:min(1440px,calc(100% - 32px))!important;max-width:calc(100% - 32px)!important;margin:24px auto!important;
  grid-template-columns:minmax(0,1fr) minmax(320px,400px)!important;
  gap:18px!important;align-items:start;box-sizing:border-box;
}
.steps-panel,.game-panel{
  min-width:0;box-sizing:border-box;overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.steps-tabs{
  position:sticky;top:0;z-index:4;background:inherit;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tab-btn{
  min-width:42px;min-height:42px;border-radius:10px;
}
.tab-btn.done{position:relative}
.tab-btn.done::after{
  content:'';position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px rgba(6,214,160,.7);
}
.game-panel{position:sticky;top:92px}
.game-wrap{box-sizing:border-box}
.game-wrap canvas,#gameCanvas,#gc,#gcFS{
  display:block;
  max-width:calc(100% - 16px)!important;
  height:auto!important;
  touch-action:none;
}
.progress-strip{
  position:sticky;bottom:0;z-index:70;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.1);
}
.blueprint-coach{
  max-width:1200px;margin:16px auto 0;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(145px,.55fr));gap:12px;
}
.blueprint-coach-card{
  border:1px solid rgba(122,184,245,.2);border-radius:16px;padding:14px 16px;
  background:linear-gradient(135deg,rgba(36,99,235,.16),rgba(255,255,255,.035));
  box-shadow:0 18px 44px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  color:rgba(255,255,255,.9);
}
.blueprint-coach-card strong,.blueprint-coach-card b{display:block;color:#fff;line-height:1.18}
.blueprint-coach-card strong{font-size:1.04rem;margin-bottom:6px}
.blueprint-coach-card b{font-size:.9rem;margin-bottom:4px}
.blueprint-coach-card span{display:block;color:rgba(226,236,255,.72);font-size:.82rem;line-height:1.45}
.blueprint-coach-kicker{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:5px 9px;border-radius:999px;
  background:rgba(122,184,245,.14);color:#9bd0ff;font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.layout{
  width:min(1440px,calc(100% - 32px))!important;max-width:calc(100% - 32px)!important;margin:24px auto!important;
  grid-template-columns:minmax(0,1fr) minmax(320px,420px)!important;
  gap:18px!important;align-items:start;box-sizing:border-box;
}
.steps-col,.game-col{
  min-width:0;box-sizing:border-box;overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.game-col{position:sticky;top:92px}
.step-tabs{
  position:sticky;top:0;z-index:4;background:inherit;max-width:100%;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tb{
  min-width:42px;min-height:42px;border-radius:10px;
}
.tb.done{position:relative}
.tb.done::after{
  content:'';position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--green,#06d6a0);
  box-shadow:0 0 10px rgba(6,214,160,.7);
}
.bp-outer,.bp-canvas-wrap{
  box-shadow:inset 0 0 0 1px rgba(122,184,245,.18),0 18px 44px rgba(0,0,0,.28);
}
.bp-outer canvas,.bp-canvas-wrap canvas{
  display:block;
  max-width:100%!important;
  height:auto!important;
}
.bp-outer:focus-visible,.bp-canvas-wrap:focus-visible{
  outline:3px solid var(--bp-lt,#7ab8f5);outline-offset:3px;
}
.task-list{
  padding:10px;border:1px solid rgba(255,255,255,.075);border-radius:13px;
  background:rgba(255,255,255,.026);
}
.task-item{
  min-height:34px;line-height:1.35;
}
.run-btn{
  white-space:normal;line-height:1.2;text-align:center;min-height:44px;
}
.site-header,.header-inner{
  max-width:100vw;box-sizing:border-box;
}

@media(max-width:980px){
  .lesson-map{grid-template-columns:1fr 1fr;padding:0 18px}
  .lesson-map-card:first-child{grid-column:1/-1}
  .blueprint-coach{grid-template-columns:1fr 1fr;padding:0 18px}
  .blueprint-coach-lead{grid-column:1/-1}
  .game-panel,.game-col{position:relative;top:auto}
  .main-layout{width:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important;grid-template-columns:minmax(0,1fr)!important}
  .layout{width:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important;grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:700px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  pre,code,kbd,samp,span,strong,em{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
  pre *,code *{max-width:100%!important;overflow-wrap:anywhere;word-break:break-word}
  pre{white-space:pre-wrap;overflow-x:auto}
  table,thead,tbody,tr,th,td{display:block;max-width:100%;overflow-x:auto;white-space:normal!important}
  .main-nav:not(.open),.jvds-nav-links:not(.open){display:none!important;max-height:0!important;overflow:hidden!important}
  .main-nav.open,.jvds-nav-links.open{left:0!important;right:0!important;max-width:100vw!important;overflow-x:hidden!important}
  .header-inner,.site-header--light .header-inner{max-width:100vw!important;padding-left:12px!important;padding-right:18px!important;overflow:hidden}
  #navToggle.nav-toggle{transform:translateX(-18px)}
  [style*="display:inline-flex"],[style*="display: inline-flex"]{display:flex!important;flex-wrap:wrap!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  [class*="hero-glow"]{max-width:100vw!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important}
  .hdr{width:100%!important;max-width:100vw!important;min-width:0!important;flex-wrap:wrap;gap:8px}
  .hdr-right,.obar,.landing-features{max-width:100%!important;min-width:0!important;overflow-wrap:anywhere;word-break:break-word}
  .obar{white-space:normal!important}
  .hdr-right .quick-btn{display:none!important}
  .ft-folder,.ft-note,.ft-indent,.ft-indent2{max-width:100%!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}
  .tabs-inner{justify-content:flex-start!important;overflow-x:hidden!important}
  .tabs-inner a,.tabs-inner button{flex:1 1 100%!important;width:100%!important;max-width:100%!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere}
  .lane-line{display:none!important}
  .t-card,.pattern-wrap{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  #app{width:100%!important;max-width:100vw!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;overflow-x:hidden!important}
  #rightbar{display:none!important;position:static!important;left:auto!important;right:auto!important;width:auto!important}
  .lesson-map{grid-template-columns:1fr;gap:10px}
  .blueprint-coach{grid-template-columns:1fr;gap:10px}
  .progress-header{align-items:flex-start;gap:6px;flex-direction:column}
  .progress-header::after{margin-left:0}
  .step-header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
  .step-header::after{grid-column:2;justify-self:start;margin-left:0}
  .step-title{font-size:1.05rem}
  .steps-list li{padding:10px}
  .quiz-opt,.oc-item,.tf-item{align-items:flex-start}
  .tf-item{flex-direction:column}
  .tf-btns{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .tf-btn{min-height:42px}
  .xp-toast{left:16px;right:16px;bottom:18px;text-align:center}
  .header-inner{width:100%;padding-left:12px;padding-right:8px;overflow:hidden}
  .nav-toggle{margin-right:0;padding-left:8px;padding-right:8px;max-width:40px}
  .hero-preview,.char-card,.car-card{max-width:100%;min-width:0}
  .game-wrap{min-height:280px}
  #gameCanvas,#gc,#gcFS{max-width:100%;height:auto;touch-action:none}
  .prog-bar,.progress-strip{gap:8px;padding:10px 12px}
  .prog-dots{max-width:96px}
  .mobile-controls,.touch-ctrl{max-width:100%;overflow:hidden}
  .bp-valinput{
    position:fixed!important;left:12px!important;right:12px!important;top:auto!important;bottom:18px!important;
    max-width:none!important;z-index:9999;
  }
}

/* A44: tool-callout - companion tool prompt in workshop finish banners */
.tool-callout{background:linear-gradient(135deg,rgba(188,71,73,.12),rgba(112,163,167,.08));border:2px solid rgba(188,71,73,.45);border-radius:14px;padding:16px 20px;margin:18px 0 10px;text-align:left;}
.tool-callout-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.tool-callout-icon{font-size:2rem;flex-shrink:0;}
.tool-callout-body{flex:1;min-width:160px;}
.tool-callout-head{font-family:'Fredoka',cursive;font-size:1.1rem;font-weight:700;color:#fff;margin:0 0 4px;}
.tool-callout-desc{font-size:.8rem;color:rgba(240,234,214,.75);margin:0;line-height:1.45;}
.tool-callout-btn{display:inline-block;background:#BC4749;color:#fff;font-family:'Fredoka',cursive;font-size:.95rem;font-weight:700;padding:10px 22px;border-radius:999px;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:background .15s;}
.tool-callout-btn:hover{background:#a33a3c;}
@media(max-width:560px){.tool-callout{padding:12px 14px;}.tool-callout-inner{gap:10px;}.tool-callout-btn{width:100%;text-align:center;}}
/* A1427: builder/workshop headers packed with quick actions overflowed the
   viewport between 701px and about 1250px, where the quick buttons are
   visible but do not fit on one row. Let the header wrap instead of forcing a
   horizontal scrollbar. Below 700px the buttons are already hidden. */
@media(max-width:1250px){
  .hdr{flex-wrap:wrap!important;height:auto!important;min-width:0!important;row-gap:6px;padding-top:6px;padding-bottom:6px}
  .hdr-right{flex-wrap:wrap!important;justify-content:flex-end;max-width:100%!important;min-width:0!important}
  .hdr-right .quick-btn{flex:0 1 auto;min-width:0}
}

/* ============================================================
   PRINT / EXPORT MODE
   Clean printable version of workshop steps for offline use.
   ============================================================ */
@media print{
  *{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff!important;color:#222!important;font-size:11pt}
  .site-header,.jvds-site-nav,.site-footer,.jvds-tools-footer,
  .nav-toggle,.theme-toggle,.jvds-strip,.jvds-tab,
  .xp-wrap,.xp-toast,.levelup-overlay,
  .series-strip,.progress-strip,.mobile-controls,.touch-ctrl,
  .finish-share,.support-prompt,
  .quiz-submit,.quiz-next-btn,.cc-check-btn,.cf-check-btn,
  .tf-check-btn,.oc-check-btn,.oc-reset-btn,
  .btn-start,.hero-btns,
  .game-panel,.game-col,.game-wrap,
  .bp-outer,.bp-canvas-wrap,
  .lesson-map,.blueprint-coach{display:none!important}
  .step-card{break-inside:avoid;page-break-inside:avoid;border:1px solid #ddd!important;border-radius:8px!important;margin-bottom:12px;box-shadow:none!important;opacity:1!important;pointer-events:auto!important;filter:none!important}
  .step-card .step-body{display:block!important}
  .step-card.locked{opacity:1!important}
  .step-header{background:none!important;cursor:auto}
  .step-header::after{display:none!important}
  .step-title,.step-blurb,h3{color:#222!important}
  .step-num{border:2px solid #999!important;background:#f5f5f5!important;color:#333!important}
  .step-dots{display:none}
  .progress-wrap{border:none!important;background:none!important;padding:8px 0}
  .progress-track{height:8px;background:#e5e5e5!important;border:1px solid #ccc!important}
  .progress-fill{background:#ff7700!important}
  .progress-fill::after{display:none}
  .quiz-gate,.code-challenge,.concept-fill,.tf-round,.order-challenge,.predict-challenge{border:1px solid #ccc!important;background:#f9f9f9!important;box-shadow:none!important}
  .quiz-title,.cc-title,.cf-title,.tf-title,.oc-title,.pc-title{color:#222!important}
  .quiz-question,.cc-prompt,.cf-sentence,.oc-prompt{color:#333!important}
  .quiz-opt{border:1px solid #ccc!important;background:#fff!important;color:#222!important}
  .quiz-opt .opt-letter{background:#eee!important;border-color:#ccc!important;color:#333!important}
  .cc-code-area{background:#f4f4f4!important;color:#222!important;border:1px solid #ccc!important;box-shadow:none!important}
  .cc-code-area::before{display:none}
  .cc-blank,.cf-blank{border:1px solid #999!important;background:#fff!important;color:#222!important}
  .callout{background:#f5f5f5!important;border:1px solid #ddd!important;color:#333!important}
  .hero-badge{background:#f5f5f5!important;color:#333!important;border:1px solid #ccc!important}
  section.hero{background:#fff!important;padding:24px!important;min-height:auto!important}
  section.hero::before,section.hero::after{display:none!important}
  section.hero h1{color:#222!important;text-shadow:none!important;font-size:1.8rem!important}
  section.hero h1 em{-webkit-text-fill-color:#ff7700!important;color:#ff7700!important;background:none!important}
  .workshop{padding:0!important}
  a[href]::after{content:" (" attr(href) ")";font-size:.75em;color:#666}
  a.next-ep-btn::after,a.tool-callout-btn::after{display:none}
  .big-goal{background:#fff8f0!important;border:1px solid #e5c9a8!important;color:#333!important}
  .big-goal-text strong{color:#cc5500!important}
  .big-goal-text p{color:#555!important}
  .steps-list li{background:#f9f9f9!important;border:1px solid #e0e0e0!important;color:#333!important}
  .finish-banner{background:#fff8f0!important;border:2px solid #ff7700!important}
  .finish-banner::before{display:none}
  .finish-title{color:#cc5500!important}
  .final-stat{background:#f5f5f5!important;border:1px solid #ddd!important;animation:none!important}
  .final-stat .stat-val{color:#cc5500!important;-webkit-text-fill-color:#cc5500!important;background:none!important}
  .final-stat .stat-label{color:#555!important}
  .skill-tag{background:#f0f0f0!important;border:1px solid #ccc!important;color:#333!important}
  .finish-banner.show{animation:none!important}
  .finish-title{animation:none!important}
  .ws-sfx-toggle,.ws-timer-toggle,.ws-tts-toggle,.ws-note-btn,.ws-daily-streak,.ws-timer-display,.ws-timer-result,.ws-collectible-overlay,.ws-note-area,.ws-hint-tier,.ws-reveal-btn{display:none!important}
}

/* ============================================================
   SOUND / TIMER / TTS / NOTES TOOLBAR BUTTONS
   ============================================================ */
.ws-sfx-toggle,.ws-timer-toggle,.ws-tts-toggle{
  border:none;background:rgba(255,255,255,.12);color:var(--text-primary,#f0ead6);
  font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:999px;cursor:pointer;
  transition:background .15s,transform .15s;white-space:nowrap;
}
.ws-sfx-toggle:hover,.ws-timer-toggle:hover,.ws-tts-toggle:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}

/* ── Timer display ── */
.ws-timer-display{
  display:inline-block;background:rgba(255,119,0,.18);color:#ff7700;
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.82rem;font-weight:800;
  padding:4px 12px;border-radius:999px;margin-left:8px;
}
.ws-timer-result{
  margin-top:14px;font-size:.95rem;font-weight:700;color:var(--text-primary,#f0ead6);
  background:rgba(255,119,0,.12);border:1px solid rgba(255,119,0,.3);
  border-radius:12px;padding:12px 18px;text-align:center;
}

/* ── Daily streak badge ── */
.ws-daily-streak{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,rgba(255,119,0,.2),rgba(255,55,0,.15));
  color:#ff7700;font-size:.72rem;font-weight:800;
  padding:4px 12px;border-radius:999px;margin-left:auto;
  animation:dailyPulse 2s ease-in-out infinite;
}
@keyframes dailyPulse{0%,100%{box-shadow:0 0 6px rgba(255,119,0,.2)}50%{box-shadow:0 0 14px rgba(255,119,0,.4)}}

/* ── Step notes ── */
.ws-note-btn{
  border:none;background:transparent;font-size:1rem;cursor:pointer;padding:4px 6px;
  margin-left:auto;opacity:.5;transition:opacity .15s,transform .15s;flex-shrink:0;
}
.ws-note-btn:hover,.ws-note-btn.active{opacity:1;transform:scale(1.15)}
.ws-note-area{
  background:rgba(255,215,102,.08);border:1px dashed rgba(255,215,102,.35);
  border-radius:10px;padding:10px;margin-bottom:12px;
}
.ws-note-input{
  width:100%;border:none;background:transparent;color:var(--text-primary,#f0ead6);
  font:400 .85rem/1.5 Inter,system-ui,sans-serif;resize:vertical;outline:none;
}
.ws-note-input::placeholder{color:rgba(240,234,214,.4)}

/* ── Progressive hints ── */
.ws-hint-tier{font-size:.78rem;color:var(--muted,rgba(240,234,214,.5));font-style:italic;margin-top:6px}
.ws-reveal-btn{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  background:rgba(188,71,73,.15);border:1px solid rgba(188,71,73,.35);
  color:var(--rose,#BC4749);font-size:.78rem;font-weight:700;
  padding:6px 14px;border-radius:999px;cursor:pointer;
  transition:background .15s;
}
.ws-reveal-btn:hover{background:rgba(188,71,73,.25)}

/* ── Collectible reward overlay ── */
.ws-collectible-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(10,8,6,.75);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
}
.ws-collectible-card{
  background:linear-gradient(145deg,#2a2720,#1e1c18);
  border:2px solid rgba(255,215,102,.35);border-radius:24px;
  padding:36px 44px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 80px rgba(255,215,102,.12);
  animation:collectReveal .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes collectReveal{0%{opacity:0;transform:scale(.7) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.ws-collectible-emoji{font-size:3.5rem;margin-bottom:8px;animation:collectSpin 1s ease-out}
@keyframes collectSpin{0%{transform:rotateY(180deg) scale(.5)}100%{transform:rotateY(0) scale(1)}}
.ws-collectible-title{font-family:'Fredoka',cursive;font-size:1.4rem;font-weight:700;color:#ffd166;margin-bottom:4px}
.ws-collectible-name{font-size:1.1rem;font-weight:800;color:#f0ead6;margin-bottom:4px}
.ws-collectible-desc{font-size:.8rem;color:rgba(240,234,214,.55);margin-bottom:16px}
.ws-collectible-card button{
  background:linear-gradient(135deg,#ff7700,#e55800);color:#fff;
  font-family:'Fredoka',cursive;font-size:.95rem;font-weight:700;
  border:none;padding:10px 28px;border-radius:999px;cursor:pointer;
  box-shadow:0 3px 0 #b84500;
}
.ws-collectible-card button:hover{filter:brightness(1.1)}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
:root[data-contrast="high"] {
  --bg-primary:#000!important;--bg-secondary:#111!important;
  --text-primary:#fff!important;--text-secondary:#ddd!important;
  --charcoal:#fff!important;--charcoal-lt:#ccc!important;
  --beige:#000!important;--muted:#bbb!important;
}
:root[data-contrast="high"] .site-header{background:#000!important;border-bottom:2px solid #fff!important}
:root[data-contrast="high"] .step-card{border:2px solid #fff!important;background:#111!important}
:root[data-contrast="high"] .step-header{background:#222!important}
:root[data-contrast="high"] .quiz-opt{border:2px solid #ccc!important;background:#111!important;color:#fff!important}
:root[data-contrast="high"] .quiz-opt.correct{border-color:#0f0!important;background:#030!important}
:root[data-contrast="high"] .quiz-opt.wrong{border-color:#f00!important;background:#300!important}
:root[data-contrast="high"] .cc-code-area{background:#111!important;border:2px solid #666!important;color:#fff!important}
:root[data-contrast="high"] .cc-blank,:root[data-contrast="high"] .cf-blank{border:2px solid #fff!important;background:#222!important;color:#fff!important}
:root[data-contrast="high"] a{color:#6cf!important;text-decoration:underline!important}
:root[data-contrast="high"] .xp-wrap{border:2px solid #666!important}
:root[data-contrast="high"] .finish-banner{background:#111!important;border:2px solid #ff7700!important}
@media(prefers-contrast:more){
  :root:not([data-contrast="off"]){
    --bg-primary:#000!important;--bg-secondary:#111!important;
    --text-primary:#fff!important;--text-secondary:#ddd!important;
  }
}