@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:monospace,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}.view .faded{opacity:0;pointer-events:none}.view .tucked{transition:transform .3s ease-in-out;transform:translateY(calc(-100% - 200px))}.view .top.tucked{transition:transform .3s ease-in-out;transform:translateY(calc(-100% - 10px))}.view .right.tucked{transition:transform .3s ease-in-out;transform:translate(calc(100% + 10px))}.view .bottom.tucked{transition:transform .3s ease-in-out;transform:translateY(calc(100% + 10px))}.view .left.tucked{transition:transform .3s ease-in-out;transform:translate(calc(-100% - 10px))}.view :not(.tucked){transition:transform .3s ease-in-out;transform:translate(0)}.view .header{display:flex;z-index:1;background-color:#fff8;border-radius:4px;justify-content:center;align-items: center}.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;background-color:#000}.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.hot{color:#000;background-color:#ffc300}.edgebtn.hot:hover{color:#ffc300;background-color:#000}.edgebtn.danger{color:#fff;background-color:#b73e3edd}.edgebtn.danger:hover{color:#fff;background-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 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}.w7{grid-column:span 7}.h7{grid-row:span 7}.w8{grid-column:span 8}.h8{grid-row:span 8}.w9{grid-column:span 9}.h9{grid-row:span 9}.w10{grid-column:span 10}.h10{grid-row:span 10}.w11{grid-column:span 11}.h11{grid-row:span 11}.w12{grid-column:span 12}.h12{grid-row:span 12}.w13{grid-column:span 13}.h13{grid-row:span 13}.w14{grid-column:span 14}.h14{grid-row:span 14}.w15{grid-column:span 15}.h15{grid-row:span 15}.w16{grid-column:span 16}.h16{grid-row:span 16}.edgebtn.w2.h2 svg{width:33%;height:33%}#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%}.edgebtn[data-type=tool]{background-color:#92b6cc}.edgebtn[data-type=tool]:hover,.edgebtn.selected[data-type=tool]{color:#fff;background-color:#4a7b99}.edgebtn[data-type=size]{background-color:#ccafe7}.edgebtn[data-type=size]:hover,.edgebtn.selected[data-type=size]{color:#fff;background-color:#9352cf}.edgebtn[data-type=mode]{background-color:#badcc4}.edgebtn[data-type=mode]:hover,.edgebtn.selected[data-type=mode]{color:#fff;background-color:#528963}div[data-group=drawing-ops]{display:flex;grid-area:16/1/span 1/span 3;z-index:1;gap:5px}div[data-group=drawing-ops] .edgebtn{flex:1}@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)}.edgebtn[data-op=fade]{grid-area:8/1}.edgebtn[data-op=swap]{grid-area:8/12}}.outlined{outline:1px solid red;z-index:1000000}.view.portrait[data-page=experiment-1]{display:grid;grid-template-columns:repeat(1,1fr);grid-template-rows:repeat(6,1fr);grid-template-areas:"" "" "modes" "sizes colors" "tools" "collapser";z-index:1}div.modes{grid-area:modes}div.sizes{grid-area:sizes}div.colors{grid-area:colors}div.tools{grid-area:tools}div.collapser{grid-area:collapser}.view.portrait[data-page=experiment-1]>div{display:flex;flex-flow:wrap}.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;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}.self-center{align-self: center!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}.p1{padding:.25rem!important}.p2{padding:.5rem!important}.p3{padding:1rem!important}.p4{padding:1.5rem!important}.pt5{padding-top:2rem!important}.pt1{padding-top:.25rem!important}.pt2{padding-top:.5rem!important}.pt3{padding-top:1rem!important}.pt4{padding-top:1.5rem!important}.pt5{padding-top:2rem!important}.pr1{padding-right:.25rem!important}.pr2{padding-right:.5rem!important}.pr3{padding-right:1rem!important}.pr4{padding-right:1.5rem!important}.pr5{padding-right:2rem!important}.pb1{padding-bottom:.25rem!important}.pb2{padding-bottom:.5rem!important}.pb3{padding-bottom:1rem!important}.pb4{padding-bottom:1.5rem!important}.pb5{padding-bottom:2rem!important}.pl1{padding-left:.25rem!important}.pl2{padding-left:.5rem!important}.pl3{padding-left:1rem!important}.pl4{padding-left:1.5rem!important}.pl5{padding-left:2rem!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}.w100{width:100%!important}.z1{z-index:1!important}.z10{z-index:10!important}.z100{z-index:100!important}.z1000{z-index:1000!important}.centered{position:absolute;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}