/* Lani – Be A Gift / Five Guiding Principles.
   Accessible, responsive, original layout. Song and poster come from files Lani uploads later. */
.mindset-page{
 --ms-ink:#15365e;--ms-blue:#1a68ba;--ms-soft:#f1f8ff;
 max-width:1200px;margin:0 auto;color:var(--ms-ink);font-size:1rem;
}
.mindset-page [hidden]{display:none!important}
.mindset-page h1,.mindset-page h2,.mindset-page h3{line-height:1.25;color:#163b6d}
.mindset-page h2{font-size:clamp(1.35rem,2.5vw,1.8rem);margin:0 0 12px}
.mindset-page h3{font-size:1.1rem}
.mindset-page p{font-size:1rem;line-height:1.75}
.ms-eyebrow,.ms-section-label{
 font-size:.77rem;font-weight:850;letter-spacing:.14em;
 color:#246cb0;text-transform:uppercase;
}
.ms-hero{
 position:relative;display:flex;align-items:center;overflow:hidden;
 min-height:260px;padding:31px clamp(25px,5vw,53px);border-radius:24px;
 background:linear-gradient(115deg,#f7fcff,#dceefe 65%,#b4dffa);
 border:1px solid #cfe7f8;isolation:isolate;
}
.ms-hero:after{
 content:"";position:absolute;z-index:-1;inset:auto -10px -6px 0;
 height:80px;background:url("./assets/sky-garden.svg") bottom / 100% auto no-repeat;opacity:.68;
}
.ms-hero-copy{max-width:670px;position:relative;z-index:2}
.ms-hero h1{font-size:clamp(1.95rem,3.4vw,2.6rem);max-width:590px;margin:13px 0 12px;line-height:1.17}
.ms-hero p{max-width:570px;margin:0 0 20px;color:#426789;font-size:1.04rem}
.ms-hero>img{
 max-width:32%;width:300px;height:235px;object-fit:contain;
 margin:-10px -15px -24px auto;
 filter:drop-shadow(0 8px 12px #3a84bd33);
}
.ms-hero-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ms-hero-links button{
 min-height:44px;border:1px solid #b8d9f2;background:#fff;color:#125ea5;
 border-radius:12px;padding:9px 16px;font-family:inherit;font-size:.96rem;font-weight:750;line-height:1.4;
 cursor:pointer;
}
.ms-hero-links button:first-child{background:#196fc9;color:#fff;border-color:#196fc9}
.ms-hero-links button:hover{box-shadow:0 4px 14px #25679e24}
.ms-intro{
 display:flex;gap:15px;align-items:center;margin:18px 0 23px;
 padding:16px 22px;background:#fff;border-radius:17px;
 border:1px solid #e0ebf7;box-shadow:0 5px 16px #3873a209;
}
.ms-intro>div{flex:1}
.ms-intro strong{font-size:1.1rem;color:#22598e}
.ms-intro p{margin:4px 0 0;color:#58758d;font-size:.93rem}
.ms-leaf{font-size:2rem}
.ms-count{font-size:.84rem;white-space:nowrap;background:#e8f4ff;border-radius:99px;padding:8px 15px;font-weight:800;color:#1666ad}
.ms-panel{
 background:#fff;border:1px solid #dfeaf5;border-radius:20px;
 padding:clamp(18px,2.6vw,27px);box-shadow:0 5px 22px #205a9709;
}
.ms-media{display:grid;grid-template-columns:minmax(220px,.82fr) minmax(0,1.18fr);gap:28px;align-items:center}
.ms-media-art{
 min-width:0;border-radius:18px;background:linear-gradient(145deg,#d8eefa,#f4fcf5);
 min-height:340px;overflow:hidden;display:grid;place-items:center;
}
#ms-original-art{display:block;max-width:100%;height:auto;max-height:520px;object-fit:contain}
.ms-art-fallback{
 min-height:340px;width:100%;height:100%;display:flex;flex-direction:column;
 align-items:center;justify-content:center;position:relative;
 padding:18px 22px;text-align:center;
}
.ms-art-fallback>img:first-child{width:150px;height:125px;object-fit:contain}
.ms-art-fallback>img:last-child{
 width:175px;height:155px;object-fit:contain;position:absolute;right:-15px;bottom:-29px;opacity:.8;
}
.ms-art-fallback>div{position:relative;z-index:1;max-width:290px}
.ms-art-fallback>div span{font-size:.7rem;letter-spacing:.17em;color:#396c99;font-weight:800}
.ms-art-fallback>div strong{display:block;color:#164c88;font-size:1.4rem;line-height:1.3;margin:8px 0}
.ms-art-fallback>div small{display:block;font-size:.9rem;color:#41789a}
.ms-media-text h2{margin-top:7px}
.ms-media-text>p{margin:4px 0 13px;color:#547189}
.ms-audio{display:block;width:100%;min-height:49px;margin:12px 0}
.ms-file-pending{
 background:#f1f8ff;padding:12px 15px;border-radius:12px;border:1px solid #d9eaf8;
 font-size:.91rem!important;color:#526c86!important;
}
.ms-lyrics{margin-top:15px;display:grid;gap:7px}
.ms-lyrics p{
 display:flex;align-items:flex-start;gap:10px;margin:0;
 padding:8px 12px;background:#f5faff;border-radius:11px;
 font-size:.94rem;color:#244e7b;
}
.ms-lyrics strong{font-weight:720}
.ms-prompt{font-weight:700;color:#2963a1!important}
.ms-guides{margin-top:26px}
.ms-guides>h2,.ms-activities>h2{margin:8px 0 8px}
.ms-subtitle{margin:0 0 19px;color:#54748f}
.ms-guide-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.ms-principle{
 min-width:0;align-self:start;border:1px solid #dce9f6;
 border-radius:17px;background:#fff;overflow:hidden;
}
.ms-principle[open]{border-color:#bcd9f4;box-shadow:0 6px 19px #276ca312}
.ms-principle summary{
 min-height:92px;display:flex;align-items:center;gap:11px;
 padding:14px;cursor:pointer;list-style:none;
}
.ms-principle summary::-webkit-details-marker{display:none}
.ms-principle summary:hover{background:#f4faff}
.ms-principle summary:focus-visible{outline:3px solid #eeb341;outline-offset:-3px}
.ms-number{align-self:flex-start;font-weight:850;color:#7fa4c6;font-size:.75rem;margin-top:4px}
.ms-principle-icon{
 font-size:1.7rem;width:50px;height:50px;flex:0 0 50px;
 background:#eef7ff;border-radius:15px;display:grid;place-items:center;
}
.ms-principle-title{flex:1;min-width:0}
.ms-principle-title strong{display:block;font-size:1.19rem;color:#17447b}
.ms-principle-title small{display:block;color:#5f7b92;font-size:.9rem;line-height:1.5}
.ms-principle-chevron{font-size:1.55rem;color:#7297ba}
.ms-principle[open] .ms-principle-chevron{transform:rotate(180deg)}
.ms-principle-body{padding:0 19px 21px 19px}
.ms-principle-body>p{margin:0 0 11px;color:#536f8b}
.ms-principle-body .ms-keyline{font-weight:820;font-size:1.05rem;color:#156bb4}
.ms-examples{display:grid;gap:8px;margin:13px 0}
.ms-example{border-left:3px solid #8cc5ec;background:#f4f9ff;border-radius:0 9px 9px 0;padding:10px 13px}
.ms-example strong{display:block;color:#234e7f;font-size:.98rem}
.ms-example small{display:block;color:#5e778f;font-size:.9rem;line-height:1.6}
.ms-small-step{
 background:#eef8ef;border-radius:10px;
 padding:10px 13px;color:#376d4d!important;font-size:.93rem!important;
}
.ms-activities{margin-top:29px;display:grid;gap:17px}
.ms-activities>p,.ms-activities>h2,.ms-activities>.ms-section-label{margin:0}
.ms-match-grid{display:grid;gap:12px}
.ms-match-row{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(175px,220px);
 align-items:center;gap:14px;
 padding:13px 15px;background:#f7fbff;border-radius:12px;
}
.ms-match-row>span{display:flex;align-items:flex-start;gap:11px;font-size:1rem}
.ms-match-row b{font-size:.76rem;color:#3982b3;flex:0 0 22px;margin-top:4px}
.ms-label{display:block;margin:14px 0 7px;font-weight:750;font-size:.97rem;color:#275680}
.ms-select,.ms-textarea{
 display:block;max-width:100%;width:100%;font:inherit;font-size:1rem;color:#1b4a77;
 background:white;border:1px solid #bdcee1;border-radius:11px;
 padding:11px 14px;min-height:48px;
}
.ms-select:focus-visible,.ms-textarea:focus-visible{outline:3px solid #82bcf0;outline-offset:1px}
.ms-textarea{min-height:110px;resize:vertical}
.ms-activity-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.ms-activity-actions .button{min-height:46px}
.ms-best{font-size:.91rem;color:#38764f;font-weight:700}
.ms-feedback{
 margin:12px 0 0!important;font-size:.97rem!important;
 padding:12px 14px;border-radius:10px;background:#eef7ff;color:#28659b!important;
}
.ms-situation{border:1px solid #e2ebf3;border-radius:13px;padding:15px 18px;margin:12px 0}
.ms-situation h3{font-size:1.02rem;margin:0 0 13px;line-height:1.6}
.ms-situation h3 span{display:block;color:#2873ab;text-transform:uppercase;font-size:.71rem;letter-spacing:.1em;margin-bottom:2px}
.ms-finish{
 margin:23px 0 45px;padding:23px;
 border:1px solid #d8e9d9;border-radius:19px;
 background:linear-gradient(105deg,#f3fbf3,#eaf8ff);
 display:flex;align-items:center;gap:18px;
}
.ms-finish>span{font-size:2.3rem}
.ms-finish>div{flex:1;min-width:0}
.ms-finish h2{font-size:1.26rem;margin:0 0 4px}
.ms-finish p{margin:0;color:#56788a;font-size:.93rem}
.ms-finish .button{white-space:nowrap}
@media(max-width:1050px){
 .ms-media{grid-template-columns:minmax(180px,.8fr) minmax(0,1fr);gap:18px}
}
@media(max-width:760px){
 .mindset-page{font-size:1rem}
 .ms-hero{min-height:255px;padding:24px 20px;border-radius:18px}
 .ms-hero-copy{max-width:75%}
 .ms-hero h1{font-size:clamp(1.5rem,5.2vw,2rem)}
 .ms-hero>img{max-width:35%;width:180px;height:160px;margin:0 -17px -25px -18px}
 .ms-hero p{font-size:.94rem}
 .ms-intro{padding:15px;gap:10px}
 .ms-leaf{font-size:1.65rem}
 .ms-intro strong{font-size:1rem}
 .ms-count{font-size:.76rem;padding:7px 10px}
 .ms-media{grid-template-columns:1fr;gap:16px}
 .ms-media-art,.ms-art-fallback{min-height:225px}
 .ms-art-fallback>img:first-child{width:110px;height:105px}
 .ms-art-fallback>img:last-child{width:130px;height:130px}
 .ms-guide-list{grid-template-columns:1fr}
 .ms-match-row{grid-template-columns:1fr;gap:9px;padding:12px}
 .ms-select,.ms-textarea{font-size:1rem}
 .ms-finish{align-items:flex-start;flex-wrap:wrap;gap:12px}
 .ms-finish .button{width:100%}
}
@media(max-width:390px){
 .ms-hero-copy{max-width:85%}
 .ms-hero>img{width:100px;max-width:32%;margin-right:-22px}
 .ms-hero-links button{font-size:.86rem;padding:8px}
 .ms-intro{flex-wrap:wrap}
 .ms-count{margin-left:auto}
 .ms-match-row>span{font-size:.95rem}
}
@media(prefers-reduced-motion:reduce){
 .mindset-page *{scroll-behavior:auto!important;transition:none!important}
}


/* The original poster loads eagerly; do not hide the eager image with display:none.
   Keep the friendly illustration in place until the original PNG finishes loading. */
.ms-media-art{position:relative;isolation:isolate}
.ms-original-art{
 position:absolute;inset:0;display:block;
 width:100%;height:100%;max-height:none;max-width:100%;
 object-fit:contain;object-position:center;visibility:hidden;
 padding:7px;background:linear-gradient(145deg,#e9f6ff,#f6fbfc);
}
.ms-media-art .ms-art-fallback[hidden]{display:none!important}
/* Custom accessible play/pause button, no native player controls. */
.ms-song-controls{
 display:flex;gap:14px;align-items:center;flex-wrap:wrap;
 margin:16px 0 18px;padding:13px 14px;border-radius:14px;
 background:#eef7ff;border:1px solid #d8eafb;
}
.ms-song-controls .ms-play-button{
 flex-shrink:0;min-height:48px;padding:11px 19px;
 border-radius:13px;font-size:1.04rem;
}
.ms-song-controls .ms-play-button:disabled{opacity:.5;cursor:not-allowed}
.ms-song-controls>span{font-size:.94rem;color:#4c7090;line-height:1.5}
.ms-lyrics{gap:6px}
.ms-lyrics p{padding:8px 12px}
.ms-lyrics strong{font-weight:700}
.ms-tabs{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;
 margin-bottom:16px;
}
.ms-tab{
 min-height:73px;min-width:0;padding:12px 9px;
 border:1px solid #d8e9fa;border-radius:13px;
 background:#fff;color:#215282;cursor:pointer;
 font-family:inherit;font-size:.96rem;font-weight:750;line-height:1.35;text-align:center;
}
.ms-tab.selected{
 background:#e3f3ff;border-color:#8dc3ec;
 box-shadow:inset 0 -3px #217bc8;color:#135ba1;
}
.ms-tab:hover{background:#f2faff}
.ms-tab small{display:block;margin-top:6px;color:#6985a0;font-size:.82rem}
.ms-guide-text{color:#54718e;margin:0 0 17px}
.ms-question-header{
 display:flex;justify-content:space-between;gap:12px;
 color:#4c6e92;font-size:.89rem;font-weight:750;
 padding-bottom:10px;border-bottom:1px solid #e4eef8;
}
.ms-question{
 background:#f6fbff;border:1px solid #e0eef8;
 border-radius:14px;margin-top:17px;padding:19px;
}
.ms-question-type{
 text-transform:uppercase;letter-spacing:.09em;font-weight:800;
 color:#2877b5!important;font-size:.8rem!important;margin:0 0 7px!important;
}
.ms-question h3{
 margin:0 0 13px;font-size:clamp(1.1rem,2.2vw,1.34rem);
 line-height:1.55;color:#164575;
}
.ms-question>small{font-size:.88rem;color:#5b778f;line-height:1.5;display:block;margin-top:8px}
.ms-answer{font-size:1.04rem;max-width:100%;min-height:100px}
.ms-question .ms-label{font-size:.92rem}
.ms-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:16px}
.ms-choice{
 background:#fff;color:#205384;border:1px solid #c7ddf1;
 border-radius:11px;min-height:54px;padding:10px 12px;
 cursor:pointer;font-family:inherit;font-size:1rem;font-weight:740;line-height:1.4;
}
.ms-choice.chosen{background:#e7f5fe;border-color:#277fc8;box-shadow:inset 0 0 0 1px #277fc8}
.ms-choice:hover{background:#f0f8ff}
.ms-choice:focus-visible,.ms-tab:focus-visible{outline:3px solid #ebad36;outline-offset:2px}
.ms-reference{
 margin-top:12px;border-left:4px solid #64a98f;
 border-radius:0 11px 11px 0;background:#effaf2;
 padding:14px 17px;color:#29664f;line-height:1.6;
}
.ms-reference b{font-weight:850}
.ms-mark-read{margin-top:12px}
.ms-exercise{padding:clamp(18px,3vw,27px)}
@media(max-width:890px){
 .ms-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .ms-media-art{min-height:290px}
 .ms-choices{grid-template-columns:1fr}
 .ms-choice{min-height:48px}
 .ms-tab{font-size:.91rem}
 .ms-question{padding:14px}
 .ms-song-controls{flex-direction:column;align-items:stretch}
 .ms-song-controls .ms-play-button{width:100%}
 .ms-activity-actions{gap:9px}
 .ms-activity-actions>.button{min-height:45px}
}

.ms-song-lyrics{border:1px solid #dceaf5;border-radius:13px;padding:12px 15px;margin-top:12px;background:#fafcff}
.ms-song-lyrics>summary{font-weight:770;color:#1e639f;cursor:pointer;min-height:28px}
.ms-song-lyrics>.ms-lyrics{margin-top:12px}


/* Listen & Type: one clear sentence button above an empty answer field. */
.ms-dictation-listen{
 display:flex;align-items:center;gap:13px;flex-wrap:wrap;
 padding:14px 16px;margin:13px 0;
 border-radius:14px;background:#e6f4ff;border:1px solid #badff6;
}
.ms-dictation-listen .ms-sentence-play{
 display:inline-flex;align-items:center;justify-content:center;
 gap:8px;padding:12px 18px;min-height:52px;
 border-radius:13px;font-size:1.01rem;font-weight:800;
 white-space:normal;
}
#ms-voice-status{
 display:block;flex:1;min-width:135px;
 color:#305b82;font-size:.95rem;line-height:1.5;
}
.ms-hint{margin:10px 0 18px;font-size:.94rem}
.ms-hint summary{
 display:inline-block;cursor:pointer;
 color:#2669aa;font-weight:700;padding:6px 0;
}
.ms-hint p{
 margin:5px 0 10px!important;
 padding:10px 14px;border-left:3px solid #73b5dd;
 border-radius:0 8px 8px 0;background:#f4faff;
}
@media(max-width:760px){
 .ms-dictation-listen{flex-direction:column;align-items:stretch;padding:12px}
 .ms-dictation-listen .ms-sentence-play{width:100%;min-height:54px}
 #ms-voice-status{min-width:0;text-align:center}
}

/* Keep the uploaded lesson isolated from the rest of the learning app. */
.ms-embedded-lesson{margin:30px 0 24px;min-width:0}
.ms-lesson-frame{display:block;width:100%;height:700px;min-height:700px;border:1px solid #e8dcc0;border-radius:18px;background:#fdf6e3;overflow:hidden;box-shadow:0 6px 18px #5e6e9e10}
.ms-extra-practice{border:1px solid #dce9f6;border-radius:17px;margin:22px 0;background:#fff;overflow:hidden}
.ms-extra-practice>summary{padding:17px 20px;font-size:1.08rem;font-weight:800;color:#1a5f9d;cursor:pointer;list-style-position:inside}
.ms-extra-practice>summary span{display:inline-block;font-size:.88rem;color:#617c92;font-weight:600;margin-left:10px}
.ms-extra-practice[open]>summary{border-bottom:1px solid #e2edf6;background:#f4faff}
.ms-extra-practice>.ms-activities{margin:0;padding:20px}
@media(max-width:760px){.ms-lesson-frame{border-radius:12px}.ms-embedded-lesson{margin:20px 0}.ms-extra-practice>summary span{display:block;margin:5px 0 0 24px}.ms-extra-practice>.ms-activities{padding:12px}}