:root {
  --neda-ink: #223033;
  --neda-accent: #2f6f73;
  --neda-warm: #c44536;
  --neda-soft: #f5f7f4;

  /* Font-size scale */
  --neda-font-base: 1rem;
  --neda-font-scale: 1;
}

body {
  color: var(--neda-ink);
  font-size: calc(var(--neda-font-base) * var(--neda-font-scale));
}

.callout {
  border-radius: 6px;
}

.observablehq {
  max-width: 100%;
}

.cell-output-display {
  overflow-x: auto;
}

main.content {
  line-height: 1.65;
}

/* -----------------------------------------------
   Hemisphere geodesic demo
   ----------------------------------------------- */

.geodesic-sphere-demo {
  max-width: 560px;
  margin: 0.8rem auto 0;
  color: #253235;
}

.geodesic-sphere-demo,
.geodesic-sphere-demo * {
  box-sizing: border-box;
}

.geodesic-sphere-demo__stage {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  background: #eef3f4;
  border: 1px solid #d2dee0;
  border-radius: 8px;
}

.geodesic-sphere-demo__canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.geodesic-sphere-demo__canvas.is-dragging {
  cursor: grabbing;
}

.geodesic-sphere-demo__controls {
  width: 100%;
  max-width: 440px;
  margin: 0.65rem auto 0;
}

.geodesic-sphere-demo__slider {
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #38494d;
}

.geodesic-sphere-demo__slider output {
  color: #c44536;
  font-variant-numeric: tabular-nums;
}

.geodesic-sphere-demo__slider input[type="range"] {
  width: 100%;
}

.geodesic-sphere-demo__hint {
  margin: 0.4rem auto 0;
  max-width: 520px;
  color: #657276;
  font-size: 0.86rem;
  line-height: 1.45;
  text-align: center;
}

.geodesic-sphere-demo__red,
.geodesic-sphere-demo__green,
.geodesic-sphere-demo__blue {
  font-weight: 700;
}

.geodesic-sphere-demo__red {
  color: #d94736;
}

.geodesic-sphere-demo__green {
  color: #2f9d68;
}

.geodesic-sphere-demo__blue {
  color: #2b77b8;
}

/* -----------------------------------------------
   Metric entropy cover/packing demo
   ----------------------------------------------- */

.entropy-cover-demo {
  margin: 1rem 0 1.25rem;
  padding: 1rem;
  color: #253235;
  background: #f6f8f4;
  border: 1px solid #d8e1dc;
  border-radius: 8px;
}

.entropy-cover-demo,
.entropy-cover-demo * {
  box-sizing: border-box;
}

.entropy-cover-demo__controls {
  max-width: 520px;
  margin: 0 auto 0.85rem;
}

.entropy-cover-demo__slider {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #38494d;
}

.entropy-cover-demo__slider output {
  color: #c44536;
  font-variant-numeric: tabular-nums;
}

.entropy-cover-demo__slider input[type="range"] {
  width: 100%;
}

.entropy-cover-demo__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  max-width: 620px;
  margin: 0 auto 1rem;
}

.entropy-cover-demo__summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.62rem 0.75rem;
  background: #fff;
  border: 1px solid #d8e1dc;
  border-radius: 6px;
}

.entropy-cover-demo__label {
  min-width: 0;
  color: #506165;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.entropy-cover-demo__summary strong {
  color: #223033;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.entropy-cover-demo__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 1rem;
}

.entropy-cover-demo__panel {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d8e1dc;
  border-radius: 8px;
}

.entropy-cover-demo__panel h4 {
  margin: 0;
  padding: 0.7rem 0.85rem 0.25rem;
  color: #253235;
  font-size: 1rem;
}

.entropy-cover-demo__panel canvas {
  display: block;
  width: 100%;
  min-height: 230px;
}

@media (max-width: 800px) {
  .entropy-cover-demo__summary,
  .entropy-cover-demo__panels {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------
   BHV rooted four-leaf interpolation demo
   ----------------------------------------------- */

.bhv-demo {
  margin: 1.5rem 0 2rem;
  padding: 1rem;
  color: #253235;
  background: #f6f8f4;
  border: 1px solid #d8e1dc;
  border-radius: 8px;
}

.bhv-demo,
.bhv-demo * {
  box-sizing: border-box;
}

.bhv-demo__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.bhv-demo__control,
.bhv-demo__time,
.bhv-demo__panel,
.bhv-demo__explain {
  background: #fff;
  border: 1px solid #d8e1dc;
  border-radius: 8px;
}

.bhv-demo__control,
.bhv-demo__time {
  padding: 0.8rem;
}

.bhv-demo__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #506165;
  text-transform: uppercase;
}

.bhv-demo select,
.bhv-demo input[type="range"] {
  width: 100%;
}

.bhv-demo select {
  min-height: 2.25rem;
  color: #253235;
  background: #fff;
  border: 1px solid #bdcbc5;
  border-radius: 6px;
}

.bhv-demo__lengths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.65rem;
}

.bhv-demo__range-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 3rem;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.88rem;
  color: #506165;
}

.bhv-demo__range-row output {
  color: #253235;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bhv-demo__time {
  grid-column: 1 / -1;
}

.bhv-demo__time-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.45rem;
}

.bhv-demo__time-value {
  font-weight: 700;
  color: #c44536;
  font-variant-numeric: tabular-nums;
}

.bhv-demo__panels {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 1rem;
}

.bhv-demo__panel {
  min-width: 0;
  overflow: hidden;
}

.bhv-demo__panel h4 {
  margin: 0;
  padding: 0.75rem 0.9rem 0.4rem;
  font-size: 1rem;
}

.bhv-demo__panel-body {
  padding: 0.35rem 0.8rem 0.9rem;
}

.bhv-demo__svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 260px;
  background: #fbfcf8;
  border: 1px solid #e3e9e5;
  border-radius: 6px;
}

.bhv-demo__meta {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #506165;
}

.bhv-demo__meta strong {
  color: #253235;
}

.bhv-demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.bhv-demo__chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #253235;
  background: #eef3ef;
  border: 1px solid #d8e1dc;
  border-radius: 999px;
}

.bhv-demo__chip--active {
  color: #fff;
  background: #2f6f73;
  border-color: #2f6f73;
}

.bhv-demo__explain {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid #c44536;
}

.bhv-demo__explain-title {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.bhv-demo__explain p {
  margin: 0;
}

@media (max-width: 800px) {
  .bhv-demo__controls,
  .bhv-demo__panels,
  .bhv-demo__lengths {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------
   Presentation mode
   ----------------------------------------------- */

/* Toggle button — sits in the top-right of the content area */
.preso-toggle {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--neda-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: background 0.2s, transform 0.15s;
}

.preso-toggle:hover {
  background: #1f5f63;
  transform: translateY(-1px);
}

.preso-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Hide the toggle button while in presentation mode */
body.presentation-mode .preso-toggle {
  display: none;
}

/* Exit control — centered within the right presentation margin */
.preso-exit {
  display: none;
  position: fixed;
  top: 18px;
  right: max(12px, calc(var(--neda-preso-margin-half, 7.5%) - 20px));
  z-index: 10000;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(30, 30, 30, 0.88);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

body.presentation-mode .preso-exit {
  display: flex;
}

.preso-exit:hover {
  color: #fff;
  background: rgba(40, 40, 40, 0.94);
  transform: scale(1.08);
}

.preso-exit:focus-visible {
  outline: 3px solid rgba(47, 111, 115, 0.45);
  outline-offset: 3px;
}

.preso-exit svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* ---- Presentation-mode layout overrides ---- */

body.presentation-mode .navbar {
  display: none !important;
}

body.presentation-mode #quarto-sidebar {
  display: none !important;
}

body.presentation-mode #quarto-margin-sidebar {
  display: none !important;
}

body.presentation-mode #quarto-content {
  /*
   * Replace Quarto's asymmetric article grid with three tracks:
   * equal percentage margins and the presentation content between
   * them. Keeping this as a grid (instead of padding the Quarto grid)
   * preserves all of Quarto's named column lines.
   */
  grid-template-columns:
    [screen-start]
    var(--neda-preso-margin, 15%)
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start]
    minmax(0, 1fr)
    [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset]
    var(--neda-preso-margin, 15%)
    [screen-end] !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.presentation-mode main.content {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- Presentation-mode typography ---- */

body.presentation-mode {
  --neda-font-scale: 1.2;
}

body.presentation-mode h1 {
  font-size: calc(2.2rem * var(--neda-font-scale));
}

body.presentation-mode h2 {
  font-size: calc(1.7rem * var(--neda-font-scale));
}

body.presentation-mode h3 {
  font-size: calc(1.35rem * var(--neda-font-scale));
}

body.presentation-mode p,
body.presentation-mode li,
body.presentation-mode .callout {
  font-size: calc(1.05rem * var(--neda-font-scale));
}

/* ---- Fullscreen overrides ---- */

body.presentation-mode {
  background: #fff;
}

/* Subtle exit hint at the bottom */
.preso-exit-hint {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 6px 18px;
  font-size: 0.8rem;
  color: #888;
  background: rgba(0,0,0,.04);
  border-radius: 20px;
  pointer-events: none;
}

body.presentation-mode .preso-exit-hint {
  display: block;
}

/* ---- Hide "Other Formats" download links (e.g., PDF) ---- */
.quarto-other-formats,
.quarto-alternate-formats,
#quarto-other-formats {
  display: none !important;
}

/* -----------------------------------------------
   App download section (index page)
   Hidden by default; shown by JS only on the website
   ----------------------------------------------- */

.app-downloads {
  display: none;
  margin: 2.5rem 0 1.5rem;
  padding: 1.5rem 1.75rem;
  background: #f6f8f4;
  border: 1px solid #d8e1dc;
  border-radius: 10px;
  text-align: center;
}

.app-downloads h2 {
  margin-top: 0;
}

.download-grid {
  margin-top: 1rem;
}

/* Quarto wraps adjacent inline links in a paragraph. Make that wrapper
   responsive so the cards share a row whenever they fit. */
.download-grid > p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0;
}

.download-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 170px;
  align-items: center;
  gap: 0.35rem;
  padding: 1.25rem 2rem 1rem;
  min-width: 170px;
  color: var(--neda-ink);
  background: #fff;
  border: 1px solid #bdcbc5;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.download-link:hover {
  background: var(--neda-accent);
  border-color: var(--neda-accent);
  color: #fff;
  transform: translateY(-2px);
}

.download-link .download-icon {
  font-size: 1.65rem;
  line-height: 1;
  margin-bottom: 0.1rem;
  color: var(--neda-accent);
  transition: color 0.2s;
}

.download-link:hover .download-icon {
  color: #fff;
}

.download-link .download-label {
  font-size: 1rem;
  font-weight: 700;
}

.download-link .download-sublabel {
  font-size: 0.78rem;
  font-weight: 400;
  color: #657276;
}

.download-link:hover .download-sublabel {
  color: rgba(255, 255, 255, 0.75);
}

/* Stack on narrow screens */
@media (max-width: 480px) {
  .download-grid > p {
    flex-direction: column;
    align-items: stretch;
  }

  .download-link {
    min-width: 0;
  }
}