Spaces:
Running
Running
| :root { | |
| color-scheme: dark; | |
| --ink: #141613; | |
| --ink-raised: #1b1e1a; | |
| --ink-soft: #252921; | |
| --paper: #f1f2ed; | |
| --paper-deep: #e4e6df; | |
| --paper-ghost: rgba(241, 242, 237, 0.64); | |
| --phosphor: #a8d574; | |
| --phosphor-dim: rgba(168, 213, 116, 0.14); | |
| --moss: #738066; | |
| --rust: #c27a56; | |
| --line-light: rgba(241, 242, 237, 0.13); | |
| --line-dark: rgba(20, 22, 19, 0.15); | |
| --display: "Avenir Next", "Helvetica Neue", ui-sans-serif, sans-serif; | |
| --body: "Avenir Next", "Helvetica Neue", ui-sans-serif, sans-serif; | |
| --mono: "Berkeley Mono", Iosevka, "SFMono-Regular", Consolas, monospace; | |
| --type-utility: clamp(0.75rem, 0.12vw + 0.72rem, 0.8125rem); | |
| --type-caption: clamp(0.8125rem, 0.15vw + 0.77rem, 0.9375rem); | |
| --type-body: clamp(1.0625rem, 0.18vw + 1.02rem, 1.1875rem); | |
| --type-heading: clamp(1.55rem, 0.85vw + 1.35rem, 2.15rem); | |
| font-family: var(--body); | |
| font-synthesis: none; | |
| text-rendering: optimizeLegibility; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| background: var(--ink); | |
| } | |
| body { | |
| margin: 0; | |
| min-width: 320px; | |
| min-height: 100vh; | |
| background: var(--ink); | |
| color: var(--paper); | |
| font-size: var(--type-body); | |
| } | |
| button, | |
| textarea, | |
| select { | |
| font: inherit; | |
| } | |
| button { | |
| color: inherit; | |
| } | |
| button:focus-visible, | |
| textarea:focus-visible, | |
| select:focus-visible, | |
| summary:focus-visible { | |
| outline: 2px solid var(--phosphor); | |
| outline-offset: 3px; | |
| } | |
| button:disabled { | |
| cursor: not-allowed; | |
| } | |
| ::selection { | |
| color: var(--ink); | |
| background: var(--phosphor); | |
| } | |
| .station-frame { | |
| --canvas-bg: #f3f6f2; | |
| --canvas-raised: #e9eee8; | |
| --canvas-field: #fbfdfb; | |
| --canvas-text: #1a211c; | |
| --canvas-muted: rgba(26, 33, 28, 0.58); | |
| --canvas-line: rgba(26, 33, 28, 0.14); | |
| --shell-panel: #fbfdfb; | |
| --shell-raised: #f0f4ef; | |
| --shell-text: #1a211c; | |
| --shell-muted: rgba(26, 33, 28, 0.58); | |
| --shell-line: rgba(26, 33, 28, 0.14); | |
| --shell-accent: #668b48; | |
| --shell-accent-dim: rgba(102, 139, 72, 0.12); | |
| --shell-warning: #a95535; | |
| min-height: 100dvh; | |
| color: var(--shell-text); | |
| background: var(--canvas-bg); | |
| color-scheme: light; | |
| isolation: isolate; | |
| animation: station-in 580ms cubic-bezier(.16, 1, .3, 1) both; | |
| } | |
| .station-frame[data-theme="dark"] { | |
| --canvas-bg: #151915; | |
| --canvas-raised: #1b201b; | |
| --canvas-field: #202620; | |
| --canvas-text: #edf1eb; | |
| --canvas-muted: rgba(237, 241, 235, 0.58); | |
| --canvas-line: rgba(237, 241, 235, 0.13); | |
| --shell-panel: #111511; | |
| --shell-raised: #1a1f1a; | |
| --shell-text: #edf1eb; | |
| --shell-muted: rgba(237, 241, 235, 0.58); | |
| --shell-line: rgba(237, 241, 235, 0.13); | |
| --shell-accent: #a8d574; | |
| --shell-accent-dim: rgba(168, 213, 116, 0.14); | |
| --shell-warning: #df8963; | |
| color-scheme: dark; | |
| } | |
| .station-frame::before { | |
| display: none; | |
| } | |
| .station-header { | |
| min-height: 64px; | |
| display: grid; | |
| grid-template-columns: 260px minmax(320px, 1fr) auto; | |
| align-items: stretch; | |
| color: var(--shell-text); | |
| background: var(--shell-panel); | |
| border-bottom: 1px solid var(--shell-line); | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .brand-block { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| padding: 10px 18px; | |
| border-right: 1px solid var(--shell-line); | |
| } | |
| .brand-block h1 { | |
| margin: 0; | |
| font: 650 20px/1.1 var(--display); | |
| letter-spacing: -0.02em; | |
| } | |
| .brand-block > div { | |
| display: grid; | |
| gap: 2px; | |
| } | |
| .brand-block > div > span { | |
| color: var(--shell-muted); | |
| font-size: var(--type-caption); | |
| } | |
| .brand-glyph { | |
| width: 34px; | |
| height: 34px; | |
| flex: 0 0 34px; | |
| display: grid; | |
| place-items: center; | |
| color: var(--shell-accent); | |
| border: 1px solid color-mix(in srgb, var(--shell-accent) 46%, transparent); | |
| border-radius: 8px; | |
| font: 650 16px/1 var(--mono); | |
| } | |
| .brand-mark::before, | |
| .brand-mark::after, | |
| .brand-mark span::before, | |
| .brand-mark span::after { | |
| position: absolute; | |
| content: ""; | |
| width: 1px; | |
| background: var(--phosphor); | |
| transform-origin: bottom; | |
| } | |
| .brand-mark::before { | |
| height: 25px; | |
| transform: translate(-1px, 4px) rotate(0deg); | |
| } | |
| .brand-mark::after { | |
| height: 13px; | |
| transform: translate(4px, -2px) rotate(43deg); | |
| } | |
| .brand-mark span::before { | |
| height: 11px; | |
| transform: translate(-5px, -1px) rotate(-47deg); | |
| } | |
| .brand-mark span::after { | |
| height: 8px; | |
| transform: translate(3px, -9px) rotate(72deg); | |
| } | |
| .eyebrow { | |
| margin: 0 0 5px; | |
| color: rgba(232, 223, 202, 0.52); | |
| font: 600 var(--type-utility)/1 var(--mono); | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| } | |
| .eyebrow.ink { | |
| color: rgba(17, 21, 18, 0.52); | |
| } | |
| .browser-notice { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-width: 0; | |
| padding: 0 20px; | |
| } | |
| .notice-mark { | |
| width: 6px; | |
| height: 6px; | |
| flex: 0 0 6px; | |
| border-radius: 2px; | |
| background: var(--shell-accent); | |
| } | |
| .browser-notice > span:last-child { | |
| display: grid; | |
| gap: 2px; | |
| } | |
| .browser-notice strong { | |
| color: var(--shell-text); | |
| font: 600 var(--type-caption)/1.2 var(--body); | |
| } | |
| .browser-notice > span > span { | |
| color: var(--shell-muted); | |
| font: var(--type-caption)/1.25 var(--body); | |
| } | |
| .browser-notice.is-warning .notice-mark { | |
| background: var(--rust); | |
| } | |
| .browser-notice.is-warning strong { | |
| color: var(--shell-warning); | |
| } | |
| .header-actions { | |
| justify-self: end; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 0 14px; | |
| border-left: 1px solid var(--shell-line); | |
| } | |
| .layout-controls { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .layout-controls button, | |
| .icon-button { | |
| width: 36px; | |
| height: 36px; | |
| display: grid; | |
| place-items: center; | |
| color: var(--shell-muted); | |
| border: 1px solid var(--shell-line); | |
| border-radius: 7px; | |
| background: transparent; | |
| cursor: pointer; | |
| transition: color 150ms ease, border-color 150ms ease, background 150ms ease; | |
| } | |
| .layout-controls button:hover, | |
| .icon-button:hover { | |
| color: var(--shell-text); | |
| border-color: color-mix(in srgb, var(--shell-text) 30%, transparent); | |
| background: color-mix(in srgb, var(--shell-text) 5%, transparent); | |
| } | |
| .layout-controls button[aria-pressed="true"] { | |
| color: var(--shell-accent); | |
| border-color: color-mix(in srgb, var(--shell-accent) 40%, transparent); | |
| background: var(--shell-accent-dim); | |
| } | |
| .layout-controls svg, | |
| .icon-button svg { | |
| width: 18px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.4; | |
| } | |
| .station-clock { | |
| display: grid; | |
| justify-items: end; | |
| padding: 0 18px; | |
| color: var(--shell-muted); | |
| font-family: var(--mono); | |
| } | |
| .station-clock small { | |
| font-size: var(--type-utility); | |
| letter-spacing: 0.18em; | |
| } | |
| .station-clock span { | |
| margin-top: 4px; | |
| font-size: var(--type-caption); | |
| letter-spacing: 0.09em; | |
| } | |
| .icon-button { | |
| flex: 0 0 36px; | |
| } | |
| .icon-button:hover { | |
| color: var(--shell-text); | |
| } | |
| .icon-button svg { | |
| width: 18px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.4; | |
| } | |
| .workspace-grid { | |
| min-height: calc(100dvh - 64px); | |
| display: grid; | |
| grid-template-columns: 260px minmax(0, 1fr) 340px; | |
| grid-template-areas: "models chat inspector"; | |
| background: var(--canvas-bg); | |
| } | |
| .workspace-grid.is-models-collapsed { | |
| grid-template-columns: 0 minmax(0, 1fr) 340px; | |
| } | |
| .workspace-grid.is-inspector-collapsed { | |
| grid-template-columns: 260px minmax(0, 1fr) 0; | |
| } | |
| .workspace-grid.is-models-collapsed.is-inspector-collapsed { | |
| grid-template-columns: 0 minmax(0, 1fr) 0; | |
| } | |
| .workspace-grid.layout-centered .chat-surface { | |
| width: 100%; | |
| } | |
| .workspace-grid.layout-centered .chat-header { | |
| padding-inline: max(40px, calc((100% - 1120px) / 2 + 40px)); | |
| } | |
| .workspace-grid.layout-centered .transcript { | |
| padding-inline: max(64px, calc((100% - 1120px) / 2 + 64px)); | |
| } | |
| .workspace-grid.layout-centered .composer { | |
| padding-inline: max(44px, calc((100% - 1120px) / 2 + 44px)); | |
| } | |
| .workspace-grid.layout-wide .chat-surface { | |
| width: 100%; | |
| } | |
| .model-rail[hidden], | |
| .inspector[hidden] { | |
| display: none ; | |
| } | |
| .model-rail, | |
| .inspector { | |
| min-width: 0; | |
| color: var(--shell-text); | |
| background: var(--shell-panel); | |
| } | |
| .model-rail { | |
| grid-area: models; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| border-right: 1px solid var(--shell-line); | |
| padding: 20px 14px 14px; | |
| } | |
| .model-rail::before { | |
| display: none; | |
| } | |
| .rail-heading, | |
| .section-heading { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .rail-heading > span, | |
| .section-heading > span:first-child { | |
| color: var(--shell-accent); | |
| font: 500 var(--type-utility)/1 var(--mono); | |
| border-top: 1px solid var(--shell-accent); | |
| padding-top: 5px; | |
| } | |
| .rail-heading h2, | |
| .section-heading h2 { | |
| margin: 0; | |
| font: 600 20px/1.2 var(--display); | |
| letter-spacing: -0.015em; | |
| } | |
| .rail-heading p { | |
| margin: 4px 0 0; | |
| color: var(--shell-muted); | |
| font-size: var(--type-caption); | |
| line-height: 1.35; | |
| } | |
| .model-list { | |
| position: relative; | |
| z-index: 1; | |
| display: grid; | |
| gap: 5px; | |
| margin-top: 21px; | |
| } | |
| .model-card { | |
| border: 1px solid var(--shell-line); | |
| border-radius: 8px; | |
| transition: border-color 180ms ease, background 180ms ease; | |
| } | |
| .model-card.is-active { | |
| border-color: color-mix(in srgb, var(--shell-accent) 62%, transparent); | |
| background: var(--shell-accent-dim); | |
| } | |
| .model-select { | |
| width: 100%; | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 8px; | |
| min-height: 72px; | |
| padding: 13px 9px 12px; | |
| text-align: left; | |
| color: var(--shell-text); | |
| border: 0; | |
| background: transparent; | |
| cursor: pointer; | |
| } | |
| .model-card:not(.is-active) .model-select:hover { | |
| background: color-mix(in srgb, var(--shell-text) 5%, transparent); | |
| } | |
| .model-index { | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1 var(--mono); | |
| padding-top: 4px; | |
| } | |
| .model-copy { | |
| min-width: 0; | |
| display: grid; | |
| gap: 3px; | |
| } | |
| .model-title-line { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 7px; | |
| } | |
| .model-title-line strong { | |
| font: 600 20px/1 var(--display); | |
| } | |
| .model-copy .model-architecture { | |
| overflow: hidden; | |
| color: var(--shell-muted); | |
| font: 600 var(--type-utility)/1.2 var(--mono); | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .model-copy > span:last-child { | |
| margin-top: 3px; | |
| color: var(--shell-muted); | |
| font-size: var(--type-caption); | |
| } | |
| .availability { | |
| padding: 2px 4px; | |
| font: 600 var(--type-utility)/1 var(--mono); | |
| letter-spacing: 0; | |
| border: 1px solid var(--shell-line); | |
| } | |
| .availability-loaded, | |
| .availability-loading, | |
| .availability-cached { | |
| color: var(--shell-accent); | |
| border-color: color-mix(in srgb, var(--shell-accent) 38%, transparent); | |
| } | |
| .availability-remote, | |
| .availability-limited { | |
| color: var(--shell-warning); | |
| border-color: rgba(201, 111, 67, 0.4); | |
| } | |
| .model-footprint { | |
| align-self: end; | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1 var(--mono); | |
| white-space: nowrap; | |
| } | |
| .model-limit-reason { | |
| display: block; | |
| margin: -4px 8px 9px; | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1.35 var(--mono); | |
| } | |
| .rail-footnote { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 8px; | |
| margin-top: auto; | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1.2 var(--mono); | |
| letter-spacing: 0.03em; | |
| } | |
| .chat-surface { | |
| grid-area: chat; | |
| min-width: 0; | |
| min-height: calc(100dvh - 64px); | |
| height: calc(100dvh - 64px); | |
| display: grid; | |
| grid-template-rows: auto minmax(0, 1fr) auto; | |
| overflow: hidden; | |
| color: var(--canvas-text); | |
| background: var(--canvas-bg); | |
| position: relative; | |
| } | |
| .chat-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| min-height: 72px; | |
| padding: 14px clamp(20px, 3vw, 40px); | |
| border-bottom: 1px solid var(--canvas-line); | |
| } | |
| .chat-header h2 { | |
| display: inline; | |
| margin: 0; | |
| font: 650 var(--type-heading)/1.1 var(--display); | |
| letter-spacing: -0.025em; | |
| } | |
| .chat-header-main { | |
| min-width: 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .chat-list-button, | |
| .chat-settings-button { | |
| min-height: 36px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 0 9px; | |
| color: var(--canvas-muted); | |
| border: 1px solid var(--canvas-line); | |
| border-radius: 7px; | |
| background: transparent; | |
| font: 600 var(--type-utility)/1 var(--body); | |
| white-space: nowrap; | |
| cursor: pointer; | |
| } | |
| .chat-list-button:hover, | |
| .chat-settings-button:hover { | |
| color: var(--canvas-text); | |
| border-color: var(--canvas-muted); | |
| } | |
| .chat-list-button svg { | |
| width: 16px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.5; | |
| } | |
| .chat-title { | |
| min-width: 0; | |
| display: flex; | |
| align-items: baseline; | |
| gap: 10px; | |
| } | |
| .architecture-subtitle { | |
| color: var(--canvas-muted); | |
| font: var(--type-caption)/1 var(--body); | |
| } | |
| .chat-header-meta { | |
| display: grid; | |
| grid-template-columns: repeat(2, auto); | |
| gap: 5px 13px; | |
| color: var(--canvas-muted); | |
| font: var(--type-utility)/1.2 var(--mono); | |
| letter-spacing: 0; | |
| } | |
| .live-label { | |
| grid-column: span 2; | |
| justify-self: end; | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| color: var(--shell-accent); | |
| white-space: nowrap; | |
| } | |
| .live-label i { | |
| width: 5px; | |
| height: 5px; | |
| box-shadow: none; | |
| background: var(--shell-accent); | |
| } | |
| .live-label.is-dormant { | |
| color: var(--canvas-muted); | |
| } | |
| .live-label.is-dormant i { | |
| background: var(--canvas-muted); | |
| box-shadow: none; | |
| } | |
| .runtime-error { | |
| position: absolute; | |
| z-index: 4; | |
| top: 105px; | |
| right: clamp(21px, 3vw, 44px); | |
| left: clamp(21px, 3vw, 44px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 11px 13px; | |
| color: var(--paper); | |
| border: 1px solid var(--rust); | |
| background: rgba(17, 21, 18, 0.96); | |
| box-shadow: 4px 4px 0 rgba(201, 111, 67, 0.24); | |
| } | |
| .runtime-error div { | |
| display: grid; | |
| gap: 3px; | |
| } | |
| .runtime-error strong { | |
| color: #ff9a68; | |
| font: 700 var(--type-utility)/1 var(--mono); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .runtime-error span { | |
| font: var(--type-caption)/1.35 var(--mono); | |
| overflow-wrap: anywhere; | |
| } | |
| .runtime-error button { | |
| flex: 0 0 auto; | |
| padding: 5px 8px; | |
| border: 1px solid rgba(232, 223, 202, 0.3); | |
| background: transparent; | |
| min-height: 44px; | |
| font: var(--type-utility)/1.2 var(--mono); | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| } | |
| .runtime-error button:disabled { | |
| cursor: wait; | |
| opacity: 0.5; | |
| } | |
| .runtime-error.download-retry button { | |
| max-width: 132px; | |
| line-height: 1.25; | |
| } | |
| .chat-ruler { | |
| display: flex; | |
| justify-content: space-between; | |
| padding-inline: clamp(21px, 3vw, 44px); | |
| color: rgba(17, 21, 18, 0.4); | |
| border-bottom: 1px solid rgba(17, 21, 18, 0.09); | |
| background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(17, 21, 18, 0.2) 14px 15px) left bottom / 100% 4px no-repeat; | |
| font: var(--type-utility)/1 var(--mono); | |
| } | |
| .transcript { | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 20px clamp(21px, 4vw, 64px) 32px; | |
| scrollbar-color: var(--canvas-muted) transparent; | |
| } | |
| .transcript-date { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 22px; | |
| color: var(--canvas-muted); | |
| font: var(--type-utility)/1 var(--mono); | |
| letter-spacing: 0; | |
| } | |
| .transcript-date::before, | |
| .transcript-date::after { | |
| display: none; | |
| } | |
| .transcript-empty { | |
| max-width: 430px; | |
| margin: 12vh auto 0; | |
| text-align: center; | |
| color: var(--canvas-muted); | |
| } | |
| .transcript-empty h3 { | |
| margin: 0 0 8px; | |
| color: var(--canvas-text); | |
| font: 650 22px/1.2 var(--display); | |
| } | |
| .transcript-empty p { | |
| margin: 0; | |
| font-size: var(--type-body); | |
| line-height: 1.5; | |
| } | |
| .system-instructions-button, | |
| .conversation-list-empty button, | |
| .new-chat-button { | |
| min-height: 42px; | |
| padding: 0 13px; | |
| color: var(--ink); | |
| border: 1px solid var(--ink); | |
| border-radius: 7px; | |
| background: var(--phosphor); | |
| font: 650 var(--type-caption)/1 var(--body); | |
| cursor: pointer; | |
| } | |
| .system-instructions-button { | |
| margin-top: 18px; | |
| } | |
| .conversation-library { | |
| grid-template-rows: auto minmax(0, 1fr); | |
| } | |
| .conversation-list-header > div { | |
| display: grid; | |
| gap: 4px; | |
| } | |
| .conversation-list-header p { | |
| margin: 0; | |
| color: var(--canvas-muted); | |
| font-size: var(--type-caption); | |
| } | |
| .conversation-list { | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: clamp(20px, 4vw, 48px); | |
| scrollbar-color: var(--canvas-muted) transparent; | |
| } | |
| .conversation-row { | |
| max-width: 850px; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| align-items: stretch; | |
| margin: 0 auto 9px; | |
| border: 1px solid var(--canvas-line); | |
| border-radius: 9px; | |
| background: var(--canvas-field); | |
| } | |
| .conversation-row.is-current { | |
| border-color: rgba(115, 128, 102, 0.72); | |
| } | |
| .conversation-open { | |
| min-width: 0; | |
| display: grid; | |
| gap: 6px; | |
| padding: 15px 16px; | |
| color: var(--canvas-text); | |
| border: 0; | |
| background: transparent; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .conversation-title-line { | |
| min-width: 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| } | |
| .conversation-title-line strong { | |
| overflow: hidden; | |
| font: 650 var(--type-body)/1.2 var(--display); | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .conversation-title-line small { | |
| flex: 0 0 auto; | |
| color: #52712f; | |
| font: 600 var(--type-utility)/1 var(--body); | |
| } | |
| .conversation-open > span:nth-child(2) { | |
| overflow: hidden; | |
| color: var(--canvas-muted); | |
| font-size: var(--type-caption); | |
| line-height: 1.35; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .conversation-open > small { | |
| color: var(--canvas-muted); | |
| font: var(--type-utility)/1.2 var(--mono); | |
| } | |
| .conversation-actions { | |
| display: grid; | |
| align-content: center; | |
| gap: 4px; | |
| padding: 7px; | |
| border-left: 1px solid var(--canvas-line); | |
| } | |
| .conversation-actions button { | |
| min-height: 34px; | |
| padding: 0 8px; | |
| color: var(--canvas-muted); | |
| border: 0; | |
| background: transparent; | |
| font: 600 var(--type-utility)/1 var(--body); | |
| cursor: pointer; | |
| } | |
| .conversation-actions button:hover { | |
| color: var(--canvas-text); | |
| } | |
| .conversation-actions .conversation-delete { | |
| color: var(--rust); | |
| } | |
| .conversation-list-empty { | |
| max-width: 430px; | |
| display: grid; | |
| justify-items: center; | |
| gap: 10px; | |
| margin: 15vh auto 0; | |
| color: var(--canvas-muted); | |
| text-align: center; | |
| } | |
| .conversation-list-empty h3, | |
| .conversation-list-empty p { | |
| margin: 0; | |
| } | |
| .conversation-list-empty h3 { | |
| color: var(--canvas-text); | |
| font: 650 22px/1.2 var(--display); | |
| } | |
| .conversation-list-empty button { | |
| margin-top: 8px; | |
| } | |
| .message { | |
| max-width: 760px; | |
| margin-bottom: 25px; | |
| } | |
| .message > header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 8px; | |
| color: var(--canvas-muted); | |
| font: var(--type-utility)/1.2 var(--mono); | |
| letter-spacing: 0; | |
| } | |
| .message > header strong { | |
| color: var(--canvas-text); | |
| } | |
| .message > header time { | |
| margin-left: auto; | |
| } | |
| .message-ordinal { | |
| min-width: 22px; | |
| color: #4d6728; | |
| } | |
| .message-content { | |
| font: var(--type-body)/1.58 var(--body); | |
| } | |
| .message-content > p { | |
| margin: 0; | |
| } | |
| .markdown-content > :first-child { | |
| margin-top: 0; | |
| } | |
| .markdown-content > :last-child { | |
| margin-bottom: 0; | |
| } | |
| .markdown-content p, | |
| .markdown-content ul, | |
| .markdown-content ol, | |
| .markdown-content blockquote { | |
| margin: 0 0 10px; | |
| } | |
| .markdown-content ul, | |
| .markdown-content ol { | |
| padding-left: 22px; | |
| } | |
| .markdown-content h3, | |
| .markdown-content h4, | |
| .markdown-content h5 { | |
| margin: 16px 0 7px; | |
| font-family: var(--display); | |
| font-weight: 500; | |
| line-height: 1.1; | |
| } | |
| .markdown-content blockquote { | |
| padding-left: 12px; | |
| border-left: 2px solid rgba(80, 115, 36, 0.55); | |
| color: var(--canvas-muted); | |
| white-space: pre-wrap; | |
| } | |
| .markdown-content code { | |
| padding: 1px 4px; | |
| background: rgba(17, 21, 18, 0.08); | |
| font: 0.78em/1.4 var(--mono); | |
| } | |
| .code-block { | |
| max-width: 100%; | |
| overflow: hidden; | |
| margin: 11px 0; | |
| border: 1px solid var(--canvas-line); | |
| border-radius: 9px; | |
| background: #f7f9f6; | |
| } | |
| .code-block figcaption { | |
| min-height: 34px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 0 13px; | |
| color: var(--canvas-muted); | |
| border-bottom: 1px solid var(--canvas-line); | |
| background: var(--canvas-raised); | |
| font: 600 var(--type-utility)/1 var(--mono); | |
| } | |
| .code-stream-state { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .code-stream-state i { | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| background: var(--shell-accent); | |
| animation: cursor-blink 860ms steps(1, end) infinite; | |
| } | |
| .code-block pre { | |
| position: relative; | |
| max-width: 100%; | |
| overflow: auto; | |
| margin: 0; | |
| padding: 15px 17px 17px; | |
| color: #24292f; | |
| background: #f7f9f6; | |
| border: 0; | |
| border-radius: 0; | |
| font: 0.84em/1.58 var(--mono); | |
| tab-size: 2; | |
| } | |
| .code-block pre code { | |
| padding: 0; | |
| background: transparent; | |
| white-space: pre; | |
| font: inherit; | |
| } | |
| .code-block .shiki span { | |
| background-color: transparent ; | |
| } | |
| .markdown-content a { | |
| color: #3f6417; | |
| text-decoration-thickness: 1px; | |
| text-underline-offset: 2px; | |
| } | |
| .message-user .markdown-content code { | |
| background: var(--canvas-line); | |
| } | |
| .reasoning-block { | |
| margin: 0 0 11px; | |
| padding: 8px 10px; | |
| color: var(--canvas-muted); | |
| border: 1px solid var(--canvas-line); | |
| border-radius: 8px; | |
| background: rgba(17, 21, 18, 0.03); | |
| font-size: var(--type-caption); | |
| } | |
| .reasoning-block summary { | |
| color: #4d6728; | |
| font: 600 var(--type-caption)/1.2 var(--body); | |
| cursor: pointer; | |
| } | |
| .reasoning-block[open] summary { | |
| margin-bottom: 8px; | |
| } | |
| .generation-placeholder { | |
| margin: 0; | |
| color: var(--canvas-muted); | |
| font-style: italic; | |
| } | |
| .tool-generation { | |
| display: flex; | |
| align-items: baseline; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin: 0; | |
| color: var(--canvas-muted); | |
| font: var(--type-caption)/1.45 var(--body); | |
| } | |
| .tool-generation code { | |
| color: var(--canvas-text); | |
| font: 600 var(--type-caption)/1.45 var(--mono); | |
| } | |
| .tool-generation .stream-cursor { | |
| flex: 0 0 auto; | |
| margin-left: 1px; | |
| } | |
| .message-error { | |
| margin: 9px 0 0; | |
| color: #8d321b; | |
| font: var(--type-caption)/1.4 var(--mono); | |
| } | |
| .message.has-error { | |
| border-color: var(--rust); | |
| } | |
| .message-assistant { | |
| padding-left: 22px; | |
| border-left: 2px solid rgba(84, 111, 60, 0.45); | |
| } | |
| .message-assistant .message-content > p::first-letter { | |
| float: none; | |
| margin: 0; | |
| color: inherit; | |
| font: inherit; | |
| } | |
| .message-user { | |
| max-width: min(78%, 610px); | |
| margin-left: auto; | |
| padding: 12px 15px 13px; | |
| color: var(--canvas-text); | |
| border: 1px solid var(--canvas-line); | |
| background: var(--canvas-raised); | |
| border-radius: 10px; | |
| } | |
| .message-user > header, | |
| .message-user > header strong { | |
| color: var(--canvas-muted); | |
| } | |
| .message-user .message-ordinal { | |
| color: var(--phosphor); | |
| } | |
| .message > footer { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 9px; | |
| padding-top: 7px; | |
| color: var(--canvas-muted); | |
| border-top: 1px solid var(--canvas-line); | |
| font: var(--type-utility)/1.2 var(--mono); | |
| } | |
| .message-actions { | |
| min-height: 30px; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| margin-top: 7px; | |
| } | |
| .message-actions button { | |
| min-height: 30px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 0 7px; | |
| color: var(--canvas-muted); | |
| border: 0; | |
| border-radius: 6px; | |
| background: transparent; | |
| font: 600 var(--type-utility)/1 var(--body); | |
| cursor: pointer; | |
| } | |
| .message-actions button:hover:not(:disabled), | |
| .message-actions button:focus-visible { | |
| color: var(--canvas-text); | |
| background: var(--canvas-raised); | |
| } | |
| .message-actions button:disabled { | |
| opacity: 0.38; | |
| } | |
| .message-actions svg { | |
| width: 14px; | |
| height: 14px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| stroke-width: 1.35; | |
| } | |
| .message-user .message-actions { | |
| justify-content: flex-end; | |
| padding-top: 6px; | |
| border-top: 1px solid var(--canvas-line); | |
| } | |
| .message-user .message-actions button:hover:not(:disabled), | |
| .message-user .message-actions button:focus-visible { | |
| background: var(--canvas-field); | |
| } | |
| .stream-cursor { | |
| display: inline-block; | |
| width: 7px; | |
| height: 14px; | |
| margin-left: 4px; | |
| vertical-align: -2px; | |
| background: #507324; | |
| animation: cursor-blink 860ms steps(1, end) infinite; | |
| } | |
| .tool-call { | |
| margin-top: 13px; | |
| border: 1px solid var(--canvas-line); | |
| background: var(--canvas-raised); | |
| } | |
| .tool-call summary { | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 10px; | |
| list-style: none; | |
| cursor: pointer; | |
| } | |
| .tool-call summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .tool-call code { | |
| font: var(--type-caption)/1.4 var(--mono); | |
| } | |
| .tool-call summary > span:last-child { | |
| color: var(--canvas-muted); | |
| font: var(--type-utility)/1 var(--mono); | |
| text-transform: uppercase; | |
| } | |
| .tool-state, | |
| .event-pip { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--moss); | |
| } | |
| .tool-state-complete, | |
| .event-complete { | |
| background: #55772c; | |
| } | |
| .tool-state-running, | |
| .event-running { | |
| background: var(--phosphor); | |
| box-shadow: 0 0 0 3px rgba(90, 120, 43, 0.15); | |
| } | |
| .tool-state-error, | |
| .event-error { | |
| background: var(--rust); | |
| } | |
| .tool-call > div { | |
| padding: 9px 10px; | |
| border-top: 1px solid var(--canvas-line); | |
| } | |
| .tool-call > div p { | |
| margin: 5px 0 0; | |
| color: var(--canvas-muted); | |
| font-size: var(--type-caption); | |
| } | |
| .composer { | |
| position: relative; | |
| padding: 12px clamp(21px, 3vw, 44px) 18px; | |
| border-top: 1px solid var(--canvas-line); | |
| background: var(--canvas-raised); | |
| } | |
| .composer::before { | |
| display: none; | |
| } | |
| .composer-activity { | |
| display: grid; | |
| gap: 10px; | |
| margin-bottom: 12px; | |
| padding: 12px 14px; | |
| color: var(--canvas-text); | |
| border: 1px solid var(--canvas-line); | |
| border-radius: 8px; | |
| background: var(--canvas-field); | |
| } | |
| .activity-status, | |
| .activity-status > div { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .activity-status { | |
| min-width: 0; | |
| justify-content: space-between; | |
| gap: 12px; | |
| font: var(--type-caption)/1.2 var(--body); | |
| } | |
| .activity-status > div { | |
| min-width: 0; | |
| gap: 10px; | |
| } | |
| .activity-status > div > span:last-child { | |
| min-width: 0; | |
| display: grid; | |
| gap: 3px; | |
| } | |
| .activity-status strong, | |
| .activity-status small { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .activity-status strong { | |
| color: var(--canvas-text); | |
| font-weight: 600; | |
| } | |
| .activity-status small { | |
| color: var(--canvas-muted); | |
| font-size: var(--type-utility); | |
| } | |
| .activity-status > b { | |
| flex: 0 0 auto; | |
| color: var(--shell-accent); | |
| font: 600 var(--type-caption)/1 var(--mono); | |
| } | |
| .activity-pulse { | |
| width: 5px; | |
| height: 22px; | |
| flex: 0 0 5px; | |
| border-radius: 2px; | |
| background: var(--shell-accent); | |
| } | |
| .activity-track { | |
| height: 6px; | |
| overflow: hidden; | |
| border-radius: 3px; | |
| background: var(--canvas-line); | |
| } | |
| .activity-track > span { | |
| display: block; | |
| height: 100%; | |
| border-radius: inherit; | |
| background: var(--shell-accent); | |
| transition: width 120ms linear; | |
| } | |
| .composer-meta { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 7px; | |
| color: var(--canvas-muted); | |
| min-height: 24px; | |
| font: var(--type-utility)/1 var(--mono); | |
| } | |
| .tool-toggle { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| min-height: 32px; | |
| padding: 0 2px; | |
| color: var(--canvas-muted); | |
| border: 0; | |
| background: transparent; | |
| font: 700 var(--type-utility)/1 var(--mono); | |
| cursor: pointer; | |
| } | |
| .tool-toggle.is-on { | |
| color: var(--shell-accent); | |
| } | |
| .tool-toggle svg { | |
| width: 12px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.3; | |
| } | |
| .composer-field { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| position: relative; | |
| min-height: 84px; | |
| border: 1px solid var(--canvas-text); | |
| border-radius: 10px; | |
| background: var(--canvas-field); | |
| overflow: hidden; | |
| } | |
| .composer-field label { | |
| position: absolute; | |
| top: 7px; | |
| left: 11px; | |
| color: var(--canvas-muted); | |
| font: var(--type-utility)/1 var(--mono); | |
| letter-spacing: 0; | |
| } | |
| .composer-field textarea { | |
| min-width: 0; | |
| resize: none; | |
| padding: 23px 13px 9px; | |
| color: var(--canvas-text); | |
| border: 0; | |
| outline: none; | |
| background: transparent; | |
| font: var(--type-body)/1.45 var(--body); | |
| } | |
| .composer-field textarea::placeholder { | |
| color: var(--canvas-muted); | |
| } | |
| .send-button { | |
| min-width: 112px; | |
| min-height: 52px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 7px; | |
| margin: 7px; | |
| color: var(--ink); | |
| border: 1px solid var(--ink); | |
| border-radius: 8px; | |
| background: var(--phosphor); | |
| font: 700 var(--type-caption)/1 var(--mono); | |
| cursor: pointer; | |
| transition: background 150ms ease, opacity 150ms ease; | |
| } | |
| .send-button:hover:not(:disabled) { | |
| background: #b6df87; | |
| } | |
| .send-button:disabled { | |
| opacity: 0.34; | |
| } | |
| .send-button svg { | |
| width: 15px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.4; | |
| } | |
| .send-button.stop { | |
| color: var(--paper); | |
| background: var(--ink); | |
| } | |
| .send-button.stop span { | |
| width: 7px; | |
| height: 7px; | |
| background: var(--rust); | |
| } | |
| .send-button.load { | |
| background: var(--phosphor); | |
| } | |
| .station-frame[data-theme="dark"] .architecture-subtitle, | |
| .station-frame[data-theme="dark"] .chat-header-meta, | |
| .station-frame[data-theme="dark"] .transcript-date, | |
| .station-frame[data-theme="dark"] .transcript-empty, | |
| .station-frame[data-theme="dark"] .message > header, | |
| .station-frame[data-theme="dark"] .message > footer, | |
| .station-frame[data-theme="dark"] .composer-meta, | |
| .station-frame[data-theme="dark"] .tool-toggle, | |
| .station-frame[data-theme="dark"] .composer-field label { | |
| color: var(--canvas-muted); | |
| } | |
| .station-frame[data-theme="dark"] .transcript-empty h3, | |
| .station-frame[data-theme="dark"] .message > header strong { | |
| color: var(--canvas-text); | |
| } | |
| .station-frame[data-theme="dark"] .live-label { | |
| color: #a8d574; | |
| } | |
| .station-frame[data-theme="dark"] .conversation-title-line small { | |
| color: var(--phosphor); | |
| } | |
| .station-frame[data-theme="dark"] .live-label.is-dormant { | |
| color: var(--canvas-muted); | |
| } | |
| .station-frame[data-theme="dark"] .live-label.is-dormant i { | |
| background: var(--canvas-muted); | |
| } | |
| .station-frame[data-theme="dark"] .transcript { | |
| scrollbar-color: rgba(237, 240, 232, 0.24) transparent; | |
| } | |
| .station-frame[data-theme="dark"] .markdown-content blockquote, | |
| .station-frame[data-theme="dark"] .reasoning-block, | |
| .station-frame[data-theme="dark"] .tool-call > div p { | |
| color: rgba(237, 240, 232, 0.7); | |
| } | |
| .station-frame[data-theme="dark"] .markdown-content code { | |
| background: rgba(237, 240, 232, 0.09); | |
| } | |
| .station-frame[data-theme="dark"] .code-block pre code { | |
| background: transparent; | |
| } | |
| .station-frame[data-theme="dark"] .code-block { | |
| background: #0f110e; | |
| } | |
| .station-frame[data-theme="dark"] .code-block pre { | |
| color: var(--paper); | |
| background: #0f110e; | |
| } | |
| .station-frame[data-theme="dark"] .markdown-content a, | |
| .station-frame[data-theme="dark"] .reasoning-block summary { | |
| color: var(--phosphor); | |
| } | |
| .station-frame[data-theme="dark"] .reasoning-block, | |
| .station-frame[data-theme="dark"] .tool-call { | |
| border-color: var(--canvas-line); | |
| background: rgba(237, 240, 232, 0.035); | |
| } | |
| .station-frame[data-theme="dark"] .generation-placeholder, | |
| .station-frame[data-theme="dark"] .tool-generation, | |
| .station-frame[data-theme="dark"] .tool-call summary > span:last-child, | |
| .station-frame[data-theme="dark"] .composer-field textarea::placeholder { | |
| color: rgba(237, 240, 232, 0.4); | |
| } | |
| .station-frame[data-theme="dark"] .message-assistant { | |
| border-left-color: rgba(168, 213, 116, 0.44); | |
| } | |
| .station-frame[data-theme="dark"] .message-user { | |
| color: var(--canvas-text); | |
| border: 1px solid var(--canvas-line); | |
| background: #11130f; | |
| } | |
| .station-frame[data-theme="dark"] .message > footer, | |
| .station-frame[data-theme="dark"] .tool-call > div { | |
| border-color: var(--canvas-line); | |
| } | |
| .station-frame[data-theme="dark"] .tool-toggle.is-on { | |
| color: var(--phosphor); | |
| } | |
| .station-frame[data-theme="dark"] .composer-field textarea { | |
| color: var(--canvas-text); | |
| } | |
| .station-frame[data-theme="dark"] .composer-field { | |
| border-color: rgba(237, 240, 232, 0.3); | |
| } | |
| .station-frame[data-theme="dark"] .send-button { | |
| color: var(--ink); | |
| border-color: #0f110e; | |
| } | |
| .station-frame[data-theme="dark"] .send-button.stop { | |
| color: var(--canvas-text); | |
| border-color: var(--canvas-line); | |
| background: #11130f; | |
| } | |
| .inspector { | |
| grid-area: inspector; | |
| min-height: calc(100dvh - 64px); | |
| height: calc(100dvh - 64px); | |
| overflow-y: auto; | |
| border-left: 1px solid var(--shell-line); | |
| scrollbar-color: var(--shell-muted) transparent; | |
| } | |
| .inspector-section { | |
| padding: 20px 18px; | |
| border-bottom: 1px solid var(--shell-line); | |
| } | |
| .section-heading { | |
| align-items: center; | |
| margin-bottom: 17px; | |
| justify-content: space-between; | |
| } | |
| .section-heading.compact { | |
| margin-bottom: 14px; | |
| } | |
| .section-heading > div { | |
| flex: 1; | |
| } | |
| .section-heading h2 { | |
| font-size: 20px; | |
| } | |
| .sampling-label { | |
| padding: 3px 6px; | |
| color: var(--shell-muted); | |
| border: 1px solid var(--shell-line); | |
| border-radius: 6px; | |
| font: var(--type-utility)/1 var(--body); | |
| } | |
| .sampling-label.phase-prefill, | |
| .sampling-label.phase-decode { | |
| color: var(--shell-accent); | |
| border-color: color-mix(in srgb, var(--shell-accent) 40%, transparent); | |
| } | |
| .speed-gauge { | |
| display: grid; | |
| grid-template-columns: 116px 1fr; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .gauge-ring { | |
| width: 116px; | |
| height: 116px; | |
| display: grid; | |
| place-items: center; | |
| border-radius: 50%; | |
| background: | |
| radial-gradient(circle, var(--shell-panel) 0 56%, transparent 57%), | |
| conic-gradient(var(--shell-accent) 0 var(--gauge), var(--shell-line) var(--gauge) 100%); | |
| box-shadow: inset 0 0 0 1px var(--shell-line); | |
| } | |
| .gauge-ring::after { | |
| display: none; | |
| } | |
| .gauge-ring > div { | |
| position: relative; | |
| z-index: 1; | |
| display: grid; | |
| justify-items: center; | |
| min-width: 0; | |
| } | |
| .gauge-ring strong { | |
| color: var(--shell-accent); | |
| font: 600 clamp(24px, 2vw, 29px)/1 var(--display); | |
| white-space: nowrap; | |
| } | |
| .gauge-ring small { | |
| display: grid; | |
| justify-items: center; | |
| gap: 2px; | |
| margin-top: 3px; | |
| color: var(--shell-muted); | |
| font: 600 10px/1 var(--mono); | |
| letter-spacing: 0.02em; | |
| text-transform: uppercase; | |
| } | |
| .gauge-ring small span { | |
| white-space: nowrap; | |
| } | |
| .speed-gauge dl { | |
| margin: 0; | |
| } | |
| .speed-gauge dl div { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 7px 0; | |
| border-bottom: 1px solid var(--shell-line); | |
| font: var(--type-utility)/1 var(--mono); | |
| } | |
| .speed-gauge dt { | |
| color: var(--shell-muted); | |
| } | |
| .speed-gauge dd { | |
| margin: 0; | |
| color: var(--shell-text); | |
| } | |
| .telemetry-live-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 8px; | |
| margin-top: 16px; | |
| } | |
| .telemetry-metric { | |
| min-width: 0; | |
| display: grid; | |
| gap: 6px; | |
| padding: 10px; | |
| border: 1px solid var(--shell-line); | |
| border-radius: 8px; | |
| background: var(--shell-raised); | |
| } | |
| .telemetry-metric.is-active { | |
| border-color: color-mix(in srgb, var(--shell-accent) 44%, transparent); | |
| } | |
| .telemetry-metric > div:first-child { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .telemetry-metric span, | |
| .telemetry-metric small { | |
| color: var(--shell-muted); | |
| font-size: var(--type-utility); | |
| } | |
| .telemetry-metric strong { | |
| color: var(--shell-text); | |
| font: 600 var(--type-caption)/1 var(--mono); | |
| white-space: nowrap; | |
| } | |
| .telemetry-metric.is-active strong { | |
| color: var(--shell-accent); | |
| } | |
| .telemetry-meter { | |
| height: 4px; | |
| overflow: hidden; | |
| border-radius: 2px; | |
| background: var(--shell-line); | |
| } | |
| .telemetry-meter > span { | |
| display: block; | |
| height: 100%; | |
| border-radius: inherit; | |
| background: var(--shell-accent); | |
| transition: width 120ms linear; | |
| } | |
| .device-card { | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| align-items: center; | |
| gap: 10px; | |
| margin: 19px 0 14px; | |
| padding: 10px; | |
| border: 1px solid var(--shell-line); | |
| border-radius: 8px; | |
| background: var(--shell-raised); | |
| } | |
| .device-icon { | |
| width: 28px; | |
| height: 28px; | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 3px; | |
| padding: 5px; | |
| border: 1px solid color-mix(in srgb, var(--shell-accent) 36%, transparent); | |
| } | |
| .device-icon i { | |
| width: 4px; | |
| background: var(--shell-accent); | |
| } | |
| .device-icon i:nth-child(1) { height: 7px; opacity: .45; } | |
| .device-icon i:nth-child(2) { height: 15px; } | |
| .device-icon i:nth-child(3) { height: 11px; opacity: .7; } | |
| .device-card > div { | |
| display: grid; | |
| gap: 3px; | |
| } | |
| .device-card small, | |
| .memory-grid small, | |
| .meter small { | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1 var(--mono); | |
| text-transform: uppercase; | |
| } | |
| .device-card strong { | |
| font: 500 var(--type-caption)/1 var(--mono); | |
| } | |
| .device-card > span:last-child { | |
| display: grid; | |
| justify-items: end; | |
| color: var(--shell-accent); | |
| font: 600 15px/1 var(--mono); | |
| } | |
| .device-card > span:last-child small { | |
| margin-top: 3px; | |
| color: var(--shell-muted); | |
| font-size: var(--type-utility); | |
| } | |
| .meter { | |
| margin-top: 13px; | |
| } | |
| .meter > div:first-child { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 6px; | |
| font: var(--type-utility)/1 var(--mono); | |
| } | |
| .meter-track { | |
| height: 5px; | |
| padding: 1px; | |
| border: 1px solid var(--shell-line); | |
| } | |
| .meter-track > span { | |
| display: block; | |
| height: 100%; | |
| background: var(--shell-accent); | |
| } | |
| .memory-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1px; | |
| margin-top: 14px; | |
| background: var(--shell-line); | |
| } | |
| .memory-grid > div { | |
| display: grid; | |
| gap: 6px; | |
| padding: 10px; | |
| background: var(--shell-panel); | |
| } | |
| .memory-grid strong { | |
| font: 500 var(--type-caption)/1 var(--mono); | |
| } | |
| .event-log { | |
| position: relative; | |
| display: grid; | |
| gap: 0; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .event-log::before { | |
| position: absolute; | |
| top: 5px; | |
| bottom: 5px; | |
| left: 3px; | |
| width: 1px; | |
| content: ""; | |
| background: var(--shell-line); | |
| } | |
| .event-log li { | |
| display: grid; | |
| grid-template-columns: 8px 64px 1fr; | |
| gap: 8px; | |
| align-items: start; | |
| padding: 7px 0; | |
| } | |
| .event-log li.event-empty { | |
| display: block; | |
| padding: 5px 0; | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1.4 var(--mono); | |
| } | |
| .event-pip { | |
| z-index: 1; | |
| margin-top: 2px; | |
| border: 1px solid var(--shell-panel); | |
| } | |
| .event-log time { | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1.2 var(--mono); | |
| } | |
| .event-log div { | |
| display: grid; | |
| gap: 3px; | |
| } | |
| .event-log strong { | |
| font: 500 var(--type-caption)/1 var(--mono); | |
| } | |
| .event-log small { | |
| color: var(--shell-muted); | |
| font-size: var(--type-utility); | |
| } | |
| .artifact-close { | |
| width: 25px; | |
| height: 25px; | |
| border: 1px solid var(--shell-line); | |
| border-radius: 6px; | |
| background: transparent; | |
| cursor: pointer; | |
| } | |
| .artifact-empty { | |
| margin: 0; | |
| color: var(--shell-muted); | |
| font: var(--type-caption)/1.5 var(--body); | |
| } | |
| .artifact-pane { | |
| border: 1px solid var(--shell-line); | |
| background: #f8f5eb; | |
| } | |
| .artifact-tabs { | |
| display: grid; | |
| grid-template-columns: auto auto 1fr; | |
| align-items: center; | |
| color: var(--shell-text); | |
| border-bottom: 1px solid var(--shell-line); | |
| background: var(--shell-raised); | |
| } | |
| .artifact-tabs button { | |
| padding: 7px 9px; | |
| border: 0; | |
| border-right: 1px solid var(--shell-line); | |
| background: transparent; | |
| min-height: 44px; | |
| font: var(--type-utility)/1 var(--mono); | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| } | |
| .artifact-tabs button[aria-selected="true"] { | |
| color: var(--ink); | |
| background: var(--phosphor); | |
| } | |
| .artifact-tabs span { | |
| overflow: hidden; | |
| padding: 0 8px; | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1 var(--mono); | |
| text-align: right; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .artifact-pane iframe { | |
| width: 100%; | |
| height: 260px; | |
| display: block; | |
| border: 0; | |
| background: white; | |
| } | |
| .artifact-running { | |
| position: relative; | |
| } | |
| .artifact-running > button { | |
| position: absolute; | |
| z-index: 2; | |
| top: 7px; | |
| right: 7px; | |
| padding: 5px 7px; | |
| color: var(--paper); | |
| border: 1px solid var(--rust); | |
| background: rgba(17, 21, 18, 0.9); | |
| min-height: 44px; | |
| font: var(--type-utility)/1 var(--mono); | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| } | |
| .artifact-launch { | |
| min-height: 180px; | |
| display: grid; | |
| align-content: center; | |
| justify-items: center; | |
| gap: 13px; | |
| padding: 20px; | |
| color: var(--ink); | |
| text-align: center; | |
| } | |
| .artifact-launch p { | |
| max-width: 250px; | |
| margin: 0; | |
| color: rgba(17, 21, 18, 0.62); | |
| font: var(--type-caption)/1.5 var(--mono); | |
| } | |
| .artifact-launch button { | |
| padding: 8px 10px; | |
| color: var(--ink); | |
| border: 1px solid var(--ink); | |
| background: var(--phosphor); | |
| min-height: 44px; | |
| font: 700 var(--type-utility)/1 var(--mono); | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| } | |
| .artifact-code { | |
| height: 260px; | |
| overflow: auto; | |
| margin: 0; | |
| padding: 10px; | |
| color: var(--paper); | |
| background: #0d100e; | |
| font: var(--type-utility)/1.5 var(--mono); | |
| white-space: pre-wrap; | |
| } | |
| .settings-layer { | |
| position: fixed; | |
| z-index: 50; | |
| inset: 0; | |
| display: flex; | |
| justify-content: flex-end; | |
| background: rgba(8, 11, 9, 0.64); | |
| animation: station-in 160ms ease both; | |
| } | |
| .settings-sheet { | |
| width: min(430px, 100%); | |
| min-height: 100%; | |
| overflow-y: auto; | |
| padding: 30px 27px; | |
| color: var(--shell-text); | |
| border-left: 1px solid var(--shell-accent); | |
| background: var(--shell-panel); | |
| box-shadow: -24px 0 70px rgba(0, 0, 0, 0.32); | |
| animation: sheet-in 300ms cubic-bezier(.16, 1, .3, 1) both; | |
| } | |
| .settings-sheet > header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 20px; | |
| margin-bottom: 37px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid var(--shell-line); | |
| } | |
| .settings-sheet h2 { | |
| margin: 0; | |
| font: 400 31px/1 var(--display); | |
| } | |
| .sheet-close { | |
| width: 35px; | |
| height: 35px; | |
| border: 1px solid var(--shell-line); | |
| border-radius: 50%; | |
| background: transparent; | |
| font: 300 22px/1 var(--body); | |
| cursor: pointer; | |
| } | |
| .sheet-close:hover { | |
| color: var(--shell-accent); | |
| border-color: var(--shell-accent); | |
| } | |
| .setting-group { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 15px 0; | |
| border-bottom: 1px solid var(--shell-line); | |
| } | |
| .setting-group > div, | |
| .range-setting > span:first-child { | |
| display: grid; | |
| gap: 5px; | |
| } | |
| .setting-group small, | |
| .range-setting small { | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1 var(--mono); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .setting-group strong, | |
| .range-setting strong { | |
| font: 500 var(--type-caption)/1 var(--mono); | |
| } | |
| .setting-locked { | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1 var(--mono); | |
| text-transform: uppercase; | |
| } | |
| .setting-select select { | |
| max-width: 112px; | |
| padding: 6px 7px; | |
| color: var(--shell-text); | |
| border: 1px solid var(--shell-line); | |
| border-radius: 0; | |
| background: var(--shell-raised); | |
| min-height: 44px; | |
| font: var(--type-utility)/1 var(--mono); | |
| } | |
| .range-setting { | |
| display: grid; | |
| gap: 13px; | |
| margin-top: 29px; | |
| } | |
| .range-setting > span:first-child { | |
| display: flex; | |
| align-items: end; | |
| justify-content: space-between; | |
| } | |
| .range-setting input { | |
| width: 100%; | |
| height: 4px; | |
| margin: 0; | |
| appearance: none; | |
| border: 1px solid var(--shell-line); | |
| border-radius: 0; | |
| background: linear-gradient(90deg, var(--shell-accent) 0 35%, var(--shell-line) 35%); | |
| } | |
| .range-setting:first-of-type input { | |
| background: var(--shell-accent); | |
| } | |
| .range-setting input::-webkit-slider-thumb { | |
| width: 12px; | |
| height: 18px; | |
| appearance: none; | |
| border: 2px solid var(--shell-panel); | |
| background: var(--shell-accent); | |
| box-shadow: 0 0 0 1px var(--shell-accent); | |
| cursor: grab; | |
| } | |
| .range-setting input::-moz-range-thumb { | |
| width: 10px; | |
| height: 16px; | |
| border: 2px solid var(--shell-panel); | |
| border-radius: 0; | |
| background: var(--shell-accent); | |
| box-shadow: 0 0 0 1px var(--shell-accent); | |
| cursor: grab; | |
| } | |
| .range-ticks { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: -13px; | |
| pointer-events: none; | |
| } | |
| .range-limits { | |
| display: flex; | |
| justify-content: space-between; | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1 var(--mono); | |
| } | |
| .range-limits i { | |
| font-style: normal; | |
| } | |
| .system-prompt-setting { | |
| display: grid; | |
| gap: 9px; | |
| margin-top: 29px; | |
| } | |
| .system-prompt-setting > span { | |
| display: flex; | |
| justify-content: space-between; | |
| color: var(--shell-muted); | |
| font: var(--type-utility)/1 var(--mono); | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| .system-prompt-setting textarea { | |
| resize: vertical; | |
| padding: 10px; | |
| color: var(--shell-text); | |
| border: 1px solid var(--shell-line); | |
| background: var(--shell-raised); | |
| font: var(--type-caption)/1.5 var(--mono); | |
| } | |
| .settings-actions { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 7px; | |
| margin-top: 29px; | |
| } | |
| .settings-actions button { | |
| padding: 9px; | |
| color: var(--shell-text); | |
| border: 1px solid var(--shell-line); | |
| background: transparent; | |
| min-height: 44px; | |
| font: var(--type-utility)/1.2 var(--mono); | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| } | |
| .settings-actions button:hover { | |
| color: var(--shell-accent); | |
| border-color: var(--shell-accent); | |
| } | |
| .settings-actions .danger-action { | |
| grid-column: span 2; | |
| color: #e78a62; | |
| border-color: rgba(201, 111, 67, 0.45); | |
| } | |
| .boot-screen { | |
| min-height: 100dvh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 18px; | |
| padding: 24px; | |
| color: var(--paper); | |
| background: var(--ink); | |
| } | |
| .boot-screen h1 { | |
| margin: 0; | |
| color: var(--phosphor); | |
| font: 400 34px/1 var(--display); | |
| } | |
| .boot-screen p:last-child { | |
| color: var(--paper-ghost); | |
| font: var(--type-caption)/1.5 var(--mono); | |
| } | |
| .range-ticks i { | |
| width: 1px; | |
| height: 5px; | |
| background: var(--shell-line); | |
| } | |
| .settings-note { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 13px; | |
| margin-top: 42px; | |
| padding: 15px; | |
| border: 1px solid color-mix(in srgb, var(--shell-accent) 35%, transparent); | |
| background: var(--shell-accent-dim); | |
| } | |
| .settings-note .signal-dot { | |
| flex: 0 0 7px; | |
| margin-top: 6px; | |
| } | |
| .settings-note p { | |
| margin: 0; | |
| color: var(--shell-muted); | |
| font-size: var(--type-caption); | |
| line-height: 1.5; | |
| } | |
| .settings-note strong { | |
| color: var(--shell-accent); | |
| } | |
| @keyframes station-in { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes rise-in { | |
| from { opacity: 0; transform: translateY(11px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes note-in { | |
| from { opacity: 0; transform: translateY(7px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes cursor-blink { | |
| 0%, 52% { opacity: 1; } | |
| 53%, 100% { opacity: 0; } | |
| } | |
| @keyframes activity-pulse { | |
| 0%, 100% { opacity: 0.55; transform: scale(0.82); } | |
| 50% { opacity: 1; transform: scale(1); } | |
| } | |
| @keyframes sheet-in { | |
| from { opacity: 0; transform: translateX(34px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @media (min-width: 2400px) { | |
| .station-frame { | |
| --type-utility: 0.9375rem; | |
| --type-caption: 1.0625rem; | |
| --type-body: 1.25rem; | |
| --type-heading: 2.35rem; | |
| } | |
| .station-header { | |
| min-height: 82px; | |
| grid-template-columns: 340px minmax(420px, 1fr) auto; | |
| } | |
| .brand-block { | |
| gap: 13px; | |
| padding: 14px 24px; | |
| } | |
| .brand-block h1 { | |
| font-size: 24px; | |
| } | |
| .brand-glyph { | |
| width: 42px; | |
| height: 42px; | |
| flex-basis: 42px; | |
| font-size: 18px; | |
| } | |
| .browser-notice { | |
| gap: 13px; | |
| padding-inline: 28px; | |
| } | |
| .header-actions { | |
| gap: 12px; | |
| padding-inline: 20px; | |
| } | |
| .layout-controls button, | |
| .icon-button { | |
| width: 44px; | |
| height: 44px; | |
| } | |
| .layout-controls svg, | |
| .icon-button svg { | |
| width: 21px; | |
| } | |
| .workspace-grid { | |
| min-height: calc(100dvh - 82px); | |
| grid-template-columns: 340px minmax(0, 1fr) 420px; | |
| } | |
| .workspace-grid.is-models-collapsed { | |
| grid-template-columns: 0 minmax(0, 1fr) 420px; | |
| } | |
| .workspace-grid.is-inspector-collapsed { | |
| grid-template-columns: 340px minmax(0, 1fr) 0; | |
| } | |
| .workspace-grid.is-models-collapsed.is-inspector-collapsed { | |
| grid-template-columns: 0 minmax(0, 1fr) 0; | |
| } | |
| .workspace-grid.layout-centered .chat-header { | |
| padding-inline: max(48px, calc((100% - 1440px) / 2 + 48px)); | |
| } | |
| .workspace-grid.layout-centered .transcript { | |
| padding-inline: max(72px, calc((100% - 1440px) / 2 + 72px)); | |
| } | |
| .workspace-grid.layout-centered .composer { | |
| padding-inline: max(52px, calc((100% - 1440px) / 2 + 52px)); | |
| } | |
| .model-rail { | |
| padding: 27px 20px 20px; | |
| } | |
| .model-list { | |
| gap: 8px; | |
| margin-top: 27px; | |
| } | |
| .model-select { | |
| min-height: 92px; | |
| padding: 16px 12px 15px; | |
| } | |
| .model-title-line strong, | |
| .rail-heading h2, | |
| .section-heading h2 { | |
| font-size: 24px; | |
| } | |
| .model-copy { | |
| gap: 5px; | |
| } | |
| .chat-surface, | |
| .inspector { | |
| min-height: calc(100dvh - 82px); | |
| height: calc(100dvh - 82px); | |
| } | |
| .chat-header { | |
| min-height: 90px; | |
| } | |
| .transcript { | |
| padding-top: 28px; | |
| padding-bottom: 42px; | |
| } | |
| .transcript-empty { | |
| max-width: 540px; | |
| } | |
| .transcript-empty h3, | |
| .conversation-list-empty h3 { | |
| font-size: 27px; | |
| } | |
| .message { | |
| max-width: 980px; | |
| } | |
| .message-user { | |
| max-width: min(78%, 780px); | |
| padding: 15px 18px 16px; | |
| } | |
| .composer { | |
| padding-top: 16px; | |
| padding-bottom: 24px; | |
| } | |
| .composer-field { | |
| min-height: 102px; | |
| border-radius: 12px; | |
| } | |
| .composer-field label { | |
| top: 9px; | |
| left: 14px; | |
| } | |
| .composer-field textarea { | |
| padding: 29px 16px 12px; | |
| } | |
| .send-button { | |
| min-width: 142px; | |
| min-height: 64px; | |
| margin: 9px; | |
| } | |
| .inspector-section { | |
| padding: 27px 24px; | |
| } | |
| .speed-gauge { | |
| grid-template-columns: 140px 1fr; | |
| gap: 19px; | |
| } | |
| .gauge-ring { | |
| width: 140px; | |
| height: 140px; | |
| } | |
| .gauge-ring strong { | |
| font-size: 34px; | |
| } | |
| .telemetry-live-grid { | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .telemetry-metric, | |
| .device-card { | |
| padding: 13px; | |
| } | |
| .settings-sheet { | |
| width: min(540px, 100%); | |
| padding: 38px 34px; | |
| } | |
| .settings-sheet h2 { | |
| font-size: 36px; | |
| } | |
| } | |
| @media (max-width: 1279px) { | |
| .station-header { | |
| grid-template-columns: 240px minmax(260px, 1fr) auto; | |
| } | |
| .browser-notice > span > span { | |
| display: none; | |
| } | |
| .browser-notice.is-warning > span > span { | |
| display: block; | |
| } | |
| .workspace-grid { | |
| grid-template-columns: 240px minmax(0, 1fr); | |
| grid-template-areas: | |
| "models chat" | |
| "inspector inspector"; | |
| } | |
| .workspace-grid.is-models-collapsed, | |
| .workspace-grid.is-models-collapsed.is-inspector-collapsed { | |
| grid-template-columns: 0 minmax(0, 1fr); | |
| } | |
| .workspace-grid.is-inspector-collapsed:not(.is-models-collapsed) { | |
| grid-template-columns: 240px minmax(0, 1fr); | |
| } | |
| .model-rail, | |
| .chat-surface { | |
| min-height: calc(100dvh - 64px); | |
| height: calc(100dvh - 64px); | |
| } | |
| .inspector { | |
| min-height: auto; | |
| height: auto; | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| overflow: visible; | |
| border-top: 1px solid var(--shell-line); | |
| border-left: 0; | |
| } | |
| .inspector-section { | |
| border-right: 1px solid var(--shell-line); | |
| border-bottom: 0; | |
| } | |
| } | |
| @media (max-width: 820px) { | |
| .station-header { | |
| min-height: 58px; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| } | |
| .brand-block { | |
| min-width: 0; | |
| padding: 10px 14px; | |
| border-right: 0; | |
| } | |
| .brand-glyph { | |
| width: 32px; | |
| height: 32px; | |
| flex-basis: 32px; | |
| } | |
| .browser-notice { | |
| grid-column: 1 / -1; | |
| grid-row: 2; | |
| min-height: 38px; | |
| padding: 7px 14px; | |
| border-top: 1px solid var(--shell-line); | |
| } | |
| .header-actions { | |
| grid-column: 2; | |
| grid-row: 1; | |
| position: static; | |
| padding-inline: 10px; | |
| border-left: 0; | |
| } | |
| .workspace-grid { | |
| display: block; | |
| } | |
| .model-rail, | |
| .chat-surface, | |
| .inspector { | |
| min-height: auto; | |
| height: auto; | |
| } | |
| .model-rail { | |
| display: block; | |
| padding: 18px 15px; | |
| border-right: 0; | |
| border-bottom: 1px solid var(--shell-line); | |
| } | |
| .model-list { | |
| display: flex; | |
| gap: 7px; | |
| overflow-x: auto; | |
| padding-bottom: 7px; | |
| scroll-snap-type: x mandatory; | |
| } | |
| .model-card { | |
| min-width: 205px; | |
| scroll-snap-align: start; | |
| } | |
| .rail-footnote { | |
| display: none; | |
| } | |
| .chat-surface { | |
| display: grid; | |
| width: 100% ; | |
| min-height: calc(100dvh - 96px); | |
| grid-template-rows: auto minmax(240px, auto) auto; | |
| overflow: visible; | |
| } | |
| .transcript { | |
| overflow: visible; | |
| padding-inline: 22px; | |
| } | |
| .workspace-grid.layout-centered .transcript { | |
| padding-inline: 22px; | |
| } | |
| .chat-header { | |
| padding: 17px 19px; | |
| } | |
| .workspace-grid.layout-centered .chat-header { | |
| padding-inline: 19px; | |
| } | |
| .chat-header-meta span:not(.live-label) { | |
| display: none; | |
| } | |
| .live-label { | |
| grid-column: 1; | |
| } | |
| .composer { | |
| position: relative; | |
| z-index: 5; | |
| padding-inline: 14px; | |
| } | |
| .workspace-grid.layout-centered .composer { | |
| padding-inline: 14px; | |
| } | |
| .transcript-empty { | |
| margin-top: 4vh; | |
| } | |
| .inspector { | |
| display: block; | |
| border-top: 1px solid var(--shell-line); | |
| } | |
| .inspector-section { | |
| border-right: 0; | |
| border-bottom: 1px solid var(--shell-line); | |
| } | |
| } | |
| @media (max-width: 520px) { | |
| .brand-block h1 { | |
| font-size: 18px; | |
| } | |
| .brand-block > div > span { | |
| display: none; | |
| } | |
| .layout-controls { | |
| gap: 2px; | |
| } | |
| .layout-controls button, | |
| .icon-button { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .chat-header { | |
| align-items: flex-end; | |
| } | |
| .architecture-subtitle { | |
| display: none; | |
| } | |
| .message-user { | |
| max-width: 91%; | |
| } | |
| .composer-meta > span { | |
| display: none; | |
| } | |
| .composer-activity { | |
| padding-inline: 10px; | |
| } | |
| .activity-status small { | |
| max-width: 210px; | |
| } | |
| .composer-field { | |
| grid-template-columns: 1fr; | |
| padding-bottom: 62px; | |
| } | |
| .send-button { | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| height: 52px; | |
| } | |
| .speed-gauge { | |
| grid-template-columns: 106px 1fr; | |
| } | |
| .gauge-ring { | |
| width: 102px; | |
| height: 102px; | |
| } | |
| .gauge-ring::after { | |
| display: none; | |
| } | |
| .telemetry-live-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| scroll-behavior: auto ; | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| /* Browser benchmark selected by the static Space deep-link. */ | |
| .matrix-page { | |
| min-height: 100dvh; | |
| padding: clamp(24px, 4vw, 64px); | |
| color: var(--ink); | |
| background: var(--paper); | |
| } | |
| .matrix-page > header, | |
| .matrix-controls { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| } | |
| .matrix-page > header { | |
| padding-bottom: 24px; | |
| border-bottom: 1px solid var(--line-dark); | |
| } | |
| .matrix-page h1 { | |
| margin: 5px 0 0; | |
| font: 500 clamp(34px, 4vw, 58px)/1 var(--display); | |
| } | |
| .matrix-page a { | |
| color: var(--ink); | |
| font: 700 12px/1 var(--mono); | |
| text-transform: uppercase; | |
| } | |
| .matrix-controls { | |
| justify-content: flex-start; | |
| margin-top: 28px; | |
| } | |
| .matrix-controls label { | |
| display: grid; | |
| gap: 7px; | |
| font: 700 11px/1 var(--mono); | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .matrix-controls select, | |
| .matrix-controls button { | |
| min-height: 44px; | |
| padding: 0 16px; | |
| color: var(--ink); | |
| border: 1px solid var(--ink); | |
| background: var(--paper-ghost); | |
| font: 700 12px/1 var(--mono); | |
| } | |
| .matrix-controls button { | |
| align-self: end; | |
| background: var(--phosphor); | |
| } | |
| .matrix-controls button:disabled { | |
| cursor: wait; | |
| opacity: 0.55; | |
| } | |
| .matrix-progress { | |
| margin: 22px 0; | |
| font: 700 13px/1.4 var(--mono); | |
| } | |
| .matrix-error, | |
| .matrix-report { | |
| overflow: auto; | |
| max-height: 70dvh; | |
| padding: 18px; | |
| border: 1px solid var(--line-dark); | |
| white-space: pre-wrap; | |
| } | |
| .matrix-error { | |
| color: var(--rust); | |
| } | |
| .matrix-report { | |
| color: var(--paper); | |
| background: var(--ink); | |
| } | |
| .bench-page { | |
| min-height: 100dvh; | |
| color: var(--ink); | |
| background: var(--paper); | |
| } | |
| .bench-masthead { | |
| min-height: 86px; | |
| display: grid; | |
| grid-template-columns: minmax(310px, 1fr) minmax(360px, 1.2fr) auto; | |
| align-items: stretch; | |
| color: var(--paper); | |
| border-bottom: 1px solid var(--phosphor); | |
| background: var(--ink); | |
| } | |
| .bench-masthead .brand-block h1 { | |
| color: var(--paper); | |
| } | |
| .bench-masthead-note { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| gap: 5px; | |
| padding: 14px 28px; | |
| border-inline: 1px solid var(--line-light); | |
| background: linear-gradient(110deg, rgba(185, 255, 69, 0.09), transparent 72%); | |
| } | |
| .bench-masthead-note strong { | |
| color: var(--phosphor); | |
| font: 700 9px/1 var(--mono); | |
| letter-spacing: 0.11em; | |
| text-transform: uppercase; | |
| } | |
| .bench-masthead-note span { | |
| max-width: 520px; | |
| color: rgba(232, 223, 202, 0.55); | |
| font: 10px/1.35 var(--body); | |
| } | |
| .bench-return { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 0 25px; | |
| color: var(--paper); | |
| font: 700 8px/1 var(--mono); | |
| letter-spacing: 0.08em; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| } | |
| .bench-return:hover { | |
| color: var(--phosphor); | |
| } | |
| .bench-layout { | |
| min-height: calc(100dvh - 86px); | |
| display: grid; | |
| grid-template-columns: minmax(275px, 330px) minmax(0, 1fr); | |
| } | |
| .bench-controls { | |
| padding: 28px 22px; | |
| color: var(--paper); | |
| border-right: 1px solid var(--phosphor); | |
| background: | |
| repeating-radial-gradient(ellipse at -12% 102%, transparent 0 24px, rgba(185, 255, 69, 0.045) 25px 26px), | |
| var(--ink); | |
| } | |
| .bench-controls h2 { | |
| margin: 0; | |
| font: 400 30px/1 var(--display); | |
| letter-spacing: -0.03em; | |
| } | |
| .bench-control-intro { | |
| margin: 9px 0 22px; | |
| color: rgba(232, 223, 202, 0.5); | |
| font-size: 11px; | |
| line-height: 1.45; | |
| } | |
| .bench-controls form { | |
| display: grid; | |
| gap: 15px; | |
| } | |
| .bench-field { | |
| min-width: 0; | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .bench-field > span { | |
| color: rgba(232, 223, 202, 0.78); | |
| font: 700 8px/1 var(--mono); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .bench-field select, | |
| .bench-field input { | |
| width: 100%; | |
| min-width: 0; | |
| height: 39px; | |
| padding: 0 10px; | |
| color: var(--paper); | |
| border: 1px solid rgba(232, 223, 202, 0.22); | |
| border-radius: 0; | |
| outline: 0; | |
| background: var(--ink-raised); | |
| font: 10px/1 var(--mono); | |
| } | |
| .bench-field input::placeholder { | |
| color: rgba(232, 223, 202, 0.25); | |
| } | |
| .bench-field select:disabled, | |
| .bench-field input:disabled { | |
| opacity: 0.5; | |
| } | |
| .bench-field small { | |
| color: rgba(232, 223, 202, 0.35); | |
| font: 8px/1.2 var(--mono); | |
| } | |
| .bench-field-pair { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .bench-experimental { | |
| padding: 11px; | |
| border: 1px dashed rgba(201, 111, 67, 0.48); | |
| background: rgba(201, 111, 67, 0.05); | |
| } | |
| .bench-experimental summary { | |
| color: #e19a76; | |
| font: 700 8px/1 var(--mono); | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| } | |
| .bench-experimental > p { | |
| margin: 10px 0; | |
| color: rgba(232, 223, 202, 0.46); | |
| font-size: 9px; | |
| line-height: 1.4; | |
| } | |
| .bench-locks { | |
| display: grid; | |
| gap: 5px; | |
| margin: 10px 0 0; | |
| color: rgba(232, 223, 202, 0.44); | |
| font: 7px/1.35 var(--mono); | |
| } | |
| .bench-locks div { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .bench-locks dt, | |
| .bench-locks dd { | |
| margin: 0; | |
| } | |
| .bench-locks dt { | |
| color: rgba(232, 223, 202, 0.72); | |
| } | |
| .bench-gate { | |
| display: grid; | |
| gap: 5px; | |
| padding: 10px; | |
| border-left: 2px solid var(--rust); | |
| background: rgba(201, 111, 67, 0.08); | |
| } | |
| .bench-gate.pass { | |
| border-color: var(--phosphor); | |
| background: var(--phosphor-dim); | |
| } | |
| .bench-gate strong { | |
| color: #ff9a68; | |
| font: 700 8px/1 var(--mono); | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .bench-gate.pass strong { | |
| color: var(--phosphor); | |
| } | |
| .bench-gate span { | |
| color: rgba(232, 223, 202, 0.5); | |
| font: 8px/1.4 var(--mono); | |
| overflow-wrap: anywhere; | |
| } | |
| .bench-run-actions { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 8px; | |
| } | |
| .bench-run-button, | |
| .bench-stop-button, | |
| .bench-section-heading button { | |
| min-height: 38px; | |
| padding: 0 13px; | |
| border: 1px solid var(--ink); | |
| border-radius: 0; | |
| background: var(--phosphor); | |
| font: 800 8px/1 var(--mono); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| } | |
| .bench-run-button:disabled { | |
| opacity: 0.35; | |
| } | |
| .bench-stop-button { | |
| color: #ffb08a; | |
| border-color: var(--rust); | |
| background: transparent; | |
| } | |
| .bench-workbench { | |
| min-width: 0; | |
| padding: clamp(26px, 4vw, 58px); | |
| background: | |
| linear-gradient(90deg, rgba(17, 21, 18, 0.045) 1px, transparent 1px) 0 0 / 22px 22px, | |
| linear-gradient(rgba(17, 21, 18, 0.04) 1px, transparent 1px) 0 0 / 22px 22px, | |
| var(--paper); | |
| } | |
| .bench-hero { | |
| display: grid; | |
| grid-template-columns: minmax(320px, 1.3fr) minmax(260px, 0.7fr); | |
| align-items: end; | |
| gap: 34px; | |
| padding-bottom: 29px; | |
| border-bottom: 1px solid var(--line-dark); | |
| } | |
| .bench-hero h2 { | |
| max-width: 690px; | |
| margin: 0; | |
| font: 400 clamp(42px, 6vw, 82px)/0.84 var(--display); | |
| letter-spacing: -0.065em; | |
| } | |
| .bench-hero h2 em { | |
| color: #4f7125; | |
| font-weight: 400; | |
| } | |
| .bench-hero > p { | |
| max-width: 430px; | |
| margin: 0; | |
| color: rgba(17, 21, 18, 0.58); | |
| font-size: 11px; | |
| line-height: 1.55; | |
| } | |
| .bench-progress { | |
| display: grid; | |
| gap: 8px; | |
| padding: 16px 0; | |
| } | |
| .bench-progress > div { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 20px; | |
| font: 8px/1 var(--mono); | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| .bench-progress > div span { | |
| color: rgba(17, 21, 18, 0.45); | |
| } | |
| .bench-progress-track { | |
| height: 3px; | |
| background: rgba(17, 21, 18, 0.13); | |
| } | |
| .bench-progress-track i { | |
| display: block; | |
| height: 100%; | |
| background: #527426; | |
| transition: width 180ms ease; | |
| } | |
| .bench-error { | |
| display: grid; | |
| gap: 5px; | |
| margin-bottom: 18px; | |
| padding: 12px 14px; | |
| color: var(--paper); | |
| border-left: 3px solid var(--rust); | |
| background: var(--ink); | |
| } | |
| .bench-error strong { | |
| color: #ff9a68; | |
| font: 700 8px/1 var(--mono); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .bench-error span { | |
| font: 9px/1.4 var(--mono); | |
| overflow-wrap: anywhere; | |
| } | |
| .bench-core-section { | |
| margin-top: 13px; | |
| } | |
| .bench-section-heading { | |
| display: flex; | |
| align-items: end; | |
| justify-content: space-between; | |
| gap: 20px; | |
| margin-bottom: 13px; | |
| } | |
| .bench-section-heading h3, | |
| .bench-output h3 { | |
| margin: 0; | |
| font: 500 24px/1 var(--display); | |
| } | |
| .bench-section-heading button { | |
| min-height: 31px; | |
| color: var(--paper); | |
| border-color: var(--ink); | |
| background: var(--ink); | |
| } | |
| .bench-core-sample { | |
| position: relative; | |
| overflow: hidden; | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| border: 1px solid var(--ink); | |
| background: var(--paper-deep); | |
| } | |
| .bench-core-sample::before { | |
| position: absolute; | |
| inset: -130% -5%; | |
| content: ""; | |
| pointer-events: none; | |
| opacity: 0.35; | |
| background: repeating-radial-gradient(ellipse at center, transparent 0 34px, rgba(17, 21, 18, 0.17) 35px 36px); | |
| } | |
| .bench-core-sample article { | |
| position: relative; | |
| min-height: 128px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| padding: 17px; | |
| border-right: 1px solid rgba(17, 21, 18, 0.26); | |
| background: rgba(232, 223, 202, 0.57); | |
| } | |
| .bench-core-sample article:nth-child(even) { | |
| background: rgba(216, 205, 180, 0.6); | |
| } | |
| .bench-core-sample article:last-child { | |
| color: var(--paper); | |
| border-right: 0; | |
| background: rgba(17, 21, 18, 0.91); | |
| } | |
| .bench-core-sample article > span { | |
| font: 800 8px/1 var(--mono); | |
| letter-spacing: 0.09em; | |
| text-transform: uppercase; | |
| } | |
| .bench-core-sample article strong { | |
| margin-block: auto; | |
| font: 400 clamp(28px, 3vw, 43px)/1 var(--display); | |
| letter-spacing: -0.04em; | |
| } | |
| .bench-core-sample article small { | |
| color: rgba(17, 21, 18, 0.5); | |
| font: 7px/1.2 var(--mono); | |
| text-transform: uppercase; | |
| } | |
| .bench-core-sample article:last-child small { | |
| color: rgba(232, 223, 202, 0.48); | |
| } | |
| .bench-detail-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| margin-top: 12px; | |
| } | |
| .bench-data-card { | |
| padding: 16px; | |
| border: 1px solid var(--line-dark); | |
| background: rgba(232, 223, 202, 0.68); | |
| } | |
| .bench-runtime-card, | |
| .bench-tuning-card { | |
| grid-column: span 2; | |
| } | |
| .bench-data-card dl { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px 26px; | |
| margin: 0; | |
| } | |
| .bench-runtime-card dl { | |
| grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(100px, 0.7fr)); | |
| } | |
| .bench-tuning-card dl { | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| } | |
| .bench-data-card dl div { | |
| min-width: 0; | |
| display: grid; | |
| gap: 4px; | |
| border-top: 1px solid rgba(17, 21, 18, 0.13); | |
| padding-top: 8px; | |
| } | |
| .bench-data-card dt { | |
| color: rgba(17, 21, 18, 0.45); | |
| font: 7px/1 var(--mono); | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| } | |
| .bench-data-card dd { | |
| min-width: 0; | |
| overflow: hidden; | |
| margin: 0; | |
| font: 500 16px/1.2 var(--body); | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .bench-output { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 34px; | |
| margin-top: 12px; | |
| padding: 21px; | |
| border: 1px dashed rgba(17, 21, 18, 0.3); | |
| } | |
| .bench-output > div:last-child { | |
| border-left: 1px solid var(--line-dark); | |
| padding-left: 34px; | |
| } | |
| .bench-output p:not(.eyebrow) { | |
| margin: 8px 0 0; | |
| color: rgba(17, 21, 18, 0.6); | |
| font-size: 11px; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| } | |
| @media (max-width: 1050px) { | |
| .bench-masthead { | |
| grid-template-columns: minmax(310px, 1fr) auto; | |
| } | |
| .bench-masthead-note { | |
| display: none; | |
| } | |
| .bench-layout { | |
| grid-template-columns: 285px minmax(0, 1fr); | |
| } | |
| .bench-core-sample { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .bench-core-sample article:nth-child(2) { | |
| border-right: 0; | |
| } | |
| .bench-core-sample article:nth-child(-n + 2) { | |
| border-bottom: 1px solid rgba(17, 21, 18, 0.26); | |
| } | |
| .bench-runtime-card dl { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| .bench-masthead { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .bench-masthead .brand-block { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .bench-return { | |
| padding: 0 15px; | |
| font-size: 0; | |
| } | |
| .bench-return span { | |
| font-size: 17px; | |
| } | |
| .bench-layout { | |
| display: block; | |
| } | |
| .bench-controls { | |
| border-right: 0; | |
| border-bottom: 1px solid var(--phosphor); | |
| } | |
| .bench-workbench { | |
| padding: 28px 16px; | |
| } | |
| .bench-hero, | |
| .bench-output { | |
| grid-template-columns: 1fr; | |
| gap: 18px; | |
| } | |
| .bench-hero h2 { | |
| font-size: clamp(42px, 14vw, 68px); | |
| } | |
| .bench-detail-grid { | |
| display: block; | |
| } | |
| .bench-data-card + .bench-data-card { | |
| margin-top: 10px; | |
| } | |
| .bench-output > div:last-child { | |
| border-top: 1px solid var(--line-dark); | |
| border-left: 0; | |
| padding-top: 18px; | |
| padding-left: 0; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .bench-masthead .brand-mark { | |
| display: none; | |
| } | |
| .bench-core-sample, | |
| .bench-data-card dl, | |
| .bench-runtime-card dl, | |
| .bench-tuning-card dl { | |
| grid-template-columns: 1fr; | |
| } | |
| .bench-core-sample article { | |
| min-height: 105px; | |
| border-right: 0; | |
| border-bottom: 1px solid rgba(17, 21, 18, 0.26); | |
| } | |
| .bench-core-sample article:last-child { | |
| border-bottom: 0; | |
| } | |
| } | |