/* Shared by the HTML loading shell and its React hand-off. The card geometry
   stays stable while each selected theme supplies its own entrance world. */
.entry-screen {
  --entry-paper: #f4f2e8;
  --entry-ink: #205747;
  --entry-gold: #a98b50;
  --entry-line: #d6d7c9;
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr;
  place-items: center;
  gap: 24px;
  min-height: 100svh;
  padding: max(28px, env(safe-area-inset-top)) 24px max(26px, env(safe-area-inset-bottom));
  overflow: auto;
  background: var(--entry-paper);
  color: var(--entry-ink);
  font-family: 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  isolation: isolate;
  text-align: center;
}
.entry-opening {
  /* Keep the live destination composited beneath the cover during warm-up. */
  opacity: 0.999;
  will-change: opacity;
}
/* Keep the first HTML cover composited while JS/CSS prepare the destination. */
.entry-has-js .entry-preload {
  opacity: 0.999;
}
.entry-screen,
.entry-screen * {
  box-sizing: border-box;
}
.entry-screen::before {
  content: '';
  position: absolute;
  inset: 16px;
  z-index: -1;
  border: 1px solid #a98b501c;
  pointer-events: none;
}
.entry-kicker {
  align-self: start;
  margin: 0;
  padding-top: 8px;
  color: #798574;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  line-height: 1.8;
}
.entry-center {
  display: grid;
  justify-items: center;
  width: min(100%, 540px);
  padding-bottom: 12px;
}
.entry-fan {
  position: relative;
  display: grid;
  place-items: center;
  width: min(320px, 100%);
  height: 218px;
  margin-bottom: 27px;
}
.entry-fan::before,
.entry-fan::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.entry-fan::before {
  width: 220px;
  height: 220px;
  border: 1px solid #a98b5036;
}
.entry-fan::after {
  width: 246px;
  height: 246px;
  border: 1px solid #a98b5016;
}
.entry-card {
  --entry-x: 0px;
  --entry-y: -9px;
  --entry-r: -1deg;
  position: absolute;
  display: grid;
  place-items: center;
  width: 102px;
  height: 148px;
  border: 1px solid #b89d69;
  border-radius: 5px;
  background: #fcfbf5;
  box-shadow:
    0 14px 24px #203c2a0b,
    inset 0 0 0 4px #fcfbf5,
    inset 0 0 0 5px #a98b5021;
  color: var(--entry-ink);
  font:
    600 82px/1 Georgia,
    Georgia,
    serif;
  transform: translate(var(--entry-x), var(--entry-y)) rotate(var(--entry-r));
  transform-origin: center 85%;
  animation: entry-card-open 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--entry-elapsed, 0ms) both;
}
.entry-card:nth-child(1) {
  --entry-x: -85px;
  --entry-y: 10px;
  --entry-r: -17deg;
}
.entry-card:nth-child(2) {
  color: #a23d36;
}
.entry-card:nth-child(3) {
  --entry-x: 85px;
  --entry-y: 13px;
  --entry-r: 15deg;
}
.entry-card > i {
  position: absolute;
  top: 9px;
  left: 9px;
  font:
    normal 14px/1 Georgia,
    serif;
}
.entry-card > i:last-child {
  inset: auto 9px 9px auto;
  transform: rotate(180deg);
}
.entry-title {
  position: relative;
  margin: 0;
  color: var(--entry-ink);
  font:
    700 clamp(32px, 5.6vw, 43px)/1.45 'Noto Serif TC',
    'Songti TC',
    'PMingLiU',
    serif;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}
.entry-title-label {
  font-family: system-ui, sans-serif;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.entry-title-art {
  display: block;
  width: 5.6em;
  height: 1.437em;
  fill: currentColor;
}
.entry-letter-art {
  display: block;
  height: 1em;
  fill: currentColor;
}
.entry-tagline {
  margin: 12px 0 0;
  color: #778171;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.8;
}
.entry-rule {
  position: relative;
  width: 64px;
  height: 1px;
  margin: 24px 0 0;
  overflow: hidden;
  background: #a98b5029;
}
.entry-rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--entry-gold);
  transform: scaleX(0.3);
  transform-origin: left;
  animation: entry-rule-draw 1120ms cubic-bezier(0.2, 0.6, 0.3, 1) var(--entry-elapsed, 0ms) both;
}
.entry-status {
  margin: 9px 0 0;
  color: #8b8c7c;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.8;
}
.entry-preload .entry-status {
  display: none;
}
.entry-has-js .entry-preload .entry-status {
  display: block;
}
.entry-foot {
  align-self: end;
  display: grid;
  gap: 8px;
  max-width: 360px;
  width: min(360px, 100%);
  color: #7b8176;
  font-size: 11px;
  line-height: 1.8;
}
.entry-foot p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.entry-foot a {
  color: #6b7867;
  text-decoration-color: #a98b5059;
  text-underline-offset: 4px;
}
.entry-foot a:focus-visible {
  outline: 2px solid var(--entry-gold);
  outline-offset: 5px;
}
.entry-progress {
  width: min(184px, 56vw);
  height: 6px;
  margin: 24px 0 0;
  overflow: hidden;
  border-radius: 999px;
  background: #a98b501c;
  box-shadow: inset 0 1px 2px #20574709;
}
.entry-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #86ad98, #205747);
  transform: scaleX(var(--entry-progress, 0.08));
  transform-origin: left center;
  transition: transform 90ms cubic-bezier(0.16, 1, 0.3, 1);
}
.entry-preload .entry-progress {
  display: none;
}
.entry-has-js .entry-preload .entry-progress {
  display: block;
}
.entry-opening.is-ready {
  animation: entry-screen-away 480ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.entry-opening.is-ready .entry-center {
  transform: translateY(-7px) scale(1.012);
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.entry-retry {
  margin-top: 12px;
  border: 1px solid var(--entry-line);
  border-radius: 999px;
  padding: 10px 20px;
  background: transparent;
  color: var(--entry-ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.entry-retry:focus-visible {
  outline: 2px solid var(--entry-gold);
  outline-offset: 4px;
}
@keyframes entry-card-open {
  from {
    transform: translate(calc(var(--entry-x) * 0.72), calc(var(--entry-y) + 8px))
      rotate(var(--entry-r));
  }
  to {
    transform: translate(var(--entry-x), var(--entry-y)) rotate(var(--entry-r));
  }
}
@keyframes entry-rule-draw {
  from {
    transform: scaleX(0.1);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes entry-screen-away {
  0% {
    opacity: 0.999;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@media (max-height: 580px) {
  .entry-screen {
    gap: 12px;
    padding-top: 20px;
    padding-bottom: 18px;
  }
  .entry-kicker {
    padding: 0;
  }
  .entry-fan {
    transform: scale(0.78);
    margin-top: -24px;
    margin-bottom: -7px;
  }
  .entry-title {
    font-size: 31px;
  }
  .entry-tagline {
    margin-top: 7px;
  }
  .entry-rule,
  .entry-progress {
    margin-top: 14px;
  }
}
@media (max-width: 360px) {
  .entry-fan {
    transform: scale(0.82);
  }
}
@media (min-width: 361px) and (max-width: 379px) {
  .entry-fan {
    transform: scale(0.92);
  }
}
@media (min-width: 640px) and (max-height: 480px) {
  .entry-screen {
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .entry-center {
    position: relative;
    align-content: center;
    justify-items: start;
    width: min(600px, 100%);
    height: 218px;
    padding: 0 0 0 300px;
    text-align: left;
  }
  .entry-fan {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    margin: 0;
  }
  .entry-title {
    font-size: 30px;
    letter-spacing: 0.08em;
    text-indent: 0;
  }
  .entry-tagline {
    letter-spacing: 0.09em;
  }
  .entry-foot {
    gap: 4px;
    max-width: 560px;
    width: 100%;
  }
}
.entry-screen.entry-reduced .entry-card,
.entry-screen.entry-reduced .entry-rule::after,
:root[data-motion='off'] .entry-screen .entry-card,
:root[data-motion='off'] .entry-screen .entry-rule::after {
  animation: none;
}
.entry-screen.entry-reduced.entry-opening.is-ready {
  animation: entry-screen-away 180ms ease 0ms both !important;
}
.entry-screen.entry-reduced.is-ready .entry-center,
:root[data-motion='off'] .entry-screen.is-ready .entry-center {
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .entry-screen .entry-card,
  .entry-screen .entry-rule::after {
    animation: none !important;
  }
  .entry-screen.entry-opening.is-ready {
    animation: entry-screen-away 180ms ease 0ms both !important;
  }
  .entry-screen.is-ready .entry-center {
    transform: none;
    transition: none;
  }
}

/* Seven authored entrance worlds. The blocking shell stylesheet owns these
   palettes too: the React bundle must not recolor a cold loading frame. */
.entry-worlds {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.entry-world {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
html:not([data-entry-theme]) .entry-world-green,
html[data-entry-theme='green'] .entry-world-green,
html[data-entry-theme='black'] .entry-world-black,
html[data-entry-theme='cyber'] .entry-world-cyber,
html[data-entry-theme='baroque'] .entry-world-baroque,
html[data-entry-theme='avantgarde'] .entry-world-avantgarde,
html[data-entry-theme='revolution'] .entry-world-revolution,
html[data-entry-theme='p3r'] .entry-world-p3r {
  display: block;
}
.entry-world-back,
.entry-world-front {
  transform-box: view-box;
  transform-origin: center;
  animation-delay: var(--entry-elapsed, 0ms);
  animation-fill-mode: both;
}
.entry-world-green .entry-world-back {
  animation: entry-jade-arrive 1100ms cubic-bezier(0.16, 1, 0.3, 1) var(--entry-elapsed, 0ms) both;
}
.entry-world-green .entry-world-front {
  animation: entry-jade-orbit 20s linear var(--entry-elapsed, 0ms) infinite;
}
.entry-world-black .entry-world-back {
  animation: entry-metal-open 1100ms cubic-bezier(0.16, 1, 0.3, 1) var(--entry-elapsed, 0ms) both;
}
.entry-world-black .entry-world-front {
  animation: entry-metal-gleam 4s ease-in-out var(--entry-elapsed, 0ms) infinite alternate;
}
.entry-world-cyber .entry-world-back {
  animation: entry-gate-open 850ms cubic-bezier(0.16, 1, 0.3, 1) var(--entry-elapsed, 0ms) both;
}
.entry-world-cyber .entry-world-front {
  animation: entry-data-rise 4s ease-in-out var(--entry-elapsed, 0ms) infinite alternate;
}
.entry-world-baroque .entry-world-back {
  animation: entry-curtain-open 1200ms cubic-bezier(0.16, 1, 0.3, 1) var(--entry-elapsed, 0ms) both;
}
.entry-world-baroque .entry-world-front {
  animation: entry-leaf-drift 8s ease-in-out var(--entry-elapsed, 0ms) infinite alternate;
}
.entry-world-avantgarde .entry-world-back {
  animation: entry-axis-lock 1000ms cubic-bezier(0.16, 1, 0.3, 1) var(--entry-elapsed, 0ms) both;
}
.entry-world-avantgarde .entry-world-front {
  animation: entry-disc-drift 12s ease-in-out var(--entry-elapsed, 0ms) infinite alternate;
}
.entry-world-revolution .entry-world-back {
  animation: entry-silk-drift 6s ease-in-out var(--entry-elapsed, 0ms) infinite alternate;
}
.entry-world-revolution .entry-world-front {
  animation: entry-gold-rise 6s ease-in-out var(--entry-elapsed, 0ms) infinite;
}
.entry-world-p3r .entry-world-back {
  animation: entry-depth-rise 7s ease-in-out var(--entry-elapsed, 0ms) infinite alternate;
}
.entry-world-p3r .entry-world-front {
  animation: entry-bubble-rise 7s ease-in-out var(--entry-elapsed, 0ms) infinite alternate;
}
html[data-entry-theme] .entry-screen.entry-screen {
  background: var(--entry-surface, #f4f2e8);
  --entry-ink: #205747;
  --entry-gold: #a98b50;
  --entry-line: #d6d7c9;
  --entry-muted: #596b58;
  --entry-card-paper: #fcfbf5;
  --entry-card-ink: #205747;
  --entry-card-red: #a23d36;
  --entry-card-line: #b89d69;
  --entry-card-radius: 5px;
  --entry-progress-start: #86ad98;
  --entry-progress-end: #205747;
  color: var(--entry-ink);
}
html[data-entry-theme='black'] .entry-screen.entry-screen {
  --entry-surface: #101113;
  --entry-ink: #eee5d5;
  --entry-gold: #d0af73;
  --entry-line: #5f543c;
  --entry-muted: #b9b09e;
  --entry-card-paper: #202126;
  --entry-card-ink: #d0af73;
  --entry-card-red: #eee5d5;
  --entry-card-line: #9e8457;
  --entry-card-radius: 2px;
  --entry-progress-start: #80683e;
  --entry-progress-end: #dfc58e;
}
html[data-entry-theme='green'] .entry-screen.entry-screen {
  --entry-card-paper: #f8faf3;
  --entry-card-line: #97ad95;
  --entry-card-radius: 9px;
  --entry-muted: #526a5b;
}
@keyframes entry-jade-orbit {
  to {
    transform: rotate(360deg);
  }
}
html[data-entry-theme='cyber'] .entry-screen.entry-screen {
  --entry-surface: #071323;
  --entry-ink: #dffcff;
  --entry-gold: #28e9eb;
  --entry-line: #175e71;
  --entry-muted: #9ac7db;
  --entry-card-paper: #0a2035;
  --entry-card-ink: #55f3ef;
  --entry-card-red: #f580dd;
  --entry-card-line: #25a7b0;
  --entry-card-radius: 3px;
  --entry-progress-start: #a83ecb;
  --entry-progress-end: #28e9eb;
}
html[data-entry-theme='baroque'] .entry-screen.entry-screen {
  --entry-surface: #2e101a;
  --entry-ink: #e9d5ad;
  --entry-gold: #c3a264;
  --entry-line: #806446;
  --entry-muted: #c9b59b;
  --entry-card-paper: #f1e7d5;
  --entry-card-ink: #553221;
  --entry-card-red: #8f2439;
  --entry-card-line: #c3a264;
  --entry-card-radius: 8px;
  --entry-progress-start: #91603e;
  --entry-progress-end: #d8bc83;
}
html[data-entry-theme='avantgarde'] .entry-screen.entry-screen {
  --entry-surface: #e9e3d4;
  --entry-ink: #252722;
  --entry-gold: #ad2b23;
  --entry-line: #9e8c6f;
  --entry-muted: #665b49;
  --entry-card-paper: #f2eddf;
  --entry-card-ink: #242622;
  --entry-card-red: #ad2b23;
  --entry-card-line: #3b3b31;
  --entry-card-radius: 0px;
  --entry-progress-start: #6d201c;
  --entry-progress-end: #c03227;
}
html[data-entry-theme='revolution'] .entry-screen.entry-screen {
  --entry-surface: #3a1015;
  --entry-ink: #f1d9aa;
  --entry-gold: #d8b378;
  --entry-line: #986649;
  --entry-muted: #d2b89c;
  --entry-card-paper: #ecd9ac;
  --entry-card-ink: #8c2325;
  --entry-card-red: #a12c25;
  --entry-card-line: #bd8e50;
  --entry-card-radius: 2px;
  --entry-progress-start: #ab3e2e;
  --entry-progress-end: #e3bf7d;
}
html[data-entry-theme='p3r'] .entry-screen.entry-screen {
  --entry-surface: #020c36;
  --entry-ink: #f3fcff;
  --entry-gold: #a4f5ff;
  --entry-line: #467593;
  --entry-muted: #b0d9f4;
  --entry-card-paper: #edfaff;
  --entry-card-ink: #0755ee;
  --entry-card-red: #ce367d;
  --entry-card-line: #a4f5ff;
  --entry-card-radius: 2px;
  --entry-progress-start: #0755ee;
  --entry-progress-end: #9dfff4;
}
html[data-entry-theme] .entry-screen.entry-screen::before {
  border-color: color-mix(in srgb, var(--entry-gold) 18%, transparent);
}
html[data-entry-theme]
  .entry-screen.entry-screen
  :is(.entry-kicker, .entry-tagline, .entry-status, .entry-foot, .entry-foot a) {
  color: var(--entry-muted);
}
html[data-entry-theme] .entry-screen.entry-screen .entry-foot a {
  text-decoration-color: color-mix(in srgb, var(--entry-gold) 50%, transparent);
}
html[data-entry-theme] .entry-screen.entry-screen .entry-card {
  color: var(--entry-card-ink);
  background: var(--entry-card-paper);
  border-color: var(--entry-card-line);
  border-radius: var(--entry-card-radius);
  box-shadow:
    0 16px 30px #00000018,
    inset 0 0 0 4px var(--entry-card-paper),
    inset 0 0 0 5px color-mix(in srgb, var(--entry-gold) 24%, transparent);
}
html[data-entry-theme] .entry-screen.entry-screen .entry-card:nth-child(2) {
  color: var(--entry-card-red);
}
html[data-entry-theme] .entry-screen.entry-screen .entry-fan::before {
  border-color: color-mix(in srgb, var(--entry-gold) 30%, transparent);
}
html[data-entry-theme] .entry-screen.entry-screen .entry-fan::after {
  border-color: color-mix(in srgb, var(--entry-gold) 14%, transparent);
}
html[data-entry-theme='green'] .entry-screen.entry-screen .entry-card {
  background: linear-gradient(145deg, #ffffff, #eef3e9);
  box-shadow:
    0 18px 28px #20574712,
    inset 0 0 0 4px #f8faf3,
    inset 0 0 0 5px #b5935838;
}
html[data-entry-theme='green'] .entry-screen.entry-screen .entry-fan::before,
html[data-entry-theme='green'] .entry-screen.entry-screen .entry-fan::after {
  border-color: #86ad9824;
}
html[data-entry-theme='black'] .entry-fan::before {
  border-radius: 0;
  transform: rotate(45deg) scale(0.8);
}
html[data-entry-theme='black'] .entry-fan::after {
  border-radius: 0;
  transform: rotate(45deg) scale(0.8);
}
html[data-entry-theme='cyber'] .entry-fan::before {
  border-radius: 20%;
  transform: rotate(45deg) scale(0.82);
}
html[data-entry-theme='cyber'] .entry-fan::after {
  border-style: dashed;
}
html[data-entry-theme='baroque'] .entry-fan::before {
  border-radius: 45% 45% 30% 30%;
  transform: scale(0.85, 1.08);
}
html[data-entry-theme='baroque'] .entry-fan::after {
  border-radius: 45% 45% 30% 30%;
  transform: scale(0.85, 1.08);
}
html[data-entry-theme='avantgarde'] .entry-fan::before {
  border-radius: 0;
  transform: rotate(-19deg) scale(0.82);
  border-width: 2px;
}
html[data-entry-theme='avantgarde'] .entry-fan::after {
  transform: translate(30px, -25px) scale(0.75);
}
html[data-entry-theme='revolution'] .entry-fan::before {
  border-width: 2px;
}
html[data-entry-theme='revolution'] .entry-fan::after {
  border-style: dashed;
}
html[data-entry-theme='p3r'] .entry-fan::after {
  border-style: dashed;
  transform: rotate(-20deg) scale(1.04, 0.9);
}
html[data-entry-theme] .entry-screen.entry-screen .entry-progress {
  background: color-mix(in srgb, var(--entry-gold) 18%, transparent);
  box-shadow: none;
  height: 7px;
  width: min(204px, 56vw);
}
html[data-entry-theme] .entry-screen.entry-screen .entry-progress > span {
  background: linear-gradient(90deg, var(--entry-progress-start), var(--entry-progress-end));
}
.entry-screen::selection,
.entry-screen ::selection {
  background: var(--entry-gold);
  color: var(--entry-card-paper);
}
@keyframes entry-jade-arrive {
  from {
    opacity: 0.25;
    transform: scale(1.05) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes entry-leaf-drift {
  from {
    transform: translateY(5px);
    opacity: 0.7;
  }
  to {
    transform: translateY(-8px);
    opacity: 1;
  }
}
@keyframes entry-metal-open {
  from {
    opacity: 0.2;
    transform: scaleX(0.92);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes entry-metal-gleam {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes entry-gate-open {
  from {
    opacity: 0.3;
    transform: scale(0.95, 1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes entry-data-rise {
  from {
    transform: translateY(9px);
    opacity: 0.5;
  }
  to {
    transform: translateY(-9px);
    opacity: 1;
  }
}
@keyframes entry-curtain-open {
  from {
    opacity: 0.25;
    transform: scaleX(0.94);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes entry-axis-lock {
  from {
    opacity: 0.3;
    transform: translate(-16px, 12px);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes entry-disc-drift {
  from {
    transform: rotate(-1deg);
  }
  to {
    transform: rotate(2deg);
  }
}
@keyframes entry-silk-drift {
  from {
    transform: translate(-5px, 3px) scale(1);
  }
  to {
    transform: translate(5px, -3px) scale(1.025, 1);
  }
}
@keyframes entry-gold-rise {
  0% {
    transform: translateY(14px);
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-18px);
    opacity: 0.4;
  }
}
@keyframes entry-depth-rise {
  from {
    transform: translate(0, -4px) scale(1.015);
  }
  to {
    transform: translate(-6px, 8px) scale(1);
  }
}
@keyframes entry-bubble-rise {
  from {
    transform: translateY(8px);
    opacity: 0.6;
  }
  to {
    transform: translateY(-12px);
    opacity: 1;
  }
}
.entry-screen.entry-reduced .entry-world use,
:root[data-motion='off'] .entry-world use {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .entry-world use {
    animation: none !important;
  }
}
@media (max-width: 600px) {
  /* Pull the side artwork into a narrow viewport; otherwise SVG slice crops
     every distinctive motif away on a tall phone. The middle stays quiet. */
  .entry-world {
    width: 100%;
    left: 0;
    transform: scaleX(0.46);
  }
}
html[data-entry-theme='black'] .entry-card {
  animation-name: entry-card-metal;
  animation-duration: 900ms;
}
html[data-entry-theme='cyber'] .entry-card {
  animation-name: entry-card-signal;
  animation-duration: 720ms;
}
html[data-entry-theme='baroque'] .entry-card {
  animation-duration: 1000ms;
}
html[data-entry-theme='avantgarde'] .entry-card {
  animation-name: entry-card-axis;
  animation-duration: 720ms;
}
html[data-entry-theme='revolution'] .entry-card {
  animation-name: entry-card-banner;
  animation-duration: 900ms;
}
html[data-entry-theme='p3r'] .entry-card {
  animation-name: entry-card-surface;
  animation-duration: 1000ms;
}
@keyframes entry-card-metal {
  from {
    transform: translate(calc(var(--entry-x) * 0.88), calc(var(--entry-y) + 16px))
      rotate(var(--entry-r));
  }
  to {
    transform: translate(var(--entry-x), var(--entry-y)) rotate(var(--entry-r));
  }
}
@keyframes entry-card-signal {
  from {
    opacity: 0.6;
    transform: translate(calc(var(--entry-x) * 0.9), var(--entry-y)) rotate(var(--entry-r))
      scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(var(--entry-x), var(--entry-y)) rotate(var(--entry-r)) scale(1);
  }
}
@keyframes entry-card-axis {
  from {
    transform: translate(calc(var(--entry-x) * 0.84), calc(var(--entry-y) + 18px))
      rotate(calc(var(--entry-r) - 5deg));
  }
  to {
    transform: translate(var(--entry-x), var(--entry-y)) rotate(var(--entry-r));
  }
}
@keyframes entry-card-banner {
  from {
    transform: translate(var(--entry-x), calc(var(--entry-y) + 20px)) rotate(var(--entry-r));
  }
  to {
    transform: translate(var(--entry-x), var(--entry-y)) rotate(var(--entry-r));
  }
}
@keyframes entry-card-surface {
  from {
    opacity: 0.6;
    transform: translate(calc(var(--entry-x) * 0.9), calc(var(--entry-y) + 22px))
      rotate(var(--entry-r));
  }
  to {
    opacity: 1;
    transform: translate(var(--entry-x), var(--entry-y)) rotate(var(--entry-r));
  }
}
/* Theme selectors above must not override the reduced-motion contract. */
html[data-entry-theme] .entry-screen.entry-reduced .entry-card,
html[data-entry-theme][data-motion='off'] .entry-card {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  html[data-entry-theme] .entry-card {
    animation: none !important;
  }
}

/* Blue Hour / v42. The pre-React shell owns the complete artwork, so neither
   a font download nor the React handoff can change this first composition. */
html[data-entry-theme='p3r'] .entry-world-p3r {
  transform: none;
}
html[data-entry-theme='p3r'] .entry-world-p3r .entry-world-back {
  animation: none;
}
.entry-world-p3r .entry-world-current,
.entry-world-p3r .entry-world-dial {
  transform-box: view-box;
  transform-origin: center;
}
.entry-world-p3r .entry-world-current {
  animation: entry-blue-current 6s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.entry-world-p3r .entry-world-dial {
  transform-origin: 898px 378px;
  animation: entry-blue-dial 32s linear infinite;
}
html[data-entry-theme='p3r'] .entry-screen.entry-screen {
  --entry-surface: #030c3e;
  --entry-muted: #bce7ff;
  --entry-card-ink: #0741bf;
}
html[data-entry-theme='p3r'] .entry-screen::before {
  inset: 19px;
  border-color: #9ceeff26;
  clip-path: polygon(
    0 0,
    24% 0,
    24% 1%,
    99% 1%,
    99% 76%,
    100% 76%,
    100% 100%,
    76% 100%,
    76% 99%,
    1% 99%,
    1% 24%,
    0 24%
  );
}
html[data-entry-theme='p3r'] .entry-worlds::after {
  content: 'DEEP BLUE / 03';
  position: absolute;
  top: 12%;
  left: 7%;
  color: #d4ffff;
  font:
    800 clamp(11px, 1.4vw, 18px)/1 system-ui,
    sans-serif;
  letter-spacing: 0.17em;
  transform: rotate(-10deg);
  opacity: 0.55;
}
html[data-entry-theme='p3r'] .entry-kicker {
  letter-spacing: 0.4em;
  font-weight: 750;
}
html[data-entry-theme='p3r'] .entry-screen.entry-screen .entry-card {
  overflow: hidden;
  border: 1px solid #e8ffff;
  border-radius: 2px;
  color: #0746d0;
  background: linear-gradient(151deg, #f1feff 0 75%, #a3edff 75% 83%, #0d6eff 83%);
  box-shadow:
    5px 8px 0 -2px #0b2f92,
    0 17px 35px #01072b4d,
    inset 0 0 0 5px #f1feff;
  animation-duration: 820ms;
}
html[data-entry-theme='p3r'] .entry-card::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  font:
    900 84px/1 Arial,
    sans-serif;
  font-style: italic;
  letter-spacing: -0.11em;
  padding-right: 9px;
  transform: skewX(-6deg);
}
html[data-entry-theme='p3r'] .entry-card:nth-child(1)::before {
  content: 'P';
}
html[data-entry-theme='p3r'] .entry-card:nth-child(2)::before {
  content: 'L';
}
html[data-entry-theme='p3r'] .entry-card:nth-child(3)::before {
  content: 'K';
}
html[data-entry-theme='p3r'] .entry-card .entry-letter-art {
  opacity: 0;
}
html[data-entry-theme='p3r'] .entry-card::after {
  content: '';
  position: absolute;
  top: -12%;
  left: -78%;
  width: 46%;
  height: 130%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, #ffffffaa, transparent);
  animation: entry-blue-card-light 3.8s cubic-bezier(0.22, 0.75, 0.25, 1) infinite;
}
html[data-entry-theme='p3r'] .entry-card:nth-child(2)::after {
  animation-delay: 100ms;
}
html[data-entry-theme='p3r'] .entry-card:nth-child(3)::after {
  animation-delay: 200ms;
}
html[data-entry-theme='p3r'] .entry-screen.entry-screen .entry-card:nth-child(2) {
  color: #e05091;
}
html[data-entry-theme='p3r'] .entry-fan::before {
  width: 258px;
  height: 100px;
  transform: rotate(-12deg);
  border-color: #9befff55;
  border-width: 1px;
}
html[data-entry-theme='p3r'] .entry-fan::after {
  width: 291px;
  height: 115px;
  border-style: solid;
  transform: rotate(-12deg);
  border-color: #7df6ff26;
}
html[data-entry-theme='p3r'] .entry-title {
  transform: skewX(-8deg);
  filter: drop-shadow(3px 4px 0 #0755ee);
}
html[data-entry-theme='p3r'] .entry-tagline {
  margin-top: 14px;
  letter-spacing: 0.22em;
  font-size: 11px;
}
html[data-entry-theme='p3r'] .entry-screen.entry-screen .entry-progress {
  height: 6px;
  width: min(230px, 60vw);
  background: #80dfff24;
  box-shadow: 0 0 0 1px #b4ffff16;
}
html[data-entry-theme='p3r'] .entry-progress > span {
  background: linear-gradient(90deg, #1368ff, #36dafa 65%, #e6ffff);
}
@keyframes entry-blue-current {
  from {
    transform: translate3d(-18px, 12px, 0);
    opacity: 0.55;
  }
  to {
    transform: translate3d(21px, -13px, 0);
    opacity: 1;
  }
}
@keyframes entry-blue-dial {
  to {
    transform: rotate(360deg);
  }
}
@keyframes entry-blue-card-light {
  0%,
  12% {
    transform: translate3d(0, 0, 0) skewX(-20deg);
    opacity: 0;
  }
  28% {
    opacity: 0.7;
  }
  48%,
  100% {
    transform: translate3d(470%, 0, 0) skewX(-20deg);
    opacity: 0;
  }
}
@media (max-width: 600px) {
  .entry-world-p3r .entry-world-dial {
    translate: -150px 30px;
    opacity: 0.6;
  }
  html[data-entry-theme='p3r'] .entry-worlds::after {
    top: 16%;
    left: 8%;
    font-size: 10px;
  }
}
html[data-entry-theme='p3r'] .entry-screen.entry-reduced .entry-world-current,
html[data-entry-theme='p3r'] .entry-screen.entry-reduced .entry-world-dial,
html[data-entry-theme='p3r'] .entry-screen.entry-reduced .entry-card::after,
:root[data-entry-theme='p3r'][data-motion='off'] :is(.entry-world-current, .entry-world-dial),
:root[data-entry-theme='p3r'][data-motion='off'] .entry-card::after {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .entry-world-p3r :is(.entry-world-current, .entry-world-dial),
  html[data-entry-theme='p3r'] .entry-card::after {
    animation: none !important;
  }
}