/* Third scene only. Reference: jackiehu.design notebook mode, 1264.8px canvas.
   All positions share the notebook's horizontal centre; the approved desk and
   tidy scenes, their assets, and the rest of the page are intentionally untouched. */
html body #top#top#top.hero-scene-notebook {
  --notebook-unit: 1px;
}

html body #top#top#top.hero-scene-notebook .desk-collage {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  opacity: 1;
  z-index: auto;
}

html body #top#top#top.hero-scene-notebook :is(.desk-lamp, .desk-film, .desk-lighter, .desk-cream, .desk-cursor, .desk-folder, .desk-toolbar) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html body #top#top#top.hero-scene-notebook :is(.desk-note, .desk-paper, .desk-notebook, .desk-pen, .desk-coffee, .desk-record, .airdrop-card-live) {
  position: absolute;
  right: auto;
  bottom: auto;
  max-width: none;
  translate: none;
  rotate: none;
  scale: 1;
  opacity: 1;
  transform-origin: center;
  animation: none;
}

html body #top#top#top.hero-scene-notebook .desk-note {
  left: calc(50% - 312.4 * var(--notebook-unit));
  top: calc(147 * var(--notebook-unit));
  width: calc(144 * var(--notebook-unit));
  height: auto;
  transform: rotate(14deg);
  z-index: 2;
}

html body #top#top#top.hero-scene-notebook .desk-paper {
  left: calc(50% - 267.4 * var(--notebook-unit));
  top: calc(371.031 * var(--notebook-unit));
  width: calc(105 * var(--notebook-unit));
  height: auto;
  transform: none;
  z-index: 2;
}

html body #top#top#top.hero-scene-notebook .desk-notebook {
  left: 50%;
  top: calc(103 * var(--notebook-unit));
  width: calc(627 * var(--notebook-unit));
  height: auto;
  transform: translateX(-50%) rotate(-21deg);
  z-index: 5;
}

html body #top#top#top.hero-scene-notebook .desk-coffee {
  left: calc(50% + 243.4 * var(--notebook-unit));
  top: calc(471.163 * var(--notebook-unit));
  width: calc(196 * var(--notebook-unit));
  height: auto;
  transform: translateY(-50%) rotate(-46deg);
  z-index: 3;
}

html body #top#top#top.hero-scene-notebook .desk-pen {
  left: calc(50% + 194.5 * var(--notebook-unit));
  top: calc(60 * var(--notebook-unit));
  width: calc(74.9 * var(--notebook-unit));
  height: calc(254.975 * var(--notebook-unit));
  object-fit: cover;
  object-position: center;
  transform: rotate(6deg);
  z-index: 7;
}

html body #top#top#top.hero-scene-notebook .desk-record-stage {
  display: contents;
}

html body #top#top#top.hero-scene-notebook .desk-record {
  left: calc(50% + 180.4 * var(--notebook-unit));
  top: calc(123 * var(--notebook-unit));
  width: 240px;
  height: 320px;
  padding: 20px 18px 16px;
  border-radius: 17.67px;
  box-shadow: none;
  transform-origin: top left;
  /* Scale the entire existing player, including its typography, on small screens. */
  transform: scale(calc(var(--notebook-unit) / 1px)) translate(120px, 160px) rotate(17deg) translate(-120px, -160px);
  z-index: 1;
}

html body #top#top#top.hero-scene-notebook .desk-record-vinyl {
  width: 180px;
  height: 180px;
}

html body #top#top#top.hero-scene-notebook .airdrop-card-live {
  left: calc(50% - 339.15 * var(--notebook-unit));
  top: calc(506 * var(--notebook-unit));
  width: 156px;
  height: 165px;
  border-radius: 8.06px;
  box-shadow: 1.25px 1.15px 2px 1.25px rgba(130, 130, 130, .21);
  transform-origin: top left;
  transform: scale(calc(var(--notebook-unit) / 1px));
  z-index: 8;
}

html body #top#top#top.hero-scene-notebook .airdrop-heading { padding: 10px 6px 7px; }
html body #top#top#top.hero-scene-notebook .airdrop-heading strong { font-size: 10px; }
html body #top#top#top.hero-scene-notebook .airdrop-heading small { font-size: 8px; }
html body #top#top#top.hero-scene-notebook .airdrop-content { min-height: 0; font-size: 11px; padding: 6px; }
html body #top#top#top.hero-scene-notebook .airdrop-actions button { min-height: 25px; font-size: 10px; }

/* Extra ID specificity also supersedes the preview's historical inline rules. */
html body #top#top#top.hero-scene-notebook .hero-copy {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: calc(320.038 * var(--notebook-unit)) !important;
  width: 518.562px !important;
  height: 206.4px !important;
  text-align: center !important;
  transform: translate(-50%, -50%) scale(calc(var(--notebook-unit) / 1px)) !important;
  z-index: 12;
}

html body #top#top#top.hero-scene-notebook .hero-copy-text {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
  text-align: center !important;
  transform: none !important;
}

html body #top#top#top.hero-scene-notebook .hero-eyebrow {
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  margin: 0;
  font-size: 10px;
}

html body #top#top#top.hero-scene-notebook h1 {
  margin: 0;
  height: 102px;
  font-size: 85px;
  line-height: 102px;
  transform: none;
}

html body #top#top#top.hero-scene-notebook .hero-statement {
  height: 42px;
  gap: 0;
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 24px;
  transform: scale(1.1);
}

html body #top#top#top.hero-scene-notebook .hero-statement i { font-size: 12px; line-height: 18px; }
html body #top#top#top.hero-scene-notebook .hero-intro { margin: 12px auto 0; font-size: 16px; line-height: 19.2px; letter-spacing: 0; }
html body #top#top#top.hero-scene-notebook .hero-scene-controls { top: calc(641 * var(--notebook-unit)) !important; }

@media (max-width: 1100px) {
  html body #top#top#top.hero-scene-notebook { --notebook-unit: .090909vw; }
}

@media (max-width: 600px) {
  html body #top#top#top.hero-scene-notebook .desk-collage { top: 90px; }
  html body #top#top#top.hero-scene-notebook .desk-record { top: calc(90px + 123 * var(--notebook-unit)); }
  html body #top#top#top.hero-scene-notebook .airdrop-card-live { top: calc(90px + 506 * var(--notebook-unit)); }
  html body #top#top#top.hero-scene-notebook .hero-copy { top: calc(90px + 320.038 * var(--notebook-unit)) !important; }
  html body #top#top#top.hero-scene-notebook .hero-scene-controls { top: calc(120px + 641 * var(--notebook-unit)) !important; }
}