.intro{width:100%;height:100%;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;padding:0 25px;background-color:rgba(29,29,28,.8);opacity:0;transition:opacity .75s ease;pointer-events:none}.intro.isVisible{cursor:pointer;pointer-events:auto;opacity:1}.introContent{position:relative;width:100%;text-align:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-flow:column nowrap}.introLogo{display:block;padding:0;height:25px;margin:0 auto 5px}@media (min-width:990px){.introLogo{height:40px;margin-bottom:12px}}.introText{position:relative;color:#fff;width:100%;max-width:800px;margin:10px auto 0}@media (min-width:990px){.introText{font-size:26px}}.introText p{font-size:clamp(16px,2vw,24px);font-weight:600;line-height:1.25;color:#fff;padding:0;margin-bottom:8px;-ms-hyphens:none;hyphens:none;-webkit-hyphens:none}@media (min-width:990px){.introText p{margin-bottom:18px}}.introText p.enterText{color:#fff;font-weight:400}.introText p.enterText--mobile{display:block}@media (min-width:1200px){.introText p.enterText--mobile{display:none}}.introText p.enterText--desktop{display:none}@media (min-width:1200px){.introText p.enterText--desktop{display:block}}.stepSequencer{display:grid;grid-template-columns:auto repeat(var(--numTimeSteps),1fr);touch-action:none}.isSmallScreen .stepSequencer{grid-template-columns:repeat(var(--numTimeSteps),1fr);grid-gap:3vw;gap:3vw}.stepSequencer .rowLabel{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-ms-user-select:none;user-select:none}.isSmallScreen .stepSequencer .rowLabel{display:none}.stepSequencer .rowLabel label{display:flex;align-items:center;justify-content:center}.stepSequencer .rowLabelImage{display:block;width:.8vw;height:auto;margin-right:.2vw}.stepSequencer .step{display:grid;align-content:center;justify-content:center;position:relative;width:100%;cursor:pointer}.stepSequencer .step .stepCanvas{width:100%;fill:none}.stepSequencer .step .stepIcon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;overflow:visible}.isSmallScreen .stepSequencer .step .stepIcon{width:100%}.stepSequencer .step .stepIcon--square,.stepSequencer .step .stepIcon--triangle{display:none}.stepSequencer .step .stepIcon .large,.stepSequencer .step .stepIcon .small{transform-origin:15px 15px;transform:translateZ(0) scale(1)}.stepSequencer .step .stepIcon .small{display:inline;display:initial}.stepSequencer .step .stepIcon .large{opacity:0}.stepSequencer .step.isCurrent .stepIcon .large{transform:translateZ(0) scale(1.25)}.stepSequencer .step.isCurrent .stepIcon .small{transform:translateZ(0) scale(1.75)}.stepSequencer .step.isChecked .stepIcon .large,.stepSequencer .step.isPhantom.isCurrent .stepIcon .large{opacity:1}.knob{display:grid;align-items:center;justify-items:center}.knobLabel{max-width:none}.knobWrapper{position:relative;width:100%;display:grid;align-items:center;justify-items:center}.knobForeground{cursor:pointer;z-index:1;position:absolute}.knobForeground img{width:100%;margin:0 auto!important;pointer-events:none}.knobBackground{width:100%;z-index:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.tr808{position:relative}.tr808 .logo{fill:#ff5a00;-webkit-user-select:none;-ms-user-select:none;user-select:none}.tr808.steps-16 span:nth-of-type(16n+1) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+2) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+3) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+4) .stepIcon{fill:#e02a12}.tr808.steps-16 span:nth-of-type(16n+5) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+6) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+7) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+8) .stepIcon{fill:#ff5a00}.tr808.steps-16 span:nth-of-type(16n+9) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+10) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+11) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+12) .stepIcon{fill:#fdf189}.tr808.steps-16 span:nth-of-type(16n+13) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+14) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+15) .stepIcon,.tr808.steps-16 span:nth-of-type(16n+16) .stepIcon{fill:#fff}.tr808.steps-8 span:nth-of-type(8n+1) .stepIcon,.tr808.steps-8 span:nth-of-type(8n+2) .stepIcon{fill:#e02a12}.tr808.steps-8 span:nth-of-type(8n+3) .stepIcon,.tr808.steps-8 span:nth-of-type(8n+4) .stepIcon{fill:#ff5a00}.tr808.steps-8 span:nth-of-type(8n+5) .stepIcon,.tr808.steps-8 span:nth-of-type(8n+6) .stepIcon{fill:#fdf189}.tr808.steps-8 span:nth-of-type(8n+7) .stepIcon,.tr808.steps-8 span:nth-of-type(8n+8) .stepIcon{fill:#fff}.tr808 .branding{margin:1vw 0;-webkit-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.isSmallScreen .tr808 .branding,.tr808 .branding--mobile{display:none}.isSmallScreen .tr808 .branding--mobile{display:block;margin:6vw 0 3vw}.tr808 .controls .columnLabels{display:grid;grid-template-columns:auto repeat(16,1fr);padding:.35vw 0;background:#89928f;border-top-left-radius:.4vw;border-top-right-radius:.4vw}.isSmallScreen .tr808 .controls .columnLabels{grid-template-columns:repeat(8,1fr);grid-gap:2vw;gap:2vw;padding:2vw 0;border-top-left-radius:2vw;border-top-right-radius:2vw}.isSmallScreen .tr808 .controls .columnLabels .columnProp{display:none}.tr808 .controls .columnLabels .columnProp svg{width:1vw}.tr808 .controls .columnLabels .columnLabel{display:grid;align-content:center;justify-content:center}.isSmallScreen .tr808 .controls .columnLabels .columnLabel:nth-child(10),.isSmallScreen .tr808 .controls .columnLabels .columnLabel:nth-child(11),.isSmallScreen .tr808 .controls .columnLabels .columnLabel:nth-child(12),.isSmallScreen .tr808 .controls .columnLabels .columnLabel:nth-child(13),.isSmallScreen .tr808 .controls .columnLabels .columnLabel:nth-child(14),.isSmallScreen .tr808 .controls .columnLabels .columnLabel:nth-child(15),.isSmallScreen .tr808 .controls .columnLabels .columnLabel:nth-child(16),.isSmallScreen .tr808 .controls .columnLabels .columnLabel:nth-child(17){display:none}.tr808 .controls .columnLabels .columnLabel img{height:.6vw}.isSmallScreen .tr808 .controls .columnLabels .columnLabel img{height:2.25vw}.tr808 .controls .switches{display:grid;grid-template-columns:9.75vw 10.75vw 6.5vw 1fr 6vw;grid-template-rows:auto 1fr;grid-template-areas:"aiVariationStartStop tempo clear . fill" "aiVariationStartStop tempo shuffle . ."}.isSmallScreen .tr808 .controls .switches{grid-template-columns:50% 50%;grid-template-areas:"aiVariationStartStop tempo"}.isSmallScreen .tr808 .controls .switches .clear,.isSmallScreen .tr808 .controls .switches .fill,.isSmallScreen .tr808 .controls .switches .shuffle{display:none}.tr808 .controls .switches .aiVariationStartStop{grid-area:aiVariationStartStop;background:#89928f;border-bottom-left-radius:.4vw;border-bottom-right-radius:.4vw}.tr808 .controls .switches .aiVariationStartStop .switch--fill{display:none}.isSmallScreen .tr808 .controls .switches .aiVariationStartStop{border-bottom-left-radius:2vw;border-bottom-right-radius:2vw}.isSmallScreen .tr808 .controls .switches .aiVariationStartStop .switch--aiVariation{display:none}.isSmallScreen .tr808 .controls .switches .aiVariationStartStop .switch--fill{display:block;padding:4vw 11.5vw}.tr808 .controls .switches .tempo{grid-area:tempo;display:grid;align-items:start}.tr808 .controls .switches .clear{grid-area:clear;border-left:.05vw solid #89928f;border-bottom:.05vw solid #89928f}.tr808 .controls .switches .shuffle{grid-area:shuffle;display:grid;align-items:start;border-right:.05vw solid #89928f}.tr808 .controls .switches .fill{grid-area:fill;background:#89928f;border-bottom-left-radius:.4vw;border-bottom-right-radius:.4vw}.tr808 .controls .switches .buttonLabel,.tr808 .controls .switches .knobLabel{height:.5vw;margin-bottom:.6vw!important}.isSmallScreen .tr808 .controls .switches .buttonLabel,.isSmallScreen .tr808 .controls .switches .knobLabel{height:2vw;margin:3vw!important}.tr808 .controls .switches .switch{display:grid;justify-items:center;align-content:start}.tr808 .controls .switches .switch--aiVariation{padding:.5vw 1.25vw 1vw}.tr808 .controls .switches .switch--startStop{width:100%;padding:0 1vw 1vw}.isSmallScreen .tr808 .controls .switches .switch--startStop{padding:1vw 4vw 4vw}.tr808 .controls .switches .switch--startStop .toggleStartStop{position:relative;width:100%}.tr808 .controls .switches .switch--startStop .toggleStartStop .button{opacity:0;pointer-events:none}.tr808 .controls .switches .switch--startStop .toggleStartStop .button.isVisible{opacity:1;pointer-events:auto}.tr808 .controls .switches .switch--startStop .toggleStartStop .button--stop{position:absolute;top:0;left:0;width:100%}.tr808 .controls .switches .switch--startStop .toggleStartStop .button .button--startImage,.tr808 .controls .switches .switch--startStop .toggleStartStop .button .button--stopImage{display:block}.isSmallScreen .tr808 .controls .switches .switch--startStop .toggleStartStop .button .button--startImage,.isSmallScreen .tr808 .controls .switches .switch--startStop .toggleStartStop .button .button--stopImage,.tr808 .controls .switches .switch--startStop .toggleStartStop .button .button--startImageMobile,.tr808 .controls .switches .switch--startStop .toggleStartStop .button .button--stopImageMobile{display:none}.isSmallScreen .tr808 .controls .switches .switch--startStop .toggleStartStop .button .button--startImageMobile,.isSmallScreen .tr808 .controls .switches .switch--startStop .toggleStartStop .button .button--stopImageMobile{display:block}.tr808 .controls .switches .switch--clear{padding:.8vw 1.25vw}.tr808 .controls .switches .switch--clear svg .text{fill:#fdf189}.tr808 .controls .switches .switch--clear svg .circle{fill:#e4371b}.tr808 .controls .switches .switch--clear svg .border{fill:none;stroke:#fdf189;stroke-miterlimit:10}.tr808 .controls .switches .switch--clear .button:active{transform:none}.tr808 .controls .switches .switch--clear .button:active svg .textGroup{transform-origin:center;transform:scale(.95)}.tr808 .controls .switches .switch--fill{padding:1vw 1.5vw}.tr808 .controls .switches .switch .button{width:100%}.tr808 .controls .switches .switch .button--yellow svg .background{fill:#fdf189;transition:fill .15s ease}.tr808 .controls .switches .switch .button--yellow svg .border,.tr808 .controls .switches .switch .button--yellow svg .text{fill:#1d1d1c}.tr808 .controls .switches .switch .button--yellow:hover svg .background{fill:#ffe800}.tr808 .controls .switches .knob{padding:1vw 0}.tr808 .controls .switches .knob--tempo{padding:1vw 0 0 .75vw}.tr808 .controls .switches .knob--tempo .knobForeground img{width:7vw}.isSmallScreen .tr808 .controls .switches .knob--tempo .knobForeground img{width:25vw}.tr808 .controls .switches .knob--tempo .knobBackground{width:8.2vw}.isSmallScreen .tr808 .controls .switches .knob--tempo .knobBackground{width:31vw}.tr808 .controls .switches .knob--shuffle{padding:.5vw 0 0}.tr808 .controls .switches .knob--shuffle .knobLabel{margin-bottom:.5vw!important}.tr808 .controls .switches .knob--shuffle .knobForeground img{width:2.8vw}.tr808 .controls .switches .knob--shuffle .knobBackground{width:3.5vw}.tr808 .controls .switches .aiVariationToggle{cursor:pointer;padding:0 1.8vw}.tr808 .controls .switches .aiVariationToggle svg{width:100%}.tr808 .controls .switches .aiVariationToggle svg .toggle--off{fill:#89928f}.tr808 .controls .switches .aiVariationToggle svg .toggle--on{fill:none}.tr808 .controls .switches .aiVariationToggle svg .lightBackground,.tr808 .controls .switches .aiVariationToggle svg .text,.tr808 .controls .switches .aiVariationToggle svg .toggleBackground{fill:#1d1d1c}.tr808 .controls .switches .aiVariationToggle svg .light--on{fill:#721c0e}.tr808 .controls .switches .aiVariationToggle svg .light--off{fill:#e4371b}.tr808 .controls .switches .aiVariationToggle input:checked+svg .toggle--off{fill:none}.tr808 .controls .switches .aiVariationToggle input:checked+svg .toggle--on{fill:#89928f}.tr808 .controls .switches .aiVariationToggle input:checked+svg .light--on{fill:#e4371b}.tr808 .controls .switches .aiVariationToggle input:checked+svg .light--off{fill:#721c0e}.tr808 .button--deviceSwitcher{display:none;width:12vw;position:absolute;right:0;bottom:10vw}.tr808 .button--deviceSwitcher img{width:100%}.isSmallScreen .tr808 .button--deviceSwitcher{display:block!important}.tb303{position:relative}.tb303 .logo{fill:#1d1d1c;-webkit-user-select:none;-ms-user-select:none;user-select:none}.tb303 .stepSequencer .step .stepIcon{fill:#fff}.tb303 .stepSequencer .step.As .stepIcon,.tb303 .stepSequencer .step.Cs .stepIcon,.tb303 .stepSequencer .step.Ds .stepIcon,.tb303 .stepSequencer .step.Fs .stepIcon,.tb303 .stepSequencer .step.Gs .stepIcon{fill:#000}.tb303.waveform-sawtooth .step .stepIcon--circle{display:none}.tb303.waveform-sawtooth .step .stepIcon--triangle{display:inline;display:initial}.tb303.waveform-square .step .stepIcon--circle{display:none}.tb303.waveform-square .step .stepIcon--square{display:inline;display:initial}.tb303 .branding{margin:1vw 0;-webkit-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.isSmallScreen .tb303 .branding,.tb303 .branding--mobile{display:none}.isSmallScreen .tb303 .branding--mobile{display:block;margin:6vw 0 5vw}.tb303 .controls .columnLabels{display:grid;grid-template-columns:auto repeat(16,1fr);background:#000}.isSmallScreen .tb303 .controls .columnLabels{display:none}.tb303 .controls .columnLabels .columnProp svg{width:1vw}.tb303 .controls .columnLabels .columnLabel{display:grid;align-content:center;justify-content:center;padding:.4vw 0}.isSmallScreen .tb303 .controls .columnLabels .columnLabel:nth-child(9),.isSmallScreen .tb303 .controls .columnLabels .columnLabel:nth-child(10),.isSmallScreen .tb303 .controls .columnLabels .columnLabel:nth-child(11),.isSmallScreen .tb303 .controls .columnLabels .columnLabel:nth-child(12),.isSmallScreen .tb303 .controls .columnLabels .columnLabel:nth-child(13),.isSmallScreen .tb303 .controls .columnLabels .columnLabel:nth-child(14),.isSmallScreen .tb303 .controls .columnLabels .columnLabel:nth-child(15),.isSmallScreen .tb303 .controls .columnLabels .columnLabel:nth-child(16){display:none}.tb303 .controls .columnLabels .columnLabel img{height:.5vw}.isSmallScreen .tb303 .controls .columnLabels .columnLabel img{height:2.5vw}.tb303 .controls .switches{display:grid;grid-template-columns:7.5vw 1fr 7.5vw;grid-template-rows:auto auto;grid-template-areas:"random knobs clear" "runStop . waveform";grid-gap:.2vw 0;gap:.2vw 0}.isSmallScreen .tb303 .controls .switches{grid-template-columns:50% 50%;grid-template-rows:auto auto;grid-template-areas:"knobs knobs" "random waveform";grid-gap:.2vw 0;gap:.2vw 0}.isSmallScreen .tb303 .controls .switches .knob--accent,.isSmallScreen .tb303 .controls .switches .knob--decay,.isSmallScreen .tb303 .controls .switches .switch--clear,.isSmallScreen .tb303 .controls .switches .switch--runStop{display:none}.tb303 .controls .switches .switch{display:grid;justify-items:center;align-content:start;padding:.75vw 2.2vw 1.5vw;background:#f1f1f1}.tb303 .controls .switches .switch--random{grid-area:random;background:#000}.isSmallScreen .tb303 .controls .switches .switch--random{padding:4vw 10vw}.tb303 .controls .switches .switch--clear{grid-area:clear;padding:.75vw 2.2vw 1vw}.tb303 .controls .switches .switch--runStop{grid-area:runStop;padding:.5vw 1.5vw .25vw}.tb303 .controls .switches .switch--waveform{grid-area:waveform;padding:.5vw 2.2vw .25vw}.isSmallScreen .tb303 .controls .switches .switch--waveform{padding:4vw 10vw}.tb303 .controls .switches .switch--waveform .waveformToggle{display:grid;grid-template-columns:50% 50%}.tb303 .controls .switches .switch .button--clear,.tb303 .controls .switches .switch .button--random,.tb303 .controls .switches .switch .button--runStop,.tb303 .controls .switches .switch .runstopToggle,.tb303 .controls .switches .switch .waveformToggle{width:100%}.tb303 .controls .switches .switch .button--clear svg .background,.tb303 .controls .switches .switch .button--random svg .background{fill:#fff;transition:fill .15s ease}.tb303 .controls .switches .switch .button--clear svg .border,.tb303 .controls .switches .switch .button--random svg .border{fill:#e1e1e1}.tb303 .controls .switches .switch .button--clear:hover svg .background,.tb303 .controls .switches .switch .button--random:hover svg .background{fill:#eee}.tb303 .controls .switches .switch .button--runStop svg .inner{fill:#fff;transition:fill .15s ease}.tb303 .controls .switches .switch .button--runStop svg .outer{fill:#a3a3a4}.tb303 .controls .switches .switch .button--runStop svg .border{fill:#e1e1e1}.tb303 .controls .switches .switch .button--runStop:active svg .inner,.tb303 .controls .switches .switch .button--runStop:hover svg .inner{fill:#eee}.tb303 .controls .switches .switch .buttonLabel{height:.5vw;margin-bottom:.6vw}.isSmallScreen .tb303 .controls .switches .switch .buttonLabel{height:2vw;margin-bottom:2vw!important}.tb303 .controls .switches .switch .buttonLabel--waveformShapes{width:100%;height:auto;margin:.6vw 0 0}.isSmallScreen .tb303 .controls .switches .switch .buttonLabel--waveformShapes{margin-bottom:0!important}.tb303 .controls .switches .switch .buttonLabel--clear{margin-bottom:.7vw!important}.tb303 .controls .switches .switch .runStopToggle{position:relative;width:100%}.tb303 .controls .switches .switch .runStopToggle .button--runStopStop{position:absolute;top:0;left:0;width:100%;opacity:0;pointer-events:none}.tb303 .controls .switches .switch .runStopToggle .button--runStopStop.isVisible{opacity:1;pointer-events:auto}.tb303 .controls .switches .switch .waveformToggle label{cursor:pointer}.tb303 .controls .switches .switch .waveformToggle svg{display:block;fill:#6e6e6e}.tb303 .controls .switches .switch .waveformToggle input:checked+svg{fill:#000}.tb303 .controls .switches .knobs{grid-area:knobs;position:relative;display:grid;grid-template-columns:repeat(5,3.7vw);align-content:center;justify-content:center;grid-gap:.5vw;gap:.5vw}.isSmallScreen .tb303 .controls .switches .knobs{grid-template-columns:repeat(3,22vw);justify-content:space-between;margin-bottom:4vw}.tb303 .controls .switches .knobs:after{content:"";display:block;height:.1vw;position:absolute;bottom:-.15vw;left:.4vw;right:.4vw;background:#b0b0b0}.isSmallScreen .tb303 .controls .switches .knobs:after{display:none}.tb303 .controls .switches .knobs .knobLabel{height:.4vw;margin:0 0 .25vw!important}.isSmallScreen .tb303 .controls .switches .knobs .knobLabel{height:2vw;margin-bottom:3vw!important}.tb303 .controls .switches .knobs .knobForeground{width:100%}.tb303 .controls .switches .knobs .knobForeground img{width:60%}.tb303 .controls .switches .knobs .knobBackground{width:75%}.tb303 .button--deviceSwitcher{display:none;width:12vw;position:absolute;left:0;bottom:10vw}.tb303 .button--deviceSwitcher img{width:100%}.isSmallScreen .tb303 .button--deviceSwitcher{display:block!important}.recordingTimer--progress{z-index:1;position:absolute;top:0;left:0;width:100%}.recordingTimer--progress .background{fill:#e02a12}.recordingTimer--progress .outline,.recordingTimer--progress .progress{fill:none;stroke:#e02a12;stroke-miterlimit:10}.recordingTimer--progress .progress{stroke-width:.3vw;transition:stroke-dashoffset .35s;transform:rotate(-90deg);transform-origin:50% 50%}.recordingTimer{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.recordingTimer .time{z-index:2;font-size:.75vw;line-height:1;font-weight:700;color:#fff}.recordingTimer .time--countdown{font-size:1vw}.recordingTimer .time .timeMillis--recording{opacity:.5}.isSmallScreen .recordingTimer .time{font-size:3vw}.isSmallScreen .recordingTimer .time--countdown{font-size:4vw}.isSmallScreen.isShortScreen .recordingTimer .time{font-size:2.5vw}.isSmallScreen.isShortScreen .recordingTimer .time--countdown{font-size:3.5vw}.recordingModalBackground{position:fixed;left:0;top:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background-color:rgba(29,29,28,.5);z-index:2}.recordingModal{position:relative;width:840px;height:auto;min-height:515px;transition:width .5s ease,height .5s ease;background-color:#fdf189;color:#1d1d1c}.isSmallScreen .recordingModal{width:100%;height:100%}.isSmallScreen.device-tb303 .recordingModal{transform:translateX(100vw)}.recordingModalContent{width:100%;height:100%;min-height:515px;display:grid;grid-template-rows:auto 1fr;grid-template-areas:"header" "body";padding:60px 0}.isSmallScreen .recordingModalContent{padding:10vw 8vw}.recordingModalContent--processing{display:flex;align-items:center;justify-content:center}.recordingModalContent--processing .progressIndictor{z-index:1;width:263px;position:absolute}.recordingModalContent--processing .progressIndictor .background{fill:#1d1d1c}.recordingModalContent--processing .progressIndictor .outline,.recordingModalContent--processing .progressIndictor .progress{fill:none;stroke:#1d1d1c;stroke-miterlimit:10}.recordingModalContent--processing .progressIndictor .progress{stroke-width:8px;transition:stroke-dashoffset .35s;transform:rotate(-90deg);transform-origin:50% 50%}.recordingModalContent--processing .progressText{z-index:2;font-size:38px;font-weight:700;color:#fff}.recordingModalContent--share .videoPlayer{width:100%;max-width:600px;height:auto;margin:30px 0 40px}.recordingModalContent--share .videoPlayer:focus{outline:none}.recordingModalContent--share .shareButtons{display:grid;grid-auto-flow:column;grid-gap:10px;gap:10px}.recordingModalContent--share .shareButton{width:50px;height:50px;border:none;background:none;padding:0;margin:0;cursor:pointer}.recordingModalContent--share .shareButton svg{display:block;width:100%;margin:0}.recordingModalHeader{grid-area:header;display:flex;align-items:center;justify-content:flex-start;padding:0 5vw}@media (min-width:768px){.recordingModalHeader{justify-content:center}}.recordingModalHeader h2{font-size:clamp(38px,4vw,42px)!important;line-height:1!important;color:#1d1d1c!important}.recordingModalHeader h2 br{display:inline;display:initial}@media (min-width:768px){.recordingModalHeader h2 br{display:none}}.recordingModalBody{grid-area:body;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.modalHeading{display:block;height:36px;-webkit-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.modalButton{display:inline-block;padding:0;margin:0;border:none;background:none;font-family:forma-djr-text,sans-serif;font-size:16px;font-weight:400;color:#000;cursor:pointer}.modalButton:focus{outline:none}.modalButton img{display:block;height:60px;width:auto}.modalButton--close{position:absolute;top:30px;right:30px}.isSmallScreen .modalButton--close{width:30px;height:30px;top:12vw;right:12vw}.modalButton--close img{height:28px}.modalButton--showMeMyPiece{margin-bottom:20px}.modalButton--nameIt{margin:20px 0 0;width:100%;max-width:270px}@media (min-width:768px){.modalButton--nameIt{margin:0 0 0 270px;width:auto;max-width:none}}.modalInput{width:100%;display:grid;grid-auto-flow:row;justify-items:center;margin-bottom:20px}@media (min-width:768px){.modalInput{width:auto;grid-auto-flow:column;grid-template-columns:50% 50%;justify-items:legacy}}.modalInputLabel{display:flex;align-items:center;justify-content:flex-start;width:100%;max-width:270px;height:40px}@media (min-width:768px){.modalInputLabel{width:180px;height:60px}}.modalInputLabel img{height:12px}.modalInput input{background:transparent;border:1px solid #1d1d1c;font-size:16px;padding:15px;width:100%;max-width:270px;height:60px}@media (min-width:768px){.modalInput input{width:270px;height:60px}}.modalInput input:focus{outline:none}.rhap_container{width:100%;max-width:500px;margin-bottom:40px;padding:10px 25px 10px 15px;background:none;box-shadow:none}.rhap_container:focus{outline:none}.rhap_current-time,.rhap_total-time{font-size:12px;line-height:1;width:35px;color:#1d1d1c}.rhap_current-time{text-align:right}.rhap_total-time{text-align:left}.rhap_progress-container:focus{outline:none}.rhap_progress-bar{height:2px;background-color:rgba(29,29,28,.75)}.rhap_progress-filled{background-color:rgba(29,29,28,.5)}.rhap_progress-indicator{width:14px;height:14px;margin-left:-7px;top:-6px;border-radius:50%;box-shadow:none;background-color:#1d1d1c}.rhap_download-progress{background-color:rgba(29,29,28,.5)}.rhap_controls-section{flex:0 1}.rhap_main-controls-button{margin:0}.rhap_play-pause-button{width:60px;height:60px;cursor:pointer}.rhap_play-pause-button:focus{outline:none}.rhap_play-pause-button svg{display:block;width:60px;height:60px}.rhap_play-pause-button svg path{fill:#1d1d1c}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font:112.5%/1.45em georgia,serif;box-sizing:border-box;overflow-y:scroll}*,:after,:before{box-sizing:inherit}body{color:rgba(0,0,0,.8);font-family:georgia,serif;font-weight:400;word-wrap:break-word;-webkit-font-kerning:normal;font-kerning:normal;-ms-font-feature-settings:"kern","liga","clig","calt";font-feature-settings:"kern","liga","clig","calt","kern"}img{max-width:100%;padding:0;margin:0 0 1.45rem}h1{font-size:2.25rem}h1,h2{padding:0;margin:0 0 1.45rem;color:inherit;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:700;text-rendering:optimizeLegibility;line-height:1.1}h2{font-size:1.62671rem}h3{font-size:1.38316rem}h3,h4{padding:0;margin:0 0 1.45rem;color:inherit;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:700;text-rendering:optimizeLegibility;line-height:1.1}h4{font-size:1rem}h5{font-size:.85028rem}h5,h6{padding:0;margin:0 0 1.45rem;color:inherit;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:700;text-rendering:optimizeLegibility;line-height:1.1}h6{font-size:.78405rem}hgroup{padding:0;margin:0 0 1.45rem}ol,ul{padding:0;margin:0 0 1.45rem 1.45rem;list-style-position:outside;list-style-image:none}dd,dl,figure,p{padding:0;margin:0 0 1.45rem}pre{margin:0 0 1.45rem;font-size:.85rem;line-height:1.42;background:rgba(0,0,0,.04);border-radius:3px;overflow:auto;word-wrap:normal;padding:1.45rem}table{font-size:1rem;line-height:1.45rem;border-collapse:collapse;width:100%}fieldset,table{padding:0;margin:0 0 1.45rem}blockquote{padding:0;margin:0 1.45rem 1.45rem}form,iframe,noscript{padding:0;margin:0 0 1.45rem}hr{padding:0;margin:0 0 calc(1.45rem - 1px);background:rgba(0,0,0,.2);border:none;height:1px}address{padding:0;margin:0 0 1.45rem}b,dt,strong,th{font-weight:700}li{margin-bottom:.725rem}ol li,ul li{padding-left:0}li>ol,li>ul{margin-left:1.45rem;margin-bottom:.725rem;margin-top:.725rem}blockquote :last-child,li :last-child,p :last-child{margin-bottom:0}li>p{margin-bottom:.725rem}code,kbd,samp{font-size:.85rem;line-height:1.45rem}abbr,abbr[title],acronym{border-bottom:1px dotted rgba(0,0,0,.5);cursor:help}abbr[title]{text-decoration:none}td,th,thead{text-align:left}td,th{border-bottom:1px solid rgba(0,0,0,.12);font-feature-settings:"tnum";-moz-font-feature-settings:"tnum";-ms-font-feature-settings:"tnum";-webkit-font-feature-settings:"tnum";padding:.725rem .96667rem calc(.725rem - 1px)}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}code,tt{background-color:rgba(0,0,0,.04);border-radius:3px;font-family:"SFMono-Regular",Consolas,"Roboto Mono","Droid Sans Mono","Liberation Mono",Menlo,Courier,monospace;padding:.2em 0}pre code{background:none;line-height:1.42}code:after,code:before,tt:after,tt:before{letter-spacing:-.2em;content:" "}pre code:after,pre code:before,pre tt:after,pre tt:before{content:""}@media only screen and (max-width:480px){html{font-size:100%}}*,:after,:before{box-sizing:border-box}::selection{background-color:transparent}body,html{height:100%;width:100%;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none}body{background-color:#1d1d1c}#root{height:100%}.app{position:relative;width:100vw;height:100vh;background-image:linear-gradient(90deg,#1d1d1c,#1d1d1c 50%,#d7d7d7 0,#d7d7d7);-webkit-font-kerning:normal;font-kerning:normal;font-variant-ligatures:common-ligatures contextual;font-feature-settings:"kern","liga","clig","calt","kern",common-ligatures contextual;-webkit-font-smoothing:antialiased;font-family:forma-djr-text,sans-serif;font-weight:400;font-style:normal;color:#fff;font-size:clamp(20px,2.3vw,200px);line-height:1.25;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:grid;grid-template-columns:50% 50%;grid-template-rows:1fr auto 1fr;grid-template-areas:". ." "tr808 tb303" ". ."}.app.isSmallScreen{width:200vw;height:100%;grid-template-rows:auto;grid-template-areas:"tr808 tb303";transition:transform .15s ease-out}.app.isSmallScreen.device-tr808{transform:none}.app.isSmallScreen.device-tb303{transform:translateX(-100vw)}.tr808{grid-area:tr808;background-color:#1d1d1c}.tb303{grid-area:tb303;background-color:#d7d7d7}.tb303,.tr808{padding:1.5vw 5vw;display:grid;align-content:start}.isSmallScreen .tb303,.isSmallScreen .tr808{padding:18vw 12vw 9vw}.tb303 .logo,.tr808 .logo{height:1.25vw;margin-bottom:1.5vw}.isSmallScreen .tb303 .logo,.isSmallScreen .tr808 .logo{position:absolute;top:7vw;left:12vw;height:4.5vw;margin:0}.nav{position:absolute;z-index:2;grid-area:tb303;top:.4vw;right:5vw;display:grid;grid-auto-flow:column;justify-content:center;align-items:center;grid-gap:1vw;gap:1vw}.nav .button--record{width:3.5vw;height:3.5vw}.isSmallScreen:not(.isShortScreen) .nav .button--record{position:fixed;bottom:4vh;left:50vw;transform:translateX(-50%);z-index:5;width:14vw;height:14vw}.isSmallScreen.isShortScreen .nav .button--record{position:fixed;top:3vw;right:20vw;transform:translateX(-50%);z-index:5;width:11vw;height:11vw}.isSmallScreen:not(.isShortScreen).device-tb303 .nav .button--record{transform:translateX(100vw) translateX(-50%)}.nav .button--record .recordIcon{display:block;margin:.25vw}.nav .button--record .recordIcon .background{fill:#89928f}.nav .button--record .recordIcon .outline{fill:none;stroke:#89928f;stroke-miterlimit:10}.nav .button--record .recordIcon .text{fill:#fff}.nav .button--record.isRecording .recordIcon{display:none}.nav .button--about{width:1.75vw;height:1.75vw}.isSmallScreen .nav .button--about{position:fixed;top:8vw;right:12vw;width:9vw;z-index:2}.isSmallScreen.device-tr808 .nav .button--about svg{fill:#fff}h2{font-size:clamp(44px,4vw,64px);line-height:1;color:#89928f;margin:0 0 .5em}.isSmallScreen h2{font-size:44px}p{font-size:16px;line-height:2;color:#89928f}p,ul{margin:0}ul{list-style:none}ul li{font-size:16px;color:#89928f;margin:0 0 .5em}.offscreen,.sr-only{position:fixed;top:-1000px;left:-1000px}img,svg{display:block;margin:0}.button{position:relative;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:none;font-family:forma-djr-text,sans-serif;font-size:16px;font-weight:400;color:#000;cursor:pointer}.button:focus{outline:none}.button svg{display:block;width:100%}.button--close{width:48px;height:48px}.button--close svg{fill:#1d1d1c}.button--facebook,.button--twitter{height:56px;width:150px;background:#fdf189;color:#1d1d1c;border:4px solid #000;margin-right:15px}.controls .button:active{transform-origin:center;transform:scale(.95)}.intro{position:fixed;z-index:3;top:0;left:0}.infoModalContent--about .aboutText,.infoModalContent--about .aboutVideo{position:absolute;top:0;width:50%;height:100%;padding:3vw 5vw}.isSmallScreen .infoModalContent--about .aboutText,.isSmallScreen .infoModalContent--about .aboutVideo{position:relative;width:100vw;padding:10vw 12vw}.infoModalContent--about .aboutText{left:0}.infoModalContent--about .aboutText p{max-width:475px}.infoModalContent--about .aboutText .aboutShareButtons{display:flex;margin-top:2vw}.isSmallScreen .infoModalContent--about .aboutText .aboutShareButtons{margin-top:8vw}.infoModalContent--about .aboutText .aboutShareButtons .button{text-decoration:none}.infoModalContent--about .aboutVideo{right:0;background:#d7d7d7}.isSmallScreen .infoModalContent--about .aboutVideo{background:transparent}.infoModalContent--about .aboutVideo h2{color:#ff5a00}.infoModalContent--about .aboutVideo .video{width:100%;height:auto;padding:56.25% 0 0;position:relative;background:#89928f}.infoModalContent--about .aboutVideo .video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.infoModalContent--about .aboutVideo .videoCaption{margin-top:2vw}.isSmallScreen .infoModalContent--about .aboutVideo .videoCaption{margin-top:6vw}.infoModalContent--about .aboutVideo .videoCaption p{max-width:475px}.infoModalContent--credits{padding:3vw 5vw}.infoModalContent--privacy{padding:3vw 5vw;overflow-y:auto;-webkit-mask-image:linear-gradient(180deg,#000,#000 90%,transparent);mask-image:linear-gradient(180deg,#000,#000 90%,transparent);-ms-overflow-style:none;scrollbar-width:none}.infoModalContent--privacy::-webkit-scrollbar{display:none}.infoModalContent--privacy p{margin-bottom:1em}.infoModalContent--trademark{padding:3vw 5vw}.infoModal{position:fixed;z-index:5;top:0;left:0;width:100vw;height:100vh;display:grid;grid-auto-flow:row;grid-template-rows:1fr auto;background-color:#1d1d1c;-webkit-user-select:text;-ms-user-select:text;user-select:text;overflow-y:auto}.isSmallScreen.device-tb303 .infoModal{transform:translateX(100vw)}.isSmallScreen .infoModal h2{color:#fff}.infoModal p{max-width:600px;color:#89928f}.isSmallScreen .infoModal p{color:#fff}.infoModalFooter{padding:0 5vw 2vw;z-index:2}.isSmallScreen .infoModalFooter{padding:0 12vw 6vw}.infoModalFooter .designMuseum{display:flex;flex-flow:row nowrap;align-items:flex-end;margin-right:2vw;margin-bottom:2vw}@media (min-width:1200px){.infoModalFooter .designMuseum{display:inline-flex;margin-bottom:0}}.infoModalFooter .designMuseumLogo{display:block;width:60px}.infoModalFooter a{font-size:14px;color:#89928f;text-decoration:none;margin-right:2vw}.infoModalFooter a:last-child{margin-right:0}.infoModal .button--close{width:1.75vw;height:1.75vw;position:fixed;top:3vw;right:5vw}.isSmallScreen .infoModal .button--close{width:30px;height:30px;top:12vw;right:12vw;position:absolute}.isSmallScreen .infoModal .button--close svg{fill:#fff}
/*# sourceMappingURL=main.1fe33781.chunk.css.map */