:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{color:#0f172a;background:radial-gradient(circle at top,#f4fbff 0%,#e9f5ff 45%,#dceeff 100%);margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.page{place-items:center;min-height:100dvh;padding:24px;display:grid}.card{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffe0;border:1px solid #0f172a14;border-radius:20px;width:min(560px,100%);padding:24px;box-shadow:0 14px 50px #0f172a1f}h1{margin:0;font-size:1.8rem}.subtitle{color:#334155;margin:8px 0 20px}.faceWrap{place-items:center;width:100%;transition:filter .42s;display:grid}.faceSvg{width:min(300px,80vw);height:auto}.face{fill:#ffd84d;stroke:#f5b800;stroke-width:2px}.cheek{fill:#ff8aa6;transition:opacity .35s}.eye{fill:#1f2937}.eyeLine{fill:none;stroke:#1f2937;stroke-width:3px;stroke-linecap:round}.mouth{fill:none;stroke:#1f2937;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;transition:d .32s}.controls{flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px;display:flex}.button{color:#fff;cursor:pointer;background:#0ea5e9;border:none;border-radius:10px;padding:10px 14px;font-weight:600;transition:transform .12s,background .16s}.button:hover{background:#0284c7}.button:active{transform:translateY(1px)scale(.99)}.label{color:#334155;font-size:.95rem}