:root {
  --bg: #0a0a0a;
  --panel: rgba(20, 20, 20, 0.9);
  --accent: #ffa90e;
  --beam: #ffa90e;
  --shifted-trace: #ffa90e;
  --trace: #717581;
}

body {
  margin: 0;
  background: var(--bg);
  color: #eee;
  font-family: "Segoe UI", system-ui, sans-serif;
  display: flex;
}

/* App pages need overflow hidden to prevent scrolling on full-screen canvas */
body.app-page {
  overflow: hidden;
}

.overlay {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.interactive {
  pointer-events: auto;
}

#source-controls {
  top: 20px;
  left: 20px;
  width: 220px;
  background: var(--panel);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #333;
  pointer-events: none; /* allow clicks to pass through panel background */
}
#source-controls > * {
  pointer-events: auto; /* BUT controls inside still receive clicks */
}

#array-panel {
  top: 330px;
  left: 20px;
  width: 220px;
  background: var(--panel);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #333;
  text-align: left;
}

#slownessCanvas {
  background: #000;
  border: 1px solid #444;
  cursor: crosshair;
  display: block;
}

/* Ensure the slowness canvas sits on top of the trace container background
   so the outline doesn't get occluded by stacking contexts. */
#slownessCanvas {
  position: relative;
  z-index: 11;
}

#colorbarCanvas {
  margin-left: 5px;
  background: #000;
  border: 1px solid #444;
}

.domain-canvas {
  background: #000;
  border: 1px solid #444;
  display: block;
  position: relative;
  z-index: 11;
}

#trace-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 40px); /* full window height minus margins */
  max-height: calc(100vh - 40px);
  overflow: hidden; /* prevent unwanted scrollbars */

  position: absolute; /* floating panel */
  top: 20px;
  right: 20px;
  width: 285px; /* snug fit for array response (240px) + colorbar (10px) + margins */
  pointer-events: none; /* allow clicks to pass through panel background */
  background: var(--panel);
  border-radius: 8px;
  border: 1px solid #333;
  box-sizing: border-box;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* subtle shadow for depth */
}

#trace-container > * {
  pointer-events: auto; /* controls inside receive clicks */
}

#trace-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* fill all remaining height */
  overflow: hidden;
}

#beam-area {
  flex: 0 0 auto;
  margin-top: 8px; /* space for NOW marker */
  padding-right: 2px; /* ensure right border is visible */
}

#trace-container h3,
#trace-container label,
#trace-container .dual-button-row,
#trace-container canvas {
  flex: 0 0 auto;
}

#trace-scroll {
  flex: 1 1 auto; /* take whatever height is left */
  overflow-y: auto; /* scroll inside */
  min-height: 0; /* ← THIS IS CRITICAL */
}

#trace-stack canvas {
  width: 100% !important; /* visible width = container width */
  display: block; /* removes inline gutter */
  background: #000; /* dark background for trace buffers */
  height: 60px; /* match canvas height */
}

#beamCanvas {
  width: 100% !important; /* visible width = container width */
  display: block; /* removes inline gutter */
  background: #000; /* dark background */
  height: 120px; /* beam canvas height */
}

/* Trace wrapper styling */
.trace-wrapper {
  position: relative;
  margin-bottom: 8px;
  background: #000;
  border: 1px solid #444;
}

/* Trace label positioning */
.trace-label {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 11px;
  color: #e1e0e5;
  z-index: 1;
  background: rgba(0, 0, 0, 0.7);
  padding: 0 4px;
  border-radius: 2px;
}

/* 3C trace wrapper styling */
.trace-wrapper-3c {
  position: relative;
  margin-bottom: 10px !important;
  background: #000;
  border: 1px solid #444;
  padding: 4px;
  display: block;
  clear: both;
}

.trace-wrapper-3c .trace-label {
  position: relative;
  top: 0;
  left: 0;
  font-size: 10px;
  margin-bottom: 4px;
  display: block;
}

.trace-wrapper-3c .trace-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.trace-wrapper-3c .trace-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px;
  height: 18px !important;
  min-height: 18px !important;
  line-height: 18px !important;
}

/* DAS app: tighter virtual sensor traces to avoid overlap */
.das-trace-stack {
  /* ensure it can scroll if many sensors */
}
.das-trace-stack .trace-row {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  margin-bottom: 4px !important;
}
.das-trace-stack canvas {
  background: #000;
  border: 1px solid #333;
  display: block;
}
.das-trace-stack .trace-row span {
  width: 30px;
  font-size: 10px;
  color: #888;
  flex: 0 0 30px;
}

/* Stronger rules to override global trace-stack canvas sizing in DAS app */
#trace-stack.das-trace-stack {
  display: flex;
  flex-direction: column;
}
#trace-stack.das-trace-stack canvas {
  height: 20px !important; /* enforce visual height */
  max-height: 20px !important;
  width: auto !important; /* avoid global 100% rule so we can size canvas buffer precisely */
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}
#trace-stack.das-trace-stack .trace-row {
  display: flex !important;
  align-items: center !important;
}

.trace-wrapper-3c .component-label {
  font-size: 9px;
  color: #aaa;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.trace-wrapper-3c .trace-canvas {
  flex: 1;
  width: 100% !important;
  height: 18px !important;
  min-height: 18px !important;
  background: #111;
  display: block;
  box-sizing: border-box;
}

/* 3C beam styling */
.beam-3c {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.beam-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px;
  height: 32px !important;
  min-height: 32px !important;
}

.beam-label {
  font-size: 10px;
  color: #aaa;
  width: 14px;
  text-align: center;
}

#trace-scroll,
#trace-stack {
  min-width: 0; /* critical flexbox fix */
  margin-right: 2px;
}

.beam-wrapper {
  width: 100%; /* fill container width */
  display: block; /* not inline-block */
  min-width: 0; /* critical flexbox fix */
}

.now-marker {
  position: absolute;
  top: -18px; /* above canvas */
  right: -3px; /* aligned to right edge */
  color: #bd1f01;
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
}

/* Glow animation */
@keyframes glowPulse {
  0% {
    box-shadow: 0 0 4px rgba(255, 169, 14, 0.3);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 169, 14, 0.9);
  }
  100% {
    box-shadow: 0 0 4px rgba(255, 169, 14, 0.3);
  }
}

@keyframes responseGlowPulse {
  0% {
    box-shadow: 0 0 3px #bd1f0133;
  }
  50% {
    box-shadow: 0 0 8px #bd1f01aa;
  }
  100% {
    box-shadow: 0 0 3px #bd1f0133;
  }
}

/* Base button styling */
.icon-button {
  background: #222;
  border: 1px solid #555;
  color: #ffa90e;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background 0.2s;
}

/* Dimmed/off state for icon buttons (matches noise-toggle visual)
   Apply to any button using the .icon-button class. This reduces SVG
   opacity and nudges stroke color so the control appears muted. */
.icon-button svg {
  transition:
    opacity 0.18s,
    stroke 0.18s,
    fill 0.18s;
}
.icon-button.off svg {
  opacity: 0.3;
  stroke: #666;
}

.text-button {
  background: #222;
  border: 1px solid #555;
  color: #ffa90e;
  border-radius: 4px;
  width: 156px;
  height: 28px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background 0.2s;
}

.icon-button:hover {
  background: #333;
}

.icon-button.paused {
  animation: glowPulse 1.4s infinite ease-in-out;
  border-color: #ffa90e;
}

.icon-button:active {
  background: #444;
}

.icon-button:focus {
  outline: none;
}

.text-button:hover {
  background: #333;
}

.text-button.hidden {
  animation: glowPulse 1.4s infinite ease-in-out;
  border-color: #ffa90e;
}

.text-button:active {
  background: #444;
}

.text-button:focus {
  outline: none;
}

.label-group {
  margin-bottom: 12px;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 60%;
  margin: 0;
  box-sizing: border-box;
  height: 10px;
  border-radius: 6px;
  background: #333; /* default track background; JS may override with gradient */
  outline: none;
}

/* subclass of input type range called range-fullwidth*/
input[type="range"].range-fullwidth {
  width: 100%;
}

/* Keep slider and value on the same line in narrow containers */
.slider-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.slider-control input[type="range"] {
  /* Use a fixed width for sliders so all controls match visually.
     Keep flex disabled so the control and its value stay aligned. */
  flex: 0 0 140px;
  width: 140px;
}
.slider-control span {
  flex: 0 0 auto;
  min-width: 36px;
  text-align: right;
}

/* WebKit track and thumb — make track transparent so the element background gradient shows */
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  -webkit-appearance: none;
  background: transparent;
  border-radius: 6px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #222;
  margin-top: -3px; /* center the thumb */
  cursor: pointer;
}

/* Firefox */
input[type="range"]::-moz-range-track {
  height: 10px;
  background: transparent;
  border-radius: 6px;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #222;
  cursor: pointer;
}
#source-controls .label-group,
#array-panel .label-group {
  width: 100%;
}

#sourceInstructions {
  font-size: 1rem;
  color: #ffa90e;
  margin-top: 2px;
  display: block;
  font-weight: 600;
}

label {
  display: block;
  font-size: 0.75rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

button {
  background: #333;
  color: white;
  border: 1px solid #555;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  margin-top: 5px;
}
button:hover {
  background: #444;
}
.dual-button-row {
  display: flex;
  gap: 8px; /* space between buttons */
}

.dual-button-row button {
  flex: 1; /* make both buttons equal width */
  text-align: center;
}

canvas#mainCanvas {
  display: block;
}
/* OVERLAY CONTAINER */
/* Class-based onboarding overlay (shared) */
.onboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: auto;
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* keep id selector for backwards compatibility */
#onboardOverlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: auto;
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* DARKENED BACKGROUND */
#onboardDim,
.onboard-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.77);
  backdrop-filter: blur(1px);
}

/* MAIN PANEL */
#onboardPanel,
.onboard-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  max-height: 75%;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  background: var(--panel);
  border: 1px solid #444;
  border-radius: 10px;
  padding: 20px 30px;
  color: #eee;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
  width: auto;
  max-width: 85vw;
  box-sizing: border-box;
}

/* Panel variants */
.onboard-panel.welcome-panel {
  display: inline-block; /* fit to content */
  width: auto;
  max-width: 70vw;
}

.onboard-panel.exercise-panel {
  width: 45vw; /* fixed width for exercises */
}

#onboardPanel h2,
.onboard-panel h2 {
  color: var(--accent);
  margin-top: 0;
  font-weight: 400;
}

#onboardPanel h3,
.onboard-panel h3 {
  color: var(--accent);
  margin-top: 0;
  font-weight: 600;
}

.onboard-bullet {
  color: var(--accent);
  font-weight: 600;
}

#onboardPanel ul,
.onboard-panel ul {
  margin-top: 4px;
  margin-bottom: 14px;
}

#onboardPanel button,
.onboard-panel button {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  background: var(--accent);
  color: black;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 20px;
  font-weight: bold;
}

#onboardPanel button:hover,
.onboard-panel button:hover {
  background: #ffc246;
}

/* ARROWS */
.onboard-arrow {
  position: absolute;
  color: var(--accent);
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

/* arrow positions */
#arrow-wavefield {
  top: 50px;
  left: 280px;
}

#arrow-array {
  top: 50px;
  right: 300px;
}

/* remove worksheet-specific CSS; worksheet now uses .onboard-panel styles */

#arraySelect {
  width: 100%;
  background: #222;
  border: 1px solid #555;
  color: #ffa90e;
  padding: 4px;
  border-radius: 4px;
}

/* Collapsible worksheet sections */
.ws-section {
  margin-bottom: 12px;
}
.ws-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  padding: 6px 0;
  cursor: pointer;
}
.ws-toggle:focus {
  outline: 2px solid rgba(255, 169, 14, 0.25);
  outline-offset: 2px;
}
.ws-toggle::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.18s ease;
}
.ws-section:not(.collapsed) .ws-toggle::before {
  transform: rotate(90deg);
}
.ws-body {
  color: #ddd;
  line-height: 1.5;
  margin-left: 0.25rem;
  margin-bottom: 12px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s ease;
}
.ws-section.collapsed .ws-body {
  max-height: 0;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Make <hr> visible on dark panels */
hr {
  border: none;
  height: 1px;
  background: #e1e0e5;
  margin: 10px 0;
}

.lock-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
  transition:
    opacity 0.15s,
    transform 0.15s;
}

.lock-icon:hover {
  opacity: 1;
  transform: scale(1.1);
}

.lock-icon svg {
  width: 18px;
  height: 18px;
  fill: #555; /* unlocked default */
}

/* SHOW/HIDE SVGs */
.icon-locked {
  display: none;
}
.icon-unlocked {
  display: inline;
}

.lock-icon.locked .icon-locked {
  display: inline;
}
.lock-icon.locked .icon-unlocked {
  display: none;
  fill: var(--accent);
}

.lock-icon.unlocked .icon-unlocked {
  display: inline;
  fill: var(--accent);
}
.lock-icon.unlocked .icon-locked {
  display: none;
}
.locked-slider {
  opacity: 0.4;
  pointer-events: none; /* prevents dragging */
}

