/* GENERATED by scripts/build-studio.mjs from studio/site/shim.css and
   studio/plugin/styles.css. Edit those, then run `npm run build:studio`. */

/* Site side of the studio styles: Obsidian's theme variables mapped onto the
   site palette, so the plugin's stylesheet below renders the same here, plus
   the callout chrome Obsidian draws for itself. */

.note-body {
  --background-primary: var(--app-bg);
  --background-secondary: var(--app-panel);
  --background-modifier-border: var(--app-line);
  --background-modifier-border-hover: var(--app-line-strong);
  --background-modifier-hover: var(--app-panel-soft);
  --text-normal: var(--app-text);
  --text-muted: var(--app-muted);
  --text-faint: color-mix(in srgb, var(--app-muted) 65%, var(--app-bg));
  --code-background: var(--app-panel);
  --font-text-size: 14px;
  --callout-radius: 6px;
}

.note-body .ofg {
  font-family: var(--app-font);
}

.note-body .ofg pre {
  margin: 0;
}

/* Callouts */

.note-body .callout {
  --callout-color: var(--ofg-accent-rgb);
  margin: 22px 0;
  padding: 10px 14px;
  border-left: 2px solid rgb(var(--callout-color));
  border-radius: 0 var(--callout-radius) var(--callout-radius) 0;
  background: rgba(var(--callout-color), 0.08);
}

.note-body .callout-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: rgb(var(--callout-color));
  font-weight: 700;
}

.note-body .callout-icon::before {
  content: "●";
}

.note-body .callout-content > :first-child {
  margin-top: 6px;
}

.note-body .callout-content > :last-child {
  margin-bottom: 0;
}

.note-body details.callout > summary {
  cursor: pointer;
  list-style: none;
}

.note-body details.callout > summary::-webkit-details-marker {
  display: none;
}

.note-body details.callout > summary::after {
  content: "›";
  margin-left: auto;
  transition: transform 0.2s;
}

.note-body details.callout[open] > summary::after {
  transform: rotate(90deg);
}

.note-body .callout:is([data-callout="note"], [data-callout="info"], [data-callout="todo"]) { --callout-color: 102, 217, 239; }
.note-body .callout:is([data-callout="abstract"], [data-callout="summary"]) { --callout-color: 230, 219, 116; }
.note-body .callout:is([data-callout="tip"], [data-callout="hint"], [data-callout="important"], [data-callout="success"], [data-callout="check"], [data-callout="done"]) { --callout-color: 166, 226, 46; }
.note-body .callout:is([data-callout="question"], [data-callout="help"], [data-callout="faq"]) { --callout-color: 230, 219, 116; }
.note-body .callout:is([data-callout="warning"], [data-callout="caution"], [data-callout="attention"]) { --callout-color: 253, 151, 31; }
.note-body .callout:is([data-callout="failure"], [data-callout="fail"], [data-callout="missing"], [data-callout="danger"], [data-callout="error"], [data-callout="bug"]) { --callout-color: 249, 38, 114; }
.note-body .callout[data-callout="example"] { --callout-color: 174, 129, 255; }
.note-body .callout:is([data-callout="quote"], [data-callout="cite"]) { --callout-color: 167, 169, 155; }

:root[data-theme="monokai-light"] .note-body .callout:is([data-callout="note"], [data-callout="info"], [data-callout="todo"]) { --callout-color: 23, 109, 131; }
:root[data-theme="monokai-light"] .note-body .callout:is([data-callout="abstract"], [data-callout="summary"], [data-callout="question"], [data-callout="help"], [data-callout="faq"]) { --callout-color: 138, 90, 11; }
:root[data-theme="monokai-light"] .note-body .callout:is([data-callout="tip"], [data-callout="hint"], [data-callout="important"], [data-callout="success"], [data-callout="check"], [data-callout="done"]) { --callout-color: 75, 112, 21; }
:root[data-theme="monokai-light"] .note-body .callout:is([data-callout="warning"], [data-callout="caution"], [data-callout="attention"]) { --callout-color: 160, 80, 0; }
:root[data-theme="monokai-light"] .note-body .callout[data-callout="example"] { --callout-color: 118, 84, 165; }

.note-body .callout:is([data-callout="note"], [data-callout="info"]) .callout-icon::before { content: "i"; }
.note-body .callout:is([data-callout="tip"], [data-callout="hint"], [data-callout="important"]) .callout-icon::before { content: "✦"; }
.note-body .callout:is([data-callout="success"], [data-callout="check"], [data-callout="done"], [data-callout="result"]) .callout-icon::before { content: "✓"; }
.note-body .callout:is([data-callout="question"], [data-callout="help"], [data-callout="faq"], [data-callout="hypothesis"]) .callout-icon::before { content: "?"; }
.note-body .callout:is([data-callout="warning"], [data-callout="caution"], [data-callout="attention"], [data-callout="gotcha"]) .callout-icon::before { content: "▲"; }
.note-body .callout:is([data-callout="failure"], [data-callout="fail"], [data-callout="missing"], [data-callout="danger"], [data-callout="error"], [data-callout="bug"]) .callout-icon::before { content: "✕"; }
.note-body .callout:is([data-callout="quote"], [data-callout="cite"]) .callout-icon::before { content: "❝"; }
.note-body .callout[data-callout="example"] .callout-icon::before { content: "◆"; }
.note-body .callout:is([data-callout="abstract"], [data-callout="summary"], [data-callout="tldr"]) .callout-icon::before { content: "≡"; }
.note-body .callout[data-callout="scene"] .callout-icon::before { content: "▶"; }
.note-body .callout[data-callout="spec"] .callout-icon::before { content: "⌗"; }
.note-body .callout[data-callout="deep-dive"] .callout-icon::before { content: "◎"; }
.note-body .callout[data-callout="decision"] .callout-icon::before { content: "⑂"; }
.note-body .callout[data-callout="aside"] .callout-icon::before { content: "※"; }

/* Mermaid diagrams, drawn by studioSite.js */

.note-body .mermaid {
  display: flex;
  justify-content: center;
  margin: 26px 0;
  overflow-x: auto;
}

.note-body .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Out of Gravity Studio. Palette follows outofgravity.xyz. */

body {
  --ofg-accent: #e14775;
  --ofg-accent-rgb: 225, 71, 117;
  --ofg-hue-0: #e14775;
  --ofg-hue-1: #ae81ff;
  --ofg-hue-2: #66d9ef;
  --ofg-hue-3: #a6e22e;
  --ofg-hue-4: #e6db74;
  --ofg-radius: 10px;
  --ofg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme="monokai-light"] body {
  --ofg-accent: #af3158;
  --ofg-accent-rgb: 175, 49, 88;
  --ofg-hue-0: #af3158;
  --ofg-hue-1: #7654a5;
  --ofg-hue-2: #176d83;
  --ofg-hue-3: #4b7015;
  --ofg-hue-4: #8a5a0b;
}

/* ------------------------------------------------------------ */
/* Shared figure chrome                                          */
/* ------------------------------------------------------------ */

.ofg {
  container-type: inline-size;
  margin: 1.6em 0;
  padding: 0;
  font-size: var(--font-text-size);
  line-height: 1.5;
}

.ofg-title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.9em;
  font-size: 0.75em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ofg-title::before {
  content: "";
  width: 1.6em;
  height: 2px;
  background: var(--ofg-accent);
}

.ofg-caption {
  margin-top: 0.8em;
  font-size: 0.8em;
  color: var(--text-faint);
}

.ofg-caption::before {
  content: "↳ ";
  color: var(--ofg-accent);
}

.ofg button {
  font-family: inherit;
  cursor: pointer;
}

.ofg-btn {
  height: auto;
  padding: 0.35em 0.8em;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  font-size: 0.8em;
}

.ofg-btn:hover:not(:disabled) {
  border-color: var(--ofg-accent);
  color: var(--text-normal);
}

.ofg-btn.is-primary:not(:disabled) {
  border-color: rgba(var(--ofg-accent-rgb), 0.6);
  color: var(--ofg-accent);
}

