/* 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; } }