jac/so-many-crows
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
51cf9ddec65a9236319051f44f1a7b2759d7e97c
so-many-crows/ui/src/style.css
T
SmokeyandClaude Opus 5.5 57e9fc2fd2 Crow personas and generated banter 
- personas.go: backstory, prompt policy and output policy per crow;
  Hugin and Munin grounded in Grimnismal 20 and Gylfaginning 38;
  every working crow also follows a common output policy
- Personas go into each crow's instructions; Sentry keeps JSON-only
- banter.go: retrieve backstory, relationships and recent flock
  memory, then the speaking crow generates one line in character;
  max 2 per list against the list budget, never blocks work,
  unusable lines dropped
- crow.banter event, GET /api/crows, `crows personas` -> PERSONAS.md
- UI: epithets on tiles and messages, banter as quiet asides

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UQnSw4RRWp8uqpj3nsnnXF
2026-10-27 17:31:53 -06:00

305 lines
31 KiB
CSS
Raw Blame History

/* Art direction: pen and ink on cream. Ink linework and type, stipple shading,
no outlines on boxes. Layout: a chat room. The flock is the member list; the
Sentry and crows post into one channel; you judge with inline buttons. */
:root {
color-scheme: light;
--paper: #f4eedf;
--card: #f9f5ea;
--ink: #1c1915;
--muted: #5f574b;
--red: #9b2f22;
--pen: 1.75px solid var(--ink);
--corner: 6px; /* clean, confident lines: the hand shows in the stipple, not the edges */
/* Stipple: a seamless tile of fine, randomly placed dots (generated, fixed seed), layered at two
unrelated sizes so the repeat never shows. Reads as hand stippling, not a halftone screen. */
--stipple-tile: 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.35\'/%3E%3Ccircle cx=\'4.6\' cy=\'34.3\' r=\'0.5\'/%3E%3Ccircle cx=\'37.3\' cy=\'58.2\' r=\'0.42\'/%3E%3Ccircle cx=\'2.4\' cy=\'27.8\' r=\'0.35\'/%3E%3Ccircle cx=\'15.4\' cy=\'35.3\' r=\'0.35\'/%3E%3Ccircle cx=\'52.9\' cy=\'7.9\' r=\'0.42\'/%3E%3Ccircle cx=\'40.4\' cy=\'37.3\' r=\'0.35\'/%3E%3Ccircle cx=\'36.9\' cy=\'25.4\' r=\'0.42\'/%3E%3Ccircle cx=\'3.0\' cy=\'54.9\' r=\'0.5\'/%3E%3Ccircle cx=\'26.8\' cy=\'34.6\' r=\'0.5\'/%3E%3Ccircle cx=\'35.9\' cy=\'43.6\' r=\'0.35\'/%3E%3Ccircle cx=\'37.2\' cy=\'40.9\' r=\'0.5\'/%3E%3Ccircle cx=\'6.2\' cy=\'45.6\' r=\'0.35\'/%3E%3Ccircle cx=\'39.6\' cy=\'31.8\' r=\'0.6\'/%3E%3Ccircle cx=\'49.7\' cy=\'29.8\' r=\'0.6\'/%3E%3Ccircle cx=\'23.1\' cy=\'15.9\' r=\'0.42\'/%3E%3Ccircle cx=\'44.7\' cy=\'15.6\' r=\'0.5\'/%3E%3Ccircle cx=\'33.6\' cy=\'56.0\' r=\'0.6\'/%3E%3Ccircle cx=\'18.4\' cy=\'62.7\' r=\'0.35\'/%3E%3Ccircle cx=\'32.8\' cy=\'10.6\' r=\'0.5\'/%3E%3Ccircle cx=\'9.7\' cy=\'31.3\' r=\'0.35\'/%3E%3Ccircle cx=\'61.6\' cy=\'5.0\' r=\'0.5\'/%3E%3Ccircle cx=\'21.8\' cy=\'22.4\' r=\'0.6\'/%3E%3Ccircle cx=\'37.1\' cy=\'29.2\' r=\'0.35\'/%3E%3Ccircle cx=\'60.5\' cy=\'30.3\' r=\'0.35\'/%3E%3Ccircle cx=\'3.9\' cy=\'44.9\' r=\'0.6\'/%3E%3Ccircle cx=\'18.2\' cy=\'24.7\' r=\'0.5\'/%3E%3Ccircle cx=\'1.4\' cy=\'29.5\' r=\'0.42\'/%3E%3Ccircle cx=\'39.1\' cy=\'31.6\' r=\'0.42\'/%3E%3Ccircle cx=\'49.2\' cy=\'8.3\' r=\'0.42\'/%3E%3Ccircle cx=\'25.5\' cy=\'58.7\' r=\'0.6\'/%3E%3Ccircle cx=\'5.2\' cy=\'28.7\' r=\'0.5\'/%3E%3Ccircle cx=\'56.5\' cy=\'52.4\' r=\'0.5\'/%3E%3Ccircle cx=\'45.2\' cy=\'-0.9\' r=\'0.6\'/%3E%3Ccircle cx=\'45.2\' cy=\'63.1\' r=\'0.6\'/%3E%3Ccircle cx=\'61.3\' cy=\'9.7\' r=\'0.42\'/%3E%3Ccircle cx=\'9.7\' cy=\'42.1\' r=\'0.35\'/%3E%3Ccircle cx=\'31.0\' cy=\'37.7\' r=\'0.5\'/%3E%3Ccircle cx=\'18.0\' cy=\'9.3\' r=\'0.5\'/%3E%3Ccircle cx=\'39.0\' cy=\'20.4\' r=\'0.42\'/%3E%3Ccircle cx=\'44.2\' cy=\'33.0\' r=\'0.35\'/%3E%3Ccircle cx=\'29.2\' cy=\'55.7\' r=\'0.6\'/%3E%3Ccircle cx=\'25.5\' cy=\'25.2\' r=\'0.6\'/%3E%3Ccircle cx=\'40.6\' cy=\'4.0\' r=\'0.35\'/%3E%3Ccircle cx=\'-1.0\' cy=\'28.2\' r=\'0.35\'/%3E%3Ccircle cx=\'63.0\' cy=\'28.2\' r=\'0.35\'/%3E%3Ccircle cx=\'21.8\' cy=\'3.4\' r=\'0.35\'/%3E%3Ccircle cx=\'36.3\' cy=\'34.3\' r=\'0.5\'/%3E%3Ccircle cx=\'39.3\' cy=\'4.5\' r=\'0.42\'/%3E%3Ccircle cx=\'39.3\' cy=\'9.5\' r=\'0.5\'/%3E%3Ccircle cx=\'61.1\' cy=\'38.5\' r=\'0.6\'/%3E%3Ccircle cx=\'7.9\' cy=\'54.3\' r=\'0.6\'/%3E%3Ccircle cx=\'30.7\' cy=\'20.0\' r=\'0.42\'/%3E%3Ccircle cx=\'6.5\' cy=\'21.9\' r=\'0.5\'/%3E%3Ccircle cx=\'30.6\' cy=\'44.3\' r=\'0.35\'/%3E%3Ccircle cx=\'13.1\' cy=\'60.9\' r=\'0.5\'/%3E%3Ccircle cx=\'9.4\' cy=\'34.8\' r=\'0.35\'/%3E%3Ccircle cx=\'48.5\' cy=\'19.1\' r=\'0.35\'/%3E%3Ccircle cx=\'44.6\' cy=\'16.7\' r=\'0.5\'/%3E%3Ccircle cx=\'58.1\' cy=\'22.8\' r=\'0.42\'/%3E%3Ccircle cx=\'34.1\' cy=\'49.9\' r=\'0.5\'/%3E%3Ccircle cx=\'40.7\' cy=\'39.2\' r=\'0.42\'/%3E%3Ccircle cx=\'51.6\' cy=\'52.4\' r=\'0.42\'/%3E%3Ccircle cx=\'12.8\' cy=\'31.5\' r=\'0.35\'/%3E%3Ccircle cx=\'-0.7\' cy=\'50.6\' r=\'0.6\'/%3E%3Ccircle cx=\'63.3\' cy=\'50.6\' r=\'0.6\'/%3E%3Ccircle cx=\'16.6\' cy=\'44.3\' r=\'0.5\'/%3E%3Ccircle cx=\'28.6\' cy=\'60.0\' r=\'0.5\'/%3E%3Ccircle cx=\'61.1\' cy=\'23.3\' r=\'0.42\'/%3E%3Ccircle cx=\'6.5\' cy=\'30.1\' r=\'0.5\'/%3E%3Ccircle cx=\'13.1\' cy=\'39.9\' r=\'0.35\'/%3E%3Ccircle cx=\'30.7\' cy=\'41.8\' r=\'0.35\'/%3E%3Ccircle cx=\'53.4\' cy=\'7.7\' r=\'0.6\'/%3E%3Ccircle cx=\'50.1\' cy=\'48.0\' r=\'0.6\'/%3E%3Ccircle cx=\'56.9\' cy=\'27.8\' r=\'0.5\'/%3E%3Ccircle cx=\'5.6\' cy=\'60.6\' r=\'0.6\'/%3E%3Ccircle cx=\'29.6\' cy=\'47.6\' r=\'0.35\'/%3E%3Ccircle cx=\'46.4\' cy=\'10.9\' r=\'0.42\'/%3E%3Ccircle cx=\'1.8\' cy=\'37.8\' r=\'0.6\'/%3E%3Ccircle cx=\'51.6\' cy=\'9.4\' r=\'0.6\'/%3E%3Ccircle cx=\'42.1\' cy=\'22.4\' r=\'0.42\'/%3E%3Ccircle cx=\'1.4\' cy=\'51.2\' r=\'0.35\'/%3E%3Ccircle cx=\'33.7\' cy=\'59.8\' r=\'0.6\'/%3E%3Ccircle cx=\'-0.9\' cy=\'12.5\' r=\'0.42\'/%3E%3Ccircle cx=\'63.1\' cy=\'12.5\' r=\'0.42\'/%3E%3Ccircle cx=\'1.8\' cy=\'13.6\' r=\'0.42\'/%3E%3Ccircle cx=\'48.9\' cy=\'20.9\' r=\'0.6\'/%3E%3Ccircle cx=\'53.4\' cy=\'3.9\' r=\'0.5\'/%3E%3Ccircle cx=\'57.5\' cy=\'42.4\' r=\'0.6\'/%3E%3Ccircle cx=\'52.9\' cy=\'56.2\' r=\'0.42\'/%3E%3Ccircle cx=\'34.0\' cy=\'33.5\' r=\'0.35\'/%3E%3Ccircle cx=\'55.9\' cy=\'49.7\' r=\'0.35\'/%3E%3Ccircle cx=\'49.7\' cy=\'9.6\' r=\'0.42\'/%3E%3Ccircle cx=\'30.3\' cy=\'46.4\' r=\'0.35\'/%3E%3Ccircle cx=\'20.9\' cy=\'33.2\' r=\'0.6\'/%3E%3Ccircle cx=\'50.2\' cy=\'6.8\' r=\'0.35\'/%3E%3Ccircle cx=\'15.9\' cy=\'17.7\' r=\'0.35\'/%3E%3Ccircle cx=\'32.5\' cy=\'36.0\' r=\'0.35\'/%3E%3Ccircle cx=\'28.4\' cy=\'39.2\' r=\'0.42\'/%3E%3Ccircle cx=\'44.3\' cy=\'29.0\' r=\'0.6\'/%3E%3Ccircle cx=\'32.5\' cy=\'15.8\' r=\'0.5\'/%3E%3Ccircle cx=\'59.1\' cy=\'57.1\' r=\'0.42\'/%3E%3Ccircle cx=\'53.8\' cy=\'8.8\' r=\'0.35\'/%3E%3Ccircle cx=\'25.1\' cy=\'20.2\' r=\'0.42\'/%3E%3Ccircle cx=\'27.4\' cy=\'13.6\' r=\'0.5\'/%3E%3Ccircle cx=\'50.2\' cy=\'57.4\' r=\'0.42\'/%3E%3Ccircle cx=\'60.1\' cy=\'41.2\' r=\'0.5\'/%3E%3Ccircle cx=\'9.2\' cy=\'56.5\' r=\'0.6\'/%3E%3Ccircle cx=\'14.1\' cy=\'61.0\' r=\'0.6\'/%3E%3Ccircle cx=\'56.6\' cy=\'10.4\' r=\'0.42\'/%3E%3Ccircle cx=\'10.3\' cy=\'27.6\' r=\'0.6\'/%3E%3Ccircle cx=\'21.7\' cy=\'12.5\' r=\'0.5\'/%3E%3Ccircle cx=\'5.9\' cy=\'23.4\' r=\'0.5\'/%3E%3Ccircle cx=\'35.5\' cy=\'28.2\' r=\'0.35\'/%3E%3Ccircle cx=\'24.6\' cy=\'33.1\' r=\'0.5\'/%3E%3Ccircle cx=\'32.8\' cy=\'4.1\' r=\'0.42\'/%3E%3Ccircle cx=\'62.2\' cy=\'6.7\' r=\'0.5\'/%3E%3Ccircle cx=\'17.4\' cy=\'58.0\' r=\'0.42\'/%3E%3Ccircle cx=\'17.3\' cy=\'8.3\' r=\'0.6\'/%3E%3Ccircle cx=\'54.4\' cy=\'43.3\' r=\'0.5\'/%3E%3Ccircle cx=\'26.0\' cy=\'34.3\' r=\'0.6\'/%3E%3Ccircle cx=\'44.8\' cy=\'5.7\' r=\'0.35\'/%3E%3Ccircle cx=\'51.2\' cy=\'11.7\' r=\'0.35\'/%3E%3Ccircle cx=\'17.2\' cy=\'1.1\' r=\'0.35\'/%3E%3Ccircle cx=\'51.3\' cy=\'5.4\' r=\'0.42\'/%3E%3Ccircle cx=\'4.3\' cy=\'55.2\' r=\'0.6\'/%3E%3Ccircle cx=\'0.7\' cy=\'-0.4\' r=\'0.6\'/%3E%3Ccircle cx=\'0.7\' cy=\'63.6\' r=\'0.6\'/%3E%3Ccircle cx=\'64.7\' cy=\'-0.4\' r=\'0.6\'/%3E%3Ccircle cx=\'64.7\' cy=\'63.6\' r=\'0.6\'/%3E%3Ccircle cx=\'59.3\' cy=\'17.1\' r=\'0.42\'/%3E%3Ccircle cx=\'2.8\' cy=\'45.4\' r=\'0.35\'/%3E%3Ccircle cx=\'62.0\' cy=\'16.8\' r=\'0.42\'/%3E%3Ccircle cx=\'12.9\' cy=\'20.0\' r=\'0.5\'/%3E%3Ccircle cx=\'34.0\' cy=\'13.2\' r=\'0.6\'/%3E%3Ccircle cx=\'32.0\' cy=\'11.4\' r=\'0.5\'/%3E%3Ccircle cx=\'51.4\' cy=\'-0.4\' r=\'0.35\'/%3E%3Ccircle cx=\'51.4\' cy=\'63.6\' r=\'0.35\'/%3E%3Ccircle cx=\'1.0\' cy=\'46.9\' r=\'0.42\'/%3E%3Ccircle cx=\'65.0\' cy=\'46.9\' r=\'0.42\'/%3E%3Ccircle cx=\'32.9\' cy=\'15.7\' r=\'0.6\'/%3E%3Ccircle cx=\'6.8\' cy=\'52.4\' r=\'0.6\'/%3E%3Ccircle cx=\'42.0\' cy=\'34.9\' r=\'0.6\'/%3E%3Ccircle cx=\'62.1\' cy=\'19.7\' r=\'0.42\'/%3E%3Ccircle cx=\'62.9\' cy=\'21.9\' r=\'0.42\'/%3E%3Ccircle cx=\'25.9\' cy=\'22.2\' r=\'0.35\'/%3E%3Ccircle cx=\'53.6\' cy=\'0.9\' r=\'0.5\'/%3E%3Ccircle cx=\'53.6\' cy=\'64.9\' r=\'0.5\'/%3E%3Ccircle cx=\'27.6\' cy=\'3.5\' r=\'0.6\'/%3E%3Ccircle cx=\'55.7\' cy=\'42.9\' r=\'0.5\'/%3E%3Ccircle cx=\'38.3\' cy=\'44.3\' r=\'0.35\'/%3E%3Ccircle cx=\'29.4\' cy=\'10.1\' r=\'0.6\'/%3E%3Ccircle cx=\'0.2\' cy=\'23.3\' r=\'0.5\'/%3E%3Ccircle cx=\'64.2\' cy=\'23.3\' r=\'0.5\'/%3E%3Ccircle cx=\'62.2\' cy=\'35.0\' r=\'0.42\'/%3E%3Ccircle cx=\'2.2\' cy=\'56.5\' r=\'0.42\'/%3E%3Ccircle cx=\'22.8\' cy=\'0.1\' r=\'0.6\'/%3E%3Ccircle cx=\'22.8\' cy=\'64.1\' r=\'0.6\'/%3E%3Ccircle cx=\'5.4\' cy=\'17.9\' r=\'0.42\'/%3E%3Ccircle cx=\'15.9\' cy=\'49.7\' r=\'0.35\'/%3E%3Ccircle cx=\'16.9\' cy=\'5.7\' r=\'0.6\'/%3E%3Ccircle cx=\'37.6\' cy=\'25.2\' r=\'0.5\'/%3E%3Ccircle cx=\'19.5\' cy=\'14.9\' r=\'0.42\'/%3E%3Ccircle cx=\'42.1\' cy=\'45.8\' r=\'0.6\'/%3E%3Ccircle cx=\'48.9\' cy=\'46.1\' r=\'0.6\'/%3E%3Ccircle cx=\'9.6\' cy=\'46.3\' r=\'0.42\'/%3E%3Ccircle cx=\'2.8\' cy=\'53.5\' r=\'0.6\'/%3E%3Ccircle cx=\'47.0\' cy=\'52.0\' r=\'0.42\'/%3E%3Ccircle cx=\'58.2\' cy=\'48.2\' r=\'0.35\'/%3E%3Ccircle cx=\'52.9\' cy=\'37.4\' r=\'0.42\'/%3E%3Ccircle cx=\'5.4\' cy=\'2.7\' r=\'0.5\'/%3E%3Ccircle cx=\'61.4\' cy=\'24.1\' r=\'0.6\'/%3E%3Ccircle cx=\'35.7\' cy=\'40.2\' r=\'0.42\'/%3E%3Ccircle cx=\'31.3\' cy=\'0.2\' r=\'0.35\'/%3E%3Ccircle cx=\'31.3\' cy=\'64.2\' r=\'0.35\'/%3E%3Ccircle cx=\'47.9\' cy=\'32.2\' r=\'0.35\'/%3E%3Ccircle cx=\'42.2\' cy=\'4.2\' r=\'0.6\'/%3E%3Ccircle cx=\'16.1\' cy=\'4.8\' r=\'0.5\'/%3E%3Ccircle cx=\'15.0\' cy=\'48.4\' r=\'0.42\'/%3E%3Ccircle cx=\'47.3\' cy=\'62.4\' r=\'0.6\'/%3E%3Ccircle cx=\'54.1\' cy=\'4.9\' r=\'0.5\'/%3E%3Ccircle cx=\'49.1\' cy=\'39.5\' r=\'0.42\'/%3E%3Ccircle cx=\'5.0\' cy=\'9.4\' r=\'0.5\'/%3E%3Ccircle cx=\'41.7\' cy=\'44.3\' r=\'0.42\'/%3E%3Ccircle cx=\'0.8\' cy=\'3.9\' r=\'0.5\'/%3E%3Ccircle cx=\'64.8\' cy=\'3.9\' r=\'0.5\'/%3E%3Ccircle cx=\'62.2\' cy=\'6.4\' r=\'0.42\'/%3E%3Ccircle cx=\'43.2\' cy=\'18.6\' r=\'0.5\'/%3E%3Ccircle cx=\'29.7\' cy=\'29.8\' r=\'0.35\'/%3E%3Ccircle cx=\'-0.4\' cy=\'35.1\' r=\'0.5\'/%3E%3Ccircle cx=\'63.6\' cy=\'35.1\' r=\'0.5\'/%3E%3Ccircle cx=\'62.6\' cy=\'59.9\' r=\'0.35\'/%3E%3Ccircle cx=\'18.5\' cy=\'4.9\' r=\'0.6\'/%3E%3Ccircle cx=\'-0.4\' cy=\'24.8\' r=\'0.42\'/%3E%3Ccircle cx=\'63.6\' cy=\'24.8\' r=\'0.42\'/%3E%3Ccircle cx=\'4.8\' cy=\'5.8\' r=\'0.5\'/%3E%3Ccircle cx=\'61.0\' cy=\'8.5\' r=\'0.5\'/%3E%3Ccircle cx=\'56.8\' cy=\'45.0\' r=\'0.42\'/%3E%3Ccircle cx=\'31.9\' cy=\'56.1\' r=\'0.6\'/%3E%3Ccircle cx=\'1.6\' cy=\'0.2\' r=\'0.6\'/%3E%3Ccircle cx=\'1.6\' cy=\'64.2\' r=\'0.6\'/%3E%3Ccircle cx=\'43.6\' cy=\'25.9\' r=\'0.42\'/%3E%3Ccircle cx=\'26.6\' cy=\'24.1\' r=\'0.35\'/%3E%3Ccircle cx=\'53.8\' cy=\'0.1\' r=\'0.5\'/%3E%3Ccircle cx=\'53.8\' cy=\'64.1\' r=\'0.5\'/%3E%3Ccircle cx=\'53.7\' cy=\'7.7\' r=\'0.42\'/%3E%3Ccircle cx=\'45.6\' cy=\'57.7\' r=\'0.5\'/%3E%3Ccircle cx=\'16.2\' cy=\'4.2\' r=\'0.6\'/%3E%3Ccircle cx=\'-0.1\' cy=\'37.7\' r=\'0.5\'/%3E%3Ccircle cx=\'63.9\' cy=\'37.7\' r=\'0.5\'/%3E%3Ccircle cx=\'59.2\' cy=\'48.4\' r=\'0.35\'/%3E%3Ccircle cx=\'18.0\' cy=\'3.3\' r=\'0.5\'/%3E%3Ccircle cx=\'40.6\' cy=\'9.5\' r=\'0.5\'/%3E%3Ccircle cx=\'27.9\' cy=\'20.2\' r=\'0.5\'/%3E%3Ccircle cx=\'50.2\' cy=\'27.4\' r=\'0.35\'/%3E%3Ccircle cx=\'52.0\' cy=\'40.4\' r=\'0.42\'/%3E%3Ccircle cx=\'46.1\' cy=\'3.2\' r=\'0.6\'/%3E%3Ccircle cx=\'28.9\' cy=\'48.2\' r=\'0.5\'/%3E%3Ccircle cx=\'31.1\' cy=\'58.4\' r=\'0.42\'/%3E%3Ccircle cx=\'10.9\' cy=\'26.6\' r=\'0.5\'/%3E%3Ccircle cx=\'19.1\' cy=\'47.3\' r=\'0.5\'/%3E%3Ccircle cx=\'26.0\' cy=\'15.3\' r=\'0.6\'/%3E%3Ccircle cx=\'35.7\' cy=\'25.2\' r=\'0.42\'/%3E%3Ccircle cx=\'41.2\' cy=\'4.8\' r=\'0.6\'/%3E%3Ccircle cx=\'35.2\' cy=\'29.0\' r=\'0.5\'/%3E%3Ccircle cx=\'-0.2\' cy=\'28.8\' r=\'0.42\'/%3E%3Ccircle cx=\'63.8\' cy=\'28.8\' r=\'0.42\'/%3E%3Ccircle cx=\'35.1\' cy=\'15.6\' r=\'0.42\'/%3E%3Ccircle cx=\'21.9\' cy=\'5.8\' r=\'0.42\'/%3E%3Ccircle cx=\'23.6\' cy=\'51.8\' r=\'0.42\'/%3E%3Ccircle cx=\'56.8\' cy=\'48.0\' r=\'0.6\'/%3E%3Ccircle cx=\'24.5\' cy=\'47.7\' r=\'0.42\'/%3E%3Ccircle cx=\'24.1\' cy=\'21.6\' r=\'0.35\'/%3E%3Ccircle cx=\'31.9\' cy=\'36.8\' r=\'0.5\'/%3E%3Ccircle cx=\'8.1\' cy=\'32.2\' r=\'0.42\'/%3E%3Ccircle cx=\'5.9\' cy=\'57.4\' r=\'0.6\'/%3E%3Ccircle cx=\'25.6\' cy=\'28.5\' r=\'0.5\'/%3E%3Ccircle cx=\'54.3\' cy=\'55.9\' r=\'0.35\'/%3E%3Ccircle cx=\'8.1\' cy=\'27.2\' r=\'0.6\'/%3E%3Ccircle cx=\'62.0\' cy=\'31.3\' r=\'0.35\'/%3E%3Ccircle cx=\'25.1\' cy=\'59.3\' r=\'0.6\'/%3E%3Ccircle cx=\'62.2\' cy=\'15.9\' r=\'0.35\'/%3E%3Ccircle cx=\'14.3\' cy=\'9.7\' r=\'0.35\'/%3E%3Ccircle cx=\'60.3\' cy=\'46.2\' r=\'0.6\'/%3E%3Ccircle cx=\'5.4\' cy=\'49.7\' r=\'0.35\'/%3E%3Ccircle cx=\'50.1\' cy=\'14.9\' r=\'0.35\'/%3E%3Ccircle cx=\'41.3\' cy=\'19.4\' r=\'0.42\'/%3E%3Ccircle cx=\'40.1\' cy=\'33.8\' r=\'0.6\'/%3E%3Ccircle cx=\'44.7\' cy=\'7.2\' r=\'0.35\'/%3E%3Ccircle cx=\'19.2\' cy=\'60.4\' r=\'0.42\'/%3E%3Ccircle cx=\'24.8\' cy=\'14.3\' r=\'0.35\'/%3E%3Ccircle cx=\'0.7\' cy=\'19.3\' r=\'0.6\'/%3E%3Ccircle cx=\'64.7\' cy=\'19.3\' r=\'0.6\'/%3E%3Ccircle cx=\'17.8\' cy=\'20.2\' r=\'0.42\'/%3E%3Ccircle cx=\'30.4\' cy=\'15.0\' r=\'0.42\'/%3E%3Ccircle cx=\'1.9\' cy=\'26.4\' r=\'0.5\'/%3E%3Ccircle cx=\'3.5\' cy=\'12.4\' r=\'0.6\'/%3E%3Ccircle cx=\'5.2\' cy=\'14.6\' r=\'0.6\'/%3E%3Ccircle cx=\'59.2\' cy=\'14.5\' r=\'0.35\'/%3E%3Ccircle cx=\'44.5\' cy=\'46.0\' r=\'0.5\'/%3E%3Ccircle cx=\'43.7\' cy=\'12.7\' r=\'0.5\'/%3E%3Ccircle cx=\'47.3\' cy=\'32.3\' r=\'0.42\'/%3E%3Ccircle cx=\'31.7\' cy=\'12.8\' r=\'0.42\'/%3E%3Ccircle cx=\'14.8\' cy=\'14.2\' r=\'0.5\'/%3E%3Ccircle cx=\'7.0\' cy=\'39.9\' r=\'0.42\'/%3E%3Ccircle cx=\'57.4\' cy=\'31.0\' r=\'0.35\'/%3E%3Ccircle cx=\'60.7\' cy=\'9.4\' r=\'0.6\'/%3E%3Ccircle cx=\'3.5\' cy=\'1.5\' r=\'0.42\'/%3E%3Ccircle cx=\'26.6\' cy=\'45.4\' r=\'0.42\'/%3E%3Ccircle cx=\'25.2\' cy=\'57.5\' r=\'0.5\'/%3E%3Ccircle cx=\'46.9\' cy=\'-0.2\' r=\'0.42\'/%3E%3Ccircle cx=\'46.9\' cy=\'63.8\' r=\'0.42\'/%3E%3Ccircle cx=\'21.1\' cy=\'11.9\' r=\'0.6\'/%3E%3Ccircle cx=\'2.0\' cy=\'42.5\' r=\'0.6\'/%3E%3Ccircle cx=\'53.7\' cy=\'-1.0\' r=\'0.6\'/%3E%3Ccircle cx=\'53.7\' cy=\'63.0\' r=\'0.6\'/%3E%3Ccircle cx=\'10.8\' cy=\'0.2\' r=\'0.5\'/%3E%3Ccircle cx=\'10.8\' cy=\'64.2\' r=\'0.5\'/%3E%3Ccircle cx=\'5.2\' cy=\'26.9\' r=\'0.35\'/%3E%3Ccircle cx=\'35.9\' cy=\'48.6\' r=\'0.6\'/%3E%3Ccircle cx=\'22.8\' cy=\'52.6\' r=\'0.6\'/%3E%3Ccircle cx=\'5.6\' cy=\'45.1\' r=\'0.42\'/%3E%3Ccircle cx=\'23.9\' cy=\'58.8\' r=\'0.42\'/%3E%3Ccircle cx=\'20.7\' cy=\'47.2\' r=\'0.6\'/%3E%3Ccircle cx=\'1.9\' cy=\'26.3\' r=\'0.6\'/%3E%3Ccircle cx=\'2.6\' cy=\'2.2\' r=\'0.35\'/%3E%3Ccircle cx=\'51.4\' cy=\'4.0\' r=\'0.42\'/%3E%3Ccircle cx=\'47.8\' cy=\'57.5\' r=\'0.5\'/%3E%3Ccircle cx=\'23.2\' cy=\'21.4\' r=\'0.35\'/%3E%3Ccircle cx=\'16.8\' cy=\'45.9\' r=\'0.5\'/%3E%3Ccircle cx=\'59.2\' cy=\'19.0\' r=\'0.35\'/%3E%3Ccircle cx=\'1.6\' cy=\'15.0\' r=\'0.6\'/%3E%3Ccircle cx=\'45.8\' cy=\'29.8\' r=\'0.6\'/%3E%3Ccircle cx=\'50.5\' cy=\'58.5\' r=\'0.6\'/%3E%3Ccircle cx=\'8.5\' cy=\'31.8\' r=\'0.35\'/%3E%3Ccircle cx=\'51.4\' cy=\'47.3\' r=\'0.42\'/%3E%3Ccircle cx=\'38.9\' cy=\'21.0\' r=\'0.5\'/%3E%3Ccircle cx=\'29.5\' cy=\'50.2\' r=\'0.35\'/%3E%3Ccircle cx=\'32.8\' cy=\'25.1\' r=\'0.42\'/%3E%3Ccircle cx=\'15.8\' cy=\'4.1\' r=\'0.35\'/%3E%3Ccircle cx=\'30.8\' cy=\'34.9\' r=\'0.42\'/%3E%3Ccircle cx=\'62.7\' cy=\'56.5\' r=\'0.35\'/%3E%3Ccircle cx=\'17.0\' cy=\'5.4\' r=\'0.35\'/%3E%3Ccircle cx=\'26.9\' cy=\'-0.7\' r=\'0.6\'/%3E%3Ccircle cx=\'26.9\' cy=\'63.3\' r=\'0.6\'/%3E%3C/svg%3E');
--stipple: var(--stipple-tile) 0 0 / 64px 64px, var(--stipple-tile) 23px 11px / 47px 47px;
--sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231c1915'%3E%3Cpath d='M12 0C12.8 7 17 11.2 24 12C17 12.8 12.8 17 12 24C11.2 17 7 12.8 0 12C7 11.2 11.2 7 12 0Z'/%3E%3C/svg%3E");
--glint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%231c1915' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 2v6M12 16v6M2 12h6M16 12h6'/%3E%3C/svg%3E");
--display: "IM Fell English SC", Georgia, serif;
--body: "EB Garamond", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 17px/1.45 var(--body); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Shared recipe: a filled panel with a stippled shadow. No pen lines. */
.inked { position: relative; isolation: isolate; background: none; border: 0; }
.inked::before, .inked::after { content: ""; position: absolute; border-radius: var(--corner); pointer-events: none; }
.inked::before { inset: 0; z-index: -1; background: var(--card); }
.inked::after {
inset: 6px -6px -6px 6px; 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 ---------- */
.btn {
font: 400 17px/1 var(--display); letter-spacing: 0.4px; padding: 12px 18px; cursor: pointer;
color: var(--ink); transition: transform 70ms;
}
.btn::after { inset: 4px -4px -4px 4px; }
.btn:active:not(:disabled) { transform: translate(3px, 3px); }
.btn:active:not(:disabled)::after { opacity: 0; }
.btn:disabled { cursor: default; color: var(--muted); }
.btn:disabled::before { background: linear-gradient(rgb(249 245 234 / 0.72), rgb(249 245 234 / 0.72)), var(--stipple-tile) 0 0 / 64px 64px, var(--stipple-tile) 23px 11px / 47px 47px, var(--card); }
.btn:disabled::after { opacity: 0; }
.btn:focus-visible { outline: none; text-decoration: underline 2px; text-underline-offset: 5px; }
.btn:focus-visible::after { -webkit-mask-image: none; mask-image: none; }
.btn-go { color: var(--paper); }
.btn-go::before { background: var(--ink); }
.btn-no { color: var(--red); }
.btn-no::before { background: var(--paper); }
/* ---------- app frame: sidebar + room ---------- */
.app { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.side {
position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px;
padding: 18px 14px; background: var(--card); overflow-y: auto;
}
.side::after { /* stippled edge where the sidebar meets the room */
content: ""; position: absolute; top: 0; bottom: 0; right: -8px; width: 8px; background: var(--stipple); pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.7), transparent); mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.7), transparent);
}
.brand { font: 400 24px/1.1 var(--display); padding: 0 6px; }
.side h2 { margin: 14px 10px 4px; font: italic 500 14px/1 var(--body); color: var(--muted); }
.who { margin-top: auto; padding: 0 6px; color: var(--muted); font-style: italic; font-size: 15px; }
.who input {
display: block; width: 100%; margin-top: 4px; padding: 2px 0; font: 500 17px var(--body); color: var(--ink);
background: transparent; border: 0; border-bottom: 2px solid var(--ink);
}
.who input:focus { outline: none; border-bottom-width: 3px; }
/* ---------- nests: rooms, like channels ---------- */
.nests { display: flex; flex-direction: column; gap: 2px; }
.nest-link {
display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
padding: 8px 10px; border: 0; border-radius: var(--corner); background: none; cursor: pointer;
font: 400 17px/1.2 var(--display); color: var(--muted); text-align: left;
}
.nest-link[aria-current="true"] { color: var(--ink); background: rgb(28 25 21 / 0.06); }
.nest-link:focus-visible { outline: none; text-decoration: underline 2px; text-underline-offset: 4px; }
.nest-count:not(:empty) {
padding: 0 7px; border-radius: 999px; background: var(--red); color: var(--paper); font: 700 12px/1.4 var(--body);
}
.new-nest {
align-self: flex-start; margin: 2px 4px 6px; padding: 4px 6px; border: 0; background: none; cursor: pointer;
font: italic 500 15px/1.2 var(--body); color: var(--muted);
}
.new-nest:hover { color: var(--ink); }
.new-nest:focus-visible { outline: none; text-decoration: underline 2px; text-underline-offset: 4px; }
/* ---------- new nest dialog: a card on the page, no outline ---------- */
.nest-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; color: var(--ink); overflow: visible; }
.nest-dialog::backdrop { background: rgb(28 25 21 / 0.25); }
.nest-dialog form { padding: 22px 22px 18px; }
.nest-dialog h2 { margin: 0; font: 400 24px/1.1 var(--display); }
.dialog-sub { margin: 6px 0 16px; color: var(--muted); font-style: italic; font-size: 15px; }
.dialog-field { display: block; color: var(--muted); font-style: italic; font-size: 15px; }
.dialog-field input {
display: block; width: 100%; margin-top: 4px; padding: 2px 0; font: 500 18px var(--body); color: var(--ink);
background: transparent; border: 0; border-bottom: 2px solid var(--ink);
}
.dialog-field input:focus { outline: none; border-bottom-width: 3px; }
.pick { margin: 18px 0 0; padding: 0; border: 0; }
.pick legend { padding: 0; color: var(--muted); font-style: italic; font-size: 15px; }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.pick-crow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--corner); cursor: pointer; font: 400 16px var(--display); }
.pick-crow:has(input:checked) { background: rgb(28 25 21 / 0.07); }
.pick-crow input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.pick-crow .avatar { width: 30px; height: 28px; margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.nest-dialog .err { margin: 10px 0 0; }
/* ---------- roster: one list tile per crow, newest update on top ---------- */
.roster { display: flex; flex-direction: column; gap: 6px; }
.tile {
display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px;
padding: 11px 10px; border-radius: var(--corner);
}
.tile.has-pending { background: rgb(155 47 34 / 0.06); }
.tile-text { min-width: 0; }
.tile-name { margin: 0; font: 400 16px/1.15 var(--display); }
.epithet { font: italic 500 14px/1 var(--body); color: var(--muted); }
.update {
margin: 3px 0 0; font: italic 500 14px/1.3 var(--body); color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.update.waiting { color: var(--red); }
.update.good { color: var(--ink); }
.tile-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.tile-time { margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tile-count:not(:empty) {
padding: 0 7px; border-radius: 999px; background: var(--red); color: var(--paper);
font: 700 12px/1.4 var(--body); white-space: nowrap;
}
.crow { margin: 0; position: relative; }
.crow figcaption { display: none; } /* the tile shows the name */
.crow-body { width: 40px; height: 37px; }
.crow-body svg { display: block; width: 100%; height: 100%; overflow: visible; }
.crow-art .disc, .crow .disc { fill: #b7e4c7; }
.role-sentry .disc { fill: #ffe08a; }
.role-elder .disc { fill: #d6dde6; }
.crow .bird, .crow-art .bird { fill: #000; }
.crow .jaw { transform-origin: 211px 182px; transition: transform 150ms; }
.crow .badge {
position: absolute; top: -4px; right: -6px; width: 14px; height: 14px; fill: var(--card); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round;
opacity: 0; transition: opacity 150ms;
}
.crow[data-trust="1"] .badge { opacity: 1; }
.crow[data-trust="2"] .badge { opacity: 1; fill: var(--ink); }
/* Poses and reactions: motion only, crows never change size. */
.pose-perched .crow-body { animation: breathe 3.2s ease-in-out infinite; }
.pose-flying .crow-body { animation: flap 0.5s ease-in-out infinite alternate; }
.pose-flying .jaw { transform: rotate(-10deg); }
.pose-waiting .crow-body { animation: tilt 1.4s ease-in-out infinite; }
.pose-grounded .crow-body { opacity: 0.4; }
.r-cheer .crow-body { animation: hop 0.8s ease-out; }
.r-cheer .jaw { transform: rotate(14deg); }
.r-sulk .crow-body { animation: droop 0.8s ease-out; }
.r-levelUp .crow-body { animation: levelup 2s ease-out; }
.r-levelUp .jaw { transform: rotate(16deg); }
.r-levelUp::before {
content: ""; position: absolute; top: -8px; left: -4px; width: 56px; height: 30px; z-index: 2; pointer-events: none;
animation: rise 2s ease-out forwards;
background: var(--sparkle) 16px 0 / 22px 22px no-repeat, var(--glint) 0 12px / 10px 10px no-repeat, var(--glint) 42px 8px / 9px 9px no-repeat;
}
.r-levelDown .crow-body { animation: shrug 1s ease-out; }
.r-prank .crow-body { animation: prank 2.5s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.crow *, .crow::before, .crow::after { animation: none !important; transition: none !important; }
}
.tabs { display: none; }
/* ---------- room: header, feed, composer ---------- */
.room { display: grid; grid-template-rows: auto 1fr auto auto; min-width: 0; min-height: 0; }
.room-head { position: relative; padding: 16px 24px 12px; }
.room-head h1 { margin: 0; font: 400 22px/1.1 var(--display); }
.room-sub { margin: 2px 0 0; color: var(--muted); font-style: italic; font-size: 15px; }
.room-head::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; background: var(--stipple); z-index: 1;
-webkit-mask-image: linear-gradient(rgb(0 0 0 / 0.55), transparent); mask-image: linear-gradient(rgb(0 0 0 / 0.55), transparent);
}
.feeds { display: grid; min-height: 0; }
.feed { list-style: none; margin: 0; padding: 20px 0 10px; overflow-y: auto; min-height: 0; }
.feed[hidden] { display: none; }
.msg { display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; padding: 14px 28px; }
@media (hover: hover) { .msg:hover { background: rgb(28 25 21 / 0.03); } }
/* Consecutive messages from one author group under a single name, Slack style. */
.msg.cont { padding-top: 2px; }
.msg.cont > .avatar { visibility: hidden; height: 0; }
.msg.cont .msg-head { display: none; }
.msg.asking { background: rgb(155 47 34 / 0.05); }
.avatar { width: 40px; height: 37px; margin-top: 3px; }
.avatar.you {
display: grid; place-items: center; width: 36px; height: 36px; margin: 3px 2px 0; border-radius: 50%;
background: var(--ink); color: var(--paper); font: 400 18px/1 var(--display);
}
.msg-main { min-width: 0; }
.msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.author { font: 400 17px/1.2 var(--display); }
.tag { font: italic 500 13px/1 var(--body); color: var(--muted); }
.msg-head time { font-size: 13px; color: var(--muted); }
.msg-body p { margin: 4px 0; }
.msg-body ol, .msg-body ul { margin: 4px 0; padding-left: 22px; }
.re { font-style: italic; color: var(--muted); font-size: 15px; }
.plan { font: 400 15px/1.3 var(--display); }
.reason, .with { color: var(--muted); font-style: italic; }
.answer { white-space: pre-wrap; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 6px; }
.actions:empty { display: none; }
.actions .btn { padding: 9px 16px; font-size: 15px; }
.err { flex-basis: 100%; margin: 4px 0 0; color: var(--red); font-size: 15px; }
.err:empty { display: none; }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reactions:empty { display: none; }
.reaction { padding: 1px 10px; border-radius: 999px; background: #ebe3cf; font-size: 14px; }
.reaction.good, .reaction.auto { color: var(--ink); }
.reaction.bad { color: var(--red); }
/* Banter: a quiet aside between crows, smaller and set in from the work. */
.msg.banter { grid-template-columns: 26px 1fr; gap: 0 10px; padding-top: 4px; padding-bottom: 8px; padding-left: 82px; }
.msg.banter .avatar { width: 26px; height: 24px; margin-top: 1px; }
.banter-line { margin: 0; font-size: 15px; }
.banter-who { display: block; font: 400 13px/1.2 var(--display); color: var(--muted); }
.banter-text { font-style: italic; }
@media (max-width: 759px) { .msg.banter { padding-left: 60px; } }
.msg.system { display: block; padding: 12px 28px; text-align: center; color: var(--muted); font-style: italic; font-size: 15px; }
.msg.system p { margin: 0; }
.msg.system.sparkle p::before {
content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px;
background: var(--sparkle) center / contain no-repeat;
}
.typing { margin: 0; min-height: 24px; padding: 2px 24px; color: var(--muted); font-style: italic; font-size: 14px; }
.composer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 12px; padding: 4px 24px 16px; }
.composer .field { padding: 2px; }
.composer textarea {
display: block; width: 100%; max-height: 40vh; padding: 10px 12px; font: 500 17px/1.4 var(--body); color: var(--ink);
resize: vertical; background: transparent; border: 0;
}
.composer textarea:focus { outline: none; }
.composer .field:focus-within::after { -webkit-mask-image: none; mask-image: none; }
.hint { grid-column: 1 / -1; margin: 0; color: var(--muted); font-style: italic; font-size: 13px; }
/* ---------- phones: two tabs, the channel or the flock ---------- */
@media (max-width: 759px) {
.app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.tabs {
position: relative; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 10px 10px 8px 14px; background: var(--card);
}
.tabs::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: var(--stipple); pointer-events: none;
-webkit-mask-image: linear-gradient(rgb(0 0 0 / 0.7), transparent); mask-image: linear-gradient(rgb(0 0 0 / 0.7), transparent);
}
.tabs .brand { margin-right: auto; font-size: 19px; padding: 0; }
.tab { padding: 6px 8px; font: 400 16px/1 var(--display); color: var(--muted); background: none; border: 0; cursor: pointer; }
.tab[aria-pressed="true"] { color: var(--ink); text-decoration: underline 2px; text-underline-offset: 6px; }
.tab:focus-visible { outline: none; text-decoration: underline 3px; text-underline-offset: 6px; }
.tab[data-count]:not([data-count=""])::after {
content: attr(data-count); display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
background: var(--red); color: var(--paper); font: 700 12px/1.3 var(--body); vertical-align: 2px;
}
.side, .room { grid-row: 2; min-width: 0; }
.app[data-view="room"] .side { display: none; }
.app[data-view="flock"] .room { display: none; }
.side { padding: 14px 6px 16px; }
.side::after, .side .brand { display: none; }
.side h2 { margin: 4px 10px 6px; }
.who { padding: 0 10px; }
.room-head { padding: 12px 14px 10px; }
.room-head h1 { font-size: 19px; }
.room-sub { display: none; }
.msg { padding: 12px 16px; gap: 0 12px; grid-template-columns: 34px 1fr; }
.avatar { width: 34px; height: 31px; }
.avatar.you { width: 30px; height: 30px; font-size: 15px; }
.msg.system { padding: 10px 16px; }
.typing { padding: 2px 14px; }
.composer { padding: 4px 12px 12px; }
.hint { display: none; }
}
@keyframes breathe { 50% { transform: translateY(-2px); } }
@keyframes flap { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-8px) rotate(3deg); } }
@keyframes tilt { 50% { transform: rotate(8deg); } }
@keyframes pop { 50% { transform: translateY(-4px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle-sparkle { 50% { transform: scale(1.15) rotate(8deg); } }
@keyframes twinkle { 50% { transform: rotate(-12deg) scale(1.15); } }
@keyframes hop { 35% { transform: translateY(-20px); } 60% { transform: translateY(0); } }
@keyframes droop { 40%, 70% { transform: translateY(6px) rotate(-6deg); } }
@keyframes levelup { 15% { transform: translateY(-14px); } 60% { transform: translateY(-14px) rotate(360deg); } }
@keyframes rise { from { opacity: 1; transform: translateY(0) scale(0.6); } to { opacity: 0; transform: translateY(-30px) scale(1.4); } }
@keyframes shrug { 30% { transform: rotate(-5deg); } 60% { transform: rotate(5deg); } }
@keyframes prank { 25% { transform: translate(-120px, -60px) rotate(-30deg); opacity: 0; } 55% { transform: translate(120px, -60px); opacity: 0; } 80% { transform: none; opacity: 1; } }
Reference in new issue View Git Blame Copy Permalink