/* Shared base for the HTML rebuilds of Figma screens. Each screen is laid out at its Figma frame size. */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("fonts/Quicksand-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #ecebe7; overflow-x: hidden; }
body { font-family: "Geist", system-ui, sans-serif; color: #000; -webkit-font-smoothing: antialiased; }
p { margin: 0; }
button { font: inherit; border: 0; padding: 0; background: none; color: inherit; }
img { display: block; }
.abs { position: absolute; }
.screen { position: relative; overflow: hidden; margin: 0 auto; }
/* Frames smaller than the viewer are shown centered on a soft backdrop. */
body.small { background: #ecebe7; min-height: 100vh; display: grid; place-items: center; padding: 40px; }
body.small .screen { box-shadow: 0 10px 40px rgba(0,0,0,.12); }

/* Prototype click areas (hot.js) */
.hot { position: absolute; z-index: 50; border-radius: 10px; cursor: pointer; transition: box-shadow .15s; }
.hot:hover { box-shadow: 0 0 0 2px rgba(37, 99, 235, .35); }
.hot:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }