1/*
2 * impeccable.style — docs visual components.
3 *
4 * Static mocks that illustrate what each command/tutorial is talking about:
5 * Live Mode frames, PRODUCT/DESIGN file renderings, register side-by-sides,
6 * step artifacts, flow diagrams, and audit/critique report mocks.
7 *
8 * These are deliberately non-interactive. Docs readers should be able to
9 * scan them at their own pace, not chase animations.
10 *
11 * Namespaced with `.docs-viz-` to stay clear of the homepage's .why-*,
12 * .live-demo-*, and .platforms-* classes.
13 */
14
15/* ============================================
16 GENERIC HERO VISUAL WRAPPER
17 ============================================ */
18
19.docs-viz-hero {
20 margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
21 padding: clamp(1rem, 2vw, 1.5rem);
22 background: var(--color-cream);
23 border: 1px solid var(--color-mist);
24 border-radius: 10px;
25}
26
27.docs-viz-hero--plain {
28 background: transparent;
29 border: 0;
30 padding: 0;
31}
32
33.docs-viz-hero .docs-viz-caption,
34.docs-viz-caption {
35 margin: 16px 0 0;
36 font-family: var(--font-body);
37 font-size: 0.8125rem;
38 color: var(--color-ash);
39 line-height: 1.5;
40}
41
42.docs-viz-eyebrow {
43 display: inline-block;
44 font-family: var(--font-body);
45 font-size: 0.6875rem;
46 font-weight: 600;
47 text-transform: uppercase;
48 letter-spacing: 0.12em;
49 color: var(--color-accent);
50 margin-bottom: var(--spacing-sm);
51}
52
53/* ============================================
54 LIVE MODE — static browser frame
55
56 Shows the picker overlay in "cycling" state: outline on target,
57 context bar with 2/3 counter, global bar pinned to the bottom.
58 Dimensionally this mirrors the homepage .live-demo-frame but
59 paused and stripped to the informative state.
60 ============================================ */
61
62.docs-viz-live-frame {
63 position: relative;
64 background: var(--color-paper);
65 border: 1px solid var(--color-mist);
66 border-radius: 8px;
67 overflow: hidden;
68 box-shadow: 0 12px 32px oklch(0% 0 0 / 0.06);
69 font-family: var(--font-body);
70}
71
72.docs-viz-live-chrome {
73 display: flex;
74 align-items: center;
75 gap: 6px;
76 padding: 9px 12px;
77 border-bottom: 1px solid var(--color-mist);
78 background: var(--color-cream);
79}
80
81.docs-viz-live-dot {
82 width: 9px;
83 height: 9px;
84 border-radius: 50%;
85 background: var(--color-mist);
86}
87
88.docs-viz-live-url {
89 margin-left: 10px;
90 padding: 3px 10px;
91 background: var(--color-paper);
92 border: 1px solid var(--color-mist);
93 border-radius: 4px;
94 font-family: var(--font-mono);
95 font-size: 10px;
96 color: var(--color-charcoal);
97}
98
99.docs-viz-live-stage {
100 position: relative;
101 min-height: 260px;
102 padding: 36px 28px 68px;
103 background: var(--color-paper);
104 display: flex;
105 align-items: center;
106 justify-content: center;
107}
108
109.docs-viz-live-stage--tall {
110 min-height: 340px;
111}
112
113.docs-viz-live-target {
114 position: relative;
115 width: min(320px, 78%);
116 padding: 18px 20px;
117 background: var(--color-cream);
118 border: 1px dashed var(--color-accent);
119 border-radius: 6px;
120 display: flex;
121 flex-direction: column;
122 gap: 8px;
123}
124
125.docs-viz-live-kicker {
126 font-family: var(--font-mono);
127 font-size: 10px;
128 letter-spacing: 0.18em;
129 text-transform: uppercase;
130 color: var(--color-accent);
131}
132
133.docs-viz-live-title {
134 font-family: var(--font-display);
135 font-style: italic;
136 font-weight: 400;
137 font-size: 18px;
138 line-height: 1.2;
139 color: var(--color-ink);
140 margin: 0;
141}
142
143.docs-viz-live-title em {
144 color: var(--color-accent);
145 font-style: italic;
146}
147
148.docs-viz-live-body {
149 font-family: var(--font-body);
150 font-size: 12px;
151 line-height: 1.5;
152 color: var(--color-charcoal);
153 margin: 0;
154}
155
156.docs-viz-live-btn {
157 align-self: flex-start;
158 margin-top: 4px;
159 padding: 7px 14px;
160 background: var(--color-accent);
161 color: var(--color-paper);
162 font-family: var(--font-body);
163 font-size: 11px;
164 font-weight: 600;
165 letter-spacing: 0.04em;
166 text-transform: uppercase;
167 border: 0;
168 border-radius: 4px;
169}
170
171/* Picker outline — sits around the target */
172.docs-viz-live-outline {
173 position: absolute;
174 inset: 28px 24px 60px;
175 border: 2px solid var(--color-accent);
176 border-radius: 8px;
177 box-shadow: 0 0 0 4px var(--color-accent-dim);
178 pointer-events: none;
179}
180
181/* Context bar floating near the target */
182.docs-viz-live-ctx {
183 position: absolute;
184 left: 50%;
185 top: 30px;
186 transform: translateX(-50%);
187 display: inline-flex;
188 align-items: center;
189 gap: 6px;
190 padding: 5px;
191 background: var(--color-paper);
192 border: 1px solid var(--color-mist);
193 border-radius: 8px;
194 box-shadow: 0 4px 20px oklch(0% 0 0 / 0.08);
195 font-family: var(--font-body);
196 font-size: 11px;
197 color: var(--color-ink);
198 white-space: nowrap;
199 z-index: 2;
200}
201
202.docs-viz-live-ctx-nav {
203 padding: 2px 8px;
204 background: transparent;
205 border: 0;
206 color: var(--color-ash);
207 font-size: 13px;
208 line-height: 1;
209}
210
211.docs-viz-live-ctx-counter {
212 font-family: var(--font-mono);
213 font-size: 10px;
214 color: var(--color-ink);
215 padding: 0 4px;
216 min-width: 30px;
217 text-align: center;
218}
219
220.docs-viz-live-ctx-divider {
221 width: 1px;
222 height: 14px;
223 background: var(--color-mist);
224 margin: 0 2px;
225}
226
227.docs-viz-live-ctx-accept {
228 padding: 4px 10px;
229 background: var(--color-ink);
230 color: var(--color-paper);
231 border: 0;
232 border-radius: 4px;
233 font-size: 11px;
234 font-weight: 600;
235}
236
237/* Global bar pinned to bottom */
238.docs-viz-live-gbar {
239 position: absolute;
240 bottom: 12px;
241 left: 50%;
242 transform: translateX(-50%);
243 display: inline-flex;
244 align-items: center;
245 gap: 4px;
246 padding: 0 4px;
247 min-height: 30px;
248 background: oklch(14% 0 0);
249 color: oklch(92% 0 0);
250 border: 1px solid oklch(22% 0 0);
251 border-radius: 8px;
252 font-family: var(--font-body);
253 font-size: 11px;
254 box-shadow: 0 6px 20px oklch(0% 0 0 / 0.2);
255}
256
257.docs-viz-live-gbar-brand {
258 font-family: var(--font-display);
259 font-size: 14px;
260 color: var(--color-accent);
261 padding: 0 8px;
262 font-style: italic;
263}
264
265.docs-viz-live-gbar-btn {
266 display: inline-flex;
267 align-items: center;
268 gap: 5px;
269 padding: 5px 8px;
270 background: transparent;
271 color: oklch(75% 0 0);
272 font: inherit;
273 border: 0;
274 border-radius: 5px;
275}
276
277.docs-viz-live-gbar-btn.is-active {
278 background: var(--color-accent-dim);
279 color: var(--color-accent);
280}
281
282.docs-viz-live-gbar-divider {
283 width: 1px;
284 height: 14px;
285 background: oklch(28% 0 0);
286 margin: 0 2px;
287}
288
289.docs-viz-live-gbar-x {
290 padding: 5px 8px;
291 color: oklch(60% 0 0);
292 font-size: 12px;
293}
294
295/* Step-size (smaller) variant used inline in tutorials */
296.docs-viz-live-frame--step {
297 max-width: 520px;
298 margin: 0 auto;
299}
300
301.docs-viz-live-frame--step .docs-viz-live-stage {
302 min-height: 200px;
303 padding: 28px 22px 56px;
304}
305
306.docs-viz-live-frame--step .docs-viz-live-outline {
307 inset: 22px 20px 50px;
308}
309
310/* ============================================
311 PRODUCT.md and DESIGN.md file mocks
312
313 Single file-style card with a chrome row, fields, and a footer
314 that identifies what loads it. Shared .docs-viz-file for the
315 chrome; .docs-viz-productmd / .docs-viz-designmd for per-file content.
316 ============================================ */
317
318.docs-viz-file {
319 display: flex;
320 flex-direction: column;
321 background: var(--color-paper);
322 border: 1px solid var(--color-mist);
323 border-radius: 8px;
324 overflow: hidden;
325 font-family: var(--font-body);
326}
327
328.docs-viz-file-header {
329 display: flex;
330 align-items: center;
331 justify-content: space-between;
332 padding: 9px 14px;
333 background: var(--color-cream);
334 border-bottom: 1px solid var(--color-mist);
335}
336
337.docs-viz-file-name {
338 font-family: var(--font-mono);
339 font-size: 11px;
340 font-weight: 500;
341 color: var(--color-ink);
342}
343
344.docs-viz-file-status {
345 font-family: var(--font-mono);
346 font-size: 9px;
347 letter-spacing: 0.14em;
348 text-transform: uppercase;
349 color: var(--color-accent);
350}
351
352.docs-viz-file-body {
353 padding: 4px 14px;
354}
355
356.docs-viz-file-row {
357 display: grid;
358 grid-template-columns: 108px 1fr;
359 gap: 14px;
360 align-items: baseline;
361 padding: 9px 0;
362 border-bottom: 1px dashed var(--color-mist);
363}
364
365.docs-viz-file-row:last-child {
366 border-bottom: 0;
367}
368
369.docs-viz-file-k {
370 font-family: var(--font-mono);
371 font-size: 10px;
372 letter-spacing: 0.1em;
373 text-transform: uppercase;
374 color: var(--color-ash);
375}
376
377.docs-viz-file-v {
378 font-family: var(--font-body);
379 font-size: 13px;
380 line-height: 1.5;
381 color: var(--color-ink);
382}
383
384.docs-viz-file-footer {
385 padding: 10px 14px;
386 background: var(--color-cream);
387 border-top: 1px solid var(--color-mist);
388 font-family: var(--font-display);
389 font-style: italic;
390 font-size: 12px;
391 line-height: 1.4;
392 color: var(--color-charcoal);
393}
394
395/* DESIGN.md specific rows — six numbered sections, richer inline specimens */
396
397.docs-viz-designmd-section {
398 padding: 12px 14px;
399 border-bottom: 1px dashed var(--color-mist);
400}
401
402.docs-viz-designmd-section:last-child {
403 border-bottom: 0;
404}
405
406.docs-viz-designmd-head {
407 display: flex;
408 align-items: baseline;
409 gap: 8px;
410 margin-bottom: 6px;
411}
412
413.docs-viz-designmd-num {
414 font-family: var(--font-mono);
415 font-size: 10px;
416 font-weight: 600;
417 color: var(--color-ash);
418 letter-spacing: 0.05em;
419}
420
421.docs-viz-designmd-title {
422 font-family: var(--font-body);
423 font-size: 12px;
424 font-weight: 600;
425 color: var(--color-ink);
426 text-transform: uppercase;
427 letter-spacing: 0.1em;
428}
429
430.docs-viz-designmd-note {
431 font-family: var(--font-display);
432 font-style: italic;
433 font-size: 12px;
434 color: var(--color-charcoal);
435 line-height: 1.45;
436 margin: 0;
437}
438
439.docs-viz-designmd-swatches {
440 display: flex;
441 gap: 6px;
442 margin-top: 4px;
443}
444
445.docs-viz-designmd-swatch {
446 width: 22px;
447 height: 22px;
448 border-radius: 4px;
449 border: 1px solid oklch(0% 0 0 / 0.06);
450}
451
452.docs-viz-designmd-type {
453 display: flex;
454 align-items: baseline;
455 gap: 10px;
456 margin-top: 4px;
457}
458
459.docs-viz-designmd-type-display {
460 font-family: var(--font-display);
461 font-style: italic;
462 font-size: 26px;
463 line-height: 1;
464 color: var(--color-ink);
465}
466
467.docs-viz-designmd-type-body {
468 font-family: var(--font-body);
469 font-size: 13px;
470 color: var(--color-charcoal);
471}
472
473.docs-viz-designmd-comps {
474 display: flex;
475 gap: 8px;
476 margin-top: 4px;
477 align-items: center;
478}
479
480.docs-viz-designmd-btn {
481 padding: 5px 12px;
482 background: var(--color-ink);
483 color: var(--color-paper);
484 font-family: var(--font-body);
485 font-size: 10px;
486 font-weight: 600;
487 letter-spacing: 0.05em;
488 text-transform: uppercase;
489}
490
491.docs-viz-designmd-chip {
492 padding: 3px 8px;
493 background: var(--color-accent-dim);
494 color: var(--color-accent);
495 font-family: var(--font-mono);
496 font-size: 10px;
497 border-radius: 11px;
498}
499
500.docs-viz-designmd-card {
501 padding: 6px 10px;
502 background: var(--color-cream);
503 border: 1px solid var(--color-mist);
504 border-radius: 4px;
505 font-family: var(--font-body);
506 font-size: 10px;
507 color: var(--color-ink);
508}
509
510.docs-viz-designmd-rules {
511 display: grid;
512 grid-template-columns: 1fr 1fr;
513 gap: 4px 14px;
514 margin-top: 4px;
515}
516
517.docs-viz-designmd-do,
518.docs-viz-designmd-dont {
519 display: flex;
520 align-items: baseline;
521 gap: 6px;
522 font-family: var(--font-body);
523 font-size: 11px;
524 line-height: 1.4;
525 color: var(--color-ink);
526}
527
528.docs-viz-designmd-do::before {
529 content: "DO";
530 font-family: var(--font-mono);
531 font-size: 9px;
532 font-weight: 700;
533 letter-spacing: 0.1em;
534 color: oklch(45% 0.18 145);
535 flex-shrink: 0;
536}
537
538.docs-viz-designmd-dont::before {
539 content: "DON'T";
540 font-family: var(--font-mono);
541 font-size: 9px;
542 font-weight: 700;
543 letter-spacing: 0.1em;
544 color: oklch(55% 0.22 25);
545 flex-shrink: 0;
546}
547
548/* ============================================
549 REGISTER SIDE-BY-SIDE
550
551 Two faux browser frames showing the same element rendered in
552 brand vs product register. Each frame is self-contained and
553 styled per the lane's conventions.
554 ============================================ */
555
556.docs-viz-register {
557 display: grid;
558 grid-template-columns: 1fr 1fr;
559 gap: 14px;
560}
561
562@media (max-width: 620px) {
563 .docs-viz-register {
564 grid-template-columns: 1fr;
565 }
566}
567
568.docs-viz-register-side {
569 display: flex;
570 flex-direction: column;
571 gap: 10px;
572}
573
574.docs-viz-register-label {
575 display: flex;
576 align-items: baseline;
577 justify-content: space-between;
578 gap: 8px;
579 padding: 0 2px;
580}
581
582.docs-viz-register-name {
583 font-family: var(--font-display);
584 font-style: italic;
585 font-size: 18px;
586 color: var(--color-ink);
587}
588
589.docs-viz-register-lane {
590 font-family: var(--font-mono);
591 font-size: 9px;
592 letter-spacing: 0.14em;
593 text-transform: uppercase;
594 color: var(--color-ash);
595}
596
597.docs-viz-register-frame {
598 position: relative;
599 padding: 22px 20px;
600 background: var(--color-paper);
601 border: 1px solid var(--color-mist);
602 border-radius: 6px;
603 min-height: 200px;
604 display: flex;
605 flex-direction: column;
606 justify-content: center;
607}
608
609/* BRAND variant — editorial-magazine, serif display, drenched accent */
610.docs-viz-register-frame--brand {
611 background: oklch(96% 0.02 30);
612 border-color: oklch(80% 0.08 30);
613 padding: 28px 22px;
614}
615
616.docs-viz-register-frame--brand .docs-viz-reg-kicker {
617 font-family: var(--font-mono);
618 font-size: 10px;
619 font-weight: 500;
620 letter-spacing: 0.2em;
621 text-transform: uppercase;
622 color: oklch(40% 0.12 30);
623 margin-bottom: 8px;
624}
625
626.docs-viz-register-frame--brand .docs-viz-reg-title {
627 font-family: var(--font-display);
628 font-style: italic;
629 font-weight: 400;
630 font-size: 28px;
631 line-height: 1;
632 color: oklch(20% 0.1 30);
633 margin: 0 0 10px 0;
634}
635
636.docs-viz-register-frame--brand .docs-viz-reg-body {
637 font-family: var(--font-display);
638 font-style: italic;
639 font-size: 13px;
640 line-height: 1.5;
641 color: oklch(35% 0.04 30);
642 margin: 0 0 14px 0;
643 max-width: 26ch;
644}
645
646.docs-viz-register-frame--brand .docs-viz-reg-btn {
647 align-self: flex-start;
648 padding: 8px 18px;
649 background: oklch(20% 0.1 30);
650 color: oklch(96% 0.02 30);
651 font-family: var(--font-mono);
652 font-size: 10px;
653 font-weight: 500;
654 letter-spacing: 0.14em;
655 text-transform: uppercase;
656}
657
658/* PRODUCT variant — neutral sans, restrained, utility-shaped */
659.docs-viz-register-frame--product {
660 background: var(--color-paper);
661 border-color: var(--color-mist);
662}
663
664.docs-viz-register-frame--product .docs-viz-reg-kicker {
665 font-family: var(--font-body);
666 font-size: 11px;
667 font-weight: 600;
668 color: var(--color-ash);
669 margin-bottom: 6px;
670}
671
672.docs-viz-register-frame--product .docs-viz-reg-title {
673 font-family: var(--font-body);
674 font-weight: 600;
675 font-size: 17px;
676 line-height: 1.3;
677 color: var(--color-ink);
678 margin: 0 0 6px 0;
679}
680
681.docs-viz-register-frame--product .docs-viz-reg-body {
682 font-family: var(--font-body);
683 font-size: 13px;
684 line-height: 1.5;
685 color: var(--color-charcoal);
686 margin: 0 0 14px 0;
687 max-width: 32ch;
688}
689
690.docs-viz-register-frame--product .docs-viz-reg-btn {
691 align-self: flex-start;
692 padding: 7px 14px;
693 background: var(--color-ink);
694 color: var(--color-paper);
695 font-family: var(--font-body);
696 font-size: 12px;
697 font-weight: 500;
698 border-radius: 4px;
699}
700
701.docs-viz-register-notes {
702 display: flex;
703 flex-direction: column;
704 gap: 4px;
705 padding: 0 4px;
706 font-family: var(--font-body);
707 font-size: 11px;
708 color: var(--color-charcoal);
709 line-height: 1.5;
710}
711
712.docs-viz-register-notes span::before {
713 content: "· ";
714 color: var(--color-ash);
715}
716
717/* ============================================
718 FLOW DIAGRAMS
719
720 Horizontal step strip — boxes separated by arrows. Used on
721 command pages where the value is a multi-phase workflow
722 (craft, shape, extract).
723 ============================================ */
724
725.docs-viz-flow {
726 display: flex;
727 align-items: stretch;
728 gap: 0;
729 flex-wrap: wrap;
730}
731
732.docs-viz-flow-step {
733 flex: 1;
734 min-width: 130px;
735 display: flex;
736 flex-direction: column;
737 gap: 4px;
738 padding: 12px 14px;
739 background: var(--color-paper);
740 border: 1px solid var(--color-mist);
741 border-radius: 6px;
742 position: relative;
743}
744
745.docs-viz-flow-step + .docs-viz-flow-step {
746 margin-left: 14px;
747}
748
749@media (max-width: 620px) {
750 .docs-viz-flow-step + .docs-viz-flow-step {
751 margin-left: 0;
752 margin-top: 14px;
753 }
754}
755
756.docs-viz-flow-step + .docs-viz-flow-step::before {
757 content: "→";
758 position: absolute;
759 left: -14px;
760 top: 50%;
761 transform: translate(-50%, -50%);
762 width: 14px;
763 text-align: center;
764 font-family: var(--font-body);
765 font-size: 14px;
766 color: var(--color-accent);
767 line-height: 1;
768}
769
770@media (max-width: 620px) {
771 .docs-viz-flow-step + .docs-viz-flow-step::before {
772 top: -14px;
773 left: 50%;
774 content: "↓";
775 }
776}
777
778.docs-viz-flow-num {
779 font-family: var(--font-mono);
780 font-size: 10px;
781 letter-spacing: 0.1em;
782 color: var(--color-ash);
783}
784
785.docs-viz-flow-name {
786 font-family: var(--font-body);
787 font-size: 13px;
788 font-weight: 600;
789 color: var(--color-ink);
790 line-height: 1.3;
791}
792
793.docs-viz-flow-hint {
794 font-family: var(--font-body);
795 font-size: 11px;
796 color: var(--color-charcoal);
797 line-height: 1.4;
798}
799
800.docs-viz-flow-step--accent {
801 background: var(--color-accent-dim);
802 border-color: var(--color-accent-soft);
803}
804
805.docs-viz-flow-step--accent .docs-viz-flow-name {
806 color: var(--color-accent);
807}
808
809/* ============================================
810 AUDIT REPORT MOCK
811 ============================================ */
812
813.docs-viz-report {
814 padding: 20px 22px;
815 background: var(--color-paper);
816 border: 1px solid var(--color-mist);
817 border-radius: 8px;
818 font-family: var(--font-body);
819 display: flex;
820 flex-direction: column;
821 gap: 16px;
822}
823
824.docs-viz-report-head {
825 display: flex;
826 align-items: baseline;
827 justify-content: space-between;
828 gap: 16px;
829 border-bottom: 1px solid var(--color-mist);
830 padding-bottom: 12px;
831}
832
833.docs-viz-report-title {
834 font-family: var(--font-body);
835 font-size: 13px;
836 font-weight: 600;
837 color: var(--color-ink);
838}
839
840.docs-viz-report-target {
841 font-family: var(--font-mono);
842 font-size: 11px;
843 color: var(--color-charcoal);
844}
845
846.docs-viz-report-score {
847 display: flex;
848 align-items: baseline;
849 gap: 8px;
850}
851
852.docs-viz-report-score-num {
853 font-family: var(--font-display);
854 font-style: italic;
855 font-size: 36px;
856 line-height: 1;
857 color: var(--color-ink);
858}
859
860.docs-viz-report-score-out {
861 font-family: var(--font-mono);
862 font-size: 11px;
863 color: var(--color-ash);
864}
865
866.docs-viz-report-dims {
867 display: flex;
868 flex-direction: column;
869 gap: 9px;
870}
871
872.docs-viz-report-dim {
873 display: grid;
874 grid-template-columns: 110px 1fr 42px;
875 gap: 12px;
876 align-items: center;
877 font-family: var(--font-body);
878 font-size: 12px;
879 color: var(--color-ink);
880}
881
882.docs-viz-report-dim-name {
883 color: var(--color-charcoal);
884}
885
886.docs-viz-report-dim-bar {
887 height: 5px;
888 background: var(--color-mist);
889 border-radius: 3px;
890 overflow: hidden;
891}
892
893.docs-viz-report-dim-fill {
894 display: block;
895 height: 100%;
896 background: var(--color-accent);
897 border-radius: 3px;
898}
899
900.docs-viz-report-dim-fill--warn {
901 background: oklch(72% 0.15 70);
902}
903
904.docs-viz-report-dim-fill--fail {
905 background: oklch(60% 0.2 25);
906}
907
908.docs-viz-report-dim-score {
909 font-family: var(--font-mono);
910 font-size: 11px;
911 color: var(--color-ink);
912 text-align: right;
913}
914
915.docs-viz-report-issues {
916 display: flex;
917 gap: 8px;
918 padding-top: 12px;
919 border-top: 1px solid var(--color-mist);
920}
921
922.docs-viz-report-sev {
923 padding: 3px 10px;
924 font-family: var(--font-mono);
925 font-size: 10px;
926 font-weight: 700;
927 letter-spacing: 0.1em;
928 color: var(--color-paper);
929 border-radius: 3px;
930}
931
932.docs-viz-report-sev--p0 { background: oklch(50% 0.22 25); }
933.docs-viz-report-sev--p1 { background: oklch(58% 0.18 45); }
934.docs-viz-report-sev--p2 { background: oklch(70% 0.13 80); }
935.docs-viz-report-sev--p3 { background: oklch(55% 0.06 260); }
936
937.docs-viz-report-sev-n {
938 font-weight: 500;
939 margin-left: 4px;
940 opacity: 0.85;
941}
942
943/* ============================================
944 CRITIQUE REPORT MOCK
945 ============================================ */
946
947.docs-viz-critique {
948 padding: 20px 22px;
949 background: var(--color-paper);
950 border: 1px solid var(--color-mist);
951 border-radius: 8px;
952 font-family: var(--font-body);
953 display: flex;
954 flex-direction: column;
955 gap: 18px;
956}
957
958.docs-viz-critique-head {
959 display: flex;
960 align-items: baseline;
961 justify-content: space-between;
962 gap: 16px;
963}
964
965.docs-viz-critique-verdict {
966 display: flex;
967 align-items: center;
968 gap: 10px;
969}
970
971.docs-viz-critique-verdict-label {
972 font-family: var(--font-mono);
973 font-size: 10px;
974 letter-spacing: 0.12em;
975 text-transform: uppercase;
976 color: var(--color-ash);
977}
978
979.docs-viz-critique-verdict-value {
980 display: inline-flex;
981 align-items: center;
982 padding: 3px 10px;
983 background: oklch(60% 0.2 25);
984 color: var(--color-paper);
985 font-family: var(--font-mono);
986 font-size: 11px;
987 font-weight: 700;
988 letter-spacing: 0.1em;
989 border-radius: 3px;
990}
991
992.docs-viz-critique-verdict-value--pass {
993 background: oklch(52% 0.18 150);
994}
995
996.docs-viz-critique-cols {
997 display: grid;
998 grid-template-columns: 1fr 1fr;
999 gap: 20px;
1000}
1001
1002@media (max-width: 620px) {
1003 .docs-viz-critique-cols {
1004 grid-template-columns: 1fr;
1005 }
1006}
1007
1008.docs-viz-critique-col-title {
1009 font-family: var(--font-body);
1010 font-size: 11px;
1011 font-weight: 600;
1012 letter-spacing: 0.1em;
1013 text-transform: uppercase;
1014 color: var(--color-ash);
1015 margin-bottom: 8px;
1016}
1017
1018.docs-viz-critique-personas {
1019 display: flex;
1020 flex-direction: column;
1021 gap: 8px;
1022}
1023
1024.docs-viz-critique-persona {
1025 display: grid;
1026 grid-template-columns: 1fr auto;
1027 gap: 10px;
1028 align-items: baseline;
1029 padding: 8px 10px;
1030 background: var(--color-cream);
1031 border: 1px solid var(--color-mist);
1032 border-radius: 5px;
1033}
1034
1035.docs-viz-critique-persona-name {
1036 font-family: var(--font-body);
1037 font-size: 12px;
1038 font-weight: 600;
1039 color: var(--color-ink);
1040}
1041
1042.docs-viz-critique-persona-note {
1043 display: block;
1044 font-family: var(--font-body);
1045 font-size: 11px;
1046 color: var(--color-charcoal);
1047 font-weight: 400;
1048 margin-top: 1px;
1049 line-height: 1.4;
1050}
1051
1052.docs-viz-critique-persona-score {
1053 font-family: var(--font-mono);
1054 font-size: 11px;
1055 color: var(--color-ink);
1056 text-align: right;
1057}
1058
1059.docs-viz-critique-heuristics {
1060 display: flex;
1061 flex-direction: column;
1062 gap: 4px;
1063}
1064
1065.docs-viz-critique-heur {
1066 display: grid;
1067 grid-template-columns: 1fr 28px;
1068 gap: 10px;
1069 font-family: var(--font-body);
1070 font-size: 12px;
1071 color: var(--color-ink);
1072 padding: 4px 0;
1073 border-bottom: 1px dashed var(--color-mist);
1074}
1075
1076.docs-viz-critique-heur:last-child {
1077 border-bottom: 0;
1078}
1079
1080.docs-viz-critique-heur-score {
1081 font-family: var(--font-mono);
1082 font-size: 11px;
1083 text-align: right;
1084}
1085
1086.docs-viz-critique-heur-score--good { color: oklch(45% 0.18 150); }
1087.docs-viz-critique-heur-score--ok { color: oklch(55% 0.15 70); }
1088.docs-viz-critique-heur-score--bad { color: oklch(55% 0.22 25); }
1089
1090/* ============================================
1091 STEP ARTIFACTS — inline mocks in tutorials
1092 ============================================ */
1093
1094.docs-viz-step {
1095 margin: 14px 0 18px;
1096 padding: 16px 18px;
1097 background: var(--color-cream);
1098 border: 1px solid var(--color-mist);
1099 border-radius: 8px;
1100}
1101
1102/* Picker-on-element strip */
1103.docs-viz-picker-row {
1104 position: relative;
1105 display: flex;
1106 align-items: center;
1107 justify-content: center;
1108 padding: 20px 16px;
1109 background: var(--color-paper);
1110 border: 1px solid var(--color-mist);
1111 border-radius: 6px;
1112 min-height: 110px;
1113}
1114
1115.docs-viz-picker-target {
1116 position: relative;
1117 padding: 10px 16px;
1118 border: 2px solid var(--color-accent);
1119 border-radius: 6px;
1120 box-shadow: 0 0 0 4px var(--color-accent-dim);
1121 font-family: var(--font-display);
1122 font-style: italic;
1123 font-size: 15px;
1124 color: var(--color-ink);
1125 background: var(--color-cream);
1126}
1127
1128.docs-viz-picker-pin {
1129 position: absolute;
1130 top: -10px;
1131 right: -10px;
1132 display: inline-flex;
1133 align-items: center;
1134 justify-content: center;
1135 width: 22px;
1136 height: 22px;
1137 background: var(--color-accent);
1138 color: var(--color-paper);
1139 font-family: var(--font-mono);
1140 font-size: 11px;
1141 font-weight: 600;
1142 border-radius: 50%;
1143 box-shadow: 0 2px 6px oklch(0% 0 0 / 0.2);
1144}
1145
1146.docs-viz-picker-note {
1147 position: absolute;
1148 right: -12px;
1149 top: 24px;
1150 transform: translateX(100%);
1151 padding: 3px 8px;
1152 background: var(--color-ink);
1153 color: var(--color-paper);
1154 font-family: var(--font-mono);
1155 font-size: 10px;
1156 border-radius: 3px;
1157 white-space: nowrap;
1158}
1159
1160@media (max-width: 520px) {
1161 .docs-viz-picker-note { display: none; }
1162}
1163
1164/* Three-up variants strip */
1165.docs-viz-variants {
1166 display: grid;
1167 grid-template-columns: repeat(3, 1fr);
1168 gap: 8px;
1169}
1170
1171@media (max-width: 520px) {
1172 .docs-viz-variants {
1173 grid-template-columns: 1fr;
1174 }
1175}
1176
1177.docs-viz-variant {
1178 position: relative;
1179 padding: 12px;
1180 background: var(--color-paper);
1181 border: 1px solid var(--color-mist);
1182 border-radius: 6px;
1183 min-height: 120px;
1184 display: flex;
1185 flex-direction: column;
1186 gap: 6px;
1187}
1188
1189.docs-viz-variant.is-active {
1190 border-color: var(--color-accent);
1191 box-shadow: 0 0 0 3px var(--color-accent-dim);
1192}
1193
1194.docs-viz-variant-badge {
1195 position: absolute;
1196 top: 6px;
1197 right: 6px;
1198 padding: 1px 6px;
1199 background: oklch(14% 0 0);
1200 color: oklch(92% 0 0);
1201 font-family: var(--font-mono);
1202 font-size: 9px;
1203 border-radius: 3px;
1204}
1205
1206.docs-viz-variant-kicker {
1207 font-family: var(--font-mono);
1208 font-size: 9px;
1209 letter-spacing: 0.12em;
1210 text-transform: uppercase;
1211 color: var(--color-ash);
1212}
1213
1214.docs-viz-variant-title {
1215 font-family: var(--font-display);
1216 font-style: italic;
1217 font-size: 14px;
1218 line-height: 1.2;
1219 color: var(--color-ink);
1220 margin: 0;
1221}
1222
1223.docs-viz-variant-btn {
1224 align-self: flex-start;
1225 margin-top: auto;
1226 padding: 4px 8px;
1227 font-family: var(--font-body);
1228 font-size: 9px;
1229 font-weight: 600;
1230 letter-spacing: 0.05em;
1231 text-transform: uppercase;
1232 background: var(--color-ink);
1233 color: var(--color-paper);
1234}
1235
1236.docs-viz-variant--v1 { background: var(--color-cream); }
1237.docs-viz-variant--v2 .docs-viz-variant-btn { background: var(--color-accent); }
1238.docs-viz-variant--v3 { background: oklch(96% 0.02 350); }
1239
1240/* Accept pill */
1241.docs-viz-accept-pill {
1242 display: inline-flex;
1243 align-items: center;
1244 gap: 8px;
1245 padding: 7px 14px;
1246 background: var(--color-paper);
1247 border: 1px solid var(--color-mist);
1248 border-radius: 8px;
1249 box-shadow: 0 4px 14px oklch(0% 0 0 / 0.06);
1250 font-family: var(--font-body);
1251 font-size: 12px;
1252 color: oklch(45% 0.18 145);
1253}
1254
1255.docs-viz-accept-pill::before {
1256 content: "✓";
1257 font-weight: 700;
1258}
1259
1260/* ============================================
1261 LIVE MODE LANDING PAGE (/live-mode)
1262
1263 Marketing-style landing that mirrors /visual-mode's structure.
1264 Hosts the animated homepage live-demo and surfaces the tutorial,
1265 reference, and install pathways.
1266 ============================================ */
1267
1268.live-mode-page {
1269 display: flex;
1270 flex-direction: column;
1271 gap: clamp(2.5rem, 5vw, 3.5rem);
1272 max-width: 960px;
1273 margin: 0 auto;
1274 padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem) clamp(4rem, 8vw, 6rem);
1275}
1276
1277.live-mode-page-header {
1278 display: flex;
1279 flex-direction: column;
1280 gap: 10px;
1281 max-width: 56ch;
1282}
1283
1284.live-mode-page-eyebrow {
1285 display: inline-flex;
1286 align-items: center;
1287 gap: 10px;
1288 font-family: var(--font-body);
1289 font-size: 0.6875rem;
1290 font-weight: 600;
1291 text-transform: uppercase;
1292 letter-spacing: 0.14em;
1293 color: var(--color-accent);
1294}
1295
1296.live-mode-page-eyebrow-badge {
1297 padding: 2px 7px;
1298 border: 1px solid var(--color-accent);
1299 border-radius: 4px;
1300 font-size: 0.625rem;
1301 letter-spacing: 0.12em;
1302}
1303
1304.live-mode-page-title {
1305 font-family: var(--font-display);
1306 font-weight: 400;
1307 font-size: clamp(2.5rem, 5vw, 3.5rem);
1308 line-height: 1;
1309 letter-spacing: -0.02em;
1310 color: var(--color-ink);
1311 margin: 0;
1312}
1313
1314.live-mode-page-lede {
1315 font-family: var(--font-body);
1316 font-size: 1.0625rem;
1317 line-height: 1.55;
1318 color: var(--color-charcoal);
1319 margin: 0;
1320 max-width: 56ch;
1321}
1322
1323.live-mode-page-alpha-note {
1324 font-family: var(--font-body);
1325 font-size: 0.9375rem;
1326 line-height: 1.55;
1327 color: var(--color-ash);
1328 margin: 0;
1329 max-width: 56ch;
1330 padding: 10px 14px;
1331 border-left: 2px solid var(--color-accent);
1332 background: color-mix(in oklab, var(--color-accent) 6%, transparent);
1333 border-radius: 0 4px 4px 0;
1334}
1335
1336.live-mode-page-alpha-note strong {
1337 color: var(--color-ink);
1338 font-weight: 600;
1339}
1340
1341.live-mode-start {
1342 display: flex;
1343 align-items: center;
1344 gap: 10px;
1345 margin-top: 6px;
1346 padding: 10px 14px;
1347 background: var(--color-ink);
1348 color: var(--color-paper);
1349 border-radius: 8px;
1350 font-family: var(--font-mono);
1351 font-size: 0.875rem;
1352 align-self: flex-start;
1353 max-width: 100%;
1354}
1355
1356.live-mode-start-prompt {
1357 color: var(--color-accent);
1358 user-select: none;
1359}
1360
1361.live-mode-start-cmd {
1362 flex: 1;
1363 overflow-x: auto;
1364 white-space: nowrap;
1365 scrollbar-width: none;
1366}
1367
1368.live-mode-start-cmd::-webkit-scrollbar { display: none; }
1369
1370.live-mode-start-copy {
1371 display: inline-flex;
1372 align-items: center;
1373 justify-content: center;
1374 width: 28px;
1375 height: 28px;
1376 background: transparent;
1377 color: oklch(75% 0 0);
1378 border: 0;
1379 border-radius: 4px;
1380 cursor: pointer;
1381 flex-shrink: 0;
1382}
1383
1384.live-mode-start-copy:hover {
1385 background: oklch(22% 0 0);
1386 color: oklch(92% 0 0);
1387}
1388
1389.live-mode-start-copy.is-copied {
1390 color: oklch(70% 0.18 145);
1391}
1392
1393/* Demo section — wraps the animated homepage .live-demo block.
1394 The homepage uses a 2-col grid (frame + support cells). /live-mode
1395 replaces the support cells with the stages section below, so the
1396 frame should take the full width here. */
1397.live-mode-demo-wrap {
1398 margin: 0;
1399}
1400
1401.live-mode-demo-wrap .live-demo {
1402 grid-template-columns: 1fr;
1403}
1404
1405.live-mode-demo-wrap .live-demo-frame {
1406 max-width: none;
1407}
1408
1409.live-mode-demo-caption {
1410 margin: 14px 0 0;
1411 font-family: var(--font-body);
1412 font-size: 0.875rem;
1413 color: var(--color-ash);
1414 line-height: 1.55;
1415 font-style: italic;
1416}
1417
1418/* Three-card "what happens" section */
1419.live-mode-stages {
1420 display: flex;
1421 flex-direction: column;
1422 gap: var(--spacing-md);
1423}
1424
1425.live-mode-stages-title {
1426 font-family: var(--font-display);
1427 font-weight: 400;
1428 font-style: italic;
1429 font-size: 1.75rem;
1430 color: var(--color-ink);
1431 margin: 0 0 8px 0;
1432}
1433
1434.live-mode-stages-grid {
1435 display: grid;
1436 grid-template-columns: repeat(3, 1fr);
1437 gap: var(--spacing-md);
1438}
1439
1440@media (max-width: 720px) {
1441 .live-mode-stages-grid {
1442 grid-template-columns: 1fr;
1443 }
1444}
1445
1446.live-mode-stage {
1447 display: flex;
1448 flex-direction: column;
1449 gap: 10px;
1450 padding: 18px;
1451 background: var(--color-paper);
1452 border: 1px solid var(--color-mist);
1453 border-radius: 8px;
1454}
1455
1456.live-mode-stage-num {
1457 font-family: var(--font-mono);
1458 font-size: 0.6875rem;
1459 letter-spacing: 0.12em;
1460 color: var(--color-ash);
1461 text-transform: uppercase;
1462}
1463
1464.live-mode-stage-name {
1465 font-family: var(--font-display);
1466 font-style: italic;
1467 font-weight: 400;
1468 font-size: 1.375rem;
1469 color: var(--color-ink);
1470 margin: 0;
1471 line-height: 1.15;
1472}
1473
1474.live-mode-stage-desc {
1475 font-family: var(--font-body);
1476 font-size: 0.875rem;
1477 line-height: 1.55;
1478 color: var(--color-charcoal);
1479 margin: 0;
1480}
1481
1482.live-mode-stage-viz {
1483 margin-top: 4px;
1484 padding: 14px;
1485 background: var(--color-cream);
1486 border-radius: 6px;
1487 display: flex;
1488 align-items: center;
1489 justify-content: center;
1490 min-height: 92px;
1491}
1492
1493/* Three pathway cards — tutorial, reference, install */
1494.live-mode-pathways {
1495 display: flex;
1496 flex-direction: column;
1497 gap: var(--spacing-md);
1498}
1499
1500.live-mode-pathways-title {
1501 font-family: var(--font-display);
1502 font-weight: 400;
1503 font-style: italic;
1504 font-size: 1.75rem;
1505 color: var(--color-ink);
1506 margin: 0 0 8px 0;
1507}
1508
1509.live-mode-pathways-grid {
1510 display: grid;
1511 grid-template-columns: repeat(3, 1fr);
1512 gap: var(--spacing-md);
1513}
1514
1515@media (max-width: 720px) {
1516 .live-mode-pathways-grid {
1517 grid-template-columns: 1fr;
1518 }
1519}
1520
1521.live-mode-pathway {
1522 display: flex;
1523 flex-direction: column;
1524 gap: 8px;
1525 padding: 20px;
1526 background: var(--color-paper);
1527 border: 1px solid var(--color-mist);
1528 border-radius: 8px;
1529 text-decoration: none;
1530 transition: border-color 180ms ease, transform 180ms ease;
1531}
1532
1533.live-mode-pathway:hover {
1534 border-color: var(--color-accent);
1535}
1536
1537.live-mode-pathway-kind {
1538 font-family: var(--font-mono);
1539 font-size: 0.625rem;
1540 text-transform: uppercase;
1541 letter-spacing: 0.14em;
1542 color: var(--color-accent);
1543}
1544
1545.live-mode-pathway-title {
1546 font-family: var(--font-body);
1547 font-size: 1.125rem;
1548 font-weight: 600;
1549 color: var(--color-ink);
1550 margin: 0;
1551 line-height: 1.3;
1552}
1553
1554.live-mode-pathway-desc {
1555 font-family: var(--font-body);
1556 font-size: 0.875rem;
1557 color: var(--color-charcoal);
1558 line-height: 1.55;
1559 margin: 0;
1560 flex: 1;
1561}
1562
1563.live-mode-pathway-cta {
1564 font-family: var(--font-body);
1565 font-size: 0.8125rem;
1566 font-weight: 600;
1567 color: var(--color-accent);
1568 margin-top: 6px;
1569}
1570
1571/* Frameworks strip */
1572.live-mode-frameworks {
1573 display: flex;
1574 flex-direction: column;
1575 gap: 10px;
1576 padding: 18px 20px;
1577 background: var(--color-cream);
1578 border: 1px solid var(--color-mist);
1579 border-radius: 8px;
1580}
1581
1582.live-mode-frameworks-label {
1583 font-family: var(--font-mono);
1584 font-size: 0.6875rem;
1585 letter-spacing: 0.12em;
1586 color: var(--color-ash);
1587 text-transform: uppercase;
1588}
1589
1590.live-mode-frameworks-list {
1591 display: flex;
1592 flex-wrap: wrap;
1593 gap: 8px 14px;
1594 font-family: var(--font-body);
1595 font-size: 0.875rem;
1596 color: var(--color-ink);
1597 margin: 0;
1598 padding: 0;
1599 list-style: none;
1600}
1601
1602.live-mode-frameworks-list li {
1603 display: inline-flex;
1604 align-items: center;
1605 gap: 6px;
1606}
1607
1608.live-mode-frameworks-list li::before {
1609 content: "";
1610 display: inline-block;
1611 width: 5px;
1612 height: 5px;
1613 border-radius: 50%;
1614 background: var(--color-accent);
1615}
1616
1617/* Docs/live page callout pointing back to /live-mode */
1618.docs-live-callout {
1619 display: flex;
1620 align-items: center;
1621 gap: 14px;
1622 padding: 12px 16px;
1623 margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
1624 background: var(--color-accent-dim);
1625 border: 1px solid var(--color-accent-soft);
1626 border-radius: 8px;
1627 font-family: var(--font-body);
1628 font-size: 0.875rem;
1629 color: var(--color-ink);
1630 line-height: 1.5;
1631}
1632
1633.docs-live-callout-icon {
1634 flex-shrink: 0;
1635 width: 28px;
1636 height: 28px;
1637 display: inline-flex;
1638 align-items: center;
1639 justify-content: center;
1640 background: var(--color-accent);
1641 color: var(--color-paper);
1642 border-radius: 50%;
1643 font-size: 14px;
1644}
1645
1646.docs-live-callout-text {
1647 flex: 1;
1648}
1649
1650.docs-live-callout-text a {
1651 color: var(--color-accent);
1652 text-decoration: underline;
1653 text-underline-offset: 2px;
1654 font-weight: 600;
1655}
1656
1657
1658/* ============================================
1659 DESIGNING WITH IMPECCABLE (/designing)
1660
1661 Editorial orientation page. Cards are rare — most sections
1662 rely on typography, whitespace, and hairline rules for structure.
1663 Four core phases get full weight; three appendix sections (register,
1664 interop, avoid) render at a quieter tier. CTA climax at the bottom.
1665
1666 Spacing follows DESIGN.md: 8 / 16 / 24 / 32 / 48 / 80 / 120.
1667 Two card radii: 8 (inline chrome like terminal, live frame) and 12
1668 (only the loop spine + CTA climax). No freestyle paddings.
1669 ============================================ */
1670
1671.designing-page {
1672 max-width: 920px;
1673 margin: 0 auto;
1674 padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2rem) clamp(4rem, 8vw, 6rem);
1675}
1676
1677/* ---------- Hero ---------- */
1678
1679/* Hero wrapper: hero text on the left, compass loop on the right when
1680 there's enough room. Single column below ~880px so both halves stay
1681 legible. */
1682.designing-hero {
1683 display: grid;
1684 grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
1685 column-gap: clamp(1.5rem, 4vw, 3rem);
1686 row-gap: var(--spacing-xl, 48px);
1687 align-items: center;
1688 margin-bottom: var(--spacing-2xl, 80px);
1689}
1690
1691@media (max-width: 880px) {
1692 .designing-hero {
1693 grid-template-columns: 1fr;
1694 align-items: start;
1695 }
1696}
1697
1698.designing-page-header {
1699 max-width: 46ch;
1700}
1701
1702.designing-page-eyebrow {
1703 display: block;
1704 font-family: var(--font-body);
1705 font-size: 0.6875rem;
1706 font-weight: 600;
1707 text-transform: uppercase;
1708 letter-spacing: 0.14em;
1709 color: var(--color-accent);
1710 margin-bottom: var(--spacing-sm, 16px);
1711}
1712
1713.designing-page-title {
1714 font-family: var(--font-display);
1715 font-weight: 300;
1716 font-style: italic;
1717 font-size: clamp(2.75rem, 6vw, 4rem);
1718 line-height: 1;
1719 letter-spacing: -0.01em;
1720 color: var(--color-ink);
1721 margin: 0 0 var(--spacing-md, 24px) 0;
1722}
1723
1724.designing-page-title em {
1725 font-style: italic;
1726 color: var(--color-accent);
1727}
1728
1729.designing-page-lede {
1730 font-family: var(--font-body);
1731 font-weight: 400;
1732 font-size: clamp(1rem, 1.6vw, 1.125rem);
1733 line-height: 1.65;
1734 color: var(--color-charcoal);
1735 margin: 0;
1736 max-width: 58ch;
1737}
1738
1739/* ---------- Loop spine ---------- */
1740/*
1741 * Editorial compass. A thin ink circle is the loop itself; four phase
1742 * labels sit at the N/E/S/W compass points and read clockwise. Four
1743 * small clockwise arrow glyphs mark the transit points on the ring.
1744 * The center carries a quiet italic wordmark so the circle has a
1745 * typographic anchor.
1746 */
1747
1748.designing-loop-wrap {
1749 padding: 0;
1750}
1751
1752.designing-loop-wrap-eyebrow {
1753 display: none;
1754}
1755
1756.designing-loop {
1757 position: relative;
1758 display: grid;
1759 grid-template-columns: minmax(96px, 1fr) clamp(200px, 26vw, 280px) minmax(96px, 1fr);
1760 grid-template-rows: auto clamp(200px, 26vw, 280px) auto;
1761 column-gap: clamp(0.75rem, 2vw, 1.25rem);
1762 row-gap: clamp(0.75rem, 2vw, 1.25rem);
1763 max-width: 540px;
1764 margin: 0 auto;
1765 align-items: center;
1766 justify-items: center;
1767}
1768
1769/* When the loop stands alone (e.g. stacked below the hero on narrow
1770 viewports), the eyebrow comes back and a touch more air surrounds it. */
1771@media (max-width: 880px) {
1772 .designing-loop-wrap {
1773 padding-top: clamp(1rem, 3vw, 2rem);
1774 }
1775 .designing-loop-wrap-eyebrow {
1776 display: block;
1777 font-family: var(--font-mono);
1778 font-size: 0.625rem;
1779 letter-spacing: 0.18em;
1780 text-transform: uppercase;
1781 color: var(--color-ash);
1782 text-align: center;
1783 margin-bottom: clamp(1rem, 2vw, 1.5rem);
1784 }
1785}
1786
1787.designing-loop-node {
1788 display: flex;
1789 flex-direction: column;
1790 gap: 4px;
1791 text-decoration: none;
1792 color: inherit;
1793 max-width: 24ch;
1794}
1795
1796.designing-loop-node--start {
1797 grid-column: 2;
1798 grid-row: 1;
1799 text-align: center;
1800 align-items: center;
1801}
1802.designing-loop-node--iterate {
1803 grid-column: 3;
1804 grid-row: 2;
1805 text-align: left;
1806 align-items: flex-start;
1807}
1808.designing-loop-node--polish {
1809 grid-column: 2;
1810 grid-row: 3;
1811 text-align: center;
1812 align-items: center;
1813}
1814.designing-loop-node--maintain {
1815 grid-column: 1;
1816 grid-row: 2;
1817 text-align: right;
1818 align-items: flex-end;
1819}
1820
1821.designing-loop-num {
1822 font-family: var(--font-mono);
1823 font-size: 0.625rem;
1824 letter-spacing: 0.18em;
1825 color: var(--color-accent);
1826 text-transform: uppercase;
1827}
1828
1829.designing-loop-name {
1830 font-family: var(--font-display);
1831 font-style: italic;
1832 font-weight: 400;
1833 font-size: clamp(1.5rem, 2.4vw, 2rem);
1834 line-height: 1;
1835 color: var(--color-ink);
1836 transition: color 180ms var(--ease-out, ease);
1837 margin-top: 2px;
1838}
1839
1840.designing-loop-node:hover .designing-loop-name {
1841 color: var(--color-accent);
1842}
1843
1844.designing-loop-hint {
1845 font-family: var(--font-body);
1846 font-size: 0.8125rem;
1847 line-height: 1.55;
1848 color: var(--color-charcoal);
1849 margin-top: 6px;
1850 max-width: 20ch;
1851}
1852
1853/* Hide hints inside the compressed hero-side compass; the full phase
1854 description lives in its section below. Shown again when the compass
1855 stacks under the hero on narrow viewports. */
1856@media (min-width: 881px) {
1857 .designing-hero .designing-loop-hint {
1858 display: none;
1859 }
1860}
1861
1862/* The wheel — center cell. Thin ink circle + clockwise arrow glyphs at
1863 the 45° positions + an italic wordmark in the middle. */
1864.designing-loop-wheel {
1865 grid-column: 2;
1866 grid-row: 2;
1867 position: relative;
1868 width: 100%;
1869 aspect-ratio: 1;
1870 align-self: center;
1871 justify-self: center;
1872}
1873
1874.designing-loop-wheel-svg {
1875 position: absolute;
1876 inset: 0;
1877 width: 100%;
1878 height: 100%;
1879 overflow: visible;
1880}
1881
1882.designing-loop-wheel-ring {
1883 fill: none;
1884 stroke: var(--color-ink);
1885 stroke-width: 1;
1886 opacity: 0.85;
1887}
1888
1889.designing-loop-wheel-tick {
1890 stroke: var(--color-ink);
1891 stroke-width: 1;
1892 opacity: 0.18;
1893}
1894
1895.designing-loop-wheel-tick--cardinal {
1896 stroke-width: 1.25;
1897 opacity: 0.4;
1898}
1899
1900.designing-loop-wheel-dot {
1901 fill: var(--color-accent);
1902}
1903
1904@media (prefers-reduced-motion: no-preference) {
1905 .designing-loop-wheel-dot {
1906 offset-path: path("M 50 4 A 46 46 0 1 1 50 96 A 46 46 0 1 1 50 4");
1907 animation: designingWheelOrbit 22s linear infinite;
1908 }
1909}
1910
1911@keyframes designingWheelOrbit {
1912 from { offset-distance: 0%; }
1913 to { offset-distance: 100%; }
1914}
1915
1916.designing-loop-wheel-arrow {
1917 position: absolute;
1918 display: inline-flex;
1919 align-items: center;
1920 justify-content: center;
1921 width: 24px;
1922 height: 24px;
1923 background: var(--color-cream);
1924 color: var(--color-accent);
1925 font-family: var(--font-body);
1926 font-size: 13px;
1927 line-height: 1;
1928 border-radius: 50%;
1929 user-select: none;
1930}
1931
1932/* 45° offsets: cos 45° ≈ 0.7071. At radius 50% of wheel size, that's
1933 ~35.4% along each axis from center. */
1934.designing-loop-wheel-arrow--ne { top: calc(50% - 35.4%); left: calc(50% + 35.4%); transform: translate(-50%, -50%); }
1935.designing-loop-wheel-arrow--se { top: calc(50% + 35.4%); left: calc(50% + 35.4%); transform: translate(-50%, -50%); }
1936.designing-loop-wheel-arrow--sw { top: calc(50% + 35.4%); left: calc(50% - 35.4%); transform: translate(-50%, -50%); }
1937.designing-loop-wheel-arrow--nw { top: calc(50% - 35.4%); left: calc(50% - 35.4%); transform: translate(-50%, -50%); }
1938
1939.designing-loop-wheel-center {
1940 position: absolute;
1941 top: 50%;
1942 left: 50%;
1943 transform: translate(-50%, -50%);
1944 display: flex;
1945 flex-direction: column;
1946 align-items: center;
1947 gap: 4px;
1948 pointer-events: none;
1949}
1950
1951.designing-loop-wheel-center-label {
1952 font-family: var(--font-mono);
1953 font-size: 0.625rem;
1954 letter-spacing: 0.18em;
1955 text-transform: uppercase;
1956 color: var(--color-ash);
1957}
1958
1959.designing-loop-wheel-center-mark {
1960 font-family: var(--font-display);
1961 font-style: italic;
1962 font-weight: 400;
1963 font-size: clamp(1.125rem, 2.2vw, 1.375rem);
1964 line-height: 1;
1965 color: var(--color-ink);
1966}
1967
1968@media (max-width: 720px) {
1969 .designing-loop {
1970 grid-template-columns: 1fr;
1971 grid-template-rows: repeat(7, auto);
1972 row-gap: 12px;
1973 justify-items: start;
1974 }
1975 .designing-loop-node {
1976 text-align: left;
1977 align-items: flex-start;
1978 max-width: none;
1979 }
1980 .designing-loop-node--start { grid-column: 1; grid-row: 1; }
1981 .designing-loop-node--iterate { grid-column: 1; grid-row: 3; }
1982 .designing-loop-node--polish { grid-column: 1; grid-row: 5; }
1983 .designing-loop-node--maintain { grid-column: 1; grid-row: 7; }
1984 .designing-loop-wheel { display: none; }
1985}
1986
1987/* ============================================
1988 PHASE SECTIONS — editorial, text-dominant
1989 ============================================ */
1990
1991.designing-phase {
1992 scroll-margin-top: 80px;
1993 padding-top: var(--spacing-xl, 48px);
1994 padding-bottom: var(--spacing-xl, 48px);
1995 border-top: 1px solid var(--color-mist);
1996}
1997
1998/* First phase after the loop: no border (loop-wrap already separates),
1999 but keep a little top air so the eye settles. */
2000.designing-loop-wrap + .designing-phase {
2001 border-top: 0;
2002 padding-top: var(--spacing-lg, 32px);
2003}
2004
2005/* Transition from spine to appendix: rely on whitespace, not a thicker
2006 rule. Design system uses only 1px mist separators. */
2007.designing-phase:not(.designing-phase--appendix) + .designing-phase--appendix {
2008 margin-top: var(--spacing-2xl, 80px);
2009}
2010
2011.designing-phase-head {
2012 margin-bottom: var(--spacing-lg, 32px);
2013}
2014
2015.designing-phase-num {
2016 display: block;
2017 font-family: var(--font-mono);
2018 font-size: 0.6875rem;
2019 font-weight: 600;
2020 letter-spacing: 0.16em;
2021 color: var(--color-accent);
2022 text-transform: uppercase;
2023 margin-bottom: var(--spacing-sm, 16px);
2024}
2025
2026.designing-phase--appendix .designing-phase-num {
2027 color: var(--color-ash);
2028}
2029
2030.designing-phase-title {
2031 font-family: var(--font-display);
2032 font-weight: 400;
2033 font-style: italic;
2034 font-size: clamp(1.875rem, 3.5vw, 2.5rem);
2035 line-height: 1.15;
2036 color: var(--color-ink);
2037 margin: 0 0 var(--spacing-sm, 16px) 0;
2038 max-width: 22ch;
2039}
2040
2041.designing-phase--appendix .designing-phase-title {
2042 font-size: clamp(1.25rem, 2.2vw, 1.625rem);
2043 font-style: normal;
2044 max-width: 32ch;
2045}
2046
2047.designing-phase-sub {
2048 font-family: var(--font-body);
2049 font-size: 1.0625rem;
2050 line-height: 1.65;
2051 color: var(--color-charcoal);
2052 margin: 0;
2053 max-width: 60ch;
2054}
2055
2056.designing-phase-sub code {
2057 font-family: var(--font-mono);
2058 font-size: 0.875em;
2059 color: var(--color-ink);
2060}
2061
2062.designing-phase--appendix .designing-phase-sub {
2063 font-size: 0.9375rem;
2064 max-width: 64ch;
2065}
2066
2067.designing-phase-commands {
2068 display: flex;
2069 flex-wrap: wrap;
2070 gap: 6px;
2071 margin-top: var(--spacing-md, 24px);
2072}
2073
2074.designing-phase-cmd {
2075 padding: 4px 10px;
2076 background: transparent;
2077 border: 1px solid var(--color-mist);
2078 color: var(--color-ink);
2079 font-family: var(--font-mono);
2080 font-size: 0.8125rem;
2081 text-decoration: none;
2082 border-radius: 4px;
2083 transition: border-color 160ms ease, color 160ms ease;
2084}
2085
2086.designing-phase-cmd:hover {
2087 border-color: var(--color-accent);
2088 color: var(--color-accent);
2089}
2090
2091.designing-phase-body {
2092 margin-top: var(--spacing-lg, 32px);
2093}
2094
2095/* ============================================
2096 PHASE 1 — Start
2097 ============================================ */
2098
2099.designing-start-grid {
2100 display: grid;
2101 grid-template-columns: 1.2fr 1fr;
2102 gap: clamp(1.5rem, 4vw, 3rem);
2103 align-items: start;
2104}
2105
2106@media (max-width: 720px) {
2107 .designing-start-grid {
2108 grid-template-columns: 1fr;
2109 }
2110}
2111
2112.designing-start-grid-prose {
2113 font-family: var(--font-body);
2114 font-size: 1rem;
2115 line-height: 1.7;
2116 color: var(--color-ink);
2117 max-width: 36ch;
2118}
2119
2120.designing-start-grid-prose p {
2121 margin: 0 0 1rem 0;
2122}
2123
2124.designing-start-grid-prose p:last-child {
2125 margin-bottom: 0;
2126}
2127
2128.designing-start-grid-prose code {
2129 font-family: var(--font-mono);
2130 font-size: 0.875rem;
2131 color: var(--color-accent);
2132}
2133
2134/* Start-phase flow — two step blocks ("in words", "in pictures")
2135 under the single 01 · Start header. Step labels carry the
2136 narrative; no competing display headings inside the body. */
2137.designing-start {
2138 display: flex;
2139 flex-direction: column;
2140 gap: var(--spacing-2xl, 80px);
2141}
2142
2143.designing-start-step-label {
2144 display: flex;
2145 align-items: center;
2146 gap: var(--spacing-md, 24px);
2147 font-family: var(--font-mono);
2148 font-size: 0.6875rem;
2149 font-weight: 600;
2150 letter-spacing: 0.18em;
2151 text-transform: uppercase;
2152 color: var(--color-accent);
2153 margin: 0 0 var(--spacing-md, 24px) 0;
2154}
2155
2156.designing-start-step-label::after {
2157 content: "";
2158 flex: 1;
2159 height: 1px;
2160 background: var(--color-mist);
2161}
2162
2163.designing-start-step-note {
2164 font-family: var(--font-body);
2165 font-size: 1rem;
2166 line-height: 1.7;
2167 color: var(--color-ink);
2168 margin: 0 0 var(--spacing-lg, 32px) 0;
2169 max-width: 64ch;
2170}
2171
2172.designing-start-step-note code {
2173 font-family: var(--font-mono);
2174 font-size: 0.875rem;
2175 color: var(--color-accent);
2176}
2177
2178.designing-visualize-spread {
2179 display: grid;
2180 grid-template-columns: 1.35fr 1fr;
2181 gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
2182 align-items: start;
2183}
2184
2185@media (max-width: 880px) {
2186 .designing-visualize-spread {
2187 grid-template-columns: 1fr;
2188 }
2189}
2190
2191.designing-visualize-plate {
2192 margin: 0;
2193 display: flex;
2194 flex-direction: column;
2195 gap: var(--spacing-md, 24px);
2196}
2197
2198.designing-visualize-plate-frame {
2199 background: var(--color-cream);
2200 border: 1px solid var(--color-mist);
2201 overflow: hidden;
2202}
2203
2204.designing-visualize-plate-frame img {
2205 display: block;
2206 width: 100%;
2207 height: auto;
2208}
2209
2210.designing-visualize-plate-cap {
2211 display: grid;
2212 grid-template-columns: auto 1fr;
2213 column-gap: var(--spacing-md, 24px);
2214 align-items: baseline;
2215}
2216
2217.designing-visualize-plate-kind {
2218 font-family: var(--font-mono);
2219 font-size: 0.6875rem;
2220 font-weight: 600;
2221 letter-spacing: 0.16em;
2222 text-transform: uppercase;
2223 color: var(--color-accent);
2224 white-space: nowrap;
2225 padding-top: 2px;
2226}
2227
2228.designing-visualize-plate-note {
2229 font-family: var(--font-body);
2230 font-size: 0.9375rem;
2231 line-height: 1.65;
2232 color: var(--color-charcoal);
2233 margin: 0;
2234 max-width: 48ch;
2235}
2236
2237.designing-visualize-plate-note code {
2238 font-family: var(--font-mono);
2239 font-size: 0.8125rem;
2240 color: var(--color-ink);
2241}
2242
2243@media (max-width: 640px) {
2244 .designing-visualize-plate-cap {
2245 grid-template-columns: 1fr;
2246 row-gap: 8px;
2247 }
2248}
2249
2250.designing-visualize-foot {
2251 margin: var(--spacing-xl, 48px) 0 0 0;
2252 padding-top: var(--spacing-md, 24px);
2253 border-top: 1px solid var(--color-mist);
2254 font-family: var(--font-body);
2255 font-size: 0.8125rem;
2256 line-height: 1.7;
2257 color: var(--color-ash);
2258 max-width: 72ch;
2259}
2260
2261.designing-visualize-foot strong {
2262 font-weight: 500;
2263 color: var(--color-charcoal);
2264}
2265
2266/* ============================================
2267 PHASE 2 — Iterate
2268 ============================================ */
2269
2270.designing-iterate-split {
2271 display: grid;
2272 grid-template-columns: 1fr 1fr;
2273 gap: clamp(1.5rem, 3vw, 2.5rem);
2274}
2275
2276@media (max-width: 720px) {
2277 .designing-iterate-split {
2278 grid-template-columns: 1fr;
2279 gap: var(--spacing-xl, 48px);
2280 }
2281}
2282
2283.designing-iterate-col {
2284 display: flex;
2285 flex-direction: column;
2286 gap: var(--spacing-sm, 16px);
2287}
2288
2289.designing-iterate-kind {
2290 font-family: var(--font-mono);
2291 font-size: 0.625rem;
2292 font-weight: 600;
2293 letter-spacing: 0.16em;
2294 text-transform: uppercase;
2295 color: var(--color-accent);
2296}
2297
2298.designing-iterate-name {
2299 font-family: var(--font-display);
2300 font-style: italic;
2301 font-size: 1.375rem;
2302 line-height: 1.2;
2303 color: var(--color-ink);
2304 margin: 0;
2305}
2306
2307.designing-iterate-when {
2308 font-family: var(--font-body);
2309 font-size: 0.9375rem;
2310 color: var(--color-charcoal);
2311 line-height: 1.6;
2312 margin: 0;
2313 max-width: 36ch;
2314}
2315
2316.designing-iterate-terminal {
2317 background: var(--color-ink);
2318 color: oklch(90% 0 0);
2319 border-radius: 8px;
2320 padding: 24px 22px;
2321 font-family: var(--font-mono);
2322 font-size: 0.875rem;
2323 line-height: 2.2;
2324 display: flex;
2325 flex-direction: column;
2326 justify-content: center;
2327 min-height: 240px;
2328}
2329
2330.designing-iterate-col {
2331 align-self: stretch;
2332}
2333
2334.designing-iterate-terminal-line {
2335 display: flex;
2336 gap: 8px;
2337 white-space: nowrap;
2338 overflow: hidden;
2339 text-overflow: ellipsis;
2340}
2341
2342.designing-iterate-terminal-prompt {
2343 color: var(--color-accent);
2344 user-select: none;
2345}
2346
2347/* Pass-through wrapper for the embedded docs-viz-live-frame.
2348 Overrides shrink the stage so the frame matches the terminal
2349 height on the opposite column. */
2350.designing-iterate-live .docs-viz-live-frame {
2351 box-shadow: 0 4px 18px oklch(0% 0 0 / 0.05);
2352}
2353
2354.designing-iterate-live .docs-viz-live-stage {
2355 min-height: 180px;
2356 padding: 20px 18px 52px;
2357}
2358
2359.designing-iterate-live .docs-viz-live-stage--tall {
2360 min-height: 180px;
2361}
2362
2363.designing-iterate-live .docs-viz-live-target {
2364 width: 60%;
2365}
2366
2367.designing-iterate-live .docs-viz-live-outline {
2368 inset: 14px 14px 44px;
2369}
2370
2371.designing-iterate-live .docs-viz-live-ctx {
2372 top: 16px;
2373}
2374
2375.designing-iterate-live .docs-viz-live-gbar {
2376 bottom: 10px;
2377}
2378
2379/* Decision table (replaces the old matrix card) */
2380.designing-iterate-table {
2381 margin-top: var(--spacing-xl, 48px);
2382 width: 100%;
2383 border-collapse: collapse;
2384 font-family: var(--font-body);
2385 font-size: 0.9375rem;
2386}
2387
2388.designing-iterate-table caption {
2389 font-family: var(--font-mono);
2390 font-size: 0.625rem;
2391 letter-spacing: 0.16em;
2392 text-transform: uppercase;
2393 color: var(--color-ash);
2394 text-align: left;
2395 padding-bottom: 10px;
2396}
2397
2398.designing-iterate-table th,
2399.designing-iterate-table td {
2400 text-align: left;
2401 padding: 12px 0;
2402 border-bottom: 1px solid var(--color-mist);
2403 vertical-align: top;
2404}
2405
2406.designing-iterate-table th {
2407 font-weight: 500;
2408 color: var(--color-charcoal);
2409 width: 55%;
2410}
2411
2412.designing-iterate-table td {
2413 font-family: var(--font-mono);
2414 font-size: 0.8125rem;
2415 color: var(--color-accent);
2416}
2417
2418.designing-iterate-table td a {
2419 color: inherit;
2420 text-decoration: underline;
2421 text-underline-offset: 3px;
2422 text-decoration-thickness: 1px;
2423}
2424
2425.designing-iterate-table td a:hover {
2426 text-decoration-thickness: 2px;
2427}
2428
2429/* ============================================
2430 PHASE 3 — Polish (3-column editorial, no cards)
2431 ============================================ */
2432
2433/* Polish section — drenched magenta masthead band over a three-column
2434 title/description grid. Commands live in the band so the grid stays
2435 focused on the editorial titles. */
2436.designing-polish {
2437 display: block;
2438}
2439
2440.designing-polish-band {
2441 background: var(--color-accent);
2442 padding: 20px 28px;
2443 display: grid;
2444 grid-template-columns: auto 1fr auto;
2445 gap: 24px;
2446 align-items: baseline;
2447 color: oklch(98% 0 0);
2448}
2449
2450.designing-polish-band-label {
2451 font-family: var(--font-mono);
2452 font-size: 0.6875rem;
2453 font-weight: 600;
2454 letter-spacing: 0.22em;
2455 text-transform: uppercase;
2456 opacity: 0.85;
2457}
2458
2459.designing-polish-band-cmds {
2460 display: flex;
2461 font-family: var(--font-mono);
2462 font-size: 0.8125rem;
2463 font-weight: 500;
2464 letter-spacing: 0.05em;
2465}
2466
2467.designing-polish-band-cmds a {
2468 display: inline-block;
2469 padding: 4px 16px;
2470 color: inherit;
2471 text-decoration: none;
2472 border-right: 1px solid color-mix(in oklch, currentColor 32%, transparent);
2473}
2474
2475.designing-polish-band-cmds a:first-child { padding-left: 0; }
2476.designing-polish-band-cmds a:last-child { border-right: 0; padding-right: 0; }
2477
2478.designing-polish-band-cmds a:hover {
2479 text-decoration: underline;
2480 text-underline-offset: 3px;
2481}
2482
2483.designing-polish-band-meta {
2484 font-family: var(--font-mono);
2485 font-size: 0.625rem;
2486 letter-spacing: 0.2em;
2487 text-transform: uppercase;
2488 opacity: 0.75;
2489}
2490
2491.designing-polish-grid {
2492 display: grid;
2493 grid-template-columns: 1fr 1fr 1fr;
2494 gap: 28px;
2495 padding: 28px;
2496 background: var(--color-cream);
2497 border-left: 1px solid var(--color-mist);
2498 border-right: 1px solid var(--color-mist);
2499 border-bottom: 1px solid var(--color-mist);
2500}
2501
2502.designing-polish-col {
2503 display: flex;
2504 flex-direction: column;
2505 gap: 10px;
2506}
2507
2508.designing-polish-name {
2509 font-family: var(--font-display);
2510 font-style: italic;
2511 font-weight: 400;
2512 font-size: 1.5rem;
2513 line-height: 1.15;
2514 color: var(--color-ink);
2515 margin: 0;
2516}
2517
2518.designing-polish-desc {
2519 font-family: var(--font-body);
2520 font-size: 0.9375rem;
2521 line-height: 1.6;
2522 color: var(--color-charcoal);
2523 margin: 0;
2524}
2525
2526@media (max-width: 720px) {
2527 .designing-polish-grid {
2528 grid-template-columns: 1fr;
2529 }
2530 .designing-polish-band {
2531 grid-template-columns: 1fr;
2532 gap: 10px;
2533 }
2534}
2535
2536/* ============================================
2537 PHASE 4 — Maintain (two editorial columns + one hero viz each)
2538 ============================================ */
2539
2540/* Maintain section — architectural poster diptych. Each tile presents the
2541 domain visualization as the hero (stage) with a quiet caption beneath
2542 (command link, italic title, short description). */
2543.designing-maintain {
2544 display: grid;
2545 grid-template-columns: 1fr 1fr;
2546 gap: clamp(1.5rem, 3vw, 2rem);
2547}
2548
2549.designing-maintain-tile {
2550 margin: 0;
2551 display: flex;
2552 flex-direction: column;
2553 gap: 18px;
2554 min-width: 0;
2555}
2556
2557.designing-maintain-stage {
2558 aspect-ratio: 5 / 3;
2559 background: var(--color-cream);
2560 border: 1px solid var(--color-mist);
2561 display: grid;
2562 place-items: center;
2563 padding: 28px;
2564 overflow: hidden;
2565}
2566
2567.designing-maintain-caption {
2568 display: flex;
2569 flex-direction: column;
2570 gap: 6px;
2571}
2572
2573.designing-maintain-label {
2574 font-family: var(--font-mono);
2575 font-size: 0.6875rem;
2576 font-weight: 600;
2577 letter-spacing: 0.2em;
2578 text-transform: uppercase;
2579 color: var(--color-accent);
2580}
2581
2582.designing-maintain-label a {
2583 color: inherit;
2584 text-decoration: none;
2585}
2586
2587.designing-maintain-label a:hover {
2588 color: var(--color-accent-hover);
2589}
2590
2591.designing-maintain-name {
2592 font-family: var(--font-display);
2593 font-style: italic;
2594 font-weight: 400;
2595 font-size: 1.5rem;
2596 line-height: 1.15;
2597 color: var(--color-ink);
2598 margin: 0;
2599}
2600
2601.designing-maintain-desc {
2602 font-family: var(--font-body);
2603 font-size: 0.875rem;
2604 line-height: 1.55;
2605 color: var(--color-charcoal);
2606 margin: 0;
2607 max-width: 42ch;
2608}
2609
2610/* Extract consolidation viz — cloud of pills converging on a single primitive */
2611.designing-extract-viz {
2612 display: flex;
2613 align-items: center;
2614 gap: 20px;
2615 flex-wrap: nowrap;
2616 justify-content: center;
2617 width: 100%;
2618}
2619
2620.designing-extract-before {
2621 display: grid;
2622 grid-template-columns: repeat(2, auto);
2623 gap: 6px;
2624 justify-content: center;
2625}
2626
2627.designing-extract-btn {
2628 display: inline-block;
2629 padding: 5px 12px;
2630 background: var(--color-paper);
2631 border: 1px solid var(--color-mist);
2632 font-family: var(--font-body);
2633 font-size: 0.75rem;
2634 color: var(--color-ash);
2635 opacity: 0.75;
2636}
2637
2638.designing-extract-arrow {
2639 font-family: var(--font-display);
2640 font-style: italic;
2641 font-size: 2.5rem;
2642 line-height: 1;
2643 color: var(--color-accent);
2644}
2645
2646.designing-extract-after {
2647 display: inline-block;
2648 padding: 10px 22px;
2649 background: var(--color-ink);
2650 color: var(--color-paper);
2651 font-family: var(--font-body);
2652 font-size: 1rem;
2653 font-weight: 500;
2654 letter-spacing: 0.04em;
2655}
2656
2657/* DESIGN.md index — enlarged list of numbered sections */
2658.designing-designmd-preview {
2659 display: flex;
2660 flex-direction: column;
2661 gap: 8px;
2662 width: 100%;
2663 max-width: 280px;
2664}
2665
2666.designing-designmd-preview-line {
2667 display: grid;
2668 grid-template-columns: 32px 1fr;
2669 gap: 14px;
2670 padding-bottom: 6px;
2671 border-bottom: 1px solid var(--color-mist);
2672 font-family: var(--font-body);
2673 font-size: 0.9375rem;
2674 color: var(--color-ink);
2675}
2676
2677.designing-designmd-preview-line:last-child { border-bottom: 0; }
2678
2679.designing-designmd-preview-num {
2680 font-family: var(--font-mono);
2681 font-size: 0.75rem;
2682 color: var(--color-accent);
2683}
2684
2685@media (max-width: 720px) {
2686 .designing-maintain {
2687 grid-template-columns: 1fr;
2688 gap: var(--spacing-xl, 48px);
2689 }
2690 .designing-extract-viz { flex-wrap: wrap; }
2691}
2692
2693/* ============================================
2694 APPENDIX: Register (cross-link, quieter aside)
2695 ============================================ */
2696
2697/* Two-lane explainer — brand vs product as twin columns divided by a
2698 hairline, each with its own mock to make the vocabulary visible. */
2699.designing-lanes {
2700 display: grid;
2701 grid-template-columns: 1fr 1fr;
2702 gap: 0;
2703 margin-bottom: var(--spacing-lg, 32px);
2704}
2705
2706.designing-lane {
2707 padding: 0 clamp(18px, 3vw, 32px);
2708 display: flex;
2709 flex-direction: column;
2710 gap: 14px;
2711 border-left: 1px solid var(--color-mist);
2712}
2713
2714.designing-lane:first-child {
2715 padding-left: 0;
2716 border-left: 0;
2717}
2718
2719.designing-lane-kind {
2720 font-family: var(--font-mono);
2721 font-size: 0.6875rem;
2722 font-weight: 600;
2723 letter-spacing: 0.2em;
2724 text-transform: uppercase;
2725 color: var(--color-accent);
2726}
2727
2728.designing-lane-rule {
2729 margin: 0;
2730 font-family: var(--font-body);
2731 font-size: 0.9375rem;
2732 line-height: 1.55;
2733 color: var(--color-charcoal);
2734 max-width: 38ch;
2735}
2736
2737.designing-lane-mock {
2738 padding: 28px 20px;
2739 display: flex;
2740 flex-direction: column;
2741 gap: 6px;
2742 justify-content: center;
2743 min-height: 116px;
2744 border: 1px solid var(--color-mist);
2745}
2746
2747.designing-lane-mock--brand {
2748 background: oklch(96% 0.02 30);
2749}
2750
2751.designing-lane-mock--brand .designing-lane-mock-label {
2752 font-family: var(--font-mono);
2753 font-size: 9px;
2754 letter-spacing: 0.18em;
2755 text-transform: uppercase;
2756 color: oklch(40% 0.12 30);
2757}
2758
2759.designing-lane-mock--brand .designing-lane-mock-title {
2760 font-family: var(--font-display);
2761 font-style: italic;
2762 font-size: 22px;
2763 color: oklch(20% 0.1 30);
2764 line-height: 1.1;
2765}
2766
2767.designing-lane-mock--product {
2768 background: var(--color-cream);
2769}
2770
2771.designing-lane-mock--product .designing-lane-mock-label {
2772 font-family: var(--font-body);
2773 font-size: 10px;
2774 font-weight: 600;
2775 color: var(--color-ash);
2776 letter-spacing: 0.04em;
2777}
2778
2779.designing-lane-mock--product .designing-lane-mock-title {
2780 font-family: var(--font-body);
2781 font-weight: 600;
2782 font-size: 15px;
2783 color: var(--color-ink);
2784 line-height: 1.25;
2785}
2786
2787.designing-lane-link {
2788 font-family: var(--font-body);
2789 font-size: 0.875rem;
2790 font-weight: 600;
2791 color: var(--color-accent);
2792 text-decoration: underline;
2793 text-underline-offset: 3px;
2794 text-decoration-thickness: 1px;
2795 display: inline-block;
2796}
2797
2798.designing-lane-link:hover {
2799 text-decoration-thickness: 2px;
2800}
2801
2802@media (max-width: 640px) {
2803 .designing-lanes {
2804 grid-template-columns: 1fr;
2805 gap: var(--spacing-md, 24px);
2806 }
2807 .designing-lane {
2808 padding: var(--spacing-md, 24px) 0 0 0;
2809 border-left: 0;
2810 border-top: 1px solid var(--color-mist);
2811 }
2812 .designing-lane:first-child {
2813 padding-top: 0;
2814 border-top: 0;
2815 }
2816}
2817
2818/* ============================================
2819 APPENDIX: What to avoid (inline list, no cards)
2820 ============================================ */
2821
2822.designing-avoid {
2823 list-style: none;
2824 padding: 0;
2825 margin: 0;
2826 display: flex;
2827 flex-direction: column;
2828}
2829
2830.designing-avoid li {
2831 padding: var(--spacing-sm, 16px) 0;
2832 border-bottom: 1px solid var(--color-mist);
2833 display: grid;
2834 grid-template-columns: 28px 1fr;
2835 gap: var(--spacing-sm, 16px);
2836 align-items: baseline;
2837}
2838
2839.designing-avoid li:last-child {
2840 border-bottom: 0;
2841}
2842
2843.designing-avoid-x {
2844 display: inline-flex;
2845 align-items: center;
2846 justify-content: center;
2847 width: 20px;
2848 height: 20px;
2849 background: oklch(95% 0.04 25);
2850 color: oklch(55% 0.22 25);
2851 border-radius: 50%;
2852 font-family: var(--font-mono);
2853 font-size: 12px;
2854 font-weight: 700;
2855 align-self: start;
2856 margin-top: 3px;
2857}
2858
2859.designing-avoid-title {
2860 display: block;
2861 font-family: var(--font-body);
2862 font-size: 1rem;
2863 font-weight: 600;
2864 color: var(--color-ink);
2865 line-height: 1.4;
2866 margin-bottom: 4px;
2867}
2868
2869.designing-avoid-desc {
2870 font-family: var(--font-body);
2871 font-size: 0.9375rem;
2872 line-height: 1.6;
2873 color: var(--color-charcoal);
2874 margin: 0;
2875 max-width: 62ch;
2876}
2877
2878/* ============================================
2879 CTA climax (largest typographic moment)
2880 ============================================ */
2881
2882.designing-cta {
2883 margin-top: var(--spacing-3xl, 120px);
2884 padding-top: var(--spacing-xl, 48px);
2885 border-top: 1px solid var(--color-mist);
2886 display: grid;
2887 grid-template-columns: 1fr 1fr;
2888 gap: clamp(1.5rem, 3vw, 2.5rem);
2889}
2890
2891@media (max-width: 720px) {
2892 .designing-cta {
2893 grid-template-columns: 1fr;
2894 }
2895}
2896
2897.designing-cta-card {
2898 display: flex;
2899 flex-direction: column;
2900 gap: var(--spacing-sm, 16px);
2901 padding: var(--spacing-lg, 32px);
2902 background: var(--color-paper);
2903 border: 1px solid var(--color-mist);
2904 border-radius: 12px;
2905 text-decoration: none;
2906 color: inherit;
2907 transition: border-color 200ms ease, background 200ms ease;
2908}
2909
2910.designing-cta-card:hover {
2911 border-color: var(--color-accent);
2912 background: var(--color-accent-dim);
2913}
2914
2915.designing-cta-card-kind {
2916 font-family: var(--font-mono);
2917 font-size: 0.625rem;
2918 letter-spacing: 0.16em;
2919 text-transform: uppercase;
2920 color: var(--color-accent);
2921}
2922
2923.designing-cta-card-title {
2924 font-family: var(--font-display);
2925 font-style: italic;
2926 font-size: clamp(1.5rem, 2.5vw, 1.875rem);
2927 line-height: 1.1;
2928 color: var(--color-ink);
2929 margin: 0;
2930}
2931
2932.designing-cta-card-title em {
2933 color: var(--color-accent);
2934 font-style: italic;
2935}
2936
2937.designing-cta-card-desc {
2938 font-family: var(--font-body);
2939 font-size: 0.9375rem;
2940 line-height: 1.6;
2941 color: var(--color-charcoal);
2942 margin: 0;
2943}
2944
2945/* Neo Mirai proof case: shared by Designing, Craft docs, and the case route. */
2946.designing-visualize-spread {
2947 grid-template-columns: 0.88fr 0.72fr 0.88fr;
2948 align-items: start;
2949}
2950
2951.designing-visualize-plate-frame {
2952 display: block;
2953 color: inherit;
2954 text-decoration: none;
2955 transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
2956}
2957
2958.designing-visualize-plate-frame:hover {
2959 border-color: var(--color-accent);
2960 transform: translateY(-3px);
2961 box-shadow: 0 20px 46px oklch(10% 0 0 / 0.08);
2962}
2963
2964.designing-visualize-plate--live .designing-visualize-plate-frame {
2965 aspect-ratio: auto;
2966}
2967
2968.designing-visualize-plate--live .designing-visualize-plate-frame img {
2969 height: auto;
2970 object-fit: contain;
2971 object-position: top center;
2972}
2973
2974.designing-visualize-plate-note a {
2975 color: var(--color-accent);
2976 text-decoration-thickness: 1px;
2977 text-underline-offset: 3px;
2978}
2979
2980.craft-case-callout {
2981 display: grid;
2982 grid-template-columns: minmax(0, 1fr) minmax(220px, 0.82fr);
2983 gap: clamp(1.5rem, 4vw, 2.5rem);
2984 align-items: stretch;
2985 margin: clamp(2.5rem, 5vw, 3.5rem) 0;
2986 padding: clamp(1.5rem, 3vw, 2rem);
2987 background: var(--color-paper);
2988 border: 1px solid var(--color-mist);
2989 border-radius: 16px;
2990}
2991
2992.craft-case-eyebrow,
2993.neon-case-eyebrow,
2994.neon-case-section-label,
2995.neon-case-strip figure > span {
2996 display: block;
2997 font-family: var(--font-mono);
2998 font-size: 0.6875rem;
2999 font-weight: 600;
3000 letter-spacing: 0.16em;
3001 text-transform: uppercase;
3002 color: var(--color-accent);
3003}
3004
3005.craft-case-copy h2 {
3006 margin: 0.6rem 0 0.9rem;
3007 font-family: var(--font-display);
3008 font-size: clamp(1.8rem, 4vw, 2.5rem);
3009 font-style: italic;
3010 font-weight: 500;
3011 line-height: 1;
3012 color: var(--color-ink);
3013}
3014
3015.craft-case-copy p {
3016 margin: 0 0 1.25rem;
3017 color: var(--color-charcoal);
3018 line-height: 1.65;
3019}
3020
3021.craft-case-command {
3022 margin: 1.35rem 0 1rem;
3023}
3024
3025.craft-case-link-row {
3026 display: flex;
3027 flex-wrap: wrap;
3028 gap: 1rem;
3029 margin-bottom: 0 !important;
3030 font-family: var(--font-body);
3031 font-weight: 600;
3032}
3033
3034.craft-case-link-row a {
3035 color: var(--color-accent);
3036}
3037
3038.craft-case-images {
3039 position: relative;
3040 min-height: 260px;
3041}
3042
3043.craft-case-images img {
3044 position: absolute;
3045 display: block;
3046 width: 66%;
3047 height: 78%;
3048 object-fit: cover;
3049 border: 1px solid var(--color-mist);
3050 background: var(--color-cream);
3051}
3052
3053.craft-case-images img:first-child {
3054 left: 0;
3055 bottom: 0;
3056 object-position: top center;
3057}
3058
3059.craft-case-images img:last-child {
3060 right: 0;
3061 top: 0;
3062 object-position: top left;
3063 box-shadow: 0 20px 40px oklch(10% 0 0 / 0.08);
3064}
3065
3066.neon-case-page {
3067 background:
3068 radial-gradient(circle at 84% 8%, var(--color-accent-dim), transparent 22rem),
3069 var(--color-cream);
3070}
3071
3072.neon-case {
3073 width: min(100% - 32px, 1360px);
3074 margin: 0 auto;
3075 padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem);
3076}
3077
3078.neon-case-hero {
3079 display: grid;
3080 grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
3081 gap: clamp(2rem, 5vw, 5rem);
3082 align-items: end;
3083}
3084
3085.neon-case-back {
3086 display: inline-block;
3087 margin-bottom: clamp(2rem, 5vw, 4rem);
3088 font-family: var(--font-body);
3089 font-size: 0.875rem;
3090 font-weight: 600;
3091 color: var(--color-ash);
3092 text-decoration: none;
3093}
3094
3095.neon-case-back:hover {
3096 color: var(--color-accent);
3097}
3098
3099.neon-case-hero h1 {
3100 margin: 0.8rem 0 1.5rem;
3101 font-family: var(--font-display);
3102 font-size: clamp(2.8rem, 5vw, 4.9rem);
3103 font-style: italic;
3104 font-weight: 400;
3105 letter-spacing: -0.045em;
3106 line-height: 0.96;
3107 color: var(--color-ink);
3108 max-width: 15ch;
3109}
3110
3111.neon-case-hero p,
3112.neon-case-command p {
3113 max-width: 58ch;
3114 margin: 0;
3115 font-family: var(--font-body);
3116 font-size: clamp(1rem, 1.5vw, 1.125rem);
3117 line-height: 1.65;
3118 color: var(--color-charcoal);
3119}
3120
3121.neon-case-actions {
3122 display: flex;
3123 flex-wrap: wrap;
3124 gap: 0.75rem;
3125 margin-top: 2rem;
3126}
3127
3128.neon-case-primary,
3129.neon-case-secondary {
3130 display: inline-flex;
3131 align-items: center;
3132 min-height: 44px;
3133 padding: 0.85rem 1.15rem;
3134 font-family: var(--font-body);
3135 font-size: 0.875rem;
3136 font-weight: 700;
3137 text-decoration: none;
3138 transition: transform var(--duration-base) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
3139}
3140
3141.neon-case-primary {
3142 color: var(--color-paper);
3143 background: var(--color-ink);
3144}
3145
3146.neon-case-secondary {
3147 color: var(--color-ink);
3148 border: 1px solid var(--color-mist);
3149}
3150
3151.neon-case-primary:hover,
3152.neon-case-secondary:hover {
3153 transform: translateY(-2px);
3154}
3155
3156.neon-case-primary:hover {
3157 background: var(--color-accent);
3158}
3159
3160.neon-case-secondary:hover {
3161 color: var(--color-accent);
3162 border-color: var(--color-accent);
3163}
3164
3165.neon-case-hero-shot {
3166 display: block;
3167 margin: 0;
3168 border: 1px solid var(--color-mist);
3169 background: var(--color-paper);
3170 overflow: hidden;
3171 transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
3172}
3173
3174.neon-case-hero-shot:hover {
3175 transform: translateY(-3px);
3176 border-color: var(--color-accent);
3177}
3178
3179.neon-case-hero-shot img {
3180 display: block;
3181 width: 100%;
3182 height: auto;
3183}
3184
3185.neon-case-strip {
3186 display: grid;
3187 grid-template-columns: 0.78fr 0.78fr 1fr;
3188 gap: clamp(1rem, 2vw, 1.5rem);
3189 margin: clamp(4rem, 9vw, 8rem) 0;
3190 align-items: start;
3191}
3192
3193.neon-case-strip figure,
3194.neon-case-details figure {
3195 margin: 0;
3196}
3197
3198.neon-case-strip img,
3199.neon-case-details img {
3200 display: block;
3201 width: 100%;
3202 border: 1px solid var(--color-mist);
3203 background: var(--color-paper);
3204}
3205
3206.neon-case-strip a,
3207.neon-case-details a {
3208 display: block;
3209 color: inherit;
3210 text-decoration: none;
3211}
3212
3213.neon-case-strip img {
3214 height: clamp(260px, 28vw, 430px);
3215 object-fit: cover;
3216 object-position: top center;
3217 margin-top: 0.75rem;
3218}
3219
3220.neon-case-strip figure:first-child img,
3221.neon-case-strip figure:last-child img {
3222 object-position: top left;
3223}
3224
3225.neon-case-strip figcaption,
3226.neon-case-details figcaption {
3227 margin-top: 0.9rem;
3228 font-family: var(--font-body);
3229 font-size: 0.875rem;
3230 line-height: 1.6;
3231 color: var(--color-charcoal);
3232}
3233
3234.neon-case-body {
3235 display: grid;
3236 grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
3237 gap: clamp(2rem, 6vw, 5rem);
3238 padding: clamp(3rem, 6vw, 5rem) 0;
3239 border-top: 1px solid var(--color-mist);
3240 border-bottom: 1px solid var(--color-mist);
3241}
3242
3243.neon-case-body h2,
3244.neon-case-command h2 {
3245 margin: 0.8rem 0 0;
3246 font-family: var(--font-display);
3247 font-size: clamp(2.25rem, 5vw, 4.6rem);
3248 font-style: italic;
3249 font-weight: 400;
3250 letter-spacing: -0.035em;
3251 line-height: 0.98;
3252 color: var(--color-ink);
3253}
3254
3255.neon-case-notes {
3256 display: grid;
3257 gap: 1px;
3258 background: var(--color-mist);
3259 border: 1px solid var(--color-mist);
3260}
3261
3262.neon-case-notes article {
3263 padding: clamp(1.25rem, 3vw, 2rem);
3264 background: var(--color-cream);
3265}
3266
3267.neon-case-notes h3 {
3268 margin: 0 0 0.6rem;
3269 font-family: var(--font-body);
3270 font-size: 1rem;
3271 color: var(--color-ink);
3272}
3273
3274.neon-case-notes p {
3275 margin: 0;
3276 font-family: var(--font-body);
3277 font-size: 0.9375rem;
3278 line-height: 1.65;
3279 color: var(--color-charcoal);
3280}
3281
3282.neon-case-details {
3283 display: grid;
3284 grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
3285 gap: clamp(1rem, 2.5vw, 2rem);
3286 margin: clamp(4rem, 9vw, 8rem) 0;
3287 align-items: start;
3288}
3289
3290.neon-case-details img {
3291 height: auto;
3292 object-fit: contain;
3293 object-position: top center;
3294}
3295
3296.neon-case-details figcaption span {
3297 display: block;
3298 margin-bottom: 0.25rem;
3299 font-weight: 700;
3300 color: var(--color-ink);
3301}
3302
3303.neon-case-command {
3304 display: grid;
3305 grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
3306 gap: clamp(2rem, 5vw, 4rem);
3307 align-items: end;
3308 padding: clamp(2rem, 5vw, 4rem);
3309 color: var(--color-paper);
3310 background: var(--color-ink);
3311}
3312
3313.neon-case-command h2,
3314.neon-case-command p,
3315.neon-case-command .neon-case-section-label {
3316 color: inherit;
3317}
3318
3319.neon-case-command p {
3320 margin-top: 1.1rem;
3321 color: oklch(90% 0.005 350);
3322}
3323
3324.neon-case-command code {
3325 color: inherit;
3326}
3327
3328.neon-case-command .code-block-wrap {
3329 margin: 0;
3330}
3331
3332@media (max-width: 980px) {
3333 .designing-visualize-spread,
3334 .neon-case-hero,
3335 .neon-case-strip,
3336 .neon-case-body,
3337 .neon-case-details,
3338 .neon-case-command,
3339 .craft-case-callout {
3340 grid-template-columns: 1fr;
3341 }
3342
3343 .craft-case-images {
3344 min-height: 320px;
3345 }
3346
3347 .neon-case-hero h1 {
3348 max-width: 11ch;
3349 }
3350}
3351
3352@media (max-width: 640px) {
3353 .neon-case {
3354 width: min(100% - 24px, 1360px);
3355 }
3356
3357 .neon-case-actions {
3358 flex-direction: column;
3359 }
3360
3361 .neon-case-primary,
3362 .neon-case-secondary {
3363 justify-content: center;
3364 }
3365
3366 .craft-case-images img {
3367 width: 74%;
3368 }
3369}