:root { --icon: #37c0bb; --icon-dark: #1f8a86; --bg: #0A0F1E; --panel: #0E1526; --line: rgb(255 255 255 / .12); --text: #EAF0FB; --dim: #9AA7BD; --accent: #4DA3FF; }
@media (prefers-color-scheme: light) { :root { --bg: #F4F6FB; --panel: #FFFFFF; --line: rgb(10 15 30 / .14); --text: #101828; --dim: #55617A; --accent: #1F6FD6; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
.top, main, footer { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.top { display: flex; justify-content: space-between; align-items: center; padding-block: 16px; }
.logo { display: block; height: 32px; width: auto; }
.logo--light { display: none; }
@media (prefers-color-scheme: light) { .logo--dark { display: none; } .logo--light { display: block; } }
.pill { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer; }
.pill:hover { border-color: var(--accent); }
.pill:disabled { opacity: .55; cursor: not-allowed; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; align-items: start; padding-block: 48px; }
h1 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -.02em; }
h2 { margin: 0 0 16px; font-size: 1.5rem; }
h3 { margin: 0 0 8px; font-size: 1.05rem; }
.lead { font-size: 1.15rem; color: var(--dim); margin: 0 0 20px; }
.lead p { margin: 0; }
.sections { display: flex; flex-wrap: wrap; gap: 8px; }
html { scroll-behavior: smooth; }
.page img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 14px; object-fit: cover; }
.page .face { float: right; margin: 4px 0 12px 28px; }
.page::after { content: ""; display: block; clear: both; }
@media (max-width: 520px) { .page .face { margin-left: 16px; } .page .face img { width: 110px; height: 110px; } .page .face__spark { right: 2px; bottom: 2px; } }
.page .face img { width: 160px; height: 160px; aspect-ratio: auto; border-radius: 50%; }
.lulu-does { clear: both; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding-top: 12px; }
.lulu-does article { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.lulu-does h3 { margin: 0 0 6px; font-size: 1rem; }
.lulu-does p { margin: 0; font-size: .95rem; }
.lead p + p + p { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 1rem; }
.lead p + p + p a:first-child { padding: 10px 20px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
.lead p + p { margin-top: 12px; }
.page em { display: block; margin-top: -6px; font-size: .9rem; }
.page ol { padding-left: 22px; }
.page li { margin-bottom: 8px; }
.page { max-width: 1000px; padding-block: 32px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.page h2 { margin-top: 0; }
.page h3 { margin: 24px 0 8px; }
.page p, .page li { color: var(--dim); }
.page strong { color: var(--text); }
.page blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--accent); }
.status { color: var(--dim); }
section { padding-block: 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cards article, .lulu { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.cards p { margin: 0; color: var(--dim); }
.lulu { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.lulu__face { padding: 0; border: 0; background: none; color: inherit; border-radius: 50%; cursor: pointer; }
.lulu__face:disabled { cursor: default; }
.lulu__face:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Her picture, as in Infonet: while she speaks it glows, a ring of light round its border, teal to dark teal, swelling and easing. Light outside the picture only, so its size never changes. */
@keyframes speaking {
  0%, 100% { box-shadow: 0 0 0 2px var(--icon), 0 0 10px 2px color-mix(in srgb, var(--icon) 55%, transparent), 0 6px 20px rgb(0 0 0 / .22); }
  50% { box-shadow: 0 0 0 3px var(--icon-dark), 0 0 22px 6px color-mix(in srgb, var(--icon) 70%, transparent), 0 6px 20px rgb(0 0 0 / .22); }
}
.lulu__face.is-speaking img { animation: speaking 1.4s ease-in-out infinite; }
/* Its icon, on the other side from the sparkle: the microphone; talking, a stop square; while she hears you, a wave moving. Pointing at it always shows the stop square. */
.face__talk { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .3); }
.lulu__face:disabled .face__talk { display: none; }
.is-talking .face__talk { background: #d9362b; }
.talk-icon--stop, .talk-icon--wave { display: none; }
.is-talking .talk-icon--mic { display: none; }
.is-talking .talk-icon--stop { display: block; }
.is-hearing:not(:hover) .talk-icon--stop { display: none; }
.is-hearing:not(:hover) .talk-icon--wave { display: flex; align-items: center; gap: 2px; height: 14px; }
.talk-icon--wave i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; animation: wave .8s ease-in-out infinite; }
.talk-icon--wave i:nth-child(2) { animation-delay: -.6s; } .talk-icon--wave i:nth-child(3) { animation-delay: -.3s; } .talk-icon--wave i:nth-child(4) { animation-delay: -.45s; }
@keyframes wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .lulu__face.is-speaking img { animation: none; box-shadow: 0 0 0 3px var(--icon), 0 6px 20px rgb(0 0 0 / .22); } .talk-icon--wave i { animation: none; } }
.face { position: relative; display: inline-flex; flex: none; }
.face img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: block; box-sizing: border-box; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line), 0 6px 20px rgb(0 0 0 / .22); }
.face__spark { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; }
.contact-mail { margin: 0; padding: 8px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: .95rem; }
.contact-mail a { font-weight: 600; }
.note { margin: 0; color: var(--dim); font-size: .9rem; }
.dim { color: var(--dim); }
.small { font-size: .85rem; margin: 0; }
footer { padding-block: 24px; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); padding-block: 24px; } }