Spaces:
Running
Running
| /* ── tokens ──────────────────────────────────────────────────────── */ | |
| :root { | |
| --bg: #0c0d12; | |
| --bg-1: #131520; | |
| --bg-2: #191c2a; | |
| --bg-3: #21253550; | |
| --line: #262a3b; | |
| --line-soft: #1d2130; | |
| --text: #e7e9f2; | |
| --text-dim: #9aa0b8; | |
| --text-mute: #6b7191; | |
| --accent: #7c6bff; | |
| --accent-2: #ff5fa8; | |
| --accent-dim:#1c1a3a; | |
| --ok: #35d39a; | |
| --warn: #ffcc55; | |
| --err: #ff6b81; | |
| --radius: 11px; | |
| --radius-sm: 8px; | |
| --rail: 384px; | |
| --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; | |
| --sans: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, system-ui, sans-serif; | |
| } | |
| * { box-sizing: border-box; } | |
| /* Several rules below set `display`, which would otherwise beat the UA's | |
| * `[hidden] { display: none }`. Keep the attribute authoritative. */ | |
| [hidden] { display: none ; } | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font: 15px/1.55 var(--sans); | |
| -webkit-font-smoothing: antialiased; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| /* subtle aurora so the dark UI isn't flat */ | |
| body::before { | |
| content: ""; | |
| position: fixed; | |
| inset: -30% -10% auto -10%; | |
| height: 60vh; | |
| background: | |
| radial-gradient(48% 60% at 22% 0%, #7c6bff22, transparent 70%), | |
| radial-gradient(40% 55% at 82% 8%, #ff5fa81a, transparent 70%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* ── top bar ─────────────────────────────────────────────────────── */ | |
| .topbar { | |
| position: relative; | |
| z-index: 2; | |
| flex: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 12px 18px; | |
| border-bottom: 1px solid var(--line); | |
| background: #0c0d12cc; | |
| backdrop-filter: blur(12px); | |
| } | |
| .brand { display: flex; align-items: center; gap: 9px; min-width: 0; } | |
| .brand-mark { font-size: 19px; line-height: 1; } | |
| .brand h1 { | |
| margin: 0; | |
| font-size: 16px; | |
| font-weight: 650; | |
| letter-spacing: -0.015em; | |
| } | |
| .brand-arrow { color: var(--text-mute); font-size: 15px; } | |
| .brand-dest { | |
| color: var(--text-dim); | |
| font-size: 14px; | |
| text-decoration: none; | |
| border-bottom: 1px dashed #ffffff26; | |
| padding-bottom: 1px; | |
| } | |
| .brand-dest:hover { color: var(--text); border-bottom-color: var(--accent); } | |
| .auth { display: flex; align-items: center; gap: 8px; } | |
| .whoami { display: flex; align-items: center; gap: 8px; font-size: 14px; } | |
| .whoami img { border-radius: 50%; background: var(--bg-2); } | |
| #username { color: var(--text-dim); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| /* ── buttons ─────────────────────────────────────────────────────── */ | |
| .btn { | |
| font: 500 14px/1 var(--sans); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 9px 14px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--line); | |
| background: var(--bg-2); | |
| color: var(--text); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: background .15s, border-color .15s, transform .06s, opacity .15s; | |
| } | |
| .btn:hover:not(:disabled) { background: #232739; border-color: #343a52; } | |
| .btn:active:not(:disabled) { transform: translateY(1px); } | |
| .btn:disabled { opacity: .42; cursor: not-allowed; } | |
| .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } | |
| .btn-sm { padding: 6px 10px; font-size: 13px; } | |
| .btn-lg { padding: 12px 18px; font-size: 15px; font-weight: 600; } | |
| .btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); } | |
| .btn-ghost:hover:not(:disabled) { background: var(--bg-2); color: var(--text); border-color: var(--line); } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent), #9a5cff); | |
| border-color: #8b7bff66; | |
| color: #fff; | |
| box-shadow: 0 1px 0 #ffffff1f inset, 0 6px 18px -10px var(--accent); | |
| } | |
| .btn-primary:hover:not(:disabled) { filter: brightness(1.1); background: linear-gradient(135deg, var(--accent), #9a5cff); border-color: #8b7bff99; } | |
| .btn-hf { background: #1a1a22; border-color: #3a3320; } | |
| .btn-hf:hover:not(:disabled) { background: #23222c; border-color: #5a4d28; } | |
| .btn-deploy { | |
| background: linear-gradient(135deg, #ff5fa8, #ff8a4c); | |
| border-color: #ff7f9c66; | |
| color: #22101a; | |
| font-weight: 650; | |
| padding: 11px 18px; | |
| box-shadow: 0 1px 0 #ffffff3d inset, 0 6px 20px -10px #ff5fa8; | |
| } | |
| .btn-deploy:hover:not(:disabled) { filter: brightness(1.07); background: linear-gradient(135deg, #ff5fa8, #ff8a4c); } | |
| /* ── token row ───────────────────────────────────────────────────── */ | |
| .tokenrow { | |
| position: relative; | |
| z-index: 2; | |
| flex: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 11px 18px; | |
| border-bottom: 1px solid var(--line); | |
| background: var(--bg-1); | |
| flex-wrap: wrap; | |
| } | |
| .tokenrow label { font-size: 13px; color: var(--text-dim); } | |
| .tokenrow input { | |
| flex: 1 1 260px; | |
| min-width: 0; | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| } | |
| /* ── layout ──────────────────────────────────────────────────────── */ | |
| .layout { | |
| position: relative; | |
| z-index: 1; | |
| flex: 1; | |
| min-height: 0; | |
| display: grid; | |
| grid-template-columns: var(--rail) 1fr; | |
| } | |
| .rail { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| padding: 18px; | |
| border-right: 1px solid var(--line); | |
| background: #0e0f17b3; | |
| overflow-y: auto; | |
| min-height: 0; | |
| } | |
| .output { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| min-height: 0; | |
| background: var(--bg); | |
| } | |
| /* ── form primitives ─────────────────────────────────────────────── */ | |
| .field { display: flex; flex-direction: column; gap: 7px; min-height: 0; } | |
| .field-grow { flex: 1; min-height: 150px; } | |
| .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; } | |
| label { | |
| font-size: 12px; | |
| font-weight: 600; | |
| letter-spacing: .05em; | |
| text-transform: uppercase; | |
| color: var(--text-mute); | |
| } | |
| input[type=text], input[type=password], input[type=number], select, textarea { | |
| width: 100%; | |
| background: var(--bg-1); | |
| color: var(--text); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| padding: 10px 12px; | |
| font: 14px/1.5 var(--sans); | |
| transition: border-color .15s, background .15s; | |
| } | |
| input:focus, select:focus, textarea:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| background: var(--bg-2); | |
| } | |
| textarea { resize: none; } | |
| #prompt { flex: 1; min-height: 130px; line-height: 1.6; } | |
| #system { font-family: var(--mono); font-size: 12.5px; resize: vertical; } | |
| .selectwrap { position: relative; } | |
| .selectwrap::after { | |
| content: ""; | |
| position: absolute; | |
| right: 13px; top: 50%; | |
| width: 6px; height: 6px; | |
| border-right: 2px solid var(--text-mute); | |
| border-bottom: 2px solid var(--text-mute); | |
| transform: translateY(-70%) rotate(45deg); | |
| pointer-events: none; | |
| } | |
| select { appearance: none; padding-right: 32px; cursor: pointer; } | |
| select optgroup { background: var(--bg-1); color: var(--text-mute); font-style: normal; } | |
| select option { background: var(--bg-1); color: var(--text); } | |
| input[type=range] { accent-color: var(--accent); padding: 0; background: none; border: none; } | |
| .hint { margin: 0; font-size: 12.5px; color: var(--text-mute); line-height: 1.45; } | |
| .mono { font-family: var(--mono); color: var(--text-dim); text-transform: none; letter-spacing: 0; } | |
| .advanced { border-top: 1px solid var(--line-soft); padding-top: 12px; } | |
| .advanced summary { | |
| cursor: pointer; | |
| font-size: 12px; | |
| font-weight: 600; | |
| letter-spacing: .05em; | |
| text-transform: uppercase; | |
| color: var(--text-mute); | |
| list-style: none; | |
| } | |
| .advanced summary::-webkit-details-marker { display: none; } | |
| .advanced summary::before { content: "▸"; display: inline-block; margin-right: 7px; transition: transform .15s; } | |
| .advanced[open] summary::before { transform: rotate(90deg); } | |
| .advanced[open] > .field, .advanced[open] > .field-row { margin-top: 12px; } | |
| .actions { display: flex; gap: 8px; } | |
| .actions .btn { flex: 1; justify-content: center; } | |
| /* ── examples ────────────────────────────────────────────────────── */ | |
| .examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } | |
| .examples-label { | |
| font-size: 12px; font-weight: 600; letter-spacing: .05em; | |
| text-transform: uppercase; color: var(--text-mute); margin-right: 2px; | |
| } | |
| .chip { | |
| font: 500 12.5px/1 var(--sans); | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| border: 1px solid var(--line); | |
| background: var(--bg-3); | |
| color: var(--text-dim); | |
| cursor: pointer; | |
| transition: all .15s; | |
| } | |
| .chip:hover { color: var(--text); border-color: var(--accent); background: var(--accent-dim); } | |
| /* ── tabs ────────────────────────────────────────────────────────── */ | |
| .tabs { | |
| flex: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--line); | |
| background: #0e0f17b3; | |
| } | |
| .tabs-spacer { flex: 1; } | |
| .tab { | |
| font: 500 13.5px/1 var(--sans); | |
| padding: 7px 13px; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-mute); | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| } | |
| .tab:hover { color: var(--text-dim); } | |
| .tab.is-active { color: var(--text); background: var(--bg-2); border-color: var(--line); } | |
| .badge { | |
| font: 500 11px/1 var(--mono); | |
| padding: 3px 6px; | |
| border-radius: 5px; | |
| background: var(--bg-3); | |
| color: var(--text-mute); | |
| } | |
| .badge:empty { display: none; } | |
| .status { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 7px; } | |
| .status.is-err { color: var(--err); } | |
| .status.is-ok { color: var(--ok); } | |
| .spinner { | |
| width: 12px; height: 12px; | |
| border: 2px solid #ffffff2b; | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin .7s linear infinite; | |
| flex: none; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| /* ── panes ───────────────────────────────────────────────────────── */ | |
| .pane { flex: 1; min-height: 0; position: relative; } | |
| .pane-preview { background: | |
| linear-gradient(45deg, #14161f 25%, transparent 25%) -8px 0/16px 16px, | |
| linear-gradient(-45deg, #14161f 25%, transparent 25%) -8px 0/16px 16px, | |
| linear-gradient(45deg, transparent 75%, #14161f 75%) 0 0/16px 16px, | |
| linear-gradient(-45deg, transparent 75%, #14161f 75%) 0 0/16px 16px, | |
| #0f1119; | |
| } | |
| #preview { width: 100%; height: 100%; border: 0; background: #fff; display: block; } | |
| #code { | |
| width: 100%; height: 100%; | |
| border: 0; border-radius: 0; | |
| background: #0a0b11; | |
| font: 13px/1.65 var(--mono); | |
| padding: 16px 18px; | |
| resize: none; | |
| tab-size: 2; | |
| } | |
| #code:focus { background: #0a0b11; } | |
| .empty { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| text-align: center; | |
| color: var(--text-mute); | |
| padding: 24px; | |
| } | |
| .empty p { margin: 0; } | |
| .empty-art { | |
| font: 600 34px/1 var(--mono); | |
| color: #ffffff14; | |
| margin-bottom: 14px; | |
| letter-spacing: -.04em; | |
| } | |
| /* ── deploy bar ──────────────────────────────────────────────────── */ | |
| .deploybar { | |
| flex: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 14px; | |
| border-top: 1px solid var(--line); | |
| background: #0e0f17e6; | |
| flex-wrap: wrap; | |
| } | |
| .deployresult { flex: 1 1 320px; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere; } | |
| .deployresult a { color: var(--text); text-decoration: none; border-bottom: 1px solid #ffffff33; } | |
| .deployresult a:hover { border-bottom-color: var(--accent-2); } | |
| .deployresult .live { font-weight: 600; } | |
| .deployresult .live a { color: var(--ok); border-bottom-color: #35d39a55; } | |
| .deployresult .claim-note { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--text-mute); } | |
| .deployresult .claim-note a { color: var(--warn); border-bottom-color: #ffcc5555; } | |
| .deployresult.is-err { color: var(--err); } | |
| .copy { | |
| font: 500 11px/1 var(--sans); | |
| margin-left: 6px; padding: 3px 7px; | |
| border: 1px solid var(--line); border-radius: 5px; | |
| background: var(--bg-2); color: var(--text-mute); cursor: pointer; | |
| } | |
| .copy:hover { color: var(--text); border-color: var(--accent); } | |
| /* ── toast ───────────────────────────────────────────────────────── */ | |
| /* Anchored to the top: the bottom of the screen is the deploy bar, and a | |
| * translucent toast overlapping the result links reads as a rendering bug. */ | |
| .toast { | |
| position: fixed; | |
| top: 68px; left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 50; | |
| padding: 11px 18px; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--line); | |
| background: #1b1e2be6; | |
| backdrop-filter: blur(10px); | |
| color: var(--text); | |
| font-size: 14px; | |
| box-shadow: 0 12px 34px -12px #000c; | |
| animation: rise .22s ease-out; | |
| } | |
| .toast.is-err { border-color: #ff6b8166; color: #ffc2ca; } | |
| @keyframes rise { from { opacity: 0; transform: translate(-50%, -10px); } } | |
| /* ── scrollbars ──────────────────────────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 10px; height: 10px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: #2a2f45; border-radius: 6px; border: 2px solid var(--bg); } | |
| ::-webkit-scrollbar-thumb:hover { background: #3a405c; } | |
| /* ── responsive ──────────────────────────────────────────────────── */ | |
| @media (max-width: 900px) { | |
| body { overflow: auto; } | |
| .layout { grid-template-columns: 1fr; } | |
| .rail { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; } | |
| .output { min-height: 78vh; } | |
| .brand-arrow, .brand-dest { display: none; } | |
| .btn-hf { font-size: 0; gap: 0; padding: 9px 11px; } | |
| .btn-hf svg { width: 17px; height: 17px; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { animation-duration: .01ms ; transition-duration: .01ms ; } | |
| } | |