/* The PDF editor and the design editor (pdf/edit.html, design/index.html):
   the workspace, its panels, tools and dialogs. */

/* The surface of the compressor v2 and the extractor: smoked glass over a
   violet glow, scoped to the tool, with --hue overridden so shared focus
   styles follow. The glass recipes are the extractor's under a pe- prefix;
   the toolbar, properties bar and workspace are this page's own. */

.pe-stage {
  --g-ink: #f4f2fb;
  --g-ink-2: rgb(214 209 232 / .72);
  --g-ink-3: rgb(200 195 220 / .5);
  --g-lilac: #b3a6ff;
  --g-rim: rgb(255 255 255 / .15);
  --g-rim-soft: rgb(255 255 255 / .08);
  --hue: #a99bff;
  --hue-soft: rgb(169 155 255 / .14);
  --hue-line: rgb(169 155 255 / .4);
  position: relative;
  isolation: isolate;
  padding: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  caret-color: transparent;
}
.pe-aura {
  position: absolute; inset: -6rem 0 -3rem; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(farthest-side at 50% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(farthest-side at 50% 50%, #000 45%, transparent 100%);
}
.pe-aura i {
  position: absolute; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, var(--c), transparent);
  animation: var(--drift) var(--t) ease-in-out infinite alternate;
}
.pe-stage.is-editing .pe-aura i { animation-play-state: paused; }
.pe-aura i:nth-child(1) { left: 30%; top: 4%; width: 40%; height: 46%; --c: rgb(124 92 255 / .5); --drift: pe-drift-1; --t: 43s; }
.pe-aura i:nth-child(2) { left: 3%; top: 24%; width: 32%; height: 56%; --c: rgb(92 98 240 / .3); --drift: pe-drift-2; --t: 57s; }
.pe-aura i:nth-child(3) { left: 65%; top: 22%; width: 32%; height: 56%; --c: rgb(158 82 232 / .3); --drift: pe-drift-3; --t: 61s; }
.pe-aura i:nth-child(4) { left: 24%; top: 50%; width: 52%; height: 40%; --c: rgb(96 64 210 / .26); --drift: pe-drift-4; --t: 71s; }
@keyframes pe-drift-1 {
  0% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(14%, 8%) scale(1.08); }
  55% { transform: translate(-6%, 14%) scale(.94); }
  80% { transform: translate(-16%, -2%) scale(1.06); }
  100% { transform: translate(6%, -6%) scale(1); }
}
@keyframes pe-drift-2 {
  0% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(22%, -10%) scale(1.12); }
  70% { transform: translate(8%, 16%) scale(.92); }
  100% { transform: translate(30%, 4%) scale(1.04); }
}
@keyframes pe-drift-3 {
  0% { transform: translate(0, 0) scale(1.04); }
  40% { transform: translate(-24%, 12%) scale(.94); }
  75% { transform: translate(-10%, -14%) scale(1.1); }
  100% { transform: translate(-30%, 2%) scale(1); }
}
@keyframes pe-drift-4 {
  0% { transform: translate(0, 0) scale(1); }
  45% { transform: translate(-12%, -16%) scale(1.1); }
  100% { transform: translate(14%, -8%) scale(.96); }
}

/* The drop panel keeps the extractor's width; the editor takes the page's. */
.pe-inner { max-width: 62rem; margin-inline: auto; }
.pe-drop, .pe-dl, .pe-restart, .pe-tool, .pe-iconbtn, .pe-stage .btn { -webkit-user-select: none; user-select: none; }

.pe-card {
  border-radius: 24px;
  background: linear-gradient(180deg, rgb(255 255 255 / .065), rgb(255 255 255 / .025));
  border: 1px solid var(--g-rim-soft);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .1),
    0 24px 50px -28px rgb(0 0 0 / .85),
    0 0 40px -24px rgb(130 105 255 / .35);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* ---- The drop panel: a thick glass bezel around a darker inset well. */
.pe-glass {
  position: relative; padding: 9px; border-radius: 40px;
  background: linear-gradient(180deg, rgb(255 255 255 / .13), rgb(255 255 255 / .04) 40%, rgb(255 255 255 / .07));
  border: 1px solid rgb(255 255 255 / .16);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .3),
    inset 0 -1px 0 rgb(180 165 255 / .28),
    0 40px 80px -30px rgb(0 0 0 / .9),
    0 0 80px -24px rgb(130 105 255 / .5);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}
.pe-glass::before, .pe-glass::after { content: ""; position: absolute; pointer-events: none; border-radius: 2px; }
.pe-glass::before {
  top: -1px; left: 16%; right: 16%; height: 2px;
  background: linear-gradient(90deg, transparent, rgb(228 222 255 / .95) 50%, transparent);
  box-shadow: 0 0 16px 2px rgb(170 150 255 / .55);
}
.pe-glass::after {
  bottom: -1px; left: 24%; right: 24%; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(160 140 255 / .75) 50%, transparent);
  box-shadow: 0 0 20px 3px rgb(120 95 255 / .35);
}

.pe-drop {
  position: relative; display: grid; justify-items: center; align-content: center;
  min-height: clamp(19rem, 34vw, 25rem); padding: 2.5rem 1.5rem 2rem;
  border-radius: 31px; text-align: center; cursor: pointer; overflow: hidden;
  background:
    radial-gradient(80% 55% at 50% 0%, rgb(255 255 255 / .07), transparent 70%),
    linear-gradient(180deg, #1e1c27 0%, #15131c 100%);
  border: 1px solid rgb(255 255 255 / .07);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .06),
    inset 0 24px 40px -24px rgb(0 0 0 / .65),
    inset 0 -16px 40px -20px rgb(120 100 255 / .1);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pe-drop:hover, .pe-drop:focus-visible, .pe-drop.is-over {
  outline: none;
  border-color: rgb(179 166 255 / .35);
  background:
    radial-gradient(80% 60% at 50% 0%, rgb(169 155 255 / .14), transparent 70%),
    linear-gradient(180deg, #211e2d 0%, #17151f 100%);
}
.pe-drop:focus-visible { box-shadow: 0 0 0 2px var(--g-lilac), inset 0 1px 0 rgb(255 255 255 / .06); }
/* Reading a file: a light runs along the top edge, as on the file bar. */
.pe-drop > span { transition: opacity var(--dur-2) var(--ease); }
.pe-drop.is-opening { cursor: progress; }
.pe-drop.is-opening > span { opacity: .5; }
.pe-drop::before {
  content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 2px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #c9bfff, transparent) 0 0 / 35% 100% no-repeat;
  box-shadow: 0 0 12px rgb(150 130 255 / .6); transition: opacity var(--dur-2) var(--ease);
}
.pe-drop.is-opening::before { opacity: 1; animation: pe-scan 1.1s cubic-bezier(.45, 0, .55, 1) infinite alternate; }

.pe-corner {
  position: absolute; width: 34px; height: 34px; color: rgb(185 172 255 / .55);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease);
  animation: pe-breathe 9s ease-in-out infinite;
}
.pe-corner--tl { top: 30px; left: 30px; }
.pe-corner--tr { top: 30px; right: 30px; animation-delay: -2.3s; }
.pe-corner--bl { bottom: 30px; left: 30px; animation-delay: -6.8s; }
.pe-corner--br { bottom: 30px; right: 30px; animation-delay: -4.9s; }
.pe-drop:hover .pe-corner, .pe-drop.is-over .pe-corner { color: rgb(200 190 255 / .85); }
.pe-drop.is-over .pe-corner--tl { transform: translate(-8px, -8px); }
.pe-drop.is-over .pe-corner--tr { transform: translate(8px, -8px); }
.pe-drop.is-over .pe-corner--bl { transform: translate(-8px, 8px); }
.pe-drop.is-over .pe-corner--br { transform: translate(8px, 8px); }
@keyframes pe-breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

.pe-doc { width: clamp(150px, 20vw, 220px); height: auto; overflow: visible; transition: transform var(--dur-3) var(--ease-out); }
.pe-drop:hover .pe-doc, .pe-drop.is-over .pe-doc { transform: translateY(-4px); }

/* The icon floats, each layer on its own loop. The pen has the widest
   drift, so it reads as writing on the page. */
.pe-fl { transform-box: fill-box; transform-origin: 50% 50%; animation: var(--fl) var(--t) ease-in-out infinite; }
.pe-fl--front-y { --fl: pe-front-y; --t: 7.3s; }
.pe-fl--front-x { --fl: pe-front-x; --t: 11.7s; }
.pe-fl--back { --fl: pe-back; --t: 13.1s; animation-direction: alternate; }
.pe-fl--pen { --fl: pe-pen; --t: 6.1s; animation-delay: -1.4s; }
.pe-fl--glow { --fl: pe-glow; --t: 8.9s; animation-direction: alternate; }
.pe-fl--caret { --fl: pe-caret; --t: 1.1s; }
@keyframes pe-front-y {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
  55% { transform: translateY(-2.5px); }
  80% { transform: translateY(-7px); }
}
@keyframes pe-front-x {
  0%, 100% { transform: translateX(0) rotate(0); }
  40% { transform: translateX(2px) rotate(.8deg); }
  75% { transform: translateX(-1.5px) rotate(-.6deg); }
}
@keyframes pe-back {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(-3px, 2px) rotate(-1.4deg); }
  100% { transform: translate(1px, 4px) rotate(1deg); }
}
@keyframes pe-pen {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  30% { transform: translate(-5px, 2px) rotate(-2deg); }
  60% { transform: translate(3px, -4px) rotate(1.5deg); }
}
@keyframes pe-glow {
  from { opacity: .4; transform: scale(.97); }
  to { opacity: .7; transform: scale(1.05); }
}
@keyframes pe-caret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }

.pe-drop__title {
  margin-top: 1.1rem; font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 600;
  letter-spacing: -.012em; line-height: 1.15; color: var(--g-ink);
}
.pe-drop__sub { margin-top: .5rem; font-size: clamp(1.05rem, 1.9vw, 1.35rem); color: var(--g-ink-2); }
.pe-browse {
  color: var(--g-lilac); text-decoration: underline; text-decoration-thickness: 1.5px;
  text-decoration-color: rgb(179 166 255 / .6); text-underline-offset: .3em;
}
.pe-drop__foot { margin-top: clamp(1.5rem, 4vw, 2.5rem); font-size: .9rem; color: var(--g-ink-3); }
.pe-drop__full { display: grid; justify-items: center; }

/* Collapsed: once a file is open, the uploader is a slim bar. */
.pe-drop__compact { display: none; align-items: center; justify-content: center; gap: .85rem; flex-wrap: wrap; text-align: left; }
.pe-drop.is-collapsed { min-height: 0; padding: 1rem 1.5rem; }
.pe-drop.is-collapsed .pe-drop__full, .pe-drop.is-collapsed .pe-corner { display: none; }
.pe-drop.is-collapsed .pe-drop__compact { display: flex; }
.pe-mini { width: 40px; height: 40px; flex: none; overflow: visible; filter: drop-shadow(0 4px 10px rgb(120 100 255 / .35)); }
.pe-drop__compact-title { font-size: 1.02rem; font-weight: 600; color: var(--g-ink); }
.pe-drop__compact-sub { font-size: .95rem; color: var(--g-ink-2); }
.pe-drop__cap { display: none; }

.pe-msg { margin-top: .9rem; text-align: center; font-size: .88rem; color: var(--neg); }
.pe-msg[hidden] { display: none; }

/* ---- The editor. */
.pe-editor { display: grid; gap: .7rem; margin-top: 1.4rem; }
.pe-editor[hidden] { display: none; }

/* With a file open, the editor is the whole window: the file bar and
   properties along the top, the workspace filling the rest, the tools
   floating at the bottom in the middle, and notes in a small toast above
   them. The page behind is left as it was, and returns on Start over. */
.pe-editor.is-app {
  position: fixed; inset: 0; z-index: 200; margin: 0;
  grid-template-rows: auto minmax(0, 1fr); gap: .6rem; padding: .7rem;
  background:
    radial-gradient(60% 45% at 50% 0%, rgb(124 92 255 / .16), transparent 70%),
    radial-gradient(40% 40% at 100% 100%, rgb(96 64 210 / .12), transparent 70%),
    #0b0a10;
  overscroll-behavior: contain;
}
.pe-editor.is-app .pe-body { height: auto; min-height: 0; isolation: isolate; z-index: 0; }
/* The workspace runs to the bottom of the window and the tools float over
   it; the pages, layers and properties scroll far enough to clear them. */
.pe-editor.is-app .pe-pages { padding-bottom: 6.5rem; }
.pe-editor.is-app .pe-layers__list { padding-bottom: 5rem; }
@media (min-width: 901px) { .pe-editor.is-app .pe-props { padding-bottom: 5rem; } }
.pe-editor.is-app .pe-toolbar {
  position: fixed; top: auto; bottom: 1rem; left: 50%; z-index: 210; width: max-content; max-width: calc(100vw - 2rem);
  transform: translateX(-50%); justify-content: center;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 24px 50px -16px rgb(0 0 0 / .95), 0 0 50px -18px rgb(130 105 255 / .6);
}
/* The tools are at the bottom now, so their tooltips open upwards. */
.pe-editor.is-app .pe-toolbar [data-tip]::after { top: auto; bottom: calc(100% + 10px); }
.pe-editor.is-app .pe-foot {
  position: fixed; left: 50%; bottom: 5.6rem; z-index: 209; transform: translateX(-50%);
  max-width: min(40rem, calc(100vw - 2rem)); padding: 0; pointer-events: none;
}
.pe-editor.is-app .pe-note {
  min-height: 0; padding: .5rem .9rem; border-radius: 12px; text-align: center;
  background: rgb(24 22 34 / .92); border: 1px solid var(--g-rim);
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pe-editor.is-app .pe-note:empty { display: none; }
/* Dragging files over the editor: the page they'd land on is lit, and a
   note at the top says so. */
.pe-editor.is-app.is-drop-target::after {
  content: "Drop images or a PDF to add them to the lit page"; position: fixed; top: 6.2rem; left: 50%; transform: translateX(-50%); z-index: 220;
  padding: .55rem 1rem; border-radius: 999px; border: 1px dashed rgb(179 166 255 / .7); background: rgb(24 20 44 / .92);
  font-size: .9rem; font-weight: 600; color: var(--g-ink); pointer-events: none; white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / .9);
}
/* While it's open, the editor covers the window. Its own containers
   (marked .pe-host) are lifted over the rest of the page, so a later
   layer (the footer, say) can't sit over it and, being see-through,
   take its clicks; the rest of the page is hidden, the header and
   footer too. All comes back on Start over. */
html.pe-app-open { overflow: hidden; }
html.pe-app-open .pe-host { z-index: 150; }
html.pe-app-open .pe-host > :not(.pe-host, .pe-editor),
html.pe-app-open .g-top, html.pe-app-open .g-foot { visibility: hidden; }

/* The file's own bar: its name, the page it's on, the download. */
.pe-head { position: relative; display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap; padding: .85rem 1rem .85rem 1.3rem; }
.pe-head__file { display: grid; gap: .1rem; min-width: 0; flex: 1 1 14rem; }
.pe-head__name { font-size: 1rem; font-weight: 600; color: var(--g-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-head__meta { font-size: .84rem; color: var(--g-ink-3); font-variant-numeric: tabular-nums; }
.pe-head__meta [data-edits] { color: var(--g-lilac); }
.pe-head::before {
  content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 2px;
  border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #c9bfff, transparent) 0 0 / 35% 100% no-repeat;
  box-shadow: 0 0 12px rgb(150 130 255 / .6);
  transition: opacity var(--dur-2) var(--ease);
}
.pe-head.is-busy::before { opacity: 1; animation: pe-scan 1.4s cubic-bezier(.45, 0, .55, 1) infinite alternate; }

/* The main download: the violet button with the extractor's press
   feedback, a green wash and a tick that draws in. */
.pe-dl {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-width: 12.5rem; padding: .85rem 1.4rem; border-radius: 12px; border: 0;
  font: inherit; font-size: .98rem; font-weight: 600; color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #9d8ff9 0%, #7262e6 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .35),
    0 0 0 1px rgb(175 160 255 / .35),
    0 10px 26px -10px rgb(130 110 255 / .85);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.pe-dl:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 0 0 1px rgb(190 178 255 / .5), 0 14px 30px -10px rgb(130 110 255 / .95); }
.pe-dl:active { transform: translateY(0) scale(.975); }
.pe-dl:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 3px; }
.pe-dl[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; filter: saturate(.5); }
.pe-dl > * { position: relative; z-index: 1; }
.pe-dl__face { display: inline-flex; align-items: center; gap: .6rem; transition: opacity 260ms var(--ease), transform 320ms var(--ease); }
.pe-dl__icon, .pe-dl__spin { width: 21px; height: 21px; flex: none; }
.pe-dl__spin { display: none; }
.pe-dl.is-saving .pe-dl__spin { display: block; animation: pe-spin .8s linear infinite; }
.pe-dl.is-saving .pe-dl__icon { display: none; }
.pe-dl::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: linear-gradient(180deg, #4fd296 0%, #2e9f6c 100%);
  opacity: 0; transition: opacity 420ms var(--ease);
}
.pe-dl.is-saved::before { opacity: 1; }
.pe-dl.is-saved { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 0 1px rgb(120 230 175 / .45), 0 10px 26px -10px rgb(70 200 140 / .9); }
.pe-dl.is-saved .pe-dl__face { opacity: 0; transform: scale(.85); }
.pe-dl__done {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  opacity: 0; pointer-events: none;
}
.pe-dl__done circle, .pe-dl__done path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pe-dl__done circle { stroke-width: 2.4; transform: rotate(-90deg); transform-origin: 50% 50%; }
.pe-dl__done path { stroke-width: 2.8; }
.pe-dl.is-saved .pe-dl__done { animation: pe-done-in 1500ms var(--ease) forwards; }
.pe-dl.is-saved .pe-dl__done circle { animation: pe-draw 520ms 120ms cubic-bezier(.65, 0, .35, 1) forwards; }
.pe-dl.is-saved .pe-dl__done path { animation: pe-draw 340ms 560ms cubic-bezier(.33, 1, .68, 1) forwards; }
.pe-ripple {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 255 255 / .45), rgb(255 255 255 / 0));
  transform: scale(0); animation: pe-ripple 620ms var(--ease-out) forwards;
}

/* ---- Toolbar: tools as a recessed track with a lit bead on the active
   one; history and zoom as small glass buttons beside it. */
