@import"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap";.btn{font-family:var(--font-sans);font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);height:2rem}.btn-md{padding:var(--space-3) var(--space-5);font-size:var(--text-base);height:2.5rem}.btn-lg{padding:var(--space-4) var(--space-6);font-size:var(--text-lg);height:3rem}.btn-full-width{width:100%}.btn-primary{background-color:var(--color-primary-600);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-700);box-shadow:var(--shadow-md)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-800)}.btn-secondary{background-color:var(--color-secondary-600);color:#fff}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-700);box-shadow:var(--shadow-md)}.btn-outline{background-color:transparent;color:var(--color-primary-600);border:1px solid var(--color-primary-600)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-50)}@media (prefers-color-scheme: dark){.btn-outline{color:var(--color-primary-400);border-color:var(--color-primary-400)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-900)}}.btn-ghost{background-color:transparent;color:var(--text-primary)}.btn-ghost:hover:not(:disabled){background-color:var(--bg-secondary)}.btn-loading{position:relative;color:transparent}.btn-spinner{position:absolute;width:1rem;height:1rem;border:2px solid currentColor;border-top-color:transparent;border-radius:var(--radius-full);animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.input-wrapper{display:flex;flex-direction:column;gap:var(--space-2)}.input-full-width{width:100%}.input-label{font-size:var(--text-sm);font-weight:500;color:var(--text-primary)}.input{font-family:var(--font-sans);font-size:var(--text-base);padding:var(--space-3) var(--space-4);border:1px solid var(--border-primary);border-radius:var(--radius-md);background-color:var(--bg-elevated);color:var(--text-primary);transition:all var(--transition-base);outline:none}.input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}@media (prefers-color-scheme: dark){.input:focus{box-shadow:0 0 0 3px var(--color-primary-900)}}.input::placeholder{color:var(--text-tertiary)}.input:disabled{opacity:.5;cursor:not-allowed}.input-error{border-color:var(--color-error-500)}.input-error:focus{border-color:var(--color-error-600);box-shadow:0 0 0 3px var(--color-error-100)}.input-error-text{font-size:var(--text-sm);color:var(--color-error-600)}.input-helper-text{font-size:var(--text-sm);color:var(--text-secondary)}.card{background-color:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:all var(--transition-base)}.card-padding-sm{padding:var(--space-4)}.card-padding-md{padding:var(--space-6)}.card-padding-lg{padding:var(--space-8)}.card-elevation-none{box-shadow:none}.card-elevation-sm{box-shadow:var(--shadow-sm)}.card-elevation-md{box-shadow:var(--shadow-md)}.card-elevation-lg{box-shadow:var(--shadow-lg)}.card:hover{box-shadow:var(--shadow-md)}.card-header{margin-bottom:var(--space-4)}.card-body{flex:1}.card-footer{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border-primary)}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-6);background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-secondary-50) 100%)}@media (prefers-color-scheme: dark){.auth-container{background:linear-gradient(135deg,var(--color-neutral-900) 0%,var(--color-neutral-800) 100%)}}.auth-content{width:100%;max-width:420px;display:flex;flex-direction:column;gap:var(--space-6)}.auth-header{text-align:center}.auth-header h1{margin-bottom:var(--space-2)}.auth-toggle{display:flex;gap:var(--space-2);padding:var(--space-1);background-color:var(--bg-secondary);border-radius:var(--radius-lg)}.toggle-btn{flex:1;padding:var(--space-3) var(--space-4);border:none;background:transparent;color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-base);font-weight:500;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.toggle-btn:hover{color:var(--text-primary);background-color:var(--bg-elevated)}.toggle-btn.active{background-color:var(--bg-elevated);color:var(--text-primary);box-shadow:var(--shadow-sm)}.auth-form{display:flex;flex-direction:column;gap:var(--space-5)}.password-field{position:relative}.password-strength{display:flex;flex-direction:column;gap:var(--space-2)}.strength-label{display:flex;justify-content:space-between;align-items:center}.strength-bar{height:4px;background-color:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden}.strength-bar-fill{height:100%;transition:width var(--transition-base),background-color var(--transition-base)}.success-message{padding:var(--space-3) var(--space-4);background-color:var(--color-success-50);border:1px solid var(--color-success-200);border-radius:var(--radius-md);color:var(--color-success-700)}@media (prefers-color-scheme: dark){.success-message{background-color:var(--color-success-900);border-color:var(--color-success-700);color:var(--color-success-200)}}.error-message{padding:var(--space-3) var(--space-4);background-color:var(--color-error-50);border:1px solid var(--color-error-200);border-radius:var(--radius-md);color:var(--color-error-700)}@media (prefers-color-scheme: dark){.error-message{background-color:var(--color-error-900);border-color:var(--color-error-700);color:var(--color-error-200)}}.auth-footer{text-align:center}.unlock-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-6);background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-secondary-50) 100%)}@media (prefers-color-scheme: dark){.unlock-container{background:linear-gradient(135deg,var(--color-neutral-900) 0%,var(--color-neutral-800) 100%)}}.unlock-content{width:100%;max-width:480px;display:flex;flex-direction:column;gap:var(--space-6)}.unlock-header{text-align:center}.unlock-header h1{margin-bottom:var(--space-2)}.unlock-form{display:flex;flex-direction:column;gap:var(--space-5)}.passphrase-field{position:relative}.toggle-password{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;font-size:var(--text-lg);opacity:.6;transition:opacity var(--transition-fast);padding:var(--space-2);margin-top:var(--space-3)}.toggle-password:hover{opacity:1}.info-box{padding:var(--space-4);background-color:var(--color-primary-50);border:1px solid var(--color-primary-200);border-radius:var(--radius-md);color:var(--color-primary-800)}@media (prefers-color-scheme: dark){.info-box{background-color:var(--color-primary-900);border-color:var(--color-primary-700);color:var(--color-primary-200)}}.info-box p{margin:0}.unlock-footer{text-align:center}.passphrase-generator{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background-color:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-primary)}.generator-toggle{background:transparent;border:none;color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;cursor:pointer;text-align:left;padding:0;transition:color var(--transition-fast)}.generator-toggle:hover{color:var(--color-primary-600)}.generator-content{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-2)}.generator-controls{display:flex;flex-direction:column;gap:var(--space-2)}.word-slider{width:100%;height:6px;border-radius:var(--radius-full);background:var(--bg-elevated);outline:none;cursor:pointer}.word-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-primary-600);cursor:pointer;transition:transform var(--transition-fast)}.word-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.word-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-primary-600);cursor:pointer;border:none;transition:transform var(--transition-fast)}.word-slider::-moz-range-thumb:hover{transform:scale(1.1)}.slider-labels{display:flex;justify-content:space-between}.generated-passphrase{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);background-color:var(--bg-elevated);border-radius:var(--radius-md)}.passphrase-display{padding:var(--space-3);background-color:var(--bg-primary);border-radius:var(--radius-sm);text-align:center;word-break:break-all}.passphrase-display code{color:var(--color-primary-700);font-family:Courier New,monospace;font-weight:600}@media (prefers-color-scheme: dark){.passphrase-display code{color:var(--color-primary-400)}}.passphrase-actions{display:flex;gap:var(--space-2)}.home-container{min-height:100vh;padding:var(--space-6);max-width:1200px;margin:0 auto}.home-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--border-primary)}.header-content h1{margin-bottom:var(--space-1)}.home-content{display:flex;flex-direction:column;gap:var(--space-8)}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-6)}.status-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background-color:var(--bg-secondary);border-radius:var(--radius-md);transition:all var(--transition-base)}.status-item:hover{background-color:var(--bg-primary);box-shadow:var(--shadow-sm)}.status-icon{font-size:var(--text-4xl);line-height:1}.status-details{display:flex;flex-direction:column;gap:var(--space-1)}.features-section{display:flex;flex-direction:column;gap:var(--space-6)}.features-section>h2{margin-bottom:var(--space-1)}.button-showcase{display:flex;gap:var(--space-3);flex-wrap:wrap}.typography-showcase{display:flex;flex-direction:column;gap:var(--space-4)}.typography-showcase>*{margin:0}.color-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-4)}.color-swatch{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.color-swatch .swatch{width:80px;height:80px;border-radius:var(--radius-md);border:2px solid var(--border-primary);transition:transform var(--transition-base)}.color-swatch:hover .swatch{transform:scale(1.1)}.color-swatch.primary .swatch{background-color:var(--color-primary-600)}.color-swatch.secondary .swatch{background-color:var(--color-secondary-600)}.color-swatch.success .swatch{background-color:var(--color-success-600)}.color-swatch.error .swatch{background-color:var(--color-error-600)}@media (max-width: 768px){.home-header{flex-direction:column;align-items:flex-start;gap:var(--space-4)}.status-grid{grid-template-columns:1fr}}:root{--color-neutral-50: #fafaf9;--color-neutral-100: #f5f5f4;--color-neutral-200: #e7e5e4;--color-neutral-300: #d6d3d1;--color-neutral-400: #a8a29e;--color-neutral-500: #78716c;--color-neutral-600: #57534e;--color-neutral-700: #44403c;--color-neutral-800: #292524;--color-neutral-900: #1c1917;--color-primary-50: #fffbeb;--color-primary-100: #fef3c7;--color-primary-200: #fde68a;--color-primary-300: #fcd34d;--color-primary-400: #fbbf24;--color-primary-500: #f59e0b;--color-primary-600: #d97706;--color-primary-700: #b45309;--color-primary-800: #92400e;--color-primary-900: #78350f;--color-secondary-50: #fef2f2;--color-secondary-100: #fee2e2;--color-secondary-200: #fecaca;--color-secondary-300: #fca5a5;--color-secondary-400: #f87171;--color-secondary-500: #ef4444;--color-secondary-600: #dc2626;--color-secondary-700: #b91c1c;--color-secondary-800: #991b1b;--color-secondary-900: #7f1d1d;--color-success-50: #f0fdf4;--color-success-100: #dcfce7;--color-success-200: #bbf7d0;--color-success-300: #86efac;--color-success-400: #4ade80;--color-success-500: #22c55e;--color-success-600: #16a34a;--color-success-700: #15803d;--color-success-800: #166534;--color-success-900: #14532d;--color-error-50: #fef2f2;--color-error-100: #fee2e2;--color-error-200: #fecaca;--color-error-300: #fca5a5;--color-error-400: #f87171;--color-error-500: #ef4444;--color-error-600: #dc2626;--color-error-700: #b91c1c;--color-error-800: #991b1b;--color-error-900: #7f1d1d;--font-serif: "Playfair Display", Georgia, serif;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Courier New", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--leading-none: 1;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.625;--leading-loose: 2;--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;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(28, 25, 23, .05);--shadow-md: 0 4px 6px -1px rgba(28, 25, 23, .1);--shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, .1);--shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, .1);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease}:root{--bg-primary: var(--color-neutral-50);--bg-secondary: var(--color-neutral-100);--bg-elevated: #ffffff;--text-primary: var(--color-neutral-900);--text-secondary: var(--color-neutral-600);--text-tertiary: var(--color-neutral-500);--border-primary: var(--color-neutral-200);--border-secondary: var(--color-neutral-300)}@media (prefers-color-scheme: dark){:root{--bg-primary: var(--color-neutral-900);--bg-secondary: var(--color-neutral-800);--bg-elevated: var(--color-neutral-700);--text-primary: var(--color-neutral-50);--text-secondary: var(--color-neutral-300);--text-tertiary: var(--color-neutral-400);--border-primary: var(--color-neutral-700);--border-secondary: var(--color-neutral-600)}}.heading-1{font-family:var(--font-serif);font-size:var(--text-5xl);font-weight:700;line-height:var(--leading-tight);color:var(--text-primary)}.heading-2{font-family:var(--font-serif);font-size:var(--text-4xl);font-weight:600;line-height:var(--leading-tight);color:var(--text-primary)}.heading-3{font-family:var(--font-serif);font-size:var(--text-3xl);font-weight:600;line-height:var(--leading-snug);color:var(--text-primary)}.heading-4{font-family:var(--font-serif);font-size:var(--text-2xl);font-weight:600;line-height:var(--leading-snug);color:var(--text-primary)}.heading-5{font-family:var(--font-serif);font-size:var(--text-xl);font-weight:600;line-height:var(--leading-normal);color:var(--text-primary)}.text-large{font-size:var(--text-lg);line-height:var(--leading-relaxed)}.text-base{font-size:var(--text-base);line-height:var(--leading-normal)}.text-small{font-size:var(--text-sm);line-height:var(--leading-normal)}.text-tiny{font-size:var(--text-xs);line-height:var(--leading-normal)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.font-light{font-weight:300}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);font-weight:600;line-height:var(--leading-tight);color:var(--text-primary)}#root{min-height:100vh}