Spaces:
Running
Running
| /* A technical note, not a landing page: hairlines instead of shadows, a | |
| reading serif for prose, tabular figures, and one restrained accent. */ | |
| :root { | |
| --paper: #fcfbf8; | |
| --panel: #ffffff; | |
| --ink: #16161a; | |
| --muted: #5d5d66; | |
| --faint: #8e8e98; | |
| --rule: #dcdad4; | |
| --rule-strong: #b4b1a8; | |
| --accent: #1f4e79; | |
| --accent-soft: #eef2f6; | |
| --error: #93291e; | |
| --ok: #2c6e49; | |
| --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; | |
| --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; | |
| --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --paper: #14141a; | |
| --panel: #1a1a21; | |
| --ink: #e6e5e1; | |
| --muted: #a2a2ac; | |
| --faint: #74747f; | |
| --rule: #2d2d36; | |
| --rule-strong: #4a4a56; | |
| --accent: #8ab4d8; | |
| --accent-soft: #1b2732; | |
| --error: #dd8a7c; | |
| --ok: #79c39a; | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| html { -webkit-text-size-adjust: 100%; } | |
| body { | |
| margin: 0; | |
| background: var(--paper); | |
| color: var(--ink); | |
| font: 17px/1.65 var(--serif); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .wrap { max-width: 52rem; margin: 0 auto; padding: 0 1.5rem; } | |
| .sr-only { | |
| position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; | |
| overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; | |
| } | |
| .mono { font-family: var(--mono); } | |
| /* ------------------------------------------------------------- masthead */ | |
| .masthead { | |
| padding: 3.5rem 0 1.75rem; | |
| border-bottom: 1px solid var(--rule-strong); | |
| margin-bottom: 2.5rem; | |
| } | |
| .kicker { | |
| margin: 0 0 0.6rem; | |
| font-family: var(--sans); | |
| font-size: 0.7rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| color: var(--faint); | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: clamp(1.6rem, 4vw, 2.15rem); | |
| line-height: 1.2; | |
| letter-spacing: -0.015em; | |
| font-weight: 600; | |
| max-width: 24ch; | |
| } | |
| .byline { | |
| margin: 0.9rem 0 0; | |
| color: var(--muted); | |
| max-width: 58ch; | |
| } | |
| .spec { | |
| margin: 1.75rem 0 0; | |
| display: grid; | |
| gap: 0.35rem 1.5rem; | |
| font-family: var(--sans); | |
| font-size: 0.82rem; | |
| } | |
| .spec > div { | |
| display: grid; | |
| grid-template-columns: 6.5rem 1fr; | |
| gap: 0.75rem; | |
| padding: 0.3rem 0; | |
| border-top: 1px solid var(--rule); | |
| } | |
| .spec dt { color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.68rem; padding-top: 0.15rem; } | |
| .spec dd { margin: 0; color: var(--muted); } | |
| /* -------------------------------------------------------------- sections */ | |
| .sect { margin: 0 0 3rem; } | |
| h2 { | |
| margin: 0 0 1rem; | |
| font-family: var(--sans); | |
| font-size: 0.78rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.13em; | |
| font-weight: 650; | |
| color: var(--ink); | |
| padding-bottom: 0.5rem; | |
| border-bottom: 1px solid var(--rule); | |
| display: flex; | |
| align-items: baseline; | |
| gap: 0.7rem; | |
| } | |
| .num { color: var(--faint); font-variant-numeric: tabular-nums; } | |
| .prose { margin: 0 0 1rem; max-width: 62ch; } | |
| .prose em { font-style: italic; } | |
| .prose strong { font-weight: 650; } | |
| .limits { padding-left: 1.1rem; } | |
| .limits li { margin-bottom: 0.7rem; } | |
| .fine { | |
| font-family: var(--sans); | |
| font-size: 0.8rem; | |
| line-height: 1.55; | |
| color: var(--muted); | |
| margin: 0.6rem 0 0; | |
| max-width: 66ch; | |
| } | |
| code { | |
| font-family: var(--mono); | |
| font-size: 0.85em; | |
| background: var(--accent-soft); | |
| padding: 0.1em 0.35em; | |
| border-radius: 3px; | |
| } | |
| /* ------------------------------------------------------------ apparatus */ | |
| .apparatus { | |
| border: 1px solid var(--rule); | |
| border-radius: 4px; | |
| background: var(--panel); | |
| padding: 1rem 1.1rem; | |
| margin: 0 0 1rem; | |
| } | |
| details.apparatus > summary { | |
| cursor: pointer; | |
| font-family: var(--sans); | |
| font-size: 0.8rem; | |
| color: var(--muted); | |
| letter-spacing: 0.02em; | |
| } | |
| details.apparatus[open] > summary { margin-bottom: 0.9rem; } | |
| .advanced { border: none; border-top: 1px solid var(--rule); padding: 0.8rem 0 0; margin: 0.9rem 0 0; background: none; } | |
| .advanced summary { cursor: pointer; font-family: var(--sans); font-size: 0.78rem; color: var(--faint); } | |
| .grid-2 { | |
| display: grid; gap: 0.75rem 1.1rem; margin: 0.9rem 0; | |
| grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); | |
| } | |
| .grid-2 label { | |
| display: grid; gap: 0.3rem; | |
| font-family: var(--sans); font-size: 0.68rem; | |
| text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); | |
| } | |
| #model-card[data-state="idle"] .model-loading, | |
| #model-card[data-state="idle"] .model-ready, | |
| #model-card[data-state="loading"] .model-idle, | |
| #model-card[data-state="loading"] .model-ready, | |
| #model-card[data-state="ready"] .model-idle, | |
| #model-card[data-state="ready"] .model-loading { display: none ; } | |
| .model-idle { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } | |
| .model-idle .fine { margin: 0; flex: 1 1 20rem; } | |
| .model-ready { display: flex; align-items: center; gap: 0.6rem; } | |
| .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; } | |
| .bar { height: 4px; background: var(--rule); overflow: hidden; } | |
| .bar-fill { height: 100%; background: var(--accent); transition: width 0.25s ease; } | |
| /* Session creation and shader compilation report no progress, so the bar | |
| stops measuring and starts only showing that work is still happening. */ | |
| .bar-fill.working { | |
| background: linear-gradient( | |
| 90deg, | |
| var(--rule) 0%, var(--accent) 35%, var(--accent) 65%, var(--rule) 100% | |
| ); | |
| background-size: 220% 100%; | |
| animation: sweep 1.4s linear infinite; | |
| } | |
| @keyframes sweep { | |
| from { background-position: 120% 0; } | |
| to { background-position: -120% 0; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .bar-fill.working { animation: none; opacity: 0.55; } | |
| } | |
| /* --------------------------------------------------------------- inputs */ | |
| textarea, input[type="text"], select { | |
| width: 100%; | |
| font-family: var(--mono); | |
| font-size: 12.5px; | |
| padding: 0.5rem 0.6rem; | |
| border: 1px solid var(--rule); | |
| border-radius: 3px; | |
| background: var(--paper); | |
| color: var(--ink); | |
| resize: vertical; | |
| } | |
| textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } | |
| .prompt-row { display: flex; gap: 0.5rem; flex-wrap: wrap; } | |
| .prompt-row input { | |
| flex: 1 1 20rem; | |
| font-family: var(--serif); | |
| font-size: 1rem; | |
| padding: 0.6rem 0.75rem; | |
| } | |
| button { | |
| font-family: var(--sans); | |
| font-size: 0.85rem; | |
| padding: 0.5rem 1rem; | |
| border: 1px solid var(--rule-strong); | |
| border-radius: 3px; | |
| background: var(--panel); | |
| color: var(--ink); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| } | |
| button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } | |
| button:disabled { opacity: 0.4; cursor: default; } | |
| button.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500; } | |
| button.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; } | |
| button.ghost { background: transparent; color: var(--muted); } | |
| button.link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; font-size: 0.78rem; } | |
| .chips { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.7rem; } | |
| .chip { | |
| font-family: var(--sans); | |
| font-size: 0.76rem; | |
| padding: 0.22rem 0.6rem; | |
| border-radius: 2px; | |
| border: 1px solid var(--rule); | |
| background: transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| } | |
| .chip:hover { border-color: var(--accent); color: var(--accent); } | |
| .row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.7rem; flex-wrap: wrap; } | |
| .row select { width: auto; } | |
| label.inline { | |
| display: inline-flex; align-items: center; gap: 0.4rem; | |
| font-family: var(--sans); font-size: 0.8rem; color: var(--muted); | |
| } | |
| .run-status { | |
| margin: 0.7rem 0 0; | |
| font-size: 0.78rem; | |
| color: var(--muted); | |
| min-height: 1.3em; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .run-status[data-tone="warn"] { color: var(--error); } | |
| .error { color: var(--error); font-size: 0.78rem; min-height: 1.1em; margin: 0.5rem 0 0; } | |
| /* --------------------------------------------------------------- figures */ | |
| .split { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; align-items: start; } | |
| @media (max-width: 50rem) { .split { grid-template-columns: 1fr; } } | |
| .panel { margin: 0; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); padding: 0.9rem 1rem 1rem; } | |
| figcaption { | |
| font-family: var(--sans); | |
| font-size: 0.7rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.09em; | |
| color: var(--faint); | |
| padding-bottom: 0.6rem; | |
| margin-bottom: 0.8rem; | |
| border-bottom: 1px solid var(--rule); | |
| } | |
| .stream { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| line-height: 1.6; | |
| background: var(--paper); | |
| border: 1px solid var(--rule); | |
| padding: 0.7rem; | |
| min-height: 11rem; | |
| max-height: 24rem; | |
| overflow: auto; | |
| white-space: pre-wrap; | |
| margin: 0; | |
| } | |
| .stream:empty::before { content: "awaiting generation"; color: var(--faint); font-family: var(--sans); } | |
| .stats { | |
| display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; | |
| margin: 0.8rem 0 0; font-variant-numeric: tabular-nums; font-family: var(--sans); | |
| } | |
| .stats div { display: grid; gap: 0.1rem; } | |
| .stats dt { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); } | |
| .stats dd { margin: 0; font-size: 0.9rem; font-weight: 550; } | |
| .app-surface { border: 1px dashed var(--rule); border-radius: 3px; padding: 0.9rem; min-height: 11rem; font-family: var(--sans); } | |
| .p-col { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; } | |
| .p-row { display: flex; flex-direction: row; gap: 0.45rem; align-items: center; flex-wrap: wrap; } | |
| .p-sp { height: 0.7rem; } | |
| .p-txt { margin: 0; font-size: 0.95rem; } | |
| .p-btn { align-self: flex-start; } | |
| .p-chk { display: flex; gap: 0.4rem; align-items: center; font-size: 0.9rem; } | |
| .p-in { width: 100%; font-family: var(--sans); font-size: 0.9rem; } | |
| .p-list, .p-if { display: flex; flex-direction: column; gap: 0.35rem; } | |
| .p-empty { color: var(--faint); font-size: 0.85rem; font-style: italic; } | |
| #state-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; margin-top: 0.9rem; } | |
| #state-table td { padding: 0.22rem 0.4rem; border-bottom: 1px solid var(--rule); vertical-align: top; } | |
| #state-table td:first-child { color: var(--accent); white-space: nowrap; } | |
| #state-table td:nth-child(2) { color: var(--faint); white-space: nowrap; } | |
| .probe-out { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0.8rem 0 0; font-family: var(--sans); font-size: 0.8rem; } | |
| .probe-out dt { color: var(--faint); } | |
| .probe-out dd { margin: 0; font-family: var(--mono); word-break: break-all; } | |
| .charset { line-height: 1.85; letter-spacing: 0.08em; } | |
| /* --------------------------------------------------------------- tables */ | |
| table.scores { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 0.5rem 0 0; | |
| font-family: var(--sans); | |
| font-size: 0.88rem; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .scores caption { | |
| caption-side: top; | |
| text-align: left; | |
| font-size: 0.7rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.09em; | |
| color: var(--faint); | |
| padding-bottom: 0.6rem; | |
| } | |
| .scores th, .scores td { text-align: right; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); } | |
| .scores th:first-child, .scores td:first-child { text-align: left; color: var(--muted); font-weight: 400; } | |
| .scores thead th { | |
| font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; | |
| color: var(--faint); font-weight: 600; border-bottom: 1px solid var(--rule-strong); | |
| } | |
| .scores td.win { font-weight: 650; color: var(--ink); } | |
| .scores tr.unchanged td { color: var(--faint); } | |
| .scores tbody tr:last-child td { border-bottom: 1px solid var(--rule-strong); } | |
| footer { border-top: 1px solid var(--rule); margin-top: 1rem; padding: 1.5rem 0 3rem; } | |
| footer .fine { margin: 0; } | |