style.css

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&family=Inter:wght@500;700;800;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    box-sizing: border-box;
  }

  html,
  body,
  #root {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #1d1712;
  }

  button,
  textarea {
    font: inherit;
  }
}

@layer components {
  .home-stage {
    --px: 0px;
    --py: 0px;
    position: fixed;
    inset: 0;
    overflow: hidden;
    color: #4e3320;
    font-family: Inter, system-ui, sans-serif;
    perspective: 1400px;
    background: #1d1712;
    isolation: isolate;
  }

  .scene-video {
    position: absolute;
    inset: -2.4vh -2.4vw;
    z-index: 0;
    width: 104.8vw;
    height: 104.8vh;
    object-fit: cover;
    opacity: 0;
    transform:
      translate3d(calc(var(--px) * -0.18), calc(var(--py) * -0.12), 0)
      scale(1.05);
    filter: saturate(1.08) contrast(1.04) brightness(0.88);
    transition: opacity 760ms ease, transform 1300ms cubic-bezier(0.19, 1, 0.22, 1), filter 760ms ease;
  }

  .scene-video.is-active {
    opacity: 1;
    transform:
      translate3d(calc(var(--px) * -0.06), calc(var(--py) * -0.04), 0)
      scale(1);
  }

  .scene-kitchen .scene-video.is-active {
    filter: saturate(1.12) contrast(1.03) brightness(0.96);
  }

  .scene-backyard .scene-video.is-active {
    filter: saturate(1.06) contrast(1.02) brightness(0.9);
  }

  .scene-study {
    background:
      radial-gradient(circle at 58% 32%, rgba(255, 232, 173, 0.26), transparent 28%),
      linear-gradient(180deg, #8a6140, #5b3a25 52%, #2d1d15);
  }

  .scene-vignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 44%, transparent 0 35%, rgba(51, 30, 15, 0.08) 56%, rgba(22, 14, 9, 0.54) 100%),
      linear-gradient(180deg, rgba(255, 224, 149, 0.1), rgba(22, 14, 9, 0.18));
  }

  .weather-layer,
  .firefly-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
  }

  .weather-layer i {
    position: absolute;
    top: -16vh;
    width: 2px;
    height: 16vh;
    border-radius: 999px;
    background: rgba(255, 244, 216, 0.36);
    animation: rainFall 1.35s linear infinite;
  }

  .weather-layer i:nth-child(1) { left: 6%; animation-delay: -0.2s; }
  .weather-layer i:nth-child(2) { left: 18%; animation-delay: -0.8s; }
  .weather-layer i:nth-child(3) { left: 31%; animation-delay: -0.4s; }
  .weather-layer i:nth-child(4) { left: 47%; animation-delay: -1.1s; }
  .weather-layer i:nth-child(5) { left: 64%; animation-delay: -0.6s; }
  .weather-layer i:nth-child(6) { left: 76%; animation-delay: -1.3s; }
  .weather-layer i:nth-child(7) { left: 87%; animation-delay: -0.1s; }
  .weather-layer i:nth-child(8) { left: 96%; animation-delay: -0.9s; }

  .firefly-layer i {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffe69a;
    box-shadow: 0 0 22px rgba(255, 220, 112, 0.96);
    animation: firefly 6.5s ease-in-out infinite;
  }

  .firefly-layer i:nth-child(1) { left: 12%; top: 68%; animation-delay: -0.4s; }
  .firefly-layer i:nth-child(2) { left: 26%; top: 42%; animation-delay: -1.1s; }
  .firefly-layer i:nth-child(3) { left: 66%; top: 61%; animation-delay: -2.2s; }
  .firefly-layer i:nth-child(4) { left: 82%; top: 33%; animation-delay: -3.1s; }
  .firefly-layer i:nth-child(5) { left: 42%; top: 78%; animation-delay: -4.1s; }
  .firefly-layer i:nth-child(6) { left: 55%; top: 24%; animation-delay: -5.3s; }

  .travel-warmth {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at center, #fff0b9 0%, rgba(246, 178, 76, 0.82) 30%, rgba(98, 58, 28, 0.1) 64%, transparent 100%);
  }

  .is-traveling .travel-warmth {
    animation: warmTravel 920ms ease both;
  }

  .scene-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    transform:
      translate3d(calc(var(--px) * 0.08), calc(var(--py) * 0.05), 80px)
      rotateX(calc(var(--py) * 0.012deg))
      rotateY(calc(var(--px) * -0.012deg));
    transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  .arrival-title {
    position: absolute;
    left: clamp(28px, 8vw, 118px);
    bottom: clamp(34px, 9vh, 92px);
    width: min(520px, 86vw);
    color: #fff3d1;
    text-shadow: 0 16px 32px rgba(25, 14, 8, 0.48);
    animation: sceneArrive 780ms ease both;
  }

  .arrival-title p,
  .scene-note,
  .room-nav button {
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .arrival-title p {
    margin: 0 0 10px;
    color: #f7ca78;
    font-size: 12px;
    font-weight: 950;
  }

  .arrival-title h1 {
    margin: 0;
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(66px, 11vw, 140px);
    font-weight: 900;
    line-height: 0.84;
  }

  .arrival-title span {
    display: block;
    margin-top: 18px;
    color: #fff6dc;
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 900;
    line-height: 1;
  }

  .arrival-title button,
  .mom-desk button,
  .mom-reopen,
  .memory-actions button,
  .tidy-hallway,
  .note-desk button,
  .backyard-note button,
  .hallway-door,
  .backyard-door,
  .kitchen-return {
    border: 4px solid #6e4429;
    border-radius: 999px;
    background: linear-gradient(#ffe8ad, #f3ad56);
    color: #4e3320;
    box-shadow: 0 22px 42px rgba(31, 18, 10, 0.3), inset 0 2px rgba(255, 255, 255, 0.52);
    cursor: pointer;
    font-weight: 950;
    transition: transform 230ms ease, filter 230ms ease, box-shadow 230ms ease;
  }

  .arrival-title button {
    margin-top: 30px;
    padding: 16px 25px;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .arrival-title button:hover,
  .mom-desk button:hover,
  .mom-reopen:hover,
  .memory-actions button:hover,
  .tidy-hallway:hover,
  .note-desk button:hover,
  .backyard-note button:hover,
  .hallway-door:hover,
  .backyard-door:hover,
  .kitchen-return:hover,
  .room-nav button:hover {
    filter: brightness(1.06);
    transform: translateY(-5px) scale(1.02);
  }

  .door-hotspot {
    position: absolute;
    left: 45%;
    bottom: 12%;
    width: 15vw;
    max-width: 180px;
    min-width: 94px;
    height: 28vh;
    min-height: 160px;
    border: 0;
    border-radius: 42% 42% 6% 6%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 214, 128, 0.2), transparent 68%);
    cursor: pointer;
    opacity: 0.55;
    filter: blur(1px);
    animation: doorPulse 3s ease-in-out infinite;
  }

  .door-hotspot:hover {
    opacity: 1;
    box-shadow: 0 0 100px rgba(255, 199, 97, 0.45);
  }

  .room-nav {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: min(920px, calc(100vw - 28px));
    translate: -50% 0;
    border: 3px solid rgba(104, 65, 41, 0.72);
    border-radius: 999px;
    background: rgba(255, 238, 197, 0.5);
    padding: 7px;
    box-shadow: 0 18px 40px rgba(30, 17, 9, 0.26), inset 0 1px rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(130%);
  }

  .scene-arrival .room-nav {
    opacity: 0;
    pointer-events: none;
  }

  .room-nav button {
    border: 0;
    border-radius: 999px;
    background: rgba(255, 246, 220, 0.72);
    padding: 10px 13px;
    color: #563820;
    font-size: 11px;
    font-weight: 950;
    cursor: pointer;
  }

  .room-nav button.locked {
    opacity: 0.52;
    filter: grayscale(0.35);
  }

  .mom-desk {
    position: absolute;
    z-index: 28;
    left: clamp(18px, 3vw, 52px);
    bottom: clamp(18px, 4vh, 42px);
    display: grid;
    width: min(360px, 30vw);
    min-width: 292px;
    gap: 10px;
    border: 5px solid rgba(94, 55, 31, 0.86);
    border-radius: 28px 16px 32px 18px;
    background:
      radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.56), transparent 22%),
      rgba(255, 244, 216, 0.76);
    padding: 13px;
    box-shadow: 0 34px 64px rgba(35, 19, 9, 0.34), inset 0 2px rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(7px) saturate(135%);
  }

  .mom-desk::before {
    content: "👩";
    position: absolute;
    right: -22px;
    top: -26px;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 4px solid #704529;
    border-radius: 50% 44% 48% 42%;
    background: #ffe8ad;
    box-shadow: 0 16px 24px rgba(31, 18, 10, 0.24);
    font-size: 31px;
    pointer-events: none;
  }

  .mom-desk-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 42px;
  }

  .mom-desk-header button {
    padding: 6px 10px;
    font-size: 10px;
  }

  .mom-desk button:disabled {
    cursor: progress;
    opacity: 0.72;
    transform: none;
  }

  .mom-reopen {
    position: absolute;
    z-index: 24;
    left: clamp(18px, 3vw, 52px);
    bottom: clamp(18px, 4vh, 42px);
    display: grid;
    min-width: 180px;
    gap: 4px;
    padding: 14px 18px;
    text-align: left;
  }

  .mom-reopen span {
    font-size: 30px;
  }

  .mom-reopen small {
    display: inline-block;
    color: #765338;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .kitchen-object-rail {
    position: absolute;
    z-index: 23;
    left: clamp(22px, 4vw, 66px);
    top: clamp(82px, 13vh, 128px);
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .kitchen-object-rail button {
    display: grid;
    min-width: 92px;
    place-items: center;
    border: 4px solid #704529;
    border-radius: 20px 11px 23px 13px;
    background: rgba(255, 244, 216, 0.84);
    color: #563820;
    padding: 9px;
    box-shadow: 0 20px 34px rgba(29, 15, 8, 0.26), inset 0 2px rgba(255, 255, 255, 0.45);
    cursor: pointer;
    font-size: 11px;
    font-weight: 950;
    backdrop-filter: blur(6px) saturate(125%);
    transition: transform 220ms ease, filter 220ms ease;
  }

  .kitchen-object-rail button:hover {
    filter: brightness(1.06);
    transform: translateY(-7px) rotate(-1deg);
  }

  .kitchen-object-rail span {
    font-size: 31px;
    filter: drop-shadow(0 8px 8px rgba(61, 35, 18, 0.2));
  }

  .kitchen-table {
    position: absolute;
    z-index: 16;
    left: 38%;
    bottom: 7vh;
    width: min(420px, 34vw);
    min-height: 220px;
    border: 5px solid rgba(100, 61, 35, 0.8);
    border-radius: 50% 46% 28px 30px;
    background:
      repeating-linear-gradient(8deg, rgba(255, 222, 162, 0.12) 0 8px, transparent 8px 18px),
      radial-gradient(ellipse at center, rgba(139, 86, 46, 0.84), rgba(91, 52, 28, 0.92));
    padding: 18px;
    box-shadow: 0 34px 0 rgba(63, 34, 17, 0.22), 0 44px 70px rgba(29, 15, 8, 0.34), inset 0 8px rgba(255, 224, 160, 0.2);
    transform: rotateX(9deg) rotateZ(-1deg);
  }

  .kitchen-table header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #fff2d1;
    font-size: 12px;
    font-weight: 950;
    text-shadow: 0 2px 8px rgba(33, 17, 8, 0.55);
  }

  .kitchen-table header span {
    opacity: 0.8;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .artifact-spread {
    position: relative;
    min-height: 154px;
  }

  .empty-table {
    margin: 30px auto 0;
    max-width: 260px;
    color: #ffe8b5;
    font-family: Fraunces, Georgia, serif;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
  }

  .table-card {
    position: absolute;
    display: grid;
    width: 122px;
    min-height: 106px;
    place-items: center;
    border: 4px solid #704529;
    border-radius: 18px 11px 20px 12px;
    background: #fff4d8;
    color: #65412a;
    padding: 9px;
    box-shadow: 0 14px 20px rgba(48, 24, 10, 0.28);
    cursor: pointer;
    animation: objectAppear 420ms cubic-bezier(0.19, 1, 0.22, 1), noteFloat 5s ease-in-out infinite;
  }

  .table-card span {
    font-size: 34px;
  }

  .table-card strong {
    font-family: Fraunces, Georgia, serif;
    font-size: 13px;
    line-height: 1;
  }

  .table-card-1 { left: 4%; top: 18%; rotate: -8deg; }
  .table-card-2 { left: 34%; top: 32%; rotate: 5deg; }
  .table-card-3 { right: 4%; top: 12%; rotate: -2deg; }
  .table-card-4 { left: 16%; bottom: 2%; rotate: 7deg; }
  .table-card-5 { right: 17%; bottom: 0; rotate: -6deg; }

  .mom-drawer {
    position: absolute;
    z-index: 24;
    left: clamp(26px, 5vw, 90px);
    top: clamp(78px, 14vh, 132px);
    display: flex;
    align-items: center;
    gap: 9px;
    border: 4px solid #704529;
    border-radius: 22px 12px 24px 13px;
    background: rgba(119, 72, 39, 0.82);
    color: #fff0c8;
    padding: 12px 14px;
    box-shadow: 0 20px 34px rgba(29, 15, 8, 0.3), inset 0 2px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    font-weight: 950;
    backdrop-filter: blur(5px);
  }

  .mom-drawer span {
    font-size: 28px;
  }

  .drawer-find,
  .inventory-shelf,
  .garden-progress {
    position: absolute;
    z-index: 26;
    border: 5px solid rgba(100, 61, 35, 0.86);
    border-radius: 24px 14px 28px 16px;
    background: rgba(255, 244, 216, 0.82);
    padding: 14px;
    box-shadow: 0 26px 46px rgba(28, 15, 8, 0.28), inset 0 2px rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(7px) saturate(125%);
  }

  .drawer-find {
    left: clamp(26px, 5vw, 90px);
    top: clamp(150px, 25vh, 240px);
    width: min(290px, 28vw);
    animation: slipIn 300ms ease both;
  }

  .drawer-find span {
    font-size: 44px;
  }

  .drawer-find strong,
  .inventory-shelf strong,
  .garden-progress strong {
    display: block;
    color: #563820;
    font-family: Fraunces, Georgia, serif;
    font-size: 20px;
    font-weight: 900;
  }

  .drawer-find p {
    margin: 7px 0 0;
    color: #68452d;
    font-size: 13px;
    font-weight: 800;
  }

  .paper-modal {
    rotate: -2deg;
    background:
      repeating-linear-gradient(180deg, transparent 0 22px, rgba(120, 80, 45, 0.1) 22px 24px),
      #fff4d8;
  }

  .paper-close {
    justify-self: end;
    border: 3px solid #8a5a36;
    border-radius: 999px;
    background: #ffe8ad;
    color: #65412a;
    padding: 5px 9px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 950;
  }

  .inventory-shelf {
    right: clamp(24px, 5vw, 84px);
    bottom: clamp(24px, 4vh, 46px);
    width: min(300px, 28vw);
  }

  .inventory-shelf div {
    display: flex;
    min-height: 42px;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-top: 8px;
  }

  .inventory-shelf button {
    display: grid;
    min-width: 58px;
    gap: 2px;
    place-items: center;
    border: 3px solid #8a5a36;
    border-radius: 14px 8px 15px 9px;
    background: #fff7df;
    color: #65412a;
    padding: 5px;
    cursor: pointer;
    box-shadow: 0 8px 12px rgba(82, 47, 26, 0.12);
    transition: transform 180ms ease;
  }

  .inventory-shelf button:hover {
    transform: translateY(-5px) rotate(-2deg);
  }

  .inventory-shelf button span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    font-size: 21px;
  }

  .inventory-shelf small {
    color: #765338;
    font-size: 9px;
    font-weight: 850;
  }

  .mom-desk label,
  .note-desk label,
  .backyard-note label {
    color: #715035;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .mom-thread {
    display: flex;
    max-height: min(230px, 26vh);
    min-height: 120px;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 5px;
    scroll-behavior: smooth;
  }

  .mom-thread::-webkit-scrollbar {
    width: 8px;
  }

  .mom-thread::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 247, 223, 0.8);
    border-radius: 999px;
    background: #a87348;
  }

  .speech-slip {
    max-width: 96%;
    margin: 0;
    border: 3px solid #8a5a36;
    border-radius: 22px 14px 24px 12px;
    background: rgba(255, 249, 232, 0.9);
    padding: 12px 14px;
    color: #67452e;
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(14px, 1.28vw, 18px);
    font-weight: 900;
    line-height: 1.18;
    white-space: pre-line;
    box-shadow: 0 14px 24px rgba(82, 47, 26, 0.14);
    animation: slipIn 300ms ease both;
  }

  .mom-onboarding {
    display: grid;
    gap: 9px;
    border: 3px solid rgba(138, 90, 54, 0.28);
    border-radius: 19px 12px 21px 13px;
    background:
      radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.46), transparent 25%),
      rgba(255, 248, 229, 0.62);
    padding: 10px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
  }

  .mom-prompt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .mom-desk .mom-prompt-chips button {
    justify-self: auto;
    border: 2px solid rgba(112, 69, 41, 0.75);
    border-radius: 999px;
    background: #fff7df;
    color: #5f3c25;
    padding: 7px 10px;
    box-shadow: 0 8px 13px rgba(82, 47, 26, 0.12);
    cursor: pointer;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: none;
    transition: transform 180ms ease, filter 180ms ease;
  }

  .mom-desk .mom-prompt-chips button:hover {
    filter: brightness(1.05);
    transform: translateY(-3px) rotate(-1deg);
  }

  .mom-prompt-chips span {
    margin-right: 4px;
  }

  .house-reacts-note,
  .mom-input-helper {
    margin: 0;
    color: #765338;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.35;
  }

  .house-reacts-note {
    border-left: 4px solid #d59952;
    padding-left: 8px;
  }

  .room-hint-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .room-hint-row span {
    display: grid;
    gap: 1px;
    border: 2px solid rgba(138, 90, 54, 0.2);
    border-radius: 13px 8px 14px 9px;
    background: rgba(255, 255, 255, 0.34);
    color: #765338;
    padding: 6px;
    font-size: 9px;
    font-weight: 850;
    line-height: 1.15;
  }

  .room-hint-row b {
    color: #563820;
    font-family: Fraunces, Georgia, serif;
    font-size: 11px;
    font-weight: 900;
  }

  .speech-slip.you {
    align-self: flex-end;
    background: rgba(244, 180, 95, 0.92);
    rotate: 1.4deg;
  }

  .speech-slip.mom {
    align-self: flex-start;
    rotate: -1deg;
  }

  .speech-slip.thinking::after {
    content: "...";
    animation: dots 1s steps(4) infinite;
  }

  .cursor {
    display: inline-block;
    width: 0.6em;
    height: 1em;
    margin-left: 4px;
    border-right: 3px solid #67452e;
    vertical-align: -0.15em;
    animation: cursorBlink 800ms steps(2) infinite;
  }

  textarea {
    min-height: 62px;
    resize: none;
    border: 3px solid #bc8c55;
    border-radius: 18px 10px 20px 12px;
    outline: none;
    background: rgba(255, 250, 235, 0.94);
    padding: 12px;
    color: #4e3320;
    box-shadow: inset 0 2px 7px rgba(96, 57, 31, 0.12);
  }

  .mom-desk button,
  .note-desk button,
  .backyard-note button {
    justify-self: start;
    padding: 9px 14px;
    font-size: 12px;
  }

  .radio-object {
    position: absolute;
    right: clamp(22px, 6vw, 92px);
    top: clamp(80px, 12vh, 126px);
    display: grid;
    width: min(310px, 28vw);
    min-width: 230px;
    grid-template-columns: 74px 1fr;
    gap: 8px 15px;
    align-items: center;
    border: 5px solid rgba(91, 54, 31, 0.88);
    border-radius: 30px 16px 28px 18px;
    background: rgba(132, 84, 50, 0.78);
    padding: 14px;
    color: #fff2d1;
    box-shadow: 0 0 42px rgba(255, 177, 72, 0.28), 0 30px 54px rgba(28, 15, 8, 0.3), inset 0 2px rgba(255, 255, 255, 0.26);
    cursor: pointer;
    backdrop-filter: blur(6px);
    animation: radioGlow 3s ease-in-out infinite;
  }

  .radio-object span {
    grid-row: 1 / 3;
    font-size: 58px;
    filter: drop-shadow(0 8px 10px rgba(38, 20, 10, 0.22));
  }

  .radio-object i {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 38px;
  }

  .radio-object i::before,
  .radio-object i::after {
    content: "";
    display: block;
    width: 10px;
    height: 28px;
    border-radius: 999px;
    background: #ffe0a0;
    box-shadow: 18px 0 #ffe0a0, 36px 0 #ffe0a0, 54px 0 #ffe0a0;
    animation: wave 1s ease-in-out infinite;
  }

  .radio-object i::after {
    width: 26px;
    height: 26px;
    border: 4px solid #ffe0a0;
    background: transparent;
    box-shadow: none;
    transform: rotate(var(--knob-turn, 0deg));
    transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  .radio-object strong {
    font-family: Fraunces, Georgia, serif;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.05;
    animation: slipIn 320ms ease both;
  }

  .radio-console {
    position: absolute;
    z-index: 21;
    right: clamp(22px, 6vw, 92px);
    top: clamp(76px, 10vh, 112px);
    display: grid;
    width: min(330px, 28vw);
    min-width: 270px;
    gap: 10px;
    border: 5px solid rgba(91, 54, 31, 0.88);
    border-radius: 30px 16px 28px 18px;
    background: rgba(132, 84, 50, 0.78);
    padding: 14px;
    color: #fff2d1;
    box-shadow: 0 0 42px rgba(255, 177, 72, 0.28), 0 30px 54px rgba(28, 15, 8, 0.3), inset 0 2px rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(6px);
    animation: radioGlow 3s ease-in-out infinite;
  }

  .radio-console header {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .radio-console header span {
    font-size: 46px;
  }

  .radio-console strong {
    display: block;
    font-family: Fraunces, Georgia, serif;
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
  }

  .radio-console small {
    color: #ffe0a0;
    font-weight: 850;
  }

  .radio-wave {
    display: flex;
    height: 38px;
    align-items: center;
    gap: 8px;
  }

  .radio-wave i {
    display: block;
    width: 9px;
    height: 12px;
    border-radius: 999px;
    background: #ffe0a0;
    opacity: 0.52;
  }

  .radio-wave.playing i {
    animation: wave 1s ease-in-out infinite;
  }

  .radio-wave i:nth-child(2) { animation-delay: -0.18s; }
  .radio-wave i:nth-child(3) { animation-delay: -0.34s; }
  .radio-wave i:nth-child(4) { animation-delay: -0.52s; }
  .radio-wave i:nth-child(5) { animation-delay: -0.7s; }

  .radio-controls {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px;
    align-items: center;
  }

  .radio-controls button,
  .station-list button {
    border: 3px solid rgba(255, 224, 160, 0.68);
    border-radius: 999px;
    background: rgba(255, 244, 216, 0.24);
    color: #fff4d8;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 950;
  }

  .radio-controls input {
    width: 100%;
    accent-color: #f4b45f;
  }

  .radio-native-player {
    width: 100%;
    height: 34px;
    border: 2px solid rgba(255, 224, 160, 0.44);
    border-radius: 999px;
    background: rgba(53, 35, 22, 0.48);
    box-shadow: inset 0 2px 7px rgba(45, 23, 9, 0.42), 0 8px 18px rgba(45, 23, 9, 0.22);
    filter: sepia(0.24) saturate(0.84);
  }

  .station-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .station-list button.active {
    background: #ffe8ad;
    color: #4e3320;
  }

  .table-object {
    position: absolute;
    right: clamp(30px, 6vw, 108px);
    bottom: clamp(26px, 8vh, 86px);
    width: min(300px, 27vw);
    min-width: 230px;
    border: 5px solid rgba(100, 61, 35, 0.86);
    border-radius: 26px 15px 30px 17px;
    background: rgba(255, 244, 216, 0.78);
    padding: 18px;
    box-shadow: 0 30px 54px rgba(28, 15, 8, 0.28), inset 0 2px rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(7px) saturate(125%);
    animation: objectAppear 520ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  .table-object span {
    display: block;
    font-size: clamp(58px, 6vw, 92px);
    line-height: 0.9;
    filter: drop-shadow(0 14px 12px rgba(68, 38, 18, 0.2));
    animation: levitate 3.5s ease-in-out infinite;
  }

  .table-object h2,
  .opened-letter h2 {
    margin: 10px 0 7px;
    color: #4e3320;
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(24px, 2.4vw, 36px);
    font-weight: 900;
    line-height: 0.98;
  }

  .table-object p,
  .opened-letter p {
    margin: 0;
    color: #68452d;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
  }

  .cat-presence,
  .garden-cat {
    position: absolute;
    z-index: 25;
    border: 0;
    background: transparent;
    font-size: clamp(58px, 7vw, 96px);
    cursor: pointer;
    filter: drop-shadow(0 18px 13px rgba(43, 23, 11, 0.35));
    transition: transform 230ms ease;
  }

  .cat-presence {
    left: 56%;
    bottom: 10%;
  }

  .garden-cat {
    left: 18%;
    bottom: 14%;
  }

  .cat-sleeping { animation: catSleep 3s ease-in-out infinite; }
  .cat-walking { animation: catWalk 4.2s ease-in-out infinite; }
  .cat-sitting { animation: levitate 4s ease-in-out infinite; }
  .cat-looking,
  .cat-presence:hover,
  .garden-cat:hover {
    transform: rotate(-8deg) translateY(-7px);
  }

  .cat-bubble,
  .scene-note {
    position: absolute;
    z-index: 35;
    margin: 0;
    border: 4px solid #74492a;
    border-radius: 999px;
    background: rgba(255, 244, 216, 0.94);
    padding: 11px 15px;
    color: #68452d;
    font-family: Fraunces, Georgia, serif;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 20px 34px rgba(31, 18, 10, 0.22);
    animation: bubbleFloat 1.8s ease both;
  }

  .cat-bubble {
    left: 58%;
    bottom: 25%;
  }

  .cat-emoji {
    display: block;
  }

  .cat-count {
    position: absolute;
    right: -2px;
    top: 4px;
    display: grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    border: 3px solid #704529;
    border-radius: 999px;
    background: #ffe8ad;
    color: #563820;
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 10px 16px rgba(43, 23, 11, 0.24);
  }

  .garden-bubble {
    left: 18%;
    bottom: 31%;
  }

  .hallway-door,
  .backyard-door,
  .kitchen-return {
    position: absolute;
    padding: 11px 17px;
    font-size: 12px;
  }

  .hallway-door {
    right: clamp(26px, 6vw, 98px);
    top: 42%;
  }

  .backyard-door {
    right: clamp(28px, 6vw, 92px);
    bottom: 38px;
  }

  .kitchen-return {
    left: clamp(28px, 5vw, 72px);
    top: 86px;
  }

  .memory-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(circle at 22% 20%, rgba(255, 229, 163, 0.42), transparent 24%),
      linear-gradient(180deg, #e4b574 0%, #c4864d 52%, #7f5532 100%);
  }

  .hall-ceiling {
    position: absolute;
    inset: 0 0 auto;
    height: 20vh;
    background: linear-gradient(135deg, #84452f, #c56d3a);
    clip-path: polygon(0 0, 100% 0, 88% 100%, 8% 100%);
  }

  .hall-lamp {
    position: absolute;
    left: 50%;
    top: 13vh;
    width: 66px;
    height: 66px;
    translate: -50% 0;
    border-radius: 50%;
    background: #ffd987;
    box-shadow: 0 0 48px rgba(255, 213, 128, 0.8), 0 0 160px rgba(255, 201, 96, 0.42);
  }

  .hall-window {
    position: absolute;
    right: 8vw;
    top: 19vh;
    width: 210px;
    height: 190px;
    border: 8px solid #704529;
    border-radius: 32px 18px 36px 20px;
    background: linear-gradient(180deg, #374f68, #182636);
    box-shadow: inset 0 0 0 10px rgba(255, 240, 200, 0.1), 0 28px 46px rgba(39, 21, 10, 0.24);
  }

  .hallway-progress {
    position: absolute;
    left: 7vw;
    top: 7vh;
    z-index: 18;
    width: min(620px, 54vw);
    border: 6px solid rgba(112, 69, 41, 0.86);
    border-radius: 30px 16px 34px 18px;
    background: rgba(255, 244, 216, 0.82);
    padding: 18px;
    box-shadow: 0 28px 54px rgba(38, 21, 10, 0.28), inset 0 2px rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(8px) saturate(130%);
  }

  .hallway-progress p {
    margin: 0 0 4px;
    color: #8a5a36;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .hallway-progress h2 {
    margin: 0;
    color: #4e3320;
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 900;
    line-height: 0.95;
  }

  .visit-line {
    display: block;
    margin-top: 8px;
    color: #8a6040;
    font-size: 13px;
    font-weight: 950;
  }

  .hallway-progress div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }

  .hallway-progress span {
    border: 3px solid #8a5a36;
    border-radius: 999px;
    background: #fff7df;
    padding: 7px 10px;
    color: #65412a;
    font-size: 12px;
    font-weight: 950;
  }

  .hallway-progress strong {
    font-family: Fraunces, Georgia, serif;
    font-size: 20px;
  }

  .hall-board {
    position: absolute;
    left: 8vw;
    top: 16vh;
    width: min(58vw, 760px);
    height: 62vh;
    border: 10px solid #704529;
    border-radius: 34px 17px 38px 20px;
    background:
      radial-gradient(circle at 30% 20%, rgba(255, 244, 216, 0.42), transparent 24%),
      rgba(187, 123, 70, 0.72);
    box-shadow: 0 38px 72px rgba(38, 21, 10, 0.3), inset 0 3px rgba(255, 255, 255, 0.36);
  }

  .floorboards {
    position: absolute;
    inset: auto 0 0;
    height: 18vh;
    background:
      repeating-linear-gradient(90deg, rgba(65, 36, 19, 0.18) 0 4px, transparent 4px 13vw),
      #8b5b36;
  }

  .memory-wall {
    position: absolute;
    left: 8vw;
    top: 29vh;
    width: min(58vw, 820px);
    height: 54vh;
    z-index: 12;
  }

  .journey-wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 160px);
    gap: 16px;
    align-content: center;
    justify-content: center;
    width: min(62vw, 860px);
    height: 376px;
    overflow: hidden;
    border: 5px solid rgba(112, 69, 41, 0.42);
    border-radius: 24px 14px 28px 16px;
    background-color: rgba(180, 120, 60, 0.15);
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(160, 100, 40, 0.06) 28px, rgba(160, 100, 40, 0.06) 29px),
      repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(160, 100, 40, 0.06) 28px, rgba(160, 100, 40, 0.06) 29px);
    padding: 22px;
    box-shadow: inset 0 3px 16px rgba(86, 48, 24, 0.12), 0 24px 44px rgba(38, 21, 10, 0.18);
  }

  .memory-artifact {
    position: relative;
    display: grid;
    height: 160px;
    min-width: 0;
    max-width: none;
    place-items: center;
    gap: 6px;
    overflow: hidden;
    border: 2px solid rgba(140, 80, 30, 0.3);
    border-radius: 12px;
    background: #fff8e8;
    color: #3a2010 !important;
    padding: 16px;
    box-shadow: 0 16px 22px rgba(82, 47, 26, 0.18);
    cursor: pointer;
    animation: objectAppear 420ms ease both;
    transition: transform 220ms ease;
    left: auto !important;
    top: auto !important;
    text-align: center;
  }

  .memory-artifact::before {
    content: "";
    position: absolute;
    top: -12px;
    width: 22px;
    height: 22px;
    border: 4px solid #704529;
    border-radius: 50%;
    background: #f4b45f;
    box-shadow: 0 5px 0 rgba(77, 44, 23, 0.12);
  }

  .memory-artifact:hover {
    transform: translateY(-8px) rotate(0deg) scale(1.03) !important;
  }

  .memory-artifact span {
    color: #3a2010 !important;
    font-size: 42px;
    line-height: 1;
  }

  .memory-artifact strong {
    color: #3a2010 !important;
    font-family: Fraunces, Georgia, serif;
    font-size: 18px;
    line-height: 1.05;
  }

  .memory-artifact small {
    color: #3a2010 !important;
    opacity: 0.72;
    font-size: 12px;
    font-weight: 950;
  }

  .memory-artifact em {
    display: block;
    color: #3a2010 !important;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.25;
  }

  .memory-artifact:nth-child(3n) {
    background: #fff8e8;
  }

  .memory-artifact:nth-child(3n + 1) {
    background: #fff8e8;
  }

  .memory-artifact:nth-child(3n + 2) {
    background: #fff8e8;
  }

  .memory-artifact-1 { left: 0; top: 4%; rotate: -7deg; }
  .memory-artifact-2 { left: 23%; top: 10%; rotate: 4deg; }
  .memory-artifact-3 { left: 48%; top: 2%; rotate: -3deg; }
  .memory-artifact-4 { left: 68%; top: 24%; rotate: 6deg; }
  .memory-artifact-5 { left: 8%; top: 46%; rotate: 8deg; }
  .memory-artifact-6 { left: 34%; top: 48%; rotate: -5deg; }
  .memory-artifact-7 { left: 58%; top: 52%; rotate: 3deg; }
  .memory-artifact-8 { left: 76%; top: 4%; rotate: -6deg; }

  .memory-detail em {
    display: block;
    margin-top: 12px;
    color: #7c5738;
    font-family: Fraunces, Georgia, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.25;
  }

  .memory-detail,
  .visitor-notes {
    padding: 16px;
  }

  .memory-detail > * + *,
  .visitor-notes > * + * {
    border-top: 1px solid rgba(140, 80, 30, 0.2);
    padding-top: 10px;
  }

  .memory-origin {
    display: block;
    margin-top: 10px;
    border: 3px solid rgba(138, 90, 54, 0.38);
    border-radius: 16px 8px 18px 10px;
    background: rgba(255, 247, 223, 0.72);
    color: #65412a;
    padding: 8px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
  }

  .memory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }

  .memory-actions button,
  .tidy-hallway {
    padding: 8px 11px;
    font-size: 11px;
  }

  .museum-shelves {
    position: absolute;
    right: 7vw;
    bottom: 38px;
    z-index: 18;
    display: grid;
    width: min(360px, 32vw);
    gap: 10px;
  }

  .tidy-hallway {
    justify-self: start;
  }

  .museum-shelves div {
    border: 5px solid rgba(100, 61, 35, 0.86);
    border-bottom: 1px solid rgba(140, 80, 30, 0.2);
    border-radius: 24px 14px 28px 16px;
    background: rgba(255, 244, 216, 0.84);
    padding: 16px;
    box-shadow: 0 20px 38px rgba(28, 15, 8, 0.2), inset 0 2px rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(7px) saturate(125%);
  }

  .museum-shelves strong {
    display: block;
    color: #563820;
    font-family: Fraunces, Georgia, serif;
    font-size: 19px;
    font-weight: 900;
  }

  .museum-shelves p {
    margin: 5px 0 0;
    color: #68452d;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
  }

  .museum-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
  }

  .museum-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
  }

  .cat-pill {
    background: #fff0d0;
    color: #5a3010;
  }

  .garden-pill {
    background: #f0f5e0;
    color: #3a5010;
  }

  .visitor-notes p {
    margin: 10px 0 0;
    color: #68452d;
    font-size: 13px;
    font-weight: 850;
  }

  .note-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .note-strip button {
    border: 2px solid #8a5a36;
    border-radius: 999px;
    background: #fff7df;
    color: #65412a;
    padding: 6px 9px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 950;
  }

  .note-desk form {
    display: grid;
    gap: 8px;
  }

  .note-desk textarea {
    min-height: 76px;
  }

  .paper-note,
  .garden-note {
    position: absolute;
    display: grid;
    place-items: center;
    border: 4px solid #815430;
    border-bottom-width: 17px;
    background:
      radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.76), transparent 28%),
      #fff4d8;
    color: #6f4b31;
    font-family: Fraunces, Georgia, serif;
    font-weight: 900;
    box-shadow: 0 16px 22px rgba(82, 47, 26, 0.18);
    cursor: pointer;
    animation: noteFloat 4.8s ease-in-out infinite;
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .paper-note {
    width: 142px;
    height: 118px;
    font-size: 20px;
  }

  .paper-note small {
    position: absolute;
    bottom: -15px;
    color: #815430;
    font-family: Inter, sans-serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .paper-note:hover,
  .garden-note:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.04) !important;
  }

  .paper-1 { left: 0; top: 4%; rotate: -7deg; animation-delay: -0.3s; }
  .paper-2 { left: 24%; top: 13%; rotate: 5deg; animation-delay: -1.1s; }
  .paper-3 { left: 47%; top: 2%; rotate: -3deg; animation-delay: -1.8s; }
  .paper-4 { left: 10%; top: 48%; rotate: 8deg; animation-delay: -2.5s; }
  .paper-5 { left: 42%; top: 50%; rotate: -6deg; animation-delay: -3.2s; }
  .paper-6 { left: 68%; top: 38%; rotate: 4deg; animation-delay: -3.8s; }

  .opened-letter,
  .note-desk,
  .backyard-note {
    position: absolute;
    border: 5px solid rgba(100, 61, 35, 0.86);
    border-radius: 26px 15px 30px 17px;
    background: rgba(255, 244, 216, 0.82);
    padding: 18px;
    box-shadow: 0 30px 54px rgba(28, 15, 8, 0.28), inset 0 2px rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(7px) saturate(125%);
  }

  .reflection-bench {
    position: absolute;
    z-index: 20;
    left: clamp(26px, 6vw, 90px);
    bottom: clamp(28px, 6vh, 72px);
    display: grid;
    width: min(430px, 36vw);
    min-width: 320px;
    gap: 10px;
    border: 6px solid #704529;
    border-radius: 28px 16px 32px 18px;
    background: rgba(255, 244, 216, 0.82);
    padding: 18px;
    box-shadow: 0 30px 54px rgba(28, 15, 8, 0.28), inset 0 2px rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(7px) saturate(125%);
  }

  .reflection-bench .bench-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 3;
    justify-self: auto;
    border: 3px solid #704529;
    border-radius: 999px;
    background: #fff4d8;
    color: #4e3320;
    padding: 8px 13px;
    box-shadow: 0 10px 18px rgba(35, 18, 8, 0.18);
    cursor: pointer;
    font-size: 12px;
    font-weight: 950;
  }

  .reflection-bench .bench-close:hover,
  .reflection-bench-tab:hover {
    transform: translateY(-3px);
  }

  .reflection-bench-tab {
    position: absolute;
    z-index: 24;
    left: clamp(26px, 6vw, 90px);
    bottom: clamp(28px, 6vh, 72px);
    border: 5px solid #704529;
    border-radius: 999px;
    background: linear-gradient(#fff1c9, #f5b760);
    color: #4e3320;
    padding: 12px 18px;
    box-shadow: 0 18px 32px rgba(28, 15, 8, 0.28);
    cursor: pointer;
    font-size: 13px;
    font-weight: 950;
  }

  .reflection-bench h2 {
    margin: 0;
    padding: 0 78px;
    color: #4e3320;
    font-family: Fraunces, Georgia, serif;
    font-size: 34px;
    font-weight: 900;
  }

  .reflection-bench p {
    margin: 0;
    color: #68452d;
    font-size: 17px;
    font-weight: 900;
  }

  .bench-garden-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    border: 3px solid rgba(112, 69, 41, 0.34);
    border-radius: 18px 9px 20px 11px;
    background: rgba(255, 247, 223, 0.55);
    padding: 8px;
  }

  .bench-garden-row button {
    display: grid;
    min-width: 50px;
    place-items: center;
    border: 2px solid #8a5a36;
    border-radius: 14px 8px 16px 9px;
    background: #fff7df;
    padding: 5px;
  }

  .bench-garden-row span {
    font-size: 24px;
  }

  .bench-garden-row small {
    color: #68452d;
    font-size: 9px;
    font-weight: 900;
  }

  .reflection-bench form {
    display: grid;
    gap: 9px;
  }

  .reflection-bench button {
    justify-self: start;
    border: 4px solid #6e4429;
    border-radius: 999px;
    background: linear-gradient(#ffe8ad, #f3ad56);
    color: #4e3320;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 950;
  }

  .reflection-bench .bench-garden-row button {
    justify-self: auto;
    border: 2px solid #8a5a36;
    border-radius: 14px 8px 16px 9px;
    background: #fff7df;
    color: #65412a;
    padding: 5px;
  }

  .garden-growth {
    position: absolute;
    inset: 12vh 6vw 18vh 42vw;
    pointer-events: none;
  }

  .plant {
    position: absolute;
    z-index: 18;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #fff4d8;
    cursor: pointer;
    filter: drop-shadow(0 16px 10px rgba(28, 15, 8, 0.28));
    pointer-events: auto;
    animation: objectAppear 480ms ease both, levitate 4.2s ease-in-out infinite;
  }

  .plant span {
    font-size: clamp(44px, 5vw, 78px);
  }

  .plant small {
    border: 3px solid #704529;
    border-radius: 999px;
    background: rgba(255, 244, 216, 0.86);
    color: #563820;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 950;
  }

  .plant-1 { left: 4%; bottom: 4%; }
  .plant-2 { left: 22%; bottom: 18%; animation-delay: -0.5s; }
  .plant-3 { left: 44%; bottom: 8%; animation-delay: -1s; }
  .plant-4 { left: 66%; bottom: 24%; animation-delay: -1.5s; }
  .plant-5 { left: 18%; bottom: 42%; animation-delay: -2s; }
  .plant-6 { left: 52%; bottom: 48%; animation-delay: -2.5s; }
  .plant-7 { left: 76%; bottom: 4%; animation-delay: -3s; }
  .plant-8 { left: 34%; bottom: 62%; animation-delay: -3.5s; }
  .plant-9 { left: 86%; bottom: 44%; animation-delay: -4s; }
  .plant-10 { left: 4%; bottom: 70%; animation-delay: -4.5s; }

  .garden-progress {
    right: clamp(24px, 5vw, 84px);
    top: clamp(74px, 12vh, 118px);
    display: grid;
    width: min(270px, 26vw);
    gap: 7px;
  }

  .garden-progress span {
    color: #68452d;
    font-weight: 900;
  }

  .opened-letter {
    right: 7vw;
    top: 24vh;
    width: min(340px, 31vw);
    min-height: 180px;
  }

  .note-desk {
    right: 7vw;
    bottom: 74px;
    display: grid;
    width: min(340px, 31vw);
    gap: 9px;
  }

  .garden-notes {
    position: absolute;
    right: 7vw;
    top: 18vh;
    width: 330px;
    height: 260px;
  }

  .garden-note {
    width: 118px;
    height: 92px;
    border-bottom-width: 14px;
    font-size: 16px;
  }

  .garden-note-1 { left: 0; top: 0; rotate: -6deg; }
  .garden-note-2 { right: 20px; top: 18px; rotate: 7deg; }
  .garden-note-3 { left: 76px; top: 108px; rotate: -2deg; }

  .study-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background:
      radial-gradient(circle at 28% 18%, rgba(255, 235, 180, 0.28), transparent 20%),
      linear-gradient(180deg, #9d704b 0%, #7c5234 52%, #3b2519 100%);
  }

  .study-wall {
    position: absolute;
    inset: 9vh 8vw 18vh;
    border: 8px solid rgba(88, 51, 29, 0.88);
    border-radius: 36px 18px 42px 22px;
    background:
      repeating-linear-gradient(90deg, rgba(88, 51, 29, 0.08) 0 6px, transparent 6px 72px),
      linear-gradient(135deg, rgba(255, 240, 203, 0.72), rgba(199, 145, 92, 0.72));
    box-shadow: inset 0 4px rgba(255, 250, 224, 0.38), 0 36px 80px rgba(35, 20, 12, 0.36);
  }

  .study-window {
    position: absolute;
    right: 12vw;
    top: 13vh;
    width: 170px;
    height: 150px;
    border: 8px solid #704529;
    border-radius: 26px 14px 30px 16px;
    background:
      linear-gradient(90deg, transparent 47%, rgba(255, 244, 216, 0.35) 48% 52%, transparent 53%),
      linear-gradient(180deg, transparent 47%, rgba(255, 244, 216, 0.35) 48% 52%, transparent 53%),
      radial-gradient(circle at 70% 20%, #ffe8ad 0 10%, transparent 12%),
      linear-gradient(180deg, #33445d, #1b2634);
    box-shadow: 0 22px 46px rgba(38, 21, 10, 0.24), inset 0 0 28px rgba(255, 224, 160, 0.16);
  }

  .study-shelf {
    position: absolute;
    left: 12vw;
    width: min(430px, 38vw);
    height: 18px;
    border: 4px solid #5e371f;
    border-radius: 999px;
    background: linear-gradient(#9c6338, #6f4227);
    box-shadow: 0 18px 28px rgba(42, 23, 13, 0.24);
  }

  .shelf-one { top: 24vh; }
  .shelf-two { top: 39vh; left: 16vw; }

  .study-floor {
    position: absolute;
    inset: auto 0 0;
    height: 22vh;
    background:
      repeating-linear-gradient(90deg, rgba(65, 36, 19, 0.24) 0 4px, transparent 4px 10vw),
      linear-gradient(180deg, #7b4c2e, #4a2c1d);
  }

  .study-rug {
    position: absolute;
    left: 44%;
    bottom: 8vh;
    width: min(460px, 42vw);
    height: 108px;
    transform: translateX(-50%) rotateX(58deg) rotateZ(-2deg);
    border: 7px solid rgba(92, 54, 31, 0.78);
    border-radius: 50%;
    background:
      repeating-radial-gradient(ellipse at center, rgba(255, 232, 173, 0.34) 0 8px, transparent 8px 19px),
      #b56545;
    box-shadow: 0 28px 38px rgba(32, 17, 9, 0.28);
  }

  .study-library {
    position: absolute;
    z-index: 16;
    left: clamp(26px, 6vw, 92px);
    top: clamp(82px, 13vh, 128px);
    width: min(720px, 58vw);
    min-height: 560px;
    border: 7px solid rgba(90, 53, 30, 0.86);
    border-radius: 34px 17px 38px 20px;
    background:
      radial-gradient(circle at 78% 16%, rgba(255, 232, 173, 0.42), transparent 19%),
      rgba(255, 244, 216, 0.72);
    padding: 24px;
    box-shadow: 0 36px 76px rgba(35, 19, 9, 0.34), inset 0 3px rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px) saturate(128%);
  }

  .study-library header p {
    margin: 0 0 4px;
    color: #8a5a36;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .study-library h2 {
    margin: 0;
    color: #4e3320;
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(38px, 5vw, 70px);
    font-weight: 900;
    line-height: 0.9;
  }

  .study-library header span {
    display: block;
    margin-top: 8px;
    color: #68452d;
    font-weight: 850;
  }

  .library-lamp {
    position: absolute;
    right: 58px;
    top: 36px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #ffd987;
    box-shadow: 0 0 38px rgba(255, 213, 128, 0.9), 0 0 118px rgba(255, 201, 96, 0.5);
    animation: candleFlicker 2.8s ease-in-out infinite;
  }

  .bookcase {
    position: relative;
    display: flex;
    align-items: end;
    gap: 7px;
    height: 150px;
    margin-top: 28px;
    border: 8px solid #704529;
    border-radius: 24px 12px 28px 14px;
    background:
      linear-gradient(180deg, transparent 0 45%, rgba(93, 55, 31, 0.28) 46% 53%, transparent 54%),
      rgba(128, 78, 44, 0.34);
    padding: 18px 16px;
    box-shadow: inset 0 3px rgba(255, 235, 190, 0.28), 0 18px 30px rgba(45, 24, 13, 0.2);
  }

  .book-spine {
    width: 42px;
    height: var(--book-height, 96px);
    border: 3px solid rgba(73, 43, 25, 0.65);
    border-radius: 8px 5px 9px 4px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: var(--book-color, #b56545);
    color: #fff7df;
    padding: 7px 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 10px 14px rgba(46, 24, 13, 0.22), inset 2px 0 rgba(255, 255, 255, 0.18);
    transition: transform 180ms ease;
  }

  .book-spine:hover {
    transform: translateY(-9px) rotate(-2deg);
  }

  .book-1 { --book-height: 104px; --book-color: #b56545; }
  .book-2 { --book-height: 118px; --book-color: #6c8a55; }
  .book-3 { --book-height: 92px; --book-color: #d69b4f; }
  .book-4 { --book-height: 126px; --book-color: #7c6c9e; }
  .book-5 { --book-height: 108px; --book-color: #9b5c3d; }
  .book-6 { --book-height: 116px; --book-color: #557b80; }

  .study-desk {
    position: relative;
    height: 230px;
    margin-top: 34px;
    border: 7px solid #704529;
    border-radius: 42% 44% 24px 25px;
    background:
      repeating-linear-gradient(7deg, rgba(255, 222, 162, 0.12) 0 8px, transparent 8px 18px),
      linear-gradient(135deg, #9f6438, #6b3e25);
    box-shadow: 0 32px 0 rgba(63, 34, 17, 0.2), 0 44px 60px rgba(29, 15, 8, 0.3), inset 0 8px rgba(255, 224, 160, 0.18);
    transform: rotateX(5deg);
  }

  .laptop {
    position: absolute;
    left: 36px;
    top: 30px;
    width: 250px;
    filter: drop-shadow(0 20px 18px rgba(35, 18, 9, 0.28));
  }

  .laptop-screen {
    min-height: 128px;
    border: 7px solid #4b3326;
    border-radius: 18px 12px 16px 10px;
    background:
      linear-gradient(135deg, rgba(255, 232, 173, 0.2), transparent 40%),
      #27343b;
    padding: 16px;
    color: #fff4d8;
  }

  .laptop-screen span {
    display: block;
    margin-bottom: 12px;
    color: #ffc66d;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .laptop-screen p {
    margin: 0;
    font-family: Fraunces, Georgia, serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.05;
  }

  .laptop-base {
    height: 24px;
    margin: 0 18px;
    border-radius: 0 0 18px 18px;
    background: #c9b28c;
    box-shadow: inset 0 4px rgba(255, 255, 255, 0.26);
  }

  .paper-page {
    position: absolute;
    display: grid;
    width: 148px;
    min-height: 116px;
    gap: 6px;
    border: 4px solid #704529;
    border-radius: 18px 9px 20px 11px;
    background:
      repeating-linear-gradient(180deg, transparent 0 20px, rgba(120, 80, 45, 0.12) 20px 22px),
      #fff4d8;
    color: #60412b;
    padding: 14px;
    cursor: pointer;
    box-shadow: 0 18px 20px rgba(45, 24, 13, 0.22);
    transition: transform 180ms ease;
  }

  .paper-page:hover {
    transform: translateY(-8px) rotate(0deg) !important;
  }

  .paper-page strong {
    font-family: Fraunces, Georgia, serif;
    font-size: 18px;
    line-height: 1;
  }

  .paper-page span {
    font-size: 12px;
    font-weight: 850;
  }

  .page-one { right: 190px; top: 38px; rotate: -7deg; }
  .page-two { right: 58px; top: 78px; rotate: 5deg; }
  .page-three { right: 122px; bottom: 20px; rotate: -2deg; }

  .study-side {
    position: absolute;
    z-index: 18;
    right: clamp(28px, 7vw, 96px);
    top: clamp(120px, 18vh, 170px);
    display: grid;
    width: min(340px, 29vw);
    gap: 12px;
    border: 6px solid rgba(90, 53, 30, 0.86);
    border-radius: 28px 14px 32px 16px;
    background: rgba(255, 244, 216, 0.78);
    padding: 18px;
    box-shadow: 0 30px 58px rgba(35, 19, 9, 0.3), inset 0 2px rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(7px) saturate(126%);
  }

  .study-side strong {
    color: #4e3320;
    font-family: Fraunces, Georgia, serif;
    font-size: 28px;
    line-height: 1;
  }

  .study-side p {
    margin: 0;
    color: #68452d;
    font-weight: 850;
    line-height: 1.35;
  }

  .study-artifacts {
    display: grid;
    gap: 8px;
  }

  .study-artifacts button {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 3px solid #8a5a36;
    border-radius: 16px 9px 18px 10px;
    background: #fff7df;
    color: #65412a;
    padding: 9px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 950;
    text-align: left;
  }

  .study-artifacts span {
    font-size: 22px;
  }

  .study-artifacts em {
    color: #68452d;
    font-size: 13px;
    font-style: normal;
    font-weight: 850;
  }

  .study-return {
    right: clamp(28px, 7vw, 96px);
    bottom: clamp(30px, 7vh, 74px);
  }

  .attic-scene,
  .greenhouse-scene {
    background:
      radial-gradient(circle at 42% 28%, rgba(255, 232, 173, 0.2), transparent 30%),
      linear-gradient(180deg, rgba(107, 74, 46, 0.86), rgba(50, 31, 21, 0.94));
  }

  .greenhouse-scene {
    background:
      radial-gradient(circle at 62% 28%, rgba(226, 244, 196, 0.34), transparent 28%),
      linear-gradient(180deg, rgba(91, 126, 82, 0.86), rgba(38, 65, 43, 0.94));
  }

  .locked-room-panel {
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 18;
    display: grid;
    width: min(680px, 78vw);
    gap: 14px;
    translate: -50% -50%;
    border: 7px solid rgba(90, 53, 30, 0.86);
    border-radius: 34px 17px 38px 20px;
    background:
      radial-gradient(circle at 78% 16%, rgba(255, 232, 173, 0.36), transparent 19%),
      rgba(255, 244, 216, 0.82);
    padding: 24px;
    box-shadow: 0 36px 76px rgba(35, 19, 9, 0.34), inset 0 3px rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px) saturate(128%);
  }

  .greenhouse-panel {
    border-color: rgba(68, 94, 57, 0.88);
    background:
      radial-gradient(circle at 78% 16%, rgba(226, 244, 196, 0.42), transparent 19%),
      rgba(244, 255, 221, 0.82);
  }

  .locked-room-panel p {
    margin: 0;
    color: #8a5a36;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .locked-room-panel h2 {
    margin: 0;
    color: #4e3320;
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 0.94;
  }

  .locked-room-panel span,
  .locked-room-panel em {
    color: #68452d;
    font-size: 16px;
    font-style: normal;
    font-weight: 850;
    line-height: 1.4;
  }

  .room-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    border: 4px solid rgba(112, 69, 41, 0.5);
    border-radius: 22px 12px 24px 14px;
    background: rgba(255, 247, 223, 0.74);
    padding: 12px;
  }

  .attic-trunk,
  .greenhouse-stats {
    display: grid;
    gap: 8px;
    border: 4px solid rgba(112, 69, 41, 0.62);
    border-radius: 24px 12px 28px 14px;
    background:
      radial-gradient(circle at 20% 10%, rgba(255, 232, 173, 0.44), transparent 32%),
      rgba(116, 72, 42, 0.18);
    padding: 13px;
  }

  .attic-trunk.open {
    background:
      radial-gradient(circle at 30% 16%, rgba(255, 218, 132, 0.5), transparent 34%),
      rgba(255, 247, 223, 0.58);
  }

  .attic-trunk strong {
    color: #4e3320;
    font-family: Fraunces, Georgia, serif;
    font-size: 22px;
  }

  .attic-trunk p {
    margin: 0;
    color: #68452d;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
  }

  .attic-trunk button {
    justify-self: start;
    border: 3px solid #8a5a36;
    border-radius: 999px;
    background: #fff7df;
    color: #65412a;
    padding: 8px 11px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 950;
  }

  .greenhouse-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .greenhouse-stats span {
    border: 3px solid rgba(68, 94, 57, 0.42);
    border-radius: 16px 8px 18px 10px;
    background: rgba(255, 247, 223, 0.7);
    padding: 8px;
    color: #36512f;
    font-size: 12px;
    font-weight: 950;
  }

  .room-evidence strong {
    width: 100%;
    color: #563820;
    font-family: Fraunces, Georgia, serif;
    font-size: 20px;
  }

  .room-evidence button,
  .locked-room-panel > button {
    border: 3px solid #8a5a36;
    border-radius: 999px;
    background: #fff7df;
    color: #65412a;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 950;
  }

  .room-evidence button span {
    margin-right: 6px;
  }

  .locked-room-panel > button {
    justify-self: start;
    border-width: 4px;
    background: linear-gradient(#ffe8ad, #f3ad56);
  }
  .garden-note-4 { right: 0; top: 142px; rotate: 5deg; }
  .garden-note-5 { left: 8px; top: 168px; rotate: 4deg; }

  .backyard-note {
    right: 7vw;
    bottom: 44px;
    display: grid;
    width: min(360px, 34vw);
    gap: 9px;
  }

  .scene-note {
    left: 50%;
    bottom: 30px;
    z-index: 60;
    translate: -50% 0;
    font-size: 13px;
    animation: sceneToast 900ms ease both;
  }

  @keyframes rainFall {
    from { transform: translate3d(0, -18vh, 0) rotate(10deg); }
    to { transform: translate3d(0, 120vh, 0) rotate(10deg); }
  }

  @keyframes firefly {
    0%, 100% { opacity: 0.2; transform: translate3d(0, 0, 0) scale(0.82); }
    34% { opacity: 1; }
    60% { transform: translate3d(18px, -26px, 0) scale(1.08); }
  }

  @keyframes warmTravel {
    0% { opacity: 0; transform: scale(0.56); }
    45% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(2.2); }
  }

  @keyframes sceneArrive {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes doorPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.06); opacity: 0.88; }
  }

  @keyframes radioGlow {
    0%, 100% { box-shadow: 0 0 32px rgba(255, 177, 72, 0.22), 0 30px 54px rgba(28, 15, 8, 0.3), inset 0 2px rgba(255, 255, 255, 0.26); }
    50% { box-shadow: 0 0 70px rgba(255, 177, 72, 0.42), 0 30px 54px rgba(28, 15, 8, 0.3), inset 0 2px rgba(255, 255, 255, 0.26); }
  }

  @keyframes wave {
    0%, 100% { transform: scaleY(0.55); opacity: 0.54; }
    50% { transform: scaleY(1.12); opacity: 1; }
  }

  @keyframes slipIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes dots {
    0%, 20% { content: ""; }
    40% { content: "."; }
    60% { content: ".."; }
    80%, 100% { content: "..."; }
  }

  @keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }

  @keyframes objectAppear {
    from { opacity: 0; transform: translateY(24px) scale(0.86); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes levitate {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
  }

  @keyframes catSleep {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    50% { transform: scale(1.02) rotate(1deg); }
  }

  @keyframes catWalk {
    0%, 100% { transform: translateX(-38px) rotate(-1deg); }
    50% { transform: translateX(62px) rotate(1deg); }
  }

  @keyframes bubbleFloat {
    0% { opacity: 0; transform: translateY(10px) scale(0.94); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-18px) scale(1); }
  }

  @keyframes noteFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
  }

  @keyframes sceneToast {
    0% { opacity: 0; transform: translateY(14px) scale(0.94); }
    30%, 80% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(1); }
  }

  @media (max-width: 820px) {
    .room-nav {
      top: auto;
      bottom: 12px;
      width: calc(100vw - 20px);
      justify-content: center;
      overflow-x: auto;
    }

    .room-nav button {
      padding: 9px 11px;
      white-space: nowrap;
    }

    .mom-desk,
    .table-object,
    .radio-object,
    .opened-letter,
    .note-desk,
    .backyard-note {
      left: 16px;
      right: auto;
      width: calc(100vw - 32px);
      min-width: 0;
    }

    .mom-desk {
      bottom: 76px;
    }

    .table-object {
      top: 78px;
      bottom: auto;
    }

    .radio-object {
      top: 220px;
    }

    .hallway-door,
    .backyard-door,
    .kitchen-return {
      right: 16px;
      left: auto;
      bottom: 72px;
      top: auto;
    }

    .memory-wall {
      left: 7vw;
      top: 12vh;
      width: 86vw;
      height: 45vh;
    }

    .paper-note {
      width: 114px;
      height: 94px;
      font-size: 16px;
    }

    .opened-letter {
      top: auto;
      bottom: 276px;
    }

    .note-desk,
    .backyard-note {
      bottom: 76px;
    }

    .garden-notes {
      left: 16px;
      right: auto;
      top: 96px;
      width: calc(100vw - 32px);
    }

    .garden-cat,
    .cat-presence {
      left: 42%;
      bottom: 28%;
    }
  }
}


  .memory-artifact strong,
  .memory-artifact small,
  .memory-artifact em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .memory-artifact strong {
    white-space: nowrap;
  }

  .memory-artifact em {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .reflection-bench {
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    translate: -50% -50%;
    width: min(620px, 86vw) !important;
    min-width: 0 !important;
    text-align: center;
  }

  .reflection-question {
    border: 4px solid #704529;
    border-radius: 20px 12px 24px 14px;
    background: linear-gradient(135deg, #8b5b36, #5f351d);
    color: #fff3d1 !important;
    padding: 18px;
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(22px, 3vw, 36px) !important;
    line-height: 1.05;
    box-shadow: inset 0 2px rgba(255,255,255,0.2), 0 18px 32px rgba(31,18,10,0.25);
  }

  .bench-garden-row {
    justify-content: center;
  }

  .garden-growth {
    left: 50% !important;
    right: auto !important;
    bottom: 6vh !important;
    top: auto !important;
    display: flex !important;
    width: min(560px, 82vw);
    min-height: 90px;
    translate: -50% 0;
    justify-content: center;
    gap: 16px;
    pointer-events: auto;
  }

  .plant {
    position: static !important;
    animation: objectAppear 480ms ease both, levitate 4.2s ease-in-out infinite;
  }

  .plant small {
    display: none;
  }

  .garden-bubble {
    display: none !important;
  }

  @media (max-width: 700px) {
    .journey-wall {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(4, 150px);
      height: 690px;
      overflow: hidden;
    }

    .memory-artifact {
      height: 150px;
      padding: 12px;
    }
  }


  /* Hallway museum redesign */
  .scene-memory .memory-backdrop {
    background:
      radial-gradient(circle at 58% 18%, rgba(255, 218, 132, 0.48), transparent 16%),
      radial-gradient(circle at 18% 38%, rgba(255, 239, 192, 0.22), transparent 22%),
      linear-gradient(180deg, #d19a61 0%, #a66b3d 48%, #6c4227 100%);
  }

  .scene-memory .memory-backdrop::before,
  .scene-memory .memory-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background-image:
      radial-gradient(circle, rgba(255, 237, 176, 0.56) 0 2px, transparent 3px),
      radial-gradient(circle, rgba(255, 246, 220, 0.32) 0 1px, transparent 2px);
    background-size: 210px 180px, 130px 150px;
    animation: dustDrift 16s linear infinite;
  }

  .scene-memory .memory-backdrop::after {
    opacity: 0.55;
    animation-duration: 24s;
    transform: translate3d(calc(var(--px) * 0.12), calc(var(--py) * 0.08), 0);
  }

  .scene-memory .hall-lamp {
    left: 56%;
    top: 10vh;
    width: 84px;
    height: 84px;
    box-shadow:
      0 0 46px rgba(255, 220, 139, 0.92),
      0 0 190px rgba(255, 190, 82, 0.56),
      0 0 360px rgba(255, 173, 63, 0.24);
    animation: lampBreathe 4s ease-in-out infinite;
  }

  .scene-memory .hall-board {
    left: 5vw;
    top: 17vh;
    width: min(64vw, 1060px);
    height: 72vh;
    border-width: 8px;
    background:
      linear-gradient(rgba(122, 72, 35, 0.08), rgba(122, 72, 35, 0.08)),
      repeating-linear-gradient(90deg, rgba(93, 54, 27, 0.1) 0 2px, transparent 2px 140px),
      rgba(196, 129, 70, 0.46);
  }

  .scene-memory .hall-window {
    right: 7vw;
    top: 16vh;
    opacity: 0.48;
    transform: translate3d(calc(var(--px) * -0.1), calc(var(--py) * -0.04), 0);
  }

  .hallway-progress {
    left: 5vw !important;
    top: 82px !important;
    z-index: 22;
    width: min(62vw, 980px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .hallway-progress p {
    margin: 0;
    color: #4e2f1b;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-shadow: 0 2px rgba(255, 238, 198, 0.18);
  }

  .hallway-progress h2 {
    display: none;
  }

  .hallway-progress div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
  }

  .hallway-progress span {
    border: 2px solid rgba(99, 55, 25, 0.42);
    border-radius: 999px;
    background: rgba(255, 246, 220, 0.76);
    padding: 6px 10px;
    color: #4b2a14;
    font-size: 12px;
    box-shadow: 0 10px 18px rgba(57, 31, 14, 0.13);
  }

  .hallway-progress strong {
    font-size: 16px;
  }

  .visit-line {
    color: #694225;
    font-size: 12px;
    font-weight: 850;
  }

  .memory-wall {
    left: 5vw !important;
    top: 18vh !important;
    z-index: 18;
    width: min(64vw, 1060px) !important;
    height: 70vh !important;
  }

  .journey-wall {
    display: block !important;
    column-count: 3;
    column-gap: 18px;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    padding: 18px 20px 26px !important;
    box-shadow: none !important;
    scrollbar-width: thin;
  }

  .memory-artifact {
    position: relative !important;
    display: inline-grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: 172px;
    break-inside: avoid;
    margin: 0 0 18px;
    align-items: start;
    justify-items: start;
    gap: 8px;
    border: 2px solid rgba(112, 64, 30, 0.28);
    border-radius: 16px 10px 18px 12px;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.55), transparent 30%),
      #fff8e8;
    color: #3a2010 !important;
    padding: 18px 16px 16px;
    box-shadow:
      0 18px 26px rgba(65, 35, 15, 0.18),
      inset 0 1px rgba(255,255,255,0.66);
    text-align: left;
    transform: rotate(var(--tilt, -1deg));
    animation: memoryFloat 6s ease-in-out infinite;
  }

  .memory-artifact:nth-child(2n) { --tilt: 1.2deg; min-height: 202px; }
  .memory-artifact:nth-child(3n) { --tilt: -1.8deg; min-height: 188px; }
  .memory-artifact:nth-child(4n) { --tilt: 0.6deg; min-height: 220px; }

  .memory-artifact:hover {
    z-index: 4;
    transform: translateY(-8px) rotate(0deg) scale(1.02) !important;
    box-shadow: 0 26px 36px rgba(57, 31, 14, 0.25);
  }

  .memory-artifact span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px 9px 16px 10px;
    background: #fff0d0;
    font-size: 30px;
    line-height: 1;
  }

  .memory-artifact strong {
    font-size: 22px;
    line-height: 1.02;
  }

  .memory-artifact small {
    color: #8a6040 !important;
    font-size: 12px;
    opacity: 1;
  }

  .memory-artifact em {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    color: #5e3921 !important;
    font-size: 14px;
    line-height: 1.32;
    overflow: hidden;
  }

  .hallway-side-rail {
    position: absolute;
    right: 5vw;
    top: 16vh;
    z-index: 24;
    display: grid;
    width: min(330px, 25vw);
    max-height: 72vh;
    gap: 12px;
    overflow-y: auto;
  }

  .hallway-side-rail details {
    border: 3px solid rgba(99, 55, 25, 0.48);
    border-radius: 20px 12px 22px 14px;
    background: rgba(255, 246, 220, 0.9);
    padding: 12px;
    box-shadow: 0 18px 28px rgba(57, 31, 14, 0.16);
  }

  .hallway-side-rail summary {
    cursor: pointer;
    color: #4b2a14;
    font-family: Fraunces, Georgia, serif;
    font-size: 20px;
    font-weight: 900;
  }

  .hallway-side-rail p {
    color: #5e3921;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
  }

  .hallway-side-rail form {
    display: grid;
    gap: 8px;
    margin-top: 10px;
  }

  .hallway-side-rail textarea {
    min-height: 70px;
  }

  .museum-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  .museum-pill {
    border: 0;
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease;
  }

  .museum-pill:hover {
    transform: translateY(-3px);
    filter: brightness(1.04);
  }

  .garden-pill {
    background: #eef5d6;
    color: #31490f;
  }

  .tidy-hallway {
    justify-self: start;
  }

  .backyard-door {
    right: 5vw;
    bottom: 26px;
    z-index: 25;
  }

  .memory-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    background: rgba(55, 30, 14, 0.42);
    backdrop-filter: blur(4px);
    animation: objectAppear 220ms ease both;
  }

  .memory-modal .opened-letter {
    position: relative;
    right: auto;
    top: auto;
    width: min(520px, 90vw);
    max-height: 82vh;
    overflow-y: auto;
    background: #fff7df;
  }

  .memory-modal-icon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border-radius: 18px 11px 20px 12px;
    background: #fff0d0;
    font-size: 38px;
  }

  .memory-modal-kicker {
    margin-top: 12px !important;
    color: #8a6040 !important;
    font-size: 12px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  @keyframes memoryFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
  }

  @keyframes dustDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 210px 180px, -130px 150px; }
  }

  @keyframes lampBreathe {
    0%, 100% { opacity: 0.78; scale: 1; }
    50% { opacity: 1; scale: 1.06; }
  }

  @media (max-width: 980px) {
    .memory-wall {
      width: 90vw !important;
      height: 48vh !important;
      top: 18vh !important;
    }

    .journey-wall {
      column-count: 2;
    }

    .hallway-side-rail {
      left: 5vw;
      right: auto;
      top: 68vh;
      width: 90vw;
      max-height: 24vh;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }