.lucid-content { padding: 4rem 0 2rem; color: #222; }
.lucid-intro { max-width: 740px; margin: 0 auto 3rem; text-align: center; }
.lucid-eyebrow { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #666; }
.lucid-intro .lucid-lead { font-size: 1.65rem; font-weight: 700; }
.lucid-intro p, .lucid-copy p { line-height: 1.75; }
.lucid-intro .btn { margin: 1rem 0; }
.lucid-intro .lucid-note { font-size: .85rem; color: #666; }
.lucid-example { max-width: 680px; margin: 0 auto 4rem; }
.lucid-canvas-wrap { border-radius: 20px; overflow: hidden; background: #eee; }
#fingerprint-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
#fingerprint-fallback { padding: 3rem; margin: 0; }
.lucid-example figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; font-size: .85rem; color: #555; }
#fingerprint-motion { flex-shrink: 0; background: #fff; border: 1px solid #aaa; border-radius: 2rem; padding: .5rem .85rem; color: #333; font: inherit; }
#fingerprint-motion:focus-visible { outline: 2px solid #222; outline-offset: 3px; }
.lucid-copy { max-width: 680px; margin: auto; }
.lucid-copy h2 { font-size: 1.55rem; font-weight: 700; margin: 2rem 0 1rem; }
.lucid-copy .btn { margin-top: 1.5rem; white-space: normal; }
@media(max-width:575px) { .lucid-content { padding-top: 2.5rem; } .lucid-example figcaption { align-items: flex-start; flex-direction: column; } }

.lucid-comparison { position: relative; overflow: hidden; border-radius: 20px; background: #eee; }
.lucid-comparison img { display: block; width: 100%; height: auto; }
.lucid-comparison .lucid-original { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.lucid-divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; background: white; transform: translateX(-1px); box-shadow: 0 0 4px #0008; pointer-events: none; }
.lucid-tag { position: absolute; top: 1rem; padding: .3rem .65rem; border-radius: 1rem; background: #0009; color: #fff; font-size: .8rem; }
.lucid-tag-left { left: 1rem; } .lucid-tag-right { right: 1rem; }
.lucid-example figcaption { display: block; }
#lucid-slider { display: block; width: 100%; height: 44px; accent-color: #536c89; cursor: ew-resize; }
#lucid-slider:focus-visible { outline: 2px solid #536c89; outline-offset: 3px; }
.lucid-credit { font-size: .75rem; color: #666; }