/* The sandbox borrows the docs palette so the frame reads as part of the page it is
   embedded in — same purple, same neutrals, same radii. */
:root {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --border: #ececef;
  --border-strong: #e0e0e0;
  --text: #212121;
  --text-strong: #111113;
  --muted: #757575;
  --brand: #7700ff;
  --brand-hover: #6200d6;
  --brand-soft: rgba(119, 0, 255, 0.09);
  --brand-ring: rgba(119, 0, 255, 0.22);
  --ink: #111113;
  --ink-fg: #ffffff;
  --ok: #15803d;
  --ok-soft: rgba(21, 128, 61, 0.1);
  --veil: rgba(17, 17, 19, 0.06);
  --shadow-card: 0 1px 2px rgba(17, 17, 19, 0.05);
  --shadow-lift: 0 12px 28px -18px rgba(17, 17, 19, 0.45);

  --panel-bg: #151518;
  --panel-surface: #1e1e22;
  --panel-border: #303036;
  --panel-text: #ececef;
  --panel-muted: #a6a6ae;
  --panel-accent: #c58aff;
  --add: #4ade80;
  --remove: #f87171;

  --radius: 12px;
  --radius-sm: 8px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #161618;
    --surface: #1e1e20;
    --surface-2: #232326;
    --border: #33333a;
    --border-strong: #44444c;
    --text: #ececef;
    --text-strong: #fbfbfc;
    --muted: #a6a6ae;
    --brand: #a85cff;
    --brand-hover: #c58aff;
    --brand-soft: rgba(168, 92, 255, 0.14);
    --brand-ring: rgba(168, 92, 255, 0.3);
    --ink: #fbfbfc;
    --ink-fg: #111113;
    --ok: #4ade80;
    --ok-soft: rgba(74, 222, 128, 0.12);
    --veil: rgba(0, 0, 0, 0.18);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 12px 28px -18px rgba(0, 0, 0, 0.8);
    --panel-bg: #0f0f11;
    --panel-surface: #1a1a1e;
    --panel-border: #2b2b31;

    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: #161618;
  --surface: #1e1e20;
  --surface-2: #232326;
  --border: #33333a;
  --border-strong: #44444c;
  --text: #ececef;
  --text-strong: #fbfbfc;
  --muted: #a6a6ae;
  --brand: #a85cff;
  --brand-hover: #c58aff;
  --brand-soft: rgba(168, 92, 255, 0.14);
  --brand-ring: rgba(168, 92, 255, 0.3);
  --ink: #fbfbfc;
  --ink-fg: #111113;
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.12);
  --veil: rgba(0, 0, 0, 0.18);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 12px 28px -18px rgba(0, 0, 0, 0.8);
  --panel-bg: #0f0f11;
  --panel-surface: #1a1a1e;
  --panel-border: #2b2b31;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font:
    15px/1.55 ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  height: 100%;
}

/* Both panes scroll on their own, so they must be allowed to shrink — grid items
   default to min-height/min-width auto and would otherwise push each other out. */
.stage,
.panel {
  min-width: 0;
  min-height: 0;
}

/* The frame is embedded in a page people scroll past. Until someone takes the demo
   over, the panes must not swallow that scroll — so they only clip, and the tour
   moves them with scrollTop, which `overflow: hidden` still allows. */
.stage,
.panel {
  overflow: hidden;
}

.shell[data-live] .stage,
.shell[data-live] .panel {
  overflow-y: auto;
}

/* ---------------------------------------------------------------- stage */

/* The sandbox app is deliberately monochrome. Purple belongs to Paintless alone — if
   the app used it too, nobody could tell which buttons are the product and which are
   the tool pointing at it. */

.stage {
  background: var(--bg);
}

.stage-app {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px 44px;
}

.stage-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0 13px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}

.logo-mark {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: var(--ink);
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
}

.nav a:hover {
  color: var(--text);
}

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}

.doc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 22px;
}

.doc-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.doc-title {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.025em;
  color: var(--text-strong);
}

.doc-actions {
  display: flex;
  gap: 8px;
}

.pill {
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 7px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.pill:hover {
  background: var(--surface-2);
}

.pill-solid {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-fg);
  font-weight: 600;
}

.pill-solid:hover {
  filter: brightness(1.3);
}

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.rail-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sheet,
.card,
.feed {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.sheet {
  padding: 20px;
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.sheet-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.sheet-client {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.sheet-actions {
  display: flex;
  gap: 8px;
}

.items {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.items th {
  padding: 14px 0 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

.items td {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.items .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.item-name {
  display: block;
  color: var(--text-strong);
  font-weight: 500;
}

.item-detail {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.items tfoot td {
  padding-top: 14px;
  border-bottom: none;
  font-weight: 700;
  color: var(--text-strong);
}

.card {
  padding: 20px;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-label {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* The one flash of colour the app allows itself, and it carries meaning. */
.status {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 11px;
  font-weight: 600;
}

.price {
  margin: 10px 0 18px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--border);
  list-style: none;
  font-size: 13px;
}

.facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.facts svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 16px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-strong);
  cursor: pointer;
}

.card-link:hover {
  color: var(--muted);
}

.feed {
  padding: 20px;
}

.feed-title {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.events {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.events li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 0 0 16px 22px;
}

.events li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.events li:last-child {
  padding-bottom: 0;
}

.events li:last-child::before {
  display: none;
}

.event-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
}

.event-who {
  color: var(--text-strong);
  font-weight: 500;
}

.event-when {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.event-what {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12.5px;
}

.composer {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.composer input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
}

.composer input:focus {
  outline: none;
  border-color: var(--ink);
}

/* ---------------------------------------------------------------- panel */

.panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 18px 16px;
  background: var(--panel-bg);
  border-left: 1px solid var(--panel-border);
  color: var(--panel-text);
}

/* The picker resolves targets with elementFromPoint, so the panel steps aside while
   picking — the app is the only thing you can select. */
.panel[data-picking] {
  pointer-events: none;
  opacity: 0.55;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-mark {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(140deg, var(--panel-accent), var(--brand));
}

.panel-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tour-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--panel-surface);
  color: var(--panel-muted);
  font: inherit;
  font-size: 11px;
}

.tour-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.tour-status.playing {
  color: var(--panel-accent);
}

.tour-status.playing::before {
  animation: tour-blink 1.6s ease-in-out infinite;
}

@keyframes tour-blink {
  50% {
    opacity: 0.25;
  }
}

/* The four stages stay on screen the whole time, so the run always reads as progress
   through a pipeline rather than a list of messages. */
.rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail-stage {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 8px;
  border-top: 2px solid var(--panel-border);
  transition:
    border-color 0.3s ease,
    color 0.3s ease;
}

.rail-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--panel-muted);
}

.rail-stage[data-state='done'] {
  border-top-color: var(--panel-accent);
}

.rail-stage[data-state='done'] .rail-name {
  color: var(--panel-text);
}

.rail-stage[data-state='active'] {
  border-top-color: var(--panel-accent);
}

.rail-stage[data-state='active'] .rail-name {
  color: var(--panel-accent);
}

.intro {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--panel-surface);
  padding: 16px;
}

.intro-lead {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
}

.intro-hint {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--panel-muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  padding: 4px 9px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--panel-muted);
}

.flow {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding: 0 0 20px 20px;
  animation: step-in 0.32s ease-out both;
}

/* The rail line joins consecutive steps; the last one stops at its own dot. */
.step::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--panel-border);
}

.step:last-child::before {
  display: none;
}

.step::after {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--panel-accent);
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.step-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--panel-accent);
}

.step-title {
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.step-detail {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--panel-muted);
}

.step-source {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: var(--panel-surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--panel-text);
  overflow-wrap: anywhere;
}

.diff {
  display: flex;
  flex-direction: column;
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.32);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.diff-add {
  color: var(--add);
}

.diff-remove {
  color: var(--remove);
}

.ship {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
}

.ship:hover {
  background: var(--brand-hover);
}

.receipt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(74, 222, 128, 0.09);
}

.receipt-mark {
  font-size: 15px;
  color: var(--add);
}

.receipt-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.receipt-branch {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--panel-muted);
  overflow-wrap: anywhere;
}

.undo {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
  color: var(--panel-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}

.panel-note {
  margin: auto 0 0;
  padding-top: 14px;
  font-size: 11px;
  color: var(--panel-muted);
}

/* ---------------------------------------------------------------- brush */

.brush {
  position: fixed;
  right: 356px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--brand) url('data:image/png;base64,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') center / 32px 32px no-repeat;
  cursor: pointer;
  box-shadow:
    0 0 0 4px var(--brand-soft),
    0 6px 18px -4px var(--brand-ring);
  z-index: 20;
  transition: transform 0.16s ease;
}

.brush:hover:not(:disabled) {
  transform: scale(1.06);
}

.brush:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------------------------------------------------------------- tour */

.tour-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
  /* One crossing speed for the ring, the veil and the caption — FADE_MS in tour.tsx
     waits exactly this long, so a beat never starts while the last one is still going. */
  --fade: 150ms;
}

/* Everything except the beat's subject goes soft. The hole is punched with a second
   mask layer rather than four panes around it, so there are no seams where two blurred
   regions meet. It only ever moves while the veil is invisible, so nothing here needs
   to animate. */
