*{box-sizing:border-box} :root{font-family:Arial,sans-serif;color:#292522;background:#EEE5D5} body{margin:0} button,a{-webkit-tap-highlight-color:transparent} button{font:inherit;color:inherit;cursor:pointer} button:focus-visible,a:focus-visible{outline:4px solid #292522;outline-offset:5px} main{max-width:1400px;margin:auto;padding:30px 5vw 20px} header{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px} .wordmark{color:inherit;text-decoration:none;font-size:42px;font-weight:900;letter-spacing:-3px;transform:rotate(-4deg)} .wordmark span{font-size:11px;letter-spacing:2px;display:block;margin-top:3px} header p{font-size:13px;line-height:1.4;text-align:right} .theatre{background:#F4D35E;border:3px solid #292522;box-shadow:7px 8px 0 #292522;overflow:hidden} .announcement{padding:28px 4% 0;position:relative;z-index:2;pointer-events:none}.announcement>span,.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px} h1{font-size:clamp(26px,4.7vw,65px);line-height:1;margin:10px 0 0;letter-spacing:-2px} .stage{position:relative;aspect-ratio:1000/450;isolation:isolate}.scenery{position:absolute;width:100%;height:100%;inset:0}.pika{position:absolute;width:24%;height:auto;left:45%;top:41%;z-index:3;transform-origin:50% 90%}.mouth-oat{opacity:0}#finger{position:absolute;left:9%;top:17%;width:43%;padding:0;border:0;background:none;text-align:left;touch-action:none;z-index:4;transform:translate(var(--drag-x,0px),var(--drag-y,0px));user-select:none}#finger svg{width:100%;display:block}#finger>span{display:block;margin:8px 0 0 9%;font-size:10px;letter-spacing:1px;font-weight:800}#finger b{display:block;font-weight:400;letter-spacing:0;margin-top:4px}.oat{position:absolute;left:65%;top:74%;width:3.4%;aspect-ratio:1.7;border:3px solid #292522;border-radius:75% 12% 75% 12%;background:#EEE5D5;transform:rotate(-28deg);z-index:2;display:grid;place-items:center;font-size:18px}.single-label{position:absolute;left:69%;top:78%;font-size:clamp(7px,1.1vw,13px);font-weight:800;transform:rotate(-5deg)}.shove{position:absolute;left:35%;top:41%;font-size:clamp(18px,4vw,55px);font-weight:900;transform:rotate(-12deg);opacity:0;z-index:5}.controls{border-top:3px solid #292522;padding:18px 4%;display:flex;align-items:center;gap:12px;background:#EEE5D5;min-height:88px}.controls p{flex:1;font-size:14px;line-height:1.45;margin:0;max-width:650px}.controls button{border:2px solid #292522;background:#292522;color:#EEE5D5;padding:12px 16px;font-size:12px;font-weight:700;white-space:nowrap}.controls #stop{background:transparent;color:#292522}[hidden]{display:none!important}.remix{display:grid;grid-template-columns:1fr 1.25fr;gap:8%;padding:65px 0 45px}h2{font-size:32px;letter-spacing:-1px;line-height:1.05;margin:14px 0}.remix p{font-size:14px;line-height:1.5;max-width:300px}.remix-options{display:flex;flex-direction:column;justify-content:center}.remix-options button{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:18px 12px;border:0;border-bottom:2px solid #292522;background:none}.remix-options button[aria-pressed=true]{background:#F4D35E}.remix-options strong{font-size:17px}.remix-options span{font-size:12px}footer{border-top:2px solid #292522;display:flex;justify-content:space-between;gap:20px;padding-top:20px;font-size:10px}footer strong{letter-spacing:1px}.playing #finger{animation:finger 4s steps(1,end) both}.playing .pika{animation:pika 4s steps(1,end) both}.playing .paw{animation:paw 4s steps(1,end) both;transform-origin:50px 150px}.playing .oat{animation:oat 4s steps(1,end) both}.playing .mouth-oat{animation:mouth 4s steps(1,end) both}.playing .shove{animation:pap 4s steps(1,end) both}.playing #finger>span,.finished #finger>span{visibility:hidden}.finished #finger{transform:translate(-18%,27%) rotate(-12deg)}.finished .pika{transform:translateX(26%) rotate(3deg)}.finished .oat{opacity:0}.finished .mouth-oat{opacity:1}@keyframes finger{0%{transform:translate(0,0)}20%{transform:translate(19%,5%) rotate(-4deg)}35%,100%{transform:translate(-18%,27%) rotate(-12deg)}}@keyframes pika{0%{transform:translateX(0)}25%{transform:translate(-12%,-3%) rotate(-7deg)}35%{transform:translate(-17%,-3%) rotate(-9deg)}55%{transform:translateX(26%) rotate(3deg)}80%,100%{transform:translateX(26%) rotate(3deg) scaleY(.97)}}@keyframes paw{0%{transform:rotate(0)}25%,35%{transform:translateX(-15px) rotate(20deg)}55%,100%{transform:rotate(0)}}@keyframes oat{0%,54%{opacity:1}55%,100%{opacity:0}}@keyframes mouth{0%,54%{opacity:0}55%,100%{opacity:1}}@keyframes pap{0%{opacity:0}35%{opacity:1}55%,100%{opacity:0}}@media(max-width:650px){main{padding:20px 5vw}header{margin-bottom:24px}.announcement{padding-top:22px}h1{letter-spacing:-1px}.stage{margin-top:20px}.controls{flex-wrap:wrap;padding:15px}.controls p{flex-basis:100%;font-size:12px}.controls button{padding:10px}.remix{grid-template-columns:1fr;gap:12px;padding-top:45px}.remix h2 br{display:none}.remix p{max-width:none}footer{flex-wrap:wrap;line-height:1.5}#finger>span{font-size:7px;margin-top:0;letter-spacing:0}.oat{border-width:2px;font-size:9px}}@media(prefers-reduced-motion:reduce){.playing #finger,.playing .pika,.playing .paw,.playing .oat,.playing .mouth-oat,.playing .shove{animation:none}.playing #finger{transform:translate(-18%,27%) rotate(-12deg)}.playing .pika{transform:translateX(26%) rotate(3deg)}.playing .oat{opacity:0}.playing .mouth-oat{opacity:1}}
@font-face{font-family:Bricolage;src:url('assets/nomph-type.ttf') format('truetype');font-weight:200 800;font-display:swap}:root{background:#f23c1c;color:#231e1b;font-family:Bricolage,Arial,sans-serif}main{max-width:1500px;padding:25px 5vw 35px}header{margin-bottom:30px}.wordmark{font-size:48px;letter-spacing:-2px}.wordmark span{font-size:10px}.theatre{background:transparent;border:0;box-shadow:none;overflow:hidden}.announcement{padding-top:20px}.announcement>span{font-size:10px}h1{font-size:clamp(32px,5.5vw,80px);font-weight:800;letter-spacing:-.04em;line-height:1.05}.pika{width:31%;left:45%;top:21%;filter:drop-shadow(0 8px 0 #31180d15)}.controls{border:0;background:#f9d9a9;padding:22px 28px;border-radius:3px 25px 4px 23px;transform:rotate(-.5deg)}.controls button{background:#231e1b;color:#ffeac7;border:0;border-radius:5px 15px 4px 12px}.controls p{font-size:15px}.oat{background:#f4d570}.remix{padding-top:70px}.remix-options button{border-bottom:2px solid #231e1b66}.remix-options button[aria-pressed=true]{background:#f9d9a9}.remix h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.04em;line-height:1.1}.animal-logic{max-width:850px;margin:20px auto 80px;padding:55px 0}.small-label{font-size:10px;letter-spacing:.16em;font-weight:700}.animal-logic h2{font-size:clamp(45px,7vw,95px);font-weight:800;letter-spacing:-.055em;line-height:1.02;margin:25px 0 35px}.animal-logic>p:not(.small-label){font-size:19px;line-height:1.6;max-width:620px}.borrow{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:30px}.borrow button{background:#231e1b;color:#fff1d8;border:0;font:inherit;font-size:14px;padding:15px 20px;border-radius:4px 18px 5px 16px;cursor:pointer}.borrow a{font-size:13px;color:inherit}.animal-logic #download-status{font-size:12px;min-height:25px}.campaign{margin:0 0 65px;transform:rotate(-1deg)}.campaign img{display:block;width:100%;border-radius:4px}.campaign figcaption{text-align:right;font-size:11px;margin-top:13px}.campaign a{color:inherit}.single-label{left:72%;font-size:clamp(7px,1vw,13px)}footer{font-size:10px;border-color:#231e1b66}@media(max-width:650px){main{padding-left:6vw;padding-right:6vw}.controls{padding:18px}.controls p{font-size:13px}.stage{aspect-ratio:1000/530}.pika{top:22%;width:35%;left:43%}.single-label{left:72%;max-width:70px;white-space:normal;line-height:1.2;top:74%}.animal-logic{margin-bottom:25px;padding:35px 5px}.animal-logic>p:not(.small-label){font-size:16px}.animal-logic h2{font-size:48px}.campaign{margin-bottom:40px}header>p{max-width:150px;font-size:11px}.remix{padding-top:45px}.remix h2{font-size:34px}.campaign figcaption{text-align:center}.controls button{font-size:11px}}