.home-reference-shell {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: #0b0c0e;
}

.home-reference-shell > .home-reference-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .96;
  mix-blend-mode: screen;
}

.home-reference-aura {
  position: absolute;
  z-index: 1;
  width: 38rem;
  height: 26rem;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(110px);
  opacity: .24;
}

.home-reference-aura-left { left: 4%; top: 24%; background: rgba(255,255,255,.09); }
.home-reference-aura-right { right: 3%; top: 25%; background: rgba(214,224,255,.11); }

.home-reference-shell > header,
.home-reference-shell > main {
  position: relative;
  z-index: 5;
}

.home-reference-shell .home-upload-card {
  position: relative;
  z-index: 6;
  overflow: hidden;
  border-color: rgba(255,255,255,.16) !important;
  background-color: rgba(14,16,20,.82) !important;
  box-shadow: 0 28px 100px rgba(255,255,255,.045), inset 0 0 42px rgba(255,255,255,.018);
  transition: border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}

.home-reference-shell .home-upload-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--home-mx,50%) var(--home-my,50%), rgba(255,255,255,.10), transparent 34%);
  opacity: 0;
  transition: opacity .45s ease;
}

.home-reference-shell .home-upload-card:hover {
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: 0 32px 120px rgba(255,255,255,.09), inset 0 0 48px rgba(255,255,255,.035);
  transform: translateY(-2px);
}

.home-reference-shell .home-upload-card:hover::after { opacity: 1; }
.home-reference-shell .home-crosshair { color: #a3a3a3 !important; transition: color .4s ease; }
.home-reference-shell .home-upload-card:hover .home-crosshair { color: #f5f5f5 !important; }
.home-reference-shell .home-drop-hint {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 1rem;
  color: #8a8a8a;
  font-size: 10px;
  letter-spacing: .25em;
  transition: color .4s ease;
}
.home-reference-shell .home-upload-card:hover .home-drop-hint { color: #fff; }
.home-reference-shell .home-paste-hint {
  margin-top: 1.25rem;
  color: rgba(163,163,163,.62);
  font-size: 10px;
  letter-spacing: .08em;
}
.home-reference-shell h1 {
  text-align: center;
}

.home-reference-shell h1 > :first-child,
.home-reference-shell h1 > :last-child {
  color: #fff !important;
}

.home-reference-shell h1 > :first-child { font-weight: 300 !important; }
.home-reference-shell h1 > :last-child { font-weight: 500 !important; }

/* Completion state: make the success mark the visual anchor of the dialog. */
.home-reference-shell [role="dialog"]:has(.success-mark) .success-mark {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 14px !important;
}
.home-reference-shell [role="dialog"] div:has(> .success-mark) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  padding-right: 0 !important;
}
.home-reference-shell [role="dialog"]:has(.success-mark) .success-mark + div {
  text-align: center;
}
.home-reference-shell [role="dialog"]:has(.success-mark) .success-mark + div p {
  text-align: center;
}

.home-reference-shell p.font-display {
  width: 100%;
  margin-top: -0.15rem;
  padding-inline: .35rem;
  text-align: center !important;
}

.home-reference-shell .literary-sample-link {
  max-width: min(92vw, 760px);
  margin-bottom: .25rem;
  white-space: nowrap;
  overflow: hidden;
}
.home-reference-shell .literary-sample-link span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Literature titles should use the available card width before wrapping. */
details > summary > div.min-w-0 > .truncate {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .home-reference-shell p.font-display {
    font-size: 10px;
    letter-spacing: .19em;
  }
  .home-reference-shell .literary-sample-link { max-width: 88vw; }
  .home-reference-shell .literary-sample-link span:nth-child(2) { max-width: 58vw; }
}

@media (max-width: 1023px) {
  .home-reference-aura { width: 24rem; height: 20rem; opacity: .12; }
  .home-reference-shell .home-upload-card { margin-inline: auto; }
}