Something went wrong. Try again.
small gleam coding and persistent agent daemon with a detachable cli and a canvas ui albedo.sh
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204/* * Surfaces and text shades come from three seeds and a contrast, per mode, which the * settings pane edits (prefs.svelte.ts sets them on <html>): --seed-bg is the * ground, --seed-fg the ink, --seed-accent the accent, --contrast 0 to 1. * Surfaces and secondary text are mixed from them, so any three colours make * a whole theme. Semantic colours and the speaker colour can be overridden. * The fallbacks here are the defaults, madoromi's spring * (https://madoromi.moonwit.ch/), for the first paint. */:root { color-scheme: light; --seed-bg: #f6eff8; --seed-fg: #584a5c; --seed-accent: #6928bd; --contrast: 0.45; /* how far each step goes: half as far at no contrast, half again at full */ --k: calc(0.5 + var(--contrast));
--bg: var(--seed-bg); --rail: color-mix(in oklab, var(--seed-bg), var(--seed-fg) calc(3% * var(--k))); --surface: color-mix(in oklab, var(--seed-bg), #fff 78%); --title-bar: color-mix(in oklab, var(--surface), var(--seed-fg) calc(2% * var(--k))); --well: color-mix(in oklab, var(--surface), var(--seed-fg) calc(8% * var(--k))); --field: color-mix(in oklab, var(--surface), var(--seed-fg) calc(11% * var(--k))); --bubble: color-mix(in oklab, var(--field), var(--seed-accent) 7%); --text: var(--seed-fg); --muted: color-mix(in oklab, var(--seed-fg), var(--surface) calc(28% - 20% * var(--contrast))); --faint: color-mix(in oklab, var(--seed-fg), var(--surface) calc(45% - 20% * var(--contrast))); --hover: color-mix(in oklab, var(--seed-fg) calc(5% * var(--k)), transparent); --selected: color-mix(in oklab, var(--seed-fg) calc(8% * var(--k)), transparent); --accent: var(--seed-accent); --focus-ring: color-mix(in oklab, var(--seed-accent) 45%, transparent); /* Who is speaking, as in the terminal: albedo in the accent, you opposite it. */ --agent: var(--seed-accent); --brand-from: var(--seed-accent); --brand-to: oklch(from var(--seed-accent) l c calc(h + 40)); --you: oklch(from var(--seed-accent) 0.5 0.09 calc(h - 130)); /* madoromi's young leaves (wakaba) and crimson (beni) */ --added: #5e8933; --danger: #ce2700; --scrim: color-mix(in oklab, var(--seed-bg) 60%, transparent); --dots: color-mix(in oklab, var(--seed-fg) calc(36% * var(--k)), transparent); /* The sidebar's stripes: the step the phone's stripes take from its ground, taken from the rail's. */ --rail-stripe: color-mix(in oklab, var(--rail), var(--shade) calc(3.2% * var(--k))); /* A sidebar row for a session open on the board. */ --open-tint: color-mix(in oklab, var(--rail), var(--accent) 12%); --minimap-window: var(--field); --minimap-mask: color-mix(in oklab, var(--seed-bg) 65%, transparent); --shade: color-mix(in oklab, var(--seed-fg) 70%, #000); --shadow: 0 1px 2px color-mix(in oklab, var(--shade) 7%, transparent), 0 10px 28px -8px color-mix(in oklab, var(--shade) 16%, transparent); --shadow-raised: 0 2px 4px color-mix(in oklab, var(--shade) 8%, transparent), 0 22px 48px -12px color-mix(in oklab, var(--shade) 26%, transparent); --shadow-lg: 0 4px 12px color-mix(in oklab, var(--shade) 9%, transparent), 0 32px 72px -16px color-mix(in oklab, var(--shade) 34%, transparent); /* Text size, as ratios of the 13px base: every font size reads through one. The canvas follows the chrome unless the settings give it its own size. */ --ui-scale: 1; --canvas-scale: var(--ui-scale); --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Faces read softest in a rounded Japanese face where there is one. */ --face: 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', system-ui, sans-serif;}
/* In the dark, windows lift toward the ink and chrome sinks below the ground. */:root[data-theme='dark'] { color-scheme: dark; --seed-bg: #241c26; --seed-fg: #e1d1e7; --seed-accent: #ddb3ff; --contrast: 0.5; --rail: color-mix(in oklab, var(--seed-bg), #000 calc(20% * var(--k))); --surface: color-mix(in oklab, var(--seed-bg), var(--seed-fg) calc(5% * var(--k))); --title-bar: color-mix(in oklab, var(--surface), var(--seed-fg) calc(2.5% * var(--k))); --well: color-mix(in oklab, var(--surface), #000 calc(16% * var(--k))); --field: color-mix(in oklab, var(--surface), var(--seed-fg) calc(7% * var(--k))); --bubble: color-mix(in oklab, var(--field), var(--seed-accent) 9%); --muted: color-mix(in oklab, var(--seed-fg), var(--surface) calc(42% - 20% * var(--contrast))); --faint: color-mix(in oklab, var(--seed-fg), var(--surface) calc(60% - 20% * var(--contrast))); --you: oklch(from var(--seed-accent) 0.82 0.08 calc(h - 130)); --added: #c1dd4a; --danger: #ff8b79; --dots: color-mix(in oklab, var(--seed-fg) calc(26% * var(--k)), transparent); --shade: #000; --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -8px rgb(0 0 0 / 0.6); --shadow-raised: 0 2px 4px rgb(0 0 0 / 0.45), 0 24px 56px -12px rgb(0 0 0 / 0.75); --shadow-lg: 0 4px 12px rgb(0 0 0 / 0.5), 0 32px 80px -16px rgb(0 0 0 / 0.8); --rail-stripe: color-mix(in oklab, var(--rail), var(--shade) calc(19% * var(--k))); --open-tint: color-mix(in oklab, var(--rail), var(--accent) 18%);}
* { box-sizing: border-box;}
html,body,#app { height: 100%; margin: 0;}
/* A sideways two-finger swipe pans the canvas; without this the browser reads the same gesture as back/forward. */html,body { overscroll-behavior: none;}
body { overflow: hidden; color: var(--text); font-family: var(--sans); font-size: calc(13px * var(--ui-scale)); line-height: 1.45; background: var(--bg); -webkit-font-smoothing: antialiased;}
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; color: var(--muted); font-family: var(--sans); font-size: calc(11px * var(--ui-scale)); background: var(--hover); border-radius: 5px;}
button:focus-visible,input:focus-visible,[role='tab']:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px;}
/* A kaomoji: albedo's face for a turn, still or animated. */.kaomoji { font-family: var(--face); letter-spacing: -0.03em; white-space: pre;}
/* The wordmark, swept from mauve to pink as in the terminal's header. */.brand-ink { color: var(--brand-from); background: linear-gradient(90deg, var(--brand-from), var(--brand-to)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
/* Svelte Flow takes the app's colours. */.svelte-flow { --xy-background-color: var(--bg);}
.svelte-flow__node:focus-visible { outline: none;}
.svelte-flow__node.dragging .window { box-shadow: var(--shadow-lg);}
/* A window and the views it opened are tied by a faint line. */.svelte-flow .tether-end { width: 1px; height: 1px; min-width: 0; min-height: 0; background: transparent; border: 0; pointer-events: none;}
.svelte-flow .tether path { stroke: color-mix(in oklab, var(--accent) 40%, transparent); stroke-width: 1.5; stroke-dasharray: 4 6;}
/* Window edges and corners resize but draw nothing until hovered. */.svelte-flow .window-edge { border-color: transparent; border-width: 4px;}
.svelte-flow .window-corner { width: 14px; height: 14px; background: transparent; border: 0;}
/* Above the view controls in the same corner. */.svelte-flow__minimap { margin: 14px 14px 60px; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow);}