*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}.fancy-underline{position:relative}.fancy-underline:after{position:absolute;content:"";width:100%;height:5px;bottom:-2px;left:0;right:0;background-color:rgb(var(--body--accent, 255, 0, 0));opacity:.75;transform:rotate(-3deg) translateY(3px);transition:all .3s}.fancy-underline.secondary:after{background-color:rgb(var(--body--accent-secondary))}.fancy-underline.ternary:after{background-color:rgb(var(--body--background-secondary))}.fancy-underline.quaternary:after{background-color:rgb(var(--body--background-accent))}.fancy-underline:hover:after{transform:rotate(-3deg) translateY(6px)}.accent{font-weight:700;color:rgb(var(--body--accent))}.accent-secondary{font-weight:700;color:rgb(var(--body--accent-secondary))}ul.blog-list{display:flex;flex-wrap:wrap;gap:calc(var(--spacing) * 2);list-style-type:none;margin:0;padding:0}ul.blog-list li{width:calc(50% - var(--spacing))}ul.blog-list li *{text-decoration:none;transition:.2s ease}ul.blog-list li:first-child{width:100%;margin-bottom:var(--spacing);text-align:center}ul.blog-list li:first-child img{width:100%}ul.blog-list li .title{margin-top:var(--spacing);font-size:2rem;color:rgb(var(--body--text));font-weight:700}ul.blog-list li:hover .title{color:rgb(var(--body--accent))}ul.blog-list li:first-child .title{font-size:2.369rem}ul.blog-list li img{border-radius:var(--border--radius)}ul.blog-list li a{display:block}.title{margin:0;line-height:1}.date{margin:0;color:rgb(var(--body--text-secondary))}ul.blog-list li a:hover h4,ul.blog-list li a:hover .date{color:rgb(var(--body--accent))}ul.blog-list a:hover img{box-shadow:var(--box-shadow)}@media(max-width:720px){ul.blog-list{gap:var(--spacing)}ul.blog-list li{width:100%;text-align:center}ul.blog-list li:first-child{margin-bottom:0}ul.blog-list li:first-child .title{font-size:1.563em}}.pager{display:flex;--border-size: 2px}.pager>*{position:relative;padding:1em;border:var(--border-size) solid var(--color-background-secondary);transition:all .3s}.pager>.disabled{cursor:not-allowed}.pager>.disabled .pager-icon{display:none}.pager>*:hover{background-color:var(--color-background-secondary)}.pager>.pager-back:not(.disabled):hover>.pager-icon{animation:arrow-bounce-left 2s infinite}.pager>.pager-forward:not(.disabled):hover>.pager-icon{animation:arrow-bounce-right 2s infinite}.pager>.pager-back{flex:1}.pager>.pager-forward{flex:1;text-align:end;border-left:none}.pager .pager-title{font-size:1.25em}.pager .pager-description{font-size:.85em}.pager-back>.pager-icon{position:absolute;top:calc(50% - 2ch);left:-5ch;padding:1ch}.pager-forward>.pager-icon{position:absolute;top:calc(50% - 2ch);right:-5ch;padding:1ch}.pager a{color:var(--body--accent);text-decoration:none}body{--colour-1: #E63946;--colour-2: #2A9D8F;--colour-3: #1B8AAE;--colour-4: #E76F51;--colour-5: #6BBF9A;--colour-6: #E9C46A;--colour-7: #9B59B6;--colour-8: #5DADE2;--colour-9: #E67E22;--colour-10: #52BE80;--transition-length-default: .3s;--transition-timing-default: ease-in-out}.text-uppercase{text-transform:uppercase}.text-larger{font-size:1.5em}.text-larger-2{font-size:2em}.text-smaller{font-size:.75em}.text-gradient{font-weight:700;background-image:linear-gradient(to right,var(--colour-1),var(--colour-6),var(--colour-9),var(--colour-4));background-size:200% auto;background-position:0% center;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;color:red;transition:background-position var(--transition-length-default) var(--transition-timing-default);&:hover{background-position:100% center}}.text-dots{font-weight:700;background-image:radial-gradient(var(--colour-3) 1px,transparent 1px);background-size:3px 3px;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;&:hover{animation:text-dots-move 1s linear infinite}}@keyframes text-dots-move{0%{background-position:0px 0px}to{background-position:12px 12px}}.text-lines-horizontal{background-size:3px 3px;background-image:repeating-linear-gradient(0deg,var(--colour-3),var(--colour-3) 1px,transparent 1px,transparent);font-weight:700;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;&:hover{animation:text-lines-move 1s linear infinite}}@keyframes text-lines-move{0%{background-position:0px 0px}to{background-position:6px 6px}}.text-lines-vertical{background-size:3px 3px;background-image:repeating-linear-gradient(to right,var(--colour-3),var(--colour-3) 1px,transparent 1px,transparent);font-weight:700;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;&:hover{animation:text-lines-move 1s linear infinite}}.text-image{font-weight:700;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.text-cycle-colours{white-space:nowrap;font-weight:700;>:nth-child(10n+1){color:var(--colour-1)}>:nth-child(10n+2){color:var(--colour-2)}>:nth-child(10n+3){color:var(--colour-3)}>:nth-child(10n+4){color:var(--colour-4)}>:nth-child(10n+5){color:var(--colour-5)}>:nth-child(10n+6){color:var(--colour-6)}>:nth-child(10n+7){color:var(--colour-7)}>:nth-child(10n+8){color:var(--colour-8)}>:nth-child(10n+9){color:var(--colour-9)}>:nth-child(10n+10){color:var(--colour-10)}}.text-cycle-position{white-space:nowrap;>:nth-child(6n+1){position:relative;top:0}>:nth-child(6n+2){position:relative;top:.1em}>:nth-child(6n+3){position:relative;top:.15em}>:nth-child(6n+4){position:relative;top:-.05em}>:nth-child(6n+5){position:relative;top:-.2em}>:nth-child(6n+6){position:relative;top:-.1em}}.text-cycle-position-animated{white-space:nowrap;>:nth-child(6n+1){position:relative;animation:moveUpDown 1s infinite}>:nth-child(6n+2){position:relative;animation:moveUpDown 1s -.15s infinite}>:nth-child(6n+3){position:relative;animation:moveUpDown 1s -.3s infinite}>:nth-child(6n+4){position:relative;animation:moveUpDown 1s -.45s infinite}>:nth-child(6n+5){position:relative;animation:moveUpDown 1s -.6s infinite}>:nth-child(6n+6){position:relative;animation:moveUpDown 1s -.75s infinite}}@keyframes moveUpDown{0%,to{top:0}50%{top:-.2em}}.text-cycle-position-animated-stepped{white-space:nowrap;>:nth-child(7n+1){position:relative;animation:moveUpDown 1s infinite}>:nth-child(7n+2){position:relative;animation:moveUpDown 1s -.15s infinite}>:nth-child(7n+3){position:relative;animation:moveUpDown 1s -.3s infinite}>:nth-child(7n+4){position:relative;animation:moveUpDown 1s -.45s infinite}>:nth-child(7n+5){position:relative;animation:moveUpDown 1s -.6s infinite}>:nth-child(7n+6){position:relative;animation:moveUpDown 1s -.75s infinite}>:nth-child(7n+7){position:relative;animation:moveUpDown 1s -.8s infinite}}.text-underline{text-decoration:underline;text-decoration-thickness:.2em;text-underline-offset:.2em;transition:text-underline-offset var(--transition-length-default) var(--transition-timing-default);&:hover{text-underline-offset:.4em}}.text-underline-dashed{text-decoration-style:dashed}.text-underline-dotted{text-decoration-style:dotted}.text-underline-wavy{text-decoration-style:wavy}.text-underline-double{text-decoration-style:double}.text-underline-solid{text-decoration-style:solid}.text-colour-1{color:var(--colour-1)}.text-colour-2{color:var(--colour-2)}.text-colour-3{color:var(--colour-3)}.text-colour-4{color:var(--colour-4)}.text-colour-5{color:var(--colour-5)}.text-colour-6{color:var(--colour-6)}.text-colour-7{color:var(--colour-7)}.text-colour-8{color:var(--colour-8)}.text-colour-9{color:var(--colour-9)}.text-colour-10{color:var(--colour-10)}.text-shadow-layers{color:#fff;font-weight:700;text-shadow:0px 0px 2px black,-3px -3px 0 var(--colour-1),-6px -6px 0 var(--colour-2),-6px -6px 0 var(--colour-5),-6px -6px 0 var(--colour-6);transition:text-shadow var(--transition-length-default) var(--transition-timing-default);&:hover{text-shadow:0px 0px 2px black,-3px -3px 0 var(--colour-3),-6px -6px 0 var(--colour-4),-9px -9px 0 var(--colour-5),-12px -12px 0 var(--colour-6)}}.text-typewriter{font-family:monospace;overflow:hidden;border-right:.1em solid orange;white-space:nowrap;animation:typing 5s steps(var(--characters, 40),end) infinite,blink-caret .75s step-end infinite}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:orange}}@keyframes typing{0%{width:0}to{width:100%}}.pencil-underline{position:relative;display:inline-block;&:before{transition:inset var(--transition-length-default) var(--transition-timing-default)}&:hover:before{inset:-4px}}.pencil-underline:before{content:"";position:absolute;inset:0;border-bottom:2px solid #333;filter:url(#pencil)}.pencil-circle{position:relative;display:inline-block;&:before{transition:inset var(--transition-length-default) var(--transition-timing-default)}&:hover:before{inset:-8px}}.pencil-circle:before{content:"";position:absolute;inset:-4px;border:2px solid #333;border-radius:50%;filter:url(#pencil)}.text-gradient-animated{background-image:linear-gradient(45deg,#2455eb,#24ddeb,#59eb24);background-size:600% 600%;animation:GradientBackground 10s ease infinite}@keyframes GradientBackground{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.text-shadow-signage{color:var(--color-1);line-height:1;font-family:Rancho,cursive;font-weight:700;text-shadow:.02em .03em #fff,.04em .05em #1B8AAE;transition:text-shadow var(--transition-length-default) var(--transition-timing-default);&:hover{text-shadow:-.02em .03em #fff,-.04em .05em #1B8AAE}}.text-shadow-cutout{color:#fff;line-height:1;font-weight:700;text-shadow:0px 0px 2px black,-1px 1px #1B8AAE,-2px 2px #1B8AAE,-3px 3px #1B8AAE,-4px 4px #1B8AAE,-5px 5px #1B8AAE,-6px 6px #1B8AAE,-7px 7px #1B8AAE,-8px 8px #1B8AAE,-9px 9px #1B8AAE,-10px 10px #1B8AAE,-11px 11px #1B8AAE,-12px 12px #1B8AAE,-13px 13px #1B8AAE,-14px 14px #1B8AAE,-15px 15px #1B8AAE,-16px 16px #1B8AAE;transition:text-shadow var(--transition-length-default) var(--transition-timing-default);&:hover{text-shadow:0px 0px 2px black}}.text-shadow-layers-2{--color: hsl(282, 38.91%, 53.14%);color:hsla(from var(--color) h s l / 100%);color:#fff;line-height:1;font-weight:700;text-shadow:0px 0px 2px black,3px 3px 0 hsla(from var(--color) h s l / 80%),6px 6px 0 hsla(from var(--color) h s l / 60%),9px 9px 0 hsla(from var(--color) h s l / 40%),12px 12px 0 hsla(from var(--color) h s l / 20%);transition:text-shadow var(--transition-length-default) var(--transition-timing-default);&:hover{text-shadow:0px 0px 2px black,-3px -3px 0 var(--colour-3),-6px -6px 0 var(--colour-4),-9px -9px 0 var(--colour-5),-12px -12px 0 var(--colour-6)}}.text-shadow-outline{color:transparent;-webkit-text-stroke:1px black;line-height:1;font-weight:700}.text-reflection{font-weight:700;position:relative;white-space:nowrap;line-height:.8em;&:before{content:attr(content);position:absolute;inset:0;transform:rotatex(180deg) translate(-8px) translatey(15px) skew(135deg);transform-origin:50% 100%;white-space:nowrap;mask:linear-gradient(transparent 20%,rgba(255,255,255,.7) 95%);transition:transform var(--transition-length-default) var(--transition-timing-default)}&:hover:before{transform:rotatex(180deg) translate(6px) translatey(15px) skew(215deg)}}@font-face{font-family:Atkinson;src:url(/fonts/atkinson-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Atkinson;src:url(/fonts/atkinson-bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}body:not([class^=theme-]){--header--background: 255, 255, 255;--header--background-secondary: 219, 219, 219;--header--text: 15, 18, 25;--header--text-secondary: 96, 115, 159;--header--accent: 245, 221, 144;--header--accent-secondary: 88, 107, 164;--body--background: 255, 255, 255;--body--background-secondary: 229, 233, 240;--body--background-accent: 162, 123, 37;--body--background-gradient: rgba(var(--body--background-secondary), 50%), #fff;--body--text: 15, 18, 25;--body--text-secondary: 96, 115, 159;--body--accent: 205, 181, 104;--body--accent-secondary: 88, 107, 164;--box-shadow: 0 2px 6px rgba(var(--body--background-secondary), 25%), 0 8px 24px rgba(var(--body--background-secondary), 33%), 0 16px 32px rgba(var(--body--background-secondary), 33%)}body{font-family:Atkinson,sans-serif;margin:0;padding:0;text-align:left;background-size:100% 600px;word-wrap:break-word;overflow-wrap:break-word;background-color:rgb(var(--body--background));color:rgb(var(--body--text));font-size:20px;line-height:1.7;--border--radius: 12px;--spacing: 8px;position:relative}mini-map{--minimap-heading: rgba(0, 0, 0, .5);--minimap-text: rgba(0, 0, 0, .3)}main{width:720px;max-width:calc(100% - 2em);margin:auto}h1,h2,h3,h4,h5,h6{margin:calc(var(--spacing) * 3) 0 var(--spacing) 0;color:rgb(var(--header--text));line-height:1.2}h1{font-size:3em}h2{font-size:2em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1.2em}strong,b{font-weight:700}a{color:rgb(var(--body--accent))}a:hover{color:rgb(var(--body--accent-secondary))}p{margin-bottom:var(--spacing)}.prose>p{margin-bottom:calc(var(--spacing) * 2)}ol,ul{margin-block-start:var(--spacing);margin-block-end:calc(var(--spacing) * 4)}.prose{display:flex;flex-direction:column;align-items:center}.prose>*,.prose>astro-island>*{width:100%;max-width:720px}.prose>pre{min-width:min(720px,100%);overflow:scroll}.prose>pre,.prose>code,.prose>blockquote,.prose>muti-tab-code{max-width:100%;width:auto;margin-bottom:calc(var(--spacing) * 2);margin:0 64px 32px}.full-bleed{width:100%;max-width:100%;margin-bottom:var(--spacing);.sp-wrapper{flex:1}@media screen and (max-width:900px){.sp-stack{min-width:100%}}}.half-bleed{width:100%;max-width:min(100%,1200px);margin-bottom:var(--spacing);.sp-wrapper{flex:1}}textarea{width:100%;font-size:16px}input{font-size:16px}table{width:100%}img{max-width:100%;height:auto;border-radius:var(--border--radius)}code{padding:2px 5px;background-color:rgb(var(--body--background-secondary));border-radius:var(--border--radius)}pre{padding:calc(var(--spacing) * 2);border-radius:var(--border--radius);width:fit-content;max-width:100%;line-height:1.5em;font-size:14px;margin-bottom:calc(var(--spacing) * 2)}pre>code{all:unset}.sp-wrapper pre{padding:0}blockquote{border-left:4px solid rgb(var(--body--accent));padding:0 calc(var(--spacing) * 4) 0 calc(var(--spacing) * 4);margin:0;font-size:1.333em}hr{border:none;border-top:1px solid rgb(var(--body--background-secondary))}@media(max-width:720px){body{font-size:18px}main{padding:var(--spacing)}.prose>pre,.prose>code,.prose>blockquote,.prose>muti-tab-code{max-width:100%;width:auto;margin-bottom:calc(var(--spacing) * 2);margin:0 8px}}.sr-only{border:0;padding:0;margin:0;position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}button{margin:var(--spacing);padding:var(--spacing);border-radius:var(--border--radius);border:solid 1px rgb(var(--body--accent));cursor:pointer}button:hover:not(:disabled){background-color:rgb(var(--body--accent))}button:disabled{cursor:not-allowed}button,input[type=checkbox]{cursor:pointer}select,input[type=text],input[type=number]{padding:var(--spacing);border-radius:var(--border--radius);border:solid 1px rgb(var(--body--accent));height:44px}select{cursor:pointer}.center-as-column{display:flex;justify-content:center;flex-direction:column;align-items:center}.background-image-wrapper{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden;z-index:-1;img{max-width:100%;max-height:100%;object-fit:cover;object-position:25% 70%;border-radius:0;height:100%;width:100%}}.home-header-text{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);color:rgb(var(--body--background));text-align:center;padding:16px;border-radius:var(--border--radius);background-color:transparent;backdrop-filter:hue-rotate(-15deg) blur(8px) contrast(.8);border:1px solid rgba(255,255,255,.2);overflow:hidden;h1,h2{user-select:none;color:#fff;display:flex;flex-direction:column;text-align:end;font-size:2rem}h1{line-height:1em;margin:0;opacity:0;animation:fade-in .2s ease-in var(--delay) forwards,move-right .4s ease-out var(--delay) forwards}h2{font-size:3rem}@media screen and (min-width:800px){transform:translate(-50%,-50%);top:50%;left:70%;padding:32px;h2{font-size:4rem}}@media screen and (min-width:1000px){padding:64px;h2{font-size:5rem}}span{opacity:0;border-bottom:#fff 3px solid;animation:fade-in .2s ease-in var(--delay) forwards,move-right .4s ease-out var(--delay) forwards}a{font-size:1.5rem;color:#fff;text-decoration:none;text-decoration:underline dotted;text-decoration-thickness:3px;text-underline-offset:8px;&:hover{text-decoration:underline}}nav{display:flex;justify-content:space-between;a{animation:fade-in .2s ease-in var(--delay) forwards,move-right .4s ease-out var(--delay) forwards;opacity:0}}}@keyframes fade-in{to{opacity:1}}@keyframes move-right{0%{transform:translate(-10px)}}.deprecated{border:2px solid rgb(var(--body--accent));background-color:rgba(var(--body--background-secondary),.5);padding:calc(var(--spacing) * 2);border-radius:var(--border--radius);margin-bottom:calc(var(--spacing) * 4)}header{margin:0;padding:0 1em;background:rgb(var(--header--background));box-shadow:0 2px 8px rgba(var(--header--text),5%);--sl-text-h4: 1em}header h2{margin:0;font-size:1em}header .home-title{flex:1}h2 a,h2 a.active{text-decoration:none}nav{display:flex;align-items:center;justify-content:space-between}nav a,header a{padding:1em .5em;color:rgb(var(--header--text));border-bottom:4px solid transparent;text-decoration:none}nav a.active,header a.active{text-decoration:none;border-bottom-color:rgb(var(--header--accent))}.social-links,.social-links a{display:flex}@media(max-width:720px){.social-links{display:none}}.code-scroller{max-height:400px;overflow:auto}.button-link{all:unset;display:inline-block;padding:var(--spacing);cursor:pointer;text-align:center;color:rgb(var(--body--text))}.d3-svg{cursor:grab}.d3-svg:active{cursor:grabbing}@media print{header,nav,footer{display:none}}.sandpack-preview-wrapper{flex:1;background:var(--sp-colors-surface1)}.sandpack-preview-wrapper .sandpack-preview-wrapper-tabs{min-height:40px;padding:0 var(--sp-space-2);border-bottom:1px solid var(--sp-colors-surface2);display:flex;gap:20px}.sandpack-preview-wrapper .sp-stack{height:calc(var(--sp-layout-height) - 40px)}.hidden{display:none}.sp-wrapper button{padding:8px;margin:0;border:none;border-bottom:1px solid transparent;border-radius:0;white-space:nowrap;height:var(--sp-layout-headerHeight);background:var(--sp-colors-surface1);cursor:pointer;&[data-active=true],&:hover{border-color:#000;color:var(--sp-colors-accent)}}figure{display:block;margin:auto;figcaption{text-align:center;font-size:.8em;color:rgb(var(--body--text-secondary));margin-top:4px}}