:root {
  color-scheme: dark;
  font-family: "Instrument Serif", Georgia, serif;
  background: #05070b;
  color: #0d1627;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
.scene {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 32px 24px;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 90% 100% at 88% 90%,
      rgba(17, 29, 49, 0.36),
      transparent 76%
    ),
    radial-gradient(
      ellipse 65% 75% at 10% 8%,
      rgba(16, 20, 29, 0.16),
      transparent 75%
    ),
    linear-gradient(135deg, #050608 0%, #05070b 56%, #060910 100%);
}
.grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h180v180H0z' fill='%23fff' filter='url(%23grain)' opacity='.55'/%3E%3C/svg%3E");
}
h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  transform: translate(-0.12em, -3svh);
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(76px, min(11vw, 20svh), 176px);
  line-height: 0.84;
  letter-spacing: -0.047em;
  white-space: nowrap;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 span {
  display: block;
}
h1 span:last-child {
  margin-left: 0.3em;
  font-style: italic;
}
::selection {
  background: #263349;
  color: #f2f3f5;
}