:root{color-scheme:light;--paper:#f6f7f2;--ink:#172d29;--muted:#6a7771;--line:#dfe5db;--green:#e2f0b0;--accent:#476c48;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,input,textarea{font:inherit}button,a,input,summary,textarea{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}button:disabled{cursor:wait;opacity:.65}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #7b9e4c;outline-offset:4px}input:focus,textarea:focus{border-color:#67845d;outline:2px solid #d4e6bd;outline-offset:0}.topbar{max-width:1220px;padding:30px 36px;display:flex;align-items:center;justify-content:space-between;margin:auto}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:24px;font-weight:750;letter-spacing:-1px}.brand-icon{width:44px;height:44px;border-radius:13px;background:var(--ink);color:var(--green);display:grid;place-items:center;font-size:32px;padding-bottom:5px;font-weight:600}.brand-caption{display:block;font-size:8px;letter-spacing:1.8px;font-weight:600;margin-top:3px}.status{font-size:12px;color:#5b6b62;display:flex;align-items:center;gap:8px;background:#edf0e7;padding:9px 12px;border:1px solid #e1e7d9;border-radius:30px}.status-dot{width:6px;height:6px;background:#9aab8e;border-radius:50%}.status.ready .status-dot{background:#4b783a}.status.unavailable{color:#76543a}main{max-width:1120px;margin:auto;padding:0 28px}.intro{padding:50px 0 36px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650}.intro h1{font-size:clamp(38px,5vw,60px);font-weight:500;line-height:1.08;letter-spacing:-2.8px;margin:18px 0}.intro h1 em{font-family:Georgia,serif;font-weight:400;color:#6e8267}.intro>p{color:var(--muted);line-height:1.7;font-size:14px;margin:0}.workspace{display:grid;grid-template-columns:1.12fr 1fr;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 12px 35px #27352205}.form-panel{padding:32px 36px}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.panel-heading h2{font-weight:600;font-size:18px;letter-spacing:-.4px;margin:0}.version{border:1px solid #d8e2d1;border-radius:5px;padding:5px 7px;font-size:10px;letter-spacing:.5px;color:#59724f;background:#f7faf2}label{display:block;font-size:12px;font-weight:600;margin:20px 0 8px}form>label:first-of-type{margin-top:0}input{width:100%;height:47px;padding:12px 13px;border:1px solid #dce3da;border-radius:8px;background:#fff;color:var(--ink);font-size:14px}input::placeholder{color:#99a198}.field-help{font-size:11px;line-height:1.5;color:#7b857c;margin:8px 0 0}.normalized{font-size:11px;color:#617c55;min-height:15px;margin:7px 0 0;overflow-wrap:anywhere}.password-input{position:relative}.password-input input{padding-right:65px}.reveal{position:absolute;right:7px;top:6px;border:0;padding:9px;background:transparent;color:#5b7251;font-size:11px;font-weight:600}.options{margin-top:24px;padding:15px 0;border-top:1px solid #e7ece3;border-bottom:1px solid #e7ece3}.options summary{font-size:12px;font-weight:550;list-style:none;display:flex;justify-content:space-between;gap:12px}.options summary::after{content:'+';color:#6c7f64}.options[open] summary::after{content:'−'}.options summary span{font-weight:400;color:#8a9386;font-size:10px;margin-left:auto}.option-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.option-fields label{font-size:11px}.primary{width:100%;margin-top:23px;border:0;background:var(--ink);color:white;border-radius:8px;height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:13px;font-weight:550}.primary:hover{background:#29463c}.primary span{font-size:20px;color:var(--green);font-weight:400}.local-note{font-size:10px;color:#8a9386;text-align:center;margin:14px 0 0}.local-note span{color:#728a60;margin-right:4px}.result-panel{background:#edf2e7;padding:30px;display:flex;flex-direction:column;position:relative;border-left:1px solid var(--line)}.result-topline{display:flex;align-items:center;justify-content:space-between;gap:10px}.result-topline .eyebrow{font-size:9px;letter-spacing:1.8px;color:#5e7556}.small-label{font-size:7px;color:#8c9b80;letter-spacing:1px}.empty-result{flex:1;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:55px 0 75px}.key-mark{width:100px;height:100px;border:1px solid #d0ddc5;background:#e6eddc;border-radius:50%;display:grid;place-items:center;color:#627d50;margin-bottom:25px}.key-mark svg{width:65px;height:65px}.empty-result h2,.generated-result h2{font-size:21px;font-weight:500;letter-spacing:-.5px;line-height:1.35;margin:0 0 13px}.empty-result p{font-size:12px;color:#819076;line-height:1.8;margin:0}.result-bottom{padding-top:20px;border-top:1px solid #d7e1ce;display:flex;gap:12px;align-items:center}.mini-lock{font-size:28px;color:#8c9d7c}.result-bottom p{font-size:10px;line-height:1.8;color:#87947b;margin:0}.result-bottom strong{font-weight:400;color:#6c7e5d}.generated-result{flex:1;padding:52px 0}.generated-result h2{font-size:26px;margin:15px 0 22px}.result-domain{display:inline-block;color:#617b50;font-size:12px;overflow-wrap:anywhere}#password-output{display:block;width:100%;resize:vertical;min-height:115px;padding:17px 13px;color:#273f2e;background:#f8fbf2;border:1px solid #cbd8bf;border-radius:9px;font-family:Consolas,"SFMono-Regular",monospace;font-size:18px;line-height:1.7;overflow-wrap:anywhere;white-space:pre-wrap}.copy-button{display:flex;justify-content:space-between;align-items:center;width:100%;height:44px;border:1px solid #bacbaa;background:#ddebbd;color:#354d2d;border-radius:8px;margin-top:16px;padding:0 14px;font-size:12px;font-weight:550}.copy-button:hover{background:#d1e3a5}.copy-button span{font-size:19px}.copy-status{font-size:11px;line-height:1.5;color:#617b50;min-height:17px}.text-button{background:transparent;border:0;padding:0;color:#728368;text-decoration:underline;text-underline-offset:4px;font-size:11px}.error{color:#9c3e31;background:#fff4ed;padding:10px;border-radius:6px;font-size:12px;line-height:1.5}.help-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;margin:30px 0}.help-strip>div{display:flex;gap:12px;align-items:flex-start}.step{border:1px solid #d8e1cd;border-radius:6px;min-width:26px;height:26px;display:grid;place-items:center;color:#839278;font-size:9px;margin-top:2px}.help-strip p{font-size:10px;line-height:1.8;color:#88917f;margin:0}.help-strip strong{font-size:11px;font-weight:500;color:#4d6045}.about{padding:5px 0 25px;color:#87927d;font-size:11px;line-height:1.8}.about summary{color:#738366;text-decoration:underline;text-underline-offset:4px}.about p{max-width:800px}footer{max-width:1120px;padding:23px 28px 30px;margin:auto;border-top:1px solid #e1e6d8;display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#94a08a}.footer-divider{margin:0 8px;color:#bbc4b3}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(max-width:700px){.topbar{padding:22px 22px}.brand{font-size:21px}.brand-icon{height:39px;width:39px;font-size:29px}.brand-caption{font-size:6px}.status{font-size:10px;padding:7px 9px;max-width:155px;line-height:1.3}main{padding:0 20px}.intro{padding:30px 0}.intro h1{font-size:43px;letter-spacing:-2px}.intro>p{font-size:13px}.desktop-break{display:none}.workspace{grid-template-columns:1fr;border-radius:17px}.form-panel{padding:26px 22px}.panel-heading{margin-bottom:23px}.result-panel{border-left:0;border-top:1px solid var(--line);padding:25px 22px}.empty-result{padding:32px 0 38px}.key-mark{height:75px;width:75px;margin-bottom:20px}.key-mark svg{height:50px;width:50px}.generated-result{padding:30px 0}.help-strip{grid-template-columns:1fr;gap:17px;margin:27px 0}.help-strip p{font-size:11px}.help-strip strong{font-size:12px}.help-strip br{display:none}.help-strip strong::after{content:' · '}.about{font-size:11px}input{font-size:16px;height:49px}.options summary span{font-size:9px}footer{padding:20px 22px calc(25px + env(safe-area-inset-bottom));font-size:8px;flex-wrap:wrap}.local-note{font-size:9px}.result-bottom{padding-top:17px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s ease,opacity .15s ease}}
