@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Black.woff2) format("woff2");font-weight:900;font-display:swap}

/* Deeps — the site's one design system: the download page, the panels and the error pages are built from it.
   Brand blues from the logo: navy #034569, blue #086ca2, light blue #3c9dd0. Dark, unless the visitor chose light (the
   header's switch: <html data-theme="light">); every colour is a token, the same as the app's. Flat: a surface stands
   apart by its colour alone (no shadows, no gradients, no outlines around cards or buttons), so the steps are large
   and measured (REQUIREMENTS.md §3, core's tests): at least 6 of lightness between surfaces that touch, 4 for a hover;
   words 7:1, quiet ones 4.5:1. The pointer changes only a background colour (nothing moves or grows); a coloured
   button turns darker under it. One page width (--w) for every page, one spacing scale
   (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64), two radii, one type scale, one control height. */
:root{
  color-scheme:dark;
  --w:1080px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r-sm:12px;--r:16px;
  --fs-xs:.8125rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.125rem;--fs-xl:1.5rem;--fs-2xl:2rem;
  --h:44px;
  --bg:#060f18;--card:#0e1d2c;--inset:#162b3f;--raised:#253d55;--raised-hot:#2d4964;--popup:#2a4664;--field:#1b3147;
  --line:rgba(255,255,255,.12);--hover:rgba(255,255,255,.08);--text:#e8f1f8;--muted:#a6b9cb;
  --navy:#034569;--a1:#086ca2;--accent:#56b1e0;--accent-bg:rgba(86,177,224,.18);--on:#56b1e0;--sign:#060f18;
  --primary:#086ca2;--primary-hot:#075b89;--primary-down:#034569;
  --ok:#34d399;--ok-bg:rgba(52,211,153,.12);--warn:#fbbf24;--warn-bg:rgba(251,191,36,.12);
  --danger:#f87171;--danger-strong:#d42020;--danger-hot:#b91c1c;--danger-bg:rgba(248,113,113,.12);
}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#e4eaf0;--card:#ffffff;--inset:#e9eef3;--raised:#cdd7e2;--raised-hot:#bccad7;--popup:#cdd7e2;--field:#e9eef3;
  --line:rgba(11,25,38,.16);--hover:rgba(11,25,38,.08);--text:#0b1926;--muted:#455566;
  --accent:#075f8f;--accent-bg:rgba(8,108,162,.14);--on:#086ca2;--sign:#ffffff;
  --ok:#0a6e4b;--ok-bg:rgba(10,110,75,.12);--warn:#8a5208;--warn-bg:rgba(168,101,12,.12);
  --danger:#c62828;--danger-strong:#d42020;--danger-hot:#b91c1c;--danger-bg:rgba(198,40,40,.1);
}

