@font-face { font-family: 'Geist'; src: url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }
.dot  { font-family: 'Doto', 'Geist Mono', monospace; font-weight: 900; }

/* glyph.js surfaces */
.glyph { position: relative; overflow: hidden; }
.glyph-pre { position: absolute; inset: 0; margin: 0; line-height: 1; font-family: 'Geist Mono', monospace;
  white-space: pre; letter-spacing: 0; font-variant-ligatures: none; pointer-events: none; }
.glyph-cv  { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: none; }
.glyph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.glyph[data-mode="block"] .glyph-cv { display: block; }
.glyph[data-mode="block"] .glyph-pre,
.glyph[data-mode="full"] .glyph-pre,
.glyph[data-mode="text"] .glyph-pre { display: none; }
.glyph[data-mode="full"] .glyph-img { opacity: 1; }

/* annotation callouts used on mockup boards */
.note { position: absolute; z-index: 50; font: 500 11px/1.35 'Geist Mono', monospace; color: #fff;
  background: #ff3b00; padding: 6px 8px; max-width: 240px; letter-spacing: .01em; }
.note b { display: block; font-weight: 700; margin-bottom: 2px; }
@font-face { font-family: 'PP Editorial'; src: url('/assets/fonts/PPEditorialNew-UltralightItalic.otf'); font-style: italic; font-weight: 200; }
@font-face { font-family: 'PP Editorial'; src: url('/assets/fonts/PPEditorialNew-Ultralight.otf'); font-style: normal; font-weight: 200; }
@font-face { font-family: 'Doto'; src: url('/assets/fonts/doto-900-latin.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Reenie Beanie'; src: url('/assets/fonts/reenie-beanie-latin.woff2') format('woff2'); font-display: swap; }