.ofg-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

@keyframes ofg-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes ofg-grow {
  from {
    transform: scaleX(0);
  }
}

/* ------------------------------------------------------------ */
/* stats                                                         */
/* ------------------------------------------------------------ */

.ofg-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75em;
}

.ofg-stat {
  position: relative;
  overflow: hidden;
  padding: 1em 1.1em 1.1em;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--ofg-radius);
  background: var(--background-secondary);
  animation: ofg-rise 0.5s var(--ofg-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.ofg-stat.is-star {
  border-color: rgba(var(--ofg-accent-rgb), 0.55);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--ofg-accent-rgb), 0.2), transparent 60%),
    var(--background-secondary);
}

.ofg-stat-value {
  font-size: 2.1em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-normal);
}

.ofg-stat.is-star .ofg-stat-value {
  color: var(--ofg-accent);
}

.ofg-stat-label {
  margin-top: 0.4em;
  font-size: 0.85em;
  color: var(--text-normal);
}

.ofg-stat-note {
  margin-top: 0.25em;
  font-size: 0.72em;
  color: var(--text-faint);
}

/* ------------------------------------------------------------ */
/* bars                                                          */
/* ------------------------------------------------------------ */

.ofg-bars-list {
  display: grid;
  grid-template-columns: minmax(5em, max-content) 1fr minmax(3.5em, max-content);
  gap: 0.6em 0.9em;
  align-items: center;
}

.ofg-bar-row {
  display: contents;
}

.ofg-bar-label {
  font-size: 0.85em;
  color: var(--text-muted);
  text-align: right;
}

.ofg-bar-track {
  height: 1.15em;
  border-radius: 4px;
  background: var(--background-modifier-hover);
  overflow: hidden;
}

.ofg-bar-fill {
  width: var(--w);
  height: 100%;
  border-radius: 4px;
  background: rgba(var(--ofg-accent-rgb), 0.38);
  transform-origin: left;
  animation: ofg-grow 0.9s var(--ofg-ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.ofg-bar-value {
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.ofg-bar-row.is-star .ofg-bar-fill {
  background: var(--ofg-accent);
  box-shadow: 0 0 18px rgba(var(--ofg-accent-rgb), 0.35);
}

.ofg-bar-row.is-star .ofg-bar-label,
.ofg-bar-row.is-star .ofg-bar-value {
  color: var(--text-normal);
  font-weight: 600;
}

/* ------------------------------------------------------------ */
/* timeline                                                      */
/* ------------------------------------------------------------ */

.ofg-timeline-list {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.8em;
  list-style: none;
}

.ofg-timeline-list::before {
  content: "";
  position: absolute;
  top: 0.5em;
  bottom: 0.5em;
  left: 0.5em;
  width: 2px;
  background: linear-gradient(var(--ofg-accent), var(--background-modifier-border) 70%);
  border-radius: 1px;
}

.ofg-tl-item {
  position: relative;
  margin: 0;
  padding: 0 0 1.2em;
  animation: ofg-rise 0.5s var(--ofg-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.ofg-tl-item:last-child {
  padding-bottom: 0;
}

.ofg-tl-item::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: calc(-1.3em - 5px);
  width: 8px;
  height: 8px;
  border: 2px solid var(--text-faint);
  border-radius: 50%;
  background: var(--background-primary);
}

.ofg-tl-item.is-star::before {
  border-color: var(--ofg-accent);
  background: var(--ofg-accent);
  box-shadow: 0 0 0 5px rgba(var(--ofg-accent-rgb), 0.18);
}

.ofg-tl-when {
  font-size: 0.72em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ofg-tl-item.is-star .ofg-tl-when {
  color: var(--ofg-accent);
}

.ofg-tl-title {
  font-weight: 600;
}

.ofg-tl-detail {
  font-size: 0.85em;
  color: var(--text-muted);
}

/* ------------------------------------------------------------ */
/* stack                                                         */
/* ------------------------------------------------------------ */

.ofg-stack-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ofg-layer {
  display: grid;
  grid-template-columns: 2.2em minmax(7em, 13em) 1fr;
  gap: 0.8em;
  align-items: center;
  margin-inline: calc((var(--n) - var(--i) - 1) * 2.2%);
  padding: 0.7em 1em;
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  background: var(--background-secondary);
  animation: ofg-rise 0.5s var(--ofg-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.ofg-layer-index {
  font-size: 0.7em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.ofg-layer-name {
  font-weight: 600;
}

.ofg-layer-detail {
  font-size: 0.85em;
  color: var(--text-muted);
}

.ofg-layer.is-star {
  border-color: rgba(var(--ofg-accent-rgb), 0.6);
  background:
    linear-gradient(90deg, rgba(var(--ofg-accent-rgb), 0.16), transparent 70%),
    var(--background-secondary);
  box-shadow: inset 3px 0 0 var(--ofg-accent);
}

.ofg-layer.is-star .ofg-layer-index,
.ofg-layer.is-star .ofg-layer-name {
  color: var(--ofg-accent);
}

/* ------------------------------------------------------------ */
/* compare                                                       */
/* ------------------------------------------------------------ */

.ofg-compare-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--ofg-radius);
}

.ofg-compare-col {
  position: relative;
  padding: 1em 1.2em;
}

.ofg-compare-col:first-child {
  border-radius: var(--ofg-radius) 0 0 var(--ofg-radius);
}

.ofg-compare-col:last-child {
  border-radius: 0 var(--ofg-radius) var(--ofg-radius) 0;
}

.ofg-compare-col + .ofg-compare-col {
  border-left: 1px dashed var(--background-modifier-border);
}

.ofg-compare-col + .ofg-compare-col::before {
  content: "vs";
  position: absolute;
  z-index: 1;
  top: 0.95em;
  left: 0;
  transform: translateX(-50%);
  padding: 0.1em 0.5em;
  border: 1px solid var(--background-modifier-border);
  border-radius: 999px;
  background: var(--background-primary);
  font-size: 0.68em;
  color: var(--text-faint);
}

.ofg-compare-head {
  margin-bottom: 0.4em;
  font-size: 0.75em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ofg-compare-col.is-star {
  background: rgba(var(--ofg-accent-rgb), 0.07);
}

.ofg-compare-col.is-star .ofg-compare-head {
  color: var(--ofg-accent);
}

.ofg-compare-col.is-star .ofg-compare-head::after {
  content: " ✦";
}

.ofg-compare-body > :first-child,
.ofg-compare-body p:first-child {
  margin-top: 0;
}

.ofg-compare-body > :last-child,
.ofg-compare-body p:last-child {
  margin-bottom: 0;
}

@container (max-width: 560px) {
  .ofg-compare-cols {
    grid-template-columns: 1fr;
  }

  .ofg-compare-col + .ofg-compare-col {
    border-left: 0;
    border-top: 1px dashed var(--background-modifier-border);
  }

  .ofg-compare-col + .ofg-compare-col::before {
    top: 0;
    left: 1.2em;
    transform: translateY(-50%);
  }
}

/* ------------------------------------------------------------ */
/* steps                                                         */
/* ------------------------------------------------------------ */

.ofg-steps {
  padding: 1em 1.2em 0.9em;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--ofg-radius);
  background: var(--background-secondary);
  outline: none;
}

.ofg-steps:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--ofg-accent-rgb), 0.5);
}

.ofg-steps-head {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
}

.ofg-steps-count {
  font-size: 0.75em;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--ofg-accent);
}

.ofg-steps-title {
  flex: 1;
  font-weight: 700;
}

.ofg .ofg-steps-all {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 0.72em;
  color: var(--text-faint);
}

.ofg .ofg-steps-all:hover {
  color: var(--ofg-accent);
}

.ofg-steps-rail {
  display: flex;
  gap: 4px;
  margin: 0.7em 0 1em;
}

.ofg .ofg-steps-dot {
  flex: 1;
  height: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--background-modifier-border);
  box-shadow: none;
  transition: background 0.25s;
}

.ofg .ofg-steps-dot.is-done {
  background: rgba(var(--ofg-accent-rgb), 0.4);
}

.ofg .ofg-steps-dot.is-active {
  background: var(--ofg-accent);
}

.ofg-steps-stage {
  display: grid;
}

.ofg-steps-pane {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.25s, transform 0.3s var(--ofg-ease), visibility 0.25s;
}

.ofg-steps-pane.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.ofg-steps-pane-title {
  display: none;
  margin-bottom: 0.4em;
  font-weight: 700;
}

.ofg-steps-body > :first-child {
  margin-top: 0;
}

.ofg-steps-body > :last-child {
  margin-bottom: 0;
}

.ofg-steps-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1em;
}

.ofg-steps-hint {
  font-size: 0.7em;
  color: var(--text-faint);
}

.ofg-steps.is-all .ofg-steps-stage {
  display: block;
}

.ofg-steps.is-all .ofg-steps-pane {
  visibility: visible;
  opacity: 1;
  transform: none;
  padding: 0.8em 0;
  border-top: 1px dashed var(--background-modifier-border);
}

.ofg-steps.is-all .ofg-steps-pane-title {
  display: block;
}

.ofg-steps.is-all .ofg-steps-rail,
.ofg-steps.is-all .ofg-steps-nav,
.ofg-steps.is-all .ofg-steps-count {
  display: none;
}

.ofg-steps.is-all .ofg-steps-title {
  visibility: hidden;
}

/* ------------------------------------------------------------ */
/* bytes                                                         */
/* ------------------------------------------------------------ */

.ofg-bytes-ruler,
.ofg-bytes-grid {
  display: grid;
  grid-template-columns: repeat(var(--w, 32), minmax(0, 1fr));
}

.ofg-bytes-ruler {
  margin-bottom: 0.3em;
  font-size: 0.6em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.ofg-bytes-ruler .is-byte {
  color: var(--text-muted);
}

.ofg-bytes-grid {
  border-top: 1px solid var(--background-modifier-border);
  border-left: 1px solid var(--background-modifier-border);
  font-size: 0.78em;
}

.ofg-bytes-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 3.4em;
  padding: 0.4em 0.3em;
  border-right: 1px solid var(--background-modifier-border);
  border-bottom: 1px solid var(--background-modifier-border);
  background: color-mix(in srgb, var(--c) 13%, transparent);
  text-align: center;
  animation: ofg-rise 0.4s var(--ofg-ease) both;
}

.ofg-bytes-field.is-star {
  background: color-mix(in srgb, var(--ofg-accent) 30%, transparent);
  box-shadow: inset 0 0 0 1px var(--ofg-accent);
}

.ofg-bytes-field.is-open {
  border-right-style: dashed;
}

.ofg-bytes-field.is-cont {
  opacity: 0.8;
}

