.htpg{max-width:720px;margin:24px auto;padding:28px;border:1px solid rgba(100,116,139,.22);border-radius:24px;background:rgba(255,255,255,.86);box-shadow:0 18px 50px rgba(15,23,42,.10);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#0f172a;box-sizing:border-box}.htpg *{box-sizing:border-box}.htpg-head{display:flex;gap:14px;align-items:center;margin-bottom:22px}.htpg-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#eef6ff;font-size:25px}.htpg h2{margin:0 0 4px;font-size:25px;line-height:1.2}.htpg p{margin:0;color:#64748b;font-size:14px}.htpg-output-wrap{display:flex;gap:8px;padding:8px;border:1px solid #dbe3ee;border-radius:16px;background:#f8fafc}.htpg-output{min-width:0;flex:1;border:0!important;outline:0!important;background:transparent!important;font-size:19px;font-weight:650;letter-spacing:.5px;color:#0f172a;padding:10px}.htpg-icon-btn{width:44px;border:1px solid #dbe3ee;border-radius:11px;background:#fff;cursor:pointer;font-size:18px}.htpg-strength{margin:18px 0}.htpg-strength>span{font-size:13px;color:#64748b}.htpg-strength-label{float:right;font-size:13px}.htpg-meter{clear:both;height:7px;margin-top:8px;border-radius:99px;background:#e5e7eb;overflow:hidden}.htpg-meter i{display:block;width:100%;height:100%;background:#22c55e;transition:width .25s ease}.htpg-controls{padding:18px;border:1px solid #e2e8f0;border-radius:16px}.htpg-length{display:block;font-weight:700;font-size:14px}.htpg-length output{float:right;font-weight:800}.htpg-range{display:block;width:100%;margin:14px 0 20px;accent-color:#2563eb}.htpg-options{display:grid;grid-template-columns:1fr 1fr;gap:13px}.htpg-options label{font-size:14px;color:#334155}.htpg-options input{margin-right:8px}.htpg-actions{margin-top:18px}.htpg-generate{width:100%;border:0;border-radius:13px;padding:14px 18px;background:#2563eb;color:#fff;font-weight:750;font-size:15px;cursor:pointer}.htpg-generate:hover{filter:brightness(.95)}.htpg-note{margin-top:16px;text-align:center;font-size:12px;color:#64748b}.htpg-credit{margin-top:12px;text-align:center;font-size:12px;color:#94a3b8}.htpg-credit a{color:#2563eb;text-decoration:none;font-weight:700}@media(max-width:600px){.htpg{padding:20px;border-radius:18px}.htpg-options{grid-template-columns:1fr}.htpg h2{font-size:22px}.htpg-output{font-size:16px}}
@media(prefers-color-scheme:dark){.htpg{background:#0f172a;color:#e5e7eb;border-color:#263449}.htpg p,.htpg-note{color:#94a3b8}.htpg-output-wrap,.htpg-controls{background:#111c2e;border-color:#334155}.htpg-output{color:#f8fafc}.htpg-icon-btn{background:#172235;border-color:#334155;color:#e5e7eb}.htpg-options label{color:#cbd5e1}.htpg-icon{background:#172a45}}