Spaces:
Running
Running
| /* html studio — application layer. | |
| Every value below resolves to a design-system token. Nothing hardcodes a hex | |
| except where a token does not exist, so `[data-theme="paper"]` inverts the | |
| whole app with no light-specific branch. */ | |
| /* Several rules here set `display`, which would otherwise beat the UA's | |
| `[hidden] { display:none }`. Keep the attribute authoritative. */ | |
| [hidden] { display: none ; } | |
| html, body { height: 100%; } | |
| body { | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| font: var(--type-ui); | |
| letter-spacing: var(--tracking-body); | |
| } | |
| /* ── corner brackets ───────────────────────────────────────────── | |
| The edge signature: 9px crop marks sitting 1px outside the border, | |
| echoing the brackets of the [#] logomark. */ | |
| .corners { position: absolute; inset: 0; pointer-events: none; } | |
| .corners i { | |
| position: absolute; | |
| width: var(--corner-arm); height: var(--corner-arm); | |
| border: 0 solid var(--corner-color); | |
| transition: var(--t-color); | |
| } | |
| .corners i:nth-child(1) { top: var(--corner-inset); left: var(--corner-inset); border-top-width: var(--corner-weight); border-left-width: var(--corner-weight); } | |
| .corners i:nth-child(2) { top: var(--corner-inset); right: var(--corner-inset); border-top-width: var(--corner-weight); border-right-width: var(--corner-weight); } | |
| .corners i:nth-child(3) { bottom: var(--corner-inset); left: var(--corner-inset); border-bottom-width: var(--corner-weight); border-left-width: var(--corner-weight); } | |
| .corners i:nth-child(4) { bottom: var(--corner-inset); right: var(--corner-inset); border-bottom-width: var(--corner-weight); border-right-width: var(--corner-weight); } | |
| /* ── nav ─────────────────────────────────────────────────────────── */ | |
| .nav { | |
| position: relative; | |
| z-index: 3; | |
| flex: none; | |
| height: var(--nav-h); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: 0 var(--space-4); | |
| border-bottom: 1px solid var(--border-hairline); | |
| background: var(--surface-nav); | |
| backdrop-filter: blur(12px); | |
| } | |
| .nav-spacer { flex: 1; } | |
| .nav-div { width: 1px; height: 18px; background: var(--border-default); } | |
| .nav-title { | |
| font: var(--type-label); | |
| letter-spacing: var(--tracking-label); | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| } | |
| .lockup { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } | |
| .mark { | |
| font-family: var(--font-logomark); | |
| font-weight: 700; | |
| font-size: 19px; | |
| line-height: 1; | |
| letter-spacing: -0.06em; | |
| margin-right: -0.06em; | |
| color: var(--accent); | |
| } | |
| .wordmark { | |
| font: var(--weight-semibold) 19px/1 var(--font-sans); | |
| letter-spacing: -0.035em; | |
| color: var(--text-primary); | |
| } | |
| .lockup:hover .wordmark { color: var(--text-primary); } | |
| .auth { display: flex; align-items: center; gap: var(--space-2); } | |
| .whoami { display: flex; align-items: center; gap: var(--space-2); } | |
| .whoami img { border-radius: 0; background: var(--bg-raised); } | |
| #username { | |
| max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | |
| color: var(--text-secondary); | |
| } | |
| .mono { font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); } | |
| /* ── buttons ─────────────────────────────────────────────────────── */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| height: var(--control-h); | |
| padding: 0 14px; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-control); | |
| font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); | |
| letter-spacing: var(--tracking-body); | |
| white-space: nowrap; | |
| cursor: pointer; | |
| transition: var(--t-control); | |
| background: transparent; | |
| color: var(--text-primary); | |
| } | |
| .btn i { font-size: 15px; line-height: 1; } | |
| .btn-sm { height: var(--control-h-sm); padding: 0 10px; font-size: var(--text-xs); gap: 6px; } | |
| .btn-sm i { font-size: 14px; } | |
| .btn-lg { height: var(--control-h-lg); padding: 0 20px; font-size: var(--text-md); } | |
| .btn-full { flex: 1; } | |
| .btn-icon { padding: 0; width: var(--control-h-sm); } | |
| .btn-icon i { font-size: 15px; } | |
| /* Press moves the control into its own hard shadow. No scale, no ripple. */ | |
| .btn:active:not(:disabled) { transform: translate(1px, 1px); } | |
| .btn:disabled { opacity: .42; cursor: not-allowed; } | |
| .btn:focus-visible { outline: none; box-shadow: var(--ring-focus); } | |
| .btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-inset-top); } | |
| .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } | |
| .btn-primary:active:not(:disabled) { background: var(--accent-press); } | |
| .btn-secondary { background: var(--bg-raised); border-color: var(--border-default); } | |
| .btn-secondary:hover:not(:disabled) { background: var(--ink-700); } | |
| .btn-ghost { color: var(--text-secondary); } | |
| .btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); } | |
| .btn-outline { border-color: var(--border-strong); } | |
| .btn-outline:hover:not(:disabled) { background: var(--accent-quiet); border-color: var(--flare-a40); color: var(--text-accent); } | |
| /* ── token row ───────────────────────────────────────────────────── */ | |
| .tokenrow { | |
| position: relative; | |
| z-index: 2; | |
| flex: none; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-3) var(--space-4); | |
| border-bottom: 1px solid var(--border-hairline); | |
| background: var(--bg-surface); | |
| flex-wrap: wrap; | |
| } | |
| .tokenrow label { | |
| font: var(--type-label); | |
| letter-spacing: var(--tracking-label); | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| } | |
| .inputwrap { | |
| flex: 1 1 280px; | |
| min-width: 0; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| height: var(--control-h); | |
| padding: 0 var(--space-3); | |
| background: var(--bg-inset); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-control); | |
| box-shadow: var(--shadow-inset-well); | |
| transition: var(--t-control); | |
| } | |
| .inputwrap:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--flare-a24); } | |
| .inputwrap i { color: var(--text-faint); font-size: 14px; } | |
| .inputwrap input { | |
| flex: 1; min-width: 0; | |
| background: transparent; border: 0; outline: none; | |
| color: var(--text-primary); | |
| font: var(--weight-regular) var(--text-xs)/1 var(--font-mono); | |
| } | |
| /* ── layout ──────────────────────────────────────────────────────── */ | |
| .layout { | |
| position: relative; | |
| flex: 1; | |
| min-height: 0; | |
| display: grid; | |
| grid-template-columns: var(--sidebar-w-studio, 380px) 1fr; | |
| } | |
| .rail { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-5); | |
| padding: var(--space-5); | |
| border-right: 1px solid var(--border-hairline); | |
| background: var(--bg-canvas); | |
| overflow-y: auto; | |
| min-height: 0; | |
| } | |
| .output { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-canvas); } | |
| /* ── fields ──────────────────────────────────────────────────────── */ | |
| .field { display: flex; flex-direction: column; gap: 6px; min-height: 0; } | |
| .field-grow { flex: 1; min-height: 140px; } | |
| .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: end; } | |
| label { | |
| font: var(--type-label); | |
| letter-spacing: var(--tracking-label); | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| } | |
| .mono-val { | |
| font: var(--weight-medium) var(--text-2xs)/1 var(--font-mono); | |
| letter-spacing: var(--tracking-mono); | |
| text-transform: none; | |
| color: var(--text-secondary); | |
| } | |
| select, textarea, input[type=number] { | |
| width: 100%; | |
| background: var(--bg-inset); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-control); | |
| padding: 9px var(--space-3); | |
| font: var(--weight-regular) var(--text-sm)/1.5 var(--font-sans); | |
| box-shadow: var(--shadow-inset-well); | |
| transition: var(--t-control); | |
| } | |
| select:focus, textarea:focus, input[type=number]:focus { | |
| outline: none; | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px var(--flare-a24); | |
| } | |
| textarea { resize: none; } | |
| #prompt { flex: 1; min-height: 120px; line-height: var(--leading-normal); } | |
| #system { font: var(--type-code); resize: vertical; } | |
| input[type=number] { | |
| height: var(--control-h); | |
| padding: 0 var(--space-3); | |
| line-height: 1; | |
| font-family: var(--font-mono); | |
| font-size: var(--text-xs); | |
| } | |
| .selectwrap { position: relative; display: block; } | |
| .selectwrap .caret { | |
| position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); | |
| color: var(--text-faint); font-size: 12px; pointer-events: none; | |
| } | |
| /* Fixed-height controls: zero the block padding so the text is not clipped by | |
| the border-box height coming from --control-h. */ | |
| select { | |
| appearance: none; | |
| height: var(--control-h); | |
| padding: 0 30px 0 var(--space-3); | |
| line-height: 1; | |
| cursor: pointer; | |
| } | |
| select optgroup { | |
| background: var(--bg-surface); color: var(--text-faint); | |
| font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); font-style: normal; | |
| } | |
| select option { background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-mono); } | |
| input[type=range] { | |
| accent-color: var(--accent); | |
| padding: 0; background: none; border: none; box-shadow: none; height: 18px; | |
| } | |
| .hint { | |
| margin: 0; | |
| font: var(--weight-regular) var(--text-xs)/1.45 var(--font-sans); | |
| color: var(--text-faint); | |
| } | |
| .advanced { border-top: 1px solid var(--border-hairline); padding-top: var(--space-3); } | |
| .advanced summary { | |
| cursor: pointer; | |
| font: var(--type-label); | |
| letter-spacing: var(--tracking-label); | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| list-style: none; | |
| } | |
| .advanced summary::-webkit-details-marker { display: none; } | |
| .advanced summary::before { | |
| content: "▸"; display: inline-block; margin-right: 7px; | |
| transition: transform var(--dur-fast) var(--ease-out); | |
| } | |
| .advanced[open] summary::before { transform: rotate(90deg); } | |
| .advanced[open] > .field, .advanced[open] > .field-row { margin-top: var(--space-3); } | |
| .actions { display: flex; gap: var(--space-2); } | |
| /* ── example tags ────────────────────────────────────────────────── */ | |
| .examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } | |
| .examples-label { | |
| font: var(--type-label); | |
| letter-spacing: var(--tracking-label); | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| margin-right: 2px; | |
| } | |
| .tag { | |
| font: var(--weight-medium) var(--text-2xs)/1 var(--font-mono); | |
| letter-spacing: var(--tracking-mono); | |
| text-transform: uppercase; | |
| padding: 6px 9px; | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: var(--t-control); | |
| } | |
| .tag:hover { background: var(--accent-quiet); border-color: var(--flare-a40); color: var(--text-accent); } | |
| .tag:active { transform: translate(1px, 1px); } | |
| .tag:focus-visible { outline: none; box-shadow: var(--ring-focus); } | |
| /* ── tabs ────────────────────────────────────────────────────────── */ | |
| .tabs { | |
| flex: none; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| height: var(--nav-h); | |
| padding: 0 var(--space-3); | |
| border-bottom: 1px solid var(--border-hairline); | |
| background: var(--bg-canvas); | |
| } | |
| .tabs-spacer { flex: 1; } | |
| .tab { | |
| position: relative; | |
| height: 100%; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 0 var(--space-3); | |
| border: 0; | |
| background: transparent; | |
| color: var(--text-faint); | |
| font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); | |
| letter-spacing: var(--tracking-mono); | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| transition: var(--t-color); | |
| } | |
| .tab:hover { color: var(--text-secondary); } | |
| .tab.is-active { color: var(--text-primary); } | |
| /* Active marker is the accent, per the one-accent rule. */ | |
| .tab.is-active::after { | |
| content: ""; position: absolute; left: 0; right: 0; bottom: -1px; | |
| height: 2px; background: var(--accent); | |
| } | |
| .tab:focus-visible { outline: none; box-shadow: var(--ring-focus); } | |
| .meta { | |
| font: var(--type-label); | |
| letter-spacing: var(--tracking-mono); | |
| padding: 3px 5px; | |
| background: var(--w-a06); | |
| color: var(--text-faint); | |
| } | |
| .meta:empty { display: none; } | |
| .status { | |
| display: flex; align-items: center; gap: var(--space-2); | |
| font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); | |
| letter-spacing: var(--tracking-mono); | |
| color: var(--text-muted); | |
| } | |
| .status.is-err { color: var(--status-error); } | |
| .status.is-ok { color: var(--status-live); } | |
| /* Status dots are squares — nothing in this system is circular. */ | |
| .dot { width: 8px; height: 8px; flex: none; background: var(--status-idle); border-radius: 0; } | |
| .dot.is-live { background: var(--status-live); box-shadow: var(--glow-live); } | |
| .dot.is-err { background: var(--status-error); } | |
| .dot.is-building { background: var(--status-building); } | |
| .dot.is-building::after { | |
| content: ""; position: absolute; inset: 0; background: var(--status-building); | |
| animation: harvis-pulse 1.8s var(--ease-out) infinite; | |
| } | |
| .status .dot { position: relative; } | |
| @keyframes harvis-pulse { | |
| 0% { transform: scale(1); opacity: .6; } | |
| 70% { transform: scale(2.6); opacity: 0; } | |
| 100% { opacity: 0; } | |
| } | |
| /* ── panes ───────────────────────────────────────────────────────── */ | |
| .pane { flex: 1; min-height: 0; position: relative; } | |
| .pane-preview { background: var(--bg-inset); } | |
| #preview { width: 100%; height: 100%; border: 0; background: var(--white); display: block; } | |
| #code { | |
| width: 100%; height: 100%; | |
| border: 0; border-radius: 0; box-shadow: none; | |
| background: var(--surface-code); | |
| color: var(--text-secondary); | |
| font: var(--type-code); | |
| padding: var(--space-4) var(--space-5); | |
| resize: none; | |
| tab-size: 2; | |
| } | |
| #code:focus { box-shadow: none; border: 0; } | |
| /* Empty state carries the accent bloom and the corner brackets. */ | |
| .empty { | |
| position: absolute; | |
| inset: var(--space-6); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-1); | |
| text-align: center; | |
| padding: var(--space-6); | |
| border: 1px dashed var(--border-default); | |
| border-radius: var(--radius-card); | |
| background-image: var(--bg-wash); | |
| background-size: cover; | |
| } | |
| .empty p { margin: 0; } | |
| .empty-title { font: var(--weight-medium) var(--text-md)/1.4 var(--font-sans); color: var(--text-secondary); } | |
| .empty-mark { font-size: 24px; color: var(--accent); margin-bottom: var(--space-3); } | |
| /* ── deploy bar ──────────────────────────────────────────────────── */ | |
| .deploybar { | |
| flex: none; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-3) var(--space-4); | |
| border-top: 1px solid var(--border-hairline); | |
| background: var(--bg-surface); | |
| flex-wrap: wrap; | |
| } | |
| .deployresult { | |
| flex: 1 1 320px; | |
| min-width: 0; | |
| font: var(--weight-regular) var(--text-xs)/1.55 var(--font-mono); | |
| letter-spacing: var(--tracking-mono); | |
| color: var(--text-muted); | |
| overflow-wrap: anywhere; | |
| } | |
| .deployresult a { color: var(--text-link); } | |
| .deployresult a:hover { color: var(--text-link-hover); } | |
| .deployresult .live { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); } | |
| .deployresult .claim-note { display: block; margin-top: 3px; color: var(--text-faint); font-size: var(--text-2xs); } | |
| .deployresult.is-err { color: var(--status-error); } | |
| .copy { | |
| font: var(--weight-medium) var(--text-2xs)/1 var(--font-mono); | |
| letter-spacing: var(--tracking-label); | |
| text-transform: uppercase; | |
| margin-left: 6px; | |
| padding: 3px 6px; | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-faint); | |
| cursor: pointer; | |
| transition: var(--t-control); | |
| } | |
| .copy:hover { background: var(--accent-quiet); border-color: var(--flare-a40); color: var(--text-accent); } | |
| .copy:active { transform: translate(1px, 1px); } | |
| /* ── toast — fixed bottom-right, 340px, hard offset shadow ───────── */ | |
| .toast { | |
| position: fixed; | |
| right: var(--space-4); | |
| bottom: var(--space-4); | |
| z-index: 50; | |
| width: 340px; | |
| max-width: calc(100vw - var(--space-8)); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-3) var(--space-4); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-card); | |
| background: var(--bg-raised); | |
| box-shadow: var(--shadow-3); | |
| color: var(--text-primary); | |
| font: var(--weight-medium) var(--text-xs)/1.4 var(--font-sans); | |
| animation: toast-in var(--dur-base) var(--ease-snap); | |
| } | |
| .toast .corners i { border-color: var(--corner-color-accent); } | |
| @keyframes toast-in { from { opacity: 0; } } | |
| /* ── scrollbars ──────────────────────────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 10px; height: 10px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--ink-700); border: 3px solid var(--bg-canvas); } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--ink-600); } | |
| /* ── responsive ──────────────────────────────────────────────────── */ | |
| @media (max-width: 940px) { | |
| body { overflow: auto; } | |
| .layout { grid-template-columns: 1fr; } | |
| .rail { border-right: 0; border-bottom: 1px solid var(--border-hairline); overflow: visible; } | |
| .output { min-height: 76vh; } | |
| .nav-div, .nav-title { display: none; } | |
| #signin span, #tokentoggle { display: none; } | |
| } | |