:root{font-family:Arial,Helvetica,sans-serif;color:#082d1c;background:#f8fcf7;font-synthesis:none;--green:#487650;--deep:#082d1c;--muted:#617f7b;--line:#c6dfc9;--pale:#f0f7ed;--error:#9b4038}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100svh;background:radial-gradient(ellipse at 60% 30%,#fff 0%,#fafdf8 63%,#eef7ec 100%);overflow-x:hidden}body:before,body:after{content:"";position:fixed;z-index:-0;pointer-events:none;border-radius:55%;background:#e8f3e7;opacity:.7}body:before{width:400px;height:330px;top:-250px;left:-250px;transform:rotate(-38deg)}body:after{width:740px;height:260px;right:-320px;bottom:-10px;transform:rotate(-42deg);box-shadow:-150px 115px 0 10px #e7f2e4}
.masthead{position:relative;max-width:1440px;margin:0 auto;padding:43px 30px 0;display:flex;align-items:center;justify-content:space-between}.brand{font-size:34px;font-weight:750;letter-spacing:-1.2px;color:var(--deep);text-decoration:none}.brand span{color:#b7d8b4;font-weight:500;margin:0 4px}.brand em{font-style:normal;font-weight:400}.session-label{font-size:18px;color:#567972}main{position:relative;max-width:1440px;margin:86px auto 65px;padding:0 54px}.exercise{border:1.5px solid var(--line);background:rgba(255,255,255,.94);border-radius:23px;padding:30px 34px 37px;box-shadow:0 15px 45px #21442708}.stats{display:flex;justify-content:center;align-items:center;gap:0;background:var(--pale);border-radius:13px;padding:21px 20px;color:#436e4c;min-height:81px}.stat{display:flex;align-items:baseline;justify-content:center;gap:12px;flex:1;font-size:23px;line-height:1.25}.stat+.stat{border-left:1.5px solid #c6dfc5}.stat strong{font-size:30px;color:var(--deep);font-weight:750;font-variant-numeric:tabular-nums;min-width:1.5em}.stat:first-child{max-width:30%}.sentence-zone{display:flex;align-items:center;min-height:296px;padding:43px 20px 36px}h1{font-size:clamp(31px,4.25vw,62px);letter-spacing:-1.8px;line-height:1.25;font-weight:700;margin:0;overflow-wrap:anywhere;outline:none}.gap{display:inline-block;min-width:3.35em;border-bottom:3px solid currentColor;vertical-align:baseline;margin:0 .06em;line-height:1.05;transform:translateY(-.05em)}.gap.solved{min-width:0;color:var(--green);border-color:#7ead7e}.answer-row{display:flex;gap:18px;padding:0 16px}input,button{font:inherit}input{width:100%;min-width:0;font-size:22px;border:1.5px solid #c5d7d3;border-radius:13px;padding:20px 26px;line-height:1.5;color:var(--deep);background:#fff;transition:border-color .15s,box-shadow .15s}input::placeholder{color:#7b9695}input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px #48765013}input:disabled{opacity:1;background:#fafcf9;color:#557860}input[aria-invalid=true]{border-color:#c38079;background:#fffaf8}.primary{flex:0 0 24%;min-width:165px;border:0;border-radius:13px;background:var(--green);color:#fff;font-size:25px;font-weight:600;padding:18px 22px;cursor:pointer;transition:background .15s,transform .15s}.primary:hover{background:#37643f}.primary:active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:3px solid #a7cbaa;outline-offset:4px}button:disabled{cursor:default}.input-message{margin:0 16px;font-size:15px;color:var(--error);line-height:1.5}.input-message:not(:empty){padding-top:8px}.hint-row{padding:28px 23px 0;display:flex;align-items:center;gap:23px;flex-wrap:wrap;min-height:63px}.hint-row button{border:0;background:none;color:var(--green);font-size:21px;font-weight:600;display:flex;align-items:center;gap:17px;cursor:pointer;padding:4px 0}.hint-row button:disabled{opacity:.46;cursor:default}.hint-row button[aria-expanded=true] svg{transform:rotate(180deg)}.hint-count{border-left:1.5px solid #d2dfd8;padding-left:23px;color:var(--muted);font-size:18px;line-height:1.5}#hint-word{font-size:20px;color:var(--green);background:#f0f7ed;border-radius:7px;padding:5px 11px}.correction{margin:28px 16px 0;padding:23px 25px;background:#f8faf5;border-left:3px solid #71906c;border-radius:0 11px 11px 0;font-size:17px;line-height:1.6}.correction-heading{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;color:var(--muted)}.correction-heading strong{font-size:24px;color:var(--deep)}.correction p{margin:12px 0}.correction ul{padding-left:21px;margin:10px 0 17px;color:#45604b}.source-line{display:flex;gap:10px 25px;align-items:center;flex-wrap:wrap}.source-line a{color:#346241;text-underline-offset:4px;font-size:16px}.source-line>span{font-size:13px;color:#60776b}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.success input{border-color:#73a178;background:#f5faf2}.success .primary{background:#3d7047}.score-bump{animation:bump .45s ease}@keyframes bump{40%{transform:scale(1.18);color:#4e8951}100%{transform:scale(1)}}
@media(min-width:1500px){main{margin-top:88px}.sentence-zone{min-height:326px;padding-top:47px;padding-bottom:44px}}
@media(max-width:850px){.masthead{padding:30px 28px 0}.brand{font-size:28px}.session-label{font-size:16px}main{padding:0 25px;margin-top:48px}.exercise{padding:24px 22px 29px}.stats{padding:18px 10px;min-height:76px}.stat{font-size:17px;gap:8px}.stat strong{font-size:24px}.sentence-zone{min-height:280px;padding:34px 8px}h1{font-size:40px;letter-spacing:-1px}.answer-row{padding:0;gap:12px}input{font-size:20px;padding:17px 20px}.primary{min-width:140px;font-size:21px}.hint-row{padding:24px 6px 0}.correction{margin-left:0;margin-right:0}}
@media(max-width:520px){.masthead{padding:25px 20px 0}.brand{font-size:25px}.session-label{font-size:14px}main{padding:0 12px;margin:33px auto 30px}.exercise{border-radius:19px;padding:16px 14px 24px}.stats{padding:14px 0;min-height:79px}.stat{flex-direction:column;align-items:center;gap:5px;font-size:14px}.stat:first-child{max-width:none}.stat strong{font-size:25px;text-align:center}.sentence-zone{padding:30px 3px;min-height:266px}h1{font-size:32px;line-height:1.3;letter-spacing:-.85px}.gap{min-width:2.8em}.answer-row{gap:10px;flex-direction:column}input{font-size:19px;padding:16px 18px}.primary{width:100%;font-size:20px;padding:15px;min-height:55px}.hint-row{gap:13px;padding:23px 3px 0}.hint-row button{font-size:18px;gap:10px}.hint-count{font-size:15px;padding-left:14px}#hint-word{font-size:17px}.correction{font-size:16px;padding:19px 16px;margin-top:24px}.correction-heading{gap:4px 14px}.correction-heading strong{font-size:22px}}
.alternative-answers{font-size:15px;color:var(--muted)}.alternative-button{margin-top:20px;padding:8px 0;border:0;background:none;color:#346241;font-size:16px;text-align:left;text-decoration:underline;text-underline-offset:4px;cursor:pointer;line-height:1.5}.alternative-button:hover{color:var(--deep)}
body{isolation:isolate}body:before{z-index:-1}body:after{display:none}.exercise{position:relative}.primary{flex-basis:19%;min-width:140px;font-size:22px;padding:16px 20px}.hint-row button{border:0;border-radius:11px;background:var(--green);color:#fff;font-size:18px;font-weight:600;padding:11px 22px;min-width:105px;justify-content:center;transition:background .15s,transform .15s}.hint-row button:hover{background:#37643f}.hint-row button:active{transform:translateY(1px)}.hint-row button:disabled{background:#79977e;color:#fff;opacity:.62}.error-mark{position:absolute;z-index:5;left:50%;top:49%;font-size:150px;font-weight:300;line-height:1;color:#c8443b;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.55)}.error-mark.show{opacity:1;animation:error-mark .65s ease-out both}.exercise.error-flash{animation:error-border .65s ease-out}@keyframes error-mark{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}68%{opacity:.95;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.92)}}@keyframes error-border{0%,100%{border-color:var(--line);box-shadow:0 15px 45px #21442708}22%,65%{border-color:#d94e45;box-shadow:inset 0 0 0 4px #d94e45,0 0 34px #d94e454f}}
@media(max-width:520px){.primary{width:auto;min-width:138px;align-self:flex-end;font-size:19px;padding:13px 22px}.error-mark{font-size:110px}.hint-row button{font-size:17px;padding:10px 19px;min-width:96px}}
.correction{scroll-margin-top:18px}
.history-toolbar{gap:8px;flex-wrap:wrap;align-items:center}.masthead{justify-content:flex-start;gap:15px}.sound-toggle{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border:0;border-radius:10px;background:#edf5ea;color:#487650;padding:7px;cursor:pointer;transition:background .15s,color .15s}.sound-toggle:hover{background:#e2efdd}.sound-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.sound-toggle .sound-off{display:none}.sound-toggle.is-muted{background:#f0f1f0;color:#929a94}.sound-toggle.is-muted:hover{background:#e7e9e7}.sound-toggle.is-muted .sound-on{display:none}.sound-toggle.is-muted .sound-off{display:block}.hint-quota{font-size:13px;font-weight:400;opacity:.8;font-variant-numeric:tabular-nums}.hint-row button{gap:12px}.word-prompt{color:var(--muted);font-size:16px;line-height:1.5;margin:0 0 18px;letter-spacing:0}.online-message{font-size:13px;color:var(--muted);margin:12px 7px}.correct-sentence{font-weight:600;color:var(--deep)}.translation{font-size:15px;color:var(--muted)}.correction .manual-note{font-size:12px;color:var(--muted);margin:4px 0 14px}.small-primary{border:0;border-radius:10px;padding:12px 19px;color:white;background:var(--green);font-size:16px;font-weight:600;cursor:pointer}.small-primary:hover{background:#37643f}.small-primary:disabled{opacity:.6}.leaderboard-body,.record-body{padding:20px 25px 25px}.leaderboard-list{list-style:none;padding:0;margin:0}.leaderboard-list li{display:flex;align-items:center;gap:17px;padding:15px 4px;border-bottom:1px solid #e4eee1}.leaderboard-list li:last-child{border-bottom:0}.leaderboard-list li:first-child{background:#f5f9ef;border-radius:10px}.ranking-position{width:30px;text-align:center;color:#709176;font-size:15px;font-variant-numeric:tabular-nums}.leaderboard-list strong{font-size:20px;overflow-wrap:anywhere;min-width:0;unicode-bidi:isolate;overflow:hidden;line-height:1.5}.leaderboard-list b{flex-shrink:0}.leaderboard-list b{margin-left:auto;padding-right:8px;font-size:25px;font-variant-numeric:tabular-nums}.record-dialog{max-width:470px}.record-score{font-size:30px;font-weight:700;color:var(--green);margin:0 0 23px}.record-body label{display:block;margin:0 0 9px;font-size:17px}.pseudo-row{position:relative}.pseudo-row input{padding:14px 70px 14px 17px;font-size:23px}.pseudo-row>span{position:absolute;right:17px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--muted)}.record-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.record-actions>button:not(.small-primary){border:0;background:transparent;color:var(--muted);padding:12px 8px;cursor:pointer}#record-message{font-size:14px;color:var(--error);line-height:1.5;min-height:1.5em}.history-list details{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}.history-list summary{cursor:pointer;color:#376b43}.history-list details a{color:#376b43}.primary:disabled{opacity:.6}@media(max-width:520px){.history-toolbar{gap:5px}.history-toolbar button{font-size:13px;padding:7px 9px}.word-prompt{font-size:14px;margin-bottom:15px}.leaderboard-body,.record-body{padding:18px}.record-score{font-size:27px}.hint-row{align-items:flex-start}#hint-word{font-size:15px;line-height:1.5;max-width:100%}}
.streak-stat{position:relative}.stat #streak{position:relative;z-index:2;transition:color .22s,text-shadow .22s}.stat #streak[data-tier="1"]{color:#327b45}.stat #streak[data-tier="2"]{color:#1f9a49;text-shadow:0 0 12px #68c77a70}.stat #streak[data-tier="3"]{color:#c38a13;text-shadow:0 0 15px #e9bd5073}.stat #streak[data-tier="4"]{color:#e06b19;text-shadow:0 0 18px #f39a437d}.celebration-layer{position:absolute;z-index:6;left:68%;top:50%;width:1px;height:1px;pointer-events:none}.plus-one{position:absolute;left:0;top:-22px;color:#2f8345;font-size:19px;font-weight:800;white-space:nowrap;animation:plus-one .7s ease-out both}.particle{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#65ad68;box-shadow:0 0 7px #73ba70;transform:rotate(var(--angle)) translateX(0);animation:particle-burst .72s cubic-bezier(.18,.74,.25,1) var(--delay) both}.particle:nth-child(3n){background:#e4b33d}.particle:nth-child(3n+1){width:6px;height:6px;background:#8dcc75}.milestone-glow{animation:milestone-glow .8s ease-out}.record-burst{animation:record-burst .75s ease-out}.streak-reset{animation:streak-reset .58s ease-out}@keyframes plus-one{0%{opacity:0;transform:translate(-50%,3px) scale(.7)}25%{opacity:1;transform:translate(-50%,-7px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-34px) scale(.9)}}@keyframes particle-burst{0%{opacity:0;transform:rotate(var(--angle)) translateX(0) scale(.4)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) scale(1.05)}}@keyframes milestone-glow{0%,100%{box-shadow:0 15px 45px #21442708}32%{box-shadow:0 0 calc(12px + var(--power,1)*5px) #70b86b75,0 15px 45px #21442708}}@keyframes record-burst{30%{color:#d69b19;transform:scale(1.2);text-shadow:0 0 18px #e8ba48}100%{transform:scale(1)}}@keyframes streak-reset{0%{transform:translateX(0)}18%{transform:translateX(-8px) rotate(-4deg);color:#c8443b}36%{transform:translateX(8px) rotate(4deg);color:#c8443b}54%{transform:translateX(-5px)}72%{transform:translateX(4px)}100%{transform:translateX(0)}}body.milestone-shake .masthead,body.milestone-shake main{animation:screen-shake .48s ease-out}@keyframes screen-shake{0%,100%{transform:translate(0)}15%{transform:translate(-5px,2px)}30%{transform:translate(6px,-2px)}45%{transform:translate(-4px,1px)}60%{transform:translate(3px,-1px)}78%{transform:translate(-1px,0)}}
@media(max-width:520px){.celebration-layer{left:50%;top:72%}.plus-one{font-size:17px}.particle{width:7px;height:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.history-toolbar{display:flex;justify-content:flex-end;padding:13px 6px 0}.history-toolbar button{border:1.5px solid #b8d1bc;border-radius:10px;background:#fff;color:#376b43;font-size:16px;font-weight:600;padding:8px 15px;cursor:pointer;transition:background .15s,border-color .15s}.history-toolbar button:hover{background:#f0f7ed;border-color:#79a27e}.history-dialog{width:min(680px,calc(100% - 28px));max-height:min(78vh,760px);padding:0;border:1.5px solid var(--line);border-radius:19px;background:#fff;color:var(--deep);box-shadow:0 24px 75px #17392335;overflow:auto}.history-dialog::backdrop{background:#082d1c55;backdrop-filter:blur(2px)}.history-header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:24px 25px 18px;background:#f4f9f1;border-bottom:1px solid #d8e7d7}.history-header h2{margin:0 0 5px;font-size:25px;letter-spacing:-.5px}.history-header p{margin:0;color:var(--muted);font-size:15px}.history-header>button{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:10px;background:#487650;color:#fff;font-size:28px;line-height:1;cursor:pointer}.history-empty{margin:38px 25px;color:var(--muted);font-size:17px}.history-list{list-style:none;margin:0;padding:17px 25px 25px}.history-list li{padding:18px 0 19px;border-bottom:1px solid #e0ebe0}.history-list li:last-child{border-bottom:0}.history-item-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}.history-number{color:#79918a;font-size:14px;font-variant-numeric:tabular-nums}.history-item-top strong{font-size:15px;color:#377044}.history-wrong .history-item-top strong{color:#b3423a}.history-level{margin-left:auto;border-radius:999px;background:#edf5ea;color:#4b7153;font-size:13px;font-weight:700;padding:3px 9px}.history-sentence{margin:0 0 9px;font-size:18px;font-weight:650;line-height:1.45}.history-answer,.history-expected{margin:3px 0;font-size:15px;line-height:1.45;color:var(--muted)}.history-expected{color:#8f3c36}@media(max-width:520px){.history-toolbar{padding-top:10px}.history-toolbar button{font-size:15px;padding:7px 13px}.history-header{padding:20px 18px 15px}.history-header h2{font-size:22px}.history-list{padding:12px 18px 20px}.history-sentence{font-size:17px}}

/* The exercise uses the available screen; corrections may expand the page. */
.masthead{padding:clamp(10px,2.5svh,24px) 30px 0}
main{margin:clamp(10px,2.3svh,22px) auto max(12px,env(safe-area-inset-bottom));padding:0 clamp(12px,3.75vw,54px)}
.exercise{display:flex;flex-direction:column;height:var(--exercise-height,calc(100svh - 120px));padding:clamp(14px,2.4svh,26px) clamp(14px,2.4vw,34px)}
.exercise>:not(.sentence-zone){flex-shrink:0}
.stats{min-height:64px;padding:clamp(10px,1.8svh,16px) 16px}
.history-toolbar{padding:8px 0 0}
.history-toolbar button{min-height:42px;padding:8px 13px}

.sentence-zone{flex:1 1 auto;min-height:0;padding:clamp(10px,2.5svh,24px) 4px}
.sentence-zone>div{width:100%;min-width:0}
h1{font-size:clamp(1.5rem,min(4.25vw,7.7svh),3.875rem);line-height:1.23;letter-spacing:-.035em}
.answer-row{padding:0;gap:12px;flex-direction:row;align-items:stretch}
.answer-row input{font-size:1.25rem;padding:13px 18px}
.answer-row .primary{flex:0 0 19%;min-width:120px;min-height:48px;font-size:1.25rem;padding:12px 18px;align-self:stretch}
.hint-row{min-height:0;padding:12px 0 0;gap:10px;align-items:center}
.hint-row button{min-height:44px;padding:10px 18px}
#hint-word{font-size:1rem;overflow-wrap:anywhere}
.input-message{margin:0}
.exercise.has-correction,.exercise.needs-scroll{height:auto;min-height:var(--exercise-height,calc(100svh - 120px))}
.exercise.has-correction .sentence-zone{flex:none;min-height:clamp(100px,25svh,260px)}
.exercise.needs-scroll .sentence-zone{flex:none}
@media(max-width:520px){
  .masthead{padding:12px 18px 0;gap:12px}.brand{font-size:25px}
  main{margin-top:10px}
  .exercise{padding:14px;border-radius:19px}
  .stats{min-height:66px;padding:8px 0}.stat{font-size:.875rem;gap:3px}.stat strong{font-size:1.5rem}
  .history-toolbar button{font-size:.875rem;padding:8px 12px}
  h1{font-size:clamp(1.375rem,min(8vw,6svh),2rem)}
  .sentence-zone{padding:12px 2px}
  .answer-row{gap:8px}.answer-row input{font-size:1.125rem;padding:10px 12px}
  .answer-row .primary{min-width:96px;font-size:1rem;padding:10px 12px;min-height:48px}
  .hint-row{padding-top:10px}.hint-row button{font-size:1rem;padding:10px 15px}
}
@media(max-height:500px){
  .masthead{padding-top:8px}.brand{font-size:24px}
  main{margin-top:8px;margin-bottom:max(8px,env(safe-area-inset-bottom))}
  .exercise{padding:10px 14px}
  .stats{min-height:44px;padding:8px}.stat{flex-direction:row;gap:6px;font-size:.875rem}.stat strong{font-size:1.25rem}
  .history-toolbar{padding-top:4px}.history-toolbar button{min-height:40px;font-size:.875rem;padding:7px 12px}
  .sentence-zone{padding:8px 2px}
  .answer-row input{font-size:1rem;padding:8px 12px}.answer-row .primary{min-height:44px;font-size:1rem;padding:8px 12px}
  .hint-row{padding-top:6px}.hint-row button{min-height:40px;padding:8px 14px;font-size:1rem}
}