:root{--bg:#f7f9fc;--panel:#fff;--line:#dbe3ec;--text:#172231;--muted:#687789;--cyan:#078c98;--amber:#c97916;--green:#358b63;font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f7f9fc,#fff 70%,#f4f8fa);min-height:100vh}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}[hidden]{display:none!important}.site-header{height:74px;padding:0 clamp(18px,6vw,92px);display:flex;align-items:center;border-bottom:1px solid var(--line);background:#ffffffec;backdrop-filter:blur(14px)}.brand{display:inline-flex;align-items:center;gap:11px;font-weight:750;letter-spacing:.04em}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--cyan);color:var(--cyan);font:700 24px/1 "IBM Plex Mono",monospace;transform:rotate(-8deg)}.brand small{display:block;margin-top:3px;color:#93a0ad;font:500 8px/1.1 "IBM Plex Mono",monospace;letter-spacing:.16em}.nav-links{display:flex;gap:25px;margin-left:clamp(25px,6vw,90px);color:var(--muted);font-size:13px}.nav-links a:hover,.nav-links .active{color:var(--cyan)}.header-note{margin-left:auto;color:var(--green);font:10px "IBM Plex Mono",monospace}.page-shell{max-width:1120px;margin:0 auto;padding:28px 24px 100px}.breadcrumbs{display:flex;gap:12px;color:#8593a0;font-size:11px;margin-bottom:62px}.breadcrumbs a:hover{color:var(--cyan)}.hero{padding-bottom:42px;border-bottom:1px solid var(--line)}.eyebrow{margin:0;color:var(--cyan);font:600 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.18em}.eyebrow.dark{color:#8492a0}.hero h1{max-width:750px;margin:20px 0 15px;font-size:clamp(36px,5.5vw,64px);line-height:1.1;letter-spacing:-.04em}.hero h1 em{font-style:normal;color:var(--amber)}.hero>p:not(.eyebrow){max-width:560px;color:var(--muted);font-size:14px;line-height:1.9}.trust-row{display:flex;gap:20px;margin-top:25px;color:var(--green);font:10px "IBM Plex Mono",monospace}.qr-workspace{margin-top:30px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 45px #25445f0d}.tabs{display:flex;gap:4px;padding:12px;border-bottom:1px solid var(--line);background:#f8fafc}.tab{padding:10px 16px;border:0;background:transparent;color:#7f8d9b;font-size:12px}.tab.active{background:#fff;color:var(--cyan);box-shadow:0 3px 12px #25445f12}.tab-panel{display:grid;grid-template-columns:1fr 350px;gap:50px;padding:32px}.panel-copy h2{margin:10px 0 9px;font-size:23px}.panel-copy>p:not(.eyebrow){max-width:440px;margin:0 0 23px;color:var(--muted);font-size:12px;line-height:1.8}.panel-copy label:not(.upload){display:grid;gap:7px;color:var(--muted);font-size:11px}.panel-copy textarea,.decode-result textarea{width:100%;padding:12px;border:1px solid #cbd7e2;outline:0;color:var(--text);background:#fbfdfe;resize:vertical;font:12px/1.7 "IBM Plex Mono",Consolas,monospace}.panel-copy textarea:focus{border-color:#82c5c8}.button{display:inline-flex;align-items:center;gap:12px;justify-content:center;padding:12px 17px;border:0;font-size:12px}.button.primary{margin-top:20px;background:var(--cyan);color:#fff}.button.primary:hover{background:#057780}.button.outline{margin-top:18px;border:1px solid #b9cbd5;color:var(--cyan);background:#fff}.button:disabled{cursor:not-allowed;opacity:.45}.preview-box{display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:360px;padding:22px;border-left:1px solid var(--line);background:#fbfdfe}.qr-preview{display:grid;place-items:center;min-width:250px;min-height:250px;padding:10px;background:#fff;border:1px solid #e2e9ee}.qr-preview canvas{display:block;max-width:100%;height:auto}.preview-box p{margin:14px 0 0;color:#8492a0;font-size:11px}.color-row{display:flex;align-items:end;gap:20px;margin-top:17px}.color-row label{display:grid!important;gap:7px!important}.color-row input[type=color]{width:48px;height:32px;padding:2px;border:1px solid #cbd7e2}.color-row input[type=range]{width:120px;accent-color:var(--cyan)}.upload{display:flex;align-items:center;justify-content:center;min-height:145px;border:1px dashed #9db4bf;background:#f8fbfc;color:var(--cyan);font-size:12px}.upload input{display:none}.privacy-tip{margin-top:13px!important;color:#8b98a5!important;font-size:10px!important}.decode-result{display:flex;align-items:center;justify-content:center;min-height:360px;padding:22px;border-left:1px solid var(--line);background:#fbfdfe}.decode-placeholder{color:#8492a0;font-size:12px}.decode-result>div{width:100%}.decode-result p{margin:0 0 8px;color:#738392;font-size:11px}.decode-result .button{margin-top:12px}.tips{display:grid;grid-template-columns:230px 1fr;gap:40px;padding-top:95px}.tips h2{margin:10px 0;font-size:24px}.tip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tip-grid article{padding:18px;background:#fff;border-top:2px solid #b9cbd5}.tip-grid strong{display:block;font-size:13px}.tip-grid p{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.8}.site-footer{display:flex;align-items:start;gap:35px;padding:42px clamp(18px,6vw,92px);border-top:1px solid var(--line);color:#7b8996;background:#f7fafc}.site-footer p{margin:12px 0 0;font-size:11px}.footer-links{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto;font-size:11px}.site-footer>small{margin-left:auto;align-self:end;color:#8b98a5;font-size:10px}@media(max-width:800px){.nav-links{gap:14px;margin-left:25px}.tab-panel{grid-template-columns:1fr;gap:25px;padding:22px}.preview-box,.decode-result{border-left:0;border-top:1px solid var(--line)}.tips{display:block}.tip-grid{margin-top:25px}}@media(max-width:580px){.site-header{height:64px;padding:0 16px}.nav-links{display:none}.header-note{font-size:9px}.page-shell{padding:22px 16px 70px}.breadcrumbs{margin-bottom:42px}.hero h1{font-size:40px}.trust-row{flex-wrap:wrap;gap:9px 15px}.tabs{overflow:auto}.tab{flex:0 0 auto;padding:10px 12px}.tab-panel{padding:18px}.qr-preview{min-width:220px;min-height:220px}.color-row{gap:12px;flex-wrap:wrap}.tip-grid{grid-template-columns:1fr}.site-footer{display:block;padding:32px 16px}.footer-links{margin:25px 0}.site-footer>small{display:block}}
