:root{
  --bg:#B8E4F0; --dot:#9ED6E8; --line:#1F1B2E; --ink:#1F1B2E;
  --text:#1F1B2E; --muted:#2E5866; --lid:#8C6CFF; --iris:#2BB673;
  --blush:#FF8FB1; --accent:#FFD23F; --bags:#6A4FD1;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1C1838; --dot:#2E2760; --line:#F6EAD0; --text:#F6EAD0;
    --muted:#B9ADD8; --bags:#C7A6FF; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1C1838; --dot:#2E2760; --line:#F6EAD0; --text:#F6EAD0;
  --muted:#B9ADD8; --bags:#C7A6FF; color-scheme:dark;
}
*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{height:100%;margin:0}
body{
  background-color:var(--bg);
  background-image:radial-gradient(var(--dot) 2.2px, transparent 2.7px);
  background-size:24px 24px;
  color:var(--text);
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
  transition:background-color .6s,color .6s;
  -webkit-tap-highlight-color:transparent;
}
main{text-align:center;padding:1rem;width:100%}
.face-wrap{position:relative;width:min(560px,88vw);margin:0 auto}
#face{width:100%;height:auto;display:block;overflow:visible;cursor:pointer;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.ring{fill:none;stroke:var(--line);stroke-width:16;transition:stroke .6s}
.brow{fill:none;stroke:var(--line);stroke-width:15;stroke-linecap:round;stroke-linejoin:round;transition:stroke .6s}
.sclera{fill:#fff}
.iris{fill:var(--iris)}
.core{fill:#1F1B2E}
.shine{fill:#fff}
.lid{fill:var(--lid);stroke:#1F1B2E;stroke-width:6}
.happy,.squeeze{fill:none;stroke:#1F1B2E;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.blush{fill:var(--blush)}
.bags{fill:none;stroke:var(--bags);stroke-width:6;stroke-linecap:round}
.fr{font-weight:900;font-size:54px;fill:var(--line);font-family:inherit;transition:fill .6s}
#shades .lens{fill:#1F1B2E;fill-opacity:.86;stroke:#1F1B2E;stroke-width:6}
#shades .glint{stroke:#fff;stroke-opacity:.55;stroke-width:6;stroke-linecap:round;fill:none}
#shades .bridge{stroke:#1F1B2E;stroke-width:8;fill:none;stroke-linecap:round}

.tagline{font-size:clamp(1.25rem,3.6vw,1.9rem);font-weight:900;margin:.5em 0 1em;letter-spacing:-.01em}
.actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;padding:.75em 1.7em;
  background:var(--accent);color:#1F1B2E;
  border:3px solid #1F1B2E;border-radius:999px;
  box-shadow:0 6px 0 var(--line);
  font:inherit;font-weight:900;font-size:1.1rem;text-decoration:none;cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translateY(-2px) rotate(-1.5deg)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line)}
.btn:focus-visible,.theme-toggle:focus-visible{outline:4px dashed var(--line);outline-offset:4px}
.btn.alt{background:#fff}
.theme-toggle{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;
  width:48px;height:48px;border-radius:50%;
  border:3px solid #1F1B2E;background:var(--accent);color:#1F1B2E;
  box-shadow:0 4px 0 var(--line);font-size:1.35rem;line-height:1;cursor:pointer;z-index:10;
}
footer{
  position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  text-align:center;font-size:.92rem;color:var(--muted);padding:0 1rem;
}
.hint{display:block;opacity:0;transition:opacity 1.2s}
.hint.show{opacity:1}

.float{position:absolute;pointer-events:none;font-weight:900;color:var(--line);
  animation:floatUp 2.4s ease-out forwards}
.z{font-size:2rem}
@keyframes floatUp{
  0%{opacity:0;transform:translate(0,0) scale(.6) rotate(-8deg)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx,30px),-120px) scale(1.3) rotate(10deg)}
}
.pop{font-size:clamp(1.5rem,4.2vw,2.5rem);color:#FFD23F;-webkit-text-stroke:2px #1F1B2E;
  animation:popUp 1.2s ease-out forwards;white-space:nowrap}
@keyframes popUp{
  0%{opacity:0;transform:scale(.3) rotate(var(--r,0deg))}
  20%{opacity:1;transform:scale(1.15) rotate(var(--r,0deg))}
  100%{opacity:0;transform:translateY(-60px) scale(1) rotate(var(--r,0deg))}
}
#face.shake{animation:shake .45s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-10px) rotate(-2deg)}
  40%{transform:translateX(9px) rotate(2deg)}
  60%{transform:translateX(-6px)}
  80%{transform:translateX(4px)}
}
#face.laugh{animation:laugh .32s ease-in-out 5}
@keyframes laugh{
  0%,100%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-8px) rotate(-2deg)}
  75%{transform:translateY(-8px) rotate(2deg)}
}
.intro{animation:intro .8s cubic-bezier(.3,1.6,.5,1) both}
@keyframes intro{from{transform:scale(.6) translateY(24px);opacity:0}}

.mini{
  position:fixed;width:var(--w);aspect-ratio:4/3;z-index:5;cursor:pointer;
  background:hsl(var(--h) 85% 72%);border:3px solid #1F1B2E;
  border-radius:42% 42% 46% 46%;box-shadow:0 4px 0 #1F1B2E;
  animation:miniIn .5s cubic-bezier(.3,1.7,.5,1) both;animation-delay:var(--d);
}
.mini svg{width:100%;height:100%;display:block}
.mini .mb{fill:none;stroke:#1F1B2E;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.mini .e{transform-box:fill-box;transform-origin:center;transition:transform .08s}
.mini.blink .e{transform:scaleY(.12)}
.mini.out{animation:miniOut .35s ease-in forwards}
@keyframes miniIn{from{transform:scale(0) rotate(-20deg)}}
@keyframes miniOut{to{transform:scale(0) rotate(25deg);opacity:0}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  #face.shake,#face.laugh,.intro,.mini,.mini.out{animation:none}
  .float,.pop{animation-name:fadeOnly}
  .btn,.btn:hover{transition:none;transform:none}
}
@keyframes fadeOnly{0%,100%{opacity:0}20%,80%{opacity:1}}
@media (max-height:560px){ .face-wrap{width:min(420px,70vw)} footer{display:none} }