/* A student workspace: one invitation, a place for activities, and honest progress.
   Corners, gaps and type sizes come from the scales in tokens.css. Every card
   here (the featured activity, each activity row, progress, feedback, the
   activity page) takes --r-card; icon tiles and fields inside a card take
   --r-sm, buttons --r-btn, and chips and number badges --r-xs. */
body[data-student="1"] {
  --student-tint: var(--accent-soft);
  --student-line: color-mix(in srgb, var(--c-accent-ink) 25%, var(--border));
}
#p-screen-start.is-class { max-width: 1140px; padding: var(--sp-24) var(--sp-32) 4rem; }
#class-page .cp-banner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center; gap: var(--sp-8) var(--sp-32); padding: 0 0 var(--sp-24); margin: 0;
  border: 0; background: none; overflow: visible;
}
.cp-welcome-copy { min-width: 0; }
#class-page .cp-banner-eyebrow { margin: 0 0 var(--sp-8); font-size: var(--fs-14); font-weight: 600; color: var(--c-accent-ink); }
#class-page .cp-title { margin: 0 0 var(--sp-8); font: 700 clamp(1.8rem, 3.5vw, 2.75rem)/1.12 var(--font-play); letter-spacing: -.022em; overflow-wrap: anywhere; }
#class-page .cp-sub { max-width: 56ch; font-size: .95rem; line-height: 1.65; }
.cp-welcome-art { position: relative; display: flex; align-items: center; justify-content: end; gap: var(--sp-8); padding-right: var(--sp-8); }
.cp-welcome-art img { width: 57px; height: 96px; transform: rotate(5deg); }
/* The bubble's tail is the one small corner, pointing at the parrot. */
.cp-speech { position: relative; align-self: start; margin-top: var(--sp-8); padding: .75rem var(--sp-16); border: 1px solid var(--student-line); border-radius: var(--r-card) var(--r-card) var(--r-xs) var(--r-card); color: var(--c-accent-ink); background: var(--card); font: 650 var(--fs-14)/1.4 var(--font-play); transform: rotate(-4deg); }
#class-page .cp-classes { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: var(--sp-8); margin: var(--sp-8) 0 0; }
/* Switching class is a button, so it has a button's corner and height. */
#class-page .cp-class-pill, #class-page .cp-class-add { min-height: 44px; font: 600 var(--fs-13)/1.4 var(--font-body); padding: var(--sp-8) .75rem; border: 1px solid var(--border); border-radius: var(--r-btn); max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#class-page .cp-class-pill.is-on { color: var(--c-accent-ink); border-color: var(--student-line); background: var(--accent-soft); }
#class-page .cp-class-add { background: transparent; border-style: dashed; }
.cp-class-select-wrap { display: none; }
#cp-feature { margin-bottom: var(--sp-24); }
.cp-feature-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: center; gap: var(--sp-32); padding: var(--sp-24); border: 1px solid var(--student-line); border-radius: var(--r-card); background: var(--student-tint); overflow: hidden; }
.cp-feature-copy { min-width: 0; }
.cp-feature-kicker { margin: 0 0 var(--sp-8); color: var(--c-accent-ink); font: 650 var(--fs-14)/1.5 var(--font-play); }
.cp-feature-card h2 { margin: 0; font: 700 clamp(1.45rem, 2.5vw, 1.85rem)/1.25 var(--font-play); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cp-feature-meta { margin: var(--sp-8) 0; color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.6; }
.cp-feature-note { margin: var(--sp-8) 0 var(--sp-16); font-size: var(--fs-14); line-height: 1.5; }
.cp-feature-feedback { margin: var(--sp-8) 0 var(--sp-16); padding: 0 0 0 var(--sp-16); border-left: 3px solid var(--student-line); max-width: 64ch; font-size: var(--fs-14); line-height: 1.5; }
.cp-feature-go { display: inline-flex; gap: var(--sp-16); min-height: 48px; padding: .75rem var(--sp-16); font-size: var(--fs-14); border-radius: var(--r-btn); box-shadow: 0 3px 0 var(--under-teal); }
.cp-feature-go svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* A tile like the activity icons, only larger, so it has the card's corner.
   No offset shadow under it: cards carry almost none. */
.cp-feature-icon { display: grid; place-items: center; width: 120px; height: 120px; background: var(--card); border: 1px solid var(--student-line); border-radius: var(--r-card); color: var(--c-accent-ink); transform: rotate(7deg); }
/* The one large icon: a lighter stroke, so scaling it up does not make it heavy. */
.cp-feature-icon svg { width: 56px; height: 56px; stroke-width: 1.5; }
.cp-feature-card:is(.is-quiet,.is-unavailable) { display: block; }
.cp-feature-card:is(.is-quiet,.is-unavailable) p { margin: var(--sp-8) 0 0; max-width: 64ch; color: var(--fg-muted); line-height: 1.65; font-size: var(--fs-14); }
.cp-feature-card.is-unavailable { background: var(--card); border-color: var(--border-strong); }
.cp-feature-card.is-unavailable .btn { margin-top: var(--sp-16); }
/* On a wide screen the tabs and their panels take the left and most of the
   width; the summary column sits narrower on the right. The markup keeps the
   summary first (index.html), because on one column Your progress and the
   three cards lead, above the activity list; here grid placement puts each
   column on its own side instead. */
#class-page .cp-grid { display: grid; grid-template-columns: minmax(0,1fr) 245px; gap: var(--sp-32); align-items: start; }
#class-page .cp-grid > .cp-main { grid-column: 1; grid-row: 1; }
#class-page .cp-grid > .cp-rail { grid-column: 2; grid-row: 1; }
#class-page .cp-grid:has(#cp-overview[hidden]) { grid-template-columns: minmax(0,1fr); }
#class-page .cp-tabs { gap: var(--sp-24); border-bottom: 1px solid var(--border); margin: 0 0 var(--sp-16); }
#cp-panels { min-width: 0; min-height: min(420px, 65vh); }
#class-page .cp-tab { min-height: 48px; padding: var(--sp-8) 0 .75rem; font: 650 var(--fs-16)/1.3 var(--font-play); color: var(--fg-muted); border-bottom-width: 3px; }
#class-page .cp-tab.is-on { color: var(--c-accent-ink); border-color: var(--c-accent-ink); }
#class-page .cp-list { gap: var(--sp-16); }
#class-page .cp-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: var(--sp-16); padding: var(--sp-16); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); text-align: left; min-height: 120px; align-items: center; box-shadow: 0 2px 0 var(--border); }
#class-page .cp-row:hover { border-color: var(--student-line); background: color-mix(in srgb, var(--accent-soft) 28%, var(--card)); }
#class-page .cp-row-emoji { display: grid; place-items: center; width: 48px; height: 52px; border: 0; border-radius: var(--r-sm); background: var(--bg-soft); }
#class-page .cp-row-emoji svg { width: 24px; height: 24px; }
#class-page .cp-row-name { font: 650 1.08rem/1.3 var(--font-play); }
#class-page .cp-row-meta { font-size: var(--fs-13); line-height: 1.65; margin-top: var(--sp-4); }
#class-page .cp-row-mode { font-weight: 600; }
.cp-due { display: block; margin-top: var(--sp-8); color: var(--fg-muted); font: 600 var(--fs-13)/1.6 var(--font-body); }
.cp-feature-copy > .cp-due { margin: -.25rem 0 var(--sp-16); }
.cp-due.is-late, .cw-due.is-late, #cw-eyebrow.is-late { color: var(--c-overdue); }
.cp-row-progress { display: block; width: min(100%, 190px); height: 5px; margin-top: var(--sp-8); border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.cp-row-progress > span { display: block; height: 100%; background: var(--c-teal); border-radius: inherit; }
#class-page .cp-row-end { max-width: 140px; gap: var(--sp-8); margin: 0; width: auto; }
#class-page .cp-row-action { font-size: var(--fs-13); color: var(--c-accent-ink); }
#class-page .cp-chip { display: inline-block; border: 0; padding: var(--sp-4) var(--sp-8); margin: 0; border-radius: var(--r-xs); font: 600 var(--fs-13)/1.4 var(--font-body); }
#class-page .cp-chip.is-redo { background: color-mix(in srgb, var(--c-gold) 15%, var(--card)); color: var(--c-gold-deep); }
#class-page .cp-chip.is-late { color: var(--c-overdue); background: color-mix(in srgb, var(--c-overdue) 12%, var(--card)); }
/* Past due and no longer answerable (the teacher's late-work choice): a fact,
   not a nudge, so neutral rather than the overdue red or the redo gold. */
#class-page .cp-chip:is(.is-closed,.is-view) { color: var(--fg); background: var(--bg-soft); }
#class-page .cp-chip:is(.is-complete,.is-marked,.is-sent) { color: var(--c-accent-ink); background: var(--accent-soft); }
#class-page .cp-rail { position: static; gap: var(--sp-16); padding-top: 0; }
.cp-overview-card { padding: var(--sp-24); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); }
.cp-overview-title { font: 650 var(--fs-16)/1.3 var(--font-play); margin: 0 0 var(--sp-16); }
.cp-progress-figure { margin: 0; font: 600 var(--fs-16)/1.2 var(--font-play); color: var(--fg-muted); }
.cp-progress-figure strong { font-size: 2.5rem; color: var(--c-accent-ink); font-weight: 700; }
.cp-progress-caption { margin: var(--sp-4) 0 var(--sp-16); color: var(--fg-muted); font-size: var(--fs-13); }
.cp-overview-card progress { appearance: none; border: 0; border-radius: var(--r-pill); overflow: hidden; width: 100%; height: 9px; background: var(--track); color: var(--c-teal); }
.cp-overview-card progress::-webkit-progress-bar { background: var(--track); border-radius: var(--r-pill); }
.cp-overview-card progress::-webkit-progress-value { background: var(--c-teal); border-radius: var(--r-pill); }
.cp-overview-card progress::-moz-progress-bar { background: var(--c-teal); border-radius: var(--r-pill); }
.cp-overview-note { margin: var(--sp-16) 0 0; color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.65; }
/* The Schedule, Grades and Feedback cards: the progress card's surface, corner,
   border and title, so the column reads as one set. Each card's one button
   stretches over it (::after), so the whole card is the target while the
   button's name stays the action alone. */
.cp-summary { display: grid; gap: var(--sp-16); }
.cp-sum-card { position: relative; display: grid; gap: var(--sp-16); padding: var(--sp-24); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); }
.cp-sum-card:hover { border-color: var(--student-line); background: color-mix(in srgb, var(--accent-soft) 28%, var(--card)); }
.cp-sum-head { display: flex; align-items: center; gap: var(--sp-8); }
.cp-sum-icon { display: grid; place-items: center; flex: none; color: var(--c-accent-ink); }
.cp-sum-icon svg { width: 20px; height: 20px; }
.cp-sum-title { margin: 0; font: 650 var(--fs-16)/1.3 var(--font-play); }
.cp-sum-body { display: grid; min-width: 0; }
.cp-sum-body > * { margin: 0; }
.cp-sum-lead, .cp-sum-note, .cp-sum-more, .cp-sum-message { color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.55; }
.cp-sum-name { font: 600 var(--fs-16)/1.4 var(--font-play); overflow-wrap: anywhere; }
.cp-sum-when { color: var(--fg-muted); font: 600 var(--fs-13)/1.55 var(--font-body); }
.cp-sum-when.is-late { color: var(--c-overdue); }
.cp-sum-more { margin-top: var(--sp-8); }
.cp-sum-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-8); margin-top: var(--sp-8); }
.cp-sum-score strong { color: var(--fg); font: 700 var(--fs-24)/1.2 var(--font-play); font-variant-numeric: tabular-nums; }
.cp-sum-score span { color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; }
.cp-sum-body > .cp-sum-quote { margin-top: var(--sp-8); padding-left: var(--sp-8); border-left: 2px solid var(--border-strong); font-size: var(--fs-13); line-height: 1.55; overflow-wrap: anywhere; }
.cp-sum-short { display: none; margin: 0; color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.4; }
.cp-sum-go { display: inline-flex; align-items: center; gap: var(--sp-4); justify-self: start; min-height: 44px; margin: calc(-1 * var(--sp-8)) 0; padding: 0; border: 0; background: none; color: var(--c-accent-ink); font: 600 var(--fs-14)/1.4 var(--font-body); cursor: pointer; }
.cp-sum-go::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.cp-sum-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-sum-go:focus-visible { box-shadow: none; }
.cp-sum-go:focus-visible::after { box-shadow: 0 0 0 var(--ring-w) var(--ring); }
/* Inset by the card's padding above it, so the note's text lines up with the card's. */
.cp-voice-note { margin-top: var(--sp-8); padding: 0 var(--sp-24); }
.cp-voice-note svg { width: 27px; height: 27px; stroke: var(--c-accent-ink); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.cp-voice-note h2 { font: 650 .95rem/1.4 var(--font-play); margin: var(--sp-8) 0; }
.cp-voice-note p { margin: 0; color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.7; }
#class-page .cp-empty { padding: var(--sp-24); background: var(--card); border: 1px dashed var(--border-strong); border-radius: var(--r-card); font-size: .92rem; line-height: 1.7; }
#class-page .cp-empty-welcome { padding: var(--sp-48) var(--sp-24); text-align: center; }
.cp-empty-welcome svg { width: 46px; height: 46px; stroke: var(--c-accent-ink); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.cp-empty-welcome h2 { margin: var(--sp-16) 0 var(--sp-8); font: 700 var(--fs-24)/1.3 var(--font-play); color: var(--fg); }
.cp-empty-welcome p { margin: 0; }
#class-page .cp-mark { padding: var(--sp-24); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); }
#class-page .cp-mark-q { font: 650 1.05rem/1.5 var(--font-play); margin-bottom: var(--sp-16); }
#class-page .cp-mark-fb { border-color: var(--c-teal); font-size: .92rem; padding-left: var(--sp-16); }
.cp-feedback-retry { margin-top: var(--sp-16); min-height: 44px; }
#class-page .cp-group-head { padding: 0 0 var(--sp-16); }
#class-page .cp-group-name { font-size: var(--fs-18); white-space: normal; overflow-wrap: anywhere; }
#class-page .cp-group-figure { font-size: var(--fs-24); }
#class-page .cp-group + .cp-group { margin-top: var(--sp-32); }
#p-screen-work { max-width: 880px; padding-top: var(--sp-32); padding-bottom: 4rem; }
/* The head and the actions under it are one card drawn in two parts. */
#p-screen-work .cw-head { margin: 0; padding: var(--sp-24) var(--sp-32); background: var(--accent-soft); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--r-card) var(--r-card) 0 0; }
#p-screen-work .cw-title { font: 700 clamp(1.7rem, 4vw, 2.3rem)/1.2 var(--font-play); letter-spacing: -.025em; overflow-wrap: anywhere; }
#p-screen-work .cw-mode { align-items: center; line-height: 1.6; font-size: var(--fs-14); }
#p-screen-work .cw-mode-tag { background: var(--card); padding: var(--sp-4) .75rem; border-radius: var(--r-xs); }
#p-screen-work .cw-actions { margin: 0 0 var(--sp-24); padding: 0 var(--sp-32) var(--sp-24); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r-card) var(--r-card); background: var(--accent-soft); }
#p-screen-work .cw-actions .btn { min-height: 48px; border-radius: var(--r-btn); }
#p-screen-work .cw-list { gap: var(--sp-16); }
#p-screen-work .cw-item { padding: var(--sp-24); box-shadow: 0 2px 0 var(--border); border: 1px solid var(--border); border-radius: var(--r-card); }
#p-screen-work .cw-item.needs-redo { border-color: var(--c-gold); }
.cw-redo-heading { margin: 0 0 var(--sp-16); color: var(--c-gold-deep); font: 600 var(--fs-13)/1.4 var(--font-body); }
#p-screen-work .cw-num { flex: none; width: 32px; height: 32px; border-radius: var(--r-xs); font: 650 var(--fs-14) var(--font-play); }
#p-screen-work .is-answered .cw-num { color: var(--c-accent-ink); background: var(--accent-soft); }
#p-screen-work .cw-q { font: 650 var(--fs-18)/1.5 var(--font-play); padding-top: .1rem; }
#p-screen-work .cw-mark { padding: var(--sp-16); border-radius: var(--r-sm); border-inline-start-width: 3px; }
#p-screen-work .cw-fb { font-size: .92rem; }
/* Starts under the question text: the 32px number and the head's gap. */
#p-screen-work .cw-none { padding-left: calc(32px + var(--sp-16)); font-size: var(--fs-14); }
@media (max-width: 920px) {
  #class-page .cp-grid { grid-template-columns: minmax(0,1fr); gap: var(--sp-24); }
  #class-page .cp-grid > .cp-main, #class-page .cp-grid > .cp-rail { grid-column: auto; grid-row: auto; }
  /* One column: Your progress, then the three cards as a compact row, then the
     tabs and the activity list. The tip goes, so the list stays near the top. */
  #class-page .cp-rail { padding-top: 0; display: grid; grid-template-columns: minmax(0,1fr); }
  .cp-voice-note { display: none; }
  .cp-summary { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-8); }
  .cp-sum-card { align-content: start; gap: var(--sp-8); padding: var(--sp-16); }
  .cp-sum-head { flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
  .cp-sum-title { font-size: var(--fs-14); }
  .cp-sum-body { display: none; }
  .cp-sum-short { display: block; }
  /* Only the chevron shows; the name is still read, and the card is the target. */
  .cp-sum-go { min-height: 0; margin: calc(-1 * var(--sp-8)) 0 0; }
  .cp-sum-go-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cp-sum-go svg { position: absolute; top: var(--sp-16); right: var(--sp-16); color: var(--fg-muted); }
  .cp-overview-card { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4) var(--sp-16); }
  .cp-overview-title { grid-column: 1/-1; margin-bottom: var(--sp-8); }
  .cp-progress-figure { grid-column: 2; grid-row: 2/4; }
  .cp-progress-figure strong { font-size: 1.8rem; }
  .cp-overview-card progress, .cp-overview-note { grid-column: 1/-1; }
  .cp-progress-caption { margin: var(--sp-4) 0 var(--sp-8); }
}
@media (max-width: 560px) {
  #p-screen-start.is-class { padding: var(--sp-24) var(--sp-16) 4rem; }
  #class-page .cp-banner { grid-template-columns: minmax(0,1fr) 55px; gap: var(--sp-16); padding-bottom: var(--sp-24); }
  #class-page .cp-title { font-size: 1.8rem; }
  #class-page .cp-sub { font-size: var(--fs-14); }
  #class-page .cp-banner-eyebrow { font-size: var(--fs-13); }
  .cp-welcome-art { padding: 0; align-self: start; margin-top: var(--sp-32); }
  .cp-welcome-art img { width: 46px; height: 78px; }
  .cp-speech { display: none; }
  #class-page .cp-classes { gap: var(--sp-8); margin-top: var(--sp-8); }
  #class-page .cp-classes:has(.cp-class-select) .cp-class-pill { display: none; }
  .cp-class-select-wrap { display: block; position: relative; min-width: 0; flex: 1; }
  .cp-class-select { appearance: none; width: 100%; min-width: 0; min-height: 44px; padding: var(--sp-8) var(--sp-32) var(--sp-8) .75rem; border: 1px solid var(--student-line); background: var(--card); color: var(--fg); border-radius: var(--r-sm); font: 600 var(--fs-13) var(--font-body); text-overflow: ellipsis; }
  .cp-class-select-wrap svg { position: absolute; right: .75rem; top: 15px; width: 15px; height: 15px; stroke: var(--fg); fill: none; stroke-width: 2; pointer-events: none; }
  #class-page .cp-class-pill, #class-page .cp-class-add { font-size: var(--fs-13); padding: var(--sp-8) .75rem; min-height: 44px; }
  .cp-feature-card { grid-template-columns: minmax(0,1fr); padding: var(--sp-24); gap: 0; }
  .cp-feature-icon { display: none; }
  .cp-feature-go { width: 100%; justify-content: space-between; font-size: var(--fs-13); }
  .cp-feature-meta { font-size: var(--fs-13); }
  .cp-feature-kicker { font-size: var(--fs-14); }
  .cp-feature-feedback { font-size: var(--fs-13); }
  #cp-feature { margin-bottom: var(--sp-24); }
  #class-page .cp-tabs { gap: 0; }
  /* The figure beside the title rather than under it: the same card, a line
     shorter, so the activity list starts closer to the top of a phone. */
  .cp-overview-title { grid-column: 1; margin-bottom: 0; }
  .cp-progress-figure { grid-row: 1/3; align-self: center; }
  .cp-progress-caption { margin: 0 0 var(--sp-8); }
  .cp-overview-note { margin-top: var(--sp-8); }
  /* The progress card and the compact row share one inset, and a card keeps
     just enough room on its right for "Due tomorrow" on one line at 390px. */
  .cp-overview-card { padding: var(--sp-16); }
  .cp-sum-card { padding: var(--sp-16) var(--sp-8) var(--sp-16) var(--sp-16); }
  .cp-sum-go svg { right: var(--sp-8); }
  #class-page .cp-tab { flex: 1; min-width: 0; font-size: var(--fs-13); text-align: center; }
  #class-page .cp-row { grid-template-columns: 42px minmax(0,1fr); padding: var(--sp-16); gap: var(--sp-8) var(--sp-16); }
  #class-page .cp-row-emoji { width: 42px; height: 48px; }
  #class-page .cp-row-emoji svg { width: 22px; height: 22px; }
  #class-page .cp-row-body { min-width: 0; }
  #class-page .cp-row-name { font-size: 1.05rem; }
  #class-page .cp-row-end { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; max-width: none; gap: var(--sp-8) var(--sp-16); }
  #class-page .cp-row-action { text-align: left; }
  #class-page .cp-group-head { flex-wrap: wrap; gap: var(--sp-8); }
  #class-page .cp-group-average { margin-left: auto; }
  #class-page .cp-mark { padding: var(--sp-16); }
  #p-screen-work { padding: var(--sp-16) var(--sp-16) 4rem; }
  #p-screen-work .cw-head { padding: var(--sp-24); }
  #p-screen-work .cw-actions { padding: 0 var(--sp-24) var(--sp-24); }
  #p-screen-work .cw-actions .btn { width: 100%; }
  #p-screen-work .cw-item { padding: var(--sp-16); }
}
/* The narrowest phones: a third of the row is about 90px, so the cards trade
   their left inset for the width "Feedback" needs. */
@media (max-width: 360px) {
  .cp-sum-card { padding: var(--sp-16) var(--sp-8); }
}
@media (prefers-reduced-motion: reduce) {
  #class-page .cp-row:active { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  #class-page :is(.cp-tab, .cp-class-pill, .cp-class-add, .cp-sum-card) { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
  #class-page :is(.cp-row, .cp-feature-go) { transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
  #class-page :is(.cp-row, .cp-feature-go):active { transform: translateY(2px); box-shadow: none; }
  #class-page .cp-row-progress > span { transition: width 260ms var(--ease-out); }
}