@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=Space+Grotesk:wght@600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap";:root{color:#f8f7f3;font-synthesis:none;text-rendering:optimizelegibility;background:#101012;font-family:DM Sans,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:#101012;min-height:100dvh}button{font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline-offset:4px;outline:3px solid #e5ff3f}.game-shell{background:radial-gradient(circle at 20% 15%,#29326455 0,#0000 27%),radial-gradient(circle at 85% 80%,#5120404a 0,#0000 30%),#101012;place-items:center;min-height:100dvh;padding:18px;display:grid}.game{background:linear-gradient(155deg,#302f34 0%,#222125 52%,#19191c 100%);border:1px solid #ffffff20;border-radius:38px;flex-direction:column;width:min(100%,430px);min-height:min(820px,100dvh - 36px);padding:22px;display:flex;box-shadow:0 42px 100px #000a,inset 0 1px #ffffff16}.game-header{justify-content:space-between;align-items:center;display:flex}.brand{align-items:center;gap:9px;display:flex}.brand>span{color:#171719;background:#e5ff3f;border-radius:50%;place-items:center;width:34px;height:34px;font:700 16px Space Grotesk;display:grid;transform:rotate(-10deg)}.brand b{letter-spacing:-.2px;font:700 10px/9px Space Grotesk}.reset{color:#aaa7af;cursor:pointer;background:#ffffff08;border:1px solid #ffffff16;border-radius:50%;place-items:center;width:36px;height:36px;transition:color .2s,transform .2s;display:grid}.reset:hover{color:#fff;transform:rotate(-20deg)}.instructions{min-height:125px;padding:27px 4px 12px}.instructions>span{color:#8d8994;letter-spacing:1.7px;font:700 10px Space Grotesk}.instructions h1{letter-spacing:-.8px;margin:8px 0 7px;font:700 23px/1.08 Space Grotesk}.instructions p{color:#aaa6b0;margin:0;font-size:12px}.waveform{justify-content:center;align-items:center;gap:5px;height:50px;margin:0 0 13px;padding:0 7px;display:flex;overflow:hidden}.waveform i{width:4px;height:var(--height);background:#66626d;border-radius:3px;min-height:5px;max-height:100%;transition:height .2s,background .2s}.waveform.is-recording i,.waveform.is-playing i{animation:.65s ease-in-out infinite alternate pulse;animation-delay:var(--delay);background:#fff}@keyframes pulse{to{height:92%}}.error{color:#ffd6d3;background:#ff3b3015;border:1px solid #ff3b303a;border-radius:10px;margin:-2px 3px 12px;padding:10px 12px;font-size:12px}.controls{gap:12px;margin-top:auto;display:grid}.control{color:#fff;text-align:left;cursor:pointer;border:0;border-radius:21px;grid-template-columns:68px 1fr;align-items:center;width:100%;height:145px;padding:17px 20px;transition:transform .12s,filter .2s,opacity .2s;display:grid;position:relative;overflow:hidden;box-shadow:0 14px 28px #0004,inset 0 1px #ffffff35,inset 0 -2px #0002}.control:after{content:"";background:linear-gradient(115deg,#0000 20%,#ffffff1b 46%,#0000 65%);transition:transform .55s;position:absolute;inset:0;transform:translate(-120%)}.control:hover:not(:disabled):after{transform:translate(120%)}.control:active:not(:disabled),.control.active{filter:brightness(1.12);transform:scale(.976)}.control:disabled{cursor:not-allowed;filter:saturate(.22);opacity:.25}.control.record{background:linear-gradient(135deg,#ff443a,#e3131c)}.control.record.active{animation:1s ease-in-out infinite alternate glow}.control.recorded{background:linear-gradient(135deg,#27cf60,#079c42)}.control.reverse{background:linear-gradient(135deg,#347dff,#1250d9)}@keyframes glow{to{box-shadow:0 0 0 6px #ff3b3025,0 18px 34px #0005}}.icon{color:#fff;background:#0000001c;border:1px solid #ffffff1b;border-radius:17px;place-items:center;width:55px;height:55px;display:grid}.control b{letter-spacing:-.4px;font:700 18px Space Grotesk;display:block}.control small{color:#ffffffbd;margin-top:6px;font-size:11px;font-weight:600;display:block}.game footer{color:#75717a;justify-content:center;align-items:center;gap:7px;padding:14px 0 1px;font-size:10px;display:flex}.privacy-dot{background:#2ad361;border-radius:50%;width:5px;height:5px}@media (width<=520px){.game-shell{background:#19191c;padding:0;display:block}.game{width:100%;min-height:100dvh;padding:max(18px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));box-shadow:none;border:0;border-radius:0}.instructions{min-height:118px;padding-top:23px}.instructions h1{font-size:21px}.waveform{gap:4px;margin-bottom:10px}.waveform i{width:3px}.controls{gap:11px}.control{border-radius:19px;grid-template-columns:63px 1fr;height:clamp(118px,18.2dvh,148px);padding:14px 17px}.icon{width:51px;height:51px}.control b{font-size:17px}}@media (height<=700px){.game{border-radius:0;min-height:100dvh}.game-shell{padding:0}.instructions{min-height:98px;padding-top:17px}.waveform{height:38px;margin-bottom:8px}.control{height:111px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.alt-shell{--ink:#141412;--acid:#e5ff3f;--paper:#fffdf5;min-height:100dvh;color:var(--ink);background:radial-gradient(#14141214 1.4px, transparent 1.5px) 0 0 / 22px 22px, var(--acid);place-items:center;padding:18px;font-family:DM Sans,sans-serif;display:grid}.alt-game{flex-direction:column;gap:14px;width:min(100%,460px);min-height:min(860px,100dvh - 36px);display:flex}.alt-header{justify-content:space-between;align-items:center;display:flex}.alt-sticker{color:var(--acid);background:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:14px 18px 12px;display:inline-block;transform:rotate(-2.5deg);box-shadow:7px 7px #14141245}.alt-sticker b{letter-spacing:1px;font:400 24px/.95 Archivo Black,Space Grotesk,sans-serif;display:block}.alt-sticker span{color:var(--ink);background:var(--acid);letter-spacing:2.5px;border-radius:6px;margin-top:7px;padding:3px 8px;font:700 9px Space Grotesk;display:inline-block}.alt-reset{color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;letter-spacing:1.6px;border-radius:12px;align-items:center;gap:8px;padding:12px 15px;font:700 10px Space Grotesk;transition:transform .15s,box-shadow .15s;display:inline-flex}.alt-reset svg{transition:transform .3s}.alt-reset:hover{box-shadow:5px 5px 0 var(--ink);transform:translate(-1px,-1px)rotate(-1.2deg)}.alt-reset:hover svg{transform:rotate(-75deg)}.alt-reset:active{box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}.alt-ticker{color:var(--acid);background:var(--ink);border:3px solid var(--ink);border-radius:10px;overflow:hidden;transform:rotate(.6deg)}.alt-ticker-track{width:max-content;animation:18s linear infinite alt-scroll;display:flex}.alt-ticker-track span{letter-spacing:2px;white-space:nowrap;padding:7px 0;font:700 11px Space Grotesk}@keyframes alt-scroll{to{transform:translate(-50%)}}.alt-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.alt-steps li{color:#14141299;background:var(--paper);border:3px solid var(--ink);letter-spacing:1.2px;border-radius:10px;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:9px 4px 7px;font:700 9px Space Grotesk;transition:transform .2s,background .2s,color .2s;display:flex}.alt-steps li i{width:22px;height:22px;color:var(--paper);background:#14141299;border-radius:50%;place-items:center;font:400 11px Archivo Black,sans-serif;display:grid}.alt-steps li.active{color:var(--ink);background:var(--acid);box-shadow:4px 4px 0 var(--ink);transform:rotate(-1.5deg)translateY(-3px)}.alt-steps li.active i{background:var(--ink)}.alt-steps li.done{color:var(--ink);background:#c9f7a1}.alt-steps li.done i{background:var(--ink)}.alt-card{background:var(--paper);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:18px;flex-direction:column;flex:1;gap:14px;padding:18px;display:flex}.alt-instructions{min-height:108px}.alt-instructions>span{color:var(--paper);background:var(--ink);letter-spacing:2px;border-radius:6px;padding:4px 9px;font:700 9px Space Grotesk;display:inline-block}.alt-instructions h1{letter-spacing:-.5px;text-transform:uppercase;margin:10px 0 7px;font:400 25px/1.02 Archivo Black,Space Grotesk,sans-serif}.alt-instructions p{color:#141412b3;margin:0;font-size:12.5px;font-weight:600}.alt-waveform{background:var(--ink);border:3px solid var(--ink);border-radius:12px;flex:1;justify-content:center;align-items:center;gap:4px;min-height:64px;padding:10px;display:flex;overflow:hidden}.alt-waveform i{background:var(--acid);width:4px;transform:scaleY(var(--scale,.2));border-radius:3px;align-self:stretch;transition:transform .2s,background .2s}.alt-waveform.is-recording i{animation:.65s ease-in-out infinite alternate alt-pulse;animation-delay:var(--delay);background:#ff5148}.alt-waveform.is-playing i{animation:.65s ease-in-out infinite alternate alt-pulse;animation-delay:var(--delay);background:#4da3ff}@keyframes alt-pulse{to{transform:scaleY(.92)}}.alt-error{color:#a01208;background:#ffe1de;border:3px solid #ff5148;border-radius:10px;padding:10px 12px;font-size:12px;font-weight:700}.alt-controls{gap:12px;margin-top:auto;display:grid}.alt-control{color:#fff;text-align:left;border:3px solid var(--ink);width:100%;box-shadow:6px 6px 0 var(--ink);cursor:pointer;border-radius:16px;grid-template-columns:60px 1fr;align-items:center;padding:15px 18px;transition:transform .12s,box-shadow .12s,filter .2s,opacity .2s;display:grid;position:relative}.alt-control:hover:not(:disabled){box-shadow:8px 8px 0 var(--ink);transform:translate(-1.5px,-1.5px)rotate(-.4deg)}.alt-control:active:not(:disabled),.alt-control.active{box-shadow:2px 2px 0 var(--ink);filter:brightness(1.08);transform:translate(4px,4px)}.alt-control.record{background:linear-gradient(135deg,#ff5148,#e3131c)}.alt-control.record.active{animation:1s steps(2,start) infinite alt-blink}.alt-control.recorded{background:linear-gradient(135deg,#2bd464,#079c42)}.alt-control.reverse{background:linear-gradient(135deg,#4da3ff,#1250d9)}@keyframes alt-blink{50%{filter:brightness(1.25)}}.alt-control:disabled{cursor:not-allowed;color:#14141266;box-shadow:none;filter:none;background:#e9e4d4;animation:none;transform:none}.alt-control{animation:.32s cubic-bezier(.25,.9,.3,1.15) both alt-in}.alt-control:nth-child(2){animation-delay:50ms}.alt-control:nth-child(3){animation-delay:.1s}@keyframes alt-in{0%{opacity:0;transform:translateY(8px)scale(.965)}}.alt-control.next{animation:.32s cubic-bezier(.25,.9,.3,1.15) both alt-in,1.5s ease-in-out .45s infinite alternate alt-next}.alt-control.next:nth-child(2){animation-delay:50ms,.45s}.alt-control.next:nth-child(3){animation-delay:.1s,.45s}@keyframes alt-next{0%{box-shadow:6px 6px 0 var(--ink), 0 0 0 3px #1414121f}to{box-shadow:6px 6px 0 var(--ink), 0 0 0 8px #14141230}}.alt-icon{width:52px;height:52px;color:inherit;background:#00000024;border:3px solid #ffffff59;border-radius:13px;place-items:center;display:grid}.alt-control:disabled .alt-icon{background:#14141210;border-color:#14141226}.alt-control b{letter-spacing:.5px;font:400 19px Archivo Black,Space Grotesk,sans-serif;display:block}.alt-control small{opacity:.85;margin-top:4px;font-size:11px;font-weight:700;display:block}.alt-footer{color:#141412b3;letter-spacing:.6px;text-transform:uppercase;justify-content:center;align-items:center;gap:7px;padding:2px 0;font-size:10.5px;font-weight:700;display:flex}.alt-privacy-dot{border:2px solid var(--ink);background:#0f9d47;border-radius:50%;width:7px;height:7px}@media (width<=520px){.alt-shell{padding:12px 10px;display:block}.alt-game{gap:10px;width:100%;min-height:calc(100dvh - 24px)}.alt-sticker{padding:10px 14px 9px}.alt-sticker b{font-size:20px}.alt-sticker span{margin-top:5px;padding:2px 7px;font-size:8px}.alt-reset{gap:6px;padding:10px 12px;font-size:9px}.alt-ticker-track span{padding:5px 0;font-size:10px}.alt-steps{gap:6px}.alt-steps li{gap:3px;padding:7px 4px 6px;font-size:8px}.alt-steps li i{width:19px;height:19px;font-size:10px}.alt-card{gap:10px;padding:14px}.alt-instructions{min-height:92px}.alt-instructions h1{margin:8px 0 6px;font-size:21px}.alt-instructions p{font-size:12px}.alt-waveform{gap:3px;min-height:48px;padding:8px}.alt-waveform i{width:3px}.alt-controls{gap:10px}.alt-control{grid-template-columns:52px 1fr;padding:12px 14px}.alt-icon{width:44px;height:44px}.alt-control b{font-size:16px}.alt-control small{margin-top:3px;font-size:10.5px}.alt-footer{font-size:10px}}@media (height<=700px){.alt-shell{padding:8px 10px}.alt-game{gap:8px;min-height:calc(100dvh - 16px)}.alt-sticker{padding:8px 12px 7px}.alt-sticker b{font-size:18px}.alt-sticker span{margin-top:4px;padding:2px 6px}.alt-ticker-track span{padding:4px 0}.alt-steps li{padding:5px 4px 4px}.alt-steps li i{width:17px;height:17px;font-size:9px}.alt-card{gap:8px;padding:12px}.alt-instructions{min-height:78px}.alt-instructions h1{margin:6px 0 5px;font-size:19px}.alt-waveform{min-height:36px;padding:6px}.alt-control{grid-template-columns:46px 1fr;padding:10px 14px}.alt-icon{width:38px;height:38px}.alt-control b{font-size:15px}.alt-control small{font-size:10px}}@media (width>=900px){.alt-shell{padding:28px}.alt-game{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"header header""ticker ticker""steps steps""card controls""footer footer";gap:18px;width:min(1160px,100%);min-height:min(880px,100dvh - 56px);display:grid}.alt-header{grid-area:header}.alt-ticker{grid-area:ticker}.alt-steps{grid-area:steps}.alt-card{grid-area:card}.alt-controls{grid-area:controls;grid-auto-rows:1fr;margin-top:0}.alt-footer{grid-area:footer}.alt-instructions{min-height:0}.alt-instructions h1{font-size:clamp(26px,2.4vw,34px)}.alt-instructions p{font-size:13.5px}.alt-waveform{min-height:120px}.alt-waveform i{width:5px}.alt-control{grid-template-columns:64px 1fr;padding:18px 20px}.alt-icon{width:56px;height:56px}.alt-control b{font-size:21px}.alt-control small{font-size:12px}}