:root {
  color-scheme: light;
  --desktop: #3a6ea5;
  --desktop-deep: #3a6ea5;
  --window: #ece9d8;
  --window-alt: #d4d0c8;
  --chrome-light: #ffffff;
  --chrome-mid: #b7b3a8;
  --chrome-dark: #5c6770;
  --title-blue: #0a246a;
  --ink: #18212b;
  --muted: #59636d;
  --stage: #071927;
  --stage-grid: #102b3c;
  --stage-edge: #4f6d7d;
  --active: #59d6ff;
  --active-deep: #158eaf;
  --write: #ffb84d;
  --candidate: #b79aff;
  --danger: #ef6a65;
  --good: #54c582;
  --modeled: #bf8cff;
  --unknown: #9ba9b1;
  --focus: #ffb43b;
  --title-height: 32px;
  --toolbar-height: 50px;
  --status-height: 25px;
  --profiles-pane-width: 220px;
  --inspector-pane-width: 350px;
  --trace-pane-height: 128px;
  --equation-pane-height: clamp(220px, 27vh, 270px);
  --pane-splitter-size: 6px;
  --ui-font: Tahoma, Verdana, Arial, sans-serif;
  --heading-font: "Trebuchet MS", Tahoma, sans-serif;
  --mono-font: "Lucida Console", Consolas, "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--window-alt);
}

body {
  min-width: 320px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--window-alt);
  font: 12px/1.4 var(--ui-font);
  -webkit-font-smoothing: antialiased;
}

button,
select,
input,
output {
  color: inherit;
  font: inherit;
}

button,
select,
input[type="checkbox"],
input[type="range"] {
  accent-color: var(--title-blue);
}

button {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
select:not(:disabled),
label[for],
[role="button"] {
  cursor: pointer;
}

button:disabled,
select:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

::selection {
  color: #06131e;
  background: var(--active);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  color: #fff;
  background: #111;
  border: 2px solid #fff;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-window {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--window-alt);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.app-window:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.titlebar {
  display: flex;
  flex: 0 0 var(--title-height);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 3px 4px 3px 6px;
  color: #fff;
  background: var(--title-blue);
  border-top: 1px solid #4567a0;
  border-bottom: 1px solid #03143d;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
  box-shadow: 0 -1px 0 #14377c inset;
}

.titlebar-brand,
.titlebar-copy,
.window-actions,
.drawer-titlebar > div {
  display: flex;
  align-items: center;
  min-width: 0;
}

.titlebar-copy {
  gap: 7px;
  overflow: hidden;
  white-space: nowrap;
}

.titlebar-copy h1 {
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
}

.titlebar-copy h1::after {
  content: " -";
}

.titlebar-copy > span {
  overflow: hidden;
  color: #e6f4ff;
  font-size: 12px;
  text-overflow: ellipsis;
}

.app-icon {
  display: block;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  margin-right: 6px;
  filter: drop-shadow(1px 1px 0 #031331);
}

.app-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.window-actions {
  flex: 0 0 auto;
  gap: 3px;
}

.author-credit {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  color: inherit;
  font: 9px/1 var(--mono-font);
  text-decoration: none;
  white-space: nowrap;
}

.author-credit strong {
  color: #fff;
  font: 700 10px/1 var(--mono-font);
}

.author-credit i {
  padding-left: 5px;
  color: #c6d8ea;
  border-left: 1px solid #6685ad;
  font-style: normal;
}

.author-credit-titlebar {
  height: 22px;
  padding: 0 7px;
  color: #d8e5f3;
  background: #163b7a;
  border: 1px solid #5477ad;
  box-shadow: 1px 1px 0 #061d4d inset;
  text-shadow: 1px 1px #061d4d;
}

.author-credit-titlebar:hover {
  color: #fff;
  background: #214985;
  border-color: #7192bd;
}

.author-credit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.window-button {
  display: grid;
  width: 25px;
  min-width: 25px;
  height: 22px;
  padding: 0;
  color: #101820;
  font-weight: 700;
  line-height: 1;
  place-items: center;
  background: #d4d0c8;
  border: 1px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-radius: 0;
  box-shadow:
    1px 1px 0 #dfdfdf inset,
    -1px -1px 0 #808080 inset;
  text-shadow: none;
}

.window-button:hover {
  background: #e5e2da;
}

.window-button:active {
  padding: 1px 0 0 1px;
  background: #c5c1b9;
  border-color: #404040 #ffffff #ffffff #404040;
  box-shadow: none;
}

.window-button-fullscreen span {
  width: 11px;
  height: 9px;
  border: 2px solid #17202a;
  box-shadow: 1px 1px #ffffff;
}

.status-lamp {
  display: inline-block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  background: #a7aa9d;
  border: 1px solid #60645b;
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.is-running .status-lamp,
.status-playback.playing .status-lamp {
  background: #6bd986;
  border-color: #28763d;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.toolbar {
  display: flex;
  flex: 0 0 var(--toolbar-height);
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  padding: 4px 6px;
  overflow: hidden;
  background: linear-gradient(#f4f1e5, #dedacd);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #88857d;
  box-shadow: 0 -1px 0 #c2beb2 inset;
}

.toolbar-group {
  display: flex;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
}

.toolbar-options {
  margin-left: auto;
}

.toolbar-separator {
  flex: 0 0 2px;
  align-self: stretch;
  margin: 1px 2px;
  border-left: 1px solid #aaa69b;
  border-right: 1px solid #fff;
}

.tool-button,
.micro-button {
  position: relative;
  display: inline-flex;
  min-width: 58px;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 9px;
  color: #26313b;
  white-space: nowrap;
  background: linear-gradient(#faf9f3, #d9d5c9);
  border: 1px solid #8f8c83;
  border-radius: 2px;
  box-shadow:
    1px 1px 0 #fff inset,
    -1px -1px 0 #c2bdb2 inset;
}

.tool-button:hover,
.micro-button:hover {
  color: #081f35;
  background: linear-gradient(#fff, #e8e2d2);
  border-color: #58718a;
}

.tool-button:active,
.tool-button[aria-pressed="true"],
.micro-button:active {
  padding-top: 5px;
  padding-left: 10px;
  background: #d8d4c8;
  border-color: #68665f;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.32) inset;
}

.tool-button:focus-visible,
.micro-button:focus-visible {
  outline-offset: -4px;
}

.primary-tool {
  color: #fff;
  background: linear-gradient(#4c94ca, #1b5b99);
  border-color: #174b79;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5) inset, -1px -1px 0 #0d416e inset;
  text-shadow: 1px 1px 0 #16466f;
}

.primary-tool:hover {
  color: #fff;
  background: linear-gradient(#62ace0, #236aa6);
}

.configure-button {
  min-width: 91px;
}

.tool-button [class^="icon-"],
.tool-button [class*=" icon-"] {
  position: relative;
  display: inline-block;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
}

.icon-back::before {
  position: absolute;
  top: 5px;
  left: 1px;
  width: 10px;
  height: 7px;
  content: "";
  background: #2c668d;
}
.icon-back::after {
  position: absolute;
  top: 2px;
  left: -1px;
  content: "";
  border-top: 7px solid transparent;
  border-right: 8px solid #2c668d;
  border-bottom: 7px solid transparent;
}

.icon-reset {
  border: 3px solid #397398;
  border-left-color: transparent;
  border-radius: 50%;
}
.icon-reset::after {
  position: absolute;
  top: -4px;
  left: -4px;
  content: "";
  border-top: 4px solid transparent;
  border-right: 6px solid #397398;
  border-bottom: 4px solid transparent;
  transform: rotate(-20deg);
}

.icon-step,
.icon-play {
  width: 0 !important;
  height: 0 !important;
  margin: 0 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
}

.icon-step::after {
  position: absolute;
  top: -7px;
  left: 4px;
  width: 3px;
  height: 14px;
  content: "";
  background: currentColor;
}

.icon-step-back::before {
  position: absolute;
  top: 2px;
  left: 3px;
  content: "";
  border-top: 7px solid transparent;
  border-right: 10px solid #386d91;
  border-bottom: 7px solid transparent;
}
.icon-step-back::after {
  position: absolute;
  top: 2px;
  left: 1px;
  width: 3px;
  height: 14px;
  content: "";
  background: #386d91;
}

.icon-configure::before,
.icon-configure::after {
  position: absolute;
  content: "";
  border-radius: 50%;
}
.icon-configure::before {
  inset: 1px;
  background: repeating-conic-gradient(#406e8d 0 12deg, transparent 12deg 25deg);
}
.icon-configure::after {
  inset: 5px;
  background: var(--window);
  border: 2px solid #406e8d;
}

.toolbar-select {
  display: flex;
  min-width: 76px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 4px;
  color: #4c555e;
  font-size: 10px;
  text-transform: uppercase;
}

select,
input[type="number"],
input[type="text"] {
  min-height: 26px;
  padding: 3px 24px 3px 6px;
  color: #16202a;
  background: #fff;
  border: 1px solid #6d7478;
  border-radius: 0;
  box-shadow: 1px 1px 0 #fff, 1px 1px 2px rgba(0, 0, 0, 0.22) inset;
}

select:focus-visible,
input[type="number"]:focus-visible,
input[type="text"]:focus-visible {
  outline-offset: 1px;
}

.speed-control select {
  width: 69px;
  min-height: 23px;
  font-size: 11px;
}

.check-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.toolbar-check {
  min-width: 115px;
  padding: 0 7px;
  border: 1px solid transparent;
}

.toolbar-check:hover {
  background: rgba(255, 255, 255, 0.44);
  border-color: #b2aea4;
}

.check-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fake-checkbox {
  position: relative;
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1px solid #555d62;
  box-shadow: 1px 1px 0 #fff, 1px 1px 2px rgba(0, 0, 0, 0.3) inset;
}

.check-control input:checked + .fake-checkbox::after {
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  content: "";
  border-right: 2px solid #0a4e83;
  border-bottom: 2px solid #0a4e83;
  transform: rotate(43deg);
}

.check-control input:focus-visible + .fake-checkbox {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.workbench {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: var(--profiles-pane-width) var(--pane-splitter-size) minmax(440px, 1fr) var(--pane-splitter-size) var(--inspector-pane-width);
  grid-template-rows: minmax(340px, 1fr) var(--pane-splitter-size) var(--trace-pane-height);
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  overflow: hidden;
  background: #b6b2a7;
}

.pane-splitter {
  position: relative;
  z-index: 8;
  min-width: 0;
  min-height: 0;
  background: #b6b2a7;
  touch-action: none;
  user-select: none;
}

.pane-splitter::before,
.pane-splitter::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.pane-splitter-column {
  grid-row: 1;
  cursor: col-resize;
}

.pane-splitter-column::before {
  top: 0;
  bottom: 0;
  left: 2px;
  width: 1px;
  background: #f7f6ef;
  box-shadow: 1px 0 0 #77746d;
}

.pane-splitter-column::after {
  top: calc(50% - 12px);
  left: 2px;
  width: 2px;
  height: 24px;
  background: repeating-linear-gradient(to bottom, #55534e 0 1px, transparent 1px 3px);
}

#profiles-splitter {
  grid-column: 2;
}

#inspector-splitter {
  grid-column: 4;
}

.pane-splitter-row {
  grid-column: 1 / -1;
  grid-row: 2;
  cursor: row-resize;
}

.pane-splitter-row::before {
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: #f7f6ef;
  box-shadow: 0 1px 0 #77746d;
}

.pane-splitter-row::after {
  top: 2px;
  left: calc(50% - 12px);
  width: 24px;
  height: 2px;
  background: repeating-linear-gradient(to right, #55534e 0 1px, transparent 1px 3px);
}

.pane-splitter:hover::before,
.pane-splitter.is-active::before {
  background: #164f7d;
  box-shadow: none;
}

.pane-splitter:focus-visible {
  outline: 1px dotted #0a246a;
  outline-offset: -2px;
}

html.pane-resizing,
html.pane-resizing * {
  user-select: none !important;
}

html.pane-resizing-column,
html.pane-resizing-column * {
  cursor: col-resize !important;
}

html.pane-resizing-row,
html.pane-resizing-row * {
  cursor: row-resize !important;
}

.chrome-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--window);
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #74736d;
  border-bottom: 1px solid #74736d;
  box-shadow:
    1px 1px 0 #cbc7bb inset,
    -1px -1px 0 #aaa69b inset;
}

.panel-caption {
  display: flex;
  flex: 0 0 27px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 27px;
  padding: 3px 7px;
  color: #172b3e;
  background: linear-gradient(#f8f6ec, #d7d3c7);
  border-bottom: 1px solid #96938b;
  box-shadow: 0 1px 0 #fff inset;
}

.panel-caption h2,
.timeline-title h2 {
  margin: 0;
  overflow: hidden;
  font: 700 11px/1 var(--heading-font);
  letter-spacing: 0.055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.panel-caption-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
}

.profile-caption-icon {
  background: linear-gradient(#fff, #d8e7ef);
  border: 1px solid #47677f;
  box-shadow: 3px 3px 0 -1px #7c98aa;
}
.profile-caption-icon::before,
.profile-caption-icon::after {
  position: absolute;
  left: 2px;
  width: 8px;
  height: 1px;
  content: "";
  background: #3e637c;
}
.profile-caption-icon::before { top: 4px; }
.profile-caption-icon::after { top: 8px; }

.machine-caption-icon {
  border: 2px solid #396a89;
  border-radius: 2px;
}
.machine-caption-icon::before {
  position: absolute;
  inset: 3px;
  content: "";
  background: #69cde2;
  box-shadow: 0 0 0 1px #23607a;
}

.inspector-caption-icon::before,
.inspector-caption-icon::after {
  position: absolute;
  content: "";
}
.inspector-caption-icon::before {
  top: 1px;
  left: 1px;
  width: 8px;
  height: 8px;
  border: 2px solid #3f6b88;
  border-radius: 50%;
}
.inspector-caption-icon::after {
  right: 0;
  bottom: 1px;
  width: 7px;
  height: 3px;
  background: #3f6b88;
  transform: rotate(45deg);
}

.panel-caption-readout {
  margin-left: auto;
  padding: 2px 6px 1px;
  color: #2c6040;
  font: 9px/1 var(--mono-font);
  letter-spacing: 0.08em;
  background: #e4ead7;
  border: 1px solid #8e9d80;
  box-shadow: 1px 1px 1px #fff inset;
}

.profiles-panel {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
}

.profile-scroll {
  flex: 1 1 auto;
  min-height: 116px;
  padding: 5px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: #f5f3e9;
  border-bottom: 1px solid #aaa69b;
}

.profiles-panel > .panel-caption,
.profiles-panel > .lab-inputs {
  flex: 0 0 auto;
}

.profile-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-group-label {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  min-height: 20px;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  padding: 5px 3px 2px;
  color: #405565;
  background: #f5f3e9;
  font: 700 8px/1.2 var(--mono-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid #b9b5aa;
}

.profile-group-label small {
  color: #6a747b;
  font: 8px/1.2 var(--ui-font);
  letter-spacing: 0;
  text-transform: none;
}

.profile-item,
.profile-button,
.profile-list > button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 43px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  color: #27333e;
  text-align: left;
  background: linear-gradient(#fff, #e7e4da);
  border: 1px solid #b2afa4;
  border-radius: 1px;
  box-shadow: 1px 1px 0 #fff inset;
}

.profile-item:hover,
.profile-button:hover,
.profile-list > button:hover {
  background: linear-gradient(#fff, #e4edf4);
  border-color: #6f91ac;
}

.profile-item[aria-selected="true"],
.profile-item.active,
.profile-item.is-active,
.profile-button[aria-selected="true"],
.profile-button.active,
.profile-list > button[aria-selected="true"],
.profile-list > button.active {
  color: #fff;
  background: linear-gradient(#357fbb, #15528e);
  border-color: #0e3e70;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.42) inset;
  text-shadow: 1px 1px 0 #123b62;
}

.profile-number,
.profile-index {
  display: grid;
  width: 27px;
  height: 27px;
  color: #315b76;
  font: 700 10px/1 var(--mono-font);
  place-items: center;
  background: #e3edf1;
  border: 1px solid #7590a1;
  box-shadow: 1px 1px 0 #fff inset;
}

[aria-selected="true"] .profile-number,
.active .profile-number,
[aria-selected="true"] .profile-index,
.active .profile-index {
  color: #e7fbff;
  background: #113c65;
  border-color: #72b1dc;
  box-shadow: 1px 1px 2px #061d33 inset;
}

.profile-copy,
.profile-text {
  min-width: 0;
}

.profile-copy strong,
.profile-name,
.profile-text strong {
  display: block;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-copy small,
.profile-subtitle,
.profile-text small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #65717a;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[aria-selected="true"] .profile-copy small,
.active .profile-copy small,
[aria-selected="true"] .profile-subtitle,
.active .profile-subtitle,
[aria-selected="true"] .profile-text small,
.active .profile-text small {
  color: #d5eafa;
}

.profile-difficulty,
.profile-badge {
  align-self: start;
  padding: 2px 3px;
  color: #55616a;
  font: 8px/1 var(--mono-font);
  text-transform: uppercase;
  background: #dddacf;
  border: 1px solid #aaa69b;
}

.profile-state {
  width: 7px;
  height: 7px;
  background: #a4aaa7;
  border: 1px solid #656c6a;
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.profile-item.is-tutorial .profile-state {
  background: #5ea871;
  border-color: #356b44;
}

.profile-item.is-research .profile-state {
  background: #bd8a43;
  border-color: #76511d;
}

.profile-item[aria-selected="true"] .profile-state,
.profile-item.is-selected .profile-state {
  background: #8df0ff;
  border-color: #39788a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) inset;
}

[aria-selected="true"] .profile-difficulty,
.active .profile-difficulty,
[aria-selected="true"] .profile-badge,
.active .profile-badge {
  color: #0d3458;
  background: #cce8fa;
  border-color: #7fbcdf;
  text-shadow: none;
}

.lab-inputs {
  padding: 8px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #aca89d;
}

.lab-inputs h3,
.meter-title-row h3,
.config-section h3,
.dialog-content h3 {
  margin: 0;
  color: #31495b;
  font: 700 10px/1 var(--heading-font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lab-inputs h3 {
  margin-bottom: 7px;
}

.switch-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px;
  background: #e2dfd4;
  border: 1px solid #b6b2a7;
  box-shadow: 1px 1px 0 #fff inset;
}

.switch-row strong,
.switch-row small {
  display: block;
}

.switch-row strong {
  font-size: 11px;
}

.switch-row small {
  margin-top: 2px;
  color: #626b72;
  font-size: 9px;
}

.toggle-switch {
  position: relative;
  display: block;
  flex: 0 0 38px;
  width: 38px;
  height: 20px;
}

.toggle-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-switch > span {
  position: absolute;
  inset: 0;
  background: #aaa99f;
  border: 1px solid #5f6363;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.36) inset;
}

.toggle-switch > span::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  content: "";
  background: linear-gradient(#fff, #d9d5c9);
  border: 1px solid #6b6b65;
  box-shadow: 1px 1px 0 #fff inset;
  transition: transform 130ms ease;
}

.toggle-switch input:checked + span {
  background: #b64d49;
  border-color: #74312f;
}

.toggle-switch input:checked + span::after {
  transform: translateX(18px);
}

.toggle-switch input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.field-label {
  display: block;
  margin-top: 7px;
}

.field-label > span {
  display: block;
  margin: 0 0 3px 1px;
  color: #4c565e;
  font-size: 10px;
}

.field-label select {
  width: 100%;
  font-size: 10px;
}

.machine-panel {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  background: #b8b5aa;
}

.breadcrumbs {
  display: flex;
  flex: 0 0 29px;
  align-items: center;
  gap: 0;
  min-width: 0;
  padding: 3px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #e3dfd3;
  border-bottom: 1px solid #88857e;
  white-space: nowrap;
}

.breadcrumbs button {
  position: relative;
  flex: 0 0 auto;
  height: 21px;
  padding: 1px 9px;
  color: #2f4d63;
  background: #f4f2e9;
  border: 1px solid #a5a197;
  box-shadow: 1px 1px 0 #fff inset;
}

.breadcrumbs button + button {
  margin-left: 12px;
}

.breadcrumbs > span {
  flex: 0 0 auto;
  margin: 0 6px;
  color: #777e83;
  font: 10px/1 var(--mono-font);
}

.breadcrumbs button[aria-current="page"] {
  color: #fff;
  background: #486f8d;
  border-color: #2b506c;
  text-shadow: 1px 1px #1f425b;
}

.scene-frame {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  margin: 5px 5px 0 5px;
  padding: 13px 4px 4px 13px;
  overflow: hidden;
  background: #717a7d;
  border-top: 2px solid #5d6263;
  border-left: 2px solid #5d6263;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.33) inset;
}

.scene-ruler {
  position: absolute;
  z-index: 3;
  opacity: 0.75;
  pointer-events: none;
}

.scene-ruler-top {
  top: 2px;
  right: 4px;
  left: 13px;
  height: 8px;
  background: repeating-linear-gradient(90deg, transparent 0 11px, #d8ddd9 11px 12px, transparent 12px 59px, #fff 59px 60px);
}

.scene-ruler-left {
  top: 13px;
  bottom: 4px;
  left: 2px;
  width: 8px;
  background: repeating-linear-gradient(180deg, transparent 0 11px, #d8ddd9 11px 12px, transparent 12px 59px, #fff 59px 60px);
}

.vm-scene {
  position: absolute;
  top: 13px;
  right: 4px;
  bottom: 4px;
  left: 13px;
  width: auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  color: #d8eaf1;
  background: #091923;
  border: 1px solid #020b11;
  box-shadow:
    1px 1px 0 #02080c inset,
    -1px -1px 0 #294450 inset;
}

.vm-scene:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -3px;
}

.vm-svg,
.node-layer,
.scene-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vm-svg {
  z-index: 0;
  overflow: visible;
}

.scene-grid-fill {
  opacity: 0.34;
}

.edge-layer {
  pointer-events: none;
}

.edge,
.vm-edge,
.connection {
  fill: none;
  stroke: var(--stage-edge);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  transition: stroke 80ms linear, opacity 80ms linear;
}

.edge.hit-area,
.vm-edge-hit {
  fill: none;
  pointer-events: stroke;
  stroke: transparent;
  stroke-width: 14;
}

.edge.is-active,
.edge.active,
.vm-edge.is-active,
.vm-edge.active,
.connection.is-active,
.connection.active {
  stroke: #75bdc8;
  stroke-width: 2;
  filter: none;
  marker-end: url(#edge-arrow);
}

.edge.is-candidate,
.edge.candidate,
.vm-edge.is-candidate,
.vm-edge.candidate,
.connection.candidate {
  stroke: #867a9b;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.edge.is-write,
.edge.write,
.edge-state,
.vm-edge.is-write,
.vm-edge.write {
  stroke: #c8943d;
  stroke-width: 2;
  marker-end: url(#edge-arrow);
}

.edge.is-unknown,
.edge.unknown,
.vm-edge.is-unknown,
.vm-edge.unknown {
  stroke: var(--unknown);
  stroke-dasharray: 3 5;
  opacity: 0.7;
}

.edge-candidate {
  stroke: #867a9b;
  stroke-dasharray: 4 3;
}

.edge-label {
  fill: #88a5b1;
  font: 8px/1 var(--mono-font);
  letter-spacing: 0.03em;
  paint-order: stroke;
  pointer-events: none;
  stroke: var(--stage);
  stroke-width: 3px;
  stroke-linejoin: round;
  text-anchor: middle;
}

.edge.is-dimmed,
.vm-edge.is-dimmed,
.connection.is-dimmed {
  opacity: 0.18;
}

.node-layer {
  z-index: 2;
  pointer-events: none;
}

.scene-overlay {
  z-index: 4;
  pointer-events: none;
}

.vm-node,
.diagram-node,
.machine-node {
  position: absolute;
  display: flex;
  min-width: 72px;
  min-height: 48px;
  contain: size layout;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 6px 8px;
  color: #d6e8ef;
  text-align: left;
  pointer-events: auto;
  background: #152c38;
  border: 1px solid #617984;
  border-radius: 0;
  box-shadow:
    1px 1px 0 #31505d inset,
    -1px -1px 0 #050d12 inset,
    1px 1px 0 #02070a;
  transition: background-color 80ms linear, border-color 80ms linear, opacity 80ms linear;
}

button.vm-node,
button.diagram-node,
button.machine-node {
  font: inherit;
}

.vm-node:hover,
.diagram-node:hover,
.machine-node:hover {
  border-color: #8198a2;
  background: #193642;
  transform: none;
}

.vm-node:focus-visible,
.diagram-node:focus-visible,
.machine-node:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.vm-node.is-active,
.vm-node.active,
.diagram-node.is-active,
.diagram-node.active,
.machine-node.is-active,
.machine-node.active {
  color: #effcff;
  background: #1b3a46;
  border-color: #78b5c1;
  box-shadow:
    1px 1px 0 #3a5d69 inset,
    -1px -1px 0 #061117 inset,
    1px 1px 0 #02070a;
}

.vm-node.is-selected,
.vm-node.selected,
.diagram-node.is-selected,
.diagram-node.selected,
.machine-node.is-selected,
.machine-node.selected {
  border-color: #d3a64d;
  outline: 1px dotted #f1c66d;
  outline-offset: 1px;
  box-shadow:
    1px 1px 0 #31505d inset,
    -1px -1px 0 #050d12 inset;
}

.vm-node.is-candidate,
.vm-node.candidate,
.diagram-node.is-candidate,
.diagram-node.candidate {
  border-color: #867a9b;
  border-style: dashed;
  box-shadow: none;
}

.vm-node.is-dimmed,
.diagram-node.is-dimmed,
.machine-node.is-dimmed {
  opacity: 0.3;
  filter: saturate(0.55);
}

.vm-node .node-kicker,
.diagram-node .node-kicker,
.machine-node .node-kicker {
  display: block;
  margin-bottom: 3px;
  color: #8ba8b8;
  font: 8px/1 var(--mono-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vm-node .node-title,
.diagram-node .node-title,
.machine-node .node-title,
.vm-node > strong,
.diagram-node > strong,
.machine-node > strong {
  display: block;
  overflow: hidden;
  font: 700 11px/1.15 var(--heading-font);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vm-node .node-value,
.diagram-node .node-value,
.machine-node .node-value,
.vm-node > small,
.diagram-node > small,
.machine-node > small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #a9cbd3;
  font: 10px/1.2 var(--mono-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vm-node .node-led,
.diagram-node .node-led {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  background: #47606b;
  border: 1px solid #142833;
  border-radius: 50%;
}

.vm-node.is-active .node-led,
.vm-node.active .node-led,
.diagram-node.is-active .node-led,
.diagram-node.active .node-led {
  background: #79c5d1;
  box-shadow: none;
}

.vm-node[data-kind="bytecode"],
.vm-node.bytecode-node,
.diagram-node.bytecode-node,
.vm-node.node-stream {
  min-width: 90px;
  background: #1b333d;
  border-color: #8397a1;
}

.vm-node[data-kind="decoder"],
.vm-node.decoder-node,
.diagram-node.decoder-node,
.vm-node.node-decoder {
  border-color: #568ba5;
}

.vm-node[data-kind="dispatcher"],
.vm-node.dispatcher-node,
.diagram-node.dispatcher-node,
.vm-node.node-dispatcher,
.vm-node.node-selector {
  min-width: 82px;
  background: #1b3541;
  border-color: #6b9aae;
}

.vm-node[data-kind="handler"],
.vm-node.handler-node,
.diagram-node.handler-node,
.vm-node.node-handler,
.vm-node.node-handler-bank {
  min-width: 78px;
  min-height: 58px;
  padding-top: 13px;
  border-color: #5e7e8e;
}

.vm-node[data-kind="handler"]::before,
.vm-node.handler-node::before,
.diagram-node.handler-node::before,
.vm-node.node-handler::before,
.vm-node.node-handler-bank::before {
  position: absolute;
  top: 4px;
  right: 7px;
  left: 7px;
  height: 3px;
  content: "";
  background: repeating-linear-gradient(90deg, #688b9b 0 4px, transparent 4px 7px);
}

.vm-node[data-kind="state"],
.vm-node.state-node,
.diagram-node.state-node,
.vm-node.node-state,
.vm-node.node-register {
  background: #393429;
  border-color: #91805b;
}

.vm-node[data-kind="state"] .node-value,
.vm-node.state-node .node-value,
.diagram-node.state-node .node-value,
.vm-node.node-state > small,
.vm-node.node-register > small {
  color: #dcc28c;
}

.vm-node[data-kind="sealed"],
.vm-node.sealed-node,
.diagram-node.sealed-node {
  color: #b7c0c4;
  background: repeating-linear-gradient(135deg, #263039 0 5px, #1e282f 5px 10px);
  border-color: #717c81;
  border-style: dashed;
}

.vm-node[data-kind="native"],
.vm-node.native-node,
.diagram-node.native-node,
.vm-node.node-native,
.vm-node.node-exit {
  border-color: #4eae79;
  background: #203d30;
}

.vm-node.observed,
.diagram-node.observed,
.evidence-observed {
  border-style: solid;
}

.vm-node.modeled,
.diagram-node.modeled,
.vm-node.evidence-modeled,
.evidence-modeled {
  border-color: #78858b;
  border-style: dotted;
  box-shadow: none;
}

.vm-node.inferred,
.diagram-node.inferred,
.vm-node.evidence-derived,
.evidence-inferred {
  border-color: #a18a58;
  background: #233138;
}

.vm-node.unknown,
.diagram-node.unknown,
.vm-node.evidence-unknown,
.evidence-unknown {
  color: #aeb7ba;
  border-color: var(--unknown);
  border-style: dashed;
}

.vm-node.node-candidate {
  color: #d4d0df;
  background: #302d3a;
  border-color: #867a9b;
}

.vm-node.node-cluster {
  background: #29343a;
  border-color: #81939a;
  border-style: dashed;
}

.vm-node.node-branch {
  color: #fff4d5;
  background: #483b26;
  border-color: #d5a852;
}

.vm-node.node-segment {
  background: #233b46;
  border-color: #6f9aae;
}

.byte-strip,
.bytecode-strip {
  display: flex;
  gap: 2px;
  margin-top: 5px;
  font: 9px/1 var(--mono-font);
}

.byte-cell,
.bytecode-byte {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 2px;
  color: #b9d0da;
  place-items: center;
  background: #081720;
  border: 1px solid #405d6b;
}

.byte-cell.active,
.byte-cell.is-active,
.bytecode-byte.active,
.bytecode-byte.is-active {
  color: #07151e;
  background: var(--active);
  border-color: #e5fbff;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.instruction-packet,
.data-packet {
  position: absolute;
  z-index: 6;
  display: grid;
  min-width: 35px;
  min-height: 25px;
  padding: 3px 5px;
  color: #06202d;
  font: 700 10px/1 var(--mono-font);
  place-items: center;
  pointer-events: none;
  background: var(--active);
  border: 1px solid #e6fbff;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8) inset, 1px 2px 0 rgba(0, 0, 0, 0.45);
  transition: transform 500ms cubic-bezier(0.32, 0.72, 0.25, 1), opacity 160ms ease;
}

.instruction-packet.write,
.data-packet.write {
  background: var(--write);
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.65) inset, 1px 2px 0 rgba(0, 0, 0, 0.45);
}

.field-warning {
  position: absolute;
  z-index: 10;
  right: auto;
  bottom: 12px;
  left: 12px;
  display: flex;
  max-width: 230px;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  color: #cbd5d8;
  background: rgba(28, 39, 44, 0.94);
  border: 1px solid #66777d;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.12) inset, 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.field-warning strong {
  flex: 0 0 auto;
  color: #d4dde0;
  font: 700 8px/1.2 var(--mono-font);
  letter-spacing: 0.04em;
}

.field-warning span {
  min-width: 0;
  color: #b9c4c7;
  font-size: 8px;
}

.scene-action {
  position: absolute;
  z-index: 11;
  right: 14px;
  bottom: 14px;
  min-height: 34px;
  padding: 5px 10px;
  color: #38280c;
  pointer-events: auto;
  background: linear-gradient(#fff4b9, #dfa840);
  border: 1px solid #7e5d1a;
  box-shadow: 1px 1px 0 #fff8d6 inset, 0 4px 10px rgba(0, 0, 0, 0.45);
  font-weight: 700;
}

.scene-action:hover {
  background: linear-gradient(#fff9d0, #edba51);
}

.scene-result {
  position: absolute;
  z-index: 10;
  right: 14px;
  bottom: 14px;
  max-width: min(390px, calc(100% - 28px));
  padding: 7px 9px;
  color: #d9f6e5;
  background: rgba(20, 64, 44, 0.94);
  border: 1px solid var(--good);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.44);
  font-size: 9px;
}

.custom-rig-hint {
  position: absolute;
  z-index: 11;
  right: 12px;
  bottom: 12px;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 7px;
  align-items: center;
  max-width: min(480px, calc(100% - 24px));
  padding: 6px;
  color: #d9e3e6;
  pointer-events: auto;
  background: #243941;
  border: 1px solid #71878e;
  box-shadow: 1px 1px 0 #40555c inset, 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.custom-rig-hint strong {
  padding: 4px 5px;
  color: #eef6f7;
  background: #385461;
  border: 1px solid #7894a0;
  font: 700 8px/1 var(--mono-font);
}

.custom-rig-hint span {
  font-size: 8px;
}

.custom-rig-hint button {
  min-height: 28px;
  padding: 4px 8px;
  color: #173d56;
  background: #e8e6dc;
  border: 1px solid #909087;
  box-shadow: 1px 1px 0 #fff inset;
  font-weight: 700;
}

.vm-scene[data-profile="intro"][data-tutorial-layout="true"] .vm-svg,
.vm-scene[data-profile="intro"][data-tutorial-layout="true"] .node-layer {
  bottom: 126px;
  height: auto;
}

.vm-scene.is-compact-map .vm-node {
  min-width: 0;
  min-height: 0;
  padding: 3px 5px;
}

.vm-scene.is-compact-map .vm-node.node-handler,
.vm-scene.is-compact-map .vm-node.node-handler-bank {
  min-height: 0;
  padding: 7px 5px 2px;
}

.vm-scene.is-compact-map .vm-node > strong {
  font-size: 9px;
}

.vm-scene.is-compact-map .vm-node > small {
  margin-top: 2px;
  font-size: 8px;
}

.vm-node.is-tutorial-dimmed {
  opacity: 0.28;
}

.vm-node.is-tutorial-focus {
  color: #fff8dc;
  background: #30434a;
  border-color: #e2b95e;
  outline: 1px solid #806522;
  outline-offset: 2px;
}

.vm-edge.is-tutorial-dimmed {
  opacity: 0.12;
}

.vm-edge.is-tutorial-focus {
  stroke: #e2b95e;
  stroke-width: 2;
  opacity: 1;
}

.vm-node.is-guide-dimmed {
  opacity: 0.34;
}

.vm-node.is-guide-focus {
  color: #f4fbff;
  background: #294855;
  border-color: #8bb7c8;
  outline: 1px solid #294f62;
  outline-offset: 2px;
}

.vm-edge.is-guide-dimmed {
  opacity: 0.14;
}

.vm-edge.is-guide-focus {
  stroke: #84c1d2;
  stroke-width: 2;
  opacity: 1;
}

.lesson-dock {
  position: absolute;
  z-index: 14;
  right: 8px;
  bottom: 8px;
  left: 8px;
  min-height: 108px;
  color: #1f313d;
  pointer-events: auto;
  background: #ece9d8;
  border: 1px solid #0b3f77;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #9a978e inset;
}

.lesson-progress {
  display: flex;
  min-height: 23px;
  align-items: center;
  gap: 9px;
  padding: 3px 5px 3px 7px;
  color: #fff;
  background: #245b98;
  border-bottom: 1px solid #082e5b;
}

.lesson-progress span {
  font: 700 10px/1 var(--heading-font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lesson-progress strong {
  margin-left: auto;
  font: 9px/1 var(--mono-font);
}

.lesson-progress button {
  display: grid;
  width: 17px;
  height: 17px;
  padding: 0;
  color: #25313a;
  place-items: center;
  background: #d4d0c8;
  border: 1px solid #fff;
  box-shadow: -1px -1px 0 #77736c inset;
  font: 700 10px/1 var(--ui-font);
}

.lesson-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.72fr);
  gap: 12px;
  align-items: center;
  min-height: 53px;
  padding: 7px 9px 4px;
}

.lesson-body h3 {
  margin: 0 0 3px;
  color: #123e62;
  font: 700 13px/1.15 var(--heading-font);
}

.lesson-body p {
  margin: 0;
  color: #35444d;
  font-size: 10px;
  line-height: 1.35;
}

.lesson-body code {
  display: block;
  padding: 6px 8px;
  color: #123d56;
  background: #f8f7ef;
  border-top: 1px solid #77746e;
  border-left: 1px solid #77746e;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font: 9px/1.35 var(--mono-font);
}

.lesson-footer {
  display: flex;
  min-height: 31px;
  align-items: center;
  gap: 8px;
  padding: 3px 7px 6px;
}

.lesson-dots {
  display: flex;
  gap: 3px;
}

.lesson-dots button {
  display: grid;
  width: 20px;
  height: 19px;
  padding: 0;
  color: #46606f;
  place-items: center;
  background: #d8d5ca;
  border: 1px solid #9b988f;
  font: 8px/1 var(--mono-font);
}

.lesson-dots button[aria-selected="true"] {
  color: #fff;
  background: #245b98;
  border-color: #0b3f77;
}

.lesson-actions {
  display: flex;
  gap: 5px;
  margin-left: auto;
}

.lesson-actions button,
.tutorial-reopen {
  min-height: 23px;
  padding: 3px 8px;
  color: #283640;
  background: linear-gradient(#fff, #dedbd1);
  border: 1px solid #8e8b83;
  box-shadow: 1px 1px 0 #fff inset;
  font-size: 9px;
}

.lesson-actions .lesson-primary {
  min-width: 62px;
  color: #fff;
  background: #245b98;
  border-color: #0b3f77;
  text-shadow: 1px 1px 0 #12375f;
}

.lesson-actions button:disabled {
  color: #8c8a84;
  background: #d4d0c8;
}

.tutorial-reopen {
  position: absolute;
  z-index: 12;
  right: 10px;
  bottom: 10px;
  pointer-events: auto;
}

.self-test-report {
  position: absolute;
  z-index: 12;
  right: 14px;
  bottom: 14px;
  max-width: min(330px, calc(100% - 28px));
  padding: 8px 10px;
  color: #d9f4e3;
  background: rgba(18, 55, 40, 0.96);
  border: 1px solid var(--good);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  font: 8px/1.35 var(--mono-font);
}

.self-test-report.tests-fail {
  color: #ffe2df;
  background: rgba(80, 30, 27, 0.96);
  border-color: var(--danger);
}

.self-test-report strong {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
}

.self-test-report ul {
  margin: 0;
  padding-left: 16px;
}

.scene-corners i {
  position: absolute;
  z-index: 5;
  width: 8px;
  height: 8px;
  pointer-events: none;
  border-color: #dfe5e2;
}
.scene-corners i:nth-child(1) { top: 13px; left: 13px; border-top: 1px solid; border-left: 1px solid; }
.scene-corners i:nth-child(2) { top: 13px; right: 4px; border-top: 1px solid; border-right: 1px solid; }
.scene-corners i:nth-child(3) { right: 4px; bottom: 4px; border-right: 1px solid; border-bottom: 1px solid; }
.scene-corners i:nth-child(4) { bottom: 4px; left: 13px; border-bottom: 1px solid; border-left: 1px solid; }

.scene-legend {
  display: flex;
  flex: 0 0 29px;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  overflow-x: auto;
  color: #3f4a52;
  font-size: 9px;
  white-space: nowrap;
}

.scene-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-line {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top: 2px solid;
}
.legend-active { color: var(--active-deep); }
.legend-candidate { color: #786d8b; border-top-style: dashed; }

.legend-box {
  display: inline-block;
  width: 11px;
  height: 9px;
  background: #e1ded4;
  border: 1px solid #63717a;
}
.legend-modeled { border-color: #78858b; border-style: dotted; }
.legend-unknown { border-style: dashed; border-color: #6f797e; }

.inspector-panel {
  display: flex;
  grid-column: 5;
  grid-row: 1;
  flex-direction: column;
}

.inspector-tabs {
  display: flex;
  flex: 0 0 29px;
  align-items: flex-end;
  gap: 2px;
  padding: 4px 5px 0;
  background: #d7d3c7;
  border-bottom: 1px solid #7f7d76;
}

.inspector-tabs button {
  position: relative;
  min-width: 55px;
  height: 25px;
  padding: 2px 9px 3px;
  color: #4b545b;
  background: #c8c4b9;
  border: 1px solid #8e8b82;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.inspector-tabs button[aria-selected="true"],
.inspector-tabs button.active {
  z-index: 1;
  height: 27px;
  margin-bottom: -1px;
  color: #172734;
  font-weight: 700;
  background: var(--window);
  border-color: #74736d;
  border-bottom: 1px solid var(--window);
}

.inspector-content {
  flex: 1 1 0;
  min-height: 0;
  padding: 9px;
  overflow: auto;
  scrollbar-gutter: stable;
  background: var(--window);
}

.inspector-empty {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  color: #65717a;
  text-align: center;
}

.inspector-empty-icon {
  position: relative;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  background: #d8e1e3;
  border: 1px solid #788b94;
  border-radius: 50%;
  box-shadow: 2px 2px 0 #fff inset;
}

.inspector-card,
.info-card,
.state-card,
.inspector-section {
  margin-bottom: 7px;
  padding: 7px;
  background: #f7f5ec;
  border: 1px solid #b3afa4;
  box-shadow: 1px 1px 0 #fff inset;
}

.inspector-kicker,
.info-kicker {
  margin-bottom: 4px;
  color: #5b6871;
  font: 9px/1 var(--mono-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inspector-content h3,
.info-card h3,
.inspector-section h3 {
  margin: 0 0 5px;
  color: #173b58;
  font: 700 13px/1.2 var(--heading-font);
}

.inspector-content p,
.info-card p,
.inspector-section p {
  margin: 0 0 7px;
  line-height: 1.55;
}

.inspector-content p:last-child,
.info-card p:last-child,
.inspector-section p:last-child {
  margin-bottom: 0;
}

.property-list,
.state-list,
.inspector-content dl,
.fact-list,
.method-terms {
  margin: 0;
}

.property-row,
.state-row,
.inspector-content dl > div,
.fact-list > div,
.method-terms > div {
  display: grid;
  grid-template-columns: minmax(76px, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  align-items: baseline;
  min-height: 25px;
  padding: 4px 3px;
  border-bottom: 1px dotted #b7b3a8;
}

.property-row:last-child,
.state-row:last-child,
.inspector-content dl > div:last-child,
.fact-list > div:last-child,
.method-terms > div:last-child {
  border-bottom: 0;
}

.property-row dt,
.state-row dt,
.inspector-content dt,
.fact-list dt,
.method-terms dt {
  color: #5e6870;
}

.property-row dd,
.state-row dd,
.inspector-content dd,
.fact-list dd,
.method-terms dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #193d58;
  font-family: var(--mono-font);
  text-align: right;
}

.inspector-section > code,
.equation-block {
  display: block;
  margin: 5px 0 7px;
  padding: 7px;
  overflow-x: auto;
  color: #a9edfa;
  background: #10242e;
  border: 1px solid #071116;
  box-shadow: 1px 1px 0 #35515f inset;
  font: 9px/1.5 var(--mono-font);
  white-space: pre-wrap;
}

.state-table {
  width: 100%;
  border-collapse: collapse;
  background: #edf0e9;
  border: 1px solid #a7aaa1;
}

.state-table th,
.state-table td {
  padding: 4px 6px;
  border-bottom: 1px dotted #b7bbb1;
}

.state-table th {
  width: 37%;
  color: #56626a;
  font: 9px/1.3 var(--mono-font);
  text-align: left;
}

.state-table td {
  color: #155274;
  font: 9px/1.3 var(--mono-font);
  text-align: right;
}

.frame-preview {
  display: block;
  margin-top: 6px;
  padding: 7px;
  overflow-x: auto;
  color: #a9d9e6;
  background: #10232c;
  border: 1px solid #071117;
  box-shadow: 1px 1px 0 #35505b inset;
  font: 9px/1.55 var(--mono-font);
  white-space: pre;
}

.inspector-note {
  padding: 7px;
  color: #59646b;
  background: #f5efd0;
  border: 1px solid #b9aa6d;
  font-size: 9px;
}

.current-op {
  background: #f1f2ea;
  border: 1px solid #718993;
  box-shadow:
    1px 1px 0 #fff inset,
    -1px -1px 0 #b8b5aa inset;
}

.idle-op {
  background: #f7f5ec;
  border: 1px solid #9f9b91;
  box-shadow:
    1px 1px 0 #fff inset,
    -1px -1px 0 #cbc7bc inset;
}

.current-op h3,
.idle-op h3 {
  margin: -7px -7px 7px;
  padding: 5px 7px;
  background: #d9dedc;
  border-bottom: 1px solid #8c9ba0;
}

.inspector-action {
  width: 100%;
  min-height: 32px;
  margin: 0 0 7px;
  padding: 5px 8px;
  color: #173d57;
  background: linear-gradient(#fff, #dce5e8);
  border: 1px solid #6b8798;
  box-shadow: 1px 1px 0 #fff inset;
  font-weight: 700;
}

.inspector-action:hover {
  background: linear-gradient(#fff, #e8f3f6);
  border-color: #3f7898;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 7px 0 10px;
}

.evidence-grid > span {
  min-width: 0;
  padding: 6px;
  color: #5a543d;
  background: #fff9df;
  border: 1px solid #c5b77f;
  font-size: 8px;
  overflow-wrap: anywhere;
}

.evidence-grid b {
  display: block;
  margin-bottom: 2px;
  color: #6b5218;
  font: 700 11px/1 var(--mono-font);
}

.eac-walkthrough {
  padding: 8px;
  background: #edf2f1;
  border-color: #7f969d;
}

.eac-walkthrough-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  margin-bottom: 7px;
}

.eac-walkthrough-heading > strong {
  padding: 4px 6px;
  color: #315369;
  background: #dce6e7;
  border: 1px solid #8da1a6;
  font: 700 9px/1 var(--mono-font);
}

.eac-flow-tabs {
  display: grid;
  gap: 3px;
  margin-bottom: 7px;
}

.eac-flow-tabs button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 35px;
  padding: 4px 6px;
  color: #3c4a52;
  text-align: left;
  background: #e1e2dc;
  border: 1px solid #9b9a93;
  box-shadow: 1px 1px 0 #fff inset;
}

.eac-flow-tabs button > span:first-child {
  display: grid;
  width: 20px;
  height: 20px;
  color: #fff;
  place-items: center;
  background: #627884;
  border: 1px solid #344e5d;
  font: 700 9px/1 var(--mono-font);
}

.eac-flow-tabs button strong,
.eac-flow-tabs button small {
  display: block;
}

.eac-flow-tabs button strong {
  font-size: 9px;
}

.eac-flow-tabs button small {
  margin-top: 2px;
  color: #687279;
  font: 8px/1.2 var(--mono-font);
}

.eac-flow-tabs button[aria-selected="true"] {
  color: #173d56;
  background: #f8f8f1;
  border-color: #356982;
  outline: 1px solid #8caabd;
  outline-offset: -3px;
}

.eac-flow-tabs button[aria-selected="true"] > span:first-child {
  background: #265c77;
}

.eac-flow-detail {
  padding: 7px;
  background: #f8f7ef;
  border: 1px solid #a4a299;
  box-shadow: 1px 1px 0 #fff inset;
}

.eac-flow-detail > strong {
  display: block;
  color: #315c70;
  font: 700 9px/1.3 var(--mono-font);
}

.eac-flow-term {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: #687278;
  font-size: 8px;
  text-transform: uppercase;
}

.eac-flow-term code {
  color: #174b69;
  font: 700 9px/1 var(--mono-font);
  text-transform: none;
}

.eac-rule-action {
  margin: 7px 0 0;
}

.eac-replay-note {
  margin-top: 7px !important;
  padding: 6px;
  color: #5b5a4d;
  background: #f4efd7;
  border: 1px solid #b7aa73;
  font-size: 8px;
}

.eac-scope {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid #c4b985;
}

.eac-scope summary {
  color: #66571e;
  cursor: pointer;
  font-weight: 700;
}

.eac-scope p {
  margin-top: 7px;
}

.compact-list {
  margin: 6px 0 0;
  padding-left: 18px;
}

.compact-list li {
  margin: 3px 0;
  font-size: 9px;
}

.evidence-tag,
.tag,
.collapse-badge,
.term-badge {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  margin: 2px 2px 2px 0;
  padding: 2px 5px;
  color: #38464f;
  font: 8px/1.2 var(--mono-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #dedbd0;
  border: 1px solid #a7a399;
}

.collapse-badge {
  color: #604822;
  background: #f2dda9;
  border-color: #b58b45;
}

.evidence-tag.observed { color: #1f5137; background: #d8ebd9; border-color: #6a9b77; }
.evidence-tag.inferred { color: #614917; background: #f3e3b1; border-color: #b0924c; }
.evidence-tag.modeled { color: #4c3478; background: #e8dcf5; border-color: #9670be; }
.evidence-tag.unknown { color: #545f64; background: #e3e5e3; border-style: dashed; }

.meter-rack {
  flex: 0 0 auto;
  padding: 8px;
  background: linear-gradient(#dedbd1, #cac6bb);
  border-top: 1px solid #97948c;
  border-bottom: 1px solid #8f8c84;
  box-shadow: 0 1px 0 #fff inset;
}

.meter-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.micro-button {
  min-width: 49px;
  min-height: 22px;
  padding: 2px 6px;
  font-size: 9px;
}

.meter {
  margin-top: 6px;
}

.meter-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
  color: #3f4950;
  font-size: 9px;
  text-transform: uppercase;
}

.meter-label output {
  flex: 0 0 auto;
  color: #243747;
  font: 9px/1 var(--mono-font);
}

.meter-track {
  position: relative;
  height: 14px;
  overflow: hidden;
  background: #697275;
  border-top: 1px solid #474f51;
  border-left: 1px solid #474f51;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.34) inset;
}

.meter-fill {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: var(--meter-value, 0%);
  min-width: 0;
  background: linear-gradient(#74e5fa, #1b8eb0);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  transition: width 250ms ease;
}

.meter-visible .meter-fill {
  background: linear-gradient(#d8c5ff, #7b5ec2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.meter-defender .meter-fill {
  background: linear-gradient(#ffd58e, #cb8127);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.meter.is-na .meter-label output {
  color: #755b23;
  font-weight: 700;
}

.meter.is-na .meter-track {
  background: repeating-linear-gradient(135deg, #697174 0 6px, #596164 6px 12px);
}

.meter.is-na .meter-track::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "PARTIAL EVIDENCE";
  color: #eef0e9;
  font: 7px/13px var(--mono-font);
  letter-spacing: 0.11em;
  text-align: center;
  text-shadow: 1px 1px 0 #303638;
}

.meter.is-na .meter-fill {
  display: none;
}

.meter-segments {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(5, 17, 23, 0.32) 8px 9px);
  pointer-events: none;
}

.meter-disclaimer {
  margin: 7px 0 0;
  color: #626a70;
  font-size: 9px;
  line-height: 1.35;
}

.equation-panel {
  flex: 0 0 var(--equation-pane-height);
  height: var(--equation-pane-height);
  min-height: 0;
  max-height: none;
  padding: 9px 10px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  color: #31434c;
  background: #d7d3c7;
  border-top: 1px solid #85827a;
  box-shadow:
    1px 1px 0 #fff inset,
    -1px -1px 0 #aaa69b inset;
}

.equation-kicker {
  margin-bottom: 6px;
  color: #4f5e66;
  font: 9px/1.2 var(--mono-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.equation-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.equation-header .equation-kicker {
  min-width: 0;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equation-lab-shortcut {
  display: inline-grid;
  min-width: 0;
  min-height: 25px;
  flex: 0 0 auto;
  grid-template-columns: 18px auto;
  gap: 5px;
  align-items: center;
  padding: 2px 7px 2px 3px;
  color: #23465b;
  background: #e8e7df;
  border: 1px solid #718892;
  box-shadow: 1px 1px 0 #fff inset;
  font: 700 9px/1 var(--ui-font);
  white-space: nowrap;
}

.equation-lab-shortcut:hover {
  color: #fff;
  background: #315d77;
  border-color: #17394e;
  box-shadow: 1px 1px 0 #63849a inset;
}

.equation-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: -1px;
}

.equation-tabs button {
  position: relative;
  z-index: 1;
  min-height: 25px;
  padding: 3px 10px;
  color: #4c575f;
  background: #c9c5ba;
  border: 1px solid #8c8981;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7) inset;
  font-size: 9px;
}

.equation-tabs button[aria-selected="true"] {
  z-index: 3;
  color: #173d56;
  background: #f1f0e9;
  border-color: #77746e;
  font-weight: 700;
}

.complexity-panel {
  position: relative;
  z-index: 2;
}

.worked-ledger {
  overflow: hidden;
  background: #f1f0e9;
  border: 1px solid #77746e;
  box-shadow: 1px 1px 0 #fff inset;
}

.equation-panel .worked-open,
.equation-panel .worked-close {
  display: block;
  margin: 0;
  padding: 4px 7px;
  color: #173d56;
  background: #f7f6ef;
  border: 0;
  font: 10px/1.25 var(--mono-font);
}

.equation-panel .worked-open {
  border-bottom: 1px solid #9a978e;
}

.equation-panel .worked-close {
  border-top: 1px solid #aaa69b;
}

.worked-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  min-height: 34px;
  border-top: 1px dotted #9b988f;
}

.worked-row:first-child {
  border-top: 0;
}

.worked-operator {
  display: grid;
  color: #51616a;
  place-items: center;
  background: #dfdcd2;
  border-right: 1px solid #aaa69b;
  font: 700 9px/1 var(--mono-font);
}

.worked-label {
  min-width: 0;
  padding: 5px 7px;
}

.worked-label strong,
.worked-label code {
  display: block;
}

.worked-label strong {
  margin-bottom: 2px;
  color: #173d56;
  font-size: 9px;
}

.equation-panel .worked-label code {
  margin: 0;
  padding: 0;
  color: #53636c;
  background: transparent;
  border: 0;
  font: 8px/1.3 var(--mono-font);
}

.worked-row output {
  display: grid;
  min-width: 70px;
  padding: 5px 8px;
  color: #173d56;
  place-items: center end;
  background: #f8f7ef;
  border-left: 1px solid #aaa69b;
  font: 700 10px/1 var(--mono-font);
}

.worked-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  margin-top: 6px;
  padding: 7px 8px;
  color: #214733;
  background: #e5efdf;
  border: 1px solid #7e9d7c;
  box-shadow: 1px 1px 0 #fff inset;
}

.worked-total > span {
  font: 700 9px/1.2 var(--ui-font);
  text-transform: uppercase;
}

.worked-total > strong {
  font: 700 12px/1.2 var(--mono-font);
}

.worked-total > small {
  grid-column: 1 / -1;
  color: #58705f;
  font-size: 9px;
}

.worked-total.is-partial {
  color: #5f4a1d;
  background: #f2e8c9;
  border-color: #a69055;
}

.complexity-comparisons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.complexity-delta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 7px;
  align-items: center;
  padding: 6px 7px;
  border: 1px solid #96938a;
  box-shadow: 1px 1px 0 #fff inset;
}

.complexity-delta span {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.complexity-delta strong {
  font: 700 11px/1 var(--mono-font);
}

.complexity-delta small {
  grid-column: 1 / -1;
  font-size: 9px;
}

.complexity-delta.is-positive {
  color: #245c35;
  background: #e3efdf;
  border-color: #7d9d78;
}

.complexity-delta.is-negative {
  color: #7a2d28;
  background: #f2dfd8;
  border-color: #ae8178;
}

.complexity-delta.is-neutral {
  color: #4e5b62;
  background: #e8e6de;
}

.worked-warning,
.worked-footnote {
  margin: 6px 1px 0;
  color: #60696d;
  font-size: 9px;
  line-height: 1.35;
}

.worked-warning {
  padding: 6px 7px;
  color: #654f22;
  background: #f5edcf;
  border: 1px solid #b7a46b;
}

.worked-lab-launch {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  align-items: center;
  margin-top: 7px;
  padding: 7px 8px;
  color: #173d56;
  text-align: left;
  background: #eceae2;
  border: 1px solid #647d89;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #bbb7ac inset;
}

.worked-lab-copy,
.worked-lab-copy strong,
.worked-lab-copy small {
  display: block;
}

.worked-lab-copy strong {
  color: #183f58;
  font-size: 11px;
}

.worked-lab-copy small {
  margin-top: 2px;
  color: #5d6970;
  font-size: 9px;
}

.worked-lab-open {
  display: grid;
  min-width: 42px;
  min-height: 25px;
  padding: 3px 6px;
  color: #23465b;
  place-items: center;
  background: #d7dfe0;
  border: 1px solid #718892;
  box-shadow: 1px 1px 0 #fff inset;
  font: 700 9px/1 var(--mono-font);
  letter-spacing: 0.06em;
}

.worked-lab-launch:hover {
  background: #f6f5ee;
  border-color: #3f738d;
}

.worked-lab-launch:hover .worked-lab-open {
  color: #fff;
  background: #315d77;
  border-color: #17394e;
  box-shadow: 1px 1px 0 #63849a inset;
}

.equation-panel code,
.equation-panel .equation,
.equation-panel .formula {
  display: block;
  padding: 7px 8px;
  color: #173d56;
  background: #f5f4ed;
  border-top: 1px solid #77746e;
  border-left: 1px solid #77746e;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font: 10px/1.55 var(--mono-font);
  white-space: normal;
  overflow-wrap: anywhere;
}

.formula-ledger {
  overflow: hidden;
  color: #263b46;
  background: #e4e1d7;
  border: 1px solid #77746e;
  box-shadow:
    1px 1px 0 #fff inset,
    -1px -1px 0 #aaa69b inset;
}

.formula-ledger code.formula-ledger-open,
.formula-ledger code.formula-ledger-close {
  display: block;
  margin: 0;
  padding: 5px 7px;
  overflow: hidden;
  color: #173d56;
  background: #f7f6ef;
  border: 0;
  font: 10px/1.3 var(--mono-font);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.formula-ledger code.formula-ledger-open {
  border-bottom: 1px solid #9a978e;
}

.formula-ledger code.formula-ledger-close {
  border-top: 1px solid #aaa69b;
}

.formula-ledger-rows {
  background: #f1f0e9;
}

.formula-ledger-row {
  display: grid;
  grid-template-columns: 14px 108px minmax(0, 1fr);
  min-width: 0;
  border-top: 1px dotted #9b988f;
}

.formula-ledger-row:first-child {
  border-top: 0;
}

.formula-ledger-operator {
  display: grid;
  place-items: center;
  color: #51616a;
  background: #e4e1d7;
  border-right: 1px solid #aaa69b;
  font: 700 9px/1 var(--mono-font);
}

.formula-ledger-label {
  min-width: 0;
  padding: 6px 7px;
  background: #d8d5cb;
  border-right: 1px solid #aaa69b;
}

.formula-ledger-label strong,
.formula-ledger-label span {
  display: block;
}

.formula-ledger-label strong {
  color: #173d56;
  font: 700 10px/1.25 var(--ui-font);
}

.formula-ledger-label span {
  margin-top: 3px;
  color: #5d666b;
  font: 9px/1.35 var(--ui-font);
}

.formula-ledger-value {
  min-width: 0;
  padding: 8px 9px;
  background: #f7f6ef;
}

.formula-ledger code.formula-ledger-expression {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  color: #253e4d;
  background: transparent;
  border: 0;
  font: 10px/1.45 var(--mono-font);
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.formula-ledger-bound {
  display: block;
  margin-top: 3px;
  color: #667177;
  font: 9px/1.3 var(--mono-font);
}

.equation-panel .formula-ledger.is-compact code.formula-ledger-open,
.equation-panel .formula-ledger.is-compact code.formula-ledger-close {
  padding: 4px 7px;
  font-size: 10px;
  line-height: 1.25;
}

.equation-panel .formula-ledger.is-compact .formula-ledger-row {
  grid-template-columns: 13px 104px minmax(0, 1fr);
  min-height: 25px;
}

.equation-panel .formula-ledger.is-compact .formula-ledger-label {
  display: flex;
  align-items: center;
  padding: 4px 6px;
}

.equation-panel .formula-ledger.is-compact .formula-ledger-label strong {
  font-size: 9px;
  line-height: 1.25;
}

.equation-panel .formula-ledger.is-compact .formula-ledger-value {
  padding: 5px 6px;
}

.equation-panel .formula-ledger.is-compact code.formula-ledger-expression {
  font-size: 9px;
  line-height: 1.4;
}

.equation-panel .formula-ledger.is-compact .formula-ledger-bound {
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.3;
}

.formula-ledger-note {
  margin: 6px 0 8px;
  color: #60696d;
  font-size: 9px;
}

.equation-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 6px;
  color: #58676e;
  font: 9px/1.45 var(--mono-font);
  text-transform: uppercase;
}

.equation-summary b {
  color: #173d56;
  font-weight: 700;
}

.timeline-panel {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 3;
  flex-direction: column;
}

.timeline-title {
  display: flex;
  flex: 0 0 24px;
  align-items: center;
  gap: 7px;
  padding: 3px 7px;
  color: #203747;
  background: linear-gradient(#f4f2e8, #d7d3c7);
  border-bottom: 1px solid #8d8a82;
  box-shadow: 0 1px 0 #fff inset;
}

.timeline-led {
  width: 8px;
  height: 8px;
  background: #75d9e9;
  border: 1px solid #28687a;
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.timeline-help {
  margin-left: auto;
  color: #687078;
  font-size: 9px;
}

.timeline {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03), transparent),
    #182a34;
  border-top: 1px solid #061016;
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.34) inset;
  scrollbar-color: #70818a #14232c;
}

.timeline-empty {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #7f98a2;
  font: 10px/1.3 var(--mono-font);
  text-align: center;
}

.trace-card,
.timeline-card,
.timeline-event,
.trace-event {
  position: relative;
  display: flex;
  flex: 0 0 126px;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 6px 8px 5px;
  color: #b7cbd3;
  text-align: left;
  background: linear-gradient(#263d49, #1b303a);
  border: 1px solid #516a75;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.07) inset;
}

.trace-card::before,
.timeline-card::before,
.timeline-event::before,
.trace-event::before {
  display: none;
}

button.trace-card:hover,
button.timeline-card:hover,
button.timeline-event:hover,
button.trace-event:hover {
  color: #e7f8fc;
  background: linear-gradient(#31515f, #213b47);
  border-color: #7ba4b4;
}

.trace-card.active,
.trace-card.is-current,
.timeline-card.active,
.timeline-card.is-current,
.timeline-event.active,
.timeline-event.is-current,
.trace-event.active,
.trace-event.is-current {
  color: #eefdff;
  background: linear-gradient(#19546a, #123c4d);
  border-color: #75a7b5;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.09) inset;
}

.trace-card.active::before,
.trace-card.is-current::before,
.timeline-card.active::before,
.timeline-card.is-current::before,
.timeline-event.active::before,
.timeline-event.is-current::before,
.trace-event.active::before,
.trace-event.is-current::before {
  display: none;
}

.trace-phase,
.event-phase {
  color: #7fa6b4;
  font: 8px/1 var(--mono-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.trace-label,
.event-label {
  overflow: hidden;
  font: 700 10px/1.25 var(--heading-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-detail,
.event-detail {
  overflow: hidden;
  color: #91a8b1;
  font: 8px/1.2 var(--mono-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-event > strong {
  overflow: hidden;
  font: 700 10px/1.25 var(--heading-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-event > small {
  overflow: hidden;
  color: #91a8b1;
  font: 8px/1.2 var(--mono-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statusbar {
  display: grid;
  flex: 0 0 var(--status-height);
  grid-template-columns: 92px 104px minmax(140px, 1fr) 94px 108px;
  gap: 2px;
  align-items: stretch;
  min-width: 0;
  padding: 2px 3px 3px;
  background: var(--window-alt);
  border-top: 1px solid #fff;
}

.status-pane {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 1px 6px;
  overflow: hidden;
  color: #444e55;
  font: 9px/1 var(--mono-font);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #d1cdc2;
  border-top: 1px solid #99968d;
  border-left: 1px solid #99968d;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.status-selection {
  display: block;
  padding-top: 5px;
}

button.status-pane {
  width: 100%;
  border-radius: 0;
}

button.status-pane:hover {
  color: #203a4c;
  background: #e1ded4;
}

.sound-icon {
  position: relative;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
}
.sound-icon::before {
  position: absolute;
  top: 3px;
  left: 0;
  content: "";
  border-top: 3px solid transparent;
  border-right: 5px solid #56656e;
  border-bottom: 3px solid transparent;
}
.sound-icon::after {
  position: absolute;
  top: 3px;
  right: 0;
  width: 4px;
  height: 6px;
  content: "";
  border-right: 1px solid #56656e;
  border-radius: 50%;
}
.sound-toggle[aria-pressed="false"] .sound-icon::after {
  width: 9px;
  height: 1px;
  top: 6px;
  right: -1px;
  background: #9b3c38;
  border: 0;
  border-radius: 0;
  transform: rotate(-45deg);
}

.config-drawer {
  position: absolute;
  z-index: 50;
  top: calc(var(--title-height) + var(--toolbar-height));
  right: 0;
  bottom: var(--status-height);
  display: flex;
  width: min(390px, calc(100% - 36px));
  flex-direction: column;
  overflow: hidden;
  visibility: hidden;
  background: var(--window);
  border-left: 2px solid #fff;
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.4), -1px 0 0 #5f5d57;
  transform: translateX(calc(100% + 24px));
  transition: transform 190ms ease, visibility 0s linear 190ms;
}

.config-drawer[aria-hidden="false"],
.config-drawer.is-open,
.config-drawer.open {
  visibility: visible;
  transform: translateX(0);
  transition: transform 190ms ease;
}

.drawer-scrim {
  position: absolute;
  z-index: 49;
  inset: calc(var(--title-height) + var(--toolbar-height)) 0 var(--status-height);
  background: rgba(3, 15, 24, 0.36);
}

.drawer-titlebar {
  display: flex;
  flex: 0 0 33px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 5px 4px 8px;
  color: #fff;
  background: linear-gradient(90deg, #154877, #4286b7);
  border-bottom: 1px solid #09294a;
  text-shadow: 1px 1px #13354d;
}

.drawer-titlebar h2 {
  margin: 0;
  font: 700 12px/1 var(--heading-font);
}

.drawer-icon,
.dialog-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  color: #0e4770;
  text-align: center;
  background: #d9eef8;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #164b70;
  text-shadow: none;
}

.drawer-icon::before,
.drawer-icon::after {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 2px;
  content: "";
  background: #28617e;
}
.drawer-icon::before { left: 5px; }
.drawer-icon::after { right: 5px; }

.drawer-close {
  font: 700 12px/1 Arial, sans-serif;
}

.drawer-intro {
  padding: 10px;
  color: #33444f;
  background: #f7f3d8;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #b4aa79;
}

.drawer-intro strong {
  display: block;
  font: 700 11px/1.3 var(--heading-font);
}

.drawer-intro p {
  margin: 3px 0 0;
  color: #62645a;
  font-size: 9px;
}

.config-content {
  flex: 1 1 auto;
  padding: 9px;
  overflow: auto;
}

.config-section,
.config-group {
  margin-bottom: 9px;
  padding: 9px;
  background: #f7f5ec;
  border: 1px solid #aaa69c;
  box-shadow: 1px 1px 0 #fff inset;
}

.config-section h3,
.config-group h3 {
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #c7c3b8;
}

.config-group-note {
  margin: 6px 0 0;
  color: #626b70;
  font-size: 8px;
  line-height: 1.4;
}

.config-live-summary {
  background: #edf2ee;
  border-color: #779083;
}

.config-live-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  margin-bottom: 6px;
}

.config-live-heading h3 {
  margin-bottom: 3px;
  padding: 0;
  border: 0;
}

.config-live-heading p {
  margin: 0;
  color: #5a6661;
  font-size: 8px;
  line-height: 1.4;
}

.config-live-heading > span {
  padding: 4px 6px;
  color: #244d32;
  background: #dcebdc;
  border: 1px solid #779678;
  font: 700 8px/1 var(--mono-font);
}

.config-live-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.config-live-summary dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  min-height: 0;
  padding: 5px;
  background: #f8f7f0;
  border: 1px solid #b1b7ad;
}

.config-live-summary dd {
  color: #214e37;
}

.config-copy-note {
  background: #f4efd7;
  border-color: #b7aa73;
}

.config-row,
.config-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 9px;
  align-items: center;
  min-height: 38px;
  border-bottom: 1px dotted #c1bdb2;
}

.config-row:last-child,
.config-control:last-child {
  border-bottom: 0;
}

.config-row label,
.config-control label {
  color: #303c45;
}

.config-row label small,
.config-control label small {
  display: block;
  margin-top: 1px;
  color: #687177;
  font-size: 8px;
}

.config-row input[type="number"],
.config-control input[type="number"],
.config-row select,
.config-control select {
  width: 100%;
  min-width: 0;
}

.config-row output,
.config-control output {
  color: #17496b;
  font-family: var(--mono-font);
  text-align: right;
}

.config-row input[type="range"],
.config-control input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 18px;
  margin: -3px 0 5px;
}

.config-check {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 5px 3px;
  color: #33414a;
  border-bottom: 1px dotted #c1bdb2;
}

.config-check input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.config-check span {
  min-width: 0;
}

.config-check strong,
.config-check small {
  display: block;
}

.config-check small {
  margin-top: 2px;
  color: #687177;
  font-size: 8px;
  line-height: 1.3;
}

.config-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.config-action,
.action-button,
.drawer-button {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 5px 8px;
  color: #243949;
  text-align: left;
  background: linear-gradient(#fff, #dcd8cc);
  border: 1px solid #8c8980;
  box-shadow: 1px 1px 0 #fff inset;
}

.wide-action {
  grid-column: 1 / -1;
}

.config-action:hover,
.action-button:hover,
.drawer-button:hover {
  color: #0d4267;
  background: linear-gradient(#fff, #dfebf1);
  border-color: #5e8199;
}

.config-effect,
.effect-note {
  margin-top: 7px;
  padding: 7px;
  color: #454e53;
  background: #e6edf0;
  border: 1px solid #8aa0aa;
  box-shadow: 1px 1px 0 #fff inset;
  font-size: 9px;
}

.field-note {
  margin: 8px 0;
  padding: 9px;
  color: #3b4347;
  background: #f4eed1;
  border: 1px solid #b8a865;
  box-shadow: 1px 1px 0 #fff inset;
}

.field-note strong {
  color: #665315;
  font-family: var(--heading-font);
  text-transform: uppercase;
}

.field-note.warning,
.field-note.is-warning {
  background: #f4ded9;
  border-color: #c17b70;
}

.workbench-dialog {
  max-width: none;
  max-height: none;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  overflow: visible;
}

.recovery-lab-dialog {
  inset: 0;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
}

.recovery-lab-window {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 42px auto minmax(0, 1fr) 27px;
  color: #293840;
  background: #c5c2b8;
  border: 2px solid #12364f;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #77746d inset;
}

.recovery-lab-titlebar {
  min-height: 42px;
  padding: 4px 5px 4px 7px;
  background: #0a246a;
  border-top: 1px solid #4567a0;
  box-shadow: 0 -1px 0 #14377c inset;
}

.complexity-lab-heading,
.complexity-lab-window-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.complexity-lab-heading > div {
  min-width: 0;
}

.complexity-lab-window-actions {
  flex: 0 0 auto;
  gap: 7px;
  margin-left: auto;
}

.recovery-lab-titlebar h2,
.recovery-lab-titlebar p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recovery-lab-titlebar p {
  margin: 2px 0 0;
  color: #c8d6ec;
  font-size: 9px;
  text-shadow: 1px 1px #10255a;
}

.complexity-lab-mode {
  padding: 3px 6px;
  color: #d9e6f4;
  background: #163b7a;
  border: 1px solid #5477ad;
  box-shadow: 1px 1px 0 #061d4d inset;
  font: 700 9px/1 var(--mono-font);
  letter-spacing: 0.06em;
  text-shadow: 1px 1px #061d4d;
}

.complexity-lab-mark {
  position: relative;
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  overflow: hidden;
  background: #edf0e7;
  border: 1px solid #153d59;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #91978f inset, 1px 1px 0 #061c3f;
}

.complexity-lab-mark::before,
.complexity-lab-mark::after {
  position: absolute;
  z-index: 2;
  content: "";
  background: #173b54;
}

.complexity-lab-mark::before {
  right: 9%;
  bottom: 16%;
  left: 17%;
  height: 1px;
}

.complexity-lab-mark::after {
  top: 10%;
  bottom: 16%;
  left: 17%;
  width: 1px;
}

.complexity-lab-mark i {
  position: absolute;
  z-index: 1;
  bottom: 20%;
  width: 15%;
  border: 1px solid #2a4655;
}

.complexity-lab-mark i:nth-child(1) {
  left: 25%;
  height: 27%;
  background: #4e89ad;
}

.complexity-lab-mark i:nth-child(2) {
  left: 46%;
  height: 45%;
  background: #5a9971;
}

.complexity-lab-mark i:nth-child(3) {
  left: 67%;
  height: 66%;
  background: #c08a36;
}

.complexity-lab-mark-launch {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  margin-right: 0;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #91978f inset;
}

.complexity-lab-mark-shortcut {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
  margin-right: 0;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #91978f inset;
}

.recovery-lab-toolbar {
  display: flex;
  min-height: 47px;
  align-items: end;
  gap: 8px;
  padding: 5px 7px;
  background: #dedbd2;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #77746d;
  box-shadow: 0 -1px 0 #aaa69d inset;
}

.recovery-lab-toolbar > label,
.recovery-scale {
  display: grid;
  gap: 2px;
  color: #526067;
  font-size: 9px;
}

.recovery-lab-toolbar select {
  min-width: 165px;
  height: 27px;
}

.recovery-scale {
  grid-template-columns: auto auto;
}

.recovery-scale > span {
  grid-column: 1 / -1;
}

.recovery-scale button,
.recovery-toolbar-actions button {
  min-height: 27px;
  padding: 3px 9px;
  color: #33434c;
  background: #e7e4dc;
  border: 1px solid #8c8981;
  box-shadow: 1px 1px 0 #fff inset;
}

.recovery-scale button[aria-pressed="true"] {
  color: #fff;
  background: #315d77;
  border-color: #17394e;
  box-shadow: 1px 1px 0 #63849a inset;
}

.recovery-toolbar-actions {
  display: flex;
  gap: 5px;
  margin-left: auto;
}

.recovery-toolbar-actions button:last-child {
  color: #fff;
  background: #315d77;
  border-color: #17394e;
  box-shadow: 1px 1px 0 #63849a inset;
  font-weight: 700;
}

.recovery-toolbar-actions button:disabled {
  color: #7e8588;
  background: #c9c7c0;
  border-color: #9d9a92;
  box-shadow: none;
}

.recovery-lab-content {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  overflow: hidden;
  background: #aaa79f;
}

.recovery-chart {
  flex: 0 0 auto;
  padding: 6px;
  background: #f2f0e8;
  border: 1px solid #77746d;
  box-shadow: 1px 1px 0 #fff inset;
}

.recovery-chart-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}

.recovery-chart-heading h3,
.recovery-chart-heading p {
  margin: 0;
}

.recovery-chart-heading h3 {
  color: #173d56;
  font-size: 12px;
}

.recovery-chart-heading p {
  margin-top: 2px;
  color: #687176;
  font-size: 9px;
}

.recovery-chart-heading > span {
  padding: 4px 6px;
  color: #315369;
  background: #dce4e6;
  border: 1px solid #8c9ca2;
  font: 700 9px/1 var(--mono-font);
}

.recovery-chart-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
}

.recovery-chart-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(110px, 1.1fr) minmax(110px, 0.7fr);
  gap: 7px;
  align-items: center;
  min-height: 27px;
  padding: 3px 5px;
  background: #e5e3dc;
  border: 1px solid #aaa79f;
}

.recovery-chart-label,
.recovery-chart-delta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.recovery-chart-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recovery-chart-label i,
.recovery-card-header > i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background: var(--slot-color);
  border: 1px solid #34424a;
}

.recovery-chart-label strong,
.recovery-chart-delta strong {
  font: 700 10px/1 var(--mono-font);
  white-space: nowrap;
}

.recovery-chart-track,
.recovery-card-meter {
  height: 13px;
  overflow: hidden;
  background: #cbc9c2;
  border: 1px solid #75736d;
  box-shadow: 1px 1px 0 #fff inset;
}

.recovery-chart-track > span,
.recovery-card-meter > span {
  display: block;
  width: var(--bar-width);
  height: 100%;
  background: var(--slot-color);
  border-right: 1px solid #263c48;
}

.recovery-chart-row.is-partial .recovery-chart-track > span,
.recovery-card-total.is-partial .recovery-card-meter > span {
  background: repeating-linear-gradient(135deg, #b48332 0, #b48332 5px, #e3c274 5px, #e3c274 10px);
}

.recovery-chart-row.is-positive .recovery-chart-delta,
.recovery-card-total.is-positive .recovery-card-delta {
  color: #245c35;
}

.recovery-chart-row.is-negative .recovery-chart-delta,
.recovery-card-total.is-negative .recovery-card-delta {
  color: #7a2d28;
}

.recovery-chart-row.is-partial .recovery-chart-delta,
.recovery-card-total.is-partial .recovery-card-delta {
  color: #755719;
}

.recovery-grid {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(var(--recovery-count, 1), minmax(0, 1fr));
  gap: 5px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.recovery-grid.count-1 { --recovery-count: 1; }
.recovery-grid.count-2 { --recovery-count: 2; }
.recovery-grid.count-3 { --recovery-count: 3; }
.recovery-grid.count-4 { --recovery-count: 4; }

.recovery-card {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 35px minmax(0, 1fr);
  overflow: hidden;
  background: #d4d1c8;
  border: 1px solid #6f6c66;
  box-shadow: 1px 1px 0 #fff inset;
}

.recovery-card.is-baseline {
  border-color: #274f68;
  box-shadow: 0 0 0 1px #7593a4 inset;
}

.recovery-card-header {
  display: grid;
  grid-template-columns: 14px minmax(90px, 1fr) auto auto 24px;
  gap: 3px;
  align-items: center;
  padding: 3px;
  background: #c4c1b8;
  border-bottom: 1px solid #77746d;
}

.recovery-card-header > i {
  margin: 0 auto;
}

.recovery-card-header label,
.recovery-card-header select {
  min-width: 0;
  width: 100%;
}

.recovery-card-header select {
  height: 27px;
}

.recovery-card-header button,
.recovery-reset-slot {
  min-height: 27px;
  padding: 3px 6px;
  color: #37464e;
  background: #e8e5dc;
  border: 1px solid #8b8880;
  box-shadow: 1px 1px 0 #fff inset;
  font-size: 9px;
}

.recovery-card-header button[aria-pressed="true"] {
  color: #fff;
  background: #315d77;
  border-color: #17394e;
}

.recovery-card-header button:disabled {
  color: #888b8b;
  background: #ceccc5;
}

.recovery-card-body {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(150px, 42%) minmax(0, 1fr);
}

.recovery-card-body > aside,
.recovery-card-body > main {
  min-width: 0;
  min-height: 0;
  padding: 5px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.recovery-card-body > aside {
  background: #e1ded5;
  border-bottom: 1px solid #8e8a82;
}

.recovery-card-body > main {
  background: #cac7be;
}

.recovery-config {
  background: #f1efe7;
  border: 1px solid #929087;
}

.recovery-config > summary {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  color: #25475d;
  cursor: pointer;
  background: #d9dfe0;
  border-bottom: 1px solid #929087;
  font-weight: 700;
}

.recovery-config > summary small {
  color: #657178;
  font: 9px/1 var(--mono-font);
}

.recovery-control-list {
  padding: 5px 7px;
}

.recovery-impact-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 9px;
  align-items: center;
  padding: 5px 7px;
  color: #46565e;
  background: #e8e5dc;
  border-bottom: 1px solid #aaa69b;
  outline: 0;
  font-size: 9px;
  cursor: help;
}

.recovery-impact-key > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recovery-impact-key > i,
.recovery-impact-key span > i {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #315d77;
  border: 1px solid #5b5a56;
}

.recovery-impact-key span > i.is-performance {
  background: #96752f;
}

.recovery-impact-key > b {
  grid-column: 1 / -1;
  color: #714f1d;
  font: 700 9px/1.2 var(--mono-font);
  text-align: left;
}

.recovery-impact-key:focus-visible,
.recovery-impact:focus-visible {
  outline: 1px dotted #173d56;
  outline-offset: -2px;
}

.recovery-runtime-terms {
  padding: 5px 7px 6px;
  color: #3e4c52;
  background: #e2e0d8;
  border-bottom: 1px solid #aaa69b;
}

.recovery-runtime-terms > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recovery-runtime-terms > header strong {
  color: #264a60;
  font-size: 10px;
}

.recovery-runtime-terms > header small {
  color: #70736f;
  font: 700 8px/1 var(--mono-font);
}

.recovery-runtime-terms > div {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.recovery-runtime-terms > div > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  color: #34454d;
  background: #f0eee7;
  border: 1px solid #9c9990;
  box-shadow: 1px 1px 0 #fff inset;
  cursor: help;
}

.recovery-runtime-terms i {
  overflow: hidden;
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recovery-runtime-terms b {
  flex: 0 0 auto;
  color: #714f1d;
  font: 700 9px/1 var(--mono-font);
}

.recovery-runtime-terms > p {
  margin: 4px 0 0;
  color: #666f72;
  font-size: 9px;
  line-height: 1.25;
}

.recovery-control,
.recovery-toggle-control {
  min-height: 0;
  padding: 5px 0 6px;
  border-bottom: 1px dotted #bbb7ad;
}

.recovery-control-main {
  display: grid;
  grid-template-columns: minmax(105px, 1fr) minmax(138px, 0.9fr);
  gap: 7px;
  align-items: center;
  min-height: 35px;
}

.recovery-value-editor {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(52px, 1fr) 70px;
  gap: 6px;
  align-items: center;
  padding: 2px 3px;
  background: #d4d1c8;
  border: 1px solid #aaa69d;
  box-shadow: 1px 1px 0 #f8f6ee inset;
}

.recovery-control-copy strong,
.recovery-control-copy small,
.recovery-check strong,
.recovery-check small {
  display: block;
}

.recovery-control-copy strong,
.recovery-check strong {
  color: #34434b;
  font-size: 10px;
}

.recovery-control-copy small,
.recovery-check small {
  margin-top: 2px;
  color: #6b7377;
  font-size: 9px;
  line-height: 1.35;
}

.recovery-number-input {
  width: 100%;
  min-width: 0;
  min-height: 24px;
  padding: 2px 18px 2px 5px;
  font-size: 10px;
  font-family: var(--mono-font);
  text-align: right;
}

.recovery-number-input[aria-invalid="true"] {
  color: #8b302c;
  background: #f6e0dc;
  border-color: #a6534c;
}

.recovery-range {
  --range-fill: 0%;
  width: 100%;
  min-width: 0;
  height: 20px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  color: #627680;
  background: transparent;
  cursor: pointer;
}

.recovery-range:focus {
  outline: 0;
}

.recovery-range:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.recovery-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 7px;
  background: linear-gradient(90deg, #627680 0 var(--range-fill), #b8b5ad var(--range-fill) 100%);
  border: 1px solid #666b6c;
  border-radius: 0;
  box-shadow: 1px 1px 0 #f5f3eb inset;
}

.recovery-range::-webkit-slider-thumb {
  width: 12px;
  height: 17px;
  margin-top: -6px;
  appearance: none;
  -webkit-appearance: none;
  background: #dedbd2;
  border: 1px solid #555b5c;
  border-radius: 0;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #9b9890 inset;
}

.recovery-range::-moz-range-track {
  width: 100%;
  height: 5px;
  background: #b8b5ad;
  border: 1px solid #666b6c;
  border-radius: 0;
  box-shadow: 1px 1px 0 #f5f3eb inset;
}

.recovery-range::-moz-range-progress {
  height: 5px;
  background: #627680;
  border: 1px solid #465b65;
  border-radius: 0;
}

.recovery-range::-moz-range-thumb {
  width: 11px;
  height: 16px;
  background: #dedbd2;
  border: 1px solid #555b5c;
  border-radius: 0;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #9b9890 inset;
}

.recovery-range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.recovery-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.recovery-value-editor:focus-within {
  border-color: #5b7383;
}

.recovery-control-group h4 {
  margin: 8px 0 3px;
  color: #24475d;
  font-size: 9px;
}

.recovery-check {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 35px;
}

.recovery-impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #cbc7bc;
  outline: 0;
  cursor: help;
}

.recovery-impact-meter {
  --impact-fill: 0%;
  min-width: 0;
  height: 39px;
  padding: 3px 4px;
  overflow: hidden;
  background: #dedbd2;
  border: 1px solid #918e86;
  box-shadow: 1px 1px 0 #fff inset;
}

.recovery-impact-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  height: 10px;
  color: #40515a;
  font-size: 9px;
  line-height: 1;
}

.recovery-impact-head b {
  flex: 0 0 auto;
  max-width: 62%;
  overflow: hidden;
  color: #263e4d;
  font: 700 9px/1 var(--mono-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recovery-impact-track {
  position: relative;
  height: 8px;
  margin-top: 3px;
  overflow: hidden;
  background: #bdbab2;
  border: 1px solid #706e68;
  box-shadow: 1px 1px 0 #f8f7f2 inset;
}

.recovery-impact-track::after {
  position: absolute;
  inset: 0;
  content: "";
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(45, 48, 47, 0.24) 12px 13px);
  pointer-events: none;
}

.recovery-impact-fill {
  display: block;
  width: var(--impact-fill);
  height: 100%;
  background: #315d77;
  border-right: 1px solid #1b3c50;
  transition: width 120ms linear;
}

.recovery-impact-meter > small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #52636c;
  font: 700 9px/1 var(--mono-font);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recovery-impact-meter.is-performance.level-low .recovery-impact-fill {
  background: #55775b;
  border-right-color: #354f3b;
}

.recovery-impact-meter.is-performance.level-medium .recovery-impact-fill {
  background: #96752f;
  border-right-color: #674b18;
}

.recovery-impact-meter.is-performance.level-high .recovery-impact-fill {
  background: #9a562d;
  border-right-color: #693317;
}

.recovery-impact-meter.is-performance.level-extreme .recovery-impact-fill {
  background: #843b35;
  border-right-color: #55211d;
}

.recovery-impact-meter.is-performance.is-footprint .recovery-impact-fill {
  background: #536f7a;
  border-right-color: #314b56;
}

.recovery-impact-meter.is-inactive .recovery-impact-fill,
.recovery-impact-meter.is-scope .recovery-impact-fill,
.recovery-impact-meter.is-recovery .recovery-impact-fill,
.recovery-impact-meter.is-conditional .recovery-impact-fill,
.recovery-impact-meter.is-neutral .recovery-impact-fill {
  border-right: 0;
}

.recovery-impact-meter.is-inactive > small,
.recovery-impact-meter.is-scope > small,
.recovery-impact-meter.is-recovery > small,
.recovery-impact-meter.is-conditional > small,
.recovery-impact-meter.is-neutral > small {
  color: #73736e;
}

.recovery-impact-meter.is-scope .recovery-impact-track {
  background: repeating-linear-gradient(135deg, #c7d2d7 0 4px, #b7c5ca 4px 8px);
}

.recovery-impact-meter.is-recovery .recovery-impact-track {
  background: repeating-linear-gradient(135deg, #ccc9c0 0 4px, #bbb8b0 4px 8px);
}

.recovery-impact-meter.is-conditional .recovery-impact-track {
  background: repeating-linear-gradient(135deg, #d4c8ad 0 4px, #c6b896 4px 8px);
}

.recovery-impact-meter.is-inactive .recovery-impact-track {
  background: #c5c2ba;
}

.recovery-impact-popover {
  position: fixed;
  z-index: 120;
  width: min(330px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow: hidden;
  color: #222;
  background: #f7f4d7;
  border: 1px solid #454b4c;
  box-shadow: 2px 2px 0 rgba(24, 29, 30, 0.35);
  font: 10px/1.4 var(--ui-font);
  pointer-events: none;
}

.recovery-impact-popover-title {
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  color: #fff;
  background: #315d77;
  border-bottom: 1px solid #17394e;
}

.recovery-impact-popover-title h3 {
  margin: 0;
  font-size: 11px;
}

.impact-popover-icon {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: #1f465d;
  background: #f1efe7;
  border: 1px solid #17394e;
  font: 700 10px/1 Georgia, serif;
}

.recovery-impact-popover-body {
  padding: 6px;
  overflow: auto;
  max-height: calc(100dvh - 52px);
}

.recovery-impact-popover-body section {
  padding: 6px;
  background: #f4f1e9;
  border: 1px solid #aaa58f;
}

.recovery-impact-popover-body section + section {
  margin-top: 5px;
}

.recovery-impact-popover-body section.is-complexity {
  background: #e8eef0;
  border-color: #8c9da4;
}

.recovery-impact-popover-body section.is-performance {
  background: #f3ebd9;
  border-color: #a7956c;
}

.recovery-impact-popover-body header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
}

.recovery-impact-popover-body header strong {
  color: #263f4e;
  font-size: 10px;
}

.recovery-impact-popover-body header b {
  color: #5c4b2b;
  font: 700 9px/1.2 var(--mono-font);
  text-align: right;
}

.recovery-impact-popover-body p,
.recovery-impact-popover-body small,
.recovery-impact-popover-body footer {
  display: block;
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.42;
}

.recovery-impact-popover-body small {
  padding-top: 4px;
  color: #536169;
  border-top: 1px dotted #aaa69b;
}

.recovery-impact-popover-body footer {
  padding: 5px 2px 0;
  color: #61645f;
}

.recovery-reset-slot {
  width: calc(100% - 12px);
  margin: 0 6px 6px;
}

.recovery-config-locked {
  padding: 10px;
  color: #5e4d26;
  background: #f3e9c9;
  border: 1px solid #ac985c;
}

.recovery-config-locked p {
  margin: 5px 0 0;
  font-size: 9px;
  line-height: 1.45;
}

.recovery-card-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  margin-bottom: 5px;
  padding: 7px;
  color: #264337;
  background: #e7eee3;
  border: 1px solid #82947f;
  box-shadow: 1px 1px 0 #fff inset;
}

.recovery-card-total > div:first-child span,
.recovery-card-total > div:first-child strong,
.recovery-card-delta span,
.recovery-card-delta b {
  display: block;
}

.recovery-card-total > div:first-child span,
.recovery-card-delta span {
  font-size: 9px;
}

.recovery-card-total > div:first-child strong,
.recovery-card-delta b {
  margin-top: 2px;
  font: 700 10px/1.2 var(--mono-font);
}

.recovery-card-delta {
  text-align: right;
}

.recovery-card-meter {
  grid-column: 1 / -1;
}

.recovery-worked-model .worked-ledger {
  background: #f1f0e9;
}

.recovery-worked-model .worked-open,
.recovery-worked-model .worked-close {
  display: block;
  padding: 4px 7px;
  color: #173d56;
  background: #f7f6ef;
  border: 0;
  font: 10px/1.25 var(--mono-font);
}

.recovery-worked-model .worked-open {
  border-bottom: 1px solid #9a978e;
}

.recovery-worked-model .worked-close {
  border-top: 1px solid #aaa69b;
}

.recovery-worked-model .worked-label code {
  margin: 0;
  padding: 0;
  color: #53636c;
  background: transparent;
  border: 0;
  font: 9px/1.35 var(--mono-font);
}

.recovery-worked-model .worked-total > small,
.recovery-worked-model .complexity-delta span,
.recovery-worked-model .complexity-delta small,
.recovery-worked-model .worked-warning,
.recovery-worked-model .worked-footnote {
  font-size: 9px;
}

.recovery-lab-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 7px;
  overflow: hidden;
  color: #37464d;
  background: #d7d4ca;
  border-top: 1px solid #fff;
  font-size: 9px;
  white-space: nowrap;
}

.author-credit-lab {
  flex: 0 0 auto;
  min-height: 19px;
  padding: 2px 6px;
  color: #46545a;
  background: #ece9df;
  border: 1px solid #99968d;
  box-shadow: 1px 1px 0 #fff inset;
}

.author-credit-lab strong {
  color: #174a68;
}

.author-credit-lab i {
  color: #657077;
  border-left-color: #aaa69b;
}

.author-credit-lab:hover {
  color: #1e465f;
  background: #f7f5ed;
  border-color: #6f7c82;
}

.author-credit-lab:focus-visible {
  outline-color: #173d56;
}

.workbench-dialog::backdrop {
  background: rgba(3, 17, 28, 0.62);
  backdrop-filter: blur(1px);
}

.dialog-window {
  width: min(610px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: hidden;
  background: var(--window);
  border: 1px solid #0d3150;
  border-radius: 4px 4px 1px 1px;
  box-shadow: 0 0 0 2px #537491, 0 20px 46px rgba(0, 0, 0, 0.56);
}

.dialog-content {
  max-height: calc(100vh - 80px);
  padding: 14px;
  overflow: auto;
  border: 2px solid var(--window);
  box-shadow: 1px 1px 0 #fff inset;
}

.dialog-content section {
  margin-bottom: 12px;
}

.dialog-content section:last-child {
  margin-bottom: 0;
}

.dialog-content h3 {
  margin-bottom: 5px;
  color: #1e4e70;
}

.dialog-content p {
  margin: 0;
  line-height: 1.55;
}

.method-icon::before {
  content: "fx";
  font: 700 10px/16px var(--mono-font);
}

.help-icon {
  font: 700 12px/16px var(--heading-font);
}

.help-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}

.help-content section {
  margin: 0;
  padding: 10px;
  background: #f7f5ec;
  border: 1px solid #b5b1a7;
  box-shadow: 1px 1px 0 #fff inset;
}

.help-keyboard dl,
.help-keyboard div {
  margin: 0;
}

.help-keyboard div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.help-keyboard dt {
  min-width: 116px;
}

.help-keyboard dd {
  margin: 0;
}

kbd {
  display: inline-block;
  min-width: 31px;
  padding: 2px 5px;
  color: #27343e;
  font: 9px/1.2 var(--mono-font);
  text-align: center;
  background: linear-gradient(#fff, #d9d5ca);
  border: 1px solid #8b8880;
  border-radius: 2px;
  box-shadow: 0 1px 0 #fff inset, 0 2px 0 #8b8880;
}

.method-table {
  width: 100%;
  border-collapse: collapse;
}

.method-table th,
.method-table td {
  padding: 5px 6px;
  text-align: left;
  border: 1px solid #b9b5aa;
}

.method-table th {
  color: #28465a;
  background: #dbdfdb;
}

.method-table code {
  color: #174b6b;
  font-family: var(--mono-font);
}

.toast {
  position: fixed;
  z-index: 200;
  right: 24px;
  bottom: 42px;
  width: min(340px, calc(100vw - 32px));
  padding: 10px 12px;
  color: #263035;
  visibility: hidden;
  background: linear-gradient(#fff9c9, #ead995);
  border: 1px solid #776423;
  box-shadow: 2px 3px 13px rgba(0, 0, 0, 0.45), 1px 1px 0 #fff inset;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.toast.is-visible,
.toast.visible,
.toast.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
}

.noscript-note {
  position: fixed;
  z-index: 9998;
  right: 20px;
  bottom: 20px;
  left: 20px;
  padding: 12px;
  color: #3d291c;
  background: #ffe6b4;
  border: 2px solid #8a572e;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.register-grid,
.state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.register,
.state-cell {
  min-width: 0;
  padding: 5px 6px;
  color: #34464f;
  background: #e2e5de;
  border: 1px solid #a3a69d;
  box-shadow: 1px 1px 0 #fff inset;
}

.register-name,
.state-name {
  display: block;
  color: #667179;
  font: 8px/1 var(--mono-font);
}

.register-value,
.state-value {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #164d70;
  font: 10px/1 var(--mono-font);
  text-overflow: ellipsis;
}

.register.is-written,
.state-cell.is-written,
.register.changed,
.state-cell.changed {
  background: #f6dfad;
  border-color: #c58b34;
  animation: state-flash 420ms ease;
}

@keyframes state-flash {
  0% { box-shadow: 0 0 0 3px rgba(255, 184, 77, 0.7), 1px 1px 0 #fff inset; }
  100% { box-shadow: 1px 1px 0 #fff inset; }
}

.code-block,
.hex-view,
pre {
  max-width: 100%;
  margin: 7px 0;
  padding: 8px;
  overflow: auto;
  color: #bfe1eb;
  background: #10232c;
  border: 1px solid #071117;
  box-shadow: 1px 1px 0 #35505b inset;
  font: 9px/1.55 var(--mono-font);
  tab-size: 2;
}

code {
  font-family: var(--mono-font);
}

.warning-box,
.limitation-box {
  margin: 7px 0;
  padding: 7px 8px;
  color: #542d29;
  background: #f3dcd7;
  border: 1px solid #bf7971;
}

.lesson-box,
.explanation-box {
  margin: 7px 0;
  padding: 7px 8px;
  color: #25475b;
  background: #dceaf0;
  border: 1px solid #7d9fac;
}

.coverage-bar {
  position: relative;
  height: 20px;
  overflow: hidden;
  background: #687276;
  border: 1px solid #4a5051;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35) inset;
}

.coverage-bar > span {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(135deg, #4cc0da 0 7px, #299ab7 7px 14px);
}

.coverage-bar output {
  position: absolute;
  inset: 0;
  color: #fff;
  font: 9px/20px var(--mono-font);
  text-align: center;
  text-shadow: 1px 1px #24404b;
}

@media (min-width: 1500px) {
  .recovery-grid.count-1 .recovery-card-body,
  .recovery-grid.count-2 .recovery-card-body {
    grid-template-columns: minmax(280px, 0.72fr) minmax(360px, 1.28fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .recovery-grid.count-1 .recovery-card-body > aside,
  .recovery-grid.count-2 .recovery-card-body > aside {
    border-right: 1px solid #8e8a82;
    border-bottom: 0;
  }
}

@media (max-width: 1499px) {
  .recovery-grid.count-3,
  .recovery-grid.count-4 {
    grid-template-columns: repeat(2, minmax(360px, 1fr));
  }

  .recovery-grid.count-3 .recovery-card,
  .recovery-grid.count-4 .recovery-card {
    min-height: 650px;
  }
}

@media (max-width: 1179px) {
  body {
    overflow: hidden;
  }

  .app-window {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
  }

  .workbench {
    grid-template-columns: 166px minmax(390px, 1fr);
    grid-template-rows: minmax(340px, 1fr) 290px 128px;
    gap: 4px;
    overflow-y: auto;
  }

  .pane-splitter {
    display: none;
  }

  .profiles-panel {
    grid-column: 1;
  }

  .machine-panel {
    grid-column: 2;
  }

  .inspector-panel {
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: auto;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(250px, 1fr) 340px;
    grid-template-rows: 27px 29px minmax(0, 1fr) 160px;
    width: auto;
    visibility: visible;
    box-shadow: 1px 1px 0 #cbc7bb inset, -1px -1px 0 #aaa69b inset;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .inspector-panel > .panel-caption {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .inspector-tabs {
    grid-column: 1;
    grid-row: 2;
  }

  .inspector-content {
    grid-column: 1;
    grid-row: 3 / 5;
  }

  .meter-rack {
    grid-column: 2;
    grid-row: 2 / 4;
    overflow: auto;
    border-top: 0;
    border-left: 1px solid #97948c;
  }

  .equation-panel {
    grid-column: 2;
    grid-row: 4;
    height: 160px;
    min-height: 0;
    max-height: none;
    padding: 6px 7px;
  }

  .timeline-panel {
    grid-row: 3;
  }

  .profile-item,
  .profile-button,
  .profile-list > button {
    grid-template-columns: 26px minmax(0, 1fr);
    min-height: 40px;
    padding: 4px;
  }

  .profile-number,
  .profile-index {
    width: 23px;
    height: 23px;
  }

  .profile-difficulty,
  .profile-badge {
    display: none;
  }

  .toolbar-check {
    min-width: 101px;
  }

  .compact-tool span:last-child,
  .toolbar-navigation .tool-button span:last-child {
    display: none;
  }

  .compact-tool,
  .toolbar-navigation .tool-button {
    min-width: 39px;
    padding-right: 7px;
    padding-left: 7px;
  }
}

@media (max-width: 799px) {
  :root {
    --title-height: 32px;
    --toolbar-height: auto;
    --status-height: 25px;
  }

  .author-credit-titlebar i,
  .author-credit-lab i {
    display: none;
  }

  .author-credit-titlebar {
    padding-right: 5px;
    padding-left: 5px;
  }

  body {
    background: var(--window-alt);
  }

  .app-window {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .titlebar-copy > span {
    display: none;
  }

  .titlebar-copy h1::after {
    content: "";
  }

  .toolbar {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    min-height: 48px;
    padding: 4px;
    overflow-x: auto;
  }

  .toolbar-separator,
  .toolbar-navigation,
  .speed-control > span,
  .toolbar-check {
    display: none;
  }

  .toolbar-options {
    margin-left: 0;
  }

  .tool-button,
  .speed-control select {
    min-height: 40px;
  }

  .tool-button {
    min-width: 58px;
  }

  .toolbar-transport {
    flex: 1 0 auto;
  }

  .speed-control {
    padding: 0;
  }

  .configure-button {
    min-width: 78px;
  }

  .workbench {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 3px;
    overflow-y: auto;
  }

  .profiles-panel {
    display: block;
    flex: 0 0 auto;
    min-height: 75px;
  }

  .profiles-panel .panel-caption {
    display: none;
  }

  .lab-inputs {
    display: flex;
    gap: 5px;
    padding: 5px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .lab-inputs h3 {
    display: none;
  }

  .lab-inputs .switch-row {
    flex: 0 0 184px;
  }

  .lab-inputs .field-label {
    flex: 0 0 170px;
    margin: 0;
  }

  .profile-scroll {
    min-height: 0;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
  }

  .profile-list {
    flex-direction: row;
    gap: 4px;
  }

  .profile-group-label {
    display: none;
  }

  .profile-item,
  .profile-button,
  .profile-list > button {
    display: flex;
    flex: 0 0 142px;
    min-height: 62px;
  }

  .profile-copy small,
  .profile-subtitle,
  .profile-text small {
    white-space: normal;
  }

  .machine-panel {
    flex: 1 0 425px;
    min-height: 425px;
  }

  .scene-frame {
    min-height: 330px;
  }

  .vm-scene {
    min-height: 0;
  }

  .vm-scene[data-profile="intro"][data-tutorial-layout="true"] .vm-svg,
  .vm-scene[data-profile="intro"][data-tutorial-layout="true"] .node-layer {
    bottom: 154px;
  }

  .lesson-dock {
    min-height: 136px;
  }

  .lesson-body {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .lesson-footer {
    flex-wrap: wrap;
  }

  .scene-legend {
    gap: 9px;
  }

  .timeline-panel {
    flex: 0 0 114px;
    min-height: 114px;
  }

  .timeline-help {
    display: none;
  }

  .trace-card,
  .timeline-card,
  .timeline-event,
  .trace-event {
    flex-basis: 116px;
  }

  .inspector-panel {
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: flex;
    flex: 0 0 auto;
    width: auto;
    max-height: none;
    visibility: visible;
    border: 0;
    border-radius: 0;
    opacity: 1;
    transform: none;
    box-shadow: 1px 1px 0 #cbc7bb inset, -1px -1px 0 #aaa69b inset;
    transition: none;
  }

  .inspector-panel > .panel-caption,
  .inspector-tabs,
  .inspector-content,
  .meter-rack,
  .equation-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .equation-panel {
    flex: 0 0 270px;
    height: 270px;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }

  .meter-rack {
    overflow: visible;
    border-left: 0;
  }

  .statusbar {
    grid-template-columns: 84px 92px minmax(100px, 1fr);
  }

  #status-zoom,
  .sound-toggle {
    display: none;
  }

  .config-drawer {
    position: fixed;
    z-index: 70;
    top: 0;
    bottom: 0;
    width: min(410px, 100%);
  }

  .drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 69;
  }

  .help-content {
    grid-template-columns: 1fr;
  }

  .recovery-lab-window {
    grid-template-rows: 42px auto minmax(0, 1fr) 27px;
  }

  .recovery-lab-toolbar {
    align-items: end;
    flex-wrap: wrap;
  }

  .recovery-lab-toolbar > label {
    flex: 1 1 180px;
  }

  .recovery-lab-toolbar select {
    width: 100%;
    min-width: 0;
  }

  .recovery-toolbar-actions {
    margin-left: 0;
  }

  .recovery-chart-bars {
    grid-template-columns: 1fr;
  }

  .recovery-chart-row {
    grid-template-columns: minmax(135px, 0.9fr) minmax(90px, 1fr) minmax(100px, 0.7fr);
  }

  .recovery-grid,
  .recovery-grid.count-2,
  .recovery-grid.count-3,
  .recovery-grid.count-4 {
    grid-template-columns: minmax(330px, 1fr);
  }

  .recovery-grid .recovery-card {
    min-height: 680px;
  }

  .toast {
    right: 12px;
    bottom: 35px;
    width: calc(100vw - 24px);
  }
}

@media (max-width: 470px) {
  .titlebar-copy h1 {
    font-size: 12px;
  }

  .author-credit-titlebar span {
    display: none;
  }

  .window-button-help {
    display: none;
  }

  .toolbar-transport .tool-button span:last-child,
  .configure-button span:last-child {
    display: none;
  }

  .toolbar-transport .tool-button,
  .configure-button {
    min-width: 42px;
    padding-right: 7px;
    padding-left: 7px;
  }

  .speed-control select {
    width: 59px;
  }

  .scene-legend span:nth-child(n + 4) {
    display: none;
  }

  .lesson-actions,
  .lesson-dots {
    flex-wrap: wrap;
  }

  .complexity-comparisons {
    grid-template-columns: 1fr;
  }

  .worked-row {
    grid-template-columns: 12px minmax(0, 1fr) 60px;
  }

  .dialog-window {
    width: calc(100vw - 16px);
  }

  .recovery-lab-titlebar p {
    display: none;
  }

  .recovery-scale {
    order: 3;
  }

  .recovery-toolbar-actions {
    margin-left: auto;
  }

  .recovery-chart-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .recovery-card-header {
    grid-template-columns: 12px minmax(90px, 1fr) auto 24px;
  }

  .recovery-card-header [data-recovery-action="clone"] {
    display: none;
  }

  .register-grid,
  .state-grid {
    grid-template-columns: 1fr;
  }

  .config-action-grid,
  .evidence-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

@media (prefers-contrast: more) {
  .vm-node,
  .diagram-node,
  .machine-node {
    border-width: 2px;
  }

  .edge,
  .vm-edge,
  .connection {
    stroke-width: 3;
  }

  .meter-track,
  .trace-card,
  .timeline-card,
  .timeline-event,
  .trace-event {
    border-color: #111;
  }
}

@media print {
  body {
    overflow: visible;
    background: #fff;
  }

  .toolbar,
  .statusbar,
  .timeline-panel,
  .pane-splitter,
  .config-drawer,
  .drawer-scrim,
  .recovery-lab-dialog {
    display: none !important;
  }

  .app-window {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  .workbench {
    grid-template-columns: 180px 1fr 260px;
    grid-template-rows: 640px;
    overflow: visible;
  }

  .profiles-panel { grid-column: 1; }
  .machine-panel { grid-column: 2; }
  .inspector-panel { grid-column: 3; }
}