.tour-veil {
  position: fixed;
  inset: 0;
  /* Light enough to read through — this is focus, not a modal. */
  background: var(--veil);
  backdrop-filter: blur(1.2px);
  -webkit-backdrop-filter: blur(1.2px);
  --hole-pad: 10px;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position:
    0 0,
    calc(var(--hole-x) - var(--hole-pad)) calc(var(--hole-y) - var(--hole-pad));
  mask-position:
    0 0,
    calc(var(--hole-x) - var(--hole-pad)) calc(var(--hole-y) - var(--hole-pad));
  -webkit-mask-size:
    100% 100%,
    calc(var(--hole-w) + var(--hole-pad) * 2) calc(var(--hole-h) + var(--hole-pad) * 2);
  mask-size:
    100% 100%,
    calc(var(--hole-w) + var(--hole-pad) * 2) calc(var(--hole-h) + var(--hole-pad) * 2);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 1;
  transition: opacity var(--fade) ease-out;
}

.tour-veil.faded {
  opacity: 0;
}

/* Without a cut-out the veil would cover the very thing it is meant to single out. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .tour-veil {
    display: none;
  }
}

.tour-spot {
  position: fixed;
  border: 2px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow:
    0 0 0 4px var(--brand-soft),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  opacity: 1;
  transition: opacity var(--fade) ease-out;
}

.tour-spot.faded {
  opacity: 0;
}

.tour-callout {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(272px, calc(100vw - 28px));
  transform: translate(-50%, 0);
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #151518;
  color: #f4f4f6;
  border: 1px solid #303036;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55);
  font-size: 13px;
  line-height: 1.5;
  opacity: 1;
  transition: opacity var(--fade) ease-out;
}

.tour-callout.faded {
  opacity: 0;
}

/* A step counter tells the viewer how much of the loop is left to watch. */
.tour-beat {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #c58aff;
}

.tour-callout.above {
  transform: translate(-50%, -100%);
}

.tour-callout.left {
  transform: translate(-50%, -50%);
}

/* The beak points back at whatever the caption is about. */
.tour-callout::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  background: inherit;
  border-left: 1px solid #303036;
  border-top: 1px solid #303036;
  transform: rotate(45deg);
}

.tour-callout.above::after {
  top: auto;
  bottom: -5px;
  border: none;
  border-right: 1px solid #303036;
  border-bottom: 1px solid #303036;
}

.tour-callout.left::after {
  left: auto;
  right: -5px;
  top: 50%;
  margin: -4px 0 0;
  border: none;
  border-top: 1px solid #303036;
  border-right: 1px solid #303036;
}

/* An actual arrow, travelling an actual distance — the viewer follows the pointer,
   so it has to look and move like one. */
.tour-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.34, 0, 0.16, 1);
  animation: tour-fade var(--fade) ease-out;
}

.tour-cursor::before {
  content: '';
  position: absolute;
  left: -19px;
  top: -19px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-soft);
}

.tour-arrow {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 22px;
  height: 27px;
  fill: var(--brand);
  stroke: #ffffff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

.tour-cursor::after {
  content: '';
  position: absolute;
  left: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0;
}

.tour-cursor.pressed::after {
  animation: tour-press 0.5s ease-out;
}

@keyframes tour-fade {
  from {
    opacity: 0;
  }
}

@keyframes tour-press {
  from {
    opacity: 0.9;
    transform: scale(0.35);
  }
  to {
    opacity: 0;
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-veil,
  .tour-spot,
  .tour-callout,
  .tour-cursor {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Narrow means a phone-sized frame, not a narrow desktop. The app keeps its own
   proportions and gives up chrome instead of legibility, and the Paintless pane shrinks
   to the strip that shows where the run has got to. */
@media (max-width: 860px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 13rem);
  }

  .panel {
    gap: 12px;
    padding: 14px 14px 12px;
    border-left: none;
    border-top: 1px solid var(--panel-border);
  }

  .stage-app {
    padding: 0 16px 28px;
  }

  .stage-header {
    padding: 12px 0 10px;
  }

  .nav a {
    display: none;
  }

  .doc-head {
    display: grid;
    gap: 12px;
    padding: 18px 0 16px;
  }

  .doc-title {
    font-size: 21px;
  }

  .doc-actions {
    flex-wrap: wrap;
  }

  .columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .sheet,
  .card,
  .feed {
    padding: 16px;
  }

  .price {
    font-size: 26px;
  }

  .intro {
    padding: 13px;
  }

  .intro-lead {
    margin-bottom: 11px;
    font-size: 13px;
  }

  .panel-note {
    display: none;
  }

  .brush {
    right: 16px;
    bottom: calc(13rem + 14px);
  }
}