:root {
  --bg: #f4ece8;
  --paper: rgba(255, 251, 246, 0.82);
  --paper-strong: rgba(255, 251, 246, 0.92);
  --ink: #35282f;
  --muted: #74666f;
  --line: rgba(101, 77, 88, 0.16);
  --shadow: 0 22px 50px rgba(106, 82, 91, 0.16);
  --glow: 0 0 32px rgba(255, 250, 210, 0.72);
  --radius-xl: 34px;
  --radius-lg: 24px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Georgia", "Times New Roman", serif;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 24%),
    linear-gradient(180deg, #f8efeb 0%, #eef4f1 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.page-fade {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(255, 248, 231, 0.55), rgba(238, 230, 229, 0.96));
  opacity: 0;
  transition: opacity 520ms ease;
}

body.is-transitioning .page-fade {
  opacity: 1;
}

body.is-transitioning [data-transition-link].is-entering {
  z-index: 30;
}

.page-home {
  overflow: hidden;
  background: #2f2f34;
}

.home-pixel-snow {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.home-pixel-snow canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.home-world {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
}

.home-world__scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.home-world__scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #2f2f34;
}

.page-home .home-world__scene::before {
  display: none;
}

.home-world__canvas {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.home-world__bg,
.home-world__bg-decor,
.home-world__hero,
.home-world__hero img,
.home-world__progress,
.home-world__witch {
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.home-world__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.98;
}

.page-home .home-world__bg,
.page-home .home-world__bg-decor {
  display: none;
}

.home-world__bg-decor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 0.16;
}

.home-world__stage {
  position: absolute;
  inset: 0;
  transition: transform 620ms ease, filter 620ms ease;
}

body.is-transitioning .home-world__stage {
  transform: scale(1.05);
  filter: blur(1.5px);
}

.home-world__title,
.home-world__progress-wrap,
.home-world__hero,
.home-world__nav,
.home-hotspot {
  position: absolute;
}

.home-world__title {
  left: 12.8646%;
  top: 8.7037%;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: clamp(0.8rem, 1.45vw, 1.8rem);
  color: #f9c5d1;
  text-shadow: 4px 7px 4px rgba(0, 0, 0, 0.25);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  font-family: "Eater", serif;
  font-style: normal;
  font-weight: 400;
  line-height: 0.92;
  white-space: nowrap;
  max-width: 58%;
  transform-origin: left center;
  transition: transform 220ms ease, filter 220ms ease;
  pointer-events: auto;
  z-index: 5;
}

.home-world__title:hover,
.home-world__title:focus-visible {
  transform: translateY(-4px) scale(1.02);
  filter: drop-shadow(0 10px 14px rgba(255, 236, 244, 0.16));
}

.home-world__title-yuzy {
  font-size: clamp(2.5rem, min(4.1vw, 7.1vh), 88px);
}

.home-world__title-town {
  color: #fff;
  font-size: clamp(2.1rem, min(3.35vw, 5.95vh), 72px);
  letter-spacing: 0.012em;
}

.home-world__progress-wrap {
  left: 69.6875%;
  top: 10%;
  width: 15.9%;
  aspect-ratio: 615 / 224;
}

.home-world__progress {
  position: absolute;
  right: 0;
  top: 8.4821%;
  width: 100%;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.home-world__witch {
  position: absolute;
  left: -0.8%;
  top: 2%;
  width: 50.5%;
  filter: drop-shadow(1px 4px 10px rgba(0, 0, 0, 0.25));
}

.home-world__hero {
  left: 18.1771%;
  top: 38.1481%;
  width: 63.6458%;
  height: 44.0741%;
}

.home-world__hero img {
  position: absolute;
  height: auto;
  transform-origin: center bottom;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.24)) drop-shadow(4px 8px 3px rgba(0, 0, 0, 0.22));
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
}

.home-world__hero img.is-active {
  transform: translateY(-8px) scale(1.025);
  filter:
    drop-shadow(0 0 14px rgba(255, 244, 220, 0.28))
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.28));
}

.home-world__hero-sign-me.is-active,
.home-world__hero-sign-lab.is-active {
  transform: translateY(-10px) scale(1.045);
  filter:
    drop-shadow(0 0 16px rgba(255, 232, 240, 0.34))
    drop-shadow(0 12px 20px rgba(0, 0, 0, 0.28));
}

.home-world__hero-about {
  left: 0;
  bottom: 0.1543%;
  width: 15.221%;
}

.home-world__hero-sign-me {
  left: 16.4484%;
  bottom: 0;
  width: 8.1833%;
}

.home-world__hero-main {
  left: 27.1402%;
  bottom: 0;
  width: 29.375%;
}

.home-world__hero-tower {
  left: 58.2749%;
  bottom: 0;
  width: 13.0805%;
}

.home-world__hero-sign-lab {
  left: 72.5118%;
  bottom: 0;
  width: 10.9656%;
}

.home-world__hero-gallery {
  left: 83.0171%;
  bottom: 0.1543%;
  width: 16.4282%;
}

.home-world__nav {
  left: 18.1771%;
  bottom: 9.2593%;
  width: 63.6458%;
  height: 4.9074%;
  z-index: 4;
}

.home-world__nav-link {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 180px;
  padding: 0 1.5rem;
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  background: #f7f3e5;
  color: #000;
  font-family: "Anta", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    0 2px 0 rgba(0, 0, 0, 0.14);
  transition: transform 220ms ease, filter 220ms ease, background-color 220ms ease;
}

.home-world__nav-link:hover,
.home-world__nav-link:focus-visible {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 14px rgba(255, 248, 232, 0.14));
  background: #fbf8eb;
}

.home-world__nav-link.is-active {
  background: #f6c8d7;
  border-color: #1a1a1a;
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 14px rgba(255, 225, 235, 0.18));
}

.home-world__nav-link.is-entering {
  transform: scale(1.08);
  filter: drop-shadow(var(--glow));
}

.home-world__nav-link--about {
  left: 0;
  width: 14.73%;
}

.home-world__nav-link--projects {
  left: 34.2062%;
  width: 14.73%;
}

.home-world__nav-link--research {
  left: 53.6825%;
  width: 17.1849%;
}

.home-world__nav-link--gallery {
  left: 83.3061%;
  width: 14.73%;
}

.home-world__hotspots {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.home-hotspot {
  display: block;
  outline: none;
  transform-origin: center bottom;
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
  border-radius: 2rem;
}

.home-hotspot:hover,
.home-hotspot:focus-visible {
  transform: translateY(-4px) scale(1.015);
  filter: drop-shadow(0 18px 24px rgba(255, 245, 232, 0.18));
}

.home-hotspot.is-entering {
  transform: scale(1.08);
  filter: drop-shadow(var(--glow));
}

.home-hotspot--about {
  left: 18.1771%;
  top: 57.4074%;
  width: 9.8438%;
  height: 28.7963%;
}

.home-hotspot--projects {
  left: 34.6354%;
  top: 36.0185%;
  width: 15.5208%;
  height: 45.1852%;
}

.home-hotspot--research {
  left: 57.4479%;
  top: 24.4444%;
  width: 7.5521%;
  height: 58.9815%;
}

.home-hotspot--gallery {
  left: 73.6458%;
  top: 53.9815%;
  width: 13.9063%;
  height: 28.8889%;
}

.home-shortcuts {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: min(32rem, calc(100% - 1.5rem));
  margin: 1rem auto 1.25rem;
}

.home-shortcuts a {
  padding: 0.95rem 1rem;
  border-radius: 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow);
}

.room-page,
.detail-page {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.room-header,
.detail-nav,
.detail-hero {
  position: relative;
  z-index: 1;
}

.room-header {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.back-link {
  display: inline-flex;
  width: fit-content;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(110, 89, 98, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.back-link:hover,
.back-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(110, 89, 98, 0.14);
}

.kicker {
  margin: 0 0 0.6rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.86rem;
}

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.05;
}

h2 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.lead,
.paper-card p,
.detail-card p,
.research-card p {
  color: var(--muted);
  line-height: 1.8;
}

.paper-grid,
.detail-sections,
.research-grid,
.gallery-wall {
  display: grid;
  gap: 1rem;
}

.paper-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.paper-card,
.detail-card,
.research-card,
.gallery-frame,
.theme-board {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.paper-card,
.detail-card,
.research-card,
.theme-board {
  padding: 1.4rem;
}

.paper-card::before,
.detail-card::before,
.research-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(129, 106, 117, 0.2);
  border-radius: calc(var(--radius-xl) - 10px);
  pointer-events: none;
}

.paper-card--accent {
  background: rgba(255, 245, 225, 0.88);
}

.paper-card ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
  line-height: 1.9;
}

.gallery-wall {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery-frame {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.15)),
    linear-gradient(135deg, #ead8d2, #d8ecf2 55%, #f5eac5);
}

.gallery-frame::after {
  content: attr(data-label);
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 0.9rem;
}

.projects-stage {
  display: grid;
  grid-template-columns: 1.2fr 0.55fr;
  gap: 1.1rem;
  align-items: stretch;
}

.project-objects {
  position: relative;
  min-height: 620px;
  border-radius: 40px;
  background:
    radial-gradient(circle at top left, rgba(255, 249, 233, 0.7), transparent 28%),
    linear-gradient(180deg, rgba(255, 245, 235, 0.9), rgba(235, 244, 239, 0.86));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.project-objects::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(121, 100, 109, 0.2);
  border-radius: 28px;
}

.project-object {
  position: absolute;
  display: grid;
  place-items: center;
  gap: 0.75rem;
  width: 170px;
  text-align: center;
  transition: transform 220ms ease, filter 220ms ease;
}

.project-object:hover,
.project-object:focus-visible {
  transform: scale(1.08);
  filter: drop-shadow(0 16px 24px rgba(110, 89, 98, 0.2));
}

.project-object.is-entering {
  transform: scale(1.16);
}

.project-object__shape {
  display: block;
  position: relative;
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 12px 20px rgba(114, 95, 104, 0.18));
}

.project-object__label {
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

.project-object--moon { left: 10%; top: 16%; }
.project-object--person { left: 60%; top: 15%; }
.project-object--kite { left: 18%; top: 58%; }
.project-object--notebook { left: 64%; top: 56%; }

.project-object--moon .project-object__shape {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffde8, #f8d8bf 55%, #f1bfc8 100%);
}

.project-object--moon .project-object__shape::after {
  content: "";
  position: absolute;
  inset: 18px 14px 18px 42px;
  border-radius: 50%;
  background: rgba(255, 245, 235, 0.9);
}

.project-object--person .project-object__shape::before,
.project-object--person .project-object__shape::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ffe0ca, #f3b7b8);
}

.project-object--person .project-object__shape::before {
  top: 8px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.project-object--person .project-object__shape::after {
  top: 42px;
  width: 74px;
  height: 66px;
  border-radius: 46px 46px 26px 26px;
  box-shadow:
    -20px 56px 0 -6px #f3b7b8,
    20px 56px 0 -6px #f3b7b8;
}

.project-object--kite .project-object__shape {
  width: 108px;
  height: 108px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #d4f2dd, #8fd6c5 70%, #f7e6a8);
}

.project-object--kite .project-object__shape::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 70px;
  background: rgba(118, 99, 109, 0.45);
}

.project-object--notebook .project-object__shape {
  width: 104px;
  height: 132px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f7f0c8, #f3d4b0);
  border-left: 10px solid #d9b695;
}

.project-object--notebook .project-object__shape::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 16px;
  top: 26px;
  height: 2px;
  background: rgba(127, 106, 115, 0.24);
  box-shadow: 0 18px 0 rgba(127, 106, 115, 0.24), 0 36px 0 rgba(127, 106, 115, 0.24), 0 54px 0 rgba(127, 106, 115, 0.24);
}

.theme-board {
  align-self: start;
}

.theme-board__title {
  margin: 0 0 1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

.theme-word {
  margin: 0;
  padding: 0.95rem 1rem;
  border-radius: 20px;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

[data-theme-board][data-active-theme="Mood"] [data-theme-word="Mood"],
[data-theme-board][data-active-theme="Tool"] [data-theme-word="Tool"],
[data-theme-board][data-active-theme="Nature"] [data-theme-word="Nature"],
[data-theme-board][data-active-theme="Child"] [data-theme-word="Child"] {
  background: rgba(255, 250, 219, 0.82);
  color: #5d4552;
  transform: translateX(4px);
  box-shadow: 0 12px 24px rgba(112, 90, 99, 0.12);
}

.research-grid,
.detail-sections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.research-card {
  display: block;
  min-height: 280px;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.research-card:hover,
.research-card:focus-visible {
  transform: translateY(-4px) scale(1.01);
}

.research-card__icon {
  display: block;
  width: 94px;
  height: 94px;
  margin-bottom: 1rem;
  border-radius: 50%;
}

.research-card__icon--cosmic {
  background:
    radial-gradient(circle at 30% 30%, #fffce8, rgba(255, 252, 232, 0) 28%),
    radial-gradient(circle at center, #cfd8ff, #8aa0dd 60%, #5d6ca8);
}

.research-card__icon--data {
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, #c2e7ea, #b4d0f4 55%, #f7e2b2);
}

.detail-nav {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.detail-hero {
  padding: 1.8rem;
  margin-bottom: 1rem;
  border-radius: 38px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    var(--hero-gradient, linear-gradient(135deg, #f8e8de, #dceef0 60%, #f8efcf));
  box-shadow: var(--shadow);
}

.detail-page--mood { --hero-gradient: linear-gradient(135deg, #f8d7df, #ffe5d1 55%, #d3eef2); }
.detail-page--child { --hero-gradient: linear-gradient(135deg, #ffe2d2, #ffd8e4 55%, #d7e4fb); }
.detail-page--nature { --hero-gradient: linear-gradient(135deg, #d5f0df, #e9f8c8 55%, #d7e8f6); }
.detail-page--tool { --hero-gradient: linear-gradient(135deg, #dce4ff, #cce8f2 55%, #f7efc9); }
.detail-page--cosmic { --hero-gradient: linear-gradient(135deg, #d6dcff, #e1d8f7 55%, #f0ebff); }
.detail-page--data { --hero-gradient: linear-gradient(135deg, #d4ebe9, #dbe4fa 55%, #f5e4b7); }

.content-page-shell {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.content-topnav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.25rem;
}

.content-topnav a {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(110, 89, 98, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.content-topnav a:hover,
.content-topnav a:focus-visible,
.content-topnav a.is-active {
  transform: translateY(-2px);
  background: rgba(255, 248, 233, 0.92);
  box-shadow: 0 16px 30px rgba(110, 89, 98, 0.14);
}

.index-page {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.index-hero {
  padding: 1.8rem;
  border-radius: 38px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    linear-gradient(135deg, #f8e8de, #dceef0 60%, #f8efcf);
  box-shadow: var(--shadow);
}

.index-hero--projects {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    linear-gradient(135deg, #f7e0df, #ffeacc 55%, #ddeef2);
}

.index-hero--research {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    linear-gradient(135deg, #e6e6fb, #dce8f6 55%, #f4e8c8);
}

.index-hero__top {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.filter-panel--index {
  margin-bottom: 1rem;
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.index-card {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow);
  transition: none;
}

.index-card__art {
  height: 210px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12)),
    var(--card-gradient, linear-gradient(135deg, #f8e8de, #dceef0));
}

.index-card__body {
  padding: 1.35rem;
}

.index-card__body h2,
.index-card__link {
  transition: opacity 180ms ease, color 180ms ease, filter 180ms ease;
}

.index-card.is-active {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)), linear-gradient(135deg, #d8f3e3, #d9f2ef 58%, #f3f8d5);
}

.index-card.is-inactive {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)), linear-gradient(135deg, #f7e0df, #ffe6ee 58%, #f8eef7);
}

.index-card.is-active h2,
.index-card.is-active .index-card__link {
  opacity: 1;
}

.index-card.is-inactive h2 {
  opacity: 0.5;
}

.index-card.is-active .index-card__link {
  color: #111;
  filter: drop-shadow(0 0 8px rgba(190, 255, 210, 0.65));
}

.index-card.is-inactive .index-card__link {
  color: rgba(17, 17, 17, 0.55);
  filter: none;
}

.index-card.is-inactive:hover .index-card__link,
.index-card.is-inactive:focus-within .index-card__link {
  color: #111;
  filter: drop-shadow(0 0 8px rgba(255, 227, 238, 0.8));
}

.index-card__eyebrow {
  margin: 0 0 0.55rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

.index-card__body h2 {
  margin-bottom: 0.65rem;
}

.index-card__body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.index-card__link {
  display: inline-flex;
  margin-top: 1rem;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 24px rgba(110, 89, 98, 0.08);
}

.detail-hero__meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.detail-page--inner-mood .detail-hero,
.detail-page--inner-child .detail-hero,
.detail-page--inner-nature .detail-hero,
.detail-page--inner-tool .detail-hero,
.detail-page--inner-cosmic .detail-hero,
.detail-page--inner-weather .detail-hero {
  margin-top: 1rem;
}

.page-research-scene {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.74), transparent 24%),
    linear-gradient(180deg, #f8efeb 0%, #eef4f1 100%);
}

.research-scene-page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.research-scene {
  width: min(1180px, calc(100% - 2rem));
  padding: 2rem 0 4rem;
}

.research-scene__header {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.research-scene__objects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.research-object {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 1.8rem 1.2rem;
  border-radius: 34px;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.research-object:hover,
.research-object:focus-visible {
  transform: translateY(-4px) scale(1.01);
}

.research-object__shape {
  width: 122px;
  height: 122px;
}

.research-object__label {
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

.research-object--mood .research-object__shape {
  border-radius: 50% 42% 58% 48%;
  background: linear-gradient(135deg, #f7d8e5, #ffe7cf 55%, #dfeaf7);
}

.research-object--cosmic .research-object__shape {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), transparent 22%),
    radial-gradient(circle at center, #cad5ff, #889dde 62%, #5d68a8);
}

.research-object--weather .research-object__shape {
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, #cfe8e7, #dbe4fa 55%, #f4dfb7);
}

.research-scene__nav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.research-scene__nav a {
  display: inline-flex;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(110, 89, 98, 0.08);
}

.research-scene__nav a.is-active,
.research-scene__nav a:hover,
.research-scene__nav a:focus-visible {
  background: rgba(255, 248, 233, 0.92);
}

@media (max-width: 900px) {
  .paper-grid,
  .projects-stage,
  .research-grid,
  .detail-sections,
  .gallery-wall,
  .index-grid,
  .research-scene__objects {
    grid-template-columns: 1fr;
  }

  .project-objects {
    min-height: 760px;
  }
}

@media (max-width: 680px) {
  .room-page,
  .detail-page,
  .content-page-shell,
  .index-page,
  .research-scene {
    width: min(100% - 1rem, 1180px);
    padding-top: 1rem;
  }

  .home-world {
    display: flex;
    flex-direction: column;
  }

  .home-world__scene {
    height: auto;
    min-height: 0;
    padding-top: 0.5rem;
  }

  .home-world__canvas {
    width: 100vw;
    height: min(100svh, calc(100vw / 1.7777778));
  }

  .home-world__title {
    left: 12.5%;
    top: 8.7%;
    gap: 0.7rem;
    max-width: 62%;
    line-height: 0.94;
  }

  .home-world__title-yuzy {
    font-size: clamp(1.2rem, min(4vw, 4.6vh), 2rem);
  }

  .home-world__title-town {
    font-size: clamp(1rem, min(3.2vw, 4vh), 1.7rem);
  }

  .home-world__progress-wrap {
    left: 69.8%;
    top: 10%;
    width: 16.2%;
  }

  .home-world__hero {
    left: 18.1771%;
    top: 38.1481%;
    width: 63.6458%;
    height: 44.0741%;
  }

  .home-world__nav {
    display: none;
  }

  .project-object {
    width: 140px;
  }

  .project-object--moon { left: 8%; top: 10%; }
  .project-object--person { left: 56%; top: 12%; }
  .project-object--kite { left: 10%; top: 56%; }
  .project-object--notebook { left: 56%; top: 58%; }

  .home-shortcuts {
    display: grid;
  }
}

/* projects-scene-start */
.page-projects-scene {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: transparent;
}

body.page-projects-scene {
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.page-projects-scene::before {
  display: none;
}

.page-research-scene {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: transparent;
}

body.page-research-scene {
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.page-research-scene::before {
  display: none;
}

.room-page.projects-scene-page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #363636;
}

.room-page.research-scene-page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #363636;
}

.room-scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform: translate(0, 0) scale(1);
  transform-origin: top left;
  overflow: visible;
  z-index: 1;
  background: transparent;
  z-index: 1;
}

.projects-room {
  --floor-line-y: 839px;
  --floor-line-bottom: calc(1080px - var(--floor-line-y));
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}

.projects-room::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 5px solid #fff;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 2;
}

.projects-room__bg-image {
  position: absolute;
  left: -437px;
  top: -29px;
  width: 2794px;
  height: 1116px;
  display: block;
  max-width: none;
  pointer-events: none;
  z-index: 0;
}

.projects-room img,
.projects-room a,
.projects-room svg {
  user-select: none;
  -webkit-user-drag: none;
}

.projects-room__home,
.scene-door,
.projects-room__sidebar,
.projects-room__rooms,
.projects-room__cat-group {
  position: absolute;
}

.projects-room__home {
  left: 111px;
  top: -68px;
  width: 96px;
  height: 427px;
  z-index: 14;
  outline: none;
  transition: transform 220ms ease;
}

.projects-room__home-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.projects-room__home:hover,
.projects-room__home:focus-visible {
  transform: translateY(-8px);
}

.projects-room__home:focus-visible,
.projects-room__room-link:focus-visible,
.scene-door:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 4px;
}

.scene-door {
  display: block;
  overflow: visible;
  cursor: pointer;
  z-index: 12;
  transition: transform 220ms ease, filter 220ms ease;
}

.scene-door::before,
.scene-door::after {
  content: "";
  position: absolute;
  inset: -36px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}

.scene-door::before {
  z-index: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 62%),
    radial-gradient(circle at 30% 35%, rgba(186, 242, 255, 0.22), rgba(186, 242, 255, 0) 28%),
    radial-gradient(circle at 72% 65%, rgba(255, 208, 244, 0.18), rgba(255, 208, 244, 0) 24%);
  filter: blur(10px);
  transform: scale(0.96);
}

.scene-door::after {
  z-index: 4;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 2px, transparent 3px) 12% 24% / 56px 56px no-repeat,
    radial-gradient(circle, rgba(193, 240, 255, 0.9) 0 2px, transparent 3px) 78% 18% / 64px 64px no-repeat,
    radial-gradient(circle, rgba(255, 215, 244, 0.9) 0 2.5px, transparent 3.5px) 68% 74% / 72px 72px no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1.5px, transparent 2.5px) 28% 80% / 60px 60px no-repeat,
    radial-gradient(circle, rgba(203, 249, 255, 0.8) 0 1.5px, transparent 2.5px) 88% 54% / 52px 52px no-repeat;
  transform: translateY(8px) scale(0.98);
}

.scene-door:hover,
.scene-door:focus-visible,
.scene-door.is-active {
  transform: translateY(-10px);
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.18));
}

.scene-door:hover::before,
.scene-door:focus-visible::before,
.scene-door.is-active::before {
  opacity: 1;
  transform: scale(1.04);
  animation: scene-door-glow 2.8s ease-in-out infinite;
}

.scene-door:hover::after,
.scene-door:focus-visible::after,
.scene-door.is-active::after {
  opacity: 1;
  transform: translateY(-2px) scale(1.02);
  animation: scene-door-particles 3.8s ease-in-out infinite;
}

.scene-door__layer,
.projects-room__room-marker,
.projects-room__cat-group {
  display: block;
  max-width: none;
  pointer-events: none;
}

.scene-door__layer {
  position: absolute;
}

.scene-door__door {
  z-index: 1;
}

.scene-door__art {
  z-index: 1;
}

.scene-door__add {
  z-index: 2;
}

.scene-door__text {
  position: absolute;
  z-index: 3;
}

.scene-door--mood {
  left: 170px;
  bottom: var(--floor-line-bottom);
  width: 430px;
  aspect-ratio: 912 / 972;
  transform-origin: bottom center;
}

.scene-door--mood .scene-door__door {
  left: 32px;
  top: 0;
  width: 286.4px;
}

.scene-door--mood .scene-door__art {
  left: 0;
  bottom: 0;
  width: 430px;
}

.scene-door--tool {
  left: 690px;
  top: 175px;
  width: 430px;
  aspect-ratio: 821 / 697;
}

.scene-door--tool .scene-door__art {
  left: 0;
  top: 0;
  width: 430px;
}

.scene-door--nature {
  left: 646px;
  bottom: var(--floor-line-bottom);
  width: 350px;
  aspect-ratio: 868 / 591;
  transform-origin: bottom center;
}

.scene-door--nature .scene-door__art {
  left: 0;
  bottom: 0;
  width: 350px;
}

.scene-door--child {
  left: 1098px;
  bottom: var(--floor-line-bottom);
  width: 430px;
  aspect-ratio: 903 / 899;
  transform-origin: bottom center;
}

.scene-door--child .scene-door__art {
  left: 0;
  bottom: 0;
  width: 430px;
}

.projects-room--researches .scene-door--research-cosmic {
  left: 207px;
  bottom: var(--floor-line-bottom);
  width: 710px;
  aspect-ratio: 1427 / 792;
  transform-origin: 58% 100%;
}

.projects-room--researches .scene-door--research-cosmic .scene-door__art {
  left: 0;
  top: 0;
  width: 100%;
}

.projects-room--researches .scene-door--research-weather {
  left: 1090px;
  top: 137px;
  width: 396px;
  aspect-ratio: 802 / 805;
  transform-origin: 38% 88%;
}

.projects-room--researches .scene-door--research-weather .scene-door__art {
  left: 0;
  top: 0;
  width: 100%;
}

.projects-room--researches .scene-door--research-mood {
  left: 1090px;
  top: 709px;
  width: 413px;
  aspect-ratio: 826 / 288;
  transform-origin: 28% 52%;
}

.projects-room--researches .scene-door--research-mood .scene-door__art {
  left: 0;
  top: 0;
  width: 100%;
}

.projects-room__sidebar {
  left: 1681px;
  top: 1px;
  width: 241px;
  height: 1079px;
  padding-right: 40px;
  background: #505050;
  border: 5px solid #fff;
  z-index: 19;
}

.projects-room__rooms {
  left: 0;
  top: 0;
  width: 239px;
  height: 1079px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
  padding-top: 164px;
  padding-right: 10px;
  z-index: 1;
}

.projects-room__nav-heading {
  margin: 0;
  color: #f4d6ff;
  font-family: "Anta", sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.projects-room__room-link {
  position: relative;
  width: 100%;
  min-height: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  color: #fff;
  font-family: "Anta", sans-serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
  transition: color 180ms ease, transform 180ms ease;
  outline: none;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

.projects-room__room-link::after {
  content: "";
  display: block;
  width: 156px;
  height: 1px;
  background: rgba(150, 150, 150, 0.45);
}

.projects-room__room-link:hover,
.projects-room__room-link:focus-visible {
  color: #f7e6ff;
  transform: translateX(-4px);
}

.projects-room__room-link.is-active {
  color: #ffb8c8;
}

.projects-room__room-marker {
  position: absolute;
  left: 8px;
  top: 3px;
  width: 38px;
  height: 38px;
  color: currentColor;
}

.projects-room__cat-group {
  left: 34.5px;
  top: 823.5px;
  width: 166px;
  z-index: 13;
  clip-path: inset(0 0 0 58%);
}

.myself-room .projects-room__cat-group {
  clip-path: none;
}

.page-myself-scene {
  overflow: hidden;
}

.myself-room__desk,
.myself-room__light,
.myself-room__teapot,
.myself-room__sofa,
.myself-room__mirror,
.myself-room__scene-button,
.myself-drawer-layer {
  position: absolute;
}

.myself-room__desk,
.myself-room__light,
.myself-room__teapot,
.myself-room__sofa,
.myself-room__mirror {
  z-index: 11;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.myself-room__desk,
.myself-room__light,
.myself-room__teapot,
.myself-room__sofa {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.myself-room__desk:hover,
.myself-room__light:hover,
.myself-room__teapot:hover,
.myself-room__sofa:hover {
  transform: translateY(-3px);
  filter:
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.16))
    drop-shadow(0 0 10px rgba(255, 248, 240, 0.3))
    drop-shadow(0 0 18px rgba(255, 220, 235, 0.18));
  opacity: 0.99;
}

.myself-room__desk {
  left: 299px;
  top: 482px;
  width: 453.5px;
}

.myself-room__light {
  left: 370px;
  top: 258px;
  width: 148.144px;
}

.myself-room__teapot {
  left: 548px;
  top: 370px;
  width: 168px;
}

.myself-room__sofa {
  left: 950px;
  top: 611px;
  width: 551px;
}

.myself-room__mirror {
  left: 842px;
  top: 193px;
  width: 239px;
  height: 265px;
  z-index: 12;
  pointer-events: auto;
  cursor: none;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.16));
}

.myself-room__mirror::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.myself-room__mirror:hover::before,
.myself-room__mirror.is-scratching::before {
  opacity: 1;
}

.myself-room__mirror-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.myself-room__mirror-cursor {
  position: absolute;
  left: 0;
  top: 0;
  --mirror-cursor-scale: 1;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: radial-gradient(circle, #fffdf1 0%, #fef5b8 38%, rgba(254, 245, 184, 0.88) 68%, rgba(254, 245, 184, 0) 100%);
  box-shadow:
    0 0 18px rgba(254, 245, 184, 0.92),
    0 0 36px rgba(254, 245, 184, 0.58);
  transform: translate3d(var(--mirror-cursor-x, 0px), var(--mirror-cursor-y, 0px), 0) translate(-50%, -50%) scale(var(--mirror-cursor-scale));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity, box-shadow;
  transition: opacity 120ms ease, box-shadow 120ms ease;
}

.myself-room__mirror:hover .myself-room__mirror-cursor {
  opacity: 1;
}

.myself-room__mirror.is-scratching .myself-room__mirror-cursor {
  --mirror-cursor-scale: 1.12;
  box-shadow:
    0 0 24px rgba(254, 245, 184, 0.98),
    0 0 46px rgba(254, 245, 184, 0.76);
}

.myself-room__mirror-source {
  display: none;
}

.myself-room__mirror-hint {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  padding: 4px 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(255, 230, 236, 0.88);
  color: #504446;
  font-family: "Anta", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.12);
  transition: opacity 180ms ease, transform 180ms ease;
}

.myself-room__mirror.is-revealed .myself-room__mirror-hint {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

.myself-room__scene-button {
  width: 50px;
  height: 100px;
  border: 0;
  padding: 0;
  background: url("./assets/13-myself/button-bg.png") center / contain no-repeat;
  color: #504446;
  cursor: pointer;
  z-index: 15;
  filter: drop-shadow(0.8px 3.2px 3.2px rgba(0, 0, 0, 0.25));
  transition: transform 180ms ease, filter 180ms ease;
  outline: none;
}

.myself-room__scene-button span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12px 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
  font-family: "PingFang SC", "PingFangSCWeb", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.1em;
  color: #4b4346;
}

.myself-room__scene-button--more span {
  letter-spacing: 0.02em;
}

.myself-room__scene-button--contact span {
  font-size: 17px;
  letter-spacing: 0.02em;
}

.myself-room__scene-button:hover,
.myself-room__scene-button:focus-visible {
  transform: translateY(-6px);
  filter: drop-shadow(0 10px 16px rgba(255, 236, 244, 0.28)) drop-shadow(0.8px 3.2px 3.2px rgba(0, 0, 0, 0.25));
}

.myself-room__scene-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 4px;
}

.myself-room__scene-button--me {
  left: 302px;
  top: 287px;
}

.myself-room__scene-button--more {
  left: 716px;
  top: 375px;
}

.myself-room__scene-button--contact {
  left: 1351px;
  top: 696px;
}

.myself-drawer-layer {
  inset: 0;
  z-index: 28;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.myself-drawer-layer.is-open {
  pointer-events: auto;
}

.myself-drawer-layer__dismiss {
  flex: 1 1 auto;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.myself-drawer {
  position: absolute;
  right: 0;
  top: 0;
  width: 1129px;
  height: 1081px;
  padding: 0 72px 62px 86px;
  background: #ffe6ec;
  overflow: hidden;
  opacity: 0;
  transform: translateX(104%);
  transition: transform 320ms ease, opacity 220ms ease;
  pointer-events: none;
}

.myself-drawer.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.myself-drawer__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 189px;
  padding: 0 10px 10px;
}

.myself-drawer__title {
  margin: 0;
  color: #000;
  font-family: "Eater", cursive;
  font-size: 96px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.98;
  text-align: right;
}

.myself-drawer__body {
  color: #000;
}

.myself-drawer__body--me {
  width: 875px;
  margin: 128px 0 0 41px;
  display: grid;
  grid-template-columns: 224px 244px 244px;
  gap: 120px;
  align-items: start;
}

.myself-drawer__body--more {
  width: 1000px;
  min-height: 620px;
  margin: 126px 0 0 38px;
  display: grid;
  grid-template-columns: 282px minmax(0, 1fr);
  gap: 50px;
  align-items: start;
}

.myself-drawer__body--contact {
  width: 760px;
  margin: 118px 0 0 52px;
}

.myself-drawer__column,
.myself-contact__intro,
.myself-more__content {
  min-width: 0;
}

.myself-drawer__section-title {
  margin: 0 0 48px;
  color: #000;
  font-family: "Anta", sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.myself-drawer__section-title--stacked {
  max-width: 244px;
}

.myself-drawer__entry {
  margin-bottom: 66px;
  color: #000;
  font-family: "PingFangSCWeb", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.myself-drawer__entry p {
  margin: 0 0 12px;
}

.myself-drawer__column--education .myself-drawer__entry:nth-of-type(2) p:nth-of-type(2),
.myself-drawer__column--work .myself-drawer__entry p:nth-of-type(2) {
  white-space: nowrap;
}

.myself-drawer__date,
.myself-drawer__label {
  margin-bottom: 18px;
  color: #ff5a86;
  font-family: "HYHuoChaiJ", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.myself-drawer__column--work .myself-drawer__date {
  margin-bottom: 22px;
}

.myself-drawer__skills-block {
  margin-bottom: 62px;
}

.myself-drawer__skill {
  margin: 0 0 12px;
  color: #535353;
  font-family: "Anta", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.myself-drawer__cta {
  position: absolute;
  left: 86px;
  bottom: 91px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #ff4c76;
  cursor: pointer;
  font-family: "Eater", cursive;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  transition: transform 180ms ease, filter 180ms ease;
}

.myself-drawer__cta:hover,
.myself-drawer__cta:focus-visible {
  transform: translateX(6px);
  filter: drop-shadow(0 8px 12px rgba(255, 76, 118, 0.16));
}

.myself-drawer__cta:focus-visible {
  outline: 2px solid rgba(255, 76, 118, 0.38);
  outline-offset: 6px;
}

.myself-drawer__cta-arrow {
  font-size: 24px;
  line-height: 1;
}

.myself-more__tabs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding-top: 6px;
}

.myself-more__tab {
  border: 0;
  padding: 0;
  background: transparent;
  color: #81858a;
  cursor: pointer;
  text-align: left;
  font-family: "Anta", sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: color 180ms ease, transform 180ms ease;
}

.myself-more__tab:hover,
.myself-more__tab:focus-visible {
  color: #ff5b7f;
  transform: translateX(4px);
}

.myself-more__tab:focus-visible {
  outline: 2px solid rgba(255, 76, 118, 0.28);
  outline-offset: 6px;
}

.myself-more__tab.is-active {
  color: #ff4c76;
}

.myself-more__content {
  padding-top: 0;
}

.myself-more__panel {
  max-width: 640px;
  min-height: 620px;
}

.myself-more__empty {
  width: 100%;
  min-height: 620px;
}

.myself-more__text-flow {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.myself-more__text-flow--cn {
  padding: 0 42px 0 20px;
}

.myself-more__text-flow--cn p {
  color: #131313;
  font-family: "PingFangSCWeb", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 20px;
  line-height: 1.62;
  letter-spacing: 0.1em;
  margin: 0;
}

.myself-contact__lead,
.myself-contact__item p:not(.myself-drawer__label) {
  color: #3f373a;
  font-family: "PingFangSCWeb", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: 0.015em;
  margin: 0;
}

.myself-contact__intro {
  display: block;
  max-width: 860px;
  margin-bottom: 48px;
}

.myself-contact__lead {
  margin: 0;
  width: 100%;
  max-width: 620px;
  min-width: 620px;
  line-height: 1.85;
}

.myself-contact__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 520px;
}

.myself-contact__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.myself-contact__qr {
  position: absolute;
  right: 72px;
  bottom: 118px;
  width: 238px;
  padding: 18px 18px 14px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  background: rgba(255, 250, 252, 0.94);
  box-shadow: 0 18px 28px rgba(132, 98, 112, 0.16);
}

.myself-contact__qr-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #7b6a71;
  cursor: pointer;
  font-family: "Anta", sans-serif;
  font-size: 20px;
  line-height: 1;
}

.myself-contact__qr-image {
  width: 100%;
  border-radius: 14px;
}

@keyframes scene-door-glow {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1.01);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes scene-door-particles {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(4px) scale(0.98);
  }

  50% {
    opacity: 1;
    transform: translateY(-8px) scale(1.03);
  }
}

@media (max-width: 900px) {
  .projects-room__room-link {
    font-size: 22px;
  }
}

@media (max-width: 680px) {
  .projects-room__room-link {
    font-size: 20px;
    letter-spacing: 0.08em;
  }
}
/* projects-scene-end */

/* detail-project-scene-start */
.page-detail-scene::before {
  display: none;
}

body.page-detail-scene {
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.detail-scene-page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 52% 7%, rgba(244, 183, 230, 0.22), rgba(244, 183, 230, 0) 10%),
    linear-gradient(180deg, #3d3d3d 0%, #363636 100%);
}

.detail-project-scene {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 8%, rgba(233, 187, 220, 0.16), rgba(233, 187, 220, 0) 13%),
    linear-gradient(180deg, #3d3d3d 0%, #363636 100%);
}

.detail-project-scene::before,
.detail-project-scene::after {
  content: "";
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
}

.detail-project-scene::before {
  inset: 0;
  border: 5px solid rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  z-index: 20;
}

.detail-project-scene::after {
  left: 240px;
  top: 91px;
  width: 5px;
  height: 892px;
  background: rgba(255, 255, 255, 0.96);
  z-index: 3;
}

.detail-project-scene img,
.detail-project-scene a {
  user-select: none;
  -webkit-user-drag: none;
}

.detail-project-scene__top-nav,
.detail-project-scene__sidebar,
.detail-project-scene__main-frame,
.detail-project-scene__section-nav,
.detail-project-scene__decor,
.detail-project-scene__floor {
  position: absolute;
}

.detail-project-scene__top-nav {
  left: 0;
  top: 0;
  width: 1920px;
  height: 120px;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 112px 0 62px;
  background:
    linear-gradient(rgba(71, 58, 66, 0.28), rgba(71, 58, 66, 0.28)),
    var(--detail-top-nav-bg, url("./assets/06-detail_project1/top-nav.png")) center top / 100% 100% no-repeat;
}

.detail-project-scene__brand {
  display: inline-flex;
  align-items: center;
  min-height: 78px;
  transition: transform 220ms ease, filter 220ms ease;
}

.detail-project-scene__brand:hover,
.detail-project-scene__brand:focus-visible,
.detail-project-scene__top-links a:hover,
.detail-project-scene__top-links a:focus-visible,
.detail-project-scene__back:hover,
.detail-project-scene__back:focus-visible,
.detail-project-scene__topic-list a:hover,
.detail-project-scene__topic-list a:focus-visible,
.detail-project-scene__section-nav a:hover,
.detail-project-scene__section-nav a:focus-visible {
  transform: translateY(-5px);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

.detail-project-scene__brand:focus-visible,
.detail-project-scene__top-links a:focus-visible,
.detail-project-scene__back:focus-visible,
.detail-project-scene__topic-list a:focus-visible,
.detail-project-scene__section-nav a:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.94);
  outline-offset: 5px;
}

.detail-project-scene__brand-text {
  color: #fff;
  font-family: "Eater", serif;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.detail-project-scene__top-links {
  display: flex;
  align-items: center;
  gap: 70px;
  margin-top: -2px;
}

.detail-project-scene__top-links a {
  color: #ffe9ef;
  font-family: "Anta", sans-serif;
  font-size: 28px;
  line-height: 1;
  transition: transform 220ms ease, filter 220ms ease;
}

.detail-project-scene__top-links a.is-active {
  color: #98dfdd;
  font-weight: 700;
  text-decoration: none;
  text-shadow:
    0 0 8px rgba(86, 199, 193, 0.58),
    0 0 18px rgba(86, 199, 193, 0.34);
  filter: drop-shadow(0 0 10px rgba(86, 199, 193, 0.28));
}

.page-detail-scene:not(.page-detail-research1):not(.page-detail-research3) .detail-project-scene__top-links a.is-active {
  color: #ffd7e4;
  text-shadow:
    0 0 8px rgba(255, 162, 194, 0.72),
    0 0 18px rgba(255, 162, 194, 0.44),
    0 0 30px rgba(255, 209, 226, 0.24);
  filter: drop-shadow(0 0 12px rgba(255, 162, 194, 0.3));
}

.detail-project-scene__sidebar {
  left: 0;
  top: 120px;
  width: 240px;
  height: 960px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  background: rgba(91, 91, 91, 0.7);
}

.detail-project-scene__sidebar::before,
.detail-project-scene__sidebar::after {
  content: "";
  position: absolute;
  right: -5px;
  width: 112px;
  border-top: 5px solid rgba(255, 255, 255, 0.96);
  transform-origin: right center;
  z-index: 1;
}

.detail-project-scene__sidebar::before {
  display: none;
}

.detail-project-scene__sidebar::after {
  display: none;
}

.detail-project-scene__lamp-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px;
  height: 352px;
  margin-top: -96px;
  margin-bottom: 10px;
  z-index: 2;
  overflow: visible;
  cursor: pointer;
  transition: transform 220ms ease, filter 220ms ease;
}

.detail-project-scene__lamp-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 138px;
  width: 72px;
  height: 94px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(255, 248, 196, 0.5) 0%, rgba(255, 238, 168, 0.28) 45%, rgba(255, 238, 168, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.82);
  filter: blur(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.detail-project-scene__lamp-wrap img {
  position: absolute;
  left: 0;
  top: -96px;
  width: 96px;
  max-width: none;
  filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.22));
}

.detail-project-scene__lamp-wrap:hover,
.detail-project-scene__lamp-wrap:focus-within {
  transform: translateY(-3px);
}

.detail-project-scene__lamp-wrap:hover::after,
.detail-project-scene__lamp-wrap:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) scale(1.08);
}

.detail-project-scene__lamp-wrap:hover img,
.detail-project-scene__lamp-wrap:focus-within img {
  filter:
    drop-shadow(0 0 10px rgba(255, 244, 185, 0.34))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.24));
}

.detail-project-scene__back {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 121px;
  height: 52px;
  margin-top: -26px;
  margin-bottom: 52px;
  transition: transform 220ms ease, filter 220ms ease;
}

.detail-project-scene__back img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.detail-project-scene__back span {
  position: relative;
  color: #111;
  font-family: "Eater", serif;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis: none;
  text-shadow: none;
  -webkit-text-stroke: 0 transparent;
  filter: none;
}

.detail-project-scene__topic-title {
  width: 156px;
  margin-bottom: 18px;
  color: rgba(255, 238, 244, 0.92);
  font-family: "Anta", sans-serif;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
}

.detail-project-scene__topic-list {
  display: flex;
  flex-direction: column;
  width: 188px;
  gap: 34px;
  align-items: center;
  z-index: 2;
}

.detail-project-scene__topic-list a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  color: #f5f1f4;
  font-family: "Anta", sans-serif;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-align: center;
  text-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 220ms ease, filter 220ms ease, color 220ms ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis: none;
}

.detail-project-scene__topic-list a.is-active {
  color: #ffd2de;
  padding-left: 20px;
}

.detail-project-scene__topic-list a.is-active span {
  display: inline-block;
}

.detail-project-scene__topic-marker {
  position: absolute;
  left: 0;
  top: 50%;
  width: 38px;
  height: 38px;
  color: currentColor;
  transform: translateY(-50%);
}

.detail-project-scene__main-frame {
  left: 342px;
  top: 215px;
  width: 1236px;
  height: 770px;
  z-index: 5;
}

.detail-project-scene__content-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 5px solid rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  background:
    #fbf5f8 var(--detail-main-frame-bg, url("./assets/06-detail_project1/main_frame-bg.png")) center / 100% 100% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.08);
}

.detail-project-scene__content-frame::before,
.detail-project-scene__content-frame::after {
  display: none;
}

.detail-project-scene__content-scroll {
  position: absolute;
  inset: 0 34px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px 28px 48px 28px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.detail-project-scene__content-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.detail-project-scene__content-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.detail-project-scene__content-block {
  position: relative;
  min-height: 430px;
  scroll-margin-top: 24px;
}

.detail-project-scene__content-block + .detail-project-scene__content-block {
  margin-top: 0;
}

.detail-project-scene__content-block--overview {
  min-height: 0;
}

.detail-intro-sheet {
  position: relative;
  padding: 28px 56px 20px;
  color: #111;
  text-align: center;
}

.detail-intro-sheet__cat {
  position: absolute;
  display: block;
  width: 214px;
  height: auto;
  pointer-events: none;
}

.detail-intro-sheet__cat--top {
  top: 6px;
  right: 18px;
}

.detail-intro-sheet__cat--bottom {
  left: 12px;
  bottom: 26px;
  transform: scaleX(-1);
}

.detail-intro-sheet__hero {
  padding-top: 10px;
}

.detail-intro-sheet__title {
  margin: 0;
  color: #111;
  font-family: "HYHuoChaiJ", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis: none;
  text-shadow: none;
  -webkit-text-stroke: 0 transparent;
  filter: none;
  paint-order: normal;
}

.detail-intro-sheet__title::before,
.detail-intro-sheet__title::after {
  content: none !important;
}

.detail-intro-sheet__labels {
  margin: 48px auto 0;
  padding: 0;
  max-width: 820px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 48px;
  list-style: none;
}

.detail-intro-sheet__labels li {
  min-width: 121px;
  min-height: 46px;
  padding: 11px 19px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-family: "PingFangSCWeb", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  background: var(--detail-label-bg, url("./assets/06-detail_project1/LABEL-bg.png")) center / contain no-repeat;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis: none;
  text-shadow: none;
  -webkit-text-stroke: 0 transparent;
  filter: none;
  paint-order: normal;
  transform: none;
  will-change: auto;
  backface-visibility: hidden;
  isolation: isolate;
}

.detail-intro-sheet__labels li:nth-child(2) {
  min-width: 113px;
}

.detail-intro-sheet__labels li:nth-child(3) {
  min-width: 115px;
}

.detail-intro-sheet__labels li:nth-child(4) {
  min-width: 128px;
}

.detail-intro-sheet__labels li::before,
.detail-intro-sheet__labels li::after {
  content: none !important;
}

.detail-intro-sheet__rows {
  margin: 52px auto 0;
  max-width: 760px;
  display: grid;
  gap: 42px;
}

.detail-intro-row h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #111;
  font-family: "ArkPixelCN", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-decoration-color: #ff93b2;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis: none;
}

.detail-intro-row h2 img {
  width: 26px;
  height: auto;
  flex: 0 0 auto;
}

.detail-intro-row p {
  margin: 26px 0 0;
  color: #23181c;
  font-family: "ArkPixelCN", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: 0.1em;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis: none;
}

.detail-intro-sheet__details-title {
  margin: 62px 0 28px;
  color: #111;
  font-family: "ArkPixelCN", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-decoration-color: #ff93b2;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis: none;
}

.detail-intro-sheet__cover {
  margin: 0 auto;
  width: min(100%, 1118px);
  border: 0;
  box-shadow: none;
  overflow: hidden;
  background: transparent;
}

.detail-intro-sheet__cover img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.detail-project-scene__content-block--gallery {
  min-height: 0;
}

.detail-gallery-shell {
  position: relative;
  padding: 0;
  background: var(--detail-portfolio-bg, url("./assets/06-detail_project1/porfolio_content-bg.png")) top center / 100% auto repeat-y;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.page-detail-scene .detail-gallery-shell {
  background: none;
}

.detail-gallery-stack-shell {
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(83, 66, 78, 0.08);
  overflow: hidden;
}

.detail-gallery-stack-shell .detail-project-scene__content-block--gallery + .detail-project-scene__content-block--gallery {
  margin-top: 0;
}

.detail-gallery-stack-shell .detail-gallery-figure + .detail-gallery-figure {
  margin-top: 0;
}

.detail-gallery-figure {
  margin: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.detail-gallery-figure + .detail-gallery-figure {
  margin-top: 0;
}

.detail-gallery-figure img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-user-drag: none;
  user-select: none;
}

.detail-image-lightbox[hidden] {
  display: none;
}

body.is-lightbox-open {
  overflow: hidden;
}

.detail-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  --lightbox-overlay-opacity: 0;
  --lightbox-image-opacity: 0;
  --lightbox-image-transform: scale(0.92);
  pointer-events: none;
}

.detail-image-lightbox.is-opening,
.detail-image-lightbox.is-open,
.detail-image-lightbox.is-closing {
  pointer-events: auto;
}

.detail-image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 11, 19, 0.82);
  backdrop-filter: blur(6px);
  opacity: var(--lightbox-overlay-opacity);
  transition: opacity 320ms ease-out;
}

.detail-image-lightbox__dialog {
  position: absolute;
  inset: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.detail-image-lightbox__figure {
  margin: 0;
  max-width: min(1380px, 100%);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  position: relative;
  overflow: auto;
  scrollbar-width: none;
  cursor: default;
}

.detail-image-lightbox__figure::-webkit-scrollbar {
  display: none;
}

.detail-image-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 44px);
  width: auto;
  height: auto;
  border: 5px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.38);
  background: #fff7fa;
  image-rendering: auto;
  opacity: var(--lightbox-image-opacity);
  transform: var(--lightbox-image-transform);
  transform-origin: center center;
  backface-visibility: hidden;
  transition:
    transform 320ms cubic-bezier(0.22, 0.8, 0.22, 1),
    opacity 320ms ease-out;
}

.detail-image-lightbox__figure.is-tall-image {
  width: var(--lightbox-tall-image-width, min(1380px, calc(100vw - 180px)));
  max-width: min(100%, var(--lightbox-tall-image-width, min(1380px, calc(100vw - 180px))));
  max-height: calc(100vh - 44px);
  align-items: flex-start;
  justify-content: center;
  cursor: grab;
}

.detail-image-lightbox__figure.is-tall-image.is-dragging {
  cursor: grabbing;
}

.detail-image-lightbox__figure.is-tall-image .detail-image-lightbox__image {
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
}

.detail-image-lightbox__hotspots[hidden] {
  display: none;
}

.detail-image-lightbox__hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.detail-image-lightbox__hotspot {
  position: absolute;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.detail-image-lightbox.is-open {
  --lightbox-overlay-opacity: 1;
  --lightbox-image-opacity: 1;
  --lightbox-image-transform: scale(1);
}

.detail-image-lightbox.is-closing {
  --lightbox-overlay-opacity: 0;
  --lightbox-image-opacity: 1;
}

.detail-image-lightbox.is-closing .detail-image-lightbox__backdrop {
  transition-duration: 260ms;
  transition-timing-function: ease-in;
}

.detail-image-lightbox.is-closing .detail-image-lightbox__image {
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.detail-image-lightbox__close,
.detail-image-lightbox__nav {
  position: absolute;
  pointer-events: auto;
  border: 0;
  background: rgba(255, 243, 248, 0.94);
  color: #17111d;
  font-family: "Anta", sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
}

.detail-image-lightbox__close {
  top: 4px;
  right: 4px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
}

.detail-image-lightbox__nav {
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-top: -36px;
  border-radius: 22px;
  font-size: 38px;
  line-height: 1;
  padding: 0;
}

.detail-image-lightbox__nav svg {
  width: 24px;
  height: 24px;
  display: block;
}

.detail-image-lightbox__nav--prev {
  left: 0;
}

.detail-image-lightbox__nav--next {
  right: 0;
}

@media (max-width: 900px) {
  .detail-project-scene__content-scroll {
    padding: 22px 18px 36px 18px;
  }

  .detail-intro-sheet {
    padding: 24px 20px 16px;
  }

  .detail-intro-sheet__title {
    font-size: 28px;
    text-underline-offset: 12px;
  }

  .detail-intro-sheet__labels {
    margin-top: 36px;
    gap: 12px 18px;
  }

  .detail-intro-sheet__labels li {
    min-width: 112px;
    min-height: 46px;
    padding: 10px 14px 8px;
    font-size: 14px;
  }

  .detail-intro-sheet__rows {
    margin-top: 40px;
    gap: 32px;
  }

  .detail-intro-row h2 {
    font-size: 16px;
    gap: 8px;
  }

  .detail-intro-row p {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.5;
  }

  .detail-intro-sheet__details-title {
    margin-top: 46px;
    margin-bottom: 88px;
    font-size: 16px;
  }

  .detail-intro-sheet__cover {
    margin-top: 0;
  }

  .detail-intro-sheet__cat {
    width: 158px;
  }

  .detail-gallery-shell {
    padding: 0;
  }

  .detail-image-lightbox__dialog {
    inset: 18px 16px;
  }

  .detail-image-lightbox__nav {
    width: 58px;
    height: 58px;
    margin-top: -29px;
    font-size: 30px;
  }
}

@media (max-width: 560px) {
  .detail-intro-sheet__labels {
    max-width: 320px;
  }

  .detail-intro-sheet__labels li {
    min-width: 110px;
    min-height: 44px;
    font-size: 13px;
  }

  .detail-intro-row p {
    font-size: 15px;
  }

  .detail-intro-sheet__cover {
    margin-top: 0;
  }

  .detail-intro-sheet__cat--top {
    top: 4px;
    right: 0;
  }

  .detail-intro-sheet__cat--bottom {
    left: 0;
    bottom: 18px;
  }

  .detail-image-lightbox__dialog {
    inset: 14px 10px;
  }

  .detail-image-lightbox__close {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  .detail-image-lightbox__nav {
    width: 44px;
    height: 44px;
    margin-top: -22px;
    font-size: 24px;
    border-radius: 14px;
  }
}

.detail-project-scene__section-nav {
  left: 1558px;
  top: 274px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-project-scene__section-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 152px;
  min-height: 54px;
  padding: 8px 20px 9px;
  color: #111;
  font-family: "Anta", sans-serif;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  letter-spacing: 0;
  background: var(--detail-sidebar-tab-bg, url("./assets/06-detail_project1/sidebar-icon-back.png")) center / contain no-repeat;
  opacity: 1;
  transition: transform 220ms ease, filter 220ms ease, color 220ms ease, opacity 220ms ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis: none;
  transform-origin: left center;
}

.detail-project-scene__section-nav a.is-active {
  color: #111;
  font-weight: 700;
  text-shadow: none;
  background: var(--detail-sidebar-tab-active-bg, url("./assets/06-detail_project1/sidebar-icon-back-active.png")) center / contain no-repeat;
  opacity: 1;
  transform: translateX(0) scale(1.1);
  filter: none;
  font-size: 18px;
}

.detail-project-scene__scroll-rail {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 35px;
  height: calc(100% + 10px);
  border: 5px solid rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  background: #5c5c5c;
}

.detail-project-scene__scroll-thumb {
  position: absolute;
  left: 2px;
  top: 48px;
  width: 23px;
  height: 519px;
  border: 5px solid rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  background: #8e8e8e;
  cursor: ns-resize;
}

.detail-project-scene__decor {
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 220ms ease, filter 220ms ease;
}

.detail-project-scene__decor--frame {
  right: 72px;
  bottom: 80px;
  width: 208px;
}

.detail-project-scene__decor--teapot {
  right: 6px;
  bottom: 52px;
  width: 162px;
  transform-origin: 32% 78%;
}

.detail-project-scene__decor--teacup {
  right: 168px;
  bottom: 52px;
  width: 74px;
}

.detail-project-scene__decor img {
  display: block;
  width: 100%;
  height: auto;
}

.detail-project-scene__tea-stream {
  position: absolute;
  left: 16px;
  top: 8px;
  width: 22px;
  height: 108px;
  opacity: 0;
  pointer-events: none;
  border-radius: 999px 999px 999px 999px;
  background:
    linear-gradient(180deg, rgba(255, 236, 196, 0.1) 0%, rgba(255, 224, 170, 0.92) 30%, rgba(255, 217, 153, 0.8) 72%, rgba(255, 217, 153, 0) 100%);
  transform: translateY(8px) rotate(26deg) scaleY(0.78);
  transform-origin: top center;
  filter: blur(0.4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.detail-project-scene__decor:hover,
.detail-project-scene__decor:focus-visible {
  transform: translateY(-6px) scale(1.03);
  filter:
    drop-shadow(0 0 12px rgba(255, 239, 210, 0.24))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.2));
}

.detail-project-scene__decor--teapot:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 5px;
}

.detail-project-scene__decor--teapot.is-pouring {
  transform: translateY(-4px) rotate(-18deg) scale(1.02);
  filter:
    brightness(1.04)
    drop-shadow(0 0 10px rgba(255, 235, 196, 0.26))
    drop-shadow(0 12px 16px rgba(0, 0, 0, 0.22));
}

.detail-project-scene__decor--teapot.is-pouring .detail-project-scene__tea-stream {
  opacity: 1;
  transform: translateY(0) rotate(34deg) scaleY(1);
}

.detail-project-scene__decor--teacup.is-catching {
  transform: translateY(-2px) scale(1.04);
  filter:
    drop-shadow(0 0 10px rgba(255, 230, 189, 0.2))
    drop-shadow(0 12px 16px rgba(0, 0, 0, 0.18));
}

.detail-project-scene__floor {
  left: 240px;
  bottom: 0;
  width: 1680px;
  height: 124px;
  z-index: 2;
  border-top: 5px solid rgba(255, 255, 255, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0 78px, rgba(255, 255, 255, 0.96) 78px 83px, rgba(255, 255, 255, 0) 83px),
    repeating-linear-gradient(133deg, rgba(255, 255, 255, 0.96) 0 5px, transparent 5px 185px);
}

.detail-project-scene__floor::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0 5px, transparent 5px 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 680px) {
  .detail-project-scene__brand-text {
    font-size: 46px;
  }
}
.page-detail-project2 {
  --detail-top-nav-bg: url("./assets/07-detail_project2/top-nav.png");
  --detail-main-frame-bg: url("./assets/07-detail_project2/main_frame-bg.png");
  --detail-label-bg: url("./assets/07-detail_project2/LABEL-bg.png");
  --detail-portfolio-bg: url("./assets/07-detail_project2/porfolio_content-bg.png");
  --detail-sidebar-tab-bg: url("./assets/07-detail_project2/sidebar-icon-back.png");
  --detail-sidebar-tab-active-bg: url("./assets/07-detail_project2/sidebar-icon-back-active.png");
}

.page-detail-project2 .detail-intro-sheet__labels li {
  font-family: "Irish Grover", "PingFangSCWeb", "PingFang SC", serif;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.page-detail-project2 .detail-intro-sheet__labels li:nth-child(1) {
  min-width: 112px;
}

.page-detail-project2 .detail-intro-sheet__labels li:nth-child(2) {
  min-width: 135px;
}

.page-detail-project2 .detail-intro-sheet__labels li:nth-child(3) {
  min-width: 130px;
}

.page-detail-project2 .detail-intro-sheet__labels li:nth-child(4) {
  min-width: 116px;
}

.page-detail-project2 .detail-gallery-shell {
  background: none;
}

.page-detail-project2 .detail-project-scene__topic-list a.is-active {
  padding-left: 0;
}

.page-detail-project3 {
  --detail-top-nav-bg: url("./assets/07-detail_project2/top-nav.png");
  --detail-main-frame-bg: url("./assets/07-detail_project2/main_frame-bg.png");
  --detail-label-bg: url("./assets/07-detail_project2/LABEL-bg.png");
  --detail-portfolio-bg: url("./assets/07-detail_project2/porfolio_content-bg.png");
  --detail-sidebar-tab-bg: url("./assets/07-detail_project2/sidebar-icon-back.png");
  --detail-sidebar-tab-active-bg: url("./assets/07-detail_project2/sidebar-icon-back-active.png");
}

.page-detail-project3 .detail-intro-sheet__labels {
  max-width: 980px;
  gap: 20px 32px;
}

.page-detail-project3 .detail-intro-sheet__labels li {
  font-family: "Irish Grover", "PingFangSCWeb", "PingFang SC", serif;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.page-detail-project3 .detail-intro-sheet__labels li:nth-child(1) {
  min-width: 128px;
}

.page-detail-project3 .detail-intro-sheet__labels li:nth-child(2) {
  min-width: 146px;
}

.page-detail-project3 .detail-intro-sheet__labels li:nth-child(3) {
  min-width: 134px;
}

.page-detail-project3 .detail-intro-sheet__labels li:nth-child(4) {
  min-width: 115px;
}

.page-detail-project3 .detail-intro-sheet__labels li:nth-child(5) {
  min-width: 115px;
}

.page-detail-project3 .detail-gallery-shell {
  background: none;
}

.page-detail-project3 .detail-project-scene__topic-list a.is-active {
  padding-left: 0;
}

.page-detail-project4 {
  --detail-top-nav-bg: url("./assets/09-detail_project4/top-nav.png");
  --detail-main-frame-bg: url("./assets/09-detail_project4/main_frame-bg.png");
  --detail-label-bg: url("./assets/09-detail_project4/LABEL-bg.png");
  --detail-portfolio-bg: url("./assets/09-detail_project4/porfolio_content-bg.png");
  --detail-sidebar-tab-bg: url("./assets/09-detail_project4/sidebar-icon-back.png");
  --detail-sidebar-tab-active-bg: url("./assets/09-detail_project4/sidebar-icon-back-active.png");
}

.page-detail-project4 .detail-intro-sheet__labels {
  max-width: 860px;
  gap: 20px 32px;
}

.page-detail-project4 .detail-intro-sheet__labels li {
  font-family: "Irish Grover", "PingFangSCWeb", "PingFang SC", serif;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.page-detail-project4 .detail-intro-sheet__labels li:nth-child(1) {
  min-width: 128px;
}

.page-detail-project4 .detail-intro-sheet__labels li:nth-child(2) {
  min-width: 126px;
}

.page-detail-project4 .detail-intro-sheet__labels li:nth-child(3) {
  min-width: 134px;
}

.page-detail-project4 .detail-intro-sheet__labels li:nth-child(4) {
  min-width: 115px;
}

.page-detail-project4 .detail-project-scene__topic-list a.is-active {
  padding-left: 0;
}

.page-detail-project4 .detail-image-lightbox__figure.is-tall-image {
  width: var(--lightbox-tall-image-width, min(1600px, calc(100vw - 140px)));
  max-width: min(100%, var(--lightbox-tall-image-width, min(1600px, calc(100vw - 140px))));
}

.page-detail-research1 {
  --detail-top-nav-bg: url("./assets/10-detail_research1/top-nav-bg.png");
  --detail-main-frame-bg: url("./assets/10-detail_research1/main_frame-bg.png");
  --detail-label-bg: url("./assets/10-detail_research1/LABEL-bg.png");
  --detail-portfolio-bg: url("./assets/10-detail_research1/porfolio_content-bg.png");
  --detail-sidebar-tab-bg: url("./assets/10-detail_research1/sidebar-icon-back.png");
  --detail-sidebar-tab-active-bg: url("./assets/10-detail_research1/sidebar-icon-back-active.png");
}

.page-detail-research1 .detail-project-scene__topic-list {
  gap: 28px;
}

.page-detail-research1 .detail-project-scene__topic-list a {
  font-size: 22px;
  letter-spacing: 0.08em;
}

.page-detail-research1 .detail-project-scene__topic-list a.is-active {
  color: #98dfdd;
  padding-left: 34px;
}

.page-detail-research1 .detail-project-scene__topic-list a.is-active .detail-project-scene__topic-marker {
  color: #56c7c1;
  left: -2px;
}

.page-detail-research1 .detail-project-scene__top-links a.is-active {
  color: #98dfdd;
}

.page-detail-research1 .detail-project-scene__section-nav {
  gap: 8px;
}

.page-detail-research1 .detail-project-scene__section-nav a {
  min-height: 52px;
  font-size: 14px;
  padding: 8px 16px;
}

.page-detail-research1 .detail-project-scene__section-nav a.is-active {
  font-size: 16px;
}

.page-detail-research1 .detail-gallery-stack-shell {
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(83, 66, 78, 0.08);
  overflow: hidden;
}

.page-detail-research1 .detail-project-scene__tea-stream {
  background:
    linear-gradient(180deg, rgba(255, 214, 230, 0.08) 0%, rgba(255, 173, 205, 0.92) 30%, rgba(255, 142, 191, 0.84) 72%, rgba(255, 142, 191, 0) 100%);
}

.page-detail-research2 {
  --detail-top-nav-bg: url("./assets/11-detail_research2/top-nav-bg.png");
  --detail-main-frame-bg: url("./assets/11-detail_research2/main_frame-bg.png");
  --detail-label-bg: url("./assets/11-detail_research2/LABEL-bg.png");
  --detail-portfolio-bg: url("./assets/11-detail_research2/porfolio_content-bg.png");
  --detail-sidebar-tab-bg: url("./assets/11-detail_research2/sidebar-icon-back.png");
  --detail-sidebar-tab-active-bg: url("./assets/11-detail_research2/sidebar-icon-back-active.png");
}

.page-detail-research2 .detail-project-scene__topic-list {
  gap: 28px;
}

.page-detail-research2 .detail-project-scene__topic-list a {
  font-size: 22px;
  letter-spacing: 0.08em;
}

.page-detail-research2 .detail-project-scene__topic-list a.is-active {
  color: #98dfdd;
  padding-left: 34px;
}

.page-detail-research2 .detail-project-scene__topic-list a.is-active .detail-project-scene__topic-marker {
  color: #56c7c1;
  left: -2px;
}

.page-detail-research2 .detail-project-scene__top-links a.is-active {
  color: #98dfdd;
}

.page-detail-research2 .detail-project-scene__section-nav {
  gap: 8px;
}

.page-detail-research2 .detail-project-scene__section-nav a {
  min-height: 52px;
  font-size: 14px;
  padding: 8px 16px;
}

.page-detail-research2 .detail-project-scene__section-nav a.is-active {
  font-size: 16px;
}

.page-detail-research2 .detail-project-scene__tea-stream {
  background:
    linear-gradient(180deg, rgba(255, 214, 230, 0.08) 0%, rgba(255, 173, 205, 0.92) 30%, rgba(255, 142, 191, 0.84) 72%, rgba(255, 142, 191, 0) 100%);
}

.page-detail-research3 {
  --detail-top-nav-bg: url("./assets/12-detail_research3/top-nav-bg.png");
  --detail-main-frame-bg: url("./assets/12-detail_research3/main_frame-bg.png");
  --detail-label-bg: url("./assets/12-detail_research3/LABEL-bg.png");
  --detail-portfolio-bg: url("./assets/12-detail_research3/porfolio_content-bg.png");
  --detail-sidebar-tab-bg: url("./assets/12-detail_research3/sidebar-icon-back.png");
  --detail-sidebar-tab-active-bg: url("./assets/12-detail_research3/sidebar-icon-back-active.png");
}

.page-detail-research3 .detail-project-scene__topic-list {
  gap: 28px;
}

.page-detail-research3 .detail-project-scene__topic-list a {
  font-size: 22px;
  letter-spacing: 0.08em;
}

.page-detail-research3 .detail-project-scene__topic-list a.is-active {
  color: #98dfdd;
  padding-left: 34px;
}

.page-detail-research3 .detail-project-scene__topic-list a.is-active .detail-project-scene__topic-marker {
  color: #56c7c1;
  left: -2px;
}

.page-detail-research3 .detail-project-scene__top-links a.is-active {
  color: #98dfdd;
}

.page-detail-research3 .detail-project-scene__section-nav {
  gap: 10px;
}

.page-detail-research3 .detail-project-scene__section-nav a {
  min-height: 54px;
  font-size: 15px;
  padding: 8px 18px;
}

.page-detail-research3 .detail-project-scene__section-nav a.is-active {
  font-size: 17px;
}

.page-detail-research3 .detail-project-scene__tea-stream {
  background:
    linear-gradient(180deg, rgba(255, 214, 230, 0.08) 0%, rgba(255, 173, 205, 0.92) 30%, rgba(255, 142, 191, 0.84) 72%, rgba(255, 142, 191, 0) 100%);
}

.page-detail-research3 .detail-image-lightbox__image {
  border: 0;
  background: transparent;
}

/* detail-project-scene-end */

/* research-text-index-start */
.page-text-index-scene::before {
  display: none;
}

.text-index-room {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #3a3a3a;
}

.text-index-room::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 5px solid #fff;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 20;
}

.text-index-room__bg-image,
.text-index-room__decor,
.text-index-room__home img,
.text-index-room__light img,
.text-index-room__sidebar-bg,
.paper-scene-card__bg,
.paper-scene-card__arrow img {
  display: block;
  max-width: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.text-index-room__bg-image,
.text-index-room__title,
.text-index-room__home,
.text-index-room__light,
.text-index-room__sidebar,
.text-index-room__card-stage,
.text-index-room__decor {
  position: absolute;
}

.text-index-room__decor {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
  transform-origin: center bottom;
}

.text-index-room__decor:hover,
.text-index-room__decor:focus-visible {
  transform: translateY(-8px) scale(1.04);
  filter:
    drop-shadow(0 0 12px rgba(255, 244, 220, 0.22))
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.2));
}

.text-index-room__bg-image {
  inset: 0;
  width: 1920px;
  height: 1080px;
  z-index: 0;
}

.text-index-room__title {
  left: 280px;
  top: 172px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 112px;
  border: 8px solid #fff;
  border-radius: 52px;
  background: linear-gradient(125deg, #9dd6ff 0%, #b7b1ff 54%, #d9c4fb 100%);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.24);
  transform: rotate(-8deg);
}

.text-index-room__title--image {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: 331px;
  height: 305px;
  transform: none;
}

.text-index-room__title--image::before {
  left: 151px;
  bottom: calc(100% - 168px);
  height: 194px;
}

.text-index-room__title--image img {
  width: 331px;
  max-width: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.text-index-room--projects .text-index-room__title {
  left: 270px;
  top: -2px;
}

.text-index-room__title--image {
  transition: transform 220ms ease, filter 220ms ease;
  transform-origin: center top;
}

.text-index-room__title--image:hover,
.text-index-room__title--image:focus-visible {
  transform: translateY(-8px) rotate(-2deg) scale(1.03);
  filter:
    drop-shadow(0 0 14px rgba(244, 214, 255, 0.28))
    drop-shadow(0 18px 26px rgba(0, 0, 0, 0.24));
}

.text-index-room__title::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% - 10px);
  width: 4px;
  height: 164px;
  background: rgba(255, 255, 255, 0.96);
  transform: translateX(-50%);
}

.text-index-room__pin {
  position: absolute;
  left: 46px;
  top: -12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f8b53d;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.96),
    3px 3px 0 rgba(0, 0, 0, 0.12);
}

.text-index-room__pin::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 13px;
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: #b27711;
  transform: rotate(18deg);
}

.text-index-room__title-text {
  color: #101010;
  font-family: "Eater", serif;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.text-index-room__home,
.text-index-room__light,
.text-index-room__sidebar-link,
.paper-scene-card,
.text-index-chip {
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
}

.text-index-room__home {
  right: 95px;
  top: 154px;
  z-index: 8;
}

.text-index-room--projects .text-index-room__home {
  right: 96px;
  top: 157px;
}

.text-index-room__home:hover,
.text-index-room__home:focus-visible,
.text-index-room__light:hover,
.text-index-room__light:focus-visible,
.text-index-room__sidebar-link:hover,
.text-index-room__sidebar-link:focus-visible,
.paper-scene-card:hover,
.paper-scene-card:focus-visible,
.text-index-chip:hover,
.text-index-chip:focus-visible {
  transform: translateY(-8px);
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.22));
}

.text-index-room__home img {
  width: 132px;
}

.text-index-room__light {
  left: 122px;
  top: 22px;
  z-index: 7;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  outline: none;
}

.text-index-room__light--static {
  cursor: default;
}

.text-index-room--projects .text-index-room__light {
  left: 179px;
  top: -144px;
}

.text-index-room__light-cord {
  width: 4px;
  height: 118px;
  background: #0f0f0f;
}

.text-index-room--projects .text-index-room__light-cord {
  height: 146px;
}

.text-index-room__light img {
  width: 84px;
  margin-top: -2px;
  transition: filter 220ms ease, opacity 220ms ease;
}

.text-index-room--projects .text-index-room__light img {
  width: 95px;
}

.text-index-room__light::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 118px;
  width: 28px;
  height: 42px;
  border-radius: 48% 48% 42% 42%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 248, 196, 0.95) 0%, rgba(255, 239, 170, 0.72) 55%, rgba(255, 239, 170, 0) 100%);
  filter: blur(4px);
  transform: translateX(-50%) scale(0.84);
  transition: opacity 220ms ease, transform 220ms ease;
}

.text-index-room__light:hover::after,
.text-index-room__light:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scale(1.08);
}

.text-index-room__light:hover img,
.text-index-room__light:focus-visible img {
  filter:
    drop-shadow(0 0 10px rgba(255, 245, 170, 0.32))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

.text-index-room__light:focus-visible,
.text-index-room__home:focus-visible,
.text-index-room__sidebar-link:focus-visible,
.text-index-chip:focus-visible,
.paper-scene-card:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.96);
  outline-offset: 6px;
}

.text-index-room__sidebar {
  left: 52px;
  top: 322px;
  width: 235px;
  height: 648px;
  z-index: 6;
}

.text-index-room--projects .text-index-room__sidebar {
  left: 49px;
  top: 315px;
  width: 139px;
  height: 483px;
}

.text-index-room__sidebar-bg {
  width: 235px;
  height: auto;
}

.text-index-room--projects .text-index-room__sidebar-bg {
  width: 139px;
}

.text-index-room__sidebar-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 30px 40px;
}

.text-index-room--projects .text-index-room__sidebar-content {
  inset: 10px;
  padding: 36px 8px 12px;
  justify-content: flex-start;
}

.text-index-room__sidebar-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 44px;
  color: #111;
  font-family: "Anta", sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
}

.text-index-room--projects .text-index-room__sidebar-top {
  width: 71px;
  gap: 12px;
  margin-bottom: 80px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.text-index-room__sidebar-top img {
  width: 70px;
}

.text-index-room--projects .text-index-room__sidebar-top img {
  width: 71px;
}

.text-index-room__sidebar-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
  color: #111;
  font-family: "Anta", sans-serif;
  font-size: 16px;
  letter-spacing: 0.08em;
  outline: none;
}

.text-index-room--projects .text-index-room__sidebar-link {
  width: 44px;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.text-index-room__sidebar-link img {
  width: 42px;
}

.text-index-room--projects .text-index-room__sidebar-link img {
  width: 35px;
}

.text-index-room__sidebar-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #111;
  font-family: "Anta", sans-serif;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-align: center;
  outline: none;
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
}

.text-index-room__sidebar-next img {
  width: 59px;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.text-index-room--projects .text-index-room__sidebar-next {
  width: 100px;
  gap: 12px;
  margin-bottom: 0;
  margin-left: 6px;
  font-size: 16px;
  line-height: 1.22;
  letter-spacing: 0.05em;
}

.text-index-room--projects .text-index-room__sidebar-next span {
  display: block;
  width: auto;
  text-align: center;
}

.text-index-room__sidebar-next:hover,
.text-index-room__sidebar-next:focus-visible {
  transform: translateY(-8px);
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.22));
}

.text-index-room__sidebar-next:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.96);
  outline-offset: 6px;
}

.text-index-room__sidebar-label {
  width: min-content;
  margin-bottom: 26px;
  color: #111;
  text-align: center;
  font-family: "Anta", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.1em;
}

.text-index-room__filter-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.text-index-room--projects .text-index-room__filter-list {
  gap: 8px;
  margin-top: auto;
}

.text-index-room--projects .text-index-room__filter-list,
.text-index-room--projects .text-index-chip {
  display: none;
}

.text-index-chip {
  min-width: 118px;
  padding: 0.8rem 1rem;
  border: 3px solid #fff;
  border-radius: 999px;
  background: rgba(255, 220, 234, 0.88);
  color: #121212;
  font-family: "Anta", sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}

.text-index-room--projects .text-index-chip {
  min-width: 90px;
  padding: 0.48rem 0.7rem;
  border-width: 2px;
  font-size: 11px;
  letter-spacing: 0.06em;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.text-index-chip.is-active {
  background: linear-gradient(135deg, #f7bfd6, #ffdce9 60%, #fff4fb);
  color: #000;
}

.text-index-room__card-stage {
  left: 340px;
  top: 310px;
  width: 1240px;
  height: 540px;
  z-index: 5;
}

.text-index-room--projects .text-index-room__card-stage {
  --projects-card-scale: 0.8;
  left: calc(310px + ((1265px * (1 - var(--projects-card-scale))) / 2));
  top: calc(355px + ((496px * (1 - var(--projects-card-scale))) / 2));
  width: 1265px;
  height: 496px;
  transform: scale(var(--projects-card-scale));
  transform-origin: top left;
}

.text-index-room--research .text-index-room__title {
  left: 270px;
  top: -2px;
}

.text-index-room--research .text-index-room__sidebar {
  left: 49px;
  top: 315px;
  width: 139px;
  height: 483px;
}

.text-index-room--research .text-index-room__sidebar-bg {
  width: 139px;
  height: auto;
}

.text-index-room--research .text-index-room__sidebar-content {
  inset: 10px;
  padding: 36px 8px 12px;
  justify-content: flex-start;
}

.text-index-room--research .text-index-room__sidebar-top {
  width: 71px;
  gap: 12px;
  margin-bottom: 80px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.text-index-room--research .text-index-room__sidebar-link {
  width: 44px;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.text-index-room--research .text-index-room__sidebar-link img {
  width: 35px;
}

.text-index-room--research .text-index-room__sidebar-next {
  width: 100px;
  gap: 12px;
  margin-bottom: 0;
  margin-left: 6px;
  font-size: 16px;
  line-height: 1.22;
  letter-spacing: 0.05em;
}

.text-index-room--research .text-index-room__sidebar-next img {
  width: 59px;
}

.text-index-room--research .text-index-room__sidebar-next span {
  display: block;
  width: auto;
  text-align: center;
}

.text-index-room--research .text-index-room__light {
  left: 179px;
  top: -144px;
  pointer-events: auto;
  cursor: default;
}

.text-index-room--research .text-index-room__light-cord {
  height: 146px;
}

.text-index-room--research .text-index-room__light img {
  width: 95px;
}

.text-index-room--research .text-index-room__card-stage {
  left: 429px;
  top: 394px;
  width: 1063px;
  height: 408px;
  transform: none;
}

.text-index-room--research .paper-scene-card {
  width: 499.2px;
  height: 158.4px;
}

.text-index-room--research .paper-scene-card.is-top-left {
  left: 0;
  top: 0.4px;
}

.text-index-room--research .paper-scene-card.is-top-right {
  left: 563px;
  right: auto;
  top: -10.6px;
}

.text-index-room--research .paper-scene-card.is-bottom {
  left: 277px;
  top: 228.6px;
  bottom: auto;
  transform: none;
}

.text-index-room--research .paper-scene-card.is-bottom:hover,
.text-index-room--research .paper-scene-card.is-bottom:focus-visible {
  transform: translateY(-8px);
}

.text-index-room--research .paper-scene-card__bg {
  width: 499.2px;
  height: 158.4px;
}

.text-index-room--research .paper-scene-card__content {
  left: 75.2px;
  top: 37.6px;
  width: 392px;
  height: 68.8px;
}

.text-index-room--research .paper-scene-card__eyebrow {
  left: 0;
  top: 0;
  width: 298.4px;
  color: #98bebd;
  font-size: 19.2px;
  line-height: 1.5;
}

.text-index-room--research .paper-scene-card.is-active .paper-scene-card__eyebrow {
  color: #146463;
}

.text-index-room--research .paper-scene-card__title-image {
  left: 0;
  top: 28.6px;
  max-width: 325px;
  max-height: 29px;
}

.text-index-room--research .paper-scene-card__enter-icon-wrap {
  left: 353.6px;
  top: 17.6px;
  width: 38.4px;
  height: 33.6px;
}

.text-index-room--research .paper-scene-card__enter-icon-wrap::before {
  width: 28px;
  height: 28px;
}

.text-index-room--research .paper-scene-card__enter-icon {
  width: 38.4px;
  height: 33.6px;
}

.text-index-room--research .text-index-room__decor--sidebar {
  left: -18px;
  top: 752px;
  width: 176px;
  z-index: 7;
}

.text-index-room--research .text-index-room__decor--cat {
  left: 1406px;
  top: 797px;
  width: 194px;
}

.text-index-room--research .text-index-room__decor--moon {
  left: 283px;
  top: 780px;
  width: 182px;
}

.text-index-room--research .text-index-room__decor--star {
  left: 171px;
  top: 851px;
  width: 112px;
}

.text-index-room--research .text-index-room__decor--drawing {
  left: 1695px;
  top: 511px;
  width: 199px;
}

.text-index-room--research .text-index-room__decor--board {
  left: 1735px;
  top: 860px;
  width: 122px;
}

.text-index-room--research .text-index-room__decor--plants {
  left: 1575px;
  top: 701px;
  width: 184px;
}

.paper-scene-card {
  position: absolute;
  display: block;
  width: 624px;
  height: 198px;
  color: #111;
  outline: none;
}

.paper-scene-card__title-image,
.paper-scene-card__enter-icon,
.paper-scene-card__enter-icon-wrap::before {
  transition: opacity 180ms ease, filter 180ms ease;
}

.paper-scene-card__bg {
  transition: filter 180ms ease, opacity 180ms ease;
}

.paper-scene-card__enter-icon-wrap {
  position: absolute;
  left: 442px;
  top: 30px;
  width: 48px;
  height: 42px;
  display: block;
  z-index: 2;
}

.paper-scene-card__enter-icon-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(255, 250, 214, 0.92) 0%, rgba(255, 242, 172, 0.84) 58%, rgba(255, 242, 172, 0) 100%);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.6),
    0 0 14px rgba(255, 245, 190, 0.92);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

.paper-scene-card.is-active .paper-scene-card__title-image {
  opacity: 1;
}

.paper-scene-card.is-inactive .paper-scene-card__title-image {
  opacity: 0.5;
}

.paper-scene-card.is-inactive .paper-scene-card__eyebrow {
  color: #8f8f8f;
}

.paper-scene-card.is-active .paper-scene-card__enter-icon {
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.65));
}

.paper-scene-card.is-active .paper-scene-card__enter-icon-wrap::before {
  opacity: 1;
}

.paper-scene-card.is-inactive .paper-scene-card__enter-icon {
  opacity: 0.72;
  filter: none;
}

.paper-scene-card.is-inactive .paper-scene-card__enter-icon-wrap::before {
  opacity: 0;
}

.text-index-room--projects .paper-scene-card.is-active .paper-scene-card__bg {
  filter:
    brightness(1.12)
    saturate(1.08)
    drop-shadow(0 0 16px rgba(240, 248, 255, 0.2));
}

.text-index-room--projects .paper-scene-card.is-inactive .paper-scene-card__bg {
  filter: brightness(0.72) saturate(0.88);
}

.text-index-room--research .paper-scene-card.is-active .paper-scene-card__bg {
  filter:
    brightness(1.12)
    saturate(1.08)
    drop-shadow(0 0 16px rgba(240, 248, 255, 0.2));
}

.text-index-room--research .paper-scene-card.is-inactive .paper-scene-card__bg {
  filter: brightness(0.72) saturate(0.88);
}

.paper-scene-card.is-inactive:hover .paper-scene-card__enter-icon,
.paper-scene-card.is-inactive:focus-visible .paper-scene-card__enter-icon {
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.65));
}

.paper-scene-card.is-inactive:hover .paper-scene-card__enter-icon-wrap::before,
.paper-scene-card.is-inactive:focus-visible .paper-scene-card__enter-icon-wrap::before {
  opacity: 1;
}

.paper-scene-card__content {
  position: absolute;
  left: 94px;
  top: 47px;
  width: 490px;
  height: 86px;
  pointer-events: none;
}

.paper-scene-card__eyebrow {
  position: absolute;
  left: 0;
  top: 2px;
  width: 373px;
  color: #ad89b0;
  text-align: center;
  font-family: "Anta", sans-serif;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.paper-scene-card__title-image {
  position: absolute;
  left: 39px;
  top: 48px;
  width: auto;
  height: auto;
  max-width: 295px;
  max-height: 44px;
  object-fit: contain;
}

.paper-scene-card__enter-icon {
  position: absolute;
  inset: 0;
  width: 48px;
  height: 42px;
  object-fit: contain;
  z-index: 1;
}

.paper-scene-card.is-top-left {
  left: 0;
  top: 40px;
}

.text-index-room--projects .paper-scene-card.is-top-left {
  top: 0;
}

.paper-scene-card.is-top-right {
  right: 0;
  top: 78px;
}

.text-index-room--projects .paper-scene-card.is-top-right {
  left: 656px;
  right: auto;
  top: 34px;
}

.paper-scene-card.is-bottom {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.paper-scene-card.is-bottom-left {
  left: 0;
  bottom: 24px;
}

.text-index-room--projects .paper-scene-card.is-bottom-left {
  top: 248px;
  bottom: auto;
}

.paper-scene-card.is-bottom-right {
  right: 0;
  bottom: 0;
}

.text-index-room--projects .paper-scene-card.is-bottom-right {
  left: 656px;
  right: auto;
  top: 282px;
  bottom: auto;
}

.paper-scene-card.is-bottom:hover,
.paper-scene-card.is-bottom:focus-visible {
  transform: translateX(-50%) translateY(-8px);
}

.paper-scene-card.is-solo {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.paper-scene-card.is-solo:hover,
.paper-scene-card.is-solo:focus-visible {
  transform: translate(-50%, calc(-50% - 8px));
}

.paper-scene-card__bg {
  width: 624px;
  height: 198px;
}

.text-index-room__decor--star {
  left: 206px;
  bottom: 88px;
  width: 112px;
  z-index: 4;
}

.text-index-room--projects .text-index-room__decor--star {
  left: 171px;
  top: 866px;
  bottom: auto;
}

.text-index-room__decor--moon {
  left: 292px;
  bottom: 82px;
  width: 182px;
  z-index: 4;
}

.text-index-room--projects .text-index-room__decor--moon {
  left: 283px;
  top: 780px;
  bottom: auto;
}

.text-index-room__decor--plants {
  right: 160px;
  bottom: 100px;
  width: 180px;
  z-index: 4;
}

.text-index-room--projects .text-index-room__decor--plants {
  right: auto;
  left: 1575px;
  top: 689px;
  bottom: auto;
}

.text-index-room__decor--cat {
  right: 292px;
  bottom: 84px;
  width: 194px;
  z-index: 4;
}

.text-index-room--projects .text-index-room__decor--cat {
  right: auto;
  left: 1406px;
  top: 795px;
  bottom: auto;
}

.text-index-room__decor--board {
  right: 92px;
  bottom: 106px;
  width: 138px;
  z-index: 4;
}

.text-index-room--projects .text-index-room__decor--board {
  right: auto;
  left: 1721px;
  top: 835px;
  bottom: auto;
}

.text-index-room__decor--drawing {
  right: 62px;
  bottom: 252px;
  width: 188px;
  z-index: 3;
}

.text-index-room--projects .text-index-room__decor--drawing {
  right: auto;
  left: 1683px;
  top: 533px;
  bottom: auto;
}

.text-index-room__decor--sidebar {
  left: 22px;
  bottom: 104px;
  width: 176px;
  z-index: 4;
}

.text-index-room--projects .text-index-room__decor--sidebar {
  left: -18px;
  top: 752px;
  bottom: auto;
  z-index: 7;
}

@media (max-width: 680px) {
  .page-text-index-scene .room-page.projects-scene-page {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
  }
}
/* research-text-index-end */


/* =========================
   Web Font Embed
========================= */

/* Chinese decorative font */
@font-face {
  font-family: "ArkPixelCN";
  src: url("./assets/Fronts/ark-pixel-12px-monospaced-zh_cn.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HYHuoChaiJ";
  src: url("./assets/Fronts/汉仪火柴体简.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PingFangSCWeb";
  src: url("./assets/Fronts/苹方-简 常规体.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Typography Utilities
========================= */

.hero-title {
  color: #f9c5d1;
  text-shadow: 4px 7px 4px rgba(0, 0, 0, 0.25);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  font-family: "Eater", cursive;
  font-size: 88px;
  font-weight: 400;
  line-height: normal;
}

.project-title {
  color: #000;
  font-family: "Eater", cursive;
  font-size: 36px;
  font-weight: 400;
  line-height: normal;
}

.body-text {
  color: #000;
  font-family: "Anta", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}

.body-text-purple {
  color: #ad89b0;
  font-family: "Anta", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -0.6px;
}

.nav-text-white {
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
  font-family: "Anta", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2.4px;
}

.nav-text-pink {
  color: #ffb8c8;
  text-align: center;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
  font-family: "Anta", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2.4px;
}

.nav-text-lavender {
  color: #f4d6ff;
  text-align: center;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #f4d6ff;
  font-family: "Anta", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.8px;
}

.meta-text {
  color: #504446;
  font-family: "Anta", sans-serif;
  font-size: 19.2px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.384px;
  text-transform: uppercase;
}

.small-label {
  color: #000;
  font-family: "Anta", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1px;
}

.caption {
  color: #000;
  font-family: "Anta", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1px;
}

.chinese-title-gray {
  color: #595959;
  text-align: center;
  font-family: "HYHuoChaiJ", sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -0.6px;
}

.chinese-title-black {
  color: #000;
  text-align: center;
  font-family: "HYHuoChaiJ", sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -0.6px;
}

.vertical-text {
  display: flex;
  width: 49px;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: center;
}