80c0b6dPlate dynamics lab: plates in realizable mounts under gravity, explicit finite differences on WebGPUJeremy Magland 1* {
2 box-sizing: border-box;
3}
4html,
5body,
6#root {
7 height: 100%;
8 margin: 0;
9}
10body {
11 font-family: var(--pl-font);
12 color: var(--pl-text);
13 background: #eef0f3;
14 font-size: 13px;
15}
16.app {
17 display: grid;
18 grid-template-rows: auto 1fr;
19 height: 100%;
20}
21.app-header {
22 display: flex;
23 align-items: center;
24 gap: 14px;
25 padding: 8px 14px;
26 background: #fff;
27 border-bottom: 1px solid var(--pl-border);
28 flex-wrap: wrap;
29}
30.app-header h1 {
31 font-size: 16px;
32 margin: 0;
33 font-weight: 650;
34}
35.app-header .sub {
36 color: var(--pl-muted);
37 font-size: 12px;
38}
39.method-picker {
40 display: flex;
41 align-items: center;
42 gap: 8px;
43 margin-left: auto;
44}
45.method-picker .picker-label {
46 font-size: 11px;
47 text-transform: uppercase;
48 letter-spacing: 0.06em;
49 color: var(--pl-muted);
50}
51.mode-tabs {
52 display: flex;
53 gap: 2px;
54 background: var(--pl-panel);
55 border: 1px solid var(--pl-border);
56 border-radius: 6px;
57 padding: 2px;
58}
59.mode-tabs button {
60 font: inherit;
61 padding: 4px 12px;
62 border: 0;
63 background: transparent;
64 border-radius: 4px;
65 cursor: pointer;
66 color: var(--pl-muted);
67}
68.mode-tabs button.active {
69 background: #fff;
70 color: var(--pl-text);
71 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
72}
73.app-body {
74 display: grid;
75 grid-template-columns: 320px minmax(420px, 1fr) minmax(460px, 560px);
76 gap: 10px;
77 padding: 10px;
78 min-height: 0;
79}
80.col {
81 min-height: 0;
82 overflow: auto;
83 display: flex;
84 flex-direction: column;
85 gap: 10px;
86}
87.action-bar {
88 position: sticky;
89 top: 0;
90 z-index: 2;
91 background: #eef0f3;
92 padding-bottom: 6px;
93 display: flex;
94 flex-direction: column;
95 gap: 6px;
96}
97.run-btn {
98 width: 100%;
99 padding: 9px 12px;
100 font-size: 14px;
101 font-weight: 600;
102}
103.action-meta {
104 display: flex;
105 gap: 8px;
106 align-items: center;
107 font-size: 12px;
108 flex-wrap: wrap;
109}
110.col-right {
111 display: grid;
112 grid-template-rows: auto 1fr;
113 gap: 6px;
114 min-height: 0;
115}
116.col-right .pl-code {
117 min-height: 320px;
118}
119.tabs {
120 display: flex;
121 gap: 2px;
122 border-bottom: 1px solid var(--pl-border);
123}
124.tabs button {
125 font: inherit;
126 font-size: 12px;
127 padding: 5px 10px;
128 border: 1px solid transparent;
129 border-bottom: 0;
130 background: transparent;
131 cursor: pointer;
132 color: var(--pl-muted);
133 border-radius: 5px 5px 0 0;
134}
135.tabs button.active {
136 background: #fff;
137 border-color: var(--pl-border);
138 color: var(--pl-text);
139}
140.tab-body {
141 background: #fff;
142 border: 1px solid var(--pl-border);
143 border-top: 0;
144 border-radius: 0 0 6px 6px;
145 padding: 10px;
146 overflow: auto;
147 min-height: 0;
148}
149.results {
150 display: flex;
151 flex-direction: column;
152 gap: 12px;
153}
154.results-toolbar {
155 display: flex;
156 gap: 8px;
157 align-items: center;
158 flex-wrap: wrap;
159 font-size: 12px;
160}
161.two-up {
162 display: grid;
163 grid-template-columns: 1fr 1fr;
164 gap: 10px;
165}
166.modes-table {
167 font-size: 11px;
168 border-collapse: collapse;
169}
170.modes-table td,
171.modes-table th {
172 padding: 1px 8px;
173 text-align: right;
174 border-bottom: 1px solid var(--pl-border);
175}
176.modes-table th:first-child,
177.modes-table td:first-child {
178 text-align: left;
179}
180.banner {
181 padding: 8px 10px;
182 border-radius: 6px;
183 background: var(--pl-warn-bg);
184 border: 1px solid #f1d7a8;
185 font-size: 12px;
186 display: flex;
187 gap: 8px;
188 align-items: center;
189}
190.empty {
191 color: var(--pl-muted);
192 padding: 24px 26px;
193 background: #fff;
194 border: 1px dashed var(--pl-border);
195 border-radius: 6px;
196 max-width: 560px;
197}
198.empty h2 {
199 font-size: 15px;
200 margin: 0 0 8px;
201 color: var(--pl-text);
202 font-weight: 650;
203}
204.empty ol {
205 margin: 0 0 10px;
206 padding-left: 20px;
207 line-height: 1.7;
208}
209.empty p {
210 margin: 0;
211 font-size: 12px;
212}
214/* Left column structure: the problem, then the numerics, then everything else */
215.panel-head {
216 font-size: 11px;
217 text-transform: uppercase;
218 letter-spacing: 0.06em;
219 color: var(--pl-muted);
220 font-weight: 650;
221 margin: 12px 0 6px;
222}
223.panel-head:first-child {
224 margin-top: 0;
225}
226.method-note {
227 font-size: 12px;
228 line-height: 1.45;
229 padding: 8px 10px;
230 background: #fff;
231 border: 1px solid var(--pl-border);
232 border-left: 3px solid var(--pl-accent);
233 border-radius: 5px;
234}
235.plan-line {
236 margin-top: 6px;
237}
238.pl-params + .pl-params,
239.plan-line + .pl-params {
240 margin-top: 10px;
241}
242details.advanced {
243 margin-top: 12px;
244 border-top: 1px solid var(--pl-border);
245 padding-top: 8px;
246}
247details.advanced > summary {
248 font-size: 12px;
249 color: var(--pl-muted);
250 cursor: pointer;
251 margin-bottom: 8px;
252}
253details.advanced > summary:hover {
254 color: var(--pl-accent);
255}
256/* The result on screen is from other settings: the button says so without moving. */
257.run-btn-stale {
258 box-shadow: 0 0 0 3px rgba(31, 95, 168, 0.25);
259}
260kbd {
261 font-family: var(--pl-mono);
262 font-size: 11px;
263 border: 1px solid var(--pl-border);
264 border-bottom-width: 2px;
265 border-radius: 3px;
266 padding: 0 4px;
267 background: #fff;
268}
269@media (max-width: 1250px) {
270 .app-body {
271 grid-template-columns: 300px 1fr;
272 }
273 .col-right {
274 grid-column: 1 / -1;
275 }
276}
277@media (max-width: 800px) {
278 .app-body {
279 grid-template-columns: 1fr;
280 }
281 .col-right {
282 grid-column: auto;
283 }
284}
285.sound-bar {
286 padding: 6px 8px;
287 background: #fff;
288 border: 1px solid var(--pl-border);
289 border-radius: 6px;
290}
291.pair-picker .pl-select {
292 width: auto;
293 flex: 1;
294}
295.tab-intro {
296 margin-bottom: 10px;
297 padding-bottom: 8px;
298 border-bottom: 1px solid var(--pl-border);
299}
301/* Equation groups */
302.eq-group {
303 margin-bottom: 14px;
304}
305.eq-group h3 {
306 font-size: 12px;
307 text-transform: uppercase;
308 letter-spacing: 0.05em;
309 color: var(--pl-muted);
310 margin: 10px 0 6px;
311}