/* Theme: Neo-brutalist */
:root { --bg: #fff8e1; --ink: #000; --muted: #222; --card: #fff; --line: #000; --font: "Arial Black", "Liberation Sans", Arial, sans-serif; --serif: var(--font); }
body { background: var(--bg); }
.topbar { background: #000; border-bottom: 4px solid #000; }
.brand-badge { background: #ffd400; color: #000; border: 2px solid #fff; border-radius: 0; }
.site-nav a { color: #fff; border-radius: 0; }
.site-nav a[aria-current="page"] { background: #ffd400; color: #000; }
.hero { background: #ffd400; color: #000; border-bottom: 4px solid #000; }
.hero h1 { font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 7vw, 72px); letter-spacing: -.03em; }
.crumbs a { color: #000; }
.gen { border: 4px solid #000; border-radius: 0; box-shadow: 10px 10px 0 #000; }
.output { font-weight: 900; font-size: clamp(20px, 3.2vw, 30px); line-height: 1.25; }
.btn { border: 3px solid #000; border-radius: 0; box-shadow: 4px 4px 0 #000; font-weight: 900; }
.btn:active { transform: translate(4px, 4px); box-shadow: none; }
.btn-primary { background: #ff3d7f; border-color: #000; color: #000; }
.btn-primary:hover { background: #ff6f9d; }
.content section, .card { border: 3px solid #000; border-radius: 0; box-shadow: 6px 6px 0 #000; }
.card { border-top: 3px solid #000; background: #fff; }
.card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #000; }
.examples li { border: 3px solid #000; border-radius: 0; background: #e6f7ff; font-weight: 700; }