:root { font-family:'Avenir Next','Segoe UI',Arial,sans-serif; color:#303b3a; --paper:#fff; --ink:#303b3a; --muted:#6c7775; --line:#e5ebe8; --accent:#217f74; --soft:#edf7f2; --canvas:#faf4e7; --pink:#f7e4ec; --mint:#e3f2e6; --shadow:#59695612; color-scheme:light; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; }
:root[data-theme="dark"] { color-scheme:dark; --paper:#242e2c; --ink:#eef4f1; --muted:#acbab4; --line:#41514a; --accent:#7cd3bd; --soft:#31483e; --canvas:#252621; --pink:#382b34; --mint:#24392f; --shadow:#0003; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; color:var(--ink); background:radial-gradient(ellipse at 94% 6%,var(--pink),transparent 58%),radial-gradient(ellipse at 0% 0%,var(--mint),transparent 65%),var(--canvas); min-height:100vh; }
button,input,select { font:inherit; color:inherit; }
a { color:var(--accent); }
.app-bar { display:flex; align-items:center; gap:32px; min-height:78px; padding:14px 32px; background:var(--paper); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-size:20px; font-weight:750; letter-spacing:-.7px; }
.brand-mark { display:grid; place-items:center; color:var(--paper); background:var(--accent); border-radius:9px; width:30px; height:30px; font-size:20px; }
.main-nav { display:flex; gap:6px; }
.main-nav button { border:0; color:var(--muted); background:transparent; }
.main-nav button[aria-current="page"] { color:var(--accent); background:var(--soft); }
.account-tools { display:flex; align-items:center; gap:12px; margin-left:auto; }
.account-tools button { border:0; font-size:12px; }
.avatar { display:grid; place-items:center; width:40px; height:40px; background:var(--pink); color:var(--ink); border-radius:13px; font-weight:700; text-decoration:none; }
main { max-width:1480px; margin:0 auto; padding:32px; }
.class-layout { display:grid; grid-template-columns:56px minmax(0,1fr) 284px; gap:20px; align-items:start; }
.tool-rail { display:grid; gap:8px; position:sticky; top:20px; }
.tool-rail button,.tool-rail a { display:grid; justify-items:center; align-content:center; gap:5px; padding:7px 2px; min-height:58px; background:var(--paper); border:0; border-radius:12px; color:var(--muted); text-decoration:none; font-size:9px; font-weight:600; }
.tool-rail button[aria-current="page"] { background:var(--accent); color:var(--paper); }
.tool-rail svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lesson-sheet,.catalog-sheet { background:var(--paper); border-radius:14px; padding:38px 42px; min-width:0; box-shadow:0 5px 22px var(--shadow); }
.lesson-sheet { min-height:calc(100vh - 142px); }
.class-sidebar { border-radius:14px; background:var(--paper); padding:20px; min-width:0; }
.lesson-heading { padding-bottom:16px; }
h1 { font-size:29px; line-height:1.25; letter-spacing:-.7px; margin:10px 0 12px; text-wrap:balance; }
h2 { font-size:21px; letter-spacing:-.3px; margin:25px 0 12px; text-wrap:balance; }
h3 { font-size:17px; margin:16px 0 10px; text-wrap:balance; }
p { line-height:1.65; text-wrap:pretty; }
.eyebrow { color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; line-height:1.6; }
.muted { color:var(--muted); font-size:12px; line-height:1.6; }
.task-context { white-space:pre-wrap; padding:20px; background:var(--soft); border-radius:12px; font-size:14px; line-height:1.75; }
.player { background:var(--soft); padding:18px; border-radius:14px; margin:16px 0; }
.player-label { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:14px; margin-bottom:10px; flex-wrap:wrap; }
audio { display:block; width:100%; height:44px; }
.status-row { display:flex; justify-content:space-between; gap:12px; margin:28px 0 10px; font-size:12px; font-weight:600; }
.teacher-tools { border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:18px; }
.teacher-tools label { display:block; font-size:14px; font-weight:600; margin:8px 0; }
.session-tools { margin-bottom:22px; }
.session-tools strong { font-size:14px; }
.session-tools label { display:block; margin:12px 0 8px; font-size:12px; }
.session-tools button { width:100%; margin:10px 0 0; padding:10px; font-size:12px; }
.session-tools .muted,.teacher-tools .muted { font-size:11px; }
select,input[type="text"],input[type="search"] { width:100%; min-width:0; border:1px solid var(--line); border-radius:9px; padding:11px 12px; min-height:44px; background:var(--paper); color:inherit; font-size:14px; }
fieldset { border:0; padding:20px 0; margin:0; border-bottom:1px solid var(--line); min-width:0; }
legend { padding:0; float:left; width:100%; font-size:15px; line-height:1.6; font-weight:600; margin-bottom:12px; }
.options { clear:both; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.option { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:9px; min-height:44px; padding:12px; cursor:pointer; font-size:14px; line-height:1.5; overflow-wrap:anywhere; transition:background-color 120ms,border-color 120ms; }
.option:hover { background:var(--soft); }
.option:has(input:checked) { border-color:var(--accent); background:var(--soft); }
.option input { accent-color:var(--accent); flex:none; width:16px; height:16px; margin:0; }
.short-answer { clear:both; }
.feedback { min-height:0; font-size:12px; margin:8px 0 0; }
.feedback:empty { display:none; }
.correct { color:var(--accent); }
.incorrect { color:#c44368; }
.actions { padding:24px 0 8px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.actions p { flex-basis:100%; margin:4px 0; font-size:14px; }
button,.button { border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:9px; padding:11px 16px; min-height:44px; cursor:pointer; text-decoration:none; font-size:14px; transition:background-color 120ms,transform 120ms; }
button.primary,.button.primary { background:var(--accent); border-color:var(--accent); color:var(--paper); font-weight:600; }
button:hover,.button:hover { background:var(--soft); }
button.primary:hover,.button.primary:hover { filter:brightness(.95); background:var(--accent); }
button:active,.button:active { transform:scale(.96); }
button:disabled { opacity:.55; cursor:default; }
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.notice { padding:18px; border-radius:12px; background:var(--paper); margin:0 0 16px; line-height:1.6; }
.error { background:#fff0f3; color:#942546; }
details { border:1px solid var(--line); padding:16px; border-radius:12px; margin:12px 0 24px; }
summary { cursor:pointer; font-size:14px; font-weight:600; min-height:24px; }
pre { white-space:pre-wrap; font:inherit; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.material-body { font-size:15px; line-height:1.75; overflow-wrap:anywhere; }
.material-body h2 { padding-top:10px; border-top:1px solid var(--line); color:var(--accent); }
.material-body li { margin:8px 0; }
.material-body li p { margin:0; }
.material-body ul,.material-body ol { padding-left:24px; }
.material-body img,#pictures,.reference-image { display:block; width:100%; height:auto; border-radius:10px; outline:1px solid #0000001a; }
.reference-image { margin:12px 0; }
.lesson-links { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:20px 0 8px; border-top:1px solid var(--line); margin-top:20px; }
.text-link { font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:4px; line-height:1.6; padding:10px 0; }
.outline-details { border:0; padding:0; margin:0; }
.outline-details summary { padding:4px 0 12px; font-size:12px; color:var(--muted); }
.outline-group { border-top:1px solid var(--line); padding:14px 0 8px; }
.outline-group h3 { font-size:12px; margin:0 0 8px; color:var(--muted); }
.outline-link { display:flex; align-items:center; gap:8px; width:100%; border:0; text-align:left; padding:10px; margin:3px 0; min-height:40px; font-size:12px; font-weight:500; background:transparent; border-radius:8px; line-height:1.5; }
.outline-link[aria-current="page"] { background:var(--soft); color:var(--accent); font-weight:700; }
.outline-link:disabled { opacity:.65; }
.lesson-kind { display:inline-block; color:var(--accent); background:var(--soft); font-size:10px; padding:3px 6px; border-radius:4px; flex:none; }
.catalog-filters { display:flex; align-items:end; gap:16px; margin:24px 0 12px; }
.catalog-filters label { display:grid; gap:7px; font-size:12px; font-weight:600; width:250px; }
.catalog-filters .search-label { flex:1; }
.course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:24px 0; }
.course-card { min-width:0; border-bottom:1px solid var(--line); padding-bottom:20px; }
.course-cover { min-height:175px; padding:24px; border-radius:12px; background:var(--mint); color:var(--ink); display:flex; flex-direction:column; justify-content:space-between; gap:20px; }
.course-card:nth-child(3n+2) .course-cover { background:var(--pink); }
.course-card:nth-child(3n+3) .course-cover { background:var(--canvas); }
.course-cover strong { font-size:23px; line-height:1.25; letter-spacing:-.5px; text-wrap:balance; }
.course-cover small { font-size:11px; font-weight:600; }
.course-card h2 { font-size:16px; margin:16px 0 8px; }
.course-card .button { display:inline-flex; align-items:center; margin-top:8px; }
.unit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0; }
.unit-card { border:1px solid var(--line); border-radius:12px; padding:18px; }
.unit-card h2 { font-size:17px; margin:4px 0 12px; }
.unit-card button { text-align:left; width:100%; margin-top:6px; }
.homework-list { display:grid; gap:12px; margin-top:24px; }
.homework-row { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding:16px 0; }
.homework-row h2 { margin:0 0 5px; font-size:16px; }
.skip-link { position:absolute; top:-80px; left:16px; z-index:2; padding:12px; background:var(--paper); }
.skip-link:focus { top:12px; }
@media (max-width:1100px) { main { padding:22px; } .class-layout { grid-template-columns:48px minmax(0,1fr) 246px; gap:14px; } .lesson-sheet { padding:28px; } .class-sidebar { padding:16px; } .course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:780px) { .app-bar { gap:14px; padding:12px 16px; flex-wrap:wrap; } .brand { font-size:18px; } .main-nav { order:3; width:100%; } .main-nav button { flex:1; } main { padding:16px; } .class-layout { display:flex; flex-direction:column; } .class-sidebar { width:100%; order:-2; } .tool-rail { order:-1; position:static; display:flex; width:100%; gap:8px; } .tool-rail button,.tool-rail a { min-height:44px; flex:1; display:flex; justify-content:center; gap:8px; font-size:11px; } .tool-rail svg { width:18px; height:18px; } .lesson-sheet,.catalog-sheet { width:100%; padding:24px; min-height:0; } .teacher-tools { margin-bottom:12px; padding-bottom:12px; } .session-tools { margin-bottom:14px; } .session-tools select { max-width:100%; } .outline-details { border-top:1px solid var(--line); padding-top:12px; } h1 { font-size:25px; } .catalog-filters { flex-direction:column; align-items:stretch; } .catalog-filters label { width:100%; } .homework-row { align-items:start; } }
@media (max-width:480px) { .brand-mark { width:26px; height:26px; } .account-tools { gap:2px; } .lesson-sheet,.catalog-sheet { padding:20px; } .course-grid,.unit-grid,.options { grid-template-columns:1fr; } .course-cover { min-height:150px; } .status-row,.homework-row { flex-direction:column; gap:8px; } .tool-rail { flex-wrap:wrap; } .tool-rail button,.tool-rail a { min-width:90px; } .player-label { gap:6px; } }
@media (prefers-reduced-motion:reduce) { button,.button,.option { transition:none; } }
.outline-group { border:0; border-top:1px solid var(--line); border-radius:0; margin:0; padding:12px 0 6px; }
.outline-group summary { color:var(--ink); font-size:12px; line-height:1.6; min-height:32px; padding:4px 0 8px; }
.task-instructions { white-space:pre-wrap; margin:12px 0 20px; }
#review-feedback { border-top:1px solid var(--line); padding-top:22px; margin-top:22px; }
.review-summary { padding:18px; background:var(--soft); border-radius:12px; font-size:14px; }
.review-summary p { margin:10px 0 0; }
.review-controls { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
textarea { display:block; width:100%; min-height:82px; padding:12px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink); font:inherit; font-size:13px; line-height:1.6; resize:vertical; }
textarea:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.answer-comments:empty { display:none; }
.answer-comment { background:var(--soft); border-radius:9px; padding:12px 14px; margin:12px 0; font-size:13px; }
.answer-comment p { margin:6px 0 0; white-space:pre-wrap; }
.answer-comment small { color:var(--muted); font-size:10px; }
.answer-comment-form { padding:14px 0 0; display:grid; gap:8px; }
.answer-comment-form button { justify-self:start; font-size:12px; min-height:40px; }
.review-history { margin:20px 0; }
.history-answer { white-space:pre-wrap; padding:10px 14px; background:var(--soft); border-radius:9px; }
.review-return-note { white-space:pre-wrap; font-weight:600; }
.review-tabs { display:flex; gap:8px; margin:24px 0; flex-wrap:wrap; }
.review-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:24px 0; }
.review-stat { display:grid; gap:8px; padding:20px; border-radius:12px; background:var(--soft); }
.review-stat:nth-child(2) { background:var(--mint); }
.review-stat:nth-child(3) { background:var(--pink); }
.review-stat strong { font-size:27px; }
.review-stat span { font-size:12px; }
.review-filters { display:flex; gap:12px; margin:20px 0; }
.review-filters select { max-width:270px; }
.review-row { display:grid; grid-template-columns:minmax(0,1fr) 165px auto; align-items:center; gap:18px; border-bottom:1px solid var(--line); padding:24px 0; }
.review-row h2 { font-size:18px; margin:0 0 8px; }
.review-row p { margin:4px 0; }
.review-row-result { display:grid; gap:10px; justify-items:start; }
.review-row-result strong { font-size:20px; }
.review-badge { display:inline-block; background:var(--soft); color:var(--accent); padding:5px 8px; border-radius:5px; font-size:11px; font-weight:600; }
.review-badge.returned { background:var(--pink); color:var(--ink); }
.roster-student { padding:18px 0; border-top:1px solid var(--line); }
.roster-student h2 { margin-top:0; }
.roster-courses { display:grid; gap:8px; margin-top:18px; }
.roster-course { display:flex; align-items:center; gap:12px; padding:14px; min-height:48px; border:1px solid var(--line); border-radius:9px; font-size:14px; }
.roster-course input { accent-color:var(--accent); width:18px; height:18px; flex:none; }
.roster-course .muted { margin-left:auto; }
@media (max-width:780px) { .review-row { grid-template-columns:minmax(0,1fr) auto; } .review-row>button { grid-column:1/-1; justify-self:start; } .main-nav { flex-wrap:wrap; } .main-nav button { padding:10px 12px; } }
@media (max-width:480px) { .review-filters { flex-direction:column; } .review-filters select { max-width:none; } .review-stats { gap:8px; } .review-stat { padding:12px; } .review-stat span { font-size:10px; } .roster-course { flex-wrap:wrap; } .roster-course .muted { flex-basis:100%; margin-left:30px; } }
.answer-comment p,.review-summary p,.history-answer,.roster-course span { overflow-wrap:anywhere; }