/* Fern Notes: a calm green notes app. Sidebar on the left (mint, with leafy art at the bottom),
   a soft white page on the right with a big friendly heading, rounded cards and a bright green
   "New" button. Colours come from the theme (settings set the --fn-* tokens on <html>). */
:root {
  --fn-side: #e6f4e7;
  --fn-side2: #f1f9f1;
  --fn-sel: #d3edd6;
  --fn-main: #fafbfa;
  --fn-ink: #18251f;
  --fn-muted: #5f6d66;
  --fn-accent: #1f9e76;
  --fn-soft: #a6e2ca;
  --fn-border: #cfe6d9;
  --fn-card: #ffffff;
  --fn-dot: #c8d0cb;
  --fn-side-w: 300px;
  --fn-scale: 1;
  --fn-text: 1;
  /* Words follow both the size of everything and the text size setting. */
  --fn-font: calc(var(--fn-scale) * var(--fn-text));
  /* Accent-coloured words: nudged towards the text colour, so they read well on every theme. */
  --fn-accent-text: color-mix(in srgb, var(--fn-accent) 65%, var(--fn-ink));
  --fn-r: 18px;
  --display: "Bricolage Grotesque", "Nunito", system-ui, sans-serif;
  --font: "Bricolage Grotesque", "Nunito", system-ui, -apple-system, sans-serif;

  /* Tokens the note editor and older parts read. */
  --bg: var(--fn-main);
  --ink: var(--fn-ink);
  --accent: var(--fn-accent);
  --muted: 0.62;
  --faint: color-mix(in srgb, var(--fn-ink) 12%, transparent);
  --radius: 14px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cursor: default;
  --cursor-hover: pointer;
  --text-scale: var(--fn-font);
  --icon-stroke: 1.9;
  --icon-scale: 1;
  --title-weight: 800;
  --menu-weight: 800;
  --body-weight: 600;
  --lean: 0deg;
  --chev-slide: 0px;
  --squish: 0.96;
  --tracking: 0;
  color-scheme: light;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--fn-main);
  color: var(--fn-ink);
}

body {
  font-family: var(--font);
  font-size: calc(16px * var(--fn-font));
  font-weight: 600;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  filter: var(--filter, none);
}

input,
textarea,
button {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

img {
  -webkit-user-drag: none;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  stroke-width: var(--icon-stroke);
  vertical-align: -0.2em;
}

#app,
#views {
  position: fixed;
  inset: 0;
}
/* iPadOS 26 home screen apps can push the page down under a solid bar while keeping the full
   height, which hides the bottom. The small and dynamic viewport sizes stay right, so use
   whichever height is smallest. */
@supports (height: 100svh) {
  #app,
  #views {
    bottom: auto;
    height: min(100%, 100dvh, 100svh);
  }
}

.view {
  position: absolute;
  inset: 0;
}

.scroll {
  overflow-x: hidden;
  overflow-y: auto;
}

.char {
  display: inline-block;
  white-space: pre;
}

/* Text buttons used by the dialogs and Study. */
.link {
  appearance: none;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.label,
.chev,
.bicon {
  display: inline-block;
}
.bicon {
  margin-right: 0.45em;
}
.no-chev .chev {
  display: none;
}
.link:focus-visible {
  outline: 2px solid var(--fn-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- The main screen ---------- */

.view-shell {
  padding: 0;
}
.fn {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--fn-side-w) 1fr;
}

/* Sidebar */
.fn-side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  /* (So the links can leave room for the picture, which is 3/4 of the sidebar's width tall.) */
  container-type: inline-size;
  background: linear-gradient(180deg, var(--fn-side) 0%, var(--fn-side2) 55%, var(--fn-side) 100%);
  border-right: 1px solid color-mix(in srgb, var(--fn-border) 70%, transparent);
  /* Rounded where it meets the page, top and bottom (Settings → Appearance → Sidebar corners). */
  border-radius: 0 var(--side-round, 40px) var(--side-round, 40px) 0;
}
/* The links run all the way down, behind the picture: they glide between the plants instead of
   being cut off in a straight line. The last one can still scroll up clear of them. */
.fn-side-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 22px 20px max(22px, env(safe-area-inset-left, 0px));
  padding-bottom: calc(var(--fn-side-w, 300px) * 0.75 - 20px);
  padding-bottom: calc(min(75cqw, 38vh) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.fn-side-scroll::-webkit-scrollbar {
  display: none;
}
.fn-side-top {
  display: flex;
  align-items: center;
  height: 44px;
  margin: 0 0 12px 4px;
}
.fn-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fn-ink);
  transition: background-color 0.2s, transform 0.3s var(--spring);
}
.fn-icon-btn .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.7;
}
.fn-icon-btn:hover {
  background: color-mix(in srgb, var(--fn-ink) 7%, transparent);
}
.fn-icon-btn:active {
  transform: scale(0.88);
}
.fn-icon-btn.small {
  width: 36px;
  height: 36px;
}
.fn-icon-btn.small .icon {
  width: 22px;
  height: 22px;
}
.fn-icon-btn.ring .icon {
  width: 30px;
  height: 30px;
  padding: 4px;
  border: 1.8px solid currentColor;
  border-radius: 50%;
  transform: rotate(90deg);
}

.fn-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--fn-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-card) 88%, transparent);
  color: var(--fn-muted);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fn-search:focus-within {
  border-color: var(--fn-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fn-accent) 14%, transparent);
}
.fn-search .icon {
  width: 21px;
  height: 21px;
}
.fn-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--fn-ink);
  font-size: calc(19px * var(--fn-font));
  font-weight: 700;
  -webkit-appearance: none;
}
.fn-search input::placeholder {
  color: var(--fn-muted);
  opacity: 0.9;
}
.fn-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.fn-nav,
.fn-folders {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fn-nav {
  margin: 30px 0 34px;
}
.fn-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 58px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--fn-ink);
  font-size: calc(20px * var(--fn-font));
  font-weight: 800;
  text-align: left;
  transition: background-color 0.25s, transform 0.3s var(--spring);
}
.fn-item .icon {
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
}
.fn-item:hover {
  background: color-mix(in srgb, var(--fn-sel) 55%, transparent);
}
.fn-item:active {
  transform: scale(0.98);
}
.fn-item.on {
  background: var(--fn-sel);
}
.fn-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fn-folders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 6px 12px;
  color: var(--fn-muted);
  font-size: calc(17px * var(--fn-font));
  font-weight: 700;
}
.fn-folders .fn-item {
  min-height: 58px;
  font-weight: 800;
}
.fn-leaf {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.fn-folder-glyph {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
}
.fn-folder-glyph .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
}
.fn-side-empty {
  padding: 6px 14px;
  color: var(--fn-muted);
  font-size: calc(15px * var(--fn-font));
  font-weight: 600;
}

/* The picture at the bottom of the sidebar, over the links (it has no sky, so they show between
   the plants). It keeps the drawing's 4:3 shape so the whole scene shows; only very short
   screens trim the top. */
.fn-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 38vh;
  pointer-events: none;
  /* The top of the picture fades into the sidebar, whatever colour is behind it. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 14%, #000 30%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 14%, #000 30%);
}
.fn-art-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body:not(.side-art) .fn-art {
  display: none;
}

/* Little moving parts inside the seasonal pictures. */
.fn-smoke {
  transform-box: fill-box;
  transform-origin: center;
  animation: fn-smoke 4.2s ease-out infinite;
}
@keyframes fn-smoke {
  from {
    transform: translate(0, 0) scale(0.6);
    opacity: 0.85;
  }
  to {
    transform: translate(12px, -48px) scale(2.1);
    opacity: 0;
  }
}
.fn-blink {
  animation: fn-blink 0.9s ease-in-out infinite alternate;
}
@keyframes fn-blink {
  to {
    opacity: 0.25;
  }
}
.fn-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: fn-pulse 1.6s ease-in-out infinite alternate;
}
.fn-bob {
  animation: fn-bob 3.2s ease-in-out infinite alternate;
}
@keyframes fn-bob {
  from {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(5px);
  }
}

/* Snow, leaves, petals and bats drifting over the sidebar (behind its buttons). */
.fn-weather {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
body:not(.side-weather) .fn-weather {
  display: none;
}
.fn-wx {
  position: absolute;
  top: -24px;
  animation: fn-fall 12s linear infinite;
}
@keyframes fn-fall {
  to {
    transform: translate3d(var(--drift, 0px), 105vh, 0);
  }
}
.fn-wx::before {
  content: "";
  display: block;
}
.fn-flake::before {
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #ffffff;
  opacity: var(--o, 0.9);
  box-shadow: 0 1px 3px rgba(60, 90, 130, 0.3);
  animation: fn-sway 2.6s ease-in-out infinite alternate;
}
@keyframes fn-sway {
  from {
    transform: translateX(-7px);
  }
  to {
    transform: translateX(7px);
  }
}
.fn-leaf-fall::before,
.fn-petal::before {
  width: calc(var(--s) * 1.4);
  height: var(--s);
  border-radius: 0 80% 0 80%;
  background: var(--c);
  animation: fn-flutter var(--spin, 5s) ease-in-out infinite;
}
.fn-petal::before {
  border-radius: 80% 0 80% 0;
  opacity: 0.9;
}
@keyframes fn-flutter {
  0% {
    transform: rotate(0deg) rotateX(0deg) translateX(0);
  }
  50% {
    transform: rotate(180deg) rotateX(60deg) translateX(12px);
  }
  100% {
    transform: rotate(360deg) rotateX(0deg) translateX(0);
  }
}
.fn-mote {
  top: auto;
  bottom: -12px;
  animation-name: fn-rise;
}
.fn-mote::before {
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff3b0;
  box-shadow: 0 0 8px 2px rgba(255, 214, 90, 0.6);
  opacity: 0.75;
}
@keyframes fn-rise {
  to {
    transform: translate3d(var(--drift, 0px), -105vh, 0);
  }
}
.fn-star {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fffbe8;
  box-shadow: 0 0 5px 1px rgba(255, 248, 214, 0.55);
  animation: fn-twinkle var(--d, 2s) ease-in-out infinite alternate;
}
@keyframes fn-twinkle {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
.fn-bat {
  position: absolute;
  left: -50px;
  width: var(--s);
  color: #07040d;
  filter: drop-shadow(0 0 2px rgba(255, 170, 80, 0.45));
  animation: fn-fly 12s linear infinite;
}
.fn-bat svg {
  display: block;
  width: 100%;
  animation: fn-flap 0.3s ease-in-out infinite alternate;
}
@keyframes fn-fly {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(calc(var(--fn-side-w) * 0.3), -16px, 0);
  }
  50% {
    transform: translate3d(calc(var(--fn-side-w) * 0.6), 8px, 0);
  }
  75% {
    transform: translate3d(calc(var(--fn-side-w) * 0.9), -10px, 0);
  }
  100% {
    transform: translate3d(calc(var(--fn-side-w) + 100px), 0, 0);
  }
}
@keyframes fn-flap {
  to {
    transform: scaleY(0.35);
  }
}
.fn-sun,
.fn-moon {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
}
.fn-moon {
  top: -46px;
  right: -46px;
  width: 190px;
  height: 190px;
}
.fn-sun-rays,
.fn-sun-glow {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.fn-sun-rays {
  animation: fn-turn 50s linear infinite;
}
.fn-sun-glow {
  animation: fn-pulse 4s ease-in-out infinite alternate;
}
@keyframes fn-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fn-pulse {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1.06);
  }
}
.motion-off .fn-wx,
.motion-off .fn-bat {
  display: none;
}

/* The dimmed layer behind the sidebar is only for phones. */
.fn-scrim {
  display: none;
}

/* Main column */
.fn-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--fn-main);
}
.fn-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: calc(72px + env(safe-area-inset-top, 0px));
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px)) 6px 22px;
}
.fn-menu-btn {
  display: none !important;
}
.fn-top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.fn-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
  font-size: calc(20px * var(--fn-font));
  font-weight: 800;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--fn-accent) 30%, transparent);
  transition: transform 0.3s var(--spring), box-shadow 0.25s, filter 0.2s;
}
.fn-new .icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.6;
}
.fn-new:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--fn-accent) 36%, transparent);
}
.fn-new:active {
  transform: scale(0.95);
}
.fn-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--fn-main);
  border-radius: 50%;
  background: #e5484d;
}
.fn-busy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-accent) 12%, transparent);
  color: var(--fn-accent-text);
  font-size: calc(15px * var(--fn-font));
  font-weight: 800;
}
.fn-busy[hidden] {
  display: none;
}
.fn-spin {
  width: 16px;
  height: 16px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fn-spin 0.8s linear infinite;
}
@keyframes fn-spin {
  to { transform: rotate(360deg); }
}

.fn-page {
  flex: 1;
  min-height: 0;
  padding: 10px max(34px, env(safe-area-inset-right, 0px)) calc(60px + env(safe-area-inset-bottom, 0px)) 34px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- Home ---------- */

.fn-home {
  display: flex;
  flex-direction: column;
  max-width: 980px;
  margin: 0 auto;
  padding-top: clamp(24px, 13vh, 170px);
}
.fn-hero {
  font-family: var(--display);
  font-size: calc(clamp(32px, 4.6vw, 44px) * var(--fn-font));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}
.fn-quote {
  max-width: 680px;
  margin: 14px auto 0;
  font-size: calc(19px * var(--fn-font));
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
.fn-ask-title {
  margin: 44px 0 16px;
  font-size: calc(clamp(22px, 2.8vw, 28px) * var(--fn-font));
  font-weight: 800;
  letter-spacing: -0.01em;
}
.fn-ask {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 74px;
  padding: 0 10px 0 30px;
  border: 1.5px solid color-mix(in srgb, var(--fn-soft) 80%, var(--fn-border));
  border-radius: 16px;
  background: var(--fn-card);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fn-accent) 12%, transparent), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s, border-color 0.25s;
}
.fn-ask:focus-within {
  border-color: var(--fn-accent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--fn-accent) 20%, transparent), 0 0 0 4px color-mix(in srgb, var(--fn-accent) 12%, transparent);
}
.fn-ask input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: calc(22px * var(--fn-font));
  font-weight: 600;
}
.fn-ask input::placeholder {
  color: color-mix(in srgb, var(--fn-muted) 70%, transparent);
}
.fn-ask-expand,
.fn-ask-send {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  transition: transform 0.3s var(--spring), background-color 0.2s;
}
.fn-ask-expand .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.7;
}
.fn-ask-send {
  background: color-mix(in srgb, var(--fn-soft) 80%, var(--fn-accent) 20%);
  color: var(--fn-on-accent, #fff);
}
.fn-ask-send .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.6;
}
.fn-ask:focus-within .fn-ask-send {
  background: var(--fn-accent);
}
.fn-ask-expand:hover {
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
}
.fn-ask-send:active,
.fn-ask-expand:active {
  transform: scale(0.88);
}

.fn-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 42px;
}
.fn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 160px;
  padding: 22px 14px;
  border: 1.5px solid color-mix(in srgb, var(--fn-accent) 45%, var(--fn-border));
  border-radius: var(--fn-r);
  background: var(--fn-card);
  font-size: calc(22px * var(--fn-font));
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s var(--spring), box-shadow 0.25s;
}
.fn-card .icon {
  width: 32px;
  height: 32px;
  stroke-width: 1.7;
}
.fn-card.warm {
  border-color: #f0c983;
  background: #fff6e7;
}
.fn-card.cool {
  border-color: color-mix(in srgb, var(--fn-accent) 35%, var(--fn-border));
  background: color-mix(in srgb, var(--fn-side) 45%, var(--fn-card));
}
.fn-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}
.fn-card:active {
  transform: scale(0.97);
}
.fn-badge {
  position: absolute;
  top: 28px;
  right: calc(50% - 72px);
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-soft) 45%, transparent);
  color: color-mix(in srgb, var(--fn-accent) 60%, var(--fn-ink));
  font-size: calc(15px * var(--fn-font));
  font-weight: 800;
}
.dark-ui .fn-card.warm {
  border-color: #6b5222;
  background: #2a2214;
}

.fn-section {
  margin: 58px 0 22px;
  font-family: var(--display);
  font-size: calc(clamp(26px, 3.2vw, 32px) * var(--fn-font));
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Note cards */
.fn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--thumb, 210px) * var(--fn-scale)), 1fr));
  gap: 26px;
}
.fn-note {
  position: relative;
  min-width: 0;
}
.fn-note-open {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 7%, transparent);
  border-radius: var(--fn-r);
  background: var(--fn-card);
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s var(--spring), box-shadow 0.25s;
}
.fn-note-open:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}
.fn-note-open:active {
  transform: scale(0.98);
}
.fn-note-pic {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / min(var(--ratio), 1);
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid color-mix(in srgb, var(--fn-ink) 6%, transparent);
}
.fn-note-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.fn-note-blank {
  display: block;
  width: 100%;
  height: 100%;
}
.fn-note-dot {
  position: absolute;
  top: 18px;
  left: 14px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.fn-note-star {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #e0a100;
}
.fn-note-star .icon {
  fill: currentColor;
}
.fn-note-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px 16px;
}
.fn-note-title {
  overflow: hidden;
  font-size: calc(20px * var(--fn-font));
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fn-note-date {
  color: var(--fn-muted);
  font-size: calc(16px * var(--fn-font));
  font-weight: 700;
}
.fn-note-more {
  position: absolute;
  right: 8px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fn-muted);
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
}
.fn-note-more:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--fn-ink) 7%, transparent);
}
.fn-note.lifted .fn-note-open {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}
.fn-note.dragging {
  opacity: 0.35;
}
.fn-ghost {
  position: fixed;
  z-index: 90;
  overflow: hidden;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transform-origin: 20% 20%;
}
.fn-folder.drop-over {
  background: var(--fn-sel);
  transform: scale(1.04) translateX(6px);
}
body.note-dragging .fn-folder {
  outline: 1.5px dashed color-mix(in srgb, var(--fn-accent) 40%, transparent);
  outline-offset: -3px;
}

.fn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 50px 20px;
  border: 2px dashed var(--fn-border);
  border-radius: var(--fn-r);
  color: var(--fn-muted);
  font-size: calc(18px * var(--fn-font));
  text-align: center;
}
.fn-empty > .icon,
.fn-empty > .fn-leaf,
.fn-empty > .fn-folder-glyph {
  width: 46px;
  height: 46px;
  stroke-width: 1.4;
}
.fn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
  font-weight: 800;
  transition: transform 0.3s var(--spring);
}
.fn-pill:active {
  transform: scale(0.95);
}
.fn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--fn-muted);
  font-weight: 800;
}

/* Page headings (Notes, folders, Gallery…) */
.fn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  max-width: 1200px;
  margin: 18px auto 26px;
}
.fn-page > :not(.fn-head):not(.fn-home) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.fn-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: calc(clamp(30px, 3.8vw, 40px) * var(--fn-font));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.fn-title-icon .fn-leaf,
.fn-title-icon .fn-folder-glyph {
  width: 40px;
  height: 40px;
}
.fn-sub-line {
  margin-top: 6px;
  color: var(--fn-muted);
  font-size: calc(17px * var(--fn-font));
  font-weight: 700;
}
.fn-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1.5px solid var(--fn-border);
  border-radius: 999px;
  background: var(--fn-card);
  font-size: calc(16px * var(--fn-font));
  font-weight: 800;
  transition: transform 0.3s var(--spring), background-color 0.2s;
}
.fn-chip.on {
  border-color: var(--fn-accent);
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.fn-chip:active {
  transform: scale(0.94);
}
.fn-chip.danger,
.danger {
  color: #d13c3c;
}

/* Gallery */
.fn-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 26px 22px;
}
.fn-tpl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.fn-tpl-pic {
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s var(--spring), box-shadow 0.25s;
}
.fn-tpl-pic img {
  display: block;
  width: 100%;
  height: auto;
}
.fn-tpl:hover .fn-tpl-pic {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}
.fn-tpl:active .fn-tpl-pic {
  transform: scale(0.97);
}
.fn-tpl-name {
  font-size: calc(18px * var(--fn-font));
  font-weight: 800;
}

/* Little menus from the top bar */
.fn-menu {
  position: fixed;
  z-index: 70;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  max-width: calc(100vw - 16px);
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
  border-radius: 16px;
  background: var(--fn-card);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.fn-menu hr {
  height: 1px;
  margin: 6px 8px;
  border: 0;
  background: color-mix(in srgb, var(--fn-ink) 9%, transparent);
}
.fn-menu-title {
  padding: 8px 12px 6px;
  font-size: calc(15px * var(--fn-font));
  font-weight: 800;
  color: var(--fn-muted);
}
.fn-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: calc(17px * var(--fn-font));
  font-weight: 800;
  text-align: left;
}
.fn-menu-item .icon {
  width: 22px;
  height: 22px;
  color: var(--fn-accent-text);
}
.fn-menu-item small {
  display: block;
  color: var(--fn-muted);
  font-size: calc(13px * var(--fn-font));
  font-weight: 600;
}
.fn-menu-item:hover {
  background: color-mix(in srgb, var(--fn-accent) 10%, transparent);
}
/* Text size row in the ⋯ menu: label on the left, A− / A+ buttons on the right. */
.fn-menu-size {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 14px;
  font-size: calc(17px * var(--fn-font));
  font-weight: 800;
}
.fn-menu-size > .icon {
  width: 22px;
  height: 22px;
  color: var(--fn-accent-text);
}
.fn-menu-size > span {
  flex: 1;
}
.fn-menu-size small {
  display: block;
  color: var(--fn-muted);
  font-size: calc(13px * var(--fn-font));
  font-weight: 600;
}
.fn-menu-size button {
  width: 46px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-accent) 12%, transparent);
  color: var(--fn-accent-text);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  transition: transform 0.15s var(--spring), background 0.15s;
}
.fn-menu-size button + button {
  font-size: 19px;
}
.fn-menu-size button:active {
  transform: scale(0.9);
  background: color-mix(in srgb, var(--fn-accent) 22%, transparent);
}
.fn-bell-menu {
  width: 340px;
}
.fn-note-row {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  font-size: calc(15px * var(--fn-font));
  font-weight: 700;
}
.fn-note-row .icon {
  margin-top: 2px;
  color: var(--fn-accent-text);
}
.fn-note-row small {
  display: block;
  color: var(--fn-muted);
  font-size: calc(12px * var(--fn-font));
}
.fn-menu-empty {
  padding: 14px;
  color: var(--fn-muted);
  font-size: calc(15px * var(--fn-font));
}

/* ---------- Study and Settings inside the page ---------- */

.fn-embed .split {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.fn-embed .side {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 6%, transparent);
  border-radius: var(--fn-r);
  background: var(--fn-card);
}
.fn-embed .side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: calc(16px * var(--fn-font));
  font-weight: 800;
  opacity: 1;
  text-align: left;
  transition: background-color 0.2s;
}
.fn-embed .side-item .bicon {
  display: inline-flex;
  margin: 0;
  color: var(--fn-accent-text);
}
.fn-embed .side-item:hover {
  background: color-mix(in srgb, var(--fn-sel) 50%, transparent);
}
.fn-embed .side-item.active {
  background: var(--fn-sel);
}
.fn-embed .side-item::after {
  display: none;
}
.fn-embed .panel {
  min-width: 0;
  padding: 6px 22px 18px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 6%, transparent);
  border-radius: var(--fn-r);
  background: var(--fn-card);
}
/* Inside the page, the panel and the sections aren't scroll areas of their own: the page scrolls.
   (Older Android phones keep a swipe that starts on a scroll area that won't pass it on, so the
   page wouldn't move at all.) */
.fn-embed .panel.scroll {
  overflow: visible;
  overscroll-behavior: auto;
}
.fn-embed .side.scroll {
  overflow-y: hidden;
  overscroll-behavior: auto;
}
@media (max-width: 1180px) {
  .fn-embed .split {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .fn-embed .side {
    position: static;
    flex-direction: row;
    gap: 6px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .fn-embed .side::-webkit-scrollbar {
    display: none;
  }
  .fn-embed .side-item {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
.fn-embed .search,
.settings-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: none;
  height: 50px;
  margin: 0 0 16px;
  padding: 0 16px;
  border: 1.5px solid var(--fn-border);
  border-radius: 14px;
  background: var(--fn-card);
  color: var(--fn-muted);
}
.fn-embed .search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  font-size: calc(18px * var(--fn-font));
  font-weight: 700;
}

/* Rows of settings: label on the left, control on the right. */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  min-height: 58px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fn-ink) 7%, transparent);
  font-size: calc(17px * var(--fn-font));
  font-weight: 700;
}
.row:last-child {
  border-bottom: 0;
}
.row-label {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.row-label .bicon {
  color: var(--fn-accent-text);
}
.row-label small {
  display: block;
  margin-top: 2px;
  color: var(--fn-muted);
  font-size: 0.8em;
  font-weight: 600;
}
.row-section {
  color: var(--fn-muted);
  font-size: 0.82em;
  font-style: normal;
}
.row-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  max-width: 100%;
}
.row-val {
  color: var(--fn-muted);
}
.section-label {
  margin: 20px 0 4px;
  color: var(--fn-muted);
  font-size: calc(13px * var(--fn-font));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.empty {
  margin: 12px 0;
  color: var(--fn-muted);
  font-size: calc(16px * var(--fn-font));
  font-weight: 600;
}

/* Switches */
.toggle {
  position: relative;
  width: 52px;
  min-width: 0 !important;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 16%, transparent);
  transition: background-color 0.25s;
}
.toggle .label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.35s var(--spring);
}
.toggle.on {
  background: var(--fn-accent);
}
.toggle.on::before {
  transform: translateX(20px);
}
.pop-toggles .toggle {
  width: auto;
  height: auto;
  padding: 6px 0 6px 64px;
  background: none;
}
.pop-toggles .toggle .label {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
}
.pop-toggles .toggle::before {
  top: 50%;
  left: 3px;
  margin-top: -13px;
  z-index: 1;
}
.pop-toggles .toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 52px;
  height: 32px;
  margin-top: -16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 16%, transparent);
  transition: background-color 0.25s;
}
.pop-toggles .toggle.on::after {
  background: var(--fn-accent);
}

/* ‹ value › steppers */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
}
.stepper .val {
  min-width: 120px;
  padding: 0 6px;
  font-weight: 800;
  text-align: center;
}
.step {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fn-card);
  font-size: 1.15em;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s var(--spring);
}
.step:active {
  transform: scale(0.85);
}

/* Colour dots and theme chips */
.swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 460px;
}
.swatch {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.swatch:hover {
  transform: scale(1.12);
}
.swatch.on {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 3px var(--fn-card), 0 0 0 5px var(--fn-accent);
}
.swatch.custom {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: conic-gradient(#e05a5a, #e0c35a, #6ac46a, #5ab4e0, #8a6ae0, #e05ab4, #e05a5a);
}
.swatch.custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
}
/* Theme picker: each theme as a little Fern window in its own colours; the picked one ringed. */
.row:has(.theme-cards) {
  flex-wrap: wrap;
}
.row:has(.theme-cards) .row-ctl {
  width: 100%;
}
.theme-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 14px;
  width: 100%;
  padding: 6px 2px 4px;
}
.tc-group {
  grid-column: 1 / -1;
  margin: 6px 0 -4px;
  color: var(--fn-muted);
  font-size: calc(13px * var(--fn-font));
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 7px 7px 9px;
  border: 1.5px solid var(--fn-border);
  border-radius: 18px;
  background: var(--fn-card);
  color: var(--fn-ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.3s var(--spring), box-shadow 0.25s ease, border-color 0.25s ease;
}
.tcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--fn-ink) 14%, transparent);
}
.tcard:active {
  transform: scale(0.96);
}
.tcard.on {
  border-color: var(--fn-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fn-accent) 30%, transparent), 0 10px 24px color-mix(in srgb, var(--fn-ink) 12%, transparent);
}
.tc-win {
  display: flex;
  height: 84px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--t-main);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-ink) 12%, transparent);
}
.tc-side {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 36%;
  padding: 9px 6px;
  overflow: hidden;
  background: linear-gradient(var(--t-side), var(--t-side2));
}
.tc-side > i {
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--t-ink) 22%, transparent);
}
.tc-side > i.sel {
  height: 8px;
  margin: 0 -2px;
  background: var(--t-sel);
}
.tc-art {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 46%;
}
.tc-art svg {
  display: block;
  width: 100%;
  height: 100%;
}
.tc-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  padding: 9px 8px 8px;
}
.tc-main > b {
  width: 62%;
  height: 7px;
  border-radius: 4px;
  background: var(--t-ink);
  opacity: 0.85;
}
.tc-line {
  width: 82%;
  height: 4px;
  border-radius: 3px;
  background: var(--t-muted);
  opacity: 0.5;
}
.tc-cards {
  display: flex;
  flex: 1;
  gap: 4px;
}
.tc-cards > i {
  flex: 1;
  border-radius: 6px;
  background: var(--t-card);
  box-shadow: inset 0 0 0 1px var(--t-border), 0 1px 2px rgba(0, 0, 0, 0.08);
}
.tc-btn {
  align-self: flex-end;
  width: 38%;
  height: 9px;
  border-radius: 999px;
  background: var(--t-accent);
}
.tc-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 3px;
  font-size: calc(14px * var(--fn-font));
  font-weight: 800;
  line-height: 1.2;
}
.tc-check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fn-accent);
  color: var(--fn-on-accent);
  transform: scale(0);
  transition: transform 0.35s var(--spring);
}
.tc-check .icon {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}
.tcard.on .tc-check {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .tcard,
  .tc-check {
    transition: none;
  }
}
/* App icon picker: little Home Screen icons, the picked one ringed. */
.row:has(.icon-chips) {
  flex-wrap: wrap;
}
.row:has(.icon-chips) .row-ctl {
  width: 100%;
}
.icon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 2px;
}
.icon-chip {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  transition: transform 0.25s var(--spring), box-shadow 0.2s;
}
.icon-chip svg {
  display: block;
  width: 100%;
  height: 100%;
}
.icon-chip:active {
  transform: scale(0.92);
}
.icon-chip.on {
  box-shadow: 0 0 0 3px var(--fn-card), 0 0 0 5.5px var(--fn-accent), 0 4px 12px rgba(0, 0, 0, 0.18);
}
.text-input {
  min-width: 220px;
  padding: 10px 14px;
  border: 1.5px solid var(--fn-border);
  border-radius: 12px;
  outline: 0;
  background: var(--fn-main);
  font-weight: 700;
}
.text-input:focus {
  border-color: var(--fn-accent);
}
.walls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.big-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 12px 0;
}
.big-icon {
  display: inline-flex;
}
.big-stat .big-icon .fn-leaf,
.big-stat .big-icon .icon {
  width: 56px;
  height: 56px;
}
.big-label {
  font-family: var(--display);
  font-size: calc(26px * var(--fn-font));
  font-weight: 800;
}
.big-num {
  font-family: var(--display);
  font-size: calc(70px * var(--fn-font));
  font-weight: 800;
  line-height: 1;
}
.center-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 8px;
  font-size: calc(20px * var(--fn-font));
  font-weight: 800;
}
.small {
  font-size: calc(15px * var(--fn-font));
}
.dots span {
  display: inline-block;
  animation: fn-dot 1.2s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: 0.15s; }
.dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes fn-dot {
  0%, 60%, 100% { opacity: 0.3; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Study bits restyled for Fern */
.fn-embed .ai-go,
.fn-embed .ai-answer-actions,
.fn-embed .center-actions,
.fn-embed .quiz-next,
.fn-embed .cards-nav {
  font-size: calc(18px * var(--fn-font));
}
.fn-embed .ai-go .link,
.fn-embed .ai-answer-actions .link,
.fn-embed .center-actions .link,
.fn-embed .quiz-next .link,
.modal-options .link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
  font-weight: 800;
  transition: transform 0.3s var(--spring), filter 0.2s;
}
.fn-embed .ai-go .link .bicon,
.modal-options .link .bicon {
  margin: 0;
}
.fn-embed .ai-go .link:active,
.modal-options .link:active,
.fn-embed .center-actions .link:active {
  transform: scale(0.96);
}
.fn-embed .center-actions .link + .link,
.fn-embed .ai-answer-actions .link + .link {
  background: color-mix(in srgb, var(--fn-accent) 12%, transparent);
  color: var(--fn-accent-text);
}
.fn-embed .ai-intro {
  margin: 10px 0 6px;
  font-size: calc(17px * var(--fn-font));
  font-weight: 700;
}
.fn-embed .quiz-q,
.fn-embed .fc-text {
  font-family: var(--display);
  letter-spacing: -0.02em;
}
.fn-embed .quiz-option {
  margin: 4px 0;
  padding: 14px 16px;
  border: 1.5px solid var(--fn-border);
  border-radius: 14px;
  background: var(--fn-card);
  font-size: calc(19px * var(--fn-font));
  transition: transform 0.3s var(--spring), border-color 0.2s, background-color 0.2s;
}
.fn-embed .quiz-option:hover {
  border-color: var(--fn-accent);
}
.fn-embed .quiz-option.right {
  border-color: var(--fn-accent);
  background: color-mix(in srgb, var(--fn-accent) 10%, transparent);
}
.fn-embed .quiz-option.wrong {
  border-color: #e5484d;
  background: color-mix(in srgb, #e5484d 8%, transparent);
}
.fn-embed .fc-face {
  border: 1.5px solid var(--fn-border);
  background: var(--fn-card);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
}
.fn-embed .fc-back {
  background: color-mix(in srgb, var(--fn-side) 70%, var(--fn-card));
}
.fn-embed .chat-form {
  padding: 12px;
  border: 1.5px solid var(--fn-border);
  border-radius: 16px;
  background: var(--fn-card);
}
.fn-embed .chat-input {
  border: 0;
}
.fn-embed .msg-user {
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: color-mix(in srgb, var(--fn-accent) 12%, transparent);
  opacity: 1;
}
.fn-embed .ai-topic {
  padding: 14px 16px;
  border: 1.5px solid var(--fn-border);
  border-radius: 14px;
  background: var(--fn-main);
  font-size: calc(19px * var(--fn-font));
}

/* ---------- Dialogs ---------- */

#modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--fn-ink) 28%, transparent) !important;
}
#modal.open {
  display: flex;
}
#modal .modal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(480px, 100%);
  max-height: calc(100vh - 32px);
  padding: 30px 30px 22px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 6%, transparent) !important;
  border-radius: 24px !important;
  background: var(--fn-card) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22) !important;
  text-align: center;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#modal .modal-card::before {
  display: none;
}
#modal .modal-card.wide {
  width: min(860px, 100%);
}
.modal-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--fn-accent) 12%, transparent);
  color: var(--fn-accent-text);
}
.modal-icon .icon {
  width: 30px;
  height: 30px;
}
.modal-title {
  font-family: var(--display);
  font-size: calc(26px * var(--fn-font));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.modal-sub {
  color: var(--fn-muted);
  font-size: calc(16px * var(--fn-font));
  font-weight: 600;
  text-wrap: balance;
}
.modal-options {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}
.modal-options .link {
  justify-content: center;
}
.modal-options .link + .link {
  background: color-mix(in srgb, var(--fn-accent) 10%, transparent);
  color: var(--fn-ink);
}
.modal-options .link.danger {
  color: #d13c3c;
}
.modal-cancel {
  margin-top: 4px;
  padding: 8px 14px;
  color: var(--fn-muted);
  font-weight: 800;
}
.modal-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--fn-border);
  border-radius: 14px;
  outline: 0;
  background: var(--fn-main);
  font-size: calc(18px * var(--fn-font));
  font-weight: 700;
  text-align: left;
}
.modal-input:focus {
  border-color: var(--fn-accent);
}
.modal-area {
  font-size: calc(16px * var(--fn-font));
  resize: vertical;
}
.modal-grid {
  width: 100%;
  max-height: 50vh;
  overflow-y: auto;
  text-align: left;
}
.grid-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.grid-item {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1.5px solid var(--fn-border);
  border-radius: 999px;
  font-weight: 800;
}
.grid-item.on {
  border-color: var(--fn-accent);
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.fn-deck-count {
  align-self: flex-start;
  color: var(--fn-muted);
  font-size: calc(14px * var(--fn-font));
}
.fn-answer {
  width: 100%;
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px 4px 4px 2px;
  text-align: left;
}
.fn-ask-q {
  max-width: 720px;
}
.fe-preview {
  display: grid;
  place-items: center;
}
.fe-badge {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--fc) 14%, var(--fn-card));
}
.fe-badge .fn-leaf,
.fe-badge .fn-folder-glyph,
.fe-badge .fn-folder-glyph .icon {
  width: 50px;
  height: 50px;
}
.fe-icon .fn-leaf {
  width: 24px;
  height: 24px;
}
.paper-picker .pop-paper.on {
  background: color-mix(in srgb, var(--fn-accent) 14%, transparent);
}
.pop-chip.on {
  background: var(--fn-accent);
}

/* Passcode keypad */
.pin {
  display: flex;
  gap: 16px;
  margin: 8px 0;
}
.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fn-ink) 18%, transparent);
  transition: transform 0.25s var(--spring), background-color 0.2s;
}
.pin-dot.on {
  background: var(--fn-accent);
  transform: scale(1.15);
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 14px;
}
.key {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
  font-size: calc(30px * var(--fn-font));
  font-weight: 800;
  transition: transform 0.2s var(--spring), background-color 0.15s;
}
.key:active {
  transform: scale(0.9);
  background: color-mix(in srgb, var(--fn-accent) 22%, transparent);
}

/* Messages */
#toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.toastpos-top #toasts {
  top: calc(20px + env(safe-area-inset-top, 0px));
  bottom: auto;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 92%, var(--fn-accent));
  color: var(--fn-on-ink, #fff);
  font-size: calc(16px * var(--fn-font));
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.3s, transform 0.5s var(--spring);
}
.toast.in {
  opacity: 1;
  transform: none;
}

/* Loading and passcode screens */
.splash-screen,
.lock-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, var(--fn-side), var(--fn-main));
}
.splash-screen .title {
  font-family: var(--display);
  font-size: calc(40px * var(--fn-font));
  font-weight: 800;
  letter-spacing: -0.03em;
}
.loading {
  color: var(--fn-muted);
  font-size: calc(14px * var(--fn-font));
}
.fn-logo {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--fn-accent) 88%, #fff), color-mix(in srgb, var(--fn-accent) 62%, #000));
  box-shadow: 0 14px 36px color-mix(in srgb, var(--fn-accent) 28%, transparent);
}
.fn-splash-logo.small .fn-logo {
  width: 70px;
  height: 70px;
  border-radius: 20px;
}
/* The leaf of paper fills the whole rounded square, like the Home Screen icon. */
.fn-logo .fn-logo-leaf,
.fn-splash-logo.small .fn-logo .fn-logo-leaf,
.big-stat .big-icon .fn-logo-leaf {
  width: 100%;
  height: 100%;
}
.big-stat .fn-logo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--fn-accent) 24%, transparent);
}
.lock-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lock-time .t {
  font-family: var(--display);
}

/* ---------- The note editor, in Fern colours ---------- */

/* The toolbar: three white cards floating at the top. Back on the left, the pens in the middle
   (two rows: tools, then colours / sizes / line style), undo, redo, more, AI and pages on the right. */
.view-editor .ed .ed-top {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.fnb-card {
  display: flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 7%, transparent);
  border-radius: 16px;
  background: var(--fn-card);
  color: var(--fn-ink);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
  transition: transform 0.45s var(--spring), opacity 0.3s ease;
}
.fnb-left,
.fnb-right {
  gap: 2px;
  padding: 4px;
}
.fnb-btn,
.fnb-tool {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--fn-ink);
  transition: transform 0.25s var(--spring), background-color 0.15s;
}
.fnb-tool {
  width: 42px;
  height: 42px;
}
.fnb-btn .icon,
.fnb-tool .icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}
.fnb-btn:hover,
.fnb-tool:hover {
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
}
.fnb-btn:active,
.fnb-tool:active {
  transform: scale(0.9);
}
.fnb-btn[disabled] {
  opacity: 0.3;
  pointer-events: none;
}
.fnb-right .ed-sync:empty {
  display: none;
}
.fnb-right .ed-sync .icon {
  width: 16px;
  height: 16px;
  margin: 0 6px;
  color: var(--fn-muted);
}

/* The pens card, in the middle (drawn into .ed-tray). */
/* Centred with auto margins, not a transform: the note's opening animation moves it with transforms. */
.view-editor .ed .ed-tray {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 6;
  display: block;
  width: max-content;
  max-width: calc(100vw - 24px);
  margin: 0 auto;
  pointer-events: none;
}
.fnb-bar {
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 18px;
  zoom: var(--tray-scale, 1);
}
.fnb-row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 46px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fnb-row::-webkit-scrollbar {
  display: none;
}
.fnb-props {
  gap: 6px;
  min-height: 48px;
  padding: 0 4px;
  border-top: 1px solid color-mix(in srgb, var(--fn-ink) 7%, transparent);
}
/* The picked tool is underlined (in the pen's own colour for pens). */
.fnb-tool.on::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 2px;
  left: 11px;
  height: 3px;
  border-radius: 2px;
  background: var(--pc, var(--fn-ink));
}
.fnb-tool.on .icon {
  stroke-width: 2.2;
}
.fnb-toggle.on {
  background: color-mix(in srgb, var(--fn-accent) 15%, transparent);
  color: var(--fn-accent-text);
}
.fnb-toggle.on::after {
  display: none;
}
.fnb-sep {
  flex-shrink: 0;
  width: 1px;
  height: 26px;
  margin: 0 5px;
  background: color-mix(in srgb, var(--fn-ink) 11%, transparent);
}
.fnb-colours {
  display: flex;
  flex-shrink: 1;
  gap: 8px;
  min-width: 0;
  max-width: 300px;
  /* Room for the picked colour's ring (it scrolls, so anything outside would be cut off). */
  padding: 6px 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fnb-colours::-webkit-scrollbar {
  display: none;
}
.fnb-colour {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s var(--spring), box-shadow 0.15s;
}
/* A finger-sized target round each dot, filling the gaps between them. */
.fnb-colour::after,
.swatch::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}
/* The toolbar's rows scroll sideways when they don't fit (on a phone): a soft fade at an edge
   shows there are more tools or colours that way. */
.fnb-row.fade-r,
.fnb-colours.fade-r {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
}
.fnb-row.fade-l,
.fnb-colours.fade-l {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
}
.fnb-row.fade-l.fade-r,
.fnb-colours.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
/* On a phone: bigger colour dots for fingers, on a line of their own (next to the sizes there was
   only room for two). */
@media (max-width: 759px) {
  .fnb-colour,
  .swatch {
    width: 32px;
    height: 32px;
  }
  .fnb-props:has(> .fnb-colours) {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .fnb-props > .fnb-colours {
    flex: 1 0 100%;
    order: -1;
    max-width: none;
  }
  .fnb-props > .fnb-colours + .fnb-sep,
  .fnb-props > .fnb-sep:has(+ .fnb-colours) {
    display: none;
  }
}
.fnb-colour.on {
  box-shadow: 0 0 0 2.5px var(--fn-card), 0 0 0 4.5px var(--c), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.fnb-colour:active {
  transform: scale(0.88);
}
.fnb-colour-more {
  background: conic-gradient(#ff5f5f, #ffd43b, #51cf66, #3bc9db, #4c6ef5, #cc5de8, #ff5f5f);
}
.fnb-colour-more .icon {
  display: none;
}
.fnb-sizes {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
}
.fnb-size {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}
.fnb-size span {
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: color-mix(in srgb, var(--fn-ink) 80%, transparent);
}
.fnb-size.on {
  background: color-mix(in srgb, var(--fn-accent) 10%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fn-accent) 70%, transparent);
}
.fnb-style {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 0 6px 0 8px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--fn-ink);
}
.fnb-style:hover {
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
}
.fnb-squiggle {
  width: 46px;
  height: 16px;
}
.fnb-style .icon {
  width: 15px;
  height: 15px;
  opacity: 0.55;
}
.fnb-chips {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}
.fnb-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
  color: var(--fn-ink);
  font-size: calc(14px * var(--fn-font));
  font-weight: 700;
  white-space: nowrap;
}
.fnb-chip .icon {
  width: 17px;
  height: 17px;
}
.fnb-chip.on {
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.fnb-chip.danger {
  color: #d64545;
}
.fnb-bold {
  justify-content: center;
  width: 34px;
  padding: 0;
  font-family: Georgia, serif;
  font-size: 17px;
}
.fnb-shapes {
  gap: 0;
}
.fnb-hint {
  padding: 0 12px;
  color: var(--fn-muted);
  font-size: calc(14px * var(--fn-font));
  font-weight: 600;
  white-space: nowrap;
}
.no-tray-colors .fnb-colours,
.no-tray-sizes .fnb-sizes {
  display: none;
}

/* While writing, the toolbar slides up out of the way; the handle brings it back. */
.view-editor .ed-top.tucked .fnb-card,
.view-editor.top-tucked .ed-tray .fnb-bar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - 30px));
}

/* Narrower screens (an iPad held upright): the pens go under the two corner cards. */
@media (max-width: 1060px) {
  .view-editor .ed .ed-tray {
    top: calc(66px + env(safe-area-inset-top, 0px));
  }
}

/* Panels look like the toolbar: solid white cards. (position: fixed again, because the glass style
   would otherwise make them position: relative and squash them into the page.) */
.view-editor .ed .ed-popover {
  position: fixed;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
  border-radius: 18px;
  background: var(--fn-card);
  color: var(--fn-ink);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.view-editor .ed .ed-popover::before {
  display: none;
}
.view-editor .ed .ed-popover.pop-style,
.view-editor .ed .ed-popover.pop-insert,
.view-editor .ed .ed-popover.pop-tools {
  width: min(270px, calc(100vw - 20px));
}
.pop-styles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0 6px;
}
.pop-line {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
  color: var(--fn-ink);
  font-weight: 700;
  font-size: calc(15px * var(--fn-font));
}
.pop-line .fnb-squiggle {
  width: 58px;
  height: 18px;
}
.pop-line.on {
  background: color-mix(in srgb, var(--fn-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--fn-accent);
}

/* The handle that brings the top bar back: big and clear enough to find and tap. The glass
   toolbar style makes its panels position: relative, which used to push the handle off the
   right edge of the screen, so it's pinned here with a more specific rule. */
.view-editor .ed .ed-top > .ed-top-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 96px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 10%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-card) 94%, transparent);
  color: var(--fn-accent-text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.view-editor .ed-top-handle::after {
  content: "";
  position: absolute;
  inset: -12px -16px;
}
.view-editor .ed-top-handle .icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}
.view-editor .ed-top.tucked .ed-top-handle {
  opacity: 1;
}
.ed-pageinfo,
.ed-loading .loading {
  font-style: normal;
}
.ed-popover {
  font-style: normal;
}
.pop-title {
  font-family: var(--display);
  letter-spacing: -0.01em;
}

/* ---------- Small screens: the sidebar slides in from the left ---------- */

@media (max-width: 759px) {
  .fn {
    grid-template-columns: 1fr;
  }
  .fn-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(320px, 86vw);
    transform: translateX(-105%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  }
  .fn-drawer-open .fn-side {
    transform: none;
  }
  .fn-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .fn-drawer-open .fn-scrim {
    opacity: 1;
    pointer-events: auto;
  }
  .fn-drawer-peek .fn-scrim {
    pointer-events: none;
  }
  .fn-menu-btn {
    display: grid !important;
  }
  .fn-page {
    padding-left: 18px;
    padding-right: 18px;
  }
  .fn-cards {
    grid-template-columns: 1fr;
  }
  .fn-card {
    flex-direction: row;
    min-height: 74px;
  }
  .fn-card br {
    display: none;
  }
  .fn-badge {
    position: static;
  }
  .fn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .fn-new span {
    display: none;
  }
  .fn-new {
    padding: 0 14px;
  }
}

/* Movement follows the Animations switch. */
.motion-off *,
.motion-off *::before,
.motion-off *::after {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}

/* ---------- Assignments: rows, folder tabs and the "New assignment" steps ---------- */

.fn-section-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.fn-link.small {
  font-size: calc(15px * var(--fn-font));
}
.fn-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 2px 0 20px;
  padding: 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
}
.fn-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fn-muted);
  font-size: calc(16px * var(--fn-font));
  font-weight: 800;
  transition: background-color 0.2s, color 0.2s;
}
.fn-tab .icon {
  width: 18px;
  height: 18px;
}
.fn-tab span {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 9%, transparent);
  font-size: calc(13px * var(--fn-font));
}
.fn-tab.on {
  background: var(--fn-card);
  color: var(--fn-ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.fn-tab.on span {
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}

.as-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.as-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 10px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
  border-radius: 16px;
  background: var(--fn-card);
  transition: opacity 0.2s;
}
.as-row.done {
  opacity: 0.55;
}
.as-row.done .as-title {
  text-decoration: line-through;
}
.as-check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--fn-ink) 25%, transparent);
  border-radius: 50%;
  background: none;
  color: #fff;
  transition: transform 0.25s var(--spring), background-color 0.2s;
}
.as-check .icon {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}
.as-row.done .as-check {
  border-color: var(--fn-accent);
  background: var(--fn-accent);
}
.as-check:active {
  transform: scale(0.85);
}
.as-open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.as-tile {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ac) 16%, transparent);
  color: var(--ac);
}
.as-tile .icon {
  width: 22px;
  height: 22px;
}
.as-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.as-title {
  overflow: hidden;
  font-size: calc(17px * var(--fn-font));
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.as-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fn-muted);
  font-size: calc(14px * var(--fn-font));
  font-weight: 700;
}
.as-meta .icon {
  width: 14px;
  height: 14px;
}
.as-kind-tag {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: calc(12px * var(--fn-font));
  font-weight: 800;
}
.as-kind-tag.homework {
  background: color-mix(in srgb, #3d7be0 15%, transparent);
  color: color-mix(in srgb, #3d7be0 60%, var(--fn-ink));
}
.as-kind-tag.test {
  background: color-mix(in srgb, #e5484d 15%, transparent);
  color: color-mix(in srgb, #e5484d 62%, var(--fn-ink));
}
.as-due {
  flex-shrink: 0;
  color: var(--fn-muted);
  font-size: calc(14px * var(--fn-font));
  font-weight: 800;
}
.as-row.late .as-due {
  color: #d13c3c;
}
/* The bin at the end of a row. */
.as-del {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fn-muted);
  transition: color 0.15s, background-color 0.15s, transform 0.25s var(--spring);
}
.as-del .icon {
  width: 18px;
  height: 18px;
}
.as-del:hover {
  background: color-mix(in srgb, #d13c3c 10%, transparent);
  color: #d13c3c;
}
.as-del:active {
  transform: scale(0.85);
}
.as-del-ask {
  display: none;
}
/* Tapped once: "Delete?" in red, to tap again. */
.as-del.sure {
  display: flex;
  gap: 5px;
  width: auto;
  margin-right: -4px;
  padding: 0 12px;
  border-radius: 999px;
  background: #d13c3c;
  color: #fff;
  font-size: calc(13px * var(--fn-font));
  font-weight: 800;
  align-items: center;
}
.as-del.sure .icon {
  width: 15px;
  height: 15px;
}
.as-del.sure .as-del-ask {
  display: inline;
}

/* The steps */
#modal .modal-card.as-modal {
  width: min(720px, 100%);
  text-align: left;
}
.as-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.as-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.as-top .modal-title {
  margin: 0;
}
.as-dots {
  display: flex;
  gap: 6px;
}
.as-dots span {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
  color: var(--fn-muted);
  font-size: calc(13px * var(--fn-font));
  font-weight: 800;
}
.as-dots span.done {
  color: var(--fn-accent-text);
}
.as-dots span.on {
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.as-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 300px;
}
.as-body .modal-input {
  width: 100%;
  margin: 0;
}
.as-scroll {
  max-height: 46vh;
  overflow-y: auto;
}
.as-head {
  margin: 6px 0 2px;
  color: var(--fn-muted);
  font-size: calc(13px * var(--fn-font));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.as-head span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.as-subjects,
.as-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.as-subject,
.as-folder {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 10px;
  border: 1.5px solid color-mix(in srgb, var(--ac, var(--fn-ink)) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ac, var(--fn-ink)) 7%, var(--fn-card));
  font-size: calc(15px * var(--fn-font));
  font-weight: 800;
  transition: transform 0.25s var(--spring);
}
.as-subject .icon,
.as-folder .icon,
.as-folder .fn-leaf {
  width: 18px;
  height: 18px;
  color: var(--ac, var(--fn-accent));
}
.as-folder .fn-folder-glyph {
  width: 20px;
  height: 20px;
}
.as-subject.on,
.as-folder.on {
  border-color: var(--ac, var(--fn-accent));
  background: var(--ac, var(--fn-accent));
  color: #fff;
}
.as-subject.on .icon,
.as-folder.on .icon {
  color: #fff;
}
.as-subject:active,
.as-folder:active {
  transform: scale(0.94);
}
.as-other {
  border-style: dashed;
}
.as-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ac) 10%, transparent);
}
.as-preview .as-tile {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--ac);
  color: #fff;
}
.as-preview .as-tile .icon {
  width: 28px;
  height: 28px;
}
.as-preview b {
  display: block;
  font-size: calc(19px * var(--fn-font));
}
.as-preview small {
  color: var(--fn-muted);
  font-weight: 700;
}
.as-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
}
.as-icon {
  display: grid;
  place-items: center;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-ink) 5%, transparent);
}
.as-icon .icon,
.as-icon .fn-leaf {
  width: 22px;
  height: 22px;
}
.as-icon.on {
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.as-colours {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.as-colour {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.as-colour.on {
  box-shadow: 0 0 0 3px var(--fn-card), 0 0 0 5px var(--fn-ink);
}
.as-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.as-kind {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  border: 2px solid color-mix(in srgb, var(--fn-ink) 10%, transparent);
  border-radius: 18px;
  background: var(--fn-card);
  text-align: left;
}
.as-kind .icon {
  width: 28px;
  height: 28px;
  color: var(--fn-accent-text);
}
.as-kind b {
  font-size: calc(18px * var(--fn-font));
}
.as-kind small {
  color: var(--fn-muted);
  font-weight: 700;
}
.as-kind.on {
  border-color: var(--fn-accent);
  background: color-mix(in srgb, var(--fn-accent) 10%, var(--fn-card));
}
.as-when {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.as-when label {
  display: flex;
  flex-direction: column;
}
.as-apple {
  align-self: flex-start;
}
.as-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.as-nav .link {
  min-width: 120px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
}
.as-back {
  background: color-mix(in srgb, var(--fn-ink) 7%, transparent);
}
.as-next {
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.as-next[disabled] {
  opacity: 0.4;
}

/* ---------- The Calendar page ---------- */

.cal {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 22px;
  align-items: start;
}
.cal-month,
.cal-day {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
  border-radius: 22px;
  background: var(--fn-card);
}
.cal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cal-bar h2 {
  flex: 1;
  font-family: var(--display);
  font-size: calc(22px * var(--fn-font));
  text-align: center;
}
.cal-week,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-week span {
  padding: 4px 0;
  color: var(--fn-muted);
  font-size: calc(13px * var(--fn-font));
  font-weight: 800;
  text-align: center;
}
.cal-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 84px;
  padding: 6px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-ink) 3%, transparent);
  text-align: left;
  overflow: hidden;
  transition: background-color 0.15s, transform 0.2s var(--spring);
}
.cal-cell.other {
  opacity: 0.4;
}
.cal-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: calc(14px * var(--fn-font));
  font-weight: 800;
}
.cal-cell.today .cal-num {
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.cal-cell.on {
  background: color-mix(in srgb, var(--fn-accent) 14%, transparent);
  box-shadow: inset 0 0 0 2px var(--fn-accent);
}
.cal-cell:active {
  transform: scale(0.96);
}
.cal-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cal-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 1px 5px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ac) 18%, transparent);
  color: color-mix(in srgb, var(--ac) 45%, var(--fn-ink));
  font-size: calc(11px * var(--fn-font));
  font-weight: 800;
}
.cal-pill > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-pill .icon {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}
.cal-pill.done {
  opacity: 0.5;
  text-decoration: line-through;
}
.cal-pill.apple {
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
  color: var(--fn-ink);
  font-weight: 700;
}
.cal-pill.apple i {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac);
}
.cal-more {
  color: var(--fn-muted);
  font-size: calc(11px * var(--fn-font));
  font-weight: 800;
}
.cal-day {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cal-day-head h2 {
  font-family: var(--display);
  font-size: calc(20px * var(--fn-font));
}
.cal-today-tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
  font-size: calc(12px * var(--fn-font));
  font-weight: 800;
}
.cal-day .as-row {
  padding: 6px 10px 6px 8px;
}
.cal-event {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-left: 4px solid var(--ac);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ac) 8%, transparent);
}
.cal-time {
  flex-shrink: 0;
  width: 92px;
  color: var(--fn-muted);
  font-size: calc(13px * var(--fn-font));
  font-weight: 800;
}
.cal-etext b {
  display: block;
  font-size: calc(15px * var(--fn-font));
}
.cal-etext small {
  color: var(--fn-muted);
  font-weight: 700;
}
.cal-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  color: var(--fn-muted);
  font-weight: 700;
}
.cal-add {
  align-self: flex-start;
}
.cal-sync {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fn-accent) 9%, transparent);
  color: var(--fn-ink);
  font-weight: 800;
  text-align: left;
}
.cal-sync > .icon {
  flex-shrink: 0;
  color: var(--fn-accent-text);
}
.cal-sync span {
  flex: 1;
}
.cal-sync small {
  display: block;
  color: var(--fn-muted);
  font-weight: 600;
}
.cal-sync.bad > .icon {
  color: #d13c3c;
}
@media (max-width: 1050px) {
  .cal {
    grid-template-columns: 1fr;
  }
  .cal-cell {
    min-height: 64px;
  }
}

/* ---------- The "Connect Apple Calendar" box ---------- */

#modal .modal-card.cc-modal {
  width: min(560px, 100%);
}
.cc-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 6px;
  padding: 14px 16px 14px 34px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--fn-accent) 8%, transparent);
  font-size: calc(15px * var(--fn-font));
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}
.cc-open {
  display: inline-flex;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--fn-card);
  color: var(--fn-accent-text);
  font-weight: 800;
}
.cc-open .label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cc-modal .modal-input {
  width: 100%;
}
.cc-error {
  color: #d13c3c;
  font-size: calc(14px * var(--fn-font));
  font-weight: 700;
  text-align: left;
}
.cc-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-accent) 10%, transparent);
  color: var(--fn-accent-text);
  font-weight: 800;
}
.cc-status.bad {
  background: color-mix(in srgb, #d13c3c 10%, transparent);
  color: #d13c3c;
}

/* The month takes the whole width; a day's list opens in a pop-up instead of a box beside it. */
.cal {
  grid-template-columns: 1fr;
}
.cal-cell {
  min-height: 96px;
}
.cal-pill {
  font-size: calc(12px * var(--fn-font));
}
.cal-apple.busy .icon {
  animation: fn-turn 1s linear infinite;
}
.cal-apple.bad {
  border-color: #d13c3c;
  color: #d13c3c;
}
#modal .modal-card.cal-day-card {
  width: min(540px, 100%);
  text-align: left;
}
.cal-day-pop {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.cal-day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 55vh;
  overflow-y: auto;
}
.cal-day-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
@media (max-width: 1050px) {
  .cal-cell {
    min-height: 70px;
  }
}

/* ---------- The slim sidebar (just icons) and the picture along the bottom ---------- */

.fn {
  transition: grid-template-columns 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.fn-side-top {
  justify-content: space-between;
  margin-right: 0;
}
.fn-side-toggle .icon {
  transition: transform 0.4s var(--spring);
}
.side-mini .fn {
  grid-template-columns: 78px 1fr;
}
.side-mini .fn-side-scroll {
  padding-right: 10px;
  padding-left: 10px;
}
.side-mini .fn-side-top {
  flex-direction: column;
  gap: 4px;
  height: auto;
  margin: 0 0 12px;
}
.side-mini .fn-side-toggle .icon {
  transform: rotate(180deg);
}
.side-mini .fn-search {
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  padding: 0;
  cursor: pointer;
}
.side-mini .fn-search input {
  display: none;
}
.side-mini .fn-item {
  justify-content: center;
  min-height: 54px;
  padding: 10px 0;
}
.side-mini .fn-item-label,
.side-mini .fn-folders-head span,
.side-mini .fn-side-empty {
  display: none;
}
.side-mini .fn-folders-head {
  justify-content: center;
  margin: 8px 0 4px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--fn-ink) 10%, transparent);
}
.side-mini .fn-side .fn-art,
.side-mini .fn-side .fn-weather,
.art-page .fn-side .fn-art,
.art-page .fn-side .fn-weather {
  display: none;
}

/* The page-wide picture and weather only show with the slim sidebar (or "Move the picture to the
   main screen", .art-page). They sit behind the page, so notes and text always stay on top and
   easy to read. */
.fn-strip,
.fn-weather-page {
  display: none;
}
.side-mini .fn-weather-page,
.art-page .fn-weather-page {
  display: block;
}
.side-mini .fn-strip,
.art-page .fn-strip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: block;
  /* The picture is 8 times wider than tall. On a wider strip it would be blown up and its plants'
     tops cut off, so a wide screen gets a taller strip instead (whole plants). */
  height: auto;
  min-height: clamp(110px, 21vh, 200px);
  max-height: 320px;
  aspect-ratio: 8 / 1;
  max-width: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.6) 18%, #000 38%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.6) 18%, #000 38%);
}
.fn-strip-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body:not(.side-art) .fn-strip {
  display: none !important;
}
.side-mini .fn-top,
.side-mini .fn-page,
.art-page .fn-top,
.art-page .fn-page {
  position: relative;
  z-index: 1;
}
/* Room at the end of the page, so the last notes can scroll up above the picture. */
.side-mini.side-art .fn-page,
.art-page.side-art .fn-page {
  padding-bottom: calc(clamp(110px, 21vh, 200px) + 30px);
}
/* Phones use the slide-in sidebar instead. */
@media (max-width: 759px) {
  .side-mini .fn {
    grid-template-columns: 1fr;
  }
  .fn-side-toggle {
    display: none !important;
  }
}

/* ---------- Recording lectures: the pill, the little circle, and the play-back bar ---------- */

.rec-pill-host {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 45;
  transform: translateX(-50%);
  pointer-events: none;
}
.rec-pill-host:has(.rec-bubble) {
  right: calc(22px + env(safe-area-inset-right, 0px));
  left: auto;
  transform: none;
}
.rec-pill-host > * {
  pointer-events: auto;
}
body.recording #toasts {
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.rec-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(660px, calc(100vw - 32px));
  padding: 7px 7px 7px 18px;
  border-radius: 999px;
  background: rgba(22, 26, 24, 0.94);
  color: #fff;
  font-size: calc(16px * var(--fn-font));
  font-weight: 700;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.rec-dot {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff4d4f;
  animation: rec-pulse 1.4s ease-in-out infinite;
}
.rec-pill.paused .rec-dot {
  background: #f5b13d;
  animation: none;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.6); }
  50% { box-shadow: 0 0 0 7px rgba(255, 77, 79, 0); }
}
.rec-time {
  flex: none;
  min-width: 46px;
  font-variant-numeric: tabular-nums;
}
.rec-level {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
  height: 22px;
}
.rec-level i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: #ff6b6b;
  transform: scaleY(0.15);
  transition: transform 0.12s linear;
}
.rec-pill.paused .rec-level i {
  background: rgba(255, 255, 255, 0.35);
}
.rec-caption {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.78;
}
.rec-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 0.3s var(--spring), background 0.2s;
}
.rec-btn:active {
  transform: scale(0.9);
}
.rec-btn .icon {
  width: 20px;
  height: 20px;
}
.rec-pill .rec-done {
  width: auto;
  padding: 0 16px 0 12px;
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.rec-pill.finishing {
  justify-content: center;
  width: auto;
  padding: 14px 24px;
}
.rec-pill.finishing .icon {
  color: #7fe0b8;
  animation: rec-breathe 1.2s ease-in-out infinite;
}
@keyframes rec-breathe {
  50% { opacity: 0.4; }
}
.rec-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: 50%;
  background: rgba(22, 26, 24, 0.94);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  animation: rec-ring 1.8s ease-out infinite;
}
.rec-bubble .icon {
  width: 22px;
  height: 22px;
  color: #ff5d5d;
}
.rec-bubble.paused {
  animation: none;
}
.rec-bubble.paused .icon {
  color: #f5b13d;
}
.rec-bubble .rec-time {
  min-width: 0;
}
@keyframes rec-ring {
  0% { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(255, 77, 79, 0.5); }
  70%, 100% { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 0 0 14px rgba(255, 77, 79, 0); }
}
@media (max-width: 600px) {
  .rec-caption,
  .rec-level {
    display: none;
  }
  .rec-pill {
    width: auto;
  }
}

/* The mic in a note's toolbar, and the Home card. */
.fnb-rec.rec-on .icon {
  color: #e5484d;
  animation: rec-breathe 1.4s ease-in-out infinite;
}
.fn-card.rec {
  border-color: #f1b5b0;
  background: #fff2f0;
}
.fn-card.rec .icon {
  color: #d9473f;
}
.dark-ui .fn-card.rec {
  border-color: #6e322d;
  background: #2b1715;
}
@media (min-width: 760px) and (max-width: 1100px) {
  .fn-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fn-card {
    min-height: 120px;
  }
}

/* Playing a recording back, at the bottom of a note. */
.rec-player-host {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(720px, calc(100% - 32px));
  transform: translateX(-50%);
  transition: bottom 0.4s var(--spring);
}
body.recording .rec-player-host {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
.rec-player {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
  border-radius: 999px;
  background: var(--fn-card);
  color: var(--fn-ink);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.rec-player .rec-btn {
  width: 38px;
  height: 38px;
  background: transparent;
}
.rec-player .rec-btn.on {
  background: color-mix(in srgb, var(--fn-accent) 16%, transparent);
  color: var(--fn-accent-text);
}
.rec-player .rec-play {
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.rec-player .rec-speed,
.rec-player .rec-which {
  width: auto;
  min-width: 42px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 800;
}
.rec-seek {
  flex: 1;
  min-width: 50px;
  accent-color: var(--fn-accent);
}
.rec-at {
  min-width: 40px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  opacity: 0.65;
}
.rec-words {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 38vh;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
  border-radius: 20px;
  background: var(--fn-card);
  color: var(--fn-ink);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1);
}
.rec-line {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: calc(15px * var(--fn-font));
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.rec-line span {
  padding-top: 2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
}
.rec-line.on {
  background: color-mix(in srgb, var(--fn-accent) 14%, transparent);
}
.rec-none {
  margin: 0;
  padding: 12px;
  opacity: 0.7;
}
@media (max-width: 600px) {
  .rec-player .rec-at:last-of-type,
  .rec-player [data-back],
  .rec-player [data-ahead] {
    display: none;
  }
}

/* The full-screen page of a lecture's words, while recording. */
.rec-full {
  position: fixed;
  inset: 0;
  z-index: 47;
  display: flex;
  flex-direction: column;
  background: var(--fn-main);
  color: var(--fn-ink);
}
body.rec-full-open .rec-pill-host {
  display: none;
}
.rec-full-top {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) 14px calc(22px + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
  font-size: calc(17px * var(--fn-font));
  font-weight: 800;
}
.rec-full-top .rec-dot.paused {
  background: #f5b13d;
  animation: none;
}
.rec-full-top .rec-level i {
  background: #e5484d;
}
.rec-full-title {
  flex: 1;
  color: var(--fn-muted);
  font-weight: 700;
}
.rec-full-top .rec-btn {
  background: color-mix(in srgb, var(--fn-ink) 7%, transparent);
}
.rec-full-top .rec-done {
  width: auto;
  padding: 0 16px 0 12px;
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.rec-full-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rec-full-words {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 820px;
  margin: 0 auto;
  padding: 34px 28px calc(120px + env(safe-area-inset-bottom, 0px));
}
.rec-full-said {
  display: contents;
}
.rec-para {
  position: relative;
  margin: 0;
  padding-left: 66px;
  font-size: calc(21px * var(--fn-font));
  line-height: 1.55;
  opacity: 0.5;
  transition: opacity 0.4s;
}
.rec-para.latest,
.rec-para.now {
  opacity: 1;
}
.rec-para.latest {
  font-size: calc(24px * var(--fn-font));
}
.rec-para.now {
  font-size: calc(26px * var(--fn-font));
  font-weight: 600;
}
.rec-para.rough {
  color: var(--fn-muted);
  font-style: italic;
  font-weight: 500;
}
.rec-para-t {
  position: absolute;
  top: 0.35em;
  left: 0;
  font-size: 13px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--fn-muted);
}
.rec-para.now .rec-para-t {
  color: #e5484d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rec-writing {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.rec-writing b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fn-accent);
  animation: rec-breathe 1s ease-in-out infinite;
}
.rec-writing b:nth-child(2) {
  animation-delay: 0.2s;
}
.rec-writing b:nth-child(3) {
  animation-delay: 0.4s;
}
.rec-full-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 12vh;
  color: var(--fn-muted);
  font-size: calc(19px * var(--fn-font));
  text-align: center;
}
.rec-full-empty .icon {
  width: 44px;
  height: 44px;
  color: var(--fn-accent-text);
  animation: rec-breathe 1.4s ease-in-out infinite;
}
.rec-full-empty p {
  max-width: 440px;
  margin: 0;
}
.rec-full-now {
  position: absolute;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(22, 26, 24, 0.92);
  color: #fff;
  font: inherit;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
  cursor: pointer;
}
.rec-full-now[hidden] {
  display: none;
}
.rec-full-now .icon {
  width: 18px;
  height: 18px;
}
@media (max-width: 600px) {
  .rec-full-top .rec-level {
    display: none;
  }
  .rec-para {
    padding-left: 0;
    padding-top: 20px;
  }
  .rec-para-t {
    top: 0;
  }
}

/* Words the eraser is rubbing out disappear at once, but keep their place until it lifts. */
.ed-erased {
  color: transparent;
}

/* ---------- Lecture extras: bookmarks, the words panel's search and summary, translation ---------- */

.rec-pill .rec-mark .icon,
.rec-full-top .rec-mark .icon,
.rec-player .rec-mark .icon {
  color: #f2b01e;
}
.rec-full-top .rec-lang {
  width: auto;
  padding: 0 12px;
}
.rec-full-top .rec-lang.on {
  background: color-mix(in srgb, var(--fn-accent) 16%, transparent);
  color: var(--fn-accent-text);
}
.rec-full-top .rec-lang span {
  font-size: 14px;
}
.rec-star {
  margin-right: 4px;
  color: #f2b01e;
  font-style: normal;
}
.rec-trans {
  display: block;
  margin-top: 6px;
  color: var(--fn-accent-text);
  font-size: 0.82em;
  font-style: normal;
  font-weight: 500;
}
.rec-para .rec-trans {
  font-size: 0.8em;
}
.rec-seek-wrap {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 50px;
}
.rec-seek-wrap .rec-seek {
  width: 100%;
}
.rec-tick {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #f2b01e;
  box-shadow: 0 0 0 2px var(--fn-card);
  pointer-events: none;
}
.rec-line em {
  font-style: normal;
}
.rec-line mark,
.fn-heard mark {
  border-radius: 3px;
  background: #ffe58a;
  color: inherit;
}
.rec-find {
  position: sticky;
  top: -8px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -8px -8px 6px;
  padding: 10px 14px;
  background: var(--fn-card);
  border-bottom: 1px solid color-mix(in srgb, var(--fn-ink) 7%, transparent);
}
.rec-find .icon {
  width: 17px;
  height: 17px;
  opacity: 0.55;
}
.rec-find input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px;
}
.rec-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.rec-tabs button {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.rec-tabs button.on {
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.rec-summary {
  padding: 4px 10px 10px;
  font-size: calc(15px * var(--fn-font));
  line-height: 1.5;
}
.rec-summary h4 {
  margin: 14px 0 6px;
  color: var(--fn-accent-text);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rec-summary ul {
  margin: 0;
  padding-left: 20px;
}
.rec-summary dt {
  margin-top: 6px;
  font-weight: 800;
}
.rec-summary dd {
  margin: 0 0 0 14px;
}
.fn-menu-scroll {
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

/* Search results: moments in lectures where it was said. */
.fn-section-title {
  margin: 34px 0 12px;
  font-family: var(--display);
  font-size: calc(22px * var(--fn-font));
}
.fn-heard {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fn-heard-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
  border-radius: 16px;
  background: var(--fn-card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fn-heard-row > .icon {
  flex: none;
  color: var(--fn-accent-text);
}
.fn-heard-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-accent) 14%, transparent);
  color: var(--fn-accent-text);
}
.fn-heard-text {
  flex: 1;
  min-width: 0;
}
.fn-heard-text small {
  margin-left: 6px;
  color: var(--fn-muted);
  font-variant-numeric: tabular-nums;
}
.fn-heard-text > span {
  display: block;
  margin-top: 2px;
  color: var(--fn-muted);
  font-size: 0.92em;
}

/* Homework the teacher set, offered as Assignments. */
.hw-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 6px 0 4px;
  text-align: left;
}
.hw-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 10%, transparent);
  border-radius: 14px;
}
.hw-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--fn-accent);
}
.hw-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.hw-text small {
  color: var(--fn-muted);
}
.hw-date {
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 14%, transparent);
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
}

/* ---------- Stickers ---------- */
.pop-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.pop-word {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--wc);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.25s var(--spring);
}
.pop-word:active,
.pop-emoji button:active {
  transform: scale(0.9);
}
.pop-emoji {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.pop-emoji button {
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  background: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s var(--spring), background 0.2s;
}
.pop-emoji button:hover {
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
}
.ed-popover.pop-stickers {
  width: min(380px, calc(100vw - 24px));
}

/* ---------- Text boxes: checklists, highlight, tables; the Text menu's style buttons ---------- */
.ed-check {
  display: inline-block;
  min-width: 1.05em;
  color: var(--fn-accent, #1f9e76);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ed-check:active {
  transform: scale(1.3);
}
.ed-done {
  opacity: 0.55;
  text-decoration: line-through;
}
.ed-hl {
  border-radius: 3px;
  background: linear-gradient(transparent 48%, var(--hl) 48%, var(--hl) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ed-text.ed-table {
  white-space: normal;
}
.ed-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ed-table td {
  min-width: 2em;
  height: 1.6em;
  padding: 0.25em 0.45em;
  border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
  vertical-align: top;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.ed-table tr:first-child td {
  background: color-mix(in srgb, currentColor 7%, transparent);
  font-weight: 700;
}
.ed-table-bar {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: auto;
  zoom: 1;
}
.ed-table-bar button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 10%, transparent);
  border-radius: 999px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: 700 14px var(--font);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.ed-table-bar button:last-child {
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.ed-table-bar .icon {
  width: 15px;
  height: 15px;
}
.pop-tstyles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pop-ts {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
  color: inherit;
  cursor: pointer;
}
.pop-ts.on {
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.pop-ts .icon {
  width: 19px;
  height: 19px;
}
.pop-ts-gap {
  width: 8px;
}
.pop-hls {
  display: flex;
  gap: 8px;
}
.pop-hl {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid color-mix(in srgb, var(--fn-ink) 12%, transparent);
  border-radius: 50%;
  background: var(--c);
  color: var(--fn-muted);
  cursor: pointer;
}
.pop-hl.on {
  border-color: var(--fn-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fn-accent) 35%, transparent);
}
.pop-hl .icon {
  width: 15px;
  height: 15px;
}

/* ---------- The page sorter ---------- */
.ps-sheet {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: flex;
  flex-direction: column;
  background: var(--fn-main);
  color: var(--fn-ink);
}
.ps-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 26px 10px;
}
.ps-top h2 {
  margin: 0;
  font-family: var(--display);
  font-size: calc(28px * var(--fn-font));
}
.ps-top p {
  margin: 2px 0 0;
  color: var(--fn-muted);
}
.ps-close {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fn-ink) 7%, transparent);
  color: inherit;
  cursor: pointer;
}
.ps-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  align-content: start;
  gap: 22px;
  padding: 16px 26px calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  touch-action: pan-y;
}
.ps-page {
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ps-page.dragging {
  z-index: 2;
  transition: none;
}
.ps-page.dragging .ps-thumb {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
.ps-thumb {
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.ps-page.on .ps-thumb {
  outline: 3px solid var(--fn-accent);
  outline-offset: 3px;
}
.ps-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}
.ps-foot span {
  flex: 1;
}
.ps-foot button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fn-muted);
  cursor: pointer;
}
.ps-foot .icon {
  width: 17px;
  height: 17px;
}
.ps-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
  border: 2px dashed color-mix(in srgb, var(--fn-ink) 18%, transparent);
  border-radius: 10px;
  background: none;
  color: var(--fn-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- A note beside the one being written in ---------- */
.ed.split .ed-viewport {
  right: min(42%, 540px);
}
.sn-pane {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  width: min(42%, 540px);
  border-left: 1px solid color-mix(in srgb, var(--fn-ink) 10%, transparent);
  border-top-left-radius: 18px;
  background: var(--fn-card);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.06);
  color: var(--fn-ink);
}
.sn-top {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 10px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
}
.sn-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sn-top button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.sn-top .icon {
  width: 18px;
  height: 18px;
}
.sn-pages {
  flex: 1;
  padding: 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.sn-page {
  display: block;
  width: calc(100% * var(--sn-zoom, 1));
  margin: 0 auto 14px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.sn-loading {
  color: var(--fn-muted);
  text-align: center;
}
@media (max-width: 760px) {
  .ed.split .ed-viewport {
    right: 0;
    bottom: 45%;
  }
  .sn-pane {
    top: auto !important;
    width: 100%;
    height: 45%;
    border-left: 0;
    border-top-right-radius: 18px;
  }
}

/* ---------- The zoom box ---------- */
.zb-strip {
  position: absolute;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  z-index: 8;
  display: flex;
  height: min(32vh, 270px);
  overflow: hidden;
  border: 2px solid var(--fn-accent);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.12);
}
.zb-canvas {
  flex: 1;
  min-width: 0;
  height: 100%;
  touch-action: none;
}
.zb-tools {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  align-content: center;
  gap: 6px;
  padding: 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--fn-card);
}
.zb-tools button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
  color: var(--fn-ink);
  cursor: pointer;
}
.zb-tools button[data-zb="close"] {
  background: color-mix(in srgb, #e5484d 14%, transparent);
  color: #c53030;
}
.zb-target {
  position: absolute;
  z-index: 2;
  border: 2px solid var(--fn-accent, #1f9e76);
  border-radius: 6px;
  background: color-mix(in srgb, var(--fn-accent, #1f9e76) 8%, transparent);
  pointer-events: none;
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.ed.zooming .rec-player-host {
  bottom: calc(min(32vh, 270px) + 26px);
}

/* Little previews of the newer paper types. */
.paper-todo {
  background-image: repeating-linear-gradient(to bottom, transparent 0 6px, var(--l) 6px 7px),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(120, 160, 205, 0.8) 2px 5px, transparent 5px 7px);
  background-size: 100% 100%, 4px 100%;
  background-position: 0 0, 4px 0;
  background-repeat: no-repeat;
}
.paper-planner,
.paper-storyboard {
  background-image: linear-gradient(to right, transparent 18px, var(--l) 18px 19px, transparent 19px),
    repeating-linear-gradient(to bottom, transparent 0 12px, var(--l) 12px 13px);
}
.paper-timetable,
.paper-month {
  background-image: linear-gradient(var(--l) 1px, transparent 1px), linear-gradient(90deg, var(--l) 1px, transparent 1px);
  background-size: 7px 8px;
  background-position: 0 6px;
}
.paper-handwriting {
  background-image: repeating-linear-gradient(to bottom, transparent 0 5px, var(--l) 5px 6px, transparent 6px 9px, rgba(120, 160, 205, 0.3) 9px 10px, transparent 10px 13px, var(--l) 13px 14px, transparent 14px 18px);
}
.paper-hex {
  background-image: radial-gradient(circle, transparent 2.2px, var(--l) 2.4px 2.9px, transparent 3.1px);
  background-size: 6px 5px;
}


.ed.split .rec-player-host {
  left: calc((100% - min(42%, 540px)) / 2);
  width: min(720px, calc(100% - min(42%, 540px) - 32px));
}
@media (max-width: 760px) {
  .ed.split .rec-player-host {
    bottom: calc(45% + 12px);
    left: 50%;
    width: calc(100% - 24px);
  }
}

/* ---------- Your own wallpaper ---------- */
#wallpaper {
  position: fixed;
  inset: -20px;
  z-index: -1;
  display: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(var(--wp-blur, 0px));
  pointer-events: none;
}
body.has-wallpaper #wallpaper {
  display: block;
}
body.wpfit-fit #wallpaper {
  background-size: contain;
}
body.wpfit-center #wallpaper {
  background-size: auto;
}
body.wpfit-tile #wallpaper {
  background-repeat: repeat;
  background-size: auto;
}
/* (The page itself is see-through, so the picture shows; the colour behind it stays on <html>.) */
body.has-wallpaper {
  background: transparent;
}
body.has-wallpaper .fn-main {
  background: color-mix(in srgb, var(--fn-main) calc(var(--wp-fade, 0.55) * 100%), transparent);
}
/* (Behind the whole screen instead, so the sidebar's rounded corners show the page's colour too.) */
body.has-wallpaper:not(.wall-side) .fn {
  background: color-mix(in srgb, var(--fn-main) calc(var(--wp-fade, 0.55) * 100%), transparent);
}
body.has-wallpaper:not(.wall-side) .fn-main {
  background: transparent;
}
body.has-wallpaper.wall-side .fn-side {
  background: color-mix(in srgb, var(--fn-side) calc(var(--wp-fade, 0.55) * 100% + 15%), transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body.has-wallpaper.wall-where-all .view-editor .ed-viewport {
  background: color-mix(in srgb, var(--desk, #e9e9e6) calc(var(--wp-fade, 0.55) * 100%), transparent);
}
body.has-wallpaper .fn-note-thumb,
body.has-wallpaper .fn-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.walls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.wall {
  width: 56px;
  height: 40px;
  border: 2px solid transparent;
  border-radius: 10px;
  background-position: center;
  background-size: cover;
  cursor: pointer;
}
.wall.on {
  border-color: var(--fn-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fn-accent) 35%, transparent);
}
.wall-none {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
  color: var(--fn-muted);
  font: 700 12px var(--font);
}

/* ---------- Study with a friend (and the warnings before saving a .fern file) ---------- */
.sy-modal .modal-card,
#modal .modal-card.sy-modal {
  width: min(520px, 100%);
}
.fr-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
}
.sy-label {
  margin: 6px 0 0;
  color: var(--fn-muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sy-hint {
  margin: 0;
  color: var(--fn-muted);
  line-height: 1.45;
}
.sy-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ff-warn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.ff-warn li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, #f59e0b 10%, var(--fn-card));
  line-height: 1.4;
}
.ff-warn li > .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #b45309;
}
.ff-warn span {
  color: var(--fn-muted);
  font-size: 14px;
}
.ff-warn b {
  display: block;
  margin-bottom: 1px;
  color: var(--fn-ink);
  font-size: 15px;
}
.fr-code {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.fr-code span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 58px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-accent) 12%, transparent);
  color: var(--fn-accent-text);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
}
.fr-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--fn-muted);
  font-weight: 700;
}
.fr-who.on {
  color: var(--fn-accent-text);
}
.fr-pill {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: calc(var(--x, 0.5) * 100%);
  z-index: 31;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 7px 7px 14px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
  border-radius: 999px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: 700 14px var(--font);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transform: translateX(-50%);
  transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.25s;
}
.fr-pill.dragging {
  cursor: grabbing;
  transition: none;
  transform: translateX(-50%) scale(1.05);
}
.fr-pill > .icon {
  width: 17px;
  height: 17px;
  color: var(--fn-accent-text);
}
.fr-x {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fn-ink) 7%, transparent);
  color: var(--fn-muted);
  cursor: pointer;
}
.fr-x .icon {
  width: 14px;
  height: 14px;
}
/* Tucked against a side: just a little tab with the dot and the people icon. */
.fr-pill.docked {
  gap: 6px;
  padding: 10px 12px;
}
.fr-pill.docked .fr-name,
.fr-pill.docked .fr-x {
  display: none;
}
.fr-pill.docked[data-dock="left"] {
  left: 0;
  border-left: 0;
  border-radius: 0 999px 999px 0;
  transform: none;
}
.fr-pill.docked[data-dock="right"] {
  left: 100%;
  border-right: 0;
  border-radius: 999px 0 0 999px;
  transform: translateX(-100%);
}
.fr-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f5b13d;
}
.fr-dot.on {
  background: #2ec27e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #2ec27e 25%, transparent);
}
body:has(.rec-player-host) .fr-pill {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Mistakes in notes: the little pill ---------- */
.mk-pbtn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 14%, transparent);
  border-radius: 999px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: 800 calc(14px * var(--fn-font)) var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--spring);
}
.mk-pbtn:active {
  transform: scale(0.95);
}
.mk-pbtn .icon {
  width: 16px;
  height: 16px;
}
.mk-pbtn-go {
  border-color: transparent;
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}

/* The small pill while writing. */
.mk-pill-host {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 46;
  transform: translateX(-50%);
}
body:has(.rec-player-host) .mk-pill-host,
body:has(.fr-pill) .mk-pill-host {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
body.recording .mk-pill-host {
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
body:has(.zb-strip) .mk-pill-host {
  bottom: calc(min(32vh, 270px) + 30px);
}
.mk-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(640px, calc(100vw - 24px));
  padding: 8px 8px 8px 10px;
  border: 1px solid color-mix(in srgb, #f08a2c 35%, var(--fn-border));
  border-radius: 999px;
  background: var(--fn-card);
  color: var(--fn-ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}
.mk-pill-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, #f08a2c 16%, transparent);
  color: color-mix(in srgb, #f08a2c 75%, var(--fn-ink));
}
.mk-pill-icon .icon {
  width: 19px;
  height: 19px;
}
.mk-pill-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: calc(14px * var(--fn-font));
  line-height: 1.3;
}
.mk-pill-text b i {
  color: var(--fn-muted);
  font-style: normal;
  font-weight: 600;
}
.mk-pill-text > span {
  overflow: hidden;
  color: var(--fn-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mk-pill-text s {
  color: color-mix(in srgb, #e5484d 70%, var(--fn-ink));
}
.mk-pill-text em {
  color: color-mix(in srgb, #2e9e62 70%, var(--fn-ink));
  font-style: normal;
  font-weight: 800;
}
@media (max-width: 600px) {
  .mk-pill {
    flex-wrap: wrap;
    border-radius: 20px;
  }
  .mk-pill-text {
    flex: 1 1 60%;
  }
}

.mk-pill.done {
  border-color: color-mix(in srgb, var(--fn-accent) 40%, var(--fn-border));
}
.mk-pill.done .mk-pill-icon {
  background: color-mix(in srgb, var(--fn-accent) 16%, transparent);
  color: var(--fn-accent-text);
}


/* ---------- You: the picture and name (sidebar tab, welcome screen) ---------- */

.pf-av {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--fn-accent);
  color: var(--fn-on-accent);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
}
.pf-av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-av b {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}
.pf-av .icon {
  display: block;
  width: 52%;
  height: 52%;
  margin: 0;
  vertical-align: 0;
}
.pf-av-big {
  width: 88px;
  height: 88px;
  font-size: 34px;
}

/* The tab at the bottom of the sidebar: frosted, floating over the picture. */
.pf-tab-host {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 3;
}
.pf-tab {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 12px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--fn-border) 80%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--fn-card) 74%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
  color: var(--fn-ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s var(--spring), padding 0.3s ease, border-radius 0.3s ease;
}
.pf-tab:active {
  transform: scale(0.97);
}
.pf-tab-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.pf-tab-name {
  overflow: hidden;
  font-size: calc(15px * var(--fn-font));
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-tab-text small {
  color: var(--fn-muted);
  font-size: calc(12px * var(--fn-font));
  font-weight: 600;
}
.pf-tab > .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--fn-muted);
}
/* The slim sidebar: just the picture. */
.side-mini .pf-tab-host {
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.side-mini .pf-tab {
  width: auto;
  padding: 5px;
  border-radius: 50%;
}
.side-mini .pf-tab .pf-av {
  width: 44px;
  height: 44px;
}
.side-mini .pf-tab-text,
.side-mini .pf-tab > .icon {
  display: none;
}
/* Room for the tab when there's no picture below the links. */
.side-mini .fn-side-scroll,
.art-page .fn-side-scroll,
body:not(.side-art) .fn-side-scroll {
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}

/* The welcome screen, the first time Fern opens. */
.pf-welcome {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--fn-side2) 0%, var(--fn-side) 100%);
  color: var(--fn-ink);
  animation: pf-fade 0.5s ease both;
  transition: opacity 0.45s ease;
}
.pf-welcome.out {
  opacity: 0;
  pointer-events: none;
}
.pf-w-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* (Taller on very wide screens, so the plants' tops aren't cut off: see .fn-strip.) */
  height: auto;
  min-height: min(34vh, 300px);
  max-height: 420px;
  aspect-ratio: 8 / 1;
  /* (Without this the shape stretches it sideways to 8 times its height, and the welcome screen
     scrolls sideways on a narrow screen.) */
  max-width: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
}
.pf-w-art .fn-strip-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pf-w-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(420px, 100%);
  padding: 36px 30px 18px;
  border: 1px solid color-mix(in srgb, var(--fn-border) 70%, transparent);
  border-radius: 30px;
  background: color-mix(in srgb, var(--fn-card) 86%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.14);
  text-align: center;
  animation: pf-pop 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-welcome.out .pf-w-card {
  transform: translateY(-12px) scale(0.97);
  transition: transform 0.45s ease;
}
.pf-w-title {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: calc(30px * var(--fn-font));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.pf-w-sub {
  margin: 8px 0 0;
  color: var(--fn-muted);
  font-size: calc(16px * var(--fn-font));
  line-height: 1.4;
}
.pf-w-step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 24px;
}
.pf-w-step[hidden] {
  display: none;
}
.pf-w-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 20px;
  border: 1px solid var(--fn-border);
  border-radius: 999px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: inherit;
  font-size: calc(16px * var(--fn-font));
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s var(--spring), box-shadow 0.2s ease;
}
.pf-w-btn:active {
  transform: scale(0.97);
}
.pf-w-btn svg,
.pf-w-btn .icon {
  width: 20px;
  height: 20px;
}
/* Google's own look for its button: white, grey edge, the coloured G. */
.pf-w-google {
  border-color: #dadce0;
  background: #fff;
  color: #1f1f1f;
  font-family: Roboto, system-ui, sans-serif;
  font-weight: 600;
}
.pf-w-go {
  border: none;
  background: var(--fn-accent);
  color: var(--fn-on-accent);
}
/* "Other": Microsoft, a passkey or an email code (and a name, or not now), with their little logos. */
.pf-w-other .pf-w-minis {
  display: flex;
  gap: 4px;
  margin-left: 4px;
}
.pf-w-btn .pf-w-minis svg {
  width: 17px;
  height: 17px;
}

/* Windows opened from the welcome screen (the "Other" list, email, passkeys) show above it. */
body:has(.pf-welcome) #modal {
  z-index: 60;
}

/* The list of ways to sign in (profile.js): Fern Cloud's rows, smaller, inside a window. */
.pf-ways {
  gap: 10px;
  margin: 6px 0 0;
}
.pf-ways .fc-choice {
  min-height: 72px;
  padding: 12px 16px;
  border-radius: 18px;
}
.pf-ways .fc-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}
.pf-ways .fc-logo svg,
.pf-ways .fc-logo .icon {
  width: 26px;
  height: 26px;
}
.pf-ways .fc-choice-text b {
  font-size: 17px;
}
.pf-ways .fc-choice-text small {
  font-size: 14px;
}
.pf-ways .pf-quiet {
  min-height: 60px;
  border-style: dashed;
  background: transparent;
}
.pf-ways .pf-quiet .fc-logo {
  border: none;
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
  color: var(--fn-muted);
}
/* NFC cards everywhere but Android: there, greyed out (nfc.js). */
.pf-ways .pf-way-off {
  cursor: default;
  opacity: 0.55;
  filter: grayscale(1);
}
.pf-only {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--fn-ink) 9%, transparent);
  color: var(--fn-muted);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  vertical-align: 2px;
}
/* Waiting for a card: the phone pulses. (A set number of times, not forever: closing a window
   finishes every animation in it, which a never-ending one can't do.) */
.nfc-wave {
  animation: nfc-wave 1.6s ease-in-out 40;
}
@keyframes nfc-wave {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fn-accent) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--fn-accent) 0%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nfc-wave {
    animation: none;
  }
}
.pf-ways-none {
  margin: 4px 0;
  color: var(--fn-muted);
  font-size: 15px;
  text-align: center;
}
/* Signing in with an email code. */
.pf-code {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4em;
  text-align: center;
}
.pf-mail-more {
  margin: 10px 0 0;
  color: var(--fn-muted);
  font-size: 14px;
  text-align: center;
}
.pf-w-input {
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--fn-border);
  border-radius: 16px;
  background: var(--fn-main);
  color: var(--fn-ink);
  font: inherit;
  font-size: 17px;
  text-align: center;
  outline: none;
}
.pf-w-input:focus {
  border-color: var(--fn-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fn-accent) 22%, transparent);
}
/* Choosing a picture: upload a photo or pick a drawing (avatars.js). */
.pf-pic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 4px;
}
.pf-pic-now .pf-av {
  animation: pf-pic-in 0.4s cubic-bezier(0.3, 1.5, 0.6, 1) backwards;
}
.pf-pic-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--fn-border);
  border-radius: 999px;
  background: var(--fn-main);
  color: var(--fn-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.pf-chip:hover {
  border-color: color-mix(in srgb, var(--fn-accent) 50%, var(--fn-border));
}
.pf-chip:active {
  transform: scale(0.96);
}
.pf-chip .icon {
  width: 17px;
  height: 17px;
  color: var(--fn-accent-text);
}
.pf-chip[aria-expanded="true"] {
  border-color: var(--fn-accent);
  background: color-mix(in srgb, var(--fn-accent) 12%, var(--fn-main));
}
.av-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--fn-ink) 4%, transparent);
}
.av-panel[hidden] {
  display: none;
}
.av-colours {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.av-colour {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--fn-ink) 10%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.av-colour:hover {
  transform: scale(1.12);
}
.av-colour.on {
  box-shadow: 0 0 0 2px var(--fn-card), 0 0 0 4px var(--fn-accent);
}
.av-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  max-height: 172px;
  overflow-y: auto;
}
.av-pick {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--av-bg);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, background 0.25s;
  animation: pf-pic-in 0.35s cubic-bezier(0.3, 1.5, 0.6, 1) backwards;
  animation-delay: calc(var(--i, 0) * 12ms);
}
.av-pick:hover {
  transform: scale(1.1) rotate(-4deg);
}
.av-pick.on {
  border-color: var(--fn-accent);
}
@keyframes pf-pic-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
/* Setting up: three steps in one window (profile.js). */
#modal .modal-card.pf-setup {
  width: min(500px, 100%);
}
.pf-dots {
  display: flex;
  gap: 6px;
}
.pf-dots i {
  width: 22px;
  height: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--fn-ink) 12%, transparent);
  transition: background 0.3s, width 0.3s;
}
.pf-dots i.on {
  width: 30px;
  background: var(--fn-accent);
}
.pf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.pf-step[hidden] {
  display: none;
}
.pf-handle {
  width: 100%;
  border-radius: 16px;
  background: var(--fn-main);
  font-size: 18px;
}
.pf-handle:focus-within {
  border-color: var(--fn-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fn-accent) 22%, transparent);
}
.pf-hint {
  margin: -4px 0 0;
  color: var(--fn-muted);
  font-size: 13.5px;
  line-height: 1.4;
}
.pf-hint.bad {
  color: #d03b40;
  font-weight: 650;
}
.pf-ticks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}
.pf-tick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border: 1.5px solid var(--fn-border);
  border-radius: 16px;
  background: var(--fn-main);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.pf-tick:has(input:checked) {
  border-color: color-mix(in srgb, var(--fn-accent) 55%, var(--fn-border));
  background: color-mix(in srgb, var(--fn-accent) 8%, var(--fn-main));
}
.pf-tick:has(input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fn-accent) 30%, transparent);
}
.pf-tick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pf-tick-dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border: 2px solid color-mix(in srgb, var(--fn-ink) 25%, transparent);
  border-radius: 50%;
  color: #fff;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.pf-tick-dot .icon {
  width: 15px;
  height: 15px;
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.3, 1.6, 0.6, 1);
}
.pf-tick input:checked + .pf-tick-dot {
  border-color: var(--fn-accent);
  background: var(--fn-accent);
}
.pf-tick input:checked + .pf-tick-dot .icon {
  opacity: 1;
  transform: none;
}
.pf-tick-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-tick-text b {
  font-size: 15.5px;
}
.pf-tick-text small {
  color: var(--fn-muted);
  font-size: 13px;
  line-height: 1.4;
}
.pf-later {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fn-accent) 9%, transparent);
  color: var(--fn-ink);
}
/* Signing out without an account: tick every warning first (profile.js). */
#modal .modal-card.pf-leave {
  width: min(500px, 100%);
}
.pf-leave-safe {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fn-accent) 9%, transparent);
  color: var(--fn-ink);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
}
.pf-leave-safe .icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--fn-accent-text);
}
.pf-leave-go[aria-disabled="true"] {
  opacity: 0.45;
}
/* Friends or the Art Wall switched off: a friendly way back in. */
.pf-off {
  gap: 12px;
}
.pf-off-art {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 54px;
  line-height: 1;
  animation: pf-wave 2.4s ease-in-out infinite;
}
.pf-off small {
  color: var(--fn-muted);
  font-size: 13px;
}
@keyframes pf-wave {
  0%, 60%, 100% {
    transform: none;
  }
  70% {
    transform: rotate(-12deg) scale(1.06);
  }
  85% {
    transform: rotate(10deg) scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pf-off-art {
    animation: none;
  }
}
/* A friend's picture, if they show it (buddies.js), in Friends and on their Art Wall art. */
.bd-av.bd-av-pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.aw-by-pic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .pf-pic-now .pf-av,
  .av-pick {
    animation: none;
  }
}
.pf-w-back {
  align-self: center;
  margin-top: 4px;
  padding: 8px 14px;
  border: none;
  background: none;
  color: var(--fn-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pf-w-back[hidden] {
  display: none;
}
/* A slider in Settings (Sidebar corners). */
.set-slider {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.set-slider input {
  width: 150px;
  margin: 0;
  accent-color: var(--fn-accent);
  cursor: pointer;
}
.set-slider .val {
  min-width: 40px;
  color: var(--fn-muted);
  font-size: 14px;
  text-align: right;
}
/* A quiet line that notes stay on this device. */
.pf-w-warn {
  margin: 2px 6px 6px;
  color: var(--fn-muted);
  font-size: calc(12px * var(--fn-font));
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  opacity: 0.85;
}
.pf-w-warn .icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
}
/* At the new address: bringing notes over from the old one (move.js). */
.pf-w-move {
  margin: 0 4px;
  padding: 10px 12px;
  border: 1.5px dashed color-mix(in srgb, var(--fn-accent) 45%, var(--fn-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--fn-accent) 6%, transparent);
  color: var(--fn-ink);
  font: inherit;
  font-size: calc(13.5px * var(--fn-font));
  line-height: 1.35;
  cursor: pointer;
}
.pf-w-move b {
  color: var(--fn-accent-text, var(--fn-accent));
}
.pf-w-privacy {
  margin-top: 2px;
  color: var(--fn-muted);
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
}
.row-link {
  color: var(--fn-accent-text);
  font-weight: 700;
  text-decoration: none;
}
.pf-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}
.pf-edit .modal-input {
  width: 100%;
  margin-top: 6px;
  text-align: center;
}
@keyframes pf-fade {
  from {
    opacity: 0;
  }
}
@keyframes pf-pop {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pf-welcome,
  .pf-w-card {
    animation: none;
  }
}

/* ---------- Subscriptions (Settings → Subscriptions, plans.js) ---------- */

.pl-head {
  margin: 4px 2px 16px;
}
.pl-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--display);
  font-size: calc(26px * var(--fn-font));
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pl-soon {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-accent) 16%, var(--fn-card));
  color: color-mix(in srgb, var(--fn-accent) 70%, var(--fn-ink));
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.pl-sub {
  margin: 6px 0 0;
  color: var(--fn-muted);
  line-height: 1.45;
}
.pl-sub b {
  color: var(--fn-ink);
}
/* Side by side when there's room for all three, otherwise one under another (never two and one). */
.pl-wrap {
  container-type: inline-size;
}
.pl-cards {
  display: grid;
  align-items: start;
  gap: 14px;
}
@container (min-width: 640px) {
  .pl-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--fn-border);
  border-radius: 24px;
  background: var(--fn-card);
}
/* The plan you're on stands out. */
.pl-card.mine {
  border: 2px solid var(--fn-accent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--fn-accent) 18%, transparent);
}
.pl-unlimited {
  border-color: color-mix(in srgb, #e0a22c 45%, var(--fn-border));
  background: linear-gradient(165deg, color-mix(in srgb, #f2b33d 16%, var(--fn-card)), var(--fn-card) 55%);
}
.pl-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--fn-accent);
  color: var(--fn-on-accent);
  font-size: 12px;
  font-weight: 700;
}
.pl-plant {
  width: 64px;
  height: 78px;
  margin: -4px 0 4px -6px;
}
.pl-plant svg {
  width: 100%;
  height: 100%;
}
.pl-name {
  margin: 0;
  font-family: var(--display);
  font-size: calc(21px * var(--fn-font));
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pl-price {
  margin: 2px 0 0;
  color: var(--fn-muted);
}
.pl-price b {
  color: var(--fn-ink);
  font-size: calc(28px * var(--fn-font));
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pl-tagline {
  min-height: 2.8em;
  margin: 4px 0 14px;
  color: var(--fn-muted);
  font-size: calc(14px * var(--fn-font));
  line-height: 1.4;
}
.pl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: var(--fn-accent);
  color: var(--fn-on-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pl-unlimited .pl-btn {
  background: linear-gradient(135deg, #f5c04e, #d98a1c);
  color: #3b2405;
}
.pl-card .pl-now {
  background: var(--fn-sel);
  color: var(--fn-ink);
  cursor: default;
}
.pl-btn .icon,
.pl-list .icon {
  width: 16px;
  height: 16px;
}
.pl-plus {
  margin: 16px 0 0;
  font-size: calc(13px * var(--fn-font));
  font-weight: 700;
}
.pl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: calc(14px * var(--fn-font));
  line-height: 1.35;
}
.pl-plus + .pl-list {
  margin-top: 8px;
}
.pl-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pl-list .icon {
  flex: none;
  margin-top: 1px;
  color: var(--fn-accent);
}
.pl-unlimited .pl-list .icon {
  color: #d98a1c;
}
.pl-list li.soon {
  color: var(--fn-muted);
}
.pl-list li.soon .icon {
  color: var(--fn-muted);
}
.pl-soon-tag {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--fn-sel);
  color: var(--fn-ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  vertical-align: 1px;
}
.pl-card .pl-back {
  background: var(--fn-sel);
  color: var(--fn-ink);
}
.pl-small {
  margin: 16px 2px 4px;
  color: var(--fn-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---------- Things a plan doesn't include (plans.js): greyed out with a lock ---------- */

.pl-lock {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 8%, transparent);
  color: var(--fn-muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.pl-lock .icon {
  width: 12px;
  height: 12px;
}
.pl-locked-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
[data-row-locked] .row-label {
  opacity: 0.55;
}
.side-item.locked .label,
.side-item.locked .bicon {
  opacity: 0.45;
}
.side-item .lock {
  display: inline-flex;
  margin-left: auto;
  color: var(--fn-muted);
}
.side-item .lock .icon {
  width: 14px;
  height: 14px;
}
.tcard.locked .tc-win {
  opacity: 0.45;
  filter: grayscale(0.6);
}
/* The lock sits on the little window's corner, so long theme names still fit. */
.tc-lock {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}
.tc-lock .pl-lock {
  background: color-mix(in srgb, var(--fn-card) 94%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--fn-ink) 16%, transparent);
  color: var(--fn-ink);
}
.tc-name > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.fe-colours .swatch.locked,
.fe-icons .fe-icon.locked {
  position: relative;
  opacity: 0.3;
  filter: grayscale(0.7);
}
.fe-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fn-accent) 10%, var(--fn-card));
  font-size: 13px;
  text-align: left;
}
.fe-more[hidden] {
  display: none;
}
.fe-more > .icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--fn-accent);
}
.fe-more span {
  flex: 1;
  min-width: 160px;
}
.ai-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-accent) 10%, var(--fn-card));
  color: var(--fn-muted);
  font-size: 13px;
  font-weight: 700;
}
.ai-left[hidden] {
  display: none;
}
.ai-left.low {
  background: color-mix(in srgb, #e5484d 12%, var(--fn-card));
  color: #b42318;
}
.ai-left .icon {
  width: 14px;
  height: 14px;
}

/* ---------- Fern Cloud (fcloud.js) ---------- */

.fc-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 16px;
}
.fc-space {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}
.fc-space-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 9%, transparent);
}
.fc-space-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fn-accent);
}
.fc-space small {
  color: var(--fn-muted);
  font-size: 13px;
}
.fc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.fc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--fn-border);
  border-radius: 16px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fc-item:hover {
  border-color: color-mix(in srgb, var(--fn-accent) 45%, var(--fn-border));
}
.fc-item-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-accent) 12%, var(--fn-card));
  color: var(--fn-accent);
}
.fc-item-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fc-item-text b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-item-text small {
  color: var(--fn-muted);
  font-size: 13px;
}
.fc-tag {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 7%, transparent);
  color: var(--fn-muted);
  font-size: 12px;
  font-weight: 700;
}
.fc-tag.mine {
  background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-card));
  color: color-mix(in srgb, var(--fn-accent) 70%, var(--fn-ink));
}
.fc-empty p b {
  font-size: 16px;
}
.fc-empty-logo svg {
  width: 76px;
  height: 76px;
}
.fc-empty .fc-switch {
  margin-top: 4px;
}
/* Setting it up: where the notes go */
.fc-where {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin: 40px auto 0;
}
.fc-where-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
  color: var(--fn-muted);
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
}
.fc-where-head b {
  color: var(--fn-ink);
  font-size: 24px;
  line-height: 1.25;
}
.fc-choice {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 92px;
  padding: 18px 22px;
  border: 1.5px solid var(--fn-border);
  border-radius: 20px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.fc-choice:hover {
  border-color: color-mix(in srgb, var(--fn-accent) 55%, var(--fn-border));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--fn-ink) 8%, transparent);
}
.fc-choice:active {
  transform: scale(0.99);
}
.fc-choice > .icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--fn-muted);
}
.fc-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border: 1px solid var(--fn-border);
  border-radius: 16px;
  background: #fff;
}
.fc-logo svg {
  width: 36px;
  height: 36px;
}
.fc-logo-fern svg {
  width: 50px;
  height: 50px;
}
.fc-choice-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.fc-choice-text b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 19px;
}
.fc-choice-text small {
  color: var(--fn-muted);
  font-size: 15px;
  line-height: 1.45;
}
.fc-rec {
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-card));
  color: color-mix(in srgb, var(--fn-accent) 70%, var(--fn-ink));
  font-size: 12px;
  font-weight: 700;
}
.fc-needs {
  background: color-mix(in srgb, #e0a100 18%, var(--fn-card));
  color: color-mix(in srgb, #b07a00 80%, var(--fn-ink));
}
.fc-choice-setup .fc-logo {
  opacity: 0.6;
}
@media (max-width: 600px) {
  .fc-choice {
    gap: 14px;
    padding: 14px 16px;
  }
  .fc-logo {
    width: 50px;
    height: 50px;
  }
  .fc-choice-text b {
    font-size: 17px;
  }
  .fc-choice-text small {
    font-size: 14px;
  }
}
.fc-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -6px 0 14px;
  color: var(--fn-accent);
  font-size: 13px;
  font-weight: 600;
}
.fc-switch .icon {
  width: 15px;
  height: 15px;
}
.fc-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  margin: 6px 0;
  overflow-y: auto;
  text-align: left;
}
.fc-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--fn-border);
  border-radius: 12px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.fc-pick-row > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-pick-row small {
  color: var(--fn-muted);
  font-size: 12px;
}
.fc-pick-row .icon,
.fc-pick-row .fn-leaf {
  flex: none;
  width: 20px;
  height: 20px;
}
.fc-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
.fc-view-title {
  margin: 6px 0 0;
  font-weight: 800;
  text-align: left;
}
.fc-view-page {
  width: 100%;
  border: 1px solid var(--fn-border);
  border-radius: 10px;
  background: #fff;
}
.fc-opts {
  margin: 8px 0 4px;
  text-align: left;
}
.fc-opts .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* "Uploading to Fern Cloud": a small pill at the bottom, with how far it's got and Stop. */
.fc-pill {
  --p: 0%;
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--fn-border);
  border-radius: 999px;
  background: var(--fn-card);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  color: var(--fn-ink);
  font-size: 13px;
  font-weight: 700;
  /* (translate, not transform: the pop-in animation sets transform, which would undo the centring.) */
  translate: -50% 0;
  animation: tr-in 0.3s ease-out both;
}
.fc-pill > .icon {
  width: 16px;
  height: 16px;
  color: var(--fn-accent);
}
.fc-bar {
  width: 70px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 10%, transparent);
}
.fc-bar i {
  display: block;
  width: var(--p);
  height: 100%;
  border-radius: inherit;
  background: var(--fn-accent);
  transition: width 0.3s ease;
}
.fc-pill.done .fc-bar {
  display: none;
}
.fc-stop {
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #e5484d 12%, var(--fn-card));
  color: #b42318;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.pl-locked-link {
  opacity: 0.55;
}

/* Apple Calendar on a computer or Android: a small round button with an apple. */
.cal-apple-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--fn-border);
  border-radius: 50%;
  background: var(--fn-card);
  color: var(--fn-ink);
  cursor: pointer;
}
.cal-apple-logo {
  width: 17px;
  height: 17px;
}

/* The text box being typed in: a grip to move it, a corner to resize it. */
.ed-tframe {
  position: absolute;
  z-index: 3;
  outline: 1.5px dashed color-mix(in srgb, var(--fn-accent) 70%, transparent);
  outline-offset: 4px;
  pointer-events: none;
}
.ed-tgrip,
.ed-tsize {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
}
.ed-tgrip {
  top: -18px;
  left: -18px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fn-accent);
  color: var(--fn-on-accent);
  cursor: move;
}
.ed-tgrip .icon {
  width: 14px;
  height: 14px;
}
.ed-tsize {
  right: -10px;
  bottom: -10px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--fn-accent);
  border-radius: 4px;
  background: var(--fn-card);
  cursor: nwse-resize;
}

/* Notes: Recently deleted, after the sort buttons, a little apart from them. */
.fn-chip-trash {
  margin-left: 8px;
}

/* ---------- Your plan, easy to see (plans.js, planwelcome.js) ---------- */

/* The badge: 🌸 Fern Bloom, 🌳 Fern Unlimited, in the theme's colours. */
.pl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fn-accent) 35%, transparent);
  color: color-mix(in srgb, var(--fn-accent) 70%, var(--fn-ink));
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
/* The ring round your picture (Settings → Appearance), in the theme's colour. */
.pf-ring .pf-av {
  box-shadow: 0 0 0 2px var(--fn-card), 0 0 0 4px var(--fn-accent);
}
.pf-tab small .pl-badge {
  padding: 1px 8px;
  font-size: 11px;
}
/* Subscriptions: the buttons under the title, gifts, codes, and Manage my subscription. */
.pl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.gf-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.gf-chip {
  padding: 8px 14px;
  border: 1.5px solid var(--fn-border);
  border-radius: 999px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.gf-chip.on {
  border-color: var(--fn-accent);
  background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-card));
}
.gf-total {
  margin: 4px 0 6px;
  color: var(--fn-muted);
  font-weight: 700;
  text-align: center;
}
.gf-total s {
  margin-right: 6px;
}
.gf-code-big {
  margin: 8px 0 12px;
  padding: 14px 10px;
  border: 2px dashed color-mix(in srgb, var(--fn-accent) 55%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--fn-accent) 8%, var(--fn-card));
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(15px, 4.4vw, 22px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  user-select: all;
  overflow-wrap: anywhere;
}
.gf-saved {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--fn-muted);
  font-size: 13px;
}
.gf-saved .icon {
  width: 15px;
  height: 15px;
  color: var(--fn-accent);
}
.gf-input {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
.gf-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.pl-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
}
.pl-back-link .icon {
  width: 16px;
  height: 16px;
}
.pm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 6px;
  padding: 14px 16px;
  border: 1px solid var(--fn-border);
  border-radius: 20px;
  background: var(--fn-card);
}
.pm-head .pl-plant {
  flex: none;
  margin: 0;
}
.pm-head > span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.pm-label {
  color: var(--fn-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pm-name {
  font-family: var(--display);
  font-size: calc(22px * var(--fn-font));
  font-weight: 800;
}
.pm-head small {
  color: var(--fn-muted);
  font-size: 13px;
}

/* ---------- The welcome tours (planwelcome.js, in the tour's box) ---------- */

.pw-bloom .tr-card {
  border-color: #f4a8c6;
  box-shadow: 0 30px 70px rgba(214, 69, 122, 0.25);
}
.pw-unlimited .tr-card {
  border-color: #f0c35a;
  box-shadow: 0 30px 70px rgba(217, 138, 28, 0.28);
}
.pw-bloom .tr-pic {
  background: linear-gradient(160deg, #fff0f6, #fbd3e3);
}
.pw-unlimited .tr-pic {
  background: linear-gradient(160deg, #fffaf0, #fbe3a6);
}
.pw-bloom .tr-next,
.pw-bloom .tr-dot.on {
  background: #d6457a;
  color: #fff;
}
.pw-unlimited .tr-next,
.pw-unlimited .tr-dot.on {
  background: linear-gradient(135deg, #f5c04e, #d98a1c);
  color: #3b2405;
}
.pw .tr-pic {
  position: relative;
  overflow: hidden;
}

/* Hello: the plan's plant in its pot, with petals or sparkles. */
.pw-hello {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.tr-pic .pw-plant svg {
  width: 110px;
  height: 132px;
}
.pw-glow {
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 65%);
}
.pw-plant {
  position: relative;
}
.play .pw-plant {
  animation: fs-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pw-petal {
  position: absolute;
  top: -14px;
  left: var(--x);
  width: calc(12px * var(--s));
  height: calc(9px * var(--s));
  border-radius: 80% 0 80% 0;
  background: #f592bd;
  opacity: 0;
}
.play .pw-petal {
  animation: pw-fall 3.2s linear var(--d) infinite;
}
@keyframes pw-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(26px, 200px) rotate(320deg); }
}
.pw-spark {
  position: absolute;
  top: var(--y);
  left: var(--x);
  color: #e0a22c;
  font-size: 16px;
  font-style: normal;
  opacity: 0;
}
.play .pw-spark {
  animation: tr-twinkle 2s ease-in-out var(--d) infinite;
}

/* Tools opening one after another. */
.pw-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
}
.pw-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  background: var(--fn-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-size: 13px;
  font-weight: 700;
}
.pw-tick {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}
.pw-tick i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
}
.pw-tick .icon {
  width: 12px;
  height: 12px;
}
.pw-padlock {
  background: color-mix(in srgb, var(--fn-ink) 12%, transparent);
  color: var(--fn-muted);
}
.pw-open {
  background: #2fa36b;
  color: #fff;
  transform: scale(0);
}
.play .pw-padlock {
  animation: pw-out 0.25s calc(0.5s + var(--i) * 0.28s) ease-in forwards;
}
.play .pw-open {
  animation: pw-pop 0.35s calc(0.55s + var(--i) * 0.28s) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pw-out {
  to { opacity: 0; transform: scale(0.4); }
}
.play .pw-tool {
  animation: tr-in 0.4s calc(var(--i) * 0.08s) ease-out both;
}

/* Old number → new number. */
.pw-more {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 86%;
}
.pw-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 14px;
  background: var(--fn-card);
  font-size: 13px;
}
.pw-row s {
  color: var(--fn-muted);
  font-weight: 700;
}
.pw-row .icon {
  align-self: center;
  width: 14px;
  height: 14px;
  color: var(--fn-muted);
}
.pw-row b {
  font-size: 20px;
  font-weight: 800;
}
.pw-bloom .pw-row b {
  color: #d6457a;
}
.pw-unlimited .pw-row b {
  color: #c27a0e;
}
.pw-row small {
  color: var(--fn-muted);
  font-size: 12px;
  font-weight: 600;
}
.play .pw-row {
  animation: tr-in 0.4s calc(0.2s + var(--i) * 0.25s) ease-out both;
}
.play .pw-row b {
  animation: pw-show-num 0.5s calc(0.5s + var(--i) * 0.25s) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pw-show-num {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}

/* Little Fern windows in the new themes. */
.pw-themes {
  display: grid;
  grid-template-columns: repeat(3, 78px);
  gap: 12px;
}
.pw-win {
  position: relative;
  height: 54px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--main);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.pw-win i {
  position: absolute;
  display: block;
}
.pw-win-side {
  inset: 0 auto 0 0;
  width: 34%;
  background: var(--side);
}
.pw-win-a,
.pw-win-b {
  left: 42%;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 35%, var(--main));
}
.pw-win-a {
  top: 9px;
  width: 44%;
}
.pw-win-b {
  top: 18px;
  width: 30%;
}
.pw-win-btn {
  right: 6px;
  bottom: 6px;
  width: 16px;
  height: 7px;
  border-radius: 4px;
  background: var(--accent);
}
.play .pw-win {
  animation: pw-pop 0.45s calc(var(--i) * 0.12s) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pw-pop {
  from { opacity: 0; transform: scale(0.5) rotate(-6deg); }
  to { opacity: 1; transform: none; }
}

/* Every folder colour and icon. */
.pw-folders {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pw-dots,
.pw-icons {
  display: grid;
  grid-template-columns: repeat(8, auto);
  gap: 7px;
}
.pw-icons {
  grid-template-columns: repeat(6, auto);
}
.pw-dots i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.pw-icons i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--fn-card);
  color: var(--fn-ink);
}
.pw-icons .icon {
  width: 16px;
  height: 16px;
}
.play .pw-dots i,
.play .pw-icons i {
  animation: pw-pop 0.35s calc(var(--i) * 0.05s) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Your badge, with a shine passing over. */
.pw-badge {
  position: relative;
  overflow: hidden;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--fn-card);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}
.pw-me {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.pw-me > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.pw-me .pf-av {
  width: 44px;
  height: 44px;
}
.pw-bloom .pw-me .pf-av {
  box-shadow: 0 0 0 2px var(--fn-card), 0 0 0 4px #f283b3;
}
.pw-unlimited .pw-me .pf-av {
  box-shadow: 0 0 0 2px var(--fn-card), 0 0 0 4px #f0b23a;
}
.pw-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
  transform: translateX(-100%);
}
.play .pw-shine {
  animation: pw-shine 2.2s ease-in-out 0.4s infinite;
}
@keyframes pw-shine {
  to { transform: translateX(100%); }
}
.play .pw-badge {
  animation: pw-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* The passcode: four dots fill, and the lock closes. */
.pw-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pw-pin-lock {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--fn-card);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  color: #c27a0e;
}
.pw-pin-lock .icon {
  width: 28px;
  height: 28px;
}
.pw-pin-lock b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: var(--fn-card);
  opacity: 0;
}
.pw-pin-dots {
  display: flex;
  gap: 12px;
}
.pw-pin-dots i {
  width: 14px;
  height: 14px;
  border: 2px solid #c27a0e;
  border-radius: 50%;
}
.play .pw-pin-dots i {
  animation: pw-dot 0.2s ease-out forwards;
}
.play .pw-pin-dots i:nth-child(1) { animation-delay: 0.4s; }
.play .pw-pin-dots i:nth-child(2) { animation-delay: 0.7s; }
.play .pw-pin-dots i:nth-child(3) { animation-delay: 1s; }
.play .pw-pin-dots i:nth-child(4) { animation-delay: 1.3s; }
@keyframes pw-dot {
  to { background: #c27a0e; transform: scale(1.1); }
}
.play .pw-pin-lock b {
  animation: tr-fade 0.3s 1.6s ease-out forwards;
}
.play .pw-pin-lock {
  animation: pw-shake 0.4s 1.6s ease-in-out;
}
@keyframes pw-shake {
  30% { transform: rotate(-8deg); }
  60% { transform: rotate(6deg); }
}

/* Coming soon. */
.pw-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pw-soon-big {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 22px;
  background: var(--fn-card);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.pw-bloom .pw-soon-big {
  color: #d6457a;
}
.pw-unlimited .pw-soon-big {
  color: #c27a0e;
}
.pw-soon-big .icon {
  width: 32px;
  height: 32px;
}
.pw-soon-list {
  display: flex;
  gap: 10px;
}
.pw-soon-list i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px dashed color-mix(in srgb, var(--fn-ink) 25%, transparent);
  border-radius: 12px;
  color: var(--fn-muted);
}
.pw-soon-list .icon {
  width: 18px;
  height: 18px;
}
.play .pw-soon-big {
  animation: pw-float 2.4s ease-in-out infinite;
}
.play .pw-soon-list i {
  animation: tr-in 0.4s calc(0.3s + var(--i) * 0.15s) ease-out both;
}
@keyframes pw-float {
  50% { transform: translateY(-6px); }
}

/* ---------- The quick tour (cards after the welcome screen) ---------- */

.tour {
  position: fixed;
  inset: 0;
  z-index: 56;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--fn-side) 70%, rgba(0, 0, 0, 0.25));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--fn-ink);
  animation: pf-fade 0.4s ease both;
  transition: opacity 0.45s ease;
}
.tour.out {
  opacity: 0;
  pointer-events: none;
}
.tr-card {
  position: relative;
  width: min(440px, 100%);
  padding: 22px 0 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fn-border) 70%, transparent);
  border-radius: 30px;
  background: var(--fn-card);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
  animation: pf-pop 0.55s 0.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tr-skip {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  padding: 6px 10px;
  border: none;
  background: none;
  color: var(--fn-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tr-view {
  overflow: hidden;
  touch-action: pan-y;
}
.tr-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.tr-slide {
  flex: 0 0 100%;
  padding: 18px 30px 6px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}
.tr-pic {
  display: grid;
  place-items: center;
  height: 170px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--fn-side2), var(--fn-side));
}
.tr-pic svg {
  width: 220px;
  height: 150px;
}
.tr-title {
  margin: 0;
  font-family: var(--display);
  font-size: calc(26px * var(--fn-font));
  font-weight: 800;
  letter-spacing: -0.02em;
}
.tr-text {
  min-height: 4.5em;
  margin: 8px 0 0;
  color: var(--fn-muted);
  font-size: calc(16px * var(--fn-font));
  line-height: 1.45;
}
.tr-text b {
  color: var(--fn-ink);
}
.tr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 24px 0;
}
.tr-back,
.tr-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tr-back {
  width: 46px;
  background: var(--fn-sel);
  color: var(--fn-ink);
}
.tr-back[hidden] {
  display: flex;
  visibility: hidden;
}
.tr-next {
  min-width: 118px;
  padding: 0 20px;
  background: var(--fn-accent);
  color: var(--fn-on-accent);
  font-size: 16px;
}
.tr-back .icon,
.tr-next .icon {
  width: 18px;
  height: 18px;
}
.tr-back,
.tr-next {
  flex: none;
}
/* Lots of cards on a narrow phone: the dots squeeze together instead of pushing the buttons out. */
.tr-dots {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
@media (max-width: 420px) {
  .tr-dots {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .tr-dots .tr-dot:not(.on) {
    width: 6px;
  }
  .tr-dots .tr-dot.on {
    width: 14px;
  }
  .tr-dots .tr-dot {
    height: 6px;
  }
  .tr-foot .tr-next {
    min-width: 0;
  }
}
.tr-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 18%, transparent);
  cursor: pointer;
  transition: width 0.3s var(--spring), background 0.3s ease;
}
.tr-dot.on {
  width: 22px;
  background: var(--fn-accent);
}

/* Card 2: a pen writing on a page. */
.tr-paper {
  fill: var(--fn-card);
  stroke: color-mix(in srgb, var(--fn-border) 80%, transparent);
}
.tr-rule {
  stroke: color-mix(in srgb, var(--fn-accent) 22%, transparent);
  stroke-width: 1;
}
.tr-ink {
  fill: none;
  stroke: var(--fn-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.tr-ink2 {
  stroke: var(--fn-accent);
  stroke-width: 7;
  opacity: 0.45;
}
.tr-pen-body {
  fill: var(--fn-accent);
}
.tr-pen-tip {
  fill: var(--fn-ink);
}
.tr-pen {
  transform: translate(54px, 60px);
}
.play .tr-ink {
  animation: tr-write 1.6s 0.2s ease-in-out forwards;
}
.play .tr-ink2 {
  animation: tr-write 0.8s 1.9s ease-out forwards;
}
.play .tr-pen {
  animation: tr-pen 2.8s 0.2s ease-in-out forwards;
}
@keyframes tr-write {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes tr-pen {
  0% { transform: translate(54px, 60px); }
  20% { transform: translate(88px, 52px); }
  40% { transform: translate(124px, 56px); }
  57% { transform: translate(156px, 62px); }
  64% { transform: translate(54px, 98px); }
  92% { transform: translate(160px, 98px); }
  100% { transform: translate(170px, 92px); opacity: 0.9; }
}

/* Card 3: the recording pill with a moving sound wave. */
.tr-rec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--fn-card);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}
.tr-rec-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e5484d;
  animation: tr-blink 1.2s ease-in-out infinite;
}
.tr-rec-time {
  font-variant-numeric: tabular-nums;
}
.tr-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
}
.tr-wave i {
  width: 3px;
  height: 30%;
  border-radius: 2px;
  background: var(--fn-accent);
  animation: tr-wave 0.9s ease-in-out infinite alternate;
}
.tr-words {
  width: 86%;
  margin-top: 12px;
  font-size: 13px;
  text-align: left;
}
.tr-words p {
  margin: 4px 0;
  color: var(--fn-muted);
}
.tr-pic:has(.tr-rec) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tr-new {
  opacity: 0;
}
.play .tr-new {
  color: var(--fn-ink) !important;
  font-weight: 600;
  animation: tr-in 0.5s 1.2s ease-out forwards;
}
@keyframes tr-blink {
  50% { opacity: 0.35; }
}
@keyframes tr-wave {
  from { height: 20%; }
  to { height: 100%; }
}
@keyframes tr-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Card 4: a quiz question with the right answer lighting up. */
.tr-quiz {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 78%;
  text-align: left;
}
.tr-q {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 800;
}
.tr-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border: 1px solid var(--fn-border);
  border-radius: 12px;
  background: var(--fn-card);
  font-size: 13px;
  font-weight: 600;
}
.tr-opt b {
  opacity: 0;
}
.play .tr-right {
  animation: tr-right 0.4s 1s ease-out forwards;
}
.play .tr-right b {
  animation: tr-in 0.3s 1.2s ease-out forwards;
}
@keyframes tr-right {
  to {
    border-color: #2fa36b;
    background: color-mix(in srgb, #2fa36b 16%, var(--fn-card));
    color: color-mix(in srgb, #2fa36b 60%, var(--fn-ink));
    transform: scale(1.03);
  }
}
@keyframes tr-drop {
  from { opacity: 0; transform: translateY(-30px) scale(0.85); }
  to { opacity: 1; transform: none; }
}
@keyframes tr-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
@keyframes tr-fade {
  to { opacity: 1; }
}

/* The first card: Fern's logo pops in, with little twinkles. */
.tr-hello {
  position: relative;
}
.tr-twinkle {
  position: absolute;
  color: var(--fn-accent);
  font-size: 18px;
  font-style: normal;
  opacity: 0;
}
.tr-twinkle:nth-of-type(1) { top: -14px; left: -22px; }
.tr-twinkle:nth-of-type(2) { top: 6px; right: -30px; font-size: 14px; }
.tr-twinkle:nth-of-type(3) { bottom: -10px; left: -30px; font-size: 12px; }
.play .tr-hello .fn-logo {
  animation: fs-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.play .tr-twinkle {
  animation: tr-twinkle 2.2s ease-in-out infinite;
}
.play .tr-twinkle:nth-of-type(2) { animation-delay: 0.7s; }
.play .tr-twinkle:nth-of-type(3) { animation-delay: 1.4s; }
@keyframes tr-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* Card 5: a school week, with a test dropping onto Thursday. */
.tr-cal {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 84%;
}
.tr-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 10px;
  border-radius: 12px;
  background: var(--fn-card);
  color: var(--fn-muted);
  font-size: 12px;
  font-weight: 600;
}
.tr-day b {
  color: var(--fn-ink);
  font-size: 18px;
}
.tr-due {
  grid-row: 2;
  overflow: hidden;
  padding: 6px 4px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.tr-done {
  grid-column: 1 / span 2;
  background: color-mix(in srgb, #2fa36b 16%, var(--fn-card));
  color: color-mix(in srgb, #2fa36b 60%, var(--fn-ink));
}
.tr-test {
  grid-column: 4 / span 2;
  background: var(--fn-accent);
  color: var(--fn-on-accent);
}
.play .tr-test {
  animation: tr-drop 0.6s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.play .tr-due-day {
  animation: tr-today 0.4s 1s ease-out forwards;
}
@keyframes tr-today {
  to { box-shadow: 0 0 0 2px var(--fn-accent); }
}

/* Card 6: two people writing on the same page. */
.tr-me {
  stroke: var(--fn-accent);
}
.tr-mate {
  stroke: #e46392;
}
.tr-tag {
  opacity: 0;
}
.tr-tag rect {
  fill: var(--fn-accent);
}
.tr-tag2 rect {
  fill: #e46392;
}
.tr-tag text,
.tr-code text {
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
}
.tr-tag text {
  fill: #fff;
}
.tr-code rect {
  fill: var(--fn-ink);
}
.tr-code text {
  fill: var(--fn-card);
  letter-spacing: 0.06em;
}
.play .tr-me {
  animation: tr-write 1.1s 0.2s ease-in-out forwards;
}
.play .tr-mate {
  animation: tr-write 1.1s 0.9s ease-in-out forwards;
}
.play .tr-tag1 {
  animation: tr-fade 0.3s 1.2s ease-out forwards;
}
.play .tr-tag2 {
  animation: tr-fade 0.3s 1.9s ease-out forwards;
}

/* Card 7: the streak plant growing up, one stage after another. */
.tr-grow {
  display: flex;
  align-items: center;
  gap: 18px;
}
.tr-pot {
  position: relative;
  width: 96px;
  height: 116px;
}
.tr-pic .tr-stage svg {
  width: 96px;
  height: 116px;
}
.tr-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.tr-stage:last-child {
  opacity: 1;
}
.play .tr-stage {
  animation: tr-in 0.5s calc(var(--i) * 0.6s) ease-out both, tr-gone 0.01s calc(var(--i) * 0.6s + 0.75s) forwards;
}
.play .tr-stage:last-child {
  animation: tr-in 0.5s 1.8s ease-out both;
}
@keyframes tr-gone {
  to { opacity: 0; }
}
.tr-streak {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.tr-streak b {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
}
.tr-streak .icon {
  width: 18px;
  height: 18px;
  color: #f08a24;
}
.tr-week {
  display: flex;
  gap: 4px;
}
.tr-week i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fn-ink) 10%, transparent);
  color: var(--fn-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}
.tr-week i.on {
  background: var(--fn-accent);
  color: var(--fn-on-accent);
}

/* Card 8: shared artworks popping in, and one getting a heart. */
.tr-heart {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}
.play .tr-tile {
  animation: tr-in 0.4s calc(var(--i) * 0.12s) ease-out both;
}
.play .tr-heart {
  animation: tr-pop 0.45s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Card 9: the ring moves along the colours, and the little Fern changes with it. */
.tr-line {
  fill: color-mix(in srgb, var(--fn-ink) 12%, transparent);
}
.tr-side {
  fill: #1f9e76;
}
.tr-pick {
  fill: none;
  stroke: var(--fn-ink);
  stroke-width: 2;
}
.play .tr-side {
  animation: tr-theme 5s ease-in-out infinite;
}
.play .tr-pick {
  animation: tr-pick 5s ease-in-out infinite;
}
@keyframes tr-theme {
  0%, 16% { fill: #1f9e76; }
  20%, 36% { fill: #2878d6; }
  40%, 56% { fill: #7c5ad6; }
  60%, 76% { fill: #de6b33; }
  80%, 96% { fill: #1d2c25; }
  100% { fill: #1f9e76; }
}
@keyframes tr-pick {
  0%, 16% { transform: translateX(0); }
  20%, 36% { transform: translateX(22px); }
  40%, 56% { transform: translateX(44px); }
  60%, 76% { transform: translateX(66px); }
  80%, 96% { transform: translateX(88px); }
  100% { transform: translateX(0); }
}

/* Card 10: a .fern file saved, and Frond saying hello. */
.tr-safe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 84%;
}
.tr-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--fn-card);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}
.tr-pic .tr-safe svg {
  width: 22px;
  height: 22px;
}
.tr-file i {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2fa36b;
  color: #fff;
  transform: scale(0);
}
.tr-pic .tr-file i svg {
  width: 14px;
  height: 14px;
}
.tr-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 16px 16px 16px 4px;
  background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-card));
  font-size: 13px;
  text-align: left;
}
.tr-frond {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fn-accent);
  color: var(--fn-on-accent);
}
.tr-pic .tr-frond svg {
  width: 20px;
  height: 20px;
}
.play .tr-file {
  animation: tr-drop 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.play .tr-file i {
  animation: tr-pop 0.4s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.play .tr-bubble {
  animation: tr-in 0.5s 1.3s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .tour,
  .tr-card,
  .tr-wave i,
  .tr-rec-dot {
    animation: none;
  }
  .tr-track {
    transition: none;
  }
}

/* ---------- Smooth motion everywhere (not on the page you write on) ---------- */

/* The highlight that glides between tabs, chips and tools (js/core/anim.js). */
.mo-rel {
  position: relative !important;
}
.mo-row {
  isolation: isolate;
}
.mo-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  transition:
    transform calc(0.46s / var(--anim-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1),
    width calc(0.46s / var(--anim-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1),
    height calc(0.46s / var(--anim-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
  will-change: transform;
}
/* Animations off (Settings), or "Turn off movement": everything just changes. */
body:not(.motion-on) .mo-pill,
body.still .mo-pill {
  transition: none;
}
body:not(.motion-on) :where(button, .link, [role="button"]):active,
body.still :where(button, .link, [role="button"]):active {
  scale: none;
}
/* In a row with a gliding highlight, the picked item never draws its own background (not even for
   a moment while the highlight arrives), and doesn't fade it either. */
.mo-row .mo-picked,
.mo-row :is(.fn-item, .fn-chip, .fn-tab, .fnb-size, .fnb-chip, .pop-chip, .as-kind).on,
.mo-row .side-item.active,
.mo-row .fnb-tool:is([data-slot], [data-tool]).on,
.rec-tabs.mo-row button.on {
  background: transparent !important;
  box-shadow: none !important;
  transition-property: transform, scale, color, opacity !important;
}
/* The pen toolbar's underline glides instead (and changes to the new pen's colour). */
.mo-pill.mo-bar {
  z-index: 1;
  transition-property: transform, width, height, opacity, background-color;
}
.mo-row .fnb-tool.on::after {
  opacity: 0;
}

/* Every button eases its colours and gives a little press. Low priority (:where), so anything with
   its own motion keeps it; "scale" adds to a button's own transform instead of replacing it. */
:where(button, .link, [role="button"], a.row-link) {
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.25s ease,
    opacity 0.2s ease,
    scale 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}
:where(button, .link, [role="button"]):active:not(:disabled) {
  scale: 0.97;
}
:where(input, textarea, select) {
  transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}
/* Nothing on the page itself eases or squashes: writing stays instant. */
.ed-viewport :where(button, .link, [role="button"], input, textarea) {
  transition: none;
  scale: none;
}

/* Opening the slim sidebar: the names fade in rather than popping. */
.side-opening .fn-item-label,
.side-opening .fn-folders-head span,
.side-opening .fn-search input,
.side-opening .fn-side-empty,
.side-opening .pf-tab-text {
  animation: mo-in 0.42s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes mo-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mo-pill,
  :where(button, .link, [role="button"], input, textarea, select) {
    transition: none;
  }
  :where(button, .link, [role="button"]):active:not(:disabled) {
    scale: none;
  }
  .side-opening * {
    animation: none !important;
  }
}

/* Studying with a friend: the room maker can remove someone. */
.fr-people {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 14px;
}
.fr-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--fn-border);
  border-radius: 14px;
  background: var(--fn-card);
  font-weight: 700;
}
.fr-person > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fr-kick {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, #dc2626 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #dc2626 8%, var(--fn-card));
  color: color-mix(in srgb, #dc2626 80%, var(--fn-ink));
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.fr-kick.sure {
  background: #dc2626;
  color: #fff;
}
.fr-kick .icon {
  width: 15px;
  height: 15px;
}
/* A menu item that can't be used right now: greyed out. */
.fn-menu-item:disabled {
  opacity: 0.45;
  cursor: default;
  scale: none;
}
.fn-menu-item:disabled:hover {
  background: none;
}

/* ---------- Help: Frond, the helper (Settings → Help) ---------- */
.hp {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}
.hp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fn-border);
}
.hp-who {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.hp-who b {
  font: 800 19px var(--font);
}
.hp-who small {
  color: var(--fn-muted);
  font-size: 13px;
}
.hp-av {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fn-accent) 16%, var(--fn-card));
  color: var(--fn-accent);
}
.hp-av svg {
  width: 22px;
  height: 22px;
}
.hp-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
}
.hp-hello {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: auto 0;
  padding: 24px 8px;
  text-align: center;
}
.hp-hello .hp-av {
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
}
.hp-hello .hp-av svg {
  width: 36px;
  height: 36px;
}
.hp-hello h3 {
  margin: 0;
  font: 800 22px var(--font);
}
.hp-hello p {
  margin: 0 0 10px;
  color: var(--fn-muted);
}
.hp-starters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 520px;
}
.hp-chip {
  padding: 9px 14px;
  border: 1.5px solid var(--fn-border);
  border-radius: 999px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: 700 14px var(--font);
  cursor: pointer;
}
.hp-chip:hover {
  border-color: var(--fn-accent);
  color: var(--fn-accent);
}
.hp-msg {
  max-width: 88%;
  line-height: 1.5;
}
.hp-me {
  align-self: flex-end;
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  background: var(--fn-accent);
  color: #fff;
  font-weight: 600;
}
.hp-me p {
  margin: 0;
  white-space: pre-wrap;
}
.hp-frond {
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  gap: 10px;
}
.hp-frond .hp-av {
  width: 30px;
  height: 30px;
}
.hp-frond .hp-av svg {
  width: 18px;
  height: 18px;
}
.hp-text {
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--fn-border);
  border-radius: 4px 18px 18px 18px;
  background: var(--fn-card);
}
.hp-text p,
.hp-text ol,
.hp-text ul {
  margin: 4px 0;
}
.hp-text ol,
.hp-text ul {
  padding-left: 22px;
}
.hp-text li {
  margin: 3px 0;
}
.hp-text h3,
.hp-text h4 {
  margin: 8px 0 4px;
  font-size: 16px;
}
.hp-dev-inline {
  margin-top: 6px;
}
.hp-ask {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  border: 1.5px solid var(--fn-border);
  border-radius: 20px;
  background: var(--fn-card);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--fn-ink) 8%, transparent);
}
.hp-ask:focus-within {
  border-color: var(--fn-accent);
}
.hp-input {
  flex: 1;
  min-height: 24px;
  max-height: 140px;
  padding: 6px 8px;
  border: 0;
  outline: 0;
  background: none;
  color: var(--fn-ink);
  font: 16px var(--font);
  resize: none;
}
.hp-send {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--fn-accent);
  color: #fff;
  cursor: pointer;
}
.hp-send .icon {
  width: 18px;
  height: 18px;
}
.hp-dev {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border: 1.5px dashed var(--fn-border);
  border-radius: 14px;
  background: none;
  color: var(--fn-muted);
  font: 700 14px var(--font);
  cursor: pointer;
}
.hp-dev:hover {
  border-color: var(--fn-accent);
  color: var(--fn-accent);
}
.hp-dev .icon {
  width: 16px;
  height: 16px;
}
/* Send a message to the developer */
.hp-kinds {
  display: flex;
  gap: 8px;
  width: 100%;
}
.hp-kind {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border: 1.5px solid var(--fn-border);
  border-radius: 14px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: 700 15px var(--font);
  cursor: pointer;
}
.hp-kind .icon {
  width: 18px;
  height: 18px;
}
.hp-kind.on {
  border-color: var(--fn-accent);
  background: color-mix(in srgb, var(--fn-accent) 12%, var(--fn-card));
  color: var(--fn-accent);
}
textarea.hp-msg-in {
  min-height: 110px;
  resize: vertical;
  font: inherit;
}
.hp-note {
  margin: 0;
  color: var(--fn-muted);
  font-size: 13px;
}

/* The developer's "Admin Dashboard" in their name menu: red (light or dark, following the theme). */
.fn-menu-item.fn-menu-owner {
  margin-bottom: 4px;
  background: color-mix(in srgb, #dc2626 13%, var(--fn-card));
  color: color-mix(in srgb, #b91c1c 85%, var(--fn-ink));
}
.fn-menu-item.fn-menu-owner:hover {
  background: color-mix(in srgb, #dc2626 22%, var(--fn-card));
}
.fn-menu-item.fn-menu-owner .icon {
  color: inherit;
}

/* ---------- Loading screen: the logo pops in and grows, the name bounces in, leaves float up ---------- */
.fern-splash {
  overflow: hidden;
  gap: 14px;
}
.fs-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  margin: -260px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--fn-accent) 22%, transparent), transparent 65%);
  pointer-events: none;
}
.fs-logo {
  position: relative;
}
.fs-title {
  position: relative;
  display: flex;
  margin: 4px 0 6px;
}
.fs-l {
  display: inline-block;
  white-space: pre;
}
.fs-bar {
  position: relative;
  width: 168px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-accent) 16%, transparent);
}
.fs-bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fn-soft), var(--fn-accent));
  transform-origin: 0 50%;
}
.fs-leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fs-leaf {
  position: absolute;
  bottom: -60px;
  left: var(--x);
  width: calc(34px * var(--s));
  height: calc(34px * var(--s));
  opacity: 0;
}
.fs-leaf svg {
  width: 100%;
  height: 100%;
}
body.motion-on:not(.still) .fs-logo {
  animation: fs-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
body.motion-on:not(.still) .fs-logo .fn-leaf {
  transform-origin: 50% 90%;
  animation: fs-grow 0.9s cubic-bezier(0.34, 1.5, 0.64, 1) 0.25s both, fs-sway 2.4s ease-in-out 1.15s infinite;
}
body.motion-on:not(.still) .fs-glow {
  animation: fs-glow 2.4s ease-in-out infinite alternate;
}
body.motion-on:not(.still) .fs-l {
  animation: fs-letter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.3s + var(--i) * 0.05s) both;
}
body.motion-on:not(.still) .fs-bar {
  animation: fs-in 0.4s ease-out 0.5s both;
}
body.motion-on:not(.still) .fs-bar i {
  animation: fs-fill var(--fs-time, 1.5s) cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.motion-on:not(.still) .fs-leaf {
  animation: fs-float calc(2.6s + var(--s) * 1.2s) ease-in var(--d) infinite;
}
@keyframes fs-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-18deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes fs-grow {
  0% { transform: scale(0.2) translateY(14px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes fs-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes fs-glow {
  from { transform: scale(0.85); opacity: 0.6; }
  to { transform: scale(1.12); opacity: 1; }
}
@keyframes fs-letter {
  0% { opacity: 0; transform: translateY(0.9em) rotate(14deg) scale(0.6); }
  100% { opacity: 1; transform: none; }
}
@keyframes fs-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes fs-fill {
  from { transform: scaleX(0.04); }
  to { transform: scaleX(1); }
}
@keyframes fs-float {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  15% { opacity: 0.55; }
  85% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-110vh) translateX(40px) rotate(220deg); }
}

/* ---------- Opening Fern: the sidebar slides in, its plants grow, the greeting waves in, the cards
   pop up and + New bounces (body.fern-intro, for a moment after opening; app.js) ---------- */
.fi-l {
  display: inline-block;
  white-space: pre;
}
/* (Not on phones: there the sidebar waits off the edge, and sliding it in would show it over the page.) */
@media (min-width: 760px) {
  body.motion-on:not(.still).fern-intro .fn-side {
    animation: fi-side 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}
body.motion-on:not(.still).fern-intro .fn-side-links > * {
  animation: fi-item 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
body.motion-on:not(.still).fern-intro .fn-side-links > :nth-child(1) { animation-delay: 0.12s; }
body.motion-on:not(.still).fern-intro .fn-side-links > :nth-child(2) { animation-delay: 0.18s; }
body.motion-on:not(.still).fern-intro .fn-side-links > :nth-child(3) { animation-delay: 0.24s; }
body.motion-on:not(.still).fern-intro .fn-side-links > :nth-child(4) { animation-delay: 0.3s; }
body.motion-on:not(.still).fern-intro .fn-side-links > :nth-child(5) { animation-delay: 0.36s; }
body.motion-on:not(.still).fern-intro .fn-side-links > :nth-child(n + 6) { animation-delay: 0.42s; }
body.motion-on:not(.still).fern-intro .fn-art {
  transform-origin: 50% 100%;
  animation: fi-grow 1.1s cubic-bezier(0.34, 1.35, 0.64, 1) 0.25s both;
}
body.motion-on:not(.still).fern-intro .fi-l {
  animation: fi-letter 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.3s + var(--i) * 0.035s) both;
}
body.motion-on:not(.still).fern-intro .fn-cards > .fn-card {
  animation: fi-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
body.motion-on:not(.still).fern-intro .fn-cards > .fn-card:nth-child(1) { animation-delay: 0.55s; }
body.motion-on:not(.still).fern-intro .fn-cards > .fn-card:nth-child(2) { animation-delay: 0.63s; }
body.motion-on:not(.still).fern-intro .fn-cards > .fn-card:nth-child(3) { animation-delay: 0.71s; }
body.motion-on:not(.still).fern-intro .fn-cards > .fn-card:nth-child(4) { animation-delay: 0.79s; }
body.motion-on:not(.still).fern-intro .fn-cards > .fn-card > .icon {
  animation: fi-wiggle 0.7s ease-in-out 1.05s both;
}
body.motion-on:not(.still).fern-intro .fn-new {
  animation: fi-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}
body.motion-on:not(.still).fern-intro .fn-top-actions .fn-icon-btn {
  animation: fi-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both;
}
@keyframes fi-side {
  from { opacity: 0; transform: translateX(-36px); }
  to { opacity: 1; transform: none; }
}
@keyframes fi-item {
  from { opacity: 0; transform: translateX(-22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes fi-grow {
  0% { opacity: 0; transform: translateY(40px) scaleY(0.35); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes fi-letter {
  0% { opacity: 0; transform: translateY(0.7em) rotate(-10deg) scale(0.7); }
  100% { opacity: 1; transform: none; }
}
@keyframes fi-pop {
  0% { opacity: 0; transform: translateY(18px) scale(0.82) rotate(-3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes fi-wiggle {
  0%, 100% { transform: none; }
  25% { transform: rotate(-12deg) scale(1.12); }
  55% { transform: rotate(9deg) scale(1.08); }
  80% { transform: rotate(-4deg); }
}
@keyframes fi-bounce {
  0% { opacity: 0; transform: scale(0.6); }
  55% { opacity: 1; transform: scale(1.12); }
  75% { transform: scale(0.96); }
  100% { opacity: 1; transform: none; }
}

/* ---------- The study streak plant on Home (streak.js): it sways, perks up when it grows, and
   droops after a couple of days off ---------- */
.st-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-top: 26px;
  padding: 12px 22px 12px 12px;
  border: 1.5px solid color-mix(in srgb, var(--fn-accent) 30%, var(--fn-border));
  border-radius: var(--fn-r);
  background: linear-gradient(115deg, color-mix(in srgb, var(--fn-side) 75%, var(--fn-card)), var(--fn-card) 72%);
  color: var(--fn-ink);
  font: inherit;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s var(--spring), box-shadow 0.25s;
}
.st-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.07);
}
.st-card:active {
  transform: scale(0.985);
}
.st-plant {
  position: relative;
  flex-shrink: 0;
  width: 88px;
  height: 106px;
}
.st-plant svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.st-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.st-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.st-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(21px * var(--fn-font));
  font-weight: 800;
}
.st-count .icon {
  width: 21px;
  height: 21px;
  color: var(--fn-muted);
}
.st-card.today .st-count .icon {
  color: #f97316;
  fill: color-mix(in srgb, #fbbf24 55%, transparent);
}
.st-stage {
  padding: 3px 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--fn-accent) 14%, transparent);
  color: var(--fn-accent);
  font-size: 12.5px;
  font-weight: 700;
}
.st-card.wilt .st-stage {
  background: color-mix(in srgb, #b45309 14%, transparent);
  color: #b45309;
}
.dark-ui .st-card.wilt .st-stage {
  color: #f0b46a;
}
.st-msg {
  color: var(--fn-muted);
  font-size: 14.5px;
  line-height: 1.35;
}
.st-week {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 7px;
  margin-top: 3px;
}
.st-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--fn-muted);
  font-size: 11px;
  font-weight: 700;
}
.st-day i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--fn-border);
  border-radius: 50%;
}
.st-day i .icon {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}
.st-day.done i {
  border-color: var(--fn-accent);
  background: var(--fn-accent);
  color: var(--fn-on-accent);
}
.st-day.now {
  color: var(--fn-ink);
}
.st-day.now:not(.done) i {
  border-style: dashed;
  border-color: var(--fn-accent);
}
.st-best {
  align-self: center;
  margin-left: 6px;
  color: var(--fn-muted);
  font-size: 12.5px;
  font-weight: 600;
}
.st-spark {
  position: absolute;
  color: #f5b82e;
  font-size: 17px;
  font-style: normal;
  opacity: 0;
  pointer-events: none;
}
.st-spark:nth-of-type(1) { left: 2px; top: 26px; }
.st-spark:nth-of-type(2) { right: 0; top: 10px; font-size: 13px; }
.st-spark:nth-of-type(3) { left: 46%; top: -6px; font-size: 14px; }
body.motion-on:not(.still) .st-sway {
  transform-box: view-box;
  transform-origin: 50px 86px;
  animation: st-sway 4.5s ease-in-out infinite;
}
body.motion-on:not(.still) .st-card.wilt .st-sway {
  animation-duration: 7s;
}
body.motion-on:not(.still) .st-card.grew .st-sway {
  animation: st-perk 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both, st-sway 4.5s ease-in-out 1.3s infinite;
}
body.motion-on:not(.still) .st-card.grew .st-spark {
  animation: st-spark 1.5s ease-out 0.7s 2 both;
}
body.motion-on:not(.still) .st-card.grew .st-spark:nth-of-type(2) { animation-delay: 0.95s; }
body.motion-on:not(.still) .st-card.grew .st-spark:nth-of-type(3) { animation-delay: 1.2s; }
body.motion-on:not(.still) .st-card.poke .st-sway {
  animation: st-poke 0.8s ease-in-out;
}
body.motion-on:not(.still).fern-intro .st-card {
  animation: fi-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}
body.motion-on:not(.still).fern-intro .st-sway {
  animation: st-rise 1s cubic-bezier(0.34, 1.4, 0.64, 1) 1.15s both, st-sway 4.5s ease-in-out 2.15s infinite;
}
@keyframes st-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
@keyframes st-perk {
  0% { transform: scale(0.8); }
  100% { transform: none; }
}
@keyframes st-rise {
  0% { transform: scaleY(0.2); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes st-poke {
  0%, 100% { transform: none; }
  20% { transform: rotate(-9deg); }
  45% { transform: rotate(7deg); }
  70% { transform: rotate(-4deg); }
}
@keyframes st-spark {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  100% { opacity: 0; transform: translateY(-14px) scale(0.6) rotate(120deg); }
}
@media (max-width: 560px) {
  .st-card { gap: 12px; padding-right: 14px; }
  .st-plant { width: 70px; height: 86px; }
}

/* ---------- Keeping notes safe (safety.js): the Home Screen steps and "Keeping your notes safe" ---------- */
.sf-steps,
.sf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.sf-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid var(--fn-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fn-side) 55%, var(--fn-card));
  color: var(--fn-ink);
  font-size: 15px;
  line-height: 1.4;
}
.sf-n {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fn-accent);
  color: var(--fn-on-accent);
  font-size: 14px;
  font-weight: 800;
}
.sf-share {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, #2878d6 14%, transparent);
  color: #2878d6;
  font-style: normal;
  vertical-align: -6px;
}
.sf-share .icon {
  width: 15px;
  height: 15px;
}
.sf-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  margin: 2px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, #f59e0b 10%, var(--fn-card));
  color: var(--fn-muted);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
}
.sf-note .icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: #b45309;
}
.sf-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, #f59e0b 9%, var(--fn-card));
  line-height: 1.4;
}
.sf-list li.ok {
  border-color: color-mix(in srgb, #16a34a 35%, transparent);
  background: color-mix(in srgb, #16a34a 9%, var(--fn-card));
}
.sf-dot {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
}
.sf-list li.ok .sf-dot {
  background: #16a34a;
}
.sf-dot .icon {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}
.sf-list li > span:last-child {
  color: var(--fn-muted);
  font-size: 14px;
}
.sf-list b {
  display: block;
  margin-bottom: 1px;
  color: var(--fn-ink);
  font-size: 15px;
}
.sf-icon {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.sf-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Empty boxes ("Your notes will show up here") can sit over the plant picture at the bottom of the
   page: a frosted panel keeps them easy to read. */
.fn-empty {
  background: color-mix(in srgb, var(--fn-main) 70%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
}

/* ---------- The Art Wall (Gallery → Art Wall, artwall.js) ---------- */
.aw-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.aw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.aw-filters .fn-chip .icon {
  width: 16px;
  height: 16px;
}
.aw-sub {
  margin: 12px 0 22px;
}
.aw-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fn-muted);
  font-size: calc(16px * var(--fn-font));
  font-weight: 700;
}
body.motion-on:not(.still) .aw-wait .icon {
  animation: st-sway 1.2s ease-in-out infinite;
}
.aw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-items: end;
  gap: 26px 22px;
  margin-bottom: 24px;
}
.aw-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.aw-card[hidden] {
  display: none;
}
.aw-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}
.aw-pic {
  display: block;
  max-height: 300px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fn-ink) 5%, var(--fn-card));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s var(--spring), box-shadow 0.25s;
}
.aw-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aw-open:hover .aw-pic {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}
.aw-open:active .aw-pic {
  transform: scale(0.97);
}
.aw-foot {
  display: flex;
  align-items: center;
  gap: 4px;
}
.aw-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: calc(16px * var(--fn-font));
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aw-heart,
.aw-more {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fn-muted);
}
.aw-heart .icon,
.aw-more .icon {
  width: 19px;
  height: 19px;
}
.aw-heart:hover,
.aw-more:hover {
  background: color-mix(in srgb, var(--fn-ink) 7%, transparent);
}
.aw-heart.on {
  color: #e64980;
}
.aw-heart.on .icon {
  fill: #e64980;
}
.aw-load {
  margin: 0 auto;
}
/* Who made it (their profile, when they show it) */
.aw-name {
  display: flex;
  flex-direction: column;
}
.aw-title {
  overflow: hidden;
  text-overflow: ellipsis;
}
.aw-by {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fn-muted);
  font: inherit;
  font-size: calc(13px * var(--fn-font));
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
}
.aw-by i {
  font-style: normal;
}
.aw-by:hover {
  color: var(--fn-ink);
}
.aw-dot {
  font-size: 12px;
  font-weight: 400;
}
.aw-section {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 2px 10px;
  font-weight: 800;
}
.aw-section .icon {
  width: 18px;
  height: 18px;
  color: var(--fn-accent);
}
.aw-featured {
  margin-bottom: 18px;
}
.aw-featured .aw-card {
  outline: 2px solid color-mix(in srgb, #f2b33d 75%, transparent);
  outline-offset: 3px;
}
.aw-me {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--fn-border);
  border-radius: 18px;
  background: var(--fn-card);
}
.aw-me-av {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-card));
  font-size: 26px;
}
.aw-me-av.big {
  width: 76px;
  height: 76px;
  margin: 0 auto 6px;
  font-size: 42px;
}
.aw-me-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.aw-me-text b {
  font-size: calc(16px * var(--fn-font));
}
.aw-me-text small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--fn-muted);
  font-size: 13px;
}
.aw-me-text small .icon {
  flex: none;
  width: 15px;
  height: 15px;
}
.aw-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fn-sel);
  color: var(--fn-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.aw-badge.aw-bloom {
  background: #fde2ec;
  color: #a8325f;
}
.aw-badge.aw-unlimited {
  background: linear-gradient(135deg, #ffe7a8, #f5c04e);
  color: #5a3a06;
}
.aw-who-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 6px;
  color: var(--fn-muted);
  font-size: 14px;
}
.aw-who-line span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.aw-who-line .icon {
  width: 15px;
  height: 15px;
}
.aw-their {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  max-height: 300px;
  margin: 6px 0 4px;
  overflow-y: auto;
}
.aw-their-art {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fn-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.aw-their-art img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--fn-main);
  object-fit: cover;
}
.aw-their-art span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aw-avatars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin: 4px 0 12px;
}
.aw-av {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--fn-sel);
  font-size: 22px;
  cursor: pointer;
}
.aw-av.on {
  border-color: var(--fn-accent);
  background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-card));
}
.aw-rules-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--fn-muted);
  font-size: 13px;
  text-align: left;
}
.aw-rules-line .icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}
/* Sharing */
.aw-drop {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 150px;
  max-height: 260px;
  overflow: hidden;
  padding: 0;
  border: 2px dashed color-mix(in srgb, var(--fn-accent) 45%, var(--fn-border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--fn-accent) 6%, var(--fn-card));
  color: var(--fn-ink);
}
.aw-drop img {
  display: block;
  max-width: 100%;
  max-height: 256px;
  object-fit: contain;
}
.aw-drop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px;
}
.aw-drop-empty .icon {
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  color: var(--fn-accent);
}
.aw-drop-empty b {
  font-size: 16px;
}
.aw-drop-empty small {
  color: var(--fn-muted);
  font-size: 13.5px;
}
.aw-rules {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--fn-muted);
  font-size: 14px;
  list-style: none;
  text-align: left;
}
.aw-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aw-rules .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #16a34a;
  stroke-width: 3;
}
.aw-status {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-accent) 10%, var(--fn-card));
  color: var(--fn-ink);
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
}
.aw-status.bad {
  background: color-mix(in srgb, #dc2626 10%, var(--fn-card));
  color: color-mix(in srgb, #b91c1c 80%, var(--fn-ink));
}
.modal-options [disabled] {
  opacity: 0.45;
  pointer-events: none;
}
/* Favourites in the new-note window */
.pp-favs {
  width: 100%;
}
.pp-favs-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--fn-muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pp-favs-title .icon {
  width: 15px;
  height: 15px;
  color: #e64980;
  fill: #e64980;
}
.pp-favs-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 4px 8px;
}
.pp-fav {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 84px;
  padding: 5px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--fn-ink);
  font-size: 12px;
  font-weight: 700;
}
.pp-fav img {
  display: block;
  width: 72px;
  height: 92px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.pp-fav span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-fav.on {
  background: color-mix(in srgb, var(--fn-accent) 14%, transparent);
}
.pp-fav.on img {
  outline: 3px solid var(--fn-accent);
  outline-offset: 2px;
}

/* ---------- Getting Fern as an app (getapp.js): the tour's button and the install guides ---------- */

.tr-cta {
  margin: 14px auto 0;
  padding: 12px 22px;
  font-size: calc(16px * var(--fn-font));
}
.ga-hero {
  position: relative;
  display: grid;
  place-items: center;
}
.ga-arrow {
  position: absolute;
  right: -14px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fn-accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--fn-accent) 40%, transparent);
  color: #fff;
}
.ga-arrow .icon {
  width: 20px;
  height: 20px;
}
.play .ga-arrow {
  animation: ga-bob 1.6s ease-in-out infinite;
}
@keyframes ga-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
/* A little phone and a little window, drawn in the theme's colours. */
.ga-phone {
  position: relative;
  width: 124px;
  height: 158px;
  padding: 6px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--fn-ink) 86%, var(--fn-card));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.ga-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 1;
  width: 26px;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--fn-ink) 86%, var(--fn-card));
  transform: translateX(-50%);
}
.ga-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: var(--fn-card);
}
.ga-win {
  width: 210px;
  height: 140px;
  overflow: hidden;
  border: 1px solid var(--fn-border);
  border-radius: 12px;
  background: var(--fn-card);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}
