:root { --ops-ink: #212121; --ops-panel: #fffcf0; --ops-pink: #fbe9f2; --ops-green: #d1e8ca; --ops-yellow: #ffe298; --ops-blue: #bde7fb; --ops-purple: #d8cfe7; --ops-coral: #f7a4a6; --ops-neutral: #fff2df; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--ops-pink); color: var(--ops-ink); font-family: Verdana, Arial, sans-serif; }
.ops-skip { position: absolute; left: 12px; top: -80px; z-index: 20; border: 4px solid var(--ops-ink); background: #fff; color: var(--ops-ink); padding: 10px; font-weight: 900; }
.ops-skip:focus { top: 12px; }
.ops-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px clamp(14px, 3vw, 34px); border-bottom: 5px solid var(--ops-ink); background: var(--ops-panel); }
.ops-brand, .ops-header nav { display: flex; align-items: center; gap: 10px; }
.ops-brand { color: var(--ops-ink); font-weight: 950; text-decoration: none; }
.ops-badge { display: grid; width: 42px; height: 42px; place-items: center; border: 4px solid var(--ops-ink); background: var(--ops-purple); }
.ops-header nav a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ops-ink); font-weight: 900; text-underline-offset: 4px; }
.ops-shell { display: grid; gap: 18px; width: min(1480px, calc(100% - 28px)); margin: 20px auto 40px; }
.ops-panel { display: grid; gap: 14px; padding: clamp(16px, 3vw, 28px); border: 5px solid var(--ops-ink); background: var(--ops-panel); }
.ops-panel h1, .ops-panel h2, .ops-panel h3, .ops-panel p { margin: 0; }
.ops-panel h1 { max-width: 15ch; font-size: clamp(34px, 6vw, 68px); line-height: .94; text-transform: uppercase; }
.ops-panel h2 { font-size: clamp(24px, 3vw, 38px); line-height: 1; text-transform: uppercase; }
.ops-panel h3 { font-size: 18px; }
.ops-panel p, .ops-panel li, .ops-panel td, .ops-panel th, .ops-panel button, .ops-panel a { font-weight: 750; line-height: 1.45; }
.ops-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); align-items: stretch; background: var(--ops-purple); }
.ops-eyebrow { width: fit-content; padding: 5px 8px; border: 3px solid var(--ops-ink); background: var(--ops-yellow); font-size: 13px; font-weight: 950; text-transform: uppercase; }
.ops-trust { display: grid; gap: 10px; align-content: center; border: 4px solid var(--ops-ink); background: var(--ops-panel); padding: 16px; }
.ops-trust strong { font-size: clamp(24px, 3vw, 38px); line-height: 1; text-transform: uppercase; }
.ops-auth { min-height: 250px; align-content: center; justify-items: start; }
.ops-button { min-height: 46px; padding: 8px 13px; border: 4px solid var(--ops-ink); background: var(--ops-blue); color: var(--ops-ink); font: inherit; font-weight: 950; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.ops-button:hover, .ops-button:focus-visible, .ops-header a:hover, .ops-header a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.ops-button:focus-visible, .ops-header a:focus-visible, .ops-skip:focus-visible { outline: 4px solid #005fcc; outline-offset: 3px; }
.ops-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 14px; }
.ops-status { min-height: 24px; }
.ops-launch { display: grid; gap: 4px; border: 5px solid var(--ops-ink); padding: 14px; background: var(--ops-green); }
.ops-launch.is-blocked { background: var(--ops-coral); }
.ops-launch strong { display: block; font-size: clamp(22px, 3vw, 34px); text-transform: uppercase; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ops-card { display: grid; gap: 7px; align-content: start; min-height: 128px; padding: 13px; border: 4px solid var(--ops-ink); background: #fff; }
.ops-card:nth-child(4n + 1) { background: var(--ops-blue); }
.ops-card:nth-child(4n + 2) { background: var(--ops-green); }
.ops-card:nth-child(4n + 3) { background: var(--ops-neutral); }
.ops-card:nth-child(4n) { background: #fbdce9; }
.ops-card strong { font-size: clamp(28px, 4vw, 44px); line-height: 1; }
.ops-card small { font-weight: 800; }
.ops-gate { min-height: 140px; }
.ops-gate[data-status="blocked"] { background: var(--ops-coral); }
.ops-gate[data-status="staged"] { background: var(--ops-yellow); }
.ops-gate-status { width: fit-content; border: 3px solid var(--ops-ink); background: #fff; padding: 3px 7px; font-size: 12px; font-weight: 950; text-transform: uppercase; }
.ops-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ops-subpanel { display: grid; gap: 12px; align-content: start; border: 4px solid var(--ops-ink); background: #fff; padding: 14px; }
.ops-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
.ops-mini { display: grid; gap: 4px; padding: 9px; border: 3px solid var(--ops-ink); background: var(--ops-neutral); }
.ops-mini strong { font-size: 24px; }
.ops-table-wrap { overflow-x: auto; border: 4px solid var(--ops-ink); background: #fff; }
.ops-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.ops-table th, .ops-table td { padding: 9px; border: 2px solid var(--ops-ink); text-align: left; vertical-align: top; }
.ops-table th { background: var(--ops-blue); text-transform: uppercase; }
.ops-chip { display: inline-block; padding: 3px 6px; border: 3px solid var(--ops-ink); background: var(--ops-yellow); font-size: 12px; font-weight: 950; text-transform: uppercase; }
.ops-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
.ops-boundary { background: var(--ops-neutral); }
.ops-boundary ul { margin: 0; padding-left: 22px; }
.ops-empty { padding: 13px; border: 3px dashed var(--ops-ink); background: var(--ops-neutral); }
@media (max-width: 820px) { .ops-hero, .ops-two-column { grid-template-columns: 1fr; } .ops-heading-row { align-items: stretch; flex-direction: column; } }
@media (max-width: 620px) { .ops-header { align-items: stretch; flex-direction: column; } .ops-header nav { flex-wrap: wrap; } .ops-shell { width: min(100% - 16px, 1480px); margin-top: 8px; } .ops-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 390px) { .ops-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }