/* Roger mockups v3 — the quiet frame around the devices. */
:root { --vb: #E4E4EA; --vink: #1c1c1e; --vsub: #8a8a8e; --vcard: #fff; --vln: rgba(60,60,67,.18); }
html.dark { --vb: #0c0c0d; --vink: #f2f2f7; --vsub: #8e8e93; --vcard: #2c2c2e; --vln: rgba(255,255,255,.14); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--vb); color: var(--vink); font-family: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, select { font: inherit; color: inherit; }
.vbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.vbrand { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.vbrand small { color: var(--vsub); font-size: 12px; }
.vlogo { width: 24px; height: 24px; border-radius: 7px; background: #0A84FF; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--vln); }
.seg button { border: 0; background: none; padding: 5px 13px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--vsub); cursor: pointer; }
.seg button.on { background: var(--vcard); color: var(--vink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.vtools { display: flex; gap: 6px; }
.vicon { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--vln); color: var(--vsub); display: grid; place-items: center; cursor: pointer; font-size: 14px; font-weight: 600; }
.vicon .ic { width: 16px; height: 16px; }
.stage { padding: 0 12px 24px; }
.label { flex-wrap: nowrap !important; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 12px; font-size: 11px; color: var(--vsub); flex-wrap: wrap; }
.label code { font: 500 11px ui-monospace, "SF Mono", Menlo, monospace; color: var(--vink); opacity: .7; letter-spacing: .02em; }
.lbl-btn, .label select { border: 0; background: none; color: var(--vsub); font-size: 11px; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
.lbl-btn:hover, .label select:hover { background: var(--vln); }
.label select { max-width: 150px; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--vln); }
.device-host { margin: 0 auto; }
#gallery .gal-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; color: var(--vsub); font-size: 12px; }
.gal-grid { display: flex; flex-wrap: wrap; gap: 28px 24px; justify-content: center; }
.gal-item { margin: 0; }
.gal-lbl { display: flex; align-items: baseline; gap: 8px; border: 0; background: none; padding: 0 2px 8px; font-size: 11px; color: var(--vsub); cursor: pointer; }
.gal-lbl b { font: 500 11px ui-monospace, Menlo, monospace; color: var(--vink); opacity: .7; }
.gal-dev { position: relative; }
.gal-dev > div { position: absolute; top: 0; left: 0; }
.help { border: 0; border-radius: 18px; padding: 24px 24px 18px; max-width: 440px; width: calc(100% - 32px); background: var(--vcard); color: var(--vink); }
.help::backdrop { background: rgba(0,0,0,.4); }
.help h2 { margin: 0 0 8px; font-size: 20px; } .help h3 { margin: 16px 0 4px; font-size: 14px; color: var(--vsub); }
.help p, .help li { font-size: 14px; line-height: 1.45; } .help ul { padding-left: 18px; margin: 0; } .help .muted { color: var(--vsub); }
.help code { font: 12px ui-monospace, Menlo, monospace; background: var(--vln); padding: 1px 5px; border-radius: 5px; }
.help-x { position: absolute; top: 12px; right: 12px; border: 0; background: var(--vln); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }
html.narrow .vbrand small, html.narrow .vbrand b { display: none; }
html.narrow .vbar { padding: 8px 12px; } html.narrow .stage { padding: 0 0 0; }
html.narrow .label { margin-bottom: 4px; }
html.narrow .seg button { padding: 5px 10px; }