.theme,.theme--dark{color:var(--shade-8)}:root{--shade-1:#fff;--shade-2:#fffffe;--shade-3:#f3f3f3;--shade-4:#e8e8e8;--shade-5:#d3d3d3;--shade-6:#7f7f7f;--shade-7:#474747;--shade-8:#1a1a1a}.theme--dark{--shade-1:#151515;--shade-2:#1e1e1e;--shade-3:#252526;--shade-4:#2a2d2e;--shade-5:#414141;--shade-6:#b3b3b3;--shade-7:#ccc;--shade-8:#e9f0f3}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}body{margin:0}body{font-family:Ubuntu,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.code-preview{position:absolute;width:100%;height:100%;border:0;background:#fff}.embed{background:var(--shade-1)}.header{position:fixed;top:0;left:0;right:0;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-negative:0;flex-shrink:0;height:2.813rem;background:var(--shade-1);border-bottom:1px solid var(--shade-5)}.logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:8.125rem;height:2.5rem}.theme--dark .logo{fill:#fff}.embed.is-small .logo{width:3.125rem}.logo__full{height:1.875rem}.logo__full svg{width:6rem;height:1.938rem}.embed.is-small .logo__full{display:none}.logo__mark{height:1.875rem}.logo__mark svg{width:1.875rem;height:1.875rem}.embed.is-large .logo__mark{display:none}.tabs{display:-webkit-box;display:-ms-flexbox;display:flex}.tab{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 .938rem;height:2.75rem;border:0;outline:0;border-radius:0;background-color:var(--shade-1);font-family:inherit;font-size:.875rem;font-weight:700;white-space:nowrap;color:var(--shade-6);cursor:pointer}.tab.is-active{color:var(--shade-8);background-color:var(--shade-1)}.tab:hover{background-color:var(--shade-4)}.tab:focus{-webkit-box-shadow:inset 0 0 0 2px var(--shade-5);box-shadow:inset 0 0 0 2px var(--shade-5)}.embed.is-small .tab{padding:0 .625rem}.embed.is-large .tab.has-spacing{margin-left:.313rem}.workspace{position:fixed;top:2.813rem;left:0;right:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1}.workspace-input{width:50%;background:var(--shade-2)}.workspace-input.is-hidden{display:none}.workspace-input.is-full{width:100%}.workspace-output{position:relative;width:50%;border-left:1px solid var(--shade-5)}.workspace-input.is-hidden+.workspace-output{border-left:0}.workspace-output.is-hidden{display:none}.workspace-output.is-full{width:100%}