:root{
  --bg:#f7fbff; --panel:#ffffff; --ink:#0b1220; --muted:#6b7280; --line:#e7eaee;
  --accent:#0ea5e9; --accent2:#ff6a00;
  --radius:18px; --gap:16px;
  --ok:#22c55e; --bad:#ef4444;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;-webkit-font-smoothing:antialiased;}
.container{max-width:920px;margin:24px auto;padding:0 12px}

.site-header h1{font-size:clamp(22px,3vw,34px);margin-bottom:4px}
.lead{color:var(--muted)}
.section-title{font-size:20px;margin:14px 0 6px}

/* ONE-COLUMN LIST */
.grid{display:flex;flex-direction:column;gap:18px}

/* Card */
.card{
  background:var(--panel);border-radius:var(--radius);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  padding:16px;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.card h2{font-size:18px;margin-bottom:2px}

/* Supported / Not supported row */
.support-line{display:flex;align-items:center;gap:6px;font-size:14px}
.support-line span.tick{color:var(--ok)}
.support-line span.cross{color:var(--bad)}
.support-line .whyBtn{margin-left:8px}

/* Toolbar (all buttons one line, wraps if needed) */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
button{
  border:0;border-radius:12px;padding:10px 14px;cursor:pointer;
  font-weight:600;font-size:14px;background:var(--accent);color:#fff;
}
button.secondary{background:var(--accent2)}
button.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
button.small{padding:6px 10px;border-radius:10px;font-size:12px}
button[disabled]{opacity:.4;cursor:not-allowed}
.snippet-toggle{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}

/* Output + snippets */
pre{background:#f3f5f9;padding:8px;border-radius:10px;border:1px solid var(--line);font-size:12px}
pre.kv{display:block;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.snippet-wrap pre{display:none}

/* Modal */
.modal.hidden{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.modal-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.95);backdrop-filter:blur(10px);padding:20px;border-radius:18px;max-width:400px;width:90%;box-shadow:0 8px 24px rgba(0,0,0,.2);}
.modal-dialog h3{margin-bottom:8px}
.modal-dialog button{margin-top:10px;width:100%}

/* Media constraints (camera / screen capture) */
.media-frame{width:100%;max-width:100%;height:300px;background:#000;border-radius:10px}
.media-output img,.media-output canvas,.media-output video{max-width:100%;width:100%;height:auto;border-radius:10px}

/* Badges / errors */
.badge{display:inline-block;font-size:12px;background:#e6f6ff;color:#065986;padding:2px 8px;border-radius:999px}
.error{color:#b91c1c}

/* Safari tips banner (kept) */
.safari-banner{background:#fff7ed;border:1px solid #f5d0a7;color:#7c2d12;border-radius:14px;padding:10px 12px;margin-bottom:12px}
.safari-banner-inner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}

/* === UpDuck: per-card Support bar with browser icons === */
.support-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin:.35rem 0 .65rem 0;align-items:center}
.support-bar .brow{display:flex;align-items:center;gap:.35rem;background:#f8fafc;border:1px solid #e7eaee;border-radius:999px;padding:.25rem .5rem}
.support-bar .brow img{width:18px;height:18px;display:block}
.support-bar .ok{color:#16a34a}   /* green */
.support-bar .no{color:#dc2626}   /* red */
.support-bar .ok::before{content:"✔";margin-right:.25rem}
.support-bar .no::before{content:"✖";margin-right:.25rem}

/* One column list always (drop the old supported/unsupported columns) */
.cards.onecol{display:flex;flex-direction:column;gap:1rem}

/* === UpDuck: per-card support bar (icons + ticks/crosses) === */
.support-row{display:flex;align-items:center;gap:.5rem;margin:.35rem 0 .5rem}
.support-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.support-bar .brow{display:flex;align-items:center;gap:.35rem;background:#f8fafc;border:1px solid #e7eaee;border-radius:999px;padding:.25rem .5rem}
.support-bar .brow img{width:18px;height:18px;display:block}
.support-bar .ok{color:#16a34a}   /* green */
.support-bar .no{color:#dc2626}   /* red */
.support-bar .ok::before{content:"✔";margin-right:.25rem}
.support-bar .no::before{content:"✖";margin-right:.25rem}

.snippet-wrap .example{margin-top:.5rem;padding:.5rem .75rem;border:1px dashed #e7eaee;border-radius:12px;background:#f8fafc;color:#0f172a}