.heading-visual {
  margin: .8rem 0 1.35rem;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--primary, #2563eb) 23%, var(--border, #dbe3ef));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #2563eb) 10%, transparent), transparent 62%), var(--card-bg, #fff);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}
.heading-visual__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; }
.heading-visual__label { margin: 0; color: var(--text-muted, #64748b); font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.heading-visual__controls { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.heading-visual__control {
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 999px;
  padding: .35rem .63rem;
  background: var(--card-bg, #fff);
  color: var(--text, #0f172a);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
}
.heading-visual__control[aria-pressed="true"] { border-color: var(--primary, #2563eb); background: var(--primary, #2563eb); color: #fff; }
.heading-visual__control:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary, #2563eb) 40%, transparent); outline-offset: 2px; }
.heading-visual__canvas { position: relative; display: flex; min-height: 96px; align-items: center; justify-content: center; margin-top: .75rem; overflow: hidden; border-radius: 10px; background: #f8fafc; isolation: isolate; }
[data-theme="dark"] .heading-visual__canvas { background: rgba(15, 23, 42, .62); }
.heading-visual__canvas::after { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 20% 10%, rgba(37,99,235,.20), transparent 40%); content: ""; }
.heading-visual__bars { display: flex; width: min(76%, 440px); height: 58px; align-items: center; justify-content: center; gap: 2px; }
.heading-visual__bar { display: block; min-width: 2px; background: #172554; border-radius: 1px; transition: height .28s ease, background-color .28s ease, opacity .28s ease; }
[data-theme="dark"] .heading-visual__bar { background: #dbeafe; }
.heading-visual[data-stage="preview"] .heading-visual__bar:nth-child(3n) { background: var(--primary, #2563eb); }
.heading-visual[data-stage="result"] .heading-visual__bar { background: #047857; }
.heading-visual__matrix { display: grid; grid-template-columns: repeat(13, 5px); grid-template-rows: repeat(13, 5px); gap: 2px; padding: 10px; }
.heading-visual__cell { width: 5px; height: 5px; border-radius: 1px; background: rgba(100,116,139,.15); transition: background-color .28s ease, transform .28s ease; }
.heading-visual__cell--on { background: #172554; }
[data-theme="dark"] .heading-visual__cell--on { background: #bfdbfe; }
.heading-visual[data-stage="preview"] .heading-visual__cell--on { background: var(--primary, #2563eb); }
.heading-visual[data-stage="result"] .heading-visual__cell--on { background: #047857; transform: scale(1.12); }
.heading-visual__document { display: grid; width: 108px; height: 72px; place-items: center; border: 2px solid #1e40af; border-radius: 6px; background: #fff; box-shadow: 7px 7px 0 rgba(37,99,235,.14); transition: transform .28s ease, box-shadow .28s ease; }
.heading-visual__document::before { width: 60px; height: 25px; background: repeating-linear-gradient(90deg, #172554 0 2px, transparent 2px 5px, #2563eb 5px 7px, transparent 7px 10px); content: ""; }
.heading-visual[data-stage="preview"] .heading-visual__document { transform: translateY(-3px) rotate(-1deg); }
.heading-visual[data-stage="result"] .heading-visual__document { border-color: #047857; box-shadow: 7px 7px 0 rgba(4,120,87,.17); }
.heading-visual__scan { position: relative; width: min(72%, 310px); height: 54px; border: 2px solid #0f766e; border-radius: 10px; overflow: hidden; }
.heading-visual__scan::before, .heading-visual__scan::after { position: absolute; top: 10px; bottom: 10px; width: 4px; background: #0f766e; content: ""; }
.heading-visual__scan::before { left: 10px; } .heading-visual__scan::after { right: 10px; }
.heading-visual__scan-line { position: absolute; top: 6px; bottom: 6px; left: 17%; width: 2px; background: #f97316; box-shadow: 0 0 12px #f97316; transition: left .45s ease; }
.heading-visual[data-stage="preview"] .heading-visual__scan-line { left: 50%; }
.heading-visual[data-stage="result"] .heading-visual__scan-line { left: 82%; background: #22c55e; box-shadow: 0 0 12px #22c55e; }
.heading-visual__caption { margin: .75rem 0 0; color: var(--text-muted, #64748b); font-size: .86rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .heading-visual *, .heading-visual *::before, .heading-visual *::after { transition: none !important; } }