.tj{margin:22px 0 0;display:grid;gap:14px;justify-items:start}.tj-stage{zoom:.8;--t:10s;position:relative;width:200px;height:168px;border-radius:16px;background:radial-gradient(closest-side,hsl(var(--primary)/.06),transparent),hsl(var(--surface));border:1px solid hsl(var(--border-subtle,var(--border)))}.tj figcaption{font-size:15px;line-height:1.5;color:hsl(var(--text-secondary));max-width:44ch;text-wrap:pretty}.tj figcaption b{color:hsl(var(--text-primary));font-weight:600}@media (pointer:coarse){.tj-mouse{display:none}}@media (max-width:560px){.tj{margin-top:14px;gap:10px}.tj-stage{zoom:.72}}.tj-note{position:relative;display:block;width:42px;height:34px;border-radius:4px;background:hsl(var(--surface-elevated));border:1px solid hsl(var(--border-subtle,var(--border)));overflow:hidden}.tj-pad{position:absolute;inset:-1px;border-radius:4px;background:color-mix(in srgb,var(--hc) 75%,transparent);border:1px solid color-mix(in srgb,var(--hc) 40%,transparent);transform-origin:50% 100%}.tj-ghost .tj-pad{transform:scaleY(.6)}.tj-feel .tj-pad{translate:6px 0}.tj-acc{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font-size:12px;font-weight:700;line-height:1;font-style:normal;color:rgba(255,255,255,.7)}.tj-mark{position:absolute;inset:0;z-index:1;width:100%;height:100%}.tj-mark line{stroke:rgba(255,255,255,.7);stroke-width:1.2;stroke-linecap:round}.tj-chevs{position:absolute;z-index:1;right:3px;bottom:3px}.tj-chevs path{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}.tj-held{position:absolute;left:50%;top:50%;width:42px;height:34px;transform:translate(-50%,-50%)}.tj-held .tj-note{position:absolute;inset:0;opacity:0}.tj-held .tj-is-normal{opacity:1}.tj-target{position:absolute;display:grid;justify-items:center;gap:5px;transform:translate(-50%,-50%)}.tj-target .tj-note{width:34px;height:28px}.tj-target b{font:600 10px/1 IBM Plex Mono,ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--text-muted))}.tj-up{left:50%;top:20%}.tj-down{left:50%;top:84%}.tj-left{left:20%;top:52%}.tj-right{left:80%;top:52%}.tj-x{left:80%;top:19.3%}.tj-cross{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid hsl(var(--border));background:hsl(var(--surface-elevated));color:hsl(var(--text-muted));box-shadow:0 4px 10px hsl(var(--background)/.5)}.tj-cross svg{width:10px;height:10px}.tj-finger{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:hsl(var(--primary)/.28);box-shadow:0 0 0 2px hsl(var(--primary)),0 0 18px hsl(var(--primary)/.55);opacity:0;pointer-events:none}@media (prefers-reduced-motion:no-preference){.tj-target{opacity:0;animation:tj-bloom var(--t) ease-out infinite}.tj-finger{animation:tj-finger var(--t) ease-in-out infinite}.tj-is-normal{animation:tj-n-normal var(--t) step-end infinite}.tj-is-accent{animation:tj-n-accent var(--t) step-end infinite}.tj-is-ghost{animation:tj-n-ghost var(--t) step-end infinite}.tj-is-flam{animation:tj-n-flam var(--t) step-end infinite}.tj-is-feel{animation:tj-n-feel var(--t) step-end infinite}.tj-is-off{animation:tj-n-off var(--t) step-end infinite}.tj-up .tj-note{animation:tj-lit-up var(--t) infinite}.tj-down .tj-note{animation:tj-lit-down var(--t) infinite}.tj-left .tj-note{animation:tj-lit-left var(--t) infinite}.tj-right .tj-note{animation:tj-lit-right var(--t) infinite}.tj-x .tj-cross{animation:tj-lit-x var(--t) infinite}.tj-up b{animation:tj-word-up var(--t) infinite}.tj-down b{animation:tj-word-down var(--t) infinite}.tj-left b{animation:tj-word-left var(--t) infinite}.tj-right b{animation:tj-word-right var(--t) infinite}.tj-x b{animation:tj-word-x var(--t) infinite}}@keyframes tj-bloom{0%,7%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%,86%{opacity:1;transform:translate(-50%,-50%) scale(1)}92%,to{opacity:0;transform:translate(-50%,-50%) scale(.6)}}@keyframes tj-finger{0%{opacity:0;transform:translate(0) scale(1.4)}3%{opacity:1;transform:translate(0) scale(1)}6%{transform:translate(0) scale(.85)}12%,14%{transform:translate(0) scale(1)}18%,24%{transform:translateY(-57px)}28%{transform:translate(0)}32%,38%{transform:translateY(50px)}42%{transform:translate(0)}46%,52%{transform:translate(-60px,-3px)}56%{transform:translate(0)}60%,66%{transform:translate(60px,-3px)}72%,82%{opacity:1;transform:translate(60px,-57px)}86%,to{opacity:0;transform:translate(60px,-57px)}}@keyframes tj-n-normal{0%{opacity:1}18%{opacity:0}84%{opacity:1}}@keyframes tj-n-accent{0%{opacity:0}18%{opacity:1}32%{opacity:0}}@keyframes tj-n-ghost{0%{opacity:0}32%{opacity:1}46%{opacity:0}}@keyframes tj-n-flam{0%{opacity:0}46%{opacity:1}60%{opacity:0}}@keyframes tj-n-feel{0%{opacity:0}60%{opacity:1}74%{opacity:0}}@keyframes tj-n-off{0%{opacity:0}74%{opacity:1}84%{opacity:0}}@keyframes tj-lit-up{0%,17%{box-shadow:0 0 0 0 transparent}18%,25%{box-shadow:0 0 0 2px hsl(var(--primary)),0 0 14px hsl(var(--primary)/.5)}27%,to{box-shadow:0 0 0 0 transparent}}@keyframes tj-lit-down{0%,31%{box-shadow:0 0 0 0 transparent}32%,39%{box-shadow:0 0 0 2px hsl(var(--primary)),0 0 14px hsl(var(--primary)/.5)}41%,to{box-shadow:0 0 0 0 transparent}}@keyframes tj-lit-left{0%,45%{box-shadow:0 0 0 0 transparent}46%,53%{box-shadow:0 0 0 2px hsl(var(--primary)),0 0 14px hsl(var(--primary)/.5)}55%,to{box-shadow:0 0 0 0 transparent}}@keyframes tj-lit-right{0%,59%{box-shadow:0 0 0 0 transparent}60%,67%{box-shadow:0 0 0 2px hsl(var(--primary)),0 0 14px hsl(var(--primary)/.5)}69%,to{box-shadow:0 0 0 0 transparent}}@keyframes tj-lit-x{0%,73%{border-color:hsl(var(--border));color:hsl(var(--text-muted));background:hsl(var(--surface-elevated))}74%,82%{border-color:var(--mode-delete);color:var(--mode-delete);background:color-mix(in srgb,var(--mode-delete) 18%,hsl(var(--surface)))}84%,to{border-color:hsl(var(--border));color:hsl(var(--text-muted));background:hsl(var(--surface-elevated))}}@keyframes tj-word-up{0%,17%,27%,to{color:hsl(var(--text-muted))}18%,25%{color:hsl(var(--primary-ink))}}@keyframes tj-word-down{0%,31%,41%,to{color:hsl(var(--text-muted))}32%,39%{color:hsl(var(--primary-ink))}}@keyframes tj-word-left{0%,45%,55%,to{color:hsl(var(--text-muted))}46%,53%{color:hsl(var(--primary-ink))}}@keyframes tj-word-right{0%,59%,69%,to{color:hsl(var(--text-muted))}60%,67%{color:hsl(var(--primary-ink))}}@keyframes tj-word-x{0%,73%,84%,to{color:hsl(var(--text-muted))}74%,82%{color:var(--mode-delete)}}