Maho, dans les coulisses.

1:root {
2  --accent: #a78bfa;
3  --arrondi: 20px;
4  color-scheme: dark;
5}
6
7* { box-sizing: border-box; }
8body {
9  margin: 0;
10  padding: 22px;
11  min-height: 100vh;
12  display: grid;
13  align-items: center;
14  background: #0d0d10;
15  color: #f4f4f4;
16  font-family: system-ui, sans-serif;
17}
18.demo-card {
19  position: relative;
20  display: grid;
21  grid-template-columns: 1.2fr 1fr;
22  align-items: center;
23  gap: 16px;
24  padding: 28px;
25  border: 1px solid #ffffff24;
26  border-radius: var(--arrondi);
27  background: radial-gradient(ellipse at 100% 0%,
28    color-mix(in srgb, var(--accent) 15%, transparent),
29    transparent 70%), #151519;
30  transition: border-radius .2s ease;
31}
32.copy { min-width: 0; }
33.eyebrow {
34  margin: 0 0 22px;
35  font-size: 9px;
36  font-weight: 700;
37  letter-spacing: .18em;
38  color: var(--accent);
39}
40h1 {
41  margin: 0;
42  font-size: clamp(27px, 4.7vw, 40px);
43  line-height: 1.06;
44  letter-spacing: -.055em;
45  overflow-wrap: anywhere;
46}
47h1 span { display: block; color: var(--accent); }
48.intro { font-size: 12px; line-height: 1.7; color: #b6b6c2; }
49.demo-button {
50  display: inline-flex;
51  align-items: center;
52  gap: 14px;
53  margin-top: 10px;
54  padding: 13px 16px;
55  border-radius: var(--arrondi);
56  background: var(--accent);
57  color: #17121f;
58  font-size: 11px;
59  font-weight: 750;
60  cursor: pointer;
61}
62.signal {
63  position: absolute;
64  width: 1px;
65  height: 1px;
66  opacity: 0;
67}
68.signal:focus-visible ~ .copy .demo-button {
69  outline: 2px solid white;
70  outline-offset: 5px;
71}
72.on { display: none; }
73.signal:checked ~ .copy .off { display: none; }
74.signal:checked ~ .copy .on { display: inline; }
75.mascot { color: var(--accent); }
76.mascot svg { display: block; width: 100%; }
77.bulb { opacity: .35; transition: filter .2s, opacity .2s; }
78.signal:checked ~ .mascot .bulb {
79  opacity: 1;
80  filter: drop-shadow(0 0 10px var(--accent));
81}
82@media (max-width: 480px) {
83  body { padding: 16px; }
84  .demo-card { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
85  .mascot { width: 120px; margin: 0 auto; }
86  .eyebrow { margin-bottom: 16px; }
87}
88@media (prefers-reduced-motion: reduce) {
89  * { transition: none !important; }
90}