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}
e9f92d1Time-varying random phase maps by decimated subband synthesis; drag-to-zoom, scrollbar pan and zoom buttons for the waveformsJeremy Magland 82.image-plot {
7d910acPhase perception 2: subband phase rotation of arbitrary sounds with filter bank, phase maps, plots, and playbackJeremy Magland 83 height: 240px;
84}
e9f92d1Time-varying random phase maps by decimated subband synthesis; drag-to-zoom, scrollbar pan and zoom buttons for the waveformsJeremy Magland 86.response-plots .image-plot {
87 height: 170px;
88}
90.plot-wrap {
91 position: relative;
92}
94.waveform-plot {
95 cursor: crosshair;
96}
98.select-overlay {
99 position: absolute;
100 background: rgba(31, 95, 168, 0.18);
101 border-left: 1px solid var(--accent);
102 border-right: 1px solid var(--accent);
103 pointer-events: none;
104}
106.scrollbar {
107 overflow-x: auto;
108 overflow-y: hidden;
109 height: 18px;
110 margin: 0 12px 4px 48px;
111}
113.scrollbar > div {
114 height: 1px;
115}
117.phase-legend {
118 display: inline-block;
119 width: 90px;
120 height: 9px;
121 vertical-align: middle;
122 margin: 0 4px 0 8px;
123 border-radius: 2px;
124 background: linear-gradient(90deg, hsl(0 60% 55%), hsl(60 60% 55%), hsl(120 60% 55%), hsl(180 60% 55%), hsl(240 60% 55%), hsl(300 60% 55%), hsl(360 60% 55%));
125}
127.global-controls input[type='checkbox'] {
128 accent-color: var(--accent);
129}
7d910acPhase perception 2: subband phase rotation of arbitrary sounds with filter bank, phase maps, plots, and playbackJeremy Magland 131.spectrograms {
132 display: grid;
133 grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
134 gap: 8px;
135}
137.response-plots {
138 display: grid;
139 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
140 gap: 8px 16px;
141 margin-top: 8px;
142}
144.plot-label {
145 font-size: 0.8rem;
146 color: var(--muted);
147 margin: 10px 0 2px;
148}
150.button-row {
151 display: flex;
152 align-items: center;
153 gap: 8px;
154 flex-wrap: wrap;
155}
157.divider {
158 width: 1px;
159 height: 22px;
160 background: var(--border);
161 margin: 0 4px;
162}
164button {
165 font: inherit;
166 font-size: 0.9rem;
167 padding: 6px 12px;
168 border-radius: 6px;
169 border: 1px solid var(--border);
170 background: #fff;
171 color: var(--text);
172 cursor: pointer;
173}
175button:hover:not(:disabled) {
176 background: #f0f2f5;
177}
179button:disabled {
180 opacity: 0.5;
181 cursor: default;
182}
184button.primary {
185 background: var(--accent);
186 border-color: var(--accent);
187 color: #fff;
188}
190button.primary:hover:not(:disabled) {
191 background: #184c87;
192}
194button.selected {
195 border-color: var(--accent);
196 box-shadow: inset 0 0 0 1px var(--accent);
197 font-weight: 600;
198}
200.playing-indicator {
201 color: var(--muted);
202 font-size: 0.9rem;
203 min-width: 8em;
204}
7886a79Waveforms: wheel zoom, drag pan, double-click reset, shared view marked on the spectrogramsJeremy Magland 206.view-controls {
207 display: flex;
208 align-items: center;
209 flex-wrap: wrap;
210 gap: 8px 16px;
211 margin: 10px 0 2px;
212}
214.spacer {
215 flex: 1;
216}
218button.small {
219 font-size: 0.8rem;
220 padding: 4px 10px;
221}
7d910acPhase perception 2: subband phase rotation of arbitrary sounds with filter bank, phase maps, plots, and playbackJeremy Magland 223.global-controls,
224.zoom-controls {
225 display: flex;
226 flex-wrap: wrap;
227 gap: 10px 24px;
228 align-items: center;
229 margin: 6px 0;
230}
232.global-controls label,
233.zoom-controls label,
234.scrub {
235 display: flex;
236 align-items: center;
237 gap: 8px;
238 font-size: 0.9rem;
239}
241.global-controls label > span:first-child,
242.zoom-controls label > span:first-child,
243.scrub > span:first-child {
244 white-space: nowrap;
245}
247.zoom-controls .grow {
248 flex: 1;
249 min-width: 260px;
250}
252.scrub {
253 margin: 10px 0 4px;
254}
256.scrub input[type='range'] {
257 flex: 1;
258 max-width: 480px;
259}
261.wide-range {
262 width: 220px;
263}
265.info {
266 color: var(--muted);
267 font-size: 0.85rem;
268 white-space: nowrap;
269}
271select {
272 font: inherit;
273 font-size: 0.9rem;
274 padding: 4px 6px;
275 border-radius: 6px;
276 border: 1px solid var(--border);
277 background: #fff;
278}
280input[type='range'] {
281 min-width: 80px;
282 accent-color: var(--accent);
283}
285.slider-value {
286 font: inherit;
287 font-size: 0.85rem;
288 width: 5.5em;
289 padding: 2px 4px;
290 border: 1px solid var(--border);
291 border-radius: 4px;
292}
294.slider-unit {
295 color: var(--muted);
296 font-size: 0.85rem;
297 white-space: nowrap;
298}
300.source-info {
301 margin-top: 10px;
302 font-size: 0.9rem;
303 color: var(--muted);
304}
306.error {
307 color: var(--bad);
308 margin-top: 8px;
309 font-size: 0.9rem;
310}
312.warning {
313 background: var(--warn-bg);
314 color: var(--warn);
315 border-radius: 6px;
316 padding: 8px 10px;
317 margin: 8px 0;
318 font-size: 0.9rem;
319}