:root{--black:#000;--white:#fff;--blue-1:hsl(225, 100%, 25%);--blue-2:hsl(220, 100%, 30%);--blue-3:hsl(220, 100%, 32%);--blue-4:hsl(216, 100%, 35%);--blue-5:hsl(212, 100%, 40%);--blue-6:hsl(207, 100%, 45%);--blue-7:hsl(212, 100%, 72%);--blue-8:hsl(211, 75%, 58%);--green-1:hsl(135, 100%, 29%);--green-2:hsl(134, 100%, 32%);--green-3:hsl(133, 100%, 40%);--green-4:hsl(132, 100%, 43%);--grey-1:hsl(0, 0%, 70%);--grey-2:hsl(0, 0%, 90%);--orange-1:hsl(28, 100%, 50%);--orange-2:hsl(36, 100%, 60%);--orange-3:hsl(42, 100%, 50%);--red-1:hsl(349, 85%, 37%);--red-2:hsl(350, 88%, 41%);--red-3:hsl(351, 92%, 50%);--red-4:hsl(352, 100%, 58%);--red-5:hsl(348, 70%, 88%);--layout:3;--layout-unit:1vw;--border-1:calc((var(--layout-unit) * 0.95) / var(--layout));--border-2:calc((var(--layout-unit) * 0.75) / var(--layout));--border-3:calc((var(--layout-unit) * 0.75) / var(--layout));--border-4:calc((var(--layout-unit) * 0.475) / var(--layout));--btn-hover-before-opacity:1;--btn-hover-transform:translateY(calc((var(--layout-unit) * -0.3) / var(--layout)));--btn-inset:inset 0 calc((var(--layout-unit) * 0.5) / var(--layout)) calc((var(--layout-unit) * 0.3) / var(--layout)) hsla(0, 0%, 100%, 0.5),inset 0 calc((var(--layout-unit) * -0.5) / var(--layout)) calc((var(--layout-unit) * 0.3) / var(--layout)) hsla(0, 0%, 0%, 0.35);--btn-size:calc((var(--layout-unit) * 4.65));--filter-shadow:drop-shadow(0 calc((var(--layout-unit) * 0.1) / var(--layout)) calc((var(--layout-unit) * 0.4) / var(--layout)) var(--black)) drop-shadow(0 calc((var(--layout-unit) * 0.7) / var(--layout)) calc((var(--layout-unit) * 0.05) / var(--layout)) var(--black));--keyboard-height:calc((var(--layout-unit) * 9.6));--margin:calc((var(--layout-unit) * 5.5) / var(--layout));--padding:calc((var(--layout-unit) * 5) / var(--layout));--section-box-shadow:0 0 calc((var(--layout-unit) * 2) / var(--layout)) hsla(0, 0%, 0%, 0.6),0 0 calc((var(--layout-unit) * 3) / var(--layout)) hsla(0, 0%, 0%, 0.6),0 0 calc((var(--layout-unit) * 4) / var(--layout)) hsla(0, 0%, 0%, 0.6);--transition:0.25s;--3d-domino-depth:0.12;--3d-domino-blur:0.025;--3d-cast-shadow-depth:0.075;--3d-cast-shadow-blur:0.01}*{margin:0;padding:0;color:var(--white);font-family:Alexandria,sans-serif;font-weight:600;line-height:1.3em;-moz-osx-font-smoothing:grayscale;-ms-font-smoothing:antialiased;-webkit-font-smoothing:antialiased;border:0;box-sizing:border-box;text-decoration:none;text-shadow:0 .05em .15em var(--black),0 .05em .2em var(--black),0 .125em .05em var(--black);transition:var(--transition);scrollbar-width:none;-ms-overflow-style:none}::-webkit-scrollbar{display:none}body{background-color:var(--blue-1);background-image:linear-gradient(var(--blue-2) var(--border-4),transparent var(--border-4)),linear-gradient(90deg,var(--blue-2) var(--border-4),transparent var(--border-4));background-size:calc((var(--layout-unit) * 3.5)/ var(--layout)) calc((var(--layout-unit) * 3.5)/ var(--layout))}#skip-to-main-btn{position:fixed;display:inline-block;top:-50%;padding:.5em 1em;background-color:var(--blue-1);z-index:1}#skip-to-main-btn:focus{top:0}.visually-hidden{width:1px;height:1px;position:fixed;top:0;left:0;clip:rect(1px,1px,1px,1px);clip-path:inset(0 0 99.9% 99.9%);overflow:hidden}@media screen and (max-width:800px){:root{--border-3:calc((var(--layout-unit) * 0.6) / var(--layout));--btn-size:calc((var(--layout-unit) * 17));--keyboard-height:auto;--layout:1}}@media screen and (min-width:1650px){:root{--layout-unit:16.5px}}.btn{height:var(--btn-size);padding:.1em .9em .2em .9em;font-size:calc((var(--layout-unit) * 2));text-align:center;border:var(--border-2) solid var(--black);border-radius:999px;box-shadow:var(--btn-inset),0 calc((var(--layout-unit) * .75)/ var(--layout)) calc((var(--layout-unit) * .3)/ var(--layout)) var(--blue-2);cursor:pointer;overflow:hidden}.btn::before{content:"";position:absolute;width:100%;height:100%;top:0;left:0;border-radius:999px;box-shadow:var(--btn-inset);opacity:0;transition:var(--transition);z-index:-1}@media (hover:hover) and (pointer:fine){.btn:hover{transform:var(--btn-hover-transform)}.btn:hover::before{opacity:var(--btn-hover-before-opacity)}}@media screen and (max-width:800px){.btn{font-size:calc((var(--layout-unit) * 6.4));border:var(--border-1) solid var(--black)}}main{width:100%;display:flex;justify-content:center}#main-container{width:calc((var(--layout-unit) * 100));display:flex;justify-content:center}section{width:calc((var(--layout-unit) * 100)/ var(--layout));height:calc(100vh - var(--keyboard-height) - (var(--margin) * 3));display:flex;flex-direction:column;align-items:center;position:relative;margin:var(--margin);padding:var(--padding);background-color:var(--blue-4);border:var(--border-1) solid var(--blue-6);border-radius:calc((var(--layout-unit) * 12)/ var(--layout));box-shadow:var(--section-box-shadow);overflow:hidden}@media screen and (max-width:800px){#main-container{flex-direction:column}section{width:calc(calc((var(--layout-unit) * 100)) - (var(--margin) * 2));height:auto}}#header-section{padding:0;transform:scale(1)}header{width:100%;display:flex;flex-direction:column;align-items:center}#logo-wrapper{width:100%;height:calc((var(--layout-unit) * 50)/ var(--layout));display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}#logo{width:85%}#starburst{--starburst-blur:calc((var(--layout-unit) * 1) / var(--layout));--starburst-size:250%;width:100%;height:var(--starburst-size);position:absolute;background-image:radial-gradient(circle,hsla(216,100%,27%,0) 0,var(--blue-4) 90%),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400" fill="none"><path d="M168.391 0L200 200L98.0117 0L0.132183 0L200 200L0 98.1781V168.256L200 200L0 231.745V301.822L200 200L0.132203 400H98.0116L200 200L168.39 400H231.609L200 200L301.988 400H399.868L200 200L400 301.822V231.745L200 200L400 168.256V98.1785L200 200L399.868 0H301.989L200 200L231.609 0L168.391 0Z" fill="%23007ee6"/></svg>');background-position:center;background-repeat:no-repeat;background-size:100%,var(--starburst-size);filter:blur(var(--starburst-blur));-webkit-backdrop-filter:blur(var(--starburst-blur));z-index:-1}#tag-line{transform:translateY(-.75em);font-size:calc((var(--layout-unit) * 5.25)/ var(--layout))}#header-section a,#header-section span{margin:.4em 0 0;font-size:calc((var(--layout-unit) * 1.1));text-align:center}#header-section a::after{content:"›";position:absolute;padding:0 0 0 .25em}#desktop-options{width:100%;display:flex;flex-direction:column;align-items:center}.calculator-btn,.reset-btn{width:62%;margin:calc((var(--layout-unit) * 1.25)) 0 0 0}#build-btn-mobile,.calculator-btn{background-image:linear-gradient(to bottom,var(--green-3),var(--green-1))}.calculator-btn::before{background-image:linear-gradient(to bottom,var(--green-4),var(--green-2))}.reset-btn{background-image:linear-gradient(to bottom,var(--red-3),var(--red-1))}.reset-btn::before{background-image:linear-gradient(to bottom,var(--red-4),var(--red-2))}#mobile-options{display:none}@media screen and (max-width:800px){#logo{width:90%}#tag-line{transform:translateY(-.5em);font-size:calc((var(--layout-unit) * 5.6)/ var(--layout))}#header-section a,#header-section span{font-size:calc((var(--layout-unit) * 4.2))}#desktop-options{display:none}#mobile-options{display:flex;background-image:radial-gradient(circle,var(--blue-5) 0,var(--blue-2) 100%)}#build-btn-mobile,.calculator-btn,.reset-btn{width:84%;margin:calc((var(--layout-unit) * 3))}}#instructions-wrapper{width:100%;height:100%;display:flex;flex-direction:column;margin:var(--margin) 0 0 0;background-image:linear-gradient(to bottom,var(--blue-5),var(--blue-2));border-top:var(--border-1) solid var(--black);transition:none;overflow-x:hidden;overflow-y:scroll}#instructions-wrapper::after{content:"";width:120%;height:100%;position:absolute;top:0;left:50%;transform:translateX(-50%);box-shadow:inset 0 calc((var(--layout-unit) * -1)) calc((var(--layout-unit) * 1)) var(--blue-2);pointer-events:none}#instructions-wrapper.active{position:absolute;top:0;left:0;margin:0;background:var(--blue-2);border-top:0}#instructions-wrapper.active::after{box-shadow:none}#instructions-title{width:100%;display:flex;align-items:center;justify-content:center;position:relative;padding:calc((var(--layout-unit) * 1)) 0 calc((var(--layout-unit) * 1.25));background-color:var(--blue-6);border-bottom:var(--border-1) solid var(--black);z-index:1}#instructions-title h3{font-size:calc((var(--layout-unit) * 1.7))}#instructions-btn{--instructions-btn-size:calc((var(--layout-unit) * 7) / var(--layout));width:var(--instructions-btn-size);height:var(--instructions-btn-size);display:flex;align-items:center;justify-content:center;position:absolute;top:50%;right:var(--padding);transform:translateY(-50%) rotate(45deg);background-color:var(--black);border-radius:50%;overflow:hidden;cursor:pointer}#instructions-wrapper.active #instructions-btn{transform:translateY(-50%) rotate(0)}@media (hover:hover) and (pointer:fine){#instructions-btn:hover{background-color:hsla(0,0%,0%,.75);transform:translateY(-50%) rotate(45deg) scale(1.1)}#instructions-wrapper.active #instructions-btn:hover{transform:translateY(-50%) rotate(0) scale(1.1)}}#instructions-btn svg{width:75%;height:auto;fill:var(--white)}@media screen and (max-width:800px){#instructions-wrapper{height:calc((var(--layout-unit) * 17));overflow:hidden}#instructions-wrapper.active{height:100%;position:relative;margin:var(--margin) 0 0 0;border-top:var(--border-1) solid var(--black)}#instructions-title{padding:calc((var(--layout-unit) * 4)) 0 calc((var(--layout-unit) * 4.5))}#instructions-title h3{font-size:calc((var(--layout-unit) * 6.4))}#instructions-btn{--instructions-btn-size:calc((var(--layout-unit) * 8) / var(--layout))}}#instructions-text{--instructions-text-padding:calc((var(--layout-unit) * 3.3));padding:0 var(--instructions-text-padding) var(--instructions-text-padding)}#instructions-text h1,#instructions-text h3{margin:1em 0;font-size:calc((var(--layout-unit) * 1.37))}#instructions-text h3 span{color:var(--orange-2)}#instructions-text h2,#instructions-text p{font-size:calc((var(--layout-unit) * 1.17));font-weight:500;line-height:1.4em}#instructions-text img{width:100%;border-radius:calc((var(--layout-unit) * 4)/ var(--layout))}@media screen and (max-width:800px){#instructions-text{--instructions-text-padding:var(--margin)}#instructions-text h1,#instructions-text h3{font-size:calc((var(--layout-unit) * 6))}#instructions-text h2,#instructions-text p{font-size:calc((var(--layout-unit) * 5.1));hyphens:auto}#instructions-text img{border-radius:calc((var(--layout-unit) * 5.75)/ var(--layout))}}.title{width:100%;position:relative;border-radius:999px;box-shadow:0 0 calc((var(--layout-unit) * 6)/ var(--layout)) var(--blue-2);z-index:2}.title::before{--title-arrow-size:calc((var(--layout-unit) * 5) / var(--layout));content:"";width:var(--title-arrow-size);height:var(--title-arrow-size);position:absolute;left:50%;bottom:calc(var(--title-arrow-size) * -1);transform:translate(-50%,-50%) rotate(45deg);background-color:var(--black);border-radius:0 0 calc((var(--layout-unit) * 1.5)/ var(--layout)) 0}.title h3{position:relative;padding:calc((var(--layout-unit) * 2.25)/ var(--layout)) 0 calc((var(--layout-unit) * 2.75)/ var(--layout));font-size:calc((var(--layout-unit) * 6.4)/ var(--layout));text-align:center;background-image:linear-gradient(to bottom,var(--orange-3),var(--orange-1));border:var(--border-1) solid var(--black);border-radius:999px}.title h3::after,.title h3::before{--title-h2-bolt-size:calc((var(--layout-unit) * 3) / var(--layout));--title-h2-bolt-margin:calc((var(--layout-unit) * 4) / var(--layout));content:"";width:var(--title-h2-bolt-size);height:var(--title-h2-bolt-size);position:absolute;top:50%;transform:translateY(-50%);background-color:var(--black);border-radius:50%}.title h3::before{left:var(--title-h2-bolt-margin)}.title h3::after{right:var(--title-h2-bolt-margin)}#input-domino-section{background-image:linear-gradient(90deg,var(--blue-4) 0,var(--blue-6) 20%,var(--blue-6) 80%,var(--blue-4) 100%);overflow-y:scroll}#input-domino-section-anchor{transform:translateY(calc(var(--margin) * -2))}#starter-wrapper,#your-dominoes-wrapper{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}#starter-wrapper{padding:0 0 calc((var(--layout-unit) * 10)/ var(--layout)) 0}#starter-wrapper::before,#your-dominoes-wrapper::before{content:"";width:150%;height:calc((var(--layout-unit) * 21)/ var(--layout));position:absolute;left:50%;transform:translateX(-50%);z-index:1}#starter-wrapper::before{top:calc(var(--padding) * -1);background-image:linear-gradient(to bottom,var(--blue-4),hsla(212,100%,32%,0))}#your-dominoes-wrapper::before{bottom:calc(var(--padding) * -1);background-image:linear-gradient(to bottom,hsla(212,100%,32%,0),var(--blue-4))}#starter-wrapper *,#your-dominoes-wrapper *{outline:0}.domino{--pip-size:calc((var(--layout-unit) * 26) / var(--layout));--3d-domino-depth-extra-thick:calc(var(--3d-domino-depth) * 1.4);display:flex;position:relative;margin:var(--margin) 0 0 0;padding:0 0 calc(var(--pip-size) * var(--3d-domino-depth-extra-thick)) 0;font-size:0;line-height:0;background-color:var(--white);border:var(--border-1) solid var(--black);border-radius:calc((var(--layout-unit) * 7)/ var(--layout));box-shadow:inset 0 calc(var(--pip-size) * var(--3d-domino-depth-extra-thick) * -1) calc(var(--pip-size) * var(--3d-domino-blur)) hsla(0,0%,0%,.35),0 calc(var(--pip-size) * var(--3d-cast-shadow-depth)) calc(var(--pip-size) * var(--3d-cast-shadow-blur)) var(--blue-3)}.domino-divider{width:calc((var(--pip-size)/ (12 / var(--layout)))/ var(--layout));height:var(--pip-size);margin:calc((var(--pip-size)/ (12 / var(--layout)))/ var(--layout)) 0;background-color:var(--black)}.domino-pip{width:var(--pip-size);height:var(--pip-size);position:relative;margin:calc((var(--pip-size)/ (12 / var(--layout)))/ var(--layout));background-color:var(--grey-2);background-position:center;background-repeat:no-repeat;background-size:100%;border:var(--border-3) dashed var(--grey-1);border-radius:calc((var(--layout-unit) * 4.25)/ var(--layout));transition:transform var(--transition);pointer-events:none}.domino-focus{position:relative;cursor:pointer}@media (hover:hover) and (pointer:fine){.domino-focus:hover .domino-pip{transform:scale(1.025)}}.domino-focus:focus .domino-pip{background-color:var(--red-5);border:var(--border-3) dashed var(--red-2);animation:domino-pip .38s infinite alternate ease-in-out}@media (prefers-reduced-motion:no-preference){@keyframes domino-pip{0%{transform:scale(.96)}100%{transform:scale(1.04)}}}#domino-blank{background-color:var(--white);border:var(--border-3) dashed var(--white)}#start-helper{display:flex;align-items:center;position:absolute;top:50%;right:calc(100% + (var(--border-1) * -1.5));transform:translateY(-50%);opacity:0;animation:start-helper 1s 1s forwards}@keyframes start-helper{0%{opacity:0}100%{opacity:1}}#jumping-text{width:100%;display:flex;justify-content:center;align-items:center;position:absolute;top:50%;left:50%;transform:translate(-51.65%,-53%);padding:0;color:var(--white);font-size:calc((var(--layout-unit) * 3.7)/ var(--layout));text-wrap:nowrap;z-index:1}.jumping-letter{display:inline-block;position:relative;animation:jumping-letter 2s alternate ease-in-out infinite}@media (prefers-reduced-motion:no-preference){@keyframes jumping-letter{0%,90%{transform:translateY(0)}100%{transform:translateY(-.25em)}}}.jumping-letter:nth-child(10),.jumping-letter:nth-child(5){padding:0 .25em 0 0}#start-helper svg{--start-helper-height:calc((var(--layout-unit) * 8) / var(--layout));width:auto;height:var(--start-helper-height);fill:linear-gradient(to bottom,var(--red-3),var(--red-1));filter:drop-shadow(0 calc((var(--layout-unit) * 1) / var(--layout)) calc((var(--layout-unit) * .5) / var(--layout)) hsla(0, 0%, 0%, .35))}#create-domino-btn{display:flex;position:relative;margin:calc((var(--layout-unit) * 5)/ var(--layout)) 0 0 0;background-color:transparent;border:var(--border-3) dashed var(--white);border-radius:50%;cursor:pointer;z-index:2;filter:var(--filter-shadow)}#create-domino-btn:focus-visible{outline:auto;outline-offset:var(--border-1)}#create-domino-btn svg{width:calc((var(--layout-unit) * 8)/ var(--layout));height:auto;transform:rotate(45deg);margin:calc((var(--layout-unit) * 2)/ var(--layout));fill:var(--white)}@media (hover:hover) and (pointer:fine){#create-domino-btn:hover{transform:scale(1.05)}}#dominoes-added{position:absolute;top:50%;left:calc(100% + (var(--layout-unit) * 3)/ var(--layout));transform:translateY(-55%);font-size:calc((var(--layout-unit) * 2));text-shadow:none;opacity:0}@media screen and (max-width:800px){#dominoes-added{font-size:calc((var(--layout-unit) * 6.4))}}#results-bummer-placeholder,#results-default-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 calc((var(--layout-unit) * 5)/ var(--layout));font-size:calc((var(--layout-unit) * 5)/ var(--layout));text-align:center;transform:translateY(calc((var(--layout-unit) * -10)/ var(--layout)))}#results-default-placeholder #animated-gear,#results-default-placeholder #animated-gear-poster{width:65%;margin:-2.5% 0}#results-default-placeholder #animated-gear{display:none}#results-default-placeholder #animated-gear-poster{display:block}@media (prefers-reduced-motion:no-preference){#results-default-placeholder #animated-gear{display:block}#results-default-placeholder #animated-gear-poster{display:none}}#results-default-placeholder #divider{width:100%;margin:calc((var(--layout-unit) * 5)/ var(--layout)) 0;fill:var(--blue-8);filter:var(--filter-shadow)}#results-default-placeholder h4{color:var(--blue-7)}#results-bummer-placeholder{display:none}#results-wrapper{--results-wrapper-top-margin:calc(calc((var(--layout-unit) * 20.05)) / var(--layout) + var(--margin));width:100%;height:calc(100% - var(--results-wrapper-top-margin));display:flex;align-items:flex-start;justify-content:flex-start;position:absolute;top:var(--results-wrapper-top-margin);left:0;border-top:var(--border-1) solid var(--black);background-image:linear-gradient(to bottom,var(--blue-4),var(--blue-5));overflow:scroll;overscroll-behavior-y:none}#results{min-height:100%;display:flex}.train-wrapper{--result-domino-size:calc((var(--layout-unit) * 11) / var(--layout));padding:var(--margin) calc(var(--margin) * 1.475);display:flex;flex-direction:column;align-items:center;border-right:var(--border-1) solid var(--black)}.train-wrapper:last-child{border-right:0}.train-length-total{width:var(--result-domino-size);height:var(--result-domino-size);display:flex;align-items:center;justify-content:center;margin:0 0 var(--margin) 0;padding:0 0 calc((var(--layout-unit) * .65)/ var(--layout));font-size:calc((var(--layout-unit) * 6)/ var(--layout));background-color:var(--green-2);border-radius:50%}.result-domino-wrapper{display:flex;flex-direction:column;position:relative;margin:calc(var(--border-2) * -.45) 0;background-color:var(--white);border:var(--border-2) solid var(--black);border-radius:calc((var(--layout-unit) * 3)/ var(--layout));overflow:hidden}.result-domino-wrapper::after{content:"";width:83%;height:calc((var(--layout-unit) * .9)/ var(--layout));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--black)}.rotate{margin:calc((var(--result-domino-size) * -.5) - var(--border-2)) 0;transform:rotate(90deg)}.result-domino-wrapper div:nth-child(1),.result-domino-wrapper div:nth-child(2){width:var(--result-domino-size);height:var(--result-domino-size);background-position:center;background-repeat:no-repeat;background-size:90%;border-radius:calc((var(--layout-unit) * 3)/ var(--layout));overflow:hidden}.result-domino-wrapper div:nth-child(1){margin:0 0 calc((var(--layout-unit) * .9)/ var(--layout)) 0}@media screen and (max-width:800px){#results-section{margin-bottom:calc(var(--margin) * 2);padding:0;min-height:calc(100vh - (var(--margin) * 2))}#results-section .title{width:calc(100% - (var(--padding) * 2));margin:var(--padding) 0 0 0}#results-wrapper{position:relative;height:100%;top:0;margin:calc(var(--padding) * 1.1) 0 0 0;overscroll-behavior:auto}}#keyboard-wrapper{width:100%;height:var(--keyboard-height);display:flex;justify-content:center;position:fixed;left:0;bottom:0;background-image:linear-gradient(0deg,var(--blue-4) 0,var(--blue-5) 25%,var(--blue-5) 80%,var(--blue-4) 100%);border-top:var(--border-1) solid var(--blue-6);box-shadow:inset calc((var(--layout-unit) * -2)/ var(--layout)) 0 calc((var(--layout-unit) * 7)/ var(--layout)) var(--blue-4),inset calc((var(--layout-unit) * 2)/ var(--layout)) 0 calc((var(--layout-unit) * 7)/ var(--layout)) var(--blue-4),var(--section-box-shadow);z-index:102}#keyboard-container{width:calc((var(--layout-unit) * 100));display:flex;align-items:center;justify-content:space-between;padding:var(--margin) calc((var(--layout-unit) * 2)) calc((var(--layout-unit) * 2))}.keyboard-btn{width:var(--btn-size);height:calc(var(--btn-size) + (var(--btn-size) * var(--3d-domino-depth)));padding:0 0 calc(var(--btn-size) * var(--3d-domino-depth)) 0;font-size:0;line-height:0;background-color:var(--white);background-position:center calc((var(--btn-size) * var(--3d-domino-depth))/ 3.33);background-repeat:no-repeat;background-size:90%;border:var(--border-2) solid var(--black);border-radius:calc((var(--layout-unit) * 1));box-shadow:inset 0 calc(var(--btn-size) * var(--3d-domino-depth) * -1) calc(var(--btn-size) * var(--3d-domino-blur)) hsla(0,0%,0%,.35),0 calc(var(--btn-size) * var(--3d-cast-shadow-depth)) calc(var(--btn-size) * var(--3d-cast-shadow-blur)) var(--blue-2);cursor:pointer}@media (hover:hover) and (pointer:fine){.keyboard-btn:hover{transform:var(--btn-hover-transform);box-shadow:inset 0 calc(var(--btn-size) * var(--3d-domino-depth) * -1) calc(var(--btn-size) * var(--3d-domino-blur)) hsla(0,0%,0%,.35),0 calc(var(--btn-size) * var(--3d-cast-shadow-depth)) calc(var(--btn-size) * var(--3d-cast-shadow-blur)) var(--blue-2),0 0 calc((var(--layout-unit) * 7)/ var(--layout)) var(--blue-6)}}#build-btn-keyboard{padding-top:.05em;background-image:linear-gradient(to bottom,var(--green-3),var(--green-1))}#build-btn-keyboard::before{background-image:linear-gradient(to bottom,var(--green-4),var(--green-2))}@media screen and (max-width:800px){#keyboard-wrapper{bottom:-100%;background-image:linear-gradient(to bottom,var(--blue-4),var(--blue-5))}#keyboard-container{flex-wrap:wrap;padding:calc((var(--layout-unit) * 1.5)) calc((var(--layout-unit) * 5)) calc((var(--layout-unit) * 3.5))}#keyboard-wrapper.active{bottom:0}#keyboard-wrapper button{margin:calc((var(--layout-unit) * 1.75))}.keyboard-btn{border:var(--border-1) solid var(--black);border-radius:calc((var(--layout-unit) * 3.75))}#build-btn-keyboard{width:70.5%}}#calculator-wrapper{width:100%;height:100%;display:none;align-items:center;justify-content:center;position:absolute;top:0;left:0;background-color:hsla(206,95%,8%,.9);backdrop-filter:blur(calc((var(--layout-unit) * 3) / var(--layout)));-webkit-backdrop-filter:blur(calc((var(--layout-unit) * 3) / var(--layout)));z-index:101}#clear-calculator-btn,#hide-calculator-btn{--calculator-btn-size:calc((var(--layout-unit) * 12) / var(--layout));--calculator-btn-margin:calc((var(--layout-unit) * 6) / var(--layout));width:var(--calculator-btn-size);height:var(--calculator-btn-size);display:flex;align-items:center;justify-content:center;position:absolute;top:var(--calculator-btn-margin);padding:0;border-radius:50%;box-shadow:var(--btn-inset),0 calc((var(--layout-unit) * .5)/ var(--layout)) calc((var(--layout-unit) * .3)/ var(--layout)) hsla(206,95%,8%,.9);cursor:pointer}#clear-calculator-btn{left:var(--calculator-btn-margin);background-image:linear-gradient(to bottom,var(--green-3),var(--green-1))}#clear-calculator-btn:before{background-image:linear-gradient(to bottom,var(--green-4),var(--green-2))}#hide-calculator-btn{right:var(--calculator-btn-margin);background-image:linear-gradient(to bottom,var(--red-3),var(--red-1))}#hide-calculator-btn:before{background-image:linear-gradient(to bottom,var(--red-4),var(--red-2))}#clear-calculator-btn svg,#hide-calculator-btn svg{width:75%;height:auto;transform:translateY(calc((var(--layout-unit) * -.35)/ var(--layout)));fill:var(--white);filter:var(--filter-shadow)}#calculator-total{font-size:calc((var(--layout-unit) * 35)/ var(--layout));text-align:center}#calculator-total.large-digit{font-size:calc((var(--layout-unit) * 30)/ var(--layout))}@media screen and (max-width:800px){#calculator-wrapper{width:calc((var(--layout-unit) * 100));height:100vh;align-items:flex-start;position:fixed;top:0;left:0}#clear-calculator-btn,#hide-calculator-btn{--calculator-btn-size:calc((var(--layout-unit) * 15) / var(--layout))}#calculator-total{margin:calc((var(--layout-unit) * 20)) 0 0}}[data-pip-value="1"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" fill="white"/><circle cx="25" cy="25" r="6" transform="rotate(90 25 25)" fill="%232595E7"/></svg>')}[data-pip-value="2"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" transform="matrix(0 -1 1 0 0 50)" fill="white"/><circle cx="40" cy="10" r="6" fill="%23007636"/><circle cx="10" cy="40" r="6" fill="%23007636"/></svg>')}[data-pip-value="3"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" transform="matrix(0 -1 1 0 0 50)" fill="white"/><circle cx="40" cy="10" r="6" fill="%23DA2B6A"/><circle cx="25" cy="25" r="6" fill="%23DA2B6A"/><circle cx="10" cy="40" r="6" fill="%23DA2B6A"/></svg>')}[data-pip-value="4"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" fill="white"/><circle cx="40" cy="40" r="6" transform="rotate(90 40 40)" fill="%237F735C"/><circle cx="10" cy="40" r="6" transform="rotate(90 10 40)" fill="%237F735C"/><circle cx="40" cy="10" r="6" transform="rotate(90 40 10)" fill="%237F735C"/><circle cx="10" cy="10" r="6" transform="rotate(90 10 10)" fill="%237F735C"/></svg>')}[data-pip-value="5"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" fill="white"/><circle cx="25" cy="25" r="6" transform="rotate(90 25 25)" fill="%231556A5"/><circle cx="40" cy="40" r="6" transform="rotate(90 40 40)" fill="%231556A5"/><circle cx="10" cy="40" r="6" transform="rotate(90 10 40)" fill="%231556A5"/><circle cx="40" cy="10" r="6" transform="rotate(90 40 10)" fill="%231556A5"/><circle cx="10" cy="10" r="6" transform="rotate(90 10 10)" fill="%231556A5"/></svg>')}[data-pip-value="6"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" fill="white"/><circle cx="40" cy="40" r="6" fill="%23FFC20A"/><circle cx="40" cy="25" r="6" transform="rotate(90 40 25)" fill="%23FFC20A"/><circle cx="40" cy="10" r="6" transform="rotate(90 40 10)" fill="%23FFC20A"/><circle cx="10" cy="40" r="6" transform="rotate(90 10 40)" fill="%23FFC20A"/><circle cx="10" cy="25" r="6" transform="rotate(90 10 25)" fill="%23FFC20A"/><circle cx="10" cy="10" r="6" fill="%23FFC20A"/></svg>')}[data-pip-value="7"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" fill="white"/><circle cx="25" cy="25" r="6" fill="%237D65AA"/><circle cx="40" cy="40" r="6" fill="%237D65AA"/><circle cx="40" cy="25" r="6" transform="rotate(90 40 25)" fill="%237D65AA"/><circle cx="40" cy="10" r="6" transform="rotate(90 40 10)" fill="%237D65AA"/><circle cx="10" cy="40" r="6" transform="rotate(90 10 40)" fill="%237D65AA"/><circle cx="10" cy="25" r="6" transform="rotate(90 10 25)" fill="%237D65AA"/><circle cx="10" cy="10" r="6" fill="%237D65AA"/></svg>')}[data-pip-value="8"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" fill="white"/><circle cx="25" cy="40" r="6" fill="%23006654"/><circle cx="25" cy="10" r="6" fill="%23006654"/><circle cx="40" cy="40" r="6" fill="%23006654"/><circle cx="40" cy="25" r="6" transform="rotate(90 40 25)" fill="%23006654"/><circle cx="40" cy="10" r="6" transform="rotate(90 40 10)" fill="%23006654"/><circle cx="10" cy="40" r="6" transform="rotate(90 10 40)" fill="%23006654"/><circle cx="10" cy="25" r="6" transform="rotate(90 10 25)" fill="%23006654"/><circle cx="10" cy="10" r="6" fill="%23006654"/></svg>')}[data-pip-value="9"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" fill="white"/><circle cx="40" cy="40" r="6" fill="%235846a0"/><circle cx="25" cy="40" r="6" transform="rotate(90 25 40)" fill="%235846a0"/><circle cx="10" cy="40" r="6" transform="rotate(90 10 40)" fill="%235846a0"/><circle cx="40" cy="25" r="6" transform="rotate(90 40 25)" fill="%235846a0"/><circle cx="25" cy="25" r="6" transform="rotate(90 25 25)" fill="%235846a0"/><circle cx="10" cy="25" r="6" transform="rotate(90 10 25)" fill="%235846a0"/><circle cx="40" cy="10" r="6" transform="rotate(90 40 10)" fill="%235846a0"/><circle cx="25" cy="10" r="6" fill="%235846a0"/><circle cx="10" cy="10" r="6" fill="%235846a0"/></svg>')}[data-pip-value="10"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" transform="matrix(0 -1 1 0 0 50)" fill="white"/><circle cx="41.5" cy="8.5" r="4.5" fill="%23FF8C00"/><circle cx="41.5" cy="19.5" r="4.5" transform="rotate(-90 41.5 19.5)" fill="%23FF8C00"/><circle cx="41.5" cy="30.5" r="4.5" transform="rotate(-90 41.5 30.5)" fill="%23FF8C00"/><circle cx="41.5" cy="41.5" r="4.5" transform="rotate(-90 41.5 41.5)" fill="%23FF8C00"/><circle cx="25" cy="8.5" r="4.5" fill="%23FF8C00"/><circle cx="25" cy="41.5" r="4.5" transform="rotate(-90 25 41.5)" fill="%23FF8C00"/><circle cx="8.5" cy="8.5" r="4.5" fill="%23FF8C00"/><circle cx="8.5" cy="19.5" r="4.5" transform="rotate(-90 8.5 19.5)" fill="%23FF8C00"/><circle cx="8.5" cy="30.5" r="4.5" transform="rotate(-90 8.5 30.5)" fill="%23FF8C00"/><circle cx="8.5" cy="41.5" r="4.5" transform="rotate(-90 8.5 41.5)" fill="%23FF8C00"/></svg>')}[data-pip-value="11"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" transform="matrix(0 -1 1 0 0 50)" fill="white"/><circle cx="41.5" cy="8.5" r="4.5" fill="%23313131"/><circle cx="41.5" cy="19.5" r="4.5" transform="rotate(-90 41.5 19.5)" fill="%23313131"/><circle cx="41.5" cy="30.5" r="4.5" transform="rotate(-90 41.5 30.5)" fill="%23313131"/><circle cx="41.5" cy="41.5" r="4.5" transform="rotate(-90 41.5 41.5)" fill="%23313131"/><circle cx="25" cy="8.5" r="4.5" fill="%23313131"/><circle cx="25" cy="25" r="4.5" transform="rotate(-90 25 25)" fill="%23313131"/><circle cx="25" cy="41.5" r="4.5" transform="rotate(-90 25 41.5)" fill="%23313131"/><circle cx="8.5" cy="8.5" r="4.5" fill="%23313131"/><circle cx="8.5" cy="19.5" r="4.5" transform="rotate(-90 8.5 19.5)" fill="%23313131"/><circle cx="8.5" cy="30.5" r="4.5" transform="rotate(-90 8.5 30.5)" fill="%23313131"/><circle cx="8.5" cy="41.5" r="4.5" transform="rotate(-90 8.5 41.5)" fill="%23313131"/></svg>')}[data-pip-value="12"]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" transform="matrix(0 -1 1 0 0 50)" fill="white"/><circle cx="41.5" cy="8.5" r="4.5" fill="%238A8A8A"/><circle cx="41.5" cy="19.5" r="4.5" transform="rotate(-90 41.5 19.5)" fill="%238A8A8A"/><circle cx="41.5" cy="30.5" r="4.5" transform="rotate(-90 41.5 30.5)" fill="%238A8A8A"/><circle cx="41.5" cy="41.5" r="4.5" transform="rotate(-90 41.5 41.5)" fill="%238A8A8A"/><circle cx="25" cy="8.5" r="4.5" fill="%238A8A8A"/><circle cx="25" cy="19.5" r="4.5" transform="rotate(-90 25 19.5)" fill="%238A8A8A"/><circle cx="25" cy="30.5" r="4.5" transform="rotate(-90 25 30.5)" fill="%238A8A8A"/><circle cx="25" cy="41.5" r="4.5" transform="rotate(-90 25 41.5)" fill="%238A8A8A"/><circle cx="8.5" cy="8.5" r="4.5" fill="%238A8A8A"/><circle cx="8.5" cy="19.5" r="4.5" transform="rotate(-90 8.5 19.5)" fill="%238A8A8A"/><circle cx="8.5" cy="30.5" r="4.5" transform="rotate(-90 8.5 30.5)" fill="%238A8A8A"/><circle cx="8.5" cy="41.5" r="4.5" transform="rotate(-90 8.5 41.5)" fill="%238A8A8A"/></svg>')}