/* base comum das demonstrações de ideias (Sapia Sites) */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap");
:root { --ink: #0b0c10; --paper: #f3f1ec; --dim: rgba(243,241,236,.66); --gold: #ffd23f; --red: #F2502A; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--ink); color: var(--paper); font-family: "Inter Tight", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img, video, canvas { display: block; }
.demo-bar { position: fixed; z-index: 100; left: 12px; right: 12px; top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.demo-bar a, .demo-bar span { pointer-events: auto; background: rgba(11,12,16,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--paper); border: 1px solid rgba(243,241,236,.16); border-radius: 99px; padding: 9px 15px; font-size: 13px; font-weight: 600; text-decoration: none; }
.demo-bar span { color: var(--dim); font-weight: 500; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-note { position: fixed; z-index: 100; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(11,12,16,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(243,241,236,.16); color: var(--dim); font-size: 12px; padding: 8px 14px; border-radius: 99px; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
.hint { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }