:root{
  --bg:#05111d;
  --bg-deep:#071b2d;
  --bg-primary:#0B2A45;
  --bg-secondary:#0F3554;
  --panel:rgba(9,34,57,.76);
  --panel-strong:rgba(8,29,48,.88);
  --panel-soft:rgba(14,53,84,.66);
  --stroke:rgba(113,193,255,.18);
  --stroke-strong:rgba(129,207,255,.30);
  --text:#FFFFFF;
  --text-soft:#E6EEF6;
  --muted:#7F9BB3;
  --highlight:#69C3FF;
  --accent:#FF8C2A;
  --accent-strong:#FF7A1A;
  --accent-soft:rgba(255,140,42,.18);
  --accent-glow:rgba(255,140,42,.36);
  --grid:rgba(103,195,255,.08);
  --shadow:0 28px 58px rgba(0,8,18,.46);
  --font-display:"Bahnschrift","Aptos Display","Trebuchet MS",sans-serif;
  --font-body:"Aptos","Segoe UI Variable Text","Trebuchet MS",sans-serif;
}

body{
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(circle at 18% 0%, rgba(105,195,255,.18), transparent 36%),
    radial-gradient(circle at 82% 16%, rgba(255,140,42,.12), transparent 28%),
    linear-gradient(180deg, #03101b, #071b2d 42%, #0b2742 100%);
}

.app{
  position:relative;
  isolation:isolate;
  width:min(1180px,96vw);
  margin:20px auto;
  border:1px solid var(--stroke);
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(105,195,255,.12), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(255,140,42,.11), transparent 22%),
    linear-gradient(180deg, rgba(5,19,31,.98), rgba(11,42,69,.98));
  box-shadow:var(--shadow);
}

.app::before,
.app::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.app::before{
  background:
    radial-gradient(circle at 84% 14%, rgba(255,140,42,.16), transparent 22%),
    radial-gradient(circle at 20% 72%, rgba(105,195,255,.12), transparent 28%);
  opacity:.95;
  z-index:0;
}

.app::after{
  background-image:
    linear-gradient(rgba(103,195,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,195,255,.06) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.34;
  z-index:0;
}

.app > *{
  position:relative;
  z-index:1;
}

body.embedMode .app{
  width:min(1180px,100%);
  margin:0 auto;
}

.top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:18px;
  padding:18px 18px 16px;
  border-bottom:1px solid rgba(105,195,255,.10);
}

.heroCopy{
  min-width:0;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,140,42,.28);
  background:rgba(255,140,42,.10);
  color:#FFD2AF;
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.title{
  font-family:var(--font-display);
  font-size:clamp(28px,3.2vw,40px);
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.02;
}

.titleRow{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.agIcon{
  width:46px;
  height:46px;
  display:inline-block;
  flex:0 0 auto;
  filter:drop-shadow(0 0 18px rgba(255,140,42,.24));
}

.titleHighlight{
  color:var(--highlight);
  text-shadow:0 0 18px rgba(105,195,255,.20);
}

.sub{
  font-size:clamp(14px,1.7vw,16px);
  color:var(--text-soft);
  margin-top:10px;
  line-height:1.55;
  max-width:760px;
  opacity:.96;
}

.subHighlight{
  color:var(--highlight);
  font-weight:700;
}

.topRight{
  display:flex;
  align-items:flex-start;
  gap:10px;
  justify-self:end;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(12,46,73,.90), rgba(6,24,39,.82));
  color:var(--text-soft);
  font-size:12px;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,9,18,.16);
}

#stepBadge{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:150px;
  padding:12px 16px;
  font-size:clamp(12px,1.45vw,16px);
  font-weight:800;
  line-height:1;
  border-color:rgba(255,140,42,.38);
  background:linear-gradient(180deg, rgba(18,52,81,.92), rgba(8,26,43,.92));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 1px rgba(255,140,42,.08),
    0 0 28px rgba(255,140,42,.16);
}

#stepBadge .pillLabel{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,206,170,.84);
}

.miniPill{
  padding:7px 11px;
}

.modePill strong,
.legendPill strong{
  color:#fff;
}

.grid{
  display:grid;
  grid-template-columns:.78fr 1.72fr;
  gap:14px;
  padding:0 18px 18px;
  min-height:560px;
}

.card{
  position:relative;
  background:linear-gradient(180deg, rgba(11,42,69,.78), rgba(7,27,45,.84));
  border:1px solid var(--stroke);
  border-radius:28px;
  overflow:hidden;
  backdrop-filter:blur(14px);
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(105,195,255,.10), transparent 30%),
    radial-gradient(circle at bottom right, rgba(255,140,42,.08), transparent 28%);
  pointer-events:none;
}

.card > *{
  position:relative;
  z-index:1;
}

.side{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.panel{
  padding:16px;
}

.introBlock{
  padding:14px;
  border:1px solid rgba(105,195,255,.14);
  border-radius:20px;
  background:
    radial-gradient(circle at top left, rgba(105,195,255,.14), transparent 40%),
    linear-gradient(180deg, rgba(16,55,84,.78), rgba(8,30,50,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.introEyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,140,42,.12);
  border:1px solid rgba(255,140,42,.26);
  color:#FFD2AF;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.introTitle{
  margin:12px 0 8px;
  font-family:var(--font-display);
  font-size:clamp(24px,2.2vw,30px);
  line-height:1.05;
  letter-spacing:.01em;
}

.keyBlue{
  color:var(--highlight);
  text-shadow:0 0 18px rgba(105,195,255,.18);
}

.introCopy{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:var(--text-soft);
}

.introMetrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}

.metricPill{
  min-width:0;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(105,195,255,.12);
  background:rgba(6,24,39,.54);
}

.metricPill strong{
  display:block;
  font-size:13px;
  color:#fff;
  letter-spacing:.01em;
}

.metricPill span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:#FFB779;
}

.panelHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin:18px 0 10px;
  padding-top:16px;
  border-top:1px solid rgba(105,195,255,.12);
}

.panelTitle{
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--highlight);
}

.brandCard{
  padding:16px;
  background:linear-gradient(180deg, rgba(13,44,70,.82), rgba(8,26,43,.90));
}

.brandEyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,140,42,.24);
  background:rgba(255,140,42,.10);
  color:#FFD3B4;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.brandTitle{
  margin:12px 0 8px;
  font-family:var(--font-display);
  font-size:clamp(20px,2vw,26px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:.01em;
  color:#fff;
}

.brandCopy{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--text-soft);
}

.brandMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.brandMeta .pill{
  padding:7px 11px;
  font-size:11px;
  border-color:rgba(105,195,255,.14);
}

.brandLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin-top:16px;
  padding:12px 18px;
  border-radius:14px;
  background:linear-gradient(180deg, var(--accent), var(--accent-strong));
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
  border:1px solid rgba(255,202,161,.48);
  border-bottom:0;
  box-shadow:0 12px 24px rgba(255,122,26,.24), 0 0 26px rgba(255,140,42,.18);
  transition:filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.brandLink:hover{
  color:#fff;
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(255,122,26,.28), 0 0 28px rgba(255,140,42,.24);
}

.group{
  border:1px solid rgba(105,195,255,.12);
  border-radius:18px;
  padding:12px;
  margin-top:12px;
  background:linear-gradient(180deg, rgba(8,30,50,.78), rgba(8,27,45,.66));
}

.groupHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.groupTitle{
  font-weight:800;
  font-size:13px;
  color:#fff;
}

.groupSub{
  color:var(--muted);
  font-size:12px;
}

.rowCtrl{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-top:1px solid rgba(105,195,255,.10);
}

.rowCtrl:first-of-type{
  border-top:0;
  padding-top:0;
}

