/* Thô mộc — Neo-brutalism: viền đen dày, bóng cứng, màu khối. Generated by scripts/gen-styles.mjs; edit scripts/style-specs.mjs instead. */
html[data-kit][data-style="brutal"] {
  color-scheme: light;
  --ink: #f5e6c8; --ink-2: #fff4e0; --coal: #ffffff; --coal-2: #fff9ee; --coal-3: #111111;
  --smoke: #47443d; --ivory: #111111; --ivory-dim: #2b2925;
  --amber: #ff5a36; --amber-hi: #ff7c5e; --amber-lo: #c73a1a; --amber-ink: #111111;
  --neon: #b3001b; --neon-lo: color-mix(in srgb, #b3001b 70%, #000); --rain: #8f8778; --ok: #0f7a3d;
  --amber-glow: 255 90 54; --neon-glow: 179 0 27;
  --r-1: 0px; --r-2: 6px;
  --shadow-deep: 4px 4px 0 #111111;
}
html[data-kit][data-style="brutal"] body {
  --f-display: "Bricolage Grotesque", system-ui, sans-serif; --f-voice: "Bricolage Grotesque", system-ui, sans-serif; --f-body: "Be Vietnam Pro", system-ui, sans-serif; --f-mono: "Space Mono", ui-monospace, monospace;
  background: var(--ink-2); color: var(--ivory);
}
html[data-kit][data-style="brutal"] :is(.nr-backdrop > canvas, .hero-lamp, .nr-rain, .nr-flashlight, .nr-puddle) { display: none; }
html[data-kit][data-style="brutal"] :is(.nr-backdrop, .nr-scene) { background: var(--ink-2); }
html[data-kit][data-style="brutal"] .duo-stage { background: var(--coal-2); }
html[data-kit][data-style="brutal"] body.nr-grain::after { display: none; }
html[data-kit][data-style="brutal"] .nr-inked { -webkit-mask-image: none; mask-image: none; }
html[data-kit][data-style="brutal"] noir-character canvas { filter: none; }
html[data-kit][data-style="brutal"] :is(.nr-display, h1.nr, h2.nr, h3.nr, .nr-h3, .nr-hero-title, .hero-title) {
  font-family: var(--f-display); font-weight: 800; text-transform: none; letter-spacing: -0.03em; line-height: 0.98;
}
html[data-kit][data-style="brutal"] .nr-logo { text-transform: none; font-family: var(--f-display); }
html[data-kit][data-style="brutal"] .nr-titlecard.is-in .nr-tl > span { background: linear-gradient(100deg, var(--ivory) 40%, var(--amber-hi) 50%, var(--ivory) 60%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
html[data-kit][data-style="brutal"] .nr-neon-text { color: var(--neon); text-shadow: none; }
html[data-kit][data-style="brutal"] .nr-lit-text { color: var(--amber); text-shadow: none; }
html[data-kit][data-style="brutal"] .nr-redact::after { background: var(--ivory); }
html[data-kit][data-style="brutal"] :is(.nr-case, .nr-note, .nr-modal-card, .nr-toast) { background: var(--coal); box-shadow: inset 0 0 0 2.5px var(--ivory), 4px 4px 0 #111111; }
html[data-kit][data-style="brutal"] .nr-case::before { background: none; }
html[data-kit][data-style="brutal"] :is(.nr-case, .nr-note)::after { display: none; }
html[data-kit][data-style="brutal"] .nr-case--featured { background: color-mix(in srgb, var(--amber) 6%, var(--coal)); box-shadow: inset 0 0 0 2.5px var(--amber), 4px 4px 0 #111111; }
html[data-kit][data-style="brutal"] .nr-bubble { background: var(--coal-2); }
html[data-kit][data-style="brutal"] .duo { box-shadow: inset 0 0 0 2.5px var(--ivory), 4px 4px 0 #111111; }
html[data-kit][data-style="brutal"] .step-n { box-shadow: inset 0 0 0 1.5px var(--amber); }
html[data-kit][data-style="brutal"] :is(.sec, footer, .foot-end) { border-top-color: var(--coal-3); }
html[data-kit][data-style="brutal"] .nr-btn { border-radius: var(--r-2); }
html[data-kit][data-style="brutal"] .nr-btn--lamp { background: var(--amber); color: var(--amber-ink); text-shadow: none; box-shadow: inset 0 0 0 2.5px var(--ivory), 3px 3px 0 #111111; }
html[data-kit][data-style="brutal"] .nr-btn--lamp:hover { background: var(--amber-hi); box-shadow: inset 0 0 0 2.5px var(--ivory), 5px 5px 0 #111111; }
html[data-kit][data-style="brutal"] .nr-btn--lamp::before, html[data-kit][data-style="brutal"] .nr-btn--lamp::after { display: none; }
html[data-kit][data-style="brutal"] .nr-btn--ghost { color: var(--ivory); box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--ivory) 100%, transparent), 3px 3px 0 #111111; }
html[data-kit][data-style="brutal"] .nr-btn--ghost::before { background: color-mix(in srgb, var(--ivory) 8%, transparent); }
html[data-kit][data-style="brutal"] .nr-btn--ghost:hover { box-shadow: inset 0 0 0 2.5px var(--ivory), 5px 5px 0 #111111; }
html[data-kit][data-style="brutal"] .nr-btn--coal { background: var(--coal-2); color: var(--ivory); box-shadow: 0 3px 0 var(--coal-3); }
html[data-kit][data-style="brutal"] .nr-btn--coal:hover { background: color-mix(in srgb, var(--ivory) 6%, var(--coal-2)); }
html[data-kit][data-style="brutal"] .nr-btn--neon { color: var(--neon); text-shadow: none; }
html[data-kit][data-style="brutal"] :is(.nr-chip, .nr-option) { box-shadow: inset 0 0 0 2.5px var(--coal-3), 0 3px 0 var(--coal-3); }
html[data-kit][data-style="brutal"] .nr-option:hover { box-shadow: inset 0 0 0 2.5px var(--smoke), 0 3px 0 var(--coal-3); }
html[data-kit][data-style="brutal"] .nr-option[aria-checked="true"] { background: color-mix(in srgb, var(--amber) 10%, var(--coal)); box-shadow: inset 0 0 0 2.5px var(--amber), 0 3px 0 var(--amber-lo); }
html[data-kit][data-style="brutal"] .nr-option.is-right { background: color-mix(in srgb, var(--ok) 12%, var(--coal)); }
html[data-kit][data-style="brutal"] .nr-option.is-wrong { background: color-mix(in srgb, var(--neon) 10%, var(--coal)); }
html[data-kit][data-style="brutal"] :is(.nr-input, .nr-select, .nr-textarea) { background: var(--coal-2); color: var(--ivory); box-shadow: inset 0 0 0 2.5px var(--coal-3); }
html[data-kit][data-style="brutal"] :is(.nr-input, .nr-select, .nr-textarea)::placeholder { color: var(--smoke); }
html[data-kit][data-style="brutal"] :is(.nr-input, .nr-select, .nr-textarea):hover { box-shadow: inset 0 0 0 2.5px var(--smoke); }
html[data-kit][data-style="brutal"] :is(.nr-input, .nr-select, .nr-textarea):focus { background: var(--coal); box-shadow: inset 0 0 0 2.5px var(--amber); }
html[data-kit][data-style="brutal"] :is(.nr-field.is-error .nr-hint, .nr-verdict--wrong .nr-verdict-title, .nr-stat-delta.is-down) { color: var(--neon); }
html[data-kit][data-style="brutal"] .nr-badge--neon { color: var(--neon); }
html[data-kit][data-style="brutal"] .nr-progress { background: var(--coal-3); box-shadow: none; }
html[data-kit][data-style="brutal"] .nr-progress > i { background: var(--amber); }
html[data-kit][data-style="brutal"] .nr-progress > i::after { background: var(--amber-hi); }
html[data-kit][data-style="brutal"] .nr-switch::after { background: var(--smoke); }
html[data-kit][data-style="brutal"] .nr-streak-lamp { background: var(--coal-3); }
html[data-kit][data-style="brutal"] .nr-verdict { background: color-mix(in srgb, var(--ok) 6%, var(--coal)); }
html[data-kit][data-style="brutal"] .nr-verdict--wrong { background: color-mix(in srgb, var(--neon) 6%, var(--coal)); }
html[data-kit][data-style="brutal"] .nr-nav { background: color-mix(in srgb, var(--ink-2) 88%, transparent); box-shadow: 0 1px 0 var(--coal-3); }
html[data-kit][data-style="brutal"] .nr-nav-links { box-shadow: none; }
@media (max-width: 1100px) { html[data-kit][data-style="brutal"] .nr-nav-links { background: var(--ink-2); box-shadow: 0 1px 0 var(--coal-3); } }
html[data-kit][data-style="brutal"] .nr-stylepick { background: var(--coal); box-shadow: inset 0 0 0 1px var(--coal-3); }
html[data-kit][data-style="brutal"] .nr-stylepick button { color: var(--ivory-dim); }
html[data-kit][data-style="brutal"] .nr-stylepick button:hover { color: var(--ivory); }
html[data-kit][data-style="brutal"] .nr-stylepick button[aria-pressed="true"] { background: var(--ivory); color: var(--ink-2); }
html[data-kit][data-style="brutal"] .nr-stylepick :is(button, select):focus-visible { outline-color: var(--amber); }
html[data-kit][data-style="brutal"] .nr-stylepick select { color: var(--ivory); background-color: var(--coal); }
@media (prefers-reduced-motion: reduce) { html[data-kit][data-style="brutal"] :is(.nr-btn, .nr-case--link):hover { transform: none; } }