@import "https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap";:root{--font-display:"Noto Kufi Arabic", "Reem Kufi", system-ui, sans-serif;--font-body:"Tajawal", "Noto Kufi Arabic", system-ui, sans-serif;--font-numeric:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;--font-arabic:"Noto Kufi Arabic", "Tajawal", serif;--sand-050:#fbf6ec;--sand-100:#f4ecdc;--sand-200:#e7dbc4;--sand-300:#d3c3a5;--sand-400:#b3a184;--sand-500:#8d7c62;--ink-900:#100e0b;--ink-850:#16130f;--ink-800:#1c1813;--ink-700:#241f18;--ink-600:#302a20;--ink-500:#443b2d;--ink-400:#5c5140;--saffron-300:#f7d288;--saffron-400:#f0bc55;--saffron-500:#e0a32e;--saffron-600:#bd8420;--saffron-700:#8f6116;--green-300:#8ec99a;--green-400:#4fa564;--green-500:#2f8f4e;--green-600:#237040;--green-700:#164d2c;--glaze-300:#7bc3b8;--glaze-400:#47a094;--glaze-500:#2f7c74;--glaze-600:#245f59;--glaze-700:#17403c;--clay-300:#e8a58a;--clay-400:#d47e5c;--clay-500:#c05b3b;--clay-600:#9c452b;--clay-700:#6d2e1c;--alpha-ink-06:#100e0b0f;--alpha-ink-10:#100e0b1a;--alpha-ink-45:#100e0b73;--alpha-sand-08:#f4ecdc14;--alpha-sand-14:#f4ecdc24;--alpha-saffron-16:#e0a32e29;--alpha-saffron-32:#e0a32e52;--line-alpha:var(--alpha-ink-06);--bg-page:var(--sand-050);--bg-surface:#fffdf8;--bg-raised:#fffdf8;--bg-sunken:var(--sand-100);--bg-input:#fffdf8;--bg-hover:var(--alpha-ink-06);--bg-active:var(--alpha-ink-10);--text-body:var(--ink-800);--text-strong:var(--ink-900);--text-muted:var(--sand-500);--text-faint:var(--sand-400);--text-on-accent:var(--ink-900);--text-link:var(--saffron-700);--text-link-hover:var(--clay-600);--border-hairline:var(--sand-200);--border-strong:var(--sand-300);--border-accent:var(--saffron-500);--border-focus:var(--saffron-600);--accent:var(--saffron-500);--accent-hover:var(--saffron-400);--accent-press:var(--saffron-600);--accent-quiet:#e0a32e2e;--game-lower:var(--glaze-500);--game-lower-quiet:var(--glaze-300);--game-higher:var(--clay-500);--game-higher-quiet:var(--clay-300);--game-hit:var(--green-500);--game-warm:var(--saffron-500);--game-out-of-range:var(--sand-300);--state-invalid:var(--clay-500);--state-success:var(--green-500)}[data-theme=night]{--line-alpha:var(--alpha-sand-08);--bg-page:var(--ink-900);--bg-surface:var(--ink-850);--bg-raised:var(--ink-800);--bg-sunken:#0b0907;--bg-input:var(--ink-800);--bg-hover:var(--alpha-sand-08);--bg-active:var(--alpha-sand-14);--text-body:var(--sand-100);--text-strong:var(--sand-050);--text-muted:var(--sand-400);--text-faint:var(--ink-400);--text-on-accent:var(--ink-900);--text-link:var(--saffron-400);--text-link-hover:var(--saffron-300);--border-hairline:var(--ink-600);--border-strong:var(--ink-500);--border-accent:var(--saffron-600);--border-focus:var(--saffron-400);--accent-quiet:var(--alpha-saffron-16);--game-lower-quiet:var(--glaze-700);--game-higher-quiet:var(--clay-700);--game-hit:var(--green-400);--game-out-of-range:var(--ink-500);--state-invalid:var(--clay-400);--state-success:var(--green-400)}:root{--text-display-1:76px;--text-display-2:56px;--text-display-3:40px;--text-title:28px;--text-heading:22px;--text-lead:18px;--text-body-md:16px;--text-body-sm:14px;--text-caption:12.5px;--text-micro:11px;--leading-tight:1.05;--leading-snug:1.25;--leading-normal:1.5;--leading-loose:1.7;--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-bold:700;--weight-black:800;--tracking-display:-.01em;--tracking-body:0;--tracking-label:.14em;--tracking-numeric:.02em;--type-word-hero:var(--weight-bold) var(--text-display-1) / var(--leading-tight) var(--font-display);--type-word-bound:var(--weight-medium) var(--text-display-3) / var(--leading-tight) var(--font-display);--type-title:var(--weight-bold) var(--text-title) / var(--leading-snug) var(--font-display);--type-heading:var(--weight-bold) var(--text-heading) / var(--leading-snug) var(--font-display);--type-body:var(--weight-regular) var(--text-body-md) / var(--leading-normal) var(--font-body);--type-body-sm:var(--weight-regular) var(--text-body-sm) / var(--leading-normal) var(--font-body);--type-label:var(--weight-bold) var(--text-micro) / 1.2 var(--font-body);--type-counter:var(--weight-medium) var(--text-body-sm) / 1.2 var(--font-numeric);--type-counter-lg:var(--weight-medium) var(--text-display-3) / 1 var(--font-numeric);--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--gutter-screen:var(--space-5);--gutter-screen-lg:var(--space-10);--stack-tight:var(--space-2);--stack:var(--space-4);--stack-loose:var(--space-8);--measure-prose:62ch;--width-board:560px;--width-page:1120px;--control-h:52px;--control-h-sm:38px;--tap-min:44px;--radius-xs:3px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-pill:999px;--radius-arch:200px 200px var(--radius-md) var(--radius-md);--radius-arch-sm:96px 96px var(--radius-sm) var(--radius-sm);--radius-lantern:var(--radius-pill) var(--radius-pill) var(--radius-lg) var(--radius-lg);--border-w:1px;--border-w-thick:2px;--rule-w:1px;--shadow-0:none;--shadow-1:0 1px 2px #5d4a2c1f;--shadow-2:0 1px 2px #5d4a2c14, 0 10px 24px -14px #5d4a2c4d;--shadow-3:0 6px 18px #5d4a2c24, 0 40px 80px -34px #5d4a2c61;--shadow-inset:inset 0 2px 5px #5d4a2c24;--glow-accent:0 0 0 1px var(--saffron-600), 0 4px 14px -6px #e0a32ea6;--glow-accent-strong:0 0 0 1px var(--saffron-600), 0 6px 22px -6px #e0a32ecc;--glow-correct:0 0 0 1px var(--green-600), 0 6px 22px -8px #2f8f4e8c;--glow-lower:0 0 16px -8px #2f7c7480;--glow-higher:0 0 16px -8px #c05b3b80;--ring-focus:0 0 0 2px var(--bg-page), 0 0 0 4px var(--border-focus);--blur-veil:blur(10px);--veil:var(--alpha-ink-45)}[data-theme=night]{--shadow-1:0 1px 0 #f4ecdc0a inset, 0 1px 2px #08060480;--shadow-2:0 2px 6px #08060473, 0 12px 28px -14px #080604b3;--shadow-3:0 8px 24px #08060480, 0 40px 80px -30px #080604cc;--shadow-inset:inset 0 2px 6px #0806048c;--glow-accent:0 0 0 1px var(--saffron-600), 0 6px 26px -6px var(--alpha-saffron-32);--glow-accent-strong:0 0 0 1px var(--saffron-400), 0 0 32px -2px #e0a32e80;--glow-correct:0 0 0 1px var(--green-400), 0 0 28px -4px #4fa56480;--veil:#100e0bb3}:root{--dur-instant:90ms;--dur-fast:.16s;--dur-base:.24s;--dur-slow:.42s;--dur-reveal:.7s;--dur-ambient:9s;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-settle:cubic-bezier(.16, 1, .3, 1);--motion-press:transform var(--dur-instant) var(--ease-out);--motion-hover:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);--motion-narrow:all var(--dur-slow) var(--ease-settle);--motion-enter:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);--press-scale:.97;--hover-lift:-1px}@media (prefers-reduced-motion:reduce){:root{--dur-instant:1ms;--dur-fast:1ms;--dur-base:1ms;--dur-slow:1ms;--dur-reveal:1ms;--dur-ambient:0s;--press-scale:1;--hover-lift:0px}}:root{--pattern-zellij:repeating-linear-gradient(45deg, var(--line-alpha) 0 1px, transparent 1px 28px), repeating-linear-gradient(-45deg, var(--line-alpha) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, var(--line-alpha) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, var(--line-alpha) 0 1px, transparent 1px 56px);--pattern-zellij-size:56px 56px;--pattern-rule:linear-gradient(var(--border-hairline), var(--border-hairline)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--border-hairline), var(--border-hairline)) 0 3px / 100% 1px no-repeat;--wash-lamp:radial-gradient(120% 70% at 50% -10%, var(--alpha-saffron-16), transparent 70%);--wash-cold:radial-gradient(90% 60% at 0% 0%, #2f7c7424, transparent 65%);--wash-warm:radial-gradient(90% 60% at 100% 0%, #c05b3b24, transparent 65%);--track-range:linear-gradient(90deg, var(--glaze-500), var(--saffron-500) 50%, var(--clay-500))}@keyframes ws-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes ws-fade{0%{opacity:0}to{opacity:1}}@keyframes ws-nudge{0%,to{transform:translate(0)}20%{transform:translate(-5px)}45%{transform:translate(4px)}70%{transform:translate(-2px)}}@keyframes ws-from-below{0%{opacity:0;transform:translateY(56px)scale(.97)}to{opacity:1;transform:none}}@keyframes ws-from-above{0%{opacity:0;transform:translateY(-56px)scale(.97)}to{opacity:1;transform:none}}@keyframes ws-flare{0%{box-shadow:var(--glow-accent)}40%{box-shadow:0 0 0 1px var(--saffron-300), 0 0 60px 6px #e0a32e8c}to{box-shadow:var(--glow-accent)}}@keyframes ws-breathe{0%,to{opacity:.55}50%{opacity:1}}.ws-anim-rise{animation:ws-rise var(--dur-base) var(--ease-spring) both}.ws-anim-flare{animation:ws-flare var(--dur-reveal) var(--ease-out)}.ws-anim-breathe{animation:ws-breathe var(--dur-ambient) var(--ease-in-out) infinite}*,:before,:after{box-sizing:border-box}body{background:var(--bg-page);color:var(--text-body);font:var(--type-body);letter-spacing:var(--tracking-body);text-wrap:pretty;-webkit-font-smoothing:antialiased;margin:0}[dir=rtl]{text-align:right}a{color:var(--text-link);-webkit-text-decoration-color:var(--alpha-saffron-32);text-decoration-color:var(--alpha-saffron-32);text-underline-offset:3px;transition:var(--motion-hover)}a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}:focus-visible{box-shadow:var(--ring-focus);border-radius:var(--radius-sm);outline:none}input:focus,input:focus-visible,textarea:focus,textarea:focus-visible{box-shadow:none;outline:none}::selection{background:var(--sand-200);color:var(--ink-900);text-shadow:none}input::selection{background:var(--sand-200);color:var(--ink-900)}textarea::selection{background:var(--sand-200);color:var(--ink-900)}*{-webkit-tap-highlight-color:transparent}h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--tracking-display);margin:0}p{margin:0}.ws-label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}.ws-num{font:var(--type-counter);letter-spacing:var(--tracking-numeric);font-variant-numeric:tabular-nums}.ws-arabic{font-family:var(--font-arabic);direction:rtl}:root{--tile-fill:var(--sand-200);--tile-ink:var(--ink-900);--edge:var(--sand-300);--trace:var(--saffron-500);--trace-tile:var(--saffron-300);--trace-ink:var(--ink-900);--found:var(--green-500);--found-ink:var(--sand-050);--bonus:var(--saffron-400);--bonus-ink:var(--ink-900);--reject:var(--clay-500);--reject-tile:var(--clay-300);--reject-ink:var(--ink-900);--hint-ring:var(--saffron-500);--slot-dot:var(--sand-300)}[data-theme=night]{--tile-fill:var(--ink-700);--tile-ink:var(--sand-050);--edge:var(--ink-600);--trace-tile:var(--saffron-500);--found:var(--green-400);--found-ink:var(--ink-900);--reject:var(--clay-400);--reject-tile:var(--clay-500);--hint-ring:var(--saffron-400);--slot-dot:var(--ink-500);--badge-accent-fg:var(--saffron-300);--badge-success-fg:var(--green-300)}.ag-board{--chrome:300px;width:100%;max-width:min(calc(var(--cols) * 92px), calc((100dvh - var(--chrome)) * var(--cols) / var(--rows)));min-width:calc(var(--cols) * 52px);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0 auto;display:block;overflow:visible}.ag-stage{transition:transform var(--dur-slow) var(--ease-settle)}.ag-edge{stroke:var(--edge);stroke-width:17px;stroke-linecap:round}.ag-trace-line{fill:none;stroke:var(--trace);stroke-width:21px;stroke-linecap:round;stroke-linejoin:round}.ag-trace-line[data-tone=found]{stroke:var(--found)}.ag-trace-line[data-tone=bonus]{stroke:var(--bonus)}.ag-trace-line[data-tone=reject]{stroke:var(--reject)}.ag-trace-line[data-tone]:not([data-tone=trace]){animation:ag-fade-out var(--dur-slow) var(--ease-out) .38s forwards}.ag-band{stroke:var(--trace);stroke-width:8px;stroke-linecap:round;stroke-dasharray:2 14;opacity:.6}.ag-tile{cursor:pointer;outline:none}.ag-tile .ag-body{transform-box:fill-box;transform-origin:50%}.ag-tile .ag-disc{fill:var(--tile-fill);transition:fill var(--dur-fast) var(--ease-out)}.ag-tile .ag-letter{fill:var(--tile-ink);font-family:var(--font-display);font-weight:var(--weight-black);text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill var(--dur-fast) var(--ease-out);font-size:44px}.ag-tile .ag-focus{fill:none;stroke:#0000;stroke-width:4px}.ag-tile:focus-visible .ag-focus{stroke:var(--border-focus)}.ag-tile[data-state=traced] .ag-disc{fill:var(--trace-tile)}.ag-tile[data-state=traced] .ag-letter{fill:var(--trace-ink)}.ag-tile[data-state=traced] .ag-body{animation:ag-pop var(--dur-fast) var(--ease-spring)}.ag-tile[data-state=found] .ag-disc{fill:var(--found)}.ag-tile[data-state=found] .ag-letter{fill:var(--found-ink)}.ag-tile[data-state=bonus] .ag-disc{fill:var(--bonus)}.ag-tile[data-state=bonus] .ag-letter{fill:var(--bonus-ink)}.ag-tile[data-state=reject] .ag-disc{fill:var(--reject-tile)}.ag-tile[data-state=reject] .ag-letter{fill:var(--reject-ink)}.ag-leaving{pointer-events:none;transform-box:fill-box;transform-origin:50%;animation:ag-leave var(--dur-base) var(--ease-out) .36s forwards}.ag-hint-ring{fill:none;stroke:var(--hint-ring);stroke-width:5px;stroke-dasharray:9 7;animation:ag-glow 2.4s var(--ease-in-out) infinite}.ag-hint-badge{fill:var(--hint-ring)}.ag-hint-number{fill:var(--ink-900);font-family:var(--font-numeric);font-weight:var(--weight-bold);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:20px}.ag-tracebar{width:100%;height:76px;padding:0 var(--space-4);border-radius:var(--radius-lg);background:var(--bg-sunken);border:var(--border-w) solid var(--border-hairline);box-shadow:var(--shadow-inset);transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);cursor:default;font:inherit;color:inherit;flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex;position:relative}.ag-tracebar[data-tone=trace]{border-color:var(--border-accent);cursor:pointer}.ag-tracebar[data-tone=found]{border-color:var(--found);box-shadow:var(--glow-correct)}.ag-tracebar[data-tone=bonus]{border-color:var(--bonus);box-shadow:var(--glow-accent)}.ag-tracebar[data-tone=reject]{border-color:var(--state-invalid);animation:ws-nudge var(--dur-slow) var(--ease-out)}.ag-traceword{font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-display-3);color:var(--text-strong);white-space:nowrap;direction:rtl;line-height:1.15}.ag-tracebar[data-tone=found] .ag-traceword{color:var(--found)}.ag-tracebar[data-tone=bonus] .ag-traceword{color:var(--saffron-600)}.ag-tracebar[data-tone=reject] .ag-traceword{color:var(--state-invalid)}[data-theme=night] .ag-tracebar[data-tone=bonus] .ag-traceword{color:var(--saffron-400)}.ag-tracecaption{font:var(--type-body-sm);color:var(--text-muted);text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.ag-tracebar[data-tone=found] .ag-tracecaption{color:var(--found)}.ag-tracebar[data-tone=reject] .ag-tracecaption{color:var(--state-invalid)}.ag-slot{min-height:44px;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);border:var(--border-w) dashed var(--border-strong);color:var(--text-muted);font:inherit;background:0 0;flex-direction:column;justify-content:center;align-items:center;display:inline-flex}.ag-slot[data-state=found]{border-style:solid;border-color:var(--border-hairline);border-inline-start:3px solid var(--found);background:var(--bg-raised);box-shadow:var(--shadow-1);color:var(--text-strong);cursor:pointer;animation:ws-rise var(--dur-base) var(--ease-spring) both;transition:var(--motion-hover), transform var(--dur-instant) var(--ease-out)}.ag-slot[data-state=found]:hover{background:var(--bg-hover)}.ag-slot[data-state=found]:active{transform:scale(var(--press-scale))}.ag-slot[data-state=bonus]{border-style:solid;border-color:var(--border-hairline);border-inline-start:3px solid var(--bonus);background:var(--bg-raised);color:var(--text-body);cursor:pointer;animation:ws-rise var(--dur-base) var(--ease-spring) both}.ag-slot[data-state=hinted]{border-style:solid;border-color:var(--border-accent);background:var(--accent-quiet);color:var(--text-body)}.ag-slot-word{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lead);direction:rtl;line-height:1.3}.ag-slot-cells{direction:rtl;align-items:center;gap:6px;height:28px;display:inline-flex}.ag-slot-dot{border-radius:var(--radius-pill);background:var(--slot-dot);width:8px;height:8px}.ag-slot-letter{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-body-md);color:var(--saffron-700);line-height:1}[data-theme=night] .ag-slot-letter{color:var(--saffron-400)}.ag-slot-caption{font:var(--type-body-sm);font-size:var(--text-caption);color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;max-width:14em;overflow:hidden}.ag-demo .ag-disc{fill:var(--tile-fill)}.ag-demo .ag-letter{font-size:40px}.ag-demo-step{animation:ag-demo-tile 4.8s var(--ease-out) infinite}.ag-demo-step[data-step="1"]{animation-delay:.3s}.ag-demo-step[data-step="2"]{animation-delay:.9s}.ag-demo-step[data-step="3"]{animation-delay:1.5s}.ag-demo-line{fill:none;stroke:var(--trace);stroke-width:20px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400px;animation:ag-demo-draw 4.8s var(--ease-out) infinite}.ag-demo-word{animation:ag-demo-word 4.8s var(--ease-out) infinite}@keyframes ag-pop{0%{transform:scale(1)}45%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes ag-leave{to{opacity:0;transform:scale(.55)}}@keyframes ag-fade-out{to{opacity:0}}@keyframes ag-glow{0%,to{opacity:1}50%{opacity:.4}}@keyframes ag-demo-tile{0%,4%{fill:var(--tile-fill)}8%,62%{fill:var(--trace-tile)}70%,to{fill:var(--tile-fill)}}@keyframes ag-demo-draw{0%,6%{stroke-dashoffset:400px;opacity:1}40%,62%{stroke-dashoffset:0;opacity:1}72%,to{stroke-dashoffset:0;opacity:0}}@keyframes ag-demo-word{0%,40%{opacity:0;transform:translateY(4px)}48%,66%{opacity:1;transform:none}76%,to{opacity:0;transform:none}}@media (prefers-reduced-motion:reduce){.ag-hint-ring,.ag-demo-step,.ag-demo-line,.ag-demo-word{animation:none}.ag-demo-line{stroke-dashoffset:0}}:root[data-motion=calm]{--dur-instant:1ms;--dur-fast:1ms;--dur-base:1ms;--dur-slow:1ms;--dur-reveal:1ms;--dur-ambient:0s;--press-scale:1;--hover-lift:0px}:root[data-motion=calm] *,:root[data-motion=calm] :before,:root[data-motion=calm] :after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important}[dir=rtl] button,[dir=rtl] input,[dir=rtl] select{text-align:inherit}#root{min-height:100dvh}body{overscroll-behavior-y:none}