An API you can curl, or open in a browser, to receive Bluesky data as markdown!
1@keyframes rise {
2 from {
3 opacity: 0;
4 transform: translateY(14px);
5 }
6 to {
7 opacity: 1;
8 transform: translateY(0);
9 }
10}
11
12@keyframes pulseCursor {
13 0%,
14 45% {
15 opacity: 1;
16 }
17 55%,
18 100% {
19 opacity: 0;
20 }
21}
22
23@keyframes spin {
24 to {
25 transform: rotate(360deg);
26 }
27}
28
29.page {
30 min-height: 100vh;
31 display: flex;
32 flex-direction: column;
33 position: relative;
34}
35
36.page::before {
37 content: '';
38 position: fixed;
39 inset: 0;
40 pointer-events: none;
41 background-image:
42 linear-gradient(to right, color-mix(in oklch, var(--line) 72%, transparent) 1px, transparent 1px),
43 linear-gradient(to bottom, color-mix(in oklch, var(--line) 72%, transparent) 1px, transparent 1px);
44 background-size: 30px 30px;
45 opacity: 0.11;
46 mask-image: radial-gradient(circle at 50% 36%, black 38%, transparent 84%);
47}
48
49.header {
50 position: sticky;
51 top: 0;
52 z-index: 40;
53 backdrop-filter: blur(9px);
54 -webkit-backdrop-filter: blur(9px);
55 background: color-mix(in oklch, var(--surface) 92%, transparent);
56 border-bottom: 1px solid var(--line);
57}
58
59.nav {
60 width: min(1120px, 100% - 48px);
61 margin: 0 auto;
62 min-height: 64px;
63 display: flex;
64 align-items: center;
65 justify-content: space-between;
66 gap: 20px;
67}
68
69.navRight {
70 display: flex;
71 align-items: center;
72 gap: 14px;
73}
74
75.logo {
76 display: inline-flex;
77 align-items: center;
78 gap: 8px;
79 color: var(--text);
80 text-decoration: none;
81 font-family: var(--display);
82 font-size: 1rem;
83 letter-spacing: 0.03em;
84 text-transform: lowercase;
85}
86
87.logoMark {
88 color: color-mix(in oklch, var(--text-muted) 52%, var(--blue-accent) 48%);
89 font-family: var(--mono);
90 font-size: 0.9rem;
91}
92
93.navLinks {
94 display: flex;
95 gap: clamp(12px, 2vw, 26px);
96 align-items: center;
97}
98
99.themeSwitch {
100 display: inline-flex;
101 align-items: center;
102 gap: 2px;
103 border: 1px solid var(--line);
104 border-radius: 999px;
105 background: color-mix(in oklch, var(--surface) 86%, transparent);
106 padding: 2px;
107}
108
109.themeBtn {
110 min-height: 34px;
111 min-width: 58px;
112 border: 1px solid transparent;
113 background: transparent;
114 color: var(--text-dim);
115 border-radius: 999px;
116 font-family: var(--mono);
117 font-size: 0.64rem;
118 letter-spacing: 0.08em;
119 text-transform: uppercase;
120 padding: 0 10px;
121}
122
123.themeBtn:hover {
124 color: color-mix(in oklch, var(--text) 72%, var(--blue-accent) 28%);
125}
126
127.themeBtn:active {
128 opacity: 0.84;
129}
130
131.themeBtn:focus-visible {
132 outline: 2px solid color-mix(in oklch, var(--blue-accent) 70%, var(--text) 30%);
133 outline-offset: 2px;
134}
135
136.themeBtnActive {
137 background: var(--surface-2);
138 border-color: color-mix(in oklch, var(--line-strong) 58%, var(--blue-accent) 42%);
139 color: color-mix(in oklch, var(--text) 72%, var(--blue-accent) 28%);
140}
141
142.navLinks a {
143 color: var(--text-dim);
144 display: inline-flex;
145 align-items: center;
146 text-decoration: none;
147 font-size: 0.78rem;
148 letter-spacing: 0.08em;
149 text-transform: uppercase;
150 transition: color 140ms ease;
151}
152
153.navLinks a:hover {
154 color: color-mix(in oklch, var(--text) 72%, var(--blue-accent) 28%);
155}
156
157.navLinks a:active {
158 opacity: 0.82;
159}
160
161.navLinks a:focus-visible {
162 border-radius: var(--radius-xs);
163}
164
165.hero {
166 width: min(1120px, 100% - 48px);
167 margin: 0 auto;
168 padding: clamp(56px, 9vw, 100px) 0 18px;
169 position: relative;
170 animation: rise 360ms var(--ease-out);
171}
172
173.inputLabel {
174 position: absolute;
175 width: 1px;
176 height: 1px;
177 padding: 0;
178 margin: -1px;
179 overflow: hidden;
180 clip: rect(0, 0, 0, 0);
181 white-space: nowrap;
182 border: 0;
183}
184
185.kicker {
186 font-size: 0.72rem;
187 color: color-mix(in oklch, var(--text-muted) 58%, var(--blue-accent) 42%);
188 font-family: var(--mono);
189 text-transform: uppercase;
190 letter-spacing: 0.17em;
191 margin-bottom: 18px;
192}
193
194.title {
195 font-family: var(--display);
196 font-size: clamp(2rem, 7vw, 4.2rem);
197 letter-spacing: -0.04em;
198 line-height: 0.94;
199 max-width: 14ch;
200 text-wrap: balance;
201 margin-bottom: 18px;
202}
203
204.title::after {
205 content: '_';
206 font-family: var(--mono);
207 margin-left: 8px;
208 color: color-mix(in oklch, var(--text-muted) 40%, var(--blue-accent) 60%);
209 animation: pulseCursor 1.15s steps(1, end) infinite;
210}
211
212.subtitle {
213 max-width: 64ch;
214 color: var(--text-soft);
215 line-height: 1.66;
216 font-size: clamp(0.95rem, 1.55vw, 1.08rem);
217 margin-bottom: 30px;
218}
219
220.inputWrapper {
221 display: grid;
222 grid-template-columns: minmax(0, 1fr) auto;
223 gap: 12px;
224 max-width: 900px;
225 position: relative;
226}
227
228.inputWrapper::before {
229 content: '$';
230 position: absolute;
231 top: 20px;
232 left: 16px;
233 color: var(--text-muted);
234 font-family: var(--mono);
235 font-size: 0.84rem;
236 pointer-events: none;
237}
238
239.input {
240 width: 100%;
241 min-width: 0;
242 height: 56px;
243 padding: 0 14px 0 36px;
244 border: 1px solid var(--line);
245 border-radius: var(--radius-md);
246 background: var(--surface);
247 color: var(--text);
248 font-family: var(--mono);
249 font-size: 0.86rem;
250 letter-spacing: 0.02em;
251 transition: border-color 160ms ease, background-color 160ms ease;
252}
253
254.input::placeholder {
255 color: var(--text-muted);
256}
257
258.input:focus-visible {
259 outline: none;
260 border-color: var(--text);
261 background: var(--surface-2);
262}
263
264.input:disabled {
265 opacity: 0.62;
266 cursor: not-allowed;
267}
268
269.detectedBadge {
270 position: absolute;
271 right: 122px;
272 top: 50%;
273 transform: translateY(-50%);
274 font-family: var(--mono);
275 font-size: 0.66rem;
276 letter-spacing: 0.12em;
277 text-transform: uppercase;
278 border: 1px dashed color-mix(in oklch, var(--line-strong) 58%, var(--blue-accent) 42%);
279 padding: 4px 10px;
280 border-radius: 999px;
281 background: color-mix(in oklch, var(--surface) 78%, transparent);
282 color: color-mix(in oklch, var(--text-muted) 56%, var(--blue-accent) 44%);
283 pointer-events: none;
284}
285
286.convertBtn {
287 min-width: 112px;
288 min-height: 56px;
289 padding: 0 22px;
290 border: 1px solid var(--line-strong);
291 border-radius: var(--radius-md);
292 background: var(--text);
293 color: var(--bg);
294 font-family: var(--mono);
295 font-size: 0.8rem;
296 font-weight: 600;
297 letter-spacing: 0.07em;
298 text-transform: uppercase;
299 cursor: pointer;
300 box-shadow:
301 0 0 0 1px color-mix(in oklch, var(--blue-accent) 16%, transparent),
302 0 0 0 0 var(--blue-glow);
303 transition: transform 120ms ease, opacity 120ms ease, box-shadow 180ms ease;
304}
305
306.convertBtn:disabled {
307 opacity: 0.54;
308 transform: none;
309 box-shadow: 0 0 0 1px color-mix(in oklch, var(--blue-accent) 12%, transparent);
310 cursor: not-allowed;
311}
312
313.convertBtn:focus-visible {
314 outline: 2px solid color-mix(in oklch, var(--blue-accent) 70%, var(--text) 30%);
315 outline-offset: 2px;
316}
317
318.convertBtn:hover {
319 transform: translateY(-1px);
320 box-shadow:
321 0 0 0 1px color-mix(in oklch, var(--blue-accent) 22%, transparent),
322 0 14px 30px -18px var(--blue-glow);
323}
324
325.convertBtn:active {
326 transform: translateY(0);
327 opacity: 0.88;
328}
329
330.pills {
331 margin-top: 14px;
332 display: flex;
333 flex-wrap: wrap;
334 gap: 8px;
335}
336
337.pill {
338 border: 1px solid var(--line);
339 background: var(--surface);
340 color: var(--text-dim);
341 border-radius: 999px;
342 min-height: 36px;
343 padding: 0 13px;
344 font-family: var(--mono);
345 font-size: 0.72rem;
346 letter-spacing: 0.04em;
347 transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
348}
349
350.pill:hover {
351 color: color-mix(in oklch, var(--text) 74%, var(--blue-accent) 26%);
352 border-color: color-mix(in oklch, var(--line-strong) 56%, var(--blue-accent) 44%);
353 background: color-mix(in oklch, var(--surface-2) 88%, var(--blue-accent) 12%);
354}
355
356.pill:focus-visible {
357 outline: 2px solid color-mix(in oklch, var(--blue-accent) 70%, var(--text) 30%);
358 outline-offset: 2px;
359}
360
361.resultSection,
362.infoStrip,
363.terminalSection,
364.endpointsSection,
365.agentSection,
366.footer {
367 width: min(1120px, 100% - 48px);
368 margin-inline: auto;
369}
370
371.resultSection {
372 margin-top: 28px;
373}
374
375.resultCard {
376 border: 1px solid var(--line-strong);
377 border-radius: var(--radius-lg);
378 overflow: hidden;
379 background: var(--surface);
380 box-shadow: 0 16px 44px color-mix(in oklch, var(--bg) 72%, transparent);
381}
382
383.resultCard::before {
384 content: '';
385 display: block;
386 height: 1px;
387 width: 100%;
388 background: linear-gradient(
389 90deg,
390 transparent,
391 color-mix(in oklch, var(--blue-accent-soft) 78%, transparent),
392 transparent
393 );
394}
395
396.resultBar {
397 min-height: 52px;
398 padding: 10px 14px;
399 border-bottom: 1px solid var(--line);
400 background: var(--surface-2);
401 display: flex;
402 flex-wrap: wrap;
403 align-items: center;
404 gap: 10px;
405}
406
407.resultLabel {
408 border: 1px solid color-mix(in oklch, var(--line-strong) 52%, var(--blue-accent) 48%);
409 border-radius: 999px;
410 padding: 4px 10px;
411 font-family: var(--mono);
412 font-size: 0.66rem;
413 letter-spacing: 0.11em;
414 text-transform: uppercase;
415 color: color-mix(in oklch, var(--text-muted) 56%, var(--blue-accent) 44%);
416 white-space: nowrap;
417}
418
419.resultUrl {
420 flex: 1;
421 min-width: 0;
422 color: var(--text-dim);
423 font-size: 0.76rem;
424 font-family: var(--mono);
425 white-space: nowrap;
426 overflow: hidden;
427 text-overflow: ellipsis;
428}
429
430.resultActions {
431 display: flex;
432 gap: 8px;
433 margin-left: auto;
434}
435
436.actionBtn {
437 min-height: 34px;
438 display: inline-flex;
439 align-items: center;
440 justify-content: center;
441 border: 1px solid var(--line);
442 border-radius: var(--radius-sm);
443 background: var(--surface);
444 color: var(--text-dim);
445 text-decoration: none;
446 padding: 0 11px;
447 font-size: 0.69rem;
448 letter-spacing: 0.05em;
449 text-transform: uppercase;
450 font-family: var(--mono);
451 transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
452}
453
454.actionBtn:hover {
455 border-color: color-mix(in oklch, var(--line-strong) 52%, var(--blue-accent) 48%);
456 color: color-mix(in oklch, var(--text) 72%, var(--blue-accent) 28%);
457 background: color-mix(in oklch, var(--surface-2) 86%, var(--blue-accent) 14%);
458}
459
460.actionBtn:focus-visible {
461 outline: 2px solid color-mix(in oklch, var(--blue-accent) 70%, var(--text) 30%);
462 outline-offset: 2px;
463}
464
465.actionBtnSuccess {
466 background: var(--text);
467 color: var(--bg);
468 border-color: var(--text);
469}
470
471.toggle {
472 padding: 8px 12px;
473 border-bottom: 1px solid var(--line);
474 display: inline-flex;
475 gap: 8px;
476}
477
478.toggleBtn {
479 min-height: 34px;
480 border: 1px solid transparent;
481 background: transparent;
482 color: var(--text-dim);
483 border-radius: var(--radius-sm);
484 padding: 0 12px;
485 font-size: 0.72rem;
486 font-family: var(--mono);
487 letter-spacing: 0.02em;
488}
489
490.toggleBtn:hover {
491 border-color: var(--line);
492 color: var(--text);
493}
494
495.toggleBtn:focus-visible {
496 outline: 2px solid color-mix(in oklch, var(--blue-accent) 70%, var(--text) 30%);
497 outline-offset: 2px;
498}
499
500.toggleActive {
501 border-color: var(--line-strong);
502 color: var(--text);
503 background: var(--surface-2);
504}
505
506.previewToolbar {
507 border-bottom: 1px solid var(--line);
508 background: var(--surface-2);
509 min-height: 40px;
510 display: flex;
511 align-items: center;
512 justify-content: space-between;
513 gap: 10px;
514 padding: 5px 12px;
515}
516
517.charCount {
518 color: var(--text-dim);
519 font-family: var(--mono);
520 font-size: 0.72rem;
521 letter-spacing: 0.06em;
522 text-transform: uppercase;
523}
524
525.preview {
526 margin: 0;
527 max-height: 520px;
528 overflow: auto;
529 padding: 18px;
530 white-space: pre-wrap;
531 word-break: break-word;
532 background: var(--bg);
533 color: var(--text-soft);
534 line-height: 1.72;
535 font-family: var(--mono);
536 font-size: 0.78rem;
537}
538
539.previewError {
540 color: color-mix(in oklch, var(--text) 58%, var(--danger));
541}
542
543.previewLoading {
544 min-height: 170px;
545 display: flex;
546 align-items: center;
547 justify-content: center;
548 gap: 10px;
549 color: var(--text-muted);
550 background: var(--bg);
551 font-family: var(--mono);
552 font-size: 0.75rem;
553 letter-spacing: 0.05em;
554 text-transform: uppercase;
555}
556
557.spinner {
558 width: 17px;
559 aspect-ratio: 1;
560 border: 2px solid var(--line);
561 border-top-color: var(--text);
562 border-radius: 50%;
563 animation: spin 700ms linear infinite;
564}
565
566.infoStrip {
567 margin-top: 40px;
568 display: grid;
569 grid-template-columns: repeat(4, minmax(0, 1fr));
570 gap: 10px;
571}
572
573.infoItem {
574 border: 1px solid var(--line);
575 border-radius: var(--radius-md);
576 background: var(--surface);
577 padding: 14px;
578 display: grid;
579 gap: 7px;
580}
581
582.infoKey {
583 font-family: var(--mono);
584 font-size: 0.68rem;
585 letter-spacing: 0.12em;
586 text-transform: uppercase;
587 color: var(--text-muted);
588}
589
590.infoValue {
591 font-size: 0.87rem;
592 color: var(--text-soft);
593 line-height: 1.45;
594}
595
596.terminalSection,
597.endpointsSection,
598.agentSection {
599 margin-top: 50px;
600}
601
602.sectionTitle {
603 font-family: var(--mono);
604 color: var(--text-muted);
605 letter-spacing: 0.14em;
606 text-transform: uppercase;
607 font-size: 0.72rem;
608 margin-bottom: 12px;
609}
610
611.terminalSubtitle {
612 max-width: 65ch;
613 color: var(--text-soft);
614 line-height: 1.6;
615 margin-bottom: 14px;
616}
617
618.terminalSubtitle code,
619.terminalHint code,
620.agentFooterHint code {
621 border: 1px solid var(--line);
622 border-radius: var(--radius-xs);
623 background: var(--surface);
624 color: var(--text);
625 padding: 1px 6px;
626}
627
628.terminalBlock {
629 border: 1px solid var(--line-strong);
630 border-radius: var(--radius-lg);
631 background: var(--bg);
632 overflow: hidden;
633}
634
635.terminalBar {
636 height: 34px;
637 display: flex;
638 align-items: center;
639 gap: 7px;
640 border-bottom: 1px solid var(--line);
641 background: var(--surface-2);
642 padding: 0 12px;
643}
644
645.terminalDot {
646 width: 9px;
647 aspect-ratio: 1;
648 border-radius: 50%;
649 border: 1px solid var(--line-strong);
650 background: var(--surface);
651}
652
653.terminalCode {
654 margin: 0;
655 padding: 16px;
656 color: var(--text-soft);
657 font-family: var(--mono);
658 font-size: 0.76rem;
659 line-height: 1.8;
660 overflow-x: auto;
661}
662
663.terminalHint {
664 margin-top: 10px;
665 color: var(--text-muted);
666 font-size: 0.8rem;
667 line-height: 1.5;
668}
669
670.grid {
671 display: grid;
672 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
673 gap: 10px;
674}
675
676.card {
677 border: 1px solid var(--line);
678 background: var(--surface);
679 border-radius: var(--radius-md);
680 padding: 15px;
681 text-decoration: none;
682 color: inherit;
683 min-height: 116px;
684 transition: border-color 150ms ease, background-color 150ms ease;
685}
686
687.card:hover {
688 border-color: color-mix(in oklch, var(--line-strong) 62%, var(--blue-accent) 38%);
689 background: color-mix(in oklch, var(--surface-2) 92%, var(--blue-accent) 8%);
690}
691
692.cardBadge {
693 display: inline-flex;
694 min-width: 36px;
695 min-height: 24px;
696 align-items: center;
697 justify-content: center;
698 border: 1px solid color-mix(in oklch, var(--line-strong) 54%, var(--blue-accent) 46%);
699 border-radius: 999px;
700 font-family: var(--mono);
701 font-size: 0.66rem;
702 text-transform: uppercase;
703 color: color-mix(in oklch, var(--text-muted) 58%, var(--blue-accent) 42%);
704 letter-spacing: 0.08em;
705}
706
707.cardPath {
708 display: block;
709 margin-top: 10px;
710 color: var(--text);
711 font-family: var(--mono);
712 font-size: 0.75rem;
713 line-height: 1.45;
714}
715
716.cardDesc {
717 margin-top: 9px;
718 color: var(--text-muted);
719 font-size: 0.8rem;
720 line-height: 1.5;
721}
722
723.agentCard {
724 border: 1px solid var(--line-strong);
725 border-radius: var(--radius-lg);
726 overflow: hidden;
727 background: var(--surface);
728}
729
730.agentHeader {
731 padding: 16px;
732 border-bottom: 1px solid var(--line);
733 display: flex;
734 flex-wrap: wrap;
735 align-items: flex-start;
736 justify-content: space-between;
737 gap: 14px;
738}
739
740.agentDesc {
741 max-width: 65ch;
742 color: var(--text-soft);
743 line-height: 1.6;
744 font-size: 0.88rem;
745}
746
747.agentSkillsLink,
748.agentRawLink {
749 margin-top: 9px;
750 display: inline-flex;
751 align-items: center;
752 color: var(--text);
753 text-decoration: none;
754 border-bottom: 1px dashed color-mix(in oklch, var(--line-strong) 48%, var(--blue-accent) 52%);
755 font-size: 0.78rem;
756}
757
758.agentSkillsLink:hover,
759.agentRawLink:hover {
760 color: color-mix(in oklch, var(--text) 56%, var(--blue-accent) 44%);
761}
762
763.agentSkillsLink:active,
764.agentRawLink:active {
765 opacity: 0.82;
766}
767
768.agentSkillsLink:focus-visible,
769.agentRawLink:focus-visible {
770 border-radius: var(--radius-xs);
771}
772
773.skillCopyBtn {
774 min-width: 140px;
775 min-height: 40px;
776 border: 1px solid var(--line-strong);
777 border-radius: var(--radius-sm);
778 background: var(--text);
779 color: var(--bg);
780 font-family: var(--mono);
781 font-size: 0.72rem;
782 text-transform: uppercase;
783 letter-spacing: 0.08em;
784 padding: 0 12px;
785}
786
787.skillCopyBtn:disabled {
788 opacity: 0.45;
789 cursor: default;
790}
791
792.skillCopyBtn:focus-visible {
793 outline: 2px solid color-mix(in oklch, var(--blue-accent) 70%, var(--text) 30%);
794 outline-offset: 2px;
795}
796
797.skillCopyBtnDone {
798 background: var(--surface-2);
799 color: var(--text);
800}
801
802.skillEmbed {
803 margin: 0;
804 max-height: 280px;
805 overflow: auto;
806 border-bottom: 1px solid var(--line);
807 background: var(--bg);
808 color: var(--text-soft);
809 padding: 16px;
810 font-family: var(--mono);
811 font-size: 0.73rem;
812 line-height: 1.66;
813 white-space: pre;
814}
815
816.agentFooter {
817 min-height: 46px;
818 display: flex;
819 align-items: center;
820 gap: 12px;
821 flex-wrap: wrap;
822 padding: 11px 16px;
823}
824
825.agentFooterHint {
826 color: var(--text-dim);
827 font-size: 0.76rem;
828}
829
830.footer {
831 margin-top: 62px;
832 border-top: 1px solid var(--line);
833 padding: 30px 0 34px;
834}
835
836.footerLinks {
837 display: flex;
838 flex-wrap: wrap;
839 gap: 10px 24px;
840 align-items: center;
841}
842
843.footerLinks a {
844 color: var(--text-dim);
845 display: inline-flex;
846 align-items: center;
847 text-decoration: none;
848 font-size: 0.76rem;
849 text-transform: uppercase;
850 letter-spacing: 0.08em;
851}
852
853.footerLinks a:hover {
854 color: var(--text);
855}
856
857.footerLinks a:active {
858 opacity: 0.82;
859}
860
861.footerLinks a:focus-visible {
862 border-radius: var(--radius-xs);
863}
864
865.footerNote {
866 margin-top: 16px;
867 color: var(--text-dim);
868 font-family: var(--mono);
869 font-size: 0.74rem;
870 letter-spacing: 0.05em;
871}
872
873@media (pointer: coarse) {
874 .themeBtn,
875 .convertBtn,
876 .pill,
877 .actionBtn,
878 .toggleBtn,
879 .skillCopyBtn,
880 .navLinks a,
881 .footerLinks a,
882 .agentSkillsLink,
883 .agentRawLink {
884 min-height: 44px;
885 }
886
887 .navLinks a,
888 .footerLinks a,
889 .agentSkillsLink,
890 .agentRawLink {
891 padding-inline: 10px;
892 }
893}
894
895@media (max-width: 980px) {
896 .infoStrip {
897 grid-template-columns: repeat(2, minmax(0, 1fr));
898 }
899
900 .detectedBadge {
901 display: none;
902 }
903}
904
905@media (max-width: 760px) {
906 .nav {
907 width: min(1120px, 100% - 28px);
908 min-height: 58px;
909 flex-wrap: wrap;
910 row-gap: 10px;
911 padding: 10px 0;
912 }
913
914 .navRight {
915 width: 100%;
916 justify-content: space-between;
917 gap: 10px;
918 flex-wrap: wrap;
919 }
920
921 .navLinks {
922 gap: 11px;
923 flex-wrap: wrap;
924 }
925
926 .hero,
927 .resultSection,
928 .infoStrip,
929 .terminalSection,
930 .endpointsSection,
931 .agentSection,
932 .footer {
933 width: min(1120px, 100% - 28px);
934 }
935
936 .title {
937 max-width: 12ch;
938 }
939
940 .inputWrapper {
941 grid-template-columns: 1fr;
942 }
943
944 .convertBtn {
945 width: 100%;
946 }
947
948 .resultActions {
949 width: 100%;
950 margin-left: 0;
951 }
952
953 .actionBtn {
954 flex: 1;
955 min-width: 0;
956 }
957
958 .agentHeader {
959 align-items: stretch;
960 }
961
962 .skillCopyBtn {
963 width: 100%;
964 }
965}
966
967@media (max-width: 540px) {
968 .themeSwitch {
969 margin-left: auto;
970 }
971
972 .themeBtn {
973 min-width: 52px;
974 padding: 0 8px;
975 }
976
977 .infoStrip {
978 grid-template-columns: 1fr;
979 }
980
981 .pills {
982 gap: 6px;
983 }
984
985 .pill {
986 min-height: 36px;
987 padding: 0 10px;
988 font-size: 0.66rem;
989 }
990
991 .title {
992 font-size: clamp(1.85rem, 10vw, 2.6rem);
993 }
994}
995
996@media (prefers-reduced-motion: reduce) {
997 .hero,
998 .title::after,
999 .spinner,
1000 .convertBtn,
1001 .pill,
1002 .actionBtn,
1003 .card {
1004 animation: none !important;
1005 transition: none !important;
1006 }
1007}