:root {
  --ink: #0f2034;
  --paper: #eef5f8;
  --blue: #0b63b6;
  --cyan: #16bed0;
  --shadow: 0 18px 42px rgba(15, 32, 52, 0.14);
  --radius: 8px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(15, 32, 52, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(15, 32, 52, 0.045) 1px, transparent 1px),
    var(--paper);
  background-size: 28px 28px;
  font-family:
    "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Inter, Arial,
    sans-serif;
}

.portal-shell {
  display: grid;
  width: min(1740px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 0;
  place-items: center;
}

.portal-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  overflow: hidden;
  border: 1px solid rgba(11, 99, 182, 0.24);
  border-radius: var(--radius);
  background: #f7fbff;
  box-shadow: var(--shadow);
}

.portal-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.portal-hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  outline: 0;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.portal-hotspot span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.portal-hotspot:hover,
.portal-hotspot:focus-visible {
  border-color: rgba(22, 190, 208, 0.9);
  background: rgba(11, 99, 182, 0.08);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.88),
    0 0 0 4px rgba(22, 190, 208, 0.18),
    0 18px 34px rgba(11, 99, 182, 0.18);
  transform: translateY(-1px);
}

.portal-hotspot.is-opening {
  border-color: rgba(11, 99, 182, 0.95);
  background: rgba(11, 99, 182, 0.14);
}

.card-01,
.card-02,
.card-03,
.card-04 {
  --y: 11.91%;
  --h: 17.19%;
}

.card-05,
.card-06,
.card-07,
.card-08 {
  --y: 30.57%;
  --h: 16.8%;
}

.card-09,
.card-10,
.card-11,
.card-12 {
  --y: 48.73%;
  --h: 16.5%;
}

.card-13,
.card-14,
.card-15,
.card-16 {
  --y: 66.6%;
  --h: 16.31%;
}

.card-01,
.card-05,
.card-09,
.card-13 {
  --x: 1.89%;
  --w: 23.31%;
}

.card-02,
.card-06,
.card-10,
.card-14 {
  --x: 26.3%;
  --w: 23.18%;
}

.card-03,
.card-07,
.card-11,
.card-15 {
  --x: 50.52%;
  --w: 22.53%;
}

.card-04,
.card-08,
.card-12,
.card-16 {
  --x: 74.02%;
  --w: 24.09%;
}

@media (max-width: 760px) {
  .portal-shell {
    width: min(100% - 16px, 1740px);
    padding: 8px 0;
    align-items: start;
  }

  .portal-stage {
    box-shadow: 0 10px 24px rgba(15, 32, 52, 0.12);
  }
}