:root {
    color-scheme: dark;
    --bg: #07090d;
    --surface: #0d1118;
    --surface-2: #111722;
    --surface-3: #171e2b;
    --border: #202938;
    --border-soft: #18202c;
    --text: #f2f5f9;
    --text-soft: #b1bdcc;
    --muted: #728094;
    --dim: #4b5667;
    --accent: #7c6df2;
    --accent-2: #a996ff;
    --accent-soft: rgba(124, 109, 242, 0.13);
    --cyan: #56c8e8;
    --cyan-soft: rgba(86, 200, 232, 0.11);
    --positive: #36d4a2;
    --positive-soft: rgba(54, 212, 162, 0.11);
    --negative: #ff6b81;
    --negative-soft: rgba(255, 107, 129, 0.11);
    --amber: #f4b860;
    --amber-soft: rgba(244, 184, 96, 0.1);
    --topbar: 68px;
    --sidebar: 232px;
    --radius: 14px;
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text);
    background: radial-gradient(circle at 70% -10%, rgba(124, 109, 242, 0.08), transparent 30rem), var(--bg);
    font-family: "DM Sans", Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input { color: inherit; font: inherit; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
code, .eyebrow, .section-kicker, .panel-eyebrow { font-family: "IBM Plex Mono", monospace; }
::selection { color: #fff; background: rgba(124, 109, 242, 0.55); }

.skip-link { position: fixed; top: -60px; left: 16px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: var(--accent); }
.skip-link:focus { top: 10px; }

.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--topbar);
    display: grid;
    grid-template-columns: var(--sidebar) minmax(230px, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(7, 9, 13, 0.91);
    backdrop-filter: blur(22px);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(124, 109, 242, 0.23)); }
.brand-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: .96rem; }
.brand-copy span { margin-top: 5px; color: var(--accent-2); font: 500 .63rem/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.environment { justify-self: start; display: flex; align-items: center; gap: 10px; }
.environment > span:last-child { display: flex; flex-direction: column; }
.environment strong { font-size: .78rem; font-weight: 600; }
.environment small { margin-top: 2px; color: var(--muted); font-size: .69rem; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 5px var(--positive-soft); }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.product-link, .back-link { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); font-size: .75rem; transition: .2s ease; }
.back-link svg { width: 15px; height: 15px; }
.product-link:hover, .back-link:hover { color: var(--text); border-color: #354258; background: var(--surface-2); }

.app-shell { min-height: 100vh; padding-top: var(--topbar); }
.sidebar {
    position: fixed;
    inset: var(--topbar) auto 0 0;
    z-index: 50;
    width: var(--sidebar);
    display: flex;
    flex-direction: column;
    padding: 22px 14px 18px;
    border-right: 1px solid var(--border);
    background: rgba(9, 12, 17, .88);
}
.side-nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: 9px; color: var(--muted); background: transparent; font-size: .82rem; text-align: left; cursor: pointer; transition: .18s ease; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover { color: var(--text-soft); background: var(--surface-2); }
.nav-item.is-active { color: #fff; background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent); }
.sidebar-card { margin-top: auto; padding: 15px; border: 1px solid var(--border); border-radius: 11px; background: linear-gradient(145deg, var(--surface-2), rgba(124, 109, 242, .04)); }
.eyebrow { color: var(--muted); font-size: .57rem; letter-spacing: .12em; text-transform: uppercase; }
.level-row { display: flex; align-items: baseline; gap: 8px; margin: 9px 0; }
.level-row strong { color: var(--accent-2); font: 600 1.35rem/1 "IBM Plex Mono", monospace; }
.level-row span { color: var(--text-soft); font-size: .75rem; }
.level-track { height: 4px; overflow: hidden; border-radius: 99px; background: #232b38; }
.level-track span { display: block; width: 10%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.sidebar-card small { display: block; margin-top: 10px; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.sidebar-footer { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 0 5px; color: var(--muted); }
.lock-icon { flex: 0 0 auto; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: var(--negative); background: var(--negative-soft); }
.lock-icon svg { width: 14px; height: 14px; }
.sidebar-footer p { margin: 0; font-size: .62rem; line-height: 1.48; }
.sidebar-footer strong { color: var(--text-soft); }

.main-content { margin-left: var(--sidebar); padding: 38px clamp(22px, 4vw, 58px) 70px; }
.view-panel { width: 100%; max-width: 1400px; margin: 0 auto; animation: fade-in .25s ease; }
.view-panel[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
.page-heading > div:first-child { max-width: 850px; }
.section-kicker, .panel-eyebrow { color: var(--accent-2); font-size: .64rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.page-heading h1 { max-width: 800px; margin: 8px 0 10px; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.08; letter-spacing: -.035em; }
.page-heading p { max-width: 800px; margin: 0; color: var(--text-soft); font-size: .94rem; line-height: 1.6; }
.page-heading.compact h1 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); }
.mode-badge { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 11px; border: 1px solid rgba(54, 212, 162, .25); border-radius: 99px; color: var(--positive); background: var(--positive-soft); font: 500 .65rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.mode-badge span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.truth-banner { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid rgba(86, 200, 232, .18); border-radius: 10px; color: var(--text-soft); background: var(--cyan-soft); }
.truth-banner svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--cyan); }
.truth-banner p { margin: 0; font-size: .75rem; line-height: 1.55; }
.truth-banner strong { color: var(--text); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi-card { min-width: 0; padding: 17px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(150deg, var(--surface-2), var(--surface)); }
.kpi-label { display: block; color: var(--muted); font-size: .68rem; }
.kpi-card strong { display: block; margin: 7px 0 3px; font: 600 1.35rem/1.1 "IBM Plex Mono", monospace; letter-spacing: -.03em; }
.kpi-card strong.positive { color: var(--positive); font-size: 1.08rem; }
.kpi-card small { color: var(--muted); font-size: .63rem; }

.panel { border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, rgba(17, 23, 34, .92), rgba(13, 17, 24, .92)); box-shadow: 0 1px 0 rgba(255,255,255,.02); }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-header h2 { margin: 4px 0 0; font-size: 1rem; }
.version-pill { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font: .58rem/1 "IBM Plex Mono", monospace; }
.pipeline-panel { margin-bottom: 14px; padding: 19px; }
.pipeline { display: grid; grid-template-columns: 1fr auto 1.15fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 9px; margin-top: 18px; }
.pipeline > i { align-self: center; color: var(--dim); font-style: normal; }
.pipeline-step { position: relative; padding: 13px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.pipeline-step span { display: block; color: var(--muted); font: 500 .55rem/1 "IBM Plex Mono", monospace; }
.pipeline-step strong { display: block; margin: 13px 0 3px; font-size: .76rem; }
.pipeline-step small { color: var(--muted); font-size: .61rem; }
.pipeline-step::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--dim); }
.pipeline-step.done::after { background: var(--positive); }
.pipeline-step.done span { color: var(--positive); }
.pipeline-step.partial::after { background: var(--amber); }
.pipeline-step.partial span { color: var(--amber); }
.pipeline-step.locked { opacity: .62; }

.track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.track-card { padding: 19px; }
.track-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.track-letter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--accent-2); background: var(--accent-soft); font: 600 .72rem/1 "IBM Plex Mono", monospace; }
.track-letter.secondary { color: var(--cyan); background: var(--cyan-soft); }
.status { display: inline-flex; align-items: center; padding: 5px 8px; border: 1px solid currentColor; border-radius: 99px; font: 500 .56rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; white-space: nowrap; }
.status.ready { color: var(--positive); background: var(--positive-soft); border-color: rgba(54, 212, 162, .22); }
.status.pending { color: var(--amber); background: var(--amber-soft); border-color: rgba(244, 184, 96, .22); }
.status.blocked { color: var(--negative); background: var(--negative-soft); border-color: rgba(255, 107, 129, .22); }
.status.sandbox { color: var(--cyan); background: var(--cyan-soft); border-color: rgba(86, 200, 232, .22); }
.track-card h2 { margin: 15px 0 6px; font-size: 1.05rem; }
.track-card > p { margin: 0; color: var(--text-soft); font-size: .75rem; line-height: 1.55; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 16px 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 16px; color: var(--muted); font-size: .68rem; }
.check-list li::before { content: "○"; position: absolute; left: 0; color: var(--dim); }
.check-list li.done { color: var(--text-soft); }
.check-list li.done::before { content: "✓"; color: var(--positive); }
.check-list li.partial { color: var(--text-soft); }
.check-list li.partial::before { content: "~"; color: var(--amber); }
.text-button { padding: 0; color: var(--accent-2); background: transparent; font-size: .7rem; cursor: pointer; }
.text-button span { margin-left: 4px; }
.text-button:hover { color: #c4baff; }
.principles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.principle { padding: 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(13, 17, 24, .65); }
.principle span { color: var(--accent-2); font: 500 .56rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.principle strong { display: block; margin-top: 8px; font-size: .68rem; line-height: 1.4; }

/* Pipeline visual */
.pipeline-legend { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: .65rem; }
.pipeline-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); }
.pipeline-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.pipeline-legend .legend-done i { background: var(--positive); box-shadow: 0 0 0 3px var(--positive-soft); }
.pipeline-legend .legend-partial i { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.pipeline-legend .legend-locked i { background: var(--negative); box-shadow: 0 0 0 3px var(--negative-soft); }

.pipeline-lane { padding: 20px; margin-bottom: 14px; }
.lane-header { align-items: flex-start; }
.lane-header > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lane-header .track-letter { flex: 0 0 auto; }
.lane-header .panel-eyebrow { flex: 1 1 auto; min-width: 180px; margin-top: 4px; }
.lane-header h2 { width: 100%; margin: 8px 0 0 42px; font-size: 1.05rem; }

.pipeline-flow { display: flex; align-items: stretch; gap: 8px; margin-top: 22px; padding: 6px 2px; overflow-x: auto; }
.pipeline-stage { position: relative; flex: 1 1 0; min-width: 180px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); transition: .18s ease; }
.pipeline-stage:hover { border-color: var(--border); transform: translateY(-2px); }
.pipeline-stage h3 { margin: 10px 0 12px; font-size: .82rem; }
.stage-status { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--dim); }
.pipeline-stage.done .stage-status { background: var(--positive); box-shadow: 0 0 0 3px var(--positive-soft); }
.pipeline-stage.partial .stage-status { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.pipeline-stage.locked .stage-status { background: var(--negative); box-shadow: 0 0 0 3px var(--negative-soft); }
.pipeline-stage.locked { opacity: .75; }
.pipeline-stage.locked h3 { color: var(--text-soft); }

.io-block { padding: 10px; border-radius: 8px; background: rgba(0,0,0,.18); }
.io-block + .io-block { margin-top: 8px; }
.io-label { display: block; margin-bottom: 6px; color: var(--muted); font: 600 .5rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; }
.io-block ul { margin: 0; padding-left: 14px; color: var(--text-soft); font-size: .62rem; line-height: 1.45; }
.io-block li + li { margin-top: 3px; }
.output-block .io-label { color: var(--accent-2); }
.output-block { border-left: 2px solid var(--accent); }
.pipeline-stage.done .output-block { border-left-color: var(--positive); }
.pipeline-stage.partial .output-block { border-left-color: var(--amber); }
.pipeline-stage.locked .output-block { border-left-color: var(--negative); }

.stage-arrow { flex: 0 0 auto; align-self: center; color: var(--dim); font-size: 1.1rem; }
.stage-lock { position: absolute; inset: auto 10px 10px auto; padding: 3px 6px; border-radius: 5px; color: var(--negative); background: var(--negative-soft); font: 500 .5rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }

.governance-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.governance-block { padding: 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); }
.governance-block strong { display: block; font-size: .72rem; }
.governance-block small { display: block; margin: 6px 0; color: var(--muted); font-size: .6rem; line-height: 1.45; }
.governance-io { display: block; color: var(--accent-2); font: 500 .55rem/1.4 "IBM Plex Mono", monospace; }

.cross-lane .truth-banner { margin-top: 18px; margin-bottom: 0; }

.data-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 14px; margin-bottom: 14px; }
.timeline-panel, .integrity-panel, .source-panel { padding: 20px; }
.event-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 27px; }
.event-timeline::before { content: ""; position: absolute; top: 5px; left: 3%; right: 3%; height: 1px; background: linear-gradient(90deg, var(--dim), var(--accent)); }
.time-event { position: relative; padding: 19px 12px 0 0; }
.time-dot { position: absolute; top: 0; left: 0; width: 11px; height: 11px; border: 2px solid var(--surface); border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 2px var(--dim); }
.time-event.active .time-dot { background: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 18px var(--accent); }
.time-event small { display: block; color: var(--accent-2); font: .53rem/1.3 "IBM Plex Mono", monospace; overflow-wrap: anywhere; }
.time-event strong { display: block; margin: 7px 0 4px; font-size: .68rem; }
.time-event p { margin: 0; color: var(--muted); font-size: .6rem; line-height: 1.45; }
.integrity-visual { display: flex; align-items: center; gap: 12px; margin: 19px 0 15px; padding: 13px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); }
.hash-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--positive); background: var(--positive-soft); font: 600 1rem/1 "IBM Plex Mono", monospace; }
.integrity-visual strong, .integrity-visual code { display: block; }
.integrity-visual strong { font-size: .7rem; }
.integrity-visual code { margin-top: 3px; color: var(--muted); font-size: .55rem; }
.fact-list { margin: 0; }
.fact-list div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-soft); font-size: .62rem; }
.fact-list dt { color: var(--muted); }
.fact-list dd { margin: 0; color: var(--text-soft); }
.source-panel { margin-bottom: 14px; }
.source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.source-grid > div { padding: 15px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); }
.source-icon { display: grid; place-items: center; width: 35px; height: 35px; margin-bottom: 12px; border-radius: 8px; color: var(--cyan); background: var(--cyan-soft); font: 600 .58rem/1 "IBM Plex Mono", monospace; }
.source-grid strong, .source-grid small, .source-grid i { display: block; }
.source-grid strong { font-size: .72rem; }
.source-grid small { margin: 4px 0 13px; color: var(--muted); font-size: .62rem; }
.source-grid i { color: var(--amber); font: normal 500 .55rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.local-command { margin-top: 14px; padding: 20px; }
.local-command code { display: block; margin: 13px 0 8px; padding: 13px; overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 8px; color: var(--cyan); background: var(--surface); font-size: .65rem; white-space: nowrap; }
.local-command p { margin: 0; color: var(--muted); font-size: .64rem; line-height: 1.5; }
.gate-callout { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid rgba(255, 107, 129, .18); border-radius: 10px; background: var(--negative-soft); }
.gate-callout strong { flex: 0 0 auto; color: var(--negative); font: 600 .63rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.gate-callout span { color: var(--text-soft); font-size: .7rem; }

.experiment-summary { display: grid; grid-template-columns: .78fr 1.22fr; gap: 14px; margin-bottom: 14px; }
.experiment-empty, .manifest-card, .gates-panel { padding: 20px; }
.experiment-empty { text-align: center; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 13px; border-radius: 13px; color: var(--accent-2); background: var(--accent-soft); }
.empty-icon svg { width: 23px; height: 23px; }
.experiment-empty h2 { margin: 9px 0 6px; font-size: 1rem; }
.experiment-empty p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.panel-lead { margin: 0; color: var(--text-soft); font-size: .78rem; line-height: 1.55; }
.honesty-label { display: inline-block; margin-top: 13px; padding: 5px 8px; border-radius: 6px; color: var(--positive); background: var(--positive-soft); font: 500 .55rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.manifest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 19px; }
.manifest-grid span { position: relative; padding: 11px 10px 11px 25px; border: 1px solid var(--border-soft); border-radius: 8px; color: var(--text-soft); background: var(--surface); font-size: .62rem; }
.manifest-grid span::before { content: "✓"; position: absolute; left: 10px; color: var(--positive); }
.gates-panel { margin-bottom: 14px; }
.promotion-ladder { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 9px; margin-top: 19px; }
.promotion-ladder > i { color: var(--dim); font-style: normal; }
.promotion { padding: 12px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface); }
.promotion span, .promotion strong, .promotion small { display: block; }
.promotion span { color: var(--muted); font: 600 .56rem/1 "IBM Plex Mono", monospace; }
.promotion strong { margin: 9px 0 2px; font-size: .7rem; }
.promotion small { color: var(--muted); font-size: .56rem; }
.promotion.active { border-color: rgba(124, 109, 242, .38); background: var(--accent-soft); }
.promotion.active span { color: var(--accent-2); }
.gate-note { margin: 14px 0 0; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.llm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.allow-card, .deny-card { padding: 18px; border: 1px solid; border-radius: var(--radius); }
.allow-card { border-color: rgba(54, 212, 162, .2); background: var(--positive-soft); }
.deny-card { border-color: rgba(255, 107, 129, .2); background: var(--negative-soft); }
.allow-card > span, .deny-card > span { font: 600 .62rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.allow-card > span { color: var(--positive); }
.deny-card > span { color: var(--negative); }
.allow-card ul, .deny-card ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 14px 0 0; padding-left: 17px; color: var(--text-soft); font-size: .67rem; }

.calculator-grid, .risk-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-bottom: 14px; }
.calculator-form, .result-card, .risk-result, .backtest-capabilities { padding: 20px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 19px 0; }
.field-grid.three { grid-template-columns: repeat(3, 1fr); }
.field-grid label > span { display: block; margin-bottom: 6px; color: var(--text-soft); font-size: .65rem; }
.input-unit { position: relative; }
.input-unit input { width: 100%; height: 40px; padding: 0 48px 0 11px; outline: 0; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface); font: 500 .75rem/1 "IBM Plex Mono", monospace; transition: .18s ease; }
.input-unit input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-unit i { position: absolute; right: 11px; top: 50%; color: var(--muted); font: normal .58rem/1 "IBM Plex Mono", monospace; transform: translateY(-50%); pointer-events: none; }
.button-primary { padding: 10px 15px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, var(--accent), #6556d9); box-shadow: 0 8px 24px rgba(124,109,242,.18); font-size: .69rem; font-weight: 600; cursor: pointer; transition: .18s ease; }
.button-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(124,109,242,.28); }
.result-card { position: relative; overflow: hidden; }
.result-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -70px; border-radius: 50%; background: var(--positive-soft); filter: blur(2px); pointer-events: none; }
.result-main { position: relative; z-index: 1; padding: 24px 0 18px; border-bottom: 1px solid var(--border-soft); }
.result-main span, .result-main small { display: block; color: var(--muted); font-size: .65rem; }
.result-main strong { display: block; margin: 5px 0; color: var(--positive); font: 600 2rem/1.1 "IBM Plex Mono", monospace; letter-spacing: -.04em; }
.result-main strong.negative { color: var(--negative); }
.result-bars { display: grid; gap: 10px; padding: 15px 0; }
.result-bars div { display: flex; justify-content: space-between; gap: 12px; font-size: .68rem; }
.result-bars span { color: var(--muted); }
.result-bars strong { font-family: "IBM Plex Mono", monospace; font-size: .64rem; }
.result-disclaimer { margin: 0; padding-top: 12px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: .59rem; line-height: 1.5; }
.table-scroll { position: relative; z-index: 1; overflow-x: auto; margin: 4px 0 16px; }
.verdict-table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: .66rem; }
.verdict-table caption { padding-bottom: 12px; color: var(--muted); font-size: .59rem; line-height: 1.5; text-align: left; }
.verdict-table th, .verdict-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); text-align: right; }
.verdict-table thead th { color: var(--muted); font-weight: 500; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.verdict-table tbody th { color: var(--text-soft); font-weight: 500; text-align: left; }
.verdict-table tbody th em { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-2); font-size: .54rem; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.verdict-table td { font-family: "IBM Plex Mono", monospace; color: var(--text); }
.verdict-table tbody tr:last-child th, .verdict-table tbody tr:last-child td { border-bottom: 0; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.capability-grid > div { position: relative; padding: 12px 12px 12px 29px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface); }
.capability-grid > div::before { content: "✓"; position: absolute; left: 11px; color: var(--positive); font-size: .65rem; }
.capability-grid strong, .capability-grid small { display: block; }
.capability-grid strong { font-size: .67rem; }
.capability-grid small { margin-top: 3px; color: var(--muted); font-size: .58rem; }

.policy-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--border); }
.policy-strip div { padding: 13px; background: var(--surface); }
.policy-strip span, .policy-strip strong { display: block; }
.policy-strip span { color: var(--muted); font-size: .57rem; }
.policy-strip strong { margin-top: 5px; color: var(--accent-2); font: 600 .75rem/1 "IBM Plex Mono", monospace; }
.check-row { display: flex; gap: 19px; margin: -2px 0 18px; }
.check-row label { display: flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: .64rem; cursor: pointer; }
.check-row input { width: 15px; height: 15px; accent-color: var(--accent); }
.risk-result { display: flex; flex-direction: column; align-items: center; text-align: center; }
.decision-orb { display: grid; place-items: center; width: 52px; height: 52px; margin: 4px 0 14px; border: 1px solid rgba(54,212,162,.25); border-radius: 50%; color: var(--positive); background: var(--positive-soft); box-shadow: 0 0 35px rgba(54,212,162,.08); }
.decision-orb svg { width: 25px; height: 25px; }
.risk-result.blocked .decision-orb { color: var(--negative); border-color: rgba(255,107,129,.25); background: var(--negative-soft); box-shadow: 0 0 35px rgba(255,107,129,.08); }
.decision-title { margin: 7px 0 3px; color: var(--positive); font: 600 1.45rem/1 "IBM Plex Mono", monospace; }
.risk-result.blocked .decision-title { color: var(--negative); }
.risk-result > p:not(.result-disclaimer) { min-height: 30px; margin: 4px 0 15px; color: var(--text-soft); font-size: .67rem; }
.risk-facts { width: 100%; margin: 0 0 15px; }
.risk-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-soft); font-size: .65rem; }
.risk-facts dt { color: var(--muted); }
.risk-facts dd { margin: 0; font-family: "IBM Plex Mono", monospace; }

.progress-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.roadmap-progress { padding: 16px 18px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.roadmap-progress > div:first-child { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 10px; font-size: .68rem; }
.roadmap-progress span { color: var(--muted); }
.roadmap-progress strong { font-size: .7rem; }
.progress-track { height: 6px; overflow: hidden; border-radius: 99px; background: #222a37; }
.progress-track span { display: block; width: 85%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--cyan)); }
.progress-track.overall span { width: 25%; }
.roadmap-progress small { display: block; margin-top: 8px; color: var(--muted); font-size: .57rem; }
.roadmap-list { display: grid; gap: 10px; margin-bottom: 14px; }
.roadmap-phase { padding: 15px 18px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(13,17,24,.72); }
.roadmap-phase header { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 12px; }
.roadmap-phase header > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: var(--muted); background: var(--surface-3); font: 600 .59rem/1 "IBM Plex Mono", monospace; }
.roadmap-phase small { color: var(--muted); font: .53rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.roadmap-phase h2 { margin: 4px 0 0; font-size: .82rem; }
.roadmap-phase i { color: var(--muted); font: normal 500 .55rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.roadmap-phase p { margin: 10px 0 0 47px; color: var(--muted); font-size: .65rem; }
.roadmap-phase.complete { border-color: rgba(54,212,162,.15); }
.roadmap-phase.complete header > span, .roadmap-phase.complete i { color: var(--positive); background: var(--positive-soft); }
.roadmap-phase.active { border-color: rgba(244,184,96,.28); background: var(--amber-soft); }
.roadmap-phase.active header > span, .roadmap-phase.active i { color: var(--amber); background: var(--amber-soft); }
.next-actions { padding: 20px; }
.next-actions ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.next-actions li { padding: 12px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface); }
.next-actions li > span { color: var(--accent-2); font: 600 .54rem/1 "IBM Plex Mono", monospace; }
.next-actions strong, .next-actions small { display: block; }
.next-actions strong { margin-top: 13px; font-size: .67rem; line-height: 1.35; }
.next-actions small { margin-top: 5px; color: var(--muted); font-size: .57rem; line-height: 1.4; }

.mobile-nav { display: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

@media (max-width: 1100px) {
    :root { --sidebar: 205px; }
    .main-content { padding-left: 26px; padding-right: 26px; }
    .pipeline { grid-template-columns: repeat(5, 1fr); }
    .pipeline > i { display: none; }
    .governance-flow { grid-template-columns: repeat(2, 1fr); }
    .lane-header h2 { margin-left: 0; }
    .field-grid.three { grid-template-columns: 1fr 1fr; }
    .next-actions ol { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
    :root { --topbar: 60px; }
    .topbar { grid-template-columns: 1fr auto; padding: 0 16px; }
    .environment, .product-link { display: none; }
    .sidebar { display: none; }
    .main-content { margin-left: 0; padding: 26px 18px 92px; }
    .mobile-nav { position: fixed; inset: auto 0 0; z-index: 100; display: grid; grid-template-columns: repeat(6, 1fr); min-height: 63px; padding: 7px max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)); border-top: 1px solid var(--border); background: rgba(7,9,13,.94); backdrop-filter: blur(18px); }
    .mobile-nav button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 3px; color: var(--muted); background: transparent; font-size: .53rem; cursor: pointer; }
    .mobile-nav svg { width: 18px; height: 18px; }
    .mobile-nav button.is-active { color: var(--accent-2); }
    .kpi-grid, .principles-grid { grid-template-columns: 1fr 1fr; }
    .track-grid, .data-layout, .experiment-summary, .calculator-grid, .risk-layout, .progress-grid { grid-template-columns: 1fr; }
    .governance-flow { grid-template-columns: 1fr; }
    .pipeline-flow { gap: 6px; }
    .pipeline-stage { min-width: 160px; padding: 12px; }
    .policy-strip { grid-template-columns: repeat(3, 1fr); }
    .next-actions ol { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .brand-copy span { font-size: .56rem; }
    .back-link span { display: none; }
    .page-heading { display: block; }
    .page-heading .status, .mode-badge { width: fit-content; margin-top: 14px; }
    .page-heading h1 { font-size: 1.72rem; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .kpi-card { padding: 13px; }
    .kpi-card strong { font-size: 1.02rem; }
    .pipeline { grid-template-columns: 1fr 1fr; }
    .check-list { grid-template-columns: 1fr; }
    .principles-grid { grid-template-columns: 1fr; }
    .event-timeline { grid-template-columns: 1fr; gap: 15px; }
    .event-timeline::before { top: 5px; bottom: 5px; left: 5px; right: auto; width: 1px; height: auto; }
    .time-event { padding: 0 0 0 27px; }
    .source-grid, .manifest-grid, .capability-grid { grid-template-columns: 1fr; }
    .promotion-ladder { grid-template-columns: 1fr; }
    .promotion-ladder > i { display: none; }
    .llm-grid { grid-template-columns: 1fr; }
    .allow-card ul, .deny-card ul { grid-template-columns: 1fr; }
    .pipeline-flow { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .stage-arrow { transform: rotate(90deg); justify-self: center; }
    .pipeline-stage { min-width: 0; }
    .lane-header h2 { margin-left: 0; }
    .lane-header > div { display: block; }
    .lane-header .track-letter { display: inline-grid; margin-bottom: 10px; }
    .lane-header .panel-eyebrow { margin-top: 0; }
    .field-grid, .field-grid.three { grid-template-columns: 1fr; }
    .policy-strip { grid-template-columns: 1fr 1fr; }
    .check-row { align-items: flex-start; flex-direction: column; }
    .next-actions ol { grid-template-columns: 1fr; }
    .roadmap-progress > div:first-child { flex-direction: column; }
    .roadmap-phase p { margin-left: 0; }
    .gate-callout { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}