/* Ditto studio: the desk by the window.
   The room is the landing's room: warm light from the upper left, a cool
   shade to the lower right, the shadow of a branch in one corner. The page is
   the only object with weight in it, and the ink the only strong colour.
   Panels are paper laid on the desk; only what floats over the page (the
   style panel, the menu, the dock) is frosted. */

body.in-studio {
  overflow: hidden;
}
.studio {
  /* the studio's own names, mapped onto the design system (both themes) */
  --air: var(--surface);
  --mist: var(--surface-2);
  --haze: var(--surface-3);
  --st-glass: var(--veil);
  --st-glass-strong: var(--veil-strong);
  --st-glass-edge: var(--veil-edge);
  --st-glass-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-float);
  --st-paper-shadow: var(--sh-paper);
  --st-card-shadow: var(--sh-1);
  --st-hover: var(--hover);
  --st-link: var(--accent);
  --st-focus: var(--accent);
  --st-dur-1: 160ms;
  --st-dur-2: 300ms;
  --st-dur-3: 640ms;
  --st-ease: var(--ease);

  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--desk);
  color: var(--ink);
  font-size: calc(15px * var(--ts, 1));
  padding-top: env(safe-area-inset-top, 0px);
  isolation: isolate;
}
@keyframes st-mist {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes st-drawer {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}
@keyframes st-sheet {
  from {
    transform: translateY(100%);
  }
}

/* the sky the desk floats in: golden hour above a sea of cloud, the sun
   low on the horizon (the moon at night); the clouds are drawn by sky.js,
   still, once per size and theme */
.st-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(34% 22% at 80% 80%, color-mix(in srgb, var(--sun) 85%, transparent), transparent 70%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 32%, var(--sky-3) 60%, var(--horizon) 79.5%,
      color-mix(in srgb, var(--cloud-lit) 70%, var(--horizon)) 80.5%, var(--cloud-mid) 100%);
}

/* ------------------------------------------------------------------ top bar */
.st-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding: 0 16px 0 20px;
  min-width: 0;
}
.st-top .brand {
  color: var(--ink);
  margin-right: 6px;
}
.st-top .brand .logo-slot {
  height: 28px;
  width: 68px;
}
.st-title {
  min-width: 0;
  flex: 0 1 280px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  padding: 0 10px;
  background: transparent;
  font-weight: 560;
  font-size: calc(15px * var(--ts, 1));
  color: var(--text);
  text-overflow: ellipsis;
  transition: background var(--st-dur-1);
}
.st-title:hover {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.st-title:focus {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  outline: none;
}
.st-top .grow {
  flex: 1;
}
.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 220px;
  height: 36px;
  padding: 0 9px 0 11px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2);
  font-size: calc(14px * var(--ts, 1));
  font-weight: 520;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--st-dur-1), box-shadow var(--st-dur-1), color var(--st-dur-1);
}
.st-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-chip svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.st-chip .chev {
  width: 14px;
  height: 14px;
  margin-left: -1px;
  opacity: 0.55;
}
.st-chip:hover,
.st-chip[aria-expanded="true"],
.st-chip.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--st-card-shadow);
}
.st-src-btn {
  padding-right: 12px;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 0;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  flex: none;
  transition: background var(--st-dur-1), color var(--st-dur-1);
}
.icon-btn:hover,
.icon-btn[aria-expanded="true"] {
  background: var(--st-hover);
  color: var(--text);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}
.icon-btn[aria-pressed="true"] {
  background: var(--surface-2);
  color: var(--text);
}

/* save: one primary action, and a caret for every other format */
.split {
  display: inline-flex;
  margin-left: 4px;
  border-radius: 12px;
  box-shadow: 0 10px 24px -12px rgba(25, 29, 41, 0.55);
}
.split .btn {
  --h: 38px;
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.split .split-main {
  border-radius: 12px 0 0 12px;
  padding: 0 14px 0 13px;
  gap: 8px;
  font-size: calc(14.5px * var(--ts, 1));
}
.split .split-more {
  border-radius: 0 12px 12px 0;
  padding: 0 9px;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.split .split-more svg {
  width: 16px;
  height: 16px;
}
.split .btn:hover,
.split .btn:active {
  transform: none;
}
.split .btn:disabled {
  /* clearly inert: an outline, not a faded fill */
  opacity: 1;
  background: transparent;
  color: var(--text-3, var(--text-2));
  box-shadow: inset 0 0 0 1px var(--line-2, var(--line));
  cursor: not-allowed;
}
.split:has(.btn:disabled) {
  box-shadow: none;
}
.split .btn:disabled:hover {
  background: transparent;
}

/* ------------------------------------------------------------------ body */
/* no z-index here: the phone sheets inside must stack with the root's layers */
.st-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}
.studio[data-source="open"] .st-body {
  grid-template-columns: clamp(320px, 28vw, 400px) minmax(0, 1fr);
}

/* the text drawer: a flat card on the desk */
.st-source {
  display: none;
  flex-direction: column;
  min-height: 0;
  margin: 0 0 16px 16px;
  border-radius: 20px;
  background: var(--air);
  box-shadow: inset 0 0 0 1px var(--line), var(--st-card-shadow);
  overflow: hidden;
}
.studio[data-source="open"] .st-source {
  display: flex;
  animation: st-drawer var(--st-dur-2) var(--st-ease) both;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 0 10px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.panel-head .tabs {
  flex: 1;
  min-width: 0;
}
.panel-x {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
}
.panel-x svg {
  width: 16px;
  height: 16px;
}
.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  position: relative;
  height: 40px;
  padding: 0 9px;
  border: 0;
  background: none;
  color: var(--text-3);
  font-weight: 560;
  font-size: calc(14px * var(--ts, 1));
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--st-dur-1);
}
.tab svg {
  width: 16px;
  height: 16px;
}
/* words are enough in the panels; the icons made the bar overflow */
.panel-head .tab svg {
  display: none;
}
.tab:hover,
.tab[aria-selected="true"] {
  color: var(--text);
}
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}
.tabpanel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
}
.tabpanel[hidden] {
  display: none;
}
#panel-write:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.fieldset + .fieldset {
  margin-top: 22px;
}
/* labels are quiet sentence case, not a dashboard's uppercase mono */
.fs-title {
  font-family: var(--font-body);
  font-size: calc(13px * var(--ts, 1));
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.fs-title button {
  font-family: var(--font-body);
  font-size: calc(13px * var(--ts, 1));
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  cursor: pointer;
  font-weight: 520;
}
.fs-title button:hover {
  color: var(--text);
}
.studio .why {
  font-size: calc(13px * var(--ts, 1));
  color: var(--text-3);
  margin-top: 14px;
}

/* editor */
.fmt-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-radius: 14px 14px 0 0;
  background: var(--mist);
  box-shadow: inset 0 0 0 1px var(--line);
  flex: none;
}
.fmt-bar button {
  height: 32px;
  min-width: 32px;
  padding: 0 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.fmt-bar button svg {
  width: 16px;
  height: 16px;
}
.fmt-bar button:hover {
  background: var(--surface);
  color: var(--text);
}
.fmt-bar .sep {
  width: 1px;
  margin: 6px 3px;
  background: var(--line-2);
}
.fmt-hl {
  background: var(--hl);
  color: #191d29;
  border-radius: 3px;
  padding: 0 3px;
}
.fmt-box {
  border: 1.5px solid currentColor;
  border-radius: 3px;
  padding: 0 3px;
  font-size: calc(11px * var(--ts, 1));
}
.fmt-bar .fmt-sym {
  width: auto;
  height: 32px;
  font-size: calc(13px * var(--ts, 1));
  padding: 0 6px;
  background: transparent;
  box-shadow: none;
}
.editor {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 240px;
  resize: none;
  border: 0;
  border-radius: 0 0 14px 14px;
  padding: 14px 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: calc(15px * var(--ts, 1));
  line-height: 1.62;
  color: var(--text);
  tab-size: 4;
}
.editor::placeholder {
  color: var(--text-3);
}
.editor:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 60%, transparent);
}
.editor-foot {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: calc(12.5px * var(--ts, 1));
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.editor-foot .grow {
  flex: 1;
}
.help {
  margin-top: 14px;
  flex: none;
}
.help summary {
  cursor: pointer;
  margin-bottom: 0;
  list-style: none;
}
.help summary::-webkit-details-marker {
  display: none;
}
.help[open] summary {
  margin-bottom: 10px;
}
.help summary .im-chev {
  margin-left: 2px;
}
.help[open] summary .im-chev {
  transform: rotate(180deg);
}
.help-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  font-size: calc(13.5px * var(--ts, 1));
  color: var(--text-2);
}
.help-grid code {
  font-family: var(--font-mono);
  font-size: calc(12.5px * var(--ts, 1));
  background: var(--mist);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--text);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ desk */
.st-deskwrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
}
.st-stage {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* pages fade out under the top bar instead of being cut off */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}
/* room under the last page for the dock */
.st-stage::after {
  content: "";
  display: block;
  height: 104px;
}
.pages {
  display: grid;
  justify-items: center;
  gap: 32px;
  padding: 16px 32px 32px;
  min-width: min-content;
}
.page {
  position: relative;
  border-radius: 2px;
  background: #fdfcf8;
  box-shadow: var(--st-paper-shadow);
}
.page canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.page canvas.overlay {
  mix-blend-mode: darken;
  pointer-events: none;
}
/* a flat pen's ink as vector shapes over the paper: sharp at any zoom (vecink.js) */
.page svg.ink-vec {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}
.page canvas.overlay.light {
  mix-blend-mode: screen;
}
.page .pno {
  position: absolute;
  right: 0;
  bottom: -24px;
  font-size: calc(12px * var(--ts, 1));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
/* a 1 px box on the nib; the pen is painted as its overflow (see penSvg) */
.page .pen-tip {
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: visible;
}
/* dark mode: the page is paper under a lamp, not a lightbox. The filter
   dims the page number with it, so that starts a step lighter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .studio .page,
  :root:not([data-theme="light"]) .studio .empty-sheet {
    filter: brightness(0.9);
  }
  :root:not([data-theme="light"]) .studio .page .pno {
    color: var(--text-2);
  }
}
:root[data-theme="dark"] .studio .page,
:root[data-theme="dark"] .studio .empty-sheet {
  filter: brightness(0.9);
}
:root[data-theme="dark"] .studio .page .pno {
  color: var(--text-2);
}
.limit-note {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 4px auto 0;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--air);
  box-shadow: inset 0 0 0 1px var(--line), var(--st-card-shadow);
  font-size: calc(13.5px * var(--ts, 1));
  color: var(--text-2);
  text-align: center;
}
.limit-note .link-btn {
  color: var(--st-link);
  font-weight: 600;
}

/* the page's own tools (.st-rail) and the drawing tools' toolbar (.st-drawdock) are styled at the end of this file */
.num {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ empty desk */
.st-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  padding: 20px 24px 24px;
}
.st-empty[hidden] {
  display: none;
}
.empty-sheet {
  position: relative;
  border-radius: 2px;
  background: #fdfcf8;
  box-shadow: var(--st-paper-shadow);
  animation: st-mist var(--st-dur-3) var(--st-ease) both;
}
.empty-sheet canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.empty-sheet canvas.overlay {
  mix-blend-mode: darken;
  pointer-events: none;
}
/* the empty page says what to do, in type on its rules (the paper is always light, dark mode only dims it, so
   its ink is fixed rather than the theme's) */
.empty-prompt {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  padding: 0 4%;
  /* (its words sized to the sheet, not the window: a short sheet on a wide screen broke the title in two) */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  pointer-events: none;
  animation: ep-in 900ms var(--st-ease, cubic-bezier(.2, .7, .2, 1)) 160ms both;
}
.empty-prompt .ep-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 10.5cqi, 44px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #23264a;
}
.empty-prompt .ep-sub {
  font-family: var(--font-body);
  font-size: clamp(12.5px, 4.6cqi, 15px);
  line-height: 1.45;
  color: #5c5e78;
  max-width: 30ch;
}
.studio.dropping .empty-prompt .ep-title,
.studio .st-empty.dropping .empty-prompt .ep-title {
  color: #2f3fb8;
}
@keyframes ep-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .empty-prompt { animation: none; }
}
.sources {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
  animation: st-mist var(--st-dur-3) var(--st-ease) 120ms both;
}
.source {
  height: 44px;
  padding: 0 16px 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 14px;
  background: var(--air);
  box-shadow: inset 0 0 0 1px var(--line), var(--st-card-shadow);
  color: var(--text);
  font-size: calc(14.5px * var(--ts, 1));
  font-weight: 540;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--st-dur-1) var(--st-ease), box-shadow var(--st-dur-1);
}
.source svg {
  width: 18px;
  height: 18px;
  color: var(--text-2);
  flex: none;
}
.source:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--line-2), 2px 6px 16px -8px rgba(70, 52, 30, 0.22);
}
.source kbd {
  margin-left: 2px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--mist);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-3);
  font: 500 calc(12px * var(--ts, 1))/1 var(--font-body);
}
.sources-note {
  margin-top: 12px;
  max-width: 540px;
  font-size: calc(13px * var(--ts, 1));
  color: var(--text-3);
  text-align: center;
}
.shelf {
  width: min(960px, 100%);
  min-width: 0;
  margin-top: 48px;
  animation: st-mist var(--st-dur-3) var(--st-ease) 220ms both;
}
.shelf-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: calc(13px * var(--ts, 1));
  font-weight: 560;
  color: var(--text-3);
}
.shelf-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
@container (max-width: 860px) {
  .shelf-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 38%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .shelf-row .tpl {
    scroll-snap-align: start;
  }
}

/* ------------------------------------------------------------------ floating panel + menu */
.st-pop {
  position: fixed;
  z-index: 40;
  top: calc(64px + env(safe-area-inset-top, 0px));
  right: 16px;
  width: min(392px, calc(100vw - 32px));
  max-height: calc(100dvh - 88px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--st-glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: var(--st-glass-shadow);
  overflow: hidden;
  animation: st-mist var(--st-dur-2) var(--st-ease) both;
}
.st-pop[hidden] {
  display: none;
}
.st-pop .tabpanel {
  padding: 16px;
}
.st-menu {
  position: fixed;
  z-index: 45;
  min-width: 236px;
  padding: 6px;
  border-radius: 16px;
  background: var(--st-glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: var(--st-glass-shadow);
  animation: st-mist var(--st-dur-1) var(--st-ease) both;
}
.st-menu[hidden] {
  display: none;
}
.mi {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-size: calc(14px * var(--ts, 1));
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.mi svg {
  width: 17px;
  height: 17px;
  color: var(--text-2);
  flex: none;
}
.mi:hover,
.mi:focus-visible {
  background: var(--st-hover);
  outline: none;
}
.mi:focus-visible {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 60%, transparent);
}
.mi-group {
  padding: 8px 12px 3px;
  font-size: calc(11px * var(--ts, 1));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3, var(--text-2));
}
.mi-sep {
  height: 1px;
  margin: 5px 8px;
  background: var(--line);
}
.mi-plan b {
  margin-left: auto;
  padding-left: 12px;
  color: var(--st-link);
  font-weight: 600;
  font-size: calc(13px * var(--ts, 1));
}

/* ------------------------------------------------------------------ hands */
.search {
  width: 100%;
  height: 38px;
  border-radius: 12px;
  border: 0;
  padding: 0 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: calc(14px * var(--ts, 1));
}
.search:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, transparent);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.chip-row .chip {
  height: 28px;
  font-size: calc(12.5px * var(--ts, 1));
  padding: 0 10px;
}
.hand-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hand-tile {
  position: relative;
  border: 0;
  border-radius: 14px;
  padding: 6px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: box-shadow var(--st-dur-1), transform var(--st-dur-1) var(--st-ease);
}
.hand-tile:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--st-card-shadow);
}
.hand-tile[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--ink), var(--st-card-shadow);
}
.hand-tile .ht-paper {
  position: relative;
  border-radius: 9px;
  background: #fdfcf8;
  aspect-ratio: 1.7 / 1;
  overflow: hidden;
}
.hand-tile canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hand-tile .ht-meta {
  padding: 6px 4px 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.hand-tile .ht-name {
  font-weight: 600;
  font-size: calc(13.5px * var(--ts, 1));
}
.hand-tile .ht-blurb {
  font-size: calc(12px * var(--ts, 1));
  color: var(--text-3);
  padding: 0 4px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hand-tile .tier {
  font-size: calc(9.5px * var(--ts, 1));
  padding: 2px 5px;
}
.hand-tile .del {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 0;
  background: rgba(255, 255, 255, 0.88);
  display: grid;
  place-items: center;
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--st-dur-1);
}
.hand-tile:hover .del,
.hand-tile .del:focus-visible {
  opacity: 1;
}
.hand-tile .del svg {
  width: 14px;
  height: 14px;
}
.hand-tile .del.keep {
  right: 42px;
}
.hand-file-row {
  display: flex;
  justify-content: flex-end;
  margin: 6px 0 2px;
}
.action-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.action-tile {
  border: 0;
  border-radius: 14px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  display: grid;
  gap: 4px;
  transition: box-shadow var(--st-dur-1);
}
.action-tile:hover {
  box-shadow: inset 0 0 0 1px var(--line-2), var(--st-card-shadow);
}
.action-tile svg {
  width: 20px;
  height: 20px;
  color: var(--text-2);
}
.action-tile b {
  font-size: calc(13.5px * var(--ts, 1));
}
.action-tile span {
  font-size: calc(12px * var(--ts, 1));
  color: var(--text-3);
}

/* pens */
.pen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.pen-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  text-align: left;
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 550;
  color: var(--text);
}
.pen-opt canvas {
  width: 44px;
  height: 18px;
  flex: none;
}
.pen-opt[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.pen-opt .lock {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 13px;
  height: 13px;
  color: var(--text-3);
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  position: relative;
}
.swatch[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink);
}
.swatch.custom {
  background: conic-gradient(#e0553f, #d9b23a, #3f9a5c, #3d7fd0, #7a52c7, #e0553f);
  overflow: hidden;
}
.swatch.custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.swatch.custom:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* papers */
.paper-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.paper-opt {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  text-align: center;
  color: var(--text-2);
  font-size: calc(12px * var(--ts, 1));
  font-weight: 550;
}
.paper-opt .thumb {
  position: relative;
  display: block;
  aspect-ratio: 0.8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-2), 1px 2px 6px -2px rgba(70, 52, 30, 0.14);
  margin-bottom: 5px;
}
.paper-opt canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.paper-opt[aria-pressed="true"] {
  color: var(--text);
}
.paper-opt[aria-pressed="true"] .thumb {
  box-shadow: 0 0 0 2px var(--ink), 1px 2px 8px -2px rgba(70, 52, 30, 0.18);
}
.paper-opt .lock {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-2);
}
.select {
  width: 100%;
  height: 38px;
  border-radius: 12px;
  border: 0;
  /* (the colour only: the shorthand took away base.css's chevron, and a select read as a plain field) */
  padding: 0 34px 0 10px;
  background-color: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: calc(14px * var(--ts, 1));
}
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.seg-ctl {
  display: flex;
  padding: 3px;
  border-radius: 12px;
  background: var(--mist);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg-ctl button {
  flex: 1;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text-2);
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 540;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--st-dur-1), color var(--st-dur-1);
}
.seg-ctl button:hover {
  color: var(--text);
}
.seg-ctl button svg {
  width: 14px;
  height: 14px;
}
.seg-ctl button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--st-card-shadow), inset 0 0 0 1px var(--line);
}
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: calc(14px * var(--ts, 1));
}
.toggle input {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 99px;
  background: var(--line-2);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex: none;
}
.toggle input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s var(--ease);
}
.toggle input:checked {
  background: var(--ink);
}
.toggle input:checked::after {
  transform: translateX(16px);
}

