Spaces:
Running
Running
| .gradio-container { width: 100%; min-width: 0 ; max-width: 1800px ; 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 ; width: 100%; } | |
| #workspace > .block { min-height: 418px; } | |
| #workspace .cm-editor { height: 390px; } | |
| #workspace .cm-scroller { overflow: auto ; } | |
| #workspace .cm-content { white-space: pre ; } | |
| #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 ; } | |
| #seed-table { overflow-x: auto ; } | |
| .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 ; } } | |