:root{font-family:Roboto,sans-serif;line-height:1.5;font-weight:400;display:inline-block;color:#fff;background-color:#070f2b;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}body{position:relative;margin:0;height:100svh;min-height:100svh;width:100%;min-width:100%;background:linear-gradient(#1b1a55,#070f2b);touch-action:manipulation}#root{height:100svh;min-height:100svh;position:relative}h1{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;padding-top:35px;margin-top:0;font-size:100px;line-height:1.1;text-align:center;text-shadow:3px 3px black,-3px 3px black,3px -3px black,-3px -3px black}#story-textarea{font-size:24px;display:block;position:relative;padding:10px;width:80%;margin:0 auto;border:#535C91 solid 8px;border-radius:10px}#blanks{display:grid;grid-template-columns:auto auto auto auto;gap:15px;margin:30px}.blank{margin:auto;display:grid;grid-template-columns:55% 45%;text-align:center;width:250px}label{font-size:18px}.labelInput,.lengthInput{font-size:16px;border:#535C91 solid 8px;border-radius:10px}.labelInput{border-right:#535C91 solid 2px;border-top-right-radius:0;border-bottom-right-radius:0}.lengthInput{border-left:#535C91 solid 2px;border-top-left-radius:0;border-bottom-left-radius:0}#code-container{position:relative}#copy-button{position:absolute;top:1em;right:3.5em;width:2em}#copy-button:hover{cursor:pointer}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}#code{font-family:Roboto Mono,monospace;margin:40px;padding:10px;border:#535C91 solid 8px;border-radius:10px;background-color:#070f2b}#copy-popup-container{position:absolute;overflow:hidden;height:fit-content;bottom:0;left:0;right:0}#copy-popup{position:relative;font-weight:700;left:0;right:0;max-width:300px;font-size:24px;color:#000;text-align:center;padding:10px;margin:0 auto;background-color:#535c91;border:#9290C3 solid 8px;box-sizing:border-box;border-bottom:none;border-top-left-radius:10px;border-top-right-radius:10px;transform:translateY(300px);transition:transform 1s ease-out;-webkit-user-drag:none}#copy-popup-container .popout{transform:translateY(0)}@media only screen and (max-width: 1100px){#blanks{grid-template-columns:auto auto auto}}@media only screen and (max-width: 840px){#blanks{grid-template-columns:auto auto}}@media only screen and (max-width: 560px){#blanks{grid-template-columns:auto}h1{font-size:36px}#story-textarea{font-size:large}}