/* =========================================================
   The island (notebook/sanctuary.js): writing mode's sounds, light and keys,
   on a small islet of light in the quiet band at the top. It never sits
   over the text: the band is above the page, and it follows the visual
   viewport on a phone, so the keyboard never covers it. Tokens only.
   ========================================================= */
/* The islands grow with the page's type (--nb-page-k, set by notebook.js on a
   wide page; 1 on a narrow page and on phones): the icons stay near the
   body text's cap height, the hit areas 36 px and up. Bigger, not heavier. */
html { --nb-ik: calc(1 + (var(--nb-page-k, 1) - 1) * 0.38); }
.nb-isle { display: none; }
html.nb-notes-only .nb-isle {
  --near: 0;
  --px: 0px;
  --isle-c: var(--purple);
  position: fixed;
  top: calc(5px + env(safe-area-inset-top, 0px) + var(--nb-vvt, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  z-index: 41;
  display: block;
  opacity: calc(0.7 + 0.3 * var(--near));
  transition: opacity 0.7s ease;
}
html.nb-notes-only .nb-isle:hover,
html.nb-notes-only .nb-isle:focus-within,
html.nb-notes-only .nb-isle.packs { opacity: 1; }
@media (pointer: coarse) { html.nb-notes-only .nb-isle { opacity: 0.76; } }
/* While you type it sinks almost out of sight, quickly; it comes back slowly (notebook.js). */
html.nb-notes-only.nb-typing .nb-isle:not(.packs):not(:focus-within) { opacity: 0.12; transition-duration: 0.35s; }
@media (max-width: 880px) {
  /* Centred in the band to the right of ‹ Back. */
  html.nb-notes-only .nb-isle { right: auto; left: calc(50% + 24px); transform: translateX(-50%); }
}
/* ‹ Back in Flow State: level with the island, breathing like its glyphs,
   sinking with it while you type. */
html.nb-notes-only .nb-back { top: calc(5px + env(safe-area-inset-top, 0px) + var(--nb-vvt, 0px)); height: calc(44px * var(--nb-ik)); width: calc(40px * var(--nb-ik)); }
html.nb-notes-only .nb-back svg { width: calc(20px * var(--nb-ik)); height: calc(20px * var(--nb-ik)); animation: nbIsleBreathe 9s ease-in-out infinite; }
html.nb-notes-only .nb-back:is(:focus-visible, :active) svg { animation: none; opacity: 1; }
@media (hover: hover) { html.nb-notes-only .nb-back:hover svg { animation: none; opacity: 1; } }
html.nb-notes-only.nb-typing .nb-back:not(:focus-visible) { opacity: 0.12; transition-duration: 0.35s; }
@media (pointer: coarse), (max-width: 880px) {
  html.nb-notes-only .nb-back { top: calc(2px + env(safe-area-inset-top, 0px) + var(--nb-vvt, 0px)); width: 44px; height: 44px; }
  html.nb-notes-only .nb-back svg { width: 22px; height: 22px; }
}
/* The islet: a soft glow tinted by what plays, a horizon of light under the
   icons, their faint reflection, a breath of mist and three rising motes. */
.nb-isle-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px 12px;
  isolation: isolate;
  transform: translateX(calc(var(--px) * 0.35));
  -webkit-box-reflect: below -3px linear-gradient(transparent 46%, rgba(0, 0, 0, 0.2));
}
.nb-isle-row::before {
  content: '';
  position: absolute;
  inset: 4px -16px -6px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--isle-c) 15%, transparent), color-mix(in srgb, var(--purple) 6%, transparent) 62%, transparent);
  transition: background 1.2s ease;
}
.nb-isle-row::after {
  content: '';
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 0;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--isle-c) 40%, var(--text)) 50%, transparent);
  opacity: 0.32;
}
.nb-isle-mist {
  position: absolute;
  left: -26px;
  right: -26px;
  top: 14px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--text) 8%, transparent), transparent);
  filter: blur(6px);
  transform: translateX(calc(var(--px) * 1.4));
  pointer-events: none;
}
.nb-isle-motes { position: absolute; inset: -6px 10% 50%; pointer-events: none; transform: translateX(calc(var(--px) * -0.8)); }
.nb-isle-motes b {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--isle-c) 60%, var(--text));
  opacity: 0;
}
.nb-isle-motes b:nth-child(1) { left: 14%; }
.nb-isle-motes b:nth-child(2) { left: 52%; }
.nb-isle-motes b:nth-child(3) { left: 83%; }
.nb-isle[data-playing]:not([data-playing=""]) .nb-isle-motes b { animation: nbIsleMote 7s ease-in-out infinite; }
.nb-isle-motes b:nth-child(2) { animation-delay: -2.4s !important; }
.nb-isle-motes b:nth-child(3) { animation-delay: -4.8s !important; }
@keyframes nbIsleMote { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(-12px); } }
.nb-isle-dot { width: calc(3px * var(--nb-ik)); height: calc(3px * var(--nb-ik)); margin: 0 calc(3px * var(--nb-ik)); border-radius: 50%; background: color-mix(in srgb, var(--text) 26%, transparent); flex: none; }

/* An icon: hair strokes in its role colour. */
.nb-isle-b, .nb-isle-p {
  --ic: color-mix(in srgb, var(--c, var(--text)) 84%, var(--text));
  position: relative;
  display: grid;
  place-items: center;
  width: calc(32px * var(--nb-ik));
  height: calc(32px * var(--nb-ik));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ic);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="light"] .nb-isle-b, :root[data-theme="light"] .nb-isle-p { --ic: color-mix(in srgb, var(--c, var(--text)) 62%, var(--text)); }
.nb-isle-b svg, .nb-isle-p svg { width: calc(18px * var(--nb-ik)); height: calc(18px * var(--nb-ik)); overflow: visible; }
.nb-isle-b svg.clip { overflow: hidden; }
.nb-isle-b svg { opacity: 0.66; transition: opacity 0.6s ease; }
.nb-isle-b::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent), transparent);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.nb-isle-b:hover svg, .nb-isle-b:focus-visible svg { opacity: 0.95; animation: none; }
.nb-isle-b:focus-visible { outline: none; }
.nb-isle-b:focus-visible::before { opacity: 0.8; transform: none; }
/* The live one glows and moves; the rest breathe, very slowly. */
.nb-isle-b[aria-pressed="true"] svg { opacity: 1; }
.nb-isle-b[aria-pressed="true"]::before { opacity: 1; transform: scale(1.15); }
.nb-isle-b.chosen svg { opacity: 0.8; }
.nb-isle-b:not([aria-pressed="true"]):not(.nb-isle-sky) svg { animation: nbIsleBreathe 9s ease-in-out infinite; }
.nb-isle-b:nth-child(2) svg { animation-delay: -1.5s; }
.nb-isle-b:nth-child(3) svg { animation-delay: -3s; }
.nb-isle-b:nth-child(4) svg { animation-delay: -4.5s; }
.nb-isle-b:nth-child(5) svg { animation-delay: -6s; }
.nb-isle-b:nth-child(6) svg { animation-delay: -7.5s; }
@keyframes nbIsleBreathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.85; } }
.nb-isle-b svg g { transform-box: view-box; }
.nb-isle-b[aria-pressed="true"] .a-wave { animation: nbIsleWave 5s linear infinite; }
.nb-isle-b[aria-pressed="true"] .a-wave.a2 { animation-duration: 7.5s; }
@keyframes nbIsleWave { to { transform: translateX(15px); } }
.nb-isle-b[aria-pressed="true"] .a-sway { transform-origin: 12px 21px; animation: nbIsleSway 4.2s ease-in-out infinite alternate; }
.nb-isle-b[aria-pressed="true"] .a-sway.a2 { animation-delay: -2.1s; }
@keyframes nbIsleSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.nb-isle-b[aria-pressed="true"] .a-water { animation: nbIsleWater 3.6s ease-in-out infinite; }
@keyframes nbIsleWater { 0%, 100% { opacity: 1; transform: translateX(0); } 50% { opacity: 0.45; transform: translateX(1.2px); } }
.nb-isle-b[aria-pressed="true"] .a-drop { animation: nbIsleDrop 1.3s linear infinite; }
.nb-isle-b[aria-pressed="true"] .a-drop.a2 { animation-delay: -0.45s; }
.nb-isle-b[aria-pressed="true"] .a-drop.a3 { animation-delay: -0.9s; }
@keyframes nbIsleDrop { 0% { opacity: 0; transform: translateY(-4px); } 25% { opacity: 1; } 80% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(6px); } }
.nb-isle-b[aria-pressed="true"] .a-flame { transform-origin: 12px 20px; animation: nbIsleFlame 1.6s ease-in-out infinite alternate; }
@keyframes nbIsleFlame { 0% { transform: scale(1, 0.92) skewX(-2deg); } 100% { transform: scale(0.97, 1.06) skewX(2deg); } }
.nb-isle-b[aria-pressed="true"] .a-ring { transform-origin: 12px 12px; animation: nbIsleHush 6s ease-in-out infinite; }
@keyframes nbIsleHush { 0%, 100% { transform: scale(0.9); opacity: 0.9; } 50% { transform: scale(1.12); opacity: 0.35; } }
.nb-isle-b[data-keys] .a-arc { opacity: 0; transition: opacity 0.6s ease; }
.nb-isle-b[data-keys][data-on="true"] svg { opacity: 1; animation: none; }
.nb-isle-b[data-keys][data-on="true"]::before { opacity: 0.7; transform: scale(1.05); }
.nb-isle-b[data-keys][data-on="true"] .a-arc { opacity: 1; animation: nbIsleArc 2.4s ease-in-out infinite; }
.nb-isle-b[data-keys][data-on="true"] .a-arc.a2 { animation-delay: 0.4s; }
.nb-isle-b[data-keys][aria-expanded="true"]::before { opacity: 1; transform: scale(1.15); }
@keyframes nbIsleArc { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
/* The light: a sun by day, a moon by night; one sets as the other rises. */
.nb-isle-sky svg { opacity: 0.9; }
.nb-isle-sky::before { opacity: 0.55; transform: none; }
.nb-isle-sky .sun, .nb-isle-sky .moon { transition: opacity 1.1s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.nb-isle[data-sky="dark"] .nb-isle-sky .sun { opacity: 0; transform: translateY(7px) scale(0.8); }
.nb-isle[data-sky="light"] .nb-isle-sky .moon { opacity: 0; transform: translateY(7px) scale(0.8); }
.nb-isle-sky .a-rays { transform-origin: 12px 12px; animation: nbIsleRays 48s linear infinite; }
@keyframes nbIsleRays { to { transform: rotate(360deg); } }
.nb-isle-sky .a-twinkle { transform-origin: 19px 5.1px; animation: nbIsleTwinkle 5s ease-in-out infinite; }
@keyframes nbIsleTwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } }
/* Following the system: a faint dotted halo says so. */
.nb-isle-sky[data-sys]::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--c) 45%, transparent); }
/* Dusk or dawn passes over the island while the page changes. */
.nb-isle-sweep { position: absolute; inset: -4px -18px; border-radius: 50%; pointer-events: none; opacity: 0; }
.nb-isle.dusk .nb-isle-sweep { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--purple) 30%, transparent), color-mix(in srgb, var(--blue) 22%, transparent), transparent); animation: nbIsleSweep 1.5s ease both; }
.nb-isle.dawn .nb-isle-sweep { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--warm) 34%, transparent), color-mix(in srgb, var(--yellow, var(--warm)) 26%, transparent), transparent); animation: nbIsleSweep 1.5s ease both; }
@keyframes nbIsleSweep { 0% { opacity: 0; transform: translateX(-40%) scaleX(0.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(40%) scaleX(1); } }
/* The page: the new light spreads softly out from the island. */
@property --nb-dawn { syntax: '<length>'; inherits: false; initial-value: 0px; }
html.nb-dawn::view-transition-old(root) { animation: none; }
html.nb-dawn::view-transition-new(root) {
  animation: nbDawn 1.25s cubic-bezier(0.4, 0, 0.2, 1) both;
  -webkit-mask-image: radial-gradient(circle at var(--nb-sx, 90%) var(--nb-sy, 0px), #000 var(--nb-dawn), transparent calc(var(--nb-dawn) + 260px));
  mask-image: radial-gradient(circle at var(--nb-sx, 90%) var(--nb-sy, 0px), #000 var(--nb-dawn), transparent calc(var(--nb-dawn) + 260px));
}
@keyframes nbDawn { from { --nb-dawn: 0px; } to { --nb-dawn: 3200px; } }

/* The keys' four sounds: a small pocket under the island. */
.nb-isle-packs {
  position: absolute;
  top: calc(100% + 14px);
  right: 6px;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated, var(--bg)) 96%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent), 0 12px 30px -12px color-mix(in srgb, var(--pink, var(--purple)) 30%, rgba(0, 0, 0, 0.45));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.nb-isle.packs .nb-isle-packs { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.nb-isle-p { --c: var(--pink, var(--purple)); width: calc(36px * var(--nb-ik)); height: calc(36px * var(--nb-ik)); }
.nb-isle-packs .nb-isle-dot { align-self: center; }
.nb-isle-off svg { width: calc(16px * var(--nb-ik)); height: calc(16px * var(--nb-ik)); }
.nb-isle-p svg { width: calc(19px * var(--nb-ik)); height: calc(19px * var(--nb-ik)); opacity: 0.6; }
.nb-isle-p:hover svg, .nb-isle-p:focus-visible svg { opacity: 1; }
.nb-isle-p[aria-checked="true"] { background: color-mix(in srgb, var(--c) 16%, transparent); }
.nb-isle-p[aria-checked="true"] svg { opacity: 1; }
.nb-isle-p:focus-visible { outline: 2px solid color-mix(in srgb, var(--c) 60%, transparent); outline-offset: 1px; }

/* ── The tools islet: in Flow State the focus dock rests low in the page
   with the island's look and the island's manners. Faint at rest (0.7) and
   breathing; bright when the pointer comes near (--near, sanctuary.js) or a
   key reaches it; almost gone while you type (html.nb-typing, notebook.js).
   Hair strokes in their role colours over a pebble of mist, so the words
   under it fade away; a horizon of light and a faint reflection. It rises
   with a dawn of light as Flow State begins. ── */
html.nb-notes-only .nb-focus-dock {
  --isle-c: var(--purple);
  --near: 0;
  --o: calc(0.7 + 0.3 * var(--near));
  height: calc(46px * var(--nb-ik));
  padding: 0 calc(18px * var(--nb-ik));
  gap: 2px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
  isolation: isolate;
  -webkit-box-reflect: below -4px linear-gradient(transparent 55%, rgba(0, 0, 0, 0.16));
  animation: nbIsletIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.nb-notes-only .nb-focus-dock:hover,
html.nb-notes-only .nb-focus-dock:focus-within,
html.nb-notes-only .nb-focus-dock.awake { --o: 1; }
html.nb-notes-only.nb-typing .nb-focus-dock:not(:focus-within) { --o: 0.12; }
/* The mist: paper, wide and low, so the words under the islet fade far from
   its icons. It stays while the icons sink: only the page shows there. */
html.nb-notes-only .nb-focus-dock::before {
  content: '';
  position: absolute;
  inset: -26px calc(-1 * clamp(120px, 24vw, 560px)) -20px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--bg) 62%, color-mix(in srgb, var(--bg) 85%, transparent) 80%, transparent);
  opacity: 0.95;
  pointer-events: none;
}
/* Its light (a tint and the horizon) rests and sinks with the icons. */
.nb-fd-glow { display: none; }
html.nb-notes-only .nb-fd-glow {
  position: absolute;
  inset: -26px calc(-1 * clamp(120px, 24vw, 560px)) -20px;
  z-index: -1;
  display: block;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 22%, color-mix(in srgb, var(--isle-c) 34%, var(--text)) 50%, transparent 78%) bottom 19px center / 62% 1px no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--isle-c) 12%, transparent), transparent 80%);
  opacity: var(--o);
  transition: opacity 0.7s ease;
  pointer-events: none;
}
/* The dawn: a band of light passes over the islet as Flow State begins. */
html.nb-notes-only .nb-focus-dock::after {
  content: '';
  position: absolute;
  inset: -2px -24px;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--warm) 30%, transparent), color-mix(in srgb, var(--yellow, var(--warm)) 22%, transparent), transparent);
  opacity: 0;
  animation: nbIsleSweep 1.3s ease 0.08s both;
}
@keyframes nbIsletIn { 0% { opacity: 0; transform: translate(-50%, 10px); filter: blur(3px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: translate(-50%, 0); filter: none; } }
/* Every tool rests at the islet's light (--o); typing sinks them quickly, they come back slowly. */
html.nb-notes-only .nb-focus-dock :is(.nb-fd, .nb-fd-sep) {
  opacity: var(--o);
  transition: color 0.4s ease, background 0.5s ease, opacity 0.7s ease;
}
html.nb-notes-only.nb-typing .nb-focus-dock :is(.nb-fd, .nb-fd-sep) { transition-duration: 0.4s, 0.5s, 0.35s; }
html.nb-notes-only.nb-typing .nb-fd-glow { transition-duration: 0.35s; }
html.nb-notes-only .nb-focus-dock .nb-fd {
  --ic: color-mix(in srgb, var(--c, var(--text)) 80%, var(--text));
  width: calc(38px * var(--nb-ik));
  height: calc(38px * var(--nb-ik));
  color: var(--ic);
  background: transparent;
}
:root[data-theme="light"].nb-notes-only .nb-focus-dock .nb-fd { --ic: color-mix(in srgb, var(--c, var(--text)) 64%, var(--text)); }
html.nb-notes-only .nb-focus-dock .nb-fd svg { width: calc(19px * var(--nb-ik)); height: calc(19px * var(--nb-ik)); }
html.nb-notes-only .nb-focus-dock .nb-fd svg :is(path, rect, circle, line, polyline) { stroke-width: 1.55; }
html.nb-notes-only .nb-focus-dock .nb-fd-more svg circle { stroke-width: 0; }
/* They breathe, as the island's do, very slowly and out of step. */
html.nb-notes-only .nb-focus-dock .nb-fd > :is(svg, span) { animation: nbIsleBreathe 9s ease-in-out infinite; }
html.nb-notes-only .nb-focus-dock .nb-fd:nth-child(3n+1) > :is(svg, span) { animation-delay: -3s; }
html.nb-notes-only .nb-focus-dock .nb-fd:nth-child(3n+2) > :is(svg, span) { animation-delay: -6s; }
html.nb-notes-only .nb-focus-dock .nb-fd:is(:hover, :focus-visible) { background: radial-gradient(closest-side, color-mix(in srgb, var(--c, var(--text)) 24%, transparent), transparent); outline: none; }
html.nb-notes-only .nb-focus-dock .nb-fd:is(:hover, :focus-visible) > :is(svg, span) { opacity: 1; animation: none; }
html.nb-notes-only .nb-focus-dock .nb-fd[aria-disabled="true"] { opacity: calc(0.36 * var(--o)); background: transparent; }
html.nb-notes-only .nb-focus-dock .nb-fd-aa span { font: 500 calc(0.95rem * var(--nb-ik))/1 var(--font-heading); }
html.nb-notes-only .nb-focus-dock .nb-fd-sep { width: calc(3px * var(--nb-ik)); height: calc(3px * var(--nb-ik)); margin: 0 calc(4px * var(--nb-ik)); border-radius: 50%; background: color-mix(in srgb, var(--text) 26%, transparent); }
/* Each tool's role colour. */
html.nb-notes-only .nb-focus-dock [data-sheet="insert"] { --c: var(--teal); }
html.nb-notes-only .nb-focus-dock [data-checklist] { --c: var(--green); }
html.nb-notes-only .nb-focus-dock .nb-fd-mic { --c: var(--red); color: color-mix(in srgb, var(--red) 82%, var(--text)); }
html.nb-notes-only .nb-focus-dock [data-insert="canvas"] { --c: var(--warm); }
html.nb-notes-only .nb-focus-dock [data-palette] { --c: var(--purple); }
html.nb-notes-only .nb-focus-dock .nb-fd-page { --c: var(--blue); }
html.nb-notes-only .nb-focus-dock .nb-fd-exit { --c: var(--yellow, var(--warm)); }
/* Film this session: a glyph like the rest. */
html.nb-notes-only .nb-focus-dock .nbf-fd { --c: var(--warm); width: calc(38px * var(--nb-ik)); padding: 0; gap: 0; }
html.nb-notes-only .nb-focus-dock .nbf-fd span { display: none; }
html.nb-notes-only .nb-focus-dock .nbf-fd[aria-pressed="true"] { --c: var(--red); color: var(--red); background: radial-gradient(closest-side, color-mix(in srgb, var(--red) 30%, transparent), transparent); }
/* Recording or filming: that tool glows and keeps its light while you type. */
html.nb-notes-only .nb-focus-dock .nb-fd-mic.recording { opacity: 1; color: var(--red); background: radial-gradient(closest-side, color-mix(in srgb, var(--red) 34%, transparent), transparent); animation: nbIsleHush 2.4s ease-in-out infinite; }
html.nb-notes-only .nb-focus-dock .nbf-fd[aria-pressed="true"] { opacity: max(var(--o), 0.6); }
html.nb-notes-only .nb-focus-dock :is(.nb-fd-mic.recording, .nbf-fd[aria-pressed="true"]) > svg { opacity: 1; animation: none; }

/* The panels the tools open (Aa, insert, more) float as mist too. */
html.nb-notes-only .nb-block-sheet.nb-sheet-pop .nb-block-sheet-panel {
  border-color: color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple) 7%, transparent), 0 22px 60px -24px color-mix(in srgb, var(--purple) 36%, rgba(0, 0, 0, 0.5)), 0 2px 10px rgba(0, 0, 0, 0.18);
  animation: nbIslePanel 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
