.site-header { 
  padding: 12px 16px; 
  background: #ffffff; 
  border-bottom: 1px solid #e5e7eb; 
  position: sticky; 
  top: 0; 
  z-index: 2; 
}
#main { 
  font-size: 22px; 
    margin: 0; 
}

.app { 
    display: 
    flex; 
    min-height: calc(100% - 57px); 
}

#palette { 
  /* Left column containing blocks (top) and properties (bottom) */
  width: 360px; 
  padding: 16px; 
  background: #fafafa; 
  border-right: 1px solid #e5e7eb; 
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  height: calc(100vh - 80px);
}
#palette h2 { 
    font-size: 16px; 
    margin: 0 0 8px; 
}
.hint { font-size: 
    12px; 
    color: #6b7280; 
}

.palette-list { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }

/* Make palette items square and center their content */
.block.palette { aspect-ratio: 1 / 1; display:flex; align-items:center; justify-content:center; padding: 0; }
.block.palette .component-label { margin: 0; font-size: 14px; }

/* Blocks area sits in the upper 40% of the left column; properties take remaining 60% */
.blocks-area { flex: 0 0 40%; overflow: auto; }

#properties { flex: 1 1 60%; overflow: auto; }

.main-area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.workspace-wrap { display: flex; align-items: stretch; justify-content: center; width: 100%; gap: 16px; }
.workspace-wrap.dark { display: flex; align-items: stretch; justify-content: center; width: 100%; gap: 16px; color: #083183;}

/* White workspace square */
#workspace { width: 820px; height: 820px; max-width: 90vmin; max-height: 90vmin; background: #f8f8f8; border: 2px solid #111827; border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
#workspace.dark { width: 820px; height: 820px; max-width: 90vmin; max-height: 90vmin; background: #aeaeae; border: 2px solid #111827; border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 12px 24px rgba(0,0,0,0.08); }

/* Logic Gates */
.block[data-type="and"],
.block[data-type="or"] {
  min-height: 60px;
  background: #f8fafc;
  transition: background-color 0.2s ease;
}

.block[data-type="and"] .component-label,
.block[data-type="or"] .component-label {
  color: #1e293b;
}

.block[data-type="and"].powered,
.block[data-type="or"].powered {
  background: #e0f2fe;
  border-color: #0ea5e9;
}

.block[data-type="and"] .input.left[data-powered="true"],
.block[data-type="and"] .input.right[data-powered="true"],
.block[data-type="or"] .input.left[data-powered="true"],
.block[data-type="or"] .input.right[data-powered="true"] {
  background: #38bdf8;
}

.block[data-type="and"] .output[data-powered="true"],
.block[data-type="or"] .output[data-powered="true"] {
  background: #0ea5e9;
}

/* Input/Output indicators for logic gates */
.block[data-type="and"] .input-indicators,
.block[data-type="or"] .input-indicators {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.block[data-type="and"] .input-indicator,
.block[data-type="or"] .input-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
}

.block[data-type="and"] .input-indicator[data-active="true"],
.block[data-type="or"] .input-indicator[data-active="true"] {
  background: #0ea5e9;
}

/* Blocks */
.block { 
  user-select: none; 
  -webkit-user-drag: none; 
  cursor: grab; 
  padding: 4px; 
  border-radius: 8px; 
  border: 1px solid #d1d5db; 
  background: #ffffff;
  color: #111827; 
  font-size: 13px;
  min-width: 60px;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.block:active { cursor: grabbing; }

/* Common block layout */
.block .component-label {
  font-weight: 500;
  text-align: center;
  margin-bottom: 2px;
}

.block .component-image {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Switch specific styling */
.block[data-type="switch"] {
  min-height: 40px;
  padding: 2px 8px;
}
.block[data-type="switch"] .component-image {
  width: 24px;
  height: 2px;
  background: currentColor;
  margin: 4px 0;
  opacity: 0.3;
}
.block[data-type="switch"].on .component-image {
  opacity: 1;
}

/* Palette block styles by type */
.block.palette[data-type="led"] { background: #fee2e2; border-color: #fca5a5; }
.block.palette[data-type="resistor"] { background: #dbeafe; border-color: #93c5fd; }
.block.palette[data-type="battery"] { background: #dcfce7; border-color: #86efac; }
.block.palette[data-type="switch"] { background: #cbd1d9; border-color: #d1d5db; }
/* Gate palette styles */
.block.palette[data-type="and"] { background: #ecfeff; border-color: #67e8f9; }
.block.palette[data-type="or"] { background: #fff7ed; border-color: #fdba74; }

/* Component images */
.block[data-type="led"] .component-image { background-image: url('images/components/led.png'); }
.block[data-type="resistor"] .component-image { background-image: url('images/components/resistor.png'); }
.block[data-type="battery"] .component-image { background-image: url('images/components/battery.png'); }

/* Fallback background colors when images not available */
.block[data-type="led"] .component-image:empty { background-color: #fee2e2; }
.block[data-type="resistor"] .component-image:empty { background-color: #dbeafe; }
.block[data-type="battery"] .component-image:empty { background-color: #dcfce7; }

/* Switch appearance and states */
.block[data-type="switch"] {
  min-width: 60px;
  position: relative;
}
.block[data-type="switch"]::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 2px;
  
  transform: translateY(-50%);
}
.block[data-type="switch"][data-state="off"]::before {
  background: #d1d5db;
}
.block[data-type="switch"][data-state="on"]::before {
  background: #374151;
}
/* Instances inside workspace */
#workspace .block.instance { position: absolute; }

/* Instance block styles by type (match palette look) */
#workspace .block[data-type="led"] { background: #fee2e2; border-color: #fca5a5; }
#workspace .block[data-type="resistor"] { background: #dbeafe; border-color: #93c5fd; }
#workspace .block[data-type="battery"] { background: #dcfce7; border-color: #86efac; }
/* Gate instances */
#workspace .block[data-type="and"] { background: #ecfeff; border-color: #67e8f9; }
#workspace .block[data-type="or"] { background: #fff7ed; border-color: #fdba74; }

/* Output indicator for gates */
#workspace .block[data-type="and"][data-output-powered="true"]::after,
#workspace .block[data-type="or"][data-output-powered="true"]::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  
  background: #10b981;
  box-shadow: 0 0 8px rgba(16,185,129,0.6);
}

/* Gate connector layout: two inputs on left (evenly spaced), one output on right (center) */
#workspace .block[data-type="and"] .input.left,
#workspace .block[data-type="or"] .input.left {
  position: absolute;
  left: -8px;
  width: 12px;
  height: 12px;
  
  z-index: 60;
}

#workspace .block[data-type="and"] .input.right,
#workspace .block[data-type="or"] .input.right {
  position: absolute;
  right: -8px; /* for blocks that might still use right as output */
  width: 12px;
  height: 12px;
  z-index: 60;
}

/* position the two input connectors on the left side (use .input.left and .input.right as the two inputs)
   and place the explicit output connector on the right middle */
#workspace .block[data-type="and"] .input.left,
#workspace .block[data-type="or"] .input.left,
#workspace .block[data-type="and"] .input.right,
#workspace .block[data-type="or"] .input.right {
  position: absolute;
  left: -8px;
  width: 12px;
  height: 12px;
  
  z-index: 60;
}

/* First input (visually higher) */
#workspace .block[data-type="and"] .input.left { top: 28%; }
#workspace .block[data-type="or"] .input.left { top: 28%; }

/* Second input (visually lower) */
#workspace .block[data-type="and"] .input.right { top: 72%; }
#workspace .block[data-type="or"] .input.right { top: 72%; }

/* output connector on right middle */
#workspace .block[data-type="and"] .input.output,
#workspace .block[data-type="or"] .input.output,
#workspace .block[data-type="and"] .input.out,
#workspace .block[data-type="or"] .input.out {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  
  z-index: 60;
}

/* Dragging clone that follows pointer before placement */
.block.dragging { opacity: 0.85; pointer-events: none; }

/* Helper focus ring when workspace is focused */
#workspace:focus { outline: 3px solid #60a5fa; outline-offset: 2px; }

.block .input {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #111827;
  border-radius: 3px; /* square-ish */
  top: 50%;
  transform: translateY(-50%);
}
.block .input.left { left: -6px; }
.block .input.right { right: -6px; }

.wire-layer {
  z-index: 0;
}

/* Position the SVG wire layer absolutely to fill the workspace */
.wire-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#workspace .block.instance {
  z-index: 1;
}

/* Hover blurb styles */
.hover-blurb {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  pointer-events: none;
  transition: all 0.2s ease;
  max-width: 280px;
  transform: translate(-50%, 0);
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hover-blurb.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -8px);
}

.hover-blurb .hb-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.hover-blurb .hb-desc {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.4;
}

.input {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #111827;
  border-radius: 3px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.input.left { left: -6px; }
.input.right { right: -6px; }

/* polarity markers */
.input.anode, .input.cathode { box-shadow: 0 0 0 2px rgba(0,0,0,0.1) inset; background: #374151; }

.input.selected {
  background: #3b82f6;
  box-shadow: 0 0 4px #3b82f6;
}

/* LED powered state */
.block[data-type="led"].powered {
  /* base look when powered; --led-intensity (0..1) controls brightness */
  --led-intensity: 0.6;
  background: color-mix(in srgb, #fff  calc(80% - var(--led-intensity) * 40%), #fffbeb);
  border-color: color-mix(in srgb, #f59e0b calc(40% + var(--led-intensity) * 60%), #f59e0b);
  box-shadow: 0 0 calc(6px + var(--led-intensity) * 18px) rgba(245,158,11, calc(0.15 + var(--led-intensity) * 0.5));
}

/* Context menu minimal styling (created dynamically) */
.ct-context-menu { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; position: absolute; background: #fff; border: 1px solid #ddd; padding: 6px 8px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); font-size: 13px; z-index: 9999; display: none; }
.ct-context-menu.visible { display: block; }
.ct-context-menu #ct-delete { cursor: pointer; }
.ct-context-menu .ct-edit { margin-top: 6px; display:flex; gap:6px; align-items:center }
.ct-context-menu input[type="number"] { width: 80px; }

/* Tooltip for component measurements */
.ct-tooltip { position: absolute; background: rgba(0,0,0,0.85); color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 12px; pointer-events: none; z-index: 99999; display: none; }
.ct-tooltip.visible { display: block; }

/* Legend (polarity key) */
.legend { position: fixed; top: 12px; right: 12px; background: rgba(255,255,255,0.96); border: 1px solid #e6e9ee; padding: 8px 10px; border-radius: 8px; font-size: 12px; z-index: 10000; box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.legend .row { display:flex; gap:8px; align-items:center; margin-bottom:4px }
.legend .sw { width:12px; height:12px; border-radius:3px; }
.legend .an { background:#ef4444 }
.legend .ca { background:#3b82f6 }
.legend .hint { color:#6b7280; font-size:11px }

/* Properties panel — make taller / bigger; place actions at the bottom */
#properties {
  width: 320px;
  background: var(--panel-bg);
  border-left: 1px solid rgba(0,0,0,0.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 320px; /* more compact panel */
}
#properties h3 { margin: 0 0 8px; font-size: 16px }
#prop-content { font-size: 14px; min-height: 120px; flex: 1 1 auto; overflow: auto; }
.prop-actions { margin-top: auto; padding-top: 8px; display:flex; gap:4px; align-items:center; justify-content:flex-end; }
.prop-actions button, .prop-actions input[type="file"] { font-size: 13px; padding: 8px 10px; border-radius: 6px }
.prop-actions input[type="file"] { display: none }

/* Hover blurb shown above properties for hovered parts */
#hover-blurb { display:flex; gap:10px; align-items:center; padding:8px; border-radius:8px; background: linear-gradient(90deg,#fff7ed,#ffedd5); border:1px solid #fbbf24; margin-bottom:10px; box-shadow: 0 6px 12px rgba(0,0,0,0.04); }
#hover-blurb { opacity: 0; transform: translateY(8px); transition: opacity 260ms ease, transform 260ms ease; pointer-events: none; }
#hover-blurb.visible { opacity: 1; transform: none; pointer-events: auto; }
#hover-blurb .hb-icon { width:64px; height:64px; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; color:#111827; border:1px solid rgba(0,0,0,0.06); }
#hover-blurb .hb-content { display:flex; flex-direction:column; }
#hover-blurb .hb-title { font-weight:700; font-size:18px; }
#hover-blurb .hb-desc { font-size:15px; color:#374151; }

/* Ensure the #hover-blurb sits in the properties panel (not fixed on the page)
   Override any global .hover-blurb fixed positioning so it aligns with the panel. */
#hover-blurb {
  position: static;
  left: auto;
  top: auto;
  transform: none;
}

/* color variants per part type (applied via JS by adding a class like 'battery' or 'resistor') */
.hover-blurb.battery { background: linear-gradient(90deg,#dcfce7,#ecfdf5); border-color:#34d399; }
.hover-blurb.resistor { background: linear-gradient(90deg,#dbeafe,#eff6ff); border-color:#60a5fa; }
.hover-blurb.led { background: linear-gradient(90deg,#fff7ed,#fff8f1); border-color:#f59e0b; }

/* Small UI color tweaks */
body { background: #f3f4f6; }
.site-header { background: linear-gradient(90deg,#ffffff,#f8fafc); }

/* Layout & theme variables */
:root {
  --bg: #f3f4f6;
  --panel-bg: #f8fafc;
  --muted: #6b7280;
  --text: #111827;
  --accent: #60a5fa;
  --radius: 10px;
  --font-size-base: 17px;
}

body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:var(--text); font-size:var(--font-size-base); background:var(--bg); }

.site-header { padding: 14px 20px; box-shadow: 0 6px 18px rgba(14,18,24,0.04); }
.site-brand { display:flex; gap:12px; align-items:center; }
.logo-mark { width:48px; height:48px; display:flex; align-items:center; justify-content:center; }
.brand-text h1 { margin:0; font-size:20px; letter-spacing: -0.5px; }
.brand-text .subtle { font-size:12px; color:var(--muted); }

/* Slightly bigger base typography for better readability */
h1, h2, h3 { line-height:1.15; }

/* Larger, more prominent hover blurb */
.hover-blurb {
  position: fixed;
  transform: translate(-50%, 0);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  max-width: 280px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hover-blurb .hb-icon { 
  width: 64px; 
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

.hover-blurb .hb-content { 
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hover-blurb .hb-title { 
  font-weight: 700;
  font-size: 18px;
  color: #111827;
  margin-bottom: 6px;
}

.hover-blurb .hb-desc { 
  font-size: 15px;
  color: #4b5563;
  line-height: 1.4;
}

.hover-blurb .hb-extra { 
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.hover-blurb.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -8px);
}

/* color variants per part type (applied via JS by adding a class like 'battery' or 'resistor') */
#hover-blurb.battery { 
  background: linear-gradient(90deg,#dcfce7,#ecfdf5); 
  border-color: #34d399; 
}

#hover-blurb.resistor { 
  background: linear-gradient(90deg,#dbeafe,#eff6ff); 
  border-color: #60a5fa; 
}

#hover-blurb.led { 
  background: linear-gradient(90deg,#fff7ed,#fff8f1); 
  border-color: #f59e0b; 
}

#hover-blurb {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: 8px;
  background: linear-gradient(90deg,#fff7ed,#ffedd5);
  border: 1px solid #fbbf24;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

#hover-blurb.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: blurbPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes blurbPop {
  0% { transform: scale(0.95) translateY(4px); }
  50% { transform: scale(1.02) translateY(-1px); }
  100% { transform: scale(1) translateY(0); }
}

/* Theme toggle */
.theme-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 20000; }
.theme-toggle button { background: linear-gradient(90deg,#fff,#f3f4f6); border:1px solid rgba(0,0,0,0.06); padding:8px 10px; border-radius:999px; cursor:pointer; box-shadow: 0 8px 20px rgba(2,6,23,0.06); font-size:16px; }

/* Dark mode styles */
body.dark { --bg: #0b1220; --panel-bg: #111827; --muted: #9aa4b2; --text: #e6eef6; --accent: #60a5fa; }
body.dark .site-header { background: linear-gradient(90deg,#071127,#0b1220); box-shadow: none; }
body.dark #workspace { background: #f3f4f6; border-color: #111827; }
/* In dark mode, apply grayer shades across sections; keep component blurbs colorful (so text stays dark on them) */
body.dark .legend { background: #0b1220; border-color: rgba(255,255,255,0.04); }
body.dark #properties { background: #0f1724; border-color: rgba(255,255,255,0.04); }
body.dark #palette { background: #0b1220; border-right-color: rgba(255,255,255,0.04); }
body.dark #workspace { background: #e9eef2; border-color: rgba(0,0,0,0.12); }

/* Dark mode hover blurb - keep colorful gradients for better visibility */
body.dark #hover-blurb { 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark #hover-blurb .hb-title { 
  color: #111827;
}

body.dark #hover-blurb .hb-desc { 
  color: #4b5563;
}

/* Keep the same colorful backgrounds in dark mode for better visibility */
body.dark #hover-blurb.battery { 
  background: linear-gradient(90deg,#dcfce7,#ecfdf5);
  border-color: #34d399;
}

body.dark #hover-blurb.resistor { 
  background: linear-gradient(90deg,#dbeafe,#eff6ff);
  border-color: #60a5fa;
}

body.dark #hover-blurb.led { 
  background: linear-gradient(90deg,#fff7ed,#fff8f1);
  border-color: #f59e0b;
}

/* Ensure important action buttons show black text in dark mode (Show Answer / Submit Answer etc.) */
body.dark .prop-actions button,
body.dark .lesson-actions button,
body.dark #answer-modal .modal button,
body.dark .prop-actions input[type="file"] + label {
  color: #000 !important;
}

/* Also ensure any primary simulation buttons in dark mode have readable black text */
body.dark .sim-btn,
body.dark .sim-btn.stop,
body.dark .theme-toggle button {
  color: #000 !important;
}

/* Slight visual refresh for panels */
/* Dark-mode light-gray overrides: replace pure white backgrounds with #f3f4f6 */
body.dark .ct-context-menu { background: #f3f4f6; border-color: rgba(0,0,0,0.06); color: inherit; }
body.dark .hover-blurb { background: #f3f4f6; border-color: rgba(0,0,0,0.06); color: inherit; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
body.dark .hover-blurb .hb-icon { background: #f3f4f6; border-color: rgba(0,0,0,0.06); }
body.dark .theme-toggle button { background: linear-gradient(90deg,#f3f4f6,#e9eef2); border:1px solid rgba(0,0,0,0.06); color: inherit; }
body.dark .lesson-actions button { background: linear-gradient(90deg,#f3f4f6,#e9eef2); border:1px solid rgba(0,0,0,0.06); color: inherit; }
body.dark #answer-modal .modal { background: #f3f4f6; color: inherit; }
body.dark #sim-banner { background: rgba(243,244,246,0.95); border-color: rgba(0,0,0,0.06); color: inherit; }

#properties { background: var(--panel-bg); border-left: 1px solid rgba(0,0,0,0.06); padding: 16px; border-radius: 10px; }
.palette-list .block { font-size: 15px; padding: 12px 14px; }

/* Lesson / Level panel on the right */
#lesson { width: 340px; background: var(--panel-bg); padding: 16px; border-left: 1px solid rgba(0,0,0,0.06); border-radius: 8px; box-sizing: border-box; }
.lesson-top { display:flex; flex-direction:column; gap:6px; margin-bottom: 10px }
.lesson-top label { font-size: 13px; color:var(--muted) }
.lesson-top select { padding:8px 10px; border-radius:6px; border:1px solid rgba(0,0,0,0.08); background:white }
.lesson-body { display:flex; flex-direction:column; gap:12px }
.lesson-heading { font-weight:700; font-size:16px }
.lesson-actions { display:flex; gap:8px }
.lesson-actions button { padding:8px 12px; border-radius:6px; border:1px solid rgba(0,0,0,0.08); background:linear-gradient(90deg,#fff,#f3f4f6); cursor:pointer }
.answer-result { margin-top:8px; padding:8px 10px; background:linear-gradient(90deg,#ecfeff,#f0f9ff); border-radius:6px; border:1px solid #9ee7ff; color:#065f46 }

/* Modal for showing answer image */
#answer-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 30000; }
#answer-modal.visible { display: flex; }
#answer-modal .overlay { position:absolute; inset:0; background: rgba(0,0,0,0.5); }
#answer-modal .modal { position: relative; z-index: 2; background: white; padding: 12px; border-radius: 10px; box-shadow: 0 20px 50px rgba(2,6,23,0.4); max-width: 80vw; max-height: 80vh; display:flex; flex-direction:column; gap:8px }
#answer-modal .modal img { max-width: 90vw; max-height: 70vh; object-fit: contain; display:block }
#answer-modal .modal .close { position:absolute; right:8px; top:8px; background:transparent; border:none; font-size:18px; cursor:pointer }

/* Level tips styling */
.level-tips { background: linear-gradient(90deg,#ffffff,#fbfbfd); border:1px solid rgba(0,0,0,0.04); padding:0px; border-radius:6px; font-size:15px; color:var(--muted) }
.level-tips ol 

/* workspace tweak */
#workspace { box-shadow: 0 16px 36px rgba(2,6,23,0.06); }

/* Level panel tweaks */
#level-desc { margin-top: 0; }

/* Prevent text selection while moving */
.ct-moving { user-select: none; -webkit-user-select: none; }

/* Temporary visual used during hover-debugging to show which block triggered a forced evaluate */
.block.hovered-debug { outline: 2px dashed rgba(96,165,250,0.55); outline-offset: 4px; }

/* Simulation controls in top-right of workspace */
#sim-controls { position: absolute; top: 10px; right: 12px; z-index: 1200; }
.sim-btn { background: linear-gradient(90deg,#10b981,#059669); color: white; border: none; padding: 8px 12px; border-radius: 8px; font-weight: 600; box-shadow: 0 6px 18px rgba(6,95,70,0.12); cursor: pointer; }
.sim-btn.stop { background: linear-gradient(90deg,#ef4444,#b91c1c); box-shadow: 0 6px 18px rgba(185,28,28,0.12); }

.sim-test-btn { display: none; }

/* Simulation banner for errors/status */
#sim-banner { position: absolute; top: 56px; right: 12px; z-index: 1300; background: rgba(255,255,255,0.98); border: 1px solid #f3f4f6; padding: 10px 12px; border-radius: 8px; box-shadow: 0 8px 24px rgba(2,6,23,0.06); display: none; max-width: 320px; }
#sim-banner.visible { display: block; }
#sim-banner.error { border-color: #fee2e2; background: #fff7f7; }
#sim-banner.ok { border-color: #ecfccb; background: #fbfff0; }

/* While simulation is running, subtly dim the palette to discourage edits */
.sim-running #palette { opacity: 0.6; pointer-events: none; }
.sim-running #properties { opacity: 0.9; pointer-events: none; }
/* Light mode (default) */
#workspace {
  background-color: #ffffff; /* white */
  border-color: #111827;
}

/* Dark mode */
body.dark #workspace {
  background: linear-gradient(180deg, white, #9a9c9d);
  border-color: rgba(0,0,0,0.12);
}