*{box-sizing:border-box;margin:0;padding:0}.unselectable{-webkit-user-select:none;user-select:none}body{color:#1a1a1a;background-color:#fff;justify-content:center;min-height:100vh;font-family:Inter,sans-serif;transition:background-color .3s;display:flex}#app{width:100%;max-width:760px;padding:40px 20px}h1{text-align:center;letter-spacing:.1em;margin-bottom:2rem;font-size:2.8rem;font-weight:800}.logo-title{cursor:help;width:fit-content;margin:0 auto 2rem;transition:letter-spacing .3s;display:table;position:relative}.logo-title:hover{letter-spacing:.18em}.logo-title:after{content:attr(data-info);letter-spacing:0;color:#d8ae8f;opacity:0;pointer-events:none;white-space:nowrap;font-size:.8rem;font-weight:400;transition:opacity .4s;position:absolute;bottom:-18px;left:50%;transform:translate(-50%)}.logo-title:hover:after{opacity:1}.settings{-webkit-backdrop-filter:blur(12px);background:#ffffffbf;border:1px solid #ffffff4d;border-radius:16px;flex-direction:column;gap:1.5rem;padding:24px;transition:box-shadow .3s;display:flex;box-shadow:0 2px 16px #0000000a}.settings:hover{box-shadow:0 4px 24px #00000012}.control-group{flex-direction:column;display:flex}.control-group>label{margin-bottom:.75rem;font-size:.95rem;font-weight:600}.label-row{align-items:center;gap:8px;margin-bottom:.75rem;display:flex}.label-row label{margin-bottom:0}.label-row .unit-text{color:#6c757d;font-size:.9rem}.num-input-wrapper{background:#fbf8f5;border:1px solid #e9ecef;border-radius:6px;align-items:center;height:32px;padding:2px 4px;transition:border-color .2s,box-shadow .2s;display:inline-flex}.num-input-wrapper:focus-within{border-color:#d8ae8f;box-shadow:0 0 0 3px #d8ae8f26}.num-input{color:#d8ae8f;text-align:center;background:0 0;border:none;outline:none;width:42px;font-family:JetBrains Mono,monospace;font-size:.95rem;font-weight:800}.num-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.num-input[type=number]{-moz-appearance:textfield}.spin-buttons{border-left:1px solid #e9ecef;flex-direction:column;justify-content:center;margin-left:2px;padding-left:4px;display:flex}.spin-buttons span{cursor:pointer;color:#6c757d;font-size:16px;line-height:.8;transition:color .2s,transform .15s}.spin-buttons span:hover{color:#d8ae8f}.spin-buttons span:active{transform:scale(.8)}input[type=range]{-webkit-appearance:none;cursor:pointer;background:#e9ecef;border-radius:3px;width:100%;height:6px;transition:background .2s}input[type=range]:hover{background:#dadfe4}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#d8ae8f;border:3px solid #fff;border-radius:50%;width:20px;height:20px;transition:transform .2s,box-shadow .2s;box-shadow:0 1px 3px #0000001a}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 8px #d8ae8f66}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.05);box-shadow:0 0 0 5px #d8ae8f26}.radio-group{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.radio-group label{text-align:center;cursor:pointer;background:#fbf8f5;border:2px solid #0000;border-radius:10px;margin-bottom:0;padding:12px;font-size:.85rem;transition:background .2s,border-color .2s,transform .15s,box-shadow .2s}.radio-group label:hover{background:#f8f3ee;border-color:#d8ae8f4d}.radio-group label:active{transform:scale(.97)}.radio-group label:has(input:checked){border-color:#d8ae8f;font-weight:600;box-shadow:0 2px 8px #d8ae8f26}.radio-group label input{display:none}.action-section{flex-direction:column;gap:12px;margin-top:.5rem;display:flex}.button-group{gap:10px;display:flex}.button-group button{flex:1}.action-info{color:#6c757d;text-align:center;opacity:.8;font-family:JetBrains Mono,monospace;font-size:.82rem}button{cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:14px;font-family:Inter,sans-serif;font-weight:700;transition:background .2s,color .2s,transform .15s,box-shadow .2s;display:inline-flex}button:active{transform:scale(.97)}button.primary-action{color:#fff;background:#1a1a1a;box-shadow:0 2px 8px #0000001f}button.primary-action:hover{background:#d8ae8f;box-shadow:0 4px 16px #d8ae8f59}button.primary-action:active{box-shadow:0 1px 4px #d8ae8f33}button.secondary-action{color:#6c757d;background:0 0;border:1px solid #e9ecef}button.secondary-action:hover{color:#1a1a1a;background:#00000005;border-color:#cbd3da}button.copy-btn-small{color:#fff;background:#d8ae8f;border-radius:8px;min-width:54px;padding:8px;box-shadow:0 1px 4px #d8ae8f33}button.copy-btn-small .material-symbols-outlined{font-size:20px;transition:transform .2s}button.copy-btn-small:hover{box-shadow:0 3px 10px #d8ae8f59}button.copy-btn-small:hover .material-symbols-outlined{transform:scale(1.1)}button.copy-btn-small.copied{background:#41b883;box-shadow:0 2px 8px #41b8834d}.text-btn{color:#6c757d;cursor:pointer;background:0 0;border:none;align-items:center;gap:5px;font-size:.85rem;transition:color .2s,gap .2s;display:inline-flex}.text-btn:hover{color:#d8ae8f;gap:7px}.output-area{flex-direction:column;margin-top:2rem;display:flex}.result-row{align-items:stretch;gap:8px;margin-bottom:12px;display:flex}.result-row.fade-in{opacity:0;animation:.4s cubic-bezier(.215,.61,.355,1) forwards rowAppear}.result-row .input-group{-webkit-backdrop-filter:blur(12px);background:#fbf8f5cc;border:1px solid #ffffff4d;border-radius:10px;flex-direction:column;flex:1;min-height:48px;transition:box-shadow .2s,border-color .2s;display:flex;overflow:hidden}.result-row .input-group:hover{border-color:#d8ae8f40;box-shadow:0 2px 10px #0000000a}.result-row .input-group input{color:#1a1a1a;background:0 0;border:none;outline:none;flex:1;width:100%;padding:10px 14px;font-family:JetBrains Mono,monospace;font-size:.95rem}.result-row .strength-meter{background:#00000008;width:100%;height:4px;display:flex}.result-row .strength-meter .bar{background:0 0;flex:1;height:100%;transition:background .3s}.result-row .strength-meter.red .bar-1{background:#ff4d4d}.result-row .strength-meter.yellow .bar-1,.result-row .strength-meter.yellow .bar-2{background:gold}.result-row .strength-meter.green .bar-1,.result-row .strength-meter.green .bar-2,.result-row .strength-meter.green .bar-3{background:#41b883}@keyframes rowAppear{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.footer-area{text-align:center;margin-top:4rem}.footer-area .security-info{margin-bottom:1.5rem}.footer-area .security-info h3{margin-bottom:8px;font-size:1.2rem}.footer-area .security-info .security-explanation{margin-bottom:1rem;font-size:.95rem;line-height:1.4}.footer-area .security-info .storage-info{color:#6c757d;font-size:.9rem}.footer-area .utility-bar{color:#ccc;justify-content:center;align-items:center;gap:10px;display:flex}.dark-theme{color:#e0e0e0;background-color:#121212}.dark-theme h1{color:#d8ae8f}.dark-theme .settings{-webkit-backdrop-filter:blur(12px);background:#1e1e1ecc;border:1px solid #ffffff0f;box-shadow:0 2px 20px #0000004d}.dark-theme .settings:hover{box-shadow:0 4px 28px #0006}.dark-theme .num-input-wrapper{background:#252525;border-color:#333}.dark-theme .num-input-wrapper:focus-within{border-color:#d8ae8f;box-shadow:0 0 0 3px #d8ae8f1a}.dark-theme .spin-buttons{border-color:#333}.dark-theme button.primary-action{color:#1a1a1a;background:#d8ae8f;box-shadow:0 2px 10px #d8ae8f40}.dark-theme button.primary-action:hover{background:#e3c4ad;box-shadow:0 4px 18px #d8ae8f66}.dark-theme button.secondary-action{color:#888;border-color:#333}.dark-theme button.secondary-action:hover{color:#e0e0e0;background:#ffffff08;border-color:#d8ae8f66}.dark-theme .text-btn,.dark-theme .action-info{color:#888}.dark-theme .text-btn:hover{color:#d8ae8f}.dark-theme .radio-group label{color:#aaa;background:#252525}.dark-theme .radio-group label:hover{background:#2d2d2d;border-color:#d8ae8f4d}.dark-theme .radio-group label:has(input:checked){color:#fff;background:#d8ae8f;box-shadow:0 2px 10px #d8ae8f40}.dark-theme input[type=range]{background:#333}.dark-theme input[type=range]:hover{background:#404040}.dark-theme input[type=range]::-webkit-slider-thumb{border-color:#252525}.dark-theme .result-row .input-group{-webkit-backdrop-filter:blur(10px);background:#252525d9;border:1px solid #ffffff0d}.dark-theme .result-row .input-group:hover{border-color:#d8ae8f33;box-shadow:0 2px 12px #0003}.dark-theme .result-row .input-group input{color:#fff}.dark-theme .result-row .strength-meter{background:#ffffff0d}.dark-theme .result-row .copy-btn-small{background:#c48556}.dark-theme .result-row .copy-btn-small:hover{background:#d8ae8f}@media (width>=768px){.radio-group{grid-template-columns:repeat(3,1fr)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}