.ci-shell { --ci-yellow:#f3ce59; --ci-yellow-soft:#fcf6df; --ci-success:#eaf4e7; --ci-retry:#fff1e8; --ci-paper:var(--cc-card); width:min(820px,100%); padding:0; overflow:hidden; border-radius:23px; box-shadow:0 14px 55px #343b2410; }
.cc-study-page { padding-bottom:35px; }
.cc-study-page .course-detail-back { max-width:820px; margin:10px auto 0; }
.ci-shell button,.ci-shell input { font:inherit; }
.ci-shell button:disabled { cursor:not-allowed; opacity:.45; }
.ci-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 28px; border-bottom:1px solid var(--cc-border); }
.ci-header>div { display:flex; align-items:center; gap:12px; min-width:0; }
.ci-brand-star { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--ci-yellow); color:#51451e; font-size:27px; flex-shrink:0; }
.ci-header strong { display:block; font-size:15px; font-weight:650; line-height:1.65; }
.ci-header small { display:block; color:var(--cc-muted); font-size:10px; line-height:1.7; margin-top:3px; }
.ci-header>button { border:0; padding:8px 0; background:transparent; color:var(--cc-muted); font-size:11px; flex-shrink:0; }
.ci-progress-wrap { padding:22px 30px 0; }
.ci-progress { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.ci-progress button { display:flex; flex-direction:column; align-items:stretch; gap:7px; border:0; background:transparent; padding:0; color:var(--cc-muted); }
.ci-progress i { height:5px; background:var(--cc-panel); border-radius:6px; }
.ci-progress .is-done i,.ci-progress .is-current i { background:var(--ci-yellow); }
.ci-progress .is-current { color:var(--cc-ink); font-weight:650; }
.ci-progress span { font-size:10px; white-space:nowrap; }
.ci-progress button:disabled { opacity:.6; }
.ci-progress-info { display:flex; justify-content:space-between; gap:15px; margin-top:17px; color:var(--cc-muted); font-size:11px; }
.ci-main { padding:27px 35px 20px; scroll-margin-top:90px; outline:none; }
.ci-main .ci-eyebrow { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--cc-muted); margin:0 0 10px; letter-spacing:.7px; }
.ci-eyebrow:before { content:''; width:7px; height:7px; border-radius:50%; background:var(--ci-yellow); flex-shrink:0; }
.ci-main h2 { font-size:29px; line-height:1.45; letter-spacing:-.7px; margin:0 0 15px; font-weight:650; }
.ci-description { line-height:1.95; font-size:14px; margin:0 0 22px; color:var(--cc-muted); white-space:pre-line; overflow-wrap:anywhere; }
.ci-scene-mark { background:var(--ci-yellow-soft); border-radius:13px; padding:17px 20px; margin:22px 0; }
.ci-scene-mark span { font-size:11px; color:#8b752c; }
.ci-scene-mark p { font-size:12px; line-height:1.8; margin:6px 0 0; }
.ci-question h3 { font-size:16px; font-weight:600; line-height:1.9; margin:24px 0 14px; white-space:pre-line; }
.ci-options { display:grid; gap:10px; }
.ci-option { display:flex; align-items:center; gap:12px; width:100%; padding:15px; border:1px solid var(--cc-border); border-radius:12px; color:var(--cc-ink); background:var(--ci-paper); text-align:left; min-height:55px; }
.ci-option>span { width:25px; height:25px; display:grid; place-items:center; border:1px solid var(--cc-border); border-radius:7px; font-size:11px; color:var(--cc-muted); flex-shrink:0; }
.ci-option>b { font-size:13px; line-height:1.75; font-weight:450; overflow-wrap:anywhere; }
.ci-option:hover:not(:disabled) { background:var(--cc-panel); }
.ci-option.is-selected { border-color:#889579; background:var(--cc-panel); }
.ci-option.is-selected>span { background:#46523c; color:#fff; border-color:transparent; }
.ci-option.is-correct { border-color:#8ca97b; background:var(--ci-success); }
.ci-option.is-incorrect { border-color:#d7ae94; }
.ci-option:disabled { opacity:1!important; }
.ci-check { margin:16px 0 0; border:1px solid var(--cc-border); border-radius:9px; padding:10px 16px; background:var(--cc-panel); color:var(--cc-ink); font-size:12px!important; font-weight:600!important; min-height:40px; }
.ci-hint-trigger { margin:16px 0 0 15px; padding:9px 0; border:0; background:transparent; color:var(--cc-muted); text-decoration:underline; text-underline-offset:4px; font-size:11px!important; }
.ci-hint { background:var(--ci-yellow-soft); padding:15px 18px; border-radius:11px; margin-top:16px; }
.ci-hint > span { color:#8b752c; font-size:11px; }
.ci-hint p { margin:5px 0 0; font-size:13px; line-height:1.85; white-space:pre-line; }
.ci-feedback { border-radius:12px; padding:16px 18px; margin-top:18px; background:var(--cc-panel); }
.ci-feedback strong { font-size:13px; }
.ci-feedback p { font-size:13px; line-height:1.9; margin:6px 0 0; white-space:pre-line; }
.ci-feedback.is-success { background:var(--ci-success); color:var(--cc-green); }
.ci-feedback.is-retry { background:var(--ci-retry); color:#955936; }
.ci-feedback.is-neutral { background:var(--ci-yellow-soft); }
.ci-inline-error { color:#ac5335; font-size:12px; line-height:1.8; margin:8px 0 0; }
.ci-inline-error:empty { display:none; }
.ci-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 35px 28px; }
.ci-footer>div { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.ci-footer>div>span { font-size:10px; color:var(--cc-muted); line-height:1.7; }
.ci-primary { border:0; border-radius:11px; background:var(--ci-yellow); color:#302b1f; padding:13px 21px; font-weight:650!important; font-size:13px!important; min-height:46px; }
.ci-primary:hover:not(:disabled) { background:#edc340; }
.ci-back { color:var(--cc-muted); border:0; background:transparent; padding:4px 0; font-size:11px!important; }
.ci-reference { padding:16px 30px; border-top:1px solid var(--cc-border); background:var(--cc-panel); font-size:11px; color:var(--cc-muted); line-height:1.8; }
.ci-reference summary { cursor:pointer; }
.ci-reference p { margin:12px 0; font-size:12px; }
.ci-reference button { color:var(--cc-green); background:transparent; border:0; font-size:11px; text-decoration:underline; text-underline-offset:4px; padding:6px 10px 6px 0; }
.ci-experiment { padding:20px; background:var(--cc-panel); border-radius:16px; }
.ci-experiment-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.ci-experiment-tabs button { flex:1; display:flex; align-items:center; gap:7px; padding:10px; color:var(--cc-muted); border:1px solid var(--cc-border); border-radius:8px; background:var(--ci-paper); font-size:11px; line-height:1.8; }
.ci-experiment-tabs button>span:first-child { font-size:10px; }
.ci-experiment-tabs button[aria-pressed="true"] { background:#43513b; border-color:#43513b; color:#fff; }
.ci-observation { margin:20px 0 0; padding:22px 20px; background:var(--ci-paper); border-radius:12px; min-height:165px; }
.ci-observation>span { color:var(--cc-muted); font-size:10px; }
.ci-observation>strong { display:block; font-size:23px; font-family:Georgia,'Noto Sans SC',serif; line-height:1.65; margin:12px 0; overflow-wrap:anywhere; white-space:pre-line; font-weight:500; }
.ci-observation p { font-size:13px; line-height:1.9; margin:0; }
.ci-range-label { display:block; margin-top:18px; font-size:11px; color:var(--cc-muted); }
.ci-range-label small { float:right; }
.ci-range-label input { width:100%; height:30px; accent-color:#60834d; margin:8px 0 0; }
.ci-discovery { margin-top:18px; padding:14px 17px; border:1px dashed var(--cc-border); border-radius:11px; }
.ci-discovery>span { font-size:11px; color:var(--cc-muted); }
.ci-discovery p { font-size:13px; line-height:1.9; margin:5px 0 0; }
.ci-discovery.is-ready { background:var(--ci-success); border-color:transparent; }
.ci-discovery.is-ready>span { color:var(--cc-green); }
.ci-bridge-steps { display:flex; gap:9px; margin:18px 0; }
.ci-bridge-steps > span { flex:1; padding:9px 12px; border-radius:8px; background:var(--cc-panel); font-size:11px; line-height:1.7; color:var(--cc-muted); }
.ci-bridge-steps .is-active { background:var(--ci-success); color:var(--cc-green); }
.ci-worked-step { padding:23px; background:var(--cc-panel); border-radius:15px; font-size:15px; line-height:2; white-space:pre-line; overflow-wrap:anywhere; }
.ci-numeric-form label { font-size:12px; color:var(--cc-muted); display:block; margin-bottom:9px; }
.ci-numeric-form>div { display:flex; gap:10px; align-items:stretch; }
.ci-numeric-form input { min-width:0; width:180px; border:1px solid var(--cc-border); border-radius:10px; background:var(--ci-paper); color:var(--cc-ink); padding:10px 13px; font-size:17px; }
.ci-numeric-form .ci-check { margin:0; }
.ci-receipt-heading { text-align:center; }
.ci-receipt-star { display:grid; place-items:center; width:66px; height:66px; border-radius:21px; font-size:42px; color:#a18a39; background:var(--ci-yellow-soft); margin:5px auto 21px; transform:rotate(-7deg); }
.ci-receipt-heading .ci-eyebrow { justify-content:center; }
.ci-receipt-heading>p:last-child { color:var(--cc-muted); font-size:13px; line-height:1.9; }
.ci-takeaways { list-style:none; padding:0; margin:25px 0; }
.ci-takeaways li { display:flex; gap:15px; border-bottom:1px solid var(--cc-border); padding:15px 0; align-items:baseline; }
.ci-takeaways li>span { color:var(--cc-green); font-size:11px; }
.ci-takeaways p { font-size:13px; line-height:1.9; margin:0; }
.ci-receipt-evidence { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--cc-panel); padding:19px; border-radius:12px; gap:17px; }
.ci-receipt-evidence article>* { display:block; }
.ci-receipt-evidence span,.ci-receipt-evidence small { color:var(--cc-muted); font-size:10px; line-height:1.75; }
.ci-receipt-evidence strong { font-size:18px; margin:8px 0; line-height:1.5; }
.ci-receipt-note { font-size:11px; line-height:1.9; color:var(--cc-muted); margin:17px 0 23px; }
.ci-receipt-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.ci-receipt-actions>button:not(.ci-primary) { border:0; background:transparent; color:var(--cc-muted); text-decoration:underline; text-underline-offset:4px; padding:8px 0; font-size:11px; }
.ci-secant-lab { background:var(--cc-panel); border-radius:16px; padding:20px; }
.ci-lab-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ci-lab-head > span,.ci-lab-head > div > span,.ci-lab-head small { font-size:11px; color:var(--cc-muted); }
.ci-lab-head strong { display:block; font-size:29px; font-weight:550; font-variant-numeric:tabular-nums; margin-top:7px; }
.ci-secant-lab [data-ci-graph] > svg { width:100%; margin-top:17px; overflow:visible; }
.ci-secant-lab [data-ci-graph] > svg text { fill:var(--cc-muted); font-size:11px; font-family:inherit; }
.ci-grid-lines { fill:none; stroke:var(--cc-border); stroke-width:.7; }
.ci-axes { fill:none; stroke:var(--cc-muted); stroke-width:1; }
.ci-curve { fill:none; stroke:#a387d6; stroke-width:3; }
.ci-secant { fill:none; stroke:#519456; stroke-width:2.5; }
.ci-tangent { fill:none; stroke:#6888b0; stroke-width:2; stroke-dasharray:6 4; }
.ci-fixed-point { fill:#e3bd4d; stroke:var(--ci-paper); stroke-width:2; }
.ci-moving-point { fill:#4d9757; stroke:var(--ci-paper); stroke-width:2; }
.ci-legend { display:flex; flex-wrap:wrap; gap:7px 18px; font-size:10px; color:var(--cc-muted); }
.ci-lab-sides { display:flex; gap:10px; margin:13px 0; }
.ci-lab-sides button { flex:1; border:1px solid var(--cc-border); border-radius:9px; background:var(--ci-paper); padding:10px; font-size:12px; color:var(--cc-ink); }
.ci-lab-sides button[aria-pressed="true"] { background:#43513b; color:#fff; }
.ci-lab-equation { padding-top:13px; border-top:1px solid var(--cc-border); font-size:13px; text-align:center; line-height:1.8; overflow-wrap:anywhere; }
.ci-secant-lab>small { display:block; font-size:10px; color:var(--cc-muted); line-height:1.8; }
[data-theme="dark"] .ci-shell { --ci-yellow-soft:#373122; --ci-success:#273e29; --ci-retry:#382c25; }
[data-theme="dark"] .ci-feedback.is-retry { color:#e4b08f; }
[data-theme="dark"] .ci-hint > span,[data-theme="dark"] .ci-scene-mark span { color:#e1c668; }
@media(max-width:600px) { .cc-study-page .course-detail-back { margin-top:0; } .ci-shell { margin-top:18px; border-radius:17px; } .ci-header { padding:17px; gap:12px; } .ci-header strong { font-size:13px; } .ci-header small { font-size:9px; } .ci-brand-star { width:31px; height:31px; font-size:24px; border-radius:10px; } .ci-header>button { font-size:10px; } .ci-progress-wrap { padding:18px 18px 0; } .ci-progress { gap:5px; } .ci-progress span { font-size:8px; letter-spacing:-.3px; } .ci-progress-info { font-size:10px; margin-top:12px; } .ci-main { padding:23px 18px 16px; } .ci-main h2 { font-size:24px; line-height:1.5; } .ci-description { font-size:13px; } .ci-scene-mark { padding:14px 15px; } .ci-question h3 { font-size:14px; } .ci-option { padding:12px; gap:9px; } .ci-option>b { font-size:12px; } .ci-option>span { width:23px; height:23px; } .ci-footer { padding:12px 18px 22px; gap:10px; } .ci-footer>div>span { font-size:9px; max-width:110px; } .ci-primary { padding:12px 15px; font-size:12px!important; } .ci-reference { padding:15px 18px; } .ci-hint-trigger { margin-left:12px; font-size:10px!important; } .ci-feedback { padding:14px; } .ci-feedback p { font-size:12px; } .ci-experiment { padding:14px; } .ci-experiment-tabs { flex-direction:column; gap:6px; } .ci-experiment-tabs button { padding:8px 10px; } .ci-observation { padding:17px 14px; } .ci-observation>strong { font-size:21px; } .ci-observation p { font-size:12px; } .ci-worked-step { padding:18px; font-size:13px; } .ci-bridge-steps > span { padding:8px; font-size:10px; } .ci-receipt-evidence { grid-template-columns:1fr; gap:15px; } .ci-receipt-evidence article { display:grid; grid-template-columns:1fr 1fr; align-items:center; } .ci-receipt-evidence strong { margin:0; font-size:16px; text-align:right; } .ci-receipt-evidence small { grid-column:1/-1; } .ci-receipt-actions { flex-direction:column-reverse; align-items:stretch; text-align:center; } .ci-secant-lab { padding:15px; } .ci-lab-head strong { font-size:24px; } .ci-lab-equation { font-size:11px; } .ci-lab-sides button { font-size:11px; padding:9px; } }
@media(prefers-reduced-motion:reduce) { .ci-shell * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

/* One task, clear feedback, and a coach at hand across every calculus unit. */
.ci-tutor-wrap{padding:0 35px 24px}.ci-question{border:1px solid transparent;border-radius:16px;padding:0 0 4px;transition:border-color .2s}.ci-question.is-answered-correct{border-color:#93b384;padding:0 16px 16px}.ci-question.is-answered-retry{border-color:#d5b159;padding:0 16px 16px}.ci-feedback-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.ci-feedback-actions button{padding:8px 12px;border:1px solid currentColor;border-radius:9px;background:transparent;color:inherit;font-size:11px;cursor:pointer}.ci-keypad{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px!important;max-width:420px;margin:12px 0 0}.ci-keypad button{min-height:39px;border:1px solid var(--cc-border);border-bottom-width:3px;background:var(--ci-paper);color:var(--cc-ink);border-radius:8px;font-size:15px;cursor:pointer}.ci-keypad button:active{transform:translateY(2px);border-bottom-width:1px}.ci-keypad button:focus-visible{outline:2px solid #987dbb;outline-offset:2px}.ci-numeric-form>div:first-of-type{flex-wrap:wrap}.ci-numeric-form input{flex:1;min-width:100px;max-width:250px}

@media(max-width:600px){.ci-tutor-wrap{padding:0 18px 20px}.ci-question.is-answered-correct,.ci-question.is-answered-retry{padding:0 10px 12px}.ci-keypad{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px!important}.ci-keypad button{min-height:40px;font-size:14px}}

.ci-scene-mark{display:flex;align-items:center;gap:16px;padding:12px 16px;margin:16px 0}.ci-scene-mark>span{white-space:nowrap}.ci-scene-mark>p{margin:0}.ci-question h3{margin-top:18px}.ci-option{min-height:50px;padding:12px 15px}@media(max-width:600px){.ci-scene-mark{display:block}.ci-scene-mark>p{margin-top:5px}}