/* CSS / style.css / modern browsers */
:root{color-scheme:dark;--bg:#0b0e11;--panel:#12171b;--line:#293137;--muted:#8f9ba2;--accent:#c4f781}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f1f4f2;font-family:Inter,Segoe UI,Arial,sans-serif}header,footer{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:30px 36px}header{border-bottom:1px solid #20272c}.brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;font-size:23px;font-weight:650;letter-spacing:-1px}.mark{display:grid;place-items:center;background:var(--accent);color:#12200b;width:32px;height:32px;border-radius:8px;font-size:23px;margin-right:5px}.muted{color:var(--muted);font-weight:400}.local{font-size:12px;color:#a5b0a8;display:flex;align-items:center;gap:8px}.local i{width:6px;height:6px;background:var(--accent);border-radius:100%}main{max-width:900px;margin:auto;padding:64px 24px 32px}.intro{text-align:center}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2.3px;color:var(--accent);margin-bottom:20px}h1{font-weight:500;font-size:clamp(36px,5vw,54px);line-height:1.12;letter-spacing:-2px;margin:0}h1 span{color:#8e999f}.intro p{color:var(--muted);font-size:15px;line-height:1.7;margin:22px 0 34px}.panel{max-width:510px;margin:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 24px 90px #0004}.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.tiny{font:10px monospace;letter-spacing:1.4px;color:var(--muted)}.badge{border:1px solid #3b4934;background:#1c281c;color:var(--accent);font-size:9px;letter-spacing:.7px;border-radius:5px;padding:6px 8px}label{display:block;font-size:13px;margin-bottom:10px}.input-wrap{display:flex;background:#0d1114;border:1px solid #394249;border-radius:9px;padding:4px}.input-wrap:focus-within{outline:2px solid var(--accent);outline-offset:2px}input{width:100%;min-width:0;border:0;background:transparent;color:white;padding:12px;font:14px monospace;outline:0}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}#reveal{border:0;background:transparent;color:#b4bdbf;font-size:11px;padding:8px}.hint{font-size:11px;color:var(--muted);margin:10px 0 20px}.primary{width:100%;border:0;background:var(--accent);color:#17220e;border-radius:8px;padding:14px 18px;text-align:left;font-size:13px;font-weight:650;display:flex;justify-content:space-between}.primary:hover{background:#d5ffa0}.primary:disabled{opacity:.6}.result{margin-top:26px;padding:22px 18px 18px;background:#0b1013;border:1px solid #263137;border-radius:10px}.result-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted)}#state{letter-spacing:0}.code{text-align:center;font:500 clamp(32px,8vw,48px) ui-monospace,Consolas,monospace;letter-spacing:5px;margin:25px 0;color:#58656a}.active .code{color:var(--accent)}.timer-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}#copy{border:1px solid #38433c;color:var(--accent);background:#1b241d;border-radius:6px;padding:8px 10px;font-size:11px}#copy:disabled{opacity:.4;cursor:default}.track{height:3px;background:#202a2c;margin-top:18px;border-radius:5px;overflow:hidden}#progress{height:100%;background:var(--accent);width:0;transition:width .2s linear}.panel-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:20px;color:var(--muted);font-size:10px}.small-lock{color:var(--accent);margin-right:4px}#clear{background:none;border:0;color:#aab4b9;font-size:11px;padding:6px}.notice{font-size:12px;color:var(--accent);margin:8px 0 0}.notice:empty,.error:empty{display:none}.error{font-size:12px;color:#ffb5a5;line-height:1.5}.details{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:720px;margin:46px auto 0}.details>div>span{font:10px monospace;color:#6e7c81}.details h2{font-size:13px;font-weight:500;margin:12px 0 8px}.details p{font-size:12px;line-height:1.65;color:var(--muted);margin:0}.footnote{text-align:center;font-size:10px;color:#758188;margin:38px 0 0}footer{border-top:1px solid #20272c;color:#6f7d83;font-size:10px;padding-top:22px;padding-bottom:22px}footer span:first-child{letter-spacing:2px}@media(max-width:560px){header,footer{padding:20px}.brand{font-size:20px}.local{font-size:9px}main{padding:42px 18px 28px}.panel{padding:20px}.details{gap:18px}.details p{font-size:11px}footer{gap:24px;font-size:9px}.panel-top{margin-bottom:25px}.timer-row{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
