zzstoatzz.io
visualize bsky quote trends
sites.wisp.place/zzstoatzz.io/quotree
1:root {
2 --bg: #0a0a0f;
3 --bg-raised: #14141f;
4 --bg-overlay: rgba(0, 0, 0, 0.85);
5 --text: #e0e0e8;
6 --text-dim: #888898;
7 --accent: #7c6fe0;
8 --accent-dim: #5a50a8;
9 --border: #2a2a3a;
10 --error: #e06060;
11 --radius: 6px;
12 --font: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
13}
14
15* {
16 box-sizing: border-box;
17 margin: 0;
18 padding: 0;
19}
20
21html, body {
22 background: var(--bg);
23 color: var(--text);
24 font-family: var(--font);
25 font-size: 14px;
26 line-height: 1.5;
27 min-height: 100vh;
28}
29
30#app {
31 max-width: 960px;
32 margin: 0 auto;
33 padding: 2rem 1rem;
34}
35
36a {
37 color: var(--accent);
38 text-decoration: none;
39}
40
41a:hover {
42 text-decoration: underline;
43}
44
45input {
46 font-family: var(--font);
47 background: var(--bg-raised);
48 color: var(--text);
49 border: 1px solid var(--border);
50 border-radius: var(--radius);
51 padding: 0.5rem 0.75rem;
52 font-size: 14px;
53 outline: none;
54}
55
56input:focus {
57 border-color: var(--accent-dim);
58}
59
60input::placeholder {
61 color: var(--text-dim);
62}
63
64button {
65 font-family: var(--font);
66 cursor: pointer;
67 background: var(--accent);
68 color: #fff;
69 border: none;
70 border-radius: var(--radius);
71 padding: 0.5rem 1rem;
72 font-size: 14px;
73}
74
75button:disabled {
76 opacity: 0.4;
77 cursor: not-allowed;
78}
79
80button:not(:disabled):hover {
81 background: var(--accent-dim);
82}
83
84@keyframes pulse {
85 0%, 100% { opacity: 1; }
86 50% { opacity: 0.5; }
87}