@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Cabin+Sketch:wght@400;700&family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600;700&display=swap");
/* Pizarrón y tiza. Los colores de las categorías se suavizan hacia blanco con --chalk(). */
:root {
  color-scheme: dark;
  --board: #1d2b25; --board-2: #17231e;
  --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.09);
  --border: rgba(244,241,232,.38);
  --text: #f4f1e8; --text-2: rgba(244,241,232,.86); --text-3: rgba(244,241,232,.62);
  --orange: #f9b26b; --yellow: #f7e07a; --on-orange: #1d2b25; --bad: #f59bb0;
  --hand: "Kalam", "Comic Sans MS", cursive;
  --sketch: "Cabin Sketch", "Kalam", cursive;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Inter", system-ui, sans-serif;
  /* Borde "a mano": radios desparejos. */
  --hb: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --hb2: 18px 225px 18px 255px / 255px 18px 225px 18px;
  /* Grano de tiza: ruido opaco con huecos, se usa como máscara. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -3.2 2.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --wavy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M0 6.5C13 2.5 27 10.5 40 6.5S67 2.5 80 6.5s27 4 40 0' fill='none' stroke='black' stroke-width='3.2'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--board-2); color: var(--text); font-family: var(--hand); }
/* Pizarra: verde pizarra, borrones de borrador y polvo fino. */
.bg { position: fixed; inset: 0; z-index: -1; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='30'/%3E%3C/filter%3E%3Cg filter='url(%23b)' fill='none' stroke='white' stroke-linecap='round'%3E%3Cpath d='M-80 210C300 70 620 330 960 170S1500 110 1700 270' stroke-opacity='.055' stroke-width='150'/%3E%3Cpath d='M60 720C420 560 820 840 1220 650S1620 600 1720 740' stroke-opacity='.045' stroke-width='130'/%3E%3Cpath d='M240 470C560 390 900 540 1420 430' stroke-opacity='.03' stroke-width='70'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E"),
  radial-gradient(120% 90% at 50% 40%, var(--board), var(--board-2) 75%, #111a16); }
/* Todo lo escrito con tiza: grano + polvo alrededor del trazo. */
.chalk { -webkit-mask-image: var(--grain); mask-image: var(--grain); -webkit-mask-size: 180px; mask-size: 180px; }
.dust { text-shadow: 0 0 1.5px currentColor, 0 0 6px rgba(244,241,232,.12); }