@callimacus/thamyr-shopify 4.12.0 → 4.13.1

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.
@@ -0,0 +1,1982 @@
1
+ /*!
2
+ * Copyright © 2025–2026 Solomei AI SRL. All rights reserved.
3
+ *
4
+ * Proprietary software, licensed for use by Callimacus customers only.
5
+ * See LICENSE.md for the full terms.
6
+ *
7
+ */
8
+ :where(:root) {
9
+ --cal-fg: rgb(18 18 18);
10
+ --cal-bg: rgb(255 255 255);
11
+ --cal-shadow: var(--cal-fg);
12
+ --cal-ink: var(--cal-fg);
13
+ --cal-font-body: inherit;
14
+ --cal-font-body-style: normal;
15
+ --cal-font-body-weight: 400;
16
+ --cal-font-body-weight-bold: 700;
17
+ --cal-font-heading: inherit;
18
+ --cal-font-heading-style: normal;
19
+ --cal-font-heading-weight: 400;
20
+ --cal-heading-scale: 1;
21
+ --cal-radius-media: 4px;
22
+ --cal-radius-card: 4px;
23
+ --cal-radius-button: 4px;
24
+ --cal-grid-gap-mobile: 8px;
25
+ --cal-grid-gap-desktop: 16px;
26
+ --cal-header-height: 0px;
27
+ --cal-ease: cubic-bezier(0.2, 0, 0, 1);
28
+ --cal-arrive: 240ms;
29
+ --cal-collapse: 320ms;
30
+ --cal-gutter: 16px;
31
+ --cal-bone: color-mix(in srgb, var(--cal-fg) 6%, transparent);
32
+ --cal-shine: color-mix(in srgb, var(--cal-bg) 60%, transparent);
33
+ --cal-hairline: color-mix(in srgb, var(--cal-fg) 10%, transparent);
34
+ --cal-glass: color-mix(in srgb, var(--cal-bg) 80%, transparent);
35
+ --cal-dock-space: 96px;
36
+ }
37
+ :is(html,#callimacus#callimacus)[data-callimacus-on] body {
38
+ padding-bottom: var(--cal-dock-space);
39
+ }
40
+ :is(html,#callimacus#callimacus) .cal-dock {
41
+ position: fixed;
42
+ inset-inline: 0;
43
+ bottom: 0;
44
+ z-index: 90;
45
+ display: flex;
46
+ justify-content: center;
47
+ padding: 0 var(--cal-gutter) calc(12px + env(safe-area-inset-bottom, 0px));
48
+ pointer-events: none;
49
+ font-family: var(--cal-font-body);
50
+ font-style: var(--cal-font-body-style);
51
+ font-weight: var(--cal-font-body-weight);
52
+ transition:
53
+ transform var(--cal-collapse) var(--cal-ease),
54
+ opacity 200ms ease,
55
+ visibility 0s linear 0s;
56
+ }
57
+ :is(html,#callimacus#callimacus) .cal-dock__inner {
58
+ display: grid;
59
+ gap: 8px;
60
+ width: min(100%, 680px);
61
+ pointer-events: auto;
62
+ }
63
+ :is(html,#callimacus#callimacus) .cal-dock__chips {
64
+ display: flex;
65
+ flex-wrap: wrap;
66
+ justify-content: center;
67
+ gap: 6px;
68
+ min-width: 0;
69
+ }
70
+ :is(html,#callimacus#callimacus) .cal-dock__chips[hidden] {
71
+ display: none;
72
+ }
73
+ :is(html,#callimacus#callimacus) .cal-dock__chip {
74
+ display: inline-flex;
75
+ align-items: center;
76
+ gap: 6px;
77
+ max-width: 100%;
78
+ min-height: 36px;
79
+ margin: 0;
80
+ padding: 0 14px;
81
+ border: 1px solid var(--cal-hairline);
82
+ border-radius: 990px;
83
+ background: var(--cal-glass);
84
+ -webkit-backdrop-filter: blur(14px) saturate(1.5);
85
+ backdrop-filter: blur(14px) saturate(1.5);
86
+ box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--cal-shadow) 25%, transparent);
87
+ color: var(--cal-fg);
88
+ font: inherit;
89
+ font-size: 13px;
90
+ letter-spacing: 0.4px;
91
+ line-height: 1.2;
92
+ cursor: pointer;
93
+ transition: border-color 100ms ease, transform 160ms var(--cal-ease);
94
+ }
95
+ :is(html,#callimacus#callimacus) .cal-dock__chip[hidden] {
96
+ display: none;
97
+ }
98
+ :is(html,#callimacus#callimacus) button.cal-dock__chip:hover {
99
+ border-color: color-mix(in srgb, var(--cal-fg) 35%, transparent);
100
+ }
101
+ :is(html,#callimacus#callimacus) button.cal-dock__chip:active {
102
+ transform: scale(0.97);
103
+ }
104
+ :is(html,#callimacus#callimacus) .cal-dock__chip-label {
105
+ overflow: hidden;
106
+ min-width: 0;
107
+ max-width: 32ch;
108
+ white-space: nowrap;
109
+ text-overflow: ellipsis;
110
+ }
111
+ :is(html,#callimacus#callimacus) .cal-dock__chip-icon {
112
+ flex: none;
113
+ width: 14px;
114
+ height: 14px;
115
+ opacity: 0.7;
116
+ }
117
+ :is(html,#callimacus#callimacus) .cal-dock__chip--next {
118
+ border-style: dashed;
119
+ }
120
+ :is(html,#callimacus#callimacus) .cal-dock__chip-remove {
121
+ display: grid;
122
+ flex: none;
123
+ place-items: center;
124
+ width: 28px;
125
+ height: 28px;
126
+ margin: 0;
127
+ padding: 0;
128
+ border: 0;
129
+ border-radius: 50%;
130
+ background: none;
131
+ color: inherit;
132
+ cursor: pointer;
133
+ }
134
+ :is(html,#callimacus#callimacus) .cal-dock__chip-remove:hover {
135
+ background: color-mix(in srgb, var(--cal-fg) 8%, transparent);
136
+ }
137
+ :is(html,#callimacus#callimacus) .cal-dock__chip-remove svg {
138
+ width: 12px;
139
+ height: 12px;
140
+ }
141
+ :is(html,#callimacus#callimacus) .cal-dock__status {
142
+ justify-self: center;
143
+ max-width: 100%;
144
+ margin: 0;
145
+ padding: 4px 12px;
146
+ border-radius: 990px;
147
+ background: var(--cal-glass);
148
+ -webkit-backdrop-filter: blur(14px);
149
+ backdrop-filter: blur(14px);
150
+ color: color-mix(in srgb, var(--cal-fg) 75%, transparent);
151
+ font-size: 12px;
152
+ letter-spacing: 0.4px;
153
+ line-height: 1.4;
154
+ text-align: center;
155
+ }
156
+ :is(html,#callimacus#callimacus) .cal-dock__status:empty {
157
+ display: none;
158
+ }
159
+ :is(html,#callimacus#callimacus) .cal-dock__form {
160
+ display: flex;
161
+ align-items: center;
162
+ gap: 8px;
163
+ min-width: 0;
164
+ min-height: 56px;
165
+ margin: 0;
166
+ padding: 6px 6px 6px 22px;
167
+ border: 1px solid var(--cal-hairline);
168
+ border-radius: 990px;
169
+ background: var(--cal-glass);
170
+ -webkit-backdrop-filter: blur(18px) saturate(1.6);
171
+ backdrop-filter: blur(18px) saturate(1.6);
172
+ box-shadow:
173
+ 0 1px 2px color-mix(in srgb, var(--cal-shadow) 6%, transparent),
174
+ 0 12px 32px -8px color-mix(in srgb, var(--cal-shadow) 24%, transparent);
175
+ transition: border-color 160ms, box-shadow 160ms;
176
+ }
177
+ :is(html,#callimacus#callimacus) .cal-dock__form:focus-within {
178
+ border-color: color-mix(in srgb, var(--cal-fg) 60%, transparent);
179
+ box-shadow:
180
+ 0 0 0 3px color-mix(in srgb, var(--cal-fg) 8%, transparent),
181
+ 0 12px 32px -8px color-mix(in srgb, var(--cal-shadow) 30%, transparent);
182
+ }
183
+ :is(html,#callimacus#callimacus) .cal-dock__form:has(> .cal-dock__count:not([hidden])),
184
+ :is(html,#callimacus#callimacus) .cal-dock__form:has(> .cal-dock__token:not([hidden])) {
185
+ padding-left: 6px;
186
+ }
187
+ :is(html,#callimacus#callimacus) .cal-dock__count,
188
+ :is(html,#callimacus#callimacus) .cal-dock__token {
189
+ display: inline-flex;
190
+ flex: none;
191
+ align-items: center;
192
+ gap: 6px;
193
+ min-width: 0;
194
+ height: 44px;
195
+ margin: 0;
196
+ border: 0;
197
+ border-radius: 990px;
198
+ background: color-mix(in srgb, var(--cal-fg) 6%, transparent);
199
+ color: var(--cal-fg);
200
+ font: inherit;
201
+ font-size: 13px;
202
+ letter-spacing: 0.4px;
203
+ line-height: 1.2;
204
+ }
205
+ :is(html,#callimacus#callimacus) .cal-dock__count[hidden],
206
+ :is(html,#callimacus#callimacus) .cal-dock__token[hidden] {
207
+ display: none;
208
+ }
209
+ :is(html,#callimacus#callimacus) .cal-dock__count {
210
+ padding: 0 14px;
211
+ font-variant-numeric: tabular-nums;
212
+ cursor: pointer;
213
+ transition: background-color 160ms ease, transform 160ms var(--cal-ease);
214
+ }
215
+ :is(html,#callimacus#callimacus) .cal-dock__count:hover {
216
+ background: color-mix(in srgb, var(--cal-fg) 10%, transparent);
217
+ }
218
+ :is(html,#callimacus#callimacus) .cal-dock__count:active {
219
+ transform: scale(0.96);
220
+ }
221
+ :is(html,#callimacus#callimacus) .cal-dock__count-icon {
222
+ width: 14px;
223
+ height: 14px;
224
+ opacity: 0.7;
225
+ }
226
+ :is(html,#callimacus#callimacus) .cal-dock__token {
227
+ flex-shrink: 1;
228
+ max-width: min(40%, 280px);
229
+ padding: 0 4px 0 14px;
230
+ }
231
+ :is(html,#callimacus#callimacus) .cal-dock__token-label {
232
+ overflow: hidden;
233
+ min-width: 0;
234
+ white-space: nowrap;
235
+ text-overflow: ellipsis;
236
+ }
237
+ @media screen and (width <= 749px) {
238
+ :is(html,#callimacus#callimacus) .cal-dock__count {
239
+ padding: 0 11px;
240
+ }
241
+ :is(html,#callimacus#callimacus) .cal-dock__token {
242
+ max-width: 45%;
243
+ }
244
+ }
245
+ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
246
+ :where(:root) {
247
+ --cal-glass: var(--cal-bg);
248
+ }
249
+ }
250
+ :is(html,#callimacus#callimacus) .cal-dock__input {
251
+ flex: 1;
252
+ min-width: 0;
253
+ height: 44px;
254
+ margin: 0;
255
+ padding: 0;
256
+ border: 0;
257
+ background: transparent;
258
+ color: var(--cal-fg);
259
+ font: inherit;
260
+ font-size: 16px;
261
+ letter-spacing: 0.4px;
262
+ text-overflow: ellipsis;
263
+ -webkit-appearance: none;
264
+ appearance: none;
265
+ }
266
+ :is(html,#callimacus#callimacus) .cal-dock__input::placeholder {
267
+ color: color-mix(in srgb, var(--cal-fg) 55%, transparent);
268
+ opacity: 1;
269
+ }
270
+ :is(html,#callimacus#callimacus) .cal-dock__input:focus,
271
+ :is(html,#callimacus#callimacus) .cal-dock__input:focus-visible {
272
+ outline: none;
273
+ box-shadow: none;
274
+ }
275
+ :is(html,#callimacus#callimacus) .cal-dock__kbd {
276
+ flex: none;
277
+ padding: 3px 7px;
278
+ border: 1px solid color-mix(in srgb, var(--cal-fg) 18%, transparent);
279
+ border-radius: 6px;
280
+ color: color-mix(in srgb, var(--cal-fg) 55%, transparent);
281
+ font: inherit;
282
+ font-size: 12px;
283
+ line-height: 1.2;
284
+ }
285
+ :is(html,#callimacus#callimacus) .cal-dock__form:focus-within .cal-dock__kbd {
286
+ display: none;
287
+ }
288
+ @media (hover: none), screen and (width <= 749px) {
289
+ :is(html,#callimacus#callimacus) .cal-dock__kbd {
290
+ display: none;
291
+ }
292
+ }
293
+ :is(html,#callimacus#callimacus) .cal-dock__submit {
294
+ position: relative;
295
+ display: grid;
296
+ flex: none;
297
+ place-items: center;
298
+ width: 44px;
299
+ height: 44px;
300
+ margin: 0;
301
+ padding: 0;
302
+ border: 0;
303
+ border-radius: 50%;
304
+ background: var(--cal-fg);
305
+ color: var(--cal-bg);
306
+ cursor: pointer;
307
+ transition: transform 160ms var(--cal-ease), opacity 160ms ease;
308
+ }
309
+ :is(html,#callimacus#callimacus) .cal-dock__submit:hover {
310
+ opacity: 0.88;
311
+ }
312
+ :is(html,#callimacus#callimacus) .cal-dock__submit:active {
313
+ transform: scale(0.94);
314
+ }
315
+ :is(html,#callimacus#callimacus) .cal-dock__input:disabled,
316
+ :is(html,#callimacus#callimacus) .cal-dock__submit:disabled {
317
+ opacity: 0.55;
318
+ cursor: default;
319
+ }
320
+ :is(html,#callimacus#callimacus) .cal-dock__submit:focus-visible {
321
+ outline: 2px solid color-mix(in srgb, var(--cal-fg) 50%, transparent);
322
+ outline-offset: 3px;
323
+ box-shadow: none;
324
+ }
325
+ :is(html,#callimacus#callimacus) .cal-dock__submit-icon {
326
+ width: 20px;
327
+ height: 20px;
328
+ transition: opacity 160ms;
329
+ }
330
+ :is(html,#callimacus#callimacus) .cal-dock__spinner {
331
+ position: absolute;
332
+ inset: 11px;
333
+ border: 1.5px solid color-mix(in srgb, var(--cal-bg) 35%, transparent);
334
+ border-top-color: var(--cal-bg);
335
+ border-radius: 50%;
336
+ opacity: 0;
337
+ transition: opacity 160ms;
338
+ }
339
+ :is(html,#callimacus#callimacus):is([data-callimacus-state='connecting'], [data-callimacus-state='asking'], [data-callimacus-state='streaming'])
340
+ .cal-dock__submit-icon {
341
+ opacity: 0;
342
+ }
343
+ :is(html,#callimacus#callimacus):is([data-callimacus-state='connecting'], [data-callimacus-state='asking'], [data-callimacus-state='streaming'])
344
+ .cal-dock__spinner {
345
+ opacity: 1;
346
+ animation: cal-spin 800ms linear infinite;
347
+ }
348
+ @media screen and (width >= 750px) {
349
+ :is(html,#callimacus#callimacus) .cal-dock {
350
+ padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
351
+ }
352
+ }
353
+ :is(html,#callimacus#callimacus) .cal-thread {
354
+ display: flex;
355
+ flex-direction: column;
356
+ }
357
+ :is(html,#callimacus#callimacus) .cal-thread:empty {
358
+ display: none;
359
+ }
360
+ :is(html,#callimacus#callimacus) [data-callimacus-stage][data-stage-kind='page'] > .cal-thread:not(:empty) {
361
+ padding-block: 24px 16px;
362
+ }
363
+ :is(html,#callimacus#callimacus) .cal-thread[data-compact] > .cal-chapter ~ .cal-chapter {
364
+ display: none;
365
+ }
366
+ :is(html,#callimacus#callimacus) .cal-thread__earlier {
367
+ display: block;
368
+ width: 100%;
369
+ margin: 0 auto 24px;
370
+ border: 0;
371
+ background: none;
372
+ color: color-mix(in srgb, var(--cal-fg) 75%, transparent);
373
+ font: inherit;
374
+ font-size: 14px;
375
+ letter-spacing: 0.4px;
376
+ text-align: left;
377
+ text-decoration: underline;
378
+ text-underline-offset: 3px;
379
+ cursor: pointer;
380
+ }
381
+ :is(html,#callimacus#callimacus) .cal-thread__earlier:hover {
382
+ color: var(--cal-fg);
383
+ }
384
+ :is(html,#callimacus#callimacus) .cal-thread__earlier[hidden] {
385
+ display: none;
386
+ }
387
+ :is(html,#callimacus#callimacus) .cal-thread__trimmed {
388
+ margin: 0 auto 24px;
389
+ color: color-mix(in srgb, var(--cal-fg) 64%, transparent);
390
+ font-size: 14px;
391
+ letter-spacing: 0.4px;
392
+ }
393
+ :is(html,#callimacus#callimacus) .cal-thread__trimmed[hidden] {
394
+ display: none;
395
+ }
396
+ :is(html,#callimacus#callimacus) .cal-chapter {
397
+ display: grid;
398
+ grid-template-rows: auto 1fr;
399
+ scroll-margin-top: calc(var(--cal-header-height, 0px) + 16px);
400
+ transition: grid-template-rows var(--cal-collapse) var(--cal-ease);
401
+ }
402
+ :is(html,#callimacus#callimacus) .cal-chapter + .cal-chapter {
403
+ border-top: 1px solid var(--cal-hairline);
404
+ }
405
+ :is(html,#callimacus#callimacus) .cal-chapter[data-collapsed] {
406
+ grid-template-rows: auto 0fr;
407
+ }
408
+ :is(html,#callimacus#callimacus) .cal-chapter__heading {
409
+ margin: 0;
410
+ font: inherit;
411
+ }
412
+ :is(html,#callimacus#callimacus) .cal-chapter__toggle {
413
+ display: flex;
414
+ align-items: center;
415
+ gap: 12px;
416
+ width: 100%;
417
+ min-height: 44px;
418
+ margin: 0;
419
+ padding: 24px 0 16px;
420
+ border: 0;
421
+ background: none;
422
+ color: var(--cal-fg);
423
+ font: inherit;
424
+ text-align: left;
425
+ cursor: pointer;
426
+ }
427
+ :is(html,#callimacus#callimacus) .cal-chapter__question {
428
+ flex: 1;
429
+ min-width: 0;
430
+ font-family: var(--cal-font-heading);
431
+ font-style: var(--cal-font-heading-style);
432
+ font-weight: var(--cal-font-heading-weight);
433
+ font-size: calc(var(--cal-heading-scale) * 22px);
434
+ letter-spacing: 0.2px;
435
+ line-height: 1.25;
436
+ overflow-wrap: anywhere;
437
+ text-wrap: balance;
438
+ transition: font-size var(--cal-collapse) var(--cal-ease);
439
+ }
440
+ :is(html,#callimacus#callimacus) .cal-chapter__about {
441
+ flex: none;
442
+ max-width: 40%;
443
+ overflow: hidden;
444
+ padding: 3px 10px;
445
+ border: 1px solid var(--cal-hairline);
446
+ border-radius: 990px;
447
+ color: color-mix(in srgb, var(--cal-fg) 70%, transparent);
448
+ font-size: 12px;
449
+ letter-spacing: 0.4px;
450
+ white-space: nowrap;
451
+ text-overflow: ellipsis;
452
+ }
453
+ :is(html,#callimacus#callimacus) .cal-chapter__thumbs {
454
+ display: none;
455
+ flex: none;
456
+ gap: 4px;
457
+ }
458
+ :is(html,#callimacus#callimacus) .cal-chapter__thumb {
459
+ display: block;
460
+ width: 32px;
461
+ height: 40px;
462
+ border-radius: var(--cal-radius-media, 4px);
463
+ background: var(--cal-bone);
464
+ object-fit: cover;
465
+ }
466
+ :is(html,#callimacus#callimacus) .cal-chapter__chevron {
467
+ flex: none;
468
+ width: 16px;
469
+ height: 16px;
470
+ transform: rotate(180deg);
471
+ transition: transform var(--cal-collapse) var(--cal-ease);
472
+ }
473
+ :is(html,#callimacus#callimacus) .cal-chapter[data-collapsed] .cal-chapter__toggle {
474
+ padding: 14px 0;
475
+ }
476
+ :is(html,#callimacus#callimacus) .cal-chapter[data-collapsed] .cal-chapter__question {
477
+ font-size: calc(var(--cal-heading-scale) * 16px);
478
+ }
479
+ :is(html,#callimacus#callimacus) .cal-chapter[data-collapsed] .cal-chapter__thumbs {
480
+ display: flex;
481
+ }
482
+ :is(html,#callimacus#callimacus) .cal-chapter[data-collapsed] .cal-chapter__chevron {
483
+ transform: none;
484
+ }
485
+ :is(html,#callimacus#callimacus) .cal-chapter__toggle:hover .cal-chapter__question {
486
+ text-decoration: underline;
487
+ text-decoration-thickness: 1px;
488
+ text-underline-offset: 4px;
489
+ }
490
+ :is(html,#callimacus#callimacus) .cal-chapter__body {
491
+ display: flex;
492
+ flex-direction: column;
493
+ min-height: 0;
494
+ }
495
+ :is(html,#callimacus#callimacus) .cal-chapter[data-collapsed] > .cal-chapter__body,
496
+ :is(html,#callimacus#callimacus) .cal-chapter[data-animating] > .cal-chapter__body {
497
+ overflow: hidden;
498
+ }
499
+ @media screen and (width >= 750px) {
500
+ :is(html,#callimacus#callimacus) .cal-chapter__question {
501
+ font-size: calc(var(--cal-heading-scale) * 28px);
502
+ }
503
+ :is(html,#callimacus#callimacus) .cal-chapter__thumb {
504
+ width: 40px;
505
+ height: 50px;
506
+ }
507
+ }
508
+ :is(html,#callimacus#callimacus) .cal-chapter__note {
509
+ display: flex;
510
+ flex-wrap: wrap;
511
+ align-items: baseline;
512
+ gap: 4px 12px;
513
+ padding-block: 16px 32px;
514
+ color: color-mix(in srgb, var(--cal-fg) 75%, transparent);
515
+ font-size: 14px;
516
+ }
517
+ :is(html,#callimacus#callimacus) .cal-chapter__note p {
518
+ margin: 0;
519
+ }
520
+ :is(html,#callimacus#callimacus) .cal-chapter__retry {
521
+ padding: 0;
522
+ border: 0;
523
+ background: none;
524
+ color: var(--cal-fg);
525
+ font: inherit;
526
+ text-decoration: underline;
527
+ text-underline-offset: 3px;
528
+ cursor: pointer;
529
+ }
530
+ :is(html,#callimacus#callimacus) .cal-slot {
531
+ min-width: 0;
532
+ }
533
+ :is(html,#callimacus#callimacus) .cal-slot:empty {
534
+ display: none;
535
+ }
536
+ :is(html,#callimacus#callimacus) .cal-block {
537
+ min-width: 0;
538
+ }
539
+ :is(html,#callimacus#callimacus) .cal-block[data-arriving] {
540
+ animation: cal-arrive var(--cal-arrive) var(--cal-ease) backwards;
541
+ animation-delay: var(--cal-stagger, 0ms);
542
+ }
543
+ :is(html,#callimacus#callimacus) .cal-fallback-note__body > p {
544
+ margin: 0 0 10px;
545
+ color: color-mix(in srgb, var(--cal-fg) 75%, transparent);
546
+ }
547
+ :is(html,#callimacus#callimacus) .cal-fallback-note__body > p:last-child {
548
+ margin-bottom: 0;
549
+ }
550
+ :is(html,#callimacus#callimacus) .cal-skeleton {
551
+ display: grid;
552
+ grid-template-rows: 1fr;
553
+ transition:
554
+ grid-template-rows var(--cal-collapse) var(--cal-ease),
555
+ opacity 200ms ease;
556
+ }
557
+ :is(html,#callimacus#callimacus) .cal-skeleton[data-leaving] {
558
+ grid-template-rows: 0fr;
559
+ opacity: 0;
560
+ }
561
+ :is(html,#callimacus#callimacus) .cal-skeleton__inner {
562
+ min-height: 0;
563
+ overflow: hidden;
564
+ }
565
+ :is(html,#callimacus#callimacus) .cal-skeleton__content {
566
+ padding-block: calc(var(--cal-gap, 48px) / 2);
567
+ }
568
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone {
569
+ position: relative;
570
+ overflow: hidden;
571
+ border-radius: var(--cal-radius-media, 4px);
572
+ background: var(--cal-bone);
573
+ }
574
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone:empty {
575
+ display: block;
576
+ }
577
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone::after {
578
+ content: '';
579
+ position: absolute;
580
+ inset: 0;
581
+ background: linear-gradient(90deg, transparent, var(--cal-shine), transparent);
582
+ transform: translateX(-100%);
583
+ animation: cal-shimmer 1.4s ease-in-out infinite;
584
+ }
585
+ :is(html,#callimacus#callimacus) .cal-chapter[data-chapter-index='0'] .cal-skeleton[data-skeleton='hero'] .cal-skeleton__content {
586
+ padding-block: 0 calc(var(--cal-gap, 48px) / 2);
587
+ }
588
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--hero {
589
+ aspect-ratio: 4 / 5;
590
+ border-radius: 0;
591
+ }
592
+ :is(html,#callimacus#callimacus) .cal-skeleton__content--row {
593
+ display: flex;
594
+ align-items: center;
595
+ gap: 24px;
596
+ }
597
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--lead {
598
+ flex: none;
599
+ width: clamp(96px, 60px + 6vw, 160px);
600
+ aspect-ratio: 4 / 5;
601
+ }
602
+ :is(html,#callimacus#callimacus) .cal-skeleton[data-skeleton='hero'] .cal-skeleton__lines {
603
+ flex: 1;
604
+ }
605
+ :is(html,#callimacus#callimacus) .cal-skeleton__lines {
606
+ display: grid;
607
+ gap: 12px;
608
+ min-width: 0;
609
+ }
610
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--line {
611
+ width: min(92%, 720px);
612
+ height: 14px;
613
+ }
614
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--line:nth-child(2) {
615
+ width: min(84%, 660px);
616
+ }
617
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--line:nth-child(3) {
618
+ width: min(56%, 440px);
619
+ }
620
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--topic {
621
+ height: 240px;
622
+ }
623
+ :is(html,#callimacus#callimacus) .cal-skeleton__card {
624
+ display: grid;
625
+ gap: 10px;
626
+ }
627
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--media {
628
+ aspect-ratio: 4 / 5;
629
+ border-radius: var(--cal-radius-card, 4px);
630
+ }
631
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--title {
632
+ width: 72%;
633
+ height: 14px;
634
+ }
635
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--price {
636
+ width: 36%;
637
+ height: 12px;
638
+ }
639
+ :is(html,#callimacus#callimacus) .cal-skeleton__chips {
640
+ display: flex;
641
+ flex-wrap: wrap;
642
+ gap: 8px;
643
+ }
644
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--chip {
645
+ width: 160px;
646
+ max-width: 100%;
647
+ height: 40px;
648
+ border-radius: 990px;
649
+ }
650
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--chip:nth-child(2) {
651
+ width: 210px;
652
+ }
653
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--chip:nth-child(3) {
654
+ width: 130px;
655
+ }
656
+ @media screen and (width >= 750px) {
657
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--hero {
658
+ aspect-ratio: 16 / 10;
659
+ }
660
+ }
661
+ @media screen and (width >= 1200px) {
662
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone--hero {
663
+ aspect-ratio: 21 / 9;
664
+ }
665
+ }
666
+ :is(html,#callimacus#callimacus) .cal-welcome__body {
667
+ display: grid;
668
+ gap: 24px;
669
+ }
670
+ :is(html,#callimacus#callimacus) .cal-welcome__group {
671
+ display: grid;
672
+ gap: 12px;
673
+ }
674
+ :is(html,#callimacus#callimacus) .cal-welcome__title {
675
+ margin: 0;
676
+ color: var(--cal-fg);
677
+ font-family: var(--cal-font-heading);
678
+ font-style: var(--cal-font-heading-style);
679
+ font-weight: var(--cal-font-heading-weight);
680
+ font-size: calc(var(--cal-heading-scale) * 15px);
681
+ letter-spacing: 0.4px;
682
+ line-height: 1.3;
683
+ }
684
+ :is(html,#callimacus#callimacus) .cal-welcome__chips {
685
+ display: flex;
686
+ flex-wrap: wrap;
687
+ gap: 8px;
688
+ }
689
+ @keyframes cal-arrive {
690
+ from {
691
+ opacity: 0;
692
+ transform: translateY(8px);
693
+ }
694
+ to {
695
+ opacity: 1;
696
+ transform: none;
697
+ }
698
+ }
699
+ @keyframes cal-shimmer {
700
+ to {
701
+ transform: translateX(100%);
702
+ }
703
+ }
704
+ @keyframes cal-spin {
705
+ to {
706
+ transform: rotate(1turn);
707
+ }
708
+ }
709
+ @media (prefers-reduced-motion: reduce) {
710
+ :is(html,#callimacus#callimacus) .cal-dock,
711
+ :is(html,#callimacus#callimacus) .cal-chapter,
712
+ :is(html,#callimacus#callimacus) .cal-chapter__chevron,
713
+ :is(html,#callimacus#callimacus) .cal-chapter__question,
714
+ :is(html,#callimacus#callimacus) .cal-skeleton {
715
+ transition: none;
716
+ }
717
+ :is(html,#callimacus#callimacus) .cal-block[data-arriving] {
718
+ animation: none;
719
+ }
720
+ :is(html,#callimacus#callimacus) .cal-skeleton__bone::after {
721
+ display: none;
722
+ }
723
+ :is(html,#callimacus#callimacus):is([data-callimacus-state='connecting'], [data-callimacus-state='asking'], [data-callimacus-state='streaming'])
724
+ .cal-dock__spinner {
725
+ animation: none;
726
+ border-color: color-mix(in srgb, var(--cal-bg) 60%, transparent);
727
+ }
728
+ }
729
+ :is(html,#callimacus#callimacus) .cal-stage,
730
+ :is(html,#callimacus#callimacus) [data-callimacus-stage],
731
+ :is(html,#callimacus#callimacus) [data-callimacus-welcome] {
732
+ --cal-gap: clamp(48px, 30px + 4.5vw, 104px);
733
+ --cal-measure: 68ch;
734
+ --cal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
735
+ --cal-display: clamp(34px, 22px + 3.6vw, 72px);
736
+ --cal-title: clamp(26px, 20px + 1.5vw, 42px);
737
+ --cal-subtitle: clamp(19px, 17px + 0.5vw, 24px);
738
+ --cal-lede: clamp(18px, 15.5px + 0.7vw, 24px);
739
+ --cal-body: 16px;
740
+ }
741
+ :is(html,#callimacus#callimacus) .cal-eyebrow {
742
+ margin: 0;
743
+ font-family: var(--cal-font-body);
744
+ font-size: 12px;
745
+ font-style: normal;
746
+ font-weight: var(--cal-font-body-weight-bold);
747
+ line-height: 1.4;
748
+ letter-spacing: 0.16em;
749
+ text-transform: uppercase;
750
+ color: color-mix(in srgb, var(--cal-fg) 68%, transparent);
751
+ }
752
+ :is(html,#callimacus#callimacus) .cal-display,
753
+ :is(html,#callimacus#callimacus) .cal-title,
754
+ :is(html,#callimacus#callimacus) .cal-subtitle,
755
+ :is(html,#callimacus#callimacus) .cal-step__title,
756
+ :is(html,#callimacus#callimacus) .cal-faq__question,
757
+ :is(html,#callimacus#callimacus) .cal-entry__title,
758
+ :is(html,#callimacus#callimacus) .cal-stage__heading {
759
+ font-family: var(--cal-font-heading);
760
+ font-style: var(--cal-font-heading-style);
761
+ font-weight: var(--cal-font-heading-weight);
762
+ color: var(--cal-fg);
763
+ overflow-wrap: break-word;
764
+ text-wrap: balance;
765
+ }
766
+ :is(html,#callimacus#callimacus) .cal-display {
767
+ margin: 0;
768
+ font-size: var(--cal-display);
769
+ line-height: 1.02;
770
+ letter-spacing: -0.025em;
771
+ }
772
+ :is(html,#callimacus#callimacus) .cal-title {
773
+ margin: 0;
774
+ font-size: var(--cal-title);
775
+ line-height: 1.08;
776
+ letter-spacing: -0.015em;
777
+ }
778
+ :is(html,#callimacus#callimacus) .cal-subtitle {
779
+ margin: 0 0 24px;
780
+ font-size: var(--cal-subtitle);
781
+ line-height: 1.2;
782
+ letter-spacing: -0.005em;
783
+ }
784
+ @media screen and (width <= 749px) {
785
+ :is(html,#callimacus#callimacus) .cal-display,
786
+ :is(html,#callimacus#callimacus) .cal-title {
787
+ hyphens: auto;
788
+ }
789
+ }
790
+ :is(html,#callimacus#callimacus) .cal-icon {
791
+ display: inline-block;
792
+ flex: none;
793
+ width: 14px;
794
+ height: auto;
795
+ }
796
+ :is(html,#callimacus#callimacus) .cal-link {
797
+ display: inline-flex;
798
+ align-items: center;
799
+ gap: 8px;
800
+ font-size: 15px;
801
+ }
802
+ :is(html,#callimacus#callimacus) .cal-media {
803
+ position: relative;
804
+ display: block;
805
+ overflow: hidden;
806
+ background-color: color-mix(in srgb, var(--cal-fg) 6%, transparent);
807
+ }
808
+ :is(html,#callimacus#callimacus) .cal-media > img {
809
+ position: absolute;
810
+ inset: 0;
811
+ width: 100%;
812
+ height: 100%;
813
+ object-fit: cover;
814
+ }
815
+ :is(html,#callimacus#callimacus) .cal-section {
816
+ padding-block: calc(var(--cal-gap) / 2);
817
+ }
818
+ :is(html,#callimacus#callimacus) .cal-section__inner > :first-child {
819
+ margin-top: 0;
820
+ }
821
+ :is(html,#callimacus#callimacus) .cal-head {
822
+ display: flex;
823
+ flex-wrap: wrap;
824
+ align-items: baseline;
825
+ justify-content: space-between;
826
+ gap: 8px 24px;
827
+ margin: 0 0 clamp(24px, 16px + 1.6vw, 40px);
828
+ padding-top: 16px;
829
+ border-top: 1px solid color-mix(in srgb, var(--cal-fg) 85%, transparent);
830
+ }
831
+ :is(html,#callimacus#callimacus) .cal-head__meta {
832
+ margin: 0;
833
+ font-size: 13px;
834
+ letter-spacing: 0.6px;
835
+ font-variant-numeric: tabular-nums;
836
+ color: color-mix(in srgb, var(--cal-fg) 60%, transparent);
837
+ }
838
+ :is(html,#callimacus#callimacus) .cal-prose {
839
+ max-width: var(--cal-measure);
840
+ font-size: var(--cal-body);
841
+ line-height: 1.7;
842
+ color: color-mix(in srgb, var(--cal-fg) 86%, transparent);
843
+ }
844
+ :is(html,#callimacus#callimacus) .cal-prose > :is(p, ul, ol, h3) {
845
+ margin: 0;
846
+ }
847
+ :is(html,#callimacus#callimacus) .cal-prose > :is(p, ul, ol, h3) + :is(p, ul, ol) {
848
+ margin-top: 1.1em;
849
+ }
850
+ :is(html,#callimacus#callimacus) .cal-prose > :is(p, ul, ol, h3) + h3 {
851
+ margin-top: 1.6em;
852
+ }
853
+ :is(html,#callimacus#callimacus) .cal-prose h3 {
854
+ font-size: var(--cal-subtitle);
855
+ line-height: 1.25;
856
+ }
857
+ :is(html,#callimacus#callimacus) .cal-prose strong {
858
+ font-weight: var(--cal-font-body-weight-bold);
859
+ color: var(--cal-fg);
860
+ }
861
+ :is(html,#callimacus#callimacus) .cal-prose ul,
862
+ :is(html,#callimacus#callimacus) .cal-prose ol {
863
+ display: grid;
864
+ gap: 0.6em;
865
+ padding: 0;
866
+ list-style: none;
867
+ }
868
+ :is(html,#callimacus#callimacus) .cal-prose li {
869
+ position: relative;
870
+ padding-left: 1.8em;
871
+ }
872
+ :is(html,#callimacus#callimacus) .cal-prose ul > li::before {
873
+ content: '';
874
+ position: absolute;
875
+ left: 0.15em;
876
+ top: 0.85em;
877
+ width: 0.8em;
878
+ height: 1px;
879
+ background: currentcolor;
880
+ }
881
+ :is(html,#callimacus#callimacus) .cal-prose ol {
882
+ counter-reset: cal-item;
883
+ }
884
+ :is(html,#callimacus#callimacus) .cal-prose ol > li {
885
+ counter-increment: cal-item;
886
+ }
887
+ :is(html,#callimacus#callimacus) .cal-prose ol > li::before {
888
+ content: counter(cal-item, decimal-leading-zero);
889
+ position: absolute;
890
+ left: 0;
891
+ top: 0;
892
+ font-size: 0.8em;
893
+ line-height: 2.1;
894
+ font-variant-numeric: tabular-nums;
895
+ color: color-mix(in srgb, var(--cal-fg) 56%, transparent);
896
+ }
897
+ :is(html,#callimacus#callimacus) .cal-caret {
898
+ display: inline-block;
899
+ width: 0.12em;
900
+ height: 1.05em;
901
+ margin-left: 0.12em;
902
+ vertical-align: -0.15em;
903
+ border-radius: 1px;
904
+ background: currentcolor;
905
+ opacity: 0.55;
906
+ }
907
+ :is(html,#callimacus#callimacus) .cal-chapter:not([data-state='streaming']) .cal-caret {
908
+ display: none;
909
+ }
910
+ :is(html,#callimacus#callimacus) .cal-prose--answer > p:first-child {
911
+ font-size: var(--cal-lede);
912
+ line-height: 1.45;
913
+ letter-spacing: -0.005em;
914
+ color: var(--cal-fg);
915
+ }
916
+ :is(html,#callimacus#callimacus) .cal-hero--lead {
917
+ padding-top: 0;
918
+ }
919
+ :is(html,#callimacus#callimacus) .cal-hero__banner {
920
+ position: relative;
921
+ display: grid;
922
+ }
923
+ :is(html,#callimacus#callimacus) .cal-hero__banner--image {
924
+ aspect-ratio: 4 / 5;
925
+ }
926
+ :is(html,#callimacus#callimacus) .cal-hero__media {
927
+ position: absolute;
928
+ inset: 0;
929
+ }
930
+ :is(html,#callimacus#callimacus) .cal-hero__media::after {
931
+ content: '';
932
+ position: absolute;
933
+ inset: 0;
934
+ z-index: 1;
935
+ background: linear-gradient(to top, rgb(0 0 0 / 68%), rgb(0 0 0 / 42%) 45%, rgb(0 0 0 / 14%) 78%, rgb(0 0 0 / 0%));
936
+ }
937
+ :is(html,#callimacus#callimacus) .cal-hero__content {
938
+ position: relative;
939
+ z-index: 2;
940
+ display: flex;
941
+ align-items: flex-end;
942
+ justify-content: flex-start;
943
+ width: 100%;
944
+ padding-block: clamp(24px, 16px + 3vw, 64px);
945
+ }
946
+ :is(html,#callimacus#callimacus) .cal-hero__banner--text .cal-hero__content {
947
+ padding-block: clamp(48px, 30px + 6vw, 120px) clamp(24px, 16px + 3vw, 64px);
948
+ }
949
+ :is(html,#callimacus#callimacus) .cal-hero__box {
950
+ position: relative;
951
+ width: 100%;
952
+ min-width: 0;
953
+ max-width: 760px;
954
+ text-align: left;
955
+ overflow-wrap: break-word;
956
+ }
957
+ :is(html,#callimacus#callimacus) .cal-hero__banner--image .cal-hero__box {
958
+ --cal-fg: #fff;
959
+ color: var(--cal-fg);
960
+ }
961
+ :is(html,#callimacus#callimacus) .cal-hero--lead .cal-hero__box > * {
962
+ margin: 0;
963
+ }
964
+ :is(html,#callimacus#callimacus) .cal-hero--lead .cal-hero__box > * + * {
965
+ margin-top: 16px;
966
+ }
967
+ :is(html,#callimacus#callimacus) .cal-hero--lead .cal-hero__box > * + .cal-hero__buttons {
968
+ margin-top: 28px;
969
+ }
970
+ :is(html,#callimacus#callimacus) .cal-hero__banner--image .cal-eyebrow {
971
+ text-shadow: 0 1px 12px rgb(0 0 0 / 35%);
972
+ }
973
+ :is(html,#callimacus#callimacus) .cal-hero__box .cal-eyebrow {
974
+ color: color-mix(in srgb, var(--cal-fg) 86%, transparent);
975
+ }
976
+ :is(html,#callimacus#callimacus) .cal-hero__dek {
977
+ max-width: 46ch;
978
+ font-size: var(--cal-lede);
979
+ line-height: 1.4;
980
+ color: color-mix(in srgb, var(--cal-fg) 90%, transparent);
981
+ }
982
+ :is(html,#callimacus#callimacus) .cal-hero__buttons {
983
+ display: inline-flex;
984
+ flex-wrap: wrap;
985
+ gap: 10px;
986
+ max-width: 100%;
987
+ }
988
+ :is(html,#callimacus#callimacus) .cal-hero__cta {
989
+ gap: 12px;
990
+ max-width: 100%;
991
+ padding-block: 12px;
992
+ text-align: left;
993
+ }
994
+ :is(html,#callimacus#callimacus) .cal-hero__cta .cal-icon--arrow {
995
+ width: 15px;
996
+ }
997
+ @media screen and (width >= 750px) {
998
+ :is(html,#callimacus#callimacus) .cal-hero__banner--image {
999
+ aspect-ratio: 16 / 10;
1000
+ }
1001
+ :is(html,#callimacus#callimacus) .cal-hero__banner--image .cal-hero__box {
1002
+ max-width: 680px;
1003
+ }
1004
+ }
1005
+ @media screen and (width >= 1200px) {
1006
+ :is(html,#callimacus#callimacus) .cal-hero__banner--image {
1007
+ aspect-ratio: 21 / 9;
1008
+ }
1009
+ }
1010
+ :is(html,#callimacus#callimacus) .cal-hero__row {
1011
+ display: flex;
1012
+ align-items: flex-end;
1013
+ gap: clamp(16px, 10px + 2vw, 40px);
1014
+ }
1015
+ :is(html,#callimacus#callimacus) .cal-hero__thumb {
1016
+ flex: none;
1017
+ width: clamp(96px, 60px + 6vw, 160px);
1018
+ aspect-ratio: 4 / 5;
1019
+ border-radius: var(--cal-radius-media);
1020
+ }
1021
+ :is(html,#callimacus#callimacus) .cal-hero__text {
1022
+ display: grid;
1023
+ flex: 1;
1024
+ justify-items: start;
1025
+ gap: 12px;
1026
+ min-width: 0;
1027
+ }
1028
+ :is(html,#callimacus#callimacus) .cal-hero--compact .cal-hero__dek {
1029
+ margin: 0;
1030
+ max-width: 60ch;
1031
+ font-size: 17px;
1032
+ line-height: 1.5;
1033
+ color: color-mix(in srgb, var(--cal-fg) 76%, transparent);
1034
+ }
1035
+ :is(html,#callimacus#callimacus) .cal-card {
1036
+ height: 100%;
1037
+ }
1038
+ :is(html,#callimacus#callimacus) .cal-card--pending .cal-card__quick-add,
1039
+ :is(html,#callimacus#callimacus) .cal-card__skeleton .cal-card__quick-add {
1040
+ visibility: hidden;
1041
+ }
1042
+ :is(html,#callimacus#callimacus) .cal-card__line {
1043
+ display: block;
1044
+ width: 70%;
1045
+ height: 1em;
1046
+ border-radius: 2px;
1047
+ background: color-mix(in srgb, var(--cal-fg) 8%, transparent);
1048
+ }
1049
+ :is(html,#callimacus#callimacus) .cal-steps {
1050
+ display: grid;
1051
+ grid-template-columns: minmax(0, 1fr);
1052
+ gap: 32px;
1053
+ margin: 0;
1054
+ padding: 0;
1055
+ list-style: none;
1056
+ }
1057
+ :is(html,#callimacus#callimacus) .cal-step {
1058
+ display: flex;
1059
+ }
1060
+ :is(html,#callimacus#callimacus) .cal-step__card {
1061
+ display: flex;
1062
+ gap: 16px;
1063
+ width: 100%;
1064
+ padding-top: 20px;
1065
+ border-top: 1px solid color-mix(in srgb, var(--cal-fg) 85%, transparent);
1066
+ }
1067
+ :is(html,#callimacus#callimacus) .cal-step__index {
1068
+ flex: none;
1069
+ width: 56px;
1070
+ font-family: var(--cal-font-heading);
1071
+ font-weight: var(--cal-font-heading-weight);
1072
+ font-size: clamp(32px, 26px + 1.8vw, 56px);
1073
+ line-height: 0.9;
1074
+ letter-spacing: -0.04em;
1075
+ font-variant-numeric: tabular-nums;
1076
+ color: var(--cal-fg);
1077
+ }
1078
+ :is(html,#callimacus#callimacus) .cal-step__info {
1079
+ display: flex;
1080
+ flex: 1;
1081
+ flex-direction: column;
1082
+ align-items: flex-start;
1083
+ gap: 12px;
1084
+ min-width: 0;
1085
+ padding: 0;
1086
+ }
1087
+ :is(html,#callimacus#callimacus) .cal-step__info > * {
1088
+ margin: 0;
1089
+ }
1090
+ :is(html,#callimacus#callimacus) .cal-step__info > :nth-child(2) {
1091
+ margin-top: 10px;
1092
+ }
1093
+ :is(html,#callimacus#callimacus) .cal-step__title {
1094
+ font-size: clamp(18px, 16px + 0.4vw, 22px);
1095
+ line-height: 1.25;
1096
+ letter-spacing: -0.005em;
1097
+ }
1098
+ :is(html,#callimacus#callimacus) .cal-step__body {
1099
+ font-size: 15px;
1100
+ line-height: 1.6;
1101
+ color: color-mix(in srgb, var(--cal-fg) 76%, transparent);
1102
+ }
1103
+ :is(html,#callimacus#callimacus) .cal-step__info > .cal-step__shop {
1104
+ margin-top: auto;
1105
+ }
1106
+ @media screen and (width >= 750px) {
1107
+ :is(html,#callimacus#callimacus) .cal-steps {
1108
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1109
+ gap: 48px 24px;
1110
+ }
1111
+ :is(html,#callimacus#callimacus) .cal-step__card {
1112
+ flex-direction: column;
1113
+ gap: 24px;
1114
+ }
1115
+ :is(html,#callimacus#callimacus) .cal-step__index {
1116
+ width: auto;
1117
+ }
1118
+ }
1119
+ @media screen and (width >= 990px) {
1120
+ :is(html,#callimacus#callimacus) .cal-steps--3 {
1121
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1122
+ }
1123
+ :is(html,#callimacus#callimacus) .cal-steps--4 {
1124
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1125
+ }
1126
+ }
1127
+ :is(html,#callimacus#callimacus) .cal-chips {
1128
+ display: flex;
1129
+ flex-wrap: wrap;
1130
+ gap: 10px;
1131
+ margin: 0;
1132
+ padding: 0;
1133
+ list-style: none;
1134
+ }
1135
+ :is(html,#callimacus#callimacus) .cal-chips > li {
1136
+ max-width: 100%;
1137
+ }
1138
+ :is(html,#callimacus#callimacus) button.cal-chip {
1139
+ justify-content: space-between;
1140
+ gap: 10px;
1141
+ min-width: 0;
1142
+ max-width: 100%;
1143
+ min-height: 44px;
1144
+ padding: 10px 18px;
1145
+ font-size: 14px;
1146
+ letter-spacing: 0.4px;
1147
+ line-height: 1.3;
1148
+ text-align: left;
1149
+ }
1150
+ :is(html,#callimacus#callimacus) button.cal-chip--compact {
1151
+ min-height: 40px;
1152
+ padding: 8px 14px;
1153
+ font-size: 13px;
1154
+ }
1155
+ :is(html,#callimacus#callimacus) .cal-chip .cal-icon--arrow {
1156
+ width: 13px;
1157
+ }
1158
+ :is(html,#callimacus#callimacus) .cal-next .cal-section__inner,
1159
+ :is(html,#callimacus#callimacus) .cal-redirect .cal-section__inner {
1160
+ display: grid;
1161
+ justify-items: start;
1162
+ gap: 16px;
1163
+ }
1164
+ :is(html,#callimacus#callimacus) .cal-next__title {
1165
+ margin: 0;
1166
+ }
1167
+ :is(html,#callimacus#callimacus) .cal-redirect .cal-section__inner {
1168
+ gap: 24px;
1169
+ }
1170
+ :is(html,#callimacus#callimacus) .cal-redirect__text {
1171
+ max-width: 40ch;
1172
+ margin: 0;
1173
+ font-size: var(--cal-lede);
1174
+ line-height: 1.4;
1175
+ color: var(--cal-fg);
1176
+ text-wrap: balance;
1177
+ }
1178
+ :is(html,#callimacus#callimacus) .cal-material__feature {
1179
+ display: grid;
1180
+ grid-template-columns: minmax(0, 1fr);
1181
+ align-items: center;
1182
+ }
1183
+ :is(html,#callimacus#callimacus) .cal-material__media {
1184
+ max-height: min(84vh, 760px);
1185
+ aspect-ratio: 4 / 5;
1186
+ border-radius: var(--cal-radius-media);
1187
+ }
1188
+ :is(html,#callimacus#callimacus) .cal-material__content {
1189
+ display: flex;
1190
+ flex-direction: column;
1191
+ align-items: flex-start;
1192
+ padding: 32px 0 0;
1193
+ }
1194
+ :is(html,#callimacus#callimacus) .cal-material__feature--text .cal-material__content {
1195
+ padding-top: 0;
1196
+ }
1197
+ :is(html,#callimacus#callimacus) .cal-material__content > * {
1198
+ margin: 0;
1199
+ }
1200
+ :is(html,#callimacus#callimacus) .cal-material__content > * + * {
1201
+ margin-top: 20px;
1202
+ }
1203
+ :is(html,#callimacus#callimacus) .cal-material__content > .cal-eyebrow + .cal-material__heading {
1204
+ margin-top: 12px;
1205
+ }
1206
+ :is(html,#callimacus#callimacus) .cal-facts {
1207
+ display: grid;
1208
+ width: 100%;
1209
+ max-width: 56ch;
1210
+ margin: 0;
1211
+ padding: 0;
1212
+ list-style: none;
1213
+ }
1214
+ :is(html,#callimacus#callimacus) .cal-material__content > .cal-facts {
1215
+ margin-top: 32px;
1216
+ }
1217
+ :is(html,#callimacus#callimacus) .cal-facts__item {
1218
+ padding-block: 14px;
1219
+ border-top: 1px solid color-mix(in srgb, var(--cal-fg) 14%, transparent);
1220
+ font-size: 15px;
1221
+ line-height: 1.5;
1222
+ }
1223
+ :is(html,#callimacus#callimacus) .cal-facts__item:last-child {
1224
+ border-bottom: 1px solid color-mix(in srgb, var(--cal-fg) 14%, transparent);
1225
+ }
1226
+ :is(html,#callimacus#callimacus) .cal-material__products {
1227
+ margin-top: clamp(40px, 30px + 3vw, 72px);
1228
+ }
1229
+ @media screen and (width >= 750px) {
1230
+ :is(html,#callimacus#callimacus) .cal-material__feature:not(.cal-material__feature--text) {
1231
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1232
+ }
1233
+ :is(html,#callimacus#callimacus) .cal-material__content {
1234
+ padding: 0 0 0 clamp(32px, 10px + 4vw, 96px);
1235
+ }
1236
+ :is(html,#callimacus#callimacus) .cal-material__feature--text .cal-material__content {
1237
+ padding-left: 0;
1238
+ }
1239
+ }
1240
+ :is(html,#callimacus#callimacus) .cal-faq__layout {
1241
+ display: grid;
1242
+ gap: 24px;
1243
+ padding-top: 16px;
1244
+ border-top: 1px solid color-mix(in srgb, var(--cal-fg) 85%, transparent);
1245
+ }
1246
+ :is(html,#callimacus#callimacus) .cal-faq__header {
1247
+ display: grid;
1248
+ align-content: start;
1249
+ gap: 12px;
1250
+ }
1251
+ :is(html,#callimacus#callimacus) .cal-faq__item {
1252
+ border-bottom: 1px solid color-mix(in srgb, var(--cal-fg) 14%, transparent);
1253
+ }
1254
+ :is(html,#callimacus#callimacus) .cal-faq__summary {
1255
+ position: relative;
1256
+ display: flex;
1257
+ align-items: center;
1258
+ padding: 18px 44px 18px 0;
1259
+ list-style: none;
1260
+ cursor: pointer;
1261
+ }
1262
+ :is(html,#callimacus#callimacus) .cal-faq__summary::-webkit-details-marker {
1263
+ display: none;
1264
+ }
1265
+ :is(html,#callimacus#callimacus) .cal-faq__question {
1266
+ margin: 0;
1267
+ font-size: clamp(16px, 15px + 0.3vw, 19px);
1268
+ line-height: 1.35;
1269
+ }
1270
+ :is(html,#callimacus#callimacus) .cal-faq__summary .cal-icon--caret {
1271
+ position: absolute;
1272
+ top: 50%;
1273
+ right: 4px;
1274
+ width: 12px;
1275
+ translate: 0 -50%;
1276
+ }
1277
+ :is(html,#callimacus#callimacus) .cal-faq details[open] > .cal-faq__summary .cal-icon--caret {
1278
+ rotate: 180deg;
1279
+ }
1280
+ :is(html,#callimacus#callimacus) .cal-faq__answer {
1281
+ margin: 0;
1282
+ padding: 0 44px 24px 0;
1283
+ }
1284
+ :is(html,#callimacus#callimacus) .cal-faq__answer .cal-prose {
1285
+ font-size: 15px;
1286
+ color: color-mix(in srgb, var(--cal-fg) 76%, transparent);
1287
+ }
1288
+ @media screen and (width >= 990px) {
1289
+ :is(html,#callimacus#callimacus) .cal-faq__layout {
1290
+ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
1291
+ gap: 64px;
1292
+ }
1293
+ }
1294
+ :is(html,#callimacus#callimacus) .cal-compare__layout {
1295
+ display: grid;
1296
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1297
+ gap: 24px var(--cal-grid-gap-mobile);
1298
+ padding-top: 16px;
1299
+ border-top: 1px solid color-mix(in srgb, var(--cal-fg) 85%, transparent);
1300
+ }
1301
+ :is(html,#callimacus#callimacus) .cal-compare__intro {
1302
+ display: grid;
1303
+ grid-column: 1 / -1;
1304
+ align-content: start;
1305
+ gap: 12px;
1306
+ }
1307
+ :is(html,#callimacus#callimacus) .cal-compare__summary {
1308
+ font-size: 16px;
1309
+ }
1310
+ :is(html,#callimacus#callimacus) .cal-compare__card--first {
1311
+ grid-column: 1;
1312
+ }
1313
+ :is(html,#callimacus#callimacus) .cal-compare__card--second {
1314
+ grid-column: 2;
1315
+ }
1316
+ :is(html,#callimacus#callimacus) .cal-compare__table,
1317
+ :is(html,#callimacus#callimacus) .cal-compare__row {
1318
+ display: grid;
1319
+ grid-column: 1 / -1;
1320
+ grid-template-columns: subgrid;
1321
+ }
1322
+ :is(html,#callimacus#callimacus) .cal-compare__row {
1323
+ row-gap: 6px;
1324
+ padding-block: 14px;
1325
+ border-top: 1px solid color-mix(in srgb, var(--cal-fg) 14%, transparent);
1326
+ }
1327
+ :is(html,#callimacus#callimacus) .cal-compare__row:last-child {
1328
+ border-bottom: 1px solid color-mix(in srgb, var(--cal-fg) 14%, transparent);
1329
+ }
1330
+ :is(html,#callimacus#callimacus) .cal-compare__aspect {
1331
+ grid-column: 1 / -1;
1332
+ font-size: 12px;
1333
+ font-weight: var(--cal-font-body-weight-bold);
1334
+ line-height: 1.4;
1335
+ letter-spacing: 0.14em;
1336
+ text-transform: uppercase;
1337
+ color: color-mix(in srgb, var(--cal-fg) 64%, transparent);
1338
+ }
1339
+ :is(html,#callimacus#callimacus) .cal-compare__value {
1340
+ font-size: 15px;
1341
+ line-height: 1.5;
1342
+ overflow-wrap: break-word;
1343
+ }
1344
+ :is(html,#callimacus#callimacus) .cal-compare:not(.cal-compare--text) .cal-compare__row--head {
1345
+ position: absolute;
1346
+ width: 1px;
1347
+ height: 1px;
1348
+ overflow: hidden;
1349
+ clip-path: inset(50%);
1350
+ white-space: nowrap;
1351
+ }
1352
+ :is(html,#callimacus#callimacus) .cal-compare__row--head .cal-compare__value {
1353
+ font-weight: var(--cal-font-body-weight-bold);
1354
+ }
1355
+ @media screen and (width >= 750px) {
1356
+ :is(html,#callimacus#callimacus) .cal-compare__layout {
1357
+ column-gap: var(--cal-grid-gap-desktop);
1358
+ }
1359
+ }
1360
+ @media screen and (width >= 990px) {
1361
+ :is(html,#callimacus#callimacus) .cal-compare__layout {
1362
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1363
+ column-gap: clamp(24px, 10px + 2vw, 48px);
1364
+ max-width: 1200px;
1365
+ }
1366
+ :is(html,#callimacus#callimacus) .cal-compare__intro {
1367
+ grid-column: 1;
1368
+ grid-row: 1;
1369
+ padding-right: 16px;
1370
+ }
1371
+ :is(html,#callimacus#callimacus) .cal-compare__card--first {
1372
+ grid-column: 2;
1373
+ grid-row: 1;
1374
+ }
1375
+ :is(html,#callimacus#callimacus) .cal-compare__card--second {
1376
+ grid-column: 3;
1377
+ grid-row: 1;
1378
+ }
1379
+ :is(html,#callimacus#callimacus) .cal-compare__aspect {
1380
+ grid-column: 1;
1381
+ }
1382
+ }
1383
+ :is(html,#callimacus#callimacus) .cal-set__collage {
1384
+ display: grid;
1385
+ grid-auto-flow: row;
1386
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1387
+ gap: 32px var(--cal-grid-gap-mobile);
1388
+ }
1389
+ :is(html,#callimacus#callimacus) .cal-set__collage--1 {
1390
+ max-width: 480px;
1391
+ }
1392
+ :is(html,#callimacus#callimacus) .cal-set__item > * {
1393
+ width: 100%;
1394
+ }
1395
+ :is(html,#callimacus#callimacus) .cal-set__collage--1 .cal-set__item--lead,
1396
+ :is(html,#callimacus#callimacus) .cal-set__collage--3 .cal-set__item--lead {
1397
+ grid-column: 1 / -1;
1398
+ }
1399
+ :is(html,#callimacus#callimacus) .cal-set__piece {
1400
+ display: grid;
1401
+ grid-template-rows: 1fr;
1402
+ grid-auto-rows: auto;
1403
+ gap: 12px;
1404
+ height: 100%;
1405
+ margin: 0;
1406
+ }
1407
+ :is(html,#callimacus#callimacus) .cal-set__why {
1408
+ max-width: 44ch;
1409
+ margin: 0;
1410
+ padding-left: 12px;
1411
+ border-left: 2px solid color-mix(in srgb, var(--cal-fg) 85%, transparent);
1412
+ font-size: 14px;
1413
+ line-height: 1.5;
1414
+ color: color-mix(in srgb, var(--cal-fg) 76%, transparent);
1415
+ }
1416
+ @media screen and (width >= 750px) {
1417
+ :is(html,#callimacus#callimacus) .cal-set__collage {
1418
+ column-gap: var(--cal-grid-gap-desktop);
1419
+ }
1420
+ :is(html,#callimacus#callimacus) .cal-set__collage--2 {
1421
+ max-width: 960px;
1422
+ }
1423
+ }
1424
+ @media screen and (width >= 990px) {
1425
+ :is(html,#callimacus#callimacus) .cal-set__collage--3 {
1426
+ grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
1427
+ grid-template-rows: auto auto;
1428
+ gap: 32px clamp(24px, 10px + 2vw, 48px);
1429
+ }
1430
+ :is(html,#callimacus#callimacus) .cal-set__collage--3 .cal-set__item--lead {
1431
+ grid-column: 1;
1432
+ grid-row: 1 / span 2;
1433
+ }
1434
+ }
1435
+ :is(html,#callimacus#callimacus) .cal-entries {
1436
+ display: grid;
1437
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1438
+ gap: clamp(24px, 16px + 1.6vw, 40px) var(--cal-grid-gap-mobile);
1439
+ margin: 0;
1440
+ padding: 0;
1441
+ list-style: none;
1442
+ }
1443
+ :is(html,#callimacus#callimacus) .cal-entries--3 {
1444
+ grid-template-columns: minmax(0, 1fr);
1445
+ }
1446
+ :is(html,#callimacus#callimacus) .cal-entries__item {
1447
+ min-width: 0;
1448
+ }
1449
+ :is(html,#callimacus#callimacus) .cal-entry {
1450
+ position: relative;
1451
+ display: flex;
1452
+ flex-direction: column;
1453
+ gap: 14px;
1454
+ height: 100%;
1455
+ }
1456
+ :is(html,#callimacus#callimacus) .cal-entry__media {
1457
+ aspect-ratio: 4 / 5;
1458
+ border-radius: var(--cal-radius-media);
1459
+ }
1460
+ :is(html,#callimacus#callimacus) .cal-entry--article .cal-entry__media {
1461
+ aspect-ratio: 3 / 2;
1462
+ }
1463
+ :is(html,#callimacus#callimacus) .cal-entry__body {
1464
+ display: grid;
1465
+ align-content: start;
1466
+ gap: 6px;
1467
+ }
1468
+ :is(html,#callimacus#callimacus) .cal-entry__body > * {
1469
+ margin: 0;
1470
+ }
1471
+ :is(html,#callimacus#callimacus) .cal-entry__meta {
1472
+ font-size: 13px;
1473
+ letter-spacing: 0.6px;
1474
+ font-variant-numeric: tabular-nums;
1475
+ color: color-mix(in srgb, var(--cal-fg) 60%, transparent);
1476
+ }
1477
+ :is(html,#callimacus#callimacus) .cal-entry__title {
1478
+ font-size: clamp(17px, 15px + 0.4vw, 20px);
1479
+ line-height: 1.3;
1480
+ letter-spacing: -0.005em;
1481
+ }
1482
+ :is(html,#callimacus#callimacus) .cal-entry__link {
1483
+ color: inherit;
1484
+ text-decoration: none;
1485
+ }
1486
+ :is(html,#callimacus#callimacus) .cal-entry__link::after {
1487
+ content: '';
1488
+ position: absolute;
1489
+ inset: 0;
1490
+ z-index: 1;
1491
+ border-radius: var(--cal-radius-card);
1492
+ }
1493
+ :is(html,#callimacus#callimacus) .cal-entry:hover .cal-entry__link {
1494
+ text-decoration: underline;
1495
+ text-underline-offset: 3px;
1496
+ }
1497
+ :is(html,#callimacus#callimacus) .cal-entry__link:focus-visible {
1498
+ outline: none;
1499
+ }
1500
+ :is(html,#callimacus#callimacus) .cal-entry__link:focus-visible::after {
1501
+ outline: 2px solid var(--cal-fg);
1502
+ outline-offset: 4px;
1503
+ }
1504
+ :is(html,#callimacus#callimacus) .cal-entry__text {
1505
+ display: -webkit-box;
1506
+ overflow: hidden;
1507
+ -webkit-box-orient: vertical;
1508
+ -webkit-line-clamp: 3;
1509
+ font-size: 15px;
1510
+ line-height: 1.55;
1511
+ color: color-mix(in srgb, var(--cal-fg) 76%, transparent);
1512
+ }
1513
+ :is(html,#callimacus#callimacus) .cal-entry--text {
1514
+ padding: clamp(20px, 16px + 1vw, 28px);
1515
+ border: 1px solid var(--cal-hairline);
1516
+ border-radius: var(--cal-radius-card);
1517
+ background: color-mix(in srgb, var(--cal-fg) 3%, transparent);
1518
+ }
1519
+ :is(html,#callimacus#callimacus) .cal-entry--text .cal-entry__title {
1520
+ font-size: clamp(19px, 17px + 0.5vw, 24px);
1521
+ line-height: 1.2;
1522
+ }
1523
+ @media screen and (width >= 750px) {
1524
+ :is(html,#callimacus#callimacus) .cal-entries {
1525
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1526
+ column-gap: var(--cal-grid-gap-desktop);
1527
+ }
1528
+ }
1529
+ @media screen and (width >= 990px) {
1530
+ :is(html,#callimacus#callimacus) .cal-entries--4 {
1531
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1532
+ }
1533
+ }
1534
+ :is(html,#callimacus#callimacus) .cal-pages__list {
1535
+ display: grid;
1536
+ gap: clamp(32px, 24px + 2vw, 48px);
1537
+ }
1538
+ :is(html,#callimacus#callimacus) .cal-page {
1539
+ display: grid;
1540
+ justify-items: start;
1541
+ gap: 12px;
1542
+ max-width: var(--cal-measure);
1543
+ padding-top: 16px;
1544
+ border-top: 1px solid color-mix(in srgb, var(--cal-fg) 85%, transparent);
1545
+ }
1546
+ :is(html,#callimacus#callimacus) .cal-page > * {
1547
+ margin: 0;
1548
+ }
1549
+ :is(html,#callimacus#callimacus) .cal-page .cal-page__text {
1550
+ font-size: 16px;
1551
+ color: color-mix(in srgb, var(--cal-fg) 82%, transparent);
1552
+ }
1553
+ :is(html,#callimacus#callimacus) .cal-page > .cal-page__link {
1554
+ margin-top: 4px;
1555
+ }
1556
+ :is(html,#callimacus#callimacus) .cal-prose--note {
1557
+ padding-left: 16px;
1558
+ border-left: 2px solid color-mix(in srgb, var(--cal-fg) 20%, transparent);
1559
+ font-size: 15px;
1560
+ color: color-mix(in srgb, var(--cal-fg) 72%, transparent);
1561
+ }
1562
+ :is(html,#callimacus#callimacus) .cal-note .cal-grid,
1563
+ :is(html,#callimacus#callimacus) .cal-note .cal-entries {
1564
+ margin-top: 32px;
1565
+ }
1566
+ :is(html,#callimacus#callimacus) .cal-welcome:not([hidden]) {
1567
+ display: block;
1568
+ padding-block: calc(var(--cal-gap) / 2);
1569
+ }
1570
+ :is(html,#callimacus#callimacus) .cal-stage__intro {
1571
+ padding-block: clamp(40px, 30px + 3vw, 80px) clamp(16px, 10px + 1.6vw, 32px);
1572
+ }
1573
+ :is(html,#callimacus#callimacus) .cal-stage__heading {
1574
+ margin: 0;
1575
+ font-size: clamp(32px, 24px + 2.4vw, 56px);
1576
+ line-height: 1.04;
1577
+ letter-spacing: -0.02em;
1578
+ }
1579
+ :is(html,#callimacus#callimacus) .cal-stage__lede {
1580
+ max-width: 52ch;
1581
+ margin: 12px 0 0;
1582
+ font-size: var(--cal-lede);
1583
+ line-height: 1.45;
1584
+ color: color-mix(in srgb, var(--cal-fg) 72%, transparent);
1585
+ }
1586
+ :is(html,#callimacus#callimacus) .cal-entrance__form {
1587
+ display: flex;
1588
+ gap: 8px;
1589
+ max-width: 640px;
1590
+ margin-top: 24px;
1591
+ }
1592
+ :is(html,#callimacus#callimacus) .cal-entrance__input {
1593
+ flex: 1;
1594
+ min-width: 0;
1595
+ min-height: 44px;
1596
+ margin: 0;
1597
+ padding: 0 16px;
1598
+ border: 1px solid color-mix(in srgb, var(--cal-fg) 24%, transparent);
1599
+ border-radius: var(--cal-radius-button);
1600
+ background: transparent;
1601
+ color: var(--cal-fg);
1602
+ font: inherit;
1603
+ font-size: 16px;
1604
+ }
1605
+ :is(html,#callimacus#callimacus) .cal-entrance__input:disabled {
1606
+ opacity: 0.55;
1607
+ }
1608
+ :is(html,#callimacus#callimacus) .cal-entrance__starters {
1609
+ display: flex;
1610
+ flex-wrap: wrap;
1611
+ gap: 8px;
1612
+ margin-top: 16px;
1613
+ }
1614
+ :is(html,#callimacus#callimacus) .cal-stage__editor-note {
1615
+ margin: 24px 0;
1616
+ padding: 40px 20px;
1617
+ border: 1px dashed color-mix(in srgb, var(--cal-fg) 24%, transparent);
1618
+ border-radius: var(--cal-radius-media);
1619
+ font-size: 14px;
1620
+ text-align: center;
1621
+ color: color-mix(in srgb, var(--cal-fg) 64%, transparent);
1622
+ }
1623
+ @media (prefers-reduced-motion: no-preference) {
1624
+ :is(html,#callimacus#callimacus) .cal-reveal {
1625
+ opacity: 0;
1626
+ transition: opacity 0.6s var(--cal-ease);
1627
+ }
1628
+ :is(html,#callimacus#callimacus) .cal-reveal.is-ready {
1629
+ opacity: 1;
1630
+ }
1631
+ :is(html,#callimacus#callimacus) .cal-hero--lead .cal-reveal {
1632
+ transform: scale(1.04);
1633
+ transition: opacity 0.8s var(--cal-ease), transform 1.6s var(--cal-ease);
1634
+ }
1635
+ :is(html,#callimacus#callimacus) .cal-hero--lead .cal-reveal.is-ready {
1636
+ transform: none;
1637
+ }
1638
+ :is(html,#callimacus#callimacus) .cal-caret {
1639
+ animation: cal-caret 1.1s ease-in-out infinite;
1640
+ }
1641
+ :is(html,#callimacus#callimacus) .cal-card__line {
1642
+ animation: cal-pulse 1.6s ease-in-out infinite;
1643
+ }
1644
+ :is(html,#callimacus#callimacus) .cal-chip .cal-icon--arrow,
1645
+ :is(html,#callimacus#callimacus) .cal-link .cal-icon--arrow,
1646
+ :is(html,#callimacus#callimacus) .cal-hero__cta .cal-icon--arrow {
1647
+ transition: transform 0.2s var(--cal-ease);
1648
+ }
1649
+ :is(html,#callimacus#callimacus) .cal-chip:hover .cal-icon--arrow,
1650
+ :is(html,#callimacus#callimacus) .cal-link:hover .cal-icon--arrow,
1651
+ :is(html,#callimacus#callimacus) .cal-hero__cta:hover .cal-icon--arrow {
1652
+ transform: translateX(3px);
1653
+ }
1654
+ :is(html,#callimacus#callimacus) .cal-bar {
1655
+ transition: border-color 0.2s var(--cal-ease), box-shadow 0.2s var(--cal-ease);
1656
+ }
1657
+ :is(html,#callimacus#callimacus) .cal-faq__summary .cal-icon--caret {
1658
+ transition: rotate 0.3s var(--cal-ease);
1659
+ }
1660
+ @supports (interpolate-size: allow-keywords) and selector(::details-content) {
1661
+ :is(html,#callimacus#callimacus) .cal-faq details {
1662
+ interpolate-size: allow-keywords;
1663
+ }
1664
+ :is(html,#callimacus#callimacus) .cal-faq details::details-content {
1665
+ height: 0;
1666
+ overflow: clip;
1667
+ transition: height 0.3s var(--cal-ease), content-visibility 0.3s allow-discrete;
1668
+ }
1669
+ :is(html,#callimacus#callimacus) .cal-faq details[open]::details-content {
1670
+ height: auto;
1671
+ }
1672
+ }
1673
+ }
1674
+ @keyframes cal-caret {
1675
+ 0%,
1676
+ 100% {
1677
+ opacity: 0.65;
1678
+ }
1679
+ 50% {
1680
+ opacity: 0.1;
1681
+ }
1682
+ }
1683
+ @keyframes cal-pulse {
1684
+ 0%,
1685
+ 100% {
1686
+ opacity: 1;
1687
+ }
1688
+ 50% {
1689
+ opacity: 0.55;
1690
+ }
1691
+ }
1692
+ :where(:root) {
1693
+ --cal-button-bg: var(--cal-fg);
1694
+ --cal-button-fg: var(--cal-bg);
1695
+ --cal-button-border-color: var(--cal-button-bg);
1696
+ --cal-button-border-width: 1px;
1697
+ --cal-button-transform: none;
1698
+ --cal-button-letter-spacing: 0;
1699
+ --cal-button2-fg: var(--cal-fg);
1700
+ --cal-page-width: 1200px;
1701
+ --cal-body-size: 16px;
1702
+ --cal-heading-transform: none;
1703
+ }
1704
+ :is(html,#callimacus#callimacus)[data-callimacus-on] .cal-dock {
1705
+ display: flex;
1706
+ }
1707
+ :is(html,#callimacus#callimacus) .cal-stage,
1708
+ :is(html,#callimacus#callimacus) [data-callimacus-stage] {
1709
+ --cal-body: var(--cal-body-size);
1710
+ color: var(--cal-fg);
1711
+ font-family: var(--cal-font-body);
1712
+ }
1713
+ :is(html,#callimacus#callimacus) .cal-display,
1714
+ :is(html,#callimacus#callimacus) .cal-title,
1715
+ :is(html,#callimacus#callimacus) .cal-subtitle,
1716
+ :is(html,#callimacus#callimacus) .cal-stage__heading {
1717
+ text-transform: var(--cal-heading-transform);
1718
+ }
1719
+ :is(html,#callimacus#callimacus) .cal-page-width {
1720
+ width: min(var(--cal-page-width), 100% - 40px);
1721
+ margin-inline: auto;
1722
+ box-sizing: border-box;
1723
+ }
1724
+ @media screen and (width >= 750px) {
1725
+ :is(html,#callimacus#callimacus) .cal-page-width {
1726
+ width: min(var(--cal-page-width) - 80px, 100% - 80px);
1727
+ }
1728
+ }
1729
+ :is(html,#callimacus#callimacus) .cal-visually-hidden {
1730
+ position: absolute !important;
1731
+ overflow: hidden;
1732
+ width: 1px;
1733
+ height: 1px;
1734
+ margin: -1px;
1735
+ padding: 0;
1736
+ border: 0;
1737
+ clip-path: inset(50%);
1738
+ white-space: nowrap;
1739
+ }
1740
+ :is(html,#callimacus#callimacus) .cal-egrid {
1741
+ display: grid;
1742
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1743
+ column-gap: 12px;
1744
+ margin: 0;
1745
+ padding: 0;
1746
+ list-style: none;
1747
+ }
1748
+ :is(html,#callimacus#callimacus) .cal-egrid__item {
1749
+ min-width: 0;
1750
+ margin: 0;
1751
+ }
1752
+ :is(html,#callimacus#callimacus) .cal-grid {
1753
+ row-gap: clamp(24px, 16px + 1.6vw, 40px);
1754
+ }
1755
+ @media screen and (width >= 750px) {
1756
+ :is(html,#callimacus#callimacus) .cal-egrid {
1757
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1758
+ column-gap: 20px;
1759
+ }
1760
+ :is(html,#callimacus#callimacus) .cal-egrid--2 {
1761
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1762
+ }
1763
+ }
1764
+ @media screen and (width >= 990px) {
1765
+ :is(html,#callimacus#callimacus) .cal-egrid--4 {
1766
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1767
+ }
1768
+ :is(html,#callimacus#callimacus) .cal-egrid--5 {
1769
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1770
+ }
1771
+ }
1772
+ :is(html,#callimacus#callimacus) .cal-button {
1773
+ display: inline-flex;
1774
+ align-items: center;
1775
+ justify-content: center;
1776
+ gap: 8px;
1777
+ min-height: 44px;
1778
+ padding: 10px 24px;
1779
+ border: var(--cal-button-border-width) solid var(--cal-button-border-color);
1780
+ border-radius: var(--cal-radius-button);
1781
+ background: var(--cal-button-bg);
1782
+ color: var(--cal-button-fg);
1783
+ font-family: var(--cal-font-button, var(--cal-font-body));
1784
+ font-size: 15px;
1785
+ font-weight: var(--cal-font-button-weight, var(--cal-font-body-weight));
1786
+ letter-spacing: var(--cal-button-letter-spacing);
1787
+ line-height: 1.2;
1788
+ text-decoration: none;
1789
+ text-transform: var(--cal-button-transform);
1790
+ cursor: pointer;
1791
+ transition: opacity 0.15s, background-color 0.15s;
1792
+ }
1793
+ :is(html,#callimacus#callimacus) .cal-button:hover {
1794
+ opacity: 0.88;
1795
+ }
1796
+ :is(html,#callimacus#callimacus) .cal-button:focus-visible {
1797
+ outline: 2px solid var(--cal-fg);
1798
+ outline-offset: 2px;
1799
+ }
1800
+ :is(html,#callimacus#callimacus) .cal-button--secondary,
1801
+ :is(html,#callimacus#callimacus)[data-callimacus-template='product'] .cal-button {
1802
+ border-width: max(1px, var(--cal-button-border-width));
1803
+ border-color: color-mix(in srgb, var(--cal-button2-fg) 70%, transparent);
1804
+ background: transparent;
1805
+ color: var(--cal-button2-fg);
1806
+ }
1807
+ :is(html,#callimacus#callimacus) .cal-button--secondary:hover,
1808
+ :is(html,#callimacus#callimacus)[data-callimacus-template='product'] .cal-button:hover {
1809
+ opacity: 1;
1810
+ background: color-mix(in srgb, var(--cal-button2-fg) 6%, transparent);
1811
+ }
1812
+ :is(html,#callimacus#callimacus) .cal-button[disabled],
1813
+ :is(html,#callimacus#callimacus) .cal-button[aria-disabled="true"] {
1814
+ opacity: 0.55;
1815
+ cursor: default;
1816
+ }
1817
+ :is(html,#callimacus#callimacus) .cal-link {
1818
+ color: var(--cal-fg);
1819
+ text-decoration: underline;
1820
+ text-underline-offset: 3px;
1821
+ }
1822
+ :is(html,#callimacus#callimacus) .cal-rte {
1823
+ color: var(--cal-fg);
1824
+ font-family: var(--cal-font-body);
1825
+ font-size: var(--cal-body-size);
1826
+ line-height: 1.6;
1827
+ }
1828
+ :is(html,#callimacus#callimacus) .cal-rte a {
1829
+ color: inherit;
1830
+ text-decoration: underline;
1831
+ }
1832
+ :is(html,#callimacus#callimacus) .cal-ecard {
1833
+ display: flex;
1834
+ flex-direction: column;
1835
+ gap: 8px;
1836
+ height: 100%;
1837
+ }
1838
+ :is(html,#callimacus#callimacus) .cal-ecard__media {
1839
+ position: relative;
1840
+ aspect-ratio: 4 / 5;
1841
+ overflow: hidden;
1842
+ border-radius: var(--cal-radius-media, 0);
1843
+ background: color-mix(in srgb, var(--cal-fg) 5%, transparent);
1844
+ }
1845
+ :is(html,#callimacus#callimacus) .cal-ecard__image,
1846
+ :is(html,#callimacus#callimacus) .cal-ecard__image img {
1847
+ display: block;
1848
+ width: 100%;
1849
+ height: 100%;
1850
+ }
1851
+ :is(html,#callimacus#callimacus) .cal-ecard__image img {
1852
+ object-fit: cover;
1853
+ }
1854
+ :is(html,#callimacus#callimacus) .cal-ecard__info {
1855
+ display: grid;
1856
+ gap: 4px;
1857
+ }
1858
+ :is(html,#callimacus#callimacus) .cal-ecard__title {
1859
+ color: var(--cal-fg);
1860
+ font-family: var(--cal-font-body);
1861
+ font-size: var(--cal-body-size);
1862
+ line-height: 1.35;
1863
+ text-decoration: none;
1864
+ }
1865
+ :is(html,#callimacus#callimacus) .cal-ecard__title:hover {
1866
+ text-decoration-line: underline;
1867
+ }
1868
+ :is(html,#callimacus#callimacus) .cal-ecard__price {
1869
+ margin: 0;
1870
+ color: color-mix(in srgb, var(--cal-fg) 80%, transparent);
1871
+ font-family: var(--cal-font-body);
1872
+ font-size: calc(var(--cal-body-size) - 1px);
1873
+ }
1874
+ :is(html,#callimacus#callimacus) .cal-ecard__price--sold-out {
1875
+ color: color-mix(in srgb, var(--cal-fg) 55%, transparent);
1876
+ }
1877
+ :is(html,#callimacus#callimacus) .cal-ecard__quick-add {
1878
+ margin-top: 6px;
1879
+ }
1880
+ :is(html,#callimacus#callimacus) .cal-ecard__add {
1881
+ width: 100%;
1882
+ min-height: 40px;
1883
+ padding-block: 8px;
1884
+ font-size: 14px;
1885
+ }
1886
+ :is(html,#callimacus#callimacus) .cal-card__skeleton .cal-ecard__media {
1887
+ background: color-mix(in srgb, var(--cal-fg) 6%, transparent);
1888
+ }
1889
+ @media (prefers-reduced-motion: no-preference) {
1890
+ :is(html,#callimacus#callimacus) .cal-card__skeleton .cal-ecard__media {
1891
+ animation: cal-pulse 1.6s ease-in-out infinite;
1892
+ }
1893
+ }
1894
+ :is(html,#callimacus#callimacus) .cal-card > :not(.cal-ecard) {
1895
+ width: 100%;
1896
+ max-width: none;
1897
+ }
1898
+ :is(html,#callimacus#callimacus) .cal-set__collage--3 .cal-set__item--lead .cal-ecard__media {
1899
+ aspect-ratio: 1;
1900
+ }
1901
+ @media screen and (width >= 990px) {
1902
+ :is(html,#callimacus#callimacus) .cal-set__collage--3 .cal-set__item--lead .cal-ecard__media {
1903
+ flex: auto;
1904
+ min-height: 320px;
1905
+ aspect-ratio: auto;
1906
+ }
1907
+ :is(html,#callimacus#callimacus) .cal-set__collage--3 .cal-set__item--side .cal-ecard {
1908
+ flex-direction: row;
1909
+ align-items: flex-start;
1910
+ gap: 24px;
1911
+ }
1912
+ :is(html,#callimacus#callimacus) .cal-set__collage--3 .cal-set__item--side .cal-ecard__media {
1913
+ flex: 0 0 42%;
1914
+ width: 42%;
1915
+ }
1916
+ }
1917
+ :is(html,#callimacus#callimacus) .cal-header-ask {
1918
+ display: inline-flex;
1919
+ align-items: center;
1920
+ justify-content: center;
1921
+ border: 0;
1922
+ background: none;
1923
+ color: inherit;
1924
+ font: inherit;
1925
+ cursor: pointer;
1926
+ }
1927
+ :is(html,#callimacus#callimacus) .cal-header-ask svg {
1928
+ display: block;
1929
+ }
1930
+ :is(html,#callimacus#callimacus) .cal-stage__intro {
1931
+ padding-block: 32px 8px;
1932
+ }
1933
+ :is(html,#callimacus#callimacus) .cal-stage__heading {
1934
+ margin: 0;
1935
+ font-size: clamp(26px, 20px + 1.5vw, 42px);
1936
+ line-height: 1.1;
1937
+ }
1938
+ :is(html,#callimacus#callimacus) .cal-stage__lede {
1939
+ margin: 8px 0 0;
1940
+ color: color-mix(in srgb, var(--cal-fg) 70%, transparent);
1941
+ font-size: 17px;
1942
+ }
1943
+ :is(html,#callimacus#callimacus) .cal-toast {
1944
+ position: fixed;
1945
+ inset-inline: 0;
1946
+ bottom: calc(var(--cal-dock-space, 96px) + 8px);
1947
+ z-index: 95;
1948
+ display: flex;
1949
+ align-items: center;
1950
+ justify-content: space-between;
1951
+ gap: 16px;
1952
+ width: min(100% - 32px, 560px);
1953
+ margin-inline: auto;
1954
+ padding: 12px 12px 12px 18px;
1955
+ border: 1px solid var(--cal-hairline);
1956
+ border-radius: max(var(--cal-radius-button), 8px);
1957
+ background: var(--cal-bg);
1958
+ box-shadow: 0 8px 28px color-mix(in srgb, var(--cal-shadow) 18%, transparent);
1959
+ color: var(--cal-fg);
1960
+ font-family: var(--cal-font-body);
1961
+ font-size: 15px;
1962
+ }
1963
+ :is(html,#callimacus#callimacus) .cal-toast__text {
1964
+ margin: 0;
1965
+ }
1966
+ :is(html,#callimacus#callimacus) .cal-toast__action {
1967
+ flex: none;
1968
+ min-height: 38px;
1969
+ padding: 8px 16px;
1970
+ font-size: 14px;
1971
+ }
1972
+ @media (prefers-reduced-motion: no-preference) {
1973
+ :is(html,#callimacus#callimacus) .cal-toast {
1974
+ animation: cal-toast-in 240ms var(--cal-ease);
1975
+ }
1976
+ }
1977
+ @keyframes cal-toast-in {
1978
+ from {
1979
+ opacity: 0;
1980
+ transform: translateY(8px);
1981
+ }
1982
+ }