.scwb-v220 {
  --scwb220-ink: #14212a;
  --scwb220-muted: #5e6c75;
  --scwb220-border: #c9d4da;
  --scwb220-soft: #eef3f5;
  --scwb220-panel: #ffffff;
  --scwb220-accent: #71152f;
  --scwb220-accent-dark: #4f0e20;
  --scwb220-terminal: #06100a;
  --scwb220-terminal-text: #5cff7f;
  margin: 28px 0;
  padding: clamp(22px, 4vw, 38px);
  color: var(--scwb220-ink);
  background:
    linear-gradient(rgba(20, 33, 42, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 33, 42, .025) 1px, transparent 1px),
    #f7fafb;
  background-size: 24px 24px;
  border: 1px solid var(--scwb220-border);
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(20, 33, 42, .065);
  font-family: inherit;
  line-height: 1.55;
}
.scwb-v220, .scwb-v220 * { box-sizing: border-box; }
.scwb-v220 h2, .scwb-v220 h3, .scwb-v220 p { overflow-wrap: normal; word-break: normal; hyphens: none; }
.scwb-v220 h2 { margin: 0; color: var(--scwb220-ink); font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.12; }
.scwb-v220 h3 { margin: 0 0 12px; color: var(--scwb220-ink); font-size: 1.08rem; line-height: 1.3; }
.scwb-v220 p { margin-top: 0; }
.scwb-v220__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--scwb220-border); }
.scwb-v220__eyebrow { margin: 0 0 7px !important; color: var(--scwb220-accent); font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.scwb-v220__status { flex: 0 0 auto; padding: 6px 9px; color: var(--scwb220-accent-dark); background: #f6e9ed; border: 1px solid #d8aeba; border-radius: 2px; font-size: .76rem; font-weight: 800; }
.scwb-v220__grid { display: grid; gap: 16px; margin-bottom: 18px; }
.scwb-v220__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scwb-v220__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scwb-v220__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scwb-v220__panel { min-width: 0; padding: 20px; background: var(--scwb220-panel); border: 1px solid var(--scwb220-border); border-radius: 2px; }
.scwb-v220__field { display: grid; gap: 7px; min-width: 0; margin-bottom: 16px; }
.scwb-v220__field > span { color: #33434f; font-size: .82rem; font-weight: 800; letter-spacing: .02em; }
.scwb-v220 input, .scwb-v220 select, .scwb-v220 textarea { width: 100%; min-width: 0; padding: 11px 12px; color: var(--scwb220-ink); background: #fff; border: 1px solid #aab8c1; border-radius: 2px; font: inherit; }
.scwb-v220 textarea { min-height: 145px; resize: vertical; font-family: "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace; font-size: .88rem; line-height: 1.55; }
.scwb-v220 input:focus, .scwb-v220 select:focus, .scwb-v220 textarea:focus { outline: 2px solid rgba(113, 21, 47, .18); outline-offset: 1px; border-color: var(--scwb220-accent); }
.scwb-v220__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 20px; }
.scwb-v220__button { display: inline-flex; min-width: 170px; min-height: 43px; align-items: center; justify-content: center; padding: 10px 15px; color: #fff; background: var(--scwb220-accent); border: 1px solid var(--scwb220-accent); border-radius: 2px; font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; }
.scwb-v220__button:hover, .scwb-v220__button:focus-visible { background: var(--scwb220-accent-dark); border-color: var(--scwb220-accent-dark); }
.scwb-v220__button--secondary { color: var(--scwb220-ink); background: #fff; border-color: #8796a0; }
.scwb-v220__button--secondary:hover, .scwb-v220__button--secondary:focus-visible { color: #fff; background: var(--scwb220-ink); border-color: var(--scwb220-ink); }
.scwb-v220__terminal { min-height: 190px; max-height: 560px; margin: 18px 0 0; padding: 18px; overflow: auto; color: var(--scwb220-terminal-text); background: var(--scwb220-terminal); border: 1px solid #183520; border-radius: 2px; white-space: pre-wrap; word-break: break-word; font-family: "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.55; }
.scwb-v220__outputs { margin-top: 8px; }
.scwb-v220__outputs .scwb-v220__terminal { margin-top: 0; }
.scwb-v220__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.scwb-v220__metric { padding: 13px; background: #fff; border: 1px solid var(--scwb220-border); border-left: 3px solid var(--scwb220-accent); }
.scwb-v220__metric span { display: block; color: var(--scwb220-muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.scwb-v220__metric strong { display: block; margin-top: 5px; font-size: 1.04rem; }
.scwb-v220__module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.scwb-v220__module-card { min-width: 0; padding: 18px; background: #fff; border: 1px solid var(--scwb220-border); border-top: 3px solid var(--scwb220-accent); }
.scwb-v220__module-card p { color: var(--scwb220-muted); font-size: .86rem; }
.scwb-v220__module-card code { display: block; padding: 9px; overflow-x: auto; color: #d7ffd9; background: #07110b; font-size: .75rem; white-space: nowrap; }
.scwb-v220__boundary { margin: 26px 0 0 !important; padding-top: 16px; color: var(--scwb220-muted); border-top: 1px solid var(--scwb220-border); font-size: .78rem; }
.scwb-v220__suite { background-color: #f3f7f8; }
@media (max-width: 980px) {
  .scwb-v220__grid--3, .scwb-v220__grid--4, .scwb-v220__module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scwb-v220__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .scwb-v220 { padding: 20px 15px; }
  .scwb-v220__header { display: grid; }
  .scwb-v220__status { justify-self: start; }
  .scwb-v220__grid--2, .scwb-v220__grid--3, .scwb-v220__grid--4, .scwb-v220__module-grid, .scwb-v220__metrics { grid-template-columns: 1fr; }
  .scwb-v220__actions { display: grid; grid-template-columns: 1fr; }
  .scwb-v220__button { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scwb-v220 *, .scwb-v220 *::before, .scwb-v220 *::after { scroll-behavior: auto !important; transition: none !important; }
}