:root { color-scheme: dark; --ink: #eef8ff; --muted: #9fb1c0; --faint: #688092; --line: #1b3245; --panel: #0c1a28; --panel-2: #102536; --cyan: #67e6ff; --mint: #73f0bd; --amber: #ffcb70; --red: #ff8796; --bg: #06111d; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 15% -10%, #103454 0, transparent 29rem), radial-gradient(circle at 90% 15%, #123a43 0, transparent 26rem), var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 10; left: 1rem; top: -4rem; padding: .75rem 1rem; background: var(--cyan); color: #04111d; font-weight: 800; border-radius: .5rem; transition: top .2s; }
.skip-link:focus { top: 1rem; }
.site-header { height: 4.5rem; max-width: 78rem; margin: auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 32%); }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-size: 1.1rem; font-weight: 850; letter-spacing: -.03em; }
.brand-mark { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 1px solid var(--cyan); border-radius: .5rem; color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.header-state, .source-link { color: var(--muted); font-size: .79rem; text-decoration: none; }
.header-state { display: inline-flex; align-items: center; gap: .4rem; }
.live-dot { display: inline-block; width: .48rem; height: .48rem; border-radius: 99px; background: var(--amber); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--amber), transparent 80%); }
.source-link:hover { color: var(--cyan); }
.section-wrap { width: min(100% - 3rem, 78rem); margin: auto; }
.hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 4rem; min-height: 37rem; padding: 6rem 0 4rem; }
.eyebrow { margin: 0 0 .75rem; color: var(--cyan); font: 700 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { max-width: 48rem; margin: 0; font-size: clamp(2.55rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -.064em; }
h1 span { color: var(--cyan); }
.hero-summary { max-width: 43rem; margin: 1.7rem 0 0; color: var(--muted); font-size: 1.06rem; line-height: 1.75; }
.hero-actions, .panel-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 2.8rem; padding: .7rem 1.05rem; border: 1px solid var(--line); border-radius: .65rem; text-decoration: none; font-size: .88rem; font-weight: 780; transition: transform .18s, background .18s, border-color .18s; }
.button:hover { transform: translateY(-2px); border-color: var(--cyan); }
.button:focus-visible, .step-button:focus-visible, .surface-tab:focus-visible, .text-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--cyan), transparent 32%); outline-offset: 3px; }
.button-primary { background: var(--cyan); border-color: var(--cyan); color: #05131f; }
.button-secondary { background: color-mix(in srgb, var(--panel), transparent 8%); color: var(--ink); }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.hero-proof, .evidence-panel, .surface-panel, .truth-grid article, .source-cards a { border: 1px solid var(--line); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-2), transparent 8%), color-mix(in srgb, var(--panel), transparent 3%)); box-shadow: 0 1.8rem 5rem rgba(0, 0, 0, .24); }
.hero-proof { position: relative; overflow: hidden; padding: 1.6rem; border-radius: 1rem; }
.hero-proof::after { content: ""; position: absolute; width: 19rem; height: 19rem; right: -10rem; bottom: -12rem; border: 1px solid color-mix(in srgb, var(--cyan), transparent 65%); border-radius: 50%; box-shadow: 0 0 0 1.7rem color-mix(in srgb, var(--cyan), transparent 94%), 0 0 0 3.5rem color-mix(in srgb, var(--cyan), transparent 97%); }
.proof-topline { display: flex; justify-content: space-between; color: var(--muted); font: 700 .72rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .1em; }
.proof-status { color: var(--mint); }
.proof-number { position: relative; z-index: 1; margin-top: 2rem; color: var(--cyan); font-size: 5.5rem; line-height: .9; font-weight: 850; letter-spacing: -.09em; }
.proof-number span { color: var(--muted); font-size: 1.8rem; letter-spacing: -.04em; }
.hero-proof p { position: relative; z-index: 1; max-width: 18rem; color: var(--muted); }
.hero-proof dl { position: relative; z-index: 1; margin: 1.8rem 0 0; display: grid; gap: .8rem; }
.hero-proof dl div { padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--line), transparent 22%); display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; }
.hero-proof dt { color: var(--faint); } .hero-proof dd { margin: 0; text-align: right; color: var(--ink); }
.metric-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 7rem; border: 1px solid var(--line); border-radius: .9rem; overflow: hidden; background: color-mix(in srgb, var(--panel), transparent 14%); }
.metric-strip article { min-height: 10rem; padding: 1.5rem; border-right: 1px solid var(--line); } .metric-strip article:last-child { border-right: 0; }
.metric-label, .metric-strip small { display: block; color: var(--faint); font-size: .75rem; } .metric-label { margin-bottom: .75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .1em; } .metric-strip strong { display: block; margin-bottom: .7rem; font-size: 1.06rem; }
.replay-section, .surfaces-section, .truth-section, .source-section { padding: 1rem 0 7rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; } .section-heading h2, .truth-section h2 { margin: 0; max-width: 42rem; font-size: clamp(1.8rem, 3vw, 2.85rem); letter-spacing: -.052em; line-height: 1.06; } .section-heading > p { max-width: 22rem; margin: 0; color: var(--muted); font-size: .9rem; }
.progress { margin: 0; color: var(--cyan); font: 700 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.replay-grid { display: grid; grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr); gap: 1rem; }
.replay-nav { max-height: 39rem; overflow: auto; padding-right: .3rem; } .replay-nav ol { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.step-button { width: 100%; display: flex; gap: .75rem; padding: .85rem; color: var(--muted); text-align: left; border: 1px solid transparent; border-radius: .7rem; background: transparent; transition: background .16s, border-color .16s; } .step-button:hover { border-color: var(--line); background: color-mix(in srgb, var(--panel), transparent 22%); } .step-button[aria-current="step"] { color: var(--ink); border-color: color-mix(in srgb, var(--cyan), transparent 35%); background: color-mix(in srgb, var(--cyan), transparent 92%); }
.step-number { flex: 0 0 auto; color: var(--faint); font: 700 .72rem ui-monospace, SFMono-Regular, Menlo, monospace; padding-top: .17rem; } .step-copy { display: grid; gap: .15rem; } .step-copy small { color: var(--faint); font-size: .67rem; } .step-copy strong { font-size: .79rem; line-height: 1.28; }
.evidence-panel { min-height: 31rem; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 1rem; outline: none; } .panel-topline { display: flex; justify-content: space-between; gap: 1rem; } .family-label, .state-badge { padding: .34rem .55rem; border-radius: 99px; font: 700 .66rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .07em; } .family-label { border: 1px solid var(--line); color: var(--muted); } .state-badge { color: var(--mint); background: color-mix(in srgb, var(--mint), transparent 89%); border: 1px solid color-mix(in srgb, var(--mint), transparent 60%); } .state-badge[data-state="deny"], .state-badge[data-state="gap"] { color: var(--amber); background: color-mix(in srgb, var(--amber), transparent 89%); border-color: color-mix(in srgb, var(--amber), transparent 65%); } .state-badge[data-state="review"] { color: var(--red); background: color-mix(in srgb, var(--red), transparent 89%); border-color: color-mix(in srgb, var(--red), transparent 65%); }
.evidence-panel h3 { max-width: 44rem; margin: 2.2rem 0 1rem; font-size: clamp(1.7rem, 3.1vw, 2.6rem); line-height: 1.05; letter-spacing: -.047em; } .panel-detail { max-width: 45rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 2rem 0; } .fact-grid div { min-width: 0; padding: .85rem; border: 1px solid var(--line); border-radius: .6rem; background: color-mix(in srgb, var(--bg), transparent 16%); } .fact-grid dt { margin-bottom: .4rem; color: var(--faint); font-size: .69rem; text-transform: uppercase; letter-spacing: .07em; } .fact-grid dd { margin: 0; font-size: .8rem; font-weight: 720; }
.reason-card { display: grid; gap: .45rem; padding: .9rem 1rem; border-left: 3px solid var(--cyan); background: color-mix(in srgb, var(--cyan), transparent 93%); } .reason-card span { color: var(--faint); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; } .reason-card code { color: var(--cyan); font-size: .78rem; overflow-wrap: anywhere; } .source-note { color: var(--faint); font: .7rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.text-button { padding: 0; color: var(--muted); background: transparent; border: 0; text-decoration: underline; font-size: .8rem; }
.surfaces-section { border-top: 1px solid color-mix(in srgb, var(--line), transparent 25%); } .surface-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; } .surface-tab { padding: .7rem .9rem; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: .55rem; font-size: .82rem; font-weight: 730; } .surface-tab[aria-selected="true"] { color: #04121e; background: var(--cyan); border-color: var(--cyan); }
.surface-panel { min-height: 22rem; padding: clamp(1.3rem, 4vw, 3rem); border-radius: 1rem; } .surface-panel h3 { max-width: 42rem; margin: 0 0 1.1rem; font-size: clamp(1.55rem, 3vw, 2.45rem); letter-spacing: -.045em; } .surface-panel > p:not(.eyebrow) { max-width: 49rem; margin: 0; color: var(--muted); line-height: 1.7; } .surface-panel ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; padding: 0; margin: 2rem 0; list-style: none; } .surface-panel li { position: relative; padding-left: 1.1rem; color: var(--muted); font-size: .86rem; } .surface-panel li::before { content: ""; position: absolute; left: 0; top: .5rem; width: .43rem; height: .43rem; border-radius: 99px; background: var(--mint); }
.truth-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; } .truth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .truth-grid article { padding: 1.3rem; border-radius: .85rem; } .truth-grid h3 { margin-top: 0; font-size: 1rem; } .truth-grid ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .86rem; } .truth-grid li + li { margin-top: .7rem; }
.source-section { padding-bottom: 5rem; } .source-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .source-cards a { min-height: 12rem; display: grid; align-content: start; gap: .8rem; padding: 1.3rem; border-radius: .85rem; text-decoration: none; transition: transform .18s, border-color .18s; } .source-cards a:hover { transform: translateY(-3px); border-color: var(--cyan); } .source-cards span { color: var(--cyan); font: 700 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; } .source-cards strong { font-size: 1rem; } .source-cards small { color: var(--muted); line-height: 1.55; }
footer { width: min(100% - 3rem, 78rem); display: flex; justify-content: space-between; gap: 1rem; margin: auto; padding: 1.5rem 0 2.5rem; color: var(--faint); border-top: 1px solid var(--line); font-size: .78rem; } footer a { color: var(--muted); text-decoration: none; }
@media (max-width: 860px) { .hero, .truth-section { grid-template-columns: 1fr; gap: 2.4rem; } .hero { min-height: 0; padding-top: 4rem; } .metric-strip, .surface-panel ul, .source-cards { grid-template-columns: 1fr; } .metric-strip article { border-right: 0; border-bottom: 1px solid var(--line); } .metric-strip article:last-child { border-bottom: 0; } .replay-grid { grid-template-columns: 1fr; } .replay-nav { max-height: 18rem; } .truth-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .site-header { padding: 0 1rem; } .header-state { display: none; } .section-wrap, footer { width: min(100% - 2rem, 78rem); } .section-heading { display: grid; gap: 1rem; } .fact-grid { grid-template-columns: 1fr; } .surface-tabs { display: grid; grid-template-columns: 1fr 1fr; } footer { display: grid; } }