/* Generated from src/styles/; see manifest.json for cascade order. */
@font-face {
  font-family: LambooNativeJP;
  src: url("assets/native/NotoSansJP.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}
/* All measurements below are native SwiftUI points at a 393pt content width. */
.journey-ui {
  width: 100%;
  max-width: 393px;
  justify-self: center;
  container-type: inline-size;
  background: #f6f7fc;
  border: 0;
  box-shadow: none;
  border-radius: 20px;
  align-self: center;
}
:is(#journey-screen, .journey-exit, .journey-preview-screen) {
  --u: calc(100cqw / 393);
  min-height: 0;
  aspect-ratio: 393/650;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c9cfdf transparent;
  font-family: LambooNativeJP, sans-serif;
  color: #202649;
  background: #f6f7fc;
  font-size: calc(14 * var(--u));
  scroll-margin-top: 110px;
}
.journey-shell {
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1fr);
}
.journey-formats {
  display: flex;
  gap: 8px;
}
.journey-formats[hidden] {
  display: none;
}
.journey-formats button {
  font:
    600 12px LambooNativeJP,
    sans-serif;
  border: 1px solid #bdcaff;
  background: transparent;
  border-radius: 12px;
  padding: 10px 14px;
  color: #65708d;
  cursor: pointer;
}
.journey-formats button[aria-pressed="true"] {
  background: white;
  color: #2557ff;
  border-color: white;
}
.native-learning.expression-detail {
  padding: calc(24 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  color: #202649;
}
.native-learning .native-card {
  margin: 0;
  padding: calc(16 * var(--u));
  border: 0;
  border-radius: calc(20 * var(--u));
  background: #fff;
}
.native-learning .native-card h4 {
  font:
    700 calc(17 * var(--u))/1.5 LambooNativeJP,
    sans-serif;
  margin: 0 0 calc(12 * var(--u));
}
.native-learning .native-card p {
  font:
    400 calc(14 * var(--u))/1.65 LambooNativeJP,
    sans-serif;
  margin: 0;
}
.native-learning .expression-document > div:first-child,
.native-example > div {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
}
.native-learning .native-card strong {
  font: 800 calc(21 * var(--u))/1.45 var(--latin);
  flex: 1;
  min-width: 0;
  letter-spacing: 0;
}
.native-learning .expression-document > div > strong {
  font-size: calc(28 * var(--u));
}
.native-learning .expression-document > p {
  font:
    700 calc(17 * var(--u))/1.5 LambooNativeJP,
    sans-serif;
  border: 0;
  margin-top: calc(12 * var(--u));
  padding: 0;
}
.native-learning .native-card .native-muted {
  font:
    400 calc(14 * var(--u))/1.6 LambooNativeJP,
    sans-serif;
  color: #65708d;
  margin-top: calc(12 * var(--u));
}
.native-learning .native-section-label {
  font:
    700 calc(17 * var(--u))/1.5 LambooNativeJP,
    sans-serif;
  margin: 0;
}
.native-learning .native-card strong em {
  color: #2557ff;
  font-style: normal;
}
.demo-audio,
.native-expression-row > button {
  height: calc(44 * var(--u));
  width: calc(44 * var(--u));
  background: #eef2ff;
  border-radius: 50%;
  flex-shrink: 0;
  border: 0;
  display: grid;
  place-items: center;
  padding: 0;
  color: #2557ff;
  cursor: pointer;
}
.demo-audio svg,
.native-expression-row > button svg {
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(#journey-screen, .journey-exit, .journey-preview-screen) .demo-chat {
  background: white;
}
.chat-history {
  padding: calc(24 * var(--u)) calc(16 * var(--u));
  min-height: calc(185 * var(--u));
  gap: calc(12 * var(--u));
  justify-content: center;
}
.chat-history > p {
  font:
    400 calc(16 * var(--u))/1.4 -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  padding: calc(9 * var(--u)) calc(14 * var(--u));
  border-radius: calc(18 * var(--u));
}
.message-compose {
  position: relative;
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  gap: calc(10 * var(--u));
}
.message-compose > div {
  min-height: calc(36 * var(--u));
  font:
    400 calc(17 * var(--u))/1.3 -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  padding: calc(7 * var(--u)) calc(32 * var(--u)) calc(7 * var(--u)) calc(12 * var(--u));
  border-color: #e4e5e8;
  color: #c5c7cd;
}
.message-compose > div.has-translation {
  color: #17191d;
}
.message-compose > span:first-child {
  font-size: calc(28 * var(--u));
  color: #161616;
}
.message-compose > .native-mic {
  position: absolute;
  right: calc(22 * var(--u));
  top: calc(16 * var(--u));
  color: #c6c8cf;
  font-size: 0;
}
.native-mic svg {
  width: calc(18 * var(--u));
  height: calc(22 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.native-keyboard {
  padding: calc(6 * var(--u)) calc(5 * var(--u)) 0;
  background: #e4e5e9;
  border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
}
.candidate-row {
  height: calc(30 * var(--u));
  gap: calc(8 * var(--u));
  padding: 0 calc(4 * var(--u));
}
.candidate-row > small {
  font-size: calc(10 * var(--u));
}
.candidate-row > button {
  font-size: calc(16 * var(--u));
  color: #141414;
  white-space: nowrap;
  padding: calc(4 * var(--u)) calc(8 * var(--u));
}
.kana-preview {
  height: calc(27 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  border-radius: calc(6 * var(--u));
  margin: calc(4 * var(--u)) 0;
  padding: 0 calc(12 * var(--u));
  background: #f5f5f7;
}
.keyboard-modes {
  gap: calc(4 * var(--u));
  padding: calc(3 * var(--u)) 0 calc(6 * var(--u));
}
.keyboard-modes > span {
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  min-height: calc(32 * var(--u));
  padding: calc(6 * var(--u)) 0;
  border-radius: calc(8 * var(--u));
  color: #141414;
}
.keyboard-modes > span.selected {
  background: #0095ff;
  color: white;
}
.kana-keys {
  grid-template-rows: repeat(4, calc(45 * var(--u)));
  gap: calc(7 * var(--u)) calc(6 * var(--u));
}
.kana-keys > span {
  font:
    400 calc(25 * var(--u))/1 -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  border-radius: calc(8 * var(--u));
  box-shadow: none;
}
.kana-keys > span:nth-child(5n),
.kana-keys > span:nth-child(11),
.kana-keys > span:nth-child(17) {
  font-size: calc(13 * var(--u));
}
.kana-keys > .return-key {
  font-size: calc(16 * var(--u)) !important;
  background: #0095ff;
}
.keyboard-bottom {
  padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u));
  height: calc(66 * var(--u));
}
.keyboard-bottom svg {
  width: calc(26 * var(--u));
  height: calc(28 * var(--u));
  fill: none;
  stroke: #141414;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.native-quiz {
  padding: calc(24 * var(--u));
  min-height: calc(580 * var(--u));
}
.native-quiz > h3 {
  font:
    700 calc(19 * var(--u))/1.5 LambooNativeJP,
    sans-serif;
  margin: 0 0 calc(24 * var(--u));
  letter-spacing: 0;
}
.native-question {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-bottom: calc(24 * var(--u));
}
.quiz-sheep {
  display: block;
  object-fit: contain;
  width: calc(86 * var(--u));
  height: calc(96 * var(--u));
}
.native-question > div {
  flex: 1;
  min-width: 0;
  border-radius: calc(20 * var(--u));
  padding: calc(16 * var(--u));
  background: white;
  font:
    700 calc(24 * var(--u))/1.5 LambooNativeJP,
    sans-serif;
}
.demo-answers {
  gap: calc(16 * var(--u));
}
.demo-answers button {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  text-align: left;
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  font: 800 calc(23 * var(--u))/1.35 var(--latin);
  color: #202649;
  min-height: calc(64 * var(--u));
  background: white;
  border: 1px solid #e5e8f2;
  border-radius: calc(20 * var(--u));
}
.demo-answers button span {
  flex: 1;
}
.demo-answers button i {
  font-style: normal;
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  font-size: calc(16 * var(--u));
  border-radius: 50%;
  background: #2557ff;
  color: white;
}
.demo-answers button.is-correct {
  background: #eef2ff;
  border: 2px solid #2557ff;
  color: #202649;
}
.demo-answers button.is-wrong {
  background: #cf334b14;
  border: 2px solid #cf334b;
  color: #202649;
}
.demo-answers button.is-wrong i {
  background: #cf334b;
}
.native-feedback {
  padding: calc(24 * var(--u));
  background: #2557ff;
  color: #fff;
}
.native-feedback.wrong-feedback {
  background: #cf334b;
}
.native-feedback > div {
  display: flex;
  gap: calc(16 * var(--u));
  align-items: center;
  margin-bottom: calc(20 * var(--u));
}
.feedback-symbol {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: white;
  color: #2557ff;
  font: 700 calc(28 * var(--u))/1 sans-serif;
}
.wrong-feedback .feedback-symbol {
  color: #cf334b;
}
.native-feedback > div > div {
  flex: 1;
  display: grid;
  gap: calc(4 * var(--u));
}
.native-feedback strong {
  font:
    700 calc(26 * var(--u))/1.4 LambooNativeJP,
    sans-serif;
}
.native-feedback > div > div > span {
  font: 800 calc(19 * var(--u))/1.4 var(--latin);
}
.native-feedback .demo-audio {
  background: white;
}
.native-feedback .demo-primary {
  background: white;
  color: #2557ff;
}
.wrong-feedback .demo-primary {
  color: #cf334b;
}
.demo-primary {
  font:
    700 calc(15 * var(--u))/1.5 LambooNativeJP,
    sans-serif;
  min-height: calc(54 * var(--u));
  border-radius: calc(20 * var(--u));
  padding: calc(12 * var(--u));
  background: #2557ff;
}
.native-flash-sheep {
  display: flex;
  justify-content: center;
  margin-bottom: calc(24 * var(--u));
}
.flash-face {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: calc(16 * var(--u));
  width: 100%;
  min-height: calc(256 * var(--u));
  background: white;
  border: 1px solid #e5e8f2;
  border-radius: calc(24 * var(--u));
  margin: 0;
}
.flash-face > .demo-audio,
.flash-audio-space {
  align-self: flex-end;
  height: calc(44 * var(--u));
}
.flash-face > button[data-action="flip"] {
  background: none;
  border: 0;
  color: #202649;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(24 * var(--u));
  min-height: calc(164 * var(--u));
  padding: 0 calc(16 * var(--u)) calc(24 * var(--u));
  width: 100%;
  cursor: pointer;
}
.flash-face strong {
  font: 800 calc(26 * var(--u))/1.5 var(--latin);
}
.flash-face button > svg {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  stroke: #2557ff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flash-grade {
  display: flex;
  gap: calc(12 * var(--u));
  padding: calc(24 * var(--u));
  margin-top: calc(-80 * var(--u));
}
.flash-grade > button {
  flex: 1;
  border: 0;
  min-height: calc(54 * var(--u));
  border-radius: calc(20 * var(--u));
  background: white;
  color: #202649;
  font:
    700 calc(15 * var(--u)) LambooNativeJP,
    sans-serif;
  cursor: pointer;
}
.flash-grade > button + button {
  background: #2557ff;
  color: white;
}

/* Actual image and OCR boxes; no tilted mock menu or invented result panel. */
.native-photo {
  container-type: inline-size;
  width: 100%;
  max-width: 393px;
  margin: 28px auto 0;
  background: #f6f7fc;
  border-radius: 20px;
  overflow: auto;
  max-height: 650px;
  scrollbar-width: thin;
  scrollbar-color: #c9cfdf transparent;
  color: #202649;
  font-family: LambooNativeJP, sans-serif;
}
.native-photo > div {
  --u: calc(100cqw / 393);
}
.native-photo-body {
  padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
.native-photo-image {
  position: relative;
  border-radius: calc(16 * var(--u));
  overflow: hidden;
}
.native-photo-image > img {
  display: block;
  width: 100%;
  height: auto;
}
.native-photo-image > div {
  position: absolute;
  inset: 0;
}
.ocr-region {
  position: absolute;
  border: calc(1.5 * var(--u)) solid #2557ff;
  border-radius: calc(4 * var(--u));
  background: #2557ff0a;
  padding: 0;
  cursor: pointer;
}
.ocr-region[aria-pressed="true"] {
  background: #2557ff3d;
  border-width: calc(3 * var(--u));
}
.native-photo-actions {
  padding: calc(12 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  background: #f6f7fc;
}
.native-photo-actions button {
  border: 0;
  min-height: calc(54 * var(--u));
  background: white;
  border-radius: calc(20 * var(--u));
  color: #2557ff;
  font:
    700 calc(15 * var(--u)) LambooNativeJP,
    sans-serif;
  cursor: pointer;
}
.native-photo-actions button + button {
  background: #2557ff;
  color: white;
}
.native-photo-actions button:disabled {
  opacity: 0.4;
  cursor: default;
}
.native-back {
  align-self: flex-start;
  border: 0;
  border-radius: 50%;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  background: white;
  font: 400 calc(35 * var(--u))/1 sans-serif;
  color: #202649;
  cursor: pointer;
}
.native-unit-tabs {
  display: flex;
  gap: calc(8 * var(--u));
  margin-top: calc(16 * var(--u));
}
.native-unit-tabs > span {
  background: #eef2ff;
  color: #2557ff;
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: 99px;
  font: 700 calc(14 * var(--u))/1 var(--latin);
}
.native-unit-tabs > span:first-child {
  background: #2557ff;
  color: white;
}
.native-recommend {
  --u: 1px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  margin-top: 28px;
  border-radius: 20px;
  background: #f6f7fc;
  transform: none;
  font-family: LambooNativeJP, sans-serif;
}
.native-recommend > h4 {
  font:
    700 19px LambooNativeJP,
    sans-serif;
  margin: 0 0 4px;
}
.native-expression-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  min-height: 78px;
  border: 1px solid #e5e8f2;
  border-radius: 20px;
  background: white;
  align-items: center;
}
.row-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 46px;
  background: #eef2ff;
  border-radius: 12px;
  flex-shrink: 0;
}
.row-mark img {
  width: 18px;
  height: 18px;
}
.native-expression-row > div {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.native-expression-row strong {
  font: 800 19px/1.35 var(--latin);
  color: #202649;
}
.native-expression-row > div > span {
  font:
    400 12px/1.5 LambooNativeJP,
    sans-serif;
  color: #65708d;
}
@media (max-width: 760px) {
  .journey-shell {
    gap: 24px;
  }
  .journey-ui {
    max-width: 393px;
  }
  .journey-formats {
    justify-content: center;
  }
  .journey-formats button {
    font-size: 11px;
  }
  .native-photo {
    max-height: 570px;
  }
  .native-recommend {
    padding: 16px;
  }
  .native-expression-row {
    gap: 8px;
    padding: 10px;
  }
  .native-expression-row strong {
    font-size: 17px;
  }
  .native-expression-row > button {
    width: 32px;
    height: 32px;
  }
  .row-mark {
    width: 32px;
    height: 38px;
  }
}
:is(#journey-screen, .journey-exit, .journey-preview-screen)[data-scene="quiz"] {
  display: flex;
  flex-direction: column;
  height: calc(650 * var(--u));
  aspect-ratio: auto;
}
.native-quiz {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.native-feedback,
.flash-grade {
  flex-shrink: 0;
}
.flash-grade {
  margin-top: 0;
}
:is(#journey-screen, .journey-exit, .journey-preview-screen) .demo-answers button:disabled {
  opacity: 1;
  cursor: default;
}

/* Both app excerpts share a baseline at the outer card edge. */
.extras-grid > article {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.extras-grid .extra-copy {
  flex: 1;
}
.extras-grid .native-photo,
.extras-grid .native-recommend {
  box-sizing: border-box;
  width: 100%;
  max-width: 393px;
  height: auto;
  min-height: 0;
  max-height: none;
  flex-shrink: 0;
  align-self: center;
  margin: 28px auto 0;
  border-radius: 20px 20px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.extras-grid .native-recommend {
  justify-content: flex-start;
}
.native-back {
  display: grid;
  place-items: center;
  padding: 0;
  flex-shrink: 0;
}
.native-back > svg {
  display: block;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 760px) {
  .extras-grid > article {
    padding-bottom: 0;
  }
}
.native-learning .expression-document > .native-unit-tabs {
  justify-content: flex-start;
}
.native-recommend {
  container-type: inline-size;
  --u: calc(100cqw / 345);
}
.native-recommend > h4 {
  font-size: calc(19 * var(--u));
}
.native-recommend .native-expression-row {
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  min-height: calc(78 * var(--u));
  border-radius: calc(20 * var(--u));
}
.native-recommend .row-mark {
  width: calc(42 * var(--u));
  height: calc(46 * var(--u));
  border-radius: calc(12 * var(--u));
}
.native-recommend .row-mark img {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.native-recommend .native-expression-row strong {
  font-size: calc(19 * var(--u));
}
.native-recommend .native-expression-row > div > span {
  font-size: calc(12 * var(--u));
}
.native-recommend .native-expression-row > button {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
}

/* Cropped app excerpts, without nested vertical scrolling. */
.extras-grid .native-photo,
.extras-grid .native-recommend {
  aspect-ratio: 393/420;
  overflow: hidden;
}
:is(#journey-screen, .journey-exit, .journey-preview-screen),
.native-quiz {
  overflow-y: hidden;
  scrollbar-width: none;
}
.native-photo-body {
  gap: 0;
  padding-bottom: calc(12 * var(--u));
}
.native-photo-image {
  height: calc(220 * var(--u));
  flex-shrink: 0;
}
.native-photo-image > div {
  bottom: auto;
  height: auto;
}

.native-photo {
  position: relative;
}
.native-photo-image {
  height: auto;
  aspect-ratio: 1122/1402;
}
.native-photo-image > div {
  aspect-ratio: 1122/1402;
}
.native-photo-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  --u: calc(100cqw / 393);
}

.extras-grid .extra-copy {
  text-align: center;
  width: 100%;
}
.flow-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: LambooNativeJP, var(--jp), sans-serif;
}
.flow-mobile {
  display: none;
}
@media (max-width: 760px) {
  .flow-desktop {
    display: none;
  }
  .flow-mobile {
    display: block;
  }
}

/* Painted editorial scenes, with the same person and baseline in both states. */
.switch-comparison.illustrated-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  max-width: 1100px;
}
.flow-illustration-card {
  min-width: 0;
  text-align: center;
  overflow: hidden;
}
.flow-art-label {
  display: block;
  font-size: 13px;
  font-weight: 750;
  color: #7b85a0;
  margin-bottom: 12px;
}
.flow-after .flow-art-label {
  color: #2557ff;
}
.flow-illustration-card h3 {
  font-weight: 750;
  margin: 0 0 12px;
  color: #202649;
}
.flow-art {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.flow-art > img {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 760px) {
  .switch-comparison.illustrated-comparison {
    gap: 12px;
  }
  .flow-art-label {
    font-size: 11px;
    margin-bottom: 10px;
  }
}

/* Illustrated landscape frames, with the original opaque content card on top. */
.flow-illustration-card {
  position: relative;
  isolation: isolate;
  background: #a8b3c9 url("assets/flow-cloudy.webp") center/cover no-repeat;
  border-radius: 28px;
}
.flow-illustration-card.flow-after {
  background: #b5d8a5 url("assets/flow-sunny.webp") center/cover no-repeat;
}
.flow-illustration-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 20px;
  background: #f6f7fc;
}
.flow-illustration-card.flow-after::before {
  background: #e4ebff;
}
@media (max-width: 760px) {
  .flow-illustration-card {
    border-radius: 20px;
  }
  .flow-illustration-card::before {
    border-radius: 13px;
  }
}

/* A native-scroll story: the stage stays still while its three scenes advance. */
.journey-scroll.is-scroll-story {
  --story-top: 96px;
  position: relative;
  height: calc(100svh + 160svh);
}
.is-scroll-story .journey-shell {
  box-sizing: border-box;
  position: sticky;
  top: var(--story-top);
  height: calc(100svh - 120px);
  max-height: 800px;
  min-height: 0;
  overflow: hidden;
}
.is-scroll-story .journey-story {
  min-width: 0;
}
.is-scroll-story .journey-ui {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 393/650;
  align-self: center;
  overflow: hidden;
}
.is-scroll-story :is(#journey-screen, .journey-exit, .journey-preview-screen) {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
}
.is-scroll-story .journey-formats {
  min-height: 42px;
}
.is-scroll-story .journey-formats[hidden] {
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.is-scroll-story .journey-nav button {
  position: relative;
  overflow: hidden;
}
.is-scroll-story .journey-nav button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #2557ff;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}
.is-scroll-story .journey-nav button[aria-current]::after {
  transform: scaleX(1);
}
@media (max-width: 760px) {
  .journey-scroll.is-scroll-story {
    --story-top: 82px;
    height: calc(100svh + 150svh);
  }
  .is-scroll-story .journey-shell {
    display: grid;
    height: calc(100svh - 100px);
    max-height: 860px;
  }
  .is-scroll-story .journey-story {
    align-self: start;
  }
  .is-scroll-story .journey-story > img {
    display: none;
  }
  .is-scroll-story .journey-nav button {
    padding: 8px 3px;
    gap: 2px;
    font-size: 10px;
  }
  .is-scroll-story .journey-caption {
    font-size: 11px;
    line-height: 1.7;
    margin: 10px 4px 0;
    min-height: 38px;
  }
  .is-scroll-story .journey-formats {
    margin-top: 8px;
    min-height: 30px;
    gap: 6px;
  }
  .is-scroll-story .journey-formats button {
    padding: 5px 12px;
    font-size: 10px;
    border-radius: 9px;
  }
  .is-scroll-story .journey-ui {
    justify-self: center;
    max-height: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-scroll-story .journey-nav button::after {
    transition: none;
  }
}
/* Clip horizontal decoration without creating an ancestor scrolling box. */
.hs-main.product-main {
  overflow-x: clip;
  overflow-y: visible;
}

/* A shorter pair of illustrated comparison cards. */
.flow-illustration-card {
  padding: 43px 42px 29px;
}
.flow-illustration-card::before {
  inset: 20px;
}
.flow-art {
  max-width: 315px;
}
.flow-illustration-card h3 {
  font-size: 24px;
  margin-bottom: 4px;
  line-height: 1.55;
}
.flow-art > img {
  transform-origin: 50% 90%;
  animation: flow-before-sway 2.8s ease-in-out infinite;
  animation-play-state: paused;
  will-change: transform;
}
.flow-after .flow-art > img {
  animation-name: flow-after-bob;
  animation-duration: 2.4s;
}
@media (hover: hover) {
  .flow-illustration-card:hover .flow-art > img {
    animation-play-state: running;
  }
}
@keyframes flow-before-sway {
  0%,
  100% {
    transform: rotate(-1deg) translateY(0);
  }
  50% {
    transform: rotate(1deg) translateY(-5px);
  }
}
@keyframes flow-after-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  35% {
    transform: translateY(-8px) rotate(-1deg);
  }
  70% {
    transform: translateY(-3px) rotate(1deg);
  }
}

/* Editorial scroll story: small chapter navigation, large number, layered app stage. */
.journey-shell {
  background: #fff;
  border-top: 1px solid #dce2f2;
  border-radius: 0;
  padding: 32px 0;
  gap: 54px;
}
.is-scroll-story .journey-shell {
  padding: 24px 0;
  background: #fff;
  border-radius: 0;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
}
.journey-story {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  height: 100%;
  justify-content: flex-start;
  padding: 20px 0;
}
.is-scroll-story .journey-story {
  align-self: stretch;
}
.journey-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.journey-nav button {
  display: block;
  position: relative;
  background: none;
  border: 0;
  border-top: 2px solid #e4e8f3;
  border-radius: 0;
  padding: 16px 0 8px;
  font-size: 0;
  min-width: 0;
  color: #8b94ad;
  text-align: left;
  transition:
    color 0.3s,
    border-color 0.3s;
}
.journey-nav button::before {
  content: attr(data-step-number);
  font: 600 12px var(--latin);
  display: block;
  margin-bottom: 7px;
  color: inherit;
}
.journey-nav button > span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  padding: 0;
  background: none;
  border-radius: 0;
  font-weight: 700;
  color: inherit;
}
.journey-nav button[aria-current] {
  background: none;
  border-color: #2557ff;
  color: #2557ff;
}
.journey-nav button[aria-current] > span {
  background: none;
  color: inherit;
}
.journey-nav button:hover {
  background: none;
  color: #2557ff;
}
.is-scroll-story .journey-nav button::after {
  display: none;
}
.journey-step-copy {
  margin-top: auto;
  padding-top: 28px;
}
.journey-step-number {
  display: block;
  color: #2557ff;
  font: 500 clamp(64px, 7vw, 100px)/0.95 var(--latin);
  letter-spacing: -0.07em;
  margin-bottom: 24px;
}
.journey-step-title {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.55;
  letter-spacing: -0.035em;
  margin: 0;
  color: #202649;
  font-weight: 750;
}
.journey-caption {
  font-size: 14px;
  line-height: 1.9;
  margin: 22px 0 0;
  min-height: 80px;
  max-width: 360px;
  color: #65708d;
}
.journey-formats {
  margin-top: 18px;
}
.journey-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
}
.journey-shell[data-scene="1"] .journey-visual {
  background: #e5edff;
}
.journey-shell[data-scene="2"] .journey-visual {
  background: #e9e8fa;
}
.journey-visual::before,
.journey-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 38px 17%;
  border: 1px solid #fff;
  background: #ffffff50;
  border-radius: 24px;
  transform: rotate(-5deg) translateX(-10px);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-visual::after {
  transform: rotate(5deg) translateX(10px);
  background: #ffffff60;
}
.journey-shell[data-scene="1"] .journey-visual::before {
  transform: rotate(-3deg) translateX(-18px);
}
.journey-shell[data-scene="2"] .journey-visual::after {
  transform: rotate(3deg) translateX(18px);
}
.is-scroll-story .journey-ui {
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 650px;
  border-radius: 20px;
  box-shadow: 0 12px 35px #2026490c;
  border: 1px solid #ffffffa0;
}
@media (max-width: 760px) {
  .flow-illustration-card {
    padding: 27px 14px 17px;
  }
  .flow-illustration-card::before {
    inset: 9px;
  }
  .flow-art {
    max-width: 150px;
  }
  .flow-illustration-card h3 {
    font-size: clamp(12px, 3.7vw, 20px);
    margin-bottom: 2px;
    line-height: 1.55;
  }
  .is-scroll-story .journey-shell {
    grid-template-columns: 1fr;
    padding: 12px 0;
    gap: 14px;
  }
  .journey-story,
  .is-scroll-story .journey-story {
    padding: 0;
    display: block;
    height: auto;
  }
  .journey-nav {
    gap: 12px;
  }
  .journey-nav button,
  .is-scroll-story .journey-nav button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    font-size: 0;
    text-align: left;
    border-radius: 0;
    white-space: nowrap;
  }
  .journey-nav button::before {
    margin: 0;
    font-size: 11px;
  }
  .journey-nav button > span {
    font-size: 11px;
  }
  .journey-step-copy {
    position: relative;
    padding: 14px 0 0 54px;
    margin: 0;
  }
  .journey-step-number {
    position: absolute;
    left: 0;
    top: 19px;
    font-size: 43px;
    line-height: 1;
    margin: 0;
  }
  .journey-step-title {
    font-size: 23px;
    line-height: 1.4;
  }
  .journey-caption,
  .is-scroll-story .journey-caption {
    font-size: 11px;
    line-height: 1.75;
    margin: 10px 0 0;
    min-height: 38px;
    max-width: none;
  }
  .journey-formats,
  .is-scroll-story .journey-formats {
    margin: 9px 0 0 54px;
    justify-content: flex-start;
    min-height: 28px;
  }
  .journey-visual {
    border-radius: 22px;
  }
  .journey-visual::before,
  .journey-visual::after {
    inset: 28px 16%;
    border-radius: 18px;
  }
  .is-scroll-story .journey-ui {
    border-radius: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flow-art > img {
    animation: none;
    transform: none;
    will-change: auto;
  }
  .journey-visual,
  .journey-visual::before,
  .journey-visual::after {
    transition: none;
  }
}

.journey-shell {
  border-bottom: 0;
}

/* Permanent opaque cards. Their transforms are scrubbed by one GSAP timeline. */
.journey-visual > .journey-card {
  grid-area: 1/1;
  position: relative;
  backface-visibility: hidden;
  transition: none;
  filter: none;
  opacity: 1;
  transform-origin: 50% 0%;
  will-change: transform;
  background: #f6f7fc;
}
.journey-visual > .journey-card[hidden] {
  display: none;
}
.is-scroll-story .journey-visual > .journey-card {
  height: 100%;
  max-width: calc(100% - 54px);
  max-height: 650px;
}
.journey-visual .journey-preview-screen {
  height: 100%;
  overflow: hidden;
}
@media (max-width: 760px) {
  .is-scroll-story .journey-visual > .journey-card {
    max-width: calc(100% - 28px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-visual > .journey-card {
    will-change: auto;
  }
}
.journey-visual::before,
.journey-visual::after {
  display: none;
}

/* A day passes behind the three scenes; the same scroll timeline moves the sky. */
.journey-visual {
  padding: 64px 24px 20px;
  background: #f7e4d3;
  transition: none;
}
.journey-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.journey-orbit {
  position: absolute;
  width: 48px;
  height: 48px;
  left: 10%;
  top: 23%;
  transform: translate(-50%, -50%);
}
.journey-orbit > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.journey-moon {
  opacity: 0;
}
.journey-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.journey-stars > i {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff4cf;
  border-radius: 50%;
  left: 9%;
  top: 12%;
}
.journey-stars > i:nth-child(2) {
  left: 26%;
  top: 8%;
  width: 3px;
  height: 3px;
}
.journey-stars > i:nth-child(3) {
  left: 72%;
  top: 12%;
}
.journey-stars > i:nth-child(4) {
  left: 94%;
  top: 43%;
  width: 3px;
  height: 3px;
}
.journey-stars > i:nth-child(5) {
  left: 10%;
  top: 61%;
  width: 3px;
  height: 3px;
}
.journey-stars > i:nth-child(6) {
  left: 84%;
  top: 66%;
}
.journey-stars > i:nth-child(7) {
  left: 45%;
  top: 5%;
  width: 3px;
  height: 3px;
}
.journey-card .journey-formats,
.is-scroll-story .journey-card .journey-formats {
  display: flex;
  box-sizing: border-box;
  gap: 4px;
  min-height: 0;
  margin: calc(16 * var(--u)) calc(24 * var(--u)) 0;
  padding: calc(4 * var(--u));
  border-radius: calc(14 * var(--u));
  background: #e9edf7;
  flex-shrink: 0;
  justify-content: stretch;
}
.journey-card .journey-formats button,
.is-scroll-story .journey-card .journey-formats button {
  flex: 1;
  border: 0;
  border-radius: calc(10 * var(--u));
  padding: calc(9 * var(--u)) calc(4 * var(--u));
  font:
    600 calc(12 * var(--u))/1.4 LambooNativeJP,
    sans-serif;
  background: transparent;
  color: #65708d;
  white-space: nowrap;
}
.journey-card .journey-formats button[aria-pressed="true"] {
  background: #fff;
  color: #2557ff;
  box-shadow: 0 2px 6px #20264908;
}
.journey-card [data-scene="quiz"] > .native-quiz {
  padding-top: calc(18 * var(--u));
}
@media (max-width: 760px) {
  .is-scroll-story .journey-shell {
    grid-template-rows: 175px minmax(0, 1fr);
  }
  .journey-visual {
    padding: 49px 14px 14px;
  }
  .journey-orbit {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-shell[data-scene="0"] .journey-visual {
    background: #f7e4d3;
  }
  .journey-shell[data-scene="1"] .journey-visual {
    background: #cce9f7;
  }
  .journey-shell[data-scene="1"] .journey-orbit {
    left: 50%;
    top: 5%;
  }
  .journey-shell[data-scene="2"] .journey-visual {
    background: #242d55;
  }
  .journey-shell[data-scene="2"] .journey-orbit {
    left: 90%;
    top: 23%;
  }
  .journey-shell[data-scene="2"] .journey-sun {
    opacity: 0;
  }
  .journey-shell[data-scene="2"] .journey-moon,
  .journey-shell[data-scene="2"] .journey-stars {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .journey-visual {
    padding-top: 70px;
  }
  .journey-orbit {
    left: 8%;
    top: 8%;
  }
}

/* Gentle wind moves individual grass tufts, without moving the hills. */
@keyframes meadow-wind {
  0% {
    transform: skewX(-5deg) rotate(-3deg);
  }
  50% {
    transform: skewX(2deg) rotate(1deg);
  }
  100% {
    transform: skewX(8deg) rotate(4deg);
  }
}
@keyframes meadow-sheep-breathe {
  0%,
  100% {
    transform: translateY(0) rotate(-0.7deg);
  }
  50% {
    transform: translateY(-2px) rotate(0.7deg);
  }
}

.keyboard-key.is-primary {
  background: #0095ff !important;
  color: #fff !important;
}

.native-photo-actions [data-photo-action="lookup"] {
  background: #2557ff;
  color: white;
}
/* One mobile viewport for photo lookup and personal recommendations, including details. */
@media (max-width: 760px) {
  .extras-grid {
    --extra-screen-height: clamp(300px, 92vw, 380px);
  }
  .extras-grid .native-photo,
  .extras-grid .native-recommend {
    height: var(--extra-screen-height);
    min-height: var(--extra-screen-height);
    max-height: var(--extra-screen-height);
    aspect-ratio: auto;
    margin-top: 18px;
    overflow: hidden;
  }
}