:root {
  --bg: #000000;
  --panel: #0b1523;
  --panel-2: #0d1828;
  --border: #1d2c45;
  --text: #f2f6fc;
  --muted: #8fa2bc;
  --accent: #2f7bf7;
  --led-red: #ff3b30;
  --led-green: #34e07a;
  --led-yellow: #ffd60a;
  --led-off: #1a2436;
  --good: #34e07a;
  --bad: #ff3b30;
  --font-display: "Rajdhani", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: .03em;
}

/* ---------- Underwater backdrop ---------- */
.sea {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% -20%, #0d2440 0%, #071527 45%, #02070f 100%);
}
.sea__rays {
  position: absolute;
  inset: -20% -12%;
  background:
    linear-gradient(115deg, transparent 42%, rgba(90, 160, 255, .06) 47%, transparent 53%),
    linear-gradient(100deg, transparent 28%, rgba(90, 160, 255, .045) 35%, transparent 44%),
    linear-gradient(126deg, transparent 60%, rgba(90, 160, 255, .055) 66%, transparent 73%);
  animation: sea-rays-sway 20s ease-in-out infinite alternate;
}
@keyframes sea-rays-sway {
  from { transform: translateX(-2.5%); }
  to { transform: translateX(2.5%); }
}
.sea__bubble {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .75), rgba(160, 205, 255, .28) 38%, rgba(90, 150, 230, .12) 72%, transparent);
  border: 1px solid rgba(170, 210, 255, .25);
  animation: sea-bubble-rise var(--d) linear infinite;
  animation-delay: var(--delay);
}
@keyframes sea-bubble-rise {
  0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  8% { opacity: var(--o, .3); }
  50% { transform: translate3d(14px, -55vh, 0) scale(.85); opacity: var(--o, .3); }
  100% { transform: translate3d(-10px, -112vh, 0) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sea__rays { animation: none; }
  .sea__bubble { display: none; }
}

header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .8rem 1rem;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand-logo { height: 88px; width: auto; display: block; margin: 0; animation: brand-float 6s ease-in-out infinite; }
@keyframes brand-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo { animation: none; }
}
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.brand-site {
  color: #e0862e;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
}
.brand-site:hover { text-decoration: underline; }
h1 { margin: 0; font-size: 1.5rem; }
.subhead { text-align: center; padding: .9rem 1rem 0; }
.subtitle { color: var(--muted); margin: 0 0 .8rem; font-size: .9rem; }

nav {
  display: inline-flex;
  justify-content: center;
  gap: .25rem;
  background: rgba(11, 21, 35, .8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .3rem;
}
.tab {
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 9px;
  padding: .55rem 1.35rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tab:hover:not(.active) { color: var(--text); background: rgba(47, 123, 247, .12); }
.tab.active {
  color: #fff;
  background: linear-gradient(180deg, #3f8bff, #2364dd);
  box-shadow: 0 0 14px rgba(47, 123, 247, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}

main { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }

.panel {
  display: none;
  background: rgba(13, 24, 40, .68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 12px 32px rgba(0, 0, 0, .35);
}
.panel.active { display: block; animation: panel-in .35s ease; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .panel.active { animation: none; }
}

.disclaimer {
  background: rgba(255, 214, 10, .07);
  border: 1px solid rgba(255, 214, 10, .45);
  border-radius: 10px;
  padding: .35rem 1rem .65rem;
  margin-bottom: 1.25rem;
}
.disclaimer h3 { margin: .6rem 0 .3rem; font-size: 1rem; color: var(--led-yellow); }
.disclaimer p { margin: .25rem 0; color: var(--muted); font-size: .92rem; }

/* ---------- Learn ---------- */
.key-idea li { margin: .3rem 0; }
.ref-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.ref-table th, .ref-table td { border: 1px solid var(--border); padding: .5rem .7rem; text-align: left; }
.ref-table th { background: var(--panel); }
.row-danger td { background: rgba(255, 59, 48, 0.10); }

.sw { padding: .05rem .45rem; border-radius: 4px; font-weight: 600; white-space: nowrap; }
.sw.red { background: rgba(255,59,48,.18); color: #ff7b73; }
.sw.green { background: rgba(52,224,122,.15); color: var(--led-green); }
.sw.yellow { background: rgba(255,214,10,.15); color: var(--led-yellow); }

.callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.callout { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: .25rem 1rem .75rem; }
.callout h3 { margin: .75rem 0 .25rem; font-size: 1.02rem; }
.callout p { color: var(--muted); margin: .25rem 0; }
.cta a { color: var(--accent); }

/* ---------- HUD ---------- */
.hud-wrap { display: flex; flex-direction: column; align-items: center; gap: .6rem; }

/* Landscape device (manual §5.3.1): cable exit, LED array face, buddy end cap. */
.hud {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}
.hud-device {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: radial-gradient(140% 120% at 50% 0%, #101a2e 0%, #070d18 55%, #03060c 100%);
  border: 1px solid #2a3a58;
  border-radius: 26px;
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, .05),
    inset 0 -12px 26px rgba(0, 0, 0, .7),
    0 0 0 5px #0c1220,
    0 0 0 6px #26344f,
    0 10px 30px rgba(0, 0, 0, .7);
}
.hud-cable {
  position: relative;
  width: 30px;
  border-left: 1px solid #22304a;
  border-radius: 0 26px 26px 0;
  background: linear-gradient(180deg, #172034, #090f1c);
}
/* The DiveCAN cable exiting the right end. */
.hud-cable::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 30px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #2f4066, #22304a 60%, rgba(34, 48, 74, 0));
}
.hud-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 1.1rem 1.3rem .9rem;
}
.hud-endcap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .85rem;
  border-right: 1px solid #22304a;
  border-radius: 26px 0 0 26px;
  background: linear-gradient(180deg, #172034, #090f1c);
}
/* When the buddy LED fires, its light emits from the centre and floods
   the whole end cap, filling the left edge of the HUD so it can be seen
   by buddies and other divers. */
.hud-endcap.lit {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 150, 140, .95) 0%,
      rgba(255, 59, 48, .8) 40%,
      rgba(214, 34, 24, .55) 75%,
      rgba(163, 22, 15, .45) 100%),
    linear-gradient(180deg, #172034, #090f1c);
  border-right-color: rgba(255, 90, 76, .55);
  box-shadow:
    inset 0 0 22px rgba(255, 59, 48, .85),
    -6px 0 24px 2px rgba(255, 59, 48, .5);
}

.hud-caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0 .2rem;
}
.cable-label, .buddy-label { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.hud-grid { display: grid; grid-template-columns: repeat(3, auto); gap: .5rem 2.6rem; }
.led {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #232f47, var(--led-off) 60%, #121b2b);
  border: 1px solid #2b3a57;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), inset 0 -1px 2px rgba(255, 255, 255, .05);
  transition: box-shadow 60ms linear;
}
/* Lens highlight so each LED reads as a domed bulb. */
.led::after {
  content: "";
  position: absolute;
  top: 12%; left: 18%;
  width: 40%; height: 28%;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, .3), transparent);
  pointer-events: none;
}
.led.on.red {
  background: radial-gradient(circle at 35% 30%, #ffb0aa, var(--led-red) 55%, #c11c12);
  box-shadow: 0 0 16px 5px rgba(255, 59, 48, .8), inset 0 0 6px rgba(255, 255, 255, .35);
}
.led.on.green {
  background: radial-gradient(circle at 35% 30%, #bdffd9, var(--led-green) 55%, #16a355);
  box-shadow: 0 0 16px 5px rgba(52, 224, 122, .8), inset 0 0 6px rgba(255, 255, 255, .35);
}
.led.on.yellow {
  background: radial-gradient(circle at 35% 30%, #fff3b8, var(--led-yellow) 55%, #d3ad00);
  box-shadow: 0 0 16px 5px rgba(255, 214, 10, .8), inset 0 0 6px rgba(255, 255, 255, .35);
}

.hud-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 0 2.6rem; }
.hud-col-label { width: 26px; text-align: center; color: var(--muted); font-size: .72rem; }

.led.buddy { width: 22px; height: 22px; }

.cycle-row { display: flex; align-items: center; gap: .6rem; }
.cycle-row .cycle-bar { width: 160px; }
.cycle-bar { width: 240px; height: 6px; background: var(--led-off); border-radius: 3px; overflow: hidden; }
.cycle-bar > div { height: 100%; width: 0%; background: linear-gradient(90deg, #1d54b0, var(--accent)); box-shadow: 0 0 8px rgba(47, 123, 247, .55); }
.cycle-count {
  min-width: 6.5em;
  color: var(--muted);
  font-size: .78rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cycle-label { color: var(--muted); font-size: .8rem; margin: 0; }

/* ---------- Simulator ---------- */
.sim-layout { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; }
.sim-controls { display: flex; flex-direction: column; gap: 1rem; }
.link-toggle { color: var(--muted); user-select: none; }

.slider-row { display: grid; grid-template-columns: 5.5rem auto 1fr auto 3.2rem; align-items: center; gap: .55rem; margin: .5rem 0; }
.slider-row label { color: var(--muted); font-size: .9rem; }
.slider-row output { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
/* −/+ nudge buttons: finger-friendly fine control next to each slider. */
.nudge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.nudge:hover { border-color: var(--accent); color: var(--accent); }
.nudge:active { transform: scale(.92); }
/* Bubble-styled range slider. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: #14213a;
  border: 1px solid var(--border);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95), rgba(140, 190, 255, .6) 34%, rgba(47, 123, 247, .9) 72%, #1d54b0);
  border: 1px solid rgba(180, 214, 255, .7);
  box-shadow: 0 0 10px rgba(47, 123, 247, .55);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #14213a;
  border: 1px solid var(--border);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95), rgba(140, 190, 255, .6) 34%, rgba(47, 123, 247, .9) 72%, #1d54b0);
  border: 1px solid rgba(180, 214, 255, .7);
  box-shadow: 0 0 10px rgba(47, 123, 247, .55);
}

.explain { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: .8rem 1rem; color: var(--muted); }
.explain strong { color: var(--text); }
.explain .danger { color: var(--bad); font-weight: 700; }
.explain .safe { color: var(--good); font-weight: 700; }

/* ---------- Signals ---------- */
.signals-intro { color: var(--muted); }
.signal-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.signal-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}
.signal-info h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.signal-info p { margin: .25rem 0; color: var(--muted); font-size: .92rem; }
.signal-info strong { color: var(--text); }
.signal-action { border-left: 3px solid var(--accent); padding-left: .6rem; }

.hud.mini .hud-device { border-radius: 18px; box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, .05),
    inset 0 -8px 18px rgba(0, 0, 0, .65),
    0 0 0 3px #0c1220,
    0 0 0 4px #26344f,
    0 6px 18px rgba(0, 0, 0, .6); }
.hud.mini .hud-cable { width: 18px; border-radius: 0 18px 18px 0; }
.hud.mini .hud-cable::before { width: 18px; height: 5px; }
.hud.mini .hud-face { padding: .75rem .85rem .6rem; gap: .5rem; }
.hud.mini .hud-endcap { padding: 0 .55rem; border-radius: 18px 0 0 18px; }
.hud.mini .hud-caption { display: none; }
.hud.mini .hud-grid { gap: .35rem 1.6rem; }
.hud.mini .led { width: 18px; height: 18px; }
.hud.mini .hud-cols { gap: 0 1.6rem; }
.hud.mini .hud-col-label { width: 18px; font-size: .62rem; }
.hud.mini .led.buddy { width: 15px; height: 15px; }

/* ---------- How to ---------- */
.howto-intro, .howto-note { color: var(--muted); }
.howto-note { font-size: .82rem; }
.howto-intro a { color: var(--accent); }
.signals-intro a { color: var(--accent); }

.howto-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.howto-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-size: .95rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.howto-chip:hover:not(.active) { color: var(--text); border-color: var(--accent); }
.howto-chip.active {
  color: #fff;
  background: linear-gradient(180deg, #3f8bff, #2364dd);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(47, 123, 247, .4);
}

.howto-layout { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; }
.howto-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem 1.1rem;
}
.howto-status {
  margin: 0;
  min-height: 2.4em;
  max-width: 22rem;
  text-align: center;
  color: var(--text);
  font-size: .88rem;
  font-weight: 600;
}

/* The wet-contact push button with a conic hold-progress ring. */
.hold-ring {
  --p: 0;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1turn), rgba(47, 123, 247, .12) 0);
}
.wet-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #2b3a57;
  background: radial-gradient(circle at 35% 30%, #26334d, #131d31 65%, #0a1220);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .08em;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, .07), inset 0 -8px 14px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .5);
  transition: transform .08s ease;
}
.wet-btn:hover { border-color: var(--accent); }
.wet-btn.down {
  transform: scale(.94);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .5);
}
.howto-help { margin: 0; color: var(--muted); font-size: .78rem; }

.howto-guide h3 { margin: .1rem 0 .4rem; font-size: 1.1rem; }
.howto-desc { color: var(--muted); font-size: .92rem; margin: 0 0 .75rem; }
.howto-steps { margin: 0 0 .9rem; padding-left: 1.3rem; }
.howto-steps li { margin: .4rem 0; color: var(--muted); font-size: .92rem; }
.howto-steps li.current { color: var(--text); }
.howto-steps li.current::marker { color: var(--accent); font-weight: 700; }
.howto-steps li.done { color: var(--muted); opacity: .75; text-decoration: line-through; text-decoration-color: rgba(52, 224, 122, .6); }
.howto-steps li.done::marker { color: var(--good); }
.howto-coach {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: .7rem .9rem;
  color: var(--muted);
  font-size: .92rem;
  min-height: 2.6em;
}
.howto-coach strong { color: var(--text); }

/* ---------- Quiz ---------- */
.quiz-card { max-width: 620px; margin: 0 auto; text-align: center; }
.pro-toggle { display: inline-flex; align-items: center; gap: .45rem; margin: .35rem 0 1rem; }
.quiz-timer {
  margin: .1rem 0 .4rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
}
.quiz-timer.urgent { color: var(--bad); animation: quiz-timer-pulse 1s ease-in-out infinite; }
@keyframes quiz-timer-pulse { 50% { opacity: .45; } }
.quiz-head { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: .75rem; }
.quiz-question { font-size: 1.1rem; margin: 1rem 0 .5rem; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; margin: .75rem 0; }
.choices button {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: .7rem .5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.choices button:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(47, 123, 247, .25);
}
.choices button:active:not(:disabled) { transform: translateY(0); }
.choices button:disabled { cursor: default; opacity: .85; }
.choices button.correct { border-color: var(--good); background: rgba(52,224,122,.15); }
.choices button.wrong { border-color: var(--bad); background: rgba(255,59,48,.15); }

.feedback { min-height: 2.4rem; color: var(--muted); margin: .35rem 0; }
.feedback .good { color: var(--good); font-weight: 700; }
.feedback .bad { color: var(--bad); font-weight: 700; }

.btn {
  border: none; border-radius: 8px; padding: .7rem 1.6rem;
  font-size: 1rem; cursor: pointer;
  font-family: var(--font-display);
  letter-spacing: .04em;
  transition: transform .12s ease, box-shadow .15s ease;
}
.btn.primary {
  background: linear-gradient(180deg, #3f8bff, #2364dd);
  color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(47, 123, 247, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(47, 123, 247, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn:active { transform: translateY(1px) scale(.98); }
.hidden { display: none !important; }

/* ---------- Quiz gamification ---------- */
.quiz-streak {
  color: #ffb347;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: .05em;
}
.quiz-streak.pop { animation: streak-pop .4s ease; }
@keyframes streak-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.quiz-best { color: var(--muted); font-size: .92rem; }
.quiz-best .highlight { color: #ffb347; font-weight: 700; }
.quiz-rank {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin: .25rem 0 .5rem;
  color: var(--accent);
}
.quiz-chimp { width: 110px; height: auto; margin: 0 auto; display: block; border-radius: 10px; }
.quiz-chimp.happy { animation: chimp-bounce .9s ease; }
.quiz-chimp.sad { animation: chimp-wobble 1s ease; }
@keyframes chimp-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-16px) rotate(-4deg); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-8px) rotate(3deg); }
}
@keyframes chimp-wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  50% { transform: rotate(5deg); }
  75% { transform: rotate(-3deg); }
}
/* Ephemeral bubbles that rise from the answer area on a correct answer. */
.quiz-card { position: relative; }
.burst-bubble {
  position: absolute;
  bottom: 28%;
  width: var(--s, 10px);
  height: var(--s, 10px);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .9), rgba(160, 205, 255, .45) 40%, rgba(90, 150, 230, .15) 75%, transparent);
  border: 1px solid rgba(170, 210, 255, .4);
  animation: burst-rise var(--d, 1s) ease-out forwards;
}
@keyframes burst-rise {
  0% { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translate3d(var(--dx, 0px), -140px, 0) scale(1.05); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .burst-bubble { display: none; }
  .quiz-streak.pop, .quiz-chimp.happy, .quiz-chimp.sad { animation: none; }
  .quiz-timer.urgent { animation: none; }
}

footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 0 1rem 1.25rem; }
.footer-brand {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

@media (max-width: 760px) {
  .sim-layout { grid-template-columns: 1fr; }
  .callouts { grid-template-columns: 1fr; }
  .signal-card { grid-template-columns: 1fr; justify-items: center; }
  .signal-info { justify-self: stretch; }
  .howto-layout { grid-template-columns: 1fr; }
  .howto-device { justify-self: center; width: 100%; }
}

@media (max-width: 560px) {
  .brand-logo { height: 76px; }
  h1 { font-size: 1.25rem; }
  nav { display: flex; width: 100%; }
  .tab { flex: 1; padding: .55rem .3rem; font-size: .88rem; }
  /* let wide tables scroll within themselves instead of panning the page */
  .ref-table { display: block; overflow-x: auto; }
  /* tighter columns so the slider track keeps a usable length */
  .slider-row { grid-template-columns: 3.8rem auto 1fr auto 2.4rem; gap: .4rem; }
  .slider-row label { font-size: .8rem; }
}