:root{
    /* ===== token system ===== */
    --parchment:      #F3ECD8;
    --parchment-deep: #E7DAB2;
    --parchment-card: #FBF7EA;
    --ink:             #241813;
    --ink-soft:        #4A3B30;
    --maroon:          #6B1E1E;
    --maroon-deep:     #4A1414;
    --gold:            #B8862E;
    --gold-light:      #D9AE5F;
    --leaf:            #2F4B3C;
    --leaf-deep:       #1F332A;
    --cream-white:     #FBF8EF;
    --hole:            #C9B98A;

    --font-kn-display: 'Noto Sans Kannada', sans-serif;
    --font-kn-body:    'Noto Sans Kannada', sans-serif;
    --font-kn-logo:    'Anek Kannada', sans-serif;
    --font-en-display: 'Google Sans Flex', sans-serif;
    --font-en-body:    'Noto Sans', sans-serif;

    --radius: 6px;
    --max-w: 1180px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }

  body{
    background: var(--parchment);
    color: var(--ink);
    font-family: var(--font-en-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background-image:
      radial-gradient(circle at 20% 10%, rgba(107,30,30,0.03), transparent 40%),
      radial-gradient(circle at 85% 30%, rgba(47,75,60,0.04), transparent 45%);
  }

  a{ color: inherit; text-decoration:none; }
  ul{ list-style:none; }
  img,svg{ display:block; max-width:100%; }

  .wrap{ max-width: var(--max-w); margin:0 auto; padding:0 32px; }

  :focus-visible{
    outline: 2px solid var(--maroon);
    outline-offset: 3px;
  }

  /* ===== fibre texture used on cards / strips ===== */
  .fibre{
    background-image: repeating-linear-gradient(
      180deg,
      rgba(107,30,30,0.035) 0px,
      rgba(107,30,30,0.035) 1px,
      transparent 1px,
      transparent 7px
    );
  }

  /* ===== stitching hole, the signature motif ===== */
  .hole{
    width: 14px; height:14px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 35%, var(--parchment) 0%, var(--hole) 55%, #8a7a4d 100%);
    box-shadow: inset 0 0 0 1px rgba(36,24,19,0.25);
    flex-shrink:0;
  }

  /* =========================================
     HEADER
  ========================================== */
  header{
    position: sticky; top:0; z-index: 50;
    background: rgba(243,236,216,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(36,24,19,0.12);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    height: 78px;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
  }
  .logo .kn-logo{
    font-family: var(--font-kn-logo);
    font-weight:700; font-size: 1.6rem;
    color: var(--maroon-deep);
    line-height:1;
  }
  .logo .en-badge{
    flex-shrink:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:42px; height:42px;
    border: 1.5px solid var(--maroon-deep);
    border-radius: 6px;
    font-family: var(--font-en-body);
    font-weight:700;
    color: var(--maroon-deep);
    text-transform:uppercase;
    line-height:1.15;
  }
  .logo .en-badge .l1{ font-size:0.6rem; letter-spacing:.01em; }
  .logo .en-badge .l2{ font-size:0.54rem; letter-spacing:.02em; opacity:0.82; }
  nav.primary{ display:flex; align-items:center; gap: 34px; }
  nav.primary a{
    font-size: 0.95rem;
    font-weight:500;
    color: var(--ink-soft);
    display:flex; flex-direction:column; align-items:center;
    line-height:1.2;
    padding: 4px 0;
    position:relative;
  }
  nav.primary a .kn{ font-family: var(--font-kn-body); font-size:1rem; color:var(--ink); }
  nav.primary a .en{ font-size:0.68rem; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); }
  nav.primary a::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background: var(--gold); transform: scaleX(0); transition: transform .25s ease;
  }
  nav.primary a:hover::after{ transform: scaleX(1); }
  nav.primary a.active .en{ color: var(--maroon-deep); }
  nav.primary a.active::after{ transform: scaleX(1); }

  /* -- "Learn" dropdown in the primary nav -- */
  .nav-dropdown{ position:relative; }
  .nav-dropdown-btn{
    background:transparent; border:none; font: inherit; color: inherit; cursor:pointer;
    display:flex; flex-direction:column; align-items:center;
    line-height:1.2; padding: 4px 0; position:relative;
  }
  .nav-dropdown-btn .kn{ font-family: var(--font-kn-body); font-size:1rem; color: var(--ink); }
  .nav-dropdown-btn .en-row{ display:flex; align-items:center; gap:3px; }
  .nav-dropdown-btn .en{ font-size:0.68rem; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); }
  .nav-dropdown-btn .chev{ width:9px; height:9px; color: var(--ink-soft); transition: transform .15s ease; }
  .nav-dropdown.is-open .nav-dropdown-btn .chev{ transform: rotate(180deg); }
  .nav-dropdown-btn::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background: var(--gold); transform: scaleX(0); transition: transform .25s ease;
  }
  .nav-dropdown-btn:hover::after{ transform: scaleX(1); }
  .nav-dropdown.is-open .nav-dropdown-btn::after{ transform: scaleX(1); }
  .nav-dropdown-btn.active .en{ color: var(--maroon-deep); }
  .nav-dropdown-btn.active::after{ transform: scaleX(1); }

  .nav-dropdown-panel{
    position:absolute; top: calc(100% + 16px); left:50%; transform:translateX(-50%);
    width: 300px;
    background: var(--parchment-card);
    border: 1px solid rgba(36,24,19,0.14);
    border-radius: 12px;
    box-shadow: 0 20px 40px -18px rgba(36,24,19,0.4);
    padding: 8px;
    display:none;
    flex-direction:column;
    gap: 2px;
    z-index: 60;
  }
  .nav-dropdown.is-open .nav-dropdown-panel{ display:flex; }
  .nav-dropdown-item{
    display:flex; align-items:flex-start; gap:12px;
    padding: 10px 12px; border-radius: 8px;
    transition: background .15s ease;
  }
  .nav-dropdown-item:hover{ background: var(--parchment-deep); }
  .nav-dropdown-item.active{ background: rgba(107,30,30,0.07); }
  .ndi-glyph{
    font-family: var(--font-kn-body); font-size:1.1rem; color: var(--maroon-deep);
    width:34px; height:34px; border-radius:9px; flex-shrink:0;
    background: rgba(107,30,30,0.08);
    display:flex; align-items:center; justify-content:center;
  }
  .ndi-text{ display:flex; flex-direction:column; gap:2px; padding-top:2px; }
  .ndi-title{ font-family: var(--font-en-body); font-weight:600; font-size:0.9rem; color: var(--ink); }
  .ndi-desc{ font-size:0.76rem; color: var(--ink-soft); line-height:1.3; }

  .auth-actions{ display:flex; align-items:center; gap:14px; }
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding: 10px 22px;
    border-radius: var(--radius);
    font-weight:600; font-size:0.92rem;
    cursor:pointer; border:1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn-ghost{
    color: var(--maroon-deep);
    border-color: rgba(107,30,30,0.35);
    background: transparent;
  }
  .btn-ghost:hover{ background: rgba(107,30,30,0.06); }
  .btn-solid{
    background: var(--maroon-deep);
    color: var(--cream-white);
  }
  .btn-solid:hover{ background: var(--maroon); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(74,20,20,0.28); }

  .menu-toggle{
    display:none; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:10px;
    border:1px solid rgba(36,24,19,0.18); background: var(--parchment-card); color: var(--ink);
    cursor:pointer; transition: background .15s ease;
  }
  .menu-toggle:hover{ background: var(--parchment-deep); }
  .menu-toggle svg{ width:19px; height:19px; }
  .menu-toggle .icon-close{ display:none; }
  .menu-toggle.is-open .icon-menu{ display:none; }
  .menu-toggle.is-open .icon-close{ display:block; }

  /* =========================================
     MOBILE DRAWER
  ========================================== */
  .drawer-backdrop{
    position:fixed; inset:0; background: rgba(36,24,19,0.45);
    opacity:0; pointer-events:none; transition: opacity .3s ease; z-index:190;
  }
  .drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }
  .mobile-drawer{
    position:fixed; top:0; right:0; bottom:0; width:min(320px, 86vw);
    background: var(--parchment); box-shadow: -24px 0 60px rgba(36,24,19,0.3);
    z-index:195; transform:translateX(100%); transition: transform .32s ease;
    display:flex; flex-direction:column; overflow-y:auto;
  }
  .mobile-drawer.is-open{ transform:translateX(0); }
  .drawer-head{
    display:flex; align-items:center; justify-content:space-between; padding:18px;
    border-bottom:1px solid rgba(36,24,19,0.12); flex-shrink:0;
  }
  .drawer-close-btn{
    width:34px; height:34px; border-radius:50%; border:1px solid rgba(36,24,19,0.18);
    background: var(--parchment-card); display:flex; align-items:center; justify-content:center;
    cursor:pointer; color: var(--ink-soft); transition: background .15s ease;
  }
  .drawer-close-btn:hover{ background: var(--parchment-deep); }
  .drawer-close-btn svg{ width:15px; height:15px; }
  .drawer-nav{ padding:10px 10px; flex:1; display:flex; flex-direction:column; }
  .drawer-group-label{
    font-size:0.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
    color: var(--ink-soft); padding:14px 12px 6px;
  }
  .drawer-link{
    display:flex; align-items:center; gap:12px;
    padding:12px 12px; border-radius:8px; font-weight:500; font-size:0.95rem; color: var(--ink);
  }
  .drawer-link:hover{ background: var(--parchment-deep); }
  .drawer-link.active{ background: rgba(107,30,30,0.08); color: var(--maroon-deep); font-weight:600; }
  .drawer-link .kn{ font-family: var(--font-kn-body); width:26px; text-align:center; color: var(--maroon-deep); flex-shrink:0; }
  .drawer-divider{ height:1px; background: rgba(36,24,19,0.1); margin:8px 12px; }
  .drawer-foot{ padding:14px 18px 22px; border-top:1px solid rgba(36,24,19,0.12); display:flex; flex-direction:column; gap:10px; }
  .drawer-user{ display:flex; align-items:center; gap:12px; padding:16px 18px 22px; border-top:1px solid rgba(36,24,19,0.12); }
  .drawer-user .avatar{
    width:36px; height:36px; border-radius:50%; background: var(--maroon-deep); color: var(--cream-white);
    display:flex; align-items:center; justify-content:center; font-family: var(--font-en-display); font-weight:600; font-size:0.9rem; flex-shrink:0;
  }
  .drawer-user .du-name{ font-size:0.88rem; font-weight:600; color: var(--ink); }
  .drawer-user .du-link{ font-size:0.8rem; color: var(--maroon-deep); font-weight:600; }

  /* =========================================
     EYEBROW BADGE (shared across many pages)
     a small stitched tag, echoing the cord-and-hole binding of a
     manuscript strip, rather than a generic rule-line label
  ========================================== */
  .eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase;
    color: var(--maroon-deep); font-weight:600;
    margin-bottom: 20px;
    padding: 7px 16px 7px 12px;
    border: 1px dashed rgba(107,30,30,0.4);
    border-radius: 20px;
    background: rgba(107,30,30,0.045);
  }
  .eyebrow::before{
    content:"";
    width:7px; height:7px; border-radius:50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,134,46,0.16);
    flex-shrink:0;
  }
  .eyebrow .kn{ font-family: var(--font-kn-body); text-transform:none; letter-spacing:normal; }

  /* shared palm-leaf strip component (index hero + signin/signup brand panel) */
  .leaf-strip{
    background: linear-gradient(180deg, var(--parchment-card), var(--parchment-deep));
    border: 1px solid rgba(36,24,19,0.15);
    border-radius: 10px;
    padding: 28px 24px;
    display:flex; align-items:center; gap:14px;
    box-shadow: 0 18px 40px -18px rgba(36,24,19,0.35);
    transform: rotate(-2deg);
  }
  .leaf-strip + .leaf-strip{ margin-top:16px; transform: rotate(1.3deg); }
  .leaf-strip:nth-child(3){ transform: rotate(-1deg); }
  .leaf-strip .glyph{
    font-family: var(--font-kn-display);
    font-size: 2rem;
    color: var(--maroon-deep);
    flex-shrink:0;
    width: 46px; text-align:center;
  }
  .leaf-strip .cord{
    flex:1; height:1px;
    background: repeating-linear-gradient(90deg, rgba(36,24,19,0.35) 0 6px, transparent 6px 11px);
  }
  .leaf-strip .romanized{
    font-family: var(--font-en-body);
    font-size: 0.82rem;
    color: var(--ink-soft);
    letter-spacing:.04em;
    flex-shrink:0;
  }

  /* =========================================
     SECTION HEADINGS (shared)
  ========================================== */
  .section{ padding: 96px 0; }
  .section-head{ max-width: 620px; margin-bottom: 56px; }
  .section-head .eyebrow{ margin-bottom: 14px; }
  .section-head h2{
    font-family: var(--font-en-display);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight:600;
    color: var(--ink);
    margin-bottom: 14px;
  }
  .section-head p:not(.eyebrow){ color: var(--ink-soft); font-size:1.05rem; }

  /* =========================================
     FOOTER
  ========================================== */
  footer{
    background: var(--parchment-deep);
    border-top:1px solid rgba(36,24,19,0.12);
    padding: 56px 0 28px;
  }
  .footer-grid{
    display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px; margin-bottom: 40px;
  }
  .footer-grid .logo{ margin-bottom: 14px; }
  .footer-grid p.desc{ color: var(--ink-soft); font-size:0.9rem; max-width:32ch; }
  .footer-col h5{ font-size:0.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); margin-bottom:14px;}
  .footer-col ul{ display:flex; flex-direction:column; gap:10px; }
  .footer-col a{ font-size:0.92rem; color: var(--ink); }
  .footer-col a:hover{ color: var(--maroon-deep); }
  .footer-bottom{
    border-top:1px solid rgba(36,24,19,0.12);
    padding-top:22px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    font-size:0.82rem; color: var(--ink-soft);
  }

  /* =========================================
     PAGE HEADER (used on inner pages: alphabets, words, etc.)
  ========================================== */
  .page-header{
    padding: 56px 0 48px;
    border-bottom: 1px solid rgba(36,24,19,0.12);
  }
  .page-header h1{
    font-family: var(--font-en-display);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight:600;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .page-header h1 .kn{ font-family: var(--font-kn-display); font-size: 0.62em; display:block; color: var(--maroon-deep); margin-bottom:6px; }
  .page-header p.lede{ color: var(--ink-soft); font-size:1.08rem; max-width: 62ch; margin-bottom: 28px; }
  .page-header .hero-meta{ margin-top:4px; }

  /* =========================================
     SUB-NAV TABS (section jump links)
  ========================================== */
  .subnav{
    position: sticky; top: 78px; z-index: 40;
    background: rgba(243,236,216,0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(36,24,19,0.12);
  }
  .subnav-row{
    display:flex; gap: 8px; overflow-x:auto;
    padding: 14px 0;
    scrollbar-width: none;
  }
  .subnav-row::-webkit-scrollbar{ display:none; }
  .subnav-row a{
    flex-shrink:0;
    display:inline-flex; align-items:center; gap:8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.88rem; font-weight:600;
    color: var(--ink-soft);
    border: 1px solid rgba(36,24,19,0.15);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
  }
  .subnav-row a .kn{ font-family: var(--font-kn-body); }
  .subnav-row a:hover{ border-color: rgba(107,30,30,0.35); color: var(--maroon-deep); }
  .subnav-row a.active{
    background: var(--maroon-deep);
    border-color: var(--maroon-deep);
    color: var(--cream-white);
  }

  /* =========================================
     LETTER GROUPS + CARDS
  ========================================== */
  .letter-group{ padding: 64px 0; scroll-margin-top: 150px; }
  .letter-group:not(:last-of-type){ border-bottom: 1px solid rgba(36,24,19,0.1); }
  .group-head{
    display:flex; align-items:baseline; gap: 16px; margin-bottom: 30px; flex-wrap:wrap;
  }
  .group-head h2{
    font-family: var(--font-en-display);
    font-size: 1.7rem; font-weight:600; color: var(--ink);
  }
  .group-head .kn-label{
    font-family: var(--font-kn-body);
    font-size: 1.05rem; color: var(--maroon-deep);
  }
  .group-head .group-note{
    font-size: 0.88rem; color: var(--ink-soft);
    margin-left: auto;
  }

  /* teaser card linking onward to conjuncts/vowel-signs (future topic) */
  .teaser-strip{
    margin-top: 20px;
    display:flex; align-items:center; gap:16px;
    background: var(--parchment-deep);
    border: 1px dashed rgba(36,24,19,0.25);
    border-radius: var(--radius);
    padding: 20px 24px;
  }
  .teaser-strip .hole{ flex-shrink:0; }
  .teaser-strip p{ font-size:0.92rem; color: var(--ink-soft); flex:1; }
  .teaser-strip a{ font-size:0.88rem; font-weight:600; color: var(--maroon-deep); flex-shrink:0; }

  /* =========================================
     WORD SEARCH
  ========================================== */
  .word-search{
    display:flex; align-items:center; gap:10px;
    background: var(--parchment-card);
    border: 1px solid rgba(36,24,19,0.18);
    border-radius: 999px;
    padding: 12px 20px;
    max-width: 420px;
    margin-bottom: 4px;
  }
  .word-search svg{ width:16px; height:16px; color: var(--ink-soft); flex-shrink:0; }
  .word-search input{
    border:none; background:transparent; outline:none;
    font-family: var(--font-en-body);
    font-size: 0.95rem; color: var(--ink);
    width:100%;
  }
  .word-search input::placeholder{ color: rgba(74,59,48,0.55); }
  .search-empty{
    display:none; padding: 28px 0; color: var(--ink-soft); font-size:0.95rem;
  }
  .search-empty.show{ display:block; }

  /* =========================================
     WORD GROUPS + CARDS
  ========================================== */
  .word-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
  }
  .word-card{
    background: var(--parchment-card);
    border: 1px solid rgba(36,24,19,0.12);
    border-radius: var(--radius);
    padding: 18px 18px 16px;
    position:relative;
    display:flex; flex-direction:column; gap:4px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    opacity:0; transform: translateY(10px);
  }
  .word-card.in-view{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; }
  .word-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 26px -16px rgba(36,24,19,0.4);
    border-color: rgba(107,30,30,0.35);
  }
  .word-card .hole{ position:absolute; top:12px; right:12px; }
  .word-card .kn-word{
    font-family: var(--font-kn-body);
    font-size: 1.4rem; font-weight:600;
    color: var(--ink);
    padding-right: 20px;
  }
  .word-card .roman{
    font-family: var(--font-en-body);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ink-soft);
  }
  .word-card .meaning{
    font-weight:600; font-size:0.92rem; color: var(--maroon-deep);
    margin-top: 6px;
  }
  .word-card .play-btn{
    margin-top: 10px;
    align-self:flex-start;
    width: 28px; height:28px;
    border-radius:50%;
    border: 1px solid rgba(107,30,30,0.3);
    background: transparent;
    display:inline-flex; align-items:center; justify-content:center;
    color: var(--maroon-deep);
    transition: background .15s ease, color .15s ease;
  }
  .word-card .play-btn:hover{ background: var(--maroon-deep); color: var(--cream-white); }
  .word-card .play-btn svg{ width:11px; height:11px; }
  .word-card[data-href], .dict-entry[data-href]{ cursor:pointer; }
  .word-card .unsave-btn{
    position:absolute; top:10px; right:10px;
    width:26px; height:26px; border-radius:50%;
    border:none; background:transparent; color: var(--maroon-deep);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: background .15s ease;
  }
  .word-card .unsave-btn:hover{ background: rgba(107,30,30,0.08); }
  .word-card .unsave-btn svg{ width:14px; height:14px; }
  .word-card.is-removing{ opacity:0; transform: scale(.94); pointer-events:none; }

  /* =========================================
     AUTH PAGES (sign in / sign up)
  ========================================== */
  .auth-shell{ min-height:100vh; display:flex; flex-direction:column; }
  .auth-top{
    padding: 24px 32px;
    border-bottom: 1px solid rgba(36,24,19,0.1);
  }
  .auth-grid{
    flex:1;
    display:grid;
    grid-template-columns: 1fr 1fr;
  }

  /* -- left: brand panel -- */
  .auth-brand{
    background: var(--leaf-deep);
    color: var(--cream-white);
    padding: 64px 56px;
    position:relative;
    overflow:hidden;
    display:flex; flex-direction:column; justify-content:center;
  }
  .auth-brand::after{
    content:"ಕ"; position:absolute; right:-30px; bottom:-90px;
    font-family: var(--font-kn-display); font-size:22rem; line-height:1;
    color: rgba(251,248,239,0.045);
  }
  .auth-brand .eyebrow{
    color: var(--gold-light);
    border-color: rgba(217,174,95,0.35);
    background: rgba(251,248,239,0.05);
    position:relative;
  }
  .auth-brand .eyebrow::before{ background: var(--gold-light); box-shadow: 0 0 0 3px rgba(217,174,95,0.2); }
  .auth-brand h2{
    font-family: var(--font-en-display);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight:600;
    max-width: 14ch;
    margin-bottom: 16px;
    position:relative;
  }
  .auth-brand p.tag{
    color: rgba(251,248,239,0.75);
    max-width: 40ch;
    margin-bottom: 40px;
    position:relative;
  }
  .auth-brand .leaf-strip{
    background: rgba(251,248,239,0.06);
    border-color: rgba(251,248,239,0.15);
    box-shadow:none;
    position:relative;
  }
  .auth-brand .leaf-strip .glyph{ color: var(--gold-light); }
  .auth-brand .leaf-strip .romanized{ color: rgba(251,248,239,0.65); }
  .auth-brand .leaf-strip .cord{ background: repeating-linear-gradient(90deg, rgba(251,248,239,0.25) 0 6px, transparent 6px 11px); }
  .auth-brand .brand-stats{
    display:flex; gap:32px; margin-top:44px; position:relative;
  }
  .auth-brand .brand-stats div{ display:flex; flex-direction:column; }
  .auth-brand .brand-stats strong{ font-family: var(--font-en-display); font-size:1.6rem; color: var(--gold-light); }
  .auth-brand .brand-stats span{ font-size:0.78rem; color: rgba(251,248,239,0.7); text-transform:uppercase; letter-spacing:.05em; }

  /* -- right: form panel -- */
  .auth-form-wrap{
    display:flex; align-items:center; justify-content:center;
    padding: 56px 32px;
    background: var(--parchment);
  }
  .auth-card{ width:100%; max-width: 400px; }
  .auth-card h1{
    font-family: var(--font-en-display);
    font-size: 2rem; font-weight:600;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .auth-card .auth-sub{ color: var(--ink-soft); font-size:0.96rem; margin-bottom: 32px; }

  .form-group{ margin-bottom: 18px; display:flex; flex-direction:column; gap:6px; }
  .form-group label{ font-size:0.85rem; font-weight:600; color: var(--ink); }
  .form-group input{
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid rgba(36,24,19,0.22);
    background: var(--parchment-card);
    font-family: var(--font-en-body);
    font-size: 0.95rem;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .form-group input::placeholder{ color: rgba(74,59,48,0.5); }
  .form-group input:focus{
    outline:none;
    border-color: var(--maroon);
    box-shadow: 0 0 0 3px rgba(107,30,30,0.12);
  }
  .form-group .field-hint{ font-size:0.78rem; color: var(--ink-soft); }
  .otp-input{
    text-align:center;
    font-family: var(--font-en-display);
    font-size: 1.6rem;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
  }

  .password-field{ position:relative; }
  .password-field input{ padding-right: 44px; width:100%; }
  .password-toggle{
    position:absolute; right:8px; top:50%; transform: translateY(-50%);
    background:none; border:none; cursor:pointer;
    color: var(--ink-soft); padding:6px;
    display:flex; align-items:center; justify-content:center;
  }
  .password-toggle:hover{ color: var(--maroon-deep); }
  .password-toggle svg{ width:18px; height:18px; }
  .password-toggle .icon-off{ display:none; }
  .password-toggle.is-visible .icon-on{ display:none; }
  .password-toggle.is-visible .icon-off{ display:block; }

  .form-row-inline{
    display:flex; justify-content:space-between; align-items:center;
    font-size:0.85rem; margin-bottom:24px; margin-top:-4px;
  }
  .form-row-inline a{ color: var(--maroon-deep); font-weight:600; }

  .checkbox-row{
    display:flex; align-items:flex-start; gap:9px;
    font-size:0.84rem; color: var(--ink-soft);
    margin-bottom: 24px; line-height:1.45;
  }
  .checkbox-row input[type="checkbox"]{
    margin-top:3px; width:16px; height:16px; flex-shrink:0;
    accent-color: var(--maroon-deep);
  }
  .checkbox-row a{ color: var(--maroon-deep); font-weight:600; }

  .btn-block{ width:100%; justify-content:center; }

  .auth-divider{
    display:flex; align-items:center; gap:12px;
    margin: 26px 0;
    font-size:0.76rem; text-transform:uppercase; letter-spacing:.08em;
    color: var(--ink-soft);
  }
  .auth-divider::before, .auth-divider::after{
    content:""; flex:1; height:1px; background: rgba(36,24,19,0.15);
  }

  .btn-social{
    width:100%; justify-content:center; gap:10px;
    background: var(--parchment-card);
  }
  .btn-social:hover{ background: var(--parchment-deep); }
  .btn-social svg{ width:18px; height:18px; }

  .auth-switch{
    text-align:center; margin-top: 28px;
    font-size:0.9rem; color: var(--ink-soft);
  }
  .auth-switch a{ color: var(--maroon-deep); font-weight:600; }

  .form-error{
    display:none;
    background: rgba(107,30,30,0.08);
    border: 1px solid rgba(107,30,30,0.25);
    color: var(--maroon-deep);
    font-size: 0.85rem;
    padding: 12px 14px;
    border-radius: 6px;
    margin-bottom: 20px;
  }
  .form-error.show{ display:block; }

  .auth-closed-notice{
    background: rgba(184,134,46,0.12);
    border: 1px solid rgba(184,134,46,0.45);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 12px 14px;
    border-radius: 6px;
    margin-bottom: 20px;
  }
  .auth-closed-fields{ border:0; padding:0; margin:0; min-width:0; opacity:0.55; }
  .auth-closed-fields button{ cursor:not-allowed; }
  .auth-closed-fields a{ pointer-events:none; }

  /* =========================================
     BREADCRUMB
  ========================================== */
  .breadcrumb{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size: 0.85rem; color: var(--ink-soft);
    padding: 20px 0;
  }
  .breadcrumb a{ color: var(--ink-soft); }
  .breadcrumb a:hover{ color: var(--maroon-deep); }
  .breadcrumb .sep{ color: rgba(74,59,48,0.4); }
  .breadcrumb .current{ color: var(--ink); font-weight:600; }
  .breadcrumb .current .kn{ font-family: var(--font-kn-body); }

  /* =========================================
     WORD MEDALLION (shared: word-mane detail hero, topics featured card,
     dashboard "continue learning" card)
  ========================================== */
  .word-medallion{
    flex-shrink:0;
    width: 168px; height:168px;
    border-radius: 50%;
    background: var(--parchment-deep);
    border: 1px solid rgba(36,24,19,0.16);
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .word-medallion .hole{ position:absolute; top:16px; left:50%; transform:translateX(-50%); width:10px; height:10px; }
  .word-medallion .glyph{
    font-family: var(--font-kn-display);
    font-size: 4.2rem; color: var(--maroon-deep); line-height:1;
  }
  .word-medallion .medallion-play{
    position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
    width:40px; height:40px; border-radius:50%;
    background: var(--maroon-deep); color: var(--cream-white);
    border: 3px solid var(--parchment-card);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition: background .15s ease, transform .15s ease;
  }
  .word-medallion .medallion-play:hover{ background: var(--maroon); transform: translateX(-50%) scale(1.06); }
  .word-medallion .medallion-play svg{ width:15px; height:15px; }

  /* =========================================
     SAVE BUTTON (shared: dashboard-words, word-mane)
  ========================================== */
  .save-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 10px 18px;
    border-radius: var(--radius);
    border: 1px solid rgba(107,30,30,0.3);
    background: transparent;
    color: var(--maroon-deep);
    font-size:0.88rem; font-weight:600;
    cursor:pointer;
    transition: background .15s ease, color .15s ease;
  }
  .save-btn:hover{ background: rgba(107,30,30,0.06); }
  .save-btn.is-saved{ background: var(--maroon-deep); color: var(--cream-white); border-color: var(--maroon-deep); }
  .save-btn svg{ width:15px; height:15px; }
  .save-hint{ font-size:0.8rem; color: var(--ink-soft); }
  .save-hint a{ color: var(--maroon-deep); font-weight:600; }

  /* =========================================
     WORD CHIP (shared: dashboard "my words" widget, word-mane related words)
  ========================================== */
  .word-chip{
    display:inline-flex; align-items:baseline; gap:8px;
    background: var(--parchment-card);
    border: 1px solid rgba(36,24,19,0.14);
    border-radius: 999px;
    padding: 8px 16px;
    transition: border-color .15s ease, background .15s ease;
  }
  .word-chip:hover{ border-color: rgba(107,30,30,0.35); background: var(--parchment-deep); }
  .word-chip .kn{ font-family: var(--font-kn-body); color: var(--ink); font-size:0.98rem; }
  .word-chip .gloss{ font-size:0.8rem; color: var(--ink-soft); }

  .word-note{
    display:flex; gap:14px;
    background: rgba(184,134,46,0.08);
    border: 1px solid rgba(184,134,46,0.25);
    border-radius: var(--radius);
    padding: 16px 20px;
    font-size: 0.9rem; color: var(--ink-soft);
  }
  .word-note svg{ flex-shrink:0; width:18px; height:18px; color: var(--gold); margin-top:2px; }

  .discuss-cta{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    background: var(--parchment-card);
    border: 1px dashed rgba(36,24,19,0.25);
    border-radius: var(--radius);
    padding: 18px 24px;
    margin-top: 18px;
  }
  .discuss-cta p{ font-size:0.9rem; color: var(--ink-soft); }
  .discuss-cta .btn{ flex-shrink:0; }

  /* =========================================
     DIFFICULTY TAG (shared: topics, course, books level badges)
  ========================================== */
  .difficulty-tag{
    font-size:0.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600;
    padding: 3px 9px; border-radius: 10px;
  }
  .difficulty-tag.lvl-beginner{ color: var(--leaf-deep); background: rgba(47,75,60,0.1); }
  .difficulty-tag.lvl-intermediate{ color: #8a6415; background: rgba(184,134,46,0.14); }
  .difficulty-tag.lvl-advanced{ color: var(--maroon-deep); background: rgba(107,30,30,0.09); }

  /* =========================================
     DISCUSSION PRIMITIVES (shared: discussion, dashboard-discussions,
     dashboard-profile, dashboard-profile-2, profile, books, course,
     dashboard-words filter toolbars)
  ========================================== */
  .discuss-toolbar{ margin-bottom: 24px; }
  .filter-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
  .filter-pill{
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(36,24,19,0.18);
    background: var(--parchment-card);
    font-size: 0.85rem; font-weight:600;
    color: var(--ink-soft);
    cursor:pointer;
    display:inline-flex; align-items:center; gap:7px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .filter-pill .kn{ font-family: var(--font-kn-body); }
  .filter-pill:hover{ border-color: rgba(107,30,30,0.35); color: var(--maroon-deep); }
  .filter-pill.active{ background: var(--maroon-deep); border-color: var(--maroon-deep); color: var(--cream-white); }

  .thread-list{ display:flex; flex-direction:column; }
  .thread-card{
    display:flex; gap:16px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(36,24,19,0.12);
    opacity:0; transform: translateY(8px);
  }
  .thread-card.in-view{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; }
  .thread-card:first-of-type{ padding-top:0; }
  .thread-avatar{
    flex-shrink:0; width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-en-display); font-weight:600; font-size:1rem;
    color: var(--cream-white);
  }
  .thread-avatar.av-a{ background: var(--maroon-deep); }
  .thread-avatar.av-b{ background: var(--leaf-deep); }
  .thread-avatar.av-c{ background: var(--gold); color: var(--ink); }
  .thread-content{ flex:1; min-width:0; }
  .thread-meta-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
  .category-chip{
    font-size:0.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600;
    padding: 3px 9px; border-radius: 10px;
  }
  .category-chip.cat-maroon{ color: var(--maroon-deep); background: rgba(107,30,30,0.09); }
  .category-chip.cat-gold{ color: #8a6415; background: rgba(184,134,46,0.14); }
  .category-chip.cat-leaf{ color: var(--leaf-deep); background: rgba(47,75,60,0.1); }
  .thread-meta-row .byline{ font-size:0.8rem; color: var(--ink-soft); }
  .thread-content h3{ font-family: var(--font-en-display); font-size:1.05rem; font-weight:600; margin-bottom:6px; }
  .thread-content h3 a{ color: var(--ink); }
  .thread-content h3 a:hover{ color: var(--maroon-deep); }
  .thread-content p.snippet{ font-size:0.9rem; color: var(--ink-soft); margin-bottom:12px; }
  .thread-footer{ display:flex; gap:18px; align-items:center; }
  .thread-footer .stat{ display:inline-flex; align-items:center; gap:5px; font-size:0.8rem; color: var(--ink-soft); }
  .thread-footer .stat svg{ width:14px; height:14px; }

  .load-more-row{ text-align:center; margin-top:32px; }

  .sidebar-card{
    background: var(--parchment-card);
    border: 1px solid rgba(36,24,19,0.14);
    border-radius: var(--radius);
    padding: 22px 22px;
  }
  .sidebar-card h4{ font-family: var(--font-en-display); font-size:1rem; font-weight:600; margin-bottom:14px; color: var(--ink); }
  .sidebar-card p{ font-size:0.88rem; color: var(--ink-soft); margin-bottom:16px; }
  .sidebar-card.cta{ background: var(--leaf-deep); color: var(--cream-white); border-color: var(--leaf-deep); }
  .sidebar-card.cta h4{ color: var(--cream-white); }
  .sidebar-card.cta p{ color: rgba(251,248,239,0.78); }
  .sidebar-card.cta .btn-solid{ background: var(--gold); color: var(--leaf-deep); }
  .sidebar-card.cta .btn-solid:hover{ background: var(--gold-light); }
  .sidebar-card.cta .save-hint{ color: rgba(251,248,239,0.7); display:block; margin-top:12px; font-size:0.8rem; }
  .sidebar-card.cta .save-hint a{ color: var(--gold-light); }

  /* =========================================
     USER MENU (header, signed-in state)
  ========================================== */
  .user-menu{ position:relative; }
  .user-menu-btn{
    display:flex; align-items:center; gap:10px;
    background:transparent; border:none; cursor:pointer;
    padding: 4px 6px 4px 4px; border-radius: 999px;
    transition: background .15s ease;
  }
  .user-menu-btn:hover{ background: rgba(36,24,19,0.06); }
  .user-menu-btn .avatar{
    width:36px; height:36px; border-radius:50%;
    background: var(--maroon-deep); color: var(--cream-white);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-en-display); font-weight:600; font-size:0.95rem;
    flex-shrink:0;
  }
  .user-menu-btn .name{ font-size:0.88rem; font-weight:600; color: var(--ink); }
  .user-menu-btn .chev{ width:14px; height:14px; color: var(--ink-soft); transition: transform .15s ease; }
  .user-menu.is-open .user-menu-btn .chev{ transform: rotate(180deg); }
  .user-dropdown{
    position:absolute; top: calc(100% + 10px); right:0;
    width: 220px;
    background: var(--parchment-card);
    border: 1px solid rgba(36,24,19,0.14);
    border-radius: 10px;
    box-shadow: 0 18px 36px -16px rgba(36,24,19,0.35);
    padding: 8px;
    display:none;
    z-index: 60;
  }
  .user-menu.is-open .user-dropdown{ display:block; }
  .user-dropdown a{
    display:flex; align-items:center; gap:10px;
    padding: 10px 12px; border-radius:6px;
    font-size:0.88rem; color: var(--ink);
  }
  .user-dropdown a:hover{ background: var(--parchment-deep); }
  .user-dropdown a svg{ width:16px; height:16px; color: var(--ink-soft); flex-shrink:0; }
  .user-dropdown .divider{ height:1px; background: rgba(36,24,19,0.12); margin:6px 4px; }
  .user-dropdown a.signout{ color: var(--maroon-deep); }

  /* =========================================
     DASHBOARD SHELL
  ========================================== */
  .dash-body{
    display:grid;
    grid-template-columns: 232px 1fr;
    gap: 0;
    align-items:start;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
  }
  .dash-sidebar{
    position:sticky; top:78px;
    padding: 36px 20px 36px 0;
    display:flex; flex-direction:column; gap:2px;
    height: calc(100vh - 78px);
  }
  .dash-nav-link{
    display:flex; align-items:center; gap:12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size:0.9rem; font-weight:500;
    color: var(--ink-soft);
  }
  .dash-nav-link svg{ width:17px; height:17px; flex-shrink:0; }
  .dash-nav-link:hover{ background: rgba(36,24,19,0.05); color: var(--ink); }
  .dash-nav-link.active{ background: rgba(107,30,30,0.08); color: var(--maroon-deep); font-weight:600; }
  .dash-nav-divider{ height:1px; background: rgba(36,24,19,0.12); margin: 14px 14px; }

  .dash-main{
    padding: 36px 0 80px 40px;
    border-left: 1px solid rgba(36,24,19,0.1);
    min-width:0;
  }

  /* -- welcome block -- */
  .welcome-block{
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
    margin-bottom: 32px;
  }
  .welcome-block h1{
    font-family: var(--font-en-display);
    font-size: 1.9rem; font-weight:600; color: var(--ink);
    margin-bottom: 4px;
  }
  .welcome-block h1 .kn{ font-family: var(--font-kn-body); color: var(--maroon-deep); font-size:0.85em; }
  .welcome-block p{ color: var(--ink-soft); font-size:0.95rem; }

  /* -- stat cards -- */
  .stat-row{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-bottom: 36px;
  }
  .stat-card{
    background: var(--parchment-card);
    border: 1px solid rgba(36,24,19,0.12);
    border-radius: var(--radius);
    padding: 20px 20px;
  }
  .stat-card .stat-icon{
    width:36px; height:36px; border-radius:9px;
    background: rgba(107,30,30,0.08); color: var(--maroon-deep);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 14px;
  }
  .stat-card .stat-icon svg{ width:18px; height:18px; }
  .stat-card strong{ font-family: var(--font-en-display); font-size:1.7rem; color: var(--ink); display:block; }
  .stat-card span{ font-size:0.82rem; color: var(--ink-soft); }

  /* -- section headers within dashboard -- */
  .dash-section{ margin-bottom: 44px; }
  .dash-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .dash-section-head h2{ font-family: var(--font-en-display); font-size:1.25rem; font-weight:600; color: var(--ink); }
  .dash-section-head a{ font-size:0.85rem; font-weight:600; color: var(--maroon-deep); }

  /* -- progress by area -- */
  .progress-list{ display:flex; flex-direction:column; gap:18px; }
  .progress-item .progress-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
  .progress-item .progress-label{ font-size:0.92rem; font-weight:600; color: var(--ink); display:flex; align-items:center; gap:8px; }
  .progress-item .progress-label .kn{ font-family: var(--font-kn-body); font-weight:400; color: var(--ink-soft); font-size:0.85em; }
  .progress-item .progress-count{ font-size:0.82rem; color: var(--ink-soft); }
  .progress-track{ height:8px; border-radius:4px; background: var(--parchment-deep); overflow:hidden; }
  .progress-fill{ height:100%; border-radius:4px; background: var(--maroon-deep); }

  /* =========================================
     PROFILE
  ========================================== */
  .profile-hero{
    display:flex; align-items:center; gap:32px;
    background: var(--parchment-card);
    border: 1px solid rgba(36,24,19,0.14);
    border-radius: 14px;
    padding: 44px 48px;
    margin: 32px 0 40px;
    position:relative; overflow:hidden;
  }
  .profile-hero::after{
    content:""; position:absolute; inset:0;
    background-image: repeating-linear-gradient(180deg, rgba(107,30,30,0.025) 0px, rgba(107,30,30,0.025) 1px, transparent 1px, transparent 8px);
    pointer-events:none;
  }
  .profile-avatar{
    flex-shrink:0; position:relative;
    width: 116px; height:116px; border-radius:50%;
    background: var(--maroon-deep); color: var(--cream-white);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-en-display); font-weight:600; font-size:2.6rem;
    border: 4px solid var(--parchment-card);
    box-shadow: 0 10px 24px -8px rgba(36,24,19,0.35);
  }
  .profile-avatar .hole{
    position:absolute; top:-3px; left:50%; transform:translateX(-50%);
    width:9px; height:9px;
  }
  .profile-hero-body{ flex:1; min-width:0; position:relative; }
  .profile-hero-body h1{
    font-family: var(--font-en-display);
    font-size: 1.8rem; font-weight:600; color: var(--ink);
    margin-bottom: 2px;
  }
  .profile-handle{ font-size:0.9rem; color: var(--ink-soft); margin-bottom:12px; }
  .profile-bio{ font-size:0.95rem; color: var(--ink-soft); max-width:56ch; margin-bottom:16px; }
  .profile-meta-row{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
  .profile-meta-row .pm-item{ display:flex; align-items:center; gap:7px; font-size:0.85rem; color: var(--ink-soft); }
  .profile-meta-row svg{ width:15px; height:15px; color: var(--ink-soft); flex-shrink:0; }
  .profile-actions{ display:flex; gap:12px; align-items:center; position:relative; }

  /* -- badges -- */
  .badge-grid{ display:flex; flex-wrap:wrap; gap:12px; }
  .badge-chip{
    display:flex; align-items:center; gap:10px;
    background: var(--parchment-card);
    border: 1px solid rgba(36,24,19,0.14);
    border-radius: 999px;
    padding: 9px 18px 9px 10px;
  }
  .badge-chip .badge-icon{
    width:30px; height:30px; border-radius:50%;
    background: rgba(184,134,46,0.14); color: #8a6415;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .badge-chip .badge-icon svg{ width:15px; height:15px; }
  .badge-chip .badge-text{ display:flex; flex-direction:column; }
  .badge-chip .badge-name{ font-size:0.85rem; font-weight:600; color: var(--ink); }
  .badge-chip .badge-date{ font-size:0.72rem; color: var(--ink-soft); }

  /* -- about card -- */
  .about-grid{ display:flex; flex-direction:column; gap:14px; }
  .about-row{ display:flex; gap:16px; font-size:0.9rem; }
  .about-row .about-label{ width:140px; flex-shrink:0; color: var(--ink-soft); font-weight:600; }
  .about-row .about-value{ color: var(--ink); }

  /* =========================================
     RESPONSIVE
  ========================================== */
  @media (max-width: 900px){
    .footer-grid{ grid-template-columns: 1fr 1fr; }
    nav.primary{ display:none; }
    .menu-toggle{ display:flex; }
    .subnav{ top: 0; }
    .word-grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .dash-body{ grid-template-columns: 1fr; padding: 0 20px; }
    .dash-sidebar{ position:static; height:auto; flex-direction:row; overflow-x:auto; padding: 20px 0; border-bottom: 1px solid rgba(36,24,19,0.1); }
    .dash-main{ border-left:none; padding-left:0; }
    .stat-row{ grid-template-columns: repeat(2,1fr); }
    .profile-hero{ flex-direction:column; text-align:center; padding: 36px 28px; }
    .profile-meta-row{ justify-content:center; }
    .profile-actions{ justify-content:center; }
  }
  @media (max-width: 600px){
    .wrap{ padding:0 20px; }
    .footer-grid{ grid-template-columns: 1fr; }
    .word-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .group-head .group-note{ margin-left:0; }
    .word-search{ max-width:100%; }
    .auth-brand{ display:none; }
    .auth-grid{ grid-template-columns: 1fr; }
    .auth-form-wrap{ padding: 40px 20px; }
    .thread-card{ flex-direction:column; }
    .stat-row{ grid-template-columns: 1fr 1fr; }
    .welcome-block{ flex-direction:column; align-items:flex-start; }
    .dash-main{ padding: 28px 20px 60px; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .marquee-track{ animation:none; }
    .feature-card, .journey-step, .letter-card, .word-card, .dict-entry, .topic-card, .thread-card, .course-card, .book-card{ opacity:1 !important; transform:none !important; transition:none !important; }
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }