*,*::before,*::after{box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,dialog,meter,progress,data,datalist,template,slot,bdi,wbr,math,mrow,mi,mo,mn,ms,mfrac,msqrt,mroot,mtable,mtr,mtd,msup,msub,msubsup,mover,munder,munderover,mtext,merror,mpadded,mphantom,mspace,menclose,mfenced,maction{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}ol,ul,menu{list-style:none}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit;margin:0;padding:0;background:none;border:none;outline:none}button{cursor:pointer}table{border-collapse:collapse;border-spacing:0}dialog{all:unset}details{display:block}summary{display:list-item}progress,meter{vertical-align:baseline;appearance:none}img,video,canvas{max-width:100%;height:auto}mark{background:none;color:inherit}input[type=search]{appearance:none;border-radius:0}[contenteditable],input,textarea,select,button{direction:ltr}:root{--spacing-unit: 1rem;--spacing-unit-base: 1rem;--spacing-unit-xx-small: 0.3rem;--spacing-unit-x-small: 0.3rem;--spacing-unit-small: 0.5rem;--spacing-unit-medium: 1rem;--spacing-unit-large: 2rem;--spacing-unit-x-large: 3rem;--spacing-unit-xx-large: 3rem;--font-size: 1rem;--font-size-base: 1rem;--font-size-xx-small: 0.65rem;--font-size-x-small: 0.65rem;--font-size-small: 0.875rem;--font-size-medium: 1rem;--font-size-large: 1.25rem;--font-size-x-large: 2.5rem;--font-size-xx-large: 2.5rem;--math-font-size: 1.5rem;--math-font-size-base: 1.5rem;--math-font-size-xx-small: 0.975rem;--math-font-size-x-small: 0.975rem;--math-font-size-small: 1.3125rem;--math-font-size-medium: 1.5rem;--math-font-size-large: 1.875rem;--math-font-size-x-large: 3.75rem;--math-font-size-xx-large: 3.75rem;--border-radius: 4px;--border-radius-base: 4px;--border-radius-xx-small: 1.2px;--border-radius-x-small: 1.2px;--border-radius-small: 2px;--border-radius-medium: 4px;--border-radius-large: 8px;--border-radius-x-large: 12px;--border-radius-xx-large: 12px;--screen-width: 1024px;--screen-width-base: 1024px;--screen-width-xx-small: 320px;--screen-width-x-small: 480px;--screen-width-small: 768px;--screen-width-medium: 1024px;--screen-width-large: 1280px;--screen-width-x-large: 1440px;--screen-width-xx-large: 1920px}:root{--color-background: hsl(0, 0%, 100%);--color-background-soft: hsl(0, 0%, 96%);--color-background-mute: hsl(0, 0%, 93%);--color-border-hover: hsla(0, 0%, 24%, 0.3);--color-border: hsla(0, 0%, 24%, 0.1);--color-trace-stroke: hsl(0, 0%, 24%);--color-trace-fill: hsl(0, 0%, 24%);--color-heading: hsl(0, 0%, 16%);--color-text: hsl(0, 0%, 16%);--color-text-hover: hsla(0, 0%, 24%, 0.6);--color-math-text: hsla(0, 0%, 24%, 0.8);--color-panel-box-shadow: hsl(113, 49%, 30%);--color-button-text: hsl(120, 0%, 100%);--color-button-border: hsl(120, 100%, 25%);--color-button-background-to: hsl(120, 26%, 53%);--color-button-background-from: hsl(113, 30%, 43%);--color-button-box-shadow: hsl(113, 49%, 30%);--color-button-text-shadow: hsl(113, 49%, 30%);--color-pre-code-background: hsl(0, 0%, 90%);--color-a-text: hsl(120, 100%, 37%);--color-a-text-hover: hsl(120, 100%, 23%);--color-a-background-hover: hsla(120, 100%, 37%, 0.2);--color-input-background: hsl(120, 35%, 91%);--color-input-background-hover: hsl(0, 0%, 96%);--color-input-background-focus: hsl(60, 100%, 87%);--color-input-text: hsl(0, 100%, 50%);--color-input-text-focus: hsl(0, 100%, 40%);--red-background: hsl(0, 52%, 88%);--red-border: hsl(0, 100%, 50%);--red-border-hover: hsl(0, 100%, 50%);--red-text: hsl(0, 100%, 37%);--red-text-hover: hsl(0, 100%, 23%);--yellow-background: hsl(60, 52%, 88%);--yellow-border: hsl(60, 100%, 50%);--yellow-border-hover: hsl(60, 100%, 50%);--yellow-text: hsl(60, 100%, 37%);--yellow-text-hover: hsl(60, 100%, 23%);--green-background: hsl(120, 52%, 88%);--green-border: hsl(120, 100%, 25%);--green-border-hover: hsl(120, 100%, 50%);--green-text: hsl(120, 100%, 37%);--green-text-hover: hsl(120, 100%, 23%);--blue-background: hsl(240, 52%, 88%);--blue-border: hsl(240, 100%, 50%);--blue-border-hover: hsl(240, 100%, 50%);--blue-text: hsl(240, 100%, 37%);--blue-text-hover: hsl(240, 100%, 23%)}@media(prefers-color-scheme: dark){:root{--color-background: hsl(0, 0%, 9%);--color-background-soft: hsl(0, 0%, 13%);--color-background-mute: hsl(0, 0%, 16%);--color-border-hover: hsla(0, 0%, 33%, 0.7);--color-border: hsla(0, 0%, 33%, 0.5);--color-trace-stroke: hsl(0, 0%, 92%);--color-trace-fill: hsl(0, 0%, 92%);--color-heading: hsl(0, 0%, 100%);--color-text: hsl(0, 0%, 100%);--color-text-hover: hsla(0, 0%, 92%, 0.6);--color-math-text: hsla(0, 0%, 92%, 0.8);--color-panel-box-shadow: hsl(113, 49%, 30%);--color-button-text: hsl(120, 0%, 100%);--color-button-border: hsl(120, 100%, 25%);--color-button-background-to: hsl(120, 26%, 43%);--color-button-background-from: hsl(113, 30%, 33%);--color-button-box-shadow: hsl(113, 49%, 20%);--color-button-text-shadow: hsl(113, 49%, 20%);--color-pre-code-background: hsl(0, 0%, 20%);--color-a-text: hsl(120, 100%, 37%);--color-a-text-hover: hsl(120, 100%, 23%);--color-a-background-hover: hsla(120, 100%, 37%, 0.2);--color-input-background: hsl(120, 35%, 91%);--color-input-background-hover: hsl(0, 0%, 96%);--color-input-background-focus: hsl(60, 100%, 87%);--color-input-text: hsl(0, 100%, 35%);--color-input-text-focus: hsl(0, 100%, 25%);--red-background: hsl(0, 52%, 16%);--red-border: hsl(0, 100%, 50%);--red-border-hover: hsl(0, 100%, 50%);--red-text: hsl(0, 100%, 37%);--red-text-hover: hsl(0, 100%, 23%);--yellow-background: hsl(60, 52%, 16%);--yellow-border: hsl(60, 100%, 50%);--yellow-border-hover: hsl(60, 100%, 50%);--yellow-text: hsl(60, 100%, 37%);--yellow-text-hover: hsl(60, 100%, 23%);--green-background: hsl(120, 52%, 16%);--green-border: hsl(120, 100%, 25%);--green-border-hover: hsl(120, 100%, 50%);--green-text: hsl(120, 100%, 37%);--green-text-hover: hsl(120, 100%, 23%);--blue-background: hsl(240, 52%, 16%);--blue-border: hsl(240, 100%, 50%);--blue-border-hover: hsl(240, 100%, 50%);--blue-text: hsl(240, 100%, 37%);--blue-text-hover: hsl(240, 100%, 23%)}}:root{--0.3s: ;--ease: }math{display:inline-block;direction:ltr;text-indent:0;letter-spacing:normal;line-height:normal;word-spacing:normal;font-style:normal;font-variant:normal;font-weight:normal;font-size:var(--math-font-size-medium);font-family:math;color:var(--color-math-text);math-style:compact;math-shift:normal;math-depth:0}math[display=block i]{display:block;margin:1em 0}mstyle{all:unset;font-family:inherit;font-size:inherit;color:inherit}mtable{border-collapse:collapse;border-spacing:0;width:auto}mi,mo,mn,ms,mtext{font-size:inherit;font-family:inherit;font-style:inherit;font-weight:inherit}mfrac,msqrt,mroot{display:block math}mfrac{font-size:1.3333333333em}msup>mrow:last-child mfrac{font-size:1em}html[data-theme=light]{--color-background: hsl(0, 0%, 100%);--color-background-soft: hsl(0, 0%, 96%);--color-background-mute: hsl(0, 0%, 93%);--color-border-hover: hsla(0, 0%, 24%, 0.3);--color-border: hsla(0, 0%, 24%, 0.1);--color-trace-stroke: hsl(0, 0%, 24%);--color-trace-fill: hsl(0, 0%, 24%);--color-heading: hsl(0, 0%, 16%);--color-text: hsl(0, 0%, 16%);--color-text-hover: hsla(0, 0%, 24%, 0.6);--color-math-text: hsla(0, 0%, 24%, 0.8);--color-panel-box-shadow: hsl(113, 49%, 30%);--color-button-text: hsl(120, 0%, 100%);--color-button-border: hsl(120, 100%, 25%);--color-button-background-to: hsl(120, 26%, 53%);--color-button-background-from: hsl(113, 30%, 43%);--color-button-box-shadow: hsl(113, 49%, 30%);--color-button-text-shadow: hsl(113, 49%, 30%);--color-pre-code-background: hsl(0, 0%, 90%);--color-a-text: hsl(120, 100%, 37%);--color-a-text-hover: hsl(120, 100%, 23%);--color-a-background-hover: hsla(120, 100%, 37%, 0.2);--color-input-background: hsl(120, 35%, 91%);--color-input-background-hover: hsl(0, 0%, 96%);--color-input-background-focus: hsl(60, 100%, 87%);--color-input-text: hsl(0, 100%, 50%);--color-input-text-focus: hsl(0, 100%, 40%);--red-background: hsl(0, 52%, 88%);--red-border: hsl(0, 100%, 50%);--red-border-hover: hsl(0, 100%, 50%);--red-text: hsl(0, 100%, 37%);--red-text-hover: hsl(0, 100%, 23%);--yellow-background: hsl(60, 52%, 88%);--yellow-border: hsl(60, 100%, 50%);--yellow-border-hover: hsl(60, 100%, 50%);--yellow-text: hsl(60, 100%, 37%);--yellow-text-hover: hsl(60, 100%, 23%);--green-background: hsl(120, 52%, 88%);--green-border: hsl(120, 100%, 25%);--green-border-hover: hsl(120, 100%, 50%);--green-text: hsl(120, 100%, 37%);--green-text-hover: hsl(120, 100%, 23%);--blue-background: hsl(240, 52%, 88%);--blue-border: hsl(240, 100%, 50%);--blue-border-hover: hsl(240, 100%, 50%);--blue-text: hsl(240, 100%, 37%);--blue-text-hover: hsl(240, 100%, 23%)}html[data-theme=dark]{--color-background: hsl(0, 0%, 9%);--color-background-soft: hsl(0, 0%, 13%);--color-background-mute: hsl(0, 0%, 16%);--color-border-hover: hsla(0, 0%, 33%, 0.7);--color-border: hsla(0, 0%, 33%, 0.5);--color-trace-stroke: hsl(0, 0%, 92%);--color-trace-fill: hsl(0, 0%, 92%);--color-heading: hsl(0, 0%, 100%);--color-text: hsl(0, 0%, 100%);--color-text-hover: hsla(0, 0%, 92%, 0.6);--color-math-text: hsla(0, 0%, 92%, 0.8);--color-panel-box-shadow: hsl(113, 49%, 30%);--color-button-text: hsl(120, 0%, 100%);--color-button-border: hsl(120, 100%, 25%);--color-button-background-to: hsl(120, 26%, 43%);--color-button-background-from: hsl(113, 30%, 33%);--color-button-box-shadow: hsl(113, 49%, 20%);--color-button-text-shadow: hsl(113, 49%, 20%);--color-pre-code-background: hsl(0, 0%, 20%);--color-a-text: hsl(120, 100%, 37%);--color-a-text-hover: hsl(120, 100%, 23%);--color-a-background-hover: hsla(120, 100%, 37%, 0.2);--color-input-background: hsl(120, 35%, 91%);--color-input-background-hover: hsl(0, 0%, 96%);--color-input-background-focus: hsl(60, 100%, 87%);--color-input-text: hsl(0, 100%, 35%);--color-input-text-focus: hsl(0, 100%, 25%);--red-background: hsl(0, 52%, 16%);--red-border: hsl(0, 100%, 50%);--red-border-hover: hsl(0, 100%, 50%);--red-text: hsl(0, 100%, 37%);--red-text-hover: hsl(0, 100%, 23%);--yellow-background: hsl(60, 52%, 16%);--yellow-border: hsl(60, 100%, 50%);--yellow-border-hover: hsl(60, 100%, 50%);--yellow-text: hsl(60, 100%, 37%);--yellow-text-hover: hsl(60, 100%, 23%);--green-background: hsl(120, 52%, 16%);--green-border: hsl(120, 100%, 25%);--green-border-hover: hsl(120, 100%, 50%);--green-text: hsl(120, 100%, 37%);--green-text-hover: hsl(120, 100%, 23%);--blue-background: hsl(240, 52%, 16%);--blue-border: hsl(240, 100%, 50%);--blue-border-hover: hsl(240, 100%, 50%);--blue-text: hsl(240, 100%, 37%);--blue-text-hover: hsl(240, 100%, 23%)}a{border-radius:.5rem;text-decoration:none;color:var(--color-a-text);padding:.1rem;transition:background-color .4s}@media(hover: hover){a:hover{background-color:var(--color-a-background-hover)}}p{margin-block:1em;margin-inline:0}b,strong{font-weight:bold}i,em{font-style:italic}u{text-decoration:underline}h1{font-size:var(--font-size-x-large)}h2{font-size:var(--font-size-large)}h3{font-size:var(--font-size-medium)}h4{font-size:var(--font-size-small)}h5{font-size:var(--font-size-x-small)}h6{font-size:var(--font-size-xx-small)}dl,ol,ul{margin-block:1em;padding-inline-start:40px}dt{font-weight:bold}dd{margin-inline-start:40px}li{list-style:disc}ol li{list-style:decimal}tbody{vertical-align:middle}table{border-collapse:separate;border-spacing:2px}pre,mn>pre{padding:1rem;border-radius:1rem;background-color:var(--color-pre-code-background);overflow-x:auto}mn>pre{padding:0;margin:0;border-radius:0;background-color:inherit}code,pre>code{font-weight:bold;font-family:monospace;font-size:var(--font-size-medium);color:var(--color-input-text)}@media(max-width: 1024px){code,pre>code{font-size:var(--font-size-small)}}mn>pre>code{color:inherit}header{line-height:1.5}.logo{display:block;margin:0 auto 2rem}@media(min-width: 1024px){header{display:flex;place-items:center}.logo{margin:0 2rem 0 0}header .header-wrapper{display:flex;place-items:flex-start;flex-wrap:wrap}}.header-panel h1,.header-panel h3,.header-panel p{text-align:center}@media(min-width: 1024px){.header-panel h1,.header-panel h3{text-align:left}.header-panel p{text-align:right}}body{display:block;margin:8px;min-height:100vh;color:var(--color-text);background:var(--color-background);transition:color .5s background-color .5s;line-height:1.6;font-family:sans-serif;font-size:15px}button,select{margin:.5rem;padding:.5rem;display:inline-block;cursor:pointer;font:bold 1rem Arial;color:var(--color-button-text);text-decoration:none;text-shadow:0 1px 0 var(--color-button-text-shadow);border:1px outset var(--color-button-border);border-radius:.5rem;background:linear-gradient(to bottom, var(--color-button-background-to) 5%, var(--color-button-background-from) 100%);background-color:var(--color-button-background-to);box-shadow:0 10px 14px -7px var(--color-button-box-shadow)}button:hover,select:hover{background:linear-gradient(to bottom, var(--color-button-background-from) 5%, var(--color-button-background-to) 100%);background-color:var(--color-button-background-from)}button:active,select:active{top:1px;position:relative}.green-text{color:var(--green-text)}.text-align-center{text-align:center}#app{margin:0 auto;display:block;padding:0}.width-fit-content{width:fit-content}.green-panel{display:block;background-color:var(--green-background);border:2px solid var(--green-border);margin:1rem;padding:1rem;border-radius:1rem;box-shadow:0px 10px 14px -7px var(--color-panel-box-shadow)}.right-align-panel{margin:0 auto auto auto}@media(min-width: 1024px){.right-align-panel{margin:auto 0 auto auto}}