/* TỰ SINH bởi tools/gen-backdrops.mjs từ src/art/backdrops.js. Đừng sửa tay: sửa mã vẽ rồi chạy lại.
   Nền các màn bản đồ, môn học, chủ đề, màn chơi: màu nhạt + họa tiết trắng mờ thưa, không tranh chú ý với nội dung. */

:root {
  --bd-clouds: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1200 360%22 preserveAspectRatio%3D%22xMidYMin slice%22%3E%3Cg opacity%3D%22.92%22%3E%3Cg transform%3D%22translate(110 90) scale(1.3)%22 fill%3D%22%23fff%22%3E%3Ccircle cx%3D%220%22 cy%3D%220%22 r%3D%2222%22%2F%3E%3Ccircle cx%3D%2226%22 cy%3D%22-10%22 r%3D%2228%22%2F%3E%3Ccircle cx%3D%2256%22 cy%3D%220%22 r%3D%2222%22%2F%3E%3Crect x%3D%22-22%22 y%3D%220%22 width%3D%22100%22 height%3D%2222%22 rx%3D%2211%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(520 190) scale(0.9)%22 fill%3D%22%23fff%22%3E%3Ccircle cx%3D%220%22 cy%3D%220%22 r%3D%2222%22%2F%3E%3Ccircle cx%3D%2226%22 cy%3D%22-10%22 r%3D%2228%22%2F%3E%3Ccircle cx%3D%2256%22 cy%3D%220%22 r%3D%2222%22%2F%3E%3Crect x%3D%22-22%22 y%3D%220%22 width%3D%22100%22 height%3D%2222%22 rx%3D%2211%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(900 70) scale(1.1)%22 fill%3D%22%23fff%22%3E%3Ccircle cx%3D%220%22 cy%3D%220%22 r%3D%2222%22%2F%3E%3Ccircle cx%3D%2226%22 cy%3D%22-10%22 r%3D%2228%22%2F%3E%3Ccircle cx%3D%2256%22 cy%3D%220%22 r%3D%2222%22%2F%3E%3Crect x%3D%22-22%22 y%3D%220%22 width%3D%22100%22 height%3D%2222%22 rx%3D%2211%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(1090 250) scale(0.7)%22 fill%3D%22%23fff%22%3E%3Ccircle cx%3D%220%22 cy%3D%220%22 r%3D%2222%22%2F%3E%3Ccircle cx%3D%2226%22 cy%3D%22-10%22 r%3D%2228%22%2F%3E%3Ccircle cx%3D%2256%22 cy%3D%220%22 r%3D%2222%22%2F%3E%3Crect x%3D%22-22%22 y%3D%220%22 width%3D%22100%22 height%3D%2222%22 rx%3D%2211%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --bd-hills: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1200 260%22 preserveAspectRatio%3D%22none%22%3E%3Cpath d%3D%22M0 100C160 50 320 60 480 96C640 132 800 52 960 74C1080 90 1150 66 1200 80V260H0Z%22 fill%3D%22%23A9E8D8%22 opacity%3D%22.55%22%2F%3E%3Cpath d%3D%22M0 156C220 106 420 138 620 160C820 182 1000 112 1200 138V260H0Z%22 fill%3D%22%23C5F0A0%22 opacity%3D%22.6%22%2F%3E%3Cpath d%3D%22M0 214C260 182 460 208 680 214C880 220 1040 190 1200 204V260H0Z%22 fill%3D%22%237CD43F%22 opacity%3D%22.45%22%2F%3E%3C%2Fsvg%3E");
  --bd-wave: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1200 200%22 preserveAspectRatio%3D%22none%22%3E%3Cpath d%3D%22M0 70C200 20 380 30 600 70C820 110 1000 120 1200 60V200H0Z%22 fill%3D%22%23fff%22 opacity%3D%22.4%22%2F%3E%3Cpath d%3D%22M0 130C220 90 420 100 640 135C860 170 1020 160 1200 120V200H0Z%22 fill%3D%22%23fff%22 opacity%3D%22.45%22%2F%3E%3C%2Fsvg%3E");
}

