:root {
  /* Smigles palette (CMYK + ink + paper, CRT accents) */
  --cyan: #009fe3;
  --magenta: #e6007e;
  --yellow: #ffed00;
  --ink: #1d1d1b;
  --paper: #f3efe4;
  --bg: #0b0c0a;
  --panel: #121210;
  --panel2: #1b1b18;
  --line: #2f2e2a;
  --text: #f3efe4;
  --muted: #9a958a;
  --accent: #e6007e;
  --amber: #ffed00;
  --blue: #009fe3;
  --red: #ff3b30;
  --green: #5dff8a;
  --r: 10px;
  --font-display: "Bricolage Grotesque", "Arial Black", Impact, sans-serif;
  --font-ui: "Pixelify Sans", "Trebuchet MS", Verdana, sans-serif;
  --font-doc: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --font-crt: "VT323", ui-monospace, monospace;
}
:root[data-theme="light"] { /* the cockpit is intentionally dark; light theme keeps the same palette */ }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0c0a; } }
:root[data-theme="dark"] { --bg: #0b0c0a; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 12.5px/1.45 var(--font-doc); }
body { display: flex; flex-direction: column; overflow: hidden; }
button, select, input { font: inherit; color: inherit; }
button { font-family: var(--font-ui); }
button { background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; cursor: pointer; transition: background .15s, border-color .15s; }
button:hover { border-color: #3a424e; background: #1d222b; }
button.on { background: rgba(230,0,126,.16); border-color: var(--accent); color: #ffc4e3; }
select { background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; }
input[type=range] { accent-color: var(--accent); }

.top { display: flex; align-items: center; gap: 16px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(#141820, #0f1217); flex-wrap: wrap; }
.brand { font: 700 20px/1 var(--font-display); letter-spacing: 2px; }
.brand b { color: var(--accent); }
.brand .logo { color: var(--accent); margin-right: 4px; }
.engine-btn { display: flex; align-items: baseline; gap: 10px; padding: 7px 14px; background: #1a1f28; border-color: #333b47; }
.engine-btn span { font: 700 18px/1 var(--font-display); letter-spacing: .5px; }
.engine-btn small { color: var(--muted); }
.engine-btn i { font-style: normal; color: var(--accent); }
.top-ctrls { display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.top-ctrls label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.top-ctrls .vol input { width: 110px; }

.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 390px; grid-template-rows: minmax(0, 1fr) 236px; gap: 1px; background: var(--line); }
.stage { position: relative; background: #0d0f13; min-height: 0; overflow: hidden; }
.stage #view3d { width: 100%; height: 100%; display: block; cursor: grab; }
.stage #view3d:active { cursor: grabbing; }
.hud { position: absolute; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud.tl { top: 12px; left: 14px; }
.hud.tr { top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.hud.bl { left: 14px; bottom: 12px; }
.hud.br { right: 12px; bottom: 12px; }
.hud-title { font: 700 26px/1 var(--font-display); letter-spacing: .5px; text-shadow: 0 2px 10px #000; }
.hud-specs { color: #b9c0cb; font-size: 12px; margin-top: 4px; text-shadow: 0 1px 6px #000; }
.hud-specs b { color: var(--amber); font-weight: 600; }
.seg { display: flex; background: rgba(14,16,20,.75); border: 1px solid var(--line); border-radius: 8px; padding: 2px; backdrop-filter: blur(6px); }
.seg button { border: 0; background: transparent; padding: 5px 9px; border-radius: 6px; font-size: 12px; }
.seg button.on { background: rgba(230,0,126,.2); color: #ffc4e3; }
.hint { color: #8d95a3; font-size: 11px; background: rgba(10,12,15,.7); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); max-width: 560px; }
.hint b { color: #d9dde3; }
.lamps { display: flex; gap: 6px; flex-wrap: wrap; }
.lamp { font: 600 11px/1 var(--font-display); letter-spacing: 1px; padding: 5px 8px; border-radius: 5px; background: rgba(20,22,27,.8); color: #4a515c; border: 1px solid #23272e; }
.lamp.on { color: #111; background: var(--amber); box-shadow: 0 0 12px rgba(255,237,0,.6); border-color: var(--amber); }
.lamp.red.on { background: var(--red); box-shadow: 0 0 14px rgba(255,59,48,.7); border-color: var(--red); color: #fff; }
.lamp.green.on { background: var(--green); box-shadow: 0 0 12px rgba(41,209,108,.6); border-color: var(--green); }

.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(10,12,16,.55), rgba(10,12,16,.92)); z-index: 5; }
.overlay.hidden { display: none; }
.ov-card { max-width: 460px; text-align: center; padding: 26px; }
.ov-card h1 { font: 700 46px/1 var(--font-display); letter-spacing: 3px; margin: 0 0 10px; }
.ov-card p { color: #b6bdc8; }
.ov-card small { display: block; margin-top: 12px; color: var(--muted); }
button.big { font: 700 22px/1 var(--font-display); letter-spacing: 1.5px; padding: 14px 30px; background: var(--accent); color: #fff; border: 0; border-radius: 10px; box-shadow: 0 6px 30px rgba(230,0,126,.35); }
button.big:hover { background: #ff2b9a; }

.dash { display: grid; grid-template-columns: minmax(400px, 540px) 230px minmax(140px, 1fr); gap: 10px; padding: 8px 12px; background: var(--panel); min-height: 0; }
.gauge { position: relative; min-height: 0; }
.gauge canvas { width: 100%; height: 100%; display: block; }
.controls { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.keyrow { display: flex; gap: 8px; }
.key { flex: 1; font: 700 15px/1 var(--font-display); letter-spacing: 1px; padding: 10px; }
.key.on { background: rgba(41,209,108,.15); border-color: var(--green); color: #b8f5cf; }
.key.start { background: #2a1308; border-color: #6b2c0b; color: #ffb27a; }
.key.start:active, .key.start.on { background: var(--accent); color: #fff; }
.pedal-wrap { display: flex; gap: 8px; align-items: stretch; }
.pedal { position: relative; width: 54px; height: 128px; border-radius: 8px; background: repeating-linear-gradient(0deg, #1b1f26 0 6px, #161a20 6px 12px); border: 1px solid #333b46; cursor: ns-resize; overflow: hidden; touch-action: none; }
.pedal-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #ff5a14, #ffb300); opacity: .85; }
.pedal span { position: absolute; inset: auto 0 6px 0; text-align: center; font: 700 14px/1 var(--font-display); text-shadow: 0 1px 4px #000; }
.gears { display: flex; flex-direction: column; gap: 4px; width: 50px; }
.gears button { padding: 4px 0; }
.gear-num { text-align: center; font: 700 30px/1 var(--font-display); color: var(--amber); padding: 3px 0; background: #0c0e12; border-radius: 6px; border: 1px solid var(--line); }
.col-btns { display: flex; flex-direction: column; gap: 5px; flex: 1; }
button.small { padding: 4px 6px; font-size: 12px; }
button.small.on { background: rgba(61,140,255,.2); border-color: var(--blue); }
.chk { display: flex; gap: 5px; align-items: center; font-size: 11px; color: var(--muted); }
button.dyno { font: 700 14px/1 var(--font-display); letter-spacing: 1px; background: #10213c; border-color: #284d86; color: #a9c8ff; padding: 8px; }
button.dyno.on { background: var(--blue); color: #fff; }
.readouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; align-content: center; overflow: hidden; }
.ro { background: #0d1015; border: 1px solid var(--line); border-radius: 7px; padding: 3px 7px; min-width: 0; }
.ro .k { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro .v { font: 700 18px/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro .v small { font: 500 11px var(--font-doc); color: var(--muted); margin-left: 2px; }
.ro.warn .v { color: var(--red); }

.side { grid-row: 1; grid-column: 2; background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.presets { display: flex; gap: 5px; padding: 10px 10px 4px; flex-wrap: wrap; }
.presets button { font-size: 12px; padding: 5px 8px; }
.tabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 7px 8px; color: var(--muted); font-weight: 500; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); background: transparent; }
.tune { flex: 1; overflow-y: auto; padding: 10px 12px 16px; }
.row { margin-bottom: 11px; }
.row > label { display: flex; justify-content: space-between; font-size: 12px; color: #c6ccd5; margin-bottom: 4px; }
.row > label output { color: var(--amber); font-weight: 600; font-variant-numeric: tabular-nums; }
.row select, .row input[type=range] { width: 100%; }
.row .help { font-size: 11px; color: var(--muted); margin-top: 3px; }
.opts { display: flex; flex-wrap: wrap; gap: 4px; }
.opts button { font-size: 12px; padding: 5px 8px; }
.toggle { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #c6ccd5; }
.toggle input { width: 34px; height: 18px; accent-color: var(--accent); }
.section-note { font-size: 11px; color: var(--muted); border-left: 2px solid var(--accent); padding: 4px 8px; margin: 0 0 12px; background: rgba(230,0,126,.05); }

.plots { grid-row: 2; grid-column: 2; background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.plot-area { flex: 1; min-height: 0; position: relative; }
.plot-area canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dyno-legend { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 10px 6px; font-size: 11px; color: #c6ccd5; }
.dyno-legend span i { display: inline-block; width: 10px; height: 3px; margin-right: 4px; vertical-align: middle; }
.dyno-legend button { font-size: 11px; padding: 1px 6px; margin-left: auto; }

.sheet { position: fixed; inset: 0; background: rgba(5,6,8,.7); display: grid; place-items: center; z-index: 20; backdrop-filter: blur(4px); }
.sheet[hidden] { display: none; }
.sheet-card { width: min(980px, 94vw); max-height: 86vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 20px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { font: 700 26px/1 var(--font-display); margin: 0; letter-spacing: 1px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 14px; }
.card { text-align: left; padding: 12px; border-radius: 10px; background: linear-gradient(160deg, #1a1f28, #12151b); border: 1px solid var(--line); }
.card:hover { border-color: var(--accent); }
.card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.card h3 { margin: 0 0 3px; font: 700 20px/1.1 var(--font-display); }
.card p { margin: 0; color: var(--muted); font-size: 12px; }
.card .chips { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.card .chips span { font-size: 10px; padding: 2px 6px; border-radius: 99px; background: #0c0e12; border: 1px solid var(--line); color: #b9c0cb; }
.card .layout-ico { float: right; color: var(--accent); font: 700 18px var(--font-display); }

@media (max-width: 1100px) {
  body { overflow: auto; }
  .layout { display: flex; flex-direction: column; flex: none; min-height: auto; }
  .layout > * { flex-shrink: 0; }
  .stage { height: 62vh; min-height: 360px; }
  .hud.tr { top: auto; bottom: 52px; }
  .dash { grid-template-columns: 1fr; }
  .cluster { height: 230px; }
  .readouts { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .gauge { height: 220px; }
  .side { max-height: none; }
  .tune { overflow: visible; }
  .plots { height: 300px; }
  .hint { display: none; }
}
@media (max-width: 560px) {
  .top { padding: 8px 16px; }
  .dash { grid-template-columns: 1fr; padding: 8px 16px; }
  .top-ctrls { margin-left: 0; }
}

/* ===================== arcade mode ===================== */
.arcade-only { display: none !important; }
body.arcade .arcade-only { display: revert !important; }
body.arcade .hud.tc.arcade-only { display: flex !important; }
body.arcade .arc-btns.arcade-only { display: flex !important; }
.arcade-btn { font: 700 16px/1 var(--font-display); letter-spacing: 3px; padding: 8px 16px; border-radius: 8px;
  background: #1b1022; border: 1px solid #5b2a6e; color: #d9a7ff; }
.arcade-btn:hover { border-color: #ff2bd6; }
body.arcade .arcade-btn { background: linear-gradient(90deg, #ff2bd6, #7a5cff); color: #fff; border-color: transparent;
  box-shadow: 0 0 18px rgba(255,43,214,.55), 0 0 40px rgba(122,92,255,.35); animation: arcPulse 1.6s ease-in-out infinite; }
@keyframes arcPulse { 50% { box-shadow: 0 0 26px rgba(255,43,214,.85), 0 0 60px rgba(122,92,255,.5); } }
body.arcade { --accent: #ff2bd6; }
body.arcade .brand b, body.arcade .brand .logo { color: #ff2bd6; text-shadow: 0 0 12px rgba(255,43,214,.7); }
body.arcade .stage { box-shadow: inset 0 0 80px rgba(255,43,214,.12); }
body.arcade .tabs button.on { border-bottom-color: #ff2bd6; }
body.arcade .section-note { border-left-color: #ff2bd6; background: rgba(255,43,214,.06); }

.hud.tc { top: 94px; left: 14px; gap: 14px; align-items: center; background: rgba(10,8,16,.72);
  border: 1px solid rgba(255,43,214,.35); border-radius: 12px; padding: 6px 14px; backdrop-filter: blur(6px); box-shadow: 0 0 24px rgba(255,43,214,.18); }
.arc-big { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; max-width: 210px; }
.arc-big span { font: 700 38px/1 var(--font-display); color: #fff; text-shadow: 0 0 14px rgba(255,43,214,.8); font-variant-numeric: tabular-nums; }
.arc-big.psi span { color: #7ad7ff; text-shadow: 0 0 14px rgba(0,190,255,.8); }
.arc-big small { font: 700 13px var(--font-display); letter-spacing: 1.5px; color: #c9a3ff; }
.arc-big em { flex-basis: 100%; font-style: normal; font-size: 10px; color: #a79bb8; }
.arc-big em b { color: #fff; }
.arc-bars { display: flex; flex-direction: column; gap: 5px; width: 150px; }
.arc-bar label { display: flex; justify-content: space-between; font: 700 10px var(--font-display); letter-spacing: 1.2px; color: #c9a3ff; }
.arc-bar label b { color: #fff; }
.arc-bar > div { height: 7px; background: #241b2e; border-radius: 4px; overflow: hidden; }
.arc-bar i { display: block; height: 100%; width: 100%; background: var(--green); transition: width .15s; }
.arc-bar.nos i { background: linear-gradient(90deg, #3d8cff, #7ad7ff); }
.arc-bar.nos.active i { background: linear-gradient(90deg, #7ad7ff, #fff); box-shadow: 0 0 10px #7ad7ff; }
.arc-btns { gap: 5px; }
.arc-btns button { flex: 1; font: 700 13px/1 var(--font-display); letter-spacing: 1px; padding: 7px 4px; }
.nos-btn { background: #0d1d3a; border-color: #2b5fb8; color: #9ccaff; }
.nos-btn.on { background: #7ad7ff; color: #04121f; box-shadow: 0 0 14px #7ad7ff; }
.drag-btn { background: #2a0f26; border-color: #7a2a6b; color: #ffb3ef; }

.drag-cv { position: absolute; left: 10px; right: 10px; bottom: 54px; height: 120px; width: calc(100% - 20px); border-radius: 10px;
  border: 1px solid rgba(255,43,214,.35); z-index: 3; }
.drag-cv[hidden] { display: none; }
.boom { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 70px; z-index: 6; pointer-events: none;
  background: radial-gradient(circle, rgba(255,90,0,.12), rgba(0,0,0,.25)); animation: boomIn .35s ease-out; }
.boom[hidden] { display: none; }
@keyframes boomIn { from { background: rgba(255,120,40,.25); } }
@media (prefers-reduced-motion: reduce) { .boom, .wordmark.big::before, .wordmark.big::after, body.arcade .arcade-btn { animation: none !important; } }
.boom-card { pointer-events: auto; text-align: center; background: rgba(12,8,8,.85); border: 1px solid #ff3b30; border-radius: 14px; padding: 18px 28px; box-shadow: 0 0 40px rgba(255,59,48,.45); }
.boom-card h2 { font: 700 54px/1 var(--font-display); margin: 0; color: #ff5a14; letter-spacing: 4px; text-shadow: 0 0 22px rgba(255,90,20,.9); }
.boom-card p { color: #f1c9c4; margin: 8px 0 14px; }
.toast { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); z-index: 7; pointer-events: none; opacity: 0;
  font: 700 22px/1 var(--font-display); letter-spacing: 1.5px; color: #fff; padding: 10px 18px; border-radius: 10px;
  background: rgba(20,10,24,.85); border: 1px solid #ff2bd6; box-shadow: 0 0 24px rgba(255,43,214,.5); transition: opacity .25s, top .25s; }
.toast.show { opacity: 1; top: 102px; }

.builder { margin-top: 14px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255,43,214,.35); background: linear-gradient(160deg, #1b1222, #121018); }
.b-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.b-head h3 { margin: 0; font: 700 22px/1 var(--font-display); letter-spacing: 1px; }
.b-sum { color: #ff9be9; font-weight: 600; }
.b-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; margin: 12px 0; }
.card.custom { border-style: dashed; border-color: #7a2a6b; background: linear-gradient(160deg, #24122a, #12151b); }
.card.custom h3 { color: #ff9be9; }
@media (max-width: 1100px) { .hud.tc { top: auto; bottom: 96px; left: 50%; transform: translateX(-50%); } .drag-cv { bottom: 96px; } }
@media (max-width: 560px) { .hud.tc { flex-wrap: wrap; justify-content: center; width: calc(100% - 32px); } .arc-big span { font-size: 28px; } }

/* ===================== cluster, tools, damage report, garage ===================== */
.gauge.cluster canvas { width: 100%; height: 100%; display: block; }
.tool-btn { font: 600 13px/1 var(--font-doc); padding: 8px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; }
.tool-btn.rec i { width: 10px; height: 10px; border-radius: 50%; background: #c0392b; display: inline-block; }
.tool-btn.rec.on { border-color: #ff3b30; color: #ffd0cc; background: #2a0e0c; }
.tool-btn.rec.on i { background: #ff3b30; box-shadow: 0 0 10px #ff3b30; animation: recBlink 1s steps(2) infinite; }
.lang-seg { flex: none; }
.lang-seg button { padding: 5px 8px; font-size: 12px; letter-spacing: .06em; color: var(--muted, #8b93a1); }
.lang-seg button.on { background: var(--yellow, #ffed00); color: #111; }
@keyframes recBlink { 50% { opacity: .2; } }

.boom-btns { display: flex; gap: 10px; justify-content: center; }
.boom-btns button:first-child { font-weight: 600; padding: 10px 16px; }

.dmg-panel { position: absolute; right: 12px; top: 92px; z-index: 6; width: 340px; max-height: calc(100% - 160px); overflow: auto;
  background: rgba(10,10,14,.9); border: 1px solid rgba(255,90,20,.5); border-radius: 12px; padding: 8px 10px 10px; backdrop-filter: blur(6px);
  box-shadow: 0 0 30px rgba(255,59,48,.18); }
.dmg-panel[hidden] { display: none; }
.dmg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dmg-head b { font: 700 18px/1 var(--font-display); letter-spacing: 1px; color: #ff9a6a; }
.dmg-head button { padding: 2px 8px; }
.dmg-panel table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 11px; }
.dmg-panel th { color: var(--muted); font-weight: 600; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.dmg-panel td { text-align: center; padding: 3px 2px; border-radius: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dmg-panel td:first-child { color: #cfd5dd; background: transparent; }
.dmg-panel tr.hit td:first-child { color: #ff5a14; font-weight: 800; }
.dmg-panel .ok { background: rgba(41,209,108,.14); color: #7fe3a8; }
.dmg-panel .warn { background: rgba(255,237,0,.18); color: #ffd36b; }
.dmg-panel .bad { background: rgba(255,59,48,.22); color: #ff9a90; }
.dmg-panel .dead { background: #3a0905; color: #ff5a14; box-shadow: inset 0 0 0 1px #ff3b30; }
.dmg-sum { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 8px; margin-top: 8px; font-size: 11px; align-items: center; color: var(--muted); }
.dmg-sum b { text-align: center; padding: 2px 6px; border-radius: 4px; font-size: 11px; }

.garage-note { color: var(--muted); font-size: 12px; margin: 6px 0 10px; }
.garage-save { display: flex; gap: 8px; flex-wrap: wrap; }
.garage-save input { flex: 1; min-width: 200px; background: #0d1015; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; color: var(--text); }
.garage-save button { background: var(--accent); color: #fff; border: 0; font-weight: 700; padding: 9px 16px; }
.card.build { cursor: default; }
.build-btns { display: flex; gap: 6px; margin-top: 10px; }
.build-btns button { font-size: 12px; padding: 5px 10px; }
.build-btns button:first-child { border-color: var(--accent); color: #ffc4e3; }
@media (max-width: 1100px) { .dmg-panel { top: 12px; right: 12px; width: min(340px, calc(100% - 24px)); max-height: calc(100% - 24px); } }
@media (max-width: 1500px) { .engine-btn small { display: none; } .top { gap: 10px; } .top-ctrls { gap: 10px; } .top-ctrls select { max-width: 150px; } }

/* ===================== Smigles branding ===================== */
.brand { display: flex; align-items: baseline; gap: 7px; text-decoration: none; color: var(--paper); }
.wordmark { position: relative; isolation: isolate; font: 800 27px/1 var(--font-display); letter-spacing: -.035em; color: #f6f2e8; margin: 0; }
.wordmark::before, .wordmark::after { content: attr(data-text); position: absolute; inset: 0; z-index: -1; mix-blend-mode: screen; }
.wordmark::before { color: var(--cyan); transform: translate(-2px, -1px); }
.wordmark::after { color: var(--magenta); transform: translate(2px, 1px); }
.brand:hover .wordmark::before { transform: translate(-3px, -2px); }
.brand:hover .wordmark::after { transform: translate(3px, 2px); }
.wm-sub { font: 600 16px/1 var(--font-ui); color: var(--yellow); letter-spacing: 1px; }
.top { background: linear-gradient(#141412, #0e0e0c); border-bottom: 1px solid var(--line); }
.top-ctrls label { font-family: var(--font-ui); letter-spacing: .4px; }
.engine-btn span { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; }
.engine-btn i { color: var(--yellow); }
.tabs button, .lamp, .key, .dyno, .gear-num, .chk, .opts button, .presets button, .seg button, .tool-btn { font-family: var(--font-ui); }
.lamp { font-size: 12px; letter-spacing: .6px; }
.lamp.on { background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: 0 0 12px rgba(255,237,0,.55); }
.lamp.green.on { background: var(--green); color: var(--ink); }
.hud-title { font-weight: 800; letter-spacing: -.02em; }
.hud-specs b { color: var(--yellow); }
.tabs button.on { border-bottom-color: var(--yellow); color: var(--paper); }
.section-note { border-left-color: var(--cyan); background: rgba(0,159,227,.07); }
.ro .v { font-family: var(--font-doc); font-weight: 600; font-size: 16px; }
.ro .k { font-family: var(--font-ui); }
.row > label output { color: var(--yellow); }
input[type=range] { accent-color: var(--magenta); }
.key.start { background: #2a0a1a; border-color: #6e1a45; color: #ff9fd0; }
.key.start:active, .key.start.on { background: var(--magenta); color: #fff; }
.key.on { background: rgba(93,255,138,.12); border-color: var(--green); color: #c4ffd6; }
button.dyno { background: #062436; border-color: #0b5f8a; color: #9fdcff; }
button.dyno.on { background: var(--cyan); color: #fff; }
.gear-num { color: var(--yellow); }
.pedal-fill { background: linear-gradient(0deg, var(--magenta), var(--yellow)); }
button.big { background: var(--magenta); color: #fff; box-shadow: 0 6px 30px rgba(230,0,126,.4); font-family: var(--font-ui); font-weight: 700; }
button.big:hover { background: #ff1a93; }
.card:hover, .card.on { border-color: var(--yellow); }
.card.on { box-shadow: 0 0 0 1px var(--yellow) inset; }
.card h3 { font-weight: 800; letter-spacing: -.01em; }
.card .layout-ico { color: var(--yellow); font-family: var(--font-ui); }
.sheet-head h2 { font-weight: 800; letter-spacing: -.02em; }
.dyno-legend b { color: var(--paper); }

/* start screen in SmiglesOS style */
.overlay { background: radial-gradient(ellipse at center, rgba(11,12,10,.6), rgba(11,12,10,.94)); }
.ov-card { max-width: 520px; }
.ov-os { font: 500 12px var(--font-doc); color: var(--muted); letter-spacing: .4px; }
.wordmark.big { font-size: clamp(64px, 11vw, 120px); margin: 8px 0 0; }
.wordmark.big::before { animation: regB 2.2s cubic-bezier(.2,.7,.2,1) both; }
.wordmark.big::after { animation: regA 2.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes regB { from { transform: translate(-22px, -9px); } to { transform: translate(-4px, -2px); } }
@keyframes regA { from { transform: translate(22px, 11px); } to { transform: translate(4px, 2px); } }
.ov-sub { font: 700 30px/1 var(--font-ui); color: var(--yellow); letter-spacing: 6px; margin: 2px 0 10px; }
.ov-card p { color: #cfcab9; font-size: 13px; }
.ov-card small { font-family: var(--font-doc); }
.ov-back { display: inline-block; margin-top: 14px; color: var(--cyan); font: 500 13px var(--font-doc); text-decoration: none; }
.ov-back:hover { text-decoration: underline; }

/* arcade keeps the magenta/cyan registration look */
.arcade-btn { font-family: var(--font-ui); }
body.arcade .arcade-btn { background: linear-gradient(90deg, var(--magenta), var(--cyan)); }
body.arcade { --accent: #e6007e; }
body.arcade .brand .wm-sub { color: var(--magenta); text-shadow: 0 0 10px rgba(230,0,126,.6); }
.toast { font-family: var(--font-ui); border-color: var(--magenta); }
.boom-card h2 { font-family: var(--font-display); color: var(--yellow); text-shadow: 3px 2px 0 var(--magenta), -3px -2px 0 var(--cyan); }
.boom-hint { font-size: 12px; color: #c9b7b2; margin: -6px 0 12px; }

/* workshop */
table.shop { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12px; margin-bottom: 8px; }
table.shop th { font: 500 11px var(--font-ui); color: var(--muted); text-align: left; }
table.shop td { vertical-align: middle; }
table.shop td:first-child { font: 700 13px var(--font-ui); color: var(--paper); width: 26px; }
.tog { font-size: 11px; padding: 3px 8px; min-width: 44px; }
.tog.on { background: rgba(93,255,138,.12); border-color: #2f7d4a; color: #b8ffcb; }
.tog.off { background: rgba(255,59,48,.18); border-color: #a5281f; color: #ffb4ad; }
.mbar { position: relative; height: 18px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; min-width: 70px; }
.mbar i { position: absolute; left: 0; top: 0; bottom: 0; opacity: .55; }
.mbar span { position: relative; font-size: 11px; padding-left: 5px; line-height: 18px; font-weight: 600; }
table.shop b { font-size: 11px; padding: 2px 6px; border-radius: 4px; }
table.shop b.ok { background: rgba(93,255,138,.12); color: #8dffb0; }
table.shop b.warn { background: rgba(255,237,0,.14); color: #fff38a; }
table.shop b.bad { background: rgba(255,59,48,.2); color: #ff9a90; }
table.shop b.dead, .shop-status b.dead { background: #3a0905; color: #ff5a14; }
.shop-btns button { font-weight: 600; }
.shop-status { margin-top: 8px; font-size: 12px; color: #cfcab9; min-height: 18px; }
.shop-status b { color: var(--yellow); }
.card .card-del { position: absolute; top: 8px; right: 34px; padding: 2px 8px; font: 500 11px var(--font-ui); border: 1px solid #6e1a45; border-radius: 6px; background: #2a0a1a; color: #ff9fd0; cursor: pointer; }
.card .card-del:hover { background: var(--magenta); color: #fff; }
.card { position: relative; }