:root{--color-background: hsl(240, 7%, 97%);--color-primary: hsl(231, 48%, 48%);--color-primary-90: hsl(231, 48%, 48%);--color-primary-80: hsl(231, 48%, 54%);--color-primary-70: hsl(231, 48%, 60%);--color-primary-60: hsl(231, 48%, 66%);--color-primary-50: hsl(231, 48%, 72%);--color-primary-30: hsl(231, 48%, 78%);--color-primary-20: hsl(231, 48%, 84%);--color-primary-15: hsl(231, 48%, 87%);--color-primary-10: hsl(231, 48%, 89%);--color-primary-08: hsl(231, 48%, 93%);--color-primary-05: hsl(231, 48%, 95%);--color-primary-a20: hsla(231, 18%, 48%, 20%);--color-primary-a15: hsla(231, 23%, 48%, 15%);--color-primary-a10: hsla(231, 28%, 48%, 10%);--color-primary-a08: hsla(231, 38%, 48%, 8%);--color-primary-a05: hsla(231, 48%, 48%, 5%);--color-primary-button: hsl(231, 48%, 48%);--color-primary-button-hover: hsl(231, 58%, 58%);--color-primary-saturate: hsla(231, 100%, 48%);--color-grey-100: hsl(231, 0%, 100%);--color-grey-95: hsl(231, 0%, 95%);--color-grey-90: hsl(231, 0%, 90%);--color-grey-85: hsl(231, 0%, 85%);--color-grey-80: hsl(231, 0%, 80%);--color-grey-70: hsl(231, 0%, 70%);--color-grey-60: hsl(231, 0%, 60%);--color-grey-50: hsl(231, 0%, 50%);--color-grey-40: hsl(231, 0%, 40%);--color-grey-30: hsl(231, 0%, 30%);--color-grey-20: hsl(231, 0%, 20%);--color-grey-10: hsl(231, 0%, 10%);--color-grey-00: hsl(231, 0%, 0%);--color-grey-85-a00: hsla(231, 0%, 85%, 0%);--color-link: hsl(231, 48%, 72%);--color-link-hover: hsl(231, 48%, 48%);--color-sidebar: hsl(231, 38%, 18%);--color-sidebar-hover: hsl(231, 33%, 23%);--color-primary-shadow: hsla(231, 100%, 48%, 5%);--color-valid: hsl(97, 73%, 44%);--color-valid-dark: hsl(97, 73%, 34%);--color-warn: hsl(35, 75%, 61%);--color-warn-dark: hsl(35, 85%, 45%);--color-warn-10: hsl(35, 75%, 95%);--color-warn-50: hsl(35, 50%, 80%);--color-danger: hsl(8, 73%, 46%);--color-danger-dark: hsl(8, 73%, 36%);--color-danger-10: hsla(8, 73%, 46%, 10%);--color-danger-light: hsl(8, 53%, 56%);--color-danger-button: hsl(8, 78%, 51%);--color-field-invalid: hsl(42, 100%, 95%);--color-ml-dark: hsl(353, 89%, 49%);--color-ml: hsl(353, 79%, 59%);--color-ml-light: hsl(353, 79%, 72%);--color-cwiot-dark: hsl(198, 76%, 48%);--color-cwiot: hsl(198, 76%, 52%);--color-dww-dark: hsl(176, 46%, 44%);--color-dww: hsl(176, 46%, 49%);--color-dww-light: hsl(176, 51%, 59%);--color-dww-lighter: hsl(176, 56%, 69%);--color-cdweb-dark: hsl(126, 62%, 30%);--color-cdweb: hsl(126, 48%, 62%);--color-cdweb-light: hsl(126, 48%, 72%);--color-cdweb-lighter: hsl(126, 48%, 82%);--color-pwai-dark: hsl(37, 96%, 51%);--color-pwai: hsl(36, 96%, 61%);--color-pwai-light: hsl(36, 96%, 71%);--color-pwai-lighter: hsl(36, 96%, 81%);--color-pwf-dark: hsl(60, 1%, 24%);--color-pwf: hsl(60, 1%, 29%);--color-pwf-light: hsl(60, 1%, 39%);--color-pwf-lighter: hsl(60, 1%, 49%);--color-prototype-dark: hsl(263, 39%, 27%);--color-prototype: hsl(263, 46%, 54%);--color-prototype-light: hsl(263, 45%, 68%);--color-prototype-lighter: hsl(263, 45%, 82%);--color-subject-1: hsl(0, 68%, 53%);--color-subject-bg-1: hsl(0, 68%, 92%);--color-subject-2: hsl(41, 95%, 40%);--color-subject-bg-2: hsl(41, 95%, 90%);--color-subject-3: hsl(118, 30%, 46%);--color-subject-bg-3: hsl(118, 30%, 90%);--color-subject-4: hsl(357, 67%, 45%);--color-subject-bg-4: hsl(357, 67%, 90%);--color-subject-5: hsl(8, 70%, 54%);--color-subject-bg-5: hsl(8, 70%, 90%);--color-subject-6: hsl(202, 57%, 55%);--color-subject-bg-6: hsl(202, 57%, 90%);--color-subject-7: hsl(42, 80%, 59%);--color-subject-bg-7: hsl(42, 80%, 90%);--color-subject-8: hsl(348, 56%, 43%);--color-subject-bg-8: hsl(348, 56%, 90%);--color-subject-9: hsl(21, 73%, 50%);--color-subject-bg-9: hsl(21, 73%, 90%);--color-subject-10: hsl(330, 62%, 51%);--color-subject-bg-10: hsl(330, 62%, 90%);--color-subject-11: hsl(34, 80%, 40%);--color-subject-bg-11: hsl(34, 80%, 90%);--color-subject-12: hsl(36, 90%, 40%);--color-subject-bg-12: hsl(36, 90%, 88%);--color-subject-13: hsl(103, 26%, 37%);--color-subject-bg-13: hsl(103, 26%, 85%);--color-subject-14: hsl(213, 43%, 51%);--color-subject-bg-14: hsl(213, 43%, 90%);--color-subject-15: hsl(114, 34%, 41%);--color-subject-bg-15: hsl(114, 34%, 90%);--color-subject-16: hsl(216, 44%, 36%);--color-subject-bg-16: hsl(216, 44%, 90%);--color-subject-17: hsl(220, 49%, 26%);--color-subject-bg-17: hsl(220, 49%, 90%)}body.light{--color-sidebar: hsl(231, 5%, 94%);--color-sidebar-hover: hsl(231, 5%, 88%)}body.dark{--color-background: hsl(231, 5%, 8%);--color-primary: hsl(231, 60%, 60%);--color-primary-90: hsl(231, 54%, 55%);--color-primary-80: hsl(231, 48%, 50%);--color-primary-70: hsl(231, 42%, 45%);--color-primary-60: hsl(231, 36%, 40%);--color-primary-50: hsl(231, 30%, 35%);--color-primary-30: hsl(231, 24%, 30%);--color-primary-20: hsl(231, 18%, 25%);--color-primary-15: hsl(231, 15%, 23%);--color-primary-10: hsl(231, 12%, 10%);--color-primary-08: hsl(231, 8%, 10%);--color-primary-05: hsl(231, 5%, 7%);--color-grey-100: hsl(231, 5%, 12%);--color-grey-95: hsl(231, 3%, 11%);--color-grey-90: hsl(0, 0%, 10%);--color-grey-85: hsl(0, 0%, 15%);--color-grey-80: hsl(0, 0%, 20%);--color-grey-70: hsl(0, 0%, 30%);--color-grey-60: hsl(0, 0%, 40%);--color-grey-50: hsl(0, 0%, 50%);--color-grey-40: hsl(0, 0%, 60%);--color-grey-30: hsl(0, 0%, 70%);--color-grey-20: hsl(0, 0%, 80%);--color-grey-10: hsl(0, 0%, 90%);--color-grey-00: hsl(0, 0%, 100%);--color-grey-85-a00: hsla(231, 0%, 15%, 0%);--color-link: hsl(231, 50%, 60%);--color-link-hover: hsl(231, 70%, 75%);--color-primary-a10: hsla(0, 0%, 35%, 10%);--color-primary-a08: hsla(0, 0%, 35%, 8%);--color-primary-a05: hsla(0, 0%, 35%, 5%);--color-sidebar: hsl(231, 10%, 7%);--color-sidebar-hover: hsl(231, 10%, 10%);--color-primary-shadow: hsla(231, 0%, 0%, 10%);--color-warn-lighter: hsl(45, 2%, 22%);--color-warn-10: hsl(45, 10%, 30%);--color-warn-30: hsl(45, 10%, 20%);--color-field-invalid: hsla(20, 30%, 40%, 10%);--color-ml-dark: hsl(353, 89%, 49%);--color-ml: hsl(353, 79%, 59%);--color-ml-light: hsl(353, 79%, 72%);--color-cwiot-dark: hsl(198, 76%, 48%);--color-cwiot: hsl(198, 76%, 52%);--color-dww-dark: hsl(176, 46%, 44%);--color-dww: hsl(176, 46%, 49%);--color-dww-light: hsl(176, 51%, 59%);--color-dww-lighter: hsl(176, 56%, 69%);--color-cdweb-dark: hsl(126, 62%, 30%);--color-cdweb: hsl(126, 48%, 62%);--color-cdweb-light: hsl(126, 48%, 72%);--color-cdweb-lighter: hsl(126, 48%, 82%);--color-pwai-dark: hsl(37, 96%, 51%);--color-pwai: hsl(36, 96%, 61%);--color-pwai-light: hsl(36, 96%, 71%);--color-pwai-lighter: hsl(36, 96%, 81%);--color-pwf-dark: hsl(60, 1%, 24%);--color-pwf: hsl(60, 1%, 29%);--color-pwf-light: hsl(60, 1%, 39%);--color-pwf-lighter: hsl(60, 1%, 49%);--color-prototype-dark: hsl(263, 39%, 27%);--color-prototype: hsl(263, 46%, 54%);--color-prototype-light: hsl(263, 45%, 68%);--color-prototype-lighter: hsl(263, 45%, 82%)}main{margin-left:0;transition:none}main .wrap{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}main .wrap p i{margin-right:8px;vertical-align:1px}main .wrap p.link{font-size:14px}main .wrap .box{width:calc(100vw - 64px);max-width:600px;padding:32px 16px 16px 16px;transition:none}main .wrap .box:not(:only-child){margin-bottom:32px}main .wrap .box h1{margin-bottom:16px}main .wrap .box h1 i{font-size:.9em;color:var(--color-primary);margin-right:12px;margin-left:0;opacity:1;vertical-align:baseline}main .wrap .box h1 span{font-size:1rem}main .wrap .box h1 span img{width:32px}main .wrap .box p{color:var(--color-grey-50);max-width:400px;margin:0 auto}main .wrap .box p:not(last-child){margin-bottom:16px}main .wrap .box button{margin-bottom:1.5em}main .wrap .box label{text-align:left}main .wrap .box pre{white-space:pre;overflow:auto;text-align:left;padding:16px;background-color:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.2);border-radius:4px;margin:24px 0 0 0}main .wrap .box pre code{border:none;width:100%;padding:0;background-color:rgba(0,0,0,0);color:#666}