:root{--ground:#f7f8f4;--surface:#fff;--ink:#122033;--muted:#667487;--line:#d8e1eb;--cobalt:#2457a7;--blue-soft:#eaf1ff;--green:#168f78;--green-soft:#e4f6f1;--red:#b13e2e;--red-soft:#fbece8;--sage:#648b58;--sage-soft:#edf5e9}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--ground);font-family:Tahoma,Arial,sans-serif;font-size:16px;line-height:1.8}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.52}a{color:var(--cobalt)}button,input,a{outline-offset:5px}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--cobalt)}h1,h2,h3,p{margin:0}h1{font-size:2rem;line-height:1.65}h2{font-size:1.6rem;line-height:1.8}h3{font-size:1.1rem}.muted{color:var(--muted)}.small{font-size:.875rem}.preview-strip{background:#eaf1ff;border-bottom:1px solid #d5e1f6;color:#234c85;text-align:center;padding:8px 16px;font-size:.875rem}.preview-strip span{margin:0 8px}.shell{max-width:1120px;margin:auto;padding:0 28px}.topbar{height:100px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:13px;font-weight:700;font-size:1.65rem}.marks{display:flex;align-items:center;gap:4px;direction:ltr}.marks i{display:block;height:6px;width:30px;background:var(--cobalt);border-radius:99px}.marks i:nth-child(2){width:24px;background:var(--green)}.marks i:nth-child(3){width:18px;background:var(--sage)}.pill{display:inline-flex;align-items:center;gap:7px;background:var(--blue-soft);color:var(--cobalt);border-radius:99px;padding:6px 14px;font-size:.875rem}.pill.green{background:var(--green-soft);color:#086a58}.btn{border:0;border-radius:16px;padding:14px 24px;min-height:56px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.6}.primary{background:var(--cobalt);color:#fff}.primary:hover:not(:disabled){background:#194689}.secondary{background:var(--surface);border:1.5px solid var(--line);color:var(--cobalt)}.ghost{background:transparent;color:var(--muted);padding:8px 12px;min-height:44px}.full{width:100%}.intro{margin:16px 0 28px}.intro p{margin-top:5px}.unit{display:grid;grid-template-columns:3fr 2fr;background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 18px 40px #1220330d}.unit-info{padding:34px}.unit-info h2{margin-top:15px;font-size:2rem}.unit-info>p{margin:8px 0 22px}.unit-info .btn{margin-top:26px}.unit-art{background:linear-gradient(145deg,#275eba,#173f83);color:white;display:flex;justify-content:center;align-items:center;text-align:center;padding:34px;position:relative;overflow:hidden}.unit-art:before,.unit-art:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:#ffffff12;left:-50px;top:-60px}.unit-art:after{top:auto;left:auto;right:-60px;bottom:-60px}.unit-art svg{width:62px;height:62px}.book-circle{width:112px;height:112px;margin:0 auto 20px;border-radius:50%;background:#ffffff1f;border:1px solid #ffffff38;display:grid;place-items:center}.unit-art p{font-size:.875rem;color:#e1eafd;margin-top:8px}.meta{display:flex;flex-wrap:wrap;gap:8px}.section-line{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:34px 0 16px}.samples{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.sample{background:white;border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}.sample h3{font-size:1.18rem}.sample .btn{margin-top:auto;width:100%;min-height:48px;padding:10px}.index{color:var(--cobalt);font-weight:700;font-size:.875rem}.note{padding:18px 0 36px;font-size:.875rem;color:var(--muted)}.login{max-width:440px;margin:58px auto;padding:24px;text-align:center}.login .marks{justify-content:center;margin-bottom:20px}.login h1{font-size:2rem}.login form{margin-top:32px;text-align:right}.field{margin:18px 0}.field label{display:block;font-size:.875rem;margin-bottom:6px}.field input{width:100%;background:white;border:1.5px solid var(--line);border-radius:16px;padding:14px 18px;min-height:56px;color:var(--ink)}.login-note{margin-top:22px;font-size:.875rem;color:var(--muted)}.work{max-width:940px;margin:0 auto;padding:0 24px 150px}.progress-top{display:flex;align-items:center;gap:18px;margin:24px 0 18px}.progress-main{flex:1}.progress-main>div{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:.875rem;margin-bottom:8px}.progress{height:8px;background:#e4eaf1;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;background:#3976d8;border-radius:99px}.levels{display:flex;justify-content:center;gap:12px;margin:22px 0}.level{padding:7px 15px;border-radius:12px;color:var(--muted);background:#eaf0f5;font-size:.875rem}.level.current{background:var(--blue-soft);color:var(--cobalt);box-shadow:inset 0 0 0 1px #aec6eb}.level.direct{background:var(--green-soft);color:#086a58}.level.assisted{background:var(--sage-soft);color:#48673e}.level.failed{background:var(--red-soft);color:var(--red)}.exercise-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 30px 36px;box-shadow:0 12px 40px #12203304;min-height:340px}.instruction{display:flex;align-items:flex-start;gap:15px;margin:14px 0 28px}.instruction h1{font-size:1.4rem;line-height:1.9}.instruction-icon{flex-shrink:0;background:var(--blue-soft);color:var(--cobalt);width:44px;height:44px;border-radius:50%;display:grid;place-items:center}.choices{display:grid;gap:12px}.choices.images{grid-template-columns:repeat(3,minmax(0,1fr))}.choice{display:flex;align-items:center;gap:13px;position:relative;border:1.5px solid var(--line);background:white;border-radius:16px;padding:16px;cursor:pointer;min-height:68px}.choice:hover{border-color:#93b0d9;background:#f7faff}.choice.selected{border:2px solid var(--cobalt);background:var(--blue-soft);padding:15.5px}.choice input{accent-color:var(--cobalt);width:21px;height:21px;margin:0;flex-shrink:0}.choice .choice-text{font-size:1.25rem;line-height:1.9}.images .choice{flex-direction:column;padding:10px}.images .choice.selected{padding:9.5px}.choice img{width:100%;height:190px;object-fit:contain;border-radius:10px;background:#f4f6f8}.images .choice-label{display:flex;align-items:center;gap:10px}.choices.locked .choice{cursor:default}.context{white-space:pre-line;background:#f3f7ff;border-radius:16px;padding:20px 24px;margin-bottom:24px;font-size:1.25rem;line-height:2.4}.blank{display:inline-block;min-width:92px;border-bottom:2px dashed var(--cobalt);color:var(--cobalt);text-align:center;margin:0 4px}.letters{display:flex;justify-content:center;gap:12px;margin:24px 0;direction:rtl}.letters span{min-width:48px;border-bottom:2px solid var(--line);text-align:center;font-size:2rem}.sequence-tray{min-height:96px;border:2px dashed #c4d5e9;background:#f5f8fe;border-radius:16px;padding:16px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:16px 0 22px}.token-bank{display:flex;gap:12px;flex-wrap:wrap}.token{padding:12px 18px;background:#fff;border:1.5px solid #aebfd5;border-radius:12px;color:var(--ink);font-size:1.15rem;line-height:1.9}.token span{font-size:.875rem;color:var(--muted);margin-inline-end:6px}.sequence-tray .token{border-color:var(--cobalt);color:var(--cobalt)}.dialogue-tray{flex-direction:column;align-items:stretch}.audio-panel{background:#f4f7fe;border:1px solid #dce6f7;border-radius:16px;padding:22px;margin-bottom:24px;text-align:center}.audio-panel audio{width:min(100%,420px);display:block;margin:14px auto}.audio-note{font-size:.875rem;color:var(--muted)}.gate{padding:30px;text-align:center;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}.actionbar{position:fixed;bottom:0;left:0;right:0;background:#fffffff5;border-top:1px solid var(--line);padding:18px 24px;z-index:5}.action-inner{max-width:880px;margin:auto;display:flex;justify-content:space-between;gap:20px;align-items:center}.action-inner .btn{min-width:180px}.feedback{display:flex;align-items:center;gap:14px}.feedback strong{display:block}.feedback p{font-size:.875rem}.feedback-icon{font-size:1.4rem;width:46px;height:46px;display:grid;place-items:center;border-radius:50%}.feedback.good{color:#086a58}.feedback.good .feedback-icon{background:var(--green-soft)}.feedback.bad{color:var(--red)}.feedback.bad .feedback-icon{background:var(--red-soft)}.help-panel{background:var(--sage-soft);border:1px solid #cfdfc8;text-align:center;border-radius:22px;padding:45px 30px}.help-symbol{border-radius:50%;background:#dcebd5;width:64px;height:64px;display:grid;place-items:center;margin:0 auto 20px;font-size:1.8rem;color:#496d3e}.help-panel p{font-size:1.35rem;line-height:2;margin:22px auto 30px;max-width:660px}.summary{max-width:760px;margin:20px auto 50px;padding:30px;background:white;border:1px solid var(--line);border-radius:24px;text-align:center}.summary h1{margin:14px 0}.results{width:100%;border-collapse:collapse;text-align:right;margin:28px 0}.results th,.results td{border-bottom:1px solid var(--line);padding:16px 10px;font-size:.95rem}.summary-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.reset-dialog{border:1px solid var(--line);border-radius:22px;padding:30px;max-width:440px;width:calc(100% - 32px);color:var(--ink)}.reset-dialog::backdrop{background:#12203366}.reset-dialog p{margin:12px 0 24px}.reset-dialog form{display:flex;gap:12px;flex-wrap:wrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media(max-width:700px){.shell{padding:0 18px}.topbar{height:82px}.brand{font-size:1.4rem}.topbar .pill{display:none}.intro{margin-top:8px}h1{font-size:1.55rem}.unit{grid-template-columns:1fr}.unit-art{grid-row:1;padding:24px}.book-circle{display:none}.unit-art h2{font-size:1.35rem}.unit-art p{margin-top:2px}.unit-info{padding:24px}.unit-info h2{font-size:1.55rem}.samples{grid-template-columns:1fr}.sample{display:grid;grid-template-columns:1fr auto;gap:10px 20px}.sample .index{grid-column:1/-1}.sample .btn{width:auto;margin:0;min-width:105px}.section-line{align-items:flex-start}.section-line h2{font-size:1.3rem}.section-line .small{max-width:120px}.work{padding:0 14px 165px}.exercise-card{padding:20px 16px 26px}.instruction{gap:10px}.instruction h1{font-size:1.18rem}.instruction-icon{width:34px;height:34px}.choices.images{gap:8px}.choice img{height:130px}.images .choice{padding:6px}.images .choice.selected{padding:5.5px}.choice .choice-text{font-size:1.1rem}.level{padding:6px 12px}.levels{gap:6px}.actionbar{padding:14px 18px}.action-inner{gap:14px}.action-inner .btn{min-width:130px;padding:14px 18px}.feedback-icon{display:none}.feedback p{font-size:.8rem}.progress-top{gap:8px}.context{padding:16px;font-size:1.12rem}.summary{padding:24px 14px}.results th,.results td{font-size:.8rem;padding:14px 6px}.login{margin:32px auto}}@media(prefers-reduced-motion:no-preference){button,.choice{transition:background .16s,border-color .16s}.exercise-card,.help-panel{animation:appear .18s ease-out}@keyframes appear{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}}