:root {
  --navy: #08243d;
  --navy-2: #103653;
  --blue: #1f66ff;
  --blue-dark: #1450d2;
  --sky: #eaf3ff;
  --surface: #ffffff;
  --canvas: #f5f8fc;
  --line: #d9e3ef;
  --muted: #60748a;
  --amber: #a85b13;
  --amber-bg: #fff5e9;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--navy); background: var(--canvas); font: 15px/1.55 var(--body); }
body::before { position: fixed; z-index: -1; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 8% 0%, rgba(31,102,255,.10), transparent 32rem), linear-gradient(180deg, #fbfdff, var(--canvas)); }
button, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(31,102,255,.45); outline-offset: 3px; }
button:disabled { opacity: .48; cursor: not-allowed; }
.skip-link { position: fixed; z-index: 20; top: -4rem; left: 1rem; padding: .65rem 1rem; color: #fff; background: var(--blue); text-decoration: none; }
.skip-link:focus { top: 1rem; }
.page-shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.topbar { display: flex; min-height: 80px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--navy); font-size: .86rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.brand b { color: var(--blue); }
.brand-mark { display: flex; width: 30px; height: 30px; align-items: end; gap: 3px; padding: 5px; border: 1px solid #a9c5ff; background: #eaf2ff; }
.brand-mark i { width: 5px; background: var(--blue); }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 14px; }.brand-mark i:nth-child(3) { height: 20px; }
.topbar-note, .eyebrow, .stage-kicker { color: #52708f; font: 700 .69rem/1.4 var(--mono); letter-spacing: .1em; }
.hero { padding: clamp(62px, 9vw, 112px) 0 60px; }
.hero .eyebrow { color: var(--blue); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); }
h1 { max-width: 850px; margin: 14px 0 18px; font-size: clamp(2.7rem, 6.3vw, 5.9rem); line-height: .98; letter-spacing: -.055em; }
h1 em { color: var(--blue); font-style: normal; }
.hero-lede { max-width: 690px; margin-bottom: 36px; color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.26rem); }
.architecture-strip { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1.3fr 32px 1fr 32px 1fr; max-width: 1080px; align-items: center; padding: 21px 22px; border: 1px solid #c9d8eb; background: var(--surface); box-shadow: 0 15px 35px rgba(18, 58, 98, .07); }
.architecture-strip div { display: flex; min-height: 68px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; }
.architecture-strip b { color: #54718e; font: 700 .7rem/1 var(--mono); }
.architecture-strip span { color: var(--navy); font-size: .78rem; font-weight: 700; line-height: 1.28; }
.architecture-strip i, .route-line { position: relative; height: 1px; background: #a8c2df; }
.architecture-strip i::after, .route-line::after { position: absolute; top: -3px; right: -1px; content: ""; border: 4px solid transparent; border-left-color: #a8c2df; }
.architecture-strip .ccn-stage { margin: -7px 0; border: 1px solid #8ab2ff; background: #edf4ff; }
.architecture-strip .ccn-stage b, .architecture-strip .ccn-stage span { color: var(--blue-dark); }
.architecture-strip .ccn-link { background: var(--blue); }.architecture-strip .ccn-link::after { border-left-color: var(--blue); }.architecture-strip .ccn-link small { position: absolute; top: -20px; left: 50%; color: var(--blue); font: 700 .62rem var(--mono); transform: translateX(-50%); }
.hero-proof { display: flex; gap: 10px; align-items: center; margin-top: 20px; color: var(--muted); font-size: .85rem; }.hero-proof p { margin: 0; }.hero-proof strong { color: var(--navy); }.proof-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--amber); }
.deployment-status { display: flex; gap: 14px; align-items: center; margin: 0 0 4px; padding: 14px 16px; border: 1px solid #efd3b2; background: var(--amber-bg); }.deployment-status span { flex: none; color: var(--amber); font: 700 .65rem/1 var(--mono); letter-spacing: .08em; }.deployment-status p { margin: 0; color: #704d2d; font-size: .84rem; }.deployment-status.is-direct-connected { border-color: #b9d1ff; background: #eff5ff; }.deployment-status.is-direct-connected span { color: var(--blue); }.deployment-status.is-direct-connected p { color: #315277; }.deployment-status.is-ccn-pending { border-color: #efd3b2; background: var(--amber-bg); }
.demo-intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding: 40px 0 20px; border-top: 1px solid var(--line); }.demo-intro > div { display: flex; align-items: baseline; gap: 13px; }.section-number { color: var(--blue); font: 700 .72rem var(--mono); }.demo-intro h2, .test-heading h2, .result-heading h2, .validation-note h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.55rem); letter-spacing: -.035em; }.demo-intro p { max-width: 390px; margin: 0; color: var(--muted); font-size: .9rem; }
.mode-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.path-button { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; min-height: 90px; padding: 18px; border: 1px solid var(--line); color: var(--navy); text-align: left; background: var(--surface); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.path-button:hover { transform: translateY(-2px); border-color: #91b4fc; box-shadow: 0 8px 18px rgba(31,102,255,.08); }.path-button.active { border: 2px solid var(--blue); background: #f2f6ff; }.path-index { display: grid; width: 31px; height: 31px; place-items: center; color: #60748a; border: 1px solid #c8d6e7; font: 700 .72rem var(--mono); }.path-button.active .path-index { color: #fff; border-color: var(--blue); background: var(--blue); }.path-button strong { display: block; font-family: var(--display); font-size: 1.15rem; }.path-button small { display: block; margin-top: 2px; color: var(--muted); font-size: .77rem; }.mode-state { color: var(--blue); font: 700 .68rem var(--mono); text-transform: uppercase; }
.trace-panel { margin-top: 28px; padding: clamp(22px, 4vw, 42px); color: #eaf3ff; border-top: 4px solid var(--blue); background: var(--navy); box-shadow: 0 18px 36px rgba(8,36,61,.13); }.trace-heading, .result-heading, .test-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.trace-panel .eyebrow, .trace-panel .trace-summary, .trace-node p { color: #9cb5ce; }.trace-heading h2 { margin: 4px 0 0; color: #fff; font-size: clamp(1.65rem, 3vw, 2.45rem); letter-spacing: -.03em; }.path-tag { display: inline-flex; flex: none; align-items: center; min-height: 25px; padding: 5px 8px; color: #fff; background: #52708f; font: 700 .64rem/1 var(--mono); letter-spacing: .06em; }.path-tag.accelerated { background: var(--blue); }.trace-summary { max-width: 760px; margin: 14px 0 32px; }.trace-route { display: flex; align-items: center; justify-content: center; }.trace-route[hidden] { display: none; }.trace-node { display: grid; width: min(15vw, 146px); min-height: 120px; padding: 16px; place-content: center; border: 1px solid rgba(188,214,238,.3); text-align: center; background: rgba(255,255,255,.05); transition: background .2s ease, border-color .2s ease, transform .2s ease; }.trace-node b { color: #9fc0ff; font: 700 .7rem var(--mono); }.trace-node h3 { margin: 7px 0 2px; color: #fff; font-size: .98rem; }.trace-node p { margin: 0; font-size: .69rem; }.trace-node.ccn-node { border-color: #7faaff; background: rgba(31,102,255,.2); }.route-line { width: clamp(14px, 3.8vw, 44px); background: #4d7398; }.route-line::after { border-left-color: #4d7398; }.ccn-line { background: #5e91ff; }.ccn-line::after { border-left-color: #5e91ff; }.trace-node.is-active { border-color: #fff; background: var(--blue); transform: translateY(-5px); }.trace-node.is-complete { border-color: #8ec3ff; background: rgba(31,102,255,.14); }.trace-node.is-returning { border-color: #fff; background: #2e7cff; }.trace-status { display: flex; gap: 10px; align-items: center; margin-top: 28px; padding-top: 17px; border-top: 1px solid rgba(188,214,238,.2); }.trace-status > div { display: grid; gap: 3px; }.trace-status span { color: #92b7e6; font: 700 .65rem var(--mono); }.trace-status strong { color: #eaf3ff; font-size: .86rem; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #87a6c4; }.mode-accelerated .status-dot { background: #75a3ff; box-shadow: 0 0 0 5px rgba(117,163,255,.12); }
.test-area { display: grid; grid-template-columns: 1.45fr .8fr; gap: 18px; margin-top: 28px; }.command-card, .result-panel { border: 1px solid var(--line); background: var(--surface); box-shadow: 0 10px 25px rgba(17,62,104,.05); }.command-card { padding: clamp(22px, 3.5vw, 38px); border-top: 3px solid var(--navy); }.result-panel { padding: clamp(22px, 3.2vw, 34px); border-top: 3px solid var(--blue); }.test-heading { justify-content: flex-start; }.test-heading > div { margin-right: auto; }.command-counter { color: var(--blue); }.command-counter strong { font: 700 2rem/1 var(--mono); }.command-counter span { color: var(--muted); font: 700 .7rem var(--mono); }.command-stage { position: relative; display: grid; min-height: 212px; place-content: center; padding: 30px; overflow: hidden; color: #fff; text-align: center; background: linear-gradient(135deg, #0a2844, #123c63); }.command-stage::before { position: absolute; inset: 0; content: ""; opacity: .27; background: linear-gradient(90deg, transparent 49%, rgba(255,255,255,.12) 50%, transparent 51%), linear-gradient(transparent 49%, rgba(255,255,255,.12) 50%, transparent 51%); background-size: 32px 32px; }.stage-kicker, .command-stage h3, .command-stage > p { position: relative; }.stage-kicker { margin-bottom: 7px; color: #9ac2ff; }.command-stage h3 { margin-bottom: 7px; font-size: 1.85rem; }.command-stage > p { max-width: 470px; margin-bottom: 0; color: #c6daed; }.ack-overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; background: rgba(6,25,42,.86); }.ack-overlay[hidden] { display: none; }.ack-overlay p { margin: 11px 0 0; color: #fff; }.relay-spinner { width: 32px; height: 32px; margin: auto; border: 3px solid rgba(255,255,255,.24); border-top-color: #fff; border-radius: 50%; animation: spin .75s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }.command-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin-top: 11px; }.fire-command-button, .batch-command-button, .reset-button { min-height: 48px; border: 0; font-weight: 800; }.fire-command-button { color: #fff; background: var(--blue); }.fire-command-button:hover { background: var(--blue-dark); }.fire-command-button span, .batch-command-button span { font-weight: 500; opacity: .74; }.batch-command-button { color: var(--navy); background: #e7eef7; }.batch-command-button:hover { background: #dce8f5; }.command-footer { display: flex; align-items: center; gap: 16px; margin-top: 14px; color: var(--muted); font-size: .76rem; }.command-footer strong { display: block; color: var(--navy); }.reset-button { min-height: 32px; margin-left: auto; padding: 0 11px; color: var(--navy); border: 1px solid #c7d5e4; background: #fff; font-size: .75rem; }.reset-button:hover { border-color: var(--blue); color: var(--blue); }
.result-heading h2 { margin: 5px 0 0; font-size: 1.65rem; }.completion-readout { margin: 28px 0 22px; padding: 19px; border-left: 3px solid var(--blue); background: #f3f7ff; }.completion-readout span { display: block; color: #56718c; font: 700 .65rem var(--mono); }.completion-readout strong { display: block; margin: 5px 0; color: var(--blue); font: 700 1.8rem var(--mono); }.completion-readout small { color: var(--muted); font-size: .72rem; line-height: 1.3; }.command-details { margin: 0; }.command-details div { display: grid; grid-template-columns: 94px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid #e3ebf3; }.command-details dt { color: var(--muted); font-size: .76rem; }.command-details dd { margin: 0; color: var(--navy); font: 700 .75rem var(--mono); overflow-wrap: anywhere; }.ack-count { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--muted); font-size: .78rem; }.ack-count strong { color: var(--blue); font: 700 1.45rem var(--mono); }
.validation-note { display: grid; grid-template-columns: auto 1fr 1.3fr; gap: 18px; align-items: center; margin: 46px 0 35px; padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.validation-note h2 { font-size: 1.7rem; }.validation-note .eyebrow { margin-bottom: 5px; }.validation-note p { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }.validation-note b { padding: 6px 9px; color: #35546e; border: 1px solid #cfdeec; background: #fff; font: 700 .7rem var(--mono); }
footer { display: flex; gap: 18px; align-items: start; padding: 0 0 30px; color: var(--muted); font-size: .75rem; }footer span { flex: none; padding: 5px 8px; color: var(--amber); border: 1px solid #f0c997; background: var(--amber-bg); font: 700 .63rem var(--mono); }footer p { max-width: 800px; margin: 0; }.compatibility-state { display: none; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) { .page-shell { width: min(100% - 28px, 620px); }.topbar { min-height: 68px; }.topbar-note { display: none; }.hero { padding: 54px 0 42px; }h1 { font-size: clamp(2.55rem, 13vw, 4.3rem); }.hero-lede { font-size: 1rem; }.architecture-strip { grid-template-columns: 1fr 22px 1fr; gap: 0; padding: 14px; }.architecture-strip i, .architecture-strip .ccn-link { display: none; }.architecture-strip div { min-height: 58px; }.architecture-strip div:nth-of-type(4), .architecture-strip div:nth-of-type(5) { display: none; }.architecture-strip .ccn-stage { margin: 0; }.demo-intro { display: block; padding-top: 26px; }.demo-intro p { margin-top: 8px; }.mode-buttons, .test-area { grid-template-columns: 1fr; }.trace-panel { margin-top: 18px; }.trace-heading { align-items: start; }.trace-route { display: grid; grid-template-columns: 1fr; gap: 0; }.trace-node { width: 100%; min-height: 0; padding: 13px; grid-template-columns: 38px 1fr; gap: 8px; place-content: start; text-align: left; }.trace-node b { grid-row: span 2; align-self: center; }.trace-node h3 { margin: 0; }.route-line { width: 1px; height: 18px; margin-left: 27px; }.route-line::after { top: auto; right: -3px; bottom: -2px; border: 4px solid transparent; border-top-color: #4d7398; }.ccn-line::after { border-top-color: #5e91ff; }.command-actions { grid-template-columns: 1fr; }.command-footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; }.validation-note { grid-template-columns: auto 1fr; }.validation-note p { grid-column: 1 / -1; }footer { display: grid; gap: 9px; } }