:root { color-scheme: dark; --page-background-color: rgb(56,56,56); --page-text-color: lightgray; } 
html, body { margin: 0; padding: 0; height: 100%; } 
html, body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; color: var(--page-text-color); background: var(--page-background-color); } 
#content { width: 96%; max-width: 618px; margin: auto; padding-bottom: calc(env(safe-area-inset-bottom) + 44px); overflow: hidden; } 
#content h1 { font-family: "Didot", "Times New Roman", serif; font-weight: 600; margin-block: 0; } 
:root { color-scheme: dark; } 
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, rgba(61, 255, 230, 0.24), transparent 30%), radial-gradient(circle at bottom right, rgba(255, 0, 153, 0.18), transparent 28%), linear-gradient(180deg, #05060a 0%, #0a0d16 100%); } 
#content { width: 100%; max-width: none; margin: auto; min-height: 100vh; display: grid; place-items: center; padding: clamp(0.75rem, 2vw, 1.5rem); box-sizing: border-box; } 
.neon-shell { position: relative; width: 100%; min-height: min(88vh, 56rem); display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 2rem; background: rgba(8, 10, 18, 0.72); box-shadow: 0 30px 120px rgba(0, 0, 0, 0.55); backdrop-filter: blur(20px); } 
.caption-group { position: relative; } 
.neon-aurora { position: absolute; inset: 0; background: radial-gradient(circle at 25% 20%, rgba(56, 255, 220, 0.35), transparent 24%), radial-gradient(circle at 80% 75%, rgba(255, 38, 183, 0.28), transparent 25%), radial-gradient(circle at 50% 50%, rgba(110, 98, 255, 0.16), transparent 28%); filter: blur(18px); opacity: 0.92; } 
.neon-card { position: relative; z-index: 1; width: min(100%, 34rem); padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 1.5rem; background: linear-gradient(180deg, rgba(11, 14, 24, 0.92) 0%, rgba(5, 7, 12, 0.88) 100%); box-shadow: 0 0 0 1px rgba(66, 255, 222, 0.08), 0 24px 70px rgba(0, 0, 0, 0.5); } 
.eyebrow { display: inline-block; margin-bottom: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid rgba(127, 255, 232, 0.22); color: rgb(127,255,232); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.72rem; } 
h1 { margin: 0; font-family: "Didot", "Times New Roman", serif; font-size: clamp(3.2rem, 12vw, 6.5rem); line-height: 0.9; letter-spacing: -0.06em; color: white; text-shadow: 0 0 12px rgba(73, 255, 230, 0.24), 0 0 28px rgba(255, 38, 183, 0.18); } 
.lede { margin: 1rem 0 0; max-width: 26rem; font-size: clamp(1.05rem, 2.5vw, 1.35rem); line-height: 1.6; color: rgb(218,226,235); } 
.actions { margin-top: 1.75rem; display: grid; gap: 0.8rem; } 
.cta { display: inline-flex; align-items: center; justify-content: center; width: min(100%, 20rem); padding: 0.9rem 1.25rem; border-radius: 999px; background: linear-gradient(90deg, #44ffe0 0%, #ff2fc2 100%); color: rgb(5,8,14); text-decoration: none; font-weight: 700; box-shadow: 0 14px 30px rgba(68, 255, 224, 0.18); } 
.caption { color: rgb(172,183,196); font-size: 0.92rem; line-height: 1.5; } 
.caption-url { font-weight: 700; text-decoration: none; color: inherit; } 
.caption-url:hover, .caption-url:focus-visible { text-decoration: underline; } 
.qr-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(3, 5, 10, 0.72); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease; z-index: 20; } 
.caption-group:hover #neon-qr .qr-overlay, .caption-group:focus-within #neon-qr .qr-overlay, #neon-qr:target .qr-overlay { opacity: 1; visibility: visible; pointer-events: auto; } 
.qr-panel { width: min(100%, 28rem); padding: 1rem; border-radius: 1.75rem; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(7, 10, 18, 0.92); box-shadow: 0 30px 100px rgba(0, 0, 0, 0.62); } 
.qr-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } 
.qr-code { width: min(100%, 24rem); aspect-ratio: 1; margin: 0 auto; border-radius: 1.25rem; background-color: white; background-image: url(/ep/neon/qr.svg); background-repeat: no-repeat; background-position: center; background-size: contain; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } 
.qr-label { margin: 0.9rem 0 0; text-align: center; color: rgb(210,219,230); } 
@media (prefers-color-scheme: dark) {
}
@media (min-width: 440px) {
#content { width: 80%; } 
}
@media (max-width: 640px) {
#content { padding: 0.5rem 1rem; } 
.neon-shell { min-height: auto; place-items: start center; border-radius: 1.25rem; padding: 0.75rem 0.75rem 1rem; } 
.neon-aurora { inset: 0; height: auto; background: radial-gradient(circle at 20% 12%, rgba(56, 255, 220, 0.22), transparent 24%), radial-gradient(circle at 80% 88%, rgba(255, 38, 183, 0.2), transparent 22%), radial-gradient(circle at 50% 55%, rgba(110, 98, 255, 0.12), transparent 26%); } 
.neon-card { width: 100%; margin-top: 0.6rem; padding: 1.1rem; } 
h1 { font-size: clamp(2.8rem, 18vw, 5rem); } 
.lede { max-width: none; } 
.actions { gap: 0.65rem; justify-items: center; } 
.cta { width: min(100%, 16rem); padding: 0.85rem 1rem; justify-self: center; } 
.caption { line-height: 1.5; } 
.caption-url { display: inline-block; word-break: break-word; } 
.qr-overlay { place-items: start center; padding: 0.5rem 0.75rem; } 
.qr-panel { width: min(100%, 22rem); max-height: calc(100vh - 6.5rem); overflow: auto; padding: 0.75rem; border-radius: 1.5rem; } 
.qr-code { width: min(100%, 14rem); } 
.qr-panel-head { margin-bottom: 0.6rem; } 
.qr-label { margin: 0.7rem 0 0; font-size: 0.84rem; } 
}