body{font-family:Nunito,sans-serif;padding:0;margin:0;background-color:#fff;height:100%}main{position:relative;min-height:100vh}.icon-spin{-webkit-animation:icon-spin 2s infinite linear;animation:icon-spin 2s infinite linear}@-webkit-keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}label[for=code-input]{display:block;padding-bottom:10px}label[for=code-input] span{opacity:.5}@keyframes blink-caret{50%{background:transparent}}@keyframes shake{25%{transform:translate(10px)}75%{transform:translate(-10px)}}@keyframes pulse-border{50%{border-color:var(--segment-color);box-shadow:#fff 0 0,var(--segment-color) 0 0 0 1px,#0000 0 0}}.ExampleUsageCodeInput.-state-error{animation:shake .15s ease-in-out 0s 2}.ExampleUsageCodeInput input{caret-color:transparent}.ExampleUsageCodeInput input::selection{background-color:transparent}.ExampleUsageCodeInput .segment{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:2px solid rgb(209,213,219);border-radius:.375rem;display:flex;--segment-color: #647ACB}.ExampleUsageCodeInput.-focused .segment[data-state=selected],.ExampleUsageCodeInput.-focused .segment[data-state=cursor],.ExampleUsageCodeInput.-state-success .segment,.ExampleUsageCodeInput.-state-error .segment{outline:2px solid transparent;outline-offset:2px;border-color:var(--segment-color);box-shadow:#fff 0 0,var(--segment-color) 0 0 0 1px,#0000 0 0}.ExampleUsageCodeInput.-state-loading .segment{animation:pulse-border 1s ease-in-out 0s infinite}.ExampleUsageCodeInput.-state-error .segment{--segment-color: #ef4444}.ExampleUsageCodeInput.-state-success .segment{--segment-color: #10b981}.ExampleUsageCodeInput.-focused .segment[data-state=selected] div,.ExampleUsageCodeInput.-state-success .segment div,.ExampleUsageCodeInput.-state-error .segment div{flex:1;margin:3px;border-radius:2px;background-color:var(--segment-color);opacity:.15625}.ExampleUsageCodeInput.-focused .segment[data-state=cursor] div{flex:0 0 2px;justify-self:center;margin:8px auto;width:2px;background:currentColor;animation:blink-caret 1.2s step-end infinite}