:root {
  --tpad-accent: #6d28d9;
  --tpad-accent-dark: #5b21b6;
  --tpad-bg: #f5f3ff;
  --tpad-panel: #fff;
  --tpad-text: #2e1065;
  --tpad-muted: #6b6280;
  --tpad-border: #ddd6fe;
  --tpad-radius: 14px;
  --tpad-max: 880px;
}

.tpad-page {
  max-width: var(--tpad-max);
  margin: 0 auto;
  padding: 0.75rem 0.75rem 2rem;
  color: var(--tpad-text);
  overflow-x: clip;
}

.tpad-page__range {
  margin: 0.15rem 0 0;
  font-weight: 700;
}

.tpad-page__scope {
  margin: 0.45rem auto 0;
  max-width: 40rem;
  color: var(--tpad-muted);
  font-size: 0.92rem;
}

.tpad-page__header {
  text-align: center;
  margin-bottom: 0.75rem;
}

.tpad-page__header h1 {
  margin: 0.2rem 0;
  font-size: 1.45rem;
}

.tpad-page__lead,
.tpad-note {
  margin: 0.35rem 0 0;
  color: var(--tpad-muted);
  font-size: 0.92rem;
}

.tpad-panel {
  padding: 1rem;
  border: 2px solid var(--tpad-border);
  border-radius: var(--tpad-radius);
  background: var(--tpad-panel);
}

.tpad-choice {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .tpad-choice {
    grid-template-columns: 1fr 1fr;
  }
}

.tpad-choice__btn,
.tpad-actions button,
.tpad-copy {
  font: inherit;
  cursor: pointer;
  border-radius: 12px;
  border: 2px solid var(--tpad-accent);
  background: #fff;
  color: var(--tpad-accent-dark);
  padding: 0.85rem 1rem;
}

.tpad-choice__btn strong,
.tpad-choice__btn span {
  display: block;
}

.tpad-choice__btn span,
.tpad-kicker {
  color: var(--tpad-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.tpad-actions button,
.tpad-copy {
  max-width: 100%;
}
.tpad-choice__btn:hover,
.tpad-actions button:hover,
.tpad-copy:hover {
  background: var(--tpad-bg);
}

.tpad-progress {
  margin: 0;
  font-weight: 700;
}

.tpad-guide {
  display: none;
}

.tpad-target-wrap {
  position: relative;
}

.tpad-cue {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  color: #6d28d9;
}

.tpad-hand {
  display: block;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 46%;
}

.tpad-cue[data-cue='tap'] .tpad-hand,
.tpad-cue[data-cue='click'] .tpad-hand,
.tpad-cue[data-cue='hold'] .tpad-hand,
.tpad-cue[data-cue='double'] .tpad-hand {
  position: absolute;
  left: calc(50% + 1.35rem);
  top: calc(50% + 1.05rem);
  animation: tpad-hand-tap 1.35s ease-in-out infinite;
}

.tpad-target-wrap:has(.tpad-target--wide) .tpad-hand {
  left: calc(50% + 4.4rem);
  top: calc(50% - 0.15rem);
}

.tpad-cue[data-cue='hold'] .tpad-hand {
  animation-name: tpad-hand-hold;
  animation-duration: 1.8s;
}

.tpad-cue[data-cue='double'] .tpad-hand {
  animation-name: tpad-hand-double;
  animation-duration: 1.6s;
}

.tpad-cue[data-cue='move'],
.tpad-cue[data-cue='drag'] {
  width: 40px;
  height: 40px;
  animation: tpad-hand-move 2.8s ease-in-out infinite;
}

.tpad-cue[data-cue='drag'] {
  animation-name: tpad-hand-drag;
  animation-duration: 1.7s;
}

.tpad-cue[data-cue='points'] {
  width: 36px;
  height: 36px;
  margin: 0;
  animation: tpad-hand-tap 1.25s ease-in-out infinite;
}

.tpad-cue[data-cue='scroll-y'],
.tpad-cue[data-cue='scroll-x'],
.tpad-cue[data-cue='pinch'],
.tpad-cue[data-cue='two'],
.tpad-cue[data-cue='multi'] {
  inset: 0;
}

.tpad-cue[data-cue='scroll-y'] .tpad-hand,
.tpad-cue[data-cue='two'] .tpad-hand,
.tpad-cue[data-cue='multi'] .tpad-hand,
.tpad-cue[data-cue='pinch'] .tpad-hand,
.tpad-cue[data-cue='scroll-x'] .tpad-hand {
  position: absolute;
  top: 62%;
}

.tpad-cue .is-a .tpad-hand { left: 38%; }
.tpad-cue .is-b .tpad-hand { left: 54%; }

.tpad-cue[data-cue='scroll-y'] .tpad-hand,
.tpad-cue[data-cue='two'] .tpad-hand {
  animation: tpad-hand-slide-y 1.4s ease-in-out infinite;
}

.tpad-cue[data-cue='scroll-x'] .tpad-hand {
  top: 62%;
  animation: tpad-hand-slide-x 1.4s ease-in-out infinite;
}

.tpad-cue[data-cue='pinch'] .tpad-hand {
  top: auto;
  bottom: 6%;
}

.tpad-cue[data-cue='pinch'] .is-a .tpad-hand { animation: tpad-hand-pinch-a 1.5s ease-in-out infinite; }
.tpad-cue[data-cue='pinch'] .is-b .tpad-hand { animation: tpad-hand-pinch-b 1.5s ease-in-out infinite; }

.tpad-cue[data-cue='multi'] {
  inset: 0;
}

.tpad-cue[data-cue='multi'] .tpad-hand {
  top: 50%;
  margin-top: -20px;
  animation: tpad-hand-side 1.35s ease-in-out infinite;
}

@keyframes tpad-hand-side {
  0%, 100% { transform: translateY(8px); }
  50%, 72% { transform: translateY(0); }
}

.tpad-cue[data-cue='multi'] .is-a .tpad-hand { left: 0; }
.tpad-cue[data-cue='multi'] .is-b .tpad-hand { left: auto; right: 0; }

@keyframes tpad-hand-tap {
  0%, 100% { transform: translate(12px, 14px); }
  50%, 72% { transform: translate(0, 0); }
}

@keyframes tpad-hand-hold {
  0%, 100% { transform: translate(12px, 14px); }
  28%, 78% { transform: translate(0, 0); }
}

@keyframes tpad-hand-double {
  0%, 100% { transform: translate(12px, 14px); }
  20%, 32% { transform: translate(0, 0); }
  46% { transform: translate(8px, 8px); }
  60%, 72% { transform: translate(0, 0); }
}

@keyframes tpad-hand-move {
  0%, 12% { left: 36%; top: 42%; }
  30%, 42% { left: 78%; top: 42%; }
  58%, 70% { left: 36%; top: 78%; }
  86%, 100% { left: 78%; top: 78%; }
}

@keyframes tpad-hand-drag {
  0%, 12% { left: 22%; top: 62%; }
  78%, 100% { left: 78%; top: 62%; }
}

@keyframes tpad-hand-slide-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(36px); }
}

@keyframes tpad-hand-slide-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(42px); }
}

@keyframes tpad-hand-pinch-a {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-28px); }
}

@keyframes tpad-hand-pinch-b {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(28px); }
}

.tpad-stage {
  min-height: 220px;
}

.tpad-feedback {
  min-height: 1.4em;
  font-weight: 700;
}

.tpad-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.tpad-board,
.tpad-scroll,
.tpad-pinch-pad,
.tpad-multi,
.tpad-grid {
  position: relative;
  min-height: 0;
  border: 2px dashed var(--tpad-border);
  border-radius: 12px;
  background: #fafaff;
  touch-action: manipulation;
  box-sizing: border-box;
}

.tpad-board--drag,
.tpad-multi,
.tpad-pinch-pad--touch,
.tpad-grid {
  touch-action: none;
}

