:root {
    --ontology-ink: #eef3f6;
    --ontology-surface: #11171b;
    --ontology-panel: #171e23;
    --ontology-blue: #36b7c7;
    --ontology-orange: #ff7657;
    --ontology-mint: #8de0b5;
    --ontology-line: #344047;
    --ontology-muted: #9aa7ad;
}

.ontology-page, .ontology-reference-grid { font-family: Roboto-Condensed, -apple-system, "system-ui", "Segoe UI", Roboto, Arial, sans-serif; color: var(--ontology-ink); }
.ontology-kicker { margin: 0 0 10px; color: #849298; font: 700 10px/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: 1.2px; }
.ontology-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; min-height: 0; padding: clamp(26px, 3vw, 36px); overflow: hidden; background-color: #11171b; background-image: linear-gradient(rgba(141,224,181,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(141,224,181,.055) 1px, transparent 1px); background-size: 30px 30px; border: 1px solid var(--ontology-line); }
.ontology-hero-type { min-width: 0; align-self: center; }
.ontology-hero h1 { max-width: 680px; margin: 0; font-size: clamp(34px, 3.1vw, 44px); font-weight: 700; line-height: 1.02; letter-spacing: 0; }
.ontology-hero h1 span { color: var(--ontology-blue); }
.ontology-hero-brief { padding: 14px 0 0; border-top: 3px solid var(--ontology-blue); }
.ontology-hero-brief > p { margin: 0 0 13px; color: #c2cbd0; font-size: 14px; line-height: 1.5; }
.ontology-hero-brief dl { margin: 0; }
.ontology-hero-brief dl div { display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--ontology-line); }
.ontology-hero-brief dt { font-size: 12px; text-transform: uppercase; }
.ontology-hero-brief dd { margin: 0; color: var(--ontology-muted); font: 11px/1.4 "SFMono-Regular", Consolas, monospace; }

.ontology-graph { margin-top: 18px; background: var(--ontology-surface); border: 1px solid var(--ontology-line); }
.ontology-graph-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 22px clamp(20px, 3vw, 38px); border-bottom: 1px solid var(--ontology-line); }
.ontology-graph-head h2, .ontology-section-title h2, .ontology-mapping h2 { margin: 0; font-size: clamp(24px, 2.5vw, 36px); font-weight: 600; line-height: 1.05; letter-spacing: 0; }
.ontology-graph-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ontology-graph-stats { display: flex; gap: 18px; color: var(--ontology-muted); font: 10px/1 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.ontology-graph-stats b { color: var(--ontology-mint); font-size: 12px; }
.ontology-filter { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.ontology-filter button { appearance: none; padding: 8px 11px; color: #aab6bc; background: transparent; border: 1px solid #46535a; font: 700 10px/1 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.ontology-filter button.active { color: #071012; background: var(--ontology-blue); border-color: var(--ontology-blue); }
.ontology-graph-stage { position: relative; height: min(68vh, 700px); min-height: 540px; overflow: hidden; background: #0b1013; }
.ontology-canvas { position: absolute; inset: 0; cursor: grab; }
.ontology-canvas:active { cursor: grabbing; }
.ontology-canvas canvas { display: block; width: 100%; height: 100%; }
.ontology-canvas:focus-visible { outline: 2px solid var(--ontology-blue); outline-offset: -2px; }
.ontology-axis { position: absolute; inset: 16px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; color: #6f7d83; font: 9px/1 "SFMono-Regular", Consolas, monospace; pointer-events: none; }
.ontology-axis::before, .ontology-axis::after { position: absolute; content: ""; background: rgba(141,224,181,.13); }
.ontology-axis::before { top: 22px; right: 0; left: 0; height: 1px; }
.ontology-axis::after { top: 0; bottom: 0; left: 22px; width: 1px; }
.ontology-inspector { position: absolute; bottom: 28px; left: clamp(18px, 3vw, 38px); z-index: 4; width: min(350px, calc(100% - 36px)); padding: 20px; color: white; background: rgba(17,23,27,.94); border: 1px solid #47545b; border-top: 4px solid var(--ontology-orange); box-shadow: 7px 7px 0 rgba(54,183,199,.35); backdrop-filter: blur(8px); }
.ontology-inspector-index { display: flex; justify-content: flex-start; gap: 12px; padding-right: 76px; color: #aeb5b0; font: 10px/1 "SFMono-Regular", Consolas, monospace; }
.ontology-inspector-index i { color: var(--ontology-mint); font-style: normal; }
.ontology-inspector h3 { margin: 14px 0 7px; font-size: 25px; }
.ontology-inspector p { margin: 0; color: #c7d0d4; font-size: 13px; line-height: 1.5; }
.ontology-contract { margin-top: 14px; padding-top: 12px; border-top: 1px solid #455159; }
.ontology-contract span { display: block; margin-bottom: 6px; color: #929fa5; font: 9px/1 "SFMono-Regular", Consolas, monospace; }
.ontology-contract code { color: var(--ontology-mint); font-size: 12px; overflow-wrap: anywhere; }
.ontology-node-nav { position: absolute; top: 13px; right: 14px; display: flex; gap: 4px; }
.ontology-node-nav button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: white; background: transparent; border: 1px solid #5d696f; font-size: 16px; }
.ontology-node-nav button:hover, .ontology-node-nav button:focus-visible { color: #071012; background: var(--ontology-mint); border-color: var(--ontology-mint); outline: 0; }
.ontology-node-label { position: absolute; z-index: 6; padding: 7px 9px; color: #071012; background: var(--ontology-mint); font: 700 10px/1 "SFMono-Regular", Consolas, monospace; pointer-events: none; transform: translate(12px, -50%); }
.ontology-graph-hint { position: absolute; right: 22px; bottom: 18px; z-index: 3; color: #68767c; font: 9px/1 "SFMono-Regular", Consolas, monospace; pointer-events: none; }
.ontology-legend { display: flex; flex-wrap: wrap; gap: 20px; padding: 13px clamp(20px, 3vw, 38px); color: #9aa7ad; border-top: 1px solid var(--ontology-line); font: 10px/1.3 "SFMono-Regular", Consolas, monospace; }
.ontology-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ontology-legend i { width: 10px; height: 10px; border-radius: 50%; }
.legend-asset { background: var(--ontology-blue); }
.legend-capability { background: var(--ontology-orange); }
.legend-state { background: #42c98c; }
.legend-evidence { background: #e2bf52; }

.ontology-agent-panel { position: absolute; top: 22px; right: 22px; z-index: 5; width: min(252px, calc(100% - 44px)); padding: 14px; color: #dbe4e8; background: rgba(12,18,22,.9); border: 1px solid #46545b; border-top: 3px solid var(--ontology-mint); box-shadow: 5px 5px 0 rgba(255,118,87,.22); backdrop-filter: blur(9px); }
.ontology-agent-head { display: flex; justify-content: space-between; gap: 12px; color: #9aa7ad; font: 9px/1 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.ontology-agent-head b { color: var(--ontology-mint); font-weight: 700; }
.ontology-agent-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; }
.ontology-agent-actions button, .ontology-agent-turn button { min-height: 30px; padding: 6px 8px; color: #aeb9be; background: #11191d; border: 1px solid #45535a; font: 700 9px/1 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.ontology-agent-actions button.active { color: #071012; background: var(--ontology-blue); border-color: var(--ontology-blue); }
.ontology-agent-actions button:hover, .ontology-agent-actions button:focus-visible, .ontology-agent-turn button:hover, .ontology-agent-turn button:focus-visible { color: #071012; background: var(--ontology-mint); border-color: var(--ontology-mint); outline: 0; }
.ontology-agent-keys { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; color: #849299; font: 9px/1.2 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.ontology-agent-keys kbd { padding: 2px 4px; color: var(--ontology-mint); background: #172126; border: 1px solid #45535a; border-radius: 0; box-shadow: none; font: inherit; }
.ontology-agent-tuning { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; margin-top: 10px; }
.ontology-agent-tuning label { margin: 0; color: #7f8d93; font: 9px/1 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.ontology-agent-tuning input { grid-column: 1; width: 100%; accent-color: var(--ontology-blue); }
.ontology-agent-turn { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; }
.ontology-agent-turn button { width: 30px; padding: 0; font-size: 14px; }

.ontology-resolution, .ontology-toolchain { margin-top: 18px; padding: clamp(24px, 3vw, 40px); background: var(--ontology-panel); border: 1px solid var(--ontology-line); }
.ontology-section-title { display: grid; grid-template-columns: .65fr 1.35fr; align-items: end; gap: 28px; margin-bottom: 24px; }
.ontology-resolution-track { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid #45525a; }
.ontology-resolution-track button { position: relative; min-height: 106px; padding: 13px; color: #849198; text-align: left; background: #10161a; border: 0; border-right: 1px solid #45525a; }
.ontology-resolution-track button:last-child { border-right: 0; }
.ontology-resolution-track button.active { color: #071012; background: var(--ontology-blue); }
.ontology-resolution-track b, .ontology-resolution-track span, .ontology-resolution-track small { display: block; }
.ontology-resolution-track b { font: 10px/1 "SFMono-Regular", Consolas, monospace; }
.ontology-resolution-track span { margin: 22px 0 6px; color: #dbe3e7; font-size: 16px; font-weight: 700; }
.ontology-resolution-track button.active span { color: #071012; }
.ontology-resolution-track small { font: 10px/1.3 "SFMono-Regular", Consolas, monospace; }
.ontology-resolution-detail { display: grid; grid-template-columns: .5fr 1.5fr; gap: 24px; min-height: 108px; padding: 22px; color: #dbe4e8; background: #0d1317; border: 1px solid #45525a; border-top: 0; }
.ontology-resolution-detail strong { color: var(--ontology-mint); font-size: 21px; }
.ontology-resolution-detail p { max-width: 900px; margin: 0; font-size: 14px; line-height: 1.55; }

.ontology-mapping { display: grid; grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr); margin-top: 18px; background: var(--ontology-panel); border: 1px solid var(--ontology-line); }
.ontology-mapping-copy { padding: clamp(26px, 3vw, 42px); color: white; background: #10171b; border-right: 1px solid var(--ontology-line); }
.ontology-mapping-copy .ontology-kicker { color: #849298; }
.ontology-mapping-copy p { margin: 20px 0; color: #aeb9be; font-size: 14px; line-height: 1.55; }
.ontology-mapping-copy ul { margin: 0; padding: 0; list-style: none; }
.ontology-mapping-copy li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid var(--ontology-line); font-size: 13px; line-height: 1.4; }
.ontology-mapping-copy li span { color: var(--ontology-mint); font: 10px/1.5 "SFMono-Regular", Consolas, monospace; }
.ontology-mapping-matrix { align-self: center; min-width: 0; padding: 24px; }
.ontology-mapping-matrix > div { display: grid; grid-template-columns: 1.4fr .65fr 1.5fr .55fr; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; border-bottom: 1px solid var(--ontology-line); }
.ontology-mapping-matrix .ontology-matrix-head { min-height: 34px; color: #76858c; border-top: 1px solid var(--ontology-line); font: 9px/1 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.ontology-mapping-matrix code { color: #c9d4d9; font-size: 11px; overflow-wrap: anywhere; }
.ontology-mapping-matrix b { color: var(--ontology-blue); font: 700 10px/1.3 "SFMono-Regular", Consolas, monospace; }
.ontology-mapping-matrix i { color: var(--ontology-mint); font: 10px/1 "SFMono-Regular", Consolas, monospace; font-style: normal; }
.ontology-mapping-matrix footer { display: flex; justify-content: space-between; gap: 18px; padding: 15px 10px 0; color: #8f9ba1; font-size: 12px; }

.ontology-toolchain { color: #f2f3ef; background: #10161a; border-color: var(--ontology-line); }
.ontology-toolchain .ontology-kicker { color: #9da59f; }
.ontology-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #454a47; border-left: 1px solid #454a47; }
.ontology-tool-grid a { min-height: 112px; padding: 17px; color: white; border-right: 1px solid #454a47; border-bottom: 1px solid #454a47; transition: color .2s, background .2s; }
.ontology-tool-grid a:hover { color: #071012; background: var(--ontology-mint); text-decoration: none; }
.ontology-tool-grid small, .ontology-tool-grid strong, .ontology-tool-grid span { display: block; }
.ontology-tool-grid small { color: #8f9791; font: 9px/1 "SFMono-Regular", Consolas, monospace; }
.ontology-tool-grid strong { margin: 18px 0 9px; font-size: 18px; }
.ontology-tool-grid span { color: #adb5af; font: 10px/1 "SFMono-Regular", Consolas, monospace; }
.ontology-tool-grid a:hover small, .ontology-tool-grid a:hover span { color: #315b48; }
.ontology-license-note { margin: 18px 0 0; color: #929a94; font-size: 12px; }

.ontology-reference-grid { margin-top: 24px; }
.ontology-prototype-window iframe { display: block; min-height: 720px; background: white; }

@media (max-width: 1100px) {
    .ontology-resolution-track { grid-template-columns: repeat(3, 1fr); }
    .ontology-resolution-track button:nth-child(3) { border-right: 0; }
    .ontology-resolution-track button:nth-child(-n+3) { border-bottom: 1px solid #45525a; }
    .ontology-mapping { grid-template-columns: 1fr; }
    .ontology-mapping-copy { border-right: 0; border-bottom: 1px solid var(--ontology-line); }
}

@media (max-width: 1024px) {
    .ontology-hero { grid-template-columns: 1fr; }
    .ontology-hero-brief { max-width: 720px; }
}

@media (max-width: 767px) {
    .ontology-hero { min-height: 0; padding: 24px 20px; }
    .ontology-hero h1 { font-size: 32px; }
    .ontology-graph-head { align-items: flex-start; flex-direction: column; }
    .ontology-graph-controls { align-items: flex-start; }
    .ontology-filter { justify-content: flex-start; }
    .ontology-graph-stage { height: 620px; min-height: 620px; }
    .ontology-agent-panel { top: 16px; right: 16px; width: min(230px, calc(100% - 32px)); }
    .ontology-inspector { bottom: 42px; left: 16px; width: calc(100% - 32px); box-shadow: 5px 5px 0 rgba(54,183,199,.35); }
    .ontology-graph-hint { right: 18px; bottom: 16px; }
    .ontology-section-title { grid-template-columns: 1fr; gap: 12px; }
    .ontology-resolution, .ontology-toolchain { padding: 25px 18px; }
    .ontology-resolution-track { grid-template-columns: repeat(2, 1fr); }
    .ontology-resolution-track button { border-bottom: 1px solid #45525a; }
    .ontology-resolution-track button:nth-child(3) { border-right: 1px solid #45525a; }
    .ontology-resolution-track button:nth-child(2n) { border-right: 0; }
    .ontology-resolution-track button:nth-last-child(-n+2) { border-bottom: 0; }
    .ontology-resolution-detail { grid-template-columns: 1fr; }
    .ontology-mapping-matrix { padding: 18px; }
    .ontology-mapping-matrix .ontology-matrix-head { display: none; }
    .ontology-mapping-matrix > div:not(.ontology-matrix-head) { grid-template-columns: 1fr auto; gap: 7px 12px; padding: 12px 4px; }
    .ontology-mapping-matrix > div:not(.ontology-matrix-head) code:first-child { grid-column: 1; grid-row: 1; }
    .ontology-mapping-matrix > div:not(.ontology-matrix-head) b { grid-column: 2; grid-row: 1; }
    .ontology-mapping-matrix > div:not(.ontology-matrix-head) code:nth-of-type(2) { grid-column: 1; grid-row: 2; }
    .ontology-mapping-matrix > div:not(.ontology-matrix-head) i { grid-column: 2; grid-row: 2; }
    .ontology-mapping-matrix footer { flex-wrap: wrap; }
    .ontology-tool-grid { grid-template-columns: 1fr; }
    .ontology-reference-grid > [class*="col-"] { min-width: 0; }
    .ontology-reference-grid .card, .ontology-reference-grid .card-body, .ontology-reference-grid .table-responsive { min-width: 0; max-width: 100%; }
    .ontology-reference-grid table { width: 100%; table-layout: fixed; }
    .ontology-reference-grid th, .ontology-reference-grid td { overflow-wrap: anywhere; }
    .ontology-prototype-window iframe { min-height: 720px; height: 720px; }
}

@media (max-width: 420px) {
    .ontology-agent-panel { width: calc(100% - 32px); }
    .ontology-agent-actions button { padding-inline: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    .ontology-tool-grid a { transition: none; }
}