Spaces:
Running
Running
| main { | |
| max-width: 64rem; | |
| margin: 0 auto; | |
| padding: 2rem 1rem 3rem; | |
| display: grid; | |
| gap: 1rem; | |
| } | |
| .wordmark { | |
| font-weight: 650; | |
| font-size: 1.125rem; | |
| } | |
| .engine { | |
| display: grid; | |
| gap: 0.375rem; | |
| } | |
| .level { | |
| --level: 0; | |
| height: 0.375rem; | |
| border-radius: 999px; | |
| background: linear-gradient(var(--accent), var(--accent)) no-repeat left / calc(var(--level) * 100%) 100%, var(--surface); | |
| } | |
| .hearing, | |
| .conversation p { | |
| margin: 0; | |
| } | |
| .hearing:empty { | |
| display: none; | |
| } | |
| .table { | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.85rem; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| th, | |
| td { | |
| padding: 0.375rem 0.5rem; | |
| border-bottom: 1px solid var(--hairline); | |
| text-align: right; | |
| white-space: nowrap; | |
| } | |
| th:first-child, | |
| td:first-child { | |
| text-align: left; | |
| } | |
| thead th { | |
| color: var(--ink-soft); | |
| font-weight: 550; | |
| cursor: help; | |
| } | |
| td:nth-child(2), | |
| tfoot td, | |
| tfoot th { | |
| font-weight: 650; | |
| } | |
| .conversation { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 1rem; | |
| } | |
| .conversation li { | |
| display: grid; | |
| gap: 0.25rem; | |
| } | |
| .caller { | |
| color: var(--ink-soft); | |
| } | |
| .caller::before { | |
| content: "You: "; | |
| font-weight: 650; | |
| } | |
| .assistant::before { | |
| content: "Assistant: "; | |
| font-weight: 650; | |
| color: var(--accent); | |
| } | |
| fieldset { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| display: grid; | |
| gap: 0.5rem; | |
| } | |
| legend { | |
| padding: 0; | |
| margin-bottom: 0.5rem; | |
| color: var(--ink-soft); | |
| font-size: 0.875rem; | |
| } | |
| .voices { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .voice input { | |
| position: absolute; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .voice span { | |
| display: block; | |
| border: 1px solid var(--hairline); | |
| border-radius: 999px; | |
| padding: 0.375rem 0.875rem; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: background-color 0.2s, color 0.2s, border-color 0.2s; | |
| } | |
| .voice input:checked + span { | |
| background: var(--ink); | |
| border-color: var(--ink); | |
| color: var(--canvas); | |
| } | |
| .voice input:focus-visible + span { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |