:root{color-scheme:light;--canvas:#f8fafd;--ink:#1f1f1f;--secondary:#444746;--blue:#2962ff;--sidebar:300px;--header:65px}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:'Google Sans','Roboto',Arial,sans-serif;font-size:14px;line-height:20px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;flex-shrink:0}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #00639b;outline-offset:2px}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;top:-80px;left:20px;background:#fff;padding:12px;z-index:100}
.skip:focus{top:8px}
.topbar{height:var(--header);display:flex;align-items:center;gap:16px;padding:0 24px 0 16px;position:relative;z-index:5;background:var(--canvas)}
.icon-button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--secondary);flex-shrink:0}
.icon-button:hover{background:#44474614}
.classroom-brand{display:flex;align-items:center;gap:10px;color:var(--secondary);font-size:24px;line-height:32px}
.classroom-logo{width:28px;height:28px;display:block}
.header-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.add{font-size:28px;font-weight:400;margin-right:0}
.app-grid{margin-left:0}
.apps-icon{width:20px;height:20px;fill:currentColor;stroke:none}
.avatar{border:0;background:#005b97;color:#fff;width:32px;height:32px;font-size:18px;line-height:32px;border-radius:50%;margin-left:8px;padding:0}
.profile-menu{position:absolute;right:24px;top:60px;width:240px;background:white;border:1px solid #dadce0;border-radius:16px;padding:24px;box-shadow:0 6px 24px #20212424}
.profile-menu>*{display:block}
.profile-menu span{font-size:14px;color:var(--secondary)}
.profile-menu a{color:var(--blue);margin-top:16px}
.sidebar{position:fixed;left:0;top:77px;bottom:0;width:var(--sidebar);padding:0 12px;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:20px;min-height:48px;height:48px;width:100%;border:0;background:transparent;border-radius:9999px;padding:0 14px;color:var(--secondary);font-size:14px;line-height:20px;text-align:left}
.nav-item:hover{background:#44474614}
.nav-item.active{background:#c2e7ff;color:#004a77;font-weight:500}
.enrolled{margin-top:16px}
.enrolled strong{font-weight:500}
.chevron{margin-left:auto;width:24px}
.enrolled[aria-expanded=false] .chevron{transform:rotate(180deg)}
.class-avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#d3e3fd;color:#174ea6;font-size:16px}
.side-bottom{margin-top:40px}
main{margin-left:var(--sidebar);padding:32px 8px 32px;display:grid;gap:24px}
.panel{background:#fff;border-radius:28px;padding:8px 24px 24px;min-width:0;scroll-margin-top:24px}
.section-head{display:flex;align-items:center;gap:8px;min-height:48px;height:48px;margin-bottom:8px}
h1,h2{font-size:22px;font-weight:400;line-height:28px;margin:0}
.todo-button{margin-left:auto;display:flex;align-items:center;justify-content:center;height:48px;padding:0 16px;border:3px solid #00639b;color:#0057b7;border-radius:9999px;font-size:14px;font-weight:500;line-height:20px;white-space:nowrap}
.todo-button:hover{background:#e8f0fe}
.section-toggle{margin-left:auto;width:40px;height:40px}
.section-toggle svg{width:20px;height:20px}
.todo-button+.section-toggle{margin-left:8px}
.due{min-height:238px}
.assignment-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 128px;align-items:center;gap:16px;min-height:50px;padding:4px;border-radius:8px}
.assignment-row:hover{background:var(--canvas)}
.assignment-primary{display:flex;align-items:center;gap:12px;min-width:0}.assignment-primary>svg{color:var(--secondary)}
.assignment-name{font-size:16px;line-height:24px}
.assignment-class{display:flex;flex-direction:column;gap:2px;color:#0057b7;font-size:14px;line-height:24px}
.assignment-class small{color:var(--secondary);font-size:12px;font-weight:500;line-height:16px}
.due-date{text-align:right;white-space:nowrap;font-size:14px;line-height:20px}
.learning{min-height:136px}
.info{width:18px;height:18px;color:var(--secondary);margin-left:2px}
.learning p{text-align:center;margin:8px 0 0;font-size:16px;line-height:24px}
.classes{min-height:384px}
.add-class{margin-left:auto;color:#0057b7;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;font-weight:500;border-radius:9999px}
.add-class:hover{background:#e8f0fe}
.add-class span{font-size:24px;font-weight:400}
.class-card{position:relative;width:calc((100% - 48px)/4);min-width:240px;max-width:300px;border:1px solid #c4c7c5;border-radius:12px;overflow:hidden;background:#fff}
.class-card:hover{box-shadow:0 2px 5px #20212426}
.class-cover{display:block;position:relative;overflow:hidden;background:#3367d5 url('/assets/classroom-course.jpg') center/cover;color:#fff;min-height:100px;height:100px;padding:16px 16px 8px}
.class-cover:hover h3{text-decoration:underline}
.class-cover h3{font-size:24px;line-height:32px;font-weight:400;margin:0 0 4px}
.class-cover>span{font-size:12px;line-height:16px}
.teacher-avatar{position:absolute;top:64px;right:16px;width:72px;height:72px;border-radius:50%;background:#005346;color:#fff;display:grid;place-items:center;font-family:'Roboto',Arial,sans-serif;font-size:36px;line-height:1}
.class-details{display:flex;flex-direction:column;gap:2px;height:137px;padding:16px;font-size:12px;line-height:16px}
.class-details strong{font-weight:400}
.class-details:hover strong{color:#0057b7;text-decoration:underline}
.class-footer{height:57px;border-top:1px solid #dadce0;display:flex;justify-content:flex-end;gap:16px;padding:8px 4px}
.class-options{position:absolute;bottom:48px;right:8px;padding:12px 20px;background:#fff;border-radius:8px;box-shadow:0 3px 12px #20212438}
.help{position:fixed;bottom:20px;right:20px;color:var(--secondary);background:#f8fafd;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font-size:18px;line-height:1}
.help::before{content:'';position:absolute;width:16px;height:16px;border:2px solid var(--secondary);border-radius:50%}
.nav-closed .sidebar{display:none}
.nav-closed main{margin-left:76px}
[hidden]{display:none!important}
@media(max-width:1100px){
.class-card{width:calc((100% - 16px)/2);max-width:none;min-width:0}
.assignment-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 100px}
}
@media(max-width:900px){
:root{--sidebar:300px}
.sidebar{display:none;top:0;padding-top:12px;background:var(--canvas);z-index:10;border-radius:0 16px 16px 0;box-shadow:0 0 0 100vmax #0005}
.mobile-nav-open .sidebar{display:block}
main,.nav-closed main{margin-left:0;padding:32px 8px}
}
@media(max-width:600px){
.topbar{gap:8px;padding:0 16px 0 12px}
.classroom-brand{font-size:22px;gap:8px}
.header-actions .add{display:none}
.avatar{margin-left:4px}
main,.nav-closed main{padding:16px 8px;gap:16px}
.panel{padding:8px 16px 24px}
.section-head{gap:6px}
h1,h2{font-size:20px;line-height:28px}
.todo-button{font-size:12px;padding:0 10px;height:40px;border-width:2px}
.todo-button+.section-toggle{margin-left:0}
.section-toggle{width:32px}
.assignment-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:4px}
.assignment-name{font-size:16px}
.assignment-class{grid-column:1;grid-row:2;padding-left:36px}
.assignment-class small{display:none}
.due-date{grid-column:2;grid-row:1;font-size:12px}
.due{min-height:198px}
.learning{min-height:160px}
.learning p{max-width:28ch;margin:12px auto 0}
.info{width:16px;height:16px}
.class-card{width:100%;max-width:300px}
.add-class{font-size:12px;gap:4px;padding:0 4px}
.help{bottom:12px;right:12px}
}
@media(prefers-reduced-motion:no-preference){.class-card{transition:box-shadow .18s ease-out}}
/* Study material uses the same Classroom typography, surfaces, and blue links. */
.study-intro,.section-description{font-size:14px;line-height:22px;margin:0 0 16px;max-width:80ch;color:var(--secondary)}
.subject-nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 24px}
.subject-nav a,.reference-list a{color:#0057b7}
.subject-nav a:hover{text-decoration:underline}
.study-today{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.study-today h3{font-size:16px;line-height:24px;font-weight:500;margin:0 0 8px}
.study-today p{font-size:14px;line-height:22px;color:var(--secondary);margin:0}
.reference-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.reference-list>a{display:flex;align-items:center;gap:16px;padding:12px 4px;border-radius:8px}
.reference-list>a:hover{background:var(--canvas)}
.reference-list strong,.reference-list small{display:block}
.reference-list strong{font-size:14px;font-weight:500;line-height:22px}
.reference-list small{font-size:12px;line-height:20px;color:var(--secondary)}
.reference-list>a>span:last-child{margin-left:auto;font-size:24px;color:var(--secondary)}
.study-plan-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:32px}
.plan-checklist label{display:flex;align-items:flex-start;gap:12px;padding:10px 0;cursor:pointer}
.plan-checklist input{accent-color:#0b57d0;width:18px;height:18px;flex-shrink:0;margin:3px 0 0}
.plan-checklist strong,.plan-checklist small{display:block}
.plan-checklist strong{font-size:14px;font-weight:500;line-height:22px}
.plan-checklist small{font-size:12px;color:var(--secondary);line-height:20px}
.plan-checklist input:checked+span strong{text-decoration:line-through;color:#5f6368}
.study-note label{display:block;font-size:14px;line-height:22px;margin:8px 0;font-weight:500}
.study-note textarea{width:100%;resize:vertical;min-height:160px;border:1px solid #747775;border-radius:8px;padding:12px;font:14px/22px 'Google Sans','Roboto',Arial,sans-serif;color:var(--ink);background:#fff}
.study-note textarea:focus{outline:2px solid #0b57d0;outline-offset:1px}
.study-note>span{display:block;font-size:12px;line-height:20px;color:var(--secondary);margin-top:6px}
.subject-notes details{border-top:1px solid #e1e3e1;padding:0}
.subject-notes summary{font-size:16px;line-height:24px;font-weight:500;padding:16px 0;cursor:pointer}
.subject-notes summary:hover{color:#0057b7}
.subject-notes details>div{padding:0 0 16px;max-width:80ch;font-size:14px;line-height:24px}
.subject-notes p{margin:0 0 12px}
.subject-notes p:last-child{margin-bottom:0}
.subject-notes .worked-example{font-size:18px;line-height:28px;padding:12px 0}
.quick-checks{margin-top:8px}
.learning{min-height:136px}
.learning-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:8px;font-size:14px;line-height:24px}
.learning-links a{color:#0057b7;display:flex;align-items:center;gap:8px}
.learning-links a:hover{text-decoration:underline}
.learning-links svg{width:20px;height:20px}
@media(max-width:1100px){.study-today{grid-template-columns:1fr;gap:20px}.study-plan-layout{grid-template-columns:1fr;gap:16px}}
@media(max-width:600px){.reference-list{grid-template-columns:1fr}.subject-nav{gap:12px 16px}.study-intro,.section-description{font-size:14px}.subject-notes summary{font-size:14px}.study-note textarea{font-size:16px}}