.gradio-container { width: 100%; min-width: 0 !important; max-width: 1800px !important; margin: auto; }
#intro { margin-bottom: 0; }
#intro h1 { font-size: 1.65rem; letter-spacing: -.025em; }
#scope { font-size: .85rem; color: var(--body-text-color-subdued); }
.example-description p { font-size: .85rem; color: var(--body-text-color-subdued); }
.example-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .85rem; color: var(--body-text-color-subdued); }
[id^="examples-group-"] .gallery-item[data-expected-result] {
  color: var(--example-color); background: var(--example-background);
  border: 1px solid var(--example-color); }
[id^="examples-group-"] .gallery-item[data-expected-result] * { color: inherit; }
.gallery-item[data-expected-result="agree"] { --example-color: #166534; --example-background: #dcfce7; }
.gallery-item[data-expected-result="mismatch"] { --example-color: #991b1b; --example-background: #fee2e2; }
.gallery-item[data-expected-result="inconclusive"], .gallery-item[data-expected-result="error"] {
  --example-color: #854d0e; --example-background: #fef3c7; }
.dark .gallery-item[data-expected-result="agree"] { --example-color: #86efac; --example-background: #143b2b; }
.dark .gallery-item[data-expected-result="mismatch"] { --example-color: #fca5a5; --example-background: #451d26; }
.dark .gallery-item[data-expected-result="inconclusive"], .dark .gallery-item[data-expected-result="error"] {
  --example-color: #fde68a; --example-background: #423519; }
[id^="examples-group-"] .gallery-item[data-expected-result]:hover { filter: brightness(.95); }
[id^="examples-group-"] .gallery-item[data-expected-result]:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px; }
#setup { align-items: stretch; }
#binary { min-height: 110px; }
#binary .wrap { min-height: 72px; }
#actions { gap: 8px; }
#actions button { flex: 0 1 160px; min-width: 160px; white-space: nowrap; }
#workspace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#workspace.has-reference { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#workspace > * { min-width: 0 !important; width: 100%; }
#workspace > .block { min-height: 418px; }
#workspace .cm-editor { height: 390px; }
#workspace .cm-scroller { overflow: auto !important; }
#workspace .cm-content { white-space: pre !important; }
#workspace .cm-line { line-height: 1.45; }
#workspace .cm-gutters { line-height: 1.45; }
#workspace .cm-editor, #workspace .cm-scroller { font-size: 12px; }
#workspace .cm-scroller:focus-visible, #workspace button:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: -2px;
}
.run-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 44px;
  padding: 10px 12px; border: 1px solid var(--border-color-primary); border-radius: 8px;
  background: var(--block-background-fill); }
.indicator { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px;
  border-radius: 5px; font-size: .9rem; font-weight: 600; }
.indicator::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.green { color: #166534; background: #dcfce7; }
.red { color: #991b1b; background: #fee2e2; }
.amber { color: #854d0e; background: #fef3c7; }
.dark .green { color: #86efac; background: #143b2b; }
.dark .red { color: #fca5a5; background: #451d26; }
.dark .amber { color: #fde68a; background: #423519; }
.counts, .muted { color: var(--body-text-color-subdued); font-size: .85rem; }
.abi-details { display: grid; grid-template-columns: 1fr 1.4fr .7fr; gap: 24px; padding: 16px 2px 4px;
  font-size: .85rem; color: var(--body-text-color); }
.abi-details > div { min-width: 0; overflow-x: auto; }
.section-label { font-weight: 600; margin: 0 0 6px; }
.abi-details table, .literal-details table { border-collapse: collapse; width: 100%; text-align: left; }
.abi-details th, .abi-details td, .literal-details th, .literal-details td { padding: 4px 12px 4px 0; vertical-align: top; }
.abi-details th, .literal-details th { font-weight: 500; color: var(--body-text-color-subdued); }
.abi-details code, .mismatch-summary code, .literal-details code { font-family: var(--font-mono); }
.literal-details { margin-top: 12px; overflow-x: auto; font-size: .85rem; }
.literal-details summary { cursor: pointer; color: var(--body-text-color-subdued); }
.abi-details p { margin-top: 0; }
#results { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
#results > * { min-width: 0 !important; }
#seed-table { overflow-x: auto !important; }
.mismatch-summary { margin: 0; color: var(--body-text-color); }
.mismatch-summary > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border-color-primary); }
.mismatch-summary dt { color: var(--body-text-color-subdued); font-size: .85rem; }
.mismatch-summary dd { margin: 0; overflow-wrap: anywhere; }
:is(#candidate-source, #original-assembly, #candidate-assembly) .cm-line.memory-writer-line {
    background: rgba(245, 158, 11, .18);
    box-shadow: inset 3px 0 #d97706;
}
@media (max-width: 1099px) {
  #workspace, #workspace.has-reference { grid-template-columns: minmax(0, 1fr); }
  #workspace > .block { min-height: 328px; }
  #workspace .cm-editor { height: 300px; }
  .abi-details { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 800px) { #results { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }