e01df49Embeddable <toy-instrument-sim> widget (src/embed.ts): 3D model, replay and audio from the shared cache, or run in the browser and stored with the passcode; cache results as light and frames entries (CACHE_VERSION 2); instrument configs and link settings shared by the page and the widgetJeremy Magland 1/* Styles of the embedded widget (src/embed.ts), on top of style.css. The widget takes the
2 host page's colors and font when it defines jeremy.magland.org's variables (--bg, --text,
3 --text-muted, --border, --link, --bg-code, --font-ui), with the app's colors otherwise.
4 Names the two share (--border, --text-muted) go through --tis-* on the host first, since a
5 property cannot refer to itself. */
7:host {
8 display: block;
9 margin: 1.5em 0;
10 --tis-bg: var(--bg, #fcfcfb);
11 --tis-code: var(--bg-code, #f4f3f0);
12 --tis-text: var(--text, #0b0b0b);
13 --tis-muted: var(--text-muted, #77756f);
14 --tis-border: var(--border, #e2e0da);
15 --tis-link: var(--link, #2a78d6);
16}
17.tis {
18 --surface-1: var(--tis-bg);
19 --page: var(--tis-code);
20 --text-primary: var(--tis-text);
21 --text-secondary: var(--tis-muted);
22 --text-muted: var(--tis-muted);
23 --border: var(--tis-border);
24 --accent: var(--tis-link);
25 --accent-ink: var(--tis-bg);
26 --series-1: #2a78d6;
27 --series-2: #eb6834;
28 --series-3: #1baf7a;
29 font: 14px/1.45 var(--font-ui, system-ui, -apple-system, 'Segoe UI', sans-serif);
30 color: var(--text-primary);
31 background: var(--surface-1);
32 border: 1px solid var(--border);
33 border-radius: 10px;
34 padding: 12px;
35}
36.tis.dark {
37 --series-1: #3987e5;
38 --series-2: #d95926;
39 --series-3: #199e70;
40}
41.scene-wrap { height: 340px; }
42@media (max-width: 600px) { .scene-wrap { height: 260px; } }
43.status { margin: 10px 0 0; color: var(--text-secondary); font-size: 13px; }
44.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
45.actions:empty { display: none; }
46.audio-row { margin-top: 10px; }
47.error { color: #b42d2c; font-size: 13px; margin: 8px 0 0; }
48.tis.dark .error { color: #e66767; }
49.cache-ctl { font-size: 12px; margin-top: 10px; }
50.cache-ctl input { width: auto; flex: 1; }