*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#090a0c;color:#f2f3f5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.site-header{height:76px;max-width:1180px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1c1e22}.logo{font-size:20px;font-weight:750;letter-spacing:-.04em;display:flex;align-items:center;gap:10px}.logo-mark{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#f4f5f7;color:#090a0c;font-weight:900}.site-header nav{display:flex;gap:8px}.site-header nav a{padding:9px 14px;border-radius:9px;color:#92969e;font-size:14px}.site-header nav a:hover,.site-header nav a.active{color:#fff;background:#14161a}.hero{position:relative;max-width:1180px;margin:auto;min-height:600px;padding:105px 28px 80px;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;overflow:hidden}.hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#272b32 0,rgba(9,10,12,0) 68%);right:-80px;top:30px;pointer-events:none}.eyebrow{margin:0 0 18px;color:#858a93;font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:700}.hero h1,.page-heading h1{font-size:clamp(46px,6vw,76px);line-height:.98;letter-spacing:-.065em;margin:0 0 25px;font-weight:800}.hero h1 span,.page-heading h1 span{color:#777d87}.hero-text{max-width:600px;color:#9a9fa7;font-size:17px;line-height:1.7}.hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}.btn{display:inline-flex;justify-content:center;align-items:center;gap:20px;border:0;border-radius:11px;padding:13px 18px;cursor:pointer;font-weight:700;font-size:14px}.btn-primary{background:#f1f2f4;color:#0b0c0e}.btn-primary:hover{background:#fff;transform:translateY(-1px)}.btn-secondary{border:1px solid #2b2e34;color:#e7e8eb}.btn-secondary:hover{background:#15171b}.hero-card{display:flex;justify-content:center;position:relative}.mini-card{width:360px;padding:28px;border:1px solid #282b30;background:linear-gradient(145deg,#14161a,#0e0f11);border-radius:20px;box-shadow:0 30px 90px #0008;transform:rotate(2deg)}.mini-top{font-size:11px;color:#70757d;text-transform:uppercase;letter-spacing:.1em;display:flex;gap:8px;align-items:center}.dot{width:7px;height:7px;border-radius:50%}.green{background:#a8e0b0}.fake-password{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;letter-spacing:.04em;margin:58px 0 20px;word-break:break-all}.strength{display:flex;gap:5px}.strength span{height:4px;flex:1;background:#b7d9bd;border-radius:4px}.mini-card small{display:block;color:#71767e;margin-top:12px;font-size:11px}.features{max-width:1180px;margin:auto;padding:70px 28px 100px;border-top:1px solid #1c1e22;display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.feature-icon{font-size:11px;color:#71767e;margin-bottom:22px}.features h2{font-size:20px;margin:0 0 10px;letter-spacing:-.03em}.features p{color:#81868e;font-size:14px;line-height:1.7;margin:0;max-width:330px}footer{max-width:1180px;margin:auto;padding:28px;border-top:1px solid #1c1e22;color:#62666d;font-size:12px;display:flex;justify-content:space-between}.tool-page{max-width:1060px;margin:auto;padding:82px 28px 100px}.page-heading{max-width:760px;margin-bottom:55px}.page-heading h1{font-size:clamp(44px,6vw,68px)}.page-heading>p:last-child{color:#858a93;max-width:620px}.generator-grid,.nickname-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{border:1px solid #24272c;background:#101215;border-radius:18px;padding:27px}.panel-label{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#70757d;font-weight:750;margin-bottom:24px}.result{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:25px;line-height:1.4;word-break:break-all;min-height:72px;display:flex;align-items:center;color:#f5f6f7}.result-meta{display:flex;justify-content:space-between;color:#70757d;font-size:11px;margin:20px 0 9px}.result-meta span:first-child{color:#b8d7bd}.meter{display:flex;gap:4px;margin-bottom:25px}.meter i{height:4px;flex:1;border-radius:3px;background:#292c31}.meter i.on{background:#b8d7bd}.full{width:100%}.ghost-button{width:100%;border:0;background:transparent;color:#777c84;padding:14px 0 0;cursor:pointer;font-size:12px}.ghost-button:hover{color:#fff}.range-label{display:flex;justify-content:space-between;color:#a5a9b0;font-size:13px}.range-label strong{color:#fff}input[type=range]{width:100%;margin:18px 0 30px;accent-color:#eee}.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:25px}.checks label{border:1px solid #292c31;border-radius:10px;padding:12px;font-size:12px;color:#a4a8ae;display:flex;gap:9px;align-items:center;cursor:pointer}.checks label:has(input:checked){border-color:#4a4e55;color:#eee}.checks input{accent-color:#eee}.switch-row{border-top:1px solid #272a2f;padding-top:20px;display:flex;align-items:center;justify-content:space-between;color:#a1a5ac;font-size:12px}.switch-row small{display:block;color:#60656d;margin-top:3px}.switch-row>input{display:none}.switch-row i{width:38px;height:21px;border-radius:20px;background:#2a2d32;position:relative;cursor:pointer}.switch-row i:after{content:"";width:15px;height:15px;position:absolute;left:3px;top:3px;background:#898e95;border-radius:50%;transition:.2s}.switch-row input:checked+i{background:#eee}.switch-row input:checked+i:after{left:20px;background:#111}.info-card{margin-top:70px;padding:34px;border:1px solid #24272c;border-radius:18px;background:#0d0f11;display:grid;grid-template-columns:1fr 1.3fr;gap:60px}.info-card h2{font-size:30px;line-height:1.1;letter-spacing:-.04em;margin:0}.info-copy{color:#858a92;font-size:14px;line-height:1.75}.info-copy p{margin:0 0 17px}.info-copy strong{color:#d7d9dd}.field{display:block;margin-bottom:18px}.field span{display:block;font-size:11px;color:#7d828a;margin-bottom:8px}.field input,.field select{width:100%;background:#0a0b0d;border:1px solid #2a2d32;color:#eee;border-radius:10px;padding:13px 14px;outline:0}.field input:focus,.field select:focus{border-color:#555a62}.names{display:grid;gap:9px}.name-item{padding:17px;border:1px solid #292c31;background:#0b0c0e;border-radius:10px;font-family:ui-monospace,monospace;font-size:17px;display:flex;justify-content:space-between;cursor:pointer}.name-item:hover{border-color:#565b64;background:#111318}.name-item span{font-family:inherit;font-size:10px;color:#5e636b}.hint{font-size:10px;color:#5f646c;margin:15px 0 0}.nickname-grid .options{height:max-content}@media(max-width:760px){.site-header{padding:0 18px}.site-header nav a{padding:8px}.hero{grid-template-columns:1fr;padding:75px 20px 60px}.hero-card{display:none}.features,.generator-grid,.nickname-grid,.info-card{grid-template-columns:1fr}.features{padding:55px 20px 70px}.tool-page{padding:60px 20px 70px}.info-card{gap:30px}.checks{grid-template-columns:1fr 1fr}footer{padding:25px 20px}.hero h1,.page-heading h1{font-size:48px}}@media(max-width:430px){.checks{grid-template-columns:1fr}.site-header nav a{font-size:12px;padding:7px}.logo{font-size:18px}}
/* --- deperet motion layer --- */
body{overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,black,transparent 75%);z-index:-1}
.site-header{position:relative}
.site-header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#777,transparent);opacity:.18;animation:headerScan 5s ease-in-out infinite}
.logo-mark{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 25px #fff2}
.hero-content{animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) both}
.hero-card{animation:heroCardIn 1s .12s cubic-bezier(.2,.8,.2,1) both}
.hero-glow{animation:glowFloat 8s ease-in-out infinite}
.mini-card{animation:cardFloat 5s ease-in-out infinite;transition:transform .4s,box-shadow .4s}
.mini-card:hover{transform:rotate(0deg) translateY(-7px);box-shadow:0 40px 110px #000b}
.fake-password{animation:typingIn 1.2s .5s both}
.strength span{animation:strengthIn .5s both}
.strength span:nth-child(2){animation-delay:.1s}.strength span:nth-child(3){animation-delay:.2s}.strength span:nth-child(4){animation-delay:.3s}
.features article{opacity:0;animation:fadeUp .7s both}
.features article:nth-child(2){animation-delay:.1s}.features article:nth-child(3){animation-delay:.2s}
.feature-icon{transition:transform .3s,color .3s}.features article:hover .feature-icon{transform:translateX(7px);color:#d8dbe0}
.features article{transition:transform .3s}.features article:hover{transform:translateY(-5px)}
.btn{transition:transform .25s,background .25s,box-shadow .25s}
.btn-primary:hover{box-shadow:0 10px 35px #fff1}
.btn-secondary{transition:border-color .25s,background .25s,transform .25s}
.btn-secondary:hover{transform:translateY(-2px);border-color:#50545c}
.tool-page{animation:pageIn .65s cubic-bezier(.2,.8,.2,1) both}
.page-heading{animation:fadeUp .7s both}
.panel{transition:border-color .3s,transform .3s,box-shadow .3s}
.panel:hover{border-color:#343840;box-shadow:0 18px 55px #0005}
.result{transition:opacity .2s,transform .2s}
.result.flash{animation:resultFlash .35s}
.meter i{transition:background .35s,transform .35s,box-shadow .35s}
.meter i.on{box-shadow:0 0 10px #b8d7bd33}
.info-card{position:relative;overflow:hidden;transition:border-color .3s}
.info-card:after{content:"";position:absolute;width:240px;height:240px;right:-100px;top:-130px;border-radius:50%;background:#fff;opacity:.025;filter:blur(8px);transition:transform .7s}
.info-card:hover{border-color:#343840}.info-card:hover:after{transform:scale(1.5)}
.field input,.field select{transition:border-color .25s,box-shadow .25s,transform .2s}
.field input:focus,.field select:focus{box-shadow:0 0 0 3px #fff08;transform:translateY(-1px)}
.name-item{transition:transform .25s,border-color .25s,background .25s;animation:nameIn .35s both}
.name-item:nth-child(2){animation-delay:.04s}.name-item:nth-child(3){animation-delay:.08s}.name-item:nth-child(4){animation-delay:.12s}
.name-item:nth-child(5){animation-delay:.16s}.name-item:nth-child(6){animation-delay:.20s}.name-item:nth-child(7){animation-delay:.24s}.name-item:nth-child(8){animation-delay:.28s}
.name-item:hover{transform:translateX(5px)}
.ghost-button{transition:color .2s,transform .2s}.ghost-button:hover{transform:translateY(-1px)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes heroCardIn{from{opacity:0;transform:translate(25px,10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes glowFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-30px,25px,0) scale(1.08)}}
@keyframes cardFloat{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(1deg) translateY(-8px)}}
@keyframes typingIn{from{opacity:0;letter-spacing:.25em;filter:blur(3px)}to{opacity:1;letter-spacing:.04em;filter:none}}
@keyframes strengthIn{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes headerScan{0%,100%{opacity:0;transform:scaleX(.2)}50%{opacity:.25;transform:scaleX(1)}}
@keyframes resultFlash{50%{opacity:.25;transform:scale(.985)}}
@keyframes nameIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* --- continuous living UI --- */
.hero-card{min-height:360px;flex-direction:column;align-items:center}
.mini-card{position:relative;z-index:2}
.live-status{width:360px;margin-top:18px;padding:11px 14px;border:1px solid #202328;border-radius:10px;background:#0d0f11cc;backdrop-filter:blur(10px);font-size:10px;color:#626870;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;animation:statusPulse 3s ease-in-out infinite}
.live-status b{justify-self:end;color:#8d929a;font-weight:500}
.live-dot{width:6px;height:6px;border-radius:50%;background:#b8d7bd;box-shadow:0 0 0 0 #b8d7bd66;animation:livePulse 1.8s infinite}
.live-changing{animation:liveChange .22s ease-out}
.mini-top span:last-child{animation:terminalBlink 2s steps(1,end) infinite}
.hero:after{content:"";position:absolute;left:5%;right:5%;bottom:25px;height:1px;background:linear-gradient(90deg,transparent,#fff2,transparent);transform-origin:center;animation:scanLine 4s ease-in-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 #b8d7bd55}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes liveChange{0%{opacity:.35;transform:translateY(3px);filter:blur(2px)}100%{opacity:1;transform:none;filter:none}}
@keyframes statusPulse{0%,100%{border-color:#202328}50%{border-color:#34383f}}
@keyframes terminalBlink{0%,45%,100%{opacity:1}50%,95%{opacity:.65}}
@keyframes scanLine{0%,100%{transform:scaleX(.1);opacity:0}20%,80%{transform:scaleX(1);opacity:.35}}
@media(max-width:760px){.hero-card,.mini-card,.live-status{width:min(100%,360px)}.live-status{font-size:9px}}

body:after{content:"";position:fixed;width:420px;height:420px;left:var(--mx,50%);top:var(--my,20%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff009,transparent 68%);pointer-events:none;z-index:-1;opacity:.045;transition:left .5s ease-out,top .5s ease-out}
.panel.is-hovering{transform:translateY(-2px)}
.btn.is-hovering{box-shadow:0 12px 38px #fff12}
@media(prefers-reduced-motion:reduce){body:after{display:none}.live-status,.live-dot,.hero:after{animation:none!important}}