:root { color-scheme:dark; --ink:#f3f6f7; --muted:#9ba8ad; --line:#2b3940; --cyan:#63d4e5; --orange:#ff9966; --black:#071014; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--black); } a { color:inherit; text-decoration:none; }
.hero { min-height:94vh; position:relative; overflow:hidden; padding:0 6vw; background:radial-gradient(circle at 75% 42%,#173d4b 0,#0d2630 23%,#071014 62%); }
nav { height:82px; display:flex; align-items:center; gap:2rem; border-bottom:1px solid var(--line); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; position:fixed; top:0; left:6vw; right:6vw; z-index:20; background:rgba(7,16,20,.8); backdrop-filter:blur(14px); }
nav .brand { margin-right:auto; font-weight:800; } .hero-copy { position:relative; z-index:2; padding:14vh 0 10vh; max-width:850px; }
.eyebrow,.section-number,.card-head { color:var(--cyan); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
h1 { font-size:clamp(3.6rem,8vw,8.2rem); letter-spacing:-.07em; line-height:.84; margin:.3em 0; } h1 span { color:transparent; -webkit-text-stroke:1px var(--ink); }
.lead { max-width:570px; color:#c1ccd0; font-size:1.15rem; line-height:1.7; } .button,button { display:inline-block; margin-top:1.5rem; padding:1rem 1.25rem; background:var(--orange); color:#160d08; border:0; font-weight:800; cursor:pointer; }
.plane { position:absolute; width:52vw; height:28vw; right:-6vw; top:32%; transform:rotate(-13deg); border-top:1px solid #416b74; border-radius:50%; } .plane:before,.plane:after { content:""; position:absolute; border:1px solid #31545d; border-radius:50%; inset:-30% 18%; transform:rotate(38deg); }.plane:after { inset:18% -6%; transform:rotate(-22deg); }
.plane span { position:absolute; width:15vw; height:3px; top:48%; left:40%; background:var(--cyan); box-shadow:0 0 32px var(--cyan); } .plane i { position:absolute; width:18px; height:18px; border-radius:50%; top:calc(48% - 8px); left:36%; background:#e9ffff; box-shadow:0 0 28px var(--cyan); }
main { padding:8rem 6vw; } section { scroll-margin-top:110px; } .intro { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:4vw; align-items:start; margin-bottom:4rem; } h2 { font-size:clamp(2.5rem,5vw,5rem); letter-spacing:-.055em; line-height:.98; margin:0; } .intro>p:last-child { color:var(--muted); line-height:1.7; }
.lab-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); } .card { min-height:575px; padding:2rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; } .card-head { display:flex; justify-content:space-between; } .card h3 { font-size:1.8rem; margin:3rem 0 1rem; } .card h3 small { display:block; margin-top:.45rem; color:var(--cyan); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; } .card>p:not(.formula) { color:var(--muted); line-height:1.6; min-height:78px; }
label { display:block; margin-top:1rem; color:#c7d0d3; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; } label span { float:right; color:var(--muted); } input { width:100%; margin-top:.5rem; padding:.85rem .75rem; color:var(--ink); background:#0d1a1f; border:1px solid var(--line); font:inherit; font-size:1rem; } .fields { display:grid; grid-template-columns:1fr 1fr; gap:.4rem .8rem; } .fields.three { grid-template-columns:repeat(2,1fr); } .card button { width:100%; } output { display:block; font-family:ui-monospace,monospace; color:#b9eff4; padding:1.2rem 0; font-size:1.05rem; min-height:66px; } output.error { color:#ff9784; font-size:.85rem; } .formula { margin-top:auto; border-top:1px solid var(--line); padding-top:1.2rem; color:#83959b; font-family:Georgia,serif; }
.method { display:grid; grid-template-columns:1fr 1.4fr; gap:8vw; padding-top:10rem; } .method ol { margin:0; padding:0; list-style:none; } .method li { display:grid; grid-template-columns:140px 1fr; gap:2rem; padding:1.5rem 0; border-top:1px solid var(--line); } .method li span { color:var(--muted); } footer { display:flex; justify-content:space-between; padding:2rem 6vw; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }
@media (max-width:850px) { nav{height:68px;gap:1rem;overflow-x:auto;font-size:.62rem;white-space:nowrap}.hero{min-height:780px}.plane{width:110vw;height:60vw;right:-34vw;top:48%}.intro,.method{grid-template-columns:1fr}.lab-grid{grid-template-columns:1fr}.card{min-height:auto}.formula{margin-top:2rem}.method{padding-top:6rem}section{scroll-margin-top:90px}.fields.three{grid-template-columns:1fr 1fr} }

.envelope-section { display:grid; grid-template-columns:.8fr 1.4fr; gap:6vw; padding-top:10rem; align-items:start; }
.envelope-copy>p:not(.section-number):not(.note) { color:var(--muted); line-height:1.7; max-width:560px; }
.envelope-control { max-width:300px; margin-top:2rem; }
.note { margin-top:1.5rem; padding-left:1rem; border-left:2px solid var(--line); color:var(--muted); font-size:.84rem; line-height:1.6; }
.chart-panel { border:1px solid var(--line); padding:1.25rem; background:#09151a; min-width:0; }
.chart-legend { display:flex; gap:1.5rem; justify-content:flex-end; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.legend-line { display:inline-block; width:24px; height:2px; vertical-align:middle; margin-right:.45rem; }
.legend-line.lift { background:var(--cyan); }
.legend-line.drag { background:var(--orange); }
#envelope-chart { width:100%; height:auto; display:block; margin-top:.5rem; overflow:visible; }
#envelope-chart .axis { stroke:#41535b; stroke-width:1; }
#envelope-chart .lift-line { fill:none; stroke:var(--cyan); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
#envelope-chart .drag-line { fill:none; stroke:var(--orange); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
#envelope-chart .chart-label { fill:#83959b; font-size:15px; font-family:ui-monospace,monospace; }
#envelope-summary { border-top:1px solid var(--line); padding:1rem 0 0; min-height:auto; font-size:.88rem; }
@media (max-width:850px) { .envelope-section{grid-template-columns:1fr;padding-top:6rem}.chart-panel{padding:.8rem}.chart-legend{justify-content:flex-start} }

.pressure-block { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.pressure-heading { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.pressure-heading strong { color:#c7d0d3; }
#pressure-chart { width:100%; height:auto; display:block; margin-top:.35rem; overflow:visible; }
#pressure-chart .axis { stroke:#41535b; stroke-width:1; }
#pressure-chart .pressure-line { fill:none; stroke:#c7d0d3; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
#pressure-chart .chart-label { fill:#83959b; font-size:15px; font-family:ui-monospace,monospace; }

.trade-section { display:grid; grid-template-columns:.8fr 1.4fr; gap:6vw; padding-top:10rem; align-items:start; }
.trade-copy>p:not(.section-number):not(.note) { color:var(--muted); line-height:1.7; max-width:560px; }
.trade-controls { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; max-width:520px; margin-top:1rem; }
.trade-results { display:grid; gap:1.25rem; min-width:0; }
.trade-panel { border:1px solid var(--line); padding:1.4rem; background:#09151a; min-width:0; }
.trade-panel.error-panel { border-color:#71463e; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.panel-heading h3 { margin:.3rem 0 0; font-size:1.4rem; }
.panel-heading>span { color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.table-scroll { overflow-x:auto; }
#stall-comparison-table { width:100%; min-width:600px; border-collapse:collapse; font-family:ui-monospace,monospace; }
#stall-comparison-table th,
#stall-comparison-table td { padding:.9rem .8rem; border:1px solid var(--line); text-align:right; white-space:nowrap; }
#stall-comparison-table thead th { color:var(--cyan); font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; background:#0c1a20; }
#stall-comparison-table tbody th { color:#c7d0d3; font-weight:600; background:#0c1a20; }
#stall-comparison-table td { color:#b9eff4; }
#stall-comparison-table .baseline-cell { background:rgba(255,153,102,.14); color:#ffd7c2; box-shadow:inset 0 0 0 1px var(--orange); }
.sensitivity-list { border-top:1px solid var(--line); }
.sensitivity-row { display:grid; grid-template-columns:1fr auto auto; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--line); }
.sensitivity-row strong { font-size:.9rem; }
.sensitivity-row span { color:#b9eff4; font-family:ui-monospace,monospace; }
.sensitivity-row small { min-width:92px; text-align:right; color:var(--muted); font-family:ui-monospace,monospace; }
#sensitivity-summary { padding:1.2rem 0 .5rem; min-height:auto; font-size:.88rem; }
.micro-note { margin:.8rem 0 0; color:var(--muted); font-size:.78rem; line-height:1.6; }
@media (max-width:850px) {
  .trade-section{grid-template-columns:1fr;padding-top:6rem}
  .trade-controls{grid-template-columns:1fr 1fr}
  .trade-panel{padding:1rem}
  .panel-heading{display:block}
  .panel-heading>span{display:block;margin-top:.5rem}
  .sensitivity-row{grid-template-columns:1fr auto}
  .sensitivity-row small{grid-column:1/-1;text-align:left}
}
@media (max-width:520px) {
  .trade-controls{grid-template-columns:1fr}
}