@import "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,700;1,700&display=swap";*{-webkit-tap-highlight-color:transparent;box-sizing:border-box;font-optical-sizing:auto;margin:0;font-family:Nunito,sans-serif;font-style:normal;font-weight:700;line-height:1}html,body{overscroll-behavior:none}body{display:flex;background-color:#444;justify-content:center;align-items: center;width:100dvw;height:100dvh}#app{box-sizing:border-box;position:relative;background-color:#e2e0db;width:100dvw;min-width:375px;max-width:375px;height:100dvh;min-height:667px;max-height:667px}canvas{cursor:crosshair;pointer-events:auto;position:absolute;z-index:1;background-color:#eee;width:100%;height:100%;inset:0}.view{position:absolute;width:100%;height:100%;padding:5px;inset:0}.view.portrait{display:grid;grid-template-rows:repeat(16,1fr);grid-template-columns:repeat(8,1fr);gap:5px}.view.landscape{display:none}.edgebtn{color:#000;cursor:pointer;display:flex;letter-spacing:1px;position:relative;z-index:2;overflow:hidden;opacity:1;background-color:#d6d6d6cc;border:3px solid #000;border-radius:4px;justify-content:center;align-items: center;padding:0;font-size:1rem;font-weight:600}@media (hover:hover){.edgebtn:hover{color:#fff!important;background-color:#000!important}.edgebtn.red:hover{color:#fff;background-color:#b73e3edd}.edgebtn:hover img{filter:invert(1)}}.edgebtn.selected{color:#fff;background-color:#b73e3edd;border-color:#000}.edgebtn.red{color:#b73e3edd;background-color:#fff}.edgebtn.red.selected{color:#fff;background-color:#b73e3edd}.edgebtn.disabled{opacity:.25;pointer-events:none}.edgebtn.inactive{opacity:.25}.edgebtn.faded{opacity:0;pointer-events:none}.edgebtn.top.tucked{transition:transform .3s ease-in-out;transform:translateY(calc(-100% - 10px))}.edgebtn.right.tucked{transition:transform .3s ease-in-out;transform:translate(calc(100% + 10px))}.edgebtn.bottom.tucked{transition:transform .3s ease-in-out;transform:translateY(calc(100% + 10px))}.edgebtn.left.tucked{transition:transform .3s ease-in-out;transform:translate(calc(-100% - 10px))}.edgebtn:not(.tucked){transition:transform .3s ease-in-out;transform:translate(0)}.edgebtn img{height:34px}.shim{pointer-events:none}.w1{grid-column:span 1}.h1{grid-row:span 1}.w2{grid-column:span 2}.h2{grid-row:span 2}.w3{grid-column:span 3}.h3{grid-row:span 3}.w4{grid-column:span 4}.h4{grid-row:span 4}.w5{grid-column:span 5}.h5{grid-row:span 5}.w6{grid-column:span 6}.h6{grid-row:span 6}.w8{grid-column:span 8}.h8{grid-row:span 8}.w12{grid-column:span 12}.h12{grid-row:span 12}#colors{display:grid;grid-template-columns:repeat(4,1fr);z-index:10;background-color:#d6d6d6cc;border:4px solid #000;border-radius:14px;gap:10px;box-shadow:0 0 10px 5px #0008}#colors .pot{aspect-ratio:1;cursor:pointer;border:4px solid #000;border-radius:99px;min-width:40px}#information h1{letter-spacing:1px}#information p{position:relative;left:7px}#information .version{font-weight:400}#information a{letter-spacing:.5px;position:relative;font-weight:400;top:1px;left:2px}.edgebtn[data-op=choose-color]{padding:3px}.edgebtn[data-op=choose-color] span{display:block;border-radius:2px;width:100%;height:100%}@media screen and (orientation:landscape){#app{min-width:667px;max-width:667px;min-height:375px;max-height:375px}.view.portrait{display:none}.view.landscape{display:grid;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(12,1fr);gap:5px}#colors{grid-template-columns:repeat(8,1fr)}}.outlined{outline:1px solid red;z-index:1000000}.debug{color:#fff;position:absolute;z-index:20;background-color:#a00;padding:5px;top:0;left:0}#notice{color:#000;display:flex;position:absolute;z-index:1;justify-content:center;align-items: center;margin:0;font-size:2rem;font-weight:700;line-height:0;inset:0;display:none!important}@media screen and (orientation:portrait){#notice{display:none!important}}.modal{display:flex;position:relative;z-index:10;justify-content:center;align-items: center;padding:.5rem}.modal>div{display:flex;background-color:#fff;border:3px solid #000;border-radius:0;flex-direction:column;justify-content:space-evenly;gap:5px;padding:1rem;font-size:1.1rem}.lightbox{display:flex;position:absolute;z-index:10;background-color:#0008;justify-content:center;align-items: center;width:100%;height:100%;inset:0}.no-scroll-area{touch-action:none;overflow:hidden}.no-select{-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.dn{display:none!important}.hidden,.hidden *{display:none!important;pointer-events:none!important}.invisible,.invisible *{opacity:0!important;pointer-events:none!important}.flex{display:flex!important}.row{flex-direction:row!important}.col{flex-direction:column!important}.flex1,.grow{flex:1}.gap5{gap:5px!important}.gap10{gap:10px!important}.gap20{gap:20px!important}.gap60{gap:60px!important}.content-between{justify-content:space-between}.wrap{flex-wrap:wrap!important}.content-end{justify-content:flex-end!important}.position-start{justify-self:flex-start!important}.mb050{margin-bottom:.5rem}.mb100{margin-bottom:1rem}.mb200{margin-bottom:2rem}.mauto{margin:auto}.mautox{margin:0 auto}.mautoy{margin:auto 0}.bgn{background-color:#0000!important}.bgr{background-color:red}.red{color:red}.ob{outline:1px solid #000!important}.oc{outline:1px solid #0ff!important}.of{outline:1px solid #f0f!important}.or{outline:1px solid red!important}.ow{outline:1px solid #fff!important}.bn{border:none!important}.bob{border-color:#000!important}.boc{border-color:#0ff!important}.bof{border-color:#f0f!important}.bor{border-color:red!important}.bow{border-color:#fff!important}.bog{border-color:gray!important}.serif{font-family:serif!important}.bold{font-weight:700!important}.f1{font-size:3rem!important}.f2{font-size:2.25rem!important}.f3{font-size:1.5rem!important}.f4{font-size:1.25rem!important}.f5{font-size:1rem!important}.f6{font-size:.875rem!important}.i{font-style:italic!important}.b{font-weight:700!important}.tc{text-align:center!important}.underline{text-decoration:underline!important}.strike{text-decoration:line-through!important}.ttc{text-transform:capitalize!important}.ttu{text-transform:uppercase!important}.lower{position:relative;top:3px}.raise{position:relative;top:-3px}.centered{position:absolute;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}