@layer components {
  /* La página es una hoja de cuaderno: la línea roja del margen ordena todo. */
  .page {
    position: relative;
    min-height: 100vh;
    padding: calc(var(--space) * 2) var(--space) calc(var(--space) * 3) calc(var(--margin-line) + var(--space));
  }

  .page::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 var(--margin-line);
    width: 2px;
    background: var(--margin-red);
    opacity: 0.7;
  }

  /* Recorte pegado con cinta: es lo único que rompe la retícula del papel. */
  .cutout {
    position: relative;
    background: var(--ink);
    box-shadow: 0 1px 0 rgba(30, 42, 74, 0.25), 0 14px 24px -14px rgba(30, 42, 74, 0.55);
  }

  .cutout::before,
  .cutout::after {
    content: "";
    position: absolute;
    top: -24px;
    width: 92px;
    height: 22px;
    background: var(--tape);
    z-index: 1;
  }

  .cutout::before { left: 18px; transform: rotate(-4deg); }
  .cutout::after { right: 18px; transform: rotate(3deg); }

  .button {
    display: inline-block;
    padding: 0.55em 1.1em;
    border: 2px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-weight: 700;
    text-decoration: none;
  }

  .button:hover { background: var(--margin-red); border-color: var(--margin-red); color: var(--paper); }

  .cover { width: 100%; height: auto; }
  .cover--pixel { image-rendering: pixelated; }
}

@layer components {
  .note-form { display: grid; gap: calc(var(--space) / 2); max-width: 28rem; padding: var(--space); }
  .note-form__label { font-size: var(--step-1); }
  .note-form__input {
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    padding: 0.5rem 0.75rem;
  }
  .note-form__input:focus { outline: 3px solid var(--margin-red); outline-offset: 2px; }
  .note-form__error { color: var(--margin-red); }
  .note-form__notice { color: var(--ink-soft); font-style: italic; }
  .play__main { grid-area: stage; }
  .play__comment { margin-top: var(--space); }
}