@font-face{font-family:Inter;src:url('/assets/inter.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/jetbrains-mono.ttf') format('truetype');font-weight:100 800;font-display:swap}
*{box-sizing:border-box}
html{min-width:320px;background:var(--bg)}
body{margin:0;color:var(--fg);font-family:var(--font-sans);font-size:1rem;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible{outline:var(--focus-ring);outline-offset:4px}
[hidden]{display:none!important}
.red{color:var(--red)}
.page{min-height:100svh;max-width:1480px;margin:0 auto;padding:0 clamp(22px,6vw,88px);display:flex;flex-direction:column;position:relative}
.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse 45% 60% at 17% 51%,#c5071513,transparent 75%),radial-gradient(ellipse 40% 55% at 89% 32%,#a9222911,transparent 75%),linear-gradient(120deg,#0d0f12,#101114 50%,#0d0f12)}
.ambient::after{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff02 1px,transparent 1px),linear-gradient(90deg,#ffffff02 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at center,black,transparent 75%)}
.header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-2)}
.brand{display:flex;padding:6px 0;flex-shrink:0}
.brand img{width:216px;height:auto}
.header-label{font-family:var(--font-mono);font-size:.875rem;letter-spacing:.08em;color:var(--muted)}
.header-slash{color:var(--red);margin-right:12px}
main{width:100%;max-width:560px;margin:auto;flex:1;padding:57px 0 40px;display:flex;flex-direction:column;justify-content:center}
.intro{margin-bottom:29px}
.eyebrow{display:flex;align-items:center;gap:11px;color:var(--muted);font:500 .75rem/1.5 var(--font-mono);letter-spacing:.1em;margin-bottom:14px}
.accent-rule{width:21px;height:2px;background:var(--red)}
h1{font-weight:580;font-size:clamp(2rem,4.5vw,2.625rem);line-height:1.15;letter-spacing:-.045em;margin:0 0 12px}
.intro p{color:var(--muted);font-size:1rem;line-height:1.6;margin:0}
.glass{position:relative;border:1px solid #ffffff18;border-radius:28px;padding:30px;background:linear-gradient(135deg,#ffffff0b,#ffffff03 45%,#ffffff06),#171a1f70;box-shadow:inset 0 1px 0 #ffffff12,inset 0 -1px 0 #ffffff04,0 20px 70px #00000035;backdrop-filter:blur(32px) saturate(135%);-webkit-backdrop-filter:blur(32px) saturate(135%)}
.glass::before{content:'';position:absolute;top:-1px;left:25%;right:25%;height:1px;background:linear-gradient(90deg,transparent,#ffffff35,transparent);pointer-events:none}
.field-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:12px}
.field-head label{font-size:.875rem;font-weight:550}
.format-label{font:400 .75rem/1.5 var(--font-mono);color:var(--muted);letter-spacing:.01em}
.input-shell{display:flex;align-items:center;gap:12px;padding:0 10px 0 16px;min-height:58px;border:1px solid #ffffff14;border-radius:14px;background:#0a0c1080;transition:border-color var(--t-fast),box-shadow var(--t-fast);box-shadow:inset 0 1px 8px #00000017}
.input-shell:focus-within{border-color:#ff5a63;box-shadow:0 0 0 3px var(--red-soft)}
.input-shell.is-error{border-color:var(--red)}
.key-icon{width:21px;height:21px;flex-shrink:0;color:var(--muted)}
input{width:100%;min-width:0;background:transparent;border:0;color:var(--fg);font:400 1rem/1.5 var(--font-mono);padding:16px 0;outline:0}
input::placeholder{font-family:var(--font-sans);color:var(--muted-2);font-size:.9375rem}
.icon-button{border:0;background:transparent;color:var(--muted);width:40px;height:40px;display:grid;place-items:center;border-radius:8px;flex-shrink:0;transition:background var(--t-fast),color var(--t-fast)}
.icon-button:hover{background:#ffffff0a;color:var(--fg)}
.icon-button svg{width:20px;height:20px}
.eye-closed{display:none}
[aria-pressed='true'] .eye-open{display:none}
[aria-pressed='true'] .eye-closed{display:block}
.field-hint,.field-error{font-size:.8125rem;line-height:1.5;margin:9px 0 20px;color:var(--muted)}
.field-error{color:#ff8088;margin-top:-12px}
.generate-button{width:100%;min-height:51px;padding:12px 18px;border:1px solid #ff6b7340;border-radius:13px;background:linear-gradient(170deg,#ff2936,#e30918);color:white;font-size:.9375rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:inset 0 1px 0 #ffffff2a,0 6px 24px #e306131c;transition:filter var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.generate-button svg{height:18px;width:18px}
.generate-button:hover{filter:brightness(1.1);box-shadow:inset 0 1px 0 #ffffff2a,0 8px 30px #e3061330}
.generate-button:active{transform:translateY(1px)}
.generate-button:disabled{opacity:.6}
.divider{height:1px;background:linear-gradient(90deg,#ffffff04,#ffffff13,#ffffff04);margin:28px 0 25px}
.result-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 12px;color:var(--muted);font-size:.875rem}
#result-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.algorithm-label{font:400 .75rem/1.5 var(--font-mono);white-space:nowrap;color:var(--muted)}
.code-button{width:100%;padding:20px 0 22px;display:flex;align-items:center;flex-direction:column;border:0;background:transparent;border-radius:14px;color:var(--fg);transition:background var(--t-fast)}
.code-button:not(:disabled):hover{background:#ffffff04}
.code-button:not(:disabled):active .code{transform:scale(.98)}
.code{display:flex;align-items:center;justify-content:center;gap:22px;font:500 clamp(2.2rem,6vw,3.65rem)/1.25 var(--font-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;transition:transform var(--t-fast),color var(--t-fast);white-space:nowrap}
.code span{letter-spacing:.02em}
[data-state='empty'] .code,[data-state='loading'] .code{color:#6f7786;font-size:clamp(1.9rem,5vw,3.1rem);letter-spacing:-.1em}
[data-state='loading'] .code{opacity:.5}
.code[data-digits='8']{font-size:clamp(1.85rem,5.5vw,3rem);gap:18px}
.copy-prompt{display:flex;justify-content:center;align-items:center;gap:7px;color:var(--muted);font-size:.875rem;margin-top:14px;min-height:21px}
.copy-prompt svg{width:15px;height:15px;display:none}
[data-state='ready'] .copy-prompt svg{display:block}
.is-copied .copy-prompt{color:var(--success)}
.timer-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 12px;align-items:center;color:var(--muted);font-size:.875rem;margin-bottom:12px}
.time-left{font-family:var(--font-mono);font-size:.875rem;white-space:nowrap;color:var(--muted)}
[data-state='ready'] .time-left{color:var(--fg)}
progress{display:block;width:100%;height:4px;border:none;border-radius:20px;background:#ffffff09;overflow:hidden;appearance:none;accent-color:var(--red)}
progress::-webkit-progress-bar{background:#ffffff09;border-radius:20px}
progress::-webkit-progress-value{background:linear-gradient(90deg,#b20b1b,var(--red));border-radius:20px}
progress::-moz-progress-bar{background:var(--red);border-radius:20px}
.result-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:19px}
.renew-label{display:flex;align-items:center;gap:7px;font-size:.75rem;line-height:1.5;color:var(--muted)}
.renew-label svg{width:14px;height:14px;flex-shrink:0}
.text-button{background:transparent;border:0;padding:6px 0 6px 8px;color:var(--muted);font-size:.875rem;transition:color var(--t-fast);min-height:32px}
.text-button:hover{color:var(--fg)}
.text-button:disabled{opacity:.4}
.privacy{margin:24px 0 0;display:flex;align-items:flex-start;justify-content:center;gap:10px;color:var(--muted);font-size:.8125rem;line-height:1.65;text-align:left}
.privacy svg{width:19px;height:19px;flex-shrink:0;margin-top:2px;color:var(--muted-2)}
.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;min-height:74px;border-top:1px solid var(--line-2);font-size:.75rem;color:var(--muted)}
.footer-domain{font-family:var(--font-mono);overflow-wrap:anywhere;min-width:0}
.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:calc(100% - 36px);padding:14px 20px;background:#20242af5;border:1px solid #ffffff20;border-radius:13px;font-size:.875rem;color:var(--fg);box-shadow:0 8px 35px #0006;backdrop-filter:blur(18px);z-index:10;line-height:1.5}
.skip-link{position:absolute;top:10px;left:22px;transform:translateY(-160%);z-index:20;background:var(--graphite);color:var(--fg);padding:12px;border-radius:8px}
.skip-link:focus{transform:none}
.noscript{color:#ff8088;text-align:center}
@media(min-height:1000px){main{padding-top:80px;padding-bottom:80px}}
@media(max-width:600px){.page{padding:0 22px}.header{height:84px}.brand img{width:192px}main{padding:40px 0 35px}.intro{margin-bottom:24px}.glass{padding:24px;border-radius:24px}.code{gap:16px;font-size:clamp(1.75rem,9vw,3.65rem)}.code[data-digits='8']{font-size:clamp(1.25rem,7.5vw,3rem)}.eyebrow{font-size:.6875rem}.footer{min-height:68px}}
@media(max-width:380px){.page{padding:0 16px}.glass{padding:20px}.field-head{gap:8px}.format-label{font-size:.6875rem}.code{gap:12px}.result-heading{gap:8px}.header-label{font-size:.75rem}.brand img{width:192px}.result-footer{gap:5px}.footer{font-size:.6875rem;gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.glass,.input-shell,.generate-button{border:1px solid ButtonText}.code-button,.icon-button{color:ButtonText}progress{border:1px solid ButtonText}.ambient{display:none}}