:root {
  --brand: #1578e5;
  --ink: #ffffff;
  --ink-dark: #102a52;
  --shade: rgba(0, 0, 0, 0.18);
  --shade-strong: rgba(0, 0, 0, 0.42);
  --paper-cream: #fbeec3;
  --paper-orange: #ff7a1a;
  --paper-yellow: #ffd23a;
  --paper-deep: #0b66cf;
  --paper-white: #fff7e2;
  --paper-page: #f5efe1;

  --grain-fine: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch' seed='4'/><feComponentTransfer><feFuncA type='linear' slope='1.6' intercept='-0.25'/></feComponentTransfer><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");
  --grain-coarse: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch' seed='11'/><feComponentTransfer><feFuncA type='linear' slope='1.3' intercept='-0.2'/></feComponentTransfer><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='480' height='480' filter='url(%23m)'/></svg>");
  --page-grain-fine: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch' seed='4'/><feComponentTransfer><feFuncA type='linear' slope='1.15' intercept='-0.18'/></feComponentTransfer><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");

  --bg-top: #2a8af0;
  --bg-mid: #1578e5;
  --bg-deep: #0b66cf;
}

@property --bg-top { syntax: '<color>'; initial-value: #2a8af0; inherits: true; }
@property --bg-mid { syntax: '<color>'; initial-value: #1578e5; inherits: true; }
@property --bg-deep { syntax: '<color>'; initial-value: #0b66cf; inherits: true; }

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  min-height: 100%;
  margin: 0;
  background: var(--bg-deep);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

body.sr-blue-page {
  color: var(--ink);
  background-color: var(--brand);
  background-image:
    var(--page-grain-fine),
    radial-gradient(ellipse at 50% -10%, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-deep) 100%);
  background-size: 320px 320px, cover;
  background-repeat: repeat, no-repeat;
  background-attachment: scroll;
  background-blend-mode: overlay, normal;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  animation: hueDrift 90s ease-in-out infinite;
}

body.sr-paper-page {
  color: #1a1a1a;
  background-color: var(--paper-page);
}

@keyframes hueDrift {
  0%, 100% { --bg-top: #2a8af0; --bg-mid: #1578e5; --bg-deep: #0b66cf; }
  25% { --bg-top: #7a6ad8; --bg-mid: #5a3fb8; --bg-deep: #2a1a6a; }
  50% { --bg-top: #d86a8a; --bg-mid: #b8385f; --bg-deep: #5a1a3a; }
  75% { --bg-top: #3aa07a; --bg-mid: #1f7a5e; --bg-deep: #0b4a3a; }
}

@media (prefers-reduced-motion: reduce) {
  body.sr-blue-page {
    animation: none;
  }
}

.paper {
  background-color: var(--paper-color, var(--paper-cream));
  background-image: var(--grain-fine), var(--grain-coarse);
  background-size: 320px 320px, 480px 480px;
  background-repeat: repeat, repeat;
  background-blend-mode: soft-light, soft-light;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--paper-yellow);
  outline-offset: 4px;
}

.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}