:root {
  color-scheme: light;
  --paper: #e9ece3;
  --paper-warm: #f3f2ea;
  --ink: #333;
  --ink-soft: rgba(23, 32, 29, 0.76);
  --rule: rgba(60, 112, 99, 0.34);
  --rule-soft: rgba(60, 112, 99, 0.18);
  --perf: rgba(30, 32, 34, 0.9);
  --feed-y: 0px;
  --print-y: 0px;
  --page-height: calc(100svh + 1px);
  --type: "IBM Plex Mono", "Courier New", monospace;
  --line-height: clamp(1.9rem, 3vw, 2.45rem);
  --paper-row: var(--line-height);
  --paper-repeat: calc(var(--paper-row) * 2);
  --hole-repeat: var(--paper-repeat);
  --hole-x: calc(100% - var(--feed-margin) * 0.36);
  --hole-y: calc(var(--paper-row) * 0.5);
  --hole-core: calc(var(--paper-row) * 0.28);
  --hole-shadow: calc(var(--paper-row) * 0.36);
  --hole-rim: calc(var(--paper-row) * 0.4);
  --side-gutter: clamp(1.2rem, 5vw, 5rem);
  --feed-margin: clamp(2.4rem, 6vw, 5.8rem);
}

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

html {
  width: 100%;
  max-width: 100vw;
  min-height: 100%;
  background: #d6d9cf;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

body {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: var(--page-height);
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.5), transparent 28rem),
    linear-gradient(90deg, #d8dbd0 0, var(--paper) 8%, var(--paper-warm) 84%, #d6d7cc 100%);
  font-family: var(--type);
  overflow-x: hidden;
  overflow-y: auto;
}

body::before,
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--page-height, 100svh);
  pointer-events: none;
}

body::before {
  z-index: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--rule-soft) 0,
      var(--rule-soft) var(--paper-row),
      transparent var(--paper-row),
      transparent var(--paper-repeat)
    ),
    linear-gradient(
      115deg,
      rgba(60, 112, 99, 0.16) 0,
      rgba(60, 112, 99, 0.16) 1px,
      transparent 1px,
      transparent 4px
    );
  background-repeat: repeat-y, repeat;
  background-size: 100% var(--paper-repeat), calc(var(--paper-row) * 0.16) calc(var(--paper-row) * 0.16);
  background-position:
    0 var(--feed-y),
    0 var(--feed-y);
  clip-path: inset(0 var(--feed-margin) 0 0);
  opacity: 0.78;
}

body::after {
  z-index: 1;
  background:
    radial-gradient(
      circle at var(--hole-x) var(--hole-y),
      rgba(255, 255, 255, 0.96) 0 var(--hole-core),
      rgba(31, 36, 35, 0.38) calc(var(--hole-core) + 0.03rem) var(--hole-shadow),
      rgba(255, 255, 255, 0.72) calc(var(--hole-shadow) + 0.03rem) var(--hole-rim),
      transparent calc(var(--hole-rim) + 0.04rem)
    ),
    linear-gradient(90deg, transparent calc(100% - var(--feed-margin)), rgba(54, 75, 77, 0.12) calc(100% - var(--feed-margin)), transparent 100%);
  background-repeat: repeat-y, no-repeat;
  background-size: 100% var(--hole-repeat), 100% 100%;
  background-position:
    0 var(--feed-y),
    0 0;
  opacity: 0.9;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 4;
  padding: 0.5rem 0.75rem;
  color: var(--paper);
  background: var(--ink);
  border-radius: 4px;
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.screen {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100vw;
  min-height: var(--page-height);
  padding: clamp(1rem, 4vw, 3rem) var(--side-gutter);
  overflow-x: hidden;
}

.printer-copy {
  position: absolute;
  top: 0;
  left: var(--side-gutter);
  right: calc(var(--feed-margin) + clamp(1rem, 4vw, 3rem));
  width: auto;
  min-width: 0;
  max-width: calc(100% - var(--side-gutter) - var(--feed-margin) - clamp(1rem, 4vw, 3rem));
  overflow: hidden;
  transform: translate3d(0, calc(var(--print-y) - var(--line-height) / 3), 0) rotate(-0.5deg);
  transform-origin: left top;
  will-change: transform;
  contain: layout paint;
}

.printed-line {
  position: absolute;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  min-height: var(--line-height);
  margin: 0;
  color: rgba(51, 51, 51, 0.7);
  font-family: var(--type);
  font-size: clamp(1.15rem, 1.8vw, 1.48rem);
  font-weight: 500;
  line-height: var(--line-height);
  letter-spacing: 0;
  text-shadow:
    0.02em 0.015em 0 rgba(51, 51, 51, 0.11),
    -0.01em 0 0.03em rgba(51, 51, 51, 0.15);
  white-space: pre-wrap;
}

.printed-word {
  display: inline-block;
}

.printed-line.ascii-row {
  min-height: 0;
  line-height: 1;
  white-space: pre;
}

.printed-line.spacer {
  min-height: var(--line-height);
}

.printed-line a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(23, 32, 29, 0.45);
}

.printed-line a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.printer-cover {
  position: fixed;
  bottom: -0.75rem;
  right: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: clamp(2.6rem, 7vh, 5rem);
  pointer-events: none;
  overflow: hidden;
  transform: rotate(-0.18deg);
  transform-origin: center bottom;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 22%),
    linear-gradient(180deg, rgba(74, 75, 75, 0.9) 0%, rgba(46, 48, 49, 0.88) 42%, rgba(23, 25, 26, 0.94) 100%);
  backdrop-filter: blur(1.5px);
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    0 -1.2rem 2.6rem rgba(0, 0, 0, 0.42),
    0 -0.25rem 0.65rem rgba(0, 0, 0, 0.38),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.16),
    inset 0 -0.7rem 1.2rem rgba(0, 0, 0, 0.38);
}

.print-head {
  position: absolute;
  top: 0.22rem;
  left: var(--head-x, 8%);
  width: clamp(2rem, 5vw, 4.8rem);
  height: calc(100% - 0.45rem);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.09)),
    linear-gradient(180deg, rgba(62, 65, 66, 0.96), rgba(24, 26, 27, 0.96));
  box-shadow:
    0 0.25rem 0.8rem rgba(0, 0, 0, 0.48),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.18),
    inset 0 -0.25rem 0.5rem rgba(0, 0, 0, 0.34);
  transform: translateX(-50%);
  transition: left 40ms linear;
}

.print-head::after {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 50%;
  width: 0.18rem;
  background: rgba(8, 9, 10, 0.7);
  box-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
}

.printer-cover::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.45rem;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18) 18%, rgba(255, 255, 255, 0.08) 52%, transparent 88%);
  opacity: 0.8;
}

.printer-cover::after {
  content: "";
  position: absolute;
  top: -0.18rem;
  right: 0;
  left: 0;
  height: 0.18rem;
  background: rgba(18, 19, 20, 0.65);
  box-shadow: 0 -0.08rem 0.18rem rgba(0, 0, 0, 0.45);
}

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

.js .print-source {
  display: none;
}

.no-js .printer-copy {
  display: none;
}

.no-js .print-source {
  position: relative;
  z-index: 2;
  max-width: 68ch;
  margin-top: 20vh;
}

.no-js .print-source pre,
.no-js .print-source p {
  margin: 0 0 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .printer-copy {
    transform: none;
  }
}

@media (max-width: 760px) {
  :root {
    --feed-margin: 3rem;
    --side-gutter: 0.65rem;
    --hole-x: calc(100% - var(--hole-rim) * 0.65);
    --line-height: 1.35rem;
  }

  html {
    scrollbar-gutter: auto;
  }

  body {
    min-width: 0;
    overflow-x: hidden;
  }

  .screen {
    padding-right: 0;
    padding-left: 0;
  }

  .printer-copy {
    right: auto;
    width: calc(100% - var(--side-gutter) - var(--feed-margin) - 0.9rem);
    max-width: calc(100% - var(--side-gutter) - var(--feed-margin) - 0.9rem);
  }

  .printed-line {
    font-size: 0.72rem;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .printed-line.ascii-row {
    font-size: 0.612rem;
    overflow-wrap: normal;
    word-break: normal;
  }

  .print-head {
    width: clamp(1.6rem, 12vw, 3rem);
  }
}