.pe-toolbar {
  position: sticky; top: .6rem; z-index: 5;
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
  padding: .55rem .7rem; border-radius: 20px;
  background: linear-gradient(180deg, rgb(38 34 54 / .86), rgb(24 22 34 / .9));
}
.pe-tools {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 14px;
  background: rgb(0 0 0 / .35); box-shadow: inset 0 1px 3px rgb(0 0 0 / .55), 0 1px 0 rgb(255 255 255 / .05);
}
.pe-tool, .pe-iconbtn {
  position: relative; display: grid; place-items: center; width: 38px; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: 11px; background: none; color: var(--g-ink-2); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pe-tool svg, .pe-iconbtn svg { width: 20px; height: 20px; }
.pe-tool:hover, .pe-iconbtn:hover:not(:disabled) { color: #fff; background: rgb(255 255 255 / .06); }
/* The active tool's highlight is a bead that springs from tool to tool,
   squashing as it lands; the icon then does its own small thing (a line
   draws itself, the T drops in, the highlighter sweeps). */
.pe-tools { position: relative; }
/* A group's button: a small corner mark says there's more in it. */
.pe-tool--group { position: relative; }
.pe-tool__more {
  position: absolute; right: 4px; bottom: 4px; width: 0; height: 0; pointer-events: none;
  border-left: 4px solid transparent; border-bottom: 4px solid currentColor; opacity: .55;
}
.pe-tool--group.has-flyout::after { display: none; }
/* The flyout: the group's tools in a glass menu above its button. */
.pe-flyout {
  position: absolute; bottom: calc(100% + 10px); left: 0; transform: translateX(-50%); z-index: 20;
  display: grid; gap: 2px; min-width: 11.5rem; padding: 5px; border-radius: 16px;
  background: linear-gradient(180deg, rgb(44 40 62 / .97), rgb(26 24 36 / .98));
  border: 1px solid var(--g-rim-soft);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 24px 50px -20px rgb(0 0 0 / .95), 0 0 40px -18px rgb(130 105 255 / .55);
}
.pe-flyout[hidden] { display: none; }
/* A little bridge over the gap, so moving to it from the button keeps it open. */
.pe-flyout::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.pe-flyout button {
  display: flex; align-items: center; gap: .6rem; height: 34px; padding: 0 .6rem 0 .5rem; border: 0; border-radius: 10px;
  background: none; color: var(--g-ink-2); font: inherit; font-size: .82rem; text-align: left; cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.pe-flyout button svg { width: 19px; height: 19px; flex: none; }
.pe-flyout button span { flex: 1; }
.pe-flyout button kbd { font: inherit; font-size: .72rem; color: var(--g-ink-3); padding: .05rem .35rem; border-radius: 5px; border: 1px solid var(--g-rim-soft); }
.pe-flyout button:hover, .pe-flyout button:focus-visible { color: #fff; background: rgb(255 255 255 / .07); outline: none; }
.pe-flyout button[aria-checked="true"] { color: #fff; background: linear-gradient(180deg, rgb(150 132 255 / .38), rgb(110 92 230 / .28)); }
.pe-tools .pe-tool { z-index: 1; }
.pe-tools__bead {
  position: absolute; left: 0; top: 0; z-index: 0; width: 38px; height: 36px; pointer-events: none;
  transform: translate(var(--x, 3px), var(--y, 3px));
  transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1);
}
.pe-tools__bead.is-still { transition: none; }
.pe-tools__bead i {
  position: absolute; inset: 0; border-radius: 11px;
  background: linear-gradient(180deg, #9d8ff9 0%, #7262e6 100%);
  border: 1px solid rgb(190 178 255 / .45);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 6px 16px -8px rgb(130 110 255 / .9), 0 0 18px -6px rgb(150 130 255 / .8);
}
.pe-tools__bead.is-hop i { animation: pe-hop 520ms cubic-bezier(.3, .7, .4, 1); }
@keyframes pe-hop {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.32, .78); }
  58% { transform: scale(.9, 1.1); }
  80% { transform: scale(1.04, .97); }
  100% { transform: scale(1, 1); }
}
.pe-tools.has-bead .pe-tool[aria-pressed="true"] { background: none; border-color: transparent; box-shadow: none; }
.pe-tool.is-picked svg { animation: pe-pick 560ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pe-pick {
  0% { transform: scale(.55) rotate(-14deg); }
  55% { transform: scale(1.2) rotate(7deg); }
  100% { transform: none; }
}
.pe-tool.is-picked .pe-draw { stroke-dasharray: 1; animation: pe-draw-in 520ms 80ms cubic-bezier(.65, 0, .35, 1) both; }
.pe-tool.is-picked .pe-draw--late { animation-delay: 360ms; }
@keyframes pe-draw-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pe-tool.is-picked .pe-drop-in { animation: pe-drop-in 560ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pe-drop-in { 0% { transform: translateY(-7px); opacity: 0; } 60% { transform: translateY(1.5px); opacity: 1; } 100% { transform: none; } }
.pe-tool.is-picked .pe-sweep { transform-box: fill-box; transform-origin: 0 50%; animation: pe-sweep 520ms 60ms cubic-bezier(.65, 0, .35, 1) both; }
@keyframes pe-sweep { from { transform: scaleX(0); } to { transform: none; } }
.pe-tool[data-tool-btn="select"].is-picked svg { animation: pe-click 420ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pe-click { 0% { transform: none; } 35% { transform: translate(1.5px, 1.5px) scale(.82); } 100% { transform: none; } }
.pe-tool[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(180deg, #9d8ff9 0%, #7262e6 100%);
  border-color: rgb(190 178 255 / .45);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 6px 16px -8px rgb(130 110 255 / .9);
}
.pe-tool:focus-visible, .pe-iconbtn:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }
.pe-iconbtn { width: 36px; background: rgb(255 255 255 / .04); border-color: var(--g-rim-soft); }
.pe-iconbtn:disabled { opacity: .35; cursor: default; }
.pe-group { display: flex; align-items: center; gap: .3rem; }
.pe-zoom-label {
  min-width: 4.2ch; padding: 0 .2rem; border: 0; background: none; font: inherit; font-size: .86rem; font-weight: 600;
  color: var(--g-ink-2); font-variant-numeric: tabular-nums; text-align: center; cursor: pointer; border-radius: 8px;
}
.pe-zoom-label:hover { color: #fff; }
.pe-zoom-label:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }
.pe-sep { width: 1px; height: 24px; background: rgb(255 255 255 / .1); }

/* A tooltip that follows the pointer onto a tool: name and key. */
/* Tooltips wait three quarters of a second, so moving across the bar
   doesn't set them flickering, and go the moment the pointer leaves. */
.pe-tool[data-tip]::after, .pe-iconbtn[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: .25rem .5rem; border-radius: 7px; white-space: nowrap; pointer-events: none; z-index: 10;
  font-size: .74rem; font-weight: 500; color: var(--g-ink);
  background: rgb(20 18 30 / .95); border: 1px solid var(--g-rim);
  opacity: 0; visibility: hidden; transition: opacity 120ms var(--ease), visibility 0s 120ms;
}
.pe-tool[data-tip]:hover::after, .pe-iconbtn[data-tip]:hover::after {
  opacity: 1; visibility: visible; transition: opacity 160ms var(--ease) 750ms, visibility 0s 750ms;
}

/* Tooltips in the layers list, in the page's glass, just above what
   they're about: a cut-short name shown whole, or what a row's button does. */
.pe-tip {
  position: fixed; left: 0; top: 0; z-index: 240; max-width: min(26rem, calc(100vw - 16px)); pointer-events: none;
  padding: .28rem .55rem; border-radius: 8px; font-size: .76rem; font-weight: 500; line-height: 1.35; color: var(--g-ink);
  background: rgb(22 20 32 / .96); border: 1px solid var(--g-rim);
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / .9), 0 0 24px -12px rgb(130 105 255 / .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity 120ms var(--ease), transform 160ms var(--ease), visibility 0s 120ms;
}
.pe-tip.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms var(--ease), transform 200ms var(--ease-out), visibility 0s; }
.pe-tip--name { font-size: .8rem; font-weight: 400; padding: .3rem .6rem; }

/* Press feedback: the button gives, then each icon answers in its own
   way — undo winds back, redo winds on, the layers fan apart. */
.pe-iconbtn.is-pressed, .pe-tool.is-pressed { animation: pe-press 380ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pe-press { 0% { transform: scale(1); } 30% { transform: scale(.84); } 70% { transform: scale(1.07); } 100% { transform: none; } }
[data-undo].is-pressed svg { animation: pe-wind-back 520ms cubic-bezier(.34, 1.56, .64, 1); }
[data-redo].is-pressed svg { animation: pe-wind-on 520ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pe-wind-back { 0% { transform: none; } 45% { transform: rotate(-50deg); } 100% { transform: none; } }
@keyframes pe-wind-on { 0% { transform: none; } 45% { transform: rotate(50deg); } 100% { transform: none; } }
.pe-iconbtn.is-pressed::before, .pe-tool.is-pressed::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgb(179 166 255 / .6); animation: pe-ring 520ms var(--ease-out) forwards;
}
@keyframes pe-ring { to { box-shadow: 0 0 0 8px rgb(179 166 255 / 0); } }
.pe-sheet { transform-box: view-box; }
[data-layers-toggle].is-pressed .pe-sheet--1 { animation: pe-sheet-up 560ms cubic-bezier(.34, 1.56, .64, 1); }
[data-layers-toggle].is-pressed .pe-sheet--2 { animation: pe-sheet-mid 560ms cubic-bezier(.34, 1.56, .64, 1); }
[data-layers-toggle].is-pressed .pe-sheet--3 { animation: pe-sheet-down 560ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pe-sheet-up { 40% { transform: translateY(-3.5px); } 100% { transform: none; } }
@keyframes pe-sheet-mid { 40% { transform: translateY(-.5px); } 100% { transform: none; } }
@keyframes pe-sheet-down { 40% { transform: translateY(2.5px); } 100% { transform: none; } }

/* ---- Properties: what can be changed about the selection, or about the
   next thing drawn. */
/* Raised over the workspace below it: its blur makes it a layer of its
   own, and the tooltips under its buttons would otherwise be covered. */
.pe-props {
  position: relative; z-index: 4;
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem 1rem; min-height: 3.1rem;
  padding: .45rem .9rem; border-radius: 18px; font-size: .84rem; color: var(--g-ink-2);
}
.pe-props__label { font-weight: 600; color: var(--g-ink); margin-right: .2rem; }
.pe-props__hint { color: var(--g-ink-3); }
.pe-field { display: inline-flex; align-items: center; gap: .45rem; }
.pe-field[hidden], .pe-props [hidden] { display: none; }
.pe-field > span { color: var(--g-ink-3); }
/* Under anything see-through: a checkerboard, so opacity shows. */
.pe-editor { --checker: repeating-conic-gradient(#3a3747 0 25%, #24222e 0 50%) 0 0 / 10px 10px; }
.pe-swatch {
  position: relative; display: inline-block; flex: none; width: 30px; height: 30px; padding: 0; border-radius: 9px; cursor: pointer;
  background: var(--sw, none), var(--checker, repeating-conic-gradient(#3a3747 0 25%, #24222e 0 50%) 0 0 / 10px 10px); border: 1px solid rgb(255 255 255 / .28);
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .35), 0 3px 8px -3px rgb(0 0 0 / .6);
  transition: transform 160ms var(--ease), box-shadow 200ms var(--ease);
}
.pe-swatch:hover { transform: scale(1.06); }
.pe-swatch[aria-expanded="true"] { box-shadow: inset 0 0 0 2px rgb(0 0 0 / .35), 0 0 0 2px var(--g-lilac), 0 0 16px -3px rgb(150 130 255 / .8); }
.pe-swatch:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }
.pe-hex { width: 6.2rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; }
.pe-hex[readonly] { cursor: pointer; color: var(--g-ink-2); text-transform: none; font-family: inherit; }
.pe-hex::placeholder { color: var(--g-ink-3); text-transform: none; font-family: inherit; }
.pe-swatch.is-none { background: repeating-linear-gradient(135deg, transparent 0 5px, rgb(255 255 255 / .1) 5px 6px), #1a1824; }
.pe-swatch.is-none::after { content: ""; position: absolute; inset: 3px; background: linear-gradient(to top right, transparent calc(50% - 1px), #ef8a7d calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.pe-none svg { width: 15px; height: 15px; }
.pe-none {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border-radius: 9px; border: 1px solid var(--g-rim-soft); background: rgb(255 255 255 / .04);
  font: inherit; font-size: .76rem; color: var(--g-ink-2); cursor: pointer;
}
.pe-none:hover { color: #fff; background: rgb(255 255 255 / .1); }
/* Stroke settings: thickness with its unit, and segmented choices. */
.pe-unit { display: inline-flex; align-items: center; gap: .3rem; color: var(--g-ink-3); font-size: .8rem; }
.pe-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgb(0 0 0 / .35); box-shadow: inset 0 1px 2px rgb(0 0 0 / .5); }
.pe-seg button {
  display: grid; place-items: center; width: 27px; height: 25px; padding: 0; border: 0; border-radius: 7px; cursor: pointer;
  background: none; color: var(--g-ink-3); transition: background 160ms var(--ease), color 160ms var(--ease);
}
.pe-seg button svg { width: 19px; height: 19px; }
.pe-seg button:hover { color: var(--g-ink); }
.pe-seg button[aria-checked="true"], .pe-seg button[aria-pressed="true"] {
  color: #fff; background: linear-gradient(180deg, rgb(150 132 255 / .5), rgb(110 92 230 / .4)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2);
}
.pe-seg button:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 1px; }
/* No fill (or stroke): just the name, and a + to add one. */
.pe-add {
  display: none; place-items: center; flex: none; width: 30px; height: 30px; margin-left: auto; padding: 0; border-radius: 9px; cursor: pointer;
  border: 1px dashed rgb(179 166 255 / .45); background: rgb(179 166 255 / .06); color: var(--g-lilac);
  transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.pe-add svg { width: 16px; height: 16px; }
.pe-add:hover { color: #fff; background: rgb(179 166 255 / .18); transform: scale(1.06); }
.pe-add:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }
.pe-field.is-empty > :not(:first-child) { display: none; }
.pe-field.is-empty > .pe-add { display: inline-grid; }
/* Opacity's value, beside its name: drag sideways or click to type. */
.pe-field > input.pe-scrub {
  flex: none; width: 3.4rem; min-width: 0; height: 24px; margin: 0; padding: 0 .35rem; border: 0; border-radius: 6px; outline: none; box-shadow: none;
  background: none; color: var(--g-ink); font: inherit; font-size: .84rem; font-variant-numeric: tabular-nums; text-align: right;
  cursor: ew-resize; caret-color: auto; transition: background 160ms var(--ease);
}
.pe-field > input.pe-scrub:is([data-width-value], [data-headsize-value], [data-bsize-value]) { width: 4.2rem; }
/* Choices in words rather than icons. */
.pe-seg--words button { width: auto; padding: 0 .55rem; font: inherit; font-size: .75rem; white-space: nowrap; }
.pe-select--small { min-width: 0; height: 28px; font-size: .78rem; }
/* Dropdowns: a glass button and menu in place of the browser's own. */
.pe-select[hidden] { display: none; }
.pe-dropdown {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .4rem; min-width: 10.5rem; height: 30px; padding: 0 .45rem 0 .6rem;
  border-radius: 9px; border: 1px solid var(--g-rim-soft); background: rgb(0 0 0 / .35); box-shadow: inset 0 1px 2px rgb(0 0 0 / .5);
  color: var(--g-ink); font: inherit; font-size: .84rem; cursor: pointer; text-align: left;
}
.pe-dropdown span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-dropdown svg { width: 16px; height: 16px; flex: none; color: var(--g-ink-3); transition: transform 200ms var(--ease); }
.pe-dropdown[aria-expanded="true"] { border-color: var(--g-lilac); }
.pe-dropdown[aria-expanded="true"] svg { transform: rotate(180deg); }
.pe-dropdown:focus-visible { outline: none; border-color: var(--g-lilac); }
.pe-dropdown--small { min-width: 0; height: 28px; font-size: .78rem; }
.pe-body > .pe-props [data-f="font"] .pe-dropdown { flex: 1 1 auto; }

/* Type: the family (shown in itself), then rows of compact controls. */
.pe-body > .pe-props .pe-field.pe-type:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.pe-family {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-width: 0; height: 32px; padding: 0 .45rem 0 .65rem;
  border-radius: 9px; border: 1px solid var(--g-rim-soft); background: rgb(0 0 0 / .35); box-shadow: inset 0 1px 2px rgb(0 0 0 / .5);
  color: var(--g-ink); font: inherit; font-size: .86rem; cursor: pointer; text-align: left; transition: border-color 160ms var(--ease);
}
.pe-family span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-family svg { width: 16px; height: 16px; flex: none; color: var(--g-ink-3); transition: transform 200ms var(--ease); }
.pe-family:hover { border-color: rgb(179 166 255 / .45); }
.pe-family[aria-expanded="true"] { border-color: var(--g-lilac); }
.pe-family[aria-expanded="true"] svg { transform: rotate(-90deg); }
.pe-family:focus-visible { outline: none; border-color: var(--g-lilac); }
.pe-family.is-loading span { opacity: .55; }
.pe-type__row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-width: 0; }
.pe-type__row .pe-dropdown { flex: 1 1 auto; min-width: 0; }
.pe-type__row .pe-toggle { flex: none; }
/* Rows of choices: four and two buttons, sharing the width, whatever it is. */
.pe-type__row--segs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pe-type__row--segs .pe-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 0; }
.pe-type__row--segs .pe-seg button { width: auto; min-width: 0; }
.pe-type__row--segs .pe-seg button svg { width: 17px; height: 17px; }
.pe-type__chips { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.09fr) minmax(0, 1.09fr); gap: .25rem; }
.pe-chip {
  display: flex; align-items: center; gap: 0; min-width: 0; height: 30px; padding: 0 .1rem 0 .3rem; border-radius: 9px;
  background: rgb(0 0 0 / .3); box-shadow: inset 0 1px 2px rgb(0 0 0 / .45); color: var(--g-ink-3); cursor: ew-resize;
}
.pe-chip svg { width: 14px; height: 14px; flex: none; }
.pe-chip input.pe-scrub {
  flex: 1 1 auto; width: 0; min-width: 0; height: 24px; margin: 0; padding: 0 .15rem 0 0; border: 0; border-radius: 6px; outline: none; box-shadow: none;
  background: none; color: var(--g-ink); font: inherit; font-size: .76rem; font-variant-numeric: tabular-nums; text-align: right; cursor: ew-resize;
}
.pe-chip:hover { background: rgb(0 0 0 / .42); }
.pe-chip input.pe-scrub:focus { cursor: text; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px var(--g-lilac); }
.pe-seg--case button { font: 600 .74rem/1 inherit; font-family: inherit; letter-spacing: .02em; }
.pe-more {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 28px; padding: 0 .2rem; border: 0; background: none;
  color: var(--g-ink-3); font: inherit; font-size: .78rem; cursor: pointer;
}
.pe-more svg { width: 14px; height: 14px; transition: transform 200ms var(--ease); }
.pe-more[aria-expanded="true"] svg { transform: rotate(90deg); }
.pe-more:hover { color: var(--g-ink); }
.pe-more:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 1px; border-radius: 6px; }
.pe-type__more { display: grid; gap: .5rem; }
.pe-type__more[hidden] { display: none; }
.pe-type__features { display: grid; gap: .15rem; }
.pe-type__feature { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 28px; font-size: .8rem; color: var(--g-ink-2); }
.pe-type__note { margin: 0; font-size: .74rem; line-height: 1.4; color: var(--g-ink-3); }

/* Type settings, alive: the chosen option is a lilac pill that slides
   (with a little overshoot) to whatever's picked; buttons pop when
   pressed; a number ticks when it changes and its chip glows while it's
   dragged; a new font's name rolls in. */
.pe-type__row--segs .pe-seg[role="radiogroup"], .pe-stack__dir, .pe-stack__align, .pe-stack__spread { position: relative; isolation: isolate; }
.pe-seg__pill {
  position: absolute; z-index: -1; top: 2px; bottom: 2px; left: 0; width: var(--w, 0px); transform: translateX(var(--x, 0px)); border-radius: 7px;
  background: linear-gradient(180deg, rgb(150 132 255 / .55), rgb(110 92 230 / .42));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 0 14px -4px rgb(150 130 255 / .75);
  transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1), width 520ms cubic-bezier(.34, 1.56, .64, 1);
}
.pe-seg__pill:not(.is-ready) { transition: none; }
/* Moving, it squashes and springs back, as the toolbar's does. */
.pe-seg__pill.is-hop { animation: pe-pill-hop 520ms cubic-bezier(.3, .7, .4, 1); }
@keyframes pe-pill-hop { 0% { scale: 1 1; } 30% { scale: 1.18 .8; } 58% { scale: .94 1.08; } 80% { scale: 1.02 .98; } 100% { scale: 1 1; } }
.pe-type__row--segs .pe-seg[role="radiogroup"] button[aria-checked="true"], .pe-stack__dir button[aria-checked="true"], .pe-stack__align button[aria-checked="true"], .pe-stack__spread button[aria-checked="true"] { background: none; box-shadow: none; color: #fff; }
.pe-stack__dir button, .pe-stack__align button, .pe-stack__spread button { position: relative; z-index: 1; transition: color 260ms var(--ease); }
.pe-type .is-pop { animation: pe-type-pop 440ms cubic-bezier(.34, 1.6, .64, 1); }
@keyframes pe-type-pop { 0% { transform: none; } 30% { transform: scale(.8) rotate(-7deg); } 65% { transform: scale(1.12) rotate(3deg); } 100% { transform: none; } }
.pe-type [data-italic].is-pop { animation-name: pe-type-lean; }
@keyframes pe-type-lean { 0% { transform: none; } 35% { transform: skewX(-16deg) scale(.88); } 70% { transform: skewX(6deg) scale(1.08); } 100% { transform: none; } }
.pe-chip { transition: box-shadow 200ms var(--ease), background 200ms var(--ease); }
.pe-chip.is-active { background: rgb(40 32 80 / .55); box-shadow: inset 0 0 0 1px rgb(179 166 255 / .7), 0 0 16px -4px rgb(150 130 255 / .8); }
.pe-chip.is-active svg { color: var(--g-lilac); animation: pe-type-throb 900ms ease-in-out infinite; }
@keyframes pe-type-throb { 50% { transform: scale(1.18); } }
.pe-chip.is-tick input { animation: pe-type-tick 380ms cubic-bezier(.34, 1.5, .64, 1); }
.pe-chip.is-tick svg { animation: pe-type-nudge 380ms cubic-bezier(.34, 1.5, .64, 1); }
@keyframes pe-type-tick { 0% { color: #fff; transform: translateY(-4px); text-shadow: 0 0 10px rgb(179 166 255 / .9); } 100% { transform: none; } }
@keyframes pe-type-nudge { 40% { transform: translateY(-2px) scale(1.15); color: var(--g-lilac); } }
[data-family-name].is-swap { animation: pe-type-swap 460ms cubic-bezier(.22, 1.2, .36, 1); }
/* Under the family: what the PDF's font was matched to, and others. */
.pe-match { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .3rem; margin-top: -.15rem; font-size: .74rem; color: var(--g-ink-3); }
.pe-match[hidden] { display: none; }
.pe-match__label { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-match__label b { color: var(--g-ink-2); font-weight: 600; }
.pe-match__btn { flex: none; padding: .1rem .4rem; border: 0; border-radius: 6px; background: none; color: var(--g-lilac); font: inherit; cursor: pointer; }
.pe-match__btn:hover { background: rgb(179 166 255 / .12); color: #fff; }
.pe-match__btn:focus-visible { outline: 1px solid var(--g-lilac); }
.pe-match__btn[hidden] { display: none; }
.pe-match__menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; display: grid; gap: 2px; padding: 4px;
  border-radius: 11px; border: 1px solid var(--g-rim-soft); background: #17161d; box-shadow: 0 12px 30px rgb(0 0 0 / .5);
}
.pe-match__menu[hidden] { display: none; }
.pe-match__menu p { margin: 0; padding: .45rem .5rem; color: var(--g-ink-3); }
.pe-match__item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4rem .5rem; border: 0; border-radius: 7px; background: none; color: var(--g-ink); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; }
.pe-match__item span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-match__item small { flex: none; font-size: .7rem; color: var(--g-ink-3); font-variant-numeric: tabular-nums; }
.pe-match__item:hover, .pe-match__item:focus-visible { background: rgb(255 255 255 / .07); outline: none; }
@keyframes pe-type-swap { 0% { opacity: 0; transform: translateY(70%); filter: blur(4px); } 100% { opacity: 1; transform: none; filter: none; } }
.pe-family.is-loading::after { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgb(179 166 255 / .25); border-top-color: var(--g-lilac); animation: pe-type-spin 700ms linear infinite; }
.pe-family.is-loading svg { display: none; }
@keyframes pe-type-spin { to { transform: rotate(360deg); } }
.pe-type .pe-dropdown.is-pop { animation-name: pe-type-flash; }
@keyframes pe-type-flash { 0% { box-shadow: inset 0 1px 2px rgb(0 0 0 / .5), 0 0 0 0 rgb(150 130 255 / .7); } 100% { box-shadow: inset 0 1px 2px rgb(0 0 0 / .5), 0 0 0 7px rgb(150 130 255 / 0); } }
.pe-type__more:not([hidden]) > * { animation: pe-type-unfold 360ms cubic-bezier(.22, 1, .36, 1) backwards; }
.pe-type__more:not([hidden]) > :nth-child(2) { animation-delay: 60ms; }
@keyframes pe-type-unfold { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .pe-seg__pill { transition: none; animation: none !important; }
  .pe-type .is-pop, .pe-chip.is-tick input, .pe-chip.is-tick svg, .pe-chip.is-active svg, [data-family-name].is-swap, .pe-type__more:not([hidden]) > * { animation: none; }
}

/* Several things selected: group them, line them up, space them. */
.pe-body > .pe-props .pe-field.pe-multi:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.pe-multi__label { display: flex; align-items: baseline; gap: .4rem; margin-top: .2rem; font-size: .78rem; color: var(--g-ink-3); }
.pe-multi__label em { font-style: normal; font-size: .72rem; color: var(--g-ink-3); opacity: .8; }
.pe-multi__group {
  display: flex; align-items: center; gap: .5rem; width: 100%; height: 34px; padding: 0 .65rem; border-radius: 10px; cursor: pointer;
  border: 1px solid rgb(179 166 255 / .35); background: linear-gradient(180deg, rgb(150 132 255 / .2), rgb(110 92 230 / .12));
  color: var(--g-ink); font: inherit; font-size: .82rem; transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.pe-multi__group svg { width: 17px; height: 17px; flex: none; color: var(--g-lilac); }
.pe-multi__group span { flex: 1; text-align: left; }
.pe-multi__group kbd { font: inherit; font-size: .72rem; color: var(--g-ink-3); }
.pe-multi__group:hover { background: linear-gradient(180deg, rgb(150 132 255 / .32), rgb(110 92 230 / .22)); transform: translateY(-1px); }
.pe-multi__group:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }
.pe-multi__group:disabled { opacity: .4; cursor: default; transform: none; background: linear-gradient(180deg, rgb(150 132 255 / .2), rgb(110 92 230 / .12)); }
.pe-multi__aligns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
.pe-multi__aligns button { width: auto; }
.pe-multi__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .3rem; align-items: center; }
.pe-multi__row .pe-seg[hidden] { display: none; }
.pe-multi__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.pe-chip b { flex: none; width: 15px; font-size: .72rem; font-weight: 600; color: var(--g-ink-3); text-align: center; }
.pe-multi .pe-seg button.is-pop { animation: pe-type-pop 440ms cubic-bezier(.34, 1.6, .64, 1); }
.pe-multi__btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .35rem; }
.pe-multi__btns .pe-multi__group { padding: 0 .5rem; gap: .35rem; }
/* Turn and flip: four icon buttons in a row. */
.pe-turn { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; margin-top: .45rem; }
.pe-turn button {
  display: grid; place-items: center; height: 32px; padding: 0; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--g-rim-soft); background: rgb(0 0 0 / .28); color: var(--g-lilac);
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.pe-turn button svg { width: 18px; height: 18px; }
.pe-turn button:hover { color: #fff; border-color: rgb(179 166 255 / .4); background: rgb(179 166 255 / .14); }
.pe-turn button:active { transform: scale(.94); }
.pe-turn button:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }
.pe-turn__tip { margin: .4rem 0 0; font-size: .68rem; line-height: 1.4; color: var(--g-ink-3); }
.pe-multi__btns .pe-multi__group span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-multi__group--stack svg { color: #ff9cc0; }
.pe-stack__set { display: grid; gap: .45rem; }
.pe-stack__set[hidden], .pe-stack [data-stack-add][hidden] { display: none; }
.pe-stack__dir { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.pe-stack__dir button { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.pe-stack__dir svg { width: 15px; height: 15px; }
.pe-stack__row { grid-template-columns: minmax(0, 1fr) auto; }
.pe-stack__along { display: grid; gap: .3rem; }
.pe-stack__along[hidden], .pe-stack__off[hidden] { display: none; }
/* Distribute: four even options the panel's width, each filling its
   place, so the pill moves a short, even step between them. */
.pe-stack__spread { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; height: 30px; }
.pe-stack__spread button { width: 100%; height: 100%; padding: 0; }
.pe-stack__spread button svg { width: 20px; height: 20px; }
.pe-size__lock { display: inline-grid; place-items: center; width: 22px; height: 20px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--g-ink-3); cursor: pointer; }
.pe-size__lock svg { width: 15px; height: 15px; }
.pe-size__lock:hover { color: var(--g-ink); background: rgb(255 255 255 / .06); }
.pe-size__lock[aria-pressed="true"] { color: #fff; background: rgb(179 166 255 / .22); }
.pe-size .pe-multi__label { align-items: center; }
.pe-size__grid .pe-dropdown { width: 100%; min-width: 0; height: 30px; }
.pe-size__grid .pe-dropdown[hidden], .pe-size__grid .pe-select[hidden] + .pe-dropdown[hidden] { display: none; }
.pe-size__limits[hidden] { display: none; }
.pe-chip__tag { flex: none; margin-left: 1px; font-size: .62rem; letter-spacing: .02em; color: var(--g-ink-3); opacity: .8; }
.pe-chip input.pe-scrub::placeholder { color: var(--g-ink-3); }
.pe-more em { font-style: normal; font-size: .72rem; color: var(--g-lilac); margin-left: .3rem; }
/* Cropping: outside the crop, the picture dimmed; the crop's frame,
   thirds and handles. */
.pe-crop-shade { fill: rgb(10 8 20 / .62); fill-rule: evenodd; pointer-events: none; }
.pe-crop-frame { fill: none; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px rgb(0 0 0 / .6)); pointer-events: none; }
.pe-crop-third { stroke: rgb(255 255 255 / .45); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.pe-crop-move { fill: transparent; cursor: move; }
.pe-crop-handle { fill: #fff; stroke: #7262e6; stroke-width: 1.5; }
.pe-crop-handle[data-crop-h="n"], .pe-crop-handle[data-crop-h="s"] { cursor: ns-resize; }
.pe-crop-handle[data-crop-h="e"], .pe-crop-handle[data-crop-h="w"] { cursor: ew-resize; }
.pe-crop-handle[data-crop-h="nw"], .pe-crop-handle[data-crop-h="se"] { cursor: nwse-resize; }
.pe-crop-handle[data-crop-h="ne"], .pe-crop-handle[data-crop-h="sw"] { cursor: nesw-resize; }
.pe-overlay .pe-crop-move, .pe-overlay .pe-crop-handle { pointer-events: all; }
.pe-box { display: grid; gap: .45rem; margin-top: .2rem; padding-top: .55rem; border-top: 1px solid rgb(255 255 255 / .07); }
.pe-box__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Each side's padding: its letter, and the side marked on a square. */
.pe-box__sides .pe-chip b { width: 11px; }
.pe-box__sides .pe-chip svg { width: 13px; height: 13px; }
.pe-box__sides-btn { width: 30px; height: 30px; margin: 0; }
.pe-box__sides-btn svg { width: 17px; height: 17px; }
.pe-box__paint { display: flex; align-items: center; gap: .4rem; min-height: 30px; font-size: .8rem; color: var(--g-ink-3); }
.pe-box__paint > span { flex: 1 1 auto; }
.pe-box__paint .pe-swatch { width: 28px; height: 28px; }
.pe-box__paint .pe-box__bw { flex: 0 0 4.6rem; }
.pe-box__paint.is-empty > :not(span):not(.pe-add) { display: none; }
.pe-box__paint.is-empty > .pe-add { display: inline-grid; }
.pe-box__paint:not(.is-empty) > .pe-add { display: none; }
.pe-stack__off { justify-self: start; padding: .2rem 0; border: 0; background: none; color: var(--g-ink-3); font: inherit; font-size: .76rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pe-stack__off:hover { color: var(--g-ink); }
/* The gaps, measured on the page while their values are pointed at. */
.pe-gap { stroke: #ff6b9a; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.pe-gap-label rect { fill: #ff6b9a; }
.pe-gap-label text { fill: #fff; font: 600 10px system-ui, sans-serif; }
.pe-gap-label { pointer-events: none; }

/* The font browser: beside the panel, every family in itself. */
.pe-fonts {
  position: fixed; z-index: 250; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 20px;
  background: linear-gradient(180deg, rgb(44 40 62 / .97), rgb(24 22 34 / .98)); border: 1px solid var(--g-rim-soft);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 30px 70px -24px rgb(0 0 0 / .95), 0 0 50px -20px rgb(130 105 255 / .55);
  animation: pe-fonts-in 260ms cubic-bezier(.34, 1.3, .64, 1);
}
.pe-fonts[hidden] { display: none; }
@keyframes pe-fonts-in { from { opacity: 0; transform: translateX(10px) scale(.97); } }
.pe-fonts__head { display: grid; gap: .55rem; padding: .8rem .8rem .55rem; border-bottom: 1px solid rgb(255 255 255 / .07); }
.pe-fonts__search { display: flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .65rem; border-radius: 11px; background: rgb(0 0 0 / .38); box-shadow: inset 0 1px 2px rgb(0 0 0 / .5); border: 1px solid transparent; color: var(--g-ink-3); }
.pe-fonts__search:focus-within { border-color: var(--g-lilac); }
.pe-fonts__search svg { width: 16px; height: 16px; flex: none; }
.pe-fonts__search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; box-shadow: none; color: var(--g-ink); font: inherit; font-size: .88rem; }
.pe-fonts__cats { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.pe-fonts__cats::-webkit-scrollbar { display: none; }
.pe-fonts__cats button { flex: none; height: 26px; padding: 0 .6rem; border: 0; border-radius: 8px; background: rgb(255 255 255 / .04); color: var(--g-ink-3); font: inherit; font-size: .76rem; cursor: pointer; }
.pe-fonts__cats button:hover { color: var(--g-ink); }
.pe-fonts__cats button[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, rgb(150 132 255 / .5), rgb(110 92 230 / .4)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); }
.pe-fonts__cats button:focus-visible { outline: 1px solid var(--g-lilac); }
.pe-fonts__list { position: relative; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(179 166 255 / .3) transparent; outline: none; }
.pe-fonts__sizer { width: 1px; }
.pe-fonts__head-row, .pe-fonts__row { position: absolute; left: 6px; right: 6px; height: 40px; }
.pe-fonts__head-row { display: flex; align-items: flex-end; padding: 0 .55rem .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--g-ink-3); }
.pe-fonts__row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 0 .6rem; border: 0; border-radius: 10px;
  background: none; color: var(--g-ink); text-align: left; cursor: pointer;
}
.pe-fonts__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.08rem; opacity: .35; transition: opacity 260ms var(--ease); }
.pe-fonts__row.is-ready .pe-fonts__name { opacity: 1; }
.pe-fonts__meta { flex: none; font-size: .7rem; color: var(--g-ink-3); font-variant-numeric: tabular-nums; }
.pe-fonts__row.is-active { background: rgb(255 255 255 / .07); }
.pe-fonts__row[aria-selected="true"] { background: linear-gradient(180deg, rgb(150 132 255 / .34), rgb(110 92 230 / .24)); }
.pe-fonts__row[aria-selected="true"]::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--g-lilac); }
.pe-fonts__foot { margin: 0; padding: .5rem .9rem .65rem; font-size: .7rem; color: var(--g-ink-3); border-top: 1px solid rgb(255 255 255 / .07); }
.pe-fonts__msg { margin: 0; padding: 0 .9rem .65rem; font-size: .74rem; line-height: 1.45; color: var(--g-ink-2); }
.pe-fonts__msg.is-warn { color: #ffcf8a; }
.pe-fonts__add {
  display: inline-flex; flex: none; align-items: center; gap: .25rem; height: 26px; margin-right: -.35rem; padding: 0 .55rem; border: 0; border-radius: 8px;
  background: linear-gradient(180deg, rgb(150 132 255 / .3), rgb(110 92 230 / .2)); color: var(--g-ink); font: inherit; font-size: .74rem; cursor: pointer;
}
.pe-fonts__add svg { width: 13px; height: 13px; }
.pe-fonts__add:hover { background: linear-gradient(180deg, rgb(150 132 255 / .45), rgb(110 92 230 / .32)); }
.pe-fonts__add:focus-visible { outline: 1px solid var(--g-lilac); }
.pe-fonts__remove {
  display: none; flex: none; place-items: center; width: 22px; height: 22px; margin-left: .35rem; border-radius: 6px;
  color: var(--g-ink-3); font-size: 1rem; line-height: 1; cursor: pointer;
}
.pe-fonts__row:hover .pe-fonts__remove, .pe-fonts__row.is-active .pe-fonts__remove { display: grid; }
.pe-fonts__remove:hover { color: #fff; background: rgb(255 255 255 / .1); }
.pe-menu {
  position: fixed; z-index: 245; display: grid; gap: 2px; padding: 5px; border-radius: 14px; max-height: 60vh; overflow: auto;
  background: linear-gradient(180deg, rgb(44 40 62 / .98), rgb(26 24 36 / .98)); border: 1px solid var(--g-rim-soft);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 24px 50px -20px rgb(0 0 0 / .95), 0 0 40px -18px rgb(130 105 255 / .55);
}
.pe-menu [role="option"] {
  display: block; width: 100%; height: 30px; padding: 0 .65rem; border: 0; border-radius: 9px; background: none; text-align: left;
  color: var(--g-ink-2); font: inherit; font-size: .82rem; white-space: nowrap; cursor: pointer;
}
.pe-menu [role="option"]:hover, .pe-menu [role="option"]:focus-visible { color: #fff; background: rgb(255 255 255 / .07); outline: none; }
.pe-menu [role="option"][aria-selected="true"] { color: #fff; background: linear-gradient(180deg, rgb(150 132 255 / .38), rgb(110 92 230 / .28)); }
/* A line's ends: the six heads for each, the start's drawn facing back. */
.pe-field--ends { align-items: flex-start; }
.pe-ends { display: grid; grid-template-columns: auto auto; align-items: center; gap: .35rem .5rem; margin-left: auto; }
.pe-ends__label { font-size: .74rem; color: var(--g-ink-3); }
.pe-ends .pe-seg button { width: 24px; }
.pe-ends [data-heads="start"] svg { transform: scaleX(-1); }
.pe-field > input.pe-scrub:hover { background: rgb(255 255 255 / .07); }
.pe-field > input.pe-scrub:focus { cursor: text; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px var(--g-lilac); }
.pe-num, .pe-select {
  height: 30px; padding: 0 .5rem; border-radius: 9px; font: inherit; font-size: .84rem; color: var(--g-ink);
  background: rgb(0 0 0 / .35); border: 1px solid var(--g-rim-soft); box-shadow: inset 0 1px 2px rgb(0 0 0 / .5);
  caret-color: auto;
}
.pe-num { width: 4.4rem; font-variant-numeric: tabular-nums; }
.pe-select { min-width: 10.5rem; padding-right: 1.6rem; cursor: pointer; }
.pe-select option { background: #1d1a28; }
/* Focused fields: a thin lilac border, not a thick ring. */
.pe-num:focus, .pe-num:focus-visible, .pe-select:focus-visible { outline: none; border-color: var(--g-lilac); }
.pe-toggle {
  min-width: 30px; height: 30px; padding: 0 .4rem; border-radius: 9px; border: 1px solid var(--g-rim-soft);
  background: rgb(255 255 255 / .04); color: var(--g-ink-2); font: inherit; font-size: .9rem; cursor: pointer;
}
.pe-toggle[aria-pressed="true"] { color: #fff; border-color: rgb(179 166 255 / .5); background: rgb(179 166 255 / .18); }
.pe-toggle:focus-visible, .pe-none:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }
.pe-props input[type="range"] { --f: 1; width: 6.5rem; height: 1.6rem; cursor: pointer; background: none; -webkit-appearance: none; appearance: none; }
.pe-props input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, #6f5fe4, #b3a6ff) 0 0 / calc(8px + (100% - 16px) * var(--f)) 100% no-repeat, rgb(0 0 0 / .42);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .65);
}
.pe-props input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: rgb(0 0 0 / .42); }
.pe-props input[type="range"]::-moz-range-progress { height: 5px; border-radius: 999px; background: linear-gradient(90deg, #6f5fe4, #b3a6ff); }
.pe-props input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .42);
  background: radial-gradient(circle at 34% 24%, rgb(255 255 255 / .6), transparent 50%), linear-gradient(180deg, #c7bdff, #8b7cf0);
  box-shadow: 0 2px 6px rgb(0 0 0 / .55), 0 0 10px -2px rgb(150 130 255 / .7);
}
.pe-props input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .42);
  background: linear-gradient(180deg, #c7bdff, #8b7cf0); box-shadow: 0 2px 6px rgb(0 0 0 / .55);
}
.pe-props input[type="range"]:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; border-radius: 6px; }
.pe-props__end { margin-left: auto; display: flex; gap: .3rem; }

.pe-page.is-eyedropping, .pe-page.is-eyedropping * { cursor: crosshair !important; }
@media (max-width: 900px) {
  /* Across the top: the folds side by side, and the panel scrolls rather
     than pushing the page away. */
  .pe-body > .pe-props .pe-adj { width: 100%; }
  .pe-adj [data-adj-groups] { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); align-items: start; column-gap: 1.2rem; }
  .pe-body > .pe-props:has(.pe-adj:not([hidden])) { max-height: 46vh; overflow-y: auto; }
}
.pe-toolbar > .pe-group:last-child [data-tip]::after { left: auto; right: 0; transform: none; }

/* ---- Workspace: the pages. */
/* The layers column is always there, at no width when the panel's shut,
   so opening and shutting it is a transition of the grid itself: the
   pages narrow (and re-fit) as the panel slides in. Gaps are margins,
   since a grid gap would stay behind with the column shut. */
/* Layers on the left, the pages in the middle, properties on the right.
   The layers column is always there, at no width when the panel's shut,
   so opening and shutting it is a transition of the grid itself: the
   pages narrow (and re-fit) as the panel slides in. Gaps are margins,
   since a grid gap would stay behind with the column shut. */
.pe-body {
  display: grid; grid-template-columns: 0rem minmax(0, 1fr) 15.5rem; grid-template-rows: minmax(0, 1fr);
  height: clamp(26rem, 78dvh, 62rem);
  transition: grid-template-columns 480ms cubic-bezier(.22, .61, .36, 1), grid-template-rows 480ms cubic-bezier(.22, .61, .36, 1);
}
.pe-body.has-layers { grid-template-columns: 16.2rem minmax(0, 1fr) 15.5rem; }
.pe-body > .pe-layers-slot { grid-column: 1; grid-row: 1; }
.pe-body > .pe-scroll { grid-column: 2; grid-row: 1; }
.pe-body > .pe-props { grid-column: 3; grid-row: 1; }
.pe-layers-slot { display: grid; min-width: 0; min-height: 0; overflow: hidden; }

/* Properties as a side panel: what's selected at the top, each setting a
   row of its own, and the arrange / group / delete buttons at the foot. */
.pe-body > .pe-props {
  margin-left: .7rem; padding: 1rem .95rem .9rem; border-radius: 20px; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgb(179 166 255 / .2) transparent;
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: .95rem;
}
.pe-body > .pe-props .pe-props__label { margin: 0; font-size: .92rem; }
.pe-body > .pe-props .pe-props__hint { margin-top: -.55rem; font-size: .8rem; line-height: 1.45; }
.pe-body > .pe-props .pe-field { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; width: 100%; }
.pe-body > .pe-props .pe-field[hidden] { display: none; }
.pe-body > .pe-props .pe-field > span:first-child:not(.pe-swatch) { flex: 1 1 auto; }
.pe-body > .pe-props [data-f="font"] .pe-select { flex: 1 1 100%; min-width: 0; }
/* (The site's form styles make number fields full width; not here.) */
.pe-body > .pe-props .pe-num { flex: none; width: 4.6rem; }
.pe-body > .pe-props .pe-hex { flex: 0 1 5.1rem; min-width: 4.2rem; width: auto; padding: 0 .4rem; }
.pe-body > .pe-props [data-f="fill"], .pe-body > .pe-props [data-f="stroke"] { flex-wrap: nowrap; gap: .4rem; }
.pe-body > .pe-props [data-f="fill"] > span:first-child, .pe-body > .pe-props [data-f="stroke"] > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-body > .pe-props [data-f="font"] .pe-num { flex: 1 1 auto; width: 0; }
.pe-body > .pe-props :is([data-f="opacity"], [data-f="width"], [data-f="headsize"], [data-f="bsize"], [data-f="bthin"], [data-f="bsmooth"], [data-f="bsoft"], [data-f="hlstrength"], [data-f="esize"], [data-f="estrength"], [data-f="sweight"], [data-f="corner"]) input[type="range"] { flex: 1 1 100%; width: auto; }
.pe-body > .pe-props .pe-props__end {
  flex-wrap: wrap; gap: .35rem; margin: auto 0 0; padding-top: .85rem; border-top: 1px solid rgb(255 255 255 / .07);
}
.pe-body > .pe-props .pe-props__end[hidden] { display: none; }
/* At the window's right edge, tooltips open leftwards. */
.pe-body > .pe-props [data-tip]::after { left: auto; right: 0; transform: none; }

/* Scrollbars: thin, rounded, a faint lilac on nothing, a little brighter
   on hover. The standard properties are what Chrome and Firefox use;
   Safari takes the -webkit- ones. */
html { scrollbar-color: rgb(179 166 255 / .22) #0a0a0c; }
.pe-scroll, .pe-layers__list { scrollbar-width: thin; scrollbar-color: rgb(179 166 255 / .18) transparent; }
.pe-scroll:hover, .pe-layers__list:hover { scrollbar-color: rgb(179 166 255 / .38) transparent; }
.pe-scroll::-webkit-scrollbar, .pe-layers__list::-webkit-scrollbar { width: 8px; height: 8px; }
.pe-scroll::-webkit-scrollbar-track, .pe-layers__list::-webkit-scrollbar-track,
.pe-scroll::-webkit-scrollbar-corner, .pe-layers__list::-webkit-scrollbar-corner { background: transparent; }
.pe-scroll::-webkit-scrollbar-thumb, .pe-layers__list::-webkit-scrollbar-thumb {
  border: 2px solid transparent; border-radius: 999px; background: rgb(179 166 255 / .2) padding-box;
}
.pe-scroll:hover::-webkit-scrollbar-thumb, .pe-layers__list:hover::-webkit-scrollbar-thumb { background-color: rgb(179 166 255 / .42); }
/* The layers list's is a hairline. */
.pe-layers__list::-webkit-scrollbar { width: 3px; }
.pe-layers__list::-webkit-scrollbar-thumb { border: 0; border-radius: 3px; background: rgb(179 166 255 / .22); }
.pe-layers__list:hover::-webkit-scrollbar-thumb { background: rgb(179 166 255 / .45); }

/* ---- Layers: what's on the page, front to back. Rows are placed
   absolutely and only those in view exist, so a page of thousands of
   runs of text lists as quickly as a page of ten. */
.pe-layers {
  display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-radius: 20px; overflow: hidden;
  width: 15.5rem; margin-right: .7rem;
  transition: opacity 340ms var(--ease), transform 480ms cubic-bezier(.22, .61, .36, 1);
}
.pe-body:not(.has-layers) .pe-layers { opacity: 0; transform: translateX(-28px); }
.pe-body.is-instant, .pe-body.is-instant .pe-layers { transition: none; }
.pe-layers__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .8rem .95rem .55rem; border-bottom: 1px solid rgb(255 255 255 / .06);
}
.pe-layers__title { font-size: .86rem; font-weight: 600; color: var(--g-ink); }
.pe-layers__count { font-size: .76rem; color: var(--g-ink-3); font-variant-numeric: tabular-nums; }
.pe-layers__list {
  position: relative; overflow-y: auto; overscroll-behavior: contain; outline: none;
}
/* Keyboard focus shows on the row it's at (its lilac outline), not as a
   ring round the whole list. */
.pe-layers__list:focus-visible { outline: none; }
.pe-layers__hint { padding: .9rem .95rem; font-size: .8rem; color: var(--g-ink-3); }
.pe-layer {
  position: absolute; top: 0; left: .4rem; right: .4rem; height: 29px;
  /* Selection eases in and out: colour, and the shape it takes when a
     folder's rows join into one block. */
  transition: transform 340ms cubic-bezier(.2, .9, .25, 1.05), background 240ms var(--ease), color 240ms var(--ease),
    box-shadow 280ms var(--ease), height 260ms var(--ease-out), border-radius 260ms var(--ease-out);
  display: flex; align-items: center; gap: .5rem; padding: 0 .55rem; border-radius: 8px;
  font-size: .8rem; color: var(--g-ink-2); white-space: nowrap; cursor: pointer;
  -webkit-user-select: none; user-select: none; touch-action: none;
}
.pe-layer:hover { background: rgb(255 255 255 / .05); color: var(--g-ink); }
.pe-layer[aria-selected="true"] { color: #fff; background: rgb(140 124 255 / .2); box-shadow: inset 0 0 0 1px rgb(179 166 255 / .3); }
/* Where keyboard focus is in the list: shown only while the keyboard is
   being used there, so a click leaves no second outline. */
.pe-layers__list.is-keyboard .pe-layer.is-active { box-shadow: inset 0 0 0 1px var(--g-lilac); }
/* A selected folder with its contents: one highlight behind their rows,
   whose height eases with the rows as the folder opens or folds. The
   rows inside it show no highlight of their own. */
.pe-layers__block {
  position: absolute; top: 0; left: .4rem; right: .4rem; border-radius: 8px; pointer-events: none;
  background: rgb(140 124 255 / .2); box-shadow: inset 0 0 0 1px rgb(179 166 255 / .32);
  transition: transform 340ms cubic-bezier(.2, .9, .25, 1.05), height 340ms cubic-bezier(.2, .9, .25, 1.05);
}
.pe-layer[data-block="in"][aria-selected="true"] { background: transparent; box-shadow: none; }
.pe-layers__list.is-keyboard .pe-layer[data-block="in"].is-active { box-shadow: inset 0 0 0 1px var(--g-lilac); }
/* The row being dragged rides on top of the others, under the pointer. */
.pe-layer.is-dragging {
  z-index: 2; transition: none; cursor: grabbing; color: #fff;
  background: rgb(52 46 80 / .96);
  box-shadow: inset 0 0 0 1px rgb(179 166 255 / .55), 0 12px 26px -10px rgb(0 0 0 / .85), 0 0 22px -8px rgb(150 130 255 / .7);
}
.pe-layer.is-landed { animation: pe-landed 900ms var(--ease-out); }
@keyframes pe-landed { 0% { background: rgb(179 166 255 / .5); } 100% { background: rgb(140 124 255 / .2); } }
.pe-sel-box.is-flash { animation: pe-sel-flash 700ms var(--ease-out); }
@keyframes pe-sel-flash { 0% { stroke-width: 5; fill: rgb(140 124 255 / .3); } 100% { stroke-width: 1.5; fill: rgb(140 124 255 / .06); } }
.pe-layer svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.pe-layer__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pe-layer__name small { color: var(--g-ink-3); font-size: .74rem; }
/* Hide and delete, at the row's right end: there on hover or keyboard
   focus; a hidden layer keeps its crossed-out eye showing. */
/* The buttons take room only while they show (hovered, or the row the
   keyboard's on while it's in use), so names aren't cut short for them
   otherwise; a hidden or locked layer keeps its eye or lock showing. */
.pe-layer__actions { display: flex; gap: 1px; margin-right: -.3rem; }
.pe-layer:not(:hover) .pe-layer__btn { display: none; }
.pe-layers__list.is-keyboard .pe-layer.is-active .pe-layer__btn,
.pe-layer.is-off .pe-layer__btn--eye, .pe-layer.is-locked .pe-layer__btn--lock { display: grid; }
.pe-layer:hover .pe-layer__btn, .pe-layers__list.is-keyboard .pe-layer.is-active .pe-layer__btn { animation: pe-btn-in 180ms var(--ease) both; }
@keyframes pe-btn-in { from { opacity: 0; transform: translateX(4px); } }
.pe-layer__btn {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--g-ink-3); cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.pe-layer__btn svg { width: 15px; height: 15px; opacity: 1; }
.pe-layer__btn:hover { color: #fff; background: rgb(255 255 255 / .1); }
.pe-layer__btn[data-layer-action="delete"]:hover { color: #ffb4aa; background: rgb(239 138 125 / .16); }
/* A locked layer keeps its lock showing (with the eye, if it's hidden too). */
.pe-layer.is-locked .pe-layer__btn--lock { color: var(--g-lilac); }
.pe-layer__btn svg { transform-origin: 50% 60%; }
.pe-shackle { transform-box: fill-box; transform-origin: 20% 100%; }
.pe-lid { transform-box: fill-box; transform-origin: 100% 100%; }
.pe-layer.is-off > svg, .pe-layer.is-off .pe-layer__name { opacity: .42; }
/* Folders: a chevron to fold them, their name a touch brighter; their
   members are indented beneath. */
.pe-layer--group .pe-layer__name { color: var(--g-ink); font-weight: 560; }
.pe-layer__fold {
  display: grid; place-items: center; width: 16px; height: 20px; margin: 0 -.3rem 0 -.35rem; padding: 0; border: 0;
  background: none; color: var(--g-ink-3); cursor: pointer;
}
.pe-layer__fold svg { width: 12px; height: 12px; opacity: 1; transition: transform 300ms cubic-bezier(.34, 1.4, .64, 1); }
.pe-layer__fold.is-open svg { transform: rotate(90deg); }
.pe-layer__fold:hover { color: #fff; }
.pe-layer__rename {
  flex: 1; min-width: 0; height: 22px; padding: 0 .35rem; border-radius: 6px; font: inherit; font-size: .8rem;
  color: #fff; background: rgb(0 0 0 / .45); border: 1px solid var(--g-lilac); outline: none; caret-color: auto;
}
/* Pages in the list: a preview, the number, and how many layers; a dot
   when edited. The page in view has its preview ringed. Dragging the row
   moves the page. */
/* A page's row is taller than a layer's, so its preview sits clear of
   the row's edge; its name is on the left, its layer count on the right. */
.pe-layer--page { height: 41px; color: var(--g-ink); font-weight: 600; cursor: grab; }
.pe-layer--page .pe-layer__name { flex: 0 1 auto; }
.pe-layer__count { flex: none; margin-left: auto; padding-left: .5rem; color: var(--g-ink-3); font-size: .74rem; font-weight: 450; font-variant-numeric: tabular-nums; }
.pe-layer__thumb {
  flex: none; display: block; height: 28px; width: auto; max-width: 46px; border-radius: 4px; background: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 3px 8px -4px rgb(0 0 0 / .9);
  transition: box-shadow 260ms var(--ease);
}
.pe-layer--page.is-current { color: #fff; }
.pe-layer__dot { flex: none; width: 6px; height: 6px; margin: 0 .1rem 0 .45rem; border-radius: 50%; background: var(--g-lilac); opacity: 0; transform: scale(.4); transition: opacity 240ms var(--ease), transform 300ms cubic-bezier(.34, 1.4, .64, 1); }
.pe-layer--page.is-edited .pe-layer__dot { opacity: 1; transform: none; }
.pe-layer--note { color: var(--g-ink-3); font-style: italic; cursor: default; }
.pe-layer--note:hover { background: none; color: var(--g-ink-3); }

.pe-scroll {
  position: relative; overflow: auto; overscroll-behavior: contain; border-radius: 20px;
  background:
    radial-gradient(rgb(255 255 255 / .05) 1px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(180deg, #17151f, #121019);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), inset 0 0 0 1px rgb(255 255 255 / .06), inset 0 20px 40px -24px rgb(0 0 0 / .7);
}
/* Focus lands here so keys reach the page after a click; the selection
   shows where it is, so no ring. */
.pe-scroll:focus { outline: none; }
.pe-pages { display: grid; justify-items: center; gap: 1.4rem; padding: 1.4rem; width: max-content; min-width: 100%; }
/* Pages out of view are skipped by the browser's rendering, and their
   loading shimmer only runs near the view. */
.pe-page {
  position: relative; background: #fff; touch-action: none; content-visibility: auto;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .3), 0 18px 40px -18px rgb(0 0 0 / .9);
}
/* A page fades up out of its shimmer the first time it's drawn. */
.pe-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 360ms var(--ease); }
.pe-page.is-loading canvas { opacity: 0; }
.pe-page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, #f1f0f5 30%, #fbfbfd 50%, #f1f0f5 70%) 0 0 / 250% 100%;
  transition: opacity 360ms var(--ease);
}
.pe-page.is-loading::after {
  opacity: 1;
  background: linear-gradient(100deg, #f1f0f5 30%, #fbfbfd 50%, #f1f0f5 70%) 0 0 / 250% 100%;
  animation: pe-shimmer 1.4s linear infinite paused;
}
.pe-page.is-loading.is-near::after { animation-play-state: running; }
/* The colour picker's own styles are in pdf.css, shared with the other tools. */

/* Content dragged off its page: a picture of it follows the pointer above
   everything, and the page it would land on is lit. */
.pe-carry {
  position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; opacity: .94;
  filter: drop-shadow(0 14px 24px rgb(0 0 0 / .55)) drop-shadow(0 0 1px rgb(179 166 255 / .9));
}
.pe-page.is-active { content-visibility: visible; z-index: 2; }
/* A page selected whole: ringed, until it's gone into. */
.pe-page.is-picked { box-shadow: 0 0 0 2px var(--g-lilac), 0 0 30px -6px rgb(150 130 255 / .65), 0 18px 40px -18px rgb(0 0 0 / .9); }
.pe-page.is-drop { box-shadow: 0 0 0 2px var(--g-lilac), 0 0 34px -6px rgb(150 130 255 / .75); }
.pe-page { transition: box-shadow 200ms var(--ease); }
/* The stroke being worked on: the selection's outline and handles fade, to
   show the border as it really is. */
.pe-overlay { transition: opacity 180ms var(--ease); }
.pe-pages.is-peek .pe-overlay { opacity: 0; }
.pe-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pe-page[data-tool="select"] { cursor: default; }
/* The eraser's own ring shows its size and shape, in place of a cursor. */
.pe-page[data-tool="eraser"] { cursor: none; }
.pe-eraser-ring {
  position: fixed; left: 0; top: 0; z-index: 215; pointer-events: none; border-radius: 50%;
  border: 1.5px solid #b3a6ff; background: rgb(255 255 255 / .14); box-shadow: 0 0 0 1px rgb(0 0 0 / .45), 0 0 14px -4px rgb(150 130 255 / .8);
}
.pe-eraser-ring[hidden] { display: none; }
.pe-eraser-ring.is-square { border-radius: 3px; }
.pe-page[data-tool="select"].is-over-item { cursor: move; }
.pe-page[data-tool="text"] { cursor: text; }
.pe-page:is([data-tool="rect"], [data-tool="ellipse"], [data-tool="triangle"], [data-tool="star"], [data-tool="line"], [data-tool="arrow"],
  [data-tool="ink"], [data-tool="pencil"], [data-tool="brush"], [data-tool="marker"], [data-tool="highlighter"], [data-tool="highlight"]) { cursor: crosshair; }
.pe-page.is-locked::before {
  content: attr(data-locked); position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3;
  padding: .3rem .6rem; border-radius: 8px; font-size: .74rem; white-space: nowrap; color: #fff; background: rgb(20 18 30 / .85);
}

/* Selection: lilac outlines, white handles with a violet rim. */
.pe-sel-item { fill: none; stroke: #8c7cff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pe-sel-box { fill: rgb(140 124 255 / .06); stroke: #7262e6; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pe-sel-box.is-photo { fill: none; }
.pe-sel-box.is-photo.is-flash { animation-name: pe-sel-flash-clear; }
@keyframes pe-sel-flash-clear { 0% { stroke-width: 5; } 100% { stroke-width: 1.5; } }
/* A photo held down shows as it was, labelled. */
.pe-before-badge {
  position: absolute; top: 12px; left: 50%; z-index: 4; transform: translateX(-50%); pointer-events: none;
  padding: .3rem .75rem; border-radius: 999px; font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: rgb(20 18 30 / .78); box-shadow: inset 0 0 0 1px rgb(179 166 255 / .45), 0 6px 18px rgb(0 0 0 / .45); backdrop-filter: blur(6px);
  animation: pe-before-in 160ms var(--ease-out);
}
@keyframes pe-before-in { from { opacity: 0; transform: translate(-50%, -4px); } }
.pe-hover { fill: none; stroke: #8c7cff; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.pe-marquee { fill: rgb(140 124 255 / .1); stroke: #7262e6; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
/* Snap guides: a thin, see-through purple line between things that line
   up, and a fainter dashed one down the page's centre. */
.pe-guide-glow { stroke: #4ade80; stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #4ade80) drop-shadow(0 0 7px rgb(74 222 128 / .7)); pointer-events: none; }
.pe-guide { stroke: #8c7cff; stroke-width: 1; opacity: .55; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.pe-guide--centre { stroke: #b3a6ff; stroke-dasharray: 3 4; opacity: .4; }
/* A gradient's own controls, while it's open in the picker. */
.pe-gline { stroke: #fff; stroke-width: 1.5; fill: none; filter: drop-shadow(0 0 1.5px rgb(0 0 0 / .8)); pointer-events: none; }
.pe-gline--minor { stroke-dasharray: 3 3; opacity: .8; }
.pe-gring { fill: none; stroke: rgb(255 255 255 / .75); stroke-width: 1.2; stroke-dasharray: 5 4; filter: drop-shadow(0 0 1.5px rgb(0 0 0 / .8)); pointer-events: none; }
/* A line's or arrow's handles: its ends (round) and its bend (a diamond). */
.pe-ahandle { fill: #fff; stroke: #7262e6; stroke-width: 1.6; pointer-events: all; cursor: grab; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .55)); }
.pe-ahandle--bend { fill: #e6e1ff; }
/* Editing a shape's points: its outline, its points (squares at corners,
   circles where it's smooth; filled when picked) and a picked point's
   curve handles. */
.pe-vec-line { fill: none; stroke: #7262e6; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.pe-vec-ghost { fill: none; stroke: rgb(179 166 255 / .75); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.pe-vp { fill: #fff; stroke: #7262e6; stroke-width: 1.5; pointer-events: all; cursor: move; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5)); }
.pe-vp.is-picked { fill: #7262e6; stroke: #fff; }
.pe-vp-hit { fill: transparent; stroke: none; pointer-events: all; cursor: move; }
.pe-vh { fill: #fff; stroke: #7262e6; stroke-width: 1.3; pointer-events: all; cursor: grab; }
.pe-vh-line { stroke: #7262e6; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.pe-ahandle--bend.is-bent { fill: #b3a6ff; stroke: #fff; }
.pe-ahandle-guide { stroke: rgb(179 166 255 / .6); stroke-width: 1; stroke-dasharray: 3 3; fill: none; pointer-events: none; vector-effect: non-scaling-stroke; }
.pe-gsnap { fill: rgb(179 166 255 / .55); stroke: rgb(0 0 0 / .4); stroke-width: 1; pointer-events: none; }
.pe-gsnap.is-hit { fill: #b3a6ff; stroke: #fff; stroke-width: 1.5; }
.pe-ghandle, .pe-gstop { stroke: #fff; pointer-events: all; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .65)); }
.pe-ghandle { stroke-width: 2.5; cursor: grab; }
.pe-ghandle--axis { fill: #fff; stroke: #7262e6; stroke-width: 1.5; }
.pe-gstop { stroke-width: 2; cursor: ew-resize; }
.pe-ghandle.is-active, .pe-gstop.is-active { stroke: #b3a6ff; stroke-width: 3; }
.pe-handle { fill: #fff; stroke: #7262e6; stroke-width: 1.5; pointer-events: all; }
/* Just outside a picture's corners: drag to turn it. */
.pe-rotate {
  fill: transparent; pointer-events: all;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M6 15a7 7 0 1 1 3.2 4.8' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M6 15a7 7 0 1 1 3.2 4.8' fill='none' stroke='%23332a66' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M2.5 12.5 6 16l3.5-3.5' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.5 12.5 6 16l3.5-3.5' fill='none' stroke='%23332a66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, grab;
}
.pe-page.is-turning, .pe-page.is-turning * { cursor: grabbing !important; }
.pe-turn-badge {
  position: absolute; z-index: 5; pointer-events: none; padding: .2rem .5rem; border-radius: 7px;
  font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff;
  background: rgb(20 18 30 / .85); box-shadow: inset 0 0 0 1px rgb(179 166 255 / .45), 0 4px 12px rgb(0 0 0 / .4);
}
/* The selection's edges, their whole length: drag to resize, double-click to fit. */
.pe-edge { fill: transparent; pointer-events: all; }
.pe-edge[data-h="n"], .pe-edge[data-h="s"] { cursor: ns-resize; }
.pe-edge[data-h="e"], .pe-edge[data-h="w"] { cursor: ew-resize; }
.pe-handle[data-h="nw"], .pe-handle[data-h="se"] { cursor: nwse-resize; }
.pe-handle[data-h="ne"], .pe-handle[data-h="sw"] { cursor: nesw-resize; }
.pe-handle[data-h="n"], .pe-handle[data-h="s"] { cursor: ns-resize; }
.pe-handle[data-h="e"], .pe-handle[data-h="w"] { cursor: ew-resize; }

/* Text being typed: drawn by the browser over the page until it's set. */
.pe-typing {
  position: absolute; z-index: 4; margin: 0; padding: 0 1px; min-width: 4px; white-space: pre; outline: none;
  line-height: 1.2; transform-origin: 0 0; caret-color: #7262e6; cursor: text;
  box-shadow: 0 0 0 1px rgb(140 124 255 / .75); border-radius: 2px;
}
/* Its text unseen (the caret still shown) until the matched font's in. */
.pe-typing.is-waiting { color: transparent !important; -webkit-text-fill-color: transparent !important; background-image: none !important; caret-color: #7262e6 !important; }
/* (Selected text is painted in the selection's colour unless told not to.) */
.pe-typing.is-waiting::selection { color: transparent; -webkit-text-fill-color: transparent; background: rgb(140 124 255 / .3); }

.pe-foot { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .5rem 1rem; padding: .2rem .4rem 0; }
.pe-note { flex: 1 1 18rem; font-size: .84rem; color: var(--g-ink-3); min-height: 1.3em; }
/* Notes are announced (the status line), not shown. */
.pe-note[hidden], .pe-editor.is-app .pe-note[hidden] { display: none !important; }
.pe-note.is-warn { color: #f0c58a; }
.pe-restart {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; padding: .1rem 0; font: inherit; font-size: .92rem;
  color: var(--g-ink-2); cursor: pointer;
}
.pe-restart svg { width: 18px; height: 18px; transition: transform var(--dur-3) var(--ease-out); }
.pe-restart:hover { color: var(--g-ink); }
.pe-restart:hover svg { transform: rotate(-180deg); }
.pe-restart:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 3px; border-radius: 6px; }

/* ---- Confirmation: a glass card over a blurred page, as the extractor's
   viewer. It springs up while its arrow winds round, and sinks away. */
.pe-confirm {
  width: min(30rem, calc(100vw - 2rem)); padding: 0; margin: auto;
  border: 0; background: none; color: var(--g-ink); overflow: visible;
}
.pe-confirm::backdrop { background: rgb(8 6 16 / .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pe-confirm[open] { animation: pe-confirm-in 520ms cubic-bezier(.34, 1.4, .64, 1); }
.pe-confirm[open]::backdrop { animation: pe-fade 320ms ease-out; }
.pe-confirm.is-closing { animation: pe-confirm-out 200ms ease-in forwards; }
.pe-confirm.is-closing::backdrop { animation: pe-fade 200ms ease-in reverse forwards; }
@keyframes pe-confirm-in { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pe-confirm-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes pe-fade { from { opacity: 0; } to { opacity: 1; } }
.pe-confirm__card {
  position: relative; display: grid; justify-items: center; gap: .55rem; text-align: center;
  padding: 1.9rem 1.6rem 1.4rem; border-radius: 26px;
  background: linear-gradient(180deg, rgb(40 36 58 / .94), rgb(22 20 32 / .96));
  border: 1px solid rgb(255 255 255 / .14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 40px 90px -30px rgb(0 0 0 / .9), 0 0 70px -24px rgb(130 105 255 / .55);
}
.pe-confirm__card::before {
  content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgb(228 222 255 / .9), transparent);
  box-shadow: 0 0 14px 2px rgb(170 150 255 / .5);
}
.pe-confirm__icon {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: .35rem; border-radius: 18px; color: #ffd1c8;
  background: radial-gradient(circle at 50% 30%, rgb(239 138 125 / .32), rgb(239 138 125 / .08));
  box-shadow: inset 0 0 0 1px rgb(239 138 125 / .4), 0 0 26px -6px rgb(239 138 125 / .6);
}
.pe-confirm__icon svg { width: 30px; height: 30px; }
.pe-confirm[open] .pe-confirm__icon { animation: pe-confirm-icon 700ms 80ms cubic-bezier(.34, 1.56, .64, 1) both; }
.pe-confirm[open] .pe-confirm__icon svg { animation: pe-confirm-wind 900ms 120ms cubic-bezier(.34, 1.3, .64, 1) both; }
@keyframes pe-confirm-icon { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pe-confirm-wind { from { transform: rotate(160deg); } to { transform: none; } }
.pe-confirm__title { margin: 0; font-family: var(--font-sans); font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; color: var(--g-ink); }
.pe-confirm__body { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--g-ink-2); max-width: 23rem; }
.pe-confirm__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; width: 100%; }
.pe-confirm__actions .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.pe-confirm[open] .pe-confirm__actions .btn { animation: pe-confirm-btn 460ms cubic-bezier(.22, .61, .36, 1) both; }
.pe-confirm[open] .pe-confirm__actions .btn:nth-child(2) { animation-delay: 70ms; }
@keyframes pe-confirm-btn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pe-btn-danger {
  color: #fff; border: 0;
  background: linear-gradient(180deg, #f0857a 0%, #d2574b 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 0 0 1px rgb(255 160 150 / .35), 0 10px 24px -10px rgb(230 90 80 / .8);
}
/* Its own hover: the site's .btn:hover would turn it grey. */
.pe-btn-danger:hover {
  background: linear-gradient(180deg, #f4968c 0%, #dc6155 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .36), 0 0 0 1px rgb(255 170 160 / .5), 0 14px 30px -10px rgb(240 100 90 / .95);
}
.pe-btn-danger:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 3px; }
.pe-btn-primary {
  color: #fff; border: 0;
  background: linear-gradient(180deg, #a08fff 0%, #7462e8 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 0 0 1px rgb(179 166 255 / .4), 0 10px 24px -10px rgb(120 100 255 / .8);
}
.pe-btn-primary:hover { background: linear-gradient(180deg, #ad9eff 0%, #7f6df0 100%); }
.pe-btn-primary:disabled { opacity: .45; cursor: default; }
.pe-btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* What to take from a dropped PDF: whole pages, or elements off a page. */
.pe-import { margin: auto; padding: 0; border: 0; background: none; color: var(--g-ink-2); max-width: min(44rem, calc(100vw - 2rem)); width: 100%; overflow: visible; }
.pe-import::backdrop { background: rgb(8 6 16 / .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pe-import[open] { animation: pe-confirm-in 460ms cubic-bezier(.34, 1.3, .64, 1); }
.pe-import.is-closing { animation: pe-confirm-out 200ms ease-in forwards; }
.pe-import__card {
  display: grid; gap: .9rem; padding: 1.3rem 1.4rem 1.2rem; border-radius: 26px;
  background: linear-gradient(180deg, rgb(44 40 62 / .96), rgb(24 22 34 / .97));
  border: 1px solid var(--g-rim-soft);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 40px 80px -30px rgb(0 0 0 / .95), 0 0 60px -24px rgb(130 105 255 / .55);
}
.pe-import__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pe-import__title { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--g-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; }
.pe-import__tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgb(0 0 0 / .35); box-shadow: inset 0 1px 2px rgb(0 0 0 / .55); }
.pe-import__tabs button { height: 28px; padding: 0 .8rem; border: 0; border-radius: 8px; background: none; color: var(--g-ink-3); font: inherit; font-size: .8rem; cursor: pointer; }
.pe-import__tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, rgb(150 132 255 / .55), rgb(110 92 230 / .45)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); }
.pe-import__tabs button:focus-visible { outline: 1px solid var(--g-lilac); outline-offset: 1px; }
.pe-import__hint { margin: 0; font-size: .85rem; color: var(--g-ink-3); }
/* Both views share one fixed, scrolling area, so the dialog keeps its size. */
.pe-import__body { height: min(25rem, 54vh); overflow: auto; margin: 0 -.3rem; padding: .3rem; scrollbar-width: thin; scrollbar-color: rgb(179 166 255 / .3) transparent; }
.pe-import__pages, .pe-import__elements { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .8rem; }
.pe-import__pages[hidden], .pe-import__elements[hidden] { display: none; }
.pe-import__tile {
  display: grid; gap: .4rem; justify-items: center; align-content: start; padding: .55rem; border-radius: 14px; cursor: pointer; min-width: 0;
  background: rgb(255 255 255 / .03); border: 1px solid var(--g-rim-soft); color: var(--g-ink-3); font: inherit; font-size: .78rem;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}
.pe-import__tile canvas { display: block; max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 6px 14px -8px rgb(0 0 0 / .9); }
.pe-import__tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-import__tile:hover { transform: translateY(-1px); background: rgb(255 255 255 / .06); }
.pe-import__tile[aria-pressed="true"] { color: #fff; border-color: var(--g-lilac); background: rgb(140 124 255 / .14); box-shadow: 0 0 0 1px var(--g-lilac), 0 0 20px -8px rgb(150 130 255 / .8); }
.pe-import__tile:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }
/* An element's tile: the element alone, on a checkerboard where it's clear. */
.pe-import__tile--el canvas { width: 100%; height: 5.6rem; object-fit: contain; background: repeating-conic-gradient(#e9e7ef 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.pe-import__tile--el.is-light canvas { background: repeating-conic-gradient(#2c2a36 0 25%, #36333f 0 50%) 0 0 / 12px 12px; }
.pe-import__group { grid-column: 1 / -1; margin: .4rem 0 -.2rem; font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: var(--g-ink-3); }
.pe-import__group:first-child { margin-top: 0; }
.pe-import__all { margin-left: auto; padding: .3rem .7rem; border-radius: 8px; border: 1px solid var(--g-rim-soft); background: rgb(255 255 255 / .04); color: var(--g-ink-2); font: inherit; font-size: .78rem; cursor: pointer; }
.pe-import__all[hidden] { display: none; }
.pe-import__all:hover { color: #fff; background: rgb(255 255 255 / .09); }
.pe-import__actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
.pe-import__open { margin-right: auto; padding: .35rem .2rem; border: 0; background: none; color: var(--g-ink-3); font: inherit; font-size: .82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pe-import__open:hover { color: var(--g-ink); }

/* Signing: the pad (paper, with a line to sign on), typed styles, inks. */
.pe-sign { max-width: min(36rem, calc(100vw - 2rem)); }
.pe-sign__body { display: grid; }
.pe-sign__body [hidden] { display: none; }
.pe-sign__draw { display: grid; gap: .6rem; }
.pe-sign__pad { position: relative; width: 100%; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, #fdfcff, #f1eff8); box-shadow: inset 0 1px 3px rgb(0 0 0 / .25), 0 0 0 1px rgb(255 255 255 / .1); }
.pe-sign__pad canvas { display: block; max-width: 100%; height: auto !important; aspect-ratio: 520 / 170; touch-action: none; cursor: crosshair; }
.pe-sign__line { position: absolute; left: 7%; right: 7%; bottom: 26%; border-bottom: 1.5px dashed rgb(110 100 160 / .45); pointer-events: none; }
.pe-sign__line i { position: absolute; left: -.2rem; bottom: .1rem; font-style: normal; font-size: .8rem; color: rgb(110 100 160 / .6); }
.pe-sign__type { display: grid; gap: .8rem; }
.pe-sign__name { height: 42px; padding: 0 .9rem; border-radius: 12px; border: 1px solid var(--g-rim-soft); background: rgb(0 0 0 / .3); color: var(--g-ink); font: inherit; font-size: .95rem; }
.pe-sign__name:focus-visible { outline: none; border-color: var(--g-lilac); }
.pe-sign__styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; }
.pe-sign__style { display: flex; align-items: center; justify-content: center; height: 4.6rem; padding: 0 1rem; border-radius: 14px; border: 1px solid transparent; background: linear-gradient(180deg, #fdfcff, #f1eff8); color: #171c3d; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
.pe-sign__style span { font-size: 2rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-sign__style:hover { transform: translateY(-1px); }
.pe-sign__style[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--g-lilac), 0 0 22px -6px rgb(150 130 255 / .9); }
.pe-sign__style:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 2px; }
.pe-sign__inks { display: flex; gap: .4rem; margin-right: .3rem; }
.pe-sign__inks button { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid rgb(255 255 255 / .2); background: var(--ink); cursor: pointer; transition: transform 160ms ease; }
.pe-sign__inks button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--g-lilac); transform: scale(1.08); }
.pe-sign .pe-import__actions .pe-import__open { margin-right: auto; }
.pe-btn-primary:disabled { opacity: .45; pointer-events: none; }

/* The signature in the side panel, and what to do with it. */
.pe-body > .pe-props .pe-field--sign { flex-direction: column; align-items: stretch; gap: .6rem; }
.pe-sign__preview { width: 100%; height: auto; aspect-ratio: 200 / 64; border-radius: 12px; background: linear-gradient(180deg, #fdfcff, #f1eff8); }
.pe-sign__acts { display: flex; gap: .4rem; flex-wrap: wrap; }
.pe-sign__act { display: inline-flex; align-items: center; gap: .35rem; height: 30px; padding: 0 .7rem; border-radius: 9px; border: 1px solid var(--g-rim-soft); background: rgb(255 255 255 / .04); color: var(--g-ink-2); font: inherit; font-size: .78rem; cursor: pointer; }
.pe-sign__act svg { width: 14px; height: 14px; }
.pe-sign__act:hover { color: #fff; background: rgb(255 255 255 / .09); }

/* The scan: a lilac beam sweeping down the page, and pins popping up
   where it finds somewhere to sign. */
.pe-scanbeam {
  position: absolute; left: -2%; right: -2%; top: 0; height: 90px; z-index: 6; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(160 140 255 / .14) 70%, rgb(190 175 255 / .55) 97%, transparent);
  border-bottom: 1.5px solid rgb(205 192 255 / .95); box-shadow: 0 10px 26px -6px rgb(150 125 255 / .8);
  animation: pe-scan 1200ms cubic-bezier(.45, .05, .4, 1) forwards;
}
@keyframes pe-scan { 0% { transform: translateY(-90px); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; transform: translateY(-90px); opacity: 0; } }
.pe-signspot {
  position: absolute; z-index: 7; display: inline-flex; align-items: center; gap: .3rem; height: 28px; padding: 0 .65rem 0 .5rem; margin: -34px 0 0 -6px;
  border-radius: 10px 10px 10px 3px; border: 1px solid rgb(255 255 255 / .35);
  background: linear-gradient(180deg, rgb(160 140 255), rgb(118 96 236)); color: #fff; font: 600 .75rem/1 var(--font-sans, system-ui), sans-serif; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 8px 20px -6px rgb(80 50 200 / .8); cursor: pointer;
  transform-origin: 0 100%; animation: pe-pin-in 520ms cubic-bezier(.34, 1.56, .64, 1) backwards, pe-pin-bob 2.4s 1.6s ease-in-out infinite;
}
.pe-signspot svg { width: 15px; height: 15px; }
.pe-signspot--date { background: linear-gradient(180deg, rgb(98 206 170), rgb(48 160 128)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 8px 20px -6px rgb(20 120 90 / .8); }
.pe-signspot:hover { filter: brightness(1.1); }
.pe-signspot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pe-signspot.is-used { animation: pe-pin-out 360ms ease-in forwards; }
@keyframes pe-pin-in { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pe-pin-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes pe-pin-out { to { transform: scale(.4) translateY(10px); opacity: 0; } }
.pe-sign-ghost { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; opacity: .5; }
.pe-sign-ghost[hidden] { display: none; }
.pe-page[data-tool="sign"] { cursor: copy; }

.pe-btn-glass {
  color: var(--g-ink);
  background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03));
  border: 1px solid var(--g-rim);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1);
}
.pe-btn-glass:hover { background: linear-gradient(180deg, rgb(255 255 255 / .13), rgb(255 255 255 / .05)); border-color: rgb(255 255 255 / .22); }
.pe-btn-glass:focus-visible { outline: 2px solid var(--g-lilac); outline-offset: 3px; }

@keyframes pe-scan { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes pe-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes pe-spin { to { transform: rotate(360deg); } }
@keyframes pe-ripple { to { transform: scale(1); opacity: 0; } }
@keyframes pe-draw { to { stroke-dashoffset: 0; } }
@keyframes pe-done-in {
  0% { opacity: 0; transform: scale(.7); }
  12% { opacity: 1; transform: scale(1); }
  48% { transform: scale(1); }
  58% { transform: scale(1.12); }
  68% { transform: scale(1); }
  88% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.9); }
}


@media (prefers-reduced-motion: reduce) {
  .pe-aura i, .pe-fl, .pe-corner { animation: none; }
  .pe-drop.is-over .pe-corner, .pe-drop:hover .pe-doc, .pe-drop.is-over .pe-doc { transform: none; }
  .pe-head.is-busy::before { animation: none; background-size: 100% 100%; }
  .pe-dl.is-saved .pe-dl__done { animation: none; opacity: 1; }
  .pe-dl.is-saved .pe-dl__done circle, .pe-dl.is-saved .pe-dl__done path { animation: none; stroke-dashoffset: 0; }
  .pe-page.is-loading::after, .pe-drop.is-opening::before { animation: none; }
  .pe-page canvas, .pe-layer, .pe-layer__btn, .pe-layer__thumb, .pe-layer__dot, .pe-tip, .pe-picker__stop, .pe-swatch, .pe-body, .pe-layers, .pe-layers__block { transition: none; }
  .pe-layer.is-landed, .pe-sel-box.is-flash { animation: none; }
  /* Switches and tabs still move, briefly and without the bounce. */
  .pe-picker__tabs-bead, .pe-switch i { transition-duration: 180ms; transition-timing-function: var(--ease); }
  .pe-confirm[open], .pe-confirm[open]::backdrop, .pe-confirm.is-closing, .pe-confirm.is-closing::backdrop,
  .pe-confirm[open] .pe-confirm__icon, .pe-confirm[open] .pe-confirm__icon svg, .pe-confirm[open] .pe-confirm__actions .btn { animation: none; }
  .pe-tools__bead { transition: none; }
  .pe-iconbtn.is-pressed, .pe-tool.is-pressed, .pe-iconbtn.is-pressed svg, .pe-tool.is-pressed .pe-sheet,
  .pe-iconbtn.is-pressed::before, .pe-tool.is-pressed::before { animation: none; }
  .pe-scanbeam { display: none; }
  .pe-signspot, .pe-signspot.is-used { animation: none; }
  .pe-tools__bead.is-hop i, .pe-tool.is-picked svg, .pe-tool.is-picked .pe-draw, .pe-tool.is-picked .pe-drop-in, .pe-tool.is-picked .pe-sweep { animation: none; }
}
@media (max-width: 1100px) {
  /* The narrower side panel: Fill and Stroke above their controls. */
  .pe-body > .pe-props .pe-field:is([data-f="fill"], [data-f="stroke"]):not(.is-empty):not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .pe-body > .pe-props .pe-field:is([data-f="fill"], [data-f="stroke"]):not(.is-empty) > span:first-child { grid-column: 1 / -1; }
  .pe-body > .pe-props .pe-field:is([data-f="fill"], [data-f="stroke"]):not(.is-empty) > .pe-hex { width: 100%; min-width: 0; }
  .pe-body { grid-template-columns: 0rem minmax(0, 1fr) 13.5rem; }
  .pe-body.has-layers { grid-template-columns: 15.4rem minmax(0, 1fr) 13.5rem; }
  .pe-layers { width: 14.7rem; }
}
/* Narrow: properties become a strip above the pages, and the pages and
   layers list a panel below them. */
@media (max-width: 900px) {
  .pe-body, .pe-body.has-layers { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) 0rem; }
  .pe-body.has-layers { grid-template-rows: auto minmax(0, 1fr) 13.7rem; }
  .pe-body > .pe-props { grid-column: 1; grid-row: 1; }
  .pe-body > .pe-scroll { grid-column: 1; grid-row: 2; }
  .pe-body > .pe-layers-slot { grid-column: 1; grid-row: 3; }
  .pe-body > .pe-props { margin: 0 0 .6rem; padding: .5rem .8rem; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .45rem 1rem; }
  .pe-body > .pe-props .pe-props__hint { margin: 0; }
  .pe-body > .pe-props .pe-field { width: auto; }
  .pe-body > .pe-props [data-f="font"] .pe-select { flex: 0 1 auto; }
  .pe-body > .pe-props [data-f="font"] .pe-num { width: 4.4rem; flex: none; }
  .pe-body > .pe-props :is([data-f="opacity"], [data-f="width"], [data-f="headsize"], [data-f="bsize"], [data-f="bthin"], [data-f="bsmooth"], [data-f="bsoft"], [data-f="hlstrength"], [data-f="esize"], [data-f="estrength"], [data-f="sweight"], [data-f="corner"]) input[type="range"] { flex: none; width: 6.5rem; }
  .pe-body > .pe-props .pe-props__end { margin: 0 0 0 auto; padding: 0; border: 0; }
  .pe-layers { width: auto; height: 13rem; margin: .7rem 0 0; }
  .pe-body:not(.has-layers) .pe-layers { transform: translateY(20px); }
}
@media (max-width: 640px) {
  .pe-editor.is-app .pe-foot { bottom: 7.6rem; }
}
@media (max-width: 560px) {
  .pe-glass { border-radius: 30px; padding: 7px; }
  .pe-drop { border-radius: 24px; min-height: 17rem; padding: 2.25rem 1rem 1.75rem; }
  .pe-drop.is-collapsed { padding: .9rem 1.1rem; }
  .pe-drop__compact { flex-wrap: nowrap; justify-content: flex-start; }
  .pe-drop__compact-title, .pe-drop__compact-sub { display: block; }
  .pe-drop__compact-sub { font-size: .88rem; margin-top: .1rem; }
  .pe-drop__dash { display: none; }
  .pe-drop__cap { display: inline; }
  .pe-corner { width: 24px; height: 24px; }
  .pe-corner--tl, .pe-corner--tr { top: 18px; }
  .pe-corner--bl, .pe-corner--br { bottom: 18px; }
  .pe-corner--tl, .pe-corner--bl { left: 18px; }
  .pe-corner--tr, .pe-corner--br { right: 18px; }
  .pe-head .pe-dl { flex: 1 1 100%; }
  .pe-toolbar { top: .3rem; padding: .45rem; gap: .4rem; }
  .pe-tool, .pe-iconbtn { width: 34px; height: 34px; }
  .pe-tool[data-tip]::after, .pe-iconbtn[data-tip]::after { display: none; }
  .pe-pages { padding: .8rem; gap: .9rem; }
  .pe-body { height: 72dvh; }
}
.pe-menu__group { padding: .5rem .7rem .2rem; border-top: 1px solid rgb(255 255 255 / .08); margin-top: .2rem; color: var(--g-ink-3); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }