#intro-orbit {
  position: fixed;
  z-index: 3;
  left: 43%;
  top: 48%;
  width: min(290px, calc(100vw - 72px));
  transform: translate(calc(-50% + var(--note-x, 0px) + var(--drag-x, 0px)), calc(-50% + var(--note-y, 0px) + var(--drag-y, 0px))) scale(var(--note-scale, 1));
  will-change: transform;
}
.intro-drift { --rest-angle: -1.25; animation: note-drift 7s ease-in-out -2.4s infinite alternate; }
#intro-trigger {
  --smooth-border: #eee9e22c;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 25px 26px 20px;
  text-align: left;
  color: #f2eee7;
  border: 1px solid #eee9e22c;
  border-radius: 19px;
  box-shadow: 0 8px 35px #00000020, inset 0 1px #ffffff06;
  transition: border-color .25s, box-shadow .25s;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#intro-orbit.is-held .intro-drift { animation-play-state: paused; }
#intro-orbit.is-dragging #intro-trigger { cursor: grabbing; --smooth-border: #eee9e270; border-color: #eee9e270; box-shadow: 0 20px 50px #00000040; }
#intro-trigger:hover { --smooth-border: #eee9e25c; border-color: #eee9e25c; box-shadow: 0 14px 42px #00000030, inset 0 1px #ffffff09; }
#intro-summary { display: block; text-align: left; }
.intro-greeting { display: block; font-size: 20px; line-height: 1.05; letter-spacing: calc(-.3px - .01em); }
.intro-peek { display: block; font-size: 15px; line-height: 1.05; letter-spacing: -.01em; margin-top: 13px; color: #d2d2db; }
.intro-fold {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 29px;
  height: 29px;
  background: linear-gradient(135deg, transparent 48%, #c7cfdf2b 50%, #68738b29 100%);
  transform-origin: bottom right;
  pointer-events: none;
}
#intro-note .intro-fold { opacity: 0; transform: scale(0); }
.intro-drift:has(:focus-visible), .intro-open .intro-drift, .is-suspended .intro-drift { animation-play-state: paused; }
.intro-open #intro-orbit { visibility: hidden; }
html:has(#intro-note[open]) { overflow: hidden; }
#intro-note {
  --smooth-border: #eee9e22c;
  position: fixed;
  inset: 0 auto auto 0;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #f2eee7;
  border: 1px solid #eee9e237;
  border-radius: 19px;
  box-shadow: 0 25px 100px #00000040, inset 0 1px #ffffff08;
  transform-origin: top left;
}
.intro-writing {
  height: 100%;
  padding: 25px 26px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#intro-note.is-transitioning .intro-writing { overflow: hidden; }
.intro-closing #intro-close { opacity: 0; pointer-events: none; }
#intro-note::backdrop { background: transparent; }
/* A separate visual backdrop can ease in both directions, including when
   an opening animation is interrupted. The native dialog still manages focus. */
#intro-shade {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  visibility: hidden;
  background: #01030a00;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter 520ms ease, -webkit-backdrop-filter 520ms ease, background-color 520ms ease, visibility 0s 520ms;
}
.intro-open #intro-shade {
  visibility: visible;
  background: #01030a35;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition-delay: 0s;
}
.intro-closing #intro-shade {
  background: #01030a00;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition-duration: 360ms;
}
#intro-close {
  position: absolute;
  z-index: 4;
  right: 5px;
  top: 5px;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: #c0c1c9;
  font-size: 24px;
  transition: opacity .15s;
}
.intro-writing p { font-size: 16px; line-height: 1.05; letter-spacing: calc(-.1px - .01em); margin: 25px 0 0; }
.intro-writing a { color: inherit; text-decoration-thickness: 1px; text-decoration-color: #ffffff70; text-underline-offset: 3px; }
#intro-goodbye { margin-top: 25px; padding: 0; border: 0; background: none; font-size: 16px; line-height: 1.05; letter-spacing: -.01em; text-underline-offset: 4px; }
#intro-goodbye:hover { text-decoration: underline; }
@keyframes note-drift {
  from { transform: translate3d(-5.25px, -8.25px, 0); }
  to { transform: translate3d(6px, 8.25px, 0); }
}
@media (max-width: 600px) {
  #intro-orbit { left: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-drift { animation: none; }
  #intro-orbit { transform: translate(calc(-50% + var(--drag-x, 0px)), calc(-50% + var(--drag-y, 0px))); }
  #intro-trigger { transition: none; }
  #intro-shade { transition: none; }
}

/* Floating content stays below the note and its native frosted surface. */
#glass-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#glass-scene main { position: static; }
#glass-scene a, #glass-scene button, #glass-scene [tabindex] { pointer-events: auto; }
#intro-trigger, #intro-note {
  background: rgb(18 25 38 / var(--note-tint-opacity, .24));
  --smooth-border: #ffffff26;
  text-shadow: none;
}
#intro-trigger:hover { --smooth-border: #ffffff40; }

/* Native frost and the SVG rim are the entire note material. No source filters. */
#intro-trigger, #intro-note {
  backdrop-filter: blur(3px) saturate(1.08);
  -webkit-backdrop-filter: blur(3px) saturate(1.08);
}

/* The pointer lights only the rim; the frosted fill stays uniform. */
.cursor-rim { opacity: 0; transition: opacity 240ms ease; }
@media (prefers-reduced-motion: reduce) {
  .cursor-rim { transition: none; }
}