*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}body{display:flex;flex-direction:column;background:#fff;color:#000;font:13px/normal var(--ssp-font)}body[data-view=home] .only-tutorial,body[data-view=tutorial] .only-home{display:none!important}button{font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:default}.ssp-toolbar{flex-shrink:0}.ssp-action img[alt^="("]{order:1}.button{display:inline-block;padding:9px 10px;border:1px solid var(--ssp-border);border-radius:6px;background:#fff;color:#000;text-decoration:none;white-space:nowrap}.button--primary{border-color:var(--ssp-blue);background:var(--ssp-blue);color:#fff}.button--go{border-color:var(--ssp-green);background:var(--ssp-green);color:#fff}.button:hover:not(:disabled){filter:brightness(1.1)}.home{position:relative;display:flex;flex:1;flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:60px 20px 24px}.home>:not(.home__decoration){position:relative}.home__decoration{position:absolute;inset:0;overflow:hidden;pointer-events:none}.home__circle{position:absolute;display:block}.home__circle--teal{top:30px;left:calc(58.33% + 2.67px)}.home__circle--blue{top:237px;left:calc(66.67% + 60.33px)}.home__title{margin:0 0 26px;color:var(--ssp-blue);font-size:34px;font-weight:700}.home__lead{max-width:775px;margin:0 0 36px;font-size:20px}.progress{display:flex;align-items:center;gap:8px;margin-bottom:36px;font-size:14px}.progress__track{width:252px;height:9px;flex-shrink:0;overflow:hidden;border-radius:5px;background:#d7d7d7}.progress__bar{width:0;height:100%;border-radius:5px;background:var(--ssp-teal);transition:width .3s}.cards{display:flex;flex-wrap:wrap;gap:24px;margin:0 0 60px;padding:0;list-style:none}.card{display:flex;flex:1 1 250px;flex-direction:column;max-width:300px;min-height:311px;overflow:hidden;border:1px solid var(--ssp-border-light);border-radius:8px;background:#fff}.card__link{display:flex;flex:1;flex-direction:column;color:inherit;text-decoration:none}.card__link:hover .card__title,.card__link:focus-visible .card__title{text-decoration:underline}.card__image{display:block;width:100%;height:140px;flex-shrink:0;border-bottom:1px solid var(--ssp-border-light);background:#e8eaf0;object-fit:cover;object-position:left top}.card__body{display:flex;flex-direction:column;gap:8px;padding:14px 16px}.card__title{margin:0;color:var(--ssp-blue);font-size:14px;font-weight:700}.card__text{margin:0;color:#555;font-size:13px}.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.card__tags li{padding:3px 10px;border:1px solid var(--ssp-border-light);border-radius:20px;background:var(--ssp-grey);color:#444;font-size:11px}.card--playground{flex:1.3 1 320px;max-width:380px;border:1px dashed var(--ssp-border);background:var(--ssp-blue);color:#fff}.card--playground .card__image{border-color:var(--ssp-border);background:#dde0ea}.card--playground .card__body{gap:12px}.card--playground .card__title,.card--playground .card__text{color:#fff}.card__button{align-self:flex-start;padding:8px 18px;border-color:var(--ssp-blue);color:var(--ssp-navy);font-weight:500}.footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:auto -20px -24px;padding:20px;border-top:1px solid var(--ssp-border-light);background:#fff}.footer__logo img{display:block}.footer__text{flex:1;min-width:16em;margin:0;color:#555}.footer__links{display:flex;flex-wrap:wrap;gap:8px 20px}.footer__links a{color:var(--ssp-navy)}@media(max-width:700px){.home{padding-top:32px}.home__title{font-size:26px}.home__lead{font-size:17px}.card,.card--playground{max-width:none}}.tutorial-title{font-weight:500;white-space:nowrap}.steps{display:flex;gap:6px;margin:0;padding:0;list-style:none}.steps button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:14px;background:var(--ssp-grey);color:#000;font-size:12px}.steps button[aria-current=step]{background:var(--ssp-blue);color:#fff;font-weight:500}.steps button.done:not([aria-current]){box-shadow:inset 0 0 0 2px var(--ssp-green)}#leave-tutorial{padding:8px 18px}.workspace{display:flex;flex:1;min-height:0}.workspace__code{width:41%;flex-shrink:0}.workspace__preview{flex:1}body.without-code .workspace__code,body.without-code .workspace .ssp-splitter{display:none}.panel{z-index:3;display:flex;flex-direction:column;width:272px;flex-shrink:0;overflow:auto;padding:10px 16px 24px 20px;border-right:1px solid var(--ssp-border);background:#fff;box-shadow:2px 0 5px #00000040}.panel__count{margin:0 0 18px;font-size:11px;font-weight:500;text-transform:uppercase}.panel__title{margin:0 0 10px;color:var(--ssp-blue);font-size:22px;font-weight:700}.panel__text{font-size:14px}.panel__text p{margin:0 0 1em}.panel__text code{color:var(--ssp-orange);font-family:var(--ssp-font);font-size:13px;font-weight:500}.panel__text pre{overflow:auto;margin:0 0 1em;padding:8px 10px;border-radius:6px;background:var(--ssp-code);color:#fff}.panel__text pre code{color:inherit;font:12px/1.5 var(--ssp-mono)}.panel__hint{margin-top:12px;padding:10px 12px;border-left:3px solid var(--ssp-blue);background:#f1f4f8;font-size:13px}.panel__hint p:last-child{margin-bottom:0}.panel__nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:20px}.tasks{display:flex;flex-direction:column;gap:8px;margin:20px 0 10px;padding:0;list-style:none}.tasks li{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--ssp-border);border-radius:8px}.tasks li:before{content:"";width:12px;height:12px;flex-shrink:0;margin:1px;border:2px solid var(--ssp-border);border-radius:50%}.tasks li.done{border-color:var(--ssp-green);background:var(--ssp-green);color:#fff}.tasks li.done:before{width:14px;height:14px;margin:0;border:0;border-radius:0;background:url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='check-circle'%20clip-path='url(%23clip0_0_4)'%3e%3cpath%20id='Vector'%20d='M12.7168%205.83345C12.9832%207.14088%2012.7934%208.50012%2012.1789%209.6845C11.5644%2010.8689%2010.5625%2011.8068%209.3402%2012.3419C8.1179%2012.877%206.7491%2012.9768%205.46208%2012.6248C4.17505%2012.2728%203.0476%2011.4903%202.26773%2010.4076C1.48786%209.32496%201.10272%208.00768%201.17654%206.67543C1.25035%205.34318%201.77866%204.07651%202.67336%203.08664C3.56806%202.09677%204.77507%201.44354%206.09311%201.23589C7.41114%201.02823%208.76052%201.27871%209.91623%201.94554M5.24979%206.41651L6.99979%208.16651L12.8331%202.33318'%20stroke-width='2'%20stroke-linecap='round'%20stroke='white'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_0_4'%3e%3crect%20width='14'%20height='14'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat center/14px 14px}.hint-toggle{display:flex;align-items:center;gap:10px;width:100%;height:35px;flex-shrink:0;padding:10px 12px;border:0;border-radius:8px;background:var(--ssp-blue);color:#fff;text-align:left}.hint-toggle[hidden]{display:none}@media(max-width:900px){.ssp-status{order:10;flex-basis:100%}.workspace{flex-direction:column;overflow:auto}.workspace__code{width:auto!important;height:55vh;flex:none!important}.workspace__preview{flex:none;height:80vh}.panel{width:auto;max-height:none;overflow:visible;border-right:0;border-bottom:1px solid var(--ssp-border);box-shadow:none}.ssp-splitter{display:none}}