:root{color:#000;font-family:Lato;font-size:12pt;--color-bg: hsl(240, 10%, 5%);--color-svelte-red: rgb(98%, 23%, 11%);--color-heading: white;--color-body: hsl(0, 0%, 95%)}body{background-color:var(--color-bg);border-color:pink;color:var(--color-body);margin:0;background-image:radial-gradient(circle at -40vw 1200px,oklch(from lightcoral l c h / .15) 1%,transparent 40%),radial-gradient(circle at 150vw -100px,oklch(from cornflowerblue l c h / .25) 1%,transparent 75%)}div#app{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}header#page{font-family:Lato;text-transform:lowercase;display:flex;justify-content:space-between;align-items:center;padding:1rem 2em;font-size:1.2rem;font-weight:400}header#page nav ul{margin-block:0;display:flex;align-items:start;gap:1rem}header#page nav ul li{display:inline-flex;align-items:center}header#page a:has(span):hover{opacity:.75}span#github-stars{font-family:Quicksand;font-size:1rem;font-weight:600;display:inline-flex;align-items:center;vertical-align:middle;gap:.5em}nav{display:contents}ul{display:contents;padding-inline-start:0}li{list-style-type:none}a,a:visited{color:#fff;text-decoration:none;font-size:1rem}main#hero{border-color:#ff0;display:grid;grid-template-rows:20vh 1fr auto;align-items:start;height:100%}main#hero section{flex-basis:50% 0 0}section#title{display:flex;flex-direction:column;align-self:start;justify-self:end;padding-inline-start:10ch}section#title h1{margin-top:0;margin-bottom:.5em;color:var(--color-heading);font-family:Lato;font-weight:200;text-transform:lowercase}section#title p{font-size:1.2rem;margin-block:1em}section#title p:last-of-type{color:#90ee90;font-size:1rem}section#title p:last-of-type em{color:#ccc}section#preview{justify-self:start}section#preview header{font-family:Quicksand;font-weight:550}section#preview header span{color:#ccc}section#preview article{gap:0}section#preview article p{background-color:#000;display:block;width:100%;font-size:3rem;display:flex;justify-content:center;align-items:center;font-family:monospace;margin:0}section#preview button{all:unset;cursor:pointer;padding:.25em .5em;border-top-left-radius:.5em;border-top-right-radius:.5em}section#preview button:hover{background-color:#fffa;color:#000}section#preview button.active{background-color:#000c;border-bottom:1px solid lightgrey;color:#fff}h1{font-size:4rem}pre{font-size:1rem;padding:1.5em;background-color:#000c;margin:0;font-size:.9rem;line-height:1.6;border-top-right-radius:3rem;white-space:pre-wrap}footer{border-top:1px solid white;display:flex;font-size:.8rem;font-family:monospace;justify-content:space-between;background-color:#000a}footer span{padding:1em}footer button{border-radius:.25em;background:none;border:0;color:#fff;font-weight:700;text-transform:uppercase}footer button:hover{background-color:#fff;color:#000;cursor:pointer}canvas{background:#000;border-bottom-left-radius:3rem}article p{border-bottom-left-radius:3rem;padding-block:1rem}div#spacer-top{flex-basis:25%;flex-shrink:0}div#main-content{display:grid;gap:10%;grid-template-columns:1fr 1fr;flex-basis:auto}div#spacer-bottom{flex-basis:25%;flex-shrink:1;border-color:#90ee90;min-height:10vh}@media (max-width: 1140px){main#hero{grid-template-rows:10vh 1fr auto}div#spacer-top{flex-basis:15vw}div#main-content{display:flex;gap:5rem;flex-wrap:wrap}section{width:100%}section#preview{margin-inline:15%}section#title{text-align:center;padding-inline:2rem}div#spacer-bottom{min-height:5vh}}@media (max-width: 640px){section#preview{margin-inline:0}canvas,article pre,article p{border-radius:0}}