.group-classroom {
  --room-ink: #292435;
  --room-accent: #62349a;
  --room-primary: #62349a;
  --room-border: #e3dce8;
  --room-bg: #f8f6f9;
  --room-surface: #fff;
  --room-toolbar: #fbf9fc;
  --room-control: #fff;
  --room-muted: #6a6075;
  --room-hover: #a57cc9;
  --room-selected: #f2e8fa;
  --room-selected-ink: #52227e;
  --room-danger: #832247;
  --line: var(--room-border);
  --violet: var(--room-accent);
  margin: 0;
  color: var(--room-ink);
  background: var(--room-bg);
}
.group-classroom[data-theme="dark"] {
  color-scheme: dark;
  --room-ink: #f2eff7;
  --room-accent: #c6aff4;
  --room-primary: #7544bd;
  --room-border: #3b3545;
  --room-bg: #17151c;
  --room-surface: #211e28;
  --room-toolbar: #191720;
  --room-control: #2a2633;
  --room-muted: #beb5ca;
  --room-hover: #9878c5;
  --room-selected: #413257;
  --room-selected-ink: #eee3ff;
  --room-danger: #ffa7ba;
}
.group-classroom [hidden] { display: none !important; }
.group-header, .group-room-heading, .group-header-end, .group-header-actions, .group-room-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
.group-header {
  justify-content: space-between;
  padding: 10px clamp(14px, 2.4vw, 34px);
  border-bottom: 1px solid var(--room-border);
  background: var(--room-surface);
}
.group-header .wordmark { font-size: 1.14rem; }
.group-header-actions span { color: var(--room-muted); font-size: .82rem; }
#group-app { width: min(100%, 1720px); margin: auto; padding: 14px clamp(12px, 2vw, 28px) 30px; }
.group-room-heading { justify-content: space-between; align-items: flex-end; }
.group-room-heading h1, #group-signin h1 { margin: 0; font-size: clamp(1.65rem, 3.2vw, 2.55rem); line-height: 1.12; }
.group-kicker { margin: 0 0 4px; color: var(--room-accent); font-size: .79rem; font-weight: 700; }
.group-status { margin: 4px 0; color: var(--room-muted); font-size: .77rem; }
.group-status:empty { display: none; }
.group-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 270px);
  align-items: start;
  gap: 12px;
  margin-top: 12px;
  transition: grid-template-columns .22s ease, gap .22s ease;
}
.group-layout.is-panel-closed { grid-template-columns: minmax(0, 1fr) minmax(0, 0px); gap: 0; }
.group-work { min-width: 0; }
#group-board-panes { display: grid; gap: 10px; }
#group-board-panes.is-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.group-pane, #group-focus-work, #group-shared-work, .group-sidebar, #group-signin {
  min-width: 0;
  border: 1px solid var(--room-border);
  border-radius: 9px;
  padding: 10px;
  background: var(--room-surface);
}
.group-pane-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px; margin-bottom: 6px; }
.group-pane h2, #group-focus-work h2, #group-shared-work h2, .group-sidebar h2 { margin: 0; font-size: 1rem; line-height: 1.25; }
.group-board-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.group-sidebar {
  position: sticky;
  top: 10px;
  display: flex;
  flex-direction: column;
  max-height: max(150px, calc(100dvh - var(--group-panel-top, 130px) - 12px));
  overflow: hidden;
  transition: opacity .2s ease, transform .22s ease, visibility 0s;
}
.is-panel-closed .group-sidebar {
  visibility: hidden;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .2s ease, transform .22s ease, visibility 0s .22s;
}
.group-panel-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 9px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--room-border);
}
.group-panel-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-inline-end: 3px;
}
.group-sidebar section + section { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--room-border); }
.group-sidebar ul, .group-sidebar ol { padding-inline-start: 1.25rem; margin: 6px 0 0; font-size: .8rem; }
.group-sidebar li + li { margin-top: 4px; }
.group-classroom button, .group-classroom select, .group-classroom input {
  border: 1px solid var(--room-border);
  border-radius: 5px;
  padding: 6px 9px;
  background: var(--room-control);
  color: var(--room-ink);
  font: inherit;
  font-size: .83rem;
}
.group-classroom button { cursor: pointer; font-weight: 650; }
.group-classroom button:hover { border-color: var(--room-hover); }
.group-classroom button[aria-pressed="true"] { background: var(--room-selected); border-color: var(--room-hover); color: var(--room-selected-ink); }
.group-classroom button.primary { background: var(--room-primary); border-color: var(--room-primary); color: #fff; }
.group-classroom button:disabled { cursor: default; opacity: .62; }
.group-classroom :focus-visible { outline: 2px solid #a477c8; outline-offset: 2px; }
.group-room-actions label, #group-workbook-navigation label { display: flex; gap: 6px; align-items: center; font-size: .79rem; }
.group-page-tabs, .group-text-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.group-page-tabs { margin-bottom: 6px; }
#group-shared-pages { margin-block: 7px 0; }
#group-shared-pages .group-status { margin: 0 3px 0 0; }
#group-shared-pages button[aria-current="page"] {
  border-color: var(--room-hover);
  background: var(--room-selected);
  color: var(--room-selected-ink);
}
.group-board-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-width: 0;
}
.group-board-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--room-border);
  border-radius: 6px;
  background: var(--room-toolbar);
}
.group-drawing-tools, .group-zoom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.group-drawing-tools + .group-zoom { border-top: 1px solid var(--room-border); padding-top: 6px; }
.group-board-toolbar button { min-height: 34px; min-width: 34px; display: grid; place-items: center; padding: 4px; }
.group-zoom span { text-align: center; }
.group-icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.group-classroom .group-icon-button,
#group-panel-toggle, #group-panel-close, #group-theme { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.group-classroom[data-theme="dark"] [data-theme-icon="sun"],
.group-classroom[data-theme="light"] [data-theme-icon="moon"] { display: block; }
[data-theme-icon] { display: none; }
#group-panel-toggle[aria-expanded="true"] { border-color: var(--room-hover); background: var(--room-selected); color: var(--room-selected-ink); }
.group-board-canvas {
  display: block;
  min-width: 0;
  width: 100%;
  height: clamp(300px, 64dvh, 820px);
  border: 1px solid var(--room-border);
  border-radius: 6px;
  background: radial-gradient(circle, #d9d0e0 1px, transparent 1px) 0 0 / 18px 18px, #fcfbfd;
  touch-action: none;
  cursor: grab;
}
.group-board-editable .group-board-canvas { cursor: crosshair; }
.group-board-canvas[data-tool="text"] { cursor: text; }
.group-board-canvas[data-tool="pan"] { cursor: grab; }
.group-board-canvas.is-panning { cursor: grabbing; }
.group-board-canvas [data-paper], .group-board-canvas [data-ink] { pointer-events: none; }
.group-board-canvas[data-tool="eraser"] path[data-mark-owner] { pointer-events: stroke; }
.group-board-canvas[data-tool="eraser"] text[data-mark-owner],
.group-board-canvas[data-tool="text"] text[data-mark-owner] { pointer-events: bounding-box; }
.group-board-status, .group-zoom span { margin: 0; font-size: .75rem; color: var(--room-muted); }
.group-board-status { margin-top: 5px; }
.group-text-entry { margin-bottom: 7px; }
.group-text-entry label { display: flex; gap: 5px; align-items: center; font-size: .8rem; }
.group-text-entry input { width: min(60vw, 280px); }
#group-signin { width: min(100%, 400px); margin: clamp(16px, 10vh, 90px) auto; padding: clamp(18px, 5vw, 34px); }
#group-signin p { font-size: .88rem; }
#group-login { display: grid; gap: 12px; }
#group-login label { display: grid; gap: 4px; font-size: .86rem; font-weight: 650; }
#group-login input { min-height: 38px; width: 100%; }
#group-login-status { margin: 0; color: var(--room-danger); }
#group-login-status:empty { display: none; }
.group-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
#group-chat-form { display: flex; gap: 4px; margin-top: 7px; }
#group-chat-form input { min-width: 0; flex: 1; }
#group-chat-log { min-height: 44px; max-height: 180px; overflow: auto; overflow-wrap: anywhere; font-size: .8rem; }
.group-classroom .lu-classroom-quiz .lu-quiz-submit { background: var(--room-primary); border-color: var(--room-primary); color: white; }
.group-classroom[data-theme="dark"] .lu-classroom-quiz {
  background: var(--room-surface);
  color: var(--room-ink);
  border-color: var(--room-border);
}
.group-classroom[data-theme="dark"] .lu-classroom-quiz :is(.lu-quiz-meter, .lu-quiz-word-label, .lu-quiz-placeholder, .lu-quiz-status) { color: var(--room-muted); }
.group-classroom[data-theme="dark"] .lu-classroom-quiz .lu-quiz-label { color: var(--room-accent); }
.group-classroom[data-theme="dark"] .lu-classroom-quiz :is(.lu-quiz-sentence, .lu-quiz-choice) {
  background: var(--room-control);
  border-color: var(--room-border);
}
.group-classroom[data-theme="dark"] .lu-classroom-quiz .lu-quiz-choice:is(:hover, :has(:checked)) {
  background: var(--room-selected);
  border-color: var(--room-hover);
}
.group-classroom[data-theme="dark"] .lu-classroom-quiz .lu-quiz-feedback { background: var(--room-selected); color: var(--room-ink); }
.group-classroom[data-theme="dark"] .lu-classroom-quiz .lu-quiz-feedback.is-correct { background: #234337; }
#group-screen-stage {
  margin-bottom: 10px;
  padding: 9px;
  border: 1px solid var(--room-border);
  border-radius: 7px;
  background: #fff;
}
#group-screen-stage h2 { margin: 0 0 6px; font-size: 1rem; }
#group-screen-video { display: block; width: 100%; max-height: 64dvh; background: #201929; border-radius: 4px; }
#group-paper { margin-top: 8px; }
#group-workbook {
  width: min(950px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--room-border);
  border-radius: 10px;
  background: var(--room-surface);
  color: var(--room-ink);
}
#group-workbook::backdrop { background: #121018bb; }
.group-workbook-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(820px, calc(100dvh - 26px));
}
.group-workbook-header, .group-workbook-label, .group-workbook-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px 12px;
}
.group-workbook-header { padding: 11px 15px; border-bottom: 1px solid var(--room-border); }
.group-workbook-header h2, .group-workbook-label h3 { margin: 0; line-height: 1.25; }
.group-workbook-header h2 { font-size: 1.25rem; }
#group-workbook-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-inline-start: auto; }
#group-workbook-number { width: 4rem; }
.group-workbook-body {
  display: grid;
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
  min-height: 0;
}
#group-workbook-pages {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px;
  overflow: auto;
  border-inline-end: 1px solid var(--room-border);
}
#group-workbook-pages button {
  display: grid;
  grid-template-columns: 2.25em minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  padding: 8px;
  text-align: start;
  line-height: 1.35;
}
#group-workbook-pages button span:first-child { font-variant-numeric: tabular-nums; color: var(--room-muted); }
.group-workbook-detail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  gap: 7px;
  padding: 10px;
}
.group-workbook-label h3 { font-size: .94rem; }
#group-workbook-assigned { margin: 0; color: var(--room-accent); }
.group-workbook-zoom { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.group-workbook-zoom button { min-width: 34px; min-height: 34px; }
#group-workbook-zoom-level { min-width: 3.3em; text-align: center; font-size: .8rem; font-variant-numeric: tabular-nums; }
#group-workbook-preview {
  container-type: size;
  display: grid;
  justify-items: center;
  align-items: start;
  min-height: 0;
  padding: 7px;
  overflow: auto;
  background: var(--room-bg);
  border: 1px solid var(--room-border);
  border-radius: 5px;
}
#group-workbook-image { display: block; width: auto; max-width: 100%; height: 100%; min-height: 0; object-fit: contain; }
#group-workbook-preview.is-zoomed { display: block; }
#group-workbook-preview.is-zoomed #group-workbook-image {
  width: calc(100% * var(--workbook-zoom));
  width: calc(min(100cqw, 100cqh * var(--workbook-page-aspect)) * var(--workbook-zoom));
  max-width: none;
  height: auto;
  margin-inline: auto;
}
.group-workbook-footer > .group-board-actions:nth-child(2) { margin-inline-start: auto; }
#group-workbook-status { flex-basis: 100%; margin: 0; }
.group-workbook-footer button { min-height: 36px; }
#group-teaching summary { font-size: .84rem; font-weight: 700; cursor: pointer; }
#group-teaching details + details { margin-top: 12px; border-top: 1px solid var(--room-border); padding-top: 8px; }
.group-guide-picker { display: grid; gap: 4px; margin-top: 7px; font-size: .78rem; }
.group-guide-picker select { min-width: 0; width: 100%; }
#group-guide { margin-top: 9px; font-size: .8rem; line-height: 1.5; }
#group-guide h3 { margin: 0; font-size: .87rem; }
#group-guide h4 { margin: 9px 0 3px; font-size: .8rem; }
#group-guide p { margin: 3px 0; }
#group-guide .group-guide-time { color: var(--room-accent); font-size: .74rem; }
#group-guide .group-guide-goal { color: var(--room-muted); }
#group-guide ol { padding-inline-start: 1.1rem; margin-top: 3px; }
#group-translation label { display: grid; gap: 4px; margin-top: 8px; font-size: .78rem; }
#group-translation textarea {
  width: 100%;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--room-border);
  border-radius: 5px;
  font: inherit;
  background: var(--room-control);
  color: var(--room-ink);
}
.group-translate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
.group-translate-actions a { font-size: .77rem; color: var(--room-accent); }
#group-translation output { display: block; margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .86rem; }
#group-practice-paper {
  width: min(720px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: clamp(14px, 3vw, 25px);
  border: 1px solid var(--room-border);
  border-radius: 9px;
  background: var(--room-surface);
  color: var(--room-ink);
}
#group-practice-paper::backdrop { background: #24163388; }
.group-paper-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.group-paper-heading h2 { margin: 0; font-size: clamp(1.1rem, 4vw, 1.55rem); }
.group-paper-content { font-size: .91rem; }
.group-paper-content h3 { margin: 0 0 5px; font-size: .96rem; }
.group-paper-name { margin: 12px 0; }
.group-paper-questions { padding-inline-start: 1.35rem; }
.group-paper-questions > li { margin-bottom: 8px; break-inside: avoid; }
.group-paper-lines div { border-bottom: 1px solid #ccc4d2; height: 19px; }
.group-paper-key { margin: 10px 0; font-size: .83rem; }
.group-paper-key summary { font-weight: 700; cursor: pointer; }
@media print {
  .group-classroom:has(#group-practice-paper[open]) > :not(#group-practice-paper) { display: none !important; }
  #group-practice-paper[open] {
    position: static;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    margin: 0;
    border: 0;
    padding: 0;
    color: #000;
    background: #fff;
    color-scheme: light;
  }
  #group-practice-paper::backdrop { display: none; }
  #group-practice-paper button, #group-practice-paper .group-paper-key { display: none !important; }
}
@media (max-width: 880px) {
  .group-layout, .group-layout.is-panel-closed { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .group-sidebar {
    position: fixed;
    z-index: 60;
    inset: 0 0 0 auto;
    width: min(340px, 92vw);
    max-height: none;
    border-radius: 0;
    padding: 14px;
    box-shadow: -12px 0 44px #0005;
  }
  .is-panel-closed .group-sidebar { transform: translateX(100%); }
}
@media (max-width: 550px) {
  #group-board-panes.is-split { grid-template-columns: minmax(0, 1fr); }
  .group-board-canvas { height: min(58dvh, 500px); min-height: 280px; }
  .group-header { gap: 6px; }
  .group-header-end, .group-header-actions { gap: 5px; }
  #group-panel-toggle span { display: none; }
  #group-workbook-navigation { order: 1; flex-basis: 100%; margin-inline-start: 0; }
  .group-workbook-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #group-workbook-pages {
    display: flex;
    border-inline-end: 0;
    border-bottom: 1px solid var(--room-border);
    padding: 7px;
  }
  #group-workbook-pages button { display: block; flex: 0 0 auto; min-width: 3rem; text-align: center; }
  #group-workbook-pages button span + span { display: none; }
  .group-workbook-footer > .group-board-actions { flex: 1 1 100%; }
  .group-workbook-footer > .group-board-actions:nth-child(2) { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .group-layout, .group-sidebar, .is-panel-closed .group-sidebar { transition: none; }
}

@media screen and (min-width: 881px) and (min-height: 620px) {
  html:has(> body.group-classroom #group-room:not([hidden])) { overflow: hidden; }

  .group-classroom:has(#group-room:not([hidden])) {
    display: flex;
    height: 100dvh;
    flex-direction: column;
    overflow: hidden;
  }

  .group-classroom:has(#group-room:not([hidden])) > #group-app,
  #group-room,
  #group-room .group-work,
  .group-work > :is(#group-student-work, #group-focus-work, #group-shared-work),
  #group-room :is(.group-pane, .group-board, #group-focus-boards) {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  .group-classroom:has(#group-room:not([hidden])) > .group-header { flex: none; }
  .group-classroom:has(#group-room:not([hidden])) > #group-app { padding-bottom: 12px; }
  .group-classroom:has(#group-room:not([hidden])) > #group-app,
  #group-room,
  .group-work > :is(#group-student-work, #group-focus-work, #group-shared-work),
  #group-room :is(.group-board, #group-board-panes, #group-focus-boards, .group-board-grid),
  #group-room > .group-layout {
    flex: 1 1 0;
    min-height: 0;
  }

  #group-room :is(.group-layout, #group-board-panes, .group-board-grid) {
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  #group-room :is(.group-room-heading, .group-pane-heading, .group-page-tabs) { flex: none; }
  #group-room .group-board-canvas { height: 100%; min-height: 0; }
  #group-room .group-board-toolbar {
    align-self: start;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  #group-room .group-board-status:empty { display: none; }

  #group-room .group-sidebar { position: static; min-height: 0; max-height: none; }
  #group-room .group-panel-content { flex: 1 1 auto; }
  #group-room #group-screen-video { min-height: 0; max-height: min(36dvh, 360px); }
  #group-room .is-presenter #group-screen-video { max-height: min(24dvh, 240px); }
}

.group-classroom .group-fullscreen-target:is(:fullscreen, .is-expanded) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 9px clamp(8px, 1.5vw, 20px);
  overflow: hidden;
  background: var(--room-surface);
}
.group-fullscreen-target.is-expanded { position: fixed; inset: 0; z-index: 120; }
.group-classroom:has(.group-fullscreen-target.is-expanded) { overflow: hidden; }
.group-fullscreen-target:is(:fullscreen, .is-expanded) :is(.group-pane-heading, .group-page-tabs) { flex: none; }
.group-fullscreen-target:is(:fullscreen, .is-expanded) :is(.group-board, #group-focus-boards) {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
}
.group-fullscreen-target:is(:fullscreen, .is-expanded) .group-board-grid {
  flex: 1 1 0;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.group-fullscreen-target:is(:fullscreen, .is-expanded) .group-board-toolbar {
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
}
.group-fullscreen-target:is(:fullscreen, .is-expanded) .group-board-canvas {
  height: 100%;
  min-height: 0;
}