:root{--text-scale:1;--mt-home:#8b5200;--mt-home-hover:#744300;--mt-good:#087343;--mt-error:#ad2f25;--mt-popup:rgba(255,249,226,.97);--mt-focus:#eaa630}

:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:#19344a;background:#f2f7f7}*{box-sizing:border-box}body{margin:0}main{max-width:1050px;margin:auto;padding:clamp(12px,3vw,30px)}header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px}.brand{font-weight:800;font-size:clamp(25px,4vw,40px)}.sub{color:#536a77;font-size:clamp(17px,2vw,22px)}.panel{background:#fff;border:1px solid #dce7e7;border-radius:26px;padding:clamp(16px,3vw,32px);box-shadow:0 10px 30px #163a4b0c;margin:16px 0}h1,h2{margin:0 0 18px}h2{font-size:clamp(25px,3vw,36px)}button,select,input{font:inherit}button{border:2px solid #c8dadd;background:white;color:#173b4d;border-radius:17px;min-height:66px;padding:12px 18px;font-size:clamp(19px,2.2vw,25px);font-weight:700;cursor:pointer;touch-action:manipulation}button:active{transform:scale(.985)}button:focus-visible{outline:4px solid #eaa630;outline-offset:3px}button.primary{background:#176a75;color:white;border-color:#176a75}button.secondary{background:#eaf3f3}button:disabled{opacity:.55;cursor:default}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:14px}.tile{text-align:left;display:flex;gap:14px;align-items:center;min-height:110px}.tile .glyph{font-size:34px;background:#e8f4f2;border-radius:15px;padding:10px}.tile small{display:block;font-size:16px;color:#5b6d78;margin-top:5px;font-weight:500}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.between{justify-content:space-between}.hidden{display:none!important}.setting{display:flex;flex-direction:column;gap:9px;font-size:21px;font-weight:650;margin-bottom:20px}select,input{border:2px solid #a6bdc3;border-radius:13px;padding:14px;font-size:25px;max-width:100%;background:white;color:#173b4d}select{width:min(100%,380px)}.progress{height:15px;border-radius:20px;background:#e2ebec;overflow:hidden;margin:20px 0}.progress div{height:100%;background:#1b8580;transition:width .2s}.question{font-size:clamp(29px,4.2vw,49px);font-weight:750;line-height:1.4;margin:25px 0;text-align:center}.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px}.choice{min-height:100px}.choice.correct{background:#d8f4e3;border-color:#16834d}.choice.wrong{background:#fce6e2;border-color:#b84b3c}.status{font-size:clamp(21px,2.7vw,29px);font-weight:700;min-height:38px;margin:22px 0}.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:480px;margin:0 auto 22px}.keypad button{font-size:clamp(30px,5vw,46px);min-height:80px;background:#edf5f5}.keypad .action{font-size:24px;background:#f7f0e2}.step-list{display:grid;gap:10px;max-width:750px;margin:auto}.step{width:100%;text-align:left}.step.active{background:#e2f2ed;border-color:#168475}.memory-card{font-size:clamp(29px,4vw,43px);text-align:center;line-height:1.7;background:#edf6f3;border-radius:18px;padding:22px}.pill{border-radius:999px;background:#e6f3f1;padding:9px 15px;font-weight:700;font-size:19px}.score{font-size:clamp(36px,5vw,60px);font-weight:800;color:#176a75}.feedback-table{width:100%;border-collapse:collapse;font-size:21px}.feedback-table td{padding:14px 8px;border-bottom:1px solid #e1eaea}footer{font-size:16px;color:#62747b;margin:25px 0}.photo{font-size:100px;text-align:center} .hint{font-size:18px;color:#5a7079;text-align:center}.icon-shape{font-size:70px} @media(max-width:600px){.grid{grid-template-columns:1fr 1fr}.tile{min-height:100px;padding:10px;gap:7px;flex-direction:column;align-items:flex-start}.tile .glyph{font-size:24px}.tile small{font-size:14px}.choices{grid-template-columns:repeat(2,minmax(0,1fr))}.choice{min-height:95px}.keypad button{min-height:72px}}
.diff-layout{display:grid;grid-template-columns:1fr;gap:12px;max-width:100%;margin:0 auto}.diff-layout img{display:block;width:100%;height:auto;border-radius:12px;border:2px solid #bfd6df;user-select:none;-webkit-user-select:none}.diff-target{position:relative;cursor:crosshair;touch-action:manipulation}.diff-target img{width:100%}#diffMarks{position:absolute;inset:0;pointer-events:none}.diff-mark{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border:4px solid #f7b82b;background:#fff7d4e8;color:#143e52;border-radius:50%;font-size:22px;font-weight:900;box-shadow:0 2px 9px #0005}@media(max-width:600px){.diff-mark{width:36px;height:36px;font-size:17px}} .diff-target{cursor:pointer;touch-action:manipulation}.diff-marks{position:absolute;inset:0;pointer-events:none}.diff-mark{position:absolute;transform:translate(-50%,-50%);background:#d94837;color:white;border:3px solid white;border-radius:50%;width:39px;height:39px;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 2px 8px #3338}body.diff-mode main{max-width:1400px}body.diff-mode .diff-layout{width:100%;max-width:100%} .diff-target{width:100%}body.diff-mode main{max-width:1100px!important}
body.diff-mode #play{max-width:none}
body.diff-mode .diff-layout{display:flex;flex-direction:column;gap:14px}
body.diff-mode .diff-target{position:relative;width:100%;overflow:visible}
body.diff-mode .diff-target img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;box-sizing:border-box}
body.diff-mode .question{font-size:clamp(21px,3vw,30px)}

.object-photo{width:min(100%,350px);height:245px;object-fit:contain;border-radius:16px;border:1px solid #d6e4e6;background:#fff}
.photo{display:flex;justify-content:center;margin:18px auto}
.analog-clock{display:flex;justify-content:center;margin:16px auto 28px}
.clock-face{position:relative;width:min(70vw,320px);aspect-ratio:1;border:10px solid #254a5b;border-radius:50%;background:#fff;box-shadow:0 6px 18px #18334420}
.clock-num{position:absolute;transform:translate(-50%,-50%);font-size:clamp(20px,3vw,30px);font-weight:800;color:#183344}
.clock-hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:9px;background:#183344}
.clock-hand.hour{height:29%;width:9px}
.clock-hand.minute{height:39%;width:6px;transform:translateX(-50%) rotate(0deg)}
.clock-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:17px;height:17px;border-radius:50%;background:#183344}
.keypad button{min-height:64px;font-size:28px}
#checkNumberButton{font-size:23px;min-height:60px;padding:12px 28px}

/* Giao diện dễ đọc trên iPad, đặc biệt cho người lớn tuổi */
.choice,.step{font-size:clamp(27px,3.4vw,39px);line-height:1.35;font-weight:750;min-height:105px;padding:18px 20px}
.choices{grid-template-columns:repeat(2,minmax(0,1fr))}
.step-list{max-width:850px}
.question{font-size:clamp(33px,4.5vw,51px)}
.memory-card{font-size:clamp(31px,4.4vw,47px)}
.math-equation{display:flex;justify-content:center;align-items:center;gap:clamp(8px,2vw,24px);flex-wrap:wrap;font-size:clamp(45px,7vw,82px)}
.math-box{border:4px solid #4e8390;border-radius:18px;background:#eff7f7;min-width:clamp(78px,13vw,135px);min-height:100px;display:inline-flex;align-items:center;justify-content:center;padding:8px}
.math-box.unknown{background:#fff8df;border-color:#d7a642}
.sequence-row{display:flex;gap:clamp(6px,1.4vw,18px);justify-content:center;flex-wrap:wrap;margin:25px 0 35px}
.sequence-box{display:flex;align-items:center;justify-content:center;border:3px solid #aac5cd;border-radius:15px;background:#f5f9fa;min-width:clamp(56px,13vw,110px);height:clamp(75px,14vw,112px);font-size:clamp(36px,5vw,65px);font-weight:800}
.sequence-box.missing{border:4px dashed #c88c27;background:#fff6dd}
@media(max-width:600px){.choices{grid-template-columns:repeat(2,minmax(0,1fr))}.choice,.step{font-size:clamp(25px,5.8vw,34px);padding:12px;min-height:94px}.question{font-size:clamp(30px,6vw,41px)}}

.story-progress{display:block;font-size:clamp(17px,2.2vw,22px);font-weight:650;color:#617c83;margin:0 0 15px}
.story-question{display:block;font-size:clamp(29px,4vw,43px);line-height:1.35}
.story-feedback{font-size:clamp(23px,3vw,32px);font-weight:800;min-height:42px;margin:22px 0 12px}
.feedback-good{color:#087d42}.feedback-bad{color:#c32121}
.story-next-row{justify-content:center}
.story-choices .choice.correct{background:#c6f4d7;border:4px solid #148349;color:#065d30}
.story-choices .choice.wrong{background:#ffe0db;border:4px solid #c32121;color:#a51b1b}
.story-choices .choice:disabled{opacity:1}
.object-photo{width:min(100%,490px);height:auto;max-height:390px;object-fit:contain}
.photo{margin:8px auto 16px}
.choices.object-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;max-width:950px;margin:auto}
.object-choices .choice{min-height:120px}




@media(max-width:600px){.object-photo{max-height:330px}.object-choices .choice{min-height:105px;font-size:clamp(21px,5vw,29px);padding:10px}}

/* 3.7 continuous celebration confetti; short congratulatory sound */
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.choice{width:100%;overflow-wrap:anywhere}
.unified-feedback{min-height:55px;text-align:center;font-size:clamp(23px,3vw,31px);font-weight:800;line-height:1.35;margin:18px auto 12px}
.unified-feedback.feedback-good{color:#087d42}.unified-feedback.feedback-bad{color:#c32121}
.choices .choice.correct{background:#d7f6e3;border:3px solid #16834d;color:#087d42}
.choices .choice.wrong{background:#ffe1df;border:3px solid #c32121;color:#ae1919}
.celebration{position:relative;isolation:isolate;text-align:center;overflow:hidden;min-height:205px;padding:24px 8px}
.award-icon{font-size:clamp(66px,11vw,110px);line-height:1.15;position:relative;z-index:1}
#awardTitle{font-size:clamp(31px,5vw,51px);color:#164d69;margin:12px 0 6px;position:relative;z-index:1}
.award-message{font-size:clamp(20px,3vw,28px);position:relative;z-index:1}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-20px;width:9px;height:17px;opacity:0;border-radius:2px;animation:confetti-fall 2.8s linear infinite;transform:rotate(20deg)}
@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:0}12%{opacity:1}95%{opacity:1}100%{transform:translateY(380px) rotate(650deg);opacity:0}}
@media(max-width:600px){.choices{gap:9px}.choices .choice{min-height:95px;padding:10px 6px;font-size:clamp(19px,5vw,29px)}}
@media(prefers-reduced-motion:reduce){.confetti i{animation:none;display:none}}

/* v3.6: shared placement for feedback and next action */
#play{display:flex;flex-direction:column;align-items:stretch}
#answer{width:100%;min-width:0}
#feedback{order:3;min-height:0;margin:20px 0 0;padding:0 10px;text-align:center;line-height:1.4;overflow-wrap:anywhere}
#feedback:empty{margin:0}
.unified-next-row{order:4;display:flex;justify-content:center;align-items:center;width:100%;gap:16px;margin:16px 0 4px;clear:both}
.unified-next-row #next{display:block;min-width:min(100%,245px);min-height:64px;margin:0 auto;font-size:clamp(21px,2.4vw,27px)}
.choices,.choices.object-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;max-width:100%;margin:0 auto}
.choices .choice{min-width:0;width:100%;margin:0;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.choices .choice:disabled{opacity:1}
@media(max-width:600px){.choices,.choices.object-choices{gap:12px}.choices .choice{padding:12px 8px;font-size:clamp(20px,4.8vw,28px)}}

/* Home: requested two columns by five rows; compact spacing, readable cards. */
body[data-screen="home"] main{max-width:1180px;padding:clamp(10px,1.8vw,22px)}
.home-panel{padding:clamp(14px,1.8vw,22px)}
.home-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.home-heading h2{margin:0 0 4px}
.home-heading p{margin:0;color:#526a76;font-size:19px}
.practice-badge{flex:none;border-radius:999px;background:#e8f4f2;color:#174f59;padding:8px 12px;font-size:18px;font-weight:750}
.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.home-grid .tile{width:100%;min-width:0;min-height:94px;padding:10px 14px;gap:13px;border-radius:16px;border:2px solid #d2e1e4;background:#fff;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.home-grid .tile:hover,.home-grid .tile:focus-visible{transform:translateY(-1px);border-color:#79aeb3;box-shadow:0 5px 14px #18334412}
.home-grid .tile .glyph{display:grid;place-items:center;flex:none;width:56px;height:56px;padding:0;border-radius:15px;background:var(--tile-tint,#e8f4f2);font-size:37px}
.home-grid .tile-copy{display:block;min-width:0}
.home-grid .tile-copy strong{display:block;font-size:23px;line-height:1.2;color:#173b4d}
.home-grid .tile small{font-size:18px;line-height:1.25;margin-top:4px;color:#536a75}
.mixed-practice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border:1px solid #d9e7e4;border-radius:16px;background:linear-gradient(110deg,#f0f8f4,#f2f6ff)}
.mixed-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;background:#fff4d9;font-size:36px}
.mixed-copy strong{display:block;color:#173b4d;font-size:22px;line-height:1.2}
.mixed-copy span{display:block;margin-top:3px;color:#526a76;font-size:18px;line-height:1.3}
.mixed-button{min-width:215px;min-height:64px;font-size:23px;border-radius:14px}
@media(max-width:760px){.home-heading{align-items:flex-start;flex-direction:column}.practice-badge{font-size:18px}.home-grid .tile{min-height:92px;padding:9px 10px;gap:9px}.home-grid .tile .glyph{width:50px;height:50px;font-size:34px}.mixed-practice{grid-template-columns:auto minmax(0,1fr);gap:10px}.mixed-button{grid-column:1/-1;width:100%;min-width:0}}
@media(max-width:420px){.home-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.home-grid .tile{min-height:120px;padding:9px;flex-direction:column;align-items:flex-start;justify-content:flex-start}.home-grid .tile .glyph{width:46px;height:46px;font-size:31px}.home-grid .tile-copy strong{font-size:20px}.home-grid .tile small{font-size:17px}.mixed-icon{width:48px;height:48px;font-size:31px}}
@media(max-width:350px){.home-grid{grid-template-columns:1fr}.home-grid .tile{min-height:82px;flex-direction:row;align-items:center}}

/* Shared senior-friendly typography and visual focus across all activities. */
:root{--read-body:20px;--read-question:32px;--read-answer:27px;--read-control:24px}
body{font-size:var(--read-body);line-height:1.5}
main{padding:clamp(10px,2vw,22px)}
header{gap:8px;margin-bottom:12px}
.brand{font-size:clamp(28px,3.5vw,38px)}
.sub{font-size:20px}
.pill{font-size:20px;padding:8px 12px}
.panel{padding:clamp(14px,2vw,22px);border-radius:20px;margin:10px 0}
h2{font-size:30px;line-height:1.25;margin-bottom:12px}
button{font-size:var(--read-control);font-weight:750;line-height:1.25;min-height:66px;padding:12px 16px;border-radius:14px}
#setup .setting{font-size:24px;line-height:1.3;gap:6px;margin-bottom:14px}
#setup select,#setup input{font-size:24px;min-height:62px;padding:10px 14px}
#play #kind{font-size:26px;margin:8px 0}
#play #prompt.question{font-size:var(--read-question);font-weight:800;line-height:1.35;text-align:center;color:#173b4d;background:#fff7df;border:2px solid #e4c56d;border-left:8px solid #dba833;border-radius:16px;padding:14px 16px;margin:10px 0 14px;box-shadow:0 3px 10px #745a1710}
#play #prompt.question .story-progress{font-size:20px;font-weight:750}
#play #prompt.question .story-question{font-size:var(--read-question);font-weight:800;line-height:1.35}
#play #answer{font-size:var(--read-body)}
#play .choices{gap:12px}
#play .choices .choice,#play .step-list .step{font-size:var(--read-answer);font-weight:800;line-height:1.28;min-height:84px;padding:14px 16px;border-width:2px;border-radius:15px;background:#f2f8fb;color:#153d50}
#play .choices .choice:hover,#play .step-list .step:hover{border-color:#5596a4;background:#eaf5f8}
#play .choices .choice.correct{background:#d7f3df;border:3px solid #16834d;color:#075e32}
#play .choices .choice.wrong{background:#ffe5e1;border:3px solid #bc382f;color:#8d211b}
#play .hint{font-size:19px;line-height:1.4;color:#425e68;margin:8px auto}
#play .memory-card{font-size:30px;line-height:1.5;font-weight:750;padding:16px;background:#eef7f3;border:2px solid #d3e6dc;border-radius:16px}
#play 
#play .keypad{gap:8px;margin-bottom:14px}
#play .keypad button{font-size:34px;min-height:72px}
#play .keypad .action{font-size:24px}
#play .math-equation{font-size:58px;gap:12px}
#play .math-box{min-width:82px;min-height:82px;border-width:3px;border-radius:14px}
#play .sequence-row{gap:8px;margin:14px 0 18px}
#play .sequence-box{font-size:42px;min-width:60px;height:72px}
#play .status,#play #diffCount{font-size:23px;font-weight:800;line-height:1.4}
#play .diff-layout{gap:10px}
#play .diff-layout img{border-radius:9px}
#play .unified-next-row{margin:10px 0 0}
#play .unified-next-row #next{font-size:25px;min-height:66px}
#result .score{font-size:46px}
#result .award-message{font-size:24px}
#result .feedback-table{font-size:20px}
#result button{font-size:23px}
footer{font-size:18px;line-height:1.45;margin:14px 0;color:#4b626c}
@media(max-width:600px){
  :root{--read-question:29px;--read-answer:24px;--read-control:22px}
  .panel{padding:13px;border-radius:17px}
  h2{font-size:27px}
  #play .choices{gap:9px}
  #play .choices .choice,#play .step-list .step{min-height:78px;padding:10px 8px}
  #play .math-equation{font-size:48px}
  #play .math-box{min-width:65px;min-height:72px}
  #play .sequence-box{font-size:34px;min-width:48px;height:62px}
}

/* Optional participant name and result image sharing. */
.participant-entry{display:grid;gap:7px;margin:0 0 12px;padding:11px 14px;border:1px solid #cfdfdf;border-radius:15px;background:#f3f8f8}
.participant-entry label{font-size:21px;font-weight:800;color:#173b4d}
.participant-entry label span{font-size:17px;font-weight:600;color:#526a76}
.participant-entry input{width:100%;max-width:620px;min-height:58px;padding:10px 14px;border:2px solid #9bb6bd;border-radius:12px;font:700 22px/1.3 system-ui,-apple-system,'Segoe UI',sans-serif;color:#173b4d;background:#fff}
.participant-entry input::placeholder{font-weight:500;color:#657982;opacity:1}
.participant-entry input:focus-visible{outline:4px solid #e4b344;outline-offset:2px}
.result-name{font-size:25px;font-weight:800;color:#194c5b;margin:8px 0}
.result-sharing{margin:16px 0;padding:15px;border:2px solid #d2e4e3;border-radius:17px;background:#f5faf9}
.share-actions{justify-content:center;gap:10px}
.share-actions button{font-size:22px;min-height:64px}
.share-feedback{font-size:18px;font-weight:650;line-height:1.4;color:#425e68;text-align:center;margin:10px auto}
.result-image-preview{display:block;width:min(100%,390px);height:auto;margin:12px auto 0;border:1px solid #cbdcde;border-radius:12px;box-shadow:0 5px 16px #173b4d18}
.share-actions button:disabled{opacity:.65}
@media(max-width:600px){.participant-entry{padding:10px}.participant-entry label{font-size:20px}.participant-entry input{font-size:20px}.result-name{font-size:22px}.share-actions{display:grid;grid-template-columns:1fr}.share-actions button{width:100%;font-size:21px}}

/* 4.8 — focused, mobile-first interface for older adults */
.app-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 auto 12px;padding:4px 2px;max-width:1040px}
.brand-block{min-width:0}.brand{font-size:clamp(25px,3.2vw,34px);line-height:1.15}.app-header .sub{font-size:17px;line-height:1.25;margin-top:3px}
.app-info{position:relative;flex:none}.app-info summary{list-style:none;display:grid;place-items:center;min-width:48px;min-height:48px;padding:8px 12px;border:2px solid #d2e1e4;border-radius:14px;background:#fff;color:#174f59;font-size:22px;font-weight:800;cursor:pointer;touch-action:manipulation}.app-info summary::-webkit-details-marker,.participant-entry summary::-webkit-details-marker{display:none}.info-label{display:none}.app-info-content{position:absolute;right:0;top:calc(100% + 8px);z-index:8;display:grid;gap:3px;min-width:205px;padding:13px 15px;border:1px solid #cfdfdf;border-radius:14px;background:#fff;box-shadow:0 8px 24px #173b4d20;font-size:16px;color:#526a76}.app-info-content strong{font-size:18px;color:#173b4d}
.participant-entry{margin:0 0 12px;padding:0;border:0;background:transparent}.participant-entry summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 10px;border-radius:11px;color:#365b68;font-size:17px;font-weight:700;cursor:pointer}.participant-entry summary span{font-size:15px;font-weight:500;color:#657982}.participant-entry[open]{display:grid;gap:7px;padding:10px 12px;border:1px solid #cfdfdf;border-radius:14px;background:#f3f8f8}.participant-entry label{font-size:17px}.participant-entry input{min-height:50px;font-size:19px}
.home-heading{margin-bottom:10px}.home-heading h2{font-size:clamp(25px,3vw,32px)}.home-heading p{font-size:18px}.practice-badge{font-size:16px;padding:6px 10px}.home-grid .tile-copy strong{font-size:clamp(18px,2vw,22px)}.home-grid .tile small{font-size:16px}.mixed-copy strong{font-size:20px}.mixed-copy span{font-size:16px}
#play{scroll-margin-top:8px}#play #counter{font-size:17px}#play #kind{font-size:22px;margin:7px 0}#play #prompt.question{font-size:clamp(24px,3.3vw,32px);margin:8px 0 12px;padding:12px 14px}#play .hint{font-size:17px}#play .status,#play #diffCount{font-size:20px;line-height:1.3;margin:10px auto;text-align:center}#play .diff-layout{gap:9px}#play .diff-layout img{border:2px solid #bfd6df}#play .diff-actions{margin:8px 0 0}#play .diff-actions button{min-height:52px;font-size:19px;padding:9px 15px}
#play .step-list{gap:9px}.step-list .step{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;text-align:left}.order-number{display:grid;place-items:center;width:42px;height:42px;border:2px solid #a9c2c8;border-radius:50%;background:#fff;color:transparent;font-size:23px;font-weight:900}.step.active .order-number{border-color:#176a75;background:#176a75;color:#fff}.step.active{background:#e5f3ef;border-color:#176a75}.order-hint{margin:4px auto 8px!important}.order-reset-row{justify-content:center;margin:10px 0 0}.order-reset-row button{min-height:50px;font-size:18px}
.unified-next-row{z-index:20}
@media(max-width:700px){
  main{padding:8px 10px calc(16px + env(safe-area-inset-bottom))}.app-header{margin-bottom:8px}.brand{font-size:25px}.app-header .sub{font-size:15px}.panel{margin:7px 0;padding:12px;border-radius:15px}.home-panel{padding:12px}.home-heading{gap:7px}.home-heading h2{font-size:25px}.home-heading p{font-size:16px}.practice-badge{font-size:15px}.home-grid{gap:8px}.home-grid .tile{min-height:94px;padding:8px;gap:7px}.home-grid .tile .glyph{width:42px;height:42px;font-size:28px}.home-grid .tile-copy strong{font-size:18px;line-height:1.18}.home-grid .tile small{font-size:15px;line-height:1.2}.mixed-practice{margin-top:9px;padding:9px 10px}.mixed-icon{width:42px;height:42px;font-size:28px}.mixed-copy strong{font-size:18px}.mixed-copy span{font-size:15px}.mixed-button{min-height:56px;font-size:20px}
  #play{padding:11px 10px 100px}#play #prompt.question{font-size:23px;line-height:1.28;padding:10px 11px;margin:6px 0 10px}#play #kind{font-size:20px;margin:5px 0}#play .diff-layout{gap:7px}#play .diff-layout img{border-radius:7px}#play #diffCount{font-size:18px;margin:7px auto}#play .diff-actions{gap:8px;margin-top:6px}#play .diff-actions button{min-height:48px;font-size:17px;padding:8px 12px}#play .unified-next-row{position:fixed;left:0;right:0;bottom:0;margin:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#f2f7f7f2;border-top:1px solid #d5e2e4;backdrop-filter:blur(10px);box-shadow:0 -5px 18px #173b4d12}#play .unified-next-row #next{width:min(100%,520px);min-height:58px;font-size:21px;border-radius:13px}
  #play .step-list .step{grid-template-columns:42px minmax(0,1fr);gap:10px;min-height:72px;padding:10px 12px;font-size:21px}.order-number{width:38px;height:38px;font-size:21px}.order-hint{font-size:16px!important}
  body.diff-complete #play .diff-actions{display:none}
  footer{font-size:15px;margin:10px 2px}
}
@media(max-width:380px){.home-grid .tile-copy strong{font-size:16px}.home-grid .tile small{font-size:14px}.home-grid .tile{min-height:90px}.app-header .sub{max-width:255px}}

/* Keep the compact brand and info control on one line on phones. */
@media(max-width:700px){
  .app-header{flex-wrap:nowrap;align-items:center}
  .brand-block{flex:1 1 auto;min-width:0}
  .app-header .brand{font-size:clamp(21px,5.7vw,25px);white-space:nowrap}
  .app-header .sub{max-width:300px;font-size:14px}
  .app-info{margin-left:auto}
}
@media(max-width:380px){.app-header .brand{font-size:20px}.app-header .sub{max-width:245px;font-size:13px}}

/* Difference puzzles: reduce repeated instruction and land directly at the task. */
#play #kind{scroll-margin-top:6px}
body.diff-mode #play #kind{font-size:22px;line-height:1.2;margin:2px 0 5px}
body.diff-mode #play #prompt.question{font-size:18px;line-height:1.25;font-weight:750;margin:4px 0 9px;padding:8px 12px;border-left-width:5px}
@media(max-width:700px){body.diff-mode #play #kind{font-size:20px}body.diff-mode #play #prompt.question{font-size:16px;padding:7px 10px;margin:3px 0 7px}}


/* Consistent test header and compact exit control across every activity. */
#play #kind{order:0;margin:0 0 7px;line-height:1.2}
#play .play-toolbar{order:1;margin:0 0 8px}
#play .progress{order:2;margin:0 0 8px}
#play #prompt,#play .question-speech-area,#play #answer,#play #feedback,#play .unified-next-row{order:3}
#play .exit-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:7px 11px;font-size:15px;line-height:1;font-weight:750;white-space:nowrap}
#play .exit-icon{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#dcebed;color:#174f59;font-size:17px;font-weight:900;line-height:1}
@media(max-width:700px){#play #kind{font-size:22px;margin-bottom:6px}#play .play-toolbar{margin-bottom:7px}#play .exit-button{min-height:38px;padding:6px 10px;font-size:14px}}


/* Math answer is entered directly into the question-mark box. */
.math-box.answer-slot{min-width:clamp(88px,15vw,140px);transition:background-color .16s,border-color .16s,color .16s}
.math-box.answer-slot.math-correct{background:#d8f4e3;border-color:#16834d;color:#075d32}
.math-box.answer-slot.math-incorrect{background:#ffe0db;border-color:#c32121;color:#a51b1b}
.math-hint{margin:12px auto 8px;font-size:clamp(17px,2.4vw,21px);font-weight:700;color:#49636e}
.participant-entry summary{display:flex;align-items:center;justify-content:flex-start;gap:7px;width:fit-content}
.participant-chevron{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:2px;border-radius:50%;background:#e6f1f0;color:#174f59;font-size:22px;line-height:1;transition:transform .16s}
.participant-entry[open] .participant-chevron{transform:rotate(180deg)}
.participant-controls{display:flex;align-items:stretch;gap:9px;max-width:760px}
.participant-controls input{flex:1;min-width:0}
.save-name-button{flex:none;min-height:50px;padding:8px 14px;font-size:17px;border-radius:12px;background:#e3f2eb;border-color:#9bc9b2;color:#145a3a}
.name-saved{min-height:0;font-size:15px;font-weight:700;color:#176a42}
.name-saved:empty{display:none}
@media(max-width:600px){.math-box.answer-slot{min-width:86px}.math-hint{font-size:17px}.participant-controls{gap:7px}.participant-controls input{font-size:18px;padding:8px}.save-name-button{min-height:48px;padding:7px 10px;font-size:15px}}

.participant-entry summary span:first-child{font-size:17px;font-weight:750;color:#365b68}.participant-entry summary span:nth-child(2){font-size:14px;font-weight:500;color:#657982}.participant-entry summary .participant-chevron{font-size:22px;font-weight:800;color:#174f59}


/* Right-align the optional result-name action on the home screen. */
.participant-entry>summary{margin-left:auto;min-height:44px;padding:8px 13px;border:1px solid #c9dedb;border-radius:999px;background:#eaf4f2;box-shadow:0 1px 3px #173b4d0a}
.participant-entry>summary:hover{background:#e1efec}
.participant-entry>summary:focus-visible{outline:3px solid #e4b344;outline-offset:2px}
.participant-entry summary span:first-child{font-size:16px}
@media(max-width:420px){.participant-entry>summary{max-width:100%;padding:7px 10px;gap:5px}.participant-entry summary span:first-child{font-size:15px}.participant-entry summary span:nth-child(2){font-size:13px}}

/* Accessibility preferences: persisted locally and easy to find from every screen. */
.accessibility-settings{position:relative;flex:none}
.accessibility-settings>summary{list-style:none;display:grid;place-items:center;min-width:50px;min-height:50px;padding:4px 10px;border:2px solid #bfd6df;border-radius:14px;background:#fff;color:#174f59;font-size:22px;font-weight:900;cursor:pointer}
.accessibility-settings>summary::-webkit-details-marker{display:none}
.accessibility-settings>summary:focus-visible{outline:4px solid #eaa630;outline-offset:2px}
.accessibility-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:50;display:grid;gap:10px;width:min(340px,calc(100vw - 28px));padding:16px;background:#fff;border:2px solid #b8d0d7;border-radius:18px;box-shadow:0 12px 32px #14374630}
.accessibility-menu>strong{font-size:21px}
.accessibility-menu>span{font-size:18px;font-weight:700;color:#465f6b}
.font-size-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.accessibility-menu button{min-width:0;min-height:50px;padding:8px 10px;border-radius:12px;font-size:17px;line-height:1.2}
.accessibility-menu button[aria-pressed="true"]{background:#dcefeb;border-color:#19766f;box-shadow:inset 0 0 0 2px #19766f}
.prompt-tools{display:flex;justify-content:flex-end;margin:-7px 0 8px}
.prompt-tools button{min-height:60px;padding:8px 14px;font-size:19px}
.exit-dialog{width:min(520px,calc(100vw - 32px));max-width:520px;padding:0;border:2px solid #b9d1d8;border-radius:22px;background:#fff;color:#173b4d;box-shadow:0 18px 60px #0d273a50}
.exit-dialog::backdrop{background:#15344780;backdrop-filter:blur(2px)}
.exit-dialog-content{padding:24px}
.exit-dialog-content h2{margin:0 0 12px;font-size:30px;line-height:1.25}
.exit-dialog-content p{margin:0 0 20px;font-size:22px;line-height:1.45}
.exit-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.exit-dialog-actions button{min-height:66px;font-size:20px}
.danger-button{background:#a82d27;border-color:#8e211c;color:#fff}
.diff-hint-ring{position:absolute;z-index:2;width:clamp(48px,10vw,76px);height:clamp(48px,10vw,76px);transform:translate(-50%,-50%);border:5px solid #ffce42;border-radius:50%;background:#fff5b833;box-shadow:0 0 0 6px #173b4d25;animation:hint-pulse 1.1s ease-in-out infinite alternate;pointer-events:none}
@keyframes hint-pulse{from{scale:.86;opacity:.7}to{scale:1.12;opacity:1}}
body.high-contrast{background:#fff;color:#000}
body.high-contrast .panel,body.high-contrast .tile,body.high-contrast .accessibility-menu,body.high-contrast .memory-card{background:#fff;color:#000;border-color:#222;box-shadow:none}
body.high-contrast button,body.high-contrast select,body.high-contrast input{color:#000;border-color:#222}
body.high-contrast button.primary{background:#003f46;color:#fff;border-color:#000}
body.high-contrast #play #prompt.question{background:#fff;color:#000;border-color:#111;border-left-color:#111;box-shadow:none}
body.high-contrast .sub,body.high-contrast .hint,body.high-contrast footer{color:#222}
body.high-contrast .pill{background:#fff;color:#000;border:2px solid #222}
@media(prefers-reduced-motion:reduce){.diff-hint-ring{animation:none}}
@media(max-width:500px){.accessibility-menu{right:-55px}.exit-dialog-content{padding:20px}.exit-dialog-actions{grid-template-columns:1fr}.prompt-tools{margin:-3px 0 7px}}

/* Scale menus, helper text, and controls without enlarging the exercise content. */
.question-speech-area{position:relative;order:3}
.question-speech-area #prompt.question{padding-right:72px}
#play .read-aloud-button{position:absolute;right:10px;top:50%;z-index:3;display:grid;place-items:center;transform:translateY(-50%);width:48px;min-width:48px;min-height:48px;padding:9px;border-radius:50%;background:#fff;border:2px solid #9dbfc5;color:#155e69;box-shadow:0 2px 8px #1833441a}
#play .read-aloud-button svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#play .read-aloud-button[aria-busy="true"]{opacity:.65;cursor:wait}
#play .question-speech-area #prompt.question{padding-right:68px}
@media(max-width:500px){#play .read-aloud-button{right:7px;width:44px;min-width:44px;min-height:44px;padding:8px}#play .read-aloud-button svg{width:23px;height:23px}.question-speech-area #prompt.question{padding-right:60px}}


/* 4.10 — local practice progress, app install and sharing controls. */
.journey-panel{margin:10px 0 14px;border:1px solid #d7e4e5;border-radius:15px;background:#f8fbfb}
.journey-panel>summary{padding:12px 14px;color:#194b57;font-size:19px;font-weight:800;cursor:pointer;touch-action:manipulation}
.journey-panel[open]{padding-bottom:12px}.journey-panel[open]>summary{border-bottom:1px solid #dce8e8}
#journeyStats{padding:12px 14px 4px}.journey-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.journey-metrics>div{display:grid;gap:3px;padding:10px 8px;border-radius:12px;background:#eaf4f1;text-align:center}
.journey-metrics strong{font-size:25px;color:#176a75}.journey-metrics span{font-size:14px;line-height:1.2;color:#465f68}
.journey-chart{height:118px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:9px;margin:14px 3px 10px;padding:4px 2px 0;border-bottom:1px solid #cddddd}
.journey-day{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;color:#526873;font-size:14px}
.journey-bar{width:min(34px,70%);min-height:5px;border-radius:7px 7px 2px 2px;background:linear-gradient(#4b9b83,#218579)}
.clear-history-button{min-height:44px;padding:8px 12px;font-size:15px;border-radius:11px}
.privacy-note{margin:7px 14px 0;color:#61747b;font-size:14px;line-height:1.4}
@media(max-width:650px){.journey-metrics{gap:5px}.journey-metrics>div{padding:8px 4px}.journey-metrics strong{font-size:22px}.journey-metrics span{font-size:12px}.journey-chart{gap:5px}}

.difficulty-note{margin:10px 0 0;padding:11px 13px;border-left:5px solid #65a77c;border-radius:10px;background:#eef7ef;color:#28583a;font-size:18px;font-weight:700;line-height:1.4}


/* Home greeting shares the main heading row; activity titles are separated from content. */
.home-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.home-heading-copy{flex:1 1 auto;min-width:0}
.home-heading-copy h2{margin-bottom:6px}
.home-heading-copy p{margin:0}
.home-heading>.participant-entry{flex:0 0 auto;margin:0;padding:0;border:0;background:transparent}
.home-heading>.participant-entry>summary{margin-left:auto}
#setupTitle{padding-bottom:10px;border-bottom:3px solid #d8e1e3;margin-bottom:14px}
#play #kind{padding-bottom:8px;border-bottom:2px solid #d8e1e3}
@media(max-width:700px){
  .home-heading{align-items:flex-start;gap:8px}
  .home-heading-copy h2{font-size:23px}
  .home-heading>.participant-entry>summary{max-width:190px;white-space:normal;text-align:right;line-height:1.2}
}
@media(max-width:450px){
  .home-heading{flex-wrap:wrap}
  .home-heading-copy{flex-basis:100%}
  .home-heading>.participant-entry{width:100%}
  .home-heading>.participant-entry>summary{margin-left:auto;max-width:100%}
}


/* Reveal correct positions beside each chosen routine step after checking. */
#play .step-list .step{grid-template-columns:42px minmax(0,1fr) 42px}
#play .step-list .step-label{min-width:0}
.order-correct-number{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#d5f1df;border:2px solid #16834d;color:#075d32;font-size:21px;font-weight:900;line-height:1}
.order-step-correct{border-color:#16834d!important;background:#e8f7ec!important}
.order-step-wrong{border-color:#bb4138!important;background:#fff0ed!important}
.order-step-wrong .order-number{background:#f8e2df;border-color:#bd463d;color:#8c2a24}
.order-step-correct .order-number{background:#176a75;border-color:#176a75;color:#fff}
.order-correct-number{justify-self:end}
@media(max-width:700px){#play .step-list .step{grid-template-columns:38px minmax(0,1fr) 38px;gap:8px}.order-correct-number{width:34px;height:34px;font-size:19px}}

/* Keep both header utility controls adjacent at the far right. */
.header-actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.header-actions .app-info{margin-left:0}
@media(max-width:700px){.header-actions{gap:7px}.header-actions .app-info{margin-left:0}}


/* Share and install actions live inside the information menu. */
.app-info-content{min-width:min(270px,calc(100vw - 32px));gap:9px}
.app-info-content .info-action{width:100%;min-height:46px;padding:9px 12px;border:1px solid #c8dadd;border-radius:12px;background:#edf5f4;color:#173b4d;font-size:16px;font-weight:750;text-align:center;white-space:normal}
.app-info-content .info-action:hover{background:#e1efec}
.app-info-content .info-action-status{display:block;min-height:0;margin:0;padding:0;border:0;background:transparent;color:#425e68;font-size:14px;font-weight:600;line-height:1.35;white-space:normal}
.app-info-content .info-action-status:empty{display:none}

/* Local Vietnamese fonts for generated result certificates. */
@font-face{font-family:"MemoryTest Result";src:url("../assets/fonts/NotoSans-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"MemoryTest Result";src:url("../assets/fonts/NotoSans-Bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
.settings-menu{position:relative;flex:none}
.settings-menu>summary{list-style:none;display:grid;place-items:center;width:48px;height:48px;padding:9px;border:2px solid #d2e1e4;border-radius:14px;background:#fff;color:#174f59;cursor:pointer;touch-action:manipulation}
.settings-menu>summary::-webkit-details-marker{display:none}
.settings-menu>summary svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.settings-menu>summary:hover,.settings-menu[open]>summary{background:#e8f4f2;border-color:#9fc5c5}
.settings-content{position:absolute;top:calc(100% + 9px);right:0;z-index:100;display:grid;gap:11px;width:min(390px,calc(100vw - 24px));max-height:min(78vh,760px);overflow:auto;padding:14px;border:1px solid #c8dadd;border-radius:18px;background:#fff;box-shadow:0 12px 36px #14374630;color:#19344a;overscroll-behavior:contain}
.settings-heading{position:sticky;top:-14px;z-index:1;display:flex;align-items:center;justify-content:space-between;margin:-14px -14px 0;padding:12px 14px;border-bottom:1px solid #e2ebec;background:#fff}
.settings-heading>strong{font-size:22px;color:#173b4d}
.settings-close{width:38px;min-width:38px;min-height:38px;padding:0;border-radius:50%;font-size:26px;line-height:1}
.settings-group{display:grid;gap:8px;padding:2px 0 11px;border-bottom:1px solid #e5eded}
.settings-group h3{margin:0;color:#526a76;font-size:15px;font-weight:800;letter-spacing:.02em}
.settings-label{font-size:17px;font-weight:750;color:#365b68}
.settings-content .participant-entry{margin:0;padding:0;border:0;background:transparent}
.settings-content .participant-entry>summary{width:100%;justify-content:space-between;min-height:44px;margin:0;padding:8px 10px;border:1px solid #cfdfdf;border-radius:11px;background:#f5f9f9;color:#194b57;font-size:16px;text-align:left}
.settings-content .participant-entry>summary .participant-summary-label{font-size:16px;overflow-wrap:anywhere}
.settings-content .participant-entry[open]{display:grid;gap:8px;padding:10px;border:1px solid #d5e4e5;border-radius:12px;background:#f7fafa}
.settings-content .participant-entry label{font-size:16px}
.settings-content .participant-entry input{width:100%;min-height:48px;font-size:18px}
.settings-content .participant-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center}
.settings-content .participant-controls .save-name-button{min-height:48px;padding:8px 10px;font-size:16px}
.settings-content .name-saved{font-size:14px}
.settings-content .journey-panel{margin:0;border-radius:11px;background:#f7fafa}
.settings-content .journey-panel>summary{padding:10px 11px;font-size:16px}
.settings-content .journey-panel[open]{padding-bottom:9px}
.settings-content .journey-metrics{gap:5px}
.settings-content .journey-metrics>div{padding:8px 4px}
.settings-content .journey-metrics strong{font-size:20px}
.settings-content .journey-metrics span{font-size:12px}
.settings-content .journey-chart{height:62px;margin:8px 10px 12px}
.settings-content .journey-panel .privacy-note{margin:8px 11px 0;font-size:13px}
.settings-content .clear-history-button{width:calc(100% - 22px);min-height:40px;margin:0 11px;font-size:14px}
.settings-content .font-size-options{gap:6px}
.settings-content .font-size-options button,.settings-content .settings-toggle{min-height:46px;font-size:16px}
.settings-content .settings-toggle{width:100%;text-align:left}
.settings-version{display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:#f3f8f8}
.settings-version strong{font-size:17px;color:#173b4d}
.settings-version span{font-size:14px;color:#526a76}
.settings-content .info-action{width:100%;min-height:46px;padding:9px 12px;border:1px solid #c8dadd;border-radius:12px;background:#edf5f4;color:#173b4d;font-size:16px;font-weight:750;text-align:center;white-space:normal}
.settings-content .info-action:hover{background:#e1efec}
.settings-content .info-action-status{font-size:14px;line-height:1.35;color:#425e68}
.settings-exit{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:48px;padding:9px 12px;border-color:#ead4d2;background:#fff8f7;color:#8d342e;font-size:16px;text-align:left}
.home-greeting{flex:none;max-width:45%;padding:7px 10px;border:1px solid #c9dedb;border-radius:999px;background:#eaf4f2;color:#245664;font-size:15px;font-weight:750;text-align:right;overflow-wrap:anywhere}
.home-greeting:empty{display:none}
@media(max-width:700px){.settings-content{width:min(380px,calc(100vw - 20px));max-height:78dvh}.home-greeting{max-width:48%;font-size:14px}.home-heading{align-items:center}}
@media(max-width:450px){.home-heading{flex-wrap:nowrap}.home-heading-copy{flex-basis:auto}.home-greeting{max-width:44%;padding:6px 8px;font-size:13px}.settings-content{right:-2px}}

/* 4.10.12: legible settings and journey backup controls */
.settings-help,.history-backup-status{margin:0;color:#526a76;font-size:16px;font-weight:600;line-height:1.45}
.journey-backup-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 11px}
.settings-content .journey-backup-controls button{min-height:52px;font-size:16px}
.settings-content .journey-backup-controls .clear-history-button{width:100%;margin:0}
.settings-content .history-backup-status{display:block;margin:0 11px 8px;min-height:1.4em}
.settings-content .settings-group h3{font-size:17px}
.settings-content .journey-metrics span{font-size:14px;line-height:1.3}
.settings-content .journey-panel .privacy-note{font-size:15px;line-height:1.4}
.settings-content .settings-toggle,.settings-content .font-size-options button{min-height:54px;font-size:18px}
@media(max-width:380px){.journey-backup-controls{grid-template-columns:1fr}}

/* Result screen: certificate is the main focus, with the actions directly below. */
#result .celebration{min-height:0;padding:8px 8px 12px;margin:0 0 10px}
#result .award-icon{font-size:clamp(92px,12vw,132px);line-height:1.05;margin:0 auto 4px}
#result #awardTitle{font-size:clamp(30px,4vw,44px);margin:0 0 6px}
#result .result-certificate{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
#result .result-image-preview{width:min(100%,680px);height:auto;margin:0 auto;border:1px solid #d9d0b9;border-radius:16px;box-shadow:0 9px 28px #173b4d20}
#result .result-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(100%,680px);margin:0 auto}
#result .result-actions button{min-height:70px;border-radius:16px;font-size:clamp(21px,2.2vw,26px)}
#result #downloadResultButton{background:#eef4f4;color:#173b4d;border-color:#b8ced0}
#result .home-result-button{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--mt-home);color:#fff;border-color:var(--mt-home);box-shadow:0 5px 12px rgba(139,82,0,.2)}
#result .home-result-button:hover{background:var(--mt-home-hover);border-color:var(--mt-home-hover)}
#result .home-result-button svg{width:25px;height:25px;fill:currentColor;flex:none}
#result .result-action-status{min-height:0;margin:0;text-align:center;color:#4c626d;font-size:17px;line-height:1.35}
@media(max-width:600px){#result .celebration{padding:4px 4px 8px}#result .award-icon{font-size:92px}#result .result-certificate{gap:13px}#result .result-actions{grid-template-columns:1fr;gap:10px}#result .result-actions button{width:100%;min-height:64px;font-size:22px}#result .result-image-preview{border-radius:11px}}

/* On-demand Vietnamese speech; the status occupies space only on errors. */
.speech-status{margin:0 0 10px;color:#8a4115;font-size:17px;font-weight:650;line-height:1.4}
.speech-status:empty{display:none}
.read-aloud-button.is-reading{background:#dcefe8;border-color:#21765e;color:#14503f}
.read-aloud-button.is-reading svg{fill:currentColor;stroke:none}

/* Math completion stays over the keypad, with the entered answer visible above. */
#play .math-input-area{position:relative;width:min(100%,480px);margin:0 auto 14px;isolation:isolate}
#play .math-input-area .keypad{margin:0;max-width:none;transition:opacity .15s,filter .15s}
body.math-complete #play .keypad{opacity:.25;filter:blur(1px);pointer-events:none}

body.math-mode #play{padding-bottom:18px}

#play .unified-next-row:empty{display:none}

/* Keep the hit target exactly the size of its image in both orientations. */
body.diff-mode main{max-width:1500px!important}
body.diff-mode .diff-layout{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:100%;gap:12px;align-items:start}
body.diff-mode .diff-target{min-width:0;width:100%;align-self:start}
body.diff-mode .diff-target img{display:block;width:100%;height:auto;max-height:none}
@media(min-width:700px),(min-width:560px) and (orientation:landscape){
  body.diff-mode .diff-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(orientation:landscape) and (min-width:560px) and (max-height:600px){
  body.diff-mode main{padding:8px 10px}
  body.diff-mode #play{padding:10px 12px}
  body.diff-mode .diff-layout{max-width:calc(314vh - 534px);gap:10px}
  body.diff-mode #play #kind{font-size:19px;margin-bottom:4px}
  body.diff-mode #play .play-toolbar{margin-bottom:5px}
  body.diff-mode #play .progress{height:7px;margin-bottom:5px}
  body.diff-mode #play #prompt.question{font-size:16px;padding:6px 10px;margin:3px 0 6px}
}
@media(prefers-reduced-motion:reduce){#play .math-input-area .keypad{transition:none}}

/* Shared feedback component: all ten activities and story subquestions. */
#play #diffPopup{display:none;position:relative;order:4;align-self:center;width:min(100%,520px);max-width:100%;margin:14px auto 0;padding:16px;border:1px solid #dfd1a1;border-radius:20px;background:var(--mt-popup);box-shadow:0 9px 30px #173b4d2b;box-sizing:border-box;overflow:auto;animation:none}
#play #diffPopup.visible{display:flex;flex-direction:column;gap:16px}
#play #diffPopupMessage{width:100%;text-align:center;font-size:clamp(18px,2vw,23px);line-height:1.35;font-weight:850;color:var(--mt-good)}
#play #diffPopup.answer-incorrect #diffPopupMessage{color:var(--mt-error)}
#play #diffPopupActions{width:100%}
#play #diffPopupActions #next{width:100%;min-height:60px;font-size:23px;border-radius:14px}
#play .feedback-close{position:absolute;right:8px;top:6px;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:#4a5960;font-size:32px;line-height:1;border-radius:50%}
#play .feedback-close:hover{background:#e8e0c9}
#play .reopen-feedback{display:block;margin:14px auto 0;min-height:48px}
body.feedback-open #play #feedback,body.feedback-complete #play .unified-next-row{display:none!important}

body.feedback-complete #play .math-check-row,body.feedback-complete #play .order-reset-row,body.feedback-complete #play .diff-actions{display:none!important}
body.math-complete:not(.feedback-open) #play .keypad{opacity:1;filter:none}
body.feedback-complete #play{padding-bottom:18px!important}
.home-result-button,#play .home-result-button,#setup .home-result-button,.settings-content .home-result-button,#exitDialog .home-result-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--mt-home);color:#fff;border:1px solid var(--mt-home);box-shadow:0 5px 12px rgba(139,82,0,.2);border-radius:14px;min-height:52px;padding:10px 16px;font-weight:750}
.home-result-button svg{width:25px;height:25px;fill:currentColor;flex:none}
.home-result-button:hover,#play .home-result-button:hover,#setup .home-result-button:hover,.settings-content .home-result-button:hover,#exitDialog .home-result-button:hover{background:var(--mt-home-hover);border-color:var(--mt-home-hover)}
#play .home-result-button.exit-button{font-size:17px;min-height:44px;padding:7px 11px}
#play .home-result-button.exit-button svg{width:21px;height:21px}
@media(max-width:500px){#play #diffPopup{padding:14px 10px}#play #diffPopup.visible{gap:12px}#play #diffPopupMessage{font-size:18px}}

body.high-contrast #play #diffPopup{background:#fff;border:2px solid #111;backdrop-filter:none;box-shadow:0 4px 18px #0004}
body.high-contrast #play #diffPopupMessage{color:#07582f}
body.high-contrast #play #diffPopup.answer-incorrect #diffPopupMessage{color:#a02018}
body.high-contrast .home-result-button,body.high-contrast #play .home-result-button,body.high-contrast #setup .home-result-button,body.high-contrast .settings-content .home-result-button,body.high-contrast #exitDialog .home-result-button{background:var(--mt-home-hover);color:#fff;border:2px solid #111}

/* Flexible text containers at all three text sizes. */
#play .question,#play .memory-card,#play .choice,#play .step-label,.home-grid .tile-copy strong,#play #diffPopupMessage{overflow-wrap:anywhere;word-break:normal}
#play .choice,#play .step{height:auto}
#play .math-box,#play .sequence-box{height:auto;min-height:1.65em;min-width:1.6em;padding:.12em .2em}
#play .math-equation{gap:.2em}
#play .story-question{line-height:1.4}
#play .read-aloud-button,.settings-close,.feedback-close{flex-shrink:0}
.journey-detail-heading{margin:12px 0 5px;font-size:18px}
.journey-detail-table{border-collapse:collapse;width:100%;font-size:16px;line-height:1.4}
.journey-detail-table caption{text-align:left;margin-bottom:8px;color:#526a76}
.journey-detail-table th,.journey-detail-table td{padding:10px 5px;border-bottom:1px solid #d8e4e4;vertical-align:top}
.journey-detail-table th{text-align:left;font-weight:650}
.journey-detail-table td{text-align:right;white-space:nowrap;font-weight:800}
.journey-detail-note{font-size:15px;line-height:1.5;color:#526a76}
#clearHistoryDialog .danger-button{background:#a82d27;border-color:#8e211c;color:white}
#play .choice:disabled,#play .step:disabled{opacity:1}
button:focus-visible,summary:focus-visible{outline:4px solid var(--mt-focus);outline-offset:3px}
@media(max-width:420px){.exit-dialog-actions{grid-template-columns:1fr}.settings-content{padding:12px}.participant-controls{flex-wrap:wrap}.participant-controls input{flex:1 1 170px}}
@media(prefers-reduced-motion:reduce){.progress div,.keypad{transition:none!important}}

/* Results never overlap the material being reviewed. */
body.feedback-open #play #answer{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;scroll-padding:10px;padding:4px;min-height:0;-webkit-overflow-scrolling:touch}
#play .answer-review-hint{order:3;margin:6px 0;color:#526a76;font-size:16px;text-align:center}
#play #diffPopupMessage{padding-right:40px;min-height:32px}
#play #diffPopup .feedback-close{top:8px;right:7px}
body.feedback-open.math-complete #play .keypad{display:grid;opacity:.3;filter:blur(.5px);pointer-events:none}
body.feedback-open.math-complete #play .math-hint{opacity:.5}
body.feedback-open #play .choice:disabled,body.feedback-open #play .step:disabled{opacity:1}
#play #answer:focus-visible{outline:3px solid var(--mt-focus);outline-offset:2px}

#play #reopenFeedback{order:4}

/* Five fixed slots keep arithmetic on one line, including narrow iPhones. */
body.math-mode #play .question-speech-area{display:flex;flex-direction:column;align-items:stretch}
body.math-mode #play .question-speech-area #prompt.question{width:100%;padding:12px 8px;margin-bottom:8px}
body.math-mode #play .math-equation{display:grid;grid-template-columns:minmax(0,1fr) .65em minmax(0,1fr) .65em minmax(0,1.2fr);align-items:center;gap:clamp(3px,1vw,8px);width:100%;font-size:clamp(24px,7.8vw,58px);line-height:1.2;white-space:nowrap}
body.math-mode #play .math-equation .math-box{min-width:0;width:100%;min-height:1.65em;padding:.12em .08em;border-width:3px;border-radius:14px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.025em;overflow-wrap:normal;word-break:normal}
body.math-mode #play .question-speech-area .read-aloud-button{position:static;transform:none;align-self:flex-end;margin:0 2px 8px}

/* Shared viewport layout: controls / scrollable lesson / reserved feedback row. */
#play.panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;height:var(--play-height,calc(100vh - 16px));min-height:0;overflow:hidden;padding:12px!important;margin-bottom:8px}
#play .play-heading{order:0;min-width:0}
#play #kind{margin:0 0 4px;line-height:1.2;font-size:21px}
#play .play-toolbar{margin:0;gap:8px;flex-wrap:nowrap}
#play #counter{font-size:16px;padding:6px 10px;white-space:nowrap}
#play .home-result-button.exit-button{font-size:16px;min-height:40px;padding:6px 10px;white-space:nowrap}
#play .progress{height:6px;margin:6px 0 0}
#play .play-content{order:1;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;padding:3px 4px 12px;scroll-padding:10px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#play #diffPopup{order:2;align-self:end;width:min(100%,560px);margin:0 auto;padding:10px;max-height:45vh}
#play #diffPopup.visible{gap:8px}
#play #diffPopupMessage{font-size:clamp(18px,2vw,23px);line-height:1.25;padding-right:38px;min-height:32px}
#play #diffPopupActions #next{display:flex;justify-content:center;align-items:center;gap:8px;font-size:clamp(18px,4.5vw,23px);min-height:52px;padding:9px 12px;white-space:nowrap}
#play .next-label{white-space:nowrap}
#play .next-arrow{flex-shrink:0;white-space:nowrap}
#play .play-content:focus-visible{outline:3px solid var(--mt-focus);outline-offset:-3px}
body.feedback-open #play #answer{overflow:visible;padding:0;max-height:none!important;filter:none}
#play .question-speech-area,body.math-mode #play .question-speech-area{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto auto;gap:5px 8px;align-items:center}
#play .question-caption{grid-row:1;grid-column:1;font-size:16px;color:#526a76;font-weight:650}
#play .question-speech-area #prompt.question,body.math-mode #play .question-speech-area #prompt.question{order:0;grid-column:1/-1;grid-row:2;width:100%;margin:0 0 8px;padding:10px 12px}
#play .question-speech-area .read-aloud-button,body.math-mode #play .question-speech-area .read-aloud-button{position:static;order:0;grid-row:1;grid-column:2;transform:none;margin:0;align-self:center;justify-self:end;width:44px;min-width:44px;min-height:44px}
#play .object-photo{max-height:clamp(130px,30vh,300px);width:min(100%,420px);height:auto;object-fit:contain}
#play .photo{margin:7px auto}
#play .clock-face{width:min(64vw,300px,42vh);height:min(64vw,300px,42vh);aspect-ratio:1}
#play .clock-num{font-size:clamp(16px,2vw,24px)}
.diff-zoom-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:3px 0 9px}
#play .diff-zoom-controls button{min-height:44px;min-width:44px;padding:6px 10px;font-size:18px}
#diffZoomLabel{min-width:54px;text-align:center;font-size:17px;font-weight:700}
.diff-photo-viewport{min-width:0;width:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:9px}
body.diff-mode .diff-photo-viewport .diff-target{min-width:100%;max-width:none}
.diff-target:focus{outline:4px solid var(--mt-focus);outline-offset:-4px}
.diff-remote-cursor{position:absolute;z-index:4;width:26px;height:26px;border:3px solid #fff;border-radius:50%;background:#0d3b5266;box-shadow:0 0 0 3px #eaa630;transform:translate(-50%,-50%);pointer-events:none}
body.remote-navigation button:focus,body.remote-navigation summary:focus,body.remote-navigation select:focus{outline:4px solid var(--mt-focus);outline-offset:2px;box-shadow:0 0 0 6px #19344a33}
body.tv-mode #play .choice,body.tv-mode #play .step{font-size:28px;min-height:64px}
body.tv-mode .home-grid .tile-copy strong{font-size:25px}
body.tv-mode .home-grid .tile small{font-size:19px}
body.tv-mode #play #prompt.question{font-size:30px}
@media(max-height:500px){#play.panel{gap:5px;padding:8px!important}#play #kind{font-size:18px;margin-bottom:2px}#play .home-result-button.exit-button{min-height:36px}#play #counter{padding:4px 8px}#play #diffPopup{padding:7px;max-height:44vh}#play #diffPopup.visible{gap:5px}#play #diffPopupActions #next{min-height:44px}#play .question-speech-area #prompt.question{padding:7px 10px}}

.diff-remote-help{display:none;font-size:16px;text-align:center;color:#526a76;margin:6px 0}
body.tv-mode .diff-remote-help,body.remote-navigation .diff-remote-help{display:block}

#play .play-scroll-hint{display:block;color:#526a76;font-size:15px;line-height:1.3;margin-top:5px}
@media(max-height:380px) and (min-width:560px){
 #play .play-heading{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;align-items:center}
 #play .play-toolbar{display:contents}
 #play #kind{grid-column:1;grid-row:1;margin:0}
 #play #counter{grid-column:2;grid-row:1;padding:4px 7px}
 #play .play-heading .exit-button{grid-column:3;grid-row:1}
 #play .play-heading .progress{grid-column:1/-1;grid-row:2;height:4px;margin:0}
 #play .play-scroll-hint{grid-column:1/-1;grid-row:3;margin:0;font-size:14px}
}
/* Profiles and voluntary routines stay inside Settings; home keeps ten fixed tiles. */
.profile-controls{display:grid;gap:8px;min-width:0}.profile-controls select,.settings-content #favoriteActivity,.settings-content #weeklyGoal{width:100%;min-width:0}
.profile-controls details>summary{padding:8px 10px;min-height:44px;border:1px solid #c8dadd;border-radius:10px;cursor:pointer}
.profile-controls details[open]{display:grid;gap:7px}.profile-controls input{width:100%;min-width:0}
#personalStatus:empty,#homePersonalStatus:empty{display:none}.home-personal-status{font-size:17px;color:#8a4115;line-height:1.4}
.settings-content .quiet-action{font-size:16px;min-height:44px;background:#fff;border-color:#d5e1e3;box-shadow:none}
.legacy-history{border:1px solid #d5c38a;background:#fff9e7;padding:10px;border-radius:12px;font-size:17px}
.resume-card,.routine-notice{border:1px solid #bcd4d0;background:#edf7f2;border-radius:14px;padding:12px;margin:10px 0}
.resume-card p,.routine-notice p{font-size:17px;line-height:1.4;margin:5px 0 9px}.resume-card button,.routine-notice button{min-height:48px;font-size:18px;padding:8px 12px}
.favorite-tile{border-color:#b68c36!important}.favorite-label{display:block;color:#8b5200;font-size:15px;font-weight:750;margin-top:3px}
.participation-garden{margin:10px 0;padding:10px;background:#f3f8ef;border-radius:12px}.participation-garden>span{font-size:23px;letter-spacing:2px}.participation-garden p{font-size:16px;line-height:1.4;margin:5px 0}
.reminder-check{display:flex;gap:8px;align-items:center}.reminder-check input{width:24px;height:24px;flex:none}.settings-content input[type=time]{font-size:21px;min-height:48px}
.learning-tools,.learning-review{margin:10px 0 4px}.learning-hint,.learning-review{padding:12px;border:1px solid #bcd5cc;background:#f0f7ef;border-radius:12px}
.learning-hint{font-size:20px;font-weight:650;line-height:1.5;margin-top:8px}.learning-review p{font-size:20px;line-height:1.45;margin:0 0 8px}
#learningReview #firstAttemptNote{font-size:17px;color:#526a76}.learning-review button,.learning-tools button{min-height:48px;font-size:19px}
body.feedback-open #retryQuestionButton{display:none!important}#personalDialog .danger-button{background:#a82d27;color:#fff;border-color:#8e211c}
body.high-contrast .learning-review,body.high-contrast .learning-hint,body.high-contrast .resume-card,body.high-contrast .routine-notice{background:#fff;border:2px solid #111;color:#000}
@media(max-width:420px){.resume-card .row{display:grid;grid-template-columns:1fr}.settings-content .profile-controls details input{font-size:18px}}

.calendar-tv-note{display:none;font-size:16px;line-height:1.4}body.tv-mode #calendarReminderButton{display:none}body.tv-mode .calendar-tv-note{display:block}

/* 4.11.1: a full page for personal progress, outside the settings popover. */
.home-person{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:45%;min-width:0}
.home-person .home-greeting{max-width:100%;font-size:16px}
.change-person-link{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:5px 8px;background:transparent;border:0;box-shadow:none;color:#176a75;font-size:15px;font-weight:650;text-decoration:underline;text-underline-offset:3px;white-space:normal}
.change-person-link:hover{background:#e7f2f0}
body[data-screen=myPage] main{max-width:1160px}
.mypage-panel{padding:24px;overflow-wrap:anywhere}
.mypage-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid #d8e5e5}
.mypage-heading h2{font-size:30px;margin:0;line-height:1.25}.mypage-eyebrow{margin:0 0 5px;color:#54727b;font-size:16px}
.mypage-person-card{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0;padding:20px;background:#eef7f4;border:1px solid #c7e0d8;border-radius:18px}
.mypage-person-card h3{font-size:25px;margin:0 0 8px}.mypage-person-card p{margin:5px 0;font-size:18px;line-height:1.5}
.mypage-person-card .mypage-device-note{font-size:14px;color:#527079}.mypage-device-note span{font-family:monospace;word-break:break-all}
.person-switcher{padding:20px;border:2px solid #bed8d5;border-radius:16px;background:#fafdfc;margin:16px 0}
.person-switcher h3{font-size:23px;margin:0 0 12px}.person-switcher p{font-size:18px;line-height:1.5}.person-switcher label{display:block;font-size:19px;font-weight:700;margin:16px 0 8px}
.person-switcher .participant-controls{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}.person-switcher input{flex:1 1 220px;min-width:0;font-size:22px}.person-switcher select{font-size:21px;width:100%}.person-switcher .quiet-action{display:block;margin-top:12px}
.personal-page-status{color:#176a75;font-size:19px;line-height:1.5}.personal-page-status:empty{display:none}
.progress-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}
.progress-overview>div{display:flex;flex-direction:column;gap:5px;padding:20px 12px;border:1px solid #cddfe0;border-radius:16px;background:#f5f9fb;text-align:center}
.progress-overview strong{font-size:35px;color:#176a75;line-height:1.1}.progress-overview span{font-size:17px;line-height:1.4}
.progress-block{margin:26px 0}.progress-block h3{font-size:25px;margin:0 0 12px;line-height:1.3}.progress-note{font-size:17px;color:#526b77;line-height:1.5}
.progress-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.progress-week-day{display:flex;flex-direction:column;gap:6px;text-align:center;padding:13px 4px;border:1px solid #d8e3e5;border-radius:12px;background:#f9fbfb}.progress-week-day span{font-size:16px}.progress-week-day strong{font-size:24px}.progress-week-day small{font-size:13px}.progress-week-day.has-practice{background:#e8f4eb;border-color:#9ac5aa;color:#185d35}
.activity-progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.activity-progress-card{border:1px solid #d6e2e5;border-radius:16px;padding:18px;background:#fafcfd;min-width:0}.activity-progress-card.participated{background:#f1f8f5;border-color:#b8d6cd}.activity-progress-title{display:flex;gap:10px;align-items:center}.activity-progress-title>span{font-size:29px}.activity-progress-card h4{font-size:22px;margin:0}.activity-progress-card p{font-size:18px;margin:10px 0;line-height:1.5}.activity-progress-card .activity-state{font-weight:750;color:#256451}.activity-progress-card button{font-size:18px;min-height:48px;margin-top:5px}.activity-progress-card .progress-note{font-size:16px}
.progress-filters{display:grid;grid-template-columns:1fr 1fr;gap:14px}.progress-filters label{display:flex;flex-direction:column;gap:8px;font-size:18px;font-weight:700}.progress-filters select{width:100%;font-size:19px;min-width:0}
.history-list{display:grid;gap:10px}.history-entry{border:1px solid #cbdcde;border-radius:14px;background:#fff;min-width:0}.history-entry>summary{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:18px;cursor:pointer;list-style:none}.history-entry>summary:before{content:'›';font-size:26px;flex:none;color:#176a75}.history-entry[open]>summary:before{content:'⌄'}.history-entry summary>span:first-of-type{flex:1;min-width:0}.history-entry summary strong{font-size:21px;line-height:1.4}.history-date{display:block;font-size:16px;color:#566e77;margin-top:5px}.history-score{flex:none;font-size:27px;font-weight:800;text-align:right;color:#176a75}.history-score small{display:block;font-size:13px;font-weight:600}.history-entry-body{padding:0 18px 18px;border-top:1px solid #e0e9e9}.history-entry-body p{font-size:17px;line-height:1.6}.history-entry-body h5{font-size:20px;margin:18px 0 10px}.session-skill-list{list-style:none;padding:0;margin:12px 0}.session-skill-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #e0e9e9;font-size:18px}.session-measures{padding-left:26px}.session-measures li{padding:10px 0;font-size:18px;border-bottom:1px solid #e0e9e9}.session-measures span,.session-measures small{display:block;margin-top:5px;font-size:17px}.session-measures small{font-size:14px;color:#526b77}.progress-empty{font-size:19px;background:#f4f8f9;border-radius:14px;padding:22px;line-height:1.6}.history-pagination{justify-content:center;margin-top:16px}
.mypage-options{margin:16px 0;padding:16px;border:1px solid #d0dfe2;border-radius:14px;background:#f8fbfb}.mypage-options>summary{cursor:pointer;font-weight:750;font-size:20px;min-height:32px}.mypage-options p{font-size:17px;line-height:1.5}.mypage-options button{font-size:18px}.mypage-preferences{display:grid;gap:10px;margin-top:16px}.mypage-preferences h3{font-size:22px;margin:8px 0}.mypage-preferences label{font-size:19px;font-weight:650}.mypage-preferences select,.mypage-preferences input[type=time]{width:100%;font-size:21px}.quiet-action{color:#496572;background:#fff;border:1px solid #cddde0;font-size:17px;min-height:44px;padding:8px 12px;box-shadow:none}.saved-drafts{padding:18px;border-radius:16px;border:1px solid #e3cf99;background:#fff9e9}.saved-drafts button{margin:5px 8px 5px 0}.mypage-panel .privacy-note{font-size:16px;line-height:1.6}.mypage-menu-link{display:flex!important;align-items:center;justify-content:space-between;gap:10px;text-align:left!important}
@media(max-width:700px){.mypage-panel{padding:16px}.mypage-heading{gap:10px}.mypage-heading h2{font-size:25px}.mypage-heading .home-result-button{padding:9px 12px;font-size:16px;flex:none}.mypage-person-card{flex-direction:column;align-items:flex-start;padding:16px}.progress-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.progress-overview>div{padding:16px 8px}.progress-overview strong{font-size:30px}.activity-progress-grid{grid-template-columns:1fr}.progress-week{gap:4px}.progress-week-day{padding:10px 2px}.progress-week-day small{font-size:11px}.home-person{max-width:45%}.home-person .home-greeting{font-size:14px}.change-person-link{font-size:14px;justify-content:flex-end;text-align:right}}
@media(max-width:420px){.mypage-heading{flex-wrap:wrap}.mypage-heading .home-result-button{min-height:48px}.person-switcher{padding:14px}.participant-controls button{width:100%}.progress-filters{grid-template-columns:1fr}.history-entry>summary{padding:12px;gap:8px}.history-entry summary strong{font-size:19px}.history-score{font-size:24px}.session-skill-list li{flex-direction:column;gap:4px}.mypage-panel .journey-backup-controls{margin:12px 0;grid-template-columns:1fr}.home-person{max-width:43%}.home-person .home-greeting{font-size:13px}.change-person-link{font-size:13px;padding:4px 0}}
body.high-contrast .mypage-person-card,body.high-contrast .progress-overview>div,body.high-contrast .activity-progress-card,body.high-contrast .progress-week-day,body.high-contrast .mypage-options,body.high-contrast .history-entry,body.high-contrast .person-switcher{background:#fff;color:#111;border:2px solid #111}body.high-contrast .mypage-panel p,body.high-contrast .activity-state,body.high-contrast .history-score,body.high-contrast .history-date,body.high-contrast .change-person-link,body.high-contrast .progress-overview strong{color:#111}body.high-contrast .progress-week-day.has-practice{background:#e4f1df}
.home-person{align-self:flex-start}.progress-shortcuts{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 20px}.progress-shortcuts button{font-size:18px;min-height:48px}.progress-block h3{scroll-margin-top:20px}.mypage-options .mypage-device-note{font-size:14px;color:#526b77}
@media(max-width:760px){.home-person{align-self:flex-end}}

/* Compact identity action: distinct from the pale profile card. */
.switch-person-compact{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:44px!important;padding:7px 12px!important;background:#fff!important;border:1px solid #a9c5ca!important;border-radius:999px!important;color:#176a75!important;font-size:16px!important;font-weight:650!important;box-shadow:0 2px 5px #173b4d0a!important;white-space:nowrap}
.switch-person-compact:hover{background:#f5fafb!important;border-color:#176a75!important}
body.high-contrast .switch-person-compact{color:#111!important;border:2px solid #111!important}
/* Review follow-up: light encouragement, accessible content controls. */
.home-week{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:13px 16px;margin:12px 0;border:1px solid #d3e3d7;border-radius:14px;background:#f5f9f1}.week-mini-copy{display:flex;flex-direction:column;gap:5px}.week-mini-copy strong{font-size:18px}.week-mini-copy>span{font-size:16px;line-height:1.4}.week-flowers{letter-spacing:3px}.home-week button{font-size:16px;min-height:46px}.variety-suggestion{font-size:16px;color:#526b77;line-height:1.4;margin:6px 0 14px}.variety-suggestion:empty{display:none}.variety-suggestion button{display:inline;color:#176a75;background:none;box-shadow:none;border:0;padding:4px 2px;min-height:44px;font-size:16px;text-decoration:underline;text-underline-offset:4px}
.learning-voice-row{display:flex;gap:10px;align-items:flex-start;min-width:0}.learning-voice-row>p,.learning-voice-row>.learning-hint{flex:1;min-width:0;margin:0}.content-speaker{width:46px;height:46px;min-height:46px;flex:none;padding:9px;background:#fff;border:1px solid #91b7c2;border-radius:50%;color:#176a75;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 5px #173b4d13}.content-speaker svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.content-speaker.is-reading{background:#e5f3ed;border-color:#237b62}.learning-tools{display:grid;gap:10px}.learning-review .learning-voice-row{margin-bottom:8px}
.welcome-panel{max-width:760px;margin-left:auto;margin-right:auto;padding:28px}.welcome-panel h2{font-size:32px;line-height:1.35;margin:24px 0}.welcome-panel p,.welcome-panel label{font-size:23px;line-height:1.6}.welcome-panel input{display:block;width:100%;font-size:26px;margin:12px 0}.welcome-panel .welcome-sample{font-weight:750;padding:20px;background:#edf5f2;border-radius:16px}.welcome-audio-sample{display:flex;gap:14px;align-items:center}.welcome-panel .row{margin-top:22px}.people-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}.person-choice{display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;min-height:110px;padding:12px;font-size:20px}.person-choice>span{font-size:30px}.person-choice small{font-size:14px}.person-choice.current-person{border:2px solid #2a7f74;background:#e8f4ed}.participation-badge{font-size:18px;border-radius:10px;padding:8px;background:#fff6d9;color:#695124}.result-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.result-actions button{width:100%;min-height:54px}#weeklyImagePreview{display:block;width:min(100%,600px);height:auto;margin:18px auto;border:1px solid #d4c294;border-radius:18px}.reminder-guide{padding-left:24px}.reminder-guide li{margin:16px 0;font-size:18px;line-height:1.5}.reminder-guide strong,.reminder-guide span{display:block}.reminder-guide strong{margin-bottom:6px}
@media(max-width:600px){.home-week{flex-direction:column;align-items:stretch;padding:12px}.home-week button{align-self:flex-end}.welcome-panel{padding:18px}.welcome-panel h2{font-size:27px}.welcome-panel p,.welcome-panel label{font-size:21px}.result-actions{grid-template-columns:1fr!important}.people-choices{grid-template-columns:1fr 1fr}}
body.high-contrast .home-week,body.high-contrast .welcome-panel .welcome-sample,body.high-contrast .participation-badge{color:#111;background:#fff;border:2px solid #111}
.week-mini-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px}.week-mini-copy>span:last-child{grid-column:1/-1}.week-flowers{max-width:190px;overflow-wrap:anywhere}
@media(max-width:600px){.home-week{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.home-week button{max-width:120px;padding:7px 10px;font-size:14px}.week-mini-copy strong{font-size:16px}.week-mini-copy>span{font-size:14px}.week-flowers{max-width:100px;letter-spacing:1px}}
body.feedback-open.math-complete #play .keypad{opacity:.5;filter:grayscale(.2);pointer-events:none}#myPageTitle:focus,#welcomeTitle:focus{outline:none}

.data-conflict{position:sticky;top:0;z-index:1000;padding:18px;background:#fff4d5;border:2px solid #9b6a13;border-radius:14px;color:#513700}.data-conflict p{font-size:18px}.home-progress-summary,.release-help{padding:12px;border:1px solid #cedee0;border-radius:12px;margin:12px 0}.home-progress-summary summary,.release-help summary{font-weight:700;cursor:pointer}.release-help p{font-size:17px;line-height:1.5}body:has(#dataConflict:not(.hidden)) #play,body:has(#dataConflict:not(.hidden)) #setup{pointer-events:none;opacity:.55}

/* 4.12.2: separate primary activities from personal suggestions. */
#home>.home-progress-summary{background:#eaf0f8;border-color:#cbd8e9;margin:14px 0 0;padding:16px;border-radius:16px}
#home>.home-progress-summary summary{color:#244867;min-height:44px;display:list-item;align-content:center}
#home>.home-progress-summary .home-week{background:#f8fafc}
#answer .situation-choices{grid-template-columns:minmax(0,1fr);width:100%}
#answer .situation-choices .choice{text-align:left;width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;padding:14px 18px;line-height:1.4}
#play .question-speech-area.has-situation-hint{grid-template-columns:minmax(0,1fr) 44px 44px}
#play .question-speech-area .situation-hint{grid-column:2;grid-row:1;width:44px;height:44px;min-height:44px;padding:9px;border:1px solid #d5ad50;border-radius:50%;background:#fff3cb;color:#795400;display:inline-flex;align-items:center;justify-content:center}
#play .question-speech-area.has-situation-hint .read-aloud-button{grid-column:3}
.situation-hint svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#firstAttemptNote:empty{display:none}

/* Saved session follows all practice entry points. */
.home-panel>.resume-card{margin-top:14px;margin-bottom:0}

/* 4.12.4: primary activities and quiet personal shortcuts. */
.home-secondary{margin-top:14px;display:grid;gap:8px}
#home .resume-simple{margin:0;padding:14px 16px;background:#fff8df;border:1px solid #e8d6a1;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#home .resume-simple p{margin:0;font-size:20px;line-height:1.45;color:#574b2e;flex:1 1 210px}
#home .resume-simple button{background:#fffdf4;border:1px solid #b69a52;color:#66501b;min-height:48px;font-size:20px;flex:0 0 auto}
.home-progress-link{justify-self:end;min-height:44px;color:#365f70;text-decoration:underline;text-underline-offset:4px}
.mypage-week-summary{background:#edf2f8;border:1px solid #d0dce9;border-radius:14px;padding:16px}
@media(max-width:500px){#home .resume-simple button{width:100%}.home-progress-link{justify-self:center}}

/* 4.12.5: consistent detail navigation and assistance panels. */
.detail-top{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #d5e1e4;margin-bottom:14px;padding-bottom:10px}
#setup .detail-top #setupTitle{border:0;margin:0;min-width:0}
#setup .detail-top .home-result-button,#myPage .mypage-heading .home-result-button,#play .play-heading .exit-button{font-size:16px;min-height:44px;padding:7px 11px;white-space:nowrap;flex:none}
#play .play-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px}
#play #kind{grid-column:1;grid-row:1;margin:0;border:0;min-width:0}
#play .play-toolbar{display:contents}
#play .play-heading .exit-button{grid-column:2;grid-row:1}
#play #counter{grid-column:1;grid-row:2;justify-self:start}
#play .play-heading .progress{grid-column:1/-1;grid-row:3}
#play .play-scroll-hint{grid-column:1/-1;grid-row:4}
#result .result-actions{justify-content:flex-start}
#result .result-actions .home-result-button{margin-left:auto}
#play .learning-hint,#play .learning-review{background:#f4effc;color:#3e3556;border:1px solid #cbbce5;border-radius:12px;font-size:20px;line-height:1.5}
#play .learning-hint{font-weight:500}
#play .learning-review #learningExplanation{font-size:20px;line-height:1.5}
#play .learning-voice-row{align-items:center}
body.high-contrast #play .learning-hint,body.high-contrast #play .learning-review{background:#fff3bf;color:#111;border:2px solid #111}
@media(max-width:420px){.detail-top{gap:8px}#setup .detail-top #setupTitle{font-size:23px}#play #kind{font-size:22px}#myPage .mypage-heading{flex-wrap:nowrap}.mypage-heading>div{min-width:0}}

/* 4.12.6: short navigation menu; full-width settings pages. */
.settings-content.settings-short-menu{width:min(370px,calc(100vw - 28px));max-height:calc(100vh - 110px);padding:10px;overflow-y:auto}
.settings-short-menu nav{display:grid;gap:4px}
.settings-short-menu .settings-heading{margin:0 0 6px;padding:4px 6px 8px}
.settings-short-menu .settings-menu-row{display:grid;grid-template-columns:24px minmax(0,1fr) 14px;gap:10px;align-items:center;width:100%;min-height:50px;padding:10px 12px;text-align:left;border:0;border-radius:10px;background:transparent;color:#173b4d;font-size:18px;line-height:1.35;box-shadow:none}
.settings-short-menu .settings-menu-row:hover,.settings-short-menu .settings-menu-row:focus-visible{background:#e9f2f3}
.settings-short-menu .settings-menu-row>span:first-child{font-size:22px;text-align:center;color:#326773}
.settings-short-menu .settings-menu-row strong{display:block;font-size:inherit;font-weight:750;color:#166471}
.settings-short-menu .settings-person-row{background:#f0f6f6;margin-bottom:4px}
.settings-page{max-width:1100px;margin-left:auto;margin-right:auto;padding:24px}
.settings-page .detail-top{align-items:center;margin-bottom:12px}
.settings-page h2{font-size:30px;line-height:1.3;margin:0}
.settings-page .detail-top .home-result-button{min-height:44px;padding:7px 11px;font-size:16px;white-space:nowrap}
.settings-page .settings-eyebrow{font-size:16px;margin:0 0 5px;color:#617680}
.settings-page .settings-page-intro{font-size:20px;line-height:1.55;color:#506b78;margin:0 0 20px}
.settings-category{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.settings-card{min-width:0;padding:22px;border:1px solid #d1e0e3;border-radius:16px;background:#f9fcfc}
.settings-card h3{font-size:25px;line-height:1.35;margin:0 0 16px;color:#173b4d}
.settings-card p,.settings-card li,.settings-card .settings-label,.settings-card .setting-line>span{font-size:20px;line-height:1.55}
.settings-card p{margin:10px 0}.settings-card ul,.settings-card ol{margin:10px 0;padding-left:25px}.settings-card li{margin:10px 0}
.settings-card .settings-help{font-size:18px;color:#526d79;line-height:1.55}
.settings-card .settings-help:empty{display:none}
.settings-card .settings-label{display:block;font-weight:650}
.settings-card .setting-line{display:grid;gap:10px;margin:0;padding:16px 0;border-bottom:1px solid #dce7e9}
.settings-card .setting-line:last-of-type{border-bottom:0;padding-bottom:4px}
.settings-card .font-size-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.settings-page .settings-card button{min-height:48px;padding:10px 14px;font-size:18px;line-height:1.4;white-space:normal;border-radius:10px;width:auto}
.settings-page .settings-card .settings-toggle{text-align:left;justify-self:start;background:#fff}
.settings-page .settings-card .font-size-options button{width:100%;padding:10px 6px}
.settings-card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.settings-danger-card{background:#fffafa;border-color:#e8cccc}
.settings-page .settings-danger-action{color:#9e302b;border-color:#cb8b85;background:#fff}
.settings-page [data-settings-content="version"]{grid-template-columns:minmax(0,1fr)}
body.high-contrast .settings-card,body.high-contrast .settings-menu-row{background:#fff;color:#111;border:1px solid #111}
body.high-contrast .settings-card .settings-help,body.high-contrast .settings-card h3{color:#111}
@media(max-width:800px){.settings-category{grid-template-columns:minmax(0,1fr)}.settings-page{padding:18px}.settings-card{padding:18px}.settings-page h2{font-size:26px}}
@media(max-width:420px){.settings-page{padding:14px}.settings-page .detail-top{align-items:flex-start;gap:8px}.settings-page h2{font-size:24px}.settings-page .detail-top .home-result-button{padding:7px 9px}.settings-card{padding:16px}.settings-card-actions{display:grid;grid-template-columns:minmax(0,1fr)}.settings-page .settings-card-actions button{width:100%}.settings-content.settings-short-menu{width:min(350px,calc(100vw - 24px))}}

.header-actions .settings-menu>summary{width:76px;height:76px;min-width:76px;padding:8px 6px;display:flex;flex-direction:column;justify-content:center;gap:3px;border:2px solid #a9c8ce;border-radius:17px;background:#fff}
.header-actions .settings-menu>summary svg{width:34px;height:34px;flex:none;stroke-width:1.9}
.settings-trigger-label{font-size:15px;font-weight:700;line-height:1.15;color:#174f59;white-space:nowrap}
.settings-menu>summary:focus-visible{outline:4px solid #eaa630;outline-offset:3px}

.settings-page .settings-card .settings-help{font-weight:400}
.settings-page .settings-card .font-size-options button[aria-pressed="true"],.settings-page .settings-card .settings-toggle[aria-pressed="true"]{background:#def0ec;border-color:#277e74;box-shadow:inset 0 0 0 1px #277e74}
body.high-contrast .settings-page .settings-card button[aria-pressed="true"]{background:#173b4d;color:#fff;border-color:#111}

/* 4.12.7: final action palette. Keep these tokens in one place.
   Important colour/border rules intentionally supersede the older screen styles.
   Layout, sizing and typography remain owned by each screen. */
:root{--action-bg:#d9eaf8;--action-hover:#c5dff2;--action-ink:#1d4e73;--action-edge:#759abc;--action-shadow:#b9cddd}
button{--button-bg:var(--action-bg);--button-hover:var(--action-hover);--button-ink:var(--action-ink);--button-edge:var(--action-edge);--button-shadow:var(--action-shadow)}
button.primary{--button-bg:#1c6d76;--button-hover:#155b63;--button-ink:#fff;--button-edge:#155b63;--button-shadow:#b1cccd}
button.home-result-button{--button-bg:#fff0c4;--button-hover:#f5e0a7;--button-ink:#75520b;--button-edge:#b68a35;--button-shadow:#e9d9b2}
button.danger-button,button.settings-danger-action,button.clear-history-button,button#deleteProfileButton{--button-bg:#fde9e4;--button-hover:#f4d5cf;--button-ink:#8a3028;--button-edge:#bc766b;--button-shadow:#e6c9c1}
button[aria-pressed="true"],button.step.active,button.person-choice.current-person{--button-bg:#b8d8ee;--button-hover:#a5cce6;--button-ink:#164263;--button-edge:#3b7fa5;--button-shadow:#a8c4d8}
button.choice.correct,button.order-step-correct{--button-bg:#d8f4e3;--button-hover:#d8f4e3;--button-ink:#155333;--button-edge:#16834d;--button-shadow:#b4d8bf}
button.choice.wrong,button.order-step-wrong{--button-bg:#fce6e2;--button-hover:#fce6e2;--button-ink:#882e25;--button-edge:#b84b3c;--button-shadow:#e4c0b8}
button.favorite-tile{--button-edge:#b68c36}
button:not(.settings-menu-row):not(.feedback-close):not(.settings-close){background:var(--button-bg)!important;color:var(--button-ink)!important;border:2px solid var(--button-edge)!important;box-shadow:0 2px 0 var(--button-shadow)!important;transition:background-color .12s,border-color .12s}
button:not(.settings-menu-row):not(.feedback-close):not(.settings-close):not(:disabled):hover{background:var(--button-hover)!important}
button:not(.settings-menu-row):not(.feedback-close):not(.settings-close):not(:disabled):active{box-shadow:none!important}
button:disabled:not(.choice):not(.step){--button-bg:#edf1ef;--button-hover:#edf1ef;--button-ink:#687871;--button-edge:#acbab4;--button-shadow:transparent;opacity:1!important}
button.choice:disabled,button.step:disabled{opacity:1}
.mypage-options>summary{background:var(--action-bg)!important;color:var(--action-ink)!important;border:2px solid var(--action-edge)!important;box-shadow:0 2px 0 var(--action-shadow);font-weight:700;min-height:48px}
.mypage-options[open]>summary{background:var(--action-hover)!important;border-bottom-left-radius:0;border-bottom-right-radius:0}
.mypage-options>summary:hover{background:var(--action-hover)!important}
.settings-short-menu .settings-menu-row{background:#eff5fa!important;border:1px solid #c4d5e3!important;color:var(--action-ink)!important}
.settings-short-menu .settings-menu-row:hover,.settings-short-menu .settings-menu-row:focus-visible{background:var(--action-bg)!important}
.header-actions .settings-menu>summary{background:var(--action-bg);border-color:var(--action-edge);box-shadow:0 2px 0 var(--action-shadow)}
body.high-contrast button:where(:not(.settings-menu-row):not(.feedback-close):not(.settings-close)){--button-bg:#173b4d;--button-hover:#0c2633;--button-ink:#fff;--button-edge:#111;--button-shadow:transparent}
body.high-contrast button.choice.correct,body.high-contrast button.order-step-correct{--button-bg:#d8f4e3;--button-hover:#d8f4e3;--button-ink:#103b24;--button-edge:#0a6333}
body.high-contrast button.choice.wrong,body.high-contrast button.order-step-wrong{--button-bg:#fce6e2;--button-hover:#fce6e2;--button-ink:#6d2019;--button-edge:#922c23}
body.high-contrast .mypage-options>summary{background:#173b4d!important;color:#fff!important;border-color:#111!important}
@media(prefers-reduced-motion:reduce){button{transition:none!important}}

.mypage-options{padding:0;border:0;background:transparent}
.mypage-options>summary{padding:12px 16px;border-radius:12px;line-height:1.45;list-style-position:inside}
.mypage-options[open]{padding:0 16px 16px;border:1px solid #d0dfe2;background:#fff}
.mypage-options[open]>summary{margin:0 -16px 14px}
body.high-contrast .mypage-options:not([open]){border:0}

body.high-contrast button[aria-pressed="true"]{--button-bg:#ffe79a;--button-hover:#ffe79a;--button-ink:#111;--button-edge:#111}

/* 4.12.8: one hint icon next to the speaker, never among answer choices. */
#play .question-speech-area.has-question-hint{grid-template-columns:minmax(0,1fr) 44px 44px}
#play .question-speech-area .question-hint-icon{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:8px;border-radius:50%;flex:none}
#play .question-speech-area.has-question-hint .read-aloud-button{grid-column:3}
.question-hint-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#play .question-hint-icon[aria-expanded="true"]{--button-bg:#b8d8ee;--button-ink:#164263;--button-edge:#3b7fa5}

/* 4.12.9: compact expand/collapse controls for changing people. */
.person-switch-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.person-switch-heading h3{margin:0;min-width:0}
.person-switch-chevron{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .15s}
.person-switch-toggle[aria-expanded="true"] .person-switch-chevron{transform:rotate(180deg)}
.person-switch-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:8px;border-radius:50%;flex:none}
@media(prefers-reduced-motion:reduce){.person-switch-chevron{transition:none}}

/* 4.12.10: separate profiles and a stable progress typography hierarchy. */
#myPage{--progress-title:30px;--progress-heading:24px;--progress-body:20px;--progress-meta:18px;line-height:1.5}
#myPage h2{font-size:var(--progress-title);line-height:1.3}
#myPage h3{font-size:var(--progress-heading);line-height:1.4;margin:0 0 16px}
#myPage h4,#myPage h5,#myPage .activity-progress-title h4{font-size:22px;line-height:1.4;margin:0}
#myPage p,#myPage li,#myPage label,#myPage .week-mini-copy>span,#myPage .variety-suggestion,#myPage .session-skill-list,#myPage .progress-empty{font-size:var(--progress-body);line-height:1.55}
#myPage p{margin:10px 0}
#myPage .progress-note,#myPage .mypage-device-note,#myPage .history-date,#myPage .session-measures small,#myPage .mypage-eyebrow,#myPage .history-entry-body small{font-size:var(--progress-meta);line-height:1.5;font-weight:400}
#myPage .mypage-eyebrow{margin:0 0 5px}
#myPage button,#myPage select,#myPage .mypage-options>summary{font-size:var(--progress-body);line-height:1.45}
#myPage .mypage-heading .home-result-button{font-size:18px}
#myPage .progress-overview strong{font-size:32px;line-height:1.25}
#myPage .progress-overview span,#myPage .history-score small{font-size:var(--progress-meta);line-height:1.45}
#myPage .history-score{font-size:26px}
#myPage .progress-week-day span,#myPage .progress-week-day small{font-size:var(--progress-meta);line-height:1.4}
#myPage .progress-week-day strong{font-size:24px;line-height:1.4}
#myPage .week-mini-copy strong{font-size:22px;line-height:1.4}
#myPage .participation-badge{font-size:var(--progress-meta);line-height:1.5}
#myPage .progress-block,#myPage .mypage-week-summary{margin-top:24px}
#myPage .activity-progress-grid{gap:16px}
#myPage .activity-progress-card{display:flex;flex-direction:column;gap:8px;padding:20px}
#myPage .activity-progress-card p{margin:0}
#myPage .activity-progress-card button{margin-top:auto;align-self:flex-start}
#myPage .saved-drafts button{margin:6px 8px 6px 0}
#myPage .progress-week{gap:8px}
#myPage .progress-week-day{min-width:0;padding:12px 5px}
#myPage .home-week{gap:12px;padding:16px}
#myPage .progress-shortcuts{gap:10px;margin:18px 0}
.user-page{max-width:1100px;margin-left:auto;margin-right:auto;padding:24px;line-height:1.55}
.user-page h2{font-size:30px;line-height:1.3;margin:0}
.user-page h3{font-size:24px;line-height:1.4;margin:0 0 12px}
.user-page p,.user-page label,.user-page select,.user-page input,.user-page button,.user-page summary{font-size:20px;line-height:1.5}
.user-page .profile-eyebrow,.user-page .profile-note,.user-page .settings-help,.user-page .privacy-note,.user-page .mypage-device-note{font-size:18px;font-weight:400;line-height:1.55}
.user-page .profile-eyebrow{margin:0 0 5px;color:#607482}
.user-page .profile-person-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;background:#edf5f3;border:1px solid #c9dfd8;border-radius:16px;margin:20px 0}
.user-page .profile-person-card p{margin:8px 0}
.user-page .detail-top .home-result-button{font-size:18px;min-height:44px;padding:7px 11px;white-space:nowrap;flex:none}
.user-page .detail-top>div{min-width:0}
.user-page .person-switcher{padding:20px}
.user-page .participant-controls{display:flex;gap:10px;align-items:center}
.user-page .participant-controls input{min-width:0;flex:1}
.user-page .participant-controls button{min-height:48px}
.user-page .person-switch-icon{width:44px;height:44px;min-height:44px;padding:8px}
.user-page #profileSelect{width:100%;margin-top:8px}
.settings-content.settings-short-menu{width:min(420px,calc(100vw - 24px));background:#f1eff8;border:1px solid #bcb4d2;box-shadow:0 16px 44px #29224433;padding:12px}
.settings-short-menu .settings-menu-row{font-size:20px;background:#fff!important;border-color:#d2cbe2!important}
.settings-short-menu .settings-person-row{background:#e4e1f1!important}
.settings-short-menu .settings-heading{border-bottom-color:#c9c0da}
body.high-contrast .settings-content.settings-short-menu{background:#fff;border:2px solid #111}
body.high-contrast .user-page .profile-person-card{background:#fff;color:#111;border:2px solid #111}
@media(max-width:700px){#myPage{--progress-title:28px}#myPage .progress-week{grid-template-columns:repeat(4,minmax(0,1fr))}.user-page{padding:18px}.user-page h2{font-size:28px}.user-page .profile-person-card{flex-direction:column;align-items:flex-start}.user-page .participant-controls{flex-wrap:wrap}.user-page .participant-controls input,.user-page .participant-controls button{width:100%}}
@media(max-width:420px){.user-page{padding:14px}.user-page .person-switcher{padding:16px}#myPage .mypage-heading h2{font-size:26px}.user-page .detail-top{gap:8px}.user-page h2{font-size:26px}#myPage .activity-progress-card{padding:16px}}

#myPage .history-entry summary strong,#myPage .session-measures span,#myPage .session-skill-list strong,#myPage .session-skill-list span{font-size:var(--progress-body);line-height:1.5}

.user-page .mypage-device-note,.user-page .privacy-note{overflow-wrap:anywhere}

/* 4.12.11: every statistics group has its own heading. */
#myPage #progressOverview .progress-overview{margin:0}

/* Shared presentation rules: notices and navigation use one readable scale. */
:root{--app-nav-size:18px;--app-note-size:18px;--app-note-bg:#eef4fa;--app-note-border:#9bb4cb;--app-note-ink:#23475c}
.app-notice{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;border:1px solid var(--app-note-border);border-radius:10px;background:var(--app-note-bg);color:var(--app-note-ink);text-align:left;line-height:1.5}
.app-notice:empty{display:none}
.app-notice .notice-copy{flex:1 1 180px;font-size:var(--app-note-size);font-weight:400;overflow-wrap:anywhere}
.app-notice .notice-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1.5px solid currentColor;border-radius:50%;font-size:18px;flex:none;font-weight:700}
.app-notice[data-notice="error"]{--app-note-bg:#fff1ef;--app-note-border:#d7a6a1;--app-note-ink:#842c25}
.app-notice[data-notice="success"]{--app-note-bg:#eef7f0;--app-note-border:#99bea5;--app-note-ink:#245c38}
.app-notice[data-notice="warning"]{--app-note-bg:#fff7df;--app-note-border:#d2b56a;--app-note-ink:#6e511c}
.app-notice button{font-size:var(--app-nav-size);min-height:44px;white-space:normal}
button.home-result-button{font-size:var(--app-nav-size);min-height:44px;line-height:1.25}
.home-greeting,.home-switch-person{font-size:18px;line-height:1.4}
.progress-disclosure{border:1px solid #bad0df;border-radius:10px;padding:12px;margin:12px 0;background:#f5f8fb}
.progress-disclosure>summary{font-size:20px;font-weight:600;cursor:pointer;min-height:44px;display:list-item;align-content:center}
.activity-progress-card .progress-disclosure{background:#fff;padding:10px}
.result-fallback{padding:24px;border:2px solid #c6aa6c;border-radius:12px;background:#fffaf0;text-align:center;margin:16px auto;max-width:650px}
.result-fallback h3{font-size:26px}.result-fallback p{font-size:20px}.result-fallback .fallback-score{font-size:30px;font-weight:700;color:#176a75}
.media-unavailable{opacity:.25}
@media(max-width:600px){.home-greeting,.home-switch-person{font-size:18px}.home-heading{flex-wrap:wrap;gap:12px}.app-notice{padding:10px}.progress-disclosure{padding:10px}}
.home-person .home-greeting,.home-person .change-person-link{font-size:18px;line-height:1.4}
.home-person{max-width:48%}.home-person .change-person-link{min-height:44px;white-space:normal}
#myPage .progress-disclosure>summary{font-size:20px}
@media(max-width:450px){.home-heading{flex-wrap:wrap}.home-person{max-width:100%;margin-left:auto}.home-person .home-greeting,.home-person .change-person-link{font-size:18px}}
#setup .detail-top .home-result-button,#myPage .mypage-heading .home-result-button,#play .play-heading .exit-button,#settingsPage .detail-top .home-result-button,#userPage .detail-top .home-result-button{font-size:var(--app-nav-size);min-height:44px;line-height:1.25}
/* The progress summary is visible; only supplementary detail is expandable. */
#myPage .activity-progress-card .activity-state,#myPage .activity-progress-card>p{font-size:20px;line-height:1.5}
.feedback-form textarea{display:block;box-sizing:border-box;width:100%;font:inherit;font-size:20px;line-height:1.5;border:1px solid #8caebe;border-radius:10px;padding:12px;background:#fff;color:#173b4d;resize:vertical;min-height:150px}
.feedback-device-option{display:flex;align-items:flex-start;gap:10px;margin:16px 0;line-height:1.5;font-size:18px}
.feedback-device-option input{width:22px;height:22px;flex:none;margin-top:3px}
.feedback-technical>summary{font-size:20px;min-height:44px;cursor:pointer;align-content:center}
body.high-contrast .app-notice,body.high-contrast .progress-disclosure,body.high-contrast .result-fallback{background:#fff;color:#111;border:2px solid #111}
body.high-contrast .feedback-form textarea{background:#fff;color:#000;border:2px solid #111}
@media(max-width:600px){.feedback-actions{align-items:stretch}.feedback-actions button{flex:1 1 180px}}
/* A short start path with optional configuration, and one clear way forward. */
#setup .setup-overview{font-size:20px;line-height:1.5;color:#385a68;margin:16px 0}
#setup .setup-start-row{margin:16px 0}#setup .setup-start-row button{font-size:22px;min-height:56px;padding:12px 24px}
.practice-options{margin-top:20px;border:1px solid #9ab7cb;border-radius:12px;background:#f7f9fb}
.practice-options>summary{font-size:20px;line-height:1.5;font-weight:600;padding:12px 16px;min-height:48px;cursor:pointer;color:#1d4e73;background:#d9eaf8;border-radius:12px;box-sizing:border-box}
.practice-options-body{padding:16px}.practice-options-body .setting{margin-top:12px}
body.feedback-complete:not(.feedback-open) #play .unified-next-row{display:flex!important;order:2;position:static;box-sizing:border-box;width:100%;padding:8px 0 0;margin:0;background:#fff;border-top:1px solid #cfdee4;box-shadow:none;backdrop-filter:none;z-index:1}
body.feedback-complete:not(.feedback-open) #play .unified-next-row #next{display:flex;align-items:center;justify-content:center;gap:12px;width:min(100%,560px);min-height:56px;font-size:23px}
#play .unified-next-row.hidden{display:none!important}
#play .question-tool-guide{display:flex;gap:12px;align-items:center;justify-content:space-between;background:#f1f5f8;border:1px solid #b8ceda;border-radius:10px;padding:10px 12px;margin:10px 0}
.question-tool-guide>span{font-size:18px;line-height:1.5}.question-tool-guide button{font-size:18px;min-height:48px;flex:none}
#play .choice.correct::after{content:' ✓';font-weight:800}#play .choice.wrong::after{content:' ×';font-weight:800}
#result .result-readable-summary{font-size:22px;line-height:1.5;font-weight:600;text-align:center;color:#174f59;margin:4px auto 18px;max-width:850px}
#play .question-speech-area .read-aloud-button,#play .question-speech-area .question-hint-icon,body.math-mode #play .question-speech-area .read-aloud-button{width:48px;min-width:48px;height:48px;min-height:48px}
#play .question-speech-area{grid-template-columns:minmax(0,1fr) 48px}
#play .question-speech-area.has-question-hint{grid-template-columns:minmax(0,1fr) 48px 48px}
.settings-close{width:48px;min-width:48px;height:48px;min-height:48px;font-size:30px}
#play .feedback-close{width:48px;min-width:48px;min-height:48px;font-size:32px}
#play #diffPopupMessage{padding-right:48px}
body.high-contrast .practice-options,body.high-contrast .question-tool-guide{background:#fff;color:#111;border:2px solid #111}
body.high-contrast .practice-options>summary{background:#173b4d;color:#fff}
body.high-contrast #result .result-readable-summary{color:#111}
@media(max-width:600px){#setup .setup-start-row button{width:100%}#play .question-tool-guide{align-items:flex-start}.question-tool-guide>span{font-size:18px}#result .result-readable-summary{font-size:20px}}

/* 4.12.17: readable answer and secondary sharing */
.popup-answer-detail{font-size:20px;line-height:1.5;text-align:center;margin:10px 8px;color:#173b4d;max-height:28vh;overflow-y:auto;overflow-wrap:anywhere}
.result-share-options{margin:20px auto 8px;max-width:680px;border:1px solid #b4cad4;border-radius:12px;padding:12px;background:#f5f8fa}
.result-share-options>summary{font-size:20px;min-height:48px;align-content:center;cursor:pointer;font-weight:600;color:#245575}
.result-share-options .row{margin-top:12px;flex-wrap:wrap}
body.high-contrast .popup-answer-detail{color:#000}

/* 4.12.18: mobile uses one document scroll, leaving branding reachable above the lesson. */
@media(max-width:700px){
 body:not(.tv-mode) .app-header{margin:4px 0 8px;gap:8px}
 body:not(.tv-mode) .app-header .sub{display:none}
 body:not(.tv-mode) .brand{font-size:24px;line-height:1.2}
 body:not(.tv-mode) .settings-trigger{min-width:48px;min-height:48px;padding:5px}
 body:not(.tv-mode) .home-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:10px;flex-wrap:nowrap}
 body:not(.tv-mode) .home-heading-copy{flex:1;min-width:0}
 body:not(.tv-mode) .home-heading-copy h2{font-size:20px;margin:0}
 body:not(.tv-mode) .home-heading-copy p{display:none}
 body:not(.tv-mode) .home-person{max-width:52%;margin:0;gap:2px;align-self:center}
 body:not(.tv-mode) .home-person .home-greeting{font-size:16px;padding:4px 7px;line-height:1.3}
 body:not(.tv-mode) .home-person .change-person-link{font-size:15px;min-height:44px;padding:4px 6px;background:transparent;border:0;box-shadow:none;text-decoration:underline}
 body:not(.tv-mode) .home-grid{gap:7px;grid-template-columns:repeat(2,minmax(0,1fr))}
 body:not(.tv-mode) .home-grid .tile{flex-direction:row;align-items:center;min-height:76px;padding:8px;gap:7px}
 body:not(.tv-mode) .home-grid .tile .glyph{width:30px;height:34px;min-width:30px;font-size:25px}
 body:not(.tv-mode) .home-grid .tile-copy strong{font-size:18px;line-height:1.2}
 body:not(.tv-mode) .home-grid .tile small{font-size:15px;line-height:1.2}
 body:not(.tv-mode) #play.panel{display:block;height:auto!important;min-height:0;overflow:visible;padding:10px!important;padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
 body:not(.tv-mode) #play .play-content{overflow:visible;max-height:none;height:auto;padding:4px 0 8px;overscroll-behavior:auto}
 body:not(.tv-mode) #play .play-heading{gap:3px 8px}
 body:not(.tv-mode) #play #kind{font-size:19px;margin:0}
 body:not(.tv-mode) #play #counter{font-size:15px;padding:4px 8px}
 body:not(.tv-mode) #play .home-result-button.exit-button{font-size:15px;min-height:44px;padding:5px 8px}
 body:not(.tv-mode) #play .question-caption,body:not(.tv-mode) #playScrollHint{display:none!important}
 body:not(.tv-mode) #play .question-speech-area{margin:4px 0;gap:3px 6px}
 body:not(.tv-mode) #play .read-aloud-button,body:not(.tv-mode) #play .question-hint-icon{width:44px;height:44px;min-height:44px;min-width:44px;margin:0}
 body:not(.tv-mode) #play #prompt.question{margin:4px 0;padding:10px;font-size:23px;line-height:1.3}
 body:not(.tv-mode) #play .photo{margin:6px auto 0;max-width:210px}
 body:not(.tv-mode) #play .object-photo{width:100%;height:clamp(120px,23svh,190px);object-fit:contain}
 body:not(.tv-mode) #play .choices{gap:7px;margin-top:8px}
 body:not(.tv-mode) #play .choice,body:not(.tv-mode) #play .step{min-height:52px;padding:10px;font-size:21px}
 body:not(.tv-mode) #play .object-choices{grid-template-columns:1fr}
 body:not(.tv-mode) #play .math-hint{display:none}
 body:not(.tv-mode) #play .keypad{gap:6px}
 body:not(.tv-mode) #play .keypad button{min-height:48px;padding:8px;font-size:27px}
 body:not(.tv-mode) #play .math-check-row,body:not(.tv-mode) #play .order-reset-row{position:fixed;z-index:40;bottom:0;left:0;right:0;margin:0!important;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#f2f7f7;border-top:1px solid #b4cad4;display:flex;justify-content:center;gap:8px;box-shadow:0 -3px 10px #173b4d18}
 body:not(.tv-mode) #play .math-check-row button,body:not(.tv-mode) #play .order-reset-row button{min-height:48px;font-size:19px}
 body.feedback-complete:not(.tv-mode) #play .math-check-row,body.feedback-complete:not(.tv-mode) #play .order-reset-row{display:none}
 body:not(.tv-mode) #play #diffPopup.visible{position:fixed;z-index:45;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));top:auto;transform:none;width:auto;max-width:560px;max-height:50svh;overflow-y:auto;margin:0 auto}
 body.feedback-complete:not(.feedback-open):not(.tv-mode) #play .unified-next-row{position:fixed;z-index:40;bottom:0;left:0;right:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#f2f7f7;border-top:1px solid #b4cad4;margin:0}
 body:not(.tv-mode) #play .diff-photo-viewport{overscroll-behavior:auto}
}

@media(max-width:700px){body:not(.tv-mode) .header-actions .settings-menu>summary{width:58px;height:58px;min-width:58px;padding:4px}body:not(.tv-mode) .header-actions .settings-menu>summary svg{width:28px;height:28px}body:not(.tv-mode) .settings-trigger-label{font-size:13px}body:not(.tv-mode) #play .step-label{font-size:inherit}}

@media(max-width:700px){body:not(.tv-mode) .home-grid .tile .glyph{padding:0;display:grid;place-items:center}body:not(.tv-mode) #play .order-reset-row{flex-wrap:nowrap}body:not(.tv-mode) #play .order-reset-row button{flex:1;min-width:0;max-width:280px;padding:8px;font-size:18px}body:not(.tv-mode) #play .order-reset-row .secondary{font-size:16px}}

/* 4.12.19: shared question frame with controls on its upper edge. */
#play .question-caption{display:none!important}
#play .question-speech-area,body.math-mode #play .question-speech-area,#play .question-speech-area.has-question-hint{display:block;position:relative;margin:20px 0 8px;padding:0}
#play .question-speech-area #prompt.question,body.math-mode #play .question-speech-area #prompt.question,body:not(.tv-mode) #play .question-speech-area #prompt.question{width:100%;margin:0;padding:34px 12px 12px;text-align:left}
#play .question-speech-area .read-aloud-button,body.math-mode #play .question-speech-area .read-aloud-button,body:not(.tv-mode) #play .question-speech-area .read-aloud-button{position:absolute;top:-16px;right:8px;left:auto;bottom:auto;transform:none;margin:0;z-index:3;width:48px;height:48px;min-width:48px;min-height:48px}
#play .question-speech-area .question-hint-icon,body:not(.tv-mode) #play .question-speech-area .question-hint-icon{position:absolute;top:-16px;right:64px;left:auto;bottom:auto;transform:none;margin:0;z-index:3;width:48px;height:48px;min-width:48px;min-height:48px}
#play .choices.object-choices,body:not(.tv-mode) #play .choices.object-choices{grid-template-columns:minmax(0,1fr)}
#play .object-choices .choice{text-align:left}
#play #prompt .story-question,#play #prompt .story-progress{text-align:left}
/* Text flows beside the in-frame controls; photos resume at full width below. */
body:not(.math-mode) #play .question-speech-area{margin:6px 0 8px}
body:not(.math-mode) #play .question-speech-area #prompt.question{padding:12px;text-align:left;display:flow-root}
body:not(.math-mode) #play .question-speech-area #prompt.question::before{content:"";float:right;width:54px;height:48px;margin:-4px -4px 4px 8px}
body:not(.math-mode) #play .question-speech-area.has-question-hint #prompt.question::before{width:110px}
body:not(.math-mode) #play .question-speech-area .read-aloud-button,body:not(.math-mode) #play .question-speech-area .question-hint-icon{top:8px}
body:not(.math-mode) #play #prompt .photo{clear:both}

/* 4.12.20: long verbal answers share one consistent reading column. */
#play .choices.story-choices,#play .choices.situation-choices,#play .choices.object-choices{grid-template-columns:minmax(0,1fr)}
#play .story-choices .choice,#play .situation-choices .choice,#play .object-choices .choice{text-align:left;line-height:1.4}

@media(max-width:700px),(max-width:1366px) and (pointer:coarse){body:not(.tv-mode) #play::after{content:"";display:block;height:var(--question-focus-space,0px);grid-column:1/-1;order:4;pointer-events:none}body:not(.tv-mode) #play .question-speech-area{scroll-margin-top:8px}}

/* 4.12.21: greeting is the compact profile action, above the left-aligned title. */
#home .home-heading{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;margin:0 0 12px;flex-wrap:nowrap}
#home .home-heading .home-person{display:flex;flex-direction:row;justify-content:flex-end;align-self:stretch;width:100%;max-width:100%;margin:0;gap:0}
#home .home-heading-copy{flex:none;min-width:0;flex-basis:auto;text-align:left;width:100%}
#home .home-heading-copy h2{text-align:left;margin:0;line-height:1.3}
#home .home-greeting-button{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;min-height:44px;max-width:100%;padding:5px 9px;border:1px solid #a7c6c0;border-radius:999px;background:#e7f4ed;color:#174f59;font-size:18px;line-height:1.3;box-shadow:none;text-align:left}
#home .home-greeting-button .home-greeting{display:inline;max-width:none;min-width:0;background:transparent;color:inherit;border:0;border-radius:0;padding:0;margin:0;font:inherit;overflow-wrap:anywhere;text-align:left}
#home .home-greeting-button svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#home .home-greeting-button .greeting-chevron{width:16px;height:21px}
body.high-contrast #home .home-greeting-button{background:#fff;color:#111;border:2px solid #111}
@media(max-width:700px){#home .home-heading{gap:10px;margin-bottom:12px}#home .home-greeting-button{font-size:16px;min-height:44px;padding:5px 8px}#home .home-heading-copy h2{font-size:22px}}

/* 4.12.22: activity buttons contain only the icon and activity name. */
#home .home-grid .tile{flex-direction:row;align-items:center;justify-content:flex-start}
#home .home-grid .tile-copy{min-width:0;display:block}
#home .home-grid .tile-copy strong{display:block;margin:0;line-height:1.3}

#myPage .saved-drafts{padding:12px}
#myPage .saved-drafts h3{margin:0 0 12px}
#myPage .saved-drafts .saved-draft-button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;margin:7px 0;font-size:var(--progress-body);box-sizing:border-box}
#myPage .saved-draft-button>span:first-child{flex:1;min-width:0;overflow-wrap:normal;word-break:normal}
#myPage .saved-draft-arrow{flex:none;white-space:nowrap}
#myPage .history-entry{background:#fff;border:1px solid #c7d9df;border-radius:12px;box-shadow:0 2px 6px #173b4d08;overflow:hidden}
#myPage .history-entry>summary{display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:5px 10px;padding:12px 14px;align-items:start;justify-content:start;list-style:none;text-align:left}
#myPage .history-entry>summary::-webkit-details-marker{display:none}
#myPage .history-entry>summary::marker{content:""}
#myPage .history-entry>summary::before{display:none;content:none}
#myPage .history-entry>summary::after{content:'›';grid-column:2;grid-row:1/4;align-self:center;font-size:26px;color:#176a75;line-height:1}
#myPage .history-entry[open]>summary::after{content:'⌄'}
#myPage .history-entry .history-title{grid-column:1;grid-row:1;min-width:0;display:block;font-size:var(--progress-body);line-height:1.4;overflow-wrap:normal;word-break:normal;text-align:left}
#myPage .history-entry .history-date{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;font-size:var(--progress-meta);line-height:1.4;text-align:left}
#myPage .history-date time,#myPage .history-time{white-space:nowrap}
#myPage .history-entry .history-score{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 8px;min-width:0;text-align:left;font-size:22px;line-height:1.4}
#myPage .history-score-value{font-weight:750;white-space:nowrap}
#myPage .history-score-caption{font-weight:500;font-size:var(--progress-meta);color:#385966;line-height:1.4}
#myPage .progress-filters{grid-template-columns:minmax(0,1fr);gap:10px}
#myPage .progress-filters select{width:100%;min-width:0;padding:8px 34px 8px 10px;font-size:var(--progress-body)}
#myPage .history-entry-body{padding:8px 14px 14px}
body.high-contrast #myPage .history-score-caption{color:#111}

/* 4.12.26: concise feedback, one clear answer line. */
#play #diffPopupAnswer{font-size:20px;line-height:1.4;margin:8px 6px 12px;color:#173b4d;font-weight:600}