/* A quiet study companion that keeps the lecture in view. */
.lecture-study-overlay {
  --notebook-accent: #f5f5f7;
  --notebook-focus: #fff;
  --notebook-wash: #ffffff10;
  --notebook-ink: #151517;
  --notebook-muted: #98989e;
  --notebook-toolbar-height: 62px;
}
.lecture-study-overlay .cinema-shell { background: #000; }
.lecture-study-overlay .cinema-toolbar,
.lecture-study-overlay .cinema-shell.uses-native .cinema-toolbar {
  min-height: var(--notebook-toolbar-height);
  height: var(--notebook-toolbar-height);
  background: #000;
  opacity: 1;
  pointer-events: auto;
}
.lecture-study-overlay .cinema-shell.uses-native:has(.preme-player.controls-hidden):not(:has(.watch-drawer:not([hidden]))) .cinema-toolbar {
  opacity: 1;
  pointer-events: auto;
}
.lecture-study-overlay .cinema-toolbar > .icon-button,
.lecture-study-overlay .cinema-tools .icon-button {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.lecture-study-overlay .take-notes-button {
  min-height: 44px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--notebook-accent);
  color: var(--notebook-ink);
  font: 550 13px/1.25 var(--font);
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease;
}
.lecture-study-overlay .take-notes-button svg { width: 17px; height: 17px; }
.lecture-study-overlay .take-notes-button:is(:hover, :focus-visible) { background: #fff; color: var(--notebook-ink); }
.lecture-workspace { min-width: 0; }
.lecture-study-overlay.notes-open { overflow-anchor: none; }
.lecture-study-overlay .lecture-workspace > .cinema-stage { position: relative; inset: auto; }
.lecture-study-overlay.notes-open .lecture-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 29vw, 440px);
  align-items: stretch;
  height: calc(100dvh - var(--notebook-toolbar-height));
  min-height: 460px;
  max-height: 880px;
}
.lecture-study-overlay.notes-open .lecture-workspace > .cinema-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
}
.lecture-study-overlay.notes-open .cinema-player-host { min-width: 0; max-width: none; }
.lecture-study-overlay.notes-open .moment-product { display: none; }
#lecture-notebook {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 32px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff26 transparent;
  color: #f5f5f7;
  background: #000;
  box-shadow: none;
}
#lecture-notebook [hidden], #lecture-notebook[hidden] { display: none; }
.notebook-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.notebook-heading h2 { font: 650 28px/1.15 var(--font); letter-spacing: -.7px; margin: 0; }
.notebook-heading [data-notebook-close] { width: 44px; height: 44px; min-width: 44px; margin: -5px -10px -5px 0; border-radius: 50%; color: #a1a1a6; display: grid; place-items: center; transition: background 180ms ease, color 180ms ease; }
.notebook-heading [data-notebook-close]:is(:hover, :focus-visible) { color: var(--notebook-focus); background: var(--notebook-wash); }
.notebook-heading [data-notebook-close] svg { width: 19px; height: 19px; }
.notebook-context { margin: -8px 0 0; color: #c5c5ca; font: 500 13px/1.6 var(--font); }
.notebook-context span { display: block; color: var(--notebook-muted); font-weight: 400; }
.notebook-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.notebook-tools button,
.notebook-timestamps button,
.notebook-footer button,
.notebook-lookup button {
  min-height: 44px;
  border-radius: 999px;
  font: 550 12px/1.3 var(--font);
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--notebook-accent);
  color: var(--notebook-ink);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.notebook-tools button:not(:disabled):is(:hover, :focus-visible),
.notebook-timestamps button:not(:disabled):is(:hover, :focus-visible),
.notebook-footer button:not(:disabled):is(:hover, :focus-visible) { background: #fff; color: var(--notebook-ink); }
.notebook-tools button:active,
.notebook-footer button:not(:disabled):active { transform: scale(.97); }
.notebook-tools button svg,
.notebook-footer button svg { width: 16px; height: 16px; }
#lecture-notes.notebook-editor {
  display: block;
  flex: 1 0 180px;
  width: 100%;
  min-height: 180px;
  margin: 0;
  padding: 8px 0;
  resize: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f5f5f7;
  font: 400 16px/1.8 var(--font);
  caret-color: var(--notebook-focus);
  box-shadow: none;
  scroll-margin-block: 16px;
  outline: 2px solid transparent;
  outline-offset: 8px;
  transition: outline-color 180ms ease;
}
#lecture-notes.notebook-editor::placeholder { color: #8e8e93; opacity: 1; }
@media (hover: hover) {
  #lecture-notes.notebook-editor:hover { outline-color: #ffffff66; }
}
#lecture-notes.notebook-editor:focus-visible { outline-color: var(--notebook-focus); }
.notebook-storage { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: -8px -10px -6px 0; position: relative; }
.notebook-save-status { margin: 0; font-size: 11px; line-height: 1.5; color: var(--notebook-muted); }
.notebook-save-status[data-state="error"] { color: #ffb4ab; }
.notebook-storage-info > summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: #8e8e93; list-style: none; transition: background 180ms ease, color 180ms ease; }
.notebook-storage-info > summary:is(:hover, :focus-visible) { color: var(--notebook-focus); background: var(--notebook-wash); }
.notebook-storage-info > summary svg { width: 15px; height: 15px; }
.notebook-storage-info > p { position: absolute; bottom: 44px; right: 0; z-index: 2; width: min(320px, 100%); margin: 0; padding: 18px 20px; border-radius: 18px; background: #232326; color: #d8d8dd; box-shadow: 0 8px 30px #0008; font: 400 12px/1.65 var(--font); }
.notebook-moments:empty { display: none; }
.notebook-moments h3 { font-size: 12px; font-weight: 500; margin: 0 0 8px; color: var(--notebook-muted); }
.notebook-timestamps { display: flex; flex-wrap: wrap; gap: 6px; max-height: 100px; overflow-y: auto; padding: 3px; margin: -3px; }
.notebook-timestamps button { color: var(--notebook-ink); font-variant-numeric: tabular-nums; padding-inline: 12px; min-width: 58px; }
.notebook-dictionary {
  background: rgb(28 29 31 / 80%);
  -webkit-backdrop-filter: blur(24px) saturate(115%);
  backdrop-filter: blur(24px) saturate(115%);
  border-radius: 20px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px #ffffff14, inset 0 1px 0 #ffffff0a, 0 12px 28px #0003;
}
.notebook-dictionary > summary { min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; border-radius: 20px; transition: background 180ms ease, color 180ms ease; }
#lecture-notebook summary::-webkit-details-marker { display: none; }
.notebook-dictionary > summary:is(:hover, :focus-visible) { background: var(--notebook-wash); color: var(--notebook-focus); }
.notebook-dictionary > summary:is(:hover, :focus-visible) :is(.notebook-dictionary-icon, .notebook-dictionary-chevron) { color: var(--notebook-focus); }
.notebook-dictionary-icon { width: 28px; flex: 0 0 28px; display: grid; place-items: center; color: #e5e5ea; }
.notebook-dictionary-icon svg { width: 25px; height: 25px; }
.notebook-dictionary-label { font: 600 14px/1.4 var(--font); letter-spacing: -.1px; flex: 1; }
.notebook-dictionary-label small { display: block; margin-top: 3px; font: 400 11px/1.4 var(--font); letter-spacing: 0; color: var(--notebook-muted); }
.notebook-dictionary-chevron { display: grid; place-items: center; color: #8e8e93; }
.notebook-dictionary-icon, .notebook-dictionary-chevron { transition: color 180ms ease; }
.notebook-dictionary-chevron svg { width: 17px; height: 17px; transition: transform 180ms ease; }
.notebook-dictionary[open] .notebook-dictionary-chevron svg { transform: rotate(180deg); }
.notebook-lookup { display: flex; gap: 8px; margin: 0; padding: 0 16px 12px; }
.notebook-lookup input {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 11px 12px;
  background: #ffffff0c;
  color: #f5f5f7;
  font: 400 16px/1.3 var(--font);
}
.notebook-lookup input::placeholder { color: #8e8e93; }
.notebook-lookup button { flex-shrink: 0; background: #f5f5f7; color: #151517; padding-inline: 14px; }
.notebook-lookup button svg { width: 15px; height: 15px; }
.notebook-lookup button:is(:hover, :focus-visible) { background: #fff; color: var(--notebook-ink); }
.notebook-dictionary > p { margin: 0; padding: 0 16px 14px; font-size: 11px; line-height: 1.5; color: var(--notebook-muted); }
.notebook-dictionary > p:empty { display: none; }
.notebook-dictionary a { color: var(--notebook-accent); text-underline-offset: 3px; transition: color 180ms ease; }
.notebook-dictionary a:is(:hover, :focus-visible) { color: #fff; }
.notebook-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 2px; }
.notebook-footer button { flex: 1 0 auto; padding-inline: 12px; min-height: 46px; }
.notebook-footer [data-notebook-share] { background: #f5f5f7; color: #161618; }
.notebook-footer [data-notebook-share]:not(:disabled):is(:hover, :focus-visible) { background: #fff; color: var(--notebook-ink); }
.notebook-footer button:disabled { opacity: 1; background: #ffffff06; color: #66666b; cursor: default; }
.notebook-action-status { width: 100%; min-height: 0; margin: 0; color: var(--notebook-muted); font-size: 11px; line-height: 1.5; }
.notebook-action-status:empty { display: none; }
.lecture-study-overlay :is(.take-notes-button, #lecture-notebook button, #lecture-notebook a, #lecture-notebook summary, #lecture-notebook input):focus-visible { outline: 2px solid var(--notebook-focus); outline-offset: 3px; }
#lecture-notebook .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 701px) and (max-width: 1000px) {
  .lecture-study-overlay.notes-open .lecture-workspace { grid-template-columns: minmax(0, 1fr) 330px; }
  #lecture-notebook { padding: 22px 24px; }
  .lecture-study-overlay .cinema-toolbar { padding-inline: 16px; gap: 10px; }
  .lecture-study-overlay .cinema-toolbar h2 { flex: 1; min-width: 0; }
}
@media (min-width: 701px) and (max-height: 700px) {
  #lecture-notebook { padding-block: 18px; gap: 12px; }
  #lecture-notes.notebook-editor { flex-basis: 160px; min-height: 160px; }
}
@media (max-width: 700px) {
  .lecture-study-overlay { --notebook-toolbar-height: 58px; }
  .lecture-study-overlay .cinema-toolbar { padding: 7px 10px; gap: 5px; }
  .lecture-study-overlay .cinema-toolbar h2 { display: none; }
  .lecture-study-overlay .cinema-tools { gap: 2px; flex: 1; justify-content: flex-end; }
  .lecture-study-overlay .take-notes-button { margin-right: auto; padding-inline: 12px; font-size: 12px; }
  .lecture-study-overlay.notes-open {
    position: fixed;
    inset: var(--study-viewport-top, 0px) 0 auto;
    height: var(--study-viewport-height, 100dvh);
    overflow: hidden;
  }
  .lecture-study-overlay.notes-open .watch-dialog { height: 100%; min-height: 0; overflow: hidden; }
  .lecture-study-overlay.notes-open .cinema-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .lecture-study-overlay.notes-open .cinema-toolbar { position: relative; top: auto; flex: 0 0 var(--notebook-toolbar-height); }
  .lecture-study-overlay.notes-open .lecture-workspace { display: flex; flex-direction: column; flex: 1; height: auto; min-height: 0; max-height: none; overflow: hidden; }
  .lecture-study-overlay.notes-open .lecture-workspace > .cinema-stage {
    flex: 0 0 auto;
    height: min(56.25vw, calc(var(--study-viewport-height, 100dvh) * .26));
    min-height: 0;
  }
  .lecture-study-overlay.notes-open #lecture-notebook { flex: 1 1 0; min-height: 0; gap: 14px; padding: 20px 24px max(20px, env(safe-area-inset-bottom)); box-shadow: none; }
  .notebook-heading h2 { font-size: 25px; }
  .notebook-context { font-size: 12px; }
  .notebook-context span { display: inline; }
  .notebook-context span::before { content: " · "; }
  #lecture-notes.notebook-editor { flex-basis: 160px; min-height: 160px; font-size: 16px; line-height: 1.7; resize: none; }
  .notebook-footer { flex-shrink: 0; }
  .lecture-study-overlay.notes-open .lecture-study-body { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lecture-study-overlay .take-notes-button,
  #lecture-notes.notebook-editor, .notebook-heading [data-notebook-close], .notebook-storage-info > summary,
  .notebook-dictionary a, .notebook-dictionary-icon, .notebook-dictionary-chevron,
  .notebook-tools button, .notebook-timestamps button,
  .notebook-footer button, .notebook-lookup button, .notebook-dictionary > summary, .notebook-dictionary-chevron svg { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .notebook-dictionary { background: #1c1d1f; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .notebook-dictionary { background: Canvas; border: 1px solid CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  #lecture-notebook { background: Canvas; color: CanvasText; }
  #lecture-notes.notebook-editor, .notebook-lookup input { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .notebook-tools button, .notebook-timestamps button, .notebook-footer button, .notebook-lookup button,
  .lecture-study-overlay .take-notes-button { color: ButtonText; border: 1px solid ButtonText; }
}

#lecture-notebook [hidden] { display: none; }


.lecture-study-overlay.notes-open .cinema-stage { overflow: hidden; }
.lecture-study-overlay.notes-open .playback-recovery { top: 50%; bottom: auto; transform: translate(-50%, -50%); max-height: 100%; overflow: auto; padding: 12px; }
@media (max-width: 700px) { .lecture-study-overlay.notes-open .playback-recovery p { font-size: 12px; margin-bottom: 6px; } }