/* Each card is one front and answer; the track never duplicates them. */
.immersion-section { padding-top: clamp(80px, 10vw, 150px); }
.immersion-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.immersion-heading h2 { font-size: clamp(48px, 6.8vw, 100px); line-height: .98; letter-spacing: -.06em; }
.immersion-tools { max-width: 270px; padding-bottom: 6px; }
.immersion-tools .section-lede { font-size: 18px; line-height: 1.5; margin: 0 0 22px; }
.language-strip { margin-top: 44px; padding: 42px 0 65px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; overflow-anchor: none; scroll-snap-type: none; cursor: grab; }
.language-strip::-webkit-scrollbar { display: none; }
.language-strip.is-dragging { cursor: grabbing; user-select: none; }
.language-track { gap: 28px; padding-inline: 28px; will-change: auto; }
.language-tile {
  --tile-ink: #eef2ed;
  --tile-muted: #ced8e0;
  --tile-line: #ffffff2e;
  --tile-background: linear-gradient(145deg, #234c80, #102643);
  --rest-angle: -4deg;
  --rest-y: 7px;
  --rest-tilt-x: 3deg;
  --rest-tilt-y: -7deg;
  position: relative;
  flex: 0 0 326px;
  width: 326px;
  height: 465px;
  min-height: 465px;
  padding: 0;
  border: 0;
  border-radius: 23px;
  color: var(--tile-ink);
  background: transparent;
  box-shadow: none;
  scroll-snap-align: none;
  filter: none;
  overflow: visible;
  transform-style: preserve-3d;
  transform: perspective(950px) rotateX(calc(var(--rest-tilt-x) + var(--tilt-x, 0deg))) rotateY(calc(var(--rest-tilt-y) + var(--tilt-y, 0deg))) rotate(var(--rest-angle)) translateY(calc(var(--rest-y) + var(--lift, 0px)));
  transition: transform .3s ease;
}
.language-tile.tile-blue { --tile-background: linear-gradient(145deg, #234c80, #102643); }
.language-tile.tile-pink { --tile-background: linear-gradient(145deg, #813748, #421e35); --rest-angle: 4deg; --rest-y: -4px; --rest-tilt-x: -2deg; --rest-tilt-y: 7deg; }
.language-tile.tile-orange { --tile-background: linear-gradient(145deg, #d6a456, #b47432); --tile-ink: #241b10; --tile-muted: #493622; --tile-line: #382d2e36; --rest-angle: -3deg; --rest-y: 13px; --rest-tilt-x: 5deg; --rest-tilt-y: -4deg; }
.language-tile.tile-violet { --tile-background: linear-gradient(145deg, #514966, #25253f); --rest-angle: 5deg; --rest-y: 1px; --rest-tilt-x: 2deg; --rest-tilt-y: 5deg; }
.language-tile.tile-teal { --tile-background: linear-gradient(145deg, #276457, #10392f); --rest-angle: -5deg; --rest-y: 10px; --rest-tilt-x: -3deg; --rest-tilt-y: -5deg; }
.language-tile.tile-cream { --tile-background: linear-gradient(145deg, #e3dcc8, #c5b79a); --tile-ink: #2c2a22; --tile-muted: #4e4839; --tile-line: #332e2336; --rest-angle: 3deg; --rest-y: -5px; --rest-tilt-x: 4deg; --rest-tilt-y: 8deg; }
.language-tile.phrase-card { gap: 0; }
.language-tile:hover, .language-tile:focus-within { filter: none; z-index: 2; --lift: -10px; }
.language-tile:hover .tile-face, .language-tile:focus-within .tile-face { border-color: #ffffff75; box-shadow: 8px 22px 0 -8px #0008, 0 35px 50px -19px #000b, inset 0 1px #ffffff38; }
.tile-meta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 1; color: var(--tile-muted); }
.tile-meta > span:first-child { font-size: 10px; font-weight: 600; letter-spacing: .11em; }
.tile-kind { padding: 4px 8px; border: 1px solid var(--tile-line); border-radius: 999px; font-size: 10px; line-height: 1; }
.tile-flip { position: relative; flex: 1; display: block; width: 100%; min-height: 0; margin-top: 17px; padding: 0 0 25px; border: 0; border-radius: 10px; color: inherit; background: transparent; text-align: center; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tile-shell { position: relative; width: 100%; height: 100%; transform: rotateY(0deg); transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.language-tile.is-revealed .tile-shell { transform: rotateY(180deg); }
.tile-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 21px; border: 1px solid var(--tile-line); border-radius: 23px; background: var(--tile-background); box-shadow: 8px 16px 0 -8px #0008, 0 28px 45px -22px #000b, inset 0 1px #ffffff24; transform: rotateY(0deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.tile-back { transform: rotateY(180deg); }
.tile-face[aria-hidden="true"] { pointer-events: none; }
.tile-content { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.tile-front b, .tile-back b, .tile-answer { display: block; max-width: 100%; font-size: 64px; font-weight: 500; line-height: 1.04; letter-spacing: -.055em; overflow-wrap: anywhere; }
.tile-front b.short-word, .tile-back b.short-word { font-size: 112px; }
.tile-front b.long-word, .tile-back b.long-word { font-size: 45px; }
.tile-answer.long-word { font-size: 45px; }
.tile-front b.phrase-word { font-size: 48px; line-height: 1.12; }
.tile-front b.phrase-word.long-word { font-size: 39px; }
.tile-front b.japanese-phrase { font-size: 37px; line-height: 1.3; }
.tile-front b.chinese-word { font-size: 102px; letter-spacing: 0; }
.tile-pictures { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; gap: 5px; }
.language-tile .tile-pictures img { width: 100%; height: 260px; min-height: 0; margin: 0; object-fit: contain; filter: drop-shadow(0 13px 9px #0002); transform: none; }
.language-tile .tile-back .tile-pictures img { height: 210px; }
.language-tile .tile-pictures.pics { gap: 9px; }
.language-tile .tile-pictures.pics img { flex: 1; min-width: 0; width: calc(50% - 5px); height: 174px; }
.language-tile.picture-card .tile-front b { font-size: 54px; line-height: 1.08; }
.language-tile.picture-card .tile-pictures img { height: 240px; }
.language-tile.picture-card .tile-pictures.photo-pair img { height: 210px; object-fit: cover; border-radius: 12px; border: 1px solid var(--tile-line); filter: none; }
.language-tile .tile-front .tile-content > .tile-pictures:only-child img { width: 100%; max-width: none; height: 328px; }
.tile-flip-label { position: absolute; right: 0; bottom: 0; left: 0; color: var(--tile-muted); font-size: 11px; line-height: 1; letter-spacing: .025em; }
.phrase-card .tile-front .tile-content { gap: 30px; }
.phrase-card .tile-answer { font-size: 54px; line-height: 1.1; }
.phrase-card .phrase-example { display: block; padding: 0; margin: 0; color: var(--tile-ink); background: none; border: 0; font-size: 25px; line-height: 1.4; overflow-wrap: anywhere; }
.phrase-card .phrase-example mark { color: inherit; background: transparent; padding: 0; border: 0; text-decoration: underline; text-decoration-color: var(--tile-muted); text-underline-offset: 5px; }
.tile-audio { position: absolute; top: 54%; left: 50%; z-index: 3; display: grid; place-items: center; width: 88px; height: 88px; padding: 0; border: 1px solid var(--tile-line); border-radius: 50%; color: var(--tile-ink); background: #ffffff12; box-shadow: inset 0 1px #ffffff24, 0 12px 25px #0002; font: inherit; font-size: 28px; cursor: pointer; transform: translate(-50%, -50%); }
.tile-audio > span { margin-left: 5px; }
.tile-audio:hover { background: #ffffff25; }
.tile-audio.is-playing > span { font-size: 0; margin-left: 0; }
.tile-audio.is-playing > span::after { content: 'Ⅱ'; font-size: 28px; }
.audio-card .tile-front .tile-content { justify-content: flex-start; padding-top: 38px; }
.tile-listen-prompt { font-size: 41px; font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.tile-wave { display: flex; justify-content: center; align-items: center; gap: 6px; height: 70px; margin-top: 119px; }
.tile-wave i { display: block; width: 4px; height: var(--bar); border-radius: 999px; background: currentColor; opacity: .6; }
.audio-card:has(.tile-audio.is-playing) .tile-wave i { animation: tile-wave .7s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -100ms); }
@keyframes tile-wave { to { transform: scaleY(.35); opacity: .9; } }
.audio-card .tile-back .tile-audio { top: 30px; left: calc(100% - 39px); width: 36px; height: 36px; font-size: 14px; }
.audio-card .tile-back .tile-audio.is-playing > span::after { font-size: 16px; }
.audio-card .tile-back .tile-kind { margin-right: 45px; }
.audio-card .tile-answer { font-size: 42px; line-height: 1.18; }
.tile-flip:focus-visible, .tile-audio:focus-visible, .language-strip:focus-visible { outline: 2px solid var(--tile-ink, #fff); outline-offset: 6px; }
.tile-cloze-sentence { display: block; font-size: 42px; font-weight: 500; line-height: 1.4; letter-spacing: -.025em; overflow-wrap: anywhere; }
.tile-cloze-sentence:lang(zh) { letter-spacing: 0; }
.tile-cloze-blank { display: inline-block; width: 1.8em; height: .9em; margin-inline: .1em; border-bottom: 2px solid currentColor; vertical-align: baseline; }
.tile-cloze-sentence mark { padding: 0; color: inherit; background: transparent; text-decoration: underline; text-underline-offset: 7px; }
@media (max-width: 680px) {
  .immersion-heading { align-items: flex-start; flex-direction: column; gap: 24px; }
  .immersion-tools { max-width: 100%; }
  .immersion-tools .section-lede { margin-bottom: 16px; font-size: 17px; }
  .language-strip { margin-top: 24px; padding: 35px 0 60px; }
  .language-track { gap: 23px; padding-inline: 27px; }
  .language-tile { flex-basis: min(302px, calc(100vw - 64px)); width: min(302px, calc(100vw - 64px)); height: 442px; min-height: 442px; padding: 0; }
  .tile-face { padding: 19px; }
  .tile-front b, .tile-back b { font-size: 60px; }
  .tile-front b.short-word, .tile-back b.short-word { font-size: 100px; }
  .tile-front b.chinese-word { font-size: 84px; }
  .tile-front b.long-word, .tile-back b.long-word { font-size: 41px; }
  .tile-answer.long-word { font-size: 41px; }
  .language-tile.picture-card .tile-front b { font-size: 50px; }
  .language-tile.picture-card .tile-pictures img { height: 215px; }
  .language-tile.picture-card .tile-pictures.photo-pair img { height: 190px; }
  .tile-front b.phrase-word { font-size: 44px; }
  .tile-front b.phrase-word.long-word { font-size: 36px; }
  .tile-front b.japanese-phrase { font-size: 34px; }
  .language-tile .tile-front .tile-content > .tile-pictures:only-child img { height: 300px; }
  .language-tile .tile-pictures.pics img { height: 160px; }
  .phrase-card .tile-answer { font-size: 46px; }
  .phrase-card .phrase-example { font-size: 23px; }
  .audio-card .tile-front .tile-content { padding-top: 28px; }
  .audio-card .tile-answer { font-size: 36px; }
  .tile-cloze-sentence { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .language-track { transform: none !important; }
  .language-tile, .language-tile:hover, .language-tile:focus-within { transform: none; transition: none; }
  .tile-shell, .tile-face, .tile-audio { transition: none; }
  .tile-wave i { animation: none !important; }
}