*,*:before,*:after{box-sizing:border-box}*:not(dialog){margin:0}body{-webkit-font-smoothing:antialiased}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}html,body{background-color:#333;font-family:Varela Round,Arial Rounded MT Bold,Fredoka One,Arial Black,sans-serif;margin:0;overflow:hidden;padding:0;touch-action:none}header{text-align:right;inset:30px;pointer-events:none;position:fixed;z-index:9999;>*{pointer-events:initial}}main{inset:0;overflow:auto;position:absolute;scrollbar-color:#007aff transparent;scrollbar-width:none;touch-action:none;section{position:relative;transform-origin:0 0;div{aspect-ratio:1 / 1;background-color:#f4f4f4;background-image:radial-gradient(#cccccc 2px,transparent 2px);background-size:50px 50px;inline-size:var(--fridge-size, 10px);inset:0;position:absolute;transform:scale(var(--zoom, 1));transform-origin:0 0;user-select:none}}}main article{--rotation: 0deg;--cos: cos(var(--rotation, 0deg));--sin: sin(var(--rotation, 0deg));--shadow-x: calc(var(--cos) + var(--sin));--shadow-y: calc(var(--cos) - var(--sin));cursor:grab;font-size:80px;font-weight:900;position:absolute;text-shadow:calc(-2px * var(--shadow-x)) calc(-2px * var(--shadow-y)) 0 color-mix(in srgb,currentColor,white 40%),calc(1px * var(--shadow-x)) calc(1px * var(--shadow-y)) 0 color-mix(in srgb,currentColor,black 20%),calc(2px * var(--shadow-x)) calc(2px * var(--shadow-y)) 0 color-mix(in srgb,currentColor,black 20%),calc(3px * var(--shadow-x)) calc(3px * var(--shadow-y)) 0 color-mix(in srgb,currentColor,black 32%),calc(4px * var(--shadow-x)) calc(4px * var(--shadow-y)) 0 color-mix(in srgb,currentColor,black 44%),calc(5px * var(--shadow-x)) calc(5px * var(--shadow-y)) 0 color-mix(in srgb,currentColor,black 56%),calc(10px * var(--shadow-x)) calc(10px * var(--shadow-y)) 10px rgba(0,0,0,.4);touch-action:none;transform:rotate(var(--rotation));transition:transform .1s ease-in-out;user-select:none;&.dragging{cursor:grabbing;filter:drop-shadow(15px 15px 15px rgba(0,0,0,.3));transform:scale(1.1) rotate(var(--rotation));transition:none}&[data-color=blue]{color:#007aff}&[data-color=green]{color:#34c759}&[data-color=orange]{color:#ff9500}&[data-color=purple]{color:#af52de}&[data-color=red]{color:#ff3b30}&[data-color=yellow]{color:#fc0}}.sr-only{block-size:1px;border:0;clip:rect(0,0,0,0);margin:-1px;overflow:hidden;position:absolute;padding:0;white-space:nowrap;inline-size:1px}aside{align-items:center;container-type:inline-size;display:grid;flex-wrap:wrap;grid-template-columns:1fr auto 1fr;inset-block-end:30px;inset-inline:30px;justify-content:space-between;margin-inline:auto;max-inline-size:1920px;pointer-events:none;position:fixed;>*{pointer-events:initial;width:160px}>:nth-child(1){grid-column:2;justify-self:center}>:nth-child(2){--button-color: #33ccff;grid-column:3;justify-self:end}@container (width < 600px){>:nth-child(1){grid-column:1;justify-self:start}>:nth-child(2){grid-column:3;justify-self:end}}}button:not(.button-group button),.button-group{--brightness: 1;--offset: 0;--shadow: 6px;background-color:var(--button-color, #ffffff);border:3px solid currentColor;border-radius:12px;box-shadow:var(--shadow) var(--shadow) 0 #222;color:#222;cursor:pointer;filter:brightness(var(--brightness));font-size:18px;font-weight:700;padding:12px 24px;transform:translate(var(--offset),var(--offset));transition:transform .1s,box-shadow .1s;&:hover{--brightness: 1.05;--offset: -2px;--shadow: 8px}&:focus-visible{background-color:#fffdf5;outline:none}&:active{--brightness: .95;--offset: 6px;--shadow: 0}}.button-group{--button-color: #ffcc00;display:grid;grid-template-columns:1fr 1fr 1fr;padding:0;&:hover{--brightness: 1 !important}button{background:var(--button-color);border:none;cursor:pointer;filter:brightness(var(--brightness));padding-block:12px;&:first-child{border-radius:9px 0 0 9px}&:last-child{border-radius:0 9px 9px 0}&:not(:first-child):not(:last-child){border:3px solid #222222;border-block-width:0}&:hover{--brightness: 1.05}&:focus-visible{background-color:#fffdf5;outline:none}&:active{--brightness: .95}}}dialog{background-color:#fff;border:4px solid #222222;border-radius:20px;box-shadow:8px 8px #222;color:#222;container-type:inline-size;inline-size:90%;max-inline-size:700px;overflow:visible;padding:0;position:relative;&::backdrop{background-color:#fff9;backdrop-filter:blur(6px) grayscale()}button:first-child{aspect-ratio:1 / 1;block-size:45px;border-radius:50%;inset-block-start:-18px;inset-inline-end:-18px;padding:0;position:absolute}header{background-color:#3cf;border-block-end:4px solid #222222;border-radius:15px 15px 0 0;padding:20px;position:static;text-align:center}h2{color:#222;font-size:32px;letter-spacing:1px;margin:0}section{display:flex;gap:30px;flex-wrap:wrap;max-block-size:calc(100vh - 250px);overflow:auto;padding:30px;&::-webkit-scrollbar{width:16px}&::-webkit-scrollbar-thumb{background-color:#fc0;border-radius:10px;border:3px solid #222222}&::-webkit-scrollbar-thumb:hover{background-color:#34c759}&::-webkit-scrollbar-track{background:transparent;margin-block:30px}@supports (-moz-appearance: none){scrollbar-color:#ffcc00 transparent;scrollbar-width:auto}}article{background:#fffdf5;border:4px solid #222222;border-radius:16px;box-shadow:6px 6px #222;flex:1;min-inline-size:250px}h3{background-color:#f9c;border-bottom:4px solid #222222;border-radius:12px 12px 0 0;font-size:20px;padding-block:15px;text-align:center}ul{font-family:sans-serif;font-size:15px;line-height:1.6;padding:20px 10px 20px 30px}li{margin-bottom:12px}button:last-child{--button-color: #34c759;inline-size:inherit;margin:30px}@container (width > 88vw){section{margin-inline-end:20px}}}
/*# sourceMappingURL=bundle.css.map */