:root {
  --black: #0a0c0c;
  --panel: #121716;
  --panel-2: #171e1c;
  --emerald: #34d391;
  --deep-emerald: #0d6b4b;
  --gold: #d2ae6d;
  --ice: #d9e9e4;
  --white: #f4f6f2;
  --muted: #86938f;
  --line: rgba(217, 233, 228, .13);
  --rail: 86px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--white); background: var(--black); font-family: "Segoe UI", Arial, sans-serif; line-height: 1.55; overflow-x: hidden; }
a { color: inherit; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: -5rem; left: 1rem; padding: .75rem 1rem; color: var(--black); background: var(--gold); }
.skip-link:focus { top: 1rem; }

.workspace-rail { position: fixed; z-index: 20; inset: 0 auto 0 0; width: var(--rail); padding: 1.2rem .7rem; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); background: #0d100f; }
.rail-brand { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border: 1px solid var(--emerald); color: var(--emerald); font: 800 .7rem Georgia, serif; text-decoration: none; }
.workspace-rail nav { margin: auto 0; display: grid; gap: .7rem; }
.workspace-rail nav a, .rail-help { width: 3.5rem; min-height: 3.5rem; display: grid; place-items: center; border: 1px solid transparent; color: var(--muted); text-decoration: none; }
.workspace-rail nav a:hover, .workspace-rail nav a.active { border-color: var(--line); color: var(--emerald); background: var(--panel); }
.workspace-rail nav span, .rail-help span { font-size: 1.25rem; }
.workspace-rail em { position: absolute; left: 4.8rem; padding: .35rem .5rem; display: none; color: var(--black); background: var(--ice); font-size: .65rem; font-style: normal; white-space: nowrap; }
.workspace-rail a:hover em, .workspace-rail a:focus-visible em { display: block; }
.rail-help { margin-top: auto; }
.rail-menu { display: none; }
.workspace { margin-left: var(--rail); }
.workspace-header { min-height: 78px; padding: 0 clamp(1.25rem, 3vw, 3rem); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: var(--black); }
.workspace-header > div:first-child span, .header-meta p span { display: block; color: var(--muted); font: .58rem Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
.workspace-header strong { font-size: .78rem; }
.header-meta { display: flex; align-items: center; gap: 2rem; }
.header-meta p { margin: 0; }
.header-meta a { padding: .65rem .8rem; border: 1px solid var(--line); color: var(--emerald); font-size: .7rem; font-weight: 800; text-decoration: none; }

.cockpit { min-height: 900px; padding: clamp(2rem, 4vw, 4rem); display: grid; grid-template-columns: .9fr 1.35fr .75fr; grid-template-rows: auto 1fr auto; gap: 1rem; background: var(--black); }
.cockpit-title { grid-column: 1 / 3; padding: 2rem 1rem 3rem 0; }
.eyebrow, .section-code { margin: 0 0 1.3rem; color: var(--emerald); font: 700 .62rem Consolas, monospace; text-transform: uppercase; letter-spacing: .12em; }
.cockpit-title h1 { margin: 0; font: 400 clamp(4rem, 7vw, 8rem)/.88 Georgia, serif; letter-spacing: -.07em; }
.cockpit-title h1 em { color: var(--gold); font-style: italic; }
.cockpit-title > p:last-child { max-width: 690px; color: var(--muted); }
.position-total { align-self: end; padding: 1.5rem; border-top: 1px solid var(--line); text-align: right; }
.position-total > span { color: var(--muted); font: .6rem Consolas, monospace; text-transform: uppercase; }
.position-total > strong { display: block; color: var(--ice); font: 400 clamp(2.8rem, 5vw, 5rem)/1 Georgia, serif; }
.position-total p { margin: .8rem 0 0; color: var(--emerald); font-size: .7rem; }
.position-total p i { display: inline-block; width: .55rem; height: .55rem; margin-right: .3rem; border-radius: 50%; background: var(--emerald); }

.liquidity-map { position: relative; grid-column: 1 / 3; min-height: 510px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 50%, rgba(52,211,145,.08), transparent 38%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), var(--panel); background-size: auto, 32px 32px, 32px 32px, auto; }
.map-head { position: absolute; z-index: 3; left: 1.2rem; right: 1.2rem; top: 1rem; display: flex; justify-content: space-between; color: var(--muted); font: .58rem Consolas, monospace; text-transform: uppercase; }
.map-head em { color: var(--gold); font-style: normal; }
.treasury-core { position: absolute; z-index: 3; left: 50%; top: 50%; width: 11rem; height: 11rem; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid var(--emerald); border-radius: 50%; background: rgba(10,12,12,.92); box-shadow: 0 0 0 2rem rgba(52,211,145,.035), 0 0 0 4rem rgba(52,211,145,.025); }
.treasury-core small { color: var(--muted); font-size: .58rem; text-align: center; text-transform: uppercase; }
.treasury-core strong { font: 400 3.4rem/1 Georgia, serif; }
.treasury-core span { color: var(--emerald); font: .58rem Consolas, monospace; }
.bank-node { position: absolute; z-index: 3; min-width: 130px; padding: .8rem; border: 1px solid var(--line); background: rgba(18,23,22,.96); cursor: pointer; }
.bank-node:has(input:not(:checked)) { opacity: .35; }
.bank-node input { position: absolute; right: .6rem; top: .6rem; accent-color: var(--emerald); }
.bank-node span { display: block; color: var(--muted); font: .58rem Consolas, monospace; text-transform: uppercase; }
.bank-node strong { display: block; margin-top: .25rem; font-size: .85rem; }
.bank-one { left: 8%; top: 22%; }.bank-two { right: 8%; top: 20%; }.bank-three { left: 11%; bottom: 15%; }.bank-four { right: 10%; bottom: 13%; }
.flow-line { position: absolute; z-index: 1; left: 50%; top: 50%; width: 32%; height: 1px; transform-origin: left; background: linear-gradient(90deg, var(--emerald), transparent); }
.flow-one { transform: rotate(-150deg); }.flow-two { transform: rotate(-30deg); }.flow-three { transform: rotate(150deg); }.flow-four { transform: rotate(30deg); }
.decision-card { grid-column: 3; grid-row: 2; padding: 1.5rem; display: flex; flex-direction: column; border: 1px solid rgba(210,174,109,.32); background: linear-gradient(155deg, #24231d, #121716); }
.decision-head { display: flex; justify-content: space-between; color: var(--gold); font: .58rem Consolas, monospace; text-transform: uppercase; }
.decision-head i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); }
.decision-card h2 { margin: auto 0 1rem; font: 400 clamp(1.8rem, 3vw, 3rem)/1.04 Georgia, serif; }
.decision-card p { color: var(--muted); }
.decision-card a { color: var(--gold); font-size: .72rem; font-weight: 800; text-decoration: none; }
.market-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.market-strip p { margin: 0; padding: 1rem; display: flex; justify-content: space-between; border-right: 1px solid var(--line); font-size: .66rem; }
.market-strip p:last-child { border-right: 0; }
.market-strip span { color: var(--muted); text-transform: uppercase; }.market-strip em { color: var(--emerald); font-style: normal; }

.exposure-section { padding: 8rem max(1.25rem, calc((100vw - 1200px - var(--rail))/2)); display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; background: var(--ice); color: #17201e; }
.exposure-intro h2, .controls-heading h2, .contact-section h2 { margin: 0; font: 400 clamp(3.2rem, 5.5vw, 6rem)/.95 Georgia, serif; letter-spacing: -.06em; }
.exposure-intro > p:last-child { color: #53615d; }
.scenario-model { padding: clamp(1.5rem, 4vw, 3rem); background: var(--white); box-shadow: 1rem 1rem 0 #bdd2cc; }
.scenario-top { display: flex; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid rgba(23,32,30,.16); font-size: .72rem; }
.scenario-top span, .scenario-value span { color: #64736e; text-transform: uppercase; }
.scenario-value { margin: 4rem 0; }
.scenario-value span { display: block; font-size: .62rem; }
.scenario-value output { display: block; font: 400 clamp(3.4rem, 6vw, 6rem)/1 Georgia, serif; }
.scenario-model label { display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; font-weight: 800; }
.scenario-model input { width: 100%; margin: 1.4rem 0 .7rem; accent-color: var(--deep-emerald); }
.range-labels { display: flex; align-items: center; gap: .8rem; color: #64736e; font: .6rem Consolas, monospace; }
.range-labels i { flex: 1; border-top: 1px dashed #87948f; }
.variance-row { margin-top: 3rem; padding-top: 1rem; display: flex; justify-content: space-between; border-top: 1px solid rgba(23,32,30,.16); }
.variance-row span { color: #64736e; font-size: .72rem; }
.variance-row strong { color: var(--deep-emerald); }

.controls-section { padding: 8rem max(1.25rem, calc((100vw - 1280px - var(--rail))/2)); background: var(--panel); }
.controls-heading { display: grid; grid-template-columns: .6fr 1.4fr; gap: 2rem; align-items: end; }
.control-flow { margin: 5rem 0 0; padding: 0; list-style: none; }
.control-flow li { padding: 1.6rem 0; display: grid; grid-template-columns: 70px 1fr auto; gap: 2rem; border-top: 1px solid var(--line); align-items: center; }
.control-flow li > span { color: var(--emerald); font: .65rem Consolas, monospace; }
.control-flow h3, .control-flow p { margin: 0; }.control-flow h3 { font: 400 1.5rem Georgia, serif; }.control-flow p { color: var(--muted); }
.control-flow li > strong { padding: .35rem .55rem; border: 1px solid var(--line); color: var(--gold); font: .58rem Consolas, monospace; text-transform: uppercase; }

.contact-section { padding: 8rem max(1.25rem, calc((100vw - 1200px - var(--rail))/2)); display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; color: var(--black); background: var(--gold); }
.contact-section .section-code { color: var(--deep-emerald); }
.contact-section form { display: grid; gap: 1rem; align-content: center; }
.contact-section label { font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.contact-section input, .contact-section select { width: 100%; min-height: 52px; margin-top: .35rem; padding: .75rem; border: 1px solid var(--black); background: rgba(255,255,255,.25); }
.contact-section button { min-height: 52px; border: 0; color: var(--white); background: var(--black); font-weight: 800; cursor: pointer; }
#contact-status { min-height: 1.4rem; margin: 0; color: var(--deep-emerald); font-size: .8rem; }
.site-footer { padding: 4rem max(1.25rem, calc((100vw - 1280px - var(--rail))/2)); display: grid; grid-template-columns: 1fr .7fr 1.2fr auto; gap: 3rem; border-top: 1px solid var(--line); background: var(--black); color: var(--muted); font-size: .75rem; }
.footer-brand { color: var(--white); font: 700 1.2rem Georgia, serif; text-decoration: none; }
.site-footer p, .site-footer address { margin: 0; font-style: normal; }
.site-footer address strong { color: var(--gold); font-size: .6rem; text-transform: uppercase; }
.site-footer > a { color: var(--emerald); text-decoration: none; }

@media (max-width: 1000px) {
  :root { --rail: 0px; }
  .workspace-rail { position: sticky; top: 0; width: 100%; height: 68px; padding: .5rem 1rem; flex-direction: row; justify-content: space-between; }
  .rail-brand { width: 2.8rem; height: 2.8rem; }
  .rail-menu { display: block; padding: .5rem; border: 1px solid var(--line); color: var(--white); background: transparent; }
  .workspace-rail nav { position: absolute; left: 1rem; right: 1rem; top: 68px; margin: 0; padding: 1rem; display: none; grid-template-columns: repeat(4, 1fr); background: var(--panel); box-shadow: 0 15px 40px rgba(0,0,0,.4); }
  .workspace-rail nav.open { display: grid; }
  .workspace-rail nav a { width: auto; }
  .workspace-rail em { position: static; display: block; padding: 0; color: inherit; background: transparent; }
  .workspace-rail a:hover em, .workspace-rail a:focus-visible em { display: block; }
  .rail-help { display: none; }
  .workspace { margin-left: 0; }
  .cockpit { grid-template-columns: 1fr 1fr; }
  .cockpit-title { grid-column: 1; }
  .position-total { grid-column: 2; }
  .liquidity-map { grid-column: 1 / -1; }
  .decision-card { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
  .exposure-section, .contact-section { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .workspace-header { display: none; }
  .workspace-rail nav { grid-template-columns: 1fr 1fr; }
  .cockpit { padding: 1rem; grid-template-columns: 1fr; }
  .cockpit-title, .position-total, .liquidity-map { grid-column: 1; }
  .cockpit-title h1 { font-size: 4rem; }
  .position-total { text-align: left; }
  .liquidity-map { min-height: 590px; }
  .treasury-core { width: 8rem; height: 8rem; }
  .treasury-core strong { font-size: 2.4rem; }
  .bank-node { min-width: 105px; padding: .6rem; }
  .bank-one { left: 4%; top: 18%; }.bank-two { right: 4%; top: 18%; }.bank-three { left: 4%; bottom: 14%; }.bank-four { right: 4%; bottom: 14%; }
  .market-strip { grid-template-columns: 1fr; }
  .market-strip p { border-right: 0; border-bottom: 1px solid var(--line); }
  .exposure-section, .controls-section, .contact-section, .site-footer { padding-left: 1rem; padding-right: 1rem; }
  .scenario-model { box-shadow: .5rem .5rem 0 #bdd2cc; }
  .controls-heading { grid-template-columns: 1fr; }
  .control-flow li { grid-template-columns: 45px 1fr; gap: 1rem; }
  .control-flow li > strong { grid-column: 2; justify-self: start; }
  .site-footer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