/* how human: three presets, then the sliders under Fine-tune */
.presets {
  display: grid;
  gap: 16px;
}
.preset-row .fs-title {
  margin-bottom: 8px;
}
.fine {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.fine > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: calc(14px * var(--ts, 1));
  font-weight: 560;
  color: var(--text-2);
}
.fine > summary::-webkit-details-marker {
  display: none;
}
.fine > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--st-dur-1) var(--st-ease);
}
.fine[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.fine[open] > summary {
  margin-bottom: 16px;
}

/* sliders in panel */
.sl {
  margin-bottom: 12px;
}
.sl-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 540;
}
.sl-top .val {
  font-size: calc(12.5px * var(--ts, 1));
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  font-weight: 450;
}
.sl .range {
  height: 22px;
  margin-top: 2px;
}
.lock-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--mist);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: calc(13px * var(--ts, 1));
  color: var(--text-2);
}
.lock-note svg {
  width: 16px;
  height: 16px;
  color: var(--text-2);
  flex: none;
  margin-top: 2px;
}
.lock-note button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand-600);
  font-weight: 650;
  cursor: pointer;
}

/* ------------------------------------------------------------------ assistant */
.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 540;
  cursor: pointer;
  text-align: left;
  color: var(--text-2);
}
.mode svg {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  flex: none;
}
.mode[aria-pressed="true"] {
  color: var(--text);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.mode[aria-pressed="true"] svg {
  color: var(--text-2);
}
.fld {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}
.fld label {
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 560;
}
.fld .hint {
  font-size: calc(12.5px * var(--ts, 1));
  color: var(--text-3);
}
.inp,
.txt {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 9px 11px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: calc(14px * var(--ts, 1));
  line-height: 1.5;
}
.txt {
  min-height: 84px;
  resize: vertical;
}
.inp:focus,
.txt:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 60%, transparent);
}
.ai-out {
  margin-top: 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  padding: 12px;
  font-size: calc(14px * var(--ts, 1));
  line-height: 1.55;
  white-space: pre-wrap;
  max-height: 340px;
  overflow: auto;
  color: var(--text);
}
.ai-out.muted {
  color: var(--text-3);
}
.ai-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-status {
  margin-top: 10px;
  font-size: calc(13px * var(--ts, 1));
  color: var(--text-3);
}
.study-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--mist);
  font-size: calc(13px * var(--ts, 1));
  color: var(--text-2);
}

