:root{--ink:#1b1b3a;--muted:#5d5d7a;--card:#fff;--accent:#7b61ff;--accent-dark:#5a3fe6;--error:#c62850;--radius:20px;color:var(--ink);-webkit-font-smoothing:antialiased;background:linear-gradient(160deg,#f0f8ff 0%,#dbeefe 45%,#c7e3fc 100%) fixed;font:17px/1.5 system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{min-height:100vh;margin:0}.page{flex-direction:column;align-items:center;gap:28px;min-height:100vh;padding:64px 20px 32px;display:flex}.hero{text-align:center}.hero h1{letter-spacing:-.02em;margin:0 0 8px;font-size:clamp(2.4rem,8vw,3.6rem);line-height:1.05}.hero p{color:var(--muted);margin:0;font-size:1.1rem}.card{background:var(--card);border-radius:var(--radius);flex-direction:column;gap:12px;width:100%;max-width:440px;padding:28px;display:flex;box-shadow:0 20px 45px -20px #1b1b3a59}label{font-weight:600}input{font:inherit;border:2px solid #dcdcec;border-radius:12px;outline:none;padding:14px 16px;transition:border-color .15s}input:focus{border-color:var(--accent)}input[aria-invalid=true]{border-color:var(--error)}.error{color:var(--error);margin:0;font-size:.95rem}.button{font:inherit;text-align:center;cursor:pointer;color:#fff;background:var(--accent);border:none;border-radius:999px;padding:14px 22px;font-weight:700;text-decoration:none;transition:transform .1s,background .15s}.button:hover{background:var(--accent-dark)}.button:active{transform:scale(.97)}.button:focus-visible,.sound-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.button.secondary{color:var(--accent-dark);background:#efeaff}.button.secondary:hover{background:#e2d9ff}.result{text-align:center;align-items:center;animation:.45s cubic-bezier(.34,1.56,.64,1) pop}.qr{width:min(256px,70vw);height:auto;image-rendering:pixelated}.result-url{color:var(--muted);overflow-wrap:anywhere;margin:0;font-size:.95rem}.actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px;display:flex}.sound-toggle{cursor:pointer;background:#fffc;border:none;border-radius:999px;padding:10px;font-size:1.4rem;line-height:1;position:fixed;top:16px;right:16px}.footnote{color:var(--muted);text-align:center;margin-top:auto;font-size:.85rem}@keyframes pop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.result{animation:none}}