*,*:before,*:after{box-sizing:border-box}html{height:100%;width:100%;overflow-y:scroll}body{min-height:100%;margin:0;padding:10px 20px 50px;font-family:Inter,sans-serif;font-size:18px;color:#444;background-color:#fff}main{width:100%;max-width:960px;margin:0 auto}h1{font-size:26px;font-weight:700;text-transform:uppercase}a{color:#6884b1;text-decoration:none}button{box-shadow:none;-webkit-box-shadow:none;-webkit-appearance:none;-webkit-border-radius:0;border-radius:0;border:none;background-color:transparent;font-family:inherit;font-size:inherit;color:inherit;outline:none}section{padding:16px;background-color:#faf8f5;margin-bottom:24px}section h2{margin:-4px 0 8px;font-size:22px;font-weight:700}#intro{margin-bottom:20px}#intro #imageWrapper{display:flex;align-items:flex-start}#intro p{margin:0 20px 12px 0;flex-grow:1}#intro code{font-size:15px}#intro img{width:200px;flex-shrink:0;margin-bottom:8px}#ctrlAudio #ctrlAudioText{height:64px;margin-left:12px;display:inline-block}#ctrlAudio a#lnkWav{display:none}#ctrlAudio a#lnkTest{position:relative;float:right;display:none}#ctrlAudio a#lnkTest.visible{display:block}#btnAudio{display:inline-block;vertical-align:top;width:64px;height:64px;padding:12px;border:3px solid hsl(5,50%,55%)}#btnAudio svg{display:none}#btnAudio svg path{fill:#c65c53}#btnAudio:hover{background-color:#c65c53}#btnAudio:hover svg path{fill:#fff}#btnAudio.enable svg#imgEnable{display:inline-block}#btnAudio.record svg#imgRecord{display:inline-block}#btnAudio.stop svg#imgStop{display:inline-block}#btnAudio.done svg#imgDone{display:inline-block}#btnAudio.done{border-color:#6884b1;background-color:#6884b1}#btnAudio.done svg path{fill:#fff}#ctrlDecoding{display:none}#ctrlDecoding.visible{display:block}#ctrlDecoding #ctrlDecodingRes{display:none}#ctrlDecoding #ctrlDecodingRes.visible{display:block}#ctrlDecoding nav a{display:none;padding:4px 12px;cursor:default;color:inherit}#ctrlDecoding nav a:hover{background-color:#f3efe7}#ctrlDecoding nav a.hidden{display:none}#ctrlDecoding nav a#lnkTones{display:inline-block}#ctrlDecoding nav a.visible{display:inline-block}#ctrlDecoding.tones nav a#lnkTones{background-color:#ebe4d6}#ctrlDecoding.blocks nav a#lnkBlocks{background-color:#ebe4d6}#ctrlDecoding.base64 nav a#lnkBase64{background-color:#ebe4d6}#ctrlDecoding.content nav a#lnkContent{background-color:#ebe4d6}#ctrlDecoding.tones article#resTones{display:block}#ctrlDecoding.blocks article#resBlocks{display:block}#ctrlDecoding.base64 article#resBase64{display:block}#ctrlDecoding.content article#resContent{display:block}#ctrlDecoding article{border:2px solid hsl(39,35%,88%);background-color:#fff;padding:12px;display:none;font-size:16px;overflow-x:auto}#ctrlDecoding pre{font-family:monospace;white-space:pre-wrap;font-size:14px;margin:0}#ctrlDecoding span.valid{color:#4b8b66}#ctrlDecoding span.invalid{color:#c65c53}