@font-face{font-family:"Amiri";src:url("/assets/fonts/amiri/Amiri-Regular.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap;}
@font-face{font-family:"UthmanicHafs";src:url("/assets/fonts/quran/UthmanicHafs.otf") format("opentype");font-display:swap;}
#ds-alphabet-tool{width:100%;max-width:100%;margin-left:0;margin-right:0;overflow-x:clip;}
#ds-alphabet-tool *{box-sizing:border-box;}
#ds-alphabet-tool,
#ds-alphabet-tool *{
  box-sizing:border-box;
}
#ds-alphabet-tool{
  width:100% ;
  max-width:100% ;
  margin-left:0 ;
  margin-right:0 ;

  
  padding:calc(var(--ds-header-h, 64px) + 34px) clamp(14px, 2.2vw, 30px) 76px ;

  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ds-text, #e5e7eb);

  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--ds-accent, #2dd4bf) 22%, transparent), transparent 34%),
    radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--ds-accent2, #14b8a6) 15%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--ds-bg, #070b14) 96%, transparent), var(--ds-bg, #070b14));

  --card:color-mix(in srgb, var(--ds-card, rgba(15,23,42,.72)) 86%, transparent);
  --card-strong:color-mix(in srgb, var(--ds-card, rgba(15,23,42,.82)) 94%, transparent);
  --border:color-mix(in srgb, var(--ds-border, rgba(255,255,255,.14)) 92%, transparent);
  --border-strong:color-mix(in srgb, var(--ds-accent, #2dd4bf) 28%, var(--border));
  --text:var(--ds-text, #e5e7eb);
  --muted:var(--ds-muted, rgba(255,255,255,.72));
  --muted2:var(--ds-muted2, rgba(255,255,255,.86));
  --accent:var(--ds-accent, #2dd4bf);
  --accent2:var(--ds-accent2, #14b8a6);
  --blue:#3b82f6;
  --blue2:#2563eb;
  --shadow:0 18px 44px rgba(0,0,0,.20);
  --shadow2:0 28px 70px rgba(0,0,0,.26);

  position:relative;
  isolation:isolate;
  overflow:hidden;
}
html[data-theme="light"] #ds-alphabet-tool{
  color:var(--ds-text, #111827);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--ds-accent, #0d9488) 17%, transparent), transparent 34%),
    radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--ds-accent2, #0f766e) 11%, transparent), transparent 32%),
    linear-gradient(180deg, #f7fbff, var(--ds-bg, #f6f7fb));

  --card:rgba(255,255,255,.78);
  --card-strong:rgba(255,255,255,.94);
  --border:rgba(15,23,42,.11);
  --border-strong:color-mix(in srgb, var(--ds-accent, #0d9488) 28%, rgba(15,23,42,.12));
  --text:var(--ds-text, #111827);
  --muted:rgba(15,23,42,.64);
  --muted2:rgba(15,23,42,.82);
  --shadow:0 16px 38px rgba(20,40,60,.11);
  --shadow2:0 24px 62px rgba(20,40,60,.14);
}
#ds-alphabet-tool::before,
#ds-alphabet-tool::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:999px;
}
#ds-alphabet-tool::before{
  width:680px;
  height:360px;
  left:-260px;
  top:34px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 21%, transparent), transparent 72%);
}
#ds-alphabet-tool::after{
  width:620px;
  height:340px;
  right:-250px;
  top:76px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 72%);
}
#ds-alphabet-tool .ds-muted{
  color:var(--muted) ;
}
#ds-alphabet-tool b,
#ds-alphabet-tool strong{
  font-weight:950;
}
#ds-alphabet-tool > *{
  width:min(1320px, 100%) ;
  margin-left:auto ;
  margin-right:auto ;
}
#ds-alphabet-tool .abHero{
  display:grid ;
  grid-template-columns:minmax(0, 1fr) minmax(280px, 420px);
  align-items:stretch ;
  gap:18px ;
  margin:0 0 18px ;
  padding:0 ;
  background:transparent ;
  border:0 ;
  box-shadow:none ;
}
#ds-alphabet-tool .abHeroLeft,
#ds-alphabet-tool .abHeroRight{
  
  
  
  
}
#ds-alphabet-tool .abHeroLeft{
  display:grid ;
  grid-template-columns:auto minmax(0, 1fr);
  gap:18px ;
  align-items:flex-start ;
  padding:28px ;
  min-height:190px;
}
#ds-alphabet-tool .abHeroRight{
  display:grid ;
  grid-template-columns:1fr;
  align-content:center;
  gap:12px ;
  padding:18px ;
}
#ds-alphabet-tool .abBadge{
  width:58px ;
  height:58px ;
  border-radius:21px ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  background:linear-gradient(135deg, var(--accent), var(--accent2)) ;
  border:0 ;
  color:#041316 ;
  box-shadow:0 18px 40px color-mix(in srgb, var(--accent) 22%, transparent) ;
  font-size:18px ;
  font-weight:1000 ;
  letter-spacing:.04em ;
  flex:0 0 auto;
}
#ds-alphabet-tool .abKicker{
  margin:2px 0 8px ;
  color:var(--accent) ;
  font-size:12px ;
  font-weight:1000 ;
  letter-spacing:.12em ;
  text-transform:uppercase ;
}
#ds-alphabet-tool .abTitle{
  margin:0 ;
  max-width:820px;
  color:var(--text) ;
  font-size:clamp(34px, 5.2vw, 64px) ;
  line-height:.98 ;
  font-weight:1000 ;
  letter-spacing:-.055em ;
}
#ds-alphabet-tool .abSub{
  margin:14px 0 0 ;
  max-width:820px;
  color:var(--muted2) ;
  font-size:clamp(14px, 1.2vw, 17px) ;
  line-height:1.65 ;
  font-weight:780 ;
}
#ds-alphabet-tool .abCtrl{
  width:100% ;
  min-width:0 ;
  padding:16px ;
  
  
  
  
}
#ds-alphabet-tool .abCtrlLabel{
  margin:0 0 10px ;
  color:var(--muted) ;
  font-size:11px ;
  font-weight:1000 ;
  letter-spacing:.1em ;
  text-transform:uppercase ;
}
#ds-alphabet-tool .abRange{
  width:100% ;
  accent-color:var(--blue) ;
  height:8px;
}
#ds-alphabet-tool .abHeroRight .abBtn{
  width:100%;
}
#ds-alphabet-tool .abBtn,
#ds-alphabet-tool .abTab,
#ds-alphabet-tool .abChoice,
#ds-alphabet-tool .abIconBtn{
  
}
#ds-alphabet-tool .abBtn{
  min-height:46px ;
  
  
  
  padding:0 16px ;
  
  cursor:pointer ;
  
  
  letter-spacing:-.01em ;
  transition:background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease ;
  user-select:none;
  white-space:nowrap;
}
#ds-alphabet-tool .abBtn:hover{
  transform:translateY(-1px) ;
  background:color-mix(in srgb, var(--accent) 10%, var(--card-strong)) ;
  border-color:color-mix(in srgb, var(--accent) 38%, var(--border)) ;
  box-shadow:0 14px 32px rgba(0,0,0,.12) ;
}
#ds-alphabet-tool .abBtnPrimary{
  
  
  color:#041316 ;
  
}
html[data-theme="dark"] #ds-alphabet-tool .abBtnPrimary{
  color:#031617 ;
}
#ds-alphabet-tool .abTabs{
  display:flex ;
  align-items:center ;
  gap:8px ;
  flex-wrap:wrap ;
  margin:0 0 16px ;
  padding:8px ;
  
  
  
  
}
#ds-alphabet-tool .abTab{
  min-height:42px ;
  
  
  
  padding:0 16px ;
  
  cursor:pointer ;
  
  
  transition:background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease ;
}
#ds-alphabet-tool .abTab:hover{
  transform:translateY(-1px);
  color:var(--text) ;
  background:color-mix(in srgb, var(--accent) 7%, transparent) ;
}
#ds-alphabet-tool .abTab.is-on{
  color:#041316 ;
  border-color:transparent ;
  background:linear-gradient(135deg, var(--accent), var(--accent2)) ;
  box-shadow:0 12px 24px color-mix(in srgb, var(--accent) 18%, transparent) ;
}
#ds-alphabet-tool .abInfo{
  margin:0 0 18px ;
  padding:14px 16px ;
  border:1px solid var(--border) ;
  border-radius:22px ;
  background:color-mix(in srgb, var(--card) 78%, transparent) ;
  color:var(--muted2) ;
  font-size:14px ;
  line-height:1.65 ;
  font-weight:760 ;
  box-shadow:var(--shadow) ;
}
#ds-alphabet-tool .abPanel{
  display:none;
}
#ds-alphabet-tool .abPanel.is-on{
  display:block;
}
#ds-alphabet-tool .abGrid{
  display:grid ;
  grid-template-columns:repeat(8, minmax(0, 1fr)) ;
  gap:12px ;
}
#ds-alphabet-tool .abGridWide{
  grid-template-columns:repeat(4, minmax(0, 1fr)) ;
}
#ds-alphabet-tool .abTile,
#ds-alphabet-tool .abPrItem,
#ds-alphabet-tool .abCard{
  
  
  
}
#ds-alphabet-tool .abTile{
  min-height:112px ;
  
  padding:18px 12px ;
  text-align:center ;
  cursor:pointer ;
  user-select:none ;
  display:grid;
  align-content:center;
  gap:8px;
  transition:transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease ;
}
#ds-alphabet-tool .abTile:hover,
#ds-alphabet-tool .abPrItem:hover{
  transform:translateY(-3px) ;
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border)) ;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 58%),
    color-mix(in srgb, var(--card-strong) 92%, transparent) ;
  box-shadow:0 24px 54px color-mix(in srgb, var(--accent) 13%, rgba(0,0,0,.16)) ;
}
#ds-alphabet-tool .abChar{
  color:var(--text) ;
  font-size:clamp(30px, 3vw, 42px) ;
  line-height:1.1 ;
  font-weight:1000 ;
  letter-spacing:-.02em ;
}
#ds-alphabet-tool .abName{
  margin:0 ;
  color:var(--muted) ;
  font-size:12px ;
  line-height:1.25 ;
  font-weight:850 ;
}
#ds-alphabet-tool .abMiniHead{
  display:flex ;
  align-items:flex-end ;
  justify-content:space-between ;
  gap:12px ;
  flex-wrap:wrap ;
  margin:4px 2px 14px ;
}
#ds-alphabet-tool .abH2{
  color:var(--text) ;
  font-weight:1000 ;
  font-size:clamp(20px, 2vw, 26px) ;
  letter-spacing:-.035em ;
  line-height:1.1 ;
}
#ds-alphabet-tool .abSmall{
  color:var(--muted) ;
  font-size:12px ;
  font-weight:850 ;
}
#ds-alphabet-tool .abPracticeTop{
  display:grid ;
  grid-template-columns:1.2fr .8fr ;
  gap:16px ;
  margin-bottom:16px ;
}
#ds-alphabet-tool .abCard{
  
  padding:18px ;
}
#ds-alphabet-tool .abLabel{
  margin:0 0 10px ;
  color:var(--muted) ;
  font-size:11px ;
  font-weight:1000 ;
  letter-spacing:.1em ;
  text-transform:uppercase ;
}
#ds-alphabet-tool .abRow{
  display:flex ;
  gap:10px ;
  flex-wrap:wrap ;
  align-items:center ;
}
#ds-alphabet-tool .abNow{
  margin:0 0 8px ;
  color:var(--text) ;
  font-weight:1000 ;
  font-size:clamp(19px, 2vw, 26px) ;
  line-height:1.18 ;
  letter-spacing:-.025em ;
}
#ds-alphabet-tool .abPracticeGrid{
  display:grid ;
  grid-template-columns:repeat(4, minmax(0,1fr)) ;
  gap:12px ;
}
#ds-alphabet-tool .abPrItem{
  min-height:118px ;
  border-radius:24px ;
  padding:18px 12px ;
  text-align:center ;
  cursor:pointer ;
  display:grid ;
  align-content:center ;
  gap:8px ;
  transition:transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease ;
}
#ds-alphabet-tool .abPrBig{
  color:var(--text) ;
  font-size:clamp(30px, 3.2vw, 44px) ;
  font-weight:1000 ;
  line-height:1.1 ;
}
#ds-alphabet-tool .abPrLbl{
  margin:0 ;
  color:var(--muted) ;
  font-size:12px ;
  font-weight:850 ;
}
#ds-alphabet-tool .abSelect{
  -webkit-appearance:none ;
  appearance:none ;
  width:100% ;
  min-height:48px ;
  margin:0 0 12px ;
  padding:0 44px 0 14px ;
  
  
  background-
  
  background-position:calc(100% - 20px) 52%, calc(100% - 14px) 52% ;
  background-size:6px 6px, 6px 6px ;
  background-repeat:no-repeat ;
  
  
  
  outline:none ;
  
}
#ds-alphabet-tool .abSelect:focus{
  border-color:color-mix(in srgb, var(--accent) 55%, var(--border)) ;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent) ;
}
#ds-alphabet-tool .abSelect option{
  background:#0f172a;
  color:#e5e7eb;
}
html[data-theme="light"] #ds-alphabet-tool .abSelect option{
  background:#ffffff;
  color:#111827;
}
#ds-alphabet-tool .abModal{
  position:fixed ;
  inset:0 ;
  z-index:2147483647 ;
  display:none ;
  align-items:center ;
  justify-content:center ;
  padding:22px ;
  background:rgba(2,6,23,.68) ;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  isolation:isolate;
  transform:translateZ(0);
}
#ds-alphabet-tool .abModal[data-open="true"]{
  display:flex ;
}
#ds-alphabet-tool .abModalCard{
  width:min(800px, 100%) ;
  max-height:min(82vh, 760px) ;
  overflow:auto ;
  
  
  
  
  color:var(--text) ;
}
html[data-theme="light"] #ds-alphabet-tool .abModal{
  background:rgba(248,250,252,.74) ;
}
#ds-alphabet-tool .abModalHead{
  position:sticky ;
  top:0 ;
  z-index:2 ;
  display:flex ;
  justify-content:space-between ;
  align-items:center ;
  gap:14px ;
  padding:18px 20px ;
  border-bottom:1px solid var(--border) ;
  background:var(--card-strong) ;
}
#ds-alphabet-tool .abModalTitle{
  color:var(--text) ;
  font-weight:1000 ;
  font-size:clamp(18px, 2vw, 24px) ;
  letter-spacing:-.025em ;
}
#ds-alphabet-tool .abIconBtn{
  width:42px ;
  height:42px ;
  
  
  
  
  
  display:flex ;
  align-items:center ;
  justify-content:center ;
  cursor:pointer ;
}
#ds-alphabet-tool .abIconBtn:hover{
  background:color-mix(in srgb, var(--accent) 10%, var(--card)) ;
}
#ds-alphabet-tool .abModalMeta{
  display:flex ;
  justify-content:space-between ;
  gap:12px ;
  flex-wrap:wrap ;
  padding:14px 20px ;
  border-bottom:1px solid var(--border) ;
  background:color-mix(in srgb, var(--accent) 7%, transparent) ;
  color:var(--muted2) ;
  font-weight:850 ;
}
#ds-alphabet-tool .abModalBody{
  padding:20px ;
  color:var(--text) ;
}
#ds-alphabet-tool .abQuizRow{
  display:flex ;
  justify-content:space-between ;
  align-items:center ;
  gap:12px ;
  flex-wrap:wrap ;
  margin:14px 0 ;
}
#ds-alphabet-tool .abChoices{
  display:grid ;
  grid-template-columns:repeat(2, minmax(0,1fr)) ;
  gap:12px ;
  margin-top:12px ;
}
#ds-alphabet-tool .abChoice{
  min-height:92px ;
  
  
  
  padding:18px 14px ;
  cursor:pointer ;
  color:var(--text) ;
  font-weight:1000 ;
  font-size:clamp(25px, 3vw, 34px) ;
  text-align:center ;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease ;
}
#ds-alphabet-tool .abChoice:hover{
  transform:translateY(-2px) ;
  border-color:color-mix(in srgb, var(--accent) 48%, var(--border)) ;
  background:color-mix(in srgb, var(--accent) 9%, var(--card)) ;
}
#ds-alphabet-tool .abChoice.is-correct{
  border-color:rgba(16,185,129,.86) ;
  box-shadow:0 18px 38px rgba(16,185,129,.18) ;
}
#ds-alphabet-tool .abChoice.is-wrong{
  border-color:rgba(239,68,68,.86) ;
  box-shadow:0 18px 38px rgba(239,68,68,.18) ;
}
#ds-alphabet-tool .abFeedback{
  margin-top:14px ;
  min-height:58px ;
  display:flex ;
  align-items:center ;
  justify-content:space-between ;
  gap:12px ;
  flex-wrap:wrap ;
  border:1px solid var(--border) ;
  background:color-mix(in srgb, var(--card) 88%, transparent) ;
  border-radius:20px ;
  padding:14px ;
  color:var(--text) ;
  font-weight:850 ;
}
#ds-alphabet-tool .abQuizActions{
  margin-top:16px ;
  display:flex ;
  justify-content:space-between ;
  gap:12px ;
  flex-wrap:wrap ;
}
@media (max-width:1180px){#ds-alphabet-tool{
    padding-left:16px ;
    padding-right:16px ;
  }
