Spaces:
Running
Running
8-bit model (19 MB, was 71 MB) and ember.wasm from ember.cpp 3d811d0 (dequantise at load, prefix reuse across turns)
277adcb verified | /* ember chat: shared by the native server page (www/) and the in-browser | |
| WebAssembly page (deploy/wasm/web/). Design tokens follow | |
| johnnyteutonic.github.io: Fraunces headings, Inter body, JetBrains Mono for | |
| technical text, warm accent, light and dark themes. Plain CSS, no build. */ | |
| :root { | |
| --bg: #fbfaf8; | |
| --bg-raised: #ffffff; | |
| --ink: #16171a; | |
| --ink-soft: #4d5158; | |
| --ink-muted: #686d75; | |
| --rule: #e4e1db; | |
| --accent: #7a4b2a; | |
| --accent-bg: #f2ebe4; | |
| --on-accent: #ffffff; | |
| --ok: #2f7d4f; | |
| --warn: #b7791f; | |
| --danger: #9c3326; | |
| --danger-bg: #fbeeec; | |
| --danger-rule: #efcdc7; | |
| --shadow: 0 1px 2px rgba(20,20,20,.04), 0 6px 18px rgba(20,20,20,.05); | |
| --ring: 0 0 0 3px rgba(122,75,42,.18); | |
| --font-head: "Fraunces", Georgia, serif; | |
| --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; | |
| --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; | |
| --measure: 780px; | |
| color-scheme: light; | |
| } | |
| html[data-theme="dark"] { | |
| --bg: #121316; | |
| --bg-raised: #1a1c20; | |
| --ink: #ecebe8; | |
| --ink-soft: #b3b7be; | |
| --ink-muted: #9298a1; | |
| --rule: #2c2f35; | |
| --accent: #d9a273; | |
| --accent-bg: #26211c; | |
| --on-accent: #1a1207; | |
| --ok: #6cc28f; | |
| --warn: #e0b25c; | |
| --danger: #f19a8b; | |
| --danger-bg: #2a1a18; | |
| --danger-rule: #4a2a25; | |
| --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25); | |
| --ring: 0 0 0 3px rgba(217,162,115,.22); | |
| color-scheme: dark; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| html:not([data-theme="light"]) { | |
| --bg: #121316; | |
| --bg-raised: #1a1c20; | |
| --ink: #ecebe8; | |
| --ink-soft: #b3b7be; | |
| --ink-muted: #9298a1; | |
| --rule: #2c2f35; | |
| --accent: #d9a273; | |
| --accent-bg: #26211c; | |
| --on-accent: #1a1207; | |
| --ok: #6cc28f; | |
| --warn: #e0b25c; | |
| --danger: #f19a8b; | |
| --danger-bg: #2a1a18; | |
| --danger-rule: #4a2a25; | |
| --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25); | |
| --ring: 0 0 0 3px rgba(217,162,115,.22); | |
| color-scheme: dark; | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { height: 100%; } | |
| body { | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| height: 100dvh; | |
| overflow: hidden; | |
| background: var(--bg); | |
| color: var(--ink); | |
| font-family: var(--font-body); | |
| font-size: 16px; | |
| line-height: 1.55; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| } | |
| a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } | |
| a:hover { border-bottom-color: var(--accent); } | |
| :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } | |
| ::selection { background: var(--accent); color: var(--on-accent); } | |
| .sr-only { | |
| position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; | |
| overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; | |
| } | |
| .inner { width: min(var(--measure), 100% - 32px); margin-inline: auto; } | |
| /* ── header ─────────────────────────────── */ | |
| .app-head { | |
| flex: none; | |
| position: relative; | |
| border-bottom: 1px solid var(--rule); | |
| background: color-mix(in srgb, var(--bg) 88%, transparent); | |
| } | |
| .app-head .inner { | |
| display: flex; align-items: center; gap: 12px; | |
| padding: 12px 0; | |
| } | |
| .brand { display: flex; align-items: center; gap: 11px; min-width: 0; margin-right: auto; } | |
| .brand-mark { | |
| flex: none; | |
| width: 34px; height: 34px; border-radius: 50%; | |
| display: grid; place-items: center; | |
| background: var(--accent-bg); color: var(--accent); | |
| font-size: 14px; line-height: 1; | |
| } | |
| .brand-text { min-width: 0; } | |
| .brand h1 { | |
| font-family: var(--font-head); | |
| font-weight: 600; font-size: 1.2rem; line-height: 1.15; | |
| letter-spacing: -.01em; | |
| margin: 0; | |
| } | |
| .model-info { | |
| position: relative; | |
| margin: 2px 0 0; | |
| padding-left: 14px; | |
| font-family: var(--font-mono); | |
| font-size: .72rem; line-height: 1.4; | |
| color: var(--ink-muted); | |
| overflow-wrap: anywhere; | |
| } | |
| .model-info::before { | |
| content: ""; | |
| position: absolute; left: 0; top: .42em; | |
| width: 7px; height: 7px; border-radius: 50%; | |
| background: var(--rule); | |
| } | |
| .model-info[data-state="loading"]::before { background: var(--warn); animation: pulse 1.4s ease-in-out infinite; } | |
| .model-info[data-state="ready"]::before { background: var(--ok); } | |
| .model-info[data-state="error"]::before { background: var(--danger); } | |
| .model-info:empty { display: none; } | |
| .theme-toggle { | |
| flex: none; | |
| background: none; border: 1px solid var(--rule); color: var(--ink-soft); | |
| border-radius: 50%; width: 34px; height: 34px; cursor: pointer; | |
| font-size: .95rem; line-height: 1; display: grid; place-items: center; | |
| transition: color .15s, border-color .15s; | |
| } | |
| .theme-toggle:hover { color: var(--ink); border-color: var(--ink-muted); } | |
| .theme-toggle:focus-visible { border-radius: 50%; } | |
| .progress { | |
| position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; | |
| background: transparent; overflow: hidden; | |
| } | |
| .progress[hidden] { display: none; } | |
| .progress span { | |
| display: block; height: 100%; width: 0; | |
| background: var(--accent); | |
| transition: width .25s ease-out; | |
| } | |
| /* ── conversation ───────────────────────── */ | |
| .history { | |
| flex: 1 1 auto; | |
| min-height: 0; | |
| overflow-y: auto; | |
| overscroll-behavior: contain; | |
| padding: 22px 0 18px; | |
| display: flex; flex-direction: column; gap: 16px; | |
| } | |
| .history > * { width: min(var(--measure), 100% - 32px); margin-inline: auto; flex: none; } | |
| .intro { | |
| background: var(--bg-raised); | |
| border: 1px solid var(--rule); | |
| border-radius: 12px; | |
| padding: 16px 20px 17px; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 6px; | |
| } | |
| .intro h2 { | |
| font-family: var(--font-head); | |
| font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; | |
| margin: 0 0 6px; | |
| } | |
| .intro p { margin: 0; color: var(--ink-soft); font-size: .92rem; } | |
| .facts { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; } | |
| .facts li { | |
| font-family: var(--font-mono); | |
| font-size: .7rem; letter-spacing: .02em; | |
| color: var(--accent); background: var(--accent-bg); | |
| padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; | |
| } | |
| .message { display: flex; align-items: flex-start; gap: 10px; } | |
| .user-message { justify-content: flex-end; } | |
| .avatar { | |
| flex: none; | |
| width: 30px; height: 30px; border-radius: 50%; | |
| display: grid; place-items: center; | |
| background: var(--accent-bg); color: var(--accent); | |
| font-size: 12px; line-height: 1; | |
| margin-top: 21px; | |
| } | |
| .msg-body { | |
| display: flex; flex-direction: column; gap: 4px; | |
| min-width: 0; | |
| max-width: min(78%, 560px); | |
| } | |
| .user-message .msg-body { align-items: flex-end; } | |
| .who { | |
| font-family: var(--font-mono); | |
| font-size: .7rem; letter-spacing: .04em; | |
| color: var(--ink-muted); | |
| padding: 0 4px; | |
| } | |
| .bubble { | |
| padding: 9px 15px 10px; | |
| border-radius: 18px; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| font-size: .97rem; | |
| } | |
| .server-message .bubble { | |
| background: var(--bg-raised); | |
| border: 1px solid var(--rule); | |
| border-top-left-radius: 6px; | |
| box-shadow: var(--shadow); | |
| } | |
| .user-message .bubble { | |
| background: var(--accent); | |
| color: var(--on-accent); | |
| border-top-right-radius: 6px; | |
| } | |
| .error-message .bubble { | |
| background: var(--danger-bg); | |
| border-color: var(--danger-rule); | |
| color: var(--danger); | |
| box-shadow: none; | |
| } | |
| .timing { | |
| font-family: var(--font-mono); | |
| font-size: .68rem; line-height: 1.4; | |
| color: var(--ink-muted); | |
| padding: 0 4px; | |
| } | |
| .note { display: block; margin-top: 4px; font-size: .82rem; color: var(--ink-muted); white-space: normal; } | |
| .message.appear { animation: rise .22s ease-out both; } | |
| /* typing indicator */ | |
| .typing { display: inline-flex; align-items: center; gap: 5px; height: 1.5em; vertical-align: middle; } | |
| .typing span { | |
| width: 6px; height: 6px; border-radius: 50%; | |
| background: var(--ink-muted); | |
| animation: blink 1.2s infinite ease-in-out both; | |
| } | |
| .typing span:nth-child(2) { animation-delay: .16s; } | |
| .typing span:nth-child(3) { animation-delay: .32s; } | |
| /* ── composer ───────────────────────────── */ | |
| .composer { | |
| flex: none; | |
| border-top: 1px solid var(--rule); | |
| background: var(--bg); | |
| padding: 12px 0 10px; | |
| padding-bottom: max(10px, env(safe-area-inset-bottom)); | |
| } | |
| .field { | |
| display: flex; align-items: center; gap: 8px; | |
| background: var(--bg-raised); | |
| border: 1px solid var(--rule); | |
| border-radius: 999px; | |
| padding: 5px 5px 5px 18px; | |
| transition: border-color .15s, box-shadow .15s; | |
| } | |
| .field:focus-within { border-color: var(--accent); box-shadow: var(--ring); } | |
| .field input { | |
| flex: 1 1 auto; min-width: 0; | |
| border: 0; outline: 0; background: transparent; | |
| color: var(--ink); | |
| font: inherit; font-size: 1rem; | |
| padding: 7px 0; | |
| } | |
| .field input::placeholder { color: var(--ink-muted); opacity: 1; } | |
| .field button { | |
| flex: none; | |
| border: 0; cursor: pointer; | |
| background: var(--accent); color: var(--on-accent); | |
| font: inherit; font-size: .9rem; font-weight: 600; | |
| border-radius: 999px; | |
| padding: 9px 18px; | |
| min-width: 72px; | |
| white-space: nowrap; | |
| transition: filter .15s, opacity .15s, transform .15s; | |
| } | |
| .field button:hover:not(:disabled) { filter: brightness(1.08); } | |
| .field button:active:not(:disabled) { transform: translateY(1px); } | |
| .field button:focus-visible { outline-offset: 3px; border-radius: 999px; } | |
| .field button:disabled { opacity: .55; cursor: not-allowed; } | |
| .fineprint { | |
| margin: 8px 0 0; text-align: center; | |
| font-size: .74rem; color: var(--ink-muted); | |
| } | |
| @keyframes blink { | |
| 0%, 80%, 100% { opacity: .3; transform: translateY(0); } | |
| 40% { opacity: 1; transform: translateY(-3px); } | |
| } | |
| @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } | |
| @keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before { animation: none ; transition: none ; } | |
| .typing span { opacity: .7; } | |
| } | |
| /* ── small screens and short iframes ────── */ | |
| @media (max-width: 560px) { | |
| .inner, .history > * { width: calc(100% - 24px); } | |
| .msg-body { max-width: 86%; } | |
| .avatar { display: none; } | |
| .intro { padding: 14px 16px; } | |
| .intro h2 { font-size: 1.05rem; } | |
| .brand h1 { font-size: 1.1rem; } | |
| .brand-mark { width: 30px; height: 30px; font-size: 12px; } | |
| .model-info { | |
| font-size: .66rem; | |
| display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; | |
| overflow: hidden; | |
| } | |
| .fineprint { font-size: .7rem; } | |
| } | |
| @media (max-height: 640px) { | |
| .app-head .inner { padding: 9px 0; } | |
| .history { padding-top: 16px; gap: 14px; } | |
| .composer { padding-top: 10px; } | |
| .fineprint { margin-top: 6px; } | |
| } | |