@layer components {

.obo-sim {
  --obo-sims-gap: 1.5rem;
  display: grid;
  gap: var(--obo-sims-gap);
  align-items: start;
  color: var(--obo-sims-text, CanvasText);
  font-family: var(--obo-sims-font, inherit);
}

.obo-sim__main { display: grid; gap: var(--obo-sims-gap); align-items: start; min-width: 0; }

@media (min-width: 64rem) and (pointer: fine) {
  .obo-sim__main { grid-template-columns: minmax(0, 1fr) 16rem; }
}

.obo-sim__stage canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
  border-radius: var(--obo-sims-radius, 0.75rem);
  border: 1px solid var(--obo-sims-border, GrayText);
}

.obo-sim__panel { display: grid; gap: 1.25rem; }

.obo-sim__title {
  font-family: var(--obo-sims-font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.obo-sim__summary { font-size: 0.875rem; color: var(--obo-sims-muted, GrayText); margin: -0.75rem 0 0; }

.obo-sim__controls { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.obo-sim__button,
.obo-sim__mark {
  font: inherit;
  font-size: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--obo-sims-border, GrayText);
  background: transparent;
  color: var(--obo-sims-muted, GrayText);
  cursor: pointer;
}

.obo-sim__share-field {
  flex: 1 1 100%;
  min-width: 0;
  font-family: var(--obo-sims-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--obo-sims-border, GrayText);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--obo-sims-text, CanvasText);
}

.obo-sim__share-field[hidden] { display: none; }

.obo-sim__mark { border: 0; padding-inline: 0; margin-top: 0.25rem; }

@media (hover: hover) and (pointer: fine) {
  .obo-sim__button:hover { border-color: var(--obo-sims-accent, Highlight); color: var(--obo-sims-text, CanvasText); }
  .obo-sim__mark:hover { color: var(--obo-sims-accent, Highlight); }
}

.obo-sim__param-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }

.obo-sim__label {
  margin: 0;
  font-family: var(--obo-sims-font-mono, ui-monospace, monospace);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--obo-sims-muted, GrayText);
}

.obo-sim__name {
  font-family: var(--obo-sims-font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--obo-sims-muted, GrayText);
}

.obo-sim__value { font-family: var(--obo-sims-font-mono, ui-monospace, monospace); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

.obo-sim__range { display: block; width: 100%; margin: 0; accent-color: var(--obo-sims-accent, Highlight); }
.obo-sim__marks { display: flex; flex-wrap: wrap; column-gap: 0.75rem; }

.obo-sim__readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1rem; margin: 0; }
.obo-sim__readouts dd { margin: 0.25rem 0 0; }

.obo-sim__readout {
  font-family: var(--obo-sims-font-display, inherit);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obo-sim__sources { font-size: 0.75rem; color: var(--obo-sims-muted, GrayText); }
.obo-sim__sources summary { cursor: pointer; }
.obo-sim__sources ol { margin: 0.5rem 0 0; padding-left: 1rem; display: grid; gap: 0.375rem; }
.obo-sim__sources a { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .obo-sim__sources a:hover { color: var(--obo-sims-accent, Highlight); }
}

.obo-sim__wide { grid-column: 1 / -1; display: grid; gap: 0.75rem; }

fieldset.obo-sim__param { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.obo-sim__param legend { margin-bottom: 0.5rem; }

.obo-sim__segments { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.obo-sim__segment input { position: absolute; opacity: 0; pointer-events: none; }
.obo-sim__segment span {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid var(--obo-sims-border, GrayText);
  color: var(--obo-sims-muted, GrayText);
  cursor: pointer;
}
.obo-sim__segment input:checked + span {
  border-color: var(--obo-sims-accent, Highlight);
  color: var(--obo-sims-accent, Highlight);
  background: var(--obo-sims-accent-dim, transparent);
}
.obo-sim__segment input:focus-visible + span { outline: 2px solid var(--obo-sims-accent, Highlight); outline-offset: 2px; }

.obo-sim__presets { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.obo-sim__preset {
  font: inherit;
  text-align: left;
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--obo-sims-radius, 0.75rem);
  border: 1px solid var(--obo-sims-border, GrayText);
  background: transparent;
  color: var(--obo-sims-text, CanvasText);
  cursor: pointer;
}
.obo-sim__preset-label { font-size: 0.875rem; font-weight: 600; }
.obo-sim__preset-description { font-size: 0.75rem; color: var(--obo-sims-muted, GrayText); line-height: 1.4; }
@media (hover: hover) and (pointer: fine) {
  .obo-sim__preset:hover { border-color: var(--obo-sims-accent, Highlight); }
}

.obo-sim__stage canvas { touch-action: pan-y pinch-zoom; cursor: crosshair; }
.obo-sim__stage canvas.obo-sim__scene { aspect-ratio: 5 / 2; image-rendering: auto; cursor: default; touch-action: auto; }
.obo-sim__stage canvas.obo-sim__static { cursor: default; touch-action: auto; }
.obo-sim__stage canvas.obo-sim__vector { image-rendering: auto; }

.obo-sim__stage-foot,
.obo-sim__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--obo-sims-muted, GrayText);
}

.obo-sim__stage canvas.obo-sim__canvas--wide { aspect-ratio: 2 / 1; image-rendering: auto; }
.obo-sim__toolbar { margin-top: 0; margin-bottom: 0.5rem; }
.obo-sim__legend { display: inline-flex; align-items: center; gap: 0.5rem; }
.obo-sim__legend[hidden] { display: none; }
.obo-sim__swatch { display: inline-block; width: 6rem; height: 0.6rem; border-radius: 9999px; border: 1px solid var(--obo-sims-border, GrayText); }

@media (min-width: 48rem) {
  .obo-sim.obo-sim--stacked .obo-sim__main { grid-template-columns: minmax(0, 1fr); }
  .obo-sim--stacked .obo-sim__panel { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
  .obo-sim--stacked .obo-sim__panel > :not(.obo-sim__param) { grid-column: 1 / -1; }
  .obo-sim--stacked .obo-sim__readouts { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
  .obo-sim--stacked .obo-sim__group-body { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
}

@media (48rem <= width < 64rem), (min-width: 48rem) and (not (pointer: fine)) {
  .obo-sim:not(.obo-sim--stacked) .obo-sim__stage canvas { width: min(100%, 75svh); margin-inline: auto; }
  .obo-sim .obo-sim__panel { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
  .obo-sim .obo-sim__panel > :not(.obo-sim__param) { grid-column: 1 / -1; }
  .obo-sim .obo-sim__readouts { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
  .obo-sim .obo-sim__group-body { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
}

.obo-sim__charge { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 9999px; margin-left: 0.5rem; }
.obo-sim__charge--north { background: var(--obo-sims-accent, Highlight); }
.obo-sim__charge--south { background: var(--obo-sims-alert, Mark); }

.obo-sim__group { border-top: 1px solid var(--obo-sims-border, GrayText); padding-top: 0.75rem; }
.obo-sim__group > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.obo-sim__group > summary::-webkit-details-marker { display: none; }
.obo-sim__group > summary::after { content: "+"; font-size: 0.875rem; color: var(--obo-sims-accent, Highlight); }
.obo-sim__group[open] > summary::after { content: "\2212"; }
.obo-sim__group-body { display: grid; gap: 1.25rem; padding-top: 1rem; }

.obo-sim__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.obo-sim__stage { position: relative; min-width: 0; }
.obo-sim__stage--pinned { position: sticky; top: min(var(--obo-sims-pin-offset, 1rem), var(--obo-sims-pin-room, 1rem)); }

.obo-sim__button:focus-visible,
.obo-sim__mark:focus-visible,
.obo-sim__preset:focus-visible,
.obo-sim__range:focus-visible,
.obo-sim summary:focus-visible,
.obo-sim__sources a:focus-visible,
.obo-sim__stage canvas:focus-visible {
  outline: 2px solid var(--obo-sims-accent, Highlight);
  outline-offset: 2px;
}

.obo-sim__button:disabled { opacity: 0.5; cursor: default; }
.obo-sim__stroke-toggle { display: none; }
@media (pointer: coarse) {
  .obo-sim__stroke-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

.obo-sim__muted { color: var(--obo-sims-muted, GrayText); }
.obo-sim__sweeps { display: grid; gap: 0.5rem; }
.obo-sim__sweep-status { display: flex; align-items: center; gap: 0.75rem; min-height: 1.75rem; margin-top: 0.75rem; font-family: var(--obo-sims-font-mono, ui-monospace, monospace); font-size: 0.75rem; }

.obo-sim__bar-row { position: relative; z-index: 20; container-type: inline-size; display: grid; justify-items: center; gap: 0.35rem; margin-bottom: 0.75rem; }

.obo-sim__bar {
  position: relative;
  z-index: 20;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  max-width: 100%;
  gap: 0.125rem;
  padding: var(--obo-sims-bar-pad, 0.2rem);
  border-radius: var(--obo-sims-bar-radius, 1.5rem);
  border: 1px solid var(--obo-sims-border, GrayText);
  background: var(--obo-sims-bar, Canvas);
  box-shadow: var(--obo-sims-bar-shadow, 0 6px 20px var(--obo-sims-shadow, transparent));
}

.obo-sim__bar-icon {
  position: relative;
  width: var(--obo-sims-bar-item, 2.125rem);
  height: var(--obo-sims-bar-item, 2.125rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0;
  border: 0;
  border-radius: var(--obo-sims-bar-item-radius, 9999px);
  font: inherit;
  color: var(--obo-sims-muted, GrayText);
  background: transparent;
  cursor: pointer;
}
.obo-sim__bar-icon[hidden] { display: none; }
.obo-sim__bar-icon:disabled { opacity: 0.35; cursor: default; }
.obo-sim__bar-icon[aria-pressed="true"],
.obo-sim__bar-icon[aria-expanded="true"] { background: var(--obo-sims-accent-dim, transparent); color: var(--obo-sims-accent, Highlight); }
.obo-sim__bar-icon:focus-visible { outline: 2px solid var(--obo-sims-accent, Highlight); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .obo-sim__bar-icon:not(:disabled):hover { background: var(--obo-sims-accent-dim, transparent); color: var(--obo-sims-accent, Highlight); }
}

.obo-sim__icon { width: 1.125rem; height: 1.125rem; flex: none; }
.obo-sim__bar-icon--menu { width: auto; padding-inline: 0.5rem 0.35rem; }
.obo-sim__bar-icon--menu .obo-sim__icon + .obo-sim__icon { width: 0.75rem; height: 0.75rem; }

.obo-sim__play[data-running="true"] [data-icon="play"],
.obo-sim__play[data-running="false"] [data-icon="pause"] { display: none; }
.obo-sim__play [data-icon] { display: inline-flex; }

.obo-sim__bar-gap { width: 1px; height: 1.25rem; margin-inline: 0.25rem; background: var(--obo-sims-border, GrayText); }

.obo-sim__speed, .obo-sim__transport, .obo-sim__bar-wide { display: inline-flex; align-items: center; }
.obo-sim__rate {
  min-width: 2.75rem;
  text-align: center;
  font-family: var(--obo-sims-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--obo-sims-text, CanvasText);
}

.obo-sim__bar-menu-wrap { position: relative; display: inline-flex; }
.obo-sim__bar-menu-wrap[hidden] { display: none; }
.obo-sim__bar-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: grid;
  gap: 0.125rem;
  min-width: 11rem;
  padding: var(--obo-sims-bar-pad, 0.35rem);
  border-radius: var(--obo-sims-bar-radius, 1rem);
  border: 1px solid var(--obo-sims-border, GrayText);
  background: var(--obo-sims-surface, Canvas);
  box-shadow: 0 12px 30px var(--obo-sims-shadow, transparent);
}
.obo-sim__bar-menu[hidden] { display: none; }
.obo-sim__bar-menu-wrap.obo-sim__bar-more { position: static; display: none; }
.obo-sim__bar-menu--end { left: auto; right: 0; transform: none; }
@container (max-width: 32rem) {
  .obo-sim__bar-wide, .obo-sim__bar > .obo-sim__bar-gap { display: none; }
  .obo-sim__bar-menu-wrap.obo-sim__bar-more { display: inline-flex; }
}
@media (pointer: coarse) {
  @container (max-width: 41rem) {
    .obo-sim__bar-wide, .obo-sim__bar > .obo-sim__bar-gap { display: none; }
    .obo-sim__bar-menu-wrap.obo-sim__bar-more { display: inline-flex; }
  }
}
.obo-sim__bar-item { width: 100%; justify-content: flex-start; gap: 0.6rem; padding-inline: 0.6rem; border-radius: var(--obo-sims-bar-item-radius, 0.75rem); font-size: 0.8125rem; white-space: nowrap; }

.obo-sim__hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  min-height: 1.1rem;
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--obo-sims-muted, GrayText);
}
.obo-sim__bar-status { color: var(--obo-sims-accent, Highlight); }
.obo-sim__bar-row .obo-sim__share-field { width: 100%; max-width: 28rem; }
.obo-sim__hint:not(:has(span:not(:empty))) { display: none; }
.obo-sim__bar > .obo-sim__bar-gap:first-child { display: none; }

@media (pointer: coarse) {
  .obo-sim__bar-icon { width: 2.75rem; height: 2.75rem; }
  .obo-sim__bar-icon--menu { width: auto; min-width: 2.75rem; }
  .obo-sim__bar-item { width: 100%; }
  .obo-sim__range { min-height: 2.75rem; }
  .obo-sim__button, .obo-sim__mark { min-height: 2.75rem; min-width: 2.75rem; }
  .obo-sim__mark { padding-inline: 0.25rem; }
  .obo-sim__segment span { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.875rem; }
  .obo-sim summary { display: flex; align-items: center; min-height: 2.75rem; }
  .obo-sim__sources a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

}