.locked-value {
  opacity: 0.4;
  pointer-events: none; /* prevents clicking to edit */
}
#wavefieldLabelOverlay {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 22px; /* background padding */
  background: rgba(20, 20, 20, 0.8); /* matches your panel style */
  border: 1px solid #333; /* subtle panel border */
  border-radius: 8px; /* rounded corners */
  color: var(--accent);
  font-size: 24px;
  font-weight: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 2000;
}

#wavefieldLabelOverlay.visible {
  opacity: 1;
}

#sideViewLabelOverlay {
  position: fixed;
  top: 335px;
  left: 20px;
  padding: 6px 10px;
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid #333;
  border-radius: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 2000;
}

#sideViewLabelOverlay.visible {
  opacity: 1;
}

canvas#sideViewCanvas {
  display: block;
  position: fixed;
  top: 355px;
  left: 20px;
  width: 220px;
  border: 1px solid #333;
  box-sizing: border-box;
  border-radius: 4px;
}

#sideViewLabelOverlay.visible {
  opacity: 1;
}

/* DOM overlay for slowness cursor glow */
/* slownessGlow overlay removed — no CSS rules remain */

/* Burger menu styles */
.burger-menu {
  position: relative;
}

.burger-button {
  background: #222;
  border: 1px solid #555;
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background 0.2s;
}

.burger-button:hover {
  background: #333;
}

.burger-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--panel);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 8px 0;
  min-width: 180px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.burger-dropdown.active {
  display: block;
}

.burger-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: #e1e0e5;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}

.burger-menu-item:hover {
  background: rgba(255, 169, 14, 0.1);
  color: var(--accent);
}

.burger-menu-divider {
  height: 1px;
  background: #444;
  margin: 6px 0;
}

.burger-dropdown label {
  display: block !important;
  padding: 8px 16px;
  margin: 0;
  cursor: pointer;
  color: #e1e0e5 !important;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: normal;
  transition: background 0.15s;
  text-transform: none !important;
}

.burger-dropdown label:hover {
  background: rgba(255, 169, 14, 0.1);
  color: var(--accent);
}

.burger-dropdown input[type="checkbox"] {
  margin-right: 8px;
  accent-color: var(--accent);
  vertical-align: middle;
}

/* Special styling for guided exercises menu item */
.burger-menu-item-highlighted {
  font-weight: bold;
  color: var(--accent) !important;
  border-top: 1px solid #444;
  margin-top: 4px;
}

/* Utility classes for consistent styling across pages */
.accent {
  color: var(--accent);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hint-text {
  color: #888;
  font-size: 0.95em;
}

/* ============================================
   INDEX PAGE STYLES
   ============================================ */

/* Page layout */
.index-page {
  display: block;
  padding: 36px;
  background: var(--bg);
  color: #e1e0e5;
}

.index-page .page {
  max-width: 1100px;
  margin: 0 auto;
}

.index-page h1 {
  color: var(--accent);
  margin: 0 0 6px 0;
  font-weight: 400;
}

.index-page p.lead {
  color: #e1e0e5;
  margin: 0 0 20px 0;
}

/* App grid */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 260px);
  gap: 18px;
}

/* App panel cards */
.app-panel {
  position: relative;
  height: 200px;
  max-width: 260px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #111 0%, #171717 60%);
  border: 1px solid #333;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-panel:hover,
.app-panel:focus-within {
  transform: scale(1.035);
  border-color: var(--accent);
  box-shadow:
    0 0 5px var(--accent),
    0 0 0 var(--accent) inset;
}

.app-panel a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

.app-panel .screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-panel .panel-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(20, 20, 20, 0.85);
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--accent);
  font-weight: 600;
  pointer-events: none;
}

/* Planned/preview panels */
.app-panel.planned .panel-label {
  color: #bbb;
  border: 1px dashed #333;
}

.app-panel.planned::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.01) 0 6px,
    transparent 6px 12px
  );
}

/* Hover overlay for app descriptions */
.app-panel .hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  z-index: 5;
}

.app-panel:hover .hover-overlay,
.app-panel:focus-within .hover-overlay {
  opacity: 1;
}

.app-panel .hover-overlay p {
  color: #fff;
  font-size: 1em;
  line-height: 1.5;
  margin: 0;
}

.app-panel .hover-overlay .highlight {
  color: var(--accent);
  font-weight: 600;
}

.app-panel .hover-overlay .start-here {
  display: block;
  margin-top: 12px;
  padding: 6px 12px;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-size: 0.85em;
  border-radius: 4px;
}

/* Collapsible intro section */
.intro-collapsible {
  background: #1a1a1a;
  border-radius: 12px;
  margin-bottom: 28px;
  border: 1px solid #444;
  overflow: hidden;
}

