*{box-sizing:border-box}:root{--ink:#1b2441;--muted:#8790a7;--accent:#4361ee;--line:#e9ecf5;--paper:#f7f8fc}
html{min-height:100%;background:var(--paper)}body{margin:0;color:var(--ink);font:14px/1.5 "Segoe UI",Arial,sans-serif;background:radial-gradient(ellipse 550px 260px at 50% 150px,#e9edff80,transparent)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button,a,input,summary{-webkit-tap-highlight-color:transparent}button,a,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}a{color:inherit;text-decoration:none}
.site-header{max-width:1080px;padding:29px 32px;margin:auto;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:10px;align-items:center;font-size:25px;font-weight:700;letter-spacing:-1px}.brand img{width:34px;height:34px}.brand-dot{color:var(--accent)}.local-badge{display:flex;align-items:center;gap:8px;font-size:11px;color:#747f99}.local-badge>span{width:6px;height:6px;border-radius:50%;background:#55a993}
main{max-width:660px;margin:32px auto 0;padding:0 24px 24px}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--accent);font-weight:600;text-align:center}h1{font-size:clamp(30px,4vw,42px);font-weight:650;letter-spacing:-1.8px;line-height:1.2;margin:14px -15px 12px;text-align:center}h1>span{color:var(--accent)}.lead{color:#79839b;text-align:center;font-size:14px;margin:0 0 32px}
.workspace{border:1px solid #e4e8f5;border-radius:23px;background:white;box-shadow:0 14px 60px #263c8006;overflow:hidden}form{padding:27px 28px 24px}.field-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}label{font-weight:600;font-size:12px}.text-button{color:#9199ad;background:transparent;border:0;padding:4px 0;font-size:11px}.text-button:hover{color:var(--accent)}.input-wrap{display:flex;border:1px solid #e0e5f1;border-radius:11px;background:#fafbfe;transition:border-color .2s,box-shadow .2s}.input-wrap:focus-within{border-color:#a7b5ff;box-shadow:0 0 0 3px #4361ee0c}.input-wrap input{background:transparent;border:0;outline:0;min-width:0;flex:1;padding:15px 14px;color:var(--ink);font-size:13px}.input-wrap input::placeholder{color:#a2a9b9}.input-wrap>button{width:47px;border:0;background:transparent;color:#939cb0;display:grid;place-items:center}.input-wrap>button:hover{color:var(--accent)}
.field-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}#input-help{font-size:10px;color:#969eb1}#generate{border:0;border-radius:8px;padding:9px 13px;font-size:11px;background:#edf0ff;color:#4361ee;font-weight:600;white-space:nowrap;transition:background .2s,transform .2s}#generate span{margin-left:11px}#generate:hover{background:#e3e9ff}#generate:active{transform:scale(.98)}#error{color:#bc475c;font-size:11px;line-height:1.5;margin:13px 0 0}
.code-area{border-top:1px solid var(--line);background:linear-gradient(135deg,#fcfdff,#f6f8ff)}.empty{text-align:center;padding:24px 20px 29px;animation:appear .3s ease}.empty-icon{font-family:monospace;display:block;font-size:38px;letter-spacing:4px;color:#b7c2f1;line-height:1;margin-bottom:13px}.empty h2{font-size:14px;font-weight:500;margin:0 0 7px;color:#63708c}.empty p{font-size:11px;color:#98a1b6;line-height:1.8;margin:0}.results{padding:25px 28px 19px;animation:appear .35s ease}.section-label{font-size:9px;letter-spacing:.15em;color:#8490ac;font-weight:600}.result-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.validity{font-size:10px;color:#96a0b6}.current-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:5px 0 16px}.code-button{padding:0;display:flex;align-items:center;gap:18px;border:0;background:transparent;color:var(--accent)}#current-code{font-family:Consolas,"Courier New",monospace;font-variant-numeric:tabular-nums;letter-spacing:2px;font-size:51px;line-height:1.55;font-weight:600;white-space:nowrap}.code-button svg{color:#9aa9e2;transition:color .2s}.code-button:hover svg{color:var(--accent)}.code-button:active{transform:translateY(1px)}.timer{position:relative;flex:0 0 66px;width:66px;height:66px}.timer svg{transform:rotate(-90deg)}.timer circle{fill:none;stroke-width:3}.timer-track{stroke:#e4e9fb}#timer-arc{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:169.646;stroke-dashoffset:0}.timer>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.timer strong{font:600 18px/1.2 Consolas,monospace;color:#5c6fbd}.timer span{font-size:9px;color:#a3acc3}.results.ending #timer-arc{stroke:#d7a44b}.results.ending .timer strong{color:#b58a3b}.next-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #e4e9f7;padding-top:17px}.next-row>div{display:flex;flex-direction:column;gap:3px}.next-caption{font-size:10px;color:#a1abc0}#copy-next{display:flex;align-items:center;gap:12px;padding:6px 0 6px 8px;border:0;background:transparent;color:#7e8cba}#next-code{font:600 24px/1.3 Consolas,monospace;letter-spacing:1px;white-space:nowrap}.copy-symbol{font-size:19px;color:#adb8d8}#copy-next:hover{color:var(--accent)}.parameters{margin:18px 0 0;color:#a8b1c4;font-size:9px;letter-spacing:.04em}.privacy-note{display:flex;align-items:center;gap:9px;padding:15px 28px;border-top:1px solid var(--line);color:#939eb2;font-size:10px;line-height:1.6}.privacy-note svg{flex-shrink:0;color:#8799b8}
.help{padding:0 4px;margin-top:21px;color:#7e89a2;font-size:11px}.help summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:9px 0}.help summary::-webkit-details-marker{display:none}.help summary>span{color:#a4aec3;font-size:16px}.help[open] summary>span{transform:rotate(45deg)}.help p{font-size:11px;line-height:1.85;color:#929db3;margin:9px 0}footer{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#a6aec0;margin:27px 4px 0}#toast{position:fixed;bottom:27px;left:50%;transform:translateX(-50%);background:#24365c;color:#fff;padding:12px 20px;border-radius:12px;font-size:12px;box-shadow:0 6px 24px #17274716;z-index:10;animation:appear .2s ease}
@keyframes appear{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(max-width:560px){.site-header{padding:20px}.local-badge{font-size:9px;gap:5px}.brand{font-size:23px}.brand img{width:30px;height:30px}main{margin-top:27px;padding:0 16px 22px}h1{font-size:30px;letter-spacing:-1.2px;margin-left:0;margin-right:0}.eyebrow{font-size:9px}.lead{font-size:12px;margin-bottom:26px}form{padding:22px 20px}.field-foot{align-items:flex-start;gap:8px}#input-help{max-width:155px;line-height:1.7;padding-top:5px;font-size:9px}#generate{font-size:10px;padding:9px 10px}.results{padding:23px 20px 17px}.validity{font-size:9px}.current-row{gap:6px}.code-button{gap:8px}#current-code{font-size:40px;letter-spacing:1px}.code-button svg{width:16px}.timer{scale:.9;transform-origin:right center}.privacy-note{padding:14px 20px;font-size:9px}.next-caption{font-size:9px}#next-code{font-size:22px}footer{font-size:8px;gap:15px}.workspace:has(#current-code[data-digits="8"]) #current-code{font-size:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}