@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root { color-scheme: light; background: #fafbf7; color: #161c20; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
.scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background-color: #fafbf7;
  background-image: radial-gradient(circle, rgba(94, 113, 99, .105) .5px, transparent .65px);
  background-size: clamp(2.5px, .6944vw, 5px) clamp(2.5px, .6944vw, 5px);
}
.cloth { position: absolute; inset: 0; width: 100%; height: 100%; }
h1 {
  position: absolute;
  left: 50%; top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(42px, 12vw, 92px);
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
  z-index: 1;
}
.paper-fallback {
  position: absolute;
  left: 50%; top: 50%;
  width: min(86vw, 750px);
  height: min(100vw, 750px);
  transform: translate(-50%, -50%) rotate(-28deg);
  border-radius: 72% 18% 65% 24%;
  background: linear-gradient(135deg, transparent 10%, #98c3ef 35%, #d5e5ef 48%, #7aafea 65%, transparent 90%);
  opacity: .75;
}
.webgl .paper-fallback { display: none; }