/* Phones must not enlarge text on their own: sizes stay the same on every page and orientation. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* ClassPlay's teacher surfaces. Game scenery and authored content keep their own styles. */
:root {
  --cp-ink: #173b43;
  --cp-muted: #526976;
  --cp-action: #155f69;
  --cp-action-hover: #114e57;
  --cp-teal: #087b72;
  --cp-line: #dfe6dc;
  --cp-paper: #fff;
  --cp-radius: 14px;
  --cp-shadow: 0 4px 20px #163d5010;
}
body.site-page:not(.welcome-page), body.resource-page {
  background: radial-gradient(ellipse at 8% 0%, #e7f4ef 0, transparent 46%), #f7f6ef;
  color: var(--cp-ink);
  font-family: "ClassPlay Round", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.site-page .site-header, .resource-page .site-header { background: #ffffffed; border-bottom: 1px solid var(--cp-line); }
.site-header .site-header-inner { box-sizing: border-box; min-height: 72px; gap: 22px; padding: 10px 28px; }
.site-header .site-brand { color: var(--cp-ink); gap: 9px; font-size: 26px; letter-spacing: -.9px; }
.site-logo { position: relative; display: block; width: 33px; height: 33px; flex: 0 0 33px; transform: none; }
.site-logo i { position: absolute; display: block; width: 17px; height: 27px; left: 5px; bottom: 3px; opacity: 1; border-radius: 5px 5px 2px 5px; transform-origin: 8px 24px; background: var(--cp-teal); }
.site-logo i:nth-child(1) { transform: rotate(-30deg); background: #a6d9c6; }
.site-logo i:nth-child(2) { transform: rotate(-9deg); background: #eeb697; }
.site-logo i:nth-child(3) { transform: rotate(14deg); background: #247d74; }
.site-logo i:nth-child(4) { width: 8px; height: 9px; left: 12px; bottom: 13px; border-radius: 0; background: #f2c861; clip-path: polygon(0 0,100% 50%,0 100%); transform: rotate(14deg); }
.site-header .site-nav { align-items: center; gap: 8px; }
.site-header .site-nav a, .resource-page .site-header nav a {
  box-sizing: border-box; min-height: 44px; padding: 10px 13px; border: 0; border-radius: 9px;
  font: 700 14px/1.35 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--cp-muted); white-space: nowrap;
}
.site-header .site-nav a:hover { color: var(--cp-action); background: #eef3e8; }
.site-header .site-nav a[aria-current] { color: var(--cp-action); background: #e6efe9; box-shadow: inset 0 -2px #155f69; }
.site-page .site-button, .resource-page .site-button {
  min-height: 44px; padding: 10px 16px; border-radius: 9px; border-color: #c5d6d3;
  background: #fff; color: var(--cp-ink); font-size: 14px; font-weight: 700; line-height: 1.3;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.site-page .site-button:hover:not(:disabled), .resource-page .site-button:hover:not(:disabled) { background: #eef3e8; border-color: #8fb3a6; }
.site-page:not(.welcome-page) .site-button.primary, .resource-page .site-button.primary,
.resource-page .resource-primary, .resource-page .site-header .site-create {
  color: #fff !important; background: var(--cp-action) !important; border-color: var(--cp-action) !important;
  border-radius: 9px; box-shadow: 0 3px 8px #155f691c;
}
.site-page:not(.welcome-page) .site-button.primary:hover:not(:disabled), .resource-page .site-button.primary:hover:not(:disabled),
.resource-page .resource-primary:hover:not(:disabled) { background: var(--cp-action-hover) !important; border-color: var(--cp-action-hover) !important; }
.site-page :is(button, a, input, select, textarea, summary):focus-visible,
.resource-page :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #155f69; outline-offset: 3px; }
.site-page .site-input, .site-page .site-select { height: 44px; border-color: #c5d6d3; border-radius: 9px; font-size: 15px; }
.site-page .site-input::placeholder { color: #637581; opacity: 1; }
.site-page .site-input:focus, .site-page .site-select:focus { border-color: var(--cp-action); box-shadow: 0 0 0 3px #155f6918; }
.cp-account-nav .cp-account-button, .cp-account-nav .cp-account-signin { min-height: 44px; border-radius: 10px; font-size: 14px; }
.cp-account-nav .cp-account-avatar { border-radius: 8px; background: var(--cp-action); }
.cp-account-nav .cp-account-menu, .lib-context-menu { border-color: var(--cp-line); border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px #15374724; }
.cp-account-nav .cp-account-menu button, .lib-context-menu button { min-height: 44px; border-radius: 7px; }
.site-header :is(.cp-language-switch, .account-language, .admin-language) { border-radius: 9px; border-color: #c5d6d3; }
.site-header :is(.cp-language-switch, .account-language, .admin-language) button { min-height: 40px; min-width: 42px; font-size: 13px; }
.site-header :is(.cp-language-switch, .account-language, .admin-language) button[aria-pressed=true] { background: var(--cp-action); color: #fff; }
.site-page .site-footer { color: var(--cp-muted); font-size: 12px; padding: 24px 20px 28px; }
.site-page .site-dialog { border: 1px solid var(--cp-line); border-radius: 18px; padding: 28px; }
.site-page .site-dialog h2 { color: var(--cp-ink); font-weight: 800; }
.site-page .site-dialog::backdrop { background: #102d4963; }
.site-page .cloud-status { border-radius: 12px; font-size: 14px; padding: 12px 16px; }
.cloud-status .cloud-action { min-height: 40px; padding: 8px 12px; border-radius: 7px; }

/* A calm, legible workbench with the owner's folder colours preserved. */
.activity-library-page .site-main { margin-top: 28px; max-width: 1280px; }
.activity-library-page .library-page .library-heading { border-radius: var(--cp-radius); padding: 26px 28px; box-shadow: var(--cp-shadow); align-items: center; }
.activity-library-page .library-page h1 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; color: var(--cp-ink); letter-spacing: -.7px; }
.activity-library-page .library-page .library-tools .site-button { min-height: 44px; border-radius: 9px; border-color: #c5d6d3; color: var(--cp-ink); }
.activity-library-page .library-page .library-search .site-input { height: 44px; border-radius: 9px 0 0 9px; font-size: 15px; }
.activity-library-page .library-page .library-search .site-button { border-radius: 0 9px 9px 0; }
.activity-library-page .library-page .library-view-controls .site-button { min-width: 44px; }
.activity-library-page .library-page .library-view-controls .site-button:first-child { border-radius: 9px 0 0 9px; }
.activity-library-page .library-page .library-view-controls .site-button:last-child { border-radius: 0 9px 9px 0; }
.activity-library-page .library-page .library-view-controls .site-button[aria-pressed=true] { background: #e6efe9; color: var(--cp-action); box-shadow: inset 0 -3px var(--cp-action); }
.activity-library-page .library-page .library-body { margin-top: 18px; padding: 20px 28px 32px; border-radius: var(--cp-radius); box-shadow: var(--cp-shadow); }
.activity-library-page .library-page .library-order-row { gap: 16px; flex-wrap: wrap; font-size: 14px; padding-bottom: 16px; }
.activity-library-page .library-page .library-order-row button { min-height: 40px; padding: 8px 10px; border-radius: 8px; color: var(--cp-muted); }
.activity-library-page .library-page .library-order-row button[aria-pressed=true] { color: var(--cp-action); background: #eef3e8; }
.activity-library-page .library-count { margin: 0 auto 0 0; color: var(--cp-muted); font-size: 13px; line-height: 1.5; }
.activity-library-page .library-page .library-list { gap: 22px 20px; }
.activity-library-page .lib-folder .folder-shape { width: 100%; min-width: 0; aspect-ratio: auto; height: 128px; min-height: 0; }
.activity-library-page .folder-back { border-radius: 9px 13px 12px 12px; }
.activity-library-page .folder-front { border-radius: 9px 9px 12px 12px; box-shadow: inset 0 1px #ffffff45, 0 2px 6px #1537470a; }
.activity-library-page .lib-folder-link { transition: transform .2s ease; }
.activity-library-page .lib-folder-link:hover { transform: translateY(-4px); }
.activity-library-page .lib-folder .lib-name { font-size: 17px; line-height: 1.35; }
.activity-library-page .lib-folder .lib-sub { font-size: 13px; color: #173b43; }
.activity-library-page .lib-activity { border-color: var(--cp-line); border-radius: 12px; overflow: hidden; box-shadow: 0 3px 9px #15374709; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.activity-library-page .lib-activity:hover { transform: translateY(-3px); box-shadow: 0 8px 22px #15374716; border-color: #9dbcae; }
.activity-library-page .lib-thumb { border-bottom-color: var(--cp-line); }
.activity-library-page .lib-info { min-height: 92px; padding: 13px 58px 14px 14px; gap: 7px; }
.activity-library-page .lib-activity .lib-name { font-size: 15px; line-height: 1.35; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.activity-library-page .lib-activity .lib-sub { color: var(--cp-muted); font-size: 13px; }
.activity-library-page .lib-menu-button { width: 44px; height: 44px; border-radius: 8px; border-color: #b5c7bf; }
.activity-library-page .lib-activity .lib-menu-button { bottom: 14px; right: 10px; }
.activity-library-page .library-list[data-view=small] .folder-shape { height: 112px; min-height: 0; }
.activity-library-page .library-list[data-view=small] .lib-info { min-height: 88px; padding-right: 54px; }
.activity-library-page .library-list[data-view=small] .lib-menu-button { width: 40px; height: 40px; }
.activity-library-page .library-list[data-view=small] .lib-folder .lib-name { font-size: 14px; }
.activity-library-page .library-list[data-view=small] .lib-folder .lib-sub { font-size: 12px; }
.activity-library-page .library-list[data-view=small] .folder-front { padding-right: 48px; }
.site-page .template-card { border-color: var(--cp-line); border-radius: 12px; box-shadow: 0 3px 9px #15374709; }
.site-page .template-card:hover { border-color: #9dbcae; box-shadow: 0 7px 20px #15374712; }
.site-page .template-copy h2 { color: var(--cp-ink); font-weight: 800; }
.site-page .template-copy p { color: var(--cp-muted); }
.site-page .picker-toolbar { padding-top: 28px; }
.site-page .picker-steps h1 { font-weight: 800; color: var(--cp-ink); }

/* Authoring uses the same type and controls; learning content itself is untouched. */
.site-page.editor-page :is(button, input, textarea, select) { font-family: inherit; }
.site-page.editor-page .editor-main { border-radius: 16px; box-shadow: var(--cp-shadow); }
.editor-page .item-panel, .editor-page .group-editor { background: #f3f5ee; border-radius: 12px; padding: 16px; }
.editor-page .editor-input-box { border-color: #c5d6d3; border-radius: 8px; overflow: hidden; }
.editor-page .editor-input-box:focus-within { border-color: var(--cp-action); box-shadow: 0 0 0 3px #155f6916; }
.editor-page .field-media-btn { width: 44px; height: 44px; border-radius: 7px; }
.editor-page .field-media-btn:hover, .editor-page .field-media-btn.attached { color: var(--cp-action); background: #e6efe9; }
.editor-page #previewBtn { color: var(--cp-ink); }
.editor-page .answer-state { min-width: 36px; width: 36px; height: 36px; border-radius: 8px; }
.editor-page .answer-correct .answer-state { background: #19764d; }
.editor-page .answer-wrong .answer-state { background: #b9473e; }
.editor-page .answer-remove { width: 36px; height: 36px; min-width: 36px; display: grid; place-items: center; }
.editor-page .field-picture button { min-width: 36px; min-height: 36px; border-radius: 7px; }
.editor-page .group-remove, .editor-page .group-image-button { min-width: 36px; min-height: 36px; }
.editor-page .add-content, .editor-page .add-answer { min-height: 44px; border-radius: 8px; color: var(--cp-action); }
.editor-page .field-format { border-radius: 7px; overflow: hidden; }
.site-page.account-page { background: radial-gradient(ellipse at 15% 5%, #e4f3ec, transparent 55%), #f7f6ef; }
.account-page .account-layout { box-shadow: 0 12px 45px #163d5010; border-color: var(--cp-line); }
.account-page .account-explainer { background: linear-gradient(155deg, #e6f3ef, #eef3ec); }
.resource-page .resource-info, .resource-page .resource-settings, .resource-page .resource-sidebar>section { border-radius: 12px; border-color: var(--cp-line); }
.resource-page .resource-info h1 { color: var(--cp-ink); }
.resource-page .resource-actions :is(a, button) { min-height: 40px; }
.resource-page .resource-actions a { color: var(--cp-action); }
.resource-page .resource-sidebar .template-switch { border-radius: 8px; }
.resource-page .resource-main>.activity-player { border-radius: 14px; box-shadow: 0 8px 28px #13364b1c; }
.resource-page .activity-player:fullscreen { border-radius: 0; }

@media(max-width:1100px) {
  .site-header .site-header-inner { gap: 12px; padding-inline: 20px; flex-wrap: wrap; }
  .site-header .site-nav { gap: 3px; }
  .site-header .site-nav a { padding-inline: 9px; }
  .activity-library-page .library-page .library-tools { justify-content: flex-start; }
}
@media(max-width:760px) {
  .site-header .site-header-inner { min-height: 64px; padding: 12px 16px; gap: 10px; }
  .site-header .site-brand { font-size: 24px; }
  .site-header .site-nav { order: 5; flex-basis: 100%; min-height: 44px; flex-wrap: wrap; justify-content: space-between; margin: 0; gap: 2px; }
  .site-header .site-nav a, .resource-page .site-header nav a { font-size: 13px; padding-inline: 10px; }
  .site-header .site-create { margin-left: auto; }
  .site-header .cp-account-nav { margin-left: 0; }
  .site-header .cp-language-switch { margin-left: auto; }
  .activity-library-page .site-main { width: calc(100% - 24px); margin-top: 18px; }
  .activity-library-page .library-page .library-heading { padding: 22px 18px; }
  .activity-library-page .library-page .library-body { padding: 16px 18px 24px; }
  .activity-library-page .library-page .library-tools { gap: 10px; }
  .activity-library-page .library-page .library-search { flex: 1 1 100%; order: 3; }
  .activity-library-page .library-page .library-search .site-input { width: 100%; }
  .activity-library-page .library-page .library-order-row { gap: 4px; }
  .activity-library-page .library-order-label { flex-basis: 100%; margin: 0 0 2px; }
  .activity-library-page .library-count { flex-basis: 100%; margin-bottom: 8px; }
  .activity-library-page .library-page .library-list { gap: 18px 14px; }
  .editor-page .editor-input-box { grid-template-columns: minmax(0,1fr) 44px; }
  .editor-page .field-format { height: 42px; }
  .editor-page .field-format button { width: 40px; height: 40px; line-height: 40px; }
  .editor-page .answer-state { width: 40px; min-width: 40px; height: 40px; }
  .editor-page .answer-remove { width: 36px; min-width: 36px; }
  .editor-page .answer-grid { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:420px) {
  .site-header .site-create { font-size: 13px; padding: 10px 12px; }
  .cp-account-nav .cp-account-label { max-width: 96px; }
  .activity-library-page .library-page .library-order-row { justify-content: space-between; }
  .activity-library-page .library-page .library-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 10px; }
  .activity-library-page .lib-folder .lib-name { font-size: 14px; }
  .activity-library-page .folder-front { padding: 12px 48px 10px 11px; }
  .activity-library-page .lib-folder .lib-sub { font-size: 12px; }
  .activity-library-page .lib-info { min-height: 108px; padding: 11px 12px 52px; }
  .activity-library-page .lib-activity .lib-name { font-size: 14px; }
  .activity-library-page .lib-menu-button { width: 40px; height: 40px; }
  .activity-library-page .lib-activity .lib-menu-button { bottom: 8px; right: 8px; }
  .activity-library-page .library-list[data-view=small] .lib-info { padding: 10px 10px 50px; }
  .editor-page .item-panel { padding: 12px 10px; }
}
@media(prefers-reduced-motion:reduce) {
  :where(:root:not([data-motion-managed])) .site-page .site-button, :where(:root:not([data-motion-managed])) .site-page .template-card, :where(:root:not([data-motion-managed])) .activity-library-page .lib-activity, :where(:root:not([data-motion-managed])) .activity-library-page .lib-folder-link { transition: none; }
  :where(:root:not([data-motion-managed])) .activity-library-page .lib-activity:hover, :where(:root:not([data-motion-managed])) .activity-library-page .lib-folder-link:hover { transform: none; }
}
/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */
:where(:root[data-reduce-motion]) .site-page .site-button, :where(:root[data-reduce-motion]) .site-page .template-card, :where(:root[data-reduce-motion]) .activity-library-page .lib-activity, :where(:root[data-reduce-motion]) .activity-library-page .lib-folder-link { transition: none; }
:where(:root[data-reduce-motion]) .activity-library-page .lib-activity:hover, :where(:root[data-reduce-motion]) .activity-library-page .lib-folder-link:hover { transform: none; }
@media(forced-colors:active) {
  .site-page .site-button.primary, .resource-page .resource-primary { border: 2px solid ButtonText !important; }
  .site-header .site-nav a[aria-current] { outline: 2px solid LinkText; }
  .folder-front, .folder-back { border: 1px solid CanvasText; }
}
/* Footer links to the privacy notice, terms and contact address on every teacher page. */
.site-footer .site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 6px; }
.site-footer .site-footer-links a { color: var(--cp-ink); font-weight: 700; text-decoration: none; }
.site-footer .site-footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }