/* About (MT-32): what the app is, in a few lines, beside a trailer mini playing; then on to How to use it. */
#about {
  flex-direction: column; justify-content: center; gap: 2vh; overflow: hidden;
  padding: calc(10px + var(--safe-t)) calc(20px + var(--safe-r)) calc(8px + var(--safe-b)) calc(20px + var(--safe-l));
  background: radial-gradient(ellipse at 70% 40%, #1d1a16 0%, var(--bg) 70%);
}
.about-panel { flex: 0 1 auto; min-height: 0; display: flex; align-items: center; gap: 3vw; max-width: 1040px; width: 100%; margin: 0 auto; }
.about-text { flex: 1 1 52%; min-width: 0; font-size: clamp(12px, 3.6vh, 17px); line-height: 1.3; color: #ece6d8; }
.about-text h1 { margin: 0; font-size: clamp(18px, 7vh, 30px); letter-spacing: .14em; font-weight: 800; color: var(--text); }
.about-text p { margin: 1vh 0; }
.about-text strong { color: var(--text); }
.about-lead { font-size: 1.15em; color: var(--accent); }
.about-lead strong { color: var(--accent); }
.about-ways { margin: 1.2vh 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6vh; }
.about-ways li { display: flex; align-items: center; gap: 10px; }
.way { flex: none; width: 1.6em; height: 1.6em; overflow: visible; }
.way.right { transform: rotate(90deg); }
.way.left { transform: rotate(-90deg); }
.about-heart { color: var(--heart); }
.about-mini { flex: 1 1 48%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.about-mini video {
  width: 100%; max-height: 58vh; aspect-ratio: 16 / 9; object-fit: contain; background: #000;
  border: 2px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.7);
}
.about-mini-label { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.about-foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; max-width: 1040px; width: 100%; margin: 0 auto; }
.about-foot .tmdb { margin-right: auto; }