.rowCtrlSlider{
  grid-template-columns:minmax(108px,auto) 1fr;
}

.rowCtrlTeam{
  grid-template-columns:minmax(108px,auto) 1fr auto;
}

.labelWrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.lbl{
  font-size:12.5px;
  font-weight:700;
  color:var(--text-soft);
}

.valPill{
  font-size:12px;
  min-width:54px;
  text-align:center;
  padding:6px 8px;
  border:1px solid rgba(255,140,42,.24);
  border-radius:999px;
  background:rgba(9,31,49,.90);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

.ctrlStack{
  grid-column:1/-1;
}

.valPillMini{
  min-width:40px;
  padding:4px 6px;
  font-size:11px;
}

.rowCtrl .valPillMini{
  min-width:40px;
  padding:4px 6px;
}

input[type="range"]{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  height:28px;
  accent-color:var(--accent);
}

input[type="range"]::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  border:1px solid rgba(105,195,255,.16);
  background:linear-gradient(90deg, rgba(105,195,255,.20), rgba(255,140,42,.30));
}

input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  margin-top:-6px;
  border-radius:50%;
  border:1px solid rgba(255,213,184,.72);
  background:radial-gradient(circle at 30% 30%, #fff, #FFD7B3 40%, #FF8C2A 100%);
  box-shadow:0 0 0 4px rgba(255,140,42,.14), 0 0 18px rgba(255,140,42,.30);
}

input[type="range"]::-moz-range-track{
  height:8px;
  border-radius:999px;
  border:1px solid rgba(105,195,255,.16);
  background:linear-gradient(90deg, rgba(105,195,255,.20), rgba(255,140,42,.30));
}

input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid rgba(255,213,184,.72);
  background:#FF8C2A;
  box-shadow:0 0 0 4px rgba(255,140,42,.14), 0 0 18px rgba(255,140,42,.30);
}

select,
.btn{
  border:1px solid var(--stroke);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(13,44,70,.88), rgba(8,27,45,.88));
  color:#fff;
  padding:10px 11px;
  font-weight:700;
  font-size:12.5px;
  transition:border-color .16s ease, background .16s ease, filter .16s ease, box-shadow .16s ease, transform .16s ease;
}

select option{
  background:#0B2A45;
  color:#fff;
}

.btn{
  cursor:pointer;
}

.btn:hover,
select:hover{
  border-color:rgba(105,195,255,.30);
  background:linear-gradient(180deg, rgba(16,55,84,.94), rgba(9,31,49,.92));
}

.btnRow{
  display:grid;
  grid-template-columns:.68fr .68fr 1.64fr;
  gap:8px;
  align-items:center;
}

.btnRow > *{
  min-width:0;
}

.btnRow .btn,
.btnRow select{
  height:42px;
  padding:9px 10px;
  font-size:12px;
}

.btnRow #playBtn,
.btnRow #resetBtn{
  height:37px;
  font-size:11.5px;
  font-weight:800;
  padding:6px 8px;
}

.btnRow #playBtn{
  background:linear-gradient(180deg, var(--accent), var(--accent-strong));
  border-color:rgba(255,202,161,.58);
  color:#fff;
  font-weight:900;
  box-shadow:0 10px 24px rgba(255,122,26,.24), 0 0 26px rgba(255,140,42,.18);
}

.btnRow #playBtn:hover{
  filter:brightness(1.06);
  box-shadow:0 14px 28px rgba(255,122,26,.28), 0 0 30px rgba(255,140,42,.24);
}

.btnRow #resetBtn{
  border-color:rgba(105,195,255,.20);
  color:var(--text-soft);
}

.btnRow #speedSel{
  height:42px;
  font-size:13px;
  font-weight:900;
  padding-right:12px;
}

.stateLabel{
  justify-self:end;
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(105,195,255,.22);
  background:rgba(10,34,55,.88);
  color:var(--text-soft);
  white-space:nowrap;
}

.stateBarTrack{
  grid-column:1/-1;
  width:100%;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(105,195,255,.12);
  background:rgba(6,22,36,.92);
  overflow:hidden;
}

.stateBarFill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #69C3FF, #FF8C2A);
  box-shadow:0 0 20px rgba(255,140,42,.18);
  transition:width .2s ease, background-color .2s ease;
}

.hasTip{
  position:relative;
}

.infoBtn{
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid rgba(255,140,42,.28);
  background:rgba(11,42,69,.90);
  color:#FFD1AD;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  cursor:pointer;
  flex:0 0 auto;
  padding:0;
}

.infoTip{
  display:none;
  margin-top:8px;
  padding:10px 11px;
  border-radius:12px;
  border:1px solid rgba(105,195,255,.12);
  background:rgba(6,24,39,.88);
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  grid-column:1/-1;
}

.hasTipOpen .infoTip{
  display:block;
}

.canvasWrap{
  position:relative;
  height:100%;
}

.simInner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
}

.simHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid rgba(105,195,255,.10);
  background:linear-gradient(180deg, rgba(15,53,84,.54), rgba(8,27,45,.24));
  flex-wrap:wrap;
}

.simEyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,140,42,.24);
  background:rgba(255,140,42,.10);
  color:#FFD2AF;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.simHead .h{
  margin-top:10px;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:800;
  line-height:1.05;
  color:#fff;
}

.simHead .muted{
  font-size:13px;
  color:var(--text-soft);
  opacity:.88;
  margin-top:6px;
  line-height:1.45;
  max-width:660px;
}

.simLegend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.legendPill{
  gap:10px;
  border-color:rgba(105,195,255,.18);
}

.legendPill.accent{
  border-color:rgba(255,140,42,.24);
}

.legendDot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--highlight);
  box-shadow:0 0 10px rgba(105,195,255,.32);
}

.legendPill.accent .legendDot{
  background:var(--accent);
  box-shadow:0 0 14px rgba(255,140,42,.34);
}

.canvasHost{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(5,19,31,.72), rgba(11,42,69,.58));
}

.canvasHost::before,
.canvasHost::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.canvasHost::before{
  z-index:0;
  background:
    radial-gradient(circle at 68% 28%, rgba(255,140,42,.12), transparent 18%),
    radial-gradient(circle at 25% 65%, rgba(105,195,255,.10), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(12,53,84,.56), rgba(4,17,29,.90) 72%);
}

.canvasHost::after{
  z-index:0;
  background-image:
    linear-gradient(rgba(103,195,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,195,255,.06) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.34;
  mix-blend-mode:screen;
}

.canvasHost canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
}

.simWatermarks{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}

.simWatermark{
  position:absolute;
  top:56%;
  font:800 clamp(20px,2.6vw,28px) var(--font-display);
  color:rgba(111,183,232,.38);
  opacity:.18;
  text-align:center;
  letter-spacing:.02em;
  white-space:nowrap;
  user-select:none;
  text-transform:none;
}

.simWatermark.left{
  left:18%;
  transform:translate(-50%, -50%) rotate(-12deg);
}

.simWatermark.right{
  left:82%;
  transform:translate(-50%, -50%) rotate(12deg);
}

.stateHud{
  position:absolute;
  right:12px;
  bottom:12px;
  width:min(296px, calc(100% - 24px));
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(105,195,255,.14);
  background:linear-gradient(180deg, rgba(8,29,48,.88), rgba(6,22,36,.90));
  box-shadow:0 16px 34px rgba(0,6,12,.34), 0 0 28px rgba(255,140,42,.08);
  backdrop-filter:blur(12px);
  z-index:3;
  pointer-events:none;
}

.stateHudHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.stateHudTitle{
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--highlight);
}

.stateHud .stateLabel{
  font-size:12px;
  padding:5px 9px;
  background:rgba(11,42,69,.88);
  border-width:1px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

.stateHudMetric{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
  color:var(--muted);
  margin:6px 0;
}

.stateHudMetric strong{
  font-family:var(--font-display);
  font-size:20px;
  color:#fff;
  letter-spacing:.02em;
}

.stateHud .stateBarTrack{
  margin-top:10px;
  height:9px;
}

@media (max-width:980px){
  .grid{
    grid-template-columns:1fr;
    gap:12px;
    padding:0 14px 14px;
    min-height:0;
  }

  .canvasWrap{
    min-height:0;
  }

  .simInner{
    min-height:clamp(340px,62vw,520px);
  }

  .canvasHost{
    min-height:clamp(270px,50vw,430px);
  }
}

@media (max-width:760px){
  .app{
    width:100%;
    margin:0;
    border-radius:0;
    border-left:0;
    border-right:0;
  }

  .top{
    padding:14px;
    grid-template-columns:1fr;
    gap:12px;
  }

  .topRight{
    justify-self:start;
  }

  .agIcon{
    width:38px;
    height:38px;
  }

  .grid{
    gap:10px;
    padding:0 10px 10px;
  }

  .panel{
    padding:10px;
  }

  .introMetrics{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .group{
    padding:10px;
    margin-top:10px;
  }

  .groupTitle{
    font-size:12.5px;
  }

  .groupSub{
    font-size:11.5px;
  }

  .brandCard{
    padding:12px;
  }

  .brandCopy,
  .brandLink{
    font-size:12px;
  }

  .rowCtrl{
    grid-template-columns:minmax(88px,auto) 1fr auto;
    gap:8px;
    padding:8px 0;
  }

  .rowCtrlSlider{
    grid-template-columns:minmax(110px,auto) 1fr;
  }

  .rowCtrlTeam{
    grid-template-columns:minmax(104px,auto) 1fr auto;
  }

  .labelWrap{
    white-space:nowrap;
    gap:6px;
  }

  .lbl{
    font-size:12px;
  }

  .rowCtrl .valPill{
    min-width:46px;
    padding:5px 6px;
  }

  .btnRow{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .btnRow #speedSel{
    grid-column:1/-1;
  }

  .btnRow .btn,
  .btnRow select{
    padding:7px 8px;
  }

  .btnRow #playBtn,
  .btnRow #resetBtn{
    height:35px;
    font-size:11px;
  }

  .btnRow #speedSel{
    height:40px;
  }

  .simHead{
    padding:12px;
  }

  .simLegend{
    justify-content:flex-start;
  }

  .simInner{
    min-height:clamp(300px,74vw,470px);
  }

  .canvasHost{
    min-height:clamp(240px,60vw,360px);
  }

  .stateHud{
    right:6px;
    bottom:6px;
    width:min(170px, calc(100% - 12px));
    padding:7px;
    border-radius:12px;
  }

  .stateHudHead{
    gap:5px;
    margin-bottom:5px;
  }

  .stateHudTitle{
    font-size:8px;
    letter-spacing:.08em;
  }

  .stateHud .stateLabel{
    font-size:8px;
    padding:2px 5px;
  }

  .stateHudMetric{
    gap:4px;
    margin:3px 0;
    font-size:9px;
  }

  .stateHudMetric strong{
    font-size:12px;
  }

  .stateHud .stateBarTrack{
    margin-top:6px;
    height:5px;
  }

  .simWatermark{
    opacity:.22;
  }

  .simWatermark.left{
    left:21%;
  }

  .simWatermark.right{
    left:79%;
  }
}

@media (max-width:460px){
  .titleRow{
    align-items:flex-start;
  }

  .sub{
    max-width:none;
  }

  .panelTitle{
    letter-spacing:.12em;
  }

  .introMetrics{
    grid-template-columns:1fr;
  }

  .simHead .h{
    font-size:19px;
  }

  .simInner{
    min-height:320px;
  }

  .canvasHost{
    min-height:250px;
  }
}