@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-900: #0c4a6e;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--success-500: #10b981;--success-600: #059669;--warning-500: #f59e0b;--error-500: #ef4444;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px 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);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--transition-fast: .15s ease-in-out;--transition-normal: .25s ease-in-out;--transition-slow: .35s ease-in-out}:root[data-theme=dark]{--gray-50: #1f2937;--gray-100: #374151;--gray-200: #4b5563;--gray-300: #6b7280;--gray-400: #9ca3af;--gray-500: #d1d5db;--gray-600: #e5e7eb;--gray-700: #f3f4f6;--gray-800: #f9fafb;--gray-900: #ffffff;--primary-50: #0c4a6e;--primary-100: #0369a1}body{font-family:var(--font-sans);line-height:1.6;color:var(--gray-800);background:linear-gradient(135deg,var(--gray-50) 0%,var(--primary-50) 100%);min-height:100vh;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background var(--transition-normal),color var(--transition-normal)}.app-container{min-height:100vh;display:flex;flex-direction:column}.app-header{background:var(--gray-50);border-bottom:1px solid var(--gray-200);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;transition:all var(--transition-normal)}.header-content{max-width:1200px;margin:0 auto;padding:var(--space-6) var(--space-6);display:flex;justify-content:space-between;align-items:center}.logo-section{display:flex;align-items:center;gap:var(--space-4)}.logo-icon{width:48px;height:48px;background:linear-gradient(135deg,var(--primary-500),var(--primary-600));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-md)}.logo-text h1{font-size:1.75rem;font-weight:700;color:var(--gray-900);margin-bottom:var(--space-1)}.logo-text p{font-size:.875rem;color:var(--gray-500);font-weight:500}.header-controls{display:flex;align-items:center}.theme-slider-container{background:var(--gray-200);border-radius:24px;padding:4px;position:relative;box-shadow:var(--shadow-sm);transition:all var(--transition-normal)}.theme-slider-container:hover{box-shadow:var(--shadow-md)}.theme-slider-track{display:flex;position:relative;background:transparent;border-radius:20px}.theme-slider-indicator{position:absolute;top:0;left:0;width:33.333%;height:100%;background:var(--primary-500);border-radius:20px;box-shadow:var(--shadow-md);transition:all var(--transition-normal);z-index:1}.theme-option{position:relative;z-index:2;background:transparent;border:none;width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);color:var(--gray-600)}.theme-option svg{transition:all var(--transition-fast)}.theme-option:hover{transform:scale(1.1);color:var(--gray-700)}.theme-option:active{transform:scale(.95)}.theme-slider-track .theme-option[data-theme=light]:nth-child(2){color:#fff}.theme-slider-track .theme-option[data-theme=auto]:nth-child(3){color:#fff}.theme-slider-track .theme-option[data-theme=dark]:nth-child(4){color:#fff}.error-page .page-main{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:800px}.error-hero{margin-bottom:var(--space-16)}.error-code{font-size:8rem;font-weight:900;color:var(--primary-500);line-height:1;margin-bottom:var(--space-4);text-shadow:0 4px 8px rgba(0,0,0,.1)}.error-icon{color:var(--gray-400);margin-bottom:var(--space-6)}.error-title{font-size:2.5rem;font-weight:700;color:var(--gray-900);margin-bottom:var(--space-4)}.error-description{font-size:1.25rem;color:var(--gray-600);line-height:1.6;margin-bottom:var(--space-8);max-width:600px}.error-actions{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}.primary-action-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);background:var(--primary-500);border:none;border-radius:var(--radius-lg);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md)}.primary-action-btn:hover{background:var(--primary-600);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.secondary-action-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);background:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--radius-lg);color:var(--gray-700);font-size:1rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.secondary-action-btn:hover{background:var(--gray-200);color:var(--gray-800);transform:translateY(-1px)}.error-suggestions{width:100%}.error-suggestions h3{font-size:1.5rem;font-weight:600;color:var(--gray-900);margin-bottom:var(--space-6)}.suggestion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-6)}.suggestion-card{background:var(--gray-50);border-radius:var(--radius-lg);padding:var(--space-6);border:1px solid var(--gray-200);transition:all var(--transition-normal);text-align:center}.suggestion-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.suggestion-icon{width:48px;height:48px;background:var(--primary-100);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--primary-600);margin:0 auto var(--space-4)}.suggestion-card h4{font-size:1.125rem;font-weight:600;color:var(--gray-900);margin-bottom:var(--space-2)}.suggestion-card p{font-size:.875rem;color:var(--gray-600);margin:0}.page-container{position:fixed;inset:0;background:var(--gray-50);z-index:2000;overflow-y:auto}.page-content{min-height:100vh;display:flex;flex-direction:column}.page-header{background:var(--gray-50);border-bottom:1px solid var(--gray-200);padding:var(--space-6);position:sticky;top:0;z-index:100}.back-button{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--radius-md);color:var(--gray-700);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.back-button:hover{background:var(--gray-200);color:var(--gray-800);transform:translateY(-1px)}.page-main{flex:1;max-width:800px;margin:0 auto;padding:var(--space-12) var(--space-6);width:100%}.hero-section{text-align:center;margin-bottom:var(--space-16)}.hero-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--primary-500),var(--primary-600));border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto var(--space-6);box-shadow:var(--shadow-lg)}.hero-section h1{font-size:2.5rem;font-weight:700;color:var(--gray-900);margin-bottom:var(--space-4)}.hero-subtitle{font-size:1.25rem;color:var(--gray-600);margin-bottom:var(--space-2)}.last-updated{font-size:.875rem;color:var(--gray-500);font-style:italic}.content-sections{display:flex;flex-direction:column;gap:var(--space-12)}.content-section{background:var(--gray-50);border-radius:var(--radius-lg);padding:var(--space-8);border:1px solid var(--gray-200);box-shadow:var(--shadow-sm)}.content-section h2{font-size:1.75rem;font-weight:600;color:var(--gray-900);margin-bottom:var(--space-6)}.content-section h3{font-size:1.25rem;font-weight:600;color:var(--gray-800);margin-bottom:var(--space-3)}.content-section h4{font-size:1.125rem;font-weight:600;color:var(--gray-800);margin-bottom:var(--space-2)}.content-section p{font-size:1rem;line-height:1.7;color:var(--gray-700);margin-bottom:var(--space-4)}.content-section p:last-child{margin-bottom:0}.content-section ul{margin:var(--space-4) 0;padding-left:var(--space-6)}.content-section li{font-size:1rem;line-height:1.7;color:var(--gray-700);margin-bottom:var(--space-2)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-6);margin-top:var(--space-6)}.feature-card{background:var(--gray-100);border-radius:var(--radius-md);padding:var(--space-6);text-align:center;border:1px solid var(--gray-200);transition:all var(--transition-normal)}.feature-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.feature-icon{width:48px;height:48px;background:var(--primary-100);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--primary-600);margin:0 auto var(--space-4)}.feature-card h3{font-size:1.125rem;font-weight:600;color:var(--gray-900);margin-bottom:var(--space-2)}.feature-card p{font-size:.875rem;color:var(--gray-600);margin:0}.creator-info{background:var(--gray-100);border-radius:var(--radius-md);padding:var(--space-6);border:1px solid var(--gray-200)}.creator-link{color:var(--primary-600);text-decoration:none;font-weight:600;transition:color var(--transition-fast)}.creator-link:hover{color:var(--primary-700);text-decoration:underline}.tech-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6);margin-top:var(--space-6)}.tech-item{background:var(--gray-100);border-radius:var(--radius-md);padding:var(--space-6);border:1px solid var(--gray-200)}.use-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-4);margin-top:var(--space-6)}.use-case{background:var(--gray-100);border-radius:var(--radius-md);padding:var(--space-4);border:1px solid var(--gray-200)}.use-case h4{font-size:1rem;font-weight:600;color:var(--gray-900);margin-bottom:var(--space-2)}.use-case p{font-size:.875rem;color:var(--gray-600);margin:0}.privacy-list{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-6)}.privacy-item{display:flex;align-items:flex-start;gap:var(--space-4);background:var(--gray-100);border-radius:var(--radius-md);padding:var(--space-4);border:1px solid var(--gray-200)}.privacy-icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.privacy-icon.no-collect{background:var(--error-500);color:#fff}.privacy-item h4{font-size:1rem;font-weight:600;color:var(--gray-900);margin-bottom:var(--space-1)}.privacy-item p{font-size:.875rem;color:var(--gray-600);margin:0}.privacy-link{color:var(--primary-600);text-decoration:none;font-weight:500;transition:color var(--transition-fast)}.privacy-link:hover{color:var(--primary-700);text-decoration:underline}.how-it-works{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-6)}.step{display:flex;align-items:flex-start;gap:var(--space-4);background:var(--gray-100);border-radius:var(--radius-md);padding:var(--space-4);border:1px solid var(--gray-200)}.step-number{width:32px;height:32px;background:var(--primary-500);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;flex-shrink:0}.step-content h4{font-size:1rem;font-weight:600;color:var(--gray-900);margin-bottom:var(--space-1)}.step-content p{font-size:.875rem;color:var(--gray-600);margin:0}.app-main{flex:1;max-width:1200px;margin:0 auto;padding:var(--space-8) var(--space-6);width:100%}.input-section{background:var(--gray-50);border-radius:var(--radius-xl);padding:var(--space-8);margin-bottom:var(--space-10);box-shadow:var(--shadow-lg);border:1px solid var(--gray-200);transition:all var(--transition-normal)}.input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-6)}.input-title-section{display:flex;align-items:center;gap:var(--space-6)}.input-header h2{font-size:1.5rem;font-weight:600;color:var(--gray-900)}.input-mode-toggle{display:flex;background:var(--gray-100);border-radius:var(--radius-md);padding:var(--space-1);gap:var(--space-1)}.mode-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--gray-600);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.mode-btn:hover{color:var(--gray-700)}.mode-btn.active{background:var(--gray-50);color:var(--primary-600);box-shadow:var(--shadow-sm)}.clear-button{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--radius-md);color:var(--gray-600);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.clear-button:hover{background:var(--gray-200);color:var(--gray-700);transform:translateY(-1px)}.input-container{position:relative}.hash-input{width:100%;min-height:120px;max-height:200px;padding:var(--space-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-family:var(--font-mono);font-size:.875rem;line-height:1.5;resize:vertical;transition:all var(--transition-normal);background:var(--gray-100);color:var(--gray-800)}.hash-input:focus{outline:none;border-color:var(--primary-500);background:var(--gray-50);box-shadow:0 0 0 3px var(--primary-100)}.hash-input::placeholder{color:var(--gray-400)}.input-info{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-3);font-size:.875rem}.character-count{color:var(--gray-500);font-weight:500}.input-examples{display:flex;align-items:center;gap:var(--space-2);color:var(--gray-500)}.example-btn{padding:var(--space-1) var(--space-3);background:var(--primary-50);border:1px solid var(--primary-200);border-radius:var(--radius-sm);color:var(--primary-700);font-size:.75rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.example-btn:hover{background:var(--primary-100);color:var(--primary-800);transform:translateY(-1px)}.file-upload-section{margin-top:var(--space-6)}.file-upload-header{margin-bottom:var(--space-4)}.file-upload-header h3{font-size:1.125rem;font-weight:600;color:var(--gray-900);margin-bottom:var(--space-1)}.file-upload-header p{font-size:.875rem;color:var(--gray-600)}.file-upload-area{border:2px dashed var(--gray-300);border-radius:var(--radius-lg);padding:var(--space-8);text-align:center;cursor:pointer;transition:all var(--transition-normal);background:var(--gray-100);position:relative}.file-upload-area:hover{border-color:var(--primary-400);background:var(--primary-50)}.file-upload-area.drag-over{border-color:var(--primary-500);background:var(--primary-100);transform:scale(1.02)}.file-input{position:absolute;opacity:0;pointer-events:none}.file-upload-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.file-upload-icon{color:var(--gray-400)}.file-upload-text{text-align:center}.file-upload-primary{font-size:1rem;font-weight:500;color:var(--gray-700);margin-bottom:var(--space-1)}.file-upload-secondary{font-size:.875rem;color:var(--gray-500)}.file-selected-info{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.file-info{display:flex;align-items:center;gap:var(--space-3)}.file-icon{color:var(--primary-600)}.file-details{display:flex;flex-direction:column}.file-name{font-size:.875rem;font-weight:500;color:var(--gray-900);margin-bottom:var(--space-1)}.file-size{font-size:.75rem;color:var(--gray-500)}.remove-file-btn{padding:var(--space-2);background:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--radius-sm);color:var(--gray-600);cursor:pointer;transition:all var(--transition-fast)}.remove-file-btn:hover{background:var(--error-500);color:#fff;border-color:var(--error-500)}.hash-grid-container{margin-bottom:var(--space-10)}.section-header{text-align:center;margin-bottom:var(--space-8)}.section-header h2{font-size:2rem;font-weight:700;color:var(--gray-900);margin-bottom:var(--space-2)}.section-header p{font-size:1.125rem;color:var(--gray-600);max-width:600px;margin:0 auto}.hash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--space-6)}.hash-card{background:var(--gray-50);border-radius:var(--radius-lg);padding:var(--space-6);border:1px solid var(--gray-200);box-shadow:var(--shadow-md);transition:all var(--transition-normal);position:relative;overflow:hidden}.hash-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.hash-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-4)}.hash-algorithm-name{font-size:1.25rem;font-weight:600;color:var(--gray-900);margin-bottom:var(--space-1)}.hash-info{text-align:right}.hash-output-length{font-size:.75rem;color:var(--gray-500);background:var(--gray-100);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-weight:500}.hash-description{font-size:.875rem;color:var(--gray-600);margin-bottom:var(--space-5);line-height:1.5}.hash-result-container{position:relative;display:flex;align-items:center;gap:var(--space-3)}.hash-result{flex:1;font-family:var(--font-mono);font-size:.75rem;line-height:1.4;padding:var(--space-3);background:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--radius-md);word-break:break-all;min-height:60px;display:flex;align-items:center;transition:all var(--transition-normal);color:var(--gray-800)}.hash-result:hover{background:var(--gray-200)}.hash-placeholder{color:var(--gray-400);font-style:italic}.hash-error{color:var(--error-500);font-weight:500}.copy-button{padding:var(--space-3);background:var(--primary-500);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;min-width:44px;height:44px}.copy-button:hover:not(:disabled){background:var(--primary-600);transform:translateY(-1px)}.copy-button:disabled{background:var(--gray-300);cursor:not-allowed}.copy-button.copied{background:var(--success-500)}.hash-loading{position:absolute;inset:0;background:#fffffff2;display:none;align-items:center;justify-content:center;gap:var(--space-3);border-radius:var(--radius-lg);font-size:.875rem;color:var(--gray-600);font-weight:500}.loading-spinner{width:20px;height:20px;border:2px solid var(--gray-300);border-top:2px solid var(--primary-500);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-footer{background:var(--gray-50);border-top:1px solid var(--gray-200);margin-top:auto;transition:all var(--transition-normal)}.footer-content{max-width:1200px;margin:0 auto;padding:var(--space-8) var(--space-6);display:flex;justify-content:space-between;align-items:center}.footer-info p{font-size:.875rem;color:var(--gray-600);margin-bottom:var(--space-1)}.footer-note{font-size:.75rem!important;color:var(--gray-500)!important}.footer-links{display:flex;gap:var(--space-6)}.footer-link{font-size:.875rem;color:var(--gray-600);text-decoration:none;font-weight:500;transition:color var(--transition-fast)}.footer-link:hover{color:var(--primary-600)}.author-link{color:var(--primary-600);text-decoration:none;font-weight:600;transition:color var(--transition-fast)}.author-link:hover{color:var(--primary-700);text-decoration:underline}.error-toast{position:fixed;top:var(--space-6);right:var(--space-6);background:var(--error-500);color:#fff;padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:.875rem;font-weight:500;z-index:1000;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 768px){.header-content{flex-direction:column;gap:var(--space-4);text-align:center}.header-controls{flex-direction:column;gap:var(--space-4)}.error-code{font-size:6rem}.error-title{font-size:2rem}.error-description{font-size:1.125rem}.error-actions{flex-direction:column;align-items:center}.primary-action-btn,.secondary-action-btn{width:100%;max-width:300px;justify-content:center}.suggestion-grid{grid-template-columns:1fr}.app-main{padding:var(--space-6) var(--space-4)}.input-section{padding:var(--space-6)}.input-header{flex-direction:column;gap:var(--space-4);align-items:stretch}.input-title-section{flex-direction:column;gap:var(--space-3);align-items:flex-start}.input-info{flex-direction:column;gap:var(--space-2);align-items:flex-start}.hash-grid{grid-template-columns:1fr;gap:var(--space-4)}.hash-card{padding:var(--space-4)}.footer-content{flex-direction:column;gap:var(--space-4);text-align:center}.section-header h2{font-size:1.5rem}.section-header p{font-size:1rem}.file-upload-area{padding:var(--space-6)}.file-selected-info{flex-direction:column;gap:var(--space-3);align-items:stretch}}@media (max-width: 480px){.hash-grid{grid-template-columns:1fr}.hash-card{min-width:unset}.hash-result{font-size:.7rem}.logo-text h1{font-size:1.5rem}.input-mode-toggle{width:100%}.mode-btn{flex:1;justify-content:center}.error-code{font-size:4rem}.error-title{font-size:1.75rem}.theme-slider-container{transform:scale(.9)}.page-main{padding:var(--space-8) var(--space-4)}.hero-section h1{font-size:2rem}.hero-subtitle{font-size:1.125rem}.content-section{padding:var(--space-6)}.feature-grid,.tech-details,.use-cases{grid-template-columns:1fr}.how-it-works .step,.privacy-item{flex-direction:column;text-align:center}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}button:focus-visible,textarea:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}@media (prefers-contrast: high){:root{--gray-100: #f0f0f0;--gray-200: #e0e0e0;--gray-800: #000000;--gray-900: #000000}}