@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500&display=swap";@import "https://fonts.googleapis.com/css2?family=Special+Elite&display=swap";@import "https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600&display=swap";@import "https://fonts.googleapis.com/css2?family=Anton&display=swap";html,body{-webkit-font-smoothing:antialiased;background-color:#222;width:100%;height:100%;margin:0;padding:0;overflow:hidden}#root{justify-content:center;width:100%;height:100%;display:flex}.pwa-banner{color:#fff;z-index:10050;background:#111;border-radius:12px;flex-direction:column;gap:8px;width:calc(100% - 48px);max-width:400px;padding:16px 20px;font-family:-apple-system,sans-serif;animation:.4s cubic-bezier(.16,1,.3,1) slideUp;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000040}.pwa-banner-header{justify-content:space-between;align-items:center;font-size:1.1rem;font-weight:600;display:flex}.pwa-banner-text{color:#ccc;font-size:.95rem;line-height:1.4}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%)}}.theme-fridge{--bg-color:#d8dbe2;--bg-texture:radial-gradient(circle at 50% 20%, transparent 20%, #00000080 120%), repeating-linear-gradient(90deg, transparent, transparent 2px, #ffffff26 2px, #ffffff26 4px), repeating-linear-gradient(0deg, transparent, transparent 1px, #0000000a 1px, #0000000a 2px);--bg-export:linear-gradient(135deg, #e4e6ea 0%, #b8bcc6 100%);--tile-bg:#2a2a2a;--tile-text:#f0f0f0;--tile-font:"Fredoka", sans-serif;--tile-shadow:0 4px 6px #0006, inset 0 2px 0 #ffffff26, inset 0 -2px 0 #00000080;--tile-shadow-drag:0 12px 20px #00000080, inset 0 2px 0 #ffffff26, inset 0 -2px 0 #00000080;--tile-border:1px solid #0003;--tile-radius:6px;--tile-padding:10px 16px;--tile-padding-large:14px 24px;--toolbar-bg:#ffffffb3;--toolbar-text:#333}.fridge-decorative-magnet{object-fit:contain;z-index:10;cursor:grab;filter:drop-shadow(2px 4px 6px #0000004d);touch-action:none;will-change:left, top, transform, filter;width:90px;height:90px;position:absolute}.fridge-decorative-magnet.dragging{z-index:998;cursor:grabbing;filter:drop-shadow(4px 8px 12px #0006)}.magnet-shake{animation:.4s cubic-bezier(.36,.07,.19,.97) both magnetShake}@keyframes magnetShake{10%,90%{transform:translate3d(-2px, 0, 0) rotate(var(--rot))}20%,80%{transform:translate3d(4px, 0, 0) rotate(var(--rot))}30%,50%,70%{transform:translate3d(-6px, 0, 0) rotate(var(--rot))}40%,60%{transform:translate3d(6px, 0, 0) rotate(var(--rot))}}.theme-typewriter{--bg-color:#f7f0df;--bg-texture:none;--bg-export:#f7f0df;--tile-bg:transparent;--tile-text:#111;--tile-font:"Special Elite", monospace;--tile-shadow:none;--tile-shadow-drag:none;--tile-border:none;--tile-radius:0px;--tile-padding:4px 8px;--tile-padding-large:6px 12px;--toolbar-bg:#f7f0dfe6;--toolbar-text:#111}.typewriter-bin-container{cursor:pointer;z-index:100;filter:drop-shadow(2px 4px 6px #0000004d);width:128px;height:128px;transition:transform .15s cubic-bezier(.18,.89,.32,1.28);position:absolute;bottom:50px;right:20px}.typewriter-bin-container.active{transform:scale(1.1)rotate(-2deg)}.typewriter-bin-back,.typewriter-bin-front{object-fit:contain;width:100%;height:100%;position:absolute;top:0;left:0}.typewriter-bin-back{z-index:10}.typewriter-bin-content{z-index:20;width:100%;height:100%;position:absolute;top:0;left:0}.typewriter-bin-front{z-index:30;pointer-events:none}.app-container.theme-notebook{--tile-font:"Caveat", cursive;background-color:#edede2;background-image:radial-gradient(circle,#0000000f 1.5px,#0000 1.5px);background-size:24px 24px}.theme-notebook .landing{text-align:center;background-color:#edede2;background-image:radial-gradient(circle,#0000000f 1.5px,#0000 1.5px);background-size:24px 24px;justify-content:center}.theme-notebook .tile{font-family:var(--tile-font);color:#1a365d;box-shadow:none;letter-spacing:1px;background:0 0;padding-right:6px;font-size:2.2rem;font-weight:700}.theme-notebook .tile.large{padding-right:8px;font-size:2.8rem}.notebook-eraser{transform-origin:100% 100%;cursor:pointer;z-index:100;background:linear-gradient(135deg,#f8f8f8 65%,#4a90e2 65%);border-radius:4px;width:70px;height:35px;transition:transform .1s;position:absolute;bottom:40px;right:30px;transform:scale(1.5);box-shadow:2px 4px 8px #0003}.notebook-eraser.active{transform:rotate(-2deg)scale(1.65)}.app-title{font-weight:500;font-family:var(--tile-font);cursor:pointer;font-size:20px}.theme-notebook .toolbar{-webkit-backdrop-filter:none;color:#e0e0e0;background-color:#1a1a1a;background-image:url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");border-bottom:2px solid #000}.theme-notebook .app-title{letter-spacing:1px;font-family:Copperplate,Copperplate Gothic Light,serif;font-size:22px;font-weight:600}.theme-notebook .trashed-item{color:#1a365d;box-shadow:none;background:0 0;justify-content:center;font-family:Caveat,cursive;font-size:2.2rem;font-weight:700}body{touch-action:none;background-color:#121212;justify-content:center;align-items:center;min-height:100dvh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;overflow:hidden}.app-container{background-color:var(--bg-color);background-image:var(--bg-texture);width:100%;height:100dvh;transition:background .3s;position:relative;overflow:hidden}@media (width>=481px){.app-container{border:8px solid #1a1a1a;border-radius:24px;width:480px;height:850px;max-height:90vh;box-shadow:0 0 40px #000c,inset 0 0 20px #00000080}}.toolbar{background:var(--toolbar-bg);height:60px;color:var(--toolbar-text);z-index:9001;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-bottom:1px solid #0000001a;justify-content:space-between;align-items:center;padding:0 20px;display:flex;position:relative}.tile{background:var(--tile-bg);color:var(--tile-text);padding:var(--tile-padding);border-radius:var(--tile-radius);font-family:var(--tile-font);letter-spacing:.5px;-webkit-user-select:none;user-select:none;cursor:grab;box-shadow:var(--tile-shadow);border:var(--tile-border);transform:translate(var(--x), var(--y)) rotate(var(--r));will-change:transform;font-size:20px;font-weight:500;transition:font-size .2s,padding .2s,box-shadow .1s;position:absolute;top:0;left:0}.theme-typewriter .tile{text-shadow:0 0 1px #0000004d}.tile.dragging{cursor:grabbing;box-shadow:var(--tile-shadow-drag);z-index:999;transition:none}.theme-typewriter .tile.dragging{transform:translate(var(--x), var(--y)) rotate(var(--r)) scale(1.15);opacity:.6}.tile.large{padding:var(--tile-padding-large);font-size:30px}.shake{animation:.3s cubic-bezier(.36,.07,.19,.97) both shake}@keyframes shake{0%,to{transform:translate(var(--x), var(--y)) rotate(var(--r))}20%,80%{transform:translate(calc(var(--x) + 3px), var(--y)) rotate(var(--r))}30%,50%,70%{transform:translate(calc(var(--x) - 3px), var(--y)) rotate(var(--r))}40%,60%{transform:translate(calc(var(--x) + 4px), var(--y)) rotate(var(--r))}}.fridge-bin-magnet{object-fit:contain;cursor:pointer;z-index:100;filter:drop-shadow(2px 4px 6px #0000004d);width:128px;height:128px;transition:transform .15s cubic-bezier(.18,.89,.32,1.28);position:absolute;bottom:20px;right:20px}.fridge-bin-magnet.active{transform:scale(1.1)rotate(2deg)}.mini-tile{font-family:var(--tile-font);white-space:nowrap;z-index:3;font-size:8px;position:absolute}.theme-typewriter .mini-tile{color:#111;text-shadow:0 0 1px #0000004d;background:0 0}.paper-bail-container{z-index:40;pointer-events:none;width:100%;height:50px;position:absolute;bottom:0;left:0}.paper-bail-bar{background:linear-gradient(#e0e0e0 0%,#fff 30%,#a0a0a0 100%);border-top:1px solid #fff;border-bottom:1px solid #666;width:110%;height:14px;position:absolute;bottom:20px;left:-5%;box-shadow:0 8px 12px #0003}.paper-bail-ruler{opacity:.6;background-image:linear-gradient(90deg,#555 1px,#0000 1px);background-size:10px 100%;width:100%;height:4px;position:absolute;bottom:6px;left:0}.paper-guide{background:linear-gradient(#f0f0f0,#999);border-left:1px solid #fff;border-radius:6px 6px 0 0;width:32px;height:26px;position:absolute;bottom:15px;box-shadow:2px 4px 6px #0006,inset 1px 1px 2px #fff}.paper-guide.left{left:18%}.paper-guide.right{right:18%}.landing,.overlay-sheet{z-index:10000;flex-direction:column;align-items:center;font-family:-apple-system,sans-serif;display:flex;position:absolute;inset:0}.theme-fridge .landing{text-align:center;background:#f4f4f5;justify-content:center}.theme-typewriter .landing{text-align:center;background:#f5f0e6;justify-content:center}.overlay-sheet{-webkit-backdrop-filter:blur(8px);background:#ffffffeb;justify-content:flex-start;padding:40px 20px}.trashed-grid{flex-wrap:wrap;justify-content:center;gap:12px;width:100%;margin-top:30px;display:flex}.trashed-item:active{transform:scale(.9)}.theme-typewriter .trashed-item{background:#f7f0df;border:1px solid #0000001a}.settings-row{color:#333;border-bottom:1px solid #0000001a;justify-content:space-between;align-items:center;width:100%;padding:16px 0;font-size:18px;display:flex}.theme-button{text-align:left;cursor:pointer;color:#333;background:#f0f0f0;border:1px solid #ccc;border-radius:8px;width:100%;margin-top:12px;padding:16px;font-family:-apple-system,sans-serif;font-size:16px}.theme-button.active{color:#fff;background:#2a2a2a;border-color:#2a2a2a}.settings-footer{color:#888;margin-top:auto;margin-bottom:20px;font-size:12px}.settings-footer a{color:#555;font-weight:600;text-decoration:none}.settings-footer a:hover{text-decoration:underline}.app-container.theme-labelmaker{--tile-font:"Space Grotesk", sans-serif;--bg-color:#e4e2dd;background-image:linear-gradient(#0000000f 1px,#0000 1px),linear-gradient(90deg,#0000000f 1px,#0000 1px);background-size:20px 20px}.theme-labelmaker .landing h1{text-transform:uppercase;letter-spacing:3px;text-shadow:-2px -2px #fff6,2px 2px #000c;background-color:#d32f2f;border-top:2px solid #ffffff1a;border-bottom:2px solid #0006;border-left:3px solid #fff3;border-right:3px solid #0009;border-radius:3px;padding:8px 24px;display:inline-block;box-shadow:0 8px 16px #00000080;color:#fff!important}.labelmaker-bin{object-fit:contain;cursor:pointer;z-index:100;filter:drop-shadow(2px 6px 8px #00000080);height:140px;transition:transform .15s cubic-bezier(.18,.89,.32,1.28);position:absolute;bottom:20px;right:20px}.labelmaker-bin.active{transform:scale(1.08)rotate(-4deg)}.theme-labelmaker .landing{color:#111;background-color:#e4e2dd;background-image:linear-gradient(#0000000f 1px,#0000 1px),linear-gradient(90deg,#0000000f 1px,#0000 1px);background-size:20px 20px}.theme-labelmaker .landing h2,.theme-labelmaker .landing p,.theme-labelmaker .landing div{color:#333!important}.theme-labelmaker .toolbar{color:#fff;background-color:#111;border-bottom:2px solid #000}.theme-labelmaker .app-title{font-family:var(--tile-font);color:#fff;text-transform:uppercase;letter-spacing:2px;text-shadow:-1px -1px #fff6,1px 1px #000c;background-color:#d32f2f;border-left:2px solid #fff3;border-right:2px solid #0009;border-radius:2px;padding:4px 12px;font-size:16px;box-shadow:0 4px 6px #00000080}.theme-labelmaker .tile{font-family:var(--tile-font);text-transform:uppercase;letter-spacing:2px;color:#fff;text-shadow:-1px -1px #fff6,1px 1px #000c;border-top:1px solid #ffffff1a;border-bottom:1px solid #0006;border-left:2px solid #fff3;border-right:2px solid #0009;border-radius:2px;padding:8px 14px;font-weight:600;box-shadow:0 4px 6px #00000080}.theme-labelmaker .tile.large{padding:12px 20px;font-size:26px}.theme-labelmaker .tile.label-red{background-color:#d32f2f}.theme-labelmaker .tile.label-blue{background-color:#1976d2}.theme-labelmaker .tile.label-green{background-color:#388e3c}.theme-labelmaker .tile.label-black{background-color:#212121}.theme-labelmaker .trashed-item{text-transform:uppercase;color:#fff;text-shadow:-1px -1px #fff6,1px 1px #000c;border-left:2px solid #fff3;border-right:2px solid #0009}.app-container.theme-zine{--bg-color:#e8e8e8;--tile-font:"Fredoka", sans-serif;background-image:url(/zinepaper.jpg);background-position:50%;background-size:cover}.theme-zine .landing{background-color:#e8e8e8;background-image:url(/zinepaper.jpg);background-position:50%;background-size:cover}.theme-zine .landing h1{text-transform:uppercase;letter-spacing:2px;background-color:#fff;border:3px solid #000;padding:8px 24px;font-family:Anton,sans-serif;display:inline-block;transform:rotate(-3deg);box-shadow:6px 6px #000;color:#000!important}.theme-zine .toolbar{color:#fff;background:#000;border-bottom:3px solid #000;box-shadow:0 4px 12px #00000080}.theme-zine .app-title{color:#000;text-transform:uppercase;letter-spacing:1px;background-color:#fff;border:2px solid #000;padding:4px 10px;font-family:Anton,sans-serif;font-size:22px;transform:rotate(-2deg);box-shadow:3px 3px #000}.theme-zine .tile{color:#000;background-color:#fff;border:2px solid #000;border-radius:0;padding:6px 12px;box-shadow:4px 4px #000}.theme-zine .tile.large{transform:translate(var(--x), var(--y)) scale(1.15) rotate(var(--r))}.theme-zine .tile.dragging{box-shadow:8px 8px #000c}.theme-zine .tile.label-red{text-transform:uppercase;letter-spacing:1px;font-family:Anton,sans-serif;font-size:24px}.theme-zine .tile.label-blue{text-transform:lowercase;padding:8px 14px;font-family:Special Elite,monospace;font-size:18px}.theme-zine .tile.label-green{color:#fff;background-color:#000;font-family:Caveat,cursive;font-size:28px;font-weight:700;box-shadow:4px 4px #0006}.theme-zine .tile.label-black{font-family:var(--tile-font);font-size:20px;font-weight:600}.zine-bin{object-fit:contain;cursor:pointer;z-index:100;filter:drop-shadow(4px 4px #000);height:160px;transition:transform .1s;position:absolute;bottom:10px;right:15px}.zine-bin.active{transform:scale(1.05)translateY(-5px)}.trash-backdrop{z-index:10010;background:#00000026;align-items:flex-end;display:flex;position:absolute;inset:0}.trash-sheet-content{box-sizing:border-box;border-radius:24px 24px 0 0;width:100%;height:75%;animation:.3s cubic-bezier(.16,1,.3,1) slideUpSheet;position:relative;inset:auto;box-shadow:0 -10px 40px #00000040}.swipe-handle{cursor:grab;background-color:#0003;border-radius:4px;width:40px;height:5px;margin:-20px auto 20px}.theme-labelmaker .swipe-handle,.theme-zine .swipe-handle{background-color:#0006}@keyframes slideUpSheet{0%{transform:translateY(100%)}to{transform:translateY(0)}}.tile.trashed-item{cursor:pointer;margin:0;position:relative;top:auto;left:auto;transform:none!important}.tile.trashed-item:active{transform:scale(.9)!important}.export-wrapper{z-index:-100;flex-direction:column;display:flex;position:fixed;top:-9999px;left:-9999px;overflow:hidden}.export-canvas{background-color:var(--bg-export);position:relative;overflow:hidden}.theme-fridge .export-canvas .tile{border:1px solid #00000080!important;box-shadow:0 4px 8px #0006!important}.export-footer{color:#f0f0f0;background:#121212;flex-direction:column;justify-content:center;align-items:center;font-family:-apple-system,sans-serif;display:flex}.export-logo-row{align-items:center;font-family:Fredoka,sans-serif;font-weight:500;display:flex}.tutorial-animation-container{background:#0000000a;border-radius:12px;justify-content:center;align-items:center;width:140px;height:140px;margin:0 auto;display:flex;position:relative}.tutorial-tile{font-family:var(--tile-font);color:#111;background:#fff;border:1px solid #ddd;border-radius:4px;padding:8px 16px;font-size:1.5rem;font-weight:600;animation:2.5s ease-in-out infinite tutTileDrag;box-shadow:0 2px 4px #0003}.theme-notebook .tutorial-tile{box-shadow:none;color:#1a365d;background:0 0;border:none;font-size:2.2rem}.tutorial-hand{filter:drop-shadow(2px 4px 6px #0000004d);animation:2.5s ease-in-out infinite tutHandDrag;position:absolute;top:70px;left:70px}@keyframes tutTileDrag{0%,15%{transform:translate(-20px,20px);box-shadow:0 2px 4px #0003}25%{transform:translate(-20px,20px)scale(1.05);box-shadow:0 8px 16px #0003}75%{transform:translate(20px,-20px)scale(1.05);box-shadow:0 8px 16px #0003}85%,to{transform:translate(20px,-20px);box-shadow:0 2px 4px #0003}}@keyframes tutHandDrag{0%,15%{transform:translate(-20px,20px)}25%{transform:translate(-20px,20px)scale(.9)}75%{transform:translate(20px,-20px)scale(.9)}85%,to{transform:translate(20px,-20px)}}
