@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(inter-var.woff2)format("woff2-variations"),url(inter-var.woff2)format("woff2")}:root{--color-bg-primary:#f6f4f0;--color-bg-surface:#ffffff;--color-bg-hover:#edeae5;--color-bg-surface-alt:#f0ede8;--color-bg-input:#f6f4f0;--color-bg-code:#f0ede8;--color-bg-tip:#f5f0e8;--color-text-primary:#2a2826;--color-text-secondary:#6a6865;--color-text-muted:#9a9895;--color-text-inverse:#f6f4f0;--color-border:#e2dfda;--color-border-focus:#b8a88a;--color-accent:#8a7a6a;--color-accent-hover:#7a6a5a;--color-accent-light:#ede8e2;--color-accent-text:#8a7a6a;--color-shadow:rgba(42, 40, 38, 0.06);--color-shadow-lg:rgba(42, 40, 38, 0.12);--color-success:#5a7a5a;--color-error:#8a5a5a;--font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--font-size-base:1rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--spacing-3xl:64px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 2px 8px var(--color-shadow);--shadow-md:0 4px 20px var(--color-shadow);--shadow-lg:0 8px 40px var(--color-shadow-lg);--transition-fast:0.15s ease;--transition-base:0.25s ease;--transition-slow:0.4s ease;--max-width:1200px}[data-theme=dark]{--color-bg-primary:#1a1816;--color-bg-surface:#242220;--color-bg-hover:#302d2a;--color-bg-surface-alt:#2a2824;--color-bg-input:#242220;--color-bg-code:#2a2824;--color-bg-tip:#2a2824;--color-text-primary:#e6e4df;--color-text-secondary:#8a8885;--color-text-muted:#5a5855;--color-text-inverse:#1a1816;--color-border:#3a3835;--color-border-focus:#b8a88a;--color-accent:#b8a88a;--color-accent-hover:#c8b89a;--color-accent-light:#2a2824;--color-accent-text:#b8a88a;--color-shadow:rgba(0, 0, 0, 0.3);--color-shadow-lg:rgba(0, 0, 0, 0.5);--color-success:#7a9a7a;--color-error:#9a7a7a}*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-weight:var(--font-weight-regular);background-color:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-bold);line-height:1.2;letter-spacing:-.02em}a,button{color:inherit}a{text-decoration:none}button{cursor:pointer;border:0;background:0 0}body,button,input,textarea{font-family:var(--font-family);font-size:var(--font-size-base)}img{display:block;max-width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-lg);width:100%}.access-box,.detail-container,.filter-btn,input{transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:12px 28px;border-radius:var(--radius-full);font-weight:var(--font-weight-semibold);font-size:.95rem;transition:all var(--transition-base);border:2px solid transparent;line-height:1.2;min-height:52px;position:relative;white-space:nowrap}.btn-primary{background-color:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent)}.btn-primary:focus-visible,.btn-primary:hover{background-color:var(--color-accent-hover);border-color:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 8px 24px var(--color-shadow-lg)}.btn-primary:active{transform:translateY(0)}.btn-outline{background-color:transparent;color:var(--color-text-primary);border-color:var(--color-border)}.btn-outline:focus-visible,.btn-outline:hover{background-color:var(--color-bg-hover);border-color:var(--color-border)}.btn-sm{padding:8px 18px;font-size:.85rem;min-height:40px}.btn-block{width:100%;justify-content:center}.btn:disabled{opacity:.5;pointer-events:none;transform:none!important}.feature-card,.prompt-card{background-color:var(--color-bg-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--color-border);transition:all var(--transition-base);contain:layout paint}.feature-card:hover,.prompt-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.img-pair,.img-pair>div{position:relative;overflow:hidden;background-color:var(--color-bg-surface-alt)}.img-pair{display:grid;grid-template-columns:1fr 1fr;gap:0;aspect-ratio:16/10}.img-pair>div{display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:var(--font-weight-medium);color:var(--color-text-muted);min-height:80px;filter:none}.img-pair .before{border-right:2px solid var(--color-border)}.img-pair .after{background-color:var(--color-accent-light)}.card-body h3,.img-pair .label{font-weight:var(--font-weight-semibold)}.img-pair .label{position:absolute;bottom:var(--spacing-sm);left:var(--spacing-sm);background-color:rgba(26,24,22,.65);color:#f6f4f0;padding:1px 10px;border-radius:var(--radius-full);font-size:.6rem;letter-spacing:.03em;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);filter:none}.card-body{padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);flex:1;display:flex;flex-direction:column}.card-body .category-tag{display:inline-block;font-size:.65rem;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.04em;background-color:var(--color-accent-light);padding:2px 12px;border-radius:var(--radius-full);align-self:flex-start;margin-bottom:var(--spacing-sm)}.card-body h3{font-size:1.05rem;margin-bottom:var(--spacing-xs);cursor:pointer}.card-body .category-tag,.card-body h3:hover,.hero h1 span{color:var(--color-accent-text)}.access-box p,.card-body p{color:var(--color-text-secondary)}.card-body p{font-size:.9rem;flex:1;margin-bottom:var(--spacing-md)}.card-body .card-actions{display:flex;gap:var(--spacing-sm);margin-top:auto}.card-body .card-actions .btn{flex:1;min-height:40px;padding:8px 16px;font-size:.85rem}.access-box{max-width:480px;margin:0 auto;background-color:var(--color-bg-surface);border-radius:var(--radius-lg);padding:var(--spacing-2xl) var(--spacing-xl);box-shadow:var(--shadow-lg);border:1px solid var(--color-border);text-align:center}.access-box h2{font-size:1.8rem;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-sm)}.access-box p{margin-bottom:var(--spacing-lg)}.access-box .input-group{display:flex;flex-direction:column;gap:var(--spacing-md)}.access-box input{padding:14px 18px;border-radius:var(--radius-full);border:2px solid var(--color-border);font-size:var(--font-size-base);font-family:var(--font-family);background-color:var(--color-bg-input);color:var(--color-text-primary);transition:all var(--transition-base);outline:0;width:100%}.access-box input:focus,.library-controls .search-wrap input:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 4px var(--color-accent-light)}.access-box .error-msg,.access-box .success-msg{font-size:.9rem;margin-top:var(--spacing-sm);font-weight:var(--font-weight-medium)}.access-box .error-msg{color:var(--color-error);min-height:28px}.access-box .success-msg{color:var(--color-success)}.access-footer{margin-top:var(--spacing-lg);font-size:.85rem;color:var(--color-text-muted)}.access-link{color:var(--color-accent-text);font-weight:var(--font-weight-medium)}.access-link:hover{text-decoration:underline}.library-controls{display:flex;flex-wrap:wrap;gap:var(--spacing-md);flex:1 1 100%}.library-controls .search-wrap{flex:1 1 240px;position:relative}.detail-content .prompt-box pre,.library-controls .search-wrap input{font-family:var(--font-family);font-size:.95rem;color:var(--color-text-primary)}.library-controls .search-wrap input{width:100%;padding:12px 18px 12px 44px;border-radius:var(--radius-full);border:2px solid var(--color-border);background-color:var(--color-bg-surface);transition:all var(--transition-base);outline:0}.library-controls .search-wrap .search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);font-size:1.1rem;pointer-events:none}.library-controls .filter-wrap{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.detail-back,.library-controls .filter-wrap .filter-btn{color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.library-controls .filter-wrap .filter-btn{padding:8px 18px;border-radius:var(--radius-full);font-size:.85rem;border:2px solid var(--color-border);background-color:var(--color-bg-surface);transition:all var(--transition-base)}.library-controls .filter-wrap .filter-btn:hover{background-color:var(--color-bg-hover)}.library-controls .filter-wrap .filter-btn.active{background-color:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent)}.detail-back{display:inline-flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);transition:color var(--transition-base);padding:var(--spacing-sm)0}.detail-back:hover{color:var(--color-text-primary)}.detail-container{background-color:var(--color-bg-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--color-border)}.detail-images,.detail-images>div{background-color:var(--color-bg-surface-alt)}.detail-images{display:grid;grid-template-columns:1fr 1fr;gap:0;aspect-ratio:16/9}.detail-images>div{display:flex;align-items:center;justify-content:center;font-size:3.6rem;font-weight:var(--font-weight-medium);color:var(--color-text-muted);position:relative;overflow:hidden;min-height:120px;filter:none}.detail-images .before{border-right:2px solid var(--color-border)}.detail-images .after{background-color:var(--color-accent-light)}.detail-images .label{position:absolute;bottom:var(--spacing-md);left:var(--spacing-md);background-color:rgba(26,24,22,.65);color:#f6f4f0;padding:4px 14px;border-radius:var(--radius-full);font-size:.75rem;font-weight:var(--font-weight-semibold);letter-spacing:.03em;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);filter:none!important}.detail-content{padding:var(--spacing-xl) var(--spacing-xl)}.detail-content .category-tag,.detail-content .prompt-box .prompt-label{font-size:.7rem;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--spacing-sm)}.detail-content .category-tag{display:inline-block;color:var(--color-accent-text);background-color:var(--color-accent-light);padding:2px 14px;border-radius:var(--radius-full)}.detail-content h2{font-size:1.8rem;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-xs)}.detail-content .detail-desc,.empty-state h3{color:var(--color-text-secondary);font-size:1.05rem;margin-bottom:var(--spacing-lg)}.detail-content .prompt-box{background-color:var(--color-bg-code);border-radius:var(--radius-md);padding:var(--spacing-lg) var(--spacing-lg);border:1px solid var(--color-border);margin-bottom:var(--spacing-md)}.detail-content .prompt-box .prompt-label{color:var(--color-text-muted)}.detail-content .prompt-box pre{white-space:pre-wrap;word-break:break-word;line-height:1.7}.detail-content .copy-wrap{display:flex;gap:var(--spacing-md);align-items:center;flex-wrap:wrap}.detail-content .copy-wrap .btn{min-height:44px}.detail-content .copy-feedback{font-size:.9rem;color:var(--color-success);font-weight:var(--font-weight-medium);min-height:28px}.detail-content .tip-box{margin-top:var(--spacing-lg);background-color:var(--color-bg-tip);border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);border:1px solid var(--color-border)}.detail-content .tip-box .tip-label{font-size:.7rem;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--color-accent-text)}.detail-content .tip-box p{color:var(--color-text-secondary);font-size:.95rem;margin-top:var(--spacing-xs)}.empty-state{text-align:center;padding:var(--spacing-3xl) var(--spacing-lg);color:var(--color-text-muted);grid-column:1/-1}.empty-state h3{font-size:1.2rem;margin-bottom:var(--spacing-xs)}.site-header{padding:var(--spacing-md)0;background-color:rgba(246,244,240,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100;transition:background-color var(--transition-base),border-color var(--transition-base)}[data-theme=dark] .site-header{background-color:rgba(26,24,22,.85)}.logo,.site-header .container{display:flex;align-items:center}.site-header .container{justify-content:space-between}.logo{font-weight:var(--font-weight-bold);font-size:1.3rem;letter-spacing:-.02em;gap:var(--spacing-sm);color:var(--color-text-primary)}.logo-text{display:inline}.header-actions,.theme-toggle{display:flex;align-items:center}.header-actions{gap:var(--spacing-md)}.header-actions .btn{min-height:40px;padding:8px 20px;font-size:.85rem}.theme-toggle{justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);border:2px solid var(--color-border);background-color:var(--color-bg-surface);font-size:1.2rem;transition:all var(--transition-base);flex-shrink:0}.theme-toggle:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-focus)}.theme-toggle:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.page{display:none;animation:fadeUp .4s ease;padding:var(--spacing-xl)0 var(--spacing-3xl)}.page.active{display:block}main{flex:1}.hero{padding:var(--spacing-xl)0 var(--spacing-md);text-align:center}.hero h1,.library-header h2{font-weight:var(--font-weight-bold)}.hero h1{font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.03em;line-height:1.1;max-width:800px;margin:0 auto var(--spacing-md)}.hero p{font-size:1.2rem;color:var(--color-text-secondary);max-width:580px;margin:0 auto var(--spacing-xl)}.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-md)}.featured-section{scroll-margin-top:100px}.featured-title{font-size:1.5rem;font-weight:var(--font-weight-semibold);margin-top:var(--spacing-lg)}.featured-cta{text-align:center;margin-top:var(--spacing-xl)}.featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-2xl)}.library-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.library-header h2{font-size:1.8rem}.library-count{font-size:.95rem}.prompt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-lg)}.site-footer{border-top:1px solid var(--color-border);padding:var(--spacing-lg)0;margin-top:auto;text-align:center;color:var(--color-text-muted);font-size:.85rem;transition:border-color var(--transition-base)}body{transition:background-color var(--transition-slow),color var(--transition-slow)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-primary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}::selection{background-color:var(--color-accent);color:var(--color-text-inverse)}::-moz-selection{background-color:var(--color-accent);color:var(--color-text-inverse)}:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.theme-icon{display:inline-block;transition:transform var(--transition-base)}.theme-toggle:hover .theme-icon{transform:scale(1.1)}@media (max-width:1024px){.container{padding:0 var(--spacing-md)}.detail-images{aspect-ratio:16/10}.detail-images>div{font-size:2.8rem;min-height:100px}}@media (max-width:768px){:root{--spacing-xl:24px;--spacing-2xl:32px;--spacing-3xl:48px}.container{padding:0 var(--spacing-md)}.site-header{padding:var(--spacing-sm)0}.logo{font-size:1.1rem}.header-actions{gap:var(--spacing-sm)}.header-actions .btn{padding:6px 14px;font-size:.8rem;min-height:34px}.theme-toggle{width:36px;height:36px;font-size:1rem}.page{padding:var(--spacing-md)0 var(--spacing-xl)}.hero{padding:var(--spacing-md)0 0}.hero h1{font-size:2rem}.hero p{font-size:1rem;margin-bottom:var(--spacing-lg)}.hero-actions .btn{width:100%;justify-content:center}.featured-grid{grid-template-columns:1fr;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.featured-title{font-size:1.25rem;margin-top:var(--spacing-md)}.access-box{padding:var(--spacing-lg) var(--spacing-md)}.access-box h2,.detail-content h2,.library-header h2{font-size:1.4rem}.library-header{gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.prompt-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.library-controls{flex-direction:column;gap:var(--spacing-sm)}.library-controls .search-wrap{flex:1 1 auto}.library-controls .filter-wrap{justify-content:flex-start}.library-controls .filter-wrap .filter-btn{padding:6px 14px;font-size:.8rem}.detail-content,.detail-content .prompt-box{padding:var(--spacing-md)}.card-body p,.detail-content .prompt-box pre{font-size:.85rem}.detail-content .copy-wrap{flex-direction:column;align-items:stretch}.detail-content .copy-wrap .btn{width:100%;justify-content:center}.detail-images{aspect-ratio:16/11}.detail-images>div{font-size:2.4rem;min-height:80px}.detail-images .label{font-size:.65rem;bottom:var(--spacing-sm);left:var(--spacing-sm);padding:2px 10px}.img-pair>div{font-size:2rem;min-height:64px}.img-pair .label{font-size:.55rem;bottom:var(--spacing-xs);left:var(--spacing-xs);padding:1px 8px}.card-body,.feature-card .card-body{padding:var(--spacing-md)}.card-body h3{font-size:.95rem}.card-body .card-actions .btn{font-size:.8rem;min-height:36px;padding:6px 12px}.empty-state{padding:var(--spacing-xl) var(--spacing-md)}.site-footer{padding:var(--spacing-md)0;font-size:.8rem}}@media (max-width:400px){.container{padding:0 var(--spacing-sm)}.hero h1{font-size:1.6rem}.detail-content .detail-desc,.hero p{font-size:.9rem}.access-box{padding:var(--spacing-md)}.access-box h2,.detail-content h2{font-size:1.2rem}.access-box input{padding:12px 14px;font-size:.9rem}.detail-content .prompt-box pre{font-size:.8rem}.btn,.library-controls .search-wrap input{font-size:.85rem;padding:10px 14px 10px 38px}.library-controls .search-wrap .search-icon{font-size:.9rem;left:12px}.btn{padding:10px 20px;min-height:44px}.btn-sm{font-size:.75rem;padding:6px 12px;min-height:32px}.theme-toggle{width:32px;height:32px;font-size:.9rem}.header-actions .btn{font-size:.75rem;padding:4px 10px;min-height:30px}.detail-images>div{font-size:1.8rem;min-height:64px}.img-pair>div{font-size:1.6rem;min-height:56px}}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.img-pair img{width:100%;height:100%;object-fit:cover;display:block}