| :root { |
| --bg: #f7f8f5; |
| --ink: #111412; |
| --muted: #69736c; |
| --faint: #a1aaa3; |
| --line: #d9ded7; |
| --panel: #ffffff; |
| --accent: #186a5b; |
| --accent-2: #285caa; |
| --danger: #9f2e2e; |
| --mono: |
| "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, |
| "Liberation Mono", monospace; |
| --shadow: 0 20px 70px rgba(22, 27, 24, 0.11); |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html, |
| body { |
| margin: 0; |
| min-height: 100%; |
| } |
|
|
| body { |
| background: var(--bg); |
| color: var(--ink); |
| font-family: var(--mono); |
| } |
|
|
| button, |
| input, |
| textarea { |
| font: inherit; |
| } |
|
|
| button { |
| border: 0; |
| border-radius: 7px; |
| background: var(--ink); |
| color: white; |
| cursor: pointer; |
| min-height: 40px; |
| padding: 0 16px; |
| } |
|
|
| button:hover { |
| background: #2a302c; |
| } |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| .auth-view { |
| min-height: 100vh; |
| display: grid; |
| place-items: center; |
| padding: 24px; |
| } |
|
|
| .auth-panel { |
| width: min(420px, 100%); |
| background: var(--panel); |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| box-shadow: var(--shadow); |
| padding: 22px; |
| } |
|
|
| .auth-panel label { |
| display: block; |
| color: var(--muted); |
| font-size: 13px; |
| margin-bottom: 8px; |
| } |
|
|
| .auth-row { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| gap: 10px; |
| } |
|
|
| .auth-row input { |
| min-width: 0; |
| height: 42px; |
| border: 1px solid var(--line); |
| border-radius: 7px; |
| color: var(--ink); |
| padding: 0 12px; |
| } |
|
|
| .auth-row input:focus, |
| .composer-input:focus { |
| outline: 2px solid rgba(40, 92, 170, 0.26); |
| outline-offset: 2px; |
| } |
|
|
| .error-line { |
| min-height: 20px; |
| margin: 10px 0 0; |
| color: var(--danger); |
| font-size: 13px; |
| } |
|
|
| .app { |
| min-height: 100vh; |
| width: min(920px, 100%); |
| margin: 0 auto; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| gap: 24px; |
| padding: clamp(22px, 5vw, 72px); |
| } |
|
|
| .app-header { |
| width: 100%; |
| max-width: 640px; |
| } |
|
|
| .app-header h1 { |
| margin: 0; |
| color: var(--ink); |
| font-size: 20px; |
| font-weight: 700; |
| line-height: 1.25; |
| letter-spacing: 0; |
| } |
|
|
| .app-header p { |
| margin: 6px 0 0; |
| color: var(--muted); |
| font-size: 13px; |
| line-height: 1.45; |
| } |
|
|
| .submission-context { |
| max-width: 100%; |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.55; |
| } |
|
|
| .submission-context p { |
| margin: 0; |
| } |
|
|
| .submission-context p + p { |
| margin-top: 10px; |
| } |
|
|
| .submission-lede { |
| color: var(--ink); |
| font-weight: 700; |
| } |
|
|
| .demo-instructions { |
| margin-bottom: 14px; |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.55; |
| } |
|
|
| .demo-instructions p { |
| margin: 0; |
| } |
|
|
| .page-tabs { |
| width: max-content; |
| max-width: 100%; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 4px; |
| border: 1px solid var(--line); |
| border-radius: 7px; |
| padding: 3px; |
| background: rgba(255, 255, 255, 0.5); |
| } |
|
|
| .page-tab { |
| min-height: 32px; |
| border-radius: 5px; |
| padding: 0 12px; |
| background: transparent; |
| color: var(--muted); |
| font-size: 12px; |
| white-space: nowrap; |
| } |
|
|
| .page-tab:hover { |
| background: rgba(17, 20, 18, 0.06); |
| color: var(--ink); |
| } |
|
|
| .page-tab.active { |
| background: var(--ink); |
| color: white; |
| } |
|
|
| .tab-panel { |
| width: 100%; |
| } |
|
|
| .tab-panel[data-panel="overview"], |
| .tab-panel[data-panel="demo"], |
| .tab-panel[data-panel="report"] { |
| max-width: 640px; |
| } |
|
|
| .technical-report { |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.6; |
| } |
|
|
| .technical-report h2, |
| .technical-report h3, |
| .technical-report h4 { |
| margin: 0; |
| color: var(--ink); |
| letter-spacing: 0; |
| } |
|
|
| .technical-report h2 { |
| font-size: 18px; |
| line-height: 1.3; |
| } |
|
|
| .technical-report h3 { |
| margin-top: 24px; |
| font-size: 13px; |
| line-height: 1.35; |
| } |
|
|
| .technical-report h4 { |
| margin-top: 18px; |
| font-size: 12px; |
| line-height: 1.35; |
| } |
|
|
| .technical-report p, |
| .technical-report ul, |
| .technical-report pre, |
| .technical-report .report-figures, |
| .technical-report .reward-distribution-strip { |
| margin: 10px 0 0; |
| } |
|
|
| .technical-report ul { |
| padding-left: 18px; |
| } |
|
|
| .technical-report li + li { |
| margin-top: 5px; |
| } |
|
|
| .technical-report code { |
| color: var(--ink); |
| font-family: var(--mono); |
| font-size: 0.95em; |
| } |
|
|
| .technical-report pre { |
| overflow-x: auto; |
| border-left: 2px solid var(--line); |
| padding: 10px 0 10px 14px; |
| color: var(--ink); |
| white-space: pre; |
| } |
|
|
| .report-byline { |
| color: var(--faint); |
| } |
|
|
| .report-figures { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .report-figures-single { |
| grid-template-columns: minmax(0, 1fr); |
| } |
|
|
| .report-figures figure { |
| margin: 0; |
| } |
|
|
| .report-figures img { |
| display: block; |
| width: 100%; |
| height: auto; |
| border: 1px solid var(--line); |
| border-radius: 7px; |
| background: #050505; |
| } |
|
|
| .report-figures figcaption { |
| margin-top: 6px; |
| color: var(--muted); |
| font-size: 11px; |
| line-height: 1.45; |
| } |
|
|
| .reward-distribution-strip { |
| display: grid; |
| grid-auto-flow: column; |
| grid-auto-columns: minmax(230px, 72%); |
| gap: 10px; |
| overflow-x: auto; |
| padding-bottom: 4px; |
| } |
|
|
| .reward-distribution-strip figure { |
| margin: 0; |
| } |
|
|
| .reward-distribution-strip img { |
| display: block; |
| width: 100%; |
| height: auto; |
| border: 1px solid var(--line); |
| border-radius: 7px; |
| background: #050505; |
| } |
|
|
| .reward-distribution-strip figcaption { |
| margin-top: 6px; |
| color: var(--muted); |
| font-size: 11px; |
| line-height: 1.45; |
| } |
|
|
| .mode-switch { |
| width: max-content; |
| max-width: 100%; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 4px; |
| border: 1px solid var(--line); |
| border-radius: 7px; |
| padding: 3px; |
| background: rgba(255, 255, 255, 0.5); |
| } |
|
|
| .mode-option { |
| min-height: 30px; |
| border-radius: 5px; |
| padding: 0 10px; |
| background: transparent; |
| color: var(--muted); |
| font-size: 12px; |
| white-space: nowrap; |
| } |
|
|
| .mode-option:hover { |
| background: rgba(17, 20, 18, 0.06); |
| color: var(--ink); |
| } |
|
|
| .mode-option.active { |
| background: var(--ink); |
| color: white; |
| } |
|
|
| .mode-option:disabled { |
| cursor: progress; |
| opacity: 0.72; |
| } |
|
|
| .workspace { |
| width: 100%; |
| min-width: 0; |
| align-self: stretch; |
| margin-top: 24px; |
| } |
|
|
| .history { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| margin-bottom: 26px; |
| } |
|
|
| .history.empty { |
| display: none; |
| } |
|
|
| .history-line { |
| display: grid; |
| grid-template-columns: 82px minmax(0, 1fr); |
| gap: 12px; |
| color: var(--ink); |
| font-size: 13px; |
| line-height: 1.5; |
| } |
|
|
| .history-role { |
| color: var(--faint); |
| text-align: right; |
| } |
|
|
| .history-content { |
| min-width: 0; |
| white-space: pre-wrap; |
| overflow-wrap: anywhere; |
| } |
|
|
| .history-line.assistant .history-content { |
| color: var(--muted); |
| } |
|
|
| .composer-shell { |
| position: relative; |
| width: 100%; |
| min-height: 78px; |
| border-bottom: 2px solid var(--ink); |
| transition: opacity 160ms ease; |
| } |
|
|
| .app.locked .composer-shell { |
| opacity: 0.72; |
| } |
|
|
| .composer-mirror, |
| .composer-input { |
| width: 100%; |
| min-height: 78px; |
| margin: 0; |
| border: 0; |
| padding: 8px 0 18px; |
| background: transparent; |
| font-family: var(--mono); |
| font-size: 28px; |
| line-height: 1.45; |
| letter-spacing: 0; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
|
|
| .composer-mirror { |
| pointer-events: none; |
| } |
|
|
| .composer-input { |
| position: absolute; |
| inset: 0; |
| overflow: hidden; |
| resize: none; |
| color: transparent; |
| caret-color: var(--ink); |
| } |
|
|
| .composer-input:disabled { |
| cursor: progress; |
| } |
|
|
| .composer-input::selection { |
| background: rgba(40, 92, 170, 0.24); |
| color: transparent; |
| } |
|
|
| .predicted-text { |
| color: var(--faint); |
| } |
|
|
| .thinking.active { |
| display: inline-flex; |
| gap: 0.03em; |
| margin-left: 0.16em; |
| color: var(--faint); |
| } |
|
|
| .thinking span { |
| display: inline-block; |
| animation: dot-wave 1.05s ease-in-out infinite; |
| } |
|
|
| .thinking span:nth-child(2) { |
| animation-delay: 0.12s; |
| } |
|
|
| .thinking span:nth-child(3) { |
| animation-delay: 0.24s; |
| } |
|
|
| @keyframes dot-wave { |
| 0%, |
| 72%, |
| 100% { |
| opacity: 0.28; |
| transform: translateY(0); |
| } |
|
|
| 28% { |
| opacity: 1; |
| transform: translateY(-0.14em); |
| } |
| } |
|
|
| .assistant-response { |
| min-height: 96px; |
| width: 100%; |
| margin-top: 28px; |
| color: var(--muted); |
| font-size: 19px; |
| line-height: 1.55; |
| white-space: pre-wrap; |
| overflow-wrap: anywhere; |
| } |
|
|
| .assistant-response.ready { |
| color: var(--ink); |
| font-weight: 700; |
| } |
|
|
| .assistant-response.error { |
| color: var(--danger); |
| font-weight: 600; |
| } |
|
|
| .calls { |
| width: 100%; |
| display: flex; |
| flex-direction: column; |
| border-top: 1px solid var(--line); |
| padding-top: 14px; |
| } |
|
|
| .calls-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| color: var(--muted); |
| font-size: 13px; |
| margin-bottom: 10px; |
| } |
|
|
| .calls-title { |
| display: flex; |
| align-items: baseline; |
| flex-wrap: wrap; |
| min-width: 0; |
| gap: 6px 14px; |
| } |
|
|
| .latency-average, |
| .accuracy-average { |
| color: var(--faint); |
| font-size: 12px; |
| white-space: nowrap; |
| } |
|
|
| .calls-header button { |
| min-height: 26px; |
| padding: 0 8px; |
| background: transparent; |
| border: 1px solid var(--line); |
| border-radius: 5px; |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .calls-header button:hover { |
| color: var(--ink); |
| border-color: var(--faint); |
| } |
|
|
| .call-list { |
| max-height: 230px; |
| overflow-y: auto; |
| display: flex; |
| flex-direction: column; |
| gap: 3px; |
| padding-right: 6px; |
| } |
|
|
| .call-item { |
| display: flex; |
| align-items: baseline; |
| min-width: 0; |
| color: #778178; |
| font-size: 12px; |
| line-height: 1.55; |
| white-space: nowrap; |
| } |
|
|
| .call-prompt { |
| flex: 0 0 auto; |
| color: var(--accent); |
| margin-right: 8px; |
| } |
|
|
| .call-label { |
| flex: 0 0 auto; |
| color: var(--ink); |
| font-weight: 650; |
| margin-right: 8px; |
| } |
|
|
| .call-meta { |
| flex: 0 0 auto; |
| color: var(--muted); |
| margin-right: 8px; |
| } |
|
|
| .call-separator { |
| flex: 0 0 auto; |
| color: var(--line); |
| margin-right: 8px; |
| } |
|
|
| .call-preview { |
| min-width: 0; |
| overflow: hidden; |
| color: var(--faint); |
| text-overflow: ellipsis; |
| } |
|
|
| .call-item.running .call-meta { |
| color: var(--accent-2); |
| } |
|
|
| .call-item.done .call-meta { |
| color: var(--accent); |
| } |
|
|
| .call-item.error .call-meta, |
| .call-item.canceled .call-meta { |
| color: var(--danger); |
| } |
|
|
| @media (max-width: 860px) { |
| .app { |
| gap: 26px; |
| padding: 24px; |
| } |
|
|
| .workspace { |
| align-self: stretch; |
| } |
|
|
| .composer-mirror, |
| .composer-input { |
| font-size: 23px; |
| } |
|
|
| .calls { |
| max-height: 34vh; |
| } |
|
|
| .page-tabs, |
| .mode-switch { |
| width: 100%; |
| } |
|
|
| .page-tab, |
| .mode-option { |
| flex: 1 1 auto; |
| padding: 0 8px; |
| font-size: 11px; |
| } |
|
|
| .report-figures { |
| grid-template-columns: minmax(0, 1fr); |
| } |
| } |
|
|
