7d910acPhase perception 2: subband phase rotation of arbitrary sounds with filter bank, phase maps, plots, and playbackJeremy Magland 1:root {
2 --bg: #f4f5f7;
3 --card: #ffffff;
4 --text: #1c1e21;
5 --muted: #5f646b;
6 --border: #dfe2e6;
7 --accent: #1f5fa8;
8 --ok: #1a7f37;
9 --bad: #b42318;
10 --warn-bg: #fff4e0;
11 --warn: #8a5a00;
12 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
13 color: var(--text);
14 background: var(--bg);
15 line-height: 1.45;
16}
18* {
19 box-sizing: border-box;
20}
22body {
23 margin: 0;
24}
26.app {
27 max-width: 1100px;
28 margin: 0 auto;
29 padding: 16px 16px 48px;
30}
32.app-header h1 {
33 margin: 8px 0 4px;
34 font-size: 1.7rem;
35}
37.app-header p,
38.hint {
39 color: var(--muted);
40 margin: 0 0 14px;
41 max-width: 75em;
42}
44.app-footer {
45 color: var(--muted);
46 font-size: 0.85rem;
47 margin-top: 16px;
48}
50.card {
51 background: var(--card);
52 border: 1px solid var(--border);
53 border-radius: 8px;
54 padding: 14px 16px 16px;
55 margin-bottom: 16px;
56}
58.card h2 {
59 margin: 0 0 10px;
60 font-size: 1.15rem;
61}
63.card.status {
64 color: var(--muted);
65}
67.plot {
68 display: block;
69 width: 100%;
70 background: #fff;
71}
73.line-plot {
74 height: 170px;
75}
77.waveform-plot {
78 height: 130px;
79 margin-top: 6px;
80}
82.spectrogram-plot {
83 height: 240px;
84}
86.spectrograms {
87 display: grid;
88 grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
89 gap: 8px;
90}
92.response-plots {
93 display: grid;
94 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
95 gap: 8px 16px;
96 margin-top: 8px;
97}
99.plot-label {
100 font-size: 0.8rem;
101 color: var(--muted);
102 margin: 10px 0 2px;
103}
105.button-row {
106 display: flex;
107 align-items: center;
108 gap: 8px;
109 flex-wrap: wrap;
110}
112.divider {
113 width: 1px;
114 height: 22px;
115 background: var(--border);
116 margin: 0 4px;
117}
119button {
120 font: inherit;
121 font-size: 0.9rem;
122 padding: 6px 12px;
123 border-radius: 6px;
124 border: 1px solid var(--border);
125 background: #fff;
126 color: var(--text);
127 cursor: pointer;
128}
130button:hover:not(:disabled) {
131 background: #f0f2f5;
132}
134button:disabled {
135 opacity: 0.5;
136 cursor: default;
137}
139button.primary {
140 background: var(--accent);
141 border-color: var(--accent);
142 color: #fff;
143}
145button.primary:hover:not(:disabled) {
146 background: #184c87;
147}
149button.selected {
150 border-color: var(--accent);
151 box-shadow: inset 0 0 0 1px var(--accent);
152 font-weight: 600;
153}
155.playing-indicator {
156 color: var(--muted);
157 font-size: 0.9rem;
158 min-width: 8em;
159}
161.global-controls,
162.zoom-controls {
163 display: flex;
164 flex-wrap: wrap;
165 gap: 10px 24px;
166 align-items: center;
167 margin: 6px 0;
168}
170.global-controls label,
171.zoom-controls label,
172.scrub {
173 display: flex;
174 align-items: center;
175 gap: 8px;
176 font-size: 0.9rem;
177}
179.global-controls label > span:first-child,
180.zoom-controls label > span:first-child,
181.scrub > span:first-child {
182 white-space: nowrap;
183}
185.zoom-controls .grow {
186 flex: 1;
187 min-width: 260px;
188}
190.scrub {
191 margin: 10px 0 4px;
192}
194.scrub input[type='range'] {
195 flex: 1;
196 max-width: 480px;
197}
199.wide-range {
200 width: 220px;
201}
203.info {
204 color: var(--muted);
205 font-size: 0.85rem;
206 white-space: nowrap;
207}
209select {
210 font: inherit;
211 font-size: 0.9rem;
212 padding: 4px 6px;
213 border-radius: 6px;
214 border: 1px solid var(--border);
215 background: #fff;
216}
218input[type='range'] {
219 min-width: 80px;
220 accent-color: var(--accent);
221}
223.slider-value {
224 font: inherit;
225 font-size: 0.85rem;
226 width: 5.5em;
227 padding: 2px 4px;
228 border: 1px solid var(--border);
229 border-radius: 4px;
230}
232.slider-unit {
233 color: var(--muted);
234 font-size: 0.85rem;
235 white-space: nowrap;
236}
238.source-info {
239 margin-top: 10px;
240 font-size: 0.9rem;
241 color: var(--muted);
242}
244.error {
245 color: var(--bad);
246 margin-top: 8px;
247 font-size: 0.9rem;
248}
250.warning {
251 background: var(--warn-bg);
252 color: var(--warn);
253 border-radius: 6px;
254 padding: 8px 10px;
255 margin: 8px 0;
256 font-size: 0.9rem;
257}