*{box-sizing:border-box}:root{--bg:#f6f7fb;--panel:#fff;--text:#1b1f2a;--muted:#6b7280;--accent:#2563eb;--accent-hover:#1d4ed8;--border:#e5e7eb;--shadow:0 6px 24px rgba(0,0,0,.06)}body,html{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,Segoe UI,Roboto,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}main{max-width:1080px;margin:0 auto;padding:32px 20px 80px}.hero{text-align:center;margin-bottom:32px}.hero h1{font-size:clamp(24px,4vw,36px);margin:0 0 8px;letter-spacing:.02em}.hero p{color:var(--muted);margin:0 auto;max-width:600px}.grid{display:grid;grid-template-columns:1fr;grid-gap:20px;gap:20px}@media (min-width:880px){.grid{grid-template-columns:1fr 1fr;align-items:start}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow)}.panel h2{font-size:16px;margin:0 0 16px;color:var(--text)}.panel h2:not(:first-child){margin-top:24px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field>span{font-size:13px;color:var(--muted);font-weight:500}.field .value{font-size:12px;color:var(--accent);font-weight:600}input[type=range]{width:100%}.warning{background:#fef3c7;border:1px solid #fde68a;color:#78350f;padding:10px 14px;border-radius:10px;font-size:13px;margin-top:12px}input[type=number],input[type=url],select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:15px;background:#fff;font-family:inherit;color:var(--text)}input[type=number]:focus,input[type=url]:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}input[type=color]{width:64px;height:40px;padding:0;border:1px solid var(--border);border-radius:10px;background:transparent;cursor:pointer}input[type=file]{font-size:14px}.row{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;gap:16px}.hint{font-size:13px;color:var(--muted);margin:8px 0 0}.preview{display:flex;flex-direction:column;align-items:center}.preview h2{align-self:flex-start}.qr-area{display:flex;align-items:center;justify-content:center;width:100%;min-height:280px;padding:16px;background:#fafafa;border:1px dashed var(--border);border-radius:12px;margin-bottom:16px}.qr-area canvas,.qr-area>canvas,.qr-area>svg{max-width:100%;height:auto!important}.downloads{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:10px 18px;border-radius:10px;background:var(--accent);color:#fff;transition:background .15s ease}button:hover:not(:disabled){background:var(--accent-hover)}button:disabled{opacity:.5;cursor:not-allowed}button.link{background:transparent;color:var(--accent);padding:4px 0;text-align:left;font-size:13px;font-weight:500;align-self:flex-start}button.link:hover:not(:disabled){background:transparent;text-decoration:underline}.footer{text-align:center;margin-top:40px;color:var(--muted)}