@import"https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Inter:wght@400;600&display=swap";*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--mint-light: #A8F0D4;--mint-dark: #7CEBC6;--cream: #F5E6A3;--cream-dark: #EDD87A;--sky-blue: #87CEEB;--dark: #1a1a1a;--brown: #3D2B1F;--border: #2a1a0e;--card-bg: #F5E6A3;--shadow: 3px 3px 0px #2a1a0e}body{font-family:Inter,sans-serif;background:linear-gradient(135deg,#7CEBC6 0%,#A8F0D4 50%,#B8F5E0 100%);min-height:100vh;color:var(--brown)}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:linear-gradient(90deg,#5DD4A8,#7CEBC6,#5DD4A8);border-bottom:3px solid var(--border);padding:16px 24px;box-shadow:0 4px 0 var(--border)}.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.header-logo{display:flex;align-items:baseline;gap:10px}.header-title{font-family:Dela Gothic One,cursive;font-size:2.5rem;color:var(--brown);text-shadow:3px 3px 0 rgba(0,0,0,.15);letter-spacing:2px}.header-jp{font-family:Dela Gothic One,cursive;font-size:1.4rem;color:var(--brown);opacity:.8}.speech-bubble-header{background:white;border:2.5px solid var(--border);border-radius:20px;padding:8px 16px;font-family:Dela Gothic One,cursive;font-size:1rem;position:relative;box-shadow:var(--shadow);color:var(--brown)}.speech-bubble-header:before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);border:8px solid transparent;border-right-color:var(--border)}.speech-bubble-header:after{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);border:7px solid transparent;border-right-color:#fff}.header-subtitle{margin-left:auto;font-family:Dela Gothic One,cursive;font-size:1.6rem;background:var(--cream);border:2.5px solid var(--border);border-radius:30px;padding:6px 20px;box-shadow:var(--shadow);color:var(--brown);letter-spacing:3px}.main{flex:1;max-width:1200px;margin:0 auto;width:100%;padding:24px 20px}.section{margin-bottom:24px}.section-title{font-family:Dela Gothic One,cursive;font-size:1.3rem;letter-spacing:2px;color:var(--brown);margin-bottom:14px;text-shadow:1px 1px 0 rgba(0,0,0,.1)}.section-title.small{font-size:1rem;margin-bottom:10px}.base-photos{display:flex;gap:16px;flex-wrap:wrap}.base-photo-card{cursor:pointer;border:3px solid var(--border);border-radius:16px;background:var(--card-bg);padding:10px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .15s,box-shadow .15s;box-shadow:var(--shadow);width:160px}.base-photo-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--border)}.base-photo-card.selected{background:var(--sky-blue);border-color:#0057a8;box-shadow:4px 4px #0057a8}.base-photo-img{width:130px;height:130px;object-fit:cover;border-radius:10px;border:2px solid var(--border)}.base-photo-label{font-family:Dela Gothic One,cursive;font-size:.75rem;letter-spacing:1px;text-align:center;color:var(--brown)}.editor-layout{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}.canvas-area{flex:0 0 auto;display:flex;flex-direction:column;gap:16px}.canvas-wrapper{background:var(--card-bg);border:3px solid var(--border);border-radius:20px;padding:12px;box-shadow:var(--shadow);display:inline-block}.main-canvas{display:block;border-radius:12px;border:2px solid var(--border);cursor:crosshair;max-width:100%;width:512px;height:512px}.canvas-hint{text-align:center;font-size:.75rem;color:var(--brown);opacity:.6;margin-top:6px;font-style:italic}.overlay-controls{background:var(--card-bg);border:3px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}.controls-title{font-family:Dela Gothic One,cursive;font-size:.9rem;letter-spacing:1px;margin-bottom:12px;color:var(--brown)}.control-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.control-row label{font-family:Dela Gothic One,cursive;font-size:.75rem;letter-spacing:1px;min-width:60px;color:var(--brown)}.control-row input[type=range]{flex:1;accent-color:var(--mint-dark);height:6px;cursor:pointer}.control-row span{min-width:45px;font-size:.8rem;font-weight:600;text-align:right}.btn{font-family:Dela Gothic One,cursive;letter-spacing:1.5px;font-size:.9rem;border:2.5px solid var(--border);border-radius:999px;padding:10px 24px;cursor:pointer;transition:transform .1s,box-shadow .1s;box-shadow:var(--shadow)}.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--border)}.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--border)}.btn-download{background:var(--sky-blue);color:var(--brown);font-size:1.1rem;padding:14px 32px}.btn-clear{background:#ffcdd2;color:var(--brown)}.btn-remove{background:#ff8a80;color:#fff;margin-top:4px;padding:8px 20px;font-size:.8rem}.download-area{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.overlay-panel{flex:1;min-width:280px;background:var(--card-bg);border:3px solid var(--border);border-radius:20px;padding:20px;box-shadow:var(--shadow)}.overlay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:20px;max-height:600px;overflow-y:auto}.overlay-card{background:white;border:2.5px solid var(--border);border-radius:12px;padding:8px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .1s,box-shadow .1s,background .1s;box-shadow:2px 2px 0 var(--border)}.overlay-card:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--border);background:#e8f8f0}.overlay-card:active{transform:translate(1px,1px)}.overlay-preview{width:64px;height:64px;object-fit:contain}.overlay-label{font-family:Dela Gothic One,cursive;font-size:.6rem;letter-spacing:.5px;text-align:center;color:var(--brown);line-height:1.2}.active-overlays{margin-top:16px}.active-overlay-item{display:flex;align-items:center;gap:8px;background:white;border:2px solid var(--border);border-radius:10px;padding:8px 10px;margin-bottom:6px;cursor:pointer;transition:background .1s}.active-overlay-item.selected{background:var(--sky-blue);border-color:#0057a8}.active-overlay-item:hover{background:#e8f8f0}.active-overlay-item.selected:hover{background:#7ab8d4}.layer-num{font-family:Dela Gothic One,cursive;font-size:.75rem;background:var(--mint-dark);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid var(--border)}.layer-label{font-family:Dela Gothic One,cursive;font-size:.75rem;letter-spacing:.5px;flex:1;color:var(--brown)}.layer-remove{background:none;border:none;cursor:pointer;font-size:.85rem;color:#c33;padding:2px 6px;border-radius:6px;font-weight:700}.layer-remove:hover{background:#ffcccc}.footer{text-align:center;padding:20px;border-top:3px solid var(--border);background:rgba(124,235,198,.5);margin-top:auto}.footer p{font-family:Dela Gothic One,cursive;font-size:.85rem;letter-spacing:1px;color:var(--brown)}.footer-disclaimer{font-size:.7rem!important;opacity:.7;margin-top:4px}@media (max-width: 700px){.main-canvas{width:340px;height:340px}.header-title{font-size:1.8rem}.header-subtitle{font-size:1.1rem}.editor-layout{flex-direction:column}.overlay-panel{min-width:unset;width:100%}.base-photo-card{width:120px}.base-photo-img{width:100px;height:100px}}