:root{
    --bg:#FAF9F6;
    --surface:#FFFFFF;
    --surface-alt:#EEF1FB;
    --ink:#14151F;
    --ink-soft:#5A5D78;
    --blue:#2F6FED;
    --blue-dark:#1B4FC7;
    --blue-ink:#122B6B;
    --gold:#EFA23B;
    --gold-soft:#FBE4BC;
    --line:#E4E6F0;
    --radius:16px;
    --shadow:0 12px 32px -16px rgba(20,21,31,0.18);
    --maxw:1180px;
  }
  html.dark{
    --bg:#0D0F1E;
    --surface:#151833;
    --surface-alt:#1B1F44;
    --ink:#F2F3FA;
    --ink-soft:#A7ABCF;
    --blue:#4E7EFF;
    --blue-dark:#8CACFF;
    --blue-ink:#DCE6FF;
    --gold:#F2B056;
    --gold-soft:#3A2E17;
    --line:#2A2E54;
    --shadow:0 20px 40px -18px rgba(0,0,0,0.55);
  }
  *,*::before,*::after{box-sizing:border-box;}
  button, input, select, textarea{ font-family:inherit; }
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Kantumruy Pro', 'Khmer OS Battambang', 'Khmer OS', sans-serif;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    transition:background .3s ease, color .3s ease, opacity .45s ease;
    opacity:0;
  }
  body.page-ready{opacity:1;}
  .khmer-display{font-family:'Kantumruy Pro', 'Khmer OS Battambang', sans-serif; font-weight:800;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  @media (max-width:480px){ .wrap{padding:0 18px;} }
  :focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px;}

  header.site-nav{
    position:sticky; top:0; z-index:100;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:var(--maxw); margin:0 auto; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.15rem;}
  .brand-mark{
    width:46px; height:46px; border-radius:10px;
    background:#fff; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow);
    flex-shrink:0;
    overflow:hidden;
  }
  .brand-mark img{width:100%; height:100%; object-fit:contain; display:block;}
  nav.links{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
  nav.links a{
    padding:9px 14px; border-radius:10px; font-size:calc(.92rem + 1px); font-weight:500;
    color:var(--ink-soft); white-space:nowrap; transition:background .2s, color .2s;
  }
  nav.links a:hover, nav.links a.active{ background:var(--surface-alt); color:var(--blue-ink); }
  .nav-actions{display:flex; align-items:center; gap:10px;}
  .icon-btn{
    width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
    background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:1rem; flex-shrink:0;
  }
  .menu-toggle{display:none;}
  @media (max-width: 940px){
    nav.links{
      position:fixed; inset:64px 16px auto 16px; flex-direction:column; align-items:stretch;
      background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
      padding:10px; box-shadow:var(--shadow);
      display:none;
    }
    nav.links.open{display:flex;}
    nav.links a{padding:12px 14px;}
    .menu-toggle{display:flex;}
  }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 24px; border-radius:12px; font-weight:600; font-size:.95rem;
    cursor:pointer; border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--blue); color:#fff; box-shadow:0 10px 24px -10px rgba(52,87,213,.6);}
  .btn-gold{background:var(--gold); color:#241705;}
  .btn-outline{background:var(--surface); color:var(--ink); border-color:var(--line);}
  .btn-sm{padding:9px 16px; font-size:.85rem; border-radius:9px;}

  .hero{padding:76px 0; position:relative; overflow:hidden;}
  .hero::before{
    content:""; position:absolute; inset:-40% -10% auto -10%; height:520px;
    background:radial-gradient(ellipse at center, color-mix(in srgb, var(--blue) 16%, transparent), transparent 70%);
    z-index:-1;
  }
  .hero-split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
  @media (max-width:940px){ .hero-split{grid-template-columns:1fr; gap:40px; text-align:center;} }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:999px;
    background:var(--gold-soft); color:#8a5a12; font-size:.85rem; font-weight:800; letter-spacing:.03em;
    border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); margin-bottom:22px;
  }
  html.dark .eyebrow{ color:var(--gold); }
  .eyebrow-flag{font-size:1.3em; line-height:1;}
  .hero h1{font-size:clamp(1.6rem, 3.4vw, 2.3rem); margin:0 0 22px; line-height:1.35; font-weight:800;}
  .hero h1 .tw-line{display:inline-block; min-height:1.35em; vertical-align:bottom;}
  .hero h1 .tw-line.accent{color:var(--blue);}
  .typewriter-cursor{display:inline-block; margin-left:3px; color:var(--blue); font-weight:400; animation:caretBlink 1s steps(1) infinite;}
  @keyframes caretBlink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
  @media (prefers-reduced-motion: reduce){ .typewriter-cursor{animation:none;} }
  .hero p.lead{max-width:560px; margin:0 0 30px; color:var(--ink-soft); font-size:1.05rem;}
  @media (max-width:940px){ .hero p.lead{margin:0 auto 30px;} }
  .hero-ctas{display:flex; gap:24px; flex-wrap:wrap; align-items:center;}
  @media (max-width:940px){ .hero-ctas{justify-content:center;} }
  .hero-socials{display:flex; gap:24px;}
  .social-btn{
    width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow); transition:transform .15s ease;
  }
  .social-btn:hover{ transform:translateY(-2px); }
  .social-btn svg{width:20px; height:20px; fill:#fff;}
  .social-btn.fb{background:#1877F2;}
  .social-btn.tg{background:#26A5E4;}
  .social-btn.yt{background:#FF0000;}
  .tg-join-btn{ display:inline-flex; align-items:center; gap:10px; }
  .tg-join-btn svg{width:20px; height:20px; fill:#26A5E4;}

  .hero-code-card{
    background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden;
    box-shadow:var(--shadow); width:100%; max-width:440px; margin:0 auto;
  }
  .hero-code-head{
    display:flex; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--line);
    font-weight:700; font-size:.95rem;
  }
  .hero-code-head .dot{width:12px; height:12px; border-radius:50%; background:var(--blue); flex-shrink:0;}
  .hero-code-card pre{
    margin:0 auto; padding:22px; font-family:'Fira Code', monospace; font-size:.82rem; line-height:1.9;
    direction:ltr; text-align:left; white-space:pre-wrap; color:var(--ink); overflow-x:auto;
    width:fit-content; max-width:100%;
  }
  .hero-code-card .kw{color:var(--blue);}
  .hero-code-card .str{color:#C77B1F;}
  html.dark .hero-code-card .str{color:#F2B056;}
  @media (max-width:940px){ .hero-code-card{max-width:340px;} }

  section{padding:84px 0;}
  section.alt{background:var(--surface-alt);}
  .section-head{max-width:640px; margin:0 auto 46px; text-align:center;}
  .section-head .tag{color:var(--blue); font-weight:700; font-size:.85rem; letter-spacing:.04em;}
  .section-head h2{font-size:clamp(1.6rem, 3.4vw, 2.3rem); margin:10px 0 12px;}
  .section-head p{color:var(--ink-soft); margin:0;}

  .book-search-bar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin-bottom:28px;}
  .book-search-input{
    display:flex; align-items:center; gap:10px; flex:1; min-width:220px; max-width:340px;
    background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:12px 18px;
  }
  .book-search-input svg{width:18px; height:18px; color:var(--ink-soft); flex-shrink:0;}
  .book-search-input input{
    border:none; outline:none; background:transparent; width:100%; font-family:inherit;
    font-size:.92rem; color:var(--ink);
  }
  .book-filter-btns{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
  @media (max-width:760px){
    .book-search-bar{flex-direction:column; align-items:stretch;}
    .book-search-input{max-width:none;}
    .book-filter-btns{width:100%;}
  }
  .book-filter-btn{
    padding:11px 20px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
    color:var(--ink); font-weight:400; font-size:.85rem; cursor:pointer; white-space:nowrap;
    transition:transform .15s ease;
  }
  .book-filter-btn:hover{transform:translateY(-1px);}
  .book-filter-btn.active{background:var(--blue); color:#fff; border-color:transparent;}
  .book-no-results{text-align:center; color:var(--ink-soft); padding:30px 0; font-size:.95rem;}
  .book-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media (max-width:1024px){.book-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:640px){.book-grid{grid-template-columns:1fr;}}
  .book-card.book-card-hidden{display:none !important;}
  .book-more-wrap{display:flex; justify-content:center; margin-top:36px;}
  .book-more-wrap[hidden]{display:none;}
  .book-more-btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer;}
  .book-more-btn svg{width:16px; height:16px; transition:transform .2s ease;}
  .book-more-btn.expanded svg{transform:rotate(180deg);}
  .book-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
    box-sizing:border-box; width:100%;
  }
  .book-cover{
    height:172px; display:flex; align-items:center; justify-content:center;
    font-family:'Fira Code', monospace; font-weight:600; font-size:1.6rem; color:#fff;
  }
  .book-cover-icon{
    width:104px; height:104px; background:#fff; border-radius:24px; display:flex; align-items:center;
    justify-content:center; padding:19px; box-sizing:border-box; box-shadow:0 12px 26px -8px rgba(0,0,0,.35);
  }
  .book-cover-icon img, .book-cover-icon svg{width:100%; height:100%; object-fit:contain;}
  .book-body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1;}
  .book-body h3{margin:0; font-size:1.15rem;}
  .book-meta{display:flex; flex-wrap:wrap; gap:8px 14px; font-size:.8rem; color:var(--ink-soft); font-weight:600;}
  .book-meta span{display:inline-flex; align-items:center; gap:5px;}
  .book-meta svg{width:15px; height:15px; flex-shrink:0; stroke:var(--blue);}
  .book-body p{margin:0; color:var(--ink-soft); font-size:.88rem; flex:1;}
  .book-actions{display:flex; gap:10px; margin-top:6px;}

  .lang-marquee{
    overflow:hidden; margin-top:16px; display:flex; flex-direction:column; gap:22px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .lang-row{ display:flex; gap:22px; width:max-content; will-change:transform; }
  .lang-row.dir-right{ animation:marqueeRight 38s linear infinite; }
  .lang-row.dir-left{ animation:marqueeLeft 38s linear infinite; }
  @keyframes marqueeLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @keyframes marqueeRight{ from{transform:translateX(-50%);} to{transform:translateX(0);} }
  @media (prefers-reduced-motion: reduce){ .lang-row{ animation:none !important; } }
  .lang-item{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; width:100px; flex-shrink:0;}
  .lang-icon{
    width:76px; height:76px; border-radius:20px; background:var(--surface); border:1px solid var(--line);
    box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box;
  }
  .lang-icon img{width:100%; height:100%; object-fit:contain;}
  .lang-fallback{
    width:100%; height:100%; border-radius:10px; display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:.85rem; font-family:'Fira Code', monospace;
  }
  .lang-item span.lang-name{font-weight:700; font-size:.88rem; color:var(--ink-soft);}
  @media (max-width:600px){
    .lang-item{width:78px; gap:10px;}
    .lang-icon{width:58px; height:58px; border-radius:14px; padding:12px;}
    .lang-fallback{font-size:.68rem; border-radius:9px;}
    .lang-item span.lang-name{font-size:.78rem;}
  }
  .btn-read{
    width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 18px; border-radius:12px; font-weight:700; font-size:.95rem;
    background:linear-gradient(120deg, var(--blue), var(--blue-dark)); color:#fff;
    box-shadow:0 10px 22px -10px rgba(52,87,213,.6); cursor:pointer; border:none;
  }
  .btn-read:hover{ filter:brightness(1.05); }
  .btn-soon{
    background:var(--surface-alt); color:var(--ink-soft); box-shadow:none; cursor:default;
    border:1px solid var(--line);
  }
  .btn-soon:hover{ filter:none; }

  /* ---- Lesson popup modal ---- */
  .lesson-modal{
    position:fixed; inset:0; background:rgba(14,16,30,.6); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:300; padding:24px;
  }
  .lesson-modal.open{ display:flex; }
  .lesson-modal-inner{
    position:relative; background:#fff; width:min(1120px,96vw); height:min(88vh,920px);
    border-radius:18px; overflow:hidden; box-shadow:0 40px 90px -20px rgba(0,0,0,.45);
  }
  .lesson-modal-close{
    position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border-radius:10px;
    background:#fff; border:1px solid var(--line); cursor:pointer; font-size:1.05rem; color:var(--ink);
    box-shadow:0 6px 16px -8px rgba(0,0,0,.3);
  }
  .lesson-modal-inner iframe{ width:100%; height:100%; border:none; display:block; }
  @media (max-width:700px){
    .lesson-modal{ padding:0; }
    .lesson-modal-inner{ width:100vw; height:100vh; border-radius:0; }
  }

  .editor-shell{
    background:#1e1f2b; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden;
  }
  .editor-col{ display:flex; flex-direction:column; min-width:0; }
  .ide-topbar{ display:flex; align-items:center; justify-content:space-between; background:#26283a; border-bottom:1px solid #34364a; padding-right:12px; }
  .editor-tabs{display:flex; min-width:0; overflow-x:auto;}
  .tab-btn{
    display:flex; align-items:center; gap:8px; flex-shrink:0;
    padding:13px 18px; font-family:'Fira Code', monospace; font-size:.82rem; font-weight:500;
    color:#8f92ac; cursor:pointer; border:none; background:transparent; border-bottom:2px solid transparent;
  }
  .tab-btn.active{color:#fff; border-color:var(--blue); background:#1e1f2b;}
  .tab-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
  .dot-html{background:#e67e22;} .dot-css{background:#3b93d4;} .dot-js{background:#e8c339;}
  .tab-label-short{display:none;}
  @media (max-width:520px){ .tab-label-full{display:none;} .tab-label-short{display:inline;} }
  .ide-run-btn{ padding:9px 18px; font-size:.85rem; border-radius:8px; flex-shrink:0; }
  .editor-body{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch;}
  @media (max-width:840px){.editor-body{grid-template-columns:1fr;}}
  .editor-pane{ position:relative; display:flex; flex:1; }
  .ide-gutter{
    flex-shrink:0; width:40px; padding:18px 8px; text-align:right; background:#1a1b26;
    font-family:'Fira Code', monospace; font-size:.85rem; line-height:1.6; color:#565979;
    user-select:none; overflow:hidden; white-space:pre;
  }
  .ide-textarea{
    flex:1; width:100%; height:336px; border:none; resize:none; padding:18px 16px;
    font-family:'Fira Code', monospace; font-size:.85rem; background:#1e1f2b; color:#e4e6f5;
    direction:ltr; text-align:left; line-height:1.6;
    -webkit-user-select:text; user-select:text; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  }
  @media (max-width:840px){ .ide-textarea{ font-size:16px; } }
  .ide-textarea:focus{outline:none; background:#22233263;}
  .ide-resize-handle{
    display:none; width:22px; align-items:center; justify-content:center; flex-wrap:wrap; gap:3px;
    background:#26283a; border-left:1px solid #34364a; border-right:1px solid #34364a; cursor:col-resize;
  }
  @media (min-width:841px){ .ide-resize-handle{display:flex;} }
  .ide-resize-handle span{width:3px; height:3px; border-radius:50%; background:#565979;}
  .preview-pane{ position:relative; background:#fff; }
  .ide-output-label{
    position:absolute; top:6px; left:10px; z-index:2;
    padding:7px 16px; font-family:'Kantumruy Pro', sans-serif; font-size:.85rem; font-weight:700;
    color:#fff; background:rgba(38,40,58,.82); border-radius:8px;
  }
  @media (max-width:840px){.preview-pane{border-top:1px solid #34364a;}}
  .preview-pane iframe{width:100%; height:336px; display:block; border:none; background:#fff;}

  .about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
  @media (max-width:900px){.about-grid{grid-template-columns:1fr;}}
  .about-grid h2{font-size:clamp(1.6rem,3.4vw,2.2rem); margin:0 0 18px;}
  .about-grid p{color:var(--ink-soft); margin:0 0 16px;}
  .stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
  .stat-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; text-align:center; box-shadow:var(--shadow);}
  .stat-card b{display:block; font-size:1.8rem; color:var(--blue); font-family:'Kantumruy Pro', sans-serif; font-weight:800;}
  .stat-card span{font-size:.82rem; color:var(--ink-soft);}
  .stat-icon{display:flex; align-items:center; justify-content:center;}
  .stat-icon svg{width:32px; height:32px;}

  .path-picker{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:52px;}
  .path-btn{
    width:340px; max-width:100%; padding:15px 26px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
    color:var(--ink); font-weight:500; font-size:.92rem; cursor:pointer; display:flex; align-items:center; gap:10px; justify-content:center;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .path-btn:hover{transform:translateY(-1px);}
  .path-btn .path-icon{width:19px; height:19px; flex-shrink:0; display:block;}
  .path-btn.active{background:linear-gradient(100deg, #4F6DF5, #8A5CFA); color:#fff; border-color:transparent; box-shadow:0 12px 26px -10px rgba(90,90,240,.55);}
  .timeline{position:relative; max-width:760px; margin:0 auto; padding-left:44px;}
  .timeline::before{content:""; position:absolute; left:17px; top:6px; bottom:6px; width:2px; background:var(--line);}
  .t-step{position:relative; margin-bottom:34px;}
  .t-step:last-child{margin-bottom:0;}
  .t-num{
    position:absolute; left:-44px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%;
    background:var(--surface); border:2px solid var(--blue); color:var(--blue); font-weight:700;
    display:flex; align-items:center; justify-content:center; font-family:'Fira Code',monospace; font-size:.9rem;
  }
  .t-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 24px; box-shadow:var(--shadow);}
  .t-card h4{margin:0 0 8px; font-size:1.08rem;}
  .t-card p{margin:0 0 14px; color:var(--ink-soft); font-size:.92rem;}
  .t-links{display:flex; gap:10px; flex-wrap:wrap;}
  .t-links a{
    font-size:.8rem; padding:7px 12px; border-radius:8px; background:var(--surface-alt);
    color:var(--blue-ink); font-weight:600; border:1px solid var(--line);
  }
  .t-links a:hover{border-color:var(--blue);}

  footer{border-top:1px solid var(--line); padding:56px 0 0; color:var(--ink-soft); font-size:.9rem;}
  .footer-grid{display:flex; justify-content:center; text-align:center; padding-bottom:44px;}
  .footer-grid > div{max-width:640px;}
  .footer-heading{margin:0 0 14px; font-size:1.05rem; font-weight:800; color:var(--ink); position:relative; padding-bottom:12px;}
  .footer-heading::after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:34px; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--blue), #8A5CFA);}
  .footer-about-text{margin:0 0 16px; line-height:1.8; font-size:.92rem;}
  .footer-copyright{margin:0; font-size:.82rem; color:var(--ink-soft); opacity:.85;}