Spaces:
Running
Running
| /* ========================================================================== | |
| AI PLAYGROUND — LAB LAYOUT | |
| One shared skeleton for all seven laboratories: editorial header, a | |
| split workspace (controls left, live result right), an education block, | |
| and related labs. On narrow screens the split stacks controls above result. | |
| ========================================================================== */ | |
| /* ========================================================================== | |
| 01 — LAB HEADER | |
| ========================================================================== */ | |
| .lab-hero { | |
| padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem); | |
| } | |
| .lab-hero__top { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--sp-3); | |
| flex-wrap: wrap; | |
| padding-bottom: var(--sp-5); | |
| margin-bottom: var(--sp-6); | |
| border-bottom: var(--rule) solid var(--line-ink); | |
| } | |
| .lab-hero__crumb { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--sp-2); | |
| font-family: var(--font-mono); | |
| font-size: var(--t-10); | |
| letter-spacing: var(--tr-caps); | |
| text-transform: uppercase; | |
| color: var(--ink-muted); | |
| transition: color var(--dur-2) var(--ease); | |
| } | |
| .lab-hero__crumb:hover { color: var(--accent-ink); } | |
| .lab-hero__crumb svg { width: 0.7rem; height: 0.7rem; } | |
| .lab-hero__grid { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); | |
| gap: var(--sp-6) var(--sp-8); | |
| align-items: end; | |
| } | |
| .lab-hero__title { | |
| font-family: var(--font-display); | |
| font-size: var(--t-display-2); | |
| line-height: var(--lh-display); | |
| letter-spacing: var(--tr-display); | |
| } | |
| .lab-hero__tagline { | |
| font-size: clamp(var(--t-16), 1.4vw, var(--t-21)); | |
| line-height: var(--lh-prose); | |
| color: var(--ink-secondary); | |
| max-width: var(--measure); | |
| text-wrap: pretty; | |
| } | |
| /* Metadata strip — model, parameters, IO, latency, where it runs */ | |
| .lab-meta { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); | |
| gap: var(--sp-4) var(--sp-5); | |
| margin-top: var(--sp-7); | |
| padding-top: var(--sp-5); | |
| border-top: var(--rule) solid var(--line); | |
| } | |
| .lab-meta__item { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } | |
| .lab-meta__key { | |
| font-family: var(--font-mono); | |
| font-size: var(--t-9); | |
| letter-spacing: var(--tr-caps); | |
| text-transform: uppercase; | |
| color: var(--ink-faint); | |
| } | |
| .lab-meta__val { | |
| font-size: var(--t-14); | |
| font-weight: var(--fw-medium); | |
| color: var(--ink); | |
| line-height: 1.3; | |
| word-break: break-word; | |
| } | |
| .lab-meta__val a { | |
| color: var(--accent-ink); | |
| text-decoration: underline; | |
| text-underline-offset: 0.2em; | |
| } | |
| @media (max-width: 900px) { | |
| .lab-hero__grid { grid-template-columns: 1fr; align-items: start; } | |
| } | |
| /* ========================================================================== | |
| 02 — SPLIT WORKSPACE | |
| ========================================================================== */ | |
| .lab-split { | |
| display: grid; | |
| grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); | |
| gap: var(--sp-6); | |
| align-items: start; | |
| padding-bottom: var(--sp-9); | |
| } | |
| /* Left rail — instructions and controls */ | |
| .lab-console { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--sp-5); | |
| border: var(--rule) solid var(--line); | |
| border-radius: var(--r-2); | |
| background: var(--paper-raised); | |
| padding: var(--sp-5); | |
| position: sticky; | |
| top: 5.5rem; | |
| max-height: calc(100vh - 7rem); | |
| overflow-y: auto; | |
| overscroll-behavior: contain; | |
| scrollbar-width: thin; | |
| } | |
| .lab-console::-webkit-scrollbar { width: 5px; } | |
| .lab-console::-webkit-scrollbar-thumb { | |
| background: var(--line-strong); | |
| border-radius: var(--r-pill); | |
| } | |
| .console-block { display: flex; flex-direction: column; gap: var(--sp-3); } | |
| .console-block + .console-block { | |
| padding-top: var(--sp-5); | |
| border-top: var(--rule) solid var(--line); | |
| } | |
| .console-block__head { | |
| display: flex; | |
| align-items: baseline; | |
| gap: var(--sp-3); | |
| } | |
| .console-block__num { | |
| font-family: var(--font-mono); | |
| font-size: var(--t-9); | |
| letter-spacing: var(--tr-label); | |
| color: var(--accent-ink); | |
| flex: none; | |
| } | |
| .console-block__title { | |
| font-size: var(--t-13, 0.8125rem); | |
| font-weight: var(--fw-semi); | |
| letter-spacing: var(--tr-mid); | |
| } | |
| .console-actions { | |
| display: flex; | |
| gap: var(--sp-2); | |
| flex-wrap: wrap; | |
| } | |
| .console-actions .btn { flex: 1 1 auto; } | |
| /* Right — the live result */ | |
| .lab-output { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--sp-4); | |
| min-width: 0; | |
| } | |
| .lab-stage { | |
| position: relative; | |
| border: var(--rule) solid var(--line); | |
| border-radius: var(--r-2); | |
| background: var(--paper-warm); | |
| overflow: hidden; | |
| min-height: 26rem; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .lab-stage__bar { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--sp-3); | |
| padding: var(--sp-3) var(--sp-4); | |
| border-bottom: var(--rule) solid var(--line); | |
| background: var(--paper); | |
| flex: none; | |
| } | |
| .lab-stage__bar .spacer { flex: 1; } | |
| .lab-stage__inner { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: var(--sp-5); | |
| min-height: 0; | |
| } | |
| .lab-stage__inner--flush { padding: 0; } | |
| .lab-stage img { border-radius: var(--r-2); } | |
| /* Result panel below the stage: detections, transcript, metrics */ | |
| .lab-readout { | |
| border: var(--rule) solid var(--line); | |
| border-radius: var(--r-2); | |
| background: var(--paper-raised); | |
| padding: var(--sp-5); | |
| } | |
| @media (max-width: 1024px) { | |
| .lab-split { grid-template-columns: 1fr; } | |
| .lab-console { | |
| position: static; | |
| max-height: none; | |
| overflow: visible; | |
| } | |
| .lab-stage { min-height: 20rem; } | |
| } | |
| /* ========================================================================== | |
| 03 — CHAT-SPECIFIC (conversation column) | |
| ========================================================================== */ | |
| .chat-log { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--sp-4); | |
| padding: var(--sp-5); | |
| overflow-y: auto; | |
| flex: 1; | |
| min-height: 22rem; | |
| max-height: 60vh; | |
| scroll-behavior: smooth; | |
| } | |
| .msg { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--sp-2); | |
| max-width: 46rem; | |
| animation: rise var(--dur-3) var(--ease); | |
| } | |
| .msg--user { align-self: flex-end; align-items: flex-end; } | |
| .msg__who { | |
| font-family: var(--font-mono); | |
| font-size: var(--t-9); | |
| letter-spacing: var(--tr-caps); | |
| text-transform: uppercase; | |
| color: var(--ink-faint); | |
| } | |
| .msg__bubble { | |
| padding: var(--sp-4) var(--sp-5); | |
| border-radius: var(--r-3); | |
| font-size: var(--t-15, 0.9375rem); | |
| line-height: var(--lh-prose); | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| } | |
| .msg--ai .msg__bubble { | |
| background: var(--paper-sunk); | |
| border: var(--rule) solid var(--line); | |
| border-top-left-radius: var(--r-1); | |
| } | |
| .msg--user .msg__bubble { | |
| background: var(--ink); | |
| color: var(--ink-inverse); | |
| border-top-right-radius: var(--r-1); | |
| } | |
| .msg__foot { | |
| display: flex; | |
| gap: var(--sp-3); | |
| flex-wrap: wrap; | |
| font-family: var(--font-mono); | |
| font-size: var(--t-9); | |
| letter-spacing: var(--tr-label); | |
| text-transform: uppercase; | |
| color: var(--ink-faint); | |
| } | |
| .chat-compose { | |
| display: flex; | |
| gap: var(--sp-3); | |
| align-items: flex-end; | |
| padding: var(--sp-4); | |
| border-top: var(--rule) solid var(--line); | |
| background: var(--paper); | |
| flex: none; | |
| } | |
| .chat-compose .textarea { | |
| min-height: 2.75rem; | |
| max-height: 9rem; | |
| resize: none; | |
| } | |
| .typing { display: inline-flex; gap: 0.25rem; align-items: center; } | |
| .typing span { | |
| width: 0.3rem; height: 0.3rem; | |
| border-radius: 50%; | |
| background: var(--ink-faint); | |
| animation: typing 1.2s ease-in-out infinite; | |
| } | |
| .typing span:nth-child(2) { animation-delay: 0.15s; } | |
| .typing span:nth-child(3) { animation-delay: 0.3s; } | |
| @keyframes typing { | |
| 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } | |
| 30% { opacity: 1; transform: translateY(-2px); } | |
| } | |
| /* Suggested prompts */ | |
| .suggestions { display: flex; flex-wrap: wrap; gap: var(--sp-2); } | |
| .suggestion { | |
| padding: 0.45rem 0.75rem; | |
| min-height: 2.25rem; | |
| font-size: var(--t-12); | |
| border: var(--rule) solid var(--line); | |
| border-radius: var(--r-pill); | |
| color: var(--ink-secondary); | |
| text-align: left; | |
| transition: all var(--dur-2) var(--ease); | |
| } | |
| .suggestion:hover { | |
| border-color: var(--accent); | |
| background: var(--accent-wash); | |
| color: var(--ink); | |
| } | |
| /* ========================================================================== | |
| 04 — GALLERY (Dream) | |
| ========================================================================== */ | |
| .gallery { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); | |
| gap: var(--sp-3); | |
| } | |
| .gallery__item { | |
| position: relative; | |
| aspect-ratio: 1; | |
| border: var(--rule) solid var(--line); | |
| border-radius: var(--r-2); | |
| overflow: hidden; | |
| cursor: pointer; | |
| padding: 0; | |
| background: var(--paper-sunk); | |
| transition: all var(--dur-2) var(--ease); | |
| } | |
| .gallery__item:hover { border-color: var(--accent); transform: translateY(-2px); } | |
| .gallery__item img { width: 100%; height: 100%; object-fit: cover; } | |
| .gallery__item[aria-current="true"] { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 2px var(--accent); | |
| } | |
| .gallery__seed { | |
| position: absolute; | |
| left: 0; right: 0; bottom: 0; | |
| padding: 0.25rem 0.4rem; | |
| font-family: var(--font-mono); | |
| font-size: var(--t-9); | |
| letter-spacing: var(--tr-label); | |
| background: rgba(0, 0, 0, 0.7); | |
| color: #fff; | |
| text-align: left; | |
| } | |
| /* Prompt evolution — a lineage of small wording changes */ | |
| .evolution { border-top: var(--rule) solid var(--line); } | |
| .evolution__row { | |
| display: grid; | |
| grid-template-columns: 2.5rem minmax(0, 1fr) auto; | |
| align-items: center; | |
| gap: var(--sp-4); | |
| padding: var(--sp-3) 0; | |
| border-bottom: var(--rule) solid var(--line); | |
| font-size: var(--t-13, 0.8125rem); | |
| } | |
| .evolution__num { | |
| font-family: var(--font-mono); | |
| font-size: var(--t-10); | |
| color: var(--accent-ink); | |
| } | |
| .evolution__text { line-height: var(--lh-prose); overflow-wrap: anywhere; } | |
| .evolution__text ins { | |
| background: var(--green-200); | |
| color: var(--green-900); | |
| text-decoration: none; | |
| padding: 0 2px; | |
| border-radius: 2px; | |
| } | |
| .evolution__text del { | |
| background: var(--red-200); | |
| color: var(--red-900); | |
| padding: 0 2px; | |
| border-radius: 2px; | |
| } | |
| [data-theme="dark"] .evolution__text ins { background: var(--green-900); color: var(--green-400); } | |
| [data-theme="dark"] .evolution__text del { background: var(--red-900); color: var(--red-400); } | |
| .evolution__thumb { | |
| width: 3rem; height: 3rem; | |
| border-radius: var(--r-2); | |
| object-fit: cover; | |
| border: var(--rule) solid var(--line); | |
| } | |
| /* ========================================================================== | |
| 05 — AUDIO | |
| ========================================================================== */ | |
| .player { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--sp-3); | |
| padding: var(--sp-4); | |
| border: var(--rule) solid var(--line); | |
| border-radius: var(--r-2); | |
| background: var(--paper-raised); | |
| flex-wrap: wrap; | |
| } | |
| .player__btn { | |
| display: grid; | |
| place-items: center; | |
| width: 2.75rem; height: 2.75rem; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| color: var(--accent-on); | |
| flex: none; | |
| transition: transform var(--dur-2) var(--ease), filter var(--dur-2) var(--ease); | |
| } | |
| .player__btn:hover { filter: brightness(1.1); transform: scale(1.05); } | |
| .player__btn svg { width: 1.1rem; height: 1.1rem; } | |
| .player__time { | |
| font-family: var(--font-mono); | |
| font-size: var(--t-12); | |
| font-variant-numeric: tabular-nums; | |
| color: var(--ink-muted); | |
| flex: none; | |
| } | |
| .player__scrub { flex: 1 1 8rem; min-width: 6rem; } | |
| /* Karaoke-style word highlight driven by TTS word boundaries */ | |
| .speech-text { | |
| font-size: var(--t-18); | |
| line-height: 1.8; | |
| color: var(--ink-muted); | |
| text-wrap: pretty; | |
| } | |
| .speech-text .word { | |
| transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); | |
| border-radius: 2px; | |
| padding: 0 1px; | |
| } | |
| .speech-text .word.is-spoken { color: var(--ink); } | |
| .speech-text .word.is-current { | |
| color: var(--ink); | |
| background: var(--accent-wash); | |
| box-shadow: 0 1px 0 var(--accent); | |
| } | |
| /* Recording indicator */ | |
| .rec-dot { | |
| width: 0.6rem; height: 0.6rem; | |
| border-radius: 50%; | |
| background: var(--red-700); | |
| animation: pulse-soft 1s ease-in-out infinite; | |
| flex: none; | |
| } | |
| /* ========================================================================== | |
| 06 — EDUCATION BLOCK (shared by every lab) | |
| ========================================================================== */ | |
| .lab-learn { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); | |
| gap: var(--sp-8); | |
| padding-block: var(--section-y); | |
| border-top: var(--rule) solid var(--line-ink); | |
| } | |
| @media (max-width: 900px) { | |
| .lab-learn { grid-template-columns: 1fr; gap: var(--sp-7); } | |
| } | |
| .pipeline { | |
| display: flex; | |
| align-items: stretch; | |
| gap: var(--sp-2); | |
| margin-block: var(--sp-5); | |
| flex-wrap: wrap; | |
| } | |
| .pipeline__node { | |
| flex: 1 1 6rem; | |
| padding: var(--sp-4) var(--sp-3); | |
| border: var(--rule) solid var(--line); | |
| border-radius: var(--r-2); | |
| text-align: center; | |
| background: var(--paper-raised); | |
| min-width: 0; | |
| } | |
| .pipeline__node--model { | |
| background: var(--accent-wash); | |
| border-color: var(--accent-line); | |
| } | |
| .pipeline__kind { | |
| font-family: var(--font-mono); | |
| font-size: var(--t-9); | |
| letter-spacing: var(--tr-caps); | |
| text-transform: uppercase; | |
| color: var(--ink-faint); | |
| display: block; | |
| margin-bottom: var(--sp-2); | |
| } | |
| .pipeline__what { | |
| font-size: var(--t-13, 0.8125rem); | |
| font-weight: var(--fw-medium); | |
| line-height: 1.35; | |
| } | |
| .pipeline__arrow { | |
| display: grid; | |
| place-items: center; | |
| color: var(--ink-faint); | |
| flex: none; | |
| width: 1.25rem; | |
| } | |
| .pipeline__arrow svg { width: 0.9rem; height: 0.9rem; } | |
| /* ========================================================================== | |
| 07 — RELATED LABS | |
| ========================================================================== */ | |
| .related { | |
| padding-block: var(--section-y); | |
| border-top: var(--rule) solid var(--line-ink); | |
| } | |
| .related__list { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); | |
| gap: var(--sp-4); | |
| } | |
| .related__item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--sp-2); | |
| padding: var(--sp-5); | |
| border: var(--rule) solid var(--line); | |
| border-radius: var(--r-2); | |
| transition: all var(--dur-2) var(--ease); | |
| } | |
| .related__item:hover { | |
| border-color: var(--accent); | |
| background: var(--accent-wash); | |
| transform: translateY(-2px); | |
| } | |
| .related__name { | |
| font-family: var(--font-display); | |
| font-size: var(--t-24); | |
| letter-spacing: var(--tr-tight); | |
| } | |
| .related__why { font-size: var(--t-12); color: var(--ink-muted); line-height: var(--lh-prose); } | |
| /* ========================================================================== | |
| 08 — SHARE / EXPORT BAR | |
| ========================================================================== */ | |
| .export-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--sp-2); | |
| flex-wrap: wrap; | |
| padding-top: var(--sp-4); | |
| border-top: var(--rule) solid var(--line); | |
| } | |
| /* Copy-confirmation flash on any button */ | |
| .btn.is-copied { | |
| background: var(--green-600); | |
| border-color: var(--green-600); | |
| color: var(--gray-900); | |
| } | |