/* The studio, 2026-10-15: the app's own language, round the page.

   Three places, each with one job:
   - the bar: two islands floating on the sky, as the app's own bar is. On the left the page: back to where it was
     opened from, its name in the serif (renamed right there), its notebook and when it's due. On the right what to
     do with it: Edit text, the assistant, Style (the hand's name written in it), the rest; then Save PDF on its
     own, the one ink primary, as the app's New is;
   - the page, with its own tools in a frosted pill over it (draw, watch it write, a new take, zoom), and Ask Ditto
     at its foot;
   - the Style panel: handwriting, pen and ink, size, paper and how human, every section in view. On a wide window
     it is a sheet of the app's paper docked beside the page; narrower it floats over the desk; on a phone it's a
     sheet from the foot of the screen.
   What floats is the app's frosted bar (--bar), what holds things is its paper (--sheet), and what's chosen is in
   the colour they chose (--acc, gold unless they picked another), never a gold or a navy of its own. Loaded after
   studio.css and app.css, and over them, so the night theme, stronger contrast and larger text follow. */

.studio {
  --insp-w: 352px;
  --insp-gap: 12px;
  --st-focus: var(--acc);
  --st-link: var(--acc-ink);
  /* the frosted pill of the app's bar, floating */
  --st-bar-shadow: inset 0 0 0 1px var(--bar-edge), 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 32px -18px rgba(50, 36, 90, 0.4);
  /* a quiet well (a chip, a track), and its hover */
  --st-well: color-mix(in srgb, var(--ink) 5%, transparent);
  --st-well-2: color-mix(in srgb, var(--ink) 9%, transparent);
  /* what's lifted out of a pill: the one you're in, as the app's places are */
  --st-lift: var(--sheet);
  --st-lift-shadow: 0 0 0 1px var(--sheet-edge), 0 2px 6px -2px rgba(50, 36, 90, 0.18), 0 8px 18px -10px rgba(50, 36, 90, 0.3);
  /* a chosen tile: their colour's ring on a breath of it */
  --st-pick-bg: color-mix(in srgb, var(--acc) 7%, var(--sheet));
  --st-pick-ring: inset 0 0 0 2px var(--acc), 0 10px 24px -16px color-mix(in srgb, var(--acc) 70%, transparent);
}
:root[data-theme="dark"] .studio {
  --st-bar-shadow: inset 0 0 0 1px var(--bar-edge), 0 14px 34px -16px rgba(0, 0, 12, 0.7);
  --st-lift: color-mix(in srgb, var(--ink) 12%, var(--sheet));
  --st-lift-shadow: 0 0 0 1px var(--sheet-edge), 0 4px 12px -6px rgba(0, 0, 0, 0.6);
  --st-pick-bg: color-mix(in srgb, var(--acc) 12%, var(--sheet));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .studio {
    --st-bar-shadow: inset 0 0 0 1px var(--bar-edge), 0 14px 34px -16px rgba(0, 0, 12, 0.7);
    --st-lift: color-mix(in srgb, var(--ink) 12%, var(--sheet));
    --st-lift-shadow: 0 0 0 1px var(--sheet-edge), 0 4px 12px -6px rgba(0, 0, 0, 0.6);
    --st-pick-bg: color-mix(in srgb, var(--acc) 12%, var(--sheet));
  }
}
/* stronger contrast: firm edges on everything that floats (the bar itself turns solid, app.css) */
:root[data-contrast="high"] .studio {
  --st-bar-shadow: inset 0 0 0 1.5px var(--sheet-edge), 0 12px 32px -18px rgba(50, 36, 90, 0.4);
  --st-well: color-mix(in srgb, var(--ink) 8%, transparent);
  --st-well-2: color-mix(in srgb, var(--ink) 13%, transparent);
  --st-lift-shadow: 0 0 0 1.5px var(--sheet-edge), 0 2px 6px -2px rgba(50, 36, 90, 0.2);
}

/* ------------------------------------------------------------------ the bar: two islands on the sky */
.studio .st-top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 12px 12px 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.studio .st-top > .grow {
  flex: 1 1 0;
  min-width: 0;
}
.studio .st-isle {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 56px;
  padding: 6px;
  border-radius: 999px;
  background: var(--bar);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--st-bar-shadow);
}
/* (the page's island gives way first, by its title; the tools and Save keep their width) */
.studio .st-top > .st-isle-page {
  flex: 0 1 auto;
  /* (whatever the bar holds, the page's island never spills under the tools: its rings keep a margin to draw in) */
  overflow: clip;
  overflow-clip-margin: 10px;
}
.studio .st-top > :is(.st-isle-tools, .split) {
  flex: none;
}

/* back: where the page was opened from (its name in the tooltip and the label) */
.studio .st-top .st-back {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  transition: background var(--t-1);
}
.studio .st-top .st-back > svg {
  width: 21px;
  height: 21px;
  color: inherit;
  transition: transform var(--t-2) var(--ease);
}
/* (hover only where there's a pointer to hover with: a tap on a phone would leave it lit) */
@media (hover: hover) {
  .studio .st-top .st-back:hover {
    background: var(--st-well);
  }
  .studio .st-top .st-back:hover > svg {
    transform: translateX(-2px);
  }
  .studio .st-top .st-title:hover {
    background: var(--st-well);
  }
  .studio .st-top :is(.st-subject, .st-due):hover {
    color: var(--ink);
    background: var(--st-well-2);
  }
  .studio .st-isle-tools .st-chip:hover {
    color: var(--ink);
    background: var(--st-well);
  }
  .studio .st-top .icon-btn:hover {
    color: var(--ink);
    background: var(--st-well);
  }
}

/* the page's name in the serif, renamed in place; then its notebook and when it's due */
.studio .st-top .st-doc {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: 4px;
  min-width: 0;
}
.studio .st-top .st-title {
  flex: 0 30 auto;
  width: 320px;
  min-width: 96px;
  max-width: 380px;
  height: 44px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  font: 400 calc(21px * var(--ts)) / 1.1 var(--font-display);
  letter-spacing: -0.008em;
  color: var(--ink);
  text-overflow: ellipsis;
  transition: background var(--t-1), box-shadow var(--t-1);
}
/* (as wide as its name, where the browser can; else a fixed width that gives way) */
@supports (field-sizing: content) {
  .studio .st-top .st-title {
    width: auto;
    field-sizing: content;
  }
}
.studio .st-top .st-title:focus {
  outline: none;
  background: var(--sheet);
  box-shadow: inset 0 0 0 1.5px var(--acc-line), 0 0 0 4px var(--acc-wash);
}
.studio .st-top :is(.st-subject, .st-due) {
  position: relative;
  /* (the name gives way, never these: a chip that gave a few pixels read "Chemist…" and "Due T…") */
  flex: none;
  min-width: 34px;
  gap: 7px;
  max-width: 190px;
  height: 34px;
  padding: 0 13px 0 11px;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--st-well);
  box-shadow: none;
  transition: background var(--t-1), color var(--t-1), box-shadow var(--t-1);
}
/* (34 px to the eye, 44 px to a finger) */
.studio .st-top :is(.st-subject, .st-due)::after {
  content: "";
  position: absolute;
  inset: -5px -1px;
}
.studio .st-top :is(.st-subject, .st-due).set {
  color: var(--ink);
}
.studio .st-top :is(.st-subject, .st-due)[aria-expanded="true"] {
  color: var(--ink);
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.studio .st-top :is(.st-subject, .st-due) .ico {
  flex: none;
  width: 15px;
  height: 15px;
}
.studio .st-top :is(.st-subject, .st-due) > span:not(.sj-dot) {
  min-width: 0;
  /* (cut short only when it's long: some faces paint a hair wider than they measure, and a word that fits whole
     read "Chemist…") */
  overflow: visible;
  text-overflow: clip;
}
.studio .st-top .st-subject.long > span:not(.sj-dot) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio .st-top .st-due[data-tone="over"] {
  color: var(--due-over);
  background: color-mix(in srgb, var(--due-over) 12%, transparent);
  box-shadow: none;
}
.studio .st-top .st-due[data-tone="today"] {
  color: var(--due-today);
  background: color-mix(in srgb, var(--due-today) 14%, transparent);
  box-shadow: none;
}
.studio .st-top .st-due[data-tone="soon"] {
  color: var(--due-soon);
  background: color-mix(in srgb, var(--due-soon) 11%, transparent);
}

/* what to do with the page: quiet in the pill, lifted out of it while it's open, its icon in their colour */
.studio .st-isle-tools .st-chip {
  flex: none;
  gap: 8px;
  max-width: none;
  height: 44px;
  padding: 0 15px 0 13px;
  border-radius: 999px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--ink-2);
  font-size: calc(14px * var(--ts));
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-1), color var(--t-1), box-shadow var(--t-2) var(--ease);
}
.studio .st-isle-tools .st-chip > svg {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  transition: color var(--t-1);
}
.studio .st-isle-tools .st-chip:is([aria-expanded="true"], .on) {
  color: var(--ink);
  background: var(--st-lift);
  box-shadow: var(--st-lift-shadow);
}
.studio .st-isle-tools .st-chip:is([aria-expanded="true"], .on) > svg {
  color: var(--acc);
}
/* (the assistant's mark is the app's mark for its AI, in their colour, as on Home's "Write it for me") */
.studio .st-isle-tools .st-claude-btn > .cl-spark {
  width: 17px;
  height: 17px;
  color: var(--acc);
}
.st-src-more {
  font-style: normal;
}
/* a hand still learning: their colour, as the app's own "Learning…" chip */
.studio .st-isle-tools .st-chip.st-learning {
  color: var(--ink);
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.studio .st-isle-tools .st-learning i {
  background: var(--acc);
}

/* Style: the hand's name written in it, its ink, and the word */
.studio .st-isle-tools .st-style-btn {
  gap: 10px;
  max-width: 330px;
  padding: 0 13px 0 15px;
}
.studio .st-style-btn .chip-hand {
  display: block;
  flex: none;
  margin: 0;
}
.st-style-btn .chip-ink {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 2px color-mix(in srgb, var(--sheet) 70%, transparent);
}
.studio .st-style-btn .chip-label {
  flex: none;
  overflow: visible;
  padding-left: 10px;
  border-left: 1px solid var(--line-2);
  color: var(--ink);
  font-weight: 650;
}
.studio .st-isle-tools .st-style-btn > .chip-ico {
  width: 17px;
  height: 17px;
  margin-left: -3px;
}

/* the rest, in a menu */
.studio .st-top .icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink-2);
  background: transparent;
}
.studio .st-top .icon-btn[aria-expanded="true"] {
  color: var(--ink);
  background: var(--st-lift);
  box-shadow: var(--st-lift-shadow);
}
.studio .st-top .icon-btn svg {
  width: 20px;
  height: 20px;
}

/* Save: the app's ink primary, alone, with a caret for every other format; one rim round both halves */
.studio .st-top .split {
  position: relative;
  display: inline-flex;
  margin: 0;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(30, 20, 50, 0.18), 0 14px 30px -12px rgba(30, 20, 60, 0.48), 0 10px 40px -14px color-mix(in srgb, var(--acc) 45%, transparent);
}
.studio .st-top .split::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 62%, transparent);
  pointer-events: none;
}
.studio .st-top .split .btn {
  --h: 44px;
  height: 44px;
  font-size: calc(14.5px * var(--ts));
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.26);
}
.studio .st-top .split .btn:hover,
.studio .st-top .split .btn:active {
  transform: none;
}
.studio .st-top .split .split-main {
  gap: 8px;
  padding: 0 16px 0 17px;
  border-radius: 999px 0 0 999px;
}
.studio .st-top .split .split-more {
  width: 42px;
  padding: 0 3px 0 0;
  border-radius: 0 999px 999px 0;
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--on-primary) 16%, transparent), inset 0 1px 0 rgba(255, 240, 210, 0.26);
}
.studio .st-top .split .split-more svg {
  width: 16px;
  height: 16px;
}
.studio .st-top .split .btn .ico {
  color: var(--acc-hi);
}
:root[data-theme="dark"] .studio .st-top .split .btn .ico {
  color: color-mix(in srgb, var(--acc) 70%, #3a2a08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .studio .st-top .split .btn .ico {
    color: color-mix(in srgb, var(--acc) 70%, #3a2a08);
  }
}
/* (nothing to save yet: a quiet button on the bar, its reason in the tooltip) */
.studio .st-top .split:has(.btn:disabled) {
  box-shadow: none;
}
.studio .st-top .split:has(.btn:disabled)::after {
  box-shadow: var(--st-bar-shadow);
}
.studio .st-top .split .btn:disabled {
  opacity: 1;
  color: var(--ink-3);
  background: var(--bar);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: none;
  cursor: not-allowed;
}
.studio .st-top .split .split-more:disabled {
  box-shadow: inset 1px 0 0 var(--line-2);
}
.studio .st-top .split .btn:disabled .ico {
  color: var(--ink-3);
}

/* the bar between a phone and a wide window: the title gives way first, then the words beside icons, in order,
   and nothing is cut to "C…" (each name stays in its tooltip and its label) */
@media (min-width: 761px) and (max-width: 1240px) {
  .studio .st-top .st-title {
    max-width: 260px;
  }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .studio .st-style-btn .chip-hand {
    display: none;
  }
  .studio .st-isle-tools .st-style-btn {
    padding-left: 14px;
  }
}
/* (the due date keeps its words while there's room: app.css folds them away under 1240 px for its own bar) */
@media (min-width: 1101px) {
  .studio .st-top .st-due > span {
    display: block;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .st-src-more {
    display: none;
  }
  .studio .st-top .st-due > span {
    display: none;
  }
  .studio .st-top .st-due {
    padding: 0 10px;
  }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .studio .st-top .st-subject > span:not(.sj-dot) {
    display: none;
  }
  .studio .st-top .st-subject {
    padding: 0 12px;
  }
}
@media (min-width: 761px) and (max-width: 980px) {
  .studio .st-isle-tools :is(.st-src-btn, .st-claude-btn) > span {
    display: none;
  }
  .studio .st-isle-tools :is(.st-src-btn, .st-claude-btn) {
    justify-content: center;
    width: 44px;
    padding: 0;
  }
}
@media (min-width: 761px) and (max-width: 1600px) {
  .studio .st-top:has(.st-learning) .st-style-btn .chip-hand {
    display: none;
  }
}
@media (min-width: 761px) and (max-width: 1280px) {
  .studio .st-top:has(.st-learning) :is(.st-src-more, .st-due > span, .st-subject > span:not(.sj-dot)) {
    display: none;
  }
  .studio .st-top:has(.st-learning) :is(.st-subject, .st-due) {
    padding: 0 11px;
  }
}
/* (and narrower still, the page's subject and due date go to the menu, as on a phone) */
@media (min-width: 761px) and (max-width: 900px) {
  .studio .st-top:has(.st-learning) :is(.st-subject, .st-due) {
    display: none;
  }
  .studio .st-top:has(.st-learning) ~ .st-menu .mi-sm {
    display: flex;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .studio .st-top:has(.st-learning) .st-isle-tools :is(.st-src-btn, .st-claude-btn) > span {
    display: none;
  }
  .studio .st-top:has(.st-learning) .st-isle-tools :is(.st-src-btn, .st-claude-btn) {
    justify-content: center;
    width: 44px;
    padding: 0;
  }
}
/* (the learning chip, short of room: its pulse alone, its words kept for a screen reader) */
@media (max-width: 1100px) {
  .studio .st-isle-tools .st-chip.st-learning {
    justify-content: center;
    width: 44px;
    padding: 0;
  }
  .studio .st-isle-tools .st-learning > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* (on a narrow tablet the ink switch is the phone's one toggle) */

/* ------------------------------------------------------------------ the Style panel: a sheet of the app's paper */
.studio .st-insp {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--sheet);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-3);
  color: var(--ink);
}
.studio .st-insp[hidden] {
  display: none;
}
@media (min-width: 761px) {
  .studio .st-insp {
    top: calc(80px + env(safe-area-inset-top, 0px));
    right: var(--insp-gap);
    bottom: var(--insp-gap);
    width: var(--insp-w);
    max-height: none;
  }
}
/* docked: the desk makes room for it, and it slides in from the side once */
@media (min-width: 1100px) {
  .studio[data-insp="open"] .st-body {
    margin-right: calc(var(--insp-w) + var(--insp-gap) + 4px);
  }
  .studio[data-insp] .st-insp {
    z-index: 25;
    animation: insp-in var(--t-2) var(--ease) both;
  }
}
@keyframes insp-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
}
.insp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 12px 4px 22px;
}
.insp-title {
  margin: 0;
  font: 400 calc(28px * var(--ts)) / 1.05 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--ink);
}
.studio .insp-x {
  position: static;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink-2);
}
.studio .insp-x:hover {
  background: var(--st-well);
  color: var(--ink);
}
/* the sections, a press away: a pill track, the one in view lifted out of it */
.insp-jump {
  display: flex;
  gap: 2px;
  margin: 8px 14px 0;
  padding: 4px;
  border-radius: 999px;
  background: var(--st-well);
  box-shadow: none;
}
.insp-jump-b {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 600 var(--fs-xs) / 1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-1), color var(--t-1), box-shadow var(--t-1);
}
.insp-jump-b:hover {
  color: var(--ink);
}
.insp-jump-b[aria-current="true"] {
  background: var(--st-lift);
  color: var(--acc-ink);
  box-shadow: var(--st-lift-shadow);
}
.insp-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 2px 18px 28px 22px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10px);
}
.insp-sec {
  padding: 20px 0 22px;
}
.insp-sec + .insp-sec {
  border-top: 1px solid var(--sheet-edge);
}
.insp-sec:first-child {
  padding-top: 14px;
}
.insp-h {
  margin: 0 0 12px;
  font: 400 calc(22px * var(--ts)) / 1.15 var(--font-display);
  letter-spacing: -0.006em;
  color: var(--ink);
  outline-offset: 4px;
  border-radius: 6px;
}
.insp-h:focus:not(:focus-visible) {
  outline: none;
}
/* (a section's heading takes the focus when its link is pressed: the ring hugs its words, not the panel's width) */
.studio .st-insp .insp-h:focus-visible {
  width: fit-content;
  outline-offset: 3px;
  box-shadow: none;
}
.insp-body > .fieldset + .fieldset,
.insp-body > .fieldset + details,
.insp-body > details + .fieldset {
  margin-top: 18px;
}
.insp-body .fs-tight {
  margin-top: 14px;
}
.studio .st-insp .fs-title {
  margin-bottom: 9px;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.005em;
  color: var(--ink-2);
}
.insp-note,
.studio .st-insp .why {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-3);
}

/* "More pens", "More papers", "Page size and layout", "Highlighter", "Fine-tune": the long tail, folded in a well */
.st-insp :is(.insp-more, .fine) {
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.st-insp :is(.insp-more, .fine) > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 16px;
  border-radius: 16px;
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
}
.st-insp :is(.insp-more, .fine) > summary::-webkit-details-marker {
  display: none;
}
.st-insp .fine > summary::after {
  margin-right: 2px;
}
.st-insp :is(.insp-more, .fine) > summary:hover {
  color: var(--ink);
  background: var(--st-well);
}
.st-insp :is(.insp-more, .fine)[open] > summary {
  margin-bottom: 0;
  color: var(--ink);
}
.st-insp :is(.insp-more, .fine)[open] {
  padding-bottom: 14px;
}
.st-insp :is(.insp-more, .fine)[open] > :not(summary) {
  margin-left: 14px;
  margin-right: 14px;
}
/* (a full-width field inside keeps to the same inset: at 100% plus its margins it ran past the card's edge) */
.st-insp :is(.insp-more, .fine)[open] > :is(select, input, .select) {
  width: calc(100% - 28px);
}
.st-insp .insp-more > .fieldset {
  margin-top: 12px;
}
.im-chev {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: transform var(--t-1) var(--ease);
}
.insp-more[open] > summary .im-chev {
  transform: rotate(180deg);
}

/* the hand in use: its name written in it, and "Change" to see every hand */
.hand-now {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "written change" "meta change";
  align-items: center;
  gap: 4px 12px;
  padding: 14px 12px 12px 16px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--horizon) 30%, transparent), transparent 62%),
    var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.hn-written {
  grid-area: written;
  min-height: 38px;
  display: flex;
  align-items: center;
}
.hn-written canvas {
  display: block;
  max-width: 100%;
}
.hn-meta {
  grid-area: meta;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.hn-name {
  font-size: var(--fs-s);
  font-weight: 650;
  color: var(--ink);
}
.hn-sub {
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--ink-3);
}
.hn-change {
  grid-area: change;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 12px 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--st-lift);
  color: var(--ink);
  font: 650 var(--fs-xs) / 1 var(--font-body);
  cursor: pointer;
  box-shadow: var(--st-lift-shadow);
  transition: background var(--t-1), box-shadow var(--t-1);
}
.hn-change:hover {
  box-shadow: 0 0 0 1px var(--acc-line), 0 4px 12px -6px rgba(50, 36, 90, 0.3);
}
.hn-change[aria-expanded="true"] {
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.hn-change .hn-chev {
  width: 13px;
  height: 13px;
  color: var(--ink-3);
  transition: transform var(--t-1) var(--ease);
}
.hn-change[aria-expanded="true"] .hn-chev {
  transform: rotate(180deg);
}
.hand-choose {
  margin-top: 12px;
}
.hand-choose[hidden] {
  display: none;
}
.hand-choose .hand-section + .hand-section,
.hand-choose .hand-section + details {
  margin-top: 16px;
}
.insp-body .missing-card {
  margin-top: 12px;
}
/* improving the hand: two plain ways, always in sight */
.hand-better {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
/* (with the letters it guessed asked for just above, the pad is that card's button) */
.missing-card:not([hidden]) ~ .hand-better #act-pad {
  display: none;
}
.hb-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  min-height: 52px;
  padding: 8px 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--t-1), background var(--t-1);
}
.hb-btn:hover {
  background: var(--st-well);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.hb-btn > svg {
  width: 18px;
  height: 18px;
  color: var(--acc);
}
.hb-btn > span {
  display: grid;
  gap: 2px;
}
.hb-btn b {
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.25;
}
.hb-btn em {
  font-style: normal;
  font-size: calc(12px * var(--ts));
  line-height: 1.3;
  color: var(--ink-3);
}
/* the hands, in the narrow panel: a written line each, not a tall card */
.st-insp .hand-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.st-insp .hand-tile .ht-paper {
  aspect-ratio: auto;
  height: 74px;
}
/* (a chosen hand, pen, page or way it writes: their colour's ring on a breath of it, as the app's cards) */
.studio .st-insp .hand-tile .ht-paper {
  box-shadow: inset 0 0 0 1px rgba(25, 29, 41, 0.06);
}
.studio .st-insp .hb-btn:focus-visible,
.studio .st-insp .hand-tile:focus-visible {
  outline-offset: 2px;
}
/* (hand filters, under Font hands: chosen in their colour, not a slab of ink) */
.studio .st-insp .chip[aria-pressed="true"] {
  color: var(--ink);
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.studio .st-insp .search {
  height: 42px;
  border-radius: 999px;
  padding: 0 16px;
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.studio .st-insp .search:focus {
  background: var(--sheet);
  box-shadow: inset 0 0 0 1.5px var(--acc-line), 0 0 0 4px var(--acc-wash);
}

/* the pen read off the writer's page, first in the Pen section */
.pen-own {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--horizon) 34%, var(--sheet)) 0%, var(--sheet) 70%);
  box-shadow: inset 0 0 0 1px var(--acc-line);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--t-1);
}
.pen-own[hidden] {
  display: none;
}
.pen-own:hover {
  box-shadow: inset 0 0 0 1px var(--acc), var(--sh-1);
}
.pen-own[aria-pressed="true"] {
  box-shadow: var(--st-pick-ring);
}
.pen-own canvas {
  width: 56px;
  height: 26px;
  padding: 2px;
}
/* (a pen's line is shown on a strip of paper, in its own colour, by day and by night) */
.st-insp :is(.pen-own, .pen-opt) canvas {
  box-sizing: border-box;
  border-radius: 7px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(26, 28, 51, 0.08);
}
.pw-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.pw-text em {
  font-style: normal;
  font-size: calc(11.5px * var(--ts));
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--acc-ink);
}
.pw-text b {
  font-size: calc(14.5px * var(--ts));
  font-weight: 650;
}
.pw-why {
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--ink-3);
}
.pw-check {
  width: 18px;
  height: 18px;
  opacity: 0;
  color: var(--acc);
}
.pen-own[aria-pressed="true"] .pw-check {
  opacity: 1;
}
.st-insp .pen-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.st-insp .pen-opt {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 62px;
  padding: 9px 10px 8px;
  border-radius: 14px;
  font-size: var(--fs-xs);
  line-height: 1.2;
}
.st-insp .pen-opt canvas {
  width: 100%;
  max-width: 84px;
  height: 26px;
  padding: 1px 3px;
  object-fit: contain;
}
.st-insp .pen-opt.is-own::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 2px var(--sheet);
}
.st-insp .insp-more .pen-grid {
  margin-top: 4px;
}
.studio .swatches {
  justify-content: flex-start;
}
.st-insp .swatches {
  gap: 8px;
}
.st-insp .swatch {
  width: 30px;
  height: 30px;
}
/* (the ink in use: a ring in their colour round it, and a tick on it) */
.studio .st-insp .swatch[aria-pressed="true"]::after {
  inset: -4px;
  box-shadow: 0 0 0 2px var(--acc);
}
.studio .st-insp .swatch[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: 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.6 3.6 7.4-8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.55));
}

/* size: three sizes with an "a" each, then the exact size */
.seg-size button {
  gap: 6px;
  height: 40px;
}
.sz-a {
  font: 400 calc(15px * var(--ts, 1))/1 var(--font-display);
  font-style: normal;
  color: inherit;
  opacity: 0.8;
}

/* papers: the everyday ones, a row of small sheets */
.st-insp .paper-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 8px;
}
.st-insp .paper-opt .thumb {
  aspect-ratio: 1.25;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--sheet-edge), 0 2px 6px -3px rgba(50, 36, 90, 0.2);
}
.st-insp .paper-opt {
  font-size: calc(12px * var(--ts));
  line-height: 1.25;
}
.studio .st-insp .paper-opt[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 650;
}
.studio .st-insp .paper-opt[aria-pressed="true"] .thumb {
  box-shadow: 0 0 0 2px var(--acc), 0 8px 18px -10px color-mix(in srgb, var(--acc) 70%, transparent);
}

/* how human */
.st-insp .presets {
  gap: 16px;
}
/* the lines: on the rule, or as freely as a person writes, said in words as it moves */
.lines-ends {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: -3px 0 0;
  font-size: calc(12px * var(--ts));
  font-weight: 600;
  color: var(--ink-3);
}
.lines-row .range {
  margin-top: 0;
}
.lines-now {
  margin: -1px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--ink-2);
}

/* one control language in the panel: a pill track with the choice lifted out of it, switches and sliders in their
   colour, a select that looks pickable */
.studio .st-insp .seg-ctl {
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--st-well);
  box-shadow: none;
}
.studio .st-insp .seg-ctl button {
  height: 36px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--fs-s);
  font-weight: 600;
}
.studio .st-insp .seg-ctl button:hover {
  color: var(--ink);
}
.studio .st-insp .seg-ctl button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--st-lift);
  box-shadow: var(--st-lift-shadow);
}
.studio .st-insp .seg-size button {
  height: 40px;
}
.studio .st-insp .toggle {
  min-height: 44px;
  padding: 6px 0;
  font-size: var(--fs-s);
}
.studio .st-insp .toggle input {
  width: 40px;
  height: 24px;
  background: var(--st-well-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.studio .st-insp .toggle input::after {
  width: 18px;
  height: 18px;
}
.studio .st-insp .toggle input:checked {
  background: var(--acc);
  box-shadow: none;
}
/* (the save dialog's switches are the Style panel's: on in their colour) */
body.in-studio .modal .toggle input {
  width: 40px;
  height: 24px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
body.in-studio .modal .toggle input::after {
  width: 18px;
  height: 18px;
}
body.in-studio .modal .toggle input:checked {
  background: var(--acc);
  box-shadow: none;
}
body.in-studio .modal .toggle input:disabled {
  opacity: 0.45;
}
.studio .st-insp .range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--acc) var(--p, 50%), var(--st-well-2) var(--p, 50%));
}
.studio .st-insp .range::-moz-range-progress {
  background: var(--acc);
}
.studio .st-insp .range::-moz-range-track {
  background: var(--st-well-2);
}
.studio .st-insp .range::-webkit-slider-thumb {
  background: #fffdf8;
  box-shadow: 0 0 0 1px var(--acc-line), 0 2px 6px rgba(50, 36, 90, 0.3);
}
.studio .st-insp .range::-moz-range-thumb {
  background: #fffdf8;
  box-shadow: 0 0 0 1px var(--acc-line), 0 2px 6px rgba(50, 36, 90, 0.3);
}
.studio .st-insp .sl-top {
  font-size: var(--fs-s);
  font-weight: 560;
}
.studio .st-insp .sl-top .val {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.studio .st-insp .select {
  height: 44px;
  padding: 0 38px 0 14px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: var(--fs-s);
  color: var(--ink);
  background: var(--sheet-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23686880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.studio .st-insp .select:hover {
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.studio .st-insp .fs-title button {
  min-height: 32px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  text-decoration-color: var(--acc-line);
}

/* ------------------------------------------------------------------ the page's tools, in words, over the page */
@media (min-width: 761px) {
  .studio .st-tools {
    top: 12px;
    left: 50%;
    flex-direction: row;
    align-items: center;
    width: auto;
    height: 56px;
    padding: 6px;
    gap: 2px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--bar);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: var(--st-bar-shadow);
  }
  .studio.is-empty .st-tools {
    transform: translate(-50%, -6px);
  }
  .st-tools .rbtn {
    width: auto;
    min-width: 44px;
    height: 44px;
    padding: 0 15px 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    color: var(--ink-2);
  }
  .st-tools .rbtn:hover {
    color: var(--ink);
    background: var(--st-well);
  }
  .st-tools .rbtn:is(.r-zin, .r-zout, .r-fit) {
    padding: 0;
    width: 44px;
  }
  .st-tools .rbtn.r-speed {
    height: 44px;
    min-width: 0;
    padding: 0 10px;
    font: 650 calc(12.5px * var(--ts)) / 1 var(--font-body);
    color: var(--ink-2);
  }
  .st-tools .rl {
    font: 600 calc(14px * var(--ts)) / 1 var(--font-body);
    white-space: nowrap;
  }
  /* (watch it write: the page's own action, lifted out of the pill, its play mark in their colour) */
  .st-tools .r-play {
    padding: 0 18px 0 14px;
    background: var(--st-lift);
    color: var(--ink);
    box-shadow: var(--st-lift-shadow);
  }
  .st-tools .r-play svg {
    color: var(--acc);
  }
  .st-tools .r-play:hover {
    background: var(--st-lift);
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--acc-line), 0 6px 16px -8px color-mix(in srgb, var(--acc) 60%, transparent);
  }
  .st-tools .r-play[aria-pressed="true"] {
    background: var(--acc-wash);
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--acc-line);
  }
  .st-tools .rsep {
    width: 1px;
    height: 22px;
    margin: 0 5px;
    background: var(--line-2);
  }
  .st-tools .page-info {
    padding: 0 10px 0 6px;
  }
  /* (tooltips open below the bar) */
  .st-tools .rbtn[data-tip]::after {
    left: 50%;
    top: calc(100% + 10px);
    transform: translate(-50%, -4px);
  }
  .st-tools .rbtn[data-tip]:focus-visible::after {
    transform: translate(-50%, 0);
  }
  /* (a labelled button needs no tooltip unless it carries a shortcut) */
  .st-tools .rbtn.r-draw[data-tip]::after {
    display: none;
  }
  /* the pages start below the bar */
  .studio .pages {
    padding-top: 84px;
  }
}
@media (min-width: 761px) and (hover: hover) {
  .st-tools .rbtn[data-tip]:hover::after {
    transform: translate(-50%, 0);
  }
}
/* drawing: the rail's Draw is pressed, in their colour */
.studio .st-tools .rbtn[aria-pressed="true"]:not(.r-play) {
  color: var(--ink);
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1.5px var(--acc-line);
}
/* on a narrow desk (the text drawer open beside a small window) the words give way to the icons */
@container (max-width: 640px) {
  .st-tools .rl {
    display: none;
  }
  .st-tools .rbtn:is(.r-draw, .r-again) {
    padding: 0;
    width: 44px;
  }
  .st-tools .r-play {
    padding: 0 14px;
  }
  .st-tools .rbtn.r-draw[data-tip]::after {
    display: block;
  }
}

/* the drawing tools' own bar, while drawing: the same frosted pill, what's chosen in their colour */
.studio .st-drawdock .dd-bar {
  background: var(--bar);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: var(--st-bar-shadow);
}
.studio .st-drawdock .dd-btn[aria-pressed="true"] {
  color: var(--ink);
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.studio .st-drawdock .dd-size[aria-pressed="true"] {
  color: var(--acc);
}

/* ------------------------------------------------------------------ the text, in a sheet on the desk */
.studio .st-source {
  margin: 12px 0 12px 12px;
  border-radius: 24px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-3);
}
.studio .st-source .panel-head {
  padding: 12px 10px 6px 12px;
}
.studio .st-source .panel-head .tabs {
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--st-well);
  box-shadow: none;
}
.studio .st-source .panel-head .tab {
  height: 36px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--fs-s);
  font-weight: 600;
}
.studio .st-source .panel-head .tab:hover {
  color: var(--ink);
}
.studio .st-source .panel-head .tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--st-lift);
  box-shadow: var(--st-lift-shadow);
}
.studio .st-source .panel-x {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.studio .st-source .fmt-bar {
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.studio .st-source .fmt-bar button {
  color: var(--ink-2);
  border-radius: 10px;
}
.studio .st-source .fmt-bar button:hover {
  color: var(--ink);
  background: var(--st-well);
}
.studio .st-source .editor {
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  font-size: calc(15.5px * var(--ts));
}
.studio .st-source .editor:focus {
  box-shadow: inset 0 0 0 1.5px var(--acc-line), 0 0 0 4px var(--acc-wash);
}

/* ------------------------------------------------------------------ the menu: as the app's own menus */
.studio .st-menu {
  min-width: 248px;
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border-radius: 18px;
  color: var(--ink);
  background: var(--veil-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 0 0 1px var(--veil-edge), 0 0 0 1px var(--line), var(--sh-float);
  animation: pop-in 140ms var(--ease) both;
}
.studio .st-menu .mi {
  gap: 11px;
  height: 40px;
  padding: 0 12px 0 10px;
  border-radius: 11px;
  color: var(--ink);
  font-size: calc(14.5px * var(--ts));
  font-weight: 500;
}
.studio .st-menu .mi svg {
  color: var(--ink-3);
}
.studio .st-menu .mi:hover,
.studio .st-menu .mi:focus-visible {
  background: var(--hover);
}
.studio .st-menu .mi-group {
  padding: 9px 10px 4px;
  font-size: calc(11.5px * var(--ts));
  font-weight: 650;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.studio .st-menu .mi-sep {
  margin: 5px 8px;
  background: var(--line);
}
.studio .st-menu .mi-plan b {
  color: var(--acc-ink);
}
/* (a menu item's key, at its end, as a Mac menu shows it) */
.studio .st-menu .mi-key {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font: 600 calc(12px * var(--ts)) / 22px var(--font-body);
  text-align: center;
  color: var(--ink-3);
  background: var(--st-well);
  box-shadow: inset 0 -1px 0 var(--line-2);
}
/* (no keyboard on a phone to use them with) */
@media (max-width: 760px) {
  .studio .st-menu .mi-keys {
    display: none;
  }
}
/* (a phone's bar has no room for the page's subject and due date: they're here, app.css hides them elsewhere) */
@media (max-width: 760px) {
  .studio .st-menu .mi-sm {
    display: flex;
  }
}

/* ------------------------------------------------------------------ toasts in the studio */
body.in-studio .toast {
  border-radius: 16px;
  font-size: calc(14.5px * var(--ts));
}
body.in-studio .toast .toast-act,
body.in-studio .toast.ink-toast :is(.it-act, .it-nib) {
  color: var(--acc-hi);
}
:root[data-theme="dark"] body.in-studio .toast .toast-act,
:root[data-theme="dark"] body.in-studio .toast.ink-toast :is(.it-act, .it-nib) {
  color: color-mix(in srgb, var(--acc) 62%, #3a2a08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.in-studio .toast .toast-act,
  :root:not([data-theme="light"]) body.in-studio .toast.ink-toast :is(.it-act, .it-nib) {
    color: color-mix(in srgb, var(--acc) 62%, #3a2a08);
  }
}

/* ------------------------------------------------------------------ the empty desk: the app's ways in */
.studio .st-empty .source {
  height: 44px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--sheet) 62%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--bar-edge), 0 8px 20px -16px rgba(50, 36, 90, 0.5);
  font-size: var(--fs-s);
  font-weight: 560;
}
.studio .st-empty .source:hover {
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--bar-edge), 0 10px 24px -14px rgba(50, 36, 90, 0.5);
}
.studio .st-empty .source svg {
  color: var(--ink-2);
}
.studio .st-empty .source[data-src="type"] {
  color: var(--on-primary);
  background:
    radial-gradient(120% 120% at 30% -30%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--primary-top), var(--primary) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 62%, transparent), 0 2px 4px rgba(30, 20, 50, 0.18), 0 12px 26px -12px rgba(30, 20, 60, 0.5);
}
.studio .st-empty .source[data-src="type"] svg {
  color: var(--acc-hi);
}
:root[data-theme="dark"] .studio .st-empty .source[data-src="type"] svg {
  color: color-mix(in srgb, var(--acc) 70%, #3a2a08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .studio .st-empty .source[data-src="type"] svg {
    color: color-mix(in srgb, var(--acc) 70%, #3a2a08);
  }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 760px) {
  /* the bar: one frosted pill, the page's name and the assistant's mark; the rest is in the menu and the tab bar */
  .studio .st-top {
    gap: 2px;
    height: 56px;
    margin: 8px 10px 0;
    padding: 6px;
    border-radius: 999px;
    background: var(--bar);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: var(--st-bar-shadow);
  }
  .studio .st-isle {
    height: auto;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .studio .st-top > .st-isle-page {
    flex: 1 1 auto;
  }
  .studio .st-top > .grow {
    display: none;
  }
  .studio .st-top .st-doc {
    flex: 1 1 auto;
  }
  .studio .st-top .st-title {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 8px 0 4px;
    font-size: calc(19px * var(--ts));
    field-sizing: fixed;
  }
  .studio .st-isle-tools .st-claude-btn {
    justify-content: center;
    width: 44px;
    padding: 0;
  }
  .studio .st-isle-tools .st-claude-btn > span {
    display: none;
  }
  /* the sheets: the app's paper from the foot of the screen */
  .studio .st-insp {
    height: min(78dvh, 680px);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 0 0 1px var(--sheet-edge), 0 -18px 50px -20px rgba(40, 30, 80, 0.45);
  }
  .insp-head {
    padding-top: 6px;
  }
  .insp-jump-b {
    height: 38px;
  }
  .studio[data-pop]:not([data-pop=""]) .dr-console {
    visibility: hidden;
  }
  .studio[data-pop]:not([data-pop=""]) .scrim {
    display: block;
  }
  .studio[data-pop]:not([data-pop=""]) .mobile-bar {
    display: none;
  }
  .st-insp .pen-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .studio .scrim {
    background: rgba(26, 22, 48, 0.22);
  }
  /* the text: a card of the app's paper on the tab bar, clear of both edges (it stays above the keyboard) */
  .studio .st-source {
    left: 8px;
    right: 8px;
    bottom: max(var(--kb, 0px), calc(max(10px, env(safe-area-inset-bottom, 0px)) + 76px));
    margin: 0;
    padding-bottom: 0;
    border-radius: 24px;
    box-shadow: 0 0 0 1px var(--sheet-edge), 0 -10px 40px -16px rgba(40, 30, 80, 0.4), var(--sh-2);
  }
  .studio .st-source .tabpanel {
    padding-bottom: 12px;
  }
  /* the tab bar: the app's own, frosted, the one in use in their colour, the primary in ink */
  .studio .mobile-bar {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    width: auto;
    height: 70px;
    padding: 0 6px;
    gap: 2px;
    align-items: center;
    transform: none;
    border-radius: 26px;
    background: var(--bar);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: inset 0 0 0 1px var(--bar-edge), 0 20px 44px -18px rgba(40, 30, 80, 0.55);
  }
  .studio .mobile-bar button {
    height: 58px;
    min-height: 58px;
    gap: 4px;
    padding: 0 2px;
    border-radius: 18px;
    color: var(--ink-3);
    font-size: calc(11.5px * var(--ts));
    font-weight: 600;
    transition: background var(--t-1), color var(--t-1);
  }
  .studio .mobile-bar button svg {
    width: 23px;
    height: 23px;
  }
  /* (a narrow phone, or the largest text: the words take the room they need, the short ones give it) */
  .studio .mobile-bar {
    grid-template-columns: repeat(5, minmax(min-content, 1fr));
  }
  .studio .mobile-bar button > span {
    white-space: nowrap;
  }
  .studio .mobile-bar button:not(.primary):not(:disabled):active {
    background: var(--st-well);
  }
  .studio .mobile-bar button[aria-expanded="true"] {
    color: var(--ink);
  }
  .studio .mobile-bar button[aria-expanded="true"] svg {
    color: var(--acc);
  }
  .studio .mobile-bar button.primary {
    color: var(--on-primary);
    background:
      radial-gradient(120% 120% at 30% -30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%),
      linear-gradient(180deg, var(--primary-top), var(--primary) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 60%, transparent), 0 12px 24px -10px rgba(30, 20, 60, 0.55);
  }
  .studio .mobile-bar button.primary svg {
    color: var(--acc-hi);
  }
  .studio .mobile-bar button:disabled {
    color: color-mix(in srgb, var(--ink-3) 80%, transparent);
  }
  @media (max-width: 359px) {
    .studio .mobile-bar {
      padding: 0 4px;
      gap: 0;
    }
    .studio .mobile-bar button {
      font-size: calc(11px * var(--ts));
      letter-spacing: -0.01em;
    }
  }
  /* round Draw, beside Ask Ditto, both riding just above the tab bar */
  .studio .st-rail {
    left: 10px !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 80px);
    width: 52px;
    height: 52px;
    background: var(--bar);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: var(--st-bar-shadow);
  }
  .studio .st-rail .r-draw {
    width: 52px;
    height: 52px;
    color: var(--ink);
  }
  .studio .st-drawdock {
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 80px);
  }
}
:root[data-theme="dark"] .studio .mobile-bar button.primary svg {
  color: color-mix(in srgb, var(--acc) 70%, #3a2a08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .studio .mobile-bar button.primary svg {
    color: color-mix(in srgb, var(--acc) 70%, #3a2a08);
  }
}
/* fingers, not a mouse: every control in the sheet at least 44 px */
@media (pointer: coarse) {
  .st-insp :is(.swatch) {
    width: 40px;
    height: 40px;
  }
  .st-insp .swatches {
    gap: 6px;
  }
  .studio .st-insp .seg-ctl button,
  .st-insp :is(.insp-more, .fine) > summary,
  .hn-change,
  .studio .insp-x,
  .studio .st-insp .chip,
  .insp-jump-b {
    min-height: 44px;
  }
  .studio .insp-x {
    width: 44px;
  }
  .st-insp .toggle {
    min-height: 44px;
  }
  .st-insp .pen-opt {
    min-height: 64px;
  }
  .studio .mobile-bar button {
    min-height: 58px;
  }
  .studio .st-menu .mi {
    height: 46px;
  }
}

/* ------------------------------------------------------------------ focus, motion */
.studio .st-insp :is(button, summary, select, [tabindex]):focus-visible, .studio .st-tools .rbtn:focus-visible, .studio .st-top :is(button, .st-chip):focus-visible, .studio .mobile-bar button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 38%, transparent);
}
.studio .st-insp .swatch:focus-visible {
  outline-offset: 4px;
}
:root[data-contrast="high"] .studio :is(.st-insp :is(button, summary, select, [tabindex]), .st-tools .rbtn, .st-top :is(button, .st-chip), .mobile-bar button):focus-visible {
  outline-width: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .studio .st-insp,
  .studio[data-insp] .st-insp {
    animation: none;
  }
  .insp-jump-b,
  .hn-change,
  .hn-change .hn-chev,
  .im-chev,
  .hb-btn,
  .pen-own,
  .studio .st-top .st-back > svg {
    transition: none;
  }
}
/* (on: the switch is an ink pill whose hairline and nib are in the colour they chose, as the primary's rim is; the
   Hand panel's chosen way and the status chip over the page the same) */
/* (under the page's tools, never on them: at the desk's top it covered Watch it write and New take) */
/* (a new handwriting, first under "Add another handwriting": in their colour) */
.studio .st-insp .quick.quick-new {
  background: color-mix(in srgb, var(--acc) 8%, var(--sheet));
  box-shadow: inset 0 0 0 1.5px var(--acc-line);
}
.studio .st-insp .quick.quick-new svg {
  color: var(--acc);
}

/* ------------------------------------------------------------------ the characters a hand had to guess */
/* one line, with its button, under the hand: a note in their colour */
.studio .missing-card.mc-compact {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  margin: 10px 0 0;
  padding: 6px 6px 6px 14px;
  border-radius: 16px;
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.mc-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink);
}
.mc-line b {
  flex: none;
  font-weight: 650;
}
.mc-chars {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-size: calc(15px * var(--ts, 1));
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.studio .mc-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--st-lift);
  color: var(--ink);
  font: 650 var(--fs-xs) / 1 var(--font-body);
  box-shadow: var(--st-lift-shadow);
  cursor: pointer;
}
.studio .mc-go svg {
  width: 14px;
  height: 14px;
  color: var(--acc);
}
.studio .mc-go:hover {
  box-shadow: 0 0 0 1px var(--acc-line), 0 4px 12px -6px rgba(50, 36, 90, 0.3);
}
@media (pointer: coarse) {
  .studio .mc-go {
    height: 44px;
  }
}

/* the learn flow adding pages to a hand (learn.js extendHand): which hand, said over every step, under the bar
   (the frame's grid gains a row for it) */
.lf.fr.lf-extending {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.lf-extend {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(760px, calc(100vw - 32px));
  margin: 4px 16px 0;
  padding: 9px 18px 9px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 16%, var(--veil-strong));
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent), var(--sh-1);
  color: var(--ink-2);
  font-size: calc(13.5px * var(--ts, 1));
  line-height: 1.35;
}
.lf-extend .ico {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 4px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
}
.lf-extend b {
  color: var(--ink);
  font-weight: 650;
}
@media (max-width: 760px) {
  .lf-extend {
    border-radius: 16px;
    font-size: calc(12.5px * var(--ts, 1));
  }
}

/* A named destination for the page's less frequent tools, on every screen. */
.st-page-tools { gap: 6px; white-space: nowrap; }
.st-page-tools span { font-size: 12px; }
@media (max-width: 760px) { .st-page-tools { min-height: 40px; padding-inline: 9px; } }

/* Diagram source stays in the document; the writing drawer shows its drawing. */
.studio .editor[hidden], .figure-editor[hidden] { display: none; }
.figure-editor { flex: 1 1 auto; min-height: 240px; overflow-y: auto; padding: 12px; border: 1px solid var(--sheet-edge); border-radius: 0 0 14px 14px; background: var(--surface); }
.figure-editor-text { display: block; width: 100%; min-height: 56px; resize: none; overflow: hidden; padding: 10px 4px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: calc(15.5px * var(--ts, 1)); line-height: 1.65; }
.figure-editor-text:focus { outline: none; }
.figure-editor-text:focus-visible { box-shadow: inset 3px 0 0 var(--acc-line); }
.figure-editor-card { margin: 10px 0; padding: 16px 12px 10px; border: 1px solid var(--sheet-edge); border-radius: 12px; background: #fffdf7; color: #252842; }
.figure-editor-card svg { display: block; width: 100%; max-height: 380px; min-height: 80px; }
.figure-editor-card figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; color: #626479; }
.figure-editor-unavailable { margin: 6px; font-size: 14px; }

/* Writing first: common actions stay visible; specialist formatting is one click away. */
.studio .fmt-bar .fmt-toggle { display: inline-flex; width: auto; padding: 0 10px; font-size: 12px; }
.studio .fmt-bar.fmt-collapsed > .fmt-secondary { display: none; }
.studio .fmt-bar.fmt-collapsed > button:not(.fmt-secondary) { display: inline-flex; }
.studio .st-source #tab-batch { display: none; }
.studio .st-source .tabs { justify-content: flex-start; background: transparent; }
.studio .st-source #tab-write { flex: 0 0 auto; background: transparent; box-shadow: none; }