/* ==========================================================================
   Algorithm Atlas — tokens, reset, typography.

   The distinguishing idea: COLOUR IS SEMANTIC. Every --st-* token means the
   same thing in every visualiser — amber is "being compared" whether you are
   watching quicksort, binary search or a DP table. Learners stop decoding a
   new legend for every animation.
   ========================================================================== */

:root {
  /* --- ground & surface --- */
  --ground:       #f6f6f8;
  --ground-deep:  #eeeef1;
  --surface:      #ffffff;
  --surface-2:    #f3f3f5;
  --surface-sunk: #e9e9ed;
  --veil:         rgba(246, 246, 248, 0.78);

  /* --- ink --- */
  --ink:   #16161a;
  --ink-2: #42424b;
  --ink-3: #6a6a76;
  --ink-4: #9494a0;

  /* --- lines --- */
  --line:        rgba(20, 20, 30, 0.09);
  --line-2:      rgba(20, 20, 30, 0.15);
  --line-strong: rgba(20, 20, 30, 0.30);

  /* --- accent --- */
  --accent:      #4f46e5;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(79, 70, 229, 0.09);
  --accent-line: rgba(79, 70, 229, 0.30);

  /* ===== ALGORITHM STATE PALETTE — the design system's spine =====
     idle        untouched data
     active      the cursor / current element or node
     compare     under comparison right now
     swap        being exchanged or written
     done        finalised, will not change again
     dead        eliminated from the search space
     frontier    queued / discovered but not processed
     back        backtracked, invalid, pruned                      */
  --st-idle:      #c8c8d2;
  --st-idle-ink:  #4a4a55;
  --st-active:    #4f46e5;
  --st-compare:   #d97706;
  --st-swap:      #c026d3;
  --st-done:      #15803d;
  --st-dead:      #b4b4c0;
  --st-frontier:  #0891b2;
  --st-back:      #dc2626;

  --st-active-soft:   rgba(79, 70, 229, 0.14);
  --st-compare-soft:  rgba(217, 119, 6, 0.16);
  --st-swap-soft:     rgba(192, 38, 211, 0.14);
  --st-done-soft:     rgba(21, 128, 61, 0.14);
  --st-frontier-soft: rgba(8, 145, 178, 0.14);
  --st-back-soft:     rgba(220, 38, 38, 0.12);

  /* --- semantic (UI, distinct from algorithm state) --- */
  --good: #15803d; --good-soft: rgba(21,128,61,.10);
  --warn: #b45309; --warn-soft: rgba(180,83,9,.11);
  --bad:  #be123c; --bad-soft:  rgba(190,18,60,.09);

  /* --- complexity grades: used on every badge, consistently --- */
  --cx-1:  #147f3c;   /* O(1)        */
  --cx-lg: #4c7b0e;   /* O(log n)    */
  --cx-n:  #007899;   /* O(n)        */
  --cx-nl: #4f46e5;   /* O(n log n)  */
  --cx-n2: #b25300;   /* O(n^2)      */
  --cx-ex: #be123c;   /* O(2^n), O(n!) */

  /* --- topic hues --- */
  --t-basics:     #4f46e5;
  --t-array:      #0891b2;
  --t-string:     #0d9488;
  --t-list:       #7c3aed;
  --t-stack:      #c026d3;
  --t-tree:       #15803d;
  --t-heap:       #b45309;
  --t-graph:      #db2777;
  --t-dp:         #d97706;
  --t-greedy:     #65a30d;
  --t-advanced:   #475569;
  --t-design:     #b7860b;
  --t-interview:  #57534e;

  /* --- shadow --- */
  --lift-1: 0 1px 2px rgba(16,16,30,.06), 0 0 0 .5px rgba(16,16,30,.05);
  --lift-2: 0 4px 16px rgba(16,16,30,.08), 0 0 0 .5px rgba(16,16,30,.05);
  --lift-3: 0 18px 44px rgba(16,16,30,.15), 0 0 0 .5px rgba(16,16,30,.07);

  /* --- type --- */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
          "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --fs-micro: 0.6875rem;
  --fs-fine:  0.75rem;
  --fs-small: 0.8125rem;
  --fs-body:  0.9375rem;
  --fs-read:  1.0625rem;
  --fs-lead:  1.1875rem;
  --fs-h3:    1.3125rem;
  --fs-h2:    1.6875rem;
  --fs-h1:    2.375rem;
  --fs-hero:  clamp(2.2rem, 5.6vw, 3.7rem);

  /* --- geometry --- */
  --r-xs: 5px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
  --shell: 1220px;
  --measure: 68ch;
  --chrome-h: 52px;

  /* --- motion --- */
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .16s; --t-mid: .3s; --t-slow: .5s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:       #0b0b0f;
    --ground-deep:  #060608;
    --surface:      #15151b;
    --surface-2:    #1d1d25;
    --surface-sunk: #101016;
    --veil:         rgba(11, 11, 15, 0.78);

    --ink:   #f2f2f5;
    --ink-2: #c4c4cf;
    --ink-3: #8e8e9d;
    --ink-4: #6a6a78;

    --line:        rgba(255, 255, 255, 0.10);
    --line-2:      rgba(255, 255, 255, 0.17);
    --line-strong: rgba(255, 255, 255, 0.36);

    --accent:      #818cf8;
    --accent-ink:  #0b0b0f;
    --accent-soft: rgba(129, 140, 248, 0.16);
    --accent-line: rgba(129, 140, 248, 0.42);

    --st-idle:      #3a3a46;
    --st-idle-ink:  #a8a8b6;
    --st-active:    #818cf8;
    --st-compare:   #fbbf24;
    --st-swap:      #e879f9;
    --st-done:      #4ade80;
    --st-dead:      #2e2e38;
    --st-frontier:  #22d3ee;
    --st-back:      #fb7185;

    --st-active-soft:   rgba(129, 140, 248, 0.20);
    --st-compare-soft:  rgba(251, 191, 36, 0.20);
    --st-swap-soft:     rgba(232, 121, 249, 0.18);
    --st-done-soft:     rgba(74, 222, 128, 0.18);
    --st-frontier-soft: rgba(34, 211, 238, 0.18);
    --st-back-soft:     rgba(251, 113, 133, 0.16);

    --good: #4ade80; --good-soft: rgba(74,222,128,.15);
    --warn: #fbbf24; --warn-soft: rgba(251,191,36,.15);
    --bad:  #fb7185; --bad-soft:  rgba(251,113,133,.14);

    --cx-1: #4ade80; --cx-lg: #a3e635; --cx-n: #22d3ee;
    --cx-nl: #818cf8; --cx-n2: #fbbf24; --cx-ex: #fb7185;

    --t-basics: #818cf8;  --t-array: #22d3ee;  --t-string: #2dd4bf;
    --t-list: #a78bfa;    --t-stack: #e879f9;  --t-tree: #4ade80;
    --t-heap: #fbbf24;    --t-graph: #f472b6;  --t-dp: #fdba74;
    --t-greedy: #a3e635;  --t-advanced: #94a3b8; --t-design: #e8c547; --t-interview: #d6d3d1;

    --lift-1: 0 1px 2px rgba(0,0,0,.65), 0 0 0 .5px rgba(255,255,255,.07);
    --lift-2: 0 4px 18px rgba(0,0,0,.65), 0 0 0 .5px rgba(255,255,255,.08);
    --lift-3: 0 20px 52px rgba(0,0,0,.75), 0 0 0 .5px rgba(255,255,255,.10);
  }
}

