@font-face{font-family:Blender;src:url('/qr/fonts/BlenderPro-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('/qr/fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:dark;--bg:#0e0e0e;--ink:#fff;--secondary:#acacac;--field:#222;--accent:#00aaff;--error:#ffaca6}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 Inter,Arial,sans-serif;min-height:100svh;display:flex;flex-direction:column}
button,input{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.4}
:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.header{padding:25px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font:500 27px/1 Blender,Arial,sans-serif;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--accent)}
.header-title{font-size:14px;color:var(--secondary)}
main{width:min(100% - 40px,600px);margin:40px auto 0;text-align:center;flex:1}
h1{font:500 clamp(40px,7vw,64px)/1.05 Blender,Arial,sans-serif;letter-spacing:-.025em;margin:0}
.intro{margin:14px 0 32px;color:var(--secondary)}
form{text-align:left}
label{display:block;margin-bottom:9px;font-size:14px}
.input-wrap{position:relative}
input{width:100%;height:60px;border:2px solid transparent;border-radius:4px;background:var(--field);color:var(--ink);padding:14px 54px 14px 18px;outline:none}
input:focus{border-color:var(--accent)}
input:focus-visible{outline:none}
input[aria-invalid=true]{border-color:var(--error)}
input::placeholder{color:var(--secondary)}
.clear{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;border-radius:3px;color:var(--secondary);background:transparent;font:400 29px/1 Arial,sans-serif}
.clear:hover{background:#383838;color:var(--ink)}
.hint{font-size:13px;line-height:1.5;margin:9px 0 0;min-height:40px;color:var(--secondary)}
.hint.error{color:var(--error)}
.result{margin-top:10px}
.qr-paper{width:276px;max-width:100%;aspect-ratio:1;margin:0 auto;background:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#555}
.qr-paper svg{display:block;width:100%;height:100%}
.empty{font-size:15px;line-height:1.7;padding:20px;margin:0}
.destination{font-size:13px;color:var(--secondary);overflow-wrap:anywhere;margin:14px auto 22px;min-height:20px;max-width:480px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.downloads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.downloads button{background:var(--field);border:0;border-radius:4px;color:var(--ink);padding:16px 18px;text-align:left;transition:background .15s,transform .15s}
.downloads button:not(:disabled):hover{background:#353535}
.downloads button:not(:disabled):active{transform:translateY(2px)}
.downloads button:first-child{background:var(--accent);color:#001824}
.downloads button:first-child:not(:disabled):hover{background:#4bc3ff}
.format{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:17px}
.format svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.size{display:block;font-size:12px;margin-top:4px}
.download-status{min-height:22px;margin:12px 0 0;font-size:13px;color:var(--secondary)}
.noscript{color:var(--error)}
footer{padding:28px 20px;text-align:center;font-size:12px;color:var(--secondary)}
@media(max-width:600px){.header{padding:22px 20px}.brand{font-size:24px}.header-title{font-size:11px}main{margin-top:30px}.intro{font-size:14px;margin-bottom:27px}.qr-paper{width:260px}.downloads{gap:7px}.downloads button{padding:13px 10px}.format{font-size:16px}.size{font-size:11px}footer{padding-top:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
