@supersuit/session-player 0.0.0-stage → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +71 -0
  2. package/LICENSE +21 -0
  3. package/README.md +98 -2
  4. package/bin/simulator.mjs +117 -0
  5. package/package.json +55 -4
  6. package/src/bundle.mjs +56 -0
  7. package/src/convert.mjs +311 -0
  8. package/src/device.mjs +105 -0
  9. package/src/embed.mjs +45 -0
  10. package/src/index.mjs +7 -0
  11. package/src/playback.mjs +126 -0
  12. package/src/player-css.mjs +298 -0
  13. package/src/player.mjs +493 -0
  14. package/src/recast.mjs +87 -0
  15. package/src/scenario.mjs +80 -0
  16. package/src/serve.mjs +57 -0
  17. package/src/tidy.mjs +105 -0
package/src/player-css.mjs ADDED
@@ -0,0 +1,298 @@
1
+ // Scoped styles for the player, in the getfreedom palette. Every class is ss- prefixed so the
2
+ // player can be dropped into any page (the wiki, a book reader) without colliding.
3
+ export const PLAYER_CSS = `
4
+ .ss-sim{--ss-ink:#1E1B19;--ss-cream:#F6E7C5;--ss-paper:#FBF5E7;--ss-tomato:#DB371F;--ss-petrol:#265E72;--ss-mustard:#E9A23B;--ss-sand:#EED79E;--ss-aqua:#69B1B5;
5
+ position:relative;container:ss-sim/inline-size;font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--ss-ink);width:100%;max-width:1040px;margin:0 auto;-webkit-text-size-adjust:100%}
6
+ .ss-sim *{box-sizing:border-box}
7
+ .ss-sim button{font:inherit;color:inherit;cursor:pointer}
8
+ .ss-stage{display:grid;grid-template-columns:1fr;gap:16px}
9
+ .ss-phone{position:relative;display:flex;flex-direction:column;height:var(--ss-height,min(760px,calc(100svh - 120px)));min-height:480px;background:var(--ss-paper);border:1px solid #e6d7b4;border-radius:28px;overflow:hidden;box-shadow:0 10px 40px rgba(30,27,25,.12)}
10
+ .ss-head{display:flex;align-items:center;gap:10px;padding:14px 14px 10px;border-bottom:1px solid #eadcbc;background:#fffaf0}
11
+ .ss-back{border:0;background:none;font-size:28px;line-height:1;padding:0 4px}
12
+ .ss-avatar{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ss-petrol);color:var(--ss-cream);display:grid;place-items:center;font-weight:700}
13
+ .ss-titles{flex:1;min-width:0;display:flex;flex-direction:column}
14
+ .ss-titles b{font-family:Fraunces,Georgia,serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
15
+ .ss-titles small{color:#7a6d5a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
16
+ .ss-auto{display:flex;align-items:center;gap:4px;font-size:12px;color:#7a6d5a}
17
+ .ss-moment{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:16px 18px;overflow-y:auto;animation:ss-in .35s ease-out}
18
+ .ss-moment>*{flex:none}
19
+ .ss-mcount{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
20
+ .ss-mcmd{margin:0;font-size:14px;opacity:.75;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
21
+ .ss-mbig{margin:auto 0;font-size:clamp(16px,2.6cqi,22px);line-height:1.3;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;animation:ss-in .4s ease-out}
22
+ .ss-mwork{margin:auto 0;opacity:.6;font-size:15px}
23
+ .ss-mticks{list-style:none;margin:0;padding:8px 0 0;border-top:1px dashed rgba(127,127,127,.35);display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px}
24
+ .ss-mticks li{position:relative;padding-left:20px}
25
+ .ss-mticks li::before{content:"\\2713";position:absolute;left:0;color:#2f8f5b;font-weight:800}
26
+ .ss-mticks li.ss-new{font-weight:700;animation:ss-in .4s ease-out}
27
+ .ss-tick{display:flex;gap:10px;align-items:flex-start;animation:ss-in .35s ease-out}
28
+ .ss-check{flex:none;width:22px;height:22px;border-radius:50%;background:#2f8f5b;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
29
+ .ss-handled{text-align:left;margin:10px 0 4px}
30
+ .ss-handled small{display:block;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:11px;color:#7a6d5a;margin-bottom:4px}
31
+ .ss-handled ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
32
+ .ss-handled li{position:relative;padding-left:24px;opacity:0;animation:ss-in .3s ease-out forwards;animation-delay:calc(var(--i) * 180ms)}
33
+ .ss-handled li::before{content:"\\2713";position:absolute;left:0;top:0;color:#2f8f5b;font-weight:800}
34
+ .ss-counter{display:flex;justify-content:space-between;gap:8px;padding:8px 14px;background:var(--ss-ink);color:var(--ss-cream);font-size:13px;font-variant-numeric:tabular-nums}
35
+ .ss-counter b{color:var(--ss-mustard)}
36
+ .ss-log-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
37
+ .ss-log{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
38
+ .ss-intro{color:#7a6d5a;text-align:center;margin:auto 12px}
39
+ .ss-cmd-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-top:6px}
40
+ .ss-cmd{max-width:84%;background:var(--ss-petrol);color:#fff;padding:9px 13px;border-radius:18px 18px 4px 18px;white-space:pre-wrap;overflow-wrap:anywhere}
41
+ .ss-redirect{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ss-tomato)}
42
+ .ss-reply{max-width:92%;overflow-wrap:anywhere}
43
+ .ss-reply p{margin:2px 0 0;white-space:pre-wrap}
44
+ .ss-who{font-size:11px;font-weight:700;color:var(--ss-tomato);letter-spacing:.04em;text-transform:uppercase}
45
+ .ss-more{border:0;background:none;padding:0;color:var(--ss-petrol);font-size:13px;text-decoration:underline}
46
+ .ss-step{display:flex;align-items:baseline;gap:8px;font-size:13px;color:#4a4238;animation:ss-in .25s ease-out}
47
+ .ss-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ss-tomato);transform:translateY(-1px)}
48
+ .ss-group .ss-dot{background:#c9b48c}
49
+ .ss-group .ss-label{color:#8a7d68}
50
+ .ss-label{flex:1;min-width:0;overflow-wrap:anywhere}
51
+ .ss-dur{flex:none;font-size:12px;color:#8a7d68;font-variant-numeric:tabular-nums}
52
+ .ss-sheet{flex:none;max-height:72%;overflow-y:auto;background:#fffaf0;border-top:1px solid #e3cf9f;border-radius:20px 20px 0 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(30,27,25,.12);font-size:13px;animation:ss-up .28s ease-out}
53
+ .ss-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:8px;scrollbar-width:none}
54
+ .ss-tab{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid #e3cf9f;color:#8a7d68;border-radius:999px;padding:2px 9px}
55
+ .ss-tab.ss-tab-done{background:#e8f1f3;border-color:#bcd5db;color:var(--ss-petrol)}
56
+ .ss-tab.ss-tab-now{background:var(--ss-petrol);border-color:var(--ss-petrol);color:#fff}
57
+ .ss-sheet .ss-q{margin:4px 0 10px;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
58
+ .ss-sheet .ss-opts{display:flex;flex-direction:column;gap:6px}
59
+ .ss-sim .ss-sheet button.ss-opt:disabled{cursor:default}
60
+ .ss-asking{font-size:13px;color:var(--ss-petrol);font-weight:600;animation:ss-blink 1.4s infinite}
61
+ .ss-asked{border-left:3px solid var(--ss-mustard);background:#fff8e8;border-radius:6px;padding:8px 10px;font-size:13px;animation:ss-in .25s ease-out}
62
+ .ss-aq+.ss-aq{margin-top:6px}
63
+ .ss-asked .ss-q{margin:0;color:#4a4238;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
64
+ .ss-asked .ss-a{margin:2px 0 0;font-weight:700;overflow-wrap:anywhere}
65
+ .ss-mine{margin:1px 0 0;color:#a86a00;font-size:12px}
66
+ @keyframes ss-up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
67
+ .ss-board{background:#fff;border:1px solid #e3cf9f;border-radius:14px;padding:10px 12px;font-size:13px;box-shadow:0 2px 10px rgba(30,27,25,.06);animation:ss-in .25s ease-out}
68
+ .ss-board .ss-bq+.ss-bq{margin-top:10px;padding-top:10px;border-top:1px dashed #eadcbc}
69
+ .ss-bhead{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--ss-sand);border-radius:999px;padding:1px 8px}
70
+ .ss-board .ss-q{margin:6px 0 8px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
71
+ .ss-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
72
+ .ss-opt{display:flex;gap:8px;align-items:flex-start;border:1px solid #eadcbc;border-radius:10px;padding:6px 8px;color:#6b6052}
73
+ .ss-opt b{display:block;font-weight:600;color:var(--ss-ink);overflow-wrap:anywhere}
74
+ .ss-opt small{display:block;color:#8a7d68;overflow-wrap:anywhere}
75
+ .ss-onum{flex:none;width:20px;height:20px;border-radius:50%;background:#f1e6cc;display:grid;place-items:center;font-size:11px;font-weight:700}
76
+ .ss-sim button.ss-opt{width:100%;text-align:left;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
77
+ .ss-sim button.ss-opt:hover,.ss-sim button.ss-opt:focus-visible{border-color:var(--ss-petrol);background:#f3f8f9;outline:none}
78
+ .ss-live-board{border-color:var(--ss-petrol);box-shadow:0 0 0 3px rgba(38,94,114,.15)}
79
+ .ss-sim .ss-opt.ss-yours,.ss-sim button.ss-opt.ss-yours{border-color:var(--ss-mustard);background:#fff4dc}
80
+ .ss-verdict{min-height:1.4em;margin:8px 0 0;font-size:13px;color:#a86a00}
81
+ .ss-verdict.ss-same{color:var(--ss-petrol);font-weight:600}
82
+ .ss-sim .ss-opt.ss-chosen,.ss-sim button.ss-opt.ss-chosen{border-color:var(--ss-petrol);background:#e8f1f3}
83
+ .ss-opt.ss-chosen .ss-onum{background:var(--ss-petrol);color:#fff}
84
+ .ss-dismissed .ss-opt{opacity:.55}
85
+ .ss-bfoot{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
86
+ .ss-decision{border-left:3px solid var(--ss-mustard);background:#fff4dc;padding:8px 10px;border-radius:6px;font-size:13px;animation:ss-in .25s ease-out}
87
+ .ss-decision p{margin:2px 0}
88
+ .ss-tag{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#a86a00}
89
+ .ss-a{font-weight:700}
90
+ .ss-made{align-self:flex-start;font-size:13px;background:#e3f0f0;border-radius:999px;padding:3px 10px;overflow-wrap:anywhere;animation:ss-in .25s ease-out}
91
+ .ss-made span{font-weight:700;color:var(--ss-petrol)}
92
+ .ss-typing{display:flex;gap:4px;padding:4px 2px}
93
+ .ss-typing i{width:6px;height:6px;border-radius:50%;background:#c9b48c;animation:ss-blink 1s infinite}
94
+ .ss-typing i:nth-child(2){animation-delay:.15s}.ss-typing i:nth-child(3){animation-delay:.3s}
95
+ .ss-composer{display:flex;gap:8px;align-items:stretch;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #eadcbc;background:#fffaf0}
96
+ .ss-chip{flex:1;min-width:0;text-align:left;border:1px solid var(--ss-petrol);background:#fff;border-radius:16px;padding:8px 12px;display:flex;flex-direction:column;gap:1px;overflow-wrap:anywhere}
97
+ .ss-chip small{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ss-petrol)}
98
+ .ss-chip:disabled{opacity:.55;cursor:default}
99
+ .ss-sim .ss-mic{flex:none;align-self:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--ss-tomato);color:#fff;font-size:20px;touch-action:none;-webkit-user-select:none;user-select:none}
100
+ .ss-mic:disabled{opacity:.4}
101
+ .ss-sim .ss-send{flex:none;align-self:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--ss-petrol);color:#fff;font-size:20px;font-weight:700}
102
+ .ss-send:disabled{opacity:.35}
103
+ .ss-term .ss-send{background:#5c5751}
104
+ .ss-mic.ss-live{animation:ss-pulse 1s infinite}
105
+ .ss-end{flex:1;display:flex;flex-direction:column;gap:8px}
106
+ .ss-end p{margin:0;font-size:14px}
107
+ .ss-sim .ss-tray-handle{position:absolute;z-index:2;right:12px;bottom:10px;border:0;border-radius:999px;background:var(--ss-ink);color:var(--ss-cream);padding:6px 12px;font-size:13px;display:flex;gap:6px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
108
+ .ss-tray{position:absolute;left:0;right:0;bottom:0;max-height:85%;overflow-y:auto;background:#fffaf0;border-top:1px solid #eadcbc;border-radius:20px 20px 0 0;padding:16px 14px 56px;box-shadow:0 -8px 30px rgba(0,0,0,.15)}
109
+ .ss-panel{display:none}
110
+ .ss-artifact-list{display:flex;flex-direction:column;gap:8px}
111
+ .ss-artifact{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #eadcbc;border-radius:10px;padding:8px 10px;animation:ss-in .3s ease-out}
112
+ .ss-kind{flex:none;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:var(--ss-sand)}
113
+ .ss-kind.ss-link{background:var(--ss-aqua);color:#fff}
114
+ .ss-kind.ss-other{background:var(--ss-tomato);color:#fff}
115
+ .ss-atitle{min-width:0;overflow-wrap:anywhere;font-size:14px}
116
+ .ss-empty{color:#8a7d68;font-size:14px;margin:0}
117
+ .ss-timeline{grid-column:1/-1;padding:4px 2px}
118
+ .ss-track{display:flex;align-items:center;gap:1px;height:12px}
119
+ .ss-seg{height:100%;border-radius:2px;min-width:2px}
120
+ .ss-seg.ss-human{background:var(--ss-petrol)}
121
+ .ss-seg.ss-ask{background:var(--ss-mustard)}
122
+ .ss-seg.ss-agent{background:#efc2b8}
123
+ .ss-seg.ss-agent.ss-past{background:var(--ss-tomato)}
124
+ .ss-seg.ss-now{outline:2px solid var(--ss-ink);outline-offset:1px}
125
+ .ss-legend{display:flex;gap:14px;font-size:12px;color:#7a6d5a;margin-top:6px;flex-wrap:wrap}
126
+ .ss-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
127
+ .ss-legend i.ss-human{background:var(--ss-petrol)}.ss-legend i.ss-ask{background:var(--ss-mustard)}.ss-legend i.ss-agent{background:var(--ss-tomato)}
128
+ .ss-picker{display:flex;flex-direction:column;gap:10px;padding:8px}
129
+ .ss-picker h2{font-family:Fraunces,Georgia,serif;margin:0 0 6px}
130
+ .ss-persona{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid #eadcbc;background:var(--ss-paper);border-radius:14px;padding:12px}
131
+ @container ss-sim (min-width:760px){
132
+ .ss-stage.ss-has-panel{grid-template-columns:minmax(360px,420px) 1fr}
133
+ .ss-has-panel .ss-tray-handle,.ss-has-panel .ss-tray{display:none}
134
+ .ss-panel{display:flex;flex-direction:column;gap:10px;align-self:start;max-height:760px;overflow-y:auto;padding:16px;background:#fffaf0;border:1px solid #eadcbc;border-radius:20px}
135
+ .ss-panel h3{display:flex;justify-content:space-between;margin:0;font-family:Fraunces,Georgia,serif}
136
+ .ss-panel h3 span{font-family:inherit;color:var(--ss-tomato)}
137
+ }
138
+ .ss-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;animation:ss-in .3s ease-out}
139
+ .ss-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin:0 0 8px}
140
+ .ss-cmd-wrap .ss-strip{justify-content:flex-end;margin:0}
141
+ .ss-sim .ss-thumb{position:relative;border:0;padding:0;background:#e9dcc0;border-radius:8px;overflow:hidden;aspect-ratio:1;display:block}
142
+ .ss-strip .ss-thumb{flex:none;width:72px}
143
+ .ss-thumb img{width:100%;height:100%;object-fit:cover;display:block}
144
+ .ss-thumb span{position:absolute;left:0;right:0;bottom:0;font-size:10px;line-height:1.2;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));padding:10px 5px 4px;text-align:left}
145
+ .ss-sim .ss-lightbox{position:absolute;inset:0;z-index:50;border:0;padding:16px;background:rgba(20,18,16,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
146
+ .ss-lightbox img{max-width:100%;max-height:80%;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
147
+ .ss-lightbox span{color:#f6e7c5;font-size:14px}
148
+ .ss-oimg{flex:none;width:52px;height:52px;border-radius:8px;object-fit:cover}
149
+ .ss-aimg{width:28px;height:28px;border-radius:5px;object-fit:cover;vertical-align:middle;margin-right:6px}
150
+ .ss-close-wrap{position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(30,27,25,.45);padding:12px;animation:ss-fade .3s ease-out}
151
+ .ss-close{position:relative;overflow:hidden;width:100%;max-width:440px;max-height:100%;overflow-y:auto;background:#fffaf0;border-radius:24px;padding:22px 20px 18px;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:ss-up .4s cubic-bezier(.2,.9,.3,1.2)}
152
+ .ss-burst{position:absolute;left:50%;top:26px;width:0;height:0;pointer-events:none}
153
+ .ss-burst i{position:absolute;width:7px;height:7px;border-radius:2px;background:var(--ss-mustard);transform:rotate(calc(var(--i) * 25.7deg)) translateY(0);animation:ss-pop 1.1s ease-out forwards;opacity:0}
154
+ .ss-burst i:nth-child(3n){background:var(--ss-tomato)}.ss-burst i:nth-child(3n+1){background:var(--ss-aqua)}
155
+ .ss-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ss-tomato);text-align:center}
156
+ .ss-close-tight{padding:14px 16px 12px}
157
+ .ss-close-tight h3{font-size:clamp(16px,2.6cqi,20px)!important;margin:2px 0 8px!important}
158
+ .ss-close-tight .ss-handled li{font-size:12.5px;line-height:1.35}
159
+ .ss-close-tight .ss-split{display:none}
160
+ .ss-close h3{font-family:Fraunces,Georgia,serif;font-size:24px;margin:4px 0 14px;text-align:center}
161
+ .ss-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
162
+ .ss-split>div{background:#fff;border:1px solid #eadcbc;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:1px}
163
+ .ss-split>div:first-child{background:var(--ss-ink);border-color:var(--ss-ink);color:var(--ss-cream)}
164
+ .ss-split b{font-size:22px;font-family:Fraunces,Georgia,serif}
165
+ .ss-split>div:first-child b{color:var(--ss-mustard)}
166
+ .ss-split small{font-size:12px;opacity:.8}
167
+ .ss-freed{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#e8f1f3;color:var(--ss-petrol);font-weight:600;font-size:14px}
168
+ .ss-edge{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#fff4dc;border:1px solid #f0d89a;font-size:14px}
169
+ .ss-edge b{font-size:18px;color:#a86a00}
170
+ .ss-layers{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
171
+ .ss-layers span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#fff;border:1px solid #f0d89a;border-radius:999px;padding:1px 8px}
172
+ .ss-close-made small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a7d68}
173
+ .ss-close-made ul{margin:4px 0 10px;padding-left:18px;font-size:14px}
174
+ .ss-idle{font-size:12px;color:#8a7d68;margin:0 0 12px}
175
+ .ss-close-actions{display:flex;gap:8px}
176
+ .ss-close-actions .ss-chip{text-align:center;font-weight:700;align-items:center}
177
+ .ss-sim .ss-ghost{border-color:#d9c79f;background:transparent}
178
+ @keyframes ss-fade{from{opacity:0}to{opacity:1}}
179
+ @keyframes ss-pop{0%{opacity:1;transform:rotate(calc(var(--i) * 25.7deg)) translateY(0)}100%{opacity:0;transform:rotate(calc(var(--i) * 25.7deg)) translateY(-90px)}}
180
+ @keyframes ss-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
181
+ @keyframes ss-blink{0%,100%{opacity:.3}50%{opacity:1}}
182
+ @keyframes ss-pulse{0%,100%{box-shadow:0 0 0 0 rgba(219,55,31,.5)}50%{box-shadow:0 0 0 10px rgba(219,55,31,0)}}
183
+ /* Device framing (device.mjs). The bar sits outside the device: what is simulated, and the switch. */
184
+ .ss-devicebar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 8px;min-height:26px;font-size:12px;color:#7a6d5a}
185
+ .ss-simlabel{letter-spacing:.02em}
186
+ .ss-simpill{background:var(--ss-ink);color:var(--ss-cream);border-radius:999px;padding:3px 10px;font-weight:600;white-space:nowrap}
187
+ .ss-devswitch{display:inline-flex;border:1px solid #e3cf9f;border-radius:999px;padding:2px;background:#fffaf0}
188
+ .ss-sim .ss-devopt{border:0;background:none;border-radius:999px;padding:2px 9px;font-size:12px;color:#7a6d5a;line-height:18px}
189
+ .ss-sim .ss-devopt[aria-checked="true"]{background:var(--ss-petrol);color:#fff}
190
+ .ss-sim .ss-devopt:focus-visible{outline:2px solid var(--ss-petrol);outline-offset:1px}
191
+ .ss-frame-iphone,.ss-frame-macbook{justify-items:center}
192
+ /* The iPhone: drawn in CSS, sized from the height it is given and never wider than its column. */
193
+ .ss-iphone{--ss-dh:var(--ss-height,min(820px,calc(100svh - 110px)));position:relative;height:min(var(--ss-dh),calc(100cqw * 2.09));aspect-ratio:414/868;max-width:100%;container-type:size;padding:2.9%;background:#121212;border-radius:13.5%/6.45%;box-shadow:0 0 0 1.5px #3b3b3d,0 0 0 4px #1b1b1c,0 24px 60px rgba(30,27,25,.28)}
194
+ .ss-iphone>.ss-phone{height:100%;min-height:0;border:0;border-radius:11cqw;box-shadow:none}
195
+ .ss-btn{position:absolute;width:3px;background:#2b2b2d;border-radius:2px}
196
+ .ss-btn-a{left:-5px;top:16%;height:3.6%}.ss-btn-v1{left:-5px;top:23%;height:7%}.ss-btn-v2{left:-5px;top:31.5%;height:7%}.ss-btn-p{right:-5px;top:26%;height:10.5%}
197
+ .ss-status{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:12.5cqw;padding:0 6.5cqw;background:#fffaf0;font-weight:600;font-size:4.1cqw;color:var(--ss-ink)}
198
+ .ss-island{width:31cqw;height:9.2cqw;border-radius:999px;background:#000}
199
+ .ss-status-icons{justify-self:end;display:flex;gap:1.6cqw;align-items:center}
200
+ .ss-status-icons svg{height:3.2cqw;width:auto;fill:currentColor}
201
+ .ss-frame-iphone .ss-head{padding-top:4px}
202
+ /* The MacBook: lid, screen with a menu bar and a Claude Code window, base. Fluid: the window
203
+ reflows at the width it gets rather than shrinking text. */
204
+ .ss-mac{--ss-dh:var(--ss-height,min(820px,calc(100svh - 110px)));width:min(92%,calc((var(--ss-dh) - 16px) * 1.54));margin:0 auto}
205
+ .ss-mac-lid{position:relative;aspect-ratio:1.54;padding:1.6% 1.6% 2.4%;background:#0e0e10;border-radius:18px 18px 8px 8px;box-shadow:0 0 0 1.5px #3c3c40,0 24px 60px rgba(30,27,25,.25)}
206
+ .ss-mac-screen{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:6px;background:linear-gradient(140deg,#265E72 0%,#69B1B5 42%,#EED79E 72%,#E9A23B 88%,#DB371F 100%)}
207
+ .ss-mac-notch{position:absolute;z-index:2;left:50%;top:0;width:11%;height:22px;transform:translateX(-50%);background:#0e0e10;border-radius:0 0 7px 7px}
208
+ .ss-menubar{flex:none;display:flex;align-items:center;gap:14px;height:24px;padding:0 12px;overflow:hidden;white-space:nowrap;font:12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:#1e1b19;background:rgba(251,245,231,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
209
+ .ss-menu-mark{width:11px;height:11px;border-radius:50%;background:var(--ss-ink)}
210
+ .ss-menu-right{margin-left:auto;display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
211
+ .ss-menu-right svg{fill:currentColor}
212
+ .ss-mac-base{position:relative;width:108%;margin-left:-4%;height:16px;background:linear-gradient(#e4e4e8,#b4b4ba 70%,#8e8e95);border-radius:0 0 50% 50%/0 0 14px 14px}
213
+ .ss-mac-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:6px;transform:translateX(-50%);background:#a2a2a8;border-radius:0 0 8px 8px}
214
+ .ss-window{container:ss-sim/inline-size;display:flex;flex-direction:column;overflow:hidden;border-radius:10px;background:#1a1918;border:1px solid rgba(0,0,0,.55);box-shadow:0 18px 50px rgba(0,0,0,.4)}
215
+ .ss-mac-screen>.ss-window{flex:1;min-height:0;margin:3% 3.5% 3.5%}
216
+ .ss-titlebar{flex:none;display:flex;align-items:center;gap:10px;height:28px;padding:0 10px;background:#2b2927;border-bottom:1px solid #111;color:#bdb6ab;font:12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
217
+ .ss-traffic{display:flex;gap:7px}
218
+ .ss-traffic i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
219
+ .ss-traffic i:nth-child(2){background:#febc2e}.ss-traffic i:nth-child(3){background:#28c840}
220
+ .ss-wtitle{flex:1;text-align:center;font-weight:600;margin-right:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
221
+ .ss-in-window{flex:1;min-height:0;gap:0;grid-template-rows:minmax(0,1fr)}
222
+ .ss-in-window>.ss-phone{height:100%;min-height:0;border:0;border-radius:0;box-shadow:none}
223
+ @container ss-sim (min-width:760px){
224
+ .ss-in-window.ss-has-panel{grid-template-columns:minmax(0,1fr) minmax(220px,32%)}
225
+ .ss-in-window .ss-panel{max-height:none;height:100%;border-radius:0;border-width:0 0 0 1px;background:#201e1c;border-color:#33302d;color:#e6e1d9}
226
+ }
227
+ /* Too narrow for a believable laptop (a book column, a sidebar): the MacBook keeps its window
228
+ and its label and drops the lid, menu bar and base, rather than shrinking into a toy. */
229
+ @container ss-sim (max-width:559px){
230
+ .ss-mac{width:100%}
231
+ .ss-mac-lid{aspect-ratio:auto;height:var(--ss-dh);padding:0;background:none;box-shadow:none;border-radius:0}
232
+ .ss-mac-screen{background:none;border-radius:0;overflow:visible}
233
+ .ss-menubar,.ss-mac-notch,.ss-mac-base{display:none}
234
+ .ss-mac-screen>.ss-window{margin:0}
235
+ }
236
+ .ss-window-compact{width:100%}
237
+ .ss-window-compact>.ss-phone{height:calc(var(--ss-height,min(760px,calc(100svh - 120px))) - 28px);border:0;border-radius:0;box-shadow:none}
238
+ /* Claude Code's terminal, inside either MacBook window. */
239
+ .ss-term .ss-phone{background:#1a1918;color:#e6e1d9;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
240
+ .ss-term .ss-head{background:#232120;border-bottom-color:#33302d}
241
+ .ss-term .ss-titles b{font-family:inherit;font-size:13px;color:#e6e1d9}
242
+ .ss-term .ss-titles small,.ss-term .ss-auto,.ss-term .ss-intro,.ss-term .ss-dur,.ss-term .ss-empty,.ss-term .ss-group .ss-label,.ss-term .ss-opt small{color:#8f887d}
243
+ .ss-term .ss-avatar{background:#d97757;color:#1a1918;border-radius:6px}
244
+ .ss-term .ss-counter{background:#0f0e0d;color:#cfc8bd}
245
+ .ss-term .ss-counter b{color:#d97757}
246
+ .ss-term .ss-cmd-wrap{align-items:stretch}
247
+ .ss-term .ss-cmd{max-width:none;background:#2a2826;color:#e6e1d9;border-radius:4px;border-left:2px solid #8f887d;padding:6px 10px}
248
+ .ss-term .ss-cmd::before{content:"> ";color:#8f887d}
249
+ .ss-term .ss-who,.ss-term .ss-more,.ss-term .ss-asking{color:#d97757}
250
+ .ss-term .ss-reply p{color:#e6e1d9}
251
+ .ss-term .ss-step{color:#bdb6ab}
252
+ .ss-term .ss-dot{background:#7fb069}
253
+ .ss-term .ss-group .ss-dot{background:#5c5751}
254
+ .ss-term .ss-asked{background:#2a2622;border-left-color:#d9a441}
255
+ .ss-term .ss-asked .ss-q{color:#bdb6ab}
256
+ .ss-term .ss-mine,.ss-term .ss-tag,.ss-term .ss-verdict{color:#d9a441}
257
+ .ss-term .ss-verdict.ss-same{color:#69b1b5}
258
+ .ss-term .ss-bhead{background:#3a3633;color:#e6e1d9}
259
+ .ss-term .ss-made{background:#22302c;color:#cfe3dc}
260
+ .ss-term .ss-made span{color:#7fc4b0}
261
+ .ss-term .ss-typing i{background:#5c5751}
262
+ .ss-term .ss-composer{background:#1a1918;border-top-color:#33302d}
263
+ .ss-term .ss-chip{background:#1a1918;border-color:#5c5751;border-radius:8px;color:#e6e1d9}
264
+ .ss-term .ss-chip small{color:#d97757}
265
+ .ss-term .ss-mic{background:#d97757}
266
+ .ss-term .ss-sheet{background:#232120;border-top-color:#3a3633;color:#e6e1d9}
267
+ .ss-term .ss-tab{border-color:#3a3633;color:#8f887d}
268
+ .ss-term .ss-tab.ss-tab-done{background:#24343a;border-color:#3e5a63;color:#9cc7d3}
269
+ .ss-term .ss-tab.ss-tab-now{background:#d97757;border-color:#d97757;color:#1a1918}
270
+ .ss-sim .ss-term button.ss-opt{background:#1a1918;border-color:#3a3633;color:#bdb6ab}
271
+ .ss-term .ss-opt b{color:#e6e1d9}
272
+ .ss-term .ss-onum{background:#33302d;color:#e6e1d9}
273
+ .ss-sim .ss-term button.ss-opt:hover,.ss-sim .ss-term button.ss-opt:focus-visible{background:#2a2826;border-color:#d97757}
274
+ .ss-sim .ss-term button.ss-opt.ss-chosen{background:#24343a;border-color:#69b1b5}
275
+ .ss-sim .ss-term button.ss-opt.ss-yours{background:#3a2f1e;border-color:#d9a441}
276
+ .ss-sim .ss-term .ss-tray-handle{background:#e6e1d9;color:#1a1918}
277
+ .ss-term .ss-tray{background:#232120;border-top-color:#3a3633}
278
+ .ss-term .ss-artifact{background:#232120;border-color:#3a3633;color:#e6e1d9}
279
+ .ss-term .ss-panel h3{font-family:inherit;font-size:14px}
280
+ .ss-start{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(251,245,231,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
281
+ .ss-startcard{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:300px;text-align:center}
282
+ .ss-starttitle{font-family:Fraunces,Georgia,serif;font-size:20px;line-height:1.25}
283
+ .ss-startcard p{margin:0;color:#4a4238;font-size:14px}
284
+ .ss-startcard small{color:#7a6d5a;font-size:12px}
285
+ .ss-sim .ss-startbtn{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;padding:0;color:inherit;font-weight:700;font-size:16px}
286
+ .ss-startplay{width:76px;height:76px;border-radius:50%;background:var(--ss-tomato);color:#fff;display:grid;place-items:center;font-size:30px;padding-left:6px;box-sizing:border-box;box-shadow:0 8px 24px rgba(219,55,31,.35);animation:ss-pulse 1.6s infinite}
287
+ .ss-sim .ss-startbtn:focus-visible{outline:3px solid var(--ss-petrol);outline-offset:2px}
288
+ .ss-startauto{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
289
+ .ss-term .ss-start{background:rgba(26,25,24,.86)}
290
+ .ss-term .ss-startcard p{color:#cfc8bd}.ss-term .ss-startcard small{color:#8f887d}.ss-term .ss-starttitle,.ss-term .ss-startauto{color:#e6e1d9}
291
+ .ss-term .ss-startplay{background:#d97757}.ss-term .ss-startbtn{color:#e6e1d9}
292
+ .ss-devhint{font-size:inherit;opacity:.85}
293
+ /* Toasts float over the top of the demo: no layout shift, gone after a few seconds. */
294
+ .ss-toast{position:absolute;z-index:60;left:50%;top:40px;transform:translateX(-50%);width:max-content;max-width:min(92%,420px);pointer-events:none}
295
+ .ss-toast span{display:block;background:var(--ss-ink);color:var(--ss-cream);font-size:13px;line-height:1.35;border-radius:12px;padding:8px 12px;box-shadow:0 8px 24px rgba(0,0,0,.25);text-align:center;animation:ss-toast 3.2s ease forwards}
296
+ @keyframes ss-toast{0%{opacity:0;transform:translateY(-4px)}8%,85%{opacity:1;transform:none}100%{opacity:0}}
297
+ @media (prefers-reduced-motion:reduce){.ss-sim *{animation:none!important;transition:none!important}}
298
+ `;