/* 体験モード: 縦の移動は前後の奥行き、横の移動は各章の詳細。 */
.experience-track {
  inset: 88px 0 0;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: none;
  scroll-behavior: auto;
  perspective: none;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.has-horizontal-slides .experience-scene-inner,
.has-horizontal-slides .scene-detail-card { overscroll-behavior-y: contain; }
.experience {
  overflow: clip;
  background-size: 125% 125%;
  animation: experience-ambient 24s ease-in-out infinite alternate;
}
.experience::before { animation: experience-grid-drift 30s linear infinite alternate; }
.experience::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(circle at 23% 75%, rgba(75, 151, 92, .16), transparent 31%), radial-gradient(circle at 78% 25%, rgba(99, 191, 120, .13), transparent 27%);
  animation: experience-glow 22s ease-in-out infinite alternate;
}
.experience-depth i { animation: experience-depth-breathe 12s ease-in-out infinite alternate; }
.experience-depth i:nth-child(2) { animation-delay: -4s; }
.experience-depth i:nth-child(3) { animation-delay: -8s; }
.experience-geometry { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.experience-geometry i { position: absolute; display: block; pointer-events: none; }
.geometry-line { left: -25%; width: 150%; height: 1px; background: linear-gradient(90deg, transparent, rgba(144, 216, 164, .26), transparent); transform-origin: center; animation: geometry-line-drift 22s linear infinite alternate; }
.geometry-line-one { top: 23%; transform: rotate(-19deg); }
.geometry-line-two { top: 61%; transform: rotate(18deg); animation-duration: 30s; animation-direction: alternate-reverse; }
.geometry-line-three { top: 83%; transform: rotate(-7deg); animation-duration: 26s; }
.geometry-orbit { width: min(62vw, 760px); aspect-ratio: 1; border: 1px solid rgba(138, 215, 157, .13); border-radius: 50%; animation: geometry-orbit-drift 38s linear infinite; }
.geometry-orbit::after { content: ""; position: absolute; top: 13%; left: 14%; width: 5px; height: 5px; border-radius: 50%; background: #a1e2b0; box-shadow: 0 0 20px #7bd391; }
.geometry-orbit-one { left: -23vw; top: 13%; }
.geometry-orbit-two { width: min(34vw, 470px); right: -7vw; bottom: -16%; animation-duration: 28s; animation-direction: reverse; }
.geometry-scan { top: 0; bottom: 0; left: 0; width: 17vw; background: linear-gradient(90deg, transparent, rgba(150, 232, 172, .035), transparent); transform: skewX(-15deg); animation: geometry-scan 19s ease-in-out infinite; }
@keyframes geometry-line-drift { from { margin-left: -7%; opacity: .32; } to { margin-left: 7%; opacity: .85; } }
@keyframes geometry-orbit-drift { from { transform: rotate(0deg) scale(1); } to { transform: rotate(360deg) scale(1.06); } }
@keyframes geometry-scan { 0%, 15% { left: -30%; opacity: 0; } 35% { opacity: 1; } 75%, 100% { left: 125%; opacity: 0; } }
.experience-particles { z-index: 3; opacity: 1; }
.experience-topbar { z-index: 6; }
.experience-progress { z-index: 6; }
.experience-guide {
  position: absolute;
  z-index: 5;
  left: clamp(24px, 5vw, 80px);
  bottom: clamp(22px, 3vw, 42px);
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: calc(100vw - 110px);
  padding: 14px 18px;
  border: 1px solid rgba(179, 230, 190, .5);
  background: rgba(13, 47, 31, .86);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
  transition: opacity .35s, transform .35s, visibility .35s;
}
.experience-guide.is-hidden { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; }
.experience-guide strong { display: block; color: #edf8ee; font-size: 13px; letter-spacing: .02em; }
.experience-guide small { display: block; margin-top: 4px; color: #b7dabf; font-size: 11px; }
.guide-wheel { flex: 0 0 25px; width: 25px; height: 36px; border: 1px solid #a9dcb4; border-radius: 16px; position: relative; }
.guide-wheel i { position: absolute; left: 11px; top: 7px; width: 2px; height: 7px; background: #ccefd1; border-radius: 2px; animation: guide-wheel 1.7s ease-in-out infinite; }
.guide-arrow { margin-left: 16px; font-size: 19px; color: #b8e9c0; animation: guide-arrow 1.7s ease-in-out infinite; }
.experience-side {
  position: absolute;
  z-index: 5;
  right: clamp(12px, 2vw, 30px);
  top: 53%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 12px 5px;
  border: 1px solid rgba(185, 230, 194, .25);
  background: rgba(8, 32, 21, .55);
  backdrop-filter: blur(10px);
}
.experience-side-label { color: #b9e4c3; font: 9px ui-monospace, monospace; letter-spacing: .24em; writing-mode: vertical-rl; }
.experience-side .experience-dots { flex-direction: column; }
.experience-side .experience-dots button { position: relative; display: grid; place-items: center; width: 44px; height: 36px; padding: 0; }
.experience-side .experience-dots button::after { width: 8px; height: 8px; transition: transform .25s, background .25s, box-shadow .25s; }
.experience-side .experience-dots button:hover::after { transform: scale(1.35); background: #b9e9c3; }
.experience-side .experience-dots button[aria-current="step"]::after { background: #b3ecc1; box-shadow: 0 0 0 5px rgba(169,226,180,.13), 0 0 15px rgba(169,226,180,.65); animation: scroll-dot-breathe 2.4s ease-in-out infinite; }
.experience-side .experience-dots button.is-upcoming::before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #b9eec4; box-shadow: 0 0 9px #a9e2b4; animation: scroll-dot-flow 2.4s ease-in-out infinite; }
@keyframes scroll-dot-breathe { 50% { box-shadow: 0 0 0 8px rgba(169,226,180,.06), 0 0 19px rgba(169,226,180,.8); } }
@keyframes scroll-dot-flow { 0%, 18% { opacity: 0; transform: translateY(-15px) scale(.6); } 40% { opacity: 1; } 70%, 100% { opacity: 0; transform: translateY(9px) scale(1.1); } }
.experience-side a:focus-visible, .experience-side button:focus-visible { outline: 3px solid #e9f7eb; outline-offset: 2px; }
@keyframes experience-ambient { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes experience-grid-drift { from { background-position: 0 0; opacity: .6; } to { background-position: 78px 78px; opacity: 1; } }
@keyframes experience-glow { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(5%, -4%, 0) scale(1.1); } }
@keyframes experience-depth-breathe { from { opacity: .35; } to { opacity: .85; } }
@keyframes guide-wheel { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(8px); opacity: 1; } }
@keyframes guide-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.experience-stage { position: sticky; top: 0; height: 100%; overflow: hidden; isolation: isolate; scroll-snap-align: start; }
.experience-runway { height: 500%; pointer-events: none; }
.experience-runway i { display: block; height: 20%; scroll-snap-align: start; }
.experience-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(22px, 3vh, 36px) clamp(78px, 7vw, 110px) clamp(20px, 3vh, 34px) clamp(24px, 5vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(12px, 2vh, 24px);
  place-items: stretch;
  overflow: hidden;
  opacity: var(--scene-opacity, 0);
  filter: none;
  transform: perspective(1100px) translate3d(0, 0, var(--scene-depth, -420px)) scale(var(--scene-scale, .65));
  transform-origin: 50% 50%;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
@media (min-height: 621px) { .experience-track { touch-action: none; } }
.experience-scene.is-current { pointer-events: auto; }
.experience-scene-inner {
  width: min(100%, 1360px);
  min-height: 0;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(250px, .88fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  opacity: 1;
  transform: none;
  transition: none;
}
.experience-scene-inner > * { min-width: 0; }
.scene-copy { min-width: 0; }
.scene-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 610px);
  margin: clamp(18px, 3.5vh, 35px) 0 0;
  padding: 1px;
  border: 1px solid rgba(181, 227, 190, .35);
  background: rgba(180, 232, 193, .2);
}
.scene-highlights > div {
  min-height: 75px;
  padding: 13px 16px;
  background: rgba(10, 42, 26, .9);
}
.scene-highlights > div:first-child { grid-column: 1 / -1; }
.scene-highlights dt {
  margin-bottom: 7px;
  color: #a6dfb4;
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
}
.scene-highlights dd { margin: 0; color: #f0fbf1; font-size: clamp(12px, 1.08vw, 15px); line-height: 1.45; }
.scene-highlights dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.experience-scene .scene-copy h2 { margin-bottom: clamp(14px, 2vh, 24px); }
.experience-scene .scene-copy > p:not(.scene-index) { line-height: 1.65; }
.scene-copy h2 { font-size: clamp(45px, 5.4vw, 86px); }
.scene-caption b { margin-left: 12px; font-size: 18px; }
.scene-visual { min-width: 0; min-height: 250px; max-height: 36vh; overflow: hidden; }
.scene-visual-portal { min-height: 310px; }
.portal-ring { width: min(29vw, 340px); }
.portal-ring-two { width: min(23vw, 270px); }
.portal-core { width: 136px; font-size: 84px; }
.scene-window { width: 100%; min-height: 235px; }
.scene-flow { padding: 43px 20px 38px; }
.scene-ai-demo { display: block; padding: 15px; border: 1px solid rgba(169, 222, 181, .58); background: linear-gradient(145deg, rgba(11, 47, 30, .94), rgba(9, 32, 22, .97)); box-shadow: 0 24px 55px rgba(0, 0, 0, .22), inset 0 1px rgba(222, 255, 229, .08); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ai-demo-head, .ai-demo-input, .ai-demo-actions, .ai-demo-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-demo-head { color: #d7f2dc; font-size: 10px; letter-spacing: .13em; }
.ai-demo-head i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #9dddac; box-shadow: 0 0 10px #7ccc90; }
.ai-demo-head small { color: #a2c9aa; font-size: 10px; letter-spacing: 0; }
.ai-demo-input { margin-top: 13px; padding: 9px 10px; border: 1px solid rgba(177, 230, 189, .3); background: rgba(239, 255, 241, .07); font-size: 11px; }
.ai-demo-input span { color: #9ec9a8; }
.ai-demo-input strong { flex: 1; color: #ecfaee; font-weight: 500; white-space: nowrap; overflow: hidden; border-right: 1px solid #a5deb0; }
.ai-demo-actions { margin-top: 8px; color: #9bc5a5; font-size: 9px; }
.ai-demo-actions button { min-height: 32px; padding: 4px 12px; border: 1px solid #a4ddb0; background: #c9efd0; color: #133a21; font: 700 11px ui-monospace, monospace; cursor: pointer; }
.ai-demo-terminal { margin-top: 10px; padding: 9px 11px; min-height: 91px; background: rgba(1, 14, 8, .65); border: 1px solid rgba(156, 211, 170, .19); }
.ai-demo-terminal p { margin: 0 0 4px; color: #c2e3c9; font-size: 10px; line-height: 1.35; }
.ai-demo-terminal b { color: #80d296; font-weight: 500; }
.ai-demo-line { opacity: 0; transform: translateY(5px); transition: opacity .35s, transform .35s; }
.scene-ai-demo[data-phase="reading"] .ai-demo-line-one, .scene-ai-demo[data-phase="classifying"] .ai-demo-line-one, .scene-ai-demo[data-phase="classifying"] .ai-demo-line-two, .scene-ai-demo[data-phase="complete"] .ai-demo-line { opacity: 1; transform: none; }
.ai-demo-result { margin-top: 8px; padding: 8px 10px; background: rgba(190, 239, 199, .12); border-left: 2px solid #a7e3b4; opacity: .25; transition: opacity .4s, transform .4s; transform: translateY(5px); }
.ai-demo-result span, .ai-demo-result small { color: #a9d8b3; font-size: 9px; }
.ai-demo-result strong { color: white; font-size: 11px; }
.scene-ai-demo[data-phase="complete"] .ai-demo-result { opacity: 1; transform: none; }
.ai-demo-cursor { position: absolute; top: var(--demo-cursor-y, 72%); left: var(--demo-cursor-x, 9%); width: 21px; height: 28px; z-index: 2; pointer-events: none; opacity: 1; transform-origin: 2px 2px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); transition: top .8s ease, left .8s ease, transform .18s ease, opacity .25s; }
.ai-demo-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scene-ai-demo[data-phase="idle"] .ai-demo-cursor { opacity: 0; }
.scene-ai-demo[data-phase="reading"] .ai-demo-cursor { transform: scale(.82); }
.ai-demo-cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border: 1px solid #d6f6db; border-radius: 50%; opacity: 0; }
.scene-ai-demo[data-phase="reading"] .ai-demo-cursor::after { animation: ai-cursor-click .55s ease-out 1; }
@keyframes ai-cursor-click { 0% { opacity: .9; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.8); } }
.scene-visual-cases { display: block; margin: 0; border: 1px solid rgba(176, 231, 187, .5); background: #193a27; box-shadow: 0 24px 55px rgba(0, 0, 0, .2); }
.scene-visual-cases img { display: block; width: 100%; height: 100%; max-height: 36vh; object-fit: cover; object-position: 55% center; opacity: .9; }
.scene-visual-cases figcaption { position: absolute; inset: auto 0 0; display: flex; align-items: end; justify-content: space-between; gap: 10px; padding: 36px 15px 12px; background: linear-gradient(transparent, rgba(4, 26, 13, .85)); color: #f2fff3; }
.scene-visual-cases figcaption span { font-size: clamp(11px, 1vw, 15px); font-weight: 650; white-space: nowrap; }
.scene-visual-cases figcaption i { color: #a2e1b0; font-style: normal; }
.scene-visual-cases figcaption small { color: #d3e9d7; font-size: 9px; white-space: nowrap; }
.scene-visual-final { min-height: 250px; }
.experience-scene .scene-copy > p.scene-loop-hint { margin-top: 18px; color: #addbb8; font: 11px ui-monospace, monospace; letter-spacing: .04em; }
.scene-detail { width: 100%; max-width: 1360px; min-width: 0; margin-inline: auto; position: relative; overflow: hidden; }
.scene-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.scene-detail-head > span { color: #bce5c2; font: 11px ui-monospace, monospace; letter-spacing: .12em; }
.scene-detail-head b { display: inline-block; margin-left: 8px; font-size: 19px; line-height: .5; font-weight: 400; }
.scene-swipe-dots { display: flex; align-items: center; justify-content: center; gap: 2px; flex: 0 0 auto; }
.scene-swipe-dots button { position: relative; display: grid; place-items: center; width: 34px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.scene-swipe-dots button::before { content: ""; display: block; width: 6px; height: 6px; border: 1px solid #a7d8b2; border-radius: 99px; transition: width .3s, background .3s, box-shadow .3s; }
.scene-swipe-dots button:hover::before { background: #a7d8b2; transform: scale(1.2); }
.scene-swipe-dots button[aria-current="step"]::before { width: 20px; background: #c4f2cd; box-shadow: 0 0 14px rgba(169,226,180,.7); }
.scene-swipe-dots button.is-upcoming::after, .scene-swipe-dots button.is-return::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #cef4d4; box-shadow: 0 0 11px #b8edc4; animation: swipe-dot-flow 2.4s ease-in-out infinite; }
.scene-swipe-dots button.is-return::after { animation-direction: reverse; }
@keyframes swipe-dot-flow { 0%, 18% { opacity: 0; transform: translateX(-12px) scale(.5); } 40% { opacity: 1; } 75%, 100% { opacity: 0; transform: translateX(10px) scale(1.1); } }
.scene-detail-rail {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #79bd8a rgba(170, 218, 180, .14);
  padding-bottom: 12px;
  overscroll-behavior-x: contain;
}
.scene-detail-card {
  flex: 0 0 clamp(480px, 55vw, 720px);
  min-height: 165px;
  scroll-snap-align: start;
  padding: 20px 24px;
  border: 1px solid rgba(176, 231, 187, .45);
  background: linear-gradient(120deg, rgba(190, 239, 199, .17), rgba(206, 247, 213, .045));
  box-shadow: inset 0 1px rgba(226, 255, 228, .09);
}
.scene-detail-card > span { color: #a9dbb3; font: 10px ui-monospace, monospace; letter-spacing: .13em; }
.scene-detail-card h3 { margin: 12px 0 9px; font-size: clamp(19px, 2vw, 25px); letter-spacing: -.04em; }
.scene-detail-card p { max-width: 47ch; margin: 0; color: #d1e5d5; font-size: 13px; line-height: 1.7; }
.scene-detail-card a { display: inline-block; min-height: 44px; margin-top: 10px; padding: 10px 0; color: #dbf4df; text-decoration: underline; text-underline-offset: 4px; font-size: 12px; }
.experience-dots button[aria-current="step"]::after { background: #a9e2b4; }
.experience-scene a:focus-visible, .experience-scene button:focus-visible, .scene-detail-rail:focus-visible { outline: 3px solid #e9f7eb; outline-offset: -4px; }

@media (max-width: 850px) {
  .experience-scene-inner { grid-template-columns: minmax(0, 1fr) minmax(140px, .75fr); gap: 20px; }
  .scene-copy h2 { font-size: clamp(40px, 6vw, 64px); }
  .scene-visual { min-height: 190px; }
  .scene-visual-portal { min-height: 220px; }
  .portal-ring { width: 215px; }
  .portal-ring-two { width: 160px; }
  .portal-core { width: 105px; font-size: 64px; }
  .scene-window { min-height: 180px; }
  .scene-flow { padding: 28px 10px; gap: 6px; }
  .scene-flow span { min-width: 0; flex: 1; padding: 12px 4px; font-size: 10px; }
  .scene-flow i { flex: 0 0 10px; width: 10px; }
  .scene-visual-final { min-height: 190px; }
  .scene-detail-card { flex-basis: min(67vw, 450px); }
}
@media (max-width: 600px) {
  .experience-track { inset: 72px 0 0; }
  .experience-scene { padding: 20px 62px 16px 22px; gap: 12px; }
  .experience-guide { left: 16px; right: 65px; bottom: 18px; max-width: none; padding: 10px 12px; gap: 10px; }
  .experience-guide strong { font-size: 11px; }
  .experience-guide small { font-size: 9px; }
  .guide-arrow { margin-left: auto; font-size: 16px; }
  .experience-side { right: 5px; top: 58%; padding: 8px 2px; }
  .experience-side .experience-dots button { width: 44px; height: 36px; }
  .experience-scene-inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(130px, 1fr); gap: 12px; align-content: center; }
  .scene-index { margin-bottom: 14px; }
  .scene-copy h2 { margin-bottom: 16px; font-size: clamp(38px, 10vw, 52px); }
  .scene-copy > p:not(.scene-index) { font-size: 13px; line-height: 1.7; }
  .scene-caption { margin-top: 18px; }
  .scene-visual, .scene-visual-portal { min-height: 130px; max-height: 21vh; }
  .portal-ring { width: 145px; }
  .portal-ring-two { width: 110px; }
  .portal-core { width: 72px; font-size: 45px; }
  .portal-caption { bottom: -2px; }
  .scene-window { min-height: 135px; }
  .scene-flow { padding: 12px 10px; }
  .scene-ai-demo { padding: 10px; min-height: 210px; max-height: 30vh; overflow: hidden; }
  .ai-demo-head { font-size: 9px; }
  .ai-demo-head small { font-size: 9px; }
  .ai-demo-input { margin-top: 8px; padding: 6px 7px; font-size: 10px; }
  .ai-demo-actions { margin-top: 6px; font-size: 9px; }
  .ai-demo-actions button { min-height: 27px; padding: 2px 8px; font-size: 10px; }
  .ai-demo-terminal { margin-top: 7px; padding: 7px; min-height: 68px; }
  .ai-demo-terminal p { margin-bottom: 2px; font-size: 9px; }
  .ai-demo-result { margin-top: 6px; padding: 6px; }
  .ai-demo-result span, .ai-demo-result small { font-size: 8px; }
  .ai-demo-result strong { font-size: 10px; }
  .scene-visual-cases img { max-height: 21vh; }
  .scene-visual-cases figcaption { padding: 25px 8px 5px; }
  .scene-visual-cases figcaption span { font-size: 9px; }
  .scene-visual-cases figcaption small { font-size: 7px; }
  .scene-visual-final { min-height: 130px; padding: 14px; }
  .scene-visual-final div { font-size: 16px; }
  .scene-visual-final span { right: 12px; bottom: 8px; font-size: 8px; }
  .scene-final-actions { margin-top: 14px; }
  .scene-detail-head { margin-bottom: 6px; }
  .scene-detail-head > span { font-size: 10px; letter-spacing: .05em; }
  .scene-detail-card { flex-basis: calc(100vw - 125px); min-height: 151px; padding: 14px 16px; }
  .scene-detail-card h3 { margin: 7px 0 5px; font-size: 18px; }
  .scene-detail-card p { font-size: 11px; line-height: 1.6; }
}
@media (max-height: 620px) {
  .experience-scene { overflow-y: auto; display: block; }
  .experience-scene-inner { min-height: 170px; }
  .scene-copy h2 { font-size: clamp(31px, 5vw, 50px); margin-bottom: 12px; }
  .scene-copy > p:not(.scene-index) { line-height: 1.5; }
  .scene-index { margin-bottom: 12px; }
  .scene-visual { min-height: 130px; }
  .scene-visual-portal { min-height: 160px; }
  .scene-detail { margin-top: 12px; }
  .scene-detail-card { min-height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .experience, .experience::before, .experience::after, .experience-depth i, .experience-geometry i, .guide-wheel i, .guide-arrow { animation: none !important; }
  .experience-scene { filter: none !important; transform: none !important; }
  .scene-detail-rail { scroll-behavior: auto; }
  .ai-demo-cursor { display: none; }
  .ai-demo-line, .ai-demo-result { opacity: 1; transform: none; }
}


/* Chapter summaries replace decorative word art with information visitors can use. */
.scene-visual-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2vh, 20px);
  max-height: none;
  min-height: 300px;
  padding: clamp(19px, 2.5vw, 34px);
  border: 1px solid rgba(176, 231, 187, .48);
  background: linear-gradient(145deg, rgba(206, 247, 213, .11), rgba(8, 36, 23, .36));
  box-shadow: 0 24px 55px rgba(0, 0, 0, .16);
}
.scene-summary-label {
  margin: 0;
  color: #bce8c6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.scene-summary-list {
  display: grid;
  gap: 1px;
  margin: 0;
  border: 1px solid rgba(183, 231, 194, .3);
  background: rgba(183, 231, 194, .27);
}
.scene-summary-list > div {
  padding: clamp(11px, 1.5vh, 16px) clamp(12px, 1.4vw, 18px);
  background: rgba(9, 39, 24, .9);
}
.scene-summary-list dt {
  margin-bottom: 5px;
  color: #a9dfb5;
  font-size: 11px;
  font-weight: 700;
}
.scene-summary-list dd {
  margin: 0;
  color: #f1fbf2;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.45;
}
@media (max-width: 600px) {
  .scene-visual-summary {
    min-height: 0;
    max-height: none;
    gap: 7px;
    padding: 11px;
  }
  .scene-summary-label { font-size: 10px; }
  .scene-summary-list > div { padding: 6px 8px; }
  .scene-summary-list dt { margin-bottom: 2px; font-size: 9px; }
  .scene-summary-list dd { font-size: 10px; line-height: 1.3; }
}

/* 事例は実際の業務を先に見せ、横移動では同じ場所の画面が入れ替わる。 */
.concept-a .a-work-cards article { min-height: 0; padding: 0; overflow: hidden; }
.case-photo { position: relative; margin: 0; aspect-ratio: 1.55; overflow: hidden; background: #d8e4da; }
.case-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.a-work-cards article:hover .case-photo img { transform: scale(1.045); }
.case-photo figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: 8px; padding: 24px 18px 12px; background: linear-gradient(transparent,rgba(5,26,15,.78)); color: #fff; font: 10px ui-monospace,SFMono-Regular,monospace; letter-spacing: .09em; }
.case-photo figcaption span { font: 10px sans-serif; letter-spacing: 0; }
.case-content { display: flex; flex: 1; flex-direction: column; padding: 24px 28px 27px; }
.concept-a .a-work-cards h3 { margin: 0 0 15px; }
.concept-a .a-work-cards p { max-width: 36ch; }
.concept-a .case-tags { padding-top: 24px; }
.scene-case-display { display: block; position: relative; padding: 0; width: 100%; aspect-ratio: 1.55; min-height: 0; max-height: 36vh; border: 1px solid rgba(175,231,187,.56); background: #173522; box-shadow: 0 24px 55px rgba(0,0,0,.22); }
.scene-case-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: none; }
.scene-case-image:first-child { opacity: 1; }
.scene-case-display figcaption { position: absolute; z-index: 2; inset: auto 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 40px 18px 14px; background: linear-gradient(transparent,rgba(4,22,12,.9)); color: #fff; }
.scene-case-display figcaption span { font: 11px ui-monospace,SFMono-Regular,monospace; color: #c2e8ca; }
.scene-case-display figcaption strong { font-size: clamp(16px,1.5vw,22px); }
.scene-case-display figcaption small { margin-left: auto; font-size: 10px; color: #e1eee3; }
.scene-work .scene-detail-card { min-height: 185px; }
.scene-work .scene-detail-card h3 { margin-top: 7px; }
.scene-work .scene-detail-card p { max-width: 54ch; }
.scene-case-flow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; color: #e0f4e3; font-size: 11px; }
.scene-case-flow span { padding: 5px 8px; border: 1px solid rgba(182,227,193,.37); background: rgba(204,243,213,.08); }
.scene-case-flow b { font-weight: 400; color: #9edab0; }
.scene-work-details { position: relative; z-index: 3; width: min(100%, 44ch); margin-top: 14px; border-top: 1px solid rgba(184,231,196,.38); }
.scene-work-details summary { display: flex; align-items: center; min-height: 44px; color: #c8efcf; font-size: 12px; font-weight: 700; cursor: pointer; }
.scene-work-details summary:hover, .scene-work-details summary:focus-visible { color: #fff; }
.has-horizontal-slides .scene-work-details p { margin: 0 0 10px; color: #e3f2e6; font-size: 14px; line-height: 1.65; }
@media (max-width: 850px) {
  .concept-a .a-work-cards article { border-right: 0; }
  .case-photo { aspect-ratio: 2.1; }
  .scene-case-display { aspect-ratio: 1.8; }
}
@media (min-width: 601px) and (max-width: 850px) and (min-height: 760px) {
  .scene-work .experience-scene-inner { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 15px; align-content: center; }
  .scene-work .scene-copy h2 { margin-bottom: 14px; }
  .scene-work .scene-case-display { width: min(100%, 540px); height: min(24vh, 220px); aspect-ratio: auto; }
}
@media (max-width: 600px) {
  .case-photo { aspect-ratio: 1.55; }
  .case-content { padding: 20px 22px 24px; }
  .concept-a .a-work-cards h3 { margin-top: 0; }
  .scene-case-display { width: 100%; min-height: 132px; max-height: 21vh; aspect-ratio: auto; }
  .scene-case-display figcaption { padding: 24px 9px 7px; gap: 5px; }
  .scene-case-display figcaption span { font-size: 8px; }
  .scene-case-display figcaption strong { font-size: 12px; }
  .scene-case-display figcaption small { font-size: 7px; }
  .scene-work .scene-detail-card { min-height: 167px; }
  .scene-work .scene-detail-card p { font-size: 10px; }
  .scene-case-flow { gap: 4px; margin-top: 9px; font-size: 8px; }
  .scene-case-flow span { padding: 3px 5px; }
}

/* 横操作では概要と詳細を画面幅いっぱいのスライドとして入れ替える。 */
.experience-scene.has-horizontal-slides { display: block; padding: 0; }
.has-horizontal-slides .experience-scene-inner,
.has-horizontal-slides .scene-detail {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  transition: transform .85s cubic-bezier(.22,.72,.16,1);
  will-change: transform;
}
.has-horizontal-slides .experience-scene-inner {
  padding: clamp(25px, 4vw, 60px) clamp(85px, 8vw, 120px) clamp(90px, 9vw, 126px) clamp(25px, 6vw, 90px);
  transform: translate3d(0,0,0);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #80bd8e transparent;
}
.has-horizontal-slides .scene-detail { overflow: hidden; transform: translate3d(100%,0,0); }
.has-horizontal-slides.is-detail-view .experience-scene-inner { transform: translate3d(-100%,0,0); }
.has-horizontal-slides.is-detail-view .scene-detail { transform: translate3d(0,0,0); }
.has-horizontal-slides .scene-detail-rail {
  width: 100%; height: 100%; max-width: none; gap: 0; padding: 0;
  overflow-x: hidden; overflow-y: hidden; scroll-snap-type: none;
  scrollbar-width: none;
}
.has-horizontal-slides .scene-detail-card {
  position: relative; isolation: isolate; flex: 0 0 100%; width: 100%; height: 100%;
  min-height: 0; padding: clamp(35px, 6vw, 90px) clamp(86px, 9vw, 140px) clamp(100px, 10vw, 145px) clamp(28px, 7vw, 105px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  border: 0; border-right: 1px solid rgba(193,235,203,.24);
  background: radial-gradient(circle at 78% 45%, rgba(65,128,79,.31), transparent 38%), linear-gradient(116deg, rgba(11,46,29,.97), rgba(19,63,40,.96));
  box-shadow: none;
}
.has-horizontal-slides .scene-detail-card:nth-child(even) { background: radial-gradient(circle at 78% 52%, rgba(93,147,104,.25), transparent 40%), linear-gradient(116deg, rgba(16,54,36,.98), rgba(8,37,24,.97)); }
.has-horizontal-slides .scene-detail-card::before {
  content: attr(data-detail-index); position: absolute; z-index: -1; right: 13%; top: 50%; transform: translateY(-50%);
  color: transparent; -webkit-text-stroke: 1px rgba(184,231,196,.17);
  font: 700 clamp(220px, 31vw, 500px)/1 Arial,sans-serif; letter-spacing: -.13em;
  pointer-events: none;
}
.has-horizontal-slides .scene-detail-card > span { color: #a5deb3; font-size: 12px; letter-spacing: .2em; }
.has-horizontal-slides .scene-detail-card h3 { max-width: 14ch; margin: 23px 0 22px; font-size: clamp(46px, 6vw, 92px); line-height: 1.16; letter-spacing: -.06em; }
.has-horizontal-slides .scene-detail-card p { max-width: 38ch; font-size: clamp(17px, 1.55vw, 22px); line-height: 1.9; }
.has-horizontal-slides .scene-detail-card .scene-detail-example p { max-width: 43ch; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.65; }
.has-horizontal-slides .scene-detail-card a { margin-top: 24px; font-size: 15px; }
.has-horizontal-slides .scene-detail-card { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #80bd8e transparent; }
.has-horizontal-slides .scene-detail-card:has(.scene-detail-example) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(20px, 4vw, 65px);
  align-content: center;
  align-items: start;
}
.has-horizontal-slides .scene-detail-card:has(.scene-detail-example) > span { grid-column: 1; grid-row: 1; }
.has-horizontal-slides .scene-detail-card:has(.scene-detail-example) > h3 { grid-column: 1; grid-row: 2; }
.has-horizontal-slides .scene-detail-card:has(.scene-detail-example) > p { grid-column: 1; grid-row: 3; }
.has-horizontal-slides .scene-detail-card:has(.scene-detail-example) > a { grid-column: 1; grid-row: 4; }
.has-horizontal-slides .scene-detail-card:has(.scene-detail-example) > .scene-detail-point { grid-column: 2; grid-row: 2; }
.has-horizontal-slides .scene-detail-card:has(.scene-detail-example) > .scene-detail-example { grid-column: 2; grid-row: 3 / span 2; }
.has-horizontal-slides.scene-products .scene-detail-card:has(.scene-product-context) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(25px, 5vw, 85px);
  align-content: center;
  align-items: start;
}
.has-horizontal-slides.scene-products .scene-detail-card > span { grid-column: 1; grid-row: 1; }
.has-horizontal-slides.scene-products .scene-detail-card > h3 { grid-column: 1; grid-row: 2; }
.has-horizontal-slides.scene-products .scene-detail-card > p { grid-column: 1; grid-row: 3; }
.has-horizontal-slides.scene-products .scene-detail-card > a { grid-column: 1; grid-row: 4; }
.scene-product-context { grid-column: 2; grid-row: 2 / span 3; width: 100%; padding: 25px; border: 1px solid rgba(183,229,193,.4); background: rgba(192,237,202,.09); }
.scene-product-context small { display: block; margin-bottom: 15px; color: #b4e8bf; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.scene-product-context strong { display: block; color: #f1fcf2; font-size: clamp(20px, 2.3vw, 30px); line-height: 1.4; }
.scene-case-note { margin-top: 18px !important; color: #aadbb5 !important; font-size: 12px !important; }
.scene-sample-preview { position: absolute; right: clamp(90px, 9vw, 145px); top: 50%; width: min(32vw, 470px); aspect-ratio: 16 / 10; margin: 0; transform: translateY(-50%); border: 1px solid rgba(184,231,196,.45); background: #0b2717; box-shadow: 0 22px 65px rgba(0,0,0,.25); overflow: hidden; }
.scene-sample-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene-sample-preview figcaption { position: absolute; inset: auto 0 0; padding: 18px 12px 9px; background: linear-gradient(transparent, rgba(2,23,11,.87)); color: #f0fbf1; font-size: 11px; }
.has-horizontal-slides .scene-detail-card:has(.scene-sample-preview) { padding-right: 47%; }
.has-horizontal-slides .scene-horizontal-controls {
  position: absolute; z-index: 4; left: clamp(24px, 6vw, 90px); right: clamp(80px, 8vw, 120px); bottom: clamp(19px, 3vw, 40px);
  width: auto; min-height: 56px; margin: 0; padding: 9px 14px 9px 19px;
  border: 1px solid rgba(187,231,198,.36); background: rgba(7,35,22,.82);
  backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0,0,0,.17);
}
.has-horizontal-slides .scene-horizontal-controls > span { font-size: 11px; letter-spacing: .08em; }
.has-horizontal-slides .scene-horizontal-controls > span b { display: none; }
.has-horizontal-slides .scene-swipe-dots button { width: 34px; height: 44px; }
.experience-scene:not(.is-current) .scene-swipe-dots button.is-upcoming::after,
.experience-scene:not(.is-current) .scene-swipe-dots button.is-return::after { animation-play-state: paused; }
.has-horizontal-slides.scene-work .scene-detail-card { padding-right: 49%; }
.has-horizontal-slides.scene-work .scene-detail-card h3 { font-size: clamp(43px, 5.2vw, 76px); }
.has-horizontal-slides.scene-work .scene-detail-card::after {
  content: ""; position: absolute; right: clamp(90px, 11vw, 160px); top: 18%; bottom: 22%; width: 34%;
  border: 1px solid rgba(185,235,196,.45); background: url("assets/case-operations.webp") center/cover;
  box-shadow: 0 25px 70px rgba(0,0,0,.24);
}
.has-horizontal-slides.scene-work .scene-detail-card:nth-child(2)::after { background-image: url("assets/case-line.webp"); }
.has-horizontal-slides.scene-work .scene-detail-card:nth-child(3)::after { background-image: url("assets/food-guide-linker-top.png"); background-color: #f6faf6; background-size: contain; background-repeat: no-repeat; }
.has-horizontal-slides.scene-work .scene-detail-card:nth-child(4)::after { background-image: url("assets/case-100nenmori-site-poster.webp"); }
.scene-visual-word { overflow: hidden; }
.scene-visual-word div { font-size: clamp(34px, 5vw, 68px); line-height: 1.2; letter-spacing: -.075em; }
.scene-visual-word::before { content: ""; position: absolute; width: min(48vw, 560px); aspect-ratio: 1; border: 1px solid rgba(179, 233, 190, .26); border-radius: 50%; right: -24%; top: -42%; box-shadow: 0 0 0 34px rgba(179, 233, 190, .025), 0 0 0 68px rgba(179, 233, 190, .025); animation: scene-orbit 16s linear infinite; pointer-events: none; }
@keyframes scene-orbit { to { transform: rotate(360deg); } }
.has-horizontal-slides .scene-sample-label { position: absolute; z-index: 2; right: clamp(90px, 11vw, 160px); bottom: calc(22% + 9px); padding: 4px 7px; background: rgba(9,39,23,.8); color: #eef8ef; font: 10px ui-monospace,monospace; }
.has-horizontal-slides .scene-case-flow { margin-top: 28px; font-size: 12px; }

@media (max-width: 850px) {
  .scene-highlights { margin-top: 18px; }
  .scene-highlights > div { min-height: 63px; padding: 10px 12px; }
  .scene-highlights dd { font-size: 12px; }
  .has-horizontal-slides .scene-detail-card h3 { font-size: clamp(40px, 6.2vw, 64px); }
  .has-horizontal-slides .scene-detail-card p { font-size: 16px; }
  .has-horizontal-slides.scene-work .scene-detail-card { padding-right: 43%; }
  .has-horizontal-slides.scene-work .scene-detail-card::after { right: 80px; width: 29%; }
}
@media (min-width: 601px) and (max-height: 800px) {
  .experience-scene .scene-copy h2 { font-size: clamp(42px, 4.8vw, 68px); margin-bottom: 16px; }
  .experience-scene .scene-copy > p:not(.scene-index) { font-size: 16px; line-height: 1.65; }
  .scene-highlights { margin-top: 15px; }
  .scene-highlights > div { min-height: 0; padding: 9px 13px; }
  .scene-highlights dt { margin-bottom: 4px; }
}
@media (max-width: 600px) {
  .scene-highlights { margin-top: 14px; }
  .scene-highlights > div { min-height: 0; padding: 8px 10px; }
  .scene-highlights dt { margin-bottom: 3px; font-size: 9px; }
  .scene-highlights dd { font-size: 11px; line-height: 1.35; }
  .has-horizontal-slides .experience-scene-inner {
    grid-template-rows: auto auto;
    align-content: start;
    align-items: start;
    padding: 25px 62px 88px 22px;
  }
  .has-horizontal-slides .scene-detail-card { justify-content: flex-start; padding: clamp(45px, 10vh, 90px) 65px 100px 23px; }
  .has-horizontal-slides .scene-detail-card::before { right: 17%; top: 38%; font-size: 54vw; }
  .has-horizontal-slides .scene-detail-card > span { font-size: 10px; }
  .has-horizontal-slides .scene-detail-card h3 { margin: 18px 0 16px; font-size: clamp(38px, 10vw, 55px); }
  .has-horizontal-slides .scene-detail-card p { font-size: 14px; line-height: 1.75; }
  .has-horizontal-slides .scene-detail-card:has(.scene-detail-example) { display: flex; align-content: normal; justify-content: flex-start; }
  .has-horizontal-slides.scene-products .scene-detail-card:has(.scene-product-context) { display: flex; align-content: normal; justify-content: flex-start; }
  .has-horizontal-slides.scene-products .scene-detail-card h3 { font-size: clamp(28px, 7.6vw, 36px); letter-spacing: -.075em; }
  .has-horizontal-slides.scene-products .scene-detail-card:first-child h3 { font-size: 27px; white-space: nowrap; }
  .scene-product-context { margin-top: 16px; padding: 16px; }
  .scene-product-context small { margin-bottom: 8px; font-size: 10px; }
  .scene-product-context strong { font-size: 17px; }
  .experience-scene .scene-final-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .experience-scene .scene-final-actions a:first-child { grid-column: 1 / -1; }
  .experience-scene .scene-final-actions a { min-height: 44px; padding: 8px 10px; gap: 5px; font-size: 10px; }
  .has-horizontal-slides .scene-detail-card .scene-detail-example p { font-size: 12px; }
  .has-horizontal-slides .scene-detail-card:has(.scene-sample-preview) { padding-right: 65px; }
  .scene-sample-preview { position: relative; top: auto; right: auto; width: 100%; max-height: 22vh; margin-top: 14px; transform: none; }
  .has-horizontal-slides .scene-horizontal-controls { left: 16px; right: 59px; bottom: 17px; min-height: 65px; padding: 7px 10px; gap: 2px; flex-direction: column; justify-content: center; align-items: flex-start; }
  .has-horizontal-slides .scene-horizontal-controls > span { font-size: 10px; letter-spacing: 0; }
  .has-horizontal-slides .scene-swipe-dots { align-self: center; }
  .has-horizontal-slides .scene-swipe-dots { gap: 0; }
  .has-horizontal-slides .scene-swipe-dots button { width: 36px; height: 44px; }
  .has-horizontal-slides.scene-work .scene-detail-card { padding-right: 65px; }
  .has-horizontal-slides.scene-work .scene-detail-card:has(.scene-work-details) { padding-bottom: calc(min(24vh, 200px) + 100px); }
  .has-horizontal-slides.scene-work .scene-detail-card:has(.scene-work-details[open]) { padding-bottom: 100px; }
  .has-horizontal-slides.scene-work .scene-detail-card:has(.scene-work-details[open])::after { display: none; }
  .has-horizontal-slides.scene-work .scene-detail-card:has(.scene-work-details[open]) .scene-sample-label { display: none; }
  .scene-work-details { margin-top: 9px; }
  .scene-work-details summary { min-height: 44px; font-size: 11px; }
  .has-horizontal-slides .scene-work-details p { font-size: 12px; }
  .has-horizontal-slides.scene-work .scene-detail-card h3 { font-size: clamp(36px, 9vw, 50px); }
  .has-horizontal-slides.scene-work .scene-detail-card::after { top: auto; left: 23px; right: 66px; bottom: 88px; width: auto; height: min(24vh, 200px); }
  .has-horizontal-slides.scene-work .scene-detail-card:nth-child(3)::after { height: min(24vh, 200px); background-size: contain; }
  .has-horizontal-slides .scene-sample-label { right: 70px; bottom: 93px; font-size: 8px; }
  .has-horizontal-slides .scene-case-flow { margin-top: 18px; font-size: 9px; }
}
@media (max-height: 620px) {
  .experience-scene.has-horizontal-slides { overflow: hidden; }
  .has-horizontal-slides .experience-scene-inner, .has-horizontal-slides .scene-detail-card { overflow-y: auto; }
  .has-horizontal-slides .scene-detail-card { justify-content: flex-start; }
  .has-horizontal-slides .scene-detail-card h3 { font-size: clamp(32px, 5vw, 48px); }
  .has-horizontal-slides.scene-work .scene-detail-card::after { display: none; }
  .has-horizontal-slides .scene-sample-label { display: none; }
  .has-horizontal-slides.scene-work .scene-detail-card { padding-right: clamp(86px,9vw,140px); }
}
@media (prefers-reduced-motion: reduce) {
  .has-horizontal-slides .experience-scene-inner, .has-horizontal-slides .scene-detail { transition: none; }
  .scene-visual-word::before { animation: none; }
  .experience-side .experience-dots button[aria-current="step"]::after, .experience-side .experience-dots button.is-upcoming::before,
  .scene-swipe-dots button.is-upcoming::after, .scene-swipe-dots button.is-return::after { animation: none; }
  .experience-side .experience-dots button.is-upcoming::before, .scene-swipe-dots button.is-upcoming::after, .scene-swipe-dots button.is-return::after { display: none; }
}

/* Dot-only chapter and horizontal navigation. The buttons retain generous hit areas. */
.experience-side {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.has-horizontal-slides .scene-horizontal-controls {
  left: 0;
  right: 0;
  bottom: clamp(13px, 2.5vh, 26px);
  width: 100%;
  min-height: 44px;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.has-horizontal-slides .scene-horizontal-controls > span { display: none; }
.scene-swipe-dots { gap: 0; }
.has-horizontal-slides .scene-swipe-dots button { width: 44px; height: 44px; }
.scene-swipe-dots button::before { width: 8px; height: 8px; border-radius: 50%; }
.scene-swipe-dots button[aria-current="step"]::before { width: 10px; height: 10px; }
.scene-swipe-dots button.is-upcoming::after,
.scene-swipe-dots button.is-return::after { display: none; }
.scene-next-detail { min-height: 44px; padding: 7px 14px; border: 1px solid rgba(181,231,194,.55); background: rgba(7,40,22,.88); color: #eaf8ec; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; cursor: pointer; }
.scene-next-detail:hover { border-color: #c5f4ce; background: #275f3b; }
.scene-next-detail:focus-visible { outline: 3px solid #d7f7dd; outline-offset: 3px; }
@media (max-width: 700px), (max-height: 620px) { .scene-next-detail { display: none; } }

@media (max-height: 620px) {
  .experience-side { top: auto; bottom: 4px; transform: none; }
  .experience-side .experience-dots button { height: 26px; }
}

/* Related details share one readable slide instead of using several sparse slides. */
.has-horizontal-slides .scene-detail-card.scene-detail-card-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding-top: clamp(38px, 4vw, 64px);
  padding-bottom: 90px;
}
.has-horizontal-slides .scene-detail-card-group > h3 {
  max-width: none;
  margin: 12px 0 24px;
  font-size: clamp(34px, 4.2vw, 62px);
}
.scene-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 1120px;
}
.scene-topic {
  min-width: 0;
  padding: clamp(13px, 1.5vw, 19px);
  border: 1px solid rgba(180, 231, 192, .36);
  background: rgba(5, 31, 18, .56);
}
.scene-topic h4 {
  margin: 0 0 8px;
  color: #f1fbf2;
  font-size: clamp(17px, 1.65vw, 23px);
  line-height: 1.3;
}
.has-horizontal-slides .scene-topic p {
  max-width: none;
  margin: 0;
  color: #d9eadd;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.55;
}
.has-horizontal-slides .scene-topic a,
.has-horizontal-slides .scene-detail-card-group > a {
  min-height: 38px;
  margin-top: 7px;
  padding: 8px 0;
  font-size: 12px;
}
.concept-a .has-horizontal-slides .scene-topic .scene-detail-point {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}
.concept-a .scene-topic .scene-detail-point small,
.concept-a .scene-topic .scene-detail-point strong { font-size: 11px; line-height: 1.4; }
.has-horizontal-slides .scene-detail-card-group > .scene-discovery-note {
  max-width: 100%;
  margin-top: 13px;
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .has-horizontal-slides .scene-horizontal-controls {
    left: 0;
    right: 0;
    bottom: 7px;
    min-height: 44px;
    padding: 0;
    align-items: center;
  }
  .has-horizontal-slides .scene-swipe-dots { align-self: center; }
  .has-horizontal-slides .scene-swipe-dots button { width: 40px; height: 44px; }
  .has-horizontal-slides .scene-detail-card.scene-detail-card-group {
    justify-content: flex-start;
    padding-top: 48px;
    padding-bottom: 75px;
  }
  .has-horizontal-slides .scene-detail-card-group > h3 { margin: 8px 0 16px; font-size: 28px; }
  .scene-topic-grid { grid-template-columns: 1fr; gap: 8px; }
  .scene-topic { padding: 12px; }
  .scene-topic h4 { font-size: 16px; }
  .has-horizontal-slides .scene-topic p { font-size: 12px; }
  .has-horizontal-slides .scene-detail-card-group > .scene-discovery-note { font-size: 12px; }
}

/* Small screens keep the chapter fade without retaining ten 3D layers. */
@media (max-width: 600px) {
  .experience, .experience::before, .experience::after,
  .experience-depth i, .experience-geometry i { animation: none !important; }
  .experience-scene { transform: none !important; will-change: auto !important; }
  .has-horizontal-slides .experience-scene-inner,
  .has-horizontal-slides .scene-detail { will-change: auto; transition-duration: .4s; }
  .experience-topbar, .experience-guide, .scene-window { backdrop-filter: none; }
}