body{margin:0;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}.dotted-bkg{background-color:#fff;background-image:radial-gradient(rgba(0,0,0,.19) .7px,transparent 0);background-size:3px 3px}.unselectable .code-block{-webkit-user-select:none;-webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::-webkit-scrollbar{width:11px;border-radius:0}::-webkit-scrollbar-track{background:#b3b7c04d;border-radius:0}::-webkit-scrollbar-thumb{background:#b3b7c0e6;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#b3b7c0}.nav-home{--logo-h: 1.5rem;cursor:pointer;position:relative;display:inline-flex;align-items:center;font-family:Montserrat,Open Sans}.nav-home__logo{max-height:var(--logo-h);display:inline-block}.nav-home__text{margin-left:.5rem;font-weight:500;font-family:Montserrat,Open Sans}.page-simple{--logo-h: 1.5rem;font-family:Montserrat,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue}.page-simple__top{padding:0rem 1rem}.page-simple__top_highlight{background-image:radial-gradient(rgba(0,0,0,.15) .7px,transparent 0);background-size:3px 3px}.page-simple__header{display:flex;padding-top:.7rem}.nav-about{font-weight:500;height:var(--logo-h);display:inline-flex;align-items:center;margin-left:1rem;cursor:pointer}.page-simple__content{padding:0rem 1rem}.content-width{max-width:62rem;margin:0 auto;padding:0 1rem 0 2rem}.content-top__title{font-size:2.4rem;font-weight:500;margin:4rem 0 0;color:#000000e6}.content-top__subtitle{font-size:1rem;margin-top:.7rem;padding-bottom:3rem;max-width:45rem;line-height:1.5rem;font-weight:400;color:#000}.home-sections{display:flex;flex-wrap:wrap;column-gap:2rem;margin-top:2.5rem;margin-bottom:30vh;margin-right:-3rem}.home-section{width:19rem;max-width:19rem;margin-bottom:3rem;margin-top:1rem}.home-section__header{display:flex;margin-bottom:1.2rem}.home-section__icon{width:3.6rem;height:3.5rem;margin-right:.8rem;background-color:#9ec71e80;border-radius:100%}.home-section__icon_color2{background-color:#69a3d473}.home-section__icon img{width:97%;height:96%;fill:#000000a1;opacity:.63;position:relative;left:.2rem;top:-.05rem}.home-section__title{width:11rem;font-size:1.25rem;line-height:1.55rem;font-weight:600;color:#000c}.home-section__item{cursor:pointer;font-size:.97rem;margin-bottom:.5rem;font-weight:400;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue;color:#000000e6;font-size:.93rem;margin-bottom:.4rem}.program-menu{position:absolute;top:5.5rem;left:0;height:calc(100vh - 7rem);overflow-y:auto;width:100%;padding-bottom:20vh}.program-menugroup{margin-bottom:.5rem;padding:.5rem var(--p-menu)}.program-menugroup__title{font-weight:600;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;margin-bottom:.3rem;cursor:pointer}.program-menugroup__item{cursor:pointer;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;margin-bottom:.3rem;font-size:.95rem}.code-block{padding-top:.7rem!important;padding-bottom:.7rem!important;background:#282c34f7!important}.markdown-block .code-block.code-block_light{background:unset!important;margin-left:0!important}.code-block::-webkit-scrollbar{height:10px}.html.code-block::-webkit-scrollbar-track{background:#b3b7c033;border-radius:0}.code-block::-webkit-scrollbar-thumb{background:#b3b7c080;border-radius:0}.markdown-block{overflow:hidden;max-width:100%}.markdown-block code{background-color:#0000000f;border-radius:2px;border:1px solid rgba(0,0,0,.02)}.markdown-block pre.code-block code{background-color:transparent}.markdown-block mark code{background-color:#0000!important;border:0!important;padding:0!important}.markdown-block mark{background-color:#98cd7280}.mark-inside code{padding:0}.markdown-block strong{font-weight:600;margin-bottom:-.5rem}.markdown-block .code-block{margin-left:1.9rem!important}.markdown-image{padding:0 0 0 1.9rem}.markdown-image img,.markdown-image_fullwidth img{border:1px solid rgba(0,0,0,.1);margin-right:3px;border-radius:1px}.markdown-image_fullwidth{padding-left:0}.markdown-block p,.markdown-block ul,.markdown-block ol{margin:.8rem 0}.program-section-title{font-size:2.1rem;font-weight:700;scroll-margin-top:5rem;color:#000000d9}.program-item{max-width:100%;display:block}.program-item__main{padding-left:2rem;padding-right:2rem;margin-bottom:2.5rem}.program-item__content{line-height:1.6rem}.program-item__title{font-weight:700;font-size:1.3rem;margin-bottom:.1rem;scroll-margin-top:2rem;color:#000000e6}.highlight{background-color:#98c3794d;background-color:#9ec71e33;border-radius:1px;transition:background-color .5s ease}.collapse.collapse-hint{margin-top:0rem;margin-bottom:.7rem}.collapse-hint .collapse-content{padding-top:.2rem}.collapse-similar{margin-top:-.5rem;margin-bottom:1.5rem}.collapse-similar .collapse-content{margin-top:.5rem;margin-bottom:.5rem;border-left:2px dashed rgba(75,148,203,.5);border-left:2px solid rgba(75,148,203,.5);margin-left:.45rem}.collapse-similar .collapse-content{padding-left:1.5rem}@media screen and (max-width: 1000px){.program-item{display:block}.program-item__extra{margin-left:4rem;margin-bottom:2rem;padding:1rem 2rem;max-width:unset;width:unset}.program-item__extra_empty{display:none}}.collapse-toggle{cursor:pointer;display:flex;align-items:center;color:#9cc67d;color:#7da6c6;color:#5c97c5;color:#4b94cb;font-weight:600;font-size:.97rem;margin-left:-.3rem}.collapse-icon{margin-right:.2rem}.task-label{position:relative;cursor:pointer}.task-label__toggle{cursor:pointer}.task-label__content{width:10rem;position:absolute;background-color:#fff;padding:.5rem 1rem}.task-label__icon{font-size:1.9rem;position:relative;top:.5rem;margin-top:-.2rem}.task-label__id{font-weight:700;margin-right:.3rem}.task-label_done .task-label__icon{font-size:1.7rem;margin-right:.2rem;margin-top:0;color:#9ec71e}.task-label_done .task-label__id{color:#93ba1b}.practice-task{line-height:1.55rem;margin-bottom:.8rem}.practice-task_info{margin-bottom:1rem}.practice-task_midtitle{font-weight:600;margin-top:1rem;margin-bottom:.4rem}.practice-task_example{margin-left:2.9rem;position:relative}.practice-task__bullet{position:absolute}.practice-task__bullet:before{content:"";width:6px;height:6px;background:#000;border-radius:50%;position:absolute;left:-1.1rem;top:.6em}.markdown-block_practice-task mark{border-radius:2px;padding:0 .15rem;background-color:#98cd7280}.markdown-block_practice-task i code{display:inline-block;padding:.1rem .2rem 0;border-radius:2px;background:#282c34d9;color:#fff}.markdown-block_practice-task ul{margin-top:.5rem}.practice{position:fixed;top:0;width:35vw;right:0;height:100vh}@media screen and (max-width: 700px){.program.program_new-layout .practice_closed{width:4rem!important;max-width:5rem!important;box-shadow:none}.practice_closed .practice-class{display:none}}.practice-menu__toggle{display:flex;align-items:center;justify-content:center;padding:.16rem!important;border-color:transparent!important;display:none}@media screen and (max-width: 700px){.practice-menu__toggle{display:flex}}.practice-menu{position:fixed;right:1.7rem;top:6rem;width:2.35rem}.practice-menu__item{background-color:transparent;color:#000c;margin-bottom:.7rem;width:100%;text-align:center;font-weight:700;position:relative;font-size:.93rem;line-height:1.2rem}.practice-menu__item:not(:first-child):not(:nth-child(2)):before{content:"";background-color:#000000b3;width:2px;height:.7rem;position:absolute;top:-.7rem;left:1.05rem}.practice-menu__item_project:not(:first-child):not(:nth-child(2)):before{top:-.9rem;left:1.05rem}.practice-menu__item_active .practice-menu__diamond{background-color:#282c34e0!important;border-color:transparent;color:#fff}.practice-menu__diamond:hover{background-color:#0000000d}.practice-menu__project-icon{position:absolute;top:-.5rem;left:1.5rem;font-size:1.5rem;font-weight:700;color:#282c34e0}.practice-menu__diamond{position:relative;border:2px solid rgba(0,0,0,.7);border-color:#282c34e0;border-radius:100%;background-color:#fff;cursor:pointer;padding:.4rem .1rem}.practice-menu__item_active .practice-menu__diamond{background-color:#282c34e0!important}.practice-menu__item_project .practice-menu__diamond{transform:rotate(45deg);display:flex;align-items:center;justify-content:center;border-radius:.5rem;width:2.2rem;height:2.2rem}.practice-menu__item_project{margin:.9rem 0}.practice-menu__item_project .practice-menu__diamond-inner{transform:rotate(-45deg)}.practice-class{height:100vh;overflow-y:auto;padding:5.5rem 2rem 3rem 1rem}.practice-class__wrap{max-width:500px;padding-bottom:30vh;margin-right:calc(6vw - 2rem);margin-left:calc(3vw - 1.5rem)}@media screen and (max-width: 700px){.practice-class__wrap{margin-right:calc(6vw + -0rem);margin-left:calc(3vw - .5rem)}}.practice-class__title{font-weight:700;font-size:1.3rem;margin-bottom:1rem}.practice-class__title .material-icons{font-size:2rem;top:.5rem;position:relative;margin-right:.2rem}.practice-tasks__title{font-weight:700;font-size:1.2rem;margin-bottom:.2rem}.practice-tasks__title_m{font-size:1rem}.practice-tasks{margin-bottom:5rem}.program{display:flex;--w-menu: 250px;--w-menu-closed: 40px;--p-menu: 1rem;--w-extra: 33vw;--p-content-main: 5rem;padding-left:var(--w-menu);--center-width: 55vw;--right-width: 45vw;--w-menu-calc: var(--w-menu-closed)}@media screen and (min-width: 900px){.program_menu-open{--center-width: 55vw;--right-width: 45vw;--w-menu-calc: var(--w-menu)}}.program_menu-closed{padding-left:var(--w-menu-closed)}.program-left{top:0;width:var(--w-menu);min-height:100vh;height:100vh;flex-shrink:0;position:fixed;left:0;padding-left:var(--p-menu)}.program_menu-closed .program-left{width:var(--w-menu-closed);background-image:none;background-color:#fff}.program-menu-toggle{margin-top:1rem;cursor:pointer;align-items:center;display:flex}.program-menu-toggle__text{font-weight:500}.program-left .nav-home{margin-top:.7rem}.program-center{height:100vh;min-height:100vh;max-width:800px;flex-grow:1;padding-bottom:35vh;padding-right:2rem;overflow-y:auto}.program-nav{display:flex;height:5rem}@media screen and (max-width: 750px){.program-left{z-index:1}.program_menu-open .program-left{box-shadow:5px 5px 10px #0000000d}.program-center{position:absolute;left:-1rem;z-index:0}.program-item__main{padding-right:2rem}}.program_new-layout.program_menu-closed .program-center{width:calc(var(--center-width) - var(--w-menu-calc) - 0*13px);max-width:min(800px,calc(var(--center-width) - var(--w-menu-calc) - 0*13px));padding-right:calc(4vw - 2rem);padding-left:calc(2vw - 1rem);left:var(--w-menu-calc)}.program_new-layout.program_menu-closed .practice{width:var(--right-width)}.program_new-layout.program_menu-open .program-center{width:calc(var(--center-width) - var(--w-menu-calc) * .5 - 0*13px);max-width:calc(var(--center-width) - var(--w-menu-calc) * .5 - 0*13px);padding-right:calc(3vw - 1rem);padding-left:calc(3vw - 1rem);left:var(--w-menu-calc)}.program_new-layout.program_menu-open .practice{width:calc(var(--right-width) - var(--w-menu-calc) * .5)}.program_new-layout .program-menu{top:0;padding-top:5.5rem;height:100vh}.program_new-layout .program-menu-toggle{z-index:4;position:absolute}.program_new-layout .nav-home{z-index:4}.program_menu-open .program-left__bkg{background-color:#fff;width:calc(100% - 2rem);height:5.5rem;position:absolute;left:0;z-index:4}@media screen and (max-width: 900px){.program_new-layout .program-left{z-index:2}.program_new-layout .program-center{position:absolute;left:-1rem;z-index:0}}@media screen and (max-width: 700px){.program_new-layout .practice{z-index:1;box-shadow:-5px 5px 10px #0000000d;background-color:#fff;width:600px!important;max-width:85vw!important}.program_new-layout .program-center{position:absolute;left:0rem!important;padding-left:1.5rem!important;z-index:0!important;width:100vw!important;max-width:calc(100vw - 2rem)!important}.program_new-layout .program-search{display:none}.program_new-layout .program-item__main{padding-right:2rem}}@media screen and (min-width: 400px) and (max-width: 700px){.program_new-layout .program-item__main{padding-right:5rem}}.settings{padding:3rem 2rem}.settings__input{margin-right:.5rem}html{font-size:14px}.warmup{max-width:40rem;padding:0 2rem;margin:2rem auto;font-family:sans-serif;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;padding-bottom:30vh}.warmup-header{display:flex;justify-content:space-between;align-items:center}.warmup-topnav{position:fixed;top:.75rem;right:1.25rem;display:flex;gap:1rem;z-index:100}.warmup-nav-link{text-decoration:none;font-size:.9rem}.warmup-nav-link:hover{text-decoration:underline}.warmup-collapse-btn{all:unset;cursor:pointer;color:#808cbb;text-decoration:underline;font-size:.85rem;font-weight:400}.section{margin-bottom:2rem}.project-section{margin-bottom:.5rem}.warmup-h3{margin:.5rem 0}.js-project-title{margin:.5rem 0;font-size:1.07rem;color:#000000d9}.warmup-ol{margin:.6rem 0 1rem}.task{margin-bottom:.9rem}.task-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}.task-row button{flex-shrink:0}.task-answer{margin-top:.25rem;padding:.5rem;background:#f4f4f4;border-radius:4px}.section-header{display:flex;align-items:baseline;gap:.75rem;justify-content:space-between}.section-actions{display:flex;gap:.5rem}.section-header button{all:unset;cursor:pointer;color:#4a6cf7;color:#808cbb;text-decoration:underline}.section-header button:nth-child(2){all:unset;cursor:pointer;color:#808cbb;text-decoration:underline}.jswarmup-icon{font-size:1.3rem}.jswarmup-icon_task{font-size:1.5rem;font-weight:200;color:#000000d9;position:relative;top:.4rem;margin-right:.05rem}.jswarmup-icon_project{font-size:1.6rem;font-weight:200;color:#000000c4;position:relative;top:.4rem;margin-right:0rem}.jswarmup-label{cursor:pointer;margin-right:.4rem}.jswarmup-label-id{font-weight:700;color:#000000d9}.jswarmup-icon_done span{color:#9ec71e}.jswarmup-task-text{line-height:1.6rem}.jswarmup-button-answer{all:unset;cursor:pointer;padding:.1rem;position:relative;top:.3rem}.task-row-buttons{display:flex;align-items:center;gap:.4rem;flex-shrink:0}.task-textarea-inline{width:15rem;min-width:15rem;max-width:15rem;min-height:1.8rem;height:1.8rem;resize:none;font-size:.85rem;padding:.2rem .4rem;vertical-align:middle}.jswarmup-codeblock{background-color:#282c34f7!important}.task-check{margin-top:.5rem;display:flex;flex-direction:column;gap:.4rem}.task-textarea{width:100%;min-height:5rem;font-family:monospace;font-size:.9rem;padding:.4rem;box-sizing:border-box;resize:vertical;border:1px solid #ccc;border-radius:4px}.task-check-btn{align-self:flex-start}.task-feedback{padding:.5rem .75rem;background:#f0f4ff;border-left:3px solid #4a6cf7;border-radius:4px;white-space:pre-wrap}.task-row em{color:#3f5dd7}.task-row strong{font-weight:650}.settings-accessible .dotted-bkg{background-color:#f8f8f8;background-image:none}.sandbox-top{padding:2rem 3rem}.sandbox-top__columns{display:flex;gap:3rem;align-items:flex-start}.sandbox-help{flex:1;min-width:0;margin-top:.3rem;max-width:40rem}.sandbox-help .markdown-block{line-height:1.7rem}.html-project{margin-bottom:3rem;max-width:30rem}.html-project-title{margin-bottom:0rem}.sandbox{display:flex;height:100vh;font-family:monospace}.sandbox-task{flex:1;min-width:0;max-width:30rem}.sandbox__editors{display:flex;flex-direction:column;width:50%;border-right:2px solid #ddd}.sandbox__editor{display:flex;flex-direction:column;flex:1;overflow:hidden}.sandbox__editor+.sandbox__editor{border-top:2px solid #ddd}.sandbox__label{display:flex;align-items:center;justify-content:space-between;padding:5px 12px;font-size:12px;font-weight:600;letter-spacing:1px;background:#f4f4f4;border-bottom:1px solid #ddd;color:#555}.sandbox__code-editor{display:flex;position:relative;flex:1;overflow:hidden;background:#1e1e1e;background:#23272e}.sandbox__code-gutter{width:3em;overflow:hidden;flex-shrink:0;border-right:1px solid rgba(255,255,255,.07);background:#23272e}.sandbox__code-gutter-inner{padding-top:1em}.sandbox__code-gutter-num{text-align:right;padding-right:.6em;color:#555e6e;-webkit-user-select:none;user-select:none}.sandbox__code-area{flex:1;position:relative;overflow:hidden}.sandbox__code-editor>*,.sandbox__code-editor pre,.sandbox__code-editor code,.sandbox__code-editor span{font-family:Courier New,monospace!important;font-size:13px!important;line-height:1.6!important;-moz-tab-size:2;tab-size:2}.sandbox__code-area>div{height:100%}.sandbox__code-textarea{position:absolute;top:0;right:0;bottom:0;left:0;resize:none;border:none;outline:none;padding:1em;font-family:Courier New,monospace;font-size:13px;line-height:1.6;background:transparent;color:transparent;caret-color:#fff;overflow:auto;white-space:pre}.sandbox__preview{flex:1;display:flex;flex-direction:column}.sandbox__run{padding:2px 20px;background:#7ab648;color:#fff;border:none;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;margin-top:-2px;margin-bottom:-5px}.sandbox__run:hover:not(:disabled){background:#6aa33e}.sandbox__run:disabled{background:#bbb;cursor:default}.sandbox__open-btn{margin-left:1rem;padding:3px 14px;background:#7ab648;color:#fff;border:none;border-radius:4px;font-size:.85rem;font-weight:600;cursor:pointer;vertical-align:middle}.sandbox__open-btn:hover{background:#6aa33e}.sandbox__back-btn{display:inline-block;margin-bottom:1rem;background:none;border:none;cursor:pointer;color:#555;font-size:.9rem;padding:0}.sandbox__back-btn:hover{color:#222}.sandbox-top__title{margin-top:0;margin-bottom:0}.sandbox-feedback{margin-top:.75rem;font-size:.875rem;border-left:3px solid #e05c5c;padding-left:.75rem;color:#c0392b}.sandbox-feedback_errors{list-style:none;padding-left:.75rem;margin:.75rem 0 0}.sandbox-feedback_errors li+li{margin-top:.25rem}.sandbox__preview iframe{flex:1;border:none;width:100%}.sandbox__code-textarea::-webkit-scrollbar{height:12px;border-radius:0}.sandbox__code-textarea::-webkit-scrollbar-track{background:#b3b7c000;border-radius:0;cursor:pointer}.sandbox__code-textarea::-webkit-scrollbar-thumb{background:#a0a0a099;border-radius:0;cursor:grab}.sandbox__code-textarea::-webkit-scrollbar-thumb:hover{background:#a0a0a0e6}.color-picker{margin-top:1rem;-webkit-user-select:none;user-select:none;width:220px}.color-picker__sv{position:relative;width:100%;height:160px;border-radius:4px;overflow:hidden;cursor:crosshair}.color-picker__sv-white{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,#fff,transparent)}.color-picker__sv-black{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#000,transparent)}.color-picker__sv-cursor{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0006;transform:translate(-50%,-50%);pointer-events:none}.color-picker__hue{position:relative;width:100%;height:14px;margin-top:10px;border-radius:7px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:pointer}.color-picker__hue-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 0 0 1px #00000059,0 1px 3px #0000004d;transform:translate(-50%,-50%);pointer-events:none}.color-picker__output{display:flex;align-items:center;gap:.6rem;margin-top:10px}.color-picker__swatch{width:24px;height:24px;border-radius:4px;border:1px solid rgba(0,0,0,.15);flex-shrink:0}.color-picker__hex,.color-picker__rgb{font-size:.8rem;color:#444}.sandbox__code-editor pre{background:#1e1e1e!important;background:#23272e!important}