@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Unbounded:wght@500;700&display=swap');

:root { color: #fff; background: #1a1337; font-family: Manrope, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100dvh; overflow: hidden; }
button { font: inherit; border: 0; cursor: pointer; }
.experience { min-height: 100dvh; }
.welcome { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 25px 38px; text-align: center; background: radial-gradient(circle at 50% 28%, #774bff 0, #34205f 35%, #1a1337 72%); }
.eyebrow { margin: 0 0 20px; color: #c3ff72; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.hero-orbit { position: relative; width: 210px; height: 160px; margin-bottom: 12px; border-radius: 50%; background: radial-gradient(ellipse, #f7e3a5 0%, #eea753 31%, transparent 66%); }
.hero-orbit span { position: absolute; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 25px; font-size: 42px; background: linear-gradient(145deg, #ffffff80, #ffffff12); box-shadow: inset 0 1px #fff8, 0 12px 20px #100c2c55; animation: bob 2.2s ease-in-out infinite; }
.hero-orbit span:nth-child(1) { left: 15px; top: 54px; transform: rotate(-15deg); animation-delay: -.4s; }.hero-orbit span:nth-child(2) { right: 14px; top: 58px; transform: rotate(13deg); animation-delay: -.8s; }.hero-orbit span:nth-child(3) { left: 70px; top: 4px; animation-delay: 0s; }
h1 { margin: 0; font: 700 clamp(29px, 8vw, 42px)/1.15 Unbounded, sans-serif; letter-spacing: -.06em; }.intro { max-width: 320px; margin: 20px 0 28px; color: #ded9f2; font-size: 15px; line-height: 1.5; }
.primary, .secondary { min-height: 54px; padding: 0 23px; border-radius: 17px; font-weight: 800; }.primary { color: #1d173a; background: #c3ff72; box-shadow: 0 8px 22px #a7ff5744; }.primary span { margin-left: 10px; font-size: 19px; }.fineprint { max-width: 250px; margin: 16px 0 0; color: #b7b0cf; font-size: 11px; line-height: 1.4; }
.hidden { display: none !important; }
.camera-screen { position: fixed; inset: 0; overflow: hidden; background: #171220; }.camera-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.camera-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#09051580, transparent 28%, transparent 65%, #09051599); }.camera-header { position: absolute; z-index: 4; top: max(18px, env(safe-area-inset-top)); right: 18px; left: 18px; display:flex; justify-content:space-between; align-items:center; }.brand { font: 700 13px Unbounded, sans-serif; letter-spacing: -.07em; }.icon-button { width: 38px; height: 38px; border-radius: 50%; color: white; background: #fff3; font-size: 28px; line-height: 1; }.scanner-copy { position: absolute; z-index: 3; top: max(90px, calc(env(safe-area-inset-top) + 70px)); width:100%; text-align:center; text-shadow: 0 2px 5px #000; }.scanner-copy strong,.scanner-copy span { display:block; }.scanner-copy strong { font-size: 17px; }.scanner-copy span { margin-top: 5px; color:#eee8ff; font-size:13px; }.scan-frame { position:absolute; z-index:3; top:50%; left:50%; width:min(65vw,250px); aspect-ratio:1; transform:translate(-50%,-42%); border:1px solid #fff4; border-radius:24px; box-shadow: 0 0 0 100vmax #0b061833; }.scan-frame i { position:absolute; width:30px;height:30px;border:3px solid #c3ff72; }.scan-frame i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:20px 0 0}.scan-frame i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0;border-radius:0 20px 0 0}.scan-frame i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0;border-radius:0 0 0 20px}.scan-frame i:nth-child(4){right:-2px;bottom:-2px;border-left:0;border-top:0;border-radius:0 0 20px 0}
.ar-anchor { position:absolute; z-index:5; left:50%; top:43%; width:210px; transform:translate(-50%,-50%); text-align:center; pointer-events:none; }.emoji-character { height:185px; display:grid; place-items:center; filter:drop-shadow(0 14px 12px #0e071a99); font-size:136px; animation:dance .72s ease-in-out infinite alternate; }.emoji-character::before { content:attr(data-emoji); display:block; transform:perspective(220px) rotateY(-14deg) rotateZ(-5deg); text-shadow: 8px 10px 0 #0002; }.prediction { margin: -1px auto 0; width:min(90vw,300px); padding:14px 16px 16px; border:1px solid #fff7; border-radius:20px; color:#21153f; background:#fff; box-shadow:0 12px 28px #0e071a55; font-size:14px; font-weight:700; line-height:1.4; }.prediction p { margin:0; }.emoji-name { margin-bottom:4px !important; color:#7756d8; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.sparkles { position:absolute; top:20px; width:100%; height:150px; background: radial-gradient(circle at 16% 55%,#c3ff72 0 4px,transparent 5px),radial-gradient(circle at 80% 20%,#ffb4e4 0 5px,transparent 6px),radial-gradient(circle at 89% 68%,#ffd45e 0 4px,transparent 5px); animation:twinkle 1.2s infinite alternate; }.camera-actions { position:absolute; z-index:6; right:18px; bottom:max(24px, env(safe-area-inset-bottom)); left:18px; display:flex; gap:10px; }.camera-actions button{flex:1}.secondary{color:#fff;background:#fff2;border:1px solid #fff5}.compact{font-size:13px}
@keyframes dance { from { transform:translateY(5px) rotate(-4deg) scale(.98); } to { transform:translateY(-10px) rotate(4deg) scale(1.04); } } @keyframes bob { 50% { translate:0 -9px; } } @keyframes twinkle { to { transform:scale(1.08) rotate(12deg); opacity:.65; } }
@media (min-width:700px) { .welcome { max-width:560px; margin:auto; box-shadow:0 0 60px #0008; } .camera-screen { max-width:560px; margin:auto; } }