.tpad-scroll.is-y,
.tpad-scroll.is-x {
  overflow: hidden;
  height: min(420px, 52vh);
  touch-action: none;
}

.tpad-scroll__mover {
  padding: 1.25rem;
  text-align: center;
}

.tpad-scroll__mark {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 1.6rem;
  color: var(--tpad-accent);
}

body.tpad-focus {
  overflow: hidden;
}

body.tpad-focus .tpad-page {
  overflow: hidden;
}

body.tpad-focus [data-tpad-run] {
  overflow: hidden;
}

body.tpad-focus #pctrouble-header-menu,
body.tpad-focus #pctrouble-site > footer {
  display: none;
}

body.tpad-focus .tpad-page {
  max-width: none;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem 0.75rem;
}

body.tpad-focus .tpad-page__header {
  display: none;
}

body.tpad-focus [data-tpad-run] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.tpad-focus [data-tpad-run] > :not(.tpad-stage) {
  flex-shrink: 0;
}

body.tpad-focus .tpad-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

body.tpad-focus .tpad-stage > * {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

body.tpad-focus .tpad-scroll.is-y,
body.tpad-focus .tpad-scroll.is-x {
  height: 100%;
}

.tpad-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tpad-dot,
.tpad-point,
.tpad-target {
  font: inherit;
  border: 2px solid var(--tpad-accent);
  background: #fff;
  color: var(--tpad-text);
  border-radius: 999px;
  cursor: pointer;
}

.tpad-dot,
.tpad-point {
  width: min(4.5rem, 100%);
  height: auto;
  aspect-ratio: 1;
  max-width: 100%;
  max-height: 100%;
}

.tpad-point {
  min-width: 0;
  min-height: 0;
  padding: 0.15rem;
  font-size: clamp(0.7rem, 2vh, 0.95rem);
  line-height: 1.2;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.tpad-dot.is-next,
.tpad-point.is-next {
  background: #ddd6fe;
  box-shadow: inset 0 0 0 3px #c4b5fd;
}

.tpad-dot.is-done,
.tpad-point.is-done {
  background: #d1fae5;
  border-color: #0f766e;
}

.tpad-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  padding: 1rem;
  overflow: hidden;
  min-height: 16rem;
}

.tpad-target-wrap {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 12rem;
  padding: 0.5rem;
  box-sizing: border-box;
}

.tpad-target {
  display: grid;
  place-items: center;
  width: min(8rem, 42vh, 70%);
  height: auto;
  aspect-ratio: 1;
  max-height: 100%;
  margin: 0;
  font-size: 1.4rem;
  touch-action: none;
}

.tpad-target--wide {
  width: min(16rem, 86%);
  aspect-ratio: 2.6 / 1;
  border-radius: 16px;
  font-size: 1rem;
}

.tpad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "tl tc tr"
    "ml c mr"
    "bl bc br";
  gap: 0.5rem;
  padding: 0.75rem;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  min-height: 16rem;
}

body.tpad-focus .tpad-grid,
body.tpad-focus .tpad-board,
body.tpad-focus .tpad-target-wrap {
  min-height: 0;
  height: 100%;
}

.tpad-target.is-hot {
  transform: scale(0.96);
  background: #ede9fe;
}

.tpad-end {
  position: absolute;
  top: 50%;
  font-size: 1.5rem;
}

.tpad-end--start { left: 12%; }
.tpad-end--goal { right: 12%; }

.tpad-multi,
.tpad-pinch-pad {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
}

.tpad-finger-row {
  position: relative;
  display: flex;
  gap: 3rem;
  align-items: center;
  padding: 0 3.2rem;
  margin-bottom: 1rem;
}

.tpad-finger-mark {
  font-size: 1.8rem;
  line-height: 1;
}

.tpad-pinch-pad__note,
.tpad-timer {
  color: var(--tpad-muted);
}

.tpad-demo {
  position: relative;
  width: min(240px, 92%);
  height: 68px;
}

.tpad-demo-spot,
.tpad-demo-pad,
.tpad-demo-cursor,
.tpad-demo-finger,
.tpad-demo-track {
  position: absolute;
  display: block;
}

.tpad-demo-spot {
  width: 28px;
  height: 28px;
  border: 2px solid var(--tpad-accent);
  border-radius: 50%;
  background: #fff;
  left: 50%;
  top: 50%;
  margin: -14px 0 0 -14px;
}

.tpad-demo-pad {
  left: 18%;
  right: 18%;
  top: 16px;
  bottom: 10px;
  border: 2px dashed var(--tpad-border);
  border-radius: 12px;
  background: #fff;
}

.tpad-demo-cursor {
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  background: var(--tpad-accent);
  top: 8px;
  left: 18%;
  margin-left: -8px;
}

.tpad-demo-finger {
  width: 18px;
  height: 26px;
  border-radius: 11px;
  background: #7c3aed;
  top: 2px;
  left: 50%;
  margin-left: -9px;
  box-shadow: inset 0 -6px 0 rgba(255, 255, 255, 0.35);
}

.tpad-demo--tap .tpad-demo-finger,
.tpad-demo--press .tpad-demo-cursor {
  animation: tpad-onto 1.35s ease-in-out infinite;
}

.tpad-demo--hold .tpad-demo-finger {
  animation: tpad-hold 1.8s ease-in-out infinite;
}

.tpad-demo--double .tpad-demo-cursor {
  animation: tpad-double 1.6s ease-in-out infinite;
}

.tpad-demo--move .tpad-demo-spot:nth-child(1) { left: 16%; }
.tpad-demo--move .tpad-demo-spot:nth-child(2) { left: 50%; }
.tpad-demo--move .tpad-demo-spot:nth-child(3) { left: 84%; }
.tpad-demo--move .tpad-demo-cursor { animation: tpad-across 2.2s ease-in-out infinite; }

.tpad-demo--points .tpad-demo-spot:nth-child(1) { left: 22%; }
.tpad-demo--points .tpad-demo-spot:nth-child(2) { left: 50%; background: #ddd6fe; }
.tpad-demo--points .tpad-demo-spot:nth-child(3) { left: 78%; }
.tpad-demo--points .tpad-demo-finger { animation: tpad-points 2.1s ease-in-out infinite; }

.tpad-demo--scroll-y .tpad-demo-finger.is-a { left: 42%; }
.tpad-demo--scroll-y .tpad-demo-finger.is-b { left: 58%; }
.tpad-demo--scroll-y .tpad-demo-finger { animation: tpad-slide-y 1.4s ease-in-out infinite; }

.tpad-demo--scroll-x .tpad-demo-finger.is-a,
.tpad-demo--scroll-x .tpad-demo-finger.is-b { top: 22px; animation: tpad-slide-x 1.4s ease-in-out infinite; }
.tpad-demo--scroll-x .tpad-demo-finger.is-a { left: 34%; }
.tpad-demo--scroll-x .tpad-demo-finger.is-b { left: 48%; }

.tpad-demo--pinch .tpad-demo-finger { top: 22px; }
.tpad-demo--pinch .tpad-demo-finger.is-a { left: 42%; animation: tpad-pinch-a 1.5s ease-in-out infinite; }
.tpad-demo--pinch .tpad-demo-finger.is-b { left: 58%; animation: tpad-pinch-b 1.5s ease-in-out infinite; }

.tpad-demo--drag .tpad-demo-spot:nth-child(1) { left: 22%; }
.tpad-demo--drag .tpad-demo-spot:nth-child(2) { left: 78%; }
.tpad-demo--drag .tpad-demo-track {
  left: 22%;
  right: 22%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #ddd6fe;
}
.tpad-demo--drag .tpad-demo-finger { animation: tpad-drag 1.6s ease-in-out infinite; }

.tpad-demo--multi .tpad-demo-finger { animation: tpad-onto 1.35s ease-in-out infinite; }
.tpad-demo--multi .tpad-demo-finger.is-a { left: 42%; }
.tpad-demo--multi .tpad-demo-finger.is-b { left: 58%; }

.tpad-demo--two .tpad-demo-finger.is-a { left: 42%; }
.tpad-demo--two .tpad-demo-finger.is-b { left: 58%; }
.tpad-demo--two .tpad-demo-finger { animation: tpad-slide-y 1.4s ease-in-out infinite; }

@keyframes tpad-onto {
  0%, 100% { transform: translateY(0) scale(1); }
  55%, 78% { transform: translateY(24px) scale(0.9); }
}

@keyframes tpad-hold {
  0%, 100% { transform: translateY(0) scale(1); }
  30%, 80% { transform: translateY(24px) scale(0.9); }
}

@keyframes tpad-double {
  0%, 100% { transform: translateY(0) scale(1); }
  22%, 34% { transform: translateY(24px) scale(0.9); }
  48% { transform: translateY(6px) scale(1); }
  62%, 74% { transform: translateY(24px) scale(0.9); }
}

@keyframes tpad-across {
  0%, 10% { left: 16%; transform: scale(1); }
  28%, 40% { left: 50%; transform: scale(0.85); }
  58%, 74% { left: 84%; transform: scale(0.85); }
  100% { left: 16%; transform: scale(1); }
}

@keyframes tpad-points {
  0%, 18% { left: 22%; transform: translateY(8px); }
  32%, 48% { left: 22%; transform: translateY(26px) scale(0.9); }
  62%, 78% { left: 50%; transform: translateY(26px) scale(0.9); }
  100% { left: 78%; transform: translateY(8px); }
}

@keyframes tpad-slide-y {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(28px); }
}

