:root{
    --bg:#12181A;
    --panel:#1B2424;
    --panel-2:#212C2B;
    --line:#33423F;
    --brass:#C9A227;
    --brass-soft:#E4C766;
    --brass-dim:#7A611E;
    --oxblood:#B33951;
    --moss:#6BA98C;
    --paper:#F3ECDD;
    --paper-2:#ECE1C7;
    --paper-ink:#2A2118;
    --text:#EDE7DA;
    --text-dim:#8FA098;
    --normal:#6BA98C;
    --medium:#C9A227;
    --hard:#B33951;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:
      radial-gradient(1100px 550px at 10% -10%, rgba(201,162,39,0.08), transparent 60%),
      radial-gradient(900px 480px at 100% 6%, rgba(179,57,81,0.07), transparent 60%),
      var(--bg);
    color:var(--text);font-family:'Noto Sans Devanagari','Manrope',sans-serif;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  h1,h2,h3,.display{font-family:'Noto Serif Devanagari',serif;font-weight:600;letter-spacing:0;}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
  @media (prefers-reduced-motion: reduce){*{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}}

  .topbar{position:sticky;top:0;z-index:50;background:rgba(18,24,26,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
  .topbar-inner{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;font-family:'Manrope',sans-serif;}
  .logo .key{width:30px;height:30px;border-radius:7px;background:linear-gradient(160deg,#2A3532,var(--panel));border:1px solid var(--brass-dim);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:0.8rem;color:var(--brass-soft);box-shadow:0 2px 0 var(--line);}
  .layout-pills{display:flex;gap:6px;flex-wrap:wrap;}
  .pill{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text-dim);font-size:0.88rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s;}
  .pill.active{background:var(--brass);color:#211A0E;border-color:var(--brass);}
  .pill:not(.active):hover{border-color:var(--brass-dim);color:var(--text);}
  .pill.locked{opacity:.5;cursor:not-allowed;}

  .hero{padding:60px 0 34px;position:relative;overflow:hidden;}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:36px;}
  .eyebrow{font-family:'JetBrains Mono',monospace;color:var(--brass-soft);font-size:0.78rem;letter-spacing:0.1em;display:flex;align-items:center;gap:8px;margin-bottom:16px;}
  .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brass-soft);box-shadow:0 0 10px var(--brass-soft);}
  .hero h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.25;margin:0 0 18px;font-weight:600;}
  .hero h1 span{color:var(--brass-soft);text-decoration:underline wavy var(--oxblood) 2px;text-underline-offset:8px;}
  .hero p.sub{color:var(--text-dim);font-size:1.1rem;line-height:1.75;max-width:580px;margin:0 0 28px;}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
  .btn{padding:15px 27px;border-radius:9px;border:none;font-weight:700;font-size:1.02rem;cursor:pointer;font-family:'Noto Sans Devanagari',sans-serif;transition:transform .12s, box-shadow .12s;}
  .btn-primary{background:linear-gradient(160deg,var(--brass-soft),var(--brass));color:#211A0E;box-shadow:0 4px 0 var(--brass-dim);}
  .btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--brass-dim);}
  .btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--line);}
  .btn-ghost:hover{border-color:var(--brass-dim);}
  .otg-note{display:flex;gap:10px;align-items:flex-start;margin-top:22px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:8px;padding:13px 15px;max-width:560px;font-size:0.88rem;color:var(--text-dim);}
  .otg-note b{color:var(--brass-soft);}

  .demo-card{position:relative;background:var(--paper) radial-gradient(rgba(42,33,24,0.05) 1px, transparent 1.4px) 0 0/7px 7px;color:var(--paper-ink);border-radius:8px;padding:30px 24px 24px;transform:rotate(-0.5deg);box-shadow:0 26px 55px -22px rgba(0,0,0,0.6);}
  .demo-card::before{content:"लाइव सैंपल";position:absolute;top:-11px;left:24px;background:var(--oxblood);color:var(--paper);font-family:'Noto Sans Devanagari',sans-serif;font-size:0.72rem;font-weight:700;padding:4px 11px;border-radius:4px;box-shadow:0 4px 10px rgba(0,0,0,0.35);}
  .demo-text{font-family:'Noto Sans Devanagari',sans-serif;font-size:1.25rem;line-height:2;color:rgba(42,33,24,0.45);min-height:56px;margin-bottom:16px;}
  .demo-text .typed{color:var(--oxblood);}
  .demo-text .cursor{display:inline-block;width:2px;background:var(--paper-ink);animation:blink 1s step-end infinite;}
  @keyframes blink{50%{opacity:0;}}
  .demo-stats{display:flex;gap:24px;margin-bottom:18px;}
  .stat{font-family:'JetBrains Mono',monospace;}
  .stat b{display:block;font-size:1.5rem;color:var(--paper-ink);}
  .stat span{font-size:0.68rem;color:rgba(42,33,24,0.55);font-family:'Noto Sans Devanagari',sans-serif;}

  .kb{display:flex;flex-direction:column;gap:6px;user-select:none;}
  .kb-row{display:flex;gap:6px;justify-content:center;}
  .key{background:linear-gradient(160deg,#2A3532,#1A211F);border:1px solid var(--line);border-bottom:3px solid #0D1211;border-radius:7px;min-width:36px;height:42px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Noto Sans Devanagari',sans-serif;font-weight:600;font-size:0.92rem;color:var(--text);transition:all .06s;position:relative;line-height:1.1;}
  .key .shift-legend{font-size:0.58rem;color:var(--text-dim);}
  .key.space-key{flex:6;}
  .key.active-key{background:linear-gradient(160deg,var(--brass-soft),var(--brass));color:#211A0E;border-color:var(--brass);transform:translateY(1px);border-bottom-width:1px;box-shadow:0 0 14px rgba(201,162,39,0.5);}
  .key.active-key .shift-legend{color:#4a3a10;}
  .kb-panel{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .kb{min-width:560px;}
  .shift-hint{display:none;text-align:center;margin-top:10px;font-size:0.8rem;color:var(--brass-soft);font-weight:700;}
  .shift-hint.show{display:block;}

  .ad-slot{max-width:1080px;margin:34px auto;padding:0 20px;}
  .ad-slot-inner{border:1px dashed var(--line);border-radius:10px;min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:0.75rem;font-family:'JetBrains Mono',monospace;letter-spacing:0.06em;text-transform:uppercase;background:rgba(255,255,255,0.015);}

  section{padding:36px 0;}
  .section-head{margin-bottom:24px;}
  .section-head h2{font-size:1.95rem;margin:0 0 8px;font-weight:600;}
  .section-head p{color:var(--text-dim);margin:0;font-size:1.02rem;}

  .level-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap;}
  .level-tab{padding:10px 20px;border-radius:9px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-weight:700;font-size:0.92rem;display:flex;align-items:center;gap:9px;color:var(--text-dim);}
  .level-tab .dot{width:9px;height:9px;border-radius:50%;}
  .level-tab[data-level="normal"] .dot{background:var(--normal);}
  .level-tab[data-level="medium"] .dot{background:var(--medium);}
  .level-tab[data-level="hard"] .dot{background:var(--hard);}
  .level-tab.active{border-color:var(--brass-dim);color:var(--text);background:var(--panel-2);}

  .lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
  .lesson-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brass-dim);border-radius:10px;padding:18px;cursor:pointer;transition:border-color .15s, transform .12s, box-shadow .15s;position:relative;box-shadow:0 10px 26px -16px rgba(0,0,0,0.55);}
  .lesson-card:hover{border-left-color:var(--brass);transform:translateY(-3px);box-shadow:0 16px 34px -16px rgba(0,0,0,0.6);}
  .lesson-card.active{border-color:var(--brass);border-left-color:var(--brass);background:var(--panel-2);}
  .lesson-card .lnum{font-family:'JetBrains Mono',monospace;color:var(--brass-soft);font-size:0.78rem;margin-bottom:9px;display:flex;align-items:center;gap:6px;}
  .lesson-card .lnum .tag{padding:2px 8px;border-radius:6px;font-size:0.66rem;background:var(--panel-2);color:var(--text-dim);font-family:'Noto Sans Devanagari',sans-serif;}
  .lesson-card h3{font-size:1.08rem;margin:0 0 5px;font-weight:600;font-family:'Noto Serif Devanagari',serif;}
  .lesson-card p{font-size:0.85rem;color:var(--text-dim);margin:0;}
  .lesson-card .best{margin-top:11px;font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:var(--brass-soft);}

  .practice-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 24px 60px -24px rgba(0,0,0,0.6);}
  .practice-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:20px;}
  .mode-tabs{display:flex;gap:8px;background:var(--bg);padding:4px;border-radius:9px;border:1px solid var(--line);}
  .mode-tab{padding:9px 18px;border-radius:7px;font-size:0.92rem;font-weight:700;cursor:pointer;color:var(--text-dim);white-space:nowrap;}
  .mode-tab.active{background:var(--brass);color:#211A0E;}
  .test-config{display:flex;gap:8px;flex-wrap:wrap;}
  .test-config .grp{display:flex;gap:6px;flex-wrap:wrap;}
  .test-config button{padding:8px 13px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--text-dim);font-family:'Noto Sans Devanagari',sans-serif;font-size:0.85rem;cursor:pointer;}
  .test-config button.active{border-color:var(--moss);color:var(--moss);}

  .type-field{background:var(--paper) radial-gradient(rgba(42,33,24,0.05) 1px, transparent 1.4px) 0 0/7px 7px;border:1px solid var(--brass-dim);border-radius:8px;padding:24px;font-family:'Noto Sans Devanagari',sans-serif;font-size:1.4rem;line-height:2.2;min-height:130px;max-height:260px;overflow-y:auto;margin-bottom:18px;outline:none;white-space:normal;overflow-wrap:break-word;word-break:break-word;}
  .ch-pending{color:rgba(42,33,24,0.4);}
  .ch-correct{color:var(--paper-ink);}
  .ch-wrong{color:var(--oxblood);background:rgba(179,57,81,0.16);border-radius:3px;}
  .ch-current{background:var(--brass-soft);color:#211A0E;border-radius:3px;}

  .paragraph-mode-wrap{display:none;margin-bottom:18px;}
  .paragraph-mode-wrap.show{display:block;}
  .pm-label{font-size:0.75rem;color:var(--text-dim);margin-bottom:8px;font-family:'Noto Sans Devanagari',sans-serif;font-weight:600;}
  .paragraph-box{background:var(--paper) radial-gradient(rgba(42,33,24,0.05) 1px, transparent 1.4px) 0 0/7px 7px;border:1px solid var(--brass-dim);border-radius:8px;padding:24px;font-family:'Noto Sans Devanagari',sans-serif;font-size:1.3rem;line-height:2.1;color:rgba(42,33,24,0.42);margin-bottom:16px;white-space:normal;overflow-wrap:break-word;word-break:break-word;max-height:230px;overflow-y:auto;}
  .paragraph-box .pb-current{background:var(--brass-soft);border-radius:3px;box-shadow:0 0 0 1px var(--brass);color:#211A0E;}
  .paragraph-box .pb-done{color:var(--paper-ink);}
  .paragraph-box .pb-wrong{color:var(--oxblood);background:rgba(179,57,81,0.18);border-radius:3px;}
  .typed-box{background:var(--paper-2) radial-gradient(rgba(42,33,24,0.05) 1px, transparent 1.4px) 0 0/7px 7px;border:1.5px solid var(--brass-dim);border-radius:8px;padding:24px;font-family:'Noto Sans Devanagari',sans-serif;font-size:1.3rem;line-height:2.1;min-height:84px;outline:none;cursor:text;white-space:normal;overflow-wrap:break-word;word-break:break-word;max-height:230px;overflow-y:auto;}
  .typed-box.focused{border-color:var(--brass);box-shadow:0 0 0 3px rgba(201,162,39,0.2);}
  .typed-box .tb-word-ok{color:var(--paper-ink);}
  .typed-box .tb-word-wrong{color:var(--oxblood);background:rgba(179,57,81,0.18);border-radius:3px;}
  .typed-box .tb-space{color:var(--paper-ink);}
  .typed-box .tb-cursor{display:inline-block;width:2px;height:1.1em;background:var(--paper-ink);vertical-align:middle;animation:blink 1s step-end infinite;}
  .typed-box .tb-placeholder{color:rgba(42,33,24,0.45);font-style:italic;}
  .type-field.focused{border-color:var(--brass);box-shadow:0 0 0 3px rgba(201,162,39,0.2);}

  .hidden-input{position:absolute;opacity:0;height:0;width:0;pointer-events:none;}

  .live-stats{display:flex;gap:30px;margin-bottom:20px;flex-wrap:wrap;}
  .liv b{font-size:1.95rem;color:var(--brass-soft);}
  .liv span{display:block;font-size:0.72rem;color:var(--text-dim);}

  .kb-panel{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;}
  .finger-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:0.7rem;color:var(--text-dim);}
  .finger-legend span{display:flex;align-items:center;gap:5px;}
  .dot9{width:9px;height:9px;border-radius:50%;display:inline-block;}

  .result-wrap{display:none;text-align:center;padding:20px 0;}
  .result-wrap.show{display:block;}
  .best-badge{display:none;background:linear-gradient(120deg,var(--brass-soft),var(--brass));color:#211A0E;font-weight:700;font-size:0.95rem;padding:8px 18px;border-radius:999px;margin:0 auto 16px;max-width:fit-content;box-shadow:0 6px 20px -6px rgba(201,162,39,0.6);animation:pop .4s ease;}
  .best-badge.show{display:block;}
  @keyframes pop{from{transform:scale(0.7);opacity:0;} to{transform:scale(1);opacity:1;}}
  .result-big{font-size:clamp(3rem,10vw,4.7rem);font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--brass-soft);line-height:1;margin-bottom:4px;}
  .result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:480px;margin:22px auto;}
  .result-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 8px;}
  .result-box b{display:block;font-size:1.5rem;font-family:'JetBrains Mono',monospace;color:var(--moss);}
  .result-box span{font-size:0.72rem;color:var(--text-dim);}

  footer{border-top:1px solid var(--line);padding:32px 0;margin-top:44px;color:var(--text-dim);font-size:0.85rem;text-align:center;}

  @media (min-width:860px){.hero-grid{grid-template-columns:1fr 1fr;align-items:center;}}

  @media (max-width:640px){
    .wrap{padding:0 14px;}
    .hero{padding:28px 0 20px;}
    .hero h1{font-size:1.5rem;}
    .hero p.sub{font-size:0.92rem;}
    .btn{padding:12px 16px;font-size:0.9rem;flex:1 1 auto;text-align:center;}
    .otg-note{font-size:0.78rem;padding:10px 12px;}
    .demo-card{padding:20px 16px 16px;transform:none;}
    .demo-text{font-size:1rem;min-height:44px;}
    .stat b{font-size:1.15rem;}
    .topbar-inner{padding:10px 14px;}
    .logo{font-size:0.9rem;}
    .pill{padding:5px 10px;font-size:0.72rem;}
    section{padding:22px 0;}
    .section-head h2{font-size:1.35rem;}
    .section-head p{font-size:0.86rem;}
    .level-tab{padding:7px 12px;font-size:0.8rem;}
    .lesson-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
    .lesson-card{padding:11px;}
    .lesson-card h3{font-size:0.9rem;}
    .lesson-card p{font-size:0.7rem;}
    .practice-card{padding:14px;border-radius:14px;}
    .mode-tab{padding:7px 12px;font-size:0.8rem;}
    .test-config{gap:6px;width:100%;}
    .test-config .grp{width:100%;justify-content:flex-start;}
    .test-config button{padding:6px 9px;font-size:0.72rem;}
    .live-stats{gap:12px;margin-bottom:14px;}
    .liv b{font-size:1.2rem;}
    .type-field{padding:14px;font-size:1.05rem;line-height:1.95;max-height:180px;}
    .paragraph-box, .typed-box{padding:14px;font-size:1rem;line-height:1.95;max-height:150px;}
    .kb-panel{padding:10px;}
    .kb{min-width:500px;}
    .key{min-width:28px;height:36px;font-size:0.78rem;}
    .kb-row{gap:3px;}
    .finger-legend{font-size:0.6rem;gap:6px;}
    .result-big{font-size:2.7rem;}
    .result-grid{gap:8px;}
    .result-box{padding:12px 4px;}
    .result-box b{font-size:1.2rem;}
    .ad-slot{margin:20px auto;}
    .ad-slot-inner{min-height:60px;font-size:0.65rem;}
  }
  @media (max-width:380px){
    .hero h1{font-size:1.3rem;}
    .btn{font-size:0.84rem;padding:11px 12px;}
    .lesson-grid{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));}
  }