.simulation-card {
  overflow: hidden;
}

.simulation-mount {
  display: grid;
  gap: var(--space-4);
}

.sim-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-5);
}

.sim-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
  padding: var(--space-4);
}

.sim-panel h4 {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.sim-control-group {
  display: grid;
  gap: var(--space-3);
}

.sim-label {
  display: grid;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--text-1);
}

.sim-input,
.sim-select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-1);
  color: var(--text-1);
}

.preset-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.preset-chip {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.03);
  color: var(--text-2);
  cursor: pointer;
}

.truthiness-result {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 1rem;
}

.truthiness-result.is-true {
  color: var(--accent-green);
}

.truthiness-result.is-false {
  color: var(--accent-red);
}

.truthiness-value {
  font-family: var(--font-mono);
  color: var(--accent-gold);
}

.is-coming-soon {
  opacity: 0.7;
}

@media (max-width: 860px) {
  .sim-grid {
    grid-template-columns: 1fr;
  }
}
.sim-code-block {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-1);
  font-family: var(--font-mono);
  white-space: pre-wrap;
}

.identity-scene {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.identity-vars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 140px));
  gap: var(--space-4);
  justify-content: center;
}

.identity-var {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.identity-var-name {
  min-width: 80px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(78, 161, 255, 0.08);
  color: var(--text-1);
  font-family: var(--font-mono);
}

.identity-arrow {
  color: var(--accent-gold);
  font-size: 1.25rem;
}

.identity-objects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.identity-objects-shared {
  grid-template-columns: 1fr;
  max-width: 320px;
  margin: 0 auto;
}

.identity-object {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
}

.identity-object.is-shared {
  border-color: rgba(61, 220, 151, 0.5);
  background: rgba(61, 220, 151, 0.08);
}

.identity-object-meta {
  color: var(--text-3);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.identity-object-value,
.identity-object-id {
  font-family: var(--font-mono);
}

.identity-object-value {
  color: var(--accent-gold);
}

.identity-object-id {
  color: var(--text-3);
  font-size: 0.9rem;
}

.identity-results {
  display: grid;
  gap: 12px;
  margin-bottom: var(--space-4);
}

.identity-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.identity-result-key {
  font-family: var(--font-mono);
  color: var(--text-1);
}

.identity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  border: 1px solid var(--line-strong);
}

.identity-badge.is-true {
  color: var(--accent-green);
}

.identity-badge.is-false {
  color: var(--accent-red);
}

@media (max-width: 860px) {
  .identity-vars,
  .identity-objects {
    grid-template-columns: 1fr;
  }
}
.lab-result-grid {
  display: grid;
  gap: 12px;
}

.lab-result-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.lab-key {
  color: var(--text-3);
  font-weight: 600;
}

.lab-value {
  color: var(--text-1);
  text-align: right;
}

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

.preserve-newlines {
  white-space: pre-wrap;
}

@media (max-width: 700px) {
  .lab-result-row {
    flex-direction: column;
  }

  .lab-value {
    text-align: left;
  }
}
/* Page 01 */
.runtime-name-row,
.runtime-name-map,
.runtime-graph-names {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.runtime-name-map-row,
.runtime-graph-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.runtime-name-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(78, 161, 255, 0.08);
  color: var(--text-1);
  font-family: var(--font-mono);
}

.runtime-name-target,
.runtime-arrow {
  color: var(--accent-gold);
  font-family: var(--font-mono);
}

.runtime-object-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.runtime-object-grid.single {
  grid-template-columns: 1fr;
  max-width: 320px;
}

.runtime-object {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  gap: 8px;
}

.runtime-object.is-shared {
  border-color: rgba(61, 220, 151, 0.55);
  background: rgba(61, 220, 151, 0.08);
}

.runtime-object-id {
  color: var(--text-3);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.runtime-object-value {
  color: var(--accent-gold);
  font-family: var(--font-mono);
}

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

.runtime-state-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.runtime-graph-grid {
  display: grid;
  gap: 16px;
}

.runtime-nested-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.runtime-nested-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.runtime-nested-title {
  color: var(--text-3);
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

.runtime-nested-value {
  color: var(--accent-gold);
  font-family: var(--font-mono);
}

@media (max-width: 860px) {
  .runtime-object-grid,
  .runtime-two-state-grid,
  .runtime-nested-preview {
    grid-template-columns: 1fr;
  }
}


.slice-sequence-board {
  display: grid;
  gap: 10px;
  margin: 18px 0 20px;
}

.slice-index-row,
.slice-item-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.slice-index-chip,
.slice-item-chip {
  min-width: 56px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-1);
  font-family: var(--font-mono);
}

button.slice-index-chip,
button.slice-item-chip {
  cursor: pointer;
}

.slice-index-chip {
  color: var(--text-3);
}

.slice-index-row.is-negative .slice-index-chip {
  color: var(--text-3);
}

.slice-index-chip.is-active,
.slice-item-chip.is-active {
  border-color: rgba(110, 168, 254, 0.85);
  background: rgba(110, 168, 254, 0.12);
  color: var(--text-1);
}

.slice-item-chip.is-active {
  box-shadow: inset 0 0 0 1px rgba(110, 168, 254, 0.18);
}

.slice-fields-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 10px 12px;
  align-items: center;
}

.slice-omit-row {
  min-height: 42px;
}

.slice-error-badge {
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-weight: 700;
}

.behavior-choice-row {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}

.behavior-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}

.behavior-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  display: grid;
  gap: 10px;
}

.behavior-expression {
  color: var(--text-1);
}

.behavior-outcome {
  color: var(--accent-gold);
  font-family: var(--font-mono);
  font-size: 1rem;
}

.behavior-outcome.is-error {
  color: var(--accent-red);
}

.slice-callout {
  margin-top: 16px;
}

@media (max-width: 700px) {
  .slice-fields-grid,
  .behavior-compare-grid {
    grid-template-columns: 1fr;
  }
}


.comprehension-trace-panel {
  margin-top: 16px;
}

.comprehension-trace-list {
  display: grid;
  gap: 10px;
}

.comprehension-trace-row,
.translator-focus-row,
.recipe-choice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}

.comprehension-trace-row.is-kept {
  border-color: rgba(61, 220, 151, 0.35);
  background: rgba(61, 220, 151, 0.08);
}

.comprehension-trace-row.is-skipped {
  opacity: 0.78;
}

.comprehension-trace-source,
.comprehension-trace-result,
.comprehension-trace-arrow,
.recipe-feedback,
.recipe-lab-value {
  font-family: var(--font-mono);
}

.comprehension-trace-status {
  min-width: 68px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}

.comprehension-trace-arrow {
  color: var(--accent-gold);
}

.translator-focus-row.is-active,
.recipe-choice-row.is-active {
  border-color: rgba(110, 168, 254, 0.7);
  background: rgba(110, 168, 254, 0.09);
}

.translator-alignment-panel {
  margin-top: 16px;
}

.recipe-feedback.is-correct {
  color: var(--accent-green);
}

.recipe-feedback.is-incorrect {
  color: var(--accent-red);
}


.unpack-choice-row.is-active {
  border-color: rgba(110, 168, 254, 0.7);
  background: rgba(110, 168, 254, 0.09);
}

.unpack-bindings-grid,
.call-map-grid,
.merge-results-grid {
  display: grid;
  gap: 12px;
}

.unpack-binding-card,
.call-map-row,
.merge-row {
  display: grid;
  grid-template-columns: minmax(90px, 140px) auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}

.unpack-binding-card {
  grid-template-columns: minmax(90px, 140px) auto 1fr;
}

.unpack-binding-card.is-star {
  border-color: rgba(61, 220, 151, 0.35);
  background: rgba(61, 220, 151, 0.08);
}

.unpack-binding-name,
.unpack-binding-value,
.call-map-name,
.call-map-value,
.call-map-source,
.merge-key,
.merge-state,
.merge-final {
  font-family: var(--font-mono);
}

.unpack-binding-arrow,
.call-map-arrow {
  color: var(--accent-gold);
  font-family: var(--font-mono);
}

.call-map-row.is-default {
  opacity: 0.78;
}

.call-map-source {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}

.merge-row.is-overridden {
  border-color: rgba(255, 204, 77, 0.45);
  background: rgba(255, 204, 77, 0.08);
}

.merge-row.is-added {
  border-color: rgba(61, 220, 151, 0.35);
  background: rgba(61, 220, 151, 0.08);
}

.merge-row.is-kept {
  border-color: rgba(110, 168, 254, 0.35);
  background: rgba(110, 168, 254, 0.07);
}

.unpack-callout {
  margin-top: 16px;
}

@media (max-width: 860px) {
  .unpack-binding-card,
  .call-map-row,
  .merge-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
}


.unpack-bindings-grid,
.match-binding-grid {
  display: grid;
  gap: 12px;
}

.unpack-binding-card {
  display: grid;
  grid-template-columns: minmax(80px, 140px) 24px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}

.unpack-binding-card.is-star {
  border-color: rgba(78, 161, 255, 0.45);
  background: rgba(78, 161, 255, 0.08);
}

.unpack-binding-name,
.unpack-binding-value,
.unpack-binding-arrow,
.match-case-code code {
  font-family: var(--font-mono);
}

.unpack-binding-name {
  color: var(--text-1);
}

.unpack-binding-arrow {
  color: var(--accent-gold);
  text-align: center;
}

.unpack-binding-value {
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.match-case-list,
.ordering-controls,
.comparator-grid {
  display: grid;
  gap: 12px;
}

.match-case-card,
.compare-card,
.ordering-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

.match-case-card,
.compare-card {
  padding: 12px;
}

.match-case-card.is-matched {
  border-color: rgba(61, 220, 151, 0.5);
  background: rgba(61, 220, 151, 0.08);
}

.match-case-status {
  margin-top: 10px;
  color: var(--text-3);
  font-size: 0.9rem;
}

.match-case-status.is-hit {
  color: var(--accent-green);
  font-weight: 600;
}

.ordering-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.ordering-title {
  font-family: var(--font-mono);
  color: var(--text-1);
}

.ordering-buttons {
  display: flex;
  gap: 8px;
}

.btn-compact {
  min-height: 34px;
  padding: 0 10px;
}

.compact-grid .unpack-binding-card {
  grid-template-columns: minmax(68px, 120px) 24px 1fr;
}

.match-note {
  margin-top: 12px;
}

@media (max-width: 860px) {
  .unpack-binding-card,
  .compact-grid .unpack-binding-card,
  .ordering-row {
    grid-template-columns: 1fr;
  }

  .ordering-row {
    display: grid;
  }
}


.pipeline-step-list {
  display: grid;
  gap: 12px;
}

.pipeline-step-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.pipeline-step-title {
  font-weight: 700;
  color: var(--text-1);
}

.pipeline-final-callout {
  margin-top: 14px;
}

.code-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.is-preferred-style {
  border-color: rgba(61, 220, 151, 0.45);
  background: rgba(61, 220, 151, 0.08);
}

@media (max-width: 860px) {
  .code-compare-grid {
    grid-template-columns: 1fr;
  }
}