Spaces:
Running
Running
| :root { | |
| --paper: #e8c5af; | |
| --paper-soft: #f5e5d3; | |
| --ink: #1a0e08; | |
| --ink-soft: #3c2418; | |
| --brown: #5a2f1f; | |
| --accent: #e85d24; | |
| --gold: #f5dba0; | |
| --green: #b5d55c; | |
| --line: rgba(60, 30, 20, 0.22); | |
| --line-soft: rgba(60, 30, 20, 0.12); | |
| --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .app-shell { | |
| min-height: 100svh; | |
| background: var(--paper); | |
| color: var(--ink); | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| letter-spacing: 0; | |
| } | |
| button { | |
| font: inherit; | |
| } | |
| .grain { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| mix-blend-mode: multiply; | |
| opacity: 0.065; | |
| z-index: 5; | |
| } | |
| .draft-grid { | |
| position: absolute; | |
| inset: 0; | |
| z-index: 2; | |
| pointer-events: none; | |
| background-image: | |
| linear-gradient(rgba(60, 30, 20, 0.06) 0.5px, transparent 0.5px), | |
| linear-gradient(90deg, rgba(60, 30, 20, 0.06) 0.5px, transparent 0.5px); | |
| background-size: 32px 32px; | |
| } | |
| .landing { | |
| min-height: 100svh; | |
| position: relative; | |
| overflow: hidden; | |
| cursor: crosshair; | |
| background: var(--paper); | |
| } | |
| .hero-three { | |
| position: absolute; | |
| inset: 0; | |
| z-index: 1; | |
| } | |
| .landing-nav, | |
| .metadata-strip, | |
| .landing-content { | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .landing-nav { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| padding: 28px 40px; | |
| border-bottom: 0.5px solid rgba(26, 14, 8, 0.15); | |
| } | |
| .brand-lockup, | |
| .nav-actions, | |
| .landing-cta, | |
| .studio-brand, | |
| .studio-flow, | |
| .studio-meta { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .brand-lockup { | |
| gap: 12px; | |
| font-size: 15px; | |
| font-weight: 700; | |
| letter-spacing: -0.025em; | |
| } | |
| .logo-mini { | |
| width: 28px; | |
| height: 28px; | |
| overflow: hidden; | |
| border-radius: 5px; | |
| background: var(--ink); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 32px; | |
| color: var(--ink); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.1em; | |
| } | |
| .nav-links span { | |
| opacity: 0.6; | |
| } | |
| .nav-actions { | |
| gap: 14px; | |
| color: var(--brown); | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| letter-spacing: 0.12em; | |
| } | |
| .nav-actions span { | |
| opacity: 0.65; | |
| } | |
| .nav-actions button, | |
| .mic-cta { | |
| border: 0; | |
| background: var(--ink); | |
| color: var(--paper); | |
| cursor: pointer; | |
| } | |
| .nav-actions button { | |
| padding: 8px 16px; | |
| border-radius: 4px; | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.08em; | |
| } | |
| .metadata-strip { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 14px 40px; | |
| border-bottom: 0.5px dashed rgba(26, 14, 8, 0.18); | |
| color: var(--brown); | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| letter-spacing: 0.12em; | |
| } | |
| .metadata-strip > div { | |
| display: flex; | |
| gap: 24px; | |
| } | |
| .metadata-strip em { | |
| opacity: 0.5; | |
| font-style: normal; | |
| } | |
| .live-label { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .live-label i, | |
| .rec-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| animation: rec-pulse 1.5s ease-in-out infinite; | |
| } | |
| .landing-content { | |
| min-height: calc(100svh - 110px); | |
| padding: 80px 40px 60px; | |
| } | |
| .hero-copy { | |
| max-width: 580px; | |
| } | |
| .eyebrow { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| margin-bottom: 28px; | |
| } | |
| .eyebrow i { | |
| width: 48px; | |
| height: 1px; | |
| background: var(--ink); | |
| } | |
| .eyebrow span { | |
| color: var(--ink); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| font-weight: 500; | |
| letter-spacing: 0.18em; | |
| } | |
| .hero-copy h1 { | |
| max-width: 600px; | |
| margin: 0 0 36px; | |
| color: var(--ink); | |
| font-size: clamp(54px, 8vw, 88px); | |
| font-weight: 700; | |
| letter-spacing: -0.045em; | |
| line-height: 0.92; | |
| } | |
| .hero-copy h1 span { | |
| display: inline-block; | |
| animation: word-rise 0.9s cubic-bezier(.2, .7, .2, 1) both; | |
| } | |
| .hero-copy h1 span:nth-child(2) { animation-delay: 0.08s; } | |
| .hero-copy h1 span:nth-child(3) { animation-delay: 0.16s; } | |
| .hero-copy h1 span:nth-child(5) { animation-delay: 0.24s; } | |
| .hero-copy h1 span:nth-child(6) { animation-delay: 0.32s; } | |
| .hero-copy .italic { | |
| font-family: "Times New Roman", serif; | |
| font-style: italic; | |
| font-weight: 500; | |
| } | |
| .hero-copy p { | |
| max-width: 440px; | |
| margin: 0 0 44px; | |
| color: var(--ink-soft); | |
| font-size: 17px; | |
| line-height: 1.55; | |
| animation: fade-up 0.8s cubic-bezier(.2, .7, .3, 1) 0.4s both; | |
| } | |
| .landing-cta { | |
| gap: 20px; | |
| animation: fade-up 0.8s cubic-bezier(.2, .7, .3, 1) 0.6s both; | |
| } | |
| .mic-cta { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| min-height: 60px; | |
| padding: 18px 28px 18px 22px; | |
| overflow: hidden; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| letter-spacing: 0; | |
| transition: transform 0.3s ease; | |
| } | |
| .mic-cta:hover { | |
| transform: translateY(-2px); | |
| } | |
| .mic-orb { | |
| display: inline-flex; | |
| position: relative; | |
| align-items: center; | |
| justify-content: center; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| color: var(--ink); | |
| } | |
| .mic-orb i { | |
| position: absolute; | |
| inset: -6px; | |
| border: 1.5px solid var(--accent); | |
| border-radius: 50%; | |
| opacity: 0; | |
| } | |
| .mic-cta:hover .mic-orb i { | |
| animation: mic-ring 1.4s ease-out infinite; | |
| } | |
| .mic-cta kbd { | |
| padding: 3px 6px; | |
| border: 0.5px solid rgba(245, 229, 211, 0.3); | |
| border-radius: 3px; | |
| opacity: 0.55; | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| letter-spacing: 0.08em; | |
| } | |
| .landing-cta > div { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .landing-cta > div span, | |
| .specimens > span { | |
| color: var(--brown); | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| letter-spacing: 0.14em; | |
| opacity: 0.62; | |
| } | |
| .landing-cta strong { | |
| color: var(--ink); | |
| font-size: 13px; | |
| } | |
| .specimens { | |
| margin-top: 64px; | |
| animation: fade-up 0.8s cubic-bezier(.2, .7, .3, 1) 0.85s both; | |
| } | |
| .specimens > div { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| .specimens button { | |
| padding: 6px 12px; | |
| border: 0.5px solid rgba(26, 14, 8, 0.2); | |
| border-radius: 4px; | |
| background: rgba(26, 14, 8, 0.06); | |
| color: var(--ink); | |
| cursor: pointer; | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| transition: all 0.2s ease; | |
| } | |
| .specimens button:hover { | |
| transform: translateY(-1px); | |
| border-color: var(--ink); | |
| background: var(--ink); | |
| color: var(--paper); | |
| } | |
| .hero-annotation { | |
| position: absolute; | |
| top: 140px; | |
| right: 60px; | |
| width: 160px; | |
| animation: fade-up 1s ease 1.1s both; | |
| } | |
| .hero-annotation svg { | |
| overflow: visible; | |
| } | |
| .hero-annotation line { | |
| stroke: var(--ink); | |
| stroke-width: 0.5; | |
| stroke-dasharray: 2 2; | |
| } | |
| .hero-annotation circle { | |
| fill: var(--ink); | |
| } | |
| .hero-annotation text { | |
| fill: var(--brown); | |
| font-family: var(--mono); | |
| font-size: 9px; | |
| } | |
| .hero-annotation text:first-of-type { | |
| fill: var(--ink); | |
| font-size: 10px; | |
| font-weight: 700; | |
| } | |
| .studio { | |
| position: relative; | |
| min-height: 100svh; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| background: #ffffff; | |
| } | |
| .studio-grain { | |
| opacity: 0; | |
| background-image: none; | |
| background-size: 3px 3px; | |
| } | |
| .studio-topbar { | |
| position: relative; | |
| z-index: 2; | |
| display: flex; | |
| align-items: stretch; | |
| justify-content: space-between; | |
| border-bottom: 0.5px solid rgba(60, 30, 20, 0.2); | |
| background: rgba(255, 255, 255, 0.76); | |
| } | |
| .studio-brand { | |
| gap: 14px; | |
| padding: 14px 22px; | |
| border-right: 0.5px solid rgba(60, 30, 20, 0.15); | |
| font-size: 14px; | |
| font-weight: 700; | |
| } | |
| .studio-brand div { | |
| display: grid; | |
| place-items: center; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 4px; | |
| background: var(--ink); | |
| } | |
| .studio-brand i { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--paper); | |
| animation: dot-soft 2s ease-in-out infinite; | |
| } | |
| .studio-flow { | |
| flex: 1; | |
| gap: 10px; | |
| padding: 14px 22px; | |
| color: var(--brown); | |
| font-size: 12px; | |
| } | |
| .studio-flow span, | |
| .studio-meta span { | |
| opacity: 0.55; | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| letter-spacing: 0.1em; | |
| } | |
| .studio-flow i { | |
| opacity: 0.45; | |
| font-style: normal; | |
| } | |
| .studio-meta { | |
| align-items: stretch; | |
| border-left: 0.5px solid rgba(60, 30, 20, 0.15); | |
| } | |
| .studio-meta > div { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| min-width: 96px; | |
| padding: 8px 16px; | |
| border-right: 0.5px solid rgba(60, 30, 20, 0.15); | |
| } | |
| .studio-meta b { | |
| color: var(--ink); | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| } | |
| .studio-meta button { | |
| display: grid; | |
| place-items: center; | |
| width: 48px; | |
| border: 0; | |
| border-left: 0.5px solid rgba(60, 30, 20, 0.15); | |
| background: rgba(26, 14, 8, 0.06); | |
| color: var(--ink); | |
| cursor: pointer; | |
| } | |
| .demo-status-bar { | |
| position: relative; | |
| z-index: 2; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 18px; | |
| padding: 10px 22px; | |
| border-bottom: 0.5px dashed rgba(60, 30, 20, 0.22); | |
| background: rgba(255, 255, 255, 0.5); | |
| } | |
| .demo-status-bar > div:first-child, | |
| .demo-controls { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .demo-status-bar > div:first-child { | |
| gap: 10px; | |
| color: var(--ink); | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| letter-spacing: 0.12em; | |
| } | |
| .demo-status-bar b { | |
| color: var(--accent); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| } | |
| .status-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: rgba(26, 14, 8, 0.28); | |
| } | |
| .status-recording, | |
| .status-generating { | |
| background: var(--accent); | |
| animation: rec-pulse 1.4s ease-in-out infinite; | |
| } | |
| .status-complete { | |
| background: var(--green); | |
| } | |
| .demo-controls { | |
| gap: 8px; | |
| } | |
| .demo-controls button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 30px; | |
| gap: 6px; | |
| padding: 6px 10px; | |
| border: 0.5px solid rgba(26, 14, 8, 0.22); | |
| border-radius: 4px; | |
| background: rgba(26, 14, 8, 0.06); | |
| color: var(--ink); | |
| cursor: pointer; | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| letter-spacing: 0.04em; | |
| } | |
| .demo-controls button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.38; | |
| } | |
| .studio-canvas { | |
| position: relative; | |
| z-index: 2; | |
| display: grid; | |
| grid-template-columns: 390px minmax(0, 1fr); | |
| height: calc(100svh - 53px); | |
| min-height: 720px; | |
| background-color: #ffffff; | |
| background-image: none; | |
| } | |
| .voice-panel { | |
| display: grid; | |
| grid-template-rows: auto minmax(0, 1fr); | |
| min-height: 0; | |
| border-right: 0.5px solid rgba(60, 30, 20, 0.12); | |
| background: rgba(255, 255, 255, 0.86); | |
| } | |
| .recording-controls { | |
| display: grid; | |
| gap: 12px; | |
| padding: 14px 22px; | |
| border-bottom: 0.5px dashed rgba(60, 30, 20, 0.22); | |
| background: rgba(255, 255, 255, 0.76); | |
| } | |
| .recording-controls > div:first-child { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--ink); | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| letter-spacing: 0.12em; | |
| } | |
| .recording-controls b { | |
| color: var(--accent); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| } | |
| .transcript-panel { | |
| position: relative; | |
| min-height: 0; | |
| height: 100%; | |
| padding: 26px 26px 116px; | |
| border: 0; | |
| border-right: 0; | |
| background: rgba(255, 255, 255, 0.86); | |
| box-shadow: | |
| inset -1px 0 0 rgba(255, 255, 255, 0.9), | |
| 10px 0 34px rgba(26, 14, 8, 0.035); | |
| backdrop-filter: blur(18px) saturate(140%); | |
| -webkit-backdrop-filter: blur(18px) saturate(140%); | |
| } | |
| .transcript-panel header, | |
| .architecture-sheet header, | |
| .roadmap-panel header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .transcript-panel header { | |
| margin-bottom: 18px; | |
| padding-bottom: 12px; | |
| border-bottom: 0.5px dashed rgba(60, 30, 20, 0.2); | |
| } | |
| .transcript-panel header div { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .transcript-panel header span, | |
| .waveform-wrap span, | |
| .architecture-sheet header span, | |
| .roadmap-panel header span, | |
| .roadmap-panel article div span, | |
| .roadmap-panel article div b { | |
| color: var(--brown); | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| letter-spacing: 0.12em; | |
| } | |
| .transcript-panel header div span { | |
| color: var(--ink); | |
| font-weight: 600; | |
| } | |
| .transcript-copy { | |
| margin: 0; | |
| color: rgba(26, 14, 8, 0.78); | |
| font-size: 15.5px; | |
| line-height: 1.55; | |
| } | |
| .live-copy { | |
| min-height: 100%; | |
| } | |
| .transcript-scroll { | |
| height: calc(100% - 168px); | |
| min-height: 220px; | |
| overflow-y: auto; | |
| padding-right: 8px; | |
| } | |
| .transcript-copy span { | |
| opacity: 0.78; | |
| } | |
| .cursor { | |
| animation: cursor-blink 1s steps(1) infinite; | |
| font-weight: 400; | |
| } | |
| .waveform-wrap { | |
| position: absolute; | |
| right: 22px; | |
| bottom: 60px; | |
| left: 22px; | |
| } | |
| .waveform-wrap div { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 6px; | |
| } | |
| .waveform-canvas { | |
| display: block; | |
| width: 100%; | |
| height: 36px; | |
| } | |
| .transcript-panel footer { | |
| position: absolute; | |
| right: 22px; | |
| bottom: 18px; | |
| left: 22px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| padding-top: 10px; | |
| border-top: 0.5px dashed rgba(60, 30, 20, 0.2); | |
| } | |
| .transcript-panel footer span { | |
| padding: 3px 8px; | |
| border-radius: 3px; | |
| background: rgba(26, 14, 8, 0.08); | |
| color: var(--ink); | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| } | |
| .architecture-sheet { | |
| display: grid; | |
| grid-template-rows: auto minmax(0, 1fr); | |
| min-width: 0; | |
| min-height: 0; | |
| padding: 22px 26px 24px; | |
| } | |
| .architecture-sheet header { | |
| align-items: flex-end; | |
| margin-bottom: 12px; | |
| padding-bottom: 10px; | |
| border-bottom: 0.5px solid rgba(60, 30, 20, 0.12); | |
| } | |
| .architecture-sheet h2 { | |
| margin: 6px 0 0; | |
| color: var(--ink); | |
| font-size: 28px; | |
| font-weight: 700; | |
| letter-spacing: -0.035em; | |
| line-height: 1; | |
| } | |
| .architecture-sheet header p { | |
| margin: 8px 0 0; | |
| color: rgba(90, 47, 31, 0.75); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.02em; | |
| } | |
| .architecture-sheet header > div:last-child { | |
| text-align: right; | |
| } | |
| .architecture-sheet strong { | |
| display: block; | |
| margin-top: 4px; | |
| color: var(--ink); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.04em; | |
| } | |
| .asset-section { | |
| margin: 0 0 16px; | |
| } | |
| .asset-section > div:first-child { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .asset-section > div:first-child span, | |
| .asset-section > div:first-child strong { | |
| color: var(--brown); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .asset-strip { | |
| display: flex; | |
| gap: 10px; | |
| overflow-x: auto; | |
| padding-bottom: 6px; | |
| } | |
| .asset-strip a { | |
| display: grid; | |
| flex: 0 0 230px; | |
| gap: 6px; | |
| min-height: 118px; | |
| padding: 12px; | |
| border: 1px solid rgba(26, 14, 8, 0.14); | |
| border-radius: 6px; | |
| background: rgba(255, 255, 255, 0.96); | |
| color: var(--ink); | |
| text-decoration: none; | |
| transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; | |
| } | |
| .asset-strip a:hover { | |
| transform: translateY(-1px); | |
| border-color: rgba(232, 93, 36, 0.5); | |
| box-shadow: 0 10px 24px rgba(26, 14, 8, 0.08); | |
| } | |
| .asset-strip span, | |
| .asset-strip em, | |
| .asset-strip b { | |
| color: var(--brown); | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| font-style: normal; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .asset-strip strong { | |
| overflow: hidden; | |
| margin: 0; | |
| color: var(--ink); | |
| font-family: Inter, ui-sans-serif, system-ui, sans-serif; | |
| font-size: 14px; | |
| letter-spacing: 0; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .asset-strip small { | |
| display: -webkit-box; | |
| overflow: hidden; | |
| color: rgba(60, 36, 24, 0.78); | |
| font-size: 12px; | |
| line-height: 1.35; | |
| -webkit-box-orient: vertical; | |
| -webkit-line-clamp: 2; | |
| } | |
| .asset-strip b { | |
| color: var(--accent); | |
| } | |
| .architecture-graph { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .workspace-split { | |
| display: grid; | |
| grid-template-rows: minmax(0, 65fr) minmax(210px, 35fr); | |
| gap: 16px; | |
| min-height: 0; | |
| } | |
| .workspace-graph-panel { | |
| position: relative; | |
| min-height: 0; | |
| } | |
| .architecture-flow { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 0; | |
| overflow: hidden; | |
| border: 0.5px solid rgba(70, 78, 125, 0.14); | |
| border-radius: 10px; | |
| background: | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.96)), | |
| radial-gradient(circle at 20% 20%, rgba(255, 214, 102, 0.14), transparent 28%), | |
| radial-gradient(circle at 82% 16%, rgba(99, 102, 241, 0.1), transparent 28%); | |
| } | |
| .architecture-sheet-with-prompt .architecture-flow { | |
| height: 100%; | |
| min-height: 0; | |
| } | |
| .architecture-flow .react-flow { | |
| background: transparent; | |
| } | |
| .architecture-flow .react-flow__attribution { | |
| display: none; | |
| } | |
| .architecture-flow .react-flow__node { | |
| border: 0; | |
| background: transparent; | |
| box-shadow: none; | |
| } | |
| .hf-node-shell { | |
| position: relative; | |
| display: block; | |
| width: 250px; | |
| min-height: 138px; | |
| padding: 16px; | |
| border: 1px solid rgba(31, 22, 15, 0.12); | |
| border-radius: 14px; | |
| background: #ffffff; | |
| color: #1f160f; | |
| font: inherit; | |
| text-align: left; | |
| box-shadow: 0 16px 40px rgba(54, 67, 120, 0.14); | |
| text-decoration: none; | |
| animation: fade-up 0.28s ease both; | |
| } | |
| .hf-node-shell-linked { | |
| cursor: pointer; | |
| } | |
| .hf-node-shell-linked:hover { | |
| border-color: rgba(232, 93, 36, 0.38); | |
| box-shadow: 0 20px 44px rgba(54, 67, 120, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .hf-node-shell-stage-0 { | |
| background: linear-gradient(135deg, #fff8db, #ffe8a8); | |
| } | |
| .hf-node-shell-stage-1 { | |
| background: linear-gradient(135deg, #eaf7ff, #d6edff); | |
| } | |
| .hf-node-shell-stage-2 { | |
| background: linear-gradient(135deg, #f1e8ff, #ddd1ff); | |
| } | |
| .hf-node-shell-stage-3 { | |
| background: linear-gradient(135deg, #e9fbf0, #d5f5df); | |
| } | |
| .hf-node-shell-stage-4 { | |
| background: linear-gradient(135deg, #ffeaf3, #ffd7e8); | |
| } | |
| .hf-node-shell div { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .hf-node-shell strong { | |
| color: #1f160f; | |
| font-size: 17px; | |
| font-weight: 750; | |
| line-height: 1.16; | |
| letter-spacing: 0; | |
| } | |
| .hf-node-shell small { | |
| display: -webkit-box; | |
| overflow: hidden; | |
| color: #6f6258; | |
| font-size: 12.5px; | |
| line-height: 1.4; | |
| letter-spacing: 0; | |
| text-transform: none; | |
| -webkit-box-orient: vertical; | |
| -webkit-line-clamp: 2; | |
| } | |
| .hf-stage-label { | |
| width: fit-content; | |
| max-width: 100%; | |
| overflow: hidden; | |
| padding: 4px 8px; | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.62); | |
| color: #1f160f; | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-overflow: ellipsis; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| .hf-asset-chip { | |
| display: grid; | |
| gap: 4px; | |
| padding-top: 2px; | |
| } | |
| .hf-asset-chip b, | |
| .hf-asset-chip em, | |
| .hf-asset-chip a { | |
| color: #1f160f; | |
| font-family: var(--mono); | |
| font-size: 9px; | |
| font-style: normal; | |
| letter-spacing: 0.08em; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| } | |
| .hf-asset-chip a { | |
| width: fit-content; | |
| padding: 4px 7px; | |
| border-radius: 999px; | |
| background: #1f160f; | |
| color: #ffffff; | |
| cursor: pointer; | |
| pointer-events: all; | |
| } | |
| .hf-asset-chip i { | |
| overflow: hidden; | |
| color: #6f6258; | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| font-style: normal; | |
| letter-spacing: 0.02em; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .hf-handle { | |
| width: 7px; | |
| height: 7px; | |
| border: 1px solid #ffffff; | |
| background: #8b5cf6; | |
| } | |
| .architecture-flow .react-flow__edge-path { | |
| stroke: rgba(91, 104, 151, 0.36); | |
| stroke-width: 2; | |
| stroke-dasharray: none; | |
| } | |
| .architecture-flow .react-flow__edge.animated .react-flow__edge-path { | |
| animation-duration: 0.65s; | |
| } | |
| .architecture-flow .react-flow__edge-text { | |
| fill: rgba(55, 65, 81, 0.7); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| } | |
| .architecture-flow .react-flow__edge-textbg { | |
| fill: rgba(255, 255, 255, 0.86); | |
| } | |
| .flow-legend { | |
| position: absolute; | |
| right: 12px; | |
| bottom: 10px; | |
| display: flex; | |
| gap: 10px; | |
| color: rgba(90, 47, 31, 0.72); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.12em; | |
| pointer-events: none; | |
| } | |
| .build-prompt-panel { | |
| display: grid; | |
| grid-template-rows: auto minmax(0, 1fr); | |
| min-height: 0; | |
| margin-top: 0; | |
| border: 0.5px solid rgba(26, 14, 8, 0.12); | |
| border-radius: 6px; | |
| background: rgba(255, 255, 255, 0.94); | |
| } | |
| .build-prompt-panel header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin: 0; | |
| padding: 14px 16px; | |
| border-bottom: 0.5px solid rgba(60, 30, 20, 0.12); | |
| } | |
| .build-prompt-panel h3 { | |
| margin: 4px 0 0; | |
| color: var(--ink); | |
| font-size: 18px; | |
| line-height: 1.1; | |
| letter-spacing: 0; | |
| } | |
| .build-prompt-panel button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex: 0 0 auto; | |
| padding: 9px 12px; | |
| border: 0; | |
| border-radius: 5px; | |
| background: var(--ink); | |
| color: var(--paper); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| } | |
| .build-prompt-panel button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.42; | |
| } | |
| .build-prompt-panel pre { | |
| min-height: 0; | |
| max-height: none; | |
| margin: 0; | |
| overflow: auto; | |
| padding: 16px; | |
| color: rgba(26, 14, 8, 0.86); | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| line-height: 1.55; | |
| letter-spacing: 0; | |
| white-space: pre-wrap; | |
| } | |
| .workspace-empty-state { | |
| position: absolute; | |
| inset: 0; | |
| display: grid; | |
| place-items: center; | |
| color: #6f6258; | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 0.08em; | |
| pointer-events: none; | |
| text-transform: uppercase; | |
| } | |
| .registration-marks { | |
| fill: none; | |
| stroke: var(--ink); | |
| stroke-width: 0.4; | |
| opacity: 0.35; | |
| } | |
| .graph-labels text, | |
| .micro-copy, | |
| .spec-note text { | |
| fill: var(--brown); | |
| font-family: var(--mono); | |
| font-size: 8px; | |
| font-weight: 600; | |
| letter-spacing: 2px; | |
| opacity: 0.6; | |
| } | |
| .graph-rule { | |
| stroke: var(--ink); | |
| stroke-width: 0.3; | |
| stroke-dasharray: 2 4; | |
| opacity: 0.25; | |
| } | |
| .graph-node.dark rect:first-child { | |
| fill: var(--ink); | |
| } | |
| .graph-node.green rect:first-child { | |
| fill: var(--green); | |
| stroke: var(--ink); | |
| stroke-width: 0.6; | |
| } | |
| .graph-node .glow { | |
| fill: none; | |
| stroke: var(--accent); | |
| stroke-width: 1.5; | |
| opacity: 0; | |
| } | |
| .graph-node.active .glow { | |
| animation: glow-pulse 1.2s ease-out; | |
| } | |
| .node-eyebrow, | |
| .node-meta { | |
| fill: #a87a5f; | |
| font-family: var(--mono); | |
| font-size: 8px; | |
| font-weight: 500; | |
| letter-spacing: 0.18em; | |
| text-anchor: middle; | |
| } | |
| .node-title { | |
| fill: var(--paper-soft); | |
| font-size: 13px; | |
| font-weight: 700; | |
| text-anchor: middle; | |
| } | |
| .green .node-title, | |
| .green .node-meta { | |
| fill: var(--ink); | |
| } | |
| .decision polygon:first-child, | |
| .rerecord rect { | |
| fill: var(--gold); | |
| stroke: var(--ink); | |
| stroke-width: 0.8; | |
| } | |
| .decision text, | |
| .rerecord text { | |
| fill: var(--ink); | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-anchor: middle; | |
| } | |
| .rerecord text { | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| font-weight: 500; | |
| } | |
| .graph-edges { | |
| fill: none; | |
| stroke: var(--ink); | |
| stroke-width: 0.8; | |
| stroke-dasharray: 3 2; | |
| } | |
| .graph-edges path { | |
| animation: flow-dash 1.6s linear infinite; | |
| } | |
| .flow-particles circle { | |
| fill: var(--accent); | |
| } | |
| .graph-note { | |
| opacity: 0.6; | |
| } | |
| .graph-note line { | |
| stroke: var(--brown); | |
| stroke-width: 0.4; | |
| stroke-dasharray: 1.5 1.5; | |
| } | |
| .graph-note circle { | |
| fill: var(--brown); | |
| } | |
| .graph-note text { | |
| fill: var(--brown); | |
| font-family: var(--mono); | |
| font-size: 9px; | |
| font-style: italic; | |
| } | |
| .roadmap-panel { | |
| padding: 24px 22px; | |
| border-left: 0.5px dashed rgba(60, 30, 20, 0.25); | |
| background: rgba(255, 248, 240, 0.14); | |
| transition: opacity 0.35s ease, filter 0.35s ease; | |
| } | |
| .roadmap-panel-muted { | |
| opacity: 0.42; | |
| filter: saturate(0.7); | |
| } | |
| .roadmap-panel-muted article { | |
| opacity: 0.58; | |
| } | |
| .roadmap-panel-visible { | |
| opacity: 1; | |
| filter: none; | |
| } | |
| .roadmap-panel header { | |
| padding-bottom: 14px; | |
| border-bottom: 0.5px dashed rgba(60, 30, 20, 0.2); | |
| } | |
| .roadmap-panel header strong { | |
| color: var(--ink); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| } | |
| .roadmap-list { | |
| display: grid; | |
| gap: 12px; | |
| margin-top: 18px; | |
| } | |
| .roadmap-panel article { | |
| padding: 14px; | |
| border: 0.5px solid rgba(26, 14, 8, 0.18); | |
| border-radius: 6px; | |
| background: rgba(245, 229, 211, 0.24); | |
| } | |
| .roadmap-panel article div { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 14px; | |
| } | |
| .roadmap-panel article div b { | |
| color: var(--accent); | |
| } | |
| .roadmap-panel h3 { | |
| margin: 0 0 6px; | |
| color: var(--ink); | |
| font-size: 16px; | |
| line-height: 1.1; | |
| } | |
| .roadmap-panel p { | |
| margin: 0; | |
| color: rgba(60, 36, 24, 0.78); | |
| font-size: 12px; | |
| line-height: 1.45; | |
| } | |
| @keyframes word-rise { | |
| from { | |
| opacity: 0; | |
| transform: translateY(40px) rotateX(-20deg); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) rotateX(0); | |
| } | |
| } | |
| @keyframes fade-up { | |
| from { | |
| opacity: 0; | |
| transform: translateY(12px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes mic-ring { | |
| from { | |
| opacity: 0.7; | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| transform: scale(2.4); | |
| } | |
| } | |
| @keyframes rec-pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| box-shadow: 0 0 0 0 rgba(232, 93, 36, 0.55); | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| transform: scale(1.2); | |
| box-shadow: 0 0 12px 2px rgba(232, 93, 36, 0.35); | |
| } | |
| } | |
| @keyframes dot-soft { | |
| 0%, 100% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| } | |
| @keyframes cursor-blink { | |
| 0%, 49% { opacity: 1; } | |
| 50%, 100% { opacity: 0; } | |
| } | |
| @keyframes glow-pulse { | |
| 0% { | |
| opacity: 0; | |
| stroke-width: 0.5; | |
| } | |
| 30% { | |
| opacity: 1; | |
| stroke-width: 2; | |
| } | |
| 100% { | |
| opacity: 0; | |
| stroke-width: 4; | |
| } | |
| } | |
| @keyframes flow-dash { | |
| to { stroke-dashoffset: -20; } | |
| } | |
| @media (max-width: 1120px) { | |
| .studio-canvas { | |
| grid-template-columns: 360px 1fr; | |
| } | |
| .roadmap-panel { | |
| grid-column: 1 / -1; | |
| border-top: 0.5px dashed rgba(60, 30, 20, 0.25); | |
| border-left: 0; | |
| } | |
| .roadmap-list { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| } | |
| } | |
| @media (max-width: 820px) { | |
| .landing-nav, | |
| .metadata-strip, | |
| .studio-topbar { | |
| flex-wrap: wrap; | |
| } | |
| .nav-links, | |
| .nav-actions, | |
| .metadata-strip > div { | |
| gap: 12px; | |
| } | |
| .landing-nav, | |
| .landing-content, | |
| .metadata-strip { | |
| padding-inline: 22px; | |
| } | |
| .hero-three { | |
| opacity: 0.38; | |
| } | |
| .hero-annotation { | |
| display: none; | |
| } | |
| .landing-cta { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| } | |
| .studio-canvas { | |
| grid-template-columns: 1fr; | |
| } | |
| .transcript-panel, | |
| .roadmap-panel { | |
| min-height: auto; | |
| border-right: 0; | |
| border-left: 0; | |
| border-bottom: 0.5px dashed rgba(60, 30, 20, 0.25); | |
| } | |
| .waveform-wrap, | |
| .transcript-panel footer { | |
| position: static; | |
| margin-top: 24px; | |
| } | |
| .architecture-sheet-with-prompt .architecture-flow { | |
| height: 560px; | |
| min-height: 560px; | |
| } | |
| .build-prompt-panel header { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| } | |
| .roadmap-list { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |