:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark;--bg:#0b101a;--panel:#121828;--panel-2:#141d2c;--text:#f6f8ff;--muted:#94a1b5;--line:#2a3449;--input:#070b13;--action:#1c2537;--accent:#00def7;--violet:#7b0eff;--code:#d8ecff;--header:#111525}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:radial-gradient(ellipse 520px 440px at 8% 110px,#21103d 0%,transparent 100%),var(--bg);min-height:100vh}button,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{cursor:default;opacity:.65}.site-header{background:var(--header);height:79px}.header-inner{height:100%;max-width:1084px;padding:0 0;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:12px;font-size:22px;font-weight:780;letter-spacing:-.75px}.brand-symbol{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#00e5ec,#424cff 73%,#8c1eff);box-shadow:0 0 22px #00cfff4a}.brand-symbol svg{width:25px;height:25px}.nav{display:flex;align-items:center;gap:25px}.nav a{font-size:13px;font-weight:560;color:var(--muted);transition:color .2s}.nav a:hover{color:var(--text)}.theme-button{width:40px;height:40px;border-radius:100%;background:transparent;border:2px solid var(--line);display:grid;place-items:center;color:var(--text)}.theme-button svg{width:22px;height:22px}main{max-width:1024px;margin:40px auto 0}.workspace{min-height:506px;display:grid;grid-template-columns:60% 40%;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--panel)}.key-panel{padding:42px 40px 32px;position:relative;display:flex;flex-direction:column}.section-label{display:block;color:var(--accent);font-size:13px;letter-spacing:.015em;font-weight:780;margin:0 0 17px}.key-entry{min-height:153px;position:relative;background:var(--input);border:1px solid #344158;border-radius:12px;overflow:hidden}.key-entry:focus-within{border-color:var(--accent)}#secret{display:block;resize:vertical;min-height:151px;width:100%;border:0;background:transparent;outline:none!important;color:var(--text);padding:23px 45px 20px 21px;font-size:17px;line-height:1.5;font-weight:680;letter-spacing:.012em;overflow-wrap:anywhere}#secret::placeholder{font-size:14px;font-weight:450;color:#66768f}.clear-key{position:absolute;top:13px;right:15px;background:transparent;border:0;color:#6d839f;font-size:30px;line-height:1;padding:2px 4px}.clear-key:hover{color:var(--text)}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.secondary-action,.upload-action{height:50px;border-radius:12px;background:var(--action);border:1px solid #303c56;color:var(--text);display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px}.secondary-action:hover,.upload-action:hover{border-color:var(--accent)}.secondary-action svg{width:18px;height:18px}.scan-group{display:flex}.scan-action{flex:1;min-width:0;border-radius:12px 0 0 12px}.scan-action svg{color:var(--accent)}.upload-action{width:53px;flex:none;border-radius:0 12px 12px 0;border-left:0;color:#9c38ff}.upload-action svg{width:19px;height:19px}.panel-info{display:flex;align-items:flex-start;gap:10px;color:#8191a9;font-size:12px;line-height:1.7;margin-top:auto;padding-top:35px}.info-icon{color:var(--accent)}.error{margin:18px 0 0;border:1px solid #e44b7166;background:#e44b711c;color:#ffb7c8;padding:11px 13px;border-radius:9px;font-size:13px}.token-panel{position:relative;padding:40px;background:radial-gradient(circle at 1px 1px,#8295ad10 1px,transparent 0) 0 0/20px 20px,var(--panel-2);border-left:1px solid #293448;display:flex;flex-direction:column}.token-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.token-title{color:#bccdd9;letter-spacing:.16em;font-size:13px;font-weight:800;white-space:nowrap}.bolt{font-size:22px;color:var(--accent);margin-right:6px;vertical-align:-2px}.countdown{display:flex;align-items:center;gap:8px;color:var(--accent);font-weight:750;font-size:13px;border:1px solid #079bad;border-radius:5px;padding:6px 11px;background:#00dfff12;font-variant-numeric:tabular-nums}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}.segments{display:grid;grid-template-columns:repeat(28,minmax(0,1fr));gap:3px;height:24px;margin-top:13px;overflow:hidden}.segment{height:100%;background:#09101a;opacity:.45;transition:opacity .1s}.segment.on{opacity:1;background:linear-gradient(90deg,#9209ff,#4255ff 45%,#00e4f5)}.diagnostic{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;color:#667b95;font-size:9px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.01em}.diagnostic .sync{color:#00b8cf;letter-spacing:.05em}.token-display{border:1px solid #344358;border-radius:13px;margin-top:34px;background:linear-gradient(135deg,#101927d6,#131b2ec9);min-height:90px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 22px #0005;overflow:hidden}.token-display strong{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(32px,4.6vw,59px);font-weight:700;letter-spacing:.095em;color:var(--code);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 25px #88abff38}.copy-code{width:100%;height:61px;border-radius:12px;border:0;color:white;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(110deg,#00d7e5,#268cff 53%,#8700f8);margin-top:31px;box-shadow:inset 0 -4px 0 #0002}.copy-code svg{width:18px;height:18px}.copy-code:hover:not(:disabled){filter:brightness(1.1)}.token-footer{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#8396ac;font-size:11px;line-height:1.6}.privacy-mark{color:var(--accent);white-space:nowrap;font-size:10px;font-weight:750}.below-section{padding:86px 4px 0;scroll-margin-top:24px}.section-heading>span{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--accent)}.section-heading h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.8px;margin:12px 0 25px}.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.info-card{background:var(--panel);border:1px solid var(--line);padding:24px;border-radius:14px}.step{color:var(--accent);font:750 12px ui-monospace,monospace}.info-card h3{font-size:16px;margin:16px 0 9px}.info-card p,.small-section p{font-size:14px;color:var(--muted);line-height:1.8;margin:0}.small-section{max-width:760px;padding-top:65px}.footer{max-width:1024px;margin:90px auto 0;padding:25px 0 35px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:23px;max-width:min(94vw,490px);width:100%}dialog::backdrop{background:#050916d9}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-top h2{margin:0 0 14px;font-size:19px}.dialog-top button{font-size:28px;color:var(--text);border:0;background:transparent}#camera-preview{width:100%;max-height:360px;object-fit:cover;border-radius:12px;background:#070b13}#scanner-status{color:var(--muted);font-size:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}body.light{color-scheme:light;--bg:#f0f3f9;--panel:#ffffff;--panel-2:#f6f8fc;--text:#152238;--muted:#586981;--line:#d4deea;--input:#f3f6fb;--action:#edf2f9;--header:#e8eff9;--code:#1f3759}body.light .segment{background:#cbd6e5}body.light .segment.on{background:linear-gradient(90deg,#9209ff,#4255ff 45%,#00bdd5)}body.light .token-display{background:#fff}body.light .clear-key{color:#63748b}@media(max-width:1120px){.header-inner,main,.footer{margin-left:28px;margin-right:28px}}@media(max-width:760px){.site-header{height:72px}.brand{font-size:18px}.brand-symbol{width:37px;height:37px}.nav{gap:12px}.nav a{display:none}main{margin-top:22px}.workspace{grid-template-columns:1fr}.key-panel{padding:28px 24px 24px;min-height:345px}.token-panel{border-left:0;border-top:1px solid var(--line);padding:26px 24px 30px}.token-display{margin-top:23px}.copy-code{margin-top:19px}.panel-info{padding-top:24px}.below-section{padding-top:56px}.info-cards{grid-template-columns:1fr}.footer{margin-top:65px}}@media(max-width:430px){.header-inner,main,.footer{margin-left:14px;margin-right:14px}.key-panel,.token-panel{padding-left:19px;padding-right:19px}.action-grid{gap:9px}.secondary-action{font-size:13px}.upload-action{width:43px}.token-title{font-size:11px}.token-display strong{font-size:clamp(31px,9vw,46px)}.footer{flex-direction:column;gap:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

.device-save{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.save-disclosure{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border:1px solid #00cfe52b;background:#00cfe50a;border-radius:10px}.save-lock{font-size:17px;color:var(--accent);line-height:1.5}.save-disclosure p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}.save-disclosure strong{display:block;color:var(--text);font-size:12px;margin-bottom:3px}.save-device-button{width:100%;height:43px;margin-top:11px;border:1px solid #00cfe56b;border-radius:10px;background:#00cfe510;color:var(--accent);font-size:13px;font-weight:750;display:flex;align-items:center;justify-content:center;gap:8px}.save-device-button:hover{background:#00cfe51c}.save-device-button span{font-size:20px;line-height:1}.saved-keys{margin-top:16px}.saved-heading{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em;margin-bottom:8px}.saved-heading button{border:0;background:none;color:#ff9eaa;font-size:11px;letter-spacing:0}.saved-list{display:grid;gap:7px}.saved-item{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#ffffff08;border:1px solid var(--line);border-radius:9px;min-width:0}.saved-name{font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.saved-item button{border:1px solid var(--line);background:var(--action);color:var(--text);border-radius:7px;padding:5px 8px;font-size:10px}.saved-item button.delete-saved{color:#ff9eaa}.save-feedback{font-size:11px;color:#80e9bf;margin:8px 0 0}.save-feedback.bad{color:#ff9eaa}body.light .save-disclosure{background:#00a9c30b}body.light .saved-item{background:#f7f9fc}
