/* RackMonk theme — tokens, resets, keyframes (everything else is inline) */
:root {
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --surface-2: #EEF1F8;
  --ink: #0B1220;
  --ink-2: #49536B;
  --ink-3: #8A93A8;
  --line: #E5E8F2;
  --line-2: #D5DAE8;
  --sky: #0284C7;
  --cyan: #0891B2;
  --violet: #7C3AED;
  --green: #0E9F6E;
  --gold: #D97706;
  --red: #DC2626;
  --grad: linear-gradient(120deg, #0EA5E9, #7C3AED);
  --grad-soft: linear-gradient(120deg, rgba(14,165,233,.09), rgba(124,58,237,.09));
  --hero-glow-1: rgba(14,165,233,.16);
  --hero-glow-2: rgba(124,58,237,.14);
  --shadow-sm: 0 1px 2px rgba(11,18,32,.06);
  --shadow-md: 0 10px 30px -10px rgba(11,18,32,.14);
  --shadow-lg: 0 28px 70px -28px rgba(11,18,32,.28);
  --glow: 0 10px 40px -10px rgba(14,165,233,.45);
  --header-bg: rgba(255,255,255,.82);
  --code-bg: #0B1220;
}
[data-theme="dark"] {
  --bg: #0A0E1A;
  --surface: #121729;
  --surface-2: #1A2138;
  --ink: #F1F5F9;
  --ink-2: #A7B1C5;
  --ink-3: #6B7590;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.16);
  --sky: #38BDF8;
  --cyan: #22D3EE;
  --violet: #A78BFA;
  --green: #34D399;
  --gold: #FBBF24;
  --red: #F87171;
  --grad: linear-gradient(120deg, #22D3EE, #8B5CF6);
  --grad-soft: linear-gradient(120deg, rgba(34,211,238,.10), rgba(139,92,246,.10));
  --hero-glow-1: rgba(34,211,238,.10);
  --hero-glow-2: rgba(139,92,246,.12);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px -10px rgba(0,0,0,.5);
  --shadow-lg: 0 28px 70px -28px rgba(0,0,0,.65);
  --glow: 0 10px 40px -10px rgba(34,211,238,.35);
  --header-bg: rgba(10,14,26,.82);
  --code-bg: #0D1326;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  transition: background .3s ease, color .3s ease;
}
a { color: var(--sky); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--violet); }
img { max-width: 100%; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
::selection { background: rgba(14,165,233,.25); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* responsive helpers — the only structural classes allowed */
@media (max-width: 980px) {
  .rm-hide-mobile { display: none !important; }
}
@media (min-width: 981px) {
  .rm-hide-desktop { display: none !important; }
}

@keyframes rm-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes rm-float-sm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rm-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }
@keyframes rm-ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes rm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rm-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes rm-spin { to { transform: rotate(360deg); } }
@keyframes rm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes rm-dash { to { stroke-dashoffset: -24; } }