[data-subject="math"] { --pat: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22240%22 height%3D%22240%22 viewBox%3D%220 0 240 240%22%3E%3Cg opacity%3D%22.62%22%3E%3Cg transform%3D%22translate(30 36) rotate(0) scale(1.1)%22%3E%3Cpath d%3D%22M-8 0H8M0-8V8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(120 26) rotate(0) scale(0.9)%22%3E%3Ccircle r%3D%228%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(196 52) rotate(0) scale(1)%22%3E%3Cpath d%3D%22M-8 0H8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(70 100) rotate(0) scale(1)%22%3E%3Cpath d%3D%22M-7 -7L7 7M7 -7L-7 7%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(168 110) rotate(0) scale(0.6)%22%3E%3Ccircle r%3D%225%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(30 168) rotate(0) scale(1.1)%22%3E%3Cpath d%3D%22M-8 -3.5H8M-8 3.5H8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(110 176) rotate(8) scale(1)%22%3E%3Cpath d%3D%22M0 -9L9 7H-9Z%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(200 190) rotate(0) scale(0.9)%22%3E%3Cpath d%3D%22M-8 0H8M0-8V8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(150 220) rotate(0) scale(0.7)%22%3E%3Cpath d%3D%22M0 -9Q0 0 9 0Q0 0 0 9Q0 0 -9 0Q0 0 0 -9Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(64 224) rotate(0) scale(0.5)%22%3E%3Ccircle r%3D%225%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[data-subject="letters"] { --pat: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22240%22 height%3D%22240%22 viewBox%3D%220 0 240 240%22%3E%3Cg opacity%3D%22.62%22%3E%3Cg transform%3D%22translate(34 34) rotate(-8) scale(1.3)%22%3E%3Crect x%3D%22-9%22 y%3D%22-9%22 width%3D%2218%22 height%3D%2218%22 rx%3D%225%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M-4 5L0 -5L4 5M-2.3 1.4H2.3%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%222.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(122 30) rotate(0) scale(1.1)%22%3E%3Cpath d%3D%22M-10 0Q-5 -8 0 0T10 0%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(200 46) rotate(0) scale(0.8)%22%3E%3Cpath d%3D%22M0 -9Q0 0 9 0Q0 0 0 9Q0 0 -9 0Q0 0 0 -9Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(76 98) rotate(0) scale(1.2)%22%3E%3Cpath d%3D%22M-8 8L-6 3L5 -8L8 -5L-3 6Z%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(160 100) rotate(0) scale(0.6)%22%3E%3Ccircle r%3D%225%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(196 156) rotate(10) scale(1.2)%22%3E%3Crect x%3D%22-9%22 y%3D%22-9%22 width%3D%2218%22 height%3D%2218%22 rx%3D%225%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M-4 5L0 -5L4 5M-2.3 1.4H2.3%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%222.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(36 170) rotate(0) scale(1.1)%22%3E%3Cpath d%3D%22M-10 0Q-5 -8 0 0T10 0%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(118 178) rotate(0) scale(0.9)%22%3E%3Cpath d%3D%22M0 -10L2.9 -3.4L10 -3L4.5 1.8L6.2 8.8L0 5L-6.2 8.8L-4.5 1.8L-10 -3L-2.9 -3.4Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(72 222) rotate(0) scale(0.5)%22%3E%3Ccircle r%3D%225%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(170 224) rotate(0) scale(0.6)%22%3E%3Cpath d%3D%22M0 -9Q0 0 9 0Q0 0 0 9Q0 0 -9 0Q0 0 0 -9Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[data-subject="logic"] { --pat: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22240%22 height%3D%22240%22 viewBox%3D%220 0 240 240%22%3E%3Cg opacity%3D%22.62%22%3E%3Cg transform%3D%22translate(32 34) rotate(8) scale(1.1)%22%3E%3Crect x%3D%22-8%22 y%3D%22-8%22 width%3D%2216%22 height%3D%2216%22 rx%3D%224%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(118 30) rotate(0) scale(1.1)%22%3E%3Cpath d%3D%22M0 -9L9 7H-9Z%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(198 44) rotate(-8) scale(1.1)%22%3E%3Cpath d%3D%22M-5 -4Q-5 -9 0 -9Q5 -9 5 -4Q5 -1 0 1V3%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cy%3D%228%22 r%3D%221.8%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(72 98) rotate(0) scale(1)%22%3E%3Cpath d%3D%22M0 -9L9 0L0 9L-9 0Z%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(160 104) rotate(0) scale(0.9)%22%3E%3Ccircle r%3D%228%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(36 168) rotate(0) scale(0.9)%22%3E%3Ccircle cx%3D%22-8%22 r%3D%223.2%22 fill%3D%22%23fff%22%2F%3E%3Ccircle r%3D%223.2%22 fill%3D%22%23fff%22%2F%3E%3Ccircle cx%3D%228%22 r%3D%223.2%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(116 176) rotate(-10) scale(0.9)%22%3E%3Crect x%3D%22-8%22 y%3D%22-8%22 width%3D%2216%22 height%3D%2216%22 rx%3D%224%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(196 184) rotate(180) scale(1)%22%3E%3Cpath d%3D%22M0 -9L9 7H-9Z%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(70 222) rotate(0) scale(0.6)%22%3E%3Cpath d%3D%22M0 -9Q0 0 9 0Q0 0 0 9Q0 0 -9 0Q0 0 0 -9Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(160 226) rotate(0) scale(0.5)%22%3E%3Ccircle r%3D%225%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[data-subject="science"] { --pat: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22240%22 height%3D%22240%22 viewBox%3D%220 0 240 240%22%3E%3Cg opacity%3D%22.62%22%3E%3Cg transform%3D%22translate(32 36) rotate(-30) scale(1.2)%22%3E%3Cpath d%3D%22M-8 8Q-8 -8 8 -8Q8 8 -8 8Z%22 fill%3D%22%23fff%22%2F%3E%3Cpath d%3D%22M-5 5L3 -3%22 fill%3D%22none%22 stroke%3D%22rgba(0%2C0%2C0%2C.12)%22 stroke-width%3D%221.6%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(116 28) rotate(0) scale(1)%22%3E%3Cpath d%3D%22M0 -10Q10 2 0 9Q-10 2 0 -10Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(194 50) rotate(0) scale(1)%22%3E%3Ccircle r%3D%228%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M-3.5 -2A4 4 0 0 1 0 -5%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%222.4%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(70 96) rotate(0) scale(0.7)%22%3E%3Cpath d%3D%22M0 -9Q0 0 9 0Q0 0 0 9Q0 0 -9 0Q0 0 0 -9Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(160 108) rotate(40) scale(1.1)%22%3E%3Cpath d%3D%22M-8 8Q-8 -8 8 -8Q8 8 -8 8Z%22 fill%3D%22%23fff%22%2F%3E%3Cpath d%3D%22M-5 5L3 -3%22 fill%3D%22none%22 stroke%3D%22rgba(0%2C0%2C0%2C.12)%22 stroke-width%3D%221.6%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(32 168) rotate(0) scale(0.8)%22%3E%3Ccircle r%3D%228%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M-3.5 -2A4 4 0 0 1 0 -5%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%222.4%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(112 178) rotate(0) scale(1)%22%3E%3Cpath d%3D%22M0 -10Q10 2 0 9Q-10 2 0 -10Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(196 184) rotate(0) scale(0.8)%22%3E%3Cpath d%3D%22M0 -10L2.9 -3.4L10 -3L4.5 1.8L6.2 8.8L0 5L-6.2 8.8L-4.5 1.8L-10 -3L-2.9 -3.4Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(66 224) rotate(0) scale(0.5)%22%3E%3Ccircle r%3D%225%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(164 224) rotate(0) scale(0.7)%22%3E%3Ccircle r%3D%228%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M-3.5 -2A4 4 0 0 1 0 -5%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%222.4%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[data-subject="stem"] { --pat: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22240%22 height%3D%22240%22 viewBox%3D%220 0 240 240%22%3E%3Cg opacity%3D%22.62%22%3E%3Cg transform%3D%22translate(34 36) rotate(0) scale(1.2)%22%3E%3Ccircle r%3D%225.5%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M0 -10V-7.5M0 10V7.5M-10 0H-7.5M10 0H7.5M-7 -7L-5.3 -5.3M7 7L5.3 5.3M7 -7L5.3 -5.3M-7 7L-5.3 5.3%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(120 28) rotate(0) scale(1)%22%3E%3Cpath d%3D%22M-4.5 -8H4.5L9 0L4.5 8H-4.5L-9 0Z%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(198 48) rotate(0) scale(0.9)%22%3E%3Cpath d%3D%22M-8 0H8M0-8V8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(72 100) rotate(0) scale(0.9)%22%3E%3Ccircle r%3D%228%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(166 108) rotate(15) scale(1)%22%3E%3Ccircle r%3D%225.5%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M0 -10V-7.5M0 10V7.5M-10 0H-7.5M10 0H7.5M-7 -7L-5.3 -5.3M7 7L5.3 5.3M7 -7L5.3 -5.3M-7 7L-5.3 5.3%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(34 168) rotate(0) scale(0.9)%22%3E%3Cpath d%3D%22M-4.5 -8H4.5L9 0L4.5 8H-4.5L-9 0Z%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(112 178) rotate(0) scale(0.8)%22%3E%3Ccircle cx%3D%22-8%22 r%3D%223.2%22 fill%3D%22%23fff%22%2F%3E%3Ccircle r%3D%223.2%22 fill%3D%22%23fff%22%2F%3E%3Ccircle cx%3D%228%22 r%3D%223.2%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(198 190) rotate(0) scale(0.8)%22%3E%3Cpath d%3D%22M-8 0H8M0-8V8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(72 224) rotate(0) scale(0.6)%22%3E%3Cpath d%3D%22M0 -9Q0 0 9 0Q0 0 0 9Q0 0 -9 0Q0 0 0 -9Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(160 226) rotate(0) scale(0.5)%22%3E%3Ccircle r%3D%225%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[data-subject="coding"] { --pat: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22240%22 height%3D%22240%22 viewBox%3D%220 0 240 240%22%3E%3Cg opacity%3D%22.62%22%3E%3Cg transform%3D%22translate(28 38) rotate(0) scale(1.1)%22%3E%3Cpath d%3D%22M-4 -8L5 0L-4 8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(56 38) rotate(0) scale(1.1)%22%3E%3Cpath d%3D%22M4 -8L-5 0L4 8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(124 30) rotate(0) scale(0.9)%22%3E%3Crect x%3D%22-8%22 y%3D%22-8%22 width%3D%2216%22 height%3D%2216%22 rx%3D%224%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(196 52) rotate(0) scale(1.1)%22%3E%3Cpath d%3D%22M-9 0H8M2 -6L8 0L2 6%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(72 100) rotate(0) scale(0.9)%22%3E%3Ccircle cx%3D%22-8%22 r%3D%223.2%22 fill%3D%22%23fff%22%2F%3E%3Ccircle r%3D%223.2%22 fill%3D%22%23fff%22%2F%3E%3Ccircle cx%3D%228%22 r%3D%223.2%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(160 104) rotate(0) scale(0.6)%22%3E%3Ccircle r%3D%225%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(34 170) rotate(0) scale(1)%22%3E%3Cpath d%3D%22M-4 -8L5 0L-4 8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(116 178) rotate(10) scale(1)%22%3E%3Crect x%3D%22-8%22 y%3D%22-8%22 width%3D%2216%22 height%3D%2216%22 rx%3D%224%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(196 188) rotate(90) scale(1)%22%3E%3Cpath d%3D%22M-9 0H8M2 -6L8 0L2 6%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%223.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(70 224) rotate(0) scale(0.6)%22%3E%3Cpath d%3D%22M0 -9Q0 0 9 0Q0 0 0 9Q0 0 -9 0Q0 0 0 -9Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg transform%3D%22translate(160 226) rotate(0) scale(0.5)%22%3E%3Ccircle r%3D%225%22 fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }