:root {
  --bg: #0d0b14;
  --bg-2: #171323;
  --ink: #f5efe4;
  --muted: #b2a7c9;
  --accent: #d7b46a;
  --accent-2: #7c6fa8;
  --accent-border-strong: rgba(215, 180, 106, 0.6);
  --accent-border-soft: rgba(215, 180, 106, 0.35);
  --accent-border-faint: rgba(215, 180, 106, 0.18);
  --accent-shadow-soft: rgba(215, 180, 106, 0.25);
  --accent-shadow-strong: rgba(215, 180, 106, 0.5);
  --shadow: rgba(6, 4, 12, 0.6);
  --radius: 1.125rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: rgba(215, 180, 106, 0.35);
  color: #1b1224;
}

::-moz-selection {
  background: rgba(215, 180, 106, 0.35);
  color: #1b1224;
}

html {
  background: var(--bg);
  width: 100%;
  overflow-x: hidden;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body {
  font-family: "Georgia", "Times New Roman", serif;
  color: var(--ink);
  background: radial-gradient(75rem 50rem at 20% 10%, #221a34, #130f1f 55%, #0a0812 100%);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  animation: page-fade 0.6s ease-out;
  touch-action: pan-y;
}

.page {
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  touch-action: pan-y;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0rem);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.orb-1 {
  width: 22.5rem;
  height: 22.5rem;
  background: radial-gradient(circle, rgba(124, 111, 168, 0.5), transparent 70%);
  top: -7.5rem;
  left: -5rem;
  animation: orb-float 12s ease-in-out infinite;
}

.orb-2 {
  width: 26.25rem;
  height: 26.25rem;
  background: radial-gradient(circle, rgba(215, 180, 106, 0.35), transparent 70%);
  bottom: -10rem;
  right: -7.5rem;
  animation: orb-float 14s ease-in-out infinite reverse;
}

.noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cdefs%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0.08'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0.02'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.12'/%3E%3Cpath d='M12 36h2v2h-2zM58 12h2v2h-2zM108 30h2v2h-2zM30 96h2v2h-2zM100 108h2v2h-2zM70 70h2v2h-2z' fill='url(%23g)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}