:root{--violet: #7c3aed;--violet-deep: #6d28d9;--violet-soft: #ede9fe;--lime: #84cc16;--ink: #1f2937;--card: #ffffff;--shadow: 0 10px 25px -10px rgba(109, 40, 217, .45);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:radial-gradient(1200px 600px at 50% -10%,#f5f3ff,#faf5ff 45%,#f3e8ff) fixed}#root{min-height:100dvh}.app{max-width:960px;margin:0 auto;padding:max(env(safe-area-inset-top),20px) 16px max(env(safe-area-inset-bottom),20px);display:flex;flex-direction:column;min-height:100dvh}.app-header{text-align:center;padding:12px 0 22px}.app-title{margin:0;font-size:clamp(2rem,8vw,3.25rem);font-weight:900;letter-spacing:-.02em;color:var(--violet-deep)}.waft{display:inline-block;animation:waft 2.4s ease-in-out infinite}.app-tagline{margin:6px 0 0;font-size:clamp(1rem,3.5vw,1.15rem);color:#6b7280;font-weight:600}.install-btn{margin-top:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;padding:10px 22px;border-radius:999px;background:var(--violet);color:#fff;font-size:.95rem;font-weight:700;box-shadow:var(--shadow);transition:background .12s ease,transform .12s ease}.install-btn:hover{background:var(--violet-deep);transform:translateY(-2px)}.install-btn:active{transform:translateY(0) scale(.97)}.install-btn:focus-visible{outline:3px solid var(--violet);outline-offset:3px}.install-help{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:#1e0f3c80}.install-help-card{max-width:340px;width:100%;background:var(--card);border-radius:20px;padding:22px 24px;box-shadow:var(--shadow)}.install-help-card h2{margin:0 0 10px;font-size:1.2rem;color:var(--violet-deep)}.install-help-card ol{margin:0;padding-left:20px;line-height:1.55;font-size:.95rem}.install-help-card li+li{margin-top:6px}.install-help-close{margin-top:16px;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;padding:10px;border-radius:12px;background:var(--violet-soft);color:var(--violet-deep);font-size:.95rem;font-weight:700}.install-help-close:hover{background:var(--violet);color:#fff}.grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}.face-card-wrap{position:relative}.face-card{position:relative;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;padding:14px 10px 12px;border-radius:20px;background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px;overflow:visible;transition:transform .12s ease,box-shadow .12s ease;user-select:none;-webkit-user-select:none}.face-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px #6d28d98c}.face-card:active{transform:translateY(0) scale(.97)}.face-card:focus-visible{outline:3px solid var(--violet);outline-offset:3px}.face-img{width:100%;aspect-ratio:1 / 1;object-fit:contain;border-radius:16px;background:var(--violet-soft);pointer-events:none}.face-name{font-size:.85rem;font-weight:700;color:var(--ink);text-align:center;line-height:1.15}.face-remove{position:absolute;top:-6px;right:-6px;width:26px;height:26px;border-radius:50%;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:#fff;color:#6b7280;box-shadow:0 4px 10px -3px #1f293766;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}.face-remove:hover{color:#ef4444}.add-tile{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:2px dashed #c4b5fd;border-radius:20px;background:transparent;color:var(--violet-deep);padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:.85rem;font-weight:700;align-self:start;transition:background .12s ease,border-color .12s ease}.add-tile:hover{background:var(--violet-soft);border-color:var(--violet)}.add-tile-icon{font-size:2rem;line-height:1;aspect-ratio:1 / 1;width:100%;max-width:64px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--violet-soft)}.puff{position:absolute;top:40%;left:50%;translate:-50% -50%;font-size:2.6rem;opacity:0;pointer-events:none}.is-tooting .face-img{animation:wobble .6s ease}.face-zoom{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;pointer-events:none;background:#1e0f3c73;animation:zoom-backdrop .55s ease both}.face-zoom-img{width:min(94vw,94vh);height:min(94vw,94vh);object-fit:contain;animation:zoom-pop .55s cubic-bezier(.22,1.2,.36,1) both}@keyframes zoom-backdrop{0%,to{opacity:0}20%,75%{opacity:1}}@keyframes zoom-pop{0%{transform:scale(.1);opacity:0}22%{transform:scale(1);opacity:1}72%{transform:scale(1);opacity:1}to{transform:scale(.08);opacity:0}}.is-tooting .puff{animation:puff .7s ease-out}.burst-particle{position:absolute;top:40%;left:50%;font-size:1.5rem;opacity:0;pointer-events:none;animation:burst .85s ease-out both}@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}15%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1.15) rotate(var(--rot))}}@keyframes waft{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(6px) rotate(8deg)}}@keyframes wobble{0%{transform:rotate(0) scale(1)}15%{transform:rotate(-14deg) scale(1.22)}30%{transform:rotate(11deg) scale(1.16)}45%{transform:rotate(-8deg) scale(1.1)}60%{transform:rotate(5deg) scale(1.05)}75%{transform:rotate(-3deg) scale(1.02)}to{transform:rotate(0) scale(1)}}@keyframes puff{0%{opacity:0;transform:translate(0) scale(.4)}25%{opacity:.95}to{opacity:0;transform:translate(28px,-46px) scale(1.6)}}.app-footer{text-align:center;padding:24px 0 6px;color:#9ca3af;font-size:.8rem;font-weight:600}.app-footer p{margin:0}@media (prefers-reduced-motion: reduce){.waft,.is-tooting .face-img,.is-tooting .puff{animation:none}.face-zoom{display:none}}