#ds-alphabet-tool .abHero{
    grid-template-columns:1fr ;
  }
#ds-alphabet-tool .abHeroRight{
    grid-template-columns:1fr 1fr 1fr ;
    align-items:end ;
  }
#ds-alphabet-tool .abCtrl{
    grid-column:span 1;
  }
}
@media (max-width:980px){#ds-alphabet-tool{
    padding-top:calc(var(--ds-header-h, 64px) + 28px) ;
  }
#ds-alphabet-tool .abHeroLeft{
    grid-template-columns:1fr ;
    padding:22px ;
  }
#ds-alphabet-tool .abBadge{
    width:52px ;
    height:52px ;
    border-radius:19px ;
  }
#ds-alphabet-tool .abHeroRight{
    grid-template-columns:1fr ;
  }
#ds-alphabet-tool .abCtrl{
    display:none ;
  }
#ds-alphabet-tool .abTabs{
    
  }
#ds-alphabet-tool .abGrid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) ;
  }
#ds-alphabet-tool .abPanel[data-panel="letters"] .abGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) ;
  }
#ds-alphabet-tool .abGridWide{
    grid-template-columns:repeat(2, minmax(0, 1fr)) ;
  }
#ds-alphabet-tool .abPracticeTop{
    grid-template-columns:1fr ;
  }
