Spaces:
Running
Running
| @import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300;400;500&family=Geist:wght@300;400;500;600&display=swap"); | |
| @import "tailwindcss"; | |
| :root { | |
| --bg: #0c0b0a; | |
| --bg-2: #131210; | |
| --bg-3: #1a1815; | |
| --line: #2a2620; | |
| --line-2: #3a342c; | |
| --cream: #ebe5d8; | |
| --cream-dim: #b8b1a3; | |
| --muted: #7a746a; | |
| --dim: #4a443d; | |
| --prism-1: #ff7a5c; | |
| --prism-2: #ffb84d; | |
| --prism-3: #c4d92e; | |
| --prism-4: #4dd0c4; | |
| --prism-5: #7c8ee8; | |
| --prism-6: #b67be8; | |
| } | |
| html, | |
| body { | |
| background: var(--bg); | |
| } | |
| .prism-root { | |
| background: var(--bg); | |
| color: var(--cream); | |
| font-family: "Geist", "Helvetica Neue", sans-serif; | |
| font-weight: 400; | |
| letter-spacing: -0.005em; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .display { | |
| font-family: "Instrument Serif", Georgia, serif; | |
| font-weight: 400; | |
| letter-spacing: -0.02em; | |
| } | |
| .mono { | |
| font-family: "JetBrains Mono", ui-monospace, monospace; | |
| font-feature-settings: "tnum" 1; | |
| } | |
| .italic-d { | |
| font-style: italic; | |
| } | |
| /* ---------------- HERO ---------------- */ | |
| .hero { | |
| position: relative; | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| } | |
| .digit-canvas { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| } | |
| .grain { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 2; | |
| opacity: 0.035; | |
| mix-blend-mode: overlay; | |
| background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>"); | |
| } | |
| .vignette { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 2; | |
| background: radial-gradient( | |
| ellipse at center, | |
| transparent 30%, | |
| rgba(12, 11, 10, 0.55) 75%, | |
| rgba(12, 11, 10, 0.96) 100% | |
| ); | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 5; | |
| max-width: 960px; | |
| padding: 80px 36px; | |
| text-align: center; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 1.2s ease-out; | |
| } | |
| .hero-content.is-ready { | |
| opacity: 1; | |
| } | |
| .hero-content > * { | |
| pointer-events: auto; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 7px 14px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| color: var(--cream-dim); | |
| text-transform: uppercase; | |
| margin-bottom: 36px; | |
| background: rgba(19, 18, 16, 0.5); | |
| backdrop-filter: blur(6px); | |
| } | |
| .hero h1 { | |
| font-family: "Instrument Serif", serif; | |
| font-weight: 400; | |
| font-size: clamp(58px, 9vw, 132px); | |
| line-height: 0.96; | |
| letter-spacing: -0.035em; | |
| margin: 0 0 28px; | |
| text-shadow: | |
| 0 2px 8px rgba(0, 0, 0, 0.75), | |
| 0 14px 28px rgba(0, 0, 0, 0.38); | |
| } | |
| .hero h1 .accent { | |
| font-style: italic; | |
| background: linear-gradient( | |
| 110deg, | |
| var(--prism-2), | |
| var(--prism-1) 35%, | |
| var(--prism-6) 75%, | |
| var(--prism-5) | |
| ); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| padding-right: 0.05em; | |
| text-shadow: none; | |
| } | |
| .hero p.lede { | |
| font-size: 18px; | |
| line-height: 1.42; | |
| color: var(--cream-dim); | |
| max-width: 600px; | |
| margin: 0 auto 44px; | |
| text-shadow: | |
| 0 2px 8px rgba(0, 0, 0, 0.8), | |
| 0 10px 24px rgba(0, 0, 0, 0.32); | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 15px 26px; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| letter-spacing: 0.005em; | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| border: 1px solid transparent; | |
| font-family: "Geist", sans-serif; | |
| font-weight: 500; | |
| } | |
| .btn-primary { | |
| background: var(--cream); | |
| color: var(--bg); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| background: #fff; | |
| transform: translateY(-1px); | |
| box-shadow: 0 12px 40px -8px rgba(255, 184, 77, 0.25); | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.35; | |
| cursor: not-allowed; | |
| } | |
| .btn-primary .arrow { | |
| display: inline-block; | |
| transition: transform 0.25s; | |
| font-size: 16px; | |
| } | |
| .btn-primary:hover:not(:disabled) .arrow { | |
| transform: translateY(2px); | |
| } | |
| .hint-down { | |
| position: absolute; | |
| bottom: 32px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 5; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| color: var(--muted); | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| opacity: 0.7; | |
| animation: floaty 3s ease-in-out infinite; | |
| } | |
| @keyframes floaty { | |
| 0%, | |
| 100% { | |
| transform: translate(-50%, 0); | |
| } | |
| 50% { | |
| transform: translate(-50%, 4px); | |
| } | |
| } | |
| .hint-down .line { | |
| width: 1px; | |
| height: 28px; | |
| background: var(--cream-dim); | |
| opacity: 0.5; | |
| } | |
| /* ---------------- PLAYGROUND ---------------- */ | |
| .playground { | |
| position: relative; | |
| height: 100vh; | |
| min-height: 700px; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 56px 24px 28px; | |
| background: radial-gradient( | |
| ellipse 800px 400px at 50% 0%, | |
| rgba(255, 184, 77, 0.06), | |
| transparent 60% | |
| ), | |
| var(--bg); | |
| border-top: 1px solid var(--line); | |
| } | |
| .playground::before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| height: 1px; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent 0%, | |
| var(--prism-1) 14%, | |
| var(--prism-2) 28%, | |
| var(--prism-3) 42%, | |
| var(--prism-4) 56%, | |
| var(--prism-5) 70%, | |
| var(--prism-6) 84%, | |
| transparent 100% | |
| ); | |
| opacity: 0.6; | |
| } | |
| /* ====== SELECT VIEW ====== */ | |
| .select-view { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| max-width: 1180px; | |
| margin: 0 auto; | |
| width: 100%; | |
| padding: 24px 12px; | |
| } | |
| .select-head { | |
| text-align: center; | |
| margin-bottom: 56px; | |
| } | |
| .select-head .eyebrow { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| color: var(--prism-2); | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| margin-bottom: 14px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .select-head .eyebrow::before, | |
| .select-head .eyebrow::after { | |
| content: ""; | |
| width: 24px; | |
| height: 1px; | |
| background: var(--prism-2); | |
| } | |
| .select-head h2 { | |
| font-family: "Instrument Serif", serif; | |
| font-size: clamp(40px, 6vw, 72px); | |
| line-height: 1.02; | |
| letter-spacing: -0.025em; | |
| margin: 0 0 18px; | |
| } | |
| .select-head h2 .em { | |
| font-style: italic; | |
| color: var(--cream-dim); | |
| } | |
| .select-head p { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| color: var(--cream-dim); | |
| max-width: 540px; | |
| margin: 0 auto; | |
| } | |
| .model-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 18px; | |
| margin-bottom: 40px; | |
| } | |
| @media (max-width: 880px) { | |
| .model-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .model-card { | |
| position: relative; | |
| padding: 28px 26px; | |
| background: var(--bg-2); | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 260px; | |
| } | |
| .model-card:hover { | |
| border-color: var(--line-2); | |
| transform: translateY(-2px); | |
| } | |
| .model-card.selected { | |
| border-color: var(--cream-dim); | |
| background: var(--bg-3); | |
| box-shadow: | |
| 0 0 0 1px var(--cream-dim), | |
| 0 20px 60px -20px rgba(255, 184, 77, 0.12); | |
| } | |
| .model-card.disabled { | |
| cursor: not-allowed; | |
| opacity: 0.45; | |
| filter: grayscale(1); | |
| } | |
| .model-card.disabled:hover { | |
| border-color: var(--line); | |
| transform: none; | |
| } | |
| .mc-ribbon { | |
| position: absolute; | |
| top: 14px; | |
| left: 14px; | |
| padding: 4px 8px; | |
| border: 1px solid var(--line-2); | |
| border-radius: 4px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9px; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| color: var(--cream-dim); | |
| background: var(--bg-3); | |
| } | |
| .model-card .check { | |
| position: absolute; | |
| top: 18px; | |
| right: 18px; | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 999px; | |
| border: 1px solid var(--line-2); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| color: var(--bg); | |
| background: transparent; | |
| transition: all 0.2s; | |
| } | |
| .model-card.selected .check { | |
| background: var(--cream); | |
| border-color: var(--cream); | |
| } | |
| .model-card .mc-size { | |
| font-family: "Instrument Serif", serif; | |
| font-size: 64px; | |
| line-height: 1; | |
| letter-spacing: -0.04em; | |
| } | |
| .model-card .mc-size .gb { | |
| font-family: "Geist", sans-serif; | |
| font-size: 16px; | |
| color: var(--muted); | |
| letter-spacing: 0.02em; | |
| margin-left: 8px; | |
| } | |
| .model-card .mc-name { | |
| margin-top: 14px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; | |
| color: var(--cream-dim); | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .model-card .mc-blurb { | |
| margin-top: 14px; | |
| font-family: "Instrument Serif", serif; | |
| font-style: italic; | |
| font-size: 18px; | |
| line-height: 1.4; | |
| color: var(--cream); | |
| } | |
| .model-card .mc-stats { | |
| margin-top: auto; | |
| padding-top: 22px; | |
| border-top: 1px dashed var(--line); | |
| display: grid; | |
| gap: 6px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| } | |
| .model-card .mc-stat { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .model-card .mc-stat .k { | |
| color: var(--muted); | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .model-card .mc-stat .v { | |
| color: var(--cream); | |
| } | |
| .select-actions { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .select-actions .note { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| color: var(--muted); | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| /* ====== LOADING VIEW ====== */ | |
| .load-view { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px; | |
| } | |
| .load-card { | |
| width: 100%; | |
| max-width: 560px; | |
| text-align: center; | |
| } | |
| .load-card .label { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| color: var(--muted); | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| margin-bottom: 12px; | |
| } | |
| .load-card h3 { | |
| font-family: "Instrument Serif", serif; | |
| font-size: 56px; | |
| line-height: 1; | |
| letter-spacing: -0.025em; | |
| margin: 0 0 38px; | |
| } | |
| .load-card h3 .em { | |
| font-style: italic; | |
| color: var(--cream-dim); | |
| } | |
| .progress { | |
| position: relative; | |
| height: 4px; | |
| background: var(--bg-3); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| margin-bottom: 18px; | |
| } | |
| .progress .fill { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| 90deg, | |
| var(--prism-4), | |
| var(--prism-3) 50%, | |
| var(--prism-2) | |
| ); | |
| transition: width 0.12s linear; | |
| box-shadow: 0 0 14px rgba(255, 184, 77, 0.4); | |
| } | |
| .load-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| color: var(--cream-dim); | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .load-row .pct { | |
| color: var(--cream); | |
| font-feature-settings: "tnum" 1; | |
| } | |
| /* ====== CHAT VIEW ====== */ | |
| .chat-view { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| max-width: 880px; | |
| width: 100%; | |
| margin: 0 auto; | |
| min-height: 0; | |
| } | |
| .pg-header-bar { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 18px; | |
| } | |
| .pg-title { | |
| font-family: "Instrument Serif", serif; | |
| font-size: 32px; | |
| line-height: 1; | |
| letter-spacing: -0.025em; | |
| margin: 0; | |
| } | |
| .pg-title .em { | |
| font-style: italic; | |
| color: var(--cream-dim); | |
| } | |
| .pg-mini { | |
| display: flex; | |
| gap: 8px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| color: var(--cream-dim); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| flex-wrap: wrap; | |
| } | |
| .pg-mini .chip { | |
| padding: 5px 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: var(--bg-2); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| } | |
| .pg-mini .chip .dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 999px; | |
| background: var(--prism-3); | |
| box-shadow: 0 0 8px var(--prism-3); | |
| } | |
| .pg-mini .chip .k { | |
| color: var(--muted); | |
| } | |
| .chat { | |
| flex: 1; | |
| background: var(--bg-2); | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5); | |
| min-height: 0; | |
| } | |
| .chat-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 14px 18px; | |
| border-bottom: 1px solid var(--line); | |
| background: var(--bg-3); | |
| flex: 0 0 auto; | |
| } | |
| .chat-bar .left { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| color: var(--cream-dim); | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .chat-bar .dots { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .chat-bar .dots span { | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 999px; | |
| background: var(--dim); | |
| } | |
| .chat-bar .dots span:first-child { | |
| background: var(--prism-1); | |
| opacity: 0.6; | |
| } | |
| .chat-bar .dots span:nth-child(2) { | |
| background: var(--prism-2); | |
| opacity: 0.6; | |
| } | |
| .chat-bar .dots span:nth-child(3) { | |
| background: var(--prism-3); | |
| opacity: 0.6; | |
| } | |
| .chat-bar .right { | |
| display: inline-flex; | |
| align-items: baseline; | |
| gap: 8px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .chat-bar .right .tps-value { | |
| color: var(--cream); | |
| font-feature-settings: "tnum" 1; | |
| min-width: 28px; | |
| text-align: right; | |
| } | |
| .chat-bar .right .tps-label { | |
| color: var(--muted); | |
| } | |
| .messages { | |
| flex: 1; | |
| padding: 28px 26px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 22px; | |
| min-height: 0; | |
| } | |
| .messages::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .messages::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .messages::-webkit-scrollbar-thumb { | |
| background: var(--line-2); | |
| border-radius: 4px; | |
| } | |
| .message { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| max-width: 82%; | |
| animation: msgIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); | |
| } | |
| @keyframes msgIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(6px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .message .role { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .message.user { | |
| align-self: flex-end; | |
| align-items: flex-end; | |
| } | |
| .message.user .role { | |
| color: var(--cream-dim); | |
| } | |
| .message.assistant { | |
| align-self: flex-start; | |
| align-items: flex-start; | |
| } | |
| .message.assistant .role { | |
| background: linear-gradient(110deg, var(--prism-2), var(--prism-1) 60%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .bubble { | |
| padding: 14px 18px; | |
| border-radius: 8px; | |
| font-size: 15px; | |
| line-height: 1.45; | |
| overflow-wrap: break-word; | |
| } | |
| .message.user .bubble { | |
| background: var(--cream); | |
| color: var(--bg); | |
| border-bottom-right-radius: 2px; | |
| white-space: pre-wrap; | |
| } | |
| .message.assistant .bubble { | |
| background: transparent; | |
| color: var(--cream); | |
| border: 1px solid var(--line); | |
| border-bottom-left-radius: 2px; | |
| font-family: "Geist", "Helvetica Neue", sans-serif; | |
| font-size: 15px; | |
| line-height: 1.45; | |
| letter-spacing: -0.005em; | |
| white-space: normal; | |
| } | |
| .message.assistant .bubble .streamdown-content { | |
| overflow-wrap: anywhere; | |
| } | |
| .message.assistant .bubble .streamdown-content > :first-child { | |
| margin-top: 0; | |
| } | |
| .message.assistant .bubble .streamdown-content > :last-child { | |
| margin-bottom: 0; | |
| } | |
| .message.assistant .bubble .streamdown-content p, | |
| .message.assistant .bubble .streamdown-content ul, | |
| .message.assistant .bubble .streamdown-content ol, | |
| .message.assistant .bubble .streamdown-content blockquote, | |
| .message.assistant .bubble .streamdown-content pre, | |
| .message.assistant .bubble .streamdown-content table, | |
| .message.assistant .bubble .streamdown-content hr { | |
| margin: 0 0 0.7em; | |
| } | |
| .message.assistant .bubble .streamdown-content ul, | |
| .message.assistant .bubble .streamdown-content ol { | |
| padding-left: 1.3em; | |
| } | |
| .message.assistant .bubble .streamdown-content li + li { | |
| margin-top: 0.18em; | |
| } | |
| .message.assistant .bubble .streamdown-content a { | |
| color: var(--prism-2); | |
| } | |
| .message.assistant .bubble .streamdown-content strong { | |
| color: #fff5df; | |
| } | |
| .message.assistant .bubble .streamdown-content blockquote { | |
| border-left: 2px solid var(--line-2); | |
| padding-left: 14px; | |
| color: var(--cream-dim); | |
| } | |
| .message.assistant .bubble .streamdown-content :not(pre) > code { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 0.92em; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| padding: 0.12em 0.35em; | |
| } | |
| .message.assistant .bubble .streamdown-content pre { | |
| overflow-x: auto; | |
| padding: 14px 16px; | |
| background: var(--bg); | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| } | |
| .message.assistant .bubble .streamdown-content pre code { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 13px; | |
| line-height: 1.5; | |
| } | |
| .message.assistant .bubble .streamdown-content table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 14px; | |
| } | |
| .message.assistant .bubble .streamdown-content th, | |
| .message.assistant .bubble .streamdown-content td { | |
| border: 1px solid var(--line); | |
| padding: 8px 10px; | |
| text-align: left; | |
| vertical-align: top; | |
| } | |
| .message.assistant .bubble .streamdown-content th { | |
| color: #fff5df; | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .message.assistant .bubble .streamdown-content .katex-display { | |
| margin: 0.95em 0; | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| } | |
| .cursor { | |
| display: inline-block; | |
| width: 8px; | |
| height: 18px; | |
| background: var(--prism-2); | |
| margin-left: 2px; | |
| vertical-align: text-bottom; | |
| animation: blink 0.85s step-end infinite; | |
| box-shadow: 0 0 8px var(--prism-2); | |
| } | |
| @keyframes blink { | |
| 50% { | |
| opacity: 0; | |
| } | |
| } | |
| .thinking { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 14px 18px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| border-bottom-left-radius: 2px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| color: var(--muted); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .thinking .bits { | |
| display: inline-flex; | |
| gap: 4px; | |
| } | |
| .thinking .bits span { | |
| font-family: "JetBrains Mono", monospace; | |
| color: var(--cream); | |
| opacity: 0.4; | |
| animation: bitDance 0.6s ease-in-out infinite; | |
| } | |
| .thinking .bits span:nth-child(2) { | |
| animation-delay: 0.1s; | |
| } | |
| .thinking .bits span:nth-child(3) { | |
| animation-delay: 0.2s; | |
| } | |
| .thinking .bits span:nth-child(4) { | |
| animation-delay: 0.3s; | |
| } | |
| .thinking .bits span:nth-child(5) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes bitDance { | |
| 0%, | |
| 100% { | |
| opacity: 0.3; | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| opacity: 1; | |
| transform: translateY(-2px); | |
| color: var(--prism-2); | |
| } | |
| } | |
| .composer { | |
| padding: 16px; | |
| border-top: 1px solid var(--line); | |
| background: var(--bg-3); | |
| display: flex; | |
| gap: 12px; | |
| align-items: flex-end; | |
| flex: 0 0 auto; | |
| } | |
| .composer textarea { | |
| flex: 1; | |
| background: var(--bg); | |
| color: var(--cream); | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| padding: 12px 14px; | |
| font-family: "Geist", sans-serif; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| resize: none; | |
| outline: none; | |
| min-height: 44px; | |
| max-height: 140px; | |
| transition: border-color 0.2s; | |
| } | |
| .composer textarea:focus { | |
| border-color: var(--cream-dim); | |
| } | |
| .composer textarea::placeholder { | |
| color: var(--muted); | |
| } | |
| .send { | |
| background: var(--cream); | |
| color: var(--bg); | |
| border: none; | |
| border-radius: 6px; | |
| padding: 0 18px; | |
| height: 44px; | |
| font-family: "Geist", sans-serif; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| transition: all 0.2s; | |
| } | |
| .send .send-icon { | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 999px; | |
| background: rgba(12, 11, 10, 0.08); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex: 0 0 auto; | |
| } | |
| .send .send-icon svg { | |
| width: 14px; | |
| height: 14px; | |
| display: block; | |
| } | |
| .send:hover:not(:disabled) { | |
| background: #fff; | |
| } | |
| .send:disabled { | |
| background: var(--line-2); | |
| color: var(--muted); | |
| cursor: not-allowed; | |
| } | |
| .send:disabled .send-icon { | |
| background: rgba(255, 255, 255, 0.06); | |
| } | |