html,body{margin:0}body{font-family:Tahoma,Arial,-apple-system,serif;display:flex;flex-direction:column;align-items:center;min-height:100vh;background:#14b9ff;color:#2f2f2f;padding:1rem}@media (min-width: 50rem){body{padding:2rem}}h2,h3{display:inline-block;font-weight:400;text-transform:uppercase;border-bottom:1px dashed #2f2f2f;padding-bottom:3px;letter-spacing:.125rem}h2:first-child,h3:first-child{margin-top:0}h2{margin-bottom:1rem}h3{margin-bottom:0}.btn{border-radius:.25rem;background:#0000;border:1px solid #2f2f2f;padding:.25rem .5rem;box-shadow:1px 1px 1px #2f2f2f}.btn:hover{background:#0000001a}.btn:focus{background:#0003}.panel{position:relative;padding:.75rem;max-width:100%;background:#c4c4c4;border:1px solid #2f2f2f;border-radius:.5rem;box-sizing:border-box;margin-top:3rem}@media (min-width: 50rem){.panel{min-width:48rem;padding:1.5rem}}.panel:first-child{margin-top:0}.panel .btn-reset{position:absolute;right:1.5rem;top:1.5rem}.panel-description{margin:0 0 1rem;font-style:italic}.example-container{margin-top:2rem}.example-container:first-child{margin-top:0}.example-header{display:flex;justify-content:space-between;gap:.25rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}.example--source{display:inline-flex;padding:.25rem .5rem;background:#919191;border-radius:.25rem;font-size:small;font-family:monospace}@media (max-width: 50rem){.example--source{align-self:flex-end}}.input-wrapper{display:flex;align-items:center;padding-left:1rem;padding-top:.5rem;padding-bottom:.5rem;border-left:1px solid #2f2f2f}label[for=custom-input]{color:#7c7c7c;padding-right:.5rem}input#custom-input{border:1px solid #2f2f2f;text-transform:uppercase;padding:.25rem .5rem}