:root{
  color-scheme: light dark;
  --paper: #f7f6f3;
  --ink: #14130f;
}
@media (prefers-color-scheme: dark){
  :root{ --paper: #0e0d0b; --ink: #f2f0ea; }
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  min-height:100svh;
  display:grid;
  place-items:center;
  background:var(--paper);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 1.5rem;
  overflow: hidden;
}
h1{
  font-size: clamp(4rem, 22vw, 13rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.055em;
  text-indent: -0.055em;   /* optically re-centre the last glyph's side bearing */
  animation: settle 900ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes settle{
  from{ opacity:0; transform: translateY(0.06em) scale(.985); }
  to  { opacity:1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  h1{ animation: none; }
}
::selection{ background: var(--ink); color: var(--paper); }