:root {
  color-scheme: dark;
  --bg: #080b10;
  --panel: #10151c;
  --panel-2: #141b23;
  --line: #29323d;
  --muted: #7f8b99;
  --text: #eef3f6;
  --red: #ef3340;
  --red-soft: #ff5b65;
  --blue: #3aa8ff;
  --gold: #f6b94f;
  --green: #47d18c;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 78% 0%, #18212a 0, transparent 28rem), var(--bg); color: var(--text); font-family: var(--sans); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.topbar { height: 76px; padding: 0 clamp(22px, 4vw, 70px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(8,11,16,.9); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 13px; }
.brand strong { font-size: 15px; letter-spacing: .13em; display: block; }
.brand small { font-size: 9px; letter-spacing: .19em; color: var(--muted); }
.mark { display: flex; gap: 3px; align-items: flex-end; height: 25px; }
.mark span { width: 7px; background: var(--red); transform: skew(-13deg); display:block; }
.mark span:nth-child(1) { height: 14px; }.mark span:nth-child(2) { height: 20px; }.mark span:nth-child(3) { height: 25px; }
.status { color: #93a0ae; font: 10px var(--mono); letter-spacing: .07em; }
.status i { width: 7px; height: 7px; background: var(--green); display: inline-block; border-radius: 50%; box-shadow: 0 0 12px var(--green); margin-right: 7px; }
.status span { margin: 0 8px; color: #4c5662; }
main { width: min(1450px, 92vw); margin: auto; }
.hero { min-height: 330px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 6vw; align-items: center; padding: 60px 0 48px; }
.eyebrow { color: var(--red-soft); font: 700 10px var(--mono); letter-spacing: .16em; }
h1 { font-size: clamp(42px, 5.4vw, 78px); line-height: .98; letter-spacing: -.055em; margin: 12px 0 24px; font-weight: 720; }
.lead { color: #a7b0bb; max-width: 640px; font-size: 16px; line-height: 1.7; }
.target-card { background: linear-gradient(145deg, rgba(27,35,44,.97), rgba(13,17,23,.98)); border: 1px solid #33404d; box-shadow: 0 26px 70px rgba(0,0,0,.35); padding: 26px; position: relative; overflow:hidden; }
.target-card:before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red); }
.target-heading { display:flex; align-items:flex-start; justify-content:space-between; }
.target-heading h2 { margin: 12px 0 3px; font-size: 26px; letter-spacing:-.03em; }
.target-heading p { margin:0; color:var(--muted); font-size:12px; }
.tag { color:#ff7a82; border:1px solid #76373e; background:#34191e; font:700 9px var(--mono); padding:5px 8px; letter-spacing:.1em; }
.toggle { width:49px; height:25px; border-radius:99px; border:1px solid #4b5661; background:#222a33; padding:3px; transition:.2s; }
.toggle span { display:block; width:17px; height:17px; border-radius:50%; background:#89939e; transition:.2s; }
.toggle.on { background:#632128; border-color:#a9313a; }.toggle.on span { transform:translateX(23px); background:var(--red-soft); box-shadow:0 0 12px rgba(239,51,64,.5); }
.target-stats { border-top:1px solid var(--line); margin-top:23px; padding-top:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.target-stats span { display:block; color:var(--muted); font:9px var(--mono); text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; }
.target-stats strong { font:600 19px var(--mono); }.target-stats small { font-size:9px; color:#7d8996; }
.workspace { display:grid; grid-template-columns:.9fr 1.1fr; gap:18px; align-items:start; }
.panel { background:rgba(16,21,28,.94); border:1px solid var(--line); box-shadow:0 22px 50px rgba(0,0,0,.18); }
.panel-title { min-height:76px; display:flex; justify-content:space-between; align-items:center; padding:0 22px; border-bottom:1px solid var(--line); gap:14px; }
.panel-title>div:first-child { display:flex; align-items:center; gap:13px; }
.step { font:700 10px var(--mono); color:var(--red-soft); border:1px solid #5f3036; padding:7px; }
.panel h2, .validation h2 { font-size:16px; margin:0 0 4px; letter-spacing:-.01em; }
.panel-title p, .validation p { color:var(--muted); margin:0; font-size:11px; }
.mode-tabs, .metric-tabs { background:#090d12; padding:3px; display:flex; border:1px solid #252d36; }
.mode-tabs button, .metric-tabs button { border:0; color:#808c99; background:transparent; padding:8px 10px; font-size:10px; }
.mode-tabs button.active, .metric-tabs button.active { color:white; background:#2a333e; }
.sim-grid { display:grid; grid-template-columns:.8fr 1.2fr; min-height:430px; }
.controls { padding:24px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:30px; }
.controls label { color:#909ba8; font:10px var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.controls output { float:right; color:white; font-size:14px; }
input[type="range"] { width:100%; display:block; margin-top:15px; accent-color:var(--red); }
.gear-buttons { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:14px; }
.gear-buttons button { height:38px; background:#0c1117; color:#74808d; border:1px solid #29323d; font:600 13px var(--mono); }
.gear-buttons button.active { color:white; border-color:var(--red); background:#3a171c; }
.telemetry { padding:28px; display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(circle at 50% 25%, #1c2731, transparent 55%); }
.gear-readout { display:grid; grid-template-columns:1fr auto auto auto 1fr; gap:13px; align-items:center; text-align:center; }
.gear-readout span { font:9px var(--mono); color:var(--muted); text-align:left; }
.gear-readout strong { font:600 46px var(--mono); }
.gear-readout i { width:31px; height:1px; background:#4a5662; position:relative; }.gear-readout i:after { content:""; position:absolute; right:0; top:-3px; border-left:6px solid #596674; border-top:3px solid transparent; border-bottom:3px solid transparent; }
.gear-readout small { font:700 9px var(--mono); color:var(--green); text-align:right; }
.gear-readout.shifting small { color:var(--red-soft); }
.gauges { display:grid; gap:26px; }
.gauges>div { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:baseline; }
.gauges span { color:#98a4b1; font-size:10px; }.gauges strong { font:600 28px var(--mono); }.gauges small { color:#6d7884; font:9px var(--mono); }
.bar { grid-column:1/-1; height:5px; background:#222a33; overflow:hidden; }.bar i { display:block; width:50%; height:100%; background:linear-gradient(90deg,#8b232d,var(--red-soft)); }.bar.pressure i { background:linear-gradient(90deg,#0f6fae,var(--blue)); }
.sim-note { padding:12px; border:1px solid #2b343f; background:#0b1016; color:#8d99a5; font:10px var(--mono); text-align:center; }
.chart-wrap { height:320px; padding:18px 20px 0; position:relative; }
#mapChart { width:100%; height:270px; display:block; }
.legend { display:flex; justify-content:center; gap:22px; color:#98a3af; font:9px var(--mono); text-transform:uppercase; }
.legend span:before { content:""; display:inline-block; width:16px; height:2px; vertical-align:middle; margin-right:6px; background:currentColor; }.legend .normal{color:var(--blue)}.legend .sport{color:var(--red-soft)}.legend .ssport{color:var(--gold)}
.map-toolbar { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 20px; gap:15px; }
.map-toolbar label { color:#7f8b98; font:9px var(--mono); text-transform:uppercase; letter-spacing:.06em; }
select { background:#0c1117; border:1px solid #303a45; color:white; padding:7px 9px; margin-left:7px; font-size:11px; }
.offsets { display:flex; align-items:center; gap:15px; }.offsets button { width:28px; height:28px; background:#151c24; color:white; border:1px solid #35404c; }.offsets output { min-width:58px; display:inline-block; text-align:center; color:white; }
.matrix { padding:15px 20px 20px; overflow:auto; }
.matrix table { width:100%; border-collapse:collapse; font:10px var(--mono); text-align:right; }
.matrix th { color:#677381; font-weight:500; padding:6px; }.matrix td { border-top:1px solid #222a33; padding:7px 6px; color:#b9c3cd; }.matrix td:first-child,.matrix th:first-child { text-align:left; color:#75818d; }.matrix td.highlight { color:white; background:#18222c; }
.validation { margin:18px 0 40px; border:1px solid var(--line); background:#0f141b; display:grid; grid-template-columns:1.4fr 1fr auto; gap:28px; align-items:center; padding:24px; }
.validation-copy { display:flex; gap:15px; align-items:flex-start; }.validation-copy p { line-height:1.55; max-width:700px; }
.checks { display:grid; grid-template-columns:1fr 1fr; gap:9px 15px; }.checks div { display:grid; grid-template-columns:auto 1fr auto; gap:7px; align-items:center; font:9px var(--mono); color:#818d9a; }.checks i { width:5px; height:5px; background:var(--green); border-radius:50%; }.checks strong { color:var(--green); font-size:9px; }.checks .neutral { color:#8b96a2; }
.actions { display:flex; flex-direction:column; gap:8px; }.actions button { min-width:175px; border:1px solid #3a4550; padding:11px 15px; font-size:10px; font-weight:700; letter-spacing:.04em; }.secondary { background:#141b23; color:#c3ccd4; }.primary { background:var(--red); border-color:var(--red)!important; color:white; }.primary span{opacity:.65;margin-left:7px;font-size:8px}
footer { width:min(1450px,92vw); margin:auto; padding:0 0 28px; display:flex; justify-content:space-between; color:#59636e; font:8px var(--mono); letter-spacing:.1em; }
@media (max-width:1050px){.workspace{grid-template-columns:1fr}.validation{grid-template-columns:1fr 1fr}.actions{grid-column:1/-1;flex-direction:row}.actions button{flex:1}.hero{gap:3vw}}
@media (max-width:720px){.topbar{height:auto;min-height:68px;padding:14px 18px}.status{display:none}main{width:min(94vw,620px)}.hero{grid-template-columns:1fr;padding:42px 0 26px;gap:26px}.target-card{padding:20px}.target-stats{gap:7px}.target-stats strong{font-size:15px}.panel-title{align-items:flex-start;flex-direction:column;padding:16px}.mode-tabs,.metric-tabs{width:100%}.mode-tabs button,.metric-tabs button{flex:1}.sim-grid{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--line)}.telemetry{min-height:350px}.map-toolbar{align-items:flex-start;flex-direction:column}.offsets{width:100%;justify-content:space-between}.validation{grid-template-columns:1fr}.checks{grid-template-columns:1fr}.actions{grid-column:auto;flex-direction:column}footer{flex-direction:column;gap:9px}.chart-wrap{height:290px}#mapChart{height:240px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Beginner edition */
.hero { min-height: 380px; }
.hero h1 { max-width: 720px; }
.safe-note { margin-top: 22px; padding: 13px 15px; max-width: 690px; border-left: 3px solid var(--green); background: rgba(71,209,140,.07); color: #aeb8c2; font-size: 12px; line-height: 1.55; }
.safe-note strong { color: #dfe8ed; }
.plain-explanation { margin-top: 21px; padding: 13px 14px; border: 1px solid #303b46; background: #0d1218; color: #9eabb7; font-size: 12px; line-height: 1.55; }
.plain-explanation strong { color: white; }
.beginner-roadmap { margin-bottom: 18px; min-height: 62px; padding: 12px 18px; display: flex; align-items: center; gap: clamp(14px, 2.5vw, 38px); border: 1px solid var(--line); background: #0d1218; color: #929eaa; font-size: 11px; }
.beginner-roadmap>strong { color: var(--red-soft); font: 700 9px var(--mono); letter-spacing: .1em; }
.beginner-roadmap span { white-space: nowrap; }
.beginner-roadmap b { display: inline-grid; place-items: center; width: 23px; height: 23px; margin-right: 7px; border-radius: 50%; background: #202934; color: white; font: 700 10px var(--mono); }
.workspace { grid-template-columns: 1fr; gap: 18px; }
.stacked-title { min-height: 83px; }
.field-block { padding: 20px 24px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(210px,.55fr) 1.45fr; gap: 26px; align-items: center; }
.field-heading strong { display: block; margin-bottom: 5px; font-size: 13px; }
.field-heading span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.mode-tabs button { min-height: 50px; display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 3px; }
.mode-tabs button b { font-size: 11px; }
.mode-tabs button small { font-size: 8px; color: #677482; }
.mode-tabs button.active small { color: #aeb8c2; }
.sim-grid { grid-template-columns: .8fr 1.2fr; min-height: 390px; }
.controls label { position: relative; }
.controls label>span { display: block; color: #c2cbd3; font-size: 10px; }
.controls label>small { display: block; max-width: 410px; margin-top: 6px; color: #6f7b88; font: 9px/1.4 var(--sans); text-transform: none; letter-spacing: 0; }
.controls output { position: absolute; top: 0; right: 0; }
.gauges>div>span small { display: block; margin-top: 5px; max-width: 320px; color: #64717d; font: 9px/1.35 var(--sans); text-transform: none; }
.editor-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.editor-selectors label { padding: 20px 24px; background: #11171e; }
.editor-selectors strong, .editor-selectors small { display: block; }
.editor-selectors strong { margin-bottom: 6px; font-size: 12px; }
.editor-selectors small { min-height: 30px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.editor-selectors select { width: 100%; height: 42px; margin: 13px 0 0; padding: 0 12px; font-size: 12px; }
.edit-message { margin: 18px 24px 0; padding: 13px 15px; border-left: 3px solid var(--blue); background: rgba(58,168,255,.07); color: #9eabb7; font-size: 11px; line-height: 1.55; }
.edit-message strong { color: white; }
.column-help { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 16px 24px 0; }
.column-help>div { min-height: 88px; padding: 13px; display: flex; gap: 10px; background: #0c1117; border: 1px solid #252f39; }
.help-number { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border: 1px solid #6b3037; color: var(--red-soft); font: 700 10px var(--mono); }
.column-help p { margin: 0; color: #808c98; font-size: 10px; line-height: 1.5; }
.column-help strong { color: #cbd4db; }
.beginner-matrix { padding: 16px 24px 24px; }
.beginner-matrix table { text-align: left; }
.beginner-matrix th { padding: 9px 10px; color: #8e9aa6; text-align: left; }
.beginner-matrix th small { display: block; margin: 5px 0 0 27px; color: #58636f; font-size: 8px; }
.th-letter { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 5px; border-radius: 50%; background: #27313b; color: white; font: 700 9px var(--mono); }
.beginner-matrix td { padding: 9px 10px; text-align: left; }
.beginner-matrix td:first-child { width: 28%; }
.beginner-matrix td:first-child strong { display: block; color: white; font-size: 12px; }
.beginner-matrix td:first-child small { display: block; margin-top: 3px; color: #626e7a; font: 9px var(--sans); }
.number-field { position: relative; display: block; width: min(100%, 220px); }
.number-field input { width: 100%; height: 38px; padding: 0 49px 0 12px; border: 1px solid #34404b; background: #0a0f14; color: white; outline: none; font: 600 12px var(--mono); }
.number-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(58,168,255,.13); }
.number-field span { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); color: #65717d; font: 9px var(--mono); pointer-events: none; }
.locked-row { opacity: .58; }
.locked-row input { cursor: not-allowed; background: #151a20; border-style: dashed; }
.chart-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px 0; border-top: 1px solid var(--line); }
.chart-toggle-row>div:first-child strong, .chart-toggle-row>div:first-child small { display: block; }
.chart-toggle-row>div:first-child strong { font-size: 12px; }
.chart-toggle-row>div:first-child small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.editor-panel .chart-wrap { height: 330px; }
.actions button:disabled { opacity: .4; cursor: not-allowed; }
.validation { grid-template-columns: 1.35fr .9fr auto; }

@media (min-width: 1051px) {
  .actions button { min-width: 205px; }
}
@media (max-width: 820px) {
  .beginner-roadmap { align-items: flex-start; flex-direction: column; gap: 10px; }
  .field-block, .editor-selectors { grid-template-columns: 1fr; }
  .column-help { grid-template-columns: 1fr; }
  .column-help>div { min-height: 0; }
}
@media (max-width: 720px) {
  .hero { min-height: 0; }
  .safe-note { font-size: 11px; }
  .target-stats { grid-template-columns: 1fr; }
  .field-block { padding: 17px; gap: 14px; }
  .sim-grid { grid-template-columns: 1fr; }
  .mode-tabs button { padding: 8px 4px; }
  .mode-tabs button small { display: none; }
  .editor-selectors label { padding: 17px; }
  .edit-message { margin: 15px 17px 0; }
  .column-help { padding: 14px 17px 0; }
  .beginner-matrix { padding: 12px 17px 20px; }
  .beginner-matrix th small { display: none; }
  .beginner-matrix th, .beginner-matrix td { padding: 8px 5px; }
  .beginner-matrix td:first-child { width: 25%; }
  .number-field input { padding-left: 8px; padding-right: 35px; }
  .number-field span { right: 6px; }
  .chart-toggle-row { align-items: flex-start; flex-direction: column; padding: 17px 17px 0; }
  .chart-toggle-row .metric-tabs { width: 100%; }
}