.ofg-bytes-name {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ofg-bytes-bits {
  overflow: hidden;
  font-size: 0.8em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

.ofg-bytes-total {
  margin-top: 0.5em;
  font-size: 0.72em;
  text-align: right;
  color: var(--text-faint);
}

/* ------------------------------------------------------------ */
/* annotate                                                      */
/* ------------------------------------------------------------ */

.ofg-annot-code {
  position: relative;
}

.ofg-annot-code pre {
  margin: 0;
}

.ofg-annot-band {
  position: absolute;
  left: 0;
  right: 0;
  border-left: 3px solid var(--ofg-accent);
  border-radius: 0 4px 4px 0;
  background: rgba(var(--ofg-accent-rgb), 0.14);
  pointer-events: none;
  opacity: 0;
  transition: top 0.2s var(--ofg-ease), height 0.2s var(--ofg-ease), opacity 0.2s;
}

.ofg-annot-band.is-on {
  opacity: 1;
}

.ofg-annot-band::after {
  content: attr(data-n);
  position: absolute;
  top: 0.15em;
  right: 0.5em;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--ofg-accent);
  color: var(--background-primary);
  font-size: 0.7em;
  font-weight: 700;
}

.ofg-annot-notes {
  display: grid;
  gap: 0.2em;
  margin: 0.7em 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ofg-note;
}

.ofg-annot-note {
  display: grid;
  grid-template-columns: 1.6em 4.2em 1fr;
  gap: 0.5em;
  align-items: baseline;
  margin: 0;
  padding: 0.4em 0.6em;
  border-radius: 6px;
  font-size: 0.9em;
  counter-increment: ofg-note;
  outline: none;
  transition: background 0.15s;
}

.ofg-annot-note::before {
  content: counter(ofg-note);
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid rgba(var(--ofg-accent-rgb), 0.6);
  border-radius: 50%;
  font-size: 0.75em;
  color: var(--ofg-accent);
}

.ofg-annot-note:hover,
.ofg-annot-note:focus-visible,
.ofg-annot-note.is-on {
  background: var(--background-modifier-hover);
}

.ofg-annot-note.is-on::before {
  background: var(--ofg-accent);
  color: var(--background-primary);
}

.ofg-annot-chip {
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.ofg-annot-text p {
  margin: 0;
}

/* Narrow figures (phones, split panes) */

@container (max-width: 560px) {
  .ofg-layer {
    grid-template-columns: 2em 1fr;
    gap: 0.1em 0.6em;
    margin-inline: calc((var(--n) - var(--i) - 1) * 1.5%);
  }

  .ofg-layer-detail {
    grid-column: 2;
  }

  .ofg-annot-note {
    grid-template-columns: 1.6em 1fr;
  }

  .ofg-annot-text {
    grid-column: 2;
  }

  .ofg-bars-list {
    grid-template-columns: 1fr max-content;
    gap: 0.25em 0.8em;
  }

  .ofg-bar-label {
    grid-column: 1 / -1;
    text-align: left;
  }

  .ofg-bytes-ruler span:not(.is-byte) {
    visibility: hidden;
  }
}

/* ------------------------------------------------------------ */
/* Errors: a block that teaches its own syntax                   */
/* ------------------------------------------------------------ */

.ofg-broken {
  padding: 0.8em 1em;
  border: 1px dashed rgba(var(--ofg-accent-rgb), 0.7);
  border-radius: 8px;
  font-size: 0.85em;
}

.ofg-error-msg {
  font-weight: 600;
  color: var(--ofg-accent);
}

.ofg-error-label {
  margin-top: 0.5em;
  color: var(--text-muted);
}

.ofg-error-hint {
  margin: 0.3em 0 0;
  padding: 0.6em 0.8em;
  border-radius: 6px;
  background: var(--code-background);
  white-space: pre-wrap;
}

/* ------------------------------------------------------------ */
/* Callouts                                                      */
/* ------------------------------------------------------------ */

.callout[data-callout="scene"] {
  --callout-color: 225, 71, 117;
  --callout-icon: lucide-clapperboard;
}

.callout[data-callout="tldr"] {
  --callout-color: 230, 219, 116;
  --callout-icon: lucide-zap;
}

.callout[data-callout="spec"] {
  --callout-color: 102, 217, 239;
  --callout-icon: lucide-ruler;
}

.callout[data-callout="deep-dive"] {
  --callout-color: 174, 129, 255;
  --callout-icon: lucide-telescope;
}

.callout[data-callout="gotcha"] {
  --callout-color: 249, 38, 114;
  --callout-icon: lucide-flame;
}

.callout[data-callout="decision"] {
  --callout-color: 102, 217, 239;
  --callout-icon: lucide-git-branch;
}

.callout[data-callout="hypothesis"] {
  --callout-color: 230, 219, 116;
  --callout-icon: lucide-flask-conical;
}

.callout[data-callout="result"] {
  --callout-color: 166, 226, 46;
  --callout-icon: lucide-activity;
}

.callout[data-callout="aside"] {
  --callout-color: 167, 169, 155;
  --callout-icon: lucide-message-circle;
}

.callout[data-callout="terminal"] {
  --callout-color: 166, 226, 46;
  --callout-icon: lucide-terminal;
}

:root[data-theme="monokai-light"] .callout[data-callout="tldr"],
:root[data-theme="monokai-light"] .callout[data-callout="hypothesis"] {
  --callout-color: 138, 90, 11;
}

:root[data-theme="monokai-light"] .callout[data-callout="spec"],
:root[data-theme="monokai-light"] .callout[data-callout="decision"] {
  --callout-color: 23, 109, 131;
}

:root[data-theme="monokai-light"] .callout[data-callout="result"],
:root[data-theme="monokai-light"] .callout[data-callout="terminal"] {
  --callout-color: 75, 112, 21;
}

.callout[data-callout="scene"] {
  border-left: 3px solid rgb(var(--callout-color));
  border-radius: 0 var(--callout-radius) var(--callout-radius) 0;
  background: linear-gradient(90deg, rgba(var(--callout-color), 0.12), transparent 80%);
}

.callout[data-callout="scene"] .callout-content {
  font-style: italic;
}

.callout[data-callout="spec"] {
  background:
    repeating-linear-gradient(90deg, rgba(var(--callout-color), 0.07) 0 1px, transparent 1px 24px),
    rgba(var(--callout-color), 0.06);
}

.callout[data-callout="pullquote"] {
  --callout-color: var(--ofg-accent-rgb);
  margin: 2em 0;
  padding: 0.4em 0 0.4em 1.2em;
  border: 0;
  border-left: 3px solid var(--ofg-accent);
  border-radius: 0;
  background: none;
}

.callout[data-callout="pullquote"] .callout-title {
  display: none;
}

.callout[data-callout="pullquote"] .callout-content {
  padding: 0;
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.callout[data-callout="pullquote"] .callout-content p {
  margin: 0;
}

.callout[data-callout="terminal"] {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--background-modifier-border);
  background: var(--code-background);
}

.callout[data-callout="terminal"] .callout-title {
  padding: 0.5em 0.9em;
  border-bottom: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  font-size: 0.8em;
  color: var(--text-muted);
}

.callout[data-callout="terminal"] .callout-title::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  margin-right: 38px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840;
}

.callout[data-callout="terminal"] .callout-icon {
  display: none;
}

.callout[data-callout="terminal"] .callout-content {
  padding: 0 0.9em;
}

.callout[data-callout="terminal"] .callout-content pre {
  margin: 0.6em 0;
  padding: 0;
  background: none;
}

.callout[data-callout="aside"] {
  font-size: 0.85em;
  background: transparent;
  border: 1px dashed var(--background-modifier-border);
}

/* ------------------------------------------------------------ */
/* cssclasses: ofg-post: the editorial layout for posts          */
/* ------------------------------------------------------------ */

.ofg-post {
  --file-line-width: 46rem;
  --h1-size: 2.4em;
  --h2-size: 1.45em;
  --h3-size: 1.15em;
}

.markdown-preview-view.ofg-post .markdown-preview-sizer,
.markdown-source-view.ofg-post .cm-sizer {
  max-width: var(--file-line-width);
  margin-inline: auto;
}

.markdown-preview-view.ofg-post {
  line-height: 1.7;
}

.ofg-post h1,
.ofg-post .HyperMD-header-1 {
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.markdown-preview-view.ofg-post h1 {
  margin-bottom: 0.4em;
}

.markdown-preview-view.ofg-post h2 {
  margin-top: 2.4em;
  letter-spacing: -0.015em;
}

.markdown-preview-view.ofg-post h2::before {
  content: "// ";
  color: var(--ofg-accent);
  font-weight: 400;
}

.markdown-preview-view.ofg-post h3 {
  color: var(--text-muted);
}

.markdown-preview-view.ofg-post .el-h1 + .el-p p,
.markdown-preview-view.ofg-post .el-h1 + .el-div + .el-p p {
  font-size: 1.15em;
  color: var(--text-muted);
}

.markdown-preview-view.ofg-post hr {
  position: relative;
  height: 1.5em;
  margin: 2.5em 0;
  border: 0;
  overflow: visible;
}

.markdown-preview-view.ofg-post hr::after {
  content: "✦   ✦   ✦";
  position: absolute;
  inset: 0;
  white-space: pre;
  text-align: center;
  color: var(--ofg-accent);
  letter-spacing: 0.2em;
}

.ofg-post a.internal-link,
.ofg-post a.external-link {
  text-decoration-color: rgba(var(--ofg-accent-rgb), 0.5);
  text-underline-offset: 3px;
}

.ofg-post :not(pre) > code {
  color: var(--ofg-accent);
}

.markdown-preview-view.ofg-post img {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--ofg-radius);
}

.markdown-preview-view.ofg-post blockquote {
  border-left-color: var(--ofg-accent);
  color: var(--text-muted);
}

/* Asides drift into the margin when the page is wide enough. */
@media (min-width: 1100px) {
  .markdown-preview-view.ofg-post .callout[data-callout="aside"] {
    float: right;
    clear: right;
    width: 15em;
    margin: 0.2em -16.5em 1em 1em;
  }
}

/* Mermaid, dressed in brand colors (posts only). */
.ofg-post .mermaid .node rect,
.ofg-post .mermaid .node polygon,
.ofg-post .mermaid .node circle,
.ofg-post .mermaid .node path,
.ofg-post .mermaid .actor,
.ofg-post .mermaid .stateGroup rect,
.ofg-post .mermaid rect.basic {
  fill: var(--background-secondary) !important;
  stroke: rgba(var(--ofg-accent-rgb), 0.75) !important;
}

.ofg-post .mermaid .edgePath .path,
.ofg-post .mermaid .flowchart-link,
.ofg-post .mermaid .messageLine0,
.ofg-post .mermaid .messageLine1,
.ofg-post .mermaid .transition {
  stroke: var(--text-muted) !important;
}

.ofg-post .mermaid .arrowheadPath,
.ofg-post .mermaid marker path {
  fill: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
}

.ofg-post .mermaid .nodeLabel,
.ofg-post .mermaid .edgeLabel,
.ofg-post .mermaid text.actor,
.ofg-post .mermaid .messageText {
  color: var(--text-normal) !important;
  fill: var(--text-normal) !important;
}

/* ------------------------------------------------------------ */
/* Writing room                                                  */
/* ------------------------------------------------------------ */

body.ofg-writing-room .workspace-ribbon,
body.ofg-writing-room .workspace-tab-header-container,
body.ofg-writing-room .status-bar > :not(.ofg-rhythm):not(.plugin-editor-status) {
  opacity: 0;
  transition: opacity 0.3s;
}

body.ofg-writing-room .workspace-ribbon:hover,
body.ofg-writing-room .workspace-tab-header-container:hover,
body.ofg-writing-room .status-bar:hover > * {
  opacity: 1;
}

body.ofg-writing-room .view-header {
  opacity: 0.25;
  transition: opacity 0.3s;
}

body.ofg-writing-room .view-header:hover {
  opacity: 1;
}

body.ofg-writing-room .markdown-source-view .cm-sizer {
  max-width: 44rem;
  margin-inline: auto;
}

body.ofg-writing-room .markdown-source-view .cm-content > .cm-line {
  opacity: 0.45;
  transition: opacity 0.25s;
}

body.ofg-writing-room .markdown-source-view .cm-content > .cm-line.cm-active {
  opacity: 1;
}

body.ofg-writing-room .markdown-source-view .cm-content:not(:focus-within) > .cm-line {
  opacity: 1;
}

/* ------------------------------------------------------------ */
/* Status bar + picker                                           */
/* ------------------------------------------------------------ */

.status-bar-item.ofg-rhythm {
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

.status-bar-item.ofg-rhythm.is-warn {
  color: var(--ofg-accent);
}

.ofg-recipe-name {
  font-weight: 600;
}

.ofg-recipe-when {
  font-size: 0.8em;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ofg,
  .ofg * {
    animation: none !important;
    transition: none !important;
  }
}