/* Mascot slot + XRPLOL-brand bubble skin (opt-in: add class "m16-bubble" to the bubble). Fonts are local (CSP font-src 'self'). */
@font-face{font-family:"Bungee";src:url(fonts/Bungee-Regular.subset.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Sora";src:url(fonts/Sora-Variable.subset.woff2) format("woff2");font-weight:100 800;font-display:swap}
.mascot-slot canvas,.mascot-slot video,.mascot-slot img{width:100%;height:auto;aspect-ratio:1/2;object-fit:contain;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.m16-title{font-family:"Bungee",system-ui,sans-serif;letter-spacing:.02em;color:#c8ff6a;text-shadow:0 0 12px rgba(124,255,74,.45)}
.bubble.m16-bubble{font-family:"Sora",system-ui,sans-serif;font-weight:600;background:#07140c;color:#eef6e8;border:2px solid #c8ff6a;box-shadow:0 0 14px rgba(124,255,74,.35)}
.bubble.m16-bubble::before{border-right-color:#c8ff6a;left:-11px}
.bubble.m16-bubble[data-tone=wait]{border-color:#c084fc;box-shadow:0 0 14px rgba(192,132,252,.35)}.bubble.m16-bubble[data-tone=wait]::before{border-right-color:#c084fc}
.bubble.m16-bubble[data-tone=done]{background:#0c2216;border-color:#f4c14a;color:#fff6dc}.bubble.m16-bubble[data-tone=done]::before{border-right-color:#f4c14a}
.bubble.m16-bubble[data-tone=error]{background:#2a0d0b;color:#ffd9d4;border-color:#ff7a7a}.bubble.m16-bubble[data-tone=error]::before{border-right-color:#ff7a7a}
.m16-demo-controls{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.m16-demo-controls button{min-height:36px;padding:6px 12px;font:600 14px "Sora",system-ui,sans-serif}
.m16-demo-controls button[aria-pressed=true]{outline:2px solid #c8ff6a}
.m16-note{color:var(--muted);font:13px/1.45 "Sora",system-ui,sans-serif}