:root[data-theme="light"].nb-notes-only .nb-block-sheet.nb-sheet-pop .nb-block-sheet-panel { box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple) 8%, transparent), 0 20px 50px -22px color-mix(in srgb, var(--purple) 30%, transparent), 0 2px 8px rgba(20, 24, 40, 0.06); }
@keyframes nbIslePanel { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
/* The blocks palette, docked at the side, is glass in writing mode. */
html.nb-notes-only .nbp.is-dock {
  border-left-color: color-mix(in srgb, var(--text) 7%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* ── A phone: the thumb bar is the islet. It rests faint over the home
   indicator (or over the keyboard), on paper, with a mist that rises from it
   so the words above fade into it; it sinks while you type. Its ⋯ opens a
   row above it: the block's menu, Film, + Page and the ways out. ── */
@media (max-width: 880px) {
  /* Room under the last line, so it can always rise clear of the tools and the keyboard. */
  html.nb-notes-only .nb-editor { padding-bottom: calc(var(--nb-kb, 0px) + var(--nb-mobile-bar-h) + env(safe-area-inset-bottom, 0px) + 150px); }
  html.nb-notes-only .nb-mobile-bar {
    --o: 0.76;                                   /* the island's rest on a touch screen */
    border-top: 0;
    background: var(--bg);                       /* paper: no words show through it */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: visible;
    animation: nbIsletRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  html.nb-notes-only .nb-mobile-bar.awake,
  html.nb-tray .nb-mobile-bar { --o: 1; }
  html.nb-notes-only.nb-typing .nb-mobile-bar { --o: 0.12; }
  html.nb-notes-only .nb-mobile-bar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 28px;
    pointer-events: none;
    background: linear-gradient(to top, var(--bg), color-mix(in srgb, var(--bg) 60%, transparent) 55%, transparent);
  }
  /* Its light: a horizon over the icons and a breath of colour; it rests and sinks with them. */
  html.nb-notes-only .nb-mobile-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30px;
    pointer-events: none;
    background:
      linear-gradient(90deg, transparent 14%, color-mix(in srgb, var(--purple) 30%, var(--text)) 50%, transparent 86%) top center / 72% 1px no-repeat,
      radial-gradient(60% 100% at 50% 0, color-mix(in srgb, var(--purple) 9%, transparent), transparent);
    opacity: calc(var(--o) * 0.8);
    transition: opacity 0.7s ease;
  }
  html.nb-notes-only .nb-thumb > * { opacity: var(--o); transition: opacity 0.7s ease; }
  html.nb-notes-only.nb-typing .nb-thumb > *, html.nb-notes-only.nb-typing .nb-mobile-bar::after { transition-duration: 0.35s; }
  html.nb-notes-only .nb-thumb:not(.awake) .nb-tb { opacity: 1; color: color-mix(in srgb, var(--text-dim) 85%, var(--purple)); }
  html.nb-notes-only .nb-thumb .nb-tb[aria-disabled="true"] { opacity: 0.36; }
  html.nb-notes-only .nb-thumb .nb-tb svg :is(path, rect, circle, line) { stroke-width: 1.6; }
  html.nb-notes-only .nb-thumb:not(.awake) .nb-tb-mic:not(.recording),
  html.nb-notes-only .nb-thumb .nb-tb-mic {
    opacity: var(--o);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--red) 26%, transparent) 60%, transparent);
    color: var(--red);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--red) 55%, transparent);
  }
  html.nb-notes-only .nb-thumb .nb-tb-mic.recording { opacity: 1; }
  /* The ⋯, while its row is open. */
  html.nb-tray .nb-thumb [data-block-menu] { color: var(--purple); background: radial-gradient(closest-side, color-mix(in srgb, var(--purple) 22%, transparent), transparent); }
  html.nb-tray-out .nb-tray-row { animation: nbIsletSink 0.42s ease both !important; }
  /* The row spans the width: a mist that rises from the bar, the words above fading into it. */
  html.nb-notes-only.nb-tray .nb-tray-row {
    left: 0;
    right: 0;
    bottom: calc(var(--nb-kb, 0px) + var(--nb-mobile-bar-h) + env(safe-area-inset-bottom, 0px));
    gap: 14px;
    padding: 40px 14px 2px;
    transform: none;
    background:
      linear-gradient(90deg, transparent 18%, color-mix(in srgb, var(--purple) 30%, var(--text)) 50%, transparent 82%) bottom 1px center / 70% 1px no-repeat,
      radial-gradient(60% 70% at 50% 85%, color-mix(in srgb, var(--purple) 10%, transparent), transparent),
      linear-gradient(to top, var(--bg) 0, var(--bg) 48px, color-mix(in srgb, var(--bg) 70%, transparent) 72px, transparent);
    animation: nbIsletRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  /* On the keyboard the bar drops the home indicator's room: so does the row. */
  html.nb-tray:has(#mobileBar.kb-up) .nb-tray-row { bottom: calc(var(--nb-kb, 0px) + var(--nb-mobile-bar-h)); }
  .nb-tray-pill { color: color-mix(in srgb, var(--c, var(--text)) 70%, var(--text)); }
  .nb-tray-pill svg :is(path, rect) { stroke-width: 1.6; }
  .nb-tray-pill[data-tray-page] { --c: var(--blue); }
  .nb-tray-pill.nb-tray-block { --c: var(--purple); }
  .nb-tray-pill.nbf-tray { --c: var(--warm); border: 0; }
  .nb-tray-pill.nbf-tray[aria-pressed="true"] { --c: var(--red); background: radial-gradient(closest-side, color-mix(in srgb, var(--red) 28%, transparent), transparent); }
  .nb-tray-leave svg { opacity: 0.55; }
  .nb-tray-exit { --c: var(--yellow, var(--warm)); }
}
@keyframes nbIsletRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nbIsletSink { from { opacity: 1; } to { opacity: 0; transform: translateY(8px); } }

/* ── Tooltips: small and quiet, in the islands' light (sanctuary.js) ── */
.nb-itip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9600;
  max-width: min(260px, calc(100vw - 16px));
  padding: 5px 11px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated, var(--bg)) 84%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--tip-c, var(--purple)) 45%, transparent);
  color: var(--text-dim);
  font: 500 calc(0.74rem * (1 + (var(--nb-ik) - 1) * 0.6))/1.25 var(--font-heading);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translateY(var(--tip-dy, 3px));
  transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nb-itip.on { opacity: 1; transform: none; }
.nb-itip i { display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--tip-c, var(--purple)); box-shadow: 0 0 6px var(--tip-c, var(--purple)); vertical-align: middle; }
@media (prefers-reduced-motion: reduce) {
  .nb-itip { transition: none; transform: none; }
  html.nb-notes-only .nb-focus-dock, html.nb-notes-only .nb-focus-dock::after, html.nb-notes-only .nb-focus-dock .nb-fd > :is(svg, span), html.nb-notes-only .nb-back svg, html.nb-notes-only .nb-mobile-bar, html.nb-tray .nb-tray-row,
  html.nb-notes-only .nb-focus-dock .nb-fd-mic.recording, html.nb-notes-only .nb-block-sheet.nb-sheet-pop .nb-block-sheet-panel { animation: none !important; }
}
@media print { .nb-itip { display: none !important; } }

/* Phones: finger-sized, the whole island across the band. */
@media (pointer: coarse), (max-width: 880px) {
  .nb-isle-b { width: 38px; height: 44px; }
  .nb-isle-b svg { width: 19px; height: 19px; }
  .nb-isle-row { padding: 0 8px; gap: 0; }
  .nb-isle-dot { margin: 0 1px; }
  .nb-isle-p { width: 44px; height: 44px; }
  html.nb-notes-only .nb-isle { top: calc(2px + env(safe-area-inset-top, 0px) + var(--nb-vvt, 0px)); }
}
@media (max-width: 880px) { .nb-isle-packs { right: 50%; transform: translate(50%, -4px); } .nb-isle.packs .nb-isle-packs { transform: translate(50%, 0); } }
@media (max-width: 389px) { .nb-isle-b { width: 36px; } }      /* room for ‹ Back at the left of the band */
@media (max-width: 374px) { .nb-isle-b { width: 34px; } }

/* Reduced motion: nothing moves; the glow stays. */
@media (prefers-reduced-motion: reduce) {
  .nb-isle, .nb-isle *, .nb-isle *::before { animation: none !important; transition: none !important; }
  .nb-isle-row, .nb-isle-mist, .nb-isle-motes { transform: none !important; }
  .nb-isle-motes { display: none; }
}
@media print { .nb-isle { display: none !important; } }