.cc-page { --cc-ink:var(--text,#252923); --cc-muted:var(--text-soft,#7a8075); --cc-border:#d7dccf; --cc-panel:#f0f1eb; --cc-card:#fdfdf9; --cc-green:#3b894b; color:var(--cc-ink); max-width:1460px; margin:auto; }
.cc-page button, .cc-page input, .cc-page select { font:inherit; }
.cc-page button { cursor:pointer; }
.cc-page button:focus-visible,.cc-page summary:focus-visible,.cc-page input:focus-visible,.cc-page select:focus-visible { outline:3px solid #8cae7b; outline-offset:4px; }
.cc-page :is(.cc-browser,.cc-module-detail,.cc-lesson):focus { outline:none; }
.cc-page [tabindex="-1"] { scroll-margin-top:95px; }
.cc-hero { display:flex; align-items:center; gap:22px; padding:26px 0 28px; }
.cc-hero>img { width:104px; height:104px; flex-shrink:0; }
.cc-hero>div { flex:1; min-width:0; }
.cc-page .cc-kicker { color:var(--cc-muted); font-size:10px; font-weight:650; letter-spacing:1.7px; line-height:1.7; margin:0 0 8px; }
.cc-hero h1 { font-size:34px; line-height:1.4; margin:0 0 7px; letter-spacing:-1px; }
.cc-hero p:not(.cc-kicker) { font-size:14px; color:var(--cc-muted); margin:0; line-height:1.8; }
.cc-hero-meta { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:14px; font-size:12px; color:var(--cc-muted); }
.cc-hero-meta span+span { position:relative; }
.cc-hero-meta span+span:before { content:'·'; position:absolute; left:-12px; }
.cc-progress-strip { display:flex; align-items:center; gap:18px; padding:17px 22px; background:var(--cc-panel); border-radius:14px; font-size:12px; }
.cc-progress-strip [role="progressbar"] { height:5px; flex:1; border-radius:8px; background:var(--cc-border); overflow:hidden; }
.cc-progress-strip i { display:block; height:100%; background:var(--cc-green); }
.cc-progress-strip strong { font-size:14px; font-weight:650; }
.cc-progress-strip small { font-size:12px; font-weight:400; color:var(--cc-muted); }
.cc-source-note { margin:14px 0 31px; color:var(--cc-muted); font-size:11px; line-height:1.8; }
.cc-source-note summary { width:fit-content; cursor:pointer; }
.cc-source-note p { max-width:850px; margin:10px 0; }
.cc-source-note button { border:0; background:transparent; color:var(--cc-green); padding:4px 0; font-size:12px; }
.cc-browser-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 22px; }
.cc-browser-heading h2 { font-size:25px; margin:0; letter-spacing:-.6px; }
.cc-view-toggle { display:flex; gap:3px; padding:4px; border:1px solid var(--cc-border); border-radius:10px; }
.cc-view-toggle button { border:0; padding:8px 13px; background:transparent; color:var(--cc-muted); border-radius:7px; font-size:12px; }
.cc-view-toggle button[aria-pressed="true"] { background:var(--cc-panel); color:var(--cc-ink); font-weight:650; }
.cc-modules-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:32px 25px; background:var(--cc-panel); border-radius:24px; padding:28px; }
.cc-module { position:relative; display:flex; flex-direction:column; align-items:center; gap:0; width:100%; min-width:0; padding:0; border:0; background:transparent; color:var(--cc-ink); text-align:center; }
.cc-module-art { position:relative; width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--cc-card); border:1.5px solid var(--cc-border); border-radius:21px; box-shadow:0 6px 0 var(--cc-border); transition:transform .18s,border-color .18s; }
.cc-module-art:after { position:absolute; content:''; width:25px; height:2px; background:var(--cc-border); left:100%; top:50%; transform:translateY(-50%); }
.cc-module:nth-child(5n) .cc-module-art:after,.cc-module:last-child .cc-module-art:after { display:none; }
.cc-module-art img { width:80%; height:80%; margin-top:12%; object-fit:contain; }
.cc-module-number { position:absolute; top:12px; left:13px; font-size:11px; color:var(--cc-muted); font-weight:600; }
.cc-badge { position:absolute; top:10px; right:9px; padding:3px 7px; background:#309c4a; color:white; border-radius:20px; font-size:10px; }
.cc-module>strong { display:-webkit-box; width:100%; min-height:3em; margin:20px 0 6px; overflow:hidden; color:var(--cc-ink); font-size:14px; font-weight:650; line-height:1.5; text-align:left; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.cc-module-summary { display:-webkit-box; width:100%; min-height:4.95em; margin:0 0 8px; overflow:hidden; color:var(--cc-muted); font-size:11px; line-height:1.65; text-align:left; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.cc-module-meta { width:100%; color:var(--cc-muted); font-size:10px; line-height:1.6; text-align:left; }
.cc-module-progress { display:grid; width:100%; gap:6px; margin-top:auto; padding-top:12px; }
.cc-module-progress-copy { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--cc-muted); font-size:10px; line-height:1.4; }
.cc-module-progress-copy>strong { color:var(--cc-green); font-size:11px; font-weight:700; }
.cc-module-progress-track { display:block; width:100%; height:5px; overflow:hidden; border-radius:10px; background:var(--cc-border); }
.cc-module-progress-track>i { display:block; height:100%; border-radius:inherit; background:var(--cc-green); transition:width .2s ease; }
.cc-module:hover .cc-module-art { transform:translateY(-3px); border-color:#98b990; }
.cc-module.is-current .cc-module-art { border-color:#83b875; background:#f7fcf2; box-shadow:0 6px 0 #b6cca9; }
.cc-start-hint { display:flex; align-items:center; gap:13px; margin:24px 0; color:var(--cc-muted); font-size:12px; }
.cc-start-hint>span { width:29px; height:29px; border-radius:50%; background:var(--cc-panel); display:grid; place-items:center; color:var(--cc-green); }
.cc-start-hint p { flex:1; }
.cc-start-hint button,.cc-list-heading>button,.cc-prerequisites button,.cc-next-prev button,.cc-breadcrumb button { border:0; background:transparent; color:var(--cc-green); text-align:left; padding:5px 0; font-size:12px; }
.cc-module-detail,.cc-lesson { margin-top:32px; border:1px solid var(--cc-border); border-radius:21px; padding:30px; background:var(--cc-card); }
.cc-detail-heading { display:flex; align-items:flex-start; gap:35px; }
.cc-detail-heading>div:first-child { flex:1; }
.cc-detail-heading h2 { margin:0 0 12px; font-size:26px; }
.cc-detail-heading p { color:var(--cc-muted); line-height:1.9; font-size:13px; max-width:850px; margin:0; }
.cc-module-count { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.cc-module-count strong { font-size:29px; font-weight:600; }
.cc-module-count small,.cc-module-count>span { color:var(--cc-muted); font-size:12px; font-weight:400; }
.cc-module-context { display:grid; grid-template-columns:1.3fr 1fr; gap:28px; margin:24px 0 28px; padding:20px; border-radius:12px; background:var(--cc-panel); }
.cc-module-context article>span { color:var(--cc-muted); font-size:11px; }
.cc-module-context p { font-size:13px; line-height:1.8; margin:8px 0 0; }
.cc-prerequisites { display:flex; flex-wrap:wrap; gap:7px 14px; }
.cc-prerequisites p { margin:4px 0; font-size:13px; color:var(--cc-muted); }
.cc-prerequisites button { text-decoration:underline; text-decoration-color:var(--cc-border); text-underline-offset:4px; }
.cc-list-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:8px; }
.cc-list-heading h3 { margin:0; font-size:17px; }
.cc-unit-row { display:flex; align-items:center; gap:17px; padding:20px 6px; width:100%; border:0; border-bottom:1px solid var(--cc-border); background:transparent; text-align:left; color:var(--cc-ink); }
.cc-unit-row:last-child { border-bottom:0; }
.cc-unit-row:hover { background:var(--cc-panel); border-radius:10px; }
.cc-unit-index { align-self:flex-start; display:grid; place-items:center; width:34px; height:34px; background:var(--cc-panel); border-radius:10px; color:var(--cc-muted); font-size:12px; flex-shrink:0; }
.cc-unit-index.is-done { color:var(--cc-green); background:#e7f1e1; }
.cc-unit-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.cc-unit-copy strong { font-size:14px; font-weight:600; }
.cc-unit-copy small { font-size:12px; line-height:1.75; color:var(--cc-muted); }
.cc-unit-copy>span { font-size:10px; color:var(--cc-muted); line-height:1.6; }
.cc-unit-state { font-size:11px; color:var(--cc-muted); white-space:nowrap; }
.cc-unit-state b { margin-left:13px; font-size:16px; font-weight:400; }
.cc-knowledge-list { border:1px solid var(--cc-border); border-radius:19px; padding:23px; background:var(--cc-card); }
.cc-list-tools { display:flex; gap:16px; }
.cc-list-tools label { display:flex; flex-direction:column; gap:7px; flex:1; }
.cc-list-tools label+label { flex:0 1 240px; }
.cc-list-tools label>span { font-size:11px; color:var(--cc-muted); }
.cc-list-tools input,.cc-list-tools select { width:100%; min-width:0; border:1px solid var(--cc-border); color:var(--cc-ink); background:var(--cc-card); border-radius:9px; height:43px; padding:0 12px; font-size:13px; }
.cc-result-count { font-size:11px; color:var(--cc-muted); margin:20px 0 5px; }
.cc-empty { padding:45px 15px; color:var(--cc-muted); text-align:center; font-size:13px; }
.cc-lesson { max-width:1040px; margin-left:auto; margin-right:auto; }
.cc-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--cc-muted); font-size:11px; }
.cc-breadcrumb button { font-size:11px; }
.cc-lesson-header { margin:28px 0 30px; }
.cc-lesson-header h2 { font-size:29px; line-height:1.5; margin:5px 0 16px; }
.cc-lesson-header>p { font-size:14px; line-height:1.9; margin:16px 0 0; }
.cc-lesson-tags { display:flex; gap:8px; }
.cc-lesson-tags span { color:var(--cc-muted); background:var(--cc-panel); padding:4px 10px; border-radius:6px; font-size:11px; }
.cc-lesson-section { border-top:1px solid var(--cc-border); padding:23px 0; }
.cc-lesson-section h3 { display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:17px; }
.cc-lesson-section h3>span { font-size:10px; font-weight:500; color:var(--cc-green); background:var(--cc-panel); border-radius:5px; padding:5px 6px; }
.cc-lesson-section p { line-height:1.95; font-size:14px; white-space:pre-line; overflow-wrap:anywhere; }
.cc-scenario,.cc-error-note { padding:18px 21px; background:#f1edf8; border-radius:13px; margin-top:20px; }
.cc-scenario>span,.cc-error-note>span { color:#8566ae; font-size:11px; font-weight:600; }
.cc-scenario p,.cc-error-note p { font-size:13px; line-height:1.9; margin:9px 0 0; }
.cc-formulas { display:grid; gap:15px; margin:20px 0; }
.cc-formulas article,.cc-exercises article { border:1px solid var(--cc-border); border-radius:12px; padding:20px; }
.cc-formulas h4 { font-size:15px; margin:0 0 15px; }
.cc-formulas .cc-expression { background:var(--cc-panel); padding:15px; border-radius:8px; font-family:Georgia,'Noto Sans SC',serif; font-size:18px; white-space:pre-wrap; }
.cc-formulas p:not(.cc-expression) { font-size:13px; }
.cc-formulas small { color:var(--cc-muted); font-size:12px; line-height:1.8; }
.cc-script { border:1px solid var(--cc-border); border-radius:10px; margin:15px 0; overflow:hidden; }
.cc-script>summary { background:var(--cc-panel); padding:15px; font-size:13px; line-height:1.8; cursor:pointer; }
.cc-script>div { padding:0 20px 20px; }
.cc-script strong { font-size:13px; line-height:1.9; }
.cc-exercises { display:grid; gap:15px; margin-top:20px; }
.cc-exercise-label { color:var(--cc-muted); font-size:11px; }
.cc-exercise-label span { margin-left:10px; }
.cc-answer { margin-top:15px; border-top:1px dashed var(--cc-border); padding-top:13px; }
.cc-answer summary { color:var(--cc-green); font-size:12px; cursor:pointer; }
.cc-answer strong { display:block; margin-top:15px; line-height:1.8; overflow-wrap:anywhere; }
.cc-muted { color:var(--cc-muted); font-size:12px!important; }
.cc-error-note { background:#f9f2db; }
.cc-error-note>span { color:#927827; }
.cc-lesson-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid var(--cc-border); padding-top:25px; margin-top:30px; }
.cc-lesson-footer strong { font-size:14px; }
.cc-lesson-footer p { color:var(--cc-muted); font-size:11px; line-height:1.8; }
.cc-next-prev { display:flex; justify-content:space-between; gap:30px; border-top:1px solid var(--cc-border); padding-top:20px; margin-top:22px; font-size:12px; color:var(--cc-muted); }
.cc-next-prev>* { max-width:48%; line-height:1.8; }
[data-theme="dark"] .cc-page { --cc-border:#424b3d; --cc-panel:#252c23; --cc-card:#1b211a; --cc-green:#92c48b; }
[data-theme="dark"] .cc-module.is-current .cc-module-art { background:#283923; box-shadow:0 6px 0 #47623c; }
[data-theme="dark"] .cc-scenario { background:#2d2836; }
[data-theme="dark"] .cc-error-note { background:#34301f; }
[data-theme="dark"] .cc-unit-index.is-done { background:#2e402a; }
@media (max-width:1200px) { .cc-modules-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:29px 22px; padding:25px; } .cc-module-art:after { width:22px; } .cc-module:nth-child(5n) .cc-module-art:after { display:block; } .cc-module:nth-child(4n) .cc-module-art:after,.cc-module:last-child .cc-module-art:after { display:none; } .cc-hero .cc-kicker { font-size:9px; } }
@media (max-width:900px) { .cc-modules-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .cc-module:nth-child(4n) .cc-module-art:after { display:block; } .cc-module:nth-child(3n) .cc-module-art:after,.cc-module:last-child .cc-module-art:after { display:none; } .cc-hero { flex-wrap:wrap; } .cc-hero>img { width:80px; height:80px; } .cc-hero>button { margin-left:102px; } .cc-module-context { grid-template-columns:1fr; gap:17px; } }
@media (max-width:600px) { .cc-page { padding-top:4px; } .cc-hero { gap:12px; padding:20px 0; } .cc-hero>img { width:61px; height:61px; } .cc-hero h1 { font-size:27px; } .cc-hero>div { flex-basis:calc(100% - 75px); } .cc-hero .cc-kicker { font-size:8px; letter-spacing:1px; } .cc-hero p:not(.cc-kicker) { font-size:12px; } .cc-hero-meta { font-size:10px; gap:6px 13px; } .cc-hero-meta span+span:before { left:-8px; } .cc-hero>button { margin:5px 0 0; width:100%; } .cc-progress-strip { gap:10px; padding:14px; flex-wrap:wrap; } .cc-progress-strip>span { font-size:11px; } .cc-progress-strip strong { font-size:12px; } .cc-progress-strip small { display:none; } .cc-browser-heading { align-items:flex-start; flex-direction:column; gap:15px; } .cc-browser-heading h2 { font-size:22px; } .cc-view-toggle { align-self:stretch; } .cc-view-toggle button { flex:1; } .cc-modules-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:18px 15px; gap:26px 18px; border-radius:18px; } .cc-module-art:after { width:18px; } .cc-module:nth-child(3n) .cc-module-art:after { display:block; } .cc-module:nth-child(2n) .cc-module-art:after,.cc-module:last-child .cc-module-art:after { display:none; } .cc-module-art { border-radius:15px; } .cc-module-number { font-size:10px; left:9px; top:10px; } .cc-badge { top:8px; right:6px; font-size:8px; padding:3px 5px; } .cc-module>strong { font-size:12px; margin-top:16px; } .cc-module-summary { font-size:10px; } .cc-module-meta,.cc-module-progress-copy { font-size:9px; } .cc-module-progress-copy>strong { font-size:10px; } .cc-start-hint { flex-wrap:wrap; gap:10px; } .cc-start-hint p { flex-basis:80%; line-height:1.7; } .cc-start-hint button { margin-left:39px; } .cc-module-detail,.cc-lesson { padding:20px 16px; border-radius:16px; margin-top:24px; } .cc-detail-heading { gap:15px; } .cc-detail-heading h2 { font-size:22px; } .cc-module-count strong { font-size:24px; } .cc-module-context { padding:15px; } .cc-unit-row { gap:10px; padding:18px 0; } .cc-unit-index { width:28px; height:28px; border-radius:7px; font-size:10px; } .cc-unit-copy strong { font-size:13px; line-height:1.7; } .cc-unit-copy small { font-size:11px; } .cc-unit-state { font-size:0; } .cc-unit-state b { font-size:16px; margin:0; } .cc-knowledge-list { padding:16px; } .cc-list-tools { flex-direction:column; gap:12px; } .cc-list-tools label+label { flex:auto; } .cc-lesson-header h2 { font-size:24px; } .cc-lesson-section p { font-size:13px; } .cc-formulas article,.cc-exercises article { padding:15px; } .cc-lesson-footer { flex-direction:column; align-items:stretch; } .cc-next-prev { gap:15px; } }
@media (prefers-reduced-motion:reduce) { .cc-module-art { transition:none; } }

.cc-module-picker { border:1px solid var(--cc-border); border-radius:15px; overflow:hidden; }
.cc-module-picker>summary { padding:17px 20px; cursor:pointer; color:var(--cc-ink); font-size:13px; background:var(--cc-panel); }
.cc-module-picker>summary span { font-weight:650; margin-left:5px; }
.cc-module-picker>summary small { font-size:11px; margin-left:18px; color:var(--cc-muted); }
.cc-module-picker .cc-modules-grid { border-radius:0; }
@media(max-width:600px) { .cc-module-picker>summary small { display:block; margin:8px 0 0 20px; } }