@import"https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Caveat:wght@400;700&family=Dancing+Script:wght@700&family=Gloria+Hallelujah&family=Indie+Flower&family=Pacifico&family=Patrick+Hand&family=Permanent+Marker&family=Sacramento&family=Shadows+Into+Light&display=swap";html{background-color:#000;height:100%;scrollbar-width:none;-ms-overflow-style:none}::-webkit-scrollbar{display:none}body{margin:0;padding:0;background:#000;font-family:Caveat,cursive;color:#333;overflow-x:hidden;min-height:100%;scrollbar-width:none;-ms-overflow-style:none}.index-page{position:relative;min-height:100vh;min-height:100dvh}#bg-video,#bg-image{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;object-fit:cover;z-index:0;background:#000;transition:opacity .5s ease}#bg-image{background-position:center center;background-size:cover;background-repeat:no-repeat}.hidden-media{opacity:0;pointer-events:none}.modal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;perspective:2000px}.container{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;perspective:2000px;gap:60px;padding:80px 40px;width:100%;min-height:100vh;min-height:100dvh;box-sizing:border-box;z-index:2;position:relative}.note-wrapper{position:relative;z-index:1;cursor:pointer;animation:verticalFloat 4s ease-in-out infinite alternate;transform-style:preserve-3d;will-change:transform;width:200px;height:260px;display:flex;justify-content:center;align-items:center}@media(hover:hover){.note-wrapper:hover{z-index:100;animation-play-state:paused}}.note-preview,.cover-preview-large{width:100%;height:100%;background-color:var(--cover-bg);display:flex;justify-content:center;align-items:center;text-align:center;box-shadow:5px 5px 15px #00000080;padding:20px;box-sizing:border-box;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;position:relative;overflow:hidden;color:var(--cover-text);border-left:8px solid rgba(0,0,0,.1);-webkit-font-smoothing:antialiased;backface-visibility:hidden;transform:rotate(var(--rotation));flex-shrink:0}.note-preview{animation:intermittentRotate 10s ease-in-out infinite alternate}@media(hover:hover){.note-wrapper:hover .note-preview{animation:none;transform:scale(1.1) rotate(0)!important;box-shadow:15px 15px 30px #0009;z-index:100}}.note-title,#preview-title-text{font-size:1.8rem;font-weight:700;line-height:1.2em;overflow-wrap:break-word;position:relative;z-index:5;margin:0;width:100%;font-family:Caveat,cursive;color:var(--label-text, inherit);transform:translateZ(0)}.font-caveat{font-family:Caveat,cursive!important}.font-dancing{font-family:Dancing Script,cursive!important}.font-indie{font-family:Indie Flower,cursive!important}.font-patrick{font-family:Patrick Hand,cursive!important}.font-marker{font-family:Permanent Marker,cursive!important;letter-spacing:1px}.font-pacifico{font-family:Pacifico,cursive!important}.font-shadows{font-family:Shadows Into Light,cursive!important}.font-amatic{font-family:Amatic SC,cursive!important;font-weight:700}.font-gloria{font-family:Gloria Hallelujah,cursive!important}.font-sacramento{font-family:Sacramento,cursive!important}.cover-img-layer{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;z-index:0;pointer-events:none;image-rendering:auto}[class^=label-]{position:relative;z-index:10;display:flex;justify-content:center;align-items:center;width:100%;transition:all .3s ease}.label-none .note-title,.label-none #preview-title-text{text-shadow:0 0 10px rgba(255,255,255,.8);color:var(--cover-text)}.label-box .note-title,.label-box #preview-title-text{background:var(--label-bg, #fff);border:4px double var(--label-border, #333);color:var(--label-text, #333);border-radius:8px;padding:10px 15px;box-shadow:0 5px 15px #0003;min-width:100px;display:inline-block}.label-circle .note-title,.label-circle #preview-title-text{background:var(--label-bg, #fff);border:3px solid var(--label-border, #333);color:var(--label-text, #333);border-radius:50%;width:130px;height:130px;display:flex;justify-content:center;align-items:center;box-shadow:0 5px 15px #0003;padding:10px}.note-preview .label-ribbon .note-title,.note-preview .label-ribbon #preview-title-text,.cover-preview-large .label-ribbon .note-title,.cover-preview-large .label-ribbon #preview-title-text{position:relative;background:var(--label-bg, #fff);color:var(--label-text, #333);border-top:2px solid var(--label-border, #333);border-bottom:2px solid var(--label-border, #333);padding:10px 20px;font-size:1.6rem;box-shadow:0 5px 10px #0003;width:120%;margin-left:-10%;text-align:center}.note-preview .label-ribbon .note-title:before,.note-preview .label-ribbon .note-title:after,.cover-preview-large .label-ribbon .note-title:before,.cover-preview-large .label-ribbon .note-title:after,.note-preview .label-ribbon #preview-title-text:before,.note-preview .label-ribbon #preview-title-text:after,.cover-preview-large .label-ribbon #preview-title-text:before,.cover-preview-large .label-ribbon #preview-title-text:after{content:"";position:absolute;bottom:-10px;border-style:solid;border-width:10px 10px 0 0;border-color:rgba(0,0,0,.5) transparent transparent transparent;z-index:-1}.note-preview .label-ribbon .note-title:before,.cover-preview-large .label-ribbon .note-title:before,.note-preview .label-ribbon #preview-title-text:before,.cover-preview-large .label-ribbon #preview-title-text:before{left:0}.note-preview .label-ribbon .note-title:after,.cover-preview-large .label-ribbon .note-title:after,.note-preview .label-ribbon #preview-title-text:after,.cover-preview-large .label-ribbon #preview-title-text:after{right:0;transform:scaleX(-1)}.note-preview .label-ribbon:before,.note-preview .label-ribbon:after,.cover-preview-large .label-ribbon:before,.cover-preview-large .label-ribbon:after{content:"";position:absolute;top:15px;width:30px;height:30px;background:var(--label-bg, #fff);border:2px solid var(--label-border, #333);z-index:-2;transform:rotate(45deg)}.note-preview .label-ribbon:before,.cover-preview-large .label-ribbon:before{left:-10px}.note-preview .label-ribbon:after,.cover-preview-large .label-ribbon:after{right:-10px}.label-cloud .note-title,.label-cloud #preview-title-text{background:var(--label-bg, #fff);color:var(--label-text, #333);padding:25px 20px;border-radius:50px;position:relative;z-index:5;box-shadow:5px 5px 15px #0000001a;border:2px solid var(--label-border, transparent);min-width:100px}.label-cloud .note-title:before,.label-cloud .note-title:after,.label-cloud #preview-title-text:before,.label-cloud #preview-title-text:after{content:"";background:var(--label-bg, #fff);position:absolute;border-radius:50%;z-index:-1;border-top:2px solid var(--label-border, transparent)}.label-cloud .note-title:before,.label-cloud #preview-title-text:before{width:50px;height:50px;top:-20px;left:15px}.label-cloud .note-title:after,.label-cloud #preview-title-text:after{width:60px;height:60px;top:-25px;right:15px}.label-heart{width:140px;height:120px;margin:0 auto}.label-heart .note-title,.label-heart #preview-title-text{position:relative;z-index:5;font-size:1.5rem;color:var(--label-text, #333)}.label-heart:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--label-bg, #fff);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;z-index:1;opacity:1;filter:drop-shadow(0 0 5px rgba(0,0,0,.3));border:2px solid var(--label-border, transparent)}.label-double .note-title,.label-double #preview-title-text{background:var(--label-bg, #fff);color:var(--label-text, #333);border-radius:12px;padding:15px 30px;box-shadow:0 5px 15px #0003;border:3px solid var(--label-bg, #fff);position:relative;display:inline-block;min-width:120px}.label-double .note-title:after,.label-double #preview-title-text:after{content:"";position:absolute;top:4px;left:4px;right:4px;bottom:4px;border:2px solid var(--label-border, #333);border-radius:8px;pointer-events:none}.label-tag .note-title,.label-tag #preview-title-text{background:var(--label-bg, #fff);color:var(--label-text, #333);border:2px solid var(--label-border, #333);border-radius:10px;padding:15px 25px 15px 45px;box-shadow:2px 5px 10px #0003;position:relative;transform:rotate(-5deg);display:inline-block}.label-tag .note-title:before,.label-tag #preview-title-text:before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;border:2px solid var(--label-border, #333);background:transparent;box-shadow:inset 0 0 0 20px #333}.label-tag .note-title:after,.label-tag #preview-title-text:after{content:"";position:absolute;left:-20px;top:40%;width:30px;height:30px;border-top:2px solid var(--label-border, #333);border-radius:50%;transform:rotate(-20deg);pointer-events:none}.note-preview [class^=label-] .note-title{white-space:nowrap}.note-preview .label-tag .note-title{flex-shrink:0;width:184px;box-sizing:border-box;padding:15px 20px 15px 42px}.label-scroll .note-title,.label-scroll #preview-title-text{background:var(--label-bg, #fff);color:var(--label-text, #333);padding:15px 40px;border-top:2px solid var(--label-border, #333);border-bottom:2px solid var(--label-border, #333);position:relative;box-shadow:0 10px 20px #0000001a;display:inline-block;min-width:140px}.label-scroll .note-title:before,.label-scroll .note-title:after,.label-scroll #preview-title-text:before,.label-scroll #preview-title-text:after{content:"";position:absolute;top:-10px;bottom:-10px;width:25px;background:radial-gradient(circle at center,#fff 40%,var(--label-bg, #fff) 100%);border:2px solid var(--label-border, #333);border-radius:5px;z-index:2}.label-scroll .note-title:before,.label-scroll #preview-title-text:before{left:-12px;border-radius:50% 50% 5px 5px;background:linear-gradient(90deg,var(--label-bg, #fff),rgba(0,0,0,.1))}.label-scroll .note-title:after,.label-scroll #preview-title-text:after{right:-12px;border-radius:5px 5px 50% 50%;background:linear-gradient(-90deg,var(--label-bg, #fff),rgba(0,0,0,.1))}.label-banner .note-title,.label-banner #preview-title-text{background:var(--label-bg, #fff);color:var(--label-text, #333);border:2px solid var(--label-border, #333);padding:10px 30px;position:relative;display:inline-block;z-index:5;border-radius:4px;box-shadow:0 5px 10px #0000001a;transform:perspective(500px) translateZ(10px)}.label-banner .note-title:before,.label-banner .note-title:after,.label-banner #preview-title-text:before,.label-banner #preview-title-text:after{content:"";position:absolute;top:10px;width:0;height:0;border-style:solid;z-index:-1}.label-banner .note-title:before,.label-banner #preview-title-text:before{left:-20px;border-width:0 30px 40px 10px;border-color:transparent var(--label-bg, #fff) transparent transparent;filter:drop-shadow(-1px 0 0 var(--label-border, #333));transform:rotate(10deg)}.label-banner .note-title:after,.label-banner #preview-title-text:after{right:-20px;border-width:0 10px 40px 30px;border-color:transparent transparent transparent var(--label-bg, #fff);filter:drop-shadow(1px 0 0 var(--label-border, #333));transform:rotate(-10deg)}.label-flag .note-title,.label-flag #preview-title-text{background:var(--label-bg, #fff);color:var(--label-text, #333);padding:15px 40px;position:relative;display:inline-block;clip-path:polygon(0% 0%,100% 0%,90% 50%,100% 100%,0% 100%,10% 50%)}.label-flag .note-title:after,.label-flag #preview-title-text:after{content:"";position:absolute;top:5px;left:15px;right:15px;bottom:5px;border:2px dashed var(--label-border, #333);opacity:.7;pointer-events:none;clip-path:polygon(0% 0%,100% 0%,92% 50%,100% 100%,0% 100%,8% 50%)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;z-index:100;padding:0;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;overflow:hidden}.modal.active{opacity:1}#book-container{width:600px;height:640px;position:relative;transform-style:preserve-3d;margin:auto}.notebook-page{width:600px;height:640px;min-height:640px;max-width:95vw;background-color:#fdf6e3;position:relative;box-shadow:10px 10px 40px #00000080;box-sizing:border-box;overflow:hidden;margin:auto;color:#333;font-family:Caveat,cursive;flex-shrink:0;transform-style:preserve-3d;transform-origin:left center;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .8s cubic-bezier(.645,.045,.355,1);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;will-change:transform}.notebook-page-scroll{position:relative;z-index:25;height:100%;padding:2rem 20px 2rem 44px;box-sizing:border-box;overflow:hidden;background-image:linear-gradient(transparent 31px,#999 31px);background-size:100% 2rem;background-origin:content-box;background-clip:content-box}#book-container .notebook-page{position:absolute;top:0;left:0;margin:0;box-shadow:5px 5px 20px #0000004d}.notebook-page:before{content:"";position:absolute;top:0;left:4px;width:24px;height:100%;z-index:30;pointer-events:none;background-color:var(--page-bg, #fdf6e3);background-image:radial-gradient(circle at 50% 50%,#333 28%,transparent 29%);background-size:100% 2rem;background-repeat:repeat-y;border-right:2px solid rgba(0,0,0,.1)}.notebook-page h2{font-size:3rem;line-height:4rem;margin:0;text-align:center;border-bottom:2px solid currentColor;font-family:Caveat,cursive;width:100%;margin-bottom:calc(2rem - 2px);flex-shrink:0}.editable-content{flex-grow:1;height:auto;width:100%;outline:none;font-size:1.5rem;line-height:2rem;white-space:pre-wrap;z-index:5;position:relative;cursor:text;display:block;min-height:0}.notebook-page.flipped{transform:rotateY(-150deg);box-shadow:-5px 5px 20px #0000001a}.z-top{z-index:10}.z-mid{z-index:5}.drag-item{position:absolute;min-width:50px;min-height:50px;max-width:100%!important;cursor:grab;z-index:10;resize:both;overflow:hidden;transform:translateZ(1px);-webkit-transform:translateZ(1px)}.admin-mode .drag-item{border:2px dashed #444;background:#ffffff1a}.drag-item img{width:100%;height:100%;object-fit:contain!important;pointer-events:none}.rotate-handle,.delete-handle{width:20px;height:20px;border-radius:50%;position:absolute;display:none;box-shadow:0 0 5px #00000080;z-index:20;border:2px solid white;cursor:pointer;transform:translateZ(2px);-webkit-transform:translateZ(2px)}.rotate-handle{background:#28a745;top:5px;left:5px;cursor:alias}.delete-handle{background:#dc3545;top:5px;right:5px;color:#fff;font-family:sans-serif;font-weight:700;font-size:14px;justify-content:center;align-items:center;line-height:18px;text-align:center}.admin-mode .drag-item:hover .rotate-handle,.admin-mode .drag-item:hover .delete-handle,.admin-mode .rotate-handle:active{display:block;display:flex}.page-number{position:absolute;bottom:5px;width:100%;text-align:center;font-size:1rem;color:#777;pointer-events:none;left:0}.close-btn{position:absolute;top:15px;right:20px;font-size:3rem;cursor:pointer;color:#fff;background:none;border:none;z-index:1000;line-height:1;transition:transform .2s}.close-btn:hover{transform:scale(1.1)}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;background:#333;color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:2rem;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:105;opacity:.8}.prev-arrow{left:20px}.next-arrow{right:20px}.hidden{display:none!important}.scroll-indicator{display:none;position:absolute;left:50%;transform:translate(-50%);z-index:50;width:32px;height:32px;border-radius:50%;background:#0000008c;color:#fff;align-items:center;justify-content:center;font-size:.8rem;cursor:pointer;opacity:0;transition:opacity .3s ease;pointer-events:none;-webkit-tap-highlight-color:transparent}.scroll-indicator.visible{opacity:1;pointer-events:auto;display:none}@media(max-width:768px){.scroll-indicator.visible{display:flex}}.scroll-down{bottom:8px;animation:scrollBounce 1.5s ease infinite}.scroll-up{top:8px;animation:scrollBounceUp 1.5s ease infinite}@keyframes scrollBounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(5px)}}@keyframes scrollBounceUp{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.admin-wrapper{display:flex;flex-direction:column;align-items:center;width:100%}@media(max-width:768px){.modal{align-items:center;overflow:hidden}#book-container{width:95vw;height:640px;position:relative}.notebook-page{width:100%;height:640px;overflow:hidden}.notebook-page-scroll{padding:2rem 12px 2rem 40px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background-attachment:local}.notebook-page h2{font-size:2rem;line-height:2rem;margin-bottom:calc(2rem - 2px)}.editable-content{font-size:1.3rem}.drag-item{max-width:90%!important}.nav-arrow{top:auto;bottom:20px;transform:none;width:40px;height:40px;font-size:1.5rem}.prev-arrow{left:10px}.next-arrow{right:10px}.close-btn{top:10px;right:10px;background:#00000080;border-radius:50%;width:40px;height:40px;font-size:2rem;display:flex;justify-content:center;align-items:center;padding-bottom:5px}.designer-container{flex-direction:column}}:root{--cover-bg: #fdf6e3;--cover-accent: #e0e0e0;--cover-text: #333}.pattern-base{background-color:var(--cover-bg)!important;color:var(--cover-text)!important;position:relative;z-index:1}.pat-solid{background-image:none}.pat-dots{background-image:radial-gradient(var(--cover-accent) 20%,transparent 20%);background-position:0 0,10px 10px;background-size:20px 20px}.pat-grid{background-image:linear-gradient(var(--cover-accent) 1px,transparent 1px),linear-gradient(90deg,var(--cover-accent) 1px,transparent 1px);background-size:20px 20px}.pat-composition{background-image:radial-gradient(var(--cover-accent) 15%,transparent 16%),radial-gradient(var(--cover-accent) 15%,transparent 16%);background-size:10px 10px;background-position:0 0,5px 5px}.pat-stripes{background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,var(--cover-accent) 10px,var(--cover-accent) 20px)}.pat-flowers{background-image:radial-gradient(circle at 50% 50%,var(--cover-bg) 20%,transparent 21%),radial-gradient(circle at 0% 0%,var(--cover-accent) 20%,transparent 20%),radial-gradient(circle at 100% 0%,var(--cover-accent) 20%,transparent 20%),radial-gradient(circle at 100% 100%,var(--cover-accent) 20%,transparent 20%),radial-gradient(circle at 0% 100%,var(--cover-accent) 20%,transparent 20%);background-size:40px 40px;background-position:0 0,20px 20px}.pat-checkers{background-image:linear-gradient(45deg,var(--cover-accent) 25%,transparent 25%,transparent 75%,var(--cover-accent) 75%,var(--cover-accent)),linear-gradient(45deg,var(--cover-accent) 25%,transparent 25%,transparent 75%,var(--cover-accent) 75%,var(--cover-accent));background-position:0 0,10px 10px;background-size:20px 20px}.pat-zigzag{background:linear-gradient(135deg,var(--cover-accent) 25%,transparent 25%) -10px 0,linear-gradient(225deg,var(--cover-accent) 25%,transparent 25%) -10px 0,linear-gradient(315deg,var(--cover-accent) 25%,transparent 25%),linear-gradient(45deg,var(--cover-accent) 25%,transparent 25%);background-size:20px 20px;background-color:var(--cover-bg)!important}.pat-plaid{background-image:repeating-linear-gradient(90deg,transparent,transparent 10px,var(--cover-accent) 10px,var(--cover-accent) 12px),repeating-linear-gradient(0deg,transparent,transparent 10px,var(--cover-accent) 10px,var(--cover-accent) 12px)}.pat-waves{background-image:radial-gradient(circle at 50% 100%,var(--cover-accent) 25%,transparent 26%),radial-gradient(circle at 50% 0%,var(--cover-accent) 25%,transparent 26%);background-position:0 0,10px 10px;background-size:20px 20px}.pat-gradient{background:linear-gradient(135deg,var(--cover-bg),var(--cover-accent))!important}.pat-hearts{background-image:none;position:relative;overflow:hidden}.pat-hearts:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--cover-accent);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");-webkit-mask-size:30px 30px;mask-size:30px 30px;-webkit-mask-repeat:space;mask-repeat:space;opacity:.6;z-index:0;pointer-events:none}.pat-stars{background-image:radial-gradient(white 15%,transparent 16%),radial-gradient(white 15%,transparent 16%);background-color:var(--cover-bg)!important;background-size:30px 30px;background-position:0 0,15px 15px}.pat-stars:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(var(--cover-accent) 15%,transparent 16%),radial-gradient(var(--cover-accent) 15%,transparent 16%);background-size:30px 30px;background-position:0 0,15px 15px;opacity:.5;pointer-events:none}.pat-diamonds{background:linear-gradient(135deg,var(--cover-accent) 25%,transparent 25%) -10px 0,linear-gradient(225deg,var(--cover-accent) 25%,transparent 25%) -10px 0,linear-gradient(315deg,var(--cover-accent) 25%,transparent 25%),linear-gradient(45deg,var(--cover-accent) 25%,transparent 25%);background-size:20px 20px;background-color:var(--cover-bg)!important}.pat-confetti{background-image:radial-gradient(var(--cover-accent) 20%,transparent 20%),radial-gradient(var(--cover-accent) 20%,transparent 20%);background-size:10px 10px;background-position:0 0,5px 5px}.designer-container{background:#fff;padding:30px;border-radius:8px;display:flex;flex-wrap:wrap;gap:40px;max-width:1100px;width:100%;box-shadow:0 5px 20px #00000080;margin:20px auto}.designer-controls{flex:1;min-width:250px;display:flex;flex-direction:column;gap:20px}.control-group{display:flex;flex-direction:column;gap:10px}.control-group label{font-weight:700;font-family:sans-serif;font-size:.9rem}.pattern-grid,.label-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.pattern-btn,.label-btn{height:60px;border:2px solid #ddd;border-radius:5px;cursor:pointer;transition:transform .2s,border-color .2s;background-color:#f9f9f9;display:flex;justify-content:center;align-items:center;font-size:.8rem;font-family:sans-serif;text-align:center}.pattern-btn:hover,.label-btn:hover{transform:scale(1.05)}.pattern-btn.selected,.label-btn.selected{border:3px solid #007bff;box-shadow:0 0 10px #007bff4d;background-color:#e6f2ff}.preview-box-wrapper{flex:1;display:flex;justify-content:center;align-items:center;background:#333;border-radius:8px;padding:20px;min-width:300px}.cover-preview-large{width:280px;height:360px;box-shadow:5px 5px 15px #00000080;display:flex;justify-content:center;align-items:center;text-align:center;font-size:2rem;font-weight:700;padding:20px;transition:all .3s ease;border-left:12px solid rgba(0,0,0,.1);position:relative;z-index:1}input[type=range]{width:100%;cursor:pointer}#lock-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:9999;background:#0006;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);display:none;flex-direction:column;justify-content:center;align-items:center;color:#fff;font-family:sans-serif;transition:opacity .8s ease,visibility .8s}#lock-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.lock-title{font-size:1.2rem;margin-bottom:20px;letter-spacing:1px;font-weight:300}.passcode-dots{display:flex;gap:15px;margin-bottom:40px;height:15px}.dot{width:12px;height:12px;border:2px solid white;border-radius:50%;transition:background .2s}.dot.filled{background:#fff}.numpad{display:grid;grid-template-columns:repeat(3,80px);gap:20px}.num-btn{width:75px;height:75px;border-radius:50%;background:#ffffff26;border:1px solid rgba(255,255,255,.3);display:flex;justify-content:center;align-items:center;font-size:2rem;cursor:pointer;transition:background .2s,transform .1s;-webkit-user-select:none;user-select:none}.num-btn:active{background:#fff6;transform:scale(.95)}.num-btn.zero{grid-column:2}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.shake{animation:shake .3s ease-in-out}@keyframes noteEnter{0%{opacity:0;transform:translateY(40px) scale(.85)}60%{opacity:1;transform:translateY(-4px) scale(1.03)}to{opacity:1;transform:translateY(0) scale(1)}}.note-wrapper.note-enter{opacity:0;animation:noteEnter .5s cubic-bezier(.22,1,.36,1) var(--pop-delay, 0s) forwards,verticalFloat var(--float-duration, 4s) ease-in-out calc(var(--pop-delay, 0s) + .5s) infinite alternate}@keyframes verticalFloat{0%{transform:translateY(0)}to{transform:translateY(-8px)}}@keyframes intermittentRotate{0%{transform:rotate(calc(var(--rotation) - 1deg))}25%{transform:rotate(calc(var(--rotation) - 1deg))}75%{transform:rotate(calc(var(--rotation) + 1deg))}to{transform:rotate(calc(var(--rotation) + 1deg))}}.firefly{position:absolute;width:6px;height:6px;border-radius:50%;opacity:.8;pointer-events:none;animation:floatFly 12s infinite linear;z-index:5}@keyframes floatFly{0%{transform:translate(0);opacity:0}20%{opacity:1}50%{transform:translate(60px,-60px)}80%{opacity:1}to{transform:translate(-30px,-120px);opacity:0}}