1:root {
2 --bg: #f6f5f2;
3 --card: #ffffff;
4 --text: #1c1c1e;
5 --muted: #8a8a8e;
6 --border: #e2e1dd;
7 --accent: #c0392b;
8 --accent-soft: #fdeceb;
9 --btn-bg: #ffffff;
10 --btn-hover: #f0efeb;
11 --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
12}
14@media (prefers-color-scheme: dark) {
15 :root {
16 --bg: #17171a;
17 --card: #212125;
18 --text: #ececee;
19 --muted: #8e8e93;
20 --border: #323236;
21 --accent: #e5695c;
22 --accent-soft: #3a2523;
23 --btn-bg: #29292e;
24 --btn-hover: #323238;
25 --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
26 }
27}
29* { box-sizing: border-box; }
31body {
32 margin: 0;
33 background: var(--bg);
34 color: var(--text);
35 font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
36 line-height: 1.5;
37}
39.page {
40 max-width: 760px;
41 margin: 0 auto;
42 padding: 2.5rem 1.25rem 4rem;
43}
45header { margin-bottom: 1.5rem; }
47h1 {
48 margin: 0;
49 font-size: 1.6rem;
50 font-weight: 700;
51 letter-spacing: -0.02em;
52}
54.tagline {
55 margin: 0.15rem 0 0;
56 color: var(--muted);
57 font-size: 0.95rem;
58}
60.controls {
61 display: flex;
62 align-items: center;
63 gap: 0.6rem;
64 flex-wrap: wrap;
65 margin-bottom: 0.75rem;
66}
68button {
69 font: inherit;
70 font-size: 0.95rem;
71 padding: 0.5rem 1rem;
72 border-radius: 8px;
73 border: 1px solid var(--border);
74 background: var(--btn-bg);
75 color: var(--text);
76 cursor: pointer;
77 box-shadow: var(--shadow);
78 display: inline-flex;
79 align-items: center;
80 gap: 0.5rem;
81}
83button:hover:not(:disabled) { background: var(--btn-hover); }
84button:disabled { opacity: 0.55; cursor: default; }
86button.primary {
87 font-weight: 600;
88 min-width: 7.5rem;
89 justify-content: center;
90}
92button.primary .dot {
93 width: 0.6rem;
94 height: 0.6rem;
95 border-radius: 50%;
96 background: var(--accent);
97 flex: none;
98}
100button.primary.live {
101 border-color: var(--accent);
102 background: var(--accent-soft);
103}
105button.primary.live .dot { animation: pulse 1.6s ease-in-out infinite; }
106button.primary.live.speech .dot { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
108@keyframes pulse {
109 0%, 100% { opacity: 1; }
110 50% { opacity: 0.35; }
111}
113.status {
114 color: var(--muted);
115 font-size: 0.9rem;
116 margin-left: 0.25rem;
117}
119.modelrow {
120 display: flex;
121 align-items: center;
122 gap: 0.5rem;
123 flex-wrap: wrap;
124 margin-bottom: 0.85rem;
125 font-size: 0.85rem;
126 color: var(--muted);
127}
129.modelrow select {
130 font: inherit;
131 font-size: 0.85rem;
132 padding: 0.25rem 0.45rem;
133 border-radius: 6px;
134 border: 1px solid var(--border);
135 background: var(--btn-bg);
136 color: var(--text);
137}
139.hint { font-style: italic; }
141.progress {
142 display: flex;
143 align-items: center;
144 gap: 0.75rem;
145 margin-bottom: 0.75rem;
146 font-size: 0.85rem;
147 color: var(--muted);
148}
150.progress.hidden { display: none; }
152.progress-track {
153 flex: 1;
154 height: 6px;
155 border-radius: 3px;
156 background: var(--border);
157 overflow: hidden;
158}
160.progress-bar {
161 height: 100%;
162 width: 0%;
163 border-radius: 3px;
164 background: var(--accent);
165 transition: width 0.2s;
166}
168.doccard {
169 background: var(--card);
170 border: 1px solid var(--border);
171 border-radius: 12px;
172 box-shadow: var(--shadow);
173 padding: 1rem 1.1rem;
174}
176textarea {
177 display: block;
178 width: 100%;
179 min-height: 45vh;
180 resize: none;
181 border: none;
182 outline: none;
183 background: transparent;
184 color: var(--text);
185 font: inherit;
186 font-size: 1.05rem;
187 line-height: 1.65;
188 padding: 0;
189 overflow: hidden;
190}
192textarea::placeholder { color: var(--muted); opacity: 0.7; }
194.interim {
195 color: var(--muted);
196 font-style: italic;
197 font-size: 1.05rem;
198 line-height: 1.65;
199 min-height: 0;
200 white-space: pre-wrap;
201}
203.interim:empty { display: none; }
205footer {
206 display: flex;
207 justify-content: space-between;
208 margin-top: 0.75rem;
209 color: var(--muted);
210 font-size: 0.85rem;
211}