:root{--desktop-left-column: 400px;--desktop-right-min: 500px;--desktop-gap: 2rem;--desktop-breakpoint: 1024px}.pet-processor-container{max-width:800px;margin:0 auto;padding:1rem;font-family:var(--font-body-family)}.upload-area{border:2px dashed rgba(var(--color-foreground),.3);border-radius:12px;padding:2.55rem 2rem;text-align:center;transition:all .3s ease;background:rgba(var(--color-background),.5)}.upload-area.drag-over{border-color:rgb(var(--color-button));background:rgba(var(--color-button),.1)}.upload-area.mobile{padding:1.7rem 1rem}.upload-content .upload-icon,.upload-area .upload-icon{font-size:3rem;margin-bottom:.85rem;opacity:.7}.upload-content h3{margin:0 0 .43rem;color:rgb(var(--color-foreground));font-size:1.5rem;font-weight:600}.upload-content p{margin:0 0 1.28rem;color:rgba(var(--color-foreground),.7);font-size:.9rem}.upload-btn{background:rgb(var(--color-button));color:rgb(var(--color-button-text));border:none;padding:1rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-height:48px}.upload-btn:hover{background:rgba(var(--color-button),.9);transform:translateY(-2px)}.processing-area{padding:3rem 2rem;text-align:center}.progress-container{max-width:400px;margin:0 auto}.progress-bar{width:100%;height:8px;background:rgba(var(--color-foreground),.1);border-radius:4px;overflow:hidden;margin-bottom:1rem}.progress-fill{height:100%;background:rgb(var(--color-button));border-radius:4px;transition:width .3s ease}.progress-text{color:rgb(var(--color-foreground));font-size:1rem;font-weight:500}.processing-status{display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center}.status-message{font-size:1.1rem;font-weight:600;color:rgb(var(--color-foreground));line-height:1.3}.time-estimate{font-size:.9rem;color:rgba(var(--color-foreground),.7);font-style:italic}.progressive-info{font-size:.8rem;color:rgba(var(--color-foreground),.6);margin-top:.25rem}.time-remaining{font-size:1rem;font-weight:600;color:rgb(var(--color-button));padding:.5rem 1rem;background:rgba(var(--color-button),.1);border-radius:20px;min-height:28px;display:flex;align-items:center;justify-content:center;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.first-time-notice{background:rgba(var(--color-button),.05);padding:1rem;border-radius:8px;margin-top:1rem;max-width:400px}.notice-content{font-size:.85rem;line-height:1.4;color:rgba(var(--color-foreground),.8)}@media screen and (max-width: 750px){.processing-status{gap:.75rem;padding:0 1rem}.status-message{font-size:1rem}.time-estimate{font-size:.8rem}.time-remaining{font-size:.9rem;padding:.4rem .8rem;min-width:140px}.first-time-notice{padding:.8rem;margin:.5rem 1rem 0}.notice-content{font-size:.8rem}}.preview-area{text-align:center}.image-preview{margin-bottom:2rem;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000001a;max-width:500px;margin-left:auto;margin-right:auto}.image-preview img{width:100%;height:auto;display:block;max-height:500px;object-fit:contain}.preview-image-container{margin-bottom:2rem;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000001a;max-width:500px;margin-left:auto;margin-right:auto}.preview-image-container img{width:100%;height:auto;display:block;max-height:500px;object-fit:contain}.effect-selector h4{margin:0 0 1rem;color:rgb(var(--color-foreground));font-size:1.2rem;font-weight:600}.effect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}@media (min-width: 769px){.effect-grid-wrapper{max-width:600px;margin:0 auto 2rem}.effect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:.75rem}.share-buttons-container{display:block;text-align:center}.share-buttons-container .pet-share-button-simple{min-height:48px;padding:.75rem 2rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;max-width:600px}}.effect-btn{background:rgba(var(--color-foreground),.05);border:2px solid rgba(var(--color-foreground),.1);border-radius:8px;padding:1rem .5rem;cursor:pointer;transition:all .3s ease;min-height:48px;min-width:48px;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:1rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.effect-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001a}.effect-btn.loading{border-color:orange;background:#ffa5001a;cursor:wait}.effect-btn.loading span:last-child{opacity:.7}.effect-btn.error{border-color:red;background:#ff00000d;cursor:not-allowed}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.effect-btn.active{border-color:rgb(var(--color-button));background:rgba(var(--color-button),.1);color:rgb(var(--color-button))}.effect-btn span{font-size:1.2rem;font-weight:500;color:inherit;text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.effect-emoji{font-size:clamp(3rem,14.4vw,6rem);line-height:1;flex-shrink:0;display:inline-block}.artist-notes-section,.artist-notes-container{margin:2rem 0;max-width:500px;margin-left:auto;margin-right:auto;text-align:left;background:#fff5f7;border:1px solid rgba(255,192,203,.3);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #ffc0cb1a}.artist-notes-section h4,.artist-notes-container h4{margin:0 0 .5rem;color:rgb(var(--color-foreground));font-size:1.2rem;font-weight:600}.artist-notes-container h4 small{font-size:.875rem;font-weight:400;opacity:.7;margin-left:.5rem}.artist-notes-description{margin:0 0 1rem;color:rgba(var(--color-foreground),.7);font-size:.9rem;text-align:center;line-height:1.4}.artist-notes-container textarea,.artist-notes-textarea{width:100%;padding:1rem;border:2px solid rgba(var(--color-foreground),.2);border-radius:8px;background:rgba(var(--color-background),.8);color:rgb(var(--color-foreground));font-family:var(--font-body-family);font-size:1rem;line-height:1.5;resize:vertical;min-height:100px;transition:all .3s ease;box-sizing:border-box}.artist-notes-textarea:focus{outline:none;border-color:rgb(var(--color-button));box-shadow:0 0 0 3px rgba(var(--color-button),.1)}.artist-notes-textarea::placeholder{color:rgba(var(--color-foreground),.5);font-style:italic}.character-count{text-align:right;margin-top:.5rem;font-size:.8rem;color:rgba(var(--color-foreground),.6)}.character-count.warning{color:#f39c12}.character-count.error{color:#e74c3c}.actions,.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn-primary,.btn-secondary{padding:1rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-height:48px;min-width:140px;border:none}.btn-primary{background:rgb(var(--color-button));color:rgb(var(--color-button-text))}.btn-primary:hover{background:rgba(var(--color-button),.9);transform:translateY(-2px)}.btn-secondary{background:rgba(var(--color-foreground),.1);color:rgb(var(--color-foreground));border:1px solid rgba(var(--color-foreground),.2)}.btn-secondary:hover{background:rgba(var(--color-foreground),.15)}.hidden{display:none!important}@media screen and (max-width: 375px){.effect-grid{gap:1.5vw;padding:0 .25rem}.effect-btn{padding:2.5vw 1.5vw;min-height:48px;gap:2vw}.effect-btn span{font-size:clamp(.7rem,3vw,1.2rem);line-height:1}.effect-emoji{font-size:clamp(2rem,10vw,3.5rem);display:inline-block}}@media screen and (min-width: 376px) and (max-width: 750px){.pet-processor-container{padding:.5rem}.upload-area{padding:1.7rem 1rem;margin:.5rem}.processing-area{padding:2rem 1rem}.effect-grid{grid-template-columns:repeat(4,1fr);gap:2vw;max-width:100%}.effect-btn{padding:3vw 2vw;border-radius:6px;min-height:48px;gap:2vw}.effect-btn span{font-size:clamp(.75rem,3.5vw,1.5rem);line-height:1.1}.actions{flex-direction:column;align-items:stretch}.btn-primary,.btn-secondary{width:100%;margin:0}.image-preview{margin-bottom:1.5rem}.image-preview img{max-height:400px}.artist-notes-section{margin:1.5rem 0;padding:0 .5rem}.artist-notes-section h4{font-size:1.1rem}.artist-notes-description{font-size:.85rem;padding:0 .5rem}.artist-notes-textarea{font-size:.9rem;min-height:80px}}@media screen and (min-width: 751px) and (max-width: 1023px){.effect-grid{grid-template-columns:repeat(4,1fr);gap:1rem}.effect-btn{padding:1.2rem .6rem;gap:.6rem}.effect-btn span{font-size:1.32rem}.effect-emoji{font-size:6.2rem}}@media screen and (min-width: 1024px){.pet-processor-container{padding:2rem}.effect-grid{grid-template-columns:repeat(4,1fr);gap:1.25rem;max-width:500px}.effect-btn{padding:1.5rem .75rem;border-radius:10px;gap:.7rem}.effect-btn span{font-size:1.44rem;white-space:normal}.effect-emoji{font-size:7.2rem}}.pet-processor-container>div{transition:opacity .3s ease,transform .3s ease}.pet-processor-container>div.hidden{opacity:0;transform:translateY(20px)}.background-loading-indicator{text-align:center;margin-top:1rem;padding:.75rem;background:rgba(var(--color-button),.05);border-radius:8px;border:1px solid rgba(var(--color-button),.1);animation:fadeIn .3s ease}.background-loading-indicator .loading-text{font-size:.9rem;color:rgba(var(--color-foreground),.7);display:flex;align-items:center;justify-content:center;gap:.5rem}.background-loading-indicator .loading-text:before{content:"";width:12px;height:12px;border:2px solid rgba(var(--color-button),.3);border-top:2px solid rgb(var(--color-button));border-radius:50%;animation:spin 1s linear infinite}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.effect-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.effect-btn.loading:disabled{opacity:.8;cursor:wait}.effect-btn.loading .effect-emoji{animation:spin 1s linear infinite}.effect-btn{position:relative}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.progress-fill{background:linear-gradient(90deg,rgb(var(--color-button)),rgba(var(--color-button),.8),rgb(var(--color-button)));background-size:200px 100%;animation:shimmer 2s infinite}.retry-failed-btn{background:#ff6b6b!important;color:#fff!important;margin-top:1rem;padding:.75rem 1.5rem;border:none;border-radius:8px;cursor:pointer;font-weight:600;animation:pulse 2s infinite;transition:all .3s ease}.retry-failed-btn:hover{background:#ff5252!important;transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b4d}@keyframes pulse{0%{opacity:1}50%{opacity:.8}to{opacity:1}}.effect-btn.error{background:#ff6b6b1a;border-color:#ff6b6b;opacity:.7}.effect-btn.error:after{content:" \274c";font-size:.8em}.processor-header{text-align:center;margin-bottom:2rem}.processor-columns{display:block}.processor-controls,.processor-preview{width:100%}@media screen and (max-width: 1023px){.processor-columns{display:flex;flex-direction:column}.processor-preview{order:1;margin-bottom:2rem}.processor-controls{order:2}.pet-processor-container:not(.has-result) .processor-preview{display:none;order:0}.pet-processor-container:not(.has-result) .processor-controls{order:0}}@media (min-width: 1024px) and (hover: hover){.pet-processor-container{max-width:1200px}.processor-controls,.processor-preview{order:0}.pet-processor-container:not(.has-result) .processor-columns{display:block;max-width:600px;margin:0 auto}.pet-processor-container:not(.has-result) .processor-preview{display:none}.pet-processor-container.has-result .processor-columns{display:flex;gap:var(--desktop-gap);align-items:flex-start}.pet-processor-container.has-result .processor-controls{flex:0 0 var(--desktop-left-column);position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto}.pet-processor-container.has-result .processor-preview{flex:1;min-width:var(--desktop-right-min);display:block}.processor-controls .effect-grid-wrapper{margin-top:1.5rem}.processor-controls .action-buttons{flex-direction:column;gap:.75rem}.processor-controls .action-buttons button{width:100%}.processor-preview .pet-image-container{min-height:500px;display:flex;align-items:center;justify-content:center;background:rgba(var(--color-foreground),.03);border-radius:12px}.processor-controls .processing-area:not(.hidden){position:absolute;top:0;left:0;right:0;bottom:0;background:#fffffff2;display:flex;align-items:center;justify-content:center;border-radius:12px;z-index:10}}@media (min-width: 769px) and (max-width: 1023px){.pet-processor-container{max-width:768px}}@supports (contain: layout){@media (min-width: 1024px) and (hover: hover){.processor-columns{contain:layout}}}@supports not (display: flex){@media (min-width: 1024px){.processor-columns{display:table;width:100%}.processor-controls,.processor-preview{display:table-cell;vertical-align:top}.processor-controls{width:var(--desktop-left-column);padding-right:var(--desktop-gap)}}}.preview-placeholder{display:none;min-height:500px;background:rgba(var(--color-foreground),.03);border-radius:12px;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}.preview-placeholder .placeholder-icon{font-size:4rem;margin-bottom:1rem;opacity:.4}.preview-placeholder .placeholder-text{font-size:1.125rem;color:rgba(var(--color-foreground),.6)}@media (min-width: 1024px) and (hover: hover){.pet-processor-container.has-result .preview-placeholder{display:flex}}
/*# sourceMappingURL=/cdn/shop/t/58/assets/pet-processor-v5.css.map */