body{font-family:Fuzzy Bubbles,cursive;background-color:#f5f5f5}@font-face{font-family:Fuzzy Bubbles;src:url(/FuzzyBubbles-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}a{color:inherit;text-decoration:underline}a#about{display:block;width:100%;font-size:12px;margin:16px;text-align:left;text-decoration:none;color:#0009}#container{display:flex;background-color:#fff}form{display:flex;flex-direction:column;align-items:center}form .form-group{display:flex;flex-direction:row;align-items:center;margin-bottom:16px}form .button-group{display:flex;flex-direction:row;gap:16px;width:100%}form label{width:40px;text-align:right;margin-right:16px;font-size:16px}form input[type=text]{padding:8px 12px;border:none;border-bottom:1px solid rgba(0,0,0,.2);font-size:16px;font-family:inherit}form button{margin-top:0;padding:8px 16px;background-color:#000000b3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;font-family:inherit}form button:hover{background-color:#000000e6}form button:disabled{background-color:#0003;cursor:progress}#notification{padding:16px;background-color:#000000b3;color:#fff;border-radius:4px;box-shadow:0 4px 8px #0003}#notification.hidden{display:none}#notification.error{background-color:#ff0000b3}#notification.info{background-color:#0000ffb3}dialog{padding:16px;background-color:#fff;border:none;border-radius:4px;box-shadow:0 4px 8px #0003}::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0003}@media (min-width: 768px){body{margin:64px}#container{padding:64px;margin:0 auto;flex-direction:row;align-items:center;width:fit-content;border-radius:8px;box-shadow:0 8px 16px #0000001a}#fold{width:1px;margin:-64px 64px;align-self:stretch;background:#fff;box-shadow:8px 0 8px #0009}#canvas{width:450px;height:450px;padding:32px;margin:-32px;border-radius:6px}form{margin-top:0;width:450px}form .form-group{width:100%;margin-bottom:32px}form input[type=text]{width:calc(100% - 40px)}form button{width:100%}form .button-group{margin-top:32px}}@media (max-width: 767px){body{margin:0}#container{flex-direction:column;height:100vh}#frame{width:calc(100vw - 32px);height:calc(100vw - 32px);margin:0}#canvas{padding:16px;margin:0}#fold{display:none}form{padding:0;margin:64px 16px;width:calc(100vw - 32px)}form .form-group{width:100%}form input[type=text]{width:calc(100% - 40px)}form button{width:100%;margin-bottom:16px}}