:root[data-theme="dark"] {
  --ground:       #0b0b0f;
  --ground-deep:  #060608;
  --surface:      #15151b;
  --surface-2:    #1d1d25;
  --surface-sunk: #101016;
  --veil:         rgba(11, 11, 15, 0.78);

  --ink:   #f2f2f5;
  --ink-2: #c4c4cf;
  --ink-3: #8e8e9d;
  --ink-4: #6a6a78;

  --line:        rgba(255, 255, 255, 0.10);
  --line-2:      rgba(255, 255, 255, 0.17);
  --line-strong: rgba(255, 255, 255, 0.36);

  --accent:      #818cf8;
  --accent-ink:  #0b0b0f;
  --accent-soft: rgba(129, 140, 248, 0.16);
  --accent-line: rgba(129, 140, 248, 0.42);

  --st-idle:      #3a3a46;
  --st-idle-ink:  #a8a8b6;
  --st-active:    #818cf8;
  --st-compare:   #fbbf24;
  --st-swap:      #e879f9;
  --st-done:      #4ade80;
  --st-dead:      #2e2e38;
  --st-frontier:  #22d3ee;
  --st-back:      #fb7185;

  --st-active-soft:   rgba(129, 140, 248, 0.20);
  --st-compare-soft:  rgba(251, 191, 36, 0.20);
  --st-swap-soft:     rgba(232, 121, 249, 0.18);
  --st-done-soft:     rgba(74, 222, 128, 0.18);
  --st-frontier-soft: rgba(34, 211, 238, 0.18);
  --st-back-soft:     rgba(251, 113, 133, 0.16);

  --good: #4ade80; --good-soft: rgba(74,222,128,.15);
  --warn: #fbbf24; --warn-soft: rgba(251,191,36,.15);
  --bad:  #fb7185; --bad-soft:  rgba(251,113,133,.14);

  --cx-1: #4ade80; --cx-lg: #a3e635; --cx-n: #22d3ee;
  --cx-nl: #818cf8; --cx-n2: #fbbf24; --cx-ex: #fb7185;

  --t-basics: #818cf8;  --t-array: #22d3ee;  --t-string: #2dd4bf;
  --t-list: #a78bfa;    --t-stack: #e879f9;  --t-tree: #4ade80;
  --t-heap: #fbbf24;    --t-graph: #f472b6;  --t-dp: #fdba74;
  --t-greedy: #a3e635;  --t-advanced: #94a3b8; --t-design: #e8c547; --t-interview: #d6d3d1;

  --lift-1: 0 1px 2px rgba(0,0,0,.65), 0 0 0 .5px rgba(255,255,255,.07);
  --lift-2: 0 4px 18px rgba(0,0,0,.65), 0 0 0 .5px rgba(255,255,255,.08);
  --lift-3: 0 20px 52px rgba(0,0,0,.75), 0 0 0 .5px rgba(255,255,255,.10);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
img, svg, canvas { max-width: 100%; }
img { height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
[hidden] { display: none !important; }
/* read by screen readers, not drawn: headings that give a grid of cards its place in the outline */
.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; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

h1,h2,h3,h4,h5 { margin: 0; font-weight: 640; letter-spacing: -0.02em; text-wrap: balance; line-height: 1.16; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.028em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.024em; }
h3 { font-size: var(--fs-h3); }
p { margin: 0; }

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.875em; font-variant-ligatures: none; }
kbd {
  font-size: var(--fs-micro); padding: .12em .42em; border-radius: 5px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-3);
  box-shadow: 0 1px 0 var(--line-2);
}
.num, .tabular { font-variant-numeric: tabular-nums; }

::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 900;
  padding: .55rem .9rem; border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--lift-2); color: var(--ink);
  transform: translateY(-160%); transition: transform var(--t-mid) var(--ease);
}
.skip:focus { transform: translateY(0); }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
:root[data-motion="still"] *, :root[data-motion="still"] *::before, :root[data-motion="still"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}