diff --git a/RIVE_CONTRACT.md b/RIVE_CONTRACT.md index 2a46ab5..435d6c9 100644 --- a/RIVE_CONTRACT.md +++ b/RIVE_CONTRACT.md @@ -2,7 +2,7 @@ The animator builds `crows.riv` against this file, and the web code drives it from the events in `EVENTS.md`. Both sides build against this file, so change it first and then the code. Each animation exists only because an `EVENTS.md` event fires it. -Style: Duolingo-like. Chunky, expressive crows with big squash-and-stretch reactions and readable silhouettes at 96 pixels. The approve and reject buttons stay in HTML for v1 (see "Why buttons stay in HTML"). +Style: Duolingo-like behavior, pen-and-ink look: cream paper, ink linework, stipple shading (see `ui/src/style.css`). Smokey's crow art (`art/crow.svg`) is the character; keep its silhouette. Chunky, expressive crows with big squash-and-stretch reactions and readable silhouettes at 96 pixels. The approve and reject buttons stay in HTML for v1 (see "Why buttons stay in HTML"). ## Rive approach: data binding, not inputs diff --git a/ui/index.html b/ui/index.html index 11b5013..4e64727 100644 --- a/ui/index.html +++ b/ui/index.html @@ -6,7 +6,7 @@ So Many Crows - +
@@ -16,19 +16,19 @@
- +
- - +
+
    - + diff --git a/ui/ink-1.png b/ui/ink-1.png new file mode 100644 index 0000000..1aabd57 Binary files /dev/null and b/ui/ink-1.png differ diff --git a/ui/src/crow.ts b/ui/src/crow.ts index 690b368..2f11e29 100644 --- a/ui/src/crow.ts +++ b/ui/src/crow.ts @@ -23,6 +23,9 @@ const ART = ` `; +// Trust badge: a pen-and-ink star. Outline at "regular", inked in at "trusted". +const STAR = ``; + const REACTION_MS: Record = { cheer: 800, sulk: 800, levelUp: 2000, levelDown: 1000, prank: 2500 }; export function svgCrow(name: string, role: Role): CrowView { @@ -38,8 +41,11 @@ export function svgCrow(name: string, role: Role): CrowView { body.className = "crow-body"; body.append(svg); - const badge = document.createElement("span"); - badge.className = "badge"; + const badge = document.createElementNS(NS, "svg"); + badge.setAttribute("class", "badge"); + badge.setAttribute("viewBox", "0 0 24 24"); + badge.setAttribute("aria-hidden", "true"); + badge.innerHTML = STAR; const cap = document.createElement("figcaption"); cap.textContent = name; el.append(body, badge, cap); diff --git a/ui/src/main.ts b/ui/src/main.ts index b09d080..8a2aa18 100644 --- a/ui/src/main.ts +++ b/ui/src/main.ts @@ -57,7 +57,7 @@ function el(tag: K, cls?: string, text?: } function addCard(itemId: string, text: string) { - const li = el("li", "card"); + const li = el("li", "card inked"); li.dataset.state = "waiting"; const head = el("div", "card-head"); head.append(el("span", "dot"), el("p", "text", text)); @@ -75,8 +75,8 @@ function ask(itemId: string, target: "triage" | "output") { card.el.dataset.state = "asking"; card.actions.replaceChildren(); const q = el("p", "question", target === "triage" ? "Approve the Sentry's plan?" : "Accept this answer?"); - const yes = el("button", "btn btn-go", target === "triage" ? "Fly it" : "Looks good"); - const no = el("button", "btn btn-no", target === "triage" ? "Not like that" : "Not right"); + const yes = el("button", "btn btn-go inked", target === "triage" ? "Fly it" : "Looks good"); + const no = el("button", "btn btn-no inked", target === "triage" ? "Not like that" : "Not right"); const err = el("p", "err"); for (const [b, approve] of [[yes, true], [no, false]] as const) { b.type = "button"; diff --git a/ui/src/style.css b/ui/src/style.css index 1788bf7..6afd1b6 100644 --- a/ui/src/style.css +++ b/ui/src/style.css @@ -1,100 +1,113 @@ +/* Art direction: pen and ink on cream. + Thin, slightly wobbly ink lines; shading is stipple (dots), dense near + the edge and fading out. Color stays out of the way: the crows bring it. */ :root { - --bg: #f6fbf7; - --surface: #ffffff; - --ink: #1d2721; - --muted: #5d6b63; - --line: #dfe9e2; - --mint: #b7e4c7; - --go: #2f9e5b; - --go-edge: #1f7642; - --no: #ffffff; - --no-ink: #c2363b; - --no-edge: #e3c6c7; - --sentry: #ffe08a; - --elder: #d6dde6; - --bronze: #c98a4b; - --gold: #f2b705; - --shadow: 0 2px 0 var(--line); -} -@media (prefers-color-scheme: dark) { - :root { - --bg: #121714; - --surface: #1b221e; - --ink: #eef4f0; - --muted: #9fb0a6; - --line: #2c3731; - --no: #1b221e; - --no-edge: #4a2c2e; - --no-ink: #ff8a8e; - } - .crow .bird { fill: #0b0d0c; } + color-scheme: light; + --paper: #f4eedf; + --card: #f9f5ea; + --ink: #1c1915; + --muted: #5f574b; + --red: #9b2f22; + --pen: 1.75px solid var(--ink); + /* Hand-drawn box: unequal corner radii make the line read as inked by hand. */ + --wobble: 255px 14px 225px 14px / 14px 225px 14px 255px; + /* Stipple: a seamless tile of randomly placed dots (generated, fixed seed), so it reads hand-dotted, not halftone. */ + --stipple: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'64\' height=\'64\' fill=\'%231c1915\'%3E%3Ccircle cx=\'20.7\' cy=\'9.7\' r=\'0.7\'/%3E%3Ccircle cx=\'4.6\' cy=\'34.3\' r=\'1.0\'/%3E%3Ccircle cx=\'37.3\' cy=\'58.2\' r=\'0.85\'/%3E%3Ccircle cx=\'2.4\' cy=\'27.8\' r=\'0.7\'/%3E%3Ccircle cx=\'15.4\' cy=\'35.3\' r=\'0.7\'/%3E%3Ccircle cx=\'52.9\' cy=\'7.9\' r=\'0.85\'/%3E%3Ccircle cx=\'40.4\' cy=\'37.3\' r=\'0.7\'/%3E%3Ccircle cx=\'36.9\' cy=\'25.4\' r=\'0.85\'/%3E%3Ccircle cx=\'3.0\' cy=\'54.9\' r=\'1.0\'/%3E%3Ccircle cx=\'26.8\' cy=\'34.6\' r=\'1.0\'/%3E%3Ccircle cx=\'35.9\' cy=\'43.6\' r=\'0.7\'/%3E%3Ccircle cx=\'37.2\' cy=\'40.9\' r=\'1.0\'/%3E%3Ccircle cx=\'6.2\' cy=\'45.6\' r=\'0.7\'/%3E%3Ccircle cx=\'39.6\' cy=\'31.8\' r=\'1.15\'/%3E%3Ccircle cx=\'49.7\' cy=\'29.8\' r=\'1.15\'/%3E%3Ccircle cx=\'23.1\' cy=\'15.9\' r=\'0.85\'/%3E%3Ccircle cx=\'44.7\' cy=\'15.6\' r=\'1.0\'/%3E%3Ccircle cx=\'33.6\' cy=\'56.0\' r=\'1.15\'/%3E%3Ccircle cx=\'18.4\' cy=\'-1.3\' r=\'0.7\'/%3E%3Ccircle cx=\'18.4\' cy=\'62.7\' r=\'0.7\'/%3E%3Ccircle cx=\'32.8\' cy=\'10.6\' r=\'1.0\'/%3E%3Ccircle cx=\'9.7\' cy=\'31.3\' r=\'0.7\'/%3E%3Ccircle cx=\'61.6\' cy=\'5.0\' r=\'1.0\'/%3E%3Ccircle cx=\'21.8\' cy=\'22.4\' r=\'1.15\'/%3E%3Ccircle cx=\'37.1\' cy=\'29.2\' r=\'0.7\'/%3E%3Ccircle cx=\'60.5\' cy=\'30.3\' r=\'0.7\'/%3E%3Ccircle cx=\'3.9\' cy=\'44.9\' r=\'1.15\'/%3E%3Ccircle cx=\'18.2\' cy=\'24.7\' r=\'1.0\'/%3E%3Ccircle cx=\'1.4\' cy=\'29.5\' r=\'0.85\'/%3E%3Ccircle cx=\'65.4\' cy=\'29.5\' r=\'0.85\'/%3E%3Ccircle cx=\'39.1\' cy=\'31.6\' r=\'0.85\'/%3E%3Ccircle cx=\'49.2\' cy=\'8.3\' r=\'0.85\'/%3E%3Ccircle cx=\'25.5\' cy=\'58.7\' r=\'1.15\'/%3E%3Ccircle cx=\'5.2\' cy=\'28.7\' r=\'1.0\'/%3E%3Ccircle cx=\'56.5\' cy=\'52.4\' r=\'1.0\'/%3E%3Ccircle cx=\'45.2\' cy=\'-0.9\' r=\'1.15\'/%3E%3Ccircle cx=\'45.2\' cy=\'63.1\' r=\'1.15\'/%3E%3Ccircle cx=\'61.3\' cy=\'9.7\' r=\'0.85\'/%3E%3Ccircle cx=\'9.7\' cy=\'42.1\' r=\'0.7\'/%3E%3Ccircle cx=\'31.0\' cy=\'37.7\' r=\'1.0\'/%3E%3Ccircle cx=\'18.0\' cy=\'9.3\' r=\'1.0\'/%3E%3Ccircle cx=\'39.0\' cy=\'20.4\' r=\'0.85\'/%3E%3Ccircle cx=\'44.2\' cy=\'33.0\' r=\'0.7\'/%3E%3Ccircle cx=\'29.2\' cy=\'55.7\' r=\'1.15\'/%3E%3Ccircle cx=\'25.5\' cy=\'25.2\' r=\'1.15\'/%3E%3Ccircle cx=\'40.6\' cy=\'4.0\' r=\'0.7\'/%3E%3Ccircle cx=\'-1.0\' cy=\'28.2\' r=\'0.7\'/%3E%3Ccircle cx=\'63.0\' cy=\'28.2\' r=\'0.7\'/%3E%3Ccircle cx=\'21.8\' cy=\'3.4\' r=\'0.7\'/%3E%3Ccircle cx=\'36.3\' cy=\'34.3\' r=\'1.0\'/%3E%3Ccircle cx=\'39.3\' cy=\'4.5\' r=\'0.85\'/%3E%3Ccircle cx=\'39.3\' cy=\'9.5\' r=\'1.0\'/%3E%3Ccircle cx=\'61.1\' cy=\'38.5\' r=\'1.15\'/%3E%3Ccircle cx=\'7.9\' cy=\'54.3\' r=\'1.15\'/%3E%3Ccircle cx=\'30.7\' cy=\'20.0\' r=\'0.85\'/%3E%3Ccircle cx=\'6.5\' cy=\'21.9\' r=\'1.0\'/%3E%3Ccircle cx=\'30.6\' cy=\'44.3\' r=\'0.7\'/%3E%3Ccircle cx=\'13.1\' cy=\'60.9\' r=\'1.0\'/%3E%3Ccircle cx=\'9.4\' cy=\'34.8\' r=\'0.7\'/%3E%3Ccircle cx=\'48.5\' cy=\'19.1\' r=\'0.7\'/%3E%3Ccircle cx=\'44.6\' cy=\'16.7\' r=\'1.0\'/%3E%3Ccircle cx=\'58.1\' cy=\'22.8\' r=\'0.85\'/%3E%3Ccircle cx=\'34.1\' cy=\'49.9\' r=\'1.0\'/%3E%3Ccircle cx=\'40.7\' cy=\'39.2\' r=\'0.85\'/%3E%3Ccircle cx=\'51.6\' cy=\'52.4\' r=\'0.85\'/%3E%3Ccircle cx=\'12.8\' cy=\'31.5\' r=\'0.7\'/%3E%3Ccircle cx=\'-0.7\' cy=\'50.6\' r=\'1.15\'/%3E%3Ccircle cx=\'63.3\' cy=\'50.6\' r=\'1.15\'/%3E%3Ccircle cx=\'16.6\' cy=\'44.3\' r=\'1.0\'/%3E%3Ccircle cx=\'28.6\' cy=\'60.0\' r=\'1.0\'/%3E%3Ccircle cx=\'61.1\' cy=\'23.3\' r=\'0.85\'/%3E%3Ccircle cx=\'6.5\' cy=\'30.1\' r=\'1.0\'/%3E%3Ccircle cx=\'13.1\' cy=\'39.9\' r=\'0.7\'/%3E%3Ccircle cx=\'30.7\' cy=\'41.8\' r=\'0.7\'/%3E%3Ccircle cx=\'53.4\' cy=\'7.7\' r=\'1.15\'/%3E%3Ccircle cx=\'50.1\' cy=\'48.0\' r=\'1.15\'/%3E%3Ccircle cx=\'56.9\' cy=\'27.8\' r=\'1.0\'/%3E%3Ccircle cx=\'5.6\' cy=\'60.6\' r=\'1.15\'/%3E%3Ccircle cx=\'29.6\' cy=\'47.6\' r=\'0.7\'/%3E%3Ccircle cx=\'46.4\' cy=\'10.9\' r=\'0.85\'/%3E%3Ccircle cx=\'1.8\' cy=\'37.8\' r=\'1.15\'/%3E%3Ccircle cx=\'65.8\' cy=\'37.8\' r=\'1.15\'/%3E%3Ccircle cx=\'51.6\' cy=\'9.4\' r=\'1.15\'/%3E%3Ccircle cx=\'42.1\' cy=\'22.4\' r=\'0.85\'/%3E%3Ccircle cx=\'1.4\' cy=\'51.2\' r=\'0.7\'/%3E%3Ccircle cx=\'65.4\' cy=\'51.2\' r=\'0.7\'/%3E%3Ccircle cx=\'33.7\' cy=\'59.8\' r=\'1.15\'/%3E%3Ccircle cx=\'-0.9\' cy=\'12.5\' r=\'0.85\'/%3E%3Ccircle cx=\'63.1\' cy=\'12.5\' r=\'0.85\'/%3E%3Ccircle cx=\'1.8\' cy=\'13.6\' r=\'0.85\'/%3E%3Ccircle cx=\'65.8\' cy=\'13.6\' r=\'0.85\'/%3E%3Ccircle cx=\'48.9\' cy=\'20.9\' r=\'1.15\'/%3E%3Ccircle cx=\'53.4\' cy=\'3.9\' r=\'1.0\'/%3E%3Ccircle cx=\'57.5\' cy=\'42.4\' r=\'1.15\'/%3E%3Ccircle cx=\'52.9\' cy=\'56.2\' r=\'0.85\'/%3E%3Ccircle cx=\'34.0\' cy=\'33.5\' r=\'0.7\'/%3E%3Ccircle cx=\'55.9\' cy=\'49.7\' r=\'0.7\'/%3E%3Ccircle cx=\'49.7\' cy=\'9.6\' r=\'0.85\'/%3E%3Ccircle cx=\'30.3\' cy=\'46.4\' r=\'0.7\'/%3E%3Ccircle cx=\'20.9\' cy=\'33.2\' r=\'1.15\'/%3E%3Ccircle cx=\'50.2\' cy=\'6.8\' r=\'0.7\'/%3E%3Ccircle cx=\'15.9\' cy=\'17.7\' r=\'0.7\'/%3E%3Ccircle cx=\'32.5\' cy=\'36.0\' r=\'0.7\'/%3E%3Ccircle cx=\'28.4\' cy=\'39.2\' r=\'0.85\'/%3E%3Ccircle cx=\'44.3\' cy=\'29.0\' r=\'1.15\'/%3E%3Ccircle cx=\'32.5\' cy=\'15.8\' r=\'1.0\'/%3E%3Ccircle cx=\'59.1\' cy=\'57.1\' r=\'0.85\'/%3E%3Ccircle cx=\'53.8\' cy=\'8.8\' r=\'0.7\'/%3E%3Ccircle cx=\'25.1\' cy=\'20.2\' r=\'0.85\'/%3E%3Ccircle cx=\'27.4\' cy=\'13.6\' r=\'1.0\'/%3E%3Ccircle cx=\'50.2\' cy=\'57.4\' r=\'0.85\'/%3E%3Ccircle cx=\'60.1\' cy=\'41.2\' r=\'1.0\'/%3E%3Ccircle cx=\'9.2\' cy=\'56.5\' r=\'1.15\'/%3E%3Ccircle cx=\'14.1\' cy=\'61.0\' r=\'1.15\'/%3E%3Ccircle cx=\'56.6\' cy=\'10.4\' r=\'0.85\'/%3E%3Ccircle cx=\'10.3\' cy=\'27.6\' r=\'1.15\'/%3E%3Ccircle cx=\'21.7\' cy=\'12.5\' r=\'1.0\'/%3E%3Ccircle cx=\'5.9\' cy=\'23.4\' r=\'1.0\'/%3E%3Ccircle cx=\'35.5\' cy=\'28.2\' r=\'0.7\'/%3E%3Ccircle cx=\'24.6\' cy=\'33.1\' r=\'1.0\'/%3E%3Ccircle cx=\'32.8\' cy=\'4.1\' r=\'0.85\'/%3E%3Ccircle cx=\'-1.8\' cy=\'6.7\' r=\'1.0\'/%3E%3Ccircle cx=\'62.2\' cy=\'6.7\' r=\'1.0\'/%3E%3Ccircle cx=\'17.4\' cy=\'58.0\' r=\'0.85\'/%3E%3Ccircle cx=\'17.3\' cy=\'8.3\' r=\'1.15\'/%3E%3Ccircle cx=\'54.4\' cy=\'43.3\' r=\'1.0\'/%3E%3Ccircle cx=\'26.0\' cy=\'34.3\' r=\'1.15\'/%3E%3Ccircle cx=\'44.8\' cy=\'5.7\' r=\'0.7\'/%3E%3Ccircle cx=\'51.2\' cy=\'11.7\' r=\'0.7\'/%3E%3Ccircle cx=\'17.2\' cy=\'1.1\' r=\'0.7\'/%3E%3Ccircle cx=\'17.2\' cy=\'65.1\' r=\'0.7\'/%3E%3Ccircle cx=\'51.3\' cy=\'5.4\' r=\'0.85\'/%3E%3Ccircle cx=\'4.3\' cy=\'55.2\' r=\'1.15\'/%3E%3Ccircle cx=\'0.7\' cy=\'-0.4\' r=\'1.15\'/%3E%3Ccircle cx=\'0.7\' cy=\'63.6\' r=\'1.15\'/%3E%3Ccircle cx=\'64.7\' cy=\'-0.4\' r=\'1.15\'/%3E%3Ccircle cx=\'64.7\' cy=\'63.6\' r=\'1.15\'/%3E%3Ccircle cx=\'59.3\' cy=\'17.1\' r=\'0.85\'/%3E%3Ccircle cx=\'2.8\' cy=\'45.4\' r=\'0.7\'/%3E%3Ccircle cx=\'-2.0\' cy=\'16.8\' r=\'0.85\'/%3E%3Ccircle cx=\'62.0\' cy=\'16.8\' r=\'0.85\'/%3E%3Ccircle cx=\'12.9\' cy=\'20.0\' r=\'1.0\'/%3E%3Ccircle cx=\'34.0\' cy=\'13.2\' r=\'1.15\'/%3E%3Ccircle cx=\'32.0\' cy=\'11.4\' r=\'1.0\'/%3E%3Ccircle cx=\'51.4\' cy=\'-0.4\' r=\'0.7\'/%3E%3Ccircle cx=\'51.4\' cy=\'63.6\' r=\'0.7\'/%3E%3Ccircle cx=\'1.0\' cy=\'46.9\' r=\'0.85\'/%3E%3Ccircle cx=\'65.0\' cy=\'46.9\' r=\'0.85\'/%3E%3Ccircle cx=\'32.9\' cy=\'15.7\' r=\'1.15\'/%3E%3Ccircle cx=\'6.8\' cy=\'52.4\' r=\'1.15\'/%3E%3Ccircle cx=\'42.0\' cy=\'34.9\' r=\'1.15\'/%3E%3Ccircle cx=\'-1.9\' cy=\'19.7\' r=\'0.85\'/%3E%3Ccircle cx=\'62.1\' cy=\'19.7\' r=\'0.85\'/%3E%3Ccircle cx=\'-1.1\' cy=\'21.9\' r=\'0.85\'/%3E%3Ccircle cx=\'62.9\' cy=\'21.9\' r=\'0.85\'/%3E%3Ccircle cx=\'25.9\' cy=\'22.2\' r=\'0.7\'/%3E%3Ccircle cx=\'53.6\' cy=\'0.9\' r=\'1.0\'/%3E%3Ccircle cx=\'53.6\' cy=\'64.9\' r=\'1.0\'/%3E%3Ccircle cx=\'27.6\' cy=\'3.5\' r=\'1.15\'/%3E%3Ccircle cx=\'55.7\' cy=\'42.9\' r=\'1.0\'/%3E%3Ccircle cx=\'38.3\' cy=\'44.3\' r=\'0.7\'/%3E%3Ccircle cx=\'29.4\' cy=\'10.1\' r=\'1.15\'/%3E%3Ccircle cx=\'0.2\' cy=\'23.3\' r=\'1.0\'/%3E%3Ccircle cx=\'64.2\' cy=\'23.3\' r=\'1.0\'/%3E%3Ccircle cx=\'-1.8\' cy=\'35.0\' r=\'0.85\'/%3E%3Ccircle cx=\'62.2\' cy=\'35.0\' r=\'0.85\'/%3E%3Ccircle cx=\'2.2\' cy=\'56.5\' r=\'0.85\'/%3E%3Ccircle cx=\'22.8\' cy=\'0.1\' r=\'1.15\'/%3E%3Ccircle cx=\'22.8\' cy=\'64.1\' r=\'1.15\'/%3E%3Ccircle cx=\'5.4\' cy=\'17.9\' r=\'0.85\'/%3E%3Ccircle cx=\'15.9\' cy=\'49.7\' r=\'0.7\'/%3E%3Ccircle cx=\'16.9\' cy=\'5.7\' r=\'1.15\'/%3E%3Ccircle cx=\'37.6\' cy=\'25.2\' r=\'1.0\'/%3E%3Ccircle cx=\'19.5\' cy=\'14.9\' r=\'0.85\'/%3E%3Ccircle cx=\'42.1\' cy=\'45.8\' r=\'1.15\'/%3E%3Ccircle cx=\'48.9\' cy=\'46.1\' r=\'1.15\'/%3E%3Ccircle cx=\'9.6\' cy=\'46.3\' r=\'0.85\'/%3E%3Ccircle cx=\'2.8\' cy=\'53.5\' r=\'1.15\'/%3E%3Ccircle cx=\'47.0\' cy=\'52.0\' r=\'0.85\'/%3E%3Ccircle cx=\'58.2\' cy=\'48.2\' r=\'0.7\'/%3E%3Ccircle cx=\'52.9\' cy=\'37.4\' r=\'0.85\'/%3E%3Ccircle cx=\'5.4\' cy=\'2.7\' r=\'1.0\'/%3E%3Ccircle cx=\'61.4\' cy=\'24.1\' r=\'1.15\'/%3E%3Ccircle cx=\'35.7\' cy=\'40.2\' r=\'0.85\'/%3E%3Ccircle cx=\'31.3\' cy=\'0.2\' r=\'0.7\'/%3E%3Ccircle cx=\'31.3\' cy=\'64.2\' r=\'0.7\'/%3E%3Ccircle cx=\'47.9\' cy=\'32.2\' r=\'0.7\'/%3E%3Ccircle cx=\'42.2\' cy=\'4.2\' r=\'1.15\'/%3E%3Ccircle cx=\'16.1\' cy=\'4.8\' r=\'1.0\'/%3E%3Ccircle cx=\'15.0\' cy=\'48.4\' r=\'0.85\'/%3E%3Ccircle cx=\'47.3\' cy=\'-1.6\' r=\'1.15\'/%3E%3Ccircle cx=\'47.3\' cy=\'62.4\' r=\'1.15\'/%3E%3Ccircle cx=\'54.1\' cy=\'4.9\' r=\'1.0\'/%3E%3Ccircle cx=\'49.1\' cy=\'39.5\' r=\'0.85\'/%3E%3Ccircle cx=\'5.0\' cy=\'9.4\' r=\'1.0\'/%3E%3Ccircle cx=\'41.7\' cy=\'44.3\' r=\'0.85\'/%3E%3Ccircle cx=\'0.8\' cy=\'3.9\' r=\'1.0\'/%3E%3Ccircle cx=\'64.8\' cy=\'3.9\' r=\'1.0\'/%3E%3Ccircle cx=\'-1.8\' cy=\'6.4\' r=\'0.85\'/%3E%3Ccircle cx=\'62.2\' cy=\'6.4\' r=\'0.85\'/%3E%3Ccircle cx=\'43.2\' cy=\'18.6\' r=\'1.0\'/%3E%3Ccircle cx=\'29.7\' cy=\'29.8\' r=\'0.7\'/%3E%3Ccircle cx=\'-0.4\' cy=\'35.1\' r=\'1.0\'/%3E%3Ccircle cx=\'63.6\' cy=\'35.1\' r=\'1.0\'/%3E%3Ccircle cx=\'-1.4\' cy=\'59.9\' r=\'0.7\'/%3E%3Ccircle cx=\'62.6\' cy=\'59.9\' r=\'0.7\'/%3E%3Ccircle cx=\'18.5\' cy=\'4.9\' r=\'1.15\'/%3E%3Ccircle cx=\'-0.4\' cy=\'24.8\' r=\'0.85\'/%3E%3Ccircle cx=\'63.6\' cy=\'24.8\' r=\'0.85\'/%3E%3Ccircle cx=\'4.8\' cy=\'5.8\' r=\'1.0\'/%3E%3Ccircle cx=\'61.0\' cy=\'8.5\' r=\'1.0\'/%3E%3Ccircle cx=\'56.8\' cy=\'45.0\' r=\'0.85\'/%3E%3Ccircle cx=\'31.9\' cy=\'56.1\' r=\'1.15\'/%3E%3Ccircle cx=\'1.6\' cy=\'0.2\' r=\'1.15\'/%3E%3Ccircle cx=\'1.6\' cy=\'64.2\' r=\'1.15\'/%3E%3Ccircle cx=\'65.6\' cy=\'0.2\' r=\'1.15\'/%3E%3Ccircle cx=\'65.6\' cy=\'64.2\' r=\'1.15\'/%3E%3Ccircle cx=\'43.6\' cy=\'25.9\' r=\'0.85\'/%3E%3Ccircle cx=\'26.6\' cy=\'24.1\' r=\'0.7\'/%3E%3Ccircle cx=\'53.8\' cy=\'0.1\' r=\'1.0\'/%3E%3Ccircle cx=\'53.8\' cy=\'64.1\' r=\'1.0\'/%3E%3Ccircle cx=\'53.7\' cy=\'7.7\' r=\'0.85\'/%3E%3Ccircle cx=\'45.6\' cy=\'57.7\' r=\'1.0\'/%3E%3Ccircle cx=\'16.2\' cy=\'4.2\' r=\'1.15\'/%3E%3Ccircle cx=\'-0.1\' cy=\'37.7\' r=\'1.0\'/%3E%3Ccircle cx=\'63.9\' cy=\'37.7\' r=\'1.0\'/%3E%3Ccircle cx=\'59.2\' cy=\'48.4\' r=\'0.7\'/%3E%3Ccircle cx=\'18.0\' cy=\'3.3\' r=\'1.0\'/%3E%3Ccircle cx=\'40.6\' cy=\'9.5\' r=\'1.0\'/%3E%3Ccircle cx=\'27.9\' cy=\'20.2\' r=\'1.0\'/%3E%3Ccircle cx=\'50.2\' cy=\'27.4\' r=\'0.7\'/%3E%3Ccircle cx=\'52.0\' cy=\'40.4\' r=\'0.85\'/%3E%3Ccircle cx=\'46.1\' cy=\'3.2\' r=\'1.15\'/%3E%3Ccircle cx=\'28.9\' cy=\'48.2\' r=\'1.0\'/%3E%3Ccircle cx=\'31.1\' cy=\'58.4\' r=\'0.85\'/%3E%3Ccircle cx=\'10.9\' cy=\'26.6\' r=\'1.0\'/%3E%3Ccircle cx=\'19.1\' cy=\'47.3\' r=\'1.0\'/%3E%3Ccircle cx=\'26.0\' cy=\'15.3\' r=\'1.15\'/%3E%3Ccircle cx=\'35.7\' cy=\'25.2\' r=\'0.85\'/%3E%3Ccircle cx=\'41.2\' cy=\'4.8\' r=\'1.15\'/%3E%3Ccircle cx=\'35.2\' cy=\'29.0\' r=\'1.0\'/%3E%3Ccircle cx=\'-0.2\' cy=\'28.8\' r=\'0.85\'/%3E%3Ccircle cx=\'63.8\' cy=\'28.8\' r=\'0.85\'/%3E%3Ccircle cx=\'35.1\' cy=\'15.6\' r=\'0.85\'/%3E%3Ccircle cx=\'21.9\' cy=\'5.8\' r=\'0.85\'/%3E%3Ccircle cx=\'23.6\' cy=\'51.8\' r=\'0.85\'/%3E%3Ccircle cx=\'56.8\' cy=\'48.0\' r=\'1.15\'/%3E%3Ccircle cx=\'24.5\' cy=\'47.7\' r=\'0.85\'/%3E%3Ccircle cx=\'24.1\' cy=\'21.6\' r=\'0.7\'/%3E%3Ccircle cx=\'31.9\' cy=\'36.8\' r=\'1.0\'/%3E%3Ccircle cx=\'8.1\' cy=\'32.2\' r=\'0.85\'/%3E%3Ccircle cx=\'5.9\' cy=\'57.4\' r=\'1.15\'/%3E%3Ccircle cx=\'25.6\' cy=\'28.5\' r=\'1.0\'/%3E%3Ccircle cx=\'54.3\' cy=\'55.9\' r=\'0.7\'/%3E%3Ccircle cx=\'8.1\' cy=\'27.2\' r=\'1.15\'/%3E%3Ccircle cx=\'62.0\' cy=\'31.3\' r=\'0.7\'/%3E%3Ccircle cx=\'25.1\' cy=\'59.3\' r=\'1.15\'/%3E%3Ccircle cx=\'-1.8\' cy=\'15.9\' r=\'0.7\'/%3E%3Ccircle cx=\'62.2\' cy=\'15.9\' r=\'0.7\'/%3E%3Ccircle cx=\'14.3\' cy=\'9.7\' r=\'0.7\'/%3E%3Ccircle cx=\'60.3\' cy=\'46.2\' r=\'1.15\'/%3E%3Ccircle cx=\'5.4\' cy=\'49.7\' r=\'0.7\'/%3E%3Ccircle cx=\'50.1\' cy=\'14.9\' r=\'0.7\'/%3E%3Ccircle cx=\'41.3\' cy=\'19.4\' r=\'0.85\'/%3E%3Ccircle cx=\'40.1\' cy=\'33.8\' r=\'1.15\'/%3E%3Ccircle cx=\'44.7\' cy=\'7.2\' r=\'0.7\'/%3E%3Ccircle cx=\'19.2\' cy=\'60.4\' r=\'0.85\'/%3E%3Ccircle cx=\'24.8\' cy=\'14.3\' r=\'0.7\'/%3E%3Ccircle cx=\'0.7\' cy=\'19.3\' r=\'1.15\'/%3E%3Ccircle cx=\'64.7\' cy=\'19.3\' r=\'1.15\'/%3E%3Ccircle cx=\'17.8\' cy=\'20.2\' r=\'0.85\'/%3E%3Ccircle cx=\'30.4\' cy=\'15.0\' r=\'0.85\'/%3E%3Ccircle cx=\'1.9\' cy=\'26.4\' r=\'1.0\'/%3E%3Ccircle cx=\'65.9\' cy=\'26.4\' r=\'1.0\'/%3E%3Ccircle cx=\'3.5\' cy=\'12.4\' r=\'1.15\'/%3E%3Ccircle cx=\'5.2\' cy=\'14.6\' r=\'1.15\'/%3E%3Ccircle cx=\'59.2\' cy=\'14.5\' r=\'0.7\'/%3E%3Ccircle cx=\'44.5\' cy=\'46.0\' r=\'1.0\'/%3E%3Ccircle cx=\'43.7\' cy=\'12.7\' r=\'1.0\'/%3E%3Ccircle cx=\'47.3\' cy=\'32.3\' r=\'0.85\'/%3E%3Ccircle cx=\'31.7\' cy=\'12.8\' r=\'0.85\'/%3E%3Ccircle cx=\'14.8\' cy=\'14.2\' r=\'1.0\'/%3E%3Ccircle cx=\'7.0\' cy=\'39.9\' r=\'0.85\'/%3E%3Ccircle cx=\'57.4\' cy=\'31.0\' r=\'0.7\'/%3E%3Ccircle cx=\'60.7\' cy=\'9.4\' r=\'1.15\'/%3E%3Ccircle cx=\'3.5\' cy=\'1.5\' r=\'0.85\'/%3E%3Ccircle cx=\'3.5\' cy=\'65.5\' r=\'0.85\'/%3E%3Ccircle cx=\'26.6\' cy=\'45.4\' r=\'0.85\'/%3E%3Ccircle cx=\'25.2\' cy=\'57.5\' r=\'1.0\'/%3E%3Ccircle cx=\'46.9\' cy=\'-0.2\' r=\'0.85\'/%3E%3Ccircle cx=\'46.9\' cy=\'63.8\' r=\'0.85\'/%3E%3Ccircle cx=\'21.1\' cy=\'11.9\' r=\'1.15\'/%3E%3Ccircle cx=\'2.0\' cy=\'42.5\' r=\'1.15\'/%3E%3Ccircle cx=\'53.7\' cy=\'-1.0\' r=\'1.15\'/%3E%3Ccircle cx=\'53.7\' cy=\'63.0\' r=\'1.15\'/%3E%3Ccircle cx=\'10.8\' cy=\'0.2\' r=\'1.0\'/%3E%3Ccircle cx=\'10.8\' cy=\'64.2\' r=\'1.0\'/%3E%3Ccircle cx=\'5.2\' cy=\'26.9\' r=\'0.7\'/%3E%3Ccircle cx=\'35.9\' cy=\'48.6\' r=\'1.15\'/%3E%3Ccircle cx=\'22.8\' cy=\'52.6\' r=\'1.15\'/%3E%3Ccircle cx=\'5.6\' cy=\'45.1\' r=\'0.85\'/%3E%3Ccircle cx=\'23.9\' cy=\'58.8\' r=\'0.85\'/%3E%3Ccircle cx=\'20.7\' cy=\'47.2\' r=\'1.15\'/%3E%3Ccircle cx=\'1.9\' cy=\'26.3\' r=\'1.15\'/%3E%3Ccircle cx=\'65.9\' cy=\'26.3\' r=\'1.15\'/%3E%3Ccircle cx=\'2.6\' cy=\'2.2\' r=\'0.7\'/%3E%3Ccircle cx=\'51.4\' cy=\'4.0\' r=\'0.85\'/%3E%3Ccircle cx=\'47.8\' cy=\'57.5\' r=\'1.0\'/%3E%3Ccircle cx=\'23.2\' cy=\'21.4\' r=\'0.7\'/%3E%3Ccircle cx=\'16.8\' cy=\'45.9\' r=\'1.0\'/%3E%3Ccircle cx=\'59.2\' cy=\'19.0\' r=\'0.7\'/%3E%3Ccircle cx=\'1.6\' cy=\'15.0\' r=\'1.15\'/%3E%3Ccircle cx=\'65.6\' cy=\'15.0\' r=\'1.15\'/%3E%3Ccircle cx=\'45.8\' cy=\'29.8\' r=\'1.15\'/%3E%3Ccircle cx=\'50.5\' cy=\'58.5\' r=\'1.15\'/%3E%3C/svg%3E') 0 0 / 64px 64px; + --display: "IM Fell English SC", Georgia, serif; + --body: "EB Garamond", Georgia, serif; } * { box-sizing: border-box; } body { margin: 0; - background: var(--bg); + background: var(--paper); color: var(--ink); - font: 600 16px/1.45 Nunito, system-ui, sans-serif; + font: 500 18px/1.45 var(--body); } main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } -.top { - display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; - max-width: 680px; margin: 0 auto; padding: 20px 16px 8px; -} -.top h1 { margin: 0; font-weight: 900; font-size: 26px; letter-spacing: -0.5px; } -.who { color: var(--muted); font-size: 14px; } -.who input { - margin-left: 6px; width: 140px; padding: 6px 10px; font: inherit; color: var(--ink); - background: var(--surface); border: 2px solid var(--line); border-radius: 12px; +/* Shared recipe: a hand-inked panel with a stippled shadow behind it. + ::before is the paper and the pen line; ::after is the dot shading. */ +.inked { position: relative; isolation: isolate; background: none; border: 0; } +.inked::before, .inked::after { content: ""; position: absolute; border-radius: var(--wobble); pointer-events: none; } +.inked::before { inset: 0; z-index: -1; background: var(--card); border: var(--pen); } +.inked::after { + inset: 7px -7px -7px 7px; z-index: -2; background: var(--stipple); + -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000 90%); + mask-image: linear-gradient(135deg, transparent 30%, #000 90%); } -/* ---------- buttons: chunky, pressable ---------- */ -.btn { - font: 800 16px/1 Nunito, system-ui, sans-serif; letter-spacing: 0.3px; text-transform: uppercase; - padding: 14px 20px; border-radius: 16px; border: 2px solid transparent; cursor: pointer; - transition: transform 80ms, box-shadow 80ms; +/* ---------- header ---------- */ +.top { + display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; justify-content: space-between; + max-width: 680px; margin: 0 auto; padding: 22px 16px 10px; } -.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: none; } +.top h1 { margin: 0; font: 400 34px/1 var(--display); position: relative; } +.top h1::after { + content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 6px; background: var(--stipple); + -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); +} +.who { color: var(--muted); font-style: italic; } +.who input { + margin-left: 6px; width: 140px; padding: 2px 4px; font: 500 18px var(--body); color: var(--ink); + background: transparent; border: 0; border-bottom: var(--pen); +} +.who input:focus { outline: none; border-bottom-style: dashed; } + +/* ---------- buttons ---------- */ +.btn { + font: 400 18px/1 var(--display); letter-spacing: 0.5px; padding: 14px 20px; cursor: pointer; + color: var(--ink); transition: transform 70ms; +} +.btn::after { inset: 5px -5px -5px 5px; } +.btn:active:not(:disabled) { transform: translate(4px, 4px); } +.btn:active:not(:disabled)::after { opacity: 0; } .btn:disabled { opacity: 0.5; cursor: default; } -.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } -.btn-go { background: var(--go); color: #fff; box-shadow: 0 4px 0 var(--go-edge); } -.btn-no { background: var(--no); color: var(--no-ink); border-color: var(--no-edge); box-shadow: 0 4px 0 var(--no-edge); } +.btn:focus-visible { outline: 1.5px dashed var(--ink); outline-offset: 6px; } +.btn-go { color: var(--paper); } +.btn-go::before { background: var(--ink); } +.btn-no { color: var(--red); } /* ---------- composer ---------- */ -.composer { display: grid; gap: 10px; margin: 8px 0 24px; } -.composer label { font-weight: 800; } +.composer { display: grid; gap: 10px; margin: 8px 0 28px; } +.composer label { font-style: italic; color: var(--muted); } +.composer .field { padding: 2px; } .composer textarea { - width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); resize: vertical; - background: var(--surface); border: 2px solid var(--line); border-radius: 16px; + display: block; width: 100%; padding: 12px 14px; font: 500 18px/1.4 var(--body); color: var(--ink); + resize: vertical; background: transparent; border: 0; } -.composer textarea:focus { outline: none; border-color: var(--go); } +.composer textarea:focus { outline: none; } +.composer .field:focus-within::before { border-style: dashed; } -/* ---------- the perch ---------- */ +/* ---------- the perch: an inked branch with stippled underside ---------- */ .perch { - display: flex; flex-wrap: wrap; gap: 8px 4px; justify-content: center; align-items: flex-end; - min-height: 132px; padding: 16px 8px 8px; margin: 8px 0 16px; - border-bottom: 6px solid #6b4f3a; border-radius: 0 0 4px 4px; + position: relative; display: flex; flex-wrap: wrap; gap: 10px 6px; justify-content: center; align-items: flex-end; + min-height: 140px; padding: 16px 8px 12px; margin: 8px 0 22px; border-bottom: 2px solid var(--ink); +} +.perch::after { + content: ""; position: absolute; left: 4%; right: 4%; bottom: -12px; height: 10px; background: var(--stipple); + -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); } .crow { margin: 0; width: 84px; display: grid; justify-items: center; position: relative; } .crow.role-sentry { order: -1; } .crow.role-elder { order: 99; } .crow-body { width: 72px; height: 66px; } .crow svg { width: 100%; height: 100%; overflow: visible; } -.crow .disc { fill: var(--mint); } -.crow.role-sentry .disc { fill: var(--sentry); } -.crow.role-elder .disc { fill: var(--elder); } +.crow .disc { fill: #b7e4c7; } +.crow.role-sentry .disc { fill: #ffe08a; } +.crow.role-elder .disc { fill: #d6dde6; } .crow .bird { fill: #000; } .crow .jaw { transform-origin: 211px 182px; transition: transform 150ms; } -.crow figcaption { font-size: 13px; font-weight: 800; color: var(--muted); } +.crow figcaption { margin-top: 2px; font: 400 15px/1.2 var(--display); } +.crow.role-sentry figcaption, .crow.role-elder figcaption { font-style: italic; text-decoration: underline; text-underline-offset: 3px; } .badge { - position: absolute; top: 0; right: 8px; width: 18px; height: 18px; border-radius: 50%; - border: 3px solid var(--bg); opacity: 0; transform: scale(0.4); transition: 150ms; + position: absolute; top: -4px; right: 4px; width: 22px; height: 22px; + fill: var(--card); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; + opacity: 0; transform: scale(0.4); transition: 150ms; } -.crow[data-trust="1"] .badge { opacity: 1; transform: none; background: var(--bronze); } -.crow[data-trust="2"] .badge { opacity: 1; transform: none; background: var(--gold); animation: shimmer 2.4s infinite; } +.crow[data-trust="1"] .badge { opacity: 1; transform: rotate(-12deg); } +.crow[data-trust="2"] .badge { opacity: 1; transform: rotate(-12deg); fill: var(--ink); animation: twinkle 2.4s infinite; } /* Body layer: poses */ .pose-perched .crow-body { animation: breathe 3.2s ease-in-out infinite; } @@ -102,11 +115,11 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } .pose-flying .jaw { transform: rotate(-10deg); } .pose-waiting .crow-body { animation: tilt 1.4s ease-in-out infinite; } .pose-waiting::after { - content: "?"; position: absolute; top: -6px; left: 6px; font-weight: 900; font-size: 18px; color: var(--go); + content: "?"; position: absolute; top: -12px; left: 4px; font: 400 26px/1 var(--display); animation: pop 1.4s ease-in-out infinite; } -.pose-grounded .crow-body { transform: rotate(-18deg) translateY(6px); filter: grayscale(1) opacity(0.6); } -.pose-grounded::after { content: "✦ ✦"; position: absolute; top: -4px; font-size: 12px; color: var(--gold); animation: spin 1.6s linear infinite; } +.pose-grounded .crow-body { transform: rotate(-18deg) translateY(6px); opacity: 0.5; } +.pose-grounded::after { content: "✕ ✕"; position: absolute; top: -6px; font-size: 12px; animation: spin 1.6s linear infinite; } /* Reaction layer: one-shots on top */ .r-cheer .crow-body { animation: hop 0.8s ease-out; } @@ -115,8 +128,7 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } .r-levelUp .crow-body { animation: levelup 2s ease-out; } .r-levelUp .jaw { transform: rotate(16deg); } .r-levelUp::before { - content: "★"; position: absolute; top: -18px; font-size: 22px; color: var(--gold); - animation: rise 2s ease-out forwards; + content: "✦"; position: absolute; top: -22px; font-size: 26px; animation: rise 2s ease-out forwards; } .r-levelDown .crow-body { animation: shrug 1s ease-out; } .r-prank .crow-body { animation: prank 2.5s ease-in-out; } @@ -126,7 +138,7 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } @keyframes tilt { 50% { transform: rotate(8deg); } } @keyframes pop { 50% { transform: translateY(-4px); } } @keyframes spin { to { transform: rotate(360deg); } } -@keyframes shimmer { 50% { box-shadow: 0 0 10px var(--gold); } } +@keyframes twinkle { 50% { transform: rotate(-12deg) scale(1.15); } } @keyframes hop { 30% { transform: translateY(-22px) scale(0.95, 1.08); } 60% { transform: translateY(0) scale(1.08, 0.92); } } @keyframes droop { 40%, 70% { transform: translateY(6px) rotate(-6deg) scale(1, 0.94); } } @keyframes levelup { 20% { transform: scale(1.25) rotate(0); } 60% { transform: scale(1.25) rotate(360deg); } } @@ -139,52 +151,43 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } } /* ---------- cards ---------- */ -.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } -.card { - background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 14px 16px; - box-shadow: var(--shadow); -} +.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; } +.card { padding: 14px 18px; } .card-head { display: flex; gap: 10px; align-items: flex-start; } -.card .text { margin: 0; font-weight: 800; } -.dot { flex: none; width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; background: var(--line); } -.card[data-state="flying"] .dot { background: var(--mint); animation: pop 0.8s infinite; } -.card[data-state="asking"] { border-color: var(--go); } -.card[data-state="asking"] .dot { background: var(--go); } -.card[data-state="done"] .dot { background: var(--go); } -.card[data-state="rejected"] .dot, .card[data-state="skipped"] .dot { background: var(--no-ink); } +.card .text { margin: 0; font-weight: 700; } +.dot { flex: none; width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; border: 1.5px solid var(--ink); } +.card[data-state="flying"] .dot { background: var(--stipple); animation: pop 0.8s infinite; } +.card[data-state="asking"] .dot { background: var(--ink); animation: pop 1.2s infinite; } +.card[data-state="asking"]::after { -webkit-mask-image: none; mask-image: none; } +.card[data-state="done"] .dot { background: var(--ink); } +.card[data-state="rejected"] .dot, .card[data-state="skipped"] .dot { border-style: dashed; } .card[data-state="skipped"] .text { text-decoration: line-through; color: var(--muted); } -.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 24px; } +.chips { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 0 24px; } .chips:empty { display: none; } -.chip { - font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; - padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 2px solid var(--line); color: var(--muted); -} -.chip.mode-murder { border-color: #1d2721; color: var(--ink); } -.chip.mode-split { border-color: var(--mint); } -.reason { margin: 6px 0 0 24px; color: var(--muted); font-size: 14px; } -.subtasks { margin: 6px 0 0 24px; padding-left: 18px; font-size: 14px; } +.chip { font: 400 15px/1.3 var(--display); border-bottom: 1.5px solid var(--ink); } +.chip.mode-murder { border-bottom-width: 3px; } +.chip.mode-split { border-bottom-style: double; border-bottom-width: 4px; } +.chip.crows { font: italic 500 15px/1.3 var(--body); color: var(--muted); border-bottom: 0; } +.reason { margin: 6px 0 0 24px; color: var(--muted); font-style: italic; } +.subtasks { margin: 6px 0 0 24px; padding-left: 18px; } .subtasks:empty { display: none; } .answer { - margin: 10px 0 0 24px; padding: 10px 12px; border-left: 4px solid var(--mint); background: var(--bg); - border-radius: 0 12px 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; + margin: 12px 0 0 24px; padding: 4px 0 4px 14px; border-left: 1.5px solid var(--ink); + white-space: pre-wrap; overflow-wrap: anywhere; } .actions:empty { display: none; } -.actions { margin: 12px 0 0 24px; } -.question { margin: 0 0 10px; font-weight: 800; } -.buttons { display: flex; gap: 10px; } +.actions { margin: 14px 0 6px 24px; } +.question { margin: 0 0 12px; font: 400 19px/1.3 var(--display); } +.buttons { display: flex; gap: 14px; } .buttons .btn { flex: 1; } -.note { margin: 0; font-size: 14px; color: var(--muted); } -.err { margin: 8px 0 0; font-size: 14px; color: var(--no-ink); } +.note { margin: 0; color: var(--muted); font-style: italic; } +.err { margin: 8px 0 0; color: var(--red); } .err:empty { display: none; } -.banner { - margin: 0 0 16px; padding: 10px 14px; border-radius: 14px; background: var(--sentry); color: #3d3000; - font-weight: 800; text-align: center; -} -.meter { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: 14px; } +.banner { margin: 0 0 20px; padding: 10px 16px; font: 400 18px/1.3 var(--display); text-align: center; } +.meter { margin: 22px 0 0; text-align: center; color: var(--muted); font-style: italic; } .toast { position: fixed; left: 16px; right: 16px; bottom: 20px; max-width: 520px; margin: 0 auto; - padding: 14px 16px; border-radius: 16px; background: var(--ink); color: var(--bg); font-weight: 800; text-align: center; - box-shadow: 0 6px 24px rgb(0 0 0 / 0.25); + padding: 14px 18px; font: 400 18px/1.35 var(--display); text-align: center; }