/* /nhid-clinical-ui.css */
:root {
--ink: #0d2846;
--ink-soft: #1f2730;
--body: #3a424b;
--blue: #0b6ebc;
--blue-soft: #eef2f6;
--teal: #14778f;
--teal-soft: #eaf3f1;
--line: rgba(28, 32, 38, 0.14);
--paper: #fdfcfa;
--mist: #f6f4f0;
--shadow: 0 1px 2px rgba(20, 30, 45, 0.05), 0 8px 24px rgba(20, 30, 45, 0.06);
--sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--text: var(--ink-soft);
--text-muted: var(--body);
--bg: var(--mist);
--bg-2: #eaf5fb;
--surface: var(--paper);
--border: var(--line);
--radius: 12px;
--radius-lg: 16px;
--radius-sm: 6px;
--font-display: var(--display);
--font-body: var(--sans);
--nav-h: 5rem;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--ink-soft);
background: var(--paper);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--display);
font-weight: 700;
line-height: 1.15;
color: var(--ink);
letter-spacing: -0.02em;
margin: 0;
}
p { margin: 0; }
.container {
width: min(100% - 2rem, 1320px);
margin-inline: auto;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid rgba(203, 213, 225, 0.75);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(18px);
}
.nav {
display: flex;
min-height: 5rem;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.9rem;
}
.brand-mark {
position: relative;
display: inline-flex;
width: 3.65rem;
height: 3.65rem;
align-items: center;
justify-content: center;
border-radius: 1rem 1rem 1.32rem 1.32rem;
overflow: hidden;
flex-shrink: 0;
}
.brand-mark img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.brand strong {
display: block;
color: var(--ink);
font-family: var(--display);
font-size: 1.65rem;
line-height: 1;
letter-spacing: -0.04em;
}
.brand small {
display: block;
margin-top: 0.25rem;
color: #64748b;
font-size: 0.78rem;
font-weight: 500;
}
.nav-links {
display: flex;
align-items: center;
gap: 0.25rem;
}
.nav-links a {
position: relative;
padding: 1.8rem 0.9rem 1.55rem;
color: #334155;
font-size: 0.96rem;
font-weight: 500;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0.85rem;
right: 0.85rem;
bottom: -1px;
height: 0.18rem;
transform: scaleX(0);
transform-origin: left;
border-radius: 999px 999px 0 0;
background: var(--teal);
transition: transform 200ms ease;
}
.nav-links a:hover,
.nav-links .is-active {
color: #0b5f9e;
}
.nav-links a:hover::after,
.nav-links .is-active::after {
transform: scaleX(1);
}
.nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.icon-button {
display: inline-flex;
width: 3.15rem;
height: 3.15rem;
align-items: center;
justify-content: center;
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 999px;
color: var(--ink);
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 12px 32px rgba(15, 57, 96, 0.06);
cursor: pointer;
}
.menu-button {
display: none;
}
.primary-pill,
.cta-button,
.closing-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 3.2rem;
padding: 0 1.45rem;
border-radius: 999px;
color: white;
background: var(--blue);
font-weight: 700;
box-shadow: 0 18px 45px rgba(13, 108, 166, 0.23);
transition: transform 240ms ease, box-shadow 240ms ease;
}
.primary-pill:hover,
.cta-button:hover,
.closing-button:hover {
transform: translateY(-2px);
box-shadow: 0 24px 58px rgba(13, 108, 166, 0.3);
}
.eyebrow,
.section-kicker {
display: inline-flex;
align-items: center;
gap: 0.58rem;
color: #197f91;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.status-dot {
width: 0.56rem;
height: 0.56rem;
border-radius: 999px;
background: #27a7a8;
animation: pulse-dot 2.8s ease-out infinite;
}
.hero-notice {
margin-top: 1.5rem;
padding: .875rem 1.1rem;
border-left: 3px solid var(--blue);
background: rgba(15, 87, 139, .07);
border-radius: 0 6px 6px 0;
font-size: .875rem;
line-height: 1.65;
color: var(--ink-soft);
}
[data-theme="dark"] .hero-notice {
background: rgba(15, 87, 139, .18);
}
.callout {
margin-top: 1.25rem;
padding: .875rem 1.1rem;
border-left: 3px solid var(--blue);
background: rgba(15, 87, 139, .07);
border-radius: 0 6px 6px 0;
font-size: .875rem;
line-height: 1.7;
color: var(--ink-soft);
}
[data-theme="dark"] .callout {
background: rgba(15, 87, 139, .18);
}
.cta-button,
.secondary-button {
min-height: 3.9rem;
padding-inline: 1.85rem;
}
.secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
border: 1px solid rgba(8, 42, 91, 0.42);
border-radius: 999px;
color: #0f578b;
background: rgba(255,255,255,0.62);
font-weight: 700;
}
.closing-panel h2 {
color: var(--ink);
font-family: var(--display);
letter-spacing: -0.055em;
}
.closing-panel h2 {
margin: 1rem 0 0;
font-size: clamp(2.3rem, 4vw, 3.5rem);
line-height: 1.05;
}
.closing-panel p {
color: var(--body);
font-size: 1.08rem;
line-height: 1.8;
}
.section-heading .section-kicker {
justify-content: center;
}
.closing-section {
padding-block: 5.5rem;
}
.closing-panel {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2rem;
min-height: 28rem;
padding: clamp(2rem, 5vw, 4rem);
border-radius: 2rem;
background: #0d2846;
box-shadow: var(--shadow);
}
.closing-panel .section-kicker {
color: #a8f1ec;
}
.closing-panel h2,
.closing-panel p {
color: white;
}
.closing-panel p {
max-width: 43rem;
color: rgba(239, 246, 255, 0.88);
}
.closing-button {
color: #0f578b;
background: white;
}
.site-footer {
border-top: 1px solid var(--line);
background: white;
padding-block: 2.5rem;
}
.footer-inner {
display: flex;
justify-content: space-between;
gap: 1.5rem;
color: #64748b;
font-size: 0.92rem;
flex-wrap: wrap;
align-items: center;
}
.footer-inner p {
margin: 0;
max-width: 56ch;
line-height: 1.6;
}
.footer-inner div {
display: flex;
gap: 1.2rem;
}
.footer-inner a {
color: #355a76;
font-weight: 600;
}
.footer-copy {
font-size: 0.78rem;
color: #94a3b8;
max-width: none;
border-top: 1px solid var(--line);
padding-top: 1.25rem;
margin-top: 1rem;
line-height: 1.65;
display: none;
}
.footer-demo-line {
display: inline-block;
margin-top: 0.55rem;
font-size: 0.88rem;
}
.footer-demo-note {
font-weight: 400;
color: #94a3b8;
}
.demo-line-phone {
color: var(--blue);
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.demo-line-phone:hover {
text-decoration: underline;
}
[data-theme="dark"] .footer-demo-note {
color: #5a7a96;
}
@keyframes pulse-dot {
0% { box-shadow: 0 0 0 0 rgba(39,167,168,0.42); }
70% { box-shadow: 0 0 0 0.68rem rgba(39,167,168,0); }
100% { box-shadow: 0 0 0 0 rgba(39,167,168,0); }
}
@keyframes float-note {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.mobile-nav {
position: fixed;
top: 0;
right: -300px;
bottom: 0;
z-index: 200;
width: 280px;
display: flex;
flex-direction: column;
gap: 0;
padding: 1.5rem 0 2rem;
background: white;
border-left: 1px solid rgba(203, 213, 225, 0.75);
box-shadow: -8px 0 40px rgba(8, 42, 91, 0.12);
transition: right 200ms cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
}
.mobile-nav.open {
right: 0;
}
.mobile-nav a {
display: block;
padding: 0.875rem 1.5rem;
color: #334155;
font-size: 1rem;
font-weight: 500;
border-bottom: 1px solid rgba(203, 213, 225, 0.5);
transition: background 150ms, color 150ms;
}
.mobile-nav a:hover {
background: var(--mist);
color: var(--blue);
}
.nav-backdrop {
position: fixed;
inset: 0;
z-index: 150;
background: rgba(8, 42, 91, 0.35);
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
backdrop-filter: blur(2px);
}
.nav-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.mobile-nav-footer {
margin-top: auto;
padding: 1.25rem 1.5rem 0.5rem;
border-top: 1px solid rgba(203, 213, 225, 0.5);
}
.mobile-theme-toggle {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.75rem 0;
background: none;
border: none;
cursor: pointer;
color: #334155;
font-size: 0.95rem;
font-weight: 500;
font-family: var(--sans);
}
.mobile-theme-toggle:hover { color: var(--blue); }
.mobile-theme-label { flex: 1; text-align: left; }
[data-theme="dark"] .mobile-nav-footer { border-top-color: rgba(25, 60, 95, 0.5); }
[data-theme="dark"] .mobile-theme-toggle { color: #8aabcc; }
.search-overlay {
border-top: 1px solid var(--line);
padding: 0.75rem 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(18px);
}
.search-overlay[hidden] { display: none; }
.search-overlay-inner {
display: flex;
align-items: center;
gap: 0.75rem;
}
.search-input {
flex: 1;
font-family: var(--sans);
font-size: 1rem;
color: var(--ink-soft);
background: transparent;
border: none;
outline: none;
padding: 0.35rem 0;
}
.search-input::placeholder { color: #94a3b8; }
.search-close {
flex-shrink: 0;
box-shadow: none;
color: var(--body);
}
.search-results {
margin-top: 0.5rem;
display: grid;
gap: 0.2rem;
max-height: 22rem;
overflow-y: auto;
}
.search-result-item {
display: block;
padding: 0.7rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
transition: background 150ms;
text-decoration: none;
}
.search-result-item:hover,
.search-result-item.is-focused {
background: var(--blue-soft);
}
.search-result-title {
font-weight: 700;
font-size: 0.9rem;
color: var(--ink);
display: block;
}
.search-result-excerpt {
font-size: 0.82rem;
color: var(--body);
margin-top: 0.2rem;
display: block;
}
.search-result-excerpt mark {
background: rgba(11, 110, 188, 0.15);
color: var(--blue);
border-radius: 2px;
padding: 0 2px;
}
.search-empty {
padding: 0.75rem 0.75rem;
font-size: 0.9rem;
color: var(--body);
}
.theme-toggle .sun-icon  { display: none; }
.theme-toggle .moon-icon { display: block; }
[data-theme="dark"] .theme-toggle .sun-icon  { display: block; }
[data-theme="dark"] .theme-toggle .moon-icon { display: none; }
[data-theme="dark"] {
--ink: #cfe2f7;
--ink-soft: #a0b8d0;
--body: #728a9e;
--blue: #58b4f0;
--blue-soft: #0b1e33;
--teal: #3ecece;
--teal-soft: #091e26;
--line: rgba(30, 65, 100, 0.65);
--paper: #0d1d2f;
--mist: #091524;
--shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
--text: #a0b8d0;
--text-muted: #728a9e;
--bg: #091524;
--bg-2: #0b1e33;
--surface: #0d1d2f;
--border: rgba(30, 65, 100, 0.65);
}
[data-theme="dark"] body {
color: var(--ink-soft);
background: #0b1725;
}
[data-theme="dark"] .site-header {
background: rgba(9, 21, 36, 0.96);
border-bottom-color: rgba(30, 60, 100, 0.7);
}
[data-theme="dark"] .brand-mark {
background-image: url("/assets/brand/logo-mark-dark.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
[data-theme="dark"] .brand-mark img { display: none; }
[data-theme="dark"] .brand strong { color: var(--ink); }
[data-theme="dark"] .brand small  { color: #5a7a96; }
[data-theme="dark"] .nav-links a { color: #8aabcc; }
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links .is-active { color: #58b4f0; }
[data-theme="dark"] .icon-button {
background: rgba(13, 29, 47, 0.9);
border-color: rgba(30, 65, 100, 0.5);
color: var(--ink-soft);
}
.theme-img-dark { display: none; }
[data-theme="dark"] .theme-img-light { display: none; }
[data-theme="dark"] .theme-img-dark { display: block; }
[data-theme="dark"] .hero-art .theme-img-dark { mix-blend-mode: normal; opacity: 1; }
[data-theme="dark"] .content-card,
[data-theme="dark"] .news-card,
[data-theme="dark"] .download-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .hero-summary-card,
[data-theme="dark"] .card{
background: rgba(13, 29, 47, 0.92);
border-color: rgba(25, 60, 95, 0.65);
}
[data-theme="dark"] .closing-panel {
background: #071829;
}
[data-theme="dark"] .site-footer {
background: #091524;
border-top-color: rgba(25, 55, 85, 0.7);
}
[data-theme="dark"] .footer-inner { color: #5a7a96; }
[data-theme="dark"] .footer-inner a { color: #58b4f0; }
[data-theme="dark"] .mobile-nav {
background: #0d1d2f;
border-left-color: rgba(25, 60, 95, 0.65);
}
[data-theme="dark"] .mobile-nav a { color: #8aabcc; border-bottom-color: rgba(25, 60, 95, 0.5); }
[data-theme="dark"] .mobile-nav a:hover { background: rgba(10, 25, 45, 0.6); color: #58b4f0; }
[data-theme="dark"] .inner-hero {
background: linear-gradient(135deg, #0c1d2e 0%, #091524 100%);
}
[data-theme="dark"] .pass-box {
background: rgba(5, 50, 35, 0.5);
border-color: rgba(16, 120, 80, 0.4);
}
[data-theme="dark"] .fail-box {
background: rgba(50, 10, 10, 0.5);
border-color: rgba(150, 30, 30, 0.4);
}
[data-theme="dark"] .faq-code {
background: rgba(5, 15, 28, 0.85);
border-color: rgba(25, 60, 95, 0.65);
color: #a0b8d0;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background: rgba(10, 25, 45, 0.8);
border-color: rgba(30, 70, 110, 0.7);
color: var(--ink-soft);
}
[data-theme="dark"] .search-overlay {
background: rgba(9, 21, 36, 0.98);
border-top-color: rgba(30, 65, 100, 0.6);
}
[data-theme="dark"] .search-result-item:hover,
[data-theme="dark"] .search-result-item.is-focused { background: var(--blue-soft); }
body, .site-header, .mobile-nav, .site-footer, .content-card, .news-card, .download-card, .faq-item, .card, .hero-summary-card, .pass-box, .fail-box, .inner-hero, .closing-panel {
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.inner-hero {
background: var(--mist);
border-bottom: 1px solid var(--line);
padding-block: 4rem 3rem;
}
.crumbs {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.82rem;
color: var(--body);
margin-bottom: 1.25rem;
}
.crumbs a { color: var(--blue); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--body); }
.inner-hero h1 {
color: var(--ink);
font-family: var(--display);
font-size: clamp(2.5rem, 5.5vw, 4.5rem);
letter-spacing: -0.04em;
line-height: 1.02;
text-wrap: balance;
margin: 0.5rem 0 0;
}
.lede {
color: var(--body);
font-size: 1.1rem;
line-height: 1.75;
max-width: 62ch;
margin: 1rem 0 0;
}
.inner-hero-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: start;
}
.hero-summary-card {
min-width: 280px;
padding: 1.5rem;
border: 1px solid var(--line);
border-radius: 1rem;
background: white;
box-shadow: var(--shadow);
}
.page-section {
padding-block: 4rem;
border-bottom: 1px solid var(--line);
}
.content-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
.content-card {
padding: 2rem;
border: 1px solid rgba(198, 215, 226, 0.72);
border-radius: 1.1rem;
background: rgba(255,255,255,0.88);
box-shadow: 0 12px 40px rgba(20, 74, 105, 0.06);
transition: transform 260ms ease, box-shadow 260ms ease;
}
.content-card:hover {
transform: translateY(-3px);
box-shadow: 0 20px 60px rgba(20, 74, 105, 0.1);
}
.content-card h3 {
color: var(--ink);
font-family: var(--display);
font-size: 1.1rem;
letter-spacing: -0.035em;
margin: 0 0 0.5rem;
}
.content-card p {
color: var(--body);
font-size: 0.92rem;
line-height: 1.7;
}
.card {
padding: 1.5rem;
border: 1px solid rgba(198, 215, 226, 0.72);
border-radius: 1rem;
background: rgba(255,255,255,0.88);
box-shadow: 0 12px 40px rgba(20, 74, 105, 0.06);
}
.card h3 {
color: var(--ink);
font-family: var(--display);
font-size: 1rem;
letter-spacing: -0.03em;
margin: 0 0 0.5rem;
}
.card p {
color: var(--body);
font-size: 0.9rem;
line-height: 1.7;
margin: 0.375rem 0 0;
}
.card-link {
display: inline-block;
margin-top: 0.75rem;
color: var(--blue);
font-size: 0.875rem;
font-weight: 700;
}
.card-link:hover { text-decoration: underline; }
.pass-fail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1rem;
}
.pass-box, .fail-box {
padding: 1rem;
border-radius: var(--radius);
font-size: 0.875rem;
line-height: 1.65;
color: var(--body);
}
.pass-box {
background: rgba(16,163,108,0.06);
border: 1px solid rgba(16,163,108,0.2);
}
.fail-box {
background: rgba(220,38,38,0.05);
border: 1px solid rgba(220,38,38,0.15);
}
.pass-box strong { color: #10a36c; display: block; margin-bottom: 0.35rem; }
.fail-box strong { color: #dc2626; display: block; margin-bottom: 0.35rem; }
.news-card {
padding: 1.75rem 2rem;
border: 1px solid rgba(198, 215, 226, 0.72);
border-radius: 1.1rem;
background: rgba(255,255,255,0.88);
box-shadow: 0 8px 30px rgba(20, 74, 105, 0.06);
margin-bottom: 1rem;
}
.news-date {
font-size: 0.8rem;
color: var(--body);
font-weight: 600;
letter-spacing: 0.04em;
}
.news-link {
color: var(--blue);
font-weight: 700;
font-size: 0.875rem;
}
.news-link:hover { text-decoration: underline; }
.news-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
margin-top: 1rem;
}
.news-badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.65rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.badge-release { background: var(--blue-soft); color: var(--blue); }
.badge-comm    { background: #f0f0ff; color: #4b519f; }
.badge-program { background: rgba(16,163,108,0.1); color: #059669; }
.badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.5rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.badge-green { background: rgba(16,163,108,0.12); color: #10a36c; }
.nhid-demo-badge-fail { background: rgba(207,34,46,0.12); color: #cf222e; }
.nhid-demo-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; }
.nhid-demo-log { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.nhid-demo-turn { font-size: 0.85rem; color: var(--body); line-height: 1.5; }
.nhid-demo-turn code { font-family: "IBM Plex Mono", "Fira Code", "Courier New", monospace; font-size: 0.8rem; }
.nhid-demo-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: 0.5rem; }
.nhid-demo-col { min-width: 0; border: 1px solid var(--line, rgba(127,127,127,0.3)); border-radius: 12px; padding: 0.75rem 1rem; }
.nhid-demo-col-vendor { border-style: dashed; }
.nhid-demo-col-title { font-size: 0.9rem; margin: 0 0 0.5rem; }
.nhid-demo-col-tag { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 0.35rem; }
.nhid-demo-timing { font-size: 0.85rem; margin: 0.25rem 0 0.5rem; }
.nhid-demo-vendor-list { margin: 0.25rem 0 0.5rem; padding-left: 1.1rem; font-size: 0.85rem; line-height: 1.5; overflow-wrap: anywhere; }
.nhid-demo-vendor-why { opacity: 0.8; }
.nhid-demo-vendor-note { font-size: 0.8rem; opacity: 0.8; margin: 0.5rem 0 0; }
.download-section .download-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.download-cards {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.download-card {
padding: 2rem;
border: 1px solid rgba(198, 215, 226, 0.72);
border-radius: 1.1rem;
background: rgba(255,255,255,0.88);
box-shadow: 0 8px 30px rgba(20, 74, 105, 0.06);
transition: transform 260ms ease, box-shadow 260ms ease;
}
.download-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 50px rgba(20, 74, 105, 0.1);
}
.download-card h3 {
color: var(--ink);
font-size: 1.1rem;
letter-spacing: -0.03em;
margin: 0 0 0.5rem;
}
.download-card p {
color: var(--body);
font-size: 0.92rem;
line-height: 1.7;
margin: 0 0 1rem;
}
.download-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--blue);
font-weight: 700;
font-size: 0.9rem;
}
.download-link:hover { text-decoration: underline; }
.license-badge {
display: inline-block;
margin-top: 0.75rem;
padding: 0.25rem 0.6rem;
background: var(--mist);
border: 1px solid var(--line);
border-radius: 0.25rem;
font-size: 0.75rem;
color: var(--body);
}
label {
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-soft);
}
input, select, textarea {
font-family: var(--sans);
font-size: 0.95rem;
color: var(--ink-soft);
background: white;
border: 1.5px solid var(--line);
border-radius: var(--radius);
padding: 0.6rem 0.875rem;
width: 100%;
outline: none;
transition: border-color 0.15s;
line-height: 1.5;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
textarea { resize: vertical; min-height: 120px; }
input[type="checkbox"],
input[type="radio"] {
width: auto;
min-width: 0;
padding: 0;
border: 0;
background: none;
flex: 0 0 auto;
}
.faq-list {
display: grid;
gap: 1.25rem;
margin-top: 2rem;
}
.faq-item {
padding: 1.75rem;
border: 1px solid rgba(198, 215, 226, 0.72);
border-radius: 1.1rem;
background: rgba(255,255,255,0.88);
box-shadow: 0 12px 40px rgba(20, 74, 105, 0.06);
}
.faq-item h3,
.faq-item .faq-q {
color: var(--ink);
font-family: var(--display);
font-size: 1.2rem;
letter-spacing: -0.04em;
margin: 0 0 0.875rem;
}
.faq-item p {
color: var(--body);
font-size: 0.95rem;
line-height: 1.75;
margin: 0 0 0.75rem;
}
.faq-item p:last-child { margin-bottom: 0; }
.faq-item ul, .faq-item ol {
padding-left: 1.25rem;
color: var(--body);
font-size: 0.95rem;
line-height: 1.75;
margin: 0.5rem 0;
}
.faq-item li { margin-bottom: 0.35rem; }
.faq-item strong { color: var(--ink-soft); }
.faq-code {
background: var(--mist);
border: 1px solid var(--line);
border-radius: 0.5rem;
padding: 1rem 1.25rem;
font-family: "IBM Plex Mono", "Fira Code", "Courier New", monospace;
font-size: 0.82rem;
line-height: 1.7;
color: var(--ink-soft);
white-space: pre;
overflow-x: auto;
margin: 0.75rem 0;
}
@media (max-width: 1060px) {
.hero-grid,
.split-grid,
.validation-grid,
.closing-panel {
grid-template-columns: 1fr;
}
.standards-section,
.benefits-band,
.tier-grid,
.cert-tiers {
grid-template-columns: repeat(2, 1fr);
}
.download-grid {
grid-template-columns: 1fr;
}
.inner-hero-grid {
grid-template-columns: 1fr;
}
.hero-summary-card {
min-width: 0;
}
}
@media (max-width: 720px) {
.container {
width: min(100% - 1.25rem, 1320px);
}
.site-header {
position: static;
}
.brand small,
.primary-pill,
.icon-button:not(.menu-button){
display: none;
}
.content-cards {
grid-template-columns: 1fr;
}
.closing-panel {
grid-template-columns: 1fr;
}
.footer-inner,
.footer-inner div {
flex-direction: column;
}
.pass-fail {
grid-template-columns: 1fr;
}
.inner-hero {
padding-block: 2.5rem 2rem;
}
.hero-summary-card {
display: none;
}
.page-section{
padding-block: 2.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
.mobile-nav { transition: none; }
.nav-backdrop { transition: none; }
}
.nist-provenance-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 2rem;
align-items: start;
padding: 1.75rem 2rem;
border: 1px solid rgba(11, 110, 188, 0.28);
border-left: 4px solid var(--blue);
border-radius: 1rem;
background: var(--blue-soft);
box-shadow: 0 8px 30px rgba(11, 110, 188, 0.07);
}
.nist-gov-badge {
display: flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 3.6rem;
border-radius: 0.85rem;
background: var(--blue);
color: white;
font-family: var(--display);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
flex-shrink: 0;
margin-top: 0.25rem;
}
.nist-heading {
font-size: clamp(1.15rem, 2vw, 1.35rem);
margin: 0.45rem 0 0.6rem;
color: var(--ink);
font-family: var(--display);
letter-spacing: -0.04em;
line-height: 1.2;
}
.nist-body {
color: var(--body);
font-size: 0.95rem;
line-height: 1.75;
margin: 0 0 0.65rem;
max-width: 68ch;
}
.nist-meta {
color: var(--body);
font-size: 0.8rem;
font-weight: 600;
margin: 0 0 0.65rem;
letter-spacing: 0.01em;
}
.nist-link {
color: var(--blue);
font-weight: 700;
font-size: 0.9rem;
}
.nist-link:hover { text-decoration: underline; }
[data-theme="dark"] .nist-provenance-card {
border-color: rgba(30, 80, 120, 0.45);
border-left-color: var(--blue);
background: linear-gradient(135deg, rgba(10, 25, 48, 0.85) 0%, rgba(9, 21, 36, 0.55) 100%);
}
.nist-provenance-card {
transition: background-color 0.25s ease, border-color 0.25s ease;
}
@media (max-width: 720px) {
.nist-provenance-card {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.spec-badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.spec-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.65rem;
border-radius: 999px;
background: var(--blue-soft);
color: var(--blue);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.spec-badge-green { background: rgba(16,163,108,0.1); color: #059669; }
.spec-badge-teal  { background: rgba(24,142,170,0.12); color: var(--teal); }
.spec-highlight-box {
padding: 1.1rem 1.25rem;
border: 1px solid rgba(11, 110, 188, 0.25);
border-radius: 0.75rem;
background: var(--blue-soft);
margin: 1rem 0;
}
[data-theme="dark"] .spec-highlight-box {
border-color: rgba(30, 80, 120, 0.4);
background: var(--blue-soft);
}
[data-theme="dark"] .spec-badge { background: var(--blue-soft); }
[data-theme="dark"] .spec-badge-green { background: rgba(5, 80, 50, 0.25); color: #3ecece; }
.spec-highlight-box{
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.impact-metric-icon.teal  { background: var(--teal); }
.script-example-block {
margin-bottom: 1.5rem;
}
.script-example-block h4 {
font-family: var(--display);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink-soft);
margin: 0 0 0.5rem;
}
.script-quote {
padding: 1rem 1.25rem;
border-radius: 0 0.65rem 0.65rem 0;
font-size: 0.9rem;
line-height: 1.7;
font-style: italic;
color: var(--ink-soft);
}
.script-quote-pass {
border-left: 3px solid #059669;
background: rgba(16,163,108,0.06);
}
.script-quote-fail {
border-left: 3px solid #dc2626;
background: rgba(220,38,38,0.05);
}
.script-fail-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
font-weight: 700;
color: #dc2626;
font-style: normal;
margin-bottom: 0.4rem;
}
[data-theme="dark"] .script-quote-pass { background: rgba(5,80,50,0.25); }
[data-theme="dark"] .script-quote-fail { background: rgba(60,10,10,0.3); }
.script-fail-severe-label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #991b1b;
background: rgba(220,38,38,0.1);
border: 1px solid rgba(220,38,38,0.3);
padding: 0.25rem 0.65rem;
border-radius: 4px;
margin-bottom: 0.75rem;
}
.script-dialogue {
border-left: 3px solid #dc2626;
background: rgba(220,38,38,0.05);
border-radius: 0 0.65rem 0.65rem 0;
padding: 1rem 1.25rem;
display: grid;
gap: 0.55rem;
}
.dialogue-turn {
font-size: 0.875rem;
line-height: 1.65;
}
.dialogue-speaker {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
display: block;
margin-bottom: 0.15rem;
}
.dialogue-speaker-agent { color: #dc2626; }
.dialogue-speaker-rep   { color: var(--body); }
.dialogue-text-agent {
font-style: italic;
color: var(--ink-soft);
}
.dialogue-text-rep {
font-style: italic;
color: var(--ink-soft);
}
[data-theme="dark"] .script-dialogue { background: rgba(80,10,10,0.3); }
[data-theme="dark"] .script-fail-severe-label {
background: rgba(220,38,38,0.18);
border-color: rgba(220,38,38,0.4);
color: #fca5a5;
}
.nav-dropdown {
position: relative;
display: flex;
align-items: center;
}
.nav-dropdown-trigger {
display: flex;
align-items: center;
gap: 0.25rem;
background: none;
border: none;
cursor: pointer;
font: inherit;
font-size: 0.96rem;
color: var(--ink-soft);
padding: 0;
transition: color 0.18s;
white-space: nowrap;
}
.nav-dropdown-trigger:hover { color: var(--ink); }
.nav-dropdown-trigger .chev {
opacity: 0.55;
transition: transform 0.18s, opacity 0.18s;
flex-shrink: 0;
}
.nav-dropdown.is-open .chev,
.nav-dropdown:hover .chev { transform: rotate(180deg); opacity: 1; }
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 0.9rem);
left: 50%;
transform: translateX(-50%) translateY(-6px);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 0.75rem;
box-shadow: 0 12px 40px rgba(20,74,105,0.14);
min-width: 13rem;
padding: 0.375rem 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.14s ease, transform 0.14s ease;
z-index: 200;
white-space: nowrap;
}
.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
display: block;
padding: 0.55rem 1.1rem;
font-size: 0.9rem;
color: var(--ink-soft);
text-decoration: none;
transition: background 0.1s, color 0.1s;
}
.nav-dropdown-menu a:hover { background: var(--mist); color: var(--blue); }
.nav-dropdown-menu a::after { display: none !important; }
.nav-dropdown-menu a.is-active { color: var(--blue); font-weight: 600; }
[data-theme="dark"] .nav-dropdown-menu {
background: #1a2840;
border-color: rgba(190,213,226,0.15);
box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
[data-theme="dark"] .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.06); }
.mobile-nav-group {
display: block;
padding: 0.65rem 1.25rem 0.25rem;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--body);
font-weight: 700;
opacity: 0.65;
pointer-events: none;
}
.pilot-banner {
background: var(--blue-soft);
border: 1px solid var(--line);
border-radius: 1rem;
padding: 1.25rem 1.75rem;
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
margin: 1.5rem 0 0;
}
.pilot-banner .primary-pill { flex-shrink: 0; font-size: 0.875rem; padding: 0.6rem 1.2rem; }
elevenlabs-convai,
[class*="elevenlabs-convai"],
[id*="elevenlabs-convai"],
iframe[src*="elevenlabs.io"] {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.primary-pill:hover,
.cta-button:hover {
box-shadow: 0 24px 58px rgba(13,108,166,.36), 0 0 0 3px rgba(11,110,188,.14);
}
.inner-hero {
position: relative;
overflow: hidden;
}
.inner-hero::before {
content: "";
position: absolute;
inset: 0;
opacity: .3;
background-image:
linear-gradient(rgba(12,90,130,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(12,90,130,.04) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 75%, transparent 100%);
pointer-events: none;
}
.download-card {
transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.download-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 64px rgba(20,74,105,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.closing-panel {
position: relative;
overflow: hidden;
}
.closing-panel::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: rgba(255,255,255,.18);
pointer-events: none;
}
.status-strip {
background: #082a5b;
color: #d6e4f5;
font-size: .8rem;
line-height: 1.55;
letter-spacing: .005em;
text-align: center;
padding: 9px 20px;
border-bottom: 2px solid #188eaa;
}
.status-strip-inner {
display: block;
max-width: 74rem;
margin: 0 auto;
}
.status-strip strong { color: #ffffff; font-weight: 600; }
.status-strip a { color: #7fd4e6; text-decoration: underline; }
[data-theme="dark"] .status-strip {
background: #050f1c;
border-bottom-color: #3ecece;
}
.step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--blue);
color: #fff;
font-weight: 800;
font-size: .95rem;
flex-shrink: 0;
margin-bottom: .6rem;
}
[data-theme="dark"] .step-num { background: var(--teal); color: #06202b; }
:root {
--display: "Inter", system-ui, -apple-system, sans-serif;
--cyan: #67E8F9;
--teal-bright: #14B8A6;
--glow-teal: rgba(20, 184, 166, 0.26);
--glow-cyan: rgba(103, 232, 249, 0.30);
}
[data-theme="dark"] {
--glow-teal: rgba(20, 184, 166, 0.20);
--glow-cyan: rgba(103, 232, 249, 0.16);
}
h1, h2, h3 { letter-spacing: -0.02em; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }
.page-section { padding-block: clamp(6rem, 9vw, 8rem); }
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
html.js .reveal { opacity: 1; transform: translateY(10px); transition: transform 200ms ease; }
html.js .reveal.in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.content-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.content-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px -24px rgba(15, 23, 42, .30); border-color: rgba(20, 184, 166, .45); }
.hero-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.standards-bar { border-block: 1px solid var(--line); padding-block: 1.5rem; }
.standards-bar-label { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--body); font-weight: 700; }
.standards-bar-items { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: baseline; margin-top: .7rem; }
.standards-bar-items b { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink-soft); letter-spacing: -0.01em; }
.standards-bar-items b small { display: block; font-family: var(--sans); font-weight: 500; font-size: .72rem; color: var(--body); letter-spacing: 0; margin-top: .1rem; }
.hero-centered .hero-actions-premium { margin-top: 1.7rem; justify-content: center; flex-wrap: wrap; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: 1.1rem; }
.feature-card { padding: 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px -24px rgba(15,23,42,.30); border-color: rgba(20,184,166,.45); }
.feature-ico { width: auto; max-width: 140px; height: auto; border-radius: var(--radius); display: grid; place-items: center; margin-bottom: .95rem; }
.feature-ico svg { width: 23px; height: 23px; color: var(--teal-bright); }
.feature-ico img { width: 100%; height: auto; display: block; border-radius: 8px; }
.feature-card .code { font-family: "IBM Plex Mono", monospace; font-size: .72rem; font-weight: 600; color: var(--teal-bright); letter-spacing: .04em; }
.feature-card h3 { font-size: 1.05rem; margin: .1rem 0 .4rem; color: var(--ink); }
.feature-card p { font-size: .9rem; color: var(--body); line-height: 1.6; margin: 0; }
.split-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .split-visual { grid-template-columns: 1fr; gap: 2rem; } }
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mock-row .ok { color: var(--teal-bright); font-weight: 800; }
.readable { max-width: 44rem; margin-inline: auto; }
main p { line-height: 1.75; }
.audience-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.audience-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--body); margin-right: .2rem; }
.audience-chip {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .86rem; font-weight: 600; color: var(--ink-soft);
background: var(--teal-soft); border: 1px solid rgba(20,184,166,.26);
border-radius: 999px; padding: .4rem .85rem;
}
.audience-chip svg { width: 16px; height: 16px; color: var(--teal-bright); flex-shrink: 0; }
.page-cta { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem); }
.page-cta h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 .3rem; }
.page-cta > .container > p { color: var(--body); margin: 0 0 1.5rem; }
.page-cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.page-cta-card {
display: flex; flex-direction: column; gap: .3rem;
border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper);
padding: 1.15rem 1.25rem; text-decoration: none; color: var(--ink);
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.page-cta-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px -24px rgba(15,23,42,.30); border-color: rgba(20,184,166,.45); }
.page-cta-card b { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.page-cta-card span { font-size: .85rem; color: var(--body); line-height: 1.5; }
.page-cta-card .arr { color: var(--teal-bright); font-weight: 800; }
.nav-links > a,
.nav-dropdown-trigger { white-space: nowrap; }
@media (max-width: 1240px) {
.nav-links { display: none; }
.menu-button { display: inline-flex; }
}
@media (max-width: 1380px) and (min-width: 1241px) {
.nav-links a,
.nav-dropdown-trigger { padding-inline: 0.5rem; font-size: 0.88rem; }
.nav-links { gap: 0; }
}
.dual-path-card .card-link { margin-top: auto; padding-top: .75rem; }
.compare-matrix-wrap { overflow-x: auto; margin-top: 1.75rem; }
.compare-matrix {
width: 100%;
min-width: 40rem;
border-collapse: collapse;
font-size: .92rem;
}
.compare-matrix th,
.compare-matrix td {
padding: .8rem 1.1rem;
border: 1px solid var(--line);
text-align: left;
vertical-align: top;
line-height: 1.55;
}
.compare-matrix thead th {
background: var(--mist);
color: var(--ink);
font-family: var(--display);
font-weight: 700;
font-size: .78rem;
letter-spacing: .07em;
text-transform: uppercase;
}
.compare-matrix tbody th {
background: transparent;
color: var(--ink);
font-weight: 650;
font-size: .92rem;
white-space: nowrap;
}
.compare-matrix td { color: var(--body); }
.compare-matrix .yes { color: var(--teal); font-weight: 800; }
.compare-matrix .no  { color: var(--body); opacity: .6; font-weight: 700; }
.compare-matrix tbody tr:hover td,
.compare-matrix tbody tr:hover th { background: rgba(20, 184, 166, .04); }
.module-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap: 1.25rem;
margin-top: 1.75rem;
}
.module-card {
display: flex;
flex-direction: column;
gap: .55rem;
padding: 1.6rem;
border: 1px solid var(--line);
border-radius: 1rem;
background: var(--paper);
text-decoration: none;
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.module-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 42px -24px rgba(15, 23, 42, .3);
border-color: rgba(20, 184, 166, .45);
}
.module-card .module-num {
font-family: var(--display);
font-size: .72rem;
font-weight: 800;
letter-spacing: .12em;
color: var(--teal);
}
.module-card h3 { font-size: 1.06rem; margin: 0; }
.module-card p { color: var(--body); font-size: .89rem; line-height: 1.65; margin: 0; }
.module-card .arr { margin-top: auto; padding-top: .6rem; color: var(--teal); font-weight: 700; font-size: .85rem; }
.gateway-flow {
display: grid;
gap: 0;
max-width: 34rem;
margin: 1.75rem 0 0;
list-style: none;
padding: 0;
counter-reset: gw;
}
.gateway-step {
position: relative;
padding: 1rem 1.25rem 1rem 3.4rem;
border: 1px solid var(--line);
border-radius: .85rem;
background: var(--paper);
}
.gateway-step + .gateway-step { margin-top: 1.6rem; }
.gateway-step + .gateway-step::before {
content: "";
position: absolute;
left: 1.85rem;
top: -1.35rem;
height: 1.1rem;
width: 2px;
background: var(--teal);
}
.gateway-step + .gateway-step::after {
content: "";
position: absolute;
left: 1.5rem;
top: -.42rem;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--teal);
}
.gateway-step .gw-num {
counter-increment: gw;
position: absolute;
left: 1.1rem;
top: 1.05rem;
width: 1.55rem;
height: 1.55rem;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--teal-soft);
border: 1px solid rgba(20, 184, 166, .32);
color: var(--teal);
font-family: var(--display);
font-size: .74rem;
font-weight: 800;
}
.gateway-step strong { display: block; color: var(--ink); font-family: var(--display); font-size: .98rem; }
.gateway-step span { display: block; margin-top: .2rem; color: var(--body); font-size: .86rem; line-height: 1.6; }
.gateway-step.is-endpoint { background: var(--mist); border-style: dashed; }
.field-table-wrap { overflow-x: auto; margin-top: 1.5rem; }
.field-table {
width: 100%;
min-width: 36rem;
border-collapse: collapse;
font-size: .91rem;
}
.field-table th,
.field-table td {
padding: .7rem 1rem;
border: 1px solid var(--line);
text-align: left;
vertical-align: top;
line-height: 1.55;
}
.field-table thead th {
background: var(--mist);
color: var(--ink);
font-size: .74rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
.field-table td { color: var(--body); }
.field-table code {
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .84rem;
color: var(--ink);
background: var(--blue-soft);
padding: .1rem .35rem;
border-radius: 4px;
}
.console-panel {
margin-top: 1.5rem;
border: 1px solid var(--line);
border-radius: .9rem;
overflow: hidden;
background: var(--paper);
box-shadow: 0 12px 40px rgba(20, 74, 105, .06);
}
.console-bar {
display: flex;
align-items: center;
gap: .45rem;
padding: .65rem 1rem;
background: var(--mist);
border-bottom: 1px solid var(--line);
}
.console-bar .console-title {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .76rem;
color: var(--body);
letter-spacing: .02em;
}
.console-body { padding: 1.15rem 1.25rem; }
.console-line {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: baseline;
padding: .48rem 0;
border-bottom: 1px dashed var(--line);
font-size: .89rem;
color: var(--body);
}
.console-line:last-of-type { border-bottom: 0; }
.console-line .k { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .84rem; }
.console-line .v { font-weight: 700; color: var(--ink); text-align: right; }
.console-line .v.pass { color: var(--teal); }
.console-line .v.fail { color: #c2410c; }
[data-theme="dark"] .console-line .v.fail { color: #fb923c; }
.console-verdict {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .6rem;
margin-bottom: .9rem;
padding-bottom: .8rem;
border-bottom: 1px solid var(--line);
}
.console-verdict strong { font-family: var(--display); color: var(--ink); font-size: 1rem; }
.console-pill {
font-size: .7rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
padding: .3rem .7rem;
border-radius: 999px;
background: var(--teal-soft);
color: var(--teal);
border: 1px solid rgba(20, 184, 166, .3);
}
.console-pill.is-review {
background: rgba(234, 88, 12, .1);
color: #c2410c;
border-color: rgba(234, 88, 12, .28);
}
[data-theme="dark"] .console-pill.is-review { color: #fb923c; }
.console-note {
margin-top: .9rem;
font-size: .78rem;
color: var(--body);
opacity: .85;
font-style: italic;
}
.pathway-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
gap: 1.5rem;
margin-top: 1.75rem;
}
.pathway-card {
padding: 1.9rem;
border: 1px solid var(--line);
border-radius: 1.1rem;
background: var(--paper);
}
.pathway-card h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
.pathway-card > p { color: var(--body); font-size: .93rem; line-height: 1.65; margin: 0 0 1.1rem; }
.pathway-steps { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .8rem; counter-reset: pw; }
.pathway-steps li {
counter-increment: pw;
position: relative;
padding-left: 2.1rem;
color: var(--body);
font-size: .9rem;
line-height: 1.6;
}
.pathway-steps li::before {
content: counter(pw);
position: absolute;
left: 0; top: -.05em;
width: 1.45rem; height: 1.45rem;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--blue-soft);
color: var(--blue);
font-family: var(--display);
font-size: .72rem;
font-weight: 800;
}
.pathway-card.is-enterprise .pathway-steps li::before { background: var(--teal-soft); color: var(--teal); }
.pathway-steps li b { color: var(--ink); font-weight: 650; }
.status-note {
display: flex;
gap: .7rem;
align-items: flex-start;
margin-top: 1.5rem;
padding: .95rem 1.15rem;
border: 1px solid var(--line);
border-left: 3px solid var(--teal);
border-radius: .6rem;
background: var(--mist);
color: var(--body);
font-size: .87rem;
line-height: 1.65;
}
.status-note b { color: var(--ink); }
[data-theme="dark"] .module-card,
[data-theme="dark"] .pathway-card,
[data-theme="dark"] .gateway-step,
[data-theme="dark"] .console-panel { background: var(--surface); box-shadow: none; }
[data-theme="dark"] .compare-matrix thead th,
[data-theme="dark"] .field-table thead th,
[data-theme="dark"] .console-bar,
[data-theme="dark"] .gateway-step.is-endpoint,
[data-theme="dark"] .status-note { background: var(--bg); }
[data-theme="dark"] .compare-matrix tbody tr:hover td,
[data-theme="dark"] .compare-matrix tbody tr:hover th { background: rgba(20, 184, 166, .07); }
@media (max-width: 720px) { .pathway-card { padding: 1.5rem; }
.gateway-flow { max-width: none; }
}
/* /assets/css/premium.css */
:root {
--navy-deep: #0F172A;
--navy-deeper: #0a0f1e;
--teal-on-dark: #14B8A6;
--teal-on-dark-soft: rgba(20, 184, 166, 0.35);
--premium-line: #1e2a44;
}
.section-premium {
padding: 4.5rem 0;
position: relative;
overflow: hidden;
}
.section-premium::before {
content: "";
position: absolute; inset: 0;
background-size: 44px 44px;
pointer-events: none;
}
.section-premium > .container { position: relative; }
.hero-actions-premium { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.btn-premium, .btn-ghost {
display: inline-flex; align-items: center; gap: .45rem;
padding: .72rem 1.15rem; border-radius: 8px; font-weight: 600; font-size: .92rem;
text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-premium:hover { transform: translateY(-1px); }
.btn-premium:focus-visible, .btn-ghost:focus-visible,
.stack-layer:focus-visible { outline: 2px solid var(--teal-on-dark); outline-offset: 3px; }
img.premium-3d, svg.premium-3d, picture.premium-3d img {
width: 100%; max-width: 1100px; margin: 2rem auto 0; display: block;
border-radius: var(--radius);
box-shadow: 0 1px 3px rgba(8, 42, 91, 0.06), 0 0 0 1px rgba(190, 213, 226, 0.6);
}
.hero-art-nexus picture.premium-3d,
.hero-art-nexus picture.premium-3d img {
margin: 0;
max-width: none;
border-radius: var(--radius-lg);
}
.visual-caption {
font-size: .78rem;
color: var(--body);
text-align: center;
margin: .65rem 0 0;
font-style: italic;
}
.premium-metrics {
width: 100%;
border-collapse: collapse;
margin: 1.25rem 0 2rem;
font-size: .93rem;
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 12px 40px rgba(8, 42, 91, 0.08);
}
.premium-metrics th {
text-align: left;
padding: .75rem 1rem;
background: var(--ink, #082a5b);
color: #fff;
font-weight: 600;
font-size: .85rem;
}
.premium-metrics td {
padding: .75rem 1rem;
border-bottom: 1px solid var(--line);
color: var(--ink-soft);
vertical-align: top;
}
.premium-metrics tr:nth-child(even) td { background: rgba(234, 245, 251, 0.45); }
.premium-metrics td:last-child { color: var(--teal); font-weight: 600; }
.payer-hero-visual {
margin-top: 1.5rem;
max-width: 42rem;
}
.payer-phase-grid {
display: grid;
gap: 1rem;
margin-top: 1.25rem;
}
.pilot-card {
padding: 1.2rem 1.5rem;
background: var(--bg-alt);
border-left: 3px solid var(--teal-bright);
border-radius: 0 6px 6px 0;
min-width: 0;
}
.pilot-card p,
.pilot-card li { color: var(--body); font-size: .93rem; line-height: 1.75; }
.pilot-card ol,
.pilot-card ul { padding-left: 1.3rem; margin: .5rem 0; }
.pilot-card li { margin-bottom: .2rem; }
.pilot-card code {
font-size: .82rem;
background: var(--paper);
padding: .1rem .35rem;
border-radius: 3px;
color: var(--teal-bright);
}
.pilot-card pre {
margin: .65rem 0 0;
background: var(--paper);
padding: .9rem 1rem;
border-radius: 6px;
font-size: .82rem;
line-height: 1.75;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
color: var(--body);
}
.step-header {
display: flex;
align-items: center;
margin: 0 0 .6rem;
font-size: .95rem;
font-weight: 700;
color: var(--ink);
}
.disclaimer-small {
font-size: .85rem; margin-top: 2.2rem; padding-top: 1rem; line-height: 1.7;
}
.stack-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2.5rem; align-items: start; margin-top: 2rem; }
@media (max-width: 900px) { .stack-wrap { grid-template-columns: 1fr; } }
.stack-layer { cursor: pointer; transition: filter .18s ease, transform .18s ease; }
.stack-detail { border-radius: var(--radius); padding: 1.4rem 1.6rem; min-height: 15rem; }
.stack-detail h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.stack-detail .layer-tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.stack-detail p { line-height: 1.75; font-size: .93rem; }
.stack-detail .stack-links { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.stack-detail .stack-links a { font-size: .85rem; font-weight: 600; }
.premium-callout { border-radius: var(--radius); padding: 1.6rem 1.9rem; margin: 2rem 0; }
.premium-callout h3 { margin: 0 0 .5rem; font-size: 1rem; }
.premium-callout p { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.7; }
.premium-callout a { font-weight: 600; }
.section-premium {
background:
var(--paper);
color: var(--ink-soft);
}
.section-premium::before {
background-image:
linear-gradient(rgba(15,87,139,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(15,87,139,0.04) 1px, transparent 1px);
}
.section-premium h1, .section-premium h2, .section-premium h3 { color: var(--ink); }
.section-premium a { color: var(--blue); }
.section-premium .lead { color: var(--body); font-size: 1.06rem; line-height: 1.75; max-width: 52rem; }
.btn-premium {
color: #06222b;
background: var(--teal-on-dark);
box-shadow: 0 8px 24px -8px var(--teal-on-dark-soft), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-premium:hover { box-shadow: 0 12px 30px -8px var(--teal-on-dark-soft); }
.btn-ghost {
color: var(--ink);
background: rgba(255,255,255,0.7);
border: 1px solid var(--line);
}
.btn-ghost:hover { background: rgba(255,255,255,0.95); }
img.premium-3d, svg.premium-3d, picture.premium-3d img {
border: 1px solid var(--line);
box-shadow: 0 1px 4px rgba(34, 86, 121, 0.08);
background: var(--paper);
}
.visual-caption { text-align: center; color: var(--body); font-size: .8rem; margin-top: .7rem; font-style: italic; }
.disclaimer-small { color: var(--body); border-top: 1px solid var(--line); }
.stack-layer:hover, .stack-layer.active { filter: brightness(1.05) drop-shadow(0 0 8px rgba(20,184,166,0.2)); }
.stack-detail {
background: rgba(255,255,255,0.85);
border: 1px solid var(--line);
}
.stack-detail h3 { color: var(--teal); }
.stack-detail .layer-tag { color: var(--body); }
.stack-detail p { color: var(--ink-soft); }
.stack-detail .stack-links a { color: var(--blue); }
.premium-callout {
background: var(--blue-soft);
color: var(--ink-soft);
border: 1px solid var(--line);
box-shadow: 0 16px 40px -20px rgba(34, 86, 121, 0.2);
}
.premium-callout h3 { color: var(--teal); }
.premium-callout p { color: var(--body); }
.premium-callout a { color: var(--blue); }
[data-theme="dark"] .section-premium {
background:
linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-deeper) 100%);
color: #e2e8f0;
}
[data-theme="dark"] .section-premium::before {
background-image:
linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px);
}
[data-theme="dark"] .section-premium h1,
[data-theme="dark"] .section-premium h2,
[data-theme="dark"] .section-premium h3 { color: #f1f5f9; }
[data-theme="dark"] .section-premium a { color: var(--teal-on-dark); }
[data-theme="dark"] .section-premium .lead { color: #b7c3d8; }
[data-theme="dark"] .btn-ghost {
color: #dbe4f2;
background: rgba(148,163,184,0.08);
border: 1px solid rgba(148,163,184,0.35);
}
[data-theme="dark"] .btn-ghost:hover { background: rgba(148,163,184,0.16); }
[data-theme="dark"] img.premium-3d,
[data-theme="dark"] svg.premium-3d,
[data-theme="dark"] picture.premium-3d img {
border: 1px solid var(--premium-line);
box-shadow: 0 1px 6px rgba(0, 0, 0, .30), 0 0 0 1px rgba(20,184,166,.10);
background: var(--navy-deeper);
}
[data-theme="dark"] .visual-caption { color: #8fa0bd; }
[data-theme="dark"] .disclaimer-small { color: #8fa0bd; border-top-color: var(--premium-line); }
[data-theme="dark"] .stack-layer:hover,
[data-theme="dark"] .stack-layer.active { filter: brightness(1.25) drop-shadow(0 0 10px var(--teal-on-dark-soft)); }
[data-theme="dark"] .stack-detail {
background: rgba(15, 23, 42, 0.6);
border-color: var(--premium-line);
}
[data-theme="dark"] .stack-detail h3 { color: #6ee7d5; }
[data-theme="dark"] .stack-detail .layer-tag { color: #8fa0bd; }
[data-theme="dark"] .stack-detail p { color: #b7c3d8; }
[data-theme="dark"] .premium-callout {
background: linear-gradient(135deg, var(--navy-deep), #16233f);
color: #dbe4f2;
border-color: var(--premium-line);
box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .5);
}
[data-theme="dark"] .premium-callout h3 { color: #6ee7d5; }
[data-theme="dark"] .premium-callout p { color: #b7c3d8; }
[data-theme="dark"] .premium-callout a { color: var(--teal-on-dark); }
@media (prefers-reduced-motion: reduce) {
.btn-premium, .btn-ghost, .stack-layer { transition: none; }
.btn-premium:hover { transform: none; }
}
/* /assets/css/components.css */
:root {
--panel-ink-950: #07111f;
--panel-ink-900: #0b1d35;
--panel-ink-800: #102b48;
--panel-text-strong: var(--ink);
--panel-text: var(--body);
--panel-text-muted: #5b636c;
--panel-paper: var(--paper);
--panel-canvas: var(--mist);
--panel-mist: var(--mist);
--panel-line: var(--line);
--panel-cobalt: #1e63db;
--panel-cobalt-hover: #164da8;
--panel-cobalt-soft: #e8f0ff;
--panel-teal: var(--teal);
--panel-teal-bright: #55d9cb;
--panel-teal-soft: var(--teal-soft);
--panel-amber: #986600;
--panel-amber-soft: #fff5d7;
--panel-red: #b42318;
--panel-red-soft: #fff0ef;
--panel-focus: #0b57d0;
--panel-radius-md: 10px;
--panel-radius-lg: 14px;
--panel-shadow-1: 0 2px 8px rgba(16, 35, 61, 0.08);
--panel-shadow-2: 0 5px 16px rgba(16, 35, 61, 0.12);
--panel-grid-line: rgba(28, 32, 38, 0.07);
--mono: "IBM Plex Mono", ui-monospace, monospace;
--prose-measure: 68ch;
--wide-container-max: 1320px;
--motion-duration-fast: 160ms;
--motion-duration: 200ms;
--motion-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}
[data-theme="dark"] {
--panel-text-strong: #f2f7fc;
--panel-text: #c2d0df;
--panel-text-muted: #96abc0;
--panel-paper: #102038;
--panel-canvas: #07111f;
--panel-mist: #0d1c30;
--panel-line: #29445e;
--panel-cobalt: #79b7ff;
--panel-cobalt-hover: #afd3ff;
--panel-cobalt-soft: #142e51;
--panel-teal: #55d9cb;
--panel-teal-bright: #75ece0;
--panel-teal-soft: #103c3b;
--panel-amber: #ffd26c;
--panel-amber-soft: #3a2c10;
--panel-red: #ffaaa4;
--panel-red-soft: #411f25;
--panel-focus: #a3caff;
--panel-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.24);
--panel-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.34);
--panel-grid-line: rgba(144, 211, 255, 0.09);
}
.display-title {
font-family: var(--sans);
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1.02;
letter-spacing: -0.03em;
text-wrap: balance;
color: var(--panel-text-strong);
margin: 0;
}
.page-heading {
font-family: var(--sans);
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1.04;
letter-spacing: -0.03em;
text-wrap: balance;
color: var(--panel-text-strong);
margin: 0;
}
.section-title {
font-family: var(--sans);
font-weight: 700;
font-size: clamp(1.35rem, 1.9vw, 1.75rem);
line-height: 1.18;
letter-spacing: -0.012em;
color: var(--panel-text-strong);
margin: 0;
}
.body-text {
font-family: var(--sans);
font-weight: 400;
font-size: 1.0625rem;
line-height: 1.72;
color: var(--panel-text);
}
.lede-text {
font-family: var(--sans);
font-weight: 400;
font-size: clamp(1.05rem, 1.35vw, 1.25rem);
line-height: 1.65;
color: var(--panel-text);
max-width: 58ch;
}
.meta-label {
font-family: var(--sans);
font-weight: 600;
font-size: 0.8125rem;
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--panel-text-muted);
}
.data-text,
.data-text code,
code.data-text {
font-family: var(--mono);
font-weight: 400;
font-size: 0.875rem;
line-height: 1.6;
font-variant-numeric: tabular-nums;
}
.prose-measure {
max-width: var(--prose-measure);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.wide-container {
width: 100%;
max-width: var(--wide-container-max);
margin-inline: auto;
padding-inline: clamp(1rem, 3vw, 2.5rem);
}
.surface-technical-grid {
background-color: var(--panel-ink-950);
background-image:
linear-gradient(to right, var(--panel-grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--panel-grid-line) 1px, transparent 1px);
background-size: 42px 42px;
}
.surface-canvas { background-color: var(--panel-canvas); }
.surface-mist   { background-color: var(--panel-mist); }
.surface-paper  { background-color: var(--panel-paper); }
.on-dark { color: #dce8f5; }
.on-dark .display-title,
.on-dark .page-heading,
.on-dark .section-title { color: #f7fbff; }
.on-dark .lede-text,
.on-dark .body-text { color: #c2d4e6; }
.on-dark .meta-label { color: var(--panel-teal-bright); }
.hero-band {
position: relative;
overflow: clip;
padding-block: clamp(3.5rem, 8vw, 7rem);
}
.hero-band::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(1100px 520px at 88% -10%, rgba(20, 119, 143, 0.11), transparent 62%),
radial-gradient(760px 420px at -6% 4%, rgba(11, 110, 188, 0.07), transparent 60%),
linear-gradient(to right, var(--panel-grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--panel-grid-line) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.hero-band > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
.action-button { transition: background-color var(--motion-duration) var(--motion-ease),
box-shadow var(--motion-duration) var(--motion-ease),
border-color var(--motion-duration) var(--motion-ease),
color var(--motion-duration) var(--motion-ease),
transform var(--motion-duration-fast) var(--motion-ease); }
}
.hero-band-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.hero-band-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
.boundary-note {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin-top: 1.75rem;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--panel-text-muted);
}
.on-dark .boundary-note { color: #9fb4c9; }
@media (max-width: 900px) {
.hero-band-inner { grid-template-columns: minmax(0, 1fr); }
}
.action-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 3rem;
padding: 0.8rem 1.6rem;
border-radius: var(--radius);
border: 1px solid transparent;
font-family: var(--sans);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.005em;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color var(--motion-duration) var(--motion-ease),
border-color var(--motion-duration) var(--motion-ease),
transform var(--motion-duration-fast) var(--motion-ease);
}
.action-button-primary {
background: #0b6ebc;
color: #ffffff;
box-shadow: 0 10px 24px rgba(13, 108, 166, 0.22);
}
.action-button-primary:hover {
box-shadow: 0 16px 34px rgba(13, 108, 166, 0.30);
transform: translateY(-2px);
}
.action-button-secondary {
background: var(--panel-paper);
color: var(--panel-text-strong);
border-color: var(--panel-line);
}
.action-button-secondary:hover {
border-color: var(--panel-cobalt);
color: var(--panel-cobalt);
transform: translateY(-2px);
}
.on-dark .action-button-secondary { color: #a8ccff; border-color: #4f7fc4; }
.on-dark .action-button-secondary:hover { background: rgba(30, 99, 219, 0.18); }
.scope-note a:focus-visible,
.scope-note button:focus-visible,
.scope-note input:focus-visible,
.scope-note select:focus-visible,
.scope-note textarea:focus-visible,
.scope-note summary:focus-visible,
.scope-note [tabindex]:focus-visible,
a.action-button:focus-visible,
button.action-button:focus-visible,
.skip-link:focus-visible {
outline: 3px solid var(--panel-focus);
outline-offset: 3px;
border-radius: 2px;
}
.skip-link {
position: absolute;
left: 0.75rem;
top: -100%;
z-index: 999;
padding: 0.75rem 1.25rem;
background: var(--panel-paper);
color: var(--panel-text-strong);
border: 1px solid var(--panel-line);
border-radius: var(--radius);
font-weight: 600;
text-decoration: none;
transition: top var(--motion-duration-fast) var(--motion-ease);
}
.skip-link:focus { top: 0.75rem; }
.metric-rail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: 1px;
background: var(--panel-line);
border-block: 1px solid var(--panel-line);
}
.metric {
background: var(--panel-canvas);
padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.75rem);
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.metric-value {
font-family: var(--sans);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
color: var(--panel-cobalt);
font-variant-numeric: tabular-nums;
}
.metric-label {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--panel-text-muted);
}
.evidence-status {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.6rem;
border-radius: var(--radius);
border: 1px solid currentColor;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
}
.evidence-status::before { font-family: var(--mono); font-weight: 700; }
.evidence-status-verified { color: var(--panel-teal);   background: var(--panel-teal-soft); }
.evidence-status-verified::before { content: "\2713"; }
.evidence-status-review   { color: var(--panel-amber);  background: var(--panel-amber-soft); }
.evidence-status-review::before { content: "\26A0"; }
.evidence-status-blocked  { color: var(--panel-red);    background: var(--panel-red-soft); }
.evidence-status-blocked::before { content: "\2717"; }
.evidence-status-info     { color: var(--panel-cobalt); background: var(--panel-cobalt-soft); }
.evidence-status-info::before { content: "\2022"; }
.panel {
background: var(--panel-paper);
border: 1px solid var(--panel-line);
border-radius: var(--panel-radius-md);
padding: clamp(1.25rem, 2.5vw, 1.75rem);
box-shadow: var(--panel-shadow-1);
}
.panel-viz { border-radius: var(--panel-radius-lg); }
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.25rem;
}
.control-card { display: flex; flex-direction: column; gap: 0.6rem; }
.control-card-id {
font-family: var(--mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--panel-teal);
}
.evidence-frame {
display: flex;
flex-direction: column;
gap: 0.85rem;
border-left: 3px solid var(--panel-cobalt);
padding-left: 1.1rem;
}
.evidence-limitation {
font-size: 0.9375rem;
color: var(--panel-text-muted);
border-top: 1px solid var(--panel-line);
padding-top: 0.75rem;
}
.evidence-trace-panel {
background: var(--panel-ink-900);
border: 1px solid var(--panel-line);
border-radius: var(--panel-radius-md);
padding: 1rem 1.15rem;
overflow-x: auto;
color: #d6e6f6;
}
.evidence-trace-panel pre,
.evidence-trace-panel code {
font-family: var(--mono);
font-size: 0.8125rem;
line-height: 1.65;
user-select: text;
white-space: pre;
}
.doc-shell {
display: grid;
grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: start;
}
.doc-toc {
position: sticky;
top: 1.5rem;
align-self: start;
max-height: calc(100vh - 3rem);
overflow-y: auto;
font-size: 0.9375rem;
line-height: 1.7;
}
.doc-toc ol, .doc-toc ul { list-style: none; margin: 0; padding: 0; }
.doc-toc a { color: var(--panel-text); text-decoration: none; display: block; padding: 0.2rem 0; }
.doc-toc a:hover { color: var(--panel-cobalt); text-decoration: underline; }
.doc-toc [aria-current="true"] { color: var(--panel-cobalt); font-weight: 600; }
.doc-body { max-width: var(--prose-measure); }
.normative-block {
background: var(--panel-cobalt-soft);
border-left: 3px solid var(--panel-cobalt);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 1rem 1.25rem;
margin-block: 1.25rem;
}
.scroll-x { overflow-x: auto; max-width: 100%; }
.content-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.content-table th, .content-table td {
text-align: left;
padding: 0.65rem 0.85rem;
border-bottom: 1px solid var(--panel-line);
vertical-align: top;
}
.content-table th { font-weight: 700; color: var(--panel-text-strong); }
.content-table td { color: var(--panel-text); }
@media (max-width: 900px) {
.doc-shell { grid-template-columns: minmax(0, 1fr); }
.doc-toc { position: static; max-height: none; }
}
.diagram-layers { width: 100%; height: auto; display: block; }
.diagram-token {
animation: diagram-token-travel 2.8s var(--motion-ease) 1 both;
}
@keyframes diagram-token-travel {
from { opacity: 0; transform: translateY(-58px); }
12%  { opacity: 1; }
to   { opacity: 1; transform: translateY(96px); }
}
.diagram-layers-alt {
margin: 1rem 0 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.875rem;
}
.diagram-layers-alt li {
border: 1px solid var(--panel-line);
border-radius: var(--radius);
padding: 0.3rem 0.6rem;
color: var(--panel-text-muted);
}
.phase-state {
border: 1px dashed var(--panel-line);
border-radius: var(--panel-radius-md);
padding: 1.5rem;
color: var(--panel-text-muted);
text-align: left;
}
.phase-state-title { font-weight: 700; color: var(--panel-text-strong); margin: 0 0 0.35rem; }
.skeleton {
background: var(--panel-mist);
border-radius: var(--radius);
height: 0.9rem;
margin-block: 0.4rem;
}
@media (max-width: 720px) {
.hero-band { padding-block: clamp(2.5rem, 9vw, 4rem); }
.hero-band-actions .action-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.scope-note *,
.scope-note *::before,
.scope-note *::after,
.diagram-token {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
.diagram-token { transform: none; opacity: 1; }
.action-button:hover { transform: none; }
}
@media (forced-colors: active) {
.action-button,
.panel,
.evidence-status { border: 1px solid CanvasText; }
}
.regulatory-index{
width:100%; border-collapse:collapse; margin-top:1.5rem;
font-size:.9375rem; line-height:1.6;
}
.regulatory-index th, .regulatory-index td{
text-align:left; vertical-align:top; padding:.85rem .9rem;
border-top:1px solid var(--border,rgba(0,0,0,.14));
}
.regulatory-index thead th{
font-size:.6875rem; text-transform:uppercase; letter-spacing:.07em;
font-weight:600; opacity:.65; border-top:0; padding-bottom:.5rem;
}
.regulatory-index tbody th{ font-weight:600; width:11rem; }
.regulatory-index td:nth-child(2){ white-space:nowrap; font-variant-numeric:tabular-nums; opacity:.75; }
.regulatory-subnote{ display:block; font-weight:400; font-size:.8125rem; opacity:.6; margin-top:.15rem; }
.sr-only-text{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (max-width: 900px) {
.regulatory-index thead{ display:none; }
.regulatory-index tr{ display:block; border-top:1px solid var(--border,rgba(0,0,0,.14)); padding:.9rem 0; }
.regulatory-index th, .regulatory-index td{ display:block; border:0; padding:.15rem 0; width:auto; }
.regulatory-index td:nth-child(3)::before{ content:"Establishes: "; font-weight:600; }
.regulatory-index td:nth-child(4)::before{ content:"Does not: "; font-weight:600; }
}
.proof-line{
margin:1.15rem 0 0; font-size:.9375rem; font-weight:600;
letter-spacing:.01em; font-variant-numeric:tabular-nums;
}
.control-table{
width:100%; border-collapse:collapse; margin-top:.5rem;
font-size:.9375rem; line-height:1.6;
}
.control-table th, .control-table td{
text-align:left; vertical-align:top; padding:.9rem .9rem;
border-top:1px solid var(--border,rgba(0,0,0,.14));
}
.control-table thead th{
font-size:.6875rem; text-transform:uppercase; letter-spacing:.07em;
font-weight:600; opacity:.65; border-top:0; padding-bottom:.5rem;
}
.control-table tbody th{ width:13rem; font-weight:400; }
.control-table-id{
display:inline-block; font-weight:600; font-size:.875rem;
letter-spacing:.02em;
}
.control-table-name{ display:block; font-size:.8125rem; opacity:.7; margin-top:.2rem; }
.control-table-optional{
font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em;
border:1px solid currentColor; border-radius:2px; padding:0 .3em;
margin-left:.4em; opacity:.7;
}
.control-table-action, .control-table-code{ font-size:.8125rem; overflow-wrap:anywhere; }
.control-table-action{ font-weight:600; }
.control-table-code{ opacity:.78; }
@media (max-width: 900px) {
.control-table thead{ display:none; }
.control-table tr{
display:block; border-top:1px solid var(--border,rgba(0,0,0,.14)); padding:.9rem 0;
}
.control-table th, .control-table td{ display:block; border:0; padding:.2rem 0; width:auto; }
.control-table td:nth-child(2)::before{ content:"Trigger: "; font-weight:600; }
.control-table td:nth-child(3)::before{ content:"Decision: "; font-weight:600; }
.control-table td:nth-child(4)::before{ content:"Evidence: "; font-weight:600; }
}
.sequence-pair{
display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
align-items:start;
}
.sequence{ border:1px solid var(--border,rgba(0,0,0,.14)); padding:1.1rem 1.2rem 1.3rem; }
.sequence-heading{
font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em;
font-weight:600; opacity:.7; margin:0 0 .9rem;
}
.sequence-step-list{ list-style:none; margin:0; padding:0; counter-reset:none; }
.sequence-step{
display:flex; align-items:baseline; gap:.7rem;
padding:.5rem 0; border-top:1px solid var(--border,rgba(0,0,0,.09));
font-size:.875rem; line-height:1.45;
}
.sequence-step:first-child{ border-top:0; }
.sequence-step-number{
flex:0 0 auto; min-width:1.35rem; font-size:.6875rem; font-weight:600;
opacity:.55; font-variant-numeric:tabular-nums;
}
.sequence-step-title{ letter-spacing:.02em; }
.sequence-step-copy{
display:inline-block; margin-left:.5rem; font-size:.6875rem;
border:1px solid currentColor; border-radius:2px; padding:0 .3em; opacity:.65;
}
.sequence-step-risk{ border-top-width:2px; font-weight:600; }
.sequence-step-risk .sequence-step-title::after{
content:" — exposure point"; font-weight:400; opacity:.6; letter-spacing:0;
}
.evidence-latency-note{
margin-top:1.5rem; padding:1.1rem 1.2rem;
border-left:3px solid var(--teal,currentColor);
background:var(--bg-alt,transparent);
}
.evidence-latency-heading{ font-size:1rem; margin:0 0 .5rem; }
.evidence-latency-note p{ margin:0; color:var(--body); line-height:1.75; max-width:70ch; }
.evidence-latency-caveat{ margin-top:.6rem !important; font-size:.85rem; opacity:.75; }
.phase-row{
list-style:none; margin:0; padding:0;
display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
}
.phase{ border-top:2px solid var(--teal,currentColor); padding-top:.9rem; }
.phase-number{
display:block; font-size:.6875rem; font-weight:600; letter-spacing:.08em;
opacity:.55; font-variant-numeric:tabular-nums;
}
.phase-heading{
font-size:.9375rem; letter-spacing:.09em; text-transform:uppercase;
margin:.3rem 0 .5rem;
}
.phase p{ margin:0; color:var(--body); font-size:.9375rem; line-height:1.7; }
.evidence{
display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
align-items:start;
}
.evidence-pane{ border:1px solid var(--border,rgba(0,0,0,.14)); }
.evidence-label{
margin:0; padding:.6rem .85rem; font-size:.6875rem; font-weight:600;
text-transform:uppercase; letter-spacing:.07em; opacity:.7;
border-bottom:1px solid var(--border,rgba(0,0,0,.14));
}
.evidence-label code{ text-transform:none; letter-spacing:0; opacity:.9; }
.evidence-code{
margin:0; padding:.85rem; overflow-x:auto;
font-size:.8125rem; line-height:1.65; tab-size:2;
}
.evidence-code code{ white-space:pre; }
.evidence-repro{
margin-top:1rem; font-size:.9rem; color:var(--ink-soft); line-height:1.7; max-width:70ch;
}
@media (max-width: 900px) {
main table:not(.control-table):not(.regulatory-index),
.premium-metrics{
display:block;
width:100%;
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
}
.faq-item,
.faq-list > * {
min-width: 0;
}
.consent-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 1rem 0;
min-width: 0;
}
.consent-row {
display: flex;
gap: 0.6rem;
align-items: flex-start;
font-size: 0.9rem;
line-height: 1.5;
min-width: 0;
}
.consent-row > input[type="checkbox"] {
margin-top: 0.25rem;
flex-shrink: 0;
}
.consent-copy {
flex: 1 1 auto;
min-width: 0;
}
code {
overflow-wrap: anywhere;
}
pre code {
overflow-wrap: normal;
}
caption.visually-hidden {
display: block;
white-space: normal;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.maturity {
display: inline-flex;
align-items: baseline;
gap: 0.4em;
padding: 0.15em 0.6em 0.2em;
border: 1px solid var(--maturity-line);
border-radius: 2em;
background: var(--maturity-bg);
color: var(--maturity-ink);
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
vertical-align: baseline;
min-width: 0;
}
.maturity::before {
content: var(--maturity-glyph);
font-weight: 700;
letter-spacing: 0;
}
.maturity-verified {
--maturity-ink: #10603f;
--maturity-bg: #e8f5ee;
--maturity-line: #9ecbb4;
--maturity-glyph: "✓";
}
.maturity-implemented {
--maturity-ink: #14778f;
--maturity-bg: var(--teal-soft);
--maturity-line: #9cc5cf;
--maturity-glyph: "▪";
}
.maturity-reference {
--maturity-ink: #0b6ebc;
--maturity-bg: var(--blue-soft);
--maturity-line: #a8c6e0;
--maturity-glyph: "◆";
}
.maturity-conceptual {
--maturity-ink: #6a5330;
--maturity-bg: #f7f1e4;
--maturity-line: #d6c4a0;
--maturity-glyph: "◇";
}
.maturity-research {
--maturity-ink: #6b4a86;
--maturity-bg: #f3edf9;
--maturity-line: #c9b3dd;
--maturity-glyph: "◐";
}
.maturity-future {
--maturity-ink: #5b6472;
--maturity-bg: #eef0f3;
--maturity-line: #c3cad3;
--maturity-glyph: "○";
}
[data-theme="dark"] .maturity-verified {
--maturity-ink: #7fd8ab; --maturity-bg: #0b2a1d; --maturity-line: #1f5c3f;
}
[data-theme="dark"] .maturity-implemented {
--maturity-ink: #5fd3d3; --maturity-bg: #08222a; --maturity-line: #1d5462;
}
[data-theme="dark"] .maturity-reference {
--maturity-ink: #7cc2f5; --maturity-bg: #0a2033; --maturity-line: #1e4c72;
}
[data-theme="dark"] .maturity-conceptual {
--maturity-ink: #d8c191; --maturity-bg: #2a2317; --maturity-line: #5e5031;
}
[data-theme="dark"] .maturity-research {
--maturity-ink: #c3a6dd; --maturity-bg: #221a2c; --maturity-line: #4d3d61;
}
[data-theme="dark"] .maturity-future {
--maturity-ink: #9aa5b3; --maturity-bg: #1a1f26; --maturity-line: #39414c;
}
.maturity-legend {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: 0.75rem 1.5rem;
margin: 1.5rem 0;
padding: 0;
list-style: none;
min-width: 0;
}
.maturity-legend > li {
display: flex;
align-items: baseline;
gap: 0.6rem;
min-width: 0;
font-size: 0.9rem;
line-height: 1.6;
color: var(--body);
}
.maturity-legend .maturity {
flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
.maturity {
transition: background-color 120ms ease, border-color 120ms ease;
}
}
.control-model {
margin: 1.75rem 0 0;
padding: 1.5rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
min-width: 0;
overflow-x: auto;
}
.control-model svg {
min-width: 34rem;
}
.cm-axis {
stroke: var(--line);
stroke-width: 2;
}
.cm-arrowhead {
fill: var(--line);
}
.cm-gate rect {
fill: var(--teal-soft);
stroke: #9cc5cf;
stroke-width: 1.5;
}
.cm-audit rect {
fill: none;
stroke: var(--blue);
stroke-width: 1.5;
stroke-dasharray: 6 4;
opacity: 0.85;
}
.cm-tie path {
stroke: var(--line);
stroke-width: 1.5;
stroke-dasharray: 3 3;
fill: none;
}
.cm-id {
fill: var(--ink);
font-family: var(--sans);
font-size: 17px;
font-weight: 700;
letter-spacing: 0.04em;
}
.cm-name {
fill: var(--ink-soft);
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
}
.cm-act {
fill: var(--body);
font-family: var(--sans);
font-size: 12.5px;
}
.cm-eyebrow,
.cm-note {
fill: var(--body);
font-family: var(--sans);
font-size: 11.5px;
letter-spacing: 0.09em;
text-transform: uppercase;
font-weight: 700;
}
.cm-note {
letter-spacing: 0.02em;
text-transform: none;
font-weight: 400;
font-size: 12.5px;
}
[data-theme="dark"] .cm-gate rect {
fill: #08222a;
stroke: #1d5462;
}
[data-theme="dark"] .cm-audit rect {
stroke: #58b4f0;
}
.boundary-model {
margin: 1.75rem 0 0;
padding: 1.5rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
min-width: 0;
overflow-x: auto;
}
.boundary-model svg {
min-width: 36rem;
}
.ib-org rect {
fill: none;
stroke: var(--line);
stroke-width: 1.5;
}
.ib-org-label {
fill: var(--body);
font-family: var(--sans);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.1em;
}
.ib-outside rect {
fill: var(--mist);
stroke: var(--line);
stroke-width: 1;
stroke-dasharray: 4 4;
}
.ib-outside-title {
fill: var(--body);
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
}
.ib-outside-note {
fill: var(--body);
font-family: var(--sans);
font-size: 12px;
opacity: 0.85;
}
.ib-actor rect {
fill: var(--teal-soft);
stroke: #9cc5cf;
stroke-width: 1.25;
}
.ib-actor-label {
fill: var(--ink-soft);
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
}
.ib-boundary {
stroke: var(--ink);
stroke-width: 2;
stroke-dasharray: 8 5;
opacity: 0.55;
}
.ib-boundary-label {
fill: var(--ink);
font-family: var(--sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
opacity: 0.75;
}
.ib-call {
stroke: var(--blue);
stroke-width: 2;
}
.ib-call-head {
fill: var(--blue);
}
.ib-gate rect {
fill: var(--blue-soft);
stroke: var(--blue);
stroke-width: 2;
}
.ib-gate-title {
fill: var(--ink);
font-family: var(--sans);
font-size: 15px;
font-weight: 700;
}
.ib-gate-q {
fill: var(--ink-soft);
font-family: var(--sans);
font-size: 12.5px;
}
.ib-note {
fill: var(--body);
font-family: var(--sans);
font-size: 12.5px;
}
[data-theme="dark"] .ib-outside rect { fill: #12202f; }
[data-theme="dark"] .ib-actor rect   { fill: #08222a; stroke: #1d5462; }
[data-theme="dark"] .ib-gate rect    { fill: #0a2033; stroke: #58b4f0; }
.shadow-model {
margin: 1.5rem 0 0;
padding: 1.5rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
min-width: 0;
overflow-x: auto;
}
.shadow-model svg { min-width: 36rem; }
.sm-live rect {
fill: var(--mist);
stroke: var(--line);
stroke-width: 1.25;
}
.sm-eval rect {
fill: var(--teal-soft);
stroke: #9cc5cf;
stroke-width: 1.25;
}
.sm-call, .sm-flow { stroke: var(--body); stroke-width: 2; }
.sm-call-head, .sm-flow-head { fill: var(--body); }
.sm-tap { stroke: var(--blue); stroke-width: 1.75; stroke-dasharray: 5 4; }
.sm-tap-head { fill: var(--blue); }
.sm-divider { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 4; }
.sm-zone {
fill: var(--body); font-family: var(--sans); font-size: 11.5px;
font-weight: 700; letter-spacing: 0.11em;
}
.sm-label { fill: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 600; }
.sm-sub   { fill: var(--body); font-family: var(--sans); font-size: 11.5px; }
.sm-note  { fill: var(--body); font-family: var(--sans); font-size: 12px; }
[data-theme="dark"] .sm-live rect { fill: #12202f; }
[data-theme="dark"] .sm-eval rect { fill: #08222a; stroke: #1d5462; }
[data-theme="dark"] .sm-tap       { stroke: #58b4f0; }
[data-theme="dark"] .sm-tap-head  { fill: #58b4f0; }
.arch-model {
margin: 1.25rem 0 2rem;
padding: 1.5rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
min-width: 0;
overflow-x: auto;
}
.arch-model svg { min-width: 38rem; }
.ra-box rect {
fill: var(--teal-soft);
stroke: #9cc5cf;
stroke-width: 1.25;
}
.ra-core rect {
fill: var(--blue-soft);
stroke: var(--blue);
stroke-width: 2;
}
.ra-absent rect {
fill: none;
stroke: var(--line);
stroke-width: 1.25;
stroke-dasharray: 5 4;
}
.ra-flow { stroke: var(--body); stroke-width: 1.75; }
.ra-flow-head { fill: var(--body); }
.ra-divider { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ra-zone {
fill: var(--body); font-family: var(--sans); font-size: 11.5px;
font-weight: 700; letter-spacing: 0.11em;
}
.ra-zone-absent { opacity: 0.75; }
.ra-title  { fill: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 600; }
.ra-sub    { fill: var(--body); font-family: var(--sans); font-size: 11.5px; }
.ra-title-absent { fill: var(--body); font-family: var(--sans); font-size: 14px; font-weight: 600; opacity: 0.9; }
.ra-sub-absent   { fill: var(--body); font-family: var(--sans); font-size: 11.5px; opacity: 0.8; }
.ra-note   { fill: var(--body); font-family: var(--sans); font-size: 12.5px; }
[data-theme="dark"] .ra-box rect  { fill: #08222a; stroke: #1d5462; }
[data-theme="dark"] .ra-core rect { fill: #0a2033; stroke: #58b4f0; }
.evidence-model {
margin: 1.25rem 0 2rem;
padding: 1.5rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
min-width: 0;
overflow-x: auto;
}
.evidence-model svg { min-width: 38rem; }
.ev-box rect  { fill: var(--mist); stroke: var(--line); stroke-width: 1.25; }
.ev-core rect { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 2; }
.ev-body rect { fill: var(--teal-soft); stroke: #9cc5cf; stroke-width: 1.25; }
.ev-flow { stroke: var(--body); stroke-width: 1.75; }
.ev-flow-head { fill: var(--body); }
.ev-divider { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ev-zone {
fill: var(--body); font-family: var(--sans); font-size: 11.5px;
font-weight: 700; letter-spacing: 0.11em;
}
.ev-title { fill: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 600; }
.ev-sub   { fill: var(--body); font-family: var(--sans); font-size: 11.5px; }
.ev-note  { fill: var(--body); font-family: var(--sans); font-size: 12px; }
.ev-warn  { fill: var(--ink-soft); font-family: var(--sans); font-size: 12.5px; font-weight: 600; }
[data-theme="dark"] .ev-box rect  { fill: #12202f; }
[data-theme="dark"] .ev-core rect { fill: #0a2033; stroke: #58b4f0; }
[data-theme="dark"] .ev-body rect { fill: #08222a; stroke: #1d5462; }
.trust-gateway {
margin: 1.5rem 0 0;
padding: 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
min-width: 0;
}
.tg-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--line);
min-width: 0;
}
.tg-step {
padding: 0.45rem 0.9rem;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--mist);
color: var(--ink-soft);
font: inherit;
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
}
.tg-step:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.tg-step:disabled { opacity: 0.45; cursor: default; }
.tg-step:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tg-step-quiet { margin-left: auto; }
.tg-position {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--body);
}
.tg-scenario + .tg-scenario {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
}
.tg-scenario-title { margin: 0 0 0.25rem; font-size: 1.02rem; }
.tg-scenario-note  { margin: 0 0 1rem; color: var(--body); font-size: 0.9rem; line-height: 1.65; }
.tg-turns { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; min-width: 0; }
.tg-turn {
padding: 0.9rem 1rem;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--mist);
min-width: 0;
}
.tg-said { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem; min-width: 0; }
.tg-turn-no {
flex: 0 0 auto;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--body);
}
.tg-said q { min-width: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.6; }
.tg-verdict {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem;
margin-top: 0.7rem;
min-width: 0;
}
.tg-action {
padding: 0.15em 0.6em 0.2em;
border: 1px solid currentColor;
border-radius: 2em;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
white-space: nowrap;
}
.tg-action-deny     { color: #9b2c2c; background: #fdeaea; }
.tg-action-escalate { color: #8a5a12; background: #fdf2e0; }
.tg-action-disclose { color: #0b6ebc; background: var(--blue-soft); }
.tg-action-log      { color: #6b4a86; background: #f3edf9; }
.tg-action-continue { color: #10603f; background: #e8f5ee; }
.tg-reason {
min-width: 0;
overflow-wrap: anywhere;
font-size: 0.8rem;
color: var(--body);
}
.tg-violations { margin: 0.7rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; min-width: 0; }
.tg-violations li { color: var(--body); font-size: 0.86rem; line-height: 1.6; }
.tg-sev {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--ink-soft);
}
.tg-clean { margin: 0.7rem 0 0; color: var(--body); font-size: 0.86rem; opacity: 0.8; }
[data-theme="dark"] .tg-turn { background: #12202f; }
[data-theme="dark"] .tg-step { background: #12202f; }
[data-theme="dark"] .tg-action-deny     { color: #f2a2a2; background: #2c1414; }
[data-theme="dark"] .tg-action-escalate { color: #e0bd7c; background: #2a2114; }
[data-theme="dark"] .tg-action-disclose { color: #7cc2f5; background: #0a2033; }
[data-theme="dark"] .tg-action-log      { color: #c3a6dd; background: #221a2c; }
[data-theme="dark"] .tg-action-continue { color: #7fd8ab; background: #0b2a1d; }
@media (prefers-reduced-motion: no-preference) {
.tg-turn { transition: opacity 140ms ease; }
}
.wayfinder {
margin: 3rem 0 0;
padding: 1.25rem 1.25rem 1.4rem;
border-top: 1px solid var(--line);
min-width: 0;
}
.wayfinder-here {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.6rem;
margin: 0 0 1rem;
min-width: 0;
}
.wayfinder-journey {
flex: 0 0 auto;
padding: 0.14em 0.6em 0.2em;
border: 1px solid var(--line);
border-radius: 2em;
background: var(--mist);
color: var(--body);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.wayfinder-question {
min-width: 0;
color: var(--ink);
font-family: var(--display);
font-size: 1.02rem;
font-weight: 700;
}
.wayfinder-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
gap: 0.9rem 1.5rem;
margin: 0;
padding: 0;
list-style: none;
min-width: 0;
}
.wayfinder-steps li {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.wayfinder-steps span {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--body);
opacity: 0.85;
}
.wayfinder-steps a {
min-width: 0;
color: var(--blue);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.5;
overflow-wrap: anywhere;
}
.wayfinder-steps a:hover { text-decoration: underline; }
.wayfinder-steps a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
[data-theme="dark"] .wayfinder-journey { background: #12202f; }
.sequence-model {
margin: 1.75rem 0 0;
padding: 1.5rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
min-width: 0;
overflow-x: auto;
}
.sequence-model svg {
min-width: 36rem;
}
.sq-lane rect {
fill: var(--teal-soft);
stroke: #9cc5cf;
stroke-width: 1.5;
}
.sq-lane-name {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 650;
fill: var(--ink);
}
.sq-lane-role {
font-family: var(--sans);
font-size: 10.5px;
fill: var(--body);
}
.sq-life {
stroke: var(--line);
stroke-width: 1.5;
stroke-dasharray: 3 5;
}
.sq-msg { stroke: var(--teal); stroke-width: 1.8; }
.sq-msg-head { fill: var(--teal); }
.sq-return { stroke: var(--blue); stroke-width: 1.8; stroke-dasharray: 6 4; }
.sq-return-head { fill: var(--blue); }
.sq-step {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 10px;
font-weight: 500;
fill: var(--body);
}
.sq-label {
font-family: var(--sans);
font-size: 11.5px;
fill: var(--ink-soft);
}
.sq-call {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 11px;
fill: var(--ink);
}
.sq-gate line {
stroke: var(--blue);
stroke-width: 1.5;
stroke-dasharray: 6 4;
opacity: 0.9;
}
.sq-gate-label {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 9.5px;
letter-spacing: 0.1em;
fill: var(--blue);
}
.sq-out rect {
fill: var(--blue-soft);
stroke: var(--blue);
stroke-width: 1.2;
}
.sq-out-key {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 10px;
fill: var(--body);
}
.sq-out-val {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 10px;
font-weight: 500;
fill: var(--ink);
}
.sequence-steps {
margin: 1.25rem 0 0;
padding-left: 1.15rem;
color: var(--body);
font-size: 0.93rem;
line-height: 1.7;
}
.sequence-steps li { margin-bottom: 0.4rem; }
.sequence-steps code {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 0.84em;
background: var(--bg-alt, var(--mist));
padding: 0.08rem 0.28rem;
border-radius: 3px;
}
.figure-frame {
margin: 1.75rem 0 0;
padding: 1.5rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
min-width: 0;
overflow-x: auto;
}
.visual-provenance {
margin: 0.9rem 0 0;
padding: 0.75rem 0.9rem;
border-left: 3px solid var(--blue);
background: var(--mist);
border-radius: 0 8px 8px 0;
font-size: 0.8rem;
line-height: 1.65;
color: var(--body);
}
.visual-provenance p { margin: 0 0 0.25rem; }
.visual-provenance p:last-child { margin-bottom: 0; }
.visual-provenance code {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 0.92em;
background: var(--paper);
padding: 0.05rem 0.3rem;
border-radius: 3px;
border: 1px solid var(--line);
}
.visual-provenance strong { color: var(--ink); font-weight: 650; }
.enforcement-ladder svg { min-width: 40rem; }
.el-zone, .el-colhead {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 9.5px;
letter-spacing: 0.11em;
fill: var(--body);
text-transform: uppercase;
}
.el-colhead { text-transform: none; letter-spacing: 0.02em; font-size: 10.5px; }
.el-node rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.el-title { font-family: var(--sans); font-size: 12.5px; font-weight: 650; fill: var(--ink); }
.el-sub { font-family: var(--sans); font-size: 10.5px; fill: var(--body); }
.el-ctlbox rect { fill: var(--teal-soft); stroke: #9cc5cf; stroke-width: 1.4; }
.el-auditbox rect { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 5 3; }
.el-ctlname {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 10.5px; font-weight: 500; fill: var(--ink);
}
.el-flow { stroke: var(--line); stroke-width: 1.6; fill: none; }
.el-flow-head { fill: var(--line); }
.el-divider { stroke: var(--line); stroke-width: 1; }
.el-rung { fill: var(--teal-soft); stroke: #9cc5cf; stroke-width: 1.2; }
.el-pri {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 11px; font-weight: 500; fill: var(--teal);
}
.el-action {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 10.5px; fill: var(--ink);
}
.el-count {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 10px; fill: var(--body);
}
.el-ctl {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 10.5px; fill: var(--ink);
}
.el-winbar { fill: var(--blue); opacity: 0.55; }
.el-note { font-family: var(--sans); font-size: 10.5px; fill: var(--body); }
.shadow-outcomes svg { min-width: 34rem; }
.ev-cat {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 11px; fill: var(--ink);
}
.ev-val {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 11px; font-weight: 500; fill: var(--ink);
}
.ev-pct { fill: var(--body); font-weight: 400; }
.ev-sub { font-family: var(--sans); font-size: 11px; fill: var(--body); }
.ev-headline { font-family: var(--sans); font-size: 12.5px; font-weight: 650; fill: var(--ink); }
.ev-divider { stroke: var(--line); stroke-width: 1; }
.ev-bar[data-tone="continue"] { fill: var(--teal-bright, #14b8a6); opacity: 0.4; }
.ev-bar[data-tone="enforce"] { fill: var(--blue); opacity: 0.72; }
.sc-wrap { margin: 1.25rem 0 0; overflow-x: auto; }
.scorecard-table {
width: 100%;
min-width: 42rem;
border-collapse: collapse;
font-size: 0.85rem;
}
.scorecard-table caption {
caption-side: top;
text-align: left;
font-size: 0.8rem;
color: var(--body);
padding-bottom: 0.6rem;
}
.scorecard-table th, .scorecard-table td {
text-align: left;
vertical-align: top;
padding: 0.7rem 0.75rem;
border-bottom: 1px solid var(--line);
}
.scorecard-table thead th {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 0.68rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--body);
font-weight: 500;
border-bottom: 1.5px solid var(--line);
}
.scorecard-table tbody th {
font-weight: 650;
color: var(--ink);
width: 22%;
}
.scorecard-table th:nth-child(2), .scorecard-table td:nth-child(2) { width: 15%; }
.scorecard-table th:nth-child(3), .scorecard-table td:nth-child(3) { width: 33%; }
.scorecard-table th:nth-child(4), .scorecard-table td:nth-child(4) { width: 30%; }
.sc-measures, .sc-src {
display: block;
font-weight: 400;
font-size: 0.74rem;
color: var(--body);
margin-top: 0.15rem;
}
.sc-src { font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 0.7rem; }
.sc-size {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 0.78rem;
white-space: nowrap;
}
.scorecard-table code {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 0.72rem;
background: var(--mist);
padding: 0.1rem 0.3rem;
border-radius: 3px;
word-break: break-word;
}
.sc-rate {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-weight: 500;
color: var(--teal);
white-space: nowrap;
}
.latency-distribution svg { min-width: 36rem; }
.lt-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.lt-tick {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 9.5px; fill: var(--body);
}
.lt-cat {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 11px; fill: var(--ink);
}
.lt-n {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 9px; fill: var(--body);
}
.lt-span { stroke: var(--blue); stroke-width: 5; stroke-linecap: round; opacity: 0.32; }
.lt-p50 { fill: var(--teal-bright, #14b8a6); }
.lt-p95 { fill: var(--blue); }
.lt-val {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 9.5px; fill: var(--body);
}
.trust-stack-model svg,
.ts-zone, .ob-zone {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; fill: var(--body);
}
.ts-layer rect { stroke-width: 1.5; }
.ts-layer[data-kind="core"] rect     { fill: var(--teal-soft); stroke: var(--teal); stroke-width: 2.5; }
.ts-layer[data-kind="extension"] rect{ fill: var(--blue-soft); stroke: var(--blue); }
.ts-layer[data-kind="external"] rect { fill: var(--paper); stroke: var(--line); }
.ts-num {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 12px; font-weight: 500; fill: var(--body);
}
.ts-name { font-family: var(--sans); font-size: 12.5px; font-weight: 650; fill: var(--ink); }
.ts-purpose { font-family: var(--sans); font-size: 10.5px; fill: var(--body); }
.ts-evidence {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 10px; fill: var(--body);
}
.ts-gap rect { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-dasharray: 6 4; }
.ts-gapname { font-family: var(--sans); font-size: 11px; font-style: italic; fill: var(--body); }
.ts-key { font-family: var(--sans); font-size: 10px; fill: var(--body); }
.ts-key-core { fill: var(--teal); }
.ts-key-ext { fill: var(--blue); }
.ts-key-ext-o { fill: var(--line); }
.ob-row rect { stroke-width: 1.5; }
.ob-row[data-kind="control"] rect  { fill: var(--teal-soft); stroke: var(--teal); }
.ob-row[data-kind="adjacent"] rect { fill: none; stroke: var(--line); stroke-dasharray: 5 3; }
.ob-name {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 11.5px; font-weight: 500; fill: var(--ink); letter-spacing: .04em;
}
.ob-meaning { font-family: var(--sans); font-size: 11.5px; fill: var(--ink-soft); }
.ob-flow { stroke: var(--line); stroke-width: 1.6; fill: none; }
.ob-flow-head { fill: var(--line); }
.ob-control {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 11px; font-weight: 500;
}
.ob-control[data-kind="control"]  { fill: var(--teal); }
.ob-control[data-kind="adjacent"] { fill: var(--body); }
.stack-wrap > .stack-figure { grid-column: 1 / -1; }
.framework-map svg { min-width: 40rem; }
.fm-root rect { fill: var(--teal-soft); stroke: var(--teal); stroke-width: 2.5; }
.fm-roottitle { font-family: var(--display); font-size: 15px; font-weight: 700; fill: var(--ink); }
.fm-rootsub { font-family: var(--sans); font-size: 10.5px; fill: var(--body); }
.fm-head rect { fill: none; stroke: var(--line); stroke-width: 1.4; }
.fm-journey {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 10px; letter-spacing: .1em; fill: var(--body);
}
.fm-spine { stroke: var(--line); stroke-width: 1.4; fill: none; }
.fm-node rect { stroke-width: 1.4; }
.fm-node[data-kind="framework"] rect { fill: var(--teal-soft); stroke: var(--teal); }
.fm-node[data-kind="measure"] rect   { fill: var(--blue-soft); stroke: var(--blue); }
.fm-node[data-kind="build"] rect     { fill: var(--paper); stroke: var(--ink-soft); }
.fm-node[data-kind="context"] rect   { fill: var(--paper); stroke: var(--line); }
.fm-label { font-family: var(--sans); font-size: 11.5px; fill: var(--ink); }
.framework-map a { text-decoration: none; }
.framework-map a:hover .fm-label { text-decoration: underline; }
.framework-map a:focus-visible rect { outline: 2px solid var(--teal-bright); outline-offset: 2px; }
.fm-key { font-family: var(--sans); font-size: 10px; fill: var(--body); }
.fm-k1 { fill: var(--teal); } .fm-k2 { fill: var(--blue); }
.fm-k3 { fill: var(--ink-soft); } .fm-k4 { fill: var(--line); }
.integration-ladder-model svg { min-width: 42rem; }
.il-tier rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.il-num {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 22px; font-weight: 500; fill: var(--teal);
}
.il-name { font-family: var(--sans); font-size: 13px; font-weight: 650; fill: var(--ink); }
.il-work { font-family: var(--sans); font-size: 11.5px; fill: var(--body); }
.il-meta {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 10px; fill: var(--ink-soft);
}
.il-key { fill: var(--body); letter-spacing: .08em; }
.credential-chain svg { min-width: 42rem; }
.cc-zone {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 9.5px; letter-spacing: .11em; fill: var(--body);
}
.cc-step rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.cc-num {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 16px; font-weight: 500; fill: var(--teal);
}
.cc-title { font-family: var(--sans); font-size: 11.5px; font-weight: 650; fill: var(--ink); }
.cc-body {
font-family: var(--sans); font-size: 10px; line-height: 1.35; color: var(--body);
display: block;
}
.cc-flow { stroke: var(--line); stroke-width: 1.6; fill: none; }
.cc-flow-head { fill: var(--line); }
.cc-check rect { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 1.2; }
.cc-checktext {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 9px; fill: var(--ink);
}
.imp-model svg { min-width: 44rem; }
.imp-axis      { stroke: var(--line); stroke-width: 1.5; }
.imp-tick      { stroke: var(--line); stroke-width: 1.2; }
.imp-window    { fill: var(--mist); stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 4 3; }
.imp-disclose  { fill: var(--teal-soft); stroke: var(--teal); stroke-width: 1.6; }
.imp-marker    { stroke: var(--teal); stroke-width: 1.8; }
.imp-exposure  { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.imp-exposure-fill { fill: var(--ink); }
.imp-label     { font-family: var(--sans); font-size: 12.5px; font-weight: 650; fill: var(--ink); }
.imp-sub       { font-family: var(--sans); font-size: 10.5px; fill: var(--body); }
.imp-zone      { font-family: var(--sans); font-size: 9.5px; fill: var(--body); letter-spacing: .07em; }
.imp-mono      { font-family: var(--mono); font-size: 10.5px; fill: var(--ink); }
.imp-mono-soft { font-family: var(--mono); font-size: 10px; fill: var(--body); }
.imp-formula   { font-family: var(--mono); font-size: 15px; font-weight: 500; fill: var(--ink); }
.imp-teal      { fill: var(--teal); }
.imp-blue      { fill: var(--blue); }
.imp-chip rect { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 1.1; }
.imp-chip text { font-family: var(--mono); font-size: 9.5px; fill: var(--blue); }
.imp-steps {
margin: 1.1rem 0 0; padding-left: 1.15rem;
color: var(--body); font-size: .92rem; line-height: 1.7;
}
.imp-steps li { margin-bottom: .4rem; }
.imp-steps code { font-family: var(--mono); font-size: .85em; }
.control-card {
display: flex; flex-direction: column; gap: 0.5rem;
padding: 1.25rem 1.25rem 1.125rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
min-width: 0;
}
.control-card-id {
display: inline-flex; align-items: center; align-self: flex-start;
padding: 0.125rem 0.5rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--teal);
background: var(--mist);
}
.control-card-name { margin: 0.125rem 0 0; font-size: 1.0625rem; line-height: 1.3; color: var(--ink); }
.control-card-rule { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }
.control-card-not {
margin: 0.25rem 0 0; padding-top: 0.625rem;
border-top: 1px solid var(--line);
font-size: 0.875rem; line-height: 1.55; color: var(--body);
}
.control-card-not > span {
font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--body); margin-right: 0.375rem;
}
[data-theme="dark"] .control-card { background: var(--surface); }
.hero-transcript { margin: 0; min-width: 0; }
.ht-label {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem;
margin: 0 0 .875rem; font-size: .8125rem; line-height: 1.5; color: #93a9c0;
}
.ht-turns {
list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
}
.ht-turn {
display: grid; gap: .5rem; min-width: 0;
padding: .875rem 1rem;
border: 1px solid rgba(148, 163, 184, .22);
border-radius: var(--radius);
background: rgba(11, 26, 46, .72);
}
.ht-turn.ht-rep { background: rgba(255, 255, 255, .04); margin-inline: 1.5rem 0; }
.ht-who {
font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
color: #8fb4d6;
}
.ht-rep .ht-who { color: #93a9c0; }
.ht-turn q { quotes: "\201C" "\201D"; font-size: .9375rem; line-height: 1.55; color: #e6eef8; }
.ht-note { font-size: .75rem; color: #93a9c0; }
.ht-chips {
list-style: none; margin: .125rem 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: .375rem; align-items: center;
}
.ht-chip, .ht-composite {
display: inline-flex; align-items: center; gap: .4rem;
padding: .25rem .5rem; border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, .25);
font-family: var(--mono); font-size: .6875rem; line-height: 1.3; min-width: 0;
}
.ht-chip b { font-weight: 600; color: #cfe2f7; }
.ht-chip code, .ht-composite code { font: inherit; color: #93a9c0; overflow-wrap: anywhere; }
.ht-chip.is-lit { border-color: rgba(20, 184, 166, .55); background: rgba(20, 184, 166, .12); }
.ht-chip.is-lit b, .ht-chip.is-lit code { color: #75ece0; }
.ht-chip.is-quiet { opacity: .72; }
.ht-composite { margin-left: auto; border-style: dashed; }
.ht-composite span { color: #93a9c0; letter-spacing: .08em; text-transform: uppercase; font-size: .625rem; }
.ht-composite code { color: #cfe2f7; }
.ht-audit {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
margin: .625rem 0 0; padding: .625rem .875rem;
border: 1px dashed rgba(148, 163, 184, .35); border-radius: var(--radius);
font-size: .8125rem; color: #c9d8e8;
}
.ht-audit b { font-family: var(--mono); font-weight: 600; color: #cfe2f7; }
.ht-audit code { font-family: var(--mono); font-size: .6875rem; color: #93a9c0; margin-left: auto; overflow-wrap: anywhere; }
.ht-caption { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: #93a9c0; }
@media (max-width: 640px) {
.ht-turn.ht-rep { margin-inline: 0; }
.ht-composite { margin-left: 0; }
.ht-audit code { margin-left: 0; }
}
.flow {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem;
counter-reset: flow;
}
.flow-step {
position: relative; min-width: 0; display: flex; flex-direction: column; gap: .375rem;
padding: 1rem 1rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.flow-step::after {
content: ""; position: absolute; top: 50%; right: -.625rem; width: .5rem; height: .5rem;
border-top: 1.5px solid var(--body); border-right: 1.5px solid var(--body);
transform: translateY(-50%) rotate(45deg); opacity: .55;
}
.flow-step:last-child::after { display: none; }
.flow-kicker { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.flow-step b { font-size: .9375rem; line-height: 1.3; color: var(--ink); }
.flow-step b code { font-family: var(--mono); font-size: .85em; }
.flow-step > span:not(.flow-kicker) { font-size: .8125rem; line-height: 1.5; color: var(--body); }
.flow-ladder { display: block; font-family: var(--mono); font-size: .6875rem; line-height: 1.6; color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 1060px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-step::after { display: none; } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }
[data-theme="dark"] .flow-step { background: var(--surface); }
.cta-band { padding-block: clamp(5rem, 9vw, 7rem); }
.cta-band .cta-band-inner { display: grid; gap: 1.25rem; max-width: 46rem; }
.cta-band h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; color: var(--inst-text-strong); text-wrap: balance; }
.cta-band p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: #c9d8e8; max-width: 60ch; }
.cta-band .cta-band-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cta-band .cta-band-note { font-size: .8125rem; color: #93a9c0; }
@media (min-width: 1180px) {
.control-register .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.control-register .control-card { padding: 1.125rem 1rem 1rem; }
}
.sq-alt { stroke: var(--body); stroke-width: 1.6; stroke-dasharray: 4 4; }
.sq-alt-head { fill: var(--body); }
.sq-alt-label {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 9.5px; letter-spacing: 0.1em; fill: var(--body);
}
.sq-out.is-deny rect { fill: var(--mist); stroke: var(--ink); }
.sq-audit rect { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 6 4; }
.sq-audit-label {
font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
font-size: 10px; letter-spacing: 0.08em; fill: var(--teal);
}
.sq-audit-note { font-family: var(--sans); font-size: 10.5px; fill: var(--body); }
[data-theme="dark"] .sq-out.is-deny rect { fill: var(--surface); stroke: var(--text); }
.cc-hop { stroke: var(--body); stroke-width: 1.6; stroke-dasharray: 5 4; fill: none; }
.cc-hop-head { fill: var(--body); }
.cc-hop-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; fill: var(--body); }
.cc-anchor rect { fill: none; stroke: var(--teal); stroke-width: 1.4; stroke-dasharray: 6 4; }
.cc-anchor-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; fill: var(--teal); }
.cc-result rect { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 1.2; }
.cc-result-text { font-family: var(--mono); font-size: 10.5px; fill: var(--ink); }
.cc-note { font-family: var(--sans); font-size: 10.5px; fill: var(--body); }
.cc-field { font-family: var(--mono); font-size: 9.5px; fill: var(--body); }
[data-theme="dark"] .cc-step rect { fill: var(--surface); }
.hero-badge {
display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
margin: 1rem 0 0; padding: .375rem .75rem .375rem .5rem;
border: 1px solid rgba(148, 163, 184, .35); border-radius: 999px;
font-size: .8125rem; color: #c9d8e8;
}
.matrix caption { caption-side: top; text-align: left; padding: 0 0 .75rem; font-size: .875rem; color: var(--body); }
.matrix caption b { color: var(--ink); }
.matrix th[scope="col"] { font-size: .8125rem; line-height: 1.3; vertical-align: bottom; }
.matrix th[scope="row"] { white-space: nowrap; }
.matrix td { text-align: center; font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; }
.matrix td.is-direct { color: var(--teal); font-weight: 600; }
.matrix td.is-partial { color: var(--ink-soft); }
.matrix td.is-blank { color: var(--line); }
.matrix-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .75rem 0 0; font-size: .8125rem; color: var(--body); }
.matrix-legend b { font-family: var(--mono); font-weight: 600; letter-spacing: .04em; }
.matrix-legend .is-direct { color: var(--teal); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: .55rem; height: 1px; background: var(--line); }
.timeline li { position: relative; min-width: 0; padding-top: 1.5rem; }
.timeline li::before { content: ""; position: absolute; left: 0; top: .25rem; width: .625rem; height: .625rem; border-radius: 999px; background: var(--paper); border: 2px solid var(--teal); }
.timeline code { display: block; font-family: var(--mono); font-size: .6875rem; color: var(--ink); overflow-wrap: anywhere; }
.timeline span { display: block; margin-top: .25rem; font-size: .75rem; line-height: 1.45; color: var(--body); }
@media (max-width: 1060px) { .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } .timeline::before { display: none; } .timeline li::before { top: .2rem; } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr 1fr; } }
.json-sample { margin: 1.25rem 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.json-sample > summary { cursor: pointer; padding: .75rem 1rem; font-size: .9rem; font-weight: 600; color: var(--ink); }
.json-sample > pre { margin: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); max-height: 28rem; overflow: auto; font-size: .75rem; }
.register .matrix { table-layout: fixed; min-width: 56rem; }
.register .matrix caption { white-space: normal; padding: .875rem 1rem .5rem; }
.register .matrix th[scope="col"] { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: .8125rem; white-space: normal; width: 7.5rem; }
.register .matrix th[scope="col"]:first-child { width: 15rem; }
.register .matrix th[scope="col"] small { display: block; font-weight: 400; color: var(--body); font-size: .72rem; margin-top: .125rem; }
.register .matrix th[scope="row"] { white-space: normal; font-weight: 600; }
.register .matrix { min-width: 43rem; }
.register .matrix th[scope="col"] { width: 5.5rem; font-size: .75rem; padding-left: .5rem; padding-right: .5rem; }
.register .matrix th[scope="col"]:first-child { width: 10rem; }
.register .matrix td { padding-left: .5rem; padding-right: .5rem; font-size: .7rem; }
.timeline code { overflow-wrap: normal; word-break: normal; }
.flow.flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1060px) { .flow.flow-3 { grid-template-columns: 1fr; } }
/* /assets/css/instrument.css */
:root {
--inst-ink: #07111f;
--inst-ink-2: #0b1a2e;
--inst-ink-3: #102640;
--inst-line: #1f3657;
--inst-line-strong: #2d4a70;
--inst-grid: rgba(144, 211, 255, 0.055);
--inst-text: #b7c7d8;
--inst-text-strong: #f2f7fc;
--inst-text-muted: #7f95ad;
--inst-teal: #55d9cb;
--inst-teal-bright: #75ece0;
--inst-teal-dim: rgba(85, 217, 203, 0.16);
--inst-cobalt: #9cd9ff;
--inst-amber: #ffd26c;
--inst-red: #ffaaa4;
}
.band-ink {
position: relative;
overflow: clip;
background: var(--inst-ink);
color: var(--inst-text);
border-bottom: 1px solid var(--inst-line);
padding-block: clamp(3.5rem, 7vw, 6rem);
}
[data-theme="dark"] .band-ink { background: #050c17; }
.band-ink::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(900px 420px at 92% -8%, rgba(85, 217, 203, 0.10), transparent 62%),
radial-gradient(700px 380px at -4% 0%, rgba(30, 99, 219, 0.10), transparent 60%),
linear-gradient(to right, var(--inst-grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--inst-grid) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;
-webkit-mask-image: linear-gradient(to bottom, #000 60%, rgba(0,0,0,.35));
mask-image: linear-gradient(to bottom, #000 60%, rgba(0,0,0,.35));
}
.hero-band.band-ink::before {
background:
radial-gradient(1100px 520px at 88% -10%, rgba(85, 217, 203, 0.13), transparent 62%),
radial-gradient(760px 420px at -6% 4%, rgba(30, 99, 219, 0.12), transparent 60%),
linear-gradient(to right, var(--inst-grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--inst-grid) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;
}
.band-ink > * { position: relative; z-index: 1; }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: var(--inst-text-strong); }
.band-ink p, .band-ink li { color: var(--inst-text); }
.band-ink a { color: var(--inst-cobalt); }
.band-ink .section-kicker { color: var(--inst-teal-bright); }
.band-ink .meta-label { color: var(--inst-teal-bright); }
.band-ink .display-title { color: var(--inst-text-strong); }
.band-ink .lede-text { color: #c9d8e8; }
.band-ink .proof-line { color: var(--inst-text-strong); }
.band-ink .boundary-note { color: #93a9c0; }
.band-ink .boundary-note span[aria-hidden] { color: var(--inst-teal); }
.band-ink .disclaimer-small { color: var(--inst-text-muted); border-top-color: var(--inst-line); }
.band-ink .maturity-reference { color: var(--inst-text-strong); border-color: var(--inst-line-strong); }
.band-ink .action-button-secondary { background: transparent; color: #cfe2f7; border-color: var(--inst-line-strong); }
.band-ink .action-button-secondary:hover { border-color: var(--inst-teal); color: var(--inst-teal-bright); background: rgba(85, 217, 203, 0.06); }
.band-ink .cta-button-secondary { background: transparent; color: #cfe2f7; box-shadow: none; border: 1px solid var(--inst-line-strong); }
.act-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem 2rem;
align-items: start;
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.act-head > div { min-width: 0; }
.act-head h2 { margin: .5rem 0 .6rem; max-width: 30ch; text-wrap: balance; }
.act-head .act-lead { color: var(--body); line-height: 1.8; max-width: 64ch; margin: 0; }
.band-ink .act-head .act-lead { color: var(--inst-text); }
.act-index {
font-family: var(--mono);
font-size: .75rem;
letter-spacing: .14em;
color: var(--body);
padding: .35rem .6rem;
border: 1px solid var(--line);
border-radius: 4px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.band-ink .act-index { color: var(--inst-text-muted); border-color: var(--inst-line); }
@media (max-width: 640px) {
.act-head { grid-template-columns: 1fr; }
.act-index { justify-self: start; order: -1; }
}
.hero-instrument {
position: relative;
min-width: 0;
}
.hero-instrument[data-figure-state="live"] > .iso { animation: instrument-in 480ms var(--motion-ease) both; }
@keyframes instrument-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hero-instrument .iso {
--anatomy-page: var(--inst-ink);
--anatomy-card: var(--inst-ink-2);
--anatomy-paper: var(--inst-ink-2);
--anatomy-face: #12284a;
--anatomy-top: #142b4e;
--anatomy-shade-0: #081528;
--anatomy-shade-1: #0a1a30;
--anatomy-shade-2: #0c1e36;
--anatomy-shade-3: #0f2340;
--anatomy-lit-top: #1b3d69;
--anatomy-lit-shade: #153256;
--anatomy-hi: #cfe2f7;
--anatomy-mid: #5f7fa3;
--anatomy-lo: #34506e;
--anatomy-faint: #22344c;
--anatomy-lit: #ffffff;
--anatomy-halo: #030a14;
--anatomy-halo-opacity: .85;
--anatomy-dot: #cfe2f7;
--anatomy-text: #96abc0;
--anatomy-strong: #f2f7fc;
--anatomy-muted: #5b7390;
--anatomy-blue: var(--inst-cobalt);
--anatomy-green: var(--inst-teal);
--anatomy-red: var(--inst-red);
--anatomy-mono: var(--mono);
--anatomy-lift: inset 0 1px 0 0 rgba(255,255,255,.05), 0 0 0 1px var(--inst-line), 0 12px 32px -12px rgba(0,0,0,.6);
}
.hero-instrument .iso-figure { margin: 0; }
.hero-instrument .iso-plate-corner[data-corner="hint"] { display: none; }
.hero-instrument .iso-plate-corner[data-corner="readout"] { max-width: 100%; white-space: normal; text-align: right; line-height: 1.35; }
.hero-instrument .iso-caption { display: none; }
.hero-instrument .tg-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-instrument .tg-chip code { white-space: nowrap; }
.hero-figure-note {
margin: .75rem 0 0;
font-size: .8125rem;
line-height: 1.6;
color: var(--inst-text-muted);
}
.hero-figure-note code { font-family: var(--mono); color: #cfe2f7; font-size: .78rem; }
.band-ink .figure-frame { background: var(--inst-ink-2); border-color: var(--inst-line); }
.band-ink .ob-zone { fill: var(--inst-text-muted); }
.band-ink .ob-row[data-kind="control"] rect { fill: #103c3b; stroke: var(--inst-teal); }
.band-ink .ob-row[data-kind="adjacent"] rect { stroke: var(--inst-line-strong); }
.band-ink .ob-name { fill: var(--inst-text-strong); }
.band-ink .ob-flow { stroke: var(--inst-line-strong); }
.band-ink .ob-flow-head { fill: var(--inst-line-strong); }
.band-ink .ob-control[data-kind="control"] { fill: var(--inst-teal-bright); }
.band-ink .ob-control[data-kind="adjacent"] { fill: var(--inst-text-muted); }
.band-ink .diagram-layers-alt li { color: var(--inst-text); border-color: var(--inst-line); background: transparent; }
.hero-observe { margin-top: 1rem; font-size: 1rem; color: #b7c7d8; max-width: 58ch; line-height: 1.65; }
.hero-observe a { color: var(--inst-teal-bright); font-weight: 600; white-space: nowrap; }
.stack-map-wrap {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: start;
}
@media (max-width: 1000px) { .stack-map-wrap { grid-template-columns: 1fr; } }
.stack-map {
margin: 0;
padding: 1.25rem 1.1rem 1rem;
border: 1px solid var(--inst-line);
border-radius: var(--radius);
background: var(--inst-ink-2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -24px rgba(0,0,0,.7);
min-width: 0;
overflow-x: auto;
}
.stack-map svg { width: 100%; height: auto; display: block; min-width: 640px; }
@media (max-width: 760px) {
.stack-map { position: relative; padding-top: 2.1rem; }
.stack-map::before {
content: "scroll \2192"; position: absolute; top: .7rem; right: .9rem; z-index: 2;
font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--inst-teal-bright);
}
.stack-map::after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3rem; pointer-events: none; z-index: 1;
background: linear-gradient(to right, rgba(11, 26, 46, 0), var(--inst-ink-2));
border-radius: 0 12px 12px 0;
}
}
.sm-zone { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--inst-text-muted); }
.sm-spine { stroke: var(--inst-line-strong); stroke-width: 1.4; fill: none; }
.sm-spine-head { fill: var(--inst-line-strong); }
.sm-tick { stroke: var(--inst-line-strong); stroke-width: 1.2; fill: none; }
.sm-num { font-family: var(--mono); font-size: 12px; font-weight: 500; fill: var(--inst-text-muted); }
.sm-row rect.sm-slab { stroke-width: 1.2; }
.sm-row[data-kind="external"] rect.sm-slab { fill: #0e2038; stroke: var(--inst-line-strong); }
.sm-row[data-kind="extension"] rect.sm-slab { fill: #0f2a52; stroke: #4f7fc4; }
.sm-row[data-kind="core"] rect.sm-slab { fill: #0d3a3c; stroke: var(--inst-teal); stroke-width: 2; }
.sm-row[data-kind="gap"] rect.sm-slab { fill: none; stroke: var(--inst-line-strong); stroke-dasharray: 6 4; }
.sm-name { font-family: var(--sans); font-size: 12.5px; font-weight: 650; fill: var(--inst-text-strong); }
.sm-purpose { font-family: var(--sans); font-size: 10.5px; fill: var(--inst-text); }
.sm-std { font-family: var(--mono); font-size: 10px; fill: #cfe2f7; }
.sm-chip rect { fill: transparent; stroke-width: 1; }
.sm-chip text { font-family: var(--mono); font-size: 8.25px; letter-spacing: .08em; text-transform: uppercase; }
.sm-chip[data-kind="external"] rect { stroke: var(--inst-line-strong); }
.sm-chip[data-kind="external"] text { fill: var(--inst-text-muted); }
.sm-chip[data-kind="extension"] rect { stroke: #4f7fc4; }
.sm-chip[data-kind="extension"] text { fill: #9cd9ff; }
.sm-chip[data-kind="core"] rect { stroke: var(--inst-teal); fill: rgba(85,217,203,.10); }
.sm-chip[data-kind="core"] text { fill: var(--inst-teal-bright); }
.sm-chip[data-kind="gap"] rect { stroke: var(--inst-amber); }
.sm-chip[data-kind="gap"] text { fill: var(--inst-amber); }
.sm-flow { stroke: var(--inst-line-strong); stroke-width: 1.4; fill: none; }
.sm-flow-head { fill: var(--inst-line-strong); }
.sm-evidence { font-family: var(--mono); font-size: 10.5px; fill: #cfe2f7; }
.sm-gapname { font-family: var(--sans); font-size: 11px; font-style: italic; fill: var(--inst-text); }
.sm-key { font-family: var(--sans); font-size: 10px; fill: var(--inst-text-muted); }
.sm-key-core { fill: var(--inst-teal); }
.sm-key-ext { fill: #4f7fc4; }
.sm-key-std { fill: var(--inst-line-strong); }
.sm-lamp { fill: var(--inst-line-strong); }
.sm-row.active .sm-lamp { fill: var(--inst-teal-bright); filter: drop-shadow(0 0 3px rgba(117, 236, 224, .8)); }
.sm-row[role="tab"] { cursor: pointer; }
.sm-row[role="tab"]:hover rect.sm-slab { filter: brightness(1.18); }
.sm-row.active rect.sm-slab { stroke: var(--inst-teal-bright); stroke-width: 2; }
.sm-row[role="tab"]:focus { outline: none; }
.sm-row[role="tab"]:focus-visible rect.sm-slab { stroke: #ffffff; stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
.sm-row rect.sm-slab { transition: filter 160ms var(--motion-ease), stroke 160ms var(--motion-ease); }
}
.stack-tabs { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1rem; }
.band-ink .stack-tabs .btn-ghost {
justify-content: flex-start;
color: #cfe2f7;
background: rgba(16, 38, 64, .55);
border: 1px solid var(--inst-line);
font-family: var(--mono);
font-size: .8125rem;
font-weight: 500;
letter-spacing: .01em;
}
.band-ink .stack-tabs .btn-ghost:hover { background: rgba(16, 38, 64, .95); border-color: var(--inst-line-strong); }
.band-ink .stack-tabs .btn-ghost.active { border-color: var(--inst-teal); color: var(--inst-teal-bright); background: rgba(85, 217, 203, .07); filter: none; }
.band-ink .stack-layer:hover, .band-ink .stack-layer.active { filter: none; }
.band-ink .stack-detail { background: var(--inst-ink-2); border: 1px solid var(--inst-line); }
.band-ink .stack-detail h3 { color: var(--inst-teal-bright); }
.band-ink .stack-detail .layer-tag { color: var(--inst-text-muted); }
.band-ink .stack-detail p { color: var(--inst-text); }
.band-ink .stack-detail .stack-links a { color: var(--inst-cobalt); }
.standards-strip {
display: flex;
flex-wrap: wrap;
gap: .5rem .6rem;
align-items: center;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--inst-line);
}
.standards-strip-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inst-text-muted); margin-right: .5rem; }
.standards-strip b {
display: inline-flex; flex-direction: column; gap: .05rem;
padding: .45rem .7rem; border: 1px solid var(--inst-line); border-radius: 6px;
background: rgba(11, 26, 46, .7); color: var(--inst-text-strong); font-weight: 600; font-size: .8125rem;
}
.standards-strip b small { font-weight: 400; font-size: .72rem; color: var(--inst-text-muted); }
.control-register .control-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.control-register .control-table thead th { background: var(--mist); padding: .7rem .9rem; opacity: .8; }
.control-register .control-table-id {
font-family: var(--mono); font-size: .8125rem; padding: .15rem .45rem;
border: 1px solid var(--line); border-radius: 4px; background: var(--mist); color: var(--ink);
}
.control-register .control-table-action {
font-family: var(--mono); display: inline-block; padding: .15rem .45rem; border-radius: 4px;
border: 1px solid var(--teal); color: var(--teal); font-weight: 500;
white-space: nowrap; overflow-wrap: normal;
}
.control-register .control-table-code { font-family: var(--mono); color: var(--ink-soft); }
@media (max-width: 900px) {
.control-register .control-table { border: 0; border-radius: 0; background: transparent; }
}
.trace {
border: 1px solid var(--inst-line);
border-radius: var(--radius);
background: var(--inst-ink-2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -24px rgba(0,0,0,.7);
overflow: hidden;
}
.trace-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem;
padding: .65rem 1rem; border-bottom: 1px solid var(--inst-line);
font-family: var(--mono); font-size: .75rem; color: var(--inst-text-muted);
}
.trace-bar code { color: #cfe2f7; }
.trace-bar .trace-live { display: inline-flex; align-items: center; gap: .4rem; color: var(--inst-teal-bright); }
.trace-bar .trace-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--inst-teal-bright); box-shadow: 0 0 6px rgba(117,236,224,.8); }
.trace-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trace-pane { min-width: 0; padding: 1rem 1.05rem 1.15rem; border-left: 1px solid var(--inst-line); position: relative; }
.trace-pane:first-child { border-left: 0; }
.trace-head {
display: flex; align-items: baseline; gap: .55rem; margin: 0 0 .75rem;
font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--inst-text-muted);
}
.trace-head b { color: var(--inst-teal-bright); font-weight: 600; }
.trace-head code { text-transform: none; letter-spacing: 0; color: #cfe2f7; }
.trace-code {
margin: 0; font-family: var(--mono); font-size: .78rem; line-height: 1.7; color: #cfe2f7;
white-space: pre; overflow-x: auto; tab-size: 2;
}
.trace-code code { font-family: inherit; white-space: pre; }
.tk-key { color: #8fb3d9; }
.tk-str { color: #a7e3d1; }
.tk-num { color: var(--inst-amber); }
.tk-null { color: #7f93a8; font-style: italic; }
.tk-act { color: var(--inst-teal-bright); font-weight: 600; }
.tk-crit { color: var(--inst-red); }
.tk-code { color: #dbe9ff; }
.tk-dim { color: var(--inst-text-muted); }
.trace-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.trace-steps::before { content: ""; position: absolute; left: .42rem; top: .55rem; bottom: .55rem; width: 1px; background: var(--inst-line-strong); }
.trace-step { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .55rem; align-items: start; padding: .36rem 0; position: relative; }
.st-dot { width: .85rem; height: .85rem; border-radius: 999px; margin-top: .22rem; border: 1.5px solid var(--inst-teal); background: var(--inst-ink-2); box-sizing: border-box; }
.trace-step[data-state="critical"] .st-dot { background: var(--inst-red); border-color: var(--inst-red); box-shadow: 0 0 0 3px rgba(255,170,164,.18); }
.st-id { font-family: var(--mono); font-size: .8rem; color: var(--inst-text-strong); font-weight: 500; }
.st-sev { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; margin-left: .45rem; color: var(--inst-text-muted); }
.trace-step[data-state="critical"] .st-sev { color: var(--inst-red); }
.st-reason { display: block; font-family: var(--mono); font-size: .72rem; color: #a9bdd3; overflow-wrap: anywhere; }
.st-action { display: block; font-family: var(--mono); font-size: .72rem; color: var(--inst-text-muted); }
.trace-step[data-state="critical"] .st-action { color: var(--inst-teal-bright); }
.trace-decision { display: grid; gap: .45rem; }
.trace-decision dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--inst-text-muted); margin: 0; }
.trace-decision dd { margin: 0 0 .35rem; font-family: var(--mono); font-size: .9rem; color: #cfe2f7; overflow-wrap: anywhere; }
.trace-decision dd.is-action { font-size: 1.35rem; font-weight: 600; color: var(--inst-teal-bright); letter-spacing: .01em; }
.trace-rule { margin: .8rem 0 0; font-size: .8125rem; line-height: 1.6; color: var(--inst-text-muted); }
.trace-pane::before {
content: ""; position: absolute; top: 50%; left: -7px; width: 12px; height: 12px;
background: var(--inst-ink-2); border-right: 1px solid var(--inst-line-strong); border-top: 1px solid var(--inst-line-strong);
transform: translateY(-50%) rotate(45deg);
}
.trace-pane:first-child::before { display: none; }
.trace-foot { padding: .8rem 1rem; border-top: 1px solid var(--inst-line); font-size: .875rem; line-height: 1.65; color: var(--inst-text); }
.trace-foot code { font-family: var(--mono); font-size: .8rem; color: #cfe2f7; }
@media (max-width: 1100px) {
.trace-grid { grid-template-columns: 1fr 1fr; }
.trace-pane:nth-child(3) { border-left: 0; }
.trace-pane:nth-child(n+3) { border-top: 1px solid var(--inst-line); }
.trace-pane:nth-child(3)::before { display: none; }
}
@media (max-width: 680px) {
.trace-grid { grid-template-columns: 1fr; }
.trace-pane { border-left: 0; border-top: 1px solid var(--inst-line); }
.trace-pane:first-child { border-top: 0; }
.trace-pane::before { display: none; }
}
.proof-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
gap: 1px;
margin-top: 2rem;
background: var(--inst-line);
border: 1px solid var(--inst-line);
border-radius: var(--radius);
overflow: hidden;
}
.proof-cell { background: var(--inst-ink-2); padding: 1.05rem 1.15rem 1.1rem; min-width: 0; }
.proof-value { display: block; font-family: var(--mono); font-size: 1.65rem; line-height: 1.1; color: var(--inst-text-strong); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.proof-label { display: block; margin-top: .35rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--inst-teal-bright); }
.proof-note { display: block; margin-top: .4rem; font-size: .8125rem; line-height: 1.5; color: var(--inst-text-muted); }
.proof-note a { color: var(--inst-cobalt); }
.proof-caption { margin: .8rem 0 0; font-size: .8125rem; color: var(--inst-text-muted); }
.record-note { margin: 1rem 0 0; font-size: .85rem; color: var(--body); }
.ledger { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.ledger > div { padding: 1.5rem 1.65rem; min-width: 0; }
.ledger > div + div { border-left: 1px solid var(--line); background: var(--mist); }
.ledger h2 { font-size: 1.1rem; margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; }
.ledger h2 .ledger-mark { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .18rem .45rem; border-radius: 4px; border: 1px solid currentColor; }
.ledger ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.ledger li { display: flex; gap: .75rem; align-items: baseline; color: var(--body); font-size: .95rem; line-height: 1.7; }
.ledger li > span:first-child { flex-shrink: 0; font-weight: 800; }
.ledger-is li > span:first-child { color: var(--teal); }
.ledger-not li > span:first-child { color: var(--ink-soft); }
@media (max-width: 760px) {
.ledger { grid-template-columns: 1fr; }
.ledger > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
.band-mist { background: var(--mist); }
.band-paper { background: var(--paper); }
@media (prefers-reduced-motion: reduce) {
.hero-instrument[data-figure-state="live"] > .iso { animation: none; }
.sm-row rect.sm-slab { transition: none; }
}
.film-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.film-tab {
font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
padding: .55rem .95rem; border: 1px solid var(--line); border-radius: 999px;
background: var(--paper); color: var(--body); cursor: pointer; line-height: 1;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.film-tab:hover { border-color: var(--teal); color: var(--teal); }
.film-tab.is-active { border-color: var(--teal); color: var(--teal); background: rgba(20, 184, 166, .09); }
.film-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
html:not(.js) .film-tabs { display: none; }
html:not(.js) .film[hidden] { display: block; }
.film-stage { display: grid; gap: 1.25rem; }
.film {
margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
background: var(--mist); box-shadow: 0 28px 56px -40px rgba(8, 42, 91, .4);
}
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #eef0f3; }
.film figcaption { padding: .9rem 1.15rem; font-size: .875rem; line-height: 1.65; color: var(--body); border-top: 1px solid var(--line); background: var(--paper); }
.film figcaption strong { color: var(--ink); }
.film-rules {
list-style: none; padding: 0; margin: 1.5rem 0 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .6rem;
}
.film-rules li { display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font-size: .9rem; line-height: 1.4; }
.film-rules li > span { font-weight: 700; color: var(--ink); }
.film-rules code { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--teal); white-space: normal; }
.hiw { display: none; }
.film-band.hiw-on .hiw { display: grid; gap: .75rem; }
.film-band.hiw-on .film-stage { display: none; }
.hiw-alt-film { display: none; margin: .75rem 0 0; }
.film-band:not(.hiw-on):not(.hiw-failed) .hiw-alt-film { display: block; }
.hiw-stage {
position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius);
border: 1px solid var(--line); background: #eef0f3; touch-action: pan-y; cursor: grab; outline: none;
user-select: none; -webkit-user-select: none;
}
.hiw-stage:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.hiw-stage.is-dragging { cursor: grabbing; }
.hiw-stage.is-over-station { cursor: pointer; }
.hiw-canvas { display: block; width: 100%; height: 100%; }
.hiw-labels { position: absolute; inset: 0; pointer-events: none; }
.hiw-loading {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: .875rem; color: #6b7891; background: #eef0f3;
}
.hiw-loading[hidden] { display: none; }
.hiw-hint {
position: absolute; left: .75rem; top: .75rem; margin: 0; padding: .35rem .65rem; border-radius: 999px;
font-size: .75rem; color: #4f5d78; background: rgba(255, 255, 255, .86); box-shadow: 0 0 0 1px rgba(36, 48, 73, .08);
pointer-events: none; transition: opacity .4s;
}
.hiw-hint.is-gone { opacity: 0; }
.hiw-reset {
position: absolute; right: .75rem; top: .75rem; padding: .35rem .7rem; border-radius: 999px; border: 0;
font: inherit; font-size: .75rem; font-weight: 600; color: #243049; background: rgba(255, 255, 255, .92);
box-shadow: 0 0 0 1px rgba(36, 48, 73, .1); cursor: pointer;
}
.hiw-reset[hidden] { display: none; }
.hiw-reset:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.hiw-pill, .hiw-tag { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.hiw-pill {
display: flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .3rem; border-radius: 999px;
background: rgba(255, 255, 255, .94); box-shadow: 0 10px 26px -14px rgba(36, 48, 73, .45), 0 0 0 1px rgba(36, 48, 73, .07);
}
.hiw-pill b {
display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px;
background: #e6e9ee; color: #6b7891; font-size: .78rem; font-weight: 700;
}
.hiw-pill.is-on b { background: #14b8a6; color: #fff; }
.hiw-pill.is-done b { background: #cfeee8; color: #0e9484; }
.hiw-pill em { display: block; font-style: normal; font-weight: 700; font-size: .82rem; line-height: 1.15; color: #1b2540; }
.hiw-pill small { display: block; margin-top: .1rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: #6b7891; }
.hiw-tag {
padding: .25rem .5rem; border-radius: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: #fff; background: #0e9484; box-shadow: 0 8px 18px -10px rgba(14, 148, 132, .7);
}
.hiw-tag.is-warn { background: #f5b840; color: #3b2a06; }
.hiw-tag.is-soft { background: rgba(255, 255, 255, .92); color: #6b7891; font-weight: 600; box-shadow: 0 0 0 1px rgba(36, 48, 73, .08); }
.hiw-stage.is-compact .hiw-pill { padding: .2rem; }
.hiw-stage.is-compact .hiw-pill span, .hiw-stage.is-compact .hiw-tag.is-soft, .hiw-stage.is-compact .hiw-hint { display: none; }
.hiw-stage.is-compact .hiw-pill b { width: 1.3rem; height: 1.3rem; font-size: .7rem; }
.hiw-stage.is-compact .hiw-tag { font-size: .58rem; padding: .18rem .35rem; }
.hiw-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.hiw-play {
flex: none; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
color: var(--ink); cursor: pointer; display: grid; place-items: center;
}
.hiw-play::before { content: ""; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.hiw-play.is-playing::before { margin: 0; width: 10px; height: 13px; border: 0; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.hiw-play:hover { border-color: var(--teal); color: var(--teal); }
.hiw-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; flex: none; }
.hiw-step {
min-width: 2.5rem; height: 2.5rem; padding: 0 .65rem; border-radius: 999px; border: 1px solid var(--line);
background: var(--paper); color: var(--body); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.hiw-step:hover { border-color: var(--teal); color: var(--teal); }
.hiw-step.is-done { color: var(--teal); background: rgba(20, 184, 166, .08); border-color: rgba(20, 184, 166, .35); }
.hiw-step.is-current { color: #fff; background: #0e9484; border-color: #0e9484; }
.hiw-play:focus-visible, .hiw-step:focus-visible, .hiw-switch:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.hiw-scrub {
flex: 1 1 10rem; min-width: 8rem; height: 2.5rem; margin: 0; background: transparent; accent-color: #0e9484; cursor: pointer;
}
.hiw-caption {
display: flex; gap: .9rem; align-items: flex-start; min-height: 6.2rem; padding: .9rem 1.1rem;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.hiw-n {
flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px;
background: #14b8a6; color: #fff; font-weight: 800;
}
.hiw-n[hidden] { display: none; }
.hiw-line { margin: 0; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink); }
.hiw-tell { margin: .3rem 0 0; color: var(--body); line-height: 1.6; max-width: 70ch; }
.hiw-id { margin: .45rem 0 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--teal); }
.hiw-id[hidden] { display: none; }
.hiw-alt { margin: 0; }
.hiw-switch {
padding: 0; border: 0; background: none; font: inherit; font-size: .875rem; color: var(--teal);
text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
@media (max-width: 640px) {
.hiw-steps { order: 3; flex: 1 1 100%; justify-content: space-between; }
.hiw-step { min-width: 2.25rem; height: 2.25rem; padding: 0 .4rem; }
.hiw-caption { padding: .8rem .9rem; }
.hiw-line { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .hiw-hint { transition: none; } }
/* /assets/css/drafting.css */
:root {
--display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
--font-display: var(--display);
--radius: 3px;
--radius-lg: 3px;
--dr-rule: rgba(13, 40, 70, 0.075);
--dr-rule-ink: rgba(176, 205, 235, 0.10);
--dr-gap: 2px;
--dr-accent: #14778f;
--dr-accent-hover: #0f5f73;
--dr-navy: #0d2846;
--dr-navy-2: #17406a;
--dr-tag-line: rgba(13, 40, 70, 0.28);
--dr-cols: 25%;
--dr-width: min(100% - 2rem, 1320px);
}
[data-theme="dark"] {
--dr-rule: rgba(160, 195, 230, 0.07);
--dr-rule-ink: rgba(160, 195, 230, 0.08);
--dr-tag-line: rgba(160, 195, 230, 0.32);
--dr-navy: #0e2340;
--dr-navy-2: #143456;
}
@media (max-width: 720px) { :root { --dr-cols: 50%; } }
h1, h2, h3, h4,
.inner-hero h1, .page-doc .inner-hero h1, .page-doc .inner-hero .page-heading,
.brand strong {
font-family: var(--display);
}
h1 { font-weight: 400; letter-spacing: -0.035em; }
h2 { font-weight: 400; letter-spacing: -0.025em; }
h3, h4 { font-weight: 500; letter-spacing: -0.015em; }
.hero-band h1 { font-weight: 400; letter-spacing: -0.04em; line-height: 1.02; }
.inner-hero h1, .page-doc .inner-hero h1, .page-doc .inner-hero .page-heading { font-weight: 400; letter-spacing: -0.035em; }
.act-head h2, .cta-band h2, .page-doc .page-close .closing-panel h2 {
font-size: clamp(1.75rem, 3.1vw, 2.75rem); line-height: 1.08; font-weight: 400; letter-spacing: -0.03em;
}
.band-ink::before, .hero-band::before, .hero-band.band-ink::before, .page-doc .inner-hero::before { display: none; }
.band-ink, .page-doc .inner-hero, .site-footer {
background-image:
repeating-linear-gradient(to right, var(--dr-rule-ink) 0 1px, transparent 1px var(--dr-cols)),
linear-gradient(to left, var(--dr-rule-ink) 0 1px, transparent 1px);
background-size: var(--dr-width) 100%, var(--dr-width) 100%;
background-position: center top, center top;
background-repeat: no-repeat;
}
@media (min-width: 900px) {
.page-section.band-paper, .page-section.band-mist, .inner-hero:not(.band-ink) {
background-image:
repeating-linear-gradient(to right, var(--dr-rule) 0 1px, transparent 1px var(--dr-cols)),
linear-gradient(to left, var(--dr-rule) 0 1px, transparent 1px);
background-size: var(--dr-width) 100%, var(--dr-width) 100%;
background-position: center top, center top;
background-repeat: no-repeat;
}
.page-doc .inner-hero {
background-image:
repeating-linear-gradient(to right, var(--dr-rule-ink) 0 1px, transparent 1px var(--dr-cols)),
linear-gradient(to left, var(--dr-rule-ink) 0 1px, transparent 1px);
}
}
.site-header { backdrop-filter: none; background: var(--paper); border-bottom: 1px solid var(--line); }
[data-theme="dark"] .site-header { background: var(--mist); }
.brand strong { font-weight: 500; letter-spacing: -0.02em; }
.nav-links a, .nav-dropdown-trigger {
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.primary-pill {
background: var(--dr-accent); color: #fff; box-shadow: none; border-radius: 999px;
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.primary-pill:hover { background: var(--dr-accent-hover); color: #fff; box-shadow: none; transform: none; }
.section-kicker, .page-doc .act-head .section-kicker, .page-doc .inner-hero .section-kicker,
.page-doc .page-close .closing-panel .section-kicker {
display: inline-flex; align-items: center; width: max-content; max-width: 100%;
padding: 0.32rem 0.72rem; border: 1px solid var(--dr-tag-line); border-radius: 999px;
font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.2;
text-transform: uppercase; color: var(--ink);
}
.band-ink .section-kicker, .page-doc .inner-hero .section-kicker, .page-doc .page-close .closing-panel .section-kicker,
.hero-band .section-kicker {
color: var(--inst-text-strong); border-color: rgba(220, 235, 250, 0.28);
}
.act-index { border-radius: 999px; border-color: var(--dr-tag-line); }
.control-card-id { border-radius: 999px; background: transparent; border-color: var(--dr-tag-line); }
.action-button, .cta-button {
border-radius: 999px; box-shadow: none; transform: none;
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.action-button:hover, .cta-button:hover { transform: none; box-shadow: none; }
.action-button-primary, .cta-button, .page-doc .band-ink .cta-button {
background: var(--dr-accent); color: #fff; border-color: var(--dr-accent);
}
.action-button-primary:hover, .cta-button:hover, .page-doc .band-ink .cta-button:hover {
background: var(--dr-accent-hover); border-color: var(--dr-accent-hover); color: #fff;
}
.action-button-secondary { background: transparent; border-color: var(--dr-tag-line); color: var(--ink); }
.band-ink .action-button-secondary, .band-ink .cta-button-secondary {
background: transparent; color: var(--inst-text-strong); border: 1px solid rgba(220, 235, 250, 0.32);
}
.band-ink .action-button-secondary:hover, .band-ink .cta-button-secondary:hover {
border-color: var(--inst-text-strong); color: #fff; background: transparent;
}
.card-grid, .pathway-grid, .flow { gap: var(--dr-gap); }
.content-card, .card, .module-card, .download-card, .faq-item, .pilot-card, .guarantee-card,
.page-cta-card, .pathway-card, .control-card, .flow-step, .ledger, .callout, .hero-notice, .note,
.page-doc .content-card, .page-doc .download-card, .page-doc .faq-item, .page-doc .pilot-card,
.page-doc .guarantee-card, .page-doc .page-cta-card, .page-doc .card, .page-doc .module-card,
.page-doc .page-close .page-cta-card {
border-radius: var(--radius); box-shadow: none;
}
.page-doc .content-card:hover, .page-doc .download-card:hover, .page-doc .page-cta-card:hover, .page-doc .card:hover,
.content-card:hover {
transform: none; box-shadow: none; border-color: var(--dr-accent);
}
.page-doc .card-grid { gap: var(--dr-gap); }
.pathway-grid { margin-top: 2rem; }
.pathway-card {
display: flex; flex-direction: column; min-height: 19rem; padding: 1.6rem 1.6rem 1.5rem;
border: 0; border-radius: var(--radius); background: var(--dr-navy); color: #d6e3f1;
}
.pathway-card + .pathway-card { background: var(--dr-navy-2); }
.pathway-card.is-enterprise { background: var(--dr-accent); }
.pathway-card h3 { color: #fff; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; margin: auto 0 0.5rem; }
.pathway-card > p { color: #d6e3f1; }
.pathway-card .section-kicker { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.pathway-card .cta-button { align-self: flex-start; background: #fff; color: var(--dr-navy); border-color: #fff; }
.pathway-card .cta-button:hover { background: #e6eef6; color: var(--dr-navy); border-color: #e6eef6; }
.control-card { border: 0; padding: 1.4rem 1.3rem 1.25rem; gap: 0.7rem; }
.control-card-name { font-family: var(--display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.015em; }
.control-card-rule { padding-top: 0.7rem; border-top: 1px solid var(--line); }
.control-card-not { margin-top: 0; }
.flow-step { border: 0; padding: 1.15rem 1.1rem; }
.flow-step::after { display: none; }
.band-paper .flow-step, .band-paper .control-card { background: var(--mist); }
.band-mist .flow-step, .band-mist .control-card { background: var(--paper); }
.ledger { gap: var(--dr-gap); border: 0; background: transparent; }
.ledger > div { background: var(--mist); }
.ledger > div + div { border-left: 0; background: var(--mist); }
.band-mist .ledger > div { background: var(--paper); }
.cta-band h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.page-doc .page-close .closing-panel { border-radius: var(--radius); box-shadow: none; }
.site-footer, [data-theme="dark"] .site-footer {
background-color: var(--inst-ink); border-top: 0; color: var(--inst-text); padding-block: 3rem 0; overflow: hidden;
}
[data-theme="dark"] .site-footer { background-color: #050c17; }
.footer-inner, [data-theme="dark"] .footer-inner { color: var(--inst-text-muted); }
.footer-inner a, [data-theme="dark"] .footer-inner a { color: var(--inst-text-strong); }
.footer-inner a:hover { color: var(--inst-teal-bright); }
.footer-inner > div a {
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.footer-copy .footer-demo-note, [data-theme="dark"] .footer-demo-note { color: var(--inst-text-muted); }
.footer-wordmark {
margin-top: 2.5rem; padding-bottom: 0.5rem;
font-family: var(--display); font-weight: 500; letter-spacing: -0.05em; line-height: 0.78;
font-size: clamp(3rem, 12.6vw, 10.75rem); white-space: nowrap; color: #17365a;
user-select: none;
}
[data-theme="dark"] .footer-wordmark { color: #0f2744; }
.band-ink p.section-kicker, .cta-band p.section-kicker, .pathway-card > p.section-kicker,
.page-doc .band-ink p.section-kicker, .hero-band .meta-label {
font-size: 0.66rem; line-height: 1.2; letter-spacing: 0.12em; margin: 0 0 0.9rem;
}
.hero-band .meta-label {
display: inline-flex; width: max-content; max-width: 100%; padding: 0.32rem 0.72rem;
border: 1px solid rgba(220, 235, 250, 0.28); border-radius: 999px;
font-family: var(--sans); font-weight: 600; text-transform: uppercase; color: var(--inst-text-strong);
}
.ledger h3 .ledger-mark, .ledger h2 .ledger-mark {
display: inline-flex; padding: 0.18rem 0.55rem; border: 1px solid var(--dr-tag-line); border-radius: 999px;
font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--teal);
}
.ledger h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.15rem; margin: 0 0 1rem; }
.page-doc .inner-hero .meta-label {
display: inline-flex; width: max-content; max-width: 100%; padding: 0.32rem 0.72rem;
border: 1px solid rgba(220, 235, 250, 0.28); border-radius: 999px;
font-size: 0.66rem; letter-spacing: 0.12em; line-height: 1.2; color: var(--inst-text-strong);
}
.closing-button, .page-doc .page-close .closing-button {
background: var(--dr-accent); color: #fff; border-radius: 999px; box-shadow: none; transform: none;
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.closing-button:hover, .page-doc .page-close .closing-button:hover { background: var(--dr-accent-hover); color: #fff; transform: none; box-shadow: none; }
.page-doc .page-close .card-grid { gap: var(--dr-gap); }
.pathway-card.is-enterprise, .pathway-card.is-enterprise > p { color: #fff; }
.pathway-card h3 { margin: 3rem 0 0.5rem; }
.pathway-card .cta-button { margin-top: auto; }