|
|
| @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 { |
| 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 { |
| 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 { |
| 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; |
| } |
|
|
| |
| .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 { |
| 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); |
| } |
|
|
