:root { --pw-ink:#101613; --pw-paper:#f3f0e8; --pw-accent:#dfff45; --pw-line:rgba(16,22,19,.18); }
.pwgen-page { min-height:100vh; background:var(--pw-paper); color:var(--pw-ink); font-family:'Inter',sans-serif; }
.pwgen-hero { min-height:310px; padding:7rem clamp(1.25rem,5vw,5rem) 3.5rem; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:2rem; background:var(--pw-ink); color:#fff; position:relative; overflow:hidden; }
.pwgen-hero-copy { position:relative; z-index:1; max-width:850px; }
.pwgen-hero-lock { position:absolute; right:clamp(2rem,6vw,6rem); top:5.6rem; width:clamp(7rem,12vw,11rem); transform:rotate(5deg); fill:var(--pw-accent); stroke:var(--pw-ink); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; opacity:.98; }
.pwgen-kicker,.pwgen-step { display:block; font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.pwgen-kicker { color:var(--pw-accent); margin-bottom:1.35rem; }
.pwgen-hero h1 { font-size:clamp(2.5rem,4.5vw,4.9rem); line-height:.93; letter-spacing:-.075em; font-weight:750; margin:0; }
.pwgen-hero h1 span { color:var(--pw-accent); }
.pwgen-hero-copy p { max-width:610px; font-size:clamp(.9rem,1.2vw,1.05rem); line-height:1.55; color:rgba(255,255,255,.7); margin:1rem 0 0; }
.pwgen-security-pill { position:relative; z-index:1; align-self:end; padding:.7rem 1rem; border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:.78rem; white-space:nowrap; }
.pwgen-security-pill span { color:var(--pw-accent); margin-right:.45rem; }
.pwgen-shell { width:min(1320px,calc(100% - 2rem)); margin:-1.25rem auto 0; position:relative; z-index:2; padding-bottom:6rem; }
.pwgen-output-card { background:#fff; padding:clamp(1.4rem,2.5vw,2.25rem); box-shadow:0 24px 70px rgba(16,22,19,.14); }
.pwgen-public-statistics { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--pw-line); border-top:0; background:rgba(255,255,255,.58); }
.pwgen-public-statistics div { padding:.8rem 1rem; border-right:1px solid var(--pw-line); display:flex; align-items:baseline; gap:.45rem; }
.pwgen-public-statistics div:last-child { border-right:0; }
.pwgen-public-statistics strong { font-family:monospace; font-size:1.1rem; }
.pwgen-public-statistics span { color:#66706a; font-size:.74rem; }
.pwgen-output-heading,.pwgen-label-row,.pwgen-strength-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pwgen-output-heading { font-size:.78rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:#66706a; }
.pwgen-copy-status { color:#347500; letter-spacing:0; text-transform:none; }
.pwgen-output-row { display:flex; gap:1rem; align-items:center; min-width:0; margin:1.2rem 0 1.8rem; }
.pwgen-output { display:block; flex:1; min-width:0; overflow-wrap:anywhere; font-family:'Courier New',monospace; font-size:clamp(1.5rem,2.7vw,2.8rem); line-height:1.15; font-weight:700; letter-spacing:-.045em; }
.pwgen-icon-button { width:3.25rem; height:3.25rem; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--pw-line); background:#fff; transition:.2s; }
.pwgen-icon-button:hover { background:var(--pw-accent); transform:translateY(-2px); }
.pwgen-icon-button svg { width:1.25rem; fill:none; stroke:currentColor; stroke-width:1.8; }
.pwgen-strength-track { height:7px; background:#e4e2dc; overflow:hidden; }
.pwgen-strength-track span { display:block; width:0; height:100%; background:#ed6a5a; transition:width .35s,background-color .35s; }
.pwgen-strength-meta { font-size:.75rem; margin-top:.55rem; color:#66706a; }
.pwgen-builder { padding:clamp(2.25rem,4vw,3.5rem) 0 2rem; }
.pwgen-builder-head { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; border-bottom:1px solid var(--pw-line); padding-bottom:2rem; }
.pwgen-builder-head>div { display:flex; gap:1.25rem; align-items:baseline; }
.pwgen-step { color:#647068; }
.pwgen-builder h2,.pwgen-privacy h2 { font-size:clamp(1.9rem,3vw,3rem); letter-spacing:-.055em; margin:0; font-weight:750; }
.pwgen-builder-head p { max-width:520px; margin:0; line-height:1.7; color:#56605a; }
.pwgen-tabs { display:grid; grid-template-columns:repeat(3,1fr); margin:1.5rem 0; border:1px solid var(--pw-ink); }
.pwgen-tab { border:0; border-right:1px solid var(--pw-ink); padding:1rem; background:transparent; font-weight:700; }
.pwgen-tab:last-child { border-right:0; }
.pwgen-tab.is-active { background:var(--pw-ink); color:var(--pw-accent); }
.pwgen-panel { animation:pwFade .25s ease; }
@keyframes pwFade { from { opacity:0; transform:translateY(8px); } }
.pwgen-field { border:0; padding:0; margin:0 0 1.4rem; }
.pwgen-field legend,.pwgen-label-row label { font-size:.82rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.pwgen-label-row output { font-family:monospace; font-size:1.2rem; font-weight:700; }
input[type="range"] { width:100%; accent-color:var(--pw-ink); margin-top:1rem; }
.pwgen-check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem; margin-top:1rem; }
.pwgen-check-grid label { display:grid; grid-template-columns:auto 1fr auto; gap:.75rem; align-items:center; padding:.72rem .9rem; border:1px solid var(--pw-line); background:rgba(255,255,255,.35); cursor:pointer; }
.pwgen-check-grid input { width:1.1rem; height:1.1rem; accent-color:var(--pw-ink); }
.pwgen-check-grid code { color:#69716d; }
.pwgen-check-grid--compact { margin:0 0 2rem; }
.pwgen-options-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:1rem; }
.pwgen-select,.pwgen-number { display:flex; flex-direction:column; gap:.5rem; font-size:.78rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.pwgen-select select,.pwgen-number input { width:100%; border:1px solid var(--pw-line); border-radius:0; background:#fff; padding:.9rem; font:inherit; font-size:.9rem; text-transform:none; letter-spacing:0; }
.pwgen-panel-note { border-left:4px solid var(--pw-accent); padding:.75rem 1rem; background:rgba(255,255,255,.5); margin-bottom:2rem; }
.pwgen-generate { width:100%; border:0; background:var(--pw-accent); color:var(--pw-ink); padding:1.25rem 1.4rem; display:flex; justify-content:space-between; font-size:1.05rem; font-weight:800; transition:.2s; }
.pwgen-generate:hover { background:var(--pw-ink); color:var(--pw-accent); }
.pwgen-error { padding:1rem; background:#ffe0dc; border-left:4px solid #c93524; }
.pwgen-storage { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.45rem 1rem; align-items:center; margin-top:.8rem; padding:.8rem 1rem; border:1px solid var(--pw-line); background:rgba(255,255,255,.45); }
.pwgen-storage-choice { display:flex; gap:.75rem; align-items:flex-start; cursor:pointer; }
.pwgen-storage-choice input { width:1.1rem; height:1.1rem; margin-top:.15rem; flex:0 0 auto; accent-color:var(--pw-ink); }
.pwgen-storage-choice span { display:flex; flex-direction:column; gap:.12rem; }
.pwgen-storage-choice strong { font-size:.82rem; }
.pwgen-storage-choice small { color:#68716c; line-height:1.4; }
.pwgen-storage button { border:0; padding:.45rem .65rem; background:transparent; color:#39413d; font-size:.76rem; text-decoration:underline; }
.pwgen-storage button:disabled { opacity:.4; text-decoration:none; cursor:not-allowed; }
.pwgen-storage-status { grid-column:1/-1; min-height:1em; color:#347500; font-size:.72rem; }
.pwgen-privacy { margin-top:2rem; padding:2.25rem; background:var(--pw-ink); color:#fff; display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:start; }
.pwgen-privacy .pwgen-step { color:var(--pw-accent); }
.pwgen-privacy p { color:rgba(255,255,255,.66); max-width:650px; line-height:1.7; margin:1rem 0 0; }
.pwgen-api-callout { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.1rem 1.3rem; border:1px solid var(--pw-line); border-top:0; background:#fff; }
.pwgen-api-callout div { display:flex; flex-direction:column; gap:.2rem; }
.pwgen-api-callout span { color:#65706a; font-size:.85rem; }
.pwgen-api-callout a { flex:0 0 auto; color:var(--pw-ink); font-weight:750; text-underline-offset:.2em; }
.pwgen-privacy-stat { text-align:right; white-space:nowrap; }
.pwgen-privacy-stat strong { display:block; color:var(--pw-accent); font-size:4rem; line-height:.9; }
.pwgen-privacy-stat span { font-size:.75rem; color:rgba(255,255,255,.6); }
body:has(.pwgen-page) { background:var(--pw-paper); }
body:has(.pwgen-page)>div>main { padding-bottom:0!important; }
@media(min-width:900px){.pwgen-builder{padding-top:2rem}.pwgen-builder-head{padding-bottom:1.25rem}.pwgen-builder-head p{font-size:.9rem;line-height:1.5}.pwgen-builder h2{font-size:2.5rem}.pwgen-tabs{margin:1rem 0 1.25rem}.pwgen-tab{padding:.75rem}.pwgen-panel#panel-characters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem;align-items:start}.pwgen-panel#panel-characters[hidden]{display:none}.pwgen-panel#panel-characters fieldset{grid-column:1/-1}.pwgen-panel#panel-characters .pwgen-check-grid{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:.65rem}.pwgen-panel#panel-characters .pwgen-check-grid label{grid-template-columns:auto 1fr;padding:.65rem .75rem}.pwgen-panel#panel-characters .pwgen-check-grid code{display:none}.pwgen-panel#panel-words .pwgen-options-grid,.pwgen-panel#panel-sentence .pwgen-options-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.pwgen-panel .pwgen-check-grid--compact{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:1rem}.pwgen-field{margin-bottom:1rem}.pwgen-panel-note{margin-bottom:1rem;padding:.55rem .8rem}.pwgen-generate{padding:1rem 1.2rem}.pwgen-privacy{margin-top:1.5rem}}
@media(max-width:700px){.pwgen-hero{min-height:480px;padding-top:7rem;grid-template-columns:1fr;align-content:end}.pwgen-hero-lock{right:.75rem;top:5.4rem;width:7.5rem;opacity:.8}.pwgen-security-pill{align-self:flex-start;width:max-content}.pwgen-shell{width:calc(100% - 1rem)}.pwgen-public-statistics{grid-template-columns:1fr}.pwgen-public-statistics div{border-right:0;border-bottom:1px solid var(--pw-line)}.pwgen-public-statistics div:last-child{border-bottom:0}.pwgen-builder-head{grid-template-columns:1fr}.pwgen-check-grid,.pwgen-options-grid{grid-template-columns:1fr}.pwgen-tabs{font-size:.82rem}.pwgen-privacy{grid-template-columns:1fr;padding:2rem}.pwgen-privacy-stat{text-align:left}.pwgen-output-row{align-items:flex-start}.pwgen-icon-button{width:2.8rem;height:2.8rem}.pwgen-storage{grid-template-columns:1fr}.pwgen-storage-status{grid-column:1}.pwgen-storage button{justify-self:start;padding-left:0}}
@media(prefers-reduced-motion:reduce){.pwgen-panel,.pwgen-strength-track span,.pwgen-icon-button,.pwgen-generate{animation:none;transition:none}}

.pwgen-api-page { --pw-ink:#101613; --pw-paper:#f3f0e8; --pw-accent:#dfff45; width:min(1040px,calc(100% - 2rem)); margin:0 auto; padding:10rem 0 7rem; color:var(--pw-ink); }
.pwgen-api-page>header { padding:clamp(2rem,5vw,4rem); background:var(--pw-ink); color:#fff; }
.pwgen-api-page>header h1 { margin:0; font-size:clamp(2.8rem,7vw,6.5rem); line-height:.93; letter-spacing:-.07em; }
.pwgen-api-page>header h1 span { color:var(--pw-accent); }
.pwgen-api-page>header p { max-width:660px; margin:1.5rem 0 0; color:rgba(255,255,255,.7); font-size:1.05rem; line-height:1.65; }
.pwgen-api-page section { margin-top:3.5rem; }
.pwgen-api-page h2 { margin-bottom:1.25rem; font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.045em; }
.pwgen-api-notice { padding:1.5rem; border-left:6px solid var(--pw-accent); background:#fff; }
.pwgen-api-notice p { margin:.5rem 0 0; line-height:1.65; }
.pwgen-api-endpoints { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.pwgen-api-endpoints article { padding:1.25rem; border:1px solid rgba(16,22,19,.18); background:#fff; }
.pwgen-api-endpoints article code { color:#347500; font-weight:800; }
.pwgen-api-endpoints h3 { margin:.7rem 0; font-family:monospace; font-size:1rem; overflow-wrap:anywhere; }
.pwgen-api-endpoints p { margin:0; color:#626b66; line-height:1.5; }
.pwgen-api-page section>p { line-height:1.65; }
.pwgen-api-page section>h3 { margin:2rem 0 .8rem; }
.pwgen-api-table-wrap { overflow-x:auto; background:#fff; }
.pwgen-api-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.pwgen-api-table th,.pwgen-api-table td { padding:.8rem 1rem; border:1px solid rgba(16,22,19,.16); text-align:left; vertical-align:top; }
.pwgen-api-table th { background:var(--pw-ink); color:#fff; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; }
.pwgen-api-table td:first-child { white-space:nowrap; }
.pwgen-api-page pre { overflow:auto; padding:1.5rem; background:var(--pw-ink); color:#e9f0e9; border-left:5px solid var(--pw-accent); }
.pwgen-api-page pre code { color:inherit; }
.pwgen-api-response p { line-height:1.65; }
.pwgen-api-spec { margin-top:3rem; font-weight:750; }
@media(max-width:700px){.pwgen-api-callout{align-items:flex-start;flex-direction:column;gap:.8rem}.pwgen-api-page{padding-top:8rem}.pwgen-api-endpoints{grid-template-columns:1fr}.pwgen-api-page pre{font-size:.78rem}}