*{box-sizing:border-box} :root{--bg:#080d12;--panel:#0d151d;--panel2:#0a1118;--text:#f5f7fa;--muted:#8395a8;--line:#223241;--blue:#1688ef;--soft:#101c27}html[data-theme=light]{--bg:#e8f0f7;--panel:#f7fafc;--panel2:#fff;--text:#14202c;--muted:#607487;--line:#cbd8e3;--soft:#e2edf5}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Noto Sans JP","Yu Gothic UI",sans-serif;min-height:100vh}.grid{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(120,160,190,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,190,.045) 1px,transparent 1px);background-size:128px 128px}.glow{position:fixed;right:0;top:0;width:48vw;height:45vh;background:radial-gradient(circle at top right,rgba(0,126,230,.15),transparent 68%);pointer-events:none}header,main,footer{width:min(1080px,calc(100% - 36px));margin:auto;position:relative}header{height:108px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;color:var(--text);text-decoration:none;font-size:12px;letter-spacing:1.5px}.brand small{display:block;color:var(--muted);font-size:7px;margin-top:4px}.mark{border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:7px;font-weight:900}.mark span{color:var(--blue)}.right{display:flex;gap:12px;align-items:center}.online,.chips span{border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:7px 10px;font-size:8px;letter-spacing:1px;color:var(--muted)}.online{color:#80d7ae}#theme{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;width:40px;height:40px}.hero{padding:55px 100px 70px}.eyebrow,.label{font-size:10px;letter-spacing:2px;color:#8aa9c5;font-weight:800}.hero h1{font-size:70px;line-height:.98;margin:28px 0 22px;letter-spacing:-4px}.hero h1 em{font-style:normal;color:var(--blue)}.hero p{color:var(--muted);line-height:2;max-width:600px}.chips{display:flex;gap:8px;margin-top:26px}.step{display:grid;grid-template-columns:82px 1fr;border:1px solid var(--line);background:rgba(13,21,29,.8);border-radius:20px;margin-bottom:20px;overflow:hidden}.num{border-right:1px solid var(--line);padding:34px;color:#667b8d;font-size:11px}.content{padding:34px}.content h2{margin:10px 0 24px;font-size:20px}.row{display:flex;gap:12px}input[type=url],select{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:16px;font-size:15px;outline:none}input:focus,select:focus{border-color:var(--blue)}button{cursor:pointer}.primary,#download,#copy{border:0;border-radius:12px;padding:0 24px;font-weight:800;white-space:nowrap}.primary{background:#f6f8fa;color:#10151b}.hint,.error{font-size:11px;color:var(--muted)}.error{color:#ff6b6b}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.controls label{font-size:11px;color:var(--muted);display:grid;gap:9px}.controls select{padding:12px}.controls input[type=color]{width:100%;height:45px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:5px}.export{display:flex;gap:35px;align-items:center}.preview{width:280px;height:280px;background:#fff;border-radius:18px;display:grid;place-items:center;padding:18px;position:relative}#qrcode canvas{max-width:100%;height:auto!important}#placeholder{text-align:center;color:#7b8994;font-size:12px;line-height:1.8}.actions{display:grid;gap:10px;min-width:220px}.actions button{height:48px;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:11px;font-weight:700}.actions button:disabled{opacity:.35;cursor:not-allowed}#platform{font-size:9px;color:var(--muted);letter-spacing:1.5px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:35px 0 55px;color:var(--muted);font-size:10px;margin-top:55px}@media(max-width:700px){header{height:85px}.online{display:none}.hero{padding:45px 18px}.hero h1{font-size:50px}.step{grid-template-columns:48px 1fr}.num{padding:25px 14px}.content{padding:25px 18px}.row,.export{flex-direction:column}.primary{height:52px}.controls{grid-template-columns:1fr 1fr}.preview{width:100%;height:auto;aspect-ratio:1}.actions{width:100%}}
/* brand-v1-preview-fix */
#qrcode{width:100%!important;height:100%!important;display:grid!important;place-items:center!important;overflow:hidden}
#qrcode canvas,#qrcode img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain}