@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Variable.ttf) format("truetype");font-weight:300 900;font-style:normal;font-display:swap}@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-VariableItalic.ttf) format("truetype");font-weight:300 900;font-style:italic;font-display:swap}@font-face{font-family:Cascadia Code;src:url(/fonts/CascadiaCode-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{interpolate-size:allow-keywords;--neutral-50: hsl(30, 15%, 92%);--neutral-100: hsl(30, 12%, 89%);--neutral-200: hsl(30, 10%, 86%);--neutral-300: hsl(30, 8%, 83%);--neutral-400: hsl(30, 10%, 80%);--neutral-500: hsl(30, 10%, 74%);--neutral-600: hsl(30, 8%, 64%);--neutral-700: hsl(30, 6%, 52%);--neutral-800: hsl(30, 8%, 38%);--neutral-900: hsl(30, 12%, 12%);--clr-neutral-100: hsl(210 0% 96%);--clr-neutral-200: hsl(210 0% 85%);--clr-neutral-300: hsl(210 0% 74%);--clr-neutral-400: hsl(210 0% 63%);--clr-neutral-500: hsl(210 0% 50%);--clr-neutral-600: hsl(210 0% 30%);--clr-neutral-700: hsl(210 0% 18%);--clr-neutral-800: hsl(210 0% 12%);--clr-neutral-900: hsl(210 0% 7%);--clr-neutral-1000: hsl(210 0% 4%);--surface-1: var(--neutral-50);--surface-2: var(--neutral-100);--surface-3: var(--neutral-200);--surface-4: var(--neutral-300);--text-primary: var(--neutral-900);--text-secondary: var(--neutral-800);--text-muted: var(--neutral-700);--clr-text-1: color-mix( in oklab, var(--clr-neutral-100) 98%, var(--clr-primary-500) );--clr-text-2: color-mix( in oklab, var(--clr-neutral-200) 98%, var(--clr-primary-500) );--clr-text-3: color-mix( in oklab, var(--clr-neutral-200) 90%, var(--clr-primary-500) );--clr-surface-3: color-mix( in oklab, var(--clr-neutral-600) 90%, var(--clr-primary-500) );--clr-surface-2: color-mix( in oklab, var(--clr-neutral-700) 90%, var(--clr-primary-500) );--clr-surface-1: color-mix( in oklab, var(--clr-neutral-800) 90%, var(--clr-primary-500) );--clr-surface-0: color-mix( in oklab, var(--clr-neutral-900) 90%, var(--clr-primary-500) );--clr-surface--1: color-mix( in oklab, var(--clr-neutral-1000) 90%, var(--clr-primary-500) );--clr-primary-100: hsl(252, 63%, 89%);--clr-primary-200: hsl(253, 63%, 79%);--clr-primary-300: hsl(253, 62%, 68%);--clr-primary-400: hsl(253, 62%, 58%);--clr-primary-500: hsl(253, 70%, 47%);--clr-primary-600: hsl(253, 70%, 38%);--clr-primary-700: hsl(253, 69%, 28%);--clr-primary-800: hsl(253, 71%, 19%);--clr-primary-900: hsl(252, 71%, 9%);--clr-primary-desaturated-100: hsl(252, 30%, 89%);--clr-primary-desaturated-200: hsl(253, 30%, 79%);--clr-primary-desaturated-300: hsl(253, 30%, 68%);--clr-primary-desaturated-400: hsl(253, 30%, 58%);--clr-primary-desaturated-500: hsl(253, 30%, 47%);--clr-primary-desaturated-600: hsl(253, 30%, 38%);--clr-primary-desaturated-700: hsl(253, 30%, 28%);--clr-primary-desaturated-800: hsl(253, 30%, 19%);--clr-primary-desaturated-900: hsl(252, 30%, 9%);--clr-red-100: hsl(340, 100%, 92%);--clr-red-200: hsl(340, 100%, 84%);--clr-red-300: hsl(340, 100%, 75%);--clr-red-400: hsl(340, 100%, 67%);--clr-red-500: hsl(340, 100%, 50%);--clr-red-600: hsl(340, 95%, 44%);--clr-red-700: hsl(340, 93%, 35%);--clr-red-800: hsl(340, 90%, 24%);--clr-red-900: hsl(340, 90%, 12%);--clr-blue-100: hsl(210, 100%, 92%);--clr-blue-200: hsl(210, 100%, 84%);--clr-blue-300: hsl(210, 100%, 75%);--clr-blue-400: hsl(210, 100%, 67%);--clr-blue-500: hsl(210, 100%, 50%);--clr-blue-600: hsl(210, 95%, 44%);--clr-blue-700: hsl(210, 93%, 35%);--clr-blue-800: hsl(210, 90%, 24%);--clr-blue-900: hsl(210, 90%, 12%);--clr-primary-1000: hsl(256, 27%, 8%);--clr-success-300: hsl(94 62% 73%);--clr-success-400: hsl(94, 58%, 60%);--clr-success-500: hsl(94 54% 45%);--clr-warning-300: hsl(26 62% 73%);--clr-warning-400: hsl(30 58% 60%);--clr-warning-500: hsl(36 54% 45%);--clr-error-300: hsl(355 62% 73%);--clr-error-400: hsl(350 58% 60%);--clr-error-500: hsl(345 54% 45%);--clr-info-300: var(--clr-primary-300);--clr-info-400: var(--clr-primary-400);--clr-info-500: var(--clr-primary-500);--clr-text-body: var(--clr-text-3);--clr-text-heading: var(--clr-text-1);--clr-text-emphasis: var(--clr-text-2);--scrollbar-thumb: var(--clr-surface-2);--scrollbar-track: var(--clr-surface--1);--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);--fs-200: .9375rem;--fs-300: 1rem;--fs-400: 1.275rem;--fs-500: 1.35rem;--fs-600: clamp(1.62rem, 1.5041rem + .5793vw, 1.9531rem);--fs-700: clamp(1.944rem, 1.771rem + .8651vw, 2.4414rem);--fs-800: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);--fs-900: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);--size-100: clamp(.3125rem, .3125rem + 0vw, .3125rem);--size-200: clamp(.5625rem, .5408rem + .1087vw, .625rem);--size-300: clamp(.875rem, .8533rem + .1087vw, .9375rem);--size-400: clamp(1.125rem, 1.0815rem + .2174vw, 1.25rem);--size-500: clamp(1.6875rem, 1.6223rem + .3261vw, 1.875rem);--size-600: clamp(2.25rem, 2.163rem + .4348vw, 2.5rem);--size-700: clamp(3.375rem, 3.2446rem + .6522vw, 3.75rem);--size-800: clamp(4.5rem, 4.3261rem + .8696vw, 5rem);--size-900: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);--border-radius-1: .25rem;--border-radius-2: .5rem;--border-radius-3: .75rem;--border-radius-4: 1rem;--shadow-1: 0;--shadow-2: 0;--shadow-3: 0;--btn-border-radius: var(--border-radius-1);--btn-default-surface: var(--clr-surface-2);--btn-default-text: var(--clr-text-2);--btn-default-surface-hover: var(--clr-surface-3);--btn-primary-text: var(--clr-neutral-100);--btn-primary-text-hover: var(--clr-neutral-100);--btn-primary-surface: hsl(from var(--clr-primary-600) h 45% l);--btn-primary-surface-hover: hsl(from var(--clr-primary-600) h 35% 45%);--btn-error-text: white;--btn-error-text-hover: black;--btn-error-surface: hsl(from var(--clr-error-500) h 45% l);--btn-error-surface-hover: var(--clr-error-300);--link-color: var(--clr-text-1);--link-color-hover: var(--clr-primary-300);--code-editor-background: var(--clr-surface-1);--code-editor-border: var(--clr-surface-2);--code-editor-top-bar: var(--clr-surface-2);--code-editor-code-block: var(--clr-surface-2);--code-editor-code-block-border: var(--clr-surface-3);--code-editor-text: var(--clr-text-1);--profile-menu-background: var(--clr-surface-2);--profile-menu-text: var(--clr-text-1);--shadow-permanent-1: 0 .25rem 1rem -.25rem hsl(0 0 0 / .125);--shadow-permanent-2: 0 .25rem 1rem -.25rem hsl(0 0 0 / .25);--shadow-permanent-3: 0 .25rem 1rem -.25rem hsl(0 0 0 / .325)}:root[data-theme=dark]{color-scheme:dark;--neutral-50: hsl(30, 12%, 12%);--neutral-100: hsl(30, 8%, 20%);--neutral-200: hsl(30, 8%, 28%);--neutral-300: hsl(30, 8%, 36%);--neutral-400: hsl(30, 6%, 44%);--neutral-500: hsl(30, 8%, 52%);--neutral-600: hsl(30, 8%, 64%);--neutral-700: hsl(30, 10%, 74%);--neutral-800: hsl(30, 10%, 83%);--neutral-900: hsl(30, 12%, 92%);--clr-primary-100: hsl(252, 43%, 89%);--clr-primary-200: hsl(253, 45%, 79%);--clr-primary-300: hsl(253, 46%, 68%);--clr-primary-400: hsl(253, 48%, 58%);--clr-primary-500: hsl(253, 50%, 47%);--clr-primary-600: hsl(253, 50%, 38%);--clr-primary-700: hsl(253, 52%, 28%);--clr-primary-800: hsl(253, 54%, 19%);--clr-primary-900: hsl(252, 55%, 9%)}:root[data-theme=light]{color-scheme:light;--clr-neutral-1000: hsl(210, 0%, 96%);--clr-neutral-900: hsl(210, 0%, 93%);--clr-neutral-800: hsl(210, 0%, 90%);--clr-neutral-700: hsl(210, 0%, 80%);--clr-neutral-600: hsl(210, 0%, 50%);--clr-neutral-500: hsl(210, 0%, 30%);--clr-neutral-400: hsl(210, 0%, 18%);--clr-neutral-300: hsl(210, 0%, 12%);--clr-neutral-200: hsl(210, 0%, 7%);--clr-neutral-100: hsl(210, 0%, 4%);--clr-primary-900: hsl(252, 63%, 89%);--clr-primary-800: hsl(253, 63%, 79%);--clr-primary-700: hsl(253, 62%, 68%);--clr-primary-600: hsl(253, 62%, 58%);--clr-primary-500: hsl(253, 70%, 47%);--clr-primary-400: hsl(253, 70%, 38%);--clr-primary-300: hsl(253, 69%, 28%);--clr-primary-200: hsl(253, 71%, 19%);--clr-primary-100: hsl(252, 71%, 9%);--clr-success-300: hsl(94 62% 60%);--clr-success-400: hsl(94, 58%, 40%);--clr-success-500: hsl(94 54% 30%);--clr-text-1: color-mix( in oklab, var(--clr-neutral-100) 95%, var(--clr-primary-500) );--clr-text-2: color-mix( in oklab, var(--clr-neutral-300) 95%, var(--clr-primary-500) );--clr-text-3: color-mix( in oklab, var(--clr-neutral-300) 95%, var(--clr-primary-500) );--clr-surface-3: color-mix( in oklab, var(--clr-neutral-600) 95%, var(--clr-primary-500) );--clr-surface-2: color-mix( in oklab, var(--clr-neutral-700) 95%, var(--clr-primary-500) );--clr-surface-1: color-mix( in oklab, var(--clr-neutral-800) 95%, var(--clr-primary-500) );--clr-surface-0: color-mix( in oklab, var(--clr-neutral-900) 95%, var(--clr-primary-500) );--clr-surface--1: color-mix( in oklab, var(--clr-neutral-1000) 95%, var(--clr-primary-500) );--btn-primary-surface: var(--clr-primary-500);--btn-primary-surface-hover: var(--clr-primary-600);--btn-primary-text: var(--clr-neutral-900);--btn-primary-text-hover: var(--clr-neutral-900);--link-color-hover: var(--clr-primary-600);--code-editor-background: var(--clr-primary-desaturated-900);--code-editor-border: var(--clr-primary-desaturated-800);--code-editor-top-bar: var(--clr-primary-desaturated-800);--code-editor-code-block: var(--clr-primary-desaturated-900);--code-editor-code-block-border: var(--clr-primary-desaturated-700);--code-editor-text: var(--clr-neutral-1000);--code-editor-other-text: var(--clr-neutral-900);--profile-menu-background: var(--clr-surface-0);--profile-menu-background-hover: var(--clr-primary-500);--profile-menu-text: var(--clr-text-1);--profile-menu-text-hover: var(--clr-neutral-900);--shadow-1: 0 .25rem 1rem -.25rem hsl(0 0 0 / .125);--shadow-2: 0 .25rem 1rem -.25rem hsl(0 0 0 / .25);--shadow-3: 0 .25rem 1rem -.25rem hsl(0 0 0 / .325);--shadow-bottom-2: 0 1.25rem 1rem -1.25rem hsl(0 0 0 / .25)}a{color:var(--link-color)}a:is(:hover,:focus-visible){color:var(--link-color-hover)}*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;font-family:Satoshi,system-ui,sans-serif;line-height:1.6;accent-color:var(--clr-primary-500);scrollbar-gutter:stable}body{margin:0;background-color:var(--clr-surface--1);color:var(--clr-text-body);min-height:100dvh;font-size:var(--fs-400);font-weight:475}h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}h1,h2,h3,h4{color:var(--clr-text-heading);text-wrap:balance;font-weight:900}p,li{text-wrap:pretty;max-inline-size:60ch}h1,h2,h3,h4,button,input,label{line-height:1.1}img,picture,iframe{max-width:100%;display:block}iframe{margin-block:1.5rem;border-radius:var(--border-radius-1)}input,button,textarea,select{font-family:inherit;font-size:inherit}strong{color:var(--clr-text-emphasis);font-weight:800}::marker{color:var(--clr-primary-300)}details:not([class]){padding:1rem;border-radius:var(--border-radius-2);border:1px solid var(--clr-surface-2);margin-block:var(--size-400);summary{cursor:pointer;&:hover,&:focus{color:var(--clr-text-emphasis)}}}blockquote{background:var(--clr-surface-1);padding:var(--size-400);border-radius:0 var(--border-radius-2) var(--border-radius-2) 0;border-inline-start:3px solid var(--clr-info-400);margin-inline:0;position:relative}.space-between{display:flex;gap:0 var(--size-400);flex-wrap:wrap;width:100%;justify-content:space-between}.push-right{margin-left:auto}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(button,.button){display:inline-flex;cursor:pointer;text-decoration:none;padding:var(--btn-padding-block, var(--size-300)) var(--btn-padding-inline, var(--size-600));font-weight:500;font-size:var(--btn-fs, inherit);background-color:var(--btn-surface, var(--btn-default-surface));color:var(--btn-text, var(--btn-default-text));border:0;border-radius:var(--btn-border-radius);transition:scale .125s}:is(button,.button):is(:hover,:focus-visible){color:var(--btn-text-hover, var(--btn-default-text));background-color:var(--btn-surface-hover, var(--btn-default-surface-hover))}:is(button,.button):active{scale:.95}.button[data-button-theme=primary]{--btn-text: var(--btn-primary-text);--btn-text-hover: var(--btn-primary-text-hover);--btn-surface: var(--btn-primary-surface);--btn-surface-hover: var(--btn-primary-surface-hover)}.button[data-button-theme=challenge]{--btn-text: var(--btn-primary-text);--btn-text-hover: var(--btn-primary-text-hover);--btn-surface: var(--clr-blue-700);--btn-surface-hover: var(--clr-blue-500)}.button[data-button-theme=error]{--btn-text: var(--btn-error-text);--btn-text-hover: var(--btn-error-text-hover);--btn-surface: var(--btn-error-surface);--btn-surface-hover: var(--btn-error-surface-hover)}.button[data-button-size=small]{--btn-fs: var(--fs-300);--btn-padding-block: var(--size-100);--btn-padding-inline: var(--size-300)}.button-icon-only{background:var(--clr-surface--1);color:inherit;border:0;cursor:pointer;font-size:var(--fs-200);font-weight:500;display:flex;align-items:center;gap:var(--size-200, .5rem);padding:var(--size-200, .5rem) var(--size-300, .75rem);border-radius:var(--border-radius-1, .25rem);transition:background-color .2s ease}.button-icon-only:hover{background:var(--clr-surface-0)}.button-icon-only:focus-visible{outline:2px solid var(--clr-primary-400);outline-offset:2px}.callout{color:var(--clr-text-2);padding:var(--size-400);background:var(--callout-background, var(--clr-surface--1));border-radius:var(--border-radius-2);box-shadow:var(--shadow-bottom-2);position:relative;outline:2px solid var(--callout-outline, var(--clr-info-400));margin-block-start:1em}.callout:before{content:attr(data-callout-icon);position:absolute;top:0;left:0;translate:-50% var(--callout-icon-vertical-offset, -30%);font-size:1.5em;line-height:1}.callout[data-callout-icon=📝]{max-inline-size:60ch}.callout[data-callout-icon=⚠️]{--callout-outline: var(--clr-warning-400);--callout-icon-vertical-offset: -50%}.callout[data-callout-icon=🤫]{--callout-outline: var(--clr-blue-800);position:relative;block-size:calc(1lh + (var(--size-400) * 2) + 2px);overflow:clip;transition:block-size .5s;transition-behavior:allow-discrete;::marker{color:var(--clr-blue-400)}&.reveal{block-size:auto}}.callout[data-callout-icon=🤫]>:not(button){filter:blur(6px);transition:filter 1s;user-select:none}.callout[data-callout-icon=🤫].reveal>:not(button){filter:blur(0px);user-select:auto}.callout[data-callout-icon=🤫].reveal>button{transition:filter,scale,opacity,display;transition-duration:1.5s;transition-timing-function:cubic-bezier(.22,1,.36,1);transition-behavior:allow-discrete}.callout[data-callout-icon=🤫].reveal>button{display:none;opacity:0;scale:1.5;filter:blur(6px)}.hint-content{margin:0}.callout[data-callout-icon=🤫]>button{position:absolute;z-index:99;width:fit-content;height:min-content;inset:0;margin:auto}.callout[data-callout-icon=🤫]:before{content:initial}.callout.challenge{--callout-outline: var(--clr-blue-500);margin-block:2.5rem;&:before{content:"🛠️";position:absolute;left:-.125rem;top:-.5rem}}.callout .challenge-content{--grid-flow-justification: stretch;>:first-child{margin-block-start:.25em}}:target{scroll-margin-block:5lh}.flow>:first-child{margin-block-start:0}.grid-flow{display:grid;gap:var(--grid-flow-gap, 1rem);align-content:var(--grid-flow-alignment, start);justify-items:var(--grid-flow-justification, start)}.grid-flow>*{margin-block:0}.flex-group{display:flex;align-items:var(--flex-group-alignment, center);justify-content:var(--flex-group-justification, start);gap:var(--flex-group-row-gap, .5rem) var(--flex-group-column-gap, 1rem)}.primary-layout{--primary-layout-padding: 1rem;--primary-layout-narrow: 75ch;--primary-layout-content: 10ch;--primary-layout-wide: 5rem;--primary-layout-extra-wide: 8.5rem;display:grid;grid-template-columns:[full-width-start] minmax(var(--primary-layout-padding),1fr) [extra-wide-start] minmax(0,var(--primary-layout-extra-wide)) [wide-start] minmax(0,var(--primary-layout-wide)) [content-start] minmax(0,var(--primary-layout-content)) [narrow-start] min(100% - var(--primary-layout-padding) * 2,var(--primary-layout-narrow)) [narrow-end] minmax(0,var(--primary-layout-content)) [content-end] minmax(0,var(--primary-layout-wide)) [wide-end] minmax(0,var(--primary-layout-extra-wide)) [extra-wide-end] minmax(var(--primary-layout-padding),1fr) [full-width-end]}.primary-layout>*{grid-column:content}.primary-layout>[data-layout=narrow]{grid-column:narrow}.primary-layout>[data-layout=extra-wide]{grid-column:extra-wide}.primary-layout>[data-layout=wide]{grid-column:wide}.primary-layout>[data-layout=full-width]{grid-column:full-width}:where(:not(a,pre,blockquote))>code{color:var(--clr-neutral-200);background-color:var(--clr-surface-1);padding:.1em .2em;border-radius:.25rem;font-size-adjust:ex-height .48;overflow:hidden}main>:first-child{margin-block-start:0}.lesson-content>img{margin-block-start:1rem}.code-block{background:var(--code-editor-background);border-radius:var(--size-200);margin-block-start:1em}.code-block-header{color:var(--code-editor-text);padding:.5rem 1rem;font-size:var(--fs-300);display:flex;justify-content:space-between;background-color:var(--code-editor-top-bar);border-radius:var(--size-200);border:5px solid var(--code-editor-background);border-bottom:0}.copy-code{background-color:var(--clr-primary-9000);border:0;padding:.2em .5em;color:inherit;filter:grayscale(100%);border-radius:.25rem;font-weight:500}.copy-code:hover,.copy-code:focus-visible,.code-copied{background:var(--clr-neutral-100);color:var(--clr-neutral-900);filter:revert}.code-block-language-title{text-transform:uppercase;font-weight:500}.code-block-code{display:grid}.code-block-code>pre[class]{margin:0;background-color:transparent;scrollbar-color:var(--scrollbar-color)}.form-group{display:grid;gap:.5rem;margin-block-end:.5rem}input{color:var(--clr-text-1);padding:.5em .75em;background:var(--clr-surface-1);border:1px solid var(--clr-surface-2);border-radius:var(--border-radius-1);min-width:0}.muse-video-player{width:100%;height:auto;margin-block:var(--size-500);aspect-ratio:16 / 9}.cl-button{padding:.5rem}.cl-identityPreviewEditButton,.cl-formFieldInputShowPasswordButton{padding:.25rem}.cl-card{background-color:var(--clr-surface--1)}.cl-formButtonPrimary{background-color:var(--btn-primary-surface);color:var(--btn-primary-text);box-shadow:0}.cl-formButtonPrimary:is(:hover,:focus-visible){background-color:var(--btn-primary-surface-hover);color:var(--btn-primary-text-hover)}.cl-formFieldInput{background:var(--clr-surface-2);outline:3px solid var(--clr-surface-3);border-radius:var(--border-radius-1)}.cl-formFieldInput:focus{outline-color:var(--clr-primary-300)}progress{height:1ex;overflow:hidden;border-radius:100vw;border:0;background:var(--clr-neutral-600)}progress::-webkit-progress-bar{background:var(--clr-neutral-600)}progress::-webkit-progress-value{background:var(--clr-primary-400)}progress::-moz-progress-bar{background:var(--clr-primary-400)}iframe.yt{height:auto;aspect-ratio:16 / 9}[hidden]{display:none!important}.bordered{border-radius:var(--border-radius-2);border:1px solid transparent;background-color:var(--clr-surface-0);background:radial-gradient(circle at 50% 130%,var(--clr-primary-desaturated-800),var(--clr-surface-0) 50%) padding-box,linear-gradient(var(--clr-primary-desaturated-800),var(--clr-surface-0)) border-box;background-position:center}.astro-route-announcer{position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px}footer[data-astro-cid-x2jc32wt]{padding-block:var(--size-900);color:var(--clr-text-3);text-align:center;font-size:var(--fs-200);font-weight:500}footer[data-astro-cid-x2jc32wt]>p[data-astro-cid-x2jc32wt]{margin-inline:auto}.links[data-astro-cid-x2jc32wt]{display:flex;gap:var(--size-400);justify-content:center}