#ds-alphabet-tool .abPracticeGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) ;
  }
#ds-alphabet-tool .abModal{
    align-items:flex-start ;
    padding:12px ;
    padding-top:calc(12px + env(safe-area-inset-top, 0px)) ;
  }
#ds-alphabet-tool .abModalCard{
    width:100% ;
    max-height:calc(100dvh - (24px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))) ;
  }
#ds-alphabet-tool .abChoices{
    grid-template-columns:1fr ;
  }
}
@media (max-width:640px){#ds-alphabet-tool{
    padding:calc(var(--ds-header-h, 64px) + 22px) 12px 58px ;
  }
#ds-alphabet-tool::before{
    width:430px;
    height:240px;
    left:-210px;
    top:30px;
  }
#ds-alphabet-tool::after{
    width:420px;
    height:230px;
    right:-220px;
    top:72px;
  }
#ds-alphabet-tool .abHero{
    gap:12px ;
    margin-bottom:14px ;
  }
#ds-alphabet-tool .abHeroLeft,
  #ds-alphabet-tool .abHeroRight,
  #ds-alphabet-tool .abCard,
  #ds-alphabet-tool .abInfo,
  #ds-alphabet-tool .abTabs{
    
  }
#ds-alphabet-tool .abHeroLeft{
    padding:18px ;
  }
#ds-alphabet-tool .abTitle{
    font-size:clamp(31px, 10vw, 44px) ;
  }
#ds-alphabet-tool .abSub{
    font-size:14px ;
  }
#ds-alphabet-tool .abTabs{
    display:grid ;
    grid-template-columns:1fr 1fr ;
    gap:7px ;
  }
#ds-alphabet-tool .abTab{
    width:100% ;
    padding:0 10px ;
    
  }
#ds-alphabet-tool .abGrid,
  #ds-alphabet-tool .abPanel[data-panel="letters"] .abGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) ;
    gap:10px ;
  }
#ds-alphabet-tool .abGridWide,
  #ds-alphabet-tool .abPracticeGrid{
    grid-template-columns:1fr ;
  }
#ds-alphabet-tool .abTile,
  #ds-alphabet-tool .abPrItem{
    min-height:104px ;
    border-radius:21px ;
  }
#ds-alphabet-tool .abRow,
  #ds-alphabet-tool .abQuizActions{
    display:grid ;
    grid-template-columns:1fr ;
  }
#ds-alphabet-tool .abBtn{
    width:100% ;
  }
}
@media (max-width:420px){#ds-alphabet-tool{
    padding-top:calc(var(--ds-header-h, 64px) + 18px) ;
  }
#ds-alphabet-tool .abHeroLeft,
  #ds-alphabet-tool .abHeroRight,
  #ds-alphabet-tool .abCard,
  #ds-alphabet-tool .abModalBody,
  #ds-alphabet-tool .abModalHead,
  #ds-alphabet-tool .abModalMeta{
    padding-left:14px ;
    padding-right:14px ;
  }
}
@media (prefers-reduced-motion:reduce){#ds-alphabet-tool,
  #ds-alphabet-tool *{
    transition:none ;
    scroll-behavior:auto ;
  }
}
#ds-alphabet-tool button.abTile,#ds-alphabet-tool button.abPrItem{width:100%;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#ds-alphabet-tool .abTile .abChar,#ds-alphabet-tool .abTile .abName,#ds-alphabet-tool .abPrItem .abPrBig,#ds-alphabet-tool .abPrItem .abPrLbl{display:block}
@media (hover:none){#ds-alphabet-tool .abTile:hover,#ds-alphabet-tool .abPrItem:hover{transform:none ;box-shadow:var(--shadow) ;border-color:var(--border) }
}
#ds-alphabet-tool .abTile:active,#ds-alphabet-tool .abPrItem:active{transform:scale(.97) }
#ds-alphabet-tool .abTile.is-playing,#ds-alphabet-tool .abPrItem.is-playing{border-color:var(--accent) ;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent),var(--shadow) }
#ds-alphabet-tool .abTile:focus-visible,#ds-alphabet-tool .abPrItem:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#ds-alphabet-tool .abFlashWrap{max-width:560px;margin:0 auto;display:grid;gap:14px}
#ds-alphabet-tool .abFlashMeta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
#ds-alphabet-tool .abFlashMeta [data-ds-fc-stats]{color:var(--muted,inherit);letter-spacing:0;text-transform:none;font-weight:700}
#ds-alphabet-tool .abFlash{display:block;width:100%;height:300px;padding:0;border:0;background:none;cursor:pointer;perspective:1400px;font:inherit;color:inherit}
#ds-alphabet-tool .abFlash[hidden]{display:none}
#ds-alphabet-tool .abFlashInner{position:relative;display:block;width:100%;height:100%;transition:transform .5s ease;transform-style:preserve-3d}
#ds-alphabet-tool .abFlash.is-flipped .abFlashInner{transform:rotateY(180deg)}
#ds-alphabet-tool .abFlashFace{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#ds-alphabet-tool .abFlashBack{transform:rotateY(180deg);border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
#ds-alphabet-tool .abFlashLabel{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
#ds-alphabet-tool .abFlashChar{font-family:var(--ds-font-arabic,"Amiri",serif);font-size:120px;line-height:1.2}
#ds-alphabet-tool .abFlashName{font-size:56px;font-weight:800;line-height:1.1}
#ds-alphabet-tool .abFlashHint{font-size:13px;opacity:.7}
#ds-alphabet-tool .abGrades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#ds-alphabet-tool .abGrades[hidden],#ds-alphabet-tool .abFlashDone[hidden]{display:none}
#ds-alphabet-tool .abGrades .abBtn{padding:0 8px}
#ds-alphabet-tool .abFlashDone{display:grid;justify-items:center;gap:10px;padding:28px;text-align:center}
#ds-alphabet-tool .abFlashFoot{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:center;text-align:center}
#ds-alphabet-tool .abLink{padding:0;text-decoration:underline;cursor:pointer}
#ds-alphabet-tool .abResult{display:flex;align-items:center;gap:12px;margin-bottom:6px}
#ds-alphabet-tool .abResultPct{font-size:44px;font-weight:900;line-height:1}
#ds-alphabet-tool .abResultBadge{padding:5px 12px;border-radius:8px;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
#ds-alphabet-tool .abResultBadge.is-pass{background:#dcfce7;color:#15803d}
@media (max-width:560px){#ds-alphabet-tool .abFlash{height:240px}
#ds-alphabet-tool .abFlashChar{font-size:96px}
#ds-alphabet-tool .abFlashName{font-size:42px}
#ds-alphabet-tool .abGrades{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){#ds-alphabet-tool .abFlashInner{transition:none}
}
#ds-alphabet-tool{width:100%;max-width:100%;margin-left:0;margin-right:0;}

html[data-theme] #ds-alphabet-tool{width:min(100%,1256px);max-width:1256px;margin:0 auto;padding:0 20px 96px;background:transparent;overflow:visible;color:var(--ds-text);font-family:var(--ds-font,system-ui,sans-serif);--card:var(--ds-card);--card-strong:var(--ds-card-solid,var(--ds-card));--border:var(--ds-border);--border-strong:var(--ds-accent);--text:var(--ds-text);--muted:var(--ds-muted);--muted2:var(--ds-muted);--accent:var(--ds-accent);--accent2:var(--ds-accent2,var(--ds-accent));--blue:var(--ds-accent);--blue2:var(--ds-accent2,var(--ds-accent));--shadow:none;--shadow2:none}#ds-alphabet-tool::before,#ds-alphabet-tool::after{display:none}#ds-alphabet-tool .abHero{background:transparent;border:0;padding:0;margin-bottom:24px;box-shadow:none;backdrop-filter:none;overflow:visible}#ds-alphabet-tool .abBadge{display:none}#ds-alphabet-tool .abHeroLeft{min-width:0}#ds-alphabet-tool .abHeroRight{flex:none}#ds-alphabet-tool .abTabs{padding:0;background:transparent;border:0;gap:8px}#ds-alphabet-tool .abTabs>button{min-height:44px;padding:0 16px;font-size:14px}#ds-alphabet-tool .abBtn{min-height:44px;padding:0 16px}#ds-alphabet-tool .abBtnPrimary{background:var(--ds-accent);color:var(--ds-on-accent,#111)}#ds-alphabet-tool .abCard{padding:24px;box-shadow:none;backdrop-filter:none}#ds-alphabet-tool .abTile{background:var(--ds-card);border:1px solid var(--ds-border);border-radius:18px;box-shadow:none}#ds-alphabet-tool .abTile:hover,#ds-alphabet-tool .abTile.is-playing{border-color:var(--ds-accent);background:var(--ds-chip)}#ds-alphabet-tool .abChoice{background:var(--ds-card);border:1px solid var(--ds-border);border-radius:18px}#ds-alphabet-tool .abPrItem{padding:16px;box-shadow:none}#ds-alphabet-tool [hidden]{display:none}#ds-alphabet-tool .abMuted{color:var(--ds-muted)}#ds-alphabet-tool .abModalCard{background:var(--ds-card-solid,var(--ds-card));color:var(--ds-text);border:1px solid var(--ds-border);border-radius:18px;box-shadow:none}#ds-alphabet-tool .abSelect{min-height:44px;padding:0 12px;font-size:16px}#ds-alphabet-tool .abLink{padding:8px 12px;min-height:44px;text-decoration:none}#ds-alphabet-tool .abFlashFace{padding:24px;border:1px solid var(--ds-border);border-radius:18px}#ds-alphabet-tool .abFlashDone{padding:24px}
@media(max-width:700px){#ds-alphabet-tool .abHero{display:block}#ds-alphabet-tool .abHeroRight{margin-top:20px}#ds-alphabet-tool .abTabs>button{flex:1 1 130px}#ds-alphabet-tool .abCard{padding:18px}}

#ds-alphabet-tool .abHeroLeft{display:block;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;overflow:visible}#ds-alphabet-tool .abHeroRight{padding:18px;border-radius:18px;border:1px solid var(--ds-border);background:var(--ds-card);box-shadow:none;backdrop-filter:none}#ds-alphabet-tool .abHero .abCtrl{padding:0;background:transparent;border:0;box-shadow:none}#ds-alphabet-tool :is(.abHero,.abHeroLeft,.abHeroRight)::before,#ds-alphabet-tool :is(.abHero,.abHeroLeft,.abHeroRight)::after{display:none}

html[data-theme] #ds-alphabet-tool{isolation:auto}#ds-alphabet-tool .abHeroLeft{min-height:0}#ds-alphabet-tool .abHero .abCtrl{display:block}#ds-alphabet-tool .abName{font-size:14px;font-weight:600}#ds-alphabet-tool .abCtrlLabel{font-weight:600}#ds-alphabet-tool .abInfo{font-weight:400}