/* Compact learning surfaces, chapter art and immediate, honest rewards. */
.hero-card{min-height:0;display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);background:#f3e9d5;border:1px solid #e2d4b9;border-radius:20px}
.hero-card>img{width:100%;height:100%;min-height:164px;object-fit:cover;object-position:center;background:#e6d1b4;align-self:stretch}
.hero-overlay{position:static;padding:17px 13px;background:transparent;color:var(--ink);align-self:center}
.brand,.brand span,.welcome h1,.loading{font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif}
.welcome h1{letter-spacing:-1px;line-height:1.12}
.jobs-title{font-size:22px;line-height:1.3;letter-spacing:-.4px}
.local-job-list{margin-top:16px}
.hero-overlay h2{font-size:21px;line-height:1.18;letter-spacing:-.4px}
.hero-overlay .lesson-count{color:#77634b;margin-top:7px;font-size:11px}
.hero-overlay .primary{font-size:11px;min-height:39px;padding:8px 10px;margin-top:10px;gap:6px;width:100%}
.mission-create{padding:11px 14px;margin:0 0 23px;gap:11px;background:linear-gradient(140deg,#fff6e2,#eee3ce);border-color:#e0cfac}
.mission-create img{width:41px;height:44px}
.mission-create>div{flex:1;min-width:0}
.mission-create button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font-family:var(--font-display);font-size:15px;line-height:1.3;text-align:left;padding:0;background:transparent;border:0;min-height:30px}
.mission-create button svg{width:15px;height:15px;flex-shrink:0}
.mission-create small{font-size:11px;margin:2px 0 0;color:#756148}
.chapter-scenery{height:84px;width:96px;object-fit:cover;border-radius:17px;opacity:.88;border:1px solid #e2d2b0;filter:saturate(.82)}
.journey .chapter-scenery{left:4%;top:9px;width:84px;height:75px}
.brief-illustration{height:170px;object-position:center 20%}
.mentor-years{white-space:nowrap;font-size:10px;display:inline;color:#74572d;font-weight:750}
.mentor-years:before{content:" · ";font-weight:400;color:#a18a69}
.mentor-detail-head .mentor-years{font-size:12px}
.mentor-xp-note{font-size:12px;line-height:1.6}
.xp-reward{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;margin:4px 0 11px;border-radius:13px;background:#ffffffb5;border:1px solid #badac4;box-shadow:inset 0 1px 0 #fff}
.xp-reward strong{font-family:var(--font-display);font-size:22px;color:#23613b;line-height:1.15}
.xp-reward span,.xp-total{font-size:11px;color:#426e51}
.xp-reward b{font-size:14px}
.xp-new strong{animation:xp-arrive .42s cubic-bezier(.2,.8,.25,1.2) both}
.xp-repeat{display:block;font-size:10px;margin:-3px 0 9px;line-height:1.5;color:#466d52}
.xp-total{margin:1px 0 10px;color:inherit}
.voice-wave{width:21px;height:20px;display:flex;align-items:center;justify-content:center;gap:3px;flex-shrink:0}
.voice-wave i{width:3px;height:5px;border-radius:3px;background:currentColor;display:block}
.voice-wave i:nth-child(2){height:11px}
.tukun-listen.speaking{color:#246743;background:#e8f2e6;border-radius:11px;padding:6px 10px}
.tukun-listen.speaking .voice-wave i{animation:voice-wave .8s ease-in-out infinite alternate}
.tukun-listen.speaking .voice-wave i:nth-child(2){animation-delay:.17s}
.tukun-listen.speaking .voice-wave i:nth-child(3){animation-delay:.34s}
.question-actions{flex-wrap:wrap;gap:9px;align-items:center}
/* The situation is the reading focus; the response instruction stays quiet. */
.question .question-scene{margin:13px 0;padding:15px 16px}
.question .question-scene p{font-size:17px;line-height:1.55;overflow-wrap:break-word}
.question h2{font-size:15px;line-height:1.45;letter-spacing:0;margin:12px 0;font-weight:750}
.question .question-actions button{min-height:44px}
html[lang='bn'] .question .question-scene p{line-height:1.7}
html[lang='bn'] .question h2{line-height:1.65}
/* Compact spacing only on small phones. Content remains naturally scrollable. */
@media(max-width:430px) and (max-height:760px){
  .question .question-top{gap:8px;margin-bottom:8px}
  .question .mini-progress{margin:8px 0}
  .question .question-scene{margin:10px 0;padding:12px 13px}
  .question h2{margin:10px 0}
  .question .answers{gap:7px}
  .question .answer{min-height:48px;padding:10px 12px;gap:10px}
  .question .question-actions{margin:7px 0;gap:7px}
  .question .feedback{margin-top:12px;padding:13px}
}
.add-comment{display:block;width:100%;min-height:42px;margin-top:12px;text-align:left;font-size:12px;font-weight:750;color:#76501d;border-top:1px solid #e7dfd1;padding-top:11px}
.reply-form{margin-top:12px}
@keyframes xp-arrive{from{opacity:0;transform:translateY(9px) scale(.83)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes voice-wave{from{transform:scaleY(.5)}to{transform:scaleY(1.7)}}
@media(max-width:360px){.hero-card>img{min-height:169px}.hero-overlay{padding:14px 10px}.hero-overlay h2{font-size:19px}.hero-overlay .primary{padding:8px 7px;font-size:10px}.mission-create{padding:10px 12px}.mission-create button{font-size:14px}.chapter-scenery{width:82px;height:75px}.xp-reward{padding:8px 9px}.xp-reward strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.xp-new strong,.tukun-listen.speaking .voice-wave i{animation:none}.tukun-listen.speaking .voice-wave i{height:12px}}