.skip-link { position:absolute;left:16px;top:-100px;z-index:50;background:var(--cream);color:var(--ink);padding:10px; }
.skip-link:focus { top:8px; }
.hero { padding:36px 0 24px; }.eyebrow { color:var(--gold);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px; }
h1 { font-size:clamp(2rem,5vw,3.25rem); }.subtitle { margin-top:10px; }
.qr-workspace { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start; }
.qr-editor,.qr-result { min-width:0; }.qr-editor h2,.qr-result h2 { margin-bottom:20px; }
#qr-form label { display:block;font-size:14px;font-weight:600;margin:15px 0 6px; }#qr-form select,#qr-form input:not([type="checkbox"]),#content { width:100%;min-width:0; }
#qr-form select,#qr-form input[type="text"],#qr-form input[type="password"] { min-height:44px;font-size:16px; }
#content { resize:vertical;font-size:16px; }#qr-form input:not([type="checkbox"]) { background:var(--bg);color:var(--cream);border:1px solid var(--border);border-radius:5px;padding:10px;font:inherit; }
#wifi-fields { border:0;padding:0;margin:18px 0; }#wifi-fields legend { color:var(--gold);font-weight:600; }
#qr-form .inline-choice { display:flex;gap:10px;align-items:center;min-height:44px;font-size:14px;font-weight:400; }.qr-settings { margin:20px 0; }.qr-settings summary { cursor:pointer;color:var(--gold);min-height:44px;padding:10px 0;font-size:14px; }.settings-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.qr-preview { background:#fff;color:#43504c;min-height:270px;border-radius:8px;display:grid;place-items:center;padding:12px;text-align:center; }
.qr-preview img { display:block;max-width:100%;width:340px;height:auto;image-rendering:pixelated; }.qr-preview [hidden] { display:none; }
.qr-result .actions { margin:18px 0; }#summary { overflow-wrap:anywhere; }#encoded { white-space:pre-wrap;overflow-wrap:anywhere;font-size:.85rem;max-height:180px;overflow:auto; }.qr-about p { color:var(--muted); }
@media(max-width:760px){.qr-workspace { grid-template-columns:minmax(0,1fr); }.qr-preview img { width:300px; }}
@media print { body>*:not(main),main>.hero,.qr-editor,.qr-about,noscript,.no-print { display:none!important; }.qr-workspace { display:block; }.qr-result { display:block!important;background:white;color:black;border:0; }#preview { min-height:0;padding:0; }#preview img { width:70mm; }#summary { color:black; }.qr-result h2 { display:none; } }

/* Keep the editor, chosen format and primary action compact. */
@media screen {
  .qr-editor, .qr-result { padding:14px; }
  .qr-editor h2, .qr-result h2 { margin-bottom:12px; }
  .qr-modes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
  #qr-form .qr-modes label { margin:0 0 4px; }
  #qr-form #content-fields > label { margin:10px 0 4px; }
  #qr-form .hint { margin:6px 0 10px; }
  .qr-editor #content { min-height:10rem; }
  .qr-editor:has(#kind option[value="text"]:checked) #content { min-height:12rem; }
  #qr-form > .actions { margin-top:12px; gap:6px; }
  #qr-form > .qr-settings { margin:10px 0 0; border-top:1px solid var(--border); }
  .qr-preview:has(#qr-image[hidden]) { min-height:120px; background:var(--bg); color:var(--muted); border:1px dashed var(--border); }
  .qr-result .actions { margin:12px 0; }
  .qr-result #summary:empty { display:none; }
}
@media screen and (max-width:760px) {
  .qr-editor #content { min-height:8rem; }
}

/* Keep all Wi-Fi fields and Create within a narrow viewport. */
.generator-page #wifi-fields{margin:10px 0}
.generator-page #wifi-fields > label:not(.inline-choice){margin:8px 0 4px}