button, [role="button"], select, summary, input:not([type="checkbox"], [type="radio"]) { min-height: 2.25rem; }
      * { box-sizing: border-box; }
      /* Tema GELAP permanen — dipaksa dark (bukan ngikutin sistem),
         biar nyaman di mata pas belajar di ruangan gelap.
         Palet hangat gelap: cokelat arang, bukan hitam pekat,
         jadi teks tetap lembut dibaca lama-lama. */
      :root{
        color-scheme:dark;
        --bg:#14100D;
        --surface:#221C17;
        --surface2:#2C241C;
        --ink:#F7EDDC;
        --ink-soft:#CDBBA3;
        --line:#40342A;
        --coral:#FF7A4D;
        --coral-dark:#FF9A72;
        --coral-soft:#3D2417;
        --teal:#3FC1C5;
        --teal-soft:#17393B;
        --sun:#FFB62E;
        --sun-soft:#3A2C10;
        --green:#4CC97F;
        --green-soft:#173325;
        --red:#FF8A8A;
        --red-soft:#3D1D1D;
        --code-bg:#0E0B08;
        --code-ink:#F7E9D2;
        --coral-solid:#C2451E;
        --teal-solid:#0A6E73;
        --green-solid:#1F7A3E;
        --shadow:0 10px 30px rgba(0,0,0,.5);
        --radius:20px;
      }
      html{ scroll-behavior:smooth; }
      body{
        margin:0;
        background:var(--bg);
        color:var(--ink);
        font-family:"Plus Jakarta Sans", system-ui, sans-serif;
        font-size:17px;
        line-height:1.65;
      }
      h1,h2,h3,.display{ font-family:"Plus Jakarta Sans","Plus Jakarta Sans",sans-serif; line-height:1.2; margin:0; }
      .wrap{ max-width:1240px; margin:0 auto; padding:0 20px; }
      code, pre, textarea.code{ font-family:"JetBrains Mono", ui-monospace, monospace; }

      /* ---------- HERO ---------- */
      .hero{ padding:52px 0 8px; }
      .hero h1{ font-size:clamp(2rem, 6vw, 3.4rem); font-weight:800; letter-spacing:-.01em; }
      .hero h1 .h1-sub{ display:block; font-size:.52em; font-weight:700; color:var(--ink-soft); letter-spacing:0; margin-top:10px; }
      .hero h1 .hl{ color:var(--coral); }
      .hero h1 .hl2{ color:var(--teal); }
      .hero p.lede{ font-size:clamp(1.05rem,2.6vw,1.3rem); color:var(--ink-soft); max-width:640px; margin:16px 0 0; }
      .hero p.lede strong{ color:var(--ink); }

      .analogy-row{
        display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:34px 0 8px;
      }
      .analogy-card{
        background:var(--surface); border:2px solid var(--line); border-radius:var(--radius);
        padding:20px; box-shadow:var(--shadow);
      }
      .analogy-card .ic{
        width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:12px;
      }
      .analogy-card .ic svg{ width:30px;height:30px; }
      .ic-coral{ background:var(--coral-soft); color:var(--coral); }
      .ic-teal{ background:var(--teal-soft); color:var(--teal); }
      .ic-sun{ background:var(--sun-soft); color:var(--sun); }
      .analogy-card h3{ font-size:1.25rem; margin-bottom:6px; }
      .analogy-card p{ margin:0; color:var(--ink-soft); font-size:.98rem; }
      .analogy-card p b{ color:var(--ink); }

      /* ---------- DEMO TOGGLE ---------- */
      .demo-box{
        margin:26px 0 10px; background:var(--surface); border:2px solid var(--line);
        border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
      }
      .demo-head{
        display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
        padding:16px 20px; border-bottom:2px dashed var(--line);
      }
      .demo-head h2{ font-size:1.3rem; }
      .toggle-btn{
        border:none; cursor:pointer; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:1rem;
        padding:10px 22px; border-radius:999px; background:var(--teal-solid); color:#fff; min-height:44px;
        transition:transform .12s ease, background .2s ease;
      }
      .toggle-btn:active{ transform:scale(.97); }
      .toggle-btn.off{ background:var(--ink-soft); }
      .demo-stage{ padding:26px 20px; background:var(--surface2); }
      /* The demo page itself — versi gelap juga, biar nggak silau:
         pas CSS mati tampilannya polos gelap, pas nyala jadi hangat & rapi */
      .mini-page{ background:#1A1511; color:#EDE3D3; padding:8px; }
      .mini-page a{ color:#6ED3E0; }
      .mini-page.pretty{
        background:linear-gradient(180deg,#38271A,#241B13);
        border:1px solid #4A3524; border-radius:16px; padding:28px; text-align:center;
        font-family:Georgia, serif; box-shadow:0 8px 24px rgba(0,0,0,.4);
      }
      .mini-page.pretty h4{ color:#FF8A5F; font-size:30px; margin:0 0 8px; font-family:"Plus Jakarta Sans",sans-serif; }
      .mini-page.pretty p{ color:#DCCBB2; font-size:16px; }
      .mini-page.pretty a{
        display:inline-block; background:#0E8388; color:#fff; padding:10px 22px;
        border-radius:999px; text-decoration:none; font-weight:bold; margin-top:8px;
      }
      .demo-caption{ padding:14px 20px 18px; color:var(--ink-soft); font-size:.98rem; }
      .demo-caption b{ color:var(--ink); }

      /* ---------- PROGRESS ---------- */
      .progress-wrap{ margin:34px 0 6px; }
      .progress-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
      .progress-top h2{ font-size:1.35rem; }
      .progress-top span{ font-weight:800; color:var(--coral); }
      .bar{ height:16px; background:var(--surface2); border:2px solid var(--line); border-radius:999px; overflow:hidden; margin-top:10px; }
      .bar > div{ height:100%; width:0%; background:var(--coral); border-radius:999px; transition:width .5s ease; }
      .celebrate{
        display:none; margin-top:14px; background:var(--green-soft); border:2px solid var(--green);
        color:var(--ink); border-radius:14px; padding:14px 18px; font-weight:700;
      }
      .celebrate.show{ display:block; }

      /* ---------- LESSON NAV ---------- */
      .lesson-nav{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 28px; }
      .nav-chip{
        display:flex; align-items:center; gap:9px; cursor:pointer; text-align:left;
        background:var(--surface); border:2px solid var(--line); border-radius:999px;
        padding:8px 16px 8px 9px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:.95rem;
        color:var(--ink); min-height:44px; transition:border-color .15s ease, background .15s ease;
      }
      .nav-chip .num{
        width:30px;height:30px; flex:0 0 30px; border-radius:50%; display:grid; place-items:center;
        background:var(--surface2); color:var(--ink-soft); font-family:"Plus Jakarta Sans",sans-serif; font-size:.95rem;
      }
      .nav-chip.css .num{ background:var(--teal-soft); color:var(--teal); }
      .nav-chip.active{ border-color:var(--coral); background:var(--coral-soft); }
      .nav-chip.active .num{ background:var(--coral-solid); color:#fff; }
      .nav-chip.css.active{ border-color:var(--teal); background:var(--teal-soft); }
      .nav-chip.css.active .num{ background:var(--teal-solid); color:#fff; }
      .nav-chip.done .num{ background:var(--green-solid); color:#fff; }
      .phase-label{ width:100%; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:1.05rem; margin-top:10px; }
      .phase-label:first-child{ margin-top:0; }
      .phase-label small{ color:var(--ink-soft); font-family:"Plus Jakarta Sans",sans-serif; font-weight:600; }

      /* ---------- LESSON CARD ---------- */
      .lesson-card{
        background:var(--surface); border:2px solid var(--line); border-radius:26px;
        box-shadow:var(--shadow); padding:clamp(20px,4vw,38px); margin-bottom:30px;
      }
      .lesson-kicker{
        display:inline-block; font-weight:800; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
        padding:5px 13px; border-radius:999px; margin-bottom:14px;
      }
      .k-html{ background:var(--coral-soft); color:var(--coral-dark); }
      .k-css{ background:var(--teal-soft); color:var(--teal); }
      .lesson-card h2{ font-size:clamp(1.6rem,4.5vw,2.2rem); margin-bottom:8px; }
      .lesson-sub{ color:var(--ink-soft); font-size:1.08rem; margin:0 0 22px; }

      /* Catatan rujukan di awal bab CSS: arahin ke bab "Cara Nempelin CSS" */
      .ref-note{
        display:flex; gap:12px; align-items:center; flex-wrap:wrap;
        background:var(--teal-soft); border:2px dashed var(--teal); border-radius:14px;
        padding:13px 16px; margin:-6px 0 22px; font-size:.97rem;
      }
      .ref-note p{ margin:0; flex:1 1 260px; }
      .ref-note code{
        background:var(--surface2); border:1.5px solid var(--line); border-radius:7px;
        padding:1px 7px; font-size:.88em; font-weight:600; white-space:nowrap;
      }
      .ref-note-btn{
        border:none; cursor:pointer; background:var(--teal-solid); color:#fff; border-radius:999px;
        padding:9px 18px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:.95rem; min-height:44px;
      }
      .ref-note-btn:active{ transform:scale(.97); }

      .analogy{
        display:flex; gap:14px; background:var(--sun-soft); border:2px dashed var(--sun);
        border-radius:16px; padding:16px 18px; margin-bottom:22px;
      }
      .analogy .a-ic{ flex:0 0 40px; width:40px; height:40px; border-radius:12px; background:var(--surface); display:grid; place-items:center; color:var(--sun); }
      .analogy .a-ic svg{ width:24px; height:24px; }
      .analogy p{ margin:0; }
      .analogy p b.t{ display:block; font-family:"Plus Jakarta Sans",sans-serif; font-size:1.05rem; margin-bottom:2px; }

      .points{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px; }
      .points li{ display:flex; gap:11px; align-items:flex-start; }
      .points li .dot{
        flex:0 0 26px; width:26px; height:26px; margin-top:2px; border-radius:9px;
        background:var(--coral-soft); color:var(--coral-dark); display:grid; place-items:center;
        font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:.85rem;
      }
      .lesson-card.css-lesson .points li .dot{ background:var(--teal-soft); color:var(--teal); }
      .points li p{ margin:0; }
      .points code, .inline-code{
        background:var(--surface2); border:1.5px solid var(--line); border-radius:7px;
        padding:1px 7px; font-size:.88em; font-weight:600; white-space:nowrap;
      }

      .sec-title{ font-family:"Plus Jakarta Sans",sans-serif; font-size:1.2rem; margin:26px 0 10px; display:flex; align-items:center; gap:9px; }
      .sec-title .n{
        width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);
        display:grid;place-items:center;font-size:.9rem; flex:0 0 28px;
      }
      pre.codeblock{
        background:var(--code-bg); color:var(--code-ink); border-radius:14px;
        padding:18px; overflow-x:auto; font-size:.92rem; line-height:1.6; margin:0;
      }
      .code-note{ color:var(--ink-soft); font-size:.95rem; margin:10px 0 0; }

      /* playground */
      .play-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
      .play-grid.three{ grid-template-columns:1fr 1fr 1fr; }
      .play-pane{ display:flex; flex-direction:column; }
      .play-pane label{ font-weight:800; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; }
      textarea.code{
        width:100%; flex:1; min-height:190px; resize:vertical; border:2px solid var(--line);
        border-radius:14px; background:var(--code-bg); color:var(--code-ink);
        padding:14px; font-size:.9rem; line-height:1.6; outline:none;
      }
      textarea.code:focus{ border-color:var(--coral); }
      .preview-frame{
        flex:1; width:100%; min-height:190px; border:2px solid var(--line); border-radius:14px;
        background:#1B1611; color-scheme:dark;
      }
      .play-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
      .btn{
        border:none; cursor:pointer; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:1rem;
        padding:10px 22px; border-radius:999px; min-height:46px; transition:transform .12s ease, opacity .15s;
      }
      .btn:active{ transform:scale(.97); }
      .btn-primary{ background:var(--coral-solid); color:#fff; }
      .btn-teal{ background:var(--teal-solid); color:#fff; }
      .btn-ghost{ background:var(--surface2); color:var(--ink); border:2px solid var(--line); }
      .play-hint{ color:var(--ink-soft); font-size:.93rem; margin:10px 0 0; }

      /* quiz */
      .quiz-box{ background:var(--surface2); border:2px solid var(--line); border-radius:16px; padding:20px; margin-top:8px; }
      .quiz-q{ font-family:"Plus Jakarta Sans",sans-serif; font-size:1.15rem; margin:0 0 14px; }
      .quiz-opts{ display:grid; gap:10px; }
      .quiz-opt{
        text-align:left; cursor:pointer; background:var(--surface); border:2px solid var(--line);
        border-radius:13px; padding:13px 16px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700;
        font-size:1rem; color:var(--ink); min-height:48px; transition:border-color .15s;
      }
      .quiz-opt:hover{ border-color:var(--sun); }
      .quiz-opt.right{ border-color:var(--green); background:var(--green-soft); }
      .quiz-opt.wrong{ border-color:var(--red); background:var(--red-soft); }
      .quiz-opt:disabled{ cursor:default; opacity:.85; }
      .quiz-why{ display:none; margin:14px 0 0; padding:13px 16px; border-radius:12px; font-weight:600; }
      .quiz-why.show{ display:block; }
      .quiz-why.ok{ background:var(--green-soft); }
      .quiz-why.no{ background:var(--red-soft); }

      .lesson-foot{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-top:28px; padding-top:20px; border-top:2px dashed var(--line); }
      .btn-done{ background:var(--green-solid); color:#fff; }
      .btn-done.is-done{ background:var(--green-soft); color:var(--green); border:2px solid var(--green); }
      .nav-btns{ display:flex; gap:10px; }
      .btn-nav{ background:var(--surface); color:var(--ink); border:2px solid var(--line); }
      .btn-nav:disabled{ opacity:.4; cursor:default; }

      /* ---------- FREE PLAYGROUND + CHEATSHEET ---------- */
      .section{ padding:26px 0 6px; }
      .section > h2{ font-size:clamp(1.5rem,4vw,2rem); margin-bottom:6px; }
      .section > p.intro{ color:var(--ink-soft); max-width:640px; margin:0 0 20px; }
      .free-card{ background:var(--surface); border:2px solid var(--line); border-radius:26px; box-shadow:var(--shadow); padding:clamp(18px,3.5vw,30px); }
      .preset-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
      .preset-btn{
        cursor:pointer; background:var(--sun-soft); border:2px solid var(--sun); color:var(--ink);
        border-radius:999px; padding:7px 16px; font-weight:800; font-size:.92rem; min-height:44px;
        font-family:"Plus Jakarta Sans",sans-serif;
      }
      .cheat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
      .cheat-card{ background:var(--surface); border:2px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
      .cheat-card h3{ font-size:1.2rem; margin-bottom:14px; }
      .cheat-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
      .cheat-list li{ display:flex; gap:10px; align-items:baseline; }
      .cheat-list code{
        flex:0 0 auto; background:var(--code-bg); color:var(--code-ink); border-radius:8px;
        padding:3px 10px; font-size:.85rem; font-weight:600;
      }
      .cheat-list span{ color:var(--ink-soft); font-size:.95rem; }
      footer{ padding:36px 0 46px; color:var(--ink-soft); text-align:center; font-size:.95rem; }

      /* ---------- FOKUS KEYBOARD (:focus-visible) ---------- */
      /* Cincin ganda kontras tinggi: halo --ink + garis --sun, jadi tetap
         kelihatan di latar terang, gelap, maupun di atas tombol berwarna.
         Hanya muncul saat navigasi keyboard, tidak mengganggu klik mouse. */
      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      textarea.code:focus-visible,
      summary:focus-visible,
      iframe:focus-visible,
      [role="button"]:focus-visible,
      [tabindex]:focus-visible{
        outline:3px solid var(--sun);
        outline-offset:2px;
        box-shadow:0 0 0 6px var(--ink);
      }

      /* ---------- TAB UTAMA ---------- */
      .main-tabs{
        display:flex; gap:8px; flex-wrap:wrap; margin:28px 0 6px; padding:6px;
        background:var(--surface); border:2px solid var(--line); border-radius:999px; box-shadow:var(--shadow);
      }
      .main-tab{
        flex:1 1 140px; border:2px solid transparent; background:transparent; cursor:pointer;
        border-radius:999px; padding:10px 14px; min-height:48px;
        font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:1rem; color:var(--ink-soft);
        display:flex; align-items:center; justify-content:center; gap:8px;
      }
      .main-tab:hover{ color:var(--ink); border-color:var(--line); }
      .main-tab.active{ background:var(--coral-solid); color:#fff; }
      .main-tab[data-main-tab="latihan"].active{ background:var(--teal-solid); }
      .main-tab[data-main-tab="proyek"].active{ background:var(--sun); color:#2E2118; }
      .main-tab[data-main-tab="kamus"].active{ background:var(--teal-solid); }
      .main-tab[data-main-tab="bebas"].active{ background:var(--sun); color:#2E2118; }
      .main-tab .badge-baru{
        background:var(--sun); color:#2E2118; font-family:"Plus Jakarta Sans",sans-serif; font-weight:800;
        font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:999px;
      }
      .main-tab.active .badge-baru{ background:#fff; }
      .tab-panel{ display:none; }
      .tab-panel.active{ display:block; }
      .tab-intro{ color:var(--ink-soft); max-width:680px; margin:14px 0 20px; }
      .tab-intro b{ color:var(--ink); }

      /* FASE 7 — Tab utama di layar kecil: 13 tab jangan menumpuk jadi
         tembok setinggi ~500px. Jadi satu baris yang bisa di-scroll
         horizontal (halaman sendiri tetap tidak boleh scroll ke samping). */
      @media (max-width:760px){
        /* FASE 8 — petunjuk visual bahwa strip tab bisa di-scroll:
           ujung kanan memudar halus (mask; hanya di mode scroll). */
        .main-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin;
          -webkit-mask-image:linear-gradient(to right, #000 82%, transparent 98%);
          mask-image:linear-gradient(to right, #000 82%, transparent 98%); }
        .main-tab{ flex:0 0 auto; }
      }

      /* ---------- LATIHAN ---------- */
      .latihan-progress{
        display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
        background:var(--teal-soft); border:2px solid var(--teal); border-radius:16px; padding:14px 18px; margin-bottom:18px; font-weight:800;
      }
      .latihan-card{
        background:var(--surface); border:2px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
        padding:clamp(18px,3.5vw,28px); margin-bottom:18px;
      }
      .latihan-card.is-done{ border-color:var(--green); }
      .latihan-head{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
      .latihan-head h3{ font-size:1.35rem; }
      .latihan-num{
        width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--teal-solid);color:#fff;
        display:grid;place-items:center;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;
      }
      .latihan-head-left{ display:flex; gap:12px; align-items:flex-start; }
      .status-pill{ font-weight:800; font-size:.82rem; padding:5px 12px; border-radius:999px; background:var(--surface2); border:2px solid var(--line); color:var(--ink-soft); }
      .latihan-card.is-done .status-pill{ background:var(--green-soft); border-color:var(--green); color:var(--green); }
      .misi{ background:var(--sun-soft); border:2px dashed var(--sun); border-radius:14px; padding:13px 16px; margin:14px 0; }
      .misi p{ margin:0; } .misi b{ font-family:"Plus Jakarta Sans",sans-serif; }
      .misi code{ background:var(--surface); border:1.5px solid var(--line); border-radius:7px; padding:1px 7px; font-size:.88em; font-weight:700; }
      .cek-hasil{ display:none; margin-top:12px; border-radius:12px; padding:13px 16px; font-weight:700; }
      .cek-hasil.show{ display:block; }
      .cek-hasil.ok{ background:var(--green-soft); border:2px solid var(--green); }
      .cek-hasil.no{ background:var(--red-soft); border:2px solid var(--red); }
      .cek-hasil ul{ margin:6px 0 0; padding-left:20px; font-weight:600; }

      /* ---------- OVERLAY PERINTAH (muncul pas ngetik) ---------- */
      .code-wrap{ position:relative; display:flex; flex:1; min-width:0; }
      .code-wrap textarea.code{ flex:1; }
      .typing-hint{
        display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0 0; font-size:.88rem; color:var(--ink-soft); font-weight:700;
      }
      .typing-hint .kbd{
        background:var(--code-bg); color:var(--code-ink); border-radius:6px; padding:1px 8px;
        font-family:"JetBrains Mono",monospace; font-size:.82rem; font-weight:600;
      }
      /* Overlay Perintah = PALET PERINTAH: di PC tampil di tengah layar
         kayak palet VS Code; di HP tampil sebagai lembar bawah lebar penuh. */
      .command-overlay{
        display:none; position:fixed; z-index:80; left:50%; top:10%; transform:translateX(-50%);
        width:min(580px, calc(100vw - 24px)); max-height:74vh; overflow:hidden;
        background:var(--surface); color:var(--ink); border:2px solid var(--sun); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.55);
      }
      .command-overlay.show{ display:block; }
      .command-overlay-head{
        display:flex; align-items:center; justify-content:space-between; gap:8px;
        background:var(--sun-soft); padding:8px 12px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:.9rem;
      }
      .command-overlay-head button{
        border:none; background:var(--surface); color:var(--ink); width:44px; height:44px; min-height:44px;
        border-radius:50%; cursor:pointer; font-weight:800; line-height:1; flex:0 0 44px;
      }
      .command-list{ max-height:calc(74vh - 47px); overflow:auto; padding:6px; display:grid; gap:4px; }
      .command-group{
        padding:8px 10px 2px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:.74rem;
        letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
      }
      .command-item.act-item code{ background:var(--sun-soft); color:var(--sun); font-size:.95rem; }
      .command-item span strong{ color:var(--ink); }
      .command-item{
        display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
        border:2px solid transparent; background:transparent; border-radius:10px; padding:7px 8px; min-height:44px;
        font-family:"Plus Jakarta Sans",sans-serif; color:var(--ink);
      }
      .command-item:hover, .command-item.selected{ background:var(--surface2); border-color:var(--line); }
      .command-item code{
        flex:0 0 auto; background:var(--code-bg); color:var(--code-ink); border-radius:7px; padding:3px 8px;
        font-size:.82rem; font-weight:600; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      }
      .command-item span{ font-size:.85rem; font-weight:700; color:var(--ink-soft); line-height:1.3; }
      .command-empty{ padding:12px; font-size:.88rem; color:var(--ink-soft); font-weight:700; }

      /* ---------- STATS: XP + STREAK ---------- */
      .stats-bar{
        display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
        background:var(--surface); border:2px solid var(--line); border-radius:20px; box-shadow:var(--shadow);
        padding:16px 20px; margin:22px 0 4px;
      }
      .stat-item{ display:flex; align-items:center; gap:11px; }
      .stat-item .stat-ic{ width:46px;height:46px;flex:0 0 46px;border-radius:13px;display:grid;place-items:center;font-size:1.35rem; }
      .stat-item strong{ display:block; font-family:"Plus Jakarta Sans",sans-serif; font-size:1.15rem; line-height:1.15; }
      .stat-item small{ color:var(--ink-soft); font-weight:700; font-size:.85rem; }
      .xp-track{ flex:1 1 180px; min-width:160px; }
      .xp-track .bar{ margin-top:6px; height:12px; }
      .xp-track .bar > div{ background:var(--sun); }
      .btn-reset-prog{ background:transparent; border:2px solid var(--line); color:var(--ink-soft); border-radius:999px; padding:7px 14px; font-weight:800; font-size:.85rem; cursor:pointer; min-height:44px; font-family:"Plus Jakarta Sans",sans-serif; }
      .btn-reset-prog.danger{ border-color:var(--red); color:var(--red); background:var(--red-soft); }

      /* ---------- STATUS SINKRON PROGRES ---------- */
      .sync-line{ display:flex; align-items:center; gap:8px; margin:8px 2px 0; font-size:.88rem; font-weight:700; color:var(--ink-soft); }
      .sync-dot{ flex:0 0 10px; width:10px; height:10px; border-radius:50%; background:var(--sun); }
      .sync-dot.ok{ background:var(--green); }
      .sync-dot.off{ background:var(--red); }
      .sync-dot.syncing{ background:var(--sun); }

      /* ---------- TOMBOL SALIN ---------- */
      .codeblock-wrap{ position:relative; }
      .btn-copy{
        display:inline-flex; align-items:center; gap:6px; cursor:pointer; border:2px solid var(--line);
        background:var(--surface); color:var(--ink); border-radius:999px; padding:6px 14px;
        font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:.85rem; min-height:44px;
      }
      .btn-copy:hover{ border-color:var(--sun); }
      .btn-copy.copied{ background:var(--green-soft); border-color:var(--green); color:var(--green); }
      .btn-copy.on-dark{ position:absolute; top:10px; right:10px; background:var(--surface); z-index:2; }
      .editor-tools{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center; }
      .editor-tools .tool-label{ font-size:.82rem; color:var(--ink-soft); font-weight:700; }

      /* ---------- PETUNJUK KESALAHAN RAMAH ---------- */
      .error-hints{ display:none; margin-top:10px; border-radius:13px; padding:12px 15px; font-size:.93rem; }
      .error-hints.show{ display:block; }
      .error-hints.has-error{ background:var(--red-soft); border:2px solid var(--red); }
      .error-hints.has-warn{ background:var(--sun-soft); border:2px dashed var(--sun); }
      .error-hints b{ font-family:"Plus Jakarta Sans",sans-serif; display:block; margin-bottom:4px; }
      .error-hints ul{ margin:4px 0 0; padding-left:20px; }
      .error-hints li{ margin:3px 0; }
      .error-hints code{ background:var(--surface); border:1.5px solid var(--line); border-radius:6px; padding:0 6px; font-size:.86em; font-weight:700; }

      /* ---------- KAMUS LENGKAP ---------- */
      .kamus-tools{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
      .kamus-search{
        flex:1 1 240px; border:2px solid var(--line); border-radius:999px; background:var(--surface);
        padding:11px 18px; font-family:"Plus Jakarta Sans",sans-serif; font-size:1rem; font-weight:600; color:var(--ink); min-height:48px; outline:none;
      }
      .kamus-search:focus{ border-color:var(--teal); }
      .kamus-filters{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px; }
      .kamus-chip{ cursor:pointer; border:2px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:999px; padding:7px 16px; font-weight:800; font-size:.9rem; min-height:44px; font-family:"Plus Jakarta Sans",sans-serif; }
      .kamus-chip.active{ background:var(--teal-solid); border-color:var(--teal-solid); color:#fff; }
      .kamus-count{ color:var(--ink-soft); font-weight:700; font-size:.92rem; margin:0 0 12px; }
      .kamus-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
      .kamus-card{ background:var(--surface); border:2px solid var(--line); border-radius:16px; padding:16px 18px; }
      .kamus-card .k-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
      .kamus-card code{ background:var(--code-bg); color:var(--code-ink); border-radius:8px; padding:3px 10px; font-size:.88rem; font-weight:600; }
      .kamus-badge{ font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap; }
      .kamus-badge.html{ background:var(--coral-soft); color:var(--coral-dark); }
      .kamus-badge.css{ background:var(--teal-soft); color:var(--teal); }
      .kamus-card p{ margin:0 0 8px; font-size:.95rem; }
      .kamus-card .k-contoh{ color:var(--ink-soft); font-size:.86rem; margin:0; }
      .kamus-card .k-contoh code{ background:var(--surface2); color:var(--ink); border:1.5px solid var(--line); padding:1px 7px; font-size:.92em; }
      .kamus-empty{ display:none; background:var(--surface2); border:2px dashed var(--line); border-radius:16px; padding:22px; text-align:center; font-weight:700; color:var(--ink-soft); }
      .kamus-empty.show{ display:block; }
      .kamus-badge.aksi{ background:var(--sun-soft); color:var(--sun); }
      .kamus-card .k-head code{ max-width:78%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

      /* ---------- TAB SEMUA PERINTAH ---------- */
      .main-tab[data-main-tab="perintah"].active{ background:var(--teal-solid); }
      .main-tab[data-main-tab="ulangan"].active{ background:var(--teal-solid); }

      /* ---------- UJIAN NAIK LEVEL + MODE ULANGAN ---------- */
      .quiz-opt.selected{ border-color:var(--sun); background:var(--sun-soft); }
      .exam-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:8px; }
      @media (max-width:760px){ .exam-grid{ grid-template-columns:1fr; } }
      .exam-card{ background:var(--surface); border:2px solid var(--line); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; }
      .exam-card.is-passed{ border-color:var(--green); }
      .exam-card.is-locked{ opacity:.72; }
      .exam-card h3{ font-size:1.2rem; }
      .exam-card p{ margin:0; color:var(--ink-soft); font-size:.95rem; }
      .exam-card p b{ color:var(--ink); }
      .exam-card .btn{ margin-top:auto; align-self:flex-start; }
      .exam-card .btn:disabled{ opacity:.45; cursor:default; }
      .exam-session-head{
        display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
        background:var(--surface); border:2px solid var(--sun); border-radius:16px; padding:14px 18px; margin:18px 0 16px; font-weight:800;
      }
      .exam-item{ background:var(--surface); border:2px solid var(--line); border-radius:18px; padding:18px 20px; margin-bottom:14px; }
      .exam-item .exam-item-top{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
      .exam-item .exam-item-top .bab-tag{ font-weight:800; font-size:.8rem; padding:4px 11px; border-radius:999px; background:var(--surface2); border:2px solid var(--line); color:var(--ink-soft); }
      .exam-item .exam-item-top .jenis-tag{ font-weight:800; font-size:.8rem; padding:4px 11px; border-radius:999px; background:var(--teal-soft); border:2px solid var(--teal); color:var(--teal); }
      .exam-item .exam-item-top .jenis-tag.kode{ background:var(--coral-soft); border-color:var(--coral); color:var(--coral-dark); }
      .exam-result{ display:none; margin-top:18px; border-radius:16px; padding:18px 20px; font-weight:700; }
      .exam-result.show{ display:block; }
      .exam-result.ok{ background:var(--green-soft); border:2px solid var(--green); }
      .exam-result.no{ background:var(--red-soft); border:2px solid var(--red); }
      .exam-result .score-big{ font-family:"Plus Jakarta Sans",sans-serif; font-size:2rem; display:block; margin-bottom:4px; }
      .exam-result ul{ margin:8px 0; padding-left:20px; }
      .review-stats{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
      .review-stat{ background:var(--surface); border:2px solid var(--line); border-radius:14px; padding:10px 16px; font-weight:800; font-size:.95rem; }
      .review-stat small{ display:block; color:var(--ink-soft); font-weight:700; font-size:.78rem; }

      /* ---------- TAB CARA BELAJAR (panduan) ---------- */
      /* Tab panduan dibikin paling nonjol: pinggir kuning selalu nyala,
         jadi orang baru nggak bisa kelewatan. */
      .main-tab[data-main-tab="panduan"]{ border-color:var(--sun); color:var(--sun); }
      .main-tab[data-main-tab="panduan"]:hover{ color:var(--sun); border-color:var(--sun); }
      .main-tab[data-main-tab="panduan"].active{ background:var(--sun); border-color:var(--sun); color:#2E2118; }
      .main-tab[data-main-tab="panduan"].active .badge-baru{ background:#2E2118; color:var(--sun); }

      /* Spanduk "mulai di sini" di bagian pembuka */
      .start-here{
        display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
        margin:24px 0 4px; background:var(--sun-soft); border:2px dashed var(--sun);
        border-radius:20px; padding:18px 20px;
      }
      .start-here p{ margin:0; flex:1 1 300px; font-weight:800; font-size:1.05rem; }
      .start-here p small{ display:block; color:var(--ink-soft); font-weight:600; font-size:.93rem; margin-top:3px; }
      .start-here-btns{ display:flex; gap:10px; flex-wrap:wrap; }
      .btn-sun{ background:var(--sun); color:#2E2118; }

      /* Isi panduan: langkah bernomor, ritme sesi, kartu fitur, target tingkat */
      .guide-cta{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; }
      .guide-steps{ display:grid; gap:18px; }
      .guide-step{
        background:var(--surface); border:2px solid var(--line); border-radius:22px;
        box-shadow:var(--shadow); padding:clamp(18px,3.5vw,28px);
      }
      .guide-step-head{ display:flex; gap:13px; align-items:flex-start; margin-bottom:8px; }
      .guide-num{
        width:44px; height:44px; flex:0 0 44px; border-radius:50%; background:var(--sun); color:#2E2118;
        display:grid; place-items:center; font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:1.3rem;
      }
      .guide-step-head h3{ font-size:1.35rem; }
      .guide-step-head p{ margin:2px 0 0; color:var(--ink-soft); }
      .guide-step > p{ color:var(--ink-soft); }
      .guide-step > p b, .guide-step li p b{ color:var(--ink); }
      .guide-step .points{ margin-bottom:6px; }
      .guide-step .points li .dot{ background:var(--sun-soft); color:var(--sun); }
      .session-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0 16px; }
      .session-part{ background:var(--surface2); border:2px solid var(--line); border-radius:14px; padding:13px 15px; }
      .session-part b{ display:block; font-family:"Plus Jakarta Sans",sans-serif; font-size:1rem; margin-bottom:2px; }
      .session-part span{ color:var(--ink-soft); font-size:.9rem; line-height:1.45; display:block; }
      .guide-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
      .guide-card{ background:var(--surface2); border:2px solid var(--line); border-radius:16px; padding:16px 18px; }
      .guide-card h4{ font-family:"Plus Jakarta Sans",sans-serif; font-size:1.08rem; margin:0 0 5px; }
      .guide-card p{ margin:0; color:var(--ink-soft); font-size:.95rem; }
      .guide-card p b{ color:var(--ink); }
      .guide-card code{
        background:var(--code-bg); color:var(--code-ink); border-radius:6px; padding:1px 7px;
        font-size:.86em; font-weight:600; white-space:nowrap;
      }
      .level-targets{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
      .level-card{ background:var(--surface2); border:2px solid var(--line); border-radius:16px; padding:16px 18px; }
      .level-card h4{ font-family:"Plus Jakarta Sans",sans-serif; font-size:1.12rem; margin:0 0 6px; }
      .level-card p{ margin:0 0 8px; color:var(--ink-soft); font-size:.94rem; }
      .level-card p b{ color:var(--ink); }
      .level-card .siap{ background:var(--green-soft); border:2px solid var(--green); border-radius:11px; padding:9px 12px; color:var(--ink); font-size:.92rem; margin:0; }
      .guide-final{
        margin-top:18px; background:var(--green-soft); border:2px solid var(--green); border-radius:20px;
        padding:20px 22px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
      }
      .guide-final p{ margin:0; flex:1 1 300px; font-weight:700; }
      @media (max-width:760px){
        .session-flow{ grid-template-columns:1fr 1fr; }
        .guide-grid, .level-targets{ grid-template-columns:1fr; }
        .start-here-btns, .start-here-btns .btn, .guide-cta .btn{ width:100%; }
      }
      .perintah-group{ font-family:"Plus Jakarta Sans",sans-serif; font-size:1.3rem; margin:26px 0 12px; }
      #perintahList > .perintah-group:first-child{ margin-top:6px; }

      /* ---------- PETA JALAN (ROADMAP TINGKAT) ---------- */
      .roadmap{ margin:30px 0 4px; }
      .roadmap > h2{ font-size:1.35rem; margin-bottom:4px; }
      .roadmap > p{ color:var(--ink-soft); margin:0 0 16px; max-width:680px; }
      .roadmap-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
      .tier-card{ background:var(--surface); border:2px solid var(--line); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow); }
      .tier-card .tier-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
      .tier-card h3{ font-size:1.2rem; }
      .tier-state{ font-weight:800; font-size:.8rem; padding:4px 11px; border-radius:999px; background:var(--surface2); border:2px solid var(--line); color:var(--ink-soft); white-space:nowrap; }
      .tier-card p{ margin:0 0 10px; color:var(--ink-soft); font-size:.95rem; }
      .tier-card .tier-count{ font-weight:800; font-size:.92rem; }
      .tier-card.is-current{ border-color:var(--sun); }
      .tier-card.is-current .tier-state{ background:var(--sun-soft); border-color:var(--sun); color:var(--sun); }
      .tier-card.is-done{ border-color:var(--green); }
      .tier-card.is-done .tier-state{ background:var(--green-soft); border-color:var(--green); color:var(--green); }
      .roadmap-next{
        display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
        margin-top:14px; background:var(--surface); border:2px dashed var(--sun); border-radius:16px; padding:14px 18px;
      }
      .roadmap-next p{ margin:0; font-weight:700; flex:1 1 260px; }
      .roadmap-next p small{ display:block; color:var(--ink-soft); font-weight:600; }
      @media (max-width:760px){ .roadmap-tiers{ grid-template-columns:1fr; } }

      /* ---------- LENCANA PENCAPAIAN ---------- */
      .badge-shelf{ margin:18px 0 4px; background:var(--surface); border:2px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:18px 20px; }
      .badge-shelf-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
      .badge-shelf-head h2{ font-size:1.25rem; }
      .badge-shelf-head span{ font-weight:800; color:var(--sun); }
      .badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
      .badge-card{ border:2px solid var(--line); border-radius:16px; padding:15px 16px; background:var(--surface2); }
      .badge-card .b-ic{ font-size:1.7rem; line-height:1; display:block; margin-bottom:8px; }
      .badge-card strong{ display:block; font-family:"Plus Jakarta Sans",sans-serif; font-size:1.02rem; margin-bottom:3px; }
      .badge-card p{ margin:0; color:var(--ink-soft); font-size:.86rem; line-height:1.45; }
      .badge-card.locked{ opacity:.55; }
      .badge-card.locked .b-ic{ filter:grayscale(1); }
      .badge-card.got{ border-color:var(--sun); background:var(--sun-soft); }
      .badge-card.got p{ color:var(--ink); }

      /* ---------- PROYEK PUNCAK (CAPSTONE) ---------- */
      .capstone-card{ background:var(--surface); border:2px solid var(--sun); border-radius:22px; box-shadow:var(--shadow); padding:clamp(18px,3.5vw,28px); margin:22px 0 18px; }
      .capstone-card.is-done{ border-color:var(--green); }
      .capstone-card.locked{ border-color:var(--line); opacity:.75; }
      .capstone-banner{ display:none; margin-top:14px; background:var(--green-soft); border:2px solid var(--green); border-radius:14px; padding:16px 18px; font-weight:700; }
      .capstone-banner.show{ display:block; }

      /* ---------- PROYEK MINI ---------- */
      .proyek-progress{
        display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
        background:var(--sun-soft); border:2px solid var(--sun); border-radius:16px; padding:14px 18px; margin-bottom:18px; font-weight:800;
      }
      .proyek-card{ background:var(--surface); border:2px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:clamp(18px,3.5vw,28px); margin-bottom:18px; }
      .proyek-card.is-done{ border-color:var(--green); }
      .proyek-card.locked{ opacity:.55; }
      .final-box{ display:none; margin-top:14px; background:var(--green-soft); border:2px solid var(--green); border-radius:14px; padding:16px 18px; }
      .final-box.show{ display:block; }

      /* ---------- DESKTOP (PC utama): editor lega, preview tinggi ---------- */
      @media (min-width:1024px){
        textarea.code{ min-height:320px; font-size:.95rem; }
        .preview-frame{ min-height:320px; }
        .lesson-card{ padding:44px 48px; }
        .command-item code{ max-width:260px; }
      }

      /* ---------- ALIH KODE / HASIL (khusus layar kecil) ---------- */
      .pane-toggle{ display:none; }
      @media (max-width:760px){
        .pane-toggle{ display:flex; gap:8px; margin:0 0 10px; }
        .pt-btn{
          flex:1; cursor:pointer; border:2px solid var(--line); background:var(--surface); color:var(--ink-soft);
          border-radius:999px; padding:9px 12px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:.98rem; min-height:46px;
        }
        .pt-btn.active{ background:var(--teal-solid); border-color:var(--teal-solid); color:#fff; }
        .play-grid.show-preview .code-pane{ display:none; }
        .play-grid.show-code .preview-pane{ display:none; }
        /* Overlay Perintah jadi lembar bawah lebar penuh — gampang dijangkau & ditutup */
        .command-overlay{
          left:0; right:0; bottom:0; top:auto; transform:none; width:100%;
          max-height:66vh; border-radius:20px 20px 0 0; border-bottom:none;
        }
        .command-list{ max-height:calc(66vh - 47px); }
        .command-item{ min-height:48px; }
      }

      @media (max-width:760px){
        .analogy-row{ grid-template-columns:1fr; }
        .play-grid, .play-grid.three{ grid-template-columns:1fr; }
        .cheat-grid{ grid-template-columns:1fr; }
        .preview-frame{ min-height:170px; }
        .lesson-foot{ flex-direction:column; align-items:stretch; }
        .lesson-foot .btn, .nav-btns{ width:100%; }
        .nav-btns .btn{ flex:1; }
      }

      /* ---------- FITUR BARU v5: CARI, STATISTIK, CATATAN, HARIAN, GALERI, KILAT, CONSOLE, SERTIFIKAT ---------- */
      .main-tab[data-main-tab="statistik"].active{ background:var(--coral-solid); }
      .main-tab[data-main-tab="catatan"].active{ background:var(--teal-solid); }
      .main-tab[data-main-tab="galeri"].active{ background:var(--sun); color:#2E2118; }
      .main-tab[data-main-tab="kilat"].active{ background:var(--teal-solid); }

      /* Pencarian global */
      .global-search{ margin:22px 0 4px; background:var(--surface); border:2px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:16px 18px; }
      .global-search label{ font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:1.1rem; display:block; margin-bottom:8px; }
      .search-results{ display:grid; gap:8px; margin-top:12px; }
      .search-hit{ display:flex; gap:10px; align-items:center; text-align:left; width:100%; cursor:pointer; background:var(--surface2); border:2px solid var(--line); border-radius:13px; padding:11px 14px; color:var(--ink); font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:.97rem; min-height:48px; }
      .search-hit:hover{ border-color:var(--sun); }
      .search-hit .hit-type{ flex:0 0 auto; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:var(--sun-soft); color:var(--sun); border:1.5px solid var(--sun); }
      .search-hit small{ display:block; color:var(--ink-soft); font-weight:600; font-size:.85rem; }
      .search-none{ color:var(--ink-soft); font-weight:700; padding:6px 2px 0; }

      /* Tantangan harian */
      .daily-card{ margin:16px 0 4px; background:var(--sun-soft); border:2px dashed var(--sun); border-radius:20px; padding:18px 20px; }
      .daily-card h2{ font-size:1.3rem; margin-bottom:4px; }
      .daily-card p{ margin:0 0 10px; color:var(--ink-soft); }
      .daily-card p b{ color:var(--ink); }
      .daily-card .quiz-box{ background:var(--surface); margin-top:10px; }
      .daily-done{ background:var(--green-soft); border:2px solid var(--green); border-radius:14px; padding:13px 16px; font-weight:800; margin-top:10px; }

      /* Export / import */
      .tools-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 0; }
      .tools-row .tool-note{ color:var(--ink-soft); font-size:.9rem; font-weight:700; }

      /* Statistik */
      .stat-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:18px; }
      .stat-card{ background:var(--surface); border:2px solid var(--line); border-radius:16px; padding:15px 17px; box-shadow:var(--shadow); }
      .stat-card strong{ display:block; font-family:"Plus Jakarta Sans",sans-serif; font-size:1.5rem; line-height:1.15; }
      .stat-card small{ color:var(--ink-soft); font-weight:700; font-size:.85rem; }
      .dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
      @media (max-width:760px){ .dash-grid{ grid-template-columns:1fr; } }
      .dash-card{ background:var(--surface); border:2px solid var(--line); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow); }
      .dash-card h3{ font-size:1.15rem; margin-bottom:10px; }
      .ring-wrap{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
      .ring{ transform:rotate(-90deg); }
      .ring .ring-bg{ stroke:var(--surface2); }
      .ring .ring-fg{ stroke:var(--sun); transition:stroke-dashoffset .5s ease; }
      .goal-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
      .cal-grid{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; }
      @media (max-width:760px){ .cal-grid{ grid-template-columns:repeat(6,1fr); } }
      .cal-day{ border:2px solid var(--line); border-radius:10px; padding:7px 2px; text-align:center; font-size:.8rem; font-weight:800; color:var(--ink-soft); background:var(--surface2); }
      .cal-day small{ display:block; font-size:.66rem; font-weight:700; }
      .cal-day.visited{ background:var(--green-soft); border-color:var(--green); color:var(--ink); }
      .cal-day.today{ border-color:var(--sun); color:var(--sun); }
      .cal-day.visited.today{ color:var(--ink); box-shadow:inset 0 0 0 2px var(--sun); }

      /* Catatan per bab + semua catatan */
      .lesson-notes{ margin-top:26px; background:var(--surface2); border:2px dashed var(--teal); border-radius:16px; padding:16px 18px; }
      .lesson-notes h4{ font-family:"Plus Jakarta Sans",sans-serif; font-size:1.08rem; margin:0 0 6px; }
      .lesson-notes p{ margin:0 0 10px; color:var(--ink-soft); font-size:.93rem; }
      .lesson-notes textarea{ width:100%; min-height:96px; resize:vertical; border:2px solid var(--line); border-radius:12px; background:var(--code-bg); color:var(--code-ink); padding:12px 14px; font-family:"Plus Jakarta Sans",sans-serif; font-size:.98rem; line-height:1.55; outline:none; }
      .lesson-notes textarea:focus{ border-color:var(--teal); }
      .note-status{ font-size:.85rem; font-weight:800; color:var(--green); margin-top:7px; min-height:1.2em; }
      .note-item{ background:var(--surface); border:2px solid var(--line); border-radius:16px; padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow); }
      .note-item h4{ font-family:"Plus Jakarta Sans",sans-serif; font-size:1.08rem; margin:0 0 6px; }
      .note-item p{ margin:0 0 10px; white-space:pre-wrap; }

      /* Galeri contoh */
      .galeri-card{ background:var(--surface); border:2px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:clamp(18px,3.5vw,28px); margin-bottom:20px; }
      .galeri-card h3{ font-size:1.35rem; margin-bottom:4px; }
      .galeri-card > p{ color:var(--ink-soft); margin:0 0 14px; }
      .galeri-frame{ width:100%; min-height:340px; border:2px solid var(--line); border-radius:14px; background:#1B1611; color-scheme:dark; }
      .galeri-code{ display:none; margin-top:12px; }
      .galeri-code.show{ display:block; }

      /* Kartu kilat */
      .flash-stage{ perspective:900px; margin:6px 0 14px; }
      .flash-card{ position:relative; width:100%; min-height:230px; cursor:pointer; transform-style:preserve-3d; transition:transform .45s ease; }
      .flash-card.flipped{ transform:rotateY(180deg); }
      .flash-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:20px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; overflow:auto; }
      .flash-front{ background:var(--surface); border:2px solid var(--teal); box-shadow:var(--shadow); }
      .flash-back{ background:var(--teal-soft); border:2px solid var(--teal); transform:rotateY(180deg); }
      .flash-face .f-term{ font-family:"JetBrains Mono",monospace; font-size:clamp(1.3rem,4.5vw,2rem); font-weight:600; }
      .flash-face .f-hint{ color:var(--ink-soft); font-weight:700; font-size:.9rem; }
      .flash-face p{ margin:0; max-width:520px; }
      .flash-face code{ background:var(--code-bg); color:var(--code-ink); border-radius:8px; padding:4px 12px; font-size:.9rem; }
      .flash-actions{ display:flex; gap:10px; flex-wrap:wrap; }
      .flash-actions .btn{ flex:1 1 150px; }

      /* Console live di tiap editor */
      .console-pane{ grid-column:1 / -1; }
      .console-box{ flex:1; display:flex; flex-direction:column; background:var(--code-bg); border:2px solid var(--line); border-radius:14px; overflow:hidden; min-height:150px; }
      .console-head{ display:flex; align-items:center; gap:10px; justify-content:space-between; padding:8px 12px; background:var(--surface2); border-bottom:2px solid var(--line); font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:.92rem; }
      .console-counts{ display:flex; gap:6px; flex-wrap:wrap; }
      .con-badge{ font-family:"Plus Jakarta Sans",sans-serif; font-size:.74rem; font-weight:800; padding:2px 9px; border-radius:999px; border:1.5px solid var(--line); color:var(--ink-soft); }
      .con-badge.err{ background:var(--red-soft); border-color:var(--red); color:var(--red); }
      .con-badge.warn{ background:var(--sun-soft); border-color:var(--sun); color:var(--sun); }
      .con-badge.ok{ background:var(--green-soft); border-color:var(--green); color:var(--green); }
      .console-toggle{ border:2px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:4px 13px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:.8rem; cursor:pointer; min-height:44px; flex:0 0 auto; }
      .console-body{ padding:10px 12px; overflow:auto; max-height:300px; font-family:"JetBrains Mono",monospace; font-size:.83rem; line-height:1.55; }
      .console-pane.collapsed .console-body{ display:none; }
      .con-line{ display:flex; gap:8px; padding:3px 0; align-items:flex-start; }
      .con-line .con-ic{ flex:0 0 auto; }
      .con-line.err{ color:#FFC9C9; }
      .con-line.warn{ color:#FFE1A8; }
      .con-line.ok{ color:#B9EBCB; }
      .con-line.info{ color:var(--ink-soft); }
      .con-line.timeout{ color:#FFE1A8; }
      .console-retry{ margin-top:8px; border:2px solid var(--sun); background:var(--sun-soft); color:var(--sun); border-radius:999px; padding:6px 14px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:.82rem; cursor:pointer; min-height:44px; }
      .console-retry:hover{ filter:brightness(1.08); }
      .con-line code{ background:var(--surface2); border-radius:5px; padding:0 5px; font-size:.92em; }
      @media (min-width:1024px){
        .play-grid.has-console{ grid-template-columns:1fr 1fr 1fr; }
        .play-grid.has-console .console-pane{ grid-column:auto; }
        .play-grid.three.has-console{ grid-template-columns:1fr 1fr 1fr; }
        .play-grid.three.has-console .console-pane{ grid-column:1 / -1; }
        .console-body{ max-height:320px; }
      }
      @media (min-width:1500px){
        .play-grid.three.has-console{ grid-template-columns:1fr 1fr 1fr 1fr; }
        .play-grid.three.has-console .console-pane{ grid-column:auto; }
      }

      /* Sertifikat */
      .cert-box{ background:var(--surface); border:2px solid var(--sun); border-radius:22px; box-shadow:var(--shadow); padding:clamp(18px,3.5vw,28px); margin:22px 0 18px; }
      .cert-box.locked{ border-color:var(--line); opacity:.75; }
      .cert-form{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
      .cert-form input{ flex:1 1 200px; border:2px solid var(--line); border-radius:12px; background:var(--code-bg); color:var(--code-ink); padding:11px 14px; font-family:"Plus Jakarta Sans",sans-serif; font-size:1rem; min-height:48px; outline:none; }
      .cert-form input:focus{ border-color:var(--sun); }
      #certOverlay{ position:fixed; inset:0; z-index:120; background:rgba(10,7,4,.88); display:none; overflow:auto; padding:22px 14px; }
      #certOverlay.show{ display:block; }
      .cert-paper{ max-width:820px; margin:0 auto; background:#FDF6E3; color:#2E2118; border:6px double #B8860B; border-radius:10px; padding:clamp(24px,5vw,54px); text-align:center; font-family:Georgia, serif; }
      .cert-paper h2{ font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(1.7rem,5vw,2.6rem); color:#8A5A00; margin:6px 0; }
      .cert-paper .cert-name{ font-size:clamp(1.5rem,4.5vw,2.2rem); font-weight:bold; border-bottom:2px solid #B8860B; display:inline-block; padding:0 26px 6px; margin:12px 0; font-family:"Plus Jakarta Sans",sans-serif; }
      .cert-paper p{ margin:8px 0; font-size:1.02rem; line-height:1.6; }
      .cert-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:18px auto 0; max-width:820px; }
      @media print{
        body > *:not(#certOverlay){ display:none !important; }
        #certOverlay{ position:static; background:#fff; padding:0; overflow:visible; }
        .cert-actions{ display:none !important; }
        .cert-paper{ border-width:4px; }
      }

      /* Teaser JavaScript + tabel shortcut */
      .js-teaser{ margin-top:14px; background:var(--surface); border:2px dashed var(--sun); border-radius:16px; padding:16px 18px; }
      .js-teaser h3{ font-size:1.2rem; margin-bottom:6px; }
      .js-teaser p{ margin:0 0 10px; color:var(--ink-soft); }
      .js-teaser p b{ color:var(--ink); }
      .js-demo-frame{ width:100%; min-height:120px; border:2px solid var(--line); border-radius:12px; background:#1B1611; color-scheme:dark; }
      .shortcut-table{ width:100%; border-collapse:collapse; margin-top:10px; }
      .shortcut-table th, .shortcut-table td{ text-align:left; padding:9px 10px; border-bottom:2px solid var(--line); vertical-align:top; }
      .shortcut-table th{ font-family:"Plus Jakarta Sans",sans-serif; }
      .shortcut-table td:first-child{ white-space:nowrap; width:170px; }
      .kbd-key{ background:var(--code-bg); color:var(--code-ink); border:1.5px solid var(--line); border-bottom-width:3px; border-radius:7px; padding:2px 9px; font-family:"JetBrains Mono",monospace; font-size:.85rem; font-weight:600; white-space:nowrap; }
      @media (max-width:760px){ .shortcut-table td:first-child{ width:auto; } .shortcut-table th, .shortcut-table td{ padding:8px 6px; font-size:.93rem; } }
      @media (prefers-reduced-motion: reduce){
        html{ scroll-behavior:auto; }
        *{ transition:none !important; }
      }