: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:50%;background:var(--color-soft-gray);opacity:1}72%{width:88px;height:88px;border-radius:50%;background:var(--color-soft-gray);opacity:1}to{width:88px;height:88px;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{--panel-inset: 32px;--panel-bottom: 32px;position:relative;display:grid;min-height:100dvh;place-items:center}.recorder-content{--content-shift: 0px;position:absolute;top:50dvh;left:50%;z-index:1;display:flex;width:min(100%,680px);padding:0 24px;flex-direction:column;align-items:center;transform:translate(-50%,calc(-50% + var(--content-shift)));transition:transform .22s cubic-bezier(.22,1,.36,1);will-change:transform}.recorder-page.info-open .recorder-content{--content-shift: -25dvh}.controls{display:flex;flex-direction:column;align-items:center;gap:88px;transition:transform .22s cubic-bezier(.22,1,.36,1);will-change:transform}.recorder-page.info-open .controls{transform:translateY(34px)}.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;justify-self:center;align-self:center;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-red);transform:translate(-50%,-58%) rotate(45deg) scale(.75);transition:opacity 90ms ease,transform .12s ease}.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);animation:stop-square-to-upload-circle .18s ease-out both}.record-button.uploading span:before{opacity:0;background:transparent;transition:none}.record-button.uploading span:after{top:50%;left:50%;width:88px;height:88px;border:0;border-radius:50%;background:var(--color-soft-gray);opacity:0;z-index:1;transform:translate(-50%,-50%);animation:none;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: -68px}.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{display:none}.inline-info-wrap{position:absolute;z-index:2;top:50dvh;bottom:calc(var(--panel-bottom) + env(safe-area-inset-bottom));right:var(--panel-inset);left:var(--panel-inset);display:flex;align-items:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease}.recorder-page.info-open .inline-info-wrap{opacity:1;pointer-events:auto;transform:translateY(0)}.inline-info{margin:0;font-size:14px;text-align:left;user-select:text;-webkit-user-select:text}.inline-info-desktop{display:none}.inline-info-mobile{display:block}.active-samples{width:100%;font-size:14px;-webkit-user-select:none;user-select:none}.active-samples-empty{margin:0;color:var(--color-soft-gray)}.active-samples-list{display:flex;margin:0;padding:0;flex-direction:column;gap:16px;list-style:none}.active-sample{display:block;min-height:30px;animation:active-sample-pulse .22s ease-out}.active-sample.empty{animation:none}.active-sample-row{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-sample-row{position:relative;display:flex;width:100%;min-width:0;align-items:center;gap:16px;color:var(--color-ink);padding:2px 3px;background:transparent;transition:background .12s ease}.active-sample-waveform{position:relative;display:none;width:auto;min-width:0;max-width:none;flex:1 1 auto;height:28px;pointer-events:none}.active-sample-actions{display:flex;flex:0 0 104px;align-items:center;justify-content:flex-end;gap:10px}.active-sample-like{display:grid;width:66px;height:28px;flex:0 0 66px;align-items:center;grid-template-columns:28px 2ch;column-gap:8px;justify-content:start;border:0;background:transparent;color:var(--color-ink);cursor:pointer;font-size:20px;line-height:1;font-variant-numeric:tabular-nums}.active-sample-flag{display:grid;width:28px;height:28px;flex:0 0 28px;place-items:center;border:0;background:transparent;color:var(--color-ink);cursor:pointer}.active-sample-like:disabled,.active-sample-flag:disabled{cursor:default}.active-sample-like-icon,.active-sample-flag-icon{width:28px;height:28px;flex:0 0 28px;fill:transparent;stroke:var(--color-ink);stroke-width:1.8;stroke-linejoin:round;transition:fill .12s ease,stroke .12s ease}.active-sample-like.liked .active-sample-like-icon,.active-sample-flag.flagged .active-sample-flag-icon{fill:var(--color-ink);stroke:var(--color-ink)}.active-sample-like-count{font-size:15px;text-align:left;visibility:hidden}.active-sample-like-count.visible{visibility:visible}.active-sample.background .active-sample-waveform,.active-sample.background-fill .active-sample-waveform,.active-sample.percussion-pattern .active-sample-waveform{display:block}.active-sample-waveform-base,.active-sample-waveform-progress{stroke:none}.active-sample-waveform-base{fill:var(--color-soft-gray)}.active-sample-waveform-progress{fill:var(--color-ink);transition:clip-path .16s linear}.active-sample.percussion-pattern .active-sample-waveform-progress{transition:none}.active-sample.highlighted .active-sample-row{background:var(--color-soft-gray)}.active-sample.background.highlighted .active-sample-row,.active-sample.background-fill.highlighted .active-sample-row,.active-sample.percussion-pattern.highlighted .active-sample-row{background:transparent}@keyframes active-sample-pulse{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(min-width:760px){.recorder-page{grid-template-columns:minmax(0,1fr) minmax(260px,1fr);align-items:center;padding:0 64px;column-gap:64px;place-items:stretch}.recorder-content{--content-shift: 0px;position:relative;top:auto;left:auto;grid-column:2;grid-row:1;width:100%;max-width:360px;padding:0;justify-self:center;align-self:center;transform:none}.recorder-page.info-open .recorder-content{--content-shift: 0px}.inline-info-wrap{position:relative;top:auto;right:auto;bottom:auto;left:auto;grid-column:1;grid-row:1;width:100%;max-width:560px;justify-self:stretch;align-self:center;opacity:1;pointer-events:auto;transform:none}.inline-info-desktop{display:block}.inline-info-mobile{display:none}.recorder-page.info-open .inline-info-wrap{transform:none}}@media(max-width:520px){.recorder-page{--panel-inset: 24px;--panel-bottom: 24px}.info-button{position:fixed;bottom:24px;left:24px;z-index:10;display:grid;width:24px;height:24px;place-items:center;border:1.5px solid var(--color-ink);border-radius:50%;background:transparent;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}.info-button.active{background:var(--color-ink);color:#fff}.recorder-content{--content-shift: -42px;padding:0 20px}.recorder-page.info-open .recorder-content{--content-shift: -25dvh}.recorder-page.info-open .play-button{--play-shift: -80px}.recorder-page.info-open .controls{transform:translateY(40px)}.inline-info-wrap{top:43dvh;width:auto}.active-sample{min-height:21px}}