:root{--theme: light-dark(#169646, #46c676);--white: #d6dde0;--dawn: #bdc3c7;--dusk: #252830;--black: #151820}@media(prefers-color-scheme:light){img.logo{filter:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9IngiPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VHcmFwaGljIiB0eXBlPSJtYXRyaXgiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgdmFsdWVzPSIwIDAgMCAwIC4wODcgMCAwIDAgMCAuNTg5IDAgMCAwIDAgLjI3NSAwIDAgMCAxIDAiIC8+PC9maWx0ZXI+PC9zdmc+#x)}}#sidebar a.logo{display:flex;justify-content:center;height:8rem;margin-top:-.666rem}code.ts{background:none}.todo{color:red;font-style:italic;&:target{font-weight:700}}#sidebar{scrollbar-gutter:stable}.ts{color:#bdc3c7}.ts{background-color:#1d2028}.ts-string{color:#6ebf9c}.ts-comment{color:#6d7278}.ts-keyword,.ts-operator{color:#67c687}.ts-constant,.ts-variable .ts--builtin,.ts-type,.ts-function{color:#92cca5}.ts-punctuation,.ts-namespace{color:#93989d}@media(prefers-color-scheme:light){.ts{color:#252830}.ts{background-color:#cad0d4}.ts-string{color:#247153}.ts-comment{color:#777c82}.ts-keyword,.ts-operator{color:#247f44}.ts-constant,.ts-variable .ts--builtin,.ts-type,.ts-function{color:#407251}.ts-punctuation,.ts-namespace{color:#51555c}}@property --intensity{syntax: "<percentage>"; initial-value: 0%; inherits: false;}*,*:before,*:after{box-sizing:border-box}:root{color-scheme:dark;--dusk-black: color-mix(in srgb, var(--dusk), var(--black));--dawn-white: color-mix(in srgb, var(--dawn), var(--white));--dawn-grey: color-mix(in srgb, var(--dawn), var(--black) 25%);--dusk-grey: color-mix(in srgb, var(--dusk), var(--white) 25%);--fg: light-dark(var(--dusk), var(--dawn));--fg-grey: light-dark(var(--dusk-grey), var(--dawn-grey));--grey: light-dark(var(--dawn-grey), var(--dusk-grey));--bg: light-dark(var(--white), var(--black));--bg-grey: light-dark(var(--dawn-white), var(--dusk-black));--fg-error: #da7975;--bg-error: color-mix(in srgb, var(--bg), var(--fg-error) 25%);--fg-warning: #e9ba00;--bg-warning: color-mix(in srgb, var(--bg), var(--fg-warning) 25%);--sans: "Atkinson Hyperlegible", sans-serif;--mono: "Atkinson Hyperlegible Mono", monospace;--header-height: 4rem}::selection{background-color:color-mix(in srgb,var(--fg) 20%,transparent)}@media(prefers-color-scheme:light){:root{color-scheme:light}img.logo{filter:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9IngiPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VHcmFwaGljIiB0eXBlPSJtYXRyaXgiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgdmFsdWVzPSIwIDAgMCAwIC4wODcgMCAwIDAgMCAuNTg5IDAgMCAwIDAgLjI3NSAwIDAgMCAxIDAiIC8+PC9maWx0ZXI+PC9zdmc+#x)}}body{height:100vh;color:var(--fg);background-color:var(--bg-grey);margin:0;padding:0;display:grid;grid-template-areas:"header gap actions" "editor gap console";grid-template-rows:var(--header-height) 1fr;grid-template-columns:1fr .5rem 1fr;font-family:var(--sans);&.progress{cursor:progress}header{img{height:100%;margin-right:.25rem}h1{font-weight:400;font-size:20pt}}header,#actions{display:flex;user-select:none;align-items:center;overflow:visible;z-index:1;padding:0 .25rem;button,label{font-size:12pt;font-family:inherit;border:none;border:1px solid var(--grey);background:var(--bg);color:var(--fg);margin:0 .25rem;padding:.25rem .75rem;border-radius:5px;transition:border-color .2s,color .2s,scale .2s;text-align:center;scale:1;&:hover{scale:1.05}&:active{scale:1}}button.dropdown{div{display:flex;flex-direction:column;position:absolute;top:calc(100% + .5rem);left:0;background:var(--bg);border:1px solid var(--grey);border-radius:5px;font-size:1rem;text-align:left;font-family:var(--mono);span{display:inline-block;padding:.25rem;transition:color .2s;&:hover{color:var(--theme)}}opacity:0;pointer-events:none;transition:opacity .2s}&:focus{scale:1}&:focus div{opacity:1;pointer-events:auto}}input{display:none}input:disabled+label,button:disabled{scale:1}button:disabled,input+label{color:var(--fg-grey)}button.on,input:checked+label{border-color:var(--theme);color:var(--theme)}button:not(:disabled),input:not(:disabled)+label,select{cursor:pointer}#share{position:relative;--intensity: 100%;&.sharing,&.shared{animation:pulsing 1s ease-in-out infinite;color:color-mix(in srgb,var(--fg) var(--intensity),transparent);border-color:color-mix(in srgb,var(--grey) var(--intensity),transparent)}&.shared{border-color:var(--theme);color:transparent;&:after{color:var(--theme)}}&:after{content:"Copied";color:transparent;transition:color .2s;position:absolute;left:50%;translate:-50% 0}}}#gap{background-color:var(--bg-grey)}}@keyframes pulsing{0%,to{--intensity: 100%}50%{--intensity: 50%}}@media(max-aspect-ratio:1){body{grid-template:"header" var(--header-height) "editor" 1fr "actions" var(--header-height) "console" 1fr / 1fr}}@media(max-height:600px)or (max-aspect-ratio:1){:root{--header-height: 3rem}body{header{h1{font-size:14pt}}button,label{font-size:12pt}}}@media((not (max-aspect-ratio:1))and (((not (max-height:600px))and (max-width:950px))or ((max-height:600px)and (max-width:850px))))or ((max-aspect-ratio:1)and (max-width:420px)){header h1{display:none}}pre,code{font-family:var(--mono)}#console,#editor .cm-scroller{overflow:auto;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--grey) transparent}#editor{background-color:var(--bg);overflow:hidden;.cm-editor{height:100%}.cm-scroller,.cm-content{font-family:var(--mono)}.cm-cursor-primary,.cm-cursor-secondary{border-left:1px solid var(--fg)}.cm-selectionBackground{background-color:color-mix(in srgb,var(--fg) 20%,transparent)}.cm-content{padding:.25rem 0}.cm-gutters{background:var(--bg);border:none}.cm-lineNumbers{color:var(--grey);min-width:3.25rem;user-select:none;.cm-gutterElement{padding:0 1rem}}.cm-tooltip{border:1px solid var(--grey);border-radius:.25rem;background-color:var(--bg-grey);overflow:hidden;max-width:30em;>:not(:first-child){border-top:1px solid var(--grey)}}.cm-diagnostic{border-left:unset;font-family:var(--mono);&.cm-diagnostic-error{color:var(--fg-error)}&.cm-diagnostic-warning{color:var(--fg-warning)}}.cm-lintRange{background-image:none;padding-bottom:0;text-decoration:underline;text-decoration-thickness:.1em;text-underline-offset:.25em;&.cm-lintRange-error{background-color:var(--bg-error);text-decoration-color:var(--fg-error)}&.cm-lintRange-warning{background-color:var(--bg-warning);text-decoration-color:var(--fg-warning)}}.cm-lintPoint{&:after{content:none}&:before{content:"";border:none;position:absolute;bottom:0;left:-.125em;width:.3em;border-bottom:.1em solid}&.cm-lintPoint-error:before{border-bottom-color:var(--fg-error)}&.cm-lintPoint-warning:before{border-bottom-color:var(--fg-warning)}}.cm-scroller{line-height:unset}}#console{display:flex;flex-direction:column;background-color:var(--bg);font-family:var(--mono);position:relative;scroll-padding-top:calc((var(--console-i) + 1) * 2.5rem);.container{display:contents;h3{position:sticky;top:calc(var(--console-i) * 2.5rem);bottom:calc((var(--console-n) - 1 - var(--console-i)) * 2.5rem);margin-top:-1px;min-height:calc(2.5rem + 1px);max-height:calc(2.5rem + 1px);background-color:var(--bg);display:flex;align-items:center;padding:0 1rem;border-top:1px solid var(--grey);border-bottom:1px solid var(--grey);cursor:pointer;user-select:none}&.first h3{border-top-color:transparent}pre{overflow:auto;flex:0 0 content;scrollbar-width:thin;padding:1rem}>*{margin:0}&.empty{display:none}&.hide{>:not(h3){display:none}& h3{color:var(--fg-grey)}}}#diagnostics{.red{background-color:var(--bg-error);color:var(--fg-error);text-decoration-color:var(--fg-error)}.yellow{background-color:var(--bg-warning);color:var(--fg-warning);text-decoration-color:var(--fg-warning)}.grey{color:var(--fg-grey)}.underline{text-decoration-line:underline;text-decoration-thickness:.1em;text-underline-offset:.25em;color:var(--fg)}:not(.underline){background:none}.bold{font-weight:700}}}
