:root {
  /* Dark theme (default) — R G B triplets for Tailwind's rgb(var(..) / <alpha-value>) */
  --ink-950: 8 11 16;
  --ink-900: 15 20 28;
  --ink-850: 20 27 37;
  --ink-800: 26 34 48;
  --ink-700: 36 48 68;
  --ink-600: 51 66 89;
  --ink-500: 74 92 120;
  --ink-400: 118 136 163;
  --ink-300: 166 180 201;
  --ink-200: 205 214 227;
  --ink-100: 231 236 243;
  --signal: 34 211 170;
  --signal-dim: 23 167 136;
  --signal-bright: 95 242 204;
  --amber: 245 165 36;
  --rose: 245 82 122;
}
html.light {
  /* Light theme overrides */
  --ink-950: 255 255 255;
  --ink-900: 246 247 249;
  --ink-850: 240 242 245;
  --ink-800: 233 236 240;
  --ink-700: 217 222 229;
  --ink-600: 195 202 212;
  --ink-500: 138 147 163;
  --ink-400: 100 111 130;
  --ink-300: 74 87 107;
  --ink-200: 51 64 84;
  --ink-100: 18 22 28;
  --signal: 15 138 112;
  --signal-dim: 11 110 89;
  --signal-bright: 34 179 145;
  --amber: 189 122 15;
  --rose: 200 45 90;
}

* { scrollbar-width: thin; scrollbar-color: rgb(var(--ink-600)) rgb(var(--ink-900)); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgb(var(--ink-900)); }
::-webkit-scrollbar-thumb { background: rgb(var(--ink-700)); border-radius: 4px; }
body { background-color: rgb(var(--ink-950)); transition: background-color .2s ease; }
.tool-panel { animation: rise .35s ease both; }
@keyframes rise { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform: translateY(0);} }
.num-badge { font-variant-numeric: tabular-nums; }
input[type=range] { accent-color: rgb(var(--signal)); }
input[type=color] { -webkit-appearance:none; appearance:none; border:none; padding:0; background:none; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border-radius: 8px; border: 1px solid rgb(var(--ink-700)); }
.dropzone.drag { border-color: rgb(var(--signal)); background-color: rgb(var(--signal) / 0.06); }
.fade-scroll::-webkit-scrollbar{width:6px}
.md-preview h1{font-size:1.5rem;font-weight:700;margin:.6em 0 .3em;color:rgb(var(--ink-100))}
.md-preview h2{font-size:1.25rem;font-weight:700;margin:.6em 0 .3em;color:rgb(var(--ink-100))}
.md-preview h3{font-size:1.1rem;font-weight:600;margin:.5em 0 .3em;color:rgb(var(--ink-200))}
.md-preview p{margin:.4em 0}
.md-preview ul{list-style:disc;padding-left:1.4em;margin:.4em 0}
.md-preview strong{color:rgb(var(--signal-bright))}
.md-preview em{color:rgb(var(--ink-300))}
.md-preview code{background:rgb(var(--ink-800));padding:.1em .35em;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.9em}
.blog-content h2{font-size:1.05rem;font-weight:600;margin-top:0.4em}
.blog-content h3{font-size:0.95rem;font-weight:600;margin-top:1em;color:rgb(var(--ink-200))}
.blog-content code{background:rgb(var(--ink-800));padding:.1em .35em;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.9em;color:rgb(var(--signal-bright))}
.blog-content p{margin:0.6em 0}
.faq-item summary::-webkit-details-marker{display:none}
.checker-bg{
  background-image:
    linear-gradient(45deg, rgb(var(--ink-800)) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(var(--ink-800)) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(var(--ink-800)) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(var(--ink-800)) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
#themeIconSun, #themeIconMoon { transition: opacity .15s ease; }
@media (max-width: 768px) {
  .sidebar-mobile { transform: translateX(-100%); }
  .sidebar-mobile.open { transform: translateX(0); }
}