:root{font-family:Inter,SF Pro Display,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#e2e8f0;background-color:#284778;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#284778,#363f5589 45%,#010314);display:flex;justify-content:center}#root{width:100%;max-width:1100px;padding:clamp(1.5rem,5vw,3.5rem) clamp(1.25rem,5vw,3rem);display:flex;justify-content:center}.app{width:min(100%,960px);margin:0 auto;display:flex;flex-direction:column;gap:clamp(1.5rem,4vw,2.75rem);padding-bottom:clamp(2rem,6vw,3.5rem)}.hero{display:flex;flex-direction:column;align-items:center;gap:.85rem;text-align:center}.hero__badge{display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:.45rem .9rem;border-radius:999px;background:#94a3f82e;color:#c7d2fe;border:1px solid rgba(129,140,248,.4)}.hero__title{margin:0;font-size:clamp(2.2rem,10vw,3.5rem);font-weight:700;color:#f8fafc}.hero__subtitle{margin:0;max-width:32rem;color:#e2e8f0cc;font-size:1rem;line-height:1.6}.layout{display:grid;gap:clamp(1.5rem,4vw,2.75rem)}.card{position:relative;background:linear-gradient(135deg,#0f172abf,#1e293ba6);border-radius:24px;padding:clamp(1.25rem,3vw,2rem);border:1px solid rgba(148,163,184,.18);box-shadow:0 30px 55px #080f2873;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}.card--capture{display:flex;flex-direction:column;gap:1.25rem}.viewport{position:relative;aspect-ratio:3 / 4;width:100%;border-radius:20px;overflow:hidden;background:#0f172a99;border:1px solid rgba(129,140,248,.28);display:grid;place-items:center}.viewport__video,.viewport__image{width:100%;height:100%;object-fit:cover}.viewport__overlay{position:absolute;inset:0;background:#0f172ac7;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:600;color:#e0e7ff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.viewport__placeholder{display:flex;flex-direction:column;align-items:center;gap:.85rem;color:#e2e8f0b8;padding:1.5rem;text-align:center}.viewport__placeholder span{font-size:clamp(3rem,12vw,4.5rem)}.control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}.primary-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.75rem 1.1rem;border-radius:999px;border:1px solid rgba(148,163,184,.28);background:#4f46e526;color:#f8fafc;font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.btn:hover:not(:disabled),.btn:focus-visible:not(:disabled){background:#6366f147;border-color:#818cf873;transform:translateY(-1px);box-shadow:0 18px 30px #6366f14d}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn--primary{flex:1;min-width:180px;background:linear-gradient(135deg,#6366f1,#22d3ee);border:none;color:#0f172a;box-shadow:0 22px 40px #6366f173}.btn--primary:hover:not(:disabled),.btn--primary:focus-visible:not(:disabled){background:linear-gradient(135deg,#4f46e5,#0ea5e9)}.btn--ghost{background:#f1f5f90d;border-color:#94a3b866;color:#e2e8f0e0}.alert{padding:.85rem 1rem;border-radius:14px;font-size:.95rem;font-weight:500;text-align:center}.alert--error{background:#f8717129;border:1px solid rgba(248,113,113,.35);color:#fecdd3}.card--result{display:flex;align-items:center;justify-content:center;padding:clamp(1.75rem,4vw,2.5rem)}.result{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.result__glow{position:absolute;inset:10% auto auto;width:60%;height:60%;background:radial-gradient(circle,#5eead44d,#6366f100);filter:blur(50px);z-index:0}.result__emoji{position:relative;z-index:1;font-size:clamp(4rem,20vw,7.5rem);filter:drop-shadow(0 25px 40px rgba(30,64,175,.45))}.result__caption{position:relative;z-index:1;margin:0;color:#e2e8f0e0;font-size:1rem;line-height:1.6}@media (min-width: 720px){.viewport{aspect-ratio:4 / 5}}@media (min-width: 900px){.layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:stretch}.card--capture{padding:clamp(1.75rem,3vw,2.5rem)}}.mirrored{transform:scaleX(-1)}