/* Shared UI palette + typography — the "console/knobs" style, used app-wide. */
:root {
  --ui-font: "SF Mono", Menlo, Consolas, monospace;
  --ui-bg: #050505;       /* panel bar background */
  --ui-panel: #0d0d0d;    /* pod / section background */
  --ui-btn: #111;         /* button / item background */
  --ui-btn-hover: #1a1a1a;
  --ui-border: #2a2a2a;   /* section border */
  --ui-btn-border: #333;  /* control border */
  --ui-text: #cfcfcf;
  --ui-text-dim: #bbb;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  font-family: var(--ui-font);
  color: var(--ui-text);
  display: grid;
  grid-template-columns: 220px 3fr 260px; /* narrower right menu (collapsed by default) */
  grid-template-rows: 1fr; /* single row; right column uses its own subgrid */
  gap: 2px;
  min-height: 100vh;
  background: #000;
}

.menu {
  grid-column: 1;
  grid-row: 1;
  background-color: #000;
  height: 100vh;
  padding: 8px 6px;
  overflow-y: auto; /* allow long file lists and options to scroll */
  border-right: 1px solid var(--ui-border);
}

/* File buttons match the console knob/button style. */
.menu button {
  width: 100%;
  padding: 7px 8px;
  margin-bottom: 5px;
  background: var(--ui-btn);
  border: 1px solid var(--ui-btn-border);
  color: var(--ui-text-dim);
  cursor: pointer;
  border-radius: 3px;
  font-family: var(--ui-font);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-align: left;
}

.menu button:hover {
  background: var(--ui-btn-hover);
  color: #fff;
  border-color: #444;
}

.menu label {
  display: block;
  margin-top: 6px;
  color: var(--ui-text-dim);
  font-family: var(--ui-font);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#pinch-toggle {
  accent-color: #888;
}

/* Collapsible data-folder header, styled like a console section label. */
.folder-header {
  font-family: var(--ui-font);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.folder-content button { font-size: 11px; }


.views-container {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  position: relative;
  height: 100vh;
  background: #000;
}

.axial-view, .sagittal-view, .coronal-view {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}

.axial-view {
  grid-row: 1;
}

.sagittal-view {
  grid-row: 2;
}

.coronal-view {
  grid-row: 3;
}

.dynamic-view {
  grid-column: 2; /* shifted left since views column removed */
  grid-row: 1;
  background-color: #000;
  height: 100vh;
  position: relative;
  display: flex;            /* viewer above, console below */
  flex-direction: column;
}

/* The oblique/ultrasound viewer fills all space above the console. */
#viewer-oblique {
  position: relative;       /* anchor VTK absolute canvas */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Grid inner container created at runtime inside #viewer-oblique */
#viewer-oblique > div {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Floating 3D probe/volume overlay, lower-right of the ultrasound view, above the console. */
#probe-overlay {
  position: absolute;
  right: 12px;
  bottom: 104px;             /* clear the 92px console + margin */
  width: 240px;
  height: 200px;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  z-index: 20;
}
#probe-overlay .probe-overlay-label {
  position: absolute;
  top: 4px;
  left: 6px;
  z-index: 2;
  font: 10px/1 "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 1px;
  color: #8aa;
  pointer-events: none;
}
#probe-overlay #viewer-3d {
  width: 100%;
  height: 100%;
  min-height: 0;             /* override the old 260px sidebar sizing */
  position: relative;
  overflow: hidden;
  background: transparent;
  pointer-events: auto;
}

/* ---- Simplified ultrasound console (bottom of the center view) ---- */
#us-console {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 1px;
  height: 92px;
  background: #050505;
  border-top: 1px solid #2a2a2a;
  padding: 8px 10px;
  box-sizing: border-box;
  font-family: var(--ui-font);
}

.us-pod {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  background: #0d0d0d;
  border: 1px solid #222;
}
.us-pod-wide { flex: 1.4 1 0; }
.us-pod-input { flex: 0.8 1 0; }
.us-pod-input .us-mode-btn { padding: 4px 2px; font-size: 9px; letter-spacing: 0.5px; }

.us-label {
  color: #cfcfcf;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.us-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: #333;
  outline: none;
  border-radius: 2px;
}
.us-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
}
.us-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
}

/* Console knobs (ui/knob.js): a 270° arc with the value in the centre. The whole pod is the
   drag handle, so the target stays large for a mouse or a finger. */
.us-pod.us-pod-knob {
  flex: 0 0 auto;
  min-width: 64px;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.us-pod-knob .us-label { cursor: inherit; }
.us-knob { display: block; width: 50px; height: 50px; overflow: visible; outline: none; }
.us-knob-ticks line { stroke: #3a3a3a; stroke-width: 0.8; }
.us-knob-track { fill: none; stroke: #262626; stroke-width: 2.6; stroke-linecap: round; }
.us-knob-value { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.us-knob-pointer { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.us-knob-text { fill: #fff; font-family: var(--ui-font); font-size: 11px; letter-spacing: 0.3px; text-anchor: middle; }
.us-knob-unit { fill: #8a8a8a; font-family: var(--ui-font); font-size: 6.5px; letter-spacing: 0.6px; text-anchor: middle; }
.us-pod-knob:hover .us-knob-track,
.us-pod-knob.dragging .us-knob-track { stroke: #363636; }
.us-knob:focus-visible .us-knob-track { stroke: #555; }
.us-pod-dim .us-label,
.us-pod-dim .us-knob-text { color: #777; fill: #777; }
.us-pod-dim .us-knob-value,
.us-pod-dim .us-knob-pointer { stroke: #5a5a5a; }

/* FREEZE: a large backlit key, like the illuminated freeze key on a scanner console. The
   LED strip and the key glow teal (the notch-mark colour) while the image is frozen. */
.us-pod.us-pod-freeze { flex: 0 0 auto; flex-direction: row; align-items: stretch; gap: 6px; padding: 5px 8px; }
.us-freeze-key {
  position: relative;
  flex: 0 0 auto;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 0 4px;
  background: linear-gradient(#1d1d1d, #0e0e0e);
  color: #cfcfcf;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 #000;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.us-freeze-key:hover { color: #fff; border-color: #555; }
.us-freeze-key:active { transform: translateY(1px); }
.us-freeze-key:focus-visible { outline: 1px solid #777; outline-offset: 2px; }
.us-freeze-led {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 20px;
  height: 3px;
  margin-left: -10px;
  border-radius: 2px;
  background: #2c2c2c;
  transition: background 0.15s, box-shadow 0.15s;
}
.us-freeze-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.us-freeze-key[aria-pressed="true"] {
  color: #a6ead2;
  border-color: #3f9d7f;
  background: linear-gradient(#14271f, #0a1511);
  box-shadow: 0 0 0 1px rgba(63, 157, 127, 0.35), 0 0 16px rgba(63, 157, 127, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.us-freeze-key[aria-pressed="true"] .us-freeze-led { background: #5fd3a9; box-shadow: 0 0 8px #5fd3a9; }
/* SAVE: the same key, narrower and without an LED; flashes the accent once when saved. */
.us-save-key { width: 62px; }
.us-save-key.is-saved { color: #a6ead2; border-color: #3f9d7f; box-shadow: 0 0 12px rgba(63, 157, 127, 0.35); }

.us-modes { display: flex; gap: 4px; }
.us-mode-btn {
  flex: 1 1 0;
  padding: 6px 4px;
  background: #111;
  color: #bbb;
  border: 1px solid #333;
  border-radius: 3px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
}
.us-mode-btn:hover { background: #1a1a1a; color: #fff; }
.us-mode-btn.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}
/* Probe buttons with a transducer icon above the label. Stroke follows the text colour,
   so the icon inverts with the active state. */
.us-probe-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 3px 2px;
}
.us-probe-band { font-size: 8px; letter-spacing: 0; opacity: 0.6; white-space: nowrap; }
.us-probe-icon {
  width: 16px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.us-probe-icon .thin { stroke-width: 1; }
.us-probe-icon .beam { stroke-width: 1; opacity: 0.55; }

/* Right column container: stacked collapsible sections */
.right-panel {
  grid-column: 3; /* shifted left since views column removed */
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100vh;
  background-color: #000;
  position: relative;
  z-index: 0;              /* own stacking context, so the dot field can sit behind the sections */
  overflow-y: auto;
  padding: 6px 4px;
  box-sizing: border-box;
}

/* Dot motif — the same random, graded dots as the printed probe grip. A very faint field
   on the menu background only: denser and larger toward the right edge, fading out to the
   left, never inside controls. Fixed to the viewport so it stays put while the menu scrolls. */
.right-panel::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 260px;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjAiIGhlaWdodD0iNTIwIiB2aWV3Qm94PSIwIDAgMjYwIDUyMCI+PGcgZmlsbD0icmdiKDIyLDIyLDIyKSI+PGNpcmNsZSBjeD0iMjU5LjciIGN5PSI1LjUiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjE5My41IiBjeT0iMTAuNiIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjE5LjQiIGN5PSIxNS45IiByPSIwLjciLz48Y2lyY2xlIGN4PSIyMDAuNSIgY3k9IjI3LjYiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjEzNi42IiBjeT0iMzUuNCIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMzcuMSIgY3k9IjQxLjEiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjE0Ny4xIiBjeT0iNDkuMyIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjQ4LjAiIGN5PSI0NS4xIiByPSIwLjgiLz48Y2lyY2xlIGN4PSIxMjcuMyIgY3k9IjUzLjkiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjI1Ny42IiBjeT0iNTQuMyIgcj0iMS4xIi8+PGNpcmNsZSBjeD0iMTc5LjYiIGN5PSI2Mi45IiByPSIwLjgiLz48Y2lyY2xlIGN4PSIyMTEuNSIgY3k9IjY4LjciIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjE3MS44IiBjeT0iNzMuNyIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjIxLjQiIGN5PSI3MC44IiByPSIwLjYiLz48Y2lyY2xlIGN4PSIxMzkuMiIgY3k9IjgzLjAiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjIxNS4xIiBjeT0iODcuNSIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTY0LjEiIGN5PSIxMDQuNyIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMTkyLjgiIGN5PSIxMDkuOSIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTM5LjMiIGN5PSIxMTguOCIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMjA3LjAiIGN5PSIxMTMuMSIgcj0iMS4xIi8+PGNpcmNsZSBjeD0iMjUwLjIiIGN5PSIxMTkuOCIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTQzLjMiIGN5PSIxMjMuMCIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMTc2LjciIGN5PSIxMjcuOCIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjM2LjMiIGN5PSIxMzcuMCIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMTExLjkiIGN5PSIxNDAuMCIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjA5LjgiIGN5PSIxNDUuNyIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMjIyLjEiIGN5PSIxNTEuNSIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMTQ1LjIiIGN5PSIxNjYuOCIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMjM5LjYiIGN5PSIxNjguOSIgcj0iMS4xIi8+PGNpcmNsZSBjeD0iNzEuNyIgY3k9IjE3OC4yIiByPSIwLjUiLz48Y2lyY2xlIGN4PSIxNTUuNiIgY3k9IjE3My41IiByPSIwLjgiLz48Y2lyY2xlIGN4PSIxMjYuMiIgY3k9IjE4Ni4xIiByPSIwLjgiLz48Y2lyY2xlIGN4PSIyMDUuMCIgY3k9IjE5Ni40IiByPSIwLjgiLz48Y2lyY2xlIGN4PSIxNzQuMCIgY3k9IjIwMC4zIiByPSIwLjciLz48Y2lyY2xlIGN4PSI5NS4xIiBjeT0iMjI0LjkiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjIzNi4yIiBjeT0iMjIyLjIiIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjYxLjciIGN5PSIyMzAuMiIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjU5LjciIGN5PSIyMzQuOSIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTQ2LjciIGN5PSIyNDUuNSIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMTkyLjMiIGN5PSIyNDcuMyIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjA5LjQiIGN5PSIyNDIuMSIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTM3LjUiIGN5PSIyNjcuNSIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjI0LjEiIGN5PSIyODcuNyIgcj0iMS4xIi8+PGNpcmNsZSBjeD0iMjU1LjciIGN5PSIyODYuOCIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTUxLjkiIGN5PSIyOTMuNiIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMTc0LjIiIGN5PSIyOTQuMCIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjU1LjYiIGN5PSIzMDkuOCIgcj0iMS4wIi8+PGNpcmNsZSBjeD0iOTMuNCIgY3k9IjMzNC41IiByPSIwLjgiLz48Y2lyY2xlIGN4PSIxMzcuOSIgY3k9IjMzNS4yIiByPSIwLjYiLz48Y2lyY2xlIGN4PSIxNjIuNyIgY3k9IjMzMy40IiByPSIxLjAiLz48Y2lyY2xlIGN4PSIxODUuNyIgY3k9IjMzNC4xIiByPSIwLjUiLz48Y2lyY2xlIGN4PSIxNzYuMyIgY3k9IjM0Mi40IiByPSIwLjgiLz48Y2lyY2xlIGN4PSIyMjEuMyIgY3k9IjM2OS44IiByPSIwLjkiLz48Y2lyY2xlIGN4PSIyNDAuMyIgY3k9IjM2MS41IiByPSIwLjYiLz48Y2lyY2xlIGN4PSIzNS45IiBjeT0iMzcyLjUiIHI9IjAuNSIvPjxjaXJjbGUgY3g9IjE0Ny43IiBjeT0iMzczLjMiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjE1OS40IiBjeT0iMzczLjkiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjIxNC41IiBjeT0iNDAwLjciIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjI0My4wIiBjeT0iNDAwLjUiIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjE2Ny4zIiBjeT0iNDExLjgiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjIwMy41IiBjeT0iNDMyLjUiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjIzOC43IiBjeT0iNDMzLjkiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjI1MC4zIiBjeT0iNDUxLjkiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjEyOC41IiBjeT0iNDYwLjUiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjI1Ny42IiBjeT0iNDY1LjAiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjIwNC4wIiBjeT0iNDc2LjgiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjE4OC43IiBjeT0iNDk2LjEiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjIzNS4yIiBjeT0iNDk2LjQiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjIwOS4zIiBjeT0iNTE2LjYiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjI0MS4wIiBjeT0iNTEzLjQiIHI9IjEuMCIvPjwvZz48ZyBmaWxsPSJyZ2IoMjYsMjYsMjYpIj48Y2lyY2xlIGN4PSIxNDYuNiIgY3k9IjYuNCIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjE1LjciIGN5PSI5LjUiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjczLjkiIGN5PSIxMS4zIiByPSIwLjgiLz48Y2lyY2xlIGN4PSIyMDcuMCIgY3k9IjEyLjIiIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjIzNi43IiBjeT0iMTMuMiIgcj0iMS4wIi8+PGNpcmNsZSBjeD0iMjQwLjEiIGN5PSIxOS4wIiByPSIwLjciLz48Y2lyY2xlIGN4PSIyNDguNSIgY3k9IjM3LjkiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjIxOC4wIiBjeT0iNDUuMyIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iODguMiIgY3k9IjY4LjkiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjE5NS4yIiBjeT0iNjEuOCIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjAyLjIiIGN5PSI2MS4xIiByPSIwLjgiLz48Y2lyY2xlIGN4PSIyNTIuMiIgY3k9IjczLjciIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjIwNi40IiBjeT0iODAuNiIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjMwLjkiIGN5PSI4Ni4xIiByPSIxLjAiLz48Y2lyY2xlIGN4PSIyNTQuNCIgY3k9Ijg0LjIiIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjE3Mi4wIiBjeT0iMTA2LjYiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjIzMy43IiBjeT0iMTAyLjgiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjIzOS4yIiBjeT0iMTEzLjEiIHI9IjAuNSIvPjxjaXJjbGUgY3g9IjIzNi44IiBjeT0iMTI2LjkiIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjI0Ni4zIiBjeT0iMTIyLjAiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjE5Ny44IiBjeT0iMTM5LjgiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjkuMyIgY3k9IjE1MS45IiByPSIwLjUiLz48Y2lyY2xlIGN4PSIyMzkuMyIgY3k9IjE1Mi4wIiByPSIxLjEiLz48Y2lyY2xlIGN4PSIxMzAuMSIgY3k9IjE2Mi41IiByPSIwLjUiLz48Y2lyY2xlIGN4PSIxNDguNiIgY3k9IjE3Mi43IiByPSIwLjgiLz48Y2lyY2xlIGN4PSI5Mi4yIiBjeT0iMTg0LjkiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjE4OS42IiBjeT0iMTg4LjQiIHI9IjAuNSIvPjxjaXJjbGUgY3g9IjIwMi45IiBjeT0iMTg2LjUiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjIyOS4wIiBjeT0iMjAzLjIiIHI9IjAuNSIvPjxjaXJjbGUgY3g9IjIzMy4wIiBjeT0iMjAwLjUiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjI1NS4yIiBjeT0iMjAwLjIiIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjE5NS43IiBjeT0iMjE4LjUiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjE3Ni45IiBjeT0iMjQ0LjEiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjI1Ny40IiBjeT0iMjQ4LjAiIHI9IjAuOSIvPjxjaXJjbGUgY3g9Ijc1LjYiIGN5PSIyNTQuNSIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMjM1LjciIGN5PSIyNTkuNyIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjI3LjUiIGN5PSIyNjcuNCIgcj0iMS4wIi8+PGNpcmNsZSBjeD0iMjUzLjciIGN5PSIyNjMuMyIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjAzLjkiIGN5PSIyOTQuMCIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjQyLjciIGN5PSIyOTIuOCIgcj0iMS4wIi8+PGNpcmNsZSBjeD0iMTg4LjIiIGN5PSIzMDIuMCIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMjAyLjQiIGN5PSIzMTAuNSIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjI2LjkiIGN5PSIzMTMuMiIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMjA0LjYiIGN5PSIzMjkuMCIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjQ0LjkiIGN5PSIzMzcuMyIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMjU5LjQiIGN5PSIzNDMuNyIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMTc1LjYiIGN5PSIzNTEuMiIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMjM2LjciIGN5PSIzNTkuNiIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjUyLjQiIGN5PSIzNTMuNyIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjMyLjgiIGN5PSIzNzguMSIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjEyLjIiIGN5PSIzODAuMyIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjAyLjUiIGN5PSI0MDIuMiIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjI0LjMiIGN5PSI0MDEuOCIgcj0iMS4wIi8+PGNpcmNsZSBjeD0iMjQwLjQiIGN5PSI0MTcuMiIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMTg0LjQiIGN5PSI0MjIuNCIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMjU3LjciIGN5PSI0NDMuNiIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMTQ0LjYiIGN5PSI0NTQuOCIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMTY2LjQiIGN5PSI0NTUuNCIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjE3LjAiIGN5PSI0NTQuMiIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMTE0LjciIGN5PSI0NzAuOCIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMTkzLjMiIGN5PSI0NzAuOCIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMjExLjAiIGN5PSI0NzYuMSIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTQyLjQiIGN5PSI0ODQuNCIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMTI4LjciIGN5PSI1MDEuMCIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMjQyLjUiIGN5PSI1MDguMyIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjU0LjUiIGN5PSI1MDAuNSIgcj0iMC44Ii8+PC9nPjxnIGZpbGw9InJnYigzMCwzMCwzMCkiPjxjaXJjbGUgY3g9IjE3NS4yIiBjeT0iOC4wIiByPSIwLjciLz48Y2lyY2xlIGN4PSIyMjEuMSIgY3k9IjIuNSIgcj0iMS4wIi8+PGNpcmNsZSBjeD0iMjIzLjUiIGN5PSIzNi4yIiByPSIwLjYiLz48Y2lyY2xlIGN4PSIyMzkuNCIgY3k9IjM5LjMiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjI1OC4wIiBjeT0iMzcuMiIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTc1LjgiIGN5PSI1Mi41IiByPSIwLjciLz48Y2lyY2xlIGN4PSIyMTAuNCIgY3k9IjU2LjkiIHI9IjAuNSIvPjxjaXJjbGUgY3g9IjE2MC42IiBjeT0iNjQuMyIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjU1LjQiIGN5PSI2OS4xIiByPSIwLjciLz48Y2lyY2xlIGN4PSIxOTUuMSIgY3k9Ijc2LjkiIHI9IjAuNSIvPjxjaXJjbGUgY3g9IjE2Mi42IiBjeT0iOTIuNCIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMTQxLjgiIGN5PSIxMDIuNyIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjE4LjgiIGN5PSIxMDQuMyIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMjUyLjEiIGN5PSIxMDEuNCIgcj0iMS4yIi8+PGNpcmNsZSBjeD0iMTA0LjgiIGN5PSIxMjEuNiIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTYzLjIiIGN5PSIxMjAuNCIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjEyLjQiIGN5PSIxMjQuOCIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMTM0LjkiIGN5PSIxMzEuOCIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjI4LjciIGN5PSIxMzYuMiIgcj0iMS4wIi8+PGNpcmNsZSBjeD0iMjQ5LjkiIGN5PSIxMzYuOSIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjUxLjciIGN5PSIxMzQuNSIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iNzEuNiIgY3k9IjE0OS42IiByPSIwLjUiLz48Y2lyY2xlIGN4PSIxMzQuMSIgY3k9IjE0OC4wIiByPSIwLjkiLz48Y2lyY2xlIGN4PSIyMjcuMyIgY3k9IjE0My41IiByPSIwLjciLz48Y2lyY2xlIGN4PSIxNzguNiIgY3k9IjE1Ni44IiByPSIwLjgiLz48Y2lyY2xlIGN4PSIyMDQuNyIgY3k9IjE1Mi43IiByPSIwLjgiLz48Y2lyY2xlIGN4PSI5Mi4yIiBjeT0iMTYxLjkiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjIwOS42IiBjeT0iMTYwLjYiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjE0NC45IiBjeT0iMTgxLjMiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjIzMi43IiBjeT0iMTgwLjQiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjE4OS45IiBjeT0iMTkwLjQiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjIzNS45IiBjeT0iMTk2LjkiIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjQuNSIgY3k9IjIwOC44IiByPSIwLjYiLz48Y2lyY2xlIGN4PSIyNDUuMyIgY3k9IjIwOS4xIiByPSIwLjYiLz48Y2lyY2xlIGN4PSIxMzkuMiIgY3k9IjIxNC4xIiByPSIwLjciLz48Y2lyY2xlIGN4PSIyMzkuNyIgY3k9IjIxMC45IiByPSIxLjEiLz48Y2lyY2xlIGN4PSIyNTYuMyIgY3k9IjIxOS40IiByPSIxLjEiLz48Y2lyY2xlIGN4PSIxOTIuMyIgY3k9IjIzMC4wIiByPSIwLjUiLz48Y2lyY2xlIGN4PSIyNDYuNSIgY3k9IjIyMC44IiByPSIwLjUiLz48Y2lyY2xlIGN4PSIyNTYuMSIgY3k9IjIyMi40IiByPSIxLjIiLz48Y2lyY2xlIGN4PSIyMC4xIiBjeT0iMjMxLjIiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjE2NS45IiBjeT0iMjM5LjIiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjIzNS4wIiBjeT0iMjM3LjIiIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjkzLjkiIGN5PSIyNDcuMyIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMy4zIiBjeT0iMjYyLjgiIHI9IjAuNSIvPjxjaXJjbGUgY3g9IjE4My4xIiBjeT0iMjc4LjkiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjIxMi45IiBjeT0iMjcxLjciIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjQ4LjQiIGN5PSIyODcuNSIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iODAuMyIgY3k9IjI4Ni44IiByPSIwLjciLz48Y2lyY2xlIGN4PSIxOTMuMiIgY3k9IjI4Mi43IiByPSIwLjkiLz48Y2lyY2xlIGN4PSI4OC44IiBjeT0iMjk4LjYiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjIxOC43IiBjeT0iMjk0LjgiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjIyMC44IiBjeT0iMzAwLjUiIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjIxLjIiIGN5PSIzMTAuNSIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMTkwLjYiIGN5PSIzMTMuMCIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjQ3LjAiIGN5PSIzMTQuNSIgcj0iMS4wIi8+PGNpcmNsZSBjeD0iMTQyLjIiIGN5PSIzMzYuNyIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMTU0LjciIGN5PSIzMzkuMCIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjEyLjYiIGN5PSIzMzAuNiIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjI0LjkiIGN5PSIzMzcuNSIgcj0iMC40Ii8+PGNpcmNsZSBjeD0iMjM4LjciIGN5PSIzMzIuMyIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjUyLjkiIGN5PSIzMzMuNSIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMjI1LjEiIGN5PSIzNDUuOSIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTg2LjQiIGN5PSIzNTIuMyIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMzYuOSIgY3k9IjM2MC4xIiByPSIwLjUiLz48Y2lyY2xlIGN4PSIxNzguOCIgY3k9IjM2NS41IiByPSIwLjYiLz48Y2lyY2xlIGN4PSIxODYuOSIgY3k9IjM2Ny43IiByPSIwLjYiLz48Y2lyY2xlIGN4PSIyMTIuMiIgY3k9IjM2OS4wIiByPSIwLjUiLz48Y2lyY2xlIGN4PSIyMzEuNiIgY3k9IjM2Ny4wIiByPSIwLjciLz48Y2lyY2xlIGN4PSIyNTEuMSIgY3k9IjM2Ny44IiByPSIxLjEiLz48Y2lyY2xlIGN4PSI4NC43IiBjeT0iMzc0LjIiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjE3MS4xIiBjeT0iMzc4LjUiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjE4NS42IiBjeT0iMzc2LjQiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjIxNC42IiBjeT0iMzczLjIiIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjI1OS42IiBjeT0iMzc4LjkiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjExNS4zIiBjeT0iMzgzLjQiIHI9IjAuNCIvPjxjaXJjbGUgY3g9IjI1MC43IiBjeT0iMzgyLjgiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjE2My4xIiBjeT0iMzk0LjgiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjIyOC4zIiBjeT0iMzk5LjkiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjExNy43IiBjeT0iNDA1LjIiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjE4NC40IiBjeT0iNDAwLjQiIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjE1MS4zIiBjeT0iNDE3LjgiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjIyOS4wIiBjeT0iNDE4LjgiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjI0MC4yIiBjeT0iNDI3LjUiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjIxMS43IiBjeT0iNDM4LjgiIHI9IjAuNSIvPjxjaXJjbGUgY3g9IjI1Ny4xIiBjeT0iNDM2LjAiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjEwNy41IiBjeT0iNDUwLjMiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjIxOC4wIiBjeT0iNDYxLjIiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjEzNy4xIiBjeT0iNDc4LjUiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjE0My4wIiBjeT0iNDc5LjIiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjE3My4yIiBjeT0iNDczLjQiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjI0Mi4wIiBjeT0iNDc0LjgiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjU4LjAiIGN5PSI0ODAuNyIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMTA0LjAiIGN5PSI0ODAuMSIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjIzLjEiIGN5PSI0ODIuMyIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjM3LjMiIGN5PSI0ODYuNCIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjQ0LjciIGN5PSI0ODMuOCIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjUxLjYiIGN5PSI0ODIuNSIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iNTQuMCIgY3k9IjQ5OC40IiByPSIwLjciLz48Y2lyY2xlIGN4PSIyMjAuNSIgY3k9IjQ5NC45IiByPSIwLjciLz48Y2lyY2xlIGN4PSIxNjUuOSIgY3k9IjUwMC4xIiByPSIwLjciLz48Y2lyY2xlIGN4PSIyMzguOCIgY3k9IjUwMy41IiByPSIxLjAiLz48Y2lyY2xlIGN4PSIyMzAuNCIgY3k9IjUxMC4yIiByPSIwLjgiLz48L2c+PGcgZmlsbD0icmdiKDM0LDM0LDM0KSI+PGNpcmNsZSBjeD0iMjM2LjIiIGN5PSI5LjEiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjI1MC41IiBjeT0iMTQuNCIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iNjcuNiIgY3k9IjIyLjkiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjI0MS43IiBjeT0iMjguNiIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjU1LjYiIGN5PSIyNi4yIiByPSIwLjkiLz48Y2lyY2xlIGN4PSIxNzEuMCIgY3k9IjQ5LjYiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjIwMC4yIiBjeT0iNDEuMSIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTU1LjAiIGN5PSI1Ny40IiByPSIwLjUiLz48Y2lyY2xlIGN4PSIyMjUuNiIgY3k9IjUyLjYiIHI9IjAuNCIvPjxjaXJjbGUgY3g9Ijk0LjYiIGN5PSI3My41IiByPSIwLjYiLz48Y2lyY2xlIGN4PSIyMTQuOSIgY3k9IjcyLjEiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjIwMi40IiBjeT0iOTcuMCIgcj0iMS4wIi8+PGNpcmNsZSBjeD0iMTM5LjAiIGN5PSIxMjcuMiIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjI0LjMiIGN5PSIxMjMuNSIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMTQwLjMiIGN5PSIxMzguOCIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMTg3LjciIGN5PSIxMzIuOSIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMTcwLjEiIGN5PSIxNDIuOSIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjQ4LjkiIGN5PSIxNDUuMSIgcj0iMS4wIi8+PGNpcmNsZSBjeD0iMTUxLjYiIGN5PSIxNTcuMiIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMTU5LjYiIGN5PSIxNjQuNyIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjUzLjgiIGN5PSIxNjMuOCIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iNTYuMyIgY3k9IjE5Mi44IiByPSIwLjYiLz48Y2lyY2xlIGN4PSIxMzcuNiIgY3k9IjE5NS4yIiByPSIwLjkiLz48Y2lyY2xlIGN4PSIyNDcuOCIgY3k9IjE5Ny44IiByPSIwLjgiLz48Y2lyY2xlIGN4PSIxMjguMiIgY3k9IjIxNC4zIiByPSIwLjYiLz48Y2lyY2xlIGN4PSIxNDMuNyIgY3k9IjIxMC41IiByPSIwLjciLz48Y2lyY2xlIGN4PSIxNzkuMiIgY3k9IjIxNC4zIiByPSIwLjYiLz48Y2lyY2xlIGN4PSIyMTMuMiIgY3k9IjIxNS45IiByPSIwLjciLz48Y2lyY2xlIGN4PSIxODAuMCIgY3k9IjIyMy44IiByPSIwLjgiLz48Y2lyY2xlIGN4PSIyMjAuNiIgY3k9IjIzOS44IiByPSIxLjAiLz48Y2lyY2xlIGN4PSIzNy4zIiBjeT0iMjQzLjEiIHI9IjAuNSIvPjxjaXJjbGUgY3g9IjE1MC44IiBjeT0iMjU0LjciIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjIxOC44IiBjeT0iMjUzLjAiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjE5OS4yIiBjeT0iMjY3LjQiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjI1MC4yIiBjeT0iMjc4LjUiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjE4OC4yIiBjeT0iMjgyLjEiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjU3LjMiIGN5PSIyOTQuMiIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjM3LjQiIGN5PSIyOTIuMSIgcj0iMS4xIi8+PGNpcmNsZSBjeD0iMTc5LjkiIGN5PSIzMDIuNSIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMTA3LjYiIGN5PSIzMTguNyIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMjE2LjkiIGN5PSIzMjMuMyIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMS40IiBjeT0iMzMyLjYiIHI9IjAuNSIvPjxjaXJjbGUgY3g9IjQwLjciIGN5PSIzNDQuNSIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMTgzLjkiIGN5PSIzNDkuMiIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMTYwLjEiIGN5PSIzNTcuNyIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iMTk3LjMiIGN5PSIzNTYuOCIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMjA0LjQiIGN5PSIzNTguNCIgcj0iMC45Ii8+PGNpcmNsZSBjeD0iMjA1LjQiIGN5PSIzNjEuOCIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iNzguNSIgY3k9IjM3OS4wIiByPSIwLjciLz48Y2lyY2xlIGN4PSIxOTkuOSIgY3k9IjM3NS40IiByPSIwLjYiLz48Y2lyY2xlIGN4PSIyMDMuOCIgY3k9IjM3MS40IiByPSIwLjUiLz48Y2lyY2xlIGN4PSIyNDkuOCIgY3k9IjM3Ni4zIiByPSIxLjAiLz48Y2lyY2xlIGN4PSIyMjIuMCIgY3k9IjM4MS4xIiByPSIwLjgiLz48Y2lyY2xlIGN4PSIyNDYuNiIgY3k9IjM4NC4wIiByPSIwLjYiLz48Y2lyY2xlIGN4PSI0NC42IiBjeT0iMzk4LjgiIHI9IjAuNSIvPjxjaXJjbGUgY3g9IjE1Ni43IiBjeT0iMzk5LjIiIHI9IjAuNyIvPjxjaXJjbGUgY3g9IjE2Mi42IiBjeT0iNDA4LjQiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjE3Ni45IiBjeT0iNDA4LjQiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjI1Ni42IiBjeT0iNDAxLjQiIHI9IjAuNiIvPjxjaXJjbGUgY3g9IjIwNS4xIiBjeT0iNDEwLjQiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjIzMS4xIiBjeT0iNDE0LjciIHI9IjEuMCIvPjxjaXJjbGUgY3g9IjI1OC41IiBjeT0iNDE1LjkiIHI9IjEuMSIvPjxjaXJjbGUgY3g9IjIyNS45IiBjeT0iNDI5LjQiIHI9IjAuOCIvPjxjaXJjbGUgY3g9IjI0NC44IiBjeT0iNDM4LjEiIHI9IjAuOSIvPjxjaXJjbGUgY3g9IjMxLjUiIGN5PSI0NDQuOCIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMTYwLjEiIGN5PSI0NDQuNCIgcj0iMC43Ii8+PGNpcmNsZSBjeD0iNzIuMCIgY3k9IjQ1OC41IiByPSIwLjUiLz48Y2lyY2xlIGN4PSIyMjguNiIgY3k9IjQ2MS4wIiByPSIwLjciLz48Y2lyY2xlIGN4PSIyOS4wIiBjeT0iNDc5LjkiIHI9IjAuNiIvPjxjaXJjbGUgY3g9Ijg0LjAiIGN5PSI0NzguMCIgcj0iMC42Ii8+PGNpcmNsZSBjeD0iMjM0LjQiIGN5PSI0NzUuMyIgcj0iMC44Ii8+PGNpcmNsZSBjeD0iMTMzLjMiIGN5PSI0OTEuMiIgcj0iMC41Ii8+PGNpcmNsZSBjeD0iMjUwLjYiIGN5PSI1MTUuNiIgcj0iMC44Ii8+PC9nPjwvc3ZnPgo=);
  background-repeat: repeat-y;
  background-position: right top;
  background-size: 260px 520px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}

.right-panel details { background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:4px; }
.right-panel details > summary {
  padding:8px 10px;
  color:var(--ui-text);
  cursor:pointer;
  outline:none;
  list-style:none;
  font-family:var(--ui-font);
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.right-panel details[open] > summary { border-bottom:1px solid var(--ui-border); }
.right-panel details > div { padding:6px; }

/* Prevent overlay labels within right sidebar (titles are in <summary>) */
.right-panel .viewer-label { display:none !important; }

/* Side panel content containers: consistent size when open */
.probe-view,
.debug-view,
.right-panel .volume-3d {
  position: relative;
  width: 100%;
  min-height: 260px;
  height: 260px;
  background: #000;
  overflow: hidden;
}

#controls-floating {
  position: sticky;
  top: 10px;
  z-index: 5;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 8px 10px;
  color: white;
}

.toggle-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--ui-font);
  font-size: 11px;
}

.camera-feed {
  grid-row: 2;
  position: relative;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.right-panel .volume-3d { background:#000; }

.metadata-info {
  grid-row: 4;
  position: relative;
  flex: 1;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 15px;
  font-family: var(--ui-font);
  font-size: 11px;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* When the clean hand viewer is active, the metadata overlay is hidden via JS.
   This rule ensures that if styles reflow or HMR reloads, the overlay does not
   cover the 3D container unexpectedly. */
.metadata-info[style*="display: none"] {
  display: none !important;
}

#overlay-metadata {
  margin: 0;
  white-space: pre;
  line-height: 1.4;
}

#overlay-metadata pre {
  margin: 0;
  white-space: pre;
  font-family: inherit;
  font-size: inherit;
}

.debug-info {
  display: none;
}

.viewer-label {
  position: absolute;
  top: 10px;
  left: 10px;
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 3px;
  z-index: 1000; /* ensure above VTK canvases and overlays */
}

.viewer-info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-family: var(--ui-font);
  font-size: 11px;
  background: rgba(0, 0, 0, 0.7);
  padding: 5px;
  border-radius: 3px;
  z-index: 1;
}

.hand-debug-info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-family: var(--ui-font);
  font-size: 11px;
  pointer-events: none;
  z-index: 1000;
}

#feed-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#feed-video {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: scaleX(-1);
  z-index: 1;
}

#overlay-hand-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  z-index: 2; /* ensure overlay is above the video */
}

#viewer-3d {
  width: 100%;
  height: 100%;
  min-height: 260px; /* match container min-height */
  position: relative;
  overflow: hidden;
  background: #000;
  pointer-events: auto;
}

#viewer-3d canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Form controls inside the right-panel sections (Options, Volume Transform, …) all use the
   console/knob style: monospace, dark fills, gray borders, white on hover. */
.right-panel label,
.right-panel .options-panel label {
  display: block;
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 11px;
  letter-spacing: 0.5px;
  margin: 8px 0 10px 0;
}
.right-panel input[type="range"],
.right-panel select,
.right-panel button {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--ui-font);
}
.right-panel select,
.right-panel button {
  background: var(--ui-btn);
  color: var(--ui-text-dim);
  border: 1px solid var(--ui-btn-border);
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.right-panel button { cursor: pointer; }
.right-panel button:hover { background: var(--ui-btn-hover); color: #fff; border-color: #444; }
.right-panel .row { display:flex; gap:8px; }

/* Range sliders in the panels match the console's thin track + white thumb. */
.right-panel input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: #333;
  outline: none;
  border-radius: 2px;
  margin: 4px 0 2px 0;
}
.right-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 1px solid #000; cursor: pointer;
}
.right-panel input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 1px solid #000; cursor: pointer;
}
/* Small value read-outs under sliders. */
.right-panel label > div { color: var(--ui-text-dim); font-size: 10px; letter-spacing: 1px; }

/* Floating options panel in the upper-right of the right column */
.options-floating {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1200;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 8px 10px;
  max-width: 260px;
}

#overlay-debug,
#overlay-hand-debug {
  margin: 0;
  white-space: pre;
  background: transparent;
}

#overlay-debug pre,
#overlay-hand-debug pre {
  margin: 0;
  white-space: pre;
}

.loading-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px 40px;
  border-radius: 8px;
  z-index: 1000;
  font-family: var(--ui-font);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-align: center;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.metadata-overlay {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 15px;
  border-radius: 8px;
  font-family: var(--ui-font);
  font-size: 11px;
  z-index: 1000;
  pointer-events: none;
}

.metadata-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.metadata-content div {
  white-space: nowrap;
}

/* ── Panel sub-sections, button rows and status lines ────────────────
   Everything in the right-hand panels is monochrome by design: the only
   colour in the app is the ultrasound image itself, so a coloured control
   reads as "something is wrong" rather than as decoration. State is carried
   by weight and brightness instead of by hue -- .is-ok brightens toward
   white, .is-warn dims and italicises, which survives a grayscale display
   and does not compete with the scan.

   These classes exist because the panels had each grown their own inline
   button styling (three different paddings, four accent colours). Anything
   new goes through them. */

.right-panel .field {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  background: var(--ui-panel);
}
.right-panel .field > h4 {
  margin: 0 0 6px 0;
  font-family: var(--ui-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ui-text);
}

/* Explanatory copy under a heading. Deliberately quiet. */
.right-panel .hint {
  font-family: var(--ui-font);
  font-size: 10px;
  line-height: 1.45;
  color: #777;
  margin-bottom: 6px;
}

/* A live status line. Default is the resting state; modifiers carry meaning
   without hue. */
.right-panel .status {
  font-family: var(--ui-font);
  font-size: 10px;
  line-height: 1.4;
  color: #888;
  margin-bottom: 6px;
}
.right-panel .status.is-ok   { color: #fff; }
.right-panel .status.is-warn { color: #999; font-style: italic; }

/* Buttons side by side, sharing the row evenly. `.right-panel button` is
   width:100% so buttons stack by default; this is the opt-in for a row. */
.right-panel .btn-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.right-panel .btn-row > button { flex: 1 1 0; min-width: 0; }
.right-panel .btn-row > button.is-narrow { flex: 0 0 auto; }

/* A control with its own label sitting inline (e.g. a select next to text). */
.right-panel .inline-field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.right-panel .inline-field > span {
  font-family: var(--ui-font);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--ui-text-dim);
  white-space: nowrap;
}
.right-panel .inline-field > select { flex: 1 1 0; min-width: 0; }

/* Progress: a hairline that fills. No colour, just the panel's own white. */
.right-panel .meter {
  height: 2px;
  background: var(--ui-btn-border);
  border-radius: 1px;
  overflow: hidden;
  margin: 8px 0 4px 0;
}
.right-panel .meter > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ui-text);
  transition: width .12s linear;
}

/* Links in panels read as text, not as hyperlinks. */
.right-panel a.quiet {
  color: var(--ui-text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: #444;
}
.right-panel a.quiet:hover { color: #fff; text-decoration-color: #888; }

/* A preview pane (camera feed, debug overlay). */
.right-panel .preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  overflow: hidden;
  display: block;
}
.right-panel .preview > canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.right-panel .preview > .preview-overlay {
  position: absolute;
  top: 4px; left: 6px; right: 6px;
  font-family: var(--ui-font);
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
  pointer-events: none;
}

/* ── Intro ───────────────────────────────────────────────────────────
   Shown over the volume load, which is dead time anyway, so a first-time
   visitor reads it instead of watching a spinner and a returning one
   dismisses it with any key. Persisted in localStorage, NOT a cookie:
   localStorage is never transmitted to a server, so remembering "this
   person has read the intro" is a UI preference rather than tracking. If
   storage is unavailable the intro simply shows again -- it costs a
   keypress, so nothing is broken by refusing it. */

#intro {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: #000;
  font-family: var(--ui-font);
  color: var(--ui-text);
  opacity: 1;
  transition: opacity .25s ease;
}
#intro.is-hiding { opacity: 0; pointer-events: none; }
#intro[hidden] { display: none !important; }

/* No card, no border: the content sits on the black page with a wide
   margin. The measure is held near 60 characters so the lines break where
   the eye expects them to. */
#intro .sheet {
  width: min(560px, calc(100% - 64px));
  padding: 64px 0;
  margin: auto;
}

#intro header { margin-bottom: 56px; }
#intro .eyebrow {
  margin: 0 0 18px;
  font-size: 9.5px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #5a5a5a;
}
#intro h1 {
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  line-height: 1.1;
  color: #fff;
}
#intro .lead {
  margin: 0;
  max-width: 46em;
  font-size: 12.5px;
  line-height: 2;
  color: #9a9a9a;
}

/* Two input modes. Hairline above each column instead of a box — the rule
   does the grouping without adding a second frame. */
#intro .modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 52px;
}
#intro .mode { border-top: 1px solid #262626; padding-top: 18px; }
#intro .mode h2 {
  margin: 0 0 14px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #fff;
}
#intro .mode p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.9;
  color: #8a8a8a;
}
#intro .mode-link { margin-top: 12px !important; }

#intro .steps { margin-bottom: 56px; }
#intro ol { margin: 0; padding: 0; list-style: none; }
#intro li {
  display: flex;
  gap: 16px;
  padding: 13px 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: #9a9a9a;
  border-top: 1px solid #1c1c1c;
}
#intro li:last-child { border-bottom: 1px solid #1c1c1c; }
#intro li span {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #4d4d4d;
  padding-top: 1px;
}
#intro b { color: #e8e8e8; font-weight: 400; }

#intro footer { display: flex; flex-direction: column; gap: 22px; }
#intro button {
  align-self: flex-start;
  font-family: var(--ui-font);
  font-size: 10.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 13px 38px;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
#intro button:hover { background: #000; color: #fff; }
#intro .note {
  margin: 0;
  font-size: 10px;
  line-height: 1.9;
  color: #555;
}
#intro a {
  color: #8a8a8a;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #3a3a3a;
}
#intro a:hover { color: #fff; text-decoration-color: #fff; }

/* Always-available way back in, bottom-left, out of the way. */
#intro-open {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 500;
  width: 22px;
  height: 22px;
  font-family: var(--ui-font);
  font-size: 11px;
  line-height: 1;
  color: #666;
  background: var(--ui-btn);
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
}
#intro-open:hover { color: #fff; border-color: #444; }

