@import"https://fonts.googleapis.com/css2?family=Bangers&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap";:root{--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-elastic: cubic-bezier(.68, -.55, .27, 1.55);--ease-snap: cubic-bezier(.2, 0, 0, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--dur-instant: 80ms;--dur-fast: .14s;--dur-normal: .24s;--dur-slow: .4s;--dur-crawl: .7s}@keyframes fnubb-rage{0%,to{transform:translate(0) rotate(0)}10%{transform:translate(-4px,-2px) rotate(-2.5deg)}20%{transform:translate(4px,1px) rotate(2.5deg) scale(1.03)}30%{transform:translate(-4px,2px) rotate(-2.5deg)}40%{transform:translate(4px,-1px) rotate(2.5deg)}50%{transform:translate(-3px,1px) rotate(-2deg) scale(1.05)}60%{transform:translate(3px,-2px) rotate(2deg)}70%{transform:translate(-4px,1px) rotate(-2.5deg)}80%{transform:translate(4px,2px) rotate(2.5deg)}90%{transform:translate(-2px,-1px) rotate(-1.5deg)}}@keyframes fnubb-sob{0%,to{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(8px) rotate(1.5deg)}}@keyframes fnubb-jitter{0%,to{transform:translate(0) rotate(0)}20%{transform:translate(-2px,1px) rotate(-1.5deg)}40%{transform:translate(2px,-1px) rotate(1.5deg)}60%{transform:translate(-2px,-1px) rotate(-1.5deg)}80%{transform:translate(2px,1px) rotate(1.5deg)}}@keyframes fnubb-spaz{0%,to{transform:translate(0) rotate(0)}10%{transform:translate(-4px,2px) rotate(-3deg)}20%{transform:translate(5px,-3px) rotate(3deg)}30%{transform:translate(-5px,-2px) rotate(-2deg)}40%{transform:translate(4px,4px) rotate(3deg) scale(1.03)}50%{transform:translate(-4px,-4px) rotate(-3deg)}60%{transform:translate(5px,3px) rotate(2deg)}70%{transform:translate(-5px,2px) rotate(-3deg)}80%{transform:translate(4px,-4px) rotate(3deg)}90%{transform:translate(-3px,3px) rotate(-2deg)}}@keyframes fnubb-volt{0%,20%{transform:translateY(0) rotate(0) scaleY(1)}42%{transform:translateY(-56px) rotate(-200deg) scaleY(1)}60%{transform:translateY(0) rotate(-360deg) scaleY(.78)}70%{transform:translateY(-16px) rotate(-360deg) scaleY(1.06)}80%{transform:translateY(0) rotate(-360deg) scaleY(.92)}88%{transform:translateY(-5px) rotate(-360deg) scaleY(1.02)}to{transform:translateY(0) rotate(-360deg) scaleY(1)}}@keyframes fnubb-liftoff{0%,12%{transform:translateY(0) rotate(0)}32%{transform:translateY(-5px) rotate(-13deg)}58%{transform:translateY(-42px) rotate(-4deg)}80%{transform:translateY(-32px) rotate(3deg)}to{transform:translateY(0) rotate(0)}}@keyframes fnubb-prop{to{transform:rotate(360deg)}}@keyframes fnubb-poop-mg-a{0%{opacity:0;transform:translate(0) scale(.35)}7%{opacity:1}92%{opacity:1;transform:translate(-50px,68px) scale(1.05)}to{opacity:0;transform:translate(-55px,74px) scale(1.1)}}@keyframes fnubb-poop-mg-b{0%{opacity:0;transform:translate(0) scale(.28) rotate(-12deg)}6%{opacity:1}90%{opacity:1;transform:translate(-88px,24px) scale(.88) rotate(8deg)}to{opacity:0;transform:translate(-94px,28px) scale(.9)}}@keyframes fnubb-poop-mg-c{0%{opacity:0;transform:translate(0) scale(.42) rotate(8deg)}7%{opacity:1}93%{opacity:1;transform:translate(-18px,98px) scale(1.45) rotate(22deg)}to{opacity:0;transform:translate(-22px,104px) scale(1.5)}}@keyframes fnubb-poop-splat{0%{opacity:0;transform:scale(.1)}18%{opacity:1}62%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes fnubb-sick-converge{0%{opacity:0;transform:scale(.15)}18%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.04)}}@keyframes fnubb-drain{0%,12%{filter:none}55%{filter:saturate(0) brightness(2) contrast(4)}to{filter:saturate(0) brightness(2.5) contrast(7)}}@keyframes fnubb-vb-a{0%{opacity:0;transform:translate(0) scale(.25)}10%{opacity:1}to{opacity:0;transform:translate(-22px,72px) scale(1.6)}}@keyframes fnubb-vb-b{0%{opacity:0;transform:translate(0) scale(.2)}10%{opacity:1}to{opacity:0;transform:translate(42px,52px) scale(1.35)}}@keyframes fnubb-vb-c{0%{opacity:0;transform:translate(0) scale(.3)}12%{opacity:1}to{opacity:0;transform:translate(12px,88px) scale(1.75)}}@keyframes fnubb-vb-d{0%{opacity:0;transform:translate(0) scale(.22)}10%{opacity:1}to{opacity:0;transform:translate(-42px,38px) scale(1.25)}}@keyframes fnubb-splat{0%{opacity:0;transform:translate(0) scale(.3)}25%{opacity:1}to{opacity:0;transform:translate(18px,-14px) scale(1.2)}}@keyframes fnubb-stream{0%,to{transform:scaleY(1) rotate(0)}50%{transform:scaleY(1.14) rotate(2deg)}}@keyframes fnubb-sick{0%{filter:none;opacity:1}to{filter:grayscale(1) brightness(2.4);opacity:.1}}@keyframes fnubb-vomit{0%{opacity:0;transform:translate(0) scale(.3)}15%{opacity:1}to{opacity:.9;transform:translate(48px,56px) scale(1.35)}}@keyframes fnubb-grow{0%{transform:scale(.2);opacity:0}60%{opacity:1}to{transform:scale(1.7);opacity:.95}}@keyframes fnubb-galen{0%{transform:translate(0) rotate(0) scale(1)}14%{transform:translate(-12px,-14px) rotate(-16deg) scale(1.12)}28%{transform:translate(13px,7px) rotate(18deg) scale(.9)}42%{transform:translate(-9px,12px) rotate(-10deg) scale(1.1)}57%{transform:translate(15px,-11px) rotate(22deg) scale(.94)}71%{transform:translate(-13px,9px) rotate(-18deg) scale(1.14)}85%{transform:translate(9px,-7px) rotate(12deg) scale(.96)}to{transform:translate(0) rotate(0) scale(1)}}@keyframes fnubb-sleep{0%,to{transform:scale(1)}50%{transform:scale(1.03,.96)}}@keyframes fnubb-fart{0%,19%,to{opacity:0;transform:translate(0) scale(.4)}21%{opacity:.85;transform:translate(-5px,-3px) scale(.6)}31%{opacity:0;transform:translate(-20px,-14px) scale(1.15)}57%{opacity:0;transform:translate(0) scale(.4)}60%{opacity:.85;transform:translate(-5px,-3px) scale(.6)}71%{opacity:0;transform:translate(-22px,-11px) scale(1.1)}86%{opacity:.85;transform:translate(-5px,-3px) scale(.6)}95%{opacity:0;transform:translate(-18px,-16px) scale(1.05)}}@keyframes fnubb-bounce{0%,to{transform:translateY(0) scaleY(1)}18%{transform:translateY(-30px) scaleY(1.12)}38%{transform:translateY(0) scaleY(.86)}55%{transform:translateY(-15px) scaleY(1.06)}72%{transform:translateY(0) scaleY(.94)}86%{transform:translateY(-5px) scaleY(1.02)}}@keyframes fnubb-wobble{0%,to{transform:rotate(0)}18%{transform:rotate(-9deg)}38%{transform:rotate(7deg)}58%{transform:rotate(-5deg)}78%{transform:rotate(3deg)}}@keyframes fnubb-pop{0%{transform:scale(.3) rotate(-12deg);opacity:0}55%{transform:scale(1.22) rotate(6deg);opacity:1}74%{transform:scale(.9) rotate(-3deg)}88%{transform:scale(1.05) rotate(1deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes fnubb-shake{0%,to{transform:translate(0) rotate(0)}15%{transform:translate(-11px) rotate(-4deg)}30%{transform:translate(11px) rotate(4deg)}45%{transform:translate(-8px) rotate(-3deg)}60%{transform:translate(8px) rotate(2deg)}80%{transform:translate(-4px) rotate(-1deg)}}@keyframes fnubb-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fnubb-flash{0%,to{opacity:1}50%{opacity:0}}@keyframes fnubb-float{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-18px) rotate(4deg)}}@keyframes fnubb-gallop{0%,to{transform:translateY(0) rotate(-3deg) scaleY(1)}22%{transform:translateY(-28px) rotate(4deg) scaleY(1.06)}44%{transform:translateY(0) rotate(3deg) scaleY(.92)}66%{transform:translateY(-12px) rotate(-2deg) scaleY(1.03)}82%{transform:translateY(0) rotate(-3deg) scaleY(.97)}}@keyframes fnubb-slide-up{0%{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}:root{--color-piggelin: #FFE319;--color-slime: #72D21A;--color-forest: #1C3A09;--color-hot-pink: #FF2E7A;--color-electric: #00C9FF;--color-ink: #0D0D0D;--color-paper: #F5F0E4;--yellow-50: #FFFDE8;--yellow-100: #FFF7B3;--yellow-200: #FFE94D;--yellow-300: #FFE319;--yellow-400: #E6C700;--yellow-500: #B89D00;--green-50: #EDFFD4;--green-100: #CAFF90;--green-200: #9EEA44;--green-300: #72D21A;--green-400: #52A610;--green-500: #337208;--green-600: #1C3A09;--pink-50: #FFE5EF;--pink-100: #FFB2CE;--pink-200: #FF70A5;--pink-300: #FF2E7A;--pink-400: #D10060;--pink-500: #9B0047;--blue-50: #E0F9FF;--blue-100: #A4EEFF;--blue-200: #4ADCFF;--blue-300: #00C9FF;--blue-400: #009FCC;--blue-500: #006D99;--gray-50: #FAF7F2;--gray-100: #F0EBE1;--gray-200: #DDD7CC;--gray-300: #C0B9AD;--gray-400: #958F84;--gray-500: #6B6560;--gray-600: #42403C;--gray-700: #1E1D1A;--color-primary: var(--color-piggelin);--color-secondary: var(--color-slime);--color-accent: var(--color-hot-pink);--color-highlight: var(--color-electric);--color-bg: var(--color-paper);--color-bg-dark: var(--color-forest);--color-surface: #FFFFFF;--color-fg: var(--color-ink);--color-muted: var(--gray-500);--color-border: var(--color-ink);--color-success: var(--color-slime);--color-warning: var(--color-piggelin);--color-error: var(--color-hot-pink);--color-info: var(--color-electric)}:root{--font-display: "Bangers", "Impact", cursive;--font-body: "Space Grotesk", system-ui, sans-serif;--font-mono: "Space Mono", "Courier New", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 4rem;--text-hero: 6.5rem;--leading-none: 1;--leading-tight: 1.1;--leading-snug: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.625;--tracking-tighter: -.04em;--tracking-tight: -.02em;--tracking-normal: 0em;--tracking-wide: .04em;--tracking-bangers: .06em;--weight-light: 300;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700}:root{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px;--space-32: 128px;--gap-xs: var(--space-2);--gap-sm: var(--space-3);--gap-md: var(--space-4);--gap-lg: var(--space-6);--gap-xl: var(--space-8);--gap-2xl: var(--space-12);--pad-xs: var(--space-3);--pad-sm: var(--space-4);--pad-md: var(--space-6);--pad-lg: var(--space-8);--pad-xl: var(--space-12);--pad-2xl: var(--space-20);--section-padding-x: clamp(var(--space-6), 6vw, var(--space-32));--section-padding-y: clamp(var(--space-12), 8vw, var(--space-24));--max-content-width: 1200px}:root{--border-1: 1px;--border-2: 2px;--border-3: 3px;--border-4: 4px;--border-6: 6px;--border-8: 8px;--border-thin: var(--border-1);--border-normal: var(--border-2);--border-comic: var(--border-4);--border-chunky: var(--border-6);--radius-none: 0;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 14px;--radius-xl: 20px;--radius-2xl: 32px;--radius-full: 9999px;--shadow-xs: 2px 2px 0 var(--color-ink);--shadow-sm: 3px 3px 0 var(--color-ink);--shadow-md: 4px 4px 0 var(--color-ink);--shadow-lg: 6px 6px 0 var(--color-ink);--shadow-xl: 8px 8px 0 var(--color-ink);--shadow-2xl: 12px 12px 0 var(--color-ink);--shadow-comic: var(--shadow-md);--shadow-hover: var(--shadow-lg);--shadow-press: none;--shadow-yellow: 4px 4px 0 var(--yellow-400);--shadow-green: 4px 4px 0 var(--green-400);--shadow-pink: 4px 4px 0 var(--pink-400);--shadow-blue: 4px 4px 0 var(--blue-400);--shadow-forest: 4px 4px 0 var(--color-forest)}*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}[hidden]{display:none!important}body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-fg);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#app{display:flex;flex-direction:column;height:100dvh;padding:var(--space-3) var(--space-4);padding-bottom:max(var(--space-3),env(safe-area-inset-bottom));gap:var(--space-3)}#splash{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);background:var(--color-bg)}.splash-mascot{width:min(40vw,220px);animation:fnubb-gallop .9s var(--ease-bounce) infinite}.splash-text{font-family:var(--font-display);font-size:var(--text-3xl);letter-spacing:var(--tracking-bangers)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.logo{margin:0;font-family:var(--font-display);font-size:clamp(var(--text-3xl),5vw,var(--text-5xl));letter-spacing:var(--tracking-bangers);-webkit-text-stroke:1px var(--color-ink);color:var(--color-piggelin);text-shadow:3px 3px 0 var(--color-ink)}.topbar-actions{display:flex;align-items:center;gap:var(--space-3)}.btn{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:var(--tracking-bangers);color:var(--color-fg);background:var(--color-surface);border:var(--border-comic) solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-comic);padding:var(--space-2) var(--space-4);cursor:pointer;transition:transform var(--dur-instant) var(--ease-snap),box-shadow var(--dur-instant) var(--ease-snap)}.btn:active{transform:translate(4px,4px);box-shadow:var(--shadow-press)}.btn-icon{font-size:var(--text-2xl);line-height:1;padding:var(--space-2) var(--space-3)}.btn-motion{background:var(--color-highlight)}.btn-motion.denied{background:var(--color-error);color:var(--color-surface);font-size:var(--text-base)}.motion-badge{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:var(--tracking-bangers);background:var(--color-secondary);border:var(--border-comic) solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-comic);padding:var(--space-2) var(--space-4);animation:fnubb-pop var(--dur-slow) var(--ease-bounce)}.grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));grid-auto-rows:1fr;gap:var(--space-3);overflow-y:auto;padding:var(--space-1)}.pad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);min-height:96px;border:var(--border-comic) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-comic);cursor:pointer;animation:fnubb-pop var(--dur-slow) var(--ease-bounce) both;animation-delay:var(--pop-delay, 0ms);transition:transform var(--dur-instant) var(--ease-snap),box-shadow var(--dur-instant) var(--ease-snap)}.pad:active{transform:translate(4px,4px);box-shadow:var(--shadow-press)}.pad.playing{animation:fnubb-wobble var(--dur-slow) var(--ease-bounce) infinite}.pad-yellow{background:var(--color-piggelin)}.pad-green{background:var(--color-slime)}.pad-blue{background:var(--color-electric)}.pad-pink{background:var(--color-hot-pink)}.pad-emoji{font-size:clamp(var(--text-4xl),6vh,var(--text-6xl));line-height:1}.pad-label{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:var(--tracking-bangers);color:var(--color-ink)}.stop-btn{font-family:var(--font-display);font-size:clamp(var(--text-2xl),4vh,var(--text-4xl));letter-spacing:var(--tracking-bangers);color:var(--color-surface);-webkit-text-stroke:1px var(--color-ink);background:var(--color-accent);border:var(--border-chunky) solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-3);cursor:pointer;transition:transform var(--dur-instant) var(--ease-snap),box-shadow var(--dur-instant) var(--ease-snap)}.stop-btn:active{transform:translate(6px,6px);box-shadow:var(--shadow-press)}.overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--color-ink) 55%,transparent);display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:10}.overlay-panel{background:var(--color-bg);border:var(--border-comic) solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:var(--space-6);width:min(640px,100%);max-height:85dvh;overflow-y:auto;animation:fnubb-pop var(--dur-normal) var(--ease-bounce)}.overlay-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.overlay-title{margin:0;font-family:var(--font-display);font-size:var(--text-3xl);letter-spacing:var(--tracking-bangers)}.overlay-hint{font-size:var(--text-base);color:var(--color-muted);margin:var(--space-2) 0 var(--space-4)}.gesture-cards{display:flex;flex-direction:column;gap:var(--space-4)}.credits{font-size:var(--text-xs);color:var(--color-muted);margin:var(--space-4) 0 0}.credits a{color:var(--color-muted)}.gesture-card{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);background:var(--color-surface);border:var(--border-comic) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-comic);padding:var(--space-4)}.gesture-info{display:flex;align-items:center;gap:var(--space-3)}.gesture-emoji{font-size:var(--text-4xl)}.gesture-name{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:var(--tracking-bangers)}.gesture-hint{font-size:var(--text-sm);color:var(--color-muted)}.gesture-actions{display:flex;align-items:center;gap:var(--space-2)}.btn-choose{background:var(--color-primary)}.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-2);margin-top:var(--space-4)}.chip{font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-base);text-align:left;background:var(--color-surface);border:var(--border-normal) solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);padding:var(--space-2) var(--space-3);cursor:pointer}.chip:active{transform:translate(2px,2px);box-shadow:var(--shadow-press)}.chip-active{background:var(--color-secondary)}