html,body { height:100%; margin:0; font:13px/1.3 system-ui; background:#f3ecdc; color:#2a2118; }
body { display:flex; flex-direction:column; }
nav { display:flex; flex-wrap:wrap; gap:4px 6px; padding:8px 10px 4px; align-items:center; }
nav .grp { font:600 11px system-ui; text-transform:uppercase; letter-spacing:.06em; color:#7a6c58; margin:0 2px 0 8px; }
nav button { font:inherit; padding:4px 9px; border:1px solid #d9ccb0; border-radius:999px; background:#fbf7ec; color:inherit; cursor:pointer; }
nav button.on { background:#1f3a44; color:#fff; border-color:#1f3a44; }
.bar-info { padding:0 12px 6px; display:flex; gap:10px; align-items:baseline; }
.bar-info em { margin-left:auto; color:#7a6c58; font-style:normal; }
iframe { flex:1; width:100%; border:0; }
.bar-info button { font:inherit; padding:3px 10px; border:1px solid #1f3a44; border-radius:6px; background:#fbf7ec; color:#1f3a44; cursor:pointer; } #use { background:#1f3a44; color:#fff; }