/* =========================================================
   Notebook look: covers, themes (paper, accent, font), links in notes,
   link preview and video cards, and the Style picker. Tokens only, so
   every part suits the dark and the light theme. Loaded after notebook.css.
   ========================================================= */

/* ── The cover banner ─────────────────────────────────── */
.nb-banner {
  position: relative;
  height: clamp(110px, 22vw, 172px);
  margin: 0 0 2px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent);
}
.nb-banner-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.nb-cover.has-banner { padding-top: 6px; }
.nb-cover.has-banner .nb-cover-emoji { position: relative; z-index: 2; margin-top: -40px; }
.nb-cover.has-banner .nb-cover-emoji:not(.has-tile) { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)); }
.nb-cover.has-banner .nb-cover-emoji.has-tile:hover { background: transparent; }
.nb-cover.has-banner .nb-cover-tile { background: color-mix(in srgb, var(--tc) 18%, var(--bg)); box-shadow: 0 0 0 4px var(--bg); }

/* Change cover, Reposition, Remove: on hover with a mouse; one button on phones. */
.nb-banner-tools {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.nb-banner:hover .nb-banner-tools,
.nb-banner:focus-within .nb-banner-tools { opacity: 1; transform: none; }
.nb-banner-btn,
.nb-banner-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(12, 14, 22, 0.58);
  color: #fff;
  font: 600 0.76rem/1 var(--font-heading);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.nb-banner-btn:hover, .nb-banner-edit:hover { background: rgba(12, 14, 22, 0.76); }
.nb-banner-btn:focus-visible, .nb-banner-edit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nb-banner-btn svg, .nb-banner-edit svg { width: 14px; height: 14px; flex: none; }
.nb-banner-btn.primary { background: #fff; color: #10131c; border-color: transparent; }
.nb-banner-btn.primary:hover { background: #f1ede6; }
.nb-banner-edit { display: none; position: absolute; right: 10px; bottom: 10px; width: 38px; padding: 0; border-radius: 50%; height: 38px; }
.nb-banner-edit::after { content: ''; position: absolute; inset: -4px; }
@media (hover: none), (pointer: coarse) {
  .nb-banner-tools { display: none; }
  .nb-banner-edit { display: inline-flex; }
}
.nb-banner.moving { cursor: ns-resize; touch-action: none; }
.nb-banner.moving .nb-banner-tools, .nb-banner.moving .nb-banner-edit { display: none !important; }
.nb-banner-move {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 55%), linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 45%);
  outline: 2px dashed rgba(255, 255, 255, 0.55);
  outline-offset: -6px;
  pointer-events: none;
}
.nb-banner-move[hidden] { display: none !important; }
.nb-banner-move > * { pointer-events: auto; }
/* The hint at the top: the notebook's icon sits over the bottom left corner. */
.nb-banner-hint { position: absolute; left: 12px; top: 10px; padding: 5px 9px; border-radius: 8px; background: rgba(12, 14, 22, 0.55); color: #fff; font: 600 0.76rem/1.25 var(--font-heading); pointer-events: none; }
.nb-banner-move-acts { margin-left: auto; }
.nb-banner-move-acts { display: flex; gap: 6px; flex: none; }
@media (pointer: coarse) { .nb-banner-move .nb-banner-btn { height: 40px; padding: 0 14px; } }
/* Phones: the cover runs edge to edge at the top of the page. */
@media (max-width: 880px) {
  .nb-banner { margin: -20px -16px 2px; border-radius: 0; box-shadow: none; }
}
/* Beside a lesson: a thin strip of the cover, nothing to press. */
html.nb-embed .nb-cover { position: relative; }
html.nb-embed .nb-banner { position: absolute; left: -16px; right: -16px; top: -14px; height: 5px; margin: 0; border-radius: 0; box-shadow: none; }
html.nb-embed .nb-banner > :not(.nb-banner-art) { display: none !important; }
html.nb-embed .nb-cover.has-banner { padding-top: 0; }
html.nb-embed .nb-cover.has-banner .nb-cover-emoji { margin-top: 0; filter: none; }
html.nb-embed .nb-cover.has-banner .nb-cover-tile { box-shadow: none; }
@media print { .nb-banner-tools, .nb-banner-edit, .nb-banner-move { display: none !important; } }

/* "Add cover": beside the star, when the pointer is over the cover. */
.nb-cover-add { display: none; }
@media (hover: hover) and (pointer: fine) {
  .nb-cover-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0 auto;
    padding: 6px 11px;
    min-height: 34px;
    border-radius: 999px;
    border: 1px dashed var(--border2);
    background: transparent;
    color: var(--text-muted);
    font: 600 0.76rem/1 var(--font-heading);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .nb-cover-add svg { width: 14px; height: 14px; }
  .nb-cover:hover .nb-cover-add, .nb-cover-add:focus-visible { opacity: 1; }
  .nb-cover-add:hover { color: var(--text); border-color: var(--border-hover); }
  .nb-cover.has-banner .nb-cover-add, html.nb-embed .nb-cover-add { display: none; }
}

/* A notebook's tile wears its cover (sidebar, search). */
.nb-tile.nb-tile-cover {
  position: relative;
  isolation: isolate;
  background-color: color-mix(in srgb, var(--tc) 22%, var(--bg-elevated));
  background-size: cover;
  background-position: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.nb-tile.nb-tile-cover::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(8, 10, 16, 0.24); }
.nb-tile-emoji.nb-tile-cover { text-shadow: none; }
.nb-tile-emoji.nb-tile-cover::before { background: rgba(8, 10, 16, 0.08); }

/* ── Theme: accent ────────────────────────────────────── */
#editor[data-accent="warm"]   { --nb-ac: var(--warm); }
#editor[data-accent="teal"]   { --nb-ac: var(--teal); }
#editor[data-accent="purple"] { --nb-ac: var(--purple); }
#editor[data-accent="blue"]   { --nb-ac: var(--blue); }
#editor[data-accent="green"]  { --nb-ac: var(--green); }
#editor[data-accent="pink"]   { --nb-ac: var(--pink); }
/* On paper, deeper inks keep the words readable. */
:root[data-theme="light"] #editor[data-accent="warm"]   { --nb-ac: #b9622f; }
:root[data-theme="light"] #editor[data-accent="teal"]   { --nb-ac: #17806d; }
:root[data-theme="light"] #editor[data-accent="purple"] { --nb-ac: #7550d6; }
:root[data-theme="light"] #editor[data-accent="blue"]   { --nb-ac: #2f66d4; }
:root[data-theme="light"] #editor[data-accent="green"]  { --nb-ac: #1d8f50; }
:root[data-theme="light"] #editor[data-accent="pink"]   { --nb-ac: #c63a76; }
#editor[data-accent] .nb-block.h1 .nb-block-content,
#editor[data-accent] .nb-block.h2 .nb-block-content { color: color-mix(in srgb, var(--nb-ac) 74%, var(--text)); }
#editor[data-accent] .nb-block.h3 .nb-block-content { color: color-mix(in srgb, var(--nb-ac) 56%, var(--text)); }
#editor[data-accent] .nb-link,
#editor[data-accent] .nb-block-content a.nb-a { color: var(--nb-ac); }
#editor[data-accent] .nb-link-t { text-decoration-color: color-mix(in srgb, var(--nb-ac) 55%, transparent); }
#editor[data-accent] .nb-link:hover { background: color-mix(in srgb, var(--nb-ac) 11%, transparent); }
#editor[data-accent] .nb-todo-check:hover { border-color: var(--nb-ac); }
#editor[data-accent] .nb-todo-check.checked { background: var(--nb-ac); border-color: var(--nb-ac); }
#editor[data-accent] .nb-todo-check.checked::after { color: var(--bg); }
#editor[data-accent] .nb-block.quote:not([data-hl]) .nb-block-content { border-left-color: var(--nb-ac); }
#editor[data-accent] .nb-block.bullet .nb-block-marker,
#editor[data-accent] .nb-block.numbered .nb-block-marker { color: color-mix(in srgb, var(--nb-ac) 72%, var(--text-dim)); }
#editor[data-accent] .nb-block.callout[data-variant="insight"] .nb-callout-wrap {
  background: color-mix(in srgb, var(--nb-ac) 7%, transparent);
  border-color: color-mix(in srgb, var(--nb-ac) 26%, transparent);
}
#editor[data-accent] .nb-chapter-tab.active { border-bottom-color: var(--nb-ac); }
#editor[data-accent] .nb-chapter ::selection,
#editor[data-accent] .nb-cover-title::selection { background: color-mix(in srgb, var(--nb-ac) 32%, transparent); }

/* ── Theme: font ──────────────────────────────────────── */
#editor[data-font="serif"] { --nb-tf-body: 'Crimson Pro', Georgia, 'Times New Roman', serif; --nb-tf-head: 'Fraunces', Georgia, serif; --nb-fs: 1.1rem; }
#editor[data-font="hand"]  { --nb-tf-body: 'Kalam', 'Bradley Hand', 'Segoe Print', cursive; --nb-tf-head: 'Kalam', 'Bradley Hand', cursive; --nb-fs: 1.02rem; }
#editor[data-font="mono"]  { --nb-tf-body: 'Space Mono', var(--font-mono), ui-monospace, monospace; --nb-tf-head: 'Space Mono', var(--font-mono), monospace; --nb-fs: 0.86rem; }
#editor[data-font] .nb-chapter .nb-block:not(.code):not(.math) .nb-block-content,
#editor[data-font] .nb-chapter .nb-image-caption { font-family: var(--nb-tf-body); }
#editor[data-font] .nb-block.p .nb-block-content,
#editor[data-font] .nb-block.bullet .nb-block-content,
#editor[data-font] .nb-block.numbered .nb-block-content,
#editor[data-font] .nb-block.todo .nb-block-content,
#editor[data-font] .nb-block.quote .nb-block-content { font-size: var(--nb-fs); }
#editor[data-font] .nb-block.h1 .nb-block-content,
#editor[data-font] .nb-block.h2 .nb-block-content,
#editor[data-font] .nb-block.h3 .nb-block-content,
#editor[data-font] .nb-cover-title { font-family: var(--nb-tf-head); }
#editor[data-font="serif"] .nb-cover-title { font-weight: 600; letter-spacing: -0.02em; }
#editor[data-font="serif"] .nb-block.h2 .nb-block-content, #editor[data-font="serif"] .nb-block.h3 .nb-block-content { font-weight: 600; }
#editor[data-font="hand"] .nb-cover-title { font-weight: 700; letter-spacing: 0; }
#editor[data-font="hand"] .nb-block.h1 .nb-block-content { font-weight: 700; }
#editor[data-font="mono"] .nb-cover-title { font-weight: 700; letter-spacing: -0.03em; font-size: 2rem; }
#editor[data-font="mono"] .nb-block.h1 .nb-block-content { font-size: calc(var(--nb-h1) * 0.86); letter-spacing: -0.02em; }
@media (max-width: 880px) { #editor[data-font="mono"] .nb-cover-title { font-size: 1.5rem; } }

/* ── Theme: paper ─────────────────────────────────────────
   One line of text is the pitch. Text lines sit on it; look.js rounds the
   height of every other block up to whole lines. */
#editor[data-paper] {
  --nb-pitch: calc(var(--nb-fs, 0.95rem) * 1.7);
  --nb-rule: color-mix(in srgb, var(--nb-ac, var(--blue)) 20%, transparent);
  --nb-dot: color-mix(in srgb, var(--nb-ac, var(--text)) 42%, transparent);
  --nb-mx: 1.7rem;
  --nb-mc: color-mix(in srgb, var(--red, #e86a6a) 46%, transparent);
}
:root[data-theme="light"] #editor[data-paper] { --nb-rule: color-mix(in srgb, var(--nb-ac, #2f66d4) 22%, transparent); --nb-dot: color-mix(in srgb, var(--nb-ac, var(--text)) 30%, transparent); }
#editor[data-paper] .nb-chapter > .nb-block { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
#editor[data-paper] .nb-chapter .nb-block-content[contenteditable="true"] { line-height: var(--nb-pitch); }
#editor[data-paper] .nb-block.p .nb-block-content,
#editor[data-paper] .nb-block.bullet .nb-block-content,
#editor[data-paper] .nb-block.numbered .nb-block-content,
#editor[data-paper] .nb-block.todo .nb-block-content,
#editor[data-paper] .nb-block.quote .nb-block-content { font-size: var(--nb-fs, 0.95rem); }
/* Headings sit on one line, like the rest, with an empty line above them. */
#editor[data-paper] .nb-block.h1 .nb-block-content,
#editor[data-paper] .nb-block.h2 .nb-block-content,
#editor[data-paper] .nb-block.h3 .nb-block-content { line-height: var(--nb-pitch) !important; margin: 0; padding-top: var(--nb-pitch); }
#editor[data-paper] .nb-block.h1 .nb-block-content { font-size: calc(var(--nb-pitch) * 0.98); }
#editor[data-paper] .nb-block.h2 .nb-block-content { font-size: min(var(--nb-h2), calc(var(--nb-pitch) * 0.84)); }
#editor[data-paper] .nb-block.h3 .nb-block-content { padding-top: 0; }
#editor[data-paper] .nb-chapter > .nb-block:first-child .nb-block-content { padding-top: 0; }
#editor[data-paper] .nb-block.quote .nb-block-content { padding-top: 0; padding-bottom: 0; }
#editor[data-paper] .nb-block-marker,
#editor[data-paper] .nb-hl-note-mark { height: var(--nb-pitch); }
#editor[data-paper] .nb-todo-check { margin-top: calc((var(--nb-pitch) - 17px) / 2); }
#editor[data-paper] .nb-chapter { background-repeat: repeat; background-position: 0 0; }
#editor[data-paper="ruled"] .nb-chapter,
#editor[data-paper="margin"] .nb-chapter {
  background-image: linear-gradient(to bottom, transparent calc(var(--nb-pitch) - 1px), var(--nb-rule) calc(var(--nb-pitch) - 1px));
  background-size: 100% var(--nb-pitch);
}
#editor[data-paper="grid"] .nb-chapter {
  background-image:
    linear-gradient(to bottom, transparent calc(var(--nb-pitch) - 1px), var(--nb-rule) calc(var(--nb-pitch) - 1px)),
    linear-gradient(to right, transparent calc(var(--nb-pitch) - 1px), color-mix(in srgb, var(--nb-rule) 70%, transparent) calc(var(--nb-pitch) - 1px));
  background-size: var(--nb-pitch) var(--nb-pitch);
}
#editor[data-paper="dots"] .nb-chapter {
  background-image: radial-gradient(circle at center, var(--nb-dot) 1.3px, transparent 1.9px);
  background-size: var(--nb-pitch) var(--nb-pitch);
  background-position: calc(var(--nb-pitch) / -2) calc(var(--nb-pitch) / -2);
}
#editor[data-paper="margin"] .nb-chapter {
  padding-left: calc(var(--nb-mx) + 12px);
  background-image:
    linear-gradient(to right, transparent var(--nb-mx), var(--nb-mc) var(--nb-mx), var(--nb-mc) calc(var(--nb-mx) + 1.5px), transparent calc(var(--nb-mx) + 1.5px)),
    linear-gradient(to bottom, transparent calc(var(--nb-pitch) - 1px), var(--nb-rule) calc(var(--nb-pitch) - 1px));
  background-size: 100% 100%, 100% var(--nb-pitch);
  background-repeat: no-repeat, repeat;
}
@media print { #editor[data-paper] .nb-chapter { background: none !important; } }

/* ── Links in notes ───────────────────────────────────── */
.nb-block-content a.nb-a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  border-radius: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--nb-easing), text-decoration-color var(--nb-easing);
}
.nb-block-content a.nb-a:hover { text-decoration-color: currentColor; background: color-mix(in srgb, currentColor 9%, transparent); }

.nb-linkpop {
  position: fixed;
  z-index: 9160;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px;
  width: max-content;
  max-width: min(380px, calc(100vw - 16px));
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.2);
  animation: nbSelIn 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}
:root[data-theme="light"] .nb-linkpop { box-shadow: 0 12px 28px rgba(20, 24, 40, 0.16), 0 2px 6px rgba(20, 24, 40, 0.08); }
.nb-linkpop-url { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 6px 1px; font: 400 0.75rem/1.3 'Space Mono', var(--font-mono), monospace; color: var(--text-dim); }
.nb-linkpop-ic { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--text-muted); }
.nb-linkpop-ic svg { width: 15px; height: 15px; }
.nb-linkpop-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-linkpop-acts { display: flex; gap: 2px; }
.nb-linkpop-acts button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: 600 0.8rem/1 var(--font-heading);
  cursor: pointer;
}
.nb-linkpop-acts button svg { width: 14px; height: 14px; color: var(--text-dim); }
.nb-linkpop-acts button:hover, .nb-linkpop-acts button:focus-visible { background: color-mix(in srgb, var(--text) 9%, transparent); outline: none; }
@media (pointer: coarse) { .nb-linkpop-acts button { height: 42px; padding: 0 12px; } }
@media print { .nb-linkpop { display: none !important; } }

/* The selection bar's Link */
.nb-selbar .nb-sb-link svg { width: 15px; height: 15px; }

/* ── Preview cards and video cards ────────────────────── */
.nb-block.bookmark, .nb-block.video { margin: 10px 0; }
.nb-web { flex: 1; min-width: 0; position: relative; }
.nb-web-empty { margin: 0; padding: 14px 16px; color: var(--text-muted); font-size: 0.85rem; border: 1px dashed var(--border2); border-radius: 12px; }
.nb-bm {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color var(--nb-easing), box-shadow var(--nb-easing);
}
.nb-bm:hover { border-color: var(--border2); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }
:root[data-theme="light"] .nb-bm:hover { box-shadow: 0 8px 20px rgba(20, 24, 40, 0.08); }
.nb-bm-link { display: flex; align-items: stretch; min-height: 100px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.nb-bm:not(.has-img) .nb-bm-link { min-height: 0; }
.nb-bm.has-img .nb-bm-text { padding-right: 16px; }
.nb-bm-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--purple) 60%, transparent); outline-offset: -2px; border-radius: 12px; }
.nb-bm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 13px 46px 12px 16px; }
.nb-bm-title {
  font: 600 0.95rem/1.35 var(--font-heading);
  color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nb-bm-desc {
  font: 400 0.82rem/1.45 var(--font);
  color: var(--text-dim);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nb-bm-desc:empty { display: none; }
.nb-bm-site { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 2px; font: 400 0.72rem/1.2 'Space Mono', var(--font-mono), monospace; color: var(--text-muted); }
.nb-bm-site-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-bm-icon { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; overflow: hidden; color: var(--text-muted); }
.nb-bm-icon img, .nb-bm-icon svg { width: 16px; height: 16px; object-fit: contain; display: block; }
.nb-bm-img { position: relative; flex: 0 0 32%; max-width: 236px; min-height: 100px; background: var(--bg-elevated); border-left: 1px solid var(--border); overflow: hidden; }
.nb-bm-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* While the page is read: the address, and two soft bars. */
.nb-bm[data-state="loading"] .nb-bm-text::after {
  content: '';
  display: block;
  height: 0.62rem;
  width: 64%;
  margin-top: 2px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--border) 0%, var(--border2) 40%, var(--border) 80%) 0 0 / 250% 100%;
  animation: nbWebShimmer 1.2s ease-in-out infinite;
  order: 2;
}
.nb-bm[data-state="loading"] .nb-bm-site { order: 3; }
@keyframes nbWebShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .nb-bm[data-state="loading"] .nb-bm-text::after { animation: none; } }
.nb-web-more {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-card) 84%, transparent);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.nb-web-more svg { width: 16px; height: 16px; }
.nb-bm:hover .nb-web-more, .nb-web-more:focus-visible { opacity: 1; }
.nb-web-more:hover { color: var(--text); background: var(--bg-elevated); }
@media (hover: none), (pointer: coarse) {
  .nb-web-more { opacity: 1; width: 40px; height: 40px; top: 4px; right: 4px; }
}
/* Phones: the picture above the words. */
@media (max-width: 560px) {
  .nb-bm.has-img .nb-bm-link { flex-direction: column-reverse; }
  .nb-bm-img { flex: none; max-width: none; min-height: 0; aspect-ratio: 1.91 / 1; border-left: 0; border-bottom: 1px solid var(--border); }
  .nb-bm-text { padding: 12px 14px 13px; }
  .nb-bm:not(.has-img) .nb-bm-text { padding-right: 48px; }
  .nb-bm-link { min-height: 0; }
}

/* The video card */
.nb-vid { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
.nb-vid-stage { position: relative; aspect-ratio: 16 / 9; background: #07080c; overflow: hidden; }
.nb-vid-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #0b0d14; cursor: pointer; }
.nb-vid-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease; }
.nb-vid-poster:hover img { transform: scale(1.015); filter: brightness(0.88); }
.nb-vid.no-thumb .nb-vid-poster { background: radial-gradient(circle at 50% 40%, #1d2133, #0b0d14); }
.nb-vid-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 48px;
  border-radius: 14px;
  background: rgba(12, 14, 22, 0.72);
  color: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.nb-vid-play svg { width: 26px; height: 26px; }
.nb-vid-poster:hover .nb-vid-play, .nb-vid-poster:focus-visible .nb-vid-play { background: #e5372f; transform: translate(-50%, -50%) scale(1.05); }
.nb-vid-poster:focus-visible { outline: 3px solid color-mix(in srgb, var(--purple) 70%, transparent); outline-offset: -3px; }
.nb-vid-from { position: absolute; right: 10px; bottom: 10px; padding: 4px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.66); color: #fff; font: 600 0.7rem/1 'Space Mono', var(--font-mono), monospace; }
.nb-vid-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.nb-vid-bar { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 8px 8px 14px; }
.nb-vid-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nb-vid-title { font: 600 0.9rem/1.3 var(--font-heading); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-vid-author { font: 400 0.72rem/1.2 'Space Mono', var(--font-mono), monospace; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-vid-note {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px 0 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warm) 40%, transparent);
  background: color-mix(in srgb, var(--warm) 12%, transparent);
  color: color-mix(in srgb, var(--warm) 80%, var(--text));
  font: 600 0.78rem/1 var(--font-heading);
  cursor: pointer;
  white-space: nowrap;
}
.nb-vid-note[hidden] { display: none; }
.nb-vid-note svg { width: 10px; height: 10px; }
.nb-vid-note:hover { background: color-mix(in srgb, var(--warm) 20%, transparent); border-color: color-mix(in srgb, var(--warm) 60%, transparent); }
.nb-vid-note:disabled { opacity: 0.6; cursor: progress; }
.nb-vid-open, .nb-vid .nb-web-more {
  position: static;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--text-muted);
  background: transparent;
  opacity: 1;
}
.nb-vid-open svg { width: 16px; height: 16px; }
.nb-vid-open:hover, .nb-vid .nb-web-more:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
@media (pointer: coarse) {
  .nb-vid-note { height: 44px; padding: 0 16px 0 14px; }
  .nb-vid-open, .nb-vid .nb-web-more { width: 44px; height: 44px; }
}
@media (max-width: 560px) {
  .nb-vid-bar { flex-wrap: wrap; padding: 8px 6px 8px 12px; }
  .nb-vid-note { order: 5; flex: 1 1 100%; margin: 2px 6px 4px 0; }
}
.nb-chip-yt { --c: var(--warm); }

/* After a paste: show it as the other kind, a link, or undo. */
.nb-web-choice {
  position: absolute;
  left: 28px;
  top: calc(100% + 4px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border2);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
  animation: nbSelIn 0.14s cubic-bezier(0.22, 1, 0.36, 1) both;
}
:root[data-theme="light"] .nb-web-choice { box-shadow: 0 10px 24px rgba(20, 24, 40, 0.14); }
.nb-web-choice-t { padding: 0 6px 0 8px; font: 400 0.7rem/1 'Space Mono', var(--font-mono), monospace; color: var(--text-muted); white-space: nowrap; }
.nb-web-choice button { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 600 0.78rem/1 var(--font-heading); cursor: pointer; white-space: nowrap; }
.nb-web-choice button:hover, .nb-web-choice button:focus-visible { background: color-mix(in srgb, var(--text) 9%, transparent); outline: none; }
.nb-web-choice button[aria-pressed="true"] { color: var(--purple); background: color-mix(in srgb, var(--purple) 14%, transparent); }
.nb-web-choice button.undo { color: var(--text-muted); }
@media (max-width: 880px) { .nb-web-choice { left: 0; } }
@media (pointer: coarse) { .nb-web-choice button { height: 40px; padding: 0 12px; } }

/* A card read only (embeds, history) */
.nb-st-web a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; font-size: 0.86rem; line-height: 1.35; }
.nb-st-web a:hover { border-color: var(--border2); }
.nb-st-bm a { flex-direction: column; align-items: flex-start; gap: 2px; }
.nb-st-bm span { font: 400 0.72rem/1.2 'Space Mono', var(--font-mono), monospace; color: var(--text-muted); }
.nb-st-vid img { flex: none; width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
@media print { .nb-web-more, .nb-vid-note, .nb-web-choice { display: none !important; } }

/* ── The Style picker ─────────────────────────────────── */
.nb-style { position: fixed; inset: 0; z-index: 9300; }
.nb-style-backdrop { position: absolute; inset: 0; background: transparent; }
.nb-style.is-sheet .nb-style-backdrop { background: rgba(5, 7, 12, 0.36); animation: nbStyleFade 0.2s ease both; }
@keyframes nbStyleFade { from { opacity: 0; } to { opacity: 1; } }
.nb-style-panel {
  position: absolute;
  width: min(432px, calc(100vw - 16px));
  max-height: min(80vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 14px;
  border-radius: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border2);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.46), 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: nbSelIn 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}
:root[data-theme="light"] .nb-style-panel { box-shadow: 0 22px 50px rgba(20, 24, 40, 0.18), 0 2px 8px rgba(20, 24, 40, 0.08); }
.nb-style.is-sheet .nb-style-panel {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto !important;
  width: auto;
  max-width: 560px;
  max-height: min(70dvh, 620px);
  margin: 0 auto;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  animation: nbBsUp 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nb-style.is-sheet .nb-style-panel::before { content: ''; display: block; width: 38px; height: 4px; margin: 2px auto 8px; border-radius: 2px; background: var(--border2); }
.nb-style-head { position: sticky; top: -12px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -12px -14px 4px; padding: 12px 14px 8px; background: var(--bg-elevated); }
.nb-style.is-sheet .nb-style-head { top: -8px; margin: -8px -16px 2px; padding: 8px 16px 8px; }
.nb-style-title { font: 400 0.68rem/1 'Space Mono', var(--font-mono), monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.nb-style-done { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--text); color: var(--bg); font: 700 0.8rem/1 var(--font-heading); cursor: pointer; }
.nb-style-done:hover { opacity: 0.9; }
@media (pointer: coarse) { .nb-style-done { height: 40px; padding: 0 18px; } }
.nb-style-sec + .nb-style-sec { margin-top: 14px; }
.nb-style-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; font: 600 0.8rem/1.2 var(--font-heading); color: var(--text); }
.nb-style-h small { font: 400 0.72rem/1.2 var(--font); color: var(--text-muted); }
.nb-style-covers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .nb-style-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-cv-tile {
  position: relative;
  aspect-ratio: 2 / 1;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nb-cv-tile:hover { transform: translateY(-1px); }
.nb-cv-tile:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px color-mix(in srgb, var(--text) 50%, transparent); }
.nb-cv-tile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--nb-pick, var(--purple)); }
.nb-cv-tile.is-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed var(--border2);
  box-shadow: none;
  color: var(--text-dim);
  font: 600 0.74rem/1 var(--font-heading);
}
.nb-cv-tile.is-text svg { width: 15px; height: 15px; }
.nb-cv-tile.is-text:hover { color: var(--text); border-color: var(--border-hover); }
.nb-cv-tile.is-text[aria-pressed="true"] { border-style: solid; border-color: transparent; }
.nb-style-papers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.nb-pp-tile, .nb-ft-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: 600 0.72rem/1 var(--font-heading);
  cursor: pointer;
  text-align: center;
}
.nb-pp-face, .nb-ft-face {
  display: block;
  aspect-ratio: 1 / 0.86;
  border-radius: 9px;
  background-color: var(--bg);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nb-pp-tile:hover .nb-pp-face, .nb-ft-tile:hover .nb-ft-face { border-color: var(--border-hover); }
.nb-pp-tile[aria-pressed="true"], .nb-ft-tile[aria-pressed="true"] { color: var(--text); }
.nb-pp-tile[aria-pressed="true"] .nb-pp-face, .nb-ft-tile[aria-pressed="true"] .nb-ft-face { border-color: transparent; box-shadow: 0 0 0 2px var(--nb-pick, var(--purple)); }
.nb-pp-tile:focus-visible, .nb-ft-tile:focus-visible { outline: none; }
.nb-pp-tile:focus-visible .nb-pp-face, .nb-ft-tile:focus-visible .nb-ft-face { box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 50%, transparent); }
.nb-pp-face { --p: 9px; --r: color-mix(in srgb, var(--nb-pick, var(--blue)) 34%, transparent); background-position: 0 3px; }
.nb-pp-face[data-p="ruled"] { background-image: linear-gradient(to bottom, transparent calc(var(--p) - 1px), var(--r) calc(var(--p) - 1px)); background-size: 100% var(--p); }
.nb-pp-face[data-p="grid"] { background-image: linear-gradient(to bottom, transparent calc(var(--p) - 1px), var(--r) calc(var(--p) - 1px)), linear-gradient(to right, transparent calc(var(--p) - 1px), var(--r) calc(var(--p) - 1px)); background-size: var(--p) var(--p); }
.nb-pp-face[data-p="dots"] { background-image: radial-gradient(circle at center, color-mix(in srgb, var(--text) 45%, transparent) 1px, transparent 1.5px); background-size: var(--p) var(--p); }
.nb-pp-face[data-p="margin"] {
  background-image: linear-gradient(to right, transparent 9px, color-mix(in srgb, var(--red, #e86a6a) 60%, transparent) 9px, color-mix(in srgb, var(--red, #e86a6a) 60%, transparent) 10.5px, transparent 10.5px), linear-gradient(to bottom, transparent calc(var(--p) - 1px), var(--r) calc(var(--p) - 1px));
  background-size: 100% 100%, 100% var(--p);
  background-repeat: no-repeat, repeat;
}
.nb-style-accents { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.nb-ac-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--text-dim); font: 600 0.68rem/1 var(--font-heading); cursor: pointer; }
.nb-ac-dot { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.nb-ac-tile:hover .nb-ac-dot { transform: scale(1.06); }
.nb-ac-tile[aria-pressed="true"] { color: var(--text); }
.nb-ac-tile[aria-pressed="true"] .nb-ac-dot { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--c); }
.nb-ac-tile:focus-visible { outline: none; }
.nb-ac-tile:focus-visible .nb-ac-dot { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px color-mix(in srgb, var(--text) 50%, transparent); }
.nb-ac-dot.is-site { background: conic-gradient(from 210deg, var(--purple), var(--blue), var(--teal), var(--purple)); }
@media (pointer: coarse) { .nb-ac-dot { width: 36px; height: 36px; } }
.nb-style-fonts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nb-ft-face { display: grid; place-items: center; aspect-ratio: auto; height: 58px; color: var(--text); font-size: 1.4rem; line-height: 1; }
.nb-style-note { margin: 8px 0 0; font: 400 0.75rem/1.4 var(--font); color: var(--text-muted); }
@media print { .nb-style { display: none !important; } }

/* The cover tools row: Style */
.nb-tool[data-tool="style"] svg { color: var(--pink); }
/* Beside a lesson the panel stays as it was: the style is set in the full Notebook. */
html.nb-embed .nb-tool[data-tool="style"] { display: none; }
/* An uploaded photo on its own tile */
.nb-cv-own { position: absolute; left: 6px; bottom: 5px; padding: 3px 6px; border-radius: 6px; background: rgba(12, 14, 22, 0.6); color: #fff; font: 600 0.62rem/1 var(--font-heading); }
/* On paper the presets are pale: the letters go dark. */
:root[data-theme="light"] .nb-tile.nb-tile-cover[data-cvp] { color: #141820; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); }
:root[data-theme="light"] .nb-tile.nb-tile-cover[data-cvp]::before { background: rgba(255, 255, 255, 0.24); }

/* Style → Theme: one scene per notebook (tint + edge art, ink.js) */
.nb-style-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.nb-sc-tile { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--text-dim); font: 600 0.7rem/1.1 var(--font-heading); cursor: pointer; text-align: center; }
.nb-sc-face { position: relative; display: block; aspect-ratio: 1 / 0.8; border-radius: 9px; border: 1px solid var(--border); }
.nb-sc-face i { position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.nb-sc-tile[aria-pressed="true"] { color: var(--text); }
.nb-sc-tile[aria-pressed="true"] .nb-sc-face { border-color: transparent; box-shadow: 0 0 0 2px var(--nb-pick, var(--purple)); }
.nb-style-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.82rem; color: var(--text-dim); cursor: pointer; }