:root {
  color-scheme: light;

  --nh: 220;

  --bg:            hsl(var(--nh) 22% 96.5%);
  --bg-grid:       hsl(var(--nh) 20% 92%);
  --surface:       hsl(0 0% 100%);
  --surface-2:     hsl(var(--nh) 24% 98%);
  --surface-3:     hsl(var(--nh) 20% 95%);
  --text:          hsl(var(--nh) 28% 12%);
  --text-muted:    hsl(var(--nh) 10% 40%);
  --text-faint:    hsl(var(--nh) 9% 56%);
  --border:        hsl(var(--nh) 16% 87%);
  --border-soft:   hsl(var(--nh) 18% 92%);
  --border-strong: hsl(var(--nh) 14% 74%);
  --glass:         hsl(0 0% 100% / .78);
  --sbar-thumb:    hsl(var(--nh) 14% 46% / .38);
  --sbar-thumb-on: hsl(var(--nh) 16% 34% / .62);
  --sbar-track:    hsl(var(--nh) 20% 40% / .07);
  --chip-sheen:    hsl(0 0% 100% / .22);
  --chip-shadow:   0 1px 1px hsl(var(--nh) 30% 20% / .04);
  --chip-on-fg:    hsl(0 0% 100%);

  --shadow-sm: 0 1px 2px hsl(var(--nh) 30% 20% / .06), 0 1px 3px hsl(var(--nh) 30% 20% / .05);
  --shadow-md: 0 2px 6px hsl(var(--nh) 30% 20% / .07), 0 8px 24px hsl(var(--nh) 30% 20% / .07);
  --shadow-lg: 0 4px 12px hsl(var(--nh) 30% 20% / .10), 0 24px 60px hsl(var(--nh) 30% 20% / .14);

  --r-xs: 5px;  --r-sm: 8px;  --r-md: 11px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-fa: 'Vazirmatn', 'Segoe UI', Tahoma, 'Iranian Sans', Arial, sans-serif;

  --band-h: 30px;
  --ladder-h: 34px;
  --skill-col: 214px;
  --gutter: 16px;
  --cell-w: 46px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg:            hsl(var(--nh) 24% 7.5%);
  --bg-grid:       hsl(var(--nh) 20% 13%);
  --surface:       hsl(var(--nh) 21% 11%);
  --surface-2:     hsl(var(--nh) 19% 13.5%);
  --surface-3:     hsl(var(--nh) 17% 17%);
  --text:          hsl(var(--nh) 24% 93%);
  --text-muted:    hsl(var(--nh) 13% 67%);
  --text-faint:    hsl(var(--nh) 10% 50%);
  --border:        hsl(var(--nh) 16% 21%);
  --border-soft:   hsl(var(--nh) 16% 17%);
  --border-strong: hsl(var(--nh) 14% 33%);
  --glass:         hsl(var(--nh) 22% 11% / .80);
  --sbar-thumb:    hsl(var(--nh) 18% 78% / .30);
  --sbar-thumb-on: hsl(var(--nh) 22% 88% / .55);
  --sbar-track:    hsl(var(--nh) 25% 85% / .07);
  --chip-sheen:    hsl(0 0% 100% / .07);
  --chip-shadow:   none;
  --chip-on-fg:    hsl(var(--nh) 32% 10%);

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / .40);
  --shadow-md: 0 2px 8px hsl(0 0% 0% / .45), 0 10px 28px hsl(0 0% 0% / .35);
  --shadow-lg: 0 6px 16px hsl(0 0% 0% / .50), 0 28px 70px hsl(0 0% 0% / .55);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 8% -12%,  var(--glow-a), transparent 62%),
    radial-gradient(950px 560px at 104% 4%,   var(--glow-b), transparent 60%),
    radial-gradient(900px 700px at 46% 118%,  var(--glow-c), transparent 62%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

html[lang='fa'] body { font-family: var(--font-fa); line-height: 1.85; }

[data-script='latin'] { font-family: var(--font); direction: ltr; }
[data-script='arabic'] { font-family: var(--font-fa); direction: rtl; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

:where(a) { color: var(--accent); text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent); color: var(--accent-fg); }

* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}