diff --git a/assets/icon-app.svg b/assets/icon-app.svg new file mode 100644 index 00000000..9bbff777 --- /dev/null +++ b/assets/icon-app.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/icon.icns b/assets/icon.icns index 652b54ee..7c689cac 100644 Binary files a/assets/icon.icns and b/assets/icon.icns differ diff --git a/assets/icon.ico b/assets/icon.ico index 3292508c..336b3b77 100644 Binary files a/assets/icon.ico and b/assets/icon.ico differ diff --git a/assets/icon.png b/assets/icon.png index 82ee894c..5888660f 100644 Binary files a/assets/icon.png and b/assets/icon.png differ diff --git a/assets/tray-icon.png b/assets/tray-icon.png index e39da2a0..b0a3876b 100644 Binary files a/assets/tray-icon.png and b/assets/tray-icon.png differ diff --git a/assets/tray-icon@2x.png b/assets/tray-icon@2x.png index 82930d8b..984016a6 100644 Binary files a/assets/tray-icon@2x.png and b/assets/tray-icon@2x.png differ diff --git a/assets/tray-iconTemplate.png b/assets/tray-iconTemplate.png index 6d58b697..774357d9 100644 Binary files a/assets/tray-iconTemplate.png and b/assets/tray-iconTemplate.png differ diff --git a/assets/tray-iconTemplate@2x.png b/assets/tray-iconTemplate@2x.png index 69f50945..df868064 100644 Binary files a/assets/tray-iconTemplate@2x.png and b/assets/tray-iconTemplate@2x.png differ diff --git a/package.json b/package.json index f29fae17..efb3f356 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "agent-company", - "version": "0.4.92", + "version": "0.4.95", "private": true, "type": "module", "description": "Cross-platform Electron desktop control plane for local-first AI agent companies.", @@ -35,7 +35,9 @@ "@agentcompany/adapter-codex-local": "workspace:*", "@agentcompany/adapter-gemini-local": "workspace:*", "@agentcompany/adapter-utils": "workspace:*", + "@fontsource-variable/inter": "^5.2.8", "@fontsource-variable/jetbrains-mono": "5.2.8", + "@fontsource/instrument-serif": "^5.2.8", "@phosphor-icons/react": "2.1.10", "@tanstack/react-virtual": "^3.13.23", "clsx": "2.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 70cda949..1b8fafe2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,9 +20,15 @@ importers: '@agentcompany/adapter-utils': specifier: workspace:* version: link:packages/adapter-utils + '@fontsource-variable/inter': + specifier: ^5.2.8 + version: 5.2.8 '@fontsource-variable/jetbrains-mono': specifier: 5.2.8 version: 5.2.8 + '@fontsource/instrument-serif': + specifier: ^5.2.8 + version: 5.2.8 '@phosphor-icons/react': specifier: 2.1.10 version: 2.1.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4) @@ -699,9 +705,15 @@ packages: resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@fontsource-variable/inter@5.2.8': + resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==} + '@fontsource-variable/jetbrains-mono@5.2.8': resolution: {integrity: sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==} + '@fontsource/instrument-serif@5.2.8': + resolution: {integrity: sha512-s+bkz+syj2rO00Rmq9g0P+PwuLig33DR1xDR8pTWmovH1pUjwnncrFk++q9mmOex8fUQ7oW80gPpPDaw7V1MMw==} + '@humanfs/core@0.19.1': resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==} engines: {node: '>=18.18.0'} @@ -3387,8 +3399,12 @@ snapshots: '@eslint/core': 0.17.0 levn: 0.4.1 + '@fontsource-variable/inter@5.2.8': {} + '@fontsource-variable/jetbrains-mono@5.2.8': {} + '@fontsource/instrument-serif@5.2.8': {} + '@humanfs/core@0.19.1': {} '@humanfs/node@0.16.7': diff --git a/scripts/generate-icons.py b/scripts/generate-icons.py index d692daaa..87ca1d73 100644 --- a/scripts/generate-icons.py +++ b/scripts/generate-icons.py @@ -1,222 +1,195 @@ #!/usr/bin/env python3 -"""Generate AgentCompany app icons (PNG, ICO, ICNS) and tray icons. +"""Generate AgentCompany icons from SVG sources using cairosvg. -Design v4: Circle background #191919 with #FBFAF5 "A" logo. -Uses the actual logo paths from logo.svg rendered via cairosvg/Pillow. +Two icon families: + - Web (circle bg): icon.svg → landing favicon + website logo + - App (square bg): icon-app.svg → Electron app icon (Apple HIG, OS applies mask) + - Tray: rendered from logo.svg for menu bar / notification area """ from __future__ import annotations +import io +import os import shutil import subprocess from pathlib import Path -from PIL import Image, ImageDraw +# ── Ensure cairo library is discoverable on macOS (Homebrew) ────────── +for _lib_dir in ("/opt/homebrew/opt/cairo/lib", "/usr/local/opt/cairo/lib"): + if Path(_lib_dir).exists(): + os.environ["DYLD_LIBRARY_PATH"] = ( + _lib_dir + ":" + os.environ.get("DYLD_LIBRARY_PATH", "") + ) + break + +import cairosvg # noqa: E402 — must come after DYLD_LIBRARY_PATH setup +from PIL import Image # noqa: E402 ROOT = Path(__file__).resolve().parents[1] ASSETS = ROOT / "assets" +LANDING = ROOT / "landing" / "public" ICONSET = ASSETS / "icon.iconset" -PNG_PATH = ASSETS / "icon.png" -ICO_PATH = ASSETS / "icon.ico" -ICNS_PATH = ASSETS / "icon.icns" -SVG_PATH = ASSETS / "icon.svg" +LOGO_SVG = ROOT / "logo.svg" + +# SVG sources +WEB_SVG = ASSETS / "icon.svg" # circle bg — web favicon +APP_SVG = ASSETS / "icon-app.svg" # square bg — Electron (Apple HIG) + SIZE = 1024 -# ── Brand palette ────────────────────────────────────────────────────── -BG_COLOR = (25, 25, 25) # #191919 -LOGO_COLOR = (251, 250, 245) # #FBFAF5 +# ── Helpers ─────────────────────────────────────────────────────────── -def build_icon() -> Image.Image: - """Build the app icon by rendering icon.svg via cairosvg, or fallback to Pillow.""" - # Try cairosvg first (best quality) - try: - import cairosvg - svg_data = SVG_PATH.read_bytes() - png_data = cairosvg.svg2png(bytestring=svg_data, output_width=SIZE, output_height=SIZE) - import io - return Image.open(io.BytesIO(png_data)).convert("RGBA") - except Exception: - pass - - # Fallback: draw programmatically with Pillow - icon = Image.new("RGBA", (SIZE, SIZE), (0, 0, 0, 0)) - draw = ImageDraw.Draw(icon) - - # Circle background - margin = SIZE // 2 - 480 - draw.ellipse( - (margin, margin, SIZE - margin, SIZE - margin), - fill=(*BG_COLOR, 255), +def svg_to_image(svg_path: Path, width: int, height: int | None = None) -> Image.Image: + """Render an SVG to a Pillow RGBA Image at the given size.""" + h = height or width + png_data = cairosvg.svg2png( + url=str(svg_path), output_width=width, output_height=h, ) + return Image.open(io.BytesIO(png_data)).convert("RGBA") - # Draw the "A" monogram — same geometry as the old icon but in new color - cx = SIZE // 2 - apex_y = 200 - base_y = 800 - leg_w = 64 - base_half = 250 - fill = (*LOGO_COLOR, 245) - def leg_x(y: int) -> tuple[float, float]: - t = (y - apex_y) / (base_y - apex_y) - spread = base_half * t - return (cx - spread, cx + spread) - - ll_top, _ = leg_x(apex_y) - ll_bot, _ = leg_x(base_y) - _, lr_top = leg_x(apex_y) - _, lr_bot = leg_x(base_y) - - left_leg = [ - (ll_top - leg_w * 0.35, apex_y), - (ll_top + leg_w * 0.35, apex_y), - (ll_bot + leg_w, base_y), - (ll_bot - leg_w, base_y), - ] - right_leg = [ - (lr_top - leg_w * 0.35, apex_y), - (lr_top + leg_w * 0.35, apex_y), - (lr_bot + leg_w, base_y), - (lr_bot - leg_w, base_y), - ] - - draw.polygon(left_leg, fill=fill) - draw.polygon(right_leg, fill=fill) - - # Crossbars — all same cream color with varying opacity for hierarchy - bar_h = 42 - bar_r = 12 - bar_pad = 14 - - tiers = [ - (440, (*LOGO_COLOR, 255)), - (545, (*LOGO_COLOR, 210)), - (650, (*LOGO_COLOR, 175)), - ] - - for bar_cy, bar_fill in tiers: - left_cx, right_cx = leg_x(bar_cy) - bx0 = int(left_cx + bar_pad) - bx1 = int(right_cx - bar_pad) - draw.rounded_rectangle( - (bx0, bar_cy - bar_h // 2, bx1, bar_cy + bar_h // 2), - radius=bar_r, - fill=bar_fill, - ) - - # Apex beacon - dot_r = 20 - dot_cy = apex_y - 2 - draw.ellipse( - (cx - dot_r, dot_cy - dot_r, cx + dot_r, dot_cy + dot_r), - fill=(*LOGO_COLOR, 255), +def svg_bytes_to_image(svg_bytes: bytes, width: int, height: int | None = None) -> Image.Image: + """Render SVG bytes to a Pillow RGBA Image.""" + h = height or width + png_data = cairosvg.svg2png( + bytestring=svg_bytes, output_width=width, output_height=h, ) - - return icon + return Image.open(io.BytesIO(png_data)).convert("RGBA") -def build_tray_icons() -> None: - """Generate tray/notification area icons for all platforms.""" - # Color tray icon (Windows/Linux) — 32x32 and 64x64 - for name, size in [("tray-icon.png", 32), ("tray-icon@2x.png", 64)]: - img = Image.new("RGBA", (size, size), (0, 0, 0, 0)) - draw = ImageDraw.Draw(img) - margin = 1 - draw.ellipse((margin, margin, size - margin, size - margin), fill=(*BG_COLOR, 255)) +# ── Web icons (circle background) ──────────────────────────────────── - # Simple A shape scaled to tray size - cx = size // 2 - top_y = int(size * 0.18) - bot_y = int(size * 0.82) - spread = int(size * 0.28) - w = max(2, int(size * 0.06)) +def generate_web_icons() -> None: + """Generate favicon.ico and icon.png for the landing site (circle bg).""" + print("Generating web icons from icon.svg (circle bg)…") + master = svg_to_image(WEB_SVG, SIZE) - draw.polygon([ - (cx - w, top_y), (cx + w, top_y), - (cx + spread + w, bot_y), (cx + spread - w, bot_y), - ], fill=(*LOGO_COLOR, 240)) - draw.polygon([ - (cx - w, top_y), (cx + w, top_y), - (cx - spread + w, bot_y), (cx - spread - w, bot_y), - ], fill=(*LOGO_COLOR, 240)) + # PNG for apple-touch-icon / og + web_png = LANDING / "icon.png" + master.save(web_png, format="PNG") + print(f" → {web_png}") - # Crossbar - bar_y = int(size * 0.52) - bar_h = max(2, int(size * 0.06)) - bar_left = cx - int(spread * 0.55) - bar_right = cx + int(spread * 0.55) - draw.rectangle((bar_left, bar_y, bar_right, bar_y + bar_h), fill=(*LOGO_COLOR, 255)) + # Copy SVG to landing + shutil.copy2(WEB_SVG, LANDING / "icon.svg") + print(f" → {LANDING / 'icon.svg'}") - img.save(ASSETS / name, format="PNG") - - # macOS template icons (monochrome black + alpha) - for name, size in [("tray-iconTemplate.png", 22), ("tray-iconTemplate@2x.png", 44)]: - img = Image.new("RGBA", (size, size), (0, 0, 0, 0)) - draw = ImageDraw.Draw(img) - - cx = size // 2 - top_y = int(size * 0.15) - bot_y = int(size * 0.85) - spread = int(size * 0.3) - w = max(1, int(size * 0.06)) - - draw.polygon([ - (cx - w, top_y), (cx + w, top_y), - (cx + spread + w, bot_y), (cx + spread - w, bot_y), - ], fill=(0, 0, 0, 220)) - draw.polygon([ - (cx - w, top_y), (cx + w, top_y), - (cx - spread + w, bot_y), (cx - spread - w, bot_y), - ], fill=(0, 0, 0, 220)) - - bar_y = int(size * 0.52) - bar_h = max(1, int(size * 0.06)) - bar_left = cx - int(spread * 0.55) - bar_right = cx + int(spread * 0.55) - draw.rectangle((bar_left, bar_y, bar_right, bar_y + bar_h), fill=(0, 0, 0, 240)) - - img.save(ASSETS / name, format="PNG") - - -def save_png_and_ico(image: Image.Image) -> None: - ASSETS.mkdir(parents=True, exist_ok=True) - image.save(PNG_PATH, format="PNG") - image.save( - ICO_PATH, - format="ICO", + # ICO with multiple sizes for favicon + favicon = LANDING / "favicon.ico" + master.save( + favicon, format="ICO", sizes=[(16, 16), (24, 24), (32, 32), (48, 48), (64, 64), (128, 128), (256, 256)], ) + print(f" → {favicon}") -def save_icns(image: Image.Image) -> None: +# ── App icons (square background, Apple HIG) ───────────────────────── + +def generate_app_icons() -> None: + """Generate Electron app icons: PNG, ICO, ICNS (square bg, Apple HIG).""" + print("Generating app icons from icon-app.svg (square bg, Apple HIG)…") + master = svg_to_image(APP_SVG, SIZE) + + # Main PNG + png_path = ASSETS / "icon.png" + master.save(png_path, format="PNG") + print(f" → {png_path}") + + # Windows ICO + ico_path = ASSETS / "icon.ico" + master.save( + ico_path, format="ICO", + sizes=[(16, 16), (24, 24), (32, 32), (48, 48), (64, 64), (128, 128), (256, 256)], + ) + print(f" → {ico_path}") + + # macOS ICNS via iconutil + generate_icns(master) + + +def generate_icns(master: Image.Image) -> None: + """Generate .icns from a master image using macOS iconutil.""" if ICONSET.exists(): shutil.rmtree(ICONSET) ICONSET.mkdir(parents=True, exist_ok=True) for size in (16, 32, 64, 128, 256, 512): - image.resize((size, size), Image.Resampling.LANCZOS).save( + master.resize((size, size), Image.Resampling.LANCZOS).save( ICONSET / f"icon_{size}x{size}.png", format="PNG", ) - image.resize((size * 2, size * 2), Image.Resampling.LANCZOS).save( + master.resize((size * 2, size * 2), Image.Resampling.LANCZOS).save( ICONSET / f"icon_{size}x{size}@2x.png", format="PNG", ) + icns_path = ASSETS / "icon.icns" subprocess.run( - ["iconutil", "-c", "icns", str(ICONSET), "-o", str(ICNS_PATH)], + ["iconutil", "-c", "icns", str(ICONSET), "-o", str(icns_path)], check=True, ) shutil.rmtree(ICONSET) + print(f" → {icns_path}") +# ── Tray / notification area icons ─────────────────────────────────── + +def generate_tray_icons() -> None: + """Generate tray icons following Apple HIG for menu bar. + + - Color (Windows/Linux): square bg with logo, 32×32 and 64×64 + - Template (macOS): monochrome black logo on transparent, 22×22 and 44×44 + """ + print("Generating tray icons…") + + # Color tray icons — render app icon (square bg) at small sizes + for name, size in [("tray-icon.png", 32), ("tray-icon@2x.png", 64)]: + img = svg_to_image(APP_SVG, size) + img.save(ASSETS / name, format="PNG") + print(f" → {ASSETS / name}") + + # macOS template icons — black logo silhouette on transparent + # Read logo.svg paths, render as black on transparent + logo_svg = LOGO_SVG.read_text() + + for name, size in [("tray-iconTemplate.png", 22), ("tray-iconTemplate@2x.png", 44)]: + # Create SVG with black fill, sized to target + template_svg = _make_template_svg(logo_svg, size) + img = svg_bytes_to_image(template_svg.encode("utf-8"), size) + img.save(ASSETS / name, format="PNG") + print(f" → {ASSETS / name}") + + +def _make_template_svg(logo_svg_content: str, target_size: int) -> str: + """Create a macOS template SVG: black logo silhouette on transparent bg.""" + # Logo viewBox is 0 0 122 126 — scale to fit target with padding + padding = max(2, int(target_size * 0.1)) + available = target_size - 2 * padding + # Scale to fit height (taller dimension) + scale = available / 126 + logo_w = 122 * scale + # Center horizontally + offset_x = (target_size - logo_w) / 2 + offset_y = padding + + return f""" + + + + +""" + + +# ── Main ────────────────────────────────────────────────────────────── + def main() -> None: ASSETS.mkdir(parents=True, exist_ok=True) - image = build_icon() - save_png_and_ico(image) - save_icns(image) - build_tray_icons() - print(f"Generated: {PNG_PATH}, {ICO_PATH}, {ICNS_PATH}") - print(f"Generated tray icons in {ASSETS}") + LANDING.mkdir(parents=True, exist_ok=True) + + generate_web_icons() + generate_app_icons() + generate_tray_icons() + + print("\nDone! All icons generated.") if __name__ == "__main__": diff --git a/src/main/host-environment-service.ts b/src/main/host-environment-service.ts index a9968929..2e15e998 100644 --- a/src/main/host-environment-service.ts +++ b/src/main/host-environment-service.ts @@ -2,7 +2,7 @@ import { spawn } from "node:child_process"; import { existsSync } from "node:fs"; import { homedir } from "node:os"; import { delimiter as pathDelimiter, join } from "node:path"; -import { app, nativeImage } from "electron"; +import { app } from "electron"; interface HostEnvironmentDependencies { iconPath: string; @@ -91,10 +91,7 @@ export async function prepareHostEnvironment({ logger.info("[path] Skipping interactive shell PATH probe; using deterministic PATH setup only."); } - const appIcon = nativeImage.createFromPath(iconPath); - if (!appIcon.isEmpty()) { - if (process.platform === "darwin" && app.dock) { - app.dock.setIcon(appIcon); - } - } + // Dock icon: macOS uses the .icns from the app bundle with the system squircle + // mask applied automatically. Do not call dock.setIcon() — it bypasses the mask + // and renders the raw PNG oversized and square. } diff --git a/src/renderer/components/CompanyOnboarding/AsciiAnimation.tsx b/src/renderer/components/CompanyOnboarding/AsciiAnimation.tsx new file mode 100644 index 00000000..d8fb549a --- /dev/null +++ b/src/renderer/components/CompanyOnboarding/AsciiAnimation.tsx @@ -0,0 +1,85 @@ +import { memo } from "react"; + +/** + * Scrolling ASCII agent-activity backdrop for the onboarding hero panel. + * Pure CSS animation (translateY on compositor thread) — no JS ticks. + * Content is doubled for seamless looping. + */ + +const LINES = [ + "", + " ╭──────────╮", + " │ CEO │", + " ╰────┬─────╯", + " ┌────┴─────┐", + " ╭──┴──╮ ╭──┴──╮", + " │ CTO │ │ CMO │", + " ╰──┬──╯ ╰──┬──╯", + " ╭──┴──╮ ╭──┴──╮", + " │ Eng │ │ Mkt │", + " ╰─────╯ ╰─────╯", + "", + " $ deploy --agents 12", + " ████████████████████ 100%", + " [OK] all agents online", + "", + " CEO │ analyzing requirements", + " CEO │ identifying deliverables", + " CEO │ delegating to leads", + "", + " CTO │ reviewing architecture", + " CTO │ → Dev.01: auth module", + " CTO │ → Dev.02: API layer", + " CTO │ → QA: test strategy", + "", + " CMO │ go-to-market strategy", + " CMO │ → Mkt.01: launch copy", + " CMO │ → Mkt.02: social plan", + "", + " ┌─ SPRINT 1 ────────────────┐", + " │ tasks ████████░░ 80% │", + " │ agents 12 active │", + " │ tests 128 passing │", + " └──────────────────────────┘", + "", + " Dev.01 │ scaffolding auth", + " Dev.02 │ REST endpoints", + " Design │ component library", + " QA │ integration tests", + " Mkt.01 │ blog post drafted", + "", + " CEO │ sprint review: ✓", + " CTO │ code review: merged", + " Dev.01 │ PR #12 → main", + " QA │ all tests green", + " CMO │ brief approved", + "", + " [INFO] Sprint 1 complete", + " [INFO] Advancing to Sprint 2", + "", +]; + +const BLOCK = LINES.join("\n"); + +export const AsciiAnimation = memo(function AsciiAnimation() { + return ( +
+ {/* Fade masks */} +
+
+ + {/* Scrolling track — doubled for seamless loop */} +
+ {BLOCK} + {"\n"} + {BLOCK} +
+
+ ); +}); diff --git a/src/renderer/components/CompanyOnboarding/OnboardingHero.tsx b/src/renderer/components/CompanyOnboarding/OnboardingHero.tsx index 3864af2d..5d41478b 100644 --- a/src/renderer/components/CompanyOnboarding/OnboardingHero.tsx +++ b/src/renderer/components/CompanyOnboarding/OnboardingHero.tsx @@ -8,6 +8,7 @@ import { import type { ProfileSnapshot } from "@shared/types"; import type { AppLocale } from "@shared/locale"; import { ConnectorReadiness } from "./ConnectorReadiness"; +import { AsciiAnimation } from "./AsciiAnimation"; type Step = "language" | "company" | "mission" | "launch"; @@ -57,6 +58,9 @@ export function OnboardingHero({ }} /> + {/* ASCII agent activity backdrop */} + + onNavigate("goals")} className="focus-ring w-full rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] px-4 py-3.5 text-left transition hover:border-[color:var(--line-strong)] hover:shadow-sm" > -
-
- +
+
+ {goal.title}
- {pct}% + {pct}%
onSelect(goal.id)} className={`cursor-pointer transition-colors duration-100 ${isSelected ? "bg-[color:var(--accent-soft)]" : "hover:bg-[color:var(--panel-soft)]"}`} > -
-
+
+
{isSelected && ( - + )}
{goal.title}
diff --git a/src/renderer/main.tsx b/src/renderer/main.tsx index d6faae96..aaf9dc0b 100644 --- a/src/renderer/main.tsx +++ b/src/renderer/main.tsx @@ -1,4 +1,6 @@ +import "@fontsource-variable/inter"; import "@fontsource-variable/jetbrains-mono"; +import "@fontsource/instrument-serif"; import "./styles.css"; import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; diff --git a/src/renderer/styles.css b/src/renderer/styles.css index b9f0744e..ac6ab6a6 100644 --- a/src/renderer/styles.css +++ b/src/renderer/styles.css @@ -1,30 +1,32 @@ @import "tailwindcss"; @theme { - --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", + --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", Helvetica, Arial, sans-serif; + --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono Variable", "Microsoft YaHei", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } +/* ─── Light theme — aligned with website ─── */ :root { color-scheme: light; - --bg: #f7f8fa; - --bg-subtle: #ffffff; - --panel: #ffffff; - --panel-soft: #f0f2f5; - --panel-strong: #f7f8fa; - --line: rgba(50, 65, 85, 0.08); - --line-strong: rgba(50, 65, 85, 0.15); - --text: #1a1d24; - --muted: #6b7280; - --muted-strong: #4b5563; - --accent: #4a5d7a; - --accent-text: #3d5070; - --accent-soft: #edf1f7; - --accent-hover: #3d4f6d; - --text-on-accent: #ffffff; + --bg: #FBFAF5; + --bg-subtle: #FFFFFF; + --panel: #FFFFFF; + --panel-soft: #F3F2ED; + --panel-strong: #FBFAF5; + --line: rgba(25, 25, 25, 0.08); + --line-strong: rgba(25, 25, 25, 0.15); + --text: #191919; + --muted: #7a7a72; + --muted-strong: #565650; + --accent: #213448; + --accent-text: #213448; + --accent-soft: rgba(33, 52, 72, 0.07); + --accent-hover: #192838; + --text-on-accent: #FBFAF5; --danger: #c53030; --danger-soft: #fef2f2; --warn: #b45309; @@ -37,23 +39,24 @@ color-scheme: light; } +/* ─── Dark theme — aligned with website ─── */ :root[data-theme="dark"] { color-scheme: dark; - --bg: #16181f; - --bg-subtle: #1a1c24; - --panel: #1e2028; - --panel-soft: #24262e; - --panel-strong: #1c1e26; - --line: rgba(148, 163, 190, 0.12); - --line-strong: rgba(148, 163, 190, 0.2); - --text: #edf0f7; - --muted: #8b95a5; - --muted-strong: #b0b8c8; - --accent: #7b9cc4; - --accent-text: #7b9cc4; - --accent-soft: rgba(123, 156, 196, 0.14); - --accent-hover: #93b0d4; - --text-on-accent: #ffffff; + --bg: #191919; + --bg-subtle: #1e1e1e; + --panel: #222222; + --panel-soft: #2a2a2a; + --panel-strong: #1c1c1c; + --line: rgba(251, 250, 245, 0.08); + --line-strong: rgba(251, 250, 245, 0.15); + --text: #FBFAF5; + --muted: #8a8a84; + --muted-strong: #b8b8b2; + --accent: #94B4C1; + --accent-text: #94B4C1; + --accent-soft: rgba(148, 180, 193, 0.12); + --accent-hover: #a8c4cf; + --text-on-accent: #191919; --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12); --warn: #f59e0b; @@ -65,21 +68,21 @@ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; - --bg: #16181f; - --bg-subtle: #1a1c24; - --panel: #1e2028; - --panel-soft: #24262e; - --panel-strong: #1c1e26; - --line: rgba(148, 163, 190, 0.12); - --line-strong: rgba(148, 163, 190, 0.2); - --text: #edf0f7; - --muted: #8b95a5; - --muted-strong: #b0b8c8; - --accent: #7b9cc4; - --accent-text: #7b9cc4; - --accent-soft: rgba(123, 156, 196, 0.14); - --accent-hover: #93b0d4; - --text-on-accent: #ffffff; + --bg: #191919; + --bg-subtle: #1e1e1e; + --panel: #222222; + --panel-soft: #2a2a2a; + --panel-strong: #1c1c1c; + --line: rgba(251, 250, 245, 0.08); + --line-strong: rgba(251, 250, 245, 0.15); + --text: #FBFAF5; + --muted: #8a8a84; + --muted-strong: #b8b8b2; + --accent: #94B4C1; + --accent-text: #94B4C1; + --accent-soft: rgba(148, 180, 193, 0.12); + --accent-hover: #a8c4cf; + --text-on-accent: #191919; --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12); --warn: #f59e0b; @@ -133,11 +136,11 @@ select { ::-webkit-scrollbar-thumb { border-radius: 999px; - background: rgba(60, 75, 100, 0.2); + background: rgba(25, 25, 25, 0.15); } ::-webkit-scrollbar-thumb:hover { - background: rgba(60, 75, 100, 0.32); + background: rgba(25, 25, 25, 0.25); } .mono { @@ -147,7 +150,7 @@ select { .surface { background: var(--panel); border: 1px solid var(--line); - box-shadow: 0 1px 3px rgba(26, 29, 36, 0.06), 0 0 0 0.5px rgba(26, 29, 36, 0.03); + box-shadow: 0 1px 3px rgba(25, 25, 25, 0.06), 0 0 0 0.5px rgba(25, 25, 25, 0.03); } .focus-ring { @@ -160,9 +163,19 @@ select { .focus-ring:focus-visible { box-shadow: - 0 0 0 1px rgba(74, 93, 122, 0.5), - 0 0 0 4px rgba(74, 93, 122, 0.12); - border-color: rgba(74, 93, 122, 0.35); + 0 0 0 1px rgba(33, 52, 72, 0.5), + 0 0 0 4px rgba(33, 52, 72, 0.12); + border-color: rgba(33, 52, 72, 0.35); +} + +/* ─── ASCII animation ─── */ +@keyframes ascii-scroll-up { + 0% { transform: translateY(0); } + 100% { transform: translateY(-50%); } +} + +.ascii-scroll-track { + animation: ascii-scroll-up 80s linear infinite; } @media (prefers-reduced-motion: reduce) {