.intro-header {
  padding: 16px 24px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
}

.intro-header:hover {
  background-color: #ffa90e11;
}

.intro-header-text {
  color: var(--accent);
  font-weight: 500;
  margin: 0;
  font-size: 1.1em;
}

.intro-toggle {
  color: var(--accent);
  font-size: 0.9em;
  transition: transform 0.3s ease;
}

.intro-collapsible.expanded .intro-toggle {
  transform: rotate(180deg);
}

.intro-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.intro-collapsible.expanded .intro-content {
  max-height: 2000px;
  transition: max-height 0.5s ease-in;
}

.intro-body {
  padding: 0 24px 24px 24px;
}

.intro-body h2 {
  color: var(--accent);
  margin-top: 0;
  font-weight: 400;
}

.intro-body h3 {
  color: var(--accent);
  margin-top: 20px;
  font-weight: 400;
  font-size: 1.1em;
}

.intro-body .hint-text {
  margin-top: 16px;
}

.intro-body .compact-list {
  margin: 8px 0;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .app-panel {
    height: 150px;
  }
}

/* Attribution footer */
.attribution {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #333;
  text-align: center;
  font-size: 0.85em;
  color: #666;
}

.attribution p {
  margin: 4px 0;
}

.attribution a {
  color: var(--accent);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.attribution a:hover {
  opacity: 1;
}

/* Array menu dropdown (similar to burger menu) */
.array-menu {
  position: relative;
}

.array-button {
  background: #222;
  border: 1px solid #555;
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background 0.2s;
}

.array-button:hover {
  background: #333;
}

.array-button svg {
  display: block;
}

.array-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--panel);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 8px 0;
  min-width: 200px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  max-height: 70vh;
  overflow-y: auto;
}

.array-dropdown.active {
  display: block;
}

.array-dropdown-header {
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #333;
  margin-bottom: 4px;
}

/* Guided Exercises Panel */
#guidedExercisesPanel {
  position: fixed;
  top: 20px; /* default, repositioned by JS */
  left: 20px; /* default, repositioned by JS */
  width: 280px;
  max-height: calc(100vh - 100px);
  background: var(--panel);
  border: 1px solid #444;
  border-radius: 8px;
  z-index: 50;
  display: none;
  overflow: hidden;
  flex-direction: column;
}

#guidedExercisesPanel.open {
  display: flex;
}

.guided-exercises-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #444;
  background: rgba(255, 169, 14, 0.05);
}

.guided-exercises-header h3 {
  margin: 0;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
}

.guided-exercises-close {
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.guided-exercises-close:hover {
  color: #eee;
}

.guided-exercises-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}

.guided-exercise-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid #333;
}

.guided-exercise-item:hover {
  background: rgba(255, 169, 14, 0.08);
}

.guided-exercise-item:last-child {
  border-bottom: none;
}

.guided-exercise-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #555;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: all 0.15s;
}

.guided-exercise-item.completed .guided-exercise-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}

.guided-exercise-checkbox::after {
  content: "✓";
  color: #000;
  font-size: 12px;
  font-weight: bold;
  display: none;
}

.guided-exercise-item.completed .guided-exercise-checkbox::after {
  display: block;
}

.guided-exercise-title {
  flex: 1;
  font-size: 0.85rem;
  color: #ccc;
  line-height: 1.4;
}

.guided-exercise-item.completed .guided-exercise-title {
  color: #888;
  text-decoration: line-through;
}

/* Guided Exercise Detail Panel */
#guidedExerciseDetail {
  position: fixed;
  top: 20px; /* default, repositioned by JS */
  left: 20px; /* default, repositioned by JS */
  width: 320px;
  max-height: calc(100vh - 100px);
  background: var(--panel);
  border: 1px solid #444;
  border-radius: 8px;
  z-index: 51;
  display: none;
  overflow-y: auto;
}

#guidedExerciseDetail.open {
  display: block;
}

.guided-exercise-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #444;
  background: rgba(255, 169, 14, 0.05);
  position: sticky;
  top: 0;
}

.guided-exercise-detail-header h3 {
  margin: 0;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
}

.guided-exercise-detail-content {
  padding: 16px;
  line-height: 1.6;
  font-size: 0.9rem;
}

.guided-exercise-detail-content p {
  margin: 0 0 12px 0;
}

.guided-exercise-detail-content ul,
.guided-exercise-detail-content ol {
  margin: 8px 0;
  padding-left: 20px;
}

.guided-exercise-detail-content li {
  margin-bottom: 6px;
}

.guided-exercise-detail-content h4 {
  color: var(--accent);
  margin: 16px 0 8px 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.guided-exercise-detail-content code {
  background: #222;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.85em;
}

/* ============================================
   WALKTHROUGH SYSTEM
   ============================================ */

.walkthrough-overlay {
  position: fixed;
  inset: 0;
  /* Overlay sits above app UI so spotlights can appear above panels; the
     walkthrough panel is rendered on top of the spotlights. Use a high
     but explicit z-index to avoid conflicts with app elements. */
  z-index: 10000;
  pointer-events: none;
  font-family: "Segoe UI", system-ui, sans-serif;
}

.walkthrough-dim {
  /* We don't use the full-screen dim element for per-panel dimming.
     Keep it hidden to avoid covering UI. */
  display: none !important;
}

body.walkthrough-dimming .walkthrough-dim {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 9998;
}

/* Per-panel dimming: add .walkthrough-dimmed to panels we want to dim */
.walkthrough-dimmed {
  opacity: 0.36;
  transition: opacity 0.22s ease;
  pointer-events: auto; /* keep interactive but visually muted */
}

/* Ensure highlighted elements are visually on top but do not change layout */
.walkthrough-highlight {
  /* Keep layout unchanged. Avoid forcing z-index on target elements
     (this previously caused the highlighted element to cover the panel).
     Allow the overlay spotlights and the walkthrough panel (which live in
     the overlay) to control stacking instead. */
  opacity: 1 !important;
  overflow: visible !important; /* allow glow to render outside bounds */
}

/* Walkthrough overlay/panel should remain on top */
.walkthrough-dim {
  /* If used, dim should sit above normal UI but below highlighted elements */
  z-index: 9999;
}

.walkthrough-panel {
  z-index: 10002;
}

/* Spotlight that sits over the highlighted target. Use layered, soft
   shadows and a subtle radial gradient to create a natural fall-off. The
   animation gently scales the spotlight and shifts shadow intensity so the
   glow feels alive rather than a hard-edged halo. */
.walkthrough-spotlight {
  position: fixed;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 10002; /* above UI, below walkthrough panel */
  border-radius: 8px;
  /* visible, warm core handled by a blurred ::before pseudo to avoid
     animating heavy shadows. The static box-shadow stack is much stronger
     to create an intense, vivid glow. */
  background: rgba(0, 0, 0, 0);
  /* tightened shadow spreads for a more concentrated glow */
  /* further tightened for a compact, intense glow */
  box-shadow:
    0 6px 18px rgba(255, 169, 14, 0.56),
    0 14px 36px rgba(255, 169, 14, 0.34),
    0 28px 64px rgba(255, 169, 14, 0.18),
    0 0 40px 14px rgba(255, 169, 14, 0.1);
  transition:
    box-shadow 220ms ease,
    transform 220ms ease,
    opacity 200ms ease;
  will-change: transform, opacity;
  animation: wt-spotlight-breathe 6s ease-in-out infinite;
}

.walkthrough-spotlight.hollow {
  /* Hollow ring: keep outer glow but remove any internal core effect */
  background: rgba(0, 0, 0, 0) !important;
}

.walkthrough-spotlight.concentrated {
  /* Concentrated variant: slightly smaller pseudo and sharper shadow */
}

/* Specific rule to prevent inner bright core inside the slownessCanvas
   spotlight - use a ring by masking the center using radial-gradient */
.walkthrough-spotlight.hollow::before {
  /* Remove the inner bright core for slownessCanvas by making the ring
     fully transparent. The outer static box-shadow will be used (if any),
     but no inner glow should appear. */
  background: transparent;
  filter: none;
  opacity: 0;
}

/* Main canvas concentrated variant: reduce pseudo blur and tighten spread */
.walkthrough-spotlight.concentrated::before {
  filter: blur(8px) !important;
  opacity: 0.9;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 169, 14, 0.9) 0%,
    rgba(255, 169, 14, 0.56) 22%,
    rgba(255, 169, 14, 0.28) 40%,
    transparent 70%
  );
}
.walkthrough-spotlight::before {
  content: "";
  position: absolute;
  left: -8%;
  top: -8%;
  width: 116%;
  height: 116%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 169, 14, 0.78) 0%,
    rgba(255, 169, 14, 0.54) 22%,
    rgba(255, 169, 14, 0.32) 40%,
    transparent 68%
  );
  filter: blur(10px);
  pointer-events: none;
  opacity: 1;
  transition: opacity 200ms ease;
  will-change: opacity;
}

