:root{--color-ink: #171717;--color-red: #f22c2c;--color-soft-gray: #e3e3e3;--color-soft-red: #fde4e4;background:#fff;font-family:DiatypeRounded,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}@font-face{font-family:DiatypeRounded;src:url(/ABCDiatypeRoundedEdu-Medium.woff)}@property --recording-progress{syntax: "<percentage>"; inherits: true; initial-value: 100%;}@keyframes record-circle-to-stop-square{0%{width:88px;height:88px;border-radius:50%}to{width:32px;height:32px;border-radius:0}}@keyframes stop-square-to-upload-circle{0%{width:32px;height:32px;border-radius:0;background:var(--color-red);opacity:1}72%{width:90px;height:90px;border-radius:50%;background:var(--color-soft-gray);opacity:1}to{width:90px;height:90px;border-radius:50%;background:var(--color-soft-gray);opacity:1}}*{box-sizing:border-box}body{min-width:320px;height:100dvh;overflow:hidden;margin:0;font-weight:400;line-height:1.2em}html{scroll-behavior:smooth}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.recorder-page{position:relative;display:grid;min-height:100dvh;place-items:center}.recorder-content{display:flex;width:min(100%,680px);padding:0 24px;flex-direction:column;align-items:center}.controls{display:flex;flex-direction:column;align-items:center;gap:88px}.record-button{position:relative;display:grid;width:88px;height:88px;place-items:center;border:0;background:transparent;cursor:pointer;transition:transform .12s ease}.record-button span{position:relative;width:88px;height:88px;border-radius:50%;background:var(--color-red);overflow:hidden;transition:width .12s ease,height .12s ease,border-radius .12s ease,background .12s ease}.record-button span:before{position:absolute;top:0;left:0;display:block;width:100%;height:100%;content:"";transition:background 90ms linear}.record-button span:after{position:absolute;top:50%;left:50%;width:17px;height:30px;border-right:2px solid #ffffff;border-bottom:2px solid #ffffff;content:"";opacity:0;background:var(--color-ink);transform:translate(-50%,-58%) rotate(45deg) scale(.75);transition:opacity 90ms ease 80ms,transform .12s ease 80ms}.record-button span b{position:absolute;top:50%;left:50%;z-index:1;color:#fff;font-size:1.65rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;transform:translate(-50%,-50%)}.record-button:hover:not(:disabled){transform:scale(1.04)}.record-button.recording span{width:88px;height:88px;justify-self:center;align-self:center;border-radius:50%;background:conic-gradient(from 0deg,var(--color-red) var(--recording-progress),transparent var(--recording-progress))!important;transition:width .12s ease,height .12s ease,border-radius .12s ease,--recording-progress 1s linear}.record-button.recording span:before{top:4px;right:4px;bottom:4px;left:4px;width:auto;height:auto;border-radius:50%;background:#fff;transition:none}.record-button.recording span:after{top:50%;left:50%;width:32px;height:32px;border:0;border-radius:0;background:var(--color-red);opacity:1;transform:translate(-50%,-50%);animation:record-circle-to-stop-square .15s ease-out both;transition:opacity 90ms ease,transform .12s ease}.record-button.uploading span{width:88px;height:88px;border:0;border-radius:50%;background:var(--color-soft-gray);isolation:isolate;transform:translateZ(0)}.record-button.uploading span:before{opacity:0;background:transparent;transition:none}.record-button.uploading span:after{top:50%;left:50%;width:90px;height:90px;border:0;border-radius:50%;background:var(--color-soft-gray);opacity:0;z-index:1;transform:translate(-50%,-50%);animation:stop-square-to-upload-circle .18s ease-out both;transition:none}.record-button.upload-complete span{width:88px;height:88px;border:0;border-radius:50%;background:var(--color-ink);transition:background .16s ease}.upload-ring,.upload-check{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;width:88px;height:88px;pointer-events:none;opacity:0}.record-button.uploading .upload-ring{opacity:1}.record-button.upload-complete .upload-ring,.record-button.returning-to-record .upload-ring{opacity:0}.upload-ring-progress{fill:none;stroke:var(--color-ink);stroke-width:44;stroke-dasharray:138.23;stroke-linecap:butt;transition:stroke-dashoffset .7s ease}.upload-check{z-index:4;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;transform:scale(.92);transition:opacity .12s ease,transform .18s ease}.upload-ring{transform:rotate(-90deg)}.upload-check path{stroke-dasharray:42;stroke-dashoffset:42;transition:stroke-dashoffset .22s ease}.record-button.upload-complete .upload-check{opacity:1;transform:scale(1)}.record-button.upload-complete .upload-check path{stroke-dashoffset:0}.record-button.returning-to-record .upload-check{opacity:0;transform:scale(.96);transition:opacity 90ms ease,transform .12s ease}.record-button.upload-complete span:before{background:var(--color-ink);opacity:1;transition:none}.record-button.upload-complete span:after{opacity:0;animation:none}.record-button.returning-to-record span{background:var(--color-red)!important;transition:width .12s ease,height .12s ease,border-radius .12s ease,background .12s ease}.record-button.returning-to-record span:after{opacity:0;transform:translate(-50%,-58%) rotate(45deg) scale(.75);transition-delay:0ms;animation:none}.record-button.returning-to-record span:before{display:none}.record-button:disabled{cursor:wait}.play-button{--play-shift: 0px;display:grid;width:88px;height:88px;place-items:center;border:0;background:transparent;cursor:pointer;transform:translateY(var(--play-shift));transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .12s ease;will-change:transform}.recorder-page.info-open .play-button{--play-shift: -60px}.play-button span{width:88px;height:88px;background:var(--color-ink);clip-path:polygon(0 0,100% 50%,100% 50%,0 100%,0 0);transition:width .12s ease,clip-path .12s ease}.play-button:hover:not(:disabled){transform:translateY(var(--play-shift)) scale(1.04)}.play-button.playing span{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0)}.play-button:disabled{cursor:wait;opacity:1}.play-button:disabled span{background:var(--color-soft-gray)}.info-button{background:transparent;position:absolute;left:32px;display:grid;width:24px;height:24px;place-items:center;border:1.5px solid var(--color-ink);border-radius:50%;color:var(--color-ink);cursor:pointer;font-size:1.25rem;font-weight:800;line-height:1;transition:background .12s ease,color .12s ease,transform .12s ease}.inline-info-wrap{position:absolute;top:calc(75vh + 30px);left:50%;width:min(100%,420px);height:120px;opacity:0;pointer-events:none;transform:translate(-50%,calc(-50% + 8px));transition:opacity .18s ease,transform .18s ease}.recorder-page.info-open .inline-info-wrap{opacity:1;transform:translate(-50%,-50%)}.inline-info{margin:0;font-size:14px;text-align:left}@media(max-width:520px){.info-button{position:fixed;bottom:24px;left:24px;z-index:10}.recorder-content{padding:0 20px;transform:translateY(-42px)}.recorder-page.info-open .play-button{--play-shift: -76px}.inline-info-wrap{top:calc(72dvh - 4px);width:calc(100% - 40px)}}