@import url("ds/tokens.css");
@import url("ds/components.css");
/* base.css (owner DS since v2): fonts, page ground, header, footer, language switch, focus and motion rules shared by
   every page (tool, order page, landings, legal, app). The design tokens and the component layer come in through the
   two @imports above, so any page that links base.css has the whole design system. Ink + white + one red.
   Fonts: Cabinet (display), Inter Tight (text), Plex Mono (labels and data runs), Noto Kufi Arabic (Arabic display).
   IBM Plex Sans Arabic (Arabic text and UI) is declared by AR in ar.css with its files; tokens.css already names it. */
@font-face{font-family:"Cabinet";src:url("/assets/fonts/cabinet-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cabinet";src:url("/assets/fonts/cabinet-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("/assets/fonts/inter-tight-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/assets/fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/assets/fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
/* Size-adjusted fallbacks (P1-to-DS-01, PRODUCT_V2 10.2): until a face arrives, its text is drawn by a local system face
   scaled to the same width and line metrics, so a late font does not re-wrap the page. Measured with fontTools against
   Arial / Arial Bold / Courier New and checked in Chrome (paragraph width within 0.5%, same line-box height). Latin only:
   Arabic letters never fall to Arial (the Arabic faces come next in every stack). */
@font-face{font-family:"Cabinet Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 900;size-adjust:90.54%;ascent-override:96.10%;descent-override:30.93%;line-gap-override:9.94%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-205F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cabinet Fallback";src:local("Arial"),local("ArialMT");font-weight:100 599;size-adjust:95.37%;ascent-override:91.23%;descent-override:29.36%;line-gap-override:9.44%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-205F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight Fallback";src:local("Arial"),local("ArialMT");font-weight:100 549;size-adjust:95.87%;ascent-override:101.04%;descent-override:25.16%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-205F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 900;size-adjust:92.68%;ascent-override:104.53%;descent-override:26.03%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-205F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono Fallback";src:local("Courier New"),local("CourierNewPSMT");font-weight:100 900;size-adjust:99.98%;ascent-override:102.52%;descent-override:27.50%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-205F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
/* Kufi is used at 700 only (6.3). The weight is 700 (not the file's 100-900 range) so this face and AR's Latin-punctuation
   Kufi face (ar.css, 700) form ONE family group: with different weight descriptors Chrome picks one group and the
   Arabic letters of every headline fell to Plex Sans Arabic (cheap-tells "headlines use the display faces only"). */
@font-face{font-family:"Noto Kufi Arabic";src:url("/assets/fonts/noto-kufi-arabic-arabic-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0020,U+00A0,U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:400 16px/1.5 var(--font-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}img,video{max-width:100%}
::selection{background:var(--selection);color:#fff}
/* Arabic: every :lang(ar) / html[lang=ar] rule lives in AR's ar.css (linked last); tokens.css swaps the families and the
   type scale (CR AR-to-DS-01). */
bdi{unicode-bidi:isolate}
.nw{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* the red glow breathes twice and settles (decoration stops within 5 s, WCAG 2.2.2) */
.glow{position:fixed;width:70vmax;height:70vmax;left:50%;top:-35vmax;transform:translateX(-50%);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(225,37,27,.18),rgba(225,37,27,.05) 45%,transparent 70%);animation:breathe 2.5s var(--ease-io) 2 alternate both}
@keyframes breathe{from{opacity:.7;transform:translateX(-50%) scale(.96)}to{opacity:1;transform:translateX(-50%) scale(1.04)}}

/* header */
.top{position:relative;z-index:var(--z-header);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--h-header);padding:var(--s-4) clamp(18px,4vw,40px)}
.brand{display:flex;align-items:center;gap:10px;min-height:var(--tap-min);border-radius:var(--r-xs);text-decoration:none;direction:ltr}
@media (pointer:coarse){.brand{min-height:var(--tap)}}
.brand svg{height:20px;width:auto}.brand .w{fill:#fff}.brand .k{fill:var(--bg)}.brand .r{fill:var(--red)}
.brand b{font:800 18px/1 "Cabinet",var(--font-display);letter-spacing:-.02em}
.top-r{display:flex;align-items:center;gap:clamp(10px,2vw,18px)}
.status-dot{display:flex;align-items:center;gap:8px;color:var(--fg-3);font:400 var(--fs-label)/1.2 var(--font-label);letter-spacing:.04em;white-space:nowrap}
.status-dot i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(62,207,142,.6);animation:ping 1.6s var(--ease-io) 3}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(62,207,142,.5)}70%{box-shadow:0 0 0 8px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
.lang{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--glass-2);box-shadow:var(--edge-2);color:var(--fg-2);
  font-size:14px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.lang:hover{color:var(--fg);box-shadow:var(--edge-strong);background:rgba(255,255,255,.07)}
.lang svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
/* the header link to the tool is quiet: the page's one red button is in the hero (one primary per screen, 2.3) */
.mini{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:var(--r-pill);background:var(--ink-3);box-shadow:var(--edge-field);color:var(--fg);
  font:600 13px/1 var(--font-text);text-decoration:none;white-space:nowrap;transition:box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.mini:hover{background:var(--ink-4);box-shadow:var(--edge-strong)}
@media (pointer:coarse){.lang,.mini{height:var(--tap);min-width:var(--tap);justify-content:center}}
@media (max-width:520px){.top{min-height:64px;padding:var(--s-3) var(--s-4)}.top .status-dot{display:none}.top .mini{display:none}}

/* slim footer */
.foot{position:relative;z-index:1;padding:var(--s-7) var(--pad) var(--s-8);color:var(--fg-3);font-size:13px;line-height:1.6;text-align:center}
.foot a{color:var(--fg-3);border-radius:var(--r-xs);text-decoration:none;transition:color var(--dur-2)}
.foot a:hover{color:var(--fg)}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;max-width:980px;margin:0 auto 10px}
.foot p{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:0}
.foot .sep{opacity:.5}

.err{min-height:20px;margin:10px 4px 0;color:var(--red-2);font-size:14px}
/* one focus style everywhere: 2 px white outline, 2 px offset, never removed (2.3) */
:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}}