.walkthrough-spotlight.subtle {
  box-shadow:
    0 4px 12px rgba(255, 169, 14, 0.48),
    0 10px 24px rgba(255, 169, 14, 0.26),
    0 20px 44px rgba(255, 169, 14, 0.12),
    0 0 32px 10px rgba(255, 169, 14, 0.08);
}

/* Box-shaped spotlight variant used to outline panels such as
   #trace-container. This uses a subtle stroke-like shadow and a faint
   pseudo-element for a clean rectangular highlight. */
.walkthrough-spotlight.box {
  border-radius: 8px;
  background: transparent;
  /* Stronger, more visible panel outline for clarity */
  box-shadow:
    0 0 0 2px rgba(255, 169, 14, 0.22),
    0 12px 32px rgba(255, 169, 14, 0.14),
    0 24px 48px rgba(255, 169, 14, 0.06);
}
.walkthrough-spotlight.box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  /* subtle inner stroke to read as a rectangular highlight */
  box-shadow: inset 0 0 0 1px rgba(255, 169, 14, 0.18);
}
@keyframes wt-spotlight-breathe {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.01);
    opacity: 0.97;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Walkthrough panel sits above everything inside the overlay */
.walkthrough-panel {
  /* Walkthrough panel should float above everything in the overlay */
  z-index: 10003;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel, #1a1a1a);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 12px 16px;
  color: #eee;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 400px;
  max-height: 50vh;
  overflow-y: auto;
  pointer-events: auto;
}

.walkthrough-header {
  text-align: center;
  margin-bottom: 8px;
  position: relative;
}

/* Removed 'Don't show again' control (deprecated). Styles kept commented
   for reference and potential future reintroduction. */
/* .walkthrough-dont-show { ... } */

.walkthrough-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}

.walkthrough-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #444;
  transition: background 0.3s ease;
}

.walkthrough-dot.active {
  background: var(--accent, #ffa90e);
  box-shadow: 0 0 8px var(--accent, #ffa90e);
}

.walkthrough-dot.completed {
  background: #4a4;
}

.walkthrough-title {
  color: var(--accent, #ffa90e);
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.walkthrough-content {
  margin-bottom: 8px;
}

.walkthrough-content p {
  margin: 0 0 8px 0;
  line-height: 1.4;
  font-size: 14px;
}

.walkthrough-content ul {
  margin: 0 0 8px 0;
  padding-left: 18px;
  font-size: 14px;
}

.walkthrough-content li {
  margin-bottom: 4px;
}

.walkthrough-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

.walkthrough-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.walkthrough-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.walkthrough-dont-show-footer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #bdbdbd;
  font-size: 12px;
  background: transparent;
  padding: 2px 6px;
}

.walkthrough-dont-show-footer input {
  width: 14px;
  height: 14px;
}

.walkthrough-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.walkthrough-btn-prev {
  background: #333;
  color: #eee;
}

.walkthrough-btn-prev:hover {
  background: #444;
}

.walkthrough-btn-next,
.walkthrough-btn-finish {
  background: var(--accent, #ffa90e);
  color: #000;
}

.walkthrough-btn-next:hover,
.walkthrough-btn-finish:hover {
  background: #ffc246;
}

.walkthrough-btn-skip {
  background: transparent;
  color: #888;
  border: 1px solid #444;
}

.walkthrough-btn-skip:hover {
  color: #eee;
  border-color: #666;
}

.walkthrough-skip-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mini View */
.walkthrough-mini-view {
  background: #111;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
}

.mini-layout {
  display: flex;
  gap: 6px;
  height: 80px;
}

.mini-left,
.mini-right {
  width: 100px;
  background: #222;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0.5;
  transition:
    opacity 0.3s ease,
    box-shadow 0.3s ease;
}

.mini-left.highlighted,
.mini-right.highlighted {
  opacity: 1;
  box-shadow:
    0 0 0 2px var(--accent, #ffa90e),
    0 0 12px var(--accent, #ffa90e);
}

.mini-center {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mini-canvas {
  flex: 1;
  background: #000;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.mini-waves {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 8px,
    rgba(255, 169, 14, 0.3) 8px,
    rgba(255, 169, 14, 0.3) 10px
  );
  animation: mini-wave-move 2s linear infinite;
}

@keyframes mini-wave-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-20px);
  }
}

.mini-canvas.highlighted {
  box-shadow:
    0 0 0 2px var(--accent, #ffa90e),
    0 0 12px var(--accent, #ffa90e);
}

.mini-panel-label {
  font-size: 8px;
  color: #666;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mini-sliders {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mini-slider-line {
  height: 4px;
  background: #333;
  border-radius: 2px;
}

.mini-slider-line:nth-child(1) {
  width: 70%;
}
.mini-slider-line:nth-child(2) {
  width: 90%;
}
.mini-slider-line:nth-child(3) {
  width: 60%;
}
.mini-slider-line:nth-child(4) {
  width: 80%;
}

.mini-slow-canvas {
  flex: 1;
  background: #1a1a2e;
  border-radius: 4px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #1a1a2e 25%, #2a2a4e 50%, #1a1a2e 75%);
}

.mini-traces {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mini-trace-line {
  height: 3px;
  background: var(--accent, #ffa90e);
  border-radius: 1px;
  opacity: 0.6;
}

.mini-trace-line:nth-child(1) {
  width: 60%;
}
.mini-trace-line:nth-child(2) {
  width: 80%;
}
.mini-trace-line:nth-child(3) {
  width: 50%;
}

.mini-legend {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.mini-tag {
  font-size: 10px;
  padding: 3px 8px;
  background: rgba(255, 169, 14, 0.2);
  color: var(--accent, #ffa90e);
  border-radius: 4px;
}

/* Task List */
.walkthrough-tasks {
  background: #222;
  border-radius: 4px;
  padding: 8px 10px;
  margin-top: 8px;
}

.walkthrough-tasks-title {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.walkthrough-task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.walkthrough-task {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 13px;
  color: #888;
  transition: color 0.2s ease;
}

.walkthrough-task.completed {
  color: #4a4;
}

.walkthrough-task-check {
  width: 18px;
  text-align: center;
  font-size: 12px;
}

.walkthrough-task.completed .walkthrough-task-check {
  color: #4a4;
}

.walkthrough-task-label {
  flex: 1;
}

/* Glow Effect - Prominent */
/* Remove element-level glow styles — we use overlay spotlights instead.
   Keeping these rules can inadvertently create inner bright rings for large
   canvases. Delete the glow class definitions so applying the classes does
   nothing. */
.walkthrough-glow {
  box-shadow:
    0 0 24px rgba(255, 169, 14, 0.32),
    0 12px 36px rgba(255, 169, 14, 0.18);
  transition:
    box-shadow 220ms ease,
    transform 220ms ease;
  border-radius: 6px;
}
.walkthrough-glow-subtle {
  box-shadow: 0 0 12px rgba(255, 169, 14, 0.18);
  transition: box-shadow 220ms ease;
  border-radius: 6px;
}

/* Subtle box glow applied to the container around the slowness canvas when
   steering is active. This produces a clean rectangular glow without any
   bright inner core inside the canvas itself. */
.walkthrough-highlight-box {
  box-shadow:
    0 0 0 2px rgba(255, 169, 14, 0.14),
    0 10px 30px rgba(255, 169, 14, 0.12);
  transition:
    box-shadow 220ms ease,
    transform 220ms ease;
  border-radius: 8px;
}

@keyframes walkthrough-glow-pulse {
  0% {
    box-shadow:
      0 0 30px rgba(255, 169, 14, 0.35),
      0 10px 32px rgba(255, 169, 14, 0.18),
      0 24px 60px rgba(255, 169, 14, 0.1),
      0 0 56px 18px rgba(255, 169, 14, 0.06);
  }
  50% {
    box-shadow:
      0 0 40px rgba(255, 169, 14, 0.48),
      0 16px 44px rgba(255, 169, 14, 0.28),
      0 42px 110px rgba(255, 169, 14, 0.16),
      0 0 96px 30px rgba(255, 169, 14, 0.12);
  }
  100% {
    box-shadow:
      0 0 30px rgba(255, 169, 14, 0.35),
      0 10px 32px rgba(255, 169, 14, 0.18),
      0 24px 60px rgba(255, 169, 14, 0.1),
      0 0 56px 18px rgba(255, 169, 14, 0.06);
  }
}

/* Completion Screen */
.walkthrough-completion {
  text-align: center;
  padding: 20px;
}

.walkthrough-completion-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.walkthrough-completion h2 {
  color: var(--accent, #ffa90e);
  margin: 0 0 12px 0;
}

.walkthrough-completion p {
  margin: 0 0 12px 0;
  color: #aaa;
}

.walkthrough-completion .walkthrough-btn-finish {
  margin-top: 20px;
}