/* ---- base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:Vazirmatn,Tahoma,sans-serif;font-size:var(--fs-md);line-height:1.8;background:var(--bg);color:var(--text);
  overflow-x:hidden;
}
.wrap{width:min(var(--w),100% - 32px);margin-inline:auto;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
svg{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- the header and the footer: the same on every page ---- */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-block:var(--s5)}
.brand{display:flex;gap:var(--s3);align-items:center;font-weight:900;font-size:var(--fs-xl);line-height:1;text-decoration:none}
.brand img{width:40px;height:40px;display:block}
.ends{display:flex;align-items:center;gap:var(--s2);min-width:0}
.nav{display:flex;align-items:center;gap:var(--s2)}
.b.theme{padding:0;width:var(--h);color:var(--text)}
.who{display:flex;align-items:center;gap:var(--s2);min-width:0}
.who .name{min-width:0;max-width:240px;padding-inline:var(--s2) var(--s3)}
.who .name bdi{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* a player's round picture (Deeps' default one when they have none) */
.face{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;display:block;background:var(--raised)}
.face.lg{width:96px;height:96px}
.face.none{display:grid;place-items:center;color:#fff;background:var(--a1)}
.face.none svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
footer{border-top:1px solid var(--line);margin-top:var(--s6);padding:var(--s6) 0 var(--s7);color:var(--muted);font-size:var(--fs-sm);
  text-align:center}

/* ---- buttons: one shape (the control height, the small radius), five kinds, one large size ---- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--h);padding:0 var(--s5);
  border-radius:var(--r-sm);border:0;background:transparent;color:var(--text);font:inherit;
  font-size:var(--fs-md);font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .15s,color .15s}
.b svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b.primary{color:#fff;background:var(--primary)}
.b.primary:hover{background:var(--primary-hot)}
.b.primary:active{background:var(--primary-down)}
.b.secondary{background:var(--raised)}
.b.secondary:hover{background:var(--raised-hot)}
.b.ghost{color:var(--accent);padding-inline:var(--s3)}
.b.ghost:hover{background:var(--raised)}
.b.danger{color:#fff;background:var(--danger-strong)}
.b.danger:hover{background:var(--danger-hot)}
.b.ghost.danger{color:var(--danger);background:transparent}
.b.ghost.danger:hover{background:var(--danger-bg)}
.b.lg{min-height:56px;padding:0 var(--s6);border-radius:var(--r);font-size:var(--fs-lg)}
.b.lg svg{width:24px;height:24px}
.b.block{width:100%}
.b.off{background:var(--raised);color:var(--muted);cursor:default;pointer-events:none}
/* pressed: a spinner in place of its words, the button's size and colour kept (nothing moves); it takes no other press
   until the next page (assets/site.js) */
.b.is-busy{position:relative;pointer-events:none;-webkit-text-fill-color:transparent}
.b.is-busy svg{visibility:hidden}
.b.is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2px solid currentColor;border-inline-end-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- a card: the surface every block of content sits on ---- */
.card{background:var(--card);border-radius:var(--r);padding:var(--s5)}
.card-title{font-size:var(--fs-lg);font-weight:700;line-height:1.5;margin-bottom:var(--s4)}
.card > :last-child{margin-bottom:0}

/* ---- fields: the label above, never a hint inside ---- */
.field{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}
.field label{font-size:var(--fs-sm);font-weight:700}
fieldset{border:0;min-width:0}
fieldset.field{display:block}
fieldset.field legend{font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--s2)}
input:not([type=radio]):not([type=checkbox]){width:100%;min-height:var(--h);padding:0 var(--s3);border-radius:var(--r-sm);
  border:0;background:var(--field);color:var(--text);font:inherit;font-size:var(--fs-md)}
/* a field the browser filled in keeps the field's own colours (its background painted over the browser's) */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:autofill{
  -webkit-text-fill-color:var(--text);caret-color:var(--text);-webkit-box-shadow:0 0 0 100px var(--field) inset;
  box-shadow:0 0 0 100px var(--field) inset;transition:background-color 86400s}
/* a picture to send: the site's own button and words, over the browser's control (kept, unseen, to be pressed: the
   keyboard and the browser's own check of a required field still work); the ring only from the keyboard */
.file{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:var(--h);padding:5px;border-radius:var(--r-sm);
  background:var(--field)}
.file .b{min-height:32px;padding:0 var(--s4);border-radius:8px;font-size:var(--fs-sm)}
.file:hover .b{background:var(--raised-hot)}
.file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:var(--fs-sm)}
.field .file input{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;opacity:0;cursor:pointer}
.file:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
/* the field being typed in: the accent's ring (a choice gets one only from the keyboard, round as it is) */
input:not([type=radio]):not([type=checkbox]):focus{outline:2px solid var(--accent);outline-offset:-2px}
.help{color:var(--muted);font-size:var(--fs-xs);line-height:1.7}
.choice + .help:not(:last-child){margin-bottom:var(--s4)}  /* a choice's own words: as far from what follows as a field */
/* a choice, drawn by the site (never the browser's): a round one of a group, a square one on its own */
.choice{display:flex;align-items:center;gap:var(--s3);min-height:var(--h);cursor:pointer}
.choice input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;flex:none;display:grid;
  place-items:center;border:0;border-radius:6px;background:var(--field);cursor:pointer;transition:background-color .15s}
