/* thereallearnwithme.com — custom styles */
.dark { color-scheme: dark; }

.prose h1, .prose h2, .prose h3 { font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose p  { margin-bottom: 1rem; line-height: 1.75; }
.prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose code { background: #f3f4f6; border-radius: 3px; padding: 0.1em 0.3em; font-size: 0.9em; }
.dark .prose code { background: #374151; }
.prose pre { background: #1f2937; color: #f9fafb; padding: 1rem; border-radius: 6px; overflow-x: auto; margin-bottom: 1rem; }
.prose blockquote { border-left: 4px solid #9333ea; padding-left: 1rem; color: #6b7280; font-style: italic; margin-bottom: 1rem; }
.prose a { color: #9333ea; text-decoration: underline; }
.dark .prose a { color: #c084fc; }

/* YouTube embed responsive wrapper */
.yt-embed-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.yt-embed-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   DEV: 10 Style Previews — Neubrutalism palette across all layouts
   Palette: #FFFDF0 / #0A0A0A / #FDE047 (light)   #1A1A1A / #FAFAFA / #FDE047 (dark)
   html[data-style="N"]      = light mode
   html.dark[data-style="N"] = dark mode
   ============================================================ */

/* ── 1. Classic Brutal ── cream bg, thick 3px borders, yellow button shadow */
html[data-style="1"] body { background:#FFFDF0!important;color:#0A0A0A!important;font-family:system-ui,sans-serif; }
html[data-style="1"] nav { background:#FFFDF0!important;border-bottom:3px solid #0A0A0A!important;box-shadow:none!important; }
html[data-style="1"] footer { background:#0A0A0A!important;border-top:3px solid #0A0A0A!important; }
html[data-style="1"] footer,html[data-style="1"] footer * { color:#FDE047!important; }
html[data-style="1"] nav a { color:#0A0A0A!important; }
html[data-style="1"] nav a:first-child { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="1"] h1,html[data-style="1"] h2,html[data-style="1"] h3 { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="1"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #000!important;box-shadow:4px 4px 0 #000!important;border-radius:0!important; }
html[data-style="1"] [class*="text-purple"] { color:#0A0A0A!important; }
html[data-style="1"] .border-purple-600 { border:3px solid #0A0A0A!important;box-shadow:4px 4px 0 #0A0A0A!important;border-radius:0!important;color:#0A0A0A!important; }
html[data-style="1"] [class*="border-gray"] { border-color:#0A0A0A!important;border-width:2px!important; }
html[data-style="1"] .bg-white,.bg-gray-50 { background:#FFFDF0!important; }
html[data-style="1"] [class*="text-gray"] { color:#444!important; }
html.dark[data-style="1"] body { background:#1A1A1A!important;color:#FAFAFA!important; }
html.dark[data-style="1"] nav { background:#1A1A1A!important;border-color:#FAFAFA!important; }
html.dark[data-style="1"] footer { background:#0A0A0A!important;border-color:#FAFAFA!important; }
html.dark[data-style="1"] footer,html.dark[data-style="1"] footer * { color:#FDE047!important; }
html.dark[data-style="1"] nav a { color:#FAFAFA!important; }
html.dark[data-style="1"] nav a:first-child { color:#FDE047!important;font-weight:900!important; }
html.dark[data-style="1"] h1,html.dark[data-style="1"] h2,html.dark[data-style="1"] h3 { color:#FAFAFA!important;font-weight:900!important; }
html.dark[data-style="1"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #FAFAFA!important;box-shadow:4px 4px 0 #555!important;border-radius:0!important; }
html.dark[data-style="1"] [class*="text-purple"] { color:#FDE047!important; }
html.dark[data-style="1"] .border-purple-600 { border:3px solid #FAFAFA!important;box-shadow:4px 4px 0 #555!important;border-radius:0!important;color:#FAFAFA!important; }
html.dark[data-style="1"] [class*="border-gray"] { border-color:#444!important; }
html.dark[data-style="1"] [class*="text-gray"] { color:#aaa!important; }
html.dark[data-style="1"] .bg-white,.bg-gray-50,.bg-gray-950 { background:#111!important; }

/* ── 2. Yellow Nav ── full yellow nav bar, black text, cream body */
html[data-style="2"] body { background:#FFFDF0!important;color:#0A0A0A!important;font-family:system-ui,sans-serif; }
html[data-style="2"] nav { background:#FDE047!important;border-bottom:3px solid #0A0A0A!important;box-shadow:none!important; }
html[data-style="2"] footer { background:#0A0A0A!important;border-top:none!important; }
html[data-style="2"] footer,html[data-style="2"] footer * { color:#FDE047!important; }
html[data-style="2"] nav a { color:#0A0A0A!important;font-weight:600!important; }
html[data-style="2"] nav a:first-child { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="2"] h1,html[data-style="2"] h2,html[data-style="2"] h3 { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="2"] .bg-purple-600,.bg-purple-700 { background:#0A0A0A!important;color:#FDE047!important;border:3px solid #0A0A0A!important;box-shadow:4px 4px 0 #FDE047!important;border-radius:0!important; }
html[data-style="2"] [class*="text-purple"] { color:#0A0A0A!important; }
html[data-style="2"] .border-purple-600 { border:3px solid #0A0A0A!important;box-shadow:4px 4px 0 #0A0A0A!important;border-radius:0!important;color:#0A0A0A!important; }
html[data-style="2"] [class*="border-gray"] { border-color:#0A0A0A!important;border-width:2px!important; }
html[data-style="2"] .bg-white,.bg-gray-50 { background:#FFFDF0!important; }
html[data-style="2"] [class*="text-gray"] { color:#444!important; }
html.dark[data-style="2"] body { background:#1A1A1A!important;color:#FAFAFA!important; }
html.dark[data-style="2"] nav { background:#8B7200!important;border-color:#0A0A0A!important; }
html.dark[data-style="2"] footer { background:#0A0A0A!important; }
html.dark[data-style="2"] footer,html.dark[data-style="2"] footer * { color:#FDE047!important; }
html.dark[data-style="2"] nav a { color:#0A0A0A!important;font-weight:600!important; }
html.dark[data-style="2"] nav a:first-child { color:#0A0A0A!important;font-weight:900!important; }
html.dark[data-style="2"] h1,html.dark[data-style="2"] h2,html.dark[data-style="2"] h3 { color:#FAFAFA!important;font-weight:900!important; }
html.dark[data-style="2"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #FAFAFA!important;box-shadow:4px 4px 0 #555!important;border-radius:0!important; }
html.dark[data-style="2"] [class*="text-purple"] { color:#FDE047!important; }
html.dark[data-style="2"] .border-purple-600 { border:3px solid #FAFAFA!important;box-shadow:4px 4px 0 #555!important;border-radius:0!important;color:#FAFAFA!important; }
html.dark[data-style="2"] [class*="border-gray"] { border-color:#444!important; }
html.dark[data-style="2"] [class*="text-gray"] { color:#aaa!important; }
html.dark[data-style="2"] .bg-white,.bg-gray-50,.bg-gray-950 { background:#111!important; }

/* ── 3. Inverted ── black bg in both modes, cream text, yellow accents */
html[data-style="3"] body { background:#0A0A0A!important;color:#FFFDF0!important;font-family:system-ui,sans-serif; }
html[data-style="3"] nav { background:#111!important;border-bottom:3px solid #FDE047!important;box-shadow:none!important; }
html[data-style="3"] footer { background:#050505!important;border-top:3px solid #FDE047!important; }
html[data-style="3"] footer,html[data-style="3"] footer * { color:#FDE047!important; }
html[data-style="3"] nav a { color:#FFFDF0!important; }
html[data-style="3"] nav a:first-child { color:#FDE047!important;font-weight:900!important; }
html[data-style="3"] h1,html[data-style="3"] h2,html[data-style="3"] h3 { color:#FFFDF0!important;font-weight:900!important; }
html[data-style="3"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #FDE047!important;box-shadow:4px 4px 0 #888!important;border-radius:0!important; }
html[data-style="3"] [class*="text-purple"] { color:#FDE047!important; }
html[data-style="3"] .border-purple-600 { border:3px solid #FFFDF0!important;box-shadow:4px 4px 0 #555!important;border-radius:0!important;color:#FFFDF0!important; }
html[data-style="3"] [class*="border-gray"] { border-color:#333!important; }
html[data-style="3"] [class*="text-gray"] { color:#aaa!important; }
html[data-style="3"] .bg-white,.bg-gray-50,.bg-gray-950 { background:#1a1a1a!important; }
html.dark[data-style="3"] body { background:#050505!important;color:#FFFDF0!important; }
html.dark[data-style="3"] nav { background:#0A0A0A!important;border-color:#FDE047!important; }
html.dark[data-style="3"] footer { background:#030303!important;border-color:#FDE047!important; }
html.dark[data-style="3"] footer,html.dark[data-style="3"] footer * { color:#FDE047!important; }
html.dark[data-style="3"] nav a { color:#FFFDF0!important; }
html.dark[data-style="3"] nav a:first-child { color:#FDE047!important;font-weight:900!important; }
html.dark[data-style="3"] h1,html.dark[data-style="3"] h2,html.dark[data-style="3"] h3 { color:#FFFDF0!important;font-weight:900!important; }
html.dark[data-style="3"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #FDE047!important;box-shadow:4px 4px 0 #888!important;border-radius:0!important; }
html.dark[data-style="3"] [class*="text-purple"] { color:#FDE047!important; }
html.dark[data-style="3"] .bg-white,.bg-gray-50,.bg-gray-950 { background:#0A0A0A!important; }

/* ── 4. Rounded Brutal ── same palette but 12px rounded corners */
html[data-style="4"] body { background:#FFFDF0!important;color:#0A0A0A!important;font-family:system-ui,sans-serif; }
html[data-style="4"] nav { background:#FFFDF0!important;border-bottom:3px solid #0A0A0A!important;box-shadow:none!important; }
html[data-style="4"] footer { background:#0A0A0A!important;border-top:3px solid #0A0A0A!important; }
html[data-style="4"] footer,html[data-style="4"] footer * { color:#FDE047!important; }
html[data-style="4"] nav a { color:#0A0A0A!important; }
html[data-style="4"] nav a:first-child { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="4"] h1,html[data-style="4"] h2,html[data-style="4"] h3 { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="4"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #000!important;box-shadow:4px 4px 0 #000!important;border-radius:12px!important; }
html[data-style="4"] [class*="text-purple"] { color:#0A0A0A!important; }
html[data-style="4"] .border-purple-600 { border:3px solid #0A0A0A!important;box-shadow:4px 4px 0 #0A0A0A!important;border-radius:12px!important;color:#0A0A0A!important; }
html[data-style="4"] [class*="border-gray"] { border-color:#0A0A0A!important;border-width:2px!important;border-radius:12px!important;box-shadow:3px 3px 0 #bbb!important; }
html[data-style="4"] .bg-white,.bg-gray-50 { background:#FFFDF0!important; }
html[data-style="4"] [class*="text-gray"] { color:#444!important; }
html.dark[data-style="4"] body { background:#1A1A1A!important;color:#FAFAFA!important; }
html.dark[data-style="4"] nav { background:#1A1A1A!important;border-color:#FAFAFA!important; }
html.dark[data-style="4"] footer { background:#0A0A0A!important;border-color:#FAFAFA!important; }
html.dark[data-style="4"] footer,html.dark[data-style="4"] footer * { color:#FDE047!important; }
html.dark[data-style="4"] nav a { color:#FAFAFA!important; }
html.dark[data-style="4"] nav a:first-child { color:#FDE047!important;font-weight:900!important; }
html.dark[data-style="4"] h1,html.dark[data-style="4"] h2,html.dark[data-style="4"] h3 { color:#FAFAFA!important;font-weight:900!important; }
html.dark[data-style="4"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #FAFAFA!important;box-shadow:4px 4px 0 #555!important;border-radius:12px!important; }
html.dark[data-style="4"] [class*="text-purple"] { color:#FDE047!important; }
html.dark[data-style="4"] .border-purple-600 { border:3px solid #FAFAFA!important;box-shadow:4px 4px 0 #555!important;border-radius:12px!important;color:#FAFAFA!important; }
html.dark[data-style="4"] [class*="border-gray"] { border-color:#444!important;border-radius:12px!important; }
html.dark[data-style="4"] [class*="text-gray"] { color:#aaa!important; }
html.dark[data-style="4"] .bg-white,.bg-gray-50,.bg-gray-950 { background:#111!important; }

/* ── 5. Big Type ── oversized h1 (clamp), all-caps nav, max typographic impact */
html[data-style="5"] body { background:#FFFDF0!important;color:#0A0A0A!important;font-family:system-ui,sans-serif; }
html[data-style="5"] nav { background:#FFFDF0!important;border-bottom:4px solid #0A0A0A!important;box-shadow:none!important; }
html[data-style="5"] footer { background:#0A0A0A!important;border-top:4px solid #0A0A0A!important; }
html[data-style="5"] footer,html[data-style="5"] footer * { color:#FDE047!important; }
html[data-style="5"] nav a { color:#0A0A0A!important;text-transform:uppercase!important;font-size:10px!important;letter-spacing:.12em!important; }
html[data-style="5"] nav a:first-child { color:#0A0A0A!important;font-weight:900!important;font-size:16px!important;text-transform:none!important;letter-spacing:0!important; }
html[data-style="5"] h1 { font-size:clamp(2.5rem,7vw,5rem)!important;font-weight:900!important;letter-spacing:-.05em!important;line-height:1!important; }
html[data-style="5"] h2,html[data-style="5"] h3 { font-weight:900!important;font-size:1.5rem!important; }
html[data-style="5"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #000!important;box-shadow:4px 4px 0 #000!important;border-radius:0!important; }
html[data-style="5"] [class*="text-purple"] { color:#0A0A0A!important; }
html[data-style="5"] .border-purple-600 { border:3px solid #0A0A0A!important;box-shadow:4px 4px 0 #0A0A0A!important;border-radius:0!important;color:#0A0A0A!important; }
html[data-style="5"] [class*="border-gray"] { border-color:#0A0A0A!important;border-width:2px!important; }
html[data-style="5"] .bg-white,.bg-gray-50 { background:#FFFDF0!important; }
html[data-style="5"] [class*="text-gray"] { color:#444!important; }
html.dark[data-style="5"] body { background:#1A1A1A!important;color:#FAFAFA!important; }
html.dark[data-style="5"] nav { background:#1A1A1A!important;border-color:#FAFAFA!important; }
html.dark[data-style="5"] footer { background:#0A0A0A!important; }
html.dark[data-style="5"] footer,html.dark[data-style="5"] footer * { color:#FDE047!important; }
html.dark[data-style="5"] nav a { color:#FAFAFA!important;text-transform:uppercase!important;letter-spacing:.12em!important; }
html.dark[data-style="5"] nav a:first-child { color:#FDE047!important;font-weight:900!important;text-transform:none!important; }
html.dark[data-style="5"] h1 { color:#FAFAFA!important;font-size:clamp(2.5rem,7vw,5rem)!important;font-weight:900!important;letter-spacing:-.05em!important; }
html.dark[data-style="5"] h2,html.dark[data-style="5"] h3 { color:#FAFAFA!important;font-weight:900!important; }
html.dark[data-style="5"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #FAFAFA!important;box-shadow:4px 4px 0 #555!important;border-radius:0!important; }
html.dark[data-style="5"] [class*="text-purple"] { color:#FDE047!important; }
html.dark[data-style="5"] [class*="border-gray"] { border-color:#444!important; }
html.dark[data-style="5"] [class*="text-gray"] { color:#aaa!important; }
html.dark[data-style="5"] .bg-white,.bg-gray-50,.bg-gray-950 { background:#111!important; }

/* ── 6. Outline Brutal ── outlined buttons, yellow shadow on outline, no fills */
html[data-style="6"] body { background:#FFFDF0!important;color:#0A0A0A!important;font-family:system-ui,sans-serif; }
html[data-style="6"] nav { background:#FFFDF0!important;border-bottom:3px solid #0A0A0A!important;box-shadow:none!important; }
html[data-style="6"] footer { background:#FFFDF0!important;border-top:3px solid #0A0A0A!important; }
html[data-style="6"] footer,html[data-style="6"] footer * { color:#555!important; }
html[data-style="6"] nav a { color:#0A0A0A!important; }
html[data-style="6"] nav a:first-child { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="6"] h1,html[data-style="6"] h2,html[data-style="6"] h3 { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="6"] .bg-purple-600,.bg-purple-700 { background:transparent!important;color:#0A0A0A!important;border:3px solid #0A0A0A!important;box-shadow:4px 4px 0 #FDE047!important;border-radius:0!important; }
html[data-style="6"] [class*="text-purple"] { color:#0A0A0A!important; }
html[data-style="6"] .border-purple-600 { border:3px solid #0A0A0A!important;box-shadow:4px 4px 0 #FDE047!important;border-radius:0!important;color:#0A0A0A!important;background:transparent!important; }
html[data-style="6"] [class*="border-gray"] { border-color:#0A0A0A!important;border-width:2px!important; }
html[data-style="6"] .bg-white,.bg-gray-50 { background:#FFFDF0!important; }
html[data-style="6"] [class*="text-gray"] { color:#555!important; }
html.dark[data-style="6"] body { background:#1A1A1A!important;color:#FAFAFA!important; }
html.dark[data-style="6"] nav { background:#1A1A1A!important;border-color:#FAFAFA!important; }
html.dark[data-style="6"] footer { background:#1A1A1A!important;border-color:#FAFAFA!important; }
html.dark[data-style="6"] footer,html.dark[data-style="6"] footer * { color:#aaa!important; }
html.dark[data-style="6"] nav a { color:#FAFAFA!important; }
html.dark[data-style="6"] nav a:first-child { color:#FDE047!important;font-weight:900!important; }
html.dark[data-style="6"] h1,html.dark[data-style="6"] h2,html.dark[data-style="6"] h3 { color:#FAFAFA!important;font-weight:900!important; }
html.dark[data-style="6"] .bg-purple-600,.bg-purple-700 { background:transparent!important;color:#FDE047!important;border:3px solid #FDE047!important;box-shadow:4px 4px 0 #555!important;border-radius:0!important; }
html.dark[data-style="6"] [class*="text-purple"] { color:#FDE047!important; }
html.dark[data-style="6"] .border-purple-600 { border:3px solid #FAFAFA!important;box-shadow:4px 4px 0 #555!important;border-radius:0!important;color:#FAFAFA!important;background:transparent!important; }
html.dark[data-style="6"] [class*="border-gray"] { border-color:#444!important; }
html.dark[data-style="6"] [class*="text-gray"] { color:#aaa!important; }
html.dark[data-style="6"] .bg-white,.bg-gray-50,.bg-gray-950 { background:#111!important; }

/* ── 7. Condensed ── tight/dense, uppercase nav links, small base font */
html[data-style="7"] body { background:#FFFDF0!important;color:#0A0A0A!important;font-family:system-ui,sans-serif;font-size:14px!important; }
html[data-style="7"] nav { background:#FFFDF0!important;border-bottom:3px solid #0A0A0A!important;box-shadow:none!important; }
html[data-style="7"] footer { background:#0A0A0A!important;border-top:3px solid #0A0A0A!important; }
html[data-style="7"] footer,html[data-style="7"] footer * { color:#FDE047!important;font-size:11px!important; }
html[data-style="7"] nav a { color:#0A0A0A!important;text-transform:uppercase!important;font-size:10px!important;letter-spacing:.1em!important; }
html[data-style="7"] nav a:first-child { color:#0A0A0A!important;font-weight:900!important;font-size:14px!important;text-transform:none!important;letter-spacing:0!important; }
html[data-style="7"] h1 { font-size:2rem!important;font-weight:900!important;letter-spacing:-.03em!important; }
html[data-style="7"] h2,html[data-style="7"] h3 { font-size:1rem!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.06em!important; }
html[data-style="7"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:2px solid #000!important;box-shadow:3px 3px 0 #000!important;border-radius:0!important;padding:4px 12px!important; }
html[data-style="7"] [class*="text-purple"] { color:#0A0A0A!important; }
html[data-style="7"] .border-purple-600 { border:2px solid #0A0A0A!important;box-shadow:3px 3px 0 #0A0A0A!important;border-radius:0!important;color:#0A0A0A!important; }
html[data-style="7"] [class*="border-gray"] { border-color:#0A0A0A!important; }
html[data-style="7"] .bg-white,.bg-gray-50 { background:#FFFDF0!important; }
html[data-style="7"] [class*="text-gray"] { color:#444!important; }
html.dark[data-style="7"] body { background:#1A1A1A!important;color:#FAFAFA!important;font-size:14px!important; }
html.dark[data-style="7"] nav { background:#1A1A1A!important;border-color:#FAFAFA!important; }
html.dark[data-style="7"] footer { background:#0A0A0A!important; }
html.dark[data-style="7"] footer,html.dark[data-style="7"] footer * { color:#FDE047!important; }
html.dark[data-style="7"] nav a { color:#FAFAFA!important;text-transform:uppercase!important;letter-spacing:.1em!important; }
html.dark[data-style="7"] nav a:first-child { color:#FDE047!important;font-weight:900!important;text-transform:none!important; }
html.dark[data-style="7"] h1,html.dark[data-style="7"] h2,html.dark[data-style="7"] h3 { color:#FAFAFA!important;font-weight:900!important; }
html.dark[data-style="7"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:2px solid #FAFAFA!important;box-shadow:3px 3px 0 #555!important;border-radius:0!important; }
html.dark[data-style="7"] [class*="text-purple"] { color:#FDE047!important; }
html.dark[data-style="7"] [class*="border-gray"] { border-color:#444!important; }
html.dark[data-style="7"] [class*="text-gray"] { color:#aaa!important; }
html.dark[data-style="7"] .bg-white,.bg-gray-50,.bg-gray-950 { background:#111!important; }

/* ── 8. Serif Brutal ── Georgia headings, same brutal borders & palette */
html[data-style="8"] body { background:#FFFDF0!important;color:#0A0A0A!important;font-family:system-ui,sans-serif; }
html[data-style="8"] nav { background:#FFFDF0!important;border-bottom:3px solid #0A0A0A!important;box-shadow:none!important; }
html[data-style="8"] footer { background:#0A0A0A!important;border-top:3px solid #0A0A0A!important; }
html[data-style="8"] footer,html[data-style="8"] footer * { color:#FDE047!important; }
html[data-style="8"] nav a { color:#0A0A0A!important; }
html[data-style="8"] nav a:first-child { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="8"] h1,html[data-style="8"] h2,html[data-style="8"] h3 { font-family:Georgia,'Times New Roman',serif!important;color:#0A0A0A!important;font-weight:700!important; }
html[data-style="8"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #000!important;box-shadow:4px 4px 0 #000!important;border-radius:0!important; }
html[data-style="8"] [class*="text-purple"] { color:#0A0A0A!important; }
html[data-style="8"] .border-purple-600 { border:3px solid #0A0A0A!important;box-shadow:4px 4px 0 #0A0A0A!important;border-radius:0!important;color:#0A0A0A!important; }
html[data-style="8"] [class*="border-gray"] { border-color:#0A0A0A!important;border-width:2px!important; }
html[data-style="8"] .bg-white,.bg-gray-50 { background:#FFFDF0!important; }
html[data-style="8"] [class*="text-gray"] { color:#444!important; }
html.dark[data-style="8"] body { background:#1A1A1A!important;color:#FAFAFA!important; }
html.dark[data-style="8"] nav { background:#1A1A1A!important;border-color:#FAFAFA!important; }
html.dark[data-style="8"] footer { background:#0A0A0A!important;border-color:#FAFAFA!important; }
html.dark[data-style="8"] footer,html.dark[data-style="8"] footer * { color:#FDE047!important; }
html.dark[data-style="8"] nav a { color:#FAFAFA!important; }
html.dark[data-style="8"] nav a:first-child { color:#FDE047!important;font-weight:900!important; }
html.dark[data-style="8"] h1,html.dark[data-style="8"] h2,html.dark[data-style="8"] h3 { font-family:Georgia,'Times New Roman',serif!important;color:#FAFAFA!important;font-weight:700!important; }
html.dark[data-style="8"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #FAFAFA!important;box-shadow:4px 4px 0 #555!important;border-radius:0!important; }
html.dark[data-style="8"] [class*="text-purple"] { color:#FDE047!important; }
html.dark[data-style="8"] .border-purple-600 { border:3px solid #FAFAFA!important;box-shadow:4px 4px 0 #555!important;border-radius:0!important;color:#FAFAFA!important; }
html.dark[data-style="8"] [class*="border-gray"] { border-color:#444!important; }
html.dark[data-style="8"] [class*="text-gray"] { color:#aaa!important; }
html.dark[data-style="8"] .bg-white,.bg-gray-50,.bg-gray-950 { background:#111!important; }

/* ── 9. Dot Grid ── dot-grid background pattern, brutal borders on top */
html[data-style="9"] body { background-color:#FFFDF0!important;background-image:radial-gradient(#bbb 1.5px,transparent 1.5px)!important;background-size:22px 22px!important;color:#0A0A0A!important;font-family:system-ui,sans-serif; }
html[data-style="9"] nav { background:rgba(255,253,240,.96)!important;border-bottom:3px solid #0A0A0A!important;box-shadow:none!important; }
html[data-style="9"] footer { background:#0A0A0A!important;border-top:3px solid #0A0A0A!important; }
html[data-style="9"] footer,html[data-style="9"] footer * { color:#FDE047!important; }
html[data-style="9"] nav a { color:#0A0A0A!important; }
html[data-style="9"] nav a:first-child { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="9"] h1,html[data-style="9"] h2,html[data-style="9"] h3 { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="9"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #000!important;box-shadow:4px 4px 0 #000!important;border-radius:0!important; }
html[data-style="9"] [class*="text-purple"] { color:#0A0A0A!important; }
html[data-style="9"] .border-purple-600 { border:3px solid #0A0A0A!important;box-shadow:4px 4px 0 #0A0A0A!important;border-radius:0!important;color:#0A0A0A!important; }
html[data-style="9"] [class*="border-gray"] { border-color:#0A0A0A!important;border-width:2px!important; }
html[data-style="9"] .bg-white,.bg-gray-50 { background:rgba(255,253,240,.9)!important; }
html[data-style="9"] [class*="text-gray"] { color:#444!important; }
html.dark[data-style="9"] body { background-color:#1A1A1A!important;background-image:radial-gradient(#3a3a3a 1.5px,transparent 1.5px)!important;background-size:22px 22px!important;color:#FAFAFA!important; }
html.dark[data-style="9"] nav { background:rgba(26,26,26,.96)!important;border-color:#FAFAFA!important; }
html.dark[data-style="9"] footer { background:#0A0A0A!important;border-color:#FAFAFA!important; }
html.dark[data-style="9"] footer,html.dark[data-style="9"] footer * { color:#FDE047!important; }
html.dark[data-style="9"] nav a { color:#FAFAFA!important; }
html.dark[data-style="9"] nav a:first-child { color:#FDE047!important;font-weight:900!important; }
html.dark[data-style="9"] h1,html.dark[data-style="9"] h2,html.dark[data-style="9"] h3 { color:#FAFAFA!important;font-weight:900!important; }
html.dark[data-style="9"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #FAFAFA!important;box-shadow:4px 4px 0 #555!important;border-radius:0!important; }
html.dark[data-style="9"] [class*="text-purple"] { color:#FDE047!important; }
html.dark[data-style="9"] .bg-white,.bg-gray-50,.bg-gray-950 { background:rgba(26,26,26,.9)!important; }
html.dark[data-style="9"] [class*="text-gray"] { color:#aaa!important; }

/* ── 10. Stripe Bold ── yellow top+bottom stripes on nav/footer, clean body */
html[data-style="10"] body { background:#FFFDF0!important;color:#0A0A0A!important;font-family:system-ui,sans-serif; }
html[data-style="10"] nav { background:#FFFDF0!important;border-top:5px solid #FDE047!important;border-bottom:4px solid #0A0A0A!important;box-shadow:none!important; }
html[data-style="10"] footer { background:#FFFDF0!important;border-top:4px solid #0A0A0A!important;border-bottom:5px solid #FDE047!important; }
html[data-style="10"] footer,html[data-style="10"] footer * { color:#555!important; }
html[data-style="10"] nav a { color:#0A0A0A!important; }
html[data-style="10"] nav a:first-child { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="10"] h1,html[data-style="10"] h2,html[data-style="10"] h3 { color:#0A0A0A!important;font-weight:900!important; }
html[data-style="10"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #000!important;box-shadow:none!important;border-radius:0!important; }
html[data-style="10"] [class*="text-purple"] { color:#0A0A0A!important; }
html[data-style="10"] .border-purple-600 { border:3px solid #0A0A0A!important;box-shadow:none!important;border-radius:0!important;color:#0A0A0A!important; }
html[data-style="10"] [class*="border-gray"] { border-color:#0A0A0A!important;border-width:2px!important; }
html[data-style="10"] .bg-white,.bg-gray-50 { background:#FFFDF0!important; }
html[data-style="10"] [class*="text-gray"] { color:#444!important; }
html.dark[data-style="10"] body { background:#1A1A1A!important;color:#FAFAFA!important; }
html.dark[data-style="10"] nav { background:#1A1A1A!important;border-top-color:#8B7200!important;border-bottom-color:#FAFAFA!important; }
html.dark[data-style="10"] footer { background:#1A1A1A!important;border-top-color:#FAFAFA!important;border-bottom-color:#8B7200!important; }
html.dark[data-style="10"] footer,html.dark[data-style="10"] footer * { color:#aaa!important; }
html.dark[data-style="10"] nav a { color:#FAFAFA!important; }
html.dark[data-style="10"] nav a:first-child { color:#FDE047!important;font-weight:900!important; }
html.dark[data-style="10"] h1,html.dark[data-style="10"] h2,html.dark[data-style="10"] h3 { color:#FAFAFA!important;font-weight:900!important; }
html.dark[data-style="10"] .bg-purple-600,.bg-purple-700 { background:#FDE047!important;color:#000!important;border:3px solid #FAFAFA!important;box-shadow:none!important;border-radius:0!important; }
html.dark[data-style="10"] [class*="text-purple"] { color:#FDE047!important; }
html.dark[data-style="10"] .border-purple-600 { border:3px solid #FAFAFA!important;border-radius:0!important;color:#FAFAFA!important; }
html.dark[data-style="10"] [class*="border-gray"] { border-color:#444!important; }
html.dark[data-style="10"] [class*="text-gray"] { color:#aaa!important; }
html.dark[data-style="10"] .bg-white,.bg-gray-50,.bg-gray-950 { background:#111!important; }