@media (max-width: 620px) {
  #intro .sheet { width: calc(100% - 44px); padding: 44px 0; }
  #intro h1 { font-size: 22px; letter-spacing: 4px; }
  #intro header { margin-bottom: 40px; }
  #intro .modes { grid-template-columns: 1fr; gap: 28px; margin-bottom: 38px; }
  #intro .steps { margin-bottom: 40px; }
}

/* ── Text, number and multi-line inputs ──────────────────────────────
   The panel rules only ever covered select/button/range, so every
   <input type="text|number"> and <textarea> fell back to the browser's
   default: a white box on a black panel. */

.right-panel input[type="text"],
.right-panel input[type="number"],
.right-panel textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--ui-font);
  font-size: 11px;
  letter-spacing: 0.5px;
  background: var(--ui-btn);
  color: var(--ui-text);
  border: 1px solid var(--ui-btn-border);
  border-radius: 3px;
  padding: 5px 7px;
}
.right-panel textarea { resize: vertical; line-height: 1.45; }
.right-panel input[type="text"]:focus,
.right-panel input[type="number"]:focus,
.right-panel textarea:focus,
.right-panel select:focus {
  outline: none;
  border-color: #555;
  background: var(--ui-btn-hover);
}
.right-panel input::placeholder, .right-panel textarea::placeholder { color: #555; }

/* Checkboxes: the browser's blue accent is the last bit of colour in the
   panels, so it is overridden to the panel's own white. */
.right-panel input[type="checkbox"] {
  accent-color: #fff;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin: 0 4px 0 0;
}

/* A three-column control grid (Volume Transform). */
.right-panel .grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px 6px;
  align-items: end;
}
.right-panel .grid-3 > .span-3 { grid-column: span 3; }
.right-panel .grid-3 > .span-2 { grid-column: span 2; }
/* Inside the grid the labels must not carry the panel's 8px block margin,
   or the rows drift apart. */
.right-panel .grid-3 label { margin: 0; }
/* A row of checkboxes reading as one control. */
.right-panel .check-row { display: flex; gap: 12px; align-items: center; }
.right-panel .check-row > span { white-space: nowrap; }

/* ── Orthogonal views in the side panel ──────────────────────────────
   These carry height:100% from the main grid layout they were designed
   for, where they filled a full-height column. Dropped into a <details>
   that does not constrain height, the renderer letterboxes the slice and
   the panel fills with black margin. Giving each one a square box — the
   shape of a typical axial slice — puts the image back in charge of the
   space, and the border makes the remaining margin read as a frame rather
   than as emptiness.

   --view-aspect is the one number to change if your volumes are markedly
   non-square. */
.right-panel { --view-aspect: 1; }
.right-panel .views-stack { display: flex; flex-direction: column; gap: 6px; }
.right-panel .axial-view,
.right-panel .sagittal-view,
.right-panel .coronal-view {
  height: auto;
  aspect-ratio: var(--view-aspect);
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  overflow: hidden;
}
.right-panel .axial-view canvas,
.right-panel .sagittal-view canvas,
.right-panel .coronal-view canvas { display: block; }

/* Slider value readouts and inline labels in Options — these were the last
   hard-coded greys left inline in the markup. */
.right-panel .readout {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ui-text-dim);
  margin-top: 2px;
}
.right-panel .inline-field .quiet { font-size: 10px; margin-left: auto; }
.right-panel input[type="range"] { width: 100%; }

/* ── Standard / advanced split ───────────────────────────────────────
   Students meet four sections; rig calibration, transforms and debug
   output stay folded away until someone asks for them. */
.right-panel .panel-switch { margin-bottom: 8px; }
.right-panel .panel-switch button {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #777;
  padding: 5px 8px;
}
.right-panel .panel-switch button.active { color: #fff; border-color: #444; }
.right-panel details[data-advanced] { display: none; }
.right-panel.show-advanced details[data-advanced] { display: block; }

/* A two-state switch that reads as pressed when on (SURFACE, and any
   future on/off control that is not a checkbox). */
.right-panel .toggle-btn {
  width: auto;
  min-width: 46px;
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 1px;
}
.right-panel .toggle-btn.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.right-panel .toggle-btn.active:hover { background: var(--ui-text); border-color: var(--ui-text); color: #000; }
.right-panel .toggle-btn:disabled { opacity: 0.45; cursor: not-allowed; }