.choice input[type=radio]{border-radius:50%}
.choice:hover input:not(:checked){background:var(--raised-hot)}
.choice input:checked{background:var(--on)}
.choice input[type=radio]:checked::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sign)}
.choice input[type=checkbox]:checked::before{content:"";width:5px;height:10px;margin-top:-3px;border:solid var(--sign);
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.choice input:focus{outline:0}
.choice input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s4)}
.cols > .field{margin-bottom:0}

/* ---- what happened: one line above the content ---- */
.flash{border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin-bottom:var(--s4);font-size:var(--fs-sm);font-weight:700}
.flash.ok{color:var(--ok);background:var(--ok-bg)}
.flash.bad{color:var(--danger);background:var(--danger-bg)}

/* ---- a state in one word ---- */
.tag{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--s3);border-radius:999px;font-size:var(--fs-xs);
  font-weight:700;line-height:1;white-space:nowrap;background:var(--accent-bg);color:var(--accent)}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.bad{background:var(--danger-bg);color:var(--danger)}
.tag.off{background:var(--raised);color:var(--muted)}
.muted{color:var(--muted)}

/* ---- the download page ---- */
.hero{padding:var(--s8) 0 var(--s7);text-align:center}
.badge{display:inline-flex;gap:var(--s2);align-items:center;min-height:32px;padding:0 var(--s4);
  border-radius:999px;color:var(--muted);font-size:var(--fs-sm);background:var(--card)}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.hero h1{font-weight:900;font-size:clamp(2rem,5.4vw,3.5rem);line-height:1.3;margin:var(--s5) auto var(--s4);max-width:17ch;
  text-wrap:balance}
.grad{color:var(--accent)}
.lead{color:var(--muted);font-size:var(--fs-lg);max-width:42rem;margin-inline:auto;text-wrap:balance}
.cta{margin-top:var(--s6);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.meta{color:var(--muted);font-size:var(--fs-sm)}
.band{padding:var(--s7) 0}
.band-title{font-weight:900;font-size:clamp(1.5rem,3vw,2rem);line-height:1.4;text-align:center;margin-bottom:var(--s6);text-wrap:balance}

/* Six features: 3 + 3 on wide screens, 2 + 2 + 2 on tablets, one column on phones - always balanced. */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.feature{display:flex;flex-direction:column;gap:var(--s2)}
.icon{width:48px;height:48px;border-radius:var(--r-sm);display:grid;place-items:center;margin-bottom:var(--s2);background:var(--accent-bg)}
.icon svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature h3,.step h3{font-size:var(--fs-lg);font-weight:700;line-height:1.5}
.feature p,.step p{color:var(--muted)}

/* Three steps in a row, or one under another on narrow screens. */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.step{display:flex;flex-direction:column;gap:var(--s2)}
.step::before{counter-increment:s;content:counter(s,persian);display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;font-weight:900;color:#fff;background:var(--a1);margin-bottom:var(--s2)}

/* ---- an error page: the code in the brand's blue, what happened, one way back ---- */
.error{padding:var(--s8) 0 var(--s7);text-align:center;min-height:52vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center}
.error .code{font-weight:900;font-size:clamp(4.5rem,16vw,8rem);line-height:1;letter-spacing:4px;
  color:var(--accent)}
.error h1{font-weight:900;font-size:clamp(1.5rem,4.4vw,2rem);line-height:1.4;margin:var(--s5) auto var(--s2)}

@media (max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.who .name bdi{display:none}.who .name{padding-inline:var(--s2)}}  /* phones: the picture alone */
@media (max-width:560px){
  .grid3{grid-template-columns:minmax(0,1fr)}
  .hero{padding:var(--s7) 0 var(--s6)}
  .band{padding:var(--s6) 0}
  .cols{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}