@keyframes tpad-slide-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(36px); }
}

@keyframes tpad-pinch-a {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-28px); }
}

@keyframes tpad-pinch-b {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(28px); }
}

@keyframes tpad-drag {
  0%, 15% { left: 22%; transform: translateY(26px) scale(0.9); }
  80%, 100% { left: 78%; transform: translateY(26px) scale(0.9); }
}

.is-reduce .tpad-demo-cursor,
.is-reduce .tpad-demo-finger {
  animation: none;
}

.tpad-bars { display: grid; gap: 0.25rem; margin-top: 0.4rem; }
.tpad-bar { display: grid; grid-template-columns: 5.5rem 1fr 2rem; gap: 0.35rem; align-items: center; font-size: 0.8rem; }
.tpad-bar__track { height: 8px; background: #ede9fe; border-radius: 99px; }
.tpad-bar__fill { display: block; height: 100%; background: var(--tpad-accent); border-radius: 99px; }
.tpad-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8rem; color: var(--tpad-muted); }
.tpad-chart__list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.tpad-chart__list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(5.5rem, 8rem) minmax(4.5rem, 7rem) minmax(0, 1fr);
  gap: 0.35rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--tpad-border);
}

@media (max-width: 860px) {
  .tpad-chart__list li {
    grid-template-columns: 1.5rem minmax(0, 1fr);
  }
  .tpad-chart__list li span:nth-child(3),
  .tpad-chart__list small {
    grid-column: 2;
  }
}

@media (max-height: 720px) {
  .tpad-guide {
    height: 76px;
  }

  .tpad-demo {
    height: 60px;
  }

  body.tpad-focus .tpad-panel {
    padding: 0.55rem 0.75rem;
  }

  body.tpad-focus [data-tpad-run] {
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.tpad-chart__list small { color: var(--tpad-muted); }
.tpad-feel { margin: 0.6rem 0; }
.tpad-feel label { display: block; margin: 0.15rem 0; }
.tpad-gate { padding: 1rem; border-radius: 12px; background: #fff7ed; }

@media (max-width: 640px) {
  .tpad-chart__list li { grid-template-columns: 1.5rem 1fr; }
  .tpad-chart__list small { grid-column: 2; }
}