:root{--iphone17pm-w:440px;--iphone17pm-h:956px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body,#app{height:100%;height:100dvh;min-height:0!important;overflow:hidden!important}
#app{width:min(100%,var(--iphone17pm-w));max-height:100dvh}
#app *{box-sizing:border-box}
#app img{object-fit:contain;object-position:center;max-height:100%}
.latest-with-nav{height:100dvh!important;min-height:0!important;overflow:hidden!important;padding-top:calc(56px + var(--safe-top))!important}
.latest-with-nav>*,.entrance,.hub-scroll,.answer-page,.choice-page,.draw-scroll,.youth-page,.smoke-page,.h5-chat{height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important}

/* Entrance and hub */
.entrance{padding-bottom:max(14px,var(--safe-bottom))!important;display:flex!important;flex-direction:column!important}
.entrance .intro{margin-top:clamp(10px,2.5dvh,24px)!important}
.entrance .hero-stage{height:clamp(190px,27dvh,250px)!important;min-height:0!important}
.entrance .login-card{margin-top:auto!important;padding:clamp(12px,2dvh,18px)!important}
.entrance .privacy{margin-top:clamp(8px,1.5dvh,18px)!important}
.hub-scroll,.hub-page,.sticker-stage{height:100dvh!important;min-height:0!important;overflow:hidden!important}

/* Answer menu */
.answer-page{padding-bottom:max(16px,var(--safe-bottom))!important}
.answer-shell{height:100%!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) minmax(0,1fr)!important;gap:clamp(10px,1.8dvh,18px)!important}
.answer-heading{margin-bottom:0!important}
.answer-shell .mode-card{min-height:0!important;height:100%!important}
.answer-shell .mode-sticker{height:82%!important;width:42%!important;object-fit:contain!important}

/* Choice and coin */
.choice-page{padding-bottom:max(14px,var(--safe-bottom))!important;display:flex!important;flex-direction:column!important}
.choice-heading{flex:0 0 auto!important;margin-bottom:clamp(4px,1dvh,10px)!important}
.story-scene{min-height:0!important;flex:1!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.tap-girl-stage{height:clamp(310px,52dvh,500px)!important;min-height:0!important}
.answer-summary,.resolution-note{min-height:0!important;flex:1!important}
.answer-card-stage{height:clamp(250px,40dvh,390px)!important}
.answer-actions,.result-actions,.finish-actions{position:static!important;flex:0 0 auto!important;margin-top:clamp(8px,1.5dvh,16px)!important;padding-bottom:max(8px,var(--safe-bottom))!important}
.coin-map{margin:clamp(8px,2dvh,20px) auto 0!important}
.coin-control{width:clamp(160px,25dvh,220px)!important;height:clamp(160px,25dvh,220px)!important;margin:clamp(10px,2dvh,24px) auto 0!important}
.coin-disc,.result-coin-face{width:clamp(145px,23dvh,190px)!important;height:clamp(145px,23dvh,190px)!important}
.coin-instruction{margin-top:clamp(12px,2dvh,24px)!important}
.result-summary,.coin-result-summary{min-height:0!important;flex:1!important;transform:none!important}

/* Draw */
.draw-scroll,.draw-page{height:100%!important;min-height:0!important;overflow:hidden!important}
.draw-page{padding-bottom:max(10px,var(--safe-bottom))!important}
.draw-content{height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important}
.draw-title{margin-top:clamp(5px,1dvh,12px)!important;font-size:clamp(25px,4.1dvh,38px)!important}
.draw-rule{margin-top:clamp(4px,1dvh,12px)!important}
.ritual-state,.flying-state,.result-state{min-height:0!important;flex:1!important;margin-top:clamp(4px,1dvh,10px)!important}
.oracle-stage{height:clamp(210px,31dvh,310px)!important;min-height:0!important}
.fortune-paper{min-height:0!important;height:clamp(285px,44dvh,420px)!important;padding:clamp(16px,2.5dvh,28px)!important}
.cat-invite-stage{height:clamp(155px,23dvh,230px)!important}
.draw-note{position:absolute!important;bottom:max(7px,var(--safe-bottom))!important}

/* Boredom modules and travel cards */
.bored-nav{height:calc(56px + var(--safe-top))!important;padding-top:var(--safe-top)!important}
.bored-scroll{height:calc(100dvh - 56px - var(--safe-top))!important;min-height:0!important;overflow:hidden!important}
.bored-page,.bored-page>.scene{height:100%!important;min-height:0!important;overflow:hidden!important}
.home-scene{display:flex!important;flex-direction:column!important;padding-bottom:max(12px,var(--safe-bottom))!important}
.home-scene .page-title{margin-top:clamp(4px,1dvh,10px)!important}
.home-scene .module-grid{min-height:0!important;flex:1!important;display:grid!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;gap:clamp(8px,1.4dvh,14px)!important}
.home-scene .module-card{min-height:0!important;height:100%!important}
.transport-grid{height:calc(100% - clamp(60px,10dvh,96px))!important;align-content:center!important}
.transport-card{min-height:0!important;max-height:40dvh!important}
.transport-card img{height:clamp(150px,25dvh,240px)!important}
.travel-daily-head{height:clamp(50px,8dvh,72px)!important;margin:0!important}
.travel-daily-swiper{height:calc(100% - clamp(50px,8dvh,72px))!important;align-items:center!important;overflow-y:hidden!important;padding-top:clamp(4px,1dvh,10px)!important;padding-bottom:max(10px,var(--safe-bottom))!important}
.travel-daily-slide{height:100%!important;min-height:0!important;padding-block:clamp(3px,.8dvh,8px)!important}
.result-stack,.travel-daily-slide .result-card{height:100%!important;min-height:0!important}
.travel-daily-slide .result-stack{display:flex!important;flex-direction:column!important}
.travel-daily-slide .result-sticker{display:none!important}
.travel-daily-slide .result-card{padding:clamp(13px,2dvh,22px)!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;overflow:hidden!important}
.travel-cover,.result-card>img{height:clamp(205px,31dvh,300px)!important;flex:0 1 auto!important;object-fit:cover!important}
.travel-daily-slide .result-title{font-size:clamp(26px,4dvh,39px)!important;line-height:1.1!important;margin-block:clamp(5px,1dvh,10px)!important}
.travel-daily-slide .mission{margin:clamp(6px,1dvh,12px) 0!important;padding:clamp(8px,1.4dvh,14px)!important}
.travel-daily-slide .fact-row,.travel-daily-slide .return-cue{margin-block:clamp(3px,.7dvh,7px)!important}
.travel-daily-slide .map-action{min-height:44px!important;margin-top:clamp(5px,1dvh,10px)!important}
.bored-page>.strength-scene{display:flex!important;flex-direction:column!important;overflow:visible!important}
.strength-heading{flex:0 0 auto!important;margin-bottom:clamp(5px,1dvh,12px)!important}
.strength-heading span{display:block;width:100%;text-align:left}
.strength-heading span:first-child{font-size:clamp(21px,3dvh,27px)!important;font-weight:950!important;line-height:1.2!important}
.strength-heading span:last-child{margin-top:clamp(5px,.8dvh,8px);color:#6a4d31!important;font-size:clamp(13px,1.8dvh,16px)!important;font-weight:800!important;line-height:1.45!important}
.strength-carousel{min-height:0!important;flex:1!important;padding-block:4px max(64px,calc(54px + var(--safe-bottom)))!important}
.strength-carousel.latest-horizontal{
  left:50%!important;
  width:min(100vw,440px)!important;
  min-width:min(100vw,440px)!important;
  max-width:440px!important;
  transform:translateX(-50%)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
.strength-card{height:100%!important;min-height:0!important;padding:clamp(12px,2dvh,20px)!important;overflow:hidden!important}
.strength-sticker{height:clamp(138px,21dvh,205px)!important}
.strength-steps{gap:clamp(4px,.7dvh,7px)!important}

/* Keep the exercise action inside the mobile canvas, even on a wide desktop. */
.strength-checkin,
.strength-done{
  right:auto!important;
  left:50%!important;
  bottom:calc(clamp(12px,2dvh,20px) + var(--safe-bottom))!important;
  width:calc(min(100vw,440px) - 32px)!important;
  max-width:408px!important;
  min-height:52px!important;
  margin:0!important;
  transform:translateX(-50%)!important;
}

/* The centered card settles forward while its neighbours remain visibly behind. */
.strength-slide{
  opacity:1;
  transform:translateY(14px) scale(.92);
  transition:opacity 280ms ease,transform 420ms cubic-bezier(.22,.8,.22,1);
  will-change:opacity,transform;
}
.strength-slide.is-before{transform:translateX(10px) translateY(14px) scale(.92) rotate(-1deg)}
.strength-slide.is-after{transform:translateX(-10px) translateY(14px) scale(.92) rotate(1deg)}
.strength-slide.is-active{
  z-index:2;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.strength-slide .strength-card{
  opacity:1!important;
  transform:none!important;
  transition:box-shadow 320ms ease!important;
}
.strength-slide.is-active .strength-card{box-shadow:0 8px 0 #251c13,0 18px 32px rgba(37,28,19,.16)!important}
@media (prefers-reduced-motion:reduce){
  .strength-slide{transition:none!important}
}

.strength-slide.is-before,
.strength-slide.is-after{transform:translateY(14px) scale(.94)}

/* 100 things */
.youth-page{padding-top:clamp(10px,2dvh,24px)!important;padding-bottom:max(8px,var(--safe-bottom))!important;display:flex!important;flex-direction:column!important}
.page-heading{flex:0 0 auto!important}
.youth-page .page-title{margin-top:clamp(7px,1.2dvh,14px)!important;font-size:clamp(16px,2.2dvh,20px)!important;white-space:nowrap!important}
.youth-page .page-note{margin-top:clamp(4px,1dvh,10px)!important}
.task-swiper{min-height:0!important;height:auto!important;flex:0 0 auto!important;margin-top:calc(clamp(7px,1.2dvh,14px) + 30px)!important;padding-bottom:0!important}
.task-slide,.task-card{height:auto!important;min-height:0!important}
.task-slide{padding:12px 12px 18px!important;overflow:visible!important}
.youth-page .swipe-hint{margin-top:clamp(16px,2.2dvh,24px)!important}
.task-card{padding:clamp(11px,1.8dvh,20px)!important}
.task-visual{height:clamp(180px,28dvh,265px)!important;flex:0 1 auto!important}
.task-meta,.task-copy{margin-top:clamp(4px,.8dvh,8px)!important}
.task-title{margin-top:clamp(4px,.8dvh,8px)!important;font-size:clamp(21px,3dvh,29px)!important}

/* Rock-paper-scissors */
.smoke-page,.game-shell{height:100%!important;min-height:0!important;overflow:hidden!important}
.game-shell{display:flex!important;flex-direction:column!important}
.game-shell>.page-heading,.round-status{flex:0 0 auto!important}
.duel-stage{min-height:0!important;flex:1!important;overflow:hidden!important}
.ready-stage,.countdown-stage,.result-stage{height:auto!important;min-height:0!important}
.ready-stage{overflow:visible!important}
.ready-boss-sticker,.ready-man-sticker{max-height:30dvh!important}
.countdown-fighters{height:clamp(300px,48dvh,460px)!important}
.result-pair-wrap{height:clamp(280px,42dvh,410px)!important}
.result-copy-stack{margin-top:clamp(5px,1dvh,12px)!important}

/* Chat */
.h5-chat{height:100dvh!important;display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto!important}
.hc-scroll{min-height:0!important;height:auto!important;overflow-y:auto!important}
.hc-composer{position:absolute!important;inset:auto 0 0!important;z-index:20!important;width:100%!important;margin:0!important;padding-bottom:max(8px,var(--safe-bottom))!important;background:#f7cf4b!important;border-top:2px solid #251c13!important}

@media(max-height:780px){
  .latest-native-title,.bored-nav-title{font-size:16px!important}
  .entrance .hero-stage{height:22dvh!important}.entrance .intro h1{font-size:30px!important}
  .answer-shell .mode-note{display:none!important}
  .fortune-paper{height:38dvh!important}.cat-invite-stage{height:19dvh!important}
  .travel-cover,.result-card>img{height:25dvh!important}.travel-daily-slide .mission{font-size:13px!important}
  .task-visual{height:27dvh!important}.task-duration,.swipe-hint{font-size:12px!important}
  .ready-boss-sticker,.ready-man-sticker{max-height:24dvh!important}.result-pair-wrap{height:36dvh!important}
}

/* Travel card v2: every part, including actions, stays inside one iPhone screen. */
.travel-daily-swiper.latest-horizontal{
  gap:3%!important;
  padding:8px 6% max(14px,var(--safe-bottom))!important;
  scroll-padding-inline:6%!important;
}
.travel-daily-swiper.latest-horizontal>.travel-daily-slide{
  flex:0 0 88%!important;
  width:88%!important;
  max-width:88%!important;
  padding:0!important;
}
.travel-daily-slide .result-stack{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  overflow:visible!important;
}
.travel-daily-slide .result-card{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:14px!important;
  border-radius:28px!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  grid-template-rows:minmax(150px,25dvh) repeat(6,min-content) 54px!important;
  align-content:space-between!important;
  column-gap:10px!important;
  row-gap:6px!important;
}
.travel-daily-slide .result-card>:not(.map-action):not(button){grid-column:1/-1!important}
.travel-daily-slide .result-card>img,
.travel-daily-slide .result-card>figure,
.travel-daily-slide .result-card>.travel-cover,
.travel-daily-slide .result-card>.checkin-photo,
.travel-daily-slide .result-card>.travel-photo{
  grid-column:1/-1!important;
  grid-row:1!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  border-radius:20px!important;
  overflow:hidden!important;
  object-fit:cover!important;
  object-position:center!important;
}
.travel-daily-slide .result-card>figure img,
.travel-daily-slide .result-card>.travel-cover img,
.travel-daily-slide .result-card>.checkin-photo img,
.travel-daily-slide .result-card>.travel-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.travel-daily-slide .result-kicker{margin:0!important;font-size:12px!important;line-height:1.2!important}
.travel-daily-slide .result-title{margin:0!important;font-size:28px!important;line-height:1.08!important}
.travel-daily-slide .result-address{
  margin:0!important;
  font-size:12px!important;
  line-height:1.35!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
}
.travel-daily-slide .fact-row{margin:0!important;gap:6px!important;font-size:13px!important;line-height:1.25!important}
.travel-daily-slide .mission{
  margin:0!important;
  padding:9px 10px!important;
  min-height:0!important;
  border-radius:14px!important;
  font-size:13px!important;
  line-height:1.35!important;
  overflow:hidden!important;
}
.travel-daily-slide .mission-label{margin-bottom:2px!important;font-size:11px!important;line-height:1.2!important}
.travel-daily-slide .return-cue{margin:0!important;font-size:12px!important;line-height:1.25!important}
.travel-daily-slide .result-card>.map-action,
.travel-daily-slide .result-card>a.map-action{
  position:static!important;
  grid-column:1!important;
  grid-row:8!important;
  align-self:end!important;
  width:54px!important;
  min-width:54px!important;
  height:50px!important;
  min-height:50px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  font-size:0!important;
}
.travel-daily-slide .result-card>.map-action:after{content:"⌖";font-size:27px!important;line-height:1!important}
.travel-daily-slide .result-card>button,
.travel-daily-slide .result-card>.checkin-button,
.travel-daily-slide .result-card>.checkin-trigger{
  position:static!important;
  grid-column:2!important;
  grid-row:8!important;
  align-self:end!important;
  width:100%!important;
  min-width:0!important;
  height:50px!important;
  min-height:50px!important;
  margin:0!important;
  padding:0 14px!important;
}
.travel-daily-slide .result-card>.travel-card-actions,
.travel-daily-slide .result-card>.checkin-actions,
.travel-daily-slide .result-card>.card-actions{
  grid-column:1/-1!important;
  grid-row:8!important;
  height:50px!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:10px!important;
}

@media(max-height:840px){
  .travel-daily-slide .result-card{
    padding:11px!important;
    grid-template-rows:minmax(125px,21dvh) repeat(6,min-content) 48px!important;
    row-gap:4px!important;
  }
  .travel-daily-slide .result-title{font-size:24px!important}
  .travel-daily-slide .mission{padding:7px 9px!important;font-size:12px!important}
  .travel-daily-slide .result-card>.map-action,
  .travel-daily-slide .result-card>button{height:44px!important;min-height:44px!important}
}

/* Travel card v3: use the screen height instead of crowding content at the top. */
.travel-daily-swiper.latest-horizontal{
  height:min(calc(100dvh - 142px),742px)!important;
  min-height:0!important;
  max-height:none!important;
  align-items:center!important;
}
.travel-daily-swiper.latest-horizontal>.travel-daily-slide{
  height:calc(100% - 16px)!important;
  min-height:0!important;
  max-height:none!important;
}
.travel-daily-slide .result-card{
  grid-template-rows:minmax(250px,29dvh) repeat(6,min-content) 54px!important;
  align-content:space-between!important;
  row-gap:7px!important;
}
.travel-daily-slide .result-card>.travel-card-actions,
.travel-daily-slide .result-card>.checkin-actions,
.travel-daily-slide .result-card>.card-actions{
  grid-row:8!important;
  align-self:end!important;
  margin-bottom:22px!important;
}

@media(max-height:840px){
  .travel-daily-swiper.latest-horizontal{
    height:calc(100dvh - 128px)!important;
  }
  .travel-daily-slide .result-card{
    grid-template-rows:minmax(190px,26dvh) repeat(6,min-content) 48px!important;
    row-gap:4px!important;
  }
}

/* 2026-09-05: keep both transport choices fully inside the iPhone 17 Pro Max scene */
.bored-page .scene:has(.transport-grid) {
  overflow: hidden !important;
}

.bored-page .transport-grid {
  gap: 14px !important;
  align-content: start !important;
}

.bored-page .transport-card {
  height: 246px !important;
  min-height: 0 !important;
  padding: 8px 12px 12px !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

.bored-page .transport-card img {
  width: 100% !important;
  height: 202px !important;
  max-height: 202px !important;
  object-fit: contain !important;
}

.bored-page .transport-card span {
  position: relative !important;
  z-index: 1 !important;
  margin-top: -2px !important;
  line-height: 1.15 !important;
}

@media (max-height: 760px) {
  .bored-page .transport-grid {
    gap: 10px !important;
  }

  .bored-page .transport-card {
    height: 228px !important;
  }

  .bored-page .transport-card img {
    height: 184px !important;
    max-height: 184px !important;
  }
}

/* 2026-09-05: remove legacy offset that pushes the second transport card off-screen */
.bored-page .transport-grid {
  height: auto !important;
  margin-top: clamp(28px, 5dvh, 44px) !important;
  gap: 18px !important;
}

.bored-page .transport-card,
.bored-page .transport-card + .transport-card {
  height: 214px !important;
  margin-top: 0 !important;
}

.bored-page .transport-card img {
  height: 170px !important;
  max-height: 170px !important;
}

@media (max-height: 760px) {
  .bored-page .transport-card,
  .bored-page .transport-card + .transport-card {
    height: 196px !important;
    margin-top: 0 !important;
  }

  .bored-page .transport-card img {
    height: 154px !important;
    max-height: 154px !important;
  }
}
/* Render completed state as a reliable card-level image stamp. */
.travel-card-has-checkin.is-checked-in,
.youth-checkin-card.is-checked-in,
.strength-card.is-checked-in{position:relative!important}
.travel-card-has-checkin.is-checked-in::after,
.youth-checkin-card.is-checked-in::after,
.strength-card.is-checked-in::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:auto!important;
  right:14px!important;
  bottom:14px!important;
  left:auto!important;
  width:104px!important;
  height:78px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("../assets/stickers/checkin-stamp-coral-v1.png") center/contain no-repeat!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:none!important;
  filter:drop-shadow(0 3px 0 rgba(37,28,19,.16));
  pointer-events:none!important;
  z-index:80!important;
}
.travel-card-has-checkin.is-checked-in::after{bottom:82px!important}
img.checkin-stamp{display:none!important}
@media(max-width:360px){
  .travel-card-has-checkin.is-checked-in::after,
  .youth-checkin-card.is-checked-in::after,
  .strength-card.is-checked-in::after{right:10px!important;bottom:10px!important;width:88px!important;height:66px!important}
  .travel-card-has-checkin.is-checked-in::after{bottom:72px!important}
}

/* Keep the stamp in the card paint layer so transformed carousels cannot drop it. */
.travel-card-has-checkin.is-checked-in,
.youth-checkin-card.is-checked-in,
.youth-checkin-card.is-youth-checked-in,
.strength-card.is-checked-in{
  background-image:url("../assets/stickers/checkin-stamp-coral-v1.png")!important;
  background-repeat:no-repeat!important;
  background-size:104px 78px!important;
  background-position:right 14px bottom 14px!important;
}
.travel-card-has-checkin.is-checked-in{background-position:right 14px bottom 82px!important}
.travel-card-has-checkin.is-checked-in::after,
.youth-checkin-card.is-checked-in::after,
.youth-checkin-card.is-youth-checked-in::after,
.strength-card.is-checked-in::after{display:none!important}
@media(max-width:360px){
  .travel-card-has-checkin.is-checked-in,
  .youth-checkin-card.is-checked-in,
  .youth-checkin-card.is-youth-checked-in,
  .strength-card.is-checked-in{background-size:88px 66px!important;background-position:right 10px bottom 10px!important}
  .travel-card-has-checkin.is-checked-in{background-position:right 10px bottom 72px!important}
}

/* The completion artwork is an outer overlay node, never a card background. */
.travel-card-has-checkin.is-checked-in,
.youth-checkin-card.is-checked-in,
.youth-checkin-card.is-youth-checked-in,
.strength-card.is-checked-in{background-image:none!important}

/* Monthly exercise history: keep the workout cards and calendar vertically scrollable. */
.bored-scroll:has(.strength-scene){overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch}
.bored-page:has(.strength-scene){height:auto!important;min-height:100%!important;overflow:visible!important}
.strength-scene{height:auto!important;min-height:calc(100dvh - 54px)!important;overflow:visible!important;padding-bottom:calc(20px + var(--safe-bottom))!important}
.strength-scene .strength-carousel{height:clamp(540px,72dvh,660px)!important;min-height:540px!important}
.strength-scene .strength-calendar{flex:0 0 auto!important}
@media(max-height:760px){.strength-scene .strength-carousel{height:520px!important;min-height:520px!important}.strength-calendar{margin-top:16px!important}}
.bored-nav{position:relative!important}
.strength-calendar-scene{display:flex!important;align-items:center!important;justify-content:center!important;min-height:calc(100dvh - var(--nav-height))!important;padding:20px 0 calc(24px + var(--safe-bottom))!important}
.strength-calendar-scene .strength-calendar{margin:0 auto!important}
.strength-library-scene{display:flex!important;height:calc(100dvh - var(--nav-height))!important;min-height:0!important;padding:clamp(12px,2dvh,18px) 0 calc(10px + var(--safe-bottom))!important;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden!important}
.strength-library-scene .strength-reference-heading{flex:0 0 auto;margin-bottom:8px!important}
.strength-library-scene .strength-reference-carousel{width:100%!important;min-height:0!important;flex:1!important}
.strength-library-scene .strength-reference-slide{height:100%!important;min-height:0!important}
.strength-library-scene .strength-reference-card{display:flex!important;height:100%!important;max-height:720px!important;min-height:0!important;padding:clamp(12px,1.8dvh,18px)!important;box-sizing:border-box;flex-direction:column;overflow:hidden!important}
.strength-library-scene .strength-reference-card .strength-sticker{height:clamp(150px,25dvh,230px)!important;flex:0 0 auto!important}
.strength-library-scene .strength-reference-card .strength-title{margin-top:6px!important;font-size:clamp(25px,6.5vw,34px)!important;line-height:1.08!important}
.strength-library-scene .strength-reference-card .strength-meta{margin-top:7px!important;font-size:clamp(14px,3.7vw,18px)!important}
.strength-library-scene .strength-reference-card .strength-steps{margin-top:9px!important;gap:4px!important;font-size:clamp(12px,3.15vw,16px)!important;line-height:1.28!important}
.strength-library-scene .strength-reference-card .strength-care{margin-top:auto!important;padding-top:8px!important;font-size:clamp(11px,2.9vw,14px)!important;line-height:1.25!important}
.strength-detail-scene{display:grid!important;height:calc(100dvh - var(--nav-height))!important;min-height:0!important;padding:clamp(14px,2dvh,22px)!important;box-sizing:border-box;place-items:center;overflow:hidden!important}
.strength-detail-card{width:100%!important;max-width:390px!important;height:100%!important;max-height:720px!important;padding:clamp(14px,2dvh,20px)!important;overflow:hidden!important}
.strength-detail-card .strength-sticker{height:clamp(180px,28dvh,260px)!important}
@media(max-height:780px){.strength-reference-heading strong{font-size:19px}.strength-library-scene .strength-reference-card .strength-sticker{height:150px!important}.strength-detail-card .strength-sticker{height:170px!important}}