:root { --ink:#17211b; --paper:#f7f4ed; --muted:#69716a; --line:#d9ddd4; --accent:#d95d32; --leaf:#376345; --soft:#e9efe7; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 90% 5%, #e2eddb 0 15%, transparent 39%), var(--paper); }
button, input, select { font:inherit; }
.page-shell { width:min(100% - 2rem, 960px); margin:0 auto; padding:2rem 0 4.5rem; }
.hero { max-width:760px; padding:1rem 0 3.25rem; }
.brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--ink); font-weight:800; letter-spacing:-.04em; text-decoration:none; font-size:1.18rem; }
.brand-mark { display:grid; place-items:center; width:2rem; height:2rem; background:var(--ink); color:#fff8e9; border-radius:50%; font-size:.66rem; letter-spacing:-.08em; }
.eyebrow { margin:2.8rem 0 .7rem; color:var(--leaf); font-weight:800; letter-spacing:.13em; font-size:.69rem; }
h1 { margin:0; font-family:Georgia, "Times New Roman", serif; letter-spacing:-.065em; font-weight:500; font-size:clamp(2.8rem, 8vw, 5.8rem); line-height:.94; }
h1 em { color:var(--accent); font-weight:400; }
.lede { max-width:560px; margin:1.45rem 0 0; color:#505950; font-size:1.05rem; line-height:1.65; }
.generator-card { padding:1.65rem; border:1px solid #d0d8cd; border-radius:1.25rem; background:#fffdf8; box-shadow:0 12px 38px rgb(23 33 27 / 8%); }
.card-topline, .strength-header, .control-label-row { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.card-topline h2 { margin:0; font-size:1rem; letter-spacing:-.025em; }
.local-badge { display:inline-flex; gap:.35rem; align-items:center; color:var(--leaf); font-size:.74rem; font-weight:700; white-space:nowrap; }
.local-badge span { color:#4caa62; font-size:.7rem; }
.passphrase { display:block; min-height:3.6rem; margin:1.6rem 0 .25rem; overflow-wrap:anywhere; font-family:Georgia, "Times New Roman", serif; font-size:clamp(1.7rem, 4vw, 2.6rem); letter-spacing:-.035em; line-height:1.14; }
.character-count, .clipboard-note, .hint, .optional { color:var(--muted); font-size:.78rem; }
.character-count { margin:0; }
.action-row { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem; }
.button { border:1px solid transparent; padding:.72rem 1rem; border-radius:.65rem; cursor:pointer; font-weight:750; font-size:.9rem; transition:transform .16s ease, background .16s ease; }
.button:hover { transform:translateY(-1px); }
.button-primary { background:var(--ink); color:#fffdf8; }
.button-secondary { background:#f4f0e8; border-color:#e0dacd; color:var(--ink); }
.clipboard-note { margin:.85rem 0 0; line-height:1.45; }
.controls { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem 1.25rem; padding:2rem 0; }
.control-group { min-width:0; border-top:1px solid var(--line); padding-top:.9rem; }
.profile-control { grid-column:span 2; }
label, legend { font-size:.88rem; font-weight:750; }
select, input[type="number"] { width:100%; margin-top:.65rem; border:1px solid #cbd2c9; border-radius:.6rem; background:#fffdf8; color:var(--ink); padding:.7rem .8rem; }
input[type="range"] { width:100%; margin:.7rem 0 0; accent-color:var(--accent); }
.value-output { color:var(--accent); font-size:.84rem; font-weight:800; }
.range-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.7rem; }
fieldset { margin:0; padding:.9rem 0 0; border:0; }
.requirements { display:flex; flex-wrap:wrap; column-gap:1rem; row-gap:.55rem; }
.requirements legend { width:100%; padding:0; }
.requirements label { display:flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600; }
.requirements input { accent-color:var(--accent); }
.strength-panel { border-radius:1rem; background:var(--ink); color:#fffdf8; padding:1.35rem 1.45rem; }
.strength-panel .eyebrow { margin:0 0 .35rem; color:#b9d6aa; }
.strength-header strong { font-size:1.14rem; }
.entropy { color:#ffc26f; font-family:Georgia, serif; font-size:1.65rem; }
.meter { width:100%; height:.44rem; overflow:hidden; margin:1.1rem 0 .75rem; border-radius:999px; background:#405149; }
.meter span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, #84c78c, #ffc26f); transition:width .2s ease; }
.strength-panel p { margin:.35rem 0 0; color:#d5ddd3; font-size:.82rem; line-height:1.5; }
.strength-panel .warning { color:#ffc26f; font-weight:700; }
.explainers { display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; padding:4rem 0 0; }
.explainers article { border-top:1px solid var(--line); padding-top:.85rem; }
.step-number { color:var(--accent); font-size:.77rem; font-weight:850; letter-spacing:.08em; }
.explainers h2 { margin:.7rem 0; font-size:1rem; letter-spacing:-.03em; }
.explainers p { margin:0; color:#576057; font-size:.88rem; line-height:1.6; }
footer { padding:1.5rem 1rem 2.5rem; border-top:1px solid var(--line); color:var(--muted); text-align:center; font-size:.78rem; }
footer a { color:inherit; }
@media (max-width:640px) { .page-shell { width:min(100% - 1.4rem, 960px); padding-top:1rem; } .hero { padding-bottom:2.1rem; } .eyebrow { margin-top:2.1rem; } .generator-card { padding:1.2rem; } .controls { grid-template-columns:1fr; } .profile-control { grid-column:auto; } .explainers { grid-template-columns:1fr; gap:1.5rem; padding-top:2.8rem; } .card-topline { align-items:flex-start; flex-direction:column; gap:.35rem; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }