@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Kaisei+Decol:wght@700&family=Outfit:wght@700&family=Zen+Maru+Gothic:wght@700&family=Noto+Sans+JP:wght@700&family=Noto+Serif+JP:wght@700&display=swap";@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box;margin:0;padding:0}#favicon-root{position:relative;min-height:100vh;background:#0a0a0f;font-family:Inter,Noto Sans JP,-apple-system,sans-serif;color:#fff;overflow-x:hidden}.bg-gradient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 20% 0%,hsla(340,60%,40%,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 100%,hsla(260,60%,35%,.08) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 50% 50%,hsla(210,40%,20%,.05) 0%,transparent 70%);z-index:0}.app-header{position:sticky;top:0;z-index:100;padding:0 1.5rem;background:#0a0a0fd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1rem}.header-title-group{display:flex;flex-direction:column;gap:.25rem}.app-title{font-size:clamp(1.2rem,4vw,1.6rem);font-weight:800;background:linear-gradient(135deg,#fff 20%,#f5a3be,#ae8cf2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:.5rem;letter-spacing:-.02em}.title-icon{-webkit-text-fill-color:initial;background:none;filter:drop-shadow(0 0 8px rgba(236,72,153,.5))}.app-subtitle{font-size:.8rem;color:#ffffff73;font-weight:400;letter-spacing:.02em}.header-actions{display:flex;align-items:center;gap:.75rem}.back-to-tools-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#ffffffbf;border-radius:100px;font-size:.85rem;font-weight:600;text-decoration:none;cursor:pointer;transition:all .2s ease;flex-shrink:0}.back-to-tools-btn:hover{background:#ffffff1f;color:#fff;border-color:#fff3;transform:translateY(-1px)}.info-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#fff9;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0}.info-btn:hover{background:#ffffff1f;color:#fff;border-color:#fff3}.app-main{max-width:1200px;margin:0 auto;padding:2rem 1.5rem;position:relative;z-index:5}.editor-layout{display:grid;grid-template-columns:500px minmax(0,1fr);gap:2rem;align-items:start;width:100%;overflow:hidden;@media (max-width: 1024px){grid-template-columns:1fr}>*{min-width:0;overflow-x:hidden}}.editor-card{background:#ffffff08;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.07);border-radius:20px;min-width:0;padding:2rem;margin-bottom:2rem;box-shadow:0 8px 32px #0003}.editor-card.highlight-card{background:linear-gradient(135deg,#ec48990d,#4f46e50d);border:1px solid rgba(236,72,153,.2);box-shadow:0 8px 32px #ec48990d}.card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:.75rem;.card-icon{font-size:1.4rem}h2{font-size:1.2rem;font-weight:700;color:#fff}}.tab-buttons{display:grid;grid-template-columns:1fr 1fr;background:#ffffff0a;padding:4px;border-radius:12px;border:1px solid rgba(255,255,255,.05);margin-bottom:1.5rem}.tab-btn{background:transparent;border:none;color:#fff9;padding:.6rem;font-size:.88rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;font-family:inherit}.tab-btn.active{background:#ffffff14;color:#fff;box-shadow:0 2px 8px #0003}.control-group{display:flex;flex-direction:column;gap:1.25rem}.control-group.border-top{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.05)}.control-row{display:flex;flex-direction:column;gap:.5rem;label{font-size:.85rem;font-weight:600;color:#ffffffb3}}.dropzone{border:2px dashed rgba(255,255,255,.15);border-radius:16px;padding:2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem;background:#ffffff03;transition:all .2s ease;&.dragover{border-color:#ec4899;background:#ec48990a}}.dropzone-icon{font-size:2.2rem}.dropzone-text{font-size:.85rem;color:#fff6}.dropzone-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#fff;padding:.5rem 1.2rem;font-size:.82rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;&:hover{background:#ffffff1f;border-color:#fff3}}.uploaded-info{display:flex;align-items:center;justify-content:space-between;background:#64c89614;border:1px solid rgba(100,200,150,.2);border-radius:8px;padding:.6rem 1rem;font-size:.85rem;color:#64c896;.filename{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%;font-weight:500}.btn-clear-image{background:transparent;border:none;color:#ffffff80;font-size:.95rem;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all .15s ease;&:hover{color:#ff6b6b;background:#ff5b5b1a}}}.text-input-field{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.75rem 1rem;font-size:.95rem;color:#fff;outline:none;transition:all .2s ease;font-family:inherit;&:focus{border-color:#ec489980;box-shadow:0 0 0 3px #ec48991a;background:#ffffff12}}.color-picker-wrapper{display:grid;grid-template-columns:50px 1fr;gap:.75rem;input[type=color]{-webkit-appearance:none;border:none;width:100%;height:42px;border-radius:8px;cursor:pointer;background:none;&::-webkit-color-swatch-wrapper{padding:0}&::-webkit-color-swatch{border:1px solid rgba(255,255,255,.15);border-radius:8px}}}.hex-input-field{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.5rem .8rem;font-size:.9rem;color:#fff;font-family:Fira Code,monospace;outline:none;transition:all .2s ease;&:focus{border-color:#ec489980;background:#ffffff12}}.select-custom{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.75rem 1rem;font-size:.9rem;color:#fff;outline:none;cursor:pointer;font-family:inherit;transition:all .2s ease;option{background:#0d0d15;color:#fff}&:focus{border-color:#ec489980;background:#ffffff12}}.range-wrap{display:flex;align-items:center;gap:1rem;input[type=range]{flex-grow:1;height:6px;background:#ffffff1a;border-radius:3px;outline:none;-webkit-appearance:none;cursor:pointer;&::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#ec4899;box-shadow:0 0 8px #ec489980;transition:transform .1s ease}&::-webkit-slider-thumb:hover{transform:scale(1.15)}}.range-val{font-size:.85rem;font-family:Fira Code,monospace;color:#fff9;width:50px;text-align:right}}.inline-toggles{display:flex;gap:1.5rem}.cb-label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;input[type=checkbox]{display:none}.cb-box{width:18px;height:18px;border:2px solid rgba(255,255,255,.2);border-radius:5px;display:block;position:relative;transition:all .2s ease}input[type=checkbox]:checked+.cb-box{background:#ec4899;border-color:#ec4899;&:after{content:"";display:block;position:absolute;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);top:2px;left:5px}}.cb-text{font-size:.85rem;font-weight:500;color:#fffc}}.shape-selectors{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.shape-btn{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.75rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease;span{font-size:.75rem;color:#fff9;font-weight:500}.shape-icon{width:32px;height:32px;border:1px solid rgba(255,255,255,.2);transition:all .2s ease}.circle-preview{border-radius:50%;background:#ffffff1a}.rrect-preview{border-radius:8px;background:#ffffff1a}.rect-preview{background:#ffffff1a}&:hover{background:#ffffff14;border-color:#ffffff26;span{color:#fff}}&.active{background:#ec489914;border-color:#ec4899;box-shadow:0 0 12px #ec489926;span{color:#fff;font-weight:600}.shape-icon{border-color:#ec4899;background:#ec4899}}}.transparent-grid{background-image:linear-gradient(45deg,#202025 25%,transparent 25%),linear-gradient(-45deg,#202025 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#202025 75%),linear-gradient(-45deg,transparent 75%,#202025 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:#101015}.bg-type-selectors{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.bg-type-btn{background:#ffffff08;border:1px solid rgba(255,255,255,.06);color:#fff9;padding:.5rem;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease;&:hover{background:#ffffff14;color:#fff}&.active{background:#ffffff14;color:#fff;border-color:#fff3}}.tab-mockups{display:flex;flex-direction:column;gap:1rem}.tab-mockup{border-radius:12px;overflow:hidden;border:1px solid;box-shadow:0 4px 20px #00000026}.mockup-header{padding:.5rem .75rem;display:flex;gap:5px;align-items:center}.mockup-dot{width:8px;height:8px;border-radius:50%}.mockup-tab-strip{display:flex;padding-left:.5rem}.mockup-tab{display:flex;align-items:center;gap:.5rem;padding:.45rem 1rem;border-radius:8px 8px 0 0;font-size:.72rem;max-width:180px;width:100%;user-select:none;overflow:hidden;.tab-favicon-img{width:14px;height:14px;object-fit:contain;background-color:transparent;flex-shrink:0}.tab-title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1;font-weight:500}.tab-close{font-size:.65rem;opacity:.4;transition:opacity .1s ease;cursor:pointer;&:hover{opacity:1}}}.dark-tab{background:#1c1c24;border-color:#2a2a35;.mockup-header{background:#181820}.mockup-dot{background:#3a3a48}.mockup-tab-strip{background:#181820}.mockup-tab.active{background:#1c1c24;color:#fff;border-top:1px solid rgba(255,255,255,.03);border-left:1px solid rgba(255,255,255,.02);border-right:1px solid rgba(255,255,255,.02)}}.light-tab{background:#f1f2f6;border-color:#d8dae2;.mockup-header{background:#e2e4eb}.mockup-dot{background:#c2c4cc}.mockup-tab-strip{background:#e2e4eb}.mockup-tab.active{background:#f1f2f6;color:#2c2e35;border-top:1px solid rgba(0,0,0,.02);border-left:1px solid rgba(0,0,0,.03);border-right:1px solid rgba(0,0,0,.03)}}.preview-sizes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;@media (max-width: 640px){grid-template-columns:1fr 1fr}}.size-preview-card{background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;.preview-canvas-holder{width:80px;height:80px;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 12px #0003;border:1px solid rgba(255,255,255,.06);.size-img{max-width:100%;max-height:100%;object-fit:contain}}&[data-size="16"] .size-img{width:16px;height:16px}&[data-size="32"] .size-img{width:32px;height:32px}&[data-size="48"] .size-img{width:48px;height:48px}&[data-size="180"] .size-img{width:80px;height:80px}// Draw maximum contained representation &[data-size="192"] .size-img{width:80px;height:80px}&[data-size="512"] .size-img{width:80px;height:80px}.size-badge{font-size:.72rem;color:#ffffff8c;font-weight:500;text-align:center;word-break:break-word}}.manifest-meta-inputs{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem}.download-actions{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:12px;padding:.85rem 1.5rem;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);font-family:inherit;color:#fff}.btn-download-zip{background:linear-gradient(135deg,#ec4899,#4f46e5);box-shadow:0 4px 15px #ec48994d;&:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ec489966}&:active:not(:disabled){transform:translateY(0)}&:disabled{opacity:.6;cursor:not-allowed}}.individual-downloads{display:flex;flex-direction:column;gap:.5rem;.section-label{font-size:.78rem;color:#fff6;font-weight:600}}.dl-links{display:flex;flex-wrap:wrap;gap:.5rem}.btn-dl-link{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);color:#fffc;padding:.4rem .8rem;font-size:.78rem;font-weight:600;border-radius:6px;cursor:pointer;transition:all .15s ease;&:hover{background:#ffffff14;border-color:#ffffff26;color:#fff}}.snippet-desc{font-size:.82rem;color:#ffffff80;margin-bottom:1rem;line-height:1.5}.snippet-container{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#06060a}.snippet-header{display:flex;justify-content:space-between;align-items:center;background:#111118;padding:.4rem 1rem;border-bottom:1px solid rgba(255,255,255,.04)}.snippet-tab{font-size:.75rem;color:#fff9;font-weight:600;padding:.3rem 0}.btn-copy-snippet{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#ffffffb3;padding:.25rem .6rem;font-size:.72rem;font-weight:600;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:.25rem;transition:all .15s ease;&:hover{background:#ffffff1a;color:#fff}}.snippet-code{padding:1.25rem;overflow-x:auto;max-width:100%;code{font-family:Fira Code,Courier New,monospace;font-size:.8rem;line-height:1.5;color:#64c896;white-space:pre-wrap;word-break:break-all}}.use-cases-section{border-top:1px solid rgba(255,255,255,.05);background:#ffffff03;margin-top:4rem;padding:4px 0 2rem}.use-cases-inner{max-width:1200px;margin:0 auto;padding:3rem 0}.use-cases-title{font-size:1.5rem;font-weight:800;text-align:center;margin-bottom:2.5rem;color:#ec4899}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem}.use-case-card{background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:1.5rem;transition:transform .2s ease,border-color .2s ease;&:hover{border-color:#ec48994d;transform:translateY(-2px)}}.use-case-icon{font-size:2rem;margin-bottom:1rem}.use-case-heading{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;color:#fff}.use-case-desc{font-size:.85rem;line-height:1.6;color:#fff9}.app-footer-bar{border-top:1px solid rgba(255,255,255,.05);background:#0a0a0f99;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:1.5rem 0}.privacy-banner-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:center}.privacy-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:#64c896cc;text-align:center;line-height:1.4;svg{flex-shrink:0;color:#64c896e6}}.copy-toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%) translateY(100px);background:#0a0a0fe6;border:1px solid rgba(100,200,150,.3);color:#64c896;padding:.75rem 2rem;border-radius:100px;font-size:.88rem;font-weight:600;box-shadow:0 8px 30px #00000080;z-index:9999;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);pointer-events:none;&.show{transform:translate(-50%) translateY(0)}}#info-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease;padding:1.5rem;&.open{opacity:1;pointer-events:auto}}.modal-backdrop{position:absolute;inset:0;background:#000000b3;backdrop-filter:blur(8px)}.modal-box{position:relative;background:#12121a;border:1px solid rgba(255,255,255,.08);border-radius:20px;width:100%;max-width:640px;max-height:80vh;overflow-y:auto;z-index:10;box-shadow:0 20px 50px #00000080;display:flex;flex-direction:column}.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#12121a;z-index:2}.modal-title{font-weight:700;font-size:1.1rem;color:#fff}.modal-close{background:transparent;border:none;color:#fff6;font-size:1.2rem;cursor:pointer;padding:4px;border-radius:4px;transition:all .15s ease;&:hover{color:#fff;background:#ffffff0d}}.modal-body{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;overflow-y:auto}.tool-seo-section{h2{font-size:1.15rem;font-weight:700;color:#ec4899;margin-top:1.5rem;margin-bottom:.75rem;&:first-of-type{margin-top:0}}p{font-size:.88rem;line-height:1.7;color:#ffffffb3;margin-bottom:1rem}ul{margin-left:1.25rem;margin-bottom:1rem;font-size:.88rem;color:#ffffffb3;line-height:1.7}.faq-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}.faq-item{background:#ffffff05;border:1px solid rgba(255,255,255,.04);border-radius:10px;padding:.75rem 1rem;&[open]{border-color:#ec489933}}.faq-question{font-weight:600;font-size:.88rem;color:#fff;cursor:pointer;user-select:none;outline:none}.faq-answer{margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.03);p{margin:0;font-size:.84rem;line-height:1.6}}}