/* Design tokens: "the pearl trader". Gulf pearl merchants settled prices in silence, by touch under a cloth, so nobody else heard the number.
   This product is that private channel. Paper is pearl grey, ink is deep sea, the primary is indigo (nila dye), and the one ornament is the nacre sheen
   that wraps the cue you are meant to read. Each kind of cue owns one hue so its colour is readable before its words. */
:root {
  /* Midnight Cobalt: a calm navy stage, one cobalt for action, emerald only for "listening". Warm paper so long reading stays easy. */
  --paper:#F6F5F1; --panel:#FFFFFF; --sunk:#ECEBE6; --ink:#0B1530; --soft:#545D73; --rule:#DCDAD3;
  --primary:#2445D6; --on-primary:#FFFFFF; --primary-soft:#E5EAFC;
  --sky:#2A64C8; --coral:#C8392B; --jade:#0E7A5A; --plum:#6B3FB0; --brass:#E0A43A; --on-brass:#1E1400; --brass-text:#7A4E08; --amber-ink:#7A4E08;
  --listen:#2FD3A0;
  --sea:#0A1A3F; --sea-2:#13275C; --on-sea:#EEF1FF; --on-sea-soft:#AEB9E2;
  --nacre:linear-gradient(115deg,#2445D6 0%,#5B7BFF 50%,#2FD3A0 100%);
  --display:"Readex Pro","IBM Plex Sans Arabic",Tahoma,sans-serif; --body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:16px; --r-lg:22px; --dock:84px; --shadow:0 1px 2px rgba(11,21,48,.06),0 8px 24px -14px rgba(11,21,48,.22);
  --petrol:var(--primary); --on-petrol:var(--on-primary); --lapis:var(--sky); --clay:var(--coral); --saffron:var(--brass-text);
}
@media (prefers-color-scheme: dark) { :root {
  --paper:#070E22; --panel:#0F1A38; --sunk:#0B1430; --ink:#ECEEF8; --soft:#9AA5CC; --rule:#22305C;
  --primary:#8EA4FF; --on-primary:#071033; --primary-soft:#18275E;
  --sky:#86B4FF; --coral:#FF8E7A; --jade:#4FD8AE; --plum:#C6A3F5; --brass:#E8B84A; --brass-text:#E8B84A; --amber-ink:#E8B84A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.6); } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.7 var(--body); padding:env(safe-area-inset-top) 0 0; min-height:100dvh; }
#app { max-width:640px; margin:0 auto; padding:18px 18px calc(var(--dock) + 28px); }
#app.plain { padding-bottom:48px; }
h1 { font:700 clamp(28px,6.4vw,40px)/1.25 var(--display); margin:10px 0 8px; letter-spacing:-.005em; }
h2 { font:600 14px/1.4 var(--body); color:var(--soft); margin:28px 0 10px; letter-spacing:.02em; }
.sub { color:var(--soft); margin:0 0 6px; max-width:36em; }
.card { background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); padding:16px 18px; margin:12px 0; box-shadow:var(--shadow); }
.card > h2:first-child { margin-top:0; } .card > summary { cursor:pointer; font-weight:600; } .card[open] > summary { margin-bottom:8px; }
:focus-visible { outline:3px solid var(--sky); outline-offset:2px; border-radius:6px; }
.hidden { display:none !important; } .err { color:var(--coral); font-weight:500; margin:10px 0 0; }
.muted { color:var(--soft); font:400 12px/1.5 var(--mono); direction:ltr; text-align:left; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* the pearl: brand mark, progress and the one place the product is ornamental */
.pearl { --s:56px; width:var(--s); aspect-ratio:1; border-radius:50%; flex:none; position:relative; display:inline-block;
  background:radial-gradient(circle at 34% 28%,#fff 0%,#FBEFF6 20%,#D9D3F6 52%,#9CA9EC 82%,#7C8CE0 100%);
  box-shadow:inset calc(var(--s) * -.1) calc(var(--s) * -.14) calc(var(--s) * .26) rgba(64,76,176,.34),0 calc(var(--s) * .18) calc(var(--s) * .4) calc(var(--s) * -.12) rgba(24,34,110,.5); }
.pearl::after { content:""; position:absolute; width:26%; height:16%; top:15%; inset-inline-start:22%; border-radius:50%; background:radial-gradient(#fff,rgba(255,255,255,0) 70%); transform:rotate(-24deg); }
.pearl.sm { --s:18px; }
.wordmark { display:inline-flex; align-items:center; color:inherit; text-decoration:none; } .wm { height:30px; width:72px; display:block; } .sprite { position:absolute; width:0; height:0; overflow:hidden; }

@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }