:root {
  color-scheme: light;
  --ink: #17223b;
  --muted: #6f756f;
  --paper: #fffef9;
  --sand: #f4f0e8;
  --line: #ded9ce;
  --accent: #ef5b5b;
  --green: #2e8b74;
  --shadow: 0 12px 40px rgb(42 37 28 / 12%);
  --timer-font: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--sand); color: var(--ink); }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, canvas:focus-visible {
  outline: 3px solid rgb(239 91 91 / 35%);
  outline-offset: 2px;
}

.app-shell { width: 100%; min-width: 0; height: 100dvh; display: grid; grid-template-rows: 64px minmax(0, 1fr) 64px; overflow: hidden; }
.topbar {
  z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: rgb(244 240 232 / 92%); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: inherit; text-decoration: none; font-weight: 760; font-size: 18px; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: var(--ink); border-radius: 11px 11px 11px 3px; font-family: Georgia, serif; font-style: italic; }
.connection-pill { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 99px; background: rgb(255 254 249 / 78%); color: var(--muted); font-size: 13px; font-weight: 650; cursor:pointer; }
.connection-pill:focus-visible { outline:3px solid rgb(42 110 160 / 30%); outline-offset:2px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #a6aaa4; }
.connection-pill.connected .status-dot { background: #33a474; box-shadow: 0 0 0 4px rgb(51 164 116 / 13%); }
.connection-pill.connecting .status-dot { background: #e4a72e; animation: pulse 1.2s infinite; }
.connection-pill.error .status-dot { background: var(--accent); }
.connection-pill.local .status-dot { background: #777f8e; }
.connection-mode-switch { display: flex; align-items: center; gap: 3px; margin-left: 3px; }
.connection-mode-switch[hidden], .local-connect-button[hidden] { display: none; }
.connection-mode-switch button, .local-connect-button {
  min-height: 28px; padding: 0 9px; border: 0; border-radius: 99px;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 750;
}
.connection-mode-switch button:hover, .connection-mode-switch button:focus-visible,
.local-connect-button:hover, .local-connect-button:focus-visible { background: rgb(23 34 59 / 7%); color: var(--ink); }
.connection-mode-switch button[aria-checked="true"] { background: var(--ink); color: #fff; }
.local-connect-button { margin-left: 2px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
@keyframes pulse { 50% { opacity: .35; } }
.top-actions { justify-self: end; display: flex; gap: 6px; }
.icon-button { border: 0; border-radius: 10px; min-width: 42px; height: 42px; background: transparent; cursor: pointer; font-size: 21px; }
.icon-button:hover { background: rgb(23 34 59 / 7%); }
.classroom-button { font-size: 19px; }
.lirecouleur-button, .roucoule-button { display: inline-grid; place-items: center; padding: 6px; text-decoration: none; }
.lirecouleur-button img, .roucoule-button img { display: block; width: 30px; height: 30px; object-fit: contain; }

.classroom-panel {
  position: fixed; z-index: 8; top: 70px; right: 16px; width: min(360px, calc(100% - 24px));
  padding: 16px; border: 0; border-top: 3px solid var(--ink); border-radius: 0;
  background: rgb(255 254 249 / 98%); box-shadow: 0 14px 42px rgb(23 34 59 / 18%);
  backdrop-filter: blur(14px);
}
.classroom-panel[hidden] { display: none; }
.timer-panel, .work-mode-panel, .picker-panel { z-index: 60; }
.classroom-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.classroom-panel-header strong { font-family: Georgia, serif; font-size: 20px; font-weight: 600; }
.classroom-panel-header button {
  width: 34px; height: 34px; border: 0; border-radius: 0; background: transparent;
  cursor: pointer; font-size: 22px;
}
.widget-help { margin: -4px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.timer-large-value { display: block; margin: 3px 0 13px; text-align: center; font-size: 52px; font-weight: 800; letter-spacing: .04em; }
.timer-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.timer-presets button {
  min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 0;
  background: var(--paper); cursor: pointer; font-size: 12px; font-weight: 700;
}
.timer-duration-title { display: block; color: var(--muted); text-align: center; font-size: 11px; font-weight: 700; }
.timer-duration { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 8px 0 14px; }
.timer-duration label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; text-align: center; }
.timer-duration input {
  width: 70px; height: 42px; border: 1px solid var(--line); border-radius: 0;
  background: #fff; color: var(--ink); text-align: center; font-weight: 750;
}
.timer-duration > span { padding-bottom: 9px; font-size: 21px; font-weight: 750; }
.timer-duration > button {
  height: 42px; padding: 0 10px; border: 0; border-radius: 0; background: var(--ink);
  color: #fff; cursor: pointer; font-size: 11px; font-weight: 750;
}
.timer-sound-option { display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.timer-sound-option input { accent-color: var(--ink); }
.timer-repeat-option {
  display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 11px;
  color: var(--muted); font-size: 12px;
}
.timer-repeat-option input {
  width: 62px; height: 36px; border: 1px solid var(--line); border-radius: 0;
  background: #fff; color: var(--ink); text-align: center; font-weight: 750;
}
.timer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.timer-actions button {
  min-height: 43px; border: 1px solid var(--line); border-radius: 0;
  background: var(--paper); cursor: pointer; font-weight: 750;
}
.timer-actions .primary-button, .picker-panel-actions .primary-button {
  border-color: var(--ink); background: var(--ink); color: #fff;
}
.classroom-widget {
  --widget-scale: 1;
  position: fixed; z-index: 7; transform: scale(var(--widget-scale)); transform-origin: top left;
  touch-action: none; user-select: none;
}
.classroom-widget[hidden] { display: none; }
.classroom-widget-content {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 100%;
  padding: 0; border: 0; background: transparent; color: inherit; cursor: grab;
}
.classroom-widget-content:active { cursor: grabbing; }
.classroom-widget-resize {
  position: absolute; right: -10px; bottom: -10px; display: grid; place-items: center;
  width: 25px; height: 25px; padding: 0; border: 2px solid var(--paper); border-radius: 0;
  background: var(--ink); color: #fff; box-shadow: 0 3px 9px rgb(23 34 59 / 24%);
  cursor: nwse-resize; font-size: 13px; font-weight: 800; touch-action: none;
}
.classroom-widget-remove {
  position: absolute; z-index: 2; top: -11px; right: -11px; display: grid; place-items: center;
  width: 27px; height: 27px; padding: 0; border: 2px solid var(--paper); border-radius: 50%;
  background: var(--ink); color: #fff; box-shadow: 0 3px 9px rgb(23 34 59 / 24%);
  cursor: pointer; font-size: 18px; line-height: 1;
}
.classroom-widget-remove:hover, .classroom-widget-remove:focus-visible { background: #b72e2e; }
.pdf-viewer-window {
  position: fixed; z-index: 26; top: 82px; left: max(20px, calc(50vw - 390px));
  display: grid; grid-template-rows: 36px auto auto minmax(0, 1fr);
  width: min(780px, calc(100vw - 40px)); height: min(650px, calc(100vh - 115px));
  min-width: 420px; min-height: 320px; overflow: visible;
  border: 0; border-radius: 9px; background: #e5e7eb; color: #17223b;
  box-shadow: 0 18px 55px rgb(15 23 42 / 35%); user-select: none;
}
.pdf-viewer-window[hidden] { display: none; }
.pdf-viewer-window:fullscreen {
  top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
  max-width: none; max-height: none; border: 0; border-radius: 0;
}
.pdf-viewer-titlebar {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 8px 0 12px;
  border-radius: 8px 8px 0 0; background: #17223b; color: #fff; cursor: grab; touch-action: none;
}
.pdf-viewer-titlebar:active { cursor: grabbing; }
.pdf-viewer-titlebar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.pdf-viewer-titlebar span { margin-left: auto; opacity: .58; font-size: 10px; }
.pdf-viewer-titlebar button {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
  background: transparent; color: #fff; cursor: pointer; font-size: 20px;
}
.pdf-viewer-titlebar button:hover, .pdf-viewer-titlebar button:focus-visible { background: #b72e2e; }
.pdf-viewer-toolbar {
  display: flex; align-items: center; gap: 2px; min-height: 43px; overflow-x: auto; overflow-y: hidden;
  padding: 4px 7px; border-bottom: 1px solid #c7cbd1; background: #f8fafc; scrollbar-width: thin;
}
.pdf-viewer-toolbar button {
  flex: 0 0 auto; min-width: 32px; height: 32px; padding: 0 7px; border: 1px solid transparent;
  border-radius: 4px; background: transparent; color: #17223b; cursor: pointer; font: 700 17px/1 system-ui;
}
.pdf-viewer-toolbar button:hover, .pdf-viewer-toolbar button:focus-visible,
.pdf-viewer-toolbar button.is-active { border-color: #cbd5e1; background: #e5e7eb; }
.pdf-viewer-toolbar button:disabled { opacity: .34; cursor: default; }
.pdf-toolbar-separator { flex: 0 0 auto; width: 1px; height: 25px; margin: 0 5px; background: #cbd5e1; }
.pdf-toolbar-spacer { flex: 1 0 8px; }
.pdf-page-field input {
  width: 50px; height: 31px; padding: 0 4px; border: 1px solid #b9bec7; border-radius: 3px;
  background: #fff; color: #17223b; text-align: center; font: 700 13px system-ui;
}
.pdf-viewer-toolbar output { flex: 0 0 auto; padding: 0 3px; font-size: 12px; white-space: nowrap; }
.pdf-viewer-toolbar select {
  flex: 0 0 auto; height: 32px; max-width: 110px; border: 1px solid #cbd5e1; border-radius: 3px;
  background: #eef0f3; color: #17223b; font: 700 12px system-ui;
  touch-action: manipulation; user-select: auto; -webkit-user-select: auto;
}
.pdf-searchbar {
  display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 5px 10px;
  border-bottom: 1px solid #c7cbd1; background: #fff; font-size: 12px;
}
.pdf-searchbar[hidden] { display: none; }
.pdf-searchbar input { min-width: 80px; flex: 1; height: 31px; border: 1px solid #b9bec7; padding: 0 8px; }
.pdf-searchbar button { height: 31px; border: 1px solid #cbd5e1; background: #f8fafc; cursor: pointer; }
.pdf-viewer-body { display: flex; min-width: 0; min-height: 0; overflow: hidden; }
.pdf-viewer-sidebar {
  flex: 0 0 110px; overflow: auto; padding: 8px; border-right: 1px solid #b7bbc2; background: #d7d9dd;
}
.pdf-viewer-sidebar[hidden] { display: none; }
.pdf-viewer-sidebar button {
  display: grid; gap: 4px; width: 100%; margin: 0 0 8px; padding: 5px; border: 2px solid transparent;
  background: transparent; color: #17223b; cursor: pointer; font-size: 11px;
}
.pdf-viewer-sidebar button::before {
  content: ""; display: block; width: 64px; height: 76px; margin: auto; border: 1px solid #adb2ba;
  background: #fff; box-shadow: 0 1px 3px rgb(15 23 42 / 18%);
}
.pdf-viewer-sidebar button.is-active { border-color: #3876bf; background: rgb(255 255 255 / 55%); }
.pdf-viewer-viewport {
  position: relative; flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 18px;
  background: #cfd1d5; cursor: grab; overscroll-behavior: contain; touch-action: pan-x pan-y;
}
.pdf-viewer-viewport.is-panning { cursor: grabbing; touch-action: none; }
.pdf-page-surface { width: max-content; min-width: 100%; min-height: 100%; display: grid; place-items: start center; }
#pdf-viewer-canvas { display: block; max-width: none; background: #fff; box-shadow: 0 2px 10px rgb(15 23 42 / 22%); }
.pdf-viewer-loading {
  position: sticky; left: 50%; bottom: 18px; width: max-content; padding: 7px 11px;
  border-radius: 16px; background: rgb(23 34 59 / 88%); color: #fff; font-size: 12px;
}
.pdf-object-toolbar {
  position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 10px); display: flex; gap: 4px;
  padding: 4px; border: 1px solid #d4d0c8; border-radius: 7px; background: #fffef9;
  box-shadow: 0 5px 16px rgb(23 34 59 / 18%); transform: translateX(-50%);
}
.pdf-object-toolbar button {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: #17223b; cursor: pointer; font-size: 16px;
}
.pdf-object-toolbar button:hover, .pdf-object-toolbar button:focus-visible,
.pdf-object-toolbar button[aria-pressed="true"] { background: #f4f0e8; }
.pdf-object-toolbar button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #17223b; }
.pdf-object-toolbar button:disabled, .pdf-viewer-titlebar button:disabled { opacity: .35; cursor: not-allowed; }
.pdf-object-toolbar .pdf-object-delete { color: #b72e2e; }
.pdf-resize-handle {
  position: absolute; z-index: 4; width: 16px; height: 16px; border: 2px solid #7557c7;
  border-radius: 50%; background: #fffef9; box-shadow: 0 1px 4px rgb(23 34 59 / 20%); touch-action: none;
}
.pdf-resize-handle.is-nw { left: -8px; top: -8px; cursor: nwse-resize; }
.pdf-resize-handle.is-n { left: 50%; top: -8px; transform: translateX(-50%); cursor: ns-resize; }
.pdf-resize-handle.is-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.pdf-resize-handle.is-e { right: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.pdf-resize-handle.is-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.pdf-resize-handle.is-s { left: 50%; bottom: -8px; transform: translateX(-50%); cursor: ns-resize; }
.pdf-resize-handle.is-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.pdf-resize-handle.is-w { left: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.pdf-viewer-window.pdf-locked .pdf-resize-handle { display: none; }
.pdf-viewer-window.pdf-locked .pdf-viewer-titlebar { cursor: default; }
.managed-floating-window .floating-window-toolbar,
.managed-floating-window [data-floating-resize] { display: none; }
.managed-floating-window:not(.floating-selected)::after {
  content: ""; position: absolute; z-index: 6; inset: 0; cursor: pointer;
}
.managed-floating-window.floating-selected .floating-window-toolbar { display: flex; }
.managed-floating-window.floating-selected [data-floating-resize] { display: block; }
.managed-floating-window.floating-locked [data-floating-resize] { display: none; }
.floating-window-toolbar {
  position: absolute; z-index: 8; left: 50%; bottom: calc(100% + 10px); gap: 4px; padding: 4px;
  border: 1px solid #d4d0c8; border-radius: 7px; background: #fffef9;
  box-shadow: 0 5px 16px rgb(23 34 59 / 18%); transform: translateX(-50%);
}
.floating-window-toolbar button {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: #17223b; cursor: pointer; font: 700 16px/1 system-ui, sans-serif;
}
.floating-window-toolbar button:hover, .floating-window-toolbar button:focus-visible,
.floating-window-toolbar button[aria-pressed="true"] { background: #f4f0e8; }
.floating-window-toolbar button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #17223b; }
.floating-window-toolbar button:disabled { opacity: .35; cursor: not-allowed; }
.floating-resize-handle {
  position: absolute; z-index: 7; width: 16px; height: 16px; border: 2px solid #7557c7;
  border-radius: 50%; background: #fffef9; box-shadow: 0 1px 4px rgb(23 34 59 / 20%); touch-action: none;
}
.floating-resize-handle[data-floating-resize="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.floating-resize-handle[data-floating-resize="n"] { left: 50%; top: -8px; transform: translateX(-50%); cursor: ns-resize; }
.floating-resize-handle[data-floating-resize="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.floating-resize-handle[data-floating-resize="e"] { right: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.floating-resize-handle[data-floating-resize="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }
.floating-resize-handle[data-floating-resize="s"] { left: 50%; bottom: -8px; transform: translateX(-50%); cursor: ns-resize; }
.floating-resize-handle[data-floating-resize="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.floating-resize-handle[data-floating-resize="w"] { left: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.pdf-slideshow-controls {
  position: absolute; z-index: 5; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 5px; padding: 5px;
  border: 1px solid rgb(255 255 255 / 24%); border-radius: 8px;
  background: rgb(15 23 42 / 88%); color: #fff; box-shadow: 0 7px 24px rgb(0 0 0 / 28%);
  transform: translateX(-50%);
}
.pdf-slideshow-controls[hidden] { display: none; }
.pdf-slideshow-controls button {
  min-width: 38px; height: 36px; padding: 0 10px; border: 0; border-radius: 5px;
  background: transparent; color: #fff; cursor: pointer; font-weight: 750;
}
.pdf-slideshow-controls button:hover, .pdf-slideshow-controls button:focus-visible { background: rgb(255 255 255 / 16%); }
.pdf-slideshow-controls output { min-width: 66px; text-align: center; font-size: 12px; font-weight: 750; }
.pdf-viewer-window.pdf-slideshow {
  grid-template-rows: minmax(0, 1fr); top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important; min-width: 0; min-height: 0;
  border: 0; border-radius: 0; background: #111827;
}
.pdf-slideshow .pdf-viewer-titlebar,
.pdf-slideshow .pdf-viewer-toolbar,
.pdf-slideshow .pdf-searchbar,
.pdf-slideshow .pdf-viewer-sidebar,
.pdf-slideshow .pdf-object-toolbar,
.pdf-slideshow .pdf-resize-handle { display: none; }
.pdf-slideshow .pdf-viewer-body { height: 100%; }
.pdf-slideshow .pdf-viewer-viewport { padding: 12px; background: #111827; cursor: default; }
@media (max-width: 560px) {
  .pdf-viewer-window { top: 72px; left: 4px; width: calc(100vw - 8px); height: calc(100vh - 126px); min-width: 0; min-height: 280px; }
  .pdf-viewer-titlebar span { display: none; }
  .pdf-viewer-sidebar { flex-basis: 82px; padding: 5px; }
  .pdf-viewer-sidebar button::before { width: 50px; height: 62px; }
  .pdf-viewer-viewport { padding: 10px; }
}
.timer-widget {
  --timer-color: var(--ink);
  top: 78px; right: 22px; width: 300px; min-height: 140px; padding: 6px 12px;
  border: 1px solid #d9dde6; border-left: 4px solid var(--timer-color); border-radius: 7px; background: rgb(255 255 255 / 96%);
  color: var(--timer-color); box-shadow: 0 7px 24px rgb(23 34 59 / 14%); backdrop-filter: blur(10px);
}
.timer-widget-layout { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; align-items: center; }
.timer-digits.classroom-widget-content {
  display: grid; grid-template-columns: repeat(2, 43px) 18px repeat(2, 43px);
  justify-content: center; column-gap: 0; row-gap: 2px; width: auto; min-height: 120px; cursor: grab;
}
.timer-digit { display: grid; grid-template-rows: 28px 1fr 28px; place-items: center; min-width: 0; }
.timer-digit > span,
.timer-colon,
.timer-large-value {
  font-family: var(--timer-font);
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.timer-digit > span { font-size: 55px; line-height: 1; }
.timer-digit > button {
  width: 100%; height: 28px; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: #4f5668; cursor: pointer; font-size: 19px; line-height: 1;
}
.timer-digit > button:hover, .timer-digit > button:focus-visible { background: #f0efff; color: #6047d4; }
.timer-colon { align-self: center; margin-top: 1px; font-size: 45px; line-height: 1; }
.timer-widget-actions { display: grid; justify-items: center; gap: 9px; }
.timer-widget-actions button {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 0; background: transparent; cursor: pointer;
}
#timer-widget-toggle { color: var(--timer-color); font-size: 27px; }
#timer-widget-toggle:hover { color: var(--timer-color); transform: scale(1.08); opacity: .72; }
#timer-widget-reset { color: var(--timer-color); }
#timer-widget-reset:hover { color: var(--timer-color); transform: scale(1.08); opacity: .72; }
.reset-symbol { width: 12px; height: 12px; border: 2px solid currentColor; }
.timer-repeat-status { color: var(--timer-color); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.timer-repeat-status[hidden] { display: none; }
.timer-widget.finished { border-left-color: var(--accent); color: #b72e2e; animation: timer-finished .7s ease 3; }
@keyframes timer-finished { 50% { background: #fff0ed; box-shadow: 0 0 0 8px rgb(239 91 91 / 18%); } }
.work-mode-display {
  top: 78px; left: 50%; transform: translateX(-50%) scale(var(--widget-scale));
  width: 128px; height: 128px; min-width: 0; min-height: 0; padding: 13px;
  border: 2px solid var(--ink); border-radius: 50%; background: rgb(255 254 249 / 96%);
  color: var(--ink); box-shadow: 0 7px 24px rgb(23 34 59 / 14%); backdrop-filter: blur(10px);
}
.work-mode-display .classroom-widget-content { flex-direction: column; gap: 2px; }
.work-mode-display span { font-size: 38px; line-height: 1; }
.work-mode-display strong { font-size: 16px; text-transform: lowercase; letter-spacing: .03em; }
.classroom-widget.widget-positioned { right: auto; transform: scale(var(--widget-scale)); }
.work-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.work-mode-options button {
  display: grid; place-items: center; justify-self: center; gap: 4px; width: 118px; height: 118px; padding: 12px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper); cursor: pointer;
}
.work-mode-options button span { font-size: 30px; }
.work-mode-options button strong { font-size: 13px; }
.work-mode-options button[aria-pressed="true"] { border: 2px solid var(--ink); background: var(--sand); padding: 8px; }
.picker-widget {
  top: 82px; left: 50%; width: 340px; padding: 10px 14px 14px;
  border: 2px solid var(--ink); border-radius: 8px; background: rgb(255 254 249 / 97%);
  color: var(--ink); box-shadow: 0 12px 34px rgb(23 34 59 / 22%);
}
.picker-widget-header {
  justify-content: space-between; min-height: 28px; padding: 0 4px 6px;
  font-size: 12px; cursor: grab;
}
.picker-widget-header strong { font-family: Georgia, serif; font-size: 16px; }
.picker-widget-header span { color: var(--muted); font-size: 10px; font-weight: 700; }
.picker-wheel-wrap { position: relative; width: 100%; aspect-ratio: 1; }
#picker-wheel { display: block; width: 100%; height: 100%; }
.picker-pointer {
  position: absolute; z-index: 1; top: 50%; right: -2px; width: 0; height: 0;
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  border-right: 24px solid var(--ink); transform: translateY(-50%);
  filter: drop-shadow(0 2px 2px rgb(23 34 59 / 25%));
}
.picker-result {
  display: block; min-height: 31px; margin: 6px 0 4px; overflow: hidden;
  color: var(--ink); font-family: Georgia, serif; font-size: 21px; font-weight: 700;
  text-align: center; text-overflow: ellipsis; white-space: nowrap;
}
.picker-result.winner { color: #b72e2e; }
.picker-spin-button {
  display: block; min-height: 40px; width: 100%; border: 0; border-radius: 5px;
  background: var(--ink); color: #fff; cursor: pointer; font-weight: 800;
}
.picker-spin-button:disabled { opacity: .45; cursor: wait; }
.picker-list-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; }
#picker-names {
  display: block; width: 100%; resize: vertical; min-height: 142px; padding: 10px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--paper);
  color: var(--ink); font: 14px/1.45 inherit;
}
.picker-list-status {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 34px; color: var(--muted); font-size: 11px;
}
.picker-list-status button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.picker-remove-option {
  display: flex; align-items: center; gap: 8px; padding: 9px 0 12px;
  font-size: 12px; font-weight: 700;
}
.picker-remove-option input { width: 18px; height: 18px; accent-color: var(--ink); }
.picker-panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.picker-panel-actions button {
  min-height: 43px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--paper); cursor: pointer; font-weight: 750;
}
.video-widget {
  top: 90px; left: 120px; width: 480px; height: 330px; padding: 0;
  border: 0; border-radius: 8px; background: #111827; color: #fff;
  box-shadow: 0 12px 34px rgb(23 34 59 / 25%); overflow: visible;
}
.video-widget-header {
  min-height: 34px; height: 34px; justify-content: flex-start; padding: 0 12px;
  background: var(--ink); color: #fff; cursor: grab; border-radius: 5px 5px 0 0;
}
.video-widget-header strong { font-size: 13px; }
.video-widget-header span { margin-left: auto; opacity: .6; font-size: 10px; }
.video-player { height: calc(100% - 78px); background: #111827; overflow: hidden; }
.video-player iframe, .video-player video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.video-controller-placeholder {
  display: grid; place-content: center; height: 100%; padding: 20px; color: #d7dbea;
  text-align: center; font-size: 13px; line-height: 1.45;
}
.video-widget-controls { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; background: #fff; color: var(--ink); }
.video-widget-controls button {
  min-width: 42px; height: 32px; padding: 0 8px; border: 0; background: transparent; cursor: pointer; font-weight: 800;
}
.video-widget-controls output { min-width: 48px; font-size: 11px; font-weight: 750; text-align: center; }
.video-url-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.video-url-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.video-url-row input { min-width: 0; height: 43px; padding: 0 10px; border: 1px solid var(--line); background: #fff; }
.video-url-row button { padding: 0 13px; border: 0; background: var(--ink); color: #fff; cursor: pointer; font-weight: 750; }
.video-panel-controls { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 7px; margin: 14px 0; }
.video-panel-controls button { min-height: 42px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; }
.video-panel-controls .primary-button { background: var(--ink); color: #fff; }
.video-volume { display: grid; grid-template-columns: auto 1fr 48px; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.video-volume input { accent-color: var(--ink); }
.video-panel-time { display: block; margin-top: 10px; text-align: center; font-weight: 800; }
.resource-window {
  position: fixed; display: flex; flex-direction: column; min-width: 320px; min-height: 220px;
  border: 1px solid #a8a39a; border-radius: 8px; background: #fff; color: var(--ink);
  box-shadow: 0 12px 34px rgb(23 34 59 / 25%); overflow: visible;
}
.resource-window-header {
  display: flex; flex: 0 0 42px; align-items: center; gap: 7px; padding: 0 10px;
  border-radius: 7px 7px 0 0; background: var(--ink); color: #fff; cursor: grab;
}
.resource-window-header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.resource-window-header > span { margin-right: auto; opacity: .55; font-size: 10px; }
.resource-window-header button { width: 28px; height: 28px; border: 0; border-radius: 5px; background: rgb(255 255 255 / 12%); color: #fff; cursor: pointer; }
.resource-window-header output { min-width: 43px; font-size: 10px; font-weight: 750; text-align: center; }
.resource-window-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; background: #eef0f3; }
.resource-window-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.resource-window-body img { display: block; max-width: none; }
.resource-window-body pre { box-sizing: border-box; width: max-content; min-width: 100%; min-height: 100%; margin: 0; padding: 18px; background: #fff; white-space: pre-wrap; font: 14px/1.5 ui-monospace, monospace; }
.resource-window-body audio, .resource-window-body video { display: block; max-width: 100%; margin: 24px auto; }
.resource-window-placeholder { display: grid; place-content: center; box-sizing: border-box; width: 100%; height: 100%; min-height: 180px; padding: 24px; color: var(--muted); text-align: center; white-space: pre-line; }
.resource-window-footer { display: flex; flex: 0 0 34px; align-items: center; padding: 0 12px; border-top: 1px solid var(--line); background: #fff; }
.resource-window-footer a { color: var(--ink); font-size: 11px; font-weight: 750; text-decoration: none; }
.resource-window-video .resource-window-body { background:#111827; overflow:hidden; }
.resource-window-video .resource-window-body video { width:100%; height:100%; margin:0; background:#000; object-fit:contain; }
.resource-video-controls { display:flex; flex:0 0 44px; align-items:center; justify-content:center; gap:7px; padding:0 9px; }
.resource-video-controls button { min-width:38px; height:30px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); cursor:pointer; font-weight:750; }
.resource-video-controls output { min-width:48px; font-size:10px; font-weight:750; text-align:center; }
.resource-video-controls label { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:10px; }
.resource-video-controls input { width:70px; accent-color:var(--ink); }
.website-url-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.website-url-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.website-url-row input { min-width: 0; height: 43px; padding: 0 10px; border: 1px solid var(--line); background: #fff; }
.website-url-row button { padding: 0 13px; border: 0; background: var(--ink); color: #fff; cursor: pointer; font-weight: 750; }
.website-embed-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.camera-widget {
  top: 105px; left: 170px; width: 480px; height: 360px; padding: 0;
  border: 0; border-radius: 8px; background: #111827; color: #fff;
  box-shadow: 0 12px 34px rgb(23 34 59 / 25%); overflow: visible;
}
.camera-widget-header {
  min-height: 34px; height: 34px; justify-content: flex-start; padding: 0 12px;
  background: var(--ink); color: #fff; cursor: grab; border-radius: 5px 5px 0 0;
}
.camera-widget-header strong { font-size: 13px; }
.camera-widget-header span { margin-left: auto; opacity: .6; font-size: 10px; }
.camera-widget video {
  display: block; width: 100%; height: calc(100% - 76px); object-fit: contain; background: #000;
}
.camera-widget-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 42px; padding: 0 12px; background: #fff; color: var(--ink);
}
.camera-widget-footer span { font-size: 11px; font-weight: 800; }
.camera-widget-footer span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #ef5b5b; }
.camera-widget-footer button {
  height: 30px; padding: 0 9px; border: 1px solid var(--line); background: var(--paper);
  cursor: pointer; font-size: 11px; font-weight: 750;
}
.camera-widget-footer button.needs-action { border-color: var(--ink); background: var(--ink); color: #fff; }
.camera-sound-option {
  display: flex; align-items: center; gap: 9px; min-height: 44px; margin: 8px 0 14px;
  padding: 0 10px; border: 1px solid var(--line); background: var(--paper); font-size: 13px;
}
.camera-sound-option input { width: 18px; height: 18px; accent-color: var(--ink); }
.camera-panel-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.camera-panel-actions button { min-height: 43px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-weight: 750; }
.camera-panel-actions .primary-button { border-color: var(--ink); background: var(--ink); color: #fff; }
.camera-panel-status { display: block; margin-top: 10px; color: var(--muted); text-align: center; font-size: 11px; }

.workspace { min-height: 0; display: grid; grid-template-columns: 94px minmax(0, 1fr); padding: 10px 14px 0; gap: 12px; }
.toolbar { display: flex; flex-direction: column; min-height: 0; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 5px 20px rgb(42 37 28 / 7%); overflow-y: auto; scrollbar-width: none; }
.tool-group { display: flex; flex-direction: column; gap: 3px; }
.tool-button { min-height: 54px; padding: 5px 2px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; color: var(--muted); font-size: 10px; }
.tool-button .tool-icon { display: block; font-size: 23px; line-height: 25px; color: var(--ink); }
.tool-button:hover { background: var(--sand); }
.tool-button.active { background: var(--ink); color: #fff; }
.tool-button.active .tool-icon { color: #fff; }
.tool-button.has-variants { position: relative; }
.tool-button.has-variants::after {
  content: ""; position: absolute; right: 6px; bottom: 6px; width: 0; height: 0;
  border-left: 4px solid transparent; border-top: 4px solid currentColor; opacity: .55;
}
.tool-variant-menu {
  position: fixed; z-index: 40; width: max-content; min-width: 174px; padding: 6px;
  border: 1px solid var(--line); border-radius: 14px; background: rgb(255 254 249 / 98%);
  box-shadow: 0 12px 35px rgb(23 34 59 / 20%); backdrop-filter: blur(16px);
}
.tool-variant-menu[hidden] { display: none; }
.tool-variant-option {
  display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 8px; width: 100%;
  min-height: 42px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink); font: 600 13px/1.2 system-ui, sans-serif; text-align: left; cursor: pointer;
}
.tool-variant-option > span:first-child { font-size: 22px; text-align: center; }
.tool-variant-option:hover, .tool-variant-option:focus-visible { background: var(--sand); outline: none; }
.tool-variant-option[aria-checked="true"] { background: #e9eefc; color: #244da0; }
.text-tool-icon { font-family: Georgia, serif; font-weight: 800; }
.tool-settings { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 11px; }
.color-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; justify-items: center; }
.color-row[hidden] { display: none; }
.color-swatch, .custom-color { width: 27px; height: 27px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line); background: var(--swatch); cursor: pointer; }
.color-swatch.active, .custom-color.active { box-shadow: 0 0 0 2px var(--ink); }
.custom-color { display: grid; place-items: center; overflow: hidden; position: relative; background: conic-gradient(#e95d5d, #e2c34d, #4caf78, #4e8cc9, #9c62ce, #e95d5d); color: #fff; font-weight: bold; }
.custom-color input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size-control { display: grid; justify-items: center; gap: 3px; margin-top: 11px; font-size: 10px; color: var(--muted); }
.size-control input { width: 68px; accent-color: var(--ink); }
.size-control output { color: var(--ink); font-weight: 700; }
.size-control[hidden] { display: none; }
.eraser-mode-control { display: grid; gap: 4px; margin-top: 9px; }
.eraser-mode-control[hidden] { display: none; }
.eraser-mode-control button { width: 68px; min-height: 32px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--muted); font-size: 10px; cursor: pointer; }
.eraser-mode-control button[aria-pressed="true"] { border-color: var(--ink); background: var(--sand); color: var(--ink); font-weight: 750; }
.finger-toggle { display: grid; place-items: center; gap: 1px; width: 68px; min-height: 48px; margin-top: 8px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--muted); cursor: pointer; }
.finger-toggle span { font-size: 20px; line-height: 20px; }
.finger-toggle small { font-size: 10px; }
.finger-toggle[aria-pressed="true"] { border-color: var(--green); background: rgb(46 139 116 / 11%); color: var(--green); font-weight: 750; }
.mobile-classroom-menu { display: none; }

.board-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 19px 19px 0 0; background-color: var(--paper); background-image: radial-gradient(#d9d7d0 1px, transparent 1px); background-size: 24px 24px; box-shadow: var(--shadow); touch-action: none; }
.board-background-canvas { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
#board { position: relative; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.board-wrap[data-tool="eraser"] #board { cursor: cell; }
.board-wrap[data-tool="pan"] #board { cursor: grab; }
.board-wrap[data-tool="pan"] #board:active { cursor: grabbing; }
.board-wrap[data-tool="text"] #board { cursor: text; }
.board-wrap[data-tool="select"] #board { cursor: default; }
.board-wrap[data-tool="select"] #board:active { cursor: grabbing; }
.board-wrap[data-tool="none"] #board { cursor: default; }
.module-panel-drag-handle { cursor: ew-resize !important; touch-action: none; user-select: none; }
.module-panel-drag-handle.is-dragging { cursor: grabbing !important; }
.module-panel-has-close { padding-right: 38px !important; }
#board-wrap > [data-module-panel-root]:is(.palette-closed, .panel-closed) { pointer-events: none !important; }
#board-wrap > [data-module-panel-root]:is(.palette-closed, .panel-closed) * { pointer-events: none !important; }
#board-wrap > [data-module-panel-root]:is(.palette-closed, .panel-closed) > [data-module-panel-toggle],
#board-wrap > [data-module-panel-root]:is(.palette-closed, .panel-closed) > [data-module-panel-toggle] * {
  pointer-events: auto !important;
}
#board-wrap:not(:has(> [data-module-panel-root]:not(.palette-closed):not(.panel-closed))) > #board {
  pointer-events: auto !important;
}
.module-tab-close {
  position: absolute; z-index: 30; display: grid; place-items: center; width: 24px; height: 24px;
  min-width: 24px; min-height: 24px; padding: 0 0 2px; border: 1px solid rgb(23 34 59 / 18%);
  border-radius: 50%; background: rgb(255 255 255 / 88%); color: #17223b;
  box-shadow: 0 1px 5px rgb(23 34 59 / 15%); pointer-events: auto; cursor: pointer;
  font: 700 17px/1 system-ui, sans-serif; touch-action: manipulation;
}
.module-tab-close:hover, .module-tab-close:focus-visible { background: #fff; color: #b42318; }
.module-tab-close:disabled { opacity: .5; cursor: wait; }
.module-panel-drag-handle:not(button) { position: relative; }
.module-panel-drag-handle:not(button)::before {
  content: "↔"; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  color: currentColor; font-size: 11px; line-height: 1; opacity: .42; pointer-events: none;
}
.text-editor {
  --text-editor-accent: #287fca;
  position: absolute; z-index: 7; display: grid; grid-template-rows: auto auto minmax(90px, 1fr) auto auto;
  gap: 8px; min-width: 240px; min-height: 280px; padding: 8px; box-sizing: border-box;
  border: 2px solid var(--text-editor-accent); border-radius: 11px; background: rgb(255 254 249 / 97%);
  box-shadow: 0 12px 36px rgb(23 34 59 / 24%); touch-action: auto;
}
.text-editor[hidden] { display: none; }
.text-editor-toolbar-row { grid-row: 1; display: flex; align-items: center; gap: 5px; min-width: 0; }
.text-editor-drag-handle {
  display: flex; flex: 1 0 48px; align-items: center; justify-content: flex-end;
  width: auto; min-width: 48px; height: 34px; padding: 0 7px;
  border: 0; border-radius: 6px; background: transparent; cursor: move; touch-action: none;
}
.text-editor-drag-handle:hover, .text-editor-drag-handle:focus-visible { background: var(--sand); }
.text-editor-drag-handle span::before { content: "✥"; color: var(--muted); font-size: 20px; line-height: 1; }
.text-editor-resize-handle {
  position: absolute; z-index: 2; width: 12px; height: 12px; border: 2px solid var(--text-editor-accent);
  border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / 75%); touch-action: none;
}
.text-editor-resize-handle.is-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.text-editor-resize-handle.is-n { left: 50%; top: -7px; transform: translateX(-50%); cursor: ns-resize; }
.text-editor-resize-handle.is-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.text-editor-resize-handle.is-e { right: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.text-editor-resize-handle.is-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.text-editor-resize-handle.is-s { left: 50%; bottom: -7px; transform: translateX(-50%); cursor: ns-resize; }
.text-editor-resize-handle.is-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.text-editor-resize-handle.is-w { left: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.selection-toolbar {
  position: fixed; z-index: 7; display: grid;
  grid-template-columns: repeat(var(--selection-columns, 5), 38px);
  align-items: center; gap: 3px; padding: 4px;
  border: 1px solid var(--line); border-radius: 8px; background: rgb(255 254 249 / 98%);
  box-shadow: 0 7px 22px rgb(23 34 59 / 22%); transform: translate(-50%, calc(-100% - 10px));
  touch-action: manipulation;
}
.selection-toolbar[hidden], .app-shell.presentation .selection-toolbar { display: none; }
.selection-toolbar button[hidden] { display: none; }
.selection-toolbar button, .selection-color {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 5px; background: transparent; color: var(--ink);
  cursor: pointer; font-size: 18px;
}
.selection-toolbar button:hover, .selection-toolbar button:focus-visible,
.selection-toolbar button[aria-pressed="true"] { background: var(--sand); }
.selection-toolbar button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.selection-toolbar button:disabled, .selection-toolbar label.selection-disabled {
  opacity: .38; cursor: not-allowed; pointer-events: none;
}
.selection-color { position: relative; overflow: hidden; }
.selection-color[hidden] { display: none; }
.selection-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.selection-color span {
  width: 21px; height: 21px; border: 3px solid #fff; border-radius: 50%;
  background: var(--selection-color, #17223b); box-shadow: 0 0 0 1px var(--line);
}
.selection-thickness {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 7px; min-height: 32px; padding: 0 6px;
  color: var(--muted); font-size: 10px; font-weight: 750;
}
.selection-thickness[hidden] { display: none; }
.selection-thickness input { width: 100%; accent-color: var(--ink); }
.selection-toolbar .selection-delete { color: #b72e2e; }
.selection-toolbar .selection-delete:hover, .selection-toolbar .selection-delete:focus-visible {
  background: #fff0ed; color: #8f2020;
}
.module-selection-rectangle {
  position: absolute; z-index: 20; border: 2px solid #287fca; border-radius: 5px;
  background: rgb(58 142 211 / 10%); box-shadow: 0 0 0 1px rgb(255 255 255 / 75%);
  pointer-events: none;
}
.module-selection-rectangle[hidden] { display: none; }
.compact-action { display: grid !important; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 5px; padding: 5px 8px !important; text-align: left; }
.compact-action > span { display: grid; place-items: center; font-size: 17px; line-height: 1; }
.compact-action > small { font-size: 10px; font-weight: 750; line-height: 1.15; }
.text-editor-input {
  grid-row: 3; width: 100%; height: 100%; min-height: 90px; max-height: none; resize: none; padding: 9px 10px;
  box-sizing: border-box; overflow: auto; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; line-height: 1.2; white-space: pre-wrap; overflow-wrap: anywhere;
  outline: none; user-select: text; -webkit-user-select: text; touch-action: auto;
}
.text-editor-input:focus { border-color: var(--text-editor-accent); box-shadow: 0 0 0 2px rgb(40 127 202 / 14%); }
.text-editor-input:empty::before { content: attr(data-placeholder); color: #8b8e96; pointer-events: none; }
.text-editor-format {
  display: flex; flex: 0 1 auto; flex-wrap: nowrap; align-items: center; gap: 5px; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.text-editor-format::-webkit-scrollbar { display: none; }
.text-editor-format > button {
  flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: var(--paper); color: var(--ink); cursor: pointer;
}
.text-editor-format > button[aria-pressed="true"] {
  border-color: var(--ink); background: var(--sand);
}
.text-editor-format > button[aria-expanded="true"] { border-color: var(--text-editor-accent); background: #eaf4fc; }
.text-editor-math-panel, .text-editor-reading-panel {
  grid-row: 2; display: grid; gap: 8px; min-height: 0; max-height: min(230px, 40dvh); padding: 9px; overflow: auto;
  border: 1px solid var(--line); border-radius: 9px; background: rgb(255 254 249 / 99%);
  box-shadow: inset 0 0 0 1px rgb(40 127 202 / 5%); touch-action: manipulation;
}
.text-editor-math-panel[hidden], .text-editor-reading-panel[hidden], .text-editor-math-form[hidden] { display: none; }
.text-editor-reading-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.text-editor-reading-options label { display:flex; align-items:center; gap:8px; min-height:48px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--paper); cursor:pointer; }
.text-editor-reading-options label:has(input:checked) { border-color:var(--text-editor-accent); background:#eaf4fc; }
.text-editor-reading-options input { flex:0 0 auto; width:20px; height:20px; accent-color:var(--text-editor-accent); }
.text-editor-reading-options span { display:grid; gap:2px; min-width:0; }
.text-editor-reading-options strong { font-size:11px; }
.text-editor-reading-options small { color:var(--muted); font-size:9px; line-height:1.2; }
#text-editor-reading-reset { justify-self:end; min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); cursor:pointer; font-weight:750; }
#text-editor-reading-reset:disabled { opacity:.45; cursor:not-allowed; }
.text-editor-input.reading-spacing-preview { letter-spacing:.06em; word-spacing:.18em; line-height:1.45; }
.text-editor-input.reading-lines-preview { background-color:#fff; background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 1.45em,rgb(52 120 246 / 10%) 1.45em,rgb(52 120 246 / 10%) 2.9em); }
.text-editor-math-symbols { display: grid; grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); gap: 5px; }
.text-editor-math-symbols button, .text-editor-math-actions button, .text-editor-math-form button {
  min-height: 34px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--paper); color: var(--ink); cursor: pointer; font-weight: 750;
}
.text-editor-math-symbols button { padding: 0; font: 700 19px/1 Georgia, serif; }
.text-editor-math-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.text-editor-math-actions button[aria-pressed="true"] { border-color: var(--text-editor-accent); background: #eaf4fc; }
.text-editor-math-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.text-editor-math-form input {
  min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--ink);
}
.text-editor-fraction-fields { display: grid; gap: 2px; }
.text-editor-fraction-fields input:first-child { border-radius: 7px 7px 2px 2px; border-bottom-color: var(--ink); text-align: center; }
.text-editor-fraction-fields input:last-child { border-radius: 2px 2px 7px 7px; text-align: center; }
.text-math { display: inline-flex; box-sizing: border-box; color: inherit; vertical-align: middle; user-select: all; }
.text-math-fraction { flex-direction: column; align-items: stretch; min-width: 1.2em; margin: 0 .12em; line-height: 1; text-align: center; }
.text-math-fraction > span { padding: .05em .18em; font-size: .68em; }
.text-math-fraction > span:first-child { border-bottom: .07em solid currentColor; }
.text-math-root { align-items: flex-start; margin: 0 .08em; }
.text-math-root-sign { font-size: 1.12em; line-height: 1.05; }
.text-math-root-expression { min-width: .35em; padding: .05em .08em 0; border-top: .07em solid currentColor; line-height: 1.05; }
.text-math-vector { position: relative; min-width: 1em; justify-content: center; padding-top: .38em; line-height: 1; }
.text-math-vector::before { content: "→"; position: absolute; left: 0; right: 0; top: -.35em; text-align: center; font-size: .78em; }
.text-editor-colors { display: flex; flex: 0 0 auto; gap: 4px; align-items: center; padding-left: 2px; }
.text-editor-colors button, .text-editor-colors label {
  position: relative; display: grid; place-items: center; width: 24px; height: 24px;
  padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--swatch, var(--paper)); cursor: pointer;
}
.text-editor-colors button[aria-pressed="true"], .text-editor-colors label.active { box-shadow: 0 0 0 2px var(--ink); }
.text-editor-colors label { overflow: hidden; border-radius: 6px; background: var(--paper); }
.text-editor-colors label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.text-editor-colors label span { font-weight: 800; }
.text-editor-size { display: grid; flex: 0 0 auto; gap: 1px; color: var(--muted); font-size: 9px; font-weight: 700; }
.text-editor-size select {
  height: 25px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper);
  touch-action: manipulation; user-select: auto; -webkit-user-select: auto;
}
.text-editor-actions {
  grid-row: 4; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.text-editor-actions button {
  height: 38px; min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper); cursor: pointer; font-size: 12px; font-weight: 700;
}
.text-editor-actions > span { flex: 1 1 auto; min-width: 0; }
.text-editor-actions #text-editor-cancel,
.text-editor-actions #text-editor-save { flex: 0 0 clamp(76px, 16vw, 108px); width: clamp(76px, 16vw, 108px); }
.text-editor-actions .primary-button { border-color: var(--ink); background: var(--ink); color: #fff; }
.text-editor-actions .danger-text { color: #c23e3e; }
.text-editor > small { grid-row: 5; color: var(--muted); font-size: 10px; }
.zoom-control { position: absolute; z-index: 25; right: 16px; bottom: 16px; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 254 249 / 92%); box-shadow: 0 4px 14px rgb(0 0 0 / 8%); }
.zoom-control button { min-width: 42px; height: 40px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; font-weight: 700; }
.zoom-control button:last-child { border-right: 0; }
#zoom-reset { min-width: 67px; font-size: 12px; }
.empty-hint { pointer-events: none; position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: #9a9b94; text-align: center; }
.empty-hint strong { color: #777b77; font-size: 17px; }
.empty-hint span { font-size: 13px; }
.hint-pencil { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 5px; border: 1px solid var(--line); border-radius: 17px; background: #fff; font-size: 25px; transform: none; }
.empty-hint.plugin-empty-hint .hint-pencil { border-color:#a9cbd9; background:#eef9fd; color:#126b90; font-size:28px; transform:none; box-shadow:0 5px 18px rgb(18 107 144 / 12%); }
.empty-hint.hidden { display: none; }

.pagebar { position: relative; width: 100%; min-width: 0; max-width: 100vw; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(122px, env(safe-area-inset-left)); background: var(--sand); border-top: 1px solid var(--line); }
.pagebar.pages-menu-open { z-index: 40; }
.page-tabs-navigation { display: flex; align-items: center; flex: 1 1 0%; width: 0; min-width: 0; max-width: 100%; gap: 4px; overflow: hidden; }
.pages { display: flex; flex: 1 1 0%; width: 0; min-width: 0; max-width: 100%; align-items: center; gap: 7px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.pages::-webkit-scrollbar { display: none; }
.page-scroll-button {
  flex: 0 0 34px; width: 34px; height: 42px; padding: 0; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper); cursor: pointer; color: var(--ink); font-size: 25px;
}
.page-scroll-button:disabled { opacity: .3; cursor: default; }
.page-tab, .add-page-btn { min-height: 42px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); padding: 0 14px; cursor: pointer; white-space: nowrap; }
.page-tab { position: relative; touch-action: none; user-select: none; transition: transform 120ms ease, opacity 120ms ease; }
.page-tab.long-pressed { outline: 3px solid rgb(239 91 91 / 32%); outline-offset: 2px; }
.page-tab.dragging { z-index: 10; opacity: .78; cursor: grabbing; transition: none; }
.page-tab.drop-before { box-shadow: -4px 0 0 var(--accent); }
.page-tab.drop-after { box-shadow: 4px 0 0 var(--accent); }
.page-tab.editing { padding: 3px; }
.page-tab.editing input {
  width: min(180px, 34vw); height: 34px; padding: 0 8px; border: 1px solid currentColor; border-radius: 7px;
  background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; outline: none; user-select: text;
}
.page-tab.editing input[aria-invalid="true"] { border-color: var(--accent); }
.page-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.add-page-btn { color: var(--green); font-weight: 700; }
.page-overview { position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.page-overview output { min-width: 47px; color: var(--muted); text-align: center; font-size: 12px; font-weight: 750; }
.page-overview > button {
  height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); cursor: pointer; font-weight: 750;
}
.pages-menu {
  position: absolute; z-index: 12; right: 0; bottom: calc(100% + 12px); display: grid;
  width: min(440px, calc(100vw - 20px)); max-height: min(440px, 62vh); padding: 6px;
  overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  box-shadow: 0 14px 38px rgb(23 34 59 / 20%);
  overscroll-behavior: contain;
}
.pages-menu[hidden] { display: none; }
.page-tab-context-menu {
  position: fixed; z-index: 50; display: flex; align-items: stretch; gap: 4px; width: max-content; max-width: calc(100vw - 16px);
  padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: rgb(255 254 249 / 98%);
  box-shadow: 0 12px 34px rgb(23 34 59 / 22%); backdrop-filter: blur(16px);
}
.page-tab-context-menu[hidden] { display: none; }
.page-tab-context-menu button {
  display: grid; place-items: center; gap: 1px; min-width: 58px; min-height: 48px; padding: 4px 7px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer;
}
.page-tab-context-menu button:hover, .page-tab-context-menu button:focus-visible { background: var(--sand); }
.page-tab-context-menu button:disabled { opacity: .3; cursor: default; }
.page-tab-context-menu button > span { font-size: 18px; line-height: 20px; }
.page-tab-context-menu button small { font-size: 9px; font-weight: 750; }
.page-tab-context-move {
  display: grid; grid-template-columns: 34px 34px; grid-template-rows: 13px 1fr; gap: 1px; padding-right: 4px;
  border-right: 1px solid var(--line);
}
.page-tab-context-move > span { grid-column: 1 / -1; color: var(--muted); font-size: 9px; font-weight: 750; text-align: center; }
.page-tab-context-move button { min-width: 34px; min-height: 34px; padding: 0; }
.page-tab-context-move button small { display: none; }
.pages-menu-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px;
  transition: background 150ms ease;
}
.pages-menu-select {
  display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 42px; padding: 7px 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; text-align: left;
}
.pages-menu-select:hover, .pages-menu-select:focus-visible { background: var(--sand); }
.pages-menu-select[aria-current="page"] { background: var(--ink); color: #fff; }
.pages-menu-actions { display: flex; align-items: center; gap: 1px; }
.pages-menu-actions button {
  width: 38px; height: 40px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; font-weight: 800;
}
.pages-menu-actions button:hover, .pages-menu-actions button:focus-visible { background: var(--sand); color: var(--ink); }
.pages-menu-actions .pages-menu-delete { color: #b42318; font-size: 20px; }
.pages-menu-actions .pages-menu-delete:hover, .pages-menu-actions .pages-menu-delete:focus-visible { background: #fff0ed; color: #8f1812; }
.pages-menu-actions button:disabled { opacity: .25; cursor: default; }
.pages-menu-drag { touch-action: none; cursor: grab !important; }
.pages-menu-drag:active { cursor: grabbing !important; }
.pages-menu-row.dragging {
  z-index: 2; opacity: .84; background: var(--paper); box-shadow: 0 5px 16px rgb(23 34 59 / 18%);
  transition: none;
}
.pages-menu-row.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.pages-menu-row.drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
.pages-menu-row.editing > .pages-menu-select, .pages-menu-row.editing > .pages-menu-actions { display: none; }
.pages-menu-editor {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px;
  gap: 4px; padding: 3px;
}
.pages-menu-editor input {
  min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--ink); border-radius: 4px;
  background: var(--paper); color: var(--ink); font: inherit;
}
.pages-menu-editor input[aria-invalid="true"] { border-color: var(--accent); }
.pages-menu-editor button {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 800; cursor: pointer;
}
.pages-menu-editor button:first-of-type { border-color: var(--ink); background: var(--ink); color: #fff; }
.pages-menu-index { min-width: 28px; opacity: .65; font-size: 11px; font-weight: 800; }
.pages-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-page-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pdf-page-nav[hidden] { display: none; }
.pdf-page-nav button {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); cursor: pointer;
}
.pdf-page-nav button:disabled { opacity: .35; cursor: default; }
.pdf-page-nav output { min-width: 54px; color: var(--muted); text-align: center; font-size: 12px; font-weight: 750; }

.presentation-controls {
  position: fixed; z-index: 8; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  padding: 7px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 15px;
  background: rgb(23 34 59 / 90%); color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
  backdrop-filter: blur(12px);
}
.presentation-controls[hidden] { display: none; }
.presentation-controls button {
  min-width: 42px; height: 40px; padding: 0 13px; border: 0; border-radius: 10px;
  background: rgb(255 255 255 / 12%); color: #fff; cursor: pointer;
}
.presentation-controls button:disabled { opacity: .35; cursor: default; }
.presentation-controls output { min-width: 66px; text-align: center; font-size: 13px; font-weight: 750; }
.app-shell.presentation { grid-template-rows: minmax(0, 1fr); background: #111827; }
.app-shell.presentation .topbar,
.app-shell.presentation .toolbar,
.app-shell.presentation .pagebar { display: none; }
.app-shell.presentation .workspace { display: block; padding: 0; }
.app-shell.presentation .board-wrap {
  width: 100%; height: 100%; border: 0; border-radius: 0; background-color: #111827;
  background-image: none; box-shadow: none;
}
.app-shell.presentation #board { pointer-events: none; cursor: default; }
.app-shell.presentation .zoom-control,
.app-shell.presentation .empty-hint { display: none; }
.app-shell.presentation .timer-widget { top: 22px; right: 22px; }
.app-shell.presentation .work-mode-display { top: 22px; }
.app-shell.presentation .picker-widget { top: 22px; }
.app-shell.presentation .video-widget { top: 22px; }
.app-shell.presentation .camera-widget { top: 22px; }

.scrim { position: fixed; z-index: 9; inset: 0; background: rgb(23 34 59 / 24%); backdrop-filter: blur(2px); }
.side-panel { position: fixed; z-index: 30; top: 0; right: 0; width: min(430px, 100%); height: 100dvh; overflow-y: auto; padding: 24px 24px max(24px, env(safe-area-inset-bottom)); background: #fbfaf6; box-shadow: -12px 0 40px rgb(0 0 0 / 15%); transform: translateX(105%); transition: transform .24s ease; }
.side-panel.open { transform: translateX(0); }
.panel-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; }
.panel-header h2 { margin: 3px 0 0; font-family: Georgia, serif; font-size: 28px; font-weight: 500; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 800; }
.panel-section { padding: 20px 0; border-top: 1px solid var(--line); }
.panel-view[hidden] { display: none; }
.panel-section h3 { margin: 0 0 12px; font-size: 13px; }
.module-common-settings { margin-bottom: 8px; }
.module-common-settings h4 {
  margin: 0 0 2px; color: var(--muted); font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.module-category { margin-top: 7px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.module-category summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 11px;
  cursor: pointer; font-size: 13px; font-weight: 800; list-style: none;
}
.module-category summary::-webkit-details-marker { display: none; }
.module-category-icon {
  display: grid; flex: 0 0 26px; place-items: center; width: 26px; height: 26px;
  border-radius: 7px; background: var(--sand); color: var(--ink); font: 800 17px/1 Georgia, serif;
}
.module-category-name { flex: 1; }
.module-category summary small { color: var(--muted); font-size: 10px; font-weight: 650; }
.module-category summary::after {
  content: "\203A"; color: var(--muted); font-size: 22px; line-height: 1;
  transform: rotate(0); transition: transform .16s ease;
}
.module-category[open] summary::after { transform: rotate(90deg); }
.module-category summary:focus-visible { outline: 3px solid rgb(239 91 91 / 35%); outline-offset: 1px; border-radius: 9px; }
.module-category-content { padding: 2px 11px 7px; border-top: 1px solid var(--line); }
.module-setting { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; }
.module-setting input { width: 20px; height: 20px; accent-color: var(--green); }
.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-switch button { display: grid; gap: 2px; min-height: 94px; padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; }
.role-switch button span { font-size: 23px; }
.role-switch button small { color: var(--muted); }
.role-switch button.active { border: 2px solid var(--ink); padding: 11px; }
.section-help { margin: 0 0 13px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.session-code { padding: 17px; border: 1px dashed #aca79d; border-radius: 13px; background: var(--paper); text-align: center; font-size: 30px; font-weight: 800; letter-spacing: .16em; user-select: all; }
.secondary-button, .primary-button { min-height: 45px; padding: 0 17px; border-radius: 11px; cursor: pointer; font-weight: 750; }
.secondary-button { width: 100%; margin-top: 9px; border: 1px solid var(--line); background: var(--paper); }
.primary-button { border: 0; background: var(--ink); color: #fff; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 8px 0 12px; }
.join-row input { min-width: 0; height: 47px; border: 1px solid var(--line); border-radius: 11px; padding: 0 13px; background: var(--paper); text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
.action-list { display: grid; gap: 6px; }
.export-scope {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 10px; padding: 3px;
  border: 1px solid var(--line); border-radius: 8px;
}
.export-scope legend { padding: 0 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.export-scope label { position: relative; cursor: pointer; }
.export-scope input { position: absolute; opacity: 0; }
.export-scope span {
  display: grid; place-items: center; min-height: 38px; padding: 4px 7px; border-radius: 5px;
  color: var(--muted); font-size: 11px; text-align: center;
}
.export-scope input:checked + span { background: var(--ink); color: #fff; font-weight: 750; }
.export-scope input:focus-visible + span { outline: 3px solid rgb(239 91 91 / 35%); outline-offset: 1px; }
.portable-backup-option { display: flex; align-items: center; gap: 8px; margin: 0 4px 6px; font-size: 12px; font-weight: 750; }
.portable-backup-option input { width: 18px; height: 18px; accent-color: var(--ink); }
.portable-backup-warning { margin: 0 4px 8px; color: #9a5b19; font-size: 11px; line-height: 1.4; }
.resource-window-collapsed { height: 44px !important; min-height: 44px !important; overflow: visible !important; }
.resource-window-collapsed > :not(.floating-window-toolbar):not([data-floating-drag]):not(.floating-resize-handle) { display: none !important; }
.managed-floating-window.resource-window-collapsed [data-floating-resize] { display: none; }
.action-list button { display: flex; align-items: center; gap: 7px; min-height: 46px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.action-list button:hover { background: var(--sand); }
.action-list button:disabled { opacity: .4; cursor: not-allowed; }
.action-list button > span:first-child {
  display: inline-grid; flex: 0 0 30px; place-items: center; width: 30px; font-size: 19px; text-align: center;
}
.action-list #import-pdf-label { display: inline; flex: 1; width: auto; font-size: inherit; text-align: left; }
.action-list .pdf-action-icon {
  flex-basis: 22px; width: 22px; color: #c23e3e; font-size: 7px; font-weight: 900; letter-spacing: -.06em;
}
.background-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: 5px;
}
.interface-style-options {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px;
  margin: 0 0 12px; padding: 0; border: 0;
}
.interface-style-options legend {
  grid-column: 1 / -1; margin-bottom: 5px; padding: 0; color: var(--muted); font-size: 11px; font-weight: 750;
}
.interface-style-options button {
  display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; min-width: 0; min-height: 54px;
  padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); cursor: pointer;
  color: var(--muted); font-size: 11px; font-weight: 750; text-align: left;
}
.interface-style-options button:hover, .interface-style-options button:focus-visible { border-color: var(--ink); }
.interface-style-options button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.interface-style-preview {
  position: relative; display: flex; align-items: center; justify-content: space-around; width: 58px; height: 38px;
  overflow: hidden; border: 1px solid #d7d4ca; border-radius: 5px; background: #fffef9;
}
.interface-style-preview::before, .interface-style-preview::after { content: ""; position: absolute; left: 0; right: 0; height: 5px; background: #e5e0d6; }
.interface-style-preview::before { top: 0; }
.interface-style-preview::after { bottom: 0; }
.interface-style-preview i { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 3px; background: var(--ink); }
.preview-modern::before, .preview-modern::after { background: transparent; }
.preview-modern i { background: rgb(23 34 59 / 74%); box-shadow: 0 0 0 3px rgb(255 255 255 / 78%); }
.background-options button, .background-color-choice {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 48px; padding: 4px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); cursor: pointer;
}
.background-options button:hover, .background-options button:focus-visible,
.background-color-choice:hover, .background-color-choice:focus-within { border-color: var(--ink); }
.background-preview {
  display: grid; place-items: center; width: 100%; max-width: 46px; aspect-ratio: 1; overflow: hidden;
  border: 1px solid #d7d4ca; border-radius: 3px; background-color: #fffef9;
}
.preview-default {
  color: var(--muted); font-size: 22px; font-weight: 700;
  background-image: radial-gradient(circle at center, rgb(23 34 59 / 7%) 0 36%, transparent 37%);
}
.preview-chameleon {
  background-image: url("../img/chameleon_fond.jpg"); background-position: center; background-size: cover;
}
.preview-white { background: #fff; }
.preview-grid {
  background-image:
    linear-gradient(#a9c8d3 1px, transparent 1px),
    linear-gradient(90deg, #a9c8d3 1px, transparent 1px);
  background-size: 13px 13px;
}
.preview-seyes {
  background-image:
    linear-gradient(90deg, transparent 9%, #e28c98 9%, #e28c98 calc(9% + 2px), transparent calc(9% + 2px)),
    repeating-linear-gradient(#d4e5f4 0 1px, transparent 1px 7px),
    linear-gradient(90deg, #9dbfe0 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 25px 100%;
}
.preview-lines {
  background-image:
    linear-gradient(90deg, transparent 9%, #e49aa4 9%, #e49aa4 calc(9% + 2px), transparent calc(9% + 2px)),
    repeating-linear-gradient(#b8d5e8 0 1px, transparent 1px 15px);
}
.preview-music {
  background-image: linear-gradient(
    transparent 6px, #596273 6px 7px, transparent 7px 13px,
    #596273 13px 14px, transparent 14px 20px, #596273 20px 21px,
    transparent 21px 27px, #596273 27px 28px, transparent 28px 34px,
    #596273 34px 35px, transparent 35px
  );
  background-size: 100% 48px;
}
.preview-axes {
  background-image:
    linear-gradient(transparent calc(50% - 1px), #26344b calc(50% - 1px), #26344b calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(90deg, transparent calc(50% - 1px), #26344b calc(50% - 1px), #26344b calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(#dde5e8 1px, transparent 1px),
    linear-gradient(90deg, #dde5e8 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 13px 13px, 13px 13px;
}
.preview-color {
  background:
    radial-gradient(circle at center, #fff 0 22%, transparent 23%),
    conic-gradient(#ef5b5b, #e8bf45, #56a26d, #4e8cc9, #9567ce, #ef5b5b);
}
.background-color-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.preview-custom { color: var(--muted); font-size: 24px; font-weight: 500; }
.action-list .danger { color: #c23e3e; }
.privacy-note { color: var(--muted); font-size: 11px; line-height: 1.5; }
.presentation-panel { padding-bottom: 4px; }
.presentation-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 750;
}
.presentation-link:hover, .presentation-link:focus-visible { border-color: var(--ink); background: var(--sand); }
.credits-panel { margin-top: 16px; padding-bottom: 4px; }
.credits-panel p { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.credits-panel strong { color: var(--ink); }
.credits-panel abbr { text-decoration: none; }
.credits-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.credits-links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper);
  color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 750;
}
.credits-links a:hover, .credits-links a:focus-visible { border-color: var(--ink); background: var(--sand); }
.toast-region { position: fixed; z-index: 45; left: 50%; bottom: 82px; transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 11px 16px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: var(--shadow); font-size: 13px; animation: toast-in .2s ease; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
.compatibility { position: fixed; z-index: 30; inset: 12px; padding: 18px; background: #fff2cf; border: 1px solid #e3b94f; border-radius: 14px; color: #604a12; }

@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  :root { --mobile-accent: #e9ad00; }
  body { background: var(--paper); }
  .app-shell {
    grid-template-rows: calc(52px + env(safe-area-inset-top)) minmax(0, 1fr) calc(52px + env(safe-area-inset-bottom));
    background: var(--paper);
  }
  .topbar {
    grid-template-columns: auto 1fr auto; gap: 8px;
    padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    background: rgb(255 254 249 / 88%); border-bottom-color: rgb(222 217 206 / 70%);
    box-shadow: 0 1px 12px rgb(23 34 59 / 5%);
  }
  .brand { gap: 7px; color: #9a7300; font-size: 16px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 9px 9px 9px 3px; background: var(--mobile-accent); font-size: 17px; }
  .connection-pill {
    position: static; justify-self: start; min-height: 0; width: 10px; height: 10px; padding: 0;
    border: 0; background: transparent;
  }
  .connection-pill #connection-label { display: none; }
  .connection-pill.mode-choice-visible, .connection-pill.local-mode {
    position: fixed; z-index: 8; top: calc(48px + env(safe-area-inset-top)); left: 50%;
    width: auto; height: auto; min-width: 0; min-height: 38px; padding: 5px 7px;
    border: 1px solid rgb(222 217 206 / 85%); border-radius: 99px;
    background: rgb(255 255 255 / 96%); box-shadow: 0 8px 24px rgb(23 34 59 / 16%);
    transform: translateX(-50%); backdrop-filter: blur(16px);
  }
  .connection-pill.mode-choice-visible .status-dot, .connection-pill.local-mode .status-dot { flex: 0 0 auto; }
  .status-dot { width: 7px; height: 7px; }
  .top-actions { gap: 1px; }
  .icon-button { min-width: 40px; height: 40px; border-radius: 50%; color: #9a7300; font-size: 20px; }
  .top-actions .classroom-button,
  #presentation-btn,
  .desktop-only { display: none; }
  #import-menu-btn { font-size: 0; }
  #import-menu-btn::after { content: "+"; font-size: 29px; font-weight: 350; line-height: 1; }
  .mobile-classroom-menu { position: relative; display: block; }
  .mobile-classroom-actions {
    position: absolute; z-index: 9; top: calc(100% + 8px); right: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    width: 244px; padding: 8px; border: 1px solid rgb(222 217 206 / 85%); border-radius: 18px;
    background: rgb(255 255 255 / 96%); box-shadow: 0 12px 36px rgb(23 34 59 / 18%); backdrop-filter: blur(18px);
  }
  .mobile-classroom-actions[hidden] { display: none; }
  .mobile-classroom-actions button {
    display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 7px; min-height: 50px; padding: 6px 9px;
    border: 0; border-radius: 12px; background: var(--sand); color: var(--ink); cursor: pointer; text-align: left;
  }
  .mobile-classroom-actions button span { font-size: 20px; text-align: center; }
  .mobile-classroom-actions .lirecouleur-menu-icon { display: grid; place-items: center; }
  .mobile-classroom-actions .lirecouleur-menu-icon img { display: block; width: 25px; height: 25px; }
  .mobile-classroom-actions button small { font-size: 11px; font-weight: 750; }
  .classroom-panel { top: calc(58px + env(safe-area-inset-top)); right: 6px; width: min(360px, calc(100% - 12px)); }
  .timer-widget { top: 103px; right: 10px; width: 272px; min-height: 124px; padding: 5px 9px; }
  .timer-digits.classroom-widget-content { min-height: 112px; grid-template-columns: repeat(2, 37px) 16px repeat(2, 37px); }
  .timer-digit > span { font-size: 47px; }
  .timer-colon { font-size: 39px; }
  .work-mode-display { top: 103px; left: 10px; transform: scale(var(--widget-scale)); width: 104px; height: 104px; padding: 10px; }
  .work-mode-display span { font-size: 31px; }
  .work-mode-display strong { font-size: 12px; }
  .picker-widget { top: 103px; left: 10px; width: min(320px, calc(100vw - 20px)); }
  .video-widget { top: 103px; left: 10px; width: min(420px, calc(100vw - 20px)); height: 285px; }
  .camera-widget { top: 103px; left: 10px; width: min(420px, calc(100vw - 20px)); height: 300px; }
  .workspace { display: block; padding: 0; }
  .board-wrap {
    width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none;
    background-color: #fffefa; background-size: 22px 22px;
  }
  .toolbar {
    position: fixed; z-index: 6;
    bottom: calc(5px + env(safe-area-inset-bottom)); display: flex; flex-direction: row; align-items: center; gap: 4px;
    left: max(8px, env(safe-area-inset-left));
    right: calc(max(8px, env(safe-area-inset-right)) + 156px);
    height: 42px; min-height: 0; padding: 2px; border: 1px solid rgb(222 217 206 / 75%); border-radius: 14px;
    background: rgb(255 255 255 / 88%); box-shadow: 0 8px 30px rgb(23 34 59 / 14%);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; backdrop-filter: blur(18px);
  }
  .toolbar::-webkit-scrollbar { display: none; }
  .tool-group { display: flex; flex: 0 0 auto; flex-direction: row; gap: 2px; min-width: 0; }
  .tool-button { display: block; flex: 0 0 42px; width: 42px; min-height: 38px; padding: 1px; border-radius: 11px; scroll-snap-align: center; }
  .tool-button .tool-icon { font-size: 21px; line-height: 25px; }
  .tool-button > span:last-child { display: none; }
  .tool-button.active { background: var(--mobile-accent); color: #fff; }
  .tool-settings {
    display: flex; flex: 0 0 auto; align-items: center; gap: 10px;
    margin: 0; padding: 0 4px 0 10px; border: 0; border-left: 1px solid var(--line);
  }
  .color-row { display: flex; flex-wrap: nowrap; gap: 8px; }
  .size-control { flex: 0 0 76px; margin: 0; }
  .eraser-mode-control { display: flex; flex: 0 0 auto; gap: 5px; margin: 0; }
  .eraser-mode-control[hidden] { display: none; }
  .eraser-mode-control button { width: auto; min-width: 56px; min-height: 36px; }
  .finger-toggle { flex: 0 0 42px; width: 42px; min-height: 38px; margin: 0; scroll-snap-align: center; }
  .pagebar {
    justify-content: flex-start; gap: 4px;
    padding: 5px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: rgb(255 254 249 / 94%); border-top-color: rgb(222 217 206 / 75%); backdrop-filter: blur(18px);
  }
  .page-tabs-navigation { order: 2; flex: 0 0 auto; width: auto; margin-left: auto; gap: 4px; }
  .pages { display: none; }
  .pages-menu {
    position: fixed; left: 8px; right: 8px; bottom: calc(60px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(440px, calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
  .page-scroll-button { flex-basis: 30px; width: 30px; }
  .page-overview { order: 3; margin-left: 0; }
  .page-overview output { display: none; }
  .page-overview > button { width: 38px; padding: 0; overflow: hidden; font-size: 0; }
  .page-overview > button::after { content: "☰"; font-size: 17px; }
  .pdf-page-nav {
    position: fixed; z-index: 8; right: max(8px, env(safe-area-inset-right));
    bottom: calc(58px + env(safe-area-inset-bottom)); margin-left: 0; padding: 3px;
    border-radius: 12px; background: rgb(255 254 249 / 92%); box-shadow: 0 4px 16px rgb(23 34 59 / 12%);
  }
  .add-page-btn { padding: 0 11px; font-size: 0; }
  .add-page-btn { order: 4; }
  .add-page-btn::after { content: "+"; font-size: 24px; }
  .page-tab.active { border-color: var(--mobile-accent); background: var(--mobile-accent); color: #fff; }
  .add-page-btn { color: #9a7300; }
  .zoom-control { bottom: 76px; right: 10px; transform: scale(.88); transform-origin: right bottom; }
  .empty-hint { padding: 0 28px 76px; }
  .empty-hint strong { font-family: Georgia, serif; font-size: 19px; }
  .text-editor {
    position: fixed; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px);
    overscroll-behavior: contain;
  }
  .text-editor-actions {
    position: sticky; z-index: 2; bottom: -10px; padding: 5px 0 2px;
    background: rgb(255 254 249 / 97%);
  }
  .side-panel {
    top: 8dvh; width: 100%; height: 92dvh; padding: 18px 18px max(24px, env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgb(0 0 0 / 18%);
    transform: translateY(105%); transition: transform .24s ease;
  }
  .side-panel.open { transform: translateY(0); }
  .panel-header::before {
    content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 5px;
    border-radius: 99px; background: #d3d0c9; transform: translateX(-50%);
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  .app-shell {
    grid-template-rows: calc(46px + env(safe-area-inset-top)) minmax(0, 1fr) calc(46px + env(safe-area-inset-bottom));
  }
  .topbar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .brand-mark { width: 28px; height: 28px; }
  .icon-button { width: 38px; min-width: 38px; height: 38px; }
  .toolbar {
    left: max(8px, env(safe-area-inset-left));
    right: calc(max(8px, env(safe-area-inset-right)) + 156px);
    bottom: calc(3px + env(safe-area-inset-bottom)); width: auto;
    height: 40px; transform: none;
  }
  .tool-button { min-height: 36px; }
  .pagebar { min-height: 46px; padding-top: 3px; padding-bottom: max(3px, env(safe-area-inset-bottom)); }
  .pages-menu { bottom: calc(52px + env(safe-area-inset-bottom)); }
  .page-tab, .add-page-btn, .page-scroll-button, .page-overview > button { min-height: 38px; height: 38px; }
  .zoom-control { bottom: 66px; }
  .empty-hint { padding-bottom: 58px; }
  .text-editor { gap: 5px; min-height: 180px; padding: 7px; }
  .text-editor-input { min-height: 54px; max-height: none; }
  .text-editor > small { display: none; }
  .side-panel {
    top: 0; right: 0; width: min(430px, 65vw); height: 100dvh;
    border-radius: 22px 0 0 22px; box-shadow: -12px 0 40px rgb(0 0 0 / 18%);
    transform: translateX(105%);
  }
  .side-panel.open { transform: translateX(0); }
  .panel-header::before { display: none; }
}

@media (max-width: 470px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .brand > span:last-child { display: none; }
  .top-actions { width: auto; gap: 0; }
  .icon-button { min-width: 38px; }
  .selection-toolbar {
    grid-template-columns: repeat(var(--selection-columns, 5), 34px); gap: 1px; padding: 3px;
  }
  .selection-toolbar button, .selection-color { width: 34px; height: 34px; }
  .role-switch { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}