@import "https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;700&display=swap";#beep{--blue:#000f89;--green:#c7ff3d;--paper:#f5f5f5}#beep *{box-sizing:border-box}#beep{background:var(--paper);color:var(--blue);margin:0;font-family:Georgia,serif}#beep main{text-align:center;max-width:980px;margin:auto;padding:24px 28px 20px}#beep .home{width:44px;color:var(--blue);text-align:left;font-size:42px;line-height:1;text-decoration:none;display:block}#beep header{margin:14px 0 8px}#beep .eyebrow{letter-spacing:.12em;font:700 .875rem DM Sans,sans-serif}#beep h1{margin:14px 0;font:clamp(2.4rem,7vw,4.8rem)/1.04 Archivo Black,sans-serif}#beep header>p:last-child{margin:14px 0;font-size:1.125rem}#beep .recorder{max-width:500px;margin:auto}#beep .device-art{aspect-ratio:1;width:100%;margin:0 auto;position:relative}#beep .device-art>img{object-fit:contain;width:100%;height:100%}#beep .screen{background:var(--green);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:31%;height:10.5%;display:flex;position:absolute;top:41.2%;left:14.5%;overflow:hidden}#beep .counter{font-variant-numeric:tabular-nums;font:700 clamp(1rem,4vw,1.7rem)/1 DM Sans,monospace}#beep .screen-caption{letter-spacing:.03em;margin-top:4px;font:700 clamp(.5rem,1.5vw,.7rem) DM Sans}#beep .record-key{aspect-ratio:1;background:var(--green);cursor:pointer;border:0;border-radius:50%;place-items:center;width:12.3%;transition:transform .15s;display:grid;position:absolute;top:54.7%;left:23.5%;box-shadow:0 4px #00075b}#beep .record-key:hover{transform:translateY(-2px)}#beep .record-key:active{transform:translateY(3px);box-shadow:0 1px #00075b}#beep .dot,#beep .square{aspect-ratio:1;background:var(--blue);border-radius:50%;width:36%}#beep .square{border-radius:3px}#beep .key-label{width:22%;color:var(--paper);font:700 .875rem/1.1 DM Sans;position:absolute;top:67.2%;left:19%}#beep .status{min-height:24px;margin:0 0 18px;font:700 1rem DM Sans}#beep button{border:1.5px solid var(--blue);background:var(--paper);color:var(--blue);cursor:pointer;border-radius:999px;padding:12px 19px;font:700 1rem DM Sans,sans-serif}#beep button:hover{background:var(--green)}#beep button:disabled{cursor:default;opacity:.5}#beep .actions{flex-wrap:wrap;justify-content:center;gap:9px;display:flex}#beep .send{background:var(--green)}#beep .download{color:var(--blue);text-underline-offset:4px;margin-top:16px;font:.9rem DM Sans;display:inline-block}#beep .privacy{max-width:420px;margin:22px auto 8px;font:.875rem/1.55 DM Sans}#beep .setup-note{background:#e9edff;border-radius:12px;max-width:440px;margin:12px auto;padding:12px;font:.875rem/1.5 DM Sans}#beep .error{border:1.5px solid var(--blue);border-radius:12px;padding:12px;font:1rem/1.5 DM Sans}#beep footer{margin-top:28px;font:.875rem DM Sans}:is(#beep a:focus-visible,#beep button:focus-visible){outline:3px solid var(--blue);outline-offset:5px}@media (max-width:480px){#beep main{padding:20px 16px}#beep .home{font-size:34px}#beep header{margin-top:20px}#beep .key-label{font-size:.875rem}#beep .status{font-size:.95rem}#beep .actions{gap:8px}#beep .actions button{padding:11px 13px;font-size:.9rem}}@media (prefers-reduced-motion:reduce){#beep *{transition:none!important}}#beep .device-art{transform-origin:30% 70%}#beep .device-art.clicked{animation:.5s ease-out handset-tilt}#beep .device-art.clicked-again{animation:.5s ease-out handset-tilt-again}@keyframes handset-tilt{0%,to{transform:rotate(0)}40%{transform:rotate(-1.5deg)}75%{transform:rotate(.6deg)}}@keyframes handset-tilt-again{0%,to{transform:rotate(0)}40%{transform:rotate(-1.5deg)}75%{transform:rotate(.6deg)}}@media (prefers-reduced-motion:reduce){#beep .device-art.clicked,#beep .device-art.clicked-again{animation:none}}#beep .device-art{aspect-ratio:1.5;transform-origin:50% 75%}#beep .screen{background:var(--green);border:0;border-radius:0;width:42%;height:24.4%;top:19.7%;left:45.3%}#beep .counter{letter-spacing:.03em;font-family:monospace;font-size:clamp(1.5rem,5vw,3rem)}#beep .screen-caption{font-size:clamp(.7rem,1.8vw,1rem)}#beep .screen canvas{width:92%;height:42%}#beep .machine-key{width:15.5%;height:22.8%;box-shadow:none;background:var(--paper);color:var(--blue);border:0;border-radius:0;flex-direction:column;justify-content:center;align-items:center;gap:10%;padding:0;font:700 clamp(.75rem,2.2vw,1.1rem)/1 DM Sans;transition:transform .12s;display:flex;position:absolute;top:54.8%}#beep .record-key{aspect-ratio:auto;background:var(--green);left:15.2%}#beep .machine-key .dot,#beep .machine-key .square{flex-shrink:0;width:23%}#beep .play-symbol{border-top:clamp(7px,2vw,16px) solid #0000;border-bottom:clamp(7px,2vw,16px) solid #0000;border-left:clamp(12px,3vw,25px) solid var(--blue);width:0;height:0}#beep .pause-symbol{border-left:5px solid var(--blue);border-right:5px solid var(--blue);width:23%;height:23%}#beep .machine-key:hover:not(:disabled){background:var(--green);transform:translateY(-2px)}#beep .machine-key:active:not(:disabled){box-shadow:none;transform:translate(2px,2px)}#beep .machine-key:disabled{opacity:1;background:var(--paper);color:#777ca7}#beep .actions button{border:2px solid var(--blue);box-shadow:3px 3px 0 var(--blue)}@media (prefers-reduced-motion:reduce){#beep .machine-key:hover:not(:disabled),#beep .machine-key:active:not(:disabled){transform:none}}#beep .recorder{max-width:560px}#beep .device-art{aspect-ratio:1315/1196}#beep .screen{border-radius:clamp(8px,2vw,20px);width:42.28%;height:18.98%;top:22.66%;left:43.65%}#beep .counter{font-size:clamp(1.6rem,5vw,3rem)}#beep .machine-key{aspect-ratio:1;border-radius:50%;justify-content:center;align-items:center;width:19.7%;height:auto;padding:0;display:flex;top:50.6%}#beep .record-key{left:12.85%}#beep .play-key{left:40.1%}#beep .stop-key{left:66.8%}#beep .machine-key .dot,#beep .machine-key .square{aspect-ratio:1;width:32%;height:auto}#beep .control-label{text-align:center;width:124%;color:var(--paper);white-space:nowrap;font:700 clamp(.75rem,2.3vw,1rem)/1.15 DM Sans;position:absolute;top:calc(100% + 9px);left:-12%}#beep .machine-key:disabled{background:var(--paper);color:var(--blue)}#beep .machine-key:disabled .square{background:var(--blue)}#beep .machine-key:disabled .play-symbol{border-left-color:var(--blue)}#beep .play-symbol{border-top-width:clamp(9px,2.6vw,20px);border-bottom-width:clamp(9px,2.6vw,20px);border-left-width:clamp(15px,4vw,33px)}#beep .actions button,#beep button,#beep .setup-note,#beep .error{border-radius:14px}#beep .actions button{box-shadow:2px 3px 0 var(--blue)}#beep .open-tab{color:var(--blue);text-underline-offset:4px;margin:14px 0;font:700 1rem/1.4 DM Sans;display:inline-block}#beep .status{margin-top:0}@media (max-width:480px){#beep .control-label{top:calc(100% + 7px)}#beep .screen-caption{font-size:.7rem}#beep .screen canvas{height:30%}#beep .counter{font-size:1.6rem}}#beep .status:empty{display:none}#beep .machine-caption{margin:0 auto 20px;font:1.125rem/1.5 Georgia,serif}#beep .playback{width:min(100%,420px);margin:0 auto 18px;display:block}#beep .playback[hidden]{display:none}#beep{min-height:100vh}#beep .machine-key{aspect-ratio:1;height:21.661%}#beep .home{font-family:Georgia,serif}