.ga-bar {
  display: flex;
  gap: 5px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--fn-ink) 7%, var(--fn-card));
}
.ga-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fn-ink) 22%, var(--fn-card));
}
.ga-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  height: calc(100% - 22px);
}
.ga-app .fn-logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--fn-accent) 30%, transparent);
}
.ga-home-big .fn-logo {
  width: 54px;
  height: 54px;
  border-radius: 15px;
}
.play .ga-home-big .fn-logo,
.play .ga-same .fn-logo {
  animation: fs-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* A download message, a settings switch, an install box, a home screen. */
.ga-note {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 92%;
  padding: 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fn-ink) 6%, var(--fn-card));
  font-size: 7.5px;
  line-height: 1.25;
  text-align: left;
}
.ga-win .ga-note {
  width: 80%;
  font-size: 11px;
}
.ga-note span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.ga-note b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ga-note small {
  color: var(--fn-muted);
}
.ga-file {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--fn-accent);
  color: #fff;
}
.ga-file .icon {
  width: 12px;
  height: 12px;
}
.ga-note em,
.ga-btns em,
.ga-smart em {
  flex: none;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--fn-accent);
  color: #fff;
  font-style: normal;
  font-weight: 700;
}
.play .ga-pop {
  animation: ga-pop 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ga-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
.ga-sheet {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 90%;
  font-size: 7.5px;
  text-align: left;
}
.ga-sheet b {
  font-size: 10px;
  line-height: 1.2;
}
.ga-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fn-ink) 6%, var(--fn-card));
}
.ga-toggle {
  position: relative;
  flex: none;
  width: 22px;
  height: 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-ink) 22%, var(--fn-card));
}
.ga-toggle i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
}
.play .ga-toggle {
  animation: ga-on 0.4s 0.7s ease both;
}
.play .ga-toggle i {
  animation: ga-knob 0.4s 0.7s ease both;
}
@keyframes ga-on {
  to { background: var(--fn-accent); }
}
@keyframes ga-knob {
  to { transform: translateX(9px); }
}
.ga-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 92%;
  padding: 8px 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-ink) 6%, var(--fn-card));
  font-size: 9px;
}
.ga-dialog .fn-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.ga-dialog small {
  color: var(--fn-muted);
  font-size: 7px;
  line-height: 1.3;
}
.ga-btns {
  display: flex;
  gap: 6px;
  margin-top: 2px;
  font-size: 7.5px;
}
.ga-btns i {
  padding: 3px 5px;
  color: var(--fn-muted);
  font-style: normal;
}
.ga-home {
  display: grid;
  grid-template-columns: repeat(3, 22px);
  gap: 9px;
  align-content: center;
  justify-content: center;
}
.ga-dot-app {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--fn-ink) 10%, var(--fn-card));
}
.ga-home-fern,
.ga-desk-fern,
.ga-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.ga-home-fern {
  grid-column: 2;
  grid-row: 2;
}
.ga-home-fern .fn-logo {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}
.ga-home-fern small {
  font-size: 6px;
  white-space: nowrap;
}
.play .ga-home-fern {
  animation: ga-pop 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ga-smart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  height: 100%;
  padding: 10px 12px;
  background: #1f6fbf;
  color: #fff;
  font-size: 10px;
  text-align: left;
}
.ga-smart b {
  font-size: 13px;
}
.ga-smart small {
  opacity: 0.85;
  line-height: 1.3;
}
.ga-smart u {
  font-weight: 700;
}
.ga-smart em {
  align-self: flex-end;
  margin-top: auto;
  background: #fff;
  color: #1f6fbf;
}
.ga-desk {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 10px 14px;
  font-size: 9px;
}
.ga-desk-fern {
  align-self: flex-start;
}
.ga-start .icon {
  width: 22px;
  height: 22px;
  color: var(--fn-accent);
}
.play .ga-desk-fern {
  animation: ga-pop 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.play .ga-start {
  animation: ga-pop 0.6s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ga-same {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.ga-arrows .icon {
  width: 18px;
  height: 18px;
  color: var(--fn-muted);
}

/* ---------- Friends (buddies.js) ---------- */

.fn-item {
  position: relative;
}
.fn-badge {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
body.side-mini .fn-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  margin: 0;
}
.bd-page {
  max-width: 820px;
}
.bd-av {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bd-bg, color-mix(in srgb, var(--fn-accent) 14%, var(--fn-card)));
  font-size: 24px;
  line-height: 1;
}
.bd-av.small {
  width: 34px;
  height: 34px;
  font-size: 18px;
}
.bd-av.big {
  width: 64px;
  height: 64px;
  font-size: 34px;
}
.bd-av.huge {
  width: 96px;
  height: 96px;
  font-size: 52px;
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--fn-ink) 45%, transparent);
}
/* Tapping your own avatar changes it */
.bd-me-av {
  position: relative;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.bd-me-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--fn-card);
  border-radius: 50%;
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.bd-me-edit .icon {
  width: 12px;
  height: 12px;
}
.bd-me-av:hover .bd-av {
  transform: scale(1.05);
}
.bd-me-av .bd-av {
  transition: transform 0.2s;
}
/* Picking an avatar and its pastel background */
.bd-look-label {
  align-self: stretch;
  margin: 6px 0 0 !important;
  color: var(--fn-muted);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}
.bd-look-preview {
  display: grid;
  place-items: center;
  margin: 4px 0 6px;
}
.bd-colors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.bd-color {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--fn-ink) 10%, transparent);
  border-radius: 50%;
  background: var(--bd-bg);
  cursor: pointer;
  transition: transform 0.15s;
}
.bd-color.none {
  background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-card));
}
.bd-color:hover {
  transform: scale(1.1);
}
.bd-color.on {
  outline: 3px solid var(--fn-accent);
  outline-offset: 2px;
}
.bd-look .bd-avatars {
  margin-top: 4px;
}
.bd-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--fn-card);
  border-radius: 50%;
  background: color-mix(in srgb, var(--fn-ink) 25%, var(--fn-card));
}
.bd-friend.on .bd-dot {
  background: #2fb36a;
}
/* Me, and finding friends */
.bd-me {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 6px 0 14px;
  padding: 16px 18px;
  border: 1px solid var(--fn-border);
  border-radius: 20px;
  background: var(--fn-card);
}
.bd-me-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 160px;
}
.bd-me-text b {
  font-size: 19px;
}
.bd-me-text small,
.bd-hint,
.bd-none {
  color: var(--fn-muted);
  font-size: 13px;
}
.bd-me-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bd-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px 16px;
  border: 1px solid var(--fn-border);
  border-radius: 16px;
  background: var(--fn-card);
  color: var(--fn-muted);
}
.bd-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--fn-ink);
  font: inherit;
  font-size: 15px;
}
.bd-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.bd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--fn-border);
  border-radius: 14px;
  background: var(--fn-card);
}
.bd-row > .icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--fn-accent);
}
.bd-row.muted {
  opacity: 0.8;
}
.bd-row-text {
  flex: 1;
  min-width: 160px;
  font-size: 14px;
}
.bd-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bd-row + .bd-row {
  margin-top: 6px;
}
.bd-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-card));
  color: color-mix(in srgb, var(--fn-accent) 70%, var(--fn-ink));
  font-size: 12px;
  font-weight: 700;
}
/* Friends */
.bd-friends {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.bd-friend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--fn-border);
  border-radius: 18px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bd-friend:hover {
  border-color: color-mix(in srgb, var(--fn-accent) 50%, var(--fn-border));
}
.bd-friend-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bd-friend-text b,
.bd-friend-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-friend-text small {
  color: var(--fn-muted);
  font-size: 13px;
}
.bd-streak {
  flex: none;
  font-size: 13px;
  font-weight: 800;
}
.bd-join {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
  font-size: 12px;
  font-weight: 700;
}
.bd-join .icon {
  width: 13px;
  height: 13px;
}
/* A friend asking to join (or inviting you in, or a study timer): pops up anywhere, over everything */
.bd-pops {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 28px));
  pointer-events: none;
}
.bd-pop {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
  padding: 14px 40px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--fn-accent) 35%, var(--fn-border));
  border-radius: 20px;
  background: var(--fn-card);
  color: var(--fn-ink);
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--fn-ink) 45%, transparent), 0 2px 6px color-mix(in srgb, var(--fn-ink) 10%, transparent);
  /* (Themes with see-through cards: whatever's behind is blurred, so it reads clearly.) */
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  pointer-events: auto;
  animation: bd-pop-in 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes bd-pop-in {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
}
.bd-pop-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}
.bd-pop-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 8px;
}
.bd-pop-x {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--fn-muted);
  cursor: pointer;
}
.bd-pop-x:hover {
  background: color-mix(in srgb, var(--fn-ink) 6%, transparent);
}
.bd-pop-x .icon {
  width: 16px;
  height: 16px;
}
@media (max-width: 560px) {
  .bd-pops {
    right: 12px;
    left: 12px;
    width: auto;
  }
}
/* A friend's profile */
.bd-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.bd-profile .modal-title {
  margin-top: 6px;
}
.bd-profile .modal-sub {
  margin: 0;
}
.bd-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-self: stretch;
  margin-top: 10px;
}
.bd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border: 1px solid var(--fn-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fn-accent) 5%, var(--fn-card));
}
.bd-stat b {
  font-size: 17px;
  white-space: nowrap;
}
.bd-stat small {
  color: var(--fn-muted);
  font-size: 11.5px;
  line-height: 1.2;
}
.bd-won {
  margin: 6px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, #f5b301 18%, var(--fn-card));
  font-size: 13px;
  font-weight: 800;
}
.bd-common {
  margin: 2px 0 0;
  color: var(--fn-muted);
  font-size: 13px;
}
.bd-actions {
  display: grid;
  gap: 6px;
  align-self: stretch;
  width: 100%;
  margin-top: 14px;
}
.bd-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--fn-border);
  border-radius: 14px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.bd-action:hover {
  border-color: color-mix(in srgb, var(--fn-accent) 50%, var(--fn-border));
}
.bd-action .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--fn-accent);
}
@media (max-width: 480px) {
  .bd-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* A streak together, and last week's winner */
.bd-together {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fn-accent) 12%, var(--fn-card));
  font-size: 12.5px;
  font-weight: 800;
}
.bd-crown {
  font-size: 0.9em;
}
/* A study group: pick a note, then friends */
.bd-section-btn {
  margin-left: auto;
  font-weight: 700;
}
.bd-pick {
  display: grid;
  gap: 6px;
  align-self: stretch;
  width: 100%;
  max-height: 46vh;
  overflow-y: auto;
  text-align: left;
}
.bd-pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--fn-border);
  border-radius: 14px;
  background: var(--fn-card);
  color: var(--fn-ink);
  font: inherit;
  cursor: pointer;
}
.bd-pick-row.on {
  border-color: var(--fn-accent);
  background: color-mix(in srgb, var(--fn-accent) 10%, var(--fn-card));
}
.bd-pick-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.bd-pick-text small {
  color: var(--fn-muted);
  font-size: 12.5px;
}
.bd-tick {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--fn-border);
  border-radius: 50%;
  color: transparent;
}
.bd-pick-row.on .bd-tick {
  border-color: var(--fn-accent);
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.bd-tick .icon {
  width: 14px;
  height: 14px;
}
/* ⋯ (block or report someone who isn't a friend), and small round buttons like it */
.bd-more {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--fn-border);
  border-radius: 50%;
  background: var(--fn-card);
  color: var(--fn-muted);
  cursor: pointer;
}
.bd-more:hover {
  color: var(--fn-ink);
}
.bd-more .icon {
  width: 16px;
  height: 16px;
}
.bd-have {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fn-muted);
  font-size: 14px;
  font-weight: 700;
}
.bd-have .icon {
  width: 16px;
  height: 16px;
}
/* A code for another device */
.bd-code {
  margin: 4px 0 0;
  font: 800 30px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  text-align: center;
}
.bd-push-note {
  margin-bottom: 14px;
}
.bd-push-note > .icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--fn-accent);
}
/* Room between the Friends page's sections */
.bd-live .aw-section {
  margin-top: 20px;
}
.bd-live > .aw-section:first-child {
  margin-top: 8px;
}
.bd-live .bd-hint {
  margin: 0 2px;
}
.bd-near-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed color-mix(in srgb, var(--fn-accent) 45%, var(--fn-border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--fn-accent) 6%, var(--fn-card));
}
.bd-near-note p {
  flex: 1;
  min-width: 200px;
  margin: 0;
  color: var(--fn-muted);
  font-size: 14px;
}
/* The weekly leaderboard (each person in their own box) */
.bd-board {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bd-board li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--fn-border);
  border-radius: 14px;
  background: var(--fn-card);
}
.bd-board li.you {
  border-color: color-mix(in srgb, var(--fn-accent) 40%, var(--fn-border));
  background: color-mix(in srgb, var(--fn-accent) 12%, var(--fn-card));
}
.bd-rank {
  width: 26px;
  font-weight: 800;
  text-align: center;
}
.bd-board b {
  flex: 1;
}
.bd-points {
  font-weight: 800;
  color: color-mix(in srgb, var(--fn-accent) 70%, var(--fn-ink));
}
/* Picking a username */
.bd-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 24px auto 0;
  padding: 26px 24px;
  border: 1px solid var(--fn-border);
  border-radius: 24px;
  background: var(--fn-card);
  text-align: center;
}
.bd-setup h2 {
  margin: 0;
  font-size: 22px;
}
.bd-setup p {
  margin: 0;
  color: var(--fn-muted);
}
.bd-setup-av {
  display: block;
}
.bd-avatars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  justify-items: center;
  gap: 6px;
  align-self: stretch;
  max-height: 212px;
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bd-avatar {
  width: 42px;
  height: 42px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-ink) 5%, var(--fn-card));
  font-size: 22px;
  cursor: pointer;
}
.bd-avatar.on {
  border-color: var(--fn-accent);
  background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-card));
}
.bd-name {
  display: flex;
  align-items: center;
  gap: 2px;
  width: min(320px, 100%);
  padding: 12px 16px;
  border: 1.5px solid var(--fn-border);
  border-radius: 14px;
  color: var(--fn-muted);
  font-size: 17px;
  font-weight: 700;
}
.bd-name input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--fn-ink);
  font: inherit;
}
.bd-error {
  color: #d03b40 !important;
  font-weight: 600;
}
.bd-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fn-muted);
  font-size: 14px;
}
/* My code */
.bd-qr {
  position: relative;
  width: min(260px, 70vw);
  margin: 6px auto 4px;
  padding: 10px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12);
}
.bd-qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.bd-qr-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  font-size: 28px;
  transform: translate(-50%, -50%);
}
.bd-scan {
  position: relative;
  overflow: hidden;
  width: min(320px, 80vw);
  aspect-ratio: 1;
  margin: 8px auto;
  border-radius: 20px;
  background: #000;
}
.bd-scan video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bd-scan-frame {
  position: absolute;
  inset: 18%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
}
/* Studying together */
.bd-timer {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  border-radius: 999px;
  background: var(--fn-accent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--fn-accent) 40%, transparent);
  color: var(--fn-on-accent, #fff);
  font-weight: 700;
  transform: translateX(-50%);
}
.bd-timer-stop {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
  cursor: pointer;
}
.bd-timer-stop .icon {
  width: 14px;
  height: 14px;
}
.bd-quiz .quiz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bd-quiz .quiz-q {
  margin: 6px 0 14px;
}

/* Version history (versions.js): the list of older copies, then one of them big. */
#modal .modal-card.vh-modal {
  width: min(480px, 100%);
}
.vh-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 460px);
  margin: 4px 0 6px;
  padding: 2px;
  overflow-y: auto;
  text-align: left;
}
.vh-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 9%, transparent);
  border-radius: 16px;
  background: var(--fn-card);
  color: var(--fn-ink);
  text-align: left;
  transition: transform 0.25s var(--spring), background-color 0.15s;
}
.vh-row:hover {
  background: color-mix(in srgb, var(--fn-accent) 7%, var(--fn-card));
}
.vh-row:active {
  transform: scale(0.98);
}
.vh-row > .icon {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--fn-muted);
}
.vh-thumb,
.vh-big {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fn-ink) 10%, transparent);
  border-radius: 10px;
  background: #fff;
  color: var(--fn-muted);
}
.vh-thumb {
  width: 46px;
  height: 58px;
}
.vh-thumb img,
.vh-big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.vh-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vh-text b {
  font-size: calc(15px * var(--fn-font));
}
.vh-text small {
  color: var(--fn-muted);
  font-size: calc(13px * var(--fn-font));
}
.vh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: var(--fn-muted);
}
.vh-empty .icon {
  width: 30px;
  height: 30px;
}
.vh-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 6px 0 14px;
}
.vh-big {
  width: 150px;
  height: 194px;
  margin-bottom: 10px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.vh-detail small {
  color: var(--fn-muted);
}

/* Handwritten maths to LaTeX (editor-ui.js): the maths typeset, and its LaTeX to copy. */
#modal .modal-card.ltx-modal {
  width: min(520px, 100%);
}
.ltx-show {
  max-width: 100%;
  margin: 6px 0 12px;
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fn-ink) 10%, transparent);
  color: #1f2a44;
  font-size: 22px;
}
.ltx-show .katex-display {
  margin: 0;
}
.ltx-code {
  max-height: 140px;
  margin: 0 0 14px;
  padding: 10px 12px;
  overflow: auto;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-ink) 6%, var(--fn-card));
  color: var(--fn-ink);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
}

/* Live Smart Notes (recorder.js): a tab in the full-screen words, and on the play-back bar. */
.rec-full-tabs {
  justify-content: center;
  margin: 4px auto 0;
}
.rec-full-smart {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 18px 22px 120px;
  font-size: calc(19px * var(--fn-font));
  line-height: 1.55;
}
.rec-full-smart h3,
.rec-smart h3 {
  margin: 18px 0 6px;
  color: var(--fn-accent-text, var(--fn-accent));
  font-size: 1.1em;
}
.rec-full-smart ul,
.rec-smart ul {
  margin: 0 0 6px;
  padding-left: 22px;
}
.rec-full-smart li {
  margin: 6px 0;
  animation: tr-in 0.4s ease-out both;
}
.rec-smart-busy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--fn-muted);
  font-size: 0.85em;
}
.rec-full-words[hidden],
.rec-full-smart[hidden] {
  display: none;
}

/* Action items (editor-ui.js): the things to do, each with a tick box. */
#modal .modal-card.ai-items-modal {
  width: min(480px, 100%);
}
.ai-items {
  display: grid;
  gap: 6px;
  max-height: min(46vh, 380px);
  margin: 4px 0 14px;
  overflow-y: auto;
  text-align: left;
}
.ai-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fn-ink) 4%, var(--fn-card));
  cursor: pointer;
}
.ai-item input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--fn-accent);
}
.ai-item span {
  flex: 1;
  font-weight: 700;
}
.ai-item small {
  flex-shrink: 0;
  color: var(--fn-muted);
  font-weight: 800;
}

/* Subscriptions: paying monthly or for a year at once (plans.js). */
.pl-every {
  display: flex;
  width: fit-content;
  margin: 4px auto 14px;
  padding: 4px;
  border-radius: 999px;
  background: var(--fn-card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fn-ink) 10%, transparent);
}
.pl-every button {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fn-muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.pl-every button.on {
  background: var(--fn-accent);
  color: var(--fn-on-accent, #fff);
}
.pl-every em {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 99px;
  background: #ffe1ec;
  color: #c2316b;
  font-size: 0.78em;
  font-style: normal;
}
.pl-per {
  margin: -4px 0 6px;
  color: var(--fn-muted);
  font-size: calc(13px * var(--fn-font));
  font-weight: 700;
}

/* View-only share links (sharelink.js): the link to copy, what it means, and how sending is going. */
#modal .modal-card.sl-modal {
  width: min(480px, 100%);
}
.sl-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.sl-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 6px 4px 14px;
  border: 1.5px solid var(--fn-border);
  border-radius: 14px;
  background: var(--fn-main);
}
.sl-link > .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--fn-accent-text);
}
.sl-url {
  flex: 1;
  min-width: 0;
  padding: 10px 4px;
  border: 0;
  outline: 0;
  background: none;
  color: var(--fn-ink);
  font: 700 calc(15px * var(--fn-font)) var(--font);
  text-overflow: ellipsis;
}
.sl-line,
.sl-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  color: var(--fn-muted);
  font-size: calc(14px * var(--fn-font));
  line-height: 1.45;
  text-align: left;
}
.sl-line > .icon,
.sl-note > .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--fn-accent-text);
}
.sl-note {
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fn-accent) 8%, transparent);
}
.sl-busy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 8px 0 12px;
  padding: 18px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--fn-accent) 8%, transparent);
  color: var(--fn-ink);
  font-weight: 700;
}
.sl-spin {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2.5px solid color-mix(in srgb, var(--fn-accent) 25%, transparent);
  border-top-color: var(--fn-accent);
  border-radius: 50%;
  animation: fn-spin 0.8s linear infinite;
}
.sl-actions .link.sure {
  background: color-mix(in srgb, #d13c3c 12%, transparent);
}

/* ---------- Phones: a tab bar along the bottom, and everything sized for thumbs ---------- */
/* (Under 760 px wide the sidebar slides in instead; More on the tab bar opens it.) */
.fn-dock {
  display: none;
}
@media (max-width: 759px) {
  .fn-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid color-mix(in srgb, var(--fn-ink) 8%, transparent);
    background: color-mix(in srgb, var(--fn-card) 90%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fn-dock-btn {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 52px;
    padding: 7px 2px 4px;
    border: 0;
    border-radius: 16px;
    background: none;
    color: var(--fn-muted);
    font: 800 11.5px var(--font);
    -webkit-tap-highlight-color: transparent;
  }
  .fn-dock-btn .icon {
    width: 23px;
    height: 23px;
    transition: transform 0.3s var(--spring);
  }
  .fn-dock-btn.on {
    color: var(--fn-accent-text, var(--fn-accent));
  }
  .fn-dock-btn.on::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    z-index: -1;
    width: 56px;
    height: 30px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--fn-accent) 15%, transparent);
    transform: translateX(-50%);
  }
  .fn-dock-btn:active .icon {
    transform: scale(0.88);
  }
  .fn-dock-btn .fn-badge {
    position: absolute;
    top: 2px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
  }
  /* (Typing, the keyboard needs the room: the bar steps aside.) */
  body:has(.fn-main :is(input, textarea, [contenteditable="true"]):focus) .fn-dock {
    transform: translateY(110%);
  }
  .fn-menu-btn {
    display: none !important;
  }
  .fn-page {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #toasts {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .rec-pill-host {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  /* Home: less empty space at the top, and the shortcuts two by two. */
  .fn-home {
    padding-top: 12px;
  }
  .fn-ask-title {
    margin-top: 28px;
  }
  .fn-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
  }
  .fn-card {
    flex-direction: column;
    gap: 8px;
    min-height: 108px;
    padding: 16px 10px;
    font-size: calc(16px * var(--fn-font));
  }
  .fn-card .icon {
    width: 26px;
    height: 26px;
  }
  .fn-card br {
    display: inline;
  }
  .fn-cards .fn-badge {
    position: absolute;
    top: 9px;
    right: 9px;
  }

  /* Note cards: titles get two lines, and ⋯ is easier to hit. */
  .fn-note-text {
    padding: 10px 40px 12px 12px;
  }
  .fn-note-title {
    display: -webkit-box;
    font-size: calc(16px * var(--fn-font));
    line-height: 1.2;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .fn-note-date {
    font-size: calc(13px * var(--fn-font));
  }
  .fn-note-more {
    right: 2px;
    bottom: 4px;
    width: 42px;
    height: 42px;
    opacity: 0.85;
  }

  /* A page's chips (sorting and so on) slide sideways in one row instead of wrapping. */
  .fn-head-actions {
    flex-wrap: nowrap;
    max-width: 100%;
    margin: 0 -18px;
    padding: 2px 18px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .fn-head-actions::-webkit-scrollbar {
    display: none;
  }
  .fn-head-actions:has(.fn-chip) {
    flex: 1 1 100%;
  }
  .fn-head-actions > * {
    flex-shrink: 0;
  }
  .fn-head > div:first-child {
    min-width: 0;
  }

  /* Templates three to a row. */
  .fn-templates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
  }
  .fn-tpl-name {
    font-size: calc(13px * var(--fn-font));
  }

  /* Boxes to type in stay at 16 px, so phones don't zoom in on them. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select {
    font-size: max(16px, 1em);
  }
  .pf-w-privacy {
    padding: 10px 14px;
  }
}

/* Small phones: windows come up from the bottom, like a sheet, within easy reach of a thumb. */
@media (max-width: 600px) {
  #modal {
    align-items: flex-end;
    padding: 0;
  }
  #modal .modal-card {
    position: relative;
    width: 100%;
    max-width: none !important;
    max-height: 92dvh;
    padding: 30px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 28px 28px 0 0 !important;
  }
  #modal .modal-card::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--fn-ink) 16%, transparent);
    transform: translateX(-50%);
  }
}