:root {
      --room-bg: url("../images/backgrounds/cozy-rustic-living-room.jpg");
      --ink: #3e2920;
      --ink-soft: #6f5749;
      --cream: #fff6e7;
      --paper: rgba(247, 230, 199, .86);
      --paper-strong: rgba(255, 243, 222, .94);
      --gold: #f4c77f;
      --gold-deep: #bc7c36;
      --rose: #ba6f67;
      --green: #63705a;
      --shadow: rgba(0, 0, 0, .42);
      --soft-shadow: rgba(62, 34, 20, .22);
      --glass: rgba(29, 19, 13, .34);
      --glass-line: rgba(255, 239, 210, .22);
      --radius-xl: 34px;
      --radius-lg: 24px;
      --fade-slow: 1700ms ease;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100%;
      margin: 0;
    }

    body {
      font-family: Georgia, "Times New Roman", serif;
      color: var(--cream);
      background: #19100b;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      background-image: var(--room-bg);
      background-size: cover;
      background-position: center;
      filter: saturate(.86) brightness(.82);
      transform: scale(1.018);
      transition: filter 2600ms ease;
    }

    body.content-ready::before {
      filter: saturate(.82) brightness(.68);
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        radial-gradient(circle at 72% 47%, rgba(255, 168, 72, .26), transparent 23%),
        radial-gradient(circle at 16% 18%, rgba(255, 250, 230, .18), transparent 18%),
        radial-gradient(circle at 52% 106%, rgba(0, 0, 0, .62), transparent 45%),
        linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 46%, rgba(0,0,0,.50) 100%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.42));
      backdrop-filter: blur(1px);
    }

    .page {
      min-height: 100vh;
      padding: clamp(14px, 2vw, 30px);
      display: grid;
      place-items: center;
    }

    .gallery-room {
      width: min(1480px, 100%);
      min-height: min(840px, calc(100vh - 40px));
      display: grid;
      grid-template-columns: minmax(270px, 0.55fr) minmax(600px, 1.85fr);
      gap: clamp(18px, 2.2vw, 34px);
      align-items: stretch;

      /* First 3 seconds: only cozy room is visible.
         Then UI appears slowly and calmly. */
      opacity: 0;
      transform: translateY(20px) scale(.992);
      filter: blur(3px);
      transition:
        opacity 2600ms ease,
        transform 2600ms ease,
        filter 2600ms ease;
    }

    body.content-ready .gallery-room {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    .intro-card,
    .showcase {
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity 2800ms ease,
        transform 2800ms ease;
    }

    body.content-ready .intro-card {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 250ms;
    }

    body.content-ready .showcase {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 700ms;
    }

    .brand,
    .section-title {
      opacity: 0;
      transform: translateY(10px);
      transition:
        opacity 2400ms ease,
        transform 2400ms ease;
    }

    body.content-ready .brand {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 700ms;
    }

    body.content-ready .section-title {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 1200ms;
    }

    .intro-card {
      position: relative;
      align-self: start;
      max-width: 390px;
      padding: clamp(18px, 2.25vw, 26px);
      border-radius: var(--radius-xl);
      color: var(--ink);
      background:
        linear-gradient(160deg, rgba(255, 248, 230, .48), rgba(232, 203, 160, .30));
      border: 1px solid rgba(255, 245, 224, .38);
      box-shadow:
        0 26px 80px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.45);
      backdrop-filter: blur(7px) saturate(.95);
      -webkit-backdrop-filter: blur(7px) saturate(.95);
      overflow: hidden;
    }

    .intro-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 92% 8%, rgba(248, 198, 112, .36), transparent 24%),
        radial-gradient(circle at 8% 98%, rgba(139, 92, 54, .14), transparent 28%);
      pointer-events: none;
    }

    .intro-content {
      position: relative;
      z-index: 2;
    }

    .brand {
      margin: 0;
      font-size: clamp(32px, 3.35vw, 52px);
      line-height: .94;
      letter-spacing: -.04em;
      color: #4a3026;
    }

    .subtitle {
      margin: 8px 0 16px;
      color: #9e5e56;
      font-size: clamp(15px, 1.4vw, 18px);
      font-style: italic;
    }

    .avatar-line {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 16px;
      align-items: center;
      margin: 14px 0 16px;
    }

    .avatar-frame {
      width: 92px;
      height: 92px;
      padding: 6px;
      border-radius: 50%;
      background: linear-gradient(135deg, #fff7e7, #f4c46e);
      box-shadow: 0 12px 22px rgba(78, 43, 25, .24);
    }

    .avatar-frame img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center 45%;
      border-radius: 50%;
      border: 3px solid rgba(255,255,255,.82);
      background: #ffe8bd;
    }

    .greeting {
      margin: 0;
      font-size: clamp(18px, 1.85vw, 26px);
      line-height: 1.38;
      color: rgba(49, 31, 24, .96);
    }

    .about {
      margin: 16px 0 0;
      font-size: 16px;
      line-height: 1.6;
      color: rgba(71, 48, 37, .90);
    }

    .buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }

    button {
      appearance: none;
      border: 0;
      cursor: pointer;
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 700;
      border-radius: 999px;
      color: #3a251b;
      background: linear-gradient(180deg, #fff2d2, #f2c276);
      box-shadow:
        0 10px 22px rgba(87, 44, 18, .18),
        inset 0 1px 0 rgba(255,255,255,.86);
      transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
    }

    button:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
      box-shadow:
        0 12px 26px rgba(87, 44, 18, .24),
        inset 0 1px 0 rgba(255,255,255,.9);
    }

    button:active {
      transform: translateY(1px);
    }

    button:disabled {
      cursor: not-allowed;
      opacity: .45;
    }

    .soft-button {
      padding: 11px 16px;
      font-size: 15px;
    }

    .soft-button.active {
      color: #fff5df;
      background: linear-gradient(180deg, #8a5635, #593320);
      box-shadow:
        0 12px 26px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.22);
    }

    .note {
      position: relative;
      z-index: 2;
      margin: 18px 4px 0;
      font-size: 13px;
      line-height: 1.45;
      color: rgba(255, 242, 220, .8);
      text-shadow: 0 2px 5px rgba(0,0,0,.42);
    }

    .showcase {
      position: relative;
      min-height: 720px;
      padding: clamp(15px, 1.8vw, 26px);
      border: 1px solid var(--glass-line);
      border-radius: 38px;
      background:
        linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
        rgba(25, 16, 10, .25);
      box-shadow:
        0 28px 100px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.16);
      backdrop-filter: blur(2px);
      overflow: hidden;
    }

    .showcase::before {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(255, 238, 205, .12);
      border-radius: 30px;
      pointer-events: none;
    }

    .showcase-head {
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin: 0 4px 14px;
    }

    .section-title {
      margin: 0;
      font-size: clamp(20px, 2vw, 28px);
      color: rgba(255, 243, 222, .96);
      text-shadow: 0 2px 10px rgba(0,0,0,.55);
      letter-spacing: .02em;
    }

    .frame-wrap {
      position: relative;
      z-index: 3;
      height: min(64vh, 610px);
      min-height: 490px;
      display: grid;
      place-items: center;
      padding: clamp(18px, 2.4vw, 34px);
      border-radius: 32px;
      background:
        linear-gradient(145deg, #8b6542 0%, #523720 46%, #28170e 100%);
      box-shadow:
        0 22px 55px rgba(0,0,0,.46),
        inset 0 0 0 9px rgba(255, 224, 166, .13),
        inset 0 0 0 18px rgba(38, 23, 13, .58);
      overflow: hidden;
    }

    .frame-wrap::after {
      content: "";
      position: absolute;
      inset: 30px;
      border-radius: 18px;
      pointer-events: none;
      box-shadow:
        inset 0 0 34px rgba(0,0,0,.22),
        0 0 0 1px rgba(255,255,255,.05);
    }

    .slide {
      position: absolute;
      inset: clamp(44px, 5vw, 66px);
      width: calc(100% - clamp(88px, 10vw, 132px));
      height: calc(100% - clamp(88px, 10vw, 132px));
      object-fit: contain;
      border-radius: 14px;
      background: #fffdf8;
      box-shadow:
        0 16px 35px rgba(0,0,0,.44),
        0 0 0 8px rgba(255, 250, 239, .95);
      opacity: 0;
      transform: scale(.985);
      filter: sepia(.04) saturate(.96);
      transition:
        opacity var(--fade-slow),
        transform 2600ms ease,
        filter 2600ms ease;
    }

    .slide.active {
      opacity: 1;
      transform: scale(1);
      filter: sepia(.02) saturate(1.03);
    }

    .empty-message {
      padding: 20px;
      color: rgba(255,245,225,.88);
      text-align: center;
      font-size: 18px;
    }

    .caption-row {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
      margin: 16px 4px 0;
    }

    .caption {
      min-height: 40px;
      margin: 0;
      color: rgba(255, 241, 216, .92);
      font-size: clamp(16px, 1.45vw, 19px);
      line-height: 1.45;
      font-style: italic;
      text-shadow: 0 2px 10px rgba(0,0,0,.58);
    }

    .gallery-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .tiny-button {
      padding: 9px 12px;
      font-size: 13px;
    }

    .reaction-panel {
      position: relative;
      z-index: 3;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 14px 4px 0;
    }

    .reaction {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(255, 243, 219, .88);
      color: #432a1f;
      box-shadow: 0 10px 22px rgba(0,0,0,.18);
      user-select: none;
    }

    .reaction span:first-child {
      font-size: 17px;
    }

    .reaction .count {
      min-width: 22px;
      text-align: right;
      font-weight: 800;
    }

    .fullscreen-layer {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: none;
      padding: clamp(14px, 2vw, 30px);
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 205, 128, .08), transparent 30%),
        rgba(8, 6, 5, .94);
    }

    .fullscreen-layer.open {
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
    }

    .fullscreen-top,
    .fullscreen-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(255, 241, 218, .94);
      gap: 12px;
    }

    .fullscreen-title {
      margin: 0;
      font-size: clamp(18px, 2vw, 28px);
    }

    .fullscreen-stage {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 0;
      border-radius: 28px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      overflow: hidden;
    }

    .fullscreen-stage img {
      max-width: min(96vw, 1400px);
      max-height: 78vh;
      object-fit: contain;
      border-radius: 16px;
      background: white;
      box-shadow:
        0 22px 60px rgba(0,0,0,.55),
        0 0 0 10px rgba(255,250,236,.95);
    }

    .fullscreen-caption {
      margin: 0;
      font-size: clamp(15px, 1.6vw, 20px);
      line-height: 1.4;
      font-style: italic;
      color: rgba(255,241,218,.9);
    }

    .close-button {
      padding: 11px 15px;
    }


    .lang-switcher {
      position: relative;
      z-index: 3;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 0 0 12px;
    }

    .lang-button {
      min-width: 38px;
      height: 30px;
      padding: 0 9px;
      border-radius: 999px;
      font-family: Arial, sans-serif;
      font-size: 12px;
      letter-spacing: .04em;
      text-transform: uppercase;
      background: rgba(255, 246, 226, .58);
      color: rgba(54, 34, 25, .82);
      box-shadow:
        0 6px 14px rgba(70, 38, 20, .12),
        inset 0 1px 0 rgba(255,255,255,.58);
    }

    .lang-button.active {
      color: #fff5df;
      background: linear-gradient(180deg, rgba(101, 74, 48, .92), rgba(61, 39, 27, .92));
    }

    .icon-button {
      width: 48px;
      height: 44px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      font-size: 19px;
      line-height: 1;
    }

    .tiny-button.icon-button {
      width: 42px;
      height: 38px;
      padding: 0;
      font-size: 18px;
    }

    .close-button.icon-button {
      width: 44px;
      height: 40px;
      padding: 0;
      font-size: 19px;
    }

    .reaction {
      position: relative;
      min-width: 70px;
      justify-content: center;
      overflow: visible;
    }

    .reaction span:first-child {
      font-size: 20px;
      line-height: 1;
    }

    .reaction .count {
      min-width: 24px;
      font-family: Arial, sans-serif;
      font-size: 13px;
      text-align: left;
    }

    .reaction.pulse {
      animation: softPulse 480ms ease;
    }

    @keyframes softPulse {
      0% { transform: scale(1); }
      44% { transform: scale(1.12); }
      100% { transform: scale(1); }
    }

    .nature-burst {
      position: fixed;
      z-index: 80;
      left: 0;
      top: 0;
      width: 1px;
      height: 1px;
      pointer-events: none;
    }

    .nature-piece {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transform-origin: center bottom;
      will-change: transform, opacity;
    }

    .nature-piece.leaf {
      width: 13px;
      height: 22px;
      border-radius: 90% 0 90% 0;
      background:
        radial-gradient(circle at 62% 35%, rgba(255,255,255,.55), transparent 16%),
        linear-gradient(135deg, #c8de86, #5f8a43 72%);
      box-shadow: inset -1px -1px 0 rgba(52, 83, 37, .25);
      animation: leafGrow 1850ms ease-out forwards;
    }

    .nature-piece.leaf::after {
      content: "";
      position: absolute;
      left: 6px;
      top: 3px;
      width: 1px;
      height: 17px;
      background: rgba(48, 82, 38, .32);
      transform: rotate(44deg);
      border-radius: 99px;
    }

    .nature-piece.vine {
      width: 4px;
      height: 52px;
      border-radius: 999px;
      background: linear-gradient(to top, rgba(87, 120, 61, .82), rgba(200, 221, 134, .08));
      transform-origin: bottom;
      animation: vineRise 1500ms ease-out forwards;
    }

    .nature-piece.petal {
      width: 14px;
      height: 18px;
      border-radius: 65% 65% 70% 70%;
      background:
        radial-gradient(circle at 50% 24%, rgba(255,255,255,.62), transparent 18%),
        linear-gradient(180deg, #ffb4bd, #b94d65);
      animation: petalFloat 1900ms ease-out forwards;
    }

    .nature-piece.fall {
      width: 16px;
      height: 20px;
      border-radius: 90% 0 90% 0;
      background:
        radial-gradient(circle at 60% 36%, rgba(255,255,255,.38), transparent 18%),
        linear-gradient(135deg, #caa06d, #8b5832 72%);
      animation: autumnFall 1700ms ease-in forwards;
    }

    @keyframes leafGrow {
      0% {
        opacity: 0;
        transform: translate(0, 0) scale(.1) rotate(var(--r));
      }
      18% {
        opacity: 1;
      }
      72% {
        opacity: .9;
      }
      100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) scale(1.05) rotate(calc(var(--r) + 28deg));
      }
    }

    @keyframes vineRise {
      0% {
        opacity: 0;
        transform: translate(0, 8px) scaleY(.08) rotate(var(--r));
      }
      20% {
        opacity: .8;
      }
      75% {
        opacity: .55;
      }
      100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) scaleY(1) rotate(calc(var(--r) + 8deg));
      }
    }

    @keyframes petalFloat {
      0% {
        opacity: 0;
        transform: translate(0, 0) scale(.25) rotate(var(--r));
      }
      18% {
        opacity: 1;
      }
      76% {
        opacity: .9;
      }
      100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) scale(1.15) rotate(calc(var(--r) + 90deg));
      }
    }

    @keyframes autumnFall {
      0% {
        opacity: 0;
        transform: translate(0, -8px) scale(.35) rotate(var(--r));
      }
      20% {
        opacity: .9;
      }
      100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) scale(.95) rotate(calc(var(--r) - 110deg));
      }
    }



    #randomButton.active {
      color: #fff8e8;
      background: linear-gradient(180deg, #7d6650, #38261d);
    }

    #randomButton.active::after {
      content: "";
      position: absolute;
      width: 7px;
      height: 7px;
      right: 8px;
      top: 8px;
      border-radius: 50%;
      background: #fff2a8;
      box-shadow: 0 0 10px rgba(255, 239, 139, .9);
    }

    .fullscreen-stage {
      touch-action: none;
    }

    .fullscreen-stage img {
      cursor: zoom-in;
      transform-origin: center center;
      transition: transform 180ms ease;
      will-change: transform;
    }

    .fullscreen-stage.zoomed img {
      cursor: grab;
    }

    .fullscreen-stage.zoomed img:active {
      cursor: grabbing;
    }

    .reaction[data-reaction="heart"].heart-beat span:first-child {
      animation: heartBeat 720ms ease;
      color: #d9132d;
      text-shadow: 0 0 14px rgba(255, 50, 80, .45);
    }

    @keyframes heartBeat {
      0% { transform: scale(1); }
      18% { transform: scale(1.34); }
      34% { transform: scale(.94); }
      52% { transform: scale(1.22); }
      72% { transform: scale(1.02); }
      100% { transform: scale(1); }
    }

    .nature-piece.bubble {
      width: var(--s);
      height: var(--s);
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(255,255,255,.32) 24%, rgba(160,220,255,.10) 66%, rgba(255,255,255,.05));
      border: 1px solid rgba(230, 252, 255, .72);
      box-shadow:
        inset -4px -5px 10px rgba(120, 180, 220, .15),
        0 0 18px rgba(210, 245, 255, .22);
      animation: bubbleRise 2100ms ease-out forwards;
    }

    .nature-piece.autumn-leaf {
      width: 18px;
      height: 24px;
      border-radius: 90% 0 90% 0;
      background:
        radial-gradient(circle at 62% 32%, rgba(255,255,255,.36), transparent 15%),
        linear-gradient(135deg, var(--leaf-a), var(--leaf-b) 72%);
      box-shadow:
        inset -2px -2px 0 rgba(80, 44, 16, .18),
        0 4px 12px rgba(0,0,0,.12);
      animation: goldenLeafFall 1950ms ease-in forwards;
    }

    .nature-piece.autumn-leaf::after {
      content: "";
      position: absolute;
      left: 8px;
      top: 3px;
      width: 1px;
      height: 18px;
      background: rgba(96, 50, 16, .28);
      transform: rotate(43deg);
      border-radius: 99px;
    }

    .nature-piece.heart-spark {
      width: 18px;
      height: 18px;
      background: #d9132d;
      transform: rotate(45deg);
      animation: heartSpark 1500ms ease-out forwards;
      box-shadow: 0 0 16px rgba(255, 50, 80, .35);
    }

    .nature-piece.heart-spark::before,
    .nature-piece.heart-spark::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: inherit;
    }

    .nature-piece.heart-spark::before {
      left: -9px;
      top: 0;
    }

    .nature-piece.heart-spark::after {
      left: 0;
      top: -9px;
    }

    @keyframes bubbleRise {
      0% { opacity: 0; transform: translate(0, 10px) scale(.24); }
      18% { opacity: .9; }
      70% { opacity: .75; }
      100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.18); }
    }

    @keyframes goldenLeafFall {
      0% { opacity: 0; transform: translate(0, -14px) scale(.38) rotate(var(--r)); }
      18% { opacity: .95; }
      80% { opacity: .85; }
      100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.05) rotate(calc(var(--r) - 160deg)); }
    }

    @keyframes heartSpark {
      0% { opacity: 0; transform: translate(0, 0) scale(.24) rotate(45deg); }
      20% { opacity: 1; }
      70% { opacity: .9; }
      100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.05) rotate(45deg); }
    }


    @media (max-width: 1050px) {
      .page {
        display: block;
      }

      .gallery-room {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      .intro-card {
        max-width: none;
      }

      .showcase {
        min-height: auto;
      }

      .frame-wrap {
        height: min(68vh, 560px);
      }
    }

    @media (max-width: 620px) {
      body::before {
        background-position: 63% center;
      }

      body::after {
        background:
          radial-gradient(circle at 74% 40%, rgba(255, 168, 72, .22), transparent 25%),
          linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.28)),
          linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.44));
      }

      .page {
        padding: 10px;
      }

      .gallery-room {
        gap: 12px;
      }

      .intro-card,
      .showcase {
        border-radius: 24px;
      }

      .intro-card {
        padding: 16px;
        background:
          linear-gradient(160deg, rgba(255, 248, 230, .42), rgba(232, 203, 160, .24));
      }

      .brand {
        font-size: 32px;
        letter-spacing: -.03em;
      }

      .subtitle {
        margin-bottom: 10px;
        font-size: 14px;
      }

      .avatar-line {
        grid-template-columns: 64px 1fr;
        gap: 12px;
        margin: 10px 0 12px;
      }

      .avatar-frame {
        width: 64px;
        height: 64px;
        padding: 4px;
      }

      .greeting {
        font-size: 16px;
        line-height: 1.36;
      }

      .about {
        font-size: 14px;
        line-height: 1.5;
      }

      .buttons {
        gap: 8px;
      }

      .soft-button {
        padding: 10px 12px;
        font-size: 13px;
      }

      .showcase {
        padding: 12px;
      }

      .showcase-head {
        align-items: flex-start;
      }

      .section-title {
        font-size: 20px;
      }

      .frame-wrap {
        min-height: 390px;
        height: 58vh;
        padding: 14px;
        border-radius: 22px;
      }

      .slide {
        inset: 34px;
        width: calc(100% - 68px);
        height: calc(100% - 68px);
      }

      .caption-row {
        grid-template-columns: 1fr;
      }

      .caption {
        font-size: 15px;
        text-align: center;
      }

      .gallery-nav {
        justify-content: center;
      }

      .reaction-panel {
        justify-content: center;
      }

      .reaction {
        padding: 8px 10px;
        font-size: 13px;
      }
    }