/* sayit.css — see DESIGN.md */
.sayit { padding: 112px 0; background: var(--ivory); }
.sayit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.sayit-copy { display: flex; flex-direction: column; gap: 4px; }
.sayit-form { display: grid; gap: 10px; max-width: 480px; }
.sayit-label { font-size: 14px; font-weight: 650; color: var(--ink); padding: 0; }
.sayit-input { height: 60px; padding: 0 20px; border: 0; border-radius: 16px; font: 400 24px/1 "Newsreader", Georgia, serif; color: var(--ink); background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline); transition: box-shadow .4s var(--ease-p3); }
.sayit-input::placeholder { color: var(--muted); font-style: italic; }
.sayit-input:focus { outline: none; box-shadow: var(--shadow-1), inset 0 0 0 1.5px var(--gold-ink), 0 0 0 5px oklch(0.8 0.1 80 / .2); }
.sayit-from { margin: 14px 0 0; padding: 0; border: 0; display: grid; gap: 10px; }
.sayit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sayit-chip { position: relative; cursor: pointer; }
.sayit-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sayit-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--canvas); box-shadow: inset 0 0 0 1px var(--hairline); transition: background-color .4s, color .4s, box-shadow .4s, translate .4s var(--ease-p3); }
.sayit-chip:hover span { translate: 0 -2px; box-shadow: inset 0 0 0 1px var(--gold-ink); }
.sayit-chip input:checked + span { background: var(--night); color: oklch(0.8 0.1 80); box-shadow: inset 0 0 0 1px var(--night), 0 10px 20px -10px oklch(0.17 0.02 255 / .6); }
.sayit-chip input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.sayit-card { position: relative; overflow: hidden; isolation: isolate; margin: 0; padding: 32px; border-radius: 32px; display: grid; gap: 22px; color: var(--on-night); background: radial-gradient(120% 100% at 100% 0%, oklch(0.28 0.04 255), var(--night) 60%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .5), inset 0 0 0 1px oklch(0.8 0.1 80 / .2), 0 50px 100px -50px oklch(0.17 0.03 255 / .8), 0 0 90px -40px oklch(0.8 0.1 80 / .45); }
.sayit-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("assets/pattern-embroidery.webp") center / 420px repeat; opacity: .05; }
.sayit-card figcaption { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: oklch(0.8 0.1 80); }
.sayit-card figcaption .ic { width: 18px; height: 18px; }
.sayit-line { display: grid; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--night-line); }
.sayit-ps { margin: 0; text-align: right; font: 600 clamp(38px, 4.6vw, 58px)/1.45 "Noto Naskh Arabic", serif; color: oklch(0.97 0.012 85); }
.sayit-ink { color: oklch(0.8 0.1 80); display: inline-block; }
.sayit-ink.is-ink { animation: say-ink 1.1s cubic-bezier(.215,.61,.355,1) both; }
@keyframes say-ink { from { clip-path: inset(0 0 0 100%); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.sayit-tr { margin: 0; font: italic 400 22px/1.3 "Newsreader", Georgia, serif; color: var(--on-night); }
.sayit-tr b { font-weight: 400; color: oklch(0.8 0.1 80); }
.sayit-en { margin: 0; font-size: 15px; color: var(--on-night-muted); }
.sayit-pat { margin: 0; font: italic 400 19px/1.4 "Newsreader", Georgia, serif; color: var(--on-night-soft); }
.sayit-cta { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 650; text-decoration: none; color: var(--night) !important; background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .55), 0 18px 36px -14px oklch(0.8 0.1 80 / .7); transition: translate .5s var(--ease-p3); }
.sayit-cta .ic { width: 18px; height: 18px; transition: translate .5s var(--ease-p3); }
.sayit-cta:hover { translate: 0 -2px; }
.sayit-cta:hover .ic { translate: 4px 0; }
.sayit-note { font-size: 12.5px; color: var(--on-night-muted); }
@media (min-width: 960px) {
  .sayit { padding: 160px 0; }
  .sayit-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
  .sayit-card { padding: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .sayit-ink.is-ink { animation: none; }
}
.sayit-tabs { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 22px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); max-width: 560px; }
.sayit-tab { flex: 1 1 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 16px; background: transparent; font: 600 14.5px/1.2 var(--font); color: var(--ink-soft, var(--muted)); cursor: pointer; transition: background-color .4s var(--ease-p3), color .4s, box-shadow .4s; }
.sayit-tab:hover { color: var(--ink); background: var(--ivory); }
.sayit-tab.is-on { background: var(--night); color: oklch(0.8 0.1 80); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .35), 0 10px 20px -10px oklch(0.17 0.02 255 / .6); }
.sayit-tab:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.sayit-form { margin-top: 22px; }
.sayit-ctl { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.sayit-ctl[hidden] { display: none; }
.sayit-out { display: grid; gap: 22px; }
.sayit-pat b { font-style: normal; font-weight: 400; color: oklch(0.8 0.1 80); }
.sayit-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.sayit-buildbtn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; font: 650 14px/1 var(--font); color: oklch(0.8 0.1 80); background: oklch(0.8 0.1 80 / .1); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .4); cursor: pointer; transition: background-color .4s, color .4s, translate .4s var(--ease-p3); }
.sayit-buildbtn:hover { translate: 0 -2px; background: oklch(0.8 0.1 80 / .2); }
.sayit-buildbtn[aria-pressed="true"] { background: oklch(0.8 0.1 80); color: var(--night); }
.sayit-count { margin: 0; font-size: 14px; color: var(--on-night-soft); }
.sayit-count b { font: 400 22px/1 "Newsreader", Georgia, serif; color: oklch(0.8 0.1 80); }
.sayit-count span { display: block; margin-top: 4px; font: italic 400 16px/1.3 "Newsreader", Georgia, serif; color: var(--on-night); }
.sayit-count.is-pop b { display: inline-block; animation: say-pop .6s cubic-bezier(.215,.61,.355,1); }
@keyframes say-pop { 40% { transform: scale(1.35); } }
.sayit-build { display: grid; gap: 14px; padding: 20px; border-radius: 20px; background: oklch(1 0 0 / .04); box-shadow: inset 0 0 0 1px var(--night-line); transition: box-shadow .5s; }
.sayit-build[hidden] { display: none; }
.sayit-build-q { margin: 0; font-size: 14px; font-weight: 600; color: var(--on-night-soft); }
.sayit-slots, .sayit-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.sayit-slot { min-width: 84px; min-height: 64px; padding: 8px 12px; border-radius: 14px; display: grid; place-content: center; text-align: center; box-shadow: inset 0 0 0 1.5px oklch(1 0 0 / .18); border: 0; background: oklch(1 0 0 / .02); transition: background-color .4s, box-shadow .4s; }
.sayit-slot.is-in { background: oklch(1 0 0 / .08); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .45); animation: say-drop .45s cubic-bezier(.215,.61,.355,1); }
@keyframes say-drop { from { transform: translateY(-8px); opacity: 0; } }
.sayit-tile { min-height: 64px; min-width: 84px; padding: 8px 14px; border: 0; border-radius: 14px; display: grid; gap: 2px; justify-items: center; cursor: pointer; color: var(--night); background: linear-gradient(170deg, oklch(0.97 0.012 85), oklch(0.92 0.025 85)); box-shadow: inset 0 1px 0 #fff, 0 10px 20px -12px oklch(0 0 0 / .6); transition: translate .35s var(--ease-p3), opacity .35s, box-shadow .35s; }
.sayit-tile:hover { translate: 0 -3px; box-shadow: inset 0 1px 0 #fff, 0 14px 26px -12px oklch(0.8 0.1 80 / .8); }
.sayit-tile:disabled { opacity: .2; translate: none; cursor: default; }
.sayit-tile b, .sayit-slot b { font: italic 400 18px/1.1 "Newsreader", Georgia, serif; }
.sayit-slot b { color: var(--on-night); }
.sayit-tile small, .sayit-slot small { font: 600 17px/1.3 "Noto Naskh Arabic", serif; }
.sayit-tile small { color: oklch(0.42 0.06 255); }
.sayit-slot small { color: oklch(0.8 0.1 80); }
.sayit-build-msg { margin: 0; min-height: 1.4em; font: italic 400 17px/1.4 "Newsreader", Georgia, serif; color: oklch(0.8 0.1 80); }
.sayit-build.is-done { box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .7), 0 0 50px -20px oklch(0.8 0.1 80 / .7); }
.sayit-build.is-done .sayit-slot { background: oklch(0.8 0.1 80 / .18); }
.sayit-build.is-wrong .sayit-slots { animation: say-shake .5s; }
@keyframes say-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .sayit-slot.is-in, .sayit-build.is-wrong .sayit-slots, .sayit-count.is-pop b { animation: none; }
}
.sayit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.sayit-play { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 6px; border: 0; border-radius: 999px; cursor: pointer; font: 650 14px/1.1 var(--font); color: var(--on-night); background: oklch(1 0 0 / .07); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .35); transition: background-color .4s, translate .4s var(--ease-p3), box-shadow .4s; }
.sayit-play small { font-weight: 500; color: var(--on-night-muted); }
.sayit-play-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--night); background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); box-shadow: 0 6px 14px -6px oklch(0.8 0.1 80 / .8); }
.sayit-play-ic svg { width: 16px; height: 16px; }
.sayit-play .wv { display: none; }
.sayit-play .wv rect { transform-origin: center; transform-box: fill-box; }
.sayit-play:hover { translate: 0 -2px; background: oklch(1 0 0 / .12); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .7), 0 0 30px -10px oklch(0.8 0.1 80 / .6); }
.sayit-play:focus-visible { outline: 2px solid oklch(0.8 0.1 80); outline-offset: 3px; }
.sayit-play.is-playing { box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80), 0 0 0 5px oklch(0.8 0.1 80 / .15); }
.sayit-play.is-playing .pl { display: none; }
.sayit-play.is-playing .wv { display: inline; }
.sayit-play.is-playing .wv rect { animation: say-wv .8s ease-in-out infinite; }
.sayit-play.is-playing .wv rect:nth-child(2) { animation-delay: -.2s; }
.sayit-play.is-playing .wv rect:nth-child(3) { animation-delay: -.4s; }
.sayit-play.is-playing .wv rect:nth-child(4) { animation-delay: -.6s; }
@keyframes say-wv { 50% { transform: scaleY(.4); } }
@media (prefers-reduced-motion: reduce) {
  .sayit-play.is-playing .wv rect { animation: none; }
}
.sayit-grid--compact { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
.sayit-grid--compact .sayit-tabs { margin-top: 0; }
.sayit-grid--compact .sayit-card { padding: 26px !important; }
.sayit-grid--compact .sayit-ps { font-size: clamp(32px, 7vw, 44px); }
.sayit-grid--mini { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .sayit-grid--mini { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.sayit-count { display: grid; gap: 8px; }
.sx-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.sx-dots i { width: 8px; height: 8px; border-radius: 50%; background: oklch(1 0 0 / .14); transition: background-color .5s, box-shadow .5s; }
.sx-dots i.on { background: oklch(0.8 0.1 80); box-shadow: 0 0 8px oklch(0.8 0.1 80 / .6); }
.sx-count-x { font: italic 400 16px/1.3 "Newsreader", Georgia, serif; color: var(--on-night); }
.sayit-count.is-pop .sx-count-t b { display: inline-block; animation: say-pop .6s cubic-bezier(.215,.61,.355,1); }
.sx-stage { position: relative; isolation: isolate; overflow: clip; padding: 120px 0; background: var(--night); color: var(--on-night); }
.sx-stage::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -30%; width: 120vmax; height: 90vmax; translate: -50% 0; background: radial-gradient(closest-side, oklch(0.8 0.1 80 / .2), oklch(0.8 0.1 80 / .05) 50%, transparent 72%); pointer-events: none; }
.sx-stage::after { content: ""; position: absolute; z-index: -1; inset: 0; background: url("assets/pattern-embroidery.webp") center / 520px repeat; opacity: .04; pointer-events: none; }
.sx-badge { display: inline-flex; align-items: center; gap: 10px; width: max-content; min-height: 34px; padding: 6px 14px; margin-bottom: 18px; border-radius: 999px; font-size: 13px; font-weight: 650; color: oklch(0.8 0.1 80); background: oklch(0.8 0.1 80 / .1); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .35); }
.sx-badge i { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.72 0.19 25); animation: sx-live 1.8s ease-out infinite; }
@keyframes sx-live { 0% { box-shadow: 0 0 0 0 oklch(0.72 0.19 25 / .6); } 80%, 100% { box-shadow: 0 0 0 9px oklch(0.72 0.19 25 / 0); } }
.sx-dark .h-title, .sx-dark .courses-title { color: oklch(0.97 0.012 85); }
.sx-dark .h-title em, .sx-dark .courses-title em { color: oklch(0.8 0.1 80); }
.sx-dark .h-lead, .sx-dark .courses-sub { color: var(--on-night-soft); }
.sx-dark .sayit-tabs { background: oklch(1 0 0 / .06); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .12); }
.sx-dark .sayit-tab { color: var(--on-night-soft); }
.sx-dark .sayit-tab:hover { background: oklch(1 0 0 / .08); color: var(--on-night); }
.sx-dark .sayit-tab.is-on { background: oklch(0.8 0.1 80); color: var(--night); }
.sx-dark .sayit-label { color: var(--on-night-soft); }
.sx-dark .sayit-input { background: oklch(0.13 0.02 255 / .6); color: var(--on-night); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .16); }
.sx-dark .sayit-chip span { background: oklch(1 0 0 / .06); color: var(--on-night); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .16); }
.sx-dark .sayit-chip input:checked + span { background: oklch(0.8 0.1 80); color: var(--night); }
.sx-dark .sayit-card { background: radial-gradient(120% 100% at 100% 0%, oklch(0.3 0.045 255), oklch(0.2 0.03 255) 60%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .6), inset 0 0 0 1px oklch(0.8 0.1 80 / .3), 0 60px 120px -50px oklch(0 0 0 / .9), 0 0 120px -40px oklch(0.8 0.1 80 / .55); }
@media (min-width: 960px) {
  .sx-stage { padding: 160px 0; }
}
.sx-sec .sayit-grid { margin-top: 8px; }
.sx-q-card [data-body] { display: grid; gap: 16px; }
.sx-bigplay { display: flex; align-items: center; gap: 16px; padding: 16px 20px 16px 14px; border: 0; border-radius: 20px; cursor: pointer; text-align: left; color: var(--on-night); background: oklch(1 0 0 / .06); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .4); transition: translate .4s var(--ease-p3), box-shadow .4s; }
.sx-bigplay .sayit-play-ic { width: 56px; height: 56px; }
.sx-bigplay .sayit-play-ic svg { width: 26px; height: 26px; }
.sx-bigplay b { display: block; font: 400 24px/1.1 "Newsreader", Georgia, serif; }
.sx-bigplay small { display: block; margin-top: 4px; font-size: 13px; color: var(--on-night-muted); }
.sx-bigplay:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .8), 0 0 40px -14px oklch(0.8 0.1 80 / .7); }
.sx-bigplay.is-playing { box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80), 0 0 0 6px oklch(0.8 0.1 80 / .15); }
.sx-bigplay .wv { display: none; }
.sx-bigplay.is-playing .pl { display: none; }
.sx-bigplay.is-playing .wv { display: inline; }
.sx-bigplay.is-playing .wv rect { transform-origin: center; transform-box: fill-box; animation: say-wv .8s ease-in-out infinite; }
.sx-q { margin: 4px 0 0; font: italic 400 20px/1.3 "Newsreader", Georgia, serif; color: var(--on-night-soft); }
.sx-opts { display: grid; gap: 8px; }
.sx-opt { min-height: 52px; padding: 12px 18px; border: 0; border-radius: 16px; text-align: left; cursor: pointer; font: 600 16px/1.3 var(--font); color: var(--on-night); background: oklch(1 0 0 / .05); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .14); transition: background-color .35s, box-shadow .35s, translate .35s var(--ease-p3); }
.sx-opt:not(:disabled):hover { translate: 4px 0; box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .7); }
.sx-opt:disabled { cursor: default; opacity: .55; }
.sx-opt.is-right { opacity: 1; background: oklch(0.8 0.1 80); color: var(--night); box-shadow: 0 10px 30px -12px oklch(0.8 0.1 80 / .8); }
.sx-opt.is-wrong { opacity: 1; background: oklch(0.6 0.16 25 / .25); box-shadow: inset 0 0 0 1px oklch(0.7 0.16 25 / .7); animation: say-shake .5s; }
.sx-fb { margin: 0; min-height: 1.3em; font: italic 400 18px/1.3 "Newsreader", Georgia, serif; color: oklch(0.8 0.1 80); }
.sx-reveal[hidden] { display: none; }
.sx-reveal { display: grid; gap: 8px; animation: say-drop .5s cubic-bezier(.215,.61,.355,1); }
.sx-read-ps { margin: 0; text-align: center; font: 600 clamp(44px, 6vw, 72px)/1.5 "Noto Naskh Arabic", serif; color: oklch(0.97 0.012 85); padding: 18px 0 10px; text-shadow: 0 0 40px oklch(0.8 0.1 80 / .35); }
.sx-reveal-btn { justify-self: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; font: 650 15px/1 var(--font); color: var(--night); background: oklch(0.8 0.1 80); box-shadow: 0 12px 26px -12px oklch(0.8 0.1 80 / .8); transition: translate .4s var(--ease-p3); }
.sx-reveal-btn:hover { translate: 0 -2px; }
.sx-reveal-btn[hidden] { display: none; }
.sx-toast { position: fixed; z-index: 1200; left: 50%; bottom: 24px; width: min(560px, calc(100vw - 24px)); translate: -50% 140%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 22px; color: oklch(0.97 0.012 85); background: radial-gradient(120% 140% at 0% 0%, oklch(0.3 0.045 255), oklch(0.17 0.02 255) 65%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .6), inset 0 0 0 1px oklch(0.8 0.1 80 / .35), 0 30px 70px -20px oklch(0 0 0 / .7), 0 0 60px -20px oklch(0.8 0.1 80 / .5); transition: translate .7s cubic-bezier(.215,.61,.355,1); }
.sx-toast.is-on { translate: -50% 0; }
.sx-toast-n { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font: 400 28px/1 "Newsreader", Georgia, serif; color: oklch(0.17 0.02 255); background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); }
.sx-toast b { display: block; font: 400 19px/1.2 "Newsreader", Georgia, serif; }
.sx-toast small { display: block; margin-top: 3px; font-size: 13px; color: oklch(0.85 0.02 85); }
.sx-toast-cta { grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; font-weight: 650; font-size: 14px; text-decoration: none; color: oklch(0.17 0.02 255) !important; background: oklch(0.8 0.1 80); }
.sx-toast-x { grid-row: 1; grid-column: 3; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: oklch(0.9 0.02 85); background: oklch(1 0 0 / .08); }
.sx-toast-x .ic { width: 18px; height: 18px; }
@media (min-width: 640px) {
  .sx-toast { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .sx-toast-cta { grid-column: auto; }
  .sx-toast-x { grid-column: 4; }
}
.sx-fab { position: fixed; z-index: 1100; left: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px 6px 6px; border: 0; border-radius: 999px; cursor: pointer; font: 650 14px/1 var(--font, system-ui); color: oklch(0.97 0.012 85); background: oklch(0.17 0.02 255); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .5), inset 0 0 0 1px oklch(0.8 0.1 80 / .35), 0 18px 40px -14px oklch(0 0 0 / .6); opacity: 0; translate: 0 20px; pointer-events: none; transition: opacity .5s, translate .6s cubic-bezier(.215,.61,.355,1), box-shadow .4s; }
.sx-fab.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.sx-fab:hover { box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .7), inset 0 0 0 1px oklch(0.8 0.1 80 / .7), 0 22px 44px -14px oklch(0.8 0.1 80 / .5); }
.sx-fab:focus-visible { outline: 2px solid oklch(0.8 0.1 80); outline-offset: 3px; }
.sx-fab-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: oklch(0.17 0.02 255); background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); }
.sx-fab-ic .ic { width: 20px; height: 20px; }
.sx-fab-t { display: none; }
.sx-fab-n { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; color: oklch(0.8 0.1 80); background: oklch(0.8 0.1 80 / .14); }
@media (min-width: 720px) {
  .sx-fab { left: 24px; bottom: 24px; padding-right: 10px; }
  .sx-fab-t { display: inline; }
}
.sx-drawer { width: min(640px, 100vw); max-width: 100vw; max-height: min(92vh, 900px); margin: auto auto 0; padding: 0; border: 0; border-radius: 28px 28px 0 0; color: var(--on-night); background: oklch(0.15 0.02 255); box-shadow: 0 -30px 80px -20px oklch(0 0 0 / .7), inset 0 1px 0 oklch(0.8 0.1 80 / .5); overflow: auto; overscroll-behavior: contain; }
.sx-drawer[open] { animation: sx-up .6s cubic-bezier(.215,.61,.355,1); }
@keyframes sx-up { from { translate: 0 40px; opacity: 0; } }
.sx-drawer::backdrop { background: oklch(0.1 0.02 255 / .55); backdrop-filter: blur(4px); }
.sx-drawer-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px 24px; background: oklch(0.15 0.02 255); }
.sx-drawer-head b { font: italic 400 22px/1 "Newsreader", Georgia, serif; }
.sx-drawer-x { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--on-night); background: oklch(1 0 0 / .08); }
.sx-drawer-x .ic { width: 20px; height: 20px; }
.sx-drawer-body { padding: 0 16px 24px; }
.sx-drawer .sayit-tabs { background: oklch(1 0 0 / .06); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .12); }
.sx-drawer .sayit-tab { color: var(--on-night-soft); }
.sx-drawer .sayit-tab.is-on { background: oklch(0.8 0.1 80); color: var(--night); }
.sx-drawer .sayit-label { color: var(--on-night-soft); }
.sx-drawer .sayit-input { background: oklch(0.12 0.02 255); color: var(--on-night); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .16); }
.sx-drawer .sayit-chip span { background: oklch(1 0 0 / .06); color: var(--on-night); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .16); }
.sx-drawer .sayit-chip input:checked + span { background: oklch(0.8 0.1 80); color: var(--night); }
.sx-drawer .sayit-form { margin-top: 14px; }
@media (min-width: 720px) {
  .sx-drawer { margin: auto; border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-badge i, .sx-drawer[open] { animation: none; }
  .sx-toast, .sx-fab { transition: none; }
}
.sx-sec .courses-inner { max-width: var(--max, 1240px); }
.sx-inline { margin: 40px 0; padding: 24px; border-radius: 28px; background: oklch(0.17 0.02 255); color: var(--on-night); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .5), 0 40px 80px -40px oklch(0.17 0.03 255 / .7); }
.sx-inline-t { margin: 0 0 4px; font: italic 400 22px/1.3 "Newsreader", Georgia, serif; color: oklch(0.97 0.012 85); }
.sx-inline .sayit-tabs { background: oklch(1 0 0 / .06); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .12); }
.sx-inline .sayit-tab { color: var(--on-night-soft); }
.sx-inline .sayit-tab.is-on { background: oklch(0.8 0.1 80); color: var(--night); }
.sx-inline .sayit-label { color: var(--on-night-soft); }
.sx-inline .sayit-input { background: oklch(0.12 0.02 255); color: var(--on-night); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .16); }
.sx-inline .sayit-chip span { background: oklch(1 0 0 / .06); color: var(--on-night); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .16); }
.sx-inline .sayit-chip input:checked + span { background: oklch(0.8 0.1 80); color: var(--night); }
.sx-inline .sayit-card { box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .3); }
.sx-inline p, .sx-inline .sayit-ps { max-width: none; }
section.sx-stage, .cp-sec.sx-stage { background: var(--night) !important; color: var(--on-night); }
.cp-sec.sx-stage { padding: 120px 0 !important; }
@media (min-width: 960px) {
  .cp-sec.sx-stage { padding: 160px 0 !important; }
}
.sx-dark .courses-sub { color: var(--on-night-soft) !important; }
.sx-dark .courses-title { color: oklch(0.97 0.012 85) !important; }
.sx-stage .courses-sub { margin-left: 0 !important; margin-right: 0 !important; text-align: left; }
.sx-dark .courses-title em, .sx-dark .h-title em { color: oklch(0.8 0.1 80) !important; }
.geo-chip { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; min-height: 40px; padding: 6px 16px 6px 8px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: oklch(0.93 0.015 85); background: oklch(1 0 0 / .08); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .4); animation: geo-in .8s cubic-bezier(.215,.61,.355,1) both; }
.geo-chip img { width: 28px; height: 20px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px oklch(0 0 0 / .1); }
.geo-chip b { font-weight: 650; color: oklch(0.86 0.11 82); }
.geo-chip[hidden], .geo-line[hidden] { display: none; }
.geo-line { margin: 14px 0 0; display: inline-flex; align-items: center; gap: 10px; font: italic 400 19px/1.3 "Newsreader", Georgia, serif; color: oklch(0.9 0.015 85); }
.geo-line img { width: 26px; height: 18px; border-radius: 3px; object-fit: cover; }
@keyframes geo-in { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) {
  .geo-chip { animation: none; }
}
.ab-sec { padding: 72px 0; background: var(--ivory, oklch(0.97 0.012 85)); }
@media (min-width: 960px) {
  .ab-sec { padding: 96px 0; }
}
.ab-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ab-copy .courses-title, .ab-copy .h-title { margin: 0; }
.ab-copy .courses-sub, .ab-copy .h-lead { margin: 14px 0 0 !important; text-align: left; max-width: 58ch; }
.ab-ctl { display: grid; gap: 14px; }
.ab-seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; width: max-content; max-width: 100%; padding: 5px; border-radius: 999px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); }
.ab-seg-l { padding: 0 10px 0 12px; font-size: 13.5px; font-weight: 650; color: var(--muted); }
.ab-seg-b { min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; font: 650 15px/1 var(--font, system-ui); color: var(--ink); background: transparent; transition: background-color .4s, color .4s, box-shadow .4s; }
.ab-seg-b:hover { background: oklch(0.8 0.1 80 / .15); }
.ab-seg-b.is-on { color: oklch(0.97 0.012 85); background: var(--night); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .45), 0 8px 18px -8px oklch(0.17 0.02 255 / .6); }
.ab-stat { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font: italic 400 clamp(22px, 2.4vw, 28px)/1.2 "Newsreader", Georgia, serif; color: var(--ink); }
.ab-stat b { font: 400 clamp(64px, 8vw, 104px)/1.05 "Newsreader", Georgia, serif; font-style: normal; letter-spacing: -0.04em; color: var(--gold-ink); font-variant-numeric: tabular-nums; padding-top: .04em; }
.ab-sub { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-soft, var(--muted)); max-width: 56ch; text-wrap: pretty; }
.ab-legend { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 600; color: var(--ink); }
.ab-legend li { display: inline-flex; align-items: center; gap: 8px; }
.ab-dot { width: 14px; height: 14px; border-radius: 5px; }
.ab-dot--known { background: var(--canvas); box-shadow: inset 0 0 0 1.5px oklch(0.6 0.03 255 / .4); }
.ab-dot--sim { background: oklch(0.8 0.1 80 / .45); box-shadow: inset 0 0 0 1.5px oklch(0.6 0.1 70 / .6); }
.ab-dot--new { background: var(--night); box-shadow: 0 0 0 2px oklch(0.8 0.1 80 / .5); }
.ab-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.ab-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.ab-tile { width: 100%; aspect-ratio: 1 / 1.08; display: grid; place-items: center; align-content: center; gap: 0; padding: 4px; border: 0; border-radius: 16px; cursor: pointer; color: var(--ink); background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); opacity: 0; translate: 0 14px; transition: opacity .7s cubic-bezier(.215,.61,.355,1) var(--d), translate .7s cubic-bezier(.215,.61,.355,1) var(--d), background-color .5s, color .5s, box-shadow .5s, scale .4s; }
.ab-wrap.is-in .ab-tile { opacity: 1; translate: 0 0; }
.ab-tile span { font: 500 clamp(28px, 3vw, 36px)/1.5 "Noto Naskh Arabic", serif; }
.ab-tile small { margin-top: -4px; font-size: 11.5px; font-weight: 650; color: var(--muted); direction: ltr; transition: color .5s; }
.ab-tile[data-cat="known"] { opacity: .62; }
.ab-wrap.is-in .ab-tile[data-cat="known"] { opacity: .62; }
.ab-tile[data-cat="sim"] { background: oklch(0.93 0.05 85); box-shadow: var(--shadow-1), inset 0 0 0 1px oklch(0.6 0.1 70 / .45); }
.ab-tile[data-cat="new"] { color: oklch(0.97 0.012 85); background: radial-gradient(120% 120% at 50% 0%, oklch(0.3 0.045 255), var(--night) 70%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .6), 0 12px 24px -12px oklch(0.17 0.02 255 / .8), 0 0 24px -10px oklch(0.8 0.1 80 / .6); }
.ab-tile[data-cat="new"] small { color: oklch(0.86 0.11 82); }
.ab-wrap.is-flip .ab-tile { animation: ab-flip .7s cubic-bezier(.215,.61,.355,1) both; animation-delay: var(--d); }
@keyframes ab-flip { 0% { transform: perspective(500px) rotateY(0); } 50% { transform: perspective(500px) rotateY(90deg); } 100% { transform: perspective(500px) rotateY(0); } }
.ab-tile.is-sel { opacity: 1 !important; scale: 1.06; box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px oklch(0.75 0.11 78), 0 14px 30px -12px oklch(0.8 0.1 80 / .7); }
.ab-tile:focus-visible { outline: 2px solid oklch(0.75 0.11 78); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ab-tile:hover { opacity: 1 !important; scale: 1.06; }
}
.ab-card { position: relative; display: grid; gap: 10px; padding: 26px 28px 24px; border-radius: 28px; overflow: hidden; color: var(--on-night, oklch(0.93 0.015 85)); background: radial-gradient(120% 90% at 100% 0%, oklch(0.3 0.045 255), oklch(0.17 0.02 255) 62%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .55), inset 0 0 0 1px oklch(0.8 0.1 80 / .25), 0 50px 100px -50px oklch(0.17 0.03 255 / .8), 0 0 80px -40px oklch(0.8 0.1 80 / .5); }
.ab-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ab-pill { min-height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.ab-pill--known { color: oklch(0.93 0.015 85); background: oklch(1 0 0 / .1); }
.ab-pill--sim { color: oklch(0.17 0.02 255); background: oklch(0.88 0.06 85); }
.ab-pill--new { color: oklch(0.17 0.02 255); background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); }
.ab-idx { font-size: 13px; font-weight: 600; color: oklch(0.75 0.02 255); font-variant-numeric: tabular-nums; }
.ab-big { margin: 0; text-align: center; font: 500 clamp(120px, 14vw, 168px)/1.45 "Noto Naskh Arabic", serif; color: oklch(0.97 0.012 85); text-shadow: 0 0 50px oklch(0.8 0.1 80 / .45); }
.ab-big.is-ink { animation: ab-ink 1.1s cubic-bezier(.65,0,.35,1) both; }
@keyframes ab-ink { from { clip-path: inset(0 0 0 100%); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.ab-name { margin: -10px 0 0; text-align: center; font: italic 400 30px/1.1 "Newsreader", Georgia, serif; color: oklch(0.86 0.11 82); }
.ab-sound { margin: 0; text-align: center; font-size: 15.5px; color: oklch(0.85 0.02 85); }
.ab-sound b { color: oklch(0.97 0.012 85); font-weight: 650; }
.ab-forms { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; direction: rtl; }
.ab-forms li { display: grid; justify-items: center; padding: 8px 6px 10px; border-radius: 14px; background: oklch(1 0 0 / .06); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .1); direction: ltr; }
.ab-forms span { font: 500 34px/1.6 "Noto Naskh Arabic", serif; color: oklch(0.97 0.012 85); }
.ab-forms small { font-size: 12px; font-weight: 600; color: oklch(0.75 0.02 255); }
.ab-note { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: oklch(0.85 0.02 85); text-wrap: pretty; }
.ab-nav { display: flex; justify-content: flex-end; gap: 8px; }
.ab-nav button { width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; font: 400 24px/1 var(--font, system-ui); color: oklch(0.93 0.015 85); background: oklch(1 0 0 / .08); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .14); transition: background-color .3s, color .3s; }
.ab-nav button:hover { background: oklch(0.8 0.1 80); color: oklch(0.17 0.02 255); }
.ab-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.ab-foot p { margin: 0; font: italic 400 18px/1.4 "Newsreader", Georgia, serif; color: var(--ink); }
@media (min-width: 960px) {
  .ab-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
  .ab-body { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; }
  .ab-grid { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 10px; }
  .ab-card { position: sticky; top: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-tile { opacity: 1; translate: none; transition: none; }
  .ab-wrap.is-flip .ab-tile { animation: none; }
}
.ab-sec .h-wrap, .ab-sec .courses-inner { display: grid; gap: 28px; }
.ab-sec [data-alphabet] { margin: 0; }
.ab-foot { margin: 0 !important; }