:root {
      --scene-bg: #0b0811;
      --scene-red: #3b1118;
      --scene-warm-glow: rgba(106, 26, 33, 0.24);
    }
    html, body { width: 100%; min-height: 100%; margin: 0; overflow-x: hidden; background: var(--scene-bg); }
    body { position: relative; overflow-y: auto; }
    #lights { position: relative; z-index: 3; width: 100%; height: 100vh; min-height: 560px; touch-action: none; cursor: crosshair; background: transparent; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); opacity: var(--track-opacity, 1); transform: translate3d(0, var(--track-shift, 0px), 0); transform-origin: center top; will-change: opacity, transform; }
    #lights canvas { display: block; width: 100%; height: 100%; }
    #particle-field {
      position: fixed;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: 0.88;
      transition: opacity .45s ease, filter .55s ease;
    }
    body.is-second-screen #particle-field {
      opacity: 1.0;
      filter: brightness(1.6) saturate(1.22) contrast(1.08);
    }
    body.is-third-screen #particle-field {
      opacity: 1.0;
      filter: brightness(2.5) saturate(1.4) contrast(1.18);
    }
    body.is-fourth-screen #particle-field {
      opacity: 1.0;
      filter: brightness(2.5) saturate(1.4) contrast(1.18);
    }
    .gooey-nav-container {
      --color-1: 255, 191, 112;
      --color-2: 255, 51, 62;
      --color-3: 255, 247, 231;
      position: fixed;
      top: 18px;
      left: 50%;
      z-index: 18;
      transform: translateX(-50%);
      perspective: 500px;
    }
    .gooey-nav-container nav { display: flex; position: relative; transform: translate3d(0, 0, 0.01px); }
    .gooey-nav-container nav ul {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      margin: 0;
      padding: 5px;
      list-style: none;
      position: relative;
      z-index: 3;
      color: rgba(247, 242, 234, 0.78);
      border: 1px solid rgba(247, 242, 234, 0.14);
      border-radius: 999px;
      background: rgba(11, 8, 17, 0.38);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(12px);
    }
    .gooey-nav-container nav ul li {
      position: relative;
      border-radius: 999px;
      cursor: pointer;
      color: inherit;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
      transition: color 0.3s ease, box-shadow 0.3s ease;
    }
    .gooey-nav-container nav ul li a {
      display: inline-block;
      padding: 0.58rem 0.95rem;
      color: inherit;
      font: 600 11px/1 Arial, sans-serif;
      letter-spacing: 0.12em;
      text-decoration: none;
      white-space: nowrap;
      outline: none;
    }
    .gooey-nav-container nav ul li a.editable-text { pointer-events: auto; }
    .gooey-nav-container nav ul li:focus-within { box-shadow: 0 0 0 1px rgba(247, 242, 234, 0.74); }
    .gooey-nav-container nav ul li::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: 999px;
      background: #f7f2ea;
      opacity: 0;
      transform: scale(0.72);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .gooey-nav-container nav ul li.active { color: #0b0811; text-shadow: none; }
    .gooey-nav-container nav ul li.active::after { opacity: 1; transform: scale(1); }
    .gooey-nav-container nav ul li.is-elastic::after {
      animation: gooey-nav-elastic-pill 0.62s cubic-bezier(0.22, 0.8, 0.22, 1) both;
      transform-origin: var(--elastic-origin, 50% 50%);
    }
    @keyframes gooey-nav-elastic-pill {
      0% { opacity: 0.58; transform: scaleX(0.72) scaleY(0.92); }
      34% { opacity: 1; transform: scaleX(1.18) scaleY(1.08); }
      66% { transform: scaleX(0.96) scaleY(0.98); }
      100% { opacity: 1; transform: scaleX(1) scaleY(1); }
    }
    .gooey-nav-container .effect {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      display: grid;
      place-items: center;
      opacity: 1;
      pointer-events: none;
      z-index: 1;
    }
    .gooey-nav-container .effect.text {
      color: #0b0811;
      font: 600 11px/1 Arial, sans-serif;
      letter-spacing: 0.12em;
      white-space: nowrap;
      transition: color 0.3s ease;
    }
    .gooey-nav-container .effect.filter {
      overflow: visible;
      filter: blur(0.35px) saturate(1.55) drop-shadow(0 0 8px rgba(255, 51, 77, 0.56));
      mix-blend-mode: screen;
    }
    .gooey-nav-container .effect.filter::before {
      content: none;
      display: none;
    }
    .gooey-nav-container .effect.filter::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: 999px;
      background: #f7f2ea;
      opacity: 0;
      transform: scale(0.72);
    }
    .gooey-nav-container .effect.active::after { animation: gooey-nav-pill 0.3s ease both; }
    @keyframes gooey-nav-pill {
      to { opacity: 1; transform: scale(1); }
    }
    .gooey-nav-container .particle,
    .gooey-nav-container .point {
      display: block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      opacity: 0;
      transform-origin: center;
    }
    .gooey-nav-container .particle {
      --time: 1600ms;
      position: absolute;
      top: calc(50% - 7px);
      left: calc(50% - 7px);
      animation: gooey-nav-particle var(--time) cubic-bezier(0.18, 0.74, 0.31, 1) 1 both;
    }
    .gooey-nav-container .point {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: radial-gradient(circle at center,
        rgba(var(--color), 0.98) 0%,
        rgba(var(--color), 0.72) 24%,
        rgba(var(--color), 0.2) 58%,
        rgba(var(--color), 0) 100%);
      box-shadow:
        0 0 5px rgba(var(--color), 0.78),
        0 0 14px rgba(var(--color), 0.34);
      opacity: 1;
      animation: gooey-nav-point var(--time) ease-out 1 both;
    }
    @keyframes gooey-nav-particle {
      0% { transform: rotate(0deg) translate(var(--start-x), var(--start-y)); opacity: 1; }
      70% { transform: rotate(calc(var(--rotate) * 0.5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2)); opacity: 1; }
      85% { transform: rotate(calc(var(--rotate) * 0.66)) translate(var(--end-x), var(--end-y)); opacity: 1; }
      100% { transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * 0.5), calc(var(--end-y) * 0.5)); opacity: 1; }
    }
    @keyframes gooey-nav-point {
      0% { transform: scale(0); opacity: 0; }
      25% { transform: scale(calc(var(--scale) * 0.25)); }
      38% { opacity: 1; }
      65%, 85% { transform: scale(var(--scale)); opacity: 1; }
      100% { transform: scale(0); opacity: 0; }
    }
    @media (max-width: 620px) {
      .gooey-nav-container { top: 14px; max-width: calc(100vw - 28px); }
      .gooey-nav-container nav ul { max-width: calc(100vw - 28px); gap: 0.1rem; overflow-x: auto; }
      .gooey-nav-container nav ul li a { padding: 0.52rem 0.66rem; font-size: 10px; letter-spacing: 0.08em; }
    }
    #hero-copy {
      position: fixed;
      inset: 0;
      z-index: 10;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      padding: 24px;
      pointer-events: none;
      color: #f7f2ea;
      text-transform: uppercase;
      opacity: var(--hero-opacity, 1);
      transition: opacity .12s ease-out, visibility .12s ease-out;
    }
    #edit-toggle,
    #export-tools,
    #text-style-tools { transition: opacity .25s ease, visibility .25s ease; }
    body.is-second-screen #hero-copy {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    #second-screen {
      position: relative;
      z-index: 4;
      min-height: 100vh;
      box-sizing: border-box;
      padding: clamp(74px, 10vh, 124px) clamp(18px, 6vw, 96px) clamp(72px, 10vh, 124px);
      overflow: visible;
      isolation: isolate;
      background:
        radial-gradient(ellipse 80% 55% at 25% 0%, var(--scene-warm-glow), transparent 72%),
        linear-gradient(180deg, rgba(59, 17, 24, 0.94) 0%, rgba(59, 17, 24, 0.88) 12%, rgba(59, 17, 24, 0.68) 30%, rgba(11, 8, 17, 0.80) 52%, rgba(11, 8, 17, 0.62) 100%);
    }
    .second-screen-inner {
      position: relative;
      z-index: 1;
      width: min(1400px, 100%);
      margin: 0 auto;
      opacity: var(--gallery-reveal, 0);
      transform: translate3d(0, calc((1 - var(--gallery-reveal, 0)) * 28px), 0);
      will-change: opacity, transform;
    }
    .second-screen-kicker {
      margin: 0;
      color: rgba(255, 247, 231, 0.62);
      font: 600 11px/1.2 Arial, sans-serif;
      letter-spacing: 0.28em;
    }
    .second-screen-title {
      margin: 18px 0 0;
      color: #f7f2ea;
      font: 700 clamp(42px, 8vw, 112px)/0.9 "Arial Narrow", "Bahnschrift Condensed", Impact, sans-serif;
      letter-spacing: -0.035em;
    }
    .second-screen-description {
      max-width: 510px;
      margin: 22px 0 0;
      color: rgba(247, 242, 234, 0.64);
      font: 400 14px/1.75 Arial, sans-serif;
    }
    .gallery-viewport {
      position: relative;
      margin: clamp(38px, 7vh, 78px) calc(clamp(18px, 6vw, 96px) * -1) 0;
      padding: 0 clamp(18px, 6vw, 96px) 22px;
      overflow: hidden;
      outline: none;
      cursor: grab;
      touch-action: pan-y;
      user-select: none;
    }
    .gallery-viewport.is-dragging { cursor: grabbing; }
    .gallery-viewport:focus-visible { outline: 1px solid rgba(255, 247, 231, 0.52); outline-offset: -1px; }
    .gallery-track {
      display: flex;
      align-items: flex-start;
      gap: clamp(14px, 2.2vw, 32px);
      width: max-content;
      will-change: transform;
    }
    .gallery-card {
      flex: 0 0 clamp(220px, 29vw, 420px);
      transform-origin: center bottom;
      transition: transform .18s ease-out;
    }
    .gallery-media {
      position: relative;
      aspect-ratio: 4 / 3;
      border: 1px dashed rgba(247, 242, 234, 0.36);
      box-sizing: border-box;
      background: rgba(255, 255, 255, 0.035);
      display: grid;
      place-items: center;
      cursor: pointer;
      overflow: hidden;
      transition: border-color .25s ease, background-color .25s ease;
    }
    .gallery-media::before,
    .gallery-media::after {
      content: "";
      position: absolute;
      z-index: 2;
      background: rgba(255, 247, 231, 0.12);
    }
    .gallery-media::before { width: 1px; height: 34%; }
    .gallery-media::after { width: 34%; height: 1px; }
    .gallery-placeholder {
      position: relative;
      z-index: 3;
      color: rgba(247, 242, 234, 0.38);
      font: 600 10px/1 Arial, sans-serif;
      letter-spacing: 0.18em;
    }
    .gallery-image {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      opacity: 0.82;
    }
    .gallery-media.has-image {
      border-style: solid;
      border-color: rgba(255, 247, 231, 0.5);
      background: rgba(255, 255, 255, 0.08);
    }
    .gallery-media.has-image .gallery-placeholder { display: none; }
    .gallery-image-input { display: none; }
    .image-remove-button {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 8;
      display: none;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      padding: 0;
      border: 1px solid rgba(247, 242, 234, 0.42);
      border-radius: 50%;
      color: rgba(247, 242, 234, 0.92);
      background: rgba(11, 8, 17, 0.68);
      font: 600 16px/1 Arial, sans-serif;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }
    .image-remove-button:hover,
    .image-remove-button:focus-visible {
      border-color: rgba(255, 112, 112, 0.9);
      color: #fff;
      background: rgba(133, 24, 40, 0.88);
      outline: none;
      transform: scale(1.06);
    }
    .gallery-media.has-image .image-remove-button,
    .accordion-panel.has-image .image-remove-button,
    .fourth-photo.has-image .image-remove-button,
    .fourth-qr.has-image .image-remove-button,
    .third-detail-card.has-image .image-remove-button { display: inline-flex; }
    .gallery-media { animation: gallery-media-drift 8s ease-in-out infinite; }
    .gallery-card:nth-child(3n + 2) .gallery-media { animation-delay: -2.6s; }
    .gallery-card:nth-child(3n) .gallery-media { animation-delay: -5.2s; }
    @keyframes gallery-media-drift {
      0%, 100% { transform: rotate(-1.2deg) translateY(0); }
      50% { transform: rotate(1.2deg) translateY(-5px); }
    }
    .gallery-card-meta {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      padding-top: 14px;
      color: rgba(247, 242, 234, 0.82);
    }
    .gallery-card-title {
      margin: 0;
      font: 600 14px/1.2 Arial, sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .gallery-card-index {
      color: rgba(247, 242, 234, 0.38);
      font: 500 10px/1 Arial, sans-serif;
      letter-spacing: 0.12em;
    }
    body.is-gallery-lightbox-open { overflow: hidden; }
    #gallery-lightbox {
      position: fixed;
      inset: 0;
      /* Keep image details above an open third-screen project view. */
      z-index: 120;
      display: grid;
      place-items: center;
      padding: clamp(18px, 4vw, 56px);
      box-sizing: border-box;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .24s ease, visibility .24s ease;
    }
    #gallery-lightbox.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .gallery-lightbox-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(7, 5, 11, 0.84);
      backdrop-filter: blur(12px);
    }
    .gallery-lightbox-dialog {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 14px;
      width: fit-content;
      min-width: min(320px, 94vw);
      max-width: 94vw;
      max-height: 90vh;
      padding: clamp(12px, 2vw, 24px);
      box-sizing: border-box;
      border: 1px solid rgba(247, 242, 234, 0.28);
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(36, 12, 22, 0.96), rgba(11, 8, 17, 0.96));
      box-shadow: 0 24px 90px rgba(0, 0, 0, 0.58), 0 0 42px rgba(255, 46, 62, 0.12);
    }
    .gallery-lightbox-media {
      position: relative;
      display: grid;
      place-items: center;
      width: min(86vw, 860px);
      height: min(56vh, 560px);
      min-height: 0;
      max-height: 72vh;
      overflow: hidden;
      border: 1px dashed rgba(247, 242, 234, 0.24);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.035);
    }
    .gallery-lightbox-image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    .gallery-lightbox-placeholder {
      color: rgba(247, 242, 234, 0.44);
      font: 600 11px/1 Arial, sans-serif;
      letter-spacing: 0.2em;
    }
    .gallery-lightbox-meta {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      padding: 0 2px;
    }
    .gallery-lightbox-title {
      margin: 0;
      color: rgba(247, 242, 234, 0.94);
      font: 700 clamp(16px, 2vw, 24px)/1.1 Arial, sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .gallery-lightbox-index {
      color: rgba(247, 242, 234, 0.48);
      font: 500 10px/1 Arial, sans-serif;
      letter-spacing: 0.14em;
      white-space: nowrap;
    }
    .gallery-lightbox-close {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 3;
      display: inline-grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(247, 242, 234, 0.32);
      border-radius: 50%;
      color: rgba(247, 242, 234, 0.92);
      background: rgba(11, 8, 17, 0.7);
      font: 400 22px/1 Arial, sans-serif;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
    }
    .gallery-lightbox-close:hover,
    .gallery-lightbox-close:focus-visible {
      border-color: rgba(255, 247, 231, 0.82);
      color: #fffaf0;
      background: rgba(255, 247, 231, 0.14);
      outline: none;
      transform: scale(1.06);
    }
    #third-screen {
      position: relative;
      z-index: 4;
      min-height: 100vh;
      box-sizing: border-box;
      padding: clamp(74px, 10vh, 124px) clamp(18px, 6vw, 96px) clamp(72px, 10vh, 124px);
      overflow: visible;
      isolation: isolate;
      background:
        radial-gradient(ellipse 80% 55% at 25% 0%, var(--scene-warm-glow), transparent 72%),
        linear-gradient(180deg, var(--scene-bg) 0%, rgba(11, 8, 17, 0.96) 12%, rgba(59, 17, 24, 0.42) 30%, rgba(59, 17, 24, 0.76) 48%, rgba(11, 8, 17, 0.92) 72%, var(--scene-bg) 100%);
    }
    body.is-third-screen #second-screen {
      background:
        radial-gradient(ellipse 80% 55% at 25% 0%, var(--scene-warm-glow), transparent 72%),
        linear-gradient(180deg, rgba(59, 17, 24, 0.94) 0%, rgba(59, 17, 24, 0.88) 12%, rgba(59, 17, 24, 0.68) 30%, rgba(11, 8, 17, 0.72) 52%, rgba(11, 8, 17, 0.56) 100%);
    }
    body.is-third-screen #third-screen {
      background:
        radial-gradient(ellipse 80% 55% at 25% 0%, rgba(106, 26, 33, 0.34), transparent 72%),
        linear-gradient(180deg, rgba(11, 8, 17, 0.60) 0%, rgba(11, 8, 17, 0.56) 12%, rgba(59, 17, 24, 0.48) 30%, rgba(59, 17, 24, 0.70) 48%, rgba(11, 8, 17, 0.78) 72%, rgba(11, 8, 17, 0.64) 100%);
    }
    .third-screen-inner {
      position: relative;
      z-index: 1;
      width: min(1400px, 100%);
      margin: 0 auto;
      opacity: var(--third-reveal, 0);
      transform: translate3d(0, calc((1 - var(--third-reveal, 0)) * 28px), 0);
      will-change: opacity, transform;
    }
    .third-screen-kicker {
      margin: 0;
      color: rgba(255, 247, 231, 0.62);
      font: 600 11px/1.2 Arial, sans-serif;
      letter-spacing: 0.28em;
    }
    .third-screen-title {
      margin: 18px 0 0;
      color: #f7f2ea;
      font: 700 clamp(42px, 8vw, 112px)/0.9 "Arial Narrow", "Bahnschrift Condensed", Impact, sans-serif;
      letter-spacing: -0.035em;
    }
    .third-screen-description {
      max-width: 570px;
      margin: 22px 0 0;
      color: rgba(247, 242, 234, 0.64);
      font: 400 14px/1.75 Arial, sans-serif;
    }
    .accordion-gallery {
      display: flex;
      align-items: stretch;
      gap: clamp(8px, 1vw, 14px);
      width: 100%;
      height: clamp(320px, 54vh, 460px);
      margin-top: clamp(38px, 7vh, 78px);
      perspective: 1200px;
    }
    .accordion-panel {
      position: relative;
      min-width: 0;
      flex: 1 1 0;
      overflow: hidden;
      border: 1px solid rgba(247, 242, 234, 0.22);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.035);
      cursor: pointer;
      isolation: isolate;
      transform: rotateY(var(--accordion-tilt, 0deg));
      transform-origin: center bottom;
      transition: flex-grow .6s cubic-bezier(.22, .8, .22, 1), transform .6s cubic-bezier(.22, .8, .22, 1), filter .6s ease, opacity .6s ease, border-color .35s ease;
    }
    .accordion-panel:not(.is-active) {
      filter: grayscale(1);
      opacity: 0.66;
    }
    .accordion-panel.is-active {
      flex-grow: 2.7;
      border-color: rgba(247, 242, 234, 0.52);
      filter: grayscale(0);
      opacity: 1;
      transform: rotateY(0deg);
    }
    .accordion-panel:focus-visible {
      outline: 1px solid rgba(255, 247, 231, 0.72);
      outline-offset: 4px;
    }
    .accordion-panel__frame,
    .accordion-panel__media {
      position: absolute;
      inset: 0;
      display: block;
    }
    .accordion-panel__media {
      background: rgba(255, 255, 255, 0.035);
      cursor: pointer;
    }
    .accordion-cover-button {
      position: absolute;
      right: 14px;
      bottom: 14px;
      z-index: 7;
      padding: 7px 11px;
      border: 1px solid rgba(247, 242, 234, 0.34);
      border-radius: 999px;
      color: rgba(247, 242, 234, 0.84);
      background: rgba(11, 8, 17, 0.62);
      font: 600 10px/1 Arial, sans-serif;
      letter-spacing: 0.08em;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
    }
    .accordion-cover-button:hover,
    .accordion-cover-button:focus-visible {
      border-color: rgba(255, 247, 231, 0.8);
      color: #fff;
      background: rgba(133, 24, 40, 0.82);
      outline: none;
      transform: translateY(-1px);
    }
    .accordion-panel__media::before,
    .accordion-panel__media::after {
      content: "";
      position: absolute;
      z-index: 2;
      background: rgba(255, 247, 231, 0.15);
    }
    .accordion-panel__media::before { top: 33%; bottom: 33%; left: 50%; width: 1px; }
    .accordion-panel__media::after { left: 33%; right: 33%; top: 50%; height: 1px; }
    .accordion-panel__placeholder {
      position: absolute;
      z-index: 3;
      top: 50%;
      left: 50%;
      color: rgba(247, 242, 234, 0.38);
      font: 600 10px/1 Arial, sans-serif;
      letter-spacing: 0.18em;
      white-space: nowrap;
      transform: translate(-50%, -50%);
    }
    .accordion-panel__image {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.84;
    }
    .accordion-panel.has-image {
      border-color: rgba(255, 247, 231, 0.5);
      background: rgba(255, 255, 255, 0.08);
    }
    .accordion-panel.has-image .accordion-panel__placeholder { display: none; }
    .accordion-image-input { display: none; }
    .accordion-panel__overlay {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(6, 0, 16, 0.02) 36%, rgba(6, 0, 16, 0.72) 100%);
    }
    .accordion-panel__label {
      position: absolute;
      z-index: 5;
      right: 18px;
      bottom: 18px;
      left: 18px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(247, 242, 234, 0.92);
      font: 600 13px/1.2 Arial, sans-serif;
      letter-spacing: 0.12em;
      opacity: 0;
      transform: translateX(-14px);
      transition: opacity .35s ease, transform .35s ease;
    }
    .accordion-panel.is-active .accordion-panel__label {
      opacity: 1;
      transform: translateX(0);
    }
    .accordion-panel__bar {
      flex: 0 0 24px;
      width: 24px;
      height: 2px;
      background: #ff2e3e;
      box-shadow: 0 0 10px rgba(255, 46, 62, 0.45);
    }
    .accordion-panel__text { white-space: nowrap; }
    body.is-third-detail-open { overflow: hidden; }
    #third-detail-view,
    .third-detail-view {
      position: fixed;
      inset: 0;
      z-index: 70;
      overflow-y: auto;
      box-sizing: border-box;
      padding: clamp(18px, 4vw, 54px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background:
        radial-gradient(ellipse 80% 55% at 20% 0%, rgba(106, 26, 33, 0.34), transparent 72%),
        linear-gradient(180deg, rgba(11, 8, 17, 0.98) 0%, rgba(59, 17, 24, 0.9) 44%, rgba(11, 8, 17, 0.98) 100%);
      transition: opacity .28s ease, visibility .28s ease;
      isolation: isolate;
    }
    #third-detail-view.is-open,
    .third-detail-view.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .third-detail-backdrop {
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 50% 20%, rgba(255, 46, 62, 0.12), transparent 42%),
        rgba(7, 5, 11, 0.34);
      backdrop-filter: blur(2px);
    }
    .third-detail-shell {
      position: relative;
      z-index: 1;
      width: min(1240px, 100%);
      min-height: calc(100svh - clamp(36px, 8vw, 108px));
      margin: 0 auto;
      padding: clamp(26px, 5vw, 72px);
      box-sizing: border-box;
      border: 1px solid rgba(247, 242, 234, 0.2);
      border-radius: 24px;
      background: linear-gradient(145deg, rgba(36, 12, 22, 0.84), rgba(11, 8, 17, 0.76));
      box-shadow: 0 30px 100px rgba(0, 0, 0, 0.48), 0 0 46px rgba(255, 46, 62, 0.12);
    }
    .third-detail-close {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 4;
      display: inline-grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(247, 242, 234, 0.34);
      border-radius: 50%;
      color: rgba(247, 242, 234, 0.92);
      background: rgba(11, 8, 17, 0.62);
      font: 400 24px/1 Arial, sans-serif;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .third-detail-close:hover,
    .third-detail-close:focus-visible {
      border-color: rgba(255, 247, 231, 0.8);
      background: rgba(255, 247, 231, 0.14);
      outline: none;
      transform: scale(1.06);
    }
    .third-detail-kicker {
      margin: 0;
      color: rgba(255, 247, 231, 0.62);
      font: 600 11px/1.2 Arial, sans-serif;
      letter-spacing: 0.28em;
    }
    .third-detail-heading {
      margin: 18px 0 0;
      color: #f7f2ea;
      font: 700 clamp(42px, 8vw, 104px)/0.9 "Arial Narrow", "Bahnschrift Condensed", Impact, sans-serif;
      letter-spacing: -0.035em;
      overflow-wrap: anywhere;
    }
    .third-detail-project {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      margin-top: 18px;
      color: rgba(247, 242, 234, 0.86);
      font: 600 13px/1.2 Arial, sans-serif;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .third-detail-project-index {
      color: rgba(247, 242, 234, 0.46);
      font-size: 10px;
      letter-spacing: 0.18em;
      white-space: nowrap;
    }
    .third-detail-description {
      max-width: 650px;
      margin: 20px 0 0;
      color: rgba(247, 242, 234, 0.62);
      font: 400 14px/1.75 Arial, sans-serif;
    }
    .third-detail-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: clamp(32px, 6vh, 58px);
    }
    .third-detail-card {
      --detail-glow-x: 50%;
      --detail-glow-y: 50%;
      --detail-glow-intensity: 0;
      --detail-shift-x: 0px;
      --detail-shift-y: 0px;
      --detail-tilt-x: 0deg;
      --detail-tilt-y: 0deg;
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 286px;
      overflow: hidden;
      border: 1px solid rgba(247, 242, 234, 0.16);
      border-radius: 18px;
      background: #120f17;
      transform: perspective(1000px) translate3d(var(--detail-shift-x), var(--detail-shift-y), 0) rotateX(var(--detail-tilt-x)) rotateY(var(--detail-tilt-y));
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
      isolation: isolate;
    }
    .third-detail-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(circle 220px at var(--detail-glow-x) var(--detail-glow-y), rgba(255, 46, 62, 0.28), transparent 72%);
      opacity: var(--detail-glow-intensity);
      transition: opacity .2s ease;
    }
    .third-detail-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 7;
      pointer-events: none;
      border: 1px solid rgba(255, 46, 62, 0.26);
      border-radius: inherit;
      opacity: var(--detail-glow-intensity);
      transition: opacity .2s ease;
    }
    .third-detail-card.is-hovered {
      border-color: rgba(255, 247, 231, 0.44);
      box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 46, 62, 0.14);
    }
    .third-detail-card__top {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 18px 0;
      color: rgba(247, 242, 234, 0.55);
      font: 600 10px/1 Arial, sans-serif;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .third-detail-card__label { color: rgba(255, 191, 112, 0.88); }
    .third-detail-card__media {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      aspect-ratio: 16 / 9;
      min-height: 0;
      margin: 14px 18px 0;
      overflow: hidden;
      border: 1px dashed rgba(247, 242, 234, 0.2);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.025);
      cursor: pointer;
    }
    .third-detail-card__media::before,
    .third-detail-card__media::after {
      content: "";
      position: absolute;
      z-index: 2;
      background: rgba(255, 247, 231, 0.14);
      pointer-events: none;
    }
    .third-detail-card__media::before { top: 28%; bottom: 28%; left: 50%; width: 1px; }
    .third-detail-card__media::after { left: 28%; right: 28%; top: 50%; height: 1px; }
    .third-detail-card__placeholder {
      position: relative;
      z-index: 3;
      color: rgba(247, 242, 234, 0.34);
      font: 600 10px/1 Arial, sans-serif;
      letter-spacing: 0.16em;
      white-space: nowrap;
    }
    .third-detail-card__image {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: rgba(11, 8, 17, 0.4);
    }
    .third-detail-card.has-image .third-detail-card__placeholder { display: none; }
    .third-detail-card.has-image .third-detail-card__media { cursor: zoom-in; }
    .third-detail-card__input { display: none; }
    .third-detail-card__content {
      position: relative;
      z-index: 2;
      padding: 18px 18px 20px;
    }
    .third-detail-card__title {
      margin: 0;
      color: #f7f2ea;
      font: 700 22px/1.05 Arial, sans-serif;
      letter-spacing: 0.02em;
    }
    .third-detail-card__description {
      margin: 9px 0 0;
      color: rgba(247, 242, 234, 0.54);
      font: 400 12px/1.5 Arial, sans-serif;
    }
    .third-detail-particle {
      position: absolute;
      z-index: 6;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(255, 247, 231, 0.98) 0%, rgba(255, 112, 112, 0.86) 32%, rgba(255, 46, 62, 0) 100%);
      box-shadow: 0 0 6px rgba(255, 46, 62, 0.78), 0 0 14px rgba(255, 247, 231, 0.3);
      animation: third-detail-particle-float 1.8s ease-out forwards;
    }
    @keyframes third-detail-particle-float {
      from { opacity: 0; transform: translate3d(0, 0, 0) scale(.2); }
      18% { opacity: 1; }
      to { opacity: 0; transform: translate3d(var(--particle-dx), var(--particle-dy), 0) scale(1.2); }
    }
    .third-detail-ripple {
      position: absolute;
      z-index: 8;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(255, 46, 62, 0.32) 0%, rgba(255, 46, 62, 0.14) 32%, transparent 72%);
      animation: third-detail-ripple .72s ease-out forwards;
    }
    @keyframes third-detail-ripple {
      from { opacity: .92; transform: scale(0); }
      to { opacity: 0; transform: scale(1); }
    }
    #fourth-screen {
      position: relative;
      z-index: 4;
      min-height: 100vh;
      box-sizing: border-box;
      padding: clamp(74px, 10vh, 124px) clamp(18px, 6vw, 96px) clamp(72px, 10vh, 124px);
      overflow: visible;
      isolation: isolate;
      background:
        radial-gradient(ellipse 80% 55% at 25% 0%, rgba(106, 26, 33, 0.34), transparent 72%),
        linear-gradient(180deg, rgba(11, 8, 17, 0.60) 0%, rgba(11, 8, 17, 0.56) 12%, rgba(59, 17, 24, 0.48) 30%, rgba(59, 17, 24, 0.70) 48%, rgba(11, 8, 17, 0.78) 72%, rgba(11, 8, 17, 0.64) 100%);
    }
    .fourth-screen-inner {
      position: relative;
      z-index: 1;
      width: min(1400px, 100%);
      margin: 0 auto;
      opacity: var(--fourth-reveal, 0);
      transform: translate3d(0, calc((1 - var(--fourth-reveal, 0)) * 28px), 0);
      will-change: opacity, transform;
    }
    .fourth-about-layout {
      display: grid;
      grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
      gap: clamp(34px, 6vw, 96px);
      align-items: start;
    }
    .fourth-profile {
      min-width: 0;
      padding-right: clamp(0px, 2vw, 28px);
    }
    .fourth-profile-kicker,
    .fourth-contact-kicker {
      display: inline-block;
      margin: 0;
      color: #d0a55e;
      font: 600 12px/1.2 Arial, sans-serif;
      letter-spacing: 0.08em;
      border-bottom: 1px solid rgba(208, 165, 94, 0.68);
      padding-bottom: 6px;
    }
    .fourth-profile-en {
      margin: clamp(24px, 4vh, 46px) 0 0;
      color: rgba(247, 242, 234, 0.88);
      font: 400 clamp(24px, 3vw, 42px)/1 Arial, sans-serif;
    }
    .fourth-profile-name {
      margin: 2px 0 0;
      color: #f7f2ea;
      font: 700 clamp(36px, 5vw, 68px)/0.98 "Arial Narrow", "Bahnschrift Condensed", Impact, sans-serif;
      letter-spacing: -0.06em;
    }
    .fourth-photo {
      position: relative;
      aspect-ratio: 3 / 4;
      max-width: 280px;
      --pointer-x: 50%;
      --pointer-y: 50%;
      --background-x: 50%;
      --background-y: 50%;
      --pointer-from-center: 0;
      --pointer-from-top: 0.5;
      --pointer-from-left: 0.5;
      --rotate-x: 0deg;
      --rotate-y: 0deg;
      margin-top: clamp(24px, 4vh, 44px);
      overflow: hidden;
      border: 1px solid rgba(247, 242, 234, 0.24);
      border-radius: 2px;
      background:
        radial-gradient(circle at var(--background-x) var(--background-y), rgba(113, 196, 255, 0.16), transparent 46%),
        linear-gradient(145deg, rgba(96, 73, 110, 0.3), rgba(113, 196, 255, 0.08) 52%, rgba(208, 165, 94, 0.08));
      cursor: pointer;
      isolation: isolate;
      transform: perspective(900px) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));
      transform-style: preserve-3d;
      transition: transform 0.18s ease-out, border-color 0.25s ease, box-shadow 0.25s ease;
      will-change: transform;
    }
    .fourth-photo.active {
      border-color: rgba(247, 242, 234, 0.56);
      box-shadow: 0 18px 42px rgba(4, 3, 8, 0.34), 0 0 26px rgba(113, 196, 255, 0.16);
    }
    .fourth-photo-glow,
    .fourth-photo-grain,
    .fourth-photo-shine,
    .fourth-photo-glare {
      position: absolute;
      pointer-events: none;
    }
    .fourth-photo-glow {
      z-index: 0;
      inset: -20%;
      background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(113, 196, 255, 0.44), transparent 52%);
      filter: blur(18px);
      opacity: 0.52;
      transform: translate3d(calc((var(--pointer-from-left) - 0.5) * -14px), calc((var(--pointer-from-top) - 0.5) * -14px), 0);
      transition: opacity 0.18s ease-out;
    }
    .fourth-photo-grain {
      z-index: 3;
      inset: -14%;
      overflow: hidden;
      opacity: 0.44;
      --grain-highlight: 0;
      mix-blend-mode: screen;
      transform: translate3d(calc((var(--pointer-from-left) - 0.5) * -12px), calc((var(--pointer-from-top) - 0.5) * -12px), 0);
      transition: opacity 0.18s ease-out, transform 0.18s ease-out;
    }
    .fourth-photo.has-image .fourth-photo-grain { opacity: 0.54; }
    .fourth-photo-sparkle-layer {
      position: absolute;
      z-index: 3;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      mix-blend-mode: screen;
      transition: opacity 0.18s ease-out;
    }
    .fourth-photo.active .fourth-photo-sparkle-layer { opacity: 1; }
    .fourth-photo-sparkle {
      position: absolute;
      --sparkle-color: 113, 196, 255;
      left: var(--sparkle-x);
      top: var(--sparkle-y);
      width: var(--sparkle-size);
      height: var(--sparkle-size);
      border-radius: 50%;
      background: radial-gradient(circle at center, rgba(var(--sparkle-color), 1) 0 20%, rgba(var(--sparkle-color), 0.86) 44%, rgba(var(--sparkle-color), 0) 100%);
      box-shadow: 0 0 4px rgba(var(--sparkle-color), 0.9), 0 0 12px rgba(var(--sparkle-color), 0.9);
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.35);
      transition: opacity 0.14s ease-out, transform 0.18s ease-out, filter 0.18s ease-out;
    }
    .fourth-photo-sparkle:nth-child(4n + 1) { --sparkle-color: 255, 51, 62; }
    .fourth-photo-sparkle:nth-child(4n + 2) { --sparkle-color: 255, 191, 112; }
    .fourth-photo-sparkle:nth-child(4n + 3) { --sparkle-color: 113, 196, 255; }
    .fourth-photo-sparkle:nth-child(4n + 4) { --sparkle-color: 247, 242, 234; }
    .fourth-photo-sparkle.is-near {
      opacity: calc(0.2 + var(--sparkle-strength) * 0.8);
      transform: translate(-50%, -50%) scale(calc(0.45 + var(--sparkle-strength) * 1.15));
      filter: brightness(calc(0.7 + var(--sparkle-strength) * 1.3));
    }
    .fourth-photo-grain-mark {
      position: absolute;
      width: clamp(56px, 28%, 118px);
      aspect-ratio: 2.16 / 1;
      overflow: visible;
      pointer-events: none;
      opacity: calc(0.28 + var(--grain-highlight, 0) * 0.52);
      transform-origin: center;
      filter: drop-shadow(0 0 3px rgba(113, 196, 255, 0.58)) drop-shadow(0 0 8px rgba(67, 155, 255, 0.28));
      animation: none;
    }
    .fourth-photo-grain-mark::before {
      content: "";
      position: absolute;
      z-index: 2;
      left: 18%;
      top: 22%;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(247, 242, 234, 1) 0 20%, rgba(113, 196, 255, 0.95) 48%, transparent 100%);
      box-shadow: 18px 9px 0 -1px rgba(113, 196, 255, 0.84), 42px -4px 0 -1px rgba(247, 242, 234, 0.82), 66px 14px 0 -1px rgba(113, 196, 255, 0.76);
      opacity: calc(0.12 + var(--grain-highlight, 0) * 0.88);
      transform: scale(calc(0.5 + var(--grain-highlight, 0) * 1.8));
    }
    .fourth-photo-grain-mark::after {
      content: "";
      position: absolute;
      z-index: 2;
      inset: 0;
      background: linear-gradient(118deg, transparent 34%, rgba(132, 221, 255, 0.86) 48%, rgba(247, 242, 234, 0.72) 51%, transparent 63%);
      mix-blend-mode: screen;
      opacity: calc(0.04 + var(--grain-highlight, 0) * 0.58);
    }
    .fourth-photo-grain-mark svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .fourth-photo-grain-mark path {
      vector-effect: non-scaling-stroke;
    }
    .fourth-photo-grain-mark.mark-1 { top: 10%; left: -3%; transform: rotate(-8deg) scale(1.02); }
    .fourth-photo-grain-mark.mark-2 { top: 39%; right: -6%; transform: rotate(5deg) scale(1.1); }
    .fourth-photo-grain-mark.mark-3 { bottom: 7%; left: 7%; transform: rotate(-4deg) scale(1.06); }
    .fourth-photo-shine {
      z-index: 4;
      inset: -28%;
      background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.42), transparent 34%);
      mix-blend-mode: screen;
      opacity: calc(0.2 + var(--pointer-from-center) * 0.34);
      transform: translate3d(calc((var(--pointer-from-left) - 0.5) * -20px), calc((var(--pointer-from-top) - 0.5) * -20px), 0);
      transition: opacity 0.18s ease-out;
    }
    .fourth-photo-glare {
      z-index: 4;
      inset: 0;
      background: linear-gradient(125deg, rgba(255, 247, 231, 0.28), transparent 34%, rgba(113, 196, 255, 0.16) 68%, transparent 86%);
      mix-blend-mode: screen;
      opacity: calc(0.08 + var(--pointer-from-center) * 0.26);
      transform: translate3d(calc((var(--pointer-from-left) - 0.5) * 10px), calc((var(--pointer-from-top) - 0.5) * 10px), 0);
      transition: opacity 0.18s ease-out, transform 0.18s ease-out;
    }
    .fourth-photo::before,
    .fourth-photo::after {
      content: "";
      position: absolute;
      z-index: 2;
      background: rgba(255, 247, 231, 0.18);
    }
    .fourth-photo::before { top: 35%; bottom: 35%; left: 50%; width: 1px; }
    .fourth-photo::after { top: 50%; right: 35%; left: 35%; height: 1px; }
    .fourth-photo-placeholder,
    .fourth-qr-placeholder {
      position: absolute;
      z-index: 3;
      top: 50%;
      left: 50%;
      color: rgba(247, 242, 234, 0.62);
      font: 600 10px/1.4 Arial, sans-serif;
      letter-spacing: 0.14em;
      text-align: center;
      white-space: nowrap;
      transform: translate(-50%, -50%);
    }
    .fourth-image-input { display: none; }
    .fourth-image {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.86;
    }
    .fourth-photo.has-image,
    .fourth-qr.has-image {
      border-color: rgba(208, 165, 94, 0.72);
      background: rgba(255, 255, 255, 0.08);
    }
    .fourth-photo.has-image .fourth-photo-placeholder,
    .fourth-qr.has-image .fourth-qr-placeholder { display: none; }
    .fourth-profile-role {
      max-width: 260px;
      margin: 22px 0 0;
      color: rgba(247, 242, 234, 0.9);
      font: 500 clamp(18px, 2vw, 26px)/1.12 Arial, sans-serif;
    }
    .fourth-main { min-width: 0; }
    .fourth-heading-row {
      display: flex;
      align-items: baseline;
      gap: 18px;
      flex-wrap: wrap;
    }
    .fourth-heading {
      margin: 0;
      color: #f7f2ea;
      font: 700 clamp(34px, 4.4vw, 62px)/0.98 "Arial Narrow", "Bahnschrift Condensed", Impact, sans-serif;
      letter-spacing: -0.05em;
    }
    .fourth-heading-en {
      color: rgba(247, 242, 234, 0.5);
      font: 400 12px/1 Arial, sans-serif;
    }
    .fourth-summary {
      max-width: 720px;
      margin: 26px 0 0;
      color: rgba(247, 242, 234, 0.78);
      font: 400 16px/1.75 Arial, sans-serif;
    }
    .fourth-info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 34px;
      margin-top: 28px;
      padding: 22px 0;
      border-top: 1px solid rgba(247, 242, 234, 0.18);
      border-bottom: 1px solid rgba(247, 242, 234, 0.18);
    }
    .fourth-info-item { display: grid; grid-template-columns: minmax(80px, 0.38fr) minmax(0, 1fr); gap: 14px; }
    .fourth-info-label { color: #d0a55e; font: 500 12px/1.5 Arial, sans-serif; }
    .fourth-info-value { color: rgba(247, 242, 234, 0.86); font: 500 13px/1.55 Arial, sans-serif; }
    .fourth-main-lower {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.85fr);
      gap: clamp(34px, 5vw, 68px);
      align-items: start;
      margin-top: clamp(30px, 4vh, 48px);
    }
    .fourth-main-lower > .fourth-subsection:first-child { margin-top: 0; }
    .fourth-subsection { margin-top: clamp(34px, 5vh, 56px); }
    .fourth-subsection-heading {
      display: flex;
      align-items: baseline;
      gap: 16px;
      flex-wrap: wrap;
      margin: 0;
      color: #f7f2ea;
      font: 700 clamp(28px, 3.2vw, 46px)/1 Arial, sans-serif;
      letter-spacing: -0.04em;
    }
    .fourth-subsection-en { color: rgba(247, 242, 234, 0.5); font: 400 11px/1 Arial, sans-serif; }
    .fourth-education { display: grid; gap: 6px; margin-top: 20px; color: rgba(247, 242, 234, 0.8); font: 500 14px/1.5 Arial, sans-serif; }
    .fourth-experience-list { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; color: rgba(247, 242, 234, 0.82); font: 500 14px/1.5 Arial, sans-serif; }
    .fourth-experience-list li { position: relative; padding-left: 18px; }
    .fourth-experience-list li::before { content: ""; position: absolute; top: 0.6em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #d0a55e; box-shadow: 0 0 9px rgba(208, 165, 94, 0.52); }
    .fourth-contact {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
      gap: clamp(28px, 6vw, 86px);
      align-items: center;
      margin-top: clamp(70px, 11vh, 132px);
      padding-top: clamp(32px, 5vh, 58px);
      border-top: 1px solid rgba(247, 242, 234, 0.2);
    }
    .fourth-contact-title {
      margin: 26px 0 0;
      color: #f7f2ea;
      font: 700 clamp(52px, 8vw, 116px)/0.82 "Arial Narrow", "Bahnschrift Condensed", Impact, sans-serif;
      letter-spacing: -0.08em;
    }
    .fourth-contact-copy {
      max-width: 620px;
      margin: 24px 0 0;
      color: rgba(247, 242, 234, 0.74);
      font: 400 15px/1.75 Arial, sans-serif;
    }
    .fourth-contact-details {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: 52px;
      padding: 18px 0;
      border-top: 1px solid rgba(247, 242, 234, 0.18);
      border-bottom: 1px solid rgba(247, 242, 234, 0.18);
    }
    .fourth-contact-item { min-width: 0; }
    .fourth-contact-label { color: #d0a55e; font: 600 12px/1.2 Arial, sans-serif; }
    .fourth-contact-value { display: block; margin-top: 10px; color: rgba(247, 242, 234, 0.9); font: 600 14px/1.35 Arial, sans-serif; overflow-wrap: anywhere; }
    .fourth-socials { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
    .fourth-social { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; padding: 8px 14px; border: 1px solid rgba(208, 165, 94, 0.62); border-radius: 999px; color: rgba(247, 242, 234, 0.9); background: rgba(255, 255, 255, 0.025); font: 500 11px/1 Arial, sans-serif; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
    .fourth-social:hover, .fourth-social:focus-visible { border-color: #d0a55e; color: #0b0811; background: #d0a55e; outline: none; }
    .fourth-qr {
      position: relative;
      aspect-ratio: 1;
      width: min(100%, 280px);
      justify-self: end;
      overflow: hidden;
      border: 1px solid rgba(247, 242, 234, 0.26);
      border-radius: 16px;
      background: rgba(247, 242, 234, 0.88);
      cursor: pointer;
      isolation: isolate;
    }
    .fourth-qr .fourth-image { opacity: 0.94; }
    .fourth-qr-placeholder { color: rgba(11, 8, 17, 0.84); letter-spacing: 0.04em; }
    .fourth-main-lower > .fourth-contact {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(120px, 0.68fr);
      gap: 18px 24px;
      align-items: start;
      margin-top: clamp(34px, 5vh, 56px);
      margin-right: 0;
      margin-bottom: 0;
      margin-left: 0;
      padding: 0 0 0 24px;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .fourth-main-lower .fourth-contact-kicker { grid-column: 1 / -1; }
    .fourth-main-lower .fourth-contact-details {
      grid-column: 1;
      grid-row: 1;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 0;
      padding: 0 0 16px;
      border-top: 0;
      border-bottom: 1px solid rgba(247, 242, 234, 0.18);
    }
    .fourth-main-lower .fourth-socials { grid-column: 1; grid-row: 3; flex-wrap: nowrap; gap: 8px; margin-top: 0; }
    .fourth-main-lower .fourth-social { min-width: 0; flex: 1 1 0; padding: 7px 8px; font-size: 10px; white-space: nowrap; }
    .fourth-main-lower .fourth-qr { grid-column: 2; grid-row: 1; width: 100%; max-width: 180px; margin-top: 0; justify-self: end; align-self: start; border-radius: 12px; }
    .hero-top { max-width: 100%; text-align: center; }
    .hero-name {
      margin: 0;
      font-family: "Arial Narrow", "Bahnschrift Condensed", Impact, sans-serif;
      font-size: clamp(76px, 15.5vw, 260px);
      font-weight: 700;
      letter-spacing: -0.08em;
      line-height: 0.78;
      white-space: nowrap;
      transform: scaleX(0.78);
      text-shadow: 0 0 26px rgba(255, 247, 231, 0.16), 0 0 80px rgba(255, 55, 61, 0.12);
    }
    .hero-role {
      margin: clamp(22px, 3.2vh, 34px) 0 0;
      font: 600 clamp(12px, 1.35vw, 20px)/1.2 Arial, sans-serif;
      letter-spacing: 0.34em;
      color: rgba(247, 242, 234, 0.9);
    }
    .hero-bottom {
      position: absolute;
      right: clamp(24px, 5vw, 82px);
      bottom: clamp(24px, 4vh, 46px);
      display: flex;
      align-items: center;
      gap: clamp(18px, 2.2vw, 34px);
      font: 600 clamp(10px, 0.78vw, 13px)/1 Arial, sans-serif;
      letter-spacing: 0.22em;
      color: rgba(247, 242, 234, 0.92);
    }
    .hero-separator { width: 34px; height: 2px; background: #ff2e3e; box-shadow: 0 0 10px rgba(255, 46, 62, 0.45); }
    #edit-toggle {
      position: fixed;
      top: 18px;
      right: 22px;
      z-index: 20;
      border: 1px solid rgba(247, 242, 234, 0.28);
      border-radius: 999px;
      padding: 9px 14px;
      color: rgba(247, 242, 234, 0.88);
      background: rgba(11, 8, 17, 0.42);
      backdrop-filter: blur(10px);
      font: 600 11px/1 Arial, sans-serif;
      letter-spacing: 0.14em;
      cursor: pointer;
      transition: border-color .2s ease, background .2s ease, color .2s ease;
    }
    #edit-toggle:hover,
    #edit-toggle:focus-visible {
      border-color: rgba(255, 247, 231, 0.8);
      background: rgba(255, 247, 231, 0.12);
      color: #fffaf0;
      outline: none;
    }
    #export-tools {
      position: fixed;
      top: 62px;
      right: 22px;
      z-index: 20;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 132px;
      padding: 10px;
      border: 1px solid rgba(247, 242, 234, 0.18);
      border-radius: 12px;
      background: rgba(11, 8, 17, 0.48);
      backdrop-filter: blur(12px);
    }
    .export-action {
      width: 100%;
      border: 1px solid rgba(247, 242, 234, 0.22);
      border-radius: 7px;
      padding: 8px 10px;
      color: rgba(247, 242, 234, 0.9);
      background: rgba(255, 255, 255, 0.04);
      font: 600 10px/1 Arial, sans-serif;
      letter-spacing: 0.08em;
      cursor: pointer;
    }
    .export-action:hover,
    .export-action:focus-visible {
      border-color: rgba(255, 247, 231, 0.8);
      background: rgba(255, 247, 231, 0.12);
      outline: none;
    }
    #export-status {
      min-height: 12px;
      color: rgba(247, 242, 234, 0.62);
      font: 500 9px/1.3 Arial, sans-serif;
      letter-spacing: 0.03em;
      text-align: center;
    }
    #text-style-tools {
      position: fixed;
      top: 62px;
      right: 170px;
      z-index: 20;
      display: none;
      gap: 8px;
      width: 178px;
      padding: 10px;
      border: 1px solid rgba(247, 242, 234, 0.18);
      border-radius: 12px;
      background: rgba(11, 8, 17, 0.52);
      backdrop-filter: blur(12px);
      color: rgba(247, 242, 234, 0.9);
      font: 500 10px/1.3 Arial, sans-serif;
    }
    body.is-third-detail-open #edit-toggle,
    body.is-third-detail-open #text-style-tools { z-index: 90; }
    .is-editing #text-style-tools { display: grid; }
    .text-style-heading {
      color: rgba(255, 247, 231, 0.92);
      font-weight: 700;
      letter-spacing: 0.12em;
    }
    .text-style-row {
      display: grid;
      grid-template-columns: 34px 1fr auto;
      align-items: center;
      gap: 6px;
    }
    .text-style-row label { color: rgba(247, 242, 234, 0.68); }
    .text-style-row input[type="range"] { width: 100%; accent-color: #ff5260; }
    .text-style-row input[type="color"] {
      width: 28px;
      height: 22px;
      padding: 0;
      border: 1px solid rgba(247, 242, 234, 0.28);
      border-radius: 5px;
      background: transparent;
      cursor: pointer;
    }
    .text-style-row select {
      grid-column: 2 / 4;
      min-width: 0;
      border: 1px solid rgba(247, 242, 234, 0.22);
      border-radius: 6px;
      padding: 5px 6px;
      color: rgba(247, 242, 234, 0.9);
      background: rgba(255, 255, 255, 0.05);
      font: inherit;
    }
    .text-style-row select option { color: #151018; background: #f7f2ea; }
    #text-style-reset {
      border: 1px solid rgba(247, 242, 234, 0.22);
      border-radius: 6px;
      padding: 6px 8px;
      color: rgba(247, 242, 234, 0.82);
      background: rgba(255, 255, 255, 0.04);
      font: 600 9px/1 Arial, sans-serif;
      cursor: pointer;
    }
    #text-style-reset:hover,
    #text-style-reset:focus-visible {
      border-color: rgba(255, 247, 231, 0.8);
      background: rgba(255, 247, 231, 0.12);
      outline: none;
    }
    #text-style-target {
      min-height: 12px;
      overflow: hidden;
      color: rgba(247, 242, 234, 0.56);
      font-size: 9px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .editable-text { pointer-events: none; }
    .is-editing #hero-copy { pointer-events: auto; }
    .is-editing .editable-text {
      pointer-events: auto;
      cursor: text;
      touch-action: none;
      border-radius: 6px;
      outline: 1px dashed rgba(255, 247, 231, 0.48);
      outline-offset: 8px;
    }
    .is-editing .editable-text.is-dragging-text {
      cursor: grabbing;
      user-select: none;
      touch-action: none;
      outline-color: #ff5260;
      z-index: 30;
    }
    .editable-text.is-text-positioned {
      position: relative;
      left: var(--text-offset-x, 0px);
      top: var(--text-offset-y, 0px);
    }
    .is-editing .editable-text:focus {
      outline-color: #ff5260;
      background: rgba(0, 0, 0, 0.14);
    }
    /* Fluid tablet layout: keep the desktop composition while giving every
       section and the project-detail view room to breathe below 1024px. */
    @media (min-width: 621px) and (max-width: 1024px) {
      #second-screen,
      #third-screen,
      #fourth-screen {
        padding-right: clamp(28px, 5vw, 56px);
        padding-left: clamp(28px, 5vw, 56px);
      }
      .second-screen-title,
      .third-screen-title { font-size: clamp(52px, 9vw, 92px); }
      .gallery-viewport {
        margin-right: calc(clamp(28px, 5vw, 56px) * -1);
        margin-left: calc(clamp(28px, 5vw, 56px) * -1);
        padding-right: clamp(28px, 5vw, 56px);
        padding-left: clamp(28px, 5vw, 56px);
      }
      .gallery-card { flex-basis: clamp(250px, 38vw, 360px); }
      .accordion-gallery { height: clamp(310px, 52vh, 420px); }
      .third-detail-shell { padding: clamp(28px, 4.5vw, 56px); }
      .third-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .fourth-about-layout { gap: clamp(28px, 4vw, 56px); }
      .fourth-photo { max-width: min(25vw, 250px); }
      .fourth-main-lower { grid-template-columns: 1fr; }
      .fourth-main-lower > .fourth-contact {
        grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr);
        padding-left: 0;
      }
    }
    @media (max-width: 620px) {
      :root { --mobile-gutter: 16px; }
      html, body { min-width: 0; width: 100%; overflow-x: hidden; }
      #lights { height: 100svh; min-height: 520px; border-radius: 0; }
      #hero-copy { min-height: 100svh; padding: max(78px, calc(58px + env(safe-area-inset-top))) var(--mobile-gutter) max(72px, calc(54px + env(safe-area-inset-bottom))); }
      .hero-top { width: 100%; }
      #edit-toggle { top: max(14px, env(safe-area-inset-top)); right: 12px; }
      .hero-name { max-width: 100%; font-size: clamp(52px, 16vw, 84px); letter-spacing: -0.09em; }
      .hero-role { max-width: 100%; font-size: clamp(10px, 3vw, 14px); letter-spacing: 0.18em; white-space: normal; text-align: center; }
      .hero-bottom { right: var(--mobile-gutter); bottom: max(18px, env(safe-area-inset-bottom)); gap: 12px; font-size: 10px; letter-spacing: 0.12em; }
      .hero-separator { width: 22px; }
      #export-tools { top: max(58px, calc(46px + env(safe-area-inset-top))); right: 12px; width: 118px; padding: 8px; }
      #text-style-tools { top: 160px; right: 12px; left: 12px; width: auto; max-height: min(48svh, 330px); overflow-y: auto; }
      #second-screen,
      #third-screen,
      #fourth-screen {
        min-height: 100svh;
        padding-top: max(74px, calc(58px + env(safe-area-inset-top)));
        padding-right: var(--mobile-gutter);
        padding-bottom: max(72px, calc(54px + env(safe-area-inset-bottom)));
        padding-left: var(--mobile-gutter);
      }
      .second-screen-inner,
      .third-screen-inner,
      .fourth-screen-inner { width: 100%; }
      .second-screen-kicker,
      .third-screen-kicker {
        max-width: calc(100% - 132px);
        font-size: 9px;
        line-height: 1.45;
        letter-spacing: 0.2em;
        overflow-wrap: anywhere;
      }
      .second-screen-title,
      .third-screen-title {
        max-width: calc(100% - 132px);
        font-size: clamp(38px, 11.5vw, 68px);
        line-height: 0.9;
        overflow-wrap: normal;
        word-break: normal;
      }
      .third-screen-title { font-size: clamp(36px, 10.5vw, 64px); }
      .second-screen-description { font-size: 13px; }
      .third-screen-description { font-size: 13px; }
      .gallery-viewport { margin-right: calc(var(--mobile-gutter) * -1); margin-left: calc(var(--mobile-gutter) * -1); padding-right: var(--mobile-gutter); padding-left: var(--mobile-gutter); overscroll-behavior-x: contain; }
      .gallery-card { flex-basis: min(78vw, 330px); }
      .gallery-viewport { margin-top: 34px; scrollbar-width: none; }
      .gallery-viewport::-webkit-scrollbar { display: none; }
      .gallery-card-meta { gap: 8px; padding-top: 11px; }
      .gallery-card-title { font-size: 12px; }
      .gallery-card-index { font-size: 9px; }
      .accordion-gallery {
        height: min(68svh, 420px);
        min-height: 270px;
        gap: 8px;
        margin-top: 34px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 8px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
      }
      .accordion-gallery::-webkit-scrollbar { display: none; }
      .accordion-panel {
        flex: 0 0 min(78vw, 330px);
        scroll-snap-align: start;
      }
      .accordion-panel.is-active { flex: 0 0 min(82vw, 350px); flex-grow: 0; }
      .accordion-panel__label { right: 12px; bottom: 12px; left: 12px; font-size: 10px; }
      .accordion-panel__bar { flex-basis: 16px; width: 16px; }
      .accordion-panel__text { white-space: normal; overflow-wrap: anywhere; }
      .fourth-about-layout { grid-template-columns: 1fr; gap: 46px; }
      .fourth-profile { display: flex; flex-direction: column; align-items: stretch; padding-right: 0; text-align: left; }
      .fourth-photo { order: 1; align-self: center; width: min(84vw, 280px); max-width: none; margin-top: 80px; margin-right: auto; margin-left: auto; }
      .fourth-profile-kicker { order: 2; margin-top: 18px; }
      .fourth-profile-en,
      .fourth-profile-name { order: 2; display: none; }
      .fourth-profile-role { order: 3; max-width: 100%; margin-top: 16px; line-height: 1.3; }
      .fourth-heading { font-size: clamp(34px, 12vw, 58px); }
      .fourth-summary { font-size: 14px; }
      .fourth-info-grid { grid-template-columns: 1fr; gap: 14px; }
      .fourth-info-item { grid-template-columns: minmax(76px, 0.34fr) minmax(0, 1fr); gap: 10px; min-width: 0; align-items: start; }
      .fourth-info-label,
      .fourth-info-value,
      .fourth-summary,
      .fourth-education span,
      .fourth-experience-list li { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
      .fourth-info-value { line-height: 1.45; }
      .fourth-main,
      .fourth-main-lower,
      .fourth-main-lower-copy,
      .fourth-contact,
      .fourth-contact-details { min-width: 0; }
      .fourth-main-lower { grid-template-columns: 1fr; }
      .fourth-main-lower > .fourth-contact { grid-template-columns: 1fr; margin-top: 34px; padding-left: 0; }
      .fourth-main-lower .fourth-contact-kicker,
      .fourth-main-lower .fourth-socials { grid-column: 1; grid-row: auto; }
      .fourth-main-lower > .fourth-contact { grid-template-columns: minmax(0, 1fr) minmax(150px, .9fr); gap: 8px; align-items: start; }
      .fourth-main-lower > .fourth-contact .fourth-contact-details { grid-column: 1; grid-row: 1; margin-top: 0; }
      .fourth-main-lower > .fourth-contact .fourth-qr { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; width: min(100%, 186px); }
      .fourth-contact { grid-template-columns: 1fr; margin-top: 72px; }
      .fourth-contact-details { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }
      .fourth-contact-title { font-size: clamp(50px, 16vw, 82px); }
      .fourth-contact-copy { font-size: 14px; }
      .fourth-qr { justify-self: start; width: min(72vw, 260px); }
      .gallery-lightbox-dialog { width: fit-content; max-width: 100%; max-height: 88vh; }
      .gallery-lightbox-media { width: min(86vw, 420px); height: min(54svh, 420px); min-height: 0; }
      .gallery-lightbox-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
      #third-detail-view,
      .third-detail-view { padding: 12px; }
      .third-detail-shell { min-height: calc(100svh - 24px); padding: 54px 16px 24px; border-radius: 18px; }
      .third-detail-close { top: 12px; right: 12px; }
      .third-detail-project { align-items: flex-start; flex-direction: column; gap: 8px; }
      .third-detail-description { font-size: 13px; }
      .third-detail-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 30px; }
      .third-detail-card { min-height: 258px; transform: none; }
      .third-detail-card__media { min-height: 0; aspect-ratio: 16 / 9; margin-right: 14px; margin-left: 14px; }
      .third-detail-card__top { padding-right: 14px; padding-left: 14px; }
      .third-detail-card__content { padding: 14px 14px 18px; }
      .third-detail-card__title { font-size: 20px; }
      .third-detail-card__description { overflow-wrap: anywhere; }
      .third-detail-card .image-remove-button { top: 8px; right: 8px; }
    }
    @media (max-width: 430px) {
      :root { --mobile-gutter: 12px; }
      .gooey-nav-container { max-width: calc(100vw - 20px); }
      .gooey-nav-container nav ul { max-width: calc(100vw - 20px); }
      .gooey-nav-container nav ul li a { padding-right: 0.54rem; padding-left: 0.54rem; font-size: 9px; }
      #edit-toggle { right: 10px; padding: 8px 11px; font-size: 10px; }
      #export-tools { right: 10px; width: 96px; padding: 6px; gap: 6px; }
      #export-tools .export-action { padding: 7px 6px; font-size: 9px; }
      .second-screen-title,
      .third-screen-title { font-size: clamp(36px, 11vw, 54px); max-width: calc(100% - 120px); }
      .third-screen-title { font-size: clamp(34px, 10vw, 50px); }
      .second-screen-description,
      .third-screen-description { font-size: 12px; line-height: 1.65; }
      .gallery-card { flex-basis: min(84vw, 300px); }
      .accordion-gallery { height: min(64svh, 360px); min-height: 250px; }
      .accordion-panel,
      .accordion-panel.is-active { flex-basis: min(84vw, 300px); }
      .accordion-panel__placeholder,
      .gallery-placeholder,
      .third-detail-card__placeholder { font-size: 9px; letter-spacing: 0.12em; }
      .fourth-profile-en { margin-top: 20px; font-size: 23px; }
      .fourth-profile-name { font-size: clamp(34px, 12vw, 54px); }
      .fourth-photo { width: min(86vw, 270px); }
      .fourth-profile-role { margin-top: 16px; font-size: 16px; line-height: 1.3; }
      .fourth-info-item { grid-template-columns: minmax(68px, .32fr) minmax(0, 1fr); gap: 8px; }
      .fourth-info-value,
      .fourth-education,
      .fourth-experience-list { font-size: 12px; }
      .fourth-contact-title { font-size: clamp(44px, 15vw, 70px); }
      .fourth-contact-details { gap: 14px; }
      .fourth-main-lower .fourth-socials { flex-wrap: wrap; }
      .fourth-main-lower .fourth-social { flex: 0 1 auto; min-width: 76px; }
      .fourth-qr { width: min(68vw, 230px); }
      .gallery-lightbox-dialog { min-width: 0; width: min(100%, 390px); padding: 10px; }
      .gallery-lightbox-media { width: 100%; height: min(58svh, 360px); }
      .gallery-lightbox-title { font-size: 16px; }
      .third-detail-shell { padding-right: 12px; padding-left: 12px; }
      .third-detail-heading { font-size: clamp(38px, 12vw, 64px); }
      .third-detail-kicker { font-size: 10px; letter-spacing: 0.2em; }
      .third-detail-project { font-size: 11px; }
      .third-detail-card { min-height: 238px; }
    }
    @media (max-width: 620px) and (orientation: landscape) {
      #lights { min-height: 100svh; }
      #hero-copy { padding-top: 58px; padding-bottom: 42px; }
      #second-screen,
      #third-screen,
      #fourth-screen { padding-top: 64px; padding-bottom: 56px; }
      .accordion-gallery { height: min(76svh, 330px); min-height: 220px; }
      .third-detail-shell { min-height: calc(100svh - 24px); }
      .gallery-lightbox-media { height: min(68svh, 300px); }
    }
    @media print {
      @page { size: landscape; margin: 0; }
      html, body { width: 100%; height: 100%; background: #0b0811 !important; }
      #edit-toggle, #export-tools, #text-style-tools, #gallery-lightbox, .image-remove-button { display: none !important; }
      #lights, #particle-field, #hero-copy {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    }
  
/* Public release: keep viewing and lightboxes, hide authoring controls. */
#edit-toggle, #export-tools, #text-style-tools, .accordion-cover-button, .image-remove-button, input[type="file"] { display: none !important; }

/* Restore original mobile typography over exported desktop inline styles. */
@media (max-width: 620px) {
 .hero-name { font-size: clamp(52px, 16vw, 84px) !important; letter-spacing: -0.09em !important; }
 .hero-role { font-size: clamp(10px, 3vw, 14px) !important; letter-spacing: 0.18em !important; }
}