@layer page{@keyframes bounce{0%{transform:scaleX(.9)}to{transform:scaleY(.9)translate(-.5em)}}@keyframes wiggle{0%{transform:rotate(-8deg)}to{transform:rotate(8deg)}}*,:before,:after{box-sizing:border-box}html,body{height:100%;color:var(--base-content);background-color:var(--base-background);margin:0;padding:0}body{overflow-x:hidden}code,pre{font:inherit}img{border:var(--border-width)solid var(--background-layer)}main{padding:0 var(--grid-size)}:not(:defined){display:none}.cols-2{gap:var(--grid-size);margin:var(--grid-size)0;grid-template-columns:1fr 1fr;display:grid}@media (width<=700px){.cols-2{grid-template-rows:auto auto auto;grid-template-columns:1fr;gap:0}}.cols-3{gap:var(--grid-size);margin:var(--grid-size)0;grid-template-columns:1fr 1fr 1fr;display:grid}@media (width<=760px){.cols-3:not(.cols-3--small){display:block}}@media (width<=800px){.cols-3--small{grid-template-columns:1fr 1fr}}@media (width<=640px){.cols-3--small{display:block}}header{grid-template-columns:1fr auto auto;grid-template-rows:calc(var(--grid-size)*2);max-width:var(--max-width);margin:0 auto var(--grid-size)auto;justify-content:space-between;align-items:center;display:grid;position:relative;&:before{content:"";border-top:var(--border-width)solid var(--background-layer);bottom:calc(var(--border-width)/-2);width:100vw;position:absolute;left:calc(50% - 50vw)}& h1{text-indent:-1337px;background-image:var(--app-header-logo);height:var(--grid-size);font:inherit;background-repeat:no-repeat;background-size:contain;margin:0;position:relative;& a{width:175px;height:100%;display:block;background:0 0!important;border:none!important}}@media (width<=800px){& h1 a{width:140px}}@media (width<=540px){& h1{background-image:var(--app-header-icon);& a{width:100%}}}& nav{grid-auto-columns:auto;grid-auto-flow:column;grid-template-rows:var(--grid-size);display:grid;& a{padding:0 calc(var(--grid-size)/2);text-transform:uppercase;font-weight:700;line-height:var(--grid-size);transition:all var(--transition-time);border:none;text-decoration:none;display:inline-block;position:relative;&:before{content:"";left:calc(var(--grid-size)/2);right:calc(var(--grid-size)/2);bottom:calc(var(--border-width)*-1);border-top:var(--border-width)solid transparent;transition:all var(--transition-time);position:absolute}&:after{content:"_";top:calc(var(--grid-size)/-6);left:calc(var(--grid-size)/4);width:2ch;color:var(--accent-color-focus);transform-origin:0;animation:calc(var(--transition-time)*2)linear var(--transition-time)infinite blink;line-height:250%;transition:inherit;position:absolute;transform:scale(0)translate(-2ch)}}& a:link,& a:visited{color:var(--base-content)}& a:hover,& a:focus{padding-left:calc(var(--grid-size)*.75);padding-right:calc(var(--grid-size)*.25);&:after{transform:scale(1)}}}& nav[data-current=index] a[href=\/],& nav[data-current=meta] a[href$="/meta.html"],& nav[data-current=blog] a[href*=\/blog],& nav[data-current=docs] a[href*=\/docs],& nav[data-current=play] a[href*=\/play]{&:before{border-top-color:var(--underline-color)}&:hover,&:focus{&:before{transform:translateX(calc(var(--grid-size)*.25));border-top-color:#0000}}}}dark-mode-toggle{--outline-color:var(--underline-color);cursor:pointer;width:var(--grid-size);height:var(--grid-size);transition:color var(--transition-time),outline-color var(--transition-time),background-color var(--transition-time);margin-left:var(--grid-gap);border-radius:50%;display:inline-block;position:relative;overflow:hidden;& svg{width:calc(var(--grid-size)/2);height:calc(var(--grid-size)/2);transition:all var(--transition-time);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}&:hover,&:focus-within{background-color:var(--accent-color-background);--outline-color:var(--accent-color);color:var(--base-content)!important;& svg{transform:translate(-50%,-50%)scale(1.5)rotate(360deg)}}&:focus-within{outline:var(--border-width)solid var(--accent-color);box-shadow:0 0 1em var(--accent-color)}&:state(light) .dark{opacity:0}&:state(dark) .light{opacity:0}&:not(:state(auto)){outline:var(--border-width)solid var(--outline-color);& svg{filter:drop-shadow(0 0 .125em var(--accent-content-focus))}}}@media (width<=1000px){play-ground:before{height:var(--grid-size);line-height:var(--grid-size);background:var(--accent-color);margin:var(--grid-gap)calc(var(--grid-size)*-1 + var(--grid-gap));text-align:center;content:"This playground is more fun with wider screens ¯\\_(ツ)_/¯";display:block}}play-ground>header{padding:0 calc(var(--grid-size)/2);border:var(--border-width)solid var(--background-layer);width:100%;max-width:none;margin:0;&:before{background:var(--background-layer);top:var(--grid-gap);right:var(--grid-gap);bottom:var(--grid-gap);left:var(--grid-gap);border:none;width:auto}& h1{--app-header-logo:var(--app-header-icon);width:calc(var(--grid-size));& a{width:calc(var(--grid-size))}}}footer{margin:var(--grid-size)auto 0 auto;max-width:var(--max-width);grid-template-columns:100%;grid-template-rows:calc(var(--grid-size)*2);text-align:center;justify-content:space-between;align-items:center;display:grid;position:relative;&:before{content:"";border-top:var(--border-width)solid var(--background-layer);top:calc(var(--border-width)/-2);width:100vw;position:absolute;left:calc(50% - 50vw)}& .by:before{content:" | "}}@media (width<=640px){footer{grid-template-rows:calc(var(--grid-size)*4);& .by{display:block;&:before{content:none}}}}}:root:has(dark-mode-toggle:state(light)){--cm-line-numbers-filter:brightness(.85)}:root:has(dark-mode-toggle:state(dark)){--cm-line-numbers-filter:brightness(1.15)}details{background:var(--alternative-background-layer);border:var(--border-width)solid var(--background-layer);padding:var(--grid-size);& summary{margin:calc(var(--grid-size)*-1);padding:var(--grid-size)}& summary+*{margin-top:var(--grid-size)}}code-movie-animation{--cm-content-margin-left:4ch;--cm-content-margin-right:4ch;--cm-decoration-gutter-offset-left:-3ch;border:var(--border-width)solid var(--background-layer);transition:color var(--transition-time),border-color var(--transition-time),outline-color var(--transition-time),box-shadow var(--transition-time);background-color:var(--secondary-background-layer);outline:1px solid #0000;display:inline-block;&:hover{border-color:var(--accent-color)}&:focus-within{border-color:var(--accent-color);outline:1px solid var(--accent-color-focus);box-shadow:0 0 .333em var(--accent-color-focus)}& code-movie-runtime{width:fit-content;display:block;& .cm-animation{margin:2rem}&[controls] [slot=controls]{justify-content:start;align-items:center;gap:calc(var(--grid-gap)*2);border-top:var(--border-width)solid var(--background-layer);background-color:var(--alternative-background-layer);grid-template-rows:auto;grid-template-columns:auto auto auto;padding:1rem 2rem;display:grid}}}@media (width<=400px){code-movie-animation code-movie-runtime{& .cm-animation{margin:1rem}&[controls] [slot=controls]{padding:1rem}}}code-movie-runtime{& label{gap:var(--grid-gap);grid-template-columns:auto auto;align-items:center;display:grid}& input[type=checkbox]{place-self:stretch flex-start;min-width:1.25rem;min-height:1.25rem}& button{font:inherit;color:var(--base-content);border:var(--border-width)solid var(--background-layer);min-width:0;transition:color var(--transition-time),border-color var(--transition-time),outline-color var(--transition-time),box-shadow var(--transition-time);padding:calc(var(--grid-gap)*2);background:0 0;align-self:stretch;line-height:100%;display:inline-block;&:first-of-type:before{content:"« "}&:nth-of-type(2):after{content:" »"}&:enabled:hover{border-color:var(--accent-color)}&:disabled{opacity:.5}&:enabled:focus{outline:1px solid var(--accent-color-focus);box-shadow:inset 0 0 .333em var(--accent-color-focus),0 0 .333em var(--accent-color-focus)}}& .blackout{--cm-decoration-text-foreground-background:black;--cm-decoration-text-background-background:transparent}& .deadcode{--cm-decoration-line-background-background:none;--cm-decoration-line-foreground-backdrop-filter:blur(.75px)saturate(0);--cm-decoration-line-foreground-offset-left:var(--line-numbers-column-width)}}code-movie-animation,code-movie-highlight{& [data-cm-gutter-decoration-text] span{display:inline-block}& [data-cm-gutter-decoration-text=➡️] span{animation:calc(var(--transition-time)*2)ease-out 0s infinite alternate bounce}& [data-cm-gutter-decoration-text=✅] span{animation:calc(var(--transition-time)*2)ease-out 0s infinite alternate wiggle}& [data-cm-gutter-decoration-text=🚫] span{animation:calc(var(--transition-time)*2)ease-out 0s infinite alternate-reverse wiggle}}code-movie-highlight .cm-highlight{& .cm-box.cm-box9{width:calc(var(--line-numbers-column-width) - 1ch - var(--border-width));background:var(--base-background);border-right:var(--border-width)solid var(--background-layer);position:absolute;top:0;bottom:0;left:0;opacity:var(--has-line-numbers)!important;z-index:1!important}}