:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-gutter:stable}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;min-width:320px;min-height:100dvh;width:100%;overflow-x:hidden}#root{width:100%;min-height:100dvh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.btn{border:none;border-radius:.5rem;font-weight:600;font-style:italic;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;font-size:.875rem}.btn-primary{background-color:#d4e8f7;color:#000;border:.125rem solid #b0d4f1}.btn-primary:hover{background-color:#c0dff0;transform:translateY(-.125rem);box-shadow:0 .25rem 8px #00000026}.btn-secondary{background-color:#2d3e5f;color:#fff;border:.125rem solid #1e2936}.btn-secondary:hover{background-color:#3d4f73;transform:translateY(-.125rem);box-shadow:0 .25rem .5rem #0000004d}.btn-danger{background-color:#263c7a;color:#fff;border:.125rem solid #1e2936}.btn-danger:hover{background-color:#c0392b;transform:translateY(-.125rem);box-shadow:0 .25rem .5rem #0000004d}.btn-small{padding:.5rem .6rem;font-size:.8125rem}.btn-medium{padding:.5rem .6rem;font-size:.9375rem}.btn-large{padding:.4rem .6rem;font-size:1.125rem;width:auto}.image-container{background-color:#503c784d;border:2px dashed rgba(255,255,255,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:all .3s ease;box-sizing:border-box}.image-container:hover{background-color:#503c7866;border-color:#ffffff80}.image-container-default,.image-container-pattern{min-height:300px;width:100%;min-width:0;gap:16px}.image-container-small{min-height:120px}.container-label{color:#ffffffb3;font-size:14px;font-weight:500;text-align:center;margin:0}.container-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff9;font-size:30px;padding:0 20px}.container-content img{max-width:100%;max-height:100%;object-fit:contain}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000;margin:0;padding:0;overflow:hidden}.pattern-pages-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #e91e63;border-radius:15px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #e945604d;min-height:0}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:2px solid #e91e63;background:#e945601a}.modal-header h2{color:#e91e63;margin:0;font-size:2rem;font-weight:700}.modal-close-btn{background:none;border:none;color:#e91e63;font-size:2rem;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.modal-close-btn:hover{transform:scale(1.2)}.pages-info{padding:15px 20px;background:#e945600d;border-bottom:1px solid rgba(233,69,96,.2);color:#ccc;font-size:1.4rem}.pages-info p{margin:5px 0}.pages-info strong{color:#e91e63}.pages-grid-container{flex:1;overflow-y:scroll;overflow-x:auto;padding:20px;display:flex;flex-wrap:wrap;gap:20px;background:#0000004d;align-content:flex-start;-webkit-overflow-scrolling:touch;min-height:0}.pattern-page{position:relative;background:#fff;border:2px solid #e94560;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #0006;display:flex;flex-direction:column;width:max-content;height:max-content}.page-number{position:absolute;top:10px;right:10px;background:#e94560;color:#fff;width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;z-index:10;box-shadow:0 2px 8px #0000004d}.page-grid{display:flex;flex-direction:column;overflow:hidden}.grid-row{flex:0 0 auto;display:flex}.grid-cell{border:.5px solid #ddd;box-sizing:border-box;transition:border-color .1s ease;flex-shrink:0}.grid-cell:hover{border-color:#e94560;opacity:.95}.pages-grid-container::-webkit-scrollbar{width:8px}.pages-grid-container::-webkit-scrollbar-track{background:#e945601a;border-radius:4px}.pages-grid-container::-webkit-scrollbar-thumb{background:#e94560;border-radius:4px}.pages-grid-container::-webkit-scrollbar-thumb:hover{background:#ff6b7a}@media(min-width:768px){.modal-header h2{font-size:1.2rem}.pages-grid-container{padding:10px;gap:15px}}.readme-modal{background-image:url(/assets/CrossyArt_fondo_telefono2-CYmYvXKx.png);background-position:center;background-repeat:no-repeat;background-size:100% 100%;border:4px solid #38649E;border-radius:15px;padding:32px 28px;width:100%;max-width:900px;box-shadow:0 10px 40px #0006,inset 0 0 30px #38649e1a;animation:slideUp .3s ease-out;max-height:85vh;display:flex;flex-direction:column;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.readme-header{display:flex;justify-content:center;align-items:center;margin-bottom:18px;position:relative}.readme-header h2{color:#fff;font-size:30px;margin:0;font-weight:600;letter-spacing:.5px;font-family:Cardo,serif;text-align:center}.readme-header .modal-close-btn{position:absolute;right:0;top:0}.readme-content{color:#fff;overflow-y:auto;padding-right:8px}.readme-section{margin-bottom:18px}.readme-section h3{margin:0 0 10px;font-size:22px;font-weight:700;letter-spacing:.3px}.readme-section p,.readme-section li{font-size:18px;line-height:1.45}.readme-section ul,.readme-section ol{margin:0;padding-left:22px}.readme-section li{margin-bottom:6px}@media(min-width:768px){.readme-modal{padding:30px}.readme-section p,.readme-section li{font-size:20px}}@media(min-width:1024px){.readme-modal{background-image:url(/assets/CrossyArt_fondo_comp2-zb_JwRdt.png);padding:28px 32px}.readme-section p,.readme-section li{font-size:22px}}.home{min-height:100dvh;width:100%;background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;background-image:url(/assets/CrossyArt_Fondo_Telefono-Q62ifyY3.png);display:flex;flex-direction:column;overflow-x:hidden}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(400px);opacity:0}}.notification{box-shadow:0 2px 8px #00000026}.notification-error,.notification-success{font-weight:500}.language-menu-wrapper{position:relative;display:inline-flex;justify-content:flex-end;padding:10px}.language-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:radial-gradient(#163889,#060e23);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px;z-index:2000}.language-menu-item{width:100%;text-align:left;background:transparent;border:none;color:#ffffffeb;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:22px;font-weight:700}.language-menu-item:hover{background:#ffffff1f}.language-menu-item.active{background:#ffffff2e}.header-title{color:#fff;font-size:32px;font-weight:700;margin:0 0 10px;text-align:center}.palette-selector{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 14px}.palette-label{color:#ffffffd6;font-weight:600;font-size:16px}.palette-select{width:min(320px,90vw);padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.28);background:#00000040;color:#ffffffeb;font-weight:600;font-size:16px}p{color:#ffffffd6;font-weight:500;font-size:18px;line-height:1.4;margin:0;text-align:center}.imageParagraph{color:#ffffffd6;font-weight:500;font-size:30px;line-height:1.4;margin:0;text-align:center}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;gap:30px;padding:0 20px;max-width:600px;margin:0 auto;width:100%}.upload-section{display:flex;flex-direction:column;gap:12px;width:100%}.image-adjustments-panel{width:100%;display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:#0f0a1e59}.image-adjustments-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.image-adjustments-title{margin:0;color:#ffffffeb;font-weight:700;font-size:18px}.image-adjustments-help{margin:0;text-align:left;font-size:13px;color:#ffffffb3}.image-adjustments-grid{display:flex;flex-direction:column;gap:1px}.adjustment-row{display:flex;flex-direction:column;gap:6px}.adjustment-label{display:flex;justify-content:space-between;align-items:center;color:#ffffffd9;font-weight:600;font-size:14px}.adjustment-input{display:flex;align-items:center;gap:10px}.adjustment-slider{flex:1}.button-group{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%}.button-group button{flex:1;width:auto}.size-selection-section{display:flex;flex-direction:column;gap:16px;width:100%;align-items:center}.color-count-controls{width:100%;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background-color:#503c7833}.color-count-help{margin:0;color:#ffffffd6;font-weight:500;font-size:14px;line-height:1.35}.color-count-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:#ffffffeb;font-weight:700;font-size:16px}.color-count-input-row{width:100%;display:flex;gap:12px;align-items:center}.color-count-slider{flex:1}.color-count-number{width:92px;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.28);background:#00000040;color:#ffffffeb;font-weight:700;font-size:16px}.size-options{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.size-box{width:100px;height:100px;border:2px solid rgba(255,255,255,.4);border-radius:8px;background-color:#503c784d;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;padding:8px}.size-box:hover{background-color:#503c7880;border-color:#fff9;transform:scale(1.05)}.size-box.selected{border:3px solid #e91e63;background-color:#e91e6333;box-shadow:0 0 12px #e91e6380}.size-text{color:#fffc;font-weight:500;text-align:center;white-space:pre-line;font-size:19px}.arrow-down{display:flex;justify-content:center;animation:bounceArrow 2s infinite}@keyframes bounceArrow{0%,to{transform:translateY(0)}50%{transform:translateY(8px)}}.download-pattern-section{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}.pattern-dimensions{padding:12px 20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;text-align:center}.pattern-dimensions p{margin:0;color:#ffffffe6;font-size:25px;font-weight:500}.pattern-dimensions strong{color:#fff;font-weight:700}.pattern-display-section{display:flex;flex-direction:column;gap:12px;width:100%;position:relative}.heart-icon{position:absolute;top:15px;right:15px;cursor:pointer;transition:all .3s ease;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center}.heart-icon:hover svg{transform:scale(1.1)}.heart-icon:hover svg path{fill:#e91e63;stroke:#fff}.heart-icon:active svg{transform:scale(.95)}.heart-icon.active svg{fill:#e91e63}.heart-icon.active svg path{fill:#e91e63;stroke:#e91e63}.final-delete{display:flex;justify-content:center;width:100%}.footer{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background:radial-gradient(#163889,#060e23);padding:10px 30px;gap:8px;border-top:1px solid rgba(255,255,255,.2);margin-top:20px}.footer p{color:#ffffffb3;margin:0 10px;font-size:20px;text-align:center}.footer>div{display:flex;gap:8px;margin-top:8px}@media(min-width:768px){.home{background-image:url(/assets/CrossyArt_Fondo_Telefono-Q62ifyY3.png)}.main-content{max-width:650px;gap:25px}.size-box{width:90px;height:90px;font-size:11px}.header-nav{gap:70px}.upload-section{gap:15px}}@media(min-width:1024px){.home{background-image:url(/assets/CrossyArt_Fondo_Comp-DZNzo8AD.png);flex-direction:column;background-attachment:fixed}.header{margin-bottom:20px;padding:15px 0;position:static}.header-nav{gap:190px}.main-content{display:grid;grid-template-columns:minmax(280px,1fr) minmax(220px,300px) minmax(280px,1fr);grid-template-areas:"upload size pattern" "upload dims downloadPattern" "view view view" "downloads downloads downloads";align-items:start;justify-content:center;gap:18px 24px;max-width:1200px;width:100%;margin:0 auto;padding:24px}.main-content>*{min-width:0}.upload-section{grid-area:upload;gap:15px}.size-selection-section{grid-area:size;align-items:center;gap:14px}.pattern-dimensions{grid-area:dims;justify-self:center;width:100%}.pattern-display-section{grid-area:pattern;position:relative;gap:14px}.upload-section .image-container-default,.pattern-display-section .image-container-pattern{min-height:clamp(240px,42vh,360px)}.download-pattern-section{grid-area:downloadPattern;align-items:stretch;justify-content:flex-start}.upload-section .button-group,.download-pattern-section .button-group{flex-direction:column}.view-buttons,.download-pages-buttons{grid-area:view;max-width:720px;margin:0 auto;justify-content:center}.download-pages-buttons{grid-area:downloads}.size-options{justify-content:center;gap:12px;flex-wrap:wrap}.size-box{width:78px;height:78px;font-size:11px}.footer{position:static;margin-top:20px}}.footer p{margin:0 30px}@media(min-width:1366px){.home{background-image:url(/assets/CrossyArt_Fondo_Comp-DZNzo8AD.png);flex-direction:column}.header{margin-bottom:20px;padding:15px 0;position:static}.main-content{grid-template-columns:minmax(360px,1fr) 320px minmax(360px,1fr);gap:22px 34px;max-width:1400px}.upload-section .image-container-default,.pattern-display-section .image-container-pattern{min-height:clamp(280px,46vh,420px)}.view-buttons,.download-pages-buttons{max-width:820px}.size-box{width:86px;height:86px;font-size:12px}.footer{position:static;margin-top:20px}}@media(min-width:1536px){.main-content{grid-template-columns:minmax(420px,1fr) 340px minmax(420px,1fr);gap:24px 42px;max-width:1650px;padding:32px}.upload-section .image-container-default,.pattern-display-section .image-container-pattern{min-height:clamp(320px,50vh,480px)}.view-buttons,.download-pages-buttons{max-width:920px}.size-box{width:92px;height:92px;font-size:12px}}@media(min-width:1920px){.home{background-image:url(/assets/CrossyArt_Fondo_Comp-DZNzo8AD.png);flex-direction:column}.header{margin-bottom:25px;padding:20px 0;position:static}.main-content{grid-template-columns:minmax(600px,1fr) 380px minmax(600px,1fr);gap:28px 70px;max-width:1900px;padding:36px}.upload-section .image-container-default,.pattern-display-section .image-container-pattern{min-height:clamp(360px,55vh,560px)}.view-buttons,.download-pages-buttons{max-width:1040px}.size-box{width:100px;height:100px;font-size:13px}.download-pattern{display:flex;flex-direction:row;gap:20px;align-items:center}.pattern-display-section{position:relative;gap:18px}.footer{position:static;margin-top:30px}}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;margin:0;padding:0;overflow:hidden}.color-palette-modal{background:linear-gradient(135deg,#163889,#060e23);border:2px solid rgba(255,255,255,.2);border-radius:12px;max-width:500px;width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #0000004d;overflow:hidden;min-height:0}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid rgba(255,255,255,.1);background:#163889cc}.modal-header h2{color:#fff;margin:0;font-size:24px}.modal-close-btn{background:none;border:none;color:#fff;font-size:32px;cursor:pointer;padding:0;width:40px;height:40px;display:flex;justify-content:center;align-items:center;transition:color .3s ease}.modal-close-btn:hover{color:gold}.color-palette-list{flex:1;overflow-y:scroll;padding:20px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch;min-height:0}.color-item{display:flex;align-items:center;gap:15px;padding:12px;background:#ffffff0d;border-radius:8px;transition:background-color .3s ease}.color-item:hover{background:#ffffff1a}.color-box{width:50px;height:50px;border-radius:8px;flex-shrink:0;border:2px solid rgba(255,255,255,.3);box-shadow:0 4px 8px #0003}.symbol-box{width:50px;height:50px;border-radius:8px;flex-shrink:0;border:2px solid rgba(255,255,255,.3);box-shadow:0 4px 8px #0003;background:#fff;display:flex;align-items:center;justify-content:center}.symbol-glyph{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:800;font-size:28px;line-height:1;-webkit-user-select:none;user-select:none}.color-info{flex:1;display:flex;flex-direction:column;gap:2px}.color-name{color:#fff;margin:0;font-size:22px;font-weight:600}.color-detail{color:#ffffffb3;margin:0;font-size:18px}.color-palette-list::-webkit-scrollbar{width:8px}.color-palette-list::-webkit-scrollbar-track{background:#ffffff0d;border-radius:10px}.color-palette-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.color-palette-list::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.pattern-zoom-clickable{cursor:zoom-in}.pattern-zoom-clickable:focus{outline:2px solid rgba(255,255,255,.6);outline-offset:6px}.pattern-zoom-modal{max-width:95vw;width:min(980px,95vw);max-height:90vh}.pattern-zoom-header{gap:6px}.pattern-zoom-actions{display:flex;align-items:center;gap:5px}.pattern-zoom-percent{min-width:50px;text-align:center;color:#ffffffe6;font-weight:700}.pattern-zoom-body{flex:1;overflow:auto;padding:12px;-webkit-overflow-scrolling:touch}.pattern-zoom-image{display:block;image-rendering:pixelated}@media(min-width:600px){.pattern-zoom-header{gap:13px}.pattern-zoom-actions{gap:20px}}.user-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#b3d9f2,#a8cfed);color:#000;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px #0003}.user-avatar:hover{transform:scale(1.1);background:linear-gradient(135deg,#c5e5f8,#bce0f5);box-shadow:0 4px 12px #0000004d;border-color:#ffffff80}.user-avatar:active{transform:scale(.95)}*{margin:0;padding:0;box-sizing:border-box}#root{width:100%;height:100%}