.code-reading{--cr-ink:#343d66;--cr-muted:#626d8a;--cr-purple:#7050b7;--cr-border:#dce2f2;min-width:0;color:var(--cr-ink)}
.cr-intro{margin-bottom:22px}.cr-intro h3{font-size:23px;line-height:1.6;margin:0 0 10px;color:#353565}.cr-intro p{font-size:17px;line-height:1.95;margin:0;color:#596785}
.cr-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 22px}.cr-parts button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:45px;padding:9px 10px;border:1px solid #d8deed;border-radius:9px;background:#fff;color:#64708b;font-family:inherit;font-size:14px;font-weight:700;line-height:1.5;cursor:pointer}.cr-parts button>span{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#edf0f8;color:#727e9a;font-size:11px}.cr-parts button.is-current{border-color:#aa96d6;background:#f0eafa;color:#5e3f9b}.cr-parts button.is-current>span{background:#8062bd;color:#fff}
.cr-panel{padding:24px;border:1px solid var(--cr-border);border-radius:12px;background:#fbfcff;min-width:0}.cr-panel-title{font-size:20px;line-height:1.7;margin:0 0 10px;color:#3c426d}.cr-panel-title:focus{outline:none}.cr-panel-intro{font-size:15px;line-height:1.9;color:var(--cr-muted);margin:0 0 18px}
.cr-token-picker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.cr-token-picker button{min-height:42px;padding:8px 14px;border:1px solid #d6dfef;border-radius:8px;background:#fff;color:#55668d;cursor:pointer;max-width:100%}.cr-token-picker button code{font:700 16px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.cr-token-picker button.is-current{background:#eae3fa;border-color:#ad98d8;color:#5e3b9b}
.cr-glossary-card{padding:23px;border:1px solid #d6dff0;border-radius:11px;background:#fff}.cr-term-heading{display:flex;align-items:center;flex-wrap:wrap;gap:15px 24px;padding-bottom:18px;margin-bottom:19px;border-bottom:1px solid #e2e7f2}.cr-token{display:block;font:700 31px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#6743a5;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}.cr-reading{display:block;font-size:21px;font-weight:700;color:#40567d;line-height:1.6}.cr-reading small{display:block;font-size:11px;font-weight:600;color:#667391;margin-bottom:3px}.cr-explanation>strong,.cr-role>strong,.cr-line-meaning>strong,.cr-typing-tip>strong,.cr-read-aloud>strong{display:block;font-size:13px;line-height:1.6;color:#61739b;margin-bottom:6px}.cr-explanation p,.cr-role p,.cr-line-meaning p,.cr-typing-tip p,.cr-read-aloud p{font-size:17px;line-height:1.95;margin:0;color:#465779}.cr-role{margin-top:19px;padding:17px 18px;background:#eef4ff;border-radius:9px}
.cr-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 0}.cr-pager button,.cr-next-part{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:9px 15px;border:1px solid #c7cee4;background:#fff;border-radius:8px;color:#655090;font-family:inherit;font-size:14px;font-weight:700;line-height:1.6;cursor:pointer}.cr-pager button:disabled{opacity:.35;cursor:default}.cr-pager>span{font-size:13px;line-height:1.5;color:#667391;text-align:center}
.cr-source-line{display:grid;grid-template-columns:62px minmax(0,1fr);min-width:0;border:1px solid #d1dbee;border-radius:9px;overflow:hidden;background:#f1f5fd;margin:18px 0 22px}.cr-line-number{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:11px 5px;border-right:1px solid #d1dbee;color:#65769a;background:#e7eefb;font:700 18px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;user-select:none}.cr-line-number small{font-family:inherit;font-size:9px;font-weight:500;line-height:1.4}.cr-source-line pre{margin:0;padding:19px 18px;min-width:0;min-height:74px;overflow-x:auto;white-space:pre;tab-size:4}.cr-source-line code{font:16px/2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;overflow-wrap:normal;color:#333f68}.cr-line-meaning{padding:20px 21px;border:1px solid #dce3f2;border-radius:10px;background:#fff}.cr-typing-tip{margin-top:17px;padding:17px 20px;background:#fff8e7;border:1px solid #ebdfb7;border-radius:9px}.cr-typing-tip>strong{color:#846e37}.cr-typing-tip p{color:#78653c;font-size:16px}.cr-line-note{font-size:12px!important;line-height:1.8;margin:13px 0 0;color:#6d7893}
.cr-writing-step{display:flex;align-items:flex-start;gap:14px;padding:21px;border:1px solid #d6dff0;border-radius:10px;background:#fff}.cr-writing-number{display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;border-radius:50%;background:#e8e0f8;color:#6743a5;font-size:14px;font-weight:800}.cr-writing-step strong{display:block;color:#65759a;font-size:12px;margin-bottom:5px}.cr-writing-step p{font-size:17px;line-height:1.95;color:#465779;margin:0}.cr-read-aloud{margin-top:24px;padding:19px 21px;border-left:4px solid #8ea6d6;background:#edf4ff;border-radius:0 9px 9px 0}.cr-read-aloud p+p{margin-top:9px}
.cr-check{margin-top:25px;padding-top:23px;border-top:1px solid #dce2f0}.cr-check-label{display:block;color:#746092;font-size:12px;font-weight:700;margin-bottom:8px}.cr-check h5{font-size:18px;line-height:1.8;margin:0 0 16px;color:#3e456b}.cr-check-options{display:grid;gap:9px}.cr-answer-choice{display:flex;align-items:center;gap:12px;min-height:51px;padding:13px 16px;text-align:left;border:1px solid #d2dcef;border-radius:9px;background:#fff;color:#445474;font-family:inherit;font-size:16px;font-weight:500;line-height:1.8;cursor:pointer}.cr-answer-choice>span{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;border-radius:7px;background:#edf1f9;color:#7c88a3;font-size:12px;font-weight:800}.cr-answer-choice.is-correct{border-color:#8ab7aa;background:#eff9f5;color:#2b6c58}.cr-answer-choice.is-correct>span{background:#4c8e79;color:#fff}.cr-answer-choice.is-wrong{border-color:#dca29e;background:#fff3f1;color:#9e554f}.cr-answer-choice.is-wrong>span{background:#bd7972;color:#fff}.cr-check-feedback{margin:13px 0 0;padding:14px 16px;border-radius:8px;font-size:15px;line-height:1.9}.cr-check-feedback.is-correct{background:#eaf6ef;color:#376f57}.cr-check-feedback.is-wrong{background:#fff4e9;color:#946444}.cr-complete{margin-top:20px;padding:19px 22px;border:1px solid #a8cebd;border-radius:10px;background:#edf8f1;color:#397058}.cr-complete strong{display:block;font-size:18px;margin-bottom:5px}.cr-complete p{font-size:15px;line-height:1.9;margin:0}
.code-reading button:hover:not(:disabled){border-color:#9c83cb;background:#f4effc}.code-reading .cr-answer-choice.is-correct:hover{border-color:#6ba18c;background:#e8f6ef}.code-reading .cr-answer-choice.is-wrong:hover{border-color:#c58c84;background:#fff0ec}.code-reading button:focus-visible{outline:3px solid #efb737;outline-offset:3px}.large-text .code-reading .cr-intro p,.large-text .code-reading .cr-explanation p,.large-text .code-reading .cr-role p,.large-text .code-reading .cr-line-meaning p,.large-text .code-reading .cr-typing-tip p,.large-text .code-reading .cr-writing-step p,.large-text .code-reading .cr-read-aloud p,.large-text .code-reading .cr-answer-choice{font-size:20px}
@media(max-width:700px){.cr-parts{grid-template-columns:repeat(2,minmax(0,1fr))}.cr-panel{padding:19px}.cr-intro h3{font-size:21px}.cr-term-heading{gap:13px 20px}.cr-token{font-size:28px}.cr-reading{font-size:19px}.cr-glossary-card{padding:19px}.cr-source-line{grid-template-columns:51px minmax(0,1fr)}.cr-source-line pre{padding:15px 13px}.cr-source-line code{font-size:15px}.cr-line-number{font-size:16px}.cr-pager button{padding:9px 12px;font-size:13px}.cr-pager>span{font-size:12px}.cr-answer-choice{font-size:15px}}
@media(max-width:420px){.cr-intro p,.cr-explanation p,.cr-role p,.cr-line-meaning p,.cr-typing-tip p,.cr-writing-step p,.cr-read-aloud p{font-size:16px}.cr-panel{padding:15px}.cr-panel-title{font-size:18px}.cr-parts{gap:7px}.cr-parts button{padding:9px 7px;font-size:12px;gap:6px}.cr-token-picker button{padding:8px 11px}.cr-token-picker button code{font-size:14px}.cr-glossary-card{padding:17px}.cr-role,.cr-line-meaning,.cr-typing-tip,.cr-read-aloud{padding:16px}.cr-source-line{grid-template-columns:44px minmax(0,1fr)}.cr-source-line pre{padding:14px 11px}.cr-source-line code{font-size:14px}.cr-line-number{font-size:15px}.cr-pager{gap:8px}.cr-pager button{padding:9px 10px;font-size:12px}.cr-pager>span{font-size:11px}.cr-writing-step{padding:17px;gap:11px}.cr-writing-number{flex-basis:27px;width:27px;height:27px}.cr-check h5{font-size:17px}.cr-answer-choice{font-size:14px;padding:12px;gap:9px}.cr-check-feedback{font-size:14px}.cr-complete{padding:17px}.cr-complete strong{font-size:17px}}
