1/* ============================================
2 LIVE MODE — interactive demo loop
3 ============================================ */
4
5.live-section {
6 padding: var(--spacing-2xl) 0;
7 border-top: 1px solid var(--color-mist);
8}
9
10.live-content .section-lead {
11 max-width: 64ch;
12 margin-bottom: var(--spacing-xl);
13}
14
15.live-demo {
16 display: grid;
17 grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
18 gap: var(--spacing-xl);
19 align-items: start;
20 margin-bottom: var(--spacing-xl);
21}
22.live-demo-frame-col {
23 display: flex;
24 flex-direction: column;
25 gap: var(--spacing-md);
26 min-width: 0;
27}
28@media (max-width: 920px) {
29 .live-demo { grid-template-columns: 1fr; }
30}
31
32.live-demo-frame {
33 position: relative;
34 background: var(--color-cream);
35 border: 1px solid var(--color-mist);
36 border-radius: 12px;
37 overflow: hidden;
38 aspect-ratio: 16 / 9;
39 max-width: 960px;
40 box-shadow: 0 20px 50px oklch(0% 0 0 / 0.08);
41 user-select: none;
42}
43
44.live-demo-chrome {
45 display: flex;
46 align-items: center;
47 gap: 7px;
48 padding: 10px 14px;
49 border-bottom: 1px solid var(--color-mist);
50 background: var(--color-paper);
51}
52.live-demo-dot {
53 width: 10px;
54 height: 10px;
55 border-radius: 50%;
56 background: var(--color-mist);
57}
58.live-demo-url {
59 margin-left: 14px;
60 padding: 4px 14px;
61 background: var(--color-cream);
62 border: 1px solid var(--color-mist);
63 border-radius: 5px;
64 font-family: var(--font-mono);
65 font-size: 11px;
66 color: var(--color-charcoal);
67}
68
69.live-demo-stage {
70 position: relative;
71 height: calc(100% - 42px - 60px); /* minus chrome + bar */
72 display: flex;
73 align-items: center;
74 justify-content: center;
75 padding: 32px;
76 overflow: hidden;
77}
78
79/* Target card */
80.live-demo-target {
81 position: relative;
82 width: min(360px, 80%);
83 min-height: 200px;
84}
85.live-demo-variant {
86 position: absolute;
87 inset: 0;
88 opacity: 0;
89 transform: translateY(8px) scale(0.99);
90 transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
91 pointer-events: none;
92}
93.live-demo-variant.is-active {
94 opacity: 1;
95 transform: translateY(0) scale(1);
96 pointer-events: auto;
97}
98.live-demo-card {
99 display: flex;
100 flex-direction: column;
101 gap: 10px;
102 padding: 22px 24px;
103 background: var(--color-paper);
104 border: 1px solid var(--color-mist);
105 border-radius: 8px;
106 height: 100%;
107 box-sizing: border-box;
108}
109.live-demo-card-kicker {
110 font-family: var(--font-mono);
111 font-size: 10px;
112 letter-spacing: 0.18em;
113 text-transform: uppercase;
114 color: var(--color-ash);
115}
116.live-demo-card h3 {
117 font-family: var(--font-display);
118 font-weight: 400;
119 font-size: 20px;
120 line-height: 1.2;
121 color: var(--color-ink);
122 margin: 0;
123}
124.live-demo-card p {
125 font-family: var(--font-body);
126 font-size: 13px;
127 line-height: 1.5;
128 color: var(--color-charcoal);
129 margin: 0;
130}
131.live-demo-card button {
132 align-self: flex-start;
133 margin-top: auto;
134 font-family: var(--font-body);
135 font-weight: 500;
136 font-size: 12px;
137 letter-spacing: 0.06em;
138 text-transform: uppercase;
139 padding: 9px 16px;
140 background: var(--color-ink);
141 color: var(--color-paper);
142 border: 0;
143 border-radius: 0;
144 cursor: pointer;
145}
146
147/* Per-variant look */
148.live-demo-card--plain {}
149.live-demo-card--v1 {
150 background: var(--color-cream);
151}
152.live-demo-card--v1 h3 { font-style: italic; }
153.live-demo-card--v1 h3 em { color: var(--color-accent); font-style: italic; }
154.live-demo-card--v2 {
155 background: var(--color-paper);
156 border: 1px dashed var(--color-accent);
157}
158.live-demo-card--v2 .live-demo-card-kicker { color: var(--color-accent); }
159.live-demo-card--v2 h3 { font-family: var(--font-display); font-style: italic; }
160.live-demo-card--v2 button {
161 background: var(--color-accent);
162}
163.live-demo-card--v3 {
164 background: oklch(96% 0.02 350);
165 border: 1px solid var(--color-accent-soft);
166}
167.live-demo-card--v3 h3 em { color: var(--color-accent); font-style: italic; }
168.live-demo-card--v3 .live-demo-card-kicker { color: var(--color-accent-hover); }
169
170/* Highlight outline over the target */
171.live-demo-outline {
172 position: absolute;
173 border: 2px solid var(--color-accent);
174 border-radius: 8px;
175 pointer-events: none;
176 opacity: 0;
177 transition: opacity 200ms var(--ease-out), top 320ms var(--ease-out), left 320ms var(--ease-out), width 320ms var(--ease-out), height 320ms var(--ease-out);
178 box-shadow: 0 0 0 4px var(--color-accent-dim);
179}
180.live-demo-outline.is-visible {
181 opacity: 1;
182}
183
184/* Annotations */
185.live-demo-annotations {
186 position: absolute;
187 inset: 0;
188 pointer-events: none;
189 opacity: 0;
190 transition: opacity 280ms var(--ease-out);
191 color: var(--color-accent);
192}
193.live-demo-annotations.is-visible { opacity: 1; }
194.live-demo-stroke {
195 position: absolute;
196 width: 280px;
197 height: 56px;
198 top: 50%;
199 left: 50%;
200 transform: translate(-50%, -24px);
201 pointer-events: none;
202}
203.live-demo-stroke path {
204 stroke-dasharray: 1;
205 stroke-dashoffset: 1;
206}
207.live-demo-annotations.is-visible .live-demo-stroke path {
208 animation: liveDemoStroke 800ms var(--ease-out) forwards;
209}
210@keyframes liveDemoStroke {
211 to { stroke-dashoffset: 0; }
212}
213.live-demo-comment {
214 position: absolute;
215 top: 56%;
216 left: 50%;
217 transform: translate(-50%, 0);
218 padding: 5px 10px;
219 background: var(--color-ink);
220 color: var(--color-paper);
221 font-family: var(--font-mono);
222 font-size: 11px;
223 border-radius: 4px;
224 white-space: nowrap;
225 opacity: 0;
226 transition: opacity 200ms var(--ease-out);
227}
228.live-demo-annotations.is-comment-visible .live-demo-comment { opacity: 1; }
229
230/* Simulated cursor */
231.live-demo-cursor {
232 position: absolute;
233 top: 0;
234 left: 0;
235 width: 18px;
236 height: 22px;
237 pointer-events: none;
238 opacity: 0;
239 transform: translate(0, 0);
240 transition: opacity 200ms var(--ease-out), transform 560ms var(--ease-out-quint);
241 z-index: 5;
242 filter: drop-shadow(0 2px 4px oklch(0% 0 0 / 0.2));
243}
244.live-demo-cursor.is-visible { opacity: 1; }
245.live-demo-cursor.is-click svg path {
246 transform-origin: 4px 4px;
247 animation: liveDemoCursorClick 220ms var(--ease-out);
248}
249@keyframes liveDemoCursorClick {
250 0%, 100% { transform: scale(1); }
251 40% { transform: scale(0.78); }
252}
253
254/* Global bar — the persistent dark pill at the bottom of every session. */
255.live-demo-gbar {
256 position: absolute;
257 bottom: 14px;
258 left: 50%;
259 transform: translateX(-50%);
260 min-height: 36px;
261 padding: 0 4px;
262 background: oklch(14% 0 0);
263 color: oklch(92% 0 0);
264 border: 1px solid oklch(22% 0 0);
265 border-radius: 10px;
266 display: flex;
267 align-items: center;
268 gap: 2px;
269 font-family: var(--font-body);
270 font-size: 12px;
271 box-shadow: 0 8px 24px oklch(0% 0 0 / 0.2);
272 z-index: 4;
273}
274.live-demo-gbar-brand {
275 font-family: var(--font-display);
276 font-size: 16px;
277 color: var(--color-accent);
278 padding: 0 10px;
279}
280.live-demo-gbar-btn {
281 display: inline-flex;
282 align-items: center;
283 gap: 6px;
284 padding: 7px 10px;
285 background: transparent;
286 border: 0;
287 border-radius: 7px;
288 color: oklch(75% 0 0);
289 font: inherit;
290 cursor: pointer;
291}
292.live-demo-gbar-btn.is-active {
293 background: var(--color-accent-dim);
294 color: var(--color-accent);
295}
296.live-demo-gbar-dmd {
297 display: inline-grid;
298 grid-template: repeat(2, 1fr) / repeat(2, 1fr);
299 width: 12px;
300 height: 12px;
301 border-radius: 3px;
302 overflow: hidden;
303}
304.live-demo-gbar-dmd span:nth-child(1) { background: oklch(60% 0.25 350); }
305.live-demo-gbar-dmd span:nth-child(2) { background: oklch(60% 0.15 45); }
306.live-demo-gbar-dmd span:nth-child(3) { background: oklch(55% 0.12 250); }
307.live-demo-gbar-dmd span:nth-child(4) { background: oklch(30% 0 0); }
308.live-demo-gbar-divider {
309 width: 1px;
310 height: 18px;
311 background: oklch(28% 0 0);
312 margin: 0 4px;
313}
314.live-demo-gbar-x {
315 padding: 7px 10px;
316 background: transparent;
317 border: 0;
318 border-radius: 7px;
319 color: oklch(60% 0 0);
320 font-size: 13px;
321 cursor: pointer;
322}
323
324/* Contextual bar — LIGHT paper-backed pill that floats near the picked
325 element during a session. Matches live-browser.js's buildConfigureRow
326 look (dark command pill, transparent input, ×N count, magenta Go). */
327.live-demo-ctx {
328 position: absolute;
329 left: 50%;
330 transform: translate(-50%, 6px);
331 padding: 6px;
332 background: var(--color-paper);
333 border: 1px solid var(--color-mist);
334 border-radius: 10px;
335 box-shadow: 0 4px 20px oklch(0% 0 0 / 0.08), 0 1px 3px oklch(0% 0 0 / 0.06);
336 font-family: var(--font-body);
337 font-size: 12px;
338 color: var(--color-ink);
339 display: none;
340 opacity: 0;
341 transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
342 z-index: 3;
343 max-width: 90%;
344}
345.live-demo-ctx[data-phase="configuring"],
346.live-demo-ctx[data-phase="generating"],
347.live-demo-ctx[data-phase="cycling"],
348.live-demo-ctx[data-phase="accepted"] {
349 display: block;
350 opacity: 1;
351 transform: translate(-50%, 0);
352}
353.live-demo-ctx-row {
354 display: none;
355 align-items: center;
356 gap: 4px;
357}
358.live-demo-ctx[data-phase="configuring"] .live-demo-ctx-row--configure,
359.live-demo-ctx[data-phase="generating"] .live-demo-ctx-row--generating,
360.live-demo-ctx[data-phase="cycling"] .live-demo-ctx-row--cycling,
361.live-demo-ctx[data-phase="accepted"] .live-demo-ctx-row--accepted {
362 display: flex;
363}
364
365/* Configure row: [delight ▾] [input] [×3] [Go →] */
366.live-demo-ctx-pill {
367 display: inline-flex;
368 align-items: center;
369 gap: 4px;
370 padding: 5px 10px;
371 background: var(--color-ink);
372 color: var(--color-paper);
373 border: 0;
374 border-radius: 6px;
375 font-family: var(--font-body);
376 font-size: 12px;
377 font-weight: 500;
378 cursor: pointer;
379 white-space: nowrap;
380}
381.live-demo-ctx-pill-caret { font-size: 9px; opacity: 0.7; margin-left: 2px; }
382.live-demo-ctx-input {
383 display: inline-flex;
384 align-items: center;
385 flex: 1;
386 min-width: 180px;
387 padding: 5px 8px;
388 font-family: var(--font-body);
389 font-size: 12px;
390 color: var(--color-ink);
391}
392.live-demo-ctx-caret {
393 display: inline-block;
394 width: 1px;
395 height: 13px;
396 background: var(--color-ink);
397 margin-left: 2px;
398 animation: liveDemoCaret 1s steps(1) infinite;
399}
400@keyframes liveDemoCaret {
401 50% { opacity: 0; }
402}
403.live-demo-ctx-count {
404 padding: 4px 6px;
405 background: transparent;
406 border: 1px solid var(--color-mist);
407 border-radius: 5px;
408 font-family: var(--font-mono);
409 font-size: 11px;
410 font-weight: 600;
411 color: var(--color-ash);
412 cursor: pointer;
413}
414.live-demo-ctx-go {
415 padding: 5px 12px;
416 background: var(--color-accent);
417 color: var(--color-paper);
418 border: 0;
419 border-radius: 6px;
420 font-family: var(--font-body);
421 font-size: 12px;
422 font-weight: 600;
423 cursor: pointer;
424 white-space: nowrap;
425}
426
427/* Generating row */
428.live-demo-ctx-row--generating {
429 gap: 10px;
430 padding: 4px 12px 4px 6px;
431 font-family: var(--font-body);
432 font-size: 12px;
433 color: var(--color-charcoal);
434}
435.live-demo-ctx-spinner {
436 width: 14px;
437 height: 14px;
438 border-radius: 50%;
439 border: 1.5px solid var(--color-mist);
440 border-top-color: var(--color-accent);
441 animation: liveDemoSpin 700ms linear infinite;
442}
443@keyframes liveDemoSpin { to { transform: rotate(360deg); } }
444
445/* Cycling row */
446.live-demo-ctx-row--cycling { gap: 2px; padding: 2px; }
447.live-demo-ctx-nav {
448 padding: 4px 10px;
449 background: transparent;
450 border: 0;
451 border-radius: 5px;
452 color: var(--color-charcoal);
453 font-size: 14px;
454 cursor: pointer;
455}
456.live-demo-ctx-counter {
457 font-family: var(--font-mono);
458 font-size: 11px;
459 color: var(--color-ink);
460 padding: 0 6px;
461 min-width: 40px;
462 text-align: center;
463}
464.live-demo-ctx-divider {
465 width: 1px;
466 height: 18px;
467 background: var(--color-mist);
468 margin: 0 4px;
469}
470.live-demo-ctx-discard {
471 padding: 4px 10px;
472 background: transparent;
473 border: 0;
474 border-radius: 5px;
475 color: var(--color-ash);
476 font-size: 13px;
477 cursor: pointer;
478}
479.live-demo-ctx-accept {
480 padding: 5px 14px;
481 background: var(--color-ink);
482 color: var(--color-paper);
483 border: 0;
484 border-radius: 6px;
485 font-family: var(--font-body);
486 font-size: 12px;
487 font-weight: 600;
488 cursor: pointer;
489}
490
491/* Accepted confirmation row */
492.live-demo-ctx-row--accepted {
493 gap: 8px;
494 padding: 6px 14px;
495 font-family: var(--font-body);
496 font-size: 12px;
497 color: oklch(45% 0.18 145);
498}
499
500/* Phase caption under the frame */
501.live-demo-caption {
502 display: flex;
503 align-items: baseline;
504 gap: 10px;
505 font-family: var(--font-mono);
506 font-size: 11px;
507 letter-spacing: 0.12em;
508 text-transform: uppercase;
509 color: var(--color-ash);
510}
511.live-demo-caption::before {
512 content: "";
513 display: inline-block;
514 width: 8px;
515 height: 8px;
516 border-radius: 50%;
517 background: var(--color-accent);
518 animation: liveDemoPulse 1.6s var(--ease-out) infinite;
519}
520@keyframes liveDemoPulse {
521 0%, 100% { opacity: 1; transform: scale(1); }
522 50% { opacity: 0.4; transform: scale(0.7); }
523}
524.live-demo-caption-label { color: var(--color-ink); }
525
526/* Supporting row under the demo */
527.live-demo-support {
528 display: flex;
529 flex-direction: column;
530 gap: var(--spacing-md);
531 align-self: stretch;
532}
533.live-demo-support-cell {
534 display: grid;
535 grid-template-columns: 1fr;
536 gap: 4px;
537 padding-bottom: var(--spacing-md);
538 border-bottom: 1px dashed var(--color-mist);
539}
540.live-demo-support-cell:last-child {
541 border-bottom: 0;
542 padding-bottom: 0;
543}
544.live-demo-support-k {
545 font-family: var(--font-mono);
546 font-size: 12px;
547 font-weight: 600;
548 letter-spacing: 0.16em;
549 text-transform: uppercase;
550 color: var(--color-accent);
551}
552.live-demo-support-v {
553 font-family: var(--font-body);
554 font-size: 14px;
555 line-height: 1.55;
556 color: var(--color-ink);
557}
558.live-demo-support-v code {
559 font-family: var(--font-mono);
560 font-size: 0.875em;
561 background: var(--color-mist);
562 padding: 1px 6px;
563 border-radius: 3px;
564 color: var(--color-ink);
565}
566
567@media (max-width: 760px) {
568 .live-demo-frame { aspect-ratio: 4 / 5; }
569 .live-demo-target { width: 90%; }
570 .live-demo-bar { font-size: 11px; min-height: 32px; }
571 .live-demo-support { grid-template-columns: 1fr; gap: var(--spacing-md); }
572}
573
574@media (prefers-reduced-motion: reduce) {
575 .live-demo-cursor,
576 .live-demo-outline,
577 .live-demo-variant,
578 .live-demo-annotations,
579 .live-demo-stroke path {
580 transition: none !important;
581 animation: none !important;
582 }
583 .live-demo-caption::before { animation: none; }
584}
585/* ============================================
586 LIVE MODE — skeleton page + richer variants
587 ============================================ */
588
589/* Skeleton elements behind the target card — suggest "this is a real page" */
590.live-demo-skeleton {
591 position: absolute;
592 inset: 24px;
593 display: flex;
594 flex-direction: column;
595 gap: 14px;
596 opacity: 0.3;
597 pointer-events: none;
598 filter: blur(0.3px);
599}
600.live-demo-skel-nav {
601 display: flex;
602 align-items: center;
603 gap: 10px;
604 padding-bottom: 12px;
605 border-bottom: 1px solid var(--color-mist);
606}
607.live-demo-skel-logo {
608 width: 22px;
609 height: 22px;
610 border-radius: 4px;
611 background: var(--color-charcoal);
612}
613.live-demo-skel-link {
614 width: 48px;
615 height: 8px;
616 border-radius: 2px;
617 background: var(--color-mist);
618}
619.live-demo-skel-cta {
620 margin-left: auto;
621 width: 72px;
622 height: 24px;
623 border-radius: 4px;
624 background: var(--color-charcoal);
625}
626.live-demo-skel-heading {
627 width: 60%;
628 height: 18px;
629 border-radius: 3px;
630 background: var(--color-mist);
631 margin-top: 20px;
632}
633.live-demo-skel-line {
634 height: 8px;
635 border-radius: 2px;
636 background: var(--color-mist);
637}
638.live-demo-skel-line--short { width: 40%; }
639
640/* Target stays above skeleton */
641.live-demo-target { position: relative; z-index: 1; }
642
643/* ---- Card variants — sharper, more distinct ---- */
644
645/* Variant 1: magazine column — italic serif, rule lines, off-white */
646.live-demo-card--v1 {
647 background: var(--color-cream);
648 padding: 18px 22px;
649 border: 0;
650 border-top: 3px solid var(--color-ink);
651 border-radius: 0;
652 gap: 6px;
653}
654.live-demo-card--v1 .live-demo-card-kicker {
655 color: var(--color-accent);
656 font-family: var(--font-mono);
657 font-size: 10px;
658 letter-spacing: 0.28em;
659}
660.live-demo-card--v1 h3 {
661 font-family: var(--font-display);
662 font-style: italic;
663 font-weight: 400;
664 font-size: 28px;
665 line-height: 1.05;
666 letter-spacing: -0.01em;
667 margin-top: 4px;
668}
669.live-demo-card--v1 h3 em { color: var(--color-accent); font-style: italic; }
670.live-demo-card--v1 p {
671 font-family: var(--font-display);
672 font-style: italic;
673 font-size: 14px;
674 line-height: 1.55;
675 color: var(--color-charcoal);
676}
677.live-demo-card--v1 button {
678 font-family: var(--font-body);
679 align-self: flex-start;
680 margin-top: 6px;
681 background: transparent;
682 color: var(--color-ink);
683 border: 0;
684 border-bottom: 1.5px solid var(--color-ink);
685 padding: 4px 0;
686 border-radius: 0;
687 letter-spacing: 0.08em;
688}
689
690/* Variant 2: brutalist ticket — thick ink block, stamp glyph, mono */
691.live-demo-card--v2 {
692 position: relative;
693 background: var(--color-ink);
694 color: var(--color-paper);
695 padding: 20px 24px;
696 border: 0;
697 border-radius: 0;
698 overflow: hidden;
699 gap: 8px;
700}
701.live-demo-card--v2::before {
702 content: "";
703 position: absolute;
704 left: 0;
705 top: 0;
706 bottom: 0;
707 width: 6px;
708 background: var(--color-accent);
709}
710.live-demo-card-stamp {
711 position: absolute;
712 top: 14px;
713 right: 18px;
714 font-size: 28px;
715 line-height: 1;
716 color: var(--color-accent);
717 transform: rotate(-8deg);
718}
719.live-demo-card--v2 .live-demo-card-kicker {
720 color: var(--color-accent);
721 letter-spacing: 0.3em;
722 font-weight: 600;
723}
724.live-demo-card--v2 h3 {
725 font-family: var(--font-body);
726 font-weight: 700;
727 font-size: 24px;
728 line-height: 1.1;
729 color: var(--color-paper);
730 letter-spacing: -0.02em;
731}
732.live-demo-card--v2 button {
733 font-family: var(--font-mono);
734 font-weight: 500;
735 align-self: flex-start;
736 margin-top: 6px;
737 background: var(--color-accent);
738 color: var(--color-paper);
739 border: 0;
740 border-radius: 0;
741 padding: 9px 14px;
742 letter-spacing: 0.04em;
743 text-transform: none;
744 font-size: 12px;
745}
746
747/* Variant 3: playful ticket — accent background, sticker stars, postcard vibe */
748.live-demo-card--v3 {
749 position: relative;
750 background:
751 radial-gradient(circle at 20% 80%, oklch(92% 0.08 350) 0, transparent 45%),
752 var(--color-cream);
753 border: 1px dashed var(--color-accent);
754 border-radius: 10px;
755 padding: 22px 24px 20px;
756 gap: 8px;
757}
758.live-demo-card-sticker {
759 position: absolute;
760 top: 10px;
761 right: 14px;
762 display: flex;
763 gap: 3px;
764 color: var(--color-accent);
765 font-size: 14px;
766 line-height: 1;
767 transform: rotate(6deg);
768}
769.live-demo-card--v3 .live-demo-card-kicker {
770 font-family: var(--font-display);
771 font-style: italic;
772 font-weight: 400;
773 font-size: 13px;
774 letter-spacing: 0.04em;
775 color: var(--color-accent-hover);
776 text-transform: none;
777}
778.live-demo-card--v3 h3 {
779 font-family: var(--font-display);
780 font-weight: 400;
781 font-size: 22px;
782 line-height: 1.2;
783 color: var(--color-ink);
784}
785.live-demo-card--v3 button {
786 display: inline-flex;
787 align-items: center;
788 gap: 6px;
789 align-self: flex-start;
790 background: var(--color-ink);
791 color: var(--color-paper);
792 border: 0;
793 border-radius: 999px;
794 padding: 10px 18px;
795 font-family: var(--font-body);
796 font-weight: 500;
797 letter-spacing: 0.06em;
798 text-transform: none;
799 font-size: 12px;
800 margin-top: 6px;
801}
802