.step-footer {display:flex; flex-direction:column; align-items:flex-end; border-top:1px solid var(--edge); padding:1rem 0; gap:.35rem}
.step-gate {margin:.25rem 0}
.final-overview.box {
  display:grid;grid-template-columns:minmax(136px,.44fr) minmax(0,1.56fr);max-width:100%;gap:0;overflow:hidden;
  margin:20px 0 24px;padding:0;border:1.5px solid #527862;border-radius:13px;background:#f9faee;box-shadow:0 3px #527862;
}
.final-overview .result-total {
  display:grid;gap:4px;align-content:center;justify-items:start;min-width:0;
  background:#294f43;color:#f4f5dc;padding:clamp(16px,2.5vw,28px);
}
.result-total>strong {font:900 clamp(2.1rem,5.2vw,3.8rem)/1 TonSerif,Georgia,serif;letter-spacing:-.055em;color:#ffe4a4;white-space:nowrap}
.result-total>span {font-size:.88rem;color:#f3f0d6;line-height:1.35}
.result-total progress {
  display:block;appearance:none;-webkit-appearance:none;width:min(100%,165px);height:7px;margin-top:9px;color:#efce86;accent-color:#efce86;background:#5b7866;border:0;border-radius:4px;overflow:hidden;
}
.result-total progress::-webkit-progress-bar{background:#5b7866}
.result-total progress::-webkit-progress-value{background:#efd28b}
.result-total progress::-moz-progress-bar{background:#efd28b}
.review-intro {min-width:0;align-self:center;padding:clamp(16px,2.5vw,28px)}
.review-intro .meta{margin:0 0 4px;color:#4c6855;font:750 .72rem/1.2 "Segoe UI",sans-serif;letter-spacing:.045em}
.review-intro h2,.sentence-results h2{font:900 clamp(1.3rem,2.9vw,2rem)/1.14 TonSerif,Georgia,serif;letter-spacing:-.035em;color:#274b40;margin:0 0 6px}
.review-intro .review-count{margin:0;font-weight:650;color:#3e5848}
.review-intro .hint {margin:5px 0 0;color:#52665a;font-size:.87rem}
.final-overview.review-empty {display:block}
.sentence-results.box {padding:0;margin:0;background:none;border:0}
.sentence-results>p {max-width:72ch;margin:6px 0 14px;line-height:1.45;color:#43584b}
.sentence-results .review-fragment {
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 16px;
  margin:7px 0;padding:7px 10px;border:1px solid #abc0ad;border-radius:9px;background:#fffdf4
}
.sentence-results details.result,.sentence-results details.result:last-child {min-width:0;margin:0;padding:0;border:0;background:none}
.result summary {
  display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 4em 14px;align-items:center;gap:9px;
  min-height:42px;list-style:none;cursor:pointer;font-weight:650;color:#2c5142;
}
.result summary::-webkit-details-marker{display:none}
.result summary strong{float:none;color:inherit;white-space:nowrap;text-align:right;font:650 .9rem/1.2 Consolas,"Courier New",monospace}
.result-sign {display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;border:1px solid #8ea68d;color:#285240;background:#dfefdb;font:700 1rem/1 "Segoe UI",sans-serif}
.review-fragment[data-outcome=partial] .result-sign{color:#67491f;border-color:#b69759;background:#fae9bd}
.review-fragment[data-outcome=none] .result-sign{color:#62615c;border-color:#aaa79a;background:#f2eee2}
.result-state {font-size:.82rem;font-weight:500}
.result-chevron {justify-self:center;width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.result[open] .result-chevron{transform:rotate(225deg) translate(-1px,-1px)}
.review-play {
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:41px;line-height:1.15;
  padding:3px 9px 3px 4px;color:#284a3b;font-size:.84rem;font-weight:750;background:#e8f0e2;border:1px solid #9cb29c;border-radius:20px;cursor:pointer;
}
.review-play .dict-play-icon{width:25px;height:25px}
.review-play[aria-pressed=true]{background:#f9e6b3}
.review-play[aria-pressed=true] .dict-play-icon::before{margin:0;width:8px;height:8px;background:currentColor;border:0}
.result-comparison {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border-top:1px solid #d1dccb;margin-top:3px;padding:11px 0 4px}
.sentence-results .result-comparison p {display:grid;align-content:start;gap:3px;min-width:0;margin:0;overflow-wrap:anywhere}
.result-comparison p>b {font-size:.8rem;letter-spacing:.012em;color:#5c6f5d}
.result-comparison .review-answer{font-size:1rem}
.result .orth {background:#dbecde;color:#204e37;border-radius:.15em;font-weight:700}
.result .miss-word {background:#fbebca;text-decoration:underline solid #997847;text-underline-offset:.14em}
.result .review-gap{color:#7f796d}
@media(max-width:690px){
 .result summary{grid-template-columns:24px minmax(0,1fr) auto 13px;column-gap:6px;row-gap:2px;padding-block:3px}
 .result-sign{grid-row:1/3;width:23px;height:23px}
 .result-name{grid-column:2;grid-row:1}.result-state{grid-column:2;grid-row:2}
 .result summary strong{grid-column:3;grid-row:1/3}.result-chevron{grid-column:4;grid-row:1/3}
 .result-comparison{grid-template-columns:1fr}
}
@media(max-width:500px){
 .final-overview.box{grid-template-columns:minmax(103px,.74fr) minmax(0,1.5fr);margin:16px 0 20px}
 .final-overview .result-total{padding:11px}.review-intro{padding:13px}.review-intro h2{font-size:1.12rem}
 .result-total>strong{font-size:1.9rem}.result-total>span{font-size:.78rem}.review-intro .hint{font-size:.81rem}
 .sentence-results .review-fragment {gap:4px 7px;padding:7px}.review-play{font-size:.78rem}
}
@media(max-width:365px){
 .sentence-results .review-fragment{grid-template-columns:minmax(0,1fr) 39px}
 .review-play{width:38px;height:41px;padding:3px}
 .review-play>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media(hover:hover) and (pointer:fine){
 .result summary:hover,.review-play:hover{color:#13573e}.review-play:hover{background:#d8e8d4}
}
@media(forced-colors:active){.result-total progress{appearance:auto}.result-sign,.result .orth,.result .miss-word{border:1px solid CanvasText}}

@media(max-width:550px){.step-footer{align-items:stretch}}

.story-navigation {display:flex;justify-content:space-between;align-items:center;gap:1rem}
.story-navigation .back {margin:0}
.story-navigation .quit-attempt {color:#843d31}
#quitDialog {width:min(29rem,calc(100% - 2rem));max-height:85vh;padding:1.4rem;border:1px solid var(--edge);border-radius:14px;color:var(--ink)}
#quitDialog h2 {margin-top:0}
#quitDialog::backdrop {background:rgb(15 36 38 / .48)}