/* Sơn mài — Tranh sơn mài Việt: nền then, son đỏ, vàng quỳ. Generated by scripts/gen-styles.mjs; edit scripts/style-specs.mjs instead. */
html[data-kit][data-style="son-mai"] {
  color-scheme: dark;
  --ink: #0c0605; --ink-2: #140c09; --coal: #1f120d; --coal-2: #2a1913; --coal-3: #4a2c1f;
  --smoke: #b8a288; --ivory: #efe2cc; --ivory-dim: #d8c8ac;
  --amber: #d8452f; --amber-hi: #ef6c52; --amber-lo: #9c2416; --amber-ink: #fff4e8;
  --neon: #e3b04b; --neon-lo: color-mix(in srgb, #e3b04b 70%, #000); --rain: #8a6f55; --ok: #93c58e;
  --amber-glow: 216 69 47; --neon-glow: 227 176 75;
  --r-1: 2px; --r-2: 4px;
  --shadow-deep: 0 24px 48px -24px rgb(0 0 0 / 0.8);
}
html[data-kit][data-style="son-mai"] body {
  --f-display: "Playfair Display", Georgia, serif; --f-voice: "Playfair Display", Georgia, serif; --f-body: "Be Vietnam Pro", system-ui, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--ink-2); color: var(--ivory);
}
html[data-kit][data-style="son-mai"] :is(.nr-backdrop > canvas, .hero-lamp, .nr-rain, .nr-flashlight, .nr-puddle) { display: none; }
html[data-kit][data-style="son-mai"] :is(.nr-backdrop, .nr-scene) { background: radial-gradient(60% 50% at 80% 10%, rgb(216 69 47 / 0.14), transparent 70%), radial-gradient(40% 40% at 10% 90%, rgb(227 176 75 / 0.08), transparent 70%), var(--ink-2); }
html[data-kit][data-style="son-mai"] .duo-stage { background: var(--coal-2); }
html[data-kit][data-style="son-mai"] body.nr-grain::after { opacity: 0.05; }
html[data-kit][data-style="son-mai"] noir-character canvas { filter: none; }
html[data-kit][data-style="son-mai"] :is(.nr-display, h1.nr, h2.nr, h3.nr, .nr-h3, .nr-hero-title, .hero-title) {
  font-family: var(--f-display); font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.06;
}
html[data-kit][data-style="son-mai"] .nr-logo { text-transform: none; font-family: var(--f-display); }
html[data-kit][data-style="son-mai"] .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="son-mai"] .nr-neon-text { color: var(--neon); text-shadow: 0 0 18px rgb(var(--neon-glow) / 0.35); }
html[data-kit][data-style="son-mai"] .nr-lit-text { color: var(--amber); text-shadow: 0 0 24px rgb(var(--amber-glow) / 0.3); }
html[data-kit][data-style="son-mai"] .nr-redact::after { background: var(--ivory); }
html[data-kit][data-style="son-mai"] :is(.nr-case, .nr-note, .nr-modal-card, .nr-toast) { background: var(--coal); box-shadow: inset 0 0 0 1px var(--coal-3); }
html[data-kit][data-style="son-mai"] .nr-case::before { background: none; }
html[data-kit][data-style="son-mai"] :is(.nr-case, .nr-note)::after { display: none; }
html[data-kit][data-style="son-mai"] .nr-case--featured { background: color-mix(in srgb, var(--amber) 6%, var(--coal)); box-shadow: inset 0 0 0 1.5px var(--amber); }
html[data-kit][data-style="son-mai"] .nr-bubble { background: var(--coal-2); }
html[data-kit][data-style="son-mai"] .duo { box-shadow: inset 0 0 0 1px var(--coal-3); }
html[data-kit][data-style="son-mai"] .step-n { box-shadow: inset 0 0 0 1.5px var(--amber); }
html[data-kit][data-style="son-mai"] :is(.sec, footer, .foot-end) { border-top-color: var(--coal-3); }
html[data-kit][data-style="son-mai"] .nr-btn { border-radius: var(--r-2); }
html[data-kit][data-style="son-mai"] .nr-btn--lamp { background: var(--amber); color: var(--amber-ink); text-shadow: none; box-shadow: 0 2px 0 var(--amber-lo); }
html[data-kit][data-style="son-mai"] .nr-btn--lamp:hover { background: var(--amber-hi); box-shadow: 0 3px 0 var(--amber-lo); }
html[data-kit][data-style="son-mai"] .nr-btn--lamp::before, html[data-kit][data-style="son-mai"] .nr-btn--lamp::after { display: none; }
html[data-kit][data-style="son-mai"] .nr-btn--ghost { color: var(--ivory); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ivory) 35%, transparent); }
html[data-kit][data-style="son-mai"] .nr-btn--ghost::before { background: color-mix(in srgb, var(--ivory) 8%, transparent); }
html[data-kit][data-style="son-mai"] .nr-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ivory); }
html[data-kit][data-style="son-mai"] .nr-btn--coal { background: var(--coal-2); color: var(--ivory); box-shadow: 0 3px 0 var(--coal-3); }
html[data-kit][data-style="son-mai"] .nr-btn--coal:hover { background: color-mix(in srgb, var(--ivory) 6%, var(--coal-2)); }
html[data-kit][data-style="son-mai"] .nr-btn--neon { color: var(--neon); text-shadow: none; }
html[data-kit][data-style="son-mai"] :is(.nr-chip, .nr-option) { box-shadow: inset 0 0 0 1px var(--coal-3), 0 3px 0 var(--coal-3); }
html[data-kit][data-style="son-mai"] .nr-option:hover { box-shadow: inset 0 0 0 1px var(--smoke), 0 3px 0 var(--coal-3); }
html[data-kit][data-style="son-mai"] .nr-option[aria-checked="true"] { background: color-mix(in srgb, var(--amber) 10%, var(--coal)); box-shadow: inset 0 0 0 1.5px var(--amber), 0 3px 0 var(--amber-lo); }
html[data-kit][data-style="son-mai"] .nr-option.is-right { background: color-mix(in srgb, var(--ok) 12%, var(--coal)); }
html[data-kit][data-style="son-mai"] .nr-option.is-wrong { background: color-mix(in srgb, var(--neon) 10%, var(--coal)); }
html[data-kit][data-style="son-mai"] :is(.nr-input, .nr-select, .nr-textarea) { background: var(--coal-2); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--coal-3); }
html[data-kit][data-style="son-mai"] :is(.nr-input, .nr-select, .nr-textarea)::placeholder { color: var(--smoke); }
html[data-kit][data-style="son-mai"] :is(.nr-input, .nr-select, .nr-textarea):hover { box-shadow: inset 0 0 0 1px var(--smoke); }
html[data-kit][data-style="son-mai"] :is(.nr-input, .nr-select, .nr-textarea):focus { background: var(--coal); box-shadow: inset 0 0 0 1.5px var(--amber); }
html[data-kit][data-style="son-mai"] :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="son-mai"] .nr-badge--neon { color: var(--neon); }
html[data-kit][data-style="son-mai"] .nr-progress { background: var(--coal-3); box-shadow: none; }
html[data-kit][data-style="son-mai"] .nr-progress > i { background: var(--amber); }
html[data-kit][data-style="son-mai"] .nr-progress > i::after { background: var(--amber-hi); }
html[data-kit][data-style="son-mai"] .nr-switch::after { background: var(--smoke); }
html[data-kit][data-style="son-mai"] .nr-streak-lamp { background: var(--coal-3); }
html[data-kit][data-style="son-mai"] .nr-verdict { background: color-mix(in srgb, var(--ok) 6%, var(--coal)); }
html[data-kit][data-style="son-mai"] .nr-verdict--wrong { background: color-mix(in srgb, var(--neon) 6%, var(--coal)); }
html[data-kit][data-style="son-mai"] .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="son-mai"] .nr-nav-links { box-shadow: none; }
@media (max-width: 1100px) { html[data-kit][data-style="son-mai"] .nr-nav-links { background: var(--ink-2); box-shadow: 0 1px 0 var(--coal-3); } }
html[data-kit][data-style="son-mai"] .nr-stylepick { background: var(--coal); box-shadow: inset 0 0 0 1px var(--coal-3); }
html[data-kit][data-style="son-mai"] .nr-stylepick button { color: var(--ivory-dim); }
html[data-kit][data-style="son-mai"] .nr-stylepick button:hover { color: var(--ivory); }
html[data-kit][data-style="son-mai"] .nr-stylepick button[aria-pressed="true"] { background: var(--ivory); color: var(--ink-2); }
html[data-kit][data-style="son-mai"] .nr-stylepick :is(button, select):focus-visible { outline-color: var(--amber); }
html[data-kit][data-style="son-mai"] .nr-stylepick select { color: var(--ivory); background-color: var(--coal); }
@media (prefers-reduced-motion: reduce) { html[data-kit][data-style="son-mai"] :is(.nr-btn, .nr-case--link):hover { transform: none; } }