:root{
    --purple-deep:#1E0F4A;
    --purple-mid:#3D2470;
    --peach:#F97316;
    --html-color:#FF6B6B;
    --css-color:#4CC9F0;
    --js-color:#FFD166;
    --binary-color:#06D6A0;
    --cream:#FFF8F0;
    --ink:#1E0F4A;
    --radius:18px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{max-width:100%;overflow-x:hidden;}
  body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
  img,svg,iframe,video{max-width:100%;}
  body{
    margin:0;
    font-family:'Nunito',sans-serif;
    background:var(--cream);
    color:var(--ink);
  }
  h1,h2,h3,.display{font-family:'Fredoka',sans-serif;}

  /* ---------- HEADER ---------- */
  header{
    background:linear-gradient(135deg,var(--purple-deep),var(--purple-mid));
    color:white;
    padding:22px 28px;
    display:flex;
    align-items:center;
    gap:16px;
    border-bottom:6px solid var(--peach);
  }
  .mascot{
    font-size:2.6rem;
    background:white;
    border-radius:50%;
    width:64px;height:64px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 0 rgba(0,0,0,.15);
    flex-shrink:0;
  }
  header h1{margin:0;font-size:1.5rem;}
  header p{margin:2px 0 0;opacity:.85;font-size:.95rem;}

  /* ---------- HOUSE SIGNATURE ---------- */
  .house-wrap{
    display:flex;justify-content:center;align-items:center;
    padding:18px 12px 6px;
    gap:28px;
    flex-wrap:wrap;
  }
  .house-caption{font-size:.85rem;color:var(--purple-mid);font-weight:700;text-align:center;max-width:220px;}
  #house-svg{width:150px;height:120px;flex-shrink:0;}
  .roof{transition:fill .5s ease,opacity .5s ease;fill:#ccc;opacity:.25;}
  .walls{transition:fill .5s ease,opacity .5s ease;fill:#ccc;opacity:.25;}
  .light{transition:fill .5s ease,opacity .5s ease;fill:#ccc;opacity:.25;}
  .light.on{animation:flicker 1.6s infinite ease-in-out;}
  @keyframes flicker{0%,100%{opacity:1;}50%{opacity:.55;}}

  /* ---------- LESSON TABS ---------- */
  .tabs{
    display:flex;gap:10px;justify-content:center;
    padding:6px 16px 18px;flex-wrap:wrap;
  }
  .tab-btn{
    font-family:'Fredoka',sans-serif;
    border:none;border-radius:999px;
    padding:10px 22px;font-size:1rem;font-weight:600;
    cursor:pointer;color:white;
    box-shadow:0 4px 0 rgba(0,0,0,.18);
    transition:transform .12s ease;
  }
  .tab-btn:active{transform:translateY(3px);box-shadow:none;}
  .tab-btn.html{background:var(--html-color);}
  .tab-btn.binary{background:var(--binary-color);}
  .tab-btn.css{background:var(--css-color);}
  .tab-btn.js{background:#E8A800;}
  .tab-btn.dim{opacity:.45;}

  /* ---------- MAIN LAYOUT ---------- */
  main{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:20px;
    padding:0 24px 32px;
    max-width:1200px;margin:0 auto;
  }
  @media (max-width:880px){ main{grid-template-columns:1fr;} }

  .card{
    background:white;
    border-radius:var(--radius);
    padding:20px 22px;
    box-shadow:0 6px 18px rgba(30,15,74,.08);
    border:2px solid rgba(30,15,74,.06);
    transition:box-shadow .2s ease;
  }
  @media (max-width:600px){
    .card{padding:16px 18px;border-radius:14px;}
    main{padding:0 14px 28px;gap:14px;}
  }
  .lesson-title{display:flex;align-items:center;gap:10px;margin-top:0;}
  .lesson-title .dot{width:14px;height:14px;border-radius:50%;display:inline-block;}
  #lessonBody{font-size:1.02rem;line-height:1.55;}
  #lessonBody code{background:#F3EFFF;padding:2px 6px;border-radius:6px;font-size:.92em;}
  .load-btn{
    margin-top:14px;
    font-family:'Fredoka',sans-serif;
    background:var(--purple-deep);color:white;border:none;
    padding:10px 18px;border-radius:12px;cursor:pointer;font-weight:600;
    box-shadow:0 4px 0 var(--purple-mid);
  }
  .load-btn:active{transform:translateY(3px);box-shadow:none;}

  /* code panels */
  .code-label{font-size:.8rem;font-weight:800;letter-spacing:.04em;margin:14px 0 4px;color:var(--purple-mid);}
  textarea.codebox{
    width:100%;min-height:70px;font-family:'Courier New',monospace;font-size:.86rem;
    border-radius:10px;border:2px solid #EEE6FB;padding:10px;resize:vertical;
    background:#FCFAFF;color:var(--ink);
  }
  textarea.codebox:focus{outline:2px solid var(--peach);border-color:var(--peach);}

  .preview-frame{
    width:100%;height:230px;border-radius:12px;border:2px solid #EEE6FB;background:white;
  }

  /* ---------- CHAT ---------- */
  #chatCard{display:flex;flex-direction:column;height:520px;}
  #chatLog{
    flex:1;overflow-y:auto;padding:6px 4px;display:flex;flex-direction:column;gap:10px;
  }
  .msg{max-width:85%;padding:10px 14px;border-radius:16px;font-size:.95rem;line-height:1.4;}
  .msg.kodi{background:#F3EFFF;color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start;}
  .msg.me{background:var(--peach);color:white;border-bottom-right-radius:4px;align-self:flex-end;}
  .msg.thinking{background:#F3EFFF;color:#888;font-style:italic;}
  #chatForm{display:flex;gap:8px;margin-top:12px;}
  #chatInput{
    flex:1;border-radius:999px;border:2px solid #EEE6FB;padding:10px 16px;font-size:.95rem;
    font-family:'Nunito',sans-serif;
  }
  #chatInput:focus{outline:none;border-color:var(--peach);}
  #sendBtn{
    background:var(--peach);color:white;border:none;border-radius:999px;
    width:44px;height:44px;font-size:1.2rem;cursor:pointer;flex-shrink:0;
    box-shadow:0 4px 0 #c2570d;
  }
  #sendBtn:active{transform:translateY(3px);box-shadow:none;}
  .suggest-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
  .chip{
    background:white;border:2px solid #EEE6FB;border-radius:999px;padding:5px 12px;
    font-size:.78rem;cursor:pointer;color:var(--purple-mid);font-weight:700;
  }
  .chip:hover{border-color:var(--peach);}

  footer{text-align:center;padding:18px;color:var(--purple-mid);font-size:.8rem;opacity:.7;}

  /* ---------- VOICE CONTROLS ---------- */
  .voice-row{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    background:#F8F4FF;border-radius:12px;padding:8px 12px;margin-bottom:10px;
    font-size:.82rem;
  }
  .voice-row label{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--purple-mid);cursor:pointer;}
  .voice-row select{
    border-radius:8px;border:1px solid #E0D6F5;padding:4px 8px;font-family:'Nunito',sans-serif;font-size:.8rem;max-width:170px;
  }
  .speak-btn{
    border:none;background:transparent;cursor:pointer;font-size:1rem;
    margin-left:6px;opacity:.6;vertical-align:middle;
  }
  .speak-btn:hover{opacity:1;}

  /* ---------- WATCH & LEARN ---------- */
  #watchCard{margin-top:16px;}
  .video-wrap{
    position:relative;width:100%;padding-bottom:56.25%;height:0;
    border-radius:12px;overflow:hidden;border:2px solid #EEE6FB;background:#111;
  }
  .video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
  .video-picker{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
  .video-picker button{
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:.85rem;
    border:none;border-radius:999px;padding:8px 16px;cursor:pointer;color:white;
    background:var(--purple-mid);box-shadow:0 3px 0 var(--purple-deep);
  }
  .video-picker button.active{background:var(--peach);box-shadow:0 3px 0 #c2570d;}

  /* ---------- PREMIUM / PAYWALL ---------- */
  .tab-btn.premium{background:linear-gradient(135deg,#7C3AED,#A855F7);}
  .lock-badge{font-size:.8em;margin-left:2px;}
  #statusBanner .upgrade-link{color:var(--peach);text-decoration:underline;cursor:pointer;font-weight:800;}

  .modal-overlay{
    position:fixed;inset:0;background:rgba(30,15,74,.55);
    display:none;align-items:center;justify-content:center;z-index:999;padding:16px;
  }
  .modal-overlay.open{display:flex;}
  .modal-box{
    background:white;border-radius:20px;max-width:420px;width:100%;
    padding:26px 24px;text-align:center;box-shadow:0 20px 40px rgba(0,0,0,.25);
  }
  .modal-box h2{margin-top:0;color:var(--purple-deep);font-size:1.3rem;line-height:1.35;}
  .modal-box .modal-subhead{color:var(--purple-mid);font-size:.9rem;margin:0 0 8px;line-height:1.4;}
  .modal-box .price{font-size:2rem;font-weight:800;color:var(--peach);font-family:'Fredoka',sans-serif;margin:6px 0;}
  .modal-box ul{text-align:left;font-size:.92rem;line-height:1.6;padding-left:20px;}
  .modal-box input[type=email]{
    width:100%;padding:10px 14px;border-radius:10px;border:2px solid #EEE6FB;
    font-family:'Nunito',sans-serif;font-size:.95rem;margin:10px 0;
  }
  .pay-btn{
    width:100%;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.05rem;
    background:var(--peach);color:white;border:none;border-radius:14px;padding:14px;
    cursor:pointer;box-shadow:0 4px 0 #c2570d;
  }
  .pay-btn:active{transform:translateY(3px);box-shadow:none;}
  .modal-close{background:none;border:none;color:var(--purple-mid);opacity:.6;cursor:pointer;font-size:.85rem;margin-top:10px;}
  #payError{color:#D14343;font-size:.85rem;margin-top:8px;min-height:18px;}

  /* ---------- ACCREDITATION BADGE ---------- */
  .accreditation{
    max-width:900px;margin:8px auto 0;padding:20px 24px;
    background:linear-gradient(135deg,var(--purple-deep),var(--purple-mid));
    border-radius:20px;color:white;
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    box-shadow:0 8px 20px rgba(30,15,74,.15);
  }
  .accreditation .seal{
    flex-shrink:0;width:64px;height:64px;border-radius:50%;
    background:var(--peach);display:flex;align-items:center;justify-content:center;
    font-size:1.8rem;box-shadow:0 3px 0 #c2570d;
  }
  .accreditation .text{flex:1;min-width:220px;}
  .accreditation h4{margin:0 0 4px;font-family:'Fredoka',sans-serif;font-size:1.05rem;}
  .accreditation p{margin:0;font-size:.85rem;opacity:.9;line-height:1.5;}
  .accreditation .brand-line{font-weight:800;color:var(--js-color);}

  /* ---------- BINARY PLAYGROUND ---------- */
  .bit-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0 10px;}
  .bit-switch{
    width:60px;height:64px;border-radius:10px;
    border:none;border-bottom:5px solid #0a8a6c;
    background:linear-gradient(180deg,#ffffff,#eafff8);
    color:var(--binary-color);font-family:'Fredoka',sans-serif;font-weight:700;
    font-size:1.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all .1s ease;box-shadow:0 2px 4px rgba(0,0,0,.08);
  }
  .bit-switch:active{transform:translateY(3px);border-bottom-width:2px;}
  .bit-switch.on{
    background:linear-gradient(180deg,var(--binary-color),#04a37f);
    color:white;border-bottom-color:#037a5e;
    transform:translateY(2px);border-bottom-width:3px;
  }
  .bit-values{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-size:.7rem;color:var(--purple-mid);font-weight:700;margin-bottom:2px;}
  .bit-values span{width:60px;text-align:center;}
  .binary-total{
    text-align:center;font-family:'Fredoka',sans-serif;font-size:1.4rem;color:var(--purple-deep);
    margin:14px 0;
  }
  .binary-total b{color:var(--binary-color);font-size:1.8rem;}
  .name-binary-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
  .name-binary-row input{
    padding:8px 14px;border-radius:10px;border:2px solid #E0FFF5;font-family:'Nunito',sans-serif;font-size:.95rem;
  }
  .name-binary-row button{
    font-family:'Fredoka',sans-serif;font-weight:600;background:var(--binary-color);color:white;
    border:none;border-radius:10px;padding:8px 18px;cursor:pointer;box-shadow:0 3px 0 #04a37f;
  }
  #nameBinaryOut{
    font-family:'Courier New',monospace;font-size:.95rem;text-align:center;margin-top:12px;
    word-break:break-all;color:var(--purple-deep);background:#F0FFF9;border-radius:10px;padding:10px;
  }

  .real-world-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
  .real-world-item{
    background:#F8F6FF;border-radius:14px;padding:14px;width:200px;text-align:center;
    border:2px solid #EEE6FB;
  }
  .real-world-item p{font-size:.82rem;color:var(--purple-mid);margin:8px 0 0;line-height:1.4;}
  @keyframes pulseMove{
    0%{ transform:translateX(0); opacity:0; }
    15%{ opacity:1; }
    85%{ opacity:1; }
    100%{ transform:translateX(150px); opacity:0; }
  }
  .pulse-dot{animation:pulseMove 1.8s linear infinite;}

  .game-stage{
    display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:center;
    background:#F8F6FF;border-radius:18px;padding:24px;margin:18px 0;position:relative;overflow:hidden;
  }
  .game-visual{flex-shrink:0;}
  .game-question-box{flex:1;min-width:240px;text-align:center;}
  .game-question{font-family:'Fredoka',sans-serif;font-size:1.1rem;color:var(--purple-deep);margin-bottom:14px;}
  .game-answer-row{display:flex;gap:8px;justify-content:center;align-items:center;margin-bottom:12px;}
  .game-answer-row input{
    width:80px;padding:10px;border-radius:10px;border:2px solid #EEE6FB;text-align:center;
    font-family:'Fredoka',sans-serif;font-size:1.1rem;
  }
  .game-check-btn{
    font-family:'Fredoka',sans-serif;font-weight:700;color:white;
    border:none;border-radius:12px;padding:10px 22px;cursor:pointer;
  }
  .game-check-btn:active{transform:translateY(3px);box-shadow:none !important;}
  .game-feedback{min-height:26px;font-weight:700;margin:8px 0;}
  .game-feedback.correct{color:#0F6E56;}
  .game-feedback.try-again{color:#B8860B;}
  .game-new-btn{
    background:none;border:2px solid var(--purple-mid);color:var(--purple-mid);border-radius:10px;
    padding:8px 18px;font-family:'Fredoka',sans-serif;font-weight:700;cursor:pointer;font-size:.85rem;
  }
  .game-counter-row{
    display:flex;justify-content:center;gap:24px;text-align:center;font-family:'Fredoka',sans-serif;
    color:var(--purple-mid);font-size:.9rem;margin-top:10px;flex-wrap:wrap;
  }
  .game-counter-row b{color:var(--peach);font-size:1.1rem;}

  .ascii-table-wrap{margin:18px 0;}
  .ascii-table-title{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--purple-mid);font-size:1rem;margin-bottom:10px;text-align:center;}
  .ascii-table{
    display:grid;grid-template-columns:repeat(8, 1fr);gap:8px;width:100%;
    max-height:340px;overflow-y:auto;padding:14px;
    background:linear-gradient(160deg,#F3EFFF,#E8E0FF);border-radius:16px;
  }
  @media (max-width:700px){ .ascii-table{grid-template-columns:repeat(5, 1fr);} }
  @media (max-width:420px){ .ascii-table{grid-template-columns:repeat(4, 1fr);} }
  .ascii-cell{
    background:linear-gradient(160deg,#ffffff,#FDF6FF);border:2px solid #E0D6F5;border-radius:12px;
    padding:8px 4px 6px;text-align:center;box-shadow:0 2px 6px rgba(30,15,74,.08);
    transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  }
  .ascii-cell .ascii-char{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.35rem;color:var(--purple-deep);line-height:1.1;}
  .ascii-cell .ascii-num{
    font-family:'Fredoka',sans-serif;font-weight:800;font-size:.95rem;color:white;
    background:var(--peach);border-radius:999px;padding:2px 8px;display:inline-block;margin-top:4px;
  }
  .ascii-cell:nth-child(6n+2) .ascii-num{background:#7C3AED;}
  .ascii-cell:nth-child(6n+3) .ascii-num{background:#06D6A0;}
  .ascii-cell:nth-child(6n+4) .ascii-num{background:#4CC9F0;}
  .ascii-cell:nth-child(6n+5) .ascii-num{background:#EF476F;}
  .ascii-cell:nth-child(6n+6) .ascii-num{background:#FFD166;color:var(--purple-deep);}
  .ascii-cell.highlight{
    background:linear-gradient(160deg,var(--binary-color),#04a37f);border-color:#04a37f;
    transform:scale(1.12);box-shadow:0 6px 14px rgba(6,214,160,.4);
  }
  .ascii-cell.highlight .ascii-char{color:white;}
  .ascii-cell.highlight .ascii-num{background:white !important;color:#04a37f !important;}

  .combo-flash{
    position:absolute;top:10px;right:16px;font-family:'Fredoka',sans-serif;font-weight:700;
    color:#F97316;font-size:.85rem;opacity:0;transition:opacity .3s ease;
  }
  .combo-flash.show{opacity:1;}
  .celebrate-emoji{
    position:absolute;font-size:1.8rem;pointer-events:none;animation:celebrateFloat 1s ease forwards;
  }
  @keyframes celebrateFloat{
    0%{transform:translateY(0) scale(0.5);opacity:0;}
    30%{opacity:1;transform:translateY(-10px) scale(1.2);}
    100%{transform:translateY(-70px) scale(1);opacity:0;}
  }

  .story-box{
    background:linear-gradient(135deg,#FFF6E0,#FFEFCB);
    border:2px solid #F0D48A;border-radius:16px;
    padding:16px 20px;margin:16px 0;font-size:.98rem;line-height:1.6;
  }
  .story-box .story-title{
    font-family:'Fredoka',sans-serif;font-weight:700;color:#8a6d1a;
    display:block;margin-bottom:8px;font-size:1.05rem;
  }

  /* ---------- IN-LESSON UNLOCK CTA ---------- */
  .unlock-cta{
    margin-top:20px;padding:20px 22px;border-radius:16px;text-align:center;
    background:linear-gradient(160deg,#1E0F4A,#3D2470);color:white;
  }
  .unlock-cta-problem{font-size:1.02rem;font-weight:700;margin:0 0 8px;line-height:1.5;}
  .unlock-cta-desire{font-size:.92rem;color:rgba(255,255,255,.85);margin:0 0 16px;line-height:1.5;}
  .unlock-cta-btn{
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;
    background:linear-gradient(135deg,var(--peach),#EF476F);color:white;border:none;border-radius:14px;
    padding:14px 28px;cursor:pointer;box-shadow:0 4px 0 #c2570d;transition:transform .15s ease,box-shadow .15s ease;
  }
  .unlock-cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #c2570d;}
  .unlock-cta-btn:active{transform:translateY(3px);box-shadow:none;}

  .inventor-group-title{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--purple-mid);font-size:.95rem;margin:18px 0 10px;}
  .inventor-grid{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
  .inventor-card{width:150px;text-align:center;}
  .inventor-avatar{
    width:64px;height:64px;border-radius:50%;margin:0 auto 8px;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.3rem;color:white;
  }
  .inventor-card p{font-size:.8rem;color:var(--purple-mid);margin:2px 0;line-height:1.4;}
  .inventor-card .inventor-name{font-weight:700;color:var(--purple-deep);font-size:.85rem;}

  .story-stage{
    border-radius:18px;padding:36px 24px;text-align:center;
    transition:background 1s ease, color .6s ease;
    background:linear-gradient(180deg,#1E0F4A,#3D2470);
    color:white;
  }
  .story-stage.on{
    background:linear-gradient(180deg,#FFE9B8,#FFD166);
    color:#5c3b1a;
  }
  .story-stage-emoji{
    display:block;font-size:3.5rem;margin-bottom:12px;
    transition:transform .6s ease;
  }
  .story-stage.on .story-stage-emoji{transform:scale(1.2) rotate(-8deg);}
  .story-stage p{font-size:1.05rem;line-height:1.6;max-width:520px;margin:0 auto;font-weight:600;}
  .story-controls{display:flex;justify-content:center;gap:16px;margin-top:18px;flex-wrap:wrap;align-items:center;}
  .story-master-switch{
    width:84px;height:84px;border-radius:16px;border:none;
    border-bottom:6px solid #0a8a6c;background:linear-gradient(180deg,#ffffff,#eafff8);
    color:var(--binary-color);font-family:'Fredoka',sans-serif;font-weight:700;font-size:2.2rem;
    cursor:pointer;transition:all .1s ease;box-shadow:0 3px 6px rgba(0,0,0,.12);
  }
  .story-master-switch:active{transform:translateY(4px);border-bottom-width:2px;}
  .story-master-switch.on{
    background:linear-gradient(180deg,var(--binary-color),#04a37f);color:white;
    border-bottom-color:#037a5e;transform:translateY(3px);border-bottom-width:3px;
  }
  .play-story-btn{
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;color:white;
    background:#8a6d1a;border:none;border-radius:14px;padding:16px 24px;cursor:pointer;
    box-shadow:0 4px 0 #6b5414;
  }
  .play-story-btn:active{transform:translateY(3px);box-shadow:none;}

  /* ---------- INVENT-A-LANGUAGE PLAYGROUND ---------- */
  .word-mapping-grid{
    display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:center;
    max-width:480px;margin:16px auto;
  }
  .word-mapping-grid label{font-size:.9rem;font-weight:700;color:var(--purple-mid);}
  .word-mapping-grid input{
    padding:8px 12px;border-radius:10px;border:2px solid #EEE6FB;font-family:'Nunito',sans-serif;
    font-size:.95rem;width:140px;
  }
  @media (max-width:420px){
    .word-mapping-grid{grid-template-columns:1fr;gap:4px;}
    .word-mapping-grid input{width:100%;margin-bottom:8px;}
  }
  .robot-stage{
    position:relative;height:160px;border-radius:16px;
    background:linear-gradient(180deg,#F3EFFF,#E8E0FF);
    display:flex;align-items:flex-end;justify-content:center;overflow:hidden;margin:16px 0;
  }
  .robot-avatar{
    font-size:4rem;transition:transform .5s ease;position:relative;margin-bottom:14px;
  }
  .robot-speech{
    position:absolute;top:14px;left:50%;transform:translateX(-50%);
    background:white;border-radius:12px;padding:6px 14px;font-family:'Fredoka',sans-serif;
    font-weight:700;color:var(--purple-deep);opacity:0;transition:opacity .3s ease;
    box-shadow:0 2px 6px rgba(0,0,0,.1);white-space:nowrap;
  }
  .robot-speech.show{opacity:1;}
  #commandConsole{
    width:100%;min-height:70px;font-family:'Courier New',monospace;font-size:.95rem;
    border-radius:10px;border:2px solid #EEE6FB;padding:10px;resize:vertical;
  }
  #commandLog{
    font-family:'Courier New',monospace;font-size:.85rem;background:#F8F4FF;border-radius:10px;
    padding:10px;margin-top:10px;min-height:24px;line-height:1.6;
  }

  /* ---------- TOP NAV (multi-page) ---------- */
  nav.kodi-nav{
    display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
    background:white;padding:10px 16px;box-shadow:0 2px 8px rgba(30,15,74,.08);
  }
  nav.kodi-nav a{
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:.9rem;
    color:var(--purple-mid);text-decoration:none;padding:8px 16px;border-radius:999px;
    transition:background .15s ease;
  }
  nav.kodi-nav a:hover{background:#F3EFFF;}
  nav.kodi-nav a.active{background:var(--purple-deep);color:white;}

  /* ---------- FLOATING ASK KODI WIDGET ---------- */
  #kodiFloatBubble{
    position:fixed;bottom:22px;right:22px;width:60px;height:60px;border-radius:50%;
    background:var(--peach);color:white;font-size:1.7rem;border:none;cursor:pointer;
    box-shadow:0 6px 18px rgba(249,115,22,.4),0 2px 6px rgba(0,0,0,.15);z-index:998;
    display:flex;align-items:center;justify-content:center;
    transition:transform .2s ease,box-shadow .2s ease;
    animation:kodiBubbleIntro .5s ease;
  }
  #kodiFloatBubble:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(249,115,22,.45),0 4px 10px rgba(0,0,0,.18);}
  #kodiFloatBubble:active{transform:scale(0.92);}
  @keyframes kodiBubbleIntro{
    0%{transform:scale(0);opacity:0;}
    70%{transform:scale(1.1);opacity:1;}
    100%{transform:scale(1);}
  }
  #kodiFloatPanel{
    position:fixed;bottom:92px;right:22px;width:340px;max-width:calc(100vw - 32px);
    height:440px;max-height:min(70vh,520px);
    background:white;border-radius:20px;box-shadow:0 16px 40px rgba(30,15,74,.22);
    display:flex;flex-direction:column;overflow:hidden;z-index:998;
    opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
  }
  #kodiFloatPanel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  #kodiFloatHeader{
    background:linear-gradient(135deg,var(--purple-deep),var(--purple-mid));color:white;
    padding:14px 16px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;
    display:flex;justify-content:space-between;align-items:center;flex-shrink:0;
  }
  #kodiFloatClose, #kodiFloatMute{
    background:rgba(255,255,255,.15);border:none;color:white;font-size:1rem;cursor:pointer;
    width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    transition:background .15s ease;
  }
  #kodiFloatClose:hover, #kodiFloatMute:hover{background:rgba(255,255,255,.28);}
  #kodiFloatLog{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#FCFAFF;}
  #kodiFloatForm{display:flex;gap:8px;padding:12px;border-top:1px solid #EEE6FB;background:white;flex-shrink:0;}
  #kodiFloatInput{
    flex:1;border-radius:999px;border:2px solid #EEE6FB;padding:9px 15px;font-size:.88rem;
    font-family:'Nunito',sans-serif;transition:border-color .15s ease;
  }
  #kodiFloatInput:focus{outline:none;border-color:var(--peach);}
  #kodiFloatSend{
    background:var(--peach);color:white;border:none;border-radius:999px;
    width:38px;height:38px;font-size:1rem;cursor:pointer;flex-shrink:0;
    transition:transform .12s ease;
  }
  #kodiFloatSend:active{transform:scale(.9);}

  @media (max-width:480px){
    #kodiFloatBubble{bottom:16px;right:16px;width:54px;height:54px;font-size:1.5rem;}
    #kodiFloatPanel{
      right:16px;bottom:80px;width:calc(100vw - 32px);height:min(66vh,480px);
    }
  }

  /* ---------- HOME PAGE ---------- */
  .home-hero{max-width:900px;margin:0 auto;padding:20px 24px 40px;text-align:center;}
  .home-hero p.tagline{font-size:1.05rem;color:var(--purple-mid);margin-bottom:28px;}
  .home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
  .home-card{
    background:white;border-radius:var(--radius);padding:26px 20px;text-decoration:none;
    box-shadow:0 6px 18px rgba(30,15,74,.08);border:2px solid rgba(30,15,74,.06);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;color:var(--ink);
    display:block;
  }
  .home-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 28px rgba(30,15,74,.14);
    border-color:rgba(249,115,22,.35);
  }
  .home-card:active{transform:translateY(-2px);}
  .home-card .emoji{font-size:2.6rem;display:block;margin-bottom:10px;}
  .home-card h3{margin:0 0 6px;font-family:'Fredoka',sans-serif;color:var(--purple-deep);}
  .home-card p{margin:0;font-size:.88rem;color:var(--purple-mid);line-height:1.4;}

  @media (max-width:600px){
    .home-hero{padding:14px 16px 30px;}
    header{padding:18px 20px;gap:12px;}
    header h1{font-size:1.25rem;}
    .mascot{width:52px;height:52px;font-size:2.1rem;}
    nav.kodi-nav{padding:8px 10px;gap:6px;}
    nav.kodi-nav a{padding:7px 12px;font-size:.82rem;}
  }

  .single-col-main{max-width:720px;margin:0 auto;padding:0 24px 32px;}

  /* ---------- PARENT PITCH SECTION ---------- */
  .parent-pitch{
    max-width:760px;margin:0 auto 32px;padding:32px 30px;
    background:linear-gradient(160deg,#1E0F4A,#3D2470);color:white;
    border-radius:22px;box-shadow:0 16px 40px rgba(30,15,74,.28);
  }
  .parent-pitch .eyebrow{
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--js-color);margin-bottom:10px;
  }
  .parent-pitch h2{
    font-size:1.5rem;line-height:1.35;margin:0 0 16px;color:white;
  }
  .parent-pitch p{font-size:1rem;line-height:1.65;color:rgba(255,255,255,.9);margin:0 0 14px;}
  .parent-pitch .pitch-solve{
    background:rgba(255,255,255,.08);border-radius:14px;padding:16px 18px;
    border:1px solid rgba(255,255,255,.15);
  }
  .parent-pitch .pitch-solve b{color:var(--js-color);}
  .pay-cta-btn{
    display:block;width:100%;margin-top:18px;font-family:'Fredoka',sans-serif;font-weight:700;
    font-size:1.05rem;background:var(--peach);color:white;border:none;border-radius:14px;
    padding:16px;cursor:pointer;box-shadow:0 4px 0 #c2570d;transition:transform .12s ease;
  }
  .pay-cta-btn:active{transform:translateY(3px);box-shadow:none;}
  .parent-pitch .pitch-reassure{
    text-align:center;font-size:.82rem;color:rgba(255,255,255,.65);margin:10px 0 0;
  }

  /* ---------- STUDENT DASHBOARD ---------- */
  .dashboard-stats-row{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0;}
  .dash-stat{
    flex:1;min-width:110px;background:#F8F6FF;border-radius:14px;padding:14px 10px;
    text-align:center;border:2px solid #EEE6FB;
  }
  .dash-stat.streak-stat{background:linear-gradient(160deg,#FFF3E0,#FFE4C4);border-color:#FFD199;}
  .dash-stat-emoji{font-size:1.6rem;margin-bottom:2px;}
  .dash-stat-num{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.5rem;color:var(--purple-deep);}
  .dash-stat-label{font-size:.72rem;color:var(--purple-mid);font-weight:700;}

  .progress-bar-wrap{margin:18px 0 6px;}
  .progress-bar-label{
    display:flex;justify-content:space-between;font-size:.82rem;font-weight:700;
    color:var(--purple-mid);margin-bottom:6px;
  }
  .progress-bar-track{background:#EEE6FB;border-radius:999px;height:16px;overflow:hidden;}
  .progress-bar-fill{
    height:100%;background:linear-gradient(90deg,var(--peach),var(--js-color));
    border-radius:999px;transition:width .6s ease;
  }

  .badges-label{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--purple-mid);font-size:.9rem;margin:20px 0 10px;}
  .badges-grid{display:flex;gap:10px;flex-wrap:wrap;}
  .badge-item{
    width:78px;text-align:center;opacity:.3;filter:grayscale(1);transition:opacity .3s ease,filter .3s ease;
  }
  .badge-item.earned{opacity:1;filter:grayscale(0);}
  .badge-item .badge-icon{
    width:52px;height:52px;border-radius:50%;background:#F3EFFF;display:flex;align-items:center;
    justify-content:center;font-size:1.6rem;margin:0 auto 4px;border:2px solid #E0D6F5;
  }
  .badge-item.earned .badge-icon{background:linear-gradient(160deg,#FFE9B8,#FFD166);border-color:#F0B429;}
  .badge-item .badge-name{font-size:.65rem;color:var(--purple-mid);font-weight:700;line-height:1.2;}

  /* ---------- BOBO DRESS-UP & MOVEMENT PLAYGROUND ---------- */
  .bobo-stage-wrap{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;justify-content:center;margin:16px 0;}
  .bobo-stage{
    width:220px;height:280px;background:linear-gradient(180deg,#F0F4FF,#E4EBFF);border-radius:18px;
    display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;position:relative;flex-shrink:0;
  }
  .bobo-char{position:relative;width:120px;height:220px;}
  .bobo-head-el{width:70px;height:70px;background:#FFD199;border-radius:50%;margin:0 auto;position:relative;transition:transform .3s ease;}
  .bobo-eye-el{width:8px;height:8px;background:#333;border-radius:50%;position:absolute;top:25px;}
  .bobo-eye-el.left{left:18px;} .bobo-eye-el.right{right:18px;}
  .bobo-smile-el{width:26px;height:13px;border:3px solid #333;border-top:none;border-radius:0 0 20px 20px;position:absolute;top:38px;left:22px;}
  .bobo-torso-el{width:60px;height:80px;background:hotpink;margin:0 auto;border-radius:10px;transition:background .3s ease;}
  .bobo-arm-el{width:15px;height:60px;background:hotpink;position:absolute;top:75px;border-radius:8px;transition:background .3s ease,transform .3s ease;transform-origin:top center;}
  .bobo-arm-el.left{left:5px;} .bobo-arm-el.right{right:5px;}
  .bobo-leg-el{width:18px;height:60px;background:#3D2470;position:absolute;top:150px;border-radius:8px;transition:background .3s ease,transform .3s ease;}
  .bobo-leg-el.left{left:28px;} .bobo-leg-el.right{right:28px;}

  @keyframes boboWave{0%,100%{transform:rotate(0deg);}50%{transform:rotate(-40deg);}}
  @keyframes boboJump{0%,100%{transform:translateY(0);}50%{transform:translateY(-30px);}}
  @keyframes boboSpin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
  .bobo-char.waving .bobo-arm-el.right{animation:boboWave .5s ease 3;}
  .bobo-char.jumping{animation:boboJump .5s ease 2;}
  .bobo-char.spinning{animation:boboSpin .8s linear 1;}

  .bobo-controls{flex:1;min-width:220px;}
  .bobo-control-group{
    margin-bottom:14px;background:linear-gradient(135deg,#F8F6FF,#EEE6FB);
    border-radius:16px;padding:14px 16px;border:1px solid #E0D6F5;
  }
  .bobo-control-label{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--purple-mid);font-size:.85rem;margin-bottom:10px;}
  .bobo-swatch-row{display:flex;gap:10px;flex-wrap:wrap;}
  .bobo-swatch{
    width:36px;height:36px;border-radius:50%;border:3px solid white;box-shadow:0 2px 6px rgba(0,0,0,.15);
    cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;
  }
  .bobo-swatch:hover{transform:scale(1.15);}
  .bobo-swatch.selected{box-shadow:0 0 0 3px var(--purple-deep),0 2px 6px rgba(0,0,0,.15);transform:scale(1.1);}
  .bobo-move-btn{
    font-family:'Fredoka',sans-serif;font-weight:700;padding:10px 18px;border-radius:12px;border:none;
    background:linear-gradient(135deg,#7C3AED,#5B21B6);color:white;cursor:pointer;font-size:.85rem;
    box-shadow:0 4px 0 #4c1d95;transition:transform .15s ease,box-shadow .15s ease;flex:1;min-width:90px;
  }
  .bobo-move-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #4c1d95;}
  .bobo-move-btn:active{transform:translateY(3px);box-shadow:none;}
  .bobo-code-label{font-size:.85rem;font-weight:700;color:var(--purple-mid);margin-top:14px;margin-bottom:6px;}
  .bobo-code-display{
    background:linear-gradient(160deg,#1E0F4A,#3D2470);color:#A8E6C3;font-family:'Courier New',monospace;font-size:.82rem;
    padding:14px;border-radius:12px;overflow-x:auto;white-space:pre-wrap;box-shadow:0 4px 14px rgba(30,15,74,.2);
  }
  .bobo-content{position:relative;}
  #boboPlaygroundCard.locked .bobo-content{filter:blur(7px);pointer-events:none;user-select:none;}
  .bobo-lock-overlay{
    display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;z-index:5;
  }
  #boboPlaygroundCard.locked .bobo-lock-overlay{display:flex;}
  .bobo-lock-overlay .lock-emoji{font-size:2.5rem;}

  /* ---------- WHOLE-PAGE PREMIUM LOCK ---------- */
  #pageLockOverlay{
    display:none;position:fixed;inset:0;z-index:900;align-items:center;justify-content:center;
    background:rgba(30,15,74,.4);
  }
  .page-lock-box{
    background:white;border-radius:22px;padding:34px 30px;max-width:380px;text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.3);
  }
  .page-lock-box .lock-emoji-big{font-size:3rem;margin-bottom:12px;}
  .page-lock-box h3{font-family:'Fredoka',sans-serif;color:var(--purple-deep);margin:0 0 10px;}
  .page-lock-box p{color:var(--purple-mid);font-size:.95rem;margin-bottom:18px;line-height:1.5;}

  /* ---------- TAG-BY-TAG DEMO (HTML lesson) ---------- */
  .tag-demo{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;
    background:#F8F6FF;border-radius:14px;padding:14px 16px;margin-bottom:12px;
  }
  @media (max-width:600px){ .tag-demo{grid-template-columns:1fr;} }
  .tag-demo-code{
    font-family:'Courier New',monospace;font-size:.85rem;color:var(--html-color);
    background:#2A2140;padding:8px 12px;border-radius:8px;grid-column:1/-1;
  }
  .tag-demo-desc{font-size:.85rem;color:var(--purple-mid);}
  .tag-demo-preview{background:white;border-radius:10px;padding:10px;text-align:center;border:2px solid #EEE6FB;}

  /* ---------- HEAD vs BODY ILLUSTRATION ---------- */
  .head-body-illustration{display:flex;gap:14px;align-items:stretch;margin:18px 0;flex-wrap:wrap;justify-content:center;}
  .hb-panel{
    flex:1;min-width:180px;border-radius:18px;padding:20px 18px;text-align:center;
  }
  .hb-panel.hb-head{background:linear-gradient(160deg,#EEEDFE,#DCD0FF);border:2px solid #C9AEFF;}
  .hb-panel.hb-body{background:linear-gradient(160deg,#FFF0E0,#FFDAB0);border:2px solid #FFC280;}
  .hb-icon{font-size:2.6rem;margin-bottom:6px;}
  .hb-panel h4{font-family:'Courier New',monospace;font-size:1.1rem;margin:4px 0;color:var(--purple-deep);}
  .hb-panel p{font-family:'Fredoka',sans-serif;font-weight:700;margin:2px 0 10px;color:var(--purple-mid);}
  .hb-list{list-style:none;padding:0;margin:0;text-align:left;font-size:.82rem;color:var(--purple-mid);}
  .hb-list li{padding:4px 0;}
  .hb-connector{display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--purple-mid);}
  @media (max-width:500px){ .hb-connector{display:none;} }

  /* ---------- INTERACTIVE "HTML IS LIKE YOU" DIAGRAM ---------- */
  .hly-wrap{
    background:linear-gradient(180deg,#8ED8FF 0%,#CDEBFF 45%,#B8E986 45%,#A5D96F 100%);
    border-radius:20px;padding:22px 20px;margin:18px 0;
    box-shadow:inset 0 2px 20px rgba(255,255,255,.6);
  }
  .hly-title{
    font-family:'Fredoka',sans-serif;font-weight:800;font-size:1.6rem;text-align:center;
    color:var(--purple-deep);margin-bottom:4px;
    text-shadow:2px 2px 0 white, 4px 4px 0 rgba(124,58,237,.2);
  }
  .hly-sub{
    text-align:center;font-size:.88rem;color:var(--purple-deep);margin-bottom:16px;
    background:rgba(255,255,255,.75);border-radius:999px;padding:6px 14px;display:inline-block;
    position:relative;left:50%;transform:translateX(-50%);font-weight:700;
  }
  .hly-stage{display:flex;gap:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap;}

  /* The kid figure */
  .hly-kid{
    flex-shrink:0;width:180px;display:flex;flex-direction:column;align-items:center;gap:6px;
  }
  .hly-part{
    cursor:pointer;border:3px dashed transparent;border-radius:14px;padding:6px 8px;
    transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
    position:relative;text-align:center;background:rgba(255,255,255,.35);
  }
  .hly-part:hover{border-color:var(--peach);transform:translateY(-3px) scale(1.06);box-shadow:0 6px 16px rgba(0,0,0,.18);}
  .hly-part.active{
    border-color:var(--peach);background:rgba(255,255,255,.9);
    box-shadow:0 8px 20px rgba(249,115,22,.35);transform:scale(1.05);
  }
  .hly-part-label{
    font-family:'Courier New',monospace;font-size:.72rem;font-weight:700;color:white;
    background:var(--purple-deep);border-radius:6px;padding:2px 8px;display:inline-block;margin-top:4px;
    box-shadow:0 2px 0 rgba(0,0,0,.25);
  }
  .hly-head-shape{
    width:84px;height:84px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #FFE3BC, #FFC078);
    position:relative;margin:0 auto;box-shadow:0 6px 14px rgba(0,0,0,.2), inset -4px -4px 10px rgba(0,0,0,.08);
  }
  .hly-brain{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:2rem;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));}
  .hly-face{position:absolute;top:36px;left:0;right:0;text-align:center;font-size:1.4rem;}
  .hly-torso{
    width:84px;height:74px;border-radius:12px;
    background:linear-gradient(160deg,#FFE066,#FFC93C);
    margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px;
    box-shadow:0 6px 14px rgba(0,0,0,.2), inset 0 -3px 8px rgba(0,0,0,.1);
  }
  .hly-mini{
    background:rgba(255,255,255,.85);border-radius:5px;font-size:.85rem;
    display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -2px 4px rgba(0,0,0,.08);
  }
  .hly-legs{display:flex;gap:10px;justify-content:center;}
  .hly-leg{
    width:24px;height:50px;border-radius:8px;
    background:linear-gradient(160deg,#5BA3E8,#3A7BC8);
    box-shadow:0 5px 12px rgba(0,0,0,.22), inset -2px 0 6px rgba(0,0,0,.12);
  }

  /* The browser */
  .hly-browser{
    flex:1;min-width:290px;background:white;border-radius:16px;overflow:hidden;
    box-shadow:0 14px 34px rgba(30,15,74,.3);border:4px solid #7C3AED;
    transform:perspective(900px) rotateY(-3deg);
  }
  .hly-browser-bar{
    background:linear-gradient(160deg,#8B5CF6,#6D28D9);padding:9px 12px;
    display:flex;align-items:center;gap:8px;transition:box-shadow .3s ease;
  }
  .hly-browser-bar.glow{box-shadow:inset 0 0 0 4px var(--js-color);}
  .hly-dots{display:flex;gap:5px;}
  .hly-dot{width:10px;height:10px;border-radius:50%;box-shadow:inset -1px -1px 2px rgba(0,0,0,.3);}
  .hly-urlbar{
    flex:1;background:white;border-radius:999px;height:22px;display:flex;align-items:center;
    justify-content:center;font-size:.68rem;color:var(--purple-mid);
    box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
  }
  .hly-nav{
    background:linear-gradient(180deg,#FFF8E0,#FFEFC2);padding:9px 12px;display:flex;gap:10px;
    align-items:center;flex-wrap:wrap;font-size:.74rem;font-weight:700;color:var(--purple-deep);
    transition:box-shadow .3s ease;border-bottom:2px solid rgba(0,0,0,.06);
  }
  .hly-nav.glow{box-shadow:inset 0 0 0 4px var(--peach);}
  .hly-logo{font-family:'Fredoka',sans-serif;color:#EF476F;font-weight:800;text-shadow:1px 1px 0 rgba(255,255,255,.8);}
  .hly-content{
    padding:11px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;
    transition:box-shadow .3s ease;background:#FDFCFF;
  }
  .hly-content.glow{box-shadow:inset 0 0 0 4px #06D6A0;}
  .hly-tile{
    background:linear-gradient(160deg,#F8F4FF,#EDE4FF);border-radius:10px;padding:14px 6px;
    text-align:center;font-size:1.7rem;box-shadow:0 3px 8px rgba(30,15,74,.1);
  }
  .hly-input-row{
    padding:9px 10px;background:linear-gradient(180deg,#FFEDF5,#FFDCEC);
    display:flex;gap:7px;align-items:center;transition:box-shadow .3s ease;
  }
  .hly-input-row.glow{box-shadow:inset 0 0 0 4px #EF476F;}
  .hly-input-fake{flex:1;background:white;border-radius:6px;height:22px;box-shadow:inset 0 2px 4px rgba(0,0,0,.1);}
  .hly-send{
    background:linear-gradient(160deg,#8B5CF6,#6D28D9);color:white;border-radius:7px;
    padding:4px 12px;font-size:.7rem;font-weight:700;box-shadow:0 3px 0 #5b21b6;
  }
  .hly-footer{
    background:linear-gradient(160deg,#8B5CF6,#6D28D9);color:white;text-align:center;
    padding:8px;font-size:.7rem;transition:box-shadow .3s ease;
  }
  .hly-footer.glow{box-shadow:inset 0 0 0 4px var(--js-color);}

  .hly-explain{
    background:white;border-radius:16px;padding:16px 18px;margin-top:16px;min-height:70px;
    border:3px solid var(--peach);box-shadow:0 8px 20px rgba(30,15,74,.15);
  }
  .hly-explain h4{font-family:'Fredoka',sans-serif;margin:0 0 6px;color:var(--purple-deep);font-size:1.05rem;}
  .hly-explain p{margin:0;font-size:.9rem;color:var(--purple-mid);line-height:1.5;}
  .hly-explain .hly-ascii-line{
    margin-top:10px;font-family:'Courier New',monospace;font-size:.82rem;
    background:linear-gradient(160deg,#1E0F4A,#3D2470);color:#A8E6C3;padding:10px 12px;
    border-radius:10px;box-shadow:inset 0 2px 8px rgba(0,0,0,.3);
  }

  @media (max-width:640px){
    .hly-browser{transform:none;min-width:0;width:100%;}
    .hly-title{font-size:1.25rem;}
    .hly-stage{gap:12px;}
  }

  /* ---------- DRAG & DROP TAG BUILDER ---------- */
  .tb-wrap{margin:18px 0;}
  .tb-library{
    background:linear-gradient(160deg,#FFF6E0,#FFEFC2);border-radius:16px;padding:16px;
    border:3px solid #F0D48A;margin-bottom:14px;
  }
  .tb-library-title{
    font-family:'Fredoka',sans-serif;font-weight:700;color:#8a6d1a;margin-bottom:10px;font-size:1rem;
  }
  .tb-blocks{display:flex;gap:10px;flex-wrap:wrap;}
  .tb-block{
    background:white;border-radius:12px;padding:10px 14px;cursor:grab;
    border:3px solid #E0D6F5;box-shadow:0 4px 10px rgba(30,15,74,.12);
    font-family:'Courier New',monospace;font-weight:700;font-size:.82rem;color:var(--purple-deep);
    text-align:center;transition:transform .15s ease,box-shadow .15s ease;user-select:none;
  }
  .tb-block:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(30,15,74,.2);}
  .tb-block:active{cursor:grabbing;}
  .tb-block .tb-emoji{font-size:1.5rem;display:block;margin-bottom:2px;}

  .tb-editor-row{display:flex;gap:14px;flex-wrap:wrap;}
  .tb-editor-col{flex:1;min-width:260px;}
  .tb-col-label{
    font-family:'Fredoka',sans-serif;font-weight:700;color:var(--purple-mid);
    font-size:.88rem;margin-bottom:6px;
  }
  .tb-dropzone{
    background:linear-gradient(160deg,#2A2140,#1E0F4A);border-radius:12px;padding:14px;
    min-height:160px;font-family:'Courier New',monospace;font-size:.8rem;color:#A8E6C3;
    border:3px dashed #5B4A8A;transition:border-color .2s ease,background .2s ease;
  }
  .tb-dropzone.dragover{border-color:var(--peach);background:linear-gradient(160deg,#3D2470,#2A1850);}
  .tb-dropzone .tb-placeholder{color:#8B7BB8;font-style:italic;}
  .tb-code-line{
    padding:3px 6px;border-radius:5px;margin-bottom:3px;
    display:flex;justify-content:space-between;align-items:center;gap:8px;
  }
  .tb-code-line:hover{background:rgba(255,255,255,.08);}
  .tb-remove{
    background:rgba(239,71,111,.25);color:#FF9FB5;border:none;border-radius:4px;
    cursor:pointer;font-size:.7rem;padding:1px 6px;flex-shrink:0;
  }
  .tb-preview{
    background:white;border-radius:12px;padding:14px;min-height:160px;
    border:3px solid #7C3AED;box-shadow:0 6px 16px rgba(30,15,74,.15);
  }
  .tb-preview .tb-placeholder{color:var(--purple-mid);font-style:italic;font-size:.85rem;}
  .tb-controls{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;justify-content:center;}
  .tb-input-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
  .tb-input-row input{
    flex:1;min-width:180px;padding:9px 14px;border-radius:10px;border:2px solid #EEE6FB;
    font-family:'Nunito',sans-serif;font-size:.9rem;
  }

  /* ---------- PIGGY BANK / STORAGE DIAGRAM ---------- */
  .pb-diagram{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:16px 0;}
  .pb-item{
    flex:1;min-width:140px;background:linear-gradient(160deg,#FFF0F5,#FFE0EC);
    border-radius:16px;padding:18px 14px;text-align:center;border:3px solid #FFB8D2;
  }
  .pb-item.pb-cloud{background:linear-gradient(160deg,#E8F4FF,#CDEBFF);border-color:#8ED8FF;}
  .pb-emoji{font-size:2.6rem;margin-bottom:6px;}
  .pb-item h4{font-family:'Fredoka',sans-serif;margin:2px 0 6px;color:var(--purple-deep);font-size:1rem;}
  .pb-item p{font-size:.8rem;color:var(--purple-mid);margin:0;line-height:1.4;}

  @media (max-width:600px){
    .bobo-stage-wrap{gap:16px;}
    .bobo-stage{width:100%;max-width:220px;}
    .bobo-controls{width:100%;min-width:0;}
    .bobo-swatch-row .bobo-move-btn{min-width:80px;font-size:.78rem;padding:9px 12px;}
  }

  /* ---------- DAILY ENCOURAGEMENT POPUP ---------- */
  .encouragement-overlay{
    position:fixed;inset:0;background:rgba(30,15,74,.5);z-index:1000;
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .encouragement-overlay.show{opacity:1;pointer-events:auto;}
  .encouragement-box{
    background:linear-gradient(160deg,#FFF9EC,#FFF0D0);border-radius:22px;
    max-width:420px;width:100%;padding:30px 26px;text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.3);
    transform:scale(.85) translateY(20px);transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .encouragement-overlay.show .encouragement-box{transform:scale(1) translateY(0);}
  .encouragement-smiley{font-size:3.2rem;display:block;margin-bottom:10px;animation:encourageWiggle 1.8s ease infinite;}
  @keyframes encourageWiggle{
    0%,100%{transform:rotate(0deg);} 25%{transform:rotate(-8deg);} 75%{transform:rotate(8deg);}
  }
  .encouragement-text{font-size:1.05rem;line-height:1.6;color:var(--purple-deep);font-weight:600;margin-bottom:16px;}
  .encouragement-signature{font-family:'Fredoka',sans-serif;font-size:.85rem;color:#B8860B;font-weight:700;margin-bottom:4px;}
  .encouragement-copyright{font-size:.68rem;color:rgba(30,15,74,.45);margin-bottom:18px;}
  .encouragement-close-btn{
    font-family:'Fredoka',sans-serif;font-weight:700;background:var(--peach);color:white;
    border:none;border-radius:14px;padding:12px 28px;cursor:pointer;box-shadow:0 4px 0 #c2570d;
  }
  .encouragement-close-btn:active{transform:translateY(3px);box-shadow:none;}

  /* ---------- ACCOUNT MODAL (REGISTER / LOGIN) ---------- */
  .account-tabs{display:flex;gap:8px;margin-bottom:16px;}
  .account-tab-btn{
    flex:1;font-family:'Fredoka',sans-serif;font-weight:700;padding:10px;border-radius:12px;
    border:2px solid #EEE6FB;background:white;color:var(--purple-mid);cursor:pointer;font-size:.9rem;
  }
  .account-tab-btn.active{background:var(--purple-deep);color:white;border-color:var(--purple-deep);}
  .account-form{display:none;flex-direction:column;gap:10px;}
  .account-form.active{display:flex;}
  .account-form input{
    padding:10px 14px;border-radius:10px;border:2px solid #EEE6FB;font-family:'Nunito',sans-serif;font-size:.95rem;
  }
  .account-submit-btn{
    font-family:'Fredoka',sans-serif;font-weight:700;background:var(--purple-deep);color:white;
    border:none;border-radius:12px;padding:12px;cursor:pointer;box-shadow:0 4px 0 var(--purple-mid);margin-top:4px;
  }
  .account-submit-btn:active{transform:translateY(3px);box-shadow:none;}
  .account-error{color:#D14343;font-size:.85rem;min-height:18px;text-align:center;}
  .account-success{color:#0F6E56;font-size:.85rem;min-height:18px;text-align:center;font-weight:700;}

  @media (max-width:600px){
    .parent-pitch{padding:24px 20px;border-radius:18px;}
    .parent-pitch h2{font-size:1.25rem;}
  }

  /* ================= "START HERE" FREE-LESSON QUEST CARD =================
     Deliberately styled like a game level-unlock card rather than a web
     advert — children ignore banners, but they do not ignore a glowing
     quest with a play button. Sits above the lesson lock (900) but below
     the paywall (999) and the daily encouragement (1000), so it can never
     block either of those. */
  #kodiStartHere{
    position:fixed;left:16px;bottom:16px;z-index:995;width:min(330px,calc(100vw - 32px));
    opacity:0;transform:translateY(140%) scale(.9);pointer-events:none;
    transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  #kodiStartHere.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  #kodiStartHere.wiggle .ksh-card{animation:kshWiggle .7s ease;}

  .ksh-card{
    position:relative;border-radius:24px;padding:4px;
    background:linear-gradient(120deg,#F97316,#FFC93C,#06D6A0,#4CC9F0,#B06BFF,#F97316);
    background-size:300% 300%;animation:kshGlow 6s linear infinite;
    box-shadow:0 14px 34px rgba(30,15,74,.4);
  }
  .ksh-inner{
    background:linear-gradient(165deg,#241058,#3D2470);border-radius:21px;
    padding:16px 16px 14px;color:#fff;text-align:center;
  }
  .ksh-flag{
    position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    background:#F97316;color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;
    font-size:.72rem;letter-spacing:1.2px;padding:5px 15px;border-radius:999px;
    box-shadow:0 4px 12px rgba(249,115,22,.55);white-space:nowrap;
    animation:kshBob 2.2s ease-in-out infinite;
  }
  .ksh-close{
    position:absolute;top:8px;right:10px;background:rgba(255,255,255,.16);border:none;
    color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:.85rem;
    line-height:1;display:flex;align-items:center;justify-content:center;
  }
  .ksh-close:hover{background:rgba(255,255,255,.32);}
  .ksh-bot{font-size:2.5rem;line-height:1;display:block;margin:6px 0 2px;
    animation:kshFloat 3s ease-in-out infinite;}
  .ksh-title{
    font-family:'Fredoka',sans-serif;font-size:1.12rem;font-weight:700;
    margin:2px 0 4px;line-height:1.25;
  }
  .ksh-title b{color:#FFC93C;}
  .ksh-sub{font-size:.83rem;color:#D9CEFF;line-height:1.45;margin-bottom:11px;}
  .ksh-free{
    display:inline-block;background:#06D6A0;color:#04331F;font-family:'Fredoka',sans-serif;
    font-weight:700;font-size:.68rem;letter-spacing:.8px;padding:4px 12px;border-radius:999px;
    margin-bottom:9px;
  }
  .ksh-go{
    display:block;text-decoration:none;font-family:'Fredoka',sans-serif;font-weight:700;
    background:linear-gradient(135deg,#F97316,#EA580C);color:#fff;font-size:1rem;
    padding:12px;border-radius:15px;box-shadow:0 5px 0 #B8420C;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .ksh-go:hover{transform:translateY(-2px);box-shadow:0 7px 0 #B8420C;}
  .ksh-go:active{transform:translateY(5px);box-shadow:none;}
  .ksh-later{
    background:none;border:none;color:#B9A9E8;font-size:.74rem;margin-top:9px;
    cursor:pointer;text-decoration:underline;font-family:'Nunito',sans-serif;
  }
  .ksh-spark{position:absolute;font-size:.95rem;pointer-events:none;
    animation:kshSpark 2.6s ease-in-out infinite;}

  @keyframes kshGlow{0%{background-position:0% 50%;}100%{background-position:300% 50%;}}
  @keyframes kshBob{0%,100%{transform:translateX(-50%) translateY(0);}
                    50%{transform:translateX(-50%) translateY(-4px);}}
  @keyframes kshFloat{0%,100%{transform:translateY(0) rotate(-3deg);}
                      50%{transform:translateY(-7px) rotate(3deg);}}
  @keyframes kshWiggle{0%,100%{transform:rotate(0);}20%{transform:rotate(-3.5deg);}
                       40%{transform:rotate(3.5deg);}60%{transform:rotate(-2deg);}
                       80%{transform:rotate(2deg);}}
  @keyframes kshSpark{0%,100%{opacity:0;transform:translateY(0) scale(.6);}
                      50%{opacity:1;transform:translateY(-13px) scale(1.15);}}

  @media (max-width:600px){
    #kodiStartHere{left:10px;right:10px;bottom:10px;width:auto;}
    .ksh-bot{font-size:2.1rem;}
    .ksh-title{font-size:1rem;}
  }
  /* A child who has asked for less motion still gets the card, just calm. */
  @media (prefers-reduced-motion: reduce){
    .ksh-card,.ksh-flag,.ksh-bot,.ksh-spark{animation:none !important;}
  }

  /* The permanent little tab left behind when the quest card is dismissed,
     so the free lesson is always one tap away and can never be "lost". */
  #kshTab{
    position:fixed;left:16px;bottom:16px;z-index:994;cursor:pointer;
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:.82rem;
    background:linear-gradient(135deg,#F97316,#EA580C);color:#fff;
    border:3px solid #fff;border-radius:999px;padding:10px 18px;
    box-shadow:0 6px 18px rgba(249,115,22,.5);
    animation:kshTabPulse 2.6s ease-in-out infinite;
  }
  #kshTab:hover{transform:translateY(-2px);}
  @keyframes kshTabPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
  @media (max-width:600px){#kshTab{left:10px;bottom:10px;font-size:.76rem;padding:9px 15px;}}
  @media (prefers-reduced-motion: reduce){#kshTab{animation:none;}}

  /* ============ KODI VOICE — Nigerian language picker ============ */
  #kodiLangBar{
    position:fixed;left:0;right:0;bottom:0;z-index:990;
    display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;
    background:linear-gradient(180deg,#241058,#1E0F4A);
    border-top:4px solid var(--orange);padding:8px 10px;
    box-shadow:0 -6px 20px rgba(30,15,74,.34);
  }
  #kodiLangBar .kv-lbl{
    color:#D9CEFF;font-family:'Fredoka',sans-serif;font-size:.78rem;font-weight:700;
    margin-right:2px;
  }
  #kodiLangBar button{
    font-family:'Fredoka',sans-serif;font-weight:700;cursor:pointer;
    border:2px solid rgba(255,255,255,.22);border-radius:999px;
    background:rgba(255,255,255,.09);color:#EDE7FF;
    padding:6px 13px;font-size:.78rem;transition:.14s;white-space:nowrap;
  }
  #kodiLangBar button:hover{background:rgba(255,255,255,.2);}
  #kodiLangBar .kv-lang.on{
    background:var(--orange);color:#fff;border-color:#fff;
    box-shadow:0 0 0 3px rgba(249,115,22,.28);
  }
  #kodiLangBar #kvMute{font-size:.95rem;padding:6px 11px;}
  /* keep the bar clear of the page bottom and the Ask Kodi bubble */
  body.has-langbar{padding-bottom:112px !important;}
  #kodiStartHere.show,#kshTab{bottom:78px;}
  @media (max-width:700px){
    #kodiLangBar{gap:5px;padding:7px 6px;}
    #kodiLangBar button{padding:5px 10px;font-size:.71rem;}
    #kodiLangBar .kv-lbl{width:100%;text-align:center;margin-bottom:1px;}
    body.has-langbar{padding-bottom:132px !important;}
    #kodiStartHere.show,#kshTab{bottom:104px;}
  }