/* got rid of all the default browser stuff, margins and padding were messing everything up */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* all my colours in one place so i dont have to hunt them down later
   cv = the blue vacuum colour, ca = orange for atmosphere
   td = dim text, tm = medium text, tb = bright text */
:root {
  --bg:        #0d0f1a;
  --tube-bg:   #07080f;
  --tube-border: rgba(100, 180, 255, 0.3);
  --glass-l:   rgba(255, 255, 255, 0.08);
  --glass-r:   rgba(255, 255, 255, 0.03);
  --tube-glow: rgba(80, 160, 255, 0.1);
  --cv: #60c4ff;
  --ca: #f0a830;
  --cg: #e05050;
  --cd: #50b8e8;
  --td: rgba(200, 220, 255, 0.6);
  --tm: rgba(210, 228, 255, 0.82);
  --tb: #ffffff;
}

/* dark background so the text is actually readable */
body {
  font-family: var(--font-sans, system-ui, sans-serif);
  background: var(--bg);
  color: var(--tb);
}

/* ── Layout ── */

/* main wrapper, flex column so everything stacks down the middle */
.lab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 26px 16px 22px;
}

/* just a thin line to break up the hero from the controls, looks cleaner */
.divline {
  width: 100%;
  max-width: 520px;
  height: 1px;
  background: rgba(100, 180, 255, 0.08);
  margin: 0 0 18px;
}

/* ── Hero ── */

/* the big title bit at the top */
.hero {
  text-align: center;
  margin-bottom: 20px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cv);
  border: 1px solid rgba(74, 179, 255, 0.22);
  background: rgba(74, 179, 255, 0.07);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 11px;
}

/* the little dot that blinks next to the label, makes it look live */
.edot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cv);
  animation: pulse 2s ease-in-out infinite;
}

/* fades in and out like a heartbeat, took me a while to get the timing right */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.htitle {
  font-size: 25px;
  font-weight: 500;
  color: var(--tb);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 7px;
}

.htitle span { color: var(--cv); }

.hdesc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--tm);
  max-width: 420px;
  margin: 0 auto;
}

.hdesc strong {
  color: var(--tb);
  font-weight: 500;
}

/* ── Top bar ── */

/* the row with the buttons and toggle, flex-wrap so it doesnt break on small screens */
.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 18px;
}

/* both buttons share this style */
.lbtn {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.03em;
  border: 1px solid rgba(100, 180, 255, 0.28);
  background: rgba(100, 180, 255, 0.07);
  color: var(--cv);
  transition: background 0.15s, transform 0.1s;
}

.lbtn:hover  { background: rgba(100, 180, 255, 0.16); }
.lbtn:active { transform: scale(0.97); }

/* reset button is more muted, didnt want it to compete with the drop button */
.lbtn.rst {
  border-color: rgba(200, 220, 255, 0.16);
  background: rgba(200, 220, 255, 0.04);
  color: var(--tm);
}

.lbtn.rst:hover { background: rgba(200, 220, 255, 0.09); }

.tgl-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tgl-lbl {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tm);
}

/* the vacuum / atmosphere badge that changes when you flip the toggle */
.etag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 5px;
  transition: all 0.3s;
}

/* blue when in vacuum mode */
.tvac {
  background: rgba(74, 179, 255, 0.1);
  color: var(--cv);
  border: 1px solid rgba(74, 179, 255, 0.22);
}

/* orange when atmosphere is on */
.tatm {
  background: rgba(240, 168, 48, 0.1);
  color: var(--ca);
  border: 1px solid rgba(240, 168, 48, 0.25);
}

/* custom toggle switch - hides the actual checkbox and styles it with CSS
   learned this trick from a youtube tutorial lol */
.tgl {
  position: relative;
  width: 42px;
  height: 22px;
}

.tgl input { opacity: 0; width: 0; height: 0; }

.tgl-t {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: #1a2030;
  border: 1px solid rgba(100, 180, 255, 0.18);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

/* the round knob that slides across */
.tgl-t::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background: #4ab3ff;
  transition: transform 0.2s, background 0.2s;
}

/* when checked, slide the knob over and go orange for atmosphere */
.tgl input:checked + .tgl-t {
  background: #1e2818;
  border-color: rgba(240, 168, 48, 0.28);
}

.tgl input:checked + .tgl-t::before {
  transform: translateX(20px);
  background: var(--ca);
}

/* ── Tubes ── */

/* the two tubes next to each other, aligned at the bottom */
.tubes-row {
  display: flex;
  gap: 32px;
  align-items: flex-end;
}

.tube-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tube-col-lbl {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--td);
}

/* overflow hidden is important here - clips the objects so they dont fall outside the tube */
.tube-outer {
  position: relative;
  width: 120px;
  height: 400px;
  border: 1px solid var(--tube-border);
  border-radius: 14px;
  background: var(--tube-bg);
  overflow: hidden;
}

/* left glass reflection strip, wider and brighter */
.ts1 {
  position: absolute;
  top: 0;
  left: 6px;
  width: 20px;
  height: 100%;
  background: var(--glass-l);
  border-radius: 14px 0 0 14px;
  pointer-events: none;
}

/* right glass reflection, thinner and more subtle */
.ts2 {
  position: absolute;
  top: 0;
  right: 6px;
  width: 9px;
  height: 100%;
  background: var(--glass-r);
  pointer-events: none;
}

/* inset glow to make the tube look like its lit from inside */
.tglw {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 24px var(--tube-glow);
  pointer-events: none;
}

/* the floor line at the bottom of the tube */
.tfloor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(100, 180, 255, 0.1);
  border-top: 1px solid rgba(100, 180, 255, 0.18);
}

/* ── Particles ── */

/* each air molecule dot, JS places them randomly inside the tube */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.5s;
}

/* ap = atmosphere particles visible, vp = vacuum so they disappear */
.ap .particle { opacity: 0.48; }
.vp .particle { opacity: 0; }

/* ── Objects & force vectors ── */

/* the div JS moves up and down to animate the fall */
.obj-wrap {
  position: absolute;
  left: 50%;
  pointer-events: none;
}

/* container for the W and Fr arrows next to each object */
.fvec {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.fvec svg { display: block; }

.fvec-lbl {
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* the little burst that shows when something hits the floor, fades out fast */
.splash {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

/* ── Stats ── */

/* the three stat cards below the tubes */
.stats-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* each individual card */
.sc {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(100, 180, 255, 0.1);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 96px;
  text-align: center;
}

.sn {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--td);
  margin-bottom: 4px;
}

.sv {
  font-size: 16px;
  font-weight: 500;
  color: var(--tb);
}

.su {
  font-size: 10px;
  color: var(--td);
  margin-top: 1px;
}

/* ── Insight & legend ── */

/* the explanation text that pops up after both objects land */
.insight {
  margin-top: 14px;
  min-height: 18px;
  text-align: center;
  font-size: 12px;
  color: var(--td);
  letter-spacing: 0.02em;
  max-width: 480px;
  line-height: 1.6;
}

/* turns blue when theres actually something to say */
.insight.on { color: var(--cv); }

.legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 12px;
}

.li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--td);
}

/* tiny coloured square next to each legend label */
.ld {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.ld{
  width: 8px;
  height: 8px;
  border-radius: 2px;
}