/* batch */
.batch-table {
  margin-top: 10px;
  max-height: 220px;
  overflow: auto;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--ts, 1));
}
.batch-table table {
  border-collapse: collapse;
  width: 100%;
}
.batch-table th,
.batch-table td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.batch-table th {
  position: sticky;
  top: 0;
  background: var(--mist);
  color: var(--text-3);
  font-weight: 500;
}
.batch-table tr.sel td {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.batch-preview {
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 5px 3px;
  margin: -5px -3px;
  border-radius: 4px;
}
.batch-table tr {
  cursor: pointer;
}

/* ------------------------------------------------------------------ export dialog */
.opt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.opt {
  position: relative;
  border: 0;
  border-radius: 14px;
  padding: 12px;
  text-align: left;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  color: var(--text);
  display: grid;
  gap: 3px;
}
.opt b {
  font-size: calc(14px * var(--ts, 1));
}
.opt span {
  font-size: calc(12.5px * var(--ts, 1));
  color: var(--text-3);
}
.opt[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--ink);
  background: var(--surface);
}
.opt .lock {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  color: var(--text-3);
}
.m-label {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: calc(13px * var(--ts, 1));
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
.export-preview {
  margin-top: 14px;
  border-radius: 14px;
  background: var(--desk);
  padding: 14px;
  display: grid;
  place-items: center;
  max-height: 260px;
  overflow: hidden;
}
.export-preview canvas,
.export-preview img {
  max-height: 230px;
  width: auto;
  max-width: 100%;
  box-shadow: 1px 3px 10px -3px rgba(70, 52, 30, 0.3);
}
.export-preview canvas.video-poster {
  max-height: 230px;
  border-radius: 8px;
}
.demo-note {
  margin-top: 12px;
  font-size: calc(13px * var(--ts, 1));
  color: var(--text-3);
}
.upsell-plan {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.up-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
}
.up-name .ico {
  width: 18px;
  height: 18px;
  color: var(--brand-600);
}
.up-price {
  margin-left: auto;
  font-size: calc(13.5px * var(--ts, 1));
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.upsell-plan ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: calc(14px * var(--ts, 1));
  color: var(--text-2);
}
.upsell-plan li {
  display: flex;
  gap: 8px;
  align-items: center;
}
.upsell-plan li .ico {
  width: 15px;
  height: 15px;
  color: var(--brand-600);
}
.checkout .co-line {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
}

/* ------------------------------------------------------------------ templates */
.tpl-groups {
  margin-top: 8px;
}
.tpl-group h4 {
  margin: 22px 0 10px;
  font-size: calc(13px * var(--ts, 1));
  font-weight: 560;
  color: var(--text-3);
}
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 12px;
}
.tpl {
  border: 0;
  border-radius: 16px;
  padding: 8px;
  background: var(--air, var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), var(--st-card-shadow, none);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  display: grid;
  gap: 6px;
  min-width: 0;
  transition: transform 0.18s var(--ease), box-shadow 0.18s;
}
.tpl:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--line-2), 2px 6px 16px -8px rgba(70, 52, 30, 0.22);
}
.tpl .tp-thumb {
  position: relative;
  aspect-ratio: 1.45;
  border-radius: 10px;
  overflow: hidden;
  background: var(--desk);
  display: grid;
  place-items: center;
}
/* while the engine writes the thumbnail: a sheet of paper with faint lines of writing, a light sweeping over it */
.tpl .tp-thumb.loading canvas {
  opacity: 0;
}
.tpl .tp-thumb canvas {
  transition: opacity 0.35s var(--ease);
}
.tpl .tp-thumb.loading::before {
  content: "";
  position: absolute;
  inset: 12% 22%;
  border-radius: 3px;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 14% 22% / 58% 5% no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 14% 40% / 70% 5% no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 14% 58% / 46% 5% no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 14% 76% / 62% 5% no-repeat,
    var(--surface);
  box-shadow: 1px 2px 8px -2px rgba(70, 52, 30, 0.18);
}
.tpl .tp-thumb.loading.failed::before {
  opacity: 0.5;
}
.tpl .tp-thumb.loading:not(.failed)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat;
  animation: tp-shimmer 1.4s ease-in-out infinite;
}
@keyframes tp-shimmer {
  to { background-position: 250% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tpl .tp-thumb.loading::after { animation: none; }
}
.tpl .tp-thumb canvas {
  max-width: 92%;
  max-height: 88%;
  box-shadow: 1px 2px 8px -2px rgba(70, 52, 30, 0.22);
}
.tpl b {
  font-size: calc(14px * var(--ts, 1));
  font-weight: 600;
  padding: 0 4px;
}
.tpl span {
  font-size: calc(12.5px * var(--ts, 1));
  color: var(--text-3);
  padding: 0 4px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ------------------------------------------------------------------ teach flow */
.teach-steps {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.teach-steps span {
  font-size: calc(12.5px * var(--ts, 1));
  font-weight: 540;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-3);
}
.teach-steps span.on {
  background: var(--text);
  color: var(--bg);
}
/* the characters a learned hand had to guess: a card at the top of the hand panel, and the pads to write them */
.missing-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #fff) 82%, #f4c66f 18%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9973a 30%, transparent);
}
.missing-card[hidden] { display: none; }
.missing-card .mc-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.missing-card .mc-text b { font-size: calc(14px * var(--ts, 1)); }
.missing-card .mc-text span { font-size: calc(12.5px * var(--ts, 1)); line-height: 1.4; color: var(--text-2); }
.missing-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  max-height: 58vh;
  overflow: auto;
  padding: 2px;
}
.mg-item { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: stretch; }
.mg-guess-wrap {
  position: relative;
  border-radius: 12px;
  background: #f6f3ec;
  box-shadow: inset 0 0 0 1px rgba(70, 52, 30, 0.08);
  display: grid;
  place-items: center;
}
.mg-guess-wrap canvas { width: 56px; height: 56px; }
.mg-guess-wrap span {
  position: absolute;
  bottom: 4px;
  font-size: calc(10px * var(--ts, 1));
  letter-spacing: .02em;
  color: #8a8c9e;
}
.cells {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}
.cell {
  position: relative;
  border-radius: 12px;
  background: #fdfcf8;
  box-shadow: inset 0 0 0 1px rgba(70, 52, 30, 0.1);
  aspect-ratio: 0.9;
  overflow: hidden;
  touch-action: none;
}
.cell canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.cell .ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Onest", sans-serif;
  font-size: 64px;
  color: rgba(70, 52, 30, 0.07);
  pointer-events: none;
  padding-bottom: 12%;
}
.cell .cell-label {
  position: absolute;
  left: 8px;
  top: 6px;
  font-size: calc(12px * var(--ts, 1));
  font-weight: 500;
  color: #676b76;
  pointer-events: none;
}
.cell .cell-clear {
  position: absolute;
  right: 6px;
  top: 5px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 0;
  background: rgba(70, 52, 30, 0.05);
  color: #4c5161;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cell .cell-clear svg {
  width: 13px;
  height: 13px;
}
.teach-progress {
  margin-top: 14px;
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.teach-progress i {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 99px;
  transition: width 0.3s var(--ease);
}
.teach-preview {
  margin-top: 14px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.teach-preview canvas {
  display: block;
  width: 100%;
  height: auto;
}
.drop {
  margin-top: 14px;
  border-radius: 16px;
  border: 1.5px dashed var(--line-2);
  padding: 22px;
  text-align: center;
  color: var(--text-2);
  font-size: calc(14px * var(--ts, 1));
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.drop.over,
.drop:hover {
  background: var(--surface-2);
  border-color: var(--text-3);
}
.drop svg {
  width: 28px;
  height: 28px;
  color: var(--text-2);
  display: block;
  margin: 0 auto 8px;
}
.match-results {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.match-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.match-row canvas {
  width: 100%;
  border-radius: 8px;
  background: #fdfcf8;
  display: block;
}
.dna.small {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.photo-preview {
  margin-top: 12px;
  max-height: 180px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-2);
}
.photo-preview img,
.photo-preview canvas {
  max-height: 180px;
  max-width: 100%;
  display: block;
}
.photo-learn-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.photo-learn-intro p { margin: 4px 0 0; color: var(--text-2); font-size: calc(13px * var(--ts, 1)); }
.photo-learn-intro .btn { flex: 0 0 auto; }
.photo-learn { display: grid; gap: 12px; }
.photo-learn .fld { display: grid; gap: 6px; }
.photo-transcript { width: 100%; min-height: 140px; resize: vertical; font: inherit; }
.photo-letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 12px 0; max-height: 320px; overflow: auto; }
.photo-letter-group { display: flex; flex-wrap: wrap; align-content: start; gap: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.photo-letter-group > b { flex: 0 0 100%; font-size: calc(15px * var(--ts, 1)); }
.photo-letter-sample { display: grid; place-items: center; min-width: 25px; min-height: 30px; padding: 2px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; cursor: pointer; }
.photo-letter-sample:hover, .photo-letter-sample:focus-visible { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 1px; }
.photo-letter-sample canvas { display: block; width: auto; max-width: 42px; height: 28px; object-fit: contain; }
@media (max-width: 560px) { .photo-learn-intro { align-items: stretch; flex-direction: column; } }

/* ------------------------------------------------------------------ documents */
.doc-list {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  max-height: 56dvh;
  overflow: auto;
}
.doc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 4px 6px 4px 4px;
}
.doc-row.current {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.doc-open {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
  border: 0;
  background: none;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
  border-radius: 10px;
}
.doc-open:hover {
  background: var(--surface);
}
.doc-open b {
  font-size: calc(14.5px * var(--ts, 1));
}
.doc-open span {
  font-size: calc(12.5px * var(--ts, 1));
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-open .snip {
  color: var(--text-2);
}

/* assistant photo picker */
.fld-label {
  display: block;
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 560;
  color: var(--text-2);
  margin-bottom: 6px;
}
.photo-drop {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px dashed var(--line-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: calc(13.5px * var(--ts, 1));
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.photo-drop svg {
  width: 20px;
  height: 20px;
  color: var(--text-2);
}
.photo-drop:hover,
.photo-drop.over {
  background: var(--surface-2);
  border-color: var(--text-3);
}
.photo-drop.has {
  border-style: solid;
}
.photo-drop .pd-thumb {
  width: 54px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 1px 2px 4px -1px rgba(70, 52, 30, 0.25);
}
.photo-drop:not(.has) .pd-thumb {
  display: none;
}
input.sr-only:focus-visible + .photo-drop {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* dropping a file anywhere */
.drop-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  background: color-mix(in srgb, var(--desk) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.studio.dropping .drop-veil {
  display: grid;
}
.drop-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 34px 44px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--brand), var(--st-glass-shadow);
  color: var(--text-2);
  font-size: calc(14px * var(--ts, 1));
  animation: st-mist var(--st-dur-2) var(--st-ease) both;
}
.drop-card svg {
  width: 30px;
  height: 30px;
  color: var(--brand);
}
.drop-card b {
  font-size: calc(19px * var(--ts, 1));
  color: var(--text);
}
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 4px 2px;
  font: inherit;
  font-size: calc(13px * var(--ts, 1));
  font-weight: 520;
  color: var(--text-2);
  cursor: pointer;
}
.link-btn:hover {
  color: var(--text);
}
.link-btn .ico {
  width: 14px;
  height: 14px;
}

/* messages rise above the dock (and the phone bar) instead of covering it */
body.in-studio .toast-root {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------------ small screens */
.mobile-bar,
.scrim {
  display: none;
}
.show-sm {
  display: none !important;
}
@media (max-width: 1100px) {
  .st-chip {
    max-width: 170px;
  }
}
@media (max-width: 900px) {
  .st-src-btn span,
  .st-chip .chev {
    display: none;
  }
  .st-src-btn {
    padding: 0 10px;
  }
}
@media (max-width: 760px) {
  .show-sm {
    display: flex !important;
  }
  .hide-sm {
    display: none !important;
  }
  .st-top {
    height: 54px;
    gap: 4px;
    padding: 0 8px 0 14px;
  }
  .st-top .brand .logo-slot {
    width: 58px;
    height: 24px;
  }
  .st-title {
    flex: 1 1 auto;
  }
  .studio[data-source="open"] .st-body {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the page first; text and style are sheets that leave it in view */
  .st-source {
    position: fixed;
    left: 0;
    right: 0;
    /* sits on the tab bar, which stays reachable while typing */
    bottom: max(var(--kb, 0px), calc(84px + env(safe-area-inset-bottom, 0px)));
    z-index: 31;
    height: min(36dvh, 340px);
    margin: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: inset 0 0 0 1px var(--line), 0 -10px 30px -12px rgba(36, 30, 22, 0.3);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .studio[data-source="open"] .st-source {
    animation: st-sheet var(--st-dur-2) var(--st-ease) both;
  }
  .st-source .fmt-bar button,
  .st-source .fmt-bar .select {
    min-width: 44px;
    height: 44px;
  }
  .fmt-bar.fmt-collapsed > :not(.fmt-toggle) {
    display: none;
  }
  .fmt-bar.fmt-collapsed {
    padding-block: 2px;
  }
  .fmt-bar .fmt-toggle {
    font-weight: 650;
  }
  .fmt-bar .fmt-toggle[aria-expanded="true"] {
    background: var(--surface-2, rgba(0, 0, 0, 0.06));
  }
  /* the tab bar stays above the open text sheet; the page above stays lit */
  .studio[data-source="open"] .mobile-bar {
    z-index: 32;
  }
  .studio[data-source="open"] .scrim {
    background: transparent;
  }
  .studio[data-source="open"] :is(.st-rail, .st-drawdock) {
    display: none;
  }
  .editor {
    min-height: 120px;
  }
  .st-pop {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: min(62dvh, 560px);
    max-height: none;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: st-sheet var(--st-dur-2) var(--st-ease) both;
  }
  .sheet-grab {
    width: 40px;
    height: 5px;
    border-radius: 99px;
    background: var(--line-2);
    margin: 8px auto 0;
    flex: none;
  }
  .scrim {
    position: fixed;
    inset: 0;
    z-index: 28;
    background: rgba(36, 30, 22, 0.16);
  }
  .studio[data-source="open"] .scrim,
  .studio[data-pop="hand"] .scrim,
  .studio[data-pop="pen"] .scrim,
  .studio[data-pop="paper"] .scrim,
  .studio[data-pop="human"] .scrim {
    display: block;
  }
  /* a style sheet is open: it has its own close button, the bar would sit on it */
  .studio[data-pop="hand"] .mobile-bar,
  .studio[data-pop="pen"] .mobile-bar,
  .studio[data-pop="paper"] .mobile-bar,
  .studio[data-pop="human"] .mobile-bar {
    display: none;
  }
  .pages {
    padding: 12px 12px 24px;
    gap: 22px;
  }
  .st-stage::after {
    height: 150px;
  }
  .mobile-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100vw - 24px), 420px);
    box-sizing: border-box;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 29;
    gap: 2px;
    padding: 5px;
    border-radius: 20px;
    background: var(--st-glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
    backdrop-filter: blur(20px) saturate(1.15);
    box-shadow: var(--st-glass-shadow);
  }
  .mobile-bar button {
    min-width: 44px;
    width: 100%;
    height: 56px;
    padding: 0 2px;
    border-radius: 15px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: calc(11px * var(--ts, 1));
    font-weight: 560;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }
  .mobile-bar button svg {
    width: 20px;
    height: 20px;
  }
  .mobile-bar button span {
    white-space: nowrap;
  }
  .mobile-bar button.primary {
    background: var(--primary);
    color: var(--on-primary);
  }
  .mobile-bar button:disabled {
    opacity: 0.5;
  }
  body.in-studio .toast-root {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  /* empty desk on a phone: the camera and the clipboard come first */
  .st-empty {
    /* clear of the tab bar */
    padding: 14px 16px calc(104px + env(safe-area-inset-bottom, 0px));
  }
  .sources {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-top: 22px;
  }
  .source {
    justify-content: center;
    padding: 0 10px;
    font-size: calc(14px * var(--ts, 1));
  }
  .source kbd {
    display: none;
  }
  .source[data-src="photo"] {
    order: -2;
  }
  .source[data-src="paste"] {
    order: -1;
  }
  .shelf {
    margin-top: 36px;
  }
  .opt-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 761px) {
  .sheet-grab,
  .fmt-bar .fmt-toggle {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio *,
  .studio *::before,
  .studio *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* ------------------------------------------------------------------ print */
.print-sheets {
  display: none;
}
@media print {
  body.printing-sheets {
    overflow: visible !important;
    background: #fff;
  }
  body.printing-sheets > :not(.print-sheets) {
    display: none !important;
  }
  body.printing-sheets .print-sheets {
    display: block;
  }
  .print-sheets img {
    display: block;
    break-after: page;
  }
  .print-sheets img:last-child {
    break-after: auto;
  }
  /* printing from the browser menu instead: just the pages */
  body.in-studio:not(.printing-sheets) {
    overflow: visible !important;
  }
  body.in-studio:not(.printing-sheets) .studio {
    position: static;
    display: block;
    background: none;
  }
  body.in-studio:not(.printing-sheets) :is(.st-top, .st-source, .st-rail, .st-drawdock, .dr-console, .st-pop, .st-menu, .scrim, .mobile-bar, .st-sky, .drop-veil, .limit-note, .toast-root) {
    display: none !important;
  }
  body.in-studio:not(.printing-sheets) .st-body {
    display: block;
  }
  body.in-studio:not(.printing-sheets) .st-stage {
    position: static;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.in-studio:not(.printing-sheets) .page {
    box-shadow: none;
    filter: none;
    break-after: page;
  }
  body.in-studio:not(.printing-sheets) .page .pno {
    display: none;
  }
}

/* Restore a clear keyboard indicator where individual input and menu styles
   remove the site's default outline. The pale halo separates it from the sky. */
.studio :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--st-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--surface);
}
.studio .tab:focus-visible {
  outline-offset: -3px;
  box-shadow: inset 0 0 0 1px var(--surface);
}
.studio .tabpanel:focus-visible {
  outline-offset: -3px;
  box-shadow: inset 0 0 0 3px var(--st-focus);
}

/* write on a photo of a page */
.rewrite-page { margin: 0; display: grid; gap: 10px; }
.rewrite-page figcaption { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* the landing page's before/after, without its tilt, inside the dialog */
.rw-ba { transform: none; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }
.rw-ba canvas { width: 100%; height: 100%; }

.action-tiles > #act-rewrite { grid-column: 1 / -1; }

/* ================================================================== the desk by the window
   One layer over the mechanics above: shapes, type and surfaces in the
   design system's language. */

/* (the top bar is studio-shell.css's: two islands on the sky) */
.icon-btn {
  border-radius: 999px;
}

/* the text drawer: a sheet of card laid on the desk */
.st-source {
  margin: 4px 0 18px 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}
.panel-head {
  gap: 6px;
  padding: 12px 10px 6px 12px;
  border-bottom: 0;
}
/* tabs in a panel: a quiet segmented track */
.panel-head .tabs {
  flex: 1;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 1px 2px rgba(70, 52, 30, 0.06);
}
.panel-head .tab {
  flex: 1;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--ink-3);
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 560;
  transition: background var(--t-1), color var(--t-1), box-shadow var(--t-1);
}
.panel-head .tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(70, 52, 30, 0.1), 0 0 0 0.5px var(--line);
}
:root[data-theme="dark"] .panel-head .tab[aria-selected="true"] {
  background: var(--surface-2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel-head .tab[aria-selected="true"] {
    background: var(--surface-2);
  }
}
.panel-head .tab[aria-selected="true"]::after {
  display: none;
}
.panel-x {
  margin-bottom: 0;
}
.tabpanel {
  padding: 10px 16px 16px;
}
.fmt-bar {
  gap: 1px;
  padding: 5px;
  border-radius: 16px 16px 0 0;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.fmt-bar button {
  height: 30px;
  min-width: 30px;
  border-radius: 9px;
  color: var(--ink-3);
  font-weight: 600;
}
.fmt-bar button:hover {
  background: var(--hover);
  color: var(--ink);
}
.editor {
  border-radius: 0 0 16px 16px;
  padding: 16px 18px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: calc(15.5px * var(--ts, 1));
  line-height: 1.7;
}
:root[data-theme="dark"] .editor {
  background: var(--surface);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .editor {
    background: var(--surface);
  }
}
.editor:focus {
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-wash);
}

/* pages */
.pages {
  gap: 44px;
  padding: 22px 40px 40px;
}
.page .pno {
  bottom: -26px;
  font-family: var(--font-display);
  font-size: calc(13px * var(--ts, 1));
  color: var(--ink-3);
}
/* (on a phone the page runs to the screen's edges: its number keeps off the edge) */
@media (max-width: 600px) {
  .page .pno {
    right: 16px;
  }
}

/* the floating style panel and the menu */
.st-pop {
  top: calc(70px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: min(420px, calc(100vw - 28px));
  max-height: calc(100dvh - 90px);
  border-radius: 26px;
  background: var(--veil-strong);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
  backdrop-filter: blur(26px) saturate(1.35);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-3);
}
.st-pop .tabpanel {
  padding: 10px 16px 18px;
}
.st-menu {
  min-width: 248px;
  padding: 6px;
  border-radius: 20px;
  background: var(--veil-strong);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
  backdrop-filter: blur(26px) saturate(1.35);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-3);
}
.mi {
  height: 40px;
  border-radius: 13px;
  color: var(--ink);
}
.mi svg {
  color: var(--ink-3);
}
.fs-title {
  font-size: calc(12.5px * var(--ts, 1));
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

/* the hand panel */
.hand-section + .hand-section {
  margin-top: 24px;
}
.hs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 10px;
  font-size: calc(12.5px * var(--ts, 1));
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}
.hand-section .hand-grid {
  margin-top: 0;
}
.hand-section .search {
  height: 38px;
}
.learn-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px 14px 14px;
  border: 0;
  border-radius: 20px;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(255, 214, 170, 0.22), transparent 60%),
    var(--primary);
  color: var(--on-primary);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(25, 29, 41, 0.2), 0 14px 30px -16px rgba(25, 29, 41, 0.6);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.learn-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(25, 29, 41, 0.2), 0 20px 40px -18px rgba(25, 29, 41, 0.66);
}
.lc-art {
  position: relative;
  display: grid;
  align-content: center;
  gap: 7px;
  height: 66px;
  padding: 0 9px;
  border-radius: 6px;
  background: #fbf7ee;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
  transform: rotate(-4deg);
  overflow: hidden;
}
.lc-art i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #3b4c9e;
  opacity: 0.85;
}
.lc-art i:nth-child(1) {
  width: 80%;
}
.lc-art i:nth-child(2) {
  width: 62%;
}
.lc-art i:nth-child(3) {
  width: 72%;
}
.lc-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 30%;
  background: linear-gradient(180deg, rgba(110, 140, 255, 0), rgba(110, 140, 255, 0.4));
  border-bottom: 1.5px solid rgba(90, 120, 255, 0.9);
  animation: lc-scan 2.8s var(--ease-io) infinite;
}
@keyframes lc-scan {
  to {
    transform: translateY(440%);
  }
}
.lc-text {
  display: grid;
  gap: 3px;
}
.lc-text b {
  font-family: var(--font-display);
  font-size: calc(19px * var(--ts, 1));
  font-weight: 420;
  letter-spacing: -0.005em;
}
.lc-text span {
  font-size: calc(13px * var(--ts, 1));
  line-height: 1.45;
  opacity: 0.72;
}
.lc-go {
  width: 18px;
  height: 18px;
  opacity: 0.8;
  transition: transform var(--t-2) var(--ease);
}
.learn-card:hover .lc-go {
  transform: translateX(3px);
}
.quick-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.quick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 12px 11px;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: calc(13px * var(--ts, 1));
  font-weight: 560;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--t-1), transform var(--t-2) var(--ease);
}
.quick:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2);
}
.quick svg {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
}
.hand-tile {
  padding: 6px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hand-tile:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2);
}
.hand-tile[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1.5px var(--ink), var(--sh-2);
}
.hand-tile .ht-paper {
  border-radius: 12px;
  background: linear-gradient(170deg, #fefdfa, #f8f4ea);
  box-shadow: inset 0 0 0 1px rgba(25, 29, 41, 0.05);
}
.hand-tile .ht-meta {
  padding: 8px 6px 2px;
}
.hand-tile .ht-name {
  font-family: var(--font-display);
  font-size: calc(16px * var(--ts, 1));
  font-weight: 450;
}
.hand-tile .ht-blurb {
  padding: 0 6px 4px;
  color: var(--ink-3);
}
.hand-tile.busy {
  opacity: 0.55;
  pointer-events: none;
}
.hand-tile .del {
  border-radius: 999px;
  background: var(--veil-strong);
}
.tier.mine {
  color: var(--good);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 35%, transparent);
}

/* the empty desk */
.st-empty {
  padding: 26px 24px 32px;
}
.sources {
  margin-top: 30px;
  gap: 8px;
}
.source {
  height: 46px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  background: var(--veil-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  font-weight: 560;
}
.source:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2);
}
.source[data-src="type"] {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 1px 2px rgba(25, 29, 41, 0.2), 0 10px 24px -12px rgba(25, 29, 41, 0.55);
}
.source[data-src="type"] svg {
  color: inherit;
}
.source kbd {
  border-radius: 7px;
}
.sources-note {
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 12px;
  color: var(--ink-2);
  background: var(--veil-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.shelf {
  margin-top: 56px;
}
.shelf-head {
  font-size: calc(12.5px * var(--ts, 1));
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}
/* the invitation to learn your own hand, under the ways in */
.yours-invite {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(560px, 100%);
  margin-top: 26px;
  padding: 14px 14px 14px 20px;
  border: 0;
  border-radius: 20px;
  background: var(--veil);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  animation: st-mist var(--st-dur-3) var(--st-ease) 180ms both;
  transition: box-shadow var(--t-2), transform var(--t-2) var(--ease);
}
.yours-invite:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2);
}
.yi-text {
  flex: 1;
  display: grid;
  gap: 2px;
}
.yi-text b {
  font-family: var(--font-display);
  font-size: calc(18px * var(--ts, 1));
  font-weight: 420;
}
.yi-text span {
  font-size: calc(13.5px * var(--ts, 1));
  color: var(--ink-3);
}
.yi-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: calc(14px * var(--ts, 1));
  font-weight: 560;
  white-space: nowrap;
}
.yi-go svg {
  width: 15px;
  height: 15px;
}
@media (max-width: 760px) {
  .yours-invite {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
/* write on a photo: each written page, its views and its downloads */
.rw-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rw-page-head b { font-family: var(--font-display); font-size: calc(20px * var(--ts, 1)); font-weight: 400; }
.rw-tabs button { font-size: calc(12.5px * var(--ts, 1)); white-space: nowrap; }
.rw-single { position: relative; border-radius: var(--r-m); overflow: hidden; background: #d9d3c7; box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); animation: rw-fade 0.35s var(--ease) both; }
.rw-single[hidden], .rw-ba[hidden] { display: none; }
.rw-single canvas { display: block; width: 100%; height: 100%; }
.rw-ba:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rewrite-page figcaption { flex-wrap: wrap; }
@keyframes rw-fade { from { opacity: 0; } }
@media (max-width: 560px) {
  .rw-tabs { width: 100%; overflow-x: auto; }
  .rewrite-page figcaption { justify-content: stretch; }
  .rewrite-page figcaption .btn { flex: 1; }
}

/* the hand gallery: learned hands lead; font hands fold away below */
.hs-count {
  margin-left: 8px;
  margin-right: auto;
  padding: 1px 7px;
  border-radius: 99px;
  font-style: normal;
  font-size: calc(11px * var(--ts, 1));
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--line);
}
.hs-count:empty { display: none; }
.font-hands > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  margin: 0 0 4px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background var(--t-1);
}
.font-hands > summary::-webkit-details-marker { display: none; }
.font-hands > summary:hover { background: var(--veil); }
.font-hands > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-chev { width: 14px; height: 14px; transition: transform var(--t-2) var(--ease); }
.font-hands[open] .hs-chev { transform: rotate(180deg); }
.hs-note { margin: 6px 2px 12px; font-size: calc(12.5px * var(--ts, 1)); line-height: 1.45; color: var(--ink-3); }
.hand-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hand-tile .ht-blurb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* night in the studio: the moon low on a dark cloud sea, never a bright grey band behind the shelf */
:root[data-theme="dark"] .st-sky {
  background:
    radial-gradient(40% 26% at 78% 88%, color-mix(in srgb, var(--sun) 16%, transparent), transparent 70%),
    radial-gradient(70% 40% at 50% 104%, color-mix(in srgb, var(--lilac) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 40%, var(--sky-2) 74%, var(--sky-3) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-sky {
    background:
      radial-gradient(40% 26% at 78% 88%, color-mix(in srgb, var(--sun) 16%, transparent), transparent 70%),
      radial-gradient(70% 40% at 50% 104%, color-mix(in srgb, var(--lilac) 22%, transparent), transparent 70%),
      linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 40%, var(--sky-2) 74%, var(--sky-3) 100%);
  }
}

/* an icon on the light (moonlit) primary button needs the dark gold, or it vanishes into the button */
:root[data-theme="dark"] :is(.btn-brand, .btn-ink, .btn-paper) .ico { color: #8a5a14; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.btn-brand, .btn-ink, .btn-paper) .ico { color: #8a5a14; }
}
.lf :is(.btn-brand, .btn-ink) .ico { color: #4a3f8a; }
.rw-nudge { animation: rw-nudge 0.42s var(--ease); }
@keyframes rw-nudge { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { .rw-nudge { animation: none; } }
.hand-add .ht-paper {
  display: grid;
  place-items: center;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  border: 1.5px dashed var(--line-3);
}
.ha-plus {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 99px;
  color: var(--ink);
  background: var(--veil-strong);
  box-shadow: var(--sh-1);
  transition: transform var(--t-2) var(--ease);
}
.ha-plus svg { width: 18px; height: 18px; }
.hand-add:hover .ha-plus { transform: scale(1.08); }

/* learned hands: one card per name, older builds folded away, rename and remove on each */
.hand-tile .ht-versions {
  margin-left: auto;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: calc(11px * var(--ts, 1));
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--veil-strong);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hand-older {
  margin-top: 10px;
}
.hand-older > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  font-size: calc(13px * var(--ts, 1));
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hand-older > summary::-webkit-details-marker { display: none; }
.hand-older > summary .hs-chev { margin-left: auto; }
.hand-older[open] .hs-chev { transform: rotate(180deg); }
.hand-unhide {
  display: block;
  margin: 10px 2px 0;
  font-size: calc(12.5px * var(--ts, 1));
}
@media (hover: none) {
  .hand-tile .del {
    opacity: 1;
  }
}

/* pen-cam reels: four film looks, and a quiet second line on video toggles */
.opt-grid.opt-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .opt-grid.opt-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}
.toggle .toggle-sub {
  display: block;
  font-size: calc(12.5px * var(--ts, 1));
  color: var(--text-3);
}
.toggle input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ pass 2 polish */
/* Save before there is anything to save: a normal secondary button, with its reason in the tooltip */
.split .btn:disabled {
  background: var(--surface, #fff);
  color: var(--ink-2, var(--text-2));
  box-shadow: inset 0 0 0 1px var(--line-2, var(--line));
}
/* the empty desk: one row of ways in, the privacy line as quiet text, one rhythm */
.sources-note {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: calc(13px * var(--ts, 1));
  color: var(--text-3, var(--ink-3));
}
.yours-invite {
  margin-top: 16px;
}
.shelf-link {
  margin-top: 16px;
  text-align: center;
}
/* "From a handwritten photo": the two tools as two clear choices */
.photo-choices {
  grid-template-columns: 1fr 1fr;
}
.photo-choice {
  display: grid;
  gap: 6px;
  justify-items: start;
  text-align: left;
  padding: 16px;
}
.photo-choice svg {
  width: 22px;
  height: 22px;
}
@media (max-width: 560px) {
  .photo-choices {
    grid-template-columns: 1fr;
  }
}
/* your hands lead; another is one "Add a hand" away */
.hand-yours > .hand-section,
.hand-yours .hand-grid {
  margin-bottom: 10px;
}
.hand-addmore > summary {
  list-style: none;
  cursor: pointer;
  width: fit-content;
}
.hand-addmore > summary::-webkit-details-marker {
  display: none;
}
.hand-addmore .quick-row {
  margin-top: 8px;
}
/* the guessed-letters card stacks on a phone instead of wrapping into a narrow column */
.missing-card {
  flex-direction: column;
  align-items: stretch;
}
.missing-card .btn {
  align-self: flex-start;
}
@media (max-width: 760px) {
  /* with the Text sheet up, the page can scroll clear of it, so the line being written stays in view */
  .studio[data-source="open"] .pages {
    padding-bottom: calc(min(36dvh, 340px) + 120px);
  }
  /* toasts sit above the dock and the bar, never over the assistant's field */
  .studio:not([hidden]) ~ #toasts,
  body.in-studio #toasts {
    bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  }
}
.studio[data-zoom="text"] .st-stage {
  overflow-x: auto;
}

/* ---- features review fixes (export dialog, Quiz me control, sky, sources) ---- */
/* one selected state across features: a 2px accent ring on a tinted fill (matches panel.css) */
.seg-ctl button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 2px 8px var(--primary-glow);
}
.opt[aria-pressed="true"] {
  background: var(--surface-2);
  background-image: linear-gradient(var(--acc-wash, var(--accent-wash)), var(--acc-wash, var(--accent-wash)));
  box-shadow: inset 0 0 0 2px var(--acc, var(--accent));
}
/* export: options left, the preview (the film itself, for a video) sticky on the right */
.exp-cols { display: grid; gap: var(--sp-5); }
.exp-side { display: grid; gap: var(--sp-3); align-content: start; }
.exp-side .export-preview { margin-top: 0; }
@media (min-width: 1000px) {
  .modal.wide .exp-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .modal.wide .exp-side { position: sticky; top: 0; padding-top: var(--sp-5); }
  .modal.wide .exp-side .export-preview { max-height: 440px; }
  .modal.wide .exp-side .export-preview :is(canvas, img), .modal.wide .exp-side .export-preview canvas.video-poster { max-height: 400px; }
}
/* the sky's breathing canvas stays inside the viewport; the sources row scrolls sideways on a phone */
.st-sky { overflow: hidden; inset: 0; contain: paint; }
.sources { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sources::-webkit-scrollbar { display: none; }

/* ---- studio review fixes, 2026-10-09 (studio, its menus, templates, export, photo) ---- */
/* the dock steps aside on a phone while a sheet or the menu is open: it floated half-hidden under them */
@media (max-width: 760px) {
  .studio:is([data-pop="hand"], [data-pop="pen"], [data-pop="paper"], [data-pop="human"]) :is(.st-rail, .st-drawdock),
  body:has(#st-more[aria-expanded="true"]) :is(.st-rail, .st-drawdock) {
    visibility: hidden;
  }
  /* the empty desk clears the tab bar (the later desktop .st-empty padding had undone it) */
  .st-empty {
    padding-bottom: calc(var(--sp-9) + var(--sp-5) + env(safe-area-inset-bottom, 0px));
  }
  .sources-note {
    background: var(--surface);
    color: var(--ink-2);
    box-shadow: inset 0 0 0 1px var(--line);
    text-wrap: pretty;
  }
  /* bar labels: legible even when there is nothing to watch or save yet; disabled reads as dashed, not broken */
  .mobile-bar button {
    color: var(--ink-2);
  }
  .mobile-bar button:disabled {
    opacity: 1;
    color: color-mix(in srgb, var(--ink-2) 84%, transparent);
  }
  .mobile-bar button:disabled svg {
    opacity: 0.55;
    stroke-dasharray: 2.5 2;
  }
}
.st-menu:focus {
  outline: none;
}
/* the menu opened by a mouse: no ring on its first item, a hover tint instead */
.mi:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* learned-hand cards: a shimmer while the engine writes the sample, never an empty cream card */
.hand-tile .ht-paper.loading canvas {
  opacity: 0;
}
.hand-tile .ht-paper canvas {
  transition: opacity 0.3s var(--ease);
}
.hand-tile .ht-paper.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 16% 36% / 46% 6% no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 16% 62% / 64% 6% no-repeat,
    linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat;
  animation: ht-shimmer 1.4s ease-in-out infinite;
}
@keyframes ht-shimmer {
  to { background-position: 16% 36%, 16% 62%, 250% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hand-tile .ht-paper.loading::after { animation: none; }
}

/* LEARNED / YOURS: AA at its size */
.hand-tile .tier {
  font-size: calc(11px * var(--ts, 1));
  padding: 2px var(--sp-2);
}
.tier.mine {
  color: #16704a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tier.mine { color: #5fd6a0; }
}
:root[data-theme="dark"] .tier.mine { color: #5fd6a0; }

/* templates: Study's five cards on one row; the note wraps evenly */
body.in-studio .tpl-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
body.in-studio .modal .m-sub {
  max-width: 60ch;
  text-wrap: pretty;
}

/* wide sheets (templates, export) sit off the window's edge; the close button and the actions stay in reach */
body.in-studio .modal.wide {
  max-height: calc(100dvh - var(--sp-8));
}
body.in-studio .modal.wide:has(.tpl-groups, .exp-cols) > .modal-x {
  position: sticky;
  top: calc(-1 * var(--sp-3));
  float: right;
  margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) 0 var(--sp-2);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(20, 24, 50, 0.45);
  z-index: 4;
}
body.in-studio .modal.wide > .m-actions {
  position: sticky;
  bottom: -26px;
  z-index: 3;
  margin: var(--sp-5) -30px -26px;
  padding: var(--sp-4) 30px;
  background: var(--surface);
  box-shadow: 0 -12px 16px -12px var(--line-2), 0 -1px 0 var(--line);
}
@media (max-width: 760px) {
  body.in-studio .modal.wide > .m-actions {
    margin-inline: calc(-1 * var(--sp-5));
    padding-inline: var(--sp-5);
  }
}

/* export formats: one selected card, said by a tint, a ring and a check; the ring of focus only from the keyboard */
.opt:focus:not(:focus-visible) {
  outline: none;
}
.opt[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  /* (a disc of their colour's deep ink with the tick cut out of it: the card shows through the tick, so it reads by
     day and by night) */
  background: var(--acc-ink, var(--accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center / 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.4-8.3' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center / 100% no-repeat exclude, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.4-8.3' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.opt[aria-pressed="true"] .lock {
  display: none;
}
/* (a name keeps clear of the lock or the tick in its corner) */
.opt:is([aria-pressed="true"], :has(> .lock)) > b {
  padding-right: 18px;
}

/* the photo tools' forms: one label style, a select that looks pickable */
.photo-learn .fld > span {
  font: 600 calc(13px * var(--ts, 1))/1.3 var(--font-body);
  color: var(--ink-2);
}
.photo-learn .select {
  height: 42px;
  padding: 0 38px 0 var(--sp-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23767a85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 16px;
  cursor: pointer;
}

/* type and spacing on the scale: 12 / 14 / 16 / 20 and the --sp steps */
.st-source {
  margin: var(--sp-1) 0 var(--sp-4) var(--sp-4);
}


/* the cloud sea rests while a sheet is open over it */
body.in-studio:has(.modal-back) .st-sky * {
  animation-play-state: paused !important;
}
/* toasts rise above the whole dock (toolbar, chip row and prompt), never over the chips */
body.in-studio .toast-root { bottom: calc(var(--dock-h, 210px) + var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px) {
  body.in-studio .toast-root, body.in-studio #toasts.toast-root { bottom: calc(var(--dock-h-sm, 184px) + var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
}

/* sign-off: on a phone the four source buttons share the column instead of running past the right gutter */
@media (max-width: 760px) {
  .sources { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: visible; }
  .sources .source { min-width: 0; padding: 0 10px; gap: 6px; font-size: calc(13px * var(--ts, 1)); justify-content: center; white-space: nowrap; }
}

/* ---- the page's own tools, 2026-10-10: a slim rail by the page, apart from the assistant ----
   Draw, Watch it write and its speed, Write again; zoom and the fit; the page in view when there are
   several. Quieter than the assistant: a thinner frost, ink-3 icons, tooltips that slide out beside
   it. studio.js placeRail puts it just right of the page. The drawing tools' own toolbar opens at
   the foot of the desk (.st-drawdock) while the assistant steps aside. */
.st-rail {
  position: absolute;
  top: 50%;
  left: calc(100% - 66px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 48px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: color-mix(in srgb, var(--veil-strong) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: inset 0 0 0 1px var(--veil-edge), 0 0 0 0.5px rgba(62, 44, 92, 0.06), 0 14px 34px -18px rgba(62, 44, 92, 0.32);
  transform: translateY(-50%);
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease), visibility 0s;
}
/* (hidden ones leave the tab order too, once they've faded) */
.is-empty .st-rail {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(6px);
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease), visibility 0s linear var(--t-2);
}
.rbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font: 600 calc(12.5px * var(--ts, 1))/1 var(--font-body);
  cursor: pointer;
  transition: background var(--t-1), color var(--t-1), box-shadow var(--t-1);
}
.rbtn svg {
  width: 18px;
  height: 18px;
}
.rbtn:hover {
  background: var(--hover);
  color: var(--ink);
}
.rbtn[aria-pressed="true"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent);
}
.rbtn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.rbtn.r-speed {
  height: 30px;
  font-size: calc(12px * var(--ts, 1));
  color: var(--ink-3);
}
.rbtn.r-speed:hover {
  color: var(--ink);
}
.r-pct {
  font-size: calc(10.5px * var(--ts, 1));
  letter-spacing: -0.01em;
}
.rsep {
  width: 18px;
  height: 1px;
  margin: 4px 0;
  background: var(--line-2);
}
.st-rail .page-info {
  min-width: 0;
  padding: 6px 0 4px;
  font: 400 calc(13px * var(--ts, 1))/1 var(--font-display);
  color: var(--ink-3);
  text-align: center;
  white-space: nowrap;
}
.st-rail .page-info[hidden] {
  display: none;
}
/* tooltips: a slip of ink that slides out beside the button */
.rbtn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  padding: 7px 11px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--on-primary);
  font: 560 calc(12.5px * var(--ts, 1))/1 var(--font-body);
  white-space: pre;
  box-shadow: 0 10px 24px -12px rgba(26, 20, 50, 0.5);
  opacity: 0;
  transform: translate(-4px, -50%);
  pointer-events: none;
  transition: opacity 0.14s var(--ease), transform 0.2s var(--ease);
}
.st-rail.tips-left .rbtn[data-tip]::after {
  left: auto;
  right: calc(100% + 12px);
  transform: translate(4px, -50%);
}
@media (hover: hover) {
  .rbtn[data-tip]:hover::after {
    opacity: 1;
    transform: translate(0, -50%);
    transition-delay: 0.35s;
  }
}
.rbtn[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}
/* while drawing, the rail keeps only what still applies */
.studio.is-drawing .st-rail :is(.r-play, .r-speed, .r-again) {
  opacity: 0.35;
  pointer-events: none;
}

/* the drawing tools' toolbar: where the assistant was, while drawing */
.st-drawdock {
  position: absolute;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 7;
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}
.st-drawdock .dd-bar {
  pointer-events: auto;
  max-width: none;
}
.st-drawdock .dd-bar:not(.open),
.st-drawdock .dd-toggle {
  display: none;
}
.st-drawdock .dd-bar.open {
  animation: st-rise 0.32s var(--ease) both;
}
@keyframes st-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (max-width: 760px) {
  /* on a phone: just Draw, round, beside the assistant above the tab bar; it steps aside while the assistant is in use */
  .st-rail {
    top: auto;
    left: 12px !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    transform: none;
    background: var(--veil-strong);
    box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-float);
  }
  .st-rail > :not(.r-draw) {
    display: none !important;
  }
  .st-rail .r-draw {
    width: 52px;
    height: 52px;
  }
  .st-rail .r-draw svg {
    width: 20px;
    height: 20px;
  }
  .rbtn[data-tip]::after {
    display: none;
  }
  .is-empty .st-rail,
  .studio:has(.dr-console:is(.is-focus, .is-open, .busy)) .st-rail,
  .studio.is-drawing .st-rail {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.85);
    transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease), visibility 0s linear var(--t-2);
  }
  .st-drawdock {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 24px);
  }
  /* (two rows of tools: a card, not a stadium) */
  .st-drawdock .dd-bar.open {
    border-radius: 26px;
    padding: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .st-rail,
  .rbtn[data-tip]::after {
    transition: none;
  }
  .st-drawdock .dd-bar.open {
    animation: none;
  }
}

/* ---- the Style / Hand / Pen sheet on a phone is a bottom sheet, edge to edge on the screen's foot: the floating
   panel's rules (written after the phone ones) had hung it from the top, against the left edge */
@media (max-width: 760px) {
  .st-pop {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    min-height: min(42dvh, 360px);
    max-height: min(74dvh, 640px);
    border-radius: 26px 26px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ---- hand tiles: the badge sits on the sample's corner (beside the name it wrapped to two lines, and the name
   with it), the name has the row, the line under it may take two lines rather than end in "O…" */
.hand-tile {
  position: relative;
}
.hand-tile .ht-meta .tier {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(26, 28, 51, 0.12);
}
.hand-tile .ht-meta .tier svg {
  width: 10px;
  height: 10px;
}
.hand-tile .ht-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hand-tile .ht-blurb {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

/* ---- the sample-hand card's line never leaves "4–8 minutes." alone on a last line */
.yi-text span,
.yi-text {
  text-wrap: pretty;
}

/* ---- the empty desk ends above the Ask bar (its template link sat under it at 1440 x 900 until scrolled) */
@media (min-width: 761px) {
  .st-empty {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}
/* ---- the phone's note on what can be dropped in: the desk's own glass, not a tight little box */
@media (max-width: 760px) {
  .sources-note {
    padding: 10px 14px;
    border-radius: 14px;
  }
}

/* ---- the hand panel's "Teach Ditto your handwriting": a small golden-hour sky, not a flat navy slab by day */
.learn-card {
  background:
    radial-gradient(70% 120% at 100% 110%, color-mix(in srgb, var(--sun) 70%, transparent), transparent 70%),
    linear-gradient(160deg, var(--sky-1) 0%, var(--sky-3) 58%, var(--horizon) 100%);
  color: var(--on-sky);
  box-shadow: inset 0 0 0 1px var(--veil-edge), 0 14px 30px -18px rgba(60, 40, 100, 0.45);
}
.learn-card:hover {
  box-shadow: inset 0 0 0 1px var(--veil-edge), 0 20px 40px -20px rgba(60, 40, 100, 0.5);
}
/* ---- the badges on hand tiles: gold, never green */
.tier.mine {
  color: color-mix(in srgb, var(--gold-lo, #8f6620) 90%, var(--ink));
}
:root[data-theme="dark"] .tier.mine {
  color: var(--gold-hi);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tier.mine {
    color: var(--gold-hi);
  }
}

/* Add another handwriting (someone with a hand of their own): New handwriting first, in gold */
.hand-addmore .hs-sub {
  margin-top: 14px;
}
.quick.quick-new {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold, #c9962f) 60%, transparent);
  background: color-mix(in srgb, var(--gold, #c9962f) 10%, var(--surface));
}
.quick.quick-new svg {
  color: var(--gold, #c9962f);
}