/* Ground, ink and line, per the site's design tokens.
   Two families on purpose. Content tokens (--ink, --muted, --faint) follow
   the ground and flip to dark ink on Burnt, the way section copy does on
   every other page. Chrome tokens (--chrome-*) belong to the header and
   footer, which the site keeps on one off-white ink across BOTH dark
   grounds. Wiring the header to --ink is what made it go dark on Burnt. */
:root {
  --paper: #F3F1EA;
  --ink: #171613;
  --muted: #67655D;
  --faint: #A6A399;
  --rule: rgba(23, 22, 19, .13);
  --rule-strong: rgba(23, 22, 19, .34);
  /* hover, selection and the focus ring, matching what the site ships:
     Burnt measures 4.57:1 on this ground, over the 3:1 floor for non-text
     contrast. */
  --accent: #C0431F;
  --focus: #C0431F;
  --chrome-ink: #171613;
  --chrome-ink-quiet: #A6A399;
  --chrome-rule: rgba(23, 22, 19, .13);
  --chrome-backdrop: none;
  --mark-filter: none;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Urbanist', sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

html.xh,
html.xh * { cursor: none !important; }
.site-xhair {
  position: fixed;
  z-index: 99998;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 1;
  pointer-events: none;
  will-change: transform;
}
.site-xhair i { position: absolute; display: block; background: var(--ink); opacity: .72; }
.site-xhair i:nth-child(1),
.site-xhair i:nth-child(2) { left: -.5px; width: 1px; height: 16px; }
.site-xhair i:nth-child(1) { top: -21px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
.site-xhair i:nth-child(2) { top: 5px; -webkit-mask-image: linear-gradient(to top, transparent, #000 45%); mask-image: linear-gradient(to top, transparent, #000 45%); }
.site-xhair i:nth-child(3),
.site-xhair i:nth-child(4) { top: -.5px; width: 16px; height: 1px; }
.site-xhair i:nth-child(3) { left: -21px; -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
.site-xhair i:nth-child(4) { left: 5px; -webkit-mask-image: linear-gradient(to left, transparent, #000 45%); mask-image: linear-gradient(to left, transparent, #000 45%); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sketch-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 34px;
  padding-bottom: 30px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: .5px solid transparent;
  /* none on the off-white ground, so no compositing layer is created there and
     the header matches the site's unblurred light header. Not blur(0px): that
     still forces a backdrop root. */
  -webkit-backdrop-filter: var(--chrome-backdrop);
  backdrop-filter: var(--chrome-backdrop);
  color: var(--chrome-ink);
}

.sketch-header.is-scrolled { border-bottom-color: var(--chrome-rule); }
.sketch-header img { display: block; width: auto; height: 38px; }
.sketch-page-name {
  margin: 0;
  padding-bottom: 2px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}
.sketch-header nav { display: flex; align-items: flex-end; gap: clamp(16px, 2.6vw, 30px); }
.sketch-header nav a {
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  transition: border-color .3s ease, color .3s ease;
}
.sketch-header nav a { color: var(--chrome-ink); }
.sketch-header nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.sketch-main {
  padding: clamp(124px, 15vh, 164px) var(--sudu-inset) var(--sudu-chrome);
}

.sketch-product-header {
  display: none;
  align-items: center;
  min-height: 54px;
  border-bottom: .5px solid var(--rule-strong);
}
.sketch-product-brand {
  display: flex;
  align-items: center;
}
.sketch-product-brand img {
  display: block;
  width: auto;
  height: 25px;
}
.sketch-product-divider {
  width: 1px;
  height: 19px;
  margin: 0 14px;
  background: var(--rule-strong);
}
.sketch-product-name {
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}
html.dm .sketch-product-brand img,
html.dm .sketch-header img,
html.dm .sketch-footer img { filter: invert(1); }

.sketch-intro { margin-bottom: clamp(28px, 4vw, 54px); }
.sketch-kicker {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sketch-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  align-items: end;
  gap: clamp(32px, 6vw, 100px);
}

.sketch-intro h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .88;
}

.sketch-intro p {
  margin: 0 0 4px;
  max-width: 39ch;
  color: var(--muted);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.55;
}

.sketch-workspace { border-top: .5px solid var(--rule-strong); }
.sketch-context-bar,
.trace-bar {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: .5px solid var(--rule);
}
.sketch-context-bar {
  display: grid;
  grid-template-columns: 76px minmax(0, auto) 1fr;
  gap: 0;
  background: var(--paper);
}
.floor-references { justify-self: end; }
.floor-tabs,
.floor-references,
.trace-bar,
.trace-layers,
.trace-layer {
  display: flex;
  align-items: center;
}
.floor-tabs,
.floor-references,
.trace-layers {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.floor-tabs::-webkit-scrollbar,
.floor-references::-webkit-scrollbar,
.trace-layers::-webkit-scrollbar { display: none; }
.context-label {
  flex: 0 0 auto;
  margin-right: 12px;
  color: var(--faint);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sketch-context-bar button,
.trace-bar button {
  position: relative;
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 13px;
  cursor: pointer;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.floor-tabs button:first-of-type,
.floor-references button:first-of-type { padding-left: 0; }
.sketch-context-bar button:hover,
.trace-bar button:hover,
.floor-button.is-active,
.floor-references button.is-active,
.trace-layer.is-active .trace-select { color: var(--ink); }
.floor-button.is-active::after,
.floor-references button.is-active::after,
.trace-layer.is-active .trace-select::after {
  position: absolute;
  right: 13px;
  bottom: 8px;
  left: 13px;
  height: 1px;
  background: currentColor;
  content: '';
}
.floor-tabs button:first-of-type.is-active::after,
.floor-references button:first-of-type.is-active::after { left: 0; }
.floor-button.has-content::before {
  position: absolute;
  top: 11px;
  right: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  content: '';
}
.floor-references button:disabled { opacity: .2; }
.trace-bar { gap: 0; }
.trace-bar > .context-label { margin-right: 2px; }
.trace-layers { flex: 1 1 auto; }
.trace-layer {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border-right: .5px solid var(--rule);
}
.trace-layer:first-child { border-left: .5px solid var(--rule); }
.trace-layer button { padding-right: 10px; padding-left: 10px; }
.trace-layer .trace-select { padding-right: 8px; }
.trace-layer .trace-select::after { right: 8px; left: 10px; }
.trace-layer .trace-visible,
.trace-layer .trace-remove,
.trace-layer .trace-lock,
.trace-layer .trace-order,
.trace-layer .trace-copy,
.trace-layer .trace-scale {
  min-width: 30px;
  padding: 0 7px;
  color: var(--faint);
  letter-spacing: .02em;
}
.trace-layer.is-hidden .trace-select { opacity: .34; text-decoration: line-through; }
.trace-layer.is-hidden .trace-visible { color: var(--ink); }
.trace-layer.is-locked .trace-select::before {
  margin-right: 5px;
  content: '·';
}
.trace-opacity {
  width: 58px;
  height: 1px;
  margin: 0 8px;
  padding: 12px 0;
  accent-color: var(--ink);
  cursor: ew-resize;
}
.trace-import,
.trace-add {
  padding-right: 0 !important;
  color: var(--ink) !important;
}
.trace-import { margin-left: auto; padding-right: 12px !important; }
.sketch-toolbar,
.sketch-workspace-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 54px;
  border-bottom: .5px solid var(--rule);
}

.sketch-tools,
.sketch-actions,
.sketch-workspace-footer > div {
  display: flex;
  align-items: center;
  gap: 0;
}
.sketch-tools {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sketch-tools::-webkit-scrollbar { display: none; }
.sketch-actions { flex: 0 0 auto; }

.sketch-toolbar button,
.sketch-workspace-footer button,
.send-heading button {
  position: relative;
  padding: 18px 14px;
  cursor: pointer;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
}

.sketch-toolbar button:first-child,
.sketch-workspace-footer > div button:first-child { padding-left: 0; }
.sketch-toolbar button:last-child,
.sketch-workspace-footer > div button:last-child { padding-right: 0; }
.sketch-toolbar button + button::before,
.sketch-workspace-footer button + button::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 11px;
  background: currentColor;
  content: '';
  opacity: .25;
  transform: translateY(-50%);
}

.sketch-toolbar button:hover,
.sketch-workspace-footer button:hover,
.send-heading button:hover { color: var(--ink); }
.sketch-toolbar button.is-active { color: var(--ink); }
.sketch-toolbar button.is-active::after {
  position: absolute;
  right: 14px;
  bottom: 11px;
  left: 14px;
  height: 1px;
  background: currentColor;
  content: '';
}
.sketch-toolbar button:first-child.is-active::after { left: 0; }
button:disabled { cursor: default !important; opacity: .28; }

.mobile-sketch-ui,
.mobile-context-control,
.mobile-sheet-close { display: none; }
.sketch-level-panel { display: contents; }
.sketch-actions [data-action='undo'] { display: none; }
.mobile-undo-top {
  position: relative;
  display: block;
  min-height: 48px !important;
  padding: 0 14px 0 0 !important;
  border-right: .5px solid var(--rule);
  color: var(--ink) !important;
  text-align: left;
}
.mobile-undo-top:not(:disabled)::after {
  position: absolute;
  right: 14px;
  bottom: 8px;
  left: 0;
  height: 1px;
  background: var(--accent);
  content: '';
}

.stencil-panel {
  display: flex;
  align-items: stretch;
  min-height: 76px;
  overflow: hidden;
  border-bottom: .5px solid var(--rule);
}
.stencil-panel[hidden] { display: none; }
.stencil-panel > .context-label {
  display: flex;
  align-items: center;
  margin-right: 16px;
}
.stencil-categories,
.stencil-choices,
.stencil-options {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.stencil-categories {
  flex: 0 0 auto;
  border-right: .5px solid var(--rule);
}
.stencil-choices {
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.stencil-choices::-webkit-scrollbar { display: none; }
.stencil-options {
  flex: 0 0 auto;
  margin-left: auto;
  border-left: .5px solid var(--rule);
}
.stencil-panel button {
  position: relative;
  flex: 0 0 auto;
  min-width: 62px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.15;
  text-transform: uppercase;
}
.stencil-panel button + button { border-left: .5px solid var(--rule); }
.stencil-panel button:hover,
.stencil-panel button.is-active { color: var(--ink); }
.stencil-panel button.is-active::after {
  position: absolute;
  right: 11px;
  bottom: 7px;
  left: 11px;
  height: 1px;
  background: currentColor;
  content: '';
}
.stencil-choice {
  display: grid;
  grid-template-rows: 46px auto auto;
  place-items: center;
  min-width: 100px !important;
  padding: 3px 8px 10px !important;
  gap: 2px;
  font-size: 10px !important;
  letter-spacing: .04em !important;
}
.stencil-choice canvas {
  display: block;
  width: 80px;
  height: 46px;
}
.stencil-size { font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.stencil-options button { min-width: 76px; }

.draw-stage {
  position: relative;
  width: 100%;
  height: clamp(500px, 66svh, 880px);
  min-height: 500px;
  overflow: hidden;
  background: var(--paper);
  border-bottom: .5px solid var(--rule);
  cursor: none;
  isolation: isolate;
}

@media (min-width: 761px) {
  .sketch-main {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }
  .sketch-intro { flex: 0 0 auto; }
  .sketch-workspace {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }
  .sketch-workspace > * { flex-shrink: 0; }
  .draw-stage {
    flex: 1 0 240px;
    height: auto;
    min-height: 240px;
  }
}

#sketchCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: none;
}

.draw-cursor {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.draw-cursor.is-visible { display: block; opacity: 1; }
.draw-cursor::before,
.draw-cursor::after {
  content: '';
  position: absolute;
  background: linear-gradient(to right, var(--ink) 0 13px, transparent 13px 19px, var(--ink) 19px);
  width: 32px;
  height: 1px;
  left: 0;
  top: 50%;
}
.draw-cursor::after { transform: rotate(90deg); }
.draw-stage[data-tool='erase'] .draw-cursor {
  width: 28px;
  height: 28px;
  border: .75px solid var(--ink);
  border-radius: 50%;
}
.draw-stage[data-tool='pan'] .draw-cursor {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: .75px dashed var(--ink);
}
.draw-stage[data-tool='erase'] .draw-cursor::before,
.draw-stage[data-tool='erase'] .draw-cursor::after,
.draw-stage[data-tool='pan'] .draw-cursor::before,
.draw-stage[data-tool='pan'] .draw-cursor::after { display: none; }
.draw-stage[data-tool='pan'].is-panning .draw-cursor { transform: translate(-50%, -50%) scale(.76); }
.draw-measurements {
  position: absolute;
  z-index: 5;
  max-width: calc(100% - 16px);
  padding: 6px 9px;
  border: .5px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: pre;
  pointer-events: none;
}
.draw-measurements[hidden] { display: none; }
.draw-scale {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--faint);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}

.sketch-view {
  position: absolute;
  z-index: 7;
  right: 12px;
  bottom: 8px;
  display: flex;
  align-items: center;
  border: .5px solid var(--rule-strong);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
}
.sketch-view button,
.sketch-view output {
  display: grid;
  min-width: 34px;
  height: 30px;
  padding: 0 9px;
  place-items: center;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}
.sketch-view button { cursor: pointer; }
.sketch-view button + output,
.sketch-view output + button,
.sketch-view button + button { border-left: .5px solid var(--rule); }
.sketch-view button:hover { color: var(--ink); }

.scale-mark {
  position: relative;
  display: block;
  width: var(--grid-major-screen, 56px);
  height: 9px;
  border-top: .75px solid currentColor;
}
.scale-mark::before,
.scale-mark::after,
.scale-mark i {
  position: absolute;
  top: -2.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  content: '';
}
.scale-mark::before { left: 0; transform: translateX(-50%); }
.scale-mark::after { right: 0; transform: translateX(50%); }
.scale-mark i { top: -1.5px; width: 2px; height: 2px; left: 50%; transform: translateX(-50%); }
.scale-mark i:first-child { left: 25%; }
.scale-mark i:last-child { left: 75%; }

.note-composer {
  position: absolute;
  z-index: 5;
  min-width: 180px;
  transform: translateY(-50%);
}
.note-composer[hidden] { display: none; }
.note-composer input {
  width: min(260px, 48vw);
  padding: 8px 6px;
  border: .5px solid var(--ink);
  border-radius: 0;
  outline: none;
  background: var(--paper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sketch-ruler {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: clamp(240px, 32vw, 380px);
  height: 44px;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  touch-action: none;
  user-select: none;
}
.sketch-ruler[hidden] { display: none; }
.ruler-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: .75px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 13px, var(--ink) 13px 14px, transparent 14px 28px) 0 0 / 100% 8px no-repeat,
    color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(6px);
  cursor: grab;
}
.ruler-face::after {
  position: absolute;
  right: 14px;
  bottom: 8px;
  left: 14px;
  height: .5px;
  background: var(--rule-strong);
  content: '';
}
.ruler-face:active { cursor: grabbing; }
.ruler-angle {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 8px;
  padding-right: 6px;
  background: var(--paper);
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
}
.ruler-rotate {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: -11px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: .75px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transform: translateY(-50%);
  touch-action: none;
}
.ruler-rotate::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  content: '';
  transform: translate(-50%, -50%);
}

.sketch-workspace-footer p {
  margin: 0;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.4;
}

.sketch-workspace-footer [data-action='screenshot'],
.sketch-workspace-footer [data-action='pdf'],
.sketch-workspace-footer [data-action='send'] { color: var(--ink); }

.send-panel {
  padding-top: clamp(56px, 8vw, 112px);
  scroll-margin-top: 110px;
}
.send-panel[hidden] { display: none; }
.send-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(30px, 4vw, 48px);
  border-bottom: .5px solid var(--rule-strong);
}
.send-heading .sketch-kicker { margin-bottom: 14px; }
.send-heading h2 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(26px, 3.4vw, 48px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.02;
}

#sketchForm {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: clamp(30px, 4vw, 48px);
  max-width: 1080px;
}
.honeypot,
.form-file-definition {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.send-fields { display: grid; gap: 24px 40px; }
.send-fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#sketchForm label { display: flex; flex-direction: column; gap: 8px; }
#sketchForm label > span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#sketchForm input,
#sketchForm textarea {
  width: 100%;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: .5px solid var(--rule-strong);
  border-radius: 0;
  outline-offset: 5px;
  background: transparent;
  font-size: 15px;
}
#sketchForm textarea { line-height: 1.65; resize: vertical; }
.send-submit {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 4px;
}
.send-submit button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 26px;
  border: 1px solid var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease;
}
.send-submit button:hover { background: var(--ink); color: var(--paper); }
.send-submit p { margin: 0; color: var(--faint); font-size: 10.5px; line-height: 1.5; }

.sketch-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  border-top: .5px solid var(--chrome-rule);
  color: var(--chrome-ink-quiet);
  font-size: 10.5px;
}
.sketch-footer > div { display: flex; align-items: center; gap: 12px; }
.sketch-footer img { display: block; width: auto; height: 19px; opacity: .85; }
.footer-rule { width: 1px; height: 14px; background: var(--chrome-rule); }

/* The sketch uses semantic drawing colours. Geometry, grid and controls stay
   authored on each ground, so the canvas can export what the visitor saw.
   Both dark grounds carry one off-white ink; only the paper differs. */
html.dm {
  --ink: #F5F3EC;
  --muted: #F5F3EC;
  --faint: rgba(245, 243, 236, .72);
  --rule: rgba(245, 243, 236, .28);
  --rule-strong: rgba(245, 243, 236, .48);
  --accent: #F5F3EC;
  --focus: #F5F3EC;
  --chrome-ink: #F5F3EC;
  --chrome-ink-quiet: #F5F3EC;
  --chrome-rule: rgba(245, 243, 236, .45);
  --chrome-backdrop: blur(10px);
}

html.dm.dmwarm       { --paper: #C0431F; }   /* Burnt */
html.dm:not(.dmwarm) { --paper: #121110; }   /* Charcoal */

/* Charcoal has 16.99:1 of headroom and can afford a real ramp.
   Burnt has 4.65:1 at full strength and none to spare, so muted stays
   solid there and hierarchy comes from the existing ::after underline
   on active buttons, not from colour. */
html.dm:not(.dmwarm) {
  --muted: rgba(245, 243, 236, .72);
  --faint: rgba(245, 243, 236, .54);
  --rule:  rgba(245, 243, 236, .18);
  --rule-strong: rgba(245, 243, 236, .38);
}
html.dm body { background: var(--paper) !important; color: var(--ink) !important; }
/* --dm-bg is written inline on <html> by js/chrome-bar.js, so taking the
   header ground from it guarantees the header and the bottom chrome bar sit
   on exactly the same hue. --paper is the fallback if the bar never loaded. */
html.dm .sketch-header {
  background: color-mix(in srgb, var(--dm-bg, var(--paper)) 90%, transparent);
}
@media (max-width: 760px) {
  :root {
    --sketch-top: calc(60px + env(safe-area-inset-top, 0px));
    --sketch-menu-top: calc(var(--sketch-top) + 44px);
  }
  body { padding-bottom: 0; }
  .sketch-header, .sketch-intro, .sketch-footer { display: none; }
  .sketch-main { padding: var(--sketch-top) var(--sudu-inset) var(--sudu-chrome); }
  .sketch-product-header {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    height: var(--sketch-top);
    min-height: 0;
    padding: env(safe-area-inset-top, 0px) var(--sudu-inset) 0;
    background: var(--paper);
  }
  .sketch-product-brand img { height: 28px; }
  .sketch-product-name { font-weight: 600; }
  /* Keep the real persistent controls. Only the music position changes on
     Sketch mobile, leaving the centre of the bottom rail for the Tools pill.
     No backdrop filter here: it would trap the fixed music control in the bar. */
  html #suduBar {
    border-top: .5px solid var(--rule-strong);
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html #suduBar #musicPill {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 23px);
    right: var(--sudu-inset);
    bottom: auto;
    left: auto;
    transform: none;
  }
  html #suduBar #langSwitch { gap: 10px; }
  html #suduBar #langSwitch button:not([hidden])~button:not([hidden])::before { left: -5px; }
  .sketch-workspace { border-top: 0; }
  .sketch-context-bar {
    position: sticky;
    z-index: 20;
    top: var(--sketch-top);
    display: grid;
    grid-template-columns: 44px 1fr 1fr 1.3fr 44px;
    min-height: 44px;
    padding: 0;
    background: var(--paper);
    border-bottom-color: var(--rule-strong);
  }
  .mobile-undo-top {
    min-height: 44px !important;
    padding: 0 !important;
  }
  .sketch-context-bar .mobile-context-control {
    display: block;
    min-width: 0;
    min-height: 44px;
    padding: 0 3px;
    border-left: .5px solid var(--rule);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .025em;
    text-transform: uppercase;
  }
  .mobile-context-control[aria-expanded='true'] { box-shadow: inset 0 -1px var(--accent); }
  .mobile-context-control small { display: block; font-size: 9px; line-height: 12px; color: var(--muted); }
  .sketch-level-panel {
    display: none;
    position: fixed;
    top: var(--sketch-menu-top);
    left: var(--sudu-inset);
    right: var(--sudu-inset);
    background: var(--paper);
    border-bottom: .5px solid var(--rule-strong);
  }
  .sketch-level-panel.is-mobile-open { display: block; }
  .floor-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    min-height: 44px;
    overflow: visible;
  }
  .floor-tabs .context-label { display: none; }
  .floor-references { display: flex; min-height: 36px; border-top: .5px solid var(--rule); }
  .floor-references button { min-height: 36px; }
  .sketch-context-bar .floor-button {
    min-height: 44px;
    padding: 0 8px;
    text-align: center;
  }
  .sketch-context-bar .floor-button + .floor-button { border-left: .5px solid var(--rule); }
  .sketch-context-bar .floor-button.is-active::after { right: 18px; bottom: 8px; left: 18px; }
  .sketch-context-bar .floor-button:first-of-type.is-active::after { left: 18px; }

  .sketch-toolbar,
  .sketch-workspace-footer { display: none; }

  .trace-bar {
    position: fixed;
    z-index: 10001;
    right: var(--sudu-inset);
    top: var(--sketch-menu-top);
    bottom: auto;
    left: var(--sudu-inset);
    display: none;
    align-items: stretch;
    min-height: 0;
    max-height: min(55svh, 400px);
    padding: 0;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: .5px solid var(--rule-strong);
    border-bottom: .5px solid var(--rule-strong);
    background: var(--paper);
  }
  .trace-bar.is-mobile-open { display: flex; }
  .trace-bar > .context-label { display: none; }
  .trace-layers { display: block; flex: 0 0 100%; overflow: visible; }
  .trace-layer { display: flex; flex-wrap: wrap; border-bottom: .5px solid var(--rule); }
  .trace-layer .trace-select { flex: 1 0 100%; text-align: left; }
  .trace-layer button { min-width: 32px; min-height: 36px; padding: 0 7px; }
  .trace-opacity { width: 48px; min-height: 36px; margin: 0 4px; }
  .trace-copy, .trace-order { display: block; }
  .trace-bar > button { min-height: 36px; flex: 1; }
  .trace-import { margin-left: 0; }
  .mobile-sheet-close {
    display: block;
    min-height: 36px;
    padding-right: 0 !important;
    padding-left: 14px !important;
    color: var(--ink) !important;
  }

  .mobile-sketch-ui { display: block; }
  .sketch-tools-pill {
    position: fixed;
    z-index: 10002;
    left: 50%;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 88px;
    height: 36px;
    padding: 0 15px;
    border: .5px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .sketch-tools-pill::after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(2px) rotate(-45deg);
  }
  .sketch-tools-pill[aria-expanded='true']::after { transform: translateY(-2px) rotate(135deg); }

  .mobile-tool-sheet {
    position: fixed;
    z-index: 10001;
    top: var(--sketch-menu-top);
    right: var(--sudu-inset);
    bottom: auto;
    left: var(--sudu-inset);
    border-bottom: .5px solid var(--rule-strong);
    background: var(--paper);
  }
  .mobile-tool-sheet[hidden] { display: none; }
  .mobile-tool-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: max(100px, min(44svh, calc(100svh - var(--sketch-menu-top) - 44px - var(--sudu-chrome))));
    overflow-y: auto;
  }
  .mobile-tool-panel[hidden] { display: none; }
  .mobile-tool-panel button {
    position: relative;
    min-height: 40px;
    padding: 5px;
    color: color-mix(in srgb, var(--ink) 72%, transparent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .mobile-tool-panel button:not(:nth-of-type(4n + 1)) { border-left: .5px solid var(--rule); }
  .mobile-tool-panel button:nth-of-type(n + 5) { border-top: .5px solid var(--rule); }
  .mobile-tool-panel button.is-active { color: var(--ink); }
  .mobile-tool-panel button.is-active::after {
    position: absolute;
    right: 15px;
    bottom: 7px;
    left: 15px;
    height: 1px;
    background: var(--accent);
    content: '';
  }

  .stencil-panel {
    position: fixed;
    z-index: 10003;
    right: 0;
    top: var(--sketch-menu-top);
    bottom: auto;
    left: 0;
    flex-wrap: wrap;
    min-height: 0;
    max-height: min(58svh, 430px);
    overflow-y: auto;
    border-top: .5px solid var(--rule-strong);
    background: var(--paper);
  }
  .stencil-panel > .context-label { display: none; }
  .stencil-categories { width: 100%; min-height: 40px; border-right: 0; border-bottom: .5px solid var(--rule); }
  .stencil-categories button { flex: 1 1 0; min-width: 0; }
  .stencil-choices { order: 2; width: 100%; border-top: .5px solid var(--rule); }
  .stencil-options { flex: 1 1 auto; border-left: .5px solid var(--rule); }
  .stencil-panel button { min-height: 36px; }
  .draw-stage { height: max(240px, calc(100svh - var(--sketch-menu-top) - var(--sudu-chrome))); min-height: 0; }
  .draw-scale { bottom: 18px; }
  .sketch-ruler { width: min(68vw, 320px); }
  .send-fields--two { grid-template-columns: 1fr; }
  .send-submit { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .sketch-header { padding-top: 24px; padding-bottom: 22px; }
  .sketch-header img { height: 32px; }
  .sketch-header nav { gap: 14px; }
  .sketch-header nav a { font-size: 12px; }
  .draw-stage { min-height: 0; }
  .sketch-footer { align-items: flex-start; flex-direction: column; }
}

@media (pointer: coarse) {
  html.xh, html.xh * { cursor: auto !important; }
  .site-xhair { display: none; }
  .draw-stage, #sketchCanvas { cursor: default; }
  .draw-cursor { display: none; }
  .sketch-toolbar button, .sketch-workspace-footer button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Owner-approved compact Sketch composition. Shared site chrome is retained. */
.sketch-compact-layout .shape-panel {
  position:absolute; z-index:40; top:auto; bottom:120px; left:50%;
  transform:translateX(-50%); width:min(520px,100%); max-height:min(50dvh,420px);
  overflow:auto; background:var(--paper); border:.5px solid var(--rule-strong); padding:10px;
}
.sketch-compact-layout .shape-panel[hidden] { display:none; }
.shape-choices,.shape-options { display:flex; flex-wrap:wrap; }
.shape-options { border-top:.5px solid var(--rule); }
.shape-panel button { position:relative; flex:1; min-height:44px; padding:7px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.shape-panel button[hidden] { display:none; }
.shape-panel button[aria-pressed='true'] { color:var(--ink); }
.shape-panel button[aria-pressed='true']::after { content:''; position:absolute; left:12px; right:12px; bottom:5px; height:1px; background:var(--ink); }
.shape-panel p { margin:10px 6px 4px; color:var(--muted); font-size:12px; line-height:1.4; }
.sketch-compact-layout .sketch-main { display:flex; flex-direction:column; min-height:100svh; height:100dvh; padding-top:110px; padding-bottom:var(--sudu-tool-footer); }
.sketch-compact-layout .sketch-intro { flex:none; margin-bottom:22px; }
.sketch-compact-layout .sketch-intro h1 { font-size:clamp(40px,4.8vw,68px); }
.sketch-compact-layout .sketch-kicker { margin-bottom:12px; }
.sketch-compact-layout .sketch-workspace { position:relative; display:flex; flex:1; flex-direction:column; min-height:320px; }
.sketch-compact-layout .sketch-context-bar { display:flex; position:relative; top:auto; flex:none; min-height:44px; gap:12px; }
.sketch-compact-layout .mobile-undo-top { display:inline-flex; align-items:center; justify-content:center; min-width:36px; padding:0; min-height:44px!important; border:0; font-size:27px; }
.sketch-compact-layout .mobile-undo-top::after { display:none; }
.sketch-compact-layout .mobile-context-control { display:none; }
.sketch-compact-layout [data-mobile-action='layers'].mobile-context-control { display:block; order:3; min-height:44px; font-size:11px; text-transform:uppercase; white-space:nowrap; }
.sketch-compact-layout #activeLayerName { display:inline; margin-left:7px; color:var(--muted); font-size:11px; }
.sketch-compact-layout .sketch-level-panel { display:contents; }
.sketch-compact-layout .floor-tabs { order:2; }
.sketch-compact-layout .floor-references { order:4; margin-left:auto; }
.sketch-compact-layout .sketch-toolbar { display:none; }
.sketch-compact-layout .draw-stage { flex:1; width:100%; min-height:240px; height:auto!important; margin:0; }
.sketch-compact-layout .trace-bar { display:none; position:absolute; z-index:40; top:44px; left:0; right:auto; bottom:auto; width:min(620px,100%); max-height:min(55dvh,440px); overflow:auto; padding:12px; background:var(--paper); border:.5px solid var(--rule-strong); }
.sketch-compact-layout .trace-bar.is-mobile-open { display:flex; flex-wrap:wrap; }
.sketch-compact-layout .trace-layers { display:block; flex:1 0 100%; overflow:visible; }
.sketch-compact-layout .trace-layer { flex-wrap:wrap; border-bottom:.5px solid var(--rule); }
.sketch-compact-layout .trace-layer button { min-height:38px; }
.sketch-compact-layout .mobile-sheet-close { display:block; margin-left:auto; }
.sketch-compact-layout .mobile-sketch-ui { display:block; }
.sketch-compact-layout .sketch-primary-pill { position:absolute; z-index:30; bottom:66px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:0; padding:3px 10px; border:.5px solid var(--rule-strong); border-radius:30px; background:var(--paper); white-space:nowrap; }
.sketch-compact-layout .sketch-primary-pill button { position:relative; min-height:40px; min-width:44px; padding:0 13px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.sketch-compact-layout .sketch-primary-pill button.is-active { color:var(--ink); }
.sketch-compact-layout .sketch-primary-pill button.is-active::after { content:''; position:absolute; bottom:6px; left:13px; right:13px; height:1px; background:var(--accent); }
.sketch-compact-layout .sketch-primary-pill .sketch-tools-pill { position:relative; inset:auto; transform:none; border:0; border-radius:0; background:none; width:auto; height:auto; box-shadow:none; }
.sketch-compact-layout .mobile-tool-sheet,.sketch-compact-layout .stencil-panel { position:absolute; z-index:40; top:auto; bottom:120px; left:50%; right:auto; transform:translateX(-50%); width:min(660px,100%); max-height:min(50dvh,420px); overflow:auto; background:var(--paper); border:.5px solid var(--rule-strong); padding:10px; }
.sketch-compact-layout .mobile-tool-panel { display:flex; flex-wrap:wrap; }
.sketch-compact-layout .mobile-tool-panel[hidden],.sketch-compact-layout .mobile-tool-sheet[hidden],.sketch-compact-layout .stencil-panel[hidden] { display:none; }
.sketch-compact-layout .mobile-tool-panel button { min-height:44px; flex:1 0 22%; padding:7px; border:0; font-size:11px; text-transform:uppercase; }
.sketch-compact-layout .stencil-panel { flex-wrap:wrap; }
.sketch-compact-layout .stencil-choices { order:2; flex:1 0 100%; overflow-x:auto; }
.sketch-compact-layout .sketch-workspace-footer { display:flex; min-height:46px; flex:none; }
.sketch-compact-layout .sketch-workspace-footer button { font-size:11px; min-height:40px; }
.sketch-compact-layout .draw-scale,.sketch-compact-layout .sketch-view { bottom:14px; }
.sketch-compact-layout #musicPill #trackPrevious { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; padding:0; }
@media(max-width:760px) {
 .sketch-compact-layout .sketch-main { padding-top:var(--sketch-top); }
 .sketch-compact-layout .sketch-workspace { min-height:260px; }
 .sketch-compact-layout .sketch-context-bar { gap:3px; }
 .sketch-compact-layout .floor-tabs { display:none; }
 .sketch-compact-layout .mobile-context-control[data-mobile-action='levels'] { display:block; order:2; min-height:44px; font-size:10px; }
 .sketch-compact-layout .sketch-level-panel.is-mobile-open { display:block; position:absolute; z-index:40; top:44px; left:0; width:100%; background:var(--paper); border-bottom:.5px solid var(--rule-strong); }
 .sketch-compact-layout .sketch-level-panel.is-mobile-open .floor-tabs { display:flex; }
 .sketch-compact-layout .sketch-level-panel .floor-references { display:none; }
 .sketch-compact-layout .sketch-level-panel.is-mobile-open .floor-references { display:flex; }
 .sketch-compact-layout #activeLayerName { display:block; font-size:9px; margin:0; }
 .sketch-compact-layout .sketch-primary-pill { bottom:64px; padding:2px 5px; }
 .sketch-compact-layout .sketch-primary-pill button { padding:0 8px; font-size:10px; }
 .sketch-compact-layout .sketch-workspace-footer { justify-content:flex-end; }
 .sketch-compact-layout .sketch-workspace-footer p { display:none; }
 .sketch-compact-layout .sketch-workspace-footer button { padding:0 8px; font-size:10px; }
 .sketch-compact-layout .draw-scale { font-size:9px; }
 .sketch-compact-layout .sketch-view button,.sketch-compact-layout .sketch-view output { min-width:28px; padding:0 5px; }
}

/* Slim palette, scoped to Sketch. Shared SuDu chrome remains untouched. */
.sketch-slim-layout #mobileSketchUi { display:none; }
.slim-palette { position:absolute; z-index:35; top:58px; left:8px; display:flex; flex-direction:column; padding:5px; border:0.5px solid var(--rule-strong); border-radius:25px; background:var(--paper); }
.slim-slot { display:flex; position:relative; }
.slim-tool,.slim-expand { color:var(--muted); display:flex; align-items:center; justify-content:center; padding:0; }
.slim-tool { width:32px; height:38px; border-radius:18px; }
.slim-expand { width:12px; height:38px; }
.slim-tool svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.slim-expand svg { width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:1; }
.slim-tool[aria-pressed='true'] { color:var(--ink); background:var(--rule); }
.slim-palette button:hover,.slim-flyout button:hover { color:var(--ink); }
.slim-palette button:focus-visible,.slim-flyout button:focus-visible { outline:1px solid var(--ink); outline-offset:2px; }
.slim-flyout { position:absolute; z-index:45; top:58px; left:70px; width:210px; max-height:calc(100% - 120px); overflow:auto; padding:8px; background:var(--paper); border:.5px solid var(--rule-strong); border-radius:10px; }
.slim-flyout[hidden],.slim-settings[hidden],.slim-finish[hidden] { display:none; }
.slim-flyout strong { display:block; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; padding:8px; border-bottom:.5px solid var(--rule); }
.slim-flyout button { display:block; width:100%; text-align:left; min-height:38px; padding:8px; font-size:12px; color:var(--muted); }
.slim-flyout button[aria-pressed='true'] { color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
.slim-settings { order:5; min-height:44px; font-size:10px; text-transform:uppercase; margin-left:auto; }
.slim-finish { position:absolute; z-index:35; right:12px; top:60px; border:.5px solid var(--rule-strong); background:var(--paper); border-radius:22px; padding:10px 16px; font-size:11px; }
.sketch-slim-layout .mobile-context-control[data-mobile-action='clear'] { display:block; order:6; font-size:10px; min-height:44px; }
@media(max-width:760px) {
 .slim-palette { position:relative; top:auto; bottom:auto; left:auto; transform:none; flex:none; align-self:center; flex-direction:row; padding:4px; margin:8px 0; max-width:100%; }
 .slim-slot { flex-direction:column; }
 .slim-tool { width:36px; height:30px; }
 .slim-expand { width:36px; height:14px; }
 .slim-expand svg { transform:rotate(-90deg); }
 .slim-flyout { top:auto; bottom:126px; left:50%; transform:translateX(-50%); width:min(280px,calc(100% - 16px)); max-height:45dvh; }
 .slim-flyout button { min-height:44px; }
 .slim-settings { font-size:9px; padding:0 5px; }
 .sketch-slim-layout .shape-panel,.sketch-slim-layout .stencil-panel { bottom:126px; }
}

/* Match STACK: brand left, page name aligned to the right inset. */
.sketch-product-divider { display:none; }
.sketch-product-name { margin-left:auto; text-align:right; font-size:13px; font-weight:500; line-height:1; letter-spacing:0; align-self:center; }

/* Occasional mobile utilities reveal above the dock, without resizing paper. */
.sketch-settings-toggle,.sketch-file-toggle { display:none; }
.sketch-file-options { display:contents; }
.sketch-site-rail { display:contents; }
@media(max-width:760px) {
 html.sudu-tool-page.sketch-mobile-utilities { --sudu-tool-footer:var(--sketch-site-rail-height,calc(24px + env(safe-area-inset-bottom,0px))); }
 html.sketch-mobile-utilities #suduBar { display:none!important; }
 .sketch-site-rail {
   display:flex; flex-direction:column; position:fixed; z-index:10010; bottom:0; left:0; right:0;
   padding-bottom:env(safe-area-inset-bottom,0px); background:var(--paper); border-top:.5px solid var(--rule-strong);
 }
 html.sketch-mobile-utilities.sketch-settings-open #suduBar {
   display:flex!important; position:static!important; width:100%; height:auto; min-height:52px;
   padding:8px var(--sudu-inset); flex-wrap:wrap; gap:18px; border:0; border-radius:0; transform:none;
 }
 html.sketch-mobile-utilities #suduBar #musicPill { position:static!important; transform:none; }
 .sketch-mobile-utilities .slim-palette { margin:5px 0; }
 .sketch-mobile-utilities .slim-tool,.sketch-mobile-utilities .slim-expand { width:clamp(26px,calc((100vw - 50px)/8),36px); }
 .sketch-mobile-utilities .sketch-settings-toggle {
   display:flex; align-items:center; justify-content:center; width:64px; height:24px; min-height:24px;
   padding:0; margin:0; align-self:center; border:0; color:var(--ink); background:none; flex:none;
 }
 .sketch-settings-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.2; }
 .sketch-settings-toggle[aria-expanded='true'] svg { transform:rotate(180deg); }
 .sketch-mobile-utilities .sketch-workspace-footer { min-height:36px; position:relative; }
 .sketch-mobile-utilities .sketch-workspace-footer > div { display:flex; align-items:center; }
 .sketch-mobile-utilities .sketch-workspace-footer button { min-height:36px; }
 .sketch-mobile-utilities .sketch-workspace-footer [data-mobile-action='clear'] { display:none; }
 .sketch-mobile-utilities .sketch-file-toggle { display:inline-flex; align-items:center; }
 .sketch-mobile-utilities .sketch-file-options { display:none; }
 .sketch-files-open .sketch-file-options {
   display:flex; flex-direction:column; position:absolute; z-index:50; right:0; bottom:calc(100% + 64px);
   width:180px; padding:6px; background:var(--paper); border:.5px solid var(--rule-strong); border-radius:10px;
 }
 .sketch-files-open .sketch-file-options button { width:100%; text-align:left; min-height:44px; border:0; }
}