:root{--color-white: #ffffff;--color-black: #000000;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--color-blue-500: #3b82f6;--color-blue-600: #2563eb;--color-green-300: #86efac;--spacing-0-5: .125rem;--spacing-1: .25rem;--spacing-1-5: .375rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-9: 2.25rem;--spacing-10: 2.5rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Inconsolata, "Liberation Mono", "Courier New", monospace;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--max-width-sm: 28rem;--max-width-md: 32rem;--max-width-lg: 42rem;--max-width-xl: 48rem;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px}html.dark{color-scheme:dark}html.dark body{background-color:var(--color-black);color:var(--color-white)}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}body{font-family:var(--font-family-sans);line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}button,[role=button]{cursor:pointer}a,a:visited{color:var(--color-blue-600)}.min-h-screen{min-height:100vh}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-center{text-align:center}.underline{text-decoration:underline}.font-mono{font-family:var(--font-family-mono)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.border-none{border:none}.border-collapse{border-collapse:collapse}.border-spacing-0{border-spacing:0}.overflow-hidden{overflow:hidden}.object-cover{object-fit:cover}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}.card{background-color:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-8)}html.dark .card{background-color:var(--color-gray-800);box-shadow:0 10px 25px -3px #0000004d}.btn{border:none;border-radius:var(--radius-lg);padding:var(--spacing-3) var(--spacing-6);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--transition-normal);font-size:var(--text-base)}.btn-primary{background-color:var(--color-blue-500);color:var(--color-white)}.btn-primary:hover:not(:disabled){background-color:var(--color-blue-600)}.btn-primary:disabled{background-color:var(--color-gray-500);cursor:not-allowed}html.dark .btn-primary:disabled{background-color:var(--color-gray-600)}.btn-secondary{background-color:var(--color-gray-100);border:1px solid var(--color-gray-300);color:var(--color-gray-700)}.btn-secondary:hover{background-color:var(--color-gray-200)}html.dark .btn-secondary{background-color:var(--color-gray-700);border-color:var(--color-gray-600);color:var(--color-gray-200)}html.dark .btn-secondary:hover{background-color:var(--color-gray-600)}.input-field{background-color:var(--color-white);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);padding:var(--spacing-2);font-size:var(--text-sm);transition:border-color var(--transition-normal)}.input-field:focus{outline:none;border-color:var(--color-blue-500)}html.dark .input-field{background-color:var(--color-gray-800);border-color:var(--color-gray-600);color:var(--color-white)}.text-muted{color:var(--color-gray-600)}html.dark .text-muted{color:var(--color-gray-500)}.text-primary{color:var(--color-blue-500)}@media(min-width:768px){.md\:text-5xl{font-size:var(--text-5xl);line-height:1}.md\:text-xl{font-size:var(--text-xl);line-height:1.75rem}}.hero-figure{overflow:hidden;margin-bottom:var(--spacing-4)}.hero-avatar{width:6rem;height:6rem;object-fit:cover;border:1px solid var(--color-gray-300);border-radius:var(--radius-full);margin:0 auto}.hero-title{font-size:var(--text-4xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-4)}@media(min-width:768px){.hero-title{font-size:var(--text-5xl)}}.hero-subtitle{font-size:var(--text-lg);color:var(--color-gray-600)}@media(min-width:768px){.hero-subtitle{font-size:var(--text-xl)}}html.dark .hero-subtitle{color:var(--color-gray-500)}.code-span{font-family:var(--font-family-mono);font-size:var(--text-sm);color:var(--color-gray-600);padding:var(--spacing-0-5) var(--spacing-1);border-radius:var(--radius-md);background-color:var(--color-gray-100)}html.dark .code-span{background-color:var(--color-gray-800);color:var(--color-gray-500)}.footer-text{font-size:var(--text-xs);color:var(--color-gray-600)}.footer-link{text-decoration:underline;color:var(--color-blue-500)}.footer-separator{color:var(--color-gray-600)}html.dark .footer-text,html.dark .footer-separator{color:var(--color-gray-500)}.index-main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-4)}html.dark .index-main{background-color:var(--color-black);color:var(--color-white)}.index-container{max-width:var(--max-width-lg);width:100%;margin:0 auto;text-align:center}.index-divider{margin:var(--spacing-6) 0;border:none}.index-table{width:100%;text-align:center;border-collapse:collapse;border-spacing:0;border-color:var(--color-gray-200)}.index-table-header{border-bottom:1px solid var(--color-gray-200)}.index-table-cell{padding:var(--spacing-1) 0}.error-container{padding:var(--spacing-8) var(--spacing-4);margin:0 auto;background-color:var(--color-green-300)}.error-content{max-width:var(--max-width-xl);margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.error-logo{margin:var(--spacing-6) 0}.error-title{font-size:var(--text-4xl);font-weight:var(--font-weight-bold)}.error-text{margin:var(--spacing-4) 0}.error-link{text-decoration:underline}.password-main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-4);background-color:var(--color-gray-50)}html.dark .password-main{background-color:var(--color-gray-900);color:var(--color-white)}.password-container{background-color:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-8);width:100%;max-width:var(--max-width-sm)}html.dark .password-container{background-color:var(--color-gray-800);box-shadow:0 10px 25px -3px #0000004d}.password-header{text-align:center;margin-bottom:var(--spacing-8)}.password-title{font-size:var(--text-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-2);color:var(--color-gray-900)}html.dark .password-title{color:var(--color-gray-50)}.password-subtitle{color:var(--color-gray-600);font-size:var(--text-sm)}html.dark .password-subtitle{color:var(--color-gray-500)}.password-form{display:flex;flex-direction:column;gap:var(--spacing-6)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-3)}.form-label,.form-legend{font-weight:var(--font-weight-semibold);color:var(--color-gray-700);font-size:var(--text-sm)}html.dark .form-label,html.dark .form-legend{color:var(--color-gray-200)}.form-legend{margin-bottom:var(--spacing-2)}.form-range{width:100%;height:var(--spacing-2);background-color:var(--color-gray-200);border-radius:var(--radius-sm);outline:none;cursor:pointer}html.dark .form-range{background-color:var(--color-gray-700)}.form-range::-webkit-slider-thumb{appearance:none;width:var(--spacing-5);height:var(--spacing-5);background-color:var(--color-blue-500);border-radius:var(--radius-full);cursor:pointer}.form-range::-moz-range-thumb{width:var(--spacing-5);height:var(--spacing-5);background-color:var(--color-blue-500);border-radius:var(--radius-full);cursor:pointer;border:none}.range-labels{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-gray-600)}html.dark .range-labels{color:var(--color-gray-500)}.checkbox-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-3)}@media(min-width:640px){.checkbox-grid{grid-template-columns:1fr 1fr}}.checkbox-label{display:flex;align-items:center;gap:var(--spacing-2);cursor:pointer;padding:var(--spacing-2);border-radius:var(--radius-md);transition:background-color var(--transition-normal)}.checkbox-label:hover{background-color:var(--color-gray-100)}html.dark .checkbox-label:hover{background-color:var(--color-gray-700)}.form-checkbox{width:var(--spacing-4);height:var(--spacing-4);accent-color:var(--color-blue-500);cursor:pointer}.checkbox-text{font-size:var(--text-sm);color:var(--color-gray-700)}html.dark .checkbox-text{color:var(--color-gray-200)}.generate-button{background-color:var(--color-blue-500);color:var(--color-white);border:none;border-radius:var(--radius-lg);padding:var(--spacing-3) var(--spacing-6);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--transition-normal);font-size:var(--text-base)}.generate-button:hover:not(:disabled){background-color:var(--color-blue-600)}.generate-button:disabled{background-color:var(--color-gray-500);cursor:not-allowed}html.dark .generate-button:disabled{background-color:var(--color-gray-600)}.password-result{margin-top:var(--spacing-6);padding:var(--spacing-4);background-color:var(--color-gray-50);border-radius:var(--radius-lg);border:1px solid var(--color-gray-200)}html.dark .password-result{background-color:var(--color-gray-700);border-color:var(--color-gray-600)}.result-label{display:block;font-weight:var(--font-weight-semibold);color:var(--color-gray-700);font-size:var(--text-sm);margin-bottom:var(--spacing-2)}html.dark .result-label{color:var(--color-gray-200)}.password-display{display:flex;gap:var(--spacing-2);align-items:center}.password-text{background-color:var(--color-white);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);padding:var(--spacing-2);font-size:var(--text-sm);transition:border-color var(--transition-normal);font-family:var(--font-family-mono);flex:1;word-break:break-all;color:var(--color-gray-900)}.password-text:focus{outline:none;border-color:var(--color-blue-500)}html.dark .password-text{background-color:var(--color-gray-800);border-color:var(--color-gray-600);color:var(--color-gray-50)}.copy-button{background-color:var(--color-gray-100);border:1px solid var(--color-gray-300);color:var(--color-gray-700);border-radius:var(--radius-lg);padding:var(--spacing-2) var(--spacing-3);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--transition-normal);font-size:var(--text-xs);white-space:nowrap}.copy-button:hover{background-color:var(--color-gray-200)}html.dark .copy-button{background-color:var(--color-gray-700);border-color:var(--color-gray-600);color:var(--color-gray-200)}html.dark .copy-button:hover{background-color:var(--color-gray-600)}.password-footer{margin-top:var(--spacing-8);text-align:center}.back-link{color:var(--color-blue-500);text-decoration:none;font-size:var(--text-sm);transition:color var(--transition-normal)}.back-link:hover{color:var(--color-blue-600);text-decoration:underline}@media(min-width:768px){.password-container{max-width:var(--max-width-md);padding:var(--spacing-10)}.password-title{font-size:var(--text-4xl)}.password-subtitle{font-size:var(--text-base)}}.qr-main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-4);background-color:var(--color-gray-50)}html.dark .qr-main{background-color:var(--color-gray-900);color:var(--color-white)}.qr-container{background-color:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-8);width:100%;max-width:var(--max-width-sm)}html.dark .qr-container{background-color:var(--color-gray-800);box-shadow:0 10px 25px -3px #0000004d}.qr-header{text-align:center;margin-bottom:var(--spacing-8)}.qr-title{font-size:var(--text-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-2);color:var(--color-gray-900)}html.dark .qr-title{color:var(--color-gray-50)}.qr-subtitle{color:var(--color-gray-600);font-size:var(--text-sm)}html.dark .qr-subtitle{color:var(--color-gray-500)}.qr-form{display:flex;flex-direction:column;gap:var(--spacing-6)}.url-input{background-color:var(--color-white);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);padding:var(--spacing-3);font-size:var(--text-base);transition:border-color var(--transition-normal);width:100%}.url-input:focus{outline:none;border-color:var(--color-blue-500)}html.dark .url-input{background-color:var(--color-gray-800);border-color:var(--color-gray-600);color:var(--color-white)}.input-error{color:#dc2626;font-size:var(--text-xs);margin-top:var(--spacing-1)}html.dark .input-error{color:#fca5a5}.error-message{background-color:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-md);padding:var(--spacing-3);color:#dc2626;font-size:var(--text-sm)}html.dark .error-message{background-color:#7f1d1d;border-color:#dc2626;color:#fca5a5}.qr-result{margin-top:var(--spacing-6);padding:var(--spacing-4);background-color:var(--color-gray-50);border-radius:var(--radius-lg);border:1px solid var(--color-gray-200)}html.dark .qr-result{background-color:var(--color-gray-700);border-color:var(--color-gray-600)}.qr-display{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-4)}.qr-code{background-color:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-4);display:flex;align-items:center;justify-content:center;max-width:100%}.qr-code svg{max-width:100%;height:auto;width:200px;height:200px}html.dark .qr-code{background-color:var(--color-white)}.qr-actions{display:flex;gap:var(--spacing-2);justify-content:center}.download-button{background-color:var(--color-gray-100);border:1px solid var(--color-gray-300);color:var(--color-gray-700);border-radius:var(--radius-lg);padding:var(--spacing-2) var(--spacing-4);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--transition-normal);font-size:var(--text-sm)}.download-button:hover{background-color:var(--color-gray-200)}html.dark .download-button{background-color:var(--color-gray-700);border-color:var(--color-gray-600);color:var(--color-gray-200)}html.dark .download-button:hover{background-color:var(--color-gray-600)}.qr-info{text-align:center;font-size:var(--text-sm);color:var(--color-gray-600);margin-top:var(--spacing-2);word-break:break-all}html.dark .qr-info{color:var(--color-gray-400)}.url-display{font-family:var(--font-family-mono);background-color:var(--color-gray-100);padding:var(--spacing-0-5) var(--spacing-1);border-radius:var(--radius-sm);font-size:var(--text-xs)}html.dark .url-display{background-color:var(--color-gray-600);color:var(--color-gray-100)}.qr-footer{margin-top:var(--spacing-8);text-align:center}@media(min-width:640px){.qr-code svg{width:250px;height:250px}.qr-actions{flex-direction:row}}@media(min-width:768px){.qr-container{max-width:var(--max-width-md);padding:var(--spacing-10)}.qr-title{font-size:var(--text-4xl)}.qr-subtitle{font-size:var(--text-base)}.qr-code svg{width:300px;height:300px}}.timer-main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-4);background-color:var(--color-gray-50)}html.dark .timer-main{background-color:var(--color-gray-900);color:var(--color-white)}.timer-container{background-color:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-8);width:100%;max-width:var(--max-width-md)}html.dark .timer-container{background-color:var(--color-gray-800);box-shadow:0 10px 25px -3px #0000004d}.timer-header{text-align:center;margin-bottom:var(--spacing-8)}.timer-title{font-size:var(--text-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-2);color:var(--color-gray-900)}html.dark .timer-title{color:var(--color-gray-50)}.timer-subtitle{color:var(--color-gray-600);font-size:var(--text-sm)}html.dark .timer-subtitle{color:var(--color-gray-500)}.timer-display-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--spacing-8) 0;padding:var(--spacing-8);background-color:var(--color-gray-50);border-radius:var(--radius-xl);border:1px solid var(--color-gray-200)}html.dark .timer-display-wrapper{background-color:var(--color-gray-700);border-color:var(--color-gray-600)}.timer-display-wrapper--flash{animation:timer-flash 2s ease-out}@keyframes timer-flash{0%,to{background-color:var(--color-gray-50);box-shadow:none}15%,45%,75%{background-color:var(--color-blue-500);box-shadow:0 0 0 4px #3b82f666}30%,60%,90%{background-color:var(--color-gray-50);box-shadow:none}}html.dark .timer-display-wrapper--flash{animation-name:timer-flash-dark}@keyframes timer-flash-dark{0%,to{background-color:var(--color-gray-700);box-shadow:none}15%,45%,75%{background-color:var(--color-blue-500);box-shadow:0 0 0 4px #3b82f680}30%,60%,90%{background-color:var(--color-gray-700);box-shadow:none}}.timer-display{font-family:var(--font-family-mono);font-variant-numeric:tabular-nums;font-size:4rem;line-height:1;font-weight:var(--font-weight-bold);color:var(--color-gray-900);letter-spacing:.02em}html.dark .timer-display{color:var(--color-gray-50)}.timer-value{display:inline-block;min-width:1.2em;text-align:center}.timer-separator{opacity:.7;margin:0 .05em}.timer-display-label{margin-top:var(--spacing-2);font-size:var(--text-xs);color:var(--color-gray-600);text-transform:uppercase;letter-spacing:.05em}html.dark .timer-display-label{color:var(--color-gray-500)}.timer-controls{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-6)}.timer-inputs{display:flex;gap:var(--spacing-6);flex-wrap:wrap;justify-content:center}.timer-input-group{display:flex;flex-direction:column;gap:var(--spacing-2);align-items:center}.timer-input-label{font-weight:var(--font-weight-semibold);color:var(--color-gray-700);font-size:var(--text-sm)}html.dark .timer-input-label{color:var(--color-gray-200)}.timer-input{width:5rem;text-align:center;font-size:var(--text-xl);font-family:var(--font-family-mono);padding:var(--spacing-3)}.timer-buttons{display:flex;gap:var(--spacing-3);flex-wrap:wrap;justify-content:center}.timer-btn{border:none;border-radius:var(--radius-lg);padding:var(--spacing-3) var(--spacing-6);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal);font-size:var(--text-base)}.timer-btn-primary{background-color:var(--color-blue-500);color:var(--color-white)}.timer-btn-primary:hover:not(:disabled){background-color:var(--color-blue-600)}.timer-btn-primary:disabled{background-color:var(--color-gray-500);cursor:not-allowed}html.dark .timer-btn-primary:disabled{background-color:var(--color-gray-600)}.timer-btn-secondary{background-color:var(--color-gray-100);border:1px solid var(--color-gray-300);color:var(--color-gray-700)}.timer-btn-secondary:hover{background-color:var(--color-gray-200)}html.dark .timer-btn-secondary{background-color:var(--color-gray-700);border-color:var(--color-gray-600);color:var(--color-gray-200)}html.dark .timer-btn-secondary:hover{background-color:var(--color-gray-600)}.timer-btn-outline{background-color:transparent;border:1px solid var(--color-gray-300);color:var(--color-gray-700)}.timer-btn-outline:hover{background-color:var(--color-gray-100);border-color:var(--color-gray-400)}html.dark .timer-btn-outline{border-color:var(--color-gray-600);color:var(--color-gray-200)}html.dark .timer-btn-outline:hover{background-color:var(--color-gray-700);border-color:var(--color-gray-500)}.timer-footer{margin-top:var(--spacing-8);text-align:center}.timer-footer-sep{color:var(--color-gray-500)}html.dark .timer-footer-sep{color:var(--color-gray-400)}@media(min-width:768px){.timer-container{max-width:var(--max-width-lg);padding:var(--spacing-10)}.timer-title{font-size:var(--text-4xl)}.timer-subtitle{font-size:var(--text-base)}.timer-display{font-size:5.5rem}}