*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #6366f1;--primary-hover: #4f46e5;--success-color: #10b981;--bg-color: #f8fafc;--card-bg: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--border-color: #e2e8f0;--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--upload-hover-bg: #fafbff;--note-bg: #ecfdf5;--note-text: #065f46}[data-theme=dark]{--primary-color: #818cf8;--primary-hover: #6366f1;--success-color: #34d399;--bg-color: #0f172a;--card-bg: #1e293b;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--border-color: #334155;--shadow: 0 1px 3px 0 rgb(0 0 0 / .3), 0 1px 2px -1px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .4), 0 4px 6px -4px rgb(0 0 0 / .4);--upload-hover-bg: #2d3748;--note-bg: #064e3b;--note-text: #d1fae5}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:var(--bg-color);background-image:radial-gradient(at 20% 10%,rgba(99,102,241,.03) 0px,transparent 50%),radial-gradient(at 80% 90%,rgba(99,102,241,.03) 0px,transparent 50%),radial-gradient(at 50% 50%,rgba(99,102,241,.02) 0px,transparent 50%);color:var(--text-primary);line-height:1.6;padding:0}.hero-section{width:100%;background:var(--card-bg);border-bottom:1px solid var(--border-color);margin-bottom:40px;padding:0;display:flex;justify-content:center;align-items:center;overflow:hidden}.hero-image{width:100%;height:auto;display:block;max-width:860px;object-fit:contain}.hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:center;gap:28px}.hero-copy{display:flex;flex-direction:column;gap:12px}.hero-eyebrow{color:var(--primary-color);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}.hero-copy h1,.hero-copy h2{font-size:2.25rem;color:var(--text-primary);line-height:1.2}.hero-copy p{color:var(--text-secondary);font-size:1.05rem}.hero-highlights{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.hero-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--bg-color);border:1px solid var(--border-color);font-size:.95rem;color:var(--text-primary)}.hero-pill:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--primary-color)}.hero-visual{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}.source-card,.grid-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:14px;padding:16px;box-shadow:var(--shadow);min-width:240px;position:relative}.hero-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--bg-color);border:1px solid var(--border-color);font-size:.85rem;font-weight:600;color:var(--text-primary)}.hero-badge.success{background:#10b9811f;color:#0f5132;border-color:#10b9814d}[data-theme=dark] .hero-badge.success{color:#bbf7d0;border-color:#10b98166}.hero-caption{margin-top:12px;color:var(--text-secondary);font-size:.95rem}.portrait{position:relative;width:220px;height:260px;margin-top:10px;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#9f7aea,#6366f1 60%,#14b8a6);box-shadow:0 20px 35px -20px #0006}.portrait:before{content:"";position:absolute;width:110px;height:110px;background:#ffffffe6;border-radius:50%;top:48px;left:55px}.portrait:after{content:"";position:absolute;width:150px;height:170px;background:#ffffffc7;border-radius:50% 50% 34% 34%;bottom:-4px;left:35px}.hero-arrow{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-secondary);font-weight:700}.arrow-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--bg-color);border:1px solid var(--border-color);color:var(--primary-color);font-size:1.4rem;box-shadow:var(--shadow)}.photo-sheet{margin-top:10px;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid var(--border-color);border-radius:12px;padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;box-shadow:inset 0 1px #fff9;max-width:360px}.grid-photo{position:relative;width:100%;padding-top:100%;border-radius:8px;background:linear-gradient(145deg,#9f7aea,#6366f1 70%,#14b8a6);overflow:hidden;box-shadow:0 10px 20px -12px #00000059;border:1px solid rgba(255,255,255,.4)}.grid-photo:before{content:"";position:absolute;width:46%;height:46%;background:#ffffffe0;border-radius:50%;top:18%;left:27%}.grid-photo:after{content:"";position:absolute;width:64%;height:60%;background:#ffffffbd;border-radius:50% 50% 32% 32%;bottom:4%;left:18%}.grid-card{min-width:320px}.container{max-width:900px;margin:0 auto;padding:0 20px 20px}header{text-align:center;margin-bottom:40px}header h1{font-size:2.5rem;color:var(--text-primary);margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:12px}.logo-icon{width:48px;height:48px;display:inline-block}header p{color:var(--text-secondary);font-size:1.1rem}.privacy-notice{display:inline-flex;align-items:center;gap:10px;background:var(--note-bg);padding:14px 20px;border-radius:8px;margin-top:16px;border:1px solid var(--success-color);box-shadow:0 2px 8px #10b9811a}.lock-icon{color:var(--success-color);flex-shrink:0}.privacy-notice span{color:var(--note-text);font-size:.95rem;font-weight:500}.upload-section{margin-bottom:30px}#imageUpload{display:none}.upload-label{display:block;cursor:pointer}.upload-box{background:var(--card-bg);border:3px dashed var(--border-color);border-radius:12px;padding:60px 20px;text-align:center;transition:all .3s ease;position:relative}.upload-box:hover{border-color:var(--primary-color);background-color:var(--upload-hover-bg);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.upload-box:focus-within{outline:3px solid var(--primary-color);outline-offset:2px}.upload-box.drag-over{border-color:var(--primary-color);background-color:var(--upload-hover-bg);border-style:solid;transform:scale(1.02)}.upload-icon{color:var(--primary-color);margin-bottom:20px;transition:transform .3s ease}.upload-box:hover .upload-icon{transform:translateY(-4px)}.upload-main-text{font-size:1.2rem;color:var(--text-primary);margin-bottom:16px;font-weight:600}.file-formats{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;padding:8px 16px;background:var(--bg-color);border-radius:6px;display:inline-flex}.format-label{color:var(--text-secondary);font-size:.9rem;font-weight:600}.format-types{color:var(--primary-color);font-size:.9rem;font-weight:600}.upload-hint{color:var(--text-secondary);font-size:.85rem;margin-top:12px}.controls{background:var(--card-bg);border-radius:12px;padding:30px;margin-bottom:30px;box-shadow:var(--shadow)}.controls h3{margin-bottom:16px;color:var(--text-primary)}.generate-btn,.download-btn{width:100%;background:var(--primary-color);color:#fff;border:none;border-radius:8px;padding:16px 32px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.download-btn svg{flex-shrink:0}.generate-btn:hover,.download-btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.generate-btn:active,.download-btn:active{transform:translateY(0)}.generate-btn:focus,.download-btn:focus{outline:3px solid var(--primary-color);outline-offset:2px}.loading-section{background:var(--card-bg);border-radius:12px;padding:40px;margin-bottom:30px;box-shadow:var(--shadow);text-align:center}.loading-spinner{width:48px;height:48px;border:4px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--text-secondary);font-size:1rem}.preview-section{background:var(--card-bg);border-radius:12px;padding:30px;margin-bottom:30px;box-shadow:var(--shadow)}.preview-section h3{margin-bottom:20px}.canvas-container{background:var(--bg-color);border-radius:8px;padding:20px;display:flex;justify-content:center;align-items:center;margin-bottom:20px;overflow:auto}#previewCanvas{max-width:100%;height:auto;box-shadow:var(--shadow-lg);border-radius:4px}.info-section{background:var(--card-bg);border-radius:12px;padding:30px;box-shadow:var(--shadow)}.info-section h3{margin-bottom:16px}.info-section ol{margin-left:20px;margin-bottom:16px}.info-section li{margin-bottom:12px}.info-section ul{margin-left:20px;margin-top:8px}.info-section ul li{margin-bottom:6px}.note{background:var(--note-bg);border:1px solid var(--success-color);padding:12px 16px;border-radius:8px;color:var(--note-text);font-size:.95rem;box-shadow:0 2px 8px #10b9811a}.theme-toggle{position:fixed;top:20px;right:20px;background:var(--card-bg);border:2px solid var(--border-color);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow);z-index:1000}.theme-toggle:hover{transform:scale(1.1);border-color:var(--primary-color);box-shadow:var(--shadow-lg)}.theme-toggle svg{width:24px;height:24px;color:var(--text-primary)}.footer{margin-top:60px;padding:30px 0 20px;border-top:1px solid var(--border-color);text-align:center;color:var(--text-secondary);font-size:.9rem}.footer p{margin-bottom:10px}.footer nav{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.footer nav a{color:var(--text-secondary);text-decoration:none;transition:color .2s}.footer nav a:hover{color:var(--primary-color)}.input-error{border-color:#ef4444!important}.validation-error{color:#ef4444;font-size:.85rem;margin-top:.5rem;padding:.5rem;background:#ef44441a;border-radius:4px;border:1px solid rgba(239,68,68,.3)}[data-theme=dark] .validation-error{background:#ef444426;border-color:#ef444466}*:focus-visible{outline:3px solid var(--primary-color);outline-offset:2px}.upload-label:focus-visible{border-radius:12px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-width:768px){.hero-section{padding:0}header h1{font-size:2rem;flex-direction:column;gap:8px}.logo-icon{width:40px;height:40px}.privacy-notice{flex-direction:column;text-align:center;padding:12px 16px}.upload-box{padding:40px 15px}.upload-icon{width:56px;height:56px}.controls{padding:20px}.footer{margin-top:40px;padding:20px 0;font-size:.85rem}.footer nav{gap:10px}}