:root { --bg:#fff; --fg:#111113; --muted:#86868b; --line:#e7e7e9; --surface:#f4f4f5; --accent:#10a37f; color-scheme:light; }
html[data-theme="dark"] { --bg:#0f0f10; --fg:#f2f2f3; --muted:#8a8a92; --line:#232326; --surface:#1a1a1c; color-scheme:dark; }
* { box-sizing:border-box; }
html,body { min-height:100%; background:var(--bg); color:var(--fg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
body { margin:0; } button,input { font:inherit; color:inherit; } button { cursor:pointer; } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.hub-shell,.generator-shell { width:min(100% - 48px,780px); min-height:100vh; margin:auto; display:flex; flex-direction:column; }
.site-header { display:flex; align-items:center; gap:12px; height:76px; border-bottom:1px solid var(--line); }.brand { color:inherit; font-size:19px; font-weight:640; letter-spacing:-.055em; text-decoration:none; }.brand span { color:var(--accent); }.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }.back-link { color:var(--muted); font-size:13px; text-decoration:none; }.back-link:hover { color:var(--fg); }
.icon-button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:8px; background:transparent; font-size:16px; }.icon-button:hover { background:var(--surface); border-color:var(--muted); }
.hub-intro,.generator-heading { padding:54px 0 30px; }.hub-intro h1,.generator-heading h1 { margin:0; font-size:27px; line-height:1.2; letter-spacing:-.04em; }.intro-copy,.generator-heading p { max-width:440px; margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.tool-list { border:1px solid var(--line); border-radius:12px; overflow:hidden; }.tool-card { min-height:70px; display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:14px 16px; border-top:1px solid var(--line); color:inherit; text-decoration:none; }.tool-card:first-child { border-top:0; }.tool-card--active:hover { background:var(--surface); }.tool-copy { display:grid; gap:3px; }.tool-copy strong { font-size:14px; font-weight:600; }.tool-copy small { color:var(--muted); font-size:12px; }.card-arrow { color:var(--muted); font-size:18px; }.tool-card--soon { opacity:.6; }.soon-label { color:var(--muted); font-size:11px; }
footer { margin-top:auto; padding:24px 0; color:var(--muted); font-size:12px; }
.generator-heading { padding-bottom:24px; }.generator { padding:24px; border:1px solid var(--line); border-radius:12px; }.password-output { display:flex; gap:10px; align-items:center; min-height:56px; padding:10px 10px 10px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.password-output code { min-width:0; overflow-wrap:anywhere; flex:1; font:500 clamp(15px,3vw,20px)/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:-.04em; }.password-output .icon-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.strength-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin:11px 0 28px; color:var(--muted); font-size:11px; }.strength-track { height:3px; background:var(--line); }.strength-track i { display:block; height:100%; width:70%; background:var(--accent); transition:width .2s; }
.controls { display:grid; gap:26px; }.control-heading { display:flex; justify-content:space-between; margin-bottom:12px; font-size:13px; font-weight:600; }.control-heading output { color:var(--accent); font-variant-numeric:tabular-nums; } input[type="range"] { appearance:none; width:100%; height:2px; background:linear-gradient(to right,var(--accent) 0%,var(--accent) 35%,var(--line) 35%,var(--line) 100%); cursor:pointer; } input[type="range"]::-webkit-slider-thumb { appearance:none; width:15px; height:15px; border:2px solid var(--accent); border-radius:50%; background:var(--bg); } input[type="range"]::-moz-range-thumb { width:11px; height:11px; border:2px solid var(--accent); border-radius:50%; background:var(--bg); }.range-scale { display:flex; justify-content:space-between; margin-top:7px; color:var(--muted); font-size:10px; }
fieldset { border:0; padding:0; margin:0; } legend { margin-bottom:12px; font-size:13px; font-weight:600; }.character-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.check-option { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; cursor:pointer; }.check-option input { position:absolute; opacity:0; }.fake-check { display:grid; width:16px; height:16px; place-items:center; border:1px solid var(--line); border-radius:4px; }.check-option input:checked + .fake-check { border-color:var(--accent); background:var(--accent); }.check-option input:checked + .fake-check::after { content:""; width:7px; height:4px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(-45deg) translateY(-1px); }.check-option b { margin-left:3px; color:var(--muted); font-size:10px; font-weight:500; }
.compatibility-option { display:flex; align-items:center; gap:7px; padding-top:20px; border-top:1px solid var(--line); }.switch-label { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; cursor:pointer; }.switch-label input { position:absolute; opacity:0; }.switch { position:relative; width:32px; height:18px; border-radius:99px; background:#b7bbc0; }.switch::after { content:""; position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:#fff; transition:transform .18s; }.switch-label input:checked + .switch { background:var(--accent); }.switch-label input:checked + .switch::after { transform:translateX(14px); }.info-wrap { position:relative; }.info-button { display:grid; width:20px; height:20px; padding:0; place-items:center; border:0; background:transparent; color:var(--muted); }.info-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.6; }.tooltip { position:absolute; z-index:2; bottom:calc(100% + 8px); left:50%; width:250px; padding:10px 12px; transform:translateX(-50%); border-radius:6px; background:var(--fg); color:var(--bg); font-size:11px; line-height:1.5; opacity:0; pointer-events:none; transition:opacity .15s; }.info-wrap:hover .tooltip,.info-wrap:focus-within .tooltip { opacity:1; }
.actions { display:flex; align-items:center; gap:13px; margin-top:30px; }.generate-button { display:inline-flex; height:34px; align-items:center; gap:7px; padding:0 14px; border:0; border-radius:8px; background:var(--fg); color:var(--bg); font-size:13px; font-weight:600; }.generate-button:hover { opacity:.85; }.generate-button svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.copy-message { color:var(--accent); font-size:12px; }
@media (max-width:600px) { .hub-shell,.generator-shell { width:min(100% - 28px,780px); }.site-header { height:64px; }.hub-intro,.generator-heading { padding-top:38px; }.generator { padding:18px; }.character-options { grid-template-columns:1fr; }.back-link { font-size:12px; }.tooltip { left:auto; right:-8px; transform:none; } }