:root{
    --paper:#FBFAF7; --card:#FFFFFF; --ink:#1A1718; --soft:#5E544F; --faint:#928678;
    --red:#D4213D; --red-deep:#A8162D; --amber:#E8A91D; --pink:#FCEDEF; --pinkline:#F3D7DC;
    --green:#2C6E54; --greenbg:#E7F1EC; --line:#ECE5DA; --bg2:#F4EFE7;
    --shadow:0 1px 2px rgba(26,23,24,.04), 0 8px 24px rgba(26,23,24,.05);
    --max:1160px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif; line-height:1.08; margin:0; font-weight:800; letter-spacing:-.01em}
  a{color:var(--red-deep)}
  ::selection{background:var(--pink)}
  :focus-visible{outline:2.5px solid var(--red); outline-offset:2px; border-radius:4px}
  button{font-family:inherit; cursor:pointer}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
  .pl{font-weight:600}
  .mono{font-family:'Spline Sans Mono',monospace; color:var(--soft); font-size:.86em}

  /* ---- top nav ---- */
  header.top{position:sticky; top:0; z-index:50; background:rgba(251,250,247,.86);
    backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line)}
  .top .wrap{display:flex; align-items:center; justify-content:space-between; height:62px}
  .brand{display:flex; align-items:center; gap:10px; font-family:'Bricolage Grotesque'; font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink); text-decoration:none}
  .brand .dot{width:11px;height:11px;border-radius:50%;background:var(--red); display:inline-block}
  .top nav{display:flex; gap:4px; align-items:center}
  .top nav a{font-size:14px; font-weight:600; color:var(--soft); text-decoration:none; padding:8px 12px; border-radius:8px}
  .top nav a:hover{background:var(--bg2); color:var(--ink)}
  .progress-pill{font-size:12.5px; font-weight:600; color:var(--soft); background:var(--bg2); padding:6px 11px; border-radius:20px; white-space:nowrap}
  .menu-btn{display:none; border:1px solid var(--line); background:var(--card); border-radius:9px; padding:7px 10px; font-size:14px; font-weight:600}

  /* ---- hero ---- */
  .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:
    radial-gradient(120% 80% at 85% -10%, var(--pink) 0%, transparent 55%),
    radial-gradient(90% 70% at -5% 110%, #FBF2DE 0%, transparent 50%)}
  .hero .wrap{display:grid; grid-template-columns:1.25fr .75fr; gap:34px; align-items:center; padding:74px 22px 84px}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--red-deep); background:var(--card); border:1px solid var(--pinkline); padding:6px 12px; border-radius:20px}
  .hero h1{font-size:clamp(40px,6vw,72px); margin:18px 0 0}
  .hero h1 .accent{color:var(--red)}
  .hero p.lead{font-size:19px; color:var(--soft); margin:20px 0 28px; max-width:33ch}
  .cta-row{display:flex; gap:12px; flex-wrap:wrap}
  .btn{display:inline-flex; align-items:center; gap:8px; border-radius:11px; padding:13px 20px; font-weight:600; font-size:15.5px; text-decoration:none; border:1px solid transparent}
  .btn-primary{background:var(--red); color:#fff}
  .btn-primary:hover{background:var(--red-deep)}
  .btn-ghost{background:var(--card); color:var(--ink); border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--ink)}
  .hero-stats{display:flex; gap:26px; margin-top:34px}
  .hero-stats div{display:flex; flex-direction:column}
  .hero-stats b{font-family:'Bricolage Grotesque'; font-size:26px; color:var(--ink)}
  .hero-stats span{font-size:13px; color:var(--faint)}
  .papercut{width:100%; max-width:330px; margin:0 auto; display:block}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .papercut{animation:float 7s ease-in-out infinite}

  /* ---- layout ---- */
  .layout{display:grid; grid-template-columns:248px 1fr; gap:40px; align-items:start; padding:48px 22px 80px; max-width:var(--max); margin:0 auto}
  aside.toc{position:sticky; top:78px; align-self:start}
  aside.toc h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:12px}
  aside.toc ol{list-style:none; margin:0; padding:0; counter-reset:l}
  aside.toc li{counter-increment:l}
  aside.toc a{display:flex; gap:10px; align-items:baseline; text-decoration:none; color:var(--soft); font-size:14.5px; font-weight:500; padding:8px 10px; border-radius:9px; border-left:2px solid transparent}
  aside.toc a::before{content:none}
  aside.toc a:hover{background:var(--bg2); color:var(--ink)}
  aside.toc a.active{background:var(--pink); color:var(--red-deep); border-left-color:var(--red); font-weight:600}
  aside.toc a.done .check{color:var(--green); margin-left:auto}
  main{min-width:0}

  /* ---- lessons ---- */
  .lesson{scroll-margin-top:80px; padding-bottom:50px; margin-bottom:50px; border-bottom:1px solid var(--line)}
  .lesson:last-child{border-bottom:none}
  .lesson .kicker{font-family:'Spline Sans Mono'; font-size:12.5px; color:var(--red); font-weight:500; letter-spacing:.04em}
  .lesson h2{font-size:clamp(28px,4vw,40px); margin:8px 0 6px}
  .lesson .sub{color:var(--soft); font-size:18px; margin-bottom:24px}
  .lesson p{color:#2c2724}
  .lesson h3{font-size:20px; margin:30px 0 12px}

  .note{background:var(--bg2); border-radius:14px; padding:16px 18px; margin:18px 0; font-size:15.5px; color:var(--soft); border:1px solid var(--line)}
  .note b{color:var(--ink)}
  .tip{background:var(--greenbg); border:1px solid #cfe4d8; color:#23533f}
  .tip b{color:#1c4634}

  /* example rows */
  .ex{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:12px; margin:8px 0}
  .ex .t{flex:1}
  .ex .t .p{font-weight:600; font-size:17px}
  .ex .t .e{color:var(--faint); font-size:14px}
  .ex .t .h{font-family:'Spline Sans Mono'; color:var(--soft); font-size:12.5px; margin-top:2px}
  .say{flex:none; width:38px; height:38px; border-radius:50%; border:none; background:var(--pink); color:var(--red-deep); display:inline-flex; align-items:center; justify-content:center}
  .say:hover{background:var(--red); color:#fff}
  .say svg{width:18px;height:18px}

  /* tables */
  table{width:100%; border-collapse:collapse; margin:16px 0; font-size:15px; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
  th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line)}
  th{background:var(--bg2); font-weight:600; font-size:13px; letter-spacing:.02em; color:var(--soft)}
  tr:last-child td{border-bottom:none}
  td .pl{color:var(--ink)}
  td small{color:var(--faint)}

  .chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}
  .chip{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:7px 13px; font-size:14px; display:inline-flex; align-items:center; gap:8px}
  .chip button{border:none; background:none; color:var(--red); padding:0; line-height:0}

  /* flashcards */
  .deck{margin:18px 0}
  .deck-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:13px; color:var(--faint)}
  .flip{position:relative; height:180px; perspective:1200px; cursor:pointer}
  .flip-inner{position:absolute; inset:0; transition:transform .5s; transform-style:preserve-3d}
  .flip.open .flip-inner{transform:rotateY(180deg)}
  .face{position:absolute; inset:0; backface-visibility:hidden; background:var(--card); border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px; box-shadow:var(--shadow)}
  .face .label{font-size:12px; color:var(--faint); margin-bottom:8px; text-transform:uppercase; letter-spacing:.06em}
  .face .word{font-family:'Bricolage Grotesque'; font-size:32px}
  .face.back{transform:rotateY(180deg)}
  .face.back .word{color:var(--red)}
  .face .h{font-family:'Spline Sans Mono'; color:var(--soft); font-size:13px; margin-top:8px}
  .deck-nav{display:flex; gap:10px; margin-top:12px}
  .deck-nav button{flex:1; border:1px solid var(--line); background:var(--card); border-radius:11px; padding:11px; font-weight:600; font-size:14px; color:var(--soft); display:inline-flex; align-items:center; justify-content:center; gap:6px}
  .deck-nav button.primary{background:var(--ink); color:#fff; border-color:var(--ink)}
  .deck-nav button:hover{border-color:var(--ink)}

  /* quiz */
  .quiz{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; margin:22px 0}
  .quiz h4{font-size:15px; color:var(--red); margin-bottom:4px; font-family:'Bricolage Grotesque'}
  .q{margin:16px 0}
  .q .stem{font-weight:600; margin-bottom:9px}
  .q .opt{display:block; width:100%; text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 13px; margin:6px 0; font-size:15px; color:var(--ink)}
  .q .opt:hover{border-color:var(--faint)}
  .q .opt.sel{border-color:var(--red); background:var(--pink)}
  .q .opt.right{border-color:var(--green); background:var(--greenbg); color:var(--green)}
  .q .opt.wrong{border-color:var(--red); background:var(--pink); color:var(--red-deep)}
  .q .why{font-size:13.5px; color:var(--soft); margin-top:6px; display:none}
  .q.checked .why{display:block}
  .quiz-foot{display:flex; align-items:center; gap:14px; margin-top:14px}
  .quiz-foot button{background:var(--green); color:#fff; border:none; border-radius:10px; padding:11px 18px; font-weight:600; font-size:14.5px}
  .quiz-foot .score{font-family:'Bricolage Grotesque'; font-weight:800; color:var(--ink)}

  .complete-row{display:flex; align-items:center; gap:12px; margin-top:8px}
  .mark{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--card); color:var(--soft); border-radius:11px; padding:11px 16px; font-weight:600; font-size:14.5px}
  .mark.on{background:var(--greenbg); border-color:#cfe4d8; color:var(--green)}

  /* syllabus cards */
  .syllabus{padding:14px 22px 4px}
  .syllabus h2{font-size:clamp(26px,4vw,36px); text-align:center; margin-bottom:6px}
  .syllabus .sub{text-align:center; color:var(--soft); margin-bottom:30px}
  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
  .scard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; text-decoration:none; color:inherit; display:block; transition:transform .15s, border-color .15s}
  .scard:hover{transform:translateY(-3px); border-color:var(--pinkline)}
  .scard .n{font-family:'Spline Sans Mono'; font-size:12px; color:var(--red)}
  .scard h3{font-size:18px; margin:6px 0 6px}
  .scard p{font-size:14px; color:var(--soft); margin:0}

  footer{border-top:1px solid var(--line); background:var(--bg2)}
  footer .wrap{padding:40px 22px; text-align:center; color:var(--soft); font-size:14.5px}
  footer .brand{justify-content:center; margin-bottom:10px}
  footer a{color:var(--red-deep)}

  /* mobile */
  @media (max-width:880px){
    .hero .wrap{grid-template-columns:1fr; padding:54px 22px 60px}
    .hero .art{order:-1; max-width:200px}
    .papercut{max-width:180px}
    .layout{grid-template-columns:1fr; gap:0}
    aside.toc{position:fixed; inset:62px 0 auto 0; z-index:40; background:var(--paper); border-bottom:1px solid var(--line); padding:14px 22px; max-height:70vh; overflow:auto; box-shadow:var(--shadow); display:none}
    aside.toc.open{display:block}
    aside.toc #tocList{display:grid; grid-template-columns:1fr 1fr; gap:2px}
    .menu-btn{display:none}
    .top nav#tabs{display:flex; overflow-x:auto; max-width:60vw}
    .tab{padding:8px 10px; font-size:13px; white-space:nowrap}
  }

  /* ---- ad slots ---- */
  .ad{max-width:var(--max); margin:8px auto 28px; padding:0 22px; text-align:center}
  .ad .label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
  .ad ins{display:block; min-height:90px}

  /* ---- privacy section ---- */
  .legal{max-width:760px; margin:0 auto; padding:50px 22px 10px}
  .legal h2{font-size:26px; margin-bottom:6px}
  .legal h3{font-size:17px; margin:22px 0 6px}
  .legal p{color:var(--soft); font-size:15px}
  .legal{border-top:1px solid var(--line)}

  /* ---- cookie banner ---- */
  .cookie{position:fixed; left:16px; right:16px; bottom:16px; z-index:60; max-width:560px; margin:0 auto;
    background:var(--ink); color:#fff; border-radius:14px; padding:16px 18px; box-shadow:0 10px 40px rgba(0,0,0,.25);
    display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:14px}
  .cookie p{margin:0; flex:1; min-width:200px; color:#EDE7E2}
  .cookie a{color:#FAD4DA}
  .cookie .btns{display:flex; gap:8px}
  .cookie button{border:none; border-radius:9px; padding:9px 15px; font-weight:600; font-size:13.5px; cursor:pointer}
  .cookie .ok{background:var(--red); color:#fff}
  .cookie .no{background:transparent; color:#CFC6BF; border:1px solid #4a4341}
  .cookie.hide{display:none}

  /* ---- level tests ---- */
  #tests{padding-bottom:10px}
  .tests-intro{max-width:var(--max); margin:0 auto; padding:46px 22px 0; text-align:center}
  .tests-intro h2{font-size:clamp(26px,4vw,36px)}
  .tests-intro p{color:var(--soft); max-width:52ch; margin:8px auto 0}
  .tests-wrap{max-width:820px; margin:24px auto 0; padding:0 22px; display:flex; flex-direction:column; gap:12px}
  .test{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden}
  .test-head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:none; padding:18px 20px; text-align:left}
  .test-head .ttl{font-family:'Bricolage Grotesque'; font-weight:800; font-size:18px; color:var(--ink)}
  .test-head .meta{display:block; font-family:'Inter'; font-weight:500; font-size:13px; color:var(--faint); margin-top:3px}
  .test-head .chev{color:var(--red); transition:transform .2s; flex:none}
  .test.open .test-head .chev{transform:rotate(90deg)}
  .test-body{display:none; padding:0 20px 22px; border-top:1px solid var(--line)}
  .test.open .test-body{display:block}
  .test-intro{color:var(--soft); font-size:14.5px; margin:14px 0 4px}
  .tq{margin:16px 0}
  .tq .stem{font-weight:600; margin-bottom:8px}
  .tq .opt{display:block; width:100%; text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 13px; margin:6px 0; font-size:15px; color:var(--ink)}
  .tq .opt:hover{border-color:var(--faint)}
  .tq .opt.sel{border-color:var(--red); background:var(--pink)}
  .tq .opt.right{border-color:var(--green); background:var(--greenbg); color:var(--green)}
  .tq .opt.wrong{border-color:var(--red); background:var(--pink); color:var(--red-deep)}
  .test-go{background:var(--ink); color:#fff; border:none; border-radius:11px; padding:12px 20px; font-weight:600; font-size:15px; margin-top:8px}
  .result{display:none; margin-top:18px}
  .result.show{display:block}
  .levelbadge{display:inline-flex; align-items:center; gap:14px; background:var(--pink); border:1px solid var(--pinkline); border-radius:14px; padding:14px 20px}
  .levelbadge .lv{font-family:'Bricolage Grotesque'; font-weight:800; font-size:34px; color:var(--red); line-height:1}
  .levelbadge .sc{font-size:14px; color:var(--soft)}
  .result .rec{margin:14px 0 0; font-size:15px; color:#2c2724; line-height:1.55}
  .result .rec a{font-weight:600}
  /* result reveal + email capture */
  .gate{background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:20px; margin-top:18px}
  .gate-score{font-family:'Bricolage Grotesque'; font-weight:800; font-size:20px; color:var(--ink)}
  .gate-msg{font-size:14.5px; color:var(--soft); margin:8px 0 14px}
  .cap-head{font-family:'Bricolage Grotesque'; font-size:18px; margin-bottom:4px}
  .cap-sub{font-size:14px; color:var(--soft); margin:0 0 12px}
  .sent{margin-top:12px; font-size:14px; color:var(--green); font-weight:600}
  .cap .row{display:flex; gap:8px; flex-wrap:wrap}
  .cap input[type=email]{flex:1; min-width:200px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:15px; font-family:inherit; background:var(--card)}
  .cap .cap-send{background:var(--red); color:#fff; border:none; border-radius:10px; padding:12px 20px; font-weight:600; font-size:15px}
  .cap .cap-send:hover{background:var(--red-deep)}
  .cap .cap-send:disabled{opacity:.55}
  .cap .consent{display:flex; gap:8px; align-items:flex-start; margin-top:11px; font-size:12.5px; color:var(--soft); line-height:1.45}
  .cap .consent input{margin-top:2px; flex:none}
  .cap .cap-msg{font-size:13.5px; color:var(--green); margin-top:9px; min-height:1em}
  .lvtag{display:inline-block; background:var(--red); color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em; border-radius:6px; padding:3px 8px; vertical-align:middle}
  .syl-modhead{grid-column:1/-1; font-family:'Bricolage Grotesque'; font-weight:800; font-size:21px; color:var(--ink); margin:20px 0 2px}
  .syl-modhead .muted{color:var(--faint); font-weight:500; font-size:15px}
  .scard .num{font-family:'Spline Sans Mono'; font-size:12px; color:var(--red)}
  .toc-modhead{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--red); font-weight:700; margin:16px 0 6px}
  #tocList > .toc-modhead:first-child{margin-top:0}
  .course-modhead{margin:6px 0 24px; padding-bottom:14px; border-bottom:2px solid var(--pinkline)}
  .course-modhead h3{font-family:'Bricolage Grotesque'; font-size:26px; margin:8px 0 2px}
  .course-modhead p{color:var(--soft); font-size:15px; margin:0}
  .ptlist{list-style:none; margin:14px 0; padding:0}
  .ptlist li{display:flex; gap:8px; font-size:14.5px; color:#221c17; line-height:1.5; margin:7px 0}
  .ptlist .bul{color:var(--amber); font-weight:700}
  .lesson h3{font-size:18px; margin:24px 0 8px}
  /* ---- practice & games ---- */
  #practice{padding-bottom:10px}
  .practice-wrap{max-width:760px; margin:22px auto 0; padding:0 22px}
  .pchips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:14px}
  .pchips button{border:1px solid var(--line); background:var(--card); border-radius:20px; padding:7px 14px; font-size:13.5px; font-weight:600; color:var(--soft)}
  .pchips button.on{background:var(--red); color:#fff; border-color:var(--red)}
  .seg{display:flex; gap:6px; background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:5px; margin-bottom:16px; flex-wrap:wrap}
  .seg button{flex:1; min-width:90px; border:none; background:none; border-radius:10px; padding:10px 8px; font-size:14px; font-weight:600; color:var(--soft)}
  .seg button.on{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}
  .practice-area{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; min-height:260px}
  .parea-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:13.5px; color:var(--faint)}
  .parea-head .score{font-family:'Bricolage Grotesque'; font-weight:800; color:var(--ink); font-size:15px}
  .pbtn{border:none; border-radius:10px; padding:10px 16px; font-weight:600; font-size:14px; cursor:pointer}
  .pbtn-red{background:var(--red); color:#fff} .pbtn-red:hover{background:var(--red-deep)}
  .pbtn-ghost{background:var(--bg2); color:var(--soft); border:1px solid var(--line)}
  /* match */
  .match-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .match-col{display:flex; flex-direction:column; gap:8px}
  .mcard{border:1px solid var(--line); background:var(--paper); border-radius:11px; padding:13px 12px; font-size:15px; font-weight:600; color:var(--ink); text-align:center; transition:.12s}
  .mcard:hover{border-color:var(--faint)}
  .mcard.sel{border-color:var(--red); background:var(--pink)}
  .mcard.done{border-color:var(--green); background:var(--greenbg); color:var(--green); pointer-events:none; opacity:.65}
  .mcard.bad{border-color:var(--red); background:var(--redBg, var(--pink)); animation:shake .3s}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
  /* memory */
  .mem-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
  .memcard{aspect-ratio:3/2.4; border:none; border-radius:12px; background:var(--ink); color:#fff; font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; text-align:center; padding:4px; cursor:pointer}
  .memcard.up{background:var(--card); color:var(--ink); border:1px solid var(--line)}
  .memcard.done{background:var(--greenbg); color:var(--green); border:1px solid #cfe4d8; cursor:default}
  /* listen */
  .listen-mid{text-align:center}
  .play-big{width:84px; height:84px; border-radius:50%; border:none; background:var(--red); color:#fff; font-size:34px; cursor:pointer; margin:6px auto 4px; display:flex; align-items:center; justify-content:center}
  .play-big:hover{background:var(--red-deep)}
  .listen-opts{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:16px}
  .lopt{border:1px solid var(--line); background:var(--paper); border-radius:11px; padding:13px; font-size:15px; font-weight:600; color:var(--ink)}
  .lopt:hover{border-color:var(--faint)}
  .lopt.right{border-color:var(--green); background:var(--greenbg); color:var(--green)}
  .lopt.wrong{border-color:var(--red); background:var(--pink); color:var(--red-deep)}
  .pdone{text-align:center; padding:24px 10px}
  .pdone .big{font-family:'Bricolage Grotesque'; font-weight:800; font-size:30px; color:var(--red)}
  @media (max-width:560px){ .mem-grid{grid-template-columns:repeat(3,1fr)} }
  /* ---- app tabs ---- */
  .top nav#tabs{display:flex; gap:4px; align-items:center}
  .tab{border:none; background:none; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--soft); padding:8px 14px; border-radius:9px; cursor:pointer}
  .tab:hover{background:var(--bg2); color:var(--ink)}
  .tab.on{background:var(--pink); color:var(--red-deep)}
  /* (multi-page: no data-view hiding) */
  /* ---- home ---- */
  .home-extra{padding:6px 22px 54px}
  .home-h{text-align:center; font-size:clamp(24px,4vw,32px); margin-bottom:24px}
  .home-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:880px; margin:0 auto 14px}
  .step{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px}
  .step-n{display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:50%; background:var(--red); color:#fff; font-weight:700; font-family:'Bricolage Grotesque'; margin-bottom:10px}
  .step h3{font-size:17px; margin-bottom:4px}
  .step p{font-size:14px; color:var(--soft); margin:0}
  .qstart{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:880px; margin:14px auto 0}
  .qcard{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; cursor:pointer; transition:transform .15s,border-color .15s}
  .qcard:hover{transform:translateY(-3px); border-color:var(--pinkline)}
  .qcard .qico{font-size:26px; margin-bottom:6px}
  .qcard b{font-family:'Bricolage Grotesque'; font-size:17px; color:var(--ink)}
  .qcard span:last-child{font-size:13.5px; color:var(--faint)}
  /* ---- course accordion ---- */
  .course-wrap{max-width:840px; margin:0 auto; padding:38px 22px 80px}
  .lesson.lac{padding:0; margin:0 0 10px; border:1px solid var(--line); border-radius:14px; overflow:hidden; scroll-margin-top:74px}
  .lac-head{width:100%; display:flex; align-items:center; gap:12px; background:none; border:none; padding:15px 18px; text-align:left; cursor:pointer}
  .lac-num{font-family:'Spline Sans Mono'; font-size:12px; color:var(--red); flex:none}
  .lac-t{font-family:'Bricolage Grotesque'; font-weight:800; font-size:16.5px; color:var(--ink); flex:1; line-height:1.2}
  .lac-chev{color:var(--red); font-size:22px; line-height:1; transition:transform .2s; flex:none}
  .lac.open .lac-chev{transform:rotate(90deg)}
  .lac-body{display:none; padding:2px 18px 18px; border-top:1px solid var(--line)}
  .lac.open .lac-body{display:block}
  .lac-body .sub{margin-top:14px}
  .lmore{font-size:15px; color:#2c2724; line-height:1.62; margin:12px 0}
  .tactic{background:var(--greenbg); border:1px solid #cfe4d8; border-radius:12px; padding:13px 15px; margin:16px 0; font-size:14.5px; color:#23533f; line-height:1.55}
  .tactic b{color:#1c4634}
  .watch{background:#FBEFE1; border:1px solid #F0D9BC; border-radius:12px; padding:13px 15px; margin:16px 0; font-size:14.5px; color:#7a5320; line-height:1.55}
  .watch b{color:#5d3f12}
  .lac-body table{margin:14px 0}
  .free-line{font-size:14px; color:var(--green); font-weight:600; margin-top:14px}
  .support{padding:6px 22px 60px}
  .support-card{max-width:820px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px 26px}
  .support-card h2{font-size:clamp(24px,4vw,32px); text-align:center}
  .support-lead{font-size:18px; color:var(--soft); text-align:center; margin:12px auto 0; max-width:48ch}
  .support-card > p{color:#2c2724; line-height:1.65; font-size:15px; margin:16px auto 0; max-width:62ch; text-align:center}
  .support-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px}
  .sup{background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:18px; text-align:center; display:flex; flex-direction:column; align-items:center}
  .sup-ico{font-size:30px}
  .sup h3{font-size:17px; margin:8px 0 4px}
  .sup p{font-size:13.5px; color:var(--soft); margin:0 0 12px; line-height:1.5}
  .share-row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
  .share-links{display:flex; gap:14px; justify-content:center; margin-top:10px}
  .share-links a{font-size:13px; font-weight:600; color:var(--red-deep); text-decoration:none}
  .share-links a:hover{text-decoration:underline}
  .copy-msg{font-size:12.5px; color:var(--green); margin-top:8px; min-height:1em}
  @media (max-width:760px){ .support-grid{grid-template-columns:1fr} }
  .tenses-cap{font-size:13.5px; color:var(--soft); margin:16px 0 4px; font-weight:600}
  .ttab td.tp{color:var(--faint); font-size:13px; font-weight:600}
  .ttab th{font-size:11.5px}
  .ttab td{font-size:13.5px}
  #tabele{padding-bottom:46px}
  .tab-wrap{max-width:880px; margin:22px auto 0; padding:0 22px}
  .tbl-scroll{max-height:64vh; overflow:auto; border:1px solid var(--line); border-radius:14px}
  .tbl-scroll table{margin:0; border:none; border-radius:0}
  .tbl-scroll thead th{position:sticky; top:0; background:var(--bg2); z-index:1}
  .tbl-search{width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:15px; font-family:inherit; margin-bottom:10px; background:var(--card)}
  .gender-h{font-family:'Bricolage Grotesque'; font-weight:800; font-size:19px; margin:22px 0 8px; display:flex; align-items:center; gap:8px}
  .tnote{font-size:13px; color:var(--faint); margin:4px 0 12px}
  #tabeleArea .say{width:26px; height:26px}
  #tabeleArea .say svg{width:14px; height:14px}

  /* ---- static quiz (multi-page) ---- */
  .quizbox{margin:22px 0 6px; padding:18px; background:var(--bg2); border:1px solid var(--line); border-radius:16px}
  .quizbox h3{font-size:16px; margin:0 0 12px}
  .quiz-q{margin-bottom:16px}
  .quiz-q:last-child{margin-bottom:0}
  .quiz-stem{font-weight:600; margin:0 0 8px; font-size:15px}
  .quiz-opt{display:block; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 13px; margin:6px 0; font-family:inherit; font-size:14.5px; cursor:pointer}
  .quiz-opt:hover{border-color:var(--pinkline)}
  .quiz-opt.right{background:var(--greenbg); border-color:#bcdccb; color:#1c4634; font-weight:600}
  .quiz-opt.wrong{background:#FBE6E6; border-color:#f0c4c4; color:#8a2b2b}
  .quiz-opt:disabled{cursor:default}
  .quiz-why{display:none; font-size:13.5px; color:var(--soft); margin:8px 0 0; padding-left:12px; border-left:3px solid var(--pinkline)}
  .quiz-why.show{display:block}
  /* ---- breadcrumb + lesson nav ---- */
  .crumb{font-size:13px; color:var(--faint); margin:0 0 14px}
  .crumb a{color:var(--red-deep); text-decoration:none}
  .crumb a:hover{text-decoration:underline}
  .lesson-page{max-width:760px; margin:0 auto; padding:30px 22px 70px}
  .lesson-page h1{font-family:'Bricolage Grotesque'; font-size:clamp(26px,5vw,38px); line-height:1.1; margin:4px 0 6px}
  .lesson-kicker{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red)}
  .lnav{display:flex; justify-content:space-between; gap:12px; margin-top:34px; border-top:1px solid var(--line); padding-top:18px}
  .lnav a{flex:1; text-decoration:none; color:var(--ink); font-size:14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card)}
  .lnav a:hover{border-color:var(--pinkline)}
  .lnav a.next{text-align:right}
  .lnav span{display:block; font-size:11px; color:var(--faint)}
  .hub{max-width:840px; margin:0 auto; padding:30px 22px 70px}
  .hub-mod{margin:26px 0 10px; display:flex; align-items:center; gap:10px}
  .hub-mod h2{font-size:20px; margin:0}
  .hub-list{display:grid; gap:8px}
  .hub-item{display:flex; gap:14px; align-items:baseline; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; color:var(--ink)}
  .hub-item:hover{border-color:var(--pinkline)}
  .hub-num{font-family:'Spline Sans Mono'; font-size:12px; color:var(--red); flex:none}
  .hub-item b{font-family:'Bricolage Grotesque'; font-size:16px; display:block}
  .hub-item p{margin:3px 0 0; font-size:13.5px; color:var(--soft)}
  .tab{ text-decoration:none; display:inline-block }

  /* ---- multi-page games / flashcards / cookie ---- */
  .deck{margin:10px 0}
  .fcard{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:18px;text-align:center}
  .fc-pl{font-family:'Bricolage Grotesque';font-weight:800;font-size:26px;color:var(--ink)}
  .fc-pron{font-family:'Spline Sans Mono';font-size:12px;color:var(--faint);margin-top:4px}
  .fc-en{margin-top:12px;font-size:18px;color:var(--green);border-top:1px dashed var(--line);padding-top:12px}
  .fcard .say{margin-top:8px}
  .fc-ctrl{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
  .fc-count{font-size:12px;color:var(--faint);margin-left:6px}
  .match{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px;margin:0 auto}
  .mcol{display:grid;gap:8px}
  .mtile{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-family:inherit;font-size:15px;cursor:pointer}
  .mtile.sel{border-color:var(--red);background:var(--pink)}
  .mtile.ok{background:var(--greenbg);border-color:#bcdccb;color:#1c4634}
  .mtile.bad{background:#FBE6E6;border-color:#f0c4c4}
  .mtile:disabled{opacity:.55;cursor:default}
  .memgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:460px;margin:0 auto}
  .memc{aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:13px;cursor:pointer;padding:4px}
  .memc.up{background:var(--pink);border-color:var(--pinkline)}
  .memc.done{background:var(--greenbg);border-color:#bcdccb;color:#1c4634;opacity:.6}
  .lcenter{text-align:center;margin:14px 0}
  .lopts{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px;margin:0 auto}
  .lopt{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-family:inherit;font-size:15px;cursor:pointer}
  .lopt.ok{background:var(--greenbg);border-color:#bcdccb;color:#1c4634}
  .lopt.bad{background:#FBE6E6;border-color:#f0c4c4}
  .ghint{text-align:center;color:var(--soft);font-size:14px;margin:6px 0 14px}
  .gdone{text-align:center;margin-top:16px;font-size:15px}
  .games-head,.tests-intro{text-align:center;padding:24px 22px 0}
  .games-head h1,.tests-intro h1{font-size:clamp(26px,5vw,34px);margin:0 0 6px}
  .quiz-opt.sel{border-color:var(--red);background:var(--pink)}
  .tq{margin-bottom:18px}
  .tgate{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
  .tgate h3{margin:0 0 8px}
  #tabModes{margin-bottom:14px}
  .cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:680px;margin:0 auto;background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;display:flex;gap:12px;align-items:center;justify-content:space-between;z-index:50;font-size:13.5px}
  .cookie a{color:#fff;text-decoration:underline}
  .cookie .pbtn{flex:none;background:#fff;color:var(--ink)}

  /* ---- practice drills ---- */
  .drillbox{margin:22px 0 6px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:16px}
  .drillbox h3{font-size:16px;margin:0 0 4px}
  .drillbox .dsub{font-size:13px;color:var(--faint);margin:0 0 14px}
  .drill{margin:0 0 16px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
  .drill:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
  .drill-q{font-weight:600;margin:0 0 8px;font-size:15px}
  .drill-in{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
  .drill-input{flex:1;min-width:150px;border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-family:inherit;font-size:15px;background:var(--bg2)}
  .drill-input.ok{border-color:#bcdccb;background:var(--greenbg)}
  .drill-input.almost{border-color:#e6c98a;background:#FBF3E1}
  .drill-input.bad{border-color:#f0c4c4;background:#FBE6E6}
  .drill-fb{font-size:14px;margin:8px 0 0;min-height:1px}
  .drill-fb.ok{color:#1c4634}.drill-fb.almost{color:#7a5320}.drill-fb.bad{color:#8a2b2b}
  .order-bank,.order-built{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
  .order-built{min-height:42px;border:1px dashed var(--line);border-radius:10px;padding:6px}
  .order-built.ok{border-color:#bcdccb;background:var(--greenbg)}
  .order-built.bad{border-color:#f0c4c4;background:#FBE6E6}
  .order-bank button,.order-built button{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);font-family:inherit;font-size:15px;cursor:pointer}
  .order-built button{background:var(--pink);border-color:var(--pinkline)}

  /* ============ futuristic navbar ============ */
  .top{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 20px;background:rgba(251,250,247,.72);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(26,23,24,.07);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 30px -22px rgba(26,23,24,.6)}
  .top::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(212,33,61,.55),rgba(240,162,58,.5),transparent);opacity:.85}
  .brand{display:flex;align-items:center;gap:9px;font-family:'Bricolage Grotesque';font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
  .brand .dot{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#ff6075,#d4213d 62%,#9d1129);box-shadow:0 0 0 3px rgba(212,33,61,.14),0 0 12px rgba(212,33,61,.55)}
  #tabs{display:flex;gap:2px;align-items:center;background:rgba(26,23,24,.045);border:1px solid rgba(26,23,24,.06);padding:4px;border-radius:14px;max-width:none}
  .tab{position:relative;border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;color:#6b6360;padding:8px 13px;border-radius:10px;cursor:pointer;text-decoration:none;white-space:nowrap;display:inline-block;transition:color .18s,background .18s,box-shadow .18s,transform .12s}
  .tab:hover{color:var(--ink);background:rgba(255,255,255,.8)}
  .tab:active{transform:translateY(1px)}
  .tab.on{color:#fff;background:linear-gradient(135deg,#e8455f,#cf1b38);box-shadow:0 6px 18px -6px rgba(212,33,61,.6),0 0 0 1px rgba(212,33,61,.25),0 0 14px -4px rgba(212,33,61,.5)}
  .tab-support{color:#c01934}
  .tab-support:hover{background:rgba(212,33,61,.09)}
  .tab-support.on{background:linear-gradient(135deg,#f4a83f,#e8455f)}
  @media(max-width:880px){
    .top{padding:8px 12px}
    .top nav#tabs{display:flex;overflow-x:auto;max-width:64vw;background:none;border:none;padding:0;gap:2px;scrollbar-width:none}
    #tabs::-webkit-scrollbar{display:none}
    .tab{font-size:12.5px;padding:7px 10px}
    .tab.on{box-shadow:0 4px 12px -5px rgba(212,33,61,.6)}
    .brand{font-size:16px}
  }
  /* ---- support page extras ---- */
  .support-mini{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(212,33,61,.06),rgba(240,162,58,.07));border:1px solid var(--line);border-radius:18px;padding:22px 24px}
  .support-mini h2{margin:0 0 4px;font-size:22px}
  .support-mini p{margin:0;color:var(--soft);font-size:14.5px;max-width:54ch}
  .support-thanks{text-align:center;font-family:'Bricolage Grotesque';font-weight:700;font-size:18